/* =========================================================================
   FOKALiS – Software-Shop (Übersicht software-shop.html + Produktseiten der Sammlung „shop“)
   Leitidee „Szene 09 · Die Kinokasse“: Programmtafel, Eintrittskarte Firma/Privat, Leinwand.
   Grundlage: fokalis.css + unterseite.css. Bewegungswerte nach DESIGN-KONZEPT.md (ruhig).
   Produktnamen stehen in Originalschreibweise (keine Versalien): FokaSniPP bleibt FokaSniPP.
   ========================================================================= */

/* ---------- Menü + Fuß: Produktseite gehört zum Software-Shop (aria-current="true") ---------- */
.nav-list>li>a[aria-current="true"]{color:var(--white)}
.nav-list>li>a[aria-current="true"]::after{transform:scale(1)}
.footer-col a[aria-current]{color:var(--white)}
.footer-col a[aria-current]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:2px}

/* ---------- SCHALTER (Firma/Privat, monatlich/jährlich) ------------------------------- */
.schalter{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.25);border-radius:999px;flex:none}
.schalter button{display:inline-flex;align-items:baseline;gap:7px;min-height:40px;padding:9px 16px;border:0;border-radius:999px;background:transparent;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:var(--on-dark-muted);
  cursor:pointer;transition:background-color .8s var(--ease-glide),color .6s}
.schalter button small{font-size:11.5px;font-weight:400;letter-spacing:.06em;text-transform:none;opacity:.85}
.schalter button:hover{color:var(--white)}
.schalter button[aria-pressed="true"]{background:var(--gold);color:var(--anth)}
.schalter--hell{border-color:rgba(34,35,35,.22)}
.schalter--hell button{color:var(--on-light-muted)}
.schalter--hell button:hover{color:var(--anth)}
.schalter--hell button[aria-pressed="true"]{background:var(--gold);color:var(--anth)}
/* Ohne JavaScript gibt es keinen Schalter – dann gelten die Nettopreise mit Hinweis */
html:not(.js) .schalter,html:not(.js) .preisleiste-wahl{display:none}

/* ---------- PREISE (gemeinsam für Karten und Pläne) ------------------------------------ */
[data-preis][hidden],[data-preis] [hidden]{display:none!important}
.preis-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.preis-netto,.preis-anzeige{font-family:var(--font-head);font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:.005em;line-height:1}
.preis-ab,.preis-einheit{font-size:13px;color:var(--on-light-muted)}
.preis-ab{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600}
.preis.is-offen .preis-ab{display:none}
/* Einzelkauf: ein Preis, kein „ab“ */
[data-modell="einzel"] .preis-ab{display:none}
.preis.is-offen .preis-netto{font-weight:400;text-transform:uppercase;letter-spacing:.1em}
html:not(.js) .preis-ab,html:not(.js) .preis-einheit{display:none}
/* Ohne JavaScript nur den Monats- bzw. Einmalpreis zeigen (der Jahrespreis braucht den Schalter) */
html:not(.js) [data-preis][data-periode="jahr"]{display:none}
.preis-neben{font-size:12.5px;color:var(--on-light-muted);margin-top:6px}
/* Steuerhinweis: Feld „steuer-hinweis“ gilt ohne JavaScript; mit price-toggle.js zeigt <span data-preis-steuer> die passende Fassung */
.has-preisansicht .preis-steuer-feld{display:none}
[data-preis-steuer]:empty{display:none}
.preis-steuer{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-muted)}

/* ---------- 1. SEITENKOPF ÜBERSICHT: Kinokasse --------------------------------------- */
.shop-hero .page-hero-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* „FÜR“ in Zeile 2: Oswald-Umlaute sitzen hoch, deshalb mehr Zeilenabstand als der Standard 1,02 */
.shop-hero .page-title{line-height:1.14}
.kasse{position:relative;align-self:end;justify-self:end;width:100%;max-width:470px;padding:28px clamp(20px,2vw,28px) 20px;
  background:rgba(10,10,10,.74);border:1px solid var(--line-dark);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kasse[hidden]{display:none}
/* Lichterkette einer Kinokasse: ruhig, ohne Blinken */
.kasse-lichter{position:absolute;left:22px;right:22px;top:-5px;height:10px;pointer-events:none;
  background:radial-gradient(circle,var(--gold) 0 2.2px,rgba(236,176,20,.25) 3px,transparent 4.5px) 0 50%/24px 10px repeat-x}
.kasse-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line-dark);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
#kasse-titel{color:var(--white)}
.kasse-note::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:1px}
.kasse-liste{list-style:none}
.kasse-liste a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 16px;padding:13px 0;border-bottom:1px solid var(--line-dark);text-decoration:none}
.kasse-nr{min-width:1.3em;font-family:var(--font-head);font-weight:200;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;color:var(--on-dark-muted);transition:color .6s}
.kasse-mitte{display:grid;gap:2px;min-width:0}
.kasse-titel{font-family:var(--font-head);font-weight:400;font-size:21px;line-height:1.15;letter-spacing:.01em;color:var(--white);transition:color .6s}
.kasse-art{font-size:12px;line-height:1.4;color:var(--on-dark-muted)}
.kasse-status{justify-self:end;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:5px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:var(--on-dark-muted)}
.kasse-liste a:hover .kasse-titel,.kasse-liste a:hover .kasse-nr,.kasse-liste a:focus-visible .kasse-titel{color:var(--gold)}
.kasse-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;padding-top:16px}
.kasse-label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
@media (max-width:1020px){.shop-hero .page-hero-inner{grid-template-columns:minmax(0,1fr)}.kasse{justify-self:start;max-width:560px}}
@media (min-width:1021px) and (max-height:760px){.kasse{padding-top:22px}.kasse-liste a{padding:9px 0}.kasse-nr{font-size:26px}}
@media (max-width:420px){.kasse-liste a{grid-template-columns:auto minmax(0,1fr)}.kasse-status{grid-column:2;justify-self:start}}

/* ---------- 2. PROGRAMM: Preisleiste + Karten ----------------------------------------- */
.preisleiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 40px;padding:18px 0;margin:calc(clamp(48px,7vw,96px) * -.45) 0 clamp(28px,3vw,44px);
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.preisleiste-wahl{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.preisleiste-label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.preisleiste-text{max-width:62ch;font-size:14px;line-height:1.6;color:var(--on-light-muted)}

.programm{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,32px)}
.prog-card{display:flex;flex-direction:column;min-width:0;background:var(--white);border-radius:var(--radius);overflow:hidden;
  transition:transform 1.4s var(--ease-glide),box-shadow 1.4s var(--ease-glide)}
.prog-card:hover,.prog-card:focus-within{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(34,35,35,.35)}
.section--light .prog-card{background:var(--paper)}
.prog-img{position:relative;overflow:hidden;background:var(--anth)}
.prog-img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.6s var(--ease-glide)}
.prog-card:hover .prog-img img{transform:scale(1.02)}
.prog-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.2vw,32px)}
/* Status als Etikett auf dem Bild: Überschriften bleiben in jeder Karte auf einer Höhe */
.prog-status{position:absolute;left:16px;top:16px;border:1px solid rgba(255,255,255,.22);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.prog-art{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.prog-name{font-size:clamp(28px,2.5vw,36px);font-weight:400;line-height:1.05;letter-spacing:.005em;text-transform:none;color:var(--anth)}
.prog-text{color:var(--on-light-muted);font-size:15px;line-height:1.65}
/* Preis + Button sitzen in jeder Kartenreihe unten auf einer Linie */
.prog-preis{margin-top:auto;display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line-light)}
.preis--karte .preis-netto,.preis--karte .preis-anzeige{font-size:30px;color:var(--anth)}
.preis--karte.is-offen .preis-netto{font-size:17px;color:var(--anth)}
.prog-bedingungen{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.prog-bedingungen>span{font-size:11.5px;line-height:1.3;padding:5px 10px;border:1px solid var(--line-light);border-radius:999px;color:var(--on-light)}
.prog-link{align-self:flex-start;margin-top:4px}
.prog-aktionen{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;margin-top:4px}
/* Hat eine Karte im Raster einen Testen-Button, reservieren alle Karten die Höhe: Preis und Buttons bleiben auf einer Linie */
@media (min-width:701px){.programm:has(.prog-test:not([href=""])) .prog-aktionen{min-height:calc(2 * 42px + 10px)}}
.prog-aktionen .prog-link{margin-top:0}
@media (max-width:1100px){.programm{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Genau vier Programme: ab 1400 px vier Spalten, darunter 2 × 2 (statt 3 + 1 einzelne Karte) */
@media (min-width:1101px) and (max-width:1399px){.programm:has(>.prog-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1400px){.programm:has(>.prog-card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .programm:has(>.prog-card:nth-child(4):last-child) .prog-name{font-size:clamp(26px,1.9vw,32px)}}
@media (max-width:700px){.programm{grid-template-columns:1fr}}

/* ---------- 3. ABLAUF: Filmstreifen mit drei Szenen -------------------------------- */
@media (min-width:1200px){.strip--3{grid-template-columns:repeat(3,minmax(0,1fr))}.strip--3 .frame{min-height:260px}}

/* ---------- 4. WERKSTATT ------------------------------------------------------------ */
.werkstatt{padding-block:clamp(80px,9vw,140px)}
.werkstatt-inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px 64px;align-items:end}
.werkstatt-inner .h2{margin-top:24px}
.werkstatt-text{display:grid;gap:28px;justify-items:start}
@media (max-width:860px){.werkstatt-inner{grid-template-columns:1fr}}

/* =========================================================================
   PRODUKTSEITE
   ========================================================================= */

/* ---------- 1. KOPF: Programm auf der Leinwand -------------------------------------- */
.produkt-hero{position:relative;background:var(--black);color:var(--on-dark);overflow:hidden;isolation:isolate}
.produkt-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 65% at 76% 52%,rgba(236,176,20,.07),transparent 70%),radial-gradient(80% 60% at 20% 100%,rgba(255,255,255,.03),transparent 70%)}
.produkt-hero-inner{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px clamp(40px,5vw,96px);align-items:center;
  padding-top:calc(var(--header-h) + 52px);padding-bottom:clamp(64px,8vw,120px)}
.produkt-hero-text{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;justify-items:start;min-width:0}
.produkt-kopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.produkt-titel{width:100%;font-size:min(clamp(48px,7.4vw,128px),15vh);font-weight:300;line-height:1.02;letter-spacing:-.005em;text-transform:none;color:var(--white);margin-left:-.03em}
.produkt-lead{max-width:48ch;font-size:var(--fs-lead);line-height:1.6;color:#CFCFCF}
.steckbrief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:560px;margin:0;border-top:1px solid var(--line-dark)}
.steckbrief>div{display:grid;gap:2px;padding:11px 16px 11px 0;border-bottom:1px solid var(--line-dark)}
.steckbrief dt{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.steckbrief dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--on-dark)}
.produkt-hero .page-hero-actions .link-arrow{color:var(--on-dark)}
.produkt-hero .page-hero-actions .link-arrow:hover{color:var(--gold)}
.leinwand{position:relative;margin:0;padding:14px;border:1px solid var(--line-dark);border-radius:var(--radius);background:#121212;min-width:0}
.leinwand img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.leinwand-ecken{position:absolute;inset:-8px;pointer-events:none;--c:var(--gold);--l:26px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
@media (min-width:1021px) and (max-height:760px){
  .produkt-hero-inner{padding-top:calc(var(--header-h) + 32px);padding-bottom:48px}
  .produkt-hero-text{gap:14px}
  .produkt-lead{font-size:16.5px;line-height:1.55}
  .steckbrief>div{padding-block:8px}
}
@media (max-width:1020px){
  .produkt-hero-inner{grid-template-columns:1fr;padding-top:calc(var(--header-h) + 40px)}
  .leinwand{max-width:680px}
}
@media (max-width:760px){
  .produkt-lead{font-size:15.5px}
  .produkt-hero .page-hero-actions .btn{width:100%;justify-content:space-between}
}
@media (max-width:420px){.steckbrief{grid-template-columns:1fr}}

/* Testen (Registrierung FokaOffice): Feld leer = Button bzw. Hinweis ausgeblendet */
.produkt-test[href=""],.produkt-test:not([href]),.produkt-test:has([data-edit-label]:empty),
.plan-test[href=""],.plan-test:not([href]),.plan-test:has([data-edit-label]:empty),
.prog-test[href=""],.prog-test:not([href]),.prog-test:has([data-edit-label]:empty){display:none}
.produkt-test-hinweis{max-width:46ch;margin-top:-6px;font-size:13.5px;line-height:1.55;color:var(--on-dark-muted)}
/* Mit Testen-Button: beide Buttons in eine Reihe, Hinweis direkt darunter; „Pläne und Preise“ entfällt (Pläne haben eigene Testen-Buttons) */
.produkt-hero .page-hero-actions:has(.produkt-test:not([href=""])){column-gap:12px}
.produkt-test:not([href=""]) ~ .link-arrow{display:none}
@media (min-width:761px){.produkt-hero .page-hero-actions:has(.produkt-test:not([href=""])) .btn{padding-inline:24px;font-size:13px}}
.produkt-test-hinweis:empty{display:none}
/* Hauptbutton unabhängig von der Vorlage: Gold ist immer der erste sichtbare Button. Gibt es einen Testen-Button,
   wird „Anfrage/Kaufen“ zum zweiten (Rahmen-)Button – sonst bleibt er gold. */
.page-hero-actions:has(.produkt-test:not([href=""])) .produkt-anfrage{background:transparent;border-color:rgba(255,255,255,.35);color:var(--on-dark)}
.page-hero-actions:has(.produkt-test:not([href=""])) .produkt-anfrage:hover{background:transparent;border-color:var(--gold);color:var(--gold)}

/* ---------- 2. BESCHREIBUNG + FUNKTIONEN (formatierter Text) ------------------------ */
.produkt-beschreibung{display:grid;gap:1em;max-width:58ch;font-size:var(--fs-lead);line-height:1.6;color:#CFCFCF}
.produkt-beschreibung p{margin:0}
.produkt-beschreibung a{color:var(--gold)}
.funktionen ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,3vw,56px);border-top:1px solid var(--line-dark)}
.funktionen li{position:relative;display:grid;align-content:start;gap:8px;padding:26px 0 28px 26px;border-bottom:1px solid var(--line-dark);
  color:#BDBDBD;font-size:15px;line-height:1.6}
.funktionen li::before{content:"";position:absolute;left:0;top:35px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.funktionen strong{display:block;font-family:var(--font-head);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.15;letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.funktionen p{margin:0}
.funktionen-hinweis{margin-top:28px;font-size:14px;color:var(--on-dark-muted)}
.funktionen-hinweis:empty{display:none}
@media (max-width:1100px){.funktionen ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.funktionen ul{grid-template-columns:1fr}}

/* ---------- 3. PLÄNE UND PREISE ------------------------------------------------------ */
.plaene-kopf{display:grid;gap:24px;justify-items:start}
.plaene-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.nur-firma-hinweis{display:none;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--anth);padding:9px 16px;border:1px solid rgba(34,35,35,.22);border-radius:999px}
/* Nur für Unternehmen: kein Firma/Privat-Schalter, stattdessen klarer Hinweis */
[data-nur-firma] .plaene-schalter [data-preisansicht-schalter]{display:none}
[data-nur-firma] .nur-firma-hinweis{display:inline-block}
/* Reines B2B-Angebot: klarer Unternehmer-Hinweis (dann gilt die PAngV nicht, Netto-Preise genügen) */
/* B2B-Hinweis (§ 14 BGB) ist ein CMS-Feld („kaeufer-hinweis“): immer sichtbar, auch ohne JavaScript – leer = aus */
.nur-firma-recht{display:block;flex-basis:100%;max-width:560px;font-size:13px;line-height:1.55;color:var(--on-light-muted)}
.nur-firma-recht:empty{display:none}
/* Einzelkauf oder Preismodell offen: keine Zahlweise */
[data-preis-bereich]:not([data-modell="abo"]) [data-periode-schalter]{display:none}
html:not(.js) .nur-firma-hinweis{display:none}
/* Nur für Privatkunden („Für Privatkunden“): immer Endpreis inkl. MwSt., Firma/Privat-Schalter aus, statt dessen Pille */
.nur-privat-hinweis{display:none;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--anth);padding:9px 16px;border:1px solid rgba(34,35,35,.22);border-radius:999px}
[data-nur-privat] .plaene-schalter [data-preisansicht-schalter]{display:none}
[data-nur-privat] .nur-privat-hinweis{display:inline-block}
html:not(.js) .nur-privat-hinweis{display:none}

.plaene{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,32px)}
.plan{--frame-c:rgba(34,35,35,.22);--frame-in:14px;position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;
  padding:clamp(30px,3vw,44px) clamp(24px,2.4vw,40px) clamp(28px,2.8vw,40px);background:var(--white);border-radius:var(--radius);
  transition:--frame-c 1.4s var(--ease-glide),box-shadow 1.4s var(--ease-glide)}
.plan:hover,.plan:focus-within{--frame-c:var(--gold);--frame-in:8px;box-shadow:0 30px 60px -34px rgba(34,35,35,.35)}
.plan:hover .shot-frame,.plan:focus-within .shot-frame{--fl:34px}
/* Plan ohne Namen (Feld geleert) wird ausgeblendet */
.plan:has(.plan-name:empty){display:none}
/* Nur ein Plan mit Namen (z. B. Einzelkauf): eine schmale Spalte statt eines Drittels */
.plaene:has(> .plan:nth-child(2) .plan-name:empty):has(> .plan:nth-child(3) .plan-name:empty){grid-template-columns:minmax(0,520px)}
.plan-nr{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.plan-name{font-size:clamp(28px,2.6vw,40px);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;color:var(--anth)}
.plan-preise{display:grid;gap:8px;padding:18px 0 20px;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.preis--gross .preis-netto,.preis--gross .preis-anzeige{font-size:clamp(44px,4vw,60px);font-weight:200;color:var(--anth)}
.preis--gross.is-offen .preis-netto{font-size:clamp(22px,1.9vw,28px);font-weight:300;color:var(--anth)}
.preis--gross .preis-einheit{font-size:14px}
.plan-leistungen ul{list-style:none;display:grid}
.plan-leistungen li{position:relative;padding:9px 0 9px 22px;font-size:15px;line-height:1.5;color:var(--on-light);border-bottom:1px solid var(--line-light)}
.plan-leistungen li:last-child{border-bottom:0}
.plan-leistungen li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:50%;border:1px solid var(--anth)}
.plan-leistungen strong{font-weight:600}
/* Hervorgehobener Punkt: <li>Text <em>Etikett</em></li> – Etikett klein unter dem Text, Punkt gold gefüllt */
.plan-leistungen li:has(em){font-weight:600}
.plan-leistungen li:has(em)::before{background:var(--gold);border-color:var(--gold)}
.plan-leistungen em{display:table;margin-top:5px;padding:3px 9px;border:1px solid var(--gold);border-radius:999px;font-style:normal;font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--anth);background:rgba(236,176,20,.12)}
.plan-leistungen p{font-size:15px;color:var(--on-light-muted)}
/* Buttons in allen Plänen unten bündig: primär Testen, darunter Anfragen */
.plan-btn{margin-top:auto;align-self:stretch;justify-content:space-between}
.plan-aktionen{margin-top:auto;display:grid;gap:12px;padding-top:6px}
.plan-aktionen .plan-btn{margin-top:0}
.plaene-hinweis{margin-top:28px;padding:16px 20px;border:1px solid rgba(34,35,35,.18);border-radius:var(--radius);font-size:14.5px;line-height:1.6;color:var(--on-light-muted);max-width:820px}
.plaene-hinweis:empty{display:none}
@media (max-width:1100px){.plaene{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.plaene{grid-template-columns:1fr}}

/* Kasse je Plan (CMS-Shop, Standard 6a + data-shop-plan): Das CMS setzt Preis und Kaufen-Knopf je Plan ein.
   Vor dem Veröffentlichen (data-shop vorhanden) und ohne Shop-Produkt bleibt alles unsichtbar, dann gelten die
   Preise der Plan-Felder und der Anfrage-Knopf. Ist der Shop noch nicht freigeschaltet („Bald erhältlich“),
   bleibt ebenfalls der Anfrage-Knopf. */
.plan [data-shop],.shop-pflicht [data-shop]{display:none}
.shop-plan-preis{padding:18px 0 20px;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light); /* Rahmen wie .plan-preise */
  font-family:var(--font-head);font-size:clamp(40px,3.4vw,56px);font-weight:200;line-height:1.05;color:var(--anth);white-space:nowrap}
.shop-plan-preis:empty{display:none}
.plan:has(.shop-plan-preis:not(:empty):not([data-shop])) .plan-preise{display:none}
.plan [data-fk-kaufen][aria-disabled="true"]{display:none}
.plan:has([data-fk-kaufen]:not([aria-disabled="true"])) .plan-anfrage{display:none}
.shop-pflicht{margin-top:20px;display:grid;gap:6px;max-width:720px}
.shop-pflicht div.shop-klein{display:grid;gap:6px}
.shop-pflicht:not(:has(:not([data-shop]))){display:none}
.shop-klein{font-size:13px;line-height:1.6;color:var(--on-light-muted);text-wrap:pretty}

/* ---------- 4. FRAGEN als formatierter Text (Aufklapper) ---------------------------- */
.faq-rt details{border-bottom:1px solid var(--line-dark);interpolate-size:allow-keywords}
.faq-rt summary{position:relative;list-style:none;cursor:pointer;padding:26px 64px 26px 0;
  font-family:var(--font-head);font-weight:300;font-size:clamp(20px,1.9vw,27px);line-height:1.25;color:var(--on-dark);transition:color .6s;text-wrap:balance}
.faq-rt summary::-webkit-details-marker{display:none}
.faq-rt summary::before,.faq-rt summary::after{content:"";position:absolute;right:16px;top:50%;width:16px;height:1px;background:currentColor;transition:transform 1s var(--ease-glide),background-color .6s}
.faq-rt summary::after{transform:rotate(90deg)}
.faq-rt summary:hover{color:var(--gold)}
.faq-rt details[open] summary::after{transform:rotate(0deg)}
.faq-rt details[open] summary::before,.faq-rt details[open] summary::after{background:var(--gold)}
.faq-rt details>:not(summary){padding-right:64px;color:#CFCFCF;max-width:64ch}
.faq-rt details>:last-child:not(summary){padding-bottom:30px}
.faq-rt details p+p{margin-top:.8em}
.faq-rt a{color:var(--gold)}
.faq-rt details::details-content{height:0;overflow:clip;transition:height 1.2s var(--ease-glide),content-visibility 1.2s allow-discrete}
.faq-rt details[open]::details-content{height:auto}
@media (max-width:900px){.faq-rt summary{padding-right:48px}.faq-rt details>:not(summary){padding-right:0}}

/* ---------- 5. AUCH IM PROGRAMM ------------------------------------------------------ */
.weitere-section .section-head{align-items:end}
.weitere-link{justify-self:start;color:var(--anth)}
@media (min-width:861px){.weitere-link{justify-self:end}}
/* Keine anderen Programme (z. B. nur ein Eintrag): Abschnitt fällt weg */
.weitere-section:not(:has(.prog-card)){display:none}

/* ---------- Weniger Bewegung ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .prog-card,.prog-img img,.plan,.schalter button{transition:none}
  .prog-card:hover,.prog-card:focus-within{transform:none}
}

/* Shop-Preis gilt (online): Er ist ein Endpreis für alle - der Firma/Privat-Schalter hätte nichts mehr zu tun (Dennis). */
[data-preis-bereich]:has(.shop-plan-preis:not(:empty):not([data-shop])) [data-preisansicht-schalter]{display:none}
.shop-plan-preis .preis-einheit{font-family:var(--font-body,inherit);font-size:14px;font-weight:400;margin-left:6px}

/* Shop-Preis auf den Programm-Karten (Übersicht und „Auch im Programm“): Hat ein Programm ein Shop-Produkt, gilt nur
   dieser Preis samt Steuerhinweis vom CMS - die Preis-Felder der Karte treten zurück. Lokal/ohne Produkt unsichtbar. */
.prog-card [data-shop]{display:none}
.shop-karten-preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:0;border:0;font-size:30px;font-weight:300;line-height:1}
.shop-karten-preis .preis-einheit{margin-left:0}
.shop-plan-preis .preis-ab{font-family:var(--font-body,inherit);margin-right:8px}
.shop-karten-preis .preis-ab{margin-right:0}
.shop-karten-hinweis{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-muted)}
.shop-karten-hinweis:empty{display:none}
.prog-card:has(.shop-karten-preis:not(:empty):not([data-shop])) :is([data-preis],.preis-steuer){display:none}
/* Braucht kein Programm mehr die Wahl netto/brutto (alle im Shop oder nur für Unternehmen), fällt der Schalter weg */
[data-ohne-preisschalter] :is([data-preisansicht-schalter],.preisleiste,.kasse-fuss){display:none}

/* Mobil-Prüfung 13.10. (Dennis) */
@media (max-width:400px){.kasse{padding-inline:16px}.schalter button{padding-inline:12px;letter-spacing:.1em}}
@media (max-width:420px){.shop-plan-preis{white-space:normal}}
.nur-firma-hinweis,.nur-privat-hinweis{border-radius:19px}