/* Straßenvergabe GGS Frixheim — schlichtes, warmes Layout.
   Farben: Navy als Struktur, Gold als Akzent (Blackfort-CI, helles Thema),
   Elfenbein als Fläche. Keine externen Schriften oder Skripte. */

:root {
  --navy:        #1a3a68;
  --navy-tief:   #0e2246;
  --gold:        #c49b18;
  --gold-hell:   #f0e4bd;
  --flaeche:     #fbf8f1;
  --karte:       #ffffff;
  --text:        #2c2f36;
  --grau:        #6b7280;
  --rahmen:      #e4ded1;
  --fehler:      #9b2226;
  --erfolg:      #1f6f43;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.bahn { width: min(860px, 100% - 2.5rem); margin-inline: auto; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.kopf {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}
.kopf-inhalt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 0; flex-wrap: wrap;
}
.marke { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; }
.marke strong { display: block; font-size: 1.02rem; letter-spacing: .01em; }
.marke small { display: block; font-size: .78rem; color: var(--gold-hell); letter-spacing: .06em;
               text-transform: uppercase; }
.kopf nav { display: flex; align-items: center; gap: 1.1rem; }
.kopf nav a, .kopf .verweis {
  color: #fff; text-decoration: none; font-size: .95rem;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.kopf nav a:hover, .kopf .verweis:hover { border-bottom-color: var(--gold); }
.verweis { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.inline { display: inline; }

/* ── Inhalt ────────────────────────────────────────────────────────────── */

main { flex: 1; padding: 2rem 0 3rem; }

.karte {
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: 12px;
  padding: 1.8rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(26, 58, 104, .06);
}
.karte.schmal { max-width: 32rem; margin-inline: auto; }
.karte.gross { border-top: 4px solid var(--gold); }

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  color: var(--navy-tief);
  line-height: 1.25;
  margin: 0 0 .7rem;
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.25rem; margin-top: 1.8rem; }
.karte > h1:first-child, .karte > h2:first-child { margin-top: 0; }

.ueberzeile {
  color: var(--gold); text-transform: uppercase; letter-spacing: .12em;
  font-size: .76rem; font-weight: 700; margin: 0 0 .3rem;
}
.unterzeile { color: var(--grau); margin-top: -.4rem; }

.termin {
  border-left: 4px solid var(--gold);
  background: #fdfaf1;
  padding: .8rem 1.1rem;
  font-weight: 700;
  color: var(--navy-tief);
}
.termin span { font-weight: 400; }
.gruss { font-weight: 700; color: var(--navy); }
.signatur { font-style: italic; color: var(--grau); }

.schritte { padding-left: 1.2rem; }
.schritte li { margin-bottom: .45rem; }

.hinweisbox {
  background: var(--gold-hell);
  border-radius: 8px;
  padding: .8rem 1rem;
  margin: 1.1rem 0;
}

a { color: var(--navy); }
a:hover { color: var(--gold); }

/* ── Formulare ─────────────────────────────────────────────────────────── */

label { display: block; margin: 1.1rem 0 .3rem; font-weight: 600; color: var(--navy-tief); }
label.haken { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
label.haken input { margin-top: .35rem; }
.freiwillig { font-weight: 400; color: var(--grau); }

input[type=text], input[type=email], input[type=password], input[type=tel], select {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--rahmen);
  border-radius: 7px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(196, 155, 24, .25);
}

.notiz { color: var(--grau); font-size: .88rem; margin: .35rem 0 0; }

.knopf {
  display: inline-block;
  margin-top: 1.3rem;
  padding: .68rem 1.4rem;
  background: var(--gold);
  color: #22242a;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: #b28c15; color: #22242a; }
.knopf.still { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.knopf.still:hover { background: var(--navy); color: #fff; }
.knopfleiste { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.knopfleiste .knopf { margin-top: .8rem; }

/* ── Meldungen ─────────────────────────────────────────────────────────── */

.meldungen { margin-bottom: 1.2rem; }
.meldung {
  margin: 0 0 .5rem; padding: .7rem 1rem; border-radius: 8px;
  border-left: 4px solid var(--grau); background: #fff;
}
.meldung.erfolg  { border-color: var(--erfolg); background: #f0f8f3; }
.meldung.fehler  { border-color: var(--fehler); background: #fdf3f3; }
.meldung.hinweis { border-color: var(--navy);   background: #f2f5fa; }

/* ── Tabellen und Kacheln ──────────────────────────────────────────────── */

.liste { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .93rem; }
.liste th, .liste td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rahmen);
                       vertical-align: top; }
.liste th { color: var(--navy-tief); font-size: .8rem; text-transform: uppercase;
            letter-spacing: .06em; }
.liste tr.entfaellt { color: var(--grau); text-decoration: line-through; }
.liste tr.entfaellt em { text-decoration: none; }
.wunschzeile { white-space: nowrap; }

.kacheln { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0; }
.kachel {
  flex: 1 1 8rem; background: #f6f3ea; border-radius: 10px; padding: .8rem 1rem;
  font-size: .85rem; color: var(--grau);
}
.kachel .zahl { display: block; font-size: 1.7rem; font-weight: 700; color: var(--navy-tief);
                font-family: Georgia, serif; }

.ergebnisstrasse {
  font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700;
  color: var(--navy-tief); background: var(--gold-hell);
  padding: .9rem 1.1rem; border-radius: 8px;
}

code { background: #f3f1ea; padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }

/* ── Fuß ───────────────────────────────────────────────────────────────── */

.fuss {
  background: var(--navy-tief);
  color: #cdd6e4;
  padding: 1.6rem 0;
  font-size: .9rem;
}
.fuss a { color: var(--gold); }
.sponsor { margin: 0 0 .5rem; }
.sponsor .label { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
                  color: #93a3bb; margin-right: .4rem; }
.sponsor a { font-weight: 700; text-decoration: none; }
.sponsor a:hover { text-decoration: underline; }
.sponsor .zusatz { color: #93a3bb; }
.rechtlich { margin: 0; color: #93a3bb; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .karte { padding: 1.3rem 1.15rem; }
  h1 { font-size: 1.5rem; }
  .liste { font-size: .86rem; }
}

/* ── Straßenkarte der Sammelbezirke ────────────────────────────────────────
   Selbst gerendert aus OpenStreetMap-Geometrie; es wird nichts von fremden
   Servern nachgeladen. Die Karte ergänzt die Auswahlfelder, sie ersetzt sie
   nicht — ohne JavaScript bleibt sie eine Übersicht, die Felder funktionieren. */

.karte-huelle { position: relative; }   /* Bezug für das Auswahlfeld */

.karte-tafel {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  margin: 1.1rem 0 .4rem;
}
.karte-feld { flex: 3 1 21rem; margin: 0; min-width: 0; }
/* Ein Bezirk von 46 soll die Tafel nicht dominieren. */
.karte-feld-neben { flex: 1 1 12rem; max-width: 17rem; }
.karte-feld figcaption {
  margin-top: .4rem; text-align: center;
  font-size: .84rem; color: var(--grau);
}

/* Eigener Name statt `.karte` — so heißen die Inhaltskarten der Seite, die Stile
   überschrieben sich gegenseitig (Karten wurden cremefarben statt weiß). */
.karte-bild {
  width: 100%; height: auto; display: block;
  background: #f6f2e6;
  border: 1px solid var(--rahmen);
  border-radius: 12px;
}
.karte-wasser path  { fill: none; stroke: #c3d8e8; stroke-width: 2.2; stroke-linecap: round; }
.karte-untergrund path { fill: none; stroke: #dcd3bf; stroke-width: 1.8; stroke-linecap: round; }

.bezirk-linie {
  fill: none; stroke: #9aabc2; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .12s ease, stroke-width .12s ease;
}
.bezirk-griff { fill: none; stroke: transparent; stroke-width: 16; }
.karte-aktiv .bezirk-griff { pointer-events: stroke; cursor: pointer; }
/* Am Finger ist die Karte kleiner und der Zeiger ungenauer — Trefferfläche
   verbreitern, sonst trifft man die Straße kaum. */
@media (pointer: coarse) {
  .bezirk-griff { stroke-width: 30; }
}

.karte-aktiv .bezirk:hover .bezirk-linie { stroke: var(--gold); stroke-width: 6.5; }

.bezirk[data-wunsch] .bezirk-linie { stroke-width: 6; }
.bezirk[data-wunsch="1"] .bezirk-linie { stroke: #c49b18; }
.bezirk[data-wunsch="2"] .bezirk-linie { stroke: #1a3a68; }
.bezirk[data-wunsch="3"] .bezirk-linie { stroke: #3f7cb0; }

.bezirk-marke { display: none; pointer-events: none; }
.bezirk[data-wunsch] .bezirk-marke { display: block; }
.bezirk-marke circle { stroke: #fff; stroke-width: 2.5; }
.bezirk-marke text {
  font: 700 13px system-ui, sans-serif; fill: #fff; text-anchor: middle;
}
.bezirk[data-wunsch="1"] .bezirk-marke circle { fill: #b28c15; }
.bezirk[data-wunsch="2"] .bezirk-marke circle { fill: #1a3a68; }
.bezirk[data-wunsch="3"] .bezirk-marke circle { fill: #3f7cb0; }

.karte-schule { fill: #9b2226; stroke: #fff; stroke-width: 2.5; }
.karte-schulname {
  font: 700 15px system-ui, sans-serif; fill: #9b2226; text-anchor: middle;
  paint-order: stroke fill; stroke: #f6f2e6; stroke-width: 4px;
}
.karte-ort {
  font: 700 16px Georgia, serif; fill: var(--navy); opacity: .65; text-anchor: middle;
  letter-spacing: .09em; paint-order: stroke fill; stroke: #f6f2e6; stroke-width: 5px;
}

/* Auswahlfeld, das beim Antippen eines Bezirks aufgeht */
.karte-wahl {
  position: absolute; z-index: 5; width: min(20rem, 90%);
  background: #fff; border: 1.5px solid var(--navy); border-radius: 10px;
  padding: .8rem .9rem; box-shadow: 0 6px 20px rgba(26, 58, 104, .18);
}
.karte-wahl[hidden] { display: none; }
.karte-wahl-titel { margin: 0 0 .5rem; font-weight: 700; color: var(--navy-tief); }
.karte-wahl-hinweis { margin: -.2rem 0 .6rem; font-size: .82rem; color: var(--grau); }
.karte-wahl-knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }
.karte-wahl-knopf {
  flex: 1 1 auto; padding: .45rem .6rem; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--navy); background: #fff; border: 1.5px solid var(--navy);
  border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.karte-wahl-knopf:hover { background: var(--navy); color: #fff; }
.karte-wahl-knopf[aria-pressed="true"] {
  background: var(--gold); border-color: var(--gold); color: #22242a;
}
.karte-wahl-loesen {
  margin-top: .55rem; padding: 0; font: inherit; font-size: .86rem;
  color: var(--fehler); background: none; border: 0; cursor: pointer;
  text-decoration: underline;
}

.karte-legende {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin: .3rem 0 0; padding: 0; list-style: none;
  font-size: .86rem; color: var(--grau);
}
.karte-legende li { display: flex; align-items: center; gap: .4rem; }
.karte-legende i {
  width: 1.5rem; height: .32rem; border-radius: 2px; background: #9aabc2;
}
.karte-legende .l1 { background: #c49b18; }
.karte-legende .l2 { background: #1a3a68; }
.karte-legende .l3 { background: #3f7cb0; }

.karte-quelle { margin: .7rem 0 0; font-size: .8rem; color: var(--grau); }

@media (prefers-reduced-motion: reduce) {
  .bezirk-linie { transition: none; }
}