/* Seite für Gemeinden (Auftrag lg, 12.11.2026). Farben und Schriften wie die öffentliche Website (Design «Sand &
   Pflaume», frontend/website-quelle/100-css-basis-und-landing.css — dort abgelesen, hier eigenständig, damit die
   Seite unabhängig von der Website bleibt). Schriften vom eigenen Server (../statisch/schriften.css). */
:root {
  --page: #F6F1EA;
  --surface: #FFFDF9;
  --ink: #2B2320;
  --ink-secondary: #5C4F49;
  --muted: #6F625A;
  --gridline: #E6DDD2;
  --color-primary: #7A3E6B;
  --color-primary-dark: #5E2C52;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw: 1140px;
  --textbreite: 680px;

  /* Karte: Grau für «Noch offen» und je Kanton ein eigenes Grün («Kantönligeist»). Jedes Grün hat mindestens 3:1
     Kontrast zum Grau (WCAG 1.4.11); Wächter: tests/test_seite_gemeinden.py. */
  --grau: #DDD7D0;
  --grau-kante: #B5ABA0;
  --uebergang: 600ms;
  /* Masse der Karte in Einheiten der Zeichenfläche (eine Einheit = 100 m; die Karte ist rund 3600 Einheiten breit,
     auf dem Bildschirm etwa 3,6 Einheiten je Pixel): Dicke der Scholle, Anheben der farbigen Kantone, Anheben des
     gewählten Kantons. */
  --tiefe: 30px;
  --hub: 11px;
  --hub-gewaehlt: 30px;
  color-scheme: light;
}

/* Feste Zuordnung je Kanton: anderer Farbton (86° bis 168°) und andere Sättigung. Verteilt so, dass Nachbarn
   sich am deutlichsten unterscheiden (kleinster Farbabstand zweier Nachbarn ΔE 12.9, SZ und ZG; Auftrag lg2).
   Die Regel gilt für die Fläche (.kanton) und die Kante im Sockel (.kante). */
.karte [data-kanton="ZH"] { --gruen: #2A6F58; }
.karte [data-kanton="BE"] { --gruen: #367266; }
.karte [data-kanton="LU"] { --gruen: #366336; }
.karte [data-kanton="UR"] { --gruen: #227754; }
.karte [data-kanton="SZ"] { --gruen: #376E1C; }
.karte [data-kanton="OW"] { --gruen: #487728; }
.karte [data-kanton="NW"] { --gruen: #2F7F43; }
.karte [data-kanton="ZG"] { --gruen: #3C8642; }
.karte [data-kanton="SO"] { --gruen: #347A29; }
.karte [data-kanton="BS"] { --gruen: #1E7129; }
.karte [data-kanton="BL"] { --gruen: #317748; }
.karte [data-kanton="AR"] { --gruen: #3E7939; }
.karte [data-kanton="AI"] { --gruen: #40775C; }
.karte [data-kanton="AG"] { --gruen: #56742F; }
.karte [data-kanton="TG"] { --gruen: #3B6F2A; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}
p { margin: 0 0 1em; }
a { color: var(--color-primary); text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

/* Einstieg: Titel, Zeile, Karte */
.einstieg {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 20px 24px;
  text-align: center;
}
.einstieg h1 { font-size: clamp(40px, 7vw, 64px); margin-bottom: .15em; color: var(--color-primary-dark); }
.zeile { font-size: clamp(18px, 2.4vw, 22px); color: var(--ink-secondary); margin-bottom: 8px; }

.karte { position: relative; margin: 8px auto 0; max-width: 980px; }
/* Beschrieb der Karte (L-035): nur für Vorlesegeräte, als Name des SVG (aria-labelledby); für Sehende unsichtbar. */
.karte-beschrieb {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Die Scholle: leicht nach hinten geneigt, mit weichem Schatten auf dem Grund. Gedreht um die Unterkante — so wird
   die Karte nie breiter als ihr Platz; der Raum, den die geneigte Oberkante frei lässt (rund 15 % der Breite bei
   einer Tiefe proportional zur Breite), nimmt der negative Rand oben zum grössten Teil zurück. */
.karte-flaeche { perspective: min(1600px, 165vw); margin-top: -9%; }
.karte-bild {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: rotateX(26deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 2px rgba(43, 35, 32, .22)) drop-shadow(0 22px 20px rgba(43, 35, 32, .16));
}
.karte-bild path { stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Sockel: je Kanton die Kante, nach unten versetzt — am Südrand sichtbar als Dicke der Scholle. */
.kante { fill: var(--grau-kante); transform: translateY(var(--tiefe)); transition: fill var(--uebergang) ease; }
.kante.farbig { fill: color-mix(in srgb, var(--gruen) 58%, #1F1A16); }
/* Enklaven fremden Gebiets (Büsingen, Campione d'Italia): hell wie die Seite, über den versetzten Kanten — sonst
   schiene durch die Lücke die Kante als dunkler Fleck (Auftrag lgk). */
.enklave { fill: var(--page); }

/* Fläche: graue Kantone flach und zurückhaltend, farbige angehoben in ihrem Grün; feine helle Grenzlinien. */
.kanton { cursor: default; outline: none; }
.kanton .flaeche {
  fill: var(--grau);
  stroke: var(--surface);
  stroke-width: 1;
  transition: fill var(--uebergang) ease, transform var(--uebergang) ease;
}
.kanton.farbig .flaeche { fill: var(--gruen); transform: translateY(calc(-1 * var(--hub))); }
.kanton.farbig .flaeche { stroke: rgba(255, 253, 249, .8); }

/* Mit Skript: vor dem Ablauf grau und flach, dann nacheinander grün und angehoben. */
.mit-skript .karte:not(.fertig) .kanton.farbig:not(.an) .flaeche { fill: var(--grau); transform: none; }
.mit-skript .karte:not(.fertig) .kante.farbig:not(.an) { fill: var(--grau-kante); }
.kanton.an .flaeche { animation: heben 900ms ease-out; }
@keyframes heben {
  0% { transform: none; }
  45% { transform: translateY(calc(-2.4 * var(--hub))); }
  100% { transform: translateY(calc(-1 * var(--hub))); }
}

/* Gewählt (Überfahren, Antippen): Das Skript zeichnet den Kanton in die oberste Ebene ab und hebt ihn
   etwas mehr an — so liegt er über allen Nachbarn. */
.hervor { pointer-events: none; }
.hervor[hidden] { display: none; }
.hervor-kante { transform: none; }
.hervor-flaeche {
  stroke: var(--color-primary);
  stroke-width: 2;
  transform: translateY(calc(-1 * var(--hub-gewaehlt)));
}

.kanton-name {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 0);
  transform: translate(-50%, calc(-100% - 10px));
  margin: 0;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.kanton-name[hidden] { display: none; }

.legende { margin: 6px auto 0; font-size: 14px; color: var(--ink-secondary); }
.legende ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
}
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.muster { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.muster-farbig {
  background: linear-gradient(135deg, #217343, #3C8642 50%, #56742F);
  box-shadow: 0 2px 0 #24503A;
  transform: translateY(-1px);
}
/* Quelle der Geodaten, direkt unter der Legende (Nutzungsbedingungen OGD von swisstopo, Ziffer 2). */
.legende .quelle { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.muster-grau { background: var(--grau); box-shadow: inset 0 0 0 1px var(--grau-kante), 0 1px 0 var(--grau-kante); }

/* Abschnitte */
.abschnitt { padding: 48px 20px; }
.abschnitt > * { max-width: var(--textbreite); margin-left: auto; margin-right: auto; }
.abschnitt h2 { font-size: clamp(26px, 3.6vw, 34px); color: var(--color-primary-dark); }
.abschnitt-hell {
  background: var(--surface);
  border-top: 1px solid var(--gridline);
  border-bottom: 1px solid var(--gridline);
}

/* Fusszeile: Kontakt, Impressum, Datenschutz */
.fuss {
  border-top: 1px solid var(--gridline);
  padding: 36px 20px 48px;
  font-size: 15px;
  color: var(--muted);
  display: grid;
  gap: 8px 40px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.fuss h2 { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; color: var(--ink); margin-bottom: .3em; }
.fuss a { color: var(--color-primary-dark); }
@media (min-width: 860px) {
  .einstieg { padding-top: 56px; }
  .abschnitt { padding: 64px 20px; }
  .fuss { grid-template-columns: 1fr 1.3fr 2fr; }
}

/* Weniger Bewegung: sofort der Endzustand, ohne Übergänge. */
@media (prefers-reduced-motion: reduce) {
  .kanton .flaeche { transition: none; }
  .kanton.an .flaeche { animation: none; }
}