/* ============================================================
   Barbara Weidmann – barbaraweidmann.de
   Design-System v2 (Green-Welt, 08.07.2026)
   Drei Farben: Tiefschwarz #111214 · Warmweiß #F7F4EF · Electric Green #39FF14
   Schrift: Fraunces (Headlines) · Albert Sans (Text) – selbst gehostet
   ============================================================ */

:root{
  --black:#111214;
  --white:#F7F4EF;
  --amber:#39FF14;
  --amber-print:#0C5A2B;          /* gedunkeltes Grün für Text-Akzente auf hell – 7:1 AAA */
  --amber-text:#0C5A2B;           /* Fließtext-Links auf hell */
  --surface-1:#1A1B1E;            /* leicht erhöhte Fläche auf dunkel */
  --line-dark:rgba(247,244,239,.14);
  --line-light:rgba(17,18,20,.14);
  --fg-dark-2:rgba(247,244,239,.82);
  --fg-light-2:rgba(17,18,20,.78);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Albert Sans', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw:1120px;
  --glow-strong:0 0 18px rgba(57,255,20,.75);
  --glow-soft:0 0 12px rgba(57,255,20,.45);
  --hero-particle-color:#39FF14;
  --hero-particle-opacity:.88;
  --hero-particle-width:1480px;
  --hero-particle-height:620px;
  --hero-particle-x:50%;
  --hero-particle-y:47%;
  --hero-particle-count:12200;
  --hero-particle-speed:.42;
  --hero-particle-band-height:420;
  --hero-particle-size:.46;
  --hero-particle-glow:2.4;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; font-family:var(--sans); font-size:17px; line-height:1.65;
  background:var(--white); color:var(--black);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Grundelemente ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.12; margin:0 0 .5em;
  overflow-wrap:break-word; hyphens:auto;}
h1{font-size:clamp(38px,6vw,68px); letter-spacing:-.01em;}
h2{font-size:clamp(28px,4vw,44px);}
h3{font-size:clamp(20px,2.4vw,26px);}
p{margin:0 0 1em;}
a{color:var(--amber-print);}
.stage-light a{color:var(--amber-text);}  /* auf hell dunklerer Ton – 5,15:1 statt 3,18:1 */
.stage-dark a{color:var(--amber); text-shadow:var(--glow-soft);}  /* Gegenstück: globales a{} ist auf --amber-print (dunkles Druck-Grün) gesetzt, das auf Schwarz nur 2,24:1 hat – fällt durch */
.stage-dark a.btn{color:var(--black); text-shadow:none;}  /* Fix 09.07.: .stage-dark a war spezifischer als .btn und machte den Button-Text grün auf grünem Hintergrund unsichtbar */
img{max-width:100%; height:auto;}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:2px;}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--amber); color:var(--black);
  padding:10px 16px; font-weight:700; z-index:100;}
.skip-link:focus{left:12px; top:12px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.dots .d{color:var(--amber);}
.stage-dark .dots .d{text-shadow:var(--glow-strong);}
.stage-light .dots .d{color:var(--amber-print); text-shadow:none;}

/* ---------- Bühnen ---------- */
.stage-dark{background:var(--black); color:var(--white);}
.stage-dark p{color:var(--fg-dark-2);}
.stage-light{background:var(--white); color:var(--black);}
.stage-light .eyebrow{color:var(--amber-print); text-shadow:none;}
.stage-light blockquote.t::before,
.stage-light .card blockquote.t::before{color:var(--amber-print); text-shadow:none;}
.stage-light p{color:var(--fg-light-2);}
section{padding:72px 0;}

/* ---------- Navigation ---------- */
.nav{position:sticky; top:0; z-index:50; background:var(--black); border-bottom:1px solid var(--line-dark);}
.nav::before{content:""; display:block; height:3px; background:var(--amber); box-shadow:var(--glow-strong);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{font-family:var(--serif); font-size:24px; color:var(--white); text-decoration:none; font-weight:700; letter-spacing:-.01em;}
.brand .d{color:var(--amber); text-shadow:var(--glow-soft);}
.nav-links{display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.nav-links a{color:var(--fg-dark-2); text-decoration:none; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; padding:6px 2px;}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--amber); text-shadow:var(--glow-soft);}

/* ---------- Buttons ---------- */
.btn{display:inline-block; background:var(--amber); color:var(--black); font-weight:700;
  font-size:16px; padding:14px 28px; border-radius:4px; text-decoration:none; border:0; cursor:pointer;
  box-shadow:0 2px 16px rgba(57,255,20,.45);}
.btn:hover{box-shadow:0 2px 24px rgba(57,255,20,.7);}
/* Abgrenzung (06.07.): Auf hellen Flächen schwarze Buttons - flaches Gelb auf Creme ist AITI-Look; das Amber-Leuchten gehört auf die dunkle Bühne. */
.stage-light .btn{background:var(--black); color:var(--white); box-shadow:none;}
.stage-light .btn:hover{box-shadow:0 2px 14px rgba(17,18,20,.35);}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.cards3.c2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .cards3.c2{grid-template-columns:1fr;} }
.btn-ghost{display:inline-block; background:transparent; font-weight:600; font-size:15px;
  padding:12px 24px; border-radius:4px; text-decoration:none; cursor:pointer;}
.stage-dark .btn-ghost{color:var(--white); border:1px solid var(--line-dark);}
.stage-light .btn-ghost{color:var(--black); border:1px solid var(--line-light);}
.btn-note{font-size:14px; opacity:.75; margin-top:10px;}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:26px 0 0;}
.hero-actions .btn,
.hero-actions .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:240px; max-width:100%; min-height:48px; padding:0 28px; font-size:16px;
  line-height:1.2; font-weight:700; text-align:center;
}
.hero-proof{font-size:13.5px; line-height:1.55; opacity:.78; margin-top:16px; max-width:42em;}

/* ---------- Hero ---------- */
.hero{position:relative; padding:0; overflow:hidden;}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:64px 24px 0;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:32px; align-items:end;
  position:relative; isolation:isolate;}
.hero-copy{padding-bottom:72px; position:relative; z-index:1;}
.eyebrow{font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--amber); text-shadow:var(--glow-soft); display:inline-block; margin-bottom:18px;}
.hero .subline{font-size:clamp(17px,2vw,20px); max-width:34em;}
.hero-visual{position:relative; z-index:1; align-self:end; min-height:340px;}
.hero-visual img{display:block; width:100%; max-width:420px; margin:0 auto; position:relative;
  z-index:1; filter:drop-shadow(0 10px 24px rgba(0,0,0,.4));}
/* Partikelwolke (22.07.2026, aus Codex-Test übernommen) ersetzt den alten CSS-Glow: Canvas-Animation
   statt statischem Verlauf, siehe hero-particles.js. Organisches Band, dekorativ, ohne Einfluss aufs Layout. */
.hero-mist-cloud{position:absolute; left:var(--hero-particle-x); top:var(--hero-particle-y);
  width:min(var(--hero-particle-width), 112vw); height:var(--hero-particle-height);
  transform:translate(-50%,-50%); z-index:0; pointer-events:none; opacity:var(--hero-particle-opacity);
  mix-blend-mode:screen;}
.hero-particle-band{display:block; width:100%; height:100%;}
.hero-motion-toggle{
  position:absolute; right:18px; bottom:16px; z-index:3;
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(247,244,239,.28); border-radius:50%;
  background:rgba(17,18,20,.72); color:var(--fg-dark-2);
  font:700 13px/1 var(--sans); cursor:pointer; opacity:.58;
  transition:opacity .18s ease, border-color .18s ease, background .18s ease;
}
.hero-motion-toggle:hover,
.hero-motion-toggle:focus-visible{opacity:1; border-color:rgba(247,244,239,.62); background:rgba(17,18,20,.92);}
.hero-motion-toggle[hidden]{display:none;}
@media (prefers-reduced-motion:reduce){.hero-motion-toggle{transition:none;}}
@media (max-width:820px){
  :root{
    --hero-particle-opacity:.56;
    --hero-particle-width:980px;
    --hero-particle-height:500px;
    --hero-particle-y:52%;
    --hero-particle-count:4600;
    --hero-particle-speed:.36;
    --hero-particle-band-height:295;
    --hero-particle-size:.42;
    --hero-particle-glow:2;
  }
  .hero-inner{grid-template-columns:1fr;}
  .hero-copy{padding-bottom:24px;}
  .hero-visual{min-height:280px;}
  .hero-visual img{max-width:300px;}
}
@media (max-width:520px){
  :root{
    --hero-particle-opacity:.42;
    --hero-particle-width:780px;
    --hero-particle-height:400px;
    --hero-particle-y:55%;
    --hero-particle-count:2100;
    --hero-particle-speed:.30;
    --hero-particle-band-height:205;
    --hero-particle-size:.38;
    --hero-particle-glow:0;
  }
}

/* ---------- Zweispaltiges Baustein-Layout (Text + Bild/Formular) ----------
   Ersetzt vier bisher inline definierte Grids (ueber-mich.html, bewegtbild.html, canva.html, kontakt.html),
   die alle dieselbe Luecke hatten: kein Umbruch auf schmalen Bildschirmen, dadurch zwei gequetschte Spalten
   auf dem Handy. Barbaras Rueckmeldung 30.07.2026 ("muss ueberall responsiv sein") – site-weiter Fix statt
   Einzelreparatur nur auf ueber-mich.html. Spaltenverhaeltnis/Abstand/Ausrichtung bleiben pro Seite ueber
   CSS-Variablen einstellbar, damit sich am bisherigen Aussehen sonst nichts aendert. Breakpoint 820px,
   gleicher Wert wie beim Haupt-Hero (.hero-inner), damit das Stapelverhalten sitegweit konsistent ist. */
.split-2col{display:grid; grid-template-columns:var(--split-cols, minmax(0,1fr) minmax(0,1fr));
  gap:var(--split-gap, 32px); align-items:var(--split-align, stretch);}
@media (max-width:820px){ .split-2col{grid-template-columns:1fr;} }

/* KI-Transparenz auf der Über-mich-Seite: Überschrift und Fließtext teilen
   dieselbe optische Spalte und brechen dadurch ruhiger und zusammengehörig um. */
.ai-transparency-copy{max-width:46rem;}

/* ---------- Karten (drei Felder) ---------- */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px;}
@media (max-width:900px){ .cards3{grid-template-columns:1fr;} }
/* Alle drei Wow-Kacheln auf der Startseite gleich gross (Barbaras Wunsch, 30.07.2026): gleiche Spaltenbreite
   kommt schon vom Grid, hier zusaetzlich dasselbe Seitenverhaeltnis 1:1 fuer Video- und KI-Check-Kachel.
   Der Canva-Slider (.ba-slider-frame) ist bereits eigenstaendig 1:1, hier nicht nochmal noetig. */
.cards3 .media-ph{aspect-ratio:1/1;}
.card{background:#FDFCF9; border:1px solid var(--line-light); border-radius:6px;
  padding:26px 24px 24px; position:relative; display:flex; flex-direction:column; gap:8px;}
.card::before{content:""; position:absolute; top:0; left:0; width:110px; height:3px; background:var(--amber); box-shadow:var(--glow-strong);}
.card h3{margin:6px 0 4px;}
.card p{font-size:15.5px; margin:0 0 12px;}
.card .card-link{margin-top:auto; font-weight:700; text-decoration:none; color:var(--black);}
.card .card-link::after{content:" →"; color:var(--amber-print);}
.course-card .course-meta{margin-top:auto;}
.course-card .card-link{margin-top:8px;}
.stage-dark .card{background:var(--surface-1); border-color:var(--line-dark);}
.stage-dark .card h3{color:var(--white);}
.stage-dark .card .card-link{color:var(--white);}

/* Kurs-Karten: Zugpferd */
.card.lead{grid-column:1 / -1;}
@media (min-width:901px){ .card.lead{padding:34px 32px;} .card.lead h3{font-size:30px;} }

/* ---------- Platzhalter-Chip ---------- */
.chip{display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  border:1.5px dashed var(--amber-text); color:var(--amber-text);
  border-radius:4px; padding:4px 10px; margin:4px 0;}
.stage-dark .chip{border-color:var(--amber); color:var(--amber);}
/* ---------- Themen-Chips: fuer kurze Themenlisten statt Flattersatz-Umbruch mitten im Thema ---------- */
.tag-list{display:flex; flex-wrap:wrap; gap:9px 10px; list-style:none; margin:0 0 1em; padding:0;}
.tag-list li{font-size:14.5px; line-height:1.4; color:var(--fg-light-2); border:1px solid var(--line-light);
  border-radius:999px; padding:6px 14px; white-space:normal;}
.stage-dark .tag-list li{color:var(--fg-dark-2); border-color:var(--line-dark);}
.media-ph{border:1.5px dashed var(--line-light); border-radius:6px; aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  color:var(--fg-light-2); font-size:14px; text-align:center; padding:16px;}
.stage-dark .media-ph{border-color:var(--line-dark); color:var(--fg-dark-2);}

/* ---------- Presse-Liste (referenzen.html) ----------
   Ersetzt eine rohe <ul> mit Standard-Bulletpoints und Titel+Quelle in einer Zeile – wirkte laut Barbara
   "linkisch" (30.07.2026). Jetzt redaktioneller Index-Look: Titel fett, Quelle/Jahr klein und gedaempft
   darunter, duenne Haarlinie zwischen den Eintraegen (gleiches Trennlinien-Prinzip wie beim Laufband). */
.press-list{list-style:none; margin:22px 0 0; padding:0; max-width:46em;}
.press-list li{padding:16px 0; border-bottom:1px solid var(--line-dark);}
.press-list li:first-child{border-top:1px solid var(--line-dark);}
.press-list a{font-weight:700; font-size:16.5px; color:var(--white); text-decoration:none;}
.press-list a:hover{color:var(--amber); text-shadow:var(--glow-soft);}
.press-list .src{display:block; margin-top:4px; font-size:13.5px; color:var(--fg-dark-2);}
.press-list .src a{font-size:inherit; font-weight:600;}
.press-summary-intro{max-width:44em; font-size:18px;}
.press-summary-list{display:grid; gap:22px; max-width:52em; margin-top:30px;}
.press-summary{border-top:1px solid var(--line-light); padding-top:24px; scroll-margin-top:100px;}
.press-summary h2{font-size:clamp(24px,3vw,32px); margin-bottom:8px;}
.press-summary-meta{font-size:14px; color:var(--fg-light-2); margin-bottom:14px;}
.press-summary-actions{font-size:14.5px; font-weight:700; margin-top:14px;}

/* ---------- Duotone (Bild/Video farblich vereinheitlichen, ohne das Original zu bearbeiten) ---------- */
.mono{position:relative; overflow:hidden; isolation:isolate; background:var(--black);}
.mono img, .mono video{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);}
.media-ph.mono{padding:0;}

/* ---------- Laufband Referenzen ---------- */
/* ---------- Referenzen-Matrix (statisch, ersetzt frueheres Laufband seit 03.08.2026) ---------- */
.ref-matrix{margin-top:32px;}
.ref-matrix-intro{max-width:42em; font-size:15px; color:var(--fg-light-2); margin-bottom:24px;}
.ref-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px;}
@media (max-width:720px){.ref-grid{grid-template-columns:1fr;}}
.ref-block h3{font-family:var(--sans); font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--fg-light-2); margin:0 0 10px; padding-bottom:10px;
  border-bottom:1px solid var(--line-light);}
.ref-block p{font-size:15px; line-height:1.75; color:var(--fg-light-2); margin:0;}
.stage-light .ref-more-link{color:var(--black); font-weight:700; text-decoration:none;}
.stage-light .ref-more-link:hover{text-decoration:underline; text-underline-offset:3px;}

/* ---------- Badge ---------- */
.badge{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line-light);
  border-radius:6px; padding:12px 18px; font-weight:600; font-size:15px; background:#FDFCF9;}
.badge .dot-badge{width:10px; height:10px; border-radius:50%; background:var(--amber);
  box-shadow:var(--glow-soft); flex-shrink:0;}

/* ---------- Formular-Rückmeldung (kontakt.html) ---------- */
.form-notice{border:1px solid var(--line-light); border-radius:6px; padding:16px 20px;
  margin:0 0 22px; font-size:15px; max-width:520px;}
.form-notice.is-success{border-left:4px solid var(--amber-text);}
.form-notice.is-error{border-left:4px solid var(--black);}
.form-error{margin:8px 0 0; color:#7A1A14; font-size:14px; font-weight:700;}
.form-error[hidden]{display:none;}

/* ---------- Freebie ---------- */
.freebie{background:#FDFCF9; border:1px solid var(--line-light); border-left:4px solid var(--amber);
  border-radius:6px; padding:32px; max-width:720px;}
.freebie form{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 10px;}
.freebie input[type=email]{flex:1 1 240px; padding:13px 14px; font-size:16px; font-family:var(--sans);
  border:1px solid rgba(17,18,20,.3); border-radius:4px; background:#fff;}
.freebie small{display:block; font-size:13.5px; color:var(--fg-light-2);}

/* ---------- Zitate / Testimonials ---------- */
blockquote.t{font-family:var(--serif); font-size:clamp(18px,2.2vw,22px); font-style:italic;
  line-height:1.5; margin:0 0 10px; max-width:38em;}
blockquote.t::before{content:"„"; color:var(--amber); font-size:1.6em; font-style:normal;
  line-height:0; vertical-align:-.35em; margin-right:2px;}
.stage-dark blockquote.t::before{text-shadow:var(--glow-strong);}
.t-cite{font-size:14.5px; font-style:normal; opacity:.8;}

/* Testimonials als Karten (08.07.): gleiche Sprache wie .card, damit Zitate nicht wie
   eine lose Liste wirken, sondern wie ein bewusst gestalteter Block. Anführungszeichen
   als eigener Block VOR dem Zitat (nicht frei positioniert) – das deutsche „ sitzt
   tief in seiner Zeichenbox, mit position:absolute kollidierte es je nach Schriftmetrik
   mit der ersten Zeile. Als Blockelement bekommt es eine eigene Zeile, kein Overlap mehr. */
.card blockquote.t{margin:0; max-width:none; font-size:clamp(16.5px,1.9vw,19px);}
.card blockquote.t::before{content:"„"; display:block; font-size:2.3em; line-height:1;
  font-style:normal; color:var(--amber); margin:0 0 6px;}
.card .t-cite{margin-top:auto; padding-top:2px;}

/* ---------- Quiz ---------- */
.quiz-heading{max-width:760px;}
.quiz{max-width:760px;}
.quiz-q{background:#FDFCF9; border:1px solid var(--line-light); border-radius:6px;
  padding:26px 26px 20px; margin-bottom:20px;}
.quiz-q h3{font-size:19px; font-family:var(--sans); font-weight:700; margin:0 0 10px;}
.quiz-question{font-size:15.5px; line-height:1.55; margin:0 0 18px;}
.quiz-question + .quiz-question{margin-top:-8px;}
.quiz-injection-example{margin:0 0 18px; padding:12px 14px; border-left:3px solid var(--amber);
  background:rgba(57,255,20,.06); color:var(--white); font-size:15px; line-height:1.5;}
.quiz-q h3:focus-visible, .quiz-result h3:focus-visible{
  outline:0; text-decoration-line:underline; text-decoration-color:var(--amber);
  text-decoration-thickness:2px; text-underline-offset:6px;
}  /* Programmatisch fokussierte Überschrift: Orientierung ohne störenden Rahmen um den ganzen Textblock. */

/* ---------- Videobeschreibung (bewegtbild.html) ---------- */
.video-example{width:100%; max-width:420px; justify-self:center;}
.video-example .video-embed-wrap{margin:0 auto;}
.video-transcript{max-width:280px; margin:16px auto 0; border-top:1px solid var(--line-dark); padding-top:12px;}
.video-transcript summary{font-size:14.5px; font-weight:700; color:var(--white); cursor:pointer; text-align:center;}
.video-transcript p{font-size:14px; margin:10px 0 0;}
.quiz-opt{display:block; width:100%; text-align:left; font-family:var(--sans); font-size:15.5px;
  background:#fff; color:var(--black); border:1px solid var(--line-light); border-radius:5px;
  padding:12px 14px; margin:8px 0; cursor:pointer;}  /* Fix 10.09.: color fehlte - Buttons erben die Textfarbe nicht, mobile Safari faerbte die Antworten im Systemblau */
.quiz-opt:hover{border-color:var(--amber-print);}
.quiz-opt.correct{border-color:#1E7B34; background:#EAF4EC;}
.quiz-opt.wrong{border-color:#B3261E; background:#F9ECEB;}
.quiz-fb{font-size:14.5px; margin-top:10px; padding:10px 12px; border-radius:4px; display:none;}
.quiz-fb.show{display:block;}
.quiz-fb.ok{background:#EAF4EC; color:#14521F;}
.quiz-fb.no{background:#F9ECEB; color:#7A1A14;}
.quiz-fb-extra{display:block; margin-top:10px;}
.quiz-fb-takeaway{font-weight:700;}
.quiz-fb-source{font-size:.92em; font-style:italic; opacity:.88;}
.quiz-progress{font-size:14px; font-weight:700; letter-spacing:.03em; margin:4px 0 8px;}
.quiz-bar{height:4px; background:var(--line-dark); border-radius:2px; overflow:hidden; margin-bottom:24px;}
.quiz-bar-fill{height:100%; width:0; background:var(--amber); transition:width .3s ease;}
@media (prefers-reduced-motion:reduce){ .quiz-bar-fill{transition:none;} }
.quiz-next{margin-top:14px;}
.quiz-next[hidden]{display:none;}  /* Bugfix 13.07.: .btn-ghost setzt display:inline-block (Author-Origin), das ueberstimmt sonst das UA-Default [hidden]{display:none} - Weiter-Button war unsichtbar-gedacht, aber tatsaechlich anklickbar ohne Antwort */
.quiz-result{background:var(--surface-1); border:1px solid var(--line-dark); border-radius:6px; padding:26px; margin-top:4px;}
.quiz-result h3{color:var(--white); margin-top:0; font-size:19px;}
.quiz-result p{font-size:15.5px;}
.quiz-replay{margin-top:12px;}
#felder, #quiz-h, #wand, #ki, #slider-h, #beispiel{scroll-margin-top:100px;}  /* Sprungmarken nicht hinter dem Sticky-Header verstecken. */
@media (max-width:700px){
  #felder, #quiz-h, #wand, #ki, #slider-h, #beispiel{scroll-margin-top:170px;}
}

/* ---------- Quiz-Thumb (Startseite: gestaltete Vorschau auf den KI-Check, verlinkt in den Quiz-Abschnitt der KI-Seite) ---------- */
.quiz-thumb{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:12px;
  aspect-ratio:auto; text-align:left;
  min-height:208px; padding:22px;
  background:radial-gradient(circle at 80% 20%, rgba(57,255,20,.10), transparent 42%), #26251F;  /* Testfarbe 29.07.2026 – weniger tiefschwarz als --surface-1 (#1A1B1E), warmer Unterton statt Kühlschwarz. Zurück zu --surface-1, falls es nicht überzeugt. */
  border:1px solid var(--line-dark); border-radius:8px;
  color:var(--white); text-decoration:none;
  transition:border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.quiz-thumb:hover, .quiz-thumb:focus-visible{
  border-color:var(--amber); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.quiz-thumb:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

.quiz-thumb-topline{display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.72rem; line-height:1; font-weight:700; letter-spacing:.09em; text-transform:uppercase;}
.quiz-thumb-label{color:var(--amber);}
.quiz-thumb-count{color:rgba(247,244,239,.58);}

.quiz-thumb-progress{display:block; width:100%; height:3px; overflow:hidden; border-radius:999px; background:rgba(247,244,239,.12);}
.quiz-thumb-progress-fill{display:block; width:17%; height:100%; background:var(--amber); border-radius:inherit;}

.quiz-thumb-q{display:block; max-width:15em; margin-top:5px; color:var(--white);
  font-family:var(--serif); font-size:clamp(1.25rem,1.8vw,1.55rem); line-height:1.12; font-weight:700;}

.quiz-thumb-topics{display:block; color:rgba(247,244,239,.68); font-size:.88rem; line-height:1.4;}

.quiz-thumb-cta{display:block; margin-top:auto; color:var(--amber); font-size:.95rem; line-height:1.3; font-weight:700;}
.quiz-thumb:hover .quiz-thumb-cta, .quiz-thumb:focus-visible .quiz-thumb-cta{text-decoration:underline; text-underline-offset:3px;}

.quiz-thumb-meta{display:block; color:rgba(247,244,239,.48); font-size:.76rem; line-height:1.35;}

@media (max-width:700px){
  /* Startseiten-Wowfelder auf Smartphones kompakt halten. Die allgemeine
     Quadratregel der drei Karten ist dort zu dominant; beim Quiz ließ sie
     außerdem CTA und Zeitangabe aus der Kachel laufen. */
  .stage-light[aria-labelledby="felder"] .cards3 .media-ph,
  .stage-light[aria-labelledby="felder"] .cards3 .ba-teaser{width:min(100%, 300px); margin-inline:auto;}
  .stage-light[aria-labelledby="felder"] .cards3 .quiz-thumb{
    aspect-ratio:auto; min-height:0; height:auto; overflow:hidden;
    padding:18px; gap:10px;
  }
  .quiz-thumb-progress,
  .quiz-thumb-topics{display:none;}
  .quiz-thumb-q{max-width:none; margin-top:2px; font-size:1.2rem;}
  .quiz-thumb-cta{margin-top:4px;}
}

/* ---------- Vorher-Nachher-Slider (Startseite, Canva-Karte) ---------- */
.ba-slider{display:flex; flex-direction:column; gap:8px;}
.ba-slider-frame{position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
  border:1px solid var(--line-light); background:var(--black); cursor:ew-resize; touch-action:pan-y;}
/* :focus-visible statt :focus-within: Das Skript setzt bei jedem Mausklick zusaetzlich Fokus auf den
   versteckten Regler (damit Tastatur und Maus synchron bleiben) – mit :focus-within erschien der gruene
   Rahmen dadurch auch bei reiner Mausbedienung, nicht nur bei Tastaturnutzung. Barbaras Rueckmeldung
   30.07.2026. :has() + :focus-visible zeigt ihn nur noch bei echtem Tastatur-Fokus. */
.ba-slider-frame:has(#canva-ba-range:focus-visible){outline:3px solid var(--amber); outline-offset:2px;}
.ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none;}
.ba-before{clip-path:inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); will-change:clip-path;
  filter:grayscale(1);}  /* 30.07.2026: Vorher-Seite entsaettigt, Nachher bleibt in voller Markenfarbe – zeigt "generisch" vs. "on-brand" noch deutlicher und haelt Fremdfarben (das Blau im Vorher-Foto) von der Seite fern. */
/* Der Griff selbst ist eine Nullbreiten-Linie an --ba-pos. Ein ueber die Rahmenbreite hinaus
   verschobenes Vollbreiten-Element erzeugte auf sehr schmalen Viewports horizontalen Seiten-Overflow. */
.ba-handle{position:absolute; top:0; bottom:0; left:var(--ba-pos, 50%); width:0;
  pointer-events:none; will-change:left;}
.ba-handle::before{content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px;
  background:var(--amber); box-shadow:var(--glow-soft);}
.ba-handle::after{content:"↔"; position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  width:32px; height:32px; border-radius:50%; background:var(--amber); color:var(--black);
  font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--glow-strong);}
/* Regler-Ansatz 30.07.2026 verworfen: ein ueber die ganze Bildflaeche gestreckter <input type="range">
   reagierte in dieser Geometrie in mehreren Anlaeufen weiterhin spuerbar verzoegert (auch mit normal
   grossem, nur unsichtbarem Thumb). Jetzt uebernimmt reines JS mit Pointer-Events + requestAnimationFrame
   das Ziehen (siehe ba-slider.js) – der native Regler ist nur noch per .sr-only verstecktes Tastatur-Fallback,
   keine Sondergroesse/-position mehr noetig. Sichtbar bleibt weiterhin ausschliesslich .ba-handle. */

/* ---------- Slider-Teaser (Startseite, Canva-Karte) ----------
   30.07.2026: Startseiten-Kachel ist kein eigenstaendiger, ziehbarer Slider mehr (Barbaras Rueckmeldung –
   der "Gag" soll auf canva.html passieren, nicht schon vorher verpuffen; ausserdem zeigte canva.html bis
   dahin noch die alte erfundene Demo statt der echten Bilder). Stattdessen: statischer Link-Teaser mit
   sanfter Pendel-Animation, volle Interaktivitaet lebt exklusiv auf canva.html (#slider-h). */
.ba-teaser{cursor:pointer; text-decoration:none;}
.ba-teaser .ba-slider-frame{cursor:pointer; touch-action:auto;
  transition:transform 160ms ease, box-shadow 160ms ease;}
.ba-teaser:hover .ba-slider-frame, .ba-teaser:focus-visible .ba-slider-frame{
  transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.16);}
.ba-teaser:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
/* Auf der Startseite bleibt die Vorschau bewusst statisch. Die echte Interaktion
   beginnt erst auf canva.html, damit nicht mehrere Elemente gleichzeitig um Aufmerksamkeit werben. */

/* Klickbare Bewegtbild-Vorschau auf der Startseite – gleiches dezentes
   Interaktionssignal wie beim Canva-Teaser. */
.media-teaser{display:block; cursor:pointer; text-decoration:none; border-radius:6px;}
.media-teaser .media-ph{transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;}
.media-teaser:hover .media-ph,
.media-teaser:focus-visible .media-ph{transform:translateY(-2px); border-color:var(--amber-print); box-shadow:0 10px 28px rgba(0,0,0,.16);}
.media-teaser:focus-visible{outline:2px solid var(--amber-print); outline-offset:3px;}

/* ---------- Video-Einbettung (Bewegtbild, "So sieht das aus") ----------
   31.07.2026: Start- und Schlussbild grau, waehrend des Abspielens in Farbe. Zweite Fassung (31.07., nach
   Barbaras Rueckmeldung): Statt auf den natuerlichen letzten Videoframe zu vertrauen (zeigt zufaellig,
   wo der Clip aufhoert, nicht das Titelbild), liegt ein eigener Cover-Button ueber dem Video. Der bleibt
   sichtbar, bis "play" feuert, und kommt bei "ended" wieder zurueck – zeigt danach also garantiert wieder
   das echte Startbild (Orgel in der Kirche), nicht die Pfeifen-Nahaufnahme vom Clip-Ende. Gesteuert per
   .is-playing auf dem Wrapper (video-embed.js). */
.video-embed-wrap{position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line-dark); background:var(--black);}
.video-embed{display:block; width:100%; height:100%; object-fit:cover;}
.video-embed-poster{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:pointer; display:block;}
.video-embed-poster img{display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);}
.video-embed-poster::after{content:"▶"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:var(--amber); color:var(--black);
  font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-strong);}
.video-embed-wrap.is-playing .video-embed-poster{display:none;}

/* ---------- Timeline ---------- */
.timeline{list-style:none; margin:32px 0 0; padding:0 0 0 28px; position:relative; max-width:720px;}
.timeline::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--amber), rgba(57,255,20,.15));}
.timeline li{position:relative; padding:0 0 26px 22px;}
.timeline li::before{content:""; position:absolute; left:-27px; top:7px; width:12px; height:12px;
  border-radius:50%; background:var(--amber); box-shadow:var(--glow-soft);}
.timeline .tl-year{font-weight:700; font-size:14px; letter-spacing:.06em; color:var(--amber-print);
  text-transform:uppercase; display:block; margin-bottom:2px;}
.timeline p{font-size:15.5px; margin:0;}

/* Alte erfundene SVG-Vorher/Nachher-Demo (.ba/.ba-after/.ba-label/.ba-divider) am 30.07.2026 entfernt –
   canva.html zeigt jetzt denselben echten, funktionsfaehigen Slider wie die Startseiten-Kachel (.ba-slider). */

/* ---------- Formular ---------- */
.form{max-width:560px; display:grid; gap:14px;}
.form label{font-weight:700; font-size:15px;}
.form input, .form textarea{width:100%; padding:13px 14px; font-size:16px; font-family:var(--sans);
  border:1px solid rgba(17,18,20,.3); border-radius:4px; background:#fff;}
.form input[type="checkbox"]{width:20px; height:20px; flex:0 0 auto;}
.form textarea{min-height:140px; resize:vertical;}

/* ---------- Feedbackwand-Mock ---------- */
.wall{position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line-dark);
  background:var(--surface-1); aspect-ratio:16/7; display:flex; align-items:center; justify-content:center;}
.wall-grid{position:absolute; inset:0; display:grid; grid-template-columns:repeat(8,1fr); gap:6px; padding:10px; opacity:.35;}
.wall-grid div{background:var(--white); border-radius:2px; opacity:.85;}
.wall-cta{position:relative; z-index:2; text-align:center;}

/* ---------- Abschluss + Footer ---------- */
/* Trennlinie + Abstand fuer den wiederkehrenden "Frag mich"-Abschluss: Der folgt sitegweit fast immer direkt
   auf einen weiteren stage-dark-Abschnitt (Feedbackwand, Stimmen, Presse ...) – ohne Kante liefen beide
   Schwarzflaechen optisch ineinander. Barbaras Rueckmeldung 30.07.2026, Beispiel referenzen.html. Systemisch
   gefixt statt nur an einer Stelle, da derselbe Effekt auch auf index.html/ki.html/bewegtbild.html auftrat. */
.closing{text-align:center; border-top:1px solid var(--line-dark); padding-top:56px;}
.closing h2{font-size:clamp(32px,5vw,52px);}
.footer{background:var(--black); color:var(--fg-dark-2); border-top:1px solid var(--line-dark);
  padding:36px 0; font-size:14px;}
.footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.footer a{color:var(--fg-dark-2);}
.footer .made{font-size:13px; opacity:.8;}

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

/* ===== Feedbackwand-Viewer (06.07.) ===== */
.wand-viewer{position:relative;overflow:hidden;aspect-ratio:7010/5564;background:#0B0C0E;border:1px solid var(--line-dark);border-radius:6px;cursor:grab;touch-action:none;}
.wand-viewer.grabbing{cursor:grabbing;}
.wand-viewer img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;max-width:none;}
.wv-ctrl{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;z-index:5;}
.wv-ctrl button{width:44px;height:44px;font-size:20px;border-radius:4px;border:1px solid var(--line-dark);background:rgba(17,18,20,.85);color:var(--white);cursor:pointer;font-family:var(--sans);}
.wv-ctrl button:hover,.wv-ctrl button:focus-visible{border-color:var(--amber);color:var(--amber);}
.wv-hint{position:absolute;left:12px;bottom:12px;font-size:12.5px;color:var(--fg-dark-2);background:rgba(17,18,20,.7);padding:4px 10px;border-radius:4px;margin:0;z-index:5;}
.wall-teaser{display:block;position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line-dark);}

/* ---------- Sehr schmale Displays ----------
   Lange deutsche Zusammensetzungen und Mailadressen duerfen das Layout nicht verbreitern. */
@media (max-width:520px){
  .wrap{padding-left:18px; padding-right:18px;}
  section{padding-top:56px; padding-bottom:56px;}
  h1{font-size:clamp(32px,11vw,44px);}
  h2{font-size:clamp(25px,8.5vw,34px);}
  a, p, li{overflow-wrap:anywhere;}
  .hero-actions{align-items:stretch;}
  .hero-actions .btn,
  .hero-actions .btn-ghost{width:100%;}
  .tag-list{gap:7px;}
  .tag-list li{max-width:100%;}
  .wv-hint{top:12px; right:12px; bottom:auto; text-align:center;}
}

@media (max-width:360px){
  .nav-inner{padding:12px 18px;}
  .nav-links{column-gap:10px; row-gap:8px;}
  .nav-links a{font-size:12px; letter-spacing:.04em; padding-top:7px; padding-bottom:7px;}
}

/* ---------- Portrait: weiche Kante statt hartem Freisteller-Rand ---------- */
.portrait-fade{-webkit-mask-image:radial-gradient(ellipse 74% 82% at 50% 40%, black 52%, transparent 94%); mask-image:radial-gradient(ellipse 74% 82% at 50% 40%, black 52%, transparent 94%);}