/* Gemeinsamer Look: Kartentisch – eine Papierkarte auf einem Holztisch im Lampenlicht, der Kreis leuchtet golden. */
:root {
  --grund: #3a2414;
  --grund-hell: rgba(255, 236, 200, .08);
  --flaeche: rgba(255, 236, 200, .13);
  --linie: rgba(255, 220, 170, .24);
  --text: #fbf1e1;
  --leise: #d9c2a0;
  --akzent: #ffcc33;
  --rot: #ff5a5f;
  --gruen: #3ddc84;
  --papier: #f3e4bf;
  --tinte: #3b2a1c;
  --siegel: #9b2f1d;
  --schrift: 'Barlow', system-ui, sans-serif;
  --titel: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  /* Holz: Dielen mit Fugen, grobe Maserung (Rauschen längs gestreckt), feine Fasern, Grundton */
  --holz:
    repeating-linear-gradient(90deg, rgba(255, 215, 160, .05) 0 19vw, rgba(0, 0, 0, .07) 19vw 38vw, rgba(255, 200, 140, .02) 38vw 57vw),
    repeating-linear-gradient(90deg, transparent 0 calc(19vw - 3px), rgba(20, 8, 0, .6) calc(19vw - 3px) calc(19vw - 1px), rgba(255, 210, 160, .12) calc(19vw - 1px) 19vw),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='1400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.0016' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.06 0 0 0 0 0.02 2.6 0 0 0 -0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 700px 1400px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09 0.004' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.04 0 0 0 0 0.01 2 0 0 0 -0.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 300px 600px,
    linear-gradient(180deg, #84522f, #5e3820);
  --tisch: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255, 196, 100, .3), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(12, 5, 0, .78) 100%), var(--holz);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--schrift); color: var(--text); background: var(--tisch); background-color: var(--grund); }
h1, h2, h3, .titel { font-family: var(--titel); font-weight: 700; margin: 0; letter-spacing: .01em; }
a { color: var(--akzent); }

.knopf {
  font: inherit; font-family: var(--titel); font-weight: 700; font-size: 1.2rem; letter-spacing: .03em;
  color: var(--text); cursor: pointer; padding: .55em 1.3em; border-radius: .5em;
  border: 2px solid var(--linie); background: var(--flaeche);
  transition: transform .08s, background .15s; touch-action: manipulation;
}
.knopf:active { transform: translateY(2px); }
.knopf:disabled { opacity: .45; cursor: default; transform: none; }
.knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #1a1400; }

.feld {
  font: inherit; font-size: 1.3rem; padding: .5em .7em; width: 100%;
  border: 2px solid var(--linie); border-radius: .5em; color: var(--text); background: var(--grund-hell);
}
.feld:focus { outline: 3px solid var(--akzent); outline-offset: 1px; }

.leise { color: var(--leise); }
.punkt { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

.karte-kachel { background: var(--papier); color: var(--tinte); border-radius: .3em; padding: 1.2em 1.6em; box-shadow: 0 .6em 1.6em rgba(20, 8, 0, .5); }

/* Sprachumschalter EN · DE */
.sprachwahl { display: inline-flex; border: 1.5px solid var(--linie); border-radius: 2em; overflow: hidden; }
.sprachwahl button { font: inherit; font-family: var(--titel); font-size: .95rem; padding: .25em .8em; border: 0; background: transparent; color: var(--leise); cursor: pointer; }
.sprachwahl button.an { background: var(--linie); color: var(--text); }

.osm { font-size: 11px; color: #b89d7a; }
.osm a { color: inherit; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }