/* ============================================================
   Lost & Found — eigenes Stylesheet, Präfix fs-

   Das Merkbild ist eine Linie: die Runde von Bahn 1 bis 18, dahinter
   der Gutshof. Was liegen geblieben ist, sitzt als heller Punkt an
   seinem Ort. Der Normalfall dieser Seite ist die LEERE Linie — sie
   ist deshalb so gebaut, dass sie auch ohne einen einzigen Punkt
   trägt: eine ruhige, sehr lange Haarlinie auf --pine.

   Grundstimmung: dunkel und weit. Der Wechsel ins Helle kommt genau
   einmal — dort, wo aus der Anzeige ein Werkzeug wird (Vermisst,
   dann das Formular auf Mint).

   Skalenspitze je Bildschirm: die Kennzahl im Kopf, die Überschrift
   der Ablage, der Gegenstandsname in der Vermisstenliste, die
   Abschlusszeile. Lauftext bleibt bei 16–17 px — Verhältnis über 6:1.

   Verzicht: kein Kapitelkopf (0 von erlaubten 3), keine Karte, keine
   Kachel mit Schatten, kein Icon. Die Seite hat genau eine Form:
   Linie, Punkt, Haarlinie.
   ============================================================ */

/* ---------- Typo-Bausteine, die seite.css nicht mitbringt ----------
   Die .t-*-Klassen liegen in site/tokens.css, das keine Seite einbindet
   (siehe hotels.css, kontakt.css). */
.t-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.t-mikro{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* `hidden` muss gewinnen — .btn und eigene Regeln bringen display mit
   (siehe docs/PROMPT_Register.md). */
[hidden]{display:none !important}
/* Was ohne JavaScript keinen Sinn ergibt, steht ohne JavaScript nicht da.
   Die Regel steht in assets/fotobruecke.css — dieselbe Klasse trägt die
   Foto-Brücke auch im Marktplatz, und zwei Blätter mit derselben Regel
   sind eine Regel zu viel. */

/* ================= 00 · HERO ================= */
/* Das Herbstbild ist hell und unruhig; die Schlagzeile steht sonst im
   Laub. Kein neuer Farbwert — dieselbe Tanne, nur mit Deckung. */
.fs-hero .hero-buehne::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,17,.58) 0%,rgba(7,48,31,.3) 44%,rgba(6,26,17,.55) 100%)}

.sh-zahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;
  padding-bottom:.3em}
.sh-zahl .t-zahl{font-size:clamp(52px,6.4vw,96px);line-height:.9;color:var(--lime)}
.sh-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);max-width:18ch;
  line-height:1.4}

/* ================= Gemeinsame Kapitelmarken ================= */
/* Kein .kapitel-kopf auf dieser Seite: Die Kapitel öffnen mit einer
   Haarlinie, zwei Mikro-Labels und der Überschrift daneben. */
.fs-marke{display:flex;align-items:baseline;gap:16px;padding-top:18px;
  border-top:1px solid var(--hairline-dunkel)}
.fs-marke-nr{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;color:var(--lime)}
.fs-marke-was{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fs-marke-hell{border-color:var(--hairline)}
.fs-marke-hell .fs-marke-nr{color:var(--gruen)}
.fs-marke-hell .fs-marke-was{color:var(--muted)}

.fs-h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,80px);letter-spacing:-.05em;line-height:1.06;color:#fff}
.fs-h2-hell{color:var(--tinte)}

/* ================= 01 · GEFUNDEN — die Achse ================= */
.fs-ablage{background:var(--pine);color:#fff;padding:clamp(46px,6vw,84px) 0 0}

.fs-ablage-kopf{padding:0 var(--inset)}
.fs-ablage-satz{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:14px 56px;align-items:end;padding-top:22px}
.fs-ablage-lead{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.72);
  max-width:44ch;padding-bottom:.4em;text-wrap:pretty}

/* --- Die Linie selbst --- */
.fs-achse{margin-top:clamp(34px,5vw,62px)}
.fs-achse-titel{padding:0 var(--inset);margin-bottom:16px;color:rgba(255,255,255,.45)}
/* Unter 1100 px wischt die Achse in ihrem eigenen Behälter — die Seite
   selbst scrollt nie waagrecht. */
.fs-achse-rollen{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent}
.fs-achse-spur{display:flex;align-items:flex-end;gap:clamp(20px,3vw,44px);
  padding:0 var(--inset);width:max-content;min-width:100%}
.fs-gruppe{display:flex;flex-direction:column;gap:12px}
.fs-gruppe-titel{color:rgba(255,255,255,.36)}
.fs-gruppe-runde{flex:1 1 auto}
/* Die Haarlinie liegt hinter den Strichen, nicht unter der ganzen Spur:
   So bricht sie zwischen Runde und Gutshof — zwei Orte, eine Geste. */
.fs-gruppe-spur{position:relative;display:flex;align-items:flex-end;flex:1 1 auto}
.fs-gruppe-spur::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:1px;
  background:rgba(255,255,255,.24)}

.fs-tick{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:7px;min-width:30px;min-height:62px;flex:1 1 auto;
  padding:0 3px;text-decoration:none}
.fs-gruppe-gutshof .fs-tick,.fs-gruppe-uebung .fs-tick,.fs-gruppe-offen .fs-tick{min-width:62px}
.fs-tick-strich{position:relative;width:1px;height:13px;background:rgba(255,255,255,.28);
  transition:height var(--t-mittel) var(--ease),background var(--t-schnell) ease-out}
.fs-tick-label{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.02em;color:rgba(255,255,255,.42);height:22px;line-height:22px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color var(--t-schnell) ease-out}

/* Der Punkt: das einzige helle Element auf der Linie. */
.fs-punkt{display:flex;align-items:center;justify-content:center;
  width:11px;height:11px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 4px rgba(204,255,0,.16);
  font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:700;color:var(--pine);
  transition:transform .5s var(--ease),box-shadow var(--t-schnell) ease-out}
.fs-punkt:not(:empty){width:19px;height:19px;font-size:10px}
/* Eingeklappt nur, wenn auch jemand da ist, der sie wieder ausklappt —
   ohne JavaScript stehen die Punkte von Anfang an. */
html.js .fs-tick-voll:not(.ist-da) .fs-punkt{transform:scale(0)}
/* Unscharf: Die Meldung nennt mehrere Orte, hier ist einer davon. Ein
   offener Ring statt einer vollen Scheibe — „kann hier gewesen sein". */
.fs-tick-voll.ist-unscharf .fs-punkt{background:transparent;color:var(--lime);
  box-shadow:inset 0 0 0 1.5px var(--lime)}
.fs-tick-voll.ist-unscharf:hover .fs-punkt,
.fs-tick-voll.ist-unscharf.ist-hell .fs-punkt{background:rgba(204,255,0,.28);
  box-shadow:inset 0 0 0 1.5px var(--lime),0 0 0 7px rgba(204,255,0,.18)}
.fs-tick-voll:hover .fs-punkt,.fs-tick-voll:focus-visible .fs-punkt,
.fs-tick-voll.ist-hell .fs-punkt{box-shadow:0 0 0 7px rgba(204,255,0,.22)}
.fs-tick-voll:hover .fs-tick-label,.fs-tick-voll.ist-hell .fs-tick-label{color:#fff}
.fs-tick-voll:hover .fs-tick-strich,.fs-tick-voll.ist-hell .fs-tick-strich{background:var(--lime);height:20px}
.fs-tick-voll:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}

.fs-achse-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  padding:14px var(--inset) 0;color:rgba(255,255,255,.5)}
.fs-achse-fuss .t-mikro{color:rgba(255,255,255,.5)}
/* Das stille Detail: Jede Liste sagt, von wann sie ist. */
.fs-stand{color:rgba(255,255,255,.32) !important}

/* --- Die Fundstücke: ungleiche Gewichte, Haarlinienraster --- */
/* Die Trennlinien entstehen aus 1 px Rinne über einer helleren Fläche —
   dadurch stimmen sie auch dort, wo ein Stück zwei Spalten nimmt. Ein
   Raster aus Rahmen täte das nicht. */
/* Der Innenabstand der Kacheln wird vom Rand des Rasters abgezogen —
   dadurch sitzt die erste Zeile jeder Kachel exakt auf dem Seitenrand,
   also auf derselben Kante wie Überschrift und Achse. */
.fs-stuecke{--fs-kachel:clamp(20px,2vw,30px);
  list-style:none;margin:clamp(38px,5vw,68px) 0 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--hairline-dunkel);
  /* Der Seitenrand als Rahmen, nicht als Innenabstand: Ein Innenabstand
     würde die helle Rasterfläche links und rechts durchscheinen lassen. */
  border:0 solid var(--pine);
  border-left-width:calc(var(--inset) - var(--fs-kachel));
  border-right-width:calc(var(--inset) - var(--fs-kachel));
  border-top:1px solid var(--hairline-dunkel)}
.fs-stueck{display:flex;flex-direction:column;gap:14px;background:var(--pine);
  min-height:clamp(170px,17vw,230px);padding:24px var(--fs-kachel) 28px;
  transition:background var(--t-schnell) ease-out;scroll-margin-top:150px}
/* Die Spaltenzahl kommt aus dem Template (--fs-breit), damit die letzte
   Zeile immer voll ist. */
.fs-stueck{grid-column:span var(--fs-breit,1)}
/* Hervorhebung ohne neuen Farbwert: Tanne ist die hellere der beiden
   Dunkelflächen des Systems. */
.fs-stueck.ist-hell,.fs-stueck:target{background:var(--tanne)}
/* Gedeckelt, damit ein Foto über zwei Spalten die ganze Zeile nicht in
   die Höhe zieht — die Kacheln ohne Bild stünden sonst in einem Feld
   aus Nichts. */
.fs-stueck-foto{overflow:hidden;aspect-ratio:4/3;max-height:clamp(170px,19vw,250px);
  background:rgba(255,255,255,.05)}
.fs-stueck-bild:nth-child(odd) .fs-stueck-foto{aspect-ratio:16/10}
.fs-stueck-foto img{width:100%;height:100%;object-fit:cover;display:block}
.fs-stueck-ort{color:var(--lime) !important}
.fs-stueck-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;line-height:1.15;color:#fff;
  text-wrap:balance}
.fs-stueck-beschr{font-size:15.5px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.72);
  max-width:44ch;text-wrap:pretty}
.fs-stueck-fuss{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 16px;
  font-size:13.5px;font-weight:300;color:rgba(255,255,255,.5)}
.fs-tage{font-variant-numeric:tabular-nums}
/* „Das gehört mir" — der Rückweg vom Fundstück zum Menschen. Er stand auf
   dieser Seite bisher nirgends: Sie zeigte, was gefunden wurde, und hörte
   dann auf. Der Knopf ist bewusst leise (die Kachel soll das Stück zeigen,
   nicht den Knopf), aber mit voller Fingergröße. */
.fs-stueck-meins{margin:16px 0 0}
.fs-stueck-meins .btn{padding:10px 18px;font-size:11px;letter-spacing:.08em}

/* Das Band über dem Formular, wenn man über einen solchen Knopf kommt:
   Ohne diese Zeile stünden die Felder ohne Erklärung vorbelegt da. */
.fs-bezug{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0;
  padding:14px 16px;border-left:3px solid var(--gruen);background:rgba(31,132,70,.09);
  border-radius:0 var(--r-flaeche) var(--r-flaeche) 0}
.fs-bezug-marke{width:100%;color:var(--sekundaer)}
.fs-bezug b{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--tinte)}
.fs-bezug-ort{font-size:14px;color:var(--sekundaer)}
.fs-bezug-weg{margin-left:auto;font-size:13px;color:var(--gruen);text-decoration:underline}

/* --- Der Leerzustand: der Normalfall, deshalb gestaltet --- */
.fs-leer{padding:clamp(40px,6vw,86px) var(--inset) clamp(48px,7vw,96px);max-width:56ch}
.fs-leer-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3vw,42px);letter-spacing:-.04em;line-height:1.08;color:#fff;
  margin-bottom:16px;text-wrap:balance}
.fs-leer-text{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.66);
  text-wrap:pretty}

/* ================= 02 · VERMISST ================= */
/* Hell, schmal, rein typografisch — der Gegensatz zur Ablage darüber. */
.fs-vermisst{background:#fff;padding:clamp(56px,7vw,110px) var(--inset)}
.fs-vermisst-kopf{max-width:58%}
.fs-vermisst-kopf .fs-h2{margin-top:22px}
.fs-vermisst-lead{margin-top:16px;font-size:17px;font-weight:300;line-height:1.6;
  color:var(--sekundaer);max-width:52ch;text-wrap:pretty}

.fs-liste{list-style:none;margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--hairline)}
.fs-zeile{position:relative;display:grid;
  grid-template-columns:46px minmax(0,1fr) minmax(0,auto);gap:8px 28px;
  padding:22px 0;border-bottom:1px solid var(--hairline);align-items:baseline}
/* Ränder reagieren: dieselbe Geste wie bei den Links — von links auflaufend. */
.fs-zeile::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--gruen);transition:width var(--t-mittel) var(--ease)}
.fs-zeile:hover::after,.fs-zeile:focus-within::after{width:100%}
.fs-zeile-nr{color:var(--muted)}
.fs-zeile-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.4vw,34px);letter-spacing:-.035em;line-height:1.05;color:var(--tinte);
  text-wrap:balance}
.fs-zeile-beschr{margin-top:8px;font-size:15.5px;font-weight:300;line-height:1.55;
  color:var(--sekundaer);max-width:56ch;text-wrap:pretty}
.fs-zeile-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  font-size:14.5px;font-weight:300;color:var(--sekundaer);text-align:right}
.fs-zeile-ort{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.fs-zeile-tage{color:var(--muted) !important}
.fs-vermisst-leer{margin-top:clamp(26px,3vw,40px);font-size:clamp(19px,2vw,26px);font-weight:300;
  line-height:1.4;color:var(--sekundaer);max-width:40ch;text-wrap:balance}

/* ================= 03 · DIE PAUSE ================= */
.fs-pause{position:relative;min-height:clamp(360px,64svh,620px);display:flex;align-items:flex-end;
  background:var(--pine)}
.fs-pause-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 52%}
.fs-pause::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,17,.04) 0%,rgba(6,26,17,.3) 54%,rgba(5,22,14,.8) 100%)}
/* Die eine Überlappung der Seite: Die Tafel mit dem Satz hängt aus dem
   Bild in die Mint-Fläche des Formulars hinein. */
.fs-pause-inhalt{position:relative;z-index:2;background:var(--pine);
  padding:clamp(26px,3.4vw,44px) clamp(26px,3.4vw,46px);
  margin:0 var(--inset) clamp(-64px,-5vw,-34px);max-width:46ch;
  display:flex;flex-direction:column;gap:12px}
.fs-pause-satz{font-size:clamp(19px,2.2vw,30px);font-weight:300;line-height:1.35;color:#fff;
  text-wrap:balance}
.fs-pause-klein{color:rgba(255,255,255,.55) !important}

/* ================= 04 · MELDEN ================= */
.fs-melden{background:var(--mint);
  padding:clamp(96px,10vw,150px) var(--inset) clamp(56px,7vw,104px)}
.fs-melden-kopf{max-width:62ch}
.fs-melden-lead{margin-top:14px;font-size:17px;font-weight:300;line-height:1.6;
  color:var(--sekundaer);max-width:56ch;text-wrap:pretty}
.fs-danke{margin-top:26px;padding:16px 20px;background:#fff;border-left:2px solid var(--gruen);
  font-size:16.5px;font-weight:300;line-height:1.5;color:var(--tinte);max-width:56ch}

.fs-melden-raster{margin-top:clamp(30px,4vw,52px);display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(30px,4vw,64px);align-items:start}

.fs-form{display:flex;flex-direction:column;gap:22px}
.fs-honig{position:absolute;left:-9999px;top:-9999px}
.fs-feld{display:flex;flex-direction:column;gap:7px}
.fs-feld > label,.fs-form legend{color:var(--nav)}
.fs-optional{font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:none}
.fs-form input[type=text],.fs-form textarea{width:100%;padding:13px 15px;font-size:16px;
  font-family:'Hanken Grotesk',sans-serif;font-weight:400;color:var(--tinte);
  background:#fff;border:1px solid #cbd6cd;border-radius:8px;
  transition:border-color var(--t-schnell) ease-out,box-shadow var(--t-schnell) ease-out}
.fs-form textarea{resize:vertical;min-height:88px;line-height:1.5}
.fs-form input[type=text]::placeholder,.fs-form textarea::placeholder{color:#9aa79f}
.fs-form input[type=text]:hover,.fs-form textarea:hover{border-color:#a9b8ac}
.fs-form input[type=text]:focus-visible,.fs-form textarea:focus-visible,
.fs-form input[type=file]:focus-visible{outline:none;border-color:var(--gruen);
  box-shadow:0 0 0 2px rgba(31,132,70,.28)}
.ist-fehler input[type=text],.ist-fehler textarea{border-color:#b5453a}
.fs-fehler{font-size:14px;font-weight:400;color:#8c2f28}
.fs-fehler-oben{padding:12px 15px;background:#fbe4e2;border-left:2px solid #b5453a}
.fs-zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Typwahl: zwei Schalter, keine Radiobuttons in Grau */
.fs-typwahl{border:0;display:flex;flex-wrap:wrap;gap:10px}
.fs-typwahl legend{width:100%;margin-bottom:9px}
.fs-schalter{position:relative;cursor:pointer}
.fs-schalter input{position:absolute;opacity:0;width:1px;height:1px}
.fs-schalter span{display:inline-flex;align-items:center;padding:12px 22px;background:#fff;
  border:1px solid #cbd6cd;border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--nav);
  transition:background var(--t-schnell) ease-out,color var(--t-schnell) ease-out,
             border-color var(--t-schnell) ease-out}
.fs-schalter:hover span{border-color:var(--gruen);color:var(--gruen)}
.fs-schalter input:checked + span{background:var(--tanne);border-color:var(--tanne);color:#fff}
.fs-schalter input:focus-visible + span{outline:2px solid var(--gruen);outline-offset:2px}

/* Die Ortswahl: dieselbe Achse wie oben, nur klein und als Eingabe.
   Das Echo der Seite. */
/* Ein <fieldset> schrumpft von sich aus nicht unter seinen Inhalt
   (min-inline-size:auto) — ohne diese Zeile wird die Achse breiter als
   die Spalte und alle anderen Felder stehen schmaler daneben. */
.fs-ortwahl{border:0;min-inline-size:0}
.fs-ortwahl legend{margin-bottom:12px}
.fs-achse-wahl{margin:0 0 14px;background:#fff;border:1px solid #cbd6cd;border-radius:8px;
  padding:16px 0 10px;max-width:100%}
/* Enger gesetzt als die große Achse: Die Ortswahl soll in die Spalte
   passen, ohne dass man sie erst wischen muss. */
.fs-achse-wahl .fs-achse-spur{padding:0 16px;gap:16px}
.fs-achse-wahl .fs-tick{min-width:22px}
.fs-achse-wahl .fs-gruppe-gutshof .fs-tick,
.fs-achse-wahl .fs-gruppe-uebung .fs-tick,
.fs-achse-wahl .fs-gruppe-offen .fs-tick{min-width:54px}
.fs-achse-wahl .fs-gruppe-titel{color:var(--muted)}
.fs-achse-wahl .fs-gruppe-spur::after{background:var(--hairline);bottom:22px}
.fs-achse-wahl .fs-tick{min-height:48px;cursor:pointer}
.fs-achse-wahl .fs-tick-strich{background:rgba(20,35,27,.22)}
.fs-achse-wahl .fs-tick-label{color:var(--muted)}
.fs-tick-wahl input{position:absolute;opacity:0;width:1px;height:1px}
.fs-tick-wahl:hover .fs-tick-strich{background:var(--gruen);height:18px}
.fs-tick-wahl:hover .fs-tick-label{color:var(--tinte)}
.fs-tick-wahl input:checked ~ .fs-tick-strich{background:var(--gruen);height:24px}
.fs-tick-wahl input:checked ~ .fs-tick-strich::before{content:"";position:absolute;
  top:-13px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--gruen)}
.fs-tick-wahl input:checked ~ .fs-tick-label{color:var(--tinte)}
.fs-tick-wahl input:focus-visible ~ .fs-tick-strich{outline:2px solid var(--gruen);
  outline-offset:3px}
.fs-ort-zusatz-label{display:block;margin-bottom:7px;color:var(--nav)}

/* ---- Mehrere Orte (25.08.2026) ----
   Über die Achse darf gestrichen werden. Ohne user-select:none markiert
   der Zug die Beschriftungen wie Fließtext, und statt einer Spanne steht
   „5 6 7" blau hinterlegt da. touch-action:pan-y lässt die Seite weiter
   scrollen, fängt aber die Wischbewegung längs der Linie ab. */
.fs-achse-wahl{user-select:none;-webkit-user-select:none}
.fs-ort-hinweis{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--sekundaer)}
/* Kein Hinweis auf etwas, das das Gerät nicht kann. */
@media (hover:none){.fs-nur-zeiger{display:none}}
.fs-fuss-offen{margin-right:auto;color:rgba(255,255,255,.38) !important}
/* Das Echo: derselbe Satz, den später die Mail und das Brett schreiben.
   Feste Mindesthöhe, damit das Formular beim Ankreuzen nicht springt. */
.fs-ort-echo{margin:0 0 14px;min-height:1.5em;font-family:'Space Grotesk',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--gruen)}
.fs-ort-echo.ist-leer{font-weight:400;letter-spacing:0;font-family:'Hanken Grotesk',sans-serif;
  font-size:13.5px;color:var(--muted)}
/* Der Zwischenstand beim Ziehen: sichtbar wie gewählt, aber noch nicht
   angekreuzt — sonst wüsste niemand, was der Finger gerade einsammelt. */
.fs-tick-wahl.ist-zug .fs-tick-strich{background:var(--gruen);height:24px}
.fs-tick-wahl.ist-zug .fs-tick-strich::before{content:"";position:absolute;
  top:-13px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--gruen);opacity:.45}
.fs-tick-wahl.ist-zug .fs-tick-label{color:var(--tinte)}
.fs-ort-stand{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:14px}
.fs-ort-stand .fs-ort-echo{margin:0}
.fs-ort-fuellen{padding:5px 13px;background:#fff;border:1px solid #cbd6cd;border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gruen);cursor:pointer;transition:border-color .2s}
.fs-ort-fuellen:hover{border-color:var(--gruen)}
.fs-ort-fuellen[hidden]{display:none}

/* Die Foto-Brücke selbst steht in assets/fotobruecke.css (Präfix fb-) —
   sie gehört seit 23.08.2026 auch dem Marktplatz. Hier bleibt nur, was
   dieser Seite eigen ist: der Kasten drumherum und das Dateifeld. */
.fs-foto{display:flex;flex-direction:column;gap:14px}
.fs-datei input[type=file]{font-size:14.5px;font-family:'Hanken Grotesk',sans-serif;
  color:var(--sekundaer)}
.fs-datei input[type=file]::file-selector-button{margin-right:12px;padding:9px 18px;
  background:#fff;border:1px solid #cbd6cd;border-radius:999px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gruen);
  transition:border-color var(--t-schnell) ease-out,background var(--t-schnell) ease-out}
.fs-datei input[type=file]::file-selector-button:hover{border-color:var(--gruen);background:var(--mint)}

.fs-ds{font-size:14px;font-weight:300;line-height:1.5;color:var(--muted);max-width:60ch}
.fs-absenden{margin-top:2px}

.fs-marginalie{padding-top:8px;border-top:1px solid rgba(20,35,27,.18);
  display:flex;flex-direction:column;gap:12px}
.fs-marginalie-titel{padding-top:10px}
.fs-marginalie p{font-size:15px;font-weight:300;line-height:1.6;color:var(--sekundaer)}

/* ================= 05 · ABSCHLUSS ================= */
.fs-cta{background:var(--pine);color:#fff;
  padding:clamp(60px,8vw,120px) var(--inset)}
.fs-cta-inhalt{display:flex;flex-direction:column;gap:18px;max-width:64ch}
.fs-cta-titel{display:flex;flex-direction:column;font-family:'Space Grotesk',sans-serif;
  font-weight:700;text-transform:uppercase;font-size:clamp(34px,5.4vw,86px);
  letter-spacing:-.05em;line-height:1.06}
/* Das Echo: dieselbe Konturschrift wie in der Hero-Schlagzeile, halb so
   groß — genau einmal auf der Seite. */
.fs-cta-outline{color:transparent;-webkit-text-stroke:2px var(--lime)}
.fs-cta-text{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.74);
  max-width:52ch;text-wrap:pretty}
.fs-cta .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;opacity:1;animation:none}
.fs-cta-hinweis{font-size:14px;font-weight:300;color:rgba(255,255,255,.5)}

/* ================= Schmale Fenster ================= */
@media (max-width:1100px){
  /* Zwei Spalten, alle Kacheln gleich breit — die serverseitige
     Verteilung gilt nur für vier Spalten. Bleibt die letzte Kachel
     allein, füllt sie die Zeile. */
  .fs-stuecke{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-stueck{grid-column:span 1}
  .fs-stueck:last-child:nth-child(odd){grid-column:span 2}
}
@media (max-width:900px){
  .fs-ablage-kopf,.fs-ablage-satz{grid-template-columns:minmax(0,1fr)}
  .fs-vermisst-kopf{max-width:100%}
  .fs-melden-raster{grid-template-columns:minmax(0,1fr)}
  .fs-marginalie{order:-1}
}
@media (max-width:700px){
  .fs-zeile{grid-template-columns:34px minmax(0,1fr);gap:6px 16px}
  .fs-zeile-meta{grid-column:2;align-items:flex-start;text-align:left;
    flex-direction:row;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
  .fs-zweispalt{grid-template-columns:1fr}
}
@media (max-width:560px){
  .fs-stuecke{grid-template-columns:minmax(0,1fr)}
  .fs-stueck,.fs-stueck:last-child:nth-child(odd){grid-column:span 1}
  /* Die Achse bleibt eine Achse — sie wird gewischt, nicht gestaucht. */
  .fs-achse-spur{gap:18px}
  .fs-pause-inhalt{margin-bottom:-28px;padding:22px}
}

/* ================= Bewegung aus ================= */
@media (prefers-reduced-motion:reduce){
  .fs-punkt{transform:none !important;transition:none !important}
  .fs-tick-strich,.fs-tick-label,.fs-zeile::after{transition:none !important}
}