/* ==========================================================
   PAYCARS · Stylesheet
   Schwebende Leiste, glänzende Kacheln, weiße Karten mit feiner
   Linie, große enge Überschriften, viel Luft.
   Zuerst fürs Handy gebaut. Größere Bildschirme stehen ganz unten.
   ========================================================== */

/* ---------- Schriften ----------
   Liegen im Ordner fonts auf dem eigenen Server, es wird nichts von Google geladen (Datenschutz).
   Jede Datei enthält alle Stärken. Die zweite Datei je Schrift (latin-ext) holt der Browser nur,
   wenn ein seltener Buchstabe vorkommt, zum Beispiel aus dem Polnischen oder Türkischen. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/inter-tight-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/inter-tight-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/urbanist-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/urbanist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#F1F3F4;
  --card:#FFFFFF;
  --tile:#F3F4F6;
  --line:#E3E6E9;
  --line-2:#ECEEF1;

  --ink:#0B0B0D;
  --ink-2:#2E3138;
  --mute:#6F757E;
  --mute-2:#9AA0A8;
  --mute-3:#C3C8CE;

  --brand:#00B37E;
  --brand-hi:#35D9A3;
  --brand-lo:#00A974;
  --brand-soft:#E7F8F1;
  --brand-line:#B4E7D4;
  --err:#C8281E;

  --head:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Urbanist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --sh-xs:0 1px 2px rgba(15,20,30,.05);
  --sh-s:0 1px 2px rgba(15,20,30,.04),0 8px 18px -10px rgba(15,20,30,.14);
  --sh-m:0 2px 4px rgba(15,20,30,.04),0 18px 36px -18px rgba(15,20,30,.22);
  --sh-l:0 2px 6px rgba(15,20,30,.04),0 34px 64px -30px rgba(15,20,30,.30);

  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --gut:16px;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:var(--body);font-size:1.0625rem;line-height:1.5;font-weight:500;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100svh;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;letter-spacing:-.04em;line-height:1.04;color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
[hidden]{display:none!important}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{width:min(100% - (var(--gut) * 2),1120px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Knöpfe ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:54px;padding:0 22px;border-radius:14px;font-family:var(--body);font-weight:700;font-size:1.0625rem;line-height:1;white-space:nowrap;
  transition:transform .15s var(--ease),box-shadow .25s var(--ease),filter .2s,background-color .2s;user-select:none;
}
.btn:active{transform:scale(.975)}
.btn .ic{width:18px;height:18px;stroke-width:2.3;transition:transform .25s var(--ease)}
.btn-primary{
  color:#fff;background:linear-gradient(180deg,#17C28D 0%,var(--brand) 60%,var(--brand-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.08),0 12px 22px -10px rgba(0,179,126,.65),0 2px 4px rgba(0,179,126,.22);
  text-shadow:0 1px 1px rgba(0,92,64,.28);
}
.btn-dark{color:#fff;background:linear-gradient(180deg,#2B2D33,#0B0B0D);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 18px -10px rgba(11,11,13,.6)}
.btn-light{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-xs);color:var(--ink)}
.btn-block{width:100%}
.btn-s{height:38px;padding:0 14px;border-radius:11px;font-size:.94rem;font-weight:600}
.btn-l{height:58px;padding:0 28px;border-radius:16px;font-size:1.1rem}
.btn[disabled]{opacity:.75;pointer-events:none}
@media (hover:hover){
  .btn-primary:hover{filter:brightness(1.05) saturate(1.05)}
  .btn-dark:hover{filter:brightness(1.25)}
  .btn:hover .ic{transform:translateX(3px)}
}
.link-btn{display:block;margin:14px auto 0;padding:8px 10px;font-weight:600;font-size:.98rem;color:var(--mute);text-decoration:underline;text-decoration-color:var(--mute-3);text-underline-offset:4px}
.tlink{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------- Glänzende Kachel (das Erkennungszeichen des Designs) ---------- */
.gt{
  --a:var(--brand-hi);--b:var(--brand-lo);--s:rgba(0,179,126,.5);--d:rgba(0,138,97,.42);--fg:#fff;--sz:56px;
  position:relative;display:grid;place-items:center;flex:none;width:var(--sz);height:var(--sz);border-radius:calc(var(--sz) * .29);
  background:linear-gradient(180deg,var(--a),var(--b));color:var(--fg);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -8px 12px -6px var(--d),inset 0 0 0 1px rgba(255,255,255,.16),0 14px 22px -10px var(--s),0 3px 6px -2px rgba(15,20,30,.08);
}
.gt::after{content:'';position:absolute;inset:5% 7% 50% 7%;border-radius:calc(var(--sz) * .24);background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));pointer-events:none}
.gt > .ic{position:relative;z-index:1;width:48%;height:48%;stroke-width:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.14))}
.gt > .ic-duo{width:62%;height:62%;stroke-width:1.8}
/* Regel für alle Kacheln: farbige Kachel = weißes Icon, weiße Kachel = Icon in der Markenfarbe */
.gt-amber{--a:#FFD84F;--b:#FBB40C;--s:rgba(251,180,12,.5);--d:rgba(228,156,0,.4)}
.gt-sky{--a:#77D6FF;--b:#2AA9EE;--s:rgba(42,169,238,.5);--d:rgba(20,130,205,.4)}
.gt-violet{--a:#B7A6FF;--b:#7A5AF0;--s:rgba(122,90,240,.45);--d:rgba(84,58,196,.4)}
.gt-ink{--a:#40434B;--b:#111215;--s:rgba(17,18,21,.45);--d:rgba(0,0,0,.5)}
.gt-white{--a:#FFFFFF;--b:#F5F6F8;--fg:var(--brand);box-shadow:inset 0 0 0 1px var(--line),inset 0 -6px 10px -6px rgba(15,20,30,.06),0 14px 22px -12px rgba(15,20,30,.22),0 2px 5px rgba(15,20,30,.05)}
.gt-white::after{display:none}
.gt-white > .ic{filter:none}
.gt-amber > .ic{filter:drop-shadow(0 1px 1.5px rgba(160,100,0,.4))}   /* Weiß auf Gelb braucht etwas mehr Schatten */

/* Kleines Abzeichen über jeder Überschrift */
/* Abzeichen über einer Überschrift. Nur dort, wo die Überschrift in einer eigenen Karte sitzt (Erst das Geld. Dann der Schlüssel.).
   Über frei stehenden Überschriften steht keins. */
.badge{--sz:56px;margin:0 auto 18px}
.badge > .ic{width:44%;height:44%;stroke-width:2.1}

/* ---------- Schwebende Leiste oben ---------- */
.hdr{position:fixed;top:calc(10px + env(safe-area-inset-top));left:0;right:0;z-index:50;pointer-events:none}
.hdr-in{
  pointer-events:auto;margin:0 12px;height:54px;padding:0 8px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line);border-radius:17px;box-shadow:var(--sh-s);transition:box-shadow .3s;
}
.hdr.is-stuck .hdr-in{box-shadow:var(--sh-m)}
.logo{display:inline-flex;align-items:center;gap:9px}
.logo-img{display:block;height:19px;width:auto}
.nav{display:none}
.hdr-act{display:flex;align-items:center;gap:6px}
.hdr-act .sq{--sz:38px}   /* WhatsApp in der Kopfleiste: dieselbe glänzende Kachel wie in der Fußzeile, nur so klein wie die Leiste es braucht */
.hdr-cta{display:none}

/* ---------- Einstieg ---------- */
.hero{position:relative;background:var(--card);border-radius:0 0 32px 32px;padding:calc(82px + env(safe-area-inset-top)) 0 22px;text-align:center;overflow:hidden}   /* knapp gehalten: Der ganze Einstieg samt Google-Note soll am Handy auf den ersten Bildschirm passen */
.hero > .wrap{position:relative;z-index:1}

/* Licht im Hintergrund: drei weiche Flächen in den Farben der Marke, die sich langsam verschieben.
   Darüber ein feines Punktraster, das nach unten ausläuft. Nur Schmuck, liegt hinter dem Inhalt. */
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-bg::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(11,11,13,.12) 1px,transparent 1.3px);background-size:20px 20px;background-position:50% 8px;-webkit-mask-image:radial-gradient(130% 62% at 50% 0%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);mask-image:radial-gradient(130% 62% at 50% 0%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%)}
.hero-bg i{position:absolute;border-radius:50%;will-change:transform}
.hero-bg i:nth-child(1){left:-45vw;top:-190px;width:130vw;height:130vw;background:radial-gradient(closest-side,rgba(44,208,155,.40),rgba(44,208,155,0));animation:glowA 14s ease-in-out infinite alternate}
.hero-bg i:nth-child(2){right:-50vw;top:-150px;width:125vw;height:125vw;background:radial-gradient(closest-side,rgba(168,232,150,.38),rgba(168,232,150,0));animation:glowB 17s ease-in-out infinite alternate}
.hero-bg i:nth-child(3){left:5vw;top:90px;width:90vw;height:90vw;background:radial-gradient(closest-side,rgba(0,179,126,.12),rgba(0,179,126,0));animation:glowC 11s ease-in-out infinite alternate}
@keyframes glowA{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(10%,7%,0) scale(1.16)}}
@keyframes glowB{from{transform:translate3d(4%,2%,0) scale(1.08)}to{transform:translate3d(-12%,9%,0) scale(.94)}}
@keyframes glowC{from{transform:translate3d(-8%,0,0) scale(.9)}to{transform:translate3d(10%,-6%,0) scale(1.15)}}

.hero-title{font-size:clamp(1.9rem,10.3vw,5.9rem);line-height:.98;letter-spacing:-.052em;margin-top:16px}   /* so groß, dass die längere Zeile auf jedem Handy in eine Reihe passt */
.hero-title .ln{display:block;white-space:nowrap}
.hl{color:var(--brand)}   /* die Pointe einer Überschrift steht in der Markenfarbe */
/* Die drei Schritte als Leiste: graue Linie, darüber füllt sich einmal eine Linie in der Markenfarbe,
   und jeder Punkt färbt sich, sobald die Linie bei ihm ankommt. */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:340px;margin:18px auto 0}
.steps::before,.steps::after{content:'';position:absolute;top:5px;left:16.667%;right:16.667%;height:2px;border-radius:2px}
.steps::before{background:rgba(11,11,13,.10)}
.steps::after{background:linear-gradient(90deg,var(--brand-hi),var(--brand));transform-origin:left center;transform:scaleX(0);animation:stepFill 1.4s linear 1.05s forwards}
.steps li{position:relative;z-index:1;display:grid;justify-items:center;gap:9px;font-size:.92rem;font-weight:600;line-height:1.2;color:var(--ink-2)}
.steps i{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(11,11,13,.14);animation:stepDot .45s var(--spring) forwards;animation-delay:calc(1.05s + var(--n) * .7s)}
@keyframes stepFill{to{transform:scaleX(1)}}
@keyframes stepDot{60%{transform:scale(1.35)}to{transform:none;background:var(--brand);box-shadow:0 0 0 3px #fff,0 3px 9px rgba(0,179,126,.55)}}

/* Note bei Google: eine schmale Zeile unter den drei Schritten. Bewusst flach, damit der ganze Einstieg auf den ersten Bildschirm passt. */
.gnote{display:flex;align-items:center;gap:7px;width:fit-content;height:30px;margin:12px auto 0;padding:0 11px 0 9px;border-radius:10px;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs);font-size:.94rem;line-height:1;transition:transform .12s}
.gnote:active{transform:scale(.97)}
.gnote-g{width:15px;height:15px;flex:none}
.gnote .gnote-stars,.gnote .gnote-stars::before{width:75px;height:15px;background-size:15px 15px}   /* dieselben Sterne wie in den Bewertungen, nur kleiner */
.gnote .gnote-stars::before{width:var(--w,100%)}
.gnote b{font-weight:700}

@media (max-width:599px) and (max-height:700px){
  .hero-title{margin-top:12px}
  .steps{margin-top:14px}
  .hero-card{margin-top:12px}
  .entry .brand{height:52px}
}

/* Die Karte mit der ersten Frage */
.hero-card{position:relative;max-width:440px;margin:16px auto 0}
.entry{position:relative;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:16px 14px 14px;box-shadow:var(--sh-l),0 44px 70px -36px rgba(0,179,126,.30);text-align:center}
.entry-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;white-space:nowrap}
.entry-tag{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 8px;border-radius:9px;background:var(--brand-soft);font-size:.82rem;font-weight:700;color:var(--ink)}
.entry-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand)}
.entry-time{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:9px;background:var(--tile);font-size:.82rem;font-weight:600;color:var(--mute)}
.entry-q{font-size:1.56rem;margin-bottom:14px}
.entry-resume{margin:-6px 0 16px;color:var(--mute)}

.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.brand{height:56px;border-radius:14px;background:var(--tile);box-shadow:inset 0 0 0 1px transparent;font-weight:700;font-size:.98rem;color:var(--ink);transition:box-shadow .15s,background-color .15s,transform .12s}
.brand:active{transform:scale(.96)}
.brand.is-on{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
@media (hover:hover){.brand:hover{box-shadow:inset 0 0 0 1px var(--mute-3)}}
.flow .brand{background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs);height:62px;border-radius:16px}
.flow .brand.is-on{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}

/* Die Zusagen unter dem Formular (sieben Stück).
   Grundzustand (ohne JS oder bei „weniger Bewegung“): ruhige Liste.
   Mit JS (.is-rot): ein kleines Feld, in dem immer nur eine Zusage steht. Die nächste rückt weich nach. */
.facts{display:grid;gap:12px;width:fit-content;margin:16px auto 0;text-align:left}
.fact{display:flex;align-items:center;gap:11px;font-size:clamp(.84rem,4.3vw,1rem);font-weight:600;line-height:1.25;color:var(--ink-2)}
.fact .gt{--sz:30px}
.fact .gt > .ic{width:54%;height:54%;stroke-width:2.2}
.facts.is-rot{display:grid;gap:0;justify-content:start;padding:5px;border-radius:15px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-xs);overflow:hidden;transition:width .6s var(--ease)}
.facts.is-rot .fact{grid-area:1 / 1;justify-self:start;padding-right:11px;white-space:nowrap;opacity:0;transform:translateY(12px);filter:blur(6px);transition:opacity .4s ease,transform .6s var(--ease),filter .4s ease}
.facts.is-rot .fact.is-on{opacity:1;transform:none;filter:blur(0);transition-delay:.16s}
.facts.is-rot .fact.is-out{transform:translateY(-12px)}

/* ---------- Abschnitte ---------- */
.sec{padding:72px 0 0}
.head{text-align:center;max-width:700px;margin:0 auto 28px}
.head h2{font-size:clamp(2.1rem,9vw,3.75rem);letter-spacing:-.048em}
.head h2 .ln{display:block}
.head h2 .nw{white-space:nowrap}
.head h2 .h-logo{display:inline-block;height:.68em;width:auto;vertical-align:baseline}   /* das Logo steht wie ein Wort in der Überschrift, unten auf der Schriftlinie. Höhe wie bei .ve-logo im Vergleich: eine Spur niedriger als ein Großbuchstabe (der misst 0,73), weil fette Großbuchstaben neben normalem Text sonst größer wirken */
.head h2.h-fit{font-size:clamp(1.7rem,9vw,3.75rem)}   /* klein genug, damit die erste Zeile auf jedem Handy in eine Reihe passt */
.head h2.h-fit-l{font-size:clamp(1.5rem,8vw,3.75rem)}   /* eine Spur kleiner, damit die lange zweite Zeile („Dann ist dein Auto verkauft.“) auf jedem Handy in eine Reihe passt */
.head p{margin:14px auto 0;color:var(--mute);max-width:34ch}
.head p .ln{display:block}   /* erster Satz allein, der Rest in der nächsten Zeile */
/* Ein Satz, der für sich steht und zum Inhalt darunter überleitet (zum Beispiel „So läuft der Tag der Abholung ab:“) */
.head p.head-lead{margin-top:16px;font-weight:700;color:var(--ink)}   /* schwarz: Das Grün gehört an dieser Stelle der Überschrift darüber */

/* ---------- So läuft's: drei Karten mit kleinen Szenen ---------- */
.bento{display:grid;gap:12px}
.bcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--sh-xs)}
.bcard-body{padding:2px 20px 24px}
.step-no{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--tile);font-size:.8rem;font-weight:700;color:var(--mute);margin-bottom:12px}
.bcard h3{font-size:1.4rem;letter-spacing:-.04em}   /* so passt „Abholen lassen & Geld bekommen“ auf gängigen Handys in eine Zeile */
.bcard-body > p{margin-top:8px;color:var(--mute)}

.illu{position:relative;height:214px;display:grid;place-items:center;overflow:hidden}

/* Szene 1: das Formular im Kleinen */
.ghost{position:absolute;top:50%;width:112px;height:132px;margin-top:-66px;border-radius:14px;background:linear-gradient(180deg,#ECEEF1,#F4F5F7)}
.ghost.g-l{left:-56px}
.ghost.g-r{right:-56px}
.mini{position:relative;width:212px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 16px 30px -16px rgba(15,20,30,.28);text-align:left}
.mini-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:.8rem}
.mini-top b{font-family:var(--head);font-weight:600;letter-spacing:-.02em;font-size:.9rem}
.mini-bar{height:4px;border-radius:4px;background:var(--line-2);overflow:hidden;margin-bottom:10px}
.mini-bar i{display:block;height:100%;width:30%;border-radius:4px;background:var(--brand)}
.mini-opt{display:flex;align-items:center;height:30px;padding:0 10px;margin-top:5px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:.82rem;font-weight:600;color:var(--mute);transition:box-shadow .4s var(--ease) .9s,background-color .4s var(--ease) .9s,color .4s .9s}
.mini-opt i{margin-left:auto;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mute-3);transition:background-color .4s var(--ease) .9s,box-shadow .4s .9s}
.mini-pick,.js .is-in .mini-pick{background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--ink)}
.mini-pick i,.js .is-in .mini-pick i{box-shadow:none;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.js .mini-pick{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--mute)}
.js .mini-pick i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mute-3)}

/* Szene 2: das Angebot mit dem Kilometerzähler */
.ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid var(--line-2);transform:translate(-50%,-50%)}
.ring.r1{width:132px;height:132px}
.ring.r2{width:214px;height:214px}
.ring.r3{width:300px;height:300px}
.offer{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 18px 32px -16px rgba(15,20,30,.30);text-align:left}
.offer::before,.offer::after{content:'';position:absolute;left:14px;right:14px;height:20px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line-2);z-index:-1}
.offer::before{bottom:-9px;opacity:.75}
.offer::after{left:28px;right:28px;bottom:-17px;opacity:.45}
.offer .gt{--sz:42px}
.offer small{display:block;font-size:.76rem;font-weight:600;color:var(--mute-2);margin-bottom:5px}
.offer small em{font-style:normal;margin-left:5px;padding:1px 6px;border-radius:5px;background:var(--tile);color:var(--mute)}

/* Der Kilometerzähler: Ziffern rollen wie bei einem Tacho */
.odo{display:inline-flex;align-items:center;gap:.08em;font:600 1.62rem/1 var(--head);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--ink)}
.odo-w{position:relative;display:block;width:.8em;height:1.34em;border-radius:.26em;background:linear-gradient(180deg,#3D4048,#101114);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 9px -5px rgba(11,11,13,.55)}
.odo-w::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 72%,rgba(0,0,0,.42));pointer-events:none}
.odo-s{display:block;will-change:transform;transition:transform 1.7s cubic-bezier(.18,.82,.22,1)}
.odo-s span{display:block;height:1.34em;line-height:1.34em;text-align:center;color:#fff}
.odo.is-on .odo-s{transform:translateY(calc(var(--n) * -1.34em))}
.odo-dot{align-self:flex-end;line-height:1;margin:0 -.03em .12em}
.odo-unit{margin-left:.22em;font-size:.8em}
.odo-l{font-size:clamp(2.3rem,12.4vw,3.6rem)}

/* Szene 3: Abholung und Zahlung */
.vlines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 34px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.docs{position:relative;width:190px;height:150px}
.doc{position:absolute;top:6px;width:86px;height:106px;border-radius:12px;background:linear-gradient(180deg,#F6F7F9,#EEF0F3);box-shadow:0 0 0 1px var(--line-2),0 12px 22px -14px rgba(15,20,30,.25)}
.doc::before{content:'';position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:7px;background:#E2E5E9}
.doc::after{content:'';position:absolute;left:12px;right:12px;top:48px;height:6px;border-radius:6px;background:#E2E5E9;box-shadow:0 14px 0 #E2E5E9,0 28px 0 #E9EBEE}
.doc.d1{left:6px;transform:rotate(-7deg)}
.doc.d2{right:6px;transform:rotate(7deg)}
.docs .gt{--sz:58px;position:absolute;left:50%;top:44px;margin-left:-29px}
.paid{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 13px 8px 9px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 12px 22px -12px rgba(15,20,30,.28);font-size:.84rem;font-weight:700}
.paid i{width:18px;height:18px;border-radius:6px;background:linear-gradient(180deg,var(--brand-hi),var(--brand));display:grid;place-items:center;color:#fff}
.paid .ic{width:11px;height:11px;stroke-width:3.2}
.js .docs .gt{transform:scale(.4);opacity:0;transition:transform .7s var(--spring) .5s,opacity .3s .5s}
.js .is-in .docs .gt{transform:none;opacity:1}
.js .paid{opacity:0;transform:translate(-50%,10px);transition:opacity .5s var(--ease) .95s,transform .6s var(--ease) .95s}
.js .is-in .paid{opacity:1;transform:translateX(-50%)}

/* ---------- Große weiße Tafel ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:38px 16px 34px;text-align:center;overflow:hidden;box-shadow:var(--sh-xs)}
.panel .head{margin-bottom:0}
.panel .head h2{font-size:clamp(1.8rem,8.4vw,3.75rem)}

/* Karussell im Bogen: Abholung, Vertrag, Zahlung, Schlüssel, Abmeldung */
.arc{position:relative;height:178px;margin:30px -16px 0;--aw:92px;--step:104px;--drop:15px}
.arc-item{
  position:absolute;left:50%;top:8px;width:var(--aw);height:var(--aw);margin-left:calc(var(--aw) / -2);border-radius:22px;background:var(--tile);
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transform:translate(calc(var(--k) * var(--step)),calc(var(--k) * var(--k) * var(--drop))) rotate(calc(var(--k) * 12deg)) scale(var(--sc,1));
  transition:transform .9s var(--ease),opacity .6s var(--ease),background-color .6s;
}
.arc-item .gt{--sz:50px;transition:transform .9s var(--ease)}
.arc-item.is-mid{--sc:1.16;background:#EDEFF2}
.arc-item.is-edge{opacity:.55}
.arc-item.is-jump{transition:none;opacity:0}
.arc-label{min-height:84px;transition:opacity .28s ease,transform .28s ease}
.arc-label.is-out{opacity:0;transform:translateY(6px)}
.arc-label small{display:block;font-size:.8rem;font-weight:700;color:var(--mute-2);margin-bottom:4px}
.arc-label b{display:block;font-family:var(--head);font-weight:600;font-size:1.44rem;letter-spacing:-.035em;line-height:1.1}
.arc-label span{display:block;margin-top:5px;color:var(--mute)}

/* ---------- Kosten: Beleg und Vorteile ---------- */
.kosten{display:grid;gap:12px}
.rcard{display:grid;place-items:center;padding:30px 16px 34px;background:var(--card) radial-gradient(circle at 50% 0,rgba(0,179,126,.07),rgba(0,179,126,0) 62%)}
.receipt-wrap{width:100%;max-width:330px;filter:drop-shadow(0 18px 26px rgba(15,20,30,.14)) drop-shadow(0 2px 3px rgba(15,20,30,.06))}
/* Der Beleg steht von Anfang an fertig da, mit Zacken und Schatten. Kein Effekt, der ihn erst „ausdruckt“:
   Dabei war die Unterkante erst gerade, und auf dem Handy hat es beim Scrollen geruckelt. */
.receipt{
  --z:8px;background:#fff;padding:20px 18px 32px;border-radius:14px 14px 0 0;text-align:left;font-size:.94rem;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2 * var(--z)) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2 * var(--z)) 100%;
}
.rc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1.5px dashed var(--mute-3)}
.rc-brand{display:block;height:14px;width:auto}
.rc-meta{font-size:.74rem;font-weight:700;color:var(--mute);background:var(--tile);border-radius:7px;padding:4px 8px}
.rc-rows{padding:14px 0;display:grid;gap:11px}
.rc-rows li,.rc-total{display:flex;align-items:baseline;gap:8px;font-weight:600;color:var(--ink-2)}
.rc-fill{flex:1;min-width:12px;border-bottom:1.5px dotted var(--mute-3);transform:translateY(-4px)}
.rc-rows b{font-family:var(--head);font-weight:500;font-variant-numeric:tabular-nums;color:var(--mute)}
.rc-total{padding-top:15px;border-top:1.5px dashed var(--mute-3);font-weight:700;color:var(--ink);align-items:center}
.rc-total span:first-child{flex:1}
.rc-total b{font-family:var(--head);font-weight:600;font-size:1.9rem;line-height:1;letter-spacing:-.04em;color:var(--brand)}
.rc-foot{margin-top:15px;font-size:.76rem;font-weight:700;color:var(--mute-2);text-align:center}

/* Vier Zusagen als Kartenstapel: oben ein Bild, darunter Überschrift und Text.
   Auf dem Handy bleibt jede Karte oben stehen und die nächste schiebt sich darüber (position:sticky, ganz ohne JS).
   Nach der letzten Karte läuft die Seite normal weiter. */
.deck{display:grid;grid-auto-rows:1fr;gap:14px}
.dcard{display:flex;flex-direction:column;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:0 -12px 28px -18px rgba(15,20,30,.22),var(--sh-s)}
.dcard-body{padding:16px 10px 12px}
.dcard h3{font-size:1.4rem;letter-spacing:-.04em}   /* gleich wie die Titel der drei Schritte (.bcard h3) */
.dcard p{margin-top:7px;color:var(--mute);font-size:1rem;line-height:1.45}
/* Bildfläche im Format 3:2 mit neutralem Studio-Grund. Die Autos sind freigestellte Bilder (img/karte-….webp). */
.dcard-art{position:relative;container-type:inline-size;height:0;padding-top:66.667%;border-radius:19px;overflow:hidden;background:linear-gradient(160deg,#F9FAFB,#E2E5EA)}
.dcard-art::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 95% at 6% 0%,rgba(255,255,255,.30),rgba(255,255,255,0) 58%)}
.dcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dcard-img.fit-low{transform:scale(.86);transform-origin:50% 97%}   /* etwas kleiner und nach unten, damit oben Platz für das Schild bleibt */
@media (max-width:599px) and (min-height:600px){
  .dcard{position:sticky;top:calc(78px + env(safe-area-inset-top) + var(--n,0) * 10px)}
}

/* Schilder über den Bildern: aus dem Code gezeichnet, damit die Schrift scharf bleibt und auf Deutsch stimmt.
   Alle Maße hängen an der Breite des Bildes (1em = ein Zweiunddreißigstel). */
.scene{position:absolute;inset:0;font-size:10px;font-size:3.125cqw;line-height:1.2;color:var(--ink)}
.s-card{position:absolute;background:#fff;border-radius:1.5em;box-shadow:0 1.6em 2.8em -1.3em rgba(11,11,13,.5),0 .1em .3em rgba(11,11,13,.08);transform:rotate(var(--r,0deg))}
/* Schild oben rechts: kleine Zeile, darunter groß der Wert */
.s-offer{top:7%;right:5%;padding:1em 1.3em 1.05em;text-align:left}
.s-offer small{display:flex;align-items:center;gap:.6em;font-size:1.1em;font-weight:700;color:var(--mute)}
.s-offer small em{font-style:normal;font-size:.86em;padding:.15em .55em;border-radius:.5em;background:var(--tile);color:var(--mute-2)}
.s-offer b{display:block;margin-top:.1em;font:600 2.7em/1.05 var(--head);letter-spacing:-.045em}
.s-offer b.s-tag{display:flex;align-items:center;gap:.3em;font-size:2em;margin-top:.15em}
.s-tag i{flex:none;width:.62em;height:.62em;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.36em no-repeat}
.s-one{padding:.85em 1.1em}
.s-one b.s-tag{font-size:1.6em;margin:0}
/* Karte mit Frage und zwei Knöpfen, mittig oben */
.s-choice{top:6%;left:50%;width:22em;padding:1.15em 1.2em 1.2em;text-align:center;transform:translateX(-50%) rotate(var(--r,0deg))}
.s-choice b{display:block;margin-bottom:.6em;font:600 1.75em/1.1 var(--head);letter-spacing:-.035em}
.s-choice div{display:grid;grid-template-columns:1fr 1fr;gap:.65em}
.s-btn{display:grid;place-items:center;height:3em;border-radius:1em;font-size:1.1em;font-weight:700;color:var(--ink-2);box-shadow:inset 0 0 0 .09em var(--line)}
.s-yes{background:var(--ink);color:#fff;box-shadow:none}

/* ---------- Vergleich ---------- */
/* Vergleich in zwei Bildern.
   1. Das Handy (.vd): Sperrbildschirm eines iPhones. Zustand "privat" zeigt die Flut an Mitteilungen,
      Zustand "pay" drei ruhige Mitteilungen. Der Zustand steht in data-state, .is-play lässt sie nacheinander erscheinen.
      Alle Maße im Handy hängen an seiner Breite (1em = ein Siebenundzwanzigstel).
   2. Die zwei Wege (.ve): oben dreht sich der private Verkauf im Kreis, unten fährt das Auto über drei Punkte ins Ziel. */
.duo{display:grid;gap:44px}   /* Luft unter dem Handy, es steht frei und wirft einen langen Schatten */
.vd{display:grid;justify-items:center;gap:14px}
.vd-switch{display:none;padding:4px;border-radius:15px;background:#E3E6EA}
.js .vd-switch{display:inline-flex}
.vd-switch button{height:40px;padding:0 15px;border-radius:11px;font-weight:700;font-size:.95rem;color:var(--mute);transition:background-color .3s,color .3s,box-shadow .3s}
.vd-switch button.is-on{background:var(--ink);color:#fff;box-shadow:0 6px 14px -6px rgba(11,11,13,.6)}
.vd-switch button[data-vd="pay"].is-on{background:var(--brand);box-shadow:0 6px 14px -6px rgba(0,179,126,.7)}   /* „Mit Paycars“ gewählt: die Taste wird grün, „Privat verkaufen“ bleibt schwarz */
/* Das Handy ist so groß wie möglich, aber nie höher als der freie Platz unter der Leiste oben: Umschalter und Handy sollen
   zusammen ins Bild passen. 146px = Leiste oben (64), Umschalter mit Abstand (62) und Luft oben und unten (8 + 12).
   Die Leiste unten zählt nicht mit, sie macht dem Handy Platz (site.js). Gerechnet wird mit der kleinen Bildschirmhöhe (svh),
   damit es auch mit ausgeklappter Browserleiste passt. .482 = Breite durch Höhe. Unter 216px wird es nicht kleiner, sonst liest man nichts mehr. */
.vd-phone{width:min(74vw,270px);width:min(74vw,270px,max(216px,(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 146px) * .482));container-type:inline-size}
/* dünner Rahmen ohne Tasten, wie bei den flachen Handy-Vorlagen */
.vd-body{position:relative;height:56em;padding:.4em;font-size:10px;font-size:calc(100cqw / 27);border-radius:4.3em;background:#0B0B0D;box-shadow:0 0 0 .1em #4A4D55,0 4em 6em -3em rgba(11,11,13,.6),0 .5em 1.2em rgba(11,11,13,.14)}
.vd-screen{position:relative;height:100%;border-radius:3.9em;overflow:hidden;background:linear-gradient(170deg,#B3BBC6,#808998)}
.vd-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 70% at 30% 0%,#E4F8EF,#AEE9D2 55%,#74D0AF);opacity:0;transition:opacity .7s}
.vd[data-state="pay"] .vd-screen::before{opacity:1}
.vd-island{position:absolute;left:50%;top:1.1em;width:8em;height:2.3em;margin-left:-4em;border-radius:1.2em;background:#060607;z-index:2}
.vd-status{position:absolute;right:2.1em;top:1.65em;width:5.6em;height:1.2em;fill:#fff}
.vd-clock{position:relative;padding-top:7.4em;text-align:center;color:#fff;text-shadow:0 .1em .8em rgba(11,11,13,.16)}
.vd-clock b{display:block;font:600 6.6em/1 var(--head);letter-spacing:-.04em}
.vd-list{position:absolute;left:.9em;right:.9em;top:15.8em;display:grid;gap:.5em}
.vd-n{display:grid;grid-template-columns:2.35em minmax(0,1fr) auto;gap:.7em;align-items:center;padding:.68em .85em .68em .7em;border-radius:1.4em;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 .5em 1.2em -.7em rgba(11,11,13,.4);font-size:1.18em;line-height:1.25;color:var(--ink);text-align:left}
.vd-n b{display:block;font-weight:700}
.vd-n div span{display:block;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-n time{align-self:start;font-size:.84em;color:var(--mute)}
.vd-app{display:grid;place-items:center;width:2.35em;height:2.35em;border-radius:.7em;background:linear-gradient(180deg,#A7AFBA,#7C8591);color:#fff}
.vd-app .ic{width:1.3em;height:1.3em;stroke-width:2.2}
.vd-logo{display:grid;place-items:center;width:2.35em;height:2.35em;border-radius:.7em;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}   /* Profilbild: weißer Grund, das echte Logo */
.vd-logo img{width:84%;height:auto}
.vd-more{justify-self:center;margin-top:.2em;padding:.45em 1.1em;border-radius:9em;background:rgba(255,255,255,.5);font-size:1.08em;font-weight:700;color:var(--ink-2)}
.vd-pay .vd-n{padding:1em .9em 1em .8em;font-size:1.26em;background:rgba(255,255,255,.92)}
.vd-pay .vd-n div span{white-space:normal}
.vd-tool{position:absolute;bottom:3.3em;display:grid;place-items:center;width:4em;height:4em;border-radius:50%;background:rgba(11,11,13,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff}
.vd-tool .ic{width:1.9em;height:1.9em;stroke-width:1.9}
.vd-tool-l{left:3em}
.vd-tool-r{right:3em}
.vd-home{position:absolute;left:50%;bottom:.8em;width:9.6em;height:.42em;margin-left:-4.8em;border-radius:.4em;background:rgba(255,255,255,.92)}
.vd[data-state="privat"] .vd-pay,.vd[data-state="pay"] .vd-privat{display:none}
.vd.is-wait .vd-list > *,.vd.is-play .vd-list > *{opacity:0;transform:translateY(-1.2em) scale(.96)}   /* is-wait: noch nichts zu sehen, bis das Handy ins Bild kommt */
.vd.is-play[data-state="privat"] .vd-privat > *{animation:vdIn .42s var(--spring) forwards;animation-delay:calc(var(--i) * .3s + .25s)}
.vd.is-play[data-state="pay"] .vd-pay > *{animation:vdIn .6s var(--ease) forwards;animation-delay:calc(var(--i) * .75s + .45s)}
@keyframes vdIn{to{opacity:1;transform:none}}

.ve{background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh-xs);overflow:hidden}
.ve-lane{padding:20px 18px}
.ve-lane + .ve-lane{border-top:1px solid var(--line-2)}
.ve-old{background:#F3F4F6}
.ve-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
.ve-top b{font-family:var(--head);font-weight:600;font-size:1.2rem;letter-spacing:-.03em}
.ve-logo{display:inline-block;height:.68em;width:auto;vertical-align:baseline;margin-left:.08em}   /* das Logo steht wie ein Wort in der Zeile, unten auf der Schriftlinie. Eine Spur niedriger als ein Großbuchstabe (der misst 0,73), dieselbe Regel wie .h-logo in der Überschrift */
.ve-old .ve-top b{color:var(--mute)}
.ve-chip{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:10px;font-size:.84rem;font-weight:700;white-space:nowrap;transition:background-color .3s,color .3s}
.ve-old .ve-chip{background:#E1E4E9;color:var(--mute)}
.ve-new .ve-chip{background:var(--brand-soft);color:var(--ink)}
.ve-new .ve-chip.is-done{background:var(--brand);color:#fff}
.ve-track{position:relative;height:74px;margin:6px 6px 0}
.ve-line{position:absolute;left:0;right:0;bottom:16px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,#C9CED6 0 6px,transparent 6px 12px)}
.ve-new .ve-line{background:rgba(11,11,13,.1)}
.ve-fill{position:absolute;left:0;bottom:16px;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--brand-hi),var(--brand));transition:width 1.6s var(--ease)}
.ve-track i{position:absolute;bottom:11px;left:calc(var(--k) / (var(--n) - 1) * 100%);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #C9CED6}
.ve-new .ve-track i{box-shadow:0 0 0 2px rgba(11,11,13,.14);transition:background-color .3s,box-shadow .3s}
.ve-new .ve-track i.is-on{background:var(--brand);box-shadow:0 0 0 3px #fff,0 3px 9px rgba(0,179,126,.55)}
.ve-mark{position:absolute;bottom:27px;left:0;display:grid;place-items:center;width:34px;height:28px;margin-left:-17px;border-radius:9px;background:#fff;color:var(--mute);box-shadow:0 0 0 1px var(--line),0 5px 10px -5px rgba(11,11,13,.3);transition:left 1s var(--ease)}
.ve-mark .ic{width:18px;height:18px}
/* Das Auto steht am Anfang mit dem Heck am ersten Punkt und am Ende mit der Front am letzten Punkt, so bleibt es immer in der Karte.
   Das Bild ist dasselbe wie in der vierten Karte bei den Kosten, hier ausgeschnitten und gespiegelt, damit es nach rechts fährt. */
.ve-car{--p:0;position:absolute;bottom:17px;left:calc(var(--p) * 100%);width:104px;aspect-ratio:936/356;overflow:hidden;transform:translateX(calc(var(--p) * -100%));transition:left 1.6s var(--ease),transform 1.6s var(--ease),opacity .3s}
.ve-car img{display:block;width:109.4%;max-width:none;height:auto;margin:-26.7% 0 0 -4.7%;transform:scaleX(-1)}
.ve-lane small{display:block;margin-top:12px;font-size:.92rem;line-height:1.4;color:var(--mute)}
.ve-new small{color:var(--ink-2);font-weight:600}
.ve.is-reset *{transition:none!important}

/* ---------- Fragen ---------- */
.faq{display:grid;gap:8px;max-width:760px;margin:0 auto}
.fq{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-xs);transition:box-shadow .3s}
.fq h3{font:inherit;letter-spacing:0}
.fq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:16px 14px 16px 18px;text-align:left;font-family:var(--head);font-weight:600;font-size:1.1rem;letter-spacing:-.025em;line-height:1.25;color:var(--ink)}
.fq-ic{width:32px;height:32px;border-radius:10px;background:var(--tile);display:grid;place-items:center;flex:none;color:var(--ink);transition:transform .4s var(--ease),background .25s,color .25s,box-shadow .25s}
.fq-ic .ic{width:15px;height:15px;stroke-width:2.6}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.fq-a > div{overflow:hidden}
.fq-a p{padding:0 18px 18px;color:var(--mute)}
/* Antwort mit zwei Feldern nebeneinander, zum Beispiel die Unterlagen je Land */
.fq-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;padding:0 18px 18px}   /* auf sehr schmalen Handys untereinander */
.fq-box{padding:12px 12px 13px;border-radius:13px;background:var(--tile)}
.fq-box h4{font-family:var(--body);font-weight:700;font-size:1rem;letter-spacing:0;line-height:1.3;color:var(--ink);margin-bottom:4px}
.fq-box li{color:var(--mute);line-height:1.45}
.fq.is-open{box-shadow:var(--sh-s)}
.fq.is-open .fq-a{grid-template-rows:1fr}
.fq.is-open .fq-ic{transform:rotate(45deg);background:linear-gradient(180deg,var(--brand-hi),var(--brand-lo));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 10px -6px rgba(0,179,126,.7)}
/* Hinweis unter der letzten Frage */
.faq-more{margin:24px auto 0;text-align:center;color:var(--mute)}
.faq-more .ln{display:block}

/* ---------- Abschluss: die Karte mit dem Angebot ---------- */
.fin{padding:72px 0 0}
.fin-card{width:min(100%,400px);margin:30px auto 0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px 18px 18px;box-shadow:var(--sh-m);text-align:center}
.fin-card .gt{--sz:52px;margin:0 auto 12px}
.fin-title{display:block;font-family:var(--head);font-weight:600;font-size:1.4rem;letter-spacing:-.035em;line-height:1.1}
.fin-sub{display:block;margin-top:3px;color:var(--mute);font-size:.98rem}
.fin-odo{display:flex;justify-content:center;margin:18px 0 16px}
/* Die Ziffern stehen genau in der Mitte der Karte, unter Icon und Überschrift. Das Euro-Zeichen hängt rechts daneben
   und zählt beim Zentrieren nicht mit: Links steht dafür ein unsichtbares Gegenstück in derselben Breite. */
.fin-odo .odo::before{content:attr(data-unit);visibility:hidden;margin-right:.22em;font-size:.8em}
.fin-card p{color:var(--mute);margin-bottom:18px;font-size:1rem;line-height:1.45}

/* ---------- Bewertungen: ein Stapel Karten ----------
   Ohne JavaScript stehen die Karten untereinander. Mit JavaScript liegen sie alle auf demselben Platz:
   --p sagt, wie weit hinten eine Karte liegt (0 vorn, 1 und 2 schauen oben hervor, der Rest ist unsichtbar).
   Der Stapel ist so hoch wie seine längste Bewertung, darum springt beim Blättern nichts. */
.rv{max-width:540px;margin:0 auto}
.rv-stack{display:grid;gap:10px}
.rv-card{display:flex;flex-direction:column;gap:16px;padding:20px 20px 18px;background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh-m)}
.rv-top{display:flex;align-items:center;justify-content:space-between}
/* Sterne: unten fünf graue, darüber so viele gelbe, wie --w sagt (5 Sterne = 100%, 4 Sterne = 80%, 4,5 = 90%) */
.rv-stars,.gnote-stars{position:relative;display:block;flex:none;width:105px;height:21px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DDE1E6' d='M12 2.6l2.84 5.96 6.56.86-4.8 4.56 1.2 6.5L12 17.33 6.2 20.48l1.2-6.5-4.8-4.56 6.56-.86z'/%3E%3C/svg%3E") 0 50% / 21px 21px repeat-x}
.rv-stars::before,.gnote-stars::before{content:'';position:absolute;inset:0;width:var(--w,100%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FBB40C' d='M12 2.6l2.84 5.96 6.56.86-4.8 4.56 1.2 6.5L12 17.33 6.2 20.48l1.2-6.5-4.8-4.56 6.56-.86z'/%3E%3C/svg%3E") 0 50% / 21px 21px repeat-x}
.rv-g{width:22px;height:22px;flex:none}
/* Der Text einer Bewertung steht ruhig: mittlere Stärke statt fett und eine Stufe kleiner als eine Überschrift (Husseins Urteil zur ersten Fassung: „extrem dick und groß“) */
.rv-text{flex:1;display:flex;align-items:center;font-family:var(--head);font-weight:500;font-size:clamp(1.08rem,4.7vw,1.22rem);line-height:1.34;letter-spacing:-.018em;text-wrap:pretty}
.rv-text.rv-kurz{font-size:clamp(1.24rem,5.7vw,1.46rem);line-height:1.24;letter-spacing:-.026em}   /* kurze Sätze stehen etwas größer, damit die Karte nicht leer wirkt */
.rv-text.rv-lang{font-size:clamp(.98rem,4.2vw,1.08rem);line-height:1.4;letter-spacing:-.012em}   /* lange Bewertungen stehen kleiner, damit der Stapel nicht zu hoch wird */
.rv-text.rv-sehrlang{font-family:var(--body);font-weight:500;font-size:.98rem;line-height:1.46;letter-spacing:0}
.rv-who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line-2)}
.rv-who .gt{--sz:42px;font:600 1.16rem/1 var(--head)}
.rv-who p{display:grid;gap:1px;line-height:1.25}
.rv-who b{font-weight:700}
.rv-who p span{font-size:.9rem;color:var(--mute)}
.rv-nav{display:none}

.js .rv-stack{gap:0;padding-top:24px;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
.js .rv-card{
  grid-area:1 / 1;min-height:286px;transform-origin:50% 0;z-index:calc(10 - var(--p,0));user-select:none;-webkit-user-select:none;
  transform:translateY(calc(var(--p,0) * -12px)) scale(calc(1 - var(--p,0) * .06));
  transition:transform .65s var(--ease),opacity .4s ease,box-shadow .5s ease;will-change:transform;
}
.js .rv-card:not(.is-front){box-shadow:var(--sh-xs)}
.js .rv-card.is-back{opacity:0;pointer-events:none}
.js .rv-card.is-out{transform:translateX(-64%) rotate(-5deg);opacity:0;z-index:11;transition:transform .5s cubic-bezier(.4,0,.6,1),opacity .34s ease}   /* die vordere Karte gleitet nach links weg, die nächste rückt nach */
.js .rv-card.is-jump{transition:none}
.js .rv-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px}   /* nur die zwei Pfeile: Wie viele Bewertungen es sind, soll man nicht sehen */
.rv-btn{width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs);display:grid;place-items:center;transition:transform .12s}
.rv-btn:active{transform:scale(.93)}
.rv-btn .ic{width:18px;height:18px;stroke-width:2.2}

/* ---------- Fußzeile mit dem großen Schriftzug ---------- */
.ftr{padding:72px 0 calc(96px + env(safe-area-inset-bottom))}
.ftr-panel{position:relative;container-type:inline-size;background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--sh-xs)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:30px 22px 6px}
.ftr-tag{font-family:var(--head);font-weight:600;font-size:1.22rem;letter-spacing:-.03em;line-height:1.2;text-wrap:balance}
.ftr-tag .ln{display:block}
.ftr-cols{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:26px 16px}   /* rechts so breit wie „Cookie-Einstellungen“, damit das Wort nicht umbricht */
.ftr-cols > :last-child{grid-column:1 / -1}   /* Kontakt: eigene Zeile über die ganze Breite */
.ftr-col{display:grid;gap:9px;align-content:start}
.ftr-col h4{font-family:var(--body);font-weight:700;font-size:1rem;letter-spacing:0;color:var(--ink);margin-bottom:2px}
.ftr-col a:not(.sq){color:var(--mute);width:fit-content}
.ftr-icons{display:flex;gap:11px}
/* Kontakt in der Fußzeile: dieselben glänzenden Kacheln wie auf der ganzen Seite (WhatsApp grün, Anrufen blau, E-Mail schwarz), weißes Icon */
.sq{--sz:48px;transition:transform .15s,filter .2s}
.sq:active{transform:scale(.94)}
.ftr-word{width:92%;margin:34px auto 5.5cqw;user-select:none}   /* unten so viel Platz, dass der Strich vom p nicht an die runde Ecke stößt */
.ftr-word img{display:block;width:100%;height:auto}
.ftr-base{margin-top:16px;text-align:center;font-size:.9rem;color:var(--mute-2)}
@media (hover:hover){.ftr-col a:hover,.nav a:hover{color:var(--ink)}.sq:hover{filter:brightness(1.07)}}

/* ---------- Feste Leiste unten (nur Handy) ---------- */
.dock{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;gap:8px;padding:7px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line);border-radius:21px;box-shadow:var(--sh-l);transform:translateY(160%);transition:transform .5s var(--ease);
}
.dock.is-on{transform:none}
.dock-cta{flex:1;height:52px}

/* ==========================================================
   Das Formular (Vollbild-Ablauf)
   ========================================================== */
.flow-open,.flow-open body{overflow:hidden}
/* Ist das Formular ganz geöffnet, wird die Seite dahinter unsichtbar. Am iPhone deckt eine feste Ebene nicht immer alles ab:
   Bei offener Tastatur blieb über der Tastatur ein Streifen frei, und dort war ein Stück der Seite zu sehen (Husseins Bildschirmfoto vom 07.10.2026).
   Jetzt liegt dort nur noch der leere Grund, in derselben Farbe wie das Formular. */
.flow-dicht #page{visibility:hidden}
.flow{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--bg);
  opacity:0;visibility:hidden;transform:translateY(20px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s linear .28s;
}
.flow.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease-out,transform .5s cubic-bezier(.16,1,.3,1)}   /* erst deckt das Formular die Seite ruhig zu, dann kommt der Inhalt (siehe .is-opening) */
.flow-top{display:flex;align-items:center;gap:12px;margin:calc(10px + env(safe-area-inset-top)) 12px 0;height:54px;padding:0 8px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--sh-s)}
.flow-btn{width:38px;height:38px;border-radius:11px;background:var(--tile);display:grid;place-items:center;flex:none;transition:transform .12s}
.flow-btn:active{transform:scale(.92)}
.flow-btn .ic{width:18px;height:18px;stroke-width:2.2}
.flow-bar{flex:1;height:6px;border-radius:6px;background:var(--line-2);overflow:hidden}
.flow-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--brand-hi),var(--brand-lo));transition:width .55s var(--ease)}
.flow-body{flex:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:22px 20px calc(36px + env(safe-area-inset-bottom))}
.flow-col{position:relative;max-width:520px;margin:0 auto}

/* Wechsel zwischen den Schritten: ein ruhiger Wisch. Der alte Schritt gleitet zur Seite hinaus (.is-leaving),
   der neue kommt von der anderen Seite herein. Zurück läuft es spiegelverkehrt (.is-back).
   Nur Verschieben und Ein- und Ausblenden, keine Unschärfe: Das bleibt auch auf dem Handy flüssig. */
.step{display:none}
.step.is-active{display:block;animation:stepIn .44s cubic-bezier(.16,1,.3,1) .14s both}   /* wartet, bis der alte Schritt fast weg ist: kein Übereinander */
.step.is-active.is-back{animation-name:stepInBack}
.step.is-active.is-still{animation:none}
.step.is-active.is-opening{animation:stepRise .5s cubic-bezier(.16,1,.3,1) .24s both}   /* beim Öffnen: kein Wisch, der Schritt steigt sanft auf, sobald die Seite verdeckt ist (keine zwei Überschriften übereinander) */
@keyframes stepRise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.step.is-leaving{display:block;position:absolute;left:0;right:0;top:0;pointer-events:none;animation:stepOut .2s cubic-bezier(.4,0,1,1) both}
.step.is-leaving.is-back{animation-name:stepOutBack}
@keyframes stepIn{from{opacity:0;transform:translate3d(52px,0,0)}to{opacity:1;transform:none}}
@keyframes stepInBack{from{opacity:0;transform:translate3d(-52px,0,0)}to{opacity:1;transform:none}}
@keyframes stepOut{75%{opacity:0}to{opacity:0;transform:translate3d(-40px,0,0)}}
@keyframes stepOutBack{75%{opacity:0}to{opacity:0;transform:translate3d(40px,0,0)}}

.q{font-size:clamp(1.9rem,8.4vw,2.5rem);letter-spacing:-.045em;line-height:1.05;margin-bottom:20px}
.q:has(+ .q-sub){margin-bottom:8px}
.q-sub{margin-bottom:20px;color:var(--mute)}
.hint{margin-top:10px;font-size:.92rem;color:var(--mute-2)}
.step-next{margin-top:18px}

/* Felder */
.field{position:relative}
.input,.select,.textarea{
  display:block;width:100%;height:58px;padding:0 16px;font-family:var(--body);font-size:1.0625rem;font-weight:600;color:var(--ink);
  background-color:#fff;border:1px solid var(--line);border-radius:15px;outline:none;box-shadow:var(--sh-xs);
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s;
}
.input::placeholder,.textarea::placeholder{color:var(--mute-3);font-weight:500}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,179,126,.15)}
.select{
  font-weight:700;padding-right:46px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px;
}
.entry .select{background-color:var(--tile);border-color:transparent;box-shadow:none}
.textarea{height:auto;min-height:132px;padding:14px 16px;line-height:1.45;resize:vertical;font-weight:500}
.input-wrap{position:relative}
.input-wrap .input{padding-right:64px}
.input-xl{height:70px;font-family:var(--head);font-size:1.9rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.input-xl::placeholder{font-weight:600}
.unit{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--mute-2);pointer-events:none}
.is-err{border-color:var(--err)!important}
.err{margin-top:8px;font-size:.94rem;font-weight:700;color:var(--err)}
.counter{margin-top:6px;text-align:right;font-size:.8rem;font-weight:600;color:var(--mute-2)}

/* Auswahl-Zeilen */
.opts{display:grid;gap:8px}
.opt{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.opt input,.tile input,.check input{position:absolute;opacity:0;pointer-events:none}
.opt-box{
  display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px 10px 12px;background:#fff;
  border-radius:17px;box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs);font-weight:700;font-size:1.06rem;
  transition:box-shadow .18s,background-color .18s,transform .12s;
}
.opt:active .opt-box{transform:scale(.985)}
/* Die Icons im Formular sind kleine gerenderte Bilder (img/formular). Sie stehen frei auf der weißen Karte. */
.opt-ic{width:44px;height:44px;display:grid;place-items:center;flex:none}
.opt-ic img,.tile-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(11,11,13,.16))}
.opt-ck{position:relative;margin-left:auto;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mute-3);flex:none;transition:background-color .15s,box-shadow .15s}
.opt input:checked + .opt-box{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.opt input:checked + .opt-box .opt-ck,
.tile input:checked + .tile-box .tile-ck,
.mycar-ck{
  box-shadow:none;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.opt input:focus-visible + .opt-box,.tile input:focus-visible + .tile-box{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){.opt:hover .opt-box,.tile:hover .tile-box{box-shadow:inset 0 0 0 1px var(--mute-3),var(--sh-xs)}}

/* Auswahl-Kacheln */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tile-box{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:86px;padding:9px 10px;line-height:1.2;
  background:#fff;border-radius:19px;box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs);font-weight:700;font-size:1rem;text-align:center;
  transition:box-shadow .18s,background-color .18s,transform .12s;
}
.tile:active .tile-box{transform:scale(.975)}
.tile-img{width:42px;height:42px}
/* Fahrzeugart: echte Seitenansichten, alle gleich breit und auf derselben Bodenlinie */
.tile-car{width:108px;height:auto;filter:drop-shadow(0 5px 4px rgba(11,11,13,.2))}
.tile input:checked + .tile-box{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.tile-ck{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mute-3)}
.tile-wide{grid-column:1 / -1}
.tile-wide .tile-box{flex-direction:row;gap:12px;min-height:64px}
.tile-wide .tile-car{width:84px}
.tile-big{font:600 1.9rem/1 var(--head);letter-spacing:-.05em}
.tile-yn{min-height:92px;font-family:var(--head);font-weight:600;font-size:1.4rem;letter-spacing:-.03em}

/* Jahr und Sitzplätze wählen: große Zahl, Regler, darunter die beiden Enden */
.dial{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}
.dial-btn{width:56px;height:56px;border-radius:17px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs);display:grid;place-items:center;flex:none;transition:transform .12s}
.dial-btn:active{transform:scale(.93)}
.dial-btn .ic{stroke-width:2.5}
.dial-val{flex:1;text-align:center;font-family:var(--head);font-weight:600;font-size:3.8rem;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.dial-val small{display:block;margin-top:6px;font:700 .98rem/1 var(--body);letter-spacing:0;color:var(--mute)}
.range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:40px;background:transparent;cursor:pointer}
.range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,var(--brand) var(--p,50%),#E4E7EA var(--p,50%))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px rgba(15,20,30,.22),inset 0 0 0 6px #fff,inset 0 0 0 20px var(--brand)}
.range::-moz-range-track{height:8px;border-radius:8px;background:#E4E7EA}
.range::-moz-range-progress{height:8px;border-radius:8px;background:var(--brand)}
.range::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px rgba(15,20,30,.22)}
.range-ends{display:flex;justify-content:space-between;font-size:.86rem;font-weight:600;color:var(--mute-2)}

/* PS oder kW */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:#E6E9EC;margin-bottom:12px}
.seg-btn{height:46px;border-radius:12px;font-weight:700;color:var(--mute);transition:background-color .2s,color .2s,box-shadow .2s}
.seg-btn.is-on{background:#fff;color:var(--ink);box-shadow:var(--sh-s)}

/* TÜV bis */
.pair{display:grid;grid-template-columns:1.25fr 1fr;gap:8px}

/* Fotos */
.upload{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:176px;padding:22px;
  border:1.5px dashed var(--mute-3);border-radius:22px;background:#fff;text-align:center;transition:border-color .15s,background-color .15s;
}
.upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.upload .gt{--sz:52px;margin-bottom:8px}
.upload b{font-family:var(--head);font-weight:600;font-size:1.18rem;letter-spacing:-.03em}
.upload > span:not(.gt){font-size:.94rem;color:var(--mute-2)}
.upload:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover){.upload:hover{border-color:var(--brand);background:var(--brand-soft)}}
.count{margin-top:16px;font-size:.94rem;font-weight:700;color:var(--mute);text-align:center}
.count:empty{display:none}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.thumb{position:relative;aspect-ratio:1;border-radius:15px;overflow:hidden;background:#E6E9EC;box-shadow:0 0 0 3px #fff,var(--sh-s);animation:popIn .3s var(--ease) both}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(11,11,13,.74);color:#fff;display:grid;place-items:center}
.thumb .ic{width:14px;height:14px;stroke-width:2.6}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* Kontakt */
/* Letzter Schritt: das eigene Auto als Karte über den Kontaktfeldern (füllt form.js) */
.mycar{display:flex;align-items:center;gap:12px;min-height:72px;margin-bottom:16px;padding:8px 14px 8px 10px;background:#fff;border-radius:19px;box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs)}
.mycar-img{width:92px;height:auto;flex:none;filter:drop-shadow(0 5px 4px rgba(11,11,13,.2))}
.mycar-txt{flex:1;min-width:0;display:grid;gap:3px}
.mycar-txt b{font-family:var(--head);font-weight:600;font-size:1.22rem;letter-spacing:-.03em;line-height:1.12}
.mycar-txt b span{display:inline-block;white-space:nowrap}   /* jedes Wort bleibt ganz, umgebrochen wird nur dazwischen */
.mycar-info{font-size:.98rem;line-height:1.25;font-weight:600;color:var(--ink-2)}   /* die Variante, zum Beispiel „AMG Line“. Fehlt sie, steht der Name allein und mittig */
.mycar-ck{flex:none;width:22px;height:22px;border-radius:50%}
.fields{display:grid;gap:14px;margin-bottom:18px}
/* Mit der Auto-Karte ist der letzte Schritt höher als ein Handy-Bildschirm. Damit der Knopf zum Absenden ohne Scrollen
   zu sehen bleibt, steht dieser eine Schritt auf niedrigen Bildschirmen etwas enger: Felder eine Spur flacher, Abstände kleiner. */
@media (max-height:800px){
  .step-end .q-sub{margin-bottom:11px}
  .step-end .mycar{min-height:62px;margin-bottom:11px;padding:6px 14px 6px 10px}
  .step-end .mycar-img{width:84px}
  .step-end .fields{gap:8px;margin-bottom:12px}
  .step-end .lbl{margin-bottom:4px;line-height:1.25}
  .step-end .input,.step-end .select{height:52px}
}
/* Reicht das nicht (kleineres Handy oder lange Angaben in der Karte), setzt form.js am Schritt .is-dense: noch eine Stufe enger */
.step-end.is-dense .q-sub{margin-bottom:8px;line-height:1.4}
.step-end.is-dense .mycar{min-height:58px;margin-bottom:8px}
.step-end.is-dense .fields{gap:6px;margin-bottom:10px}
.step-end.is-dense .lbl{margin-bottom:3px;line-height:1.25}
.step-end.is-dense .input,.step-end.is-dense .select{height:48px}
.flow-body:has(.step-end.is-dense.is-active){padding-top:14px}
.lbl{display:block;font-size:.92rem;font-weight:700;margin-bottom:6px;color:var(--ink-2)}
.tel{display:grid;grid-template-columns:124px minmax(0,1fr);gap:8px}
.tel .select{padding-left:12px;padding-right:34px;background-position:right 12px center}
.check{position:relative;display:flex;align-items:flex-start;gap:12px;font-size:1rem;line-height:1.4;color:var(--mute);cursor:pointer}
.check-box{width:26px;height:26px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--mute-3);flex:none;transition:background-color .15s,box-shadow .15s}
.check input:checked + .check-box{
  box-shadow:none;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
}
.check input:focus-visible + .check-box{outline:2px solid var(--ink);outline-offset:2px}
.check.is-err .check-box{box-shadow:inset 0 0 0 1.5px var(--err)}
.check > span:last-child{padding-top:2px}
.check a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}   /* Falle für Roboter, für Menschen nicht zu sehen und nicht zu erreichen */
.send-err{margin-bottom:12px;padding:13px 15px;border-radius:14px;background:#FDECEA;color:#8F1D15;font-size:.98rem;font-weight:700}

/* ==========================================================
   Unterseiten (Danke, Impressum, Datenschutz)
   ========================================================== */
.sub{padding:calc(98px + env(safe-area-inset-top)) 0 0;min-height:70svh}
.thanks{max-width:560px;margin:0 auto}
.thanks-card{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px 22px 26px;box-shadow:var(--sh-m);text-align:center}
.thanks-card > .gt{--sz:76px;margin:0 auto 22px}
.thanks-card > .gt svg{position:relative;z-index:1;width:46%;height:46%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:tick .6s var(--ease) .5s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.thanks-card h1{font-size:clamp(2.2rem,9.6vw,3.1rem);letter-spacing:-.05em}
.thanks-card > p{margin-top:12px;color:var(--mute)}
/* Umfrage unter dem Dank: dieselben Auswahl-Zeilen wie im Formular */
.poll{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px 14px 16px;box-shadow:var(--sh-s)}
.poll h2{font-size:1.44rem;letter-spacing:-.035em;line-height:1.12;text-align:center;margin:0 8px 18px}
.poll .opt-box{background:var(--tile);box-shadow:none}
.poll .opt-ic svg{width:30px;height:30px}
.poll .opts.is-done{pointer-events:none}
.poll .opts.is-done .opt:not(:has(input:checked)){opacity:.4}
.poll-thanks{margin:16px 0 6px;text-align:center;font-weight:700}
.back-home{display:block;width:fit-content;margin:22px auto 0;font-weight:600;color:var(--mute);text-decoration:underline;text-decoration-color:var(--mute-3);text-underline-offset:4px}
.sub + .ftr{padding-top:40px;padding-bottom:40px}
.ftr-mini{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;font-size:.94rem;color:var(--mute-2)}
.ftr-mini a{white-space:nowrap}

.legal{max-width:720px}
.legal h1{font-size:clamp(2.4rem,10.4vw,3.9rem);letter-spacing:-.05em}
.legal h2{font-size:1.44rem;letter-spacing:-.035em;margin-top:34px}
.legal h3{font-size:1.14rem;letter-spacing:-.02em;line-height:1.2;margin-top:24px}
.legal p{margin-top:10px;color:var(--mute)}
.legal ul{margin-top:10px;padding-left:1.25em;list-style:disc;color:var(--mute)}
.legal li{margin-top:6px}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mute-3);text-underline-offset:3px;overflow-wrap:anywhere}
.legal strong{color:var(--ink)}
.ph{margin-top:22px;padding:16px 18px;border-radius:18px;border:1.5px dashed var(--brand-line);background:var(--brand-soft);color:var(--ink);font-weight:600;font-size:1rem}
.ph-inline{background:var(--brand-soft);color:var(--ink);border-radius:6px;padding:1px 6px;font-weight:600}

/* ==========================================================
   Cookie-Hinweis (CookieYes)
   Das Fenster selbst kommt von CookieYes. Hier bekommt es Schrift, Farben und Rundungen der Seite.
   Überall steht !important, weil CookieYes seine eigenen Angaben direkt an die Elemente schreibt.
   ========================================================== */
.cky-consent-container,.cky-consent-container *,.cky-modal,.cky-modal *{font-family:var(--body)!important;letter-spacing:0!important}
.cky-consent-bar{background:#fff!important;border:1px solid var(--line)!important;border-bottom:0!important;border-radius:26px 26px 0 0!important;box-shadow:0 -22px 50px -24px rgba(15,20,30,.3)!important;padding:22px 18px calc(18px + env(safe-area-inset-bottom))!important}
.cky-title,.cky-preference-title{font-family:var(--head)!important;font-weight:600!important;letter-spacing:-.035em!important;color:var(--ink)!important;font-size:1.3rem!important;line-height:1.15!important}
.cky-notice-des,.cky-notice-des p,.cky-preference-content-wrapper,.cky-preference-content-wrapper p{color:var(--mute)!important;font-size:.96rem!important;font-weight:500!important;line-height:1.45!important}
.cky-notice-des a,.cky-preference-content-wrapper a,.cky-show-desc-btn{color:var(--ink)!important;text-decoration:underline!important}
.cky-always-active{color:var(--brand)!important}
/* Alle Knöpfe gleich groß: Ablehnen ist genauso leicht wie Annehmen */
.cky-btn{border-radius:14px!important;font-weight:700!important;font-size:1rem!important;line-height:1!important;padding:15px 18px!important;margin:0!important;transition:transform .15s,filter .2s!important}
.cky-btn:active{transform:scale(.98)}
.cky-btn-accept,.cky-btn-preferences,.cky-consent-container .cky-btn-preferences,button.cky-btn-preferences,.cky-footer-shadow .cky-btn-accept{
  background:linear-gradient(180deg,#17C28D 0%,var(--brand) 60%,var(--brand-lo) 100%)!important;color:#fff!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 18px -10px rgba(0,179,126,.65)!important;
}
.cky-btn-reject,.cky-btn-customize{background:#fff!important;color:var(--ink)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs)!important;text-decoration:none!important}
.cky-preference-center{border-radius:26px!important;overflow:hidden!important}
.cky-switch input:checked + .cky-slider{background:var(--brand)!important}
/* Reihenfolge und Anordnung der Knöpfe, wie bisher */
.cky-notice-btn-wrapper{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.cky-consent-container .cky-footer-shadow .cky-prefcenter-btn-wrapper,.cky-prefcenter-btn-wrapper{display:flex!important;gap:8px!important;flex-wrap:nowrap!important;flex-direction:row!important}
.cky-consent-container .cky-footer-shadow .cky-prefcenter-btn-wrapper button,.cky-prefcenter-btn-wrapper button{flex:1!important;width:auto!important}
.cky-consent-container .cky-btn.cky-btn-accept,.cky-prefcenter-btn-wrapper .cky-btn-accept{order:-10!important}
.cky-consent-container .cky-btn.cky-btn-preferences,.cky-prefcenter-btn-wrapper .cky-btn-preferences{order:0!important}
.cky-consent-container .cky-btn.cky-btn-reject,.cky-prefcenter-btn-wrapper .cky-btn-reject{order:10!important}
.cky-btn-revisit{display:none!important}   /* kein schwebendes Zeichen: der Link „Cookie-Einstellungen“ steht in der Fußzeile */
.cky-banner-element{cursor:pointer}
@media (max-width:768px){
  .cky-notice-btn-wrapper{flex-direction:column!important}
  .cky-btn-accept,.cky-btn-reject,.cky-btn-customize{width:100%!important;text-align:center!important}
}

/* ==========================================================
   Bewegung
   ========================================================== */
/* Überschriften werden Wort für Wort aus der Unschärfe scharf */
/* Polster rundum und derselbe Betrag als negativer Außenabstand: Der Kasten jedes Wortes wird größer, ohne dass sich etwas verschiebt.
   Bei engem Buchstabenabstand ragt der letzte Buchstabe ein bis zwei Pixel über den Kasten hinaus. Safari schneidet beim Scharfstellen alles ab,
   was über den Kasten ragt. Aufgefallen ist das am Fragezeichen hinter dem Logo. Am Ende steht filter:none, dann schneidet gar nichts mehr. */
.js [data-blur] .bw{display:inline-block;padding:.1em .08em;margin:-.1em -.08em;opacity:0;filter:blur(12px);transform:translateY(.12em);transition:opacity .75s ease,filter .75s ease,transform .75s var(--ease);transition-delay:calc(var(--i) * 75ms)}
.js [data-blur].is-in .bw{opacity:1;filter:none;transform:none}
.js [data-wort] img{opacity:0;filter:blur(18px);transition:opacity .9s ease,filter 1s ease}
.js [data-wort].is-in img{opacity:1;filter:blur(0)}

.rise{opacity:0;transform:translateY(16px);animation:rise .8s var(--ease) forwards;animation-delay:calc(var(--i,0) * 90ms + .55s)}
@keyframes rise{to{opacity:1;transform:none}}

.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rise,.js .reveal,.js [data-blur] .bw,.js [data-wort] img{opacity:1;transform:none;filter:none}
  .hero-bg i{animation:none}
}

/* ==========================================================
   Größere Bildschirme
   ========================================================== */
@media (min-width:600px){
  .deck{grid-template-columns:1fr 1fr}
  .thanks-card{padding:46px 40px 32px}
  .arc{--aw:104px;--step:122px;--drop:17px;height:200px}
  .arc-item .gt{--sz:56px}
}

@media (min-width:760px){
  :root{--gut:28px}
  .sec,.fin{padding-top:112px}
  .head{margin-bottom:44px}
  .head p{font-size:1.18rem;max-width:44ch}
  .badge{--sz:62px;margin-bottom:22px}
  .dock{display:none}
  .ftr{padding:112px 0 44px}

  .hdr{top:20px}
  .hdr-in{width:fit-content;margin:0 auto;height:58px;gap:26px;padding:0 8px 0 18px}
  .nav{display:flex;gap:24px;font-weight:600;font-size:1rem;color:var(--ink-2)}
  .nav a{transition:color .2s}
  .hdr-act{gap:8px}
  .hdr-cta{display:inline-flex;height:42px;border-radius:12px;font-size:.98rem}
  .hdr-act .sq{--sz:42px}

  .hero{padding:calc(100px + env(safe-area-inset-top)) 0 64px;border-radius:0 0 44px 44px}
  .hero-bg i:nth-child(1){left:-6%;top:-300px;width:min(62vw,860px);height:min(62vw,860px)}
  .hero-bg i:nth-child(2){right:-6%;top:-260px;width:min(58vw,800px);height:min(58vw,800px)}
  .hero-bg i:nth-child(3){left:26%;top:60px;width:48vw;height:48vw}
  .hero-bg::after{background-size:24px 24px}
  .hero-title{margin-top:22px}
  .steps{max-width:440px;margin-top:24px}
  .steps li{font-size:1.0625rem;gap:11px}
  .steps i{width:14px;height:14px}
  .steps::before,.steps::after{top:6px}
  .gnote{height:34px;margin-top:18px;padding:0 13px 0 11px;font-size:1rem}
  .gnote-g{width:17px;height:17px}
  .hero-card{margin-top:26px}
  .entry{padding:20px 20px 18px;border-radius:30px}
  .entry-q{font-size:1.8rem}
  .brand{height:60px}
  .facts{margin-top:22px}

  .bento{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .bcard-body{padding:4px 26px 30px}
  .illu{height:240px}
  .panel{padding:64px 32px 56px;border-radius:36px}
  .arc{margin:40px 0 0;--aw:124px;--step:168px;--drop:22px;height:250px}
  .arc-item{border-radius:28px}
  .arc-item .gt{--sz:66px}
  .arc-label b{font-size:1.7rem}
  .arc-label span{font-size:1.15rem}

  .kosten{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
  .rcard{padding:44px 24px 48px;position:sticky;top:104px}   /* der Beleg bleibt neben den Karten stehen */
  .deck{gap:16px}

  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center;max-width:980px;margin:0 auto}
  .ve{border-radius:32px}
  .ve-lane{padding:28px 30px}
  .ve-top b{font-size:1.4rem}

  .fq{border-radius:22px}
  .fq-q{padding:22px 20px 22px 26px;font-size:1.26rem}
  .fq-a p{padding:0 26px 26px;font-size:1.1rem}
  .fq-duo{gap:12px;padding:0 26px 26px}
  .fq-box{padding:16px 18px 17px;border-radius:15px}
  .fq-box h4,.fq-box li{font-size:1.1rem}

  .fin-card{width:min(100%,420px);margin-top:44px;padding:34px 28px 26px;border-radius:28px}

  .rv-card{padding:28px 30px 24px;border-radius:30px}
  .js .rv-card{min-height:300px}
  .rv-text{font-size:1.36rem}
  .rv-text.rv-kurz{font-size:1.7rem}

  .ftr-panel{border-radius:36px}
  .ftr-top{gap:40px;padding:56px 56px 10px}
  .ftr-tag{font-size:1.44rem}
  .ftr-cols{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:32px}
  .ftr-cols > :last-child{grid-column:auto}
  .ftr-word{margin-top:48px}

  .flow-top{margin:calc(20px + env(safe-area-inset-top)) auto 0;width:min(100% - 56px,560px);height:58px}
  .flow-body{padding-top:36px}
  .q{font-size:2.7rem}
  .tile-box{min-height:112px}
  .tile-img{width:54px;height:54px}
  .tile-car{width:148px}
  .tile-wide .tile-car{width:108px}
  .opt-ic{width:52px;height:52px}
}

/* Erst ab hier ist Platz, den Leitsatz der Fußzeile neben die drei Spalten zu stellen */
@media (min-width:1040px){
  .ftr-top{grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);gap:48px}
}