/* ==========================================================================
   COINFLOW FINANCE · LEARNING OS
   Lektion A1 — Was ist Geld?   ·   Premium-Neubau   ·   v3.1.0
   ==========================================================================

   SCOPE
   Jede Regel beginnt mit .cff-a1-root. Kein :root, kein html, kein body,
   kein Element-Selektor auf oberster Ebene. Nichts außerhalb des Roots wird
   beeinflusst — Theme, LearnPress, .entry-content und wp-block bleiben
   unberührt.

   AUFBAU
   01 Tokens          06 Kapitel 02 · Szene (Interaktion 01)
   02 Reset + Guards  07 Kapitel 03 · Definition
   03 Primitive       08 Kapitel 04 · Funktionen (Interaktion 02)
   04 Lernpfad        09 Kapitel 05 · Timeline (Interaktion 03)
   05 Hero            10 Kapitel 06 · Vertrauen
                      11 Kapitel 07 · Inflation (Interaktion 04)
                      12 Kapitel 08 · Alternativen
                      13 Kapitel 09 · Summary / Merke / Next
                      14 Responsiv
                      15 Reduced Motion
   ========================================================================== */


/* ==========================================================================
   01 — TOKENS
   ========================================================================== */
.cff-a1-root{
  --bg:#050806;
  --l1:#0A0F0C;
  --l2:#0E1411;
  --l3:#131B16;
  --l4:#18211C;

  --ln:#141C17;
  --ln2:#1C2721;
  --ln3:#26342C;

  --tx:#F3F5F2;
  --tx2:#8A968F;
  --tx3:#59655E;
  --tx4:#3C4842;

  --em:#3DDC97;
  --em2:#2BB47B;
  --em-ln:rgba(61,220,151,.34);
  --em-sf:rgba(61,220,151,.07);
  --em-sf2:rgba(61,220,151,.14);

  /* Rot bleibt Marktsemantik. In A1 bewusst ungenutzt. */
  --red:#E5484D;

  --sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;

  --f-micro:.6875rem;
  --f-sm:.875rem;
  --f-bd:1.0625rem;
  --f-lead:clamp(1.125rem,1.6vw,1.375rem);
  --f-h3:clamp(1.125rem,1.8vw,1.375rem);
  --f-h2:clamp(1.875rem,3.6vw,3rem);
  --f-h1:clamp(2.75rem,7vw,5.5rem);
  --f-display:clamp(1.625rem,3.4vw,2.75rem);

  --wrap:1240px;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --rail:clamp(0px,6vw,88px);

  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem;
  --s5:3rem;  --s6:4.5rem;  --s7:clamp(5rem,10vw,9rem);

  --r1:2px; --r2:4px; --r3:10px;

  --e:cubic-bezier(.22,.61,.28,1);
  --t1:200ms; --t2:300ms; --t3:450ms;
}


/* ==========================================================================
   02 — RESET + THEME-LEAK-GUARDS
   !important nur an den bekannten Farb-Leak-Points.
   ========================================================================== */
.cff-a1-root,
.cff-a1-root *,
.cff-a1-root *::before,
.cff-a1-root *::after{ box-sizing:border-box; }

.cff-a1-root{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:var(--f-bd);
  line-height:1.7;
  text-align:left;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.cff-a1-root h1,.cff-a1-root h2,.cff-a1-root h3,.cff-a1-root h4,
.cff-a1-root p,.cff-a1-root ul,.cff-a1-root ol,.cff-a1-root li,
.cff-a1-root figure,.cff-a1-root blockquote{
  margin:0; padding:0; font-family:inherit;
}
.cff-a1-root ul,.cff-a1-root ol{ list-style:none; }
.cff-a1-root li::marker{ content:""; }
.cff-a1-root h1,.cff-a1-root h2,.cff-a1-root h3,.cff-a1-root h4{
  font-weight:600; color:var(--tx) !important;
}
.cff-a1-root a,.cff-a1-root a:link,.cff-a1-root a:visited,
.cff-a1-root a:hover,.cff-a1-root a:focus,.cff-a1-root a:active{
  color:inherit !important;
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
  box-shadow:none;
}
.cff-a1-root button,.cff-a1-root button:hover,
.cff-a1-root button:focus,.cff-a1-root button:active{ color:inherit !important; }
.cff-a1-root button{
  font:inherit; background:none; border:0; margin:0; padding:0;
  text-align:inherit; text-transform:none; border-radius:0;
  box-shadow:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.cff-a1-root p,.cff-a1-root li,.cff-a1-root span{ color:inherit; }
.cff-a1-root svg{ display:block; max-width:100%; }
.cff-a1-root :focus-visible{ outline:2px solid var(--em); outline-offset:3px; }

.cff-a1-root .a1-sr{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.cff-a1-root .a1-defs{ position:absolute; width:0; height:0; overflow:hidden; }


/* ==========================================================================
   03 — PRIMITIVE
   ========================================================================== */
.cff-a1-root .a1-wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Mono-Label, sparsam */
.cff-a1-root .a1-lbl{
  display:inline-block;
  font-family:var(--mono);
  font-size:var(--f-micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tx3);
}
.cff-a1-root .a1-lbl--em{ color:var(--em); }
.cff-a1-root .a1-lbl--block{ display:block; margin-bottom:var(--s2); }

.cff-a1-root .a1-lead{
  font-size:var(--f-lead);
  line-height:1.5;
  color:var(--tx2);
  max-width:44ch;
}
.cff-a1-root .a1-text{ color:var(--tx2); max-width:62ch; }
.cff-a1-root .a1-text + .a1-text{ margin-top:var(--s3); }
.cff-a1-root .a1-text strong{ color:var(--tx); font-weight:600; }
.cff-a1-root .a1-note{
  font-family:var(--mono);
  font-size:var(--f-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx4);
  line-height:1.7;
  display:block;
}

/* Offene Bühne — Fläche ohne Kartenoptik */
.cff-a1-root .a1-stage{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(61,220,151,.035) 0%, transparent 62%),
    var(--l1);
  border:1px solid var(--ln2);
  border-radius:var(--r3);
  overflow:hidden;
}
.cff-a1-root .a1-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(243,245,242,.018) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(243,245,242,.013) 1px,transparent 1px);
  background-size:40px 40px;
}
.cff-a1-root .a1-stage > *{ position:relative; }
.cff-a1-root .a1-stage__body{ padding:clamp(1rem,2.6vw,2rem); }

/* Schlichte Fläche für Kontexttexte */
.cff-a1-root .a1-block{
  border-left:1px solid var(--ln3);
  padding-left:clamp(1rem,2.4vw,1.75rem);
}
.cff-a1-root .a1-block--em{ border-left-color:var(--em); }

/* Abstands-Utilities — ersetzen layoutbezogene Inline-Styles */
.cff-a1-root .a1-mt-3{ margin-top:var(--s3); }
.cff-a1-root .a1-mt-4{ margin-top:var(--s4); }
.cff-a1-root .a1-mt-5{ margin-top:var(--s5); }

.cff-a1-root .a1-split{
  display:grid;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
}
.cff-a1-root .a1-split--even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cff-a1-root .a1-split--visual-right{ grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); }

/* --- SVG-Zeichensprache ---------------------------------------------------
   Alle Glyphen tragen .a1-gx und erben Farbe über currentColor.
   non-scaling-stroke hält jede Linie überall exakt gleich dünn.           */
.cff-a1-root .a1-gx{
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.cff-a1-root .a1-gx--fill{ fill:currentColor; stroke:none; }

/* --- Tonwertflächen für Editorial-Piktogramme ----------------------------
   Alle Flächen leiten sich aus currentColor ab. Dadurch funktioniert jedes
   Asset in Grau wie in Emerald, ohne zweite Farbdefinition. Tiefe entsteht
   ausschließlich über abgestufte Deckkraft — keine Gradients, kein 3D.     */
.cff-a1-root .a1-f1{ fill:currentColor; opacity:.09;  stroke:none; }
.cff-a1-root .a1-f2{ fill:currentColor; opacity:.17;  stroke:none; }
.cff-a1-root .a1-f3{ fill:currentColor; opacity:.30;  stroke:none; }
.cff-a1-root .a1-f4{ fill:currentColor; opacity:.52;  stroke:none; }
.cff-a1-root .a1-fs{ fill:currentColor; stroke:none; }

/* Feinere Sekundärlinie innerhalb eines Assets */
.cff-a1-root .a1-gx--hair{ stroke-width:.85; opacity:.7; }
/* Tragende Kontur eines Assets */
.cff-a1-root .a1-gx--edge{ stroke-width:1.4; }

/* Hero-Assets in Kapitel 08 dürfen etwas größer atmen */
.cff-a1-root .a1-asset__vis svg{ overflow:visible; }
.cff-a1-root .a1-ink{ color:var(--tx2); transition:color var(--t2) var(--e); }
.cff-a1-root .a1-ink--soft{ color:var(--tx3); }
.cff-a1-root .a1-ink--dim{ color:var(--tx4); }
.cff-a1-root .a1-ink--em{ color:var(--em); }

.cff-a1-root .a1-path{
  fill:none;
  stroke:var(--ln3);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  transition:stroke var(--t2) var(--e),opacity var(--t2) var(--e);
}
.cff-a1-root .a1-path--em{ stroke:var(--em); }
.cff-a1-root .a1-path--dashed{ stroke-dasharray:3 6; }
.cff-a1-root .a1-path--cut{ stroke:var(--tx4); stroke-dasharray:4 6; }
.cff-a1-root .a1-path--thick{ stroke-width:2; }
.cff-a1-root .a1-path--hair{ stroke:var(--ln2); stroke-width:1; }
.cff-a1-root .a1-lens{ fill:var(--em-sf2); stroke:var(--em); }
.cff-a1-root .a1-arrow{ fill:var(--ln3); transition:fill var(--t2) var(--e); }
.cff-a1-root .a1-arrow--em{ fill:var(--em); }

.cff-a1-root .a1-cap{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  fill:var(--tx3);
  transition:fill var(--t2) var(--e);
}
.cff-a1-root .a1-cap--em{ fill:var(--em); }
.cff-a1-root .a1-cap--dim{ fill:var(--tx4); }
.cff-a1-root .a1-name{
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  fill:var(--tx);
}
.cff-a1-root .a1-cut{
  stroke:var(--tx3);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

/* Gezeichnete Pfade bauen sich auf */
.cff-a1-root .a1-draw{
  stroke-dasharray:var(--a1-len,420);
  stroke-dashoffset:var(--a1-len,420);
}
.cff-a1-root .a1-scene.is-on .a1-draw{
  animation:a1-draw var(--t3) var(--e) forwards;
}
@keyframes a1-draw{ to{ stroke-dashoffset:0; } }

/* Szenenwechsel */
.cff-a1-root .a1-scene{
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t2) var(--e);
}
.cff-a1-root .a1-scene.is-on{ opacity:1; pointer-events:auto; }


/* --- Interaktions-Kennzeichnung ------------------------------------------ */
.cff-a1-root .a1-ia{
  display:flex; align-items:center; gap:var(--s3);
  flex-wrap:wrap;
  margin-bottom:var(--s4);
}
.cff-a1-root .a1-ia__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem;
  border:1px solid var(--em-ln);
  background:var(--em-sf);
  border-radius:var(--r1);
  font-family:var(--mono);
  font-size:var(--f-micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--em);
}
.cff-a1-root .a1-ia__badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--em); flex:none;
}
.cff-a1-root .a1-ia__do{ color:var(--tx2); font-size:var(--f-sm); }


/* ==========================================================================
   04 — LERNPFAD / KAPITELSTRUKTUR
   ========================================================================== */
.cff-a1-root .a1-index{
  margin-top:var(--s7);
  border-top:1px solid var(--ln2);
}
.cff-a1-root .a1-index ol{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.cff-a1-root .a1-index li{
  padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--ln);
}
.cff-a1-root .a1-index .n{
  display:block;
  font-family:var(--mono);
  font-size:var(--f-micro);
  letter-spacing:.18em;
  color:var(--tx4);
  margin-bottom:.25rem;
}
.cff-a1-root .a1-index .t{
  font-size:var(--f-sm);
  font-weight:500;
  color:var(--tx2);
}

/* Kapitel: linke Führungsspalte + Inhalt */
.cff-a1-root .a1-chap{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  padding-top:var(--s7);
}
.cff-a1-root .a1-chap__rail{
  position:relative;
  padding-top:.4rem;
}
.cff-a1-root .a1-chap__rail::before{
  content:"";
  position:absolute;
  left:1px; top:2.4rem; bottom:calc(-1 * var(--s7) - 2.4rem);
  width:1px;
  background:linear-gradient(to bottom,var(--ln3),var(--ln2) 30%,var(--ln2));
}
.cff-a1-root .a1-chap--last .a1-chap__rail::before{ bottom:0; }
.cff-a1-root .a1-chap__n{
  position:relative;
  display:block;
  font-family:var(--mono);
  font-size:var(--f-micro);
  letter-spacing:.18em;
  color:var(--em);
  padding-left:1rem;
}
.cff-a1-root .a1-chap__n::before{
  content:"";
  position:absolute; left:-2px; top:.45em;
  width:5px; height:5px; border-radius:var(--r1);
  background:var(--em);
}
.cff-a1-root .a1-chap__head{ max-width:56ch; margin-bottom:var(--s5); }
.cff-a1-root .a1-chap__head h2{
  font-size:var(--f-h2);
  letter-spacing:-.035em;
  line-height:1.08;
  margin-bottom:var(--s3);
}
.cff-a1-root .a1-chap__head p{ color:var(--tx2); max-width:58ch; }


/* ==========================================================================
   05 — HERO
   ========================================================================== */
.cff-a1-root .a1-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding-top:clamp(3rem,8vw,6.5rem);
}
.cff-a1-root .a1-hero__eyebrow{
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:var(--s4);
}
.cff-a1-root .a1-hero__eyebrow::before{
  content:""; width:32px; height:2px; background:var(--em);
}
.cff-a1-root .a1-hero h1{
  font-size:var(--f-h1);
  letter-spacing:-.05em;
  line-height:.94;
  margin-bottom:var(--s4);
}
.cff-a1-root .a1-hero__meta{
  display:flex; gap:var(--s5);
  margin-top:var(--s5);
  padding-top:var(--s3);
  border-top:1px solid var(--ln2);
}
.cff-a1-root .a1-hero__meta div span{ display:block; }
.cff-a1-root .a1-hero__meta .v{
  font-size:var(--f-sm); color:var(--tx2); margin-top:.2rem;
}


/* ==========================================================================
   06 — KAPITEL 02 · SZENE (Interaktion 01)
   ========================================================================== */
.cff-a1-root .a1-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s2);
  margin-top:var(--s3);
}
.cff-a1-root .a1-step{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) var(--s3) var(--s3) 0;
  border-top:1px solid var(--ln2);
  transition:border-color var(--t1) var(--e);
}
.cff-a1-root .a1-step:hover{ border-top-color:var(--ln3); }
.cff-a1-root .a1-step[aria-selected="true"]{ border-top-color:var(--em); }
.cff-a1-root .a1-step__n{
  font-family:var(--mono);
  font-size:var(--f-micro);
  letter-spacing:.18em;
  color:var(--tx4);
  flex:none;
  transition:color var(--t1) var(--e);
}
.cff-a1-root .a1-step[aria-selected="true"] .a1-step__n{ color:var(--em); }
.cff-a1-root .a1-step__t{
  font-size:var(--f-sm);
  font-weight:600;
  color:var(--tx3);
  transition:color var(--t1) var(--e);
}
.cff-a1-root .a1-step:hover .a1-step__t{ color:var(--tx2); }
.cff-a1-root .a1-step[aria-selected="true"] .a1-step__t{ color:var(--tx); }

.cff-a1-root .a1-readout{
  margin-top:var(--s4);
  min-height:4.5em;
}
.cff-a1-root .a1-readout p{
  font-size:var(--f-lead);
  line-height:1.5;
  color:var(--tx2);
  max-width:52ch;
}
.cff-a1-root .a1-readout p strong{ color:var(--tx); font-weight:600; }


/* ==========================================================================
   07 — KAPITEL 03 · DEFINITION
   ========================================================================== */
.cff-a1-root .a1-def{ max-width:22ch; }
.cff-a1-root .a1-def p{
  font-size:var(--f-display);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.18;
  max-width:18ch;
}
.cff-a1-root .a1-def .k{ color:var(--em); }
.cff-a1-root .a1-def__after{
  margin-top:var(--s4);
  color:var(--tx2);
  max-width:46ch;
  font-size:var(--f-bd);
}
.cff-a1-root .a1-anchor{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s3);
  margin-top:var(--s5);
}
.cff-a1-root .a1-anchor li{
  padding-top:var(--s3);
  border-top:1px solid var(--ln2);
}
.cff-a1-root .a1-anchor svg{ width:36px; height:36px; margin-bottom:var(--s3); }
.cff-a1-root .a1-anchor .t{
  display:block; font-size:var(--f-sm); font-weight:600; color:var(--tx);
}
.cff-a1-root .a1-anchor .d{
  display:block; font-size:var(--f-sm); color:var(--tx3); margin-top:.2rem;
}


/* ==========================================================================
   08 — KAPITEL 04 · FUNKTIONEN (Interaktion 02)
   ========================================================================== */
.cff-a1-root .a1-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s2);
  margin-bottom:var(--s4);
}
.cff-a1-root .a1-tab{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  border:1px solid var(--ln2);
  border-radius:var(--r2);
  background:var(--l1);
  transition:border-color var(--t1) var(--e),background-color var(--t1) var(--e);
}
.cff-a1-root .a1-tab:hover{ border-color:var(--ln3); background:var(--l2); }
.cff-a1-root .a1-tab:active{ background:var(--l3); }
.cff-a1-root .a1-tab[aria-selected="true"]{
  border-color:var(--em-ln);
  background:var(--l3);
}
.cff-a1-root .a1-tab__ico{
  width:40px; height:40px; flex:none;
  color:var(--tx3);
  transition:color var(--t1) var(--e);
}
.cff-a1-root .a1-tab[aria-selected="true"] .a1-tab__ico{ color:var(--em); }
.cff-a1-root .a1-tab__t{
  display:block; font-size:var(--f-sm); font-weight:600;
  color:var(--tx3);
  transition:color var(--t1) var(--e);
}
.cff-a1-root .a1-tab:hover .a1-tab__t{ color:var(--tx2); }
.cff-a1-root .a1-tab[aria-selected="true"] .a1-tab__t{ color:var(--tx); }
.cff-a1-root .a1-tab__n{
  display:block;
  font-family:var(--mono); font-size:var(--f-micro);
  letter-spacing:.18em; color:var(--tx4); margin-bottom:.2rem;
}
.cff-a1-root .a1-tab[aria-selected="true"] .a1-tab__n{ color:var(--em); }

.cff-a1-root .a1-fnpanel{ margin-top:var(--s4); min-height:5.5em; }
.cff-a1-root .a1-fnpanel h3{
  font-size:var(--f-h3); letter-spacing:-.02em; margin-bottom:var(--s2);
}
.cff-a1-root .a1-fnpanel p{ color:var(--tx2); max-width:58ch; }

.cff-a1-root .a1-fnwarn{
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--ln2);
}
.cff-a1-root .a1-fnwarn p{ color:var(--tx2); max-width:62ch; }
.cff-a1-root .a1-fnwarn p strong{ color:var(--tx); font-weight:600; }


/* ==========================================================================
   09 — KAPITEL 05 · TIMELINE (Interaktion 03)
   ========================================================================== */
.cff-a1-root .a1-tlwrap{ position:relative; margin-bottom:var(--s5); }
.cff-a1-root .a1-tlwrap::before{
  content:""; position:absolute;
  left:5px; right:5px; top:5px; height:1px; background:var(--ln2);
}
.cff-a1-root .a1-tlfill{
  position:absolute; left:5px; top:5px;
  width:0; height:1px; background:var(--em);
  transition:width var(--t3) var(--e);
}
.cff-a1-root .a1-tl{ display:flex; gap:var(--s2); }
.cff-a1-root .a1-tl li{ flex:1 1 0; min-width:0; position:relative; }
/* Aktiver Zustand liegt IN der Zelle, nicht als Rahmen darüber.
   Der Marker sitzt weiterhin auf der Achse, die Zelle beginnt darunter —
   dadurch schneidet kein Rechteck mehr in die Timeline hinein. */
.cff-a1-root .a1-tlstop{
  display:block; width:100%;
  margin-top:var(--s4);
  padding:var(--s3) var(--s3) calc(var(--s3) + 2px);
  border:1px solid transparent;
  border-radius:var(--r2);
  background:transparent;
  transition:background-color var(--t2) var(--e),
             border-color var(--t2) var(--e),
             color var(--t1) var(--e);
}
.cff-a1-root .a1-tlstop:hover{
  background:var(--l1);
  border-color:var(--ln2);
}
.cff-a1-root .a1-tlstop:active{ background:var(--l2); }
.cff-a1-root .a1-tlstop[aria-selected="true"]{
  background:var(--l3);
  border-color:var(--em-ln);
  box-shadow:inset 0 1px 0 rgba(61,220,151,.12);
}
/* Fokusring nach innen, damit er die Achse nicht überlagert */
.cff-a1-root .a1-tlstop:focus-visible{
  outline:2px solid var(--em);
  outline-offset:-3px;
}
/* Feiner Steg vom Achsenmarker in die Zelle */
.cff-a1-root .a1-tl li::after{
  content:"";
  position:absolute;
  left:5px; top:11px;
  width:1px; height:calc(var(--s4) - 11px);
  background:var(--ln2);
  transition:background-color var(--t2) var(--e);
}
.cff-a1-root .a1-tl li:hover::after{ background:var(--ln3); }
.cff-a1-root .a1-tlstop::before{
  content:""; position:absolute; top:0; left:0;
  width:11px; height:11px; border-radius:var(--r1);
  background:var(--bg); border:1px solid var(--ln3);
  transition:background-color var(--t2) var(--e),
             border-color var(--t2) var(--e),
             transform var(--t2) var(--e);
}
.cff-a1-root .a1-tlstop:hover::before{ border-color:var(--tx3); }
.cff-a1-root .a1-tlstop.is-done::before{ background:var(--em2); border-color:var(--em2); }
.cff-a1-root .a1-tlstop[aria-selected="true"]::before{
  background:var(--em);
  border-color:var(--em);
  box-shadow:0 0 0 3px var(--em-sf);
}
.cff-a1-root .a1-tlstop .n{
  display:block; font-family:var(--mono); font-size:var(--f-micro);
  letter-spacing:.18em; color:var(--tx4); margin-bottom:.25rem;
}
.cff-a1-root .a1-tlstop .t{
  display:block; font-size:var(--f-sm); font-weight:600;
  line-height:1.3; color:var(--tx3);
  transition:color var(--t2) var(--e);
}
.cff-a1-root .a1-tlstop:hover .t{ color:var(--tx2); }
.cff-a1-root .a1-tlstop[aria-selected="true"] .n{ color:var(--em); }
.cff-a1-root .a1-tlstop[aria-selected="true"] .t{ color:var(--tx); }

.cff-a1-root .a1-era{ display:flex; flex-direction:column; gap:var(--s3); }
.cff-a1-root .a1-era h3{
  font-size:var(--f-h2);
  letter-spacing:-.032em;
  line-height:1.1;
}
.cff-a1-root .a1-era p{ color:var(--tx2); }
.cff-a1-root .a1-era__ex{
  margin-top:var(--s2);
  padding-top:var(--s3);
  border-top:1px solid var(--ln2);
}
.cff-a1-root .a1-era__ex[hidden]{ display:none; }
.cff-a1-root .a1-era__ex p{ color:var(--tx2); font-size:var(--f-sm); }


/* ==========================================================================
   10 — KAPITEL 06 · VERTRAUEN
   ========================================================================== */
.cff-a1-root .a1-quote{
  border-left:2px solid var(--em);
  padding-left:clamp(1rem,2.6vw,2rem);
}
.cff-a1-root .a1-quote p{
  font-size:var(--f-display);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.2;
  max-width:24ch;
}
.cff-a1-root .a1-scale{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s2);
  margin-top:var(--s5);
}
.cff-a1-root .a1-scale li{ padding-top:var(--s2); border-top:2px solid var(--ln2); }
.cff-a1-root .a1-scale li:first-child{ border-top-color:var(--em); }
.cff-a1-root .a1-scale .s{
  display:block; font-family:var(--mono); font-size:var(--f-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--tx3);
}
.cff-a1-root .a1-scale li:first-child .s{ color:var(--em); }
.cff-a1-root .a1-scale .d{
  display:block; font-size:var(--f-sm); color:var(--tx3); margin-top:.3rem;
}
.cff-a1-root .a1-loads{ margin-top:var(--s5); display:grid; gap:var(--s3); }
.cff-a1-root .a1-loads li{
  display:flex; align-items:baseline; gap:var(--s3);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--ln);
}
.cff-a1-root .a1-loads li:last-child{ border-bottom:0; padding-bottom:0; }
.cff-a1-root .a1-loads .n{
  font-family:var(--mono); font-size:var(--f-micro);
  letter-spacing:.18em; color:var(--tx4); flex:none;
}
.cff-a1-root .a1-loads .t{ font-size:var(--f-sm); color:var(--tx2); }


/* ==========================================================================
   11 — KAPITEL 07 · INFLATION (Interaktion 04)
   ========================================================================== */
.cff-a1-root .a1-infl{
  display:grid;
  grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr);
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:start;
}
.cff-a1-root .a1-money{
  border:1px solid var(--em-ln);
  background:var(--em-sf);
  border-radius:var(--r3);
  padding:clamp(1.5rem,3vw,2.25rem);
  text-align:center;
}
.cff-a1-root .a1-money svg{
  width:clamp(120px,18vw,168px); height:auto;
  margin:0 auto var(--s4);
  color:var(--em);
}
.cff-a1-root .a1-money .k{
  display:block; font-family:var(--mono); font-size:var(--f-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--em);
}
.cff-a1-root .a1-money .v{
  display:block; font-size:var(--f-h3); font-weight:600;
  letter-spacing:-.02em; color:var(--tx); margin-top:.35rem;
}

.cff-a1-root .a1-basket__head{
  display:flex; align-items:center; gap:var(--s3);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--ln2);
  margin-bottom:var(--s4);
}
.cff-a1-root .a1-basket__head svg{ width:28px; height:28px; color:var(--tx3); flex:none; }
.cff-a1-root .a1-goods{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--s2);
}
.cff-a1-root .a1-good{
  aspect-ratio:1;
  border:1px solid var(--ln2);
  border-radius:var(--r2);
  background:var(--l1);
  display:grid; place-items:center;
  color:var(--tx3);
  transition:opacity var(--t2) var(--e),transform var(--t2) var(--e),
             border-color var(--t2) var(--e),background-color var(--t2) var(--e),
             color var(--t2) var(--e);
}
.cff-a1-root .a1-good svg{ width:52%; height:52%; }
.cff-a1-root .a1-good.is-have{
  border-color:var(--em-ln); background:var(--em-sf); color:var(--em);
}
.cff-a1-root .a1-good.is-gone{ opacity:.14; transform:scale(.88); }

.cff-a1-root .a1-slider{
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--ln2);
}
.cff-a1-root .a1-slider__row{ display:flex; align-items:center; gap:var(--s3); }
.cff-a1-root .a1-slider input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:2px; margin:0;
  background:var(--ln3); border-radius:2px; outline:none; cursor:pointer;
}
.cff-a1-root .a1-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border:0; border-radius:var(--r1);
  background:var(--em); cursor:pointer;
}
.cff-a1-root .a1-slider input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border:0; border-radius:var(--r1);
  background:var(--em); cursor:pointer;
}
.cff-a1-root .a1-slider input[type=range]:focus-visible{
  outline:2px solid var(--em); outline-offset:8px;
}
.cff-a1-root .a1-power{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s2); margin-top:var(--s4);
}
.cff-a1-root .a1-power li{
  padding-top:var(--s2);
  border-top:2px solid var(--ln2);
  transition:border-color var(--t2) var(--e);
}
.cff-a1-root .a1-power li.is-on{ border-top-color:var(--em); }
.cff-a1-root .a1-power .s{
  font-family:var(--mono); font-size:var(--f-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--tx4);
  transition:color var(--t2) var(--e);
}
.cff-a1-root .a1-power li.is-on .s{ color:var(--em); }

/* Optionaler Data-Module-Slot — bleibt ausgeblendet, bis echte Daten freigegeben sind */
.cff-a1-root .a1-dataslot{ display:none; }


/* ==========================================================================
   12 — KAPITEL 08 · ALTERNATIVEN
   ========================================================================== */
.cff-a1-root .a1-problems{ display:grid; gap:var(--s3); }
.cff-a1-root .a1-problems li{
  display:flex; align-items:baseline; gap:var(--s3);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--ln);
}
.cff-a1-root .a1-problems li:last-child{ border-bottom:0; }
.cff-a1-root .a1-problems .n{
  font-family:var(--mono); font-size:var(--f-micro);
  letter-spacing:.18em; color:var(--tx4); flex:none;
}
.cff-a1-root .a1-problems .t{ color:var(--tx2); font-size:var(--f-sm); }

.cff-a1-root .a1-assets{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.75rem);
}
.cff-a1-root .a1-asset{
  border:1px solid var(--ln2);
  border-radius:var(--r3);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(61,220,151,.05) 0%, transparent 60%),
    var(--l1);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex; flex-direction:column; gap:var(--s3);
}
.cff-a1-root .a1-asset__vis{
  height:clamp(120px,16vw,164px);
  display:grid; place-items:center;
  color:var(--em);
  margin-bottom:var(--s2);
}
.cff-a1-root .a1-asset__vis svg{ width:auto; height:100%; }
.cff-a1-root .a1-asset h3{
  font-size:var(--f-h3); letter-spacing:-.02em;
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--ln2);
}
.cff-a1-root .a1-asset ul{ display:grid; gap:.65rem; }
.cff-a1-root .a1-asset li{
  display:flex; gap:.75rem; font-size:var(--f-sm); color:var(--tx2);
}
.cff-a1-root .a1-asset li::before{
  content:""; flex:none; width:1px; height:17px;
  background:var(--em-ln); margin-top:.25rem;
}
.cff-a1-root .a1-shared{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--em-ln);
  padding-top:var(--s4);
}
.cff-a1-root .a1-shared p{
  font-size:var(--f-lead); font-weight:600;
  letter-spacing:-.02em; color:var(--tx); max-width:44ch;
}


/* ==========================================================================
   13 — KAPITEL 09 · SUMMARY / MERKE / NEXT
   ========================================================================== */
.cff-a1-root .a1-merke{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding:clamp(3rem,7vw,6rem) var(--s4);
  border-top:1px solid var(--ln2);
  border-bottom:1px solid var(--ln2);
  text-align:center;
}
.cff-a1-root .a1-merke p{
  font-size:clamp(1.75rem,4.4vw,3.25rem);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.15;
  max-width:22ch;
  margin-inline:auto;
}
.cff-a1-root .a1-merke .em{ color:var(--em); }

.cff-a1-root .a1-next{
  display:block;
  position:relative;
  overflow:hidden;
  margin-top:clamp(2.5rem,5vw,4rem);
  border:1px solid var(--ln2);
  border-radius:var(--r3);
  background:var(--l1);
  transition:border-color var(--t2) var(--e),background-color var(--t2) var(--e);
}
.cff-a1-root .a1-next:hover{ border-color:var(--em-ln); background:var(--l2); }
.cff-a1-root .a1-next__line{
  display:block; position:relative; height:1px; background:var(--ln2);
}
.cff-a1-root .a1-next__line::after{
  content:""; position:absolute; inset:0 auto 0 0; width:100%;
  background:linear-gradient(90deg,var(--em),var(--em2));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t3) var(--e);
}
.cff-a1-root .a1-next:hover .a1-next__line::after,
.cff-a1-root .a1-next:focus-visible .a1-next__line::after{ transform:scaleX(1); }
.cff-a1-root .a1-next__in{
  display:flex; align-items:center; gap:var(--s4);
  padding:clamp(2rem,4.5vw,3.25rem) clamp(1.25rem,3vw,2.5rem);
}
.cff-a1-root .a1-next__t{
  display:block;
  font-size:clamp(1.625rem,3.8vw,2.75rem);
  font-weight:600; letter-spacing:-.04em; line-height:1.04;
  margin-block:.5rem .55rem;
  transition:color var(--t2) var(--e);
}
.cff-a1-root .a1-next:hover .a1-next__t{ color:var(--em); }
.cff-a1-root .a1-next__arrow{
  margin-left:auto; flex:none;
  width:56px; height:56px;
  border:1px solid var(--ln3); border-radius:var(--r2);
  display:grid; place-items:center; color:var(--tx2);
  transition:border-color var(--t2) var(--e),color var(--t2) var(--e),
             transform var(--t2) var(--e);
}
.cff-a1-root .a1-next:hover .a1-next__arrow{
  border-color:var(--em-ln); color:var(--em); transform:translateX(6px);
}
.cff-a1-root .a1-next__arrow svg{ width:22px; height:22px; }

.cff-a1-root .a1-foot{
  margin-top:var(--s5);
  padding-block:var(--s4) var(--s7);
  border-top:1px solid var(--ln);
}


/* ==========================================================================
   14 — RESPONSIV
   ========================================================================== */
@media (max-width:1040px){
  .cff-a1-root .a1-hero{ grid-template-columns:1fr; }
  .cff-a1-root .a1-split,
  .cff-a1-root .a1-split--even,
  .cff-a1-root .a1-split--visual-right{ grid-template-columns:1fr; }
  .cff-a1-root .a1-split--visual-right > :first-child{ order:2; }
  .cff-a1-root .a1-split--visual-right > :last-child{ order:1; }
  .cff-a1-root .a1-infl{ grid-template-columns:1fr; }
  .cff-a1-root .a1-assets{ grid-template-columns:1fr; }
  .cff-a1-root .a1-index ol{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cff-a1-root .a1-chap{ grid-template-columns:1fr; }
  .cff-a1-root .a1-chap__rail{ padding-bottom:var(--s3); }
  .cff-a1-root .a1-chap__rail::before{ display:none; }
  .cff-a1-root .a1-chap__n{ padding-left:0; }
  .cff-a1-root .a1-chap__n::before{ display:none; }
}

@media (max-width:760px){
  .cff-a1-root .a1-tabs{ grid-template-columns:1fr; }
  .cff-a1-root .a1-steps{ grid-template-columns:1fr; gap:0; }
  .cff-a1-root .a1-anchor{ grid-template-columns:1fr; }
  .cff-a1-root .a1-goods{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cff-a1-root .a1-hero__meta{ flex-wrap:wrap; gap:var(--s3) var(--s4); }

  /* Timeline kippt auf die vertikale Achse */
  .cff-a1-root .a1-tl{ flex-direction:column; gap:0; }
  .cff-a1-root .a1-tlwrap::before{
    left:5px; right:auto; top:8px; bottom:8px; width:1px; height:auto;
  }
  .cff-a1-root .a1-tlfill{
    left:5px; top:8px; width:1px; height:0;
    transition:height var(--t3) var(--e);
  }
  .cff-a1-root .a1-tl li{ padding-left:var(--s4); padding-bottom:var(--s2); }
  .cff-a1-root .a1-tl li::after{ display:none; }
  .cff-a1-root .a1-tlstop{
    margin-top:0;
    padding:var(--s2) var(--s3);
  }
  .cff-a1-root .a1-tlstop::before{ top:1.1em; left:calc(-1 * var(--s4)); }

  .cff-a1-root .a1-next__in{ flex-wrap:wrap; }
  .cff-a1-root .a1-next__arrow{ margin-left:0; }
}

@media (max-width:520px){
  .cff-a1-root .a1-index ol{ grid-template-columns:1fr; }
  .cff-a1-root .a1-goods{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cff-a1-root .a1-scale,
  .cff-a1-root .a1-power{ grid-template-columns:1fr; }
}


/* ==========================================================================
   15 — REDUCED MOTION
   Zustände bleiben erhalten, nur die Übergänge entfallen.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .cff-a1-root *,
  .cff-a1-root *::before,
  .cff-a1-root *::after{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
  }
  .cff-a1-root .a1-draw{ stroke-dasharray:none; stroke-dashoffset:0; }
}/* ==========================================================================
   KONTRAST-KORREKTUR  ·  ANHANG

   Ans Ende der bestehenden Datei gehängt. Ersetzt nichts, überschreibt nur
   die Deckkraft der Symbolfüllungen und die Linienstärke. Da diese Regeln
   später stehen als die ursprünglichen, gewinnen sie bei gleicher
   Spezifität.

   Grund: Die Füllungen lagen bei 9 bis 17 Prozent auf #050806. Gerendert
   ergab das #111512 bis #1C201D — praktisch Schwarz.
   ========================================================================== */
.cff-a1-root .a1-f1{ opacity:.16; }
.cff-a1-root .a1-f2{ opacity:.26; }
.cff-a1-root .a1-f3{ opacity:.42; }
.cff-a1-root .a1-f4{ opacity:.68; }

.cff-a1-root .a1-gx{ stroke-width:1.6; }
.cff-a1-root .a1-gx--edge{ stroke-width:1.9; }
.cff-a1-root .a1-gx--hair{ stroke-width:1.1; opacity:.85; }

.cff-a1-root .a1-ink{ color:#A6B1AA; }
.cff-a1-root .a1-ink--soft{ color:#8A968F; }
.cff-a1-root .a1-ink--dim{ color:#6B776F; }