/* Marketing-Maschine — Web-Docks-CI (Dunkelgrün + Gold, Baloo 2, selbst gehostet) */
@font-face{font-family:'Baloo 2'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/baloo-2-v23-latin_latin-ext-regular.woff2') format('woff2');}
@font-face{font-family:'Baloo 2'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/baloo-2-v23-latin_latin-ext-600.woff2') format('woff2');}
@font-face{font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/baloo-2-v23-latin_latin-ext-700.woff2') format('woff2');}
:root{
  --bg:#0e1a14; --card:#14251b; --card2:#1b3325; --text:#f2f5f0; --muted:#9fb5a6;
  --accent:#f3b500; --accent2:#f3b500; --ok:#5fc06a; --warn:#f3b500; --border:#2b4a38;
  --error:#f87171; --green:#0f4d2e;
}
*{box-sizing:border-box; margin:0; padding:0;}
button,input,textarea,select{font:inherit;}
body{font-family:'Baloo 2',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; padding:24px 16px;}
.wrap{max-width:720px; margin:0 auto;}
header{text-align:center; margin-bottom:28px;}
header h1{font-size:1.6rem; margin-bottom:6px;}
header p{color:var(--muted); font-size:.95rem;}
.progress{display:flex; gap:8px; justify-content:center; margin:18px 0 26px;}
.dot{width:34px; height:6px; border-radius:3px; background:var(--border); transition:.3s;}
.dot.active{background:var(--accent);}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:26px; margin-bottom:16px;}
.q{font-size:1.15rem; font-weight:600; margin-bottom:18px;}
.opt{display:block; width:100%; text-align:left; background:var(--card2); color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px;
  font-size:.98rem; cursor:pointer; transition:.15s;}
.opt:hover{border-color:var(--accent); transform:translateX(3px);}
.opt small{display:block; color:var(--muted); margin-top:3px; font-size:.85rem;}
.back{background:none; border:none; color:var(--muted); cursor:pointer; font-size:.9rem; margin-bottom:12px;}
.back:hover{color:var(--text);}
.badge{display:inline-block; background:var(--accent2); color:#0e1a14; font-weight:700;
  border-radius:6px; padding:3px 10px; font-size:.85rem; margin-right:8px;}
.result h2{font-size:1.35rem; margin:8px 0 4px;}
.wann{color:var(--muted); font-style:italic; margin-bottom:16px;}
.step{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border);}
.step:last-child{border-bottom:none;}
.num{flex:0 0 30px; height:30px; border-radius:50%; background:var(--card2); border:1px solid var(--accent);
  color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;}
.step b{display:block;}
.step span{color:var(--muted); font-size:.85rem;}
.hint{background:rgba(243,181,0,.08); border:1px solid var(--warn); border-radius:10px; padding:14px 16px; margin-bottom:16px; font-size:.92rem;}
.hint b{color:var(--warn);}
.alts{margin-top:14px; color:var(--muted); font-size:.92rem;}
.alts a{color:var(--accent); cursor:pointer; text-decoration:underline;}
.actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.btn{background:var(--accent2); color:#0e1a14; border:none; border-radius:10px; padding:12px 20px;
  font-weight:700; font-size:.95rem; cursor:pointer;}
.btn:hover{filter:brightness(1.1);}
.btn.sec{background:var(--card2); color:var(--text); border:1px solid var(--border);}
footer{text-align:center; color:var(--muted); font-size:.82rem; margin-top:26px; line-height:1.5;}
footer a{color:var(--accent);}
footer .disclaimer{margin-top:10px; font-size:.75rem; color:var(--muted); opacity:.8; max-width:560px;
  margin-left:auto; margin-right:auto;}

/* ── Zugangs-Gate ── */
.gate input[type=text]{width:100%; background:var(--card2); border:1px solid var(--border);
  border-radius:10px; color:var(--text); padding:14px 16px; font-size:1.05rem;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px;}
.gate input[type=text]:focus{outline:none; border-color:var(--accent);}
.gate .fehler{color:var(--error); font-size:.9rem; margin-bottom:12px; min-height:1.2em;}
.gate p.info{color:var(--muted); font-size:.9rem; margin-bottom:16px;}

/* ── Personalisierungs-Formular ── */
.form label{display:block; font-size:.9rem; color:var(--muted); margin:14px 0 5px;}
.form label b{color:var(--text);}
.form label .pflicht{color:var(--accent);}
.form input[type=text], .form textarea{width:100%; background:var(--card2); border:1px solid var(--border);
  border-radius:10px; color:var(--text); padding:12px 14px; font-size:.95rem; font-family:inherit;}
.form input[type=text]:focus, .form textarea:focus{outline:none; border-color:var(--accent);}
.form .fehler{color:var(--error); font-size:.9rem; margin-top:10px; min-height:1.2em;}
.form .erklaer{background:rgba(243,181,0,.07); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; font-size:.9rem; color:var(--muted); margin-bottom:8px;}
.form .erklaer b{color:var(--accent);}

/* ── Anleitung & Hilfe ── */
.hilfe{margin-top:8px;}
.hilfe a{color:var(--accent); font-size:.85rem; cursor:pointer; text-decoration:underline;}
.anleitung .an-intro{color:var(--muted); margin-bottom:18px; line-height:1.6;}
.an-schritt{display:flex; gap:14px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border);}
.an-schritt:last-of-type{border-bottom:none;}
.an-schritt .an-icon{font-size:1.5rem; flex:0 0 36px; text-align:center;}
.an-schritt div{line-height:1.55; font-size:.94rem;}
.an-schritt b{color:var(--accent);}

/* ── Modus-Wahl ── */
.modus-wahl{display:flex; gap:12px; margin:16px 0 10px; flex-wrap:wrap;}
button.modus{flex:1; min-width:230px; text-align:left; background:var(--card2); color:var(--text);
  border:2px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; transition:.15s;}
button.modus:hover{border-color:var(--accent);}
button.modus b{display:block; font-size:1.02rem; margin-bottom:4px; color:var(--accent);}
button.modus small{color:var(--muted); font-size:.85rem; line-height:1.45; display:block;}

/* ── Ziel-Box im Runner ── */
.ziel-box{background:var(--card2); border-left:4px solid var(--accent); border-radius:0 10px 10px 0;
  padding:12px 16px; margin:12px 0 6px; font-size:.92rem; line-height:1.5;}
.ziel-weiter{color:var(--muted); font-size:.85rem; margin-top:6px;}

/* ── Abschluss-Feier ── */
.done{text-align:left;}
.done-feier{font-size:3rem; text-align:center; margin-bottom:6px;}
.done-titel{text-align:center; margin-bottom:10px;}
.done-gross{text-align:center; color:var(--muted); margin-bottom:18px; font-size:1.02rem;}
.done-gross b{color:var(--accent);}
.done-block{background:var(--card2); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; margin-bottom:14px; font-size:.92rem; line-height:1.55;}
.done-block > b{color:var(--accent); display:block; margin-bottom:8px;}
.done-block.warum p{color:var(--text);}
.station{padding:3px 0; color:var(--muted);}
.station b{color:var(--text); font-weight:600;}
.done-tipp{background:rgba(243,181,0,.08); border:1px solid var(--warn); border-radius:10px;
  padding:12px 16px; margin:14px 0; font-size:.9rem; line-height:1.55;}
.done-dank{border-top:1px solid var(--border); margin-top:18px; padding-top:16px;
  font-size:.92rem; line-height:1.6; text-align:center;}
.done-dank .btn{display:inline-block; margin-top:10px; text-decoration:none;}

/* ── Geführter Modus ── */
.mini-hinweis{color:var(--muted); font-size:.85rem; margin-top:12px; line-height:1.5;}
.karte-nr{color:var(--accent); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;}
.runner-titel{font-size:1.3rem; margin:6px 0 2px;}
.runner-zweck{color:var(--muted); font-size:.92rem; margin-bottom:8px;}
.runner-vorher{color:var(--muted); font-size:.88rem; margin-bottom:14px;}
.runner-vorher b{color:var(--text);}
details.fragen{background:var(--card2); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; margin-bottom:18px;}
details.fragen summary{cursor:pointer; font-weight:600; color:var(--accent); font-size:.92rem;}
details.fragen label{margin-top:12px;}
.prompt-kopf{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
pre.runner-prompt{white-space:pre-wrap; word-wrap:break-word; background:#0b1510;
  border:1px solid var(--border); border-radius:10px; padding:14px 16px;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace; font-size:.78rem;
  line-height:1.55; max-height:340px; overflow-y:auto; margin-bottom:16px; color:#d9e5dc;}
.ergebnis-label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px;}
.ergebnis-label b{color:var(--text);}
.runner textarea{width:100%; background:var(--card2); border:1px solid var(--border);
  border-radius:10px; color:var(--text); padding:12px 14px; font-size:.92rem; resize:vertical;}
.runner textarea:focus{outline:none; border-color:var(--accent);}
.btn.klein{padding:8px 14px; font-size:.85rem;}

@media (max-width:480px){
  body{padding:16px 10px;}
  .card{padding:18px;}
  .actions{flex-direction:column;}
  .btn{width:100%;}
}