/*
 * BePartOfGreat — Website in der Gestaltungsrichtung „Fläche".
 *
 * Dieselben Regeln wie in der App (src/ui/theme.ts): flache Farbfelder, harte Kanten,
 * keine Verläufe, keine weichen Schatten, eckige Ecken. Tiefe entsteht dadurch, dass
 * Farbflächen aneinanderstoßen, nicht durch Schichten.
 *
 * Ocker gehört den Punkten. Sonst nirgends.
 */

:root {
  --navy: #16283F;
  --marine: #1F3A5F;
  --cream: #F1EBDD;
  --ocher: #C89B3C;
  --terra: #B4472F;
  --green: #2E6650;
  --green-text: #8FBFA5;

  --ground-a: #DEE6DC;
  --ground-b: #EFE4CB;
  --ground-c: #F0DED3;
  --ground-d: #E8E1E6;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(4.5rem, 11vh, 9rem);
  --hair-dark: rgba(22, 40, 63, 0.14);
  --hair-light: rgba(241, 235, 221, 0.16);
}

@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-300.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

/* Ohne das schlaegt jedes display: flex das hidden-Attribut. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.1875rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--terra); color: var(--cream); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--terra);
  color: var(--cream);
  padding: 0.75rem 1rem;
  z-index: 20;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 3px;
}
.dark :focus-visible { outline-color: var(--ocher); }

/* ---------------------------------------------------------------- Bausteine */

.wrap {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section-y); }

.dark { background: var(--navy); color: var(--cream); }
.light { background: var(--cream); color: var(--navy); }
.ground { background: var(--ground-a); color: var(--navy); }

.caps {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.faint { color: rgba(241, 235, 221, 0.6); }
.muted { color: rgba(22, 40, 63, 0.55); }

/* Handgesetzte Umbrueche in Ueberschriften: am Desktop gewollt, schmal im Weg —
   dort erzeugen sie Zeilen mit zwei Woertern. display: none nimmt dem <br> die
   Wirkung, der Text bricht dann von selbst. */
@media (max-width: 46rem) {
  br.wide { display: none; }
}

h1 {
  margin: 0 0 1.75rem;
  font-weight: 300;
  font-size: clamp(2.9rem, 7.4vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.h2 {
  margin: 0 0 1.5rem;
  font-weight: 300;
  font-size: clamp(1.9rem, 3.9vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
}

.h3 {
  margin: 0 0 0.75rem;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lead { max-width: 34em; margin: 0 0 1.15rem; }
.lead-wide { max-width: 46em; }
.lead strong { font-weight: 500; }

.note {
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 1.75rem 0 0;
  color: rgba(22, 40, 63, 0.6);
}
.dark .note { color: rgba(241, 235, 221, 0.6); }
.note a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.btn {
  display: inline-block;
  padding: 0.95rem 1.6rem 0.85rem;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 120ms linear, color 120ms linear;
}
.btn-action { background: var(--terra); color: var(--cream); }
.btn-action:hover { background: #9c3b26; }
.btn-ghost { border-color: currentColor; }
.dark .btn-ghost:hover { background: var(--cream); color: var(--navy); }
.light .btn-ghost:hover, .ground .btn-ghost:hover { background: var(--navy); color: var(--cream); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ------------------------------------------------------------------- Kopf */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: var(--navy);
  color: var(--cream);
  border-bottom: 1px solid var(--hair-light);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.brand-mark { width: 1.35rem; height: 1.35rem; color: var(--cream); flex: none; }

.bar nav { display: flex; gap: 1.4rem; }
.bar nav a {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  color: rgba(241, 235, 221, 0.75);
}
.bar nav a:hover { color: var(--cream); border-bottom-color: var(--terra); }

@media (max-width: 44rem) {
  .bar nav { gap: 1rem; }
  .bar nav .nav-2 { display: none; }
}
/* Ganz schmal bleiben Karte und Mitmachen. Die Karte ist das, wofuer die meisten
   kommen; Mitmachen ist das, wofuer die Seite da ist. */
@media (max-width: 30rem) {
  .bar nav .nav-3 { display: none; }
}

/* ------------------------------------------------------------------- Hero */

.hero { padding-block: clamp(3.5rem, 9vh, 7rem) var(--section-y); }

/* Einspaltig stossen die Kacheln direkt an den naechsten Abschnitt. Dann addieren
   sich zwei Abschnittsabstaende zu einem Loch von fast 200 px — hier reicht die
   Haelfte. */
@media (max-width: 56rem) {
  .hero { padding-bottom: clamp(1.5rem, 4vh, 3rem); }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.hero-copy .lead { color: rgba(241, 235, 221, 0.86); }

.hero-art {
  width: min(100%, 31rem);
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair-light);
  border: 1px solid var(--hair-light);
}

/* Die Kacheln stehen in einer Gitterzeile und werden auf gleiche Hoehe gezogen. Ohne
   das Folgende bleibt bei der niedrigeren Kachel unten ein Streifen Grundfarbe stehen,
   sobald daneben ein Etikett zweizeilig wird. Die Tafel klebt jetzt am unteren Rand,
   die Luft entsteht ueber ihr — wie bei den Kacheln in der App. */
/* Die vier Grundtoene der Kacheln. Als Klassen und nicht als style-Attribut im
   Markup: Die Content-Security-Policy (deploy/nginx-web.conf.template) erlaubt kein
   'unsafe-inline' fuer Stile, und ein style-Attribut waere damit auf dem Server
   wirkungslos — alle Kacheln haetten dieselbe Farbe. tools/serve-web.py schickt
   dieselbe Regel, damit so etwas hier auffaellt und nicht erst dort. */
.t-a { --tile: var(--ground-a); }
.t-b { --tile: var(--ground-b); }
.t-c { --tile: var(--ground-c); }
.t-d { --tile: var(--ground-d); }

/* Der Traeger fuer die Motiv-Symbole. Nimmt keinen Platz ein und wird nie gezeigt. */
.defs { position: absolute; }

.tile { background: var(--tile, var(--cream)); display: flex; flex-direction: column; }
.tile > svg { width: 100%; height: auto; }
.tile-foot, .strip figcaption { margin-top: auto; }

.tile-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.7rem;
  background: var(--navy);
  color: var(--cream);
}
.tile-foot span {
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 235, 221, 0.7);
}
.tile-foot b {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ocher);
}
.tile-open > svg { opacity: 0.22; }

@media (max-width: 56rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 30rem; }
}

/* --------------------------------------------------------------- Schritte */

.steps {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--hair-dark);
  border-top: 1px solid var(--hair-dark);
  border-bottom: 1px solid var(--hair-dark);
}
.steps > li {
  background: var(--cream);
  padding: 1.75rem clamp(1.25rem, 2vw, 2rem) 2rem;
}
.steps h3 {
  margin: 0.9rem 0 0.6rem;
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.steps p { margin: 0; font-size: 1rem; color: rgba(22, 40, 63, 0.82); }

.step-no {
  display: block;
  font-weight: 300;
  font-size: 3.25rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--terra);
}

/* --------------------------------------------------------------- Rechner */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--hair-light);
  border: 1px solid var(--hair-light);
}
.calc-controls { background: var(--marine); padding: clamp(1.5rem, 3vw, 2.25rem); }
.calc-out {
  background: var(--navy);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}

.calc fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; }
.calc legend { padding: 0; }
.calc legend.caps { margin-bottom: 0.75rem; }

.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.scale button {
  appearance: none;
  border: 2px solid rgba(241, 235, 221, 0.35);
  background: transparent;
  color: var(--cream);
  font-family: inherit;
  font-weight: 300;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  min-height: 2.9rem;
  cursor: pointer;
  transition: background-color 100ms linear, border-color 100ms linear;
}
.scale button:hover { border-color: var(--cream); }
.scale button[aria-checked='true'] {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--navy);
  font-weight: 400;
}

.scale-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.55rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: rgba(241, 235, 221, 0.5);
}
.scale-ends span:last-child { text-align: right; }

.noscript-note {
  margin: 0;
  font-size: 1rem;
  color: rgba(241, 235, 221, 0.8);
}

.scale-hint {
  margin: 0.7rem 0 0;
  font-size: 0.9375rem;
  color: rgba(241, 235, 221, 0.7);
  min-height: 2.9em;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1rem;
  cursor: pointer;
  color: rgba(241, 235, 221, 0.9);
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .box {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border: 2px solid rgba(241, 235, 221, 0.5);
}
.toggle input:checked + .box { background: var(--terra); border-color: var(--terra); }
.toggle input:focus-visible + .box { outline: 3px solid var(--ocher); outline-offset: 3px; }
.toggle b { font-weight: 500; color: var(--cream); }

.score {
  display: block;
  font-weight: 300;
  font-size: clamp(5rem, 13vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--ocher);
  font-variant-numeric: tabular-nums;
}
.points-label { color: var(--ocher); letter-spacing: 0.24em; margin: 0.25rem 0 1.75rem; }

.breakdown { margin: 0; display: grid; gap: 1px; background: var(--hair-light); }
.breakdown > div {
  background: var(--navy);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
}
.breakdown dt {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 235, 221, 0.65);
}
.breakdown dd {
  margin: 0;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.bonus-row dd { color: var(--green-text); }
.calc-note { margin-top: auto; padding-top: 1.5rem; }

.bonus {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.bonus li {
  border-top: 2px solid var(--terra);
  padding-top: 0.9rem;
  font-size: 1rem;
  color: rgba(241, 235, 221, 0.82);
}
.bonus b { display: block; font-weight: 500; color: var(--cream); margin-bottom: 0.2rem; }

@media (max-width: 52rem) {
  .calc { grid-template-columns: 1fr; }
  .calc-out { flex-direction: column; }
}

/* --------------------------------------------------- Benachrichtigung */

.notify-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.notify-grid .lead { color: rgba(22, 40, 63, 0.85); }

.notif {
  background: var(--navy);
  color: var(--cream);
  padding: 1.25rem 1.4rem 1.5rem;
  border-left: 6px solid var(--terra);
}
.notif-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hair-light);
}
.notif-head .caps { margin: 0; color: rgba(241, 235, 221, 0.75); }
.notif-mark { width: 1.05rem; height: 1.05rem; color: var(--cream); flex: none; }
.notif-time {
  margin-left: auto;
  font-size: 0.8125rem;
  color: rgba(241, 235, 221, 0.5);
}
.notif-title {
  margin: 1rem 0 0.35rem;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.notif-body { margin: 0; font-size: 1rem; color: rgba(241, 235, 221, 0.78); }

@media (max-width: 52rem) {
  .notify-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Werke */

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
}
.strip figure { margin: 0; background: var(--tile); }
.strip figcaption {
  padding: 0.6rem 0.75rem 0.7rem;
  background: var(--navy);
  color: rgba(241, 235, 221, 0.8);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
@media (max-width: 46rem) { .strip { grid-template-columns: repeat(2, 1fr); } }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.two-col p { margin: 0; color: rgba(22, 40, 63, 0.82); }

/* -------------------------------------------------------------- Mitmachen */

.join {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--hair-light);
  border: 1px solid var(--hair-light);
}
.join article {
  background: var(--navy);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tag-terra, .tag-green {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.7rem 0.3rem;
  letter-spacing: 0.18em;
}
.tag-terra { background: var(--terra); color: var(--cream); }
.tag-green { background: var(--green); color: var(--cream); }

.ticks { list-style: none; margin: 0 0 2rem; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
  font-size: 1rem;
  color: rgba(241, 235, 221, 0.82);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--green-text);
}
.join .btn { margin-top: auto; }

/* ------------------------------------------------------------------ Stand */

.status {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2.1rem;
  border-bottom: 1px solid var(--hair-dark);
  font-size: 1rem;
}
.status-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.85rem;
  height: 0.85rem;
}
.status-list .done::before { background: var(--green); }
.status-list .open::before { background: transparent; border: 2px solid var(--terra); }
.status-list .open { color: rgba(22, 40, 63, 0.7); }

.phases { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.phases li { padding-bottom: 1.5rem; }
.phases .caps { color: var(--terra); margin-bottom: 0.4rem; }
.phases p { margin: 0; font-size: 1rem; color: rgba(22, 40, 63, 0.82); }
.phases b { font-weight: 500; color: var(--navy); }

@media (max-width: 52rem) {
  .status { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- Fuß */

footer { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--hair-light); }
.foot { display: grid; gap: 2rem; }
@media (min-width: 52rem) {
  .foot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .foot .copy { grid-column: 1 / -1; }
  .foot nav { justify-content: flex-end; }
}
.foot .note { margin-top: 0.85rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot nav a {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}
.foot nav a:hover { border-bottom-color: var(--terra); }
.copy { max-width: 42em; }

/* --------------------------------------------------------- Rechtstexte */

.doc { padding-block: clamp(3rem, 7vw, 5.5rem); }
.doc .wrap { max-width: 46rem; }
.doc h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}
.doc p.doc-status {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--navy);
  color: var(--cream);
  border-left: 6px solid var(--terra);
  font-size: 1rem;
}
/* Die Abschnitte der Rechtstexte sind <section> — ohne das erben sie die grossen
   Abstaende der Seitenabschnitte und reissen den Text auseinander. */
.doc section { padding-block: 0; }

.doc h2 {
  margin: 2.25rem 0 0.9rem;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
  padding-top: 1rem;
  border-top: 1px solid var(--hair-dark);
}
.doc p { margin: 0 0 1rem; color: rgba(22, 40, 63, 0.85); }
.doc .todo {
  padding: 0.8rem 1rem;
  border: 2px dashed var(--terra);
  color: var(--navy);
  font-size: 1rem;
}
.doc .todo b {
  display: block;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.3rem;
}
.doc-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hair-dark); }
.doc-nav a {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.doc-nav a:hover { border-bottom-color: var(--terra); }

/* ----------------------------------------------------------------- Karte */
/*
 * Plan links, Liste rechts. Der Plan ist eine SVG-Datei (tools/make-map.py) und
 * kommt als <img> herein — die Pins liegen als eigene Ebene darueber, in Prozent
 * gesetzt. Dadurch skaliert beides gemeinsam, ohne dass irgendwo eine Pixelgroesse
 * gepflegt werden muss.
 */

.map {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 1fr);
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.map-frame {
  position: relative;
  background: #E4DCCA;
  /* Das Seitenverhaeltnis des gezeichneten Plans, gesetzt von script.js aus karte.js.
     Es muss genau stimmen: Die Pins liegen als eigene Ebene darueber und werden in
     Prozent des Rahmens gesetzt. Passt das Verhaeltnis nicht, beschneidet der Browser
     das Bild, die Pins aber nicht — und beide zeigen auf verschiedene Stellen.
     4 / 3 ist der Rueckfall, falls karte.js fehlt; tools/make-map.py erzeugt genau das. */
  aspect-ratio: var(--karte, 4 / 3);
  overflow: hidden;
}
.map-frame img { display: block; width: 100%; height: 100%; }

.map-pins { position: absolute; inset: 0; }

/* Die Klappe vor der Weltkarte. Sie liegt ueber dem gezeichneten Plan, nicht
   anstelle: Was darunter zu sehen ist, ist schon eine Karte, und die Klappe ist
   das Angebot, sie beweglich zu machen. */
.map-gate {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--navy);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}
.map-gate p { margin: 0; max-width: 44em; }
.map-gate a { color: rgba(241, 235, 221, 0.7); }
.map-gate a:hover { color: var(--cream); }
.map-gate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }

/* Die bewegliche Karte legt sich ueber den Plan, sobald sie steht. Zwei Ebenen
   statt Austausch: Waehrend Leaflet die ersten Kacheln holt, bleibt der Plan als
   Hintergrund stehen, und es blitzt nichts weiss auf. */
.map-live {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.map-live-an .map-live { opacity: 1; }
.map-live-an .map-pins { display: none; }

/* Leaflets eigene Marke, in unserer: Terra-Quadrat mit cremefarbenem Rand, wie in
   der App und wie die Pins auf dem gezeichneten Plan. */
.leaflet-pin {
  background: var(--terra);
  border: 3px solid var(--cream);
}
.leaflet-container { font: inherit; background: #E4DCCA; }
.leaflet-popup-content { font-size: 0.875rem; line-height: 1.5; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: 0; }
.leaflet-popup-content-wrapper { background: var(--cream); color: var(--navy); }

.pin {
  position: absolute;
  width: 0;
  height: 0;
}
/* Der Pin selbst: ein Ring in Terra mit cremefarbenem Kern, wie in der App. Kein
   Schatten und kein Verlauf — Tiefe entsteht hier durch aneinanderstossende
   Flaechen, nicht durch Schichten. */
.pin::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: -0.5rem;
  width: 1rem;
  height: 1rem;
  background: var(--terra);
  border: 3px solid var(--cream);
  transition: transform 140ms ease-out;
}
.pin.an::before { transform: scale(1.35); }

.pin-label {
  position: absolute;
  left: 0.85rem;
  top: -0.72rem;
  padding: 0.15rem 0.4rem;
  background: var(--navy);
  color: var(--cream);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-side {
  background: var(--cream);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.map-count { color: rgba(22, 40, 63, 0.55); margin: 0; }

.orte { list-style: none; margin: 0; padding: 0; }
.ort {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--hair-dark);
}
.orte .ort:first-child { border-top: none; }
.ort.an { background: var(--ground-b); box-shadow: 0 0 0 0.5rem var(--ground-b); }
.ort-name { font-weight: 500; }
.ort-meta {
  grid-column: 1;
  font-size: 0.8125rem;
  color: rgba(22, 40, 63, 0.6);
}
.ort-punkte {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--ocher);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
}
/* Der Gedankenstrich fuer „noch nichts zu holen". Nicht in Ocker: Ocker gehoert in
   dieser Gestaltung ausschliesslich den Punkten, und nichts ist kein Punktestand. */
.ort-punkte.leer { color: rgba(22, 40, 63, 0.35); }

.map-empty p { margin: 0 0 0.9rem; }
.map-empty .h3 { margin-bottom: 0.5rem; }
.map-credit { margin-top: auto; padding-top: 0.5rem; }

@media (max-width: 56rem) {
  .map { grid-template-columns: 1fr; }
  /* Auf dem Telefon zaehlt die Liste, nicht der Plan: Zwei Pins 50 m auseinander
     sind auf 340 Pixeln ohnehin ein Punkt. Der Plan bleibt als Verortung stehen,
     aber niedriger. */
  .map-gate { padding: 0.9rem 1rem 1rem; }
  .map-gate p { font-size: 0.9375rem; }
  .pin-label { display: none; }
}

/* ------------------------------------------------------------ Steckbrief */

.steckbrief {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.sb-object { margin: 0; }
.sb-object svg { display: block; width: 100%; height: auto; border: 1px solid var(--hair-dark); }
.sb-object figcaption {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: rgba(22, 40, 63, 0.6);
  max-width: 26em;
}

.sb-daten { margin: 0; display: grid; gap: 1px; background: var(--hair-dark); border: 1px solid var(--hair-dark); }
.sb-daten > div { background: var(--cream); padding: 1rem clamp(1rem, 2vw, 1.4rem); }
.sb-daten dt {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.35rem;
}
.sb-daten dd { margin: 0; }

.strip-title { margin-top: clamp(2.5rem, 5vw, 4rem); }
.strip-title + .strip { margin-top: 1.5rem; }

@media (max-width: 52rem) {
  .steckbrief { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Auftauchen */

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal { opacity: 0; transform: translateY(14px); }
  .reveal-ready .reveal-in {
    opacity: 1;
    transform: none;
    transition: opacity 480ms ease-out, transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@media print {
  .bar, .hero-art, .calc, footer nav { display: none; }
  body { background: #fff; color: #000; }
}