/* ════════════════════════════════════════════════════════════
   theme.css – Hochkant/Mobile-Variante (9:16, Canvas 540×960)
   Basiert auf der Landscape-Vorlage (_zu-kopieren/_template/theme.css),
   NICHT automatisch synchron halten – eigenständige Kopie.
   Schicht 1: Basis-Tokens  |  Schicht 2: Komponenten
   Schicht 3: Erscheinungsvarianten
   ════════════════════════════════════════════════════════════ */

/* ── SCHICHT 1: BASIS-TOKENS ────────────────────────────────── */
:root {
  --accent:      #df002a;
  --accent-dark: #9e001e;

  --dark:    #1a1a1a;
  --gray:    #555;
  --light:   #f4f4f4;
  --border:  #e0e0e0;
  --green:   #1a8a4a;
  --lblue:   #0A66C2;

  /* Schriftgrößen – auf 540px-Breite getrimmt, ×1.44 vergrößert auf Kundenwunsch */
  --fs-h2:     50px;
  --fs-h3:     36px;
  --fs-body:   33px;
  --fs-li:     32px;
  --fs-card:   29px;
  --fs-small:  20px;
  --fs-caption:23px;

  --font-family: system-ui, sans-serif;
}

/* ── SCHICHT 2: KOMPONENTEN ─────────────────────────────────── */

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

/* Pillarboxing-Hintergrund: füllt den Leerraum, den Reveal außerhalb
   der skalierten 540×960-Bühne lässt (breiter Desktop-Viewport,
   Smartphone im Querformat) – statt Schwarz/Weiß ein dezenter
   Markenverlauf. */
html, body {
  background: radial-gradient(circle at 50% 50%, var(--accent-dark) 0%, #0d0d12 75%);
}

.reveal { font-family: var(--font-family); }
.reveal h1 { font-size: var(--fs-h1, 63px); }
.reveal h1, .reveal h2, .reveal h3, .reveal h4 { font-family: var(--font-family); }

.reveal .slides > section,
.reveal .slides > section > section {
  box-sizing: border-box !important;
  overflow:   hidden      !important;
}

/* Vertikale Ausrichtung pro Folie (Editor: "Vertikale Ausrichtung"-Auswahl).
   Standard ist Mitte; .valign-top/.valign-bottom überschreiben gezielt.
   WICHTIG: Reveal selbst (reveal.css) erzwingt bei center:true (unser
   Swipe-Standard) per `.reveal.center .slides section{min-height:0!important}`
   eine Nullhöhe – ohne erzwungene Gegenhöhe hätte die Folie keinen Spielraum,
   in dem oben/mittig/unten überhaupt sichtbar wäre. Deshalb hier exakt
   dieselbe Selektor-Kombination zusätzlich bedienen (gleiche Spezifität,
   aber später in der Kaskade als reveal.css = wir gewinnen den Tie-Break). */
.reveal .slides section,
.reveal.center .slides section {
  min-height: 960px      !important;
  display: flex          !important;
  flex-direction: column !important;
  justify-content: center!important;
}
.reveal .slides section.valign-top,
.reveal.center .slides section.valign-top {
  justify-content: flex-start !important;
}
.reveal .slides section.valign-bottom,
.reveal.center .slides section.valign-bottom {
  justify-content: flex-end !important;
}

/* Folienwrapper */
.slide-content {
  padding: 28px 24px 60px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  max-height: 960px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* .img-markers wächst in den verbleibenden Platz der Folie (nach der
   Überschrift) – Bild bleibt object-fit:contain, wird also nie beschnitten,
   nutzt aber die volle verfügbare Höhe statt nur seine natürliche Bildgröße. */
.slide-content .img-markers {
  flex: 1;
  min-height: 0;
  display: flex;
}
.slide-content .img-markers img {
  flex: 1;
  min-height: 0;
}
.full-center {
  display: flex          !important;
  flex-direction: column !important;
  align-items: center    !important;
  justify-content: center!important;
  text-align: center     !important;
  padding: 0             !important;
}
.block-header {
  display: flex          !important;
  flex-direction: column !important;
  align-items: center    !important;
  justify-content: center!important;
  text-align: center     !important;
  padding: 0             !important;
}
.bh-num   { font-size: 150px; font-weight: 900; line-height: 1; color: white !important; opacity: .50; margin-bottom: -10px; }
.bh-title { font-size: 120px; font-weight: 700; color: white !important; margin: 0 0 10px; }
.bh-time  { font-size: 23px;  color: rgba(255,255,255,.6) !important; margin: 0; }
.bh-light .bh-num   { color: rgba(0,0,0,.65) !important; }
.bh-light .bh-title { color: rgba(0,0,0,.85) !important; }
.bh-light .bh-time  { color: rgba(0,0,0,.55) !important; }

/* Impressum/Datenschutz-Fußzeile: Farbe je nach Folienhintergrund (logo-swap.js) */
#site-footer a    { color: white !important; }
#site-footer span { color: rgba(255,255,255,.4) !important; }
#site-footer.footer-light a    { color: rgba(0,0,0,.7) !important; }
#site-footer.footer-light span { color: rgba(0,0,0,.35) !important; }

/* Utility-Klassen */
.title-content { max-width: 480px; margin: 0 auto; }
.logo-row      { display: flex; justify-content: center; align-items: center; gap: 28px; margin-bottom: 18px; opacity: .75; }
.accent-line   { width: 56px; height: 4px; background: var(--accent); border-radius: 3px; margin: 0 auto 16px; }
.video-slide-inner { height: 100%; display: flex; flex-direction: column; padding: 22px 18px; }

/* Typografie */
.reveal h1, .reveal h2, .reveal h3,
.reveal p,  .reveal li, .reveal td, .reveal th {
  text-transform: none;
  letter-spacing: normal;
}
.reveal h2 {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.15;
  color: var(--dark);
  border-bottom: 3px solid var(--accent);
  padding-bottom: 8px; margin-bottom: 18px;
}
.reveal h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--accent); margin: 0 0 8px; }
.reveal p  { font-size: var(--fs-body); line-height: 1.45; color: var(--dark); margin: 0 0 6px; }
.reveal li { font-size: var(--fs-li); line-height: 1.45; margin-bottom: 6px; }
.reveal blockquote {
  width: 100%; margin: 0; padding: 12px 16px;
  background: var(--light); border-left: 5px solid var(--accent);
  border-radius: 0 6px 6px 0; box-shadow: none;
  font-style: italic; font-size: 29px; color: var(--dark);
}
.source { font-size: var(--fs-caption) !important; color: #999; font-style: italic; }

.reveal .progress span   { background: var(--accent); }
.reveal .controls button { color: var(--accent); }

/* Vollbild-Button */
#btn-fullscreen {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; padding: 8px 18px;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 26px; color: rgba(255,255,255,.75);
  font-size: var(--fs-caption); cursor: pointer; letter-spacing: .3px;
  transition: background .2s, color .2s;
}
#btn-fullscreen:hover { background: rgba(255,255,255,.22); color: white; }

/* Steuerungsfolie Buttons */
.ctrl-btn {
  padding: 9px 20px; border-radius: 26px;
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.7); font-size: 23px; cursor: pointer;
  transition: background .2s, color .2s;
}
.ctrl-btn:hover   { background: rgba(255,255,255,.2); color: white; }
.ctrl-btn--active { background: rgba(255,255,255,.25); color: white; border-color: rgba(255,255,255,.6); }

/* Layouts – auf 540px Breite gestapelt statt nebeneinander */
.two-col,
.two-col-4060,
.two-col-5545,
.three-col {
  display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%;
}

/* Cards */
.card { background: var(--light); border-radius: 8px; padding: 16px 18px; border-top: 4px solid var(--accent); width: 100%; }
.card h3           { font-size: 32px; color: var(--accent); }
.card p, .card li  { font-size: var(--fs-card); color: var(--gray); margin: 3px 0; }
.card.lb           { border-top-color: var(--lblue); }
.card.lb h3        { color: var(--lblue); }
.card.gn           { border-top-color: var(--green); }
.card.gn h3        { color: var(--green); }

/* Vergleichsspalten */
.col-yes { background: rgba(10,102,194,.07); border: 2px solid rgba(10,102,194,.4); border-radius: 8px; padding: 16px 18px; }
.col-no  { background: rgba(223,0,42,.06);  border: 2px solid rgba(223,0,42,.3);   border-radius: 8px; padding: 16px 18px; }
.col-yes .ch { font-size: var(--fs-card); font-weight: 700; color: var(--lblue); margin: 0 0 8px; }
.col-no  .ch { font-size: var(--fs-card); font-weight: 700; color: var(--gray);  margin: 0 0 8px; }
.col-yes li, .col-no li { font-size: var(--fs-card); }

/* Merksatz */
.merksatz   { background: var(--accent); border-radius: 8px; padding: 16px 22px; margin-top: 16px; width: 100%; }
.merksatz p { color: white !important; font-size: 36px !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.25; }

/* Highlight / Info / Warn / Tipp */
.highlight   { background: var(--accent); border-radius: 8px; padding: 14px 20px; margin-top: 12px; }
.highlight p { color: white !important; font-size: var(--fs-body) !important; font-weight: 700; margin: 0; }
.info        { background: rgba(10,102,194,.07); border-left: 4px solid var(--lblue); border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 10px 0; }
.info p      { color: #003f80 !important; font-size: var(--fs-card) !important; margin: 0; }
.warn        { background: rgba(223,0,42,.06); border: 2px solid rgba(223,0,42,.45); border-radius: 8px; padding: 12px 16px; margin: 8px 0; }
.warn p      { font-size: var(--fs-card) !important; margin: 0; }
.tipp        { background: rgba(10,102,194,.07); border-left: 4px solid var(--lblue); border-radius: 0 6px 6px 0; padding: 10px 14px; margin-top: 10px; }
.tipp p      { color: #003f80 !important; font-size: 26px !important; margin: 0; }

/* Balkendiagramm */
.bc-row       { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bc-lbl       { font-size: 23px; color: var(--gray); width: 76px; flex-shrink: 0; }
.bc-track     { flex: 1; background: var(--border); border-radius: 99px; height: 20px; overflow: hidden; }
.bc-fill      { height: 100%; border-radius: 99px;
                background: linear-gradient(90deg, var(--accent), #ff4d6d);
                display: flex; align-items: center; justify-content: flex-end;
                padding-right: 6px; font-size: 19px; color: white; font-weight: 700; }
.bc-row.top .bc-fill { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.bc-row.top .bc-lbl  { color: var(--accent); font-weight: 700; }

/* Tortendiagramm */
.pie {
  width: 190px; height: 190px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(
    var(--lblue)  0deg 208.8deg,
    #777          208.8deg 280.8deg,
    #aaa          280.8deg 320.4deg,
    #ccc          320.4deg 352.8deg,
    var(--accent) 352.8deg 360deg
  );
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  margin: 0 auto 14px;
}
.legend    { list-style: none; padding: 0; margin: 0; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-card); margin-bottom: 10px; }
.ldot      { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.lpct      { font-weight: 700; font-size: 32px; min-width: 54px; }

/* Steps */
.step       { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.snum       { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: white;
              font-weight: 900; font-size: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.scnt strong { font-size: var(--fs-body); color: var(--dark); }
.scnt p      { font-size: var(--fs-small); color: var(--gray); margin: 2px 0 0; }

/* Funnel */
.f-step  { padding: 12px 16px; border-radius: 8px; margin-bottom: 10px; width: 100%; }
.f1      { background: rgba(223,0,42,.08);  border-left: 5px solid var(--accent); }
.f2      { background: rgba(85,85,85,.07);  border-left: 5px solid #888; }
.f3      { background: rgba(26,138,74,.08); border-left: 5px solid var(--green); }
.ft      { font-size: 29px; font-weight: 700; margin: 0 0 4px; }
.f1 .ft  { color: var(--accent); }
.f2 .ft  { color: #555; }
.f3 .ft  { color: var(--green); }
.f-step p  { font-size: var(--fs-small); color: var(--gray); margin: 2px 0; }
.f-step em { font-size: 22px; color: #999; }

/* 2x2 Raster */
.g22     { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.gc      { background: var(--light); border-radius: 8px; padding: 14px 16px; }
.gc.a    { background: rgba(223,0,42,.06); border: 1px solid rgba(223,0,42,.2); }
.gtag    { font-size: 17px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); font-weight: 700; margin: 0 0 6px; display: block; }
.gc p    { font-size: var(--fs-card); margin: 2px 0; }

/* Checkliste */
.cl         { list-style: none; padding: 0; }
.cl li      { padding: 8px 0 8px 28px; position: relative; font-size: 29px; border-bottom: 1px solid var(--border); }
.cl li:last-child { border-bottom: none; }
.cl li::before    { content: '\2610'; position: absolute; left: 0; top: 9px; color: #aaa; font-size: 22px; }
.cl li.sh         { font-weight: 700; color: var(--accent); font-size: 22px; padding-top: 12px; border-bottom: none; }
.cl li.sh::before { content: ''; }

/* X-Kacheln */
.xcard    { background: rgba(223,0,42,.05); border: 2px solid rgba(223,0,42,.25); border-radius: 8px; padding: 16px 18px; }
.xcard h3 { font-size: 32px; color: var(--accent); margin: 0 0 6px; }
.xcard p  { font-size: var(--fs-card); color: var(--gray); margin: 3px 0; }

/* Hook-Beispiele */
.hk-bad, .hk-ok   { padding: 10px 14px; border-radius: 0 6px 6px 0; margin-bottom: 10px; }
.hk-bad            { background: rgba(223,0,42,.06); border-left: 4px solid rgba(223,0,42,.4); }
.hk-ok             { background: rgba(26,138,74,.07); border-left: 4px solid var(--green); }
.hklbl             { font-size: 17px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; margin: 0 0 4px; display: block; }
.hk-bad .hklbl     { color: var(--accent); }
.hk-ok  .hklbl     { color: var(--green); }
.hk-bad p, .hk-ok p { font-size: var(--fs-card) !important; margin: 0; color: var(--dark); }

/* Prompt */
.prompt { background: #1e1e2e; border-radius: 8px; padding: 16px 18px;
          font-family: 'Consolas','Courier New',monospace;
          font-size: 22px; color: #cdd6f4; line-height: 1.6; width: 100%; }
.plbl   { font-family: 'Segoe UI',Arial,sans-serif; font-size: 17px; color: #666;
          text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px; display: block; }
.ph     { color: #89b4fa; }
.kw     { color: #cba6f7; }

/* Bild/Video-Platzhalter */
.imgph       { background: var(--light); border: 2px dashed #ccc; border-radius: 8px;
               padding: 18px 14px; text-align: center;
               display: flex; flex-direction: column; align-items: center; justify-content: center; }
.imgph .ico  { font-size: 30px; opacity: .3; margin-bottom: 6px; }
.imgph p     { color: #bbb !important; font-size: 20px !important; margin: 2px 0; }
.imgph code  { font-size: 17px; color: #ccc; }

/* Tabelle */
.reveal table                        { font-size: 26px; width: 100%; border-collapse: collapse; }
.reveal table th                     { background: var(--accent); color: white; padding: 8px 10px; text-align: left; font-size: 23px; }
.reveal table td                     { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.reveal table tr:nth-child(even) td  { background: var(--light); }

/* Pfeil */
.arrow    { text-align: center; color: var(--accent); font-size: 29px; line-height: 1; margin: 3px 0; }

/* Tastatur-Taste (für Shortcut-Anzeige) */
kbd {
  background: rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.18);
  border-radius: 4px; padding: 1px 6px; font-family: inherit;
  font-size: .88em; font-weight: 600; letter-spacing: .01em;
}

/* Warn-Box gross */
.big-warn    { background: rgba(223,0,42,.06); border: 2px solid rgba(223,0,42,.4);
               border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; width: 100%; }
.big-warn p  { font-size: 29px !important; margin: 0; font-weight: 600; }
.big-warn .wicon { font-size: 29px; margin-right: 8px; }

/* Logo — persistent unten-links, kleiner und randnäher als Landscape */
#logo-wrap {
  position: fixed;
  bottom: 6px;
  left: 14px;
  height: 48px;
  z-index: 100;
  pointer-events: none;
}
#logo-wrap img {
  height: 48px;
  width: auto;
  display: block;
}

/* Text effects — toggled by editor via CSS class */
.glow {
  text-shadow: 0 0 10px var(--lblue, #0A66C2), 0 0 20px var(--lblue, #0A66C2);
}
.glow-gold {
  text-shadow: 0 0 10px #F5C842, 0 0 20px #F5C842;
}
.gradient-text {
  background: linear-gradient(90deg, var(--lblue, #0A66C2), #F5C842);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pulse {
  animation: pulse-anim 2s ease-in-out infinite;
}
@keyframes pulse-anim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.neon-box {
  border: 2px solid var(--accent, #df002a);
  box-shadow: 0 0 8px var(--accent, #df002a), inset 0 0 8px rgba(223,0,42,0.1);
  border-radius: 6px;
  padding: 0.4em 0.8em;
}

/* Info-Marker auf Bild (neuer Folientyp Hochkant) – Bild mit
   object-fit:contain (kein Beschnitt) + prozentual positionierte
   Marker relativ zum Bild-Container, schrittweise per .fragment. */
.img-markers {
  position: relative;
  width: 100%;
}
.img-markers img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.img-markers .marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-weight: 900;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* ── SCHICHT 3: ERSCHEINUNGSVARIANTEN ──────────────────────── */
body.dark-mode {
  --r-background-color: #1a1a2e;
  --r-main-color:       rgba(255,255,255,.87);
  --r-heading-color:    rgba(255,255,255,.87);
  --dark:   rgba(255,255,255,.87);
  --gray:   rgba(255,255,255,.55);
  --light:  rgba(255,255,255,.07);
  --border: rgba(255,255,255,.12);
}
/* Reveal setzt die Folien-Hintergrundfarbe pro Folie auf .slide-background
   (eigenes Element hinter .slides) – die CSS-Variable allein auf body reicht
   nicht, weil .reveal/.slide-background die Farbe sonst aus dem white-Theme
   erben. Deshalb hier explizit erzwingen, sonst bleiben Folien im Dark Mode weiß. */
body.dark-mode .reveal,
body.dark-mode .reveal .slide-background {
  background-color: var(--r-background-color) !important;
}
body.dark-mode .reveal h2         { color: rgba(255,255,255,.87); border-bottom-color: var(--accent); }
body.dark-mode .reveal p          { color: rgba(255,255,255,.87); }
body.dark-mode .reveal li         { color: rgba(255,255,255,.87); }
body.dark-mode .reveal blockquote { background: rgba(255,255,255,.07); color: rgba(255,255,255,.87); }
body.dark-mode .card              { background: rgba(255,255,255,.07); }
body.dark-mode .gc                { background: rgba(255,255,255,.07); }
body.dark-mode .scnt strong       { color: rgba(255,255,255,.87); }
body.dark-mode .col-yes           { background: rgba(10,102,194,.18); border-color: rgba(10,102,194,.4); }
body.dark-mode .col-no            { background: rgba(223,0,42,.14);   border-color: rgba(223,0,42,.35); }
body.dark-mode .col-yes .ch       { color: #89b4fa; }
body.dark-mode .col-no  .ch       { color: rgba(255,255,255,.55); }
body.dark-mode .col-yes li,
body.dark-mode .col-no  li        { color: rgba(255,255,255,.87) !important; }
body.dark-mode .info              { background: rgba(10,102,194,.2);  border-left-color: #89b4fa; }
body.dark-mode .info p            { color: #89b4fa !important; }
body.dark-mode .tipp              { background: rgba(10,102,194,.2);  border-left-color: #89b4fa; }
body.dark-mode .tipp p            { color: #89b4fa !important; }
body.dark-mode .warn              { background: rgba(223,0,42,.18);   border-color: rgba(223,0,42,.5); }
body.dark-mode .warn p            { color: rgba(255,255,255,.87) !important; }
body.dark-mode table td           { border-bottom-color: rgba(255,255,255,.12); color: rgba(255,255,255,.87); }
body.dark-mode table tr:nth-child(even) td { background: rgba(255,255,255,.05); }
body.dark-mode .hk-bad p,
body.dark-mode .hk-ok  p          { color: rgba(255,255,255,.87) !important; }
body.dark-mode .big-warn          { background: rgba(223,0,42,.14); }
body.dark-mode .big-warn p        { color: rgba(255,255,255,.87) !important; }
body.dark-mode .f-step.f2         { background: rgba(85,85,85,.25); }
/* Block-Trenner-Text bleibt im Dark Mode hell, auch wenn data-background-color
   eine var()-Referenz statt eines Hex-Werts ist (siehe logo-swap.js-Fix). */
body.dark-mode .block-header .bh-num,
body.dark-mode .block-header .bh-title,
body.dark-mode .block-header .bh-time { color: white !important; }

body.neutral               { --accent: #444444; --accent-dark: #222222; }
body.neutral .reveal h2    { border-bottom-color: #444; }