:root{
  --navy:#1f2947; --navy-2:#1e3c72; --blau:#2a5298; --gold:#ffd700; --rot:#dc2626;
  --grund:#f5f6f8; --flaeche:#ffffff; --linie:#dfe2e5; --text:#1f2937; --text-2:#5b6472; --gruen:#1f8a4c;
  --radius:10px; --schatten:0 1px 2px rgba(31,41,71,.08),0 6px 20px rgba(31,41,71,.08);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;overscroll-behavior-y:contain;-webkit-tap-highlight-color:rgba(0,0,0,.08);background:var(--grund);color:var(--text);font:16px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
img{max-width:100%;display:block}
h1,h2{margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:700}
h2{font-size:1.15rem;font-weight:600}
p{margin:.5rem 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Die Polster beachten den sicheren Bereich: als App darf nichts unter Uhrzeit, Dynamic Island oder Home-Leiste
   liegen, im Querformat auch nicht unter einer seitlichen Aussparung (Jerome, 13.09.2026). */
.kopf{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 60%,var(--blau) 100%);color:#fff;display:flex;align-items:center;gap:.9rem;
padding:calc(.8rem + env(safe-area-inset-top)) calc(1.1rem + env(safe-area-inset-right)) .8rem calc(1.1rem + env(safe-area-inset-left))}
.marke{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.02em}
.kopf-titel{opacity:.85;font-size:.95rem;border-left:1px solid rgba(255,255,255,.35);padding-left:.9rem}

.seite{max-width:960px;margin:0 auto;
padding:1.2rem calc(1rem + env(safe-area-inset-right)) 3rem calc(1rem + env(safe-area-inset-left))}
.intro{padding:.6rem 0 1rem}
.intro p{color:var(--text-2);max-width:60ch}

.ablauf{display:grid;gap:1rem}
.schritt{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1rem;box-shadow:var(--schatten)}
.schritt-kopf{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.nr{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:.9rem;flex:none}

.ablage{display:block;border:2px dashed #b9c0cc;border-radius:var(--radius);padding:1.2rem;cursor:pointer;transition:border-color .15s,background .15s}
.ablage:hover,.ablage.aktiv{border-color:var(--blau);background:#f2f6fc}
.ablage input{position:absolute;width:1px;height:1px;opacity:0}
.ablage-leer{display:grid;justify-items:center;text-align:center;gap:.35rem;color:var(--text-2)}
.ablage-leer strong{color:var(--text);font-size:1.05rem}
.ablage-leer span{font-size:.9rem;max-width:44ch}
.ablage-voll{display:grid;gap:.7rem;justify-items:start}
.ablage-voll img{max-height:220px;border-radius:8px;object-fit:contain;background:#eef0f3}

.filter{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:640px){.filter{grid-template-columns:1fr 200px}.filter .chips{grid-column:1/-1}}
.filter input,.filter select{font:inherit;padding:.6rem .8rem;border:1px solid var(--linie);border-radius:8px;background:#fff;width:100%;min-width:0}
.filter input:focus,.filter select:focus{outline:2px solid var(--blau);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font:inherit;font-size:.85rem;padding:.3rem .7rem;border:1px solid var(--linie);border-radius:999px;background:#fff;cursor:pointer;color:var(--text-2)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip:focus-visible{outline:2px solid var(--blau);outline-offset:1px}
.treffer{font-size:.85rem;color:var(--text-2);margin:.7rem 0 .4rem}

.folien{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.folie{border:2px solid transparent;border-radius:8px;background:#fff;padding:.35rem;cursor:pointer;text-align:left;font:inherit;display:grid;gap:.3rem;transition:border-color .12s,transform .12s}
.folie:hover{border-color:#b9c0cc}
.folie[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--navy) inset}
.folie:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.folie .bild{aspect-ratio:1;border-radius:6px;background:#eef0f3 center/cover no-repeat;position:relative;overflow:hidden}
.folie .bild.leer::after{content:"";position:absolute;inset:0;background:var(--hex,#888)}
.folie .name{font-size:.82rem;line-height:1.25;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.folie .meta{font-size:.72rem;color:var(--text-2);display:flex;justify-content:space-between;gap:.3rem}
.folie .meta .finish{text-transform:uppercase;letter-spacing:.04em}
#mehr{margin-top:.8rem}


.knopf,.knopf-leise{font:inherit;font-weight:600;padding:.75rem 1.2rem;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid transparent;transition:background .15s,transform .1s}
.knopf{background:var(--navy);color:#fff;width:100%;font-size:1.05rem}
.knopf:hover:not([disabled]){background:var(--navy-2)}
.knopf:active:not([disabled]){transform:translateY(1px)}
.knopf[disabled]{background:#c4c9d2;cursor:not-allowed}
.knopf-leise{background:#fff;color:var(--navy);border-color:var(--linie)}
.knopf-leise:hover{border-color:var(--navy)}
.knopf:focus-visible,.knopf-leise:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.klein{font-size:.83rem;color:var(--text-2)}

.fortschritt{margin-top:0}
.balken{height:10px;border-radius:999px;background:#e5e7ea;overflow:hidden}
.balken-fuellung{height:100%;width:0;background:linear-gradient(90deg,var(--blau),var(--navy-2));transition:width .6s ease}
.fortschritt p{font-size:.95rem;color:var(--text-2)}
.fehler{color:var(--rot);background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:.5rem .8rem;margin-top:0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between}
.fehler[hidden]{display:none}

/* Feste Leiste unten */
.seite{padding-bottom:9.5rem}
.hinweis-unten{margin:.2rem 0 0}
.klein-knopf{padding:.45rem .8rem;font-size:.9rem}
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--linie);box-shadow:0 -6px 24px rgba(31,41,71,.12);padding:.6rem calc(1rem + env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left))}
.zustimmung{max-width:960px;margin:0 auto .5rem;display:flex;gap:.5rem;align-items:flex-start;font-size:.78rem;color:var(--text-2);line-height:1.35;cursor:pointer}
.zustimmung input{margin:.15rem 0 0;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--navy)}
.zustimmung a{color:var(--navy)}
/* Deine Auswahl als Chips: IMMER einzeilig und schiebbar, sonst waechst die Leiste mit jeder Wahl und
   verdeckt am Handy den Inhalt darunter (Jerome, 13.09.2026). */
.auswahl{display:flex;flex-wrap:nowrap;gap:.35rem;align-items:center;overflow-x:auto;
overscroll-behavior-x:contain;scrollbar-width:none;margin-bottom:.5rem}
.auswahl:empty{display:none}
.auswahl.mehr{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent)}
.auswahl::-webkit-scrollbar{display:none}
.wahl-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;
padding:.2rem .3rem .2rem .6rem;border:1px solid var(--linie);border-radius:999px;background:var(--flaeche-2,#f7f8fa)}
.wahl-chip .art{color:var(--text-2)}
.wahl-chip button{all:unset;cursor:pointer;display:grid;place-items:center;width:1.15rem;height:1.15rem;
border-radius:999px;color:var(--text-2);font-size:.9rem;line-height:1}
.wahl-chip button:hover,.wahl-chip button:focus-visible{background:var(--linie);color:var(--text)}
/* Zuletzt gewaehlte Folien */
.zuletzt{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .6rem}
.zuletzt-liste{display:flex;flex-wrap:wrap;gap:.4rem}
.zuletzt-knopf{font:inherit;font-size:.8rem;display:inline-flex;align-items:center;gap:.35rem;
padding:.25rem .6rem .25rem .3rem;border:1px solid var(--linie);border-radius:999px;
background:var(--flaeche,#fff);color:var(--text);cursor:pointer}
.zuletzt-knopf:hover,.zuletzt-knopf:focus-visible{border-color:var(--akzent,var(--navy))}
.zuletzt-punkt{display:block;width:1.1rem;height:1.1rem;border-radius:999px;background-size:cover;background-position:center}
.leiste-zeile{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:.8rem}
.leiste .fortschritt,.leiste .fehler{max-width:960px;margin:0 auto .6rem}
.leiste .knopf{width:auto;flex:none;padding:.7rem 1.1rem;font-size:1rem;white-space:nowrap}
.gewaehlt{display:flex;align-items:center;gap:.7rem;min-width:0;flex:1}
.gewaehlt img{width:46px;height:46px;border-radius:6px;object-fit:cover;background:#eef0f3;flex:none;border:2px solid var(--gold)}
.gewaehlt-text{display:grid;min-width:0}
.gewaehlt strong{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gewaehlt span{font-size:.8rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){.leiste .knopf{padding:.65rem .8rem;font-size:.95rem}.gewaehlt span{display:none}}

/* Ergebnis als Vollbild-Ansicht */
.ergebnis{position:fixed;inset:0;z-index:40;background:rgba(15,20,32,.92);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(1rem,env(safe-area-inset-top)) 0 env(safe-area-inset-bottom)}
.ergebnis[hidden]{display:none}
.ergebnis-innen{max-width:960px;margin:0 auto;background:var(--flaeche);border-radius:var(--radius);padding:1rem;display:grid;gap:.8rem;box-shadow:0 20px 60px rgba(0,0,0,.4)}
@media(max-width:640px){.ergebnis{padding:0}.ergebnis-innen{border-radius:0;min-height:100%;
padding:calc(.8rem + env(safe-area-inset-top)) calc(.8rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(.8rem + env(safe-area-inset-left))}}
.ergebnis-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.ergebnis-kopf h2{font-size:1.15rem}
.schliessen{font:inherit;font-size:1.6rem;line-height:1;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--linie);background:#fff;color:var(--navy);cursor:pointer;flex:none}
.schliessen:hover{border-color:var(--navy)}
.schliessen:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
body.ergebnis-offen{overflow:hidden}
.vergleich{position:relative;overflow:hidden;border-radius:8px;background:#111;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.vergleich img{width:100%;height:auto;display:block}
.vorher-hülle{position:absolute;inset:0;width:50%;overflow:hidden}
.vorher-hülle img{width:var(--gesamt,100%);max-width:none;height:100%;object-fit:cover}
.griff{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.griff::after{content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:1.1rem;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.marke-vorher,.marke-nachher{position:absolute;top:.6rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:.2rem .5rem;border-radius:4px;pointer-events:none}
.marke-vorher{left:.6rem}.marke-nachher{right:.6rem}
#schieber{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.schieber-tipp{font-size:.8rem;color:var(--text-2);margin:0;text-align:center}
.vergleich.ohne-vorher .vorher-hülle,.vergleich.ohne-vorher .griff,.vergleich.ohne-vorher .marke-vorher,.vergleich.ohne-vorher .marke-nachher,.vergleich.ohne-vorher #schieber{display:none}
.ergebnis-wieder{margin:0 0 .4rem;text-align:center}
.zustimmung.freiwillig{opacity:.85;margin-top:-.2rem}
.zustimmung.freiwillig span{font-size:.78rem}
.aktionen{display:grid;gap:.6rem}
.aktionen-neben{display:grid;gap:.6rem}
@media(min-width:640px){
  .aktionen{display:flex;flex-wrap:wrap;align-items:flex-start}
  .aktionen>.knopf{flex:1 1 auto;width:auto;white-space:nowrap}
  .aktionen-neben{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem;flex:1 1 auto;min-width:0}
}
.aktionen-hinweis{margin:0;text-align:center}
.video-box{border:1px solid var(--linie);border-radius:8px;padding:.7rem .8rem;background:#f8f9fa;display:grid;gap:.5rem;justify-items:start}
.video-box p{margin:0}
.video-box video{max-width:100%;max-height:280px;border-radius:6px;background:#000}
.video-zeile{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.hinweis{font-size:.83rem;color:var(--text-2);border-top:1px solid var(--linie);padding-top:.7rem;margin:0}

.fuss{max-width:960px;margin:0 auto;padding:1rem;display:flex;gap:1rem;font-size:.83rem;color:var(--text-2)}
.fuss a{color:var(--text-2)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* Hyperlizer: Mandantenfarbe, Badge, Code-Feld, Teilen */
.kopf{background:var(--navy)}
.badge{max-width:960px;margin:.45rem auto 0;font-size:.72rem;color:var(--text-2);text-align:right}
.badge a{color:var(--text-2)}
.code-feld{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0 0}
.code-feld input{font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;padding:.5rem .7rem;border:1px solid var(--linie);border-radius:8px;width:12rem;max-width:100%}
.code-feld .ok{color:var(--gruen)}
.code-feld .nein{color:var(--rot)}
.teilen-box{border:1px solid var(--linie);border-radius:8px;padding:.7rem .8rem;background:#f8f9fa}
.teilen-zeile{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.teilen-zeile input{font:inherit;font-size:.85rem;padding:.45rem .6rem;border:1px solid var(--linie);border-radius:6px;flex:1;min-width:12rem}
body.eingebettet .kopf,body.eingebettet .intro,body.eingebettet .fuss{display:none}
body.eingebettet .seite{padding-top:.4rem}

/* Ergebnis: Bild passt komplett in den Bildschirm, kein Abschneiden, Vorher-Ebene deckungsgleich */
.vergleich-wrap{text-align:center}
.vergleich{display:inline-block;max-width:100%;vertical-align:top}
.vergleich img{width:auto;max-width:100%;max-height:min(62vh,720px);height:auto;display:block}
.vorher-hülle img{width:var(--gesamt,100%);max-width:none;max-height:none;height:100%;object-fit:cover}
@media(max-height:700px){.vergleich img{max-height:56vh}}

/* Extras (Zusatzoptionen), Folienbedarf und Aktionsbox im Ergebnis */
.optional{font-weight:400;color:var(--text-2);font-size:.9rem}
.extras{display:grid;gap:.5rem}
@media(min-width:720px){.extras{grid-template-columns:repeat(3,1fr)}}
.extra{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--linie);border-radius:10px;cursor:pointer;background:var(--flaeche-2,#f8f9fa)}
.extra:has(input:checked){border-color:var(--akzent,var(--navy));box-shadow:0 0 0 2px var(--akzent,var(--navy)) inset}
.extra input{margin:.2rem 0 0;width:1.1rem;height:1.1rem;flex:none;accent-color:var(--akzent,var(--navy))}
.extra span{display:grid;gap:.15rem}
.extra small{color:var(--text-2);font-size:.8rem;line-height:1.35}
/* Der Bedarf ist der Schritt zum Kauf: Akzentkante, grosse Zahl, eigener Knopf (Jerome, 13.09.2026) */
.bedarf{margin:0;padding:.7rem .9rem;border-radius:0 8px 8px 0;background:var(--flaeche-2,#f2f6fc);
border:1px solid var(--linie);border-left:3px solid var(--akzent,var(--navy));font-size:.95rem;
display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center}
.bedarf-zahl{display:grid;gap:.05rem;line-height:1.15;min-width:8rem}
.bedarf-zahl b{font-size:1.5rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bedarf-hinweis{flex:1 1 14rem;min-width:12rem}
.bedarf .klein{display:block;margin-top:.15rem}
.aktion{border:1px solid var(--linie);border-left:4px solid var(--akzent,var(--navy));border-radius:8px;padding:.8rem 1rem;background:var(--flaeche-2,#f8f9fa);display:grid;gap:.3rem;justify-items:start}
.aktion p{margin:0;color:var(--text-2);font-size:.92rem}

/* Runde 2: vier Extras (2x2), Feedback-Zeile */
@media(min-width:720px){.extras{grid-template-columns:repeat(2,1fr)}}
.feedback{margin:0;padding:.75rem .9rem;border:1px solid var(--linie);border-left:4px solid var(--gold,#f5c400);border-radius:8px;background:var(--flaeche-2,#f8f9fa);display:grid;gap:.6rem;font-size:.92rem}
.feedback-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .8rem}
.feedback-form{display:grid;gap:.55rem}
.feedback-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.feedback-chips label{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border:1px solid var(--linie);border-radius:999px;cursor:pointer;background:var(--flaeche,#fff)}
.feedback-chips label:has(input:checked){border-color:var(--akzent,var(--navy));box-shadow:0 0 0 1px var(--akzent,var(--navy)) inset}
.feedback-chips input{margin:0;accent-color:var(--akzent,var(--navy))}
.feedback-form textarea{font:inherit;padding:.5rem .6rem;border:1px solid var(--linie);border-radius:6px;resize:vertical;min-height:3.2rem;background:var(--flaeche,#fff);color:inherit}
.feedback-form .knopf{width:auto;justify-self:start}
.feedback-form .klein{margin:0}
.feedback-fehler{color:var(--rot,#dc2626)}
.feedback-danke{margin:0;font-weight:600}
.feedback-benachr{display:flex;align-items:flex-start;gap:.45rem;cursor:pointer}
.feedback-benachr input{margin:.2rem 0 0;accent-color:var(--akzent,var(--navy))}
.feedback-form input[type=email]{font:inherit;padding:.5rem .6rem;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche,#fff);color:inherit;max-width:22rem}
.folie-karte{display:flex;align-items:center;gap:.8rem;padding:.55rem .8rem;border:1px solid var(--linie);border-radius:8px;background:var(--flaeche-2,#f2f6fc)}
.folie-karte img{width:72px;height:72px;border-radius:8px;object-fit:cover;flex:none;background:#fff}
.folie-karte div{display:grid;gap:.1rem;min-width:0}
.link-knopf{font:inherit;background:none;border:0;padding:0;color:var(--akzent-ink,var(--navy));text-decoration:underline;cursor:pointer}
.link-knopf[disabled]{text-decoration:none;cursor:default;color:var(--text-2)}

/* Runde 3: Extras einklappbar */
.klapp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;margin:0}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary h2{flex:1}
.klapp-pfeil{width:.7rem;height:.7rem;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(-45deg);transition:transform .2s;margin-right:.3rem;flex:none}
.klapp[open] .klapp-pfeil{transform:rotate(45deg)}
/* Zaehler im Klappkopf: zugeklappt muss sichtbar bleiben, dass etwas gewaehlt ist (Jerome, 13.09.2026).
   NICHT .marke nennen - die Klasse gehoert schon dem Shop-Logo im Kopf. */
.wahl-zaehler{font-size:.75rem;font-weight:600;padding:.1rem .55rem;border-radius:999px;margin-right:.4rem;
background:var(--akzent,var(--navy));color:var(--akzent-text,#fff);white-space:nowrap}
.klapp .extras{margin-top:.8rem}
.klapp summary .optional{font-size:.85rem}
@media(max-width:520px){.klapp summary .optional{display:none}}
/* Endkunden-Login */
.login-feld{margin:.6rem 0 0;padding:.8rem .9rem;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche-2,#f8f9fa);display:grid;gap:.5rem}
.login-zeile{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.login-zeile input{font:inherit;padding:.5rem .7rem;border:1px solid var(--linie);border-radius:8px;min-width:12rem;flex:1;max-width:22rem;background:var(--eingabe,#fff);color:var(--text)}
#login-an{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.login-feld .ok{color:var(--gruen)}
.login-feld .nein{color:var(--rot)}
.google-knopf{min-height:40px}
/* Login: Hinweis in der Leiste, Dialog wie das Ergebnis-Overlay */
.leiste-hinweis{max-width:960px;margin:0 auto .45rem;color:var(--text-2)}
.leiste-hinweis a,.leiste-hinweis .link-knopf{color:var(--akzent-ink,var(--navy))}
.login-innen{max-width:520px}
.login-schritt{display:grid;gap:.4rem;margin:.6rem 0}
.login-label{font-size:.85rem;color:var(--text-2)}
.login-schritt input[type=text],.login-schritt input[type=tel],.login-schritt input[type=email]{font:inherit;padding:.6rem .75rem;border:1px solid var(--linie);border-radius:8px;background:var(--eingabe,#fff);color:var(--text);min-width:0}
.login-zeile{display:flex;gap:.5rem;align-items:stretch}
.login-zeile input{flex:1}
.login-zeile .knopf{width:auto;white-space:nowrap;padding:.6rem .9rem}
.login-zustimmung{max-width:none;margin:.4rem 0 0}
#login-status.ok{color:var(--gruen)}
#login-status.nein{color:var(--rot)}
.google-knopf{min-height:40px;margin:.4rem 0}

/* Gewaehlte Folie: Lupe in der Leiste und Grossansicht */
.gewaehlt-lupe{position:relative;padding:0;border:0;background:none;cursor:zoom-in;flex:none;line-height:0;border-radius:6px}
.gewaehlt-lupe span{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--gold,#f5c400);color:#111;font-size:.7rem;line-height:18px;text-align:center;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.gewaehlt-lupe:focus-visible{outline:2px solid var(--blau,#2563eb);outline-offset:2px}
.lupe{position:fixed;inset:0;z-index:60;background:rgba(15,20,32,.92);display:grid;place-items:center;
padding:calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left))}
.lupe-innen{display:grid;gap:.7rem;justify-items:center;max-width:min(92vw,520px)}
.lupe-innen img{width:min(88vw,460px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#fff}
.lupe-text{display:grid;gap:.15rem;text-align:center;color:#fff;margin:0}
.lupe-text span{font-size:.85rem;opacity:.8}

/* Freiwillige Bildfreigabe: je Zweck ein eigenes Haekchen */
.freigabe-block{margin:.5rem 0 .2rem}
.freigabe-kopf{margin:0 0 .25rem}
.freigabe-block .zustimmung{align-items:flex-start;margin:.2rem 0}
.freigabe-block .zustimmung strong{font-weight:600}
.folie .bild{position:relative}
.bild-zweit{position:absolute;inset:0;border-radius:inherit;background:center/cover no-repeat;opacity:0;transition:opacity .35s ease}
.folie:hover .bild-zweit,.folie:focus-visible .bild-zweit{opacity:1}
@media (prefers-reduced-motion:reduce){.bild-zweit{transition:none}}
.ansicht-schalter{margin-left:auto;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--flaeche-2,#eef0f3);border:1px solid var(--linie)}
.ansicht-schalter button{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.82rem;font-weight:600;padding:.34rem .8rem;border:0;border-radius:999px;background:transparent;color:var(--text-2);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.ansicht-schalter button svg{width:18px;height:18px;flex:none}
.ansicht-schalter button:hover{color:inherit}
.ansicht-schalter button[aria-pressed=true]{background:var(--flaeche,#fff);color:inherit;box-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 0 0 1.5px var(--akzent,var(--navy))}
.ansicht-schalter button:focus-visible{outline:2px solid var(--akzent,var(--navy));outline-offset:1px}
@media (prefers-reduced-motion:reduce){.ansicht-schalter button{transition:none}}
.einwilligung{max-width:560px;width:calc(100% - 2rem);border:1px solid var(--linie);border-radius:14px;padding:1.2rem 1.3rem;background:var(--flaeche,#fff);color:inherit;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.einwilligung::backdrop{background:rgba(10,12,16,.6)}
.einwilligung h2{font-size:1.1rem;margin:0 0 .9rem;text-wrap:balance}
.einwilligung .zustimmung{font-size:.9rem;margin:0 0 .9rem;max-width:none}
.einwilligung .freigabe-block .zustimmung{font-size:.84rem}
.einwilligung-knoepfe{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.einwilligung-knoepfe .knopf{width:auto}
.einwilligung.inline{position:static;margin:0 auto .6rem;box-shadow:none;width:auto}
.einwilligung-status{max-width:960px;margin:0 auto .3rem;color:var(--text-2)}
.fortschritt-dauer{margin:.15rem 0 0;color:var(--text-2)}
/* Fortschritt als Schrittanzeige der Folierung */
.fortschritt-zeile{display:flex;align-items:center;gap:.6rem;min-height:1.6rem}
.fortschritt-zeile::before{content:"";width:15px;height:15px;flex:none;border-radius:50%;border:2px solid var(--linie);border-top-color:var(--akzent,var(--navy));animation:folier-dreh .8s linear infinite}
.folier-nr{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
#fortschritt-text{margin:0;font-size:1rem;font-weight:600;color:inherit;overflow:hidden;text-overflow:ellipsis}
#fortschritt-text.wechsel{animation:folier-rein .45s cubic-bezier(.2,.8,.2,1)}
.folier-spur{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:.1rem 0 .55rem}
.folier-spur span{position:relative;height:6px;border-radius:999px;background:var(--linie,#e5e7ea);overflow:hidden;transition:background .4s}
.folier-spur span.fertig{background:var(--akzent,var(--navy))}
.folier-spur span.aktiv{background:color-mix(in srgb,var(--akzent,var(--navy)) 30%,transparent)}
.folier-spur span.aktiv::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--akzent,var(--navy)),transparent);transform:translateX(-100%);animation:folier-glanz 1.3s ease-in-out infinite}
@keyframes folier-dreh{to{transform:rotate(360deg)}}
@keyframes folier-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes folier-glanz{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.fortschritt-zeile::before,#fortschritt-text.wechsel,.folier-spur span.aktiv::after{animation:none}}
/* Lupe auf jeder Kachel und grosse Ansicht mit Kugel/Nahansicht */
.folie-huelle{position:relative;display:grid}
.folie-huelle>.folie{height:100%}
.folie-lupe{position:absolute;top:.6rem;right:.6rem;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(15,18,24,.72);color:#fff;display:grid;place-items:center;cursor:zoom-in;opacity:0;transition:opacity .15s,transform .15s;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.folie-lupe svg{width:17px;height:17px}
.folie-huelle:hover .folie-lupe,.folie-lupe:focus-visible{opacity:1}
.folie-lupe:hover{transform:scale(1.08)}
.folie-lupe:focus-visible{outline:2px solid var(--akzent,var(--navy));outline-offset:2px}
@media (hover:none){.folie-lupe{opacity:.92}}
.lupe-innen{max-width:min(94vw,960px)}
.lupe-innen img.ist-detail{width:min(92vw,640px);aspect-ratio:1;background:#0f1218}
.lupe-ansicht{margin:0}
.lupe-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.lupe-knoepfe .knopf{width:auto}
@media (prefers-reduced-motion:reduce){.folie-lupe{transition:none}}
/* Lupe passt auch in niedrige Fenster: Bildgroesse zusaetzlich an der Hoehe begrenzen (Name und Knoepfe bleiben sichtbar) */
.lupe{overflow:auto}
.lupe-innen img{width:min(88vw,460px,calc(100dvh - 13rem));max-width:none}
.lupe-innen img.ist-detail{width:min(92vw,640px,calc(100dvh - 13rem))}
/* Hinweis "Farben aus der Serie …" beim Aufruf von der Produktseite */
.serie-hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;margin:.75rem 0 0;padding:.55rem .85rem;border:1px solid var(--akzent,var(--navy));border-radius:8px;background:var(--flaeche-2,#f2f6fc);font-size:.9rem}
.serie-hinweis .link-knopf{font-weight:600}
/* Link zum Shop-Produkt der gewaehlten Folie (untere Leiste) und in der Lupe */
.gewaehlt-shop{display:inline-block;justify-self:start;margin-top:.1rem;font-size:.78rem;font-weight:600;color:var(--akzent-ink,var(--navy));text-decoration:underline}
.gewaehlt-shop:focus-visible{outline:2px solid var(--akzent,var(--navy));outline-offset:2px}
/* Bauteile in anderer Farbe (zweifarbig) in Schritt 2 */
.bereiche{margin:.9rem 0 0;padding:.9rem;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche-2,#f7f8fa)}
.bereiche-kopf{margin:0 0 .6rem;display:grid;gap:.15rem}
/* Eine Zeile je Bauteil: Beschriftung | Auswahl | Knopf fuer die eigene Folie - so bleiben alle Zeilen buendig */
.bereiche-gitter{display:grid;gap:.45rem;grid-template-columns:1fr}
.bereich{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.35rem .6rem;font-size:.92rem;min-height:2rem}
.bereich select{max-width:11rem}
.bereich.gesperrt{opacity:.45}
.bereich:not(.bereich-look)+.bereich-look{margin-top:.35rem;padding-top:.6rem;border-top:1px dashed var(--linie)}
.bereich-knopf{max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bereich-knopf[hidden]{display:none}
@media (max-width:560px){.bereich{grid-template-columns:1fr auto}.bereich-knopf{grid-column:1/-1;justify-self:start;max-width:100%}}
.bereich-knopf.fehlt{color:var(--warn-text,#b45309);font-weight:600}
/* Dialog "Folie waehlen" (je Bauteil) */
.folie2-dialog{border:1px solid var(--linie);border-radius:14px;background:var(--flaeche,#fff);color:var(--text);
max-width:min(94vw,760px);width:100%;padding:1.1rem}
.folie2-dialog::backdrop{background:rgba(8,10,14,.6)}
.folie2-dialog h2{margin:0 0 .2rem;font-size:1.1rem}
.folie2-dialog input[type=search]{width:100%;margin:.6rem 0 .2rem}
.folie2-liste{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));max-height:52vh;overflow:auto;
margin:.5rem 0 .8rem}
.folie2{display:grid;gap:.15rem;padding:.35rem;border:1px solid var(--linie);border-radius:8px;background:var(--flaeche,#fff);
color:var(--text);cursor:pointer;text-align:left;font:inherit}
.folie2:hover,.folie2:focus-visible{border-color:var(--akzent,var(--navy))}
.folie2-bild{display:block;aspect-ratio:1;border-radius:6px;background-size:cover;background-position:center}
.folie2-name{font-size:.78rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folie2-her{font-size:.72rem;color:var(--text-2)}
/* Scheibentönung in Schritt 2 */
.toenung{margin:.9rem 0 0;padding:.9rem;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche-2,#f7f8fa)}
.toenung-stufen{display:flex;flex-wrap:wrap;gap:.4rem}
.toenung-stufe{font:inherit;font-size:.86rem;padding:.4rem .8rem;border:1px solid var(--linie);border-radius:999px;
background:var(--flaeche,#fff);color:var(--text);cursor:pointer}
.toenung-stufe[aria-pressed=true]{background:var(--akzent,var(--navy));color:var(--akzent-text,#fff);border-color:transparent}
/* Am Rechner Bild links, Angaben rechts daneben; am Handy untereinander */
.toenung-wahl{margin-top:.8rem;display:grid;gap:.9rem}
@media (min-width:720px){.toenung-wahl{grid-template-columns:minmax(220px,320px) 1fr;align-items:start}}
/* Beispielbild der gewaehlten Stufe (gleiches Fahrzeug fuer alle Stufen, damit man vergleichen kann) */
.toenung-vorschau{margin:0;display:grid;gap:.3rem;justify-items:start}
.toenung-vorschau img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--linie);background:var(--flaeche,#fff)}
.toenung-daten{display:grid;gap:.7rem;align-content:start}
/* Folienwahl als Chips: gleiche Sprache wie die Stufen-Knoepfe, zwei Zeilen statt Auswahlfeld */
.toenung-folien{display:flex;flex-wrap:wrap;gap:.4rem}
.toenung-folien button{font:inherit;font-size:.82rem;line-height:1.25;text-align:left;padding:.35rem .7rem;
border:1px solid var(--linie);border-radius:8px;background:var(--flaeche,#fff);color:var(--text);cursor:pointer}
.toenung-folien button b{display:block;font-weight:600}
.toenung-folien button span{font-size:.72rem;color:var(--text-2)}
.toenung-folien button[aria-pressed=true]{border-color:var(--akzent,var(--navy));box-shadow:inset 0 0 0 1px var(--akzent,var(--navy))}
.toenung-folien button[aria-pressed=true] span{color:inherit}
.toenung-folien button:focus-visible,.toenung-stufe:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.toenung-info{display:grid;gap:.35rem}
.toenung-name{margin:0;font-weight:600}
/* Merkmale der Folie als Chips (Technik, Haltbarkeit, UV) - knapp und scanbar */
.toenung-merkmale{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .2rem;padding:0;list-style:none}
.toenung-merkmale li{font-size:.75rem;padding:.15rem .5rem;border:1px solid var(--linie);border-radius:999px;
background:var(--flaeche,#fff);color:var(--text-2)}
.toenung-balken{display:grid;grid-template-columns:9rem 1fr 3.2rem;align-items:center;gap:.5rem;font-size:.82rem}
.toenung-balken .spur{display:block;height:.5rem;border-radius:999px;background:var(--linie)}
.toenung-balken .voll{display:block;height:100%;border-radius:999px}
.toenung-balken .wert{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}