/* timoeiseler.de — eigene Gestaltung, angelehnt an Street-Art und Open-World-Spiele. Schriften lokal (SIL OFL). */
@font-face { font-family: "Anton"; src: url("/schrift/anton-latin-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Anton"; src: url("/schrift/anton-latin-ext-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Permanent Marker"; src: url("/schrift/permanent-marker-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/schrift/space-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/schrift/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/schrift/space-grotesk-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --asphalt: #141414; --beton: #1e1e1e; --putz: #2a2a2a;
  --kreide: #f4f1ea; --grau: #c9c3b6; --pink: #ff3d8b; --gelb: #ffc93c; --pink-hell: #ff7fb0;
  --kopf: "Anton", "Arial Narrow", Impact, sans-serif;
  --tag: "Permanent Marker", "Comic Sans MS", cursive;
  --text: "Space Grotesk", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--asphalt); color: var(--kreide); }
body { margin: 0; font-family: var(--text); font-size: 1.125rem; line-height: 1.45; }
a { color: var(--gelb); }
a:hover { color: var(--pink-hell); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.huelle { max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; }
@media (min-width: 720px) { .huelle { padding: 40px 48px 56px; } }

.leiste { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.marke { font-family: var(--kopf); font-size: 1.25rem; letter-spacing: 3px; text-decoration: none; color: var(--kreide); }
.hud { display: flex; align-items: center; gap: 10px; border: 3px solid var(--kreide); padding: 6px 12px; font-weight: 700; font-size: .85rem; letter-spacing: 2px; }
.hud .balken { width: 90px; height: 10px; border: 2px solid var(--kreide); display: flex; }
.hud .balken span { width: 35%; background: var(--pink); animation: laden 3.5s ease-in-out infinite alternate; }
@keyframes laden { from { width: 20%; } to { width: 55%; } }

.held { display: grid; gap: 28px; margin: 40px 0 48px; }
@media (min-width: 900px) { .held { grid-template-columns: 1fr 280px; align-items: end; } }
.tag { font-family: var(--tag); color: var(--pink); font-size: 1.9rem; transform: rotate(-3deg); display: inline-block; margin: 0; }
h1 { font-family: var(--kopf); font-weight: 400; font-size: clamp(4.5rem, 17vw, 10.5rem); line-height: .9; letter-spacing: 2px; margin: 8px 0 18px; text-shadow: .06em .06em 0 var(--pink); }
.unterzeile { font-size: clamp(1.25rem, 3.2vw, 1.75rem); max-width: 34ch; margin: 0; }
.drei { font-family: var(--tag); color: var(--gelb); font-size: 1.4rem; margin: 14px 0 0; transform: rotate(-1deg); }
.schild { border: 3px solid var(--kreide); box-shadow: 10px 10px 0 var(--gelb); background: var(--putz); padding: 22px; transform: rotate(2deg); font-family: var(--tag); font-size: 1.6rem; line-height: 1.2; }
.schild small { display: block; font-family: var(--text); font-size: 1rem; margin-top: 10px; color: var(--grau); }

.karten { display: grid; gap: 24px; }
@media (min-width: 820px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.karte { border: 3px solid var(--kreide); background: var(--beton); padding: 22px; box-shadow: 8px 8px 0 var(--pink); }
.karte.gelb { box-shadow: 8px 8px 0 var(--gelb); }
h2 { font-family: var(--kopf); font-weight: 400; font-size: 2rem; letter-spacing: 1px; margin: 0 0 12px; }
.sticker { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.sticker li { color: var(--asphalt); font-weight: 700; padding: 6px 12px; }
.sticker li:nth-child(3n+1) { background: var(--pink); transform: rotate(-2deg); }
.sticker li:nth-child(3n+2) { background: var(--gelb); transform: rotate(1.5deg); }
.sticker li:nth-child(3n) { background: var(--kreide); transform: rotate(-1deg); }

.fuss { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: .9rem; color: var(--grau); }
.fuss a { color: var(--grau); }

/* Textseiten */
.text { max-width: 70ch; }
.text h1 { font-size: clamp(3rem, 10vw, 5rem); }
.text h2 { font-size: 1.6rem; margin-top: 32px; }
.text p, .text li { color: var(--kreide); }

/* Kompass */
.kompass { display: grid; gap: 24px; margin-top: 28px; align-items: start; }
@media (min-width: 980px) { .kompass { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.stadt { position: relative; background: #1f2a2e; border: 4px solid var(--kreide); padding: 18px; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.stadt::before, .stadt::after { content: ""; position: absolute; background: #3b474b; z-index: 0; }
.stadt::before { left: calc(50% - 10px); top: 0; bottom: 0; width: 20px; }
.stadt::after { top: calc(50% - 10px); left: 0; right: 0; height: 20px; }
.bezirk { position: relative; z-index: 1; min-height: 104px; border: 4px solid var(--asphalt); color: var(--asphalt); font-family: var(--text); font-weight: 700; cursor: pointer; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; box-shadow: 6px 6px 0 #000; }
.bezirk .name { font-family: var(--kopf); font-weight: 400; font-size: clamp(.9rem, 4vw, 1.3rem); letter-spacing: 1px; hyphens: manual; max-width: 100%; }
.bezirk .typ { font-size: .78rem; letter-spacing: 1px; }
.bezirk[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--gelb), 8px 8px 0 4px var(--pink); }
.bezirk.letzter { grid-column: 1 / -1; }
.f-gelb { background: var(--gelb); } .f-pink { background: var(--pink); } .f-kreide { background: var(--kreide); } .f-eis { background: #dde7ea; } .f-grau { background: #bdb7aa; } .f-gruen { background: #7ccb52; } .f-stahl { background: #8796aa; }
.seite { display: grid; gap: 20px; align-content: start; }
.mission { border: 3px solid var(--kreide); background: var(--beton); padding: 18px; box-shadow: 6px 6px 0 var(--gelb); display: grid; gap: 10px; }
.mission .klein, .detail .klein { font-size: .8rem; font-weight: 700; letter-spacing: 2px; color: var(--gelb); }
.detail .klein { color: var(--pink-hell); }
.pruefung { text-align: left; font: 700 1.05rem var(--text); padding: 10px 12px; min-height: 44px; cursor: pointer; border: 3px solid var(--kreide); background: var(--asphalt); color: var(--kreide); }
.pruefung[aria-pressed="true"] { background: var(--gelb); color: var(--asphalt); }
.detail { border: 3px solid var(--kreide); background: var(--beton); padding: 18px; box-shadow: 6px 6px 0 var(--pink); display: grid; gap: 10px; }
.detail h2 { margin: 0; }
.plus { color: var(--gelb); font-weight: 700; margin: 0; }
.minus { color: var(--pink-hell); font-weight: 700; margin: 0; }
.fakt { color: #ddd6c8; font-size: 1rem; margin: 0; }
.merken { justify-self: start; font: 400 1.1rem var(--kopf); letter-spacing: 1px; background: var(--gelb); color: var(--asphalt); border: 3px solid var(--kreide); padding: 10px 16px; min-height: 48px; cursor: pointer; }
.hinweis { color: var(--grau); font-size: .95rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .hud .balken span { animation: none; } }