/* Preisseite (Stand 6, Fassung 5 „Bankkarten“, 15.10.2026): Paketnamen Basis · Plus · Premium, Karten nach Entwurf 5, Zusatzkarten als kleine Bankkarten, ganze Seite animiert und mit Maus. Vom Handy aus gebaut.
   Referenz Apple One: Name, Preis in Farbe, ein Satz, große fette Einträge mit Zeichen und Menge. Dunkle Bühne,
   Karten werden mit dem Paket edler: Sand → Weiß mit Blau → Marine mit Gold. Fassung 1 und 2 liegen in _fassung1/ und _fassung2/. */

/* ---------- gemeinsame Bausteine ---------- */
.pn-abschnitt{position:relative;padding-block:clamp(56px,8vw,120px)}
.pn-titel{margin:0 0 22px;font-size:clamp(2rem,1.45rem + 2.3vw,3.25rem);line-height:1.05;letter-spacing:-.025em}
.pn-hellblau{background:#E6EEFC}
.pn-grund{background:var(--grund)}
.pn-sand{background:#F6EEDF}

/* ---------- 1 Pakete: helle Bühne, Karten wie Bankkarten (Entwurf 5, Hugo 15.10.2026 spät: „ich mag 5“, „ja, pass leicht an“) ----------
   Basis Silber, hell und warm mit blauen Zeichen · Plus Blau-Metall · Premium Nachtblau-Schwarz mit Gold. Ein Glanz läuft mit
   (Abschnitt 7: beim Erscheinen einmal, mit der Maus, am Handy beim Scrollen). */
.pn-wahl{position:relative;padding-block:8px clamp(56px,7vw,104px);color:var(--t);
  background:radial-gradient(60% 50% at 85% 0%,rgba(1,85,253,.10),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(227,184,118,.12),transparent 70%),#EEF2F8}

/* Umschalter (Handy und Tablet): bleibt beim Lesen oben stehen; die Marke fährt unter den gewählten Knopf (C13) */
.pn-leiste{position:sticky;top:0;z-index:6;margin-inline:calc(var(--rand) * -1);padding:10px var(--rand);background:#EEF2F8}
html:not(.kopf-weg) .pn-leiste{top:var(--kopf-h)}
.pn-schalter{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:620px;padding:5px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,18,48,.1),0 10px 24px -18px rgba(1,27,79,.35)}
.pn-schalter__marke{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / 3);border-radius:13px;background:#0155FD;box-shadow:0 6px 18px rgba(1,27,79,.25);transform:translateX(calc(var(--n,1) * 100%))}
.pn-wahl[data-p="0"] .pn-schalter__marke{--n:0;background:linear-gradient(145deg,#FFFFFF,#DCE3EE)}.pn-wahl[data-p="1"] .pn-schalter__marke{--n:1}.pn-wahl[data-p="2"] .pn-schalter__marke{--n:2;background:linear-gradient(145deg,#1A2547,#050914)}
.pn-schalter button{position:relative;z-index:1;display:grid;justify-items:center;gap:2px;min-height:60px;padding:7px 4px;border:0;border-radius:13px;background:none;color:var(--marine);font:600 .9375rem/1.15 Archivo,system-ui,sans-serif;cursor:pointer}
.pn-schalter button b{font-size:1.25rem;font-weight:800}
.pn-schalter button[aria-selected="true"]{color:#fff}
.pn-wahl[data-p="0"] .pn-schalter button[aria-selected="true"]{color:var(--marine)}
.pn-wahl[data-p="2"] .pn-schalter button[aria-selected="true"]{color:#E3B876}
.pn-schalter button:focus-visible{outline:3px solid var(--marine);outline-offset:2px}
@media (max-width:359px){.pn-schalter button{padding-inline:2px;font-size:.8125rem;letter-spacing:-.01em}.pn-schalter button b{font-size:1.125rem}}

/* Karte: Farben je Paket */
.pn-pakete{margin-top:18px}
.pk-karte{--k-grund:linear-gradient(145deg,#FFFFFF 0%,#F1F3F7 50%,#DCE3EE 100%);--k-text:#0A1230;--k-text2:#3A4560;--k-akz:#0155FD;--k-preis:#011B4F;--k-linie:rgba(10,18,48,.12);
  position:relative;display:flex;flex-direction:column;overflow:hidden;padding:30px 24px 26px;border-radius:28px;background:var(--k-grund);color:var(--k-text2);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(10,18,48,.06),0 26px 54px -32px rgba(1,27,79,.45)}
.pk-karte--plus{--k-grund:linear-gradient(145deg,#4C85FF 0%,#0155FD 45%,#0038B0 100%);--k-text:#fff;--k-text2:rgba(255,255,255,.88);--k-akz:#fff;--k-preis:#fff;--k-linie:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 30px 60px -30px rgba(1,85,253,.6)}
.pk-karte--premium{--k-grund:linear-gradient(145deg,#1A2547 0%,#0B1430 50%,#050914 100%);--k-text:#fff;--k-text2:rgba(255,255,255,.74);--k-akz:#E3B876;--k-linie:rgba(227,184,118,.3);
  box-shadow:inset 0 0 0 1px rgba(227,184,118,.55),0 34px 70px -30px rgba(5,9,20,.65)}
.pk-karte[hidden]{display:none}
.pk-karte:focus-visible{outline:3px solid var(--marine);outline-offset:4px}
.pk-karte h3{margin:0;font:700 1.375rem/1.2 Archivo,system-ui,sans-serif;color:var(--k-text)}
.pk-preis{display:flex;align-items:baseline;gap:10px;margin:6px 0 0}
.pk-preis b{font:800 clamp(3.25rem,2.7rem + 2.2vw,4.25rem)/1 Archivo,system-ui,sans-serif;letter-spacing:-.04em;color:var(--k-preis)}
.pk-karte--premium .pk-preis b{background:linear-gradient(100deg,#B8862F,#F6DDA8 45%,#C9973F 70%,#F1D29C);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-preis>span{font-size:1.0625rem;font-weight:600;color:var(--k-text)}
.pk-kurz{margin:12px 0 0;font-size:1.0625rem;line-height:1.45}
.pk-inhalt{display:grid;margin:22px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid var(--k-linie)}
.pk-inhalt li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;column-gap:14px;padding:9px 0;font:700 1.125rem/1.3 Archivo,system-ui,sans-serif;color:var(--k-text)}
.pk-inhalt b{font:800 1rem/1.3 Archivo,system-ui,sans-serif;color:var(--k-akz);white-space:nowrap}
.pk-zeichen{width:26px;height:26px;color:var(--k-akz)}
.pn-lauf{margin:22px 0 0;font:700 1.0625rem/1.4 Archivo,system-ui,sans-serif;color:var(--marine)}
.pk-knopf{justify-content:center;margin-top:20px;background:var(--blau);color:#fff}
.pk-karte--plus .pk-knopf{background:#fff;color:var(--blau)!important}
.pk-karte--premium .pk-knopf{background:linear-gradient(100deg,#C9973F,#F1D29C);color:#050914!important}
.pn-unter{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin:28px 0 0;font-size:.9375rem;color:var(--t)}
.pn-unter a{color:var(--marine);font:700 1.0625rem/1.3 Archivo,system-ui,sans-serif;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.pn-wahl.pn-licht::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(1,85,253,.12),transparent 70%)}

/* Ohne JavaScript: alle drei Karten untereinander */
html:not(.js) .pn-leiste{display:none}
html:not(.js) .pn-wahl{padding-top:clamp(40px,6vw,80px)}
html:not(.js) .pn-pakete{display:grid;gap:16px;margin:0}

/* ---------- 2 In jedem Paket: vier Kacheln mit kleinem Bild ---------- */
.pn-weiss{background:#fff}
.pn-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pn-kachel{display:grid;align-content:start;gap:6px;padding:14px 14px 18px;border-radius:18px;background:#E6EEFC}
.pn-kachel:nth-child(2),.pn-kachel:nth-child(3){background:#F6EEDF}
.pn-kachel b{font:800 1.0625rem/1.25 Archivo,system-ui,sans-serif;color:var(--h)}
.pn-kachel span{font-size:.9375rem;line-height:1.45}
.pn-mini{display:block;width:100%;max-width:220px;height:auto;margin-bottom:10px;overflow:visible}
.mi-weiss{fill:#fff;stroke:rgba(10,18,48,.1);stroke-width:1.2}
.mi-akz{fill:var(--blau)}
.mi-gold{fill:#E3B876}
.mi-zeile{fill:#D5DCE9}
.mi-linie{fill:none;stroke:#0A1230;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mi-linie--duenn{stroke-width:2;stroke:var(--blau)}
.mi-text{font:600 15px Archivo,system-ui,sans-serif;fill:#0A1230}
.mi-text--klein{font-size:12px;font-weight:700}
.mi-text--akz{fill:var(--blau)}
.mi-zeichen{font:800 24px Archivo,system-ui,sans-serif;fill:#fff}
@media (max-width:359px){.pn-kacheln{grid-template-columns:minmax(0,1fr)}}

.mi-hell{fill:#CBD8F2}
.mi-unterschrift{fill:none;stroke:var(--blau);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mi-haken{fill:none;stroke:var(--marine);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3 Erst sehen, dann zahlen: drei Karten mit Bild und großem Betrag ---------- */
/* Handy: Bild links, rechts Schritt, Betrag, Satz. Rechner: drei Karten nebeneinander, Pfeil dazwischen. Die dritte Karte ist blau: ab hier kostet es. */
.pn-zahlen{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.pn-zahl{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"bild titel" "bild betrag" "bild text";column-gap:18px;align-items:start;align-content:start;padding:20px 20px 22px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(1,27,79,.06),0 18px 40px -26px rgba(1,27,79,.35)}
.pn-zahl .pn-mini{grid-area:bild;align-self:center;width:96px;margin:0}
.pn-zahl__titel{grid-area:titel;font:700 1.0625rem/1.25 Archivo,system-ui,sans-serif;color:var(--ged)}
.pn-zahl__betrag{grid-area:betrag;margin-top:2px;font:800 2.5rem/1 Archivo,system-ui,sans-serif;letter-spacing:-.03em;color:var(--blau)}
.pn-zahl__betrag small{font:700 1rem/1 Archivo,system-ui,sans-serif;letter-spacing:0}
.pn-zahl__betrag small:first-child{margin-right:6px}
.pn-zahl__betrag small:last-child{margin-left:6px}
.pn-zahl__text{grid-area:text;margin-top:8px;font-size:1rem;line-height:1.45}
.pn-zahl--geld{background:var(--blau);color:rgba(255,255,255,.9);box-shadow:0 22px 50px -24px rgba(1,85,253,.7)}
.pn-zahl--geld .pn-zahl__titel{color:rgba(255,255,255,.85)}
.pn-zahl--geld .pn-zahl__betrag{color:#fff}
.pn-zahl--geld .mi-akz{fill:var(--blau)}

/* ---------- 4 Zusatzleistungen: dunkler Abschnitt mit Karten ---------- */
.pn-dunkel{background:radial-gradient(60% 50% at 100% 0%,rgba(1,85,253,.28),transparent 70%),var(--marine);color:rgba(255,255,255,.86)}
.pn-dunkel .pn-titel{color:#fff;margin-bottom:10px}
.pn-unterzeile{margin:0 0 26px;font-size:1.0625rem;color:rgba(255,255,255,.75)}
.pn-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
/* Zusatzkarten als kleine Bankkarten (Zusatz-Entwurf 1, Hugo 15.10.2026 spät: „das 1., bau es aus“): Nachtblau wie Premium,
   Goldrand, Symbol auf einem goldenen Chip, Kontaktlos-Zeichen oben rechts, Goldpreis; Glanz und Maus in Abschnitt 7 */
.pn-extra{display:grid;align-content:start;gap:4px;overflow:hidden;padding:18px 16px 20px;border-radius:20px;color:rgba(255,255,255,.78);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3B876' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M11.5 6a8.5 8.5 0 0 1 0 12'/%3E%3Cpath d='M15 3.5a12 12 0 0 1 0 17'/%3E%3C/svg%3E") no-repeat right 14px top 18px / 22px 22px,
    linear-gradient(145deg,#1A2547 0%,#0B1430 55%,#050914 100%);
  box-shadow:inset 0 0 0 1px rgba(227,184,118,.45),inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -30px rgba(0,0,0,.75);transition:box-shadow .3s}
.pn-extra:hover{box-shadow:inset 0 0 0 1px rgba(227,184,118,.9),inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -28px rgba(227,184,118,.35)}
.pn-extra:last-child:nth-child(odd){grid-column:1 / -1}
.pn-extra__zeichen{display:grid;place-items:center;width:48px;height:38px;margin-bottom:10px;border-radius:9px;color:#0B1430;
  background:linear-gradient(135deg,#F6DDA8 0%,#E3B876 45%,#C9973F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(120,80,20,.25)}
.pn-extra__zeichen svg{width:22px;height:22px}
.pn-extra__name{font:700 1.125rem/1.25 Archivo,system-ui,sans-serif;color:#fff}
.pn-extra__preis{font:800 2rem/1.1 Archivo,system-ui,sans-serif;letter-spacing:-.02em;color:#E3B876;
  background:linear-gradient(100deg,#B8862F,#F6DDA8 45%,#C9973F 70%,#F1D29C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pn-extra__text{margin-top:4px;font-size:.9375rem;line-height:1.45;color:rgba(255,255,255,.74)}
@media (max-width:359px){.pn-extras{grid-template-columns:minmax(0,1fr)}}
/* Sternchenhinweis zum 3D-Film (17.10.2026, Rechts-Check S-038) */
.pn-extras__fuss{max-width:760px;margin:20px 0 0;font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.7)}
.pn-nb{white-space:nowrap}


/* ---------- 5 Alle Unterschiede im Detail: Tabelle als großer Aufklapper ---------- */
.pn-detail__liste{display:grid;gap:14px}
.pn-gross{border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(1,27,79,.06),0 10px 26px -18px rgba(1,27,79,.3);scroll-margin-top:calc(var(--kopf-h) + 16px)}
#vergleich.pn-gross{background:#fff} /* abo.css färbt #vergleich sandfarben */
.pn-gross>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:16px 20px;cursor:pointer;list-style:none}
.pn-gross>summary::-webkit-details-marker{display:none}
.pn-gross h2{margin:0;font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem)}
.pn-gross__hinweis{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blau);white-space:nowrap}
.pn-gross__hinweis::after{content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.pn-gross[open] .pn-gross__hinweis::after{transform:translateY(2px) rotate(-135deg)}
.pn-gross[open] .pn-gross__zu,.pn-gross:not([open]) .pn-gross__auf{display:none}
.pn-gross .vgl-rahmen{margin:0 8px 10px;border:0;border-radius:0;background:none;box-shadow:none}
.pn-gross .vgl__gruppe th{text-transform:none;letter-spacing:0;font-size:.9375rem;color:var(--warm)}
@media (max-width:599px){html:not(.kopf-weg) .pn-gross .vgl thead{top:var(--kopf-h)}}

/* ---------- 6 Fragen zum Abo: eigener Abschnitt ---------- */
.pn-fragen{display:grid;gap:8px}
.pn-fragen__kopf .pn-titel{margin:0}
.pn-fragen__kopf p{margin:0 0 10px}
.pn-fragen .frage{scroll-margin-top:calc(var(--kopf-h) + 16px)}
.pn-fragen .fr-karten .frage{padding-inline:0} /* seiten.css und stil.css rücken sonst doppelt ein */


/* ---------- breiter ---------- */
@media (min-width:768px){
  .pn-kacheln{gap:16px}
  .pk-karte{padding:36px 34px 30px}
  .pk-knopf{align-self:flex-start}
  .pn-extras{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pn-extra:last-child:nth-child(odd){grid-column:auto}
}
@media (min-width:900px){
  .pn-kacheln{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .pn-kachel{padding:22px 22px 26px}
  .pn-kachel:nth-child(3){background:#E6EEFC}.pn-kachel:nth-child(4){background:#F6EEDF}
  /* Zahlen: drei Karten nebeneinander, Bild oben, Pfeil zwischen den Karten */
  .pn-zahlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
  .pn-zahl{grid-template-columns:minmax(0,1fr);grid-template-areas:"bild" "titel" "betrag" "text";padding:26px 26px 30px}
  .pn-zahl .pn-mini{width:200px;max-width:100%;height:100px;margin:0 0 18px;align-self:start}
  .pn-zahl__betrag{font-size:3.25rem;margin-top:6px}
  .pn-zahl:not(:last-child)::after{content:"";position:absolute;top:50%;right:-30px;z-index:1;width:24px;height:24px;transform:translateY(-50%);
    background:no-repeat center/24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230155FD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")}
}
/* Rechner: drei Karten nebeneinander wie bei der Referenz, kein Umschalter */
@media (min-width:1024px){
  .pn-wahl{padding-top:clamp(40px,4vw,64px)}
  .js .pn-leiste{display:none}
  .pn-pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;margin:0}
  .pk-karte[hidden]{display:flex}
  .pk-karte{padding:38px 32px 32px}
  .pk-knopf{align-self:stretch;margin-top:auto}
  .pk-inhalt{margin-bottom:24px}
  /* 19.10.2026: wieder fünf Zusatzleistungen (Fototermin gestrichen, S-049) → eine Reihe à fünf wie vor dem 17.10. */
  .pn-extras{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pn-detail__liste{max-width:1100px}
  .pn-fragen{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
  .pn-fragen__kopf{position:sticky;top:calc(var(--kopf-h) + 24px)}
}

/* ---------- Bewegung (nur wenn erwünscht) ---------- */
@media (prefers-reduced-motion:no-preference){
  .pn-schalter__marke{transition:transform .45s var(--ease),background-color .45s var(--ease)}
  .pn-leiste{transition:top .35s var(--ease)}
  .pn-wahl.ist-bewegt .pk-karte:not([hidden]){animation:pn-rein .45s var(--ease)}
  @keyframes pn-rein{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  /* Einträge kommen nacheinander herein (A1) */
  .pn-wahl.ist-bewegt .pk-karte:not([hidden]) .pk-inhalt li{animation:pk-zeile .45s var(--ease) both;animation-delay:calc(var(--j,0) * 55ms + 80ms)}
  @keyframes pk-zeile{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
}

/* Schmale Handys: Einträge einzeilig halten */
@media (max-width:419px){
  .pk-karte{padding-inline:20px}
  .pk-inhalt li{column-gap:12px;font-size:1.0625rem}
  .pk-inhalt b{font-size:.9375rem}
  .pn-zahl{grid-template-columns:84px minmax(0,1fr);column-gap:14px;padding:18px 16px 20px}
  .pn-zahl .pn-mini{width:84px}
}

/* ---------- 7 Bewegung und Maus (Hugo, 15.10.2026: „so wie sie ist, aber animiert und interaktiv mit der Maus“) ----------
   Aus der Bewegungsbibliothek: A2 gestaffelt, A3 Zahl zählt hoch (preise-neu.js), B4 Maske nach oben, A5/C4 Linie und Haken
   zeichnen sich, E3 Fortschrittsbalken. Maus (nur Geräte mit Maus): Karten kippen mit Lichtschein, Licht folgt dem Zeiger
   auf den dunklen Flächen, Knöpfe ziehen sich leicht zur Maus. Bei „weniger Bewegung“ bleibt alles still und sichtbar. */
.pn-kippt{position:relative}
.pn-kippt::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.38),transparent 55%);mix-blend-mode:soft-light;transition:opacity .3s}
.pn-licht{isolation:isolate}
.pn-licht::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(1,85,253,.35),rgba(227,184,118,.08) 45%,transparent 70%)}
.pn-licht.ist-licht::before{opacity:1}
.pn-fortschritt{display:none}

@media (prefers-reduced-motion:no-preference){
  /* B4: Überschriften decken sich von unten auf */
  .js .pn-titel[data-auf]{opacity:1;transform:none}
  .js .pn-titel[data-auf] .pn-maske{display:block;clip-path:inset(0 0 100% 0);translate:0 .35em;transition:clip-path .9s var(--ease),translate .9s var(--ease)}
  .js .pn-titel[data-auf].ist-da .pn-maske{clip-path:inset(-20% -5% -20% -5%);translate:0 0}

  /* Karten kippen mit der Maus (Klasse ist-kipp setzt preise-neu.js), danach gleiten sie weich zurück */
  .js .pn-kippt.ist-kipp,.js .pn-kippt[data-auf].ist-da.ist-kipp{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
    transition:transform .15s linear,box-shadow .3s;transition-delay:0s}
  .pn-kippt.ist-kipp::before{opacity:1}
  .js .pn-kippt[data-auf].ist-da:not(.ist-kipp){transition:opacity .7s var(--ease),transform .6s var(--ease);transition-delay:0s}

  /* Knöpfe ziehen sich leicht zur Maus */
  .pk-knopf,.kb .btn{transform:translate(var(--bx,0px),var(--by,0px));transition:transform .25s var(--ease),background-color .2s}

  /* E3: Fortschrittsbalken oben, reines CSS */
  @supports (animation-timeline:scroll()){
    .pn-fortschritt{display:block;position:fixed;inset:0 0 auto 0;z-index:60;height:3px;background:linear-gradient(90deg,#0155FD,#E3B876);
      transform-origin:0 50%;transform:scaleX(0);animation:pn-fort linear both;animation-timeline:scroll(root)}
    @keyframes pn-fort{to{transform:scaleX(1)}}
  }

  /* Glanz wie auf einer Bankkarte: läuft einmal über die Karte, wenn sie erscheint (auch nach dem Umschalten),
     folgt mit der Maus dem Zeiger und wandert am Handy beim Scrollen (reines CSS) */
  .pk-karte::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;mix-blend-mode:soft-light;
    background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position-x:130%;transition:background-position-x .25s linear}
  .pk-karte--premium::after{mix-blend-mode:screen;background-image:linear-gradient(115deg,transparent 40%,rgba(246,221,168,.28) 50%,transparent 60%)}
  .pk-karte.ist-da::after{animation:pk-glanz 1.6s var(--ease) calc(.5s + var(--i,0) * .15s) backwards}
  .pn-wahl.ist-bewegt .pk-karte:not([hidden])::after{animation:pk-glanz-b 1.4s var(--ease) .15s backwards}
  .pk-karte.ist-kipp::after{background-position-x:calc(130% - var(--gx,50%) * 1.6)}
  @keyframes pk-glanz{from{background-position-x:130%}to{background-position-x:-30%}}
  @keyframes pk-glanz-b{from{background-position-x:130%}to{background-position-x:-30%}}
  /* dieselbe Spiegelung auf den Zusatzkarten */
  .pn-extra::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
    background:linear-gradient(115deg,transparent 40%,rgba(246,221,168,.26) 50%,transparent 60%) no-repeat;background-size:260% 100%;background-position-x:130%;transition:background-position-x .25s linear}
  .pn-extra.ist-da::after{animation:pk-glanz 1.5s var(--ease) calc(.45s + var(--i,0) * .12s) backwards}
  .pn-extra.ist-kipp::after{background-position-x:calc(130% - var(--gx,50%) * 1.6)}
  @media (hover:none){@supports (animation-timeline:view()){
    .pk-karte::after,.pk-karte.ist-da::after,.pn-wahl.ist-bewegt .pk-karte:not([hidden])::after,.pn-extra::after,.pn-extra.ist-da::after{animation:pk-glanz-scroll linear both;animation-timeline:view();animation-range:entry 20% exit 80%}
    @keyframes pk-glanz-scroll{from{background-position-x:130%}to{background-position-x:-30%}}
  }}

  /* Zeichen in den Paketkarten: kleiner Hüpfer, wenn die Zeile mit der Maus berührt wird */
  .pk-inhalt li .pk-zeichen{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .pk-inhalt li:hover .pk-zeichen{transform:scale(1.18) rotate(-6deg)}

  /* Kleine Bilder: bewegen sich, wenn ihre Karte erscheint, und noch einmal beim Überfahren mit der Maus */
  .mi-hops,.mi-stempel,.mi-zettel,.mi-stift,.mi-flagge,.mi-schloss{transform-box:fill-box;transform-origin:center}
  .ist-da .mi-hops{animation:mi-hops .55s var(--ease) both;animation-delay:calc(.5s + var(--k,0) * .13s)}
  .pn-kippt:hover .mi-hops{animation:mi-hops-b .55s var(--ease) both;animation-delay:calc(var(--k,0) * .13s)}
  @keyframes mi-hops{0%{transform:translateY(0)}40%{transform:translateY(-7px)}100%{transform:none}}
  @keyframes mi-hops-b{0%{transform:translateY(0)}40%{transform:translateY(-7px)}100%{transform:none}}
  .ist-da .mi-stempel{animation:mi-stempel .6s cubic-bezier(.34,1.56,.64,1) .55s both}
  .pn-kippt:hover .mi-stempel{animation:mi-stempel-b .6s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes mi-stempel{from{transform:scale(0)}to{transform:scale(1)}}
  @keyframes mi-stempel-b{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
  .ist-da .mi-zettel{animation:mi-zettel .7s cubic-bezier(.34,1.56,.64,1) .65s both}
  .pn-kippt:hover .mi-zettel{animation:mi-zettel-b .6s ease both}
  @keyframes mi-zettel{from{opacity:0;transform:translateY(-16px) rotate(-16deg) scale(1.2)}to{opacity:1;transform:none}}
  @keyframes mi-zettel-b{0%,100%{transform:none}35%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}}
  .ist-da .mi-flagge{animation:mi-flagge .45s var(--ease) both;animation-delay:calc(.55s + var(--k,0) * .1s)}
  @keyframes mi-flagge{from{transform:scaleX(0)}to{transform:none}}
  .ist-da .mi-schloss{animation:mi-schloss .5s cubic-bezier(.34,1.56,.64,1) .5s both}
  .pn-kippt:hover .mi-schloss{animation:mi-schloss-b .5s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes mi-schloss{from{transform:translateY(-4px)}to{transform:none}}
  @keyframes mi-schloss-b{0%{transform:none}40%{transform:translateY(-4px)}100%{transform:none}}
  /* A5 Unterschrift zeichnet sich, der Stift fährt mit; C4 Haken zeichnet sich */
  .ist-da .mi-unterschrift{stroke-dasharray:90;stroke-dashoffset:90;animation:mi-zeichnen .9s ease .5s forwards}
  .pn-kippt:hover .mi-unterschrift{animation:mi-zeichnen-b .9s ease forwards}
  .ist-da .mi-stift{animation:mi-stift .9s ease .5s both}
  .pn-kippt:hover .mi-stift{animation:mi-stift-b .9s ease both}
  .ist-da .mi-haken{stroke-dasharray:20;stroke-dashoffset:20;animation:mi-zeichnen .45s ease 1s forwards}
  .pn-kippt:hover .mi-haken{animation:mi-haken-b .45s ease .1s forwards}
  @keyframes mi-zeichnen{to{stroke-dashoffset:0}}
  @keyframes mi-zeichnen-b{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
  @keyframes mi-haken-b{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
  @keyframes mi-stift{0%{transform:translate(-30px,20px)}100%{transform:none}}
  @keyframes mi-stift-b{0%{transform:translate(-30px,20px)}100%{transform:none}}

  /* Pfeile zwischen den Zahlkarten gleiten herein */
  @media (min-width:900px){.pn-zahl.ist-da:not(:last-child)::after{animation:pn-pfeil .6s var(--ease) both;animation-delay:calc(.4s + var(--i,0) * .15s)}}
  @keyframes pn-pfeil{from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}

  /* Zusatzleistungen: Zeichen dreht sich beim Überfahren */
  .pn-extra__zeichen{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .3s}
  .pn-extra:hover .pn-extra__zeichen{transform:rotate(-6deg) scale(1.08)}
}