/* Homepage playglyphguard.com – Entwurf B „Pergament, hell lesbar“ (Marcel 09.11.2026).
   Farben und Schriften wie im Spiel: Navy-Kopf mit Goldrand, Pergament-Flächen, Paytone One + Rubik. */
@font-face{font-family:Paytone;src:url(/schriften/PaytoneOne-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Rubik;src:url(/schriften/Rubik-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+20AC}
@font-face{font-family:Rubik;src:url(/schriften/Rubik-latin-ext.woff2) format("woff2");font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
:root{--gold:#ffdc72;--gold2:#9e5b18;--navy:#0c2947;--navy2:#06162a;--perg:#f7efd9;--perg2:#e9dcb8;--braun:#8a5a12}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.55 Rubik,"Trebuchet MS","Segoe UI",sans-serif;color:var(--navy);background:var(--perg2);overflow-x:hidden}
h1,h2,h3{font-family:Paytone,"Trebuchet MS",sans-serif;font-weight:400}
a{color:inherit}
img{max-width:100%;height:auto}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Kopfleiste */
.kopf{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;padding:10px 16px;color:#f3e7c9;
  background:linear-gradient(#163a5b,#0c2947);border-bottom:3px solid var(--gold);box-shadow:0 2px 0 var(--gold2)}
.kopf .marke img{display:block;height:34px;width:auto}
.kopf a{text-decoration:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-weight:600;font-size:15px}
.nav a.an{color:var(--gold)}
.nav .sprache{border:2px solid var(--gold);border-radius:10px;padding:2px 10px;font-size:13px}
.menue{display:none;margin-left:auto;position:relative}
.menue summary{list-style:none;width:42px;height:42px;border:2px solid var(--gold);border-radius:12px;display:grid;place-items:center;
  font:900 22px sans-serif;color:var(--gold);background:var(--navy2);cursor:pointer}
.menue summary::-webkit-details-marker{display:none}
.menue nav{position:absolute;right:0;top:52px;min-width:220px;display:flex;flex-direction:column;padding:8px;border-radius:16px;
  background:var(--navy);border:3px solid var(--gold);box-shadow:0 0 0 2px var(--gold2),0 10px 24px rgba(0,0,0,.45)}
.menue nav a{padding:12px 14px;border-radius:10px;font-weight:600}
.menue nav a.an{color:var(--gold);background:var(--navy2)}
@media (max-width:760px){.nav{display:none}.menue{display:block}}

/* Startbild */
.held{position:relative;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:40px 16px 80px;color:#f3e7c9;background:#0c2947 url(/bilder/hintergrund.webp) center 35%/cover}
.held::after{content:"";position:absolute;inset:auto 0 0 0;height:170px;background:linear-gradient(rgba(233,220,184,0),var(--perg2))}
.held>*{position:relative;z-index:1}
.held .logo{width:min(560px,92%);filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.held p{max-width:520px;font-size:18px;font-weight:600;text-shadow:0 2px 6px #000;margin:10px 0 22px;padding:10px 16px;border-radius:14px;background:rgba(6,22,42,.55)}
.unter{font-size:13px;margin-top:12px;padding:3px 10px;border-radius:10px;background:rgba(6,22,42,.55)}
@media (max-width:760px){.held{min-height:600px}.held p{font-size:16px}}

.knopf{display:inline-block;padding:14px 28px;border-radius:16px;font:400 19px Paytone,"Trebuchet MS",sans-serif;color:#3a2406;text-decoration:none;cursor:pointer;
  background:linear-gradient(#ffe9a3,#f5b93a 55%,#d98a1c);border:3px solid #fff2c4;box-shadow:0 0 0 2px var(--gold2),0 6px 0 #7a420e,0 10px 18px rgba(0,0,0,.35)}
.knopf:active{transform:translateY(3px)}
.knopf.klein{font-size:16px;padding:11px 20px}
.knopf.rot{color:#fff;background:linear-gradient(#ef5a4a,#b3261e);border-color:#ffc9c0;box-shadow:0 0 0 2px #6e120c,0 5px 0 #6e120c}
.knopf.grau{color:var(--navy);background:linear-gradient(#fffaf0,#e6d9b6);border-color:#fff;box-shadow:0 0 0 2px #b89a5a,0 5px 0 #8f7646}
.knopf[disabled]{opacity:.6;cursor:wait}

/* Inhalt */
.inhalt{background:linear-gradient(var(--perg2),#e2d1a6);padding:10px 16px 50px;min-height:60vh}
.wrap{max-width:1040px;margin:0 auto}
h2{font-size:28px;color:var(--navy);text-align:center;margin:34px 0 18px;text-shadow:0 2px 0 #fff4d6}
.klassen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:760px){.klassen{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.kl b{font-size:12px}}
.kl{border-radius:16px;padding:10px 6px;text-align:center;color:#f3e7c9;background:linear-gradient(#163a5b,#0c2947);border:2px solid var(--gold);box-shadow:0 0 0 2px var(--gold2)}
.kl img{width:100%;aspect-ratio:1;object-fit:contain}
.kl b{display:block;font:400 14px Paytone,"Trebuchet MS",sans-serif;overflow-wrap:break-word;hyphens:manual}
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:760px){.news{grid-template-columns:1fr}}
.karte{border-radius:18px;padding:16px 18px;background:var(--perg);color:var(--navy);border:3px solid var(--gold);box-shadow:0 0 0 2px var(--gold2),0 8px 18px rgba(0,0,0,.18)}
.karte .dat{font-size:13px;font-weight:700;color:var(--braun)}
.karte h3{margin:2px 0 6px;font-size:20px}
.karte ul{margin:0 0 6px;padding-left:20px}
.karte p{margin:0 0 8px}
.mehr{text-align:center;margin-top:22px}
.seite{max-width:760px;margin:0 auto;padding:6px 0 20px}
.seite h1{font-size:32px;text-align:center;margin:26px 0 8px;text-shadow:0 2px 0 #fff4d6;overflow-wrap:anywhere}
.lead{text-align:center;margin:0 0 20px;color:#4b3a1c}
.seite .karte+.karte,.news-liste .karte+.karte{margin-top:16px}

/* Lese-Seiten (Hilfe, Rechtstexte): wie die Lese-Ansicht im Spiel */
.lesen{padding:20px 22px 26px;overflow-wrap:break-word}
.lesen h2{font-size:18px;color:var(--braun);text-align:left;text-shadow:none;margin:22px 0 6px}
.lesen h2:first-child{margin-top:4px}
.lesen mark{background:#ffe27a;color:#3a2406;border-radius:4px;padding:0 3px}
.lesen pre{white-space:pre-wrap;font:12px/1.4 ui-monospace,Menlo,monospace;background:#efe4c6;padding:10px;border-radius:10px;overflow-x:auto}
.entwurf{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:#ffe1d6;border:2px solid #c2410c;color:#7c2d12;font-weight:700;font-size:13px}

/* Konto löschen */
.schritt{display:flex;gap:14px;align-items:flex-start}
.schritt .breit{flex:1;min-width:0}
.nr{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:400 18px Paytone,"Trebuchet MS",sans-serif;color:#3a2406;
  background:radial-gradient(#ffe9a3,#e3a12e);border:2px solid #fff2c4;box-shadow:0 0 0 2px var(--gold2)}
.pfad{display:inline-block;background:#efe4c6;padding:1px 8px;border-radius:8px;font-weight:700}
.feld{display:block;width:100%;margin:8px 0;padding:12px 14px;border-radius:12px;border:2px solid #b89a5a;background:#fffaf0;font:16px Rubik,sans-serif;color:var(--navy)}
.feld:focus{outline:3px solid var(--gold);border-color:var(--gold2)}
#loeschen .knopf{margin-top:6px}
#schritt2{margin-top:14px;padding:14px;border-radius:14px;background:#ffe1d6;border:2px solid #c2410c}
#schritt2 p{margin:0 0 10px;font-weight:600;color:#7c2d12}
#schritt2 .knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.meldung{min-height:1.4em;margin:10px 0 0;font-weight:700}
.meldung.ok{color:#166534}
.meldung.fehler{color:#b3261e}
.klein{font-size:13px;color:#4b3a1c}

/* Fußzeile */
.fuss{background:var(--navy2);border-top:3px solid var(--gold);padding:22px 16px 30px;text-align:center;font-size:14px;color:#cdbf9b}
.fuss a{text-decoration:none}
.fuss .links{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;font-weight:600;color:#f3e7c9;margin-bottom:10px}