/* ============================================================
   RYVION — Apple Style Glass
   Helles Liquid-Background-Design mit Glassmorphism
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --bg: #eef7fc;
  --blob: #bfe2f9;
  --ink: #386b8e;          /* Headlines, Buttons */
  --ink-soft: #5a8ab0;     /* nur große (>=18px) / sekundäre Texte */
  --text: #2e5975;         /* Fließtext — Kontrast >= 4.5:1 auf --bg */
  --text-strong: #244760;
  --legal-text: #1f3c52;
  --shadow-blue-lg: 0 24px 48px rgba(30, 90, 140, 0.15);
  --shadow-blue-sm: 0 4px 12px rgba(30, 90, 140, 0.08);
  --radius-card: 30px;
  --radius-btn: 50px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-h: 64px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut muss stärker sein als eigene display-Regeln.
   Ohne diese Zeile überstimmt z. B. `.calc-grid { display: grid }` das
   `display: none` des Browsers, und ausgeblendete Blöcke bleiben sichtbar. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  background: var(--bg);
}

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--blob); color: var(--text-strong); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: #fff; color: var(--ink); font-weight: 600;
  padding: 10px 18px; border-radius: var(--radius-btn);
  box-shadow: var(--shadow-blue-sm);
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Glass Recipe (Standard-Card) ---------- */
.glass {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(35px);
  backdrop-filter: blur(35px);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  box-shadow:
    var(--shadow-blue-lg),
    var(--shadow-blue-sm),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Fallback ohne backdrop-filter-Support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav, .mobile-menu, .cta-panel { background: rgba(255, 255, 255, 0.75) !important; }
}

/* ---------- Liquid Background (durchgehend, seamless) ----------
   Ein einziger fixierter Layer hinter der GESAMTEN Seite. Dadurch
   gibt es keine Sektionsgrenzen mehr, an denen Blobs hart abgeschnitten
   werden — der Hintergrund wirkt als eine Einheit. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.page-bg .blob {
  position: absolute;
  background: var(--blob);
  border-radius: 40% 60% 50% 50%;
  filter: blur(70px);
  opacity: 0.7;
  will-change: transform;
  animation: flow 14s infinite alternate ease-in-out;
}

.page-bg .blob-a { width: 46vw; height: 46vw; min-width: 340px; min-height: 340px; top: -8vh;  left: -6vw; }
.page-bg .blob-b { width: 40vw; height: 40vw; min-width: 300px; min-height: 300px; top: 14vh;  right: -8vw; animation-duration: 17s; animation-delay: -4s; }
.page-bg .blob-c { width: 34vw; height: 34vw; min-width: 260px; min-height: 260px; top: 48vh;  left: -4vw; animation-duration: 20s; animation-delay: -8s; }
.page-bg .blob-d { width: 42vw; height: 42vw; min-width: 300px; min-height: 300px; top: 72vh;  right: -6vw; animation-duration: 16s; animation-delay: -2s; opacity: 0.6; }
.page-bg .blob-e { width: 38vw; height: 38vw; min-width: 280px; min-height: 280px; top: 90vh;  left: 8vw;  animation-duration: 19s; animation-delay: -11s; opacity: 0.55; }

/* Per-Sektion-Blobs abgeschaltet — der globale .page-bg ersetzt sie
   nahtlos (die alten .blob-wrap wurden an Sektionsgrenzen geclippt). */
.blob-scene { position: relative; }
.blob-wrap { display: none; }

@keyframes flow {
  0%   { transform: scale(0.92) translate(-24px, 16px); border-radius: 40% 60% 50% 50%; }
  100% { transform: scale(1.08) translate(24px, -16px); border-radius: 60% 40% 60% 40%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 12px 30px;
  border-radius: var(--radius-btn);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.4s;
  box-shadow: var(--shadow-blue-sm);
}
.btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 90, 140, 0.1);
  text-decoration: none;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-primary:hover { background: #2e5a79; }

/* ---------- Navigation (Sticky Glass-Bar) ---------- */
.nav {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 24px));
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(35px);
  backdrop-filter: blur(35px);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-blue-sm), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: box-shadow 0.3s;
}
.nav.scrolled { box-shadow: var(--shadow-blue-lg), inset 0 1px 1px rgba(255, 255, 255, 0.4); }

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink);
}
.nav-logo:hover { text-decoration: none; }
/* Markenzeichen: transparentes PNG, trägt eigene Farben -> auf hell und dunkel sichtbar */
.nav-logo img { width: 30px; height: auto; flex: none; }
.footer-brand .nav-logo img { width: 34px; }

/* ---------- Tarif-Vergleich (Free / Pro / Ultra) ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.tier-card { padding: 30px 26px; display: flex; flex-direction: column; }
.tier-card.featured { border-top: 2px solid rgba(255, 255, 255, 0.95); }
.tier-head { margin-bottom: 16px; }
.tier-name { font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.tier-sub { font-size: 0.88rem; color: var(--text); margin: 2px 0 0; }
.tier-price { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-top: 10px; }
.tier-price small { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.tier-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 0.92rem; }
.tier-list li { display: flex; gap: 9px; align-items: flex-start; }
.tier-list .check { color: var(--ink); font-weight: 700; flex: none; }
.tier-list li.highlight { font-weight: 600; color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--text); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-btn);
  padding: 2px;
  background: rgba(255, 255, 255, 0.25);
}
.lang-toggle button {
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  padding: 5px 10px;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.lang-toggle button.active { background: var(--ink); color: #fff; }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-burger span {
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: 0.3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: min(1100px, calc(100% - 24px));
  z-index: 99;
  padding: 18px 22px;
  display: none;
  opacity: 0;
  transition: 0.25s;
}
.mobile-menu.open { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mobile-menu a { font-weight: 600; }
.mobile-menu .lang-toggle { margin-top: 14px; }

/* ---------- Layout ---------- */
main { display: block; }

.section {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 20px;
}
.section-tight { padding-top: 40px; padding-bottom: 40px; }

.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; position: relative; z-index: 1; }
.section-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.section-lead { font-size: 1.08rem; color: var(--text); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; z-index: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 72px) 20px 72px;
  overflow: hidden;
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-panel { padding: 44px; }
.hero-kicker {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.hero h1 em { font-style: normal; color: var(--ink-soft); }
.hero-sub { font-size: 1.1rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; align-items: center; }
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.store-badges img { height: 46px; width: auto; }
a[data-app-store]:not([href]) { pointer-events: none; cursor: default; }
.store-note { font-size: 0.85rem; color: var(--ink); font-weight: 600; }

.hero-visual { display: flex; justify-content: center; }
.phone-frame {
  padding: 14px;
  border-radius: 42px;
  max-width: 280px;
}
.phone-frame img { border-radius: 30px; }

/* ---------- Stats ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
  z-index: 1;
}
.stat { text-align: center; padding: 26px 14px; }
.stat-num { font-size: 1.9rem; font-weight: 700; color: var(--ink); }
.stat-label { font-size: 0.85rem; color: var(--text); }

/* ---------- Feature Cards ---------- */
.feature-card { padding: 28px; }
.feature-icon { font-size: 1.7rem; margin-bottom: 12px; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature-card p { font-size: 0.92rem; margin: 0; }

.tier-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--ink);
  margin-bottom: 12px;
}
.tier-chip.ultra { background: var(--ink); color: #fff; border-color: var(--ink); }

.footnote { font-size: 0.85rem; color: var(--text); max-width: 640px; margin: 22px auto 0; text-align: center; position: relative; z-index: 1; }

/* ---------- Steps ---------- */
.step-num {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 14px;
}

/* ---------- ACE Section ---------- */
.ace-panel { padding: 44px; margin-bottom: 22px; }
.ace-panel h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.ace-panel p { margin: 0; }
.ace-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; position: relative; z-index: 1; }
.ace-intro { font-size: 1.08rem; max-width: 62ch; margin: 0 auto 40px; text-align: center; position: relative; z-index: 1; }

/* ---------- Trust ---------- */
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trust-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  font-size: 0.98rem;
}
.trust-list .check { color: var(--ink); font-weight: 700; flex: none; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; position: relative; z-index: 1; }
.price-card { padding: 32px 28px; display: flex; flex-direction: column; }
.price-card.featured { border-top: 2px solid rgba(255, 255, 255, 0.95); }
.price-value { font-size: 2.1rem; font-weight: 700; color: var(--ink); }
.price-period { font-size: 0.9rem; color: var(--text); }
.price-note { font-size: 0.8rem; color: var(--text); margin-top: 4px; }
.price-features { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 9px; font-size: 0.92rem; }
.price-features li { display: flex; gap: 9px; align-items: flex-start; }
.price-features .check { color: var(--ink); font-weight: 700; flex: none; }
.price-card .btn { margin-top: auto; justify-content: center; }
.save-badge {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-btn);
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
  white-space: nowrap;
}
.adfree-note {
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
  max-width: 640px;
  margin: 26px auto 0;
  padding: 14px 22px;
  position: relative;
  z-index: 1;
}
.price-legal { font-size: 0.82rem; color: var(--text); text-align: center; max-width: 560px; margin: 26px auto 0; position: relative; z-index: 1; }

/* ---------- Gallery ---------- */
.gallery-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  position: relative;
  z-index: 1;
}
.gallery-row .shot { padding: 8px; border-radius: 24px; }
.gallery-row img { border-radius: 18px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; position: relative; z-index: 1; }
.faq-item { overflow: hidden; }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  padding: 18px 22px;
  cursor: pointer;
}
.faq-question .chev { transition: transform 0.3s; flex: none; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 22px;
  font-size: 0.94rem;
}
.faq-answer p { margin: 0 0 18px; }

/* ---------- CTA ---------- */
.cta-panel { text-align: center; padding: 52px 32px; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: start;
  position: relative;
  z-index: 1;
}
/* Trug bis zum 02.10.2026 den Platzhalter „Foto folgt" — daher die
   Zentrierung und das Padding. Jetzt steht hier ein Bild, das die Fläche
   füllt; der Rahmen bleibt wie er war. */
.founder-portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 0;
}
.founder-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
}
.quote-block {
  text-align: center;
  padding: 40px 32px;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.quote-block blockquote {
  margin: 0 0 10px;
  font-size: 1.3rem;
  color: var(--ink);
  font-weight: 500;
}
.quote-block cite { color: var(--text); font-style: normal; font-size: 0.9rem; }

/* ---------- Warum Ryvion? (About) ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.way-panel { padding: 32px 24px; text-align: center; }
.way-icons { font-size: 1.5rem; letter-spacing: 8px; margin-bottom: 14px; }
.way-logo {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 auto 14px;
}
.way-panel h3 { margin-bottom: 6px; }
.way-panel p { margin: 0; font-size: 0.95rem; }

.indie-badge {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 18px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
}

/* ---------- Ökosystem-Kacheln (About) ---------- */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.eco-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 10px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.eco-icon { font-size: 1.8rem; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; position: relative; z-index: 1; }
.contact-card { padding: 28px; display: flex; align-items: center; gap: 16px; }
.contact-card:hover { text-decoration: none; transform: translateY(-2px); transition: 0.3s; }
.contact-icon { font-size: 1.6rem; flex: none; display: inline-flex; }
.contact-icon svg { width: 24px; height: 24px; fill: var(--ink); }
.contact-card h3 { margin: 0 0 2px; font-size: 1rem; }
.contact-card p { margin: 0; font-size: 0.9rem; }

/* ---------- Footer ---------- */
.footer { padding: 40px 20px 28px; position: relative; }
.footer-panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 36px 24px;
  position: relative;
  z-index: 1;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 30px;
}
.footer-brand p { font-size: 0.9rem; max-width: 30ch; }
.footer-col h4, .footer-col h3.footer-h {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { font-size: 0.9rem; color: var(--text); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-top: 1px solid rgba(56, 107, 142, 0.15);
  margin-top: 30px;
  padding-top: 20px;
  font-size: 0.85rem;
  color: var(--text);
}
/* Beschriftete Pills statt reiner Icons — nie als nackte URL lesbar */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.7); text-decoration: none; }
.footer-social svg { width: 18px; height: 18px; fill: var(--ink); flex: none; }

/* ---------- Legal Pages ---------- */
.legal-wrap { max-width: 860px; margin: 0 auto; padding: calc(var(--nav-h) + 56px) 20px 72px; position: relative; z-index: 1; }

.legal-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  margin-bottom: 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.legal-badge .flag { font-size: 1.2rem; }

.legal-hint {
  padding: 14px 22px;
  margin-bottom: 18px;
  font-size: 0.92rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.55);
}
.legal-hint a { font-weight: 600; }

.legal-reader {
  background: rgba(255, 255, 255, 0.92);
  padding: clamp(24px, 5vw, 56px);
  color: var(--legal-text);
}
.legal-reader > * { max-width: 72ch; }
.legal-reader h1 { font-size: 1.7rem; color: var(--text-strong); }
.legal-reader h2 { font-size: 1.25rem; color: var(--text-strong); margin-top: 2em; }
.legal-reader h3 { font-size: 1.05rem; color: var(--text-strong); margin-top: 1.6em; }
.legal-reader p, .legal-reader li { font-size: 0.95rem; line-height: 1.7; }
.legal-reader ul { padding-left: 1.3em; }
.legal-reader hr { border: 0; border-top: 1px solid rgba(56, 107, 142, 0.2); margin: 2em 0; }
.legal-reader a { text-decoration: underline; }

.table-wrap { overflow-x: auto; max-width: none; margin: 1.2em 0; }
.legal-reader table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.88rem; }
.legal-reader th, .legal-reader td {
  border: 1px solid rgba(56, 107, 142, 0.25);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-reader th { background: rgba(191, 226, 249, 0.35); color: var(--text-strong); }

/* Legal Hub */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; position: relative; z-index: 1; }
.hub-card { padding: 24px; display: block; }
.hub-card:hover { text-decoration: none; transform: translateY(-2px); transition: 0.3s; }
.hub-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; }
.hub-meta span {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-btn);
  padding: 2px 10px;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- ACE-Seite: schematische Beispielwoche ---------- */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.week-day {
  padding: 18px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.week-dow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.week-label { font-size: 0.85rem; color: var(--text); line-height: 1.4; }
.week-train { border-top: 2px solid rgba(255, 255, 255, 0.95); }
.week-train .week-label { color: var(--ink); font-weight: 600; }
.week-rest .week-label { opacity: 0.75; }

/* ---------- Landingpages: Funktion + Screenshot ---------- */
.lp-help-list { display: grid; gap: 20px; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.lp-help {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 24px;
  align-items: center;
  padding: 26px 28px;
}
.lp-help:nth-child(even) { grid-template-columns: 150px 1fr; }
.lp-help:nth-child(even) .lp-help-text { order: 2; }
.lp-help:nth-child(even) .lp-help-shot { order: 1; }
.lp-help h3 { font-size: 1.08rem; margin-bottom: 7px; }
.lp-help p { font-size: 0.94rem; margin: 0; }
.lp-help-shot img { border-radius: 16px; box-shadow: var(--shadow-blue-sm); }

/* ---------- Hilfe-Center ---------- */
.breadcrumb {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.breadcrumb a { color: var(--ink); }
.breadcrumb .crumb-sep { color: var(--ink-soft); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

.help-search { padding: 14px 18px; max-width: 640px; margin: 0 auto 18px; position: relative; z-index: 1; }
.help-search input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  padding: 8px 4px;
}
.help-search input::placeholder { color: var(--ink-soft); }
.help-search input:focus { outline: none; }
.help-search:focus-within { box-shadow: var(--shadow-blue-lg), 0 0 0 3px rgba(56, 107, 142, 0.25); }

.help-results { max-width: 640px; margin: 0 auto 28px; display: grid; gap: 10px; position: relative; z-index: 1; }
.help-results:empty { margin: 0 auto; }
.help-result { display: block; padding: 16px 20px; }
.help-result:hover { text-decoration: none; transform: translateY(-2px); transition: 0.25s; }
.help-result h3 { font-size: 1rem; margin: 0 0 4px; }
.help-result p { font-size: 0.88rem; margin: 0; color: var(--text); }
.help-result .help-result-cat {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
}
.help-count { font-size: 0.85rem; color: var(--text); text-align: center; }

.help-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; z-index: 1; }
.help-cat { display: block; padding: 24px 22px; }
.help-cat:hover { text-decoration: none; transform: translateY(-2px); transition: 0.25s; }
.help-cat-icon { font-size: 1.7rem; display: block; margin-bottom: 10px; }
.help-cat h2 { font-size: 1.02rem; margin: 0 0 6px; }
.help-cat p { font-size: 0.86rem; margin: 0 0 10px; color: var(--text); }
.help-cat-count { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }

.help-list { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.help-item { display: block; padding: 20px 24px; }
.help-item:hover { text-decoration: none; transform: translateY(-2px); transition: 0.25s; }
.help-item h3 { font-size: 1.02rem; margin: 0 0 5px; }
.help-item p { font-size: 0.88rem; margin: 0; color: var(--text); }

.help-article {
  background: rgba(255, 255, 255, 0.92);
  padding: clamp(24px, 4vw, 44px);
  max-width: 760px;
  margin: 0 auto;
  color: var(--legal-text);
}
.help-article h1 { font-size: 1.6rem; color: var(--text-strong); }
.help-article p { font-size: 1rem; line-height: 1.75; margin: 0; }
.help-article a { text-decoration: underline; }

.helpful, .help-related {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 22px 26px;
  position: relative;
  z-index: 1;
}
.helpful strong { color: var(--ink); display: block; margin-bottom: 6px; }
.helpful p { font-size: 0.92rem; margin: 0 0 14px; }
.help-related h2 { font-size: 1rem; margin-bottom: 10px; }
.help-related ul { margin: 0; padding-left: 1.2em; display: grid; gap: 7px; font-size: 0.92rem; }
.help-foot {
  max-width: 760px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text);
  position: relative;
  z-index: 1;
}

/* ---------- Reveal Animations ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav .lang-toggle { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .phone-frame { max-width: 210px; }
  .grid-3, .ace-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .help-cat-grid { grid-template-columns: 1fr 1fr; }
  .week-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .eco-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-row { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .founder-portrait { max-width: 280px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .section { padding: 52px 16px; }
  .hero-panel { padding: 30px 22px; }
  .grid-3, .grid-2, .ace-grid, .pricing-grid, .contact-grid, .hub-grid, .tier-grid,
  .help-cat-grid { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: 1fr 1fr; }
  .lp-help, .lp-help:nth-child(even) { grid-template-columns: 1fr; }
  .lp-help:nth-child(even) .lp-help-text { order: 0; }
  .lp-help:nth-child(even) .lp-help-shot { order: 0; }
  .lp-help-shot { max-width: 150px; margin: 0 auto; }
  .gallery-row { grid-template-columns: 1fr 1fr; }
  .eco-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .ace-panel { padding: 28px 22px; }
}

/* ============================================================
   Rechner (/rechner und Unterseiten)
   ============================================================ */

.section-tight { padding-top: 0; }

.calc-head { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.calc-head h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.15; margin: 0 0 12px; color: var(--text-strong); }
.calc-head h1 em { font-style: normal; color: var(--ink); }
.calc-lead { font-size: 18px; color: var(--ink-soft); margin: 0; }

.calc-card { max-width: 760px; margin: 0 auto; padding: 28px 26px 24px; }

.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.calc-grid + .calc-grid { margin-top: 16px; }

.calc-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.calc-label {
  font-size: 14px; font-weight: 600; color: var(--text-strong);
  line-height: 1.35;
}

.calc-field input[type="number"],
.calc-field select {
  width: 100%;
  /* 17px: verhindert das automatische Hineinzoomen von iOS Safari */
  font: inherit; font-size: 17px;
  color: var(--text-strong);
  padding: 13px 14px;
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 2px rgba(30, 90, 140, 0.06);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  appearance: none; -webkit-appearance: none;
}
.calc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23386b8e' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 38px;
}
.calc-field input:focus-visible,
.calc-field select:focus-visible {
  outline: none;
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(56, 107, 142, 0.18);
}
.calc-field input::placeholder { color: rgba(90, 138, 176, 0.6); }

.calc-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-radio {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 50px; padding: 10px 12px;
  font-size: 15px; text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.calc-radio input { accent-color: var(--ink); width: 17px; height: 17px; margin: 0; flex: none; }
.calc-radio:has(input:checked) {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--ink);
  font-weight: 600; color: var(--text-strong);
}
.calc-radio:focus-within { box-shadow: 0 0 0 3px rgba(56, 107, 142, 0.18); }

.calc-hint { font-size: 13.5px; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.55; }
.calc-hint a { color: var(--ink); }

.calc-privacy {
  margin: 16px 0 0;
  padding: 11px 15px 11px 40px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-strong);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  position: relative;
}
.calc-privacy::before {
  content: "\1F512"; position: absolute; left: 14px; top: 10px; font-size: 15px;
}
.calc-privacy-center { max-width: 620px; margin: 0 auto 30px; text-align: left; }

/* ---- Ergebnis ---- */
.calc-result {
  margin-top: 20px;
  padding: 20px 20px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--shadow-blue-sm);
}
.calc-result-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin: 0 0 14px; font-weight: 700;
}
.calc-out-main {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(56, 107, 142, 0.1);
}
.calc-out-main:last-of-type { border-bottom: none; }
.calc-out-label { font-size: 14.5px; color: var(--text); flex: 1 1 180px; }
.calc-out-main output {
  font-size: 21px; font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc-out-main small { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.calc-out-big output { font-size: 28px; }

.calc-factor { font-size: 14px; color: var(--text); margin: 12px 0 0; }
.calc-factor output { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.calc-factor-note { color: var(--ink-soft); font-size: 13px; }

.calc-compare { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.calc-compare > span { font-weight: 600; color: var(--text); }
.calc-compare ul { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 3px; }
.calc-compare output { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 600; }

.calc-goal {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(56, 107, 142, 0.14);
}
.calc-goal output {
  display: block; font-size: 22px; font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

.calc-note { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 10px 0 0; }
.calc-note a { color: var(--ink); }
.calc-warn {
  font-size: 13.5px; line-height: 1.55; color: var(--legal-text);
  margin: 12px 0 0; padding: 11px 14px;
  background: rgba(255, 236, 200, 0.55);
  border: 1px solid rgba(212, 160, 60, 0.35);
  border-radius: 14px;
}
.calc-empty { font-size: 14px; color: var(--ink-soft); margin: 20px 0 0; text-align: center; }

/* ---- Makro-Balken ---- */
.macro-bar {
  display: flex; height: 14px; margin-top: 16px;
  border-radius: 50px; overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.macro-bar span { display: block; height: 100%; transition: width .25s ease; }
.macro-bar [data-seg="protein"] { background: #386b8e; }
.macro-bar [data-seg="fat"]     { background: #7fb3d3; }
.macro-bar [data-seg="carbs"]   { background: #bfe2f9; }

/* ---- Tabellen ---- */
.calc-table-wrap { margin-top: 20px; }
.calc-table-wrap > .calc-out-label { display: block; font-weight: 600; margin-bottom: 8px; }
.calc-table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.calc-table th, .calc-table td {
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid rgba(56, 107, 142, 0.12);
}
.calc-table th {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); font-weight: 700;
}
.calc-table td { color: var(--text-strong); }
.calc-table td:first-child { color: var(--text); }
.calc-table tbody tr:last-child td { border-bottom: none; }
.calc-table output { font-weight: 600; }

.calc-guide {
  margin-top: 20px; padding: 16px 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  font-size: 14px; line-height: 1.6;
}
.calc-guide strong { display: block; color: var(--text-strong); margin-bottom: 8px; }
.calc-guide ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text); }

/* ---- Hinweisbox / Erklaertexte / CTA ---- */
.calc-disclaimer {
  max-width: 760px; margin: 0 auto; padding: 22px 24px;
  font-size: 14px; line-height: 1.65;
}
.calc-disclaimer strong { display: block; color: var(--text-strong); margin-bottom: 8px; font-size: 15px; }
.calc-disclaimer p { margin: 0; color: var(--text); }
.calc-adults { margin-top: 8px !important; color: var(--ink-soft) !important; font-size: 13.5px; }

.calc-prose { max-width: 760px; margin: 0 auto; padding: 30px 28px; }
.calc-prose h2 { font-size: clamp(22px, 3.2vw, 28px); margin: 0 0 14px; color: var(--text-strong); }
.calc-prose p { margin: 0 0 14px; line-height: 1.75; }
.calc-prose p:last-child { margin-bottom: 0; }
.calc-prose ul { line-height: 1.75; padding-left: 22px; }
.calc-prose li { margin-bottom: 8px; }

.calc-cta { max-width: 620px; margin: 0 auto; padding: 30px 28px; text-align: center; }
.calc-cta p { font-size: 17px; color: var(--text-strong); margin: 0 0 18px; }
.calc-cta .store-badges { justify-content: center; }
.calc-cta-note { font-size: 13px !important; color: var(--ink-soft) !important; margin: 16px 0 0 !important; }

@media (max-width: 700px) {
  .calc-card { padding: 22px 16px 20px; border-radius: 24px; }
  .calc-grid { gap: 14px 12px; }
  /* Ergebnis bleibt beim Ausfuellen sichtbar, ohne den Schirm zu fuellen */
  .calc-result {
    position: sticky; bottom: 8px; z-index: 2;
    max-height: 46vh; overflow-y: auto;
    background: rgba(255, 255, 255, 0.9);
  }
  .calc-out-main output { font-size: 19px; }
  .calc-out-big output { font-size: 24px; }
  .calc-prose, .calc-disclaimer, .calc-cta { padding: 24px 20px; }
  .calc-table th, .calc-table td { padding: 8px 6px; font-size: 13.5px; }
}

@media (max-width: 420px) {
  .calc-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .macro-bar span { transition: none; }
}

/* ============================================================
   Wissensdatenbank (/wissen, /knowledge)
   ============================================================ */

.wis-jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin: 0 auto 34px; max-width: 760px;
}
.wis-jump a {
  padding: 8px 16px; border-radius: var(--radius-btn);
  font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  transition: background .18s ease, transform .18s ease;
}
.wis-jump a:hover { background: rgba(255, 255, 255, 0.85); transform: translateY(-1px); }

.wis-group { margin-bottom: 46px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.wis-group:last-child { margin-bottom: 0; }
.wis-group-title {
  font-size: clamp(21px, 3vw, 26px); margin: 0 0 4px; color: var(--text-strong);
}
.wis-group-desc { margin: 0 0 20px; color: var(--ink-soft); font-size: 15.5px; }

.wis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.wis-card {
  display: block; padding: 24px 22px; text-decoration: none; color: inherit;
  transition: transform .22s ease, box-shadow .22s ease;
}
.wis-card:hover { transform: translateY(-3px); }
.wis-card-meta {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--ink-soft); margin-bottom: 9px;
}
.wis-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; color: var(--text-strong); }
.wis-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); }

/* ---- Artikel ---- */
.wis-article { max-width: 720px; margin: 0 auto; padding: 40px 40px 34px; }
.wis-meta { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 10px; font-weight: 600; }
.wis-article h1 {
  font-size: clamp(27px, 4.2vw, 40px); line-height: 1.2;
  margin: 0 0 22px; color: var(--text-strong);
}
.wis-article h2 {
  font-size: clamp(19px, 2.6vw, 24px); line-height: 1.3;
  margin: 34px 0 12px; color: var(--text-strong);
}
.wis-article p { margin: 0 0 15px; line-height: 1.78; font-size: 16.5px; }
.wis-article ul { margin: 0 0 15px; padding-left: 22px; line-height: 1.78; }
.wis-article li { margin-bottom: 8px; }
.wis-article strong { color: var(--text-strong); }
.wis-article em { font-style: italic; }

.wis-summary {
  padding: 20px 22px; margin: 0 0 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}
.wis-summary strong {
  display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin-bottom: 8px;
}
.wis-summary p { margin: 0 !important; font-size: 17px !important; color: var(--text-strong); }

.wis-key {
  margin-top: 36px; padding: 24px 24px 20px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
}
.wis-key h2 { margin: 0 0 12px !important; font-size: 19px !important; }
.wis-key ul { margin: 0; padding-left: 20px; }
.wis-key li { margin-bottom: 9px; font-size: 15.5px; line-height: 1.65; }
.wis-key li:last-child { margin-bottom: 0; }

.wis-reviewed { margin: 24px 0 0 !important; font-size: 13px !important; color: var(--ink-soft); }

.wis-notice {
  max-width: 720px; margin: 22px auto 0; padding: 22px 24px;
  font-size: 14.5px; line-height: 1.7;
}
.wis-notice strong { display: block; color: var(--text-strong); margin-bottom: 7px; font-size: 15px; }
.wis-notice p { margin: 0; color: var(--text); }

.wis-related { max-width: 720px; margin: 40px auto 0; }
.wis-related h2 { font-size: 20px; margin: 0 0 16px; color: var(--text-strong); }
.wis-related > p { margin: 18px 0 0; font-size: 15px; }
.wis-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wis-rel {
  display: flex; align-items: center; padding: 18px 18px;
  text-decoration: none; color: var(--text-strong);
  font-size: 15px; font-weight: 600; line-height: 1.45;
  transition: transform .2s ease;
}
.wis-rel:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
  .wis-grid, .wis-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wis-article { padding: 28px 22px 26px; border-radius: 24px; }
  .wis-article p, .wis-article ul { font-size: 16px; }
  .wis-notice { padding: 20px 20px; }
}
@media (max-width: 600px) {
  .wis-grid, .wis-rel-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Glossar (/glossar, /glossary)
   ============================================================ */

.glo-count { font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; }

.glo-jump {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-width: 760px; margin: 0 auto 38px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  position: sticky; top: calc(var(--nav-h) + 8px); z-index: 3;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.glo-jump a {
  min-width: 36px; padding: 6px 10px;
  text-align: center; text-decoration: none;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  border-radius: 12px;
  transition: background .16s ease, color .16s ease;
}
.glo-jump a:hover { background: var(--ink); color: #fff; }

.glo-group { max-width: 760px; margin: 0 auto 34px; scroll-margin-top: calc(var(--nav-h) + 80px); }
.glo-letter {
  font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 12px; padding-left: 4px;
}

.glo-list { margin: 0; display: grid; gap: 14px; }

.glo-item { padding: 22px 24px; scroll-margin-top: calc(var(--nav-h) + 80px); }
.glo-item dt {
  font-size: 19px; font-weight: 700; color: var(--text-strong);
  margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.glo-long {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
}
.glo-long::before { content: "— "; }
.glo-item dd { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.glo-item dd em { font-style: italic; }

.glo-links {
  margin: 12px 0 0 !important; font-size: 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}
.glo-more { color: var(--ink-soft); font-weight: 600; }
.glo-links a { color: var(--ink); }
.glo-sep { color: var(--ink-soft); margin: 0 2px; }

@media (max-width: 700px) {
  .glo-jump { gap: 4px; padding: 11px 12px; border-radius: 16px; }
  .glo-jump a { min-width: 30px; padding: 5px 7px; font-size: 13.5px; }
  .glo-item { padding: 18px 18px; border-radius: 20px; }
  .glo-item dt { font-size: 17.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .glo-jump { position: static; }
}

/* ============================================================
   Presse-Kit (/presse, /press)
   ============================================================ */

.pr-block { max-width: 760px; margin: 0 auto; }
.pr-block > h2 {
  font-size: clamp(21px, 3vw, 27px); margin: 0 0 6px; color: var(--text-strong);
}
.pr-intro { margin: 0 0 18px; color: var(--ink-soft); font-size: 15.5px; }

/* ---- Kopierbare Textblöcke ---- */
.pr-copy { padding: 20px 22px; margin-bottom: 14px; }
.pr-copy-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.pr-copy-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pr-copy-btn {
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-btn); padding: 7px 15px;
  cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.pr-copy-btn:hover { background: var(--ink); color: #fff; }
.pr-copy-btn.is-copied { background: var(--ink); color: #fff; }
.pr-copy-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pr-copy-text p { margin: 0 0 12px; line-height: 1.72; font-size: 15.5px; }
.pr-copy-text p:last-child { margin-bottom: 0; }

/* ---- Boilerplate ---- */
.pr-boiler {
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-left: 3px solid var(--ink);
}
.pr-boiler p {
  margin: 0; flex: 1 1 340px;
  font-size: 16.5px; line-height: 1.6; font-weight: 600; color: var(--text-strong);
}

/* ---- Fließtext ---- */
.pr-prose { padding: 24px 26px; }
.pr-prose p { margin: 0 0 13px; line-height: 1.75; }
.pr-prose p:last-child { margin-bottom: 0; }

/* ---- Faktenliste ---- */
.pr-facts { padding: 10px 24px; margin: 0; }
.pr-fact {
  display: grid; grid-template-columns: 190px 1fr; gap: 6px 18px;
  padding: 13px 0; border-bottom: 1px solid rgba(56, 107, 142, 0.12);
}
.pr-fact:last-child { border-bottom: none; }
.pr-fact dt { font-weight: 600; color: var(--text-strong); font-size: 14.5px; }
.pr-fact dd { margin: 0; font-size: 15px; color: var(--text); }
.pr-store { margin: 16px 0 0; font-size: 15px; }

/* ---- Downloads ---- */
.pr-zip {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; margin-bottom: 18px;
  text-decoration: none; color: inherit;
  transition: transform .2s ease;
}
.pr-zip:hover { transform: translateY(-2px); }
.pr-zip-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 21px; font-weight: 700;
}
.pr-zip-text { display: flex; flex-direction: column; gap: 3px; }
.pr-zip-text strong { font-size: 17px; color: var(--text-strong); }
.pr-zip-text span { font-size: 14px; color: var(--ink-soft); }

.pr-group { padding: 24px 26px; margin-bottom: 18px; }
.pr-group h3 { margin: 0 0 14px; font-size: 18px; color: var(--text-strong); }

.pr-logo-preview { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.pr-tile {
  margin: 0; flex: 1 1 150px; padding: 22px 16px 14px;
  border-radius: 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pr-tile img { max-width: 96px; height: auto; }
.pr-tile figcaption { font-size: 12.5px; }
.pr-tile-light { background: #fff; border: 1px solid rgba(56, 107, 142, 0.14); }
.pr-tile-light figcaption { color: var(--ink-soft); }
.pr-tile-dark { background: #16242e; border: 1px solid rgba(255, 255, 255, 0.14); }
.pr-tile-dark figcaption { color: rgba(255, 255, 255, 0.65); }

.pr-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pr-files a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: var(--ink); font-size: 14.5px;
  transition: background .16s ease;
}
.pr-files a:hover { background: rgba(255, 255, 255, 0.6); }
.pr-files a::before { content: "↓ "; color: var(--ink-soft); }
.pr-size { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }

.pr-group details { margin-top: 10px; }
.pr-group summary {
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink);
  padding: 9px 0;
}
.pr-group summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.pr-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; }
.pr-note a { color: var(--ink); }
.pr-hires { max-width: 760px; margin: 4px auto 0; }

/* ---- Nutzungsbedingungen ---- */
.pr-usage { padding: 24px 26px; }
.pr-usage ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.pr-usage li { line-height: 1.68; font-size: 15.5px; }

/* ---- Kontakt ---- */
.pr-contact { padding: 26px 28px; }
.pr-contact p { margin: 0 0 10px; }
.pr-mail { font-size: 20px; font-weight: 700; }
.pr-mail a { color: var(--ink); }

@media (max-width: 700px) {
  .pr-fact { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .pr-copy, .pr-group, .pr-usage, .pr-contact, .pr-prose { padding: 20px 18px; }
  .pr-facts { padding: 6px 18px; }
  .pr-zip { padding: 18px 18px; gap: 14px; }
  .pr-zip-icon { width: 40px; height: 40px; font-size: 19px; }
  .pr-boiler { padding: 20px 18px; }
  .pr-boiler p { font-size: 15.5px; }
}

.calc-hub-links {
  max-width: 620px; margin: 30px auto 0; text-align: center;
  font-size: 15px; line-height: 1.7; color: var(--ink-soft);
}
.calc-hub-links a { color: var(--ink); }


/* ---- 404 ---- */
.nf-grid {
  max-width: 860px; margin: 0 auto; padding: 32px 34px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px;
}
.nf-block h2 { font-size: 19px; margin: 0 0 8px; color: var(--text-strong); }
.nf-block > p { margin: 0 0 14px; font-size: 15px; }
.nf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.nf-links a { color: var(--ink); font-size: 15.5px; }
.nf-links a::before { content: "→ "; color: var(--ink-soft); }
.nf-note { margin: 16px 0 0 !important; font-size: 13.5px; color: var(--ink-soft); }
.nf-note a { color: var(--ink); }
@media (max-width: 700px) {
  .nf-grid { grid-template-columns: 1fr; gap: 26px; padding: 24px 20px; }
}

/* Sprachangebot für Gäste mit anderer Browsersprache. Bewusst dezent —
   der Seiteninhalt bleibt in der Sprache, die im HTML steht. */
.lang-offer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 12px 14px 12px 18px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-blue-lg);
  font-size: 14.5px; color: var(--text-strong);
}
.lang-offer span { flex: 1 1 auto; }
.lang-offer button { font: inherit; cursor: pointer; border-radius: var(--radius-btn); }
.lang-offer-yes {
  flex: none; padding: 7px 15px; font-weight: 600;
  background: var(--ink); color: #fff; border: none; white-space: nowrap;
}
.lang-offer-no {
  flex: none; width: 30px; height: 30px; padding: 0;
  background: transparent; border: none; color: var(--ink-soft); font-size: 19px; line-height: 1;
}
.lang-offer-no:hover { color: var(--text-strong); }
@media (max-width: 560px) {
  .lang-offer { flex-wrap: wrap; bottom: 10px; padding: 12px 14px; font-size: 14px; }
  .lang-offer span { flex: 1 1 100%; }
}

/* ---------- Seite /ryvion-ai ---------- */
.ai-note { font-size: 0.86rem; margin: 16px 0 0; color: var(--text); }
.ai-step-quote {
  margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-soft);
  border-left: 2px solid rgba(56, 107, 142, 0.3); padding-left: 12px;
}

/* Kennzeichnung der Wissensartikel: Die Texte entstehen mit KI-Unterstützung.
   Bewusst klein und unaufdringlich, aber auf jedem Artikel sichtbar. */
.wis-ai {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ============================================================
   SCROLL-BÜHNE auf der Startseite
   Die Bühne bleibt stehen, während der Scroll die Kapitel schaltet.
   Umgesetzt mit position:sticky und einem hohen Container darüber —
   ohne Scroll-Entführung: Das Rad bewegt die Seite normal weiter, nur
   der sichtbare Inhalt wechselt. Bei prefers-reduced-motion wird alles
   untereinander gestellt (Regeln am Ende dieses Blocks).
   ============================================================ */
.story { position: relative; }
.story-track { height: calc((var(--story-steps) + 0.6) * 100vh); position: relative; }
.story-stage {
  position: sticky; top: 0;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 76px 5vw 40px;
  overflow: hidden;
}
.story-head { text-align: center; max-width: 720px; margin: 0 auto 26px; }
.story-head h2 { margin: 10px 0 8px; }
.story-head .section-lead { margin: 0; }

.story-grid {
  display: grid; grid-template-columns: 78px 1fr minmax(240px, 320px);
  gap: clamp(24px, 5vw, 72px); align-items: center;
  max-width: 1080px; margin: 0 auto; width: 100%;
}

/* --- Textspalte: Kapitel liegen übereinander --- */
.story-col-text { position: relative; display: grid; }
.story-text {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.story-text[data-active] { opacity: 1; transform: none; pointer-events: auto; }
.story-kicker {
  margin: 0 0 6px; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.story-text h3 { font-size: clamp(1.4rem, 3.4vw, 2.1rem); margin: 0 0 12px; color: var(--text-strong); }
.story-p { margin: 0 0 18px; font-size: 1.02rem; max-width: 46ch; }
.story-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.story-facts li {
  position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--text);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.4s ease 0.18s, transform 0.4s ease 0.18s;
}
.story-text[data-active] .story-facts li { opacity: 1; transform: none; }
.story-text[data-active] .story-facts li:nth-child(2) { transition-delay: 0.3s; }
.story-facts li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ink), #b06a9a);
}

/* --- Fortschrittsleiste --- */
.story-col-rail { position: relative; display: flex; justify-content: center; align-self: stretch; }
/* Eine einzige Leiste: Die Linie läuft mittig HINTER den Punkten durch,
   nicht daneben. Vorher standen zwei Anzeigen nebeneinander. */
.story-rail-line {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 168px; border-radius: 1px;
  background: rgba(56, 107, 142, 0.16); overflow: hidden;
}
.story-rail-fill {
  position: absolute; inset: 0; border-radius: 1px;
  background: linear-gradient(180deg, var(--ink), #b06a9a);
  transform-origin: top; transform: scaleY(var(--sp, 0));
}
.story-rail {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; gap: 30px; justify-items: center;
}
/* Die Punkte sitzen auf der Linie und brauchen deshalb einen eigenen
   Hintergrund, damit die Linie nicht durch sie hindurchscheint. */
.story-dot-mark { box-shadow: 0 0 0 4px var(--bg); }
.story-dot { display: flex; align-items: center; gap: 8px; }
.story-dot-mark {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(56, 107, 142, 0.22);
  transition: background 0.3s ease, transform 0.3s ease;
}
.story-dot[data-active] .story-dot-mark { background: var(--ink); transform: scale(1.5); }
.story-dot-time {
  font-size: 0.68rem; color: var(--ink-soft); opacity: 0;
  transition: opacity 0.3s ease;
}
.story-dot[data-active] .story-dot-time { opacity: 1; }

/* --- Szenenspalte: Telefonrahmen --- */
.story-col-scene { display: flex; justify-content: center; }
.story-phone {
  position: relative; width: min(300px, 74vw); aspect-ratio: 320 / 680;
  border-radius: 38px; padding: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}
.story-phone-glow {
  position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(191, 226, 249, 0.85), transparent 62%);
  transition: transform 0.8s ease;
}
.story-scene {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transform: scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.story-scene[data-active] { opacity: 1; transform: none; }
.story-scene svg { width: 100%; height: 100%; display: block; }

.story-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 26px 0 0; font-size: 0.8rem; color: var(--ink-soft);
  animation: story-hint 2.4s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.story[data-done] .story-hint { opacity: 0; }
@keyframes story-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.story-cta { text-align: center; margin: 10px 0 0; font-size: 0.92rem; }

/* ---------- Grundfarben der Szenen ---------- */
.story-scene svg { --sc-ink: #386b8e; --sc-soft: #8fb5cf; --sc-accent: #b06a9a; }
.sc-time, .sc-title, .sc-ring-num, .sc-ring-unit, .sc-tile-num { fill: var(--sc-ink); font-family: var(--font); }
.sc-time { font-size: 15px; font-weight: 700; }
.sc-title { font-size: 19px; font-weight: 700; text-anchor: middle; }
.sc-notch { fill: rgba(56, 107, 142, 0.16); }
.sc-card { fill: #fff; stroke: rgba(56, 107, 142, 0.1); }
.sc-card-accent { stroke: rgba(176, 106, 154, 0.35); }
.sc-line { fill: rgba(56, 107, 142, 0.22); }
.sc-line-w { fill: rgba(56, 107, 142, 0.45); }
.sc-accent { fill: var(--sc-accent); }
.sc-on-dark { fill: rgba(255, 255, 255, 0.9); }
.sc-faint { fill: rgba(255, 255, 255, 0.55); }
.sc-dot { fill: rgba(56, 107, 142, 0.12); }
.sc-dot-a { fill: rgba(74, 163, 223, 0.2); }
.sc-dot-b { fill: rgba(176, 106, 154, 0.18); }
.sc-dot-c { fill: rgba(96, 180, 160, 0.2); }
.sc-glyph { fill: none; stroke: var(--sc-ink); stroke-width: 1.6; stroke-linecap: round; }
.sc-bar-bg { fill: rgba(56, 107, 142, 0.12); }
.sc-bar-fg { fill: var(--sc-ink); width: 0; }
.sc-pill { fill: none; stroke: rgba(56, 107, 142, 0.3); }
.sc-tag { fill: rgba(56, 107, 142, 0.1); }
.sc-axis { stroke: rgba(56, 107, 142, 0.25); stroke-width: 1.5; }
.sc-grid { stroke: rgba(56, 107, 142, 0.1); stroke-width: 1; }

/* Kapitel 1 — Ring und Balken */
.sc-ring-bg { fill: none; stroke: rgba(56, 107, 142, 0.12); stroke-width: 14; }
.sc-ring-fg {
  fill: none; stroke: var(--sc-ink); stroke-width: 14; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 160px 230px;
  stroke-dasharray: 490; stroke-dashoffset: 490;
}
.sc-ring-num { font-size: 44px; font-weight: 800; text-anchor: middle; }
.sc-ring-unit { font-size: 12px; text-anchor: middle; fill: var(--sc-soft); }
[data-active] .sc-ring-fg { animation: sc-ring 1.6s cubic-bezier(.22,.9,.3,1) 0.15s forwards; }
@keyframes sc-ring { to { stroke-dashoffset: 186; } }
[data-active] .sc-bar-1 { animation: sc-bar-a 1.1s ease-out 0.4s forwards; }
[data-active] .sc-bar-2 { animation: sc-bar-b 1.1s ease-out 0.55s forwards; }
[data-active] .sc-bar-3 { animation: sc-bar-c 1.1s ease-out 0.7s forwards; }
@keyframes sc-bar-a { to { width: 140px; } }
@keyframes sc-bar-b { to { width: 96px; } }
@keyframes sc-bar-c { to { width: 168px; } }

/* Kapitel 2 — Chat */
.sc-bubble-user rect:first-child { fill: var(--sc-ink); }
.sc-bubble-ai rect:first-child { fill: #fff; stroke: rgba(56, 107, 142, 0.1); }
.sc-bubble { opacity: 0; }
[data-active] .sc-bubble-user { animation: sc-in 0.5s ease-out 0.15s forwards; }
[data-active] .sc-bubble-ai { animation: sc-in 0.5s ease-out 0.75s forwards; }
.sc-typing circle { fill: rgba(56, 107, 142, 0.4); opacity: 0; }
[data-active] .sc-typing circle { animation: sc-type 1.1s ease-in-out 0.45s 1; }
[data-active] .sc-typing circle:nth-child(2) { animation-delay: 0.58s; }
[data-active] .sc-typing circle:nth-child(3) { animation-delay: 0.71s; }
@keyframes sc-type { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
.sc-logcard, .sc-suggest { opacity: 0; }
[data-active] .sc-logcard { animation: sc-in 0.55s ease-out 1.15s forwards; }
[data-active] .sc-suggest { animation: sc-in 0.55s ease-out 1.5s forwards; }
.sc-check circle { fill: rgba(96, 180, 160, 0.18); }
.sc-check path { fill: none; stroke: #3f9d86; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
[data-active] .sc-check path { animation: sc-draw 0.5s ease-out 1.5s forwards; }

/* Kapitel 3 — Wochenplan */
.sc-day rect { fill: rgba(56, 107, 142, 0.1); }
.sc-day-now rect { fill: var(--sc-ink); }
.sc-ask, .sc-exercises { opacity: 0; }
[data-active] .sc-ask { animation: sc-in 0.55s ease-out 0.35s forwards; }
[data-active] .sc-exercises { animation: sc-in 0.55s ease-out 0.9s forwards; }
.sc-btn-yes { fill: var(--sc-ink); }
.sc-btn-no { fill: none; stroke: rgba(56, 107, 142, 0.3); }
[data-active] .sc-buttons { animation: sc-pulse 2s ease-in-out 1.3s 2; }
@keyframes sc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
[data-active] .sc-removed { animation: sc-out 0.7s ease-in 1.9s forwards; }
@keyframes sc-out { to { opacity: 0; transform: translateX(30px); } }

/* Kapitel 4 — Balkendiagramm */
.sc-col { fill: rgba(56, 107, 142, 0.3); y: 286px; height: 0; }
.sc-col-now { fill: var(--sc-ink); }
[data-active] .sc-col-1 { animation: sc-col1 0.7s cubic-bezier(.22,.9,.3,1) 0.2s forwards; }
[data-active] .sc-col-2 { animation: sc-col2 0.7s cubic-bezier(.22,.9,.3,1) 0.28s forwards; }
[data-active] .sc-col-3 { animation: sc-col3 0.7s cubic-bezier(.22,.9,.3,1) 0.36s forwards; }
[data-active] .sc-col-4 { animation: sc-col4 0.7s cubic-bezier(.22,.9,.3,1) 0.44s forwards; }
[data-active] .sc-col-5 { animation: sc-col5 0.7s cubic-bezier(.22,.9,.3,1) 0.52s forwards; }
[data-active] .sc-col-6 { animation: sc-col6 0.7s cubic-bezier(.22,.9,.3,1) 0.6s forwards; }
[data-active] .sc-col-7 { animation: sc-col7 0.7s cubic-bezier(.22,.9,.3,1) 0.68s forwards; }
@keyframes sc-col1 { to { y: 232px; height: 54px; } }
@keyframes sc-col2 { to { y: 198px; height: 88px; } }
@keyframes sc-col3 { to { y: 246px; height: 40px; } }
@keyframes sc-col4 { to { y: 176px; height: 110px; } }
@keyframes sc-col5 { to { y: 212px; height: 74px; } }
@keyframes sc-col6 { to { y: 160px; height: 126px; } }
@keyframes sc-col7 { to { y: 142px; height: 144px; } }
.sc-tiles { opacity: 0; }
[data-active] .sc-tiles { animation: sc-in 0.55s ease-out 0.85s forwards; }
.sc-tile-num { font-size: 22px; font-weight: 800; }

/* Kapitel 5 — Verlaufskurve */
.sc-curve {
  fill: none; stroke: var(--sc-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 260; stroke-dashoffset: 260;
}
[data-active] .sc-curve { animation: sc-draw-long 1.5s ease-out 0.2s forwards; }
@keyframes sc-draw-long { to { stroke-dashoffset: 0; } }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
.sc-area { fill: rgba(56, 107, 142, 0.08); opacity: 0; }
[data-active] .sc-area { animation: sc-in 0.8s ease-out 1s forwards; }
.sc-node { fill: var(--sc-ink); opacity: 0; }
.sc-node-last { fill: var(--sc-accent); }
[data-active] .sc-node-1 { animation: sc-in 0.3s ease-out 0.5s forwards; }
[data-active] .sc-node-2 { animation: sc-in 0.3s ease-out 0.8s forwards; }
[data-active] .sc-node-3 { animation: sc-in 0.3s ease-out 1.1s forwards; }
[data-active] .sc-node-4 { animation: sc-in 0.4s ease-out 1.45s forwards; }
.sc-badge rect { fill: var(--sc-accent); }
.sc-badge { opacity: 0; }
[data-active] .sc-badge { animation: sc-in 0.5s ease-out 1.7s forwards; }
.sc-arrow { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes sc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Schmale Geräte ---------- */
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: 20px; }
  .story-col-scene { order: -1; }
  .story-phone { width: min(220px, 56vw); }
  .story-rail { position: static; transform: none; grid-auto-flow: column; justify-content: center; gap: 10px; margin-top: 16px; }
  .story-dot-time { display: none; }
  .story-text { text-align: center; }
  .story-p { margin-inline: auto; }
  .story-facts { justify-items: center; }
  .story-facts li { text-align: left; }
  .story-stage { padding-top: 90px; }
  .story-head { margin-bottom: 14px; }
}

/* ---------- Bewegung reduzieren: Bühne wird zur normalen Liste ---------- */
@media (prefers-reduced-motion: reduce) {
  .story-track { height: auto; }
  .story-stage { position: static; min-height: 0; display: block; padding: 40px 5vw; overflow: visible; }
  .story-grid { display: block; max-width: 760px; }
  .story-col-text { display: block; }
  .story-text { opacity: 1; transform: none; pointer-events: auto; margin-bottom: 28px; }
  .story-facts li { opacity: 1; transform: none; }
  .story-rail, .story-hint, .story-col-scene { display: none; }
}

/* ============================================================
   NEUE ELEMENTE DER STARTSEITE
   Icons, Laufband, Kurzporträt, Wissens-Teaser, Scroll-Hinweis
   ============================================================ */

/* ---------- Gezeichnete Icons ---------- */
.ico { display: block; }
.ico-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border-radius: 14px;
  color: var(--ink);
  background: rgba(74, 163, 223, 0.14);
}
.ico-badge.ico-b { color: #9c5c88; background: rgba(176, 106, 154, 0.14); }
.ico-badge.ico-c { color: #35836f; background: rgba(96, 180, 160, 0.16); }

/* Die Schrittzahlen tragen jetzt ein Symbol statt einer Ziffer. */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.feature-icon .ico { width: 30px; height: 30px; color: var(--ink); }

/* ---------- Laufband ---------- */
.ticker {
  position: relative; z-index: 1;
  overflow: hidden; padding: 10px 0 6px;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker-row { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker-row { animation-play-state: paused; }
.ticker-list {
  display: flex; align-items: center; gap: 14px;
  list-style: none; margin: 0; padding: 0 7px;
}
.ticker-list li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 17px; border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-blue-sm);
  font-size: 0.87rem; color: var(--text); white-space: nowrap;
}
.ticker-list .ico { width: 19px; height: 19px; color: var(--ink-soft); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Kurzporträt ---------- */
.founder-panel {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 52px);
  max-width: 1040px; margin: 0 auto;
}
.founder-text h2 { margin: 10px 0 14px; }
.founder-text p { margin: 0; }
.founder-cta { margin-top: 18px !important; font-size: 0.94rem; }
.founder-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.founder-facts li {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.94rem; color: var(--text);
}
@media (max-width: 820px) {
  .founder-panel { grid-template-columns: 1fr; }
}

/* ---------- Wissens-Teaser ---------- */
.wt-grid { align-items: stretch; }
.wt-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px; text-decoration: none; color: inherit;
  transition: transform 0.35s cubic-bezier(.22,.9,.3,1), box-shadow 0.35s ease;
}
.wt-card:hover, .wt-card:focus-visible { transform: translateY(-5px); }
.wt-meta {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.wt-card h3 { font-size: 1.04rem; margin: 2px 0 0; color: var(--text-strong); }
.wt-card p { font-size: 0.9rem; margin: 0; flex: 1 1 auto; }
.wt-more { color: var(--ink); opacity: 0.55; transition: opacity 0.3s ease, transform 0.3s ease; }
.wt-card:hover .wt-more { opacity: 1; transform: translateX(4px); }
.wt-more .ico { width: 22px; height: 22px; }

/* ---------- Scroll-Hinweis im Hero ---------- */
.hero-scroll {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 30px auto 0; width: fit-content;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
}
.hero-scroll span { animation: hero-cue 2.6s ease-in-out infinite; }
.hero-scroll svg { animation: hero-cue 2.6s ease-in-out infinite 0.15s; }
@keyframes hero-cue { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(4px); opacity: 1; } }

/* ---------- Aura hinter dem Hero-Telefon ---------- */
.hero-visual { position: relative; }
.hero-aura {
  position: absolute; inset: -14% -22%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(176, 106, 154, 0.16), transparent 56%),
    radial-gradient(circle at 70% 72%, rgba(74, 163, 223, 0.22), transparent 58%);
  filter: blur(6px);
  animation: aura 14s ease-in-out infinite alternate;
}
@keyframes aura {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.07) rotate(5deg); }
}
.hero-visual .phone-frame { position: relative; z-index: 1; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker-row { animation: none; }
  .ticker { mask-image: none; -webkit-mask-image: none; }
  .ticker-row .ticker-list:nth-child(2) { display: none; }
  .ticker-list { flex-wrap: wrap; justify-content: center; }
  .ticker-row { width: auto; }
  .hero-scroll span, .hero-scroll svg, .hero-aura { animation: none; }
  .wt-card { transition: none; }
}

/* ============================================================
   SCROLL-BÜHNE — durchgehende Bewegung
   Die Bühne setzt drei Werte, die das Stylesheet weiterverwendet:
     --sp   Gesamtfortschritt über alle Kapitel (0..1)
     --lp   Fortschritt innerhalb des aktuellen Kapitels (0..1)
     --env  Ein- und Ausblendhülle je Kapitel (0..1..0)
   Dadurch bewegt sich bei jedem Scrollmoment etwas, statt nur an den
   Kapitelgrenzen zu springen.
   ============================================================ */

/* Text: wandert langsam durch das Kapitel und blendet an den Rändern. */
.story-text[data-active] {
  opacity: var(--env, 1);
  transform: translateY(calc((0.5 - var(--lp, 0.5)) * 22px));
  transition: none;
}
.story-text:not([data-active]) { opacity: 0; }
.story-text[data-active] .story-facts li { opacity: var(--env, 1); transform: none; transition: none; }

/* Telefon: leichte Drift und Neigung über das Kapitel hinweg. */
.story-phone {
  transform:
    translateY(calc((0.5 - var(--lp, 0.5)) * 16px))
    rotate(calc((var(--lp, 0.5) - 0.5) * 1.6deg))
    scale(calc(1 + var(--env, 1) * 0.012));
  transition: none;
}
/* Aura hinter dem Telefon atmet mit dem Gesamtfortschritt. */
.story-phone-glow {
  transform: scale(calc(1 + var(--sp, 0) * 0.18)) translateY(calc(var(--sp, 0) * -6%));
  transition: none;
}

/* Szenenwechsel überblendet statt zu springen. */
.story-scene[data-active] { opacity: var(--env, 1); transform: scale(calc(0.985 + var(--env, 1) * 0.015)); transition: none; }
.story-scene:not([data-active]) { opacity: 0; }

/* Der Ladebalken im Telefon läuft mit dem Kapitelfortschritt. */
.sc-load-fg { transform: scaleX(var(--lp, 0)); transform-origin: 22px 0; fill: var(--sc-ink); }
.sc-load-bg { fill: rgba(56, 107, 142, 0.12); }


/* Statusleiste */
.sc-status rect { fill: rgba(56, 107, 142, 0.55); }
.sc-wifi { fill: none; stroke: rgba(56, 107, 142, 0.55); stroke-width: 2; stroke-linecap: round; }
.sc-wifi-dot { fill: rgba(56, 107, 142, 0.55); }
.sc-batt { fill: none; stroke: rgba(56, 107, 142, 0.4); stroke-width: 1.6; }
.sc-batt-fill { fill: rgba(56, 107, 142, 0.55); }
.sc-batt-cap { fill: rgba(56, 107, 142, 0.4); }
.sc-home { fill: rgba(56, 107, 142, 0.28); }

/* Fortschrittsleiste links */
.story-dot { flex-direction: column; align-items: center; gap: 4px; }
.story-dot-time { font-size: 0.64rem; white-space: nowrap; }

@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-col-rail { order: 2; align-self: auto; height: 26px; }
  .story-rail-line { display: none; }
  .story-rail {
    position: static; transform: none;
    grid-auto-flow: column; gap: 12px; justify-content: center;
  }
  .story-phone { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story-text[data-active], .story-text:not([data-active]) { opacity: 1; transform: none; }
  .story-text[data-active] .story-facts li { opacity: 1; }
  .story-phone, .story-phone-glow { transform: none; }
  .story-col-rail { display: none; }
}

/* Schritt-Symbole: heller Grund, farbiges Icon (vorher dunkel auf dunkel). */
.step-num {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(74, 163, 223, 0.14);
  color: var(--ink);
  margin-bottom: 16px;
}
.step-num .ico { width: 27px; height: 27px; }


/* Kürzel im Chat-Symbol. */
.sc-avatar {
  fill: var(--sc-ink); font-family: var(--font);
  font-size: 17px; font-weight: 800; text-anchor: middle;
}

/* ============================================================
   Szenen der Bühne auf /ace
   Dieselbe Mechanik wie auf der Startseite: Die Animationen hängen
   an [data-active] und laufen bei prefers-reduced-motion nicht.
   ============================================================ */
.ac-set-no, .ac-set-val, .ac-big, .ac-delta { fill: var(--sc-ink); font-family: var(--font); }
.ac-set-no { font-size: 13px; font-weight: 700; fill: var(--sc-soft); }
.ac-set-val { font-size: 15px; font-weight: 600; }
.ac-big { font-size: 30px; font-weight: 800; }
.ac-delta { font-size: 22px; font-weight: 800; fill: var(--sc-accent); text-anchor: end; }

/* 1 — Verstehen */
.ac-field { opacity: 0; }
[data-active] .ac-f1 { animation: sc-in 0.5s ease-out 0.15s forwards; }
[data-active] .ac-f2 { animation: sc-in 0.5s ease-out 0.45s forwards; }
[data-active] .ac-f3 { animation: sc-in 0.5s ease-out 0.75s forwards; }
.ac-val { transform-origin: 50px 0; transform: scaleX(0); }
[data-active] .ac-f1 .ac-val { animation: ac-fill 0.5s ease-out 0.3s forwards; }
[data-active] .ac-f2 .ac-val { animation: ac-fill 0.5s ease-out 0.6s forwards; }
[data-active] .ac-f3 .ac-val { animation: ac-fill 0.5s ease-out 0.9s forwards; }
@keyframes ac-fill { to { transform: scaleX(1); } }
.ac-tick circle { fill: rgba(96, 180, 160, 0.18); }
.ac-tick path { fill: none; stroke: #3f9d86; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
[data-active] .ac-f1 .ac-tick path { animation: sc-draw 0.4s ease-out 0.6s forwards; }
[data-active] .ac-f2 .ac-tick path { animation: sc-draw 0.4s ease-out 0.9s forwards; }
[data-active] .ac-f3 .ac-tick path { animation: sc-draw 0.4s ease-out 1.2s forwards; }
.ac-chip { fill: none; stroke: rgba(56, 107, 142, 0.28); }
.ac-chip-on { fill: rgba(74, 163, 223, 0.16); stroke: rgba(74, 163, 223, 0.5); }
.ac-chips, .ac-cta { opacity: 0; }
[data-active] .ac-chips { animation: sc-in 0.5s ease-out 1.25s forwards; }
[data-active] .ac-cta { animation: sc-in 0.5s ease-out 1.5s forwards; }
.ac-btn { fill: var(--sc-ink); }
.ac-spinner circle {
  fill: none; stroke: var(--sc-accent); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 30 96; opacity: 0; transform-origin: 160px 560px;
}
[data-active] .ac-spinner circle { animation: sc-in 0.3s ease-out 1.75s forwards, ac-spin 1.1s linear 1.75s infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* 2 — Zuhören */
.ac-sets > * { opacity: 0; }
[data-active] .ac-sets > *:nth-child(-n+4) { animation: sc-in 0.4s ease-out 0.15s forwards; }
[data-active] .ac-sets > *:nth-child(n+5):nth-child(-n+8) { animation: sc-in 0.4s ease-out 0.35s forwards; }
[data-active] .ac-sets > *:nth-child(n+9) { animation: sc-in 0.4s ease-out 0.55s forwards; }
.ac-rir { fill: rgba(56, 107, 142, 0.12); }
.ac-rir-hot { fill: rgba(176, 106, 154, 0.22); }
.ac-derive, .ac-next { opacity: 0; }
[data-active] .ac-derive { animation: sc-in 0.55s ease-out 0.85s forwards; }
[data-active] .ac-next { animation: sc-in 0.55s ease-out 1.2s forwards; }
.ac-arrow-up { fill: none; stroke: var(--sc-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ac-pulse { fill: none; stroke: var(--sc-accent); stroke-width: 2; opacity: 0; }
[data-active] .ac-pulse { animation: ac-pulse 2.2s ease-out 1.5s infinite; }
@keyframes ac-pulse { 0% { opacity: 0.65; } 70%, 100% { opacity: 0; } }

/* 3 — Mitreden */
.ac-msg, .ac-reply, .ac-plan, .ac-note { opacity: 0; }
.ac-msg-bg { fill: var(--sc-ink); }
[data-active] .ac-msg { animation: sc-in 0.45s ease-out 0.15s forwards; }
[data-active] .ac-reply { animation: sc-in 0.5s ease-out 0.6s forwards; }
[data-active] .ac-plan { animation: sc-in 0.5s ease-out 1.1s forwards; }
[data-active] .ac-note { animation: sc-in 0.5s ease-out 2.1s forwards; }
.ac-btn-yes { fill: var(--sc-ink); }
.ac-btn-no { fill: none; stroke: rgba(56, 107, 142, 0.3); }
.ac-badge-keep { fill: rgba(96, 180, 160, 0.18); }
.ac-note-bg { fill: rgba(176, 106, 154, 0.1); }
[data-active] .ac-drop { animation: sc-out 0.6s ease-in 1.75s forwards; }

/* 4 — Weiterdenken */
.ac-cycle-old, .ac-cycle-new, .ac-keep { opacity: 0; }
[data-active] .ac-cycle-old { animation: sc-in 0.5s ease-out 0.15s forwards; }
[data-active] .ac-cycle-new { animation: sc-in 0.55s ease-out 1s forwards; }
[data-active] .ac-keep { animation: sc-in 0.5s ease-out 1.5s forwards; }
[data-active] .ac-keep-2 { animation-delay: 1.7s; }
.ac-bars-old rect { fill: rgba(56, 107, 142, 0.3); }
.ac-bars-new rect { fill: var(--sc-ink); }
.ac-archive circle { fill: rgba(56, 107, 142, 0.1); }
.ac-archive path { fill: none; stroke: var(--sc-soft); stroke-width: 1.6; stroke-linecap: round; }
.ac-flow, .ac-flow-head {
  fill: none; stroke: var(--sc-accent); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60;
}
[data-active] .ac-flow { animation: sc-draw-long 0.6s ease-out 0.7s forwards; }
[data-active] .ac-flow-head { animation: sc-draw-long 0.3s ease-out 1.15s forwards; }
.ac-star { fill: #3f9d86; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .ac-field, .ac-chips, .ac-cta, .ac-sets > *, .ac-derive, .ac-next,
  .ac-msg, .ac-reply, .ac-plan, .ac-note,
  .ac-cycle-old, .ac-cycle-new, .ac-keep { opacity: 1; animation: none; }
  .ac-val { transform: none; }
  .ac-spinner, .ac-pulse { display: none; }
}

/* ============================================================
   SCHALTBILD-BÜHNE (/ryvion-ai)
   Querformat statt Telefonrahmen. Die Seite erklärt kein Bedienfeld,
   sondern ein Berechtigungsmodell — dafür passt ein Schaltbild besser
   als ein Gerät. Mechanik identisch zur Telefon-Bühne.

   Die fünf Kapitel haben bewusst je eine eigene Komposition
   (Ring / Ring offen / Fließband / Gabelung / Einbahnbogen), siehe
   tools/ai-story-content.mjs. Die Klassen sind deshalb nach Bauteil
   benannt, nicht nach Kapitel: was in zwei Bildern vorkommt, teilt
   sich eine Regel.
   ============================================================ */
.story-wide .story-grid { grid-template-columns: 78px 1fr minmax(300px, 460px); max-width: 1180px; }
.story-board {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 440 / 380;
  border-radius: 28px; padding: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.42);
  transform: translateY(calc((0.5 - var(--lp, 0.5)) * 12px));
}
.story-board .story-scene svg { --sc-ink: #386b8e; --sc-soft: #8fb5cf; --sc-accent: #b06a9a; --sc-ok: #3f9d86; }

/* ---------- Grundformen ---------- */
.dg-caption {
  fill: var(--sc-soft); font-family: var(--font);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-anchor: middle;
  text-transform: uppercase;
}
.dg-label { fill: rgba(56, 107, 142, 0.32); }
.dg-label.dg-faint { fill: rgba(56, 107, 142, 0.16); }
.dg-label.dg-label-accent { fill: rgba(176, 106, 154, 0.55); }

/* Das Logo sitzt auf einer hellen Scheibe — in jedem Kapitel an anderer Stelle. */
.dg-core-glow { fill: rgba(74, 163, 223, 0.14); }
.dg-core-disc { fill: #fff; stroke: rgba(56, 107, 142, 0.16); stroke-width: 1.5; }
.dg-logo { opacity: 0.95; }
[data-active] .dg-core-glow { animation: dg-breathe 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dg-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.5; } 50% { transform: scale(1.06); opacity: 1; } }

@keyframes dg-draw { to { stroke-dashoffset: 0; } }
@keyframes dg-ants { to { stroke-dashoffset: -28; } }

/* ============================================================
   Kapitel 1 + 2 — Ring aus fünf Sektoren
   ============================================================ */
.dg-bound {
  fill: none; stroke: rgba(56, 107, 142, 0.14); stroke-width: 1.5;
  stroke-dasharray: 3 7; transform-box: fill-box; transform-origin: center;
}
[data-active] .dg-bound { animation: dg-turn 44s linear infinite; }
@keyframes dg-turn { to { transform: rotate(360deg); } }

.dg-arc {
  fill: none; stroke: rgba(56, 107, 142, 0.26); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 130; stroke-dashoffset: 130;
}
.dg-open .dg-arc { stroke: rgba(63, 157, 134, 0.5); }
[data-active] .dg-seg-1 .dg-arc { animation: dg-draw 0.6s ease-out 0.05s forwards; }
[data-active] .dg-seg-2 .dg-arc { animation: dg-draw 0.6s ease-out 0.13s forwards; }
[data-active] .dg-seg-3 .dg-arc { animation: dg-draw 0.6s ease-out 0.21s forwards; }
[data-active] .dg-seg-4 .dg-arc { animation: dg-draw 0.6s ease-out 0.29s forwards; }
[data-active] .dg-seg-5 .dg-arc { animation: dg-draw 0.6s ease-out 0.37s forwards; }

.dg-lock-halo { fill: #fff; }
.dg-lock-body { fill: rgba(56, 107, 142, 0.45); }
.dg-lock-shackle { fill: none; stroke: rgba(56, 107, 142, 0.45); stroke-width: 2; stroke-linecap: round; }
.dg-lock-open { fill: none; stroke: var(--sc-ok); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.dg-open .dg-lock-body { fill: var(--sc-ok); }
.dg-open .dg-lock-shackle { opacity: 0; }
.dg-open .dg-lock-open { opacity: 1; }
.dg-tag { fill: rgba(56, 107, 142, 0.18); }
.dg-open .dg-tag { fill: rgba(63, 157, 134, 0.34); }

.dg-seg { opacity: 0; }
[data-active] .dg-seg-1 { animation: sc-in 0.4s ease-out 0.05s forwards; }
[data-active] .dg-seg-2 { animation: sc-in 0.4s ease-out 0.13s forwards; }
[data-active] .dg-seg-3 { animation: sc-in 0.4s ease-out 0.21s forwards; }
[data-active] .dg-seg-4 { animation: sc-in 0.4s ease-out 0.29s forwards; }
[data-active] .dg-seg-5 { animation: sc-in 0.4s ease-out 0.37s forwards; }

/* Schild am Logo: Datenschutz als Voreinstellung. */
.dg-badge { opacity: 0; }
.dg-badge-disc { fill: #fff; }
.dg-badge-shield { fill: rgba(63, 157, 134, 0.16); stroke: var(--sc-ok); stroke-width: 1.4; stroke-linejoin: round; }
.dg-badge-tick { fill: none; stroke: var(--sc-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-active] .dg-badge { animation: sc-in 0.45s ease-out 0.85s forwards; }

/* Vier Funktionen, die ohne Freigabe laufen. */
.dg-chip { opacity: 0; }
.dg-chip-bg { fill: rgba(74, 163, 223, 0.1); }
.dg-chip-icon { fill: none; stroke: var(--sc-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
[data-active] .dg-chip-1 { animation: sc-in 0.4s ease-out 1.00s forwards; }
[data-active] .dg-chip-2 { animation: sc-in 0.4s ease-out 1.10s forwards; }
[data-active] .dg-chip-3 { animation: sc-in 0.4s ease-out 1.20s forwards; }
[data-active] .dg-chip-4 { animation: sc-in 0.4s ease-out 1.30s forwards; }
[data-active] .dg-chip-bg { animation: dg-chip-pulse 4.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
[data-active] .dg-chip-2 .dg-chip-bg { animation-delay: 0.5s; }
[data-active] .dg-chip-3 .dg-chip-bg { animation-delay: 1s; }
[data-active] .dg-chip-4 .dg-chip-bg { animation-delay: 1.5s; }
@keyframes dg-chip-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Strahl vom geöffneten Sektor zum Logo. */
.dg-beam {
  fill: none; stroke: var(--sc-ok); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
}
[data-active] .dg-beam-1 { animation: dg-draw 0.5s ease-out 0.7s forwards; }
[data-active] .dg-beam-2 { animation: dg-draw 0.5s ease-out 0.9s forwards; }

/* Schalterreihe. */
.dg-switch { opacity: 0; }
.dg-switch-bed { fill: rgba(56, 107, 142, 0.14); }
.dg-switch-knob { fill: #fff; stroke: rgba(56, 107, 142, 0.2); stroke-width: 1.2; }
.dg-on .dg-switch-bed { fill: rgba(63, 157, 134, 0.55); }
.dg-on .dg-switch-knob { stroke: rgba(63, 157, 134, 0.4); }
[data-active] .dg-switch-1 { animation: sc-in 0.35s ease-out 1.00s forwards; }
[data-active] .dg-switch-2 { animation: sc-in 0.35s ease-out 1.08s forwards; }
[data-active] .dg-switch-3 { animation: sc-in 0.35s ease-out 1.16s forwards; }
[data-active] .dg-switch-4 { animation: sc-in 0.35s ease-out 1.24s forwards; }
[data-active] .dg-switch-5 { animation: sc-in 0.35s ease-out 1.32s forwards; }
[data-active] .dg-on .dg-switch-knob { animation: dg-knob 0.5s cubic-bezier(.3,1.4,.5,1) 1.45s backwards; }
@keyframes dg-knob { from { transform: translateX(-16px); } to { transform: none; } }

/* ============================================================
   Kapitel 3 — Fließband durch ein offenes Tor
   ============================================================ */
.dg-node { opacity: 0; }
.dg-node-bg { fill: #fff; stroke: rgba(56, 107, 142, 0.16); stroke-width: 1.5; }
.dg-node-bg.dg-node-accent { stroke: rgba(176, 106, 154, 0.32); }
[data-active] .dg-node-1 { animation: sc-in 0.4s ease-out 0.10s forwards; }
[data-active] .dg-node-2 { animation: sc-in 0.4s ease-out 0.30s forwards; }
[data-active] .dg-node-3 { animation: sc-in 0.4s ease-out 0.50s forwards; }

.dg-rail, .dg-stem {
  fill: none; stroke: rgba(56, 107, 142, 0.4); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 46; stroke-dashoffset: 46;
}
[data-active] .dg-rail-1 { animation: dg-draw 0.4s ease-out 0.32s forwards; }
[data-active] .dg-rail-2 { animation: dg-draw 0.4s ease-out 0.55s forwards; }
[data-active] .dg-stem   { stroke-dasharray: 70; stroke-dashoffset: 70; animation: dg-draw 0.5s ease-out 0.45s forwards; }

/* Sprechblase links, Zeilen im Tagebuch rechts. */
.dg-bubble-tail { fill: #fff; }
.dg-row { fill: rgba(56, 107, 142, 0.1); }
.dg-row.dg-row-new { fill: rgba(63, 157, 134, 0.34); }
[data-active] .dg-row-new { animation: dg-row-in 0.5s cubic-bezier(.3,1.2,.4,1) 1.2s backwards; transform-box: fill-box; }
@keyframes dg-row-in { from { transform: translateX(-26px); opacity: 0; } }

/* Offenes Tor: zwei Pfosten, kein Balken dazwischen. Das Gegenstück
   zur geschlossenen Sperre in Kapitel 4 — bewusst dieselbe Formensprache. */
.dg-gateway { opacity: 0; }
.dg-post { fill: rgba(63, 157, 134, 0.5); }
[data-active] .dg-gateway { animation: sc-in 0.4s ease-out 0.65s forwards; }

.dg-done circle { fill: rgba(63, 157, 134, 0.2); }
.dg-done path {
  fill: none; stroke: var(--sc-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
}
.dg-done { opacity: 0; }
[data-active] .dg-done { animation: sc-in 0.35s ease-out 0.9s forwards; }
[data-active] .dg-done path { animation: dg-draw 0.4s ease-out 1.5s forwards; }

/* Läuft dauerhaft — die Bühne steht nie still. */
.dg-packet { fill: var(--sc-accent); opacity: 0; }
[data-active] .dg-packet { animation: dg-appear 0.3s ease-out 0.7s forwards; }
@keyframes dg-appear { to { opacity: 0.85; } }

/* Der Wisch zurück. */
.dg-swipe { opacity: 0; }
.dg-swipe-bg { fill: rgba(63, 157, 134, 0.09); }
.dg-swipe-card { fill: #fff; stroke: rgba(56, 107, 142, 0.14); stroke-width: 1.5; }
.dg-swipe-lines { fill: none; stroke: rgba(63, 157, 134, 0.34); stroke-width: 2.4; stroke-linecap: round; }
.dg-undo-arrow {
  fill: none; stroke: var(--sc-ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
[data-active] .dg-swipe { animation: sc-in 0.5s ease-out 1.6s forwards; }
[data-active] .dg-swipe-card { animation: dg-pull 3.8s ease-in-out 2.2s infinite; transform-box: fill-box; }
@keyframes dg-pull { 0%, 55%, 100% { transform: none; } 74% { transform: translateX(-22px); } }
[data-active] .dg-undo-arrow { animation: dg-nudge 3.8s ease-in-out 2.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dg-nudge { 0%, 62%, 100% { transform: none; } 78% { transform: rotate(-26deg); } }

/* ============================================================
   Kapitel 4 — Gabelung mit Sperre
   ============================================================ */
.dg-stack-item { fill: #fff; stroke: rgba(56, 107, 142, 0.16); stroke-width: 1.5; opacity: 0; }
[data-active] .dg-stack-1 { animation: sc-in 0.35s ease-out 0.05s forwards; }
[data-active] .dg-stack-2 { animation: sc-in 0.35s ease-out 0.13s forwards; }
[data-active] .dg-stack-3 { animation: sc-in 0.35s ease-out 0.21s forwards; }
[data-active] .dg-stack-4 { animation: sc-in 0.35s ease-out 0.29s forwards; }
.dg-merge {
  fill: none; stroke: rgba(56, 107, 142, 0.3); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 80; stroke-dashoffset: 80;
}
[data-active] .dg-merge { animation: dg-draw 0.7s ease-out 0.35s forwards; }

/* Die Sperre steht quer im Weg und fährt erst nach der Bestätigung
   nach oben aus dem Weg. Sie läuft dabei in einer sichtbaren Führung —
   ohne die sähe der angehobene Balken aus, als schwebe er frei.
   Der Weg dahinter beginnt bei x = 268, der Balken endet bei x = 255;
   angehoben kreuzt er deshalb nichts. */
.dg-gate { opacity: 0; }
.dg-gate-track { fill: none; stroke: rgba(176, 106, 154, 0.26); stroke-width: 1.5; stroke-dasharray: 4 5; }
.dg-gate-lamp { fill: rgba(176, 106, 154, 0.3); }
.dg-gate-bar { fill: var(--sc-accent); }
.dg-gate-base { fill: rgba(176, 106, 154, 0.45); }
[data-active] .dg-gate { animation: sc-in 0.4s ease-out 0.6s forwards; }
[data-active] .dg-gate-lamp { animation: dg-lamp 0.4s ease-out 1.5s forwards; }
@keyframes dg-lamp { to { fill: var(--sc-ok); } }
[data-active] .dg-gate-bar { animation: dg-lift 0.75s cubic-bezier(.3,.9,.3,1) 1.5s forwards; }
@keyframes dg-lift { to { transform: translateY(-66px); } }

.dg-fork { fill: rgba(56, 107, 142, 0.45); opacity: 0; }
[data-active] .dg-fork { animation: sc-in 0.3s ease-out 0.8s forwards; }
.dg-branch { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.dg-branch-yes { stroke: var(--sc-ok); stroke-dasharray: 110; stroke-dashoffset: 110; }
[data-active] .dg-branch-yes { animation: dg-draw 0.6s ease-out 2.1s forwards; }
.dg-branch-no { stroke: rgba(56, 107, 142, 0.28); stroke-dasharray: 5 7; }
[data-active] .dg-branch-no { animation: dg-ants 1.6s linear infinite; }

.dg-out { opacity: 0; }
.dg-out-bg { fill: #fff; stroke: rgba(63, 157, 134, 0.4); stroke-width: 1.5; }
.dg-out-bg.dg-out-dim { stroke: rgba(56, 107, 142, 0.16); }
.dg-out-tick { fill: none; stroke: var(--sc-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dg-out-cross { fill: none; stroke: rgba(56, 107, 142, 0.34); stroke-width: 2.4; stroke-linecap: round; }
[data-active] .dg-out-yes { animation: sc-in 0.4s ease-out 2.5s forwards; }
[data-active] .dg-out-no  { animation: sc-in 0.4s ease-out 1.0s forwards; }

.dg-ask { opacity: 0; }
.dg-ask-bg { fill: rgba(176, 106, 154, 0.09); stroke: rgba(176, 106, 154, 0.26); stroke-width: 1.5; }
.dg-ask-yes { fill: var(--sc-ink); }
.dg-ask-no { fill: none; stroke: rgba(56, 107, 142, 0.28); stroke-width: 1.5; }
.dg-clock circle { fill: none; stroke: rgba(176, 106, 154, 0.45); stroke-width: 1.8; }
.dg-clock path { fill: none; stroke: rgba(176, 106, 154, 0.7); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dg-clock-txt { fill: rgba(176, 106, 154, 0.8); font-family: var(--font); font-size: 13px; font-weight: 700; }
[data-active] .dg-ask { animation: sc-in 0.5s ease-out 0.9s forwards; }
[data-active] .dg-ask-yes { animation: dg-glow 3.2s ease-in-out 1.8s infinite; }
@keyframes dg-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }

/* ============================================================
   Kapitel 5 — Einbahnstraße
   ============================================================ */
.dg-arc-in {
  fill: none; stroke: var(--sc-ok); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 210; stroke-dashoffset: 210;
}
[data-active] .dg-arc-in { animation: dg-draw 0.9s ease-out 0.45s forwards; }
.dg-arc-head {
  fill: none; stroke: var(--sc-ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
}
[data-active] .dg-arc-head { animation: dg-appear 0.3s ease-out 1.3s forwards; }
.dg-plus { opacity: 0; }
.dg-plus circle { fill: rgba(63, 157, 134, 0.14); }
.dg-plus path { fill: none; stroke: var(--sc-ok); stroke-width: 2.6; stroke-linecap: round; }
[data-active] .dg-plus { animation: sc-in 0.4s ease-out 0.95s forwards; }

.dg-arc-out {
  fill: none; stroke: rgba(176, 106, 154, 0.4); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 6 8; opacity: 0;
}
[data-active] .dg-arc-out { animation: dg-appear 0.4s ease-out 1.5s forwards, dg-ants 2s linear 1.5s infinite; }
.dg-stop { opacity: 0; }
.dg-stop circle { fill: rgba(176, 106, 154, 0.16); stroke: rgba(176, 106, 154, 0.4); stroke-width: 1.5; }
.dg-stop path { fill: none; stroke: var(--sc-accent); stroke-width: 2.8; stroke-linecap: round; }
[data-active] .dg-stop { animation: sc-in 0.4s ease-out 1.8s forwards; }

.dg-buffer { opacity: 0; }
.dg-buffer-bg { fill: rgba(56, 107, 142, 0.05); }
.dg-token { fill: rgba(56, 107, 142, 0.34); }
/* Gestrichelt gezeichneter Speicher: Er ist der Ort, an dem nichts bleibt. */
.dg-vanish-lid, .dg-vanish-body {
  fill: none; stroke: rgba(56, 107, 142, 0.22); stroke-width: 1.5; stroke-dasharray: 4 5;
}
[data-active] .dg-buffer { animation: sc-in 0.5s ease-out 2.1s forwards; }
[data-active] .dg-token { animation: dg-fade 3.8s ease-in-out infinite; }
[data-active] .dg-token-2 { animation-delay: 0.14s; }
[data-active] .dg-token-3 { animation-delay: 0.28s; }
[data-active] .dg-token-4 { animation-delay: 0.42s; }
[data-active] .dg-token-5 { animation-delay: 0.56s; }
[data-active] .dg-token-6 { animation-delay: 0.70s; }
[data-active] .dg-token-7 { animation-delay: 0.84s; }
[data-active] .dg-token-8 { animation-delay: 0.98s; }
[data-active] .dg-token-9 { animation-delay: 1.12s; }
[data-active] .dg-token-10 { animation-delay: 1.26s; }
@keyframes dg-fade { 0%, 35% { opacity: 1; } 70%, 100% { opacity: 0.1; } }

/* ---------- Schmale Geräte ---------- */
@media (max-width: 860px) {
  .story-wide .story-grid { grid-template-columns: 1fr; }
  .story-board { max-width: 100%; transform: none; }
}

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .dg-seg, .dg-badge, .dg-chip, .dg-switch, .dg-node, .dg-done, .dg-swipe,
  .dg-gateway, .dg-stack-item, .dg-gate, .dg-fork, .dg-out, .dg-ask,
  .dg-arc-head, .dg-plus, .dg-arc-out, .dg-stop, .dg-buffer { opacity: 1; animation: none; }
  /* Jede Linie, die sich im Betrieb zeichnet, muss hier fertig gezeichnet
     sein — sonst fehlt sie ganz. Das gilt auch für den Haken (.dg-done path). */
  .dg-arc, .dg-beam, .dg-rail, .dg-stem, .dg-merge, .dg-branch-yes, .dg-arc-in,
  .dg-done path {
    stroke-dashoffset: 0; animation: none;
  }
  .dg-bound, .dg-core-glow, .dg-chip-bg, .dg-token, .dg-ask-yes, .dg-undo-arrow,
  .dg-branch-no, .dg-switch-knob, .dg-row-new, .dg-swipe-card { animation: none; }
  .dg-gate-lamp { fill: var(--sc-ok); animation: none; }
  .dg-packet { display: none; }
  .dg-gate-bar { transform: translateY(-66px); animation: none; }
}

/* ============================================================
   TARIF-TEASER (Startseite)
   Der vollständige Tarif-Block steht seit dem 14.09.2026 nur noch auf
   /pricing. Hier bleiben drei Zeilen — ein Satz je Stufe, der eine
   Entwicklung beschreibt statt einer Merkmalsliste.
   ============================================================ */
.tt-grid {
  display: grid; gap: 18px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tier-teaser {
  display: block; padding: 22px 24px 24px; border-radius: 22px;
  text-decoration: none; color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tier-teaser:hover, .tier-teaser:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(56, 107, 142, 0.14);
}
.tt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tt-price { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.tt-line { font-size: 1.12rem; font-weight: 650; color: var(--ink); margin: 0 0 8px; line-height: 1.35; }
.tt-sub { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .tier-teaser { transition: none; }
  .tier-teaser:hover, .tier-teaser:focus-visible { transform: none; }
}
.tt-price small { font-size: 0.78rem; font-weight: 500; color: var(--text); }

/* ============================================================
   ERGEBNIS-TAFEL (/features)
   Dritte Darstellungsform neben Telefonrahmen und Schaltbild.
   Hier geht es nicht um Aufbau (wie auf /ryvion-ai), sondern um
   Ergebnis: Karten, Balken, Säulen, eine Kurve. Deshalb solider
   Untergrund statt durchscheinender Tafel — es soll nach Ausgabe
   aussehen, nicht nach Diagramm.
   ============================================================ */
.story-panel {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 440 / 380;
  border-radius: 28px; padding: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
  transform: translateY(calc((0.5 - var(--lp, 0.5)) * 12px));
}
.story-panel .story-scene svg { --fc-ink: #386b8e; --fc-soft: #8fb5cf; --fc-accent: #b06a9a; --fc-ok: #3f9d86; }

/* ---------- Grundformen ---------- */
.ft-label { fill: rgba(56, 107, 142, 0.3); }
.ft-label.ft-faint { fill: rgba(56, 107, 142, 0.15); }
.ft-arrow { fill: none; stroke: rgba(56, 107, 142, 0.34); stroke-width: 2.2; stroke-linecap: round; }
.ft-head { fill: none; stroke: rgba(56, 107, 142, 0.34); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ft-base { fill: none; stroke: rgba(56, 107, 142, 0.18); stroke-width: 1.5; }

@keyframes ft-draw { to { stroke-dashoffset: 0; } }
@keyframes ft-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   1 — Eingabe wird Eintrag
   ============================================================ */
.ft-input, .ft-card, .ft-done { opacity: 0; }
.ft-input-bg { fill: #fff; stroke: rgba(56, 107, 142, 0.16); stroke-width: 1.5; }
.ft-card-bg { fill: #fff; stroke: rgba(56, 107, 142, 0.14); stroke-width: 1.5; }
.ft-chip { fill: rgba(74, 163, 223, 0.16); }
.ft-dot { fill: rgba(56, 107, 142, 0.28); }
.ft-track { fill: rgba(56, 107, 142, 0.09); }
.ft-fill { fill: var(--fc-ok); opacity: 0.55; transform-box: fill-box; transform-origin: left center; }
[data-active] .ft-input { animation: ft-in 0.45s ease-out 0.1s forwards; }
[data-active] .ft-card { animation: ft-in 0.45s ease-out 0.45s forwards; }
[data-active] .ft-done { animation: ft-in 0.4s ease-out 1.6s forwards; }
.ft-done circle { fill: rgba(63, 157, 134, 0.2); }
.ft-done path {
  fill: none; stroke: var(--fc-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
}
[data-active] .ft-done path { animation: ft-draw 0.4s ease-out 1.9s forwards; }
[data-active] .ft-fill { animation: ft-grow 0.7s cubic-bezier(.3,.9,.3,1) backwards; }
[data-active] .ft-row-1 .ft-fill { animation-delay: 0.8s; }
[data-active] .ft-row-2 .ft-fill { animation-delay: 0.95s; }
[data-active] .ft-row-3 .ft-fill { animation-delay: 1.1s; }
[data-active] .ft-row-4 .ft-fill { animation-delay: 1.25s; }
@keyframes ft-grow { from { transform: scaleX(0); } to { transform: none; } }

/* ============================================================
   2 — Foto wird zu Schätzwerten
   ============================================================ */
.ft-photo, .ft-note { opacity: 0; }
.ft-photo-bg { fill: rgba(74, 163, 223, 0.1); stroke: rgba(56, 107, 142, 0.16); stroke-width: 1.5; }
.ft-photo-glyph { fill: rgba(56, 107, 142, 0.2); }
.ft-scan { fill: var(--fc-ok); opacity: 0.5; }
[data-active] .ft-photo { animation: ft-in 0.45s ease-out 0.1s forwards; }
[data-active] .ft-scan { animation: ft-scan 2.8s ease-in-out 0.6s infinite; }
@keyframes ft-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(146px); } }

.ft-tile { opacity: 0; }
.ft-tile-bg { fill: #fff; stroke: rgba(56, 107, 142, 0.14); stroke-width: 1.5; }
.ft-approx { fill: rgba(176, 106, 154, 0.7); font-family: var(--font); font-size: 15px; font-weight: 700; text-anchor: middle; }
[data-active] .ft-tile-1 { animation: ft-in 0.4s ease-out 0.9s forwards; }
[data-active] .ft-tile-2 { animation: ft-in 0.4s ease-out 1.05s forwards; }
[data-active] .ft-tile-3 { animation: ft-in 0.4s ease-out 1.2s forwards; }
[data-active] .ft-tile-4 { animation: ft-in 0.4s ease-out 1.35s forwards; }

/* Der Stift steht für „vor dem Eintragen änderbar". */
.ft-note-bg { fill: rgba(176, 106, 154, 0.08); }
.ft-pen { fill: none; stroke: rgba(176, 106, 154, 0.65); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
[data-active] .ft-note { animation: ft-in 0.5s ease-out 1.6s forwards; }

/* ============================================================
   3 — Woche wird kürzer
   ============================================================ */
.ft-week, .ft-ask, .ft-clock { opacity: 0; }
/* Ursprung in Nutzerkoordinaten, nicht als Schluesselwort: transform-box
   wird beim Rastern nicht ausgewertet, und der Balken schwebt dann. */
.ft-bar { fill: rgba(56, 107, 142, 0.24); }
.ft-rest { fill: rgba(56, 107, 142, 0.14); }
[data-active] .ft-week { animation: ft-in 0.45s ease-out 0.1s forwards; }
/* Heute: der Rest bleibt, das gestrichene Stück verblasst. */
.ft-bar-heute { fill: var(--fc-accent); opacity: 0.45; }
.ft-gone { fill: none; stroke: rgba(176, 106, 154, 0.4); stroke-width: 1.6; stroke-dasharray: 5 5; }
[data-active] .ft-gone { animation: ft-weg 0.8s ease-out 1.5s forwards; }
@keyframes ft-weg { to { opacity: 0.35; } }
.ft-clock circle { fill: #fff; stroke: rgba(176, 106, 154, 0.55); stroke-width: 1.8; }
.ft-clock path { fill: none; stroke: rgba(176, 106, 154, 0.75); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-active] .ft-clock { animation: ft-in 0.4s ease-out 1.25s forwards; }

.ft-ask-bg { fill: rgba(176, 106, 154, 0.09); stroke: rgba(176, 106, 154, 0.24); stroke-width: 1.5; }
.ft-ask-yes { fill: var(--fc-ink); }
.ft-ask-no { fill: none; stroke: rgba(56, 107, 142, 0.26); stroke-width: 1.5; }
.ft-shield { fill: rgba(63, 157, 134, 0.14); stroke: var(--fc-ok); stroke-width: 1.5; stroke-linejoin: round; }
[data-active] .ft-ask { animation: ft-in 0.5s ease-out 0.8s forwards; }
[data-active] .ft-ask-yes { animation: ft-blink 3.2s ease-in-out 2.2s infinite; }
@keyframes ft-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ============================================================
   4 — Übung tauschen
   ============================================================ */
.ft-list, .ft-opts, .ft-pool { opacity: 0; }
.ft-ex-bg { fill: #fff; stroke: rgba(56, 107, 142, 0.14); stroke-width: 1.5; }
.ft-out .ft-ex-bg { fill: rgba(56, 107, 142, 0.05); stroke: rgba(56, 107, 142, 0.1); }
.ft-strike { fill: none; stroke: rgba(176, 106, 154, 0.7); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 150; stroke-dashoffset: 150; }
[data-active] .ft-list { animation: ft-in 0.45s ease-out 0.1s forwards; }
[data-active] .ft-strike { animation: ft-draw 0.5s ease-out 0.9s forwards; }

.ft-opt { opacity: 0; }
.ft-opt-bg { fill: #fff; stroke: rgba(63, 157, 134, 0.34); stroke-width: 1.5; }
.ft-lvl { fill: rgba(56, 107, 142, 0.14); }
.ft-lvl.ft-lvl-on { fill: var(--fc-ok); opacity: 0.6; }
[data-active] .ft-opts { animation: ft-erscheint 0.01s linear 1.2s forwards; }
[data-active] .ft-opt-1 { animation: ft-seite 0.5s cubic-bezier(.3,1.1,.4,1) 1.3s forwards; }
[data-active] .ft-opt-2 { animation: ft-seite 0.5s cubic-bezier(.3,1.1,.4,1) 1.45s forwards; }
[data-active] .ft-opt-3 { animation: ft-seite 0.5s cubic-bezier(.3,1.1,.4,1) 1.6s forwards; }
@keyframes ft-erscheint { to { opacity: 1; } }
@keyframes ft-seite { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

/* Der Vorrat, aus dem gefiltert wird — nicht erfunden, sondern ausgewählt. */
.ft-cand { fill: rgba(56, 107, 142, 0.12); }
.ft-cand.ft-cand-on { fill: var(--fc-ok); opacity: 0.55; }
.ft-funnel { fill: rgba(56, 107, 142, 0.22); }
[data-active] .ft-pool { animation: ft-in 0.5s ease-out 1.9s forwards; }

/* ============================================================
   5 — Kurve ohne Eingabe
   ============================================================ */
.ft-moon, .ft-sum { opacity: 0; }
.ft-moon path { fill: rgba(56, 107, 142, 0.2); }
.ft-star { fill: rgba(176, 106, 154, 0.5); }
[data-active] .ft-moon { animation: ft-in 0.5s ease-out 0.1s forwards; }
[data-active] .ft-star { animation: ft-funkeln 3s ease-in-out infinite; }
[data-active] .ft-star-2 { animation-delay: 0.7s; }
[data-active] .ft-star-3 { animation-delay: 1.4s; }
@keyframes ft-funkeln { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.ft-area { fill: rgba(63, 157, 134, 0.1); opacity: 0; }
[data-active] .ft-area { animation: ft-erscheint 0.01s linear 1.5s forwards, ft-weich 0.6s ease-out 1.5s backwards; }
@keyframes ft-weich { from { opacity: 0; } to { opacity: 1; } }
.ft-line {
  fill: none; stroke: var(--fc-ok); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 360; stroke-dashoffset: 360;
}
[data-active] .ft-line { animation: ft-draw 1.4s ease-out 0.5s forwards; }
.ft-pt { fill: #fff; stroke: var(--fc-ok); stroke-width: 2.4; opacity: 0; }
[data-active] .ft-pt { animation: ft-erscheint 0.25s ease-out backwards; }
[data-active] .ft-pt-1 { animation-delay: 0.6s; }
[data-active] .ft-pt-2 { animation-delay: 0.78s; }
[data-active] .ft-pt-3 { animation-delay: 0.96s; }
[data-active] .ft-pt-4 { animation-delay: 1.14s; }
[data-active] .ft-pt-5 { animation-delay: 1.32s; }
[data-active] .ft-pt-6 { animation-delay: 1.5s; }
[data-active] .ft-pt-7 { animation-delay: 1.68s; }

.ft-sum-bg { fill: rgba(63, 157, 134, 0.1); }
.ft-trend { fill: none; stroke: var(--fc-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-active] .ft-sum { animation: ft-in 0.5s ease-out 2s forwards; }

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .ft-input, .ft-card, .ft-done, .ft-photo, .ft-note, .ft-tile, .ft-week, .ft-ask,
  .ft-clock, .ft-list, .ft-opts, .ft-opt, .ft-pool, .ft-moon, .ft-sum, .ft-area, .ft-pt {
    opacity: 1; animation: none;
  }
  /* Jede Linie, die sich im Betrieb zeichnet, hier fertig zeichnen. */
  .ft-done path, .ft-strike, .ft-line { stroke-dashoffset: 0; animation: none; }
  .ft-fill, .ft-gone, .ft-ask-yes, .ft-star { animation: none; }
  .ft-scan { display: none; }
}

/* ---------- Schmale Geräte ---------- */
@media (max-width: 860px) {
  .story-panel { max-width: 100%; transform: none; }
}

/* ============================================================
   KI-FUNKTIONEN auf /features
   Jede Karte trägt oben ihre Tarifstufe und unten eine abgesetzte
   Zeile „Was sie nicht tut". Die Grenze ist bewusst nicht kleiner
   gesetzt als der Rest — sie soll gelesen werden, nicht versteckt.
   ============================================================ */
.af-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.af-head .feature-icon { margin: 0; display: inline-flex; color: var(--ink); }
.af-test {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 0; font-size: 0.82rem; font-weight: 600; color: #3f9d86;
}
.af-star { font-size: 0.7rem; line-height: 1; }
.af-grenze {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(56, 107, 142, 0.12);
}
.af-grenze-label {
  margin: 0 0 5px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(176, 106, 154, 0.85);
}
.af-grenze p:last-child { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.af-mehr { margin: 8px 0 0; font-size: 0.88rem; }

/* ============================================================
   BÜHNEN AUF SCHMALEN GERÄTEN
   Fehler vom 16.09.2026: Auf dem Handy war nur die Tafel zu sehen,
   der Kapiteltext nicht. Grund: Die Bühne ist 100dvh hoch, hat
   overflow:hidden und zentriert ihren Inhalt — sobald Kopf, Tafel,
   Text und Punktleiste zusammen höher sind als der Bildschirm, wird
   oben UND unten beschnitten. Der Text lag unten.

   Gegenmaßnahmen, von oben nach unten:
     - Die Abschnittsmarke und der Vorspann entfallen; beides steht
       ausführlicher im Kapitel daneben.
     - Die Tafel bekommt eine HÖHE zugewiesen, die Breite folgt über
       aspect-ratio. Vorher füllte sie die Breite und fraß damit den
       Platz des Textes.
     - Schrift, Abstände und Zeilenhöhen enger.

   Wer hier etwas ändert, misst bitte nach — im Vorschau-Bereich bei
   375 × 667 die Höhe von .story-stage-Inhalt gegen window.innerHeight.
   Stand 16.09.2026: engstes Kapitel lässt auf dem iPhone SE Luft.
   ============================================================ */
@media (max-width: 860px) {
  .story-stage { padding: 48px 5vw 18px; }
  .story-head { margin-bottom: 8px; }
  .story-head .section-tag { display: none; }
  .story-head .section-lead { display: none; }
  .story-head h2 { margin: 0; font-size: clamp(1.12rem, 4.6vw, 1.5rem); line-height: 1.25; }
  .story-grid { gap: 12px; }

  /* Höhe führt, Breite folgt. */
  .story-board, .story-panel {
    width: auto; height: min(30dvh, 54vw); max-width: 100%;
    aspect-ratio: 440 / 380;
  }
  .story-phone {
    width: auto; height: min(36dvh, 96vw); max-width: 100%;
    aspect-ratio: 320 / 680;
  }

  .story-kicker { font-size: 0.7rem; margin-bottom: 4px; }
  .story-text h3 { font-size: clamp(1.02rem, 4.2vw, 1.3rem); line-height: 1.3; margin: 0 0 6px; }
  .story-p { font-size: 0.88rem; line-height: 1.5; margin: 0 0 8px; }
  .story-facts { gap: 5px; }
  .story-facts li { font-size: 0.8rem; line-height: 1.4; }
  .story-hint { display: none; }
  .story-cta { margin-top: 6px; font-size: 0.86rem; }
}

/* Noch weniger Höhe (kleine Handys, Querformat): eine Tatsache reicht. */
@media (max-width: 860px) and (max-height: 720px) {
  .story-board, .story-panel { height: min(27dvh, 50vw); }
  .story-phone { height: min(30dvh, 86vw); }
  .story-facts li:nth-child(n + 2) { display: none; }
}

/* ------------------------------------------------------------
   SEHR SCHMALE GERÄTE (≤ 560 px): Das Telefon entfällt.

   Nachgemessen bei 375 × 667: Der Rahmen bekommt oben
   height: min(36dvh, 96vw) = 240 px zugewiesen, bei
   Seitenverhältnis 320/680 sind das 113 px Breite. Eine Szene,
   die für 320 Einheiten gezeichnet ist, läuft dann im Maßstab
   0.35 — eine Textzeile von 9 Einheiten wird 3 px hoch, ein
   Punkt von 16 wird 5 px. Zu sehen ist nichts mehr.

   Dazu kommt der feste Eckenradius von 38 px. Bei 300 px Breite
   ist das eine Telefonrundung, bei 113 px rundet er zwei Drittel
   der Fläche weg — der Rahmen wirkt als dicker Ring um einen
   Rest Inhalt. Genau das war der Eindruck „die Umrandung ist
   sehr extrem".

   Statt die Szene unleserlich klein zu zeigen, zeigt die Bühne
   hier nur noch den Kapiteltext. Das geht ohne Verlust: Die
   Szenen tragen bewusst keinen Text, die Aussage steht ohnehin
   im Kapitel daneben. Ablauf, Punktleiste und Scrollverhalten
   bleiben unverändert — es verschwindet nur das Bild.

   Die Querformat-Tafeln (440 × 380) bleiben: Sie kommen bei
   gleicher Höhe auf rund 232 px Breite, Maßstab 0.53. Das ist
   lesbar. Nur ihr Radius wird mitskaliert.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  /* Der Glanz liegt im Rahmen, verschwindet also mit ihm. */
  .story-phone { display: none; }
  /* Nimmt zusätzlich die Rasterlücke weg. Wo :has() fehlt, bleibt
     eine leere Spalte stehen — ein Abstand, kein Fehler. */
  .story-col-scene:has(.story-phone) { display: none; }

  .story-board, .story-panel { border-radius: 20px; }
}

/* Auf höheren Handys ist Platz für eine etwas größere Tafel. Die
   kurzen Geräte bleiben außen vor: Dort war der Kapiteltext schon
   einmal unten abgeschnitten (16.09.2026), und die Höhe ist dort
   der knappe Posten. */
@media (max-width: 560px) and (min-height: 721px) {
  .story-board, .story-panel { height: min(33dvh, 60vw); }
}


/* ============================================================
   BEISPIELPLAN (/beispielplan, /example-plan)
   Eine Tabelle, die tatsächlich gelesen werden soll — deshalb
   ruhige Linien statt Kästen, und auf schmalen Geräten scrollt
   sie in ihrem eigenen Rahmen, statt die Seite breit zu machen.
   ============================================================ */
.bp-oben { display: grid; gap: 20px; grid-template-columns: 1.4fr 1fr; align-items: start; max-width: 1000px; margin: 0 auto; }
.bp-hinweis, .bp-profil { padding: 24px 26px; border-radius: 22px; }
.bp-hinweis h2, .bp-profil h2 { margin: 0 0 10px; font-size: 1.02rem; }
.bp-hinweis p { margin: 0; font-size: 0.93rem; line-height: 1.65; }
.bp-hinweis { border-left: 3px solid rgba(176, 106, 154, 0.55); }
.bp-profil dl { margin: 0; display: grid; gap: 8px; }
.bp-profil-zeile { display: flex; justify-content: space-between; gap: 14px; font-size: 0.92rem; padding-bottom: 8px; border-bottom: 1px solid rgba(56, 107, 142, 0.1); }
.bp-profil-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.bp-profil dt { color: var(--text); }
.bp-profil dd { margin: 0; font-weight: 650; color: var(--ink); text-align: right; }

.bp-tage { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); max-width: 1120px; margin: 0 auto; }
.bp-tag { padding: 22px 24px 18px; border-radius: 22px; }
.bp-tag-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.bp-tag-kopf h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.bp-tag-nr { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(176, 106, 154, 0.9); }
.bp-dauer { font-size: 0.82rem; color: var(--text); }

.bp-scroll { overflow-x: auto; max-width: 1120px; margin: 0 auto; }
.bp-tabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 440px; }
.bp-tabelle th, .bp-tabelle td { padding: 9px 8px; text-align: right; white-space: nowrap; }
.bp-tabelle th[scope="row"] { text-align: left; font-weight: 600; white-space: normal; min-width: 150px; }
.bp-tabelle thead th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid rgba(56, 107, 142, 0.16); }
.bp-tabelle tbody tr + tr th, .bp-tabelle tbody tr + tr td { border-top: 1px solid rgba(56, 107, 142, 0.08); }
.bp-kg { font-weight: 700; color: var(--ink); }
.bp-kg-frei { font-weight: 500; color: var(--text); }

.bp-verlauf { min-width: 520px; }
.bp-verlauf .bp-jetzt { background: rgba(63, 157, 134, 0.1); }
.bp-verlauf .bp-jetzt th, .bp-verlauf .bp-jetzt td { font-weight: 700; }
.bp-verlauf .bp-deload { background: rgba(176, 106, 154, 0.08); }

.bp-warum { padding: 22px 24px; border-radius: 20px; }
.bp-warum h3 { margin: 0 0 8px; font-size: 1rem; }
.bp-warum p { margin: 0; font-size: 0.93rem; line-height: 1.65; }
.bp-warum code { font-size: 0.86rem; padding: 2px 6px; border-radius: 6px; background: rgba(56, 107, 142, 0.09); }
.bp-disclaimer { max-width: 760px; margin: 26px auto 0; font-size: 0.82rem; line-height: 1.6; color: var(--text); text-align: center; }

@media (max-width: 860px) {
  .bp-oben { grid-template-columns: 1fr; }
  .bp-tage { grid-template-columns: 1fr; }
  .bp-tag { padding: 18px 16px 14px; }
  .bp-tabelle { font-size: 0.84rem; }
  .bp-tabelle th[scope="row"] { min-width: 132px; }
}

/* ============================================================
   ÄNDERUNGSPROTOKOLL (/updates)
   Zeitleiste: links Datum und Bereich, rechts der Eintrag.
   Auf schmalen Geräten fällt die Leiste über den Eintrag.
   ============================================================ */
.up-hinweis { max-width: 720px; margin: 0 auto 30px; text-align: center; font-size: 0.9rem; color: var(--text); }
.up-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; display: grid; gap: 22px; }
.up-eintrag { display: grid; grid-template-columns: 172px 1fr; gap: 22px; align-items: start; }
.up-marke { display: flex; flex-direction: column; gap: 7px; padding-top: 18px; }
.up-marke time { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.up-bereich {
  align-self: start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.up-app   { background: rgba(63, 157, 134, 0.16); color: #2f7565; }
.up-web   { background: rgba(74, 163, 223, 0.16); color: #326b91; }
.up-recht { background: rgba(176, 106, 154, 0.14); color: #8d5079; }
.up-version { font-size: 0.78rem; color: var(--text); }
.up-inhalt { padding: 20px 24px; border-radius: 20px; }
.up-inhalt h2 { margin: 0 0 10px; font-size: 1.04rem; }
.up-inhalt ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.up-inhalt li { font-size: 0.92rem; line-height: 1.6; }
.up-mehr { margin: 12px 0 0; font-size: 0.88rem; }

@media (max-width: 720px) {
  .up-eintrag { grid-template-columns: 1fr; gap: 8px; }
  .up-marke { flex-direction: row; align-items: center; flex-wrap: wrap; padding-top: 0; }
  .up-inhalt { padding: 16px 18px; }
}

/* ============================================================
   KONTAKTFORMULAR (Baustein, tools/kontaktformular.mjs)
   ============================================================ */
.kf { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 24px; max-width: 620px; }
.kf-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.kf-label { display: flex; align-items: baseline; gap: 9px; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.kf-mark {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(90, 138, 176, 0.85);
}

.kf-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid rgba(56, 107, 142, 0.18);
  background: rgba(255, 255, 255, 0.82);
  font-family: var(--font); font-size: 1rem; color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kf-input:hover { border-color: rgba(56, 107, 142, 0.32); }
/* Sichtbarer Fokusrahmen — reicht allein als Kennzeichnung, auch wenn
   jemand die Farben des Systems überschreibt. */
.kf-input:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
  border-color: var(--ink);
}
.kf-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.kf-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23386b8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}

/* Fehler nicht nur über Farbe: Rahmen UND Text. Rot allein wäre für
   jemanden mit Farbsehschwäche keine Information. */
.kf-feld-fehler .kf-input { border-color: #c2566e; }
.kf-fehler { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #a8405a; font-weight: 500; }

.kf-hinweis { margin: 0; font-size: 0.84rem; line-height: 1.6; color: var(--text); }
.kf-hinweis a { color: var(--ink); }

.kf-status {
  margin: 0; padding: 14px 16px; border-radius: 14px;
  background: rgba(194, 86, 110, 0.08); border: 1.5px solid rgba(194, 86, 110, 0.26);
  font-size: 0.92rem; line-height: 1.6; color: #8f3148;
}
.kf-status a { color: inherit; }

.kf-knopf { align-self: flex-start; min-width: 190px; justify-content: center; }
.kf-knopf[disabled] { opacity: 0.6; cursor: progress; }

/* Die Falle: aus dem Bild geschoben statt ausgeblendet. display:none
   oder visibility:hidden erkennen viele Automaten und lassen das Feld
   dann leer — genau das soll hier nicht passieren. */
.kf-trap { position: absolute; left: -9999px; opacity: 0; }
.kf-trap input { width: 120px; }

/* Vorlagen und Erfolgsmeldung */
.kf-vorlagen { display: none; }
.kf-erfolg {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px 26px; border-radius: 24px; max-width: 620px;
  background: rgba(63, 157, 134, 0.1); border: 1.5px solid rgba(63, 157, 134, 0.3);
}
.kf-erfolg:focus-visible { outline: 2px solid #3f9d86; outline-offset: 3px; }
.kf-erfolg-haken { flex: 0 0 auto; color: #3f9d86; line-height: 0; margin-top: 2px; }
.kf-erfolg p { margin: 0; line-height: 1.65; color: var(--ink); }

@media (max-width: 560px) {
  .kf { padding: 22px 18px; }
  .kf-knopf { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-input { transition: none; }
}
.kf-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.kf-nachsatz { margin: 0; max-width: 620px; font-size: 0.86rem; line-height: 1.6; color: var(--text); }
.kf-vorab {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  max-width: 620px; margin: 0 auto 26px; padding: 20px 24px; border-radius: 20px;
  background: rgba(74, 163, 223, 0.09);
}
.kf-vorab p { margin: 0; line-height: 1.6; color: var(--ink); }

/* ============================================================
   TRAINER-WIDGET (Startseite)
   Ruhige Karte über die volle Breite — bewusst ohne Farbverlauf,
   damit sie sich vom Hero und den Tarifkarten absetzt statt mit
   ihnen zu konkurrieren.
   ============================================================ */
.tw {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  max-width: 980px; margin: 0 auto; padding: 32px 36px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(56, 107, 142, 0.12);
}
.tw-text { flex: 1 1 320px; min-width: 0; }
.tw-text h2 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.3; }
.tw-text p { margin: 0; line-height: 1.65; color: var(--text); max-width: 56ch; }
.tw-cta { flex: 0 0 auto; }

@media (max-width: 620px) {
  .tw { padding: 26px 22px; }
  .tw-cta { width: 100%; justify-content: center; }
}

/* ---- Anfrageseiten: Schritte, Abgrenzung, Zeichenzähler ---- */
.kf-schritte-block { max-width: 980px; margin: 0 auto 36px; }
.kf-schritte-titel { text-align: center; font-size: 1.35rem; margin: 0 0 22px; }
.kf-schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kf-schritt {
  padding: 22px 24px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(56, 107, 142, 0.1);
}
.kf-schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px; margin-bottom: 12px;
  background: rgba(74, 163, 223, 0.14); color: var(--ink);
  font-weight: 700; font-size: 0.95rem;
}
.kf-schritt h3 { margin: 0 0 7px; font-size: 1.02rem; }
.kf-schritt p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text); }

/* Die Abgrenzung steht abgesetzt unter dem Formular — sie soll gelesen
   werden können, ohne den Blick vom Formular wegzuziehen. */
.kf-abgrenzung {
  max-width: 620px; margin: 4px 0 0; padding: 16px 18px;
  border-radius: 16px; background: rgba(56, 107, 142, 0.05);
  font-size: 0.84rem; line-height: 1.6; color: var(--text);
}
.kf-noscript {
  margin: 0; padding: 14px 16px; border-radius: 14px;
  background: rgba(194, 86, 110, 0.08); border: 1.5px solid rgba(194, 86, 110, 0.26);
  font-size: 0.9rem; line-height: 1.6; color: #8f3148;
}
.kf-noscript a { color: inherit; }
.kf-zaehler {
  margin: 2px 0 0; text-align: right;
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
  color: rgba(90, 138, 176, 0.75);
}
.kf-zaehler-eng { color: #a8405a; font-weight: 600; }



/* ============================================================
   WISSENSDATENBANK — Übersicht (Variante C, 02.10.2026)

   Drei Anläufe: erst 61 Karten in drei Rastern, dann zehn
   Themenbereiche als Kachelwand, dann zweispaltig mit Liste.
   Alle drei blieben Verzeichnisse. Was fehlte, war ein Bild —
   die Übersicht war der einzige große Bereich der Seite ohne
   eines. Jetzt: oben eine Bento-Übersicht mit zehn gezeichneten
   Motiven, darunter dieselben Bereiche im Zickzack.

   Rundungen folgen --radius-card (30px) wie überall sonst.
   ============================================================ */

/* --- Motive: Farbe kommt vom Behälter über currentColor --- */
.wis-ton-training { color: #386b8e; }
.wis-ton-ernaehrung { color: #3f9d86; }
.wis-ton-grundlagen { color: #b06a9a; }
.wis-ton-training .mo-akzent { color: #b06a9a; }
.wis-ton-ernaehrung .mo-akzent { color: #386b8e; }
.wis-ton-grundlagen .mo-akzent { color: #3f9d86; }

.mo { display: block; width: 100%; height: auto; }
.mo-form { fill: currentColor; fill-opacity: 0.24; }
.mo-form.mo-akzent, .mo-akzent .mo-form { fill-opacity: 0.4; }
.mo-form-stark { fill: currentColor; fill-opacity: 0.42; }
.mo-linie { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.mo-linie-fein { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mo-fein { fill: none; stroke: currentColor; stroke-opacity: 0.26; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mo-akzent .mo-fein { stroke-opacity: 0.5; }
.mo-gestrichelt { stroke-dasharray: 5 7; }
.mo-flaeche { fill: currentColor; fill-opacity: 0.08; }
.mo-fein-flaeche { fill: currentColor; fill-opacity: 0.05; stroke: currentColor; stroke-opacity: 0.16; stroke-width: 1.5; }
.mo-pt { fill: #fff; stroke: currentColor; stroke-width: 2.6; }
.mo-ring { fill: currentColor; fill-opacity: 0.1; stroke: currentColor; stroke-opacity: 0.55; stroke-width: 1.8; stroke-dasharray: 5 5; }
.mo-leer { fill: none; stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1.6; stroke-dasharray: 5 6; }
.mo-band { fill: currentColor; }
.mo-band-1 { fill-opacity: 0.07; }
.mo-band-2 { fill-opacity: 0.13; }
.mo-band-3 { fill-opacity: 0.2; }
.mo-band-4 { fill-opacity: 0.2; }

/* --- Bento-Übersicht: zehn Flächen, drei davon doppelt breit --- */
.wis-bentos {
  display: grid; gap: 16px; margin: 0 0 64px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-flow: dense;
}
.wis-bento {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(56, 107, 142, 0.1);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.wis-bento:hover, .wis-bento:focus-visible {
  transform: translateY(-4px);
  border-color: currentColor;
  box-shadow: 0 18px 40px rgba(56, 107, 142, 0.12);
}
.wis-bento-bild { display: block; padding: 10px 10px 0; }
.wis-bento-txt { display: block; padding: 16px 22px 20px; }
.wis-bento-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.wis-bento-t { flex: 1 1 auto; font-size: 1.04rem; font-weight: 650; color: var(--ink); line-height: 1.25; }
.wis-bento-n {
  flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; color: currentColor;
  background: rgba(255, 255, 255, 0.7); border: 1.5px solid currentColor;
  padding: 1px 9px; border-radius: 999px;
}
.wis-bento-liste { display: flex; flex-direction: column; gap: 3px; }
.wis-bento-liste span {
  font-size: 0.83rem; line-height: 1.45; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (min-width: 900px) {
  /* Bei doppelter Breite stehen Bild und Text nebeneinander. */
  .wis-bento-gross { grid-column: span 2; flex-direction: row; align-items: center; }
  .wis-bento-gross .wis-bento-bild { flex: 0 0 46%; padding: 12px 0 12px 12px; }
  .wis-bento-gross .wis-bento-txt { flex: 1 1 auto; padding: 20px 26px; }
  .wis-bento-gross .wis-bento-t { font-size: 1.15rem; }
}

/* --- Themenblock im Zickzack --- */
.wis-block {
  display: grid; gap: 40px; align-items: center; margin-bottom: 72px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.wis-block-gedreht .wis-block-bild { order: 2; }
.wis-block-motiv {
  display: block; padding: 18px; border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(56, 107, 142, 0.08);
}
.wis-block-kopf { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.wis-block-kopf h2 { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.wis-block-n {
  font-size: 0.78rem; font-weight: 600; color: currentColor;
  border: 1.5px solid currentColor; padding: 2px 11px; border-radius: 999px;
}
.wis-block-desc { margin: 0 0 18px; font-size: 0.97rem; line-height: 1.6; color: var(--text); }

/* --- Artikelliste --- */
.wis-liste {
  list-style: none; margin: 0; padding: 8px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.45);
  border: 1.5px solid rgba(56, 107, 142, 0.08);
}
.wis-liste li + li { border-top: 1px solid rgba(56, 107, 142, 0.08); }
.wis-liste a {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 16px; border-radius: 24px; text-decoration: none;
  transition: background 0.18s ease;
}
.wis-liste a:hover, .wis-liste a:focus-visible { background: rgba(74, 163, 223, 0.08); }
.wis-li-t { flex: 1 1 auto; min-width: 0; font-size: 0.94rem; line-height: 1.4; color: var(--ink); font-weight: 500; }
.wis-li-m { flex: 0 0 auto; font-size: 0.77rem; color: rgba(90, 138, 176, 0.85); font-variant-numeric: tabular-nums; }
.wis-li-pfeil {
  flex: 0 0 auto; color: currentColor;
  opacity: 0; transform: translateX(-5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.wis-liste a:hover .wis-li-pfeil, .wis-liste a:focus-visible .wis-li-pfeil { opacity: 0.7; transform: none; }

.wis-weiter { display: flex; gap: 22px; margin: 0 0 46px; font-size: 0.93rem; }

/* --- Schmale Geräte --- */
@media (max-width: 900px) {
  .wis-block { grid-template-columns: 1fr; gap: 20px; margin-bottom: 52px; }
  .wis-block-gedreht .wis-block-bild { order: 0; }
  .wis-block-motiv { padding: 12px; }
  .wis-bentos { gap: 12px; margin-bottom: 48px; }
}
@media (max-width: 560px) {
  .wis-bentos { grid-template-columns: 1fr; }
  .wis-bento-txt { padding: 14px 18px 18px; }
  .wis-liste a { gap: 10px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wis-bento, .wis-liste a, .wis-li-pfeil { transition: none; }
  .wis-bento:hover { transform: none; }
  .wis-li-pfeil { transform: none; }
}