/* ==========================================================================
   GEBÄUDEREINIGUNG AM RHEIN - DESIGN SYSTEM
   High-Conversion Style System nach dem Vorbild von Entrümpelung / Schlüsseldienst am Rhein
   ========================================================================== */

:root {
  /* Native UI fonts: schnell, vertraut und ohne einen externen Standard-Webfont. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  /* Brand Colors */
  --navy: #061b33;
  --navy-light: #0b2949;
  --navy-dark: #041426;
  --blue: #0b4d8d;
  --blue-hover: #083b6c;
  --yellow: #ffc21c;
  --yellow-hover: #e6ad12;
  --teal: #008779;
  --teal-light: #e6f6f4;
  
  /* Neutrals & Text */
  --ink: #102238;
  --ink-light: #2c3e50;
  --muted: #607084;
  --pale: #eef4f8;
  --bg-light: #f5f8fa;
  --white: #ffffff;
  --line: #d7e0e8;
  --line-dark: rgba(255, 255, 255, 0.16);

  /* Layout Tokens */
  --max: 1240px;
  --side: max(24px, calc((100vw - var(--max)) / 2));
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 4px 12px rgba(7, 27, 51, 0.06);
  --shadow-md: 0 12px 30px rgba(7, 27, 51, 0.1);
  --shadow-lg: 0 20px 48px rgba(7, 27, 51, 0.16);
}

/* Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* Auch bei direkt geöffneten #Links bleibt der Zielbereich frei unter der
   festen Navigation sichtbar. */
#leistungen { scroll-margin-top: 116px; }
#aussenreinigung { scroll-margin-top: 177px; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   TOP STATUS BAR
   ========================================================================== */
.status-bar {
  background: var(--navy);
  color: #dbe9f5;
  font-size: 13px;
  font-weight: 500;
  border-bottom: none;
}

.status-bar-inner {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.status-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42d47b;
  box-shadow: 0 0 0 4px rgba(66, 212, 123, 0.25);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(66, 212, 123, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(66, 212, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(66, 212, 123, 0); }
}

.status-call {
  color: #ffffff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-call:hover {
  color: var(--yellow);
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: min(var(--max), calc(100% - 48px));
  height: 90px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand-logo {
  margin-right: auto;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo img {
  height: 62px;
  width: auto;
  
  object-fit: contain;
  background: transparent;
  padding: 0;
  border-radius: 0;
  transition: transform 0.2s ease;
}

.brand-logo:hover img {
  transform: scale(1.03);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 700;
}

.main-nav a {
  padding: 8px 0;
  position: relative;
  color: var(--navy);
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--yellow);
  transition: var(--transition);
}

.main-nav a:hover {
  color: var(--blue);
}

.main-nav a:hover::after {
  width: 100%;
}

.header-cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #25D366;
  color: #fff;
  transition: var(--transition);
}

.header-wa-btn:hover {
  background: #20ba5a;
  transform: translateY(-2px);
}

.header-call-btn {
  display: flex;
  flex-direction: column;
  padding: 10px 18px;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  border-radius: 12px;
  line-height: 1.2;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(255, 194, 28, 0.35);
}

.header-call-btn span {
  font-size: 10px;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(7, 27, 51, 0.8);
}

.header-call-btn strong {
  font-size: 15px;
  font-family: var(--font-heading);
}

.header-call-btn:hover {
  background: var(--yellow-hover);
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
  font-size: 26px;
  color: #fff;
  color: var(--navy);
  padding: 8px;
}

/* ==========================================================================
   BUTTONS & COMMON UI
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  transition: var(--transition);
  text-align: center;
}

.btn-primary {
  background: var(--yellow);
  color: var(--navy);
  border: 1px solid var(--yellow);
  box-shadow: 0 6px 18px rgba(255, 194, 28, 0.3);
}

.btn-primary:hover {
  background: var(--yellow-hover);
  border-color: var(--yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 194, 28, 0.4);
}

.btn-outline {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

/* WhatsApp bleibt auch im Hover-Zustand eindeutig als Kontaktkanal erkennbar. */
.btn-outline[href*="wa.me"]:hover,
.btn-outline[href*="wa.me"]:focus-visible {
  background: #25d366;
  border-color: #25d366;
  color: #052b18;
  box-shadow: 0 10px 24px rgba(37, 211, 102, .28);
}

.btn-dark {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.btn-dark:hover {
  background: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
  transform: translateY(-2px);
}

.section-number {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
}

.section-number::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  margin: 0 0 3px 10px;
  background: var(--yellow);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  border-bottom: 1px solid var(--line);
  padding: 0 var(--side) 60px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%);
  position: relative;
}

.hero-inner {
  position: relative;
  min-height: 640px;
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: center;
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto;
}

.hero-copy {
  padding: 60px 20px 80px 0;
  z-index: 2;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(11, 77, 141, 0.08);
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  border-radius: 20px;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  margin-bottom: 24px;
  color: var(--navy);
}

.hero h1 span {
  color: var(--blue);
}

.hero-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-light);
  max-width: 540px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-badges span::before {
  content: '✓';
  color: var(--teal);
  font-weight: 800;
}

/* Hero Visual / Compare Box */
.hero-visual {
  position: relative;
  height: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-card {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy);
}

.compare-slider-container {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
}

.compare-img-before,
.compare-img-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-img-after-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-right: 3px solid var(--yellow);
  z-index: 2;
}

.compare-img-after-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 5;
  cursor: ew-resize;
  pointer-events: none;
}

/* Vorher/Nachher Labels unter dem Slider */
.compare-labels {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px 0;
}

.compare-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  color: var(--navy);
}

.compare-label-vorher { color: var(--muted); }
.compare-label-nachher { color: var(--teal, #008779); }

/* Slider responsive heights */
@media (max-width: 768px) {
  .compare-slider-container { height: 400px; }
  .compare-handle { width: 38px; height: 38px; font-size: 12px; }
}
@media (max-width: 480px) {
  .compare-slider-container { height: 320px; }
  .compare-labels { padding: 8px 12px 0; }
  .compare-label { font-size: 12px; }
}

/* Stadtteilübersicht: klare, gut erreichbare Navigation ohne Textwand. */
.service-list-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.service-list-card { display:grid; grid-template-columns:30px 1fr 18px; align-items:center; gap:10px; min-height:52px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:var(--navy); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.service-list-card span { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.08em; }
.service-list-card strong { font-family:var(--font-heading); font-size:14px; }
.service-list-card b { color:var(--blue); font-size:17px; }
.service-list-card:hover { transform:translateY(-2px); border-color:var(--blue); box-shadow:var(--shadow-sm); }
.subpage-benefits-media { margin:0; overflow:hidden; }
.subpage-benefits-media figcaption { padding:14px 16px; background:rgba(5,21,40,.9); color:#fff; }
.subpage-benefits-media figcaption strong,.subpage-benefits-media figcaption span { display:block; }
.subpage-benefits-media figcaption span { margin-top:3px; color:#d9e7f3; font-size:13px; }
@media (max-width:980px) { .service-list-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .service-list-grid { grid-template-columns:1fr; gap:7px; } .service-list-card { min-height:50px; padding:10px 12px; } }

/* Bezirksseiten: klare Orientierung zwischen Gebiet, Leistung und Nachbarseiten */
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; color:var(--muted); font-size:13px; font-weight:700; }
.breadcrumb a { color:var(--blue); }
.button-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.service-scope-grid article a { display:inline-flex; margin-top:16px; color:var(--blue); font-size:14px; font-weight:800; }

/* Bezirksseiten: exakt derselbe vollständig klickbare Kartenaufbau wie auf
   der Startseite – nur als Viererreihe für die Kernleistungen. */
.service-scope-grid.district-service-card-grid {
  gap: 18px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.service-scope-grid.district-service-card-grid > .district-service-card {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.service-scope-grid.district-service-card-grid > .district-service-card:nth-child(even) { background: transparent; }
.service-scope-grid.district-service-card-grid .district-service-card-link {
  width: 100%;
  height: 318px;
  min-height: 318px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(0,0,0,.24);
  transform: translateY(-12px);
  transition: transform .22s ease, box-shadow .22s ease;
}
.service-scope-grid.district-service-card-grid .district-service-card:nth-child(even) .district-service-card-link { background: #fff; }
.service-scope-grid.district-service-card-grid .district-service-card-link:hover {
  transform: translateY(-18px);
  box-shadow: 0 24px 44px rgba(0,0,0,.34);
  background: #fff;
}
.service-scope-grid.district-service-card-grid .secondary-service-media img { object-position: center 18%; }
.service-scope-grid.district-service-card-grid .secondary-service-content { min-height: 164px; }
.service-scope-grid.district-service-card-grid .secondary-service-content span {
  display: block;
  margin: 0;
  color: #5d7184 !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}
.service-scope-grid.district-service-card-grid .secondary-service-content strong { color: var(--navy); }
.service-scope-grid.district-service-card-grid .secondary-service-content b { color: var(--blue); }

/* Glas- und Steinreinigung: dieselben dunklen, verbundenen Einsatzkacheln. */
.service-use-section { background: var(--navy) !important; border-color: rgba(255,255,255,.12) !important; }
.service-use-section h2 { color: #fff !important; }
.service-use-section > div > div > p { color: rgba(255,255,255,.74) !important; }
.service-use-cards {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 2px !important;
  padding: 2px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.2);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.service-use-cards > div {
  min-height: 194px;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0a2644 !important;
}
.service-use-cards > div:nth-child(even) { background: #0e3356 !important; }
.service-use-cards h3 { color: #fff !important; }
.service-use-cards p { color: rgba(255,255,255,.76) !important; }
@media (max-width: 768px) {
  .service-use-cards { grid-template-columns: 1fr !important; gap: 1px !important; }
  .service-use-cards > div { min-height: 0; padding: 22px !important; }
}

/* Einfache, klare Leistungs-Kacheln: keine technischen Zählmarken. */
.service-scope-grid > article > span { display: none !important; }

/* Treppenhaus-Seite: dieselbe zusammenhängende Viererreihe wie bei der
   Unterhaltsreinigung – keine einzelnen, frei schwebenden Kacheln. */
.treppenhaus-service-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 2px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.2);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.treppenhaus-service-cards > div {
  min-height: 194px;
  padding: 28px !important;
  background: #0a2644 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
}
.treppenhaus-service-cards > div:nth-child(even) { background: #0e3356 !important; }
.treppenhaus-service-cards h3 { color: #fff !important; }
.treppenhaus-service-cards p { color: rgba(255,255,255,.76) !important; }
@media (max-width: 768px) {
  .treppenhaus-service-cards { grid-template-columns: 1fr !important; gap: 1px !important; }
  .treppenhaus-service-cards > div { min-height: 0; padding: 22px !important; }
}
.district-network { padding:52px var(--side) 34px; background:#fff; border-top:1px solid #e5edf3; }
.district-network-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:42px; align-items:center; }
.district-network h2,.district-faq h2 { margin:10px 0 12px; color:var(--navy); font-size:clamp(30px,3.2vw,44px); line-height:1.08; }
.district-network p { max-width:520px; color:var(--muted); }
.district-network-links { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.district-network-links a { min-height:38px; padding:9px 12px; border:1px solid var(--navy); background:var(--navy); display:inline-flex; justify-content:space-between; align-items:center; gap:9px; color:#fff; font-size:13px; font-weight:800; box-shadow:none; transition:transform .2s ease, background .2s ease; }
.district-network-links a:hover { transform:translateY(-2px); border-color:var(--blue); background:var(--blue); box-shadow:none; }
.district-network-links .district-overview-link { color:var(--navy); background:#fff; border-color:#b7c8d7; }
.district-network-links .district-overview-link:hover { color:#fff; border-color:var(--blue); background:var(--blue); }
.district-faq { padding:34px var(--side) 76px; background:var(--white); }
.district-faq-inner { max-width:800px; margin:auto; }

@media (max-width:760px) {
  .district-network-inner { grid-template-columns:1fr; gap:30px; }
  .district-network-links { display:grid; grid-template-columns:1fr; }
  .district-network-links a { width:100%; }
  .button-row .btn { width:100%; justify-content:center; }
}

/* =====================================================================
   STARTSEITE: UNTERHALTSREINIGUNG IM FOKUS
   ===================================================================== */
.hero {
  padding: 0 var(--side) 56px;
  background: #fff;
}

.hero-inner {
  min-height: 620px;
  grid-template-columns: minmax(520px, .98fr) minmax(0, 1.02fr);
  gap: 40px;
}

.hero-copy { min-width: 0; padding: 70px 0; }

.hero h1 {
  font-size: clamp(42px, 4.5vw, 67px);
  max-width: 100%;
}

.hero-visual {
  height: auto;
  min-height: 0;
  display: block;
}

.hero-visual > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 68% center;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.trust-bar { background: var(--pale); color: var(--navy); border: 0; }
.trust-item { border-color: var(--line); }
.trust-item strong { color: var(--navy); }
.trust-item span { color: var(--muted); }

.services-section { padding: 118px 0; }
.focus-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.focus-service-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.focus-service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.focus-service-card img { width: 100%; height: 218px; object-fit: cover; }
.service-card-office img { object-position: center 58%; }
.service-card-practice img { object-position: center 52%; }
.service-card-stairs img { object-position: center 55%; }
.service-card-build img { object-position: center 52%; }
.focus-service-card > div { padding: 18px; }
.focus-service-card h3 { font-size: 22px; line-height: 1.18; margin-bottom: 9px; }
.focus-service-card p { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.focus-service-card span { color: var(--blue); font-size: 15px; font-weight: 800; }

.secondary-services { background: var(--navy); padding: 88px 0; border: 0; }
.secondary-services-inner { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 28% 1fr; gap: 56px; align-items: center; }
.secondary-eyebrow { display: inline-block; margin-bottom: 14px; color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: normal; }
.secondary-services h2 { color: #fff; font-size: clamp(30px, 3vw, 42px); margin-bottom: 14px; }
.secondary-services p { color: rgba(255,255,255,.76); margin: 0; font-size: 16px; line-height: 1.6; }
.secondary-service-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.secondary-service-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #fff; box-shadow: 0 18px 34px rgba(0,0,0,.24); color: var(--navy); transform: translateY(-12px); transition: transform .22s ease, box-shadow .22s ease; }
.secondary-service-card:hover { color: var(--navy); transform: translateY(-18px); box-shadow: 0 24px 44px rgba(0,0,0,.34); }
.secondary-service-media { position: relative; height: 154px; overflow: hidden; background: #d9e3e9; }
.secondary-service-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.secondary-service-content { display: flex; min-height: 164px; flex: 1; flex-direction: column; padding: 20px; }
.secondary-service-content strong, .secondary-service-content span, .secondary-service-content b { display: block; }
.secondary-service-content strong { margin-bottom: 10px; color: var(--navy); font-size: 20px; line-height: 1.2; }
.secondary-service-content span { color: #5d7184; font-size: 16px; line-height: 1.55; }
.secondary-service-content b { margin-top: auto; padding-top: 18px; color: var(--blue); font-size: 15px; }
.compare-label { position: absolute; top: 12px; z-index: 1; padding: 5px 8px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: normal; text-transform: none; }
.compare-label-before { left: 12px; }
.compare-label-after { right: 12px; }

/* Project reports: compact, result-focused workflow */
.project-workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 34px 0 44px; padding: 2px; list-style: none; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.2); box-shadow: 0 16px 34px rgba(10,31,58,.14); }
.project-workflow-four { grid-template-columns: repeat(4, 1fr); }
.project-workflow li { min-height: 210px; padding: 28px 24px; background: var(--navy); }
.project-workflow li:nth-child(even) { background: var(--navy-light); }
.project-workflow span { display: block; margin-bottom: 28px; color: var(--yellow); font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.project-workflow h3 { margin-bottom: 10px; color: #fff; font-size: 20px; }
.project-workflow p { margin: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.55; }

/* Service subpages: use cases with a clear visual hierarchy */
.service-scope-section { padding: 82px var(--side); background: var(--navy); }
.service-scope-inner { max-width: var(--max); margin: 0 auto; }
.service-scope-intro { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.service-scope-intro .section-number { color: var(--yellow); }
.service-scope-intro h2 { margin-bottom: 12px; color: #fff; font-size: clamp(29px, 3.2vw, 42px); }
.service-scope-intro p { margin: 0; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.6; }
.service-scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; overflow: hidden; border-radius: 16px; background: rgba(255,255,255,.2); box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.service-scope-grid article { min-height: 194px; padding: 28px 24px; background: #0a2644; }
.service-scope-grid article:nth-child(even) { background: #0e3356; }
.service-scope-grid span { display: block; margin-bottom: 26px; color: var(--yellow); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.service-scope-grid h3 { margin-bottom: 10px; color: #fff; font-size: 19px; }
.service-scope-grid p { margin: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.55; }

/* Detail-Kacheln für die vier Einsatzbereiche der Unterhaltsreinigung. */
.service-scope-grid.scope-detail-cards { grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; padding:0; overflow:visible; border-radius:0; background:transparent; box-shadow:none; }
.scope-detail-card { display:flex; min-height:318px; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:#fff; box-shadow:0 18px 34px rgba(0,0,0,.24); color:var(--navy); text-decoration:none; transform:translateY(-12px); transition:transform .22s ease,box-shadow .22s ease; }
.scope-detail-card:hover { transform:translateY(-18px); box-shadow:0 24px 44px rgba(0,0,0,.34); }
.scope-detail-card:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.scope-detail-card img { width:100%; height:132px; object-fit:cover; object-position:center 18%; }
.scope-detail-card > span { display:flex; min-height:184px; flex:1; flex-direction:column; margin:0; padding:20px 18px 18px; color:var(--navy); letter-spacing:normal; }
.scope-detail-card strong { display:block; margin:0 0 9px; color:var(--navy); font-size:20px; line-height:1.2; }
.scope-detail-card small { display:block; color:#5d7184; font-size:16px; font-weight:500; line-height:1.55; }
.scope-detail-card em { display:block; color:#5d7184; font-size:16px; font-style:normal; font-weight:500; line-height:1.55; }
.scope-detail-card b { display:block; margin-top:auto; padding-top:16px; color:var(--blue); font-size:15px; }

/* Gemeinsamer Aufbau der ausführlichen Einsatzbereichsseiten. */
.scope-detail-hero { padding:82px var(--side) 66px; background:#f5f8fb; }
.scope-detail-hero-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.92fr); gap:54px; align-items:center; }
.scope-detail-hero h1 { max-width:700px; margin:12px 0 18px; color:var(--navy); font-size:clamp(38px,4.4vw,62px); line-height:1.02; letter-spacing:-.045em; }
.scope-detail-hero p { max-width:660px; color:var(--muted); font-size:18px; line-height:1.65; }
.scope-detail-hero figure { margin:0; overflow:hidden; border-radius:18px; box-shadow:var(--shadow-lg); }
.scope-detail-hero figure img { width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center; }
.scope-detail-content { padding:78px var(--side); background:#fff; }
.scope-detail-content-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:64px; }
.scope-detail-content h2 { margin:12px 0 16px; color:var(--navy); font-size:clamp(30px,3.3vw,46px); line-height:1.08; letter-spacing:-.035em; }
.scope-detail-content p { color:var(--muted); font-size:16px; line-height:1.7; }
.scope-detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:26px 0 0; padding:0; list-style:none; }
.scope-detail-list li { padding:19px; border:1px solid #dbe5ed; border-radius:12px; color:var(--navy); font-weight:700; line-height:1.4; }
.scope-detail-list li::before { content:'✓'; margin-right:9px; color:#0ea89a; }
.scope-detail-band { padding:70px var(--side); background:var(--navy); }
.scope-detail-band-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; overflow:hidden; border-radius:16px; background:rgba(255,255,255,.2); }
.scope-detail-band article { min-height:184px; padding:28px; background:#0a2644; }
.scope-detail-band article:nth-child(even) { background:#0e3356; }
.scope-detail-band h3 { margin:0 0 10px; color:#fff; font-size:20px; }
.scope-detail-band p { margin:0; color:rgba(255,255,255,.76); line-height:1.6; }
@media (max-width:768px) { .scope-detail-hero { padding:56px var(--side); } .scope-detail-hero-inner,.scope-detail-content-inner { grid-template-columns:1fr; gap:30px; } .scope-detail-hero figure { order:-1; } .scope-detail-content { padding:56px var(--side); } .scope-detail-list { grid-template-columns:1fr; } .scope-detail-band { padding:54px var(--side); } .scope-detail-band-inner { grid-template-columns:1fr; gap:1px; } .scope-detail-band article { min-height:0; padding:24px; } }

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 8px; }
  .hero-copy { padding: 56px 0 26px; }
  .hero-visual { max-width: 780px; }
  .secondary-services-inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 768px) {
  .status-live { display: none; }
  .status-bar-inner { justify-content: center; }
  .status-call { white-space: nowrap; }
  .hero { padding-bottom: 0; }
  .hero-inner { min-height: 0; }
  .hero-copy { padding-top: 44px; }
  .hero h1 { font-size: clamp(32px, 8.7vw, 40px); line-height: 1.08; hyphens: none; overflow-wrap: normal; }
  .hero-lead { font-size: 17px; }
  .hero-visual > img { border-radius: 12px; aspect-ratio: 4 / 3; object-position: 68% center; }
  .trust-bar { padding: 28px 0; }
  .trust-item { border-color: var(--line); }
  .focus-service-grid, .secondary-service-links { grid-template-columns: 1fr; }
  .focus-service-card { display: block; }
  .focus-service-card img { height: 200px; min-height: 0; }
  .secondary-services { padding: 58px 0; }
  .project-workflow, .project-workflow-four { grid-template-columns: 1fr; gap: 1px; margin: 26px 0 34px; }
  .project-workflow li { min-height: 0; padding: 22px; }
  .project-workflow span { margin-bottom: 12px; }
  .service-scope-section { padding: 58px var(--side); }
  .service-scope-grid { grid-template-columns: 1fr; gap: 1px; }
  .service-scope-grid article { min-height: 0; padding: 22px; }
  .service-scope-grid span { margin-bottom: 12px; }
  .service-scope-grid.scope-detail-cards { grid-template-columns:1fr; gap:16px; }
  .scope-detail-card { min-height:0; transform:none; }
  .scope-detail-card:hover { transform:translateY(-4px); }
  .scope-detail-card img { height:190px; }
}

.hero-floating-badge {
  position: absolute;
  top: 20px;
  right: -10px;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 6;
  border-left: 4px solid var(--yellow);
}

/* Availability Strip */
.availability-bar {
  position: absolute;
  bottom: -55px;
  right: 0;
  left: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--navy);
  color: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 6;
}

.avail-item {
  padding: 18px 20px;
  border-right: 1px solid var(--line-dark);
}

.avail-item:last-child {
  border-right: none;
}

.avail-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  color: #ffffff;
}

.avail-item span {
  display: block;
  font-size: 12px;
  color: #bcd0e1;
  margin-top: 3px;
}

/* ==========================================================================
   TRUST BAR (4 Columns)
   ========================================================================== */
.trust-bar {
  background: var(--navy);
  color: var(--white);
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-grid {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-item {
  padding: 10px 20px;
  border-right: 1px solid var(--line-dark);
}

.trust-item:last-child {
  border-right: none;
}

.trust-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 17px;
  margin-bottom: 6px;
  color: #ffffff;
}

.trust-item span {
  display: block;
  font-size: 13px;
  color: #aebfd0;
  line-height: 1.45;
}

/* ==========================================================================
   SECTION COMMON LAYOUT (2 Columns: 38% / 62%)
   ========================================================================== */
.section-grid-layout {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 6vw;
  align-items: start;
}

.section-intro h2 {
  font-size: clamp(34px, 3.8vw, 54px);
  margin-bottom: 18px;
  color: var(--navy);
}

.section-intro p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
.services-section {
  padding: 110px 0;
  background: var(--white);
}

.service-list {
  border-top: 1px solid var(--line);
}

.service-card {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 20px;
  align-items: center;
  min-height: 110px;
  padding: 24px 18px;
  border-bottom: 1px solid var(--line);
  transition: var(--transition);
}

.service-card:hover {
  background: var(--pale);
  padding-left: 26px;
}

.service-card-body h3 {
  font-size: 21px;
  margin-bottom: 6px;
  color: var(--navy);
}

.service-card-body p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.service-card-arrow {
  color: var(--blue);
  font-size: 24px;
  font-weight: 800;
  transition: var(--transition);
}

.service-card:hover .service-card-arrow {
  transform: translateX(6px);
  color: var(--yellow-hover);
}

/* ==========================================================================
   SHOWCASE / GALLERY / BEFORE-AFTER
   ========================================================================== */
.showcase-section {
  padding: 110px 0;
  background: var(--bg-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.showcase-grid {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.showcase-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.showcase-media {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.showcase-card:hover .showcase-media img {
  transform: scale(1.05);
}

.showcase-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--navy);
  color: #fff;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  text-transform: none;
  letter-spacing: normal;
}

.showcase-content {
  padding: 24px;
}

.showcase-content h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.showcase-content p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 14px;
}

.showcase-specs {
  display: flex;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}

/* ==========================================================================
   PRICING / TRANSPARENZ SECTION
   ========================================================================== */
.pricing-section {
  padding: 110px 0;
  background: var(--pale);
}

.price-panel {
  padding: 0 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.price-row:last-child {
  border-bottom: none;
}

.price-row h4 {
  font-size: 17px;
  margin-bottom: 4px;
}

.price-row p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.price-tag {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  text-align: right;
  white-space: nowrap;
}

.price-tag small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.price-footer-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ==========================================================================
   PROCESS SECTION (3 Steps)
   ========================================================================== */
.process-section {
  padding: 100px var(--side);
  background: var(--navy);
  color: var(--white);
}

.process-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 34% 66%;
  gap: 5vw;
  align-items: center;
}

.process-intro h2 {
  color: #ffffff;
  font-size: clamp(34px, 3.8vw, 52px);
  margin-bottom: 16px;
}

.process-intro p {
  color: #bcd0e1;
  font-size: 16px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
}

.process-step {
  padding: 0 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.process-marker {
  display: block;
  margin-bottom: 14px;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 700;
}

.process-step h3 {
  color: #ffffff;
  font-size: 19px;
  margin-bottom: 8px;
}

.process-step p {
  color: #aebfd0;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   DISTRICT HUB (50 Stadtteile)
   ========================================================================== */
.district-section {
  padding: 110px 0;
  background: var(--white);
}

.district-hub-inner {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.district-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.district-header h2 {
  font-size: clamp(32px, 3.5vw, 48px);
  margin-bottom: 14px;
}

.district-header p {
  color: var(--muted);
  font-size: 16px;
}

.district-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.district-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: var(--transition);
}

.district-link:hover {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
  transform: translateY(-2px);
}

.district-link span {
  color: var(--blue);
  font-size: 16px;
  transition: var(--transition);
}

.district-link:hover span {
  color: var(--yellow);
  transform: translateX(4px);
}

.district-hub-cta {
  display: none;
}

.district-hub-close {
  display: none;
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.faq-section {
  padding: 100px 0;
  background: var(--bg-light);
  border-top: 1px solid var(--line);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--transition);
}

.faq-item[open] {
  border-color: var(--yellow);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.faq-summary {
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

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

.faq-summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 700;
  color: var(--yellow);
  transition: var(--transition);
}

.faq-item[open] .faq-summary::after {
  content: '−';
  transform: rotate(180deg);
}

.faq-body {
  padding: 0 24px 22px;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.6;
}

/* ==========================================================================
   SUBPAGE & CONTACT & LEGAL LAYOUTS (Referenz-Design)
   ========================================================================== */
.subpage {
  padding: 0 0 100px;
}

/* Blauer 2. Abschnitt auf allen Unterseiten (Vorteile-Sektion) */
.subpage-benefits-section {
  padding: 70px var(--side);
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--blue) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.subpage-benefits-section::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 40%;
  height: 160%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.06), transparent 65%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .subpage-benefits-section > div {
    grid-template-columns: 1fr !important;
  }
}

/* Einheitlicher, vollständiger Aufbau für die vier neuen Fassaden-Detailseiten. */
body:has(.scope-detail-hero) > .site-header { position:relative; z-index:10; height:92px; border-bottom:1px solid var(--line); background:#fff; }
body:has(.scope-detail-hero) .nav-wrap { width:min(var(--max),calc(100% - (var(--side) * 2))); height:100%; margin:auto; display:flex; align-items:center; gap:34px; }
body:has(.scope-detail-hero) .logo { width:112px; height:58px; flex:0 0 auto; overflow:hidden; background:url('assets/logo-gebaeudereinigung-am-rhein.png') center/contain no-repeat; color:transparent; font-size:0; }
body:has(.scope-detail-hero) .logo small { display:none; }
body:has(.scope-detail-hero) .nav-wrap nav { display:flex; align-items:center; justify-content:flex-end; gap:25px; margin-left:auto; }
body:has(.scope-detail-hero) .nav-wrap nav a { color:var(--navy); font-size:14px; font-weight:800; text-decoration:none; white-space:nowrap; }
body:has(.scope-detail-hero) .nav-wrap nav a:hover { color:var(--blue); }
body:has(.scope-detail-hero) .nav-cta { display:grid; gap:2px; padding:11px 16px; border-radius:12px; background:var(--yellow); color:var(--navy); font-size:15px; font-weight:900; line-height:1.1; text-decoration:none; box-shadow:0 8px 18px rgba(255,194,28,.26); white-space:nowrap; }
body:has(.scope-detail-hero) .nav-cta small { font-size:9px; letter-spacing:.06em; }
body:has(.scope-detail-hero) .scope-detail-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.95fr); gap:56px; align-items:center; width:min(var(--max),calc(100% - 48px)); margin:auto; padding:76px 0; }
body:has(.scope-detail-hero) .scope-detail-hero > div { min-width:0; }
body:has(.scope-detail-hero) .scope-detail-hero > img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:18px; box-shadow:var(--shadow-lg); }
body:has(.scope-detail-hero) .scope-detail-hero .button { display:inline-flex; margin-top:22px; }
body:has(.scope-detail-hero) .scope-detail-content { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:64px; align-items:start; width:min(var(--max),calc(100% - 48px)); margin:auto; padding:78px 0; }
body:has(.scope-detail-hero) .scope-detail-content > div:last-child:not(.scope-detail-list) { display:flex; align-items:center; justify-content:flex-end; padding-left:24px; }
body:has(.scope-detail-hero) .scope-detail-list { display:block; margin:0; padding:28px; border:1px solid #dbe5ed; border-radius:16px; background:#fff; list-style:none; }
body:has(.scope-detail-hero) .scope-detail-list h3 { margin:0 0 16px; color:var(--navy); font-size:22px; }
body:has(.scope-detail-hero) .scope-detail-list ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
body:has(.scope-detail-hero) .scope-detail-list li { padding:15px; border:1px solid #dbe5ed; border-radius:10px; color:var(--navy); font-weight:700; font-size:14px; line-height:1.4; }
body:has(.scope-detail-hero) .scope-detail-band { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; max-width:var(--max); margin:0 auto; padding:0; overflow:hidden; border-radius:16px; background:rgba(255,255,255,.2); }
body:has(.scope-detail-hero) .site-footer { padding:32px var(--side); background:var(--navy); color:#fff; text-align:center; }
@media (max-width:900px) { body:has(.scope-detail-hero) > .site-header { height:auto; } body:has(.scope-detail-hero) .nav-wrap { min-height:80px; flex-wrap:wrap; padding:12px 0; } body:has(.scope-detail-hero) .nav-wrap nav { order:3; width:100%; justify-content:center; flex-wrap:wrap; gap:12px 18px; } body:has(.scope-detail-hero) .scope-detail-hero,body:has(.scope-detail-hero) .scope-detail-content { grid-template-columns:1fr; gap:32px; width:calc(100% - 48px); padding:54px 0; } body:has(.scope-detail-hero) .scope-detail-hero > img { order:-1; } body:has(.scope-detail-hero) .scope-detail-list ul,body:has(.scope-detail-hero) .scope-detail-band { grid-template-columns:1fr; } body:has(.scope-detail-hero) .scope-detail-content > div:last-child:not(.scope-detail-list) { justify-content:flex-start; } }

/* Die Unterhalts-Detailseiten besitzen einen eigenen Innen-Wrapper. Er behält
   den bewährten Seitenaufbau und wird nicht vom kompakten Fassaden-Template überschrieben. */
body:has(.scope-detail-hero-inner) .scope-detail-hero { display:block; width:auto; max-width:none; margin:0; padding:82px var(--side) 66px; }
body:has(.scope-detail-hero-inner) .scope-detail-content { display:block; width:auto; max-width:none; margin:0; padding:78px var(--side); }
body:has(.scope-detail-hero-inner) .scope-detail-band { display:block; max-width:none; margin:0; padding:70px var(--side); overflow:visible; border-radius:0; background:var(--navy); }
body:has(.scope-detail-hero-inner) .scope-detail-list { display:grid; padding:0; border:0; border-radius:0; background:transparent; }
body:has(.scope-detail-hero-inner) .scope-detail-list h3 { margin:0; }
body:has(.scope-detail-hero-inner) .scope-detail-list ul { display:contents; }
/* Detailseiten: klarer Abstand am Rand und eine echte Anruf-Schaltfläche im Abschlussbereich. */
body:has(.scope-detail-hero):not(:has(.scope-detail-hero-inner)) .scope-detail-hero,
body:has(.scope-detail-hero):not(:has(.scope-detail-hero-inner)) .scope-detail-content { width:min(calc(var(--max) + 48px),100%); padding-left:24px; padding-right:24px; }
body:has(.scope-detail-hero):not(:has(.scope-detail-hero-inner)) .scope-detail-content .button.primary,
body:has(.scope-detail-hero-inner) .final-cta-phone { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:14px 24px; border:0; border-radius:12px; font-size:18px; font-weight:900; line-height:1.2; text-decoration:none; white-space:nowrap; transition:transform .2s ease,box-shadow .2s ease; }
body:has(.scope-detail-hero):not(:has(.scope-detail-hero-inner)) .scope-detail-content .button.primary { background:var(--yellow); color:var(--navy); box-shadow:0 10px 22px rgba(255,194,28,.28); }
body:has(.scope-detail-hero-inner) .final-cta-phone { background:var(--navy); color:#fff; box-shadow:0 10px 22px rgba(7,27,51,.26); }
body:has(.scope-detail-hero):not(:has(.scope-detail-hero-inner)) .scope-detail-content .button.primary:hover,
body:has(.scope-detail-hero-inner) .final-cta-phone:hover { opacity:1; transform:translateY(-2px); box-shadow:0 14px 28px rgba(255,194,28,.36); }
@media (max-width:900px) { body:has(.scope-detail-hero-inner) .scope-detail-hero,body:has(.scope-detail-hero-inner) .scope-detail-content { width:auto; padding:56px var(--side); } body:has(.scope-detail-hero-inner) .scope-detail-band { padding:54px var(--side); } }

/* Einheitlicher Detailseiten-Aufbau für die Dachreinigung. */
body:has(.scope-detail-hero-inner) .site-header .brand { margin-right:auto; display:flex; align-items:center; text-decoration:none; }
body:has(.scope-detail-hero-inner) .site-header .brand img { display:block; width:auto; height:62px; object-fit:contain; }
body:has(.scope-detail-hero-inner) .site-header nav { display:flex; align-items:center; gap:24px; font-size:15px; font-weight:700; }
body:has(.scope-detail-hero-inner) .site-header nav a { color:var(--navy); text-decoration:none; }
body:has(.scope-detail-hero-inner) .header-cta { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:54px; padding:8px 16px; border-radius:12px; background:var(--yellow); color:var(--navy); font-size:16px; font-weight:900; line-height:1.1; text-decoration:none; }
body:has(.scope-detail-hero-inner) .header-cta small { font-size:10px; font-weight:800; }
body:has(.scope-detail-hero-inner) .scope-detail-hero-inner > img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:18px; box-shadow:var(--shadow-lg); }
body:has(.scope-detail-hero-inner) .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
body:has(.scope-detail-hero-inner) .hero-actions .button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:14px 22px; border:2px solid var(--navy); border-radius:12px; color:var(--navy); font-weight:800; text-decoration:none; }
body:has(.scope-detail-hero-inner) .hero-actions .button.primary { border-color:var(--yellow); background:var(--yellow); }
body:has(.scope-detail-hero-inner) .scope-detail-content:not(:has(.scope-detail-content-inner)) { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:64px; max-width:none; margin:0; }
body:has(.scope-detail-hero-inner) .scope-detail-content:not(:has(.scope-detail-content-inner)) > div,body:has(.scope-detail-hero-inner) .scope-detail-content:not(:has(.scope-detail-content-inner)) > aside { min-width:0; }
body:has(.scope-detail-hero-inner) .scope-detail-content:not(:has(.scope-detail-content-inner)) aside { padding:26px; border:1px solid #dbe5ed; border-radius:16px; }
body:has(.scope-detail-hero-inner) .scope-detail-content:not(:has(.scope-detail-content-inner)) ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:26px 0 0; padding:0; list-style:none; }
body:has(.scope-detail-hero-inner) .scope-detail-content:not(:has(.scope-detail-content-inner)) li { padding:14px; border:1px solid #dbe5ed; border-radius:10px; color:var(--navy); font-weight:700; line-height:1.4; }
@media (max-width:768px) { body:has(.scope-detail-hero-inner) .site-header nav { display:none; } body:has(.scope-detail-hero-inner) .scope-detail-content:not(:has(.scope-detail-content-inner)) { grid-template-columns:1fr; gap:30px; } body:has(.scope-detail-hero-inner) .scope-detail-content:not(:has(.scope-detail-content-inner)) ul { grid-template-columns:1fr; } }

/* Bezirksseiten: gleicher ruhiger Einstieg wie auf der Startseite. */
.subhero.district-page-hero {
  padding: 62px var(--side) 52px;
  background: #ffffff;
  border-bottom: none;
}

.subhero-inner.district-hero-layout {
  max-width: var(--max);
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: 70px;
}

.district-hero-copy .section-number {
  margin-bottom: 14px;
}

.district-hero-copy h1 {
  max-width: 640px;
  font-size: clamp(44px, 5.3vw, 74px);
  line-height: .99;
  letter-spacing: -.055em;
  margin-bottom: 20px;
}

.district-hero-copy p {
  max-width: 600px;
  font-size: 17px;
  line-height: 1.62;
}

.district-hero-visual {
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(7, 27, 51, .16);
  border: 1px solid rgba(7, 27, 51, .08);
}

.district-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 360px;
  max-height: 470px;
  object-fit: cover;
}

.district-trust-strip {
  background: var(--navy);
  color: #ffffff;
}

.district-trust-inner {
  width: min(var(--max), calc(100% - 48px));
  min-height: 118px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.district-trust-inner article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 28px;
  border-right: 1px solid rgba(255,255,255,.13);
}

.district-trust-inner article:last-child { border-right: none; }

.district-trust-inner strong {
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 6px;
}

.district-trust-inner span {
  color: #aec3d8;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .subhero-inner.district-hero-layout { grid-template-columns: 1fr 1fr; gap: 38px; }
  .district-hero-copy h1 { font-size: clamp(40px, 5vw, 58px); }
  .district-trust-inner { grid-template-columns: 1fr 1fr; }
  .district-trust-inner article:nth-child(2) { border-right: none; }
  .district-trust-inner article:nth-child(-n + 2) { border-bottom: 1px solid rgba(255,255,255,.13); }
}

@media (max-width: 768px) {
  .subhero.district-page-hero { padding: 42px var(--side) 38px; }
  .subhero-inner.district-hero-layout { grid-template-columns: 1fr; gap: 30px; }
  .district-hero-copy h1 { font-size: clamp(38px, 11vw, 54px); }
  /* Bezirksbilder sind überwiegend Hochformat. Auf dem Handy zeigen wir das
     komplette Motiv statt es in einen festen, zu niedrigen Rahmen zu schneiden. */
  .district-hero-visual img {
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .district-trust-inner { grid-template-columns: 1fr; }
  .district-trust-inner article,
  .district-trust-inner article:nth-child(2) { border-right: none; border-bottom: 1px solid rgba(255,255,255,.13); }
  .district-trust-inner article:last-child { border-bottom: none; }
}

.subhero {
  padding: 24px var(--side) 20px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%);
  border-bottom: 1px solid var(--line);
}

.subhero-inner {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.subhero h1 {
  font-size: clamp(30px, 3.5vw, 46px);
  margin-bottom: 10px;
  color: var(--navy);
  max-width: 850px;
}

.subhero p {
  color: var(--muted);
  font-size: 17px;
  max-width: 680px;
  line-height: 1.55;
  margin: 0;
}

.contact-stage {
  width: min(var(--max), calc(100% - 48px));
  margin: 60px auto 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.contact-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.contact-actions a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 26px;
  background: var(--navy);
  color: #ffffff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-actions a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--yellow);
}

.contact-actions a span {
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--yellow);
  font-weight: 700;
  margin-bottom: 8px;
}

.contact-actions a strong {
  font-family: var(--font-heading);
  font-size: 21px;
  color: #ffffff;
  margin-bottom: 12px;
  word-break: break-all;
}

.contact-actions a small {
  font-size: 13px;
  color: #bcd0e1;
  font-weight: 600;
}

.contact-actions a.contact-whatsapp {
  background: #128C7E;
}

.contact-actions a.contact-whatsapp:hover {
  background: #075E54;
}

.contact-actions a.contact-whatsapp span {
  color: #ffffff;
}

.contact-details {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-details article {
  background: var(--white);
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.contact-details article h2 {
  font-size: 28px;
  margin-bottom: 14px;
  color: var(--navy);
}

.contact-details article p {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 24px;
}

.contact-details article h3 {
  font-size: 18px;
  margin-bottom: 14px;
  color: var(--blue);
}

.contact-details article ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-details article li {
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-details article li::before {
  content: '✓';
  color: var(--teal);
  font-weight: 800;
}

.contact-details aside {
  background: var(--bg-light);
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.contact-details aside h2 {
  font-size: 22px;
  margin-bottom: 16px;
  color: var(--navy);
}

.contact-details aside p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
}

.contact-details aside p strong {
  color: var(--navy);
}

/* Subpage Benefits Dark Blue Section */
.subpage-benefits-dark {
  padding: 85px var(--side);
  background: var(--navy);
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
}

.subpage-benefits-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.subpage-benefits-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.subpage-benefits-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* Diese allgemeinere Medienregel kommt im Stylesheet später. Auf den
   Bezirksseiten darf sie die mobile Vollbild-Regel nicht wieder überschreiben. */
@media (max-width: 768px) {
  .subpage-benefits-media.district-hero-visual img {
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}

.subpage-benefits-content h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  color: #ffffff;
  margin-bottom: 18px;
}

.subpage-benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  color: #dbe9f5;
}

.subpage-benefits-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.subpage-benefits-list li::before {
  content: '✓';
  color: var(--yellow);
  font-weight: 800;
}

.subpage-price-box {
  margin-top: 24px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  border-left: 4px solid var(--yellow);
  font-weight: 700;
  color: #ffffff;
}

.subpage-price-box span {
  color: var(--yellow);
  font-size: 20px;
  font-family: var(--font-heading);
}

@media (max-width: 1024px) {
  .subpage-benefits-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Legal-Layout Base */
.legal-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  width: min(var(--max), calc(100% - 48px));
  margin: 60px auto 0;
  align-items: start;
}

.legal-layout aside {
  background: var(--bg-light);
  padding: 32px;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.legal-content h2 {
  font-size: 24px;
  margin: 32px 0 12px;
  color: var(--navy);
}

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

.legal-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .contact-actions {
    grid-template-columns: 1fr;
  }
  .contact-details {
    grid-template-columns: 1fr;
  }
  .legal-layout {
    grid-template-columns: 1fr;
  }
}
.final-cta {
  padding: 80px var(--side);
  background: var(--yellow);
  color: var(--navy);
}

.final-cta-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.final-cta-copy span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
}

.final-cta-copy h2 {
  font-size: clamp(32px, 3.8vw, 48px);
  margin: 10px 0;
  color: var(--navy);
}

.final-cta-copy p {
  font-size: 17px;
  color: rgba(7, 27, 51, 0.85);
  margin: 0;
}

.final-cta-phone {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--navy);
  border-bottom: 3px solid var(--navy);
  padding-bottom: 4px;
  white-space: nowrap;
}

.final-cta-phone:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  padding: 80px var(--side) 36px;
  background: var(--navy-dark);
  color: #b8c8d7;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.2fr;
  gap: 60px;
}

.footer-brand img {
  height: 70px;
  width: auto;
  margin-bottom: 20px;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 12px;
  object-fit: contain;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 380px;
}

.footer-col h3 {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 18px;
}

.footer-col a {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #b8c8d7;
}

.footer-col a:hover {
  color: var(--yellow);
}

.footer-contact-info p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.footer-contact-info a {
  overflow-wrap: anywhere;
}

.footer-contact-info .footer-whatsapp {
  color: var(--yellow);
  font-weight: 700;
}

.footer-bottom {
  max-width: var(--max);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.footer-bottom a {
  color: #b8c8d7;
  text-decoration: underline;
}

/* ==========================================================================
   MOBILE STICKY CALL BAR
   ========================================================================== */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--yellow);
  color: var(--navy);
  padding: 10px 14px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-weight: 800;
  font-size: 16px;
}

.mobile-sticky-bar a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  color: var(--navy);
  font-size: inherit;
  line-height: 1.1;
}

.mobile-call-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: #d42d82;
  font-size: 20px;
  line-height: 1;
}

.mobile-call-label {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
}

.mobile-sticky-bar a strong {
  grid-column: 2;
  grid-row: 2;
  display: block;
  color: var(--navy);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1;
  white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-copy {
    padding: 40px 0 20px;
  }
  .hero-visual {
    height: 480px;
  }
  .availability-bar {
    position: relative;
    bottom: 0;
    left: 0;
    margin-top: -50px;
  }
  .section-grid-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .process-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .process-steps {
    grid-template-columns: 1fr;
  }
  .process-step {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding: 20px 0 0;
  }
  .showcase-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 68px;
  }
  .header-inner {
    height: 82px;
  }
  .brand-logo img {
    height: 64px;
  }
  .main-nav {
    display: none;
  }
  .menu-toggle {
    display: block;
    margin-left: auto;
  }
  .header-call-btn {
    display: none;
  }
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
  .trust-item {
    border-right: none;
    border-bottom: 1px solid var(--line-dark);
    padding: 16px 0;
  }
  .showcase-grid {
    grid-template-columns: 1fr;
  }
  .availability-bar {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
  .avail-item {
    border-right: none;
    border-bottom: 1px solid var(--line-dark);
  }
  .final-cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  .mobile-sticky-bar {
    display: block;
  }
  .district-section { padding: 72px 0; }
  .district-header { margin-bottom: 28px; }
  .district-grid { display: none; }
  .district-section.is-open .district-grid {
    display: grid;
    margin-top: 12px;
  }
  .district-hub-close {
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--blue);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }
  .district-section.is-open .district-hub-close { display: block; }
  .district-section.is-open .district-hub-cta { display: none; }
  .district-hub-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--navy);
    box-shadow: var(--shadow-md);
    color: #fff;
    font-weight: 800;
  }
  .district-hub-cta span { color: var(--yellow); font-size: 20px; }

  /* Das mobile Menü erhält einen eigenen, gut lesbaren Navigations-Layer. */
  .site-header .main-nav.is-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 120;
    padding: 12px 24px 18px !important;
    background: var(--navy) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 16px 28px rgba(7,27,51,.26) !important;
  }

  .site-header .main-nav.is-open a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
    color: #fff;
  }

  .site-header .main-nav.is-open a:last-child { border-bottom: 0; }
  .site-header .main-nav.is-open a::after { background: var(--yellow); }
}

@media (max-width: 480px) {
  .hero-visual {
    height: auto;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
  }
  .hero-actions .btn {
    width: 100%;
  }
}

/* Detailseiten auf dem Handy: Der gemeinsame Inhalts-Wrapper darf nicht von
   der Desktop-Ausrichtung als zweites Flex-Element behandelt werden. */
@media (max-width: 768px) {
  /* Der einspaltige Hero darf durch lange Überschriften oder Bilder nicht
     breiter als den sichtbaren Handybereich werden. */
  body:has(.scope-detail-hero-inner) .scope-detail-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(.scope-detail-hero-inner) .scope-detail-hero-inner > * {
    min-width: 0;
    max-width: 100%;
  }

  body:has(.scope-detail-hero-inner) .scope-detail-hero h1 {
    overflow-wrap: anywhere;
  }

  body:has(.scope-detail-hero-inner) .scope-detail-content > .scope-detail-content-inner:last-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    padding: 0 !important;
  }

  body:has(.scope-detail-hero-inner) .scope-detail-content-inner > div {
    min-width: 0;
    padding-left: 0;
  }
}
/* Shared cinematic hero carousel. The page H1 remains static; the rotating title is a separate visual H2. */
.hero.cleaning-carousel,.subhero.cleaning-carousel,.scope-detail-hero.cleaning-carousel{isolation:isolate;position:relative;overflow:hidden;background:#09294c;color:#fff}.cleaning-carousel-stage{position:absolute;z-index:-2;inset:0;background:#09294c}.cleaning-carousel-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s ease}.cleaning-carousel-stage img.is-active{opacity:1}.cleaning-carousel-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,27,57,.68) 0%,rgba(4,27,57,.38) 45%,rgba(4,27,57,.06) 100%)}.cleaning-carousel .hero-inner,.cleaning-carousel .subhero-inner,.cleaning-carousel .scope-detail-hero-inner{position:relative;z-index:1}.cleaning-carousel .hero-visual,.cleaning-carousel .scope-detail-hero-inner>figure{opacity:0;pointer-events:none}.cleaning-carousel .hero-copy,.cleaning-carousel .subhero-inner>div:first-child,.cleaning-carousel .scope-detail-hero-inner>div:first-child{position:relative;z-index:2}.cleaning-carousel h1{max-width:16ch;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.22)}.cleaning-carousel .hero-lead,.cleaning-carousel .subhero-inner>div:first-child>p,.cleaning-carousel .scope-detail-hero-inner>div:first-child>p{color:#ecf5ff;text-shadow:0 1px 12px rgba(0,0,0,.25)}.cleaning-carousel .section-number,.cleaning-carousel .breadcrumb,.cleaning-carousel .breadcrumb a{color:#d9edff}.cleaning-carousel-copy{max-width:37rem;margin:1.15rem 0 1.35rem;transition:opacity .18s ease,transform .18s ease}.cleaning-carousel-copy.is-changing{opacity:.2;transform:translateY(5px)}.cleaning-carousel-eyebrow{display:block;margin-bottom:.25rem;color:#ffcb22;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.cleaning-carousel-heading{font-size:clamp(1.55rem,2.7vw,2.65rem);font-weight:800;line-height:1.05}.cleaning-carousel-copy p{margin:.45rem 0 0;color:#e8f3fc;font-size:1rem;line-height:1.5}.cleaning-carousel-dots{position:absolute;z-index:3;right:max(1.5rem,calc((100vw - 1240px)/2));bottom:1.7rem;display:flex;gap:.5rem}.cleaning-carousel-dots button{width:2.15rem;height:.3rem;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.42);cursor:pointer}.cleaning-carousel-dots button.is-active{background:#ffc21c}.subhero.cleaning-carousel{min-height:38rem;display:flex;align-items:center}.subhero.cleaning-carousel .subhero-inner{width:min(1240px,calc(100% - 48px));margin:auto;padding-top:5rem;padding-bottom:5rem}.scope-detail-hero.cleaning-carousel{min-height:38rem}.scope-detail-hero.cleaning-carousel .scope-detail-hero-inner{min-height:38rem;background:transparent}.scope-detail-hero.cleaning-carousel .scope-detail-hero-inner>div:first-child{max-width:44rem}.scope-detail-hero.cleaning-carousel .scope-detail-hero-inner>figure{display:none}.hero.cleaning-carousel .hero-inner{min-height:40rem}.hero.cleaning-carousel .hero-copy{max-width:43rem}.hero.cleaning-carousel .hero-badges{color:#e8f3fc}.hero.cleaning-carousel .hero-badges span{border-color:rgba(255,255,255,.34)}
.scope-detail-hero.cleaning-carousel > img{display:none}.scope-detail-hero.cleaning-carousel:not(:has(.scope-detail-hero-inner)){display:block;width:100%;max-width:none;margin:0;padding:0}.scope-detail-hero.cleaning-carousel:not(:has(.scope-detail-hero-inner))>div:not(.cleaning-carousel-stage):not(.cleaning-mobile-facts){position:relative;z-index:1;width:min(1240px,calc(100% - 48px));min-height:38rem;margin:auto;padding:8rem 0 6rem}.scope-detail-hero.cleaning-carousel:not(:has(.scope-detail-hero-inner))>div:not(.cleaning-carousel-stage):not(.cleaning-mobile-facts)>p{color:#ecf5ff;text-shadow:0 1px 12px rgba(0,0,0,.25)}
@media (max-width:760px){.hero.cleaning-carousel .hero-inner,.subhero.cleaning-carousel,.scope-detail-hero.cleaning-carousel,.scope-detail-hero.cleaning-carousel .scope-detail-hero-inner{min-height:39rem}.cleaning-carousel-overlay{background:linear-gradient(180deg,rgba(4,27,57,.88) 0%,rgba(4,27,57,.73) 58%,rgba(4,27,57,.42) 100%)}.subhero.cleaning-carousel .subhero-inner{width:calc(100% - 30px);padding-top:3.6rem;padding-bottom:4.9rem}.cleaning-carousel h1{max-width:100%;font-size:clamp(2.15rem,10vw,3.2rem)}.cleaning-carousel-copy{margin:1rem 0 1.1rem}.cleaning-carousel-heading{font-size:1.7rem}.cleaning-carousel-copy p{font-size:.95rem}.cleaning-carousel-dots{right:15px;bottom:1rem}.cleaning-carousel-dots button{width:1.65rem}.hero.cleaning-carousel .hero-visual{display:none}.hero.cleaning-carousel .hero-copy{padding-bottom:4.8rem}.scope-detail-hero.cleaning-carousel .scope-detail-hero-inner>div:first-child{padding-bottom:4.8rem}}
/* Keep the workers' faces in frame on wide carousel crops. */
.cleaning-carousel-stage img{object-position:center top}

/* Fixed H1 / rotating visual H2 separation, matching the locksmith pattern. */
.cleaning-carousel h1{max-width:42rem;margin:0 0 .8rem;color:#fff;font-size:clamp(.92rem,1.35vw,1.12rem);font-weight:800;line-height:1.25;letter-spacing:.075em;text-transform:uppercase}.cleaning-carousel-static-copy{display:none}.cleaning-carousel-copy{margin:.3rem 0 1.35rem}.cleaning-carousel-heading{font-size:clamp(2.5rem,5vw,4.75rem);line-height:1.01;letter-spacing:-.055em}.cleaning-carousel-copy p{margin:.65rem 0 0}@media (max-width:760px){.cleaning-carousel h1{font-size:.86rem}.cleaning-carousel-heading{font-size:clamp(2.15rem,10vw,3.2rem)}}

/* Desktop shows enough of each cleaning scene to keep the worker and task visible. */
@media (min-width:761px){.hero.cleaning-carousel .hero-inner{min-height:48rem}.subhero.cleaning-carousel,.scope-detail-hero.cleaning-carousel,.scope-detail-hero.cleaning-carousel .scope-detail-hero-inner{min-height:46rem}.cleaning-carousel-stage img{object-position:center 18%}}

/* Keep the carousel navigation clear of every image subject. */
.cleaning-carousel-dots{right:auto;left:50%;transform:translateX(-50%)}

/* District pages already have a static hero card. The carousel replaces it. */
.subhero.cleaning-carousel .district-hero-visual{display:none!important}

/* Mobile keeps the existing layout, but long rotating titles never leave the viewport. */
@media (max-width:760px){.cleaning-carousel-heading{max-width:100%;overflow-wrap:anywhere;word-break:normal}.cleaning-carousel-dots{right:auto;left:50%;bottom:1.1rem;transform:translateX(-50%)}}

/* Mobile: one calm reading order instead of squeezed side-by-side controls. */
@media (max-width:760px){.hero.cleaning-carousel .hero-inner{min-height:46rem;align-items:flex-start;padding-top:4.7rem}.hero.cleaning-carousel h1{margin-bottom:.55rem;font-size:.78rem;line-height:1.3}.hero.cleaning-carousel .hero-copy{margin:.2rem 0 1rem;padding-bottom:0}.hero.cleaning-carousel-heading{font-size:clamp(2.05rem,9vw,2.65rem);line-height:1.03}.cleaning-carousel-copy p{margin-top:.55rem;font-size:.94rem;line-height:1.48}.hero.cleaning-carousel .hero-actions{display:flex;flex-direction:column;gap:10px;margin:1.1rem 0 1rem}.hero.cleaning-carousel .hero-actions .btn{width:100%;min-height:54px;padding:12px 16px;justify-content:center;font-size:.9rem;line-height:1.2;text-align:center}.hero.cleaning-carousel .hero-badges{display:grid;grid-template-columns:1fr;gap:6px;font-size:.77rem;line-height:1.25;margin:0}.hero.cleaning-carousel .hero-badges span{align-items:center;gap:6px}.cleaning-carousel-dots{bottom:1.2rem}}

/* Mobile carousel: mirror the compact, deliberate locksmith-page hierarchy. */
@media (max-width:760px){
  .site-header{background:var(--navy);border-bottom:2px solid var(--yellow)}
  .site-header .header-inner{background:var(--navy)}
  .site-header .menu-toggle{color:#fff}
  .hero.cleaning-carousel .hero-inner{min-height:42rem;padding-top:5.8rem;padding-bottom:4.4rem}
  .hero.cleaning-carousel .hero-copy{width:100%;max-width:none;margin:0;padding-bottom:0}
  .hero.cleaning-carousel h1{max-width:25rem;margin:0;font-size:.92rem;line-height:1.32}
  .hero.cleaning-carousel .hero-copy .cleaning-carousel-copy{max-width:100%;margin:1.45rem 0 0}
  .hero.cleaning-carousel h1,.hero.cleaning-carousel .cleaning-carousel-copy{transform:translateY(4rem)}
  .hero.cleaning-carousel .cleaning-carousel-eyebrow{display:none}
  .hero.cleaning-carousel .cleaning-carousel-heading{font-size:clamp(2.3rem,10vw,2.85rem);line-height:1.04}
  .hero.cleaning-carousel .cleaning-carousel-heading.is-long-title{font-size:clamp(1.6rem,7vw,1.95rem);letter-spacing:-.06em;line-height:1.08;white-space:nowrap}
  .hero.cleaning-carousel .cleaning-carousel-copy p{max-width:28rem;margin:.8rem 0 0;font-size:.98rem;line-height:1.55}
  .hero.cleaning-carousel .hero-actions{gap:10px;margin:10rem 0 .95rem}
  .hero.cleaning-carousel .hero-actions .btn{min-height:55px;border-radius:8px;font-size:.92rem}
  .hero.cleaning-carousel .hero-badges{display:none}
  .cleaning-mobile-facts{position:absolute;z-index:4;top:0;left:0;right:0;display:grid;grid-template-columns:1fr;min-height:48px;background:var(--navy);border-top:3px solid var(--yellow);color:#fff;box-shadow:0 2px 9px rgba(0,0,0,.12)}
  .cleaning-mobile-facts span{display:flex;flex-direction:column;justify-content:center;padding:5px 14px;line-height:1.08}
  .cleaning-mobile-facts span+span{border-left:1px solid rgba(255,255,255,.22)}
  .cleaning-mobile-facts small{font-size:.58rem;font-weight:800;letter-spacing:.03em}
  .cleaning-mobile-facts strong{margin-top:2px;font-size:.76rem}
  .cleaning-mobile-note{display:block;margin:.05rem 0 0;color:#f3f8ff;font-size:.72rem;font-weight:700;line-height:1.35}
  .hero.cleaning-carousel .cleaning-carousel-dots{bottom:1.15rem;gap:.45rem}
  .hero.cleaning-carousel .cleaning-carousel-dots button{width:1.6rem;height:.24rem}

  .trust-bar{padding:0;background:var(--navy);border-top:1px solid rgba(255,255,255,.16)}
  .trust-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0}
  .trust-item,.trust-item:last-child{min-height:108px;padding:18px 16px;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
  .trust-item:nth-child(2n){border-right:0}
  .trust-item:nth-last-child(-n+2){border-bottom:0}
  .trust-item strong{font-size:.95rem;line-height:1.2;margin-bottom:7px}
  .trust-item span{font-size:.76rem;line-height:1.38}
}

@media (min-width:761px){.cleaning-mobile-facts,.cleaning-mobile-note{display:none}}

/* Compact mobile header: keeps the contact information readable without taking over the hero. */
@media (max-width:760px){
  .status-bar-inner{width:calc(100% - 28px);min-height:34px;justify-content:center}
  .status-live{display:none}
  .status-call{font-size:.78rem}
  .header-inner{width:calc(100% - 28px);height:68px;gap:14px}
  .brand-logo img{height:54px}
  .header-wa-btn{width:42px;height:42px;border-radius:11px}
  .menu-toggle{padding:5px;font-size:24px}
  .cleaning-mobile-facts{min-height:42px;border-top-width:2px}
  .cleaning-mobile-facts span{padding:4px 12px}
  .cleaning-mobile-facts strong{font-size:.72rem}
}

/* Mobile Leistungs-Hero: Person mittig und lange Leistungsnamen ohne Worttrennung. */
@media (max-width:760px){
  /* Startseite darf im ersten Eindruck eine deutlichere Leistungsüberschrift
     zeigen. Die verlinkten Detailseiten bleiben bewusst kompakter, damit
     lange Namen nicht mit einzelnen Buchstaben umbrechen. */
  .landing-page .hero.cleaning-carousel .cleaning-carousel-heading{
    font-size:clamp(1.9rem,8.7vw,2.18rem);
    line-height:1.06;
  }
  body:not(.landing-page) .cleaning-carousel-heading{
    max-width:100%;
    font-size:clamp(1.34rem,5.9vw,1.58rem)!important;
    line-height:1.1;
    letter-spacing:-.035em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  /* Der mobile Kopf läuft immer vollflächig in Navy – auch bei Detailseiten
     mit eigenem Header-Template. So bleiben keinerlei weiße Seitenstreifen. */
  .site-header,
  body:has(.scope-detail-hero) > .site-header{
    width:100%;
    background:var(--navy)!important;
  }
  .site-header .header-inner{
    width:100%;
    padding:0 14px;
    box-sizing:border-box;
  }

  /* Startseite: Kontaktkopf deutlich kompakter, damit der Hero früher beginnt. */
  .status-bar-inner{min-height:23px}
  .status-call{font-size:.62rem;line-height:1}
  .header-inner{height:47px}
  .brand-logo img{height:43px}
  .header-wa-btn{width:32px;height:32px;border-radius:9px}
  .menu-toggle{padding:2px;font-size:19px}
  .cleaning-mobile-facts{min-height:28px}
  .cleaning-mobile-facts span{padding:2px 9px}
  .cleaning-mobile-facts small{font-size:.5rem;line-height:1}
  .cleaning-mobile-facts strong{margin-top:1px;font-size:.58rem;line-height:1.02}

  /* Startseite: die Reinigungskraft bleibt im sichtbaren Mittelpunkt. */
  .hero.cleaning-carousel .cleaning-carousel-stage img{object-position:75% top}
  .hero.cleaning-carousel .cleaning-carousel-heading{
    max-width:100%;
    font-size:clamp(1.5rem,6.8vw,1.85rem);
    line-height:1.1;
    letter-spacing:-.045em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    padding-right:4px;
    box-sizing:border-box;
  }
  .subhero.cleaning-carousel .cleaning-carousel-stage img{object-position:82% top}
  .subhero.cleaning-carousel .cleaning-carousel-heading{
    max-width:100%;
    font-size:clamp(1.5rem,6.8vw,1.85rem);
    line-height:1.1;
    letter-spacing:-.045em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    padding-right:4px;
    box-sizing:border-box;
  }
}