/* ==========================================================================
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:96px;
--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);
}
@media(min-width:769px){:root{--fs-base:1.0625rem;--fs-lg:1.25rem}}
@media(max-width:768px){:root{--space-section:56px;--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:50px;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:var(--max);margin:0 auto;padding:128px 5% 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 5% 32px}}
/* ── Abschnitte ── */
.u-block{position:relative;padding:var(--space-section) 0}
.u-in{max-width:var(--max);margin:0 auto;padding:0 5%}
.u-in.schmal{max-width:820px}
.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{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-Raster ── */
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;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{padding:1.7rem 1.6rem;border-radius:18px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.karte.betont{background:linear-gradient(160deg,var(--brand-mint-soft),transparent 70%),rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--brand-mint-line)}
.flaeche .karte:not(.betont){background:rgba(9,9,11,.45)}
.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:20px}
.vg-spalte--minus{padding:1.7rem 0}
.vg-spalte--plus{padding:1.7rem 1.8rem;background:linear-gradient(165deg,var(--brand-mint-soft) 0%,transparent 62%),#15151d;box-shadow:inset 0 0 0 1px var(--brand-mint-line)}
@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(--brand-mint);border-bottom:2px solid var(--brand-mint);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(--brand-mint);border-bottom:2px solid var(--brand-mint);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(--brand-mint-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:1.9rem 1.7rem;border-radius:22px;--text:#fafafa;--text2:#d6d6de;--text3:#a9a9b5;color:var(--text);background:linear-gradient(160deg,var(--brand-mint-soft) 0%,rgba(255,255,255,.02) 55%,transparent 100%),#101018;box-shadow:inset 0 0 0 1px var(--brand-mint-line),0 34px 70px -24px rgba(40,40,110,.55)}
.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(--brand-mint);border-bottom:2px solid var(--brand-mint);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:1.8rem;font-size:var(--fs-base);line-height:1.6;color:var(--text2)}
.haken li::before{content:'';position:absolute;left:.1rem;top:.5em;width:11px;height:6px;border-left:2px solid var(--brand-mint);border-bottom:2px solid var(--brand-mint);transform:rotate(-45deg)}
.haken b{color:var(--text);font-weight:var(--fw-semibold)}
/* Garantie-Zeile (Startseite .pk-garantie) */
.garantie{display:flex;gap:1rem;align-items:flex-start;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1)}
.garantie svg{width:30px;height:30px;flex-shrink:0;color:var(--brand-mint)}
.garantie p{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text2)}
.garantie b{color:var(--text);font-weight:var(--fw-semibold)}
.garantie a{color:var(--brand-amber);text-decoration:underline;text-underline-offset:3px}
/* ── 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(--brand-amber);background:var(--brand-mint-soft);box-shadow:inset 0 0 0 1px var(--brand-mint-line)}
.ab-schritte li:last-child .ab-nr{color:#0b0b0e;background:var(--brand-grad);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(--brand-mint-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:18px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.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{margin-top:2rem;max-width:820px}
.faq-item{border-top:1px solid var(--glass-hi);padding:0}
.faq-item:last-child{border-bottom:1px solid var(--glass-hi)}
.faq-btn{width:100%;background:none;border:none;text-align:left;padding:1.25rem 0;font-size:var(--fs-lg);font-weight:var(--fw-medium);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;font-family:inherit;color:var(--text);line-height:1.3;letter-spacing:-.02em;transition:color .2s}
.faq-btn:hover{color:var(--text2)}
.faq-btn svg{width:20px;height:20px;flex-shrink:0;color:var(--text3);transition:transform .3s var(--ease)}
.faq-item.open .faq-btn svg{transform:rotate(45deg)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-item.open .faq-ans{max-height:900px}
.faq-ans p{font-size:var(--fs-base);color:var(--text2);line-height:1.7;padding:0 0 1.4rem;max-width:680px}
.faq-ans a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
@media(max-width:768px){.faq-btn{padding:1.1rem 0}}
.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:var(--max);margin:60px auto;padding:0 5%}
.cta{position:relative;text-align:center;padding:96px 5% 88px;border-radius:32px;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px var(--glass-hi),0 30px 80px var(--shadow)}
.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 auto 40px}.cta{padding:60px 6% 52px;border-radius:24px}}
/* ── 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: … (role="listitem" ist auf Links nicht erlaubt); gleiche Flaeche und derselbe Hover */
.f-siegel>span>a{display:flex;align-items:center;justify-content:center;height:100%;transition:opacity .2s}
.f-siegel>span>a:hover,.f-siegel>span>a:focus-visible{opacity:.85}
.f-siegel img{display:block;width:auto;height:60px}
.sgm{display:block;width:auto;height:46px}
.sgm text{font-family:inherit}
@media(max-width:480px){.f-siegel{gap:1rem 1.8rem}.f-siegel>a,.f-siegel>span{height:54px}.f-siegel img{height:50px}.sgm{height:38px}}
/* ── Feste Leiste (Handy, nur Verkaufsseiten) ── */
.leiste{display:none}
@media(max-width:768px){
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(14,14,23,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -1px 0 rgba(255,255,255,.1),0 -14px 30px rgba(0,0,0,.4);transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
.leiste.an{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s}
.leiste-preis{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.leiste-preis b{font-size:var(--fs-base);font-weight:var(--fw-bold);color:#fff}
.leiste-preis span{font-size:var(--fs-xs);color:var(--text3)}
.leiste-knopf{padding:13px 18px;font-size:var(--fs-sm)}
}
/* ── Case Study: ein Aufbau fuer alle Referenzen ──
Kopf mit Kundenfakten → Mitschnitt → Ausgangslage / Loesung → Ergebnis in Zahlen
(nur Belegtes, mit Quelle) → Uebertragbar → weitere Referenzen → Abschluss. */
.cs-kopf{max-width:var(--max);margin:0 auto;padding:112px 5% 0}
.cs-zurueck{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text3);transition:color .2s}
.cs-zurueck:hover{color:var(--text)}
.cs-zurueck svg{width:12px;height:12px}
.cs-kopf h1{max-width:900px;margin:1.3rem 0 1.1rem;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.cs-kopf .u-lead{max-width:720px;font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--text2)}
.cs-fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 2rem;margin:2.2rem 0 0;padding:1.4rem 0 0;border-top:1px solid rgba(255,255,255,.1)}
.cs-fakten div{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.cs-fakten dt{font-size:var(--fs-xs);color:var(--text3)}
.cs-fakten dd{margin:0;font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--text);overflow-wrap:anywhere}
.cs-fakten dd a{color:var(--brand-amber);text-decoration:underline;text-decoration-color:var(--brand-mint-line);text-underline-offset:3px}
@media(max-width:760px){.cs-fakten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-medium{max-width:var(--max);margin:2.6rem auto 0;padding:0 5%}
.cs-medium-rahmen,.medium-rahmen{position:relative;overflow:hidden;border-radius:20px;background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.06)}
.cs-medium-rahmen video,.cs-medium-rahmen img{display:block;width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover}
/* Medium mit Standbild unter dem Video (Seitenverhaeltnis per --ratio) */
.medium-rahmen{aspect-ratio:var(--ratio,16/9)}
.medium-rahmen img,.medium-rahmen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.medium-rahmen video{z-index:1}
@media(max-width:768px){.cs-medium-rahmen,.medium-rahmen{border-radius:14px}}
/* Schaufenster: gerade, scharfe Aufnahmen in schlichtem Rahmen – Browser mit Desktop-Aufnahme, Handy versetzt davor */
.schaufenster{position:relative;margin:2.6rem 0 0;padding:0 0 2.6rem}
.sf-browser{position:relative;overflow:hidden;border-radius:14px;background:#0e0e14;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.75)}
.sf-leiste{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#15151c;border-bottom:1px solid rgba(255,255,255,.07)}
.sf-leiste i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.sf-leiste span{margin-left:10px;padding:3px 12px;border-radius:50px;font-size:var(--fs-xs);line-height:1.4;color:var(--text3);background:rgba(255,255,255,.05)}
.sf-browser img{display:block;width:100%;height:auto;aspect-ratio:1440/900}
.sf-handy{position:absolute;right:2.4rem;bottom:0;width:clamp(120px,20%,212px);padding:7px;border-radius:28px;background:#0e0e14;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -18px rgba(0,0,0,.85)}
.sf-handy img{display:block;width:100%;height:auto;aspect-ratio:390/844;border-radius:21px}
.schaufenster figcaption{margin-top:1rem;max-width:60%;font-size:var(--fs-xs);line-height:1.5;color:var(--text3)}
@media(max-width:760px){
.schaufenster{padding-bottom:1.8rem}
.sf-leiste{height:24px;padding:0 10px}.sf-leiste i{width:7px;height:7px}.sf-leiste span{display:none}
.sf-handy{right:.8rem;width:27%;padding:4px;border-radius:16px}.sf-handy img{border-radius:12px}
.schaufenster figcaption{max-width:66%}
}
/* Kopf links, Text rechts */
.cs-teil{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1rem 4rem;padding:2.6rem 0;border-top:1px solid rgba(255,255,255,.1)}
.cs-teil:first-child{padding-top:0;border-top:0}
.cs-teil:last-child{padding-bottom:0}
.cs-teil>h2{font-size:var(--fs-xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.cs-teil-text p{font-size:var(--fs-base);line-height:1.7;color:var(--text2)}
.cs-teil-text p+p,.cs-teil-text p+.haken,.cs-teil-text .haken+p,.cs-teil-text .haken+h3,.cs-teil-text p+h3{margin-top:1.1rem}
.cs-teil-text h3{margin-bottom:.9rem;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--text)}
.cs-teil-text a{color:var(--brand-amber);text-decoration:underline;text-decoration-color:var(--brand-mint-line);text-underline-offset:3px}
@media(max-width:860px){.cs-teil{grid-template-columns:minmax(0,1fr);gap:1rem;padding:2rem 0}}
/* Ergebnis in Zahlen */
.cs-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.2rem}
.cs-zahl{padding:1.5rem 1.4rem;border-radius:18px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cs-zahl.haupt{background:linear-gradient(160deg,var(--brand-mint-soft),transparent 70%),rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--brand-mint-line)}
.cs-zahl b{display:block;font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-zahl.haupt b{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cs-zahl span{display:block;margin-top:.7rem;font-size:var(--fs-sm);line-height:1.5;color:var(--text2)}
/* Kennzahl ohne Zahl: reine Aussage, gleiche Kachel */
.cs-zahl--text span{margin-top:0;font-size:var(--fs-base);color:var(--text)}
.cs-zahl.haupt.cs-zahl--text span{color:var(--text)}
@media(max-width:900px){.cs-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.cs-zahlen{grid-template-columns:minmax(0,1fr)}}
.cs-ergebnis-text{max-width:760px;margin-top:2rem}
.cs-ergebnis-text p{font-size:var(--fs-base);line-height:1.7;color:var(--text2)}
.cs-ergebnis-text p+p{margin-top:1rem}
.cs-quelle{margin-top:1.4rem;font-size:var(--fs-sm);line-height:1.6;color:var(--text3)}
/* Weitere Referenzen mit Standbild */
.cs-mehr{margin-top:4.5rem}
.cs-mehr:first-child{margin-top:0}
.cs-weitere{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:2rem 0 0;padding:0}
.cs-karte{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .3s var(--ease),box-shadow .3s}
.cs-karte:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--brand-mint-line)}
.cs-karte img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.cs-karte>span{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem 1.2rem}
.cs-karte b{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text)}
.cs-karte i{font-style:normal;font-size:var(--fs-sm);line-height:1.5;color:var(--text3)}
@media(max-width:900px){.cs-weitere{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cs-weitere{grid-template-columns:minmax(0,1fr)}}
/* ── Rechtstexte (AGB, Impressum, Datenschutz): nur Lesbarkeit, Text unveraendert ── */
.recht{max-width:760px;margin:0 auto;padding:128px 5% 88px}
.recht h1{font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);line-height:var(--lh-tight);margin-bottom:2rem}
.recht h2{font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:-.015em;line-height:var(--lh-snug);margin:2.8rem 0 .9rem;color:var(--text)}
.recht h3{font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:var(--lh-snug);margin:1.8rem 0 .6rem;color:var(--text)}
.recht p,.recht ul,.recht ol{font-size:var(--fs-base);line-height:1.75;color:var(--text2);margin-bottom:1.1rem}
.recht ul,.recht ol{padding-left:1.3rem}
.recht li{margin-bottom:.55rem}
.recht strong{color:var(--text);font-weight:var(--fw-semibold)}
.recht a{color:var(--text);text-decoration:underline;text-decoration-color:var(--brand-mint-line);text-underline-offset:3px;overflow-wrap:anywhere}
.recht a:hover{text-decoration-color:var(--brand-mint)}
.recht code{font-size:var(--fs-sm);padding:.1em .35em;border-radius:6px;background:var(--glass-strong);color:var(--text)}
@media(max-width:768px){.recht{padding:108px 5% 64px}}
/* ── Runde 12b (15.09.2026): Tippziele mindestens 44 px ──
Menue-Knopf, Logo-Link und Handy-Menue immer. Links in Kopfzeile, Fusszeile und Kontaktzeile nur bei Touch (pointer: coarse),
damit sich mit der Maus nichts verschiebt: die Flaechen wachsen unsichtbar (inline-flex mit Mindesthoehe). Am Handy gleichen
knappere Abstaende in der Fusszeile die zusaetzliche Hoehe aus. */
.n-ham{width:44px;height:44px}
.n-logo{min-height:44px}
.f-brand .n-logo{min-height:0}
.n-mob .mob-cta{display:inline-flex;align-items:center;min-height:44px}
.n-mob .mob-footer a{display:inline-flex;align-items:center;min-height:44px}
@media(pointer:coarse){
.n-links a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.n-links .n-cta{padding-top:0;padding-bottom:0}
.f-social{gap:0;margin-left:-6px}
.f-social a{width:44px;height:44px}
.f-col li{margin-bottom:0}
.f-col a,.f-btm a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.cta-meta{row-gap:0}
.cta-meta a{min-height:44px}
}
@media(pointer:coarse) and (min-width:769px) and (max-width:1180px){.n-links .n-tel{min-width:44px;justify-content:center;margin:0 -14px}}
@media(max-width:480px){.f-grid{padding:28px 0 12px;gap:1rem 1.2rem}.f-col h3{margin-bottom:.2rem}.f-siegel{padding:0 0 20px}}