/* Journey to Quarktown – Grundstil für alle Seiten (Farben und Schriften wie im Spiel, src/head.html) */
:root{--ink:#f3e7c9;--ink-dim:#c2b38f;--ink-faint:#9a8c70;--panel:rgba(20,14,9,.92);--panel-2:rgba(36,26,17,.94);--brass:#c9a24a;--brass-hi:#f0cf73;--brass-lo:#7a5c22;--leek:#8fcf4a;--gold:#ffd21a;--tip:#f2d58a;--ground:#0d0a07;--f-display:"Grenze Gotisch",Georgia,serif;--f-text:"Alegreya",Georgia,serif;--f-ui:"Alegreya Sans","Trebuchet MS",Arial,sans-serif;--f-emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;--rand:40px;--breite:1200px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-ui);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--brass-hi)}
a:hover{color:#fff4c0}
p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:rgba(143,207,74,.4);color:#fff}
.unsichtbar{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprung{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;background:#000;color:#fff4c0;border:2px solid var(--gold);border-radius:4px}
.sprung:focus{left:8px}
.seite{min-height:100vh;display:flex;flex-direction:column;background:var(--ground)}

/* Band oben: Hintergrundbild aus dem Spiel */
.band{position:relative;background:#0b0906 var(--hg) var(--hg-pos,center 45%)/cover no-repeat}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(10,8,5,.6),rgba(10,8,5,.28) 30%,rgba(13,10,7,.78) 72%,var(--ground))}
.band.links-dunkel::before{background:linear-gradient(90deg,rgba(10,8,5,.55),rgba(10,8,5,0) 62%),linear-gradient(rgba(10,8,5,.6),rgba(10,8,5,.26) 30%,rgba(13,10,7,.76) 74%,var(--ground))}
.band>*{position:relative}

/* Kopf: Logo in der Mitte, links und rechts die Messingschilder */
.kopf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:32px;padding:22px var(--rand)}
.kopf nav{display:flex;gap:12px;flex-wrap:wrap}
.kopf .nl{justify-content:flex-end}
.kopf .nr{justify-content:flex-start}
.navi{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;border:2px solid var(--brass);border-radius:4px;background:linear-gradient(rgba(52,38,23,.94),rgba(18,12,7,.94));box-shadow:inset 0 1px 0 rgba(255,235,180,.2),inset 0 0 0 1px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.85),0 6px 14px rgba(0,0,0,.45);font:700 19px/1 var(--f-display);letter-spacing:.02em;color:var(--brass-hi);text-decoration:none;text-shadow:0 2px 2px #000;white-space:nowrap}
.navi::before,.navi::after{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff0b8,#a8741a 70%);box-shadow:0 0 0 1px #000}
.navi:hover{color:#fff4c0;border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,235,180,.2),0 0 0 1px #000,0 0 18px rgba(255,200,40,.45)}
.navi.spiel{background:linear-gradient(#4f9a35,#1f4a12);color:#f4ffe2}
.navi.spiel:hover{background:linear-gradient(#5fb040,#2a5a18)}
.navi.aktiv{border-color:var(--gold);color:#fff4c0;box-shadow:inset 0 1px 0 rgba(255,235,180,.2),0 0 0 1px #000,0 0 16px rgba(255,200,40,.5)}
.menue-knopf{display:none}
.logo{display:block;text-align:center;text-decoration:none;line-height:.92}
.logo .l1{display:block;font:900 54px/.9 var(--f-display);background:linear-gradient(#fff4c0 10%,#f0c24a 45%,#a8741a 55%,#f5d27a 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #3a2208) drop-shadow(0 0 10px rgba(0,0,0,.85))}
.logo .l1 small{display:block;font-size:.42em;letter-spacing:.32em;margin-bottom:.08em}
.logo .l2{display:block;margin-top:6px;font:700 15px/1 var(--f-display);color:var(--leek);text-shadow:0 2px 2px #000;letter-spacing:.03em}

/* Heldenbereich und Inhalt */
.held{max-width:var(--breite);margin:0 auto;padding:36px var(--rand) 44px}
.held.schmal{padding-bottom:30px}
.kicker{font:800 13px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi);text-shadow:0 1px 2px #000}
.titel{margin:10px 0 14px;font:700 68px/1 var(--f-display);color:#fff4c0;text-shadow:0 3px 0 #3a2208,0 0 18px rgba(0,0,0,.85)}
.lead{max-width:780px;font:400 21px/1.5 var(--f-text);color:var(--ink);text-shadow:0 1px 3px #000}
.inhalt{width:100%;max-width:var(--breite);margin:0 auto;padding:8px var(--rand) 88px;display:flex;flex-direction:column;gap:44px}
.brass{background:var(--panel);border:2px solid var(--brass);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.85),0 6px 18px rgba(0,0,0,.5)}
.pnl{padding:28px 32px}
h1,h2,h3,h4{text-wrap:balance}
h2{margin:0;font:700 36px/1.1 var(--f-display);color:var(--brass-hi);text-shadow:1px 1px 2px #000}
h3{margin:0;font:700 22px/1.15 var(--f-display);color:#fff4c0}
.zier{height:2px;margin:12px 0 22px;background:linear-gradient(90deg,var(--brass),rgba(201,162,74,.15) 70%,transparent)}
.unterzeile{margin-top:6px;font:500 15px/1.45 var(--f-ui);color:var(--ink-dim)}

/* Knöpfe wie im Spiel */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:2px solid var(--brass);border-radius:4px;background:linear-gradient(#7a1f12,#4a0f08);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.5);font:800 16px/1 var(--f-ui);letter-spacing:.02em;color:#ffe9b0;text-decoration:none;text-shadow:1px 1px 1px #000;cursor:pointer;white-space:nowrap}
.btn:hover{color:#fff}
.btn.gruen,.btn.green{background:linear-gradient(#3f7a2a,#1f4a12);color:#f4ffe2}
.btn.gruen:hover,.btn.green:hover{background:linear-gradient(#4f9a35,#2a5a18)}
.btn.alt{background:linear-gradient(#3a2c1a,#1e150c)}
.btn.alt:hover{background:linear-gradient(#4a3a24,#2a1e10)}
.btn.breit{width:100%}

/* Fußleiste der Unterseiten */
.fuss2{margin-top:auto;border-top:1px solid rgba(201,162,74,.35);background:rgba(8,6,4,.9)}
.fuss2 .zeile{max-width:var(--breite);margin:0 auto;padding:22px var(--rand);display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;font:600 14px/1.3 var(--f-ui);color:var(--ink-dim)}
.fuss2 nav{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.fuss2 a{color:var(--ink-dim);text-decoration:none}
.fuss2 a:hover{color:#fff4c0;text-decoration:underline}

/* Serverstatus (live) */
.status{display:inline-flex;align-items:center;gap:8px;margin:0}
.status .punkt{flex:none;width:9px;height:9px;border-radius:50%;background:#8a8070;box-shadow:0 0 0 2px rgba(138,128,112,.25)}
.status.an .punkt{background:#6ee26b;box-shadow:0 0 0 2px rgba(110,226,107,.25),0 0 8px #6ee26b}
.status.aus .punkt{background:#e2574c;box-shadow:0 0 0 2px rgba(226,87,76,.25),0 0 8px #e2574c}

/* Mittlere Breite: Logo oben, Schilder darunter */
@media (max-width:1100px){
  .kopf{grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px}
  .kopf .nl,.kopf .nr{justify-content:center}
  .kopf .logo{order:-1}
}

/* Handy: schmale Leiste mit Logo und Menüknopf */
@media (max-width:760px){
  :root{--rand:16px}
  body{font-size:16px}
  .band .kopf{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;align-items:center;gap:12px;padding:12px var(--rand)}
  .band .kopf .logo{order:-2;justify-self:start;text-align:left}
  .band .kopf .logo .l1{font-size:32px}
  .band .kopf .logo .l1 small{letter-spacing:.24em}
  .band .kopf .logo .l2{margin-top:4px;font-size:11.5px}
  .band .menue-knopf{order:-1;display:inline-flex;align-items:center;gap:9px;justify-self:end;min-height:44px;padding:8px 12px;border:2px solid var(--brass);border-radius:4px;background:linear-gradient(rgba(52,38,23,.94),rgba(18,12,7,.94));box-shadow:0 0 0 1px #000,0 4px 10px rgba(0,0,0,.45);color:var(--brass-hi);font:700 18px/1 var(--f-display);text-shadow:0 2px 2px #000;cursor:pointer}
  .menue-knopf .striche{display:inline-flex;flex-direction:column;gap:4px}
  .menue-knopf .striche i{display:block;width:18px;height:2px;border-radius:1px;background:currentColor;box-shadow:0 1px 1px #000}
  html:not(.js) .band .menue-knopf{display:none}
  .menue-knopf{-webkit-tap-highlight-color:transparent}
  .kopf.offen .menue-knopf{border-color:var(--gold);color:#fff4c0}
  .band .kopf nav{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:8px}
  .band .kopf .navi{width:100%;justify-content:space-between;min-height:48px;font-size:20px}
  html.js .band .kopf:not(.offen) nav{display:none}
  .held{padding-top:18px;padding-bottom:28px}
  .titel{font-size:42px}
  .lead{font-size:18px}
  h2{font-size:30px}
  .pnl{padding:20px 18px}
  .inhalt{gap:30px;padding-bottom:56px}
  .fuss2 .zeile{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}