:root{
  /* Zweites, vom <meta> unabhaengiges Signal an Browser mit eigener Dunkelschaltung (Samsung Internet,
     Chrome "Auto Dark Theme"): diese Seite waehlt ihr Farbschema selbst. Ohne diese Angabe faerben sie
     die Seite um und legen dabei einen Filter ueber alle Bilder. Das endgueltige Schema setzt
     brandingAnwenden() je Mandant am Wurzelelement; eine Zeile dort schlaegt diese hier. */
  color-scheme: dark light;
  --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}
/* Unsichtbares Datei-Feld: Tastaturfokus am ganzen Ablagefeld zeigen (WCAG 2.4.7) */
.ablage:focus-within{outline:3px solid var(--fokus,var(--blau));outline-offset:2px}
.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(--fokus,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:var(--flaeche,#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(--fokus,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;color:var(--text);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(--fokus,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(--fokus,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:#b91c1c;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 */
/* Platz fuer die feste Leiste unten: am body, damit auch die Fusszeile (Impressum, Datenschutz) darueber sichtbar bleibt.
   app.js setzt --leiste-hoehe auf die tatsaechliche Hoehe der Leiste (waechst mit Auswahl, Fehlern, Fortschritt). */
.seite{padding-bottom:1.5rem}
body{padding-bottom:var(--leiste-hoehe,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.5rem;height:1.5rem;
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)}
.login-innen{align-content:start}
@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(--fokus,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}
/* Unsichtbarer Schieber: Fokus am Griff und am Bild sichtbar machen (WCAG 2.4.7) */
.vergleich:has(#schieber:focus-visible){outline:3px solid var(--fokus,var(--blau));outline-offset:2px}
.vergleich:has(#schieber:focus-visible) .griff::after{box-shadow:0 0 0 3px var(--fokus,var(--blau)),0 2px 8px rgba(0,0,0,.35)}
.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}
/* Zweitwichtigste Aktion nach dem Ergebnis: gleich noch eine Folie am selben Foto (45 % der Kunden machen nur ein Bild) */
.andere-folie{display:flex;flex-direction:column;align-items:center;gap:.1rem;border-color:var(--akzent,var(--navy));font-weight:700}
.andere-folie-rest{font-size:.76rem;font-weight:500;color:var(--text-2)}
@media(min-width:640px){.aktionen>.andere-folie{flex:1 1 auto;width:auto}}
.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;flex-wrap:wrap;gap:.4rem 1rem;font-size:.83rem;color:var(--text-2)}
.fuss a{color:var(--text-2)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* Hexlizer: 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.laeuft .leiste-hinweis,.leiste.laeuft .auswahl,.leiste.laeuft .einwilligung-status,.leiste.laeuft .leiste-zeile{display:none}
.leiste.laeuft .fortschritt{margin-bottom:0}
@media(max-width:640px){.leiste-hinweis{font-size:.74rem;line-height:1.35;margin-bottom:.35rem}.leiste .folie-chip{display:none}.leiste .auswahl:not(:has(.wahl-chip:not(.folie-chip))){display:none}.leiste .gewaehlt-shop{margin-top:0;white-space:nowrap}.leiste .knopf{padding:.65rem .8rem;font-size:.92rem}}
.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}
/* Teilfolierung: Umfang-Wahl (ganzes Auto / nur Teile) und Teile-Haken */
.umfang{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:0 0 .8rem}
.umfang-wahl{display:flex;gap:.55rem;align-items:flex-start;border:1px solid var(--linie);border-radius:10px;padding:.6rem .7rem;cursor:pointer;background:var(--flaeche-2,var(--grund))}
.umfang-wahl:has(input:checked){border-color:var(--akzent,var(--navy));box-shadow:inset 0 0 0 1px var(--akzent,var(--navy))}
.umfang-wahl input{margin-top:.2rem;accent-color:var(--akzent,var(--navy))}
.umfang-wahl b{display:block;font-size:.92rem}.umfang-wahl small{display:block;color:var(--text-2);font-size:.76rem;line-height:1.3}
@media (max-width:420px){.umfang{grid-template-columns:1fr}}
.teile-liste{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem;margin:.3rem 0 .5rem}
.teile-liste .haken{margin:0;font-size:.92rem}
/* 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(--fokus,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}
/* Hinweis, warum ein Bauteil gesperrt ist - fuer Screenreader, sichtbar nur als Tooltip der Zeile */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.google-vorab{display:grid;gap:.4rem;margin:.4rem 0}
.widerruf-box{margin:.8rem 0;padding:.7rem .9rem;border:1px solid var(--linie);border-radius:10px}
.widerruf-code{font-family:ui-monospace,Consolas,monospace;font-size:1.15rem;letter-spacing:.08em;margin:.3rem 0}
/* Kostenloser Weg: Alter-Bestaetigung und Vertragsbestaetigung (Bauplan Phase 3, Texte 08 Nr. 1/2) */
.vertrag-fehler{margin:.7rem 0 0;padding:.55rem .7rem;border-radius:8px;border:1px solid #d9534f;color:inherit;font-size:.88rem}
/* Bilderpakete (Bauplan Phase 4, Texte 08 Nr. 1/3): Kaufen-Alternative, Kasse mit freiwilligem Sofort-Haekchen */
.kauf-alternative{border:1px solid var(--linie);border-radius:10px;padding:.7rem .9rem;margin:0 0 1rem}
.kauf-alternative h3,.paket-dialog h3{font-size:.98rem;margin:0 0 .4rem}
.kauf-alternative p{margin:.2rem 0}
.kauf-alternative .knopf-leise{margin-top:.4rem}
.paket-dialog{max-width:620px}
.paket-auswahl{border:0;margin:0 0 .6rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.paket-auswahl legend{margin-bottom:.4rem}
.paket-option{display:flex;gap:.5rem;align-items:flex-start;border:1px solid var(--linie);border-radius:10px;padding:.55rem .65rem;cursor:pointer}
.paket-option:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.paket-option input{margin-top:.2rem;accent-color:var(--navy)}
.paket-option span{display:flex;flex-direction:column;gap:.1rem;font-variant-numeric:tabular-nums}
.paket-option small{color:var(--text-2);font-size:.75rem}
.paket-preis{font-size:.9rem}
/* Gestaltungsvorgabe 08 Nr. 3: Haekchen, "freiwillig" und beide Folgen zusammen, deutlich sichtbar und neutral */
.paket-start{border:2px solid var(--linie);border-radius:10px;padding:.75rem .9rem;margin:.8rem 0}
.paket-freiwillig{font-weight:600;margin:0 0 .6rem;font-size:.9rem}
.paket-start .zustimmung{font-size:.88rem;margin:0 0 .6rem}
.paket-folgen{margin:0;padding-left:1.1rem;font-size:.88rem;display:grid;gap:.35rem}
.paket-uebersicht ul{margin:.2rem 0 .5rem;padding-left:1.1rem;font-size:.9rem;font-variant-numeric:tabular-nums}
.paket-knopf-hinweis{text-align:right;margin:.4rem 0 0}
.paket-meldung{max-width:960px;margin:0 auto 1rem;padding:.7rem .9rem;border:1px solid var(--linie);border-left:4px solid var(--navy);border-radius:8px}

/* ---------- Neuer Ablauf im Werbemodell (Pruefung 12, Vorlage docs/entwurf/ablauf-vorschau.html) ----------
   Bottom-Sheets mit den Farben des Themes (Studio = dunkel); Fallbacks fuer helle Themes. */
/* Jerome 17.09.: Dialoge im dunklen Design, unabhaengig vom Theme des Haendlers (Werte wie Theme "studio") */
.sheet-dialog{--flaeche:#181c24;--flaeche-2:#20252f;--grund:#0f1218;--linie:#2c3340;--text:#eef1f5;--text-2:#9aa3b0;--akzent:#f5b400;
  --akzent-hover:#ffc933;--akzent-text:#14171d;--akzent-ink:#f5b400;--eingabe:#12151b;--fokus:#f5b400;--navy:#f5b400;color-scheme:dark}
.sheet-dialog a{color:var(--text)}
.sheet-dialog .link-knopf{color:var(--text)}
.sheet-dialog .knopf{background:var(--akzent);color:var(--akzent-text);border:0}
.sheet-dialog .knopf[disabled]{background:#3a404c;color:#8b93a0}
.sheet-dialog .knopf-leise{background:transparent;color:var(--text);border-color:var(--linie)}
.sheet-dialog .klein{color:var(--text-2)}
.sheet-dialog{border:1px solid var(--linie);border-bottom:0;border-radius:20px 20px 0 0;background:var(--flaeche,#fff);color:var(--text);
  padding:.6rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));width:min(480px,100%);max-width:100%;max-height:92vh;overflow:auto;
  margin:auto auto 0;box-shadow:0 -20px 60px rgba(0,0,0,.45)}
.sheet-dialog::backdrop{background:rgba(5,7,10,.65)}
.sheet-dialog[open]{animation:sheet-hoch .28s ease-out}
@keyframes sheet-hoch{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.sheet-dialog[open]{animation:none}}
@media (min-width:700px){.sheet-dialog{margin:auto;border-radius:20px;border-bottom:1px solid var(--linie)}}
.sheet-griff{width:2.5rem;height:.28rem;border-radius:999px;background:var(--linie);margin:0 auto .6rem}
/* Optionen (Extras, Teilfolierung, Toenung): Knopfzeile im Folienschritt, Inhalt in einem Bottom-Sheet (Jerome 22.09.: Extras lagen unter 1.600 Folien) */
.optionen-zeile{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:.6rem 0 .2rem}
.option-knopf{position:relative;display:flex;align-items:flex-start;gap:.4rem;border:1px solid var(--linie);border-radius:10px;padding:.5rem .6rem;background:var(--flaeche-2,var(--grund));color:var(--text);font:inherit;text-align:left;cursor:pointer;min-width:0}
.option-knopf:hover,.option-knopf:focus-visible{border-color:var(--akzent,var(--navy));outline:none}
.option-knopf::after{content:'';flex:none;margin-left:auto;align-self:center;width:.5rem;height:.5rem;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(-45deg)}
.option-knopf.aktiv{border-color:var(--akzent,var(--navy));box-shadow:inset 0 0 0 1px var(--akzent,var(--navy))}
.option-text{display:grid;gap:.1rem;min-width:0}.option-text b{font-size:.86rem;line-height:1.2}.option-text small{font-size:.72rem;color:var(--text-2);line-height:1.25}
.option-zahl{position:absolute;top:-.45rem;right:.5rem;background:var(--akzent,var(--navy));color:var(--akzent-text,#fff);font-size:.66rem;font-weight:800;border-radius:999px;padding:.08rem .45rem;white-space:nowrap;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.optionen-zeile{grid-template-columns:1fr}.option-knopf{padding:.45rem .6rem}.option-text{grid-template-columns:auto 1fr;align-items:baseline;gap:.4rem}.option-text small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.optionen-dialog{width:min(640px,100%)}
.optionen-dialog .schritt{box-shadow:none;padding:.2rem 0 .6rem;border:0;border-bottom:1px solid var(--linie);border-radius:0;background:transparent}
.optionen-dialog .schritt:last-of-type{border-bottom:0}
.optionen-dialog .nr{display:none}
.optionen-dialog .schritt-kopf{margin-bottom:.4rem}
.optionen-dialog .extra,.optionen-dialog .bereiche,.optionen-dialog .toenung-box{background:var(--flaeche-2,var(--grund))}
#optionen-fertig{margin-top:.8rem}
.sheet-zu{position:absolute;top:.6rem;right:.7rem;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--linie);background:var(--flaeche-2,var(--grund));color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
.sheet-titel{font-size:1.3rem;line-height:1.2;margin:0 2.4rem .3rem 0;text-wrap:balance}
.sheet-leise{color:var(--text-2);font-size:.88rem;margin:.2rem 0 0}
.sheet-h3{font-size:1rem;margin:1.1rem 0 .5rem}
.sheet-unter{text-align:center;margin:.6rem 0 0}
.sheet-zweit{width:100%;margin-top:.5rem}
.sheet-label{display:block;font-weight:600;font-size:.9rem;margin:.8rem 0 .3rem}
.sheet-feld{width:100%;box-sizing:border-box;background:var(--eingabe,var(--grund));border:1px solid var(--linie);border-radius:10px;padding:.7rem .8rem;color:var(--text);font:inherit;resize:vertical;min-height:4.5rem}
.sheet-dialog .knopf{width:100%}
.weg-gratis{position:relative;border:2px solid var(--akzent,var(--navy));border-radius:14px;padding:1rem;margin-top:1.1rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--akzent,var(--navy)) 12%,transparent),transparent 60%)}
.weg-abzeichen{position:absolute;top:-.7rem;left:1rem;background:var(--akzent,var(--navy));color:var(--akzent-text,#fff);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.15rem .6rem}
.weg-preis{font-size:2.1rem;font-weight:800;line-height:1;margin:.3rem 0 .1rem}
.weg-kontingent{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.8rem 0}
.weg-kontingent div{background:var(--flaeche-2,var(--grund));border-radius:10px;padding:.55rem .6rem;font-size:.78rem;color:var(--text-2)}
.weg-kontingent strong{display:block;font-size:1.35rem;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
.weg-bonus{background:var(--flaeche-2,var(--grund));border-radius:10px;padding:.5rem .65rem;font-size:.85rem;margin:0 0 .9rem}
.weg-kauf{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--linie);border-radius:14px;padding:.8rem 1rem;margin-top:.8rem;background:none;color:var(--text);width:100%;text-align:left;font:inherit;cursor:pointer}
.weg-kauf:hover{border-color:var(--text-2)}
.weg-kauf b{display:block}
.weg-pfeil{color:var(--text-2);font-size:1.3rem}
.pflicht-kasten{border:1px solid var(--linie);border-radius:12px;overflow:hidden}
.haken{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .8rem;cursor:pointer;font-size:.92rem}
.haken + .haken,.haken + .haken-details{border-top:1px solid var(--linie)}
.haken.ohne-rand{padding:0}
.haken input{width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:var(--akzent,var(--navy));flex:none}
.haken-details{padding:.4rem .8rem .6rem 2.75rem}
.haken-details.ohne-einzug{padding:.4rem 0 0}
.haken-details summary{cursor:pointer;color:var(--text-2);font-size:.82rem}
.haken-details p{font-size:.82rem;color:var(--text-2);margin:.4rem 0 0}
.alle-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.2rem 0 .6rem}
.alle-knoepfe button{background:var(--flaeche-2,var(--grund));border:1px solid var(--linie);border-radius:999px;padding:.45rem .6rem;font:inherit;font-size:.84rem;color:var(--text);cursor:pointer}
.schalter-liste{display:grid}
.schalter{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--linie);cursor:pointer}
.schalter:last-child{border-bottom:0}
.schalter small{display:block;color:var(--text-2);font-size:.78rem}
.schalter input{appearance:none;-webkit-appearance:none;width:2.6rem;height:1.5rem;border-radius:999px;background:var(--linie);position:relative;flex:none;cursor:pointer;margin:0;transition:background .15s}
.schalter input::after{content:"";position:absolute;top:.15rem;left:.15rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#fff;transition:transform .15s}
.schalter input:checked{background:var(--akzent,var(--navy))}
.schalter input:checked::after{transform:translateX(1.1rem)}
.schalter input:disabled{opacity:.45;cursor:not-allowed}
.schalter input:focus-visible{outline:2px solid var(--fokus,var(--navy));outline-offset:2px}
.plus{color:var(--text);font-weight:700;font-size:.74rem;margin-left:.3rem;border:1px solid var(--linie);border-radius:999px;padding:0 .35rem}
.weg-zaehler{display:flex;justify-content:space-between;align-items:center;background:var(--flaeche-2,var(--grund));border-radius:10px;padding:.55rem .7rem;margin:1rem 0 .7rem;font-size:.88rem}
.weg-zaehler strong{font-variant-numeric:tabular-nums}
.limit-countdown{display:flex;flex-direction:column;align-items:center;background:var(--flaeche-2,var(--grund));border-radius:14px;padding:1rem;margin:1rem 0}
.limit-countdown strong{font-size:2.3rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.limit-bonus{border:1px solid var(--linie);border-radius:12px;padding:.7rem .8rem}
.limit-bonus p{margin:0 0 .3rem}
.knopf-paar{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.6rem}
.knopf-paar .knopf-leise{padding:.6rem .4rem;font-size:.85rem}
.paket-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.9rem 0}
.paket-kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;border:1px solid var(--linie);border-radius:14px;padding:.8rem .85rem .7rem;cursor:pointer;background:var(--flaeche-2,var(--grund));color:var(--text);font:inherit;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s}
.paket-kachel:hover{border-color:var(--akzent,var(--navy))}
.paket-kachel:focus-visible{outline:2px solid var(--akzent,var(--navy));outline-offset:2px}
.paket-kachel[aria-checked="true"]{border-color:var(--akzent,var(--navy));box-shadow:inset 0 0 0 1.5px var(--akzent,var(--navy)),0 8px 22px rgba(0,0,0,.14)}
.paket-links{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.paket-links b{font-size:1rem}
.paket-rechts{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;white-space:nowrap}
.paket-links b{white-space:nowrap}
.paket-kachel .gesamt{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.paket-kachel .je{font-size:.74rem;color:var(--text-2)}
.paket-sparen{font-size:.68rem;font-weight:700;color:var(--akzent-ink,var(--akzent,var(--navy)));font-variant-numeric:tabular-nums}
.paket-tipp{position:absolute;top:-.6rem;right:.6rem;background:var(--text);color:var(--flaeche,#fff);font-size:.62rem;font-weight:800;border-radius:999px;padding:.1rem .5rem;text-transform:uppercase;letter-spacing:.06em}
.paket-tipp.gold{background:var(--akzent,var(--navy));color:var(--akzent-text,#fff);box-shadow:0 4px 12px var(--akzent-schatten,rgba(0,0,0,.2))}
/* Das beliebteste Paket: volle Breite, groesser, mit Akzentrahmen und Begruendung */
.paket-kachel.beliebt{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;gap:.8rem;padding:1rem 1.05rem .9rem;border-width:2px;border-color:var(--akzent,var(--navy));background:linear-gradient(135deg,var(--flaeche-2,var(--grund)),var(--flaeche,var(--grund)))}
.paket-kachel.beliebt[aria-checked="true"]{box-shadow:inset 0 0 0 1px var(--akzent,var(--navy)),0 10px 28px var(--akzent-schatten,rgba(0,0,0,.2))}
.paket-kachel.beliebt .paket-links b{font-size:1.25rem}
.paket-warum{font-size:.8rem;color:var(--text-2);max-width:16rem;line-height:1.3}
.paket-kachel.beliebt .paket-rechts{align-items:flex-end}
.paket-kachel.beliebt .gesamt{font-size:1.7rem}
.paket-kachel.beliebt .je{font-size:.8rem}
.paket-kachel.beliebt .paket-sparen{font-size:.78rem}
@media (prefers-reduced-motion:reduce){.paket-kachel{transition:none}}
.sheet-dialog .paket-start{border:2px solid var(--linie);border-radius:12px;padding:.8rem;margin:.9rem 0}
.sheet-dialog .paket-freiwillig{font-size:.78rem;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .5rem}
.sheet-dialog .paket-folgen{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.2rem;padding:0;font-size:.8rem}
.sheet-dialog .paket-folgen button{background:var(--flaeche-2,var(--grund));border:1px solid var(--linie);border-radius:10px;padding:.55rem .6rem;color:var(--text-2);font:inherit;font-size:.8rem;text-align:left;cursor:pointer;line-height:1.3}
.sheet-dialog .paket-folgen button.aktiv{border-color:var(--akzent,var(--navy));box-shadow:inset 0 0 0 1px var(--akzent,var(--navy));color:var(--text)}
.sheet-dialog .paket-folgen button:focus-visible{outline:2px solid var(--akzent,var(--navy));outline-offset:2px}
.sheet-dialog .paket-folgen b{display:block;color:var(--text);font-size:.88rem}
.sheet-dialog .paket-start .haken{margin-top:.7rem}
.sheet-dialog .paket-start .haken.hervor{animation:haken-hervor 1.4s ease-out;border-radius:8px}
@keyframes haken-hervor{0%{box-shadow:0 0 0 3px var(--akzent,var(--navy))}100%{box-shadow:0 0 0 0 transparent}}
/* Zusammenfassung + Bestellknopf bleiben beim Scrollen im Dialog sichtbar (Handy: das Haekchen liegt sonst ausser Sicht) */
.paket-fuss{position:sticky;bottom:calc(-1.1rem - env(safe-area-inset-bottom));background:var(--flaeche);padding:.3rem 0 .6rem;margin:0 -.2rem;border-top:1px solid var(--linie);z-index:1}
.paket-fuss .paket-summe{margin-top:.2rem}
.paket-summe{display:flex;justify-content:space-between;align-items:baseline;margin:.6rem 0 .1rem;padding:.35rem .5rem;border-radius:8px}
.paket-summe.hervor{animation:summe-hervor 1.6s ease-out}
@keyframes summe-hervor{0%{background:var(--akzent,var(--navy));color:var(--akzent-text,#fff)}100%{background:transparent;color:inherit}}
@media (prefers-reduced-motion:reduce){.paket-summe.hervor{animation:none;box-shadow:inset 0 0 0 2px var(--akzent,var(--navy))}}
.paket-summe strong{font-size:1.3rem;font-variant-numeric:tabular-nums}
.paket-summe-preis{display:grid;justify-items:end;line-height:1.1}
.paket-summe-preis small{font-size:.7rem;color:var(--text-2)}
.sterne{display:inline-flex;gap:.15rem}
.sterne button{background:none;border:0;padding:.15rem;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--linie)}
.sterne.gross button{font-size:2rem;padding:.2rem}
.sterne button.an{color:var(--akzent,#f5b400)}
.sterne button:focus-visible{outline:2px solid var(--fokus,var(--navy));border-radius:4px}
.bewertung-gesamt{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:var(--flaeche-2,var(--grund));border-radius:12px;padding:.7rem;margin:1rem 0 .6rem}
.bewertung-gesamt span{font-size:.78rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}
.aspekt{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--linie);font-size:.9rem}
@media (max-width:360px){.aspekt{flex-direction:column;align-items:flex-start}}
.zeichen-zeile{display:flex;justify-content:space-between;gap:.5rem;margin:.25rem 0 .8rem}
.zeichen-zeile span:last-child{white-space:nowrap}
.ergebnis-konto{font-size:.85rem;color:var(--text-2);margin:.6rem 0}
.konto-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem;margin:.8rem 0}
@media (min-width:560px){.konto-tabs{grid-template-columns:repeat(4,auto)}}
.konto-tabs button{background:var(--flaeche-2,var(--grund));border:1px solid var(--linie);border-radius:999px;padding:.45rem .3rem;font:inherit;font-size:.82rem;color:var(--text-2);cursor:pointer}
.konto-tabs button[aria-selected="true"]{border-color:var(--akzent,var(--navy));color:var(--text)}
.konto-galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:.6rem 0}
.konto-galerie figure{margin:0}
.konto-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--flaeche-2,var(--grund))}
.konto-galerie figcaption{font-size:.74rem;color:var(--text-2);margin-top:.2rem}
.konto-bild-knoepfe{display:flex;gap:.8rem;font-size:.8rem}
.konto-liste{list-style:none;padding:0;margin:.4rem 0}
.konto-liste li{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--linie);font-size:.88rem}
.konto-liste small{color:var(--text-2)}
/* Mein Konto: Pakete & Rechnungen */
.konto-frei{font-weight:600;margin:.4rem 0 .2rem}
.konto-paketliste li{align-items:flex-start}
.konto-paket-text{display:grid;gap:.2rem;min-width:0;flex:1}
.konto-paket-text span{color:var(--text-2)}
.konto-paket-text progress{width:100%;height:.45rem;accent-color:var(--akzent,var(--navy))}
.konto-paket-knoepfe{display:grid;gap:.45rem;justify-items:end;white-space:nowrap}
#konto-pakete-kaufen{width:100%;margin:.7rem 0 .5rem}