:root {
  color-scheme: light;
  --ink: #193b47;
  --muted: #587078;
  --paper: #fbfcf7;
  --ground: #edf3ef;
  --line: #cad8d2;
  --sea: #d8ecec;
  --river: #167e9b;
  --river-light: #a6dbe0;
  --land: #e5eddf;
  --coral: #e76d4f;
  --sun: #e9bd61;
  --mint: #c8ddca;
  --shadow: 0 14px 42px rgba(25, 59, 71, .08);
  font-family: "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --tap: 46px;
}

* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--ground); min-width: 320px; }
button, input { font: inherit; }
button { color: inherit; }
a { color: #145e78; }
a:hover { color: #0b455b; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid #bd4f38;
  outline-offset: 3px;
  position: relative;
  z-index: 3;
}
.state-group:focus:not(:focus-visible), .city-marker:focus:not(:focus-visible), .country-group:focus:not(:focus-visible), .island-marker:focus:not(:focus-visible), .river-hit:focus:not(:focus-visible),
.state-group:focus-visible, .city-marker:focus-visible, .country-group:focus-visible, .island-marker:focus-visible { outline: none; }
.state-group:focus-visible .state-shape { stroke: #a24c37; stroke-width: 3; }
.city-marker:focus-visible .capital-dot { stroke: #a24c37; stroke-width: 2; }
.river-hit:focus-visible + .river-line { stroke: #147b99; stroke-width: 12; }
.island-marker:focus-visible .island-dot { stroke: #a24c37; stroke-width: 2; }
.skip-link { position: absolute; left: 12px; top: -60px; padding: 12px 16px; border-radius: 9px; color: white; background: var(--ink); z-index: 10; }
.skip-link:focus { top: 12px; }

.site-header { min-height: 80px; padding: 12px max(20px, calc((100vw - 1440px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(25,59,71,.1); }
.brand { display: inline-flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.brand strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.brand-mark { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 13px 13px 13px 5px; background: var(--ink); transform: rotate(-4deg); }
.brand-mark span { display: block; width: 4px; border-radius: 4px; background: #b7d7cf; transform: rotate(28deg); }
.brand-mark span:nth-child(1) { height: 14px; }
.brand-mark span:nth-child(2) { height: 23px; background: #f0bd68; }
.brand-mark span:nth-child(3) { height: 18px; }
.header-progress { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.header-progress strong { color: var(--ink); }
.progress-star { color: #ce8742; font-size: 19px; }

main { max-width: 1440px; margin: 0 auto; padding: 0 24px 64px; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 42px 0 27px; }
.eyebrow { margin: 0 0 9px; color: #a44a35; font-weight: 800; font-size: 12px; letter-spacing: .065em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 700px; margin-bottom: 8px; font-size: clamp(28px, 4vw, 48px); line-height: 1.06; letter-spacing: -.055em; }
.intro-copy { max-width: 620px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.route-note { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; color: #3b5e66; font-size: 12px; font-weight: 700; white-space: nowrap; }
.route-note i { display: block; width: 22px; height: 2px; background: #6caab0; }
.route-note i::after { content: ""; display: block; width: 5px; height: 5px; margin: -2px auto 0; border-radius: 50%; background: var(--coral); }

.mode-nav { display: flex; gap: 7px; align-items: center; margin: 0 0 14px; padding: 6px; width: fit-content; max-width: 100%; border: 1px solid #d2dfd9; border-radius: 14px; background: rgba(251,252,247,.76); }
.mode-tab { min-height: var(--tap); padding: 0 15px; border: 0; border-radius: 10px; background: transparent; color: #49656c; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, color .18s ease; }
.mode-tab span { margin-right: 5px; font-size: 17px; vertical-align: -1px; }
.mode-tab:hover { background: #eaf1ed; color: var(--ink); }
.mode-tab.is-active { color: #fff; background: var(--ink); box-shadow: 0 3px 10px rgba(25,59,71,.18); }

.playground { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); align-items: stretch; gap: 14px; }
.map-card, .learning-card { min-width: 0; border: 1px solid #d5e0da; border-radius: 19px; background: var(--paper); box-shadow: var(--shadow); }
.map-card { overflow: hidden; }
.map-topline { min-height: 48px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e1e9e4; color: #587078; font-size: 12px; font-weight: 700; }
.map-topline > div { display: flex; gap: 10px; align-items: center; }
.map-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px 8px 8px 2px; color: #fff; background: #407c83; font-size: 10px; }
.map-scale { color: #799096; font-size: 10px; font-weight: 500; }
.map-stage { position: relative; overflow: hidden; background: var(--sea); }
.map-tools { min-height: 48px; padding: 7px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid #e1e9e4; background: #fbfcf7; }
.map-scope, .zoom-tools { display: flex; align-items: center; gap: 5px; }
.map-navigation-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.map-scope button, .zoom-tools button, .pan-tools button { min-height: 44px; min-width: 44px; padding: 6px 11px; border: 1px solid #d1dfd8; border-radius: 10px; background: #fff; color: #365e67; font-size: 14px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.pan-tools { display: flex; align-items: center; gap: 3px; }
.pan-tools[hidden] { display: none; }
.pan-tools button { padding: 4px; color: #1d5664; font-size: 18px; }
.map-stage.is-pannable { cursor: grab; touch-action: none; }
.map-stage.is-pannable:active { cursor: grabbing; }
.map-scope button.is-active { color: #fff; border-color: #2e6d75; background: #2e6d75; }
.zoom-tools span { min-width: 42px; color: #60777a; text-align: center; font-size: 11px; font-weight: 700; }
#germany-map { display: block; width: 100%; height: min(58vw, 680px); min-height: 470px; }
.sea-field { fill: #d8ecec; }
.compass-rose { display: none; }
#germany-map[data-scope="europe"] #state-layer,
#germany-map[data-scope="europe"] #river-layer,
#germany-map[data-scope="europe"] #island-layer,
#germany-map[data-scope="europe"] #former-capital-layer { display: none; }
#germany-map[data-scope="europe"] #city-layer .city-marker:not([data-city-state="DE-BE"]) { display: none; }
#germany-map[data-scope="europe"] #city-layer .city-label { font-size: 4px; }
.learning-map-bg { fill: #e8eee2; }
.state-shape { fill: #e8eedf; stroke: #718a7e; stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s ease, stroke-width .2s ease; }
.state-group:nth-child(3n) .state-shape { fill: #dce9dd; }
.state-group:nth-child(4n) .state-shape { fill: #e4eade; }
.state-group:hover .state-shape, .state-group:focus .state-shape { fill: #f2c07a; stroke: #a24c37; stroke-width: 2.7; }
.state-group.is-selected .state-shape { fill: #efaa78; stroke: #a54c38; stroke-width: 2.5; }
.state-group.is-correct .state-shape { fill: #a9d2ad; stroke: #315e47; stroke-width: 3; }
.state-group.is-wrong .state-shape { fill: #edc8b8; stroke: #a64835; stroke-width: 3; }
.state-group.historical-new .state-shape { fill: #78b5ae; stroke: #286a71; stroke-width: 2.5; }
.state-group.historical-old .state-shape { fill: #e6e6d4; }
.state-group.historical-ddr .state-shape { fill: #9eacd2; stroke: #4e5e91; stroke-width: 2; }
.state-group.historical-berlin .state-shape { fill: url(#history-pattern); stroke: #a54c38; stroke-width: 2; }
.state-group.historical-saar-pending .state-shape { fill: #f4e5c4; stroke: #be9048; stroke-dasharray: 4 3; }
.state-group.historical-saar-joined .state-shape { fill: #eec56d; stroke: #936823; stroke-width: 2.5; }
.state-code { fill: #3b5a5e; font-size: 13px; font-weight: 900; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #f5f7ef; stroke-width: 3px; stroke-linejoin: round; }
.state-name-backdrop { display: none; fill: #f5f7ef; fill-opacity: .8; pointer-events: none; }
.state-name { display: none; fill: #244b55; font-size: calc(var(--map-font-correction, 1) * 10px); font-weight: 900; letter-spacing: .035em; text-anchor: middle; pointer-events: none; }
#germany-map[data-detail="true"] .state-code { display: none; }
#germany-map[data-detail="true"] .state-name { display: block; }
#germany-map[data-detail="true"] .state-name-backdrop { display: block; }
#germany-map[data-detail="true"] .state-name[data-state-id="DE-BW"],
#germany-map[data-detail="true"] .state-name[data-state-id="DE-NW"] { font-size: calc(var(--map-font-correction, 1) * 7px); }
#germany-map[data-detail="true"] .state-name[data-state-id="DE-MV"] { font-size: calc(var(--map-font-correction, 1) * 6.5px); }
#germany-map[data-detail="true"] .state-name[data-state-id="DE-RP"],
#germany-map[data-detail="true"] .state-name[data-state-id="DE-SH"] { font-size: calc(var(--map-font-correction, 1) * 7.5px); }
#germany-map[data-detail="true"] .state-name[data-state-id="DE-SL"] { font-size: calc(var(--map-font-correction, 1) * 6px); }
.state-group.historical-new .state-code { fill: #123f4b; }
.state-group.historical-ddr .state-code { fill: #263963; }
.state-group.is-city-hovered .state-shape { fill: #f2c07a; stroke: #a24c37; stroke-width: 2.7; }
.history-country-label-back { fill: #354c78; opacity: .88; pointer-events: none; }
.history-country-label { fill: #fff; font-size: 13px; font-weight: 900; letter-spacing: .1em; pointer-events: none; }
.city-marker { cursor: pointer; }
.city-marker:hover .city-label, .city-marker:focus-visible .city-label { display: block; }
.city-hit { fill: transparent; stroke: transparent; pointer-events: all; }
.city-label { display: none; fill: #965638; font-size: calc(var(--map-font-correction, 1) * 8px); font-weight: 750; paint-order: stroke; stroke: #fbfcf7; stroke-width: 2px; stroke-linejoin: round; pointer-events: none; }
.city-marker:hover .city-label, .city-marker:focus-visible .city-label, .city-marker.is-selected .city-label, .city-marker.former-capital .city-label { display: block; }
.city-marker.former-capital .former-label { fill: #8b6421; }
#germany-map[data-scope="europe"] #city-layer .capital-dot:not([data-city-state="DE-BE"]) { display: none; }
.capital-dot { fill: #244f5d; fill-opacity: .96; stroke: #f8fbf5; stroke-width: 1.1; vector-effect: non-scaling-stroke; pointer-events: none; }
.former-capital-dot { fill: #d3a33f; fill-opacity: .9; }
#river-layer.quiz-unlabeled .river-label { display: none; }
.river-line { fill: none; stroke: #9bd4dd; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.river-hit { fill: none; stroke: transparent; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; }
.river-hit:hover + .river-line, .river-hit:focus + .river-line { stroke: #3e9eb0; stroke-width: 11; }
.river-hit.is-active + .river-line { stroke: #147b99; stroke-width: 12; stroke-dasharray: 12 7; animation: river-flow 1.8s linear infinite; }
.river-hit.is-correct + .river-line { stroke: #3c966d; stroke-width: 12; }
.river-hit.is-wrong + .river-line { stroke: #d4745e; stroke-width: 12; }
.river-label { pointer-events: none; }
.river-label-bg { fill: rgba(246,251,247,.97); stroke: #5b9eaa; stroke-width: 1; vector-effect: non-scaling-stroke; }
.river-name { fill: #14596e; font-size: 12px; font-weight: 900; letter-spacing: .02em; pointer-events: none; }
.river-group.is-active .river-label-bg { fill: #176b80; stroke: #fffdf7; stroke-width: 1.4; }
.river-group.is-active .river-name { fill: #fff; }
.river-group.is-correct .river-label-bg { fill: #327f5d; stroke: #fffdf7; }
.river-group.is-correct .river-name { fill: #fff; }
.neighbor-land { fill: #e5eddf; stroke: #98aaa0; stroke-width: .7; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.neighbor-land.neighbor-outline { fill: #f2ead4; stroke: #8ea49b; stroke-width: .9; }
.neighbor-land.germany-outline { fill: #c9dfd2; stroke: #597a6b; stroke-width: 1.8; }
.germany-base { fill: #e8eedf; stroke: #718a7e; stroke-width: 1.8; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.europe-country-label { fill: #35545d; font-size: 7px; font-weight: 900; letter-spacing: .035em; text-anchor: middle; pointer-events: none; }
.europe-capital-dot { fill: #e76d4f; stroke: #fffdf7; stroke-width: .8px; vector-effect: non-scaling-stroke; pointer-events: none; }
.europe-country-label.is-long { font-size: calc(var(--map-font-correction, 1) * 5.8px); letter-spacing: .01em; }
.europe-capital-label { display: none; fill: #624739; font-size: 7.2px; font-weight: 800; paint-order: stroke; stroke: #f6f3e8; stroke-width: .45px; stroke-linejoin: round; pointer-events: none; }
#germany-map[data-scope="europe"] #country-layer .country-name,
#germany-map[data-scope="europe"] #country-layer .country-capital-label,
#germany-map[data-scope="europe"] #country-layer .neighbor-capital-dot,
#germany-map[data-scope="europe"] #country-layer .neighbor-island-label { display: none; }
#germany-map[data-scope="europe"] #city-layer .city-marker { display: none; }
.country-group { cursor: pointer; }
.country-name { fill: #35545d; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-anchor: middle; paint-order: stroke; stroke: #f8f8ef; stroke-width: .8px; stroke-linejoin: round; pointer-events: none; }
.country-name-luxemburg { font-size: 6.5px; letter-spacing: .02em; }
.country-group:hover .country-name, .country-group:focus-visible .country-name { fill: #9b4c38; }
.country-capital-label { fill: #624739; font-size: 9px; font-weight: 800; paint-order: stroke; stroke: #f9f8ef; stroke-width: .8px; stroke-linejoin: round; pointer-events: none; }
.neighbor-capital-dot { fill: #e76d4f; stroke: #fffdf7; stroke-width: 1.1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.neighbor-island-label { fill: #6c5b6c; font-size: 8px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #f6f3eb; stroke-width: 2px; pointer-events: none; }
.neighbor-region { pointer-events: none; }
.island-dot { fill: #d9a84e; stroke: #fffdf7; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.island-name { fill: #765135; font-size: 10px; font-weight: 800; paint-order: stroke; stroke: #d8ecec; stroke-width: 3px; pointer-events: none; }
.island-name-on-hover { display: none; }
.island-marker.is-hovered .island-name-on-hover, .island-marker:focus-visible .island-name-on-hover { display: block; }
.island-hit { fill: transparent; stroke: transparent; pointer-events: all; }
.island-halo { fill: none; stroke: #e76d4f; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.island-marker { cursor: pointer; }
.island-marker.is-hovered .island-halo, .island-marker:focus-visible .island-halo { opacity: 1; }
.island-marker.is-hovered .island-dot, .island-marker:focus-visible .island-dot { fill: #e76d4f; stroke: #9b4c38; stroke-width: 2; }
.sea-label { fill: #4b8790; font-size: 17px; font-weight: 800; letter-spacing: .04em; text-anchor: middle; opacity: .86; pointer-events: none; }
.sea-sub { fill: #5c999f; font-size: 10px; text-anchor: middle; pointer-events: none; }
.sea-waves { fill: none; stroke: #438b9a; stroke-width: 1.8; stroke-linecap: round; opacity: .75; }
.compass-face { fill: rgba(251,252,247,.94); stroke: #93aca5; stroke-width: 1.2; filter: url(#soft-shadow); }
#germany-map[data-quiz-target]:not([data-quiz-target="discover"]) #state-layer,
#germany-map[data-quiz-target]:not([data-quiz-target="discover"]) #city-layer,
#germany-map[data-quiz-target]:not([data-quiz-target="discover"]) #river-layer,
#germany-map[data-quiz-target]:not([data-quiz-target="discover"]) #island-layer,
#germany-map[data-quiz-target]:not([data-quiz-target="discover"]) #former-capital-layer,
#germany-map[data-quiz-target]:not([data-quiz-target="discover"]) #country-layer { pointer-events: none; }
#germany-map[data-quiz-target="state"] #state-layer,
#germany-map[data-quiz-target="city"] #city-layer,
#germany-map[data-quiz-target="river"] #river-layer,
#germany-map[data-quiz-target="island"] #island-layer { pointer-events: all; }
#germany-map[data-quiz-target="state"] #city-layer .city-hit,
#germany-map[data-quiz-target="state"] #island-layer .island-hit,
#germany-map[data-quiz-target="state"] #former-capital-layer .city-hit,
#germany-map[data-quiz-target="state"] #river-layer .river-hit,
#germany-map[data-quiz-target="city"] #state-layer .state-shape,
#germany-map[data-quiz-target="city"] #island-layer .island-hit,
#germany-map[data-quiz-target="city"] #former-capital-layer .city-hit,
#germany-map[data-quiz-target="city"] #river-layer .river-hit,
#germany-map[data-quiz-target="river"] #state-layer .state-shape,
#germany-map[data-quiz-target="river"] #city-layer .city-hit,
#germany-map[data-quiz-target="river"] #island-layer .island-hit,
#germany-map[data-quiz-target="river"] #former-capital-layer .city-hit,
#germany-map[data-quiz-target="island"] #state-layer .state-shape,
#germany-map[data-quiz-target="island"] #city-layer .city-hit,
#germany-map[data-quiz-target="island"] #former-capital-layer .city-hit,
#germany-map[data-quiz-target="island"] #river-layer .river-hit,
#germany-map[data-quiz-target="choice"] #state-layer .state-shape,
#germany-map[data-quiz-target="choice"] #city-layer .city-hit,
#germany-map[data-quiz-target="choice"] #island-layer .island-hit,
#germany-map[data-quiz-target="choice"] #former-capital-layer .city-hit,
#germany-map[data-quiz-target="choice"] #river-layer .river-hit { pointer-events: none; }
#germany-map[data-quiz-target="state"] #state-layer .state-shape,
#germany-map[data-quiz-target="city"] #city-layer .city-hit,
#germany-map[data-quiz-target="island"] #island-layer .island-hit { pointer-events: all; }
#germany-map[data-quiz-target="river"] #river-layer .river-hit { pointer-events: stroke; }
.map-compass { position: absolute; z-index: 2; top: 12px; right: 13px; width: 62px; height: 62px; border: 1px solid #9cb3aa; border-radius: 50%; display: grid; place-items: center; color: #345a62; background: rgba(251,252,247,.94); box-shadow: 0 3px 10px rgba(25,59,71,.14); font-size: 9px; font-weight: 900; }
.map-compass span { position: absolute; line-height: 1; }
.compass-north-label { top: 5px; }
.compass-east-label { right: 6px; }
.compass-south-label { bottom: 5px; }
.compass-west-label { left: 6px; }
.map-compass .compass-arrow { color: #df694e; font-size: 26px; }
.compass-lines { fill: none; stroke: #a8bdb5; stroke-width: 1.1; }
.compass-north { fill: #e76d4f; stroke: #a54732; stroke-width: .6; }
.compass-east { fill: #8ea69d; }
.compass-south { fill: #d6e0d8; stroke: #98aaa1; stroke-width: .6; }
.compass-west { fill: #8ea69d; }
.compass-label { fill: #365e67; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-anchor: middle; paint-order: stroke; stroke: #fbfcf7; stroke-width: 2.5px; pointer-events: none; }
.state-code, .city-label, .country-name, .country-capital-label, .neighbor-island-label, .island-name, .river-name, .sea-label, .europe-country-label { font-size: calc(var(--map-font-correction, 1) * 11px); }
.state-code { font-size: calc(var(--map-font-correction, 1) * 13px); }
.city-marker.federal-city .city-label { font-size: calc(var(--map-font-correction, 1) * 12px); }
.country-name { font-size: calc(var(--map-font-correction, 1) * 10px); }
.country-name-luxemburg { font-size: calc(var(--map-font-correction, 1) * 5.5px); letter-spacing: .02em; }
.country-capital-label { font-size: calc(var(--map-font-correction, 1) * 9px); }
.neighbor-island-label { font-size: calc(var(--map-font-correction, 1) * 5.5px); }
.europe-country-label { font-size: calc(var(--map-font-correction, 1) * 7px); }
.europe-country-label.is-long { font-size: calc(var(--map-font-correction, 1) * 5.8px); }
.europe-capital-label { font-size: calc(var(--map-font-correction, 1) * 7.2px); }
.island-name { font-size: calc(var(--map-font-correction, 1) * 10px); }
.river-name { font-size: calc(var(--map-font-correction, 1) * 12px); }
.sea-label { font-size: calc(var(--map-font-correction, 1) * 17px); }
.map-pin { fill: #e76d4f; stroke: #fffdf7; stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-legend { min-height: 42px; padding: 8px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; border-top: 1px solid #e1e9e4; color: #506c73; font-size: 10px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border: 2px solid #174858; border-radius: 50%; background: #fffdf7; }
.legend-capital { border-color: #f8fbf5; background: #4f7b80; }
.legend-europe-capital { border-color: #fff; background: #e76d4f; }
.legend-federal { border-color: #fff; background: var(--coral); }
.legend-former { border-color: #fff; background: #d6a744; }
.legend-line { display: inline-block; width: 17px; height: 4px; border-radius: 4px; background: var(--river); }
.map-error { position: absolute; inset: 20px; display: grid; place-items: center; padding: 20px; border-radius: 14px; background: rgba(251,252,247,.94); color: #833c2d; font-weight: 700; text-align: center; }
.map-error[hidden] { display: none; }

.learning-card { padding: 22px 22px 20px; display: flex; flex-direction: column; min-height: 590px; }
.panel-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: #a34c36; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.panel-kicker i { display: inline-block; width: 18px; height: 3px; border-radius: 9px; background: var(--coral); }
.panel-title { margin: 0 0 8px; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.07; letter-spacing: -.045em; }
.panel-lede { margin: 0 0 18px; color: #597178; font-size: 14px; line-height: 1.55; }
.fact-box { margin: 0 0 11px; padding: 14px 15px; border: 1px solid #dce6df; border-radius: 13px; background: #f4f7f0; }
.fact-box p:last-child { margin-bottom: 0; }
.fact-label { display: block; margin-bottom: 5px; color: #58767b; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fact-value { color: var(--ink); font-size: 17px; font-weight: 800; line-height: 1.35; }
.fact-copy { color: #526d72; font-size: 13px; line-height: 1.5; }
.relation-row { display: flex; flex-wrap: wrap; gap: 6px; }
.relation-chip { min-height: 31px; padding: 6px 10px; border: 1px solid #c9d9d1; border-radius: 999px; color: #315b64; background: #fff; font-size: 11px; font-weight: 700; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.primary-button, .secondary-button, .choice-button, .history-button, .river-select, .install-button, .next-button { min-height: var(--tap); padding: 10px 14px; border: 0; border-radius: 10px; font-weight: 800; font-size: 13px; cursor: pointer; transition: background-color .16s ease, transform .16s ease; }
.primary-button, .next-button { color: #fff; background: #1d5664; }
.primary-button:hover, .next-button:hover { background: #143e4b; }
.secondary-button { color: #315b64; border: 1px solid #cbdad3; background: #fbfcf7; }
.secondary-button:hover { background: #e9f0eb; }
.primary-button:active, .secondary-button:active, .choice-button:active { transform: translateY(1px); }
.panel-note { margin: 14px 0 0; color: #738990; font-size: 11px; line-height: 1.45; }
.list-heading { margin: 16px 0 7px; color: #577279; font-size: 11px; font-weight: 800; }
.river-list, .island-list { display: flex; flex-wrap: wrap; gap: 7px; }
.river-select { min-height: 39px; padding: 8px 11px; border: 1px solid #c6dcd9; color: #205d70; background: #f3f8f4; font-size: 12px; }
.river-select:hover, .river-select.is-selected { color: #fff; border-color: #1b6e84; background: #1b6e84; }
.quiz-progress { display: flex; justify-content: space-between; margin: -2px 0 12px; color: #6d8387; font-size: 11px; font-weight: 700; }
.quiz-meter { height: 6px; overflow: hidden; margin-bottom: 18px; border-radius: 8px; background: #e2ebe4; }
.quiz-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: #67a69b; transition: width .25s ease; }
.quiz-feedback { min-height: 24px; margin: 10px 0 0; color: #356945; font-size: 13px; font-weight: 800; }
.quiz-feedback.is-wrong { color: #a44934; }
.quiz-extra { margin-top: 7px; color: #557177; font-size: 12px; }
.quiz-extra summary { width: fit-content; padding: 5px 0; color: #286b76; font-weight: 800; cursor: pointer; }
.quiz-extra p { margin: 2px 0 0; padding: 9px 11px; border-left: 3px solid #80b3a5; border-radius: 0 8px 8px 0; background: #f0f5ef; line-height: 1.5; }
.choice-list { display: grid; gap: 8px; margin-top: 12px; }
.mission-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.mission-topic-card { min-height: 132px; padding: 13px; display: grid; align-content: start; justify-items: start; gap: 6px; border: 1px solid #cfddd6; border-radius: 13px; color: #315b64; background: #fff; text-align: left; cursor: pointer; touch-action: manipulation; }
.mission-topic-card:hover, .mission-topic-card:focus-visible { border-color: #78a99d; background: #f0f6ef; }
.mission-topic-icon { font-size: 22px; line-height: 1; }
.mission-topic-title { color: #204d59; font-size: 13px; font-weight: 800; line-height: 1.3; }
.mission-topic-copy { color: #637d81; font-size: 11px; line-height: 1.4; }
.mission-topic-status { margin-top: 3px; color: #735b35; font-size: 10px; font-weight: 800; line-height: 1.4; }
.mission-topic-status.is-complete { color: #356945; }
.mission-topic-action { margin-top: auto; padding-top: 4px; color: #1d6470; font-size: 11px; font-weight: 800; }
.connection-state-list { max-height: min(48vh, 420px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: auto; margin-top: 8px; padding: 2px; }
.connection-state-list .choice-button { min-height: 46px; padding: 8px 10px; font-size: 12px; }
.connection-state-button small { display: block; margin-top: 3px; color: #74898b; font-size: 9px; font-weight: 600; line-height: 1.35; }
.mission-retry-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; color: #715b34; background: #f8f3e6; font-size: 12px; line-height: 1.45; }
.choice-button { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; color: #315b64; border: 1px solid #cfddd6; background: #fff; }
.choice-button:hover { background: #eef5ef; border-color: #7ca99d; }
.choice-button.is-right { border-color: #77a982; background: #e4f1e4; }
.choice-button.is-wrong { border-color: #d78973; background: #fae9e1; }
.history-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 3px 0 15px; padding: 5px; border-radius: 12px; background: #e9f0eb; }
.history-button { min-height: 40px; padding: 7px 5px; color: #557177; background: transparent; font-size: 11px; }
.history-button.is-active { color: #fff; background: #1e5865; }
.history-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 9px; border: 1px solid #d7e2dc; border-radius: 99px; color: #48676e; font-size: 11px; font-weight: 800; }
.history-tag::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: #72b5ad; }
.history-tag.old::before { background: #e6e6d4; border: 1px solid #aeb7a7; }
.history-tag.ddr::before { background: #9eacd2; border: 1px solid #4e5e91; }
.history-tag.berlin::before { background: repeating-linear-gradient(45deg,#dce9e5 0 3px,#aac8c4 3px 5px); }
.history-tag.joined::before { background: #d6a744; }
.history-text { color: #526d72; font-size: 14px; line-height: 1.58; }
.history-legend { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.history-legend .history-tag { margin-bottom: 10px; }
.fact-separator { height: 1px; margin: 14px 0; background: #e0e8e1; }
.island-list span { padding: 6px 9px; border-radius: 9px; color: #765135; background: #f5ebd4; font-size: 11px; font-weight: 700; }
.mission-start { padding: 15px; border-left: 3px solid #e3a25e; border-radius: 0 12px 12px 0; background: #f8f3e6; color: #506b70; font-size: 13px; line-height: 1.5; }
.mission-start strong { color: #294e58; }
.install-button { margin-left: auto; color: #315b64; border: 1px solid #cfddd6; background: transparent; }
.install-button[hidden] { display: none; }

.quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 16px 0 0; overflow: hidden; border: 1px solid #d5e0da; border-radius: 15px; background: #d5e0da; }
.quick-facts div { min-height: 66px; padding: 12px 18px; display: flex; align-items: center; gap: 10px; background: rgba(251,252,247,.8); }
.quick-facts strong { color: #347178; font-size: 23px; letter-spacing: -.04em; }
.quick-facts span { color: #5d767a; font-size: 11px; font-weight: 700; }
.site-footer { max-width: 1392px; margin: 0 auto; padding: 0 24px 32px; color: #71868a; font-size: 11px; line-height: 1.6; }
.site-footer p { margin-bottom: 7px; }
.site-footer details { max-width: 760px; }
.site-footer summary { width: fit-content; cursor: pointer; color: #446970; font-weight: 700; }

@keyframes river-flow { to { stroke-dashoffset: -38; } }
@media (min-width: 1100px) {
  .playground { grid-template-columns: minmax(0, 1.34fr) minmax(355px, .66fr); }
}
@media (max-width: 850px) {
  main { padding: 0 16px 44px; }
  .intro { align-items: start; flex-direction: column; gap: 15px; padding: 32px 0 22px; }
  .route-note { padding: 0; }
  .playground { grid-template-columns: 1fr; }
  #germany-map { height: min(108vw, 690px); min-height: 450px; }
  .learning-card { min-height: 0; }
  .quick-facts div { padding: 10px; gap: 7px; }
}
@media (max-width: 520px) {
  .site-header { min-height: 67px; padding: 10px 15px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand strong { font-size: 13px; }
  .brand small { font-size: 10px; }
  .header-progress { font-size: 11px; gap: 5px; }
  main { padding: 0 10px 34px; }
  .intro { padding: 26px 4px 18px; }
  h1 { font-size: 32px; }
  .intro-copy { font-size: 14px; }
  .mode-nav { width: 100%; gap: 2px; justify-content: space-between; padding: 4px; }
  .mode-tab { min-height: 43px; padding: 0 8px; font-size: 10px; }
  .mode-tab span { margin-right: 2px; font-size: 15px; }
  .map-card, .learning-card { border-radius: 14px; }
  .map-topline { min-height: 43px; padding: 0 10px; font-size: 10px; }
  .map-scale { max-width: 92px; text-align: right; font-size: 9px; }
  #germany-map { height: 116vw; min-height: 400px; max-height: 580px; }
  .map-tools { padding: 6px 8px; flex-wrap: wrap; justify-content: flex-start; }
  .map-scope button { padding: 6px 8px; font-size: 10px; }
  .zoom-tools { gap: 3px; }
  .map-navigation-controls { order: 2; width: 100%; justify-content: flex-end; gap: 6px; }
  .map-scope { order: 1; }
  .zoom-tools button, .pan-tools button { width: 44px; min-height: 44px; padding: 4px; }
  .pan-tools { justify-content: flex-end; }
  .map-legend { gap: 8px 12px; padding: 8px 10px; font-size: 9px; }
  .learning-card { padding: 18px 15px; }
  .mission-topic-grid { grid-template-columns: 1fr; }
  .mission-topic-card { min-height: 78px; grid-template-columns: 30px 1fr; align-items: start; column-gap: 8px; }
  .mission-topic-icon { grid-row: span 2; }
  .connection-state-list { grid-template-columns: 1fr; max-height: 42vh; }
  .quick-facts { grid-template-columns: repeat(2, 1fr); }
  .quick-facts div { min-height: 54px; padding: 8px 11px; }
  .quick-facts strong { font-size: 20px; }
  .site-footer { padding: 0 14px 24px; }
  .route-note { gap: 6px; font-size: 11px; }
  .route-note i { width: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}