/* danielpietras.de, Gestaltung nach design/ENTSCHEIDUNG.md (Grundlage: Entwurf a-ruhe), Stand Korrekturrunde 2 (Abnahme Runde 1), 4.10.2026.
   Drei Farben plus Weiß und zwei Grautöne. Nur transform und opacity werden animiert. */

/* ---------- Tokens ---------- */
:root{
  --tinte:#1C2461;
  --orange:#FF8200;
  --sand:#F1ECE4;
  --weiss:#FFFFFF;
  --grau:#555B66;
  --rand:#7A8090;
  --linie:rgba(28,36,97,.16);
  --linie-hell:rgba(255,255,255,.24);
  --kopf:'Bricolage Grotesque',system-ui,sans-serif;
  --text:'Source Sans 3',system-ui,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --radius:8px;--radius-chip:999px;--radius-handy:28px;
  --schatten-leiste:0 -2px 12px rgba(28,36,97,.12);
  --schatten-geraet:0 16px 40px rgba(28,36,97,.14);
  --dauer:350ms;--weg:8px;--kurz:180ms;--plus:240ms;--blase:350ms;--staffel:60ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Sanftes Hineingleiten (Daniel, 4.10.2026): spürbarer Weg, weicher Ausklang. Handy 28 px und 600 ms, PC 40 px und 800 ms */
  --gleit-weg:28px;--gleit-dauer:800ms;--gleit-ease:cubic-bezier(.33,1,.68,1);--gleit-staffel:70ms;
}
@media (min-width:900px){:root{--dauer:600ms;--weg:16px;--staffel:80ms;--gleit-weg:40px;--gleit-dauer:900ms;--gleit-staffel:90ms}}
@media (prefers-reduced-motion:reduce){:root{--dauer:0ms;--weg:0px;--kurz:0ms;--plus:0ms;--blase:0ms;--staffel:0ms;--gleit-weg:0px;--gleit-dauer:0ms;--gleit-staffel:0ms}}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--weiss);color:var(--tinte);font-family:var(--text);font-size:17px;line-height:1.55;overflow-x:clip}
@media (min-width:900px){body{font-size:19px}}
img,svg{display:block;max-width:100%}
a{color:inherit}
b,strong{font-weight:700}
h1,h2,h3{font-family:var(--kopf);margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,58px);line-height:1.08;font-weight:800}
h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15;font-weight:700}
h3{font-size:clamp(21px,1.8vw,24px);line-height:1.25;font-weight:700}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
.lead{font-size:clamp(19px,1.7vw,22px);line-height:1.5}
@media (max-width:599px){.lead{font-size:18px}h2{font-size:26px}.oben{margin-bottom:var(--s2)}.rechen-ergebnis{font-size:18px}}
.grau{color:var(--grau)}
.klein{font-size:16px;line-height:1.5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media (min-width:900px){.wrap{padding:0 32px}}
.abschnitt{padding:var(--abschnitt-handy) 0}
@media (min-width:900px){.abschnitt{padding:var(--abschnitt-pc) 0}}
:root{--abschnitt-pc:44px;--abschnitt-handy:24px}
.abschnitt.sand{background:var(--sand)}
.abschnitt.tinte{background:var(--tinte);color:var(--weiss)}
.oben{display:block;font-family:var(--kopf);font-weight:600;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--grau);margin-bottom:var(--s3)}
.tinte .oben{color:var(--sand)}
.oben + h2 + .lead,.oben + h2 + p,h2 + p{margin-top:var(--s4)}
@media (min-width:900px){.oben + h2 + .lead,.oben + h2 + p,h2 + p{margin-top:var(--s5)}}
.schmal{max-width:680px}
.mitte{text-align:center;margin-left:auto;margin-right:auto}
.hinweis{font-size:16px;line-height:1.5;color:var(--grau);margin-top:var(--s3)}
.il{display:inline;padding:11px 0}
.nw{white-space:nowrap}
::placeholder{color:var(--grau);opacity:1}
html{scroll-padding-top:12px}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.tinte :focus-visible,.leiste :focus-visible{outline-color:var(--weiss)}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--weiss);padding:var(--s3) var(--s4);border-radius:var(--radius);font-weight:700}
.skip:focus{left:8px}
.entwurf{background:var(--orange);color:var(--tinte);text-align:center;font-weight:700;font-size:16px;padding:var(--s2) var(--s4)}
.ph{overflow-wrap:anywhere;display:inline-block;color:var(--tinte);background:var(--sand);border:1px dashed var(--rand);border-radius:4px;padding:0 6px;font-family:var(--text);font-size:16px;line-height:1.5}
.tinte .ph{background:transparent;color:var(--weiss);border-color:var(--weiss)}

/* ---------- Buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:var(--s3) var(--s5);border-radius:var(--radius);font-family:var(--kopf);font-weight:700;font-size:18px;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;transition:transform var(--kurz) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--kurz)}
.btn-prim{background:var(--orange);color:var(--tinte);border-color:var(--orange)}
.btn-prim:hover{transform:translateY(-1px)}
.btn-sek{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.btn-sek::before{background:var(--sand)}
.sand .btn-sek::before{background:var(--weiss)}
.sand .karte .btn-sek::before{background:var(--sand)}
.btn-sek:hover::before{opacity:1}
.tinte .btn-sek{color:var(--weiss);border-color:var(--weiss)}
.tinte .btn-sek::before{background:var(--weiss)}
.tinte .btn-sek:hover::before{opacity:.1}
.btn svg{width:20px;height:20px;flex:none}
.aktionen{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
@media (max-width:519px){.aktionen .btn{width:100%}}

/* ---------- Karte, Telefon ---------- */
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:var(--s5)}
@media (min-width:900px){.karte{padding:var(--s6)}}
.tel{text-decoration:none;font-family:var(--kopf);font-weight:700;font-size:18px;white-space:nowrap;display:inline-flex;align-items:center;gap:var(--s2);min-height:44px}
.tel svg{width:20px;height:20px;flex:none}

/* ---------- Kopfzeile (nicht klebend) ---------- */
.kopf{border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px}
@media (min-width:900px){.kopf-in{min-height:72px}}
.marke{text-decoration:none;font-family:var(--kopf);font-weight:700;font-size:20px;line-height:1.2;padding:var(--s2) 0}
.marke small{display:block;font-family:var(--text);font-weight:400;font-size:16px;color:var(--grau)}
.kopf-rechts{display:flex;align-items:center;gap:var(--s5)}
.kopf .btn{display:none}
@media (min-width:900px){.kopf .btn{display:inline-flex;min-height:48px}.marke{font-size:22px}}
@media (max-width:359px){.kopf .tel span{display:none}.kopf .tel{min-width:44px;justify-content:center}}

/* ---------- Hero ---------- */
.hero{padding:var(--s3) 0 var(--s5)}
@media (min-width:900px){.hero{padding:var(--abschnitt-pc) 0}}
.hero-grid{display:grid;gap:var(--s3)}
@media (min-width:900px){.hero-grid{grid-template-columns:7fr 5fr;gap:var(--s8);align-items:start}.hero-text{padding-top:var(--s3)}}
.hero h1{margin-bottom:var(--s3)}
.hero .lead{margin-bottom:var(--s3)}
@media (min-width:900px){.hero h1{margin-bottom:var(--s5)}}
.zusagen{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s1) var(--s5);grid-template-columns:1fr}
@media (min-width:600px){.zusagen{grid-template-columns:1fr 1fr;gap:var(--s2) var(--s5);margin-top:var(--s4)}}
.zusagen li{display:flex;align-items:flex-start;gap:var(--s2);font-weight:600;line-height:1.4}
.zusagen svg{width:22px;height:22px;flex:none;margin-top:2px;stroke-width:2.4}
.hero .aktionen{margin-top:var(--s4)}
@media (min-width:900px){.hero .aktionen{margin-top:var(--s5)}.hero .lead{margin-bottom:var(--s4)}}
.wa-zeile{width:100%;margin:0}
.wa-tel{font-weight:700;text-decoration:none;white-space:nowrap}
/* Handy: rundes Foto und Finden-Karte als eine Karte im ersten Bildschirm */
.hero-seite{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--s3) var(--s4);align-items:start;padding:var(--s4);border:1px solid var(--linie);border-radius:var(--radius);background:var(--weiss)}
.hero-foto{margin:0;width:84px}
.hero-foto picture{display:block}
.hero-foto img{width:84px;height:84px;aspect-ratio:1;object-fit:cover;border-radius:50%}
.finden{display:contents;font-size:16px;line-height:1.5}
.finden > *{grid-column:1 / -1}
.finden-kopf{grid-column:2;display:grid;gap:2px;align-self:center}
.finden-kopf b{font-family:var(--kopf);font-size:20px;line-height:1.2}
.adr span{white-space:nowrap}
.finden .tel{justify-self:start}
.finden-links{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.finden-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.finden-links .ph{align-self:center}
.finden p{margin:0;color:var(--grau)}
/* PC: Foto 4:5 mit versetzter Sandfläche in der Finden-Karte. 900 bis 1023 px schmal (Foto 100 px, Nummer volle Breite,
   sonst steht sie über den Rand), ab 1024 px Foto 240 x 300 px links, Name, Anschrift und Nummer rechts (Abnahme Runde 1) */
@media (min-width:900px){
  .hero-seite{grid-template-columns:112px minmax(0,1fr);gap:var(--s3) var(--s5);padding:var(--s5);margin-top:var(--s5)}
  .hero-foto{position:relative;margin:0 var(--s3) var(--s3) 0;width:auto}
  .hero-foto::before{content:"";position:absolute;inset:var(--s3) calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3);background:var(--sand);border-radius:var(--radius)}
  .hero-foto img{position:relative;width:100%;height:auto;aspect-ratio:4/5;border-radius:var(--radius)}
  .finden-kopf{align-self:start}
  .finden-kopf b{font-size:22px}
  .adr span{display:block}
  .finden .tel{grid-column:1 / -1}
}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 466px;gap:var(--s6)}
  .hero-seite{grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto 1fr auto auto;gap:var(--s3);margin-top:0}
  .hero-foto{grid-row:1 / span 2}
  .finden .tel{grid-column:2;align-self:start}
}
/* Karte im Hero: Foto, Name, Ort und Nummer auch am Handy (Daniel, 4.10.2026), danach die Vertrauenszeile */
.finden .finden-satz{color:var(--tinte);font-weight:600}
@media (max-width:899px){.finden .tel{margin:-6px 0}}

/* Hero: einmaliges Hineingleiten beim Laden (Keyframes, Staffel, gleicher Weg und Ausklang wie beim Scrollen).
   H1 und Foto starten sichtbar (LCP), nur mit Versatz. Die vier Häkchen kommen einzeln. */
.js .auf{opacity:0;transform:translateY(var(--gleit-weg));animation:auf var(--gleit-dauer) var(--gleit-ease) forwards}
.js h1.auf,.js .hero-seite.auf{opacity:1;animation-name:auf-weg}
.js .auf:nth-child(2){animation-delay:calc(1 * var(--gleit-staffel))}
.js .zusagen.auf{opacity:1;transform:none;animation:none}
.js .zusagen.auf li{opacity:0;transform:translateY(var(--gleit-weg));animation:auf var(--gleit-dauer) var(--gleit-ease) forwards}
.js .zusagen.auf li:nth-child(1){animation-delay:calc(2 * var(--gleit-staffel))}
.js .zusagen.auf li:nth-child(2){animation-delay:calc(3 * var(--gleit-staffel))}
.js .zusagen.auf li:nth-child(3){animation-delay:calc(4 * var(--gleit-staffel))}
.js .zusagen.auf li:nth-child(4){animation-delay:calc(5 * var(--gleit-staffel))}
.js .aktionen.auf{animation-delay:calc(3 * var(--gleit-staffel))}      /* Knöpfe früh, die Häkchen laufen weiter */
.js .hero-seite.auf{animation-delay:calc(4 * var(--gleit-staffel) + 120ms)}
@keyframes auf{to{opacity:1;transform:none}}
@keyframes auf-weg{from{transform:translateY(var(--gleit-weg))}to{transform:none}}

/* ---------- Referenz (kurzer Beleg) ---------- */
.fakten{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:20px 0}
.referenzen{display:grid;gap:var(--s4)}
@media (min-width:900px){.fakten{padding:var(--s7) 0}}
.referenz{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s4);align-items:start}
@media (min-width:600px){.referenz{grid-template-columns:200px minmax(0,1fr);gap:var(--s5);padding:var(--s5)}}
@media (min-width:900px){.referenz{grid-template-columns:4fr 8fr;gap:var(--s6);align-items:center}}
.referenz-bild{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--linie)}
.referenz-bild picture{display:block}
.referenz-bild img{width:100%;height:auto}
.referenz-titel{display:block;font-family:var(--kopf);font-size:18px;margin-bottom:var(--s2)}
.referenz-link{font-weight:700;overflow-wrap:anywhere}
.referenz-text p{margin-bottom:var(--s2)}

/* ---------- Problem ---------- */
.problem-grid{display:grid;gap:var(--s7)}
@media (min-width:900px){.problem-grid{grid-template-columns:7fr 5fr;gap:var(--s8);align-items:start}.problem-such{margin-top:var(--s5) !important}}
.problem-grid > div:first-child{max-width:680px}
.rechen{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--linie);width:100%}
@media (min-width:900px){.rechen{margin-top:var(--s5);padding-top:var(--s4);max-width:420px}}
.rechen-titel{font-family:var(--kopf);font-weight:700;font-size:20px;line-height:1.3;margin-bottom:var(--s3)}
.rechen label{display:block;font-weight:600;font-size:16px;line-height:1.4;margin-bottom:var(--s2);text-wrap:balance}
.rechen-felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);align-items:end}
.rechen-in{display:flex;align-items:center;gap:var(--s2)}
.rechen input,.rechen select{width:100%;min-height:52px;padding:var(--s3);font:inherit;font-size:18px;color:var(--tinte);background:var(--weiss);border:2px solid var(--rand);border-radius:var(--radius)}
.rechen select{cursor:pointer}
.rechen input:focus,.rechen select:focus{border-color:var(--tinte)}
.rechen-in span{font-family:var(--kopf);font-weight:700;font-size:20px}
.rechen-aus{margin:var(--s4) 0 0}
.rechen-ergebnis{margin:0;font-weight:700;font-family:var(--kopf);font-size:19px;line-height:1.35}
.rechen-schmerz{margin:var(--s2) 0 0;color:var(--tinte)}
.rechen-schmerz:empty{display:none}
.rechen-preis{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px dashed var(--linie);font-weight:600}
.rechen .klein{margin-top:var(--s2)}
@media (max-width:359px){.rechen-felder{grid-template-columns:minmax(0,1fr)}}
.problem-such{display:none}
@media (min-width:900px){.problem-visual{display:flex;flex-direction:column;align-items:stretch}.problem-such{display:block;margin:0}}
.kein-eintrag{border-style:dashed;border-color:var(--rand);gap:var(--s2)}
.kein-eintrag .leer{display:block;height:14px;border-radius:7px;background:var(--sand)}
.kein-eintrag .leer.kurz{width:60%}
.kein-eintrag .vermerk{display:block;margin-top:var(--s2);color:var(--grau);font-weight:600}
@media (max-width:899px){.problem-grid{gap:0}}

/* ---------- Handyrahmen und Mockups (HTML, 16 px) ---------- */
.handy{width:min(240px,100%);border:3px solid var(--tinte);border-radius:var(--radius-handy);padding:10px;background:var(--weiss);box-shadow:var(--schatten-geraet)}
.handy-gross{width:min(300px,100%)}
.schirm{border-radius:18px;background:var(--weiss);border:1px solid var(--linie);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3);overflow:hidden;overflow:clip;font-size:16px;line-height:1.4}
.pille{display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:var(--s2) var(--s4);border:1px solid var(--rand);border-radius:var(--radius-chip);background:var(--weiss);font-size:16px;white-space:nowrap;overflow:hidden}
.pille svg{width:20px;height:20px;flex:none}
.pille span{overflow:hidden;text-overflow:ellipsis}
.schirm .leer{height:14px;border-radius:7px;background:var(--sand)}
.schirm .leer.kurz{width:60%}
.schirm .vermerk{margin:var(--s2) 0 0;color:var(--grau);text-align:center;padding:var(--s3) 0 var(--s4)}
.schirm.mini{padding:0;gap:0;background:var(--sand)}
.mini-kopf{display:flex;align-items:center;justify-content:space-between;padding:var(--s3);background:var(--weiss);border-bottom:1px solid var(--linie)}
.mini-kopf i{display:block;height:12px;width:40%;border-radius:6px;background:var(--linie)}
.mini-kopf i.knopf{width:28%;height:24px;background:var(--tinte);border-radius:6px}
.mini-hero{padding:var(--s4) var(--s3);background:var(--weiss);display:grid;gap:var(--s2)}
.mini-hero b{font-family:var(--kopf);font-size:17px;line-height:1.2}
.mini-hero span{font-size:16px;color:var(--grau)}
.mini-block{height:40px;margin:var(--s3);border-radius:6px;background:var(--weiss);border:1px solid var(--linie)}
.mini-block.kurz{height:36px;margin-top:0}
.mini-leiste{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s2)}
.mini-leiste span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-family:var(--kopf);font-weight:700;font-size:16px}
.mini-leiste svg{width:18px;height:18px;flex:none}
#f2 .handy{width:min(268px,100%)}
@media (max-width:379px){.mini-leiste svg{display:none}}
.mini-leiste .l-anruf{background:var(--orange);color:var(--tinte)}
.mini-leiste .l-wa{background:var(--tinte);color:var(--weiss)}

/* ---------- Lösung mit Features ---------- */
.loesung-grid{display:grid;gap:var(--s6)}
@media (min-width:900px){.loesung-grid{grid-template-columns:7fr 5fr;gap:var(--s9);align-items:center}}
.loesung-grid > div:first-child{max-width:680px}
/* Zielgebiet: die sechs Länder als ruhige Liste, darunter der Sitz (statt einer gezeichneten Karte) */
.gebiet{display:grid;gap:var(--s3)}
@media (min-width:900px){.gebiet{max-width:400px;margin-left:auto;padding:var(--s5);background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius)}}
.laender{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.laender li{padding:4px 12px;border:1px solid var(--rand);border-radius:var(--radius-chip);background:var(--weiss);font-size:16px;line-height:1.4;font-weight:600}
.sitz{display:flex;align-items:center;gap:var(--s2);margin:0;font-size:16px;font-weight:600;color:var(--grau)}
.sitz svg{width:20px;height:20px;flex:none;color:var(--tinte)}
@media (max-width:899px){.loesung-grid{gap:var(--s4)}.gebiet{display:none}.features-gross .feature{padding:var(--s4)}.features-gross .visual{margin-bottom:var(--s3)}.visual-mitte{padding-top:var(--s4);padding-bottom:var(--s4)}}
.features{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s5)}
@media (min-width:900px){.features-gross{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);align-items:stretch;margin-top:var(--s7)}.features-gross .visual{min-height:304px}}
.features-kompakt{margin-top:var(--s5)}
@media (min-width:600px){.features-kompakt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.features-kompakt{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);margin-top:var(--s6)}}
.feature h3{margin-bottom:var(--s2)}
.feature.kompakt h3{font-size:clamp(20px,1.5vw,22px);display:flex;gap:var(--s3);align-items:flex-start}
.feature.kompakt p{font-size:16px;line-height:1.5}
@media (min-width:1024px){
  .feature.kompakt{display:grid;grid-template-columns:184px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--s5);align-items:start;padding:var(--s5)}
  .feature.kompakt .visual{grid-row:1 / span 2;margin:0;align-self:stretch}
  .feature.kompakt h3{font-size:22px}
  .feature.kompakt p{font-size:16px}
}
/* Ab 1200 px stehen die vier kompakten Features in einer Reihe, Bild oben (Seitenhöhe am PC) */
@media (min-width:1200px){
  .features-kompakt{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
  .feature.kompakt{display:block}
  .feature.kompakt .visual{margin:0 0 var(--s4)}
  .feature.kompakt h3{font-size:20px}
}
.feature.kompakt .sym{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sand);display:grid;place-items:center;margin-top:-4px}
.feature.kompakt .sym svg{width:22px;height:22px}
@media (max-width:599px){.feature.kompakt .visual{display:none}.feature.kompakt{padding:var(--s3) 0 var(--s3);border:0;border-top:1px solid var(--linie);border-radius:0;background:none}.features-kompakt{gap:0;margin-top:var(--s3)}.feature.kompakt:first-child{border-top:0}}
@media (min-width:600px){.feature.kompakt .sym{display:none}}
.visual{background:var(--sand);border-radius:var(--radius);padding:var(--s4);margin-bottom:var(--s5);font-size:16px;line-height:1.45}
@media (max-width:899px){.feature .visual{margin-bottom:var(--s4)}}
@media (min-width:900px){.visual{padding:var(--s5)}}
.visual-mitte{display:flex;justify-content:center;padding-top:var(--s5);padding-bottom:var(--s5)}
/* overflow:clip statt hidden: hidden macht den Kasten zum Scroll-Container, animation-timeline:view() hinge dann am Kasten
   statt an der Seite (Abnahme Runde 2, PC 1). hidden bleibt nur als Rückfall für Browser ohne clip. */
.such-rahmen{overflow:hidden;overflow:clip}
.such-rahmen .suche{max-width:360px}
#f1 .such-rahmen .suche,#f1 .ergebnis{margin-left:auto;margin-right:auto}
.ergebnis{margin:var(--s4) 0 0;max-width:360px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:var(--s4);display:grid;gap:var(--s1)}
.erg-kopf{display:flex;align-items:center;gap:var(--s2);font-family:var(--kopf);font-size:17px;margin-bottom:var(--s1)}
.erg-kopf svg{width:20px;height:20px;flex:none}
.erg-zeile{display:block}
.erg-knopf{display:inline-block;justify-self:start;background:var(--orange);color:var(--tinte);font-family:var(--kopf);font-weight:700;padding:8px 16px;border-radius:6px;margin-top:var(--s2)}
/* kompakte Visuals: höchstens 160 px */
.visual.klein{min-height:120px;display:flex;flex-direction:column;justify-content:center;padding:var(--s4);margin-bottom:var(--s4)}
.visual.klein > *{flex-shrink:0}
.chat{display:grid;gap:var(--s2);max-width:360px}
.blase{max-width:92%;background:var(--weiss);border:1px solid var(--linie);border-radius:14px 14px 14px 2px;padding:4px var(--s3)}
.blase .zeit{display:block;font-size:16px;line-height:1.3;color:var(--grau);margin-top:2px}
.blase.antwort .zeit{color:var(--sand)}
.blase.antwort{justify-self:end;border-radius:14px 14px 2px 14px;background:var(--tinte);color:var(--weiss);border-color:var(--tinte)}
.ib .blase.antwort{opacity:0;transform:translateY(8px) scale(.96);transition:opacity var(--blase) var(--ease),transform var(--blase) var(--ease)}
.ib .blase.antwort.da{opacity:1;transform:none}
.zwei{gap:var(--s2)}
.zwei > div{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:var(--s2) var(--s3);min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
.zwei b{font-family:var(--kopf);font-size:17px}
.janein{gap:var(--s2)}
.janein > div{display:flex;align-items:center;gap:var(--s2);font-weight:600;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:var(--s2) var(--s3);min-height:44px}
.janein svg{width:22px;height:22px;flex:none;stroke-width:2.4}
.janein .nein{color:var(--grau);font-weight:400}
.janein .nein span{text-decoration:line-through}
.lade{gap:var(--s2)}
.lade-label{font-weight:600}
.lade-balken{height:14px;border-radius:7px;background:var(--weiss);border:1px solid var(--linie);overflow:hidden}
.lade-skala{display:flex;justify-content:space-between;font-size:16px;line-height:1.2;color:var(--grau);margin-top:-4px}
.lade-fuell{height:100%;background:var(--tinte);transform:scaleX(0);transform-origin:left center;transition:transform 600ms var(--ease)}
.lade .lade-wert{font-family:var(--kopf);font-weight:800;font-size:28px;line-height:1}
.lade .ph{justify-self:start;align-self:start}

/* ---------- Vorschau-Generator (prototyp/vorschau.css, Variablen auf das Designsystem gesetzt) ---------- */
.vs{--vs-navy:var(--tinte);--vs-orange:var(--orange);--vs-ink:var(--tinte);--vs-grau:var(--grau);--vs-line:var(--rand);--vs-bg:var(--weiss);--vs-f:var(--text);--vs-kopf:16px;
    padding:var(--s8) 0;background:var(--weiss);font-size:inherit;line-height:1.55;overflow:clip}
@media (max-width:899px){.vs{padding:var(--abschnitt-handy) 0}}
@media (min-width:900px){.vs{padding:var(--abschnitt-pc) 0}}
.vs .vs-wrap{max-width:1120px;padding:0 20px}
@media (min-width:900px){.vs .vs-wrap{padding:0 32px}}
.vs .vs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);grid-template-areas:"kopf" "form" "buehne" "aktion"}
.vs .vs-kopf-text{grid-area:kopf;max-width:680px}
.vs .vs-form{grid-area:form}
.vs .vs-buehne{grid-area:buehne}
.vs .vs-aktion{grid-area:aktion}
@media (min-width:900px){.vs .vs-grid{grid-template-columns:5fr 7fr;grid-template-areas:"kopf buehne" "form buehne" "aktion buehne";gap:var(--s6) var(--s9);align-items:start}.vs .vs-kopf-text{margin-bottom:var(--s2)}}
.vs .vs-feld{margin-bottom:var(--s3)}
.vs .vs-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--s3)}
@media (max-width:359px){.vs .vs-zeile{grid-template-columns:minmax(0,1fr)}.vs .vs-handy{height:660px}}
.vs .vs-zeile .vs-feld:last-child{grid-column:1 / -1}
/* Felder (PC B2, Technik 4): 900 bis 1023 px untereinander, ab 1024 px Branche und Ort nebeneinander auf einer Höhe, Name darunter */
.vs .vs-zeile{align-items:start}
.vs .vs-feld label{display:block}
@media (min-width:900px) and (max-width:1023px){.vs .vs-zeile{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1024px){.vs .vs-grid{grid-template-columns:minmax(0,1fr) 400px;gap:var(--s4) var(--s8)}}
.vs .vs-feld label{font-size:17px;font-weight:600}
.vs .vs-feld small,.vs .vs-hinweis{font-size:16px;line-height:1.5}
.vs .vs-feld input{border-radius:var(--radius);min-height:52px;font-family:var(--text)}
.vs .vs-feld input:focus{border-color:var(--tinte)}
/* Datalist (Abnahme Runde 3, Handy-Vertrauen 1): Chrome hält rechts Platz für das Auswahlsymbol frei, bei 360 px wäre der Platzhalter abgeschnitten. !important ist nötig: sobald die Liste Einträge hat, setzt Chrome die Anzeige des Symbols selbst mit !important */
.vs #vs-branche::-webkit-calendar-picker-indicator{display:none !important}
.vs .vs-chips-titel{font-size:17px;font-weight:600;margin:var(--s4) 0 var(--s2)}
.vs .vs-chip{border:1px solid var(--rand);color:var(--tinte);font-weight:600;font-family:var(--text);background:var(--weiss);transition:none;position:relative;isolation:isolate;overflow:hidden}
.vs .vs-chip::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sand);opacity:0;transition:opacity var(--kurz)}
.vs .vs-chip:hover{background:var(--weiss)}
.vs .vs-chip:hover::before{opacity:1}
.vs .vs-chip[aria-current="true"],.vs .vs-chip[aria-current="true"]:hover{background:var(--tinte);border-color:var(--tinte);color:var(--weiss)}
.vs .vs-chip[aria-current="true"]::before{display:none}
.vs .vs-buehne{max-width:none;width:100%;justify-self:center;gap:0}
.vs .vs-handy{width:100%;max-width:340px;height:592px;min-height:0;max-height:none;background:var(--tinte);box-shadow:var(--schatten-geraet),inset 0 0 0 2px rgba(255,255,255,.14);border-radius:var(--radius-handy)}
/* Schmale Handys: Texte im Rahmen brechen öfter um, der Rahmen wird höher, damit nichts abgeschnitten ist */
@media (max-width:389px){.vs .vs-handy{height:620px}}
@media (max-width:359px){.vs .vs-handy{height:640px}}
@media (min-width:900px){.vs .vs-handy{max-width:360px;height:700px}}
@media (min-width:1024px){.vs .vs-handy{max-width:400px;height:752px}}
.vs .vs-kerbe{background:var(--tinte)}
.vs .vs-schirm{border-radius:20px;overflow:hidden;font-size:13px}
/* Schrift in der Mini-Seite: kleinste Stufe 12 px (Rahmen ist ein Bild im Maßstab, siehe OFFENE-PUNKTE) */
.vs .vs-m-kopf{padding:28px 12px 9px}
.vs .vs-m-logo{font-size:13px}
.vs .vs-m-anruf,.vs .vs-m-knopf{font-size:12px;padding:7px 11px}
.vs .vs-m-hero{padding:14px 14px 16px}
.vs .vs-m-hero h3{font-size:20px;margin-bottom:8px;min-height:2.4em}
.vs .vs-m-hero p{font-size:13px;margin-bottom:12px;min-height:3em}
@media (max-width:899px){.vs .vs-schirm .vs-m-belege{display:none}.vs .vs-m-fuss br{display:none}.vs .vs-m-fuss b::after,.vs .vs-m-fuss span::after{content:" · "}}
.vs .vs-schirm .vs-m-belege{padding:10px}
.vs .vs-m-belege li{font-size:12px;min-height:3.3em}
.vs .vs-m-status{font-size:13px;padding:8px 14px}
.vs .vs-m-leist{padding:0 14px 8px}
.vs .vs-m-leist h4{font-size:14px;margin-bottom:6px}
.vs .vs-m-leist li{font-size:13px;min-height:32px;padding:6px 10px;margin-bottom:5px}
.vs .vs-m-bew{margin:0 14px 10px;padding:8px 12px}
.vs .vs-m-bew p{font-size:13px}
.vs .vs-m-bew small{font-size:12px;min-height:2.4em}
.vs .vs-m-fuss{font-size:12px;padding:10px 14px 12px}
/* Ab 1024 px ist Platz: Schrift im Rahmen mindestens 14 px (PC B4, Technik 6) */
@media (min-width:1024px){
  .vs .vs-schirm{font-size:14px}
  .vs .vs-m-logo{font-size:15px}
  .vs .vs-m-anruf,.vs .vs-m-knopf{font-size:14px;padding:8px 12px}
  .vs .vs-m-hero h3{font-size:23px}
  .vs .vs-m-hero p{font-size:15px}
  .vs .vs-m-belege li{font-size:14px}
  .vs .vs-m-status{font-size:15px}
  .vs .vs-m-leist h4{font-size:16px}
  .vs .vs-m-leist li{font-size:15px}
  .vs .vs-m-bew p{font-size:15px}
  .vs .vs-m-bew small{font-size:14px}
  .vs .vs-m-fuss{font-size:14px}
}
.vs .vs-aktion{display:grid;gap:var(--s3);justify-items:center;max-width:380px;margin:0 auto;width:100%}
@media (min-width:900px){.vs .vs-aktion{justify-items:start;margin:0;max-width:none}}
.vs .vs-beispiel{text-align:center;max-width:none;margin:0}
.vs .vs-cta,.vs .vs-cta:visited,.vs .vs-cta:hover,.vs .vs-cta:focus{border-radius:var(--radius);font-family:var(--kopf);font-size:18px;background:var(--orange);color:var(--tinte);transition:transform var(--kurz) var(--ease);max-width:380px}
.vs .vs-cta:hover{transform:translateY(-1px)}
@media (max-width:419px){.vs .vs-cta svg{display:none}}
.vs .vs-hinweis{color:var(--grau);margin:0;text-align:center}
@media (min-width:900px){.vs .vs-beispiel,.vs .vs-hinweis{text-align:left}}

/* ---------- Preise ---------- */
.preise{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:900px){.preise{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:stretch;margin-top:var(--s7)}}
@media (min-width:1024px){.preise{gap:var(--s5)}.preise .preis{padding:var(--s5)}}
@media (min-width:900px) and (max-width:1023px){.preise .preis{padding:var(--s5) var(--s4)}.preise .betrag b{font-size:42px}}
.preis{position:relative;display:flex;flex-direction:column}
/* Kopf (Titel und Satz) und Rumpf: am Handy ohne eigene Box; ab 900 px teilen sich die drei Karten über Subgrid die Höhe des Kopfs,
   damit Preis und „Im zweiten Jahr“ auf einer Linie stehen (Prüfrunde 1, PC 4) */
.preis-kopf,.preis-rumpf{display:contents}
@media (min-width:900px){.preis{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}.preis-kopf{display:block}.preis-rumpf{display:flex;flex-direction:column}}
.preis.empf{border:2px solid var(--tinte)}
.badge{position:absolute;top:-17px;left:var(--s5);background:var(--tinte);color:var(--weiss);font-family:var(--kopf);font-weight:700;font-size:16px;line-height:1;padding:9px 14px;border-radius:var(--radius-chip)}
.preis h3{font-size:clamp(22px,2vw,26px)}
.fuerwen-satz{margin:var(--s2) 0 0;color:var(--grau);font-size:16px;line-height:1.5}
.betrag{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s4) 0 var(--s1);font-family:var(--kopf)}
.betrag b{font-size:clamp(44px,4.5vw,56px);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.betrag span{font-size:18px;font-weight:600}
.anker{color:var(--grau);font-size:16px;margin-bottom:var(--s3)}
.leist-titel{font-family:var(--kopf);font-weight:600;font-size:16px;letter-spacing:.04em;text-transform:uppercase;margin:var(--s3) 0;padding-top:var(--s4);border-top:1px solid var(--linie)}
.leist{list-style:none;display:grid;gap:4px;font-size:16px}
@media (min-width:900px){.leist{font-size:16px;gap:2px}.preis .warum,.preis .fuerwen-satz{font-size:16px}}
.leist li{display:flex;gap:var(--s2);align-items:flex-start}
.leist svg{width:22px;height:22px;flex:none;margin-top:3px;stroke-width:2.4}
.preis .fehlt{margin:var(--s3) 0 0}
/* Einzelheiten der Karte: am PC Überschrift und Liste offen, am Handy ein Knopf, der die Liste auf- und zuklappt */
.leist-knopf{display:none}
.leist-titel-m{display:none}
@media (max-width:899px){.leist-titel-m{display:block;margin:var(--s2) 0 var(--s1);font-weight:600}}
@media (max-width:899px){
  .preis .leist-titel{display:none}
  .leist-knopf{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);width:100%;min-height:48px;margin:var(--s2) 0 0;padding:var(--s2) 0;background:none;border:0;border-top:1px solid var(--linie);color:inherit;cursor:pointer;text-align:left;font-family:var(--kopf);font-weight:600;font-size:16px;letter-spacing:0;text-transform:none}
  .leist-knopf svg{width:24px;height:24px;flex:none;transition:transform var(--plus) var(--ease)}
  .leist-knopf[aria-expanded="true"] svg{transform:rotate(45deg)}
  .leist-inhalt[hidden]{display:none}
  .leist-inhalt{padding-bottom:var(--s2)}
  .preis .leist-knopf + .leist-inhalt[hidden] + .btn{margin-top:var(--s3)}
}
@media (min-width:900px){.leist-inhalt[hidden]{display:block}.preis .leist-inhalt{margin-bottom:var(--s4)}}
@media (max-width:899px){.bewertungskarten h3{margin:0}.bewertungskarten .h3-text{display:none}.leist-knopf.knopf-gross{margin:0;border-top:0;text-transform:none;letter-spacing:-.01em;font-weight:700;font-size:19px}.bewertungskarten .leist-inhalt{padding-bottom:0}}
.warum{margin:0 0 var(--s2);font-weight:600;font-size:17px;line-height:1.45}
.buchung-hinweis{margin:var(--s3) 0 0;padding:var(--s3);background:var(--sand);border-radius:var(--radius)}
.bewertung-zusatz{margin:var(--s2) 0 0}
.preis .btn{margin-top:auto;width:100%}
.preis .fehlt + .btn{margin-top:var(--s4)}
.preis-fuss{margin-top:var(--s5);display:grid;gap:var(--s4)}
.preis-fuss .mindestens{margin:0;padding:var(--s4)}
.bewertungskarten h3,.treue h3{font-size:clamp(19px,1.6vw,22px);margin-bottom:var(--s2)}
.bewertungskarten p{margin:0;font-size:17px}
.preis-text{margin-top:var(--s5);display:grid;gap:var(--s2);font-size:16px}
@media (min-width:900px){.preis-text{font-size:17px}}
.preis-text p{margin:0}
/* PC: links Mindestzahlung und Bewertungskarten, rechts die Treue-Treppe, darunter die Sätze in zwei Spalten */
@media (min-width:900px){.preis-unten{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:start;margin-top:var(--s6)}
  .preis-unten .preis-fuss{margin-top:0}.preis-fuss .mindestens{padding:var(--s5)}
  .preis-unten .treue{margin-top:0;padding-top:0;border-top:0}
  .preis-text{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3) var(--s6);margin-top:var(--s6)}}
/* Treue-Treppe: Jahr 1 bis 6, Balken im Verhältnis zum Monatspreis. Handy 3 x 2 kompakt ohne Balken, ab 600 px eine Reihe mit Balken */
.treue{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--linie)}
.treue-kopf p{margin-bottom:var(--s2)}
.treppe-titel{margin:var(--s3) 0 var(--s2)}
.treppe{list-style:none;display:grid;gap:0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:var(--s1) var(--s3)}
.stufe{display:grid;grid-template-columns:minmax(0,1fr) auto 6.6em;align-items:baseline;gap:0 var(--s3);padding:3px 0;line-height:1.3}
.stufe + .stufe{border-top:1px solid var(--linie)}
.stufe-weniger{text-align:right}
.stufe-jahr{font-size:16px;color:var(--grau)}
.stufe-preis{font-family:var(--kopf);font-size:18px;font-variant-numeric:tabular-nums}
.stufe-weniger{font-size:16px;font-weight:600;min-height:1.3em}
.stufe-balken{display:none}
@media (min-width:600px){
  /* Säulen auf gemeinsamer Grundlinie: jede Stufe nutzt die vier Zeilen der Treppe (subgrid), Preis oben, Jahr unten */
  .treppe{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto auto auto;gap:2px var(--s2);background:none;border:0;padding:0}
  .stufe{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);align-items:end;gap:2px;padding:0;border:0}
  .stufe + .stufe{border-top:0}
  .stufe-preis{grid-row:1}
  .stufe-weniger{grid-row:2;text-align:left;font-weight:400}
  .stufe-balken{grid-row:3;display:block;align-self:end;height:calc(var(--anteil) * 96px);background:var(--tinte);border-radius:var(--radius) var(--radius) 0 0;margin-top:var(--s1)}
  .stufe-jahr{grid-row:4;align-self:start;padding-top:var(--s1);border-top:2px solid var(--tinte)}
  .stufe:first-child .stufe-balken{background:var(--rand)}
}
@media (min-width:900px){.stufe-balken{height:calc(var(--anteil) * 72px)}.stufe-preis{font-size:19px}}
.treue-link{margin:var(--s3) 0 0}
.mindestens b{font-family:var(--kopf)}
@media (max-width:899px){.preis{padding:var(--s4)}.preis .btn{padding-left:var(--s3);padding-right:var(--s3)}}

/* ---------- Ablauf ---------- */
.schritte{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:900px){.schritte{grid-template-columns:repeat(3,1fr);gap:var(--s7);margin-top:var(--s7)}}
.schritt{display:grid;grid-template-columns:56px 1fr;gap:var(--s4);align-items:start}
@media (min-width:900px){.schritt{grid-template-columns:64px 1fr;gap:var(--s4);align-content:start}}
.nr{width:56px;height:56px;border-radius:50%;background:var(--tinte);color:var(--weiss);display:grid;place-items:center;font-family:var(--kopf);font-weight:800;font-size:24px}
@media (min-width:900px){.nr{width:64px;height:64px;font-size:28px}}
.schritt h3{margin-bottom:var(--s2)}
/* Fließtext mit Trennpunkt in der Lücke vor jedem Punkt; am Zeilenanfang liegt er links außerhalb von .meta und wird abgeschnitten,
   am Zeilenende gibt es keinen (Abnahme Runde 2, Handy 6). Seit Prüfrunde 1 (PC 6) auch am PC statt Pillen, die dort zweizeilig umbrachen. */
.meta{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--s5);margin:0 0 var(--s3);overflow:hidden}
.meta li{position:relative;font-size:16px;line-height:1.3;font-weight:600;color:var(--grau)}
.meta li::before{content:"·";content:"·" / "";position:absolute;top:0;left:calc(-1 * var(--s5));width:var(--s5);text-align:center}
@media (max-width:899px){.meta{margin-bottom:var(--s1)}.schritt h3{margin-bottom:var(--s1)}.schritt p{font-size:16px}}
.schritt p{max-width:760px}

/* ---------- FAQ (Buttons mit aria-expanded) ---------- */
.faq-wrap{max-width:760px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.faq{margin-top:var(--s4)}
.faq-spalte{border-top:1px solid var(--linie)}
.faq-spalte + .faq-spalte{border-top:0}
@media (min-width:1024px){.faq-wrap{max-width:1120px;padding-left:32px;padding-right:32px}.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--s7);align-items:start}.faq-spalte + .faq-spalte{border-top:1px solid var(--linie)}}
@media (min-width:900px){.faq{margin-top:var(--s6)}}
.faq-e{border-bottom:1px solid var(--linie)}
.faq-e h3{margin:0}
.faq-f{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:52px;padding:8px 0;margin:0;background:none;border:0;color:inherit;cursor:pointer;text-align:left;font:inherit;font-family:var(--kopf);font-weight:700;font-size:clamp(18px,1.6vw,22px);line-height:1.3;text-wrap:pretty}
@media (min-width:900px){.faq-f{min-height:60px;padding:var(--s3) 0}}
.faq-f svg{width:28px;height:28px;flex:none;transition:transform var(--plus) var(--ease)}
.faq-f[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq-a{padding:0 0 var(--s5);max-width:720px}
.faq-a[hidden]{display:none}

/* ---------- Letzte Aufforderung ---------- */
.schluss .aktionen{justify-content:center}
.schluss h2{margin-top:0}
.schluss .btn-sek svg{width:20px;height:20px}
.erreichbar{margin-top:var(--s4);color:var(--sand)}
.schluss-vertrauen{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s3) var(--s6);margin-top:var(--s5)}
.schluss-person{display:flex;align-items:center;gap:var(--s3);text-align:left}
.schluss-person img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--weiss)}
.schluss-person b{display:block;font-family:var(--kopf);font-size:20px;line-height:1.2}
.schluss-tel{display:inline-flex;align-items:center;min-height:44px;color:var(--weiss);font-weight:700;text-decoration:none;white-space:nowrap}
.schluss-haken{margin:0;grid-template-columns:1fr;text-align:left}
@media (min-width:600px){.schluss-haken{grid-template-columns:1fr}}
.schluss .aktionen{margin-top:var(--s5)}

/* ---------- Fußzeile ---------- */
.fuss{padding:var(--s5) 0;border-top:1px solid var(--linie);font-size:16px;line-height:1.5}
@media (min-width:900px){.fuss{padding:40px 0}}
.fuss-grid{display:grid;gap:var(--s5)}
.fuss-navs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.fuss-navs a,.fuss-navs .ph{overflow-wrap:anywhere;hyphens:auto}
@media (min-width:900px){.fuss-grid{grid-template-columns:1fr 1fr;gap:var(--s7)}.fuss-navs{gap:var(--s7)}}
.fuss b{display:block;font-family:var(--kopf);font-size:18px;margin-bottom:var(--s1)}
.fuss address{font-style:normal;line-height:1.6}
.fuss-tel{font-weight:600}
.fuss ul{list-style:none;display:grid;gap:0}
@media (max-width:899px){.fuss-navs ul{display:flex;flex-wrap:wrap;gap:0 var(--s4)}}
.fuss a:not(.fuss-tel){display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.fuss-tel{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.fuss .steuer{margin-top:var(--s2);color:var(--grau)}
.fuss-region{margin:var(--s3) 0 0;max-width:460px}
.fuss nav p{margin-top:var(--s3)}

/* ---------- Unterseiten ---------- */
.seite-top{padding:var(--s7) 20px var(--s8)}
@media (min-width:900px){.seite-top{padding:var(--s8) 32px var(--s10)}}
.prose{max-width:760px}
.prose h1{margin-bottom:var(--s5);hyphens:auto;overflow-wrap:break-word}
.prose h2{font-size:clamp(21px,1.8vw,24px);margin:var(--s6) 0 var(--s3)}
.prose ul{padding-left:var(--s5);display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.krume{display:flex;gap:var(--s2);align-items:center;font-size:16px;color:var(--grau);margin-bottom:var(--s5)}
.krume a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}

/* ---------- Vergleich (vergleich.html) ---------- */
.angst{max-width:760px;margin-top:var(--s6);padding:var(--s5);background:var(--sand);border-radius:var(--radius)}
@media (min-width:900px){.angst{padding:var(--s6)}}
.angst h2{font-size:clamp(21px,1.8vw,24px);margin-bottom:var(--s3)}
.angst ul{list-style:none;display:grid;gap:var(--s3);margin:var(--s4) 0}
.angst li{padding-left:var(--s5);position:relative}
.angst li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--tinte)}
.vgl-tabelle{display:none;margin-top:var(--s7)}
.vgl-karten{display:grid;gap:var(--s5);margin-top:var(--s7)}
@media (min-width:900px){.vgl-tabelle{display:block}.vgl-karten{display:none}}
.vgl-tabelle table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.vgl-tabelle th,.vgl-tabelle td{padding:var(--s4);border-bottom:1px solid var(--linie);vertical-align:top;text-align:left}
.vgl-tabelle thead th{font-family:var(--kopf);font-size:17px;border-bottom:2px solid var(--tinte)}
.vgl-tabelle tbody th{font-weight:600;color:var(--grau);width:18%}
.vgl-tabelle tr:last-child td,.vgl-tabelle tr:last-child th{border-bottom:0}
.vgl-tabelle .daniel{background:var(--sand);font-weight:600}
.vgl-tabelle thead .daniel{background:var(--tinte);color:var(--weiss)}
.vgl-karte dl{margin:var(--s4) 0 0;display:grid;gap:var(--s3)}
.vgl-karte dl > div{display:grid;gap:2px}
.vgl-karte dt{font-size:16px;color:var(--grau);font-weight:600}
.vgl-karte dd{margin:0}
.vgl-karte.daniel{border:2px solid var(--tinte)}
.vgl-karte.daniel dd{font-weight:600}
td svg.ja,td svg.nein,dd svg.ja,dd svg.nein{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-right:6px;stroke-width:2.4}
svg.nein{color:var(--grau)}
.nicht{margin-top:var(--s7)}
.nicht ul{list-style:none;padding:0;display:grid;gap:var(--s2)}
.nicht li{display:flex;gap:var(--s2);align-items:flex-start}
.nicht svg{width:22px;height:22px;flex:none;margin-top:3px;color:var(--grau)}
.lang-features{display:grid;gap:var(--s4);margin:var(--s5) 0 var(--s6)}
.lang-feature{padding:var(--s4) 0;border-top:1px solid var(--linie)}
.lang-feature h3{font-size:clamp(19px,1.6vw,22px);margin-bottom:var(--s2)}
.vgl-schluss{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--linie)}
.vgl-schluss h2{margin-top:0}
.prose h2[id]{scroll-margin-top:var(--s4)}
.treue-gross,.treue-klein{margin:var(--s4) 0 var(--s5)}
/* Grundregeln vor der Media-Query, sonst hebt die spätere Regel das Ausblenden auf (Prüfrunde 1, PC 3 und Technik 1) */
.treue-gross{display:none}
.treue-klein{display:grid;gap:var(--s4)}
@media (min-width:600px){.treue-gross{display:block}.treue-klein{display:none}}
.treue-tabelle,.treue-paket{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4;background:var(--weiss);border:1px solid var(--linie);font-variant-numeric:tabular-nums}
.treue-tabelle th,.treue-tabelle td,.treue-paket th,.treue-paket td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.treue-tabelle thead th{font-family:var(--kopf);border-bottom:2px solid var(--tinte);hyphens:manual}
.treue-tabelle tbody th,.treue-paket th{font-weight:600;color:var(--grau)}
.treue-tabelle td,.treue-paket td{font-weight:600}
.treue-paket caption{text-align:left;font-family:var(--kopf);font-weight:700;padding-bottom:var(--s2)}
.provision{list-style:none;padding:0 !important}
.partner-fragen{display:grid;gap:0;margin-top:var(--s3)}
.partner-frage{padding:var(--s4) 0;border-top:1px solid var(--linie)}
.partner-frage h3{font-size:clamp(19px,1.6vw,22px);margin-bottom:var(--s2)}

/* Handy (Seitenhöhe): Feature 2 zeigt die Anrufleiste, die der Besucher am Handy ohnehin unten sieht; das Beispielbild
   und sein Hinweis entfallen dort. Fragen und kompakte Features eine Stufe kleiner. */
@media (max-width:599px){
  #f2 .visual,#f2 .hinweis{display:none}
  .faq-f{font-size:17px}
  .feature.kompakt h3{font-size:19px}
}

/* ---------- Feste Anrufleiste am Handy ---------- */
.leiste{display:none}
@media (max-width:899px){
  html{scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom) + 12px)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);box-shadow:var(--schatten-leiste);padding-bottom:env(safe-area-inset-bottom)}
  .leiste a{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:64px;padding:12px 8px;font-family:var(--kopf);font-weight:700;font-size:18px;text-decoration:none}
  .leiste a svg{width:22px;height:22px;flex:none}
  .leiste .l-anruf{background:var(--orange);color:var(--tinte)}
  .leiste .l-wa{background:var(--tinte);color:var(--weiss)}
  .leiste a:focus-visible{outline-offset:-5px}
  .leiste .l-anruf:focus-visible{outline-color:var(--tinte)}
}
@media (max-width:319px){.leiste a svg{display:none}}

/* ---------- Sanftes Hineingleiten beim Scrollen (Handy und PC) ----------
   Versteckt nur unter .io (setzt main.js direkt vor dem Intersection Observer); lädt main.js nicht oder fehlt JavaScript,
   bleibt alles sichtbar. Nur transform und opacity, die Staffel setzt main.js als --gleit-verz je Element. */
.r{opacity:1;transform:none}
.io .r{opacity:0;transform:translate3d(0,var(--gleit-weg),0);transition:opacity var(--gleit-dauer) var(--gleit-ease) var(--gleit-verz,0ms),transform var(--gleit-dauer) var(--gleit-ease) var(--gleit-verz,0ms)}
.io .r.in{opacity:1;transform:none}
/* Schon gemalt, im Bild oder Ziel eines Ankersprungs: ohne Übergang sichtbar (main.js setzt .sofort), kein zweites Hineingleiten */
.io .r.sofort{transition:none}
/* Bausteine in Feature 1 und 2 und die Ziffern im Ablauf: scroll-gekoppelt mit view(), aber nur ohne GSAP (am PC übernimmt choreo.js) */
@supports (animation-timeline: view()){
  @media (min-width:900px){
    .js.sda #f1 .ergebnis{animation:hinein linear both;animation-timeline:view();animation-range:entry 15% cover 45%}
    .js.sda #f2 .mini-leiste{animation:hochfahren linear both;animation-timeline:view();animation-range:entry 25% cover 55%}
    .js.sda .nr{animation:nr-auf var(--dauer) var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}
@keyframes hinein{from{opacity:0;transform:translateY(32%)}to{opacity:1;transform:none}}
@keyframes hochfahren{from{transform:translateY(100%)}to{transform:none}}
@keyframes nr-auf{from{transform:scale(.8)}to{transform:none}}
/* GSAP am PC: die CSS-Fassung von Feature 1 und 2 wird abgelöst, damit nichts doppelt läuft */
.js.gsap #f1 .ergebnis,.js.gsap #f2 .mini-leiste{animation:none}
.js #f1 .such-rahmen,.js #f2 .schirm{overflow:hidden;overflow:clip}

@media (prefers-reduced-motion:reduce){
  .js .r,.js .r.in,.js .auf,.js .zusagen.auf li,.js .blase.antwort,.io .r,.ib .blase.antwort{opacity:1;transform:none;transition:none;animation:none}
  .js h1.auf,.js .hero-seite.auf{animation:none}
  .js.sda #f1 .ergebnis,.js.sda #f2 .mini-leiste,.js.sda .nr{animation:none}
  .btn,.faq-f svg,.lade-fuell,.vs .vs-chip::before{transition:none}
}