*,*::before,*::after{box-sizing:border-box}
:root{
  /* Markenfarben aus dem Logo gemessen (Entwurf 2) */
  --gold:#F3A61F; --gold-warm:#EF7624;
  --tinte:#0A0C14; --tinte-2:#111524; --tinte-3:#171C2E;
  --linie:rgba(255,255,255,.10); --linie-hell:#E6E8EF;
  --text:#0C1020; --text-leise:#5A6178;
  --weiss-leise:rgba(255,255,255,.66);
  --breite:1260px; --luft:clamp(72px,9vw,132px);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}

/* ── Typografie: die gemessenen Werte von deineakquise.de ── */
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.045em;line-height:1.01}
h1{font-size:clamp(38px,4.7vw,58px);text-wrap:balance}
h2{font-size:clamp(32px,4vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.07}
h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
p{margin:0}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 24px}
.kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.verlauf{background:linear-gradient(97deg,var(--gold) 8%,var(--gold-warm) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fuehrung{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--text-leise);max-width:34em}

/* ── Pillen und Knoepfe ── */
.knopf{display:inline-flex;align-items:center;gap:10px;border-radius:999px;
  padding:15px 26px;font-size:15px;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;white-space:nowrap}
.knopf:hover{transform:translateY(-1px)}
.knopf-gold{background:linear-gradient(97deg,var(--gold),var(--gold-warm));color:#1A1206;
  box-shadow:0 8px 24px rgba(243,166,31,.28)}
.knopf-klar{background:#fff;color:var(--text);border-color:var(--linie-hell)}
.knopf-geist{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(8px)}
.knopf-s{padding:11px 18px;font-size:14px}
.marke-pille{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:7px 15px 7px 8px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:var(--weiss-leise)}
.marke-pille b{background:var(--gold);color:#1A1206;border-radius:999px;
  padding:3px 9px;font-size:11px;font-weight:900;letter-spacing:.06em}

/* ── Kopfleiste: schwebend, wie bei der Vorlage ── */
.kopf{position:sticky;top:0;z-index:60;padding:14px 0;
  background:rgba(10,12,20,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;gap:26px}
.kopf .marke{display:inline-flex;align-items:center;color:#fff}
.kopf .marke svg{height:30px;width:auto;display:block}
.menue{display:flex;gap:24px;list-style:none;margin:0;padding:0;
  font-size:14.5px;font-weight:600;color:var(--weiss-leise);margin-left:8px}
.menue a{text-decoration:none}
.menue a:hover{color:#fff}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:12px}
.korb{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none}
.korb-zahl{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;
  border-radius:999px;background:var(--gold);color:#1A1206;
  font-size:11px;font-weight:900;display:grid;place-items:center;padding:0 5px}

/* ── Hero: echtes Foto, Verlauf darueber, schwebende Belege ── */
.hero{position:relative;background:var(--tinte);color:#fff;overflow:hidden;
  padding:clamp(64px,8vw,104px) 0 clamp(72px,9vw,116px)}
/* Das Foto ist auf den linken Teil des Archivbildes zugeschnitten — die dort
   eingebrannte Bewertungskarte ist damit weg, das Motiv (Hand am Smartphone)
   sitzt im unteren Drittel. Deshalb Ausschnitt tief und keine Maske mehr noetig. */
.hero-bild{position:absolute;inset:0;background-size:cover;background-position:44% 72%;
  opacity:.72;filter:saturate(.95) contrast(1.06)}
.hero-schleier{position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(10,12,20,.95) 8%,rgba(10,12,20,.80) 42%,rgba(10,12,20,.46) 78%,rgba(10,12,20,.34) 100%)}
.hero-schein{position:absolute;left:-8%;top:-32%;width:74%;height:132%;pointer-events:none;
  background:radial-gradient(52% 48% at 50% 50%,rgba(243,166,31,.20),transparent 68%);
  filter:blur(28px)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.86fr);
  gap:clamp(32px,5vw,68px);align-items:center}
.hero h1{margin:18px 0 0}
.hero .fuehrung{color:var(--weiss-leise);margin-top:20px;max-width:31em}
.hero-haken{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px;
  font-size:15.5px;color:rgba(255,255,255,.86)}
.hero-haken li{display:flex;gap:11px;align-items:flex-start}
.hero-haken svg{flex:0 0 auto;margin-top:3px;color:var(--gold)}
.hero-tasten{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-fein{margin-top:14px;font-size:13px;color:rgba(255,255,255,.46)}

/* Kennzahlen: Akzent auf dem Zeichen, wie in der Vorlage */
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px);margin-top:clamp(34px,4vw,50px);
  padding-top:26px;border-top:1px solid var(--linie)}
.zahl-b{font-size:clamp(21px,2.1vw,28px);font-weight:900;letter-spacing:-.04em;line-height:1}
.zahl-b span{color:var(--gold)}
.zahl-was{font-size:12.5px;color:rgba(255,255,255,.52);margin-top:7px;line-height:1.42}

/* schwebende Beweis-Kaertchen */
.buehne{position:relative;padding:58px 0}
.karte-glas{background:rgba(18,22,36,.80);border:1px solid rgba(255,255,255,.13);
  border-radius:22px;padding:22px;backdrop-filter:blur(16px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85)}
.beleg-karte{position:absolute;display:flex;align-items:center;gap:10px;max-width:262px;
  background:#fff;color:var(--text);border-radius:16px;padding:11px 15px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.55);font-size:13px;z-index:3}
.beleg-karte .punkt{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  background:rgba(34,178,102,.14);color:#1E9C58;flex:0 0 auto}
.beleg-karte b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.beleg-karte small{color:var(--text-leise);font-size:11.5px}
.beleg-1{top:-8px;right:-52px}
.beleg-2{bottom:-14px;left:-52px}

/* Sternkarte */
.sk-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--linie)}
.sk-note{font-size:40px;font-weight:900;letter-spacing:-.045em;line-height:1}
.sk-note small{font-size:15px;font-weight:600;color:rgba(255,255,255,.42);letter-spacing:-.01em}
.sk-sterne{color:var(--gold);font-size:15px;letter-spacing:2px;margin-top:5px}
.sk-quelle{font-size:11.5px;color:rgba(255,255,255,.42);text-align:right;line-height:1.4}
.balken{display:grid;grid-template-columns:30px 1fr 38px;gap:11px;align-items:center;
  font-size:12px;color:rgba(255,255,255,.56);margin-bottom:9px}
.spur{height:7px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.fuell{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-warm))}
.sk-fuss{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:15px;
  border-top:1px solid var(--linie);font-size:12.5px;color:rgba(255,255,255,.52)}
.sk-fuss i{width:7px;height:7px;border-radius:999px;background:#2FC77E;flex:0 0 auto}

/* Plattform-Leiste */
.leiste{background:var(--tinte-2);border-top:1px solid var(--linie);padding:22px 0}
.leiste-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(20px,3.4vw,44px)}
.leiste-titel{width:100%;text-align:center;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.50);margin-bottom:4px}
.leiste b{font-size:17px;font-weight:800;letter-spacing:-.03em;color:rgba(255,255,255,.62)}

/* ── Abschnitte ── */
section{padding:var(--luft) 0}
.dunkel{background:var(--tinte);color:#fff}
/* ⛔ Der Kontaktteil ist ebenfalls dunkel, traegt aber nicht die Klasse .dunkel —
   sein Fliesstext stand deshalb dunkelgrau auf dunkel (Kontrast 3.18). */
.dunkel .fuehrung,.kontakt .fuehrung{color:var(--weiss-leise)}
.grau{background:#F7F8FB}
/* ⛔ Die Begrenzung gehoert an die UEBERSCHRIFT, nicht an den Container:
   `ch` rechnet gegen die Schriftgroesse DES ELEMENTS — am div mit 17px ergaben
   22ch nur 236px, und die 50px-Ueberschrift brach auf fuenf Zeilen um. */
.kopf-mitte{text-align:center;margin:0 auto clamp(38px,4.4vw,58px)}
.kopf-mitte h2{max-width:15em;margin-left:auto;margin-right:auto}
.kopf-mitte .fuehrung{max-width:52ch;margin:18px auto 0;text-align:center}
.kopf-mitte .kicker{text-align:center}

/* Aussage-Abschnitt: ein grosser Satz, viel Luft — das Muster beider Vorlagen */
.aussage{text-align:center;padding:clamp(88px,11vw,150px) 0}
.aussage h2{font-size:clamp(34px,4.8vw,60px);max-width:17ch;margin:0 auto;
  letter-spacing:-.042em;line-height:1.04}
.aussage .fuehrung{margin:26px auto 0;text-align:center;max-width:50ch}

/* Produktraster */
.produkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
  justify-content:center}
@media(min-width:900px){.produkte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.produkt{background:#fff;border:1px solid var(--linie-hell);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.produkt:hover{transform:translateY(-3px);border-color:#D6DAE6;
  box-shadow:0 22px 48px -22px rgba(16,22,44,.30)}
.produkt-bild{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  text-decoration:none;background:#fff;border-bottom:1px solid var(--linie-hell)}
.produkt-bild img{width:100%;height:100%;object-fit:contain;padding:14px;
  transition:transform .28s ease}
.produkt:hover .produkt-bild img{transform:scale(1.035)}
.produkt-bild .sterne-band{position:absolute;left:12px;bottom:12px;display:inline-flex;
  align-items:center;gap:5px;background:rgba(10,12,20,.86);color:var(--gold);
  border-radius:999px;padding:4px 10px;font-size:11px;letter-spacing:1.5px;
  backdrop-filter:blur(6px)}
.pb-sterne{color:var(--gold);letter-spacing:3px;font-size:14px}
.pb-marke{font-weight:800;font-size:16px;letter-spacing:-.02em}
.produkt-koerper{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1}
.produkt-name{font-size:15.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.produkt-name a{text-decoration:none}
.produkt-preis{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:auto}
.pp-ab{font-size:12px;color:var(--text-leise);font-weight:600}
.pp-wert{font-size:23px;font-weight:900;letter-spacing:-.04em}
.pp-spanne{font-size:12px;color:var(--text-leise);width:100%}
.produkt-tasten{display:flex;align-items:center;gap:10px}
.produkt-mehr{font-size:13px;color:var(--text-leise);text-decoration:none;font-weight:600}
.produkt-mehr:hover{color:var(--text)}

/* Konfigurator */
.konf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,34px);
  background:#fff;border:1px solid var(--linie-hell);border-radius:26px;padding:clamp(22px,3vw,34px)}
.kf{margin-bottom:22px}
.kf > label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-leise);margin-bottom:11px}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl input{position:absolute;opacity:0;pointer-events:none}
.wahl label{display:inline-flex;align-items:center;justify-content:center;min-width:46px;
  min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--linie-hell);
  font-size:14px;font-weight:700;cursor:pointer;background:#fff;transition:.14s}
.wahl label:hover{border-color:#C9CEDD}
.wahl input:checked + label{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.wahl input:disabled + label{opacity:.28;cursor:not-allowed}
select,textarea,input[type=text],input[type=email]{width:100%;padding:13px 15px;border-radius:14px;
  border:1px solid var(--linie-hell);background:#fff;font:inherit;font-size:15px;color:inherit;
  min-height:46px}
.konf-summe{background:var(--tinte);color:#fff;border-radius:20px;padding:24px;align-self:start}
.summe-zeile{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;
  color:rgba(255,255,255,.56);padding:9px 0;border-bottom:1px solid var(--linie)}
.summe-zeile b{color:#fff;font-weight:700;text-align:right}
.summe-gesamt{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  margin:18px 0;padding-top:16px}
.summe-gesamt .l{font-size:12.5px;color:rgba(255,255,255,.52);line-height:1.4}
.summe-preis{font-size:31px;font-weight:900;letter-spacing:-.045em;line-height:1;display:block;
  text-align:right}
.summe-stueck{display:block;text-align:right;font-size:12px;color:rgba(255,255,255,.52);margin-top:5px}
.konf-summe .knopf{width:100%;justify-content:center}
.konf-hinweis{font-size:11.5px;color:rgba(255,255,255,.44);text-align:center;margin-top:12px;line-height:1.5}

/* Warum-Karten */
.drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:18px}
.karte{background:#fff;border:1px solid var(--linie-hell);border-radius:22px;padding:26px}
.karte-ikon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(243,166,31,.16),rgba(239,118,36,.10));
  color:var(--gold-warm);margin-bottom:16px}
.karte h3{margin-bottom:9px}
.karte p{font-size:15px;color:var(--text-leise);line-height:1.62}
.karte-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 11px;
  font-size:12px;font-weight:600;background:#F2F4F8;color:var(--text-leise)}

/* Wirkung: Bild + Text */
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:clamp(28px,4.4vw,60px);align-items:center}
.bild-rund{border-radius:24px;overflow:hidden;border:1px solid var(--linie)}
.rechnung{display:grid;gap:11px;margin-top:24px}
.rechnung-zeile{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1px solid var(--linie);font-size:14px}
.rechnung-zeile .lab{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.42);font-weight:700}
.rechnung-zeile .wert{color:var(--gold);font-size:15px;letter-spacing:2px}
.rechnung-zeile .rechts{font-size:12.5px;color:rgba(255,255,255,.52);white-space:nowrap}

/* FAQ */
.faq-liste{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq-frage{background:#fff;border:1px solid var(--linie-hell);border-radius:16px;overflow:hidden}
.faq-frage summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;
  font-size:16px;font-weight:700;letter-spacing:-.015em;min-height:44px}
.faq-frage summary::-webkit-details-marker{display:none}
.faq-frage summary::after{content:"+";font-size:22px;font-weight:400;color:var(--gold);
  flex:0 0 auto;line-height:1}
.faq-frage[open] summary::after{content:"–"}
.faq-frage .antwort{padding:0 22px 20px;font-size:15px;color:var(--text-leise);line-height:1.68}

/* Kontakt */
.kontakt{position:relative;background:var(--tinte);color:#fff;overflow:hidden}
.kontakt-bild{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16}
.kontakt-in{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4.4vw,56px);align-items:start}
.kontakt-fakt{display:flex;gap:14px;align-items:flex-start;padding:16px 0;
  border-top:1px solid var(--linie)}
.kontakt-fakt .ik{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(243,166,31,.14);color:var(--gold);flex:0 0 auto}
.kontakt-fakt .lab{font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.44);font-weight:700}
.kontakt-fakt .wert{font-size:15.5px;font-weight:700;letter-spacing:-.015em;margin-top:3px}
.form{background:rgba(255,255,255,.05);border:1px solid var(--linie);border-radius:22px;
  padding:clamp(20px,3vw,30px);backdrop-filter:blur(10px)}
.form .paar{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.feld{margin-bottom:14px}
.feld label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.62);margin-bottom:7px}
.form input,.form select,.form textarea{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.15);color:#fff}
.form textarea{min-height:104px;resize:vertical}
.form .knopf{width:100%;justify-content:center;margin-top:6px}
.form-fein{font-size:11.5px;color:rgba(255,255,255,.42);text-align:center;margin-top:11px}

/* Fuss */
.fuss{background:#06080F;color:rgba(255,255,255,.56);padding:clamp(48px,6vw,70px) 0 30px;
  font-size:14px;border-top:1px solid var(--linie)}
.fuss-raster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.fuss svg[role=img]{height:34px;width:auto;margin-bottom:14px;color:#fff;display:block}
.fuss h3{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  margin-bottom:13px;font-weight:800}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss a{text-decoration:none}
.fuss a:hover{color:#fff}
.fuss-unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin-top:38px;padding-top:22px;border-top:1px solid var(--linie);
  font-size:12.5px;color:rgba(255,255,255,.38)}

.fahne{position:fixed;left:14px;bottom:14px;z-index:99;max-width:310px;
  background:rgba(10,12,20,.94);color:rgba(255,255,255,.76);border:1px solid var(--linie);
  border-radius:14px;padding:11px 14px;font-size:11.5px;line-height:1.5;
  backdrop-filter:blur(10px)}
.fahne b{color:var(--gold)}

@media(max-width:900px){
  .hero-in,.konf,.fuss-raster{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .menue{display:none}
  .beleg-1{top:0;right:0}
  .beleg-2{bottom:0;left:0}
}
@media(max-width:560px){
  .fuss-raster{grid-template-columns:1fr}
  .form .paar{grid-template-columns:1fr}
  .zahlen{grid-template-columns:1fr;gap:18px}
  /* Die Sternenkette (10 Zeichen mit Sperrung) sprengte auf 390px die Zeile */
  .rechnung-zeile{flex-wrap:wrap;gap:8px}
  .rechnung-zeile .wert{font-size:13px;letter-spacing:1px;line-height:1.3;
    overflow-wrap:anywhere;min-width:0}
  .rechnung-zeile .rechts{white-space:normal;width:100%}
  h1{letter-spacing:-.035em}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ══════════ Produktseite — gleicher Stil, eigene Aufgabe ══════════ */
.pk{position:relative;background:var(--tinte);color:#fff;overflow:hidden;
  padding:clamp(46px,6vw,74px) 0 clamp(52px,7vw,86px)}
.pk-schein{position:absolute;right:-10%;top:-40%;width:70%;height:150%;pointer-events:none;
  background:radial-gradient(50% 46% at 50% 50%,rgba(243,166,31,.17),transparent 68%);filter:blur(30px)}
.pk-in{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,4.4vw,58px);align-items:start}
.brotkrumen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;
  color:rgba(255,255,255,.48);margin-bottom:20px}
.brotkrumen a{text-decoration:none}
.brotkrumen a:hover{color:#fff}
.brotkrumen span{opacity:.5}
.pk h1{font-size:clamp(32px,3.8vw,48px);margin:12px 0 0}
.pk-kurz{color:var(--weiss-leise);margin-top:16px;font-size:16.5px;line-height:1.6;max-width:34em}
.pk-haken{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;
  font-size:15px;color:rgba(255,255,255,.84)}
.pk-haken li{display:flex;gap:10px;align-items:flex-start}
.pk-haken svg{flex:0 0 auto;margin-top:3px;color:var(--gold)}

/* Staffel als Tabelle — der eigentliche Mehrwert gegenueber dem Standard */
.staffel{margin-top:clamp(28px,3.4vw,40px);border:1px solid var(--linie);border-radius:18px;
  overflow:hidden}
.staffel-kopf{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 18px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--linie)}
.staffel-kopf .t{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  color:rgba(255,255,255,.56)}
.staffel table{width:100%;border-collapse:collapse;font-size:14.5px}
.staffel th,.staffel td{padding:11px 18px;text-align:right;border-bottom:1px solid var(--linie)}
.staffel th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.44);text-align:right}
.staffel th:first-child,.staffel td:first-child{text-align:left}
.staffel tr:last-child td{border-bottom:0}
.staffel .menge{font-weight:800}
.staffel .stueck{color:rgba(255,255,255,.52);font-size:13px}
.staffel .gesamt{font-weight:800;letter-spacing:-.02em}
.staffel .beste{color:var(--gold)}

/* Kaufkarte */
.kaufkarte{background:rgba(18,22,36,.84);border:1px solid rgba(255,255,255,.14);
  border-radius:24px;padding:clamp(20px,2.6vw,28px);backdrop-filter:blur(16px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);position:sticky;top:86px}
.kaufkarte .preis-gross{font-size:clamp(30px,3.4vw,40px);font-weight:900;letter-spacing:-.045em;
  line-height:1;display:block}
.kaufkarte .preis-hinweis{font-size:12.5px;color:rgba(255,255,255,.52);margin-top:7px}
.kaufkarte .trenner{height:1px;background:var(--linie);margin:20px 0}
.kauf-fein{display:grid;gap:9px;margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.56)}
.kauf-fein div{display:flex;gap:9px;align-items:flex-start}
.kauf-fein svg{flex:0 0 auto;margin-top:2px;color:var(--gold)}

/* WooCommerce-Formular in unseren Stil bringen — Woo baut es, wir kleiden es ein */
.kaufkarte .variations{width:100%;margin-bottom:16px}
.kaufkarte .variations td,.kaufkarte .variations th{display:block;padding:0;text-align:left;border:0}
.kaufkarte .variations label{font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.56);margin-bottom:9px;display:block}
.kaufkarte .variations select{width:100%;padding:13px 15px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;
  font:inherit;font-size:15px;min-height:46px}
.kaufkarte .variations select option{background:#12162A;color:#fff}
.kaufkarte .reset_variations{display:inline-block;margin-top:9px;font-size:12.5px;
  color:rgba(255,255,255,.52)}
.kaufkarte .woocommerce-variation-price{margin:14px 0}
.kaufkarte .woocommerce-variation-price .price{font-size:26px;font-weight:900;
  letter-spacing:-.04em;color:#fff}
.kaufkarte .quantity{display:inline-flex;align-items:center;margin-right:10px}
.kaufkarte .quantity input{width:74px;padding:12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;
  font:inherit;text-align:center;min-height:46px}
.kaufkarte form.cart{margin:0}
.kaufkarte .single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;
  gap:9px;width:100%;margin-top:12px;border-radius:999px;padding:15px 24px;font-size:15.5px;
  font-weight:800;letter-spacing:-.01em;border:0;cursor:pointer;
  background:linear-gradient(97deg,var(--gold),var(--gold-warm));color:#1A1206;
  box-shadow:0 8px 24px rgba(243,166,31,.28);transition:transform .16s ease}
.kaufkarte .single_add_to_cart_button:hover{transform:translateY(-1px)}
.kaufkarte .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.kaufkarte .stock{font-size:12.5px;color:#5FD69B;margin-top:10px}
.kaufkarte .woocommerce-variation-availability{font-size:12.5px}

/* Beschreibungsteil */
.pb{padding:var(--luft) 0}
.pb-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(28px,4.4vw,60px);align-items:start}
.pb-text{font-size:16.5px;line-height:1.72;color:#22283A;max-width:38em}
.pb-text h2{font-size:clamp(24px,2.5vw,31px);margin:38px 0 14px;letter-spacing:-.035em}
.pb-text h2:first-child{margin-top:0}
.pb-text h3{font-size:19px;margin:26px 0 9px}
.pb-text p{margin:0 0 15px}
.pb-text ul,.pb-text ol{margin:0 0 16px;padding-left:1.25em}
.pb-text li{margin-bottom:7px}
.pb-text img{border-radius:16px;margin:18px 0}
.pb-text table{width:100%;border-collapse:collapse;font-size:15px;margin:18px 0}
.pb-text th,.pb-text td{padding:10px 12px;border-bottom:1px solid var(--linie-hell);text-align:left}
.merk{position:sticky;top:86px;background:#F7F8FB;border:1px solid var(--linie-hell);
  border-radius:20px;padding:22px}
.merk h3{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-leise);
  margin-bottom:14px;font-weight:800}
.merk-zeile{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--linie-hell);font-size:14px}
.merk-zeile:last-of-type{border-bottom:0}
.merk-zeile span{color:var(--text-leise)}
.merk-zeile b{text-align:right}

@media(max-width:900px){
  .pk-in,.pb-in{grid-template-columns:1fr}
  .kaufkarte,.merk{position:static}
}

/* ══════════════════════════════════════════════════════════════════════════
   Inhaltsseiten (Ratgeber, Recht) — vorlage-ratgeber.php
   ⛔ Der Seitentext bringt bei 112 von 207 Seiten eigenes <style> und
      Inline-Breiten mit. Diese Regeln sind deshalb bewusst niedrig gewichtet:
      wo die Seite selbst etwas vorgibt, gewinnt sie.
   ⛔ Lesebreite in `em`, NICHT in `ch` — `ch` misst die Ziffer 0 und faellt
      dadurch rund 25 % zu breit aus (belegt: 72ch = 896px = 105 Zeichen).
   ══════════════════════════════════════════════════════════════════════════ */

.ts-kopf{position:relative;background:var(--tinte);color:#fff;overflow:hidden;
  padding:clamp(46px,6vw,86px) 0 clamp(38px,5vw,66px)}
.ts-schein{position:absolute;inset:-40% -10% auto -10%;height:150%;pointer-events:none;
  background:radial-gradient(58% 60% at 22% 12%,rgba(243,166,31,.22),transparent 70%)}
.ts-kopf-in{position:relative}
.ts-kopf .kicker{color:var(--gold)}
.ts-kopf h1{margin:.18em 0 0;font-weight:900;letter-spacing:-.038em;line-height:1.06;
  font-size:clamp(30px,3.7vw,50px);max-width:17em}
.ts-kopf .brotkrumen{margin-bottom:18px}
.ts-kopf .brotkrumen a{color:rgba(255,255,255,.78)}
.ts-kopf .brotkrumen a:hover{color:var(--gold)}
.ts-kopf .brotkrumen span{color:rgba(255,255,255,.45)}

.ts-huelle{padding:clamp(40px,5vw,68px) 0 clamp(46px,6vw,80px)}
.ts-text{font-size:17px;line-height:1.72;color:var(--text)}
.ts-text > p,
.ts-text > ul,
.ts-text > ol,
.ts-text > blockquote{max-width:38em}
.ts-text h2{font-weight:800;letter-spacing:-.028em;line-height:1.14;
  font-size:clamp(24px,2.5vw,33px);margin:1.9em 0 .5em;max-width:19em}
.ts-text h3{font-weight:800;letter-spacing:-.02em;font-size:clamp(19px,1.6vw,22px);
  margin:1.5em 0 .4em;max-width:22em}
.ts-text h4{font-weight:700;font-size:18px;margin:1.3em 0 .35em}
.ts-text a{color:#B4740A;text-decoration:underline;text-underline-offset:2px}
.ts-text a:hover{color:var(--gold-warm)}
.ts-text ul,.ts-text ol{padding-left:1.35em}
.ts-text li{margin:.3em 0}
.ts-text img{max-width:100%;height:auto;border-radius:14px}
.ts-text table{border-collapse:collapse;width:100%;font-size:15.5px;margin:1.4em 0}
.ts-text th,.ts-text td{border:1px solid var(--linie-hell);padding:10px 13px;
  text-align:left;vertical-align:top}
.ts-text th{background:#F6F7FA;font-weight:700}
/* Breites gehoert in einen eigenen Rollbereich, sonst schiebt es die Seite auf */
.ts-text .tabellen-rolle,.ts-text figure{overflow-x:auto}
.ts-text hr{border:0;border-top:1px solid var(--linie-hell);margin:2.2em 0}

.ts-band{background:var(--tinte-2);color:#fff;padding:clamp(44px,5.5vw,72px) 0}
.ts-band-in{display:grid;gap:34px;align-items:center;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ts-band .kicker{color:var(--gold)}
.ts-band h2{margin:.2em 0 .35em;font-weight:900;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(24px,2.6vw,34px);max-width:14em}
.ts-band p{margin:0 0 20px;color:var(--weiss-leise);max-width:30em}
.ts-band-liste{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ts-band-liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border:1px solid var(--linie);border-radius:13px;
  background:rgba(255,255,255,.04);color:#fff;text-decoration:none;font-weight:600}
.ts-band-liste a:hover{border-color:rgba(243,166,31,.55);background:rgba(243,166,31,.10)}

@media (max-width:860px){
  .ts-band-in{grid-template-columns:1fr}
  .ts-text{font-size:16.5px}
}

/* ── Korrekturen nach der ersten Messung an /google-bewertungen/ ─────────────
   ⛔ 1) Die H1 im dunklen Kopf kam in rgb(15,23,42) auf rgb(10,12,20) heraus —
         Kontrast 1,04, praktisch unsichtbar. Ursache: 112 der 207 Seiten bringen
         einen eigenen <style>-Block mit, der `h1` global einfaerbt. Farbe wird
         deshalb hier ausdruecklich gesetzt, nicht geerbt.
   ⛔ 2) Der Seitentext sitzt in `.lp-wrapper` mit fester `max-width:960px` und
         `margin:auto` — dadurch stand er 150 px weiter rechts als die Ueberschrift.
         Die Huelle dieser Vorlage wird auf 960 px Innenbreite gebracht, dann sind
         Kopf, Text und Abschlussband buendig. Gemessen, nicht geschaetzt.        */
.ts .huelle{max-width:1008px}
.ts-kopf h1,
.ts-kopf .kicker,
.ts-kopf .brotkrumen{color:#fff}
.ts-kopf h1{color:#fff !important}
.ts-kopf .kicker{color:var(--gold) !important}
.ts-text a{color:#8A5C08}

/* ⛔ Gemessen, nicht geschaetzt: der mitgebrachte Seitentext steckt in zwei
   Huellen mit je 32 px Innenabstand (`.lp-wrapper` → `.lp-section`). Der erste
   Absatz begann dadurch 64 px weiter rechts als die Ueberschrift darueber.
   Statt am Fremdinhalt zu schrauben (dort ist der Abstand Teil der Gestaltung)
   wird der Kopf um genau denselben Betrag eingerueckt — und nur auf Seiten,
   die diese Huellen ueberhaupt mitbringen (`:has`).                            */
@media (min-width:900px){
  .ts:has(.lp-wrapper) .ts-kopf-in,
  .ts:has(.lp-wrapper) .ts-band .huelle{padding-left:88px}
}

/* ⛔ Zweiter Fund derselben Klasse: die Ueberschrift im dunklen Abschlussband
   erbte auf /impressum/ die dunkle Textfarbe aus dem seiteneigenen <style>
   (dunkel auf dunkel). Farben in umgekehrt eingefaerbten Baendern werden
   deshalb grundsaetzlich gesetzt, nie geerbt.                                  */
.ts-band h2{color:#fff !important}
.ts-band p{color:var(--weiss-leise) !important}
.ts-band-liste a{color:#fff !important;text-decoration:none !important}

/* Rollbereich fuer breite Tabellen — die Seite selbst darf nie waagerecht rollen. */
.ts-text .tabellen-rolle{display:block;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;margin:1.4em 0}
.ts-text .tabellen-rolle > table{margin:0;min-width:520px}

/* ⛔ Eigener Fehler, an der 375-px-Ansicht gefunden: `.ts-huelle` hatte mit
   `padding: … 0 …` den seitlichen Abstand der Huelle auf NULL gesetzt. Auf den
   37 Seiten ohne `.lp-wrapper` klebte der Text dadurch am Displayrand.        */
.ts-huelle{padding-left:24px;padding-right:24px}

/* Unter 900 px sind 24 px Huelle + 2 × 32 px Fremdabstand zu viel — der Text
   stuende 88 px weit innen. Die mitgebrachten Abstaende entfallen dort, die
   Huelle traegt den Rand allein. */
@media (max-width:899px){
  .ts .lp-wrapper,
  .ts .lp-section{padding-left:0;padding-right:0}
}

/* ⛔ Gemessen: unter 900 px setzte der seiteneigene <style>-Block dem
   `.lp-wrapper` weiter 29,18 px Innenabstand — meine Regel darueber griff
   nicht durch (der Block steht im Body und damit hinter dem Theme-CSS).
   Deshalb hier ausdruecklich vorrangig, eng auf diese Vorlage begrenzt.      */
@media (max-width:899px){
  .ts .lp-wrapper,
  .ts .lp-section{padding-left:0 !important;padding-right:0 !important;
                  margin-left:0 !important;margin-right:0 !important}
}