/* ============================================================
   THRIVE ZONE ACADEMY — Design System v1.0
   Brand Kit: Concrete & Sky (ThriveZone_BrandKit.md, 2026-04-15)
   Regeln: Gelb = Akzent (nie Fläche) · Blau = Surface-fähig ·
   Rot = nur CTAs · Paper-Exhale-Sektionen im Editorial-Rhythmus
   ============================================================ */

:root {
  --bg-dark: #141416;
  --surface: #1E2024;
  --border: #2C2D32;
  --blue: #488bf0;
  --yellow: #F2C400;
  --red: #f05948;
  --text-light: #F2EEE8;
  --text-muted: #888786;
  --paper: #F2EEE8;
  --paper-alt: #FAFAF8;
  --ink: #141416;
  --stone: #7A7876;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-dark);
  color: var(--text-light);
  line-height: 1.7;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20,20,22,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1040px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-logo { text-decoration: none; line-height: 1.2; }
.nav-logo .l1 { color: var(--text-light); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.nav-logo .l2 { color: var(--text-muted); font-weight: 300; font-size: 11.5px; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a {
  color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color .2s;
}
.nav-links a:hover { color: var(--text-light); }
.nav-links a.nav-cta {
  color: var(--ink); background: var(--yellow); padding: 7px 16px; border-radius: 6px;
}
.nav-links a.nav-cta:hover { background: #ffd71e; color: var(--ink); }

/* ---------- EYEBROW ---------- */
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--yellow);
  margin-bottom: 18px;
}

/* ---------- HERO ---------- */
.hero { padding: 88px 0 72px; }
.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px); font-weight: 900;
  letter-spacing: -0.025em; line-height: 1.12; max-width: 800px;
}
.hero h1 .blue { color: var(--blue); }
.hero .lead {
  margin-top: 24px; font-size: 19px; color: var(--text-muted);
  max-width: 660px; line-height: 1.65;
}
.hero .lead strong { color: var(--text-light); font-weight: 500; }
.hero-actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 15.5px;
  padding: 14px 28px; border-radius: 8px; transition: transform .15s, background .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #ff6a58; }
.btn-ghost { border: 1px solid var(--border); color: var(--text-light); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-blue { background: var(--blue); color: #fff; }
/* Newsletter — Inline-Bestätigung nach Anmeldung */
.nl-success { background:#e8f5ec; border:1px solid #bfe3cb; color:#1f5132; border-radius:12px; padding:16px 20px; font-size:16px; line-height:1.55; max-width:540px; }
.nl-success strong { color:#15401f; }
.btn-blue:hover { background: #5d9af5; }

/* ---------- SECTIONS ---------- */
section { padding: 72px 0; }
.section-head { margin-bottom: 40px; }
.section-head h2 {
  font-size: clamp(26px, 3.6vw, 36px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2;
}
.section-head p { margin-top: 12px; color: var(--text-muted); font-size: 17px; max-width: 640px; }

/* ---------- SÄULEN GRID ---------- */
.saeulen-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
}
.saeule {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 26px 22px; text-decoration: none; display: block; transition: border-color .2s, transform .15s;
}
a.saeule:hover { border-color: var(--blue); transform: translateY(-2px); }
.saeule .num {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--yellow); display: block; margin-bottom: 10px;
}
.saeule h3 { color: var(--text-light); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.saeule p { color: var(--text-muted); font-size: 13.5px; margin-top: 8px; line-height: 1.5; }
.saeule .count { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700; }
.saeule .count.live { color: var(--blue); }
.saeule .count.soon { color: var(--text-muted); font-weight: 500; }

/* ---------- PAPER EXHALE ---------- */
.paper { background: var(--paper); color: var(--ink); }
.paper .section-head h2 { color: var(--ink); }
.paper .section-head p { color: var(--stone); }
.paper .eyebrow { color: #b89400; }

/* ---------- LEKTIONEN ---------- */
.lektion-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.lektion-card {
  background: var(--paper-alt); border: 1px solid #E4E0D8; border-radius: 14px;
  padding: 26px 28px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; color: var(--ink);
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
/* Cards mit Thumbnail (Bild oben): Padding entfällt, Bild liegt bündig oben */
.lektion-card:has(.lk-thumb) { padding: 0; }
a.lektion-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(20,20,22,0.10); }
.lektion-card .lk-thumb { aspect-ratio: 1200 / 760; background: #141416; overflow: hidden; }
.lektion-card .lk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lektion-card .lk-body { padding: 22px 24px 26px; }
.lektion-card .meta {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.lektion-card .meta .cat { color: var(--stone); font-weight: 500; letter-spacing: 0.1em; }
.lektion-card h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.lektion-card p { margin-top: 10px; color: var(--stone); font-size: 15.5px; line-height: 1.6; }
.lektion-card .read { display: inline-block; margin-top: 14px; color: var(--blue); font-weight: 700; font-size: 14.5px; }
.lektion-card.upcoming { opacity: 0.75; }
.lektion-card.upcoming .meta { color: var(--stone); }

/* ---------- BLUE ISLAND ---------- */
.blue-island { background: var(--blue); color: #fff; }
.blue-island h2 { color: #fff; font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; letter-spacing: -0.02em; }
.blue-island p { color: rgba(255,255,255,0.85); }

/* ---------- NEWSLETTER FORM ---------- */
.nl-box {
  background: var(--paper-alt); border: 2px solid var(--yellow); border-radius: 14px;
  padding: 36px 32px; max-width: 640px;
}
.nl-box h3 { color: var(--ink); font-size: 22px; font-weight: 900; letter-spacing: -0.015em; }
.nl-box p { color: var(--stone); margin-top: 10px; font-size: 15.5px; }
.nl-form { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.nl-form input[type="email"] {
  flex: 1; min-width: 220px; padding: 13px 16px; font-size: 15.5px;
  border: 1px solid #D8D4CC; border-radius: 8px; background: #fff; color: var(--ink);
  font-family: inherit;
}
.nl-form input[type="email"]:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.nl-hint { margin-top: 12px; font-size: 12.5px; color: var(--stone); }

/* ---------- ARTIKEL (Lektion) ---------- */
.artikel { padding: 64px 0 48px; }
.artikel-head .kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 16px;
}
.artikel-head h1 {
  font-size: clamp(30px, 4.6vw, 44px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15;
}
.artikel-head .sub { margin-top: 16px; font-size: 18px; color: var(--text-muted); line-height: 1.6; }
.artikel-head .byline {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-muted);
}
.artikel-head .byline strong { color: var(--text-light); font-weight: 500; }

.artikel-body { padding: 24px 0 48px; }
.artikel-body h2 {
  font-size: 24px; font-weight: 700; letter-spacing: -0.015em;
  margin: 44px 0 16px; color: var(--text-light);
}
.artikel-body h2 .step { color: var(--yellow); }
.artikel-body p { margin: 18px 0; color: #D7D3CC; }
.artikel-body strong { color: var(--text-light); font-weight: 700; }
.artikel-body ul, .artikel-body ol { margin: 18px 0 18px 22px; color: #D7D3CC; }
.artikel-body li { margin: 8px 0; }
.aha {
  background: var(--surface); border-left: 3px solid var(--yellow); border-radius: 0 10px 10px 0;
  padding: 20px 24px; margin: 28px 0;
}
.aha p { margin: 0; color: var(--text-light); font-size: 18px; }

/* Kernidee — prominenter Blue-Island-Block für zentrale Botschaften */
.kernidee {
  background: var(--blue); color: #fff; border-radius: 14px;
  padding: 26px 28px; margin: 34px 0;
}
.kernidee .ki-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.8); margin-bottom: 10px;
}
.kernidee p { margin: 0; color: #fff; font-size: 19px; font-weight: 500; line-height: 1.5; }

/* Beleg-Box — wissenschaftliche Quelle sichtbar machen */
.beleg {
  background: var(--bg-dark); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 22px; margin: 26px 0;
}
.beleg .beleg-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 8px;
}
.beleg p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.65; }
.beleg p + p { margin-top: 8px; }
.beleg a { color: var(--blue); text-decoration: none; }
.beleg .quelle { font-size: 12.5px; color: var(--text-muted); }

/* Kontinuum-Grafik */
.grafik { margin: 32px 0; }
.grafik svg { width: 100%; height: auto; display: block; }
.grafik img { width: 100%; height: auto; display: block; border-radius: 12px; }
.grafik figcaption { font-size: 12.5px; color: var(--text-muted); margin-top: 12px; text-align: center; }

/* Lektion-Foto (z. B. Urban-Athlete-Serie) */
.foto { margin: 32px 0; }
.foto img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--border); }
.foto figcaption { font-size: 12.5px; color: var(--text-muted); margin-top: 12px; text-align: center; }

/* H2 mit Akzent-Balken für klare Abschnitts-Trennung */
.artikel-body h2 {
  position: relative; padding-left: 18px;
}
.artikel-body h2::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  background: var(--yellow); border-radius: 2px;
}
.artikel-body h2 .step { color: var(--yellow); }

/* dezente Trennlinie zwischen großen Themenblöcken */
.artikel-body hr {
  border: 0; border-top: 1px solid var(--border); margin: 44px 0;
}
.quellen {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted); line-height: 1.7;
}
.quellen h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.quellen a { color: var(--blue); text-decoration: none; }

/* ---------- NATIVER VIDEO-PLAYER (selbst gehostet) ---------- */
.video-native { margin: 28px auto; max-width: 480px; }
.video-native video {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--border); background: #000;
}
.video-native figcaption { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; text-align: center; }

/* ---------- 2-KLICK-EMBED (Instagram etc., DSGVO) ---------- */
.embed-consent {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 30px 26px; margin: 28px auto; max-width: 480px; text-align: center;
}
.embed-consent .ec-icon { font-size: 26px; display: block; margin-bottom: 10px; }
.embed-consent h4 { color: var(--text-light); font-size: 16.5px; font-weight: 700; }
.embed-consent p { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 10px 0 0; }
.embed-consent p a { color: var(--blue); text-decoration: none; }
.embed-consent .embed-remember {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted); margin: 16px 0; cursor: pointer;
}
.embed-consent .embed-load { margin-top: 4px; cursor: pointer; border: 0; font-family: inherit; }
.embed-consent.loaded { padding: 0; border: 0; background: transparent; }
.embed-frame {
  width: 100%; max-width: 420px; height: 760px; border: 0; border-radius: 12px;
  display: block; margin: 0 auto; background: #fff;
}

/* ---------- VIDEO-SLOT ---------- */
.video-slot {
  border: 2px dashed var(--border); border-radius: 12px; background: var(--surface);
  padding: 28px 26px; margin: 28px 0; text-align: center;
}
.video-slot .vs-icon { font-size: 26px; display: block; margin-bottom: 8px; }
.video-slot p { margin: 0; color: var(--text-muted); font-size: 14px; }
.video-slot p strong { color: var(--text-light); font-weight: 500; }

/* ---------- CTA-BAUSTEIN ---------- */
.tza-cta {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 34px 32px; margin: 40px 0;
}
.tza-cta .cta-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 12px;
}
.tza-cta h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.tza-cta p { color: var(--text-muted); margin: 12px 0 20px; font-size: 15.5px; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--border); padding: 52px 0 40px; }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.brand-mark .brand-name { font-weight: 700; letter-spacing: 0.02em; font-size: 16px; }
.brand-mark .brand-by { font-weight: 300; opacity: 0.75; font-size: 12.5px; margin-top: 2px; }
.brand-mark .authority { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.8; }
.footer-links { font-size: 13.5px; line-height: 2.1; text-align: right; }
.footer-links a { color: var(--text-muted); text-decoration: none; display: block; }
.footer-links a:hover { color: var(--text-light); }
.footer-bottom { margin-top: 36px; font-size: 12px; color: var(--text-muted); }

/* ---------- HERO MIT PORTRAIT ---------- */
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.hero-portrait {
  width: 320px; height: 320px; border-radius: 50%; background: #fff;
  border: 1px solid var(--border); overflow: hidden; margin: 0 auto;
  box-shadow: 0 16px 48px rgba(72,139,240,0.18);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-name { text-align: center; margin-top: 18px; }
.hero-name .n1 { font-weight: 700; font-size: 16px; }
.hero-name .n2 { color: var(--text-muted); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }

/* ---------- PRAXIS / STORYTELLING ---------- */
.praxis-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  padding: 36px 0;
}
.praxis-row + .praxis-row { border-top: 1px solid var(--border); }
.praxis-row figure { margin: 0; }
.praxis-row img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--border);
}
.praxis-row figcaption { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
.praxis-row h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }
.praxis-row h3 .y { color: var(--yellow); }
.praxis-row p { color: #D7D3CC; font-size: 16px; margin-top: 12px; }
.praxis-row .fakten { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.praxis-row .fakt {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--text-light); font-weight: 500;
}
.praxis-row .fakt b { color: var(--blue); font-weight: 700; }

/* ---------- STORY ---------- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.story-block h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.story-block h3 .hl { color: var(--blue); }
.paper .story-block p { color: #3a3937; font-size: 16px; }
.paper .story-block h3 { color: var(--ink); }

/* ---------- SYSTEM-STORY ---------- */
.system-lead {
  max-width: 780px; font-size: 17.5px; line-height: 1.75; color: #3a3937;
  margin: -16px 0 44px;
}
.system-lead strong { color: var(--ink); font-weight: 700; }
.system-conclusion {
  max-width: 720px; margin: 52px auto 0; text-align: center;
  border-top: 2px solid var(--yellow); padding-top: 28px;
}
.system-conclusion p { color: #3a3937; font-size: 16.5px; line-height: 1.75; }
.system-conclusion strong { color: var(--ink); }

/* ---------- SYSTEM SUB-BLOCKS (Shield / Basics-First) ---------- */
.sys-block { margin-top: 72px; }
.sys-block-head { max-width: 800px; }
.sys-block-head .eyebrow { color: #b89400; }
.sys-block-head h3 {
  font-size: 27px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.2; margin-top: 10px;
}
.sys-block-lead {
  margin-top: 16px; font-size: 16.5px; line-height: 1.75; color: #3a3937;
}
.sys-block-lead strong { color: var(--ink); font-weight: 700; }
.sys-block-lead em { font-style: italic; color: var(--ink); }
.sys-figure { margin: 34px auto; max-width: 860px; }
.sys-figure svg { width: 100%; height: auto; display: block; }
.sys-figure figcaption {
  margin-top: 12px; font-size: 13.5px; line-height: 1.6;
  color: var(--stone); text-align: center;
}
.shield-grid { margin-top: 30px; gap: 26px 40px; }
.origin-note {
  max-width: 820px; margin: 56px auto 0; padding: 24px 26px;
  background: var(--paper-alt); border: 1px solid #E4E0D8;
  border-left: 4px solid var(--blue); border-radius: 12px;
}
.origin-note p { color: #3a3937; font-size: 16px; line-height: 1.75; }
.origin-note strong { color: var(--ink); }

/* ---------- LOGO-INFOGRAFIK ---------- */
.logo-stage {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center;
  margin-top: 48px;
}
.logo-figure {
  width: 340px; height: 340px; position: relative; margin: 0 auto;
}
.logo-figure img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-dot {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(20,20,22,0.25);
}
.callout-col { display: grid; gap: 18px; }
.callout {
  background: var(--paper-alt); border: 1px solid #E4E0D8; border-radius: 12px;
  padding: 20px 22px; position: relative;
}
.callout .c-num {
  display: inline-flex; width: 24px; height: 24px; border-radius: 50%;
  background: var(--yellow); color: var(--ink); font-size: 12.5px; font-weight: 700;
  align-items: center; justify-content: center; margin-bottom: 10px;
}
.callout h4 { color: var(--ink); font-size: 15.5px; font-weight: 700; letter-spacing: -0.005em; }
.callout p { color: var(--stone); font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.callout-col.left .callout { border-right: 3px solid var(--yellow); }
.callout-col.right .callout { border-left: 3px solid var(--yellow); }

/* ---------- SÄULEN DETAIL ---------- */
.saeulen-detail { display: grid; gap: 14px; margin-top: 8px; }
.saeule-row {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 26px 28px; display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: center;
  text-decoration: none; transition: border-color .2s;
}
a.saeule-row:hover { border-color: var(--blue); }
.saeule-row .big-num {
  font-size: 34px; font-weight: 900; color: var(--blue); letter-spacing: -0.02em; line-height: 1;
}
.saeule-row h3 { color: var(--text-light); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.saeule-row h3 span { color: var(--text-muted); font-weight: 400; font-size: 14px; margin-left: 8px; }
.saeule-row p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin-top: 6px; }
.saeule-row .row-count { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.saeule-row .row-count.live { color: var(--blue); }
.saeule-row .row-count.soon { color: var(--text-muted); font-weight: 500; }
.saeule-row.flow { border-style: dashed; }

/* ============================================================
   THEME PAPER — Lese-Modus für Lektionen (Design Guide §2–4)
   "Dunkler Rahmen, helle Bühne": Kopf bleibt anthrazit,
   der Lesetext liegt auf Warm Paper.
   ============================================================ */
.theme-paper .artikel-body { background: var(--paper); padding-top: 56px; }
.theme-paper .artikel-body p { color: #2E2D2B; font-size: 18.5px; }
.theme-paper .artikel-body ul, .theme-paper .artikel-body ol { color: #2E2D2B; font-size: 18px; }
.theme-paper .artikel-body h2 { color: var(--ink); }
.theme-paper .artikel-body strong { color: var(--ink); }
.theme-paper .artikel-body em { color: #4a4845; }
.theme-paper .artikel-body hr { border-top-color: #DDD8CF; }

.theme-paper .aha { background: var(--paper-alt); border-left-color: var(--yellow); box-shadow: 0 1px 4px rgba(20,20,22,0.06); color: var(--ink); }
.theme-paper .aha p { color: var(--ink); }

.theme-paper .beleg { background: var(--paper-alt); border-color: #E4E0D8; color: #5A5856; }
.theme-paper .beleg p { color: #5A5856; }
.theme-paper .beleg p strong { color: var(--ink) !important; }
.theme-paper .beleg .beleg-head { color: var(--blue); }
.theme-paper .beleg .quelle { color: #5A5856; }

.theme-paper .video-slot { background: var(--paper-alt); border-color: #D8D4CC; color: #7A7876; }
.theme-paper .video-slot p { color: #7A7876; }
.theme-paper .video-slot p strong { color: var(--ink); }

.theme-paper .embed-consent { background: var(--paper-alt); border-color: #E4E0D8; color: #7A7876; }
.theme-paper .embed-consent h4 { color: var(--ink); }
.theme-paper .embed-consent p { color: #7A7876; }
.theme-paper .embed-consent .embed-remember { color: #7A7876; }

.theme-paper .grafik figcaption, .theme-paper .video-native figcaption, .theme-paper .foto figcaption { color: #7A7876; }
.theme-paper .grafik text[fill="#F2EEE8"] { fill: #141416; }
.theme-paper .grafik text[fill="#888786"] { fill: #7A7876; }
.theme-paper .grafik circle { fill: #FAFAF8; }

.theme-paper .quellen { border-top-color: #DDD8CF; }
.theme-paper .quellen p, .theme-paper .quellen h3 { color: #7A7876; }

.theme-paper .tza-cta { background: var(--bg-dark); border-color: var(--bg-dark); }
.theme-paper .tza-cta h3 { color: var(--text-light); }
.theme-paper .tza-cta p { color: var(--text-muted); }
.theme-paper .tza-cta p a { color: var(--blue); }

/* --- Paper-Theme: Komponenten mit eigener "Bühne" (Fix 2026-06-28) ---
   Ohne diese Overrides greift `.theme-paper .artikel-body p` (dunkle Tinte)
   bzw. die geerbte helle Body-Farbe in diese Karten hinein → unsichtbarer Text.
   Betroffen waren die Workshops-Seiten (DE+EN). */

/* Säulen-Detail = dunkle Karten auch im Paper-Modus: Text hell halten */
.theme-paper .saeule-row h3 { color: var(--text-light); }
.theme-paper .saeule-row h3 span { color: var(--text-muted); }
.theme-paper .saeule-row p { color: #C9C7C4; }

/* Story-Blocks liegen direkt auf Paper: Überschrift dunkel statt geerbtem Weiß */
.theme-paper .story-block h3 { color: var(--ink); }
.theme-paper .story-block p { color: #3a3937; }

/* Eyebrow auf Paper: gedämpftes Gold statt grellem Gelb (lesbarer Kontrast) */
.theme-paper .eyebrow { color: #b89400; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-portrait { width: 240px; height: 240px; }
  .praxis-row { grid-template-columns: 1fr; gap: 24px; }
  .praxis-row figure { order: -1; }
  .logo-stage { grid-template-columns: 1fr; }
  .logo-figure { width: 280px; height: 280px; order: -1; }
  .logo-dot { display: none; }
  .callout-col.left .callout, .callout-col.right .callout { border-right: none; border-left: 3px solid var(--yellow); }
}

@media (max-width: 720px) {
  .nav-links { gap: 14px; }
  .nav-links a.hide-m { display: none; }
  .hero { padding: 60px 0 52px; }
  section { padding: 56px 0; }
  .footer-links { text-align: left; }
  .story-grid { grid-template-columns: 1fr; gap: 28px; }
  .sys-block { margin-top: 52px; }
  .sys-block-head h3 { font-size: 23px; }
  .saeule-row { grid-template-columns: 48px 1fr; }
  .saeule-row .row-count { grid-column: 2; }
  .saeule-row .big-num { font-size: 28px; }
}

/* ===== Rezept-Titelbild (Detailseite Hero) ===== */
.recipe-hero { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; margin:6px 0 4px; background:#ECE8E0; }
@media (max-width:600px){ .recipe-hero { border-radius:12px; } }


/* ---------- ANDREAS PERSÖNLICH — Portrait + vorhandener Text ---------- */
.andreas-say{display:flex;gap:16px;align-items:flex-start;background:var(--paper-alt);border:1px solid #E4E0D8;border-left:3px solid var(--blue);border-radius:14px;padding:18px 20px;margin:28px 0;}
.andreas-say .as-ava{flex:0 0 auto;width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center top;background:#fff;border:1px solid #E4E0D8;box-shadow:0 4px 14px rgba(72,139,240,.18);}
.andreas-say .as-body{flex:1 1 auto;min-width:0;}
.andreas-say .as-name{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}
.andreas-say .as-body p{margin:0;font-size:16.5px;line-height:1.65;color:#2E2D2B;}
@media(max-width:560px){.andreas-say{flex-direction:column;gap:10px;}.andreas-say .as-ava{width:64px;height:64px;}}

/* ============================================================
   INSTAGRAM-BAND — kuratierte Karten (Startseite, DSGVO-sauber)
   Lokale ig-*.svg + reiner Link zum Profil → keine Meta-Skripte,
   keine Cookies, kein Consent nötig. Concrete & Sky.
   ============================================================ */
.ig-band { border-top: 1px solid var(--border); }
.ig-band .section-head { margin-bottom: 30px; }
.ig-band .section-head p { max-width: 680px; }
.ig-band .ig-handle { color: var(--blue); text-decoration: none; font-weight: 700; }
.ig-band .ig-handle:hover { text-decoration: underline; }

.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ig-card {
  position: relative; display: block; aspect-ratio: 1200 / 760; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border); background: #0F0F11;
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.ig-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
  background: linear-gradient(180deg, rgba(20,20,22,0) 52%, rgba(20,20,22,0.55) 100%);
}
.ig-card .ig-glyph {
  position: absolute; right: 10px; bottom: 10px;
  width: 22px; height: 22px; max-width: 22px; max-height: 22px;
  opacity: 0.92; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); transition: opacity .2s;
}
.ig-card:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 10px 30px rgba(72,139,240,0.18); }
.ig-card:hover::after { opacity: 1; }
.ig-card:hover .ig-glyph { opacity: 1; }

.ig-cta { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.ig-cta .ig-cta-note { color: var(--text-muted); font-size: 13.5px; }

@media (max-width: 760px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ig-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Footer: Instagram-Zeile (site-weit) — nutzt bestehende .footer-links Styles */

/* ============================================================
   MOBILE-UPDATE 2026-07-19 — Fokus: Besucher von Instagram/TikTok
   (1) Kein horizontaler Overflow  (2) Nav mobil = Logo + 1 CTA
   (3) Touch-Ziele ≥ 44 px  (4) Newsletter-Formular above the fold
   (5) Zielauswahl-Karten  (6) Sticky Newsletter-CTA (mobil)
   ============================================================ */

/* (1) Overflow-Schutz — clip statt hidden, damit position:sticky intakt bleibt */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* (3) Touch-Ziele: Nav-Links + CTA mindestens 44 px hoch */
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
.nav-links a.nav-cta { min-height: 44px; padding: 9px 16px; }

/* (2) Mobile Nav: auf Seiten mit .nav--min bleiben nur Logo + CTA */
@media (max-width: 720px) {
  .nav--min .nav-links { gap: 8px; }
  .nav--min .nav-links a:not(.nav-cta) { display: none; }
  .nav-inner { padding: 8px 16px; }
}

/* (4) Kompakter Hero (Newsletter-LP) + kompakteres Formular */
.hero-compact { padding: 44px 0 28px; }
.hero-compact h1 { font-size: clamp(27px, 6vw, 42px); }
.hero-compact .lead { margin-top: 14px; font-size: 17px; }
@media (max-width: 720px) {
  .hero-compact { padding: 24px 0 16px; }
  .hero-compact .lead { font-size: 15.5px; margin-top: 10px; }
  .nl-box { padding: 24px 20px; }
  .nl-box h3 { font-size: 19px; }
  .nl-box p { font-size: 14.5px; }
}

/* Formular: Label, Fehlermeldung, volle Breite auf Mobil */
.nl-form { align-items: stretch; }
.nl-form .nl-label {
  flex-basis: 100%; display: block; font-size: 13px; font-weight: 600;
  color: var(--stone); margin-bottom: -4px;
}
.nl-form .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.nl-error {
  flex-basis: 100%; margin-top: 6px; font-size: 14px; line-height: 1.5;
  color: #8c1d18; background: #fdecea; border: 1px solid #f2c0ba;
  border-radius: 8px; padding: 10px 14px;
}
.nl-error[hidden] { display: none; }
@media (max-width: 600px) {
  .nl-form { flex-direction: column; gap: 8px; }
  .nl-form input[type="email"] { min-width: 0; width: 100%; min-height: 48px; }
  .nl-form .btn { width: 100%; }
}

/* (5) Zielauswahl-Karten (Startseite) */
.ziel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.ziel-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; text-decoration: none; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .2s, transform .15s;
}
a.ziel-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.ziel-card .z-title { color: var(--text-light); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.ziel-card .z-sub { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.ziel-card .z-go { color: var(--blue); font-weight: 700; font-size: 13px; margin-top: 4px; }
@media (max-width: 720px) {
  .ziel-grid { grid-template-columns: 1fr 1fr; }
  .ziel-card { padding: 16px; }
}
@media (max-width: 420px) { .ziel-grid { grid-template-columns: 1fr; } }

/* System-Teaser (Startseite → /system/) */
.sys-teaser {
  display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: center;
  background: var(--paper-alt); border: 1px solid #E4E0D8; border-radius: 14px; padding: 28px 30px;
}
.sys-teaser img { width: 120px; height: 120px; object-fit: contain; }
.sys-teaser h3 { color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.sys-teaser p { color: #3a3937; font-size: 15.5px; line-height: 1.65; margin-top: 8px; }
.sys-teaser .z-go { display: inline-block; margin-top: 12px; color: var(--blue); font-weight: 700; font-size: 14.5px; text-decoration: none; }
@media (max-width: 600px) {
  .sys-teaser { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .sys-teaser img { width: 88px; height: 88px; }
}

/* (6) Sticky Newsletter-CTA — nur mobil, wird per site.js eingesetzt */
.nl-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(20,20,22,0.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  transform: translateY(110%); transition: transform .25s ease;
}
.nl-sticky.visible { transform: translateY(0); }
.nl-sticky a {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  background: var(--red); color: #fff; font-weight: 700; font-size: 16px;
  border-radius: 10px; text-decoration: none;
}
@media (min-width: 721px) { .nl-sticky { display: none; } }

/* Mobil: Hero + Sektionen kompakter, damit Inhalt schneller sichtbar ist */
@media (max-width: 720px) {
  .hero { padding: 44px 0 40px; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .section-head { margin-bottom: 28px; }
}

/* ===== Barrierefreiheit: Skip-Link (added 2026-08-07) ===== */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--yellow); color:var(--ink);
  padding:12px 20px; border-radius:0 0 8px 0;
  font-weight:700; font-size:15px; text-decoration:none;
}
.skip-link:focus{ left:0; outline:3px solid var(--blue); outline-offset:2px; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blue); outline-offset:2px; border-radius:3px;
}

/* ============================================================
   NAVIGATIONS-, SUCH- UND FILTER-SYSTEM  (added 2026-08-08)
   Eine Navigation fuer alle Seitentypen, globale Suche,
   Mahlzeitenfinder, Soforthilfe- und Zielseiten.
   Erweitert das bestehende Concrete-&-Sky-Design, ersetzt es nicht.
   ============================================================ */

/* ---------- 1. EINHEITLICHE HAUPTNAVIGATION ---------- */

.nav-inner { gap: 10px; }
.tz-nav .nav-links { gap: 20px; }

.tz-nav .nav-logo .l1 { white-space: nowrap; }

/* aktuelle Seite kennzeichnen */
.tz-nav .nav-links a[aria-current="page"],
.tz-menu a[aria-current="page"] { color: var(--yellow); }
.tz-nav .nav-links a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; background: var(--yellow);
  margin-top: -10px; border-radius: 2px;
}

/* Suchknopf + Menuknopf */
.tz-iconbtn {
  appearance: none; background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 8px; cursor: pointer;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  transition: color .2s, border-color .2s;
}
.tz-iconbtn:hover { color: var(--text-light); border-color: var(--blue); }
.tz-iconbtn svg { width: 18px; height: 18px; flex: none; }
.tz-burger .tz-burger-label { display: inline; }

/* Burger nur mobil, Desktop-Links nur Desktop */
.tz-burger { display: none; }
@media (max-width: 860px) {
  .tz-nav .nav-links { gap: 8px; }
  .tz-nav .nav-links a.hide-m,
  .tz-nav .nav-links .hide-m { display: none; }
  .tz-burger { display: inline-flex; }
}
/* Unter 480 px wird es eng: Menue-Beschriftung entfaellt (das Symbol traegt die
   aria-label-Beschriftung), Logo und Abstaende ruecken zusammen. */
@media (max-width: 560px) {
  .tz-nav .nav-links a.nav-cta { padding: 9px 11px; font-size: 13.5px; }
  .tz-nav .nav-links { gap: 6px; }
  .tz-nav .nav-logo .l1 { font-size: 14px; }
  .tz-nav .nav-logo .l2 { font-size: 10.5px; }
  .tz-burger .tz-burger-label { display: none; }
  .tz-iconbtn { min-width: 44px; padding: 0 8px; }
  .nav-inner { padding: 8px 12px; gap: 8px; }
}
/* Unter 480 px weicht der CTA dem Menue: er braeuchte dort zwei Zeilen. Er bleibt
   mobil doppelt erreichbar — im Menue und als mitlaufende Schaltflaeche am unteren
   Rand (.nl-sticky). */
@media (max-width: 480px) {
  .tz-nav .nav-links a.nav-cta { display: none; }
}
.tz-nav .nav-links a.nav-cta { white-space: nowrap; }

/* Mobilmenue */
.tz-menu {
  border-top: 1px solid var(--border);
  background: rgba(20,20,22,0.985);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tz-menu[hidden] { display: none; }
.tz-menu-inner { max-width: 1040px; margin: 0 auto; padding: 10px 16px 22px; }
.tz-menu a {
  display: flex; align-items: center; min-height: 48px;
  padding: 6px 4px; color: var(--text-light); text-decoration: none;
  font-size: 16.5px; font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.tz-menu a:last-child { border-bottom: 0; }
.tz-menu a .tz-menu-sub {
  display: block; font-size: 13px; font-weight: 400; color: var(--text-muted);
}
.tz-menu .tz-menu-head {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; margin: 16px 0 2px;
}
.tz-menu .tz-menu-cta {
  margin-top: 16px; background: var(--yellow); color: var(--ink);
  border-radius: 8px; justify-content: center; font-weight: 700; border-bottom: 0;
}

/* ---------- 2. SUCH-OVERLAY ---------- */

.tz-ov {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: rgba(12,12,14,0.96); backdrop-filter: blur(6px);
  padding: 0; overscroll-behavior: contain;
}
.tz-ov[hidden] { display: none; }
.tz-ov-bar {
  display: flex; gap: 10px; align-items: center;
  max-width: 760px; width: 100%; margin: 0 auto; padding: 18px 16px 12px;
}
.tz-ov-bar input {
  flex: 1 1 auto; min-width: 0; min-height: 50px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-light); font: inherit; font-size: 17px; padding: 10px 14px;
}
.tz-ov-bar input::placeholder { color: var(--text-muted); }
.tz-ov-body { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 40px; }
.tz-ov-body > div { max-width: 760px; margin: 0 auto; }

/* ---------- 3. SUCHERGEBNISSE (Overlay + /suche/) ---------- */

.tz-res-group { margin: 26px 0 0; }
.tz-res-group > h2 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow); font-weight: 700; margin: 0 0 10px;
}
.tz-res {
  display: block; text-decoration: none; padding: 14px 16px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .15s, transform .15s;
}
.tz-res:hover, .tz-res:focus-visible { border-color: var(--blue); transform: translateY(-1px); }
.tz-res .r-kind {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px;
}
.tz-res .r-kind.k-hilfe { color: var(--red); }
.tz-res .r-kind.k-ziel  { color: var(--yellow); }
.tz-res .r-title { display: block; color: var(--text-light); font-weight: 700; font-size: 16.5px; line-height: 1.35; }
.tz-res .r-desc  { display: block; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; margin-top: 4px; }
.tz-res .r-tags  { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 7px; }
.tz-empty { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin: 26px 0 10px; }
.tz-status { color: var(--text-muted); font-size: 14px; margin: 14px 0 0; }
.tz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.tz-chips a, .tz-chip {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-light); text-decoration: none; font-size: 14.5px;
  background: transparent; cursor: pointer; font-family: inherit;
}
.tz-chips a:hover, .tz-chip:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- 4. MAHLZEITENFINDER (Paper-Sektion) ---------- */

.tz-finder {
  background: var(--paper-alt); border: 1px solid #E4E0D8; border-radius: 16px;
  padding: 20px 22px; margin: 26px 0 10px;
}
.tz-finder .tzf-h {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 12px;
}
.tz-finder label.tzf-lab { display: block; font-size: 13.5px; font-weight: 700; color: #2E2D2B; margin-bottom: 6px; }
.tz-finder input[type="search"], .tz-finder input[type="text"] {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16.5px;
  background: #fff; border: 1px solid #E4E0D8; border-radius: 10px; color: var(--ink);
}
.tzf-groups { margin-top: 16px; display: grid; gap: 14px; }
.tzf-group > .tzf-gh {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 7px;
}
.tzf-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tzf-opt {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px;
  padding: 6px 13px; border: 1px solid #E4E0D8; border-radius: 999px;
  background: #fff; color: #2E2D2B; font: inherit; font-size: 14.5px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tzf-opt:hover { border-color: var(--blue); }
.tzf-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.tzf-opt .tzf-box {
  width: 16px; height: 16px; border: 1.5px solid #B9B4AA; border-radius: 4px;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
}
.tzf-opt .tzf-box::after { content: "✓"; font-size: 12px; line-height: 1; color: #fff; opacity: 0; }
.tzf-opt[data-on="1"] { background: #eef4fd; border-color: var(--blue); color: #1c4b96; font-weight: 700; }
.tzf-opt[data-on="1"] .tzf-box { background: var(--blue); border-color: var(--blue); }
.tzf-opt[data-on="1"] .tzf-box::after { opacity: 1; }

.tzf-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #E4E0D8;
}
.tzf-count { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.tzf-active { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tzf-active button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 4px 10px 4px 12px; border: 1px solid var(--blue); background: #eef4fd;
  color: #1c4b96; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tzf-active button .x { font-size: 15px; line-height: 1; }
.tzf-reset {
  margin-left: auto; background: transparent; border: 1px solid #E4E0D8; border-radius: 999px;
  min-height: 40px; padding: 6px 14px; font: inherit; font-size: 14px; color: #2E2D2B; cursor: pointer;
}
.tzf-reset:hover { border-color: var(--blue); color: var(--blue); }
.tzf-note { font-size: 13px; color: var(--stone); line-height: 1.55; margin-top: 10px; }
.tzf-empty { background: #fff; border: 1px dashed #D8D3C9; border-radius: 14px; padding: 22px; margin: 20px 0; }
.tzf-empty p { color: #2E2D2B; font-size: 16px; margin: 0 0 10px; }
.meal-card[hidden] { display: none !important; }
.meal-group[hidden] { display: none !important; }

/* Mobil: Filter einklappbar, nie bildschirmfuellend blockierend */
.tzf-toggle {
  display: none; width: 100%; min-height: 48px; margin-top: 12px;
  background: #fff; border: 1px solid #E4E0D8; border-radius: 10px;
  font: inherit; font-size: 15.5px; font-weight: 700; color: #2E2D2B; cursor: pointer;
}
@media (max-width: 720px) {
  .tzf-toggle { display: block; }
  .tzf-groups[data-collapsed="1"] { display: none; }
  .tz-finder { padding: 16px 15px; }
}

/* ---------- 5. SOFORTHILFE- UND ZIELSEITEN ---------- */

.tz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 22px 0 0; }
.tz-card {
  display: block; text-decoration: none; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .15s, transform .15s;
}
.tz-card:hover, .tz-card:focus-visible { border-color: var(--blue); transform: translateY(-2px); }
.tz-card .c-t { display: block; font-weight: 700; font-size: 18px; color: var(--text-light); line-height: 1.3; }
.tz-card .c-d { display: block; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin-top: 7px; }
.tz-card .c-go { display: inline-block; margin-top: 12px; color: var(--blue); font-weight: 700; font-size: 14px; }

/* Paper-Variante fuer helle Seiten */
.theme-paper .tz-card { background: var(--paper-alt); border-color: #E4E0D8; }
.theme-paper .tz-card .c-t { color: var(--ink); }
.theme-paper .tz-card .c-d { color: #55534f; }

.tz-steps { list-style: none; counter-reset: tzs; padding: 0; margin: 18px 0; }
.tz-steps li {
  position: relative; padding: 4px 0 16px 46px; counter-increment: tzs;
  font-size: 16.5px; line-height: 1.65; color: #2E2D2B;
}
.tz-steps li::before {
  content: counter(tzs); position: absolute; left: 0; top: 2px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.tz-steps li b, .tz-steps li strong { color: var(--ink); }

.tz-avoid { list-style: none; padding: 0; margin: 14px 0; }
.tz-avoid li {
  position: relative; padding: 8px 0 8px 30px; font-size: 16.5px; line-height: 1.6; color: #2E2D2B;
  border-bottom: 1px solid #E4E0D8;
}
.tz-avoid li::before { content: "·"; position: absolute; left: 8px; top: 4px; color: var(--stone); font-size: 24px; line-height: 1.2; }

.tz-safety {
  background: #fdf3f1; border: 1px solid #f6cec7; border-left: 3px solid var(--red);
  border-radius: 14px; padding: 18px 20px; margin: 28px 0;
}
.tz-safety .s-h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #b03a29; margin-bottom: 8px; }
.tz-safety p { margin: 0 0 8px; color: #2E2D2B; font-size: 16px; line-height: 1.6; }
.tz-safety p:last-child { margin-bottom: 0; }
.tz-disclaimer { font-size: 13.5px; color: var(--stone); line-height: 1.6; margin: 22px 0 0; }

/* Querverlinkungen auf Detailseiten */
.tz-related { margin: 34px 0 8px; }
.tz-related h2 { font-size: 20px; margin-bottom: 4px; }
.tz-related .tzr-list { display: grid; gap: 10px; margin-top: 14px; }
.tz-related .tzr-item {
  display: flex; gap: 14px; align-items: center; text-decoration: none;
  background: var(--paper-alt); border: 1px solid #E4E0D8; border-radius: 12px;
  padding: 12px 14px; transition: border-color .15s;
}
.tz-related .tzr-item:hover { border-color: var(--blue); }
.tz-related .tzr-item img {
  width: 64px; height: 48px; flex: none; object-fit: cover; border-radius: 8px; background: #ECE8E0;
}
.tz-related .tzr-item .t { display: block; font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.35; }
.tz-related .tzr-item .d { display: block; font-size: 13.5px; color: var(--stone); line-height: 1.45; margin-top: 3px; }
body:not(.theme-paper) .tz-related .tzr-item { background: var(--surface); border-color: var(--border); }
body:not(.theme-paper) .tz-related .tzr-item .t { color: var(--text-light); }
body:not(.theme-paper) .tz-related .tzr-item .d { color: var(--text-muted); }

/* Zielseiten: Startpunkt-Block */
.tz-start {
  background: #eef4fd; border: 1px solid #cfe0fb; border-radius: 16px;
  padding: 22px 24px; margin: 26px 0;
}
.tz-start .st-h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2b5fa6; margin-bottom: 8px; }
.tz-start h2 { font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.tz-start p { margin: 0 0 12px; color: #2E2D2B; font-size: 16.5px; line-height: 1.6; }
.tz-start p:last-child { margin-bottom: 0; }

.tz-plan { list-style: none; padding: 0; margin: 16px 0; counter-reset: tzp; }
.tz-plan li {
  counter-increment: tzp; position: relative; padding: 12px 0 12px 52px;
  border-bottom: 1px solid #E4E0D8; font-size: 16.5px; line-height: 1.6; color: #2E2D2B;
}
.tz-plan li::before {
  content: "Woche " counter(tzp); position: absolute; left: 0; top: 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); width: 44px; line-height: 1.2;
}
.tz-plan li:last-child { border-bottom: 0; }

/* Bildstabilitaet: feste Verhaeltnisse fuer Karten-Thumbnails */
.lk-thumb img, .mc-thumb img { aspect-ratio: 16 / 9; }

@media (max-width: 480px) {
  .tz-steps li { font-size: 16px; padding-left: 42px; }
  .tz-related .tzr-item img { width: 54px; height: 40px; }
}

/* ---------- 6. RESPONSIVE BILDER (<picture>, added 2026-08-08) ---------- */
/* Die Rezeptbilder liegen zusaetzlich als WebP in drei Breiten vor. Das <picture>
   waehlt die passende Groesse; das PNG bleibt als Rueckfallebene erhalten. */
.mc-thumb picture,
.lk-thumb picture { display: block; width: 100%; height: 100%; }
picture > img { display: block; }
.tz-related .tzr-item picture {
  flex: none; display: block; width: 64px; height: 48px;
  border-radius: 8px; overflow: hidden; background: #ECE8E0;
}
.tz-related .tzr-item picture img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
@media (max-width: 480px) {
  .tz-related .tzr-item picture { width: 54px; height: 40px; }
}