/*
Theme Name: Seibel Schädlingsbekämpfung Berlin
Theme URI: https://seibel-schaedlingsbekaempfung-berlin.de/
Author: Seibel365
Description: Luftige Notdienst-Landingpage für Schädlingsbekämpfung in Berlin mit WordPress-Editorbereich und Sticky Sidebar.
Version: 1.4.3
Text Domain: seibel-schaedlingsbekaempfung-berlin
*/

/* ------------------------------------------------------------
   Fonts / Lokale Schriftdateien
------------------------------------------------------------ */
@font-face {
  font-family: Poppins;
  src: url("fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ------------------------------------------------------------
   Variablen / Farben / Schatten / Container
------------------------------------------------------------ */
:root {
  --blue: #005baa;
  --blue-light: #019fe4;
  --red: #d10a10;
  --red-dark: #b3000f;
  --green: #16a34a;
  --green-dark: #15803d;
  --white: #fff;
  --gray: #f5f7f8;
  --gray-soft: #f8fafc;
  --gray-2: #e8eef3;
  --text: #1e293b;
  --muted: #64748b;
  --radius: 24px;
  --radius-lg: 30px;
  --shadow: 0 16px 42px rgba(15, 23, 42, 0.09);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.065);
  --container: 1320px;
  --font-heading: Poppins, sans-serif;
  --font-body: "Open Sans", sans-serif;
}
/* ------------------------------------------------------------
   Basis / Reset / Container
------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html{
	scroll-behavior:smooth;
	overflow-x:clip;
	overflow-y:visible;
}

body{
	margin:0;
	font-family:var(--font-body);
	color:var(--text);
	background:#fff;
	font-size:16px;
	line-height:1.65;
	overflow-x:clip;
	overflow-y:visible;
}


a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
button,
input,
textarea,
select {
  font: inherit;
}
.container {
  width: min(var(--container), calc(100% - 44px));
  margin: 0 auto;
}
.content-narrow {
  max-width: 860px;
}

/* ------------------------------------------------------------
   Premium Seitenloader
------------------------------------------------------------ */

.site-loader{
	position:fixed;
	inset:0;
	z-index:99999;
	display:grid;
	place-items:center;
	background:
		radial-gradient(circle at 18% 82%, rgba(209,10,16,.07), transparent 34%),
		radial-gradient(circle at 82% 18%, rgba(1,159,228,.10), transparent 38%),
		#fff;
	overflow:hidden;
	transition:opacity .55s ease, visibility .55s ease, transform .55s ease;

	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.site-loader.is-visible{
	opacity:1;
	visibility:visible;
	pointer-events:none;
}

.site-loader.is-hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:scale(1.015);
}

.site-loader-inner{
	position:relative;
	z-index:3;
	text-align:center;
	transform:translateY(0);
	animation:loaderTextIn .7s ease both;
}

.site-loader-inner strong{
	display:block;
	font-family:var(--font-heading);
	font-size:clamp(38px,6vw,76px);
	font-weight:800;
	line-height:1;
	letter-spacing:.09em;
	color:var(--blue);
	text-shadow:0 12px 32px rgba(0,91,170,.10);
}

.site-loader-inner span{
	display:block;
	margin-top:14px;
	font-size:15px;
	font-weight:900;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted);
}

.site-loader-progress{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:3px;
	background:rgba(226,232,240,.65);
	overflow:hidden;
	z-index:4;
}

.site-loader-progress span{
	display:block;
	width:100%;
	height:100%;
	transform:translateX(-100%);
	background:linear-gradient(90deg,var(--red),var(--blue-light),var(--blue));
	box-shadow:0 0 18px rgba(1,159,228,.45);
	animation:loaderProgress 1.45s cubic-bezier(.65,0,.2,1) forwards;
}

.site-loader-network{
	position:absolute;
	inset:0;
	z-index:1;
	opacity:.42;
	pointer-events:none;
}

.loader-node{
	position:absolute;
	width:14px;
	height:14px;
	border-radius:50%;
	background:#fff;
	border:2px solid rgba(1,159,228,.55);
	box-shadow:
		0 0 0 8px rgba(1,159,228,.06),
		0 0 24px rgba(1,159,228,.20);
	animation:loaderNodePulse 1.8s ease-in-out infinite;
}

.node-1{left:16%;top:35%;}
.node-2{left:29%;top:58%;animation-delay:.15s;}
.node-3{left:50%;top:27%;animation-delay:.3s;}
.node-4{left:68%;top:62%;animation-delay:.45s;}
.node-5{left:83%;top:39%;animation-delay:.6s;}

.loader-line{
	position:absolute;
	height:2px;
	transform-origin:left center;
	background:linear-gradient(90deg,rgba(209,10,16,.18),rgba(1,159,228,.30));
	overflow:hidden;
	border-radius:999px;
}

.loader-line::after{
	content:"";
	position:absolute;
	inset:0;
	width:36%;
	background:linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.2),
		var(--blue-light),
		transparent
	);
	filter:blur(.2px);
	animation:loaderSignal 1.4s ease-in-out infinite;
}

.line-1{
	left:16.7%;
	top:36%;
	width:17%;
	transform:rotate(30deg);
}

.line-2{
	left:30%;
	top:57%;
	width:24%;
	transform:rotate(-34deg);
}

.line-3{
	left:51%;
	top:29%;
	width:25%;
	transform:rotate(38deg);
}

.line-4{
	left:68.8%;
	top:61%;
	width:17%;
	transform:rotate(-30deg);
}

.line-2::after{animation-delay:.18s;}
.line-3::after{animation-delay:.36s;}
.line-4::after{animation-delay:.54s;}

@keyframes loaderProgress{
	0%{transform:translateX(-100%);}
	48%{transform:translateX(-32%);}
	100%{transform:translateX(0);}
}

@keyframes loaderSignal{
	0%{transform:translateX(-120%);}
	100%{transform:translateX(320%);}
}

@keyframes loaderNodePulse{
	0%,100%{
		transform:scale(1);
		box-shadow:
			0 0 0 8px rgba(1,159,228,.06),
			0 0 24px rgba(1,159,228,.18);
	}
	50%{
		transform:scale(1.18);
		box-shadow:
			0 0 0 12px rgba(209,10,16,.05),
			0 0 34px rgba(1,159,228,.28);
	}
}

@keyframes loaderTextIn{
	from{
		opacity:0;
		transform:translateY(14px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}

@media (max-width:620px){

	.site-loader-inner strong{
		font-size:42px;
		letter-spacing:.06em;
	}

	.site-loader-inner span{
		font-size:12px;
		letter-spacing:.1em;
	}

	.loader-node{
		width:11px;
		height:11px;
	}

}

/* ------------------------------------------------------------
   Typografie / Überschriften / Kicker
------------------------------------------------------------ */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: 1.12;
  margin: 0;
  color: var(--text);
}
h1 {
  font-size: clamp(46px, 6vw, 82px);
  letter-spacing: -0.045em;
  max-width: 860px;
}
h2 {
  font-size: clamp(36px, 4vw, 58px);
  letter-spacing: -0.035em;
}
h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
}
.kicker {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--blue-light);
}

.kicker,
.page-kicker{
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.kicker::before,
.page-kicker::before{
	content:"⌯";
	font-family:"Segoe UI Symbol","Arial Unicode MS","Noto Sans Symbols 2","Noto Sans Symbols",sans-serif;
	color:var(--red);
	font-size:22px;
	font-weight:300;
	line-height:2;
	transform:translateY(-2px);
}

/* ------------------------------------------------------------
   Header / Navigation / Mobile-Menü
------------------------------------------------------------ */
.site-header{
  position:sticky;
  top:0;
  z-index:2500;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(226,232,240,.9);
}

.header-inner{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
}

.site-logo{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  line-height:1.05;
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--blue);
}

.site-logo img{
  display:block;
  width:auto;
  height:48px;
  max-width:220px;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:26px;
  min-width:0;
}

.main-menu{
  display:flex;
  align-items:center;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

.main-menu li{
  position:relative;
  margin:0;
}

.main-menu a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:84px;
  padding:0 13px;
  font-weight:800;
  font-size:15px;
  line-height:1;
  color:var(--text);
  white-space:nowrap;
  transition:color .2s ease;
}

.main-menu a::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}

.main-menu a:hover,
.main-menu .current-menu-item > a,
.main-menu .current_page_item > a,
.main-menu .current-menu-ancestor > a{
  color:var(--blue);
}

.main-menu a:hover::after,
.main-menu .current-menu-item > a::after,
.main-menu .current_page_item > a::after,
.main-menu .current-menu-ancestor > a::after{
  transform:scaleX(1);
}

.nav-phone,
.menu-phone > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding-left:26px;
  font-weight:900;
  color:var(--blue);
  white-space:nowrap;
}

.nav-phone::before,
.menu-phone > a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:28px;
  background:var(--gray-2);
  transform:translateY(-50%);
}

.nav-phone::after,
.menu-phone > a::after{
  content:"";
  width:9px;
  height:9px;
  order:-1;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 6px rgba(54,209,10,.11);
  margin-right:10px;
}

.menu-toggle{
  display:none;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border:1px solid var(--gray-2);
  border-radius:14px;
  background:#fff;
  padding:11px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.055);
}

.menu-toggle span{
  display:block;
  height:2px;
  background:var(--text);
  border-radius:99px;
  margin:6px 0;
  transition:.2s ease;
}

.menu-open .menu-toggle span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}

.menu-open .menu-toggle span:nth-child(2){
  opacity:0;
}

.menu-open .menu-toggle span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

.menu-backdrop{
  display:none;
}


/* ------------------------------------------------------------
   Desktop Dropdown / Mega-Menü
------------------------------------------------------------ */
@media (min-width:981px){

  .main-menu .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    margin:0;
    padding:18px;
    list-style:none;
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    border-radius:22px;
    box-shadow:0 24px 60px rgba(15,23,42,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:.22s ease;
    z-index:500;
  }

  .main-menu li:hover > .sub-menu,
  .main-menu li:focus-within > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .main-menu .sub-menu li{
    border:0;
  }

  .main-menu .sub-menu a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:12px 14px;
    border-radius:14px;
    font-size:15px;
    font-weight:800;
    color:var(--text);
    transition:.2s ease;
  }

  .main-menu .sub-menu a::after{
    display:none;
  }

  .main-menu .sub-menu a::before{
    content:"";
    width:7px;
    height:7px;
    margin-right:10px;
    border-radius:50%;
    background:rgba(1,159,228,.28);
    flex:0 0 7px;
    transition:.2s ease;
  }

  .main-menu .sub-menu a:hover{
    background:var(--gray-soft);
    color:var(--blue);
    transform:translateX(3px);
  }

  .main-menu .sub-menu a:hover::before{
    background:var(--green);
  }

  .main-menu .sub-menu:has(li:nth-child(5)){
    left:-130px;
    min-width:590px;
    display:grid;
    grid-template-columns:repeat(2,minmax(245px,1fr));
    column-gap:38px;
    row-gap:2px;
    padding:24px;
  }

  .main-menu .sub-menu:has(li:nth-child(5))::before{
    content:"";
    position:absolute;
    top:24px;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    width:1px;
    background:rgba(226,232,240,.9);
  }

  .main-menu .sub-menu:has(li:nth-child(9)){
    left:-260px;
    min-width:900px;
    grid-template-columns:repeat(3,minmax(245px,1fr));
    column-gap:38px;
  }

  .main-menu .sub-menu:has(li:nth-child(9))::before{
    content:"";
    position:absolute;
    top:24px;
    bottom:24px;
    left:34%;
    transform:translateX(-50%);
    width:1px;
    background:rgba(226,232,240,.9);
  }

  .main-menu .sub-menu:has(li:nth-child(9))::after{
    content:"";
    position:absolute;
    top:24px;
    bottom:24px;
    left:67%;
    transform:translateX(-50%);
    width:1px;
    background:rgba(226,232,240,.9);
  }

  .sub-menu .submenu-title{
    grid-column:1/-1;
    margin:0 0 18px;
    padding:0 0 18px;
    border-bottom:1px solid var(--gray-2);
    pointer-events:none;
  }

  .sub-menu .submenu-title span{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-heading);
    font-size:20px;
    font-weight:800;
    color:var(--blue);
  }

  .sub-menu .submenu-title span::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green);
  }

}


/* ------------------------------------------------------------
   Mobile Submenü einklappbar
------------------------------------------------------------ */
@media (max-width:980px){

  .main-menu .menu-item-has-children > .sub-menu{
    display:none;
    margin:4px 0 8px;
    padding:0 0 0 14px;
  }

  .main-menu .menu-item-has-children.submenu-open > .sub-menu{
    display:grid;
  }

  .main-menu .menu-item-has-children > a::after{
    content:"+";
  }

  .main-menu .menu-item-has-children.submenu-open > a::after{
    content:"−";
  }

  .sub-menu .submenu-title{
    display:none;
  }

}

/* ------------------------------------------------------------
   Buttons
------------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  transition: 0.22s ease;
}
.button-primary {
  background: var(--red);
  color: #fff !important;
  border: 1px solid var(--red);
  box-shadow: 0 10px 24px rgba(209, 10, 16, 0.18);
}
.button-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(209, 10, 16, 0.24);
}
.button-secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--gray-2);
}
.button-secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Hero / Einstieg
------------------------------------------------------------ */
.notdienst-hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 82px;
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border-bottom: 1px solid var(--gray-2);
}
.notdienst-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at 90% 15%,
      rgba(1, 159, 228, 0.06),
      transparent 40%
    ),
    radial-gradient(circle at 10% 85%, rgba(209, 10, 16, 0.05), transparent 40%);
}
.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 90px;
  align-items: center;
}
.hero-copy {
  max-width: 720px;
}
.hero-copy h1 {
  max-width: 700px;
}
.hero-lead {
  margin: 24px 0 0;
  max-width: 640px;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.6;
  color: #334155;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  box-shadow: var(--shadow-soft);
}
.hero-trust span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
.hero-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}
.hero-visual img {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: center;
}
.hero-badge {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.hero-badge strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-size: 22px;
}
.hero-badge span {
  color: var(--muted);
  font-weight: 600;
}
.notdienst-hero .button.button-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.notdienst-hero .button.button-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Kammerjäger Ortsseiten
------------------------------------------------------------ */

.local-hero{
	padding:90px 0 70px;
	background:
	linear-gradient(135deg,#005baa 0%,#019fe4 100%);
	color:#fff;
}

.local-hero h1{
	color:#fff;
	margin-bottom:22px;
}

.local-hero .hero-lead{
	max-width:760px;
	font-size:20px;
	line-height:1.7;
	color:rgba(255,255,255,.9);
}

.hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	margin-top:34px;
}

.local-content{
	padding:80px 0;
}

.local-grid{
	display:grid;
	grid-template-columns:minmax(0,760px) 340px;
	gap:80px;
	justify-content:center;
	align-items:start;
}

.local-page .local-intro-section .container.local-grid{
	max-width:1210px;
	grid-template-columns:minmax(0,760px) 360px !important;
	gap:90px !important;
}

.local-main h2{
	margin-top:54px;
	margin-bottom:18px;
}

.local-main h2:first-child{
	margin-top:0;
}

.local-main h3{
	margin-top:28px;
	margin-bottom:10px;
}

.local-main p{
	line-height:1.8;
}

.local-page .local-main h2{
	font-size:clamp(40px,4vw,58px);
	line-height:1.15;
	letter-spacing:-.03em;
	margin:0 0 42px;
	max-width:720px;
}

.local-main h2::after{
	content:"";
	display:block;
	width:72px;
	height:4px;
	margin-top:24px;
	background:var(--red);
	border-radius:999px;
}

.local-main p{
	margin:0 0 30px;
	font-size:19px;
	line-height:1.9;
	color:#475569;
}

/* ------------------------------------------------------------
   Einsatzgebiete / Stadtteil-Links
------------------------------------------------------------ */

.local-hub-links ul{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:16px;
	margin:48px 0 0;
	padding:0;
	list-style:none;
}

.local-hub-links li{
	margin:0;
}

.local-hub-links a{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:72px;
	padding:24px 22px;
	text-align:center;
	text-decoration:none;
	background:#fff;
	border:1px solid rgba(226,232,240,.9);
	border-radius:18px;
	font-weight:700;
	color:var(--blue);
	box-shadow:0 10px 28px rgba(15,23,42,.05);
	transition:
		transform .22s ease,
		box-shadow .22s ease,
		border-color .22s ease,
		color .22s ease;
		 white-space: normal;
    line-height: 1.35;
}

.local-hub-links a:hover{
	transform:translateY(-4px);
	border-color:var(--red);
	color:var(--red);
	box-shadow:0 16px 38px rgba(15,23,42,.12);
}

@media (max-width:768px){

	.local-hub-links ul{
		grid-template-columns:1fr;
		margin-top:36px;
	}

	.local-hub-links a{
		min-height:64px;
		padding:20px;
	}

}


/* ------------------------------------------------------------
   Kammerjäger Ortsseiten: Intro / Leistungen / Related / FAQ
------------------------------------------------------------ */

/* Intro mit Sidebar */
.local-intro-section{
	padding:100px 0 115px;
	background:#fff;
}

.local-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) 340px;
	gap:56px;
	align-items:start;
}

.local-main h2{
	margin:0 0 22px;
}

.local-main h2:not(:first-child){
	margin-top:54px;
}

.local-main h2 + p{
	margin-top:0;
}

.local-main p{
	max-width:860px;
	line-height:1.8;
}


/* ------------------------------------------------------------
   Leistungen
------------------------------------------------------------ */

.local-services-section-wrap{
	padding:110px 0;
	background:
		radial-gradient(circle at 10% 90%, rgba(209,10,16,.12), transparent 42%),
		radial-gradient(circle at 90% 10%, rgba(1,159,228,.12), transparent 42%),
		#fff;
	border-top:1px solid rgba(226,232,240,.75);
	border-bottom:1px solid rgba(226,232,240,.75);
}

.local-section-head{
	max-width:760px;
	margin:0 auto 60px;
	text-align:center;
}

.local-section-head .kicker{
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:18px;
}

.local-section-head h2{
	margin:0 0 18px;
	font-size:clamp(36px,4vw,56px);
	line-height:1.12;
	letter-spacing:-.035em;
}

.local-section-head p,
.local-section-head .section-lead{
	max-width:720px;
	margin:0 auto;
	font-size:18px;
	line-height:1.75;
	color:var(--muted);
}

.local-service-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
	gap:28px;
}

.local-service-card{
	display:flex;
	flex-direction:column;
	padding:30px;
	background:#fff;
	border:1px solid rgba(226,232,240,.9);
	border-radius:22px;
	box-shadow:0 12px 30px rgba(15,23,42,.05);
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease;
}

.local-service-card:hover{
	transform:translateY(-6px);
	border-color:rgba(0,91,170,.25);
	box-shadow:0 22px 46px rgba(15,23,42,.10);
}

.service-tag{
	display:inline-flex;
	align-self:flex-start;
	margin-bottom:18px;
	padding:7px 12px;
	border-radius:999px;
	background:rgba(1,159,228,.08);
	color:var(--blue);
	font-size:14px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
}

.local-service-card strong{
	display:block;
	margin-bottom:14px;
	font-family:var(--font-heading);
	font-size:26px;
	font-weight:700;
	line-height:1.2;
	color:var(--text);
}

.local-service-card p{
	margin:0;
	flex:1;
	font-size:17px;
	line-height:1.75;
	color:var(--muted);
}

.local-service-card em{
	display:inline-flex;
	align-items:center;
	margin-top:24px;
	font-style:normal;
	font-size:15px;
	font-weight:700;
	color:var(--blue);
	transition:color .2s ease;
}

.local-service-card:hover em{
	color:var(--red);
}

@media (max-width:768px){

	.local-services-section-wrap{
		padding:80px 0;
	}

	.local-section-head{
		margin-bottom:42px;
	}

	.local-service-grid{
		grid-template-columns:1fr;
	}

	.local-service-card{
		padding:24px;
	}

}

/* ------------------------------------------------------------
   Related Links
------------------------------------------------------------ */

.local-related-section-wrap{
	padding:110px 0;
	background:#fff;
	border-top:1px solid rgba(226,232,240,.75);
	border-bottom:1px solid rgba(226,232,240,.75);
}

.local-related-section{
	padding:0;
	background:none;
	border:0;
	border-radius:0;
}

.local-related-head{
	max-width:760px;
	margin:0 auto 48px;
	text-align:center;
}

.local-related-head h2{
	margin:0 0 16px;
}

.local-related-head p{
	margin:0;
	font-size:18px;
	line-height:1.7;
}

.local-related-links ul{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:18px;
	margin:0;
	padding:0;
	list-style:none;
}

.local-related-links li{
	margin:0;
}

.local-related-links a{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:88px;
	padding:20px 24px;
	text-align:center;

	background:#fff;
	border:1px solid rgba(226,232,240,.9);
	border-radius:20px;

	font-size:17px;
	font-weight:700;
	line-height:1.45;
	color:var(--blue);

	box-shadow:0 10px 28px rgba(15,23,42,.05);

	transition:
		transform .22s ease,
		box-shadow .22s ease,
		border-color .22s ease,
		background .22s ease,
		color .22s ease;
}

.local-related-links a:hover{
	transform:translateY(-4px);
	background:var(--blue);
	color:#fff;
	border-color:var(--blue);
	box-shadow:0 18px 38px rgba(0,91,170,.18);
}

@media (max-width:768px){

	.local-related-section{
		padding:34px 24px;
	}

	.local-related-links ul{
		grid-template-columns:1fr;
	}

}


/* FAQ */
.local-faq-section{
	margin:0;
	padding:120px 0 130px;
	overflow:hidden;
}

.local-faq-section .faq-layout{
	display:grid;
	grid-template-columns:minmax(0,380px) minmax(0,1fr);
	gap:90px;
	align-items:start;
}

.local-faq-section .faq-copy{
	min-width:0;
}

.local-faq-section .faq-copy h2{
	margin:0;
	max-width:380px;
	line-height:1.08;
}

.local-faq-section .faq-list{
	min-width:0;
	width:100%;
	margin:0;
}

.local-faq-section .faq-list details{
	width:100%;
}


/* Responsive */
@media(max-width:1024px){

	.local-grid{
		grid-template-columns:1fr;
	}

	.local-service-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.local-faq-section .faq-layout{
		grid-template-columns:1fr;
		gap:38px;
	}

	.local-faq-section .faq-copy h2{
		max-width:720px;
	}

}

@media(max-width:700px){

	.local-intro-section{
		padding:75px 0 85px;
	}

	.local-services-section-wrap{
		padding:80px 0 90px;
	}

	.local-service-grid{
		grid-template-columns:1fr;
	}

	.local-service-card{
		min-height:auto;
		padding:26px;
	}

	.local-related-section{
		padding:28px;
		border-radius:22px;
	}

	.local-faq-section{
		padding:85px 0 95px;
	}

}


/* ------------------------------------------------------------
   Editor
------------------------------------------------------------ */

.editor-extra-content{
	margin-top:60px;
	padding-top:40px;
	border-top:1px solid #e2e8f0;
}



/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */

@media(max-width:1024px){

.local-grid{
	grid-template-columns:1fr;
}

.local-service-grid{
	grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media(max-width:768px){

.local-hero{
	padding:70px 0 50px;
}

.local-services-section,
.local-related-section{

	padding:28px;

}

.local-service-grid{

	grid-template-columns:1fr;

}

.local-faq-section .faq-layout{
	grid-template-columns:1fr;
}

.hero-actions{
	flex-direction:column;
}

.hero-actions .button{
	width:100%;
	justify-content:center;
}

}

/* ------------------------------------------------------------
   Kontaktseite
------------------------------------------------------------ */

.kontakt-hero{
	position:relative;
	overflow:hidden;
	padding:96px 0 88px;
	background:
		radial-gradient(circle at 90% 15%, rgba(1,159,228,.07), transparent 38%),
		radial-gradient(circle at 10% 85%, rgba(209,10,16,.055), transparent 40%),
		var(--gray-soft);
	border-bottom:1px solid var(--gray-2);
}

.kontakt-hero-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) 520px;
	gap:88px;
	align-items:center;
}

.kontakt-hero-copy{
	max-width:760px;
}

.kontakt-hero-visual{
	overflow:hidden;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
	background:#fff;
}

.kontakt-hero-visual img{
	display:block;
	width:100%;
	height:470px;
	object-fit:cover;
	object-position:center;
}

.kontakt-main-grid{
	display:grid;
	grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
	gap:34px;
	align-items:start;
}

.kontakt-info-card,
.kontakt-form-card,
.kontakt-area-card{
	background:#fff;
	border:1px solid var(--gray-2);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
	padding:42px;
}

.kontakt-info-card{
	position:sticky;
	top:120px;
	align-self:start;
}

.admin-bar .kontakt-info-card{
	top:152px;
}

.kontakt-info-card h2,
.kontakt-form-card h2,
.kontakt-area-card h2{
	font-size:clamp(32px,3.5vw,48px);
	margin-bottom:18px;
}

.kontakt-form-card p,
.kontakt-area-card p{
	margin:0 0 28px;
	color:var(--muted);
	font-size:18px;
	line-height:1.8;
}

.kontakt-area-card{
	overflow:hidden;
	padding:0;
}

.kontakt-area-map{
	background:var(--gray-soft);
	border-bottom:1px solid var(--gray-2);
}

.kontakt-area-map img{
	display:block;
	width:100%;
	height:300px;
	object-fit:cover;
	object-position:center;
}

.kontakt-area-copy{
	padding:42px;
}

@media (max-width:620px){

	.kontakt-area-map img{
		height:220px;
	}

	.kontakt-area-copy{
		padding:26px;
	}

}

.kontakt-info-list{
	display:grid;
	gap:16px;
	margin-top:34px;
}

.kontakt-info-item{
	display:block;
	padding:22px;
	border:1px solid var(--gray-2);
	border-radius:20px;
	background:var(--gray-soft);
	transition:.22s ease;
}

a.kontakt-info-item:hover{
	background:#fff;
	border-color:rgba(1,159,228,.32);
	transform:translateY(-2px);
	box-shadow:var(--shadow-soft);
}

.kontakt-info-item span{
	display:block;
	margin-bottom:6px;
	font-size:13px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.1em;
	color:var(--blue-light);
}

.kontakt-info-item strong{
	display:block;
	font-family:var(--font-heading);
	font-size:24px;
	line-height:1.2;
	color:var(--text);
}

.kontakt-info-item small{
	display:block;
	margin-top:8px;
	color:var(--muted);
	font-size:15px;
	line-height:1.55;
}

.kontakt-form-card form{
	margin-top:26px;
}

.kontakt-form-card input:not([type="checkbox"]):not([type="radio"]),
.kontakt-form-card textarea,
.kontakt-form-card select{
	width:100%;
	min-height:54px;
	border:1px solid var(--gray-2);
	border-radius:14px;
	padding:13px 16px;
	background:#fff;
	color:var(--text);
	outline:none;
	transition:.2s ease;
}

.kontakt-form-card textarea{
	min-height:150px;
	resize:vertical;
}

.kontakt-form-card input:not([type="checkbox"]):not([type="radio"]):focus,
.kontakt-form-card textarea:focus,
.kontakt-form-card select:focus{
	border-color:var(--blue-light);
	box-shadow:0 0 0 4px rgba(1,159,228,.09);
}

.kontakt-form-card label{
	display:block;
	margin-bottom:18px;
	font-weight:800;
	color:var(--text);
}

.kontakt-form-card input.wpcf7-submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:auto;
	min-width:220px;
	height:58px;
	padding:0 32px;
	background:var(--red) !important;
	border:1px solid var(--red) !important;
	color:#fff !important;
	border-radius:16px;
	font-size:16px;
	font-weight:800;
	cursor:pointer;
	box-shadow:0 10px 24px rgba(1,159,228,.22);
	transition:.22s ease;
	appearance:none;
	-webkit-appearance:none;
}

.kontakt-form-card input.wpcf7-submit:hover{
	background:var(--blue) !important;
	border-color:var(--blue) !important;
	color:#fff !important;
	transform:translateY(-2px);
	box-shadow:0 16px 34px rgba(1,91,170,.28);
}


.kontakt-area-card{
	background:
		radial-gradient(circle at 100% 0%, rgba(1,159,228,.08), transparent 42%),
		#fff;
}

/* Contact Form 7 Checkbox */
.kontakt-form-card .wpcf7-acceptance{
	display:block;
	margin:20px 0 28px;
}

.kontakt-form-card .wpcf7-acceptance .wpcf7-list-item{
	display:flex;
	align-items:flex-start;
	gap:12px;
	margin:0;
}

.kontakt-form-card .wpcf7-acceptance input[type="checkbox"]{
	width:18px;
	height:18px;
	min-height:18px;
	margin:3px 0 0;
	padding:0;
	flex:0 0 18px;
	accent-color:var(--red);
	box-shadow:none;
	cursor:pointer;
}

.kontakt-form-card .wpcf7-list-item-label{
	font-size:15px;
	line-height:1.6;
	color:var(--muted);
	font-weight:600;
}

.kontakt-form-card .wpcf7-list-item-label a{
	font-weight:800;
	color:var(--blue);
}

.kontakt-city-tags{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:30px;
}

.kontakt-city-tags span{
	display:inline-flex;
	align-items:center;
	min-height:38px;
	padding:0 15px;
	border-radius:999px;
	background:var(--gray-soft);
	border:1px solid var(--gray-2);
	font-weight:800;
	color:var(--text);
}

/* Abschluss-CTA mit vorhandener principle-panel */
.final-cta{
	padding:112px 0;
	background:#fff;
}

.final-cta .principle-panel{
	max-width:none;
}

.final-cta .principle-copy{
	max-width:680px;
}

.final-cta .principle-copy .hero-actions{
	margin-top:34px;
}

.final-cta .principle-copy p:last-of-type{
	margin-bottom:0;
}

@media (max-width:980px){

	.kontakt-hero-grid,
	.kontakt-main-grid,
	.kontakt-process .process-layout{
		grid-template-columns:1fr;
		gap:38px;
	}

	.kontakt-hero{
		padding:72px 0;
	}

	.kontakt-hero-visual img{
		height:360px;
	}

	.kontakt-info-card{
		position:static;
		top:auto;
	}

	.kontakt-info-card,
	.kontakt-form-card,
	.kontakt-area-card{
		padding:32px;
	}

	.final-cta{
		padding:90px 0;
	}

}

@media (max-width:620px){

	.kontakt-hero{
		padding:58px 0;
	}

	.kontakt-hero-visual img{
		height:280px;
	}

	.kontakt-info-card,
	.kontakt-form-card,
	.kontakt-area-card{
		padding:26px;
		border-radius:24px;
	}

	.kontakt-info-item strong{
		font-size:20px;
	}

	.final-cta{
		padding:72px 0;
	}

	.final-cta .hero-actions,
	.kontakt-hero .hero-actions{
		display:grid;
	}

}

/* ------------------------------------------------------------
   Über uns
------------------------------------------------------------ */

.ueber-video-hero{
	position:relative;
	overflow:hidden;
	min-height:720px;
	display:flex;
	align-items:center;
	padding:120px 0 104px;
	background:var(--gray-soft);
	border-bottom:1px solid var(--gray-2);
}

.ueber-hero-video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	z-index:1;
}

.ueber-hero-overlay{
	position:absolute;
	inset:0;
	z-index:2;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.76) 0%, rgba(255,255,255,.88) 34%, rgba(255,255,255,.46) 64%, rgba(255,255,255,.18) 100%), radial-gradient(circle at 90% 15%, rgba(1,159,228,.12), transparent 36%), radial-gradient(circle at 10% 85%, rgba(209,10,16,.09), transparent 42%);
	pointer-events:none;
}

.ueber-video-hero .container{
	position:relative;
	z-index:3;
}

.ueber-video-hero .page-hero-copy{
	max-width:760px;
}

.ueber-video-hero .button-primary{
	background:var(--green);
	border-color:var(--green);
	box-shadow:0 10px 24px rgba(22,163,74,.18);
}

.ueber-video-hero .button-primary:hover{
	background:var(--green-dark);
	border-color:var(--green-dark);
	box-shadow:0 16px 34px rgba(22,163,74,.24);
}

@media (max-width:980px){

	.ueber-video-hero{
		min-height:auto;
		padding:86px 0 78px;
	}

	.ueber-hero-overlay{
		background:
			linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 58%, rgba(255,255,255,.55) 100%),
			radial-gradient(circle at 90% 15%, rgba(1,159,228,.12), transparent 36%),
			radial-gradient(circle at 10% 85%, rgba(209,10,16,.09), transparent 42%);
	}

}

@media (max-width:620px){

	.ueber-video-hero{
		padding:64px 0;
	}

	.ueber-video-hero .hero-actions{
		display:grid;
	}

	.ueber-video-hero .hero-trust{
		display:grid;
	}

}

.services-more{
	margin-top:48px;
	display:flex;
	justify-content:center;
}

.services-more .button,
#load-more-typische-faelle{
	cursor:pointer;
}

.faq-editor-content h2{
	margin-top:72px;
	margin-bottom:42px;
}

.faq-editor-content h2:first-child{
	margin-top:0;
}

.faq-editor-content .faq-list{
	margin-bottom:72px;
}

.faq-editor-content .faq-list:last-child{
	margin-bottom:0;
}

/* ------------------------------------------------------------
   Allgemeine Section-Abstände
------------------------------------------------------------ */
.section-white,
.section-gray {
  padding: 112px 0;
}
.section-white {
  background: #fff;
}
.section-gray {
  background: var(--gray-soft);
}
.editor-section {
  background: #fff;
}
.section-title {
  max-width: 780px;
  margin-bottom: 46px;
}
.center-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-title p:not(.kicker) {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}

/* ------------------------------------------------------------
   WordPress-Editorbereich + Sticky Sidebar
   Der Textbereich bleibt bewusst ohne Karte.
------------------------------------------------------------ */
.content-sidebar-grid {
  display: grid;
  grid-template-columns: minmax(0, 760px) 360px;
  gap: 90px;
  align-items: start;
  justify-content: center;
}
.main-content {
  max-width: 760px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.main-content h2 {
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 42px;
  max-width: 720px;
}
.main-content h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 24px;
  background: var(--red);
  border-radius: 999px;
}
.main-content h3 {
  margin: 70px 0 24px;
  font-size: 30px;
  line-height: 1.24;
}
.main-content p {
  margin: 0 0 30px;
  font-size: 19px;
  line-height: 1.9;
  color: #475569;
}
.main-content p:last-child {
  margin-bottom: 0;
}
.main-content ul,
.main-content ol {
  margin: 0 0 34px 26px;
  padding: 0;
}
.main-content li {
  margin-bottom: 12px;
  font-size: 19px;
  line-height: 1.8;
  color: #475569;
}
.main-content strong {
  color: var(--text);
  font-weight: 800;
}
.main-content a {
  font-weight: 800;
  color: var(--blue-light);
}
.main-content blockquote {
  margin: 52px 0;
  padding-left: 28px;
  border-left: 4px solid var(--red);
  font-size: 24px;
  line-height: 1.62;
  color: var(--text);
}
.sticky-sidebar {
  position: sticky;
  top: 120px;
}
.admin-bar .sticky-sidebar {
  top: 152px;
}
.sidebar-card {
  background: #fff;
  border-radius: 28px;
  padding: 36px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-2);
}
.sidebar-card h3 {
  margin-bottom: 14px;
  font-size: 28px;
}
.sidebar-card p {
  margin: 0 0 28px;
  color: var(--muted);
}
.sidebar-list {
  display: grid;
  gap: 18px;
  margin-bottom: 30px;
}
.sidebar-list div {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gray-2);
}
.sidebar-list span {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-light);
}
.sidebar-list strong,
.sidebar-list a {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}
.sidebar-list a {
  font-weight: 800;
  color: var(--red);
}
.sidebar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 16px;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(209, 10, 16, 0.18);
  transition: 0.22s ease;
}
.sidebar-button:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(209, 10, 16, 0.24);
}

.info-box{
	margin:56px 0;
	padding:36px;
	background:#fff;
	border:1px solid var(--gray-2);
	border-radius:var(--radius);
	box-shadow:var(--shadow-soft);
}

.info-box h3{
	margin:0 0 14px;
	font-size:28px;
	line-height:1.2;
}

.info-box p{
	margin:0 0 20px;
	color:var(--muted);
}

.info-box p:last-child{
	margin-bottom:0;
}

.info-box .button{
	margin-top:8px;
}


/* ------------------------------------------------------------
   404 Fehlerseite
------------------------------------------------------------ */

.error-404-page .error-hero {
  padding: 120px 0 90px;
  background:
    radial-gradient(circle at 90% 15%, rgba(1,159,228,.07), transparent 38%),
    radial-gradient(circle at 10% 85%, rgba(209,10,16,.05), transparent 40%),
    var(--gray-soft);
  border-bottom: 1px solid var(--gray-2);
}

.error-404-page .error-hero > .container {
  max-width: 900px;
}


.error-404-page .page-hero-simple {
  padding: 90px 0 76px;
  margin-top:40px;
  background:
    radial-gradient(circle at 90% 15%, rgba(1,159,228,.07), transparent 38%),
    radial-gradient(circle at 10% 85%, rgba(209,10,16,.05), transparent 40%),
    var(--gray-soft);
  border-bottom: 1px solid var(--gray-2);
}

.error-404-page .hero-lead {
  max-width: 620px;
}

.error-404-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.error-content {
  padding: 90px 0;
  background: #fff;
}

.error-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 28px;
  align-items: stretch;
}

.error-card,
.error-contact {
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 38px;
}

.error-card h2,
.error-contact h2 {
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: 18px;
}

.error-card p,
.error-contact p {
  color: var(--muted);
  margin: 0 0 24px;
}

.error-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
}

.error-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 15px 18px;
  border-radius: 16px;
  background: var(--gray-soft);
  border: 1px solid var(--gray-2);
  color: var(--text);
  font-weight: 800;
  transition: .22s ease;
}

.error-links a::after {
  content: "→";
  color: var(--blue-light);
  font-weight: 900;
}

.error-links a:hover {
  background: #fff;
  border-color: rgba(1,159,228,.35);
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.error-contact {
  background:
    radial-gradient(circle at 100% 0%, rgba(1,159,228,.08), transparent 42%),
    #fff;
}

.error-phone {
  display: block;
  margin: 24px 0;
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}

.error-contact .button-primary {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(22,163,74,.18);
}

.error-contact .button-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 16px 34px rgba(22,163,74,.22);
}

@media (max-width: 800px) {
  .error-grid {
    grid-template-columns: 1fr;
  }

  .error-links {
    grid-template-columns: 1fr;
  }

  .error-card,
  .error-contact {
    padding: 28px;
  }
}

@media (max-width: 620px) {
  .error-404-page .page-hero-simple {
    padding: 58px 0 56px;
  }

  .error-content {
    padding: 64px 0;
  }

  .error-404-page .hero-actions {
    display: grid;
  }
}

/* ------------------------------------------------------------
   Vorteile / Warum handeln?
------------------------------------------------------------ */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.benefit-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid var(--gray-2);
  box-shadow: var(--shadow-soft);
}
.benefit-card span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(209, 10, 16, 0.1);
  color: var(--red);
  font-weight: 900;
  margin-bottom: 22px;
}
.benefit-card p {
  margin: 12px 0 0;
  color: var(--muted);
}

/* ------------------------------------------------------------
   Ablauf / Prozess
------------------------------------------------------------ */
.process-layout {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: 86px;
  align-items: center;
}
.process-image img {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.process-copy h2 {
  max-width: 720px;
  margin-bottom: 34px;
}
.steps-card {
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 34px;
}
.steps-card ol {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps-card li {
  counter-increment: step;
  position: relative;
  padding: 0 0 28px 58px;
}
.steps-card li:last-child {
  padding-bottom: 0;
}
.steps-card li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}
.steps-card li::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 48px;
  width: 2px;
  height: calc(100% - 48px);
  background: var(--gray-2);
}
.steps-card li:last-child::after {
  display: none;
}
.steps-card strong {
  font-family: var(--font-heading);
  font-size: 19px;
}
.steps-card span {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

/* ------------------------------------------------------------
   FAQ / Fragenbereich
------------------------------------------------------------ */
.faq-section{

    position:relative;

    overflow:hidden;

    padding:112px 0;

    background:#fff;

    border-top:1px solid var(--gray-2);

    border-bottom:1px solid var(--gray-2);
}

.faq-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(22,163,74,.05),
            transparent 32%
        ),

        radial-gradient(
            circle at 8% 92%,
            rgba(22,163,74,.05),
            transparent 32%
        );

}

.faq-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0)
    );
}

.faq-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 90px;
  align-items: start;
}

.faq-copy {
  max-width: 430px;
}

.faq-copy h2 {
  margin-bottom: 18px;
}

.faq-copy p {
  color: var(--muted);
  line-height: 1.8;
}

.faq-list {
  display: grid;
  gap: 18px;
}

/* Einzelne FAQ-Karte */
.faq-list details {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: 0.25s ease;
}

.faq-list details:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

/* Klickbare Fragezeile */
.faq-list summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 28px 30px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.35;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

/* Plus-/Minus-Zeichen rechts */
.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--green);
  background: #f0fdf4;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  transition: 0.22s ease;
}

.faq-list details[open] summary::after {
  content: "−";
  color: #fff;
  background: var(--green);
}

/* Antworttext */
.faq-list details p {
  margin: 0;
  padding: 0 30px 28px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}


/* ------------------------------------------------------------
   Quick Services / Schädlingsarten Slider
------------------------------------------------------------ */

.quick-services{
  padding:112px 0;
  background:#fff;
}

.section-intro.center{
  max-width:760px;
  margin:0 auto 60px;
  text-align:center;
}

.section-intro.center h2{
  margin-bottom:18px;
}

.section-intro.center p{
  color:#64748b;
  font-size:18px;
  line-height:1.8;
}

.quick-slider{
  position:relative;
  padding:0 54px;
}

.quick-track{
  display:flex;
  gap:26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:22px 6px 46px;
  margin:-22px -6px -20px;
  scrollbar-width:none;
}

.quick-track::-webkit-scrollbar{
  display:none;
}

.quick-card{
  flex:0 0 260px;
  scroll-snap-align:start;
  display:block;
  background:#fff;
  border:1px solid var(--gray-2);
  border-radius:26px;
  padding:16px;
  box-shadow:0 12px 30px rgba(15,23,42,.055);
  transition:.25s ease;
}

.quick-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(15,23,42,.085);
  border-color:rgba(22,163,74,.22);
}

.quick-card img{
  display:block;
  width:100%;
  height:165px;
  object-fit:cover;
  border-radius:20px;
  background:#f7f3ea;
  margin-bottom:20px;
}

.quick-card strong{
  display:block;
  font-family:var(--font-heading);
  font-size:21px;
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:12px;
}

.quick-card span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:var(--green);
  font-size:14px;
}

.quick-card span::after{
  content:"→";
  transition:.2s ease;
}

.quick-card:hover span::after{
  transform:translateX(4px);
}

.quick-slider-btn{
  position:absolute;
  top:50%;
  z-index:8;
  width:44px;
  height:44px;
  border:1px solid var(--gray-2);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  color:var(--text);
  font-size:0;
  cursor:pointer;
  transition:.22s ease;
}

.quick-slider-btn::before{
  content:"";
  width:10px;
  height:10px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  display:block;
  margin:auto;
}

.quick-slider-prev{
  left:0;
  transform:translateY(-50%);
}

.quick-slider-prev::before{
  transform:rotate(-135deg);
}

.quick-slider-next{
  right:0;
  transform:translateY(-50%);
}

.quick-slider-next::before{
  transform:rotate(45deg);
}

.quick-slider-btn:hover{
  color:var(--green);
  border-color:rgba(22,163,74,.28);
  box-shadow:0 14px 30px rgba(15,23,42,.11);
}

.quick-slider-prev:hover,
.quick-slider-next:hover{
  transform:translateY(-50%) scale(1.04);
}

.quick-slider-btn:disabled{
  opacity:.28;
  pointer-events:none;
  cursor:default;
}


/* ------------------------------------------------------------
   Principle
------------------------------------------------------------ */

.principle-section{
  padding:34px 0 112px;
  background:#fff;
}

.principle-panel{
  display:grid;
  grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:72px;
  align-items:center;
  padding:54px;
  border-radius:34px;
  background:
    radial-gradient(650px circle at 105% -10%,rgba(22,163,74,.06),transparent 55%),
    radial-gradient(650px circle at -5% 110%,rgba(1,159,228,.05),transparent 55%),
    #fff;
  border:1px solid var(--gray-2);
  box-shadow:var(--shadow-soft);
}

.principle-copy p:not(.kicker){
  margin:22px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.8;
}

.principle-steps{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
}

.principle-steps > div{
	padding:32px;
	border:1px solid var(--gray-2);
	border-radius:24px;
	background:#fff;

	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-start;
}

.principle-steps span{
	display:block;
	margin-bottom:20px;

	font-size:18px;
	font-weight:800;
	color:var(--green);
}

.principle-steps strong{
	display:block;
	margin-bottom:16px;

	font-size:18px;
	line-height:1.3;
	min-height:48px;  
}

.principle-steps p{
	margin:0;
	line-height:1.7;
	color:var(--muted);
}


/* ------------------------------------------------------------
   Große Leistungskarten
------------------------------------------------------------ */
.large-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.large-service-card {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  transition: 0.2s ease;
}
.large-service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(1, 159, 228, 0.35);
}
.large-service-card img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  background: var(--gray);
}
.large-service-card div {
  padding: 30px;
}
.large-service-card p {
  margin: 14px 0 18px;
  color: var(--muted);
}
.large-service-card span {
  font-weight: 900;
  color: var(--red);
}

/* ------------------------------------------------------------
   Abschluss CTA
------------------------------------------------------------ */

.final-cta{

    padding:110px 0;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #f8fafc 100%
        );

    position:relative;

    overflow:hidden;
}

.final-cta::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 92% 12%,
            rgba(1,159,228,.07),
            transparent 42%
        ),

        radial-gradient(
            circle at 8% 90%,
            rgba(1,159,228,.04),
            transparent 44%
        );
}

.final-cta-box{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:minmax(0,1fr) 360px;

    gap:70px;

    align-items:center;

    padding:60px;

    background:#fff;

    border:1px solid var(--gray-2);

    border-radius:34px;

    box-shadow:var(--shadow-soft);
}

.final-copy h2{

    margin:14px 0 22px;
}

.final-copy p{

    max-width:640px;

    color:var(--muted);

    font-size:19px;

    line-height:1.8;
}

.final-actions{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-top:34px;
}

.final-phone-card{

    text-align:center;

    padding:42px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );

    border:1px solid var(--gray-2);
}

.phone-label{

    display:inline-block;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(22,163,74,.10);

    color:var(--green);

    font-size:13px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.phone-number{

    display:block;

    margin:24px 0 16px;

    font-family:var(--font-heading);

    font-size:32px;

    line-height:1.1;

    color:var(--text);

    text-decoration:none;
}

.final-phone-card p{

    margin:0;

    color:var(--muted);
}


/* ------------------------------------------------------------
   Standardseiten / Beiträge
------------------------------------------------------------ */

.page-hero-simple{
	padding:72px 0 50px;
	background:var(--gray);
	border-bottom:1px solid var(--gray-2);
}

.prose{
	font-size:18px;
}

.prose h2,
.prose h3{
	margin-top:1.4em;
}

.prose a{
	color:var(--blue);
	font-weight:700;
}

.post-card{
	padding:28px 0;
	border-bottom:1px solid var(--gray-2);
}


/* ------------------------------------------------------------
   Page Hero mit Beitragsbild als Hintergrund
------------------------------------------------------------ */

.page-hero-grid{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1210px; /* 760 + 90 + 360 */
    margin:0 auto;
}

.page-hero-copy{
    max-width:760px;
}

.page-hero-image{
	position:relative;
	overflow:hidden;

	padding:90px 0 84px;

	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;

	border-bottom:1px solid var(--gray-2);
}

.page-hero-image::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;

	background:
		linear-gradient(
			90deg,
			rgba(255,255,255,.96) 0%,
			rgba(255,255,255,.90) 38%,
			rgba(255,255,255,.58) 68%,
			rgba(255,255,255,.18) 100%
		);
}

.page-hero-image::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;

	background:
		radial-gradient(
			circle at 90% 15%,
			rgba(1,159,228,.08),
			transparent 42%
		),
		radial-gradient(
			circle at 10% 85%,
			rgba(209,10,16,.05),
			transparent 44%
		);
}

.page-hero-copy h1{
	max-width:760px;
}

.page-hero-copy .hero-lead{
	max-width:640px;
}

/* Bildkarte deaktivieren */
.page-hero-media{
	display:none;
}


/* ------------------------------------------------------------
   Footer
------------------------------------------------------------ */

.site-footer{
    position:relative;
    overflow:hidden;
    padding:110px 0 34px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 100%
        );
    border-top:1px solid var(--gray-2);
	overflow:hidden;

}

.site-footer::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:

        radial-gradient(
            900px circle at 105% -5%,
            rgba(1,159,228,.08),
            transparent 55%
        ),

        radial-gradient(
            700px circle at -5% 105%,
            rgba(1,159,228,.03),
            transparent 60%
        );
}

.footer-bg-word{
    position:absolute;
    top:28px;
    left:50%;
    transform:translateX(-50%);
    font-family:var(--font-heading);
    font-size:clamp(150px,16vw,300px);
    font-weight:800;
    color:#0f172a;
    opacity:.022;
    pointer-events:none;
    white-space:nowrap;
	overflow:hidden;
    pointer-events:none;
}

.footer-claim,
.footer-grid,
.footer-bottom{
    position:relative;
    z-index:2;
}

.footer-claim{
    max-width:760px;
    margin:0 auto 82px;
    text-align:center;
}

.footer-claim h2{
    margin:14px 0 22px;
}

.footer-claim p:last-child{
    font-size:20px;
    line-height:1.8;
    color:var(--muted);
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) 300px;
    gap:60px;
    padding-bottom:70px;
}

.footer-col h3,
.footer-contact h3{
    margin-bottom:20px;
    font-size:20px;
}

.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-col li{
    margin-bottom:14px;
}

.footer-col a,
.footer-links a{
    color:#475569;
    text-decoration:none;
    transition:.2s ease;
}

.footer-col a:hover,
.footer-links a:hover{
    color:var(--blue-light);
}

.footer-phone{
    display:block;
    margin-bottom:10px;
    font-family:var(--font-heading);
    font-size:30px;
    color:var(--text);
    text-decoration:none;
}

.footer-mail{
    display:inline-block;
    margin-bottom:22px;
    color:#475569;
    font-weight:700;
}

.footer-mail:hover{
    color:var(--green);
}

.footer-contact p{
    color:var(--muted);
    line-height:1.8;
    margin:0 0 24px;
}

.footer-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    color:var(--blue-light);
    text-decoration:none;
}

.footer-link:hover{
    color:var(--blue);
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding-top:34px;
    border-top:1px solid var(--gray-2);
    color:#64748b;
    font-size:15px;
}

.footer-links{
    display:flex;
    gap:26px;
}

.footer-partner-link{
	margin-top:10px;
}

/* ------------------------------------------------------------
   Ratgeber / Kategorie / Leistungsseiten-Fixes
------------------------------------------------------------ */
.ratgeber-grid{
  align-items:stretch;
}

.ratgeber-card{
  text-decoration:none;
}

.ratgeber-card-kicker{
  margin:0 0 10px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue-light);
}

.ratgeber-pagination{
  margin-top:56px;
}

.ratgeber-pagination .nav-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.ratgeber-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:46px;
  padding:0 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--gray-2);
  color:var(--text);
  font-weight:800;
  transition:.22s ease;
}

.ratgeber-pagination .page-numbers:hover,
.ratgeber-pagination .page-numbers.current{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}

.leistung-page .section-gray .section-title{
  max-width:760px;
  margin:0 auto 56px;
  text-align:center;
}

.leistung-page .section-gray .section-title .kicker{
  justify-content:center;
}

.leistung-page .section-gray .section-title p:not(.kicker){
  max-width:620px;
  margin:16px auto 0;
}

.ratgeber-more-box{
  margin:54px auto 0;
  max-width:780px;
  padding:42px;
  text-align:center;
  background:#fff;
  border:1px solid var(--gray-2);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}

.ratgeber-more-box .kicker{
  justify-content:center;
}

.ratgeber-more-box h3{
  margin:8px 0 18px;
  font-size:clamp(28px,3vw,38px);
}

.ratgeber-more-box p:not(.kicker){
  max-width:560px;
  margin:0 auto 28px;
  color:var(--muted);
  line-height:1.8;
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width:900px){
  .quick-slider{
    padding:0;
  }

  .quick-slider-btn{
    display:none;
  }

  .quick-card{
    flex-basis:220px;
  }

  .quick-track{
    padding:18px 2px 34px;
    margin:-18px -2px -12px;
  }
}

@media (max-width:620px){
  .quick-card{
    flex-basis:78%;
  }

  .quick-card img{
    height:150px;
  }
}

@media(max-width:900px){
  .principle-panel{
    grid-template-columns:1fr;
    gap:36px;
    padding:34px;
  }

  .principle-steps{
    grid-template-columns:1fr;
  }
}

@media(max-width:900px){

    .final-cta-box{

        grid-template-columns:1fr;

        gap:40px;

        padding:36px;
    }

    .phone-number{

        font-size:34px;
    }

}

@media(max-width:900px){

	.page-hero-image{
		padding:72px 0 66px;
		background-position:center right;
	}

	.page-hero-image::before{
		background:
			linear-gradient(
				90deg,
				rgba(255,255,255,.97) 0%,
				rgba(255,255,255,.92) 58%,
				rgba(255,255,255,.65) 100%
			);
	}
}

@media(max-width:620px){

	.page-hero-image{
		padding:56px 0 52px;
		background-position:center;
	}

	.page-hero-image::before{
		background:
			linear-gradient(
				180deg,
				rgba(255,255,255,.97) 0%,
				rgba(255,255,255,.92) 55%,
				rgba(255,255,255,.78) 100%
			);
	}

	.page-hero-copy .hero-lead{
		max-width:none;
	}
}

@media(max-width:980px){
    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

    .footer-contact{
        grid-column:1 / -1;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }
}

@media(max-width:700px){
    .site-footer{
        padding:82px 0 30px;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-bg-word{
        top:42px;
        font-size:90px;
    }

    .footer-phone{
        font-size:26px;
    }

    .footer-links{
        flex-wrap:wrap;
        justify-content:center;
    }
}

@media (max-width: 1100px) {
  .main-menu a {
    padding: 0 9px;
    font-size: 14px;
  }

  .main-menu a::after {
    left: 9px;
    right: 9px;
  }

  .site-nav {
    gap: 18px;
  }
}

@media (max-width: 980px) {
  .container {
    width: min(100% - 34px, var(--container));
  }

  .header-inner {
    min-height: 74px;
  }

  .site-logo img {
    height: 44px;
    max-width: 205px;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 3030;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 88vw);
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    background: #fff;
    box-shadow: -22px 0 46px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 26px;
    padding: 98px 28px 30px;
    transform: translateX(104%);
    pointer-events: auto;
    transition: transform 0.26s ease;
    z-index: 3020;
  }


  .site-nav,
  .site-nav *,
  .main-menu a {
    pointer-events: auto;
  }

  .main-menu {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .main-menu li {
    width: 100%;
    border-bottom: 1px solid var(--gray-2);
  }

  .main-menu a {
    width: 100%;
    min-height: auto;
    padding: 17px 0;
    justify-content: space-between;
    font-size: 18px;
    line-height: 1.25;
  }

  .main-menu a::after {
    left: 0;
    right: auto;
    bottom: 10px;
    width: 42px;
    height: 2px;
    transform-origin: left;
  }


  .main-menu .sub-menu {
    position: static;
    display: grid;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0 0 10px 16px;
    list-style: none;
    background: transparent;
    box-shadow: none;
  }

  .main-menu .sub-menu li {
    border-bottom: 0;
  }

  .main-menu .sub-menu a {
    min-height: auto;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
  }

  .nav-phone,
  .menu-phone > a {
    width: 100%;
    justify-content: center;
    min-height: 56px;
    margin-top: 4px;
    padding: 0 18px;
    border-radius: 16px;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(209, 10, 16, 0.18);
  }

  .nav-phone::before,
  .menu-phone > a::before {
    display: none;
  }

  .nav-phone::after,
  .menu-phone > a::after {
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
  }

.final-phone-number{
	display:block;
	margin:18px 0 12px;

	font-family:var(--font-heading);
	font-size:34px;
	font-weight:700;
	line-height:1.15;
	color:var(--text);
	text-decoration:none;
	white-space:nowrap;
	word-break:normal;
	overflow-wrap:normal;
}

  .menu-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.22s ease;
    z-index: 2500;
  }

  .menu-open {
    overflow: hidden;
  }

  .menu-open .site-nav {
    transform: translateX(0);
  }

  .menu-open .menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .notdienst-hero {
    padding: 64px 0 72px;
  }

  .hero-layout,
  .process-layout,
  .faq-layout,
  .final-cta-box,
  .principle-panel,
  .page-hero-grid,
  .content-sidebar-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .hero-copy,
  .hero-copy h1,
  .hero-lead,
  .section-title,
  .faq-copy {
    max-width: none;
  }

  .hero-visual,
  .process-image,
  .page-hero-media {
    max-width: 620px;
  }

  .benefit-grid,
  .large-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .principle-steps {
    grid-template-columns: 1fr;
  }

  .section-white,
  .section-gray,
  .quick-services,
  .faq-section,
  .final-cta {
    padding: 82px 0;
  }

  .sticky-sidebar {
    position: static;
  }

  .main-content p,
  .main-content li {
    font-size: 17px;
    line-height: 1.82;
  }
}

@media (max-width: 620px) {
  :root {
    --radius: 18px;
    --radius-lg: 22px;
  }

  .container {
    width: min(100% - 28px, var(--container));
  }

  body {
    font-size: 16px;
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(28px, 12vw, 32px);
    letter-spacing: -0.04em;
  }

  h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  h3 {
    font-size: 22px;
  }

  .site-logo img {
    height: 40px;
    max-width: 185px;
  }

  .menu-toggle {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .site-nav {
    width: min(315px, 88vw);
    padding: 90px 24px 26px;
  }

  .main-menu a {
    font-size: 17px;
    padding: 16px 0;
  }

  .notdienst-hero {
    padding: 48px 0 58px;
  }

  .hero-layout {
    gap: 34px;
  }

  .hero-lead {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.7;
  }

  .hero-actions {
    display: grid;
    gap: 12px;
    margin-top: 28px;
  }

  .button {
    width: 100%;
    min-height: 54px;
    padding: 0 22px;
  }

  .hero-trust {
    gap: 10px;
    margin-top: 24px;
  }

  .hero-trust span {
    width: 100%;
    justify-content: flex-start;
  }

  .hero-visual img {
    height: 280px;
  }

  .hero-badge {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .hero-badge strong {
    font-size: 19px;
  }

  .section-white,
  .section-gray,
  .quick-services,
  .faq-section,
  .final-cta {
    padding: 64px 0;
  }

  .section-title {
    margin-bottom: 32px;
  }

  .section-title p:not(.kicker),
  .section-intro.center p,
  .principle-copy p:not(.kicker),
  .final-copy p {
    font-size: 16px;
    line-height: 1.75;
  }

  .benefit-grid,
  .large-card-grid {
    grid-template-columns: 1fr;
  }

  .benefit-card,
  .sidebar-card,
  .steps-card,
  .principle-panel,
  .final-cta-box,
  .final-phone-card {
    padding: 24px;
    border-radius: 22px;
  }

  .main-content h2 {
    font-size: clamp(32px, 9vw, 42px);
    margin-bottom: 32px;
  }

  .main-content h3 {
    font-size: 24px;
    margin: 46px 0 18px;
  }

  .main-content p,
  .main-content li {
    font-size: 16px;
    line-height: 1.78;
  }

  .main-content blockquote {
    margin: 38px 0;
    padding-left: 20px;
    font-size: 20px;
  }

  .process-image img,
  .page-hero-media img {
    height: 250px;
  }

  .large-service-card img {
    height: 200px;
  }

  .large-service-card div {
    padding: 24px;
  }

  .faq-list summary {
    padding: 22px;
    font-size: 18px;
    gap: 14px;
  }

  .faq-list summary::after {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 22px;
  }

  .faq-list details p {
    padding: 0 22px 24px;
    font-size: 16px;
  }

  .quick-slider {
    padding: 0;
  }

  .quick-slider-btn {
    display: none;
  }

  .quick-card {
    flex-basis: 82%;
    padding: 12px;
    border-radius: 20px;
  }

  .quick-card img {
    height: 135px;
    border-radius: 15px;
  }

  .phone-number,
  .footer-phone {
    font-size: 26px;
    word-break: break-word;
  }

  .footer-links {
    gap: 16px;
  }

  .admin-bar .site-header {
    top: 0;
  }
}

@media (max-width: 980px) {
  .site-header {
    z-index: 50000;
  }

  .menu-toggle {
    position: relative;
    z-index: 50030;
    pointer-events: auto;
  }

  .site-nav {
    z-index: 50020;
    pointer-events: none;
  }

  .menu-open .site-nav {
    pointer-events: auto;
  }

  .site-nav a,
  .site-nav button,
  .site-nav .main-menu,
  .site-nav .main-menu li {
    position: relative;
    z-index: 50021;
    pointer-events: auto;
  }

  .menu-backdrop {
    z-index: 49900;
  }

  .menu-open .menu-backdrop {
    pointer-events: auto;
  }

  .main-menu a {
    display: flex;
    width: 100%;
    touch-action: manipulation;
  }
}

@media (max-width: 980px) {
  .site-header {
    z-index: 50000;
  }

  .header-inner {
    min-height: 74px;
    gap: 18px;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 50040;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    padding: 0;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 17px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .09);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(1, 159, 228, .28);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .13);
  }

  .menu-toggle:focus-visible {
    outline: 3px solid rgba(1, 159, 228, .28);
    outline-offset: 3px;
  }

  .menu-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 23px;
    height: 2.5px;
    margin: 0;
    border-radius: 999px;
    background: var(--text);
    transform: translate(-50%, -50%);
    transition: transform .28s ease, opacity .2s ease, width .24s ease, background .24s ease;
  }

  .menu-toggle span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 7px));
  }

  .menu-toggle span:nth-child(2) {
    width: 18px;
    transform: translate(calc(-50% + 2.5px), -50%);
  }

  .menu-toggle span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 7px));
  }

  .menu-open .menu-toggle {
    background: #fff;
    border-color: rgba(209, 10, 16, .18);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
  }

  .menu-open .menu-toggle span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--red);
  }

  .menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
    width: 0;
  }

  .menu-open .menu-toggle span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
    background: var(--red);
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50020;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: min(360px, 90vw);
    height: 100vh;
    height: 100dvh;
    padding: 96px 24px 24px;
    background: #fff;
    border-left: 1px solid rgba(226, 232, 240, .9);
    box-shadow: -26px 0 52px rgba(15, 23, 42, .18);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(105%);
    pointer-events: none;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  }

  .menu-open .site-nav {
    transform: translateX(0);
    pointer-events: auto;
  }

  .main-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .main-menu li {
    width: 100%;
    border-bottom: 0;
  }

  .main-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 16px;
    color: var(--text);
    background: transparent;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    pointer-events: auto;
    touch-action: manipulation;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }

  .main-menu a:hover,
  .main-menu .current-menu-item > a,
  .main-menu .current_page_item > a,
  .main-menu .current-menu-ancestor > a {
    background: var(--gray-soft);
    color: var(--blue);
    transform: translateX(2px);
  }

  .main-menu a::after {
    content: "→";
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    margin-left: 14px;
    border-radius: 10px;
    background: rgba(1, 159, 228, .08);
    color: var(--blue);
    font-size: 16px;
    line-height: 1;
    transform: none;
    opacity: .85;
  }

  .main-menu .sub-menu {
    position: static;
    display: grid;
    gap: 4px;
    width: 100%;
    margin: 4px 0 8px;
    padding: 0 0 0 14px;
    list-style: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .main-menu .sub-menu a {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
    border-radius: 14px;
  }

  .main-menu .sub-menu a::after {
    display: none;
  }

  .nav-phone,
  .menu-phone > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    margin-top: 18px;
    padding: 0 18px;
    border-radius: 17px;
    background: var(--green);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(22, 163, 74, .20);
    pointer-events: auto;
  }

  .nav-phone:hover,
  .menu-phone > a:hover {
    background: var(--green-dark);
    color: #fff;
  }

  .nav-phone::before,
  .menu-phone > a::before,
  .menu-phone > a::after {
    display: none;
  }

  .nav-phone::after {
    display: none;
  }

  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49900;
    display: block;
    background: rgba(15, 23, 42, .40);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
  }

  .menu-open .menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu-open {
    overflow: hidden;
  }
}

@media (max-width: 620px) {
  .menu-toggle {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 16px;
  }

  .site-nav {
    width: min(335px, 92vw);
    padding: 88px 18px 22px;
  }

  .main-menu {
    gap: 6px;
  }

  .main-menu a {
    min-height: 52px;
    padding: 13px 14px;
    font-size: 17px;
  }
}

/* ------------------------------------------------------------
   iOS Safari Overflow-Fix / Mobile-Menü final
   Verhindert horizontales Scrollen und sichtbares Offcanvas-Menü
------------------------------------------------------------ */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.site-header,
.site-main,
.site-footer{
  max-width:100%;
}

@supports not (overflow-x:clip){
  .site-header,
  .site-main,
  .site-footer{
    overflow-x:hidden;
  }
}

@media (max-width:980px){

  body.menu-open{
    overflow:hidden;
    touch-action:none;
  }

  .site-header{
    z-index:50000;
    overflow:visible;
  }

  .header-inner{
    min-height:74px;
    gap:18px;
  }

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:50040;
    width:52px;
    height:52px;
    flex:0 0 52px;
    padding:0;
    border:1px solid rgba(226,232,240,.95);
    border-radius:17px;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 26px rgba(15,23,42,.09);
    cursor:pointer;
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
    transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
  }

  .menu-toggle span{
    position:absolute;
    left:50%;
    top:50%;
    display:block;
    width:23px;
    height:2.5px;
    margin:0;
    border-radius:999px;
    background:var(--text);
    transform:translate(-50%,-50%);
    transition:transform .28s ease, opacity .2s ease, width .24s ease, background .24s ease;
  }

  .menu-toggle span:nth-child(1){
    transform:translate(-50%,calc(-50% - 7px));
  }

  .menu-toggle span:nth-child(2){
    width:18px;
    transform:translate(calc(-50% + 2.5px),-50%);
  }

  .menu-toggle span:nth-child(3){
    transform:translate(-50%,calc(-50% + 7px));
  }

  .menu-open .menu-toggle{
    background:#fff;
    border-color:rgba(209,10,16,.18);
    box-shadow:0 14px 34px rgba(15,23,42,.14);
  }

  .menu-open .menu-toggle span:nth-child(1){
    transform:translate(-50%,-50%) rotate(45deg);
    background:var(--red);
  }

  .menu-open .menu-toggle span:nth-child(2){
    opacity:0;
    width:0;
  }

  .menu-open .menu-toggle span:nth-child(3){
    transform:translate(-50%,-50%) rotate(-45deg);
    background:var(--red);
  }

  .site-nav{
    position:fixed;
    top:0;
    right:0;
    left:auto;
    z-index:50020;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    width:min(360px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    padding:96px 24px 24px;
    background:#fff;
    border-left:1px solid rgba(226,232,240,.9);
    box-shadow:-26px 0 52px rgba(15,23,42,.18);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    opacity:0;
    visibility:hidden;
    transform:translate3d(18px,0,0);
    pointer-events:none;
    transition:opacity .24s ease, visibility .24s ease, transform .28s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }

  .menu-open .site-nav{
    opacity:1;
    visibility:visible;
    transform:translate3d(0,0,0);
    pointer-events:auto;
  }

  .site-nav,
  .site-nav *,
  .main-menu a{
    box-sizing:border-box;
  }

  .main-menu{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
  }

  .main-menu li{
    width:100%;
    border-bottom:0;
  }

  .main-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:54px;
    padding:14px 16px;
    border-radius:16px;
    color:var(--text);
    background:transparent;
    font-size:18px;
    font-weight:800;
    line-height:1.2;
    text-decoration:none;
    pointer-events:auto;
    touch-action:manipulation;
    white-space:normal;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }

  .main-menu a:hover,
  .main-menu .current-menu-item > a,
  .main-menu .current_page_item > a,
  .main-menu .current-menu-ancestor > a{
    background:var(--gray-soft);
    color:var(--blue);
    transform:translateX(2px);
  }

  .main-menu a::after{
    content:"→";
    position:static;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    flex:0 0 28px;
    margin-left:14px;
    border-radius:10px;
    background:rgba(1,159,228,.08);
    color:var(--blue);
    font-size:16px;
    line-height:1;
    transform:none;
    opacity:.85;
  }

  .main-menu .menu-item-has-children > .sub-menu{
    display:none;
    position:static;
    gap:4px;
    width:100%;
    margin:4px 0 8px;
    padding:0 0 0 14px;
    list-style:none;
    background:transparent;
    border:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .main-menu .menu-item-has-children.submenu-open > .sub-menu{
    display:grid;
  }

  .main-menu .sub-menu a{
    min-height:44px;
    padding:10px 14px;
    font-size:15px;
    font-weight:700;
    color:var(--muted);
    border-radius:14px;
  }

  .main-menu .sub-menu a::after{
    display:none;
  }

  .nav-phone,
  .menu-phone > a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:58px;
    margin-top:18px;
    padding:0 18px;
    border-radius:17px;
    background:var(--green);
    color:#fff;
    font-weight:900;
    box-shadow:0 12px 26px rgba(22,163,74,.20);
    pointer-events:auto;
    white-space:nowrap;
  }

  .nav-phone:hover,
  .menu-phone > a:hover{
    background:var(--green-dark);
    color:#fff;
  }

  .nav-phone::before,
  .nav-phone::after,
  .menu-phone > a::before,
  .menu-phone > a::after{
    display:none;
  }

  .menu-backdrop{
    position:fixed;
    inset:0;
    z-index:49900;
    display:block;
    background:rgba(15,23,42,.40);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
  }

  .menu-open .menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

@media (max-width:620px){
  .site-nav{
    width:calc(100vw - 18px);
    max-width:calc(100vw - 18px);
    padding:88px 18px 22px;
  }

  .main-menu{
    gap:6px;
  }

  .main-menu a{
    min-height:52px;
    padding:13px 14px;
    font-size:17px;
  }
  
  .footer-link{
		display:flex;
		width:100%;
		justify-content:left;
		margin-bottom:12px;
	}

	.footer-link:last-child{
		margin-bottom:0;
	}
	
}

/* ------------------------------------------------------------
   Final: Mobile-Menü + horizontaler Overflow
------------------------------------------------------------ */

html,
body{
	width:100%;
	max-width:100%;
	overflow-x:clip;
	overscroll-behavior-x:none;
}

.site-loader.is-hidden{
	display:none !important;
}

.site-footer{
	overflow:hidden;
}

.footer-bg-word{
	max-width:100vw;
	overflow:hidden;
}

@media (max-width:980px){

	.site-nav{
		position:fixed !important;
		top:0 !important;
		right:0 !important;
		left:auto !important;
		z-index:50020;

		width:min(360px, calc(100vw - 18px));
		max-width:calc(100vw - 18px);
		height:100dvh;

		padding:88px 18px 22px;
		background:#fff;

		overflow-y:auto;
		overflow-x:hidden;

		opacity:0;
		visibility:hidden;
		transform:translate3d(18px,0,0);
		pointer-events:none;

		box-sizing:border-box;
		transition:opacity .24s ease, visibility .24s ease, transform .28s ease;
	}

	body.menu-open .site-nav{
		opacity:1;
		visibility:visible;
		transform:translate3d(0,0,0);
		pointer-events:auto;
	}

	.menu-backdrop{
		position:fixed;
		inset:0;
		z-index:49900;
		display:block;
		background:rgba(15,23,42,.40);

		opacity:0;
		visibility:hidden;
		pointer-events:none;
	}

	body.menu-open .menu-backdrop{
		opacity:1;
		visibility:visible;
		pointer-events:auto;
	}
}