/* ==========================================================================
   Sahin Gebäudereinigung - Design-System (NK Digital Haus-Stil, Vorlage v1)
   Palette aus dem Logo (Pillow-Sampling am Original-PNG): Himmelblau #72beea, sonst blau getoente Tinte.
   Kein accent-2 (Logo hat nur Hellblau und Weiss), kein Serif.
   Typografie: Sora (Display) + Instrument Sans (Text), lokal gehostet.
   Shape-Regel (Standard laut Niklas, N3): kantig, 4 bis 6px, kein Wert darueber. Buttons 4px, alles andere 6px.
   Nur aendern, wenn die Marke selbst rund ist (new_demo.py --rund: --r-btn: 999px, --r: 14px, --r-lg: 22px, Grund in DESIGN.md).
   Hover-Transformationen nur hinter @media (hover: hover) and (pointer: fine). Nur transform und opacity animieren.
   Helle Buehne ist der Normalfall. Dunkel nur, wo das Gewerbe dunkel ist (Barber, Werkstatt, Training, Foto).
   ========================================================================== */

@import url("../fonts/fonts.css");

:root{
  color-scheme: light;
  --leuchten:    rgba(114,190,234,.16);
  --fehler:      #b3261e;      /* 6.5 auf Weiss */

  /* Marke */
  --akzent:       #72beea;      /* Logo-Himmelblau unveraendert (H202 S73 L68) */
  --akzent-hover: #62a3c9;
  --auf-akzent:   #0f1a22;      /* Tinte auf Hellblau: 8.6 (Weiss waere nur 2.04) */
  --akzent-text:  #1b6a96;      /* dasselbe Blau dunkler fuer Text und Links auf Weiss: 5.9 */
  --weiss:        #ffffff;      /* Text auf Foto und Scrim */
  --zu:           #e0a33a;      /* Status ausserhalb der Zeiten (Bernstein, kein Alarmrot) */

  /* Semantische Tokens - Light */
  --bg:          #ffffff;
  --bg-2:        #f4f8fb;
  --bg-3:        #e8eff4;
  --surface:     #ffffff;
  --fg:          #0f1a22;
  --fg-2:        #4a5761;
  --fg-3:        #6e7a83;
  --line:        rgba(15,26,34,.12);
  --line-2:      rgba(15,26,34,.22);
  --invert-bg:   #0c1a24;
  --invert-fg:   #f1f6f9;
  --invert-fg-2: #a9b7c2;
  --invert-line: rgba(255,255,255,.14);
  --shadow:      0 24px 50px -30px rgba(15,26,34,.30), 0 6px 18px -12px rgba(15,26,34,.14);
  --shadow-lg:   0 44px 80px -40px rgba(15,26,34,.40), 0 12px 28px -16px rgba(15,26,34,.18);

  /* Form */
  --r-btn:  4px;
  --r:      6px;
  --r-lg:   6px;
  --maxw:   1240px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --ease:   cubic-bezier(.16,1,.3,1);
  --sec:    clamp(4.5rem, 9vw, 8rem);
  --head:   74px;
  --fd:     'Sora', system-ui, sans-serif;
  --fb:     'Instrument Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Nachtschicht (dunkles Design): Reinigung passiert oft nach Feierabend. Tinten-Blau statt Schwarz,
   Logo-Hellblau als Leuchtakzent. Umschalter im Kopf, Script im head setzt data-theme vor dem ersten Zeichnen. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --akzent-text: #8fd0f5;      /* 9.6 auf --bg */
  --bg:          #0a1622;
  --bg-2:        #0e1d2c;
  --bg-3:        #162a3d;
  --surface:     #102233;
  --fg:          #e9f3fa;
  --fg-2:        #a9bfd0;      /* 9.3 auf --bg */
  --fg-3:        #86a0b4;      /* 6.4 auf --bg */
  --line:        rgba(143,208,245,.14);
  --line-2:      rgba(143,208,245,.28);
  --invert-bg:   #050e17;
  --invert-fg:   #eef6fb;
  --invert-fg-2: #a9bfd0;
  --invert-line: rgba(143,208,245,.16);
  --leuchten:    rgba(114,190,234,.22);
  --fehler:      #ff9d92;      /* 8.9 auf --bg */
  --shadow:      0 24px 50px -30px rgba(0,0,0,.7), 0 6px 18px -12px rgba(0,0,0,.5);
  --shadow-lg:   0 44px 80px -40px rgba(0,0,0,.8), 0 12px 28px -16px rgba(0,0,0,.55);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--fb); background:var(--bg); color:var(--fg);
  font-size:1.0625rem; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
svg{ fill:currentColor; }
img{ height:auto; }
b,strong{ font-weight:600; }  /* nur 600 laden: Display 600, Body 400/500/600 (Kodex 3.1: max 5 Schnitte) */
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--akzent); color:var(--auf-akzent); }
:focus-visible{ outline:3px solid var(--akzent); outline-offset:3px; border-radius:2px; }
.skip{ position:absolute; left:-999px; top:0; background:var(--fg); color:var(--bg); padding:.6rem 1rem; z-index:100; }
.skip:focus{ left:1rem; top:1rem; }

/* ---------- Typo ---------- */
h1,h2,h3,h4{ font-family:var(--fd); font-weight:600; letter-spacing:-.025em; line-height:1.06; text-wrap:balance; }
.display{ font-size:clamp(2.6rem, 5.8vw, 4.6rem); letter-spacing:-.035em; line-height:1.0; }
.h-sec{ font-size:clamp(1.9rem, 3.8vw, 3.1rem); }
.h-sub{ font-size:clamp(1.25rem, 2.1vw, 1.7rem); letter-spacing:-.02em; }
.lead{ font-size:clamp(1.06rem, 1.5vw, 1.28rem); line-height:1.6; color:var(--fg-2); max-width:56ch; }
.muted{ color:var(--fg-2); }
.small{ font-size:.9375rem; }
.akzent{ color:var(--akzent); }
p + p{ margin-top:1em; }

/* Eyebrow: sparsam. Max 1 je 3 Sektionen (Hero zaehlt mit). Kein Pill, keine Box. */
.eyebrow{
  display:inline-block; font-family:var(--fb); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:860px; }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.section--alt{ background:var(--bg-2); }
.section--dark{ background:var(--invert-bg); color:var(--invert-fg); }
.section--dark .lead,.section--dark .muted,.section--dark .eyebrow{ color:var(--invert-fg-2); }
.section-head{ max-width:40rem; margin-bottom:clamp(2rem,4vw,3.25rem); }
.section-head p{ margin-top:1rem; }

/* ---------- Buttons (kantig, praezise) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem; white-space:nowrap;
  font-family:var(--fb); font-weight:600; font-size:.98rem; letter-spacing:.005em;
  padding:.9rem 1.55rem; border-radius:var(--r-btn); border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; flex:none; }
.btn--primary{ background:var(--akzent); color:var(--auf-akzent); }
.btn--primary:hover{ background:var(--akzent-hover); }
.btn--primary:active{ transform:translateY(0) scale(.985); }
.btn--ghost{ border-color:var(--line-2); color:var(--fg); background:transparent; }
.btn--ghost:hover{ border-color:var(--fg); }
.btn--ghost:active{ transform:translateY(0) scale(.985); }
/* motion: feedback. Hover-Lift max 2px, nur mit echter Maus (Touch loest sonst haengende Hover aus) */
@media (hover: hover) and (pointer: fine){
  .btn--primary:hover,.btn--ghost:hover{ transform:translateY(-2px); }
}
.section--dark .btn--ghost,.on-dark .btn--ghost{ border-color:rgba(255,255,255,.45); color:var(--weiss); }
.section--dark .btn--ghost:hover,.on-dark .btn--ghost:hover{ border-color:var(--weiss); }
.btn--sm{ padding:.62rem 1.15rem; font-size:.92rem; }
.btn--lg{ padding:1.05rem 1.9rem; font-size:1.05rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--fg);
  border-bottom:2px solid var(--akzent); padding-bottom:2px;
}
.link-arrow svg{ width:1em; height:1em; transition:transform .22s var(--ease); }  /* motion: feedback (transform statt gap) */
@media (hover: hover) and (pointer: fine){ .link-arrow:hover svg{ transform:translateX(.3rem); } }

/* ---------- Demo-Bar ---------- */
.demo-bar{
  background:var(--invert-bg); color:var(--invert-fg-2); font-size:.78rem; text-align:center;
  padding:.5rem var(--gutter); letter-spacing:.01em;
}
.demo-bar b{ color:var(--invert-fg); font-weight:600; }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--line);
}
/* Der Blur liegt auf einer eigenen Ebene, nicht auf dem Header selbst: ein backdrop-filter
   erzeugt sonst einen Containing Block und sperrt das position:fixed-Overlay der Mobil-Navigation
   auf die Header-Hoehe ein. Die Links liegen dann ausserhalb des Bildschirms und sind nicht antippbar. */
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

.site-head__inner{ height:74px; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--fd); font-weight:600; font-size:1.15rem; letter-spacing:-.02em; }
.brand img{ height:40px; width:auto; }
.brand__sub{ display:block; font-family:var(--fb); font-size:.78rem; font-weight:500; color:var(--fg-3); letter-spacing:.01em; }  /* kein Uppercase ausserhalb .eyebrow */
.nav{ display:flex; gap:1.6rem; }
.nav a{ font-weight:500; font-size:.98rem; color:var(--fg-2); padding:.35rem 0; border-bottom:2px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--fg); border-color:var(--akzent); }
.head-cta{ display:flex; align-items:center; gap:.9rem; }
.head-tel{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.95rem; }
.head-tel svg{ width:1.05em; height:1.05em; }
.burger{ display:none; background:none; border:1.5px solid var(--line-2); border-radius:var(--r-btn); padding:.5rem .8rem; font-weight:600; font-size:.9rem; cursor:pointer; }

@media (max-width: 900px){
  .nav{
    position:fixed; inset:0; top:0; z-index:60; flex-direction:column; justify-content:center; gap:.4rem;
    padding:var(--gutter); background:var(--bg);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav[data-open="true"]{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{ font-family:var(--fd); font-size:clamp(1.8rem,7vw,2.6rem); font-weight:600; color:var(--fg); border:0; padding:.35rem 0;
          transform:translateY(12px); opacity:0; transition:transform .45s var(--ease), opacity .45s var(--ease); }
  .nav[data-open="true"] a{ transform:none; opacity:1; }
  .nav[data-open="true"] a:nth-child(2){ transition-delay:.05s } .nav[data-open="true"] a:nth-child(3){ transition-delay:.1s }
  .nav[data-open="true"] a:nth-child(4){ transition-delay:.15s } .nav[data-open="true"] a:nth-child(5){ transition-delay:.2s }
  .nav[data-open="true"] a:nth-child(6){ transition-delay:.25s }
  .burger{ display:inline-block; position:relative; z-index:70; }
  .head-tel span{ display:none; }
  .head-cta .btn{ display:none; }
  .site-head__inner{ height:64px; }
  .brand img{ height:34px; }
}

/* ---------- Hero: vollflaechig, Scrim, grosse klare Headline ---------- */
.hero{ position:relative; min-height:calc(100dvh - 74px); display:flex; align-items:flex-end; color:var(--weiss); overflow:hidden; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img,.hero__bg video{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.30) 0%, rgba(10,10,10,.10) 35%, rgba(10,10,10,.78) 100%),
             linear-gradient(90deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 60%);
}
.hero__inner{ position:relative; z-index:1; width:100%; padding-block:clamp(3rem,8vw,6rem); }
.hero__copy{ max-width:44rem; }
.hero__copy .display{ margin:.6rem 0 1.1rem; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.hero__copy .lead{ color:rgba(255,255,255,.86); max-width:38rem; }
.hero__copy .eyebrow{ color:rgba(255,255,255,.78); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.hero--kb .hero__bg img{ animation:kenburns 14s var(--ease) both; transform-origin:60% 40%; }
/* motion: story. Einmaliger Ken-Burns nur auf dem Hero-Bild, nie infinite, nie ueber 1.12 */
@keyframes kenburns{ from{ transform:scale(1.0) } to{ transform:scale(1.07) } }
@media (max-width: 900px){ .hero{ min-height:min(82dvh, 640px); } .hero__inner{ padding-block:2.5rem; } }

/* Trust-Leiste unter dem Hero: harte Fakten, keine erfundenen Zahlen */
.facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fact{ padding:1.4rem var(--gutter) 1.4rem 0; border-right:1px solid var(--line); }
.fact:last-child{ border-right:0; }
.fact b{ display:block; font-family:var(--fd); font-size:1.5rem; letter-spacing:-.02em; }
.fact span{ color:var(--fg-2); font-size:.95rem; }
@media (max-width: 700px){ .fact{ border-right:0; border-bottom:1px solid var(--line); padding-right:0; } .fact:last-child{ border-bottom:0; } }

/* ---------- Editoriale Zeilen (statt Kartenraster) ---------- */
.rows{ border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto; gap:1.5rem 2.5rem; align-items:center;
  padding:1.6rem 0; border-bottom:1px solid var(--line);
}
.row h3,.row p{ transition:transform .3s var(--ease); }  /* motion: feedback (transform statt padding, Hairline bleibt ruhig) */
@media (hover: hover) and (pointer: fine){ .row:hover h3,.row:hover p{ transform:translateX(.6rem); } }
.row h3{ font-size:clamp(1.35rem, 2.4vw, 2rem); letter-spacing:-.025em; }
.row p{ color:var(--fg-2); max-width:52ch; }
.row .link-arrow{ justify-self:end; }
@media (max-width: 760px){ .row{ grid-template-columns:1fr; gap:.5rem; } .row .link-arrow{ justify-self:start; margin-top:.4rem; } }

/* ---------- Bento (asymmetrisch, echte Fotos, exakt so viele Zellen wie Inhalte) ---------- */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(220px,auto); gap:.9rem; }
.tile{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--bg-3); min-height:220px; isolation:isolate; color:var(--weiss); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .9s var(--ease); }  /* motion: feedback */
@media (hover: hover) and (pointer: fine){ .tile:hover img{ transform:scale(1.04); } }
.tile::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,.72) 100%); }
.tile__txt{ position:absolute; left:1.3rem; right:1.3rem; bottom:1.2rem; z-index:2; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.tile__txt h3{ font-size:1.3rem; }
.tile__txt p{ font-size:.95rem; color:rgba(255,255,255,.85); margin-top:.2rem; }
.tile--8{ grid-column:span 8; } .tile--6{ grid-column:span 6; } .tile--4{ grid-column:span 4; } .tile--12{ grid-column:span 12; }
.tile--tall{ grid-row:span 2; }
.tile--text{ background:var(--invert-bg); color:var(--invert-fg); padding:1.6rem; display:flex; flex-direction:column; justify-content:flex-end; }
.tile--text::after{ display:none; }
@media (max-width: 900px){ .tile--8,.tile--6,.tile--4{ grid-column:span 6; } }
@media (max-width: 600px){ .bento{ grid-template-columns:1fr; } .tile--8,.tile--6,.tile--4,.tile--12{ grid-column:span 1; } .tile--tall{ grid-row:span 1; } }

/* ---------- Split (Text + grosses Bild), max 2 in Folge ---------- */
.split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--rev > :first-child{ order:2; }
.split figure{ border-radius:var(--r-lg); overflow:hidden; }  /* flach wie der Massstab: kein Schatten auf Bildern (T4) */
.split figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.split .h-sec{ margin-bottom:1rem; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } .split--rev > :first-child{ order:0; } }

/* ---------- Zahlen (nur echte Werte) ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; }
.stat b{ display:block; font-family:var(--fd); font-size:clamp(2.4rem,5vw,3.8rem); letter-spacing:-.04em; line-height:1; }
.stat span{ color:var(--fg-2); }

/* ---------- Zitat ---------- */
.quote{ font-family:var(--fd); font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.02em; line-height:1.3; max-width:30ch; }
.quote + p{ margin-top:1.2rem; color:var(--fg-2); }
.section--dark .quote + p{ color:var(--invert-fg-2); }

/* ---------- Ablauf als Liste mit Hairlines (keine nummerierten Kreise) ---------- */
.steps{ counter-reset:s; border-top:1px solid var(--line); }
.step{ display:grid; grid-template-columns:5rem 1fr; gap:1.5rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.step::before{ counter-increment:s; content:counter(s, decimal-leading-zero); font-family:var(--fd); font-size:1.1rem; color:var(--fg-3); padding-top:.2rem; }
.step h3{ font-size:1.25rem; margin-bottom:.3rem; }
.step p{ color:var(--fg-2); max-width:56ch; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 0; font-family:var(--fd); font-size:1.15rem; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:1.1em; height:1.1em; flex:none; transition:transform .3s var(--ease); }
.faq details[open] summary svg{ transform:rotate(180deg); }
.faq details p{ padding:0 0 1.2rem; color:var(--fg-2); max-width:62ch; }

/* ---------- CTA-Band mit Bild ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(2.5rem,6vw,4.5rem); color:var(--weiss); isolation:isolate; background:var(--invert-bg); }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cta-band::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,10,10,.80) 0%, rgba(10,10,10,.52) 100%); }  /* rechte Flanke: bei .35 lag der Absatz auf hellen Fotos nur bei 4,6 */
.cta-band > *:not(img){ position:relative; z-index:2; }
/* Unter 700 px traegt der seitliche Verlauf nicht mehr: rechts am Zeilenende blieben nur 2,83 zu 1.
   Dort deshalb flaechendeckend abdunkeln statt von links nach rechts. */
@media (max-width: 700px){
  .cta-band::after{ background:linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.80) 100%); }
}
.cta-band .h-sec{ max-width:20ch; }
.cta-band p{ margin-top:.8rem; max-width:48ch; color:var(--weiss); }

/* ---------- Galerie + Lightbox ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.chip{ border:1.5px solid var(--line-2); background:transparent; border-radius:var(--r-btn); padding:.45rem .9rem; font-size:.92rem; font-weight:500; cursor:pointer; }
.chip[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.9rem; }
.gallery figure{ border-radius:var(--r); overflow:hidden; cursor:zoom-in; background:var(--bg-3); }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease); }  /* motion: feedback */
@media (hover: hover) and (pointer: fine){ .gallery figure:hover img{ transform:scale(1.03); } }
.gallery figcaption{ font-size:.9rem; color:var(--fg-2); padding:.6rem .2rem 0; }
.lb{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:2rem; }
.lb[hidden]{ display:none; }
.lb img{ max-width:min(92vw,1400px); max-height:82vh; object-fit:contain; border-radius:var(--r); }
.lb figcaption{ position:absolute; bottom:1.2rem; left:0; right:0; text-align:center; color:var(--invert-fg-2); font-size:.95rem; }
.lb button{ position:absolute; background:rgba(255,255,255,.1); color:var(--weiss); border:0; width:48px; height:48px; border-radius:var(--r-btn); cursor:pointer; display:grid; place-items:center; }
.lb button svg{ width:22px; height:22px; }
.lb__close{ top:1rem; right:1rem; } .lb__prev{ left:1rem; top:50%; transform:translateY(-50%); } .lb__next{ right:1rem; top:50%; transform:translateY(-50%); }

/* ---------- Vorher / Nachher ---------- */
.ba{ position:relative; overflow:hidden; border-radius:var(--r-lg); aspect-ratio:16/10; user-select:none; touch-action:none; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ clip-path:inset(0 0 0 var(--x,50%)); }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--x,50%); width:2px; background:var(--weiss); transform:translateX(-1px); }
.ba__handle::after{ content:"<>"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--akzent); color:var(--auf-akzent); font-weight:700; font-size:.8rem; letter-spacing:.05em; padding:.5rem .6rem; border-radius:var(--r-btn); }
.ba__label{ position:absolute; top:1rem; background:rgba(10,10,10,.6); color:var(--weiss); font-size:.85rem; font-weight:600; padding:.3rem .6rem; border-radius:var(--r-btn); letter-spacing:.01em; }
.ba__label--l{ left:1rem; } .ba__label--r{ right:1rem; }

/* ---------- Formular (Label ueber Feld, Fehler unter Feld) ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; align-content:start; }
.form .full{ grid-column:1 / -1; }
.field{ display:grid; gap:.4rem; }
.field label{ font-weight:600; font-size:.95rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:var(--surface); color:var(--fg);
  transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--akzent); outline:3px solid color-mix(in srgb, var(--akzent) 35%, transparent); outline-offset:1px; }
.field textarea{ min-height:150px; resize:vertical; }
.field small{ color:var(--fg-3); }
.check{ display:grid; grid-template-columns:auto 1fr; column-gap:.7rem; row-gap:.35rem; align-items:start; font-size:.95rem; color:var(--fg-2); }  /* Grid statt Flex: Kaestchen und Text nebeneinander, Fehlerzeile ueber die volle Breite darunter */
.check input{ margin-top:.3rem; width:1.1rem; height:1.1rem; accent-color:var(--akzent); }
.form-ok{ display:none; padding:1.2rem 1.4rem; border:1.5px solid var(--akzent); border-radius:var(--r); background:color-mix(in srgb, var(--akzent) 10%, var(--surface)); }
.form-ok[data-show="true"]{ display:block; }
@media (max-width: 640px){ .form{ grid-template-columns:1fr; } }

/* Kontaktkarte */
.contact-card{ display:grid; gap:1.2rem; padding:1.8rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.contact-card .item{ display:grid; grid-template-columns:1.4rem 1fr; gap:.8rem; align-items:start; }
.contact-card .item svg{ width:1.3rem; height:1.3rem; color:var(--akzent); margin-top:.15rem; }
.contact-card b{ display:block; }
.zeiten{ list-style:none; padding:0; display:grid; gap:.35rem; }
.zeiten li{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); padding:.4rem 0; }

/* Karte als Zwei-Klick-Loesung (DSGVO) */
.map{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-3); min-height:320px; display:grid; place-items:center; text-align:center; padding:2rem; }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map p{ max-width:36ch; color:var(--fg-2); margin-bottom:1rem; }

/* ---------- Footer ---------- */
.site-foot{ background:var(--invert-bg); color:var(--invert-fg-2); padding:clamp(3rem,6vw,4.5rem) 0 1.5rem; }
.site-foot a:hover{ color:var(--invert-fg); }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--invert-line); }
.foot-grid h4{ color:var(--invert-fg); font-size:.95rem; margin-bottom:.9rem; letter-spacing:.02em; }
.foot-grid ul{ list-style:none; padding:0; display:grid; gap:.45rem; font-size:.95rem; }
.foot-grid img{ height:40px; width:auto; }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; padding-top:1.3rem; font-size:.85rem; }
@media (max-width: 760px){ .foot-grid{ grid-template-columns:1fr; gap:1.8rem; } }

/* ---------- Rechtsseiten ---------- */
.legal h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:1.5rem; overflow-wrap:anywhere; hyphens:auto; }  /* lange Woerter wie Datenschutzerklaerung liefen bei 320 und 360 px aus dem Bildschirm */
.legal h2{ font-size:1.35rem; margin:2.2rem 0 .7rem; }
.legal p,.legal li{ color:var(--fg-2); }
.legal mark{ background:color-mix(in srgb, var(--akzent) 25%, transparent); color:var(--fg); padding:0 .25em; }

/* ---------- Motion: Reveal mit Absicht ---------- */
/* motion: hierarchy. Ein Reveal-Typ je Demo, laeuft einmal, nie beim Zurueckscrollen */
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal="1"]{ transition-delay:.08s } [data-reveal="2"]{ transition-delay:.16s } [data-reveal="3"]{ transition-delay:.24s } [data-reveal="4"]{ transition-delay:.32s }
.js [data-reveal].is-in{ opacity:1; transform:none; }
html.js[data-motion="reduce"] [data-reveal]{ transform:none; transition-duration:.3s; transition-delay:0s; }
html[data-motion="reduce"] .hero--kb .hero__bg img{ animation:none; }
.site-head.is-scrolled{ box-shadow:var(--shadow); }

/* ---------- Hinweisbox (Rechtsseiten, Entwurfs-Hinweis) ---------- */
.note{ border:1px solid var(--line-2); border-left:4px solid var(--akzent); border-radius:var(--r); padding:1rem 1.2rem; background:var(--bg-2); margin:1.2rem 0 1.8rem; }
.note p{ color:var(--fg-2); margin:0; }

/* ---------- Utilities ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }  /* nur fuer Bild-Zellen; drei gleiche Text-Karten sind verboten (Anti-KI) */
@media (max-width: 860px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.mt-1{ margin-top:1rem } .mt-2{ margin-top:2rem } .mt-3{ margin-top:3rem }
.pt-0{ padding-top:0 }
.measure-44{ max-width:44rem }                 /* Headline-Container in rem, nie in ch (Bug 7) */
.text-hero .display{ margin:.6rem 0 1.1rem }
.foot-text{ margin-top:1.25rem; max-width:36ch }
.foot-brand{ color:var(--invert-fg); font-family:var(--fd); font-size:1.3rem }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Sehr schmale Geraete: die Unterzeile der Wortmarke laesst die Kopfzeile umbrechen,
   der Firmenname rutscht dann hinter die Demo-Leiste. */
@media (max-width: 360px){ .brand__sub{ display:none; } }


/* ==========================================================================
   Sahin Gebäudereinigung (27.10.2026): Bausteine ueber die Vorlage hinaus
   Baukasten Maerz/Kaps: Video-Hero, Handy-Mockup, Ambient-Welle, Leistungswahl mit Foto.
   Alles ueber Tokens, kantig 4 bis 6 px, Motion nur transform/opacity (clip-path fuer die Wisch-Linie).
   ========================================================================== */
.sprite{ display:none; }
[id]{ scroll-margin-top:calc(var(--head) + 1rem); }

/* ---------- Header: Logo, Aufklappmenue Leistungen, Telefon und CTA im Handy-Menue ---------- */
.brand picture{ display:block; }
.brand img{ height:40px; width:auto; }
.nav{ align-items:center; }
.nav a.is-aktiv{ color:var(--fg); border-color:var(--akzent); }
.nav__grp > a svg{ width:.72em; height:.72em; }
.nav .nav__tel,.nav .nav__cta{ display:none; }
@media (min-width: 901px){
  .nav{ align-self:stretch; }
  .nav__grp{ position:relative; align-self:stretch; display:flex; align-items:center; }
  .nav__grp > a{ display:inline-flex; align-items:center; gap:.32rem; }
  .nav__grp > a svg{ opacity:.55; transition:transform .25s var(--ease); }
  .nav__sub{
    position:absolute; top:calc(100% - .5rem); left:-1rem; z-index:55; min-width:15.5rem; display:grid; gap:.1rem; padding:.5rem;
    background:var(--bg); border:1px solid var(--line-2); border-top:3px solid var(--akzent); border-radius:var(--r-lg);
  }
  /* Geschlossen nimmt das Menue keinen Platz ein und ist fuer Tastatur und Vorleser nicht erreichbar */
  .nav__grp:not(:hover):not(:focus-within) .nav__sub{ display:none; }
  /* motion: feedback. Das Menue kommt kurz von unten, damit klar ist, zu welchem Punkt es gehoert */
  .nav__grp:hover .nav__sub,.nav__grp:focus-within .nav__sub{ animation:subin .2s var(--ease) both; }
  @keyframes subin{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
  .nav__grp:hover > a svg,.nav__grp:focus-within > a svg{ transform:rotate(180deg); }
  .nav .nav__sub a{ padding:.55rem .7rem; border:0; border-radius:var(--r-btn); font-size:.95rem; white-space:nowrap; }
  .nav .nav__sub a:hover,.nav .nav__sub a[aria-current="page"]{ background:var(--bg-2); color:var(--fg); }
  .nav .nav__sub a[aria-current="page"]{ color:var(--akzent-text); font-weight:600; }
}
@media (max-width: 900px){
  .nav{ justify-content:flex-start; align-items:flex-start; overflow-y:auto; overscroll-behavior:contain; padding-top:5.2rem; padding-bottom:2rem; }
  .nav__grp{ width:100%; }
  .nav__grp > a svg{ display:none; }
  .nav__sub{ display:grid; gap:0; padding:0 0 .6rem; }
  .nav .nav__sub a{ font-family:var(--fb); font-size:1.05rem; font-weight:500; color:var(--fg-2); padding:.45rem 0; }
  .nav .nav__sub a[aria-current="page"]{ color:var(--fg); text-decoration:underline; text-decoration-color:var(--akzent); text-decoration-thickness:2px; text-underline-offset:.25em; }
  .nav .nav__tel{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1.2rem; font-family:var(--fb); font-size:1.15rem; }
  .nav .nav__tel svg{ width:1.1em; height:1.1em; }
  .nav .nav__cta{ display:inline-flex; margin-top:.9rem; font-family:var(--fb); font-size:1rem; padding:.95rem 1.5rem; border:1.5px solid transparent; color:var(--auf-akzent); }
  .brand img{ height:34px; }
}
html[data-motion="reduce"] .nav__sub{ animation-duration:.01s; }

/* ---------- Hero mit Video: Poster darunter, Video blendet per Opacity ein. Kraeftiger Scrim, weil das Motiv im Gegenlicht sehr hell ist ---------- */
.hero__zoom{ position:absolute; inset:0; }
.hero__zoom img,.hero__zoom video{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; }
.hero__video{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease); }
.hero__video.is-play{ opacity:1; }
html[data-motion="reduce"] .hero__video{ display:none; }
.hero__bg::after{
  z-index:1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--invert-bg) 34%, transparent) 0%, color-mix(in srgb, var(--invert-bg) 18%, transparent) 26%,
                    color-mix(in srgb, var(--invert-bg) 78%, transparent) 70%, color-mix(in srgb, var(--invert-bg) 93%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--invert-bg) 78%, transparent) 0%, color-mix(in srgb, var(--invert-bg) 46%, transparent) 50%,
                    color-mix(in srgb, var(--invert-bg) 0%, transparent) 86%);
}
.hero__inner{ z-index:2; }
.hero__copy{ max-width:58rem; }
.hero__copy .display{ text-shadow:0 2px 30px rgba(7,14,19,.45); }
.hero__copy .lead{ color:var(--weiss); text-shadow:0 1px 14px rgba(7,14,19,.5); }
.hero__copy .eyebrow{ color:var(--akzent); margin-bottom:.4rem; }
@media (max-width: 900px){ .hero__zoom img,.hero__zoom video{ object-position:42% 50%; } }

/* H1: jede Zeile in einer Maske, die Zeile faehrt von unten ein */
.zl{ display:block; overflow:hidden; padding:.06em 0 .2em; margin:-.06em 0 -.2em; }
.zl > span{ display:block; }
/* Wisch-Unterstreichung: ein Hellblau-Band unter "Sauber" */
.uline{ position:relative; display:inline-block; }
.uline::after{ content:""; position:absolute; left:-.03em; right:-.03em; bottom:-.04em; height:.11em; background:var(--akzent); border-radius:2px; }
.js .hero [data-h]{ animation:hero-in .8s var(--ease) both; }
.js .hero [data-h="2"]{ animation-delay:.09s; }
.js .hero [data-h="3"]{ animation-delay:.12s; }
.js .hero .zl > span{ animation:zl-in .9s var(--ease) both; }
.js .hero .zl:nth-child(2) > span{ animation-delay:.05s; }
.js .hero .uline::after{ animation:wisch .7s var(--ease) .55s both; }
/* motion: hierarchy. Hero-Text kommt als eine Gruppe: Eyebrow, Headline, Lead, Buttons */
@keyframes hero-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
/* motion: hierarchy. Headline-Zeilen fahren aus ihrer Maske */
@keyframes zl-in{ from{ transform:translateY(105%) } to{ transform:none } }
/* motion: story. Das Band wischt einmal von links unter das Wort, wie ein Abzieher ueber Glas */
@keyframes wisch{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
/* motion: state. Kurzes Einblenden bei reduzierter Bewegung */
@keyframes hero-fade{ from{ opacity:0 } to{ opacity:1 } }
html.js[data-motion="reduce"] .hero [data-h],
html.js[data-motion="reduce"] .hero .zl > span{ animation:hero-fade .3s var(--ease) both; animation-delay:0s; }
html.js[data-motion="reduce"] .hero .uline::after{ animation:hero-fade .3s var(--ease) both; }

/* ---------- Facts: vier Zellen ---------- */
.facts{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.fact + .fact{ padding-left:clamp(1rem,2vw,1.6rem); }
.fact b{ font-size:clamp(1.15rem,1.7vw,1.4rem); }
@media (max-width: 900px){ .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } .fact:nth-child(2){ border-right:0; } .fact:nth-child(n+3){ border-top:1px solid var(--line); } .fact:nth-child(3){ padding-left:0; } }
@media (max-width: 560px){ .facts{ grid-template-columns:1fr; } .fact,.fact + .fact{ padding:1.1rem 0; border-right:0; } .fact:nth-child(n+2){ border-top:1px solid var(--line); } }

/* ---------- Leistungswahl mit Foto: 7+5 / 4+4+4 / 12, exakt sechs Zellen ---------- */
.lk-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.9rem; }
.lk{ position:relative; display:flex; align-items:flex-end; min-height:15rem; overflow:hidden; isolation:isolate; border-radius:var(--r-lg); background:var(--invert-bg); color:var(--weiss); }
.lk img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }  /* motion: feedback */
.lk::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, color-mix(in srgb, var(--invert-bg) 0%, transparent) 28%, color-mix(in srgb, var(--invert-bg) 86%, transparent) 100%); }
.lk__txt{ position:relative; z-index:2; padding:clamp(1.1rem,2vw,1.5rem); max-width:36rem; text-shadow:0 1px 12px rgba(7,14,19,.4); }
.lk__txt h3{ font-size:clamp(1.3rem,2vw,1.7rem); }
.lk__txt p{ margin-top:.35rem; font-size:.98rem; line-height:1.5; color:var(--weiss); }
.lk__link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.85rem; padding-bottom:2px; border-bottom:2px solid var(--akzent); font-weight:600; font-size:.95rem; }
.lk__link svg{ width:1em; height:1em; transition:transform .22s var(--ease); }  /* motion: feedback */
@media (hover: hover) and (pointer: fine){ .lk:hover img{ transform:scale(1.04); } .lk:hover .lk__link svg{ transform:translateX(.3rem); } }
.lk--7,.lk--5{ min-height:23rem; } .lk--7{ grid-column:span 7; } .lk--5{ grid-column:span 5; }
.lk--4{ grid-column:span 4; min-height:19rem; }
.lk--12{ grid-column:span 12; min-height:15rem; }
.lk--12 img{ object-position:50% 62%; }
@media (max-width: 900px){
  .lk--7,.lk--5,.lk--4{ grid-column:span 6; min-height:18rem; }
  .lk--4:nth-child(5){ grid-column:span 12; }
}
@media (max-width: 600px){ .lk-grid > .lk{ grid-column:1 / -1; min-height:16rem; } }

/* ---------- Ambient (G13): Wasserwelle hell, Punktraster plus Linien dunkel, verwaschenes Foto. Max 3 Ebenen je Seite ---------- */
.deko-host{ position:relative; overflow:clip; isolation:isolate; }
.deko-host > .wrap{ position:relative; z-index:1; }
.deko{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.welle{ position:absolute; left:-8%; top:0; width:116%; height:100%; overflow:visible; }
.welle__s0{ stop-color:var(--akzent); stop-opacity:.15; }
.welle__s1{ stop-color:var(--akzent); stop-opacity:.75; }
.welle__p2{ opacity:.6; }
.deko--band{
  opacity:.34;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 22%, black 78%, transparent 100%), linear-gradient(180deg, transparent 8%, black 40%, black 72%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, black 22%, black 78%, transparent 100%), linear-gradient(180deg, transparent 8%, black 40%, black 72%, transparent 100%);
  mask-composite:intersect;
}
.deko__punkte{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px); background-size:22px 22px; opacity:.6; }
.welle--linien{ fill:none; stroke:var(--akzent); stroke-width:1.4; opacity:.22; }
.welle--linien path{ vector-effect:non-scaling-stroke; }
.deko--dunkel{
  -webkit-mask-image:linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}
.deko--foto img{
  width:100%; height:100%; object-fit:cover; opacity:.07; filter:grayscale(1);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, black 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, black 35%, transparent 100%);
}
/* Sehr langsame Drift, endlich (8 Durchgaenge, rund 4 Minuten), danach steht die Seite ganz ruhig */
.welle{ animation:welle-drift 30s var(--ease) 8 alternate both; }
.welle--linien{ animation-duration:34s; }
/* motion: story. Die Wasserwelle pendelt kaum merklich, nur transform */
@keyframes welle-drift{ from{ transform:translate3d(-2%,0,0) } to{ transform:translate3d(2%,3%,0) } }
[data-theme="dark"] .deko--band{ opacity:.18; } [data-theme="dark"] .deko--foto img{ opacity:.05; }
html[data-motion="reduce"] .welle{ animation:none; }
@media (max-width: 700px){ .deko--band{ opacity:.26; } }

/* ---------- Reinigungsplan: Chips, Gruppen, Wochenleiste (geteilt von Mockup, Einstieg und grossem Rechner) ---------- */
.plan__gruppe{ min-width:0; }
.plan__label{ font-weight:600; font-size:.95rem; margin-bottom:.55rem; }
.pc-grid{ display:grid; gap:.45rem; }
.pc-grid[hidden]{ display:none; }
.pc-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pc-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pc-grid--auto{ display:flex; flex-wrap:wrap; }
.pc{
  display:flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.45rem .8rem;
  border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:var(--surface); color:var(--fg);
  font-size:.93rem; font-weight:500; line-height:1.25; text-align:center; cursor:pointer; hyphens:auto;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);  /* motion: state */
}
.pc[aria-pressed="true"]{ background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent); font-weight:600; }
@media (hover: hover) and (pointer: fine){ .pc:hover{ border-color:var(--akzent-text); } .pc[aria-pressed="true"]:hover{ border-color:var(--akzent); } }
.plan__ort{ margin-top:.7rem; max-width:22rem; }
.plan__ort[hidden]{ display:none; }
.plan-satz{ min-height:1.6em; color:var(--fg); }

/* Wochenleiste: sieben Tage, Marke je Intervall. Oben = waehrend, unten = ausserhalb der Geschaeftszeiten */
.wo{ --wo-h:3.4rem; --wo-y:0%; position:relative; }
.wo[data-zeit="ausserhalb"]{ --wo-y:128%; }
.wo[data-zeit="flexibel"]{ --wo-y:64%; }
.wo__tage{ position:relative; z-index:1; list-style:none; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem; }
.wo__tag{ display:grid; grid-template-rows:var(--wo-h) auto; gap:.3rem; text-align:center; }
.wo__tag::before{ content:""; grid-row:1; grid-column:1; border:1px solid var(--line-2); border-radius:2px; }
.wo__mark{
  grid-row:1; grid-column:1; align-self:start; height:40%; margin:.22rem; border-radius:2px; background:var(--akzent);
  opacity:0; transform:translateY(var(--wo-y)) scale(.9); transition:opacity .2s var(--ease), transform .2s var(--ease);  /* motion: state */
}
.wo__tag b{ font-size:.72rem; font-weight:600; color:var(--fg-2); }
.wo[data-int="taeglich"] .wo__tag:nth-child(-n+5) .wo__mark,
.wo[data-int="w23"] .wo__tag:nth-child(1) .wo__mark,
.wo[data-int="w23"] .wo__tag:nth-child(3) .wo__mark,
.wo[data-int="w23"] .wo__tag:nth-child(5) .wo__mark,
.wo[data-int="woechentlich"] .wo__tag:nth-child(3) .wo__mark,
.wo[data-int="d14"] .wo__tag:nth-child(3) .wo__mark{ opacity:1; transform:translateY(var(--wo-y)) scale(1); }
.wo[data-int="d14"] .wo__mark{ background:transparent; border:2px dashed var(--akzent-text); }
.wo__band{
  position:absolute; z-index:0; left:0; right:0; top:calc(var(--wo-h) * .52); height:calc(var(--wo-h) * .48);
  display:none; border-top:1.5px dashed var(--akzent-text); background:color-mix(in srgb, var(--akzent) 18%, transparent);
}
.wo__legende{ display:none; align-items:center; gap:.45rem; margin-top:.45rem; font-size:.78rem; font-weight:600; line-height:1.25; color:var(--fg); }
.wo__legende::before{ content:""; flex:none; width:1.1rem; height:.7rem; border-top:1.5px dashed var(--akzent-text); background:color-mix(in srgb, var(--akzent) 18%, transparent); }
.wo[data-zeit="ausserhalb"] .wo__band{ display:block; }
.wo[data-zeit="ausserhalb"] .wo__legende{ display:flex; }
.wo__einmal{ display:none; margin-top:.5rem; font-weight:600; font-size:.92rem; color:var(--fg); }
.wo[data-int="einmalig"] .wo__einmal{ display:block; }
.wo[data-int="einmalig"] .wo__tage,.wo[data-int="einmalig"] .wo__band{ opacity:.35; }
.wo--gross{ --wo-h:5.6rem; }
.wo--gross .wo__tag b{ font-size:.85rem; }
.wo--gross .wo__legende{ font-size:.88rem; }
html[data-motion="reduce"] .wo__mark{ transition-duration:.12s; }

/* ---------- Split hell mit Handy-Mockup ---------- */
.handy-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.handy__text .lead{ margin-top:1.1rem; }
.handy__buehne{ position:relative; display:grid; justify-items:center; gap:1.1rem; padding:1rem 0; }
.handy__flaeche{ position:absolute; left:50%; top:3.5rem; bottom:4.5rem; width:min(19rem,78%); margin-left:-3.5rem; background:var(--akzent); border-radius:var(--r); }
.handy{
  position:relative; width:min(19.5rem,100%); padding:.7rem; background:var(--invert-bg);
  border:1px solid var(--line-2); border-radius:2.6rem;   /* Geraeteform: ein Handy ist rund, Ausnahme von der Kanten-Regel */
}
.handy__screen{ overflow:hidden; background:var(--surface); color:var(--fg); border-radius:2rem; padding-bottom:1.2rem; }   /* Geraeteform */
.handy__notch{ display:grid; place-items:center; height:1.8rem; }
.handy__notch span{ width:5.4rem; height:1.25rem; background:var(--invert-bg); border-radius:.7rem; }   /* Geraeteform */
.handy__kopf{ display:flex; align-items:center; gap:.5rem; padding:.4rem 1.1rem .6rem; border-bottom:1px solid var(--line); }
.handy__kopf img{ width:1.6rem; height:auto; }
.handy__kopf b{ font-family:var(--fd); font-size:.95rem; flex:1; }
.handy__burger{ position:relative; width:1.15rem; height:.75rem; border-top:2px solid var(--fg); border-bottom:2px solid var(--fg); }
.handy__burger::after{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--fg); }
[data-theme="dark"] .handy__kopf img{ filter:invert(1); }
.handy__inhalt{ display:grid; gap:.85rem; padding:.9rem 1rem 0; }
.handy__titel{ font-family:var(--fd); font-weight:600; font-size:1.2rem; line-height:1.2; }
.handy .plan__label{ font-size:.74rem; color:var(--fg-2); margin-bottom:.35rem; }
.handy .pc-grid{ gap:.32rem; }
.handy .pc{ min-height:2.15rem; padding:.28rem .3rem; font-size:.72rem; }
.handy .pc-grid--auto .pc{ padding:.28rem .55rem; }
.handy .wo{ --wo-h:2.3rem; }
.handy .wo__tag b{ font-size:.62rem; }
.handy .wo__legende{ font-size:.66rem; margin-top:.3rem; }
.handy__senden{ width:100%; margin-top:.2rem; }
.handy__hinweis{ position:relative; font-size:.92rem; color:var(--fg-2); text-align:center; }
@media (max-width: 960px){ .handy-grid{ grid-template-columns:1fr; } }

/* ---------- Dunkler Block: Fotokomposition mit versetzter Akzentflaeche, Chips neben dem Foto ---------- */
.fk{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.fk__bild{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,13.5rem); gap:1.4rem; align-items:end; }
.fk__foto{ position:relative; padding:0 clamp(1rem,2.5vw,1.8rem) clamp(1rem,2.5vw,1.8rem) 0; }
.fk__flaeche{ position:absolute; left:clamp(1rem,2.5vw,1.8rem); top:clamp(1rem,2.5vw,1.8rem); right:0; bottom:0; background:var(--akzent); border-radius:var(--r-lg); }
.fk__foto figure{ position:relative; border-radius:var(--r-lg); overflow:hidden; }
.fk__foto img{ width:100%; aspect-ratio:4 / 5; object-fit:cover; }
.fk__chips{ list-style:none; padding:0 0 clamp(1rem,2.5vw,1.8rem); display:grid; gap:.6rem; }
.fk__chips li{
  display:grid; grid-template-columns:1.1rem minmax(0,1fr); gap:.6rem; align-items:start; padding:.75rem .9rem;
  border:1px solid var(--invert-line); border-left:4px solid var(--akzent); border-radius:var(--r-btn);
  background:color-mix(in srgb, var(--invert-fg) 5%, transparent); color:var(--invert-fg); font-size:.93rem; font-weight:500; line-height:1.35;
}
.fk__chips svg{ width:1.05rem; height:1.05rem; margin-top:.12rem; color:var(--akzent); }
.fk__txt .h-sec{ margin-bottom:1rem; }
.fk__txt .lead + .lead{ margin-top:1rem; }
.link-arrow--hell{ color:var(--invert-fg); }
@media (max-width: 960px){ .fk{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .fk__bild{ grid-template-columns:1fr; } .fk__chips{ padding:0; } }

/* ---------- Einsatzgebiet: schematische Ortsgrafik, Elz als einziger Kreis ---------- */
.eg{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.eg__txt .h-sec{ margin:.6rem 0 1rem; }
.eg__txt p + p{ margin-top:1rem; }
.eg__txt p:not(.lead){ color:var(--fg-2); max-width:56ch; }
.eg__karte{ padding:clamp(.8rem,2vw,1.4rem); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2); }
.eg__svg{ width:100%; height:auto; font-family:var(--fb); }
.eg__lahn{ fill:none; stroke:var(--akzent); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; opacity:.6; }
.eg__fluss{ font-size:15px; font-weight:600; letter-spacing:.08em; fill:var(--akzent-text); }
.eg__ort rect{ fill:var(--fg); }
.eg__ort text{ font-size:17px; font-weight:500; fill:var(--fg); }
.eg__elz circle{ fill:var(--akzent); stroke:var(--fg); stroke-width:3; }   /* einziger echter Kreis: Ortspunkt Elz (DESIGN.md Shape) */
.eg__elz-name{ font-family:var(--fd); font-size:24px; font-weight:600; fill:var(--fg); }
.eg__elz-sub{ font-size:15px; fill:var(--fg-2); }
.eg__nord path{ fill:none; stroke:var(--fg-2); stroke-width:2; stroke-linejoin:round; }
.eg__nord text{ font-size:14px; font-weight:600; fill:var(--fg-2); }
@media (max-width: 900px){ .eg{ grid-template-columns:1fr; } }

/* ---------- Brotkrumen ---------- */
.crumbs{ padding-top:clamp(1.4rem,3vw,2rem); font-size:.9rem; color:var(--fg-2); }
.crumbs ol{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.3rem .5rem; }
.crumbs li{ display:inline-flex; align-items:center; gap:.5rem; }
.crumbs li + li::before{ content:""; width:.38rem; height:.38rem; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); opacity:.6; }
.crumbs a{ color:var(--fg-2); border-bottom:1px solid var(--line-2); }
.crumbs a:hover{ color:var(--fg); border-color:var(--akzent); }
.crumbs [aria-current]{ color:var(--fg); font-weight:500; }
.crumbs + .section{ padding-top:clamp(1.6rem,3vw,2.4rem); }

/* Text-Hero der Unterseiten: Leistung und Ort in einer Zeile, max 2 Zeilen */
.text-hero{ max-width:72rem; }
.text-hero .display{ font-size:clamp(2.1rem,3.6vw,3.2rem); line-height:1.05; }
.text-hero .lead{ max-width:44rem; }
.tel-inline{ color:var(--fg); font-weight:600; border-bottom:2px solid var(--akzent); white-space:nowrap; }

/* ---------- Ablauf ohne Zaehler: Titel links, Text rechts, Hairlines ---------- */
.steps--plain{ list-style:none; padding:0; counter-reset:none; }
.steps--plain .step{ grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:.5rem 2.5rem; padding:1.5rem 0; align-items:baseline; }
.steps--plain .step::before{ content:none; }
.steps--plain .step h3{ font-size:clamp(1.25rem,2.1vw,1.6rem); margin:0; }
@media (max-width: 760px){ .steps--plain .step{ grid-template-columns:1fr; } }

/* ---------- Bento Umfang: 8 hoch + 4 + 4, Textkachel dunkel mit Akzentkante ---------- */
.tile--text{ border-top:4px solid var(--akzent); }
.tile--text .tile__txt{ text-shadow:none; }
.tile--text .tile__txt h3{ font-size:clamp(1.3rem,2vw,1.6rem); }
.tile__txt p{ color:var(--weiss); }
.tile::after{ background:linear-gradient(180deg, color-mix(in srgb, var(--invert-bg) 0%, transparent) 32%, color-mix(in srgb, var(--invert-bg) 84%, transparent) 100%); }
.bento{ grid-auto-rows:minmax(240px,auto); }
.ortsabsatz{ margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line); color:var(--fg-2); }

/* ---------- Rechner-Einstieg (Leistungsseiten) ---------- */
.rk{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); grid-template-areas:"kopf fragen" "plan fragen"; gap:1.8rem clamp(2rem,5vw,4.5rem); align-items:start; }
.rk__kopf{ grid-area:kopf; }
.rk__kopf .h-sec{ margin:.6rem 0 1rem; }
.rk__plan{ grid-area:plan; display:grid; gap:1rem; padding:clamp(1.2rem,2.5vw,1.6rem); border:1px solid var(--line-2); border-top:4px solid var(--akzent); border-radius:var(--r-lg); background:var(--surface); }
.rk__plan .btn{ justify-self:start; }
.rk__fest{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .8rem; }
.rk__fest span{ font-size:.85rem; font-weight:600; color:var(--fg-2); }
.rk__fest b{ font-family:var(--fd); font-size:1.15rem; letter-spacing:-.015em; }
.rk__fragen{ grid-area:fragen; display:grid; gap:1.4rem; padding:clamp(1.2rem,3vw,2rem); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
@media (max-width: 900px){ .rk{ grid-template-columns:1fr; grid-template-areas:"kopf" "fragen" "plan"; } }

/* ---------- Grosser Rechner (kontakt.html) ---------- */
.rg{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); grid-template-areas:"fragen plan" "form kontakt"; gap:clamp(2.2rem,4vw,3.5rem); align-items:start; }
.rg__fragen{ grid-area:fragen; display:grid; gap:2.2rem; }
.rg__plan{ grid-area:plan; align-self:stretch; }
.rg__form{ grid-area:form; }
.rg__kontakt{ grid-area:kontakt; }
.rg__kontakt-in{ position:relative; z-index:1; }
.frage{ padding-top:1.4rem; border-top:1px solid var(--line-2); }
.frage__h{ font-size:clamp(1.3rem,2.2vw,1.75rem); margin-bottom:1rem; }
.frage .plan__gruppe + .plan__gruppe{ margin-top:1.3rem; }
.pk-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.pk{
  display:grid; align-content:start; padding:0; overflow:hidden; text-align:left; cursor:pointer;
  border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--surface); color:var(--fg);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);  /* motion: state */
}
.pk img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; }
.pk span{ padding:.6rem .75rem .7rem; font-weight:600; font-size:.95rem; line-height:1.25; hyphens:manual; overflow-wrap:break-word; }
.pk[aria-pressed="true"]{ border-color:var(--akzent); background:color-mix(in srgb, var(--akzent) 24%, var(--surface)); outline:3px solid var(--akzent); outline-offset:-3px; }
@media (hover: hover) and (pointer: fine){ .pk:hover{ border-color:var(--akzent-text); } }
.pc-grid--gross .pc{ min-height:3.2rem; font-size:.98rem; }
.pp{ position:sticky; top:calc(var(--head) + 1.2rem); padding:clamp(1.3rem,3vw,2rem); border:1px solid var(--line-2); border-top:4px solid var(--akzent); border-radius:var(--r-lg); background:var(--surface); }
.pp__titel{ font-size:1.5rem; margin-bottom:1rem; }
.pp__leer{ color:var(--fg-2); }
.pp__inhalt[hidden],.pp__leer[hidden]{ display:none; }
.pp__label{ margin-bottom:.6rem; font-size:.85rem; font-weight:600; color:var(--fg-2); }
.pp__satz{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line); font-family:var(--fd); font-size:clamp(1.1rem,1.8vw,1.35rem); line-height:1.35; letter-spacing:-.015em; }
.pp__hinweis{ margin-top:.8rem; font-size:.95rem; color:var(--fg-2); }
.pp__aktionen{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.pp__status{ min-height:1.3em; margin-top:.6rem; font-size:.92rem; font-weight:600; color:var(--akzent-text); }
@media (max-width: 960px){
  .rg{ grid-template-columns:1fr; grid-template-areas:"fragen" "plan" "form" "kontakt"; }
  .pp{ position:static; }
}
@media (max-width: 640px){ .pk-grid,.rg .pc-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Formular-Zustaende */
.form-hinweis{ padding:.8rem 1rem; border-left:4px solid var(--akzent); border-radius:var(--r); background:var(--bg-2); font-size:.95rem; color:var(--fg-2); }
.form-pflicht,.form-err{ padding:.75rem 1rem; border-left:4px solid var(--fg); border-radius:var(--r); background:var(--bg-2); font-weight:600; color:var(--fg); }
.form-hinweis[hidden],.form-pflicht[hidden],.form-err[hidden]{ display:none; }
.form.is-geprueft :is(input,textarea):invalid{ border-color:var(--akzent-text); border-width:2px; }
.field textarea::placeholder,.field input::placeholder{ color:var(--fg-2); opacity:.8; }

/* Kontaktkarte und Karte */
.contact-card .h-sub{ margin-bottom:.2rem; }
.contact-card a{ color:var(--fg); border-bottom:1px solid var(--line-2); }
.map{ margin-top:1.2rem; }
.map a{ color:var(--fg); border-bottom:1px solid var(--akzent); }

/* Stellenangebot: eine Hairline-Zeile */
.row--stelle{ grid-template-columns:minmax(0,1fr) auto; }
.row--stelle p{ max-width:72ch; color:var(--fg); }
@media (max-width: 760px){ .row--stelle{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.foot-h{ margin-bottom:.9rem; font-family:var(--fd); font-weight:600; font-size:.95rem; letter-spacing:.01em; color:var(--invert-fg); }
.foot-h--zwei{ margin-top:1.6rem; }
.foot-ort{ margin-top:.8rem; max-width:36ch; }
.foot-grid img.foot-logo{ height:44px; }


/* ==========================================================================
   Upgrade 28.10.2026: Live-Status, Vorher/Nachher, Vertrauen, Bewertungs-Platzhalter, Karte mit Ring,
   Ortslinks, Handy-Schnellleiste. Gleiche Tokens, gleiche Kanten (4 bis 6px), gleiche Easing-Kurve.
   ========================================================================== */

/* Live-Erreichbarkeit (aus Google-Zeiten), im Hero statt Eyebrow */
.hero__status{
  display:inline-flex; align-items:center; gap:.7rem; max-width:100%; margin:0 0 .5rem; padding:.5rem .9rem;
  border:1px solid rgba(255,255,255,.3); border-left:4px solid var(--akzent); border-radius:var(--r-btn);
  background:rgba(7,14,19,.62); color:var(--weiss); font-size:.93rem; font-weight:500; line-height:1.35;
}
.hero__status[data-state="zu"]{ border-left-color:var(--zu); }
.hero__dot{ position:relative; flex:none; width:.6rem; height:.6rem; border-radius:2px; background:var(--akzent); }
[data-state="zu"] .hero__dot{ background:var(--zu); }
.hero__dot::after{ content:""; position:absolute; inset:0; border-radius:2px; background:inherit; animation:status-puls 2.4s var(--ease) infinite; }
[data-state="zu"] .hero__dot::after{ animation:none; }
/* motion: state. Ein ruhiger Puls am Statuspunkt zeigt, dass die Angabe live ist */
@keyframes status-puls{ from{ opacity:.55; transform:scale(1) } to{ opacity:0; transform:scale(2.8) } }
html[data-motion="reduce"] .hero__dot::after{ animation-duration:6s; animation-iteration-count:1; }
.hero__status .fn-ref a{ color:inherit; opacity:.75; border-bottom:0; }
.fn-ref{ font-size:.7em; margin-left:.1rem; }
.status-zeile{ display:inline-flex; align-items:center; gap:.55rem; color:var(--fg); }
.status-zeile .fn-ref a{ color:var(--fg-3); }
.fussnote{ margin-top:.9rem; font-size:.82rem; color:var(--fg-2); max-width:70ch; }
.contact-card .fussnote{ margin-top:.4rem; }

/* Vorher/Nachher-Schieberegler */
.vn{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.vn__txt .lead{ margin-top:.9rem; }
.vn__tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.vn__tab{ font:inherit; font-weight:600; font-size:.95rem; padding:.6rem 1rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn);
  background:var(--surface); color:var(--fg); cursor:pointer; transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.vn__tab[aria-pressed="true"]{ background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent); }
@media (hover: hover) and (pointer: fine){ .vn__tab:hover{ border-color:var(--akzent); } }
.vn__leistung{ margin-top:1.4rem; }
.vn__hinweis{ margin-top:1.2rem; font-size:.85rem; color:var(--fg-2); max-width:44ch; }
.vn__buehne{ position:relative; }
.vn__buehne::before{ content:""; position:absolute; inset:auto -1.1rem -1.1rem auto; width:62%; height:72%; background:var(--akzent); opacity:.28; border-radius:var(--r-lg); }
.vn__ba{ --x:50%; position:relative; overflow:hidden; aspect-ratio:16/10; border-radius:var(--r-lg); background:var(--bg-3); user-select:none; }
.vn__ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vn__nach{ clip-path:inset(0 0 0 var(--x)); }
.vn__griff{ position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:var(--weiss); pointer-events:none; }
.vn__griff span{ position:absolute; top:50%; left:50%; width:2.6rem; height:2.6rem; transform:translate(-50%,-50%); border-radius:var(--r-btn);
  background:var(--akzent); border:2px solid var(--weiss); }
.vn__griff span::before,.vn__griff span::after{ content:""; position:absolute; top:50%; width:.5rem; height:.5rem; border-top:2px solid var(--auf-akzent); border-left:2px solid var(--auf-akzent); }
.vn__griff span::before{ left:.55rem; transform:translateY(-50%) rotate(-45deg); }
.vn__griff span::after{ right:.55rem; transform:translateY(-50%) rotate(135deg); }
.vn__label{ position:absolute; top:1rem; padding:.3rem .65rem; border-radius:var(--r-btn); background:rgba(7,14,19,.68); color:var(--weiss); font-size:.85rem; font-weight:600; pointer-events:none; }
.vn__label--l{ left:1rem; } .vn__label--r{ right:1rem; }
.vn__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; -webkit-appearance:none; appearance:none; }
.vn__ba:has(.vn__range:focus-visible){ outline:3px solid var(--akzent); outline-offset:3px; }
.vn__tag{ position:absolute; left:1rem; bottom:1rem; padding:.2rem .55rem; border-radius:2px; background:var(--surface); border:1px solid var(--line); color:var(--fg-2); font-size:.78rem; font-weight:600; pointer-events:none; }
.vn__ba.is-wechsel img{ animation:vn-ein .5s var(--ease) both; }
/* motion: feedback. Neues Bildpaar blendet ein, damit der Wechsel sichtbar wird */
@keyframes vn-ein{ from{ opacity:0 } to{ opacity:1 } }
.js .vn__ba:not(.is-bewegt) .vn__griff span{ animation:vn-hinweis 1.6s var(--ease) 1.2s 2 both; }
/* motion: explanation. Der Griff wippt zweimal kurz und zeigt, dass man ihn ziehen kann */
@keyframes vn-hinweis{ 0%,100%{ transform:translate(-50%,-50%) } 30%{ transform:translate(-80%,-50%) } 65%{ transform:translate(-20%,-50%) } }
html[data-motion="reduce"] .vn__ba img, html[data-motion="reduce"] .vn__griff span{ animation-duration:.01s; }
@media (max-width: 900px){ .vn{ grid-template-columns:1fr; } .vn__buehne::before{ inset:auto -.6rem -.6rem auto; } }

/* Vertrauen: Monogramm-Karte der Inhaberin plus belegte Fakten auf Hairlines */
.vt{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.vt__karte{ padding:clamp(1.5rem,3vw,2.2rem); border:1px solid var(--line); border-top:4px solid var(--akzent); border-radius:var(--r-lg); background:var(--surface); }
.vt__mono{ display:grid; place-items:center; width:5.2rem; height:5.2rem; border-radius:var(--r); background:var(--invert-bg); color:var(--akzent);
  font-family:var(--fd); font-size:2rem; font-weight:600; letter-spacing:-.02em; }
.vt__name{ margin-top:1.3rem; font-family:var(--fd); font-size:1.45rem; font-weight:600; letter-spacing:-.01em; }
.vt__rolle{ color:var(--fg-2); }
.vt__adr{ margin:.8rem 0 1.4rem; color:var(--fg-2); font-size:.95rem; }
.vt__txt .lead{ margin-top:.9rem; }
.vt__liste{ list-style:none; padding:0; margin-top:1.8rem; border-top:1px solid var(--line); }
.vt__zeile{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:1.05rem 0; border-bottom:1px solid var(--line); }
.vt__zeile svg{ width:1.35rem; height:1.35rem; color:var(--akzent-text); margin-top:.15rem; }
.vt__zeile b{ display:block; font-family:var(--fd); font-weight:600; }
.vt__zeile span{ color:var(--fg-2); font-size:.95rem; }
@media (max-width: 900px){ .vt{ grid-template-columns:1fr; } }

/* Bewertungen: ehrlicher Platzhalter, keine Sterne */
.bp{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.bp__txt .lead{ margin-top:.9rem; }
.bp__schritte{ list-style:none; padding:0; margin-top:1.6rem; border-top:1px solid var(--line); }
.bp__schritt{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.bp__schritt b{ font-family:var(--fd); font-weight:600; }
.bp__schritt span{ color:var(--fg-2); font-size:.95rem; }
.bp__profil{ position:relative; padding:clamp(1.3rem,3vw,1.9rem); border:1.5px dashed var(--line-2); border-radius:var(--r-lg); background:var(--bg-2); }
.bp__demo{ position:absolute; top:-.8rem; right:1rem; padding:.15rem .6rem; border-radius:2px; background:var(--invert-bg); color:var(--invert-fg); font-size:.78rem; font-weight:600; }
.bp__kopf{ display:flex; align-items:center; gap:.9rem; }
.bp__kopf img{ width:2.8rem; height:auto; }
.bp__kopf b{ display:block; font-family:var(--fd); }
.bp__kopf span{ color:var(--fg-2); font-size:.9rem; }
.bp__stand{ margin-top:1rem; color:var(--fg-2); font-size:.92rem; }
.bp__null{ font-family:var(--fd); font-weight:600; font-size:1.6rem; color:var(--fg); margin-right:.3rem; }
.bp__leer-liste{ display:grid; gap:.7rem; margin-top:1rem; }
.bp__leer{ padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.bp__zeile{ display:block; height:.5rem; margin-bottom:.45rem; border-radius:2px; background:var(--bg-3); }
.bp__zeile--k{ width:28%; } .bp__zeile--m{ width:62%; }
.bp__leer p{ font-size:.82rem; color:var(--fg-3); }
.bp__schild{ display:flex; align-items:center; gap:1rem; margin-top:1.2rem; padding:.9rem 1rem; border-radius:var(--r); background:var(--invert-bg); color:var(--invert-fg); }
.bp__qr{ flex:none; width:3.4rem; height:3.4rem; border-radius:2px; background:
  linear-gradient(90deg, var(--invert-bg) 50%, transparent 0) 0 0/ .85rem .85rem, linear-gradient(var(--invert-bg) 50%, var(--weiss) 0) 0 0/ .85rem .85rem;
  border:4px solid var(--weiss); }
.bp__schild-txt{ font-size:.88rem; color:var(--invert-fg-2); }
.bp__schild-txt b{ display:block; color:var(--invert-fg); font-family:var(--fd); }
@media (max-width: 900px){ .bp{ grid-template-columns:1fr; } .bp__schritt{ grid-template-columns:1fr; gap:.2rem; } }

/* Karte: Ring um Elz, belegte und angefragte Orte */
.eg__karte--gross{ max-width:860px; margin-inline:auto; }
.eg__flaeche{ fill:var(--akzent); opacity:.1; }
.eg__ring{ fill:none; stroke:var(--akzent-text); stroke-width:2; stroke-dasharray:7 7; transform-box:fill-box; transform-origin:center; }
.eg__ringtext{ font-size:15px; font-weight:600; fill:var(--akzent-text); }
.eg__ort--beleg rect{ fill:var(--akzent-text); }
.eg__ort--beleg text{ font-weight:600; }
.eg__ort--anfrage rect{ fill:var(--surface); stroke:var(--fg-3); stroke-width:2; }
.eg__ort--anfrage text{ fill:var(--fg-2); font-size:16px; }
.eg__ort text{ paint-order:stroke; stroke:var(--bg-2); stroke-width:5px; stroke-linejoin:round; }
.eg__ort-sub{ font-size:12.5px !important; fill:var(--fg-3) !important; font-weight:500; }
.eg__ort--markiert rect{ fill:var(--akzent); stroke:var(--fg); stroke-width:2; }
.eg__elz--markiert .eg__elz-name{ fill:var(--akzent-text); }
.eg__puls{ fill:var(--akzent) !important; stroke:none !important; opacity:.35; transform-box:fill-box; transform-origin:center; animation:eg-puls 2.8s var(--ease) infinite; }
/* motion: hierarchy. Der Puls am Sitz Elz zeigt den Mittelpunkt des Einsatzgebiets */
@keyframes eg-puls{ from{ transform:scale(1); opacity:.4 } to{ transform:scale(3); opacity:0 } }
html[data-motion="reduce"] .eg__puls{ animation-duration:6s; animation-iteration-count:1; }
.eg__svg a:focus-visible{ outline:none; }
.eg__svg a:focus-visible text, .eg__svg a:hover text{ text-decoration:underline; }
.js .eg__karte[data-reveal] .eg__ring{ opacity:0; transform:scale(.86); transition:opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .eg__karte.is-in .eg__ring{ opacity:1; transform:none; }
.eg__legende{ display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:.8rem; font-size:.88rem; color:var(--fg-2); }
.eg__legende span{ display:inline-flex; align-items:center; gap:.45rem; }
.lg{ display:inline-block; width:.8rem; height:.8rem; border-radius:2px; }
.lg--sitz{ background:var(--akzent); border:2px solid var(--fg); }
.lg--beleg{ background:var(--akzent-text); }
.lg--anfrage{ background:var(--surface); border:2px solid var(--fg-3); }
.ort__weg{ display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-weight:500; }
.ort__weg svg{ width:1.1rem; height:1.1rem; color:var(--akzent-text); }

/* Ortslinks als Chips */
.ortlinks{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.ortlinks .muted{ margin-top:.7rem; }
.ortchips{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.eg__txt .ortchips{ margin-top:1.5rem; }
.ortchip{ display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .85rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn);
  background:var(--surface); color:var(--fg); font-weight:500; font-size:.95rem; transition:border-color .2s var(--ease), color .2s var(--ease); }
.ortchip svg{ width:1rem; height:1rem; color:var(--akzent-text); transition:transform .2s var(--ease); }
.ortchip--still{ border-style:dashed; color:var(--fg-2); }
@media (hover: hover) and (pointer: fine){ a.ortchip:hover{ border-color:var(--akzent); color:var(--akzent-text); } a.ortchip:hover svg{ transform:translateY(-2px); } }
@media (max-width: 860px){ .ortlinks{ grid-template-columns:1fr; } }
.mt-3{ margin-top:clamp(2rem,4vw,3rem); }

/* Zwei Untermenues im Kopf */
.nav__grp + .nav__grp{ margin-left:0; }

/* Handy-Schnellleiste (Anrufen, E-Mail, Anfragen) */
.mob-leiste{ display:none; }
@media (max-width: 700px){
  .mob-leiste{ position:fixed; z-index:60; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr 1.25fr;
    padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); gap:.5rem; background:var(--surface);
    border-top:1px solid var(--line); }
  .mob-leiste a{ display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:46px; border:1.5px solid var(--line-2);
    border-radius:var(--r-btn); color:var(--fg); font-weight:600; font-size:.95rem; }
  .mob-leiste svg{ width:1.15rem; height:1.15rem; color:var(--akzent-text); }
  .mob-leiste .mob-leiste__cta{ background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent); }
  .mob-leiste .mob-leiste__cta svg{ color:var(--auf-akzent); }
  body:has(.mob-leiste){ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
}

/* Langes Wort "Gebäudereinigung" im Hero: auf schmalen Handys kleiner setzen statt abschneiden */
@media (max-width: 560px){ .hero__copy .display{ font-size:clamp(1.9rem, 8.4vw, 2.6rem); } }

/* ==========================================================================
   Korrekturrunde 28.10.2026 (Trust-/Design-Review): heller Hero, asymmetrische Vertrauensleiste,
   Kontaktleiste oben auf kontakt.html, Knoepfe im ersten Bildschirm der Leistungsseiten.
   ========================================================================== */
.hero--hell{ color:var(--fg); align-items:center; }
.hero--hell .hero__bg::after{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 44%,
                    color-mix(in srgb, var(--bg) 45%, transparent) 64%, color-mix(in srgb, var(--bg) 0%, transparent) 82%);
}
.hero--hell .hero__zoom img{ object-position:70% 50%; }
.hero--hell .hero__copy{ max-width:54rem; }
.hero--hell .hero__copy .lead{ max-width:36rem; }
.hero--hell .hero__copy .display{ color:var(--fg); text-shadow:none; }
.hero--hell .hero__copy .lead{ color:var(--fg-2); text-shadow:none; }
.hero--hell .hero__status{ background:var(--surface); color:var(--fg); border-color:var(--line-2); border-left-color:var(--akzent); }
.hero--hell .hero__status[data-state="zu"]{ border-left-color:var(--zu); }
@media (max-width: 900px){
  .hero--hell{ align-items:flex-end; }
  .hero--hell .hero__bg::after{
    background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 10%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 38%,
                                color-mix(in srgb, var(--bg) 95%, transparent) 62%, var(--bg) 100%);
  }
  .hero--hell .hero__zoom img{ object-position:78% 30%; }
}
.facts--asym{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); }
.facts--asym .fact:first-child b{ font-size:clamp(1.3rem,2vw,1.65rem); }
@media (max-width: 900px){ .facts--asym{ grid-template-columns:1fr 1fr; } .facts--asym .fact:first-child{ grid-column:1 / -1; border-right:0; } .facts--asym .fact:nth-child(2){ padding-left:0; border-right:1px solid var(--line); } .facts--asym .fact:nth-child(3){ padding-left:clamp(1rem,2vw,1.6rem); } }
@media (max-width: 560px){ .facts--asym{ grid-template-columns:1fr; } .facts--asym .fact:nth-child(2){ border-right:0; } .facts--asym .fact:nth-child(3){ padding-left:0; } }
.text-hero .hero__cta{ margin-top:1.5rem; }
.kontakt-leiste{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.6rem; margin-top:1.4rem; padding:1rem 1.2rem;
  border:1px solid var(--line); border-left:4px solid var(--akzent); border-radius:var(--r); background:var(--bg-2); }
.kontakt-leiste a{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--fg); }
.kontakt-leiste svg{ width:1.1rem; height:1.1rem; color:var(--akzent-text); }
.status-zeile .hero__dot{ flex:none; }


/* ==========================================================================
   Redesign 03.11.2026 "Sauberkeit sichtbar machen": Hell/Dunkel (Nachtschicht), Wisch-Hero, Kennzeilen,
   Objekt-Grundriss, Leitsatz mit Signet, Bewertungsschild, Reinigungsplan-Konfigurator.
   Gleiche Tokens, Kanten 4 bis 6 px, Easing var(--ease), Animation nur transform und opacity.
   ========================================================================== */

/* ---------- Line-Icons (eigene, Stroke) ---------- */
.li{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Hell/Dunkel-Schalter ---------- */
.nachtschalter{ position:relative; display:inline-grid; place-items:center; flex:none; width:2.65rem; height:2.65rem; padding:0;
  border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:transparent; color:var(--fg); cursor:pointer; }
.nachtschalter svg{ grid-area:1 / 1; width:1.3rem; height:1.3rem; transition:transform .5s var(--ease), opacity .3s var(--ease); }  /* motion: state */
.nachtschalter__sonne{ opacity:0; transform:rotate(-90deg) scale(.5); }
[data-theme="dark"] .nachtschalter__sonne{ opacity:1; transform:none; color:var(--akzent); }
[data-theme="dark"] .nachtschalter__mond{ opacity:0; transform:rotate(90deg) scale(.5); }
@media (hover: hover) and (pointer: fine){ .nachtschalter:hover{ border-color:var(--akzent); } }
.brand__nacht{ display:none; }
[data-theme="dark"] .brand__tag{ display:none; }
[data-theme="dark"] .brand__nacht{ display:block; }
@media (max-width: 900px){ .nachtschalter{ width:2.4rem; height:2.4rem; } }

/* ---------- Glanz-Sweep: Knoepfe beim Hover, Glasflaechen einmal beim Erscheinen ---------- */
.btn--primary{ position:relative; overflow:hidden; isolation:isolate; }
.btn--primary::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .75s var(--ease); }  /* motion: feedback */
@media (hover: hover) and (pointer: fine){ .btn--primary:hover::after{ transform:translateX(120%); } }
.btn--schritt{ background:var(--fg); color:var(--bg); }
@media (hover: hover) and (pointer: fine){ .btn--schritt:hover{ transform:translateY(-2px); } }
.btn--schritt svg{ transition:transform .25s var(--ease); }
.glanz{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.glanz::before{ content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38) 50%, transparent);
  transform:translateX(-170%) skewX(-14deg); }
/* motion: story. Ein Lichtreflex zieht einmal ueber das Glas, wie nach dem Abziehen */
@keyframes glanz-zug{ from{ transform:translateX(-170%) skewX(-14deg) } to{ transform:translateX(330%) skewX(-14deg) } }
.is-in .glanz::before, .hero--wisch.is-sauber .glanz--hero::before, .kf__ok.is-zeigen .glanz--ok::before{ animation:glanz-zug 1.7s var(--ease) .35s both; }
.plan-karte.is-neu .glanz--karte::before{ animation:glanz-zug 1.1s var(--ease) both; }
html[data-motion="reduce"] .glanz::before{ animation-duration:.01s !important; }

/* ---------- Masken-Reveal fuer Fotos: eine Hellblau-Flaeche zieht sich zurueck ---------- */
.js .split figure[data-reveal], .js .fk__bild[data-reveal] figure, .js .vn__buehne[data-reveal] .vn__ba{ position:relative; }
.js .split figure[data-reveal]::after, .js .fk__bild[data-reveal] figure::after, .js .vn__buehne[data-reveal] .vn__ba::after{
  content:""; position:absolute; inset:0; z-index:3; background:var(--akzent); transform-origin:100% 50%;
  transition:transform 1.05s var(--ease) .12s; pointer-events:none; }  /* motion: hierarchy */
.js .split figure.is-in::after, .js .fk__bild.is-in figure::after, .js .vn__buehne.is-in .vn__ba::after{ transform:scaleX(0); }
html.js[data-motion="reduce"] .split figure[data-reveal]::after, html.js[data-motion="reduce"] .fk__bild[data-reveal] figure::after,
html.js[data-motion="reduce"] .vn__buehne[data-reveal] .vn__ba::after{ transition-duration:.3s; transition-delay:0s; }

/* ---------- Hero "Zum Putzen wischen" ---------- */
.hero--wisch{ touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.hero--wisch .hero__copy{ max-width:66rem; }
.hero--wisch .display{ font-size:clamp(2.7rem, 6.4vw, 5.5rem); letter-spacing:-.048em; line-height:.96; }
.hero--wisch .lead{ font-size:clamp(1.08rem,1.45vw,1.3rem); }
.wisch{ position:absolute; inset:0; width:100%; height:100%; transition:opacity 1.1s var(--ease); }  /* motion: story */
.hero--wisch.is-sauber .wisch{ opacity:0; }
[data-theme="dark"] .hero--wisch .hero__zoom img{ filter:brightness(.62) saturate(.85); }
.wisch-ui{ position:absolute; z-index:3; right:var(--gutter); bottom:calc(clamp(1.2rem,3vw,2.2rem) + 2.5rem); display:grid; justify-items:end; align-items:end; gap:.5rem; max-width:18rem; }
.wisch-ui__hinweis, .wisch-ui__chip{ grid-area:1 / 1; }
.wisch-ui__btn{ grid-area:2 / 1; }
.wisch-ui__hinweis{ padding:.55rem .85rem; border:1px solid var(--line); border-left:4px solid var(--akzent); border-radius:var(--r-btn);
  background:var(--surface); color:var(--fg); font-size:.88rem; font-weight:500; line-height:1.35; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.wisch-ui__btn{ padding:.62rem 1.05rem; border:0; border-radius:var(--r-btn); background:var(--fg); color:var(--bg); font-weight:600; font-size:.92rem; cursor:pointer;
  transition:transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine){ .wisch-ui__btn:hover{ transform:translateY(-2px); } }
.wisch-ui__chip{ padding:.6rem 1rem; border-radius:var(--r-btn); background:var(--akzent); color:var(--auf-akzent); font-family:var(--fd); font-weight:600; font-size:1.08rem;
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .5s var(--ease), transform .6s var(--ease); }  /* motion: feedback */
.hero--wisch.is-sauber .wisch-ui__chip{ opacity:1; transform:none; }
.hero--wisch.is-sauber .wisch-ui__hinweis{ opacity:0; transform:translateY(-6px); }
.wisch-cursor{ position:absolute; left:0; top:0; z-index:3; width:6.4rem; height:3.2rem; margin:-.45rem 0 0 -3.2rem; pointer-events:none; opacity:0; transition:opacity .25s var(--ease); }
.wisch-cursor span{ position:absolute; left:0; right:0; top:0; height:.8rem; border:2px solid var(--weiss); border-radius:3px; background:var(--akzent); }
.wisch-cursor::after{ content:""; position:absolute; left:50%; top:.8rem; width:.55rem; height:2.4rem; margin-left:-.275rem; border-radius:2px; background:var(--invert-bg); border:2px solid var(--weiss); border-top:0; }
.hero--wisch.is-maus{ cursor:none; }
.hero--wisch.is-maus a, .hero--wisch.is-maus button{ cursor:pointer; }
.hero--wisch.is-maus .wisch-cursor, .hero--wisch.is-demo .wisch-cursor{ opacity:1; }
.hero--wisch.is-sauber .wisch-cursor, .wisch-cursor.is-ui{ opacity:0 !important; }
@media (max-width: 900px){
  .wisch-ui{ top:1rem; bottom:auto; max-width:15rem; }
  .wisch-ui__hinweis{ font-size:.82rem; }
  .hero--wisch .display{ font-size:clamp(2.1rem, 9vw, 3.4rem); }
  .hero--wisch .hero__inner{ padding-top:10rem; }
  .hero--wisch .hero__bg::after{
    background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 24%,
                                color-mix(in srgb, var(--bg) 88%, transparent) 46%, color-mix(in srgb, var(--bg) 96%, transparent) 64%, var(--bg) 100%);
  }
}

/* ---------- Kennzeilen (statt Zahlenkarten) ---------- */
.kz{ list-style:none; padding:0; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid var(--line); }
.kz__zeile{ position:relative; padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1rem,2vw,1.8rem) clamp(1.4rem,2.6vw,2.1rem) 0; }
.kz__zeile + .kz__zeile{ padding-left:clamp(1rem,2vw,1.8rem); border-left:1px solid var(--line); }
.kz__zeile::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--akzent); transform-origin:0 50%; transform:scaleX(.08);
  transition:transform 1.2s var(--ease) .2s; }  /* motion: hierarchy */
.kz__zeile.is-in::before{ transform:none; }
.kz__mask{ display:block; overflow:hidden; padding-bottom:.1em; }
.kz__mask b{ display:block; font-family:var(--fd); font-weight:600; font-size:clamp(1.15rem,1.75vw,1.6rem); hyphens:manual; letter-spacing:-.03em; line-height:1.1; }
.kz__zeile--1 .kz__mask b{ font-size:clamp(1.6rem,3vw,2.6rem); }
.js .kz__zeile[data-reveal] .kz__mask b{ transform:translateY(110%); transition:transform .9s var(--ease) .1s; }
.js .kz__zeile.is-in .kz__mask b{ transform:none; }
.kz__txt{ display:block; margin-top:.5rem; color:var(--fg-2); font-size:.96rem; max-width:34ch; }
@media (max-width: 860px){
  .kz{ grid-template-columns:1fr; }
  .kz__zeile, .kz__zeile + .kz__zeile{ padding:1.3rem 0; border-left:0; }
}

/* ---------- Objekt-Grundriss ---------- */
.gr{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"kopf kopf" "plan seite"; gap:clamp(1.6rem,3.5vw,3rem) clamp(2rem,4.5vw,4rem); align-items:start; }
.gr__kopf{ grid-area:kopf; max-width:46rem; }
.gr__kopf .lead{ margin-top:1rem; }
.gr__plan{ grid-area:plan; position:relative; padding:clamp(.8rem,2vw,1.4rem); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.gr__svg{ width:100%; height:auto; font-family:var(--fd); }
.gr__aussen{ fill:none; stroke:var(--fg); stroke-width:5; }
.gr__zone{ cursor:pointer; }
.gr__flaeche{ fill:var(--akzent); fill-opacity:0; stroke:var(--fg-3); stroke-width:1.5; }
@media (hover: hover) and (pointer: fine){ .gr__zone:hover .gr__flaeche{ fill-opacity:.14; } }
.gr__zone.is-aktiv .gr__flaeche{ fill-opacity:.32; stroke:var(--akzent-text); stroke-width:3; }
.gr__label{ font-size:15px; font-weight:600; fill:var(--fg); letter-spacing:-.01em; paint-order:stroke; stroke:var(--surface); stroke-width:5px; stroke-linejoin:round; }
.gr__zone.is-aktiv .gr__label{ fill:var(--fg); }
.gr__moebel rect{ fill:none; stroke:var(--fg-3); stroke-width:1.5; }
.gr__teppich{ fill:var(--akzent); fill-opacity:.12; stroke:var(--akzent-text); stroke-width:1.5; stroke-dasharray:6 5; }
.gr__stufen{ fill:none; stroke:var(--fg-2); stroke-width:2; }
.gr__schraffur{ fill:none; stroke:var(--fg-3); stroke-width:1.2; opacity:.7; }
.gr__glas{ fill:none; stroke:var(--akzent-text); stroke-width:5; stroke-dasharray:46 10; }
.gr__zone text, .gr__moebel, .gr__stufen, .gr__schraffur, .gr__teppich, .gr__glas{ pointer-events:none; }
.gr__cap{ margin-top:.6rem; font-size:.82rem; color:var(--fg-3); }
.gr__seite{ grid-area:seite; }
.gr__liste{ list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:1.2rem; border-top:1px solid var(--line); }
.gr__knopf{ display:flex; align-items:baseline; gap:.6rem; width:100%; padding:.75rem 0; border:0; border-bottom:1px solid var(--line); background:none;
  color:var(--fg-2); font-family:var(--fd); font-weight:600; font-size:1rem; letter-spacing:-.01em; text-align:left; cursor:pointer; position:relative; }
.gr__knopf::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--akzent); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease); }  /* motion: state */
.gr__knopf[aria-pressed="true"]{ color:var(--fg); }
.gr__knopf[aria-pressed="true"]::after{ transform:none; }
.gr__nr{ font-family:var(--fb); font-size:.78rem; font-weight:600; color:var(--akzent-text); }
@media (hover: hover) and (pointer: fine){ .gr__knopf:hover{ color:var(--fg); } }
.gr__tafel{ padding-top:1.4rem; }
.gr__tafel:not([hidden]){ animation:tafel-ein .45s var(--ease) both; }
/* motion: feedback. Die Tafel zum gewaehlten Bereich blendet kurz ein */
@keyframes tafel-ein{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.gr__tafel p{ margin-top:.6rem; color:var(--fg-2); }
.gr__tafel ul{ list-style:none; padding:0; margin:1rem 0 1.3rem; display:grid; gap:.45rem; }
.gr__tafel li{ display:flex; gap:.55rem; align-items:center; font-weight:500; }
.gr__tafel li svg{ width:1.05rem; height:1.05rem; color:var(--akzent-text); flex:none; }
html[data-motion="reduce"] .gr__tafel:not([hidden]){ animation-duration:.15s; }
@media (max-width: 960px){ .gr{ grid-template-columns:1fr; grid-template-areas:"kopf" "plan" "seite"; } }
@media (max-width: 480px){ .gr__label{ font-size:19px; } .gr__liste{ grid-template-columns:1fr; } }

/* ---------- Leitsatz mit Signet-Wasserzeichen ---------- */
.ls__signet{ position:absolute; z-index:0; left:auto; bottom:auto; right:clamp(-6rem,-4vw,-2rem); top:50%; width:clamp(16rem,34vw,30rem); transform:translateY(-50%); pointer-events:none; opacity:.08; }
.ls__signet img{ width:100%; height:auto; }
.ls__signet-nacht{ display:none; }
[data-theme="dark"] .ls__signet-tag{ display:none; }
[data-theme="dark"] .ls__signet-nacht{ display:block; }
[data-theme="dark"] .ls__signet{ opacity:.06; }
.ls{ position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(2rem,5vw,4.5rem); align-items:end; }
.ls__claim{ font-size:clamp(2.7rem,7vw,6.2rem); letter-spacing:-.05em; line-height:.98; }
.ls__claim .zl{ padding:.04em 0 .14em; margin:-.04em 0 -.14em; }
.ls__akzent{ position:relative; display:inline-block; color:var(--akzent-text); }
.ls__akzent::after{ content:""; position:absolute; left:0; right:0; bottom:.02em; height:.09em; background:var(--akzent); border-radius:2px; transform-origin:0 50%; transform:scaleX(0); transition:transform .9s var(--ease) .55s; }
.js .ls__claim[data-reveal] .zl > span{ transform:translateY(108%); transition:transform 1s var(--ease); }
.js .ls__claim[data-reveal] .zl:nth-child(2) > span{ transition-delay:.08s; }
.js .ls__claim[data-reveal] .zl:nth-child(3) > span{ transition-delay:.16s; }
.js .ls__claim.is-in .zl > span{ transform:none; }
.ls__claim.is-in .ls__akzent::after, html:not(.js) .ls__akzent::after{ transform:none; }
.js .ls__claim[data-reveal]{ transform:none; }
.ls__txt .lead{ margin-top:1.6rem; max-width:40rem; }
.ls__karte{ position:relative; }
@media (max-width: 900px){ .ls{ grid-template-columns:1fr; } .ls__signet{ top:2rem; transform:none; width:14rem; } }

/* ---------- Ihre erste Google-Bewertung: Schild-Idee ---------- */
.eb{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.eb__txt .lead{ margin-top:.9rem; }
.eb__buehne{ position:relative; display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:1.2rem; align-items:end; padding:clamp(1.4rem,3vw,2.4rem);
  border:1.5px dashed var(--line-2); border-radius:var(--r-lg);
  background:radial-gradient(ellipse 70% 60% at 30% 40%, var(--leuchten), transparent 70%), var(--surface); }
.schild{ position:relative; display:grid; justify-items:center; gap:.7rem; padding:1.1rem 1rem 1.3rem; border-radius:var(--r); background:var(--weiss); color:var(--auf-akzent);
  border:1px solid rgba(15,26,34,.12); transform:rotate(-3deg); transform-origin:50% 100%; }
.schild__kopf{ display:flex; align-items:center; gap:.5rem; width:100%; padding:.45rem .6rem; border-radius:var(--r-btn); background:var(--akzent); }
.schild__kopf img{ width:1.6rem; height:auto; }
.schild__kopf b{ font-family:var(--fd); font-size:.78rem; letter-spacing:-.01em; }
.schild__frage{ font-family:var(--fd); font-weight:600; font-size:1.2rem; letter-spacing:-.02em; }
.schild__qr{ position:relative; width:9rem; padding:.45rem; border:2px solid var(--auf-akzent); border-radius:var(--r-btn); overflow:hidden; }
.qr{ width:100%; height:auto; fill:var(--auf-akzent); }
.schild__hinweis{ font-size:.82rem; font-weight:500; text-align:center; line-height:1.35; }
.schild__fuss{ display:none; }
.eb__profil{ padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); }
.eb__null{ color:var(--fg-2); font-size:.95rem; }
.eb__null b{ font-family:var(--fd); font-size:2.6rem; line-height:1; color:var(--fg); margin-right:.35rem; letter-spacing:-.04em; }
.eb__stand{ font-size:.82rem; color:var(--fg-3); }
.eb__slot{ margin-top:1rem; padding:.9rem 1rem; border:1.5px dashed var(--line-2); border-radius:var(--r); }
.eb__slot span{ display:block; height:.5rem; margin-bottom:.45rem; border-radius:2px; background:var(--bg-3); width:40%; }
.eb__slot span + span{ width:78%; }
.eb__slot p{ font-size:.85rem; color:var(--fg-2); font-weight:500; }
@media (max-width: 900px){ .eb{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .eb__buehne{ grid-template-columns:1fr; justify-items:center; } .eb__profil{ width:100%; } }

/* ---------- Reinigungsplan-Konfigurator ---------- */
.kf{ position:relative; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface); }
.kf__kopf{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:1rem 2.5rem; padding:1.2rem clamp(1.2rem,3vw,2.2rem); border-bottom:1px solid var(--line); }
.kf__titel{ font-family:var(--fd); font-weight:600; font-size:1.05rem; letter-spacing:-.015em; }
.kf__fortschritt{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }
.kf__punkt{ position:relative; display:block; width:100%; padding:.75rem 0 0; border:0; background:none; color:var(--fg-3); font-weight:600; font-size:.9rem; text-align:left; cursor:default; }
.kf__punkt::before, .kf__punkt::after{ content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:2px; background:var(--line-2); }
.kf__punkt::after{ background:var(--akzent); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--ease); }  /* motion: state */
.kf__punkt.is-fertig, .kf__punkt[aria-current="step"]{ color:var(--fg); }
.kf__punkt.is-fertig{ cursor:pointer; }
.kf__punkt.is-fertig::after, .kf__punkt[aria-current="step"]::after{ transform:none; }
.kf__punkt[aria-current="step"]::after{ background:var(--akzent-text); }
.kf__body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,23rem); }
.kf__schritte{ min-width:0; padding:clamp(1.4rem,3.2vw,2.6rem) clamp(1.2rem,3.2vw,2.6rem); }
.kf__plan{ padding:clamp(1.2rem,2.5vw,1.8rem); border-left:1px solid var(--line); background:var(--bg-2); border-radius:0 var(--r-lg) var(--r-lg) 0; }
.kf__schritt{ border:0; padding:0; margin:0; min-width:0; }
.kf__schritt[hidden]{ display:none; }
.kf__schritt.is-ein{ animation:kf-ein .5s var(--ease) both; }
/* motion: hierarchy. Der naechste Schritt kommt von rechts, der vorige von links */
@keyframes kf-ein{ from{ opacity:0; transform:translateX(22px) } to{ opacity:1; transform:none } }
.kf__schritt.is-ein--zurueck{ animation-name:kf-ein-zurueck; }
/* motion: hierarchy. Zurueck-Richtung */
@keyframes kf-ein-zurueck{ from{ opacity:0; transform:translateX(-22px) } to{ opacity:1; transform:none } }
html[data-motion="reduce"] .kf__schritt.is-ein{ animation-duration:.15s; }
.kf__frage{ display:block; float:left; width:100%; margin-bottom:1.5rem; padding:0; font-family:var(--fd); font-weight:600; font-size:clamp(1.55rem,2.8vw,2.35rem); letter-spacing:-.035em; line-height:1.08; outline:none; }
.kf__frage + *{ clear:both; }
.kf__nr{ display:block; margin-bottom:.5rem; font-family:var(--fb); font-size:.85rem; font-weight:600; letter-spacing:.01em; color:var(--akzent-text); }
.kf__label{ font-weight:600; font-size:.95rem; margin-bottom:.6rem; }
.kf__label--abstand{ margin-top:1.6rem; }
.kf__hint{ font-weight:500; color:var(--fg-2); margin-left:.3rem; }
.kf__block + .kf__block{ margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--line); }
/* Versteckte Eingaben, sichtbar ist die gestaltete Flaeche daneben */
.ok-karte input, .lk-wahl input, .kchip input, .seg input, .kf-tag input, .zeit-karte input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.ok-karte, .lk-wahl, .kchip, .seg, .kf-tag, .zeit-karte{ position:relative; display:block; cursor:pointer; }
:is(.ok-karte,.lk-wahl,.kchip,.seg,.kf-tag,.zeit-karte) input:focus-visible + span{ outline:3px solid var(--akzent); outline-offset:2px; }
.ok-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.ok-karte__in{ position:relative; display:grid; align-content:start; gap:.35rem; min-height:11rem; height:100%; padding:1.15rem 1.1rem;
  border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--surface); transition:transform .25s var(--ease), border-color .2s var(--ease); }  /* motion: feedback */
.ok-karte__icon{ width:3.1rem; height:3.1rem; margin-bottom:.6rem; color:var(--akzent-text); stroke-width:1.6; transition:transform .35s var(--ease); }
.ok-karte__in b{ font-family:var(--fd); font-size:1.08rem; letter-spacing:-.015em; line-height:1.2; }
.ok-karte__in small{ font-size:.86rem; color:var(--fg-2); line-height:1.35; }
.ok-karte__in::before{ content:""; position:absolute; top:.8rem; right:.8rem; width:1.4rem; height:1.4rem; border-radius:3px; background:var(--akzent);
  opacity:0; transform:scale(.4); transition:opacity .2s var(--ease), transform .3s var(--ease); }  /* motion: feedback */
.ok-karte__in::after{ content:""; position:absolute; top:1.02rem; right:1.28rem; width:.42rem; height:.75rem; border-right:2.5px solid var(--auf-akzent); border-bottom:2.5px solid var(--auf-akzent);
  opacity:0; transform:rotate(45deg) scale(.4); transition:opacity .2s var(--ease), transform .3s var(--ease); }
.ok-karte input:checked + .ok-karte__in{ border-color:var(--akzent); background:color-mix(in srgb, var(--akzent) 15%, var(--surface)); }
.ok-karte input:checked + .ok-karte__in::before{ opacity:1; transform:none; }
.ok-karte input:checked + .ok-karte__in::after{ opacity:1; transform:rotate(45deg); }
.ok-karte input:checked + .ok-karte__in .ok-karte__icon{ color:var(--fg); transform:translateY(-2px); }
@media (hover: hover) and (pointer: fine){ .ok-karte__in:hover{ transform:translateY(-2px); border-color:var(--akzent-text); } }
.lk-wahl-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.lk-wahl__in{ display:grid; height:100%; overflow:hidden; border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--surface); transition:transform .25s var(--ease), border-color .2s var(--ease); }
.lk-wahl__in img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; transition:transform .6s var(--ease); }
.lk-wahl__in b{ padding:.65rem .8rem .75rem; font-size:.96rem; line-height:1.25; hyphens:manual; overflow-wrap:break-word; }
.lk-wahl input:checked + .lk-wahl__in{ border-color:var(--akzent); outline:3px solid var(--akzent); outline-offset:-3px; background:color-mix(in srgb, var(--akzent) 18%, var(--surface)); }
@media (hover: hover) and (pointer: fine){ .lk-wahl__in:hover{ transform:translateY(-2px); border-color:var(--akzent-text); } .lk-wahl__in:hover img{ transform:scale(1.04); } }
.kchips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.kchip span{ display:inline-flex; align-items:center; gap:.45rem; padding:.62rem 1rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:var(--surface);
  font-weight:500; font-size:.95rem; transition:border-color .2s var(--ease), background-color .2s var(--ease); }
.kchip svg{ width:1rem; height:1rem; opacity:.25; transform:scale(.8); transition:opacity .2s var(--ease), transform .25s var(--ease); }
.kchip input:checked + span{ background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent); font-weight:600; }
.kchip input:checked + span svg{ opacity:1; transform:none; }
.kchip--klein span{ padding:.5rem .8rem; font-size:.9rem; }
@media (hover: hover) and (pointer: fine){ .kchip span:hover{ border-color:var(--akzent-text); } }
.kf__zeile{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.kf__wert{ font-family:var(--fd); font-weight:600; font-size:clamp(1.9rem,3.2vw,2.8rem); letter-spacing:-.04em; line-height:1; }
.kf__range{ --p:8%; -webkit-appearance:none; appearance:none; display:block; width:100%; height:2.6rem; margin:.6rem 0 0; background:transparent; cursor:pointer; touch-action:pan-y; }
.kf__range::-webkit-slider-runnable-track{ height:10px; border-radius:2px; background:linear-gradient(90deg, var(--akzent) var(--p), var(--bg-3) var(--p)); }
.kf__range::-moz-range-track{ height:10px; border-radius:2px; background:var(--bg-3); }
.kf__range::-moz-range-progress{ height:10px; border-radius:2px; background:var(--akzent); }
.kf__range::-webkit-slider-thumb{ -webkit-appearance:none; width:1.9rem; height:1.9rem; margin-top:calc(5px - .95rem); border-radius:var(--r-btn); background:var(--surface); border:3px solid var(--akzent-text); }
.kf__range::-moz-range-thumb{ width:1.6rem; height:1.6rem; border-radius:var(--r-btn); background:var(--surface); border:3px solid var(--akzent-text); }
.kf__range:focus-visible{ outline:3px solid var(--akzent); outline-offset:4px; }
.kf__skala{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--fg-3); }
.kf__offen{ display:inline-flex; align-items:center; gap:.55rem; margin-top:.8rem; font-size:.95rem; color:var(--fg-2); cursor:pointer; }
.kf__offen input{ width:1.1rem; height:1.1rem; accent-color:var(--akzent); }
.kf.is-flaeche-offen .kf__range, .kf.is-flaeche-offen .kf__wert{ opacity:.35; }
.segs{ display:inline-grid; grid-template-columns:repeat(3,auto); border:1.5px solid var(--line-2); border-radius:var(--r-btn); }
.seg span{ display:block; padding:.7rem 1.15rem; font-weight:600; font-size:.95rem; white-space:nowrap; }
.seg + .seg span{ border-left:1.5px solid var(--line-2); }
.seg input:checked + span{ background:var(--fg); color:var(--bg); }
.kf-woche{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.4rem; }
.kf-tag span{ display:grid; justify-items:center; gap:.45rem; padding:.7rem .3rem .45rem; border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--surface); }
.kf-tag:nth-child(n+6) span{ background:var(--bg-2); }
.kf-tag b{ font-size:.95rem; }
.kf-tag i{ display:block; width:100%; height:2.6rem; border-radius:2px; background:var(--akzent); opacity:0; transform:scaleY(.3); transform-origin:50% 100%;
  transition:opacity .2s var(--ease), transform .35s var(--ease); }  /* motion: feedback */
.kf-tag input:checked + span{ border-color:var(--akzent); }
.kf-tag input:checked + span i{ opacity:1; transform:none; }
.kf[data-rhythmus="d14"] .kf-tag i{ background:transparent; border:2px dashed var(--akzent-text); }
.kf[data-rhythmus="einmalig"] .kf-woche{ opacity:.35; pointer-events:none; }
@media (hover: hover) and (pointer: fine){ .kf-tag span:hover{ border-color:var(--akzent-text); } }
.zeit-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
.zeit-karte span{ display:grid; gap:.2rem; height:100%; padding:.85rem .9rem; border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--surface); }
.zeit-karte b{ font-family:var(--fd); font-size:.98rem; letter-spacing:-.01em; line-height:1.2; }
.zeit-karte small{ font-size:.82rem; color:var(--fg-2); }
.zeit-karte input:checked + span{ border-color:var(--akzent); background:color-mix(in srgb, var(--akzent) 15%, var(--surface)); }
@media (hover: hover) and (pointer: fine){ .zeit-karte span:hover{ border-color:var(--akzent-text); } }
.kf__felder{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem 1.2rem; }
.kf__felder .full{ grid-column:1 / -1; }
.kf-ort{ position:relative; }
.kf-ort__liste{ position:absolute; z-index:20; left:0; right:0; top:calc(100% - 1.6rem); list-style:none; margin:0; padding:.35rem; max-height:16rem; overflow:auto;
  border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--surface); }
.kf-ort__liste[hidden]{ display:none; }
.kf-ort__liste li{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem .75rem; border-radius:var(--r-btn); cursor:pointer; }
.kf-ort__liste li small{ font-size:.8rem; font-weight:600; color:var(--fg-3); }
.kf-ort__liste li[data-art="Kerngebiet"] small{ color:var(--akzent-text); }
.kf-ort__liste li[aria-selected="true"], .kf-ort__liste li:hover{ background:var(--bg-2); }
.kf__fehler{ margin-top:.5rem; font-size:.9rem; font-weight:600; color:var(--fehler); }
.kf__fehler[hidden]{ display:none; }
.kf [aria-invalid="true"]{ border-color:var(--fehler); }
.kf .is-fehler{ animation:wackeln .4s var(--ease); }
.kf .is-fehler :is(.ok-karte__in,.lk-wahl__in,span){ border-color:var(--fehler); }
.kf-woche.is-fehler span{ border-color:var(--fehler); }
/* motion: feedback. Kurzes Wackeln zeigt, wo noch eine Antwort fehlt */
@keyframes wackeln{ 0%,100%{ transform:none } 30%{ transform:translateX(-6px) } 65%{ transform:translateX(4px) } }
html[data-motion="reduce"] .kf .is-fehler{ animation-duration:.01s; }
.kf .check{ margin-top:.2rem; }
.kf__nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.kf__nav [data-kf-weiter], .kf__nav [data-kf-senden]{ margin-left:auto; }
.kf__nav [hidden]{ display:none; }
@media (hover: hover) and (pointer: fine){ .kf__nav [data-kf-weiter]:hover svg{ transform:translateX(.3rem); } }
.kf__mini{ display:none; }
/* Live-Plan */
.plan-karte{ position:sticky; top:calc(var(--head) + 1.2rem); overflow:hidden; padding:clamp(1.2rem,2.5vw,1.6rem); border:1px solid var(--line-2); border-top:4px solid var(--akzent);
  border-radius:var(--r-lg); background:radial-gradient(ellipse 90% 50% at 85% 0%, var(--leuchten), transparent 70%), var(--surface); }
.plan-karte__kopf{ display:flex; align-items:center; gap:.7rem; }
.plan-karte__kopf img{ width:2.3rem; height:auto; }
[data-theme="dark"] .plan-karte__kopf img{ filter:invert(1); }
.plan-karte__titel{ font-family:var(--fd); font-weight:600; font-size:1.2rem; letter-spacing:-.02em; line-height:1.15; }
.plan-karte__sub{ font-size:.85rem; color:var(--fg-2); }
.plan-karte__zahl{ margin:1.3rem 0 .9rem; }
.plan-karte__zahl b{ display:block; font-family:var(--fd); font-weight:600; font-size:clamp(3rem,5vw,4.2rem); line-height:.95; letter-spacing:-.05em; }
.plan-karte__zahl span{ display:block; margin-top:.35rem; font-size:.95rem; color:var(--fg-2); }
.pw{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.25rem; }
.pw li{ display:grid; gap:.25rem; text-align:center; }
.pw span{ height:2rem; border:1px solid var(--line-2); border-radius:2px; position:relative; overflow:hidden; }
.pw span::after{ content:""; position:absolute; inset:3px; border-radius:1px; background:var(--akzent); opacity:0; transform:scaleY(.2); transform-origin:50% 100%; transition:opacity .2s var(--ease), transform .35s var(--ease); }  /* motion: state */
.pw li.is-an span::after{ opacity:1; transform:none; }
.kf[data-rhythmus="d14"] .pw li.is-an span::after{ background:transparent; border:2px dashed var(--akzent-text); }
.kf[data-rhythmus="einmalig"] .pw{ opacity:.35; }
.pw b{ font-size:.7rem; font-weight:600; color:var(--fg-2); }
.plan-karte__liste{ margin:1.1rem 0 0; }
.plan-karte__liste div{ display:grid; grid-template-columns:6.2rem minmax(0,1fr); gap:.6rem; padding:.55rem 0; border-top:1px solid var(--line); }
.plan-karte__liste dt{ font-size:.86rem; color:var(--fg-2); }
.plan-karte__liste dd{ margin:0; font-weight:600; font-size:.94rem; line-height:1.35; }
.plan-karte__liste dd.is-offen{ color:var(--fg-3); font-weight:500; }
.plan-karte__liste dd.is-neu{ animation:dd-neu .5s var(--ease) both; }
/* motion: feedback. Eine geaenderte Zeile im Plan blendet kurz neu ein */
@keyframes dd-neu{ from{ opacity:.2; transform:translateX(6px) } to{ opacity:1; transform:none } }
.plan-karte__hinweis{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); font-size:.86rem; color:var(--fg-2); }
/* Erfolg */
.kf__ok{ position:relative; overflow:hidden; padding:clamp(2rem,6vw,4.5rem) clamp(1.4rem,5vw,4rem); border-radius:var(--r-lg); outline:none;
  background:radial-gradient(ellipse 60% 70% at 90% 10%, var(--leuchten), transparent 70%), var(--surface); }
.kf__ok[hidden]{ display:none; }
.kf__ok-haken{ display:grid; place-items:center; width:4.6rem; height:4.6rem; border-radius:var(--r); background:var(--akzent); color:var(--auf-akzent); }
.kf__ok-haken svg{ width:2.3rem; height:2.3rem; }
.kf__ok .h-sec{ margin-top:1.4rem; }
.kf__ok .lead{ margin-top:.9rem; color:var(--fg); }
.kf__ok-demo{ margin-top:1rem; max-width:62ch; color:var(--fg-2); font-size:.95rem; }
.kf__ok.is-zeigen .kf__ok-haken{ animation:haken-ein .7s var(--ease) both; }
.kf__ok.is-zeigen > :not(.glanz):not(.kf__ok-haken){ animation:hero-in .7s var(--ease) .15s both; }
/* motion: feedback. Der Haken springt einmal auf: die Anfrage ist fertig */
@keyframes haken-ein{ 0%{ opacity:0; transform:scale(.3) rotate(-25deg) } 60%{ opacity:1; transform:scale(1.12) rotate(4deg) } 100%{ opacity:1; transform:none } }
html[data-motion="reduce"] .kf__ok.is-zeigen .kf__ok-haken, html[data-motion="reduce"] .kf__ok.is-zeigen > *{ animation-duration:.2s; animation-delay:0s; }
.kf.is-gesendet{ border-color:var(--akzent); }
.kf.is-gesendet > :not(.kf__ok):not(input){ display:none; }
@media (max-width: 1060px){ .ok-grid, .lk-wahl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .zeit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px){
  .kf{ border-radius:var(--r); }
  .kf__kopf{ grid-template-columns:1fr; gap:.6rem; padding:1rem 1.1rem; }
  .kf__body{ grid-template-columns:1fr; }
  .kf__plan{ border-left:0; border-top:1px solid var(--line); border-radius:0 0 var(--r) var(--r); }
  .plan-karte{ position:relative; top:auto; }
  .kf__schritte{ padding:1.4rem 1.1rem 0; }
  .kf__schritt{ min-height:calc(100svh - 17rem); }
  .kf__mini{ position:sticky; z-index:6; top:64px; display:flex; justify-content:space-between; gap:1rem; padding:.65rem 1.1rem; border-bottom:1px solid var(--line);
    background:var(--surface); font-size:.88rem; color:var(--fg-2); }
  .kf__mini b{ color:var(--akzent-text); }
  .kf__nav{ position:sticky; bottom:0; z-index:5; margin:1.6rem -1.1rem 0; padding:.8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); background:var(--surface); }
  .kf__felder{ grid-template-columns:1fr; }
  .segs{ display:grid; width:100%; }
  .seg span{ padding:.7rem .5rem; text-align:center; }
}
@media (max-width: 520px){
  .kf__punkt{ font-size:.78rem; }
  .ok-karte__in{ min-height:9.4rem; padding:.9rem .85rem; }
  .ok-karte__icon{ width:2.5rem; height:2.5rem; }
  .ok-karte__in b{ font-size:.98rem; }
  .ok-karte__in small{ display:none; }
  .kf-woche{ gap:.25rem; }
  .kf-tag span{ padding:.55rem .1rem .35rem; }
  .kf-tag b{ font-size:.82rem; }
  .zeit-karte small{ display:none; }
  .kf__nav .btn{ padding-inline:1.1rem; }
}

/* ---------- Kontakt direkt (kontakt.html) ---------- */
.kk{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.kk__txt .lead{ margin-top:1rem; }
@media (max-width: 900px){ .kk{ grid-template-columns:1fr; } }

/* ---------- Nachtschicht-Feinschliff ---------- */
[data-theme="dark"] .site-head{ background:color-mix(in srgb, var(--bg) 84%, transparent); }
[data-theme="dark"] .section--dark{ background:var(--invert-bg); border-block:1px solid var(--invert-line); }
[data-theme="dark"] .vt__mono{ background:var(--bg-3); }
[data-theme="dark"] .eg__karte, [data-theme="dark"] .gr__plan{ background:radial-gradient(ellipse 70% 60% at 50% 40%, var(--leuchten), transparent 75%), var(--surface); }
[data-theme="dark"] .display .uline::after, [data-theme="dark"] .ls__akzent::after{ background:var(--akzent); }