/* ================================================================
   EM Allround Service · Unterhaltsreinigung Osnabrück
   Design-Rezept „Messing & Leinen"
   Akzent Messing #A98B5F · Grund Leinen · Dunkel warmes Espresso
   Display: Roboto Serif wdth 74, wght 500, versal
   Text:    Plus Jakarta Sans 400–700
   ================================================================ */

/* ---------- Schriften ---------- */
@font-face{
  font-family:'RSerif';
  src:url('/assets/fonts/robotoserif-latin.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'RSerif';
  src:url('/assets/fonts/robotoserif-latin-ext.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Jakarta';
  src:url('/assets/fonts/jakarta-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jakarta';
  src:url('/assets/fonts/jakarta-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Die latin-ext-Schnitte (38 KB) bleiben bewusst liegen: Sie werden über
   unicode-range nur angefordert, wenn ein Zeichen außerhalb von latin vorkommt.
   Auf dieser Seite passiert das nie — geladen werden 48 KB. Sie bleiben trotzdem
   im Ordner, damit ein nachgetragener Kundenname mit Sonderzeichen (ł, ș, ő)
   nicht plötzlich in einer Ersatzschrift steht. */

/* ---------- Marken-Token ---------- */
:root{
  /* Flächen — aus der Logodatei abgenommen */
  --leinen:      #F2ECE1;
  --leinen-2:    #E9E1D2;
  --papier:      #FBF8F2;
  --espresso:    #17130E;
  --espresso-2:  #221B14;

  /* Akzent */
  --messing:     #A98B5F;
  --messing-h:   #C6A670;
  --messing-t:   #6E5734;

  /* Schrift */
  --text:        #221C15;
  --muted:       #6B6052;
  --on-dark:     #F2ECE1;
  --on-dark-mute:#BFB19A;

  /* Linien & Schatten (Clean-Layer: 1,5–6 %) */
  --linie:       #DCD2BF;
  --linie-zart:  #E7DFD0;
  --schatten-1:  0 1px 2px rgba(35,27,18,.035);
  --schatten-2:  0 2px 10px rgba(35,27,18,.045);
  --schatten-3:  0 12px 34px rgba(35,27,18,.06);

  /* Radien — Dauerregel: Knopf deutlich eckiger als die Karte */
  --r-knopf:  10px;
  --r-karte:  20px;
  --r-flaeche:26px;
  --r-chip:   999px;

  /* Raster */
  --breit:  1200px;
  --schmal: 900px;
  --rand:   clamp(1.15rem, 4vw, 2.5rem);

  /* Bewegung */
  --feder: linear(0,.0064,.0253,.0561,.0977 9.4%,.2011,.3151,.4306,.5409,.6414 35.1%,.6846,.7241,.7599,.792,.8206,.8457,.8676,.8864,.9024 55.9%,.9297,.9498,.9643,.9748,.9822,.9874,.991,.9935,.9952 78.2%,.9978,.9989,.9995,.9998,1);
  --ruhig: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Grundgerüst ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--leinen); color:var(--text);
  font-family:'Jakarta',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1rem; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--messing); outline-offset:3px; border-radius:4px}

/* ---------- Typo-Skala (flach, Clean-Layer) ---------- */
h1,h2,h3,h4{
  font-family:'RSerif',Georgia,serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.012em;
  line-height:1.08; margin:0; text-wrap:balance;
}
h2{font-size:clamp(1.4rem,1.05rem + 1.55vw,2.52rem)}
h3{font-size:clamp(1.12rem,.97rem + .62vw,1.42rem); line-height:1.16}
h4{font-size:clamp(1rem,.94rem + .28vw,1.14rem); line-height:1.2}
p{margin:0 0 1rem; text-wrap:pretty}
li,dd,figcaption{text-wrap:pretty}
/* Silbentrennung wurde geprüft und wieder entfernt: gemessen stieg die Zahl
   kurzer Schlusszeilen von 23 auf 32 und die der echten Waisenwörter von 1 auf 17.
   Ein am Wortende getrennter Rest landet häufiger allein auf der letzten Zeile,
   als der gleichmäßigere Randausgleich einspart. Nicht erneut versuchen. */
p:last-child{margin-bottom:0}
strong,b{font-weight:600}

/* Der Kicker sitzt in der Überschrift — deshalb der volle Gegen-Scope:
   ohne ihn erbt er Versalien und die Serifenschrift der Display-Typo. */
.kick{
  display:block;
  font-family:'Jakarta',system-ui,sans-serif;
  font-size:clamp(.82rem,.79rem + .14vw,.94rem);
  font-weight:600; color:var(--messing-t);
  text-transform:none; letter-spacing:.005em;
  line-height:1.4; padding-top:0; margin:0 0 .6rem;
}
.s-dark .kick,.hero .kick,.anfrage .kick,.final .kick,.zusagen .kick,.fuss .kick{color:var(--messing-h)}

.lead{font-size:clamp(.97rem,.94rem + .16vw,1.06rem); color:var(--muted); max-width:56ch}
.s-dark .lead,.hero .lead,.anfrage .lead,.final .lead,.zusagen .lead,.fuss .lead{color:var(--on-dark-mute)}

/* ---------- Flächen-Rhythmus ---------- */
.sek{padding:clamp(3.4rem,2.2rem + 4.4vw,6rem) 0; position:relative}
/* Die Kopfzeile ist fix und 77 px hoch — ohne diesen Abstand landet jedes
   Sprungziel unter ihr. */
section[id],footer[id]{scroll-margin-top:100px}
@media (max-width:1000px){section[id],footer[id]{scroll-margin-top:86px}}
.s-leinen{background:var(--leinen)}
.s-leinen2{background:var(--leinen-2)}
.s-papier{background:var(--papier)}
.s-dark{background:var(--espresso); color:var(--on-dark)}
.s-dark h1,.s-dark h2,.s-dark h3,.s-dark h4,
.anfrage h1,.anfrage h2,.anfrage h3,.anfrage h4,
.final h1,.final h2,.final h3,.final h4{color:var(--on-dark)}
.s-dark p,.anfrage p,.final p{color:var(--on-dark-mute)}
.wrap{width:min(var(--breit),100% - var(--rand)*2); margin-inline:auto}
.wrap--schmal{width:min(var(--schmal),100% - var(--rand)*2)}

/* Deko: Goldlinien-Gitter — ein Deko-System für die ganze Seite */
.gitter{position:relative}
.gitter::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--messing) 1px,transparent 1px),
                   linear-gradient(90deg,var(--messing) 1px,transparent 1px);
  background-size:64px 64px; opacity:.055;
  mask-image:radial-gradient(120% 90% at 50% 0,#000 35%,transparent 78%);
}
.s-dark .gitter::before{opacity:.085}
.gitter>*{position:relative; z-index:1}

/* ================================================================
   Knöpfe
   Grundfassung IMMER hell gedacht: dunkler Text auf hellem Grund.
   Nur die dunklen Flächen drehen auf Weiß — sonst wird der
   Sekundärknopf in normalen Sektionen zum unsichtbaren Geisterknopf.
   ================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.35rem; border-radius:var(--r-knopf);
  border:1px solid transparent; background:none; cursor:pointer;
  font-weight:600; font-size:clamp(.86rem,.83rem + .13vw,.95rem);
  line-height:1.15; white-space:nowrap; text-decoration:none;
  transition:transform .18s var(--feder), background-color .18s var(--ruhig),
             border-color .18s var(--ruhig), box-shadow .18s var(--ruhig);
}
.btn svg{flex:none}
.btn:active{transform:translateY(1px)}

.btn--haupt{background:var(--messing); color:#17130E; box-shadow:0 2px 10px rgba(169,139,95,.22)}
.btn--haupt:hover{background:var(--messing-h); box-shadow:0 4px 16px rgba(169,139,95,.28)}

.btn--dunkel{background:var(--espresso); color:var(--leinen)}
.btn--dunkel:hover{background:var(--espresso-2)}

/* Sekundär / Telefon — helle Grundfassung */
.btn--tel,.btn--geist{
  background:transparent; color:var(--text); border-color:var(--linie);
}
.btn--tel:hover,.btn--geist:hover{border-color:var(--messing); color:var(--messing-t)}

/* … und nur hier dreht er auf Weiß */
.hero .btn--tel,.s-dark .btn--tel,.anfrage .btn--tel,.final .btn--tel,.fuss .btn--tel,
.hero .btn--geist,.s-dark .btn--geist,.anfrage .btn--geist,.final .btn--geist,.fuss .btn--geist{
  color:var(--on-dark); border-color:rgba(242,236,225,.34);
}
.hero .btn--tel:hover,.s-dark .btn--tel:hover,.anfrage .btn--tel:hover,.final .btn--tel:hover,.fuss .btn--tel:hover,
.hero .btn--geist:hover,.s-dark .btn--geist:hover,.anfrage .btn--geist:hover,.final .btn--geist:hover,.fuss .btn--geist:hover{
  color:#fff; border-color:var(--messing-h); background:rgba(198,166,112,.14);
}

/* Helle Inseln IN dunklen Flächen drehen wieder zurück */
.insel .btn--tel,.insel .btn--geist{color:var(--text); border-color:var(--linie); background:transparent}
.insel .btn--tel:hover,.insel .btn--geist:hover{color:var(--messing-t); border-color:var(--messing); background:transparent}

.btn--voll{width:100%}
.btn--gross{padding:.98rem 1.7rem}

/* ================================================================
   Kopfzeile — über dem Hero unsichtbar, beim Scrollen sichtbar
   ================================================================ */
.kopf{
  position:fixed; inset:0 0 auto; z-index:900;
  transition:background-color .3s var(--ruhig), box-shadow .3s var(--ruhig),
             border-color .3s var(--ruhig);
  border-bottom:1px solid transparent;
}
.kopf__in{
  width:min(var(--breit),100% - var(--rand)*2); margin-inline:auto;
  display:flex; align-items:center; gap:1.1rem;
  min-height:84px;
}
.kopf.ist-fest{background:rgba(242,236,225,.93); backdrop-filter:blur(12px);
  border-bottom-color:var(--linie-zart); box-shadow:var(--schatten-1)}
.kopf__logo{display:flex; align-items:center; margin-right:auto}
.kopf__logo img{height:58px; width:auto}
.kopf.ist-fest .kopf__logo img{height:50px}

.nav{display:flex; align-items:center; gap:1.5rem}
.nav a{
  text-decoration:none; font-weight:500; font-size:.925rem;
  color:var(--on-dark); opacity:.92; transition:color .2s, opacity .2s;
}
.nav a:hover{opacity:1; color:var(--messing-h)}
.kopf.ist-fest .nav a{color:var(--text); opacity:.86}
.kopf.ist-fest .nav a:hover{color:var(--messing-t); opacity:1}

.kopf__tel{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-weight:600; font-size:.95rem; color:var(--on-dark); white-space:nowrap;
}
.kopf.ist-fest .kopf__tel{color:var(--text)}
.kopf__tel svg{color:var(--messing-h)}
.kopf.ist-fest .kopf__tel svg{color:var(--messing)}

/* Mobil: kein Burger — Telefon und WhatsApp als Symbole */
.kopf__mobil{display:none; align-items:center; gap:.5rem}
.kopf__rund{
  width:44px; height:44px; border-radius:var(--r-chip);   /* Mindestgröße für Touch */
  display:grid; place-items:center; text-decoration:none;
  border:1px solid rgba(242,236,225,.34); color:var(--on-dark);
}
.kopf.ist-fest .kopf__rund{border-color:var(--linie); color:var(--text)}
.kopf__rund--wa{background:var(--messing); border-color:var(--messing); color:#fff}
.kopf.ist-fest .kopf__rund--wa{background:var(--messing); border-color:var(--messing); color:#fff}

@media (max-width:1000px){
  .nav,.kopf__tel,.kopf .btn{display:none}
  .kopf__mobil{display:flex}
  .kopf__in{min-height:72px}
  .kopf__logo img{height:48px}
}

/* ================================================================
   Hero — Bild vollflächig, Text darüber, Quiz rechts
   ================================================================ */
.hero{
  position:relative; color:var(--on-dark);
  padding:calc(84px + clamp(1.6rem,1rem + 2.4vw,3rem)) 0 clamp(3.2rem,2rem + 5vw,5.4rem);
  isolation:isolate; overflow:hidden;
}
.hero__bild{position:absolute; inset:0; z-index:-2}
.hero__bild img{width:100%; height:100%; object-fit:cover; object-position:58% 50%}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  /* Links trägt das Overlay die Schrift, rechts bleibt das Motiv sichtbar.
     Eine durchgehend dunkle Fläche lässt die Seite billig und schwer wirken. */
  background:
    linear-gradient(101deg,rgba(14,11,7,.9) 0%,rgba(14,11,7,.78) 30%,rgba(14,11,7,.44) 56%,rgba(14,11,7,.18) 78%,rgba(14,11,7,.1) 100%),
    linear-gradient(0deg,rgba(14,11,7,.5),rgba(14,11,7,0) 42%);
}
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(348px,.8fr);
  gap:clamp(1.8rem,1rem + 3vw,3.4rem); align-items:center;
}
.hero h1{margin:0 0 1.15rem}
.hero__gross{
  display:block; font-size:clamp(1.56rem,0.92rem + 2.68vw,3.05rem);
  line-height:1.08; letter-spacing:.008em;
}
/* Beide Zeilen sind eigene Blöcke — sonst umbricht die H1 auf vier Zeilen,
   und die Dauerregel erlaubt zwei, im Ausnahmefall drei. */
.hero__z,.hero__gross em{display:block}
.hero__gross em{font-style:normal; color:var(--messing-h)}
.hero__text{
  font-size:.945rem; line-height:1.62; color:rgba(242,236,225,.84);
  max-width:47ch; margin:0 0 1.5rem;
}
.hero__usp{list-style:none; margin:0 0 1.75rem; padding:0; display:grid; gap:.62rem}
.hero__usp li{display:flex; align-items:flex-start; gap:.62rem; font-size:.925rem; line-height:1.45}
.hero__usp svg{flex:none; margin-top:.16rem; color:var(--messing-h)}
.hero__usp b{font-weight:600; color:#fff}
.hero__knoepfe{display:flex; flex-wrap:wrap; gap:.7rem}

/* ================================================================
   Quiz-Karte — helle Insel auf dunklem Grund.
   Der Gegen-Scope nennt JEDE Textrolle der Insel, nicht nur die
   Überschriften: sonst erbt eine Zeile die Hell-auf-Hell-Farbe.
   ================================================================ */
.qk{
  background:var(--papier); color:var(--text);
  border:1px solid var(--linie-zart); border-radius:var(--r-flaeche);
  padding:clamp(1.3rem,1rem + 1.2vw,1.85rem);
  box-shadow:0 18px 44px rgba(15,12,8,.06);
  position:relative;
}
.insel,.qk{ }
.qk h2,.qk h3,.qk h4,.qk p,.qk label,.qk span,.qk b,.qk li,.qk small,
.qk .kick,.qk .qk__frage,.qk .qk__schritt,.qk .qk__trust,.qk .qk__kachel,
.qk .qk__zustimmung,.qk .qk__zustimmung span{color:var(--text)}
.qk .lead,.qk .qk__unter,.qk .qk__schritt,.qk small{color:var(--muted)}
/* Die Karte ist eine helle Insel — sie dreht jede Dunkel-Regel wieder zurück. */
.anfrage .qk .kick,.hero .qk .kick{color:var(--messing-t)}
.anfrage .qk h2,.anfrage .qk h3,.anfrage .qk h4,.hero .qk h2,.hero .qk h3,.hero .qk h4{color:var(--text)}
.anfrage .qk p,.hero .qk p{color:var(--muted)}

/* Der Störer ragt in die obere rechte Ecke der Karte. Ihm auszuweichen hat die
   Kollision nur verschoben (erst rechts unter den Knopf, dann links unter den
   Titel) — richtig ist ein Innenabstand in Störerbreite, dann endet der Text
   vor ihm, egal wie schmal die Karte wird. Der Störer steht im Markup direkt
   vor dem Kopf, deshalb greift der Geschwister-Selektor nur dort, wo es ihn gibt. */
.qk__kopf{margin-bottom:1rem}
.qk__stoerer + .qk__kopf{padding-right:86px}
@media (max-width:1100px){.qk__stoerer + .qk__kopf{padding-right:96px}}
.qk__titel{
  font-family:'RSerif',Georgia,serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.012em; font-size:clamp(1.1rem,1rem + .4vw,1.3rem);
  line-height:1.16; margin:0 0 .35rem;
}
.qk__unter{font-size:.845rem; line-height:1.45; margin:0}

.qk__fort{display:flex; align-items:center; gap:.7rem; margin-bottom:1rem}
.qk__balken{flex:1; height:5px; border-radius:var(--r-chip); background:var(--leinen-2); overflow:hidden}
.qk__balken i{display:block; height:100%; width:25%; border-radius:inherit;
  background:linear-gradient(90deg,var(--messing),var(--messing-h));
  transition:width .42s var(--feder)}
.qk__schritt{font-size:.775rem; font-weight:600; white-space:nowrap}

.qk__frage{font-weight:600; font-size:.965rem; line-height:1.35; margin:0 0 .8rem}
.qk__kacheln{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.55rem; margin-bottom:.3rem}
.qk__kachel{
  display:flex; align-items:center; gap:.55rem; text-align:left;
  padding:.82rem .85rem; border-radius:var(--r-knopf);
  border:1px solid var(--linie); background:#fff; cursor:pointer;
  font-size:.875rem; font-weight:500; line-height:1.25;
  transition:border-color .16s var(--ruhig), background-color .16s var(--ruhig), transform .16s var(--feder);
}
.qk__kachel svg{flex:none; color:var(--messing)}
.qk__kachel:hover{border-color:var(--messing); background:#fff; transform:translateY(-1px)}
.qk__kachel.ist-gewaehlt{border-color:var(--messing); background:rgba(169,139,95,.1)}
.qk__kachel--breit{grid-column:1 / -1}

.qk__feld{margin-bottom:.68rem}
.qk__feld label{display:block; font-size:.795rem; font-weight:600; margin-bottom:.28rem}
.qk__feld input{
  width:100%; padding:.72rem .82rem; border-radius:var(--r-knopf);
  border:1px solid var(--linie); background:#fff; color:var(--text);
  font:inherit; font-size:1rem;   /* unter 16 px zoomt iOS beim Fokus in das Feld */
}
.qk__feld input::placeholder{color:#A79B8A}
.qk__feld input:focus{outline:none; border-color:var(--messing); box-shadow:0 0 0 3px rgba(169,139,95,.16)}

.qk__zustimmung{display:flex; align-items:flex-start; gap:.55rem; margin:.15rem 0 .85rem; font-size:.775rem; line-height:1.4}
.qk__zustimmung input{margin-top:.18rem; accent-color:var(--messing); flex:none}
.qk__zustimmung a{color:var(--messing-t)}

.qk__zurueck{
  display:inline-block; margin-top:.7rem; padding:0; border:0; background:none;
  cursor:pointer; font-size:.8rem; font-weight:600; color:var(--muted);
}
.qk__zurueck:hover{color:var(--messing-t)}

.qk__fehler{display:none; margin-top:.7rem; padding:.6rem .75rem; border-radius:var(--r-knopf);
  background:#FBEDE8; color:#8A3A22; font-size:.8rem; line-height:1.4}
.qk__fehler.ist-da{display:block}
.qk__fehler a{color:#8A3A22; font-weight:600}

.qk__trust{
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.9rem; padding-top:.85rem; border-top:1px solid var(--linie-zart);
  font-size:.775rem; line-height:1.35; text-align:center;
}
.qk__trust svg{color:var(--messing); flex:none}

/* Aktions-Störer: runder Kreis schräg über der Ecke */
.qk__stoerer{
  position:absolute; top:-16px; right:-12px; z-index:2;
  width:84px; height:84px; border-radius:var(--r-chip);
  display:grid; place-items:center; text-align:center;
  background:var(--espresso); color:var(--leinen);
  transform:rotate(-11deg); box-shadow:0 6px 16px rgba(15,12,8,.06);
  font-size:.7rem; font-weight:600; line-height:1.15; padding:.4rem;
}
.qk__stoerer b{display:block; font-family:'RSerif',Georgia,serif; font-weight:500;
  font-size:1.18rem; letter-spacing:.01em}
/* Der Störer ist eine DUNKLE Insel in der hellen Karte — der Gegen-Scope der Karte
   (.qk span{color:var(--text)}) hatte „Begehung" auf 1,10:1 gedrückt, also unsichtbar. */
.qk .qk__stoerer,.qk .qk__stoerer span{color:var(--leinen)}
.qk .qk__stoerer b{color:var(--messing-h)}

/* Danke-Ansicht ist ebenfalls eine helle Insel */
.dank{text-align:center; padding:.6rem 0}
.dank h3,.dank p{color:var(--text)}
.dank p{font-size:.88rem; color:var(--muted)}
.dank__icon{
  width:52px; height:52px; margin:0 auto .8rem; border-radius:var(--r-chip);
  display:grid; place-items:center; background:rgba(169,139,95,.14); color:var(--messing-t);
}
.dank__eilig{display:flex; justify-content:center; gap:.6rem; margin-top:.7rem}
.dank__rund{
  width:46px; height:46px; border-radius:var(--r-chip); display:grid; place-items:center;
  text-decoration:none; border:1px solid var(--linie); color:var(--text);
}
.dank__rund--wa{background:var(--messing); border-color:var(--messing); color:#fff}

@media (max-width:1100px){
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .qk{order:2}
  /* Der Störer trägt zwei Zeilen — bei 74 px quetschte „Begehung" auf dem Handy. */
  .qk__stoerer{width:82px; height:82px; top:-16px; right:-4px; font-size:.665rem; padding:.3rem}
  .qk__stoerer b{font-size:1.12rem; margin-bottom:.05rem}
}
/* Der schwebende Knopf erscheint erst unterhalb des Heros. Über dem Hero lag er
   sonst auf dem Aktions-Störer der Quiz-Karte — und den Störer nach links zu
   schieben war die falsche Antwort, dort verdeckt er die Kartenüberschrift. */
.fab{opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s var(--ruhig), transform .28s var(--feder), visibility .28s}
.fab.ist-da{opacity:1; visibility:visible; transform:none}
@media (max-width:900px){
  /* Auf schmalem Schirm deckte der diagonale Verlauf das ganze Motiv zu.
     Senkrecht gedacht bleibt das Bild oben sichtbar, der Text sitzt trotzdem dunkel. */
  .hero::after{
    background:linear-gradient(180deg,rgba(14,11,7,.4) 0%,rgba(14,11,7,.56) 20%,rgba(14,11,7,.85) 50%,rgba(14,11,7,.94) 100%);
  }
  .hero__bild img{object-position:62% 38%}
}
@media (max-width:560px){
  .qk__kacheln{grid-template-columns:minmax(0,1fr)}
  .qk__kachel--breit{grid-column:auto}
}

/* ================================================================
   Sektionskopf
   ================================================================ */
.kopfzeile{max-width:62ch; margin-bottom:clamp(1.9rem,1.3rem + 2vw,2.9rem)}
.kopfzeile--mitte{margin-inline:auto; text-align:center}
.kopfzeile h2{margin-bottom:.8rem}
h2 em,h3 em{font-style:normal; display:block}
.kopfzeile h2 em{color:var(--messing-t)}
h2 em{color:var(--messing-t)}
.s-dark h2 em,.hero h2 em,.anfrage h2 em,.final h2 em,.zusagen h2 em,.fuss h2 em{color:var(--messing-h)}

/* ================================================================
   Zusagen-Leiste — vier verbindliche Punkte direkt unter dem Hero
   ================================================================ */
.zusagen{background:var(--espresso); color:var(--on-dark); padding:clamp(1.6rem,1.2rem + 1.6vw,2.3rem) 0}
.zusagen__r{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,.6rem + 1.2vw,2rem)}
.zusagen__p{display:flex; gap:.75rem; align-items:flex-start}
.zusagen__p svg{flex:none; margin-top:.15rem; color:var(--messing-h)}
.zusagen__p b{display:block; font-size:.905rem; font-weight:600; color:#fff; line-height:1.25; margin-bottom:.16rem}
.zusagen__p span{font-size:.815rem; line-height:1.4; color:var(--on-dark-mute)}
@media (max-width:900px){.zusagen__r{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.1rem}}
@media (max-width:520px){.zusagen__r{grid-template-columns:minmax(0,1fr)}}

/* ================================================================
   Leistungsverzeichnis — links Zeilen, rechts sticky Bildbühne
   Alles bleibt sichtbar; der Bildwechsel ist reine Zugabe.
   ================================================================ */
.lv{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(1.6rem,1rem + 2.4vw,3.2rem); align-items:start}
.lv__liste{display:grid}
.lv__z{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 1.15rem;
  padding:1.35rem 0 1.4rem; border-top:1px solid var(--linie-zart);
  position:relative; cursor:default;
}
.lv__z:first-child{border-top:0; padding-top:0}
.lv__z::after{
  content:''; position:absolute; left:0; bottom:-1px; height:3px; width:0;
  background:var(--messing); transition:width .45s var(--ruhig);
}
.lv__z:hover::after,.lv__z:focus-within::after{width:100%}
.lv__nr{
  font-family:'RSerif',Georgia,serif; font-weight:500; font-size:1.02rem;
  /* Der helle Messington ergibt auf Leinen nur 2,73:1 — die Ziffern sind Text,
     kein Zierrat, also gilt 4,5:1. Der dunkle Akzent misst 5,81:1. */
  color:var(--messing-t); letter-spacing:.02em; line-height:1.5; padding-top:.1rem;
}
.lv__z h3{margin:0 0 .42rem}
.lv__z p{font-size:.895rem; line-height:1.58; color:var(--muted); margin:0 0 .7rem; max-width:52ch}
.lv__haken{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem .95rem; margin:0; padding:0}
.lv__haken li{display:flex; align-items:center; gap:.35rem; font-size:.79rem; font-weight:500; color:var(--text)}
.lv__haken svg{flex:none; color:var(--messing)}
.lv__mob{display:none}

.lv__buehne{position:sticky; top:96px; border-radius:var(--r-flaeche); overflow:hidden; box-shadow:var(--schatten-3)}
.lv__bilder{position:relative; aspect-ratio:4/3; background:var(--leinen-2)}
.lv__bilder img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s var(--ruhig);
}
.lv__bilder img.ist-da{opacity:1}
.lv__fuss{background:var(--espresso); color:var(--on-dark-mute); padding:.95rem 1.2rem; font-size:.825rem; line-height:1.45}
.lv__fuss b{color:#fff; font-weight:600}

@media (max-width:1080px){
  .lv{grid-template-columns:minmax(0,1fr)}
  .lv__buehne{display:none}
  .lv__liste{gap:.9rem}
  .lv__z{
    border:1px solid var(--linie-zart); border-radius:var(--r-karte); background:var(--papier);
    padding:0 1.15rem 1.25rem; overflow:hidden; grid-template-columns:auto minmax(0,1fr);
  }
  .lv__z:first-child{padding-top:0}
  .lv__z::after{display:none}
  .lv__mob{display:block; grid-column:1 / -1; aspect-ratio:16/10; object-fit:cover;
    width:calc(100% + 2.3rem); margin:0 -1.15rem 1.15rem}
  .lv__nr{padding-top:0}
}

/* ================================================================
   Chat-Sektion — links WhatsApp-Verlauf, rechts die Argumente
   ================================================================ */
.chat{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(1.8rem,1.1rem + 2.6vw,3.4rem); align-items:center}
/* Florian, 17.09.2026: "das Handy soll einen schwarzen Rand kriegen, damit man das
   besser sieht". Vorher war es nur eine helle abgerundete Flaeche auf hellem Grund und
   damit als Geraet nicht zu erkennen. Der Rahmen entsteht aus Polsterung plus dunklem
   Grund; die Innenecken werden ueber die Radien der Kinder gerundet, damit kein
   zusaetzliches Markup noetig ist. */
.chat__geraet{
  background:#0E0C09; border-radius:40px; overflow:hidden; padding:11px;
  box-shadow:0 22px 52px rgba(15,12,8,.24), inset 0 0 0 1px rgba(255,255,255,.07);
  max-width:400px; width:100%; margin-inline:auto;
}
.chat__geraet>:first-child{border-radius:30px 30px 0 0}
.chat__geraet>:last-child{border-radius:0 0 30px 30px}
/* Der Lautsprecherschlitz macht aus dem Rahmen erst ein Telefon. */
.chat__geraet::before{
  content:''; display:block; width:54px; height:5px; border-radius:var(--r-chip);
  background:rgba(255,255,255,.18); margin:1px auto 8px;
}
@media (max-width:700px){
  .chat__geraet{border-radius:34px; padding:9px}
  .chat__geraet>:first-child{border-radius:26px 26px 0 0}
  .chat__geraet>:last-child{border-radius:0 0 26px 26px}
}
.chat__kopf{display:flex; align-items:center; gap:.65rem; padding:.75rem .9rem; background:#F5F1EA; border-bottom:1px solid #DFD6C7}
.chat__ava{width:38px; height:38px; border-radius:var(--r-chip); object-fit:contain; background:#fff; flex:none; padding:3px}
.chat__wer{flex:1; min-width:0}
.chat__wer b{display:block; font-size:.855rem; font-weight:600; color:#1F1A14; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat__wer span{display:flex; align-items:center; gap:.3rem; font-size:.735rem; color:#6B6052}
.chat__on{width:7px; height:7px; border-radius:var(--r-chip); background:#25D366; flex:none}
.chat__kopf>svg{color:#25D366; flex:none}

/* Feste Fensterhöhe: der Verlauf schiebt sich hoch, sobald er voll ist.
   Ohne das wächst die Chat-Spalte auf über 1200 px und die Sektion kippt aus dem Lot. */
.chat__flaeche{
  padding:.9rem .85rem 1.1rem; height:470px; overflow:hidden; position:relative;
  /* Eigene Hintergrundfarbe ist Pflicht: Die Flaeche lebte frueher von der Huelle.
     Seit die Huelle der schwarze Geraeterahmen ist, wuerde der Bildschirm sonst
     schwarz durchscheinen — gemessen brach "Heute" damit auf 3,45:1 ein. */
  background-color:#ECE5DD;
  background-image:radial-gradient(#D9D0C2 1px,transparent 1px); background-size:17px 17px;
}
.chat__lauf{transition:transform .5s var(--ruhig)}
@media (prefers-reduced-motion:reduce){
  .chat__flaeche{height:auto; overflow:visible}
  .chat__lauf{transition:none}
}
.chat__tag{display:block; width:max-content; margin:0 auto .8rem; padding:.2rem .6rem;
  border-radius:var(--r-chip); background:rgba(255,255,255,.75); font-size:.7rem; color:#6B6052}
.msg{
  max-width:81%; margin-bottom:.5rem; padding:.5rem .68rem .42rem;
  border-radius:12px; font-size:.8rem; line-height:1.45; color:#1F1A14;
  background:#fff; box-shadow:0 1px 1px rgba(15,12,8,.06);
  opacity:0; transform:translateY(7px); transition:opacity .34s var(--ruhig), transform .34s var(--feder);
}
.msg.ist-da{opacity:1; transform:none}
.msg--rein{border-top-left-radius:3px}
.msg--raus{margin-left:auto; background:#D9FDD3; border-top-right-radius:3px}
.msg__zeit{display:block; text-align:right; font-size:.655rem; color:#5B5346; margin-top:.16rem}
.msg__zeit svg{vertical-align:-2px; margin-left:.18rem; color:#34B7F1}
.msg__datei{display:flex; align-items:center; gap:.5rem; padding:.45rem .5rem; margin:.1rem 0 .3rem;
  background:rgba(255,255,255,.62); border-radius:8px}
.msg__datei svg{flex:none; color:var(--messing-t)}
.msg__datei b{font-size:.755rem; font-weight:600; display:block; line-height:1.2}
.msg__datei span{font-size:.68rem; color:#6B6052}
.msg__foto{border-radius:8px; margin-bottom:.3rem; width:100%}
.msg--tippt{display:flex; gap:.22rem; padding:.62rem .7rem; width:max-content}
.msg--tippt i{width:6px; height:6px; border-radius:var(--r-chip); background:#A79B8A; animation:tippen 1.3s infinite}
.msg--tippt i:nth-child(2){animation-delay:.2s}
.msg--tippt i:nth-child(3){animation-delay:.4s}
@keyframes tippen{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.chat__hinweis{text-align:center; font-size:.735rem; color:var(--muted); margin:.85rem 0 0}

.chat__punkte{list-style:none; margin:1.35rem 0 1.65rem; padding:0; display:grid; gap:1rem}
.chat__punkte li{display:flex; gap:.75rem; align-items:flex-start}
.chat__punkte svg{flex:none; margin-top:.18rem; color:var(--messing)}
.chat__punkte b{display:block; font-weight:600; font-size:.925rem; line-height:1.3; margin-bottom:.14rem}
.chat__punkte span{font-size:.865rem; line-height:1.5; color:var(--muted)}
.btn--wa{background:#25D366; color:#0A2E18}
.btn--wa:hover{background:#3BE07A}

@media (max-width:980px){
  .chat{grid-template-columns:minmax(0,1fr)}
  .chat__geraet{order:-1}
}

/* ================================================================
   Vorteils-Bento — sieben Fotokacheln, drei Größen
   ================================================================ */
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:252px; gap:12px}
.kachel{
  position:relative; isolation:isolate; display:flex; align-items:flex-end;
  border-radius:var(--r-karte); overflow:hidden; padding:1.15rem;
  color:#fff; text-decoration:none;
}
.kachel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .9s var(--ruhig)}
.kachel::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(12,9,6,.12) 0%,rgba(12,9,6,.38) 42%,rgba(12,9,6,.88) 100%);
}
.kachel:hover img{transform:scale(1.04)}
.kachel h3{color:#fff; margin:0 0 .3rem; text-shadow:0 1px 12px rgba(12,9,6,.4)}
.kachel p{color:rgba(255,255,255,.88); font-size:.85rem; line-height:1.48; margin:0;
  text-shadow:0 1px 12px rgba(12,9,6,.4)}
.kachel--gross{grid-column:1 / span 2; grid-row:1 / span 2; padding:1.5rem}
.kachel--gross h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.62rem)}
.kachel--gross p{font-size:.92rem}
.kachel--hoch{grid-column:3; grid-row:1 / span 2}
.kachel--breit{grid-column:1 / span 2; grid-row:3}
.kachel--klein h3{font-size:1.12rem}
.kachel--klein p{font-size:.8125rem}
@media (max-width:899px){
  .bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-rows:230px}
  .kachel--gross{grid-column:1 / -1; grid-row:auto}
  .kachel--hoch{grid-column:auto; grid-row:auto}
  .kachel--breit{grid-column:1 / -1; grid-row:auto}
}
@media (max-width:619px){
  .bento{grid-template-columns:minmax(0,1fr); grid-auto-rows:auto}
  .kachel{min-height:310px}
  .kachel--gross{min-height:360px}
}

/* ================================================================
   Gewerk 1 — Schlüssel & Zutritt: Zeitstrahl + Protokoll-Artefakt
   ================================================================ */
.schluessel{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.8rem,1.1rem + 2.6vw,3.4rem); align-items:start}
.strahl{list-style:none; margin:0; padding:0; position:relative}
.strahl::before{content:''; position:absolute; left:15px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg,var(--messing),rgba(169,139,95,.2))}
.strahl li{position:relative; padding:0 0 1.45rem 3.1rem}
.strahl li:last-child{padding-bottom:0}
.strahl__pkt{
  position:absolute; left:0; top:1px; width:32px; height:32px; border-radius:var(--r-chip);
  display:grid; place-items:center; background:var(--espresso-2); border:1px solid rgba(198,166,112,.42);
  color:var(--messing-h); font-family:'RSerif',Georgia,serif; font-size:.82rem; font-weight:500;
}
.strahl b{display:block; font-weight:600; font-size:.985rem; color:#fff; line-height:1.28; margin-bottom:.25rem}
.strahl span{font-size:.875rem; line-height:1.55; color:var(--on-dark-mute)}

.protokoll{
  background:var(--espresso-2); border:1px solid rgba(198,166,112,.24);
  border-radius:var(--r-flaeche); overflow:hidden;
}
.protokoll__kopf{display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.95rem 1.15rem; border-bottom:1px solid rgba(198,166,112,.2)}
.protokoll__kopf b{font-family:'RSerif',Georgia,serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.02em; font-size:.925rem; color:#fff}
.protokoll__kopf{flex-wrap:wrap}
.protokoll__kopf span{font-size:.72rem; color:var(--on-dark-mute)}
.protokoll__z{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.8rem; align-items:center;
  padding:.72rem 1.15rem; border-bottom:1px solid rgba(198,166,112,.11); font-size:.825rem}
.protokoll__z:last-child{border-bottom:0}
.protokoll__nr{font-family:'RSerif',Georgia,serif; color:var(--messing-h); font-size:.8rem; letter-spacing:.02em}
.protokoll__z b{display:block; font-weight:600; color:#fff; font-size:.845rem; line-height:1.25}
.protokoll__z i{display:block; font-style:normal; font-size:.745rem; color:var(--on-dark-mute); line-height:1.35}
.protokoll__hak{color:var(--messing-h); flex:none}
.protokoll__bild{aspect-ratio:16/10; width:100%; object-fit:cover}
@media (max-width:980px){.schluessel{grid-template-columns:minmax(0,1fr)}}

/* ================================================================
   Gewerk 2 — Qualitätssicherung: Karten + Prüfraster als Tabelle
   ================================================================ */
.qs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.8rem,.5rem + .9vw,1.1rem); margin-bottom:clamp(1.6rem,1rem + 2vw,2.4rem)}
.qs__k{background:var(--papier); border:1px solid var(--linie-zart); border-radius:var(--r-karte);
  padding:1.3rem; box-shadow:var(--schatten-1)}
.qs__k svg{color:var(--messing); margin-bottom:.7rem}
.qs__k h3{margin:0 0 .45rem}
.qs__k p{font-size:.865rem; line-height:1.55; color:var(--muted); margin:0}
@media (max-width:860px){.qs{grid-template-columns:minmax(0,1fr)}}

.raster{width:100%; border-collapse:collapse; background:var(--papier);
  border:1px solid var(--linie-zart); border-radius:var(--r-karte); overflow:hidden}
.raster caption{caption-side:top; text-align:left; font-size:.8rem; color:var(--muted); padding:0 0 .7rem}
.raster th,.raster td{padding:.78rem .95rem; text-align:left; font-size:.855rem; line-height:1.45;
  border-bottom:1px solid var(--linie-zart)}
.raster thead th{background:var(--leinen-2); font-weight:600; font-size:.78rem;
  letter-spacing:.02em; color:var(--text)}
.raster tbody tr:last-child td{border-bottom:0}
.raster td:first-child{font-weight:600}
.raster td svg{color:var(--messing); vertical-align:-3px}
@media (max-width:620px){
  .raster,.raster tbody,.raster tr,.raster td{display:block; width:100%}
  /* Ohne das behält die Beschriftung display:table-caption, schrumpft auf die
     Breite des längsten Wortes und läuft neunzeilig in die Tiefe. */
  .raster caption{display:block; width:100%}
  .raster thead{display:none}
  .raster tr{border-bottom:1px solid var(--linie-zart); padding:.6rem 0}
  .raster tr:last-child{border-bottom:0}
  .raster td{border:0; padding:.28rem .95rem; display:flex; gap:.6rem}
  .raster td[data-spalte]::before{
    content:attr(data-spalte) ':'; flex:none; min-width:9.2rem;
    font-weight:600; font-size:.775rem; color:var(--muted);
  }
  .raster td:first-child{padding-top:.62rem; font-size:.925rem}
  .raster td:first-child::before{display:none}
}

/* ================================================================
   Gewerk 3 — Abgrenzung: vier Spalten, eine hervorgehoben
   ================================================================ */
.abgr{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem}
.abgr__k{border:1px solid var(--linie-zart); border-radius:var(--r-karte); background:var(--papier);
  padding:1.25rem; display:flex; flex-direction:column}
.abgr__k--wir{border-color:var(--messing); background:#fff; box-shadow:var(--schatten-3)}
.abgr__mark{display:inline-block; width:max-content; margin-bottom:.7rem; padding:.22rem .6rem;
  border-radius:var(--r-chip); background:rgba(169,139,95,.14); color:var(--messing-t);
  font-size:.7rem; font-weight:600; letter-spacing:.01em}
.abgr__k h3{margin:0 0 .5rem; font-size:1.02rem}
.abgr__k p{font-size:.845rem; line-height:1.55; color:var(--muted); margin:0 0 .9rem}
.abgr__takt{margin-top:auto; padding-top:.8rem; border-top:1px solid var(--linie-zart);
  font-size:.775rem; color:var(--muted)}
.abgr__takt b{display:block; font-family:'RSerif',Georgia,serif; font-weight:500; font-size:1rem;
  color:var(--text); letter-spacing:.012em; margin-bottom:.1rem}
@media (max-width:1000px){.abgr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.abgr{grid-template-columns:minmax(0,1fr)}}

/* ================================================================
   Anbieter-Vergleich — zwei Karten, gestaffelt
   ================================================================ */
.vgl{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(.8rem,.4rem + 1.4vw,1.6rem); align-items:center}
.vgl__k{border-radius:var(--r-flaeche); padding:clamp(1.3rem,1rem + 1vw,1.8rem); position:relative}
.vgl__k--wir{background:#fff; border:1px solid var(--messing); box-shadow:var(--schatten-3); transform:translateY(-10px)}
.vgl__k--die{background:var(--leinen-2); border:1px solid var(--linie-zart); filter:saturate(.55)}
.vgl__logo{height:56px; width:auto; margin-bottom:.9rem}
.vgl__wer{font-family:'RSerif',Georgia,serif; font-weight:500; text-transform:uppercase; letter-spacing:.012em;
  font-size:1.05rem; margin:0 0 1rem; color:var(--muted)}
.vgl__k--die .vgl__wer{display:flex; align-items:center; gap:.55rem; margin-bottom:1.55rem}
.vgl__liste{list-style:none; margin:0; padding:0; display:grid; gap:.68rem}
.vgl__liste li{display:flex; gap:.6rem; align-items:flex-start; font-size:.875rem; line-height:1.48}
.vgl__liste svg{flex:none; margin-top:.15rem}
.vgl__k--wir svg{color:var(--messing)}
.vgl__k--die{color:var(--muted)}
.vgl__k--die svg{color:#9A907F}
.vgl__stoerer{position:absolute; top:-13px; right:1.2rem; padding:.28rem .7rem; border-radius:var(--r-chip);
  background:var(--espresso); color:var(--messing-h); font-size:.715rem; font-weight:600; letter-spacing:.01em}
.vgl__vs{width:50px; height:50px; border-radius:var(--r-chip); display:grid; place-items:center;
  background:var(--espresso); color:var(--messing-h); font-family:'RSerif',Georgia,serif; font-weight:500;
  font-size:.865rem; letter-spacing:.03em; box-shadow:var(--schatten-2)}
.vgl__cta{text-align:center; margin-top:clamp(1.5rem,1rem + 1.6vw,2.2rem)}
@media (max-width:900px){
  .vgl{grid-template-columns:minmax(0,1fr)}
  .vgl__k--wir{transform:none}
  .vgl__vs{margin-inline:auto}
}

/* ================================================================
   Ablauf — vier Bildkarten, Nummernkreis exakt auf der Bildkante
   ================================================================ */
.ablauf{--luecke:clamp(.8rem,.4rem + 1.2vw,1.4rem);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--luecke)}
.karte{background:var(--papier); border:1px solid var(--linie-zart); border-radius:var(--r-karte);
  overflow:hidden; box-shadow:var(--schatten-1); position:relative}
.karte>img{aspect-ratio:16/10; width:100%; object-fit:cover}
.karte__text{position:relative; padding:1.5rem 1.2rem 1.35rem}
.karte__nr{
  position:absolute; top:0; right:22px; transform:translateY(-50%);
  width:44px; height:44px; border-radius:var(--r-chip); display:grid; place-items:center;
  background:var(--espresso); color:var(--messing-h); box-shadow:var(--schatten-2);
  font-family:'RSerif',Georgia,serif; font-weight:500; font-size:1.02rem; letter-spacing:.02em;
}
.karte__text::before{
  content:''; position:absolute; top:0; right:100%; width:var(--luecke); height:2px;
  background:var(--linie); z-index:2;
}
.ablauf>.karte:first-child .karte__text::before{display:none}
.karte h3{margin:0 0 .42rem; font-size:1.02rem}
.karte p{font-size:.85rem; line-height:1.55; color:var(--muted); margin:0}
@media (max-width:980px){
  .ablauf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ablauf>.karte:nth-child(3) .karte__text::before{display:none}
}
@media (max-width:620px){
  .ablauf{grid-template-columns:minmax(0,1fr); --luecke:1.4rem}
  .karte__text::before{display:none !important}
  .karte::before{content:''; position:absolute; left:50%; bottom:100%; width:2px; height:var(--luecke);
    background:var(--linie)}
  .ablauf>.karte:first-child::before{display:none}
  .karte__nr{right:auto; left:22px}
}

/* ================================================================
   Einzugsgebiet — links Inhalt, rechts die Karte ohne Kasten
   ================================================================ */
.gebiet{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(1.6rem,1rem + 2.4vw,3rem); align-items:center}
.gebiet__punkte{list-style:none; margin:1.3rem 0 1.7rem; padding:0; display:grid; gap:.72rem}
.gebiet__punkte li{display:flex; gap:.65rem; align-items:flex-start; font-size:.895rem; line-height:1.5}
.gebiet__punkte svg{flex:none; margin-top:.16rem; color:var(--messing)}
.gebiet__knoepfe{display:flex; flex-wrap:wrap; gap:.7rem}
.gebiet__karte{position:relative}
/* Die radiale Maske in der SVG lässt die Kantenmitten noch zu rund 75 % stehen —
   dadurch sitzt die Karte als sichtbares Rechteck in der Fläche. Diese zweite Maske
   nimmt nur die vier Kanten weg und lässt die Mitte unangetastet. */
.gebiet__karte img{
  width:100%; height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-composite:intersect;
}
@media (max-width:900px){
  .gebiet{grid-template-columns:minmax(0,1fr)}
}

/* ================================================================
   Anfrage-Sektion — dunkles Foto, Quiz als helle Insel
   ================================================================ */
.anfrage{position:relative; isolation:isolate; color:var(--on-dark); overflow:hidden}
.anfrage__bild{position:absolute; inset:0; z-index:-2}
.anfrage__bild img{width:100%; height:100%; object-fit:cover}
.anfrage::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(96deg,rgba(12,9,6,.97) 0%,rgba(12,9,6,.94) 46%,rgba(12,9,6,.72) 100%)}
.anfrage__in{display:grid; grid-template-columns:minmax(0,1fr) minmax(370px,.92fr);
  gap:clamp(1.8rem,1.1rem + 2.6vw,3.4rem); align-items:center}
.anfrage__punkte{list-style:none; margin:1.35rem 0 0; padding:0; display:grid; gap:.85rem}
.anfrage__punkte li{display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; line-height:1.5;
  color:var(--on-dark-mute)}
.anfrage__punkte svg{flex:none; margin-top:.16rem; color:var(--messing-h)}
.anfrage__punkte b{color:#fff; font-weight:600}
@media (max-width:1000px){.anfrage__in{grid-template-columns:minmax(0,1fr)}}

/* ================================================================
   FAQ
   ================================================================ */
.faq{max-width:840px; margin-inline:auto}
.faq__p{border-bottom:1px solid var(--linie-zart)}
.faq__p:first-child{border-top:1px solid var(--linie-zart)}
.faq__f{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:'RSerif',Georgia,serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.012em; font-size:clamp(.94rem,.9rem + .22vw,1.06rem); line-height:1.25;
}
.faq__f:hover{color:var(--messing-t)}
.faq__zeichen{flex:none; width:26px; height:26px; border-radius:var(--r-chip); display:grid; place-items:center;
  border:1px solid var(--linie); color:var(--messing-t); transition:transform .3s var(--feder), background-color .2s}
.faq__f[aria-expanded="true"] .faq__zeichen{transform:rotate(45deg); background:var(--messing); color:#fff; border-color:var(--messing)}
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s var(--ruhig)}
.faq__p.ist-offen .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{font-size:.895rem; line-height:1.62; color:var(--muted); margin:0 0 1.15rem; max-width:70ch}

/* ================================================================
   Final-CTA-Band
   ================================================================ */
.final{position:relative; isolation:isolate; color:var(--on-dark); text-align:center; overflow:hidden}
.final__bild{position:absolute; inset:0; z-index:-2}
.final__bild img{width:100%; height:100%; object-fit:cover}
.final::after{content:''; position:absolute; inset:0; z-index:-1; background:rgba(15,12,8,.84)}
.final h2{margin-bottom:.9rem}
.final .lead{margin-inline:auto; color:var(--on-dark-mute)}
.final__knoepfe{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.6rem}

/* ================================================================
   Fußzeile
   ================================================================ */
.fuss{background:var(--espresso); color:var(--on-dark-mute); padding:clamp(2.4rem,1.8rem + 2.4vw,3.6rem) 0 1.6rem}
.fuss__r{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:clamp(1.4rem,1rem + 1.8vw,2.6rem)}
.fuss__logo{height:68px; width:auto; margin-bottom:1rem}
.fuss p{font-size:.855rem; line-height:1.6; color:var(--on-dark-mute)}
.fuss h4{color:#fff; font-size:.88rem; margin:0 0 .85rem}
.fuss__liste{list-style:none; margin:0; padding:0; display:grid; gap:.1rem}
.fuss__liste a,.fuss__liste span{font-size:.855rem; color:var(--on-dark-mute); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px; min-width:44px}
.fuss__liste a:hover{color:var(--messing-h)}
.fuss__liste svg{flex:none; color:var(--messing)}
.fuss__unten{margin-top:clamp(1.8rem,1.4rem + 1.4vw,2.6rem); padding-top:1.2rem;
  border-top:1px solid rgba(198,166,112,.18); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  align-items:center; justify-content:space-between; font-size:.79rem}
.fuss__unten a{color:var(--on-dark-mute); text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px}
.fuss__unten a:hover{color:var(--messing-h)}
.fuss__rechts{display:flex; flex-wrap:wrap; gap:0 1.2rem; align-items:center}
@media (max-width:820px){.fuss__r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fuss__marke{grid-column:1 / -1}}
@media (max-width:520px){.fuss__r{grid-template-columns:minmax(0,1fr)}}

/* ================================================================
   Overlays — Modal, Pop-up, Cookie-Wall
   ================================================================ */
.overlay{
  position:fixed; inset:0; z-index:1100; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(15,12,8,.7); backdrop-filter:blur(3px); overflow-y:auto;
}
.overlay.ist-da{display:flex}
.overlay__zu{
  position:absolute; top:.6rem; right:.6rem; z-index:3;
  width:34px; height:34px; border-radius:var(--r-chip); border:1px solid var(--linie);
  background:#fff; color:var(--text); display:grid; place-items:center; cursor:pointer;
}
.overlay__zu:hover{border-color:var(--messing); color:var(--messing-t)}
#formModal .qk{max-width:440px; width:100%; margin:auto}

/* Pop-up: schmal, alles zentriert */
/* Pop-up eine Stufe über dem Formular-Modal, damit die Leiter eindeutig bleibt */
#promo{z-index:1150}
.promo__k{
  position:relative; max-width:430px; width:100%; margin:auto;
  background:var(--papier); color:var(--text); border-radius:var(--r-flaeche);
  overflow:hidden; box-shadow:0 22px 52px rgba(15,12,8,.06); text-align:center;
}
.promo__bild{aspect-ratio:16/9; width:100%; object-fit:cover}
.promo__badge{
  position:absolute; top:.85rem; left:.85rem; padding:.3rem .72rem; border-radius:var(--r-chip);
  background:var(--espresso); color:var(--messing-h); font-size:.715rem; font-weight:600;
}
.promo__in{padding:1.35rem 1.3rem 1.5rem}
.promo__in h3{margin:0 0 .6rem}
.promo__in p{font-size:.875rem; line-height:1.55; color:var(--muted); margin:0 0 .9rem}
.promo__liste{list-style:none; margin:0 0 1.15rem; padding:0; display:grid; gap:.5rem; text-align:left}
.promo__liste li{display:flex; gap:.55rem; align-items:flex-start; font-size:.845rem; line-height:1.45}
.promo__liste svg{flex:none; margin-top:.15rem; color:var(--messing)}
.promo__knoepfe{display:grid; gap:.55rem}

/* Cookie-Wall — Logo mittig oben, beide Knöpfe gleich breit in einer Zeile */
.kekse{position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:1.2rem}
.kekse.zeig{display:flex}
.kekse__hg{position:absolute; inset:0; background:rgba(15,12,8,.62); backdrop-filter:blur(4px)}
.kekse__k{
  position:relative; max-width:472px; width:100%; max-height:88vh; overflow-y:auto;
  background:var(--papier); color:var(--text); border-radius:var(--r-flaeche);
  padding:1.6rem 1.5rem 1.4rem; text-align:center; box-shadow:0 22px 52px rgba(15,12,8,.06);
}
.kekse__logo{height:66px; width:auto; margin:0 auto .7rem}
.kekse__marke{font-size:.775rem; font-weight:600; color:var(--messing-t); margin:0 0 .5rem}
.kekse__k-titel{font-size:1.2rem; margin:0 0 .7rem}
.kekse__k p{font-size:.83rem; line-height:1.55; color:var(--muted); text-align:left}
.kekse__panel{margin:.9rem 0 .2rem; padding:.85rem; border:1px solid var(--linie-zart);
  border-radius:var(--r-karte); background:var(--leinen); text-align:left}
.kekse__zeile{display:flex; align-items:center; justify-content:space-between; gap:.9rem;
  padding:.55rem 0; border-bottom:1px solid var(--linie-zart)}
.kekse__zeile:last-of-type{border-bottom:0}
.kekse__zeile b{display:block; font-size:.83rem; font-weight:600; color:var(--text)}
.kekse__zeile span span{display:block; font-size:.755rem; color:var(--muted); line-height:1.4}
.kekse__immer{font-size:.735rem; font-weight:600; color:var(--messing-t); white-space:nowrap}
.schalter{
  flex:none; width:44px; height:25px; border-radius:var(--r-chip); border:1px solid var(--linie);
  background:var(--leinen-2); position:relative; cursor:pointer; transition:background-color .2s, border-color .2s;
}
/* Der Schalter soll wie ein Schalter aussehen (44 x 25), aber wie ein Knopf zu treffen
   sein. Deshalb wird nur die TREFFERFLAECHE auf 44 px gezogen, nicht die Optik.
   Nachgewiesen wird das mit elementFromPoint am oberen und unteren Rand — ein
   getBoundingClientRect sieht die Vergroesserung durch ein Pseudoelement naemlich nicht. */
.schalter::before{content:''; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:44px}
.schalter::after{content:''; position:absolute; top:2px; left:2px; width:19px; height:19px;
  border-radius:var(--r-chip); background:#fff; box-shadow:var(--schatten-1); transition:transform .22s var(--feder)}
.schalter[aria-checked="true"]{background:var(--messing); border-color:var(--messing)}
.schalter[aria-checked="true"]::after{transform:translateX(19px)}
.kekse__knoepfe{display:grid; gap:.55rem; margin-top:1.1rem}
.kekse__reihe{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.5rem}
.kekse__reihe .btn{width:100%}
.kekse__mehr{
  justify-self:center; padding:0 .6rem; border:0; background:none; cursor:pointer;
  font-size:.8rem; font-weight:600; color:var(--muted); text-decoration:underline;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
}
.kekse__mehr:hover{color:var(--messing-t)}
.kekse__links{display:flex; flex-wrap:wrap; gap:0 .5rem; justify-content:center; margin:.6rem 0 0}
/* Die drei Rechtslinks und der Einstellungen-Knopf lagen bei 19-26 px Hoehe. Das Banner
   ist der erste Kontakt auf dem Handy — hier muss jedes Ziel 44 px hoch treffbar sein.
   Die Hoehe kommt ueber Padding, damit der Text seine Groesse behaelt. */
.kekse__links a{font-size:.755rem; color:var(--muted); text-decoration:underline;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 .45rem}
.kekse__links a:hover{color:var(--messing-t)}

/* ================================================================
   Schwebender Kontaktknopf
   ================================================================ */
.fab{position:fixed; right:clamp(.9rem,2vw,1.5rem); bottom:clamp(.9rem,2vw,1.5rem); z-index:940;
  display:flex; flex-direction:column-reverse; align-items:flex-end; gap:.6rem;
  /* Der Kasten ist 175 x 204 px, sichtbar davon nur der runde Knopf. visibility:hidden
     nimmt die Liste zwar aus dem Hit-Test, der Container selbst fängt aber weiter alles
     darunter ab — am Seitenende war das der einzige Widerrufsweg der Seite. */
  pointer-events:none}
.fab__knopf,.fab__p{pointer-events:auto}
.fab__knopf{
  width:54px; height:54px; border-radius:var(--r-chip); border:0; cursor:pointer;
  background:var(--messing); color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(169,139,95,.22);   /* farbiger Schein, Obergrenze fuer Primaerknoepfe */ transition:transform .22s var(--feder), background-color .2s;
}
.fab__knopf:hover{background:var(--messing-t); transform:translateY(-2px)}
.fab__liste{display:grid; gap:.5rem; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ruhig), transform .22s var(--feder), visibility .22s}
.fab.ist-offen .fab__liste{opacity:1; visibility:visible; transform:none}
/* Solange der Knopf nicht eingeblendet ist, darf auch eine erzwungene
   ist-offen-Klasse nichts sichtbar oder klickbar machen — visibility:visible
   auf einem Kind sticht sonst das hidden des Elternteils. */
.fab:not(.ist-da),.fab:not(.ist-da) *{visibility:hidden !important; pointer-events:none !important}
.fab__p{
  display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .85rem .55rem .6rem;
  min-height:44px;   /* Touch-Mindestgröße */
  border-radius:var(--r-chip); background:var(--papier); color:var(--text); text-decoration:none;
  font-size:.83rem; font-weight:600; white-space:nowrap; box-shadow:var(--schatten-3);
  border:1px solid var(--linie-zart);
}
.fab__p svg{flex:none; color:var(--messing)}
.fab__p--wa svg{color:#25D366}
.fab__p:hover{border-color:var(--messing)}

/* ================================================================
   Bewegung — 10-px-Reveal, gestaffelt
   ================================================================ */
.js-reveal [data-reveal]{opacity:0; transform:translateY(10px)}
.js-reveal [data-reveal].ist-sichtbar{opacity:1; transform:none;
  transition:opacity .55s var(--ruhig), transform .55s var(--feder)}
.js-reveal [data-reveal-gruppe]>*{opacity:0; transform:translateY(10px)}
.js-reveal [data-reveal-gruppe].ist-sichtbar>*{opacity:1; transform:none;
  transition:opacity .55s var(--ruhig), transform .55s var(--feder)}
.js-reveal [data-reveal-gruppe].ist-sichtbar>*:nth-child(2){transition-delay:.07s}
.js-reveal [data-reveal-gruppe].ist-sichtbar>*:nth-child(3){transition-delay:.14s}
.js-reveal [data-reveal-gruppe].ist-sichtbar>*:nth-child(4){transition-delay:.21s}
.js-reveal [data-reveal-gruppe].ist-sichtbar>*:nth-child(5){transition-delay:.28s}
.js-reveal [data-reveal-gruppe].ist-sichtbar>*:nth-child(6){transition-delay:.35s}
.js-reveal [data-reveal-gruppe].ist-sichtbar>*:nth-child(7){transition-delay:.42s}
@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal],.js-reveal [data-reveal-gruppe]>*{opacity:1; transform:none; transition:none}
  .kachel img,.msg{transition:none}
}

/* Handgezeichneter Unterstrich unter dem Schlüsselwort der H1 */
.strich{position:relative; display:inline-block; white-space:nowrap}
.strich svg{position:absolute; left:0; right:0; bottom:-.02em; width:100%; height:.26em; overflow:visible}
.strich path{fill:none; stroke:var(--messing-h); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420}
.ist-sichtbar .strich path,.hero .strich path{animation:strichZiehen 1s var(--ruhig) .45s forwards}
@keyframes strichZiehen{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.strich path{stroke-dashoffset:0; animation:none}}

/* ---------- Hilfen ---------- */
/* Der Honigtopf muss WIRKLICH verschwinden. Off-screen heißt für Autofill,
   Passwortmanager und Prüfskripte: ganz normales Feld — und der Lead wird
   still verworfen. Siehe Memory formular-honeypot-und-zeitsperre-verschlucken-leads. */
.nix{display:none !important}

.nur-sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.sprung{position:absolute; left:-9999px; top:0; z-index:1300; padding:.7rem 1.1rem;
  background:var(--espresso); color:#fff; border-radius:0 0 var(--r-knopf) 0}
.sprung:focus{left:0}

/* ================================================================
   Rechtsseiten & 404 — Impressum, Datenschutz, Cookie-Richtlinie
   Eigene Schicht, greift nur über <body class="rechtsseite">.
   ================================================================ */
.rechtsseite{background:var(--papier)}

/* Kopfband — schafft Platz unter der fest stehenden Kopfzeile */
.rechts-kopf{padding:calc(76px + clamp(1.9rem,1.3rem + 2.2vw,3.2rem)) 0 clamp(1.7rem,1.3rem + 1.6vw,2.7rem)}
.rechts-kopf h1{font-size:clamp(1.65rem,1.1rem + 2.1vw,2.7rem); margin-bottom:.5rem}
.rechts-kopf__zurueck{display:inline-block; margin-bottom:.9rem; font-size:.86rem;
  color:var(--on-dark-mute); text-decoration:none}
.rechts-kopf__zurueck:hover{color:var(--messing-h)}
.rechts-kopf p{max-width:58ch}
@media (max-width:1000px){
  .rechts-kopf{padding-top:calc(66px + clamp(1.7rem,1.2rem + 2vw,2.8rem))}
}

/* Lesespalte — rund 70 Zeichen */
.legal{max-width:70ch; margin-inline:auto}
.legal h2{font-size:clamp(1.16rem,1rem + .62vw,1.5rem); margin:2.5rem 0 .75rem;
  padding-top:1.1rem; border-top:1px solid var(--linie-zart)}
.legal h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legal h3{font-family:'Jakarta',system-ui,sans-serif; font-weight:700;
  text-transform:none; letter-spacing:0; line-height:1.35; color:var(--espresso);
  font-size:clamp(1rem,.95rem + .28vw,1.12rem); margin:1.8rem 0 .55rem}
.legal p,.legal li{font-size:.95rem; line-height:1.78}
.legal ul{margin:0 0 1rem; padding-left:1.2rem}
.legal li{margin-bottom:.32rem}
.legal a{color:var(--messing-t); text-underline-offset:2px}
.legal a:hover{color:var(--espresso)}
.klein{font-size:.82rem; color:var(--muted); line-height:1.65}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em; background:var(--leinen-2); border-radius:6px; padding:.06rem .32rem;
  color:var(--espresso)}
.legal .anschrift{background:#fff; border:1px solid var(--linie-zart);
  border-radius:var(--r-karte); padding:1rem 1.15rem; box-shadow:var(--schatten-1)}

/* Tabelle in der Cookie-Richtlinie */
.legal-tabelle{overflow-x:auto; background:#fff; border:1px solid var(--linie-zart);
  border-radius:var(--r-karte); box-shadow:var(--schatten-1); margin:0 0 1.2rem}
.legal table{width:100%; min-width:520px; border-collapse:collapse; font-size:.87rem}
.legal th,.legal td{padding:.72rem .9rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--linie-zart); line-height:1.55}
.legal thead th{background:var(--leinen-2); font-weight:600; font-size:.81rem;
  letter-spacing:.01em}
.legal tbody tr:last-child td{border-bottom:0}

/* Offene Kundenangaben — sichtbar, maschinenlesbar, vor Livegang zu ersetzen */
[data-platzhalter]{
  display:inline-block; padding:.1rem .5rem; margin:.06rem 0;
  border:1px dashed var(--messing); border-radius:var(--r-knopf);
  background:rgba(169,139,95,.13); color:var(--messing-t);
  font-weight:600; font-size:.93em; line-height:1.55;
}
p[data-platzhalter],div[data-platzhalter]{display:block}

/* ---------- 404 ---------- */
.vier{max-width:660px; margin-inline:auto; text-align:center;
  padding:calc(76px + clamp(2.2rem,1.6rem + 2.6vw,3.8rem)) 0 clamp(2rem,1.5rem + 2vw,3.2rem)}
@media (max-width:1000px){.vier{padding-top:calc(66px + clamp(2rem,1.5rem + 2.2vw,3.2rem))}}
.vier__zahl{font-family:'RSerif',Georgia,serif; font-weight:500; line-height:1;
  font-size:clamp(4rem,2.4rem + 9vw,7.5rem); color:var(--messing); margin:0 0 .5rem}
.vier h1{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.3rem); margin-bottom:.8rem}
.vier .lead{margin-inline:auto; margin-bottom:1.6rem}
.vier__knoepfe{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center}
.vier__liste{display:grid; gap:.6rem; margin-top:2rem; text-align:left; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:639px){.vier__liste{grid-template-columns:minmax(0,1fr)}}
.vier__liste a{display:flex; align-items:center; gap:.8rem; text-decoration:none;
  padding:.85rem 1rem; background:#fff; border:1px solid var(--linie-zart);
  border-radius:var(--r-karte); box-shadow:var(--schatten-1);
  transition:border-color .2s var(--ruhig), box-shadow .2s var(--ruhig)}
.vier__liste a:hover{border-color:var(--messing); box-shadow:var(--schatten-2)}
.vier__liste svg{flex:none; color:var(--messing)}
.vier__liste b{display:block; font-size:.93rem; font-weight:600; color:var(--text)}
.vier__liste b + span{font-size:.83rem; color:var(--muted); line-height:1.5}

/* ── Leistungs-Boxen (loest das Leistungsverzeichnis mit Bildbuehne ab, 17.09.2026) ──
   Florian: "schoener und vor allem uebersichtlicher". Bewusst Boxen statt Tabs —
   Leistungen bleiben nach RGN-Standard offen sichtbar, Tabs wuerden sie verstecken.
   Raster aus 6 Spalten: die ersten drei Karten je 2 Spalten (3 pro Reihe), die letzten
   beiden je 3 Spalten (2 pro Reihe). So bleibt keine Luecke in der zweiten Reihe. */
.lk{display:grid; grid-template-columns:repeat(6,1fr); gap:1.15rem; margin-top:2.2rem}
.lk__k{grid-column:span 2; display:flex; flex-direction:column;
  background:var(--papier); border:1px solid var(--linie-zart); border-radius:var(--r-karte);
  overflow:hidden; box-shadow:var(--schatten-1)}
.lk__k:nth-child(4),.lk__k:nth-child(5){grid-column:span 3}
.lk__bild{position:relative; overflow:hidden}
.lk__bild img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  transition:transform .5s var(--feder)}
.lk__k:hover .lk__bild img{transform:scale(1.03)}
.lk__text{padding:1.3rem 1.25rem .9rem; flex:1}
.lk__text h3{font-size:1.16rem; margin:0 0 .5rem}
.lk__text p{margin:0; font-size:.9rem; color:var(--muted); line-height:1.62}
.lk__haken{list-style:none; margin:0; padding:0 1.25rem 1.25rem;
  display:flex; flex-wrap:wrap; gap:.4rem}
.lk__haken li{display:inline-flex; align-items:center; gap:.32rem;
  padding:.3rem .6rem; border-radius:var(--r-chip); background:var(--leinen-2);
  border:1px solid var(--linie-zart); font-size:.745rem; font-weight:600; color:var(--text)}
.lk__hk{width:12px; height:12px; flex:none; color:var(--messing-t)}
.lk__fuss{margin:1.6rem 0 0; font-size:.85rem; color:var(--muted); max-width:46rem}

@media (max-width:1100px){
  /* Zwei pro Reihe: alle Karten gleich breit, sonst steht die letzte allein und wirkt wie ein Fehler. */
  .lk{grid-template-columns:repeat(2,1fr); gap:1rem}
  .lk__k,.lk__k:nth-child(4),.lk__k:nth-child(5){grid-column:span 1}
  .lk__k:nth-child(5){grid-column:span 2}
  .lk__k:nth-child(5) .lk__bild img{aspect-ratio:21/9}
}
@media (max-width:700px){
  .lk{grid-template-columns:1fr}
  .lk__k,.lk__k:nth-child(4),.lk__k:nth-child(5){grid-column:span 1}
  .lk__k:nth-child(5) .lk__bild img{aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){
  .lk__k:hover .lk__bild img{transform:none}
}