:root {
  --creme:      #ffffff;
  --creme-hell: #fafafa;
  --creme-tief: #e6e4e0;

  --oliv:        #65734A;
  --oliv-tief:   #4A5637;
  --messing:      #a9832f;
  --messing-hell: #d8b46a;

  --tinte:       #2B3024;
  --tinte-leise: #5F6552;
  --linie:      rgba(101, 115, 74, .30);
  --linie-fein: rgba(43, 48, 36, .16);

  --natur:       #2E7D4F;  --natur-tief:       #1C5735;  --natur-hell:       #E3F0E8;
  --energie:     #1F6F9E;  --energie-tief:     #124F74;  --energie-hell:     #E0ECF4;
  --gemeinschaft:#D39A16;  --gemeinschaft-tief:#7A5408;  --gemeinschaft-hell:#F8EDD3;
  --wirtschaft:  #B23A2B;  --wirtschaft-tief:  #832618;  --wirtschaft-hell:  #F7E4E0;

  --land:   #f4f2ec;
  --loess:  #d9c29a;
  --wasser: #6FAECB;
  --weg:    #b7b0a4;

  --ok:   var(--natur-tief);
  --warn: var(--gemeinschaft-tief);
  --bad:  var(--wirtschaft-tief);

  --sans: "Frutiger", "Frutiger LT Std", "Frutiger Neue LT", "Segoe UI",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--sans);
  --font-news: Georgia, "Times New Roman", "Liberation Serif", serif;

  --fs-xs:  1rem;
  --fs-sm:  1.1rem;
  --fs-md:  1.2rem;
  --fs-lg:  1.5rem;
  --fs-xl:  2rem;
  --fs-2xl: 2.7rem;
  --fs-3xl: 3.4rem;

  --sp-1: 0.35rem;
  --sp-2: 0.6rem;
  --sp-3: 0.95rem;
  --sp-4: 1.4rem;
  --sp-5: 2rem;
  --sp-6: 2.8rem;
  --rand: clamp(1rem, 2.2vw, 2.6rem);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;

  --touch: 3.5rem;
  --focus: 0 0 0 3px #ffffff, 0 0 0 7px var(--messing);
  --speed: 260ms;
}

html {
  font-size: clamp(14px, min(1.05vw, 1.6vh), 20px);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.noscript { padding: var(--sp-4); font-size: var(--fs-lg); text-align: center; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

.zone:focus, .placed:focus { outline: none; }
.zone:focus-visible { outline: none; }
.zone:focus-visible .zone__shape { stroke: var(--messing); stroke-width: 7; stroke-dasharray: none; fill-opacity: .18; }
.placed:focus-visible { outline: none; }
.placed:focus-visible .placed__disc { stroke: var(--messing); stroke-width: 6; }

.screen { position: absolute; inset: 0; }
[hidden] { display: none !important; }

.marke, .raum, .entwurf, .anonym {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.marke  { color: var(--messing); }
.raum   { color: var(--tinte-leise); }
.entwurf { color: var(--messing); letter-spacing: 0.12em; text-transform: none; font-weight: 600; }
.anonym { color: var(--tinte-leise); letter-spacing: 0.1em; text-transform: none; font-weight: 600; }

.kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); padding-bottom: var(--sp-3);
}

.mitte {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; gap: var(--sp-4);
  overflow-y: auto;
}

.navigation { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-3); }

.btn {
  font: inherit;
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--fs-sm);
  min-height: var(--touch);
  padding: 0.7rem 2rem;
  border: 2px solid var(--oliv);
  border-radius: 999px;
  background: var(--creme-hell);
  color: var(--oliv);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  transition: background var(--speed), border-color var(--speed), color var(--speed);
  touch-action: manipulation;
}
.btn:disabled { opacity: .4; cursor: default; }

.btn--voll, .btn--primary {
  background: var(--oliv);
  border-color: var(--oliv);
  color: #ffffff;
}
.btn--voll:hover:not(:disabled), .btn--primary:hover:not(:disabled) {
  background: var(--oliv-tief); border-color: var(--oliv-tief);
}

.btn--linie, .btn--ghost { background: var(--creme-hell); color: var(--oliv); border-color: var(--oliv); }
.btn--linie:hover:not(:disabled), .btn--ghost:hover:not(:disabled) { background: var(--creme-tief); }

.btn--warn { border-color: var(--wirtschaft-tief); color: var(--wirtschaft-tief); background: var(--creme-hell); }
.btn--warn:hover:not(:disabled) { background: var(--wirtschaft-hell); }

.btn--sm { min-height: 3rem; font-size: var(--fs-xs); padding: 0.5rem 1.2rem; }
.btn--big { min-height: 3.9rem; font-size: var(--fs-md); width: 100%; }
.btn--icon { padding: 0.6rem 1.2rem; }
.btn--icon svg { width: 1.5rem; height: 1.5rem; }

.screen--start {
  display: flex; flex-direction: column;
  padding: clamp(0.7rem, 1.6vh, 1.8rem) var(--rand) clamp(0.5rem, 1.3vh, 1.4rem);
  background: var(--creme);
  overflow: hidden;
}

/* Zentrierter Aufbau: Titel, Text, kleine Karte, Hinweis, Schaltflächen.
   Alles liegt innerhalb der Viewporthöhe, der Startbildschirm rollt nie. */
.screen--start .mitte {
  justify-content: center;
  gap: clamp(0.5rem, 1.8vh, 1.4rem);
  overflow: hidden;
}

.start__title {
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1.06;
  max-width: 22ch;
  color: var(--oliv);
}
.start__title span { color: var(--messing); }

.start__teaser {
  font-size: clamp(1.05rem, 1.25vw, 1.45rem);
  line-height: 1.4;
  max-width: 52ch;
  color: var(--tinte);
}

.start__hint {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  text-align: left;
  padding: clamp(0.5rem, 1.2vh, 0.95rem) var(--sp-4);
  border: 2px solid var(--linie-fein);
  border-left: 8px solid var(--messing);
  border-radius: var(--r-md);
  background: var(--creme-hell);
  max-width: 58ch;
}
.start__hint-icon svg { width: 1.9rem; height: 1.9rem; color: var(--messing); display: block; }

.btn--start {
  min-height: clamp(3.4rem, 6.4vh, 4.4rem);
  min-width: 13rem;
  font-size: var(--fs-lg);
  padding: 0.9rem 3rem;
}
.btn--hilfe { align-self: center; margin-top: 0; }

.start__stage {
  width: min(760px, 88%);
  background: var(--land);
  border: 2px solid var(--linie-fein);
  border-radius: var(--r-md);
  overflow: hidden;
}
.start__relief {
  display: block; width: 100%; height: auto;
  max-height: clamp(150px, 26vh, 300px);
}

/* Vereinfachte Kartenebene: Flurstücke, Tagebau, Gewässer, Straßen, Ortslagen.
   Die Formen folgen dem Luftbild, das nach dem Start erscheint, sind aber
   bewusst schematisch und nicht lagetreu. */
.relief__land { fill: var(--land); }
.feld { stroke: rgba(43, 48, 36, .07); stroke-width: 1; }
.feld--a { fill: #e9ece1; }
.feld--b { fill: #dfe7d4; }
.feld--c { fill: #f0e9db; }
.relief__wald ellipse { fill: #cfdcc5; }

.grube { stroke: #b49a6e; stroke-width: 1.5; stroke-linejoin: round; }
.grube--0 { fill: #efe3cc; }
.grube--1 { fill: #e3d2b0; }
.grube--2 { fill: #d6c197; }
.grube--3 { fill: #c8ae7d; }
.grube--4 { fill: #b89a63; }
.grube--strip { fill: #e3d2b0; }

.relief__fluss, .relief__bach { fill: none; stroke: var(--wasser); stroke-linecap: round; }
.relief__fluss { stroke-width: 7; }
.relief__bach { stroke-width: 4; opacity: .75; }
.relief__see { fill: var(--wasser); }

.relief__strasse { fill: none; stroke: var(--weg); stroke-width: 4.5; stroke-linecap: round; }
.relief__strasse--klein { stroke-width: 2.5; }
.relief__band { fill: none; stroke: #9a927f; stroke-width: 3; stroke-dasharray: 9 7; stroke-linecap: round; }
.relief__loop ellipse { fill: none; stroke: #b7c9ab; stroke-width: 7; }

.ort rect { fill: #cfc9bd; }
.ort--stadt rect { fill: #c5bfb2; }
.ort--werk rect { fill: #b6afa0; }

.start__target {
  fill: var(--natur); fill-opacity: 0;
  stroke: var(--natur-tief); stroke-width: 3; stroke-dasharray: 10 8;
  opacity: 0; animation: target-pulse 5s infinite;
}
.start__token {
  transform: translate(104px, 330px);
  color: #ffffff;
  animation: token-move 5s infinite;
}
.start__token circle { fill: var(--natur-tief); }
.start__hand {
  transform: translate(116px, 344px);
  color: var(--oliv);
  animation: hand-move 5s infinite;
}

@keyframes token-move {
  0%, 8%    { transform: translate(104px, 330px) scale(1); opacity: 1; }
  22%       { transform: translate(104px, 330px) scale(1.14); }
  55%       { transform: translate(238px, 218px) scale(1.14); }
  66%       { transform: translate(238px, 218px) scale(1); }
  92%, 100% { transform: translate(238px, 218px) scale(1); opacity: 0; }
}
@keyframes hand-move {
  0%, 8%    { transform: translate(116px, 344px); opacity: 0; }
  14%       { opacity: 1; }
  55%       { transform: translate(250px, 232px); opacity: 1; }
  70%       { transform: translate(250px, 232px); opacity: 0; }
  100%      { transform: translate(116px, 344px); opacity: 0; }
}
@keyframes target-pulse {
  0%, 18%  { opacity: 0; }
  30%, 62% { opacity: 1; }
  74%, 100%{ opacity: 0; }
}

.navigation--start { justify-content: space-between; }

.screen--studio {
  display: grid;
  grid-template-columns: clamp(290px, 22vw, 440px) minmax(0, 1fr) clamp(270px, 19vw, 390px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--creme);
}

.topbar {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid var(--creme-tief);
}
.topbar__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.topbar__main { display: flex; align-items: center; gap: var(--sp-4); }
.topbar__title { font-size: var(--fs-lg); color: var(--oliv); line-height: 1.15; }
.topbar__sub { font-size: var(--fs-xs); color: var(--tinte-leise); letter-spacing: 0; text-transform: none; }
.topbar__tools { margin-left: auto; display: flex; gap: var(--sp-2); }
.topbar .entwurf { text-align: center; }

.steps { display: flex; gap: var(--sp-1); margin: 0 auto; }
.steps__item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--tinte-leise);
  border-radius: 999px;
  border: 2px solid transparent;
}
.steps__num {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid currentColor;
  font-weight: 700; font-size: var(--fs-xs);
}
.steps__item[data-state="active"] { color: var(--oliv); border-color: var(--linie); background: var(--creme-hell); font-weight: 700; }
.steps__item[data-state="done"] { color: var(--natur-tief); }
.steps__item[data-state="done"] .steps__num { background: var(--natur-tief); color: #ffffff; border-color: var(--natur-tief); }

/* Je Seitenspalte genau EIN Scrollcontainer. Die Panels darin wachsen mit
   ihrem Inhalt und rollen nicht selbst. */
.rail {
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 0;                       /* nötig, damit die Spalte im Grid schrumpfen darf */
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
.rail > * { flex: 0 0 auto; }          /* nichts wird zusammengedrückt */
.rail::-webkit-scrollbar { width: 10px; }
.rail::-webkit-scrollbar-thumb { background: var(--creme-tief); border-radius: 5px; }

.panel {
  background: var(--creme-hell);
  border: 2px solid var(--linie-fein);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.panel__head { margin-bottom: var(--sp-3); }
.panel__title { font-size: var(--fs-md); color: var(--oliv); }
.panel__hint { font-size: var(--fs-xs); color: var(--tinte-leise); margin-top: 4px; line-height: 1.35; }
.panel__hint.anonym { letter-spacing: 0; font-weight: 400; text-transform: none; }
.panel__foot { margin-top: var(--sp-3); }

.panel--palette { display: flex; flex-direction: column; }
.panel--result { display: flex; flex-direction: column; }

/* Rechte Spalte: ein zusammenhängender Bereich. Kopf, Inhalt und Steuerung
   stehen untereinander im Fluss, gerollt wird ausschließlich in .rail--right. */
.panel--side { display: flex; flex-direction: column; }
.side__head { padding-bottom: var(--sp-2); border-bottom: 2px solid var(--creme-tief); }
.side__scroll {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-top: var(--sp-3);
}
.side__block { border-top: 2px solid var(--creme-tief); padding-top: var(--sp-2); }
.side__title { font-size: var(--fs-sm); color: var(--oliv); line-height: 1.25; }
.side__foot {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 2px solid var(--creme-tief);
}

.cat { border: 2px solid var(--linie-fein); border-radius: var(--r-md); overflow: hidden; background: var(--creme); }
.cat__bar { display: flex; align-items: stretch; background: var(--cat-soft); border-left: 10px solid var(--cat); }
.cat__head {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font: inherit; font-weight: 700; font-size: var(--fs-sm);
  background: transparent; border: 0; color: var(--cat-deep);
  text-align: left; cursor: pointer; min-height: var(--touch);
}
.cat__name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.cat__chev {
  flex: 0 0 auto; width: 0.7rem; height: 0.7rem; margin-left: 0.2rem;
  border-right: 3px solid var(--cat-deep); border-bottom: 3px solid var(--cat-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--speed);
}
.cat[data-open="true"] .cat__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.cat__mark {
  width: 1.8rem; height: 1.8rem; border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--cat-deep); color: #ffffff; font-weight: 800; font-size: var(--fs-xs);
}
.cat__dgs {
  flex: 0 0 auto; margin: var(--sp-2) var(--sp-2) var(--sp-2) 0; padding: 0 0.8rem;
  border: 2px solid var(--cat-deep); border-radius: 999px;
  background: transparent; color: var(--cat-deep); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-xs); font-weight: 700;
}
.cat__dgs svg { width: 1.2rem; height: 1.2rem; }
.cat__items { display: none; grid-template-columns: 1fr; gap: 8px; padding: 8px; }
.cat[data-open="true"] .cat__items { display: grid; animation: cat-auf 240ms ease both; }
@keyframes cat-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.token {
  display: flex; align-items: center; gap: 8px;
  min-height: 3.7rem;
  padding: 8px 10px;
  border: 2px solid var(--linie-fein);
  border-radius: var(--r-sm);
  background: var(--creme-hell);
  color: var(--tinte);
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  text-align: left;
  cursor: grab;
  /* senkrecht wischen rollt die Spalte, waagerecht zieht das Symbol.
     Vorher blockierte touch-action: none das Rollen der linken Spalte. */
  touch-action: pan-y;
  user-select: none;
  transition: border-color var(--speed), background var(--speed);
}
.token__icon {
  position: relative;
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--cat-soft); color: var(--cat-deep);
  border: 1px solid var(--cat);
}
.token__icon svg { width: 1.4rem; height: 1.4rem; }
.token:hover { border-color: var(--cat); }
.token[aria-pressed="true"] { border-color: var(--cat-deep); background: var(--cat-soft); box-shadow: inset 0 0 0 2px var(--cat-deep); }
.token[data-dragging="true"] { opacity: .4; }
.token__text { min-width: 0; overflow-wrap: break-word; hyphens: auto; line-height: 1.25; }
.token__count {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 700;
  color: var(--cat-deep); white-space: nowrap;
}

.scenario { display: flex; flex-direction: column; gap: 6px; }
.scenario__empty { font-size: var(--fs-xs); color: var(--tinte-leise); }
.scenario__row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: var(--r-sm);
  background: var(--creme); font-size: var(--fs-xs);
  border: 1px solid var(--linie-fein);
  border-left: 8px solid var(--cat);
}
.scenario__zone { margin-left: auto; color: var(--tinte-leise); font-size: var(--fs-xs); text-align: right; }
.scenario__fit { font-size: var(--fs-xs); color: var(--warn); font-weight: 700; }
.scenario__fit--gut { color: var(--natur-tief); }

.mix { display: flex; flex: 0 0 auto; height: 0.7rem; border-radius: 999px; overflow: hidden; background: var(--creme-tief); }
.mix__seg { height: 100%; transition: width var(--speed); }

/* Eine Zeile je Kategorie: Kuerzel, Name, Balken, Zahl. Vorher standen Name
   und Balken in derselben Zelle, der Balken war als span ohne display:block
   unsichtbar und die Zeile unnoetig hoch. */
.stats { display: flex; flex-direction: column; gap: 5px; margin-top: var(--sp-2); max-width: 34rem; }
/* Nicht ueber die ganze Spaltenbreite: so steht die Zahl nicht am Rand,
   weit weg von ihrem Namen. */
.stat { display: grid; grid-template-columns: 1.5rem auto minmax(2rem, 1fr) auto; gap: 8px; align-items: center; }
.stat__mark {
  width: 1.5rem; height: 1.5rem; border-radius: 5px; display: grid; place-items: center;
  background: var(--cat-deep); color: #ffffff; font-weight: 800; font-size: 0.72em;
}
.stat__track { display: block; background: var(--creme-tief); border-radius: 999px; height: 0.55rem; overflow: hidden; }
.stat__bar { display: block; height: 100%; background: var(--cat); width: 0; transition: width 600ms cubic-bezier(.2,.8,.3,1); }
.stat__val { font-size: var(--fs-xs); color: var(--tinte); min-width: 4.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.stat__name { font-size: var(--fs-xs); color: var(--tinte); white-space: nowrap; }
.stats__meta { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--tinte-leise); }

.panel--controls {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: auto; flex: 0 0 auto;
}
.controls__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.controls__row .btn { min-width: 0; min-height: 3.2rem; white-space: normal; overflow-wrap: break-word; padding: 0.5rem 0.9rem; line-height: 1.2; }
.controls__hint { font-size: var(--fs-xs); color: var(--tinte-leise); text-align: center; }

.indicators { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Das Wirkungsprofil zeigt nur Balken. Eine Zahl wie "38 von 100" liest
   sich wie eine Prognose, und das ist eine regelbasierte Modellrechnung
   des Prototyps ausdruecklich nicht. */
.ind__top { display: flex; font-size: var(--fs-xs); margin-bottom: 4px; font-weight: 700; }
.ind__track { height: 1.1rem; background: var(--creme-tief); border-radius: 999px; overflow: hidden; }
.ind__bar { height: 100%; width: 0; border-radius: 999px; transition: width 800ms cubic-bezier(.2,.8,.3,1); }
.result-notes { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.note {
  font-size: var(--fs-xs); padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--creme); border: 1px solid var(--linie-fein); border-left: 8px solid var(--linie);
  line-height: 1.4;
}
.note--plus { border-left-color: var(--natur); }
.note--minus { border-left-color: var(--wirtschaft); }
.note b { display: block; margin-bottom: 2px; }

.stage { min-height: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.stage__frame {
  position: relative; flex: 1 1 auto; min-height: 0;
  border: 2px solid var(--linie-fein);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--land);
}
.map { display: block; width: 100%; height: 100%; }

/* Beim Oeffnen der Karte liegt zuerst das Luftbild des Reviers oben auf und
   blendet dann weg. Die Schemakarte darunter ist immer da - faellt das Script
   aus, sieht man das Luftbild, nie eine leere Flaeche. Klicks gehen durch. */
.stage__satellit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Nicht ganz deckend: die Flaechennamen der Schemakarte scheinen leicht durch,
     damit man gleich sieht, wo welche Flaeche liegt. */
  opacity: .78; transition: opacity 1.8s ease;
  pointer-events: none;
  z-index: 2;
}
.stage__frame[data-ansicht="karte"] .stage__satellit { opacity: 0; }

.map__land { fill: var(--land); }
.map__contours { fill: none; stroke: var(--creme-tief); stroke-width: 2; }
.map__river { fill: none; stroke: var(--wasser); stroke-width: 14; stroke-linecap: round; }
.map__road { fill: none; stroke: var(--weg); stroke-width: 5; stroke-linecap: round; }
.map__road--minor { stroke-width: 3; stroke-dasharray: 14 10; }

.pit { stroke: #a98e63; stroke-width: 2; }
.pit--0 { fill: #e7d7ba; }
.pit--1 { fill: #ddc9a5; }
.pit--2 { fill: #d3bb90; }
.pit--3 { fill: #c9ad7b; }
.pit--4 { fill: #bf9f66; }
.pit-lake { fill: var(--wasser); opacity: 0; transition: opacity 1.1s ease; }
.pit-lake[data-on="true"] { opacity: 1; }

.settle rect { fill: #cfc9bd; }
.settle text {
  fill: var(--tinte); font-size: 17px; font-family: var(--sans); font-weight: 600;
  paint-order: stroke; stroke: var(--land); stroke-width: 4px; stroke-linejoin: round;
}

.zone { cursor: pointer; }
.zone__shape {
  fill: var(--oliv);
  fill-opacity: .06;
  stroke: var(--oliv);
  stroke-width: 3;
  stroke-dasharray: 12 9;
  transition: fill-opacity var(--speed), stroke var(--speed), stroke-width var(--speed);
}
.zone__label {
  fill: var(--tinte); font-size: 19px; font-weight: 700; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--land); stroke-width: 5px; stroke-linejoin: round;
}
.zone__cap {
  fill: var(--tinte-leise); font-size: 15px; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--land); stroke-width: 4px; stroke-linejoin: round;
}
.zone:hover .zone__shape { fill-opacity: .14; }
.zone[data-state="armed"] .zone__shape { stroke: var(--oliv); stroke-width: 4; fill-opacity: .12; }
.zone[data-state="fit"] .zone__shape { stroke: var(--natur-tief); fill: var(--natur); fill-opacity: .3; stroke-width: 5; stroke-dasharray: none; }
.zone[data-state="poor"] .zone__shape { stroke: var(--gemeinschaft-tief); fill: var(--gemeinschaft); fill-opacity: .26; stroke-width: 5; stroke-dasharray: none; }
.zone[data-state="full"] .zone__shape { stroke: var(--wirtschaft-tief); stroke-dasharray: 4 6; }
.zone[data-full="true"] .zone__shape { fill-opacity: .02; stroke-opacity: .4; }

.placed { cursor: pointer; }
.placed__disc { stroke-width: 3; }
.placed__icon { color: #ffffff; }
.placed__label {
  font-size: 16px; font-weight: 600; text-anchor: middle; fill: var(--tinte);
  paint-order: stroke; stroke: var(--land); stroke-width: 5px; stroke-linejoin: round;
}
.placed__warn { font-size: 22px; font-weight: 800; text-anchor: middle; fill: var(--gemeinschaft-tief);
  paint-order: stroke; stroke: var(--land); stroke-width: 4px; stroke-linejoin: round; }
.placed--enter { animation: pop-in 420ms cubic-bezier(.2,1.3,.4,1); transform-box: fill-box; transform-origin: center; }
.placed__inner { transform-box: fill-box; transform-origin: center; }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

#layer-sim .sim-el { opacity: 0; animation: sim-in 620ms forwards; }
@keyframes sim-in { to { opacity: 1; } }
.sim-green { fill: var(--natur); opacity: .26; }
.sim-tree { color: var(--natur-tief); }
.sim-wind { stroke: var(--energie-tief); stroke-width: 3; fill: none; }
.sim-pv { fill: var(--energie); stroke: var(--energie-tief); stroke-width: 1.5; }
.sim-house { fill: var(--gemeinschaft); stroke: var(--gemeinschaft-tief); stroke-width: 1.5; }
.sim-bike { fill: none; stroke: var(--gemeinschaft-tief); stroke-width: 4; stroke-dasharray: 10 8; }
.sim-hall { fill: var(--wirtschaft); stroke: var(--wirtschaft-tief); stroke-width: 2; }

.stage__legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--tinte-leise);
  padding: 0 var(--sp-2);
}
.legend__dot { width: 0.9rem; height: 0.9rem; border-radius: 4px; display: inline-block; margin-left: var(--sp-3); }
.legend__dot:first-child { margin-left: 0; }
.legend__dot--zone { border: 2px dashed var(--oliv); }
.legend__dot--pit { background: #d3bb90; }
.legend__dot--water { background: var(--wasser); }
.legend__note { margin-left: auto; }

body[data-dragging="true"] #layer-placed,
body[data-dragging="true"] .crbox { pointer-events: none; }
body[data-phase="ergebnis"] .stage__legend,
body[data-phase="speicher"] .stage__legend { display: none; }

.drag-ghost {
  position: fixed; z-index: 90; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0.7rem 1.2rem; border-radius: var(--r-md);
  background: var(--creme); color: var(--tinte);
  border: 3px solid var(--cat-deep);
  font-weight: 700; font-size: var(--fs-sm);
  transform: translate(-50%, -50%) scale(1.06);
}
.drag-ghost svg { width: 1.6rem; height: 1.6rem; }
.drag-ghost .token__icon { width: 2.6rem; height: 2.6rem; }
body[data-dragging="true"] { cursor: grabbing; }

.crbox {
  position: absolute; right: var(--sp-3); top: var(--sp-3); width: min(26rem, 44%);
  background: var(--creme); border: 2px solid var(--linie);
  border-radius: var(--r-md);
  animation: cr-in 320ms cubic-bezier(.2,.9,.3,1);
  z-index: 20;
}
@keyframes cr-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.crbox[data-closing="true"] { animation: cr-out 220ms forwards; }
@keyframes cr-out { to { opacity: 0; transform: translateY(-10px); } }

.crbox__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 2px solid var(--creme-tief); }
.crbox__badge { background: var(--cat-deep); color: #ffffff; font-weight: 800; font-size: var(--fs-xs); padding: 4px 10px; border-radius: 999px; }
.crbox__title { font-size: var(--fs-sm); }
.crbox__close {
  margin-left: auto; width: 2.8rem; height: 2.8rem; border-radius: 999px;
  background: var(--creme-hell); border: 2px solid var(--oliv); color: var(--oliv);
  font-size: var(--fs-lg); line-height: 1; cursor: pointer;
}
.crbox__body { margin: 0; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.crbox__item dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.crbox__item dd { margin: 0; font-size: var(--fs-xs); color: var(--tinte); line-height: 1.45; }
.crbox__item--chance dt { color: var(--natur-tief); }
.crbox__item--risiko dt { color: var(--wirtschaft-tief); }
.crbox__item { border-left: 6px solid; padding-left: 12px; }
.crbox__item--chance { border-color: var(--natur); }
.crbox__item--risiko { border-color: var(--wirtschaft); }
.crbox__actions { padding: 0 var(--sp-3) var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Zeitungsoptik. Papierton, eckige Kanten, doppelte Kopflinie, Serifenschrift
   und ein zweispaltiger Satz: links die Meldung, rechts eine schmale Spalte.
   Der Blattname ist frei erfunden und soll es bleiben, direkt darunter steht,
   dass die Texte erfunden sind. */
.headline {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  width: min(58rem, 76%);
  color: var(--tinte);
  background: #fbf7ec;
  border: 1px solid var(--tinte);
  border-radius: 0;
  outline: 1px solid rgba(43, 48, 36, .5);
  outline-offset: 5px;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  z-index: 25;
  animation: hl-in 520ms cubic-bezier(.2,.9,.3,1);
}
@keyframes hl-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.headline__kopf {
  border-top: 4px solid var(--tinte);
  border-bottom: 1px solid var(--tinte);
  padding: 8px 0 5px;
  margin-bottom: var(--sp-3);
  text-align: center;
}

.headline__blatt {
  margin: 0 0 4px;
  font-family: var(--font-news);
  font-size: clamp(1.6rem, 2.1vw, 2.3rem);
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  line-height: 1;
}

.headline__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2);
  margin: 0; padding-top: 5px;
  border-top: 1px solid var(--tinte);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.headline__ressort { font-weight: 700; color: var(--tinte); }

/* Zweispaltiger Satz: Meldung links, schmale Spalte rechts, dazwischen
   eine feine Trennlinie wie im Zeitungssatz. */
.headline__satz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.45fr);
  gap: var(--sp-4);
}
.headline__haupt { min-width: 0; }

.headline__dach {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oliv);
  margin-bottom: 6px;
}

.headline__text {
  font-family: var(--font-news);
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  hyphens: auto;
  margin: 0;
}

.headline__teaser {
  font-family: var(--font-news);
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  line-height: 1.38;
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(43, 48, 36, .35);
  hyphens: auto;
}
.headline__teaser:empty { display: none; }

.headline__spalte {
  min-width: 0;
  border-left: 1px solid rgba(43, 48, 36, .35);
  padding-left: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.headline__hinweis {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--tinte-leise);
}
.headline__actions {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: auto;
}
.headline__actions .btn {
  display: block; width: 100%; min-width: 0;
  white-space: normal; hyphens: auto;
  text-align: center;
  font-size: var(--fs-xs);
  padding: 0.6rem 0.7rem; line-height: 1.2;
}

.sim-overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  display: grid; place-items: center;
}
.sim-overlay__box { width: min(38rem, 80%); text-align: center; }
.sim-overlay__label { font-size: var(--fs-lg); font-weight: 700; color: var(--oliv); margin-bottom: var(--sp-3); }
.sim-overlay__bar { height: 12px; border-radius: 999px; background: var(--creme-tief); overflow: hidden; }
.sim-overlay__bar span { display: block; height: 100%; width: 0; background: var(--oliv); transition: width 240ms linear; }
.sim-overlay__step { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--tinte-leise); min-height: 1.5em; }

.toast {
  position: fixed; left: 50%; bottom: 2.5rem; transform: translateX(-50%);
  background: var(--creme); border: 2px solid var(--oliv);
  padding: var(--sp-3) var(--sp-4); border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; z-index: 120;
  animation: toast-in 240ms;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }
.toast[data-kind="warn"] { border-color: var(--gemeinschaft-tief); color: var(--gemeinschaft-tief); }
.toast[data-kind="bad"] { border-color: var(--wirtschaft-tief); color: var(--wirtschaft-tief); }
.toast[data-kind="gut"] { border-color: var(--natur-tief); color: var(--natur-tief); }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(43, 48, 36, .45); }
.modal__panel {
  position: relative; z-index: 1;
  width: min(780px, 92vw); max-height: 92vh; overflow: auto;
  background: var(--creme); border: 2px solid var(--oliv);
  border-radius: var(--r-lg);
  animation: modal-in 280ms cubic-bezier(.2,.9,.3,1);
}
.modal__panel--wide { width: min(1300px, 96vw); }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: center; padding: var(--sp-4); border-bottom: 2px solid var(--creme-tief); }
.modal__title { font-size: var(--fs-lg); color: var(--oliv); }
.modal__close {
  margin-left: auto; width: 3.2rem; height: 3.2rem; border-radius: 999px;
  background: var(--creme-hell); border: 2px solid var(--oliv); color: var(--oliv);
  font-size: var(--fs-xl); line-height: 1; cursor: pointer;
}
.modal__body { padding: var(--sp-4); }
.modal__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--tinte-leise); }

.storage { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 15rem; gap: var(--sp-4); }
.storage h3 { font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--oliv); }
.storage__summary { font-size: var(--fs-xs); color: var(--tinte); line-height: 1.45; }
.storage__headline {
  margin-top: var(--sp-3); font-family: var(--font-news); font-size: var(--fs-sm);
  color: var(--tinte); border-left: 6px solid var(--messing); padding-left: 12px;
}
.storage__note { font-size: var(--fs-xs); color: var(--tinte-leise); margin-bottom: var(--sp-2); }
.storage__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

.keyboard__display {
  min-height: 5rem; padding: var(--sp-3);
  background: var(--creme-hell); border: 2px solid var(--oliv);
  border-radius: var(--r-sm); font-size: var(--fs-md); line-height: 1.4;
  word-break: break-word;
}
.caret { display: inline-block; width: 3px; height: 1.1em; background: var(--messing); vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.keyboard__counter { font-size: var(--fs-xs); color: var(--tinte-leise); margin-top: 6px; }
.keyboard__counter[data-state="limit"] { color: var(--gemeinschaft-tief); font-weight: 700; }
.keyboard__feedback { min-height: 3.2em; font-size: var(--fs-xs); margin-top: var(--sp-2); line-height: 1.4; }
.keyboard__feedback[data-state="bad"] { color: var(--wirtschaft-tief); font-weight: 700; }
.keyboard__feedback[data-state="ok"] { color: var(--natur-tief); font-weight: 700; }

.keyboard { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 8px; }
.keyboard__row { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.key {
  min-width: 2.6rem; min-height: 3.2rem; padding: 0 6px;
  background: var(--creme-hell); color: var(--tinte);
  border: 2px solid var(--linie-fein); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; flex: 1 1 auto;
  touch-action: manipulation;
}
.key:hover { background: var(--creme-tief); }
.key--wide { flex: 3 1 auto; }
.key--space { flex: 6 1 auto; }
.key--mod { background: var(--creme); font-size: var(--fs-xs); border-color: var(--linie); }
.key--mod[aria-pressed="true"] { background: var(--oliv); color: #ffffff; border-color: var(--oliv); }

.archive { display: flex; flex-direction: column; gap: 8px; max-height: 26rem; overflow-y: auto; }
.archive__item {
  font-size: var(--fs-xs); background: var(--creme-hell); padding: 10px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--linie-fein);
  border-left: 6px solid var(--messing); color: var(--tinte); line-height: 1.4;
}
.archive__meta { display: block; font-size: var(--fs-xs); color: var(--tinte-leise); margin-top: 4px; }
.archive__empty { font-size: var(--fs-xs); color: var(--tinte-leise); }

.dgs-player {
  aspect-ratio: 16 / 9; background: var(--creme-hell);
  border: 3px dashed var(--linie); border-radius: var(--r-md);
  display: grid; place-items: center; text-align: center; padding: var(--sp-4);
}
.dgs-player__placeholder svg { width: 4rem; height: 4rem; color: var(--messing); }
.dgs-player__placeholder p { font-size: var(--fs-lg); font-weight: 700; margin-top: var(--sp-2); color: var(--oliv); }
.dgs-player__meta { font-size: var(--fs-xs) !important; font-weight: 400 !important; color: var(--tinte-leise) !important; margin-top: var(--sp-2) !important; }
.dgs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
.dgs-list .btn { min-height: 4rem; font-size: var(--fs-xs); padding: 0.6rem 1rem; }
.dgs-list .btn[aria-current="true"] { background: var(--oliv); border-color: var(--oliv); color: #ffffff; }

@media (max-width: 1500px) {
  .screen--studio { grid-template-columns: 280px minmax(0, 1fr) 260px; }
  .headline { width: min(58rem, 84%); }
  .headline__satz { gap: var(--sp-3); }
  .headline__spalte { padding-left: var(--sp-3); }
  .cat__head { font-size: var(--fs-xs); }
  .cat__dgs span { display: none; }
  .cat__dgs { padding: 0 0.6rem; }
  .topbar__tools .btn span { display: none; }
  .topbar__tools .btn--icon { padding: 0.6rem 0.9rem; }
}

@media (max-height: 900px) { :root { --sp-6: 2.2rem; --sp-5: 1.6rem; } }
@media (max-height: 760px) {
  :root { --sp-4: 1.1rem; }
  .start__hint { padding: var(--sp-2) var(--sp-3); }
  .start__relief { max-height: clamp(130px, 22vh, 220px); }
}
@media (max-height: 620px) {
  .start__title { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
  .start__teaser { font-size: 1.05rem; }
  .start__hint { font-size: 1rem; }
  .start__stage { display: none; }
}

@media (max-width: 1100px) {
  body { overflow: auto; }
  .screen { position: static; }
  .screen--start { min-height: 100vh; }
  .screen--studio { grid-template-columns: minmax(0, 1fr); height: auto; }
  .topbar { flex-wrap: wrap; }
  .topbar__meta { flex-wrap: wrap; row-gap: var(--sp-1); }
  .topbar__main { flex-wrap: wrap; row-gap: var(--sp-2); }
  .topbar__tools { margin-left: 0; }
  .headline { width: auto; }
  .rail { overflow: visible; padding-right: 0; }
  .stage__frame { min-height: 62vh; }
  .topbar { flex-wrap: wrap; }
  .steps { order: 3; width: 100%; overflow-x: auto; margin: 0; }
  .storage { grid-template-columns: 1fr; }
  .crbox { position: static; width: auto; margin: var(--sp-3); }
  .headline { position: static; margin: var(--sp-3); }
}

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

@media (prefers-contrast: more) {
  :root { --tinte-leise: #353a2c; --linie-fein: rgba(43,48,36,.4); --creme-tief: #d8d4cd; }
}
/* ---- "So funktioniert's" unter dem Startknopf ---- */

.btn--hilfe {
  min-height: clamp(3.4rem, 6.4vh, 4.2rem);
}

.hilfe {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hilfe li { display: flex; align-items: center; gap: 1rem; }

.hilfe__nr {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--oliv-tief);
  color: #fff;
  font-weight: 700;
}

/* ---- Zukunftsspeicher: eigenes Ergebnis und was die anderen hatten ---- */

.storage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: start;
}

.storage__bibliothek { min-width: 0; }

@media (max-width: 900px) {
  .storage { grid-template-columns: minmax(0, 1fr); }
}

/* Sehr flache Bildschirme: die linke Spalte mit den Elementen lief unten
   aus dem Bild. Sie darf rollen, aber nicht ueber den Rand hinausragen. */
@media (max-height: 760px) and (min-width: 1101px) {
  .rail { min-height: 0; max-height: 100%; }
  .panel { padding: var(--sp-1); }
  .panel__head { margin-bottom: var(--sp-1); }
  .panel__hint { display: none; }
  .cat__list { gap: 3px; }
  .cat { margin-bottom: var(--sp-1); }
  .token { padding: 0.25rem 0.45rem; font-size: var(--fs-xs); }
  .token__icon { width: 1.3rem; height: 1.3rem; }
}

/* ---------- Zukunftsspeicher: Bereich unter derselben Kopfzeile ---------- */

/* Im Speicher tritt der Bereich an die Stelle der drei Arbeitsspalten,
   die Kopfzeile mit der Schrittanzeige bleibt stehen. */
body[data-phase="speicher"] .rail,
body[data-phase="speicher"] .stage{display:none}

.speicher{grid-column:1 / -1;grid-row:2;min-height:0;display:flex;flex-direction:column;
  gap:clamp(.8rem,2vh,1.6rem);padding:clamp(1rem,2.6vh,2rem) clamp(1rem,3vw,2.4rem);
  background:var(--weiss,#fff);border:1px solid var(--linie,#e3ded5);border-radius:14px}
.speicher__titel{margin:0;font-size:clamp(1.3rem,3.4vh,2.2rem)}
.speicher__inhalt{flex:1 1 auto;min-height:0;display:grid;align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));
  gap:clamp(1rem,3vw,2.5rem);overflow:hidden}
.speicher__fuss{flex:none;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap}
.speicher__fuss .btn{width:auto;flex:0 0 auto}
@media (max-width:900px){.speicher__inhalt{grid-template-columns:minmax(0,1fr)}}

/* Erreichte Schritte lassen sich anspringen. */
body[data-phase="ergebnis"] .steps__item[data-step="speicher"],
body[data-phase="speicher"] .steps__item[data-step="ergebnis"]{cursor:pointer}

/* ---------------- Zukunftsspeicher: Zaehler und Bibliothek ----------------
   Die rechte Spalte rollt fuer sich. So bleibt die Fussleiste mit "Beenden"
   immer sichtbar, auch wenn 500 Szenarien im Speicher liegen. */

.storage__nr {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--oliv);
}

.storage__bibliothek { display: flex; flex-direction: column; min-height: 0; }

.zaehler {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: var(--sp-2) 0 var(--sp-3);
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: var(--creme-hell, #f6f2ea);
  border: 1px solid var(--linie, #e3ded5);
  flex: none;
}
.zaehler__zahl {
  font-size: clamp(1.6rem, 4.2vh, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--oliv);
  font-variant-numeric: tabular-nums;
}
.zaehler__text { font-size: var(--fs-xs); color: var(--tinte-leise); line-height: 1.35; }

/* Oben bleibt stehen, was zusammenfasst; nur die Szenarien rollen. */
.bibliothek__fest { flex: none; }
.bibliothek__rollen { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.bibliothek__kopf {
  font-size: var(--fs-sm);
  color: var(--oliv);
  margin: var(--sp-2) 0 var(--sp-1);
  flex: none;
}
.bibliothek__kopf--liste { border-top: 2px solid var(--creme-tief, #e3ded5); padding-top: var(--sp-2); }
.bibliothek__fest > .bibliothek__kopf:first-child { margin-top: 0; }
.stats__meta { margin-top: var(--sp-1) !important; }

.archiv { display: flex; flex-direction: column; gap: 6px; }
.archiv__gruppe { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* Ueberschrift ueber jedem Monat. Sie rollt mit: bliebe sie oben stehen,
   wuerde sie die oberste Karte anschneiden, und das Datum steht ohnehin auf
   jeder Karte. */
.archiv__monat {
  padding: 0.35rem 0 0.5rem;
  border-bottom: 2px solid var(--creme-tief, #e3ded5);
  margin: var(--sp-3) 0 var(--sp-2);
}
.archiv__monat:first-child { margin-top: 0; }
.archiv__monat-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 4px;
  flex-wrap: wrap;
}
.archiv__monat-name { font-size: var(--fs-sm); font-weight: 700; color: var(--oliv); }
.archiv__monat-zahl { font-size: var(--fs-xs); color: var(--tinte-leise); }
.archiv__mix--monat { height: 5px; }

/* Der Balken des eigenen Szenarios, links neben der Liste. */
.archiv__mix--eigen { height: 10px; margin: var(--sp-2) 0 0; max-width: 38rem; }

.bibliothek__seit { font-weight: 400; color: var(--tinte-leise); font-size: var(--fs-xs); }
.archiv__leer { font-size: var(--fs-xs); color: var(--tinte-leise); }

.archiv__karte {
  border: 1px solid var(--linie, #e3ded5);
  border-radius: 10px;
  background: var(--weiss, #fff);
  overflow: hidden;
}
.archiv__karte[data-eigenes="true"] { border-color: var(--messing, #b8860b); border-width: 2px; }

.archiv__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.archiv__kopf:hover { background: var(--creme-hell, #f6f2ea); }
.archiv__kopf:focus-visible { outline: 3px solid var(--oliv); outline-offset: -3px; }

.archiv__nr { font-size: var(--fs-xs); font-weight: 700; color: var(--oliv); }
.archiv__titel {
  font-family: var(--font-news);
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--tinte);
}
.archiv__mix { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--creme-tief); }
.archiv__mix > span { display: block; height: 100%; }
.archiv__meta { font-size: var(--fs-xs); color: var(--tinte-leise); }
.archiv__meta b { color: var(--tinte); font-variant-numeric: tabular-nums; }

.archiv__kopf[aria-expanded="true"] { background: var(--creme-hell, #f6f2ea); }

.archiv__detail {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0.8rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--linie, #e3ded5);
}
.archiv__detail li {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--tinte);
}
.archiv__punkt { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--cat); }
.archiv__ort { color: var(--tinte-leise); text-align: right; }


/* Dieselbe Liste wie in den Karten, nur ohne Rahmen und etwas luftiger. */
.archiv__detail--eigen {
  border-top: 0;
  padding: var(--sp-2) 0 0;
  gap: 6px;
}
.archiv__detail--eigen li { font-size: var(--fs-sm); }
.archiv__detail--eigen { max-width: 38rem; }

/* ---------------- Feld fuer das Museumsteam, nur mit "?zahlen" ---------- */
.dienst {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  max-width: 20rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: #1d2420;
  color: #f3efe6;
  font-size: 0.82rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.dienst__kopf { font-weight: 700; margin: 0 0 0.2rem; }
.dienst__zahl { margin: 0 0 0.5rem; }
.dienst__knoepfe { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dienst__knoepfe button {
  font: inherit;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  border: 1px solid #6d7b70;
  background: #2b332d;
  color: inherit;
  cursor: pointer;
}
.dienst__knoepfe button:hover { background: #3a443d; }

/* Die rechte Spalte soll fuer sich rollen, damit die Fussleiste mit
   "Beenden" stehen bleibt. Dafuer muss die Rasterzeile die Hoehe vorgeben:
   mit align-content:start ist jede Spalte so hoch wie ihr Inhalt, und dann
   gibt es nichts zu rollen, sondern nur abgeschnittene Karten. */
@media (min-width: 1101px) {
  .speicher__inhalt { align-content: stretch; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .storage__scenario,
  .storage__bibliothek { min-height: 0; }
  .storage__scenario { overflow-y: auto; }
}

/* Flache Bildschirme: der feste Kopf aus Zaehler und Statistik nimmt der
   Liste sonst den ganzen Platz. Bei 1600x680 blieben 35 Pixel uebrig. */
@media (max-height: 860px) {
  .storage__bibliothek > h3 { margin-bottom: 2px; }
  .storage__note { margin-bottom: var(--sp-1); }
  .zaehler { padding: 0.35rem 0.75rem; margin: var(--sp-1) 0 var(--sp-2); }
  .zaehler__zahl { font-size: clamp(1.3rem, 3.4vh, 2rem); }
  .bibliothek__kopf { margin: var(--sp-1) 0 2px; }
  .bibliothek__kopf--liste { padding-top: var(--sp-1); }
  .stats { gap: 3px; }
}

/* Noch flacher: der Hinweistext und die Fussnote unter der Statistik
   muessen weichen, sonst sieht man kein einziges Szenario. */
@media (max-height: 720px) {
  .storage__note { display: none; }
  .stats__meta { display: none; }
  .archiv__monat { margin: var(--sp-2) 0 var(--sp-1); }
}

/* Bis 1100 Pixel rollt die ganze Seite, so war die Station schon vorher
   gebaut. Dann darf die Liste nicht ins Unendliche wachsen, sonst waere die
   Seite mehrere Bildschirme lang. */
@media (max-width: 1100px) {
  .bibliothek__rollen { max-height: 58vh; }
}