:root{
  --warm-white:#F5F1EA;
  --sand:#E5DBCB;
  --oak:#C9A876;
  --terracotta:#C97C5D;
  --clay:#C2A98F;
  --sage:#8CA39F;
  --stone-blue:#9BB0B5;
  --charcoal:#4A4844;
  --off-black:#26241F;
  --font-head:'Zen Kaku Gothic New',sans-serif;
  --font-body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--font-body);background:var(--warm-white);color:var(--charcoal);line-height:1.55;font-size:16px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--off-black);line-height:1.14}
a{color:inherit}
img{max-width:100%}

/* ===== Wortmarke (3-zeilig, farbcodiert) ===== */
.wordmark{font-family:var(--font-head);font-weight:900;line-height:.95;letter-spacing:.34em;text-transform:uppercase;display:inline-block;text-align:left}
.wordmark .l1{color:var(--off-black);display:block}
.wordmark .l2{color:var(--terracotta);display:block}
.wordmark .l3{color:var(--sage);display:block}

/* ===== Entwurfs-Hinweis ===== */
.draft-ribbon{background:var(--off-black);color:var(--sand);text-align:center;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px}

/* ===== Navigation ===== */
header{position:sticky;top:0;background:rgba(245,241,234,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--sand);z-index:100}
.nav{max-width:1228px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:10px}
.nav .wordmark{font-size:.8rem}
.nav nav{display:flex;gap:14px;flex-wrap:wrap}
.nav nav a{text-decoration:none;font-size:.9rem;font-weight:500;color:var(--charcoal)}
.nav nav a:hover{color:var(--terracotta)}
.nav .cta-notfall{background:var(--terracotta);color:var(--warm-white);padding:9px 14px;border-radius:6px;text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:.9rem;white-space:nowrap}
.nav .cta-notfall:hover{background:var(--off-black);color:var(--warm-white)}
.nav .nav-tel{text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--off-black);white-space:nowrap;margin-left:auto}
.nav .nav-tel:hover{color:var(--terracotta)}
/* Termin-CTA (Georg, 30.08.2026): Outline-Button, off-black, keine Fuellung -- steht zwischen
   nav-tel und dem gefuellten cta-notfall, damit Terracotta die einzige gefuellte Farbe im Header
   bleibt. Gleiche Hoehe/Typo wie .cta-notfall, bewusst ohne dessen Hintergrundfarbe. */
.nav .cta-termin{border:1.5px solid var(--off-black);color:var(--off-black);padding:9px 14px;border-radius:6px;text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:.9rem;white-space:nowrap}
.nav .cta-termin:hover{background:var(--off-black);color:var(--warm-white)}
.tel-fixed{display:none}
/* CI-Review-Fix B1 (PR #516): .cta-termin liess die Kopfzeile bei 1440/1280px zweizeilig
   umbrechen (Master war einzeilig) -- .nav-tel und .cta-termin blenden hier gemeinsam VOR dem
   bestehenden 900px-Umbruch aus.
   CI-Review N1, KORRIGIERT (Runde 4, 30.08.2026): die urspruengliche Fassung liess den
   tel-fixed-Balken trotzdem erst ab 900px einblenden -- im Band 901-1150px war die
   Telefonnummer dadurch NIRGENDS sichtbar (weder Kopfzeile noch Balken), obwohl genau dieser
   Fix sie "erreichbar" halten sollte. tel-fixed/padding-bottom laufen jetzt auf demselben
   1150px-Umbruch wie das Ausblenden von .nav-tel/.cta-termin -- keine Luecke mehr zwischen
   den beiden Breakpoints. Die reine Menue-Kollabierung (.nav nav) bleibt bei 900px, das ist
   ein eigenstaendiger Umbruch (Platz fuer die Nav-Links), keiner fuer die Telefonnummer. */
@media(max-width:1150px){.nav .nav-tel,.nav .cta-termin{display:none}body{padding-bottom:52px}.tel-fixed{display:flex;align-items:center;justify-content:center;position:fixed;left:0;right:0;bottom:0;height:52px;z-index:99;background:var(--off-black);color:var(--warm-white);text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:1rem;border-top:1px solid var(--charcoal)}}
@media(max-width:900px){.nav nav{display:none}}

/* ===== Hero: Heat/Chill-Dualität ===== */
.hero{max-width:1228px;margin:0 auto;padding:32px 24px 26px;display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
.hero-heat,.hero-chill{padding:20px 30px 22px;display:flex;flex-direction:column;justify-content:space-between;min-height:150px;gap:12px}
.hero-heat{background:linear-gradient(90deg,#EFE0C6 0%,#E9DDCA 45%,var(--sand) 100%);border-radius:12px 0 0 12px}
.hero-chill{background:linear-gradient(90deg,var(--sand) 0%,#E1E1D9 55%,#D5DDD8 100%);border-radius:0 12px 12px 0;text-align:right;align-items:flex-end}
.hero-divider{width:1px;background:linear-gradient(180deg,transparent 0%,var(--oak) 22%,var(--oak) 78%,transparent 100%)}
.hero-side-label{font-family:var(--font-head);font-weight:900;font-size:1rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:0}
.hero-heat .hero-side-label{color:var(--terracotta)}
.hero-chill .hero-side-label{color:var(--sage)}
.hero svg{margin:0;display:block}
.hero-chill svg{margin-left:auto}
.hero-side-text{font-size:.95rem;max-width:44ch;margin:0}
.hero-center{grid-column:1/-1;text-align:center;padding:8px 16px 0}
.hero-center h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;letter-spacing:-.01em}
.hero-center h1 .accent{color:var(--terracotta)}
.hero-center p.sub{max-width:70ch;margin:13px auto 0;font-size:1.05rem}
.hero-ctas{margin:20px 0 24px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 28px;border-radius:6px;text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:1rem}
.btn-primary{background:var(--terracotta);color:var(--warm-white)}
.btn-primary:hover{background:var(--off-black)}
.btn-ghost{border:1.5px solid var(--off-black);color:var(--off-black)}
.btn-ghost:hover{background:var(--off-black);color:var(--warm-white)}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:44px}.hero-divider{display:none}.hero-heat{border-radius:12px 12px 0 0}.hero-chill{border-radius:0 0 12px 12px;text-align:left;align-items:flex-start}.hero-chill svg{margin-left:0}}

/* ===== Abschnitte ===== */
section{padding:28px 24px}
.wrap{max-width:1180px;margin:0 auto}
.eyebrow{font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;display:block;margin-bottom:9px}
.eyebrow.heat{color:var(--terracotta)}
.eyebrow.chill{color:var(--sage)}
section h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:900;margin-bottom:12px;max-width:34ch}
section p.lead{max-width:64ch;font-size:1.05rem}

/* Leistungen */
.leistungen{background:var(--sand)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:14px;margin-top:22px}
.card{background:var(--warm-white);border:1px solid var(--sand);border-radius:10px;padding:20px 18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;transition:border-color .15s}
.card:hover{border-color:var(--terracotta)}
.card.chill:hover{border-color:var(--sage)}
.card h3{font-size:1.1rem;font-weight:700}
.card p{font-size:.9rem}
.card .tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--oak)}
.card .more{margin-top:auto;font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--terracotta)}
.card.chill .more{color:var(--sage)}

/* Schutzbrief */
.schutzbrief{background:var(--off-black);color:var(--sand)}
.schutzbrief h2{color:var(--warm-white)}
.schutzbrief .eyebrow{color:var(--terracotta)}
.sb-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.sb-punkte{list-style:none;margin-top:18px;display:grid;gap:12px}
.sb-punkte li{padding-left:26px;position:relative;font-size:.98rem}
.sb-punkte li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--terracotta)}
.sb-slot-box{background:#322f29;border:1px solid #5a5346;border-radius:10px;padding:24px 24px}
.sb-slot-box h3{color:var(--warm-white);font-size:1.2rem;margin-bottom:9px}
.sb-slot-box p{font-size:.95rem;margin-bottom:11px}
.sb-slot-box .btn-primary{margin-top:8px}
@media(max-width:820px){.sb-grid{grid-template-columns:1fr}}

/* Partner */
.partner .partner-box{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--warm-white);border:1px solid var(--sand);border-radius:10px;padding:30px 32px}
.partner-badge{font-family:var(--font-head);font-weight:900;font-size:1.5rem;color:var(--off-black);border:2px solid var(--off-black);border-radius:8px;padding:14px 22px;white-space:nowrap}
.partner-box p{font-size:.98rem}
.partner-live{display:inline-block;background:var(--sage);color:var(--warm-white);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-radius:4px;padding:3px 10px;margin-bottom:8px}
@media(max-width:680px){.partner .partner-box{grid-template-columns:1fr}}

/* Vision */
.vision{background:var(--sand)}
.vision-statement{font-family:var(--font-head);font-weight:700;font-size:clamp(1.25rem,2.5vw,1.7rem);color:var(--off-black);max-width:58ch;margin-top:12px}
.vision-statement .heat{color:var(--terracotta)}
.vision-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:22px}
.vstep{background:var(--warm-white);border-radius:10px;padding:18px 18px}
.vstep .when{font-family:var(--font-head);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--sage);display:block;margin-bottom:7px}
.vstep h3{font-size:1.05rem;margin-bottom:6px}
.vstep p{font-size:.9rem}

/* Team */
.team .team-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.team ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.team ul li{padding-left:24px;position:relative;font-size:.96rem}
.team ul li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--sage)}
.team .founder-note{background:var(--warm-white);border:1px solid var(--sand);border-radius:10px;padding:22px}
.team .founder-note h3{font-size:1.1rem;margin-bottom:10px}
.team .founder-note p{font-size:.95rem}
@media(max-width:820px){.team .team-grid{grid-template-columns:1fr}}

/* Notfall */
.notfall{background:var(--terracotta);color:var(--warm-white);text-align:center;padding:24px 24px 28px}
.notfall h2{color:var(--warm-white);margin-left:auto;margin-right:auto;margin-bottom:8px}
.notfall p{max-width:64ch;margin:0 auto 10px}
.notfall .btn-ghost{border-color:var(--warm-white);color:var(--warm-white);padding:11px 24px}
.notfall .btn-ghost:hover{background:var(--warm-white);color:var(--terracotta)}
.notfall .tel{font-family:var(--font-head);font-weight:900;font-size:clamp(1.3rem,2.9vw,1.7rem);display:block;margin-bottom:7px;color:var(--warm-white);text-decoration:none}

/* Footer -- Kompakt-Runde (Georg 30.08.2026, muendlich: "bei allen webseiten den letzten
   block dunkel verdichten. luft raus"): Innenabstaende, Zeilenhoehe und Wortmarke deutlich
   verkleinert (Ziel: etwa halbe Hoehe gegenueber vorher). Die .legal-Zeile (Firmenwortlaut,
   Anschrift, FN, UID, GISA) steht ab jetzt nur noch auf impressum.html -- auf den anderen 11
   Seiten entfernt, siehe README.md Abschnitt "Footer kompakt / Impressum-Obfuskation". */
footer{background:var(--off-black);color:var(--stone-blue);padding:10px 24px 8px;font-size:.78rem;line-height:1.3}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px 40px;align-items:start}
footer .wordmark{font-size:.62rem}
footer .wordmark .l1{color:var(--warm-white)}
footer h4{color:var(--warm-white);font-size:.8rem;margin-bottom:4px}
/* R4 (PR #516, CI-Review): 3->4 Zeilen, seit die Leistungen-Liste mit "Termin buchen" 7
   statt 6 Eintraege hat -- repeat(3,auto) haette eine 3. Spalte mit nur einem einzelnen
   Eintrag erzeugt, repeat(4,auto) ergibt wieder 2 ausgeglichene Spalten (4+3), wie vor
   diesem PR. Empirisch am Screenshot (1280px, footer-crop) geprueft: haelt. */
footer ul{list-style:none;display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);gap:2px 28px;justify-content:start}
footer a{color:var(--stone-blue);text-decoration:none}
footer a:hover{color:var(--warm-white)}
footer .kontakt-spalte ul{grid-auto-flow:row;grid-template-rows:none;color:var(--stone-blue)}
footer .legal{grid-column:1/-1;border-top:1px solid #5a5346;padding-top:6px;font-size:.7rem;line-height:1.3}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}footer ul{grid-auto-flow:row;grid-template-rows:none}}

/* ===== Garantie-Slot-Anzeige (Platzhalter, Daten später aus Infra-IT) ===== */
.slot-live-box{background:var(--warm-white);border:1px solid var(--sand);border-radius:10px;padding:28px;margin-top:26px}
.slot-live-box h3{font-size:1.1rem;margin-bottom:18px}
.slot-row{margin-bottom:20px}
.slot-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.slot-name{font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--off-black)}
.slot-frei{font-size:.85rem;font-weight:600;color:var(--sage)}
.slot-frei.knapp{color:var(--terracotta)}
.slot-bar{height:10px;background:var(--sand);border-radius:5px;overflow:hidden}
.slot-fill{height:100%;background:var(--sage);border-radius:5px}
.slot-fill.knapp{background:var(--terracotta)}
.slot-meta{font-size:.78rem;color:var(--charcoal);margin-top:5px}
.slot-stand{font-size:.78rem;color:var(--charcoal);margin-top:6px}
/* Voll-Zustand (O6): keine nackte Null, sondern der naechste Schritt. Farbe wie .knapp --
   Terracotta ist in dieser Palette bereits das Signal "wird eng", voll ist dessen Endpunkt. */
.slot-frei.voll{color:var(--terracotta);font-weight:700}
.slot-warteliste{text-decoration:underline;text-underline-offset:2px}
.slot-fill.voll{background:var(--terracotta)}
/* Fail-closed-Hinweis, wenn keine belastbaren Zahlen vorliegen (kein Demo-Fallback, E1). */
.slot-hinweis{background:var(--sand);border-radius:8px;padding:18px 20px}
.slot-hinweis-text{font-size:.92rem;color:var(--charcoal);margin-bottom:8px}
.slot-hinweis-tel{font-family:var(--font-head);font-weight:700;font-size:1.1rem}
.slot-hinweis-tel a{color:var(--terracotta);text-decoration:none}