/* ==========================================================================
   THE ASCENDERS — Startseite, Design-System "Phoenix"
   Typografie: Barlow Condensed / Barlow (lokal, siehe css/fonts.css)
   Tokens sind primitiv -> semantisch. Unten keine Farben fest verdrahten,
   sondern immer die Variablen benutzen.
   Struktur (Raster, Fokus, Mindestgroessen, Bewegungsreduktion) steht in
   shared/base.css und wird vorher geladen.
   ========================================================================== */
:root{
  /* Fokusring — helles Gold, auf dem dunklen Grund 12:1 */
  --fokus-farbe:#FFC25C;

  /* ---- Markenfarben, direkt aus dem Phoenix-Logo gemessen ---- */
  --gold:#FEA731; --gold-soft:#FFC25C;          /* Fluegelspitzen            */
  --flame:#EC7A2C; --flame-deep:#D85E20;         /* Flamme                    */
  --crimson:#C02B32; --crimson-text:#F0604F;     /* Karmin; -text fuer Schrift */
  --burgundy:#5F111E;                            /* tiefes Bordeaux           */
  --ash:#44424A;                                 /* Asche am Sockel des A     */
  /* Verlaeufe wie im Zeichen: von Gold ueber Flamme ins Rot */
  --fire:linear-gradient(135deg,#FFC25C 0%,#FEA731 32%,#EC7A2C 72%,#D85E20 100%);
  --fire-text:linear-gradient(90deg,#FFC25C 0%,#FEA731 30%,#EC7A2C 65%,#F0604F 100%);

  /* ---- Grundflaechen: aus dem Pflaume-Schwarz des Schriftzugs abgeleitet ---- */
  --ink-900:#0E090A; --ink-850:#130C0E; --ink-800:#160E11; --ink-700:#1B1215;
  --ink-600:#231719; --ink-500:#2D2024;
  --line:#2D2125; --line-strong:#45343A;
  --line-control:#7D666C;                        /* Rahmen von Bedienelementen, 3:1 */
  /* Schrift: das Cremeweiss des Logo-Hintergrunds */
  --paper:#F5F1EC; --paper-dim:#D9CDC6; --paper-mute:#AA978F; --paper-faint:#9C8983;

  /* semantic */
  --bg:var(--ink-900); --bg-alt:var(--ink-850); --surface:var(--ink-700);
  --surface-2:var(--ink-600); --border:var(--line); --border-strong:var(--line-strong);
  --fg:var(--paper); --fg-dim:var(--paper-dim); --fg-mute:var(--paper-mute);
  --fg-faint:var(--paper-faint);
  --accent:var(--gold); --on-accent:#1A0A04; --ring:var(--gold-soft);
  --accent-tint:rgba(254,167,49,.12);

  /* type */
  --display:"Barlow Condensed","Oswald","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* space — density 4/10 (standard) */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:3rem; --s7:4rem; --s8:6rem;
  --shell:1200px; --narrow:780px;
  /* Hoehe der festen Kopfzeile. Wird per Skript nachgemessen; der Startwert
     entspricht der Zeile ohne Aktionsleiste, damit beim Laden nichts springt. */
  --head-h:73px;
  --r-sm:6px; --r:12px; --r-lg:20px; --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.33,1,.68,1);
  --t-fast:140ms; --t:240ms; --t-slow:520ms;
}

[hidden]{display:none !important}
html{scroll-padding-top:calc(var(--head-h) + 12px)}
@media(max-width:900px){html{scroll-padding-bottom:96px}}   /* Kauf-Leiste unten */
body{background:var(--bg);color:var(--fg);font:400 16px/1.65 var(--body)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- layout ---------- */
.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.narrow{width:min(100% - 2.5rem,var(--narrow));margin-inline:auto}
section{position:relative}
.pad{padding-block:var(--s8)}
@media(max-width:700px){.pad{padding-block:var(--s7)}}
.bg-alt{background:var(--bg-alt)}
.sep{border-top:1px solid var(--border)}
.z{position:relative;z-index:1}
.center{text-align:center}
.center .lede{margin-inline:auto}
.stack>*+*{margin-top:var(--s4)}
.nowrap{white-space:nowrap}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:700 12px/1 var(--body);
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding:.5rem .85rem;
  border:1px solid rgba(254,167,49,.32);border-radius:var(--r-pill);background:var(--accent-tint)}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
/* Zeilenabstand 1.04 statt .94: Bei Grossbuchstaben mit Umlaut stiessen die
   Punkte von Ä/Ö/Ü sonst in die Zeile darueber ("DU" ueber "HÄSSLICH"). */
h1,h2,h3,h4{font-family:var(--display);text-transform:uppercase;margin:0;font-weight:800;
  line-height:1.04;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.7rem,8vw,6.2rem)}
h2{font-size:clamp(2rem,5.2vw,3.8rem)}
h3{font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.08}
h4{font-size:1.02rem;letter-spacing:.06em;line-height:1.25}
/* Rang in der Gliederung und Groesse am Bildschirm sind zwei Dinge:
   diese Ueberschriften sind der Ebene nach h3, dem Auge nach klein. */
.h-klein{font-size:1.02rem;letter-spacing:.06em;line-height:1.25}
/* Gewollte Zeilen in Ueberschriften. Jede Zeile bricht fuer sich
   ausgewogen um, statt ein einzelnes Wort allein stehen zu lassen. */
.h-line,.hero h1 .line{display:block}
/* Am Breitbild bricht `text-wrap:balance` besser als eine feste Zeile —
   sonst steht "DAS ASCENSION-" mit haengendem Bindestrich allein. */
@media(min-width:900px){.h-line{display:inline}}
p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
/* max-width in ch taeuscht: Barlows "0" ist breiter als der Schnitt, 62ch
   ergaben real 90 Zeichen je Zeile. 52ch landen bei rund 75 — der Wert,
   ab dem das Auge beim Ruecksprung die Zeile verliert. */
.lede{font-size:clamp(1.04rem,1.5vw,1.22rem);color:var(--fg-dim);max-width:48ch;text-wrap:pretty}
.muted{color:var(--fg-mute)}
.small{font-size:.875rem;line-height:1.6}
.kicker{font:600 13px/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.hl{color:var(--gold);background:var(--fire-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;
  padding:0 1.6rem;border-radius:var(--r-pill);cursor:pointer;font:700 15px/1.1 var(--body);
  letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;text-align:center;
  transition:transform var(--t-fast) var(--ease-out),background var(--t) var(--ease),
    box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--fire);color:var(--on-accent);
  box-shadow:0 10px 34px -12px rgba(236,122,44,.55)}
.btn-primary:hover{filter:brightness(1.06) saturate(1.05);box-shadow:0 0 0 6px var(--accent-tint),0 14px 40px -12px rgba(236,122,44,.7)}
.btn-ghost{background:transparent;border-color:var(--line-control);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(254,167,49,.07)}
.btn-block{width:100%}
.btn svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-sm{min-height:44px;padding:0 1.1rem;font-size:13px}

/* ---------- decorative ---------- */
/* Hintergrundfeld: Glut, die von unten aufsteigt — wie der Phoenix aus der Asche */
.grid-field{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 55% at 50% 112%,rgba(192,43,50,.16),transparent 72%),
    radial-gradient(45% 40% at 50% 108%,rgba(236,122,44,.12),transparent 70%)}
/* Leuchtflaechen als Verlauf statt als weichgezeichneter Kreis: gleiches Bild,
   aber kein filter:blur(90px), den jedes Handy bei jedem Scroll-Frame neu
   rechnen muss. Farbe kommt ueber --c aus dem HTML. */
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,var(--c) 0%,var(--c) 30%,transparent 100%)}

/* Trennlinie zwischen Abschnitten: eine Glutlinie, die zur Mitte hin aufgluet */
.strip{position:relative;height:1px;border:0;
  background:linear-gradient(90deg,transparent,rgba(192,43,50,.55) 22%,rgba(254,167,49,.95) 50%,rgba(192,43,50,.55) 78%,transparent)}
.strip::after{content:"";position:absolute;left:25%;right:25%;top:-12px;height:25px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(236,122,44,.28),transparent 70%)}

/* ---------- cards ---------- */
.card{position:relative;background:linear-gradient(180deg,var(--surface),var(--ink-800));
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease-out)}
@media(hover:hover){.card:hover{border-color:var(--border-strong);transform:translateY(-3px)}}
.card .h-klein + p{margin-top:.5rem}
.card-idx{font:800 13px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--s3);display:block}
.icon-box{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--accent-tint);border:1px solid rgba(254,167,49,.26);margin-bottom:var(--s3)}
.icon-box svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Einblenden ----------
   .rise: erster Bildschirm, laeuft sofort per CSS — nicht vom Skript abhaengig,
   damit Ueberschrift und Kaufknopf nie auf JavaScript warten.
   .rv: alles darunter, ausgeloest beim Hineinscrollen. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rise-t{from{transform:translateY(14px) scale(.985)}to{transform:none}}
.rise{animation:rise var(--t-slow) var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
/* Das Foto nur bewegen, nicht ausblenden: unsichtbare Bilder zaehlen nicht
   als geladen und verschieben die gemessene Ladezeit. */
.rise-photo{animation:rise-t 700ms var(--ease) both}
.rv{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:calc(var(--i,0) * 60ms)}
.rv.in{opacity:1;transform:none}

/* ---------- nav ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--fire);z-index:60;
  transform:scaleX(0);transform-origin:0 50%}
header{position:fixed;inset:0 0 auto;z-index:50;transition:background var(--t) var(--ease),
  border-color var(--t) var(--ease);border-bottom:1px solid transparent}
header.stuck{background:rgba(14,9,10,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--border)}

/* Aktionsleiste — nur sichtbar, solange ein echtes Enddatum in der Zukunft liegt */
.announce{background:linear-gradient(90deg,var(--ink-800),rgba(254,167,49,.12),var(--ink-800));
  border-bottom:1px solid var(--border)}
.announce-in{display:flex;align-items:center;justify-content:center;gap:var(--s4);
  flex-wrap:wrap;min-height:40px;padding-block:.4rem;
  font:600 12px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-dim);
  text-align:center}
.announce b{color:var(--fg)}
.announce .cd{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.06em;
  color:var(--accent);font-variant-numeric:tabular-nums}
@media(max-width:620px){.announce-in{gap:var(--s2);font-size:11px}}

.urgency{border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;
  margin:0 auto var(--s6);max-width:520px}
.urgency-final{margin:var(--s5) auto 0}
.u-item{background:var(--ink-850);padding:var(--s4);text-align:center}
.u-lbl{display:block;font:600 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:.5rem}
.u-val{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.2rem);
  line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;display:block}
.u-sub{display:block;font-size:.78rem;color:var(--fg-mute);margin-top:.45rem}
.cd-units{display:flex;justify-content:center;gap:.35rem;align-items:baseline}
.cd-units i{font-style:normal;font-family:var(--body);font-weight:600;font-size:.7rem;
  color:var(--fg-mute);margin-right:.35rem}

.nav{display:flex;align-items:center;gap:var(--s4);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;flex:none}
.brand-mark{width:50px;height:44px}
.brand-word{width:169px;height:22px;margin-top:3px}
@media(max-width:380px){.brand-mark{width:43px;height:38px}.brand-word{width:146px;height:19px}}
.nav-links{display:flex;gap:var(--s4);margin-left:auto;align-items:center}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;
  font:600 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim);transition:color var(--t) var(--ease)}
.nav-links a:hover{color:var(--accent)}
/* Schwester-Seite EDELSTUECK — eigene Farbe, damit sie sich von den
   Sprungmarken der Seite unterscheidet. */
.nav-links a.nav-meat{position:relative;margin-left:.35rem;padding-left:calc(.2rem + var(--s3));color:var(--fg)}
.nav-links a.nav-meat::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;
  transform:translateY(-50%);background:var(--line-control)}
.nav-links a.nav-meat:hover{color:var(--accent)}
.drawer a.nav-meat{color:var(--fg)}
.nav-actions{display:flex;align-items:center;gap:var(--s2)}
.lang{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-pill);
  overflow:hidden;background:var(--ink-800)}
.lang button{min-height:44px;min-width:46px;padding:0 .55rem;background:transparent;border:0;
  cursor:pointer;font:700 12px/1 var(--body);letter-spacing:.1em;color:var(--fg-mute);
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.lang button:hover{color:var(--fg)}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);background:transparent;cursor:pointer;place-items:center}
.burger svg{width:20px;height:20px;stroke:var(--fg);fill:none;stroke-width:2;stroke-linecap:round}
/* Zwischen Tablet und kleinem Laptop reicht der Platz nicht fuer alle
   sechs Links plus Sprachwahl plus Kaufknopf nebeneinander. */
@media(max-width:1080px){.nav-links{gap:var(--s3)} .brand-word{display:none}}
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav-actions .btn,.nav-actions .lang{display:none}
  .brand-word{display:block}
}
.drawer .lang{margin-top:var(--s4)}
@media(min-width:901px){.drawer .lang{display:none}}
.drawer{position:fixed;inset:var(--head-h) 0 auto;z-index:49;background:rgba(14,9,10,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
  padding:var(--s3) 0 var(--s5);display:none;max-height:calc(100dvh - var(--head-h));overflow-y:auto}
.drawer.open{display:block}
/* Wer das Menue auf dem Handy oeffnet und dann dreht oder das Fenster
   aufzieht, hatte sonst eine offene Schublade ohne Schliessknopf. */
@media(min-width:901px){.drawer,.drawer.open{display:none}}
.drawer a:not(.btn){display:flex;align-items:center;min-height:52px;font:700 17px/1 var(--display);
  letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.drawer .btn{margin-top:var(--s4)}

/* ---------- hero ---------- */
.hero{padding-top:calc(var(--head-h) + var(--s7));padding-bottom:var(--s8);overflow:hidden}
@media(max-width:700px){.hero{padding-top:calc(var(--head-h) + var(--s4))}}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--s5)}}
.hero h1{margin:var(--s4) 0}
.hero-cta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
.trustline{display:flex;gap:.5rem var(--s4);flex-wrap:wrap;margin-top:var(--s4);
  font:500 13px/1.4 var(--body);color:var(--fg-mute)}
.trustline span{display:inline-flex;align-items:center;gap:.45rem}
.trustline svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

.hero-photo{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--ink-900)}
.hero-photo{box-shadow:0 40px 90px -50px rgba(236,122,44,.5)}
/* Der Gruender-Abschnitt laeuft ohne Portraet — einspaltig, auf Lesebreite
   begrenzt, damit die Zeilen nicht ueber die ganze Rasterbreite laufen. */
.narrow-block{width:min(100%,var(--narrow));margin-inline:auto}
.narrow-block>*+*{margin-top:var(--s4)}
.narrow-block p{max-width:56ch}
.narrow-block p:not(.lede){color:var(--fg-dim)}
/* <picture> liegt zwischen Rahmen und Bild und hat von sich aus keine
   Hoehe — ohne diese Zeile laeuft height:100% am Bild ins Leere und es
   bleibt ein schwarzer Streifen, sobald das Foto nicht exakt 4:5 ist. */
.hero-photo picture{display:block;width:100%;height:100%}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
/* Leichte Abdunklung zum Rand: bindet das Handyfoto in die dunkle Flaeche
   ein, ohne das Motiv zu veraendern. */
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 35%,transparent 58%,rgba(14,9,10,.38)),
    linear-gradient(180deg,transparent 70%,rgba(14,9,10,.3))}

/* ---------- compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.panel{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);
  background:var(--ink-850)}
.panel.bad{border-color:rgba(240,96,79,.3)}
.panel.good{border-color:rgba(254,167,49,.34);background:linear-gradient(180deg,rgba(254,167,49,.05),var(--ink-850))}
.panel h3{margin-bottom:var(--s3)}
.panel.bad h3{color:var(--crimson-text)}
.panel.good h3{color:var(--accent)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.55;color:var(--fg-dim)}
.list svg{width:18px;height:18px;flex:none;margin-top:3px;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.list.neg svg{stroke:var(--crimson-text)}
.list.pos svg{stroke:var(--accent)}

/* ---------- Messung an Tag 0 ---------- */
.measure-title{display:block;margin-bottom:var(--s4);color:var(--accent)}
.measure{list-style:none;margin:0;padding:0}
.measure li{display:grid;grid-template-columns:2.2rem 1fr;column-gap:var(--s2);row-gap:.15rem;
  padding:var(--s3) 0;border-top:1px solid var(--border)}
.measure li:first-child{border-top:0;padding-top:0}
.m-idx{grid-row:span 2;font:800 15px/1.3 var(--display);letter-spacing:.08em;color:var(--fg-mute);
  font-variant-numeric:tabular-nums}
.measure b{font:700 14px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.measure li>span:last-child{font-size:.92rem;line-height:1.5;color:var(--fg-dim)}
.measure-foot{display:flex;gap:.6rem;align-items:flex-start;margin:var(--s4) 0 0;
  padding-top:var(--s3);border-top:1px dashed var(--border-strong);font-size:.88rem;line-height:1.5;
  color:var(--fg-mute)}
.measure-foot svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--accent);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- pillars ---------- */
.pillar{overflow:hidden}
.pillar .big{position:absolute;right:-6px;top:-22px;font:800 8rem/1 var(--display);
  color:var(--fg);opacity:.045;pointer-events:none}
.pillar ul{margin-top:var(--s4)}

/* ---------- accordion ---------- */
.acc{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-850)}
.acc-item+.acc-item{border-top:1px solid var(--border-strong)}
.acc-h{font:inherit;text-transform:none;letter-spacing:normal;line-height:inherit;margin:0}
.acc-btn{width:100%;display:flex;align-items:center;gap:var(--s3);text-align:left;
  background:transparent;border:0;cursor:pointer;padding:var(--s4);min-height:64px;
  transition:background var(--t) var(--ease)}
.acc-btn:hover{background:var(--ink-800)}
.acc-btn .wk{font:800 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(254,167,49,.3);border-radius:var(--r-pill);padding:.45rem .7rem;flex:none}
.acc-btn .t{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.12rem;line-height:1.15;flex:1}
.acc-btn .q{font-family:var(--body);font-weight:600;font-size:1rem;text-transform:none;
  letter-spacing:0;line-height:1.4}
.acc-btn .chev{width:20px;height:20px;flex:none;stroke:var(--fg-mute);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
.acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg);stroke:var(--accent)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease)}
.acc-panel.open{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
/* Einzug bis unter den Titel: die Stufen-Plakette schiebt ihn nach rechts. */
.acc-body{padding:0 var(--s4) var(--s4) calc(var(--s4) + 5.2rem);color:var(--fg-dim);max-width:56ch}
#faqAcc .acc-body{padding-left:var(--s4)}
.acc-body .list{margin-top:var(--s3)}
@media(max-width:520px){.acc-btn{padding:var(--s3)} .acc-body,#faqAcc .acc-body{padding:0 var(--s3) var(--s4)}}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch}
@media(max-width:980px){.tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.tier{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface),var(--ink-800));padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4)}
.tier.featured{border-color:var(--flame);background:linear-gradient(180deg,rgba(254,167,49,.07),var(--ink-800));
  box-shadow:0 24px 70px -34px rgba(236,122,44,.45)}
@media(min-width:981px){.tier.featured{transform:scale(1.035);z-index:2}}
.tier.value{border-color:rgba(192,43,50,.75);
  background:linear-gradient(180deg,rgba(192,43,50,.09),var(--ink-800))}
.tier-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--fire);color:var(--on-accent);font:800 11px/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;padding:.5rem .85rem;border-radius:var(--r-pill);white-space:nowrap}
.tier.value .tier-tag{background:var(--crimson);color:var(--paper)}
.tier .name{font:800 15px/1 var(--display);letter-spacing:.18em;color:var(--fg-mute)}
.tier.featured .name{color:var(--flame)}
.tier.value .name{color:var(--crimson-text)}
.price{display:flex;align-items:flex-start;flex-wrap:wrap;margin:0;font-variant-numeric:tabular-nums}
.price .val{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,4rem);line-height:.9}
.price .cur{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:.3rem .15rem 0}
.price .per{align-self:flex-end;font:600 13px/1 var(--body);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-mute);margin:0 0 .45rem .35rem}
.tier-promo{display:flex;align-items:center;gap:.45rem;margin:.5rem 0 0;font:700 12px/1.3 var(--body);
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tier-promo svg{width:15px;height:15px;flex:none;fill:currentColor;stroke:none}
.price-note{font-size:.82rem;color:var(--fg-mute);margin:.5rem 0 0}
.tier .list li{font-size:.9rem}
.tier-cta{margin-top:auto}

/* ---------- family block ---------- */
.family{border:1px solid rgba(192,43,50,.34);
  background:linear-gradient(180deg,rgba(192,43,50,.08),var(--ink-850));
  border-radius:var(--r-lg);padding:var(--s6) var(--s5);margin-top:var(--s6);text-align:center}
.family .f-icon{width:54px;height:54px;margin:0 auto var(--s4);border-radius:var(--r);
  display:grid;place-items:center;background:rgba(192,43,50,.1);
  border:1px solid rgba(192,43,50,.3)}
.family .f-icon svg{width:26px;height:26px;stroke:var(--crimson-text);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.family h3{color:var(--crimson-text);margin-bottom:var(--s3)}
.family .lede{margin-inline:auto}
.f-points{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6);
  text-align:left}
@media(max-width:760px){.f-points{grid-template-columns:1fr}}
.f-point{border-top:1px solid rgba(192,43,50,.26);padding-top:var(--s3)}
.f-point b{display:block;font:800 13px/1.2 var(--display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--crimson-text);margin-bottom:.5rem}
.f-point span{font-size:.9rem;line-height:1.55;color:var(--fg-dim)}

/* ---------- guarantee ---------- */
.guarantee{border:1px solid var(--border-strong);background:var(--ink-850);margin:var(--s6) auto 0;max-width:880px;
  border-radius:var(--r-lg);padding:var(--s5);display:flex;gap:var(--s4);align-items:flex-start}
.guarantee svg{width:40px;height:40px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.guarantee h3{color:var(--accent);margin-bottom:.5rem}
.guarantee>div{max-width:40ch}
@media(max-width:620px){.guarantee{flex-direction:column}}

/* ---------- final cta ---------- */
.final{background:linear-gradient(180deg,var(--ink-900),var(--ink-850));overflow:hidden}
.final-mark{width:109px;height:96px;margin:0 auto var(--s4)}
.steps{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s2);text-align:left}
@media(max-width:620px){.steps{grid-template-columns:1fr}}
.steps li{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;
  border:1px solid var(--border);border-radius:var(--r);background:rgba(22,14,17,.7)}
.s-idx{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:800 14px/1 var(--display);color:var(--on-accent);background:var(--fire)}
.s-txt{display:grid;gap:.2rem}
.s-txt b{font:700 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.s-txt span{font-size:.85rem;line-height:1.45;color:var(--fg-mute)}
.final-buy{max-width:520px;margin:var(--s5) auto 0;display:grid;gap:var(--s2)}
.final-alt{display:grid;gap:var(--s2)}
.final-alt .btn{min-height:48px;font-size:13px;padding:0 1rem}
.form-note{font-size:.8rem;color:var(--fg-mute);text-align:center;margin:0}
.form-tax{margin-top:.2rem}

/* ---------- EDELSTUECK ---------- */
.meat-link{display:block;border-radius:var(--r-lg)}
.meat-photo{margin:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.meat-photo img{width:100%;height:auto;transition:transform var(--t-slow) var(--ease)}
@media(hover:hover){.meat-link:hover img{transform:scale(1.03)}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);background:var(--ink-850);padding-block:var(--s6) var(--s5)}
@media(max-width:900px){footer{padding-bottom:calc(var(--s5) + 96px)}}
.foot-grid{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  align-items:flex-start}
.foot-links{display:flex;gap:0 var(--s4);flex-wrap:wrap;font-size:.86rem;color:var(--fg-mute)}
/* Fusszeilen-Links waren 23px hoch bei 24px Abstand. Auf dem Handy
   trifft man das nicht zuverlaessig — Nachbarlinks fangen den Tipp ab. */
.foot-links a,.linkbtn{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:720px){.foot-links a,.linkbtn{min-height:48px}}
.foot-links a:hover,.linkbtn:hover{color:var(--accent)}
.linkbtn{background:none;border:0;padding:0;min-width:0;cursor:pointer;color:inherit;font:inherit}
/* Spalten statt einer langen Zeile: 451px Zeilenkasten ergaben 87 Zeichen.
   Drei Spalten nutzen die Fusszeilenbreite und landen bei rund 70. */
.disclaimer{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border);
  font-size:.8rem;line-height:1.65;color:var(--fg-faint);max-width:828px;
  columns:2;column-gap:var(--s6)}
@media(min-width:1100px){.disclaimer{max-width:none;columns:3}}
@media(max-width:900px){.disclaimer{max-width:none;columns:1}}

/* ---------- sticky mobile cta ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:.75rem 1.25rem
  calc(.75rem + env(safe-area-inset-bottom));background:rgba(14,9,10,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--border);
  transform:translateY(120%);transition:transform var(--t) var(--ease);display:none}
.sticky-cta.show{transform:none}
@media(max-width:900px){.sticky-cta{display:block}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .rise,.rise-photo{animation:none}
  .btn:active,.btn:hover svg{transform:none}
}

/* Einwilligungs-Banner — beide Antworten gleich gross und gleich gewichtet:
   Ablehnen darf nicht schwerer zu finden sein als Zustimmen. */
#consent{position:fixed;left:0;right:0;bottom:0;z-index:100;display:none;
  background:var(--ink-700);border-top:1px solid var(--line-strong);
  box-shadow:0 -12px 40px rgba(0,0,0,.5);padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom))}
#consent.on{display:block}
#consent .in{max-width:64rem;margin:0 auto;display:flex;gap:1rem 1.25rem;
  align-items:center;flex-wrap:wrap}
#consent p{margin:0;flex:1 1 22rem;font-size:.92rem;line-height:1.55;color:var(--paper-dim)}
#consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
#consent .btns{display:flex;gap:.6rem;flex:0 0 auto}
#consent button{min-height:44px;padding:.6rem 1.4rem;border-radius:999px;
  font:700 .78rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:transparent;color:var(--paper);border:1px solid var(--gold);
  transition:background var(--t) var(--ease)}
#consent button:hover{background:rgba(254,167,49,.12)}
#consent button:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
@media(max-width:40rem){
  #consent{padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom))}
  #consent .in{gap:.6rem}
  #consent p{font-size:.82rem;line-height:1.4;flex-basis:100%}
  #consent .btns{width:100%}#consent button{flex:1;min-height:44px;padding:.5rem 1rem}
}

/* Im Ausdruck gibt es keinen Farbverlauf: Fuelltext wieder sichtbar machen. */
@media (forced-colors: active){
  .hl{-webkit-text-fill-color:currentColor;background:none;color:CanvasText}
}
@media print{
  .hl{-webkit-text-fill-color:currentColor;background:none;color:#000}
  .brand-mark,.brand-word,.final-mark{filter:none}
}

/* ── Sprunglink ──────────────────────────────────────────────────────────
   Aussehen; die Positionierung steht in shared/base.css. */
.skip{background:var(--gold);color:var(--ink-900);border-radius:999px}