@font-face{font-family:"Playfair Display";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/playfair-700.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/playfair-800.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/source-sans-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/source-sans-600.woff2") format("woff2")}

:root{
  --nacht:#0d1634;--nacht-tief:#070b22;--nacht-hell:#1b2457;
  --gold:#e9b858;--gold-dunkel:#b8862f;--gold-hell:#f6d789;
  --creme:#f8f0e2;--creme-dunkel:#ecdfc6;--tinte:#3a2a1a;--tinte-hell:#6b5436;
  --violett:#4a1d6e;--violett-hell:#6a3a93;
  --text-hell:#e8e9f5;--text-gedaempft:#c4c8e4;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --rand:min(1120px,100% - 2rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--text-hell);font:400 1.0625rem/1.55 var(--sans);overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--gold);text-underline-offset:.2em}
a:hover{color:var(--gold-hell)}
:focus-visible{outline:3px solid var(--gold-hell);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:var(--rand);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:800;line-height:1.12;margin:0}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--tinte);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.65rem 1.5rem;border-radius:999px;border:0;font:600 1.0625rem/1.25 var(--serif);font-weight:700;text-align:center;text-decoration:none;cursor:pointer;background:var(--gold);color:#2a1a05;box-shadow:0 2px 0 var(--gold-dunkel)}
.btn:hover{background:var(--gold-hell);color:#2a1a05}
.btn-violett{background:var(--violett);color:#fff;box-shadow:0 2px 0 #2a0f40;border-radius:12px;font-family:var(--sans);font-weight:600}
.btn-violett:hover{background:var(--violett-hell);color:#fff}
.btn[disabled]{opacity:.6;cursor:wait}

/* Kopf */
.kopf{position:relative;z-index:5;padding:1rem 0}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--gold);font:800 1.35rem/1 var(--serif)}
.logo img{width:56px;height:auto}
.logo span{display:block;line-height:1.05}
.nav{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{color:var(--text-hell);text-decoration:none;font-weight:600;padding:.5rem 0;display:inline-block}
.nav a:hover{color:var(--gold)}
.kopf .btn{min-height:44px;padding:.5rem 1.2rem;font-size:1rem}
@media (max-width:820px){.nav{order:3;width:100%;gap:1.1rem;font-size:.98rem}}

/* Hero */
.hero{position:relative;background:var(--nacht);isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--nacht)}
.hero .stadt{position:absolute;right:0;bottom:0;width:min(1400px,160%);height:auto;z-index:-1;opacity:.95}
.hero .mond{position:absolute;right:12%;top:2.2rem;width:54px;height:54px;border-radius:50%;box-shadow:inset -14px 0 0 0 var(--gold-hell);z-index:-1}
.sterne{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1.5px 1.5px at 8% 20%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 8%,#fff8 50%,transparent 51%),radial-gradient(2px 2px at 41% 24%,#fffb 50%,transparent 51%),radial-gradient(1.5px 1.5px at 63% 12%,#fff8 50%,transparent 51%),radial-gradient(2px 2px at 78% 28%,#fffa 50%,transparent 51%),radial-gradient(1.5px 1.5px at 91% 9%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 33% 40%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 36%,#fff7 50%,transparent 51%)}
.hero-inhalt{padding:2.5rem 0 17rem;max-width:36rem}
.hero h1{font-size:clamp(2.1rem,6.4vw,3.6rem);color:var(--gold-hell)}
.hero h1 em{font-style:normal;color:#fff}
.hero p{margin:1.25rem 0 1.75rem;color:var(--text-hell);font-size:1.15rem;max-width:34rem}
@media (min-width:900px){.hero-inhalt{padding:3rem 0 12rem}}

/* Spielfeld */
.spiel{position:relative;margin-top:-13rem;z-index:3;padding-bottom:3rem}
@media (min-width:900px){.spiel{margin-top:-9rem}}
.buehne{display:grid;grid-template-columns:1fr;gap:0;border:3px solid var(--gold);border-radius:28px;overflow:hidden;background:var(--nacht-hell)}
@media (min-width:900px){.buehne{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.figur{position:relative;background:var(--nacht-tief);padding:1.2rem 1rem 0;display:flex;align-items:flex-end;justify-content:center;min-height:300px}
.figur img{width:min(300px,70%);height:auto}
.sprechblase{position:absolute;top:1.2rem;right:1rem;max-width:11.5rem;background:var(--nacht);border:2px solid var(--gold);border-radius:14px;padding:.6rem .8rem;font-size:.95rem;color:var(--text-hell)}
.sprechblase::after{content:"";position:absolute;left:-10px;top:55%;border:10px solid transparent;border-right-color:var(--gold);border-left:0}
.chat{background:var(--creme);color:var(--tinte);padding:1.1rem}
.chat-kopf{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.level-marke{background:var(--gold);color:#2a1a05;font:800 1.15rem/1 var(--serif);padding:.55rem 1.3rem;border-radius:10px}
.fortschritt{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--tinte-hell)}
.punkte{display:flex;gap:.3rem}
.punkte i{width:12px;height:12px;border-radius:50%;background:#cbbfa6}
.punkte i.fertig{background:var(--violett)}
.punkte i.jetzt{background:var(--gold);outline:2px solid var(--gold-dunkel)}
.ziel{background:var(--creme-dunkel);border-radius:10px;padding:.7rem .9rem;margin-bottom:.9rem}
.ziel strong{color:var(--violett)}
.verlauf{list-style:none;margin:0 0 .9rem;padding:0;height:17rem;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;overscroll-behavior:contain}
.nachricht{max-width:88%;padding:.6rem .9rem;border-radius:14px;background:#fff;border:1px solid var(--creme-dunkel);white-space:pre-line;word-wrap:break-word;overflow-wrap:anywhere}
.nachricht.du{align-self:flex-end;background:var(--violett);color:#fff;border-color:var(--violett)}
.nachricht.system{align-self:center;background:var(--gold-hell);border-color:var(--gold);font-weight:600;text-align:center;max-width:100%}
.nachricht.fehler{background:#fbe3dd;border-color:#c0392b;color:#6e1a10}
.zeile{display:flex;gap:.5rem;margin-bottom:.7rem}
.zeile input{flex:1;min-width:0;min-height:48px;border:1px solid #bfae8b;border-radius:10px;padding:.5rem .9rem;font:inherit;background:#fff;color:var(--tinte)}
.zeile input::placeholder{color:#6b5d44}
.zeile .btn{padding:.5rem 1.1rem;font-size:1rem;flex:none}
.raten{border-top:1px solid var(--creme-dunkel);padding-top:.8rem;margin-top:.2rem}
.raten label{display:block;font-weight:600;margin-bottom:.35rem}
.rueckmeldung{min-height:1.5rem;margin:.4rem 0 0;font-weight:600}
.rueckmeldung.ok{color:#1d6b3a}
.rueckmeldung.nein{color:#9a2a1a}
.spiel-ende{display:none;background:var(--creme-dunkel);border-radius:12px;padding:1rem;margin-bottom:.9rem}
.spiel-ende.an{display:block}
.spiel-ende h3{font-size:1.4rem;color:var(--violett);margin-bottom:.4rem}

/* Abschnitte */
.abschnitt{padding:3.2rem 0;position:relative}
.titel{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.8rem;text-align:center}
.titel h2{font-size:clamp(1.7rem,4.5vw,2.3rem);color:#fff}
.titel::before,.titel::after{content:"";flex:1;max-width:120px;height:2px;background:var(--gold)}
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1rem;counter-reset:s}
@media (min-width:560px){.schritte{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritte li{counter-increment:s;background:var(--creme);color:var(--tinte);border-radius:12px;padding:1.1rem 1.1rem 1.2rem}
.schritte li::before{content:counter(s);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--nacht);color:var(--gold);font:700 1.05rem/1 var(--serif);margin-bottom:.6rem}
.schritte h3{font-size:1.2rem;color:var(--violett);margin-bottom:.35rem}
.schritte p{margin:0}

.levelweg{background:var(--nacht-tief)}
.untertitel{text-align:center;margin:-1rem 0 2rem;color:var(--text-gedaempft)}
.leiste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}
@media (min-width:640px){.leiste{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px){.leiste{grid-template-columns:repeat(8,1fr)}}
.leiste li{text-align:center;font-size:.95rem;color:var(--text-gedaempft)}
.leiste .sechseck{width:64px;height:72px;margin:0 auto .6rem;display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#3a4377;color:var(--text-hell);font:800 1.4rem/1 var(--serif)}
.leiste .sechseck svg{width:26px;height:26px}
.leiste li.fertig .sechseck{background:var(--gold);color:#2a1a05}
.leiste li.jetzt .sechseck{background:var(--violett);color:var(--gold-hell);box-shadow:none;outline:0}
.leiste li.zusatz .sechseck{background:var(--gold-dunkel);color:#1d1203}
.leiste li.zusatz.fertig .sechseck{background:var(--gold);color:#2a1a05}
.leiste strong{display:block;color:#fff;font:700 1.05rem/1.2 var(--serif)}
.leiste li.fertig strong,.leiste li.jetzt strong{color:var(--gold-hell)}

.zwei{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media (min-width:900px){.zwei{grid-template-columns:1fr 1.2fr}}
.tafel{background:var(--nacht-hell);border:2px solid #34408a;border-radius:16px;padding:1.2rem}
.tafel h2{font-size:1.5rem;color:var(--gold-hell);margin-bottom:1rem}
.rangliste{list-style:none;margin:0;padding:0;background:var(--creme);color:var(--tinte);border-radius:12px}
.rangliste li{display:grid;grid-template-columns:2.2rem 1fr auto auto;gap:.6rem;align-items:center;padding:.65rem .9rem;border-bottom:1px solid var(--creme-dunkel)}
.rangliste li:last-child{border-bottom:0}
.rangliste .platz{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--creme-dunkel);font-weight:600}
.rangliste li:nth-child(1) .platz{background:var(--gold);color:#2a1a05}
.rangliste li:nth-child(2) .platz{background:#c9ccd9}
.rangliste li:nth-child(3) .platz{background:#d9a77a}
.rangliste .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rangliste .stand,.rangliste .zeit{font-variant-numeric:tabular-nums;color:var(--tinte-hell)}
.rangliste .leer{display:block;padding:1rem;color:var(--tinte-hell)}
.tipps{display:grid;grid-template-columns:1fr;gap:.8rem;background:var(--creme);color:var(--tinte);border-radius:12px;padding:1rem}
@media (min-width:560px){.tipps{grid-template-columns:1fr 1fr}}
.tipps h3{font-size:1.1rem;color:var(--violett);margin-bottom:.2rem}
.tipps p{margin:0;font-size:.98rem}
.mehr{display:inline-block;margin-top:.8rem}

/* Fuß */
.fuss{background:var(--nacht-tief);padding:2rem 0;border-top:2px solid #232c66}
.fuss .wrap{display:grid;gap:1.2rem}
@media (min-width:900px){.fuss .wrap{grid-template-columns:auto 1fr 1.3fr;align-items:center}}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;flex-wrap:wrap}
.fuss a{display:inline-block;padding:.4rem 0}
.fuss p{margin:0;font-size:.95rem;color:var(--text-gedaempft)}

/* Textseiten */
.text{background:var(--nacht);padding:2rem 0 4rem}
.text .wrap{max-width:46rem}
.text h1{font-size:clamp(1.9rem,5vw,2.6rem);color:var(--gold-hell);margin-bottom:1.2rem}
.text h2{font-size:1.4rem;color:#fff;margin:2rem 0 .5rem}
.text p,.text li{color:var(--text-hell)}
.text ul{padding-left:1.2rem}
.fehlt{background:var(--gold);color:#2a1a05;font-weight:600;padding:0 .3em;border-radius:3px}

/* Mobil */
@media (max-width:640px){
  body{font-size:1.0625rem}
  .kopf{padding:.75rem 0}
  .logo{font-size:1.15rem}
  .logo img{width:44px}
  .kopf .btn{display:none}
  .nav{gap:.2rem 1.1rem}
  .nav a{padding:.65rem 0}
  .hero-inhalt{padding:1.5rem 0 16rem}
  .hero p{font-size:1.05rem}
  .hero .btn{width:100%}
  .hero .mond{width:40px;height:40px;right:6%;top:1rem;box-shadow:inset -10px 0 0 0 var(--gold-hell)}
  .buehne{border-width:2px;border-radius:18px}
  .figur{flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;padding:1rem 1rem 0;gap:.9rem}
  .sprechblase{position:relative;top:auto;right:auto;max-width:none;width:100%;font-size:1rem;order:-1}
  .sprechblase::after{left:50%;top:100%;margin-left:-10px;border:10px solid transparent;border-top-color:var(--gold);border-bottom:0}
  .figur img{width:min(200px,55%)}
  .chat{padding:.9rem}
  .chat-kopf{flex-direction:column;align-items:flex-start;gap:.6rem}
  .level-marke{font-size:1.05rem;padding:.5rem 1.1rem}
  .verlauf{height:min(22rem,55vh);font-size:1.02rem}
  .nachricht{max-width:94%}
  .zeile{flex-direction:column}
  .zeile .btn,.zeile input{width:100%}
  .zeile .btn{min-height:48px}
  .spiel-ende .btn{width:100%}
  .abschnitt{padding:2.4rem 0}
  .titel::before,.titel::after{max-width:32px}
  .tafel{padding:1rem}
  .rangliste li{grid-template-columns:2rem 1fr auto;gap:.5rem;padding:.65rem .7rem}
  .rangliste .zeit{grid-column:2 / -1;font-size:.9rem;margin-top:-.4rem}
  .fuss ul{flex-direction:column;gap:.1rem}
  .fuss a{padding:.6rem 0}
  .mehr{padding:.6rem 0}
  .text{padding:1.5rem 0 3rem}
  .text .wrap{overflow-wrap:anywhere}
}
@media (max-width:380px){
  .leiste{gap:1.2rem .5rem}
  .leiste .sechseck{width:56px;height:63px}
  .logo span{font-size:1.05rem}
}