/* ═══════════════════════════════════════════════════════════════
   CSC Entrümpelung — Entwurf X
   Abstands- und Schriftskala von Anfang an gesetzt (P1-1 / P1-2).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Abstandsskala */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Schriftgrößenskala */
  /* Fliesstext in rem, damit der Browser-Schriftgrad greift.
     Die Zielgruppe stellt ihn haeufig hoch. Anzeigegroessen bleiben px. */
  --t1:.6875rem; --t2:.75rem;  --t3:.875rem; --t4:1rem; --t5:1.125rem;
  --t6:1.3125rem; --t7:25px; --t8:30px; --t9:38px;

  /* Farben
     Rueckweg: der kalte Bestand lag bei
       --tinte:#0A0B0D  --tinte2:#101216  --tinte3:#171A1F
       --linie:#23262B  --grau:#9A9DA2
     Getauscht, weil alle vier B > R hatten (blaukalt) waehrend saemtliche
     Zeichnungen warm sind, und weil die Stufen mit 1,05:1 und 1,13:1
     nicht auseinanderzuhalten waren – vierzehn Abschnitte auf einem Wert. */
  --tinte:#12100D;
  --tinte2:#1E1A16;
  --tinte3:#282320;
  --linie:#38312A;
  --papier:#F1EFE9;
  --papier2:#DEDBD2;
  --grau:#A29B92;
  --feld:#332C25;        /* Eingabefelder – heller als ihre Tafel, nicht dunkler */
  --feld-rand:#4F4438;
  --signal-tief:#B00060; /* nur fuer Rosa auf den beiden hellen Baendern */
  --signal:#E5007D;
  --signal-hell:#FF52A8;

  --breite:1220px;
  --weich:cubic-bezier(.22,1,.36,1);   /* traegt, laeuft aus  */
  --knapp:cubic-bezier(.32,.72,.35,1); /* Zustand wechselt    */
  --schwung:cubic-bezier(.34,1.3,.5,1);/* hebt an, federt     */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--tinte);color:var(--papier);
  font:400 var(--t4)/1.62 Archivo,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.028em;line-height:.98}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.w{width:100%;max-width:var(--breite);margin:0 auto;padding:0 var(--s5)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--signal);
  color:#fff;padding:var(--s3) var(--s5);font-size:var(--t3)}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--signal-hell);outline-offset:3px;border-radius:2px}

/* Korn über allem */
.korn{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Augenbraue, Kopfzeilen, Führungstext */
.augen{
  font:500 var(--t2)/1.4 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal-hell);
  margin:0 0 var(--s4);
}
.kopfzeile{max-width:44rem;margin:0 0 var(--s8)}
.kopfzeile h2{font-size:clamp(28px,3.6vw,46px);margin:0 0 var(--s5)}
.fuehrung{color:var(--grau);font-size:var(--t5);max-width:52ch}
.kopfzeile--hell .augen{color:var(--signal-tief)}
.kopfzeile--hell .fuehrung{color:#5D5853}

/* Knöpfe */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font:600 var(--t3)/1 Archivo,sans-serif;text-decoration:none;
  padding:var(--s3) var(--s5);border-radius:999px;border:1px solid transparent;
  transition:transform .28s var(--schwung),background .2s var(--knapp),border-color .2s var(--knapp),color .2s var(--knapp);
  white-space:nowrap;
}
.knopf--voll{background:var(--signal);color:#fff}
.knopf--voll:hover{background:#FF1A8D;transform:translateY(-2px)}
.knopf--rand{border-color:var(--linie);color:var(--papier)}
.knopf--rand:hover{border-color:var(--papier);transform:translateY(-2px)}
.knopf--gross{font-size:var(--t4);padding:var(--s4) var(--s7)}
.knopf--breit{width:100%}

/* Kopfleiste */
.kopf{
  position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;
  gap:var(--s7);padding:var(--s4) var(--s5);
  /* Logo und Schlagzeile standen auf verschiedenen Fluchtlinien – auf 1920 px
     lagen 326 px dazwischen, was wie ein Loch links aussah. */
  padding-inline:max(var(--s5), calc((100vw - var(--breite))/2 + var(--s5)));
  background:rgba(18,16,13,0);backdrop-filter:blur(0px);
  transition:background .45s var(--weich),backdrop-filter .45s,border-color .45s;
  border-bottom:1px solid transparent;
}
.kopf.fest{background:rgba(18,16,13,.82);backdrop-filter:blur(14px);border-bottom-color:var(--linie)}
/* Ohne JavaScript wird .fest nie gesetzt – die Leiste bliebe durchsichtig und
   stuende ueber den hellen Baendern papierfarben auf Papier. Dann dauerhaft dunkel. */
.no-js .kopf{background:rgba(18,16,13,.9);backdrop-filter:blur(14px);
  border-bottom-color:var(--linie)}
.marke{display:flex;align-items:center;gap:var(--s3);text-decoration:none;flex:0 0 auto}
.marke img{width:104px;height:auto}
.marke span{
  font:500 var(--t1)/1 "IBM Plex Mono",monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grau);padding-left:var(--s3);
  border-left:1px solid var(--linie);
}
.nav{display:flex;gap:var(--s6);margin-left:auto}
.nav a{
  font-size:var(--t3);text-decoration:none;color:var(--grau);
  transition:color .25s;position:relative;padding:var(--s2) 0;
}
.nav a:hover{color:var(--papier)}
.kopf-akt{display:flex;align-items:center;gap:var(--s4)}
.tel{
  font:500 var(--t3)/1 "IBM Plex Mono",monospace;text-decoration:none;
  color:var(--papier);white-space:nowrap;transition:color .25s;
}
.tel:hover{color:var(--signal-hell)}

/* Hero */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  /* Kein seitliches Polster: das traegt .hero-satz, genau wie .w es fuer
     alle anderen Abschnitte traegt. Sonst addieren sich zwei Quellen. */
  padding:140px 0 var(--s9);overflow:hidden;
  /* Breite des Textrahmens – daran haengt das Bild, damit sich das Verhaeltnis
     zwischen Schlagzeile und Aufkleber ueber alle Bildschirme nicht aendert. */
  --rahmen:min(100vw, var(--breite));
}
.hero-glut{
  position:absolute;right:-8%;bottom:-24%;width:88vw;max-width:1180px;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(229,0,125,.20),rgba(229,0,125,0) 62%);
  pointer-events:none;filter:blur(8px);
}
.hero-satz{position:relative;z-index:3;width:100%;max-width:var(--breite);margin:0 auto;
  padding-inline:var(--s5)}
/* Groesser, damit die Zeilen unter den Aufkleber laufen. Der Aufkleber liegt
   darueber – so machen Aufkleber das. Die weisse Stanzkontur trennt beides. */
.hero h1{
  font-size:clamp(42px,8.5vw,122px);font-weight:900;letter-spacing:-.045em;
  line-height:.9;margin:0 0 var(--s6);max-width:none;
}
.hero h1 em{font-style:normal;color:var(--signal-hell)}
.vorspann{font-size:clamp(17px,1.6vw,21px);color:var(--grau);max-width:44ch;margin:0 0 var(--s7)}
.hero-akt{display:flex;flex-wrap:wrap;gap:var(--s4);margin:0 0 var(--s6)}
/* Die Ueberlagerung von Aufkleber und Schrift ist ein Luxus breiter Schirme.
   Unterhalb von rund 1300 px reicht der Platz nicht, dann bricht diese Zeile
   um, statt hinter dem Sperrmuell zu verschwinden. Unter 760 px steht das
   Bild ohnehin gestapelt darunter. */
.hero-fuss{
  font:400 var(--t3)/1.6 "IBM Plex Mono",monospace;color:#968F88;
}
@media (min-width:761px){
  .hero-fuss{max-width:min(60ch,42vw)}
}
.hero-fuss b{color:var(--papier);font-weight:500}
.hero-bild{
  position:absolute;bottom:32px;margin:0;z-index:4;
  width:calc(var(--rahmen) * .63);
  right:calc((100vw - var(--rahmen))/2 - 72px);
  pointer-events:none;
  filter:drop-shadow(14px 16px 0 rgba(0,0,0,.5)) drop-shadow(0 40px 80px rgba(0,0,0,.62));
  will-change:transform;
}
.hero-hinab{position:absolute;bottom:var(--s6);z-index:3;
  left:max(var(--s5),calc((100vw - var(--breite))/2 + var(--s5)))}
.hero-hinab span{
  display:block;width:1px;height:56px;
  background:linear-gradient(var(--linie),var(--signal));
  animation:hinab 2.4s var(--weich) infinite;
}
@keyframes hinab{0%{transform:scaleY(.2);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* Zahlenband */
/* Vier gleiche Zellen mit Rahmen lasen sich als Widget. Ohne Senkrechte
   ist es ein Band aus vier Aussagen – die Ziffern tragen die Gliederung. */
.band-zahlen{border-block:1px solid var(--linie);background:var(--tinte2);position:relative;z-index:4}
.zahlen{display:grid;grid-template-columns:repeat(4,1fr)}
.zahlen li{padding:var(--s7) var(--s5) var(--s7) 0;border-top:2px solid transparent}
/* Der Akzent sitzt genau ueber der ersten Zahl, nicht auf einem geratenen Prozentwert. */
.zahlen li:first-child{border-top-color:var(--signal)}
.zahlen b{display:block;font-size:clamp(46px,5.8vw,92px);font-weight:900;letter-spacing:-.045em;
  line-height:.92;margin:0 0 var(--s3)}
.zahlen span{font-size:var(--t4);color:var(--grau);display:block;max-width:18ch;line-height:1.45}

/* Die Verwandlung */
.verwandlung{position:relative;height:340vh}
.verw-buehne{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.verw-innen{display:grid;grid-template-columns:minmax(280px,.74fr) 1.26fr;gap:var(--s8);
  align-items:center;width:100%}
.verw-text h2{font-size:clamp(32px,4.8vw,64px);margin:0 0 var(--s7)}
.verw-schritte li{
  padding:var(--s4) 0 var(--s4) var(--s7);position:relative;
  opacity:.28;transition:opacity .6s var(--weich);
}
.verw-schritte li.ist{opacity:1}
.verw-schritte .nr{
  position:absolute;left:0;top:var(--s4);
  font:500 var(--t2)/1 "IBM Plex Mono",monospace;color:var(--signal-hell);
}
.verw-schritte b{display:block;font-size:var(--t6);font-weight:600;letter-spacing:-.02em;
  margin:0 0 var(--s2)}
.verw-schritte p{color:var(--grau);font-size:var(--t3);max-width:38ch}
.verw-leiste{margin-top:var(--s7);height:2px;background:var(--linie);border-radius:2px;overflow:hidden}
.verw-leiste i{display:block;height:100%;width:0;background:var(--signal);
  transition:width .25s linear}

.verw-bilder{position:relative;aspect-ratio:5/4}
.vb{
  position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(1.05) translateY(18px);
  transition:opacity .75s var(--weich),transform 1s var(--weich);
}
.vb.ist{opacity:1;transform:none}
.vb img{max-height:100%;width:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.verw-weg{position:absolute;inset:auto 0 0;height:1px}

/* Ablauf */
.ablauf{padding:var(--s9) 0}
/* Drei Schritte sind der Kernmechanismus des ganzen Angebots und standen
   als Fussnote da: winzige Ziffer, kleine Zeile, 662 px Abschnitt fast leer.
   Die Ziffern werden Konturschrift – dieselbe Sprache wie im Laufband –
   und eine Linie laeuft durch die Reihe, heiss am Anfang, ruhig am Ende. */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);
  margin-top:var(--s8);position:relative}
.schritte::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--signal),var(--linie) 58%);
}
.schritte li{border-top:0;padding-top:var(--s6)}
.schritte .nr{
  display:block;margin:0 0 var(--s5);
  font:900 clamp(58px,6.6vw,104px)/.78 Archivo,sans-serif;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px #574B40;
}
.schritte li:first-child .nr{-webkit-text-stroke-color:var(--signal)}
/* Ohne Konturschrift waeren die Ziffern unsichtbar – hier tragen sie Bedeutung. */
@supports not (-webkit-text-stroke:1px currentColor){
  .schritte .nr{color:var(--linie)}
  .schritte li:first-child .nr{color:var(--signal)}
}
.schritte h3{font-size:clamp(21px,2.2vw,32px);margin:0 0 var(--s4);letter-spacing:-.022em}
.schritte p{color:var(--grau);font-size:var(--t4);max-width:32ch}

/* Leistungen */
.leistungen{padding:var(--s9) 0;background:var(--tinte2);border-block:1px solid var(--linie)}
/* TOT – kein .karte im Dokument (grep = 0). Ersetzt durch die
   waagerechte .lk-Spur. Eigener Aufraeumdurchgang, siehe LIVEGANG.txt.
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.karte{
  background:var(--tinte3);border:1px solid var(--linie);border-radius:14px;
  padding:var(--s6);position:relative;overflow:hidden;min-height:230px;
  transition:border-color .4s var(--weich),transform .4s var(--weich);
}
.karte:hover{border-color:#3A3632;transform:translateY(-3px)}
.karte h3{font-size:var(--t6);margin:0 0 var(--s3)}
.karte p{color:var(--grau);font-size:var(--t3);max-width:34ch}
.karte-bild{
  position:absolute;right:-12%;bottom:-14%;width:58%;opacity:.22;
  transition:opacity .5s var(--weich),transform .6s var(--weich);pointer-events:none;
}
.karte:hover .karte-bild{opacity:.42;transform:translateY(-6px)}
*/


/* Kosten */
.kosten{padding:var(--s9) 0}
.kosten-innen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
.kosten-text h2{font-size:clamp(28px,3.6vw,46px);margin:0 0 var(--s5)}
.kosten-hinweis{
  margin-top:var(--s6);padding-left:var(--s5);border-left:2px solid var(--signal);
  font-size:var(--t5);color:var(--papier);max-width:32ch;
}
.rechner{
  background:var(--tinte2);border:1px solid var(--linie);border-radius:16px;
  padding:var(--s7);
}
.rechner fieldset{border:0;padding:0;margin:0 0 var(--s6)}
.rechner legend{
  font:500 var(--t2)/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau);margin:0 0 var(--s4);padding:0;
}
.rechner legend output{color:var(--papier);font-weight:500}
.rechner legend .einheit{text-transform:none;letter-spacing:0}
.wahl{display:flex;flex-wrap:wrap;gap:var(--s2)}
.wahl button{
  font:500 var(--t3)/1 Archivo,sans-serif;color:var(--grau);cursor:pointer;
  background:transparent;border:1px solid var(--linie);border-radius:999px;
  padding:var(--s3) var(--s4);transition:border-color .18s var(--knapp),color .18s var(--knapp),background .18s var(--knapp);
}
.wahl button:hover{border-color:#413D39;color:var(--papier)}
.wahl button[aria-pressed="true"]{background:var(--papier);border-color:var(--papier);color:var(--tinte)}
input[type=range]{
  width:100%;height:2px;appearance:none;background:var(--linie);border-radius:2px;
  outline-offset:8px;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;width:22px;height:22px;border-radius:50%;background:var(--signal);
  cursor:grab;border:3px solid var(--tinte2);box-shadow:0 0 0 1px var(--signal);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--signal);cursor:grab;
  border:3px solid var(--tinte2);
}
.haken{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t3);
  color:var(--grau);cursor:pointer;margin:0 0 var(--s6)}
.haken input{margin-top:3px;accent-color:var(--signal);width:17px;height:17px;flex:0 0 auto}
.haken a{color:var(--signal-hell)}
.ergebnis{border-top:1px solid var(--linie);padding-top:var(--s6);margin:0 0 var(--s6)}
.erg-label{font:500 var(--t2)/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);margin:0 0 var(--s3)}
.erg-zahl{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.03em;
  line-height:1;margin:0 0 var(--s3)}
.erg-fuss{font-size:var(--t2);color:#968F88;max-width:40ch}

/* Warum */
.warum{padding:var(--s9) 0;background:var(--tinte2);border-block:1px solid var(--linie)}
.warum-innen{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s9);align-items:center}
.warum-text h2{font-size:clamp(28px,3.6vw,46px);margin:0 0 var(--s5)}
.warum blockquote{
  margin:var(--s7) 0;padding-left:var(--s5);border-left:2px solid var(--signal);
  font-size:var(--t6);line-height:1.42;letter-spacing:-.015em;max-width:38ch;
}
.zusagen li{padding:var(--s4) 0;border-top:1px solid var(--linie);
  font-size:var(--t3);color:var(--grau)}
.zusagen b{color:var(--papier);font-weight:600}
.koepfe{display:grid;gap:var(--s5)}
.koepfe figure{margin:0;text-align:center;position:relative}
/* Die zwei Scheiben waren nach den hellen Baendern die hellsten Objekte der
   Seite – zwei schallend lachende Maenner zwei Bildschirme nach "Sie muessen
   nicht alles allein entscheiden". Multiply laesst die Strichzeichnung
   unberuehrt und nimmt nur das Reinweiss zurueck. Dateien unangetastet. */
.koepfe figure::after{content:"";position:absolute;inset:0;
  background:var(--papier);mix-blend-mode:multiply;pointer-events:none}
.koepfe img{width:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}
.koepfe figcaption{
  font:500 var(--t2)/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau);margin-top:var(--s3);
}

/* Einsatzgebiet (helles Band) */
.gebiet{padding:var(--s9) 0;background:var(--papier);color:var(--tinte)}
.gebiet h2{font-size:clamp(28px,3.6vw,46px)}
.staedte{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
.staedte li{
  background:#fff;border:1px solid var(--papier2);border-radius:14px;
  padding:var(--s5);text-align:center;
  transition:transform .4s var(--schwung),box-shadow .4s var(--weich);
}
.staedte li:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
.staedte img{display:block;height:104px;width:auto;max-width:100%;object-fit:contain;
  margin:0 auto var(--s4)}
.staedte b{display:block;font-size:var(--t5);font-weight:600;letter-spacing:-.02em}
.staedte span{font:400 var(--t2)/1.4 "IBM Plex Mono",monospace;color:#857E74}

/* Fragen */
/* Gemessen: der Text nutzte 37 Prozent der Breite, rechts standen 773 px leer
   ueber 961 px Hoehe. Kopf nach links, Fragen nach rechts – die Ueberschrift
   bleibt beim Scrollen stehen, solange die Liste laeuft. */
.fragen{padding:var(--s9) 0}
.faq{max-width:none}
@media (min-width:1081px){
  .fragen .w{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:var(--s9);align-items:start}
  .fragen .kopfzeile{margin:0;position:sticky;top:120px}
  .fragen .kopfzeile .lieber{margin-top:var(--s7)}
  .faq summary{font-size:var(--t6)}
  .faq p{padding-right:var(--s7);max-width:58ch}
}
.faq details{border-top:1px solid var(--linie)}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s5) var(--s7) var(--s5) 0;
  font-size:var(--t6);font-weight:600;letter-spacing:-.018em;position:relative;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:var(--s3);top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--grau);border-bottom:1.5px solid var(--grau);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--weich);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--signal-hell)}
.faq p{padding:0 var(--s8) var(--s6) 0;color:var(--grau);max-width:64ch}

/* Anfrage */
.anfrage{padding:var(--s9) 0;background:var(--tinte2);border-top:1px solid var(--linie)}
.anfrage-innen{display:grid;grid-template-columns:1fr 1.1fr;
  column-gap:var(--s9);row-gap:var(--s6);align-items:start}
/* Drei Kinder in zwei Spalten: der Text laeuft ueber beide Zeilen,
   rechts stehen WhatsApp und Formular untereinander. Vorher fiel das
   Formular in die linke Spalte und rechts blieb ein totes Feld. */
.anfrage-text{grid-column:1;grid-row:1 / span 2}
.wa{grid-column:2;grid-row:1}
.formular{grid-column:2;grid-row:2}
.anfrage-text h2{font-size:clamp(28px,3.6vw,46px);margin:0 0 var(--s5)}
.haken-liste{margin:var(--s7) 0}
.haken-liste li{padding:var(--s3) 0 var(--s3) var(--s6);position:relative;
  font-size:var(--t3);color:var(--grau)}
.haken-liste li::before{
  content:"";position:absolute;left:0;top:14px;width:9px;height:5px;
  border-left:1.5px solid var(--signal);border-bottom:1.5px solid var(--signal);
  transform:rotate(-45deg);
}
.lieber{font-size:var(--t3);color:var(--grau)}
.lieber a{font:500 var(--t5)/1 "IBM Plex Mono",monospace;color:var(--papier);
  text-decoration:none;display:inline-block;margin-left:var(--s2)}
.lieber a:hover{color:var(--signal-hell)}
.anfrage-bild{margin:var(--s8) 0 0}
.anfrage-bild img{width:min(420px,100%);filter:drop-shadow(0 24px 48px rgba(0,0,0,.55))}

.formular{background:var(--tinte3);border:1px solid var(--linie);border-radius:16px;
  padding:var(--s7)}
.formular label{display:block;font:500 var(--t2)/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin:0 0 var(--s5)}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.formular input[type=text],.formular input[type=tel],.formular input[type=email],
.formular select,.formular textarea{
  width:100%;margin-top:var(--s2);background:var(--feld);color:var(--papier);
  border:1px solid var(--feld-rand);border-radius:9px;padding:var(--s3) var(--s4);
  font:400 var(--t4)/1.5 Archivo,sans-serif;letter-spacing:0;text-transform:none;
  transition:border-color .3s;
}
.formular textarea{resize:vertical}
/* outline:none hob die :focus-visible-Regel aus Zeile 62 auf – das Formular
   war per Tastatur nicht mehr zu verfolgen. Der Rahmen bleibt fuer die Maus
   weg, fuer die Tastatur nicht. */
.formular :is(input,select,textarea):focus{border-color:var(--signal)}
.formular :is(input,select,textarea):focus:not(:focus-visible){outline:none}
.upload{cursor:pointer}
.upload input{position:absolute;opacity:0;width:0;height:0}
.upload input:focus-visible + .upload-flaeche{outline:2px solid var(--signal-hell);
  outline-offset:3px;border-color:var(--signal)}
.upload-flaeche{
  display:block;margin-top:var(--s2);border:1px dashed #3A3632;border-radius:11px;
  padding:var(--s6);text-align:center;transition:border-color .3s,background .3s;
}
.upload:hover .upload-flaeche{border-color:var(--signal);background:rgba(229,0,125,.05)}
.upload-flaeche b{display:block;font:600 var(--t4)/1 Archivo,sans-serif;color:var(--papier);
  letter-spacing:-.01em;text-transform:none;margin:0 0 var(--s2)}
.upload-flaeche i{font:400 var(--t2)/1.5 Archivo,sans-serif;font-style:normal;
  color:var(--grau);letter-spacing:0;text-transform:none}
.formular .haken{text-transform:none;letter-spacing:0;font-family:Archivo,sans-serif}
.demo{margin-top:var(--s4);text-align:center;font:400 var(--t2)/1 "IBM Plex Mono",monospace;
  color:#8E8780}

/* Fuß */
.fuss{padding:var(--s9) 0 var(--s6);border-top:1px solid var(--linie)}
.fuss-innen{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s7)}
.fuss-marke img{width:132px;margin:0 0 var(--s5)}
.fuss p{font-size:var(--t3);color:var(--grau);line-height:1.72}
.fuss a{color:var(--grau);text-decoration:none;transition:color .25s}
.fuss a:hover{color:var(--signal-hell)}
.fuss h3{font:500 var(--t2)/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papier);margin:0 0 var(--s4)}
.fuss-zeile{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--linie);
  font-size:var(--t2);color:#8E8780}

/* Daumenleiste (nur Handy) */
.daumen{display:none}


/* ══════════════════════ Schmale Schirme ══════════════════════ */
@media (max-width:1080px){
  .nav{display:none}
  .verw-innen{grid-template-columns:1fr;gap:var(--s7)}
  .verw-bilder{aspect-ratio:16/11;order:-1}
  /* Ab hier ist die Buehne einspaltig – dann darf sie auch nicht mehr kleben.
     opacity mit !important, weil app.js beim Verkleinern einen Inline-Wert stehen laesst. */
  .verwandlung{height:auto}
  .verw-buehne{position:static;height:auto;padding:var(--s8) 0}
  .verw-schritte li{opacity:1!important}
  .verw-leiste{display:none}
  .kosten-innen,.warum-innen,.anfrage-innen{grid-template-columns:1fr;gap:var(--s8)}
  .anfrage-text,.wa,.formular{grid-column:auto;grid-row:auto}
  .karten{grid-template-columns:repeat(2,1fr)}
  .staedte{grid-template-columns:repeat(3,1fr)}
  .fuss-innen{grid-template-columns:1fr 1fr}
  .koepfe{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  :root{--s9:64px;--s8:48px}
  html{scroll-padding-top:72px}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .kopf{padding:var(--s3) var(--s5);gap:var(--s4)}
  .kopf .knopf,.kopf .tel{display:none}
  .marke img{width:84px}

  /* Unteres Polster in Leistenhoehe: die feste Leiste schnitt die Figur
     waagerecht durch, auf dem ersten Bildschirm des Handys. */
  /* Das Innenpolster kommt von .hero-satz, sonst addiert es sich. */
  .hero{min-height:auto;padding:104px 0 72px;flex-direction:column;align-items:stretch}
  .hero h1{font-size:clamp(34px,10.4vw,54px);margin-bottom:var(--s5)}
  .vorspann{font-size:var(--t5);margin-bottom:var(--s6)}
  .hero-akt .knopf{flex:1 1 auto}
  .hero-bild{position:relative;right:auto;bottom:auto;width:118%;margin:var(--s5) 0 0 -9%;
    filter:drop-shadow(0 18px 36px rgba(0,0,0,.6))}
  .hero-glut{bottom:-6%;width:130vw;right:-24%}
  .hero-hinab{display:none}

  .zahlen{grid-template-columns:1fr 1fr}
  .zahlen li{padding:var(--s5) var(--s4);border-bottom:1px solid var(--linie)}
  .zahlen li:nth-child(2n){border-right:0}

  .verw-bilder{aspect-ratio:4/3;order:0;margin-bottom:var(--s6)}
  .verw-schritte li{padding-left:var(--s6)}

  .schritte,.karten{grid-template-columns:1fr}
  .staedte{grid-template-columns:1fr 1fr}
  .feldpaar{grid-template-columns:1fr}
  .fuss-innen{grid-template-columns:1fr;gap:var(--s6)}
  .rechner,.formular{padding:var(--s5)}
  .faq summary{font-size:var(--t5)}

  .daumen{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;inset:auto 0 0;z-index:85;background:var(--linie);
    border-top:1px solid var(--linie);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .daumen a{
    background:var(--tinte2);color:var(--papier);text-decoration:none;text-align:center;
    padding:var(--s4) var(--s3);font:600 var(--t3)/1 Archivo,sans-serif;
  }
  .daumen .d-voll{background:var(--signal);color:#fff}
}

/* Weniger Bewegung */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .vb{opacity:1;position:relative;transform:none}
  .verwandlung{height:auto}
  .verw-buehne{position:static;height:auto;padding:var(--s8) 0}
  .verw-schritte li{opacity:1}
}

/* ═══════════════════════════════════════════════════════════════
   AUSBAU — Fortschritt, Trauerfall, Stimmen, Verwaltungen, Feinschliff
   ═══════════════════════════════════════════════════════════════ */

/* Lesefortschritt oben */
.fortschritt{position:fixed;inset:0 0 auto;height:2px;z-index:95;pointer-events:none}
.fortschritt i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--signal),var(--signal-hell));
  box-shadow:0 0 14px rgba(229,0,125,.55);transition:width .12s linear}

/* Feines Raster im Hero */
.hero-raster{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 1px),
    rgba(255,255,255,.024) calc(100%/6 - 1px) calc(100%/6));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
}

/* Aktiver Navigationspunkt */
.nav a.aktiv{color:var(--papier)}
.nav a.aktiv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--signal)}

/* Lichtkante auf den Karten, folgt dem Zeiger */
.karte::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;
  transition:opacity .45s var(--weich);
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),
    rgba(229,0,125,.14),transparent 62%);
}
.karte:hover::before{opacity:1}
.karte h3,.karte p{position:relative;z-index:2}
.karte-bild{z-index:0}

/* Trauerfall: helles, ruhiges Band */
/* Eigener, waermerer Papierton: Trauerfall und Gebiet waren exakt derselbe
   Ton – der emotionale Bruch war gleichrangig mit einer Ortsliste. */
.trauer{background:#EBE3D3;color:var(--tinte);padding:var(--s9) 0;text-align:center}
.trauer-innen{max-width:52rem;margin:0 auto}
.trauer .augen{color:var(--signal-tief)}
.trauer h2{font-size:clamp(32px,4.8vw,64px);margin:0 0 var(--s8);letter-spacing:-.03em;
  text-wrap:balance}
.trauer-satz p{font-size:var(--t6);line-height:1.56;color:#423D3A;text-wrap:pretty;
  max-width:42ch;margin:0 auto var(--s5)}
.trauer-satz b{color:var(--tinte);font-weight:600}
.trauer-schluss{font-size:var(--t5);color:#5D5853;padding-top:var(--s4)}
.trauer-tel{margin-top:var(--s8);font-size:var(--t3);color:#5D5853}
.trauer-tel a{font:500 var(--t6)/1 "IBM Plex Mono",monospace;color:var(--tinte);
  text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:3px;
  margin-left:var(--s2);transition:color .25s}
.trauer-tel a:hover{color:var(--signal)}

/* Kundenstimmen */
.stimmen{padding:var(--s9) 0;background:var(--tinte2);border-block:1px solid var(--linie)}
.zitate{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.zitate li{background:var(--tinte3);border:1px solid var(--linie);border-radius:14px;
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}
/* Die Stimme des Kunden gehoert nicht ins Kleingedruckte. */
.zitate blockquote{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.5;
  letter-spacing:-.015em;text-wrap:pretty}
.zitate blockquote::before{content:"";display:block;width:28px;height:2px;
  background:var(--signal);margin:0 0 var(--s4)}
.quelle{margin-top:auto;font:400 var(--t2)/1.4 "IBM Plex Mono",monospace;
  color:var(--grau);letter-spacing:.06em}

/* Für Verwaltungen */
.b2b{padding:var(--s9) 0}
.b2b-tafel{border:1px solid var(--linie);border-radius:20px;padding:var(--s8);
  background:linear-gradient(158deg,#1C1917 0%,#10100D 62%);
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s9);align-items:start}
.b2b-text h2{font-size:clamp(25px,3vw,38px);margin:0 0 var(--s5)}
.b2b-akt{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}
.b2b-liste{display:grid}
.b2b-liste li{padding:var(--s4) 0;border-top:1px solid var(--linie)}
.b2b-liste li:last-child{border-bottom:1px solid var(--linie)}
.b2b-liste b{display:block;font-size:var(--t4);font-weight:600;margin:0 0 3px}
.b2b-liste span{font-size:var(--t3);color:var(--grau)}

/* Stadtteile */
.stadtteile{margin-top:var(--s7);font-size:var(--t3);color:#5D5853;max-width:70ch}
.stadtteile b{color:var(--tinte);font-weight:600}

@media (max-width:1080px){
  .zitate{grid-template-columns:1fr}
  .b2b-tafel{grid-template-columns:1fr;gap:var(--s7);padding:var(--s7)}
}
@media (max-width:760px){
  .trauer h2{margin-bottom:var(--s6)}
  .trauer-satz p{font-size:var(--t5)}
  .hero-raster{display:none}
  .b2b-tafel{padding:var(--s5);border-radius:14px}
  .b2b-akt .knopf{flex:1 1 auto}
  .fortschritt{height:3px}
}

/* Drucken (Hausverwaltungen legen Seiten in die Akte) */
@media print{
  .kopf,.daumen,.korn,.fortschritt,.hero-hinab,.hero-glut,.hero-raster,
  .laufband,.fuss-zeile,.verw-leiste,.upload,.demo,.knopf{display:none!important}
  /* Objektbetreuer legen die Seite in die Akte – ohne diese Ausnahme
     verliert ausgerechnet ihr Abschnitt die Telefonnummer. */
  .b2b-akt .knopf{display:inline!important;color:#000!important;
    background:none!important;border:0!important;padding:0!important;
    font-weight:700;text-decoration:underline}
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.band-zahlen,.leistungen,.stimmen,.warum,.b2b,.anfrage,.fuss{
    background:#fff!important;color:#000!important;border:0!important;padding:12pt 0!important}
  .verwandlung{height:auto!important}
  .verw-buehne{position:static!important;height:auto!important}
  .verw-bilder{position:static;display:grid;grid-template-columns:repeat(3,1fr);
    gap:8pt;aspect-ratio:auto}
  .vb{position:static!important;opacity:1!important;transform:none!important;display:block}
  /* Auf Papier gibt es kein Rosa: die Auswahl braucht ein Zeichen. */
  .wahl button{color:#777!important}
  .wahl button[aria-pressed="true"]{color:#000!important;font-weight:700}
  .wahl button[aria-pressed="true"]::before{content:"▪  "}
  h1,h2,h3{color:#000!important}
  .augen,.fuehrung,.grau,p,span,b,li{color:#222!important}
  .karte,.zitate li,.b2b-tafel,.rechner,.formular{
    border:1pt solid #999!important;background:#fff!important;break-inside:avoid}
  a[href^="tel"]::after{content:" (" attr(href) ")";font-size:9pt}
  .faq details{break-inside:avoid}
  .faq details p{display:block!important}
}

/* ═══════════════════════════════════════════════════════════════
   BEWEGUNG — Leitidee: alles wird nach rechts rausgetragen
   ═══════════════════════════════════════════════════════════════ */

/* Zeilenweise Enthüllung der Schlagzeilen */
.zeile{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.zeile-i{display:block;transform:translate3d(-.06em,112%,0) rotate(1.6deg);
  transform-origin:0 0;will-change:transform;
  transition:transform 1.05s var(--weich);transition-delay:calc(var(--z,0) * 85ms)}
.da .zeile-i,.los .zeile-i{transform:none}

/* Einblenden: kommt an, statt aufzutauchen */
.js .rv{opacity:0;transform:translate3d(0,26px,0) scale(.988);
  transition:opacity .75s var(--weich),transform 1.05s var(--weich)}
.js .rv.da{opacity:1;transform:none}
/* Steht bewusst direkt dahinter: sonst entscheidet die Reihenfolge
   im Stilbogen darueber, ob bei 'weniger Bewegung' etwas zu sehen ist. */
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
}

/* Hero-Auftakt */
.js .hero .vorspann,.js .hero-akt,.js .hero-fuss{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .8s var(--weich) var(--v,0s),transform .95s var(--weich) var(--v,0s)}
.js .hero.los .vorspann{--v:.42s} .js .hero.los .hero-akt{--v:.52s}
.js .hero.los .hero-fuss{--v:.62s}
.js .hero.los :is(.vorspann,.hero-akt,.hero-fuss){opacity:1;transform:none}
.js .hero-bild{opacity:0;transform:translate3d(40px,60px,0)}
.js .hero.los .hero-bild{opacity:1;transform:none;
  transition:opacity 1s var(--weich) .2s,transform 1.5s var(--weich) .2s}

/* Aufkleber verhalten sich wie Aufkleber */
.hero-bild img,.vb img,.koepfe img,.anfrage-bild img{
  transform:rotate(var(--kipp,0deg)) translate3d(var(--sx,0px),var(--sy,0px),0);
  transition:transform .9s var(--weich)}

/* Laufband */
.laufband{overflow:hidden;position:relative;z-index:5;padding:var(--s5) 0;
  background:var(--tinte2);border-block:1px solid var(--linie)}
.laufband-spur{display:flex;width:max-content;animation:lauf var(--tempo,45s) linear infinite}
.laufband[data-richtung="-1"] .laufband-spur{animation-direction:reverse}
.lb-h{display:flex;align-items:center;gap:var(--s6);padding-right:var(--s6)}
.lb-h span{font-size:clamp(20px,2.9vw,40px);font-weight:900;letter-spacing:-.035em;
  white-space:nowrap;color:transparent;-webkit-text-stroke:1px #423D39}
.lb-h span:nth-of-type(3n+1){color:var(--papier);-webkit-text-stroke:0}
.lb-h i{color:var(--signal);font-size:var(--t3);font-style:normal}
@keyframes lauf{to{transform:translate3d(-50%,0,0)}}
.laufband::before,.laufband::after{content:"";position:absolute;top:0;bottom:0;width:14%;
  z-index:2;pointer-events:none}
.laufband::before{left:0;background:linear-gradient(90deg,var(--tinte2),transparent)}
.laufband::after{right:0;background:linear-gradient(270deg,var(--tinte2),transparent)}

/* Leistungen als waagerechte Spur */
.leistungen{position:relative;height:400vh;background:var(--tinte2);
  border-block:1px solid var(--linie);padding:0}
.leist-buehne{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:var(--s7);overflow:hidden}
.leist-kopf h2{font-size:clamp(28px,3.6vw,46px);margin:var(--s4) 0 0}
.leist-spur{display:flex;gap:0;will-change:transform;
  padding-inline:max(var(--s5),calc((100vw - var(--breite))/2 + var(--s5)))}
.lk{position:relative;flex:0 0 clamp(276px,25.5vw,376px);height:min(53vh,470px);
  border-left:1px solid var(--linie);padding:var(--s6) var(--s6) var(--s6) var(--s5);
  overflow:hidden;display:flex;flex-direction:column;
  transition:background .45s var(--weich)}
.lk:hover{background:rgba(255,255,255,.022)}
.lk-nr{font:500 var(--t2)/1 "IBM Plex Mono",monospace;color:var(--signal-hell);
  letter-spacing:.16em;margin:0 0 var(--s7)}
.lk h3{font-size:clamp(20px,1.9vw,29px);margin:0 0 var(--s4);hyphens:auto}
.lk p{font-size:var(--t3);color:var(--grau);max-width:28ch;position:relative;z-index:2}
.lk img{position:absolute;right:-16%;bottom:-6%;width:98%;opacity:.58;z-index:0;
  /* Deckelt Hochformate, damit keine Figur in den Text waechst. */
  max-height:58%;object-fit:contain;object-position:right bottom;
  transition:opacity .55s var(--weich),transform .8s var(--weich)}
.lk:hover img{opacity:.88;transform:translate3d(-12px,-12px,0) scale(1.06)}
.leist-leiste{height:2px;background:var(--linie);border-radius:2px;overflow:hidden}
.leist-leiste i{display:block;height:100%;width:0;background:var(--signal)}

/* Korn bewegt sich wie Filmkorn */
@keyframes kornen{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,-4%)}
  40%{transform:translate(-6%,2%)}  60%{transform:translate(2%,-3%)}
  80%{transform:translate(4%,3%)}   100%{transform:translate(0,0)}}
.korn{animation:kornen 2.6s steps(1) infinite;background-size:140px 140px}
/* Ohne Blendmodus liegt das Korn auch ueber Papier – dort waere es grisselig. */
.trauer,.gebiet{position:relative;z-index:91}

/* Magnetische Knöpfe */
.knopf{will-change:transform}

@media (max-width:1080px){
  .leistungen{height:auto}
  .leist-buehne{position:static;height:auto;padding:var(--s9) 0;overflow:visible}
  .leist-spur{display:grid;grid-template-columns:1fr 1fr;padding-inline:var(--s5);
    max-width:var(--breite);margin:0 auto;transform:none!important}
  .lk{flex:none;height:auto;min-height:230px;border-left:0;border-top:1px solid var(--linie)}
  .leist-leiste{display:none}
}
@media (max-width:760px){
  .leist-spur{grid-template-columns:1fr;padding-inline:var(--s4)}
  .lb-h span{font-size:19px}
  .laufband{padding:var(--s4) 0}
}

@media (prefers-reduced-motion:reduce) and (min-width:1081px){
  .leist-spur{grid-template-columns:repeat(3,1fr)}
}
/* Fuenf Sprunge je 1,1s auf einer Vollflaeche kosten auf schwachen Geraeten
   spuerbar Akku. Auf dem Handy ganz aus, auf dem Desktop halb so schnell. */
@media (max-width:760px){.korn{animation:none}}
@media (prefers-reduced-motion:reduce){
  .zeile-i{transform:none!important}
  .laufband-spur{animation:none}
  .korn{animation:none}
  .leistungen{height:auto}
  .leist-buehne{position:static;height:auto;padding:var(--s9) 0}
  .leist-spur{display:grid;transform:none!important}
  .lk{flex:none;height:auto;min-height:220px}
  .js .hero :is(.vorspann,.hero-akt,.hero-fuss,.hero-bild){opacity:1;transform:none}
  .hero-bild img,.vb img,.koepfe img,.anfrage-bild img{transform:none!important}
}

/* Verwandlung auf schmalen Schirmen: drei Bilder nebeneinander */
@media (max-width:760px){
  .verw-bilder{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
    gap:var(--s2);aspect-ratio:auto;align-items:end}
  .vb{position:relative;inset:auto;opacity:1!important;transform:none!important}
  .vb img{max-height:none;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .verw-bilder{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
    gap:var(--s3);aspect-ratio:auto;align-items:end}
  .vb{position:relative!important;inset:auto;opacity:1!important;transform:none!important;display:block}
  .vb img{max-height:none;width:100%}
}

/* Handy: Illustrationen dürfen den Text nicht stören */
@media (max-width:760px){
  /* Auf dem Handy stand der Text ueber der Zeichnung – weder Bild noch
     sauberer Text. Umzug statt Aufhellen: die Figur steht jetzt unter dem
     Text, die Karte waechst mit (sie hat ab 1080px ohnehin height:auto). */
  .lk img{position:static;width:56%;max-height:none;opacity:1;
    margin:var(--s5) 0 0 auto;right:auto;bottom:auto;object-fit:contain}
  .lk:hover img{opacity:1;transform:none}
  .lk h3,.lk p{position:relative;z-index:2}
  .karte-bild{width:46%;opacity:.13}
}

/* ═══════════════════════════════════════════════════════════════
   HANDY-NACHBESSERUNG — gemessen, nicht geschätzt
   ═══════════════════════════════════════════════════════════════ */

/* Schieberegler: Bedienfläche 44 px statt 2 px */
input[type=range]{width:100%;height:44px;appearance:none;-webkit-appearance:none;
  background:transparent;margin:0;padding:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--linie);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-12px;border-radius:50%;background:var(--signal);
  border:3px solid var(--tinte2);box-shadow:0 0 0 1px var(--signal);cursor:grab}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}
input[type=range]::-moz-range-track{height:2px;background:var(--linie);border-radius:2px}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
  background:var(--signal);border:3px solid var(--tinte2);cursor:grab}

/* Kleinste Schrift anheben */
.marke span{font-size:var(--t2)}

@media (max-width:1080px){
  /* Auswahlknöpfe im Rechner auf Daumenmaß */
  .wahl button{min-height:46px;padding:var(--s3) var(--s5)}
  /* Das Kaestchen selbst bleibt 22px, die Trefferflaeche wird 44px.
     Es liegt auf dem kritischen Weg – ohne Haken keine Anfrage. */
  .haken input{width:22px;height:22px;margin-top:1px;position:relative}
  .haken input::after{content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .faq summary{padding-block:var(--s5)}
  .staedte li{padding:var(--s4)}
}
@media (max-width:760px){
  .augen{font-size:12.5px;letter-spacing:.14em}
  .lk-nr,.schritte .nr,.verw-schritte .nr{font-size:12.5px}
  .quelle,.erg-fuss,.demo,.fuss-zeile{font-size:12.5px}
  /* Formularfelder: Tippfläche und keine Zoom-Falle unter iOS */
  .formular :is(input[type=text],input[type=tel],input[type=email],select,textarea){
    font-size:16px;min-height:48px;padding:var(--s3) var(--s4)}
  .formular textarea{min-height:96px}
  .upload-flaeche{padding:var(--s7) var(--s5)}
  .daumen a{padding:var(--s4) var(--s3);min-height:52px;display:flex;
    align-items:center;justify-content:center}
}

/* Restliche Tippziele auf Daumenmaß */
@media (max-width:1080px){
  .knopf{min-height:48px}
  .b2b-akt .knopf{flex:1 1 auto}
  .trauer-tel a,.lieber a{display:inline-block;padding:var(--s3) var(--s2);min-height:44px;
    line-height:20px}
  .fuss a,.fuss-zeile a{display:inline-block;padding-block:var(--s2)}
  .haken span a{padding-block:var(--s2);display:inline-block}
  .faq p a{padding-block:var(--s1);display:inline-block}
}
@media (max-width:1080px){
  input[type=range]{height:48px}
  input[type=range]::-webkit-slider-thumb{margin-top:-14px}
  .trauer-tel a,.lieber a{min-height:46px}
}

/* WhatsApp */
.wa{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center;
  border:1px solid var(--linie);border-radius:14px;padding:var(--s5) var(--s6);
  margin:0 0 var(--s6);background:linear-gradient(140deg,#141A17,#0E1113)}
.wa-zeichen{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:#25D366;color:#12100D;line-height:1;flex:none}
.wa-zeichen svg{display:block}
.wa b{display:block;font-size:var(--t5);font-weight:600;letter-spacing:-.015em;margin:0 0 2px}
.wa>div span{font-size:var(--t3);color:var(--grau)}
.wa a{grid-column:1/-1;margin-top:var(--s3)}
@media (min-width:761px){.wa a{grid-column:auto;margin-top:0;justify-self:end}
  .wa{grid-template-columns:auto 1fr auto}}

/* Bild wechselt mit der Auswahl im Rechner */
.kosten-bild{position:relative;margin:var(--s8) 0 0;min-height:210px}
.kosten-bild img{position:absolute;inset:auto auto 0 0;width:min(340px,88%);opacity:0;
  transform:translate3d(-18px,10px,0) scale(.97);
  transition:opacity .55s var(--weich),transform .7s var(--weich);
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.55))}
.kosten-bild img.ist{opacity:1;transform:none}
@media (max-width:1080px){.kosten-bild{display:none}}

/* Daumenleiste mit drei Wegen */
@media (max-width:760px){
  .daumen{grid-template-columns:1fr 1fr 1fr}
  .daumen a{font-size:13px;letter-spacing:-.01em}
  .daumen .d-wa{background:#1B7F45;color:#fff}
}

/* Uebernahme aus dem Rechner */
.uebernahme{
  margin:0 0 var(--s5);padding:var(--s4) var(--s5);
  border:1px solid var(--linie);border-left:2px solid var(--signal);border-radius:0 10px 10px 0;
  background:rgba(229,0,125,.05);font-size:var(--t3);color:var(--grau);
}
.uebernahme b{color:var(--papier);font-weight:600}

/* Nach dem Absenden – dieselbe Flaeche, nicht eine graue Zeile daneben */
.gesendet{
  border:1px solid var(--linie);border-radius:16px;padding:var(--s8) var(--s7);
  background:linear-gradient(150deg,#181513,#120F0D);
}
.gesendet h3{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.03em;margin:0 0 var(--s6)}
.gesendet ol{margin:0;padding:0;color:var(--grau);font-size:var(--t4);
  counter-reset:schritt}
.gesendet ol li{margin:0 0 var(--s5);padding-left:var(--s7);position:relative;counter-increment:schritt}
.gesendet ol li::before{content:counter(schritt,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font:500 var(--t2)/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:var(--signal-hell)}
/* Der Fokus wird beim Absenden per Skript gesetzt, damit Vorleseprogramme
   die Bestaetigung ansagen – dann gehoert kein Rahmen dorthin. Wer wirklich
   mit der Tastatur hierher steuert, bekommt ihn weiterhin. */
.gesendet:focus,.gesendet:focus-visible{outline:none}
.gesendet-tel{margin:var(--s7) 0 0;font-size:var(--t3);color:#8E8780}
.gesendet-tel a{font:500 var(--t5)/1 "IBM Plex Mono",monospace;color:var(--papier);
  text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:2px;margin-left:var(--s2)}

/* Handy: die Schlagzeilen-Umbrueche sind fuer breite Schirme gesetzt.
   Auf 400 px erzeugen sie Waisen ("einen" allein auf einer Zeile).
   Der Text darf dort selbst umbrechen, die Maske faellt weg. */
@media (max-width:760px){
  /* Bei 320 px ist "Haushaltsauflösung." breiter als die Maskenspalte und wurde
     seitlich abgeschnitten (278 px in 272 px). Silbentrennung loest das sauber:
     die Zeile darf hoeher werden, die Maske schneidet nur oben und unten. */
  h1,h2,h3{hyphens:auto}
  .hero h1 .zeile{display:inline;overflow:visible;padding:0;margin:0}
  .hero h1 .zeile-i{display:inline;transform:none}
  .hero h1 .zeile:not(:last-child)::after{content:" "}
  .hero h1{text-wrap:balance}
  /* Augenbraue bewusst zweizeilig: der Trennpunkt faellt weg,
     statt am Anfang der zweiten Zeile zu stehen. */
  .hero .augen .trenn{display:none}
  .hero .augen .ort{display:block}
  .hero .augen{letter-spacing:.10em}
}

/* Handy: die Augenbrauen sind mit 12,5px die kleinste Schrift der Seite.
   Die Hauptzielgruppe ist zwischen 50 und 70. */
@media (max-width:760px){
  .augen{font-size:13.5px}
  /* Die Marke in der Kopfleiste ist ein Link – 21px hoch war zu wenig. */
  .marke{min-height:44px;align-items:center}
  .marke span{font-size:13px}
}

/* Nur fuer Vorleseprogramme: sichtbar fuer die Technik, unsichtbar fuer das Auge. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Wenn der Rechner nicht laufen kann, steht wenigstens der Weg dorthin da. */
.ohne-skript{margin:0 0 var(--s6);padding:var(--s5) var(--s6);
  border:1px solid var(--linie);border-left:2px solid var(--signal);
  border-radius:0 12px 12px 0;background:var(--tinte3);
  font-size:var(--t4);color:var(--grau)}
.ohne-skript a{color:var(--papier);text-underline-offset:.2em}