/* gd101.css · Bauplan-Look für «Game-Design 101» (Basis: lab.css und tutorial.css). © Michaelangelo Zünd (MIT)
   Version: v1.2 · Stand: 28.10.2026 · Verantwortlich: Groot (Auftrag Groot 01 für Mikey); gebaut von Celine (v1.0, 22.10.2026)
   v1.1: hervorgehobenes Kapitel (★ Storytelling) mit goldenem Reiter, Band und Rahmen
   v1.2: Intro (nur Text), Zitat, Tabelle «Spielwiesen»: am PC Tabelle, am Handy Karten */
.gd main { max-width: 1100px; margin: 0 auto; padding: 0 1rem 3rem; }
.gd .hero { padding: 2.2rem 0 1rem; text-align: left; }
.gd .hero h1 { font-size: clamp(2rem, 9vw, 3.6rem); margin: .6rem 0 .5rem; }
.gd .hero p { margin: 0 0 1rem; max-width: 46rem; }
.legende { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 1rem 0 1.4rem; }
.legende div { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: .6rem .8rem; font-size: .9rem; color: var(--muted); }
.legende b { display: block; color: var(--text); margin-bottom: .1rem; }
.gtabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.gtab { font: inherit; font-weight: 600; font-size: .9rem; min-height: 44px; padding: .45rem .75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.gtab span { color: var(--accent); font-family: 'Syne', sans-serif; font-weight: 800; margin-right: .2rem; }
.gtab:hover { border-color: var(--accent); color: var(--text); }
.gtab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.gtab[aria-selected="true"] span { color: #fff; }
.gtab:focus-visible, .dot:focus-visible, .btn:focus-visible, .sb:focus-visible, .gd-canvas:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }

.kap-kopf { display: flex; gap: .9rem; align-items: flex-start; margin: .4rem 0 .8rem; }
.kap-nr { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--accent); }
.kap-kopf h2 { font-size: clamp(1.4rem, 5vw, 2rem); margin: 0; overflow-wrap: break-word; }
.kernfrage { color: var(--muted); margin: .2rem 0 0; }
.teile { border: 1px dashed var(--border); border-radius: 12px; padding: .5rem .9rem; margin: 0 0 .9rem; background: var(--surface); }
.teile summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.teile ul { margin: .4rem 0 .2rem; padding-left: 1.2rem; color: var(--muted); }
.leiste { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.dot { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
.dot.done { border-color: #2fb36b; color: #2fb36b; }
.dot.on { background: var(--text); border-color: var(--text); color: var(--bg); }

.bauplan { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .bauplan { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } .vorschau { position: sticky; top: 76px; } }
.vorschau { min-width: 0; }
.cv-wrap { position: relative; border: 3px solid var(--text); border-radius: 14px; overflow: hidden; background: #0f1a33; aspect-ratio: 16 / 9; }
.gd-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.cv-wrap.neu::after { content: ''; position: absolute; inset: 0; border: 4px solid #ff4d4d; border-radius: 10px; pointer-events: none; animation: gdneu 1.6s ease-out forwards; }
@keyframes gdneu { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cv-wrap.neu::after { animation: none; opacity: 0; } }
.steuer { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.sb { min-width: 56px; min-height: 56px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 1.1rem; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.sb.jump { flex: 1 1 110px; }
.sb.klein { min-height: 44px; min-width: 44px; font-size: .9rem; touch-action: manipulation; }
.sb.pick { font-size: 1.3rem; }
.sb:active { background: var(--accent); color: #fff; }
.gd-params { display: grid; gap: .3rem; }
.regler { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.2fr) 3.2rem; gap: .5rem; align-items: center; font-size: .88rem; color: var(--muted); }
.regler input { width: 100%; min-height: 32px; accent-color: var(--accent); }
.regler output { font-family: ui-monospace, monospace; color: var(--text); text-align: right; }
.regler code { font-size: .8em; }
.gd-wahl { display: grid; gap: .5rem; margin: .5rem 0; }
.wahl-box { border: 1px solid var(--border); border-radius: 12px; padding: .4rem .8rem .6rem; background: var(--surface); margin: 0; min-width: 0; }
.wahl-box legend { font-weight: 700; padding: 0 .3rem; }
.wahl-opt { display: flex; gap: .5rem; align-items: center; min-height: 44px; cursor: pointer; }
.wahl-opt input { width: 20px; height: 20px; accent-color: var(--accent); }
.gd-fehler { margin: .5rem 0; padding: .6rem .8rem; border-radius: 10px; border: 2px solid #ff4d4d; color: #ff9d9d; background: rgba(255, 77, 77, .1); font-size: .9rem; }

.anleitung { min-width: 0; }
.schritt-kopf { display: flex; gap: .8rem; align-items: center; margin: 0 0 .7rem; }
.schritt-kopf .nr { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 10px; border: 3px solid var(--text); display: grid; place-items: center; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.6rem; }
.schritt-kopf small { color: var(--muted); }
.schritt-kopf h3 { margin: 0; font-size: 1.3rem; overflow-wrap: break-word; }
.s-text p, .s-text li { font-size: 1.02rem; overflow-wrap: break-word; }
.s-text p { margin: .5rem 0; }
.anleitung code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .86em; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .02rem .28rem; overflow-wrap: anywhere; }
.aenderung { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin: .9rem 0; }
.aenderung > div { border: 1px solid var(--border); border-radius: 12px; padding: .5rem .7rem; background: var(--surface); font-size: .95rem; min-width: 0; overflow-wrap: break-word; }
.aenderung .jetzt { border: 2px solid #2fb36b; }
.aenderung b { display: block; font-family: 'Syne', sans-serif; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 520px) { .aenderung { grid-template-columns: 1fr; } }
.neu-code, .unsichtbar, .probier, .achtung, .gesamt { margin: .9rem 0; border-radius: 12px; min-width: 0; }
.neu-code h4, .unsichtbar h4 { margin: 0 0 .4rem; font-size: 1rem; }
.neu-code h4 small, .unsichtbar h4 small { color: var(--muted); font-weight: 400; margin-left: .3rem; }
.hook { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #0a0a10; margin: 0 0 .5rem; }
.hook-name { font-size: .72rem; color: #8a8794; padding: .35rem .8rem; border-bottom: 1px solid rgba(255, 255, 255, .08); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.hook pre { margin: 0; padding: .7rem .8rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hook code { background: none !important; border: 0 !important; padding: 0 !important; font-size: .8rem !important; line-height: 1.5; color: #e6e4dc; white-space: pre; display: block; }
.hook code.neu { border-left: 3px solid #ff4d4d !important; padding-left: .5rem !important; background: rgba(255, 77, 77, .08) !important; }
.gesamt { border: 1px solid var(--border); padding: .4rem .7rem; background: var(--surface); }
.gesamt summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.unsichtbar { border: 2px dashed #8a7fd0; padding: .7rem .9rem; background: rgba(138, 127, 208, .08); }
.unsichtbar ul { margin: 0; padding-left: 1.1rem; }
.unsichtbar li { margin: .45rem 0; font-size: .95rem; overflow-wrap: break-word; }
.unsichtbar em { color: var(--muted); }
.probier { border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: .6rem .9rem; background: var(--surface); }
.achtung { border: 2px solid #e0a030; padding: .6rem .9rem; background: rgba(224, 160, 48, .08); }
.probier b, .achtung b { display: block; margin-bottom: .2rem; font-family: 'Syne', sans-serif; }
.pager { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; margin: 1.4rem 0 .5rem; }
.pager .btn { flex: 1 1 200px; min-height: 48px; text-align: center; font: inherit; font-weight: 700; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; padding: .6rem 1rem; }
.pager .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager .btn[hidden] { display: none; }
/* Ideenblatt (Kapitel 8) */
.blatt-karte { border: 3px solid var(--text); border-radius: 14px; padding: .8rem 1rem; background: var(--surface); }
.bk-kopf { font-family: 'Syne', sans-serif; font-weight: 800; letter-spacing: .06em; margin-bottom: .4rem; }
.bk-kopf span { color: var(--accent); font-size: .8em; }
.bk-zeile { display: grid; gap: .1rem; padding: .35rem 0; border-top: 1px solid var(--border); color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.bk-zeile b { color: var(--text); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.bk-zeile.on span { color: var(--text); }
.bk-zeile.cur { background: rgba(255, 77, 77, .08); border-left: 3px solid #ff4d4d; padding-left: .5rem; }
.felder { display: grid; gap: .6rem; margin: .8rem 0; }
.feld span { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .2rem; }
.feld textarea { width: 100%; font: inherit; padding: .5rem .6rem; border-radius: 10px; border: 2px solid var(--border); background: var(--bg); color: var(--text); min-height: 64px; resize: vertical; }
.kopieren { min-height: 48px; font: inherit; font-weight: 700; border-radius: 12px; border: 2px solid var(--accent); background: transparent; color: var(--text); cursor: pointer; padding: .5rem 1rem; }
.glossar dl { margin: .6rem 0; } .glossar dt { font-weight: 800; margin-top: .6rem; } .glossar dd { margin: .1rem 0 0; color: var(--muted); overflow-wrap: break-word; }
.gs-suche span { display: block; font-weight: 700; font-size: .9rem; }
.gs-suche input { width: 100%; min-height: 44px; font: inherit; padding: .4rem .7rem; border-radius: 10px; border: 2px solid var(--border); background: var(--bg); color: var(--text); }
.nojs { border: 2px solid #e0a030; border-radius: 12px; padding: 1rem; margin: 1rem 0; }
.bereit + .nojs, #kapitel.bereit ~ .nojs { display: none; }

/* Lange Zeilen (Ideenblatt-Beispiele) umbrechen statt seitlich zu scrollen */
.neu-code pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── v1.1: hervorgehobenes Kapitel (★ Storytelling) ── */
.gtab.hervor { border: 2px solid #ffd24a; color: var(--text); }
.gtab.hervor span { color: #ffd24a; }
.gtab.hervor[aria-selected="true"] { background: #ffd24a; border-color: #ffd24a; color: #1a1400; }
.gtab.hervor[aria-selected="true"] span { color: #1a1400; }
.kap.hervor .kap-kopf { position: relative; flex-wrap: wrap; border: 2px solid #ffd24a; border-radius: 14px; padding: .8rem .9rem; background: linear-gradient(135deg, rgba(255,210,74,.14), rgba(255,210,74,.03)); }
.kap.hervor .kap-kopf > div { flex: 1 1 14rem; min-width: 0; }
.kap.hervor .kap-nr { color: #ffd24a; }
.hervor-band { flex: 0 0 100%; align-self: flex-start; font-family: 'Syne', sans-serif; font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #1a1400; background: #ffd24a; border-radius: 999px; padding: .2rem .7rem; width: max-content; max-width: 100%; }

/* ── v1.2: Intro «Die Kunst des Game Designs» (nur Text) ── */
.bauplan.nur-text { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.zitat { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 4px solid #ffd24a; background: var(--surface); border-radius: 0 12px 12px 0; }
.zitat p { margin: 0; font-size: 1.1rem; font-style: italic; color: var(--text); }
.zitat footer { margin-top: .4rem; color: var(--muted); font-size: .9rem; }
.spielwiesen { width: 100%; border-collapse: separate; border-spacing: 0; margin: .6rem 0 1rem; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: .95rem; }
.spielwiesen th, .spielwiesen td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
.spielwiesen thead th { background: var(--surface); font-family: 'Syne', sans-serif; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.spielwiesen tbody th { color: var(--accent); width: 22%; }
.spielwiesen tbody tr:last-child th, .spielwiesen tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) {
  .spielwiesen, .spielwiesen tbody, .spielwiesen tr, .spielwiesen th, .spielwiesen td { display: block; width: auto; }
  .spielwiesen { border: 0; border-radius: 0; overflow: visible; }
  .spielwiesen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .spielwiesen tbody tr { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin: 0 0 .8rem; overflow: hidden; }
  .spielwiesen tbody th { width: auto; font-size: 1.05rem; padding: .7rem .8rem .3rem; border-bottom: 0; }
  .spielwiesen td { padding: .35rem .8rem .6rem; border-bottom: 0; }
  .spielwiesen td::before { content: attr(data-label); display: block; font-family: 'Syne', sans-serif; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
}