/* ==========================================================================
   Malereibetrieb GmbH – Demo-Website
   Mobile-first. Breakpoints: 375 (Basis) / 768 (md) / 1200 (lg)
   ========================================================================== */

/* --- Fonts (self-hosted, kein Google-CDN – DSGVO/AT-Praxis) ---------------
   Inter & Manrope stehen unter der SIL Open Font License 1.1 (siehe
   assets/fonts/OFL.txt). Beide Dateien sind variable Fonts: ein File deckt
   den gesamten Gewichtsbereich ab, deshalb dieselbe src pro Gewicht.        */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design-Tokens -------------------------------------------------------
   Petrol als Tonleiter statt als Einzelwert; die Neutralen mit leichtem
   Petrolstich, damit die hellen Sektionen gewollt wirken statt nach
   Default-Grau. Alle Textwerte sind auf WCAG-AA gegen ihren jeweiligen
   Hintergrund geprüft.                                                      */

:root {
  --petrol-900: #08303A;   /* Footer                                   */
  --petrol-800: #0B3E4B;   /* Chat-Header                              */
  --petrol:     #0F4C5C;   /* Primär: Hero, dunkle Sektionen           */
  --petrol-400: #3E8798;   /* Linien, Zustände                         */

  --on-petrol:        #FAFAF8;
  --on-petrol-body:   #C9DBE1;  /* 6,3:1 auf --petrol   */
  --on-petrol-muted:  #A7C6D0;  /* 5,2:1 auf --petrol   */
  --on-petrol-faint:  #86AAB6;  /* 4,6:1 auf --petrol-900 – nur Kleintext */

  --yellow:      #FFC845;   /* Akzent – nie Textfarbe auf Hell         */
  --yellow-deep: #F0B72F;   /* Hover                                   */

  --ink:       #2B2D31;   /* Fließtext auf Hell                        */
  --ink-2:     #4A4D53;   /* Sekundärtext        – 8,0:1 auf Off-White */
  --ink-3:     #5F6268;   /* Labels, Captions    – 4,9:1 auf Surface   */

  --offwhite: #FAFAF8;
  --surface:  #ECEFEF;   /* Karten, Chat-Bubbles                       */
  --border:   #DCE2E2;

  --wrap: 1200px;
  --gutter: 20px;
  --radius: 10px;

  --pad-y: 56px;          /* Sektions-Padding mobil                    */
  --dur: .55s;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --pad-y: 88px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 40px; --pad-y: 120px; }
}

/* --- Reset / Basis ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky-Nav-Höhe, damit Anker nicht darunter verschwinden */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 768px) { body { font-size: 17px; } }

h1, h2, h3 {
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
/* figure trägt im UA-Stylesheet margin: 1em 40px – das schrumpft sonst
   jede Bildkachel um 80px Breite. */
figure, blockquote, dl, dd { margin: 0; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--petrol); text-decoration: none; }
a:hover { color: var(--petrol-900); }

/* Sichtbarer Keyboard-Focus überall – auch auf Petrol lesbar */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--pad-y); }
/* Zwei aufeinanderfolgende Off-White-Sektionen (Leistungen → Farbwelten)
   sollen als ein Fluss wirken – sonst addieren sich beide Paddings zu einer
   großen leeren Fläche. Die Folgesektion bringt den Abstand allein mit. */
.section--flush-bottom { padding-bottom: 0; }
.section--petrol { background: var(--petrol); color: var(--on-petrol); }
.section--surface { background: var(--surface); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; color: var(--ink); }

.u-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.section--petrol .u-label { color: var(--on-petrol-muted); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Logo (Wortmarke + Pinselstrich) ------------------------------------
   Drei Varianten über Modifier: dunkel-auf-hell (Default), hell-auf-dunkel
   (.logo--light) und Nur-Strich (favicon.svg, separate Datei).             */

.logo {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.logo__word {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
/* Strich beginnt auf Höhe des "l" und unterstreicht ~64% der Wortbreite */
.logo__stroke {
  width: 64%;
  height: 7px;
  margin-left: 13%;
  display: block;
  fill: var(--yellow);
}
.logo--light .logo__word { color: var(--on-petrol); }
.logo--lg .logo__word { font-size: 25px; }
.logo--lg .logo__stroke { height: 8px; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
  /* Touch-Target nie unter 44px */
  min-height: 44px;
}
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--yellow);
  color: var(--ink);
  font-size: 16px;
  padding: 12px 24px;
}
.btn--primary:hover {
  background: var(--yellow-deep);
  color: var(--ink);
  transform: translateY(-2px);
}

/* Größter Button der Seite (Hero) */
.btn--hero { font-size: 18px; padding: 17px 34px; }

.btn--ghost {
  background: transparent;
  border-color: var(--on-petrol);
  color: var(--on-petrol);
  font-size: 18px;
  padding: 15px 32px;
}
.btn--ghost:hover {
  background: rgba(250, 250, 248, .12);
  color: var(--on-petrol);
  transform: translateY(-2px);
}

.btn--outline {
  background: var(--offwhite);
  border-color: var(--petrol);
  color: var(--petrol);
  font-size: 16px;
  padding: 12px 22px;
}
.btn--outline:hover { background: #E3EAEC; color: var(--petrol); }

/* --- Sticky Nav ---------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--offwhite);
  transition: box-shadow .25s ease;
}
/* Schatten erst nach Scroll-Start */
.nav.is-scrolled { box-shadow: 0 2px 16px rgba(43, 45, 49, .10); }

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav__links { display: none; }

.nav__right { display: flex; align-items: center; gap: 10px; }

.nav__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav__menu {
  display: none;
  flex-direction: column;
  background: var(--offwhite);
  border-top: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(43, 45, 49, .08);
  padding: 4px var(--gutter) 16px;
}
.nav__menu.is-open { display: flex; }
.nav__menu a {
  padding: 15px 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.nav__menu a:last-child { border-bottom: none; }

@media (min-width: 900px) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 32px);
  }
  .nav__links a { font-size: 15px; font-weight: 500; color: var(--ink); }
  .nav__links a:hover { color: var(--petrol); }
  .nav__burger { display: none; }
  .nav__menu { display: none !important; }
}

/* --- 1 Hero -------------------------------------------------------------- */

.hero {
  background: var(--petrol);
  color: var(--on-petrol);
  padding-block: clamp(104px, 22vw, 190px) clamp(56px, 11vw, 130px);
}
.hero__eyebrow { color: var(--on-petrol-muted); margin-bottom: 18px; }

.hero__title {
  font-weight: 800;
  font-size: clamp(36px, 8.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--on-petrol);
  max-width: 16ch;
}
/* Pinselstrich unter dem Schlüsselwort – gleiche Familie wie im Logo */
.hero__mark { display: inline-block; position: relative; }
.hero__mark svg {
  position: absolute;
  left: 6%;
  bottom: -0.14em;
  width: 68%;
  height: 0.15em;
  fill: var(--yellow);
}

.hero__sub {
  margin-top: 22px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--on-petrol-body);
  max-width: 46ch;
}
.hero__cta {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* Auf Mobile liegen die Aktionen in der Bottom-Bar (siehe Wireframe) */
@media (max-width: 767px) { .hero__cta { display: none; } }

/* --- 2 Betrieb in Zahlen ------------------------------------------------- */

.stats {
  background: var(--offwhite);
  padding-block: clamp(40px, 6vw, 64px);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 20px;
}
@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}
.stat { border-left: 3px solid var(--yellow); padding-left: 16px; }
.stat__num {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1;
  color: var(--petrol);
  letter-spacing: -0.03em;
}
.stat__label {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}

/* --- Sektionstitel + Scroll-Reveal-Pinselstrich -------------------------- */

.head { display: inline-flex; flex-direction: column; gap: 8px; }
.head h2 {
  font-weight: 700;
  font-size: clamp(28px, 5.2vw, 44px);
  color: var(--ink);
}
.section--petrol .head h2 { color: var(--on-petrol); }
.head__stroke {
  width: 65%;
  height: 10px;
  margin-left: 10%;
  display: block;
  fill: var(--yellow);
  transform-origin: left center;
}
.section__intro {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}
.section--petrol .section__intro { color: var(--on-petrol-body); }

/* Reveal: Wipe (einmalig, per IntersectionObserver ausgelöst).
   Versteckt wird ausschließlich über .reveal-armed – die Klasse setzt das JS
   erst unmittelbar vor dem Beobachten. Fällt das Skript vorher aus, bleibt
   der Titel sichtbar statt dauerhaft unsichtbar. */
.head.reveal-armed .head__stroke { transform: scaleX(0); }
.head.reveal-armed.is-in .head__stroke { animation: strokeWipe var(--dur) cubic-bezier(.22,.61,.36,1) forwards; }
.head.reveal-armed.is-in h2 { animation: titleFade var(--dur) ease-out both; }

@keyframes strokeWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes titleFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

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

.services {
  margin-top: 32px;
  display: grid;
  gap: 12px;
}
@media (min-width: 768px) {
  .services {
    margin-top: 44px;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1200px) {
  .services { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.service {
  background: var(--surface);
  border: 2px solid var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  transition: border-color .2s ease;
}
.service:hover { border-color: var(--petrol); }
.service h3 {
  font-weight: 600;
  font-size: 17px;
  color: var(--petrol);
}
.service p {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (min-width: 768px) {
  .service { padding: 28px 26px; }
  .service h3 { font-size: 20px; }
  .service p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
}

.services__foot {
  margin-top: 36px;
  font-size: 17px;
  color: var(--ink-2);
}
.link-underline {
  font-weight: 600;
  color: var(--petrol);
  border-bottom: 2px solid var(--yellow);
}
.link-underline:hover { color: var(--petrol-900); }

/* --- Bildslots ----------------------------------------------------------- */

.shot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot__cap {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Fallback, solange ein Bild fehlt: gestaltete Fläche statt grauem Kästchen.
   Wird sichtbar, wenn <img> nicht lädt (JS setzt .is-missing).            */
.shot.is-missing::after {
  content: attr(data-fallback);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 16px;
  background:
    linear-gradient(135deg, var(--petrol) 0%, var(--petrol-900) 100%);
  color: var(--on-petrol-muted);
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: .02em;
}
.shot.is-missing img { display: none; }

/* --- 4 Farbwelten -------------------------------------------------------- */

.farb { background: var(--offwhite); padding-block: var(--pad-y); }
.farb__strip {
  margin: 36px 0 0;
  padding: 0 var(--gutter);
  list-style: none;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.farb__strip::-webkit-scrollbar { display: none; }
/* Beschriftung sitzt unter der Farbfläche, nicht darauf. Zwei Gründe:
   die Swatch-Hexwerte bleiben exakt wie vorgegeben, und mittelhelle Töne
   wie Taubenblau (#7C93A3) erreichen als Textgrund weder mit hellem noch
   mit dunklem Text WCAG AA (3,06:1 bzw. 4,17:1). Unten auf Off-White
   liegt der Text bei über 12:1 – und es liest sich wie eine Farbfächer-
   Karte statt wie Text, der auf der Wandfarbe klebt. */
.farb__item {
  flex: 0 0 68%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.farb__chip {
  height: clamp(132px, 17vw, 180px);
  border-radius: 6px 6px 0 0;
}
.farb__cap { padding: 14px 16px 4px 2px; }

@media (min-width: 768px) {
  .farb__strip {
    overflow: visible;
    max-width: var(--wrap);
    margin-inline: auto;
  }
  .farb__item { flex: 1 1 0; }
  .farb__cap { padding: 14px 2px 0; }
}

.farb__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
/* Zwei Zeilen reserviert, damit die Hexwerte über alle fünf Karten auf
   einer Linie sitzen, auch wenn nur eine Stimmungszeile umbricht. */
.farb__mood {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
  min-height: 2.9em;
}
.farb__hex {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* --- 5 Ablauf + Chatbot -------------------------------------------------- */

.ablauf__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 900px) {
  .ablauf__grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); }
}

.steps { margin-top: 32px; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 18px; }
.step__rail { display: flex; flex-direction: column; align-items: center; }
.step__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--yellow);
  background: transparent;
  color: var(--yellow);
  display: grid;
  place-items: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.step:first-child .step__dot { background: var(--yellow); color: var(--ink); }
.step__line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: rgba(250, 250, 248, .22);
  margin-block: 6px;
}
.step__body { padding-bottom: 26px; }
.step h3 {
  margin-top: 7px;
  font-weight: 600;
  font-size: 18px;
  color: var(--on-petrol);
}
.step p {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-petrol-body);
}

/* Chat-Panel */
.chatcol__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--on-petrol-muted);
}
/* Auf Mobile öffnet der Chat als Vollbild-Overlay über die Bottom-Bar */
@media (max-width: 899px) { .chatcol { display: none; } }

.chat {
  background: var(--offwhite);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .26);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat__head {
  background: var(--petrol-800);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px solid var(--yellow);
  flex-shrink: 0;
}
.chat__id { display: flex; align-items: center; gap: 11px; }
.chat__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yellow);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chat__avatar svg { width: 20px; height: 20px; fill: var(--ink); }
.chat__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--on-petrol);
}
.chat__status {
  font-size: 12px;
  color: var(--on-petrol-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5FBF86;
  flex-shrink: 0;
}
.chat__close {
  background: none; border: none;
  color: var(--on-petrol);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  width: 44px; height: 44px;
  display: none;
  place-items: center;
  flex-shrink: 0;
}

.chat__log {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 296px;   /* feste Mindesthöhe: kein Sprung, wenn Nachrichten dazukommen */
  max-height: 42vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Nachrichten von unten stapeln wie in einem echten Chat. Ein flexibler
   Spacer statt justify-content:flex-end – der kollabiert, sobald der
   Verlauf länger wird, und lässt das Scrollen intakt. */
.chat__log::before { content: ''; flex: 1 0 auto; }
.chat__log--overlay { flex: 1; max-height: none; min-height: 0; }

.bubble {
  padding: 11px 15px;
  border-radius: 12px 12px 12px 4px;
  max-width: 88%;
  font-size: 14.5px;
  line-height: 1.55;
  background: var(--surface);
  color: var(--ink);
  align-self: flex-start;
  animation: bubbleIn .22s ease-out both;
}
.bubble--user {
  align-self: flex-end;
  background: var(--petrol);
  color: var(--on-petrol);
  border-radius: 12px 12px 4px 12px;
}
.bubble--summary {
  background: #FFF6E0;
  border: 1px solid #F2DFAE;
  max-width: 100%;
  font-size: 14px;
}
.bubble--summary dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.bubble--summary dt { font-weight: 600; color: var(--ink-2); }
.bubble--summary dd { margin: 0; }

@keyframes bubbleIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.typing { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9AA0A6;
  animation: typing 1.2s infinite ease-in-out both;
}
.typing span:nth-child(2) { animation-delay: .16s; }
.typing span:nth-child(3) { animation-delay: .32s; }
@keyframes typing {
  0%, 80%, 100% { transform: scale(.7); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}

.chat__opts {
  padding: 0 18px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.chat__opt {
  background: var(--offwhite);
  border: 1.5px solid var(--petrol);
  color: var(--petrol);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  min-height: 40px;
}
.chat__opt:hover { background: var(--petrol); color: var(--on-petrol); }
.chat__opt--go {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  font-weight: 700;
}
.chat__opt--go:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); color: var(--ink); }

.chat__form {
  padding: 0 18px 18px;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.chat__input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #C4C8CB;
  border-radius: 6px;
  padding: 11px 13px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;      /* verhindert iOS-Zoom beim Fokus */
  color: var(--ink);
  background: var(--offwhite);
}
.chat__input:focus { border-color: var(--petrol); }
.chat__send {
  background: var(--petrol);
  border: none;
  color: var(--on-petrol);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding-inline: 16px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}
.chat__send:hover { background: var(--petrol-900); }

/* Chat als Vollbild-Overlay (mobil) */
.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--offwhite);
  display: flex;
  flex-direction: column;
}
.chat-overlay[hidden] { display: none; }
.chat-overlay .chat {
  border-radius: 0;
  box-shadow: none;
  flex: 1;
  min-height: 0;
}
.chat-overlay .chat__close { display: grid; }
.chat-overlay .chat__form { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* --- 6 Team -------------------------------------------------------------- */

/* Modestes zentriertes Foto, kein breiter Banner */
.team__shot {
  margin: 32px auto 0;
  max-width: 420px;
  aspect-ratio: 4 / 3;
}

.team__grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .team__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.member { border-top: 3px solid var(--petrol); padding-top: 20px; }
.member h3 { font-weight: 700; font-size: 18px; color: var(--ink); }
.member__role {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--petrol);
}
.member p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* --- 7 Bewertungen ------------------------------------------------------- */

.rating {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--ink-3);
}
.rating__score {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

/* Sterne als Grafik – Farbe erfüllt AA nicht als Text, deshalb aria-hidden
   und die Wertung zusätzlich als Text für Screenreader.                    */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; }
.stars .on { fill: #E8A400; }
.stars .off { fill: #C9CDCE; }

.reviews {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 600px) { .reviews { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.review {
  background: var(--offwhite);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 2px 8px rgba(43, 45, 49, .05);
}
.review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.review__time { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.review p { margin-top: 13px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.review__who { margin-top: 13px; font-weight: 600; font-size: 14px; color: var(--ink); }

/* --- 8 Einzugsgebiet ----------------------------------------------------- */

.area__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 900px) {
  .area__grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); }
}
.area__mapwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 330px;          /* der 30-km-Ring ist 294px hoch und muss reinpassen */
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(43, 45, 49, .12);
}
.area__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Nicht interaktiv – siehe Kommentar in der index.html */
  pointer-events: none;
}
.area__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 294px;
  height: 294px;
  border-radius: 50%;
  border: 3px solid var(--yellow);
  background: rgba(15, 76, 92, .16);
  pointer-events: none;
}
.area__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--petrol);
  color: var(--on-petrol);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 999px;
  pointer-events: none;
}

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

.footer {
  background: var(--petrol-900);
  color: var(--on-petrol-body);
  padding-block: clamp(48px, 8vw, 88px) 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
}
.footer__contact {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.9;
}
.footer__contact a { color: var(--on-petrol); font-weight: 500; }
.footer__contact a:hover { color: var(--yellow); }

.footer details {
  border-bottom: 1px solid rgba(250, 250, 248, .16);
}
.footer summary {
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--on-petrol);
  padding: 14px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.footer summary::-webkit-details-marker { display: none; }
.footer summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--on-petrol-muted);
  border-bottom: 2px solid var(--on-petrol-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.footer details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.footer details p,
.footer details dl {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--on-petrol-muted);
}
.footer details p + p { margin-top: 10px; }
.footer details strong { color: var(--on-petrol-body); font-weight: 600; }
/* Links erben sonst das Petrol-Blau und stehen damit fast unsichtbar
   auf dem dunklen Footer (1,48:1). */
.footer details a {
  color: var(--on-petrol);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer details a:hover { color: var(--yellow); }

.footer__legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(250, 250, 248, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: baseline;
}
.footer__demo { font-size: 12.5px; color: var(--on-petrol-faint); }

/* --- Kontakt-Popover ----------------------------------------------------- */

.cpop {
  position: fixed;
  z-index: 200;
  top: 0; left: 0;            /* echte Position setzt das JS */
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(43, 45, 49, .22);
  padding: 18px 20px 16px;
  animation: cpopIn .16s ease-out;
}
.cpop[hidden] { display: none; }

@keyframes cpopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.cpop__close {
  position: absolute;
  top: 2px; right: 2px;
  width: 44px; height: 44px;   /* auf Touch die Hauptbedienung zum Schließen */
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.cpop__close:hover { color: var(--ink); background: var(--surface); }

.cpop__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.cpop__tel,
.cpop__mail {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--petrol);
  border-radius: 6px;
  margin-inline: -8px;
  padding: 8px;
  min-height: 44px;
}
.cpop__tel { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 19px; }
.cpop__mail { font-size: 14.5px; word-break: break-all; }
.cpop__tel:hover,
.cpop__mail:hover { background: var(--surface); color: var(--petrol-900); }
.cpop__tel svg { width: 18px; height: 18px; flex-shrink: 0; }
.cpop__mail svg { width: 16px; height: 16px; flex-shrink: 0; }

.cpop__meta {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* --- Bottom-Bar (mobil) -------------------------------------------------- */

.bottombar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--offwhite);
  box-shadow: 0 -4px 16px rgba(43, 45, 49, .12);
}
.bottombar .btn { flex: 1; font-size: 15.5px; }
.bottombar svg { width: 17px; height: 17px; flex-shrink: 0; }
.bottomspacer { height: 74px; }

@media (min-width: 900px) {
  .bottombar, .bottomspacer { display: none; }
}

/* --- Reduced Motion ------------------------------------------------------
   Wipe → einfaches Fade; alles Übrige steht still.                        */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Wipe → einfaches Fade */
  .head.reveal-armed .head__stroke { transform: scaleX(1); }
  .head.reveal-armed.is-in h2 { animation: none; }
  .head.reveal-armed { opacity: 0; transition: opacity .3s linear !important; }
  .head.reveal-armed.is-in { opacity: 1; }
  .btn:hover { transform: none; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .nav, .bottombar, .bottomspacer, .chatcol, .chat-overlay { display: none !important; }
  body { background: #fff; color: #000; }
}