/* ==========================================================================
Die Launcher – gemeinsamer Rahmen der Unterseiten
Kopfzeile, Handy-Menue, Fusszeile mit Siegelreihe, Typografie, Knoepfe,
dunkle Flaechen, feste Handy-Leiste, Abschluss-Block, FAQ, Rechtstexte.
Vorbild ist die Startseite (index.html). Seit 15.09.2026 laedt auch die
Startseite diese Datei und ergaenzt sie um ihre eigenen Inline-Styles.
Reihenfolge im : /css/theme.css → (/css/case.css) → diese Datei →
seiteneigene Styles. Eingebunden mit ?v=…: Apache cacht CSS einen Monat,
bei Aenderungen die Versionsnummer in allen Unterseiten erhoehen.
========================================================================== */
@font-face{font-family:'Playfair';src:url('/fonts/PlayfairDisplay-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* ── TYPO-SKALA: die einzige Stelle fuer Schriftgroessen, Zeilenhoehen und Gewichte ──
Sechs Groessen. Alle Unterseiten (auch ihre seiteneigenen Styles) verwenden nur
diese Variablen. Wird die endgueltige Skala der Startseite festgelegt, hier nachziehen.
--fs-xs Nebeninfos, Fusszeile, Labels
--fs-sm kleine Zeilen: Hinweise unter Formularen, Quellen, Meta
--fs-base Fliesstext: 16 px Handy / 17 px Desktop
--fs-lg Zwischenueberschriften, FAQ-Fragen, Lead-Text im Seitenkopf
--fs-xl Abschnittsueberschriften (h2)
--fs-2xl Seitenueberschrift (h1), grosse Zahlen */
:root{
--fs-xs:.8125rem;
--fs-sm:.9375rem;
--fs-base:1rem;
--fs-lg:1.125rem;
--fs-xl:clamp(1.75rem,3.4vw,2.5rem);
--fs-2xl:clamp(2rem,4.6vw,3.3rem);
--lh-tight:1.14;
--lh-snug:1.35;
--lh-body:1.65;
--fw-regular:400;
--fw-medium:560;
--fw-semibold:600;
--fw-bold:700;
--ls-tight:-.03em;
/* Abstaende wie Startseite: zwischen Abschnitten, zwischen Kopf und Inhalt, zwischen Elementen */
--space-section:88px;
--space-block:2.4rem;
--space-gap:1.2rem;
/* Farben und Masse wie Startseite „Runde 6“: Fliesstext #cfcfd8 (~12:1 auf #09090b),
Grau #a2a2ae (~7,5:1) nur fuer Nebeninfos */
--text2:#cfcfd8;
--text3:#a2a2ae;
--max:1080px;
--ease:cubic-bezier(.4,0,.2,1);
--nav-h:64px;
--brand-grad-soft:linear-gradient(120deg,rgba(139,140,254,.18) 0%,rgba(192,180,255,.12) 100%);
/* Alias fuer aeltere Seitenstyles */
--fliess:var(--fs-base);
/* Runde 12 (15.09.2026): Grund ist ein tiefes, leicht getoentes Indigo-Schwarz statt #09090b (theme.css bleibt wegen Cache
unveraendert und wird hier ueberschrieben). Kopfzeile, Handy-Menue, Cookie-Hinweis und Handy-Leiste ziehen mit. */
--bg:#0b0b12;
--nav-bg:rgba(11,11,18,.9);
/* ── Runde 13 (16.09.2026): Formensystem der Startseite ──
Damit jede Unterseite aus derselben Hand wirkt, gelten hier dieselben Werte wie in index.html:
eine Inhaltsbreite, ein Seitenrand, ein Kartenradius (gross 28 px), eine Flaeche, ein Rand,
ein Glanz, ein Schatten, eine Zeit. Die Startseite definiert dieselben Namen zusaetzlich inline
und bleibt dadurch unveraendert. */
--w-content:1180px;
--w-text:760px;
--gutter:max(5%,calc((100% - var(--w-content)) / 2));
--r-k:20px;
--r-kg:28px;
--r-pill:999px;
--t-k:180ms;
--k-grund:#13131e;
--k-flaeche:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.012) 100%);
--k-rand:rgba(255,255,255,.085);
--k-rand-hell:rgba(255,255,255,.2);
--k-glanz:inset 0 1px 0 rgba(255,255,255,.07);
--k-schatten:0 1px 1px rgba(0,0,0,.25),0 28px 56px -32px rgba(0,0,0,.8);
/* Signalfarbe: Haken, offene Zustaende, Hervorhebungen */
--signal:#8b8cfe;
--signal-soft:rgba(139,140,254,.14);
--signal-line:rgba(139,140,254,.42);
--g1:#10101a;
}
@media(min-width:769px){:root{--fs-base:1.0625rem;--fs-lg:1.25rem}}
@media(max-width:768px){:root{--space-section:52px;--space-block:1.8rem}}
body{background:var(--bg)}
/* Sprungmarken: sanft per js/layout.js, nicht per CSS (theme.css setzt noch smooth). Ziel direkt unter der Kopfzeile */
html{scroll-behavior:auto}
main [id]{scroll-margin-top:var(--nav-h)}
[hidden]{display:none!important}
.accent{font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:var(--fw-regular)!important;color:var(--text);font-synthesis:none}
/* ── Kopfzeile (Groessen aus theme.css, wie Startseite) ──
Markup der Navigation, fuer Startseite, Unterseiten und News identisch:
Im Handy-Menue steht die Nummer weiter unten in .mob-footer. */
/* Polsterung wie Startseite: ab 1181 px buendig mit einem 1180-px-Inhalt, sonst 5 % (theme.css liess bei 1920 px nur 888 px) */
@media(min-width:1181px){nav{padding-left:max(5%,calc((100% - 1180px) / 2));padding-right:max(5%,calc((100% - 1180px) / 2))}}
/* Feste Kopfzeile: auf allen Seiten gleich hoch; beim Scrollen eine ruhige Flaeche mit genau einer feinen Linie */
nav{height:var(--nav-h);padding-top:0;padding-bottom:0;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
nav.scrolled{background:rgba(11,11,18,.94);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.n-links a{font-size:var(--fs-xs);font-weight:var(--fw-regular)}
.n-cta{font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.n-mob a{font-size:var(--fs-xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.n-mob .mob-cta{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.n-mob .mob-footer,.n-mob .mob-footer a{font-size:var(--fs-xs)}
.n-links{gap:1.7rem}
.n-links .n-tel{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.n-tel svg{width:13px;height:13px;flex-shrink:0;color:var(--brand-mint)}
/* Zwischen Tablet und kleinem Laptop reicht der Platz nur fuer den Hoerer; die Nummer bleibt im Namen des Links */
@media(min-width:769px) and (max-width:1180px){.n-links{gap:1.25rem}.n-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.n-tel svg{width:16px;height:16px}}
@media(min-width:769px) and (max-width:1000px){.n-links{gap:1.05rem}.n-links a{font-size:var(--fs-xs)}}
@media(min-width:769px) and (max-width:860px){.n-links{gap:.8rem}.n-cta{padding:7px 12px}}
/* Aktive Seite: heller Text und ein Strich in Periwinkle unter dem Eintrag */
.n-links a[aria-current="page"]:not(.n-cta){position:relative;color:var(--text)}
.n-links a[aria-current="page"]:not(.n-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--brand-mint)}
.n-links .n-cta[aria-current="page"]{background:var(--brand-mint-soft);box-shadow:inset 0 0 0 1px var(--brand-mint-line)}
.n-mob a[aria-current="page"]:not(.mob-cta){color:var(--text)}
.n-mob a[aria-current="page"]:not(.mob-cta)::before{content:'';display:inline-block;width:.32em;height:.32em;margin:0 .45em .18em 0;border-radius:50%;background:var(--brand-mint);vertical-align:middle}
/* Geschlossenes Menue ist auch fuer die Tastatur weg; offen liegt der Schliessen-Knopf ueber der Flaeche */
.n-mob{visibility:hidden;background:rgba(11,11,18,.97);transition:opacity .35s cubic-bezier(.4,0,.2,1),visibility 0s linear .35s}
.n-mob.open{visibility:visible;transition:opacity .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.menue-offen nav{z-index:102}
.menue-offen nav.scrolled{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--text);outline-offset:3px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
/* ── Knoepfe (wie Startseite) ── */
.btn-primary,.btn-secondary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-sm);cursor:pointer;text-decoration:none;border:none;transition:all .3s var(--ease);letter-spacing:-.005em;line-height:1;white-space:nowrap;font-family:inherit}
.btn-primary{color:#0b0b0e;background:linear-gradient(120deg,#8b8cfe 0%,#c0b4ff 100%);background-size:200% auto;box-shadow:0 8px 24px -6px rgba(139,140,254,.55),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 50%);pointer-events:none;mix-blend-mode:overlay;opacity:.6}
.btn-primary:hover{background-position:right center;box-shadow:0 12px 32px -6px rgba(139,140,254,.75),inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.45);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 14px -4px rgba(139,140,254,.5),inset 0 0 0 1px rgba(255,255,255,.18)}
.btn-secondary{color:var(--text);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn-secondary:hover{background:rgba(139,140,254,.08);box-shadow:inset 0 0 0 1px var(--brand-mint-line);color:var(--text);transform:translateY(-1px)}
@media(max-width:400px){.btn-primary,.btn-secondary{white-space:normal;text-align:center;padding-left:22px;padding-right:22px}}
.hero-btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.knopfreihe{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
/* ── Ueberschriften und Text ── */
.s-title{font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);line-height:var(--lh-tight);margin-bottom:.8rem}
.s-sub,.fliess{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text2)}
.s-sub{max-width:640px}
.neben{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text3)}
.textlink{color:var(--brand-amber);text-decoration:underline;text-decoration-color:var(--brand-mint-line);text-underline-offset:3px}
.textlink:hover{text-decoration-color:var(--brand-amber)}
.weiter{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--brand-amber)}
.weiter svg{width:11px;height:11px}
/* ── Seitenkopf der Unterseiten ── */
.u-kopf{max-width:none;margin:0;padding:128px var(--gutter) 40px}
.u-kopf h1{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);margin-bottom:1.2rem;max-width:860px}
.u-kopf .u-lead{font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--text2);max-width:660px;margin-bottom:1.8rem}
.u-kopf.mittig{text-align:center}
.u-kopf.mittig h1,.u-kopf.mittig .u-lead{margin-left:auto;margin-right:auto}
@media(max-width:768px){.u-kopf{padding:108px var(--gutter) 32px}}
/* ── Abschnitte ── */
.u-block{position:relative;padding:var(--space-section) 0}
.u-in{max-width:none;margin:0;padding:0 var(--gutter)}
.u-in.schmal{max-width:820px;margin:0 auto;padding:0 5%}
.u-block h3,.u-h3{font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:-.015em;color:var(--text)}
/* Dunkle Flaeche statt hellem Abschnitt (Startseite .flaeche) */
.flaeche{--k-grund:#171724;background:radial-gradient(60% 55% at 50% 0%,rgba(139,140,254,.08),transparent 70%),#101016;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06)}
.flaeche::before{display:none}
/* ── Karten: ein Radius, eine Flaeche, ein Rand, ein Glanz, ein Schatten, Hover 2 px in 180 ms.
Wortgleich mit .krt der Startseite, damit beide Seiten dieselbe Karte zeigen. ── */
.krt{position:relative;border-radius:var(--r-k);background:var(--k-flaeche),var(--k-grund);box-shadow:inset 0 0 0 1px var(--k-rand),var(--k-glanz),var(--k-schatten);transition:transform var(--t-k) var(--ease),box-shadow var(--t-k) var(--ease)}
.krt::after{content:'';position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));pointer-events:none}
.krt:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--k-rand-hell),var(--k-glanz),0 1px 1px rgba(0,0,0,.25),0 34px 64px -30px rgba(0,0,0,.85)}
/* ── Karten-Raster ── */
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:2.2rem}
.karten.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.karten,.karten.zwei{grid-template-columns:minmax(0,1fr)}}
.karte{position:relative;padding:26px 24px;border-radius:var(--r-k);background:var(--k-flaeche),var(--k-grund);box-shadow:inset 0 0 0 1px var(--k-rand),var(--k-glanz),var(--k-schatten);transition:transform var(--t-k) var(--ease),box-shadow var(--t-k) var(--ease)}
.karte::after{content:'';position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));pointer-events:none}
.karte:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--k-rand-hell),var(--k-glanz),0 1px 1px rgba(0,0,0,.25),0 34px 64px -30px rgba(0,0,0,.85)}
.karte.betont{background:linear-gradient(165deg,rgba(139,140,254,.16) 0%,rgba(139,140,254,.04) 60%),var(--k-grund);box-shadow:inset 0 0 0 1px var(--signal-line),var(--k-glanz),var(--k-schatten)}
.karte.betont:hover{box-shadow:inset 0 0 0 1px rgba(139,140,254,.6),var(--k-glanz),0 1px 1px rgba(0,0,0,.25),0 34px 64px -30px rgba(0,0,0,.85)}
.karte h3{margin-bottom:.6rem;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:-.015em;color:var(--text)}
.karte p{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text2)}
.karte p+p,.karte p+ul,.karte ul+p{margin-top:.8rem}
.karte .haken{gap:.6rem;margin-top:1rem}
.abschnitt-fuss{margin-top:2.2rem;max-width:760px}
.abschnitt-fuss p{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text2)}
.abschnitt-fuss p+p{margin-top:1rem}
.abschnitt-fuss a:not(.btn-primary):not(.btn-secondary){color:var(--brand-amber);text-decoration:underline;text-decoration-color:var(--brand-mint-line);text-underline-offset:3px}
.medium{margin-top:2.2rem}
/* Zwei Spalten, auf dem Handy untereinander */
.zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 4rem;align-items:start;margin-top:2rem}
.zweispaltig>div>p{font-size:var(--fs-base);line-height:1.7;color:var(--text2)}
.zweispaltig>div>p+p{margin-top:1rem}
@media(max-width:860px){.zweispaltig{grid-template-columns:minmax(0,1fr)}}
/* ── Vergleich zweier Wege (Startseite .vg-*) ── */
.vg-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 3rem;margin-top:2.4rem}
@media(max-width:860px){.vg-raster{grid-template-columns:minmax(0,1fr)}}
.vg-spalte{border-radius:var(--r-k)}
.vg-spalte--minus{padding:1.7rem 0}
.vg-spalte--plus{padding:26px 26px;background:linear-gradient(165deg,rgba(139,140,254,.16) 0%,rgba(139,140,254,.04) 60%),var(--k-grund);box-shadow:inset 0 0 0 1px var(--signal-line),var(--k-glanz),var(--k-schatten)}
@media(max-width:860px){.vg-spalte--minus{padding:.4rem 0}.vg-spalte--plus{padding:1.4rem 1.2rem}}
.vg-kopf{display:block;padding-bottom:1rem;margin-bottom:1.1rem;font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.25;border-bottom:1px solid rgba(255,255,255,.12)}
.vg-spalte--plus .vg-kopf{border-bottom-color:var(--brand-mint-line)}
.vg-marke{display:block;margin-bottom:.4rem;font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.vg-spalte--minus .vg-marke{color:#fca5a5}
.vg-spalte--plus .vg-marke{color:var(--brand-amber)}
.vg-liste{list-style:none;display:grid;gap:.85rem;margin:0;padding:0}
.vg-liste li{position:relative;padding-left:1.35rem;font-size:var(--fs-base);line-height:1.6;color:var(--text2)}
.vg-liste li::before{content:'';position:absolute;left:.1rem;top:.72em;width:9px;height:2px;border-radius:2px;background:#f87171}
.vg-spalte--plus .vg-liste li::before{top:.45em;width:9px;height:5px;border-radius:0;background:none;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.vg-liste b{color:var(--text);font-weight:var(--fw-semibold)}
.vg-liste--plus li::before{top:.45em;width:9px;height:5px;border-radius:0;background:none;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
/* ── Ansprechpartner (Startseite .ue-*) ── */
.person{display:grid;grid-template-columns:240px minmax(0,1fr);gap:1.5rem 4rem;align-items:start;margin-top:2rem}
.person-kopf{display:flex;flex-direction:column;gap:.9rem}
.person-kopf img{width:168px;height:168px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--signal-line)}
.person-name{display:flex;flex-direction:column;line-height:1.4}
.person-name b{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--text)}
.person-name span{font-size:var(--fs-sm);color:var(--brand-amber)}
.person-weg{font-size:var(--fs-base);line-height:1.6;color:var(--text3)}
.gruende{list-style:none;display:grid;gap:1.3rem;margin:0;padding:0}
.gruende li{padding-left:1.1rem;border-left:2px solid var(--brand-mint-line);font-size:var(--fs-base);line-height:1.6;color:var(--text2)}
.gruende b{font-weight:var(--fw-semibold);color:var(--text)}
.gruende a{color:var(--brand-amber);text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){
.person{grid-template-columns:minmax(0,1fr)}
.person-kopf{display:grid;grid-template-columns:88px minmax(0,1fr);gap:.2rem 1rem;align-items:center}
.person-kopf img{width:88px;height:88px}
.person-weg{grid-column:1/-1;margin-top:.6rem}
}
/* ── Paket-Abschnitt: Kopf und Inhalt links, Preiskarte rechts; Handy: Kopf, Preis, Inhalt ── */
.paket-split{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"kopf preis" "haupt preis";gap:0 4rem;align-items:start}
.paket-kopf{grid-area:kopf}
.paket-split>.pk-preis{grid-area:preis;position:sticky;top:96px}
.paket-haupt{grid-area:haupt;margin-top:1.8rem}
.paket-haupt .haken{margin-bottom:1.6rem}
.paket-nicht{margin-bottom:1.6rem;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text2)}
.paket-nicht b{color:var(--text);font-weight:var(--fw-semibold)}
@media(max-width:960px){.paket-split{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "preis" "haupt"}.paket-split>.pk-preis{position:relative;top:auto;margin-top:1.6rem}.paket-split .pk-mini{display:none}}
/* ── Paketkarte (Startseite .pk-preis) ── */
.pk-preis{position:relative;padding:30px 28px;border-radius:var(--r-kg);--text:#fafafa;--text2:#d6d6de;--text3:#a9a9b5;color:var(--text);background:radial-gradient(110% 55% at 0% 0%,rgba(139,140,254,.3) 0%,rgba(139,140,254,0) 62%),radial-gradient(80% 45% at 100% 100%,rgba(192,180,255,.12) 0%,rgba(192,180,255,0) 70%),linear-gradient(180deg,#1b1b35 0%,#141424 58%,#11111d 100%);box-shadow:inset 0 0 0 1px rgba(139,140,254,.5),inset 0 1px 0 rgba(255,255,255,.16),0 50px 100px -50px rgba(90,90,230,.6)}
.pk-preis-name{margin-bottom:.8rem;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text)}
.pk-preis-zahl{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pk-preis-netto{margin-top:.45rem;font-size:var(--fs-base);color:var(--text2)}
.pk-preis-raten{margin:.35rem 0 0;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--brand-amber)}
.pk-preis-b2b{margin-top:.25rem;font-size:var(--fs-sm);line-height:1.5;color:var(--text3)}
.pk-mini{list-style:none;display:grid;gap:.6rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.09)}
.pk-mini li{position:relative;padding-left:1.4rem;font-size:var(--fs-base);line-height:1.5;color:var(--text2)}
.pk-mini li::before{content:'';position:absolute;left:.1rem;top:.45em;width:9px;height:5px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.pk-preis .pk-cta{display:flex;justify-content:center;width:100%;margin-top:1.5rem;padding-left:18px;padding-right:18px;white-space:normal;text-align:center}
.pk-cta-sub{margin-top:.6rem;text-align:center;font-size:var(--fs-sm);color:var(--text3)}
.pk-extra{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-base);line-height:1.6;color:var(--text2)}
.pk-extra b{color:var(--text);font-weight:var(--fw-semibold)}
/* Haekchen-Liste (Startseite .pk-liste) */
.haken{list-style:none;display:grid;gap:1rem;margin:0;padding:0}
.haken li{position:relative;padding-left:30px;font-size:var(--fs-base);line-height:1.6;color:var(--text2)}
.haken li::before{content:'';position:absolute;left:0;top:.14em;width:18px;height:18px;border-radius:50%;background:var(--signal-soft)}
.haken li::after{content:'';position:absolute;left:6px;top:calc(.14em + 6px);width:6px;height:3px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.haken b{color:var(--text);font-weight:var(--fw-semibold)}
/* Garantie-Zeile (Startseite .pk-garantie) */
/* ── Ablauf in Schritten (Startseite .ab-schritte) ── */
.ab-schritte{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem;margin-top:2.6rem;padding:0}
.ab-schritte.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-schritte li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.ab-schritte li>div{display:flex;flex-direction:column;gap:.3rem}
.ab-schritte b{font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--text)}
.ab-schritte li>div>span{font-size:var(--fs-base);line-height:1.55;color:var(--text2)}
.ab-nr{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.03em;color:var(--signal);background:var(--signal-soft);box-shadow:inset 0 0 0 1px var(--signal-line)}
.ab-schritte li:last-child .ab-nr{color:#0b0b12;background:var(--signal);box-shadow:none}
@media(min-width:961px){.ab-schritte li:not(:last-child)::after{content:'';position:absolute;top:22px;left:56px;right:-1.2rem;height:1px;background:var(--signal-line)}}
@media(max-width:960px){.ab-schritte,.ab-schritte.vier{grid-template-columns:minmax(0,1fr);gap:1.2rem}.ab-schritte li{flex-direction:row;gap:1rem}.ab-nr{width:38px;height:38px}}
/* ── Bewertungen (Startseite .pe-*) ── */
.pe-note{margin-top:.2rem;font-size:var(--fs-base);line-height:1.6;color:var(--text2)}
.pe-note b{font-weight:var(--fw-semibold);color:var(--text)}
.sterne{color:#fbbf24;letter-spacing:.12em;margin-right:.35rem}
.pe-haupt{display:flex;flex-direction:column;gap:1.2rem;margin:0}
.pe-haupt.pe-gross{max-width:880px;margin-top:2.2rem}
.pe-haupt.pe-gross p{font-size:var(--fs-xl);font-weight:var(--fw-regular);line-height:var(--lh-snug);letter-spacing:-.025em;color:var(--text)}
.pe-wer{display:flex;align-items:center;gap:.7rem}
.pe-wer img{height:22px;width:auto;max-width:90px;object-fit:contain;flex-shrink:0}
.pe-wer img.rund{width:30px;height:30px;border-radius:50%;object-fit:cover}
.pe-wer img.logo-weiss{opacity:.72}
.pe-wer span{display:flex;flex-direction:column;font-size:var(--fs-sm);color:var(--text3);line-height:var(--lh-snug)}
.pe-wer b{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text)}
.pe-marq{position:relative;margin-top:2.6rem;overflow:hidden;border-radius:6px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.pe-marq:focus-visible{outline:2px solid var(--brand-amber);outline-offset:4px}
.pe-marq-row{display:flex;width:max-content;animation:peLauf 48s linear infinite}
.pe-marq:hover .pe-marq-row,.pe-marq:focus .pe-marq-row,.pe-marq:focus-within .pe-marq-row{animation-play-state:paused}
@keyframes peLauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pe-karte{display:flex;flex-direction:column;gap:.9rem;width:320px;flex-shrink:0;margin:0 1rem 0 0;padding:1.4rem 1.4rem 1.2rem;border-radius:var(--r-k);background:var(--k-flaeche),var(--k-grund);box-shadow:inset 0 0 0 1px var(--k-rand),var(--k-glanz),var(--k-schatten)}
.pe-karte-sterne{font-size:var(--fs-sm);letter-spacing:.12em;color:#fbbf24}
.pe-karte blockquote{flex:1;margin:0}
.pe-karte blockquote p{font-size:var(--fs-base);line-height:1.6;color:var(--text)}
@media(max-width:600px){.pe-karte{width:280px}}
@media(prefers-reduced-motion:reduce){.pe-marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.pe-marq-row{animation:none}.pe-marq-row>[aria-hidden="true"]{display:none}}
.pe-profil{margin-top:2rem;font-size:var(--fs-base)}
.pe-profil a{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-semibold)}
.pe-profil svg{width:11px;height:11px}
/* ── FAQ (Startseite) ── */
.faq-list{display:grid;gap:12px;margin-top:2rem;max-width:none}
.faq-item{position:relative;border:0;border-radius:var(--r-k);background:var(--k-flaeche),var(--k-grund);box-shadow:inset 0 0 0 1px var(--k-rand),var(--k-glanz);transition:box-shadow var(--t-k) var(--ease)}
.faq-item:hover{box-shadow:inset 0 0 0 1px var(--k-rand-hell),var(--k-glanz)}
.faq-item.open{box-shadow:inset 0 0 0 1px var(--signal-line),var(--k-glanz)}
.faq-btn{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:20px 22px;border:0;border-radius:var(--r-k);background:none;text-align:left;font-family:inherit;font-size:var(--fs-lg);font-weight:var(--fw-medium);line-height:var(--lh-snug);letter-spacing:-.015em;color:var(--text);cursor:pointer}
.faq-btn:hover{color:var(--text)}
.faq-btn svg{width:32px;height:32px;flex-shrink:0;padding:8px;border-radius:50%;color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal-line);transition:transform .3s var(--ease),background-color var(--t-k) var(--ease),color var(--t-k) var(--ease)}
.faq-item.open .faq-btn svg{transform:rotate(45deg);color:#0b0b12;background:var(--signal)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-item.open .faq-ans{max-height:800px}
.faq-ans p{max-width:680px;padding:0 22px 22px;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text2)}
.faq-ans a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
@media(max-width:768px){.faq-btn{padding:16px 18px;font-size:var(--fs-base)}.faq-ans p{padding:0 18px 18px}.faq-btn svg{width:30px;height:30px}}
/* Zweispaltig wie auf der Startseite: Kopf links bleibt beim Scrollen stehen, Karten rechts */
.fq-in{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px 64px;align-items:start}
.fq-kopf{position:sticky;top:calc(var(--nav-h,64px) + 32px)}
@media(max-width:900px){.fq-in{grid-template-columns:minmax(0,1fr);gap:var(--space-block)}.fq-kopf{position:static}}
.faq-weiter{margin-top:2rem;font-size:var(--fs-base);line-height:1.6;color:var(--text3)}
.faq-weiter a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
/* ── Abschluss-Block (Startseite .cta) ── */
.cta-wrap{max-width:none;margin:60px 0;padding:0 var(--gutter)}
.cta{position:relative;text-align:center;padding:96px 5% 88px;border-radius:var(--r-kg);overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px var(--k-rand),var(--k-glanz),var(--k-schatten)}
.cta>*{position:relative;z-index:1}
.cta::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,var(--bg) 100%);opacity:.35;pointer-events:none;z-index:0}
.cta .s-title{max-width:620px;margin:0 auto .8rem}
.cta p{max-width:540px;margin:0 auto 2.2rem;font-size:var(--fs-base);color:var(--text2);line-height:1.7}
.cta .hero-btns{margin-bottom:0}
.cta-meta{display:flex;gap:.8rem 2rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;font-size:var(--fs-sm);color:var(--text3)}
.cta-meta a{color:var(--text2);transition:color .2s;display:flex;align-items:center;gap:4px}
.cta-meta a:hover{color:var(--text)}
@media(max-width:768px){.cta-wrap{margin:32px 0 40px}.cta{padding:60px 6% 52px;border-radius:var(--r-kg)}}
/* ── Fusszeile (Startseite) ── */
.f-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:3rem;margin-bottom:3rem}
.f-brand p{font-size:var(--fs-xs);color:var(--text3);line-height:1.7;margin:.8rem 0 1.2rem}
.f-social a:hover{color:var(--text2)}
.f-col h3,.f-col a,.f-btm,.f-btm a,.f-btm span{font-size:var(--fs-xs)!important}
.f-btm{padding-top:1.4rem}
@media(max-width:768px){.f-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:480px){.f-grid{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem;padding:40px 0 32px;margin-bottom:0}.f-brand{grid-column:1/-1}}
.f-col a[aria-current="page"],.f-btm a[aria-current="page"]{color:var(--text)}
/* Siegelreihe: Original-Badges (ProvenExpert, IONOS) plus eigene flache Wortmarken */
/* Mittig, jede Marke in einer gleich hohen Zelle, gleiche Abstaende. Die Original-Badges sind ueber dem Motiv
luftiger als die Wortmarken, deshalb 60 px Bild zu 46 px Wortmarke fuer dieselbe optische Hoehe. */
.f-siegel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.4rem 3rem;padding:8px 0 34px}
.f-siegel>a,.f-siegel>span{display:flex;align-items:center;justify-content:center;height:64px;transition:opacity .2s}
.f-siegel>a:hover,.f-siegel>a:focus-visible{opacity:.85}
/* Seit Runde 12b: …