/* Fünfstern · Design-System · Stand 29.09.2026 (v2)
   Eine Datei für Startseite, Rechtsseiten und 404. Das Portal übernimmt die
   Tokens in seinem Worker. Eine Schrift (Schibsted Grotesk), selbst gehostet,
   keine Verbindung zu Google Fonts. Bewusst nur ein helles Thema: der Grund
   ist die Farbe des perlgestrahlten Aluminiums. */

@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk-latin-600-normal.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap}

:root{
  /* Flächen */
  --alu:#e7e6e2;        /* Grund: perlgestrahltes Aluminium */
  --alu-2:#dddcd6;
  --papier:#f4f3ef;     /* Karten, Eingaben */
  --graphit:#17191d;    /* Text, dunkle Bänder */
  --graphit-2:#23262c;
  /* Text */
  --text:#17191d;
  --text-2:#4a4d55;     /* 6,8:1 auf Alu */
  --text-3:#62656d;     /* 4,7:1 auf Alu */
  --text-dunkel:#b3b5bb;/* Fließtext auf Graphit, 8:1 */
  /* Marke */
  --eloxal:#d8b264;     /* Gold als Fläche und auf Dunkel */
  --messing:#7d5c17;    /* Gold als Text auf Hell, 4,9:1 */
  /* Linien und Zustände */
  --linie:#cfcdc6;
  --linie-dunkel:#34373e;
  --gut:#1e6e3f;
  --warnung:#a3402c;
  /* Schrift */
  --sans:"Schibsted Grotesk",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Raster */
  --breite:1200px;
  --rand:clamp(20px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--alu);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--messing)}
:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand)}
.nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typografie ---------- */
h1,.h1{font-weight:700;font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
h2,.h2{font-weight:700;font-size:clamp(30px,3.8vw,48px);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
h3,.h3{font-weight:600;font-size:clamp(19px,1.6vw,22px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:clamp(17px,1.45vw,19px);line-height:1.55;color:var(--text-2);max-width:56ch}
.klein{font-size:14px;color:var(--text-3)}
.ueber{font-weight:600;font-size:13px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--messing)}
.zahl{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:1px solid var(--graphit);background:var(--graphit);color:var(--papier);font:600 16px/1 var(--sans);text-decoration:none;border-radius:3px;cursor:pointer;transition:background .15s,color .15s}
.knopf:hover{background:#000;text-decoration:none}
.knopf.hell{background:transparent;color:var(--graphit)}
.knopf.hell:hover{background:var(--graphit);color:var(--papier)}
.knopf.gold{background:var(--eloxal);border-color:var(--eloxal);color:var(--graphit)}
.knopf.gold:hover{background:#e3c27a}
.pfeil::after{content:"→"}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--alu) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.kopf .logo img{height:34px;width:auto}
.kopf nav ul{display:flex;gap:28px;font-size:15px;font-weight:500}
.kopf nav a{color:var(--text-2);text-decoration:none}
.kopf nav a:hover{color:var(--text)}
.kopf .rechts{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:500}
.kopf .rechts > a:not(.knopf){text-decoration:none;color:var(--text)}
.kopf .knopf{min-height:42px;padding:0 18px;font-size:15px}
@media (max-width:1000px){.kopf nav{display:none}}
@media (max-width:520px){.kopf .rechts > a:not(.knopf){display:none}.kopf .logo img{height:28px}}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(72px,9vw,120px) 0}
.abschnitt.dunkel{background:var(--graphit);color:var(--alu)}
.abschnitt.dunkel .lead,.abschnitt.dunkel .klein{color:var(--text-dunkel)}
.abschnitt.dunkel .ueber{color:var(--eloxal)}
.abschnitt.papier{background:var(--papier)}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.kopfzeile .ueber{margin-bottom:14px}
.kopfzeile.mitte{grid-template-columns:1fr;text-align:center;justify-items:center}
.kopfzeile.mitte .lead{margin:0 auto}
@media (max-width:860px){.kopfzeile{grid-template-columns:1fr}}
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
@media (max-width:860px){.zwei{grid-template-columns:1fr}}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,3vw,48px) clamp(28px,4vw,64px);align-items:center;padding:clamp(40px,5.5vw,72px) 0 clamp(48px,6vw,72px)}
.hero-kopf{grid-column:1/-1}
.hero .ueber{margin-bottom:16px}
.hero h1{font-size:clamp(38px,5.4vw,76px)}
.hero h1 span{display:block}
.hero .lead{margin-bottom:22px}
.kurz{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:30px;font-weight:500;font-size:15px}
.kurz li{display:flex;align-items:center;gap:8px}
.kurz li::before{content:"";width:10px;height:5px;border-left:2px solid var(--messing);border-bottom:2px solid var(--messing);transform:rotate(-45deg) translateY(-2px)}
.hero figure img{width:100%}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero h1 span{display:inline}.hero figure{max-width:620px;margin:0 auto}}

/* ---------- Profil-Check ---------- */
.check{position:relative;max-width:540px}
.check .feld{display:flex;border:1px solid var(--graphit);background:var(--papier);border-radius:3px;overflow:hidden}
.check input{flex:1;min-width:0;border:0;background:transparent;padding:0 18px;height:58px;font:400 16px var(--sans);color:var(--text)}
.check input::placeholder{color:#7f8188}
.check input:focus{outline:none}
.check .feld:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--eloxal) 55%,transparent)}
.check .knopf{border:0;border-radius:0;min-height:58px}
.check .fein{font-size:14px;color:var(--text-3);margin-top:10px}
.treffer{position:absolute;left:0;right:0;top:60px;z-index:10;background:var(--papier);border:1px solid var(--graphit);border-top:0;box-shadow:0 18px 40px rgba(23,25,29,.12)}
.treffer button{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--linie);background:none;padding:12px 18px;font:500 15px/1.35 var(--sans);color:var(--text);cursor:pointer}
.treffer button:first-child{border-top:0}
.treffer button:hover,.treffer button:focus-visible{background:var(--alu)}
.treffer .neben{display:block;font-weight:400;font-size:13px;color:var(--text-3)}
@media (max-width:520px){.check .feld{flex-direction:column}.check input{flex:none;height:54px}.check .knopf{width:100%}}

/* ---------- Leistung: drei Bausteine ---------- */
.bausteine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.baustein{background:var(--papier);border:1px solid var(--linie);border-radius:4px;display:flex;flex-direction:column;overflow:hidden}
.baustein .bild{height:250px;display:grid;place-items:center;background:linear-gradient(180deg,var(--papier) 0%,var(--alu) 100%);border-bottom:1px solid var(--linie);padding:14px 22px}
.baustein .bild img{height:236px;width:auto;object-fit:contain}
.baustein .text{padding:24px 26px 28px}
.baustein .ueber{margin-bottom:8px}
.baustein h3{margin-bottom:10px}
.baustein .text p:not(.ueber){color:var(--text-2);font-size:16px}
@media (max-width:900px){.bausteine{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
/* Mini-Antwort */
.mini-antwort{width:100%;max-width:300px;font-size:13px;line-height:1.45}
.mini-antwort .bew{background:#fff;border:1px solid var(--linie);border-radius:4px;padding:12px 14px;color:var(--text-2)}
.mini-antwort .bew b{display:block;color:var(--messing);letter-spacing:.12em;font-size:12px;margin-bottom:4px}
.mini-antwort .ant{background:var(--graphit);color:var(--alu);border-radius:4px;padding:12px 14px;margin:10px 0 0 26px;position:relative}
.mini-antwort .ant i{display:block;font-style:normal;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--eloxal);margin-bottom:4px}
/* Mini-Bericht */
.mini-bericht{width:100%;max-width:300px;background:#fff;border:1px solid var(--linie);border-radius:4px;padding:14px 16px}
.mini-bericht .z{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--text-2)}
.mini-bericht .z b{font-size:30px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.mini-bericht .z i{font-style:normal;font-weight:600;color:var(--gut)}
.mini-bericht .saeulen{display:flex;align-items:flex-end;gap:5px;height:84px;margin-top:10px}
.mini-bericht .saeulen span{flex:1;background:var(--eloxal);border-radius:2px 2px 0 0}
.mini-bericht .saeulen span.vor{background:var(--alu-2)}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.ablauf .phase{grid-row:1;font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding-bottom:14px;border-bottom:2px solid var(--linie)}
.ablauf .phase.einmal{grid-column:1/3;margin-right:18px}
.ablauf .phase.laufend{grid-column:3/6;color:var(--messing);border-bottom-color:var(--eloxal)}
.schritt{grid-row:2;padding:24px 18px 0 0;position:relative;display:flex;flex-direction:column;align-items:flex-start}
.schritt .nr{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--papier);border:1px solid var(--linie);margin-bottom:16px}
.schritt.wir .nr{background:var(--eloxal);border-color:var(--eloxal)}
.schritt h3{margin-bottom:8px}
.schritt p{font-size:15px;color:var(--text-2);margin-bottom:14px}
.wer{display:inline-block;margin-top:auto;font-weight:600;font-size:12px;letter-spacing:.04em;padding:5px 9px;border-radius:99px;border:1px solid var(--linie);color:var(--text-2);background:var(--papier)}
.schritt.wir .wer{background:var(--graphit);border-color:var(--graphit);color:var(--eloxal)}
@media (max-width:960px){
  .ablauf{grid-template-columns:1fr}
  .ablauf .phase{grid-row:auto;grid-column:auto!important;margin:0 0 4px!important}
  .ablauf .phase.laufend{margin-top:26px!important}
  .ablauf > li{order:1}.ablauf .phase.einmal{order:0}.ablauf .phase.laufend{order:2}.ablauf > li:nth-child(n+5){order:3}
  .schritt{grid-row:auto;display:grid;grid-template-columns:48px 1fr;padding:16px 0}
  .schritt .nr{grid-row:1/4;margin:0}
  .schritt p{margin-bottom:0}
  .wer{justify-self:start;margin-top:10px}
}
/* Aufwand */
.aufwand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,6vw,72px);background:var(--graphit);color:var(--alu);border-radius:4px}
.aufwand div{padding:clamp(24px,3vw,36px)}
.aufwand div+div{border-left:1px solid var(--linie-dunkel)}
.aufwand b{display:block;font-weight:700;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:-.03em;color:var(--eloxal)}
.aufwand span{display:block;margin-top:10px;color:var(--text-dunkel);font-size:16px;max-width:30ch}
@media (max-width:760px){.aufwand{grid-template-columns:1fr}.aufwand div+div{border-left:0;border-top:1px solid var(--linie-dunkel)}}

/* ---------- Warum ---------- */
.blatt{background:var(--papier);color:var(--text);border-radius:4px;padding:26px 28px}
.blatt .kopf-blatt{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-bottom:1px solid var(--linie);padding-bottom:12px;margin-bottom:4px}
.blatt .name{font-weight:700;font-size:20px}
.blatt .kopf-blatt span:last-child{font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.blatt dl{display:grid;grid-template-columns:1fr auto}
.blatt dt,.blatt dd{padding:11px 0;border-bottom:1px solid var(--linie);font-size:15px}
.blatt dt{color:var(--text-2)}
.blatt dd{font-weight:600;text-align:right}
.blatt dd.schlecht{color:var(--warnung)}
.blatt .anm{font-size:13px;color:var(--text-3);margin-top:12px}
.belege{display:grid;gap:clamp(20px,2.4vw,28px)}
.beleg{border-top:1px solid var(--linie-dunkel);padding-top:22px;display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:start}
.beleg .gross{font-weight:700;font-size:clamp(44px,4.6vw,60px);line-height:1;letter-spacing:-.03em;color:var(--eloxal);grid-row:1/3;min-width:4.2ch}
.beleg h3{color:var(--alu);padding-top:6px}
.beleg p{color:var(--text-dunkel);font-size:15px}
.beleg .quelle{grid-column:2;font-size:13px;color:#8e9199}
.beleg .quelle a{color:var(--text-dunkel)}
.ehrlich{margin-top:clamp(28px,3vw,40px);color:#8e9199;font-size:14px;max-width:90ch}
@media (max-width:560px){.beleg{grid-template-columns:1fr}.beleg .gross{grid-row:auto}.beleg .quelle{grid-column:1}}

/* ---------- Aufsteller ---------- */
.teile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.teil{background:var(--papier);border:1px solid var(--linie);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.teil .foto{aspect-ratio:1/1;display:grid;place-items:center;border-bottom:1px solid var(--linie);background:linear-gradient(180deg,var(--papier),var(--alu))}
.teil .foto img{width:86%}
.teil .text{padding:22px 24px 26px}
.teil .mass{font-weight:500;font-size:14px;color:var(--text-3);margin-top:2px}
.teil p{color:var(--text-2);font-size:16px;margin-top:10px}
@media (max-width:900px){.teile{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--linie)}
.fakt{padding:20px 22px 0 0}
.fakt+.fakt{padding-left:22px;border-left:1px solid var(--linie)}
.fakt dt{font-weight:600;font-size:15px;margin-bottom:6px}
.fakt dd{font-size:15px;color:var(--text-2)}
@media (max-width:900px){.fakten{grid-template-columns:1fr 1fr}.fakt:nth-child(3){padding-left:0;border-left:0}.fakt{padding-bottom:18px}}
@media (max-width:520px){.fakten{grid-template-columns:1fr}.fakt+.fakt{padding-left:0;border-left:0}}
.detail{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(56px,7vw,88px)}
.detail img{width:100%;border-radius:4px}
.detail h3{font-size:clamp(24px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;margin:10px 0 12px}
@media (max-width:860px){.detail{grid-template-columns:1fr}}

/* ---------- Antworten ---------- */
.punkte li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:15px 0;border-top:1px solid var(--linie-dunkel)}
.punkte li:last-child{border-bottom:1px solid var(--linie-dunkel)}
.punkte li::before{content:"";width:11px;height:6px;margin-top:8px;border-left:2px solid var(--eloxal);border-bottom:2px solid var(--eloxal);transform:rotate(-45deg)}
.punkte b{display:block;color:var(--alu);font-weight:600}
.punkte span{color:var(--text-dunkel);font-size:15px}
.beispiel{background:var(--graphit-2);border:1px solid var(--linie-dunkel);border-radius:4px}
.beispiel .bewertung{padding:24px 26px;border-bottom:1px solid var(--linie-dunkel)}
.beispiel .sterne{color:var(--eloxal);letter-spacing:.15em;font-size:15px}
.beispiel .wer-b{font-size:13px;color:#8e9199;margin:4px 0 10px}
.beispiel .bewertung p:last-child{color:#d4d5d9}
.beispiel .antwort{padding:24px 26px}
.beispiel .status{font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--eloxal);margin-bottom:10px}
.beispiel .antwort-text{font-size:19px;line-height:1.5;color:var(--alu)}
.beispiel .sig{font-size:14px;color:var(--text-dunkel);margin-top:12px}
.beispiel .leiste{display:flex;gap:10px;padding:0 26px 24px}
.beispiel .leiste span{font-weight:600;font-size:13px;line-height:1;padding:11px 14px;border:1px solid var(--linie-dunkel);border-radius:3px;color:#c7c9ce}
.beispiel .leiste span.an{background:var(--eloxal);border-color:var(--eloxal);color:var(--graphit)}

/* ---------- Portal / Bericht ---------- */
.bericht{background:var(--papier);border:1px solid var(--linie);border-radius:4px;box-shadow:0 30px 60px -30px rgba(23,25,29,.25);overflow:hidden}
.bericht .kopf-b{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--linie);font-weight:600;font-size:13px;color:var(--text-2)}
.bericht .kopf-b span:last-child{font-weight:500;color:var(--text-3)}
.bericht .kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--linie)}
.kachel{padding:16px 18px;border-right:1px solid var(--linie)}
.kachel:last-child{border-right:0}
.kachel b{display:block;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.02em}
.kachel span{display:block;font-size:13px;color:var(--text-2);margin-top:6px}
.kachel i{font-style:normal;font-weight:600;color:var(--gut)}
.bericht .verlauf{display:flex;align-items:flex-end;gap:6px;height:120px;padding:18px 20px 10px}
.bericht .verlauf span{flex:1;background:var(--eloxal);min-height:4px;border-radius:2px 2px 0 0}
.bericht .verlauf span.vor{background:var(--alu-2)}
.bericht .stimmen{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie)}
.bericht .stimmen div{padding:14px 20px}
.bericht .stimmen div+div{border-left:1px solid var(--linie)}
.bericht .stimmen b{font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.bericht .stimmen p{font-size:14px;color:var(--text-2);margin-top:4px}
@media (max-width:640px){.bericht .kacheln{grid-template-columns:1fr 1fr}.kachel:nth-child(2){border-right:0}.kachel:nth-child(-n+2){border-bottom:1px solid var(--linie)}.bericht .stimmen{grid-template-columns:1fr}.bericht .stimmen div+div{border-left:0;border-top:1px solid var(--linie)}}
.liste-haken li{padding:13px 0 13px 30px;border-top:1px solid var(--linie);position:relative;color:var(--text-2)}
.liste-haken li:last-child{border-bottom:1px solid var(--linie)}
.liste-haken li::before{content:"";position:absolute;left:2px;top:21px;width:11px;height:6px;border-left:2px solid var(--messing);border-bottom:2px solid var(--messing);transform:rotate(-45deg)}
.liste-haken b{color:var(--text);font-weight:600}

/* ---------- Preise ---------- */
.vorab{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border:1px solid var(--linie);border-radius:4px;background:var(--papier);padding:20px 24px;margin-bottom:20px}
.vorab b{font-weight:700;font-size:19px}
.vorab p{color:var(--text-2);font-size:15px;margin-top:2px}
.stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.stufe{background:var(--papier);border:1px solid var(--linie);border-radius:4px;padding:28px 26px 28px;display:flex;flex-direction:column;position:relative}
.stufe.hervor{border-color:var(--graphit);box-shadow:inset 0 0 0 1px var(--graphit)}
.stufe .fahne{position:absolute;top:-1px;right:22px;background:var(--graphit);color:var(--eloxal);font-weight:600;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:0 0 3px 3px}
.stufe h3{font-size:24px;font-weight:700}
.stufe .fuer{font-size:15px;color:var(--text-2);margin-top:4px;min-height:48px}
.stufe .preis{font-weight:700;font-size:52px;line-height:1;letter-spacing:-.03em;margin:18px 0 6px;font-variant-numeric:tabular-nums}
.stufe .preis small{font-weight:500;font-size:15px;letter-spacing:0;color:var(--text-2);margin-left:4px}
.stufe .bedingung{font-size:14px;color:var(--text-3);min-height:42px}
.stufe ul{margin-top:16px;border-top:1px solid var(--linie)}
.stufe li{padding:10px 0 10px 24px;border-bottom:1px solid var(--linie);font-size:15px;color:var(--text-2);position:relative}
.stufe li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:5px;border-left:2px solid var(--messing);border-bottom:2px solid var(--messing);transform:rotate(-45deg)}
.stufe li b{color:var(--text);font-weight:600}
.stufe .fahne.leise{background:var(--papier);color:var(--text-3);border:1px solid var(--linie);border-top:0}
.stufe .wert{font-size:14px;font-weight:600;color:var(--messing);margin-top:6px}
.stufe .bestellen{margin-top:auto;padding-top:22px}
.stufe .bestellen .knopf{width:100%}
.check .fein a{color:inherit}
@media (max-width:960px){.stufen{grid-template-columns:1fr;max-width:560px;margin:0 auto}.stufe .fuer,.stufe .bedingung{min-height:0}}
details.katalog{margin-top:28px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
details.katalog summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between}
details.katalog summary::-webkit-details-marker{display:none}
details.katalog summary::after{content:"+";color:var(--messing)}
details.katalog[open] summary::after{content:"−"}
.tabelle{overflow-x:auto;padding-bottom:18px}
.tabelle table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.tabelle th,.tabelle td{padding:10px 12px;border-bottom:1px solid var(--linie);text-align:center}
.tabelle th:first-child,.tabelle td:first-child{text-align:left}
.tabelle th[scope=row]{font-weight:400;color:var(--text-2)}
.tabelle thead th{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.tabelle td.ja{color:var(--messing);font-weight:700}
.tabelle td.nein{color:#a3a5aa}
.hinweise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:36px}
.hinweise p{font-size:15px;color:var(--text-2)}
.hinweise b{display:block;font-weight:600;font-size:17px;color:var(--text);margin-bottom:4px}
@media (max-width:860px){.hinweise{grid-template-columns:1fr}}

/* ---------- Fragen ---------- */
.fragen details{border-top:1px solid var(--linie)}
.fragen details:last-child{border-bottom:1px solid var(--linie)}
.fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-weight:600;font-size:clamp(17px,1.5vw,19px);line-height:1.35}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;color:var(--messing)}
.fragen details[open] summary::after{content:"−"}
.fragen details p{color:var(--text-2);max-width:68ch;padding:0 0 22px}

/* ---------- Abschluss & Fuß ---------- */
.abschluss .knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.fuss{background:var(--graphit);color:var(--text-dunkel);padding:56px 0 40px;font-size:14px;border-top:1px solid var(--linie-dunkel)}
.fuss .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.fuss img{height:32px;width:auto;margin-bottom:16px}
.fuss h4{font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#8e9199;margin-bottom:12px}
.fuss li{padding:3px 0}
.fuss a{color:#d4d5d9;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .unten{grid-column:1/-1;border-top:1px solid var(--linie-dunkel);padding-top:20px;margin-top:10px;font-size:13px;color:#8e9199}
@media (max-width:760px){.fuss .wrap{grid-template-columns:1fr}}

/* ---------- Textseiten (Impressum, Datenschutz, AGB, 404) ---------- */
.textseite{padding:clamp(48px,7vw,96px) 0}
.textseite .inhalt{max-width:720px}
.textseite .ueber{margin-bottom:14px}
.textseite h1{margin-bottom:24px}
.textseite h2{font-size:clamp(22px,2.2vw,28px);margin:44px 0 12px}
.textseite h3{font-weight:600;font-size:17px;margin:28px 0 8px}
.textseite p,.textseite li{color:var(--text-2)}
.textseite p+p{margin-top:12px}
.textseite ul,.textseite ol{padding-left:22px;margin:10px 0;list-style:disc}
.textseite ol{list-style:decimal}
.textseite li{margin:6px 0}
.textseite table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.textseite th,.textseite td{border-bottom:1px solid var(--linie);padding:9px 10px;text-align:left;vertical-align:top;color:var(--text-2)}
.textseite th{font-weight:600;color:var(--text)}
.textseite .stand{font-size:13px;color:var(--text-3);margin-top:48px}
.textseite .stand{font-size:14px;color:var(--text-3);margin:-12px 0 28px}
.textseite h2:first-of-type{margin-top:28px}
.textseite th{background:var(--alu-2)}
.textseite .box{background:var(--papier);border-left:3px solid var(--eloxal);padding:16px 18px;margin:18px 0;border-radius:0 4px 4px 0}
.textseite .box p{margin:0}
.textseite .en{font-style:italic}
.textseite code{font-size:.9em;background:var(--papier);padding:1px 5px;border-radius:3px}
.textseite code,.textseite td,.textseite th,.textseite p{overflow-wrap:anywhere}
.textseite h1{font-size:clamp(30px,5vw,56px);hyphens:auto;-webkit-hyphens:auto}