@import url('../../../assets/css/styles.css');
:root { --tinte:var(--parler-tinte); --kupfer:var(--parler-kupfer); --heft:var(--parler-papier); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--parler-tinte); background:var(--parler-papier); font:1.125rem/1.5 var(--font-body); }
button,select { font-family:var(--font-ui); }
button,a,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none!important; }
a { color:inherit; text-underline-offset:.2em; }
:focus-visible { outline:3px solid var(--parler-tinte); outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--font-display); color:inherit; line-height:1.06; }
h1 { font-size:clamp(2.6rem,5vw,4.25rem); margin-bottom:1.25rem; font-weight:700; letter-spacing:-.025em; }
h2 { font-size:clamp(2rem,3vw,2.75rem); margin-bottom:.9rem; }
h3 { font-size:2rem; margin-bottom:.75rem; }
#app { max-width:1200px; margin:auto; padding:1.5rem 2rem 0; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:30; padding:1rem; background:#fff; }
#kopf { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line-strong); }
.marke { display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.marke img { width:42px; height:auto; }
.wort { display:block; font:700 2rem/1 var(--font-display); }
.unter { display:block; margin-top:.3rem; font:500 .75rem/1.4 var(--font-ui); text-transform:uppercase; letter-spacing:.12em; }
.zurueck { font:500 .875rem/1.4 var(--font-ui); padding:.75rem 0; }
#nav { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:1rem 0; margin-bottom:2rem; }
#nav button { min-height:44px; padding:.6rem 1rem; border:1px solid transparent; color:inherit; font-size:.875rem; background:transparent; border-radius:4px; }
#nav button[aria-current="page"] { background:var(--parler-tinte); color:#fff; }
#nav button:hover { border-color:var(--parler-tinte); }
#btn-ton { margin-left:auto; }
#btn-ton[aria-pressed="false"] .an,#btn-ton[aria-pressed="true"] .aus { display:none; }
.sicht { display:none; }
.sicht.an { display:block; }
.klein { font:500 .875rem/1.5 var(--font-ui); color:var(--muted); }
p.klein { margin-bottom:.75rem; }
.lead { max-width:42ch; font-size:1.25rem; }
.hub-einstieg { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; margin:1rem 0 4rem; }
.quiz-einstieg { padding:.75rem 0; }
.quiz-regel { font:400 .875rem/1.6 var(--font-ui); color:var(--muted); max-width:39ch; margin:1.25rem 0 0; }
.knopf { display:inline-flex; justify-content:center; align-items:center; gap:.6rem; min-height:48px; padding:.75rem 1.1rem; background:transparent; color:var(--parler-tinte); border:1px solid var(--parler-tinte); border-radius:4px; font:600 .9375rem/1.4 var(--font-ui); text-decoration:none; }
.knopf:hover { background:var(--parler-feder); }
.knopf.kupfer { background:var(--parler-tinte); color:#fff; border-bottom:3px solid var(--parler-kupfer); }
.knopf.kupfer:hover { background:#0F2450; }
.knopf:disabled { cursor:default; color:var(--muted); border-color:var(--line-strong); background:transparent; }
.textknopf { min-height:44px; border:0; background:transparent; color:inherit; padding:.6rem .25rem; text-decoration:underline; text-underline-offset:.25em; font-size:.875rem; }
.fortschritt { padding:1.75rem; border:1px solid var(--line-strong); background:var(--parler-feder); border-radius:6px; }
.fortschritt h2 { font-size:2.5rem; }
progress { display:block; width:100%; height:7px; border:0; border-radius:0; appearance:none; accent-color:var(--parler-tinte); background:#D5E0F2; margin:1.2rem 0; }
progress::-webkit-progress-bar { background:#D5E0F2; }
progress::-webkit-progress-value { background:var(--parler-tinte); }
progress::-moz-progress-bar { background:var(--parler-tinte); }
#pass-rest { font-size:1.0625rem; }
.pass-steps { list-style:none; padding:0; margin:1.5rem 0; }
.pass-steps li { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:.65rem; padding:.7rem 0; border-top:1px solid var(--line-strong); font:500 .875rem/1.5 var(--font-ui); }
.schritt-zahl { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--parler-tinte); border-radius:50%; font-size:.75rem; }
.pass-steps .offen .schritt-zahl { background:var(--parler-tinte); color:#fff; }
.schritt-status { color:var(--muted); }
.speicher-hinweis { font:400 .875rem/1.5 var(--font-ui); color:var(--muted); margin:0; }
.abschnittskopf { display:flex; gap:1rem; align-items:end; justify-content:space-between; margin-bottom:1.5rem; }
.abschnittskopf h2 { margin-bottom:0; }
.spielgitter { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.spielkarte { display:flex; flex-direction:column; padding:1.5rem; border:1px solid var(--line-strong); border-radius:5px; background:#fff; overflow:hidden; }
.spiel-vorschau { position:relative; aspect-ratio:4/3; overflow:hidden; margin:-1.5rem -1.5rem 1.25rem; background:var(--parler-tinte); pointer-events:none; }
.spiel-vorschau iframe { position:absolute; inset:0; width:800px; height:600px; border:0; transform-origin:top left; pointer-events:none; }
.spiel-schloss { position:absolute; inset:0; display:grid; place-items:center; background:rgba(22,51,106,.55); color:#fff; }
.spiel-schloss svg { width:72px; height:81px; filter:drop-shadow(0 3px 6px rgba(22,51,106,.4)); }
.kurzanleitung { margin:0 0 3rem; padding:1.75rem; border:1px solid var(--line-strong); border-radius:6px; }
.kurzanleitung h2 { font-size:2rem; }
.kurzanleitung ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin:1.5rem 0; padding-left:1.25rem; }
.kurzanleitung li { padding-left:.25rem; }
.kurzanleitung strong { display:block; font:600 1rem/1.5 var(--font-ui); margin-bottom:.65rem; }
.kurzanleitung li span { font-size:1.0625rem; }
.kurzanleitung > p { font:400 .875rem/1.6 var(--font-ui); color:var(--muted); margin:0; border-top:1px solid var(--line); padding-top:1rem; }
.spielkarte p { flex:1; }
.spielkarte .spiel-status { flex:0; font:500 .875rem/1.5 var(--font-ui); color:var(--muted); padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1px solid var(--line); }
.spielkarte.zu { background:transparent; }
.spielkarte h3 { font-size:2rem; }
.spielkarte .knopf { width:100%; }
.ranglisten-einstieg { display:flex; justify-content:space-between; gap:2rem; align-items:center; margin:4rem 0; padding:2rem 0; border-top:2px solid var(--parler-tinte); border-bottom:1px solid var(--line-strong); }
.ranglisten-einstieg p:last-child { max-width:46ch; margin-bottom:0; }
.ranglisten-einstieg .knopf { flex:none; }
.blatt { padding:clamp(1rem,3vw,2.5rem); background:#fff; border:1px solid var(--line-strong); border-radius:6px; margin-bottom:2rem; }
.quiz-kopf { display:flex; justify-content:space-between; align-items:start; gap:1rem; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--line); }
.quiz-kopf h1 { font-size:clamp(1.8rem,3vw,2.75rem); max-width:30ch; }
.quiz-werte { text-align:right; display:flex; flex-direction:column; flex:none; }
.uhr { font:700 2rem/1.25 var(--font-display); }
.uhr.knapp { text-decoration:underline; text-decoration-color:var(--parler-kupfer); }
.hinweis-fach { font:400 .875rem/1.5 var(--font-ui); color:var(--muted); }
#frage-flaeche { min-height:280px; }
.quiz-anleitung { font:400 .9375rem/1.6 var(--font-ui); max-width:70ch; margin-bottom:1.5rem; }
.matrix { display:grid; gap:8px; justify-content:center; margin:8px auto 14px; }
.zelle,.option { width:76px; height:76px; display:grid; place-items:center; background:#fff; border:1px solid var(--parler-tinte); padding:0; }
.zelle.leer { background:var(--parler-feder); }
.zelle.ziel { outline:2px dashed var(--parler-tinte); outline-offset:2px; }
.optionen,.bank { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.option:hover,.chip-drag:hover { background:var(--parler-feder); }
.option[aria-pressed="true"] { outline:3px solid var(--parler-tinte); }
.bank { min-height:84px; padding-top:1rem; margin-top:1rem; border-top:1px solid var(--line); }
.chip-drag { width:76px; height:76px; border:1px dashed var(--parler-tinte); background:#fff; padding:0; }
.chip-drag.zieht { opacity:.45; }
.zieh-geist { position:fixed; z-index:20; width:76px; height:76px; pointer-events:none; background:#fff; border:1px dashed var(--parler-tinte); transform:translate(-38px,-38px); }
.reihe { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1.25rem; }
#q-feedback { margin:1.5rem 0 0; min-height:1.5em; }
.ergebnis-punkte { font-size:1.5rem; }
.ergebnis-punkte strong { font:700 4rem/1 var(--font-display); }
#res-unlock p { padding:1rem 1.25rem; background:var(--parler-feder); border-left:2px solid var(--parler-kupfer); }
.spiel-toolbar { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; }
.spiel-toolbar h1 { font-size:2.5rem; margin:0; }
#spiel-mount iframe { display:block; border:1px solid var(--line-strong); border-radius:5px; width:100%; height:min(740px,80dvh); min-height:420px; background:var(--parler-tinte); }
.vorschau-hinweis { padding:1rem 1.25rem; border-left:2px solid var(--parler-kupfer); background:var(--parler-feder); font:400 .9375rem/1.65 var(--font-ui); }
.board-auswahl { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin:2rem 0 1rem; font:500 .9375rem/1.5 var(--font-ui); }
select { padding:.75rem 2.25rem .75rem 1rem; min-height:48px; max-width:100%; font-size:.9375rem; color:var(--parler-tinte); border:1px solid var(--parler-tinte); border-radius:4px; background:#fff; }
#board-eigen { font-size:1.0625rem; }
.table-wrap { overflow-x:auto; }
.bestenliste { width:100%; border-collapse:collapse; font:400 1rem/1.5 var(--font-ui); background:#fff; }
.bestenliste caption { text-align:left; padding:1rem 0; font-size:.875rem; color:var(--muted); }
.bestenliste th,.bestenliste td { text-align:left; padding:1rem; border-bottom:1px solid var(--line); }
.bestenliste th { font-size:.875rem; background:var(--parler-feder); }
.bestenliste :is(th,td):last-child { text-align:right; font-variant-numeric:tabular-nums; }
.bestenliste .eigen { background:var(--parler-feder); font-weight:600; }
#eule-box { position:fixed; right:1rem; bottom:1rem; max-width:170px; pointer-events:none; z-index:10; text-align:right; }
#eule-box img { width:52px; height:auto; }
#eule-sprech { display:none; padding:.5rem .75rem; background:#fff; border:1px solid var(--line-strong); border-radius:4px; font:400 .875rem/1.4 var(--font-ui); }
#eule-sprech.an { display:block; }
.hub-fuss { margin-top:3rem; padding:1.5rem 0 2rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; border-top:1px solid var(--line-strong); color:var(--muted); font:400 .875rem/1.5 var(--font-ui); }
@media(max-width:800px) {
  #app { padding:1rem 1.25rem 0; }
  .hub-einstieg { grid-template-columns:1fr; gap:1.5rem; margin-bottom:3rem; }
  .spielgitter { grid-template-columns:1fr; }
  .kurzanleitung ol { grid-template-columns:1fr; gap:1.25rem; }
  .ranglisten-einstieg { flex-direction:column; align-items:start; }
  .fortschritt { padding:1.25rem; }
  .abschnittskopf { align-items:start; flex-direction:column; }
}
@media(max-width:480px) {
  #app { padding:1rem .75rem 0; }
  #kopf { align-items:start; }
  .zurueck { max-width:95px; text-align:right; padding:0; }
  .wort { font-size:1.75rem; }
  .unter { font-size:.6875rem; }
  #nav { gap:.1rem; margin-bottom:1rem; }
  #nav button { font-size:.8125rem; padding:.6rem .5rem; }
  .spiel-toolbar { align-items:start; flex-direction:column; }
  .quiz-kopf { gap:.5rem; }
  .quiz-kopf h1 { font-size:1.6rem; }
  .quiz-werte .klein { font-size:.75rem; }
  .bestenliste td,.bestenliste th { padding:.85rem .65rem; }
  #eule-box { right:.75rem; bottom:.75rem; }
  #eule-box img { width:36px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

[hidden]{display:none!important}