/* NIVO Visuals — dunkler Raum, ein blauer Schalter, ein Produkt.
   Aufbau: Tokens · Grundlagen · Bausteine (Schrift, Knoepfe, Glas) · Kopfzeile · Seitenteile
   in Leserichtung (Auftakt, Kontaktbogen, Kachel, Split, Angebot, Band, Fragen) · Raster und
   Produktseite · Kasse und Danke · Fusszeile · Ebenen (Kaufleiste, Meldung) · Bewegung. */

:root{
  /* Farbe — heller Laden. Namen bleiben (die Rollen sind dieselben), Werte sind hell:
     --white ist der Grund, --carbon der Text, --frost die zweite Flaeche, --hairline die Linie. */
  --blue:#0071e3;          /* Links, aktive Zustaende, der eine Farbakzent */
  --link:#0066cc;
  --signal:#0066cc;
  --buy:#111113;           /* Kaufknoepfe: schwarz, wie im Laden */
  --carbon:#111113;        /* Text */
  --graphite:#3a3a3c;      /* zweiter Text */
  --ash:#6e6e73;           /* Nebentext */
  --mist:#86868b;          /* leiser Nebentext */
  --smoke:#c7c7cc;
  --frost:#f5f5f7;         /* zweite Flaeche */
  --ice:#fafafa;           /* Kaesten */
  --pebble:#d2d2d7;        /* gesperrte Knoepfe, Platzhalter */
  --hairline:#e5e5e7;      /* Linien */
  --white:#ffffff;         /* der Grund */
  --ink-bg:#ffffff;
  --ok:#1f9d4d;--warn:#d70015;--star:#f5a623;

  /* Schrift */
  --sf-display:'SF Pro Display',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  --sf-text:'SF Pro Text',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;

  /* Schriftskala: acht Stufen, jede mit eigener Aufgabe. */
  --t-xs:.75rem;                        /* Kleingedrucktes, Wegweiser, Fusszeile */
  --t-sm:.875rem;                       /* Nebentext, kleine Bedienelemente */
  --t-body:1.0625rem;                   /* Fliesstext, Knoepfe, Links */
  --t-lead:1.3125rem;                   /* Kartentitel, Zwischenueberschrift, Summe */
  --t-tag:clamp(1.25rem,2.2vw,1.625rem);/* Unterzeile */
  --t-h2:clamp(1.5rem,3vw,1.75rem);     /* Abschnittsueberschrift, Preis */
  --t-h1:clamp(2.5rem,6vw,3.5rem);      /* Seitenueberschrift */
  --t-price:clamp(2.25rem,5vw,3rem);    /* die eine Zahl im Angebot */

  /* Mass */
  --page:1440px;--text-col:980px;--gap:64px;
  --r-card:8px;--r-pill:980px;
  --shadow-xl:rgba(0,0,0,.22) 3px 5px 30px 0;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.28,.11,.32,1);
  --pad:22px;
  --nav-h:56px;
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
/* muss vor allen display-Regeln stehen: sonst gewinnt display:grid gegen das hidden-Attribut */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{font-family:var(--sf-text);background:var(--white);color:var(--carbon);
  font-size:var(--t-body);line-height:1.47;letter-spacing:-.016em;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:8px;z-index:99;background:var(--carbon);color:var(--ink-bg);padding:10px 16px;border-radius:var(--r-pill)}
/* Bilder verschwinden, sobald das Fenster nicht mehr vorn ist */
body.guard .card-shot img,body.guard .g-slide img,body.guard .pd-stage img,body.guard .co-thumb{opacity:0}

/* ── Raum ─────────────────────────────────────────────────────────────── */
.in{max-width:var(--page);margin:0 auto;padding-inline:var(--pad)}
.in.narrow{max-width:var(--text-col)}
.sec{padding:var(--gap) 0}
.sec.frost{background:var(--frost)}
.sec.tight{padding-top:0}
.center{text-align:center}
.sec-head{max-width:40rem;margin-bottom:clamp(28px,4vw,44px)}
.sec-head .sub{margin-top:12px;color:var(--ash)}

/* ── Schrift ──────────────────────────────────────────────────────────── */
.display{font-family:var(--sf-display);font-weight:600;font-size:var(--t-h1);line-height:1.07;letter-spacing:.011em}
.display.sm{font-size:var(--t-h2)}
.h-lg{font-family:var(--sf-display);font-weight:600;font-size:var(--t-h1);line-height:1.14;letter-spacing:.011em}
.h2{font-family:var(--sf-display);font-weight:600;font-size:var(--t-h2);line-height:1.18;letter-spacing:.007em}
.h3{font-family:var(--sf-text);font-weight:600;font-size:var(--t-lead);line-height:1.24;letter-spacing:-.005em}
.sub{font-family:var(--sf-text);font-weight:300;font-size:var(--t-tag);line-height:1.25;letter-spacing:-.011em}
.lead{font-size:var(--t-body);line-height:1.47;color:var(--ash);max-width:46ch}
.eyebrow{font-size:var(--t-sm);font-weight:600;letter-spacing:-.016em;color:var(--ash)}
.eyebrow.blue{color:var(--signal)}
.footnote{font-size:var(--t-xs);line-height:1.33;letter-spacing:-.022em;color:var(--ash)}
.footnote.left{text-align:left}
.link-dark{font-size:var(--t-sm);color:var(--link)}
.link-dark:hover{text-decoration:underline}
/* Leiser Wegweiser ueber einem Abschnitt */
.label{font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:16px}
/* Textlink statt zweitem Knopf: erzeugt Rangfolge, wo zwei Pillen nur streiten */
.textlink{color:var(--link);font-size:var(--t-body);letter-spacing:-.016em;white-space:nowrap}
.textlink::after{content:"\203A";display:inline-block;margin-left:5px;transition:transform .2s var(--ease)}
.textlink:hover{text-decoration:underline}
.textlink:hover::after{transform:translateX(3px)}
.fine{margin-top:26px;font-size:var(--t-sm);color:var(--ash);max-width:56ch;margin-inline:auto}
.after-grid{margin-top:44px;text-align:center}
.proof{margin-top:10px;font-size:var(--t-sm);color:var(--ash)}

/* ── Knoepfe: eine gefuellte Farbe, eine umrandete ────────────────────── */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-pill);padding:11px 21px;font-size:var(--t-body);font-weight:400;
  letter-spacing:-.016em;min-height:44px;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.pill.fill{background:var(--buy);color:#fff}
.pill.fill:hover{background:#000}
.pill.line{border:1px solid var(--link);color:var(--link)}
.pill.line:hover{background:rgba(64,156,255,.1)}
.pill.sm{padding:8px 17px;font-size:var(--t-sm);min-height:36px}
.pill.lg{padding:14px 28px;min-height:52px;font-weight:500}
.pill.wide{width:100%}
.pill[disabled]{background:var(--pebble);color:var(--mist);border-color:transparent;cursor:default}
.btn-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:24px}

/* ── Fluessiges Glas: durchscheinende Ebenen ueber dem Inhalt ─────────── */
.glass{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.98)}
}

/* ── Kopfzeile ────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:44;border-bottom:1px solid var(--hairline)}
.nav-in{max-width:var(--page);margin:0 auto;padding:0 var(--pad);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);font-weight:700;letter-spacing:.22em}
.nav-logo svg{width:12px;display:block}
.nav-links{display:none;justify-content:center;gap:34px}
.nav-links a{font-size:var(--t-xs);font-weight:400;letter-spacing:-.022em;opacity:.88}
.nav-links a:hover{opacity:1}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-cta{display:inline-flex;padding:7px 14px;min-height:34px;font-size:var(--t-xs)}
.nav-menu{display:grid;width:44px;height:44px;place-items:center;position:relative}
.nav-menu span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--carbon);
  transition:transform .25s var(--ease),top .25s var(--ease)}
.nav-menu span:first-child{top:18px}.nav-menu span:last-child{top:25px}
.nav-menu[aria-expanded=true] span:first-child{top:21.5px;transform:rotate(45deg)}
.nav-menu[aria-expanded=true] span:last-child{top:21.5px;transform:rotate(-45deg)}
.menu{display:grid;gap:2px;padding:10px var(--pad) 22px;border-top:1px solid var(--hairline)}
.menu a{font-size:var(--t-lead);font-weight:600;letter-spacing:-.016em;padding:12px 0;border-bottom:1px solid var(--hairline)}
.menu a.pill{font-size:var(--t-body);font-weight:400;border:0;justify-self:start;padding:11px 21px}


/* ── Angebot: eine Karte, eine Zahl, ein Knopf ────────────────────────── */
.offer{max-width:520px;margin:clamp(28px,4vw,44px) auto 0;padding:clamp(24px,4vw,36px);text-align:left;
  background:var(--ice);border:1px solid var(--hairline);border-radius:18px;display:grid;gap:18px}
.offer-head{display:grid;gap:6px}
.offer-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.offer-price b{font-family:var(--sf-display);font-weight:600;font-size:var(--t-price);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.offer-price span{font-size:var(--t-sm);color:var(--ash)}
.offer-list{list-style:none;display:grid;gap:10px;padding:18px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  font-size:var(--t-sm);color:var(--graphite)}
.offer-list li{padding-left:24px;position:relative}
.offer-list li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:var(--r-pill);background:var(--blue)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat}
.offer-list b{color:var(--carbon);font-weight:600}
.offer-safe{font-size:var(--t-xs);color:var(--ash);text-align:center;letter-spacing:-.022em}
#pricing .sub{margin-top:10px;color:var(--ash)}

/* ── Lieferstrecke: drei Kreise, gestrichelte Verbindung ──────────────── */
.band{padding:clamp(48px,6vw,72px) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.band-title{font-family:var(--sf-display);font-weight:600;font-size:var(--t-h2);line-height:1.18;letter-spacing:.007em;text-align:center;max-width:24ch;margin:0 auto}
.band-title span{color:var(--ash);font-weight:400}
.flow{list-style:none;display:flex;align-items:flex-start;justify-content:center;margin:clamp(28px,4vw,44px) 0 0}
.fl-step{flex:0 1 190px;display:grid;justify-items:center;text-align:center;gap:2px}
.fl-dot{display:grid;place-items:center;width:64px;height:64px;margin-bottom:14px;border-radius:var(--r-pill);background:var(--frost);color:var(--carbon)}
.fl-dot svg{width:26px;height:26px}
.fl-step b{font-size:var(--t-sm);font-weight:600}
.fl-step span{font-size:var(--t-sm);color:var(--ash)}
.fl-link{flex:0 1 120px;height:1px;margin-top:32px;min-width:24px;
  background:repeating-linear-gradient(to right,var(--hairline) 0 8px,transparent 8px 16px)}
@media (max-width:560px){
  .flow{flex-direction:column;align-items:flex-start;padding-inline:calc(50% - 140px)}
  .fl-step{flex:none;grid-template-columns:64px 1fr;justify-items:start;text-align:left;align-items:center;gap:0 16px;width:min(280px,100%)}
  .fl-dot{grid-row:span 2;margin-bottom:0}
  /* min-width aus der Breitbild-Regel zuruecknehmen, sonst ist die Verbindung 24 px breit */
  .fl-link{flex:none;width:1px;min-width:0;height:26px;align-self:flex-start;margin:6px 0 6px 31px;
    background:repeating-linear-gradient(to bottom,var(--hairline) 0 6px,transparent 6px 12px)}
}

/* ── Fragen ───────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--hairline)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 0;text-align:left;font-size:var(--t-body);font-weight:400;letter-spacing:-.016em}
.faq-q i{flex:0 0 auto;width:13px;height:13px;position:relative}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;background:var(--link);transition:transform .22s var(--ease)}
.faq-q i::before{left:0;top:6px;width:13px;height:1.5px}
.faq-q i::after{left:6px;top:0;width:1.5px;height:13px}
.faq-item.open .faq-q i::after{transform:scaleY(0)}
.faq-a{height:0;overflow:hidden;transition:height .28s var(--ease)}
.faq-a p{padding-bottom:22px;font-size:var(--t-body);color:var(--ash);max-width:62ch}

/* ── Kundenstimmen: rendert nur, wenn data/reviews.json echte Eintraege hat ── */
.rating-pill{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:5px 14px 5px 6px;
  border:1px solid var(--hairline);border-radius:var(--r-pill);background:var(--white);font-size:var(--t-sm);color:var(--ash)}
.rating-pill strong{color:var(--carbon);font-weight:600}
.av-row{display:flex}
.av-row .av{margin-right:-6px}
.av{width:28px;height:28px;border-radius:var(--r-pill);object-fit:cover;box-shadow:0 0 0 2px var(--white);background:var(--pebble)}
.av-fb{display:grid;place-items:center;font-size:.625rem;font-weight:600;color:var(--graphite)}
.stars{display:inline-flex;gap:3px}
.stars svg{width:14px;height:14px;fill:var(--pebble)}
.stars svg.on{fill:var(--star)}
.askreview{margin-top:26px;padding:18px;border:1px solid var(--hairline);border-radius:var(--r-card);display:grid;gap:4px;justify-items:start}
.askreview b{font-size:var(--t-sm);font-weight:600}
.askreview span{font-size:var(--t-sm);color:var(--ash)}
.askreview .pill{margin-top:10px}

/* ── Zahlarten als graue Wortmarken ───────────────────────────────────── */
.paymarks{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.paymarks li{font-size:var(--t-xs);font-weight:600;letter-spacing:.01em;color:var(--graphite);
  border:1px solid var(--hairline);border-radius:6px;padding:4px 9px;background:var(--frost)}
.foot-pay{margin-top:26px}
.co-pay-logos{margin-top:22px}
.co-pay-logos .paylogos{justify-content:flex-start}
.foot-pay .paylogos{justify-content:flex-start}

/* ── Unterseiten ──────────────────────────────────────────────────────── */
.pagehead{background:var(--frost);padding:clamp(48px,7vw,80px) 0 clamp(32px,5vw,56px)}
.pagehead .display{max-width:18ch;margin:8px auto 0}
.pagehead .sub{max-width:40ch;margin:12px auto 0;color:var(--ash)}
.prose{padding-top:clamp(40px,6vw,64px)}
.prose h2{font-family:var(--sf-display);font-weight:600;font-size:var(--t-h2);line-height:1.18;letter-spacing:.007em;margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--t-body);font-weight:600;margin:24px 0 8px}
.prose p{margin-bottom:14px;color:var(--graphite);max-width:68ch}
.prose p b{color:var(--carbon)}
.prose ol,.prose ul{margin:0 0 14px 22px;color:var(--graphite);max-width:68ch}
.prose li{margin-bottom:6px}
.prose a{color:var(--link)}
.prose a:hover{text-decoration:underline}
.prose .lead{color:var(--carbon);font-size:var(--t-lead);line-height:1.35;max-width:52ch;margin-bottom:8px}
.spec-table{margin:16px 0 20px;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden}
.spec-table table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.spec-table th{text-align:left;font-weight:600;font-size:var(--t-sm);color:var(--ash);padding:12px 16px;background:var(--frost);border-bottom:1px solid var(--hairline)}
.spec-table td{padding:12px 16px;border-bottom:1px solid var(--frost);font-variant-numeric:tabular-nums}
.spec-table tr:last-child td{border-bottom:0}
/* Unuebersehbar, damit nichts mit Platzhalter live geht */
.todo{background:#fff8dc;border:1px solid #e6c85a;border-radius:var(--r-card);padding:12px 14px;font-size:var(--t-sm);color:#7a5a00 !important;max-width:none}

/* ── Raster: Motiv vorn, Geraet beim Ueberfahren ──────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,56px) clamp(16px,2vw,24px)}
.card{display:flex;flex-direction:column;text-align:center;width:100%;min-width:0}
.card-shot{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--frost)}
.card-art,.card-device{position:absolute;inset:0;display:block}
.card-art img,.card-device img{width:100%;height:100%;object-fit:cover;display:block;background:var(--frost);transition:opacity .25s}
.card-device{opacity:0;transition:opacity .35s var(--ease)}
@media (hover:hover){.card-shot:hover .card-device{opacity:1}}
.card-meta{padding:16px 8px 0;display:grid;gap:2px}
.card-series{font-size:var(--t-sm);color:var(--ash);letter-spacing:-.016em}
.card-title{font-size:var(--t-lead);font-weight:600;letter-spacing:-.005em}
.card-title:hover{color:var(--signal)}
.grid-related{margin-top:0}
@media (min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}

/* ── Serien-Chips ─────────────────────────────────────────────────────── */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.chip{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--hairline);font-size:var(--t-sm);color:var(--ash);
  min-height:38px;display:inline-flex;align-items:center;gap:6px}
.chip small{font-size:var(--t-xs);color:var(--mist)}
.chip:hover{color:var(--carbon)}
.chip[aria-pressed=true]{color:#fff;background:var(--carbon);border-color:var(--carbon)}
.chip[aria-pressed=true] small{color:#fff;opacity:.7}

/* ── Produktseite ─────────────────────────────────────────────────────── */
.crumbs{display:flex;gap:10px;align-items:center;padding:18px var(--pad) 0;font-size:var(--t-sm);color:var(--ash)}
.crumbs a:hover{color:var(--carbon)}
.crumbs span[aria-hidden]{color:var(--mist)}
.crumbs [aria-current]{color:var(--carbon)}
.pd{padding:clamp(20px,3vw,36px) 0 clamp(40px,5vw,64px)}
.pd-grid{display:grid;gap:32px}
.pd-stage{margin:0;background:var(--frost);border-radius:var(--r-card);overflow:hidden;display:grid;place-items:center;aspect-ratio:16/10;position:relative}
.pd-stage picture{width:100%;height:100%;display:grid;place-items:center}
.pd-stage img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pd-stage picture[data-view=phone] img{height:100%;width:auto}
.pd-note{position:absolute;left:12px;bottom:12px;font-size:var(--t-xs);color:#fff;
  background:rgba(17,17,19,.6);padding:4px 9px;border-radius:6px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pd-tabs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.pd-tabs [role=tab]{padding:9px 14px;border-radius:var(--r-pill);font-size:var(--t-sm);color:var(--ash);border:1px solid var(--hairline);min-height:38px}
.pd-tabs [role=tab][aria-selected=true]{color:var(--carbon);border-color:var(--carbon)}
.pd-tabs [role=tab]:hover{color:var(--carbon)}
.pd-buy{display:grid;gap:14px;align-content:start}
.pd-buy .eyebrow{color:var(--signal)}
.pd-line{font-size:var(--t-lead);font-weight:300;color:var(--graphite);margin-top:-6px}
.pd-text{font-size:var(--t-sm);color:var(--ash);line-height:1.5}
.pd-offer{display:grid;gap:12px;padding:20px;background:var(--ice);border:1px solid var(--hairline);border-radius:14px;margin-top:6px}
.pd-in{font-size:var(--t-sm);color:var(--ash)}
.pd-in b{color:var(--carbon);font-weight:600}
.pd-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pd-price b{font-family:var(--sf-display);font-size:var(--t-h2);font-weight:600;font-variant-numeric:tabular-nums}
.pd-price span{font-size:var(--t-sm);color:var(--ash)}
.pd-facts{list-style:none;margin:8px 0 0;display:grid;border-top:1px solid var(--hairline)}
.pd-facts li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:var(--t-sm)}
.pd-facts b{font-weight:600}
.pd-facts span{color:var(--ash);font-variant-numeric:tabular-nums}
.pd-more{border-bottom:1px solid var(--hairline)}
.pd-more summary{cursor:pointer;padding:14px 0;font-size:var(--t-body);list-style:none;display:flex;justify-content:space-between;gap:12px}
.pd-more summary::-webkit-details-marker{display:none}
.pd-more summary::after{content:"+";color:var(--ash)}
.pd-more[open] summary::after{content:"\2212"}
.pd-more p{padding:0 0 16px;font-size:var(--t-sm);color:var(--graphite);line-height:1.5}
.pd-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:8px 40px;border-top:1px solid var(--hairline)}
.pd-nav a{display:grid;gap:2px;padding-top:18px}
.pd-nav small{font-size:var(--t-xs);color:var(--ash)}
.pd-nav b{font-size:var(--t-body);font-weight:600}
.pd-next{text-align:right}
.pd-nav a:hover b{color:var(--signal)}
@media (min-width:900px){
  .pd-grid{grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:clamp(32px,4vw,64px);align-items:start}
  .pd-buy{position:sticky;top:calc(var(--nav-h) + 24px)}
}
@media (max-width:600px){.pd-note{font-size:.6875rem;left:8px;bottom:8px;right:8px;text-align:center}}

/* ── Kasse und Danke ──────────────────────────────────────────────────── */
.co-grid{display:grid;gap:44px}
.co-summary{background:var(--frost);border-radius:18px;padding:24px}
.co-summary .h3{margin-top:4px}
.co-thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:14px 0 18px}
.co-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--white) center/cover;border-radius:4px}
.co-lines{display:grid;gap:9px;border-top:1px solid var(--hairline);padding-top:14px}
.co-line{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm);color:var(--graphite)}
.co-line.total{font-family:var(--sf-display);font-weight:600;font-size:var(--t-lead);color:var(--carbon);border-top:1px solid var(--hairline);padding-top:11px;margin-top:2px}
.co-safe{list-style:none;display:grid;gap:7px;margin-top:18px;font-size:var(--t-sm);color:var(--ash)}
.co-safe li{padding-left:18px;position:relative}
.co-safe li::before{content:"\2713";position:absolute;left:0;color:var(--ok)}
.co-summary .link-dark{display:inline-block;margin-top:18px}
.stepper{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:40px}
.step{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 10px;align-items:center;font-size:var(--t-sm);color:var(--mist)}
.step i{grid-row:span 2;width:9px;height:9px;border-radius:var(--r-pill);background:var(--pebble)}
.step.now i{background:var(--blue)}.step.done i{background:var(--graphite)}
.step b{font-weight:600;color:var(--graphite)}.step.now b{color:var(--carbon)}
.step small{font-size:var(--t-xs)}
.trust-strip{display:grid;gap:16px;margin-top:34px;border-top:1px solid var(--hairline);padding-top:24px}
.trust-strip div{display:grid;gap:3px}
.trust-strip b{font-size:var(--t-sm);font-weight:600}
.trust-strip span{font-size:var(--t-sm);color:var(--ash)}
.pay-load{display:grid;justify-items:center;gap:14px;padding:44px 0;color:var(--ash);font-size:var(--t-sm)}
.pay-load .mark{width:20px;color:var(--carbon)}
.pay-track{display:block;width:150px;height:2px;background:var(--pebble);overflow:hidden;border-radius:2px}
.pay-track i{display:block;width:40%;height:100%;background:var(--blue);animation:payslide 1.2s infinite var(--ease)}
@keyframes payslide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.pay-form{display:grid;gap:16px}
.or{display:flex;align-items:center;gap:14px;color:var(--ash);font-size:var(--t-xs)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--hairline)}
.pay-err{font-size:var(--t-sm);color:var(--warn)}
.pay-safe{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--frost);font-size:var(--t-sm);color:var(--graphite)}
.pay-safe svg{flex:0 0 auto;margin-top:2px;color:var(--ash)}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-sm);line-height:1.4;color:var(--graphite);cursor:pointer}
.consent input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--blue)}
.pay-form .footnote{text-align:center}
.field{display:grid;gap:6px}
.field>span{font-size:var(--t-sm);font-weight:600;color:var(--graphite)}
.field input{border:1px solid var(--hairline);border-radius:var(--r-card);padding:13px 14px;font:inherit;font-size:var(--t-body);background:var(--frost);color:var(--carbon);width:100%;color-scheme:light}
.field input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.15)}
.field small{font-size:var(--t-xs);color:var(--ash)}
.size-pick{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 14px}
.size-pick button{padding:8px 16px;font-size:var(--t-sm);border-radius:var(--r-pill);border:1px solid var(--hairline);color:var(--ash);min-height:38px}
.size-pick button[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
.dl-list{display:grid;gap:1px;background:var(--hairline);border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hairline)}
.dl{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;background:var(--white)}
.dl:hover{background:var(--frost)}
.dl span{display:grid;gap:2px;min-width:0}
.dl b{font-weight:600;font-size:var(--t-sm)}
.dl span span{font-size:var(--t-xs);color:var(--ash)}
.dl i{font-style:normal;font-size:var(--t-sm);color:var(--link);white-space:nowrap}
.timeline{list-style:none;display:grid;gap:14px;margin:14px 0}
.timeline li{display:flex;gap:11px;align-items:flex-start;font-size:var(--t-sm)}
.timeline .dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--blue);margin-top:6px;flex:0 0 auto}
.timeline .tl{display:grid;gap:1px}
.timeline .tl b{font-weight:600}
.timeline .tl span{font-size:var(--t-xs);color:var(--ash)}
@media (min-width:600px){
  :root{--pad:32px}
  .trust-strip{grid-template-columns:repeat(3,1fr);gap:24px}
}
@media (min-width:960px){
  :root{--gap:88px}
  .co-grid{grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
  .co-summary{position:sticky;top:calc(var(--nav-h) + 24px)}
}

/* ── Fusszeile ────────────────────────────────────────────────────────── */
.foot{background:var(--frost);padding:32px 0 calc(var(--safe-b) + 96px);font-size:var(--t-xs);line-height:1.33;letter-spacing:-.022em;color:var(--ash)}
.foot .in{border-top:1px solid var(--hairline);padding-top:28px}
.foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 20px;max-width:520px}
.foot-cols div{display:grid;gap:8px;align-content:start}
.foot-cols b{font-size:var(--t-xs);font-weight:600;color:var(--carbon)}
.foot-cols a{font-size:var(--t-xs);color:var(--ash)}
.foot-cols a:hover{color:var(--carbon);text-decoration:underline}
.foot-fine{margin-top:28px;padding-top:18px;border-top:1px solid var(--hairline);font-size:var(--t-xs)}

@media (min-width:1000px){.foot{padding-bottom:calc(var(--safe-b) + 32px)}}

/* ── Kaufleiste am unteren Rand: nur auf schmalen Schirmen, oben steht sonst der Knopf ── */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:50;border-top:1px solid var(--hairline);box-shadow:0 -8px 30px rgba(0,0,0,.06);
  padding:10px var(--pad) calc(var(--safe-b) + 10px);transform:translateY(110%);transition:transform .3s var(--ease)}
.buybar.on{transform:none}
.buybar-in{max-width:var(--page);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.buybar-txt{display:grid;gap:1px;min-width:0}
.buybar-txt b{font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar-txt span{font-size:var(--t-xs);color:var(--ash)}
.buybar .pill{flex:0 0 auto;white-space:nowrap}
@media (min-width:1000px){.buybar{display:none}}

/* ── Meldung ──────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 26px);z-index:70;transform:translate(-50%,10px);
  opacity:0;pointer-events:none;border-radius:var(--r-pill);padding:12px 22px;font-size:var(--t-sm);
  background:rgba(17,17,19,.92);color:#fff;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:opacity .22s,transform .3s var(--ease);max-width:calc(100vw - 40px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── Bewegung ─────────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
.hero.rise{opacity:1;transform:none}   /* der Auftakt steht schon im Bild, wenn die Seite kommt */
.card.rise{transition-delay:calc(var(--i,0) * 60ms)}
.sheet-item.rise{transition-delay:calc(var(--i,0) * 40ms)}
@media (pointer:coarse){.pill.sm{min-height:44px;padding:0 20px}.faq-q{padding:20px 0}}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation:none !important}
  .rise{opacity:1;transform:none}
}


/* ═══════════ Produktseite (/) ═══════════ */
.sec.soft{background:var(--frost)}
.sec-head{max-width:40rem;margin:0 auto clamp(24px,4vw,40px)}
.tag{font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.4;color:var(--ash);max-width:34em;margin:14px auto 0}
.pd-top{padding:clamp(16px,2.5vw,36px) 0 clamp(40px,5vw,64px)}
.pdp-grid{display:grid;gap:28px}
@media (min-width:900px){
  .pdp-grid{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:clamp(32px,4vw,64px);align-items:start}
  .gallery{position:sticky;top:calc(var(--nav-h) + 16px)}
}

/* Galerie: Schnappen, Punkte, Pfeile */
.gallery{position:relative}
.g-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:16px;background:#e9e9eb;
  aspect-ratio:4/5}
.g-track::-webkit-scrollbar{display:none}
.g-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;display:block;overflow:hidden}
.g-slide img{width:100%;height:100%;object-fit:cover;display:block}
.g-slide.mac img{object-fit:cover;object-position:center 60%}
.g-slide picture{display:contents}
.g-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);
  box-shadow:0 2px 10px rgba(0,0,0,.12);display:grid;place-items:center;color:var(--carbon);opacity:0;transition:opacity .2s}
.g-arrow.prev{left:12px}.g-arrow.next{right:12px}
.g-arrow svg{width:20px;height:20px}
.gallery:hover .g-arrow,.g-arrow:focus-visible{opacity:1}
@media (hover:none){.g-arrow{display:none}}
.g-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.g-count{position:absolute;right:12px;top:12px;font-size:var(--t-xs);font-weight:600;color:#fff;background:rgba(0,0,0,.55);border-radius:var(--r-pill);padding:4px 10px;font-variant-numeric:tabular-nums}
.g-count:empty{display:none}
.g-dots button{width:8px;height:8px;border-radius:var(--r-pill);background:var(--pebble);padding:0;transition:background .2s,transform .2s}
.g-dots button[aria-selected=true]{background:var(--carbon);transform:scale(1.25)}
@media (min-width:900px){.g-track{aspect-ratio:1/1}.g-slide.phone img{object-position:center 88%}}

/* Kaufkasten */
.buybox{display:grid;gap:16px;align-content:start}
.rating{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ash);justify-self:start}
.rating b{color:var(--carbon);font-weight:600}
.rating .stars svg{width:15px;height:15px}
.pdp-title{font-family:var(--sf-display);font-weight:700;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.1;letter-spacing:-.02em}
.pdp-title span{display:block;font-weight:400;color:var(--ash);font-size:.62em;margin-top:6px;letter-spacing:-.01em}
.pdp-sub{font-size:var(--t-body);color:var(--ash);line-height:1.45;margin-top:-6px}
.pdp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:-2px}
.pdp-price b{font-family:var(--sf-display);font-weight:700;font-size:clamp(1.75rem,3.2vw,2.25rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pdp-price s{font-size:var(--t-body);color:var(--mist)}
.pdp-price em{font-style:normal;font-size:var(--t-xs);font-weight:600;color:var(--ok);background:rgba(31,157,77,.1);border-radius:var(--r-pill);padding:4px 10px;align-self:center}
.benefits{list-style:none;display:grid;gap:7px;font-size:var(--t-sm);color:var(--graphite);padding:14px 0 16px;border-top:1px solid var(--hairline)}
.benefits li{padding-left:24px;position:relative}
.benefits li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:var(--r-pill);background:var(--ok)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat}

/* Paketwahl: drei Reihen, das Gesamtpaket ist vorgewaehlt und traegt den Vergleichspreis */
.packs{border:0;display:grid;gap:10px}
.packs legend{font-size:var(--t-sm);font-weight:600;margin-bottom:10px}
.pack{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;
  background:var(--frost);border:2px solid transparent;border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s}
.pack input{position:absolute;opacity:0;pointer-events:none}
.pack:hover{background:#efeff1}
.pack:has(input:checked){border-color:var(--carbon);background:#fff}
.pack:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.pack-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:var(--t-xs);font-weight:700;color:#fff;background:var(--buy);
  border-radius:var(--r-pill);padding:3px 11px;white-space:nowrap}
.pack-ico{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--hairline);display:grid;place-items:center;color:var(--carbon)}
.pack:has(input:checked) .pack-ico{background:var(--frost)}
.pack-ico svg{width:22px;height:22px}
.pack-txt{display:grid;gap:2px;min-width:0}
.pack-txt b{font-size:var(--t-body);font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pack-txt em{font-style:normal;font-size:.6875rem;font-weight:700;color:#fff;background:var(--buy);border-radius:var(--r-pill);padding:2px 8px}
.pack-txt small{font-size:var(--t-sm);color:var(--ash)}
.pack-price{display:grid;justify-items:end;gap:1px;font-variant-numeric:tabular-nums}
.pack-price b{font-size:var(--t-lead);font-weight:700}
.pack-price s{font-size:var(--t-xs);color:var(--mist)}

/* Knoepfe: Kaufen schwarz, Apple Pay schwarz mit Logo */
.buy-actions{display:grid;gap:10px}
.btn-buy,.btn-apple{display:flex;align-items:center;justify-content:center;gap:6px;min-height:54px;border-radius:12px;
  font-size:var(--t-body);font-weight:600;letter-spacing:-.01em;transition:transform .15s var(--ease),background .2s,box-shadow .2s}
.btn-buy{background:var(--buy);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.14)}
.btn-buy:hover{background:#000;transform:translateY(-1px)}
.btn-buy:active,.btn-apple:active{transform:translateY(0)}
.btn-apple{background:#000;color:#fff}
.btn-apple svg{width:22px;height:22px}
.btn-apple span{font-family:var(--sf-display);font-size:1.1875rem;font-weight:500}
.narrow-act{max-width:360px;margin:24px auto 0}
.buy-safe{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t-xs);color:var(--ash);letter-spacing:-.022em}
.buy-safe img{width:30px;height:30px}
.paylogos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.paylogos li{width:52px;height:34px;border:1px solid var(--hairline);border-radius:6px;background:#fff;overflow:hidden;display:grid;place-items:center;padding:4px}
.paylogos img{width:auto;height:auto;max-width:100%;max-height:100%;display:block}

/* Lieferstrecke im Kaufkasten */
.delivery{padding:18px 0 6px;border-top:1px solid var(--hairline)}
.delivery-head{font-size:var(--t-sm);color:var(--graphite);text-align:center}
.delivery-head b{color:var(--carbon);font-weight:600}
.delivery .flow{margin-top:16px}
.delivery .fl-step{flex:0 1 120px}
.delivery .fl-dot{width:52px;height:52px;margin-bottom:10px;background:var(--frost)}
.delivery .fl-dot svg{width:22px;height:22px}
.delivery .fl-link{flex:0 1 60px;margin-top:26px;background:repeating-linear-gradient(to right,var(--pebble) 0 8px,transparent 8px 16px)}
.delivery .fl-step span{font-size:var(--t-xs)}
@media (max-width:560px){.delivery .flow{flex-direction:row;padding:0;align-items:flex-start}.delivery .fl-step{grid-template-columns:1fr;justify-items:center;text-align:center;width:auto}.delivery .fl-dot{grid-row:auto;margin-bottom:10px}
  .delivery .fl-link{width:auto;height:1px;flex:0 1 40px;min-width:16px;margin:26px 0 0;align-self:flex-start;background:repeating-linear-gradient(to right,var(--pebble) 0 8px,transparent 8px 16px)}}
.trust-pill{display:inline-flex;align-items:center;padding:4px;border:1px solid #d1d5db;border-radius:var(--r-pill);background:#fff;font-size:var(--t-sm);color:var(--carbon);justify-self:start}
.trust-pill .av-row{display:flex}
.trust-pill .av{width:30px;height:30px;border:3px solid #fff;box-shadow:none;margin:0}
.trust-pill .av+.av{margin-left:-8px}
.trust-pill p{margin:0 12px 0 4px}

/* Vorteile: drei Bilder, eine Zeile */
.feat{display:grid;gap:28px}
.feat-item{display:grid;gap:10px;align-content:start}
.feat-item picture{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--hairline)}
.feat-item img{width:100%;height:100%;object-fit:cover;display:block}
.feat-item img.feat-phone{object-fit:contain;padding:14px 0 0;background:#fff}
.feat-item h3{font-size:var(--t-lead);font-weight:600;margin-top:6px}
.feat-item p{font-size:var(--t-sm);color:var(--ash);line-height:1.5}
@media (min-width:760px){.feat{grid-template-columns:repeat(3,1fr);gap:24px}}

/* Karussell aller Motive */
.carousel-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,3vw,32px)}
.carousel-nav{display:flex;align-items:center;gap:10px}
.arrow{width:42px;height:42px;border-radius:var(--r-pill);background:var(--frost);display:grid;place-items:center;color:var(--carbon);transition:background .2s}
.arrow:hover{background:var(--pebble)}
.arrow svg{width:20px;height:20px}
.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  padding:0 max(var(--pad),calc((100% - var(--page)) / 2 + var(--pad))) 8px}
.carousel::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;width:min(56vw,224px);scroll-snap-align:start;border-radius:clamp(20px,7%,30px);overflow:hidden;position:relative;
  background:var(--frost);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.1)}
.slide img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)}
.slide:hover img{transform:scale(1.02)}
.slide-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 16px;display:grid;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff;font-size:var(--t-sm)}
.slide-cap b{font-weight:600}.slide-cap small{font-size:var(--t-xs);opacity:.75}

/* Bewertungen: schwarze Karten, Bild oben laeuft in Schwarz aus, Zitat, Name, Zeile in Verlauf */
.rating-sum{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:var(--t-sm);color:var(--ash)}
.rating-sum b{color:var(--carbon)}
/* Mobil: eine Reihe zum Wischen, Karten fast bildschirmbreit; ab 700px drei nebeneinander */
.reviews{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px var(--pad) 12px;margin:0 calc(-1 * var(--pad))}
.reviews::-webkit-scrollbar{display:none}
.reviews .review{flex:0 0 min(82vw,340px);scroll-snap-align:center}
.review{margin:0;background:#000;color:#fff;border-radius:18px;overflow:hidden;display:grid;align-content:start;max-width:340px;width:100%;justify-self:center}
.review-img{position:relative;height:250px;overflow:hidden}
.review-img img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block;transition:transform .35s var(--ease)}
.review:hover .review-img img{transform:scale(1.05)}
.review-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(to top,#000,transparent);pointer-events:none}
.review-body{padding:2px 18px 18px;display:grid;gap:12px}
.review blockquote{margin:0;font-size:var(--t-body);font-weight:500;line-height:1.5;color:#fff;padding-bottom:16px;border-bottom:1px solid #4b5563}
.review figcaption{display:grid;gap:4px}
.review figcaption b{font-size:var(--t-body);font-weight:400;color:#fff}
.review-meta{font-size:var(--t-sm);font-weight:500;background:linear-gradient(90deg,#8B5CF6,#E0724A,#9938CA);-webkit-background-clip:text;background-clip:text;color:transparent}
.review .stars{margin-top:4px}
.review .stars svg{fill:#3a3a3c}
.review .stars svg.on{fill:var(--star)}
@media (min-width:700px){.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:center;overflow:visible;padding:0;margin:0;gap:20px}.reviews .review{flex:none}}

/* Fragen auf der Produktseite: Frage fett, wie im Laden */
#faq .faq-q{font-weight:600}
.closer{padding-bottom:calc(var(--gap) + 40px)}

/* Produktleiste unter der Kopfzeile (Name links, Preis + Kaufen rechts), erst nach dem Kaufkasten */
.subnav{position:sticky;top:var(--nav-h);z-index:43;border-bottom:1px solid var(--hairline);max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.subnav.on{max-height:60px}
.subnav-in{max-width:var(--page);margin:0 auto;padding:0 var(--pad);height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.subnav-name{font-size:var(--t-body);font-weight:600;letter-spacing:-.01em}
.subnav-right{display:flex;align-items:center;gap:14px}
.subnav-price{font-size:var(--t-sm);color:var(--ash)}
@media (max-width:999px){.subnav{display:none}}
/* Abschnittstitel auf der Produktseite: Ladenmass, nicht Plakat */
.pdp .h-lg{font-size:clamp(1.625rem,3.2vw,2.375rem);line-height:1.12}

/* Vergleichstabelle: unsere Spalte als schwarze Karte, die andere grau */
.cmp{position:relative;display:grid;max-width:760px;margin:0 auto}
.cmp-row{display:grid;grid-template-columns:1fr 92px 92px;align-items:stretch;gap:0 10px;min-height:60px;font-size:var(--t-sm);font-weight:600}
.cmp-row>span{display:grid;align-items:center;border-bottom:1px solid var(--hairline)}
.cmp-row:last-child>span,.cmp-head>span{border-bottom:0}
.cmp-row>span.cmp-us{border-bottom:0}
.cmp-row>span:first-child{padding:12px 0;padding-right:8px}
.cmp-row>span:not(:first-child){text-align:center;color:var(--ash);font-weight:600}
.cmp-head{border-bottom:0;min-height:56px}
.cmp-head span{font-size:var(--t-sm)}
.cmp-us{position:relative;color:#fff !important;height:100%;display:grid;place-items:center;background:var(--buy)}
.cmp-head .cmp-us{border-radius:16px 16px 0 0;padding-top:4px}
.cmp-row:last-child .cmp-us{border-radius:0 0 16px 16px}
.cmp i{display:inline-block;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
.cmp i.no{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");color:var(--carbon)}
@media (max-width:480px){.cmp-row{grid-template-columns:1fr 64px 64px;font-size:.8125rem}}

/* Google-Bewertungsabzeichen im Kaufkasten — auf dem Handy gross und volle Breite */
.gbadge{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;
  padding:12px 16px;border:1px solid var(--hairline);border-radius:12px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);justify-self:start}
.gbadge-logo{grid-row:span 2;width:48px;height:48px}
.gbadge-logo svg{width:100%;height:100%;display:block}
.gbadge-title{display:block;font-size:var(--t-body);color:var(--carbon)}
.gbadge-score{display:flex;align-items:center;gap:8px;margin-top:2px}
.gbadge-score b{font-size:1.5rem;font-weight:700;color:#e37400;line-height:1}
.gbadge-score .stars svg{width:20px;height:20px;fill:var(--pebble)}
.gbadge-score .stars svg.on{fill:#e37400}
.gbadge-foot{grid-column:1 / -1;margin-top:8px;padding-top:8px;border-top:1px solid var(--hairline);font-size:var(--t-sm);color:var(--carbon)}
@media (max-width:899px){
  .gbadge{justify-self:stretch;padding:14px 16px}
  .gbadge-logo{width:56px;height:56px}
  .gbadge-score b{font-size:1.75rem}
  .gbadge-score .stars svg{width:24px;height:24px}
}

/* Uebersicht aller Motive: iPhone-Mockup als Kachel, beim Ueberfahren das MacBook */
.overview{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:600px){.overview{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:960px){.overview{grid-template-columns:repeat(4,1fr);gap:18px}}
.ov{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#e9e9eb}
.ov picture{position:absolute;inset:0;display:block}
.ov img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s var(--ease),transform .6s var(--ease)}
.ov-mac{opacity:0}
/* Das Studiofoto hat viel Luft ums Telefon — die Kachel zoomt auf das Geraet */
.ov-phone img{transform:scale(1.32);transform-origin:50% 58%}
.ov-mac img{object-position:center 62%;transform:scale(1.25);transform-origin:50% 55%}
@media (hover:hover){.ov:hover .ov-mac{opacity:1}}
.ov-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;display:grid;text-align:center;font-size:var(--t-sm);color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55))}
.ov-cap b{font-weight:600}.ov-cap small{font-size:var(--t-xs);opacity:.8}

/* ── Einfuehrungspreis: schmaler Balken ganz oben, laeuft auf ein echtes Datum ──────── */
.launch{background:var(--buy);color:#fff;text-align:center;font-size:var(--t-sm);padding:calc(var(--safe-t) + 8px) var(--pad) 8px;letter-spacing:-.01em}
.launch-in{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:baseline}
.launch b{font-weight:600}
.launch-sep{opacity:.45}
#launchLeft{font-variant-numeric:tabular-nums;font-weight:600}
/* Ersparnis leuchtet leicht */
.pdp-price em.glow{background:linear-gradient(135deg,#1a1a1c,#3a3a3e);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.18);animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 6px 22px rgba(0,0,0,.32)}}
/* Letzter Kauf, Anteil — nur mit echten Zahlen */
.lastbuy{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ash);margin-top:-8px}
.lastbuy i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--ok);box-shadow:0 0 0 3px rgba(31,157,77,.18)}
.pack-share{font-size:var(--t-sm);color:var(--ash);margin-top:-6px}
/* Drei Schritte direkt ueber dem Knopf */
.micro{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:10px 12px;border:1px solid var(--hairline);border-radius:12px;font-size:var(--t-xs);color:var(--graphite);position:relative}
.micro li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.micro li b{width:20px;height:20px;border-radius:var(--r-pill);background:var(--carbon);color:#fff;font-size:.6875rem;display:grid;place-items:center}
.micro li+li::before{content:"\2192";color:var(--pebble);margin-right:6px}
/* Textur-Slide: langsamer Zoom ueber die Farbe (Ken Burns), nichts laedt, nichts ruckelt */
.g-slide.texture{position:relative}
.g-slide.texture img{animation:kenburns 9s ease-in-out infinite alternate;transform-origin:60% 45%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.35)}}
.g-tag{position:absolute;left:12px;bottom:12px;font-size:var(--t-xs);font-weight:600;color:#fff;background:rgba(0,0,0,.55);border-radius:var(--r-pill);padding:5px 11px}
@media (prefers-reduced-motion:reduce){.g-slide.texture img,.pdp-price em.glow{animation:none}}
/* Order-Bump an der Kasse: Checkbox direkt ueber dem Zahlknopf */
.bump{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border:2px dashed var(--pebble);border-radius:12px;background:#fffbe6;cursor:pointer}
.bump:has(input:checked){border-style:solid;border-color:var(--carbon);background:#fff}
.bump input{width:20px;height:20px;accent-color:var(--buy)}
.bump-txt{display:grid;gap:2px;font-size:var(--t-sm);color:var(--graphite)}
.bump-txt b{color:var(--carbon);font-weight:600}
.bump-price{font-weight:700;white-space:nowrap}
@media (max-width:480px){.launch-then,.launch-sep:last-of-type{display:none}}
/* Apple Pay direkt im Kaufkasten */
.express-wrap{display:grid;gap:10px}
.consent.mini{font-size:var(--t-xs);color:var(--ash);line-height:1.35}
.consent.mini input{width:16px;height:16px;margin-top:0}
.consent.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* Vorher/Nachher in der Galerie */
.g-slide.compare{position:relative;background:#111}
.g-slide.compare picture{display:block;position:absolute;inset:0}
.g-slide.compare img{width:100%;height:100%;object-fit:cover}
.cmp-lo{clip-path:inset(0 0 0 50%)}
.cmp-lbl{position:absolute;bottom:14px;font-size:var(--t-xs);font-weight:600;color:#fff;background:rgba(0,0,0,.6);border-radius:var(--r-pill);padding:5px 11px;pointer-events:none}
.cmp-lbl.hi{left:12px}.cmp-lbl.lo{right:12px}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;touch-action:pan-y}
.cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.cmp-handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:var(--r-pill);background:#fff;color:#111;display:grid;place-items:center;font-size:18px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
/* Puls unter dem Knopf */
.pulse{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t-sm);color:var(--ash)}
.pulse i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--ok);box-shadow:0 0 0 3px rgba(31,157,77,.18);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(31,157,77,.18)}50%{box-shadow:0 0 0 7px rgba(31,157,77,.06)}}
.buy-actions .consent.mini{order:0}
.btn-buy[data-wallet="apple"]::before{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.3.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8s2 .8 3.4.8c1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0 0-2.7-1-2.7-4.2zM13.9 5c.7-.9 1.2-2 1.1-3.2-1 0-2.3.7-3 1.6-.7.8-1.2 1.9-1.1 3.1 1.1.1 2.3-.6 3-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Guarantee-Zeile unter dem Knopf */
.guar{list-style:none;display:flex;justify-content:center;gap:6px 16px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--ash)}
.guar li{padding-left:16px;position:relative}
.guar li::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:700}
.guar b{color:var(--carbon);font-weight:600}
.per-painting{flex-basis:100%;font-size:var(--t-xs);color:var(--ash);margin-top:-2px}
.quote{display:grid;justify-items:center;gap:4px;text-align:center;font-size:var(--t-sm);color:var(--graphite);padding-top:4px}
.quote q{quotes:"\201C" "\201D";font-style:italic}
.quote span{font-size:var(--t-xs);color:var(--ash)}
@media (max-width:899px){.g-track{aspect-ratio:1/1}.g-slide.phone img{object-position:center 70%}}
/* Pakete: Radio-Kreis statt Icon, Preis je Motiv klein darunter */
.pack{grid-template-columns:auto 1fr auto}
.pack-radio{width:22px;height:22px;border-radius:var(--r-pill);border:2px solid var(--pebble);background:#fff;display:grid;place-items:center;transition:border-color .15s}
.pack:has(input:checked) .pack-radio{border-color:var(--carbon)}
.pack:has(input:checked) .pack-radio::after{content:"";width:11px;height:11px;border-radius:var(--r-pill);background:var(--carbon)}
.pack-price small{font-size:.6875rem;color:var(--mist);font-weight:400}
.pack.best{padding-top:18px;padding-bottom:16px}
.pack.best:has(input:checked){box-shadow:0 8px 24px rgba(0,0,0,.08)}