/* GDO Vortragsseiten · gemeinsame Gestaltung (Stil B, Referenz Glücks-Check)
   Jede Vortragsseite unter /<thema>/ nutzt diese Datei und tauscht nur Inhalte. */
@font-face{font-family:"Anton";src:url(/assets/anton-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(/assets/poppins-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url(/assets/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#333333; --surface:#3b3b3b; --surface-2:#424242; --line:#4e4e4e; --line-2:#5c5c5c;
  --fg:#ffffff; --soft:#e4e4e4; --muted:#a8a8a8; --gold:#c19b2f; --gold-light:#d8b352; --gold-wash:#2a2a2a; --ink-on-gold:#262626;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --body:"Poppins","Helvetica Neue",Arial,sans-serif;
  --edge:6px; --r:4px; --stage:1120px; --read:780px;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;padding-inline:max(20px,calc(var(--edge) + 16px))}
body::before{content:"";position:fixed;left:0;top:0;bottom:0;width:var(--edge);background:var(--gold);z-index:5}
img{max-width:100%}
.stage{max-width:var(--stage);margin-inline:auto}
.read{max-width:var(--read)}
h1,h2,h3,.btn,.big{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,10vw,72px);line-height:1.08}
h2{font-size:clamp(30px,5vw,46px)}
h3{font-size:clamp(22px,3.2vw,28px)}
.g{color:var(--gold)}
.nw{white-space:nowrap}
p{margin:0}
.eyebrow{font-weight:500;font-size:12.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--gold-light)}
.lead{font-size:clamp(17px,2vw,20px);color:var(--soft);max-width:56ch}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:1.6}
a{color:var(--gold-light)}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px 0}
header.top img{height:28px;width:auto;display:block}
section{padding-block:clamp(56px,8vw,104px)}
.rule{border-top:1px solid var(--line)}
.head{display:grid;gap:12px;margin-bottom:clamp(26px,4vw,40px)}

/* Einstieg mit Video */
.hero>*{min-width:0}
.hero{display:grid;gap:20px;padding-block:clamp(36px,6vw,80px) clamp(56px,8vw,96px)}
.hero-copy{display:grid;gap:18px;max-width:880px}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}
.meta span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.meta span::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
/* Bühne: Headline links, Foto rechts, wie das Vortrags-Thumbnail. Beim Abspielen wird die ganze Karte zum Player. */
.stagecard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.stagecard .panel{display:grid;gap:20px;align-content:center;padding:clamp(24px,3.4vw,48px);container-type:inline-size;min-width:0}
.stagecard h1{font-size:min(58px,10.9cqi);line-height:1.3}
.stagecard .lead{font-size:clamp(16px,1.5vw,19px)}
.stagecard .btn svg{flex:none}
.stagecard .media{position:relative;display:block;min-height:100%;aspect-ratio:1018/1080;background:var(--surface)}
.stagecard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.playpill{position:absolute;left:50%;bottom:clamp(20px,4%,40px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:14px;padding:8px 26px 8px 8px;border-radius:999px;background:var(--gold);color:var(--ink-on-gold);white-space:nowrap;transition:background .15s,transform .2s}
.playpill i{width:48px;height:48px;border-radius:50%;background:var(--ink-on-gold);color:var(--gold);display:grid;place-items:center}
.playpill i svg{margin-left:3px}
.playpill b{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.04em}
.stagecard .media:hover .playpill,.stagecard .media:focus-visible .playpill{background:var(--gold-light);transform:translateX(-50%) scale(1.03)}
.stagecard .playbtn{justify-self:start;gap:14px;padding:0 28px 0 10px;min-height:60px;border-radius:999px}
.playbtn i{width:42px;height:42px;border-radius:50%;background:var(--ink-on-gold);color:var(--gold);display:grid;place-items:center}
.playbtn i svg{margin-left:3px}
@media (min-width:761px){
  .stagecard .playpill{opacity:0;transform:translateX(-50%) translateY(6px);transition:opacity .2s,transform .2s}
  .stagecard .media:hover .playpill,.stagecard .media:focus-visible .playpill{opacity:1;transform:translateX(-50%)}
}
@media (max-width:760px){.stagecard .playbtn{display:none}}
.stagecard.playing{grid-template-columns:1fr}
.stagecard.playing .panel{display:none}
.stagecard .player{position:relative;aspect-ratio:16/9;width:100%;background:#000}
.stagecard .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pcredit br{display:none}
.pcredit{position:absolute;left:12px;top:12px;font-size:11.5px;line-height:1.35;color:var(--soft);background:rgba(51,51,51,.72);padding:4px 10px;border-radius:var(--r);white-space:nowrap}
.dlcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-top:-8px;padding:14px 20px 14px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);text-decoration:none;max-width:520px}
.dlcard i{width:48px;height:48px;border-radius:var(--r);background:var(--gold-wash);border:1px solid var(--line-2);color:var(--gold-light);display:grid;place-items:center}
.dlcard span{display:grid;gap:2px;min-width:0}
.dlcard b{font-weight:500;font-size:16px}
.dlcard small{font-size:13px;color:var(--muted);white-space:nowrap}
.dlcard em{font-style:normal;font-family:var(--display);font-size:17px;letter-spacing:.04em;color:var(--gold-light)}
.dlcard:hover{border-color:var(--gold)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border:0;border-radius:var(--r);background:var(--gold);color:var(--ink-on-gold);font-size:20px;letter-spacing:.04em;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s}
.btn:hover{background:var(--gold-light)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:var(--line);color:var(--muted);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--gold)}
.link{background:none;border:0;color:var(--muted);font:inherit;font-size:15px;cursor:pointer;padding:12px 4px;text-decoration:underline;text-underline-offset:4px;min-height:48px}
.link:hover{color:var(--fg)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.tap{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--gold-light)}
.hand{width:18px;height:18px;flex:none}

/* Kerngedanken: drei Karten, gleich hoch */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,24px)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:18px;min-width:0;min-height:440px}
.card .src{margin-top:auto}
.card .say{font-size:clamp(23px,2.4vw,28px);line-height:1.2;color:var(--fg)}
.card .no{font-family:var(--display);font-size:15px;letter-spacing:.12em;color:var(--muted)}
.card .big{font-size:clamp(40px,4.6vw,54px);line-height:1}
.card p.t{color:var(--soft)}
.chips{display:grid;gap:8px}
.chip{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg);font:inherit;font-size:15px;cursor:pointer;text-align:left;line-height:1.35;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.chip:hover{border-color:#7a7a7a}}
.chip[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash)}
@keyframes pulse{0%,100%{border-color:var(--line-2)}50%{border-color:var(--gold)}}
.pulse .chip{animation:pulse 1.8s ease-in-out infinite}
.answer{display:grid;gap:6px}
.answer .big{color:var(--fg)}
.steps{display:grid;gap:14px}
.steps .chip{font-weight:500}
.chips.two{grid-template-columns:1fr 1fr}
.chips.plain .chip{justify-content:center;text-align:center}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:28px 1fr;grid-template-areas:"n l" "n b";column-gap:10px;row-gap:4px;align-items:center}
.steps li b{grid-area:n;font-family:var(--display);font-weight:400;font-size:18px;color:var(--muted)}
.steps li span{grid-area:l;font-weight:500;font-size:14px;white-space:nowrap}
.steps li i{grid-area:b;display:block;height:14px;border-radius:2px;background:var(--line-2);width:calc(var(--k) * 24%);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.steps li:first-child b{color:var(--gold-light)}
.steps li:first-child i{background:var(--gold)}
.steps[data-size="gross"] li i{width:calc(var(--k) * 100%)}
.steps li:nth-child(2) i{transition-delay:.08s}.steps li:nth-child(3) i{transition-delay:.16s}.steps li:nth-child(4) i{transition-delay:.24s}
.lines{display:grid;gap:8px}
.lines div{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:6px;font-size:15px;color:var(--soft)}
.lines b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold);min-width:16px}
.src{font-size:12.5px;color:var(--muted)}

/* Aufgabe */
.task{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.form{display:grid;gap:16px}
label.f{display:grid;gap:8px;font-weight:500;font-size:15px}
label.f span{display:flex;align-items:center;gap:10px}
label.f b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--gold)}
input[type=text],input[type=date]{width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;font:inherit;font-weight:300;font-size:16px;line-height:1.4}
input::placeholder{color:#8e8e8e}
input[type=text]:focus{border-color:var(--gold);outline:none}
.stepbox{display:grid;gap:12px;min-width:0}
.stepbox+.stepbox{padding-top:20px;border-top:1px solid var(--line)}
.stepbox .steph{font-weight:500;font-size:18px;display:grid;gap:4px;white-space:nowrap}
.stepno{font-weight:500;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-light)}
.note{font-size:15px;color:var(--soft);background:var(--bg);border-left:3px solid var(--gold);padding:12px 16px;border-radius:0 var(--r) var(--r) 0}
.hint{font-size:14px;color:var(--muted)}

/* Blatt: am Bildschirm als verkleinerte A4-Seite (echtes Layout, maßstäblich), gedruckt in voller Größe */
.sheetwrap{display:grid;gap:12px;justify-items:center;align-self:start;position:sticky;top:24px}
.pagebox{--pw:300px;--s:.46875;width:var(--pw);height:calc(var(--pw) * 1.4142);position:relative;overflow:hidden;border-radius:3px;background:#fff;outline:1px solid var(--line-2);outline-offset:6px}
.sheet{position:absolute;left:0;top:0;width:640px;height:905px;transform:scale(var(--s));transform-origin:0 0;background:#fff;color:#333;padding:36px 40px 28px 44px;display:flex;flex-direction:column;gap:12px;border-left:10px solid var(--gold)}
.sheet .sh-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet .sh-top img{height:30px;width:auto}
.sheet .sh-sub{font-size:14px;color:#6b6b6b}
.sheet h3{font-size:38px;color:#333;line-height:1.1}
.sheet .why{display:grid;gap:4px;background:#f6f4ee;padding:12px 16px}
.sheet .sh-k{font-weight:500;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#8a6d1f}
.sheet .why ol{margin:0;padding-left:20px;display:grid;gap:2px;font-size:16px;font-weight:500}
.sheet .why li.empty{color:#b5b5b5;font-weight:300}
.sheet .act{display:grid;gap:6px}
.sheet .act p{font-weight:500;font-size:16px;line-height:1.3;border-bottom:1px solid #d6d6d6;padding-bottom:4px;overflow-wrap:anywhere}
.sheet .act p.empty{color:#b5b5b5;font-weight:300}
.grid42{display:grid;grid-template-columns:auto repeat(7,1fr);gap:2px 4px;align-items:center}
.grid42 em{font-style:normal;font-size:11px;color:#8a8a8a;padding-right:6px;white-space:nowrap}
.grid42 i{display:block;height:11px;border:1px solid #b9b9b9;border-radius:2px}
.sheet .sh-foot{margin-top:auto;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#6b6b6b;border-top:1px solid #e2e2e2;padding-top:10px}
.sheet .sh-foot b{font-weight:500;color:#333}

/* Nächster Schritt */
.next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,44px)}
.next>div{display:grid;gap:12px}

/* Autor */
.author{display:grid;grid-template-columns:200px auto;grid-template-areas:"img eb" "img who" "img btn";column-gap:40px;row-gap:12px;align-items:center;justify-content:start}
.author .au-eb{grid-area:eb;align-self:end}
.author img{grid-area:img;width:200px;height:200px;border-radius:50%;object-fit:cover;display:block}
.author .who{grid-area:who}
.author .pod{grid-area:btn;justify-self:start;align-self:start}
.author .who{display:grid;gap:2px}
.author .who strong{font-weight:500;font-size:clamp(18px,1.8vw,22px)}
section:has(>.author){padding-block:clamp(40px,6vw,72px)}
.author .who .muted{font-size:clamp(14px,1.2vw,16px)}
.pod svg{color:var(--gold-light);flex:none}
.quote{margin:0;border-left:3px solid var(--gold);padding:4px 0 4px 18px;font-size:clamp(19px,2.4vw,23px);font-weight:300;color:var(--fg);line-height:1.45}

/* Footer nach Master-Dokument Kap. 10 */
footer{border-top:1px solid var(--line);padding-block:48px 40px;display:grid;gap:40px;font-size:14px;line-height:1.7;color:var(--muted)}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fhead img{height:26px;width:auto;display:block}
.fhead .btn{min-height:44px;font-size:16px;padding:0 22px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.fcol{display:grid;gap:14px;align-content:start;min-width:0}
.fcol p{margin:0}
.fh{font-weight:500;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-light)}
.flinks{display:grid;gap:0;justify-items:start}
.flinks a,footer .fcol a{color:var(--muted);text-decoration:none}
.flinks a:hover,footer .fcol a:hover,.flinks a:focus-visible,footer .fcol a:focus-visible{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
footer .row{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;font-size:13px}

/* Rechtliche Ansichten */
.legal{max-width:var(--read);padding-block:24px 72px;display:grid;gap:8px}
.legal article{display:grid;gap:14px}
.legal h2{margin-bottom:6px}
.legal h3{font-family:var(--body);font-weight:500;font-size:19px;letter-spacing:0;margin-top:14px}
.legal p,.legal li{color:var(--soft);max-width:68ch}
.legal ul{margin:0;padding-left:20px;display:grid;gap:8px}
body.legal-open [data-main]{display:none!important}

/* Übersicht aller Vorträge */
.talks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.talk{display:grid;gap:14px;text-decoration:none;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.talk img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.talk>div{padding:0 22px 22px;display:grid;gap:6px}
.talk:hover{border-color:var(--gold)}

.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .pcredit{left:8px;top:8px;font-size:10px;padding:4px 8px;white-space:normal}
  .pcredit br{display:inline}
  .pagebox{--pw:240px;--s:.375}
  .sheetwrap{position:static}
  .dlcard{max-width:none}
  .stagecard{grid-template-columns:1fr}
  .stagecard .panel{padding:24px 20px 28px}
  .stagecard .media{aspect-ratio:1/1;min-height:0}
  .stagecard .media img{object-position:50% 20%}
  .stagecard .actions{flex-direction:column;align-items:stretch}
  .stagecard .actions .btn{width:100%}
  .playpill{padding:6px 20px 6px 6px;gap:10px}
  .playpill i{width:40px;height:40px}
  .playpill b{font-size:18px}
}
@media (max-width:960px){
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .task{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .fgrid{grid-template-columns:1fr;gap:28px}
  .flinks a{padding-block:4px}
  .next{grid-template-columns:1fr}
  .next .btn,.form .btn{width:100%}
  .author{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"eb eb" "img who" "btn btn";column-gap:16px;row-gap:16px}
  .author img{width:88px;height:88px}
  .author .pod{justify-self:stretch;font-size:17px;min-height:52px}
  .talks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* Druck: nur das Blatt, A4 hochkant, hell */
@media print{
  @page{size:A4;margin:14mm}
  :root{color-scheme:light}
  html,body{background:#fff!important;padding:0!important;margin:0;color:#333}
  body::before{display:none}
  body>*:not(#aufgabe),#aufgabe .form{display:none!important}
  #aufgabe,#aufgabe section,#aufgabe .task{display:block;max-width:none;margin:0;padding:0;border:0}
  .sheetwrap>.hint{display:none}
  .pagebox{width:auto;height:auto;overflow:visible;outline:0;position:static}
  #blatt{position:static;transform:none;height:auto;width:100%;max-width:none;border-radius:0;border-left:1.6mm solid #c19b2f;padding:0 0 0 7mm;gap:3.6mm}
  #blatt .sh-top img{height:9mm}
  #blatt h3{font-size:26pt}
  #blatt .sh-sub{font-size:11pt}
  #blatt .act{gap:3mm;break-inside:avoid}
  #blatt .act p{font-size:13pt;line-height:1.25;padding-bottom:1.2mm}
  #blatt .act p.empty{color:#fff}
  #blatt .grid42{gap:1.1mm;grid-template-columns:auto repeat(7,1fr)}
  #blatt .grid42 em{display:block}
  #blatt .sh-top .sh-sub{font-size:11pt}
  #blatt .grid42 em{font-size:9pt}
  #blatt .grid42 i{height:4.6mm;border-color:#9a9a9a}
  #blatt .why{padding:3mm 4mm;gap:1.5mm}
  #blatt .sh-k{font-size:8.5pt}
  #blatt .why ol{font-size:12pt;gap:1mm}
  #blatt .why li.empty{color:#fff}
  #blatt .sh-foot{font-size:10pt}
  #blatt,#blatt *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}