/* Tool 2 „Die verschwindende Karte" (/karte) — dunkle Full-Bleed-Sektion.
   Farb-Tokens: --w1-* aus welle1.css (Dunkel-Töne der Karte sind dort definiert);
   fehlende Töne hier als --karte-*. Mobile-first, Breakpoints 700 px (Fakten-Grid)
   und 960 px (Hero-Grid, CTA-Reihe). Nur Klassen als Selektoren — IDs gehören
   dem JS (karte.js). Kein Inline-CSS (strikte CSP). */

:root {
  --karte-glow: rgba(243, 217, 205, 0.5); /* Glow nur am Regler-Daumen (Mockup) */
  --karte-rost-hell: #cf6a45;             /* Terra aufgehellt: Kennzahlen auf Dunkel-Grund (Kontrast) */
  --karte-grau-hell: #a29a8c;             /* w1-grau aufgehellt: Kleintext auf Dunkel-Grund (AA 4,8:1) */
}

/* ---------------------------------------------------------------- Grundfläche */

.karte-seite {
  background: var(--w1-tinte);
  color: var(--w1-creme);
}
.karte-dunkel {
  background: var(--w1-tinte);
  padding: 28px 0 40px;
}
.karte-inhalt {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- Intro */

.karte-intro {
  text-align: center;
  padding: 0 0 10px;
}
.karte-intro h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 3.4vw + 1rem, 2.75rem);
  line-height: 1.12;
  margin: 0 0 6px;
  text-wrap: balance;
}
.karte-subline {
  font-size: 0.85rem;
  color: var(--w1-dunkel-text-soft);
  margin: 0;
}

/* ---------------------------------------------------------------- Bühne (Canvas) */

.karte-buehne {
  padding: 8px 0 4px;
}
.karte-canvas {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  color: var(--w1-dunkel-text-soft); /* Fallback-Text, falls Canvas nicht rendert */
}
.karte-buehne-fuss {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 1.5rem;
  margin-top: 6px;
}
.karte-faktor {
  margin: 0;
  font-size: 0.72rem;
  color: var(--karte-grau-hell);
}
.karte-ton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.69rem;
  color: var(--w1-dunkel-text-soft);
  background: none;
  border: 1px solid var(--w1-grau);
  border-radius: 99px;
  padding: 4px 12px;
  cursor: pointer;
}
.karte-ton:hover { color: var(--w1-creme); border-color: var(--w1-dunkel-text-soft); }
.karte-ton-svg { display: block; }
.karte-ton[aria-pressed="true"] .karte-ton-wenn-aus { display: none; }
.karte-ton:not([aria-pressed="true"]) .karte-ton-wenn-an { display: none; }

/* ---------------------------------------------------------------- Zähler */

.karte-panel {
  text-align: center;
  padding: 4px 0 0;
}
.karte-zaehler {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.875rem, 5vw + 1rem, 4rem);
  line-height: 1;
  color: var(--w1-peach);
  font-variant-numeric: tabular-nums;
}
.karte-zaehler-label {
  font-size: 0.75rem;
  color: var(--w1-dunkel-text-soft);
  margin: 2px 0 0;
}
/* Kumulativer Verlust — läuft mit dem Zähler mit. Im Startjahr ist der Absatz
   leer, behält aber seine Zeilenhöhe: sonst springt beim ersten Ziehen der
   ganze Block darunter nach unten. */
.karte-verlust {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  min-height: 1.4em;
  color: var(--karte-rost-hell);
  font-variant-numeric: tabular-nums;
  margin: 6px 0 0;
}
.karte-zaehler-hinweis {
  font-size: 0.72rem;
  color: var(--karte-grau-hell);
  margin: 6px auto 0;
  max-width: 34em;
}
.karte-kernaussage {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--w1-peach);
  margin: 12px 0 0;
}

/* ---------------------------------------------------------------- Regler */

.karte-regler-block {
  max-width: 420px;
  margin: 14px auto 0;
}
.karte-regler-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.karte-spur-wrap {
  position: relative;
  flex: 1;
  padding-bottom: 1.6rem; /* Platz für den Bruch-Marker-Text */
}
.karte-regler {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
/* Track: Füllung über Custom-Property (karte.js setzt --karte-fuellung; Start 100 % = 2024) */
.karte-regler::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--w1-terra) var(--karte-fuellung, 100%),
    var(--w1-dunkel-3) var(--karte-fuellung, 100%)
  );
}
.karte-regler::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--w1-dunkel-3);
}
.karte-regler::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--w1-terra);
}
.karte-regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--w1-peach);
  border: 3px solid var(--w1-terra);
  box-shadow: 0 0 10px var(--karte-glow);
}
.karte-regler::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--w1-peach);
  border: 3px solid var(--w1-terra);
  box-shadow: 0 0 10px var(--karte-glow);
}
.karte-regler:focus-visible {
  outline: 2px solid var(--w1-peach);
  outline-offset: 4px;
}

/* Bruch-Marker: Position aus der Zeitachse der Daten —
   (2020 − 2009) / (2024 − 2009) = 73,33 %. Bei Datenänderung anpassen. */
.karte-marker-2020 {
  position: absolute;
  top: 3px;
  left: 73.33%;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: 0.69rem;
  line-height: 1.2;
  color: var(--karte-grau-hell);
  white-space: nowrap;
  pointer-events: none; /* Strich/Text fangen keine Regler-Gesten ab … */
}
.karte-marker-2020 .w1-fn { pointer-events: auto; } /* … der Fußnoten-Button schon */
.karte-marker-strich {
  display: block;
  width: 2px;
  height: 16px;
  margin-right: -1px;
  background: var(--w1-grau);
}
.karte-jahr {
  width: 5.2rem;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--w1-creme);
  background: var(--w1-dunkel-1);
  border: 1px solid var(--w1-dunkel-3);
  border-radius: 8px;
  text-align: center;
}
.karte-skala {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--karte-grau-hell);
  margin-top: 2px;
  /* rechts endet die Skala am Zahlenfeld vorbei — auf die Spur begrenzen */
  max-width: calc(100% - 5.2rem - 10px);
}

/* ---------------------------------------------------------------- Eyebrows */

.karte-eyebrow {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--w1-peach);
  margin: 0 0 10px;
}

/* ---------------------------------------------------------------- Länder-Auswahl + Kachel */

.karte-land-block {
  max-width: 420px;
  margin: 26px auto 0;
  text-align: left;
}
.karte-land-block .karte-eyebrow { text-align: center; }
.karte-land {
  display: block;
  width: 100%;
  padding: 10px 38px 10px 12px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--w1-creme);
  background-color: var(--w1-dunkel-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23BFB6AC' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  border: 1px solid var(--w1-dunkel-3);
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.karte-kachel {
  background: var(--w1-dunkel-1);
  border: 1px solid var(--w1-dunkel-3);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}
.karte-kachel-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}
.karte-kachel-kopf strong {
  font-size: 0.94rem;
  color: var(--w1-creme);
}
.karte-kachel-delta {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--karte-rost-hell);
  white-space: nowrap;
}
.karte-kachel-bestand,
.karte-kachel-anker {
  font-size: 0.81rem;
  line-height: 1.55;
  color: var(--w1-dunkel-text-soft);
  margin: 0 0 6px;
}
.karte-kachel-hinweis {
  font-size: 0.72rem;
  color: var(--karte-grau-hell);
  margin: 0;
}
.karte-kachel-bestand:empty,
.karte-kachel-anker:empty,
.karte-kachel-hinweis:empty { display: none; }
.karte-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font: inherit;
  font-size: 0.78rem;
  color: var(--w1-dunkel-text-soft);
  background: none;
  border: 1px solid var(--w1-dunkel-3);
  border-radius: 99px;
  padding: 6px 14px;
  cursor: pointer;
}
.karte-zurueck:hover { color: var(--w1-creme); border-color: var(--karte-grau-hell); }
.karte-zurueck::before { content: "\2190"; } /* ← */

/* ---------------------------------------------------------------- Ohne JS */

.karte-noscript {
  text-align: center;
  font-size: 0.81rem;
  color: var(--w1-dunkel-text-soft);
  margin: 10px 0 0;
}

/* ---------------------------------------------------------------- Fakten-Kacheln */

.karte-fakten {
  padding: 28px 0 0;
}
.karte-fakten .karte-eyebrow { text-align: center; }
.karte-fakten-grid {
  display: grid;
  gap: 10px;
}
.karte-fakt {
  background: var(--w1-dunkel-1);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--w1-dunkel-text);
  margin: 0;
}
.karte-fakt strong { color: var(--w1-peach); }

/* ---------------------------------------------------------------- Schluss */

.karte-schluss {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.45;
  text-align: center;
  max-width: 26em;
  margin: 28px auto 4px;
}
.karte-akzent { color: var(--w1-peach); }

/* ---------------------------------------------------------------- CTA-Reihe + Share (Dunkel-Overrides) */

.karte-cta-reihe {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
}
.karte-cta-reihe .w1-cta { margin: 0; }
.karte-seite .w1-cta { color: var(--w1-tinte); } /* helle Karten auf dunklem Grund */
.karte-seite .w1-cta--wirte { background: var(--w1-creme); }

.karte-seite .w1-share {
  border: 1px solid var(--w1-dunkel-3);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 24px 0 0;
}
.karte-seite .w1-share h2 { color: var(--w1-creme); font-size: 1.05rem; }
.karte-seite .w1-share-buttons button {
  background: none;
  border: 1px solid var(--w1-dunkel-3);
  color: var(--w1-dunkel-text);
}
.karte-seite .w1-share-buttons button:first-child {
  background: var(--w1-gruen);
  border-color: var(--w1-gruen);
  color: #fff;
}
.karte-seite .w1-share-buttons button:hover { filter: brightness(1.15); }
.karte-seite .w1-share-status { color: var(--w1-dunkel-text-soft); }
.karte-share-hinweis {
  font-size: 0.78rem;
  color: var(--w1-dunkel-text-soft);
  margin: 8px 0 0;
}

/* Fußnoten + Methodik-Link auf Dunkel */
.karte-seite .w1-fn-btn { color: var(--w1-peach); }
.karte-seite .w1-cta .w1-fn-btn { color: var(--w1-terra); }
.karte-seite .w1-methodik-hinweis { color: var(--karte-grau-hell); margin: 18px 0 0; }
.karte-seite .w1-methodik-hinweis a { color: var(--w1-peach); }
.karte-schema-hinweis {
  font-size: 0.72rem;
  color: var(--karte-grau-hell);
  margin: 26px 0 0;
}

/* ---------------------------------------------------------------- Fokus sichtbar */

.karte-ton:focus-visible,
.karte-jahr:focus-visible,
.karte-land:focus-visible,
.karte-zurueck:focus-visible,
.karte-seite .w1-share-buttons button:focus-visible,
.karte-seite .w1-fn-btn:focus-visible {
  outline: 2px solid var(--w1-peach);
  outline-offset: 2px;
}
.karte-seite .btn:focus-visible {
  outline: 2px solid var(--w1-terra);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Breakpoint ~700 px */

@media (min-width: 700px) {
  /* Zwei Kacheln — die dritte („WARUM ES ZÄHLT") ist am 02.08.2026 entfallen.
     Kommt eine belegte dritte dazu: hier auf repeat(3, 1fr) zurück. */
  .karte-fakten-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
  }
  .karte-fakt {
    border-radius: 12px;
    padding: 18px 20px;
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

/* ---------------------------------------------------------------- Breakpoint 960 px (Hero-Grid, CTA-Reihe) */

@media (min-width: 960px) {
  .karte-dunkel { padding: 44px 0 56px; }

  .karte-hero {
    display: grid;
    grid-template-columns: 560px 1fr;
    grid-template-areas:
      "buehne intro"
      "buehne panel";
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    align-items: start;
  }
  .karte-intro {
    grid-area: intro;
    text-align: left;
    padding: 8px 0 0;
  }
  .karte-subline { font-size: 0.94rem; margin: 0 0 10px; }
  .karte-buehne { grid-area: buehne; padding: 0; }
  .karte-canvas { max-width: 560px; }
  .karte-panel {
    grid-area: panel;
    text-align: left;
    max-width: 460px;
  }
  .karte-zaehler-label { font-size: 0.81rem; }
  .karte-zaehler-hinweis { margin-left: 0; }
  .karte-regler-block { margin-left: 0; }
  .karte-skala { font-size: 0.75rem; }
  .karte-land-block { margin-left: 0; }
  .karte-land-block .karte-eyebrow,
  .karte-fakten .karte-eyebrow { text-align: left; }
  /* Zwei Kacheln linksbündig unter der Eyebrow, nicht über die volle Breite
     auseinandergezogen. */
  .karte-fakten-grid { margin-left: 0; }
  .karte-buehne-fuss { justify-content: center; }

  .karte-fakten { padding-top: 36px; }
  .karte-schluss { margin-top: 36px; }
  .karte-cta-reihe {
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    margin-top: 32px;
    align-items: stretch;
  }
}

/* ---------------------------------------------------------------- Bewegung reduzieren
   Punkt-Animationen regelt karte.js selbst; hier nur eigene Effekte dämpfen.
   welle1.css nullt Transitions unter prefers-reduced-motion bereits global. */

@media (prefers-reduced-motion: reduce) {
  .karte-regler::-webkit-slider-thumb { box-shadow: none; }
  .karte-regler::-moz-range-thumb { box-shadow: none; }
}

/* ---------------------------------------------------------------- Methodik
   Helle Unterseite /karte/methodik („So haben wir gezählt") — ruhige
   Textseite auf .w1-page (Creme), max. Lesebreite, klare h2-Struktur. */

.methodik-seite { padding: 40px 0 64px; }
.methodik-inhalt {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}
.methodik-kopf { padding: 0 0 6px; }
.methodik-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w1-terra);
  margin: 0 0 10px;
}
.methodik-inhalt h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw + 1rem, 2.4rem);
  line-height: 1.15;
  margin: 0 0 12px;
  text-wrap: balance;
}
.methodik-intro {
  font-size: 1.02rem;
  color: var(--w1-text-grau);
  margin: 0;
}
.methodik-abschnitt h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 34px 0 10px;
}
.methodik-abschnitt p,
.methodik-abschnitt li {
  color: var(--w1-text-grau);
  line-height: 1.65;
}
.methodik-abschnitt p { margin: 0 0 12px; }
.methodik-abschnitt ul { margin: 0 0 12px; padding-left: 20px; }
.methodik-abschnitt li { margin: 0 0 8px; }
.methodik-abschnitt a { color: var(--w1-gruen); }
.methodik-abschnitt a:hover { color: var(--w1-terra-dark); }
.methodik-zurueck { margin: 40px 0 0; font-weight: 600; }
.methodik-zurueck a { color: var(--w1-terra); text-decoration: none; }
.methodik-zurueck a:hover { text-decoration: underline; }
.methodik-inhalt a:focus-visible {
  outline: 2px solid var(--w1-terra);
  outline-offset: 2px;
}

/* hidden-Attribut darf nicht von display-Regeln überstimmt werden (QA F1/F2) */
.karte-zurueck[hidden],
.karte-ton[hidden] { display: none; }