/* ============================================================
   AuroQuantis Media — Design System
   Editorial-Bildungsplattform · ruhig, sachlich, transparent
   ============================================================ */

/* Lokal ausgelieferte Schriften (SIL Open Font License 1.1, siehe fonts/OFL-*.txt) – keine Verbindung zu Drittanbietern */
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/libre-caslon-text-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/libre-caslon-text-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-greek-400-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  /* Farben */
  --deep-emerald: #071F1B;
  --forest-green: #0F3D2E;
  --bright-gold:  #F4CF48;
  --off-white:    #F2F1EB;
  --stone-grey:   #B9B7AE;

  /* abgeleitete Töne */
  --emerald-line:   rgba(242, 241, 235, 0.12);  /* feine Trenner auf dunkel */
  --emerald-soft:   #0c2a24;                     /* Karten/Felder auf emerald */
  --ink:            #14201c;                     /* Fließtext auf hell */
  --ink-soft:       #4a544f;                     /* Sekundärtext auf hell */
  --light-line:     rgba(20, 32, 28, 0.12);      /* Trenner auf hell */
  --gold-12:        rgba(244, 207, 72, 0.12);
  --gold-30:        rgba(244, 207, 72, 0.30);

  /* Schriften */
  --font-headline: "Libre Caslon Text", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;

  /* Schriftgrößen */
  --text-display: clamp(40px, 5vw, 56px);
  --text-h1: clamp(32px, 4vw, 42px);
  --text-h2: clamp(26px, 3vw, 32px);
  --text-h3: 18px;
  --text-lead: 17px;
  --text-body: 15px;
  --text-caption: 12px;

  /* Spacing */
  --space-section: 120px;
  --space-section-mobile: 64px;
  --max-content: 1200px;
  --max-reading: 680px;
  --gutter: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ---------- Sichtbarer Tastatur-Fokus (WCAG 2.4.7) ---------- */
:focus-visible {
  outline: 3px solid var(--bright-gold);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Auf hellen Flächen ist der Forest-Ring kontraststärker */
.bg-light :focus-visible, .bg-stone :focus-visible {
  outline-color: var(--forest-green);
}
/* Maus-/Touch-Klicks bekommen keinen Ring */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Skip-Link (WCAG 2.4.1) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -200px; z-index: 200;
  background: var(--bright-gold); color: var(--deep-emerald);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 3px; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typografie-Grundlagen ---------- */
h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: 1.2; }
h2 { font-size: var(--text-h2); line-height: 1.3; }
h3 { font-size: var(--text-h3); line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }

.tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-block;
}
.caption {
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.5;
}
.lead {
  font-size: var(--text-lead);
  line-height: 1.7;
}

/* ---------- Layout-Helfer ---------- */
.wrap { width: 100%; max-width: var(--max-content); margin: 0 auto; padding-inline: var(--gutter); }
.reading { max-width: var(--max-reading); }
.section { padding-block: var(--space-section); }
@media (max-width: 768px) {
  .section { padding-block: var(--space-section-mobile); }
}

/* Sektions-Hintergründe */
.bg-emerald { background: var(--deep-emerald); color: var(--off-white); }
.bg-forest  { background: var(--forest-green); color: var(--off-white); }
.bg-light   { background: var(--off-white); color: var(--ink); }
.bg-stone   { background: var(--stone-grey); color: var(--ink); }

.bg-emerald h1, .bg-emerald h2, .bg-emerald h3,
.bg-forest h1, .bg-forest h2, .bg-forest h3 { color: var(--off-white); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }

/* Gold gefüllt — primärer CTA auf dunkel */
.btn-gold { background: var(--bright-gold); color: var(--deep-emerald); border-color: var(--bright-gold); }
.btn-gold:hover { background: #f7d863; border-color: #f7d863; }

/* Gold-Outline — sekundär auf dunkel */
.btn-gold-outline { background: transparent; color: var(--bright-gold); border-color: var(--gold-30); }
.btn-gold-outline:hover { border-color: var(--bright-gold); background: var(--gold-12); }

/* Forest gefüllt — primär auf hell */
.btn-forest { background: var(--forest-green); color: var(--off-white); border-color: var(--forest-green); }
.btn-forest:hover { background: #14543f; border-color: #14543f; }

/* Forest-Outline — sekundär auf hell */
.btn-forest-outline { background: transparent; color: var(--forest-green); border-color: var(--light-line); }
.btn-forest-outline:hover { border-color: var(--forest-green); }

.btn .arr { font-size: 13px; transition: transform .18s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* Textlink mit Pfeil */
.link-arrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest-green);
  border-bottom: 1px solid transparent;
  transition: gap .18s ease, border-color .18s ease;
}
.link-arrow:hover { gap: 11px; }
.bg-emerald .link-arrow, .bg-forest .link-arrow { color: var(--bright-gold); }

/* ---------- Eyebrow ---------- */
.eyebrow { color: var(--forest-green); margin-bottom: 14px; }
.bg-emerald .eyebrow, .bg-forest .eyebrow { color: var(--bright-gold); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 31, 27, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--emerald-line);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--off-white); flex-shrink: 0; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand .mark { width: 26px; height: 26px; flex-shrink: 0; }
.brand .wordmark { font-family: var(--font-headline); font-size: 19px; letter-spacing: 0.01em; white-space: nowrap; }
.brand .wordmark b { font-weight: 400; }

.nav-main { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-main a {
  font-family: var(--font-body); font-weight: 500; font-size: 14.5px;
  color: rgba(242,241,235,0.78); text-decoration: none;
  padding: 6px 0; position: relative; transition: color .16s ease;
}
.nav-main a:hover { color: var(--off-white); }
.nav-main a.active { color: var(--bright-gold); }
.nav-main a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--bright-gold);
}
.header-cta { margin-left: 6px; }
.nav-toggle { display: none; }

@media (max-width: 940px) {
  .nav-main, .header-cta { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 4px; margin-left: auto;
    background: none; border: 0; cursor: pointer; padding: 8px;
  }
  .nav-toggle span { width: 22px; height: 1.5px; background: var(--off-white); transition: .2s; }
  .mobile-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .mobile-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .mobile-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* Mobile-Menü */
.mobile-nav {
  display: none; position: fixed; inset: 72px 0 0; z-index: 49;
  background: var(--deep-emerald); padding: 24px var(--gutter) 120px;
  flex-direction: column; gap: 4px;
  border-top: 1px solid var(--emerald-line);
}
.mobile-open .mobile-nav { display: flex; }
.mobile-nav a {
  font-family: var(--font-headline); font-size: 24px; color: var(--off-white);
  text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--emerald-line);
}
.mobile-nav a.active { color: var(--bright-gold); }

/* Sticky Channel-CTA mobil */
.sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--deep-emerald) 70%, rgba(7,31,27,0));
}
.sticky-cta .btn { width: 100%; justify-content: center; }
@media (max-width: 940px) { .sticky-cta { display: block; } body { padding-bottom: 0; } }

/* ============================================================
   FOOTER
   ============================================================ */
.werbehinweis {
  background: var(--deep-emerald); color: rgba(242,241,235,0.62);
  border-top: 1px solid var(--emerald-line);
}
.werbehinweis .wrap { padding-block: 26px; }
.werbehinweis p { font-size: 12.5px; line-height: 1.6; max-width: 900px; }
.werbehinweis .tag { color: var(--stone-grey); display: block; margin-bottom: 8px; }

.site-footer { background: var(--deep-emerald); color: rgba(242,241,235,0.72); border-top: 3px solid var(--forest-green); }
.site-footer .wrap { padding-block: 64px 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .mark { width: 30px; height: 30px; margin-bottom: 16px; }
.footer-brand .footer-mark { height: 44px; width: auto; display: block; margin-bottom: 16px; }
.footer-brand .slogan { font-family: var(--font-headline); font-style: italic; font-size: 17px; color: var(--off-white); margin-top: 14px; max-width: 240px; line-height: 1.45; }
.footer-col h4 { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bright-gold); margin: 0 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: rgba(242,241,235,0.72); text-decoration: none; font-size: 14px; transition: color .16s; }
.footer-col a:hover { color: var(--off-white); }
.footer-risk { border-top: 1px solid var(--emerald-line); margin-top: 48px; padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: baseline; }
.footer-risk p { font-size: 12px; color: rgba(242,241,235,0.5); max-width: 720px; line-height: 1.6; }
.footer-risk .copy { font-size: 12px; color: rgba(242,241,235,0.5); white-space: nowrap; }

@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Reusable: Karten, Icons, Akkordeon, Video-Tiles
   ============================================================ */
.icon-circle {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--forest-green); color: var(--bright-gold);
  display: grid; place-items: center; flex-shrink: 0;
}
.icon-circle svg { width: 22px; height: 22px; }
.bg-emerald .icon-circle, .bg-forest .icon-circle { background: rgba(244,207,72,0.12); }

/* Themen-Karten */
.card-grid { display: grid; gap: 20px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .cols-3 { grid-template-columns: 1fr; } .cols-2 { grid-template-columns: 1fr; } }

.topic-card {
  background: #fff; border: 1px solid var(--light-line); border-radius: 4px;
  padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.topic-card:hover { border-color: var(--forest-green); transform: translateY(-3px); box-shadow: 0 12px 30px -18px rgba(7,31,27,0.4); }
.topic-card h3 { font-size: 19px; }
.topic-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
.topic-card .more { margin-top: auto; color: var(--forest-green); font-weight: 600; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }

/* Video-Tiles */
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.video-grid.five { grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1000px) { .video-grid, .video-grid.five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .video-grid, .video-grid.five { grid-template-columns: 1fr; } }
.video-tile { display: flex; flex-direction: column; gap: 14px; }
.video-thumb {
  position: relative; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden;
  background: linear-gradient(150deg, var(--forest-green), #082019);
  border: 1px solid var(--emerald-line); cursor: pointer; display: block;
}
.video-thumb::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 45%, rgba(244,207,72,0.06), transparent 60%); }
.video-thumb .play {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
  background: var(--off-white); display: grid; place-items: center; transition: transform .2s ease, background .2s ease;
}
.video-thumb .play svg { width: 20px; height: 20px; margin-left: 3px; color: var(--deep-emerald); }
.video-thumb:hover .play { transform: scale(1.08); background: #fff; }
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.badge-neu {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--bright-gold); background: var(--forest-green); border: 1px solid var(--bright-gold);
  padding: 4px 8px; border-radius: 2px;
}
.video-tile h3 { font-family: var(--font-headline); font-size: 17px; color: var(--off-white); }
.video-tile .meta { font-size: 12px; font-weight: 500; color: var(--bright-gold); }

/* Akkordeon */
.faq-list { border-top: 1px solid var(--light-line); }
.faq-item { border-bottom: 1px solid var(--light-line); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 24px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  font-family: var(--font-headline); font-size: 19px; color: var(--ink); line-height: 1.35;
}
.faq-icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; margin-top: 4px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--forest-green); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.faq-icon::before { left: 0; right: 0; top: 10px; height: 2px; }
.faq-icon::after  { top: 0; bottom: 0; left: 10px; width: 2px; }
.faq-item.open .faq-icon::after { transform: scaleY(0); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.faq-a .inner { padding: 0 46px 28px 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; max-width: var(--max-reading); }

/* Pflicht-Hinweisblock */
.notice {
  border-left: 2px solid var(--forest-green); background: rgba(15,61,46,0.05);
  padding: 18px 22px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); border-radius: 0 3px 3px 0;
}
.bg-emerald .notice, .bg-forest .notice { border-left-color: var(--bright-gold); background: rgba(244,207,72,0.06); color: rgba(242,241,235,0.7); }

/* Newsletter-Form */
.nl-form { display: flex; gap: 10px; max-width: 460px; }
.nl-form input {
  flex: 1; padding: 14px 16px; border-radius: 2px; border: 1.5px solid rgba(242,241,235,0.22);
  background: rgba(242,241,235,0.06); color: var(--off-white); font-family: var(--font-body); font-size: 15px;
}
.nl-form input::placeholder { color: rgba(242,241,235,0.5); }
.nl-form input:focus-visible { border-color: var(--bright-gold); outline: 3px solid var(--bright-gold); outline-offset: 2px; }
.nl-msg { font-size: 13px; margin-top: 12px; min-height: 18px; color: var(--bright-gold); }
@media (max-width: 520px) { .nl-form { flex-direction: column; } .nl-form .btn { justify-content: center; } }

/* Hero-Chart */
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero-chart { width: 100%; aspect-ratio: 16/11; }
.chart-line { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 2s ease forwards .3s; }
.chart-bench { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 2.2s ease forwards .5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .chart-line, .chart-bench { animation: none; stroke-dashoffset: 0; } }

.legend { display: flex; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(242,241,235,0.72); }
.legend .swatch { width: 22px; height: 0; border-top: 2px solid; }
.legend .gold .swatch { border-color: var(--bright-gold); }
.legend .bench .swatch { border-top-style: dashed; border-color: rgba(242,241,235,0.55); }

/* Hero buttons row */
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* Page hero (innere Seiten) */
.page-hero { padding-block: 84px 72px; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-size: var(--text-display); line-height: 1.15; max-width: 14ch; }
.page-hero .lead { margin-top: 22px; color: rgba(242,241,235,0.82); max-width: 60ch; }

/* generische Sektionskopf */
.sec-head { margin-bottom: 44px; max-width: 60ch; }
.sec-head h2 { margin-top: 4px; }
.sec-head p { margin-top: 14px; color: var(--ink-soft); }
.bg-emerald .sec-head p, .bg-forest .sec-head p { color: rgba(242,241,235,0.72); }

/* Kontakt-Wege */
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background:#fff; border:1px solid var(--light-line); border-radius:4px; padding:28px; display:flex; flex-direction:column; gap:12px; }
.contact-card .tag { color: var(--forest-green); }
.contact-card .mail { font-family: var(--font-headline); font-size: 19px; color: var(--ink); word-break: break-all; text-decoration:none; border-bottom:1px solid var(--light-line); padding-bottom:2px; transition:border-color .18s; }
.contact-card .mail:hover { border-color: var(--forest-green); }
.contact-card p { color: var(--ink-soft); font-size:14px; }

/* Verweis-Liste */
.verweis { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:740px){ .verweis{ grid-template-columns:1fr; } }
.verweis-item { background:#fff; border:1px solid var(--light-line); border-radius:4px; padding:24px 26px; display:flex; flex-direction:column; gap:10px; }
.verweis-item .q { font-family:var(--font-headline); font-size:18px; }
.verweis-item .a { font-size:14px; color:var(--ink-soft); }

/* Kontakt-Block (Startseite, Stone Grey) */
.kontakt-row { font-family: var(--font-headline); font-size: 19px; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(20,32,28,0.18); padding-bottom: 4px; transition: border-color .18s; }
.kontakt-row:hover { border-color: var(--forest-green); }
.kontakt-desc { font-size: 13px; color: var(--ink-soft); margin-top: -6px; margin-bottom: 8px; }
@media (max-width: 800px){ .contact-block { grid-template-columns: 1fr !important; gap: 32px !important; } }

/* Fade-in on scroll */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity:1; transform:none; } }

/* ============================================================
   ERWEITERUNG · Produkt / Performance / Vermittler / News / Forms
   ============================================================ */


/* ---------- Hero-Trust-Stats ---------- */
.hero-trust { display: flex; gap: 36px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--emerald-line); flex-wrap: wrap; }
.hero-trust .t { display: flex; flex-direction: column; gap: 3px; }
.hero-trust .t b { font-family: var(--font-headline); font-size: 26px; color: var(--bright-gold); line-height: 1; }
.hero-trust .t span { font-size: 12.5px; color: rgba(242,241,235,0.62); }

/* ---------- Intro-Karten (nummeriert) ---------- */
.intro-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--light-line); border-radius: 4px; overflow: hidden; background: #fff; }
@media (max-width: 880px){ .intro-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .intro-cards { grid-template-columns: 1fr; } }
.intro-card { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; text-decoration: none; color: inherit; border-right: 1px solid var(--light-line); transition: background .18s; position: relative; }
.intro-card:last-child { border-right: 0; }
@media (max-width: 880px){ .intro-card:nth-child(2){ border-right: 0; } .intro-card{ border-bottom: 1px solid var(--light-line); } }
.intro-card:hover { background: #fafaf6; }
.intro-card .num { font-family: var(--font-headline); font-size: 13px; color: var(--stone-grey); }
.intro-card .ico { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-12); color: var(--forest-green); display: grid; place-items: center; }
.intro-card .ico svg { width: 19px; height: 19px; }
.intro-card .ititle { font-family: var(--font-headline); font-weight: 400; font-size: 18px; line-height: 1.3; }
.intro-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.intro-card::after { content: "→"; position: absolute; top: 26px; right: 26px; color: var(--forest-green); opacity: 0; transform: translateX(-4px); transition: .18s; }
.intro-card:hover::after { opacity: 1; transform: none; }

/* ---------- Split (Text + Media) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.rev .split-media { order: -1; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; gap: 36px; } .split.rev .split-media { order: 0; } }
.split-text .eyebrow { margin-bottom: 12px; }
.split-text h2 { margin-bottom: 18px; }
.split-text .lead { color: var(--ink-soft); margin-bottom: 16px; }
.split-text > p { color: var(--ink-soft); margin-bottom: 16px; }
.bg-emerald .split-text .lead, .bg-emerald .split-text > p, .bg-forest .split-text .lead, .bg-forest .split-text > p { color: rgba(242,241,235,0.78); }

/* Feature-Liste mit Häkchen */
.feature-list { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.bg-emerald .feature-list li, .bg-forest .feature-list li { color: rgba(242,241,235,0.82); }
.feature-list .fi { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-12); color: var(--forest-green); display: grid; place-items: center; margin-top: 1px; }
.bg-emerald .feature-list .fi, .bg-forest .feature-list .fi { color: var(--bright-gold); }
.feature-list .fi svg { width: 14px; height: 14px; }
.feature-list b { color: var(--ink); font-weight: 600; }
.bg-emerald .feature-list b, .bg-forest .feature-list b { color: var(--off-white); }

/* Media-Platzhalter */
.media-ph { aspect-ratio: 4/3; border-radius: 4px; border: 1px solid var(--light-line); background:
  linear-gradient(135deg, #fff, #f1efe7);
  display: grid; place-items: center; position: relative; overflow: hidden; }
.bg-stone .media-ph { border-color: rgba(20,32,28,0.14); }
.media-ph.dark { background: linear-gradient(150deg, var(--forest-green), #082019); border-color: var(--emerald-line); }
.media-ph .ph-tag { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); padding: 7px 12px; border: 1px solid var(--light-line); border-radius: 100px; background: rgba(255,255,255,.7); }
.media-ph.dark .ph-tag { color: rgba(242,241,235,.78); border-color: var(--emerald-line); background: rgba(7,31,27,.4); }
.media-ph svg.deco { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }

/* Terminal-Mockup */
.terminal { border-radius: 6px; overflow: hidden; border: 1px solid var(--emerald-line); background: #06201a; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #04140f; border-bottom: 1px solid var(--emerald-line); }
.terminal-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(242,241,235,.18); }
.terminal-bar .tt { margin-left: 10px; font-size: 12px; color: rgba(242,241,235,.6); font-weight: 500; }
.terminal-body { padding: 18px 18px 20px; }
.tk-chart { width: 100%; height: 104px; display: block; margin-bottom: 14px; }
.tline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--emerald-line); font-size: 13px; color: rgba(242,241,235,.75); }
.tline .tg { display: inline-flex; align-items: center; gap: 8px; }
.tline .pill { font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 3px; }
.pill.buy { color: var(--bright-gold); background: var(--gold-12); }
.pill.hedge { color: #8fd3b6; background: rgba(143,211,182,.12); }
.pill.close { color: var(--deep-emerald); background: var(--bright-gold); }
.tline .val { font-family: var(--font-headline); color: var(--bright-gold); }

/* ---------- Feature-Trio ---------- */
.fcard { background: #fff; border: 1px solid var(--light-line); border-radius: 4px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.bg-emerald .fcard, .bg-forest .fcard { background: var(--emerald-soft); border-color: var(--emerald-line); }
.fcard .fic { width: 48px; height: 48px; border-radius: 12px; background: var(--gold-12); color: var(--forest-green); display: grid; place-items: center; }
.bg-emerald .fcard .fic, .bg-forest .fcard .fic { color: var(--bright-gold); }
.fcard .fic svg { width: 24px; height: 24px; }
.fcard h3 { font-size: 19px; }
.bg-emerald .fcard h3 { color: var(--off-white); }
.fcard p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.bg-emerald .fcard p, .bg-forest .fcard p { color: rgba(242,241,235,.72); }

/* ---------- Performance ---------- */
.perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
@media (max-width: 900px){ .perf-grid { grid-template-columns: 1fr; } }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--emerald-line); border: 1px solid var(--emerald-line); border-radius: 4px; overflow: hidden; }
.bg-light .stat-row, .bg-stone .stat-row { background: var(--light-line); border-color: var(--light-line); }
.stat { background: var(--deep-emerald); padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.bg-light .stat, .bg-stone .stat { background: #fff; }
.stat b { font-family: var(--font-headline); font-size: 32px; color: var(--bright-gold); line-height: 1; }
.bg-light .stat b, .bg-stone .stat b { color: var(--forest-green); }
.stat span { font-size: 13px; color: var(--ink-soft); }
.bg-emerald .stat span, .bg-forest .stat span { color: rgba(242,241,235,.6); }
.equity-card { background: var(--emerald-soft); border: 1px solid var(--emerald-line); border-radius: 4px; padding: 26px; display: flex; flex-direction: column; }
.bg-light .equity-card, .bg-stone .equity-card { background: var(--deep-emerald); border: 0; }
.equity-card .ch-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.equity-card h4 { font-family: var(--font-headline); font-weight: 400; font-size: 17px; color: var(--off-white); margin: 0; }
.equity-card .ch-sub { font-size: 12px; color: rgba(242,241,235,.5); }
.equity-card .ch-legend { margin-top: 14px; font-size: 12px; color: rgba(242,241,235,.6); display: flex; gap: 8px; align-items: center; }
.equity-card .ch-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--bright-gold); display: inline-block; }

/* ---------- Vermittler / Provision ---------- */
.commission { display: flex; gap: 40px; align-items: center; background: var(--forest-green); border-radius: 6px; padding: 44px 48px; flex-wrap: wrap; }
.commission .big { font-family: var(--font-headline); font-size: clamp(72px, 11vw, 128px); color: var(--bright-gold); line-height: .85; flex-shrink: 0; }
.commission .big sup { font-size: .32em; vertical-align: super; }
.commission .cx h3 { color: var(--off-white); font-size: var(--text-h2); margin-bottom: 12px; }
.commission .cx p { color: rgba(242,241,235,.8); font-size: 15.5px; line-height: 1.7; max-width: 56ch; }

.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 760px){ .steps { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--light-line); border-radius: 4px; padding: 28px 26px; }
.step .sn { width: 40px; height: 40px; border-radius: 50%; background: var(--deep-emerald); color: var(--bright-gold); font-family: var(--font-headline); font-size: 18px; display: grid; place-items: center; margin-bottom: 16px; }
.step h4 { font-family: var(--font-headline); font-weight: 400; font-size: 19px; margin: 0 0 8px; }
.step p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
@media (max-width: 620px){ .benefits { grid-template-columns: 1fr; } }
.benefit { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.bg-emerald .benefit, .bg-forest .benefit { color: rgba(242,241,235,.82); }
.benefit .bk { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-12); color: var(--forest-green); display: grid; place-items: center; margin-top: 1px; }
.bg-emerald .benefit .bk, .bg-forest .benefit .bk { color: var(--bright-gold); }
.benefit .bk svg { width: 13px; height: 13px; }

/* ---------- Formulare (auf hell) ---------- */
.aq-form-card { background: #fff; border: 1px solid var(--light-line); border-radius: 4px; padding: 34px 32px; }
.bg-emerald .aq-form-card, .bg-forest .aq-form-card { background: var(--emerald-soft); border-color: var(--emerald-line); }
.aq-form-card h3 { font-size: 22px; margin-bottom: 6px; }
.bg-emerald .aq-form-card h3 { color: var(--off-white); }
.aq-form-card .sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; }
.bg-emerald .aq-form-card .sub, .bg-forest .aq-form-card .sub { color: rgba(242,241,235,.7); }
.aq-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px){ .aq-form .row-2 { grid-template-columns: 1fr; } }
.aq-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.aq-field label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }
.bg-emerald .aq-field label, .bg-forest .aq-field label { color: rgba(242,241,235,.6); }
.aq-field input, .aq-field select, .aq-field textarea {
  font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border-radius: 2px;
  border: 1.5px solid var(--light-line); background: #fdfdfb; color: var(--ink); width: 100%;
}
.bg-emerald .aq-field input, .bg-emerald .aq-field select, .bg-emerald .aq-field textarea,
.bg-forest .aq-field input, .bg-forest .aq-field select, .bg-forest .aq-field textarea {
  background: rgba(242,241,235,.05); border-color: rgba(242,241,235,.18); color: var(--off-white);
}
.aq-field textarea { min-height: 96px; resize: vertical; }
.aq-field input:focus, .aq-field select:focus, .aq-field textarea:focus { border-color: var(--forest-green); }
.aq-field input:focus-visible, .aq-field select:focus-visible, .aq-field textarea:focus-visible { outline: 3px solid var(--forest-green); outline-offset: 2px; }
.bg-emerald .aq-field input:focus-visible, .bg-forest .aq-field input:focus-visible, .bg-emerald .aq-field textarea:focus-visible, .bg-emerald .aq-field select:focus-visible { outline-color: var(--bright-gold); }
.bg-emerald .aq-field input:focus, .bg-forest .aq-field input:focus, .bg-emerald .aq-field textarea:focus, .bg-emerald .aq-field select:focus { border-color: var(--bright-gold); }
.aq-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 6px 0 18px; }
.bg-emerald .aq-consent, .bg-forest .aq-consent { color: rgba(242,241,235,.7); }
.aq-consent input { margin-top: 2px; accent-color: var(--forest-green); flex-shrink: 0; }
.aq-consent a { color: var(--forest-green); }
.bg-emerald .aq-consent a, .bg-forest .aq-consent a { color: var(--bright-gold); }
.form-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; }
.bg-emerald .form-note, .bg-forest .form-note { color: rgba(242,241,235,.5); }
.form-ok { display: none; background: rgba(15,61,46,.08); border-left: 2px solid var(--forest-green); padding: 14px 16px; font-size: 14px; color: var(--forest-green); border-radius: 0 3px 3px 0; margin-bottom: 18px; }
.bg-emerald .form-ok, .bg-forest .form-ok { background: var(--gold-12); border-left-color: var(--bright-gold); color: var(--bright-gold); }
.form-ok.show { display: block; }

/* ---------- News / Aktuelles ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 900px){ .news-grid { grid-template-columns: 1fr; max-width: 540px; } }
.news-card { background: #fff; border: 1px solid var(--light-line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -20px rgba(7,31,27,.4); }
.news-card .nimg { aspect-ratio: 16/10; }
.news-card .nbody { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card .ncat { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest-green); }
.news-card h3 { font-size: 19px; line-height: 1.3; }
.news-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.news-card .nfoot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.news-card .ndate { font-size: 12.5px; color: var(--stone-grey); }
.news-card .read { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--forest-green); text-decoration: none; }
.news-card .read:hover { text-decoration: underline; }

/* Kontakt-Karten (Icon-Reihe) */
.contact-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.ccard { display: flex; gap: 16px; align-items: center; }
.ccard .ci { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-12); color: var(--forest-green); display: grid; place-items: center; flex-shrink: 0; }
.bg-emerald .ccard .ci, .bg-forest .ccard .ci { color: var(--bright-gold); }
.ccard .ci svg { width: 20px; height: 20px; }
.ccard b { display: block; font-size: 13px; }
.ccard span, .ccard a { font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.bg-emerald .ccard span, .bg-emerald .ccard a { color: rgba(242,241,235,.78); }
.ccard a:hover { color: var(--forest-green); }
.bg-emerald .ccard a:hover { color: var(--bright-gold); }

.split-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 880px){ .split-two { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Barrierefreiheit: kräftigerer Sekundärtext auf Stone (AA) ---------- */
.bg-stone { --ink-soft: #383F3B; }

/* Video-Kachel als fokussierbarer Button */
.video-thumb:focus-visible { outline: 3px solid var(--bright-gold); outline-offset: 3px; }

/* YouTube-Einwilligung */

/* ============================================================
   Ergänzungen zum Livegang (Oktober 2026)
   ============================================================ */

/* Sprungziele nicht unter dem fixierten Kopfbereich verstecken */
[id] { scroll-margin-top: 88px; }

/* Lange deutsche Wörter in Überschriften dürfen umbrechen statt die Seite zu verbreitern */
h1, h2, h3, h4 { overflow-wrap: break-word; }
.split-two > *, .contact-block > *, .ccard > div { min-width: 0; }
.ccard a, .contact-card .mail, .kontakt-row { overflow-wrap: anywhere; }

/* Hero-Kennzahlen bleiben auf Desktop in einer Zeile */
.hero-trust { gap: 24px 32px; }

/* Newsletter, solange Brevo noch nicht angebunden ist */
.nl-soon { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.nl-soon p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: rgba(242,241,235,0.82); }

/* Vermittler-Formular: Fehlermeldung + unsichtbares Spam-Schutzfeld */
.form-err { display: none; background: rgba(163,57,43,.07); border-left: 2px solid #a3392b; padding: 14px 16px; font-size: 14px; line-height: 1.55; color: #7d2a20; border-radius: 0 3px 3px 0; margin-bottom: 18px; }
.form-err.show { display: block; }
.form-err a { color: inherit; text-decoration: underline; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-ok:focus { outline: none; }
.aq-form button[disabled] { opacity: .65; cursor: progress; }

/* Themen-Seite: Abschnitte je Cluster */
.cluster + .cluster { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--light-line); }
.cluster h2 { margin-top: 6px; }
.cluster p:not(.tag) { margin-top: 16px; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.cluster .feature-list { margin-top: 18px; }
.cluster .links { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; }

/* 404-Seite */
.notfound-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* Mobilmenü: backdrop-filter am Header macht ihn zum Bezugsrahmen des fixierten Menüs –
   auf kleinen Bildschirmen abschalten, damit das Menü den ganzen Bildschirm füllt */
@media (max-width: 940px) {
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--deep-emerald); }
  .mobile-nav { overflow-y: auto; overscroll-behavior: contain; }
  .mobile-open .sticky-cta { display: none; }
  .site-footer .wrap { padding-bottom: 112px; }  /* Platz für den festen YouTube-Button */
}
/* Kopfzeile zwischen Tablet und Desktop: nichts umbrechen */
.nav-main a, .header-cta { white-space: nowrap; }
@media (max-width: 1120px) and (min-width: 941px) { .nav-main { gap: 20px; } .header-cta { padding-inline: 16px; } }

/* Zugeklappte FAQ-Antworten nicht per Tab erreichbar */
.faq-a { visibility: hidden; transition: max-height .3s ease, visibility 0s linear .3s; }
.faq-item.open .faq-a { visibility: visible; transition: max-height .3s ease, visibility 0s linear 0s; }

/* hidden-Attribut hat immer Vorrang (z. B. bei .btn oder Formularen mit eigenem display) */
[hidden] { display: none !important; }

/* YouTube-Button im Mobilmenü: Button-Stil statt Menü-Link-Stil (Kontrast) */
.mobile-nav a.btn { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--deep-emerald); padding: 15px 22px; border-bottom: 0; }

/* Videolisten: Ladezustand und Ersatztext */
.video-tile.skeleton .video-thumb { cursor: default; animation: aq-pulse 1.6s ease-in-out infinite; }
.video-tile.skeleton h3, .video-tile.skeleton .meta { display: block; border-radius: 3px; background: rgba(242,241,235,0.08); color: transparent; animation: aq-pulse 1.6s ease-in-out infinite; }
.video-tile.skeleton h3 { width: 85%; }
.video-tile.skeleton .meta { width: 45%; }
@keyframes aq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .video-tile.skeleton .video-thumb, .video-tile.skeleton h3, .video-tile.skeleton .meta { animation: none; } }
.yt-fallback { grid-column: 1 / -1; margin: 0; color: rgba(242,241,235,0.72); font-size: 15px; }
.yt-fallback a { color: var(--bright-gold); text-decoration: underline; }