/* Styling der serverseitig gerenderten SEO-Seiten (Phase 9b):
   /ziel/:slug, /kategorie/:slug, /ort/:slug.
   Bewusst eigenstaendig und schlank gehalten - diese Seiten laden weder
   Leaflet noch die App-Module, sondern nur reset.css, variables.css und
   diese Datei. */

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

a {
  color: var(--color-primary-dark);
}

/* --- Kopf-/Fusszeile --- */
/*
 * Aufbau nach dem Vorbild einer Dienstleistungsseite (2026-08-01): farbig
 * abgesetzte Kopfzeile, darunter ein Hero, dann Abschnitte mit wechselndem
 * Untergrund, zum Schluss eine dunkle Fusszeile. Die Farben bleiben die
 * bisherigen - neu ist nur die Gliederung.
 */

.seo-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  /* Verlauf statt einer Flaeche: Er traegt die Kopfzeile in den Hero hinein,
     sodass beide als ein Block wirken. */
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
  color: #fff;
}

.seo-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
}

/* logo-white.png ist eine weisse Silhouette und steht damit ohne Zutat auf
   dem dunklen Verlauf. Frueher lag hier eine weisse Kachel darunter - die
   stammte aus der Zeit des dunklen Logos und machte das weisse unsichtbar. */
.seo-header__logo {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.seo-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.92rem;
}

.seo-nav a {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  text-decoration: none;
}

/* Fett statt unterstrichen (2026-08-11). Der Strich lag als zweite Linie
   unter einer ohnehin vollen Zeile; das Gewicht sagt dasselbe ruhiger. */
.seo-nav a:hover,
.seo-nav a:focus {
  color: #fff;
  font-weight: 800;
}

/* Ein aufgeklappter Punkt bleibt hervorgehoben, solange sein Feld offen ist -
   sonst verliert man beim Wandern in die Liste den Bezug nach oben. */
.seo-nav__item:hover .seo-nav__trigger,
.seo-nav__item:focus-within .seo-nav__trigger {
  font-weight: 800;
}

/* Der eine hervorgehobene Weg der Kopfzeile. Mehr als einer waere keiner. */
.seo-nav__cta {
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  font-weight: 600;
  white-space: nowrap;
}

.seo-nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* --- Aufklappende Punkte der Kopfzeile (2026-08-11) ---------------------
 *
 * Dieselbe Form wie in der Kartenansicht (css/layout.css), aber ohne Skript:
 * Der Punkt selbst ist ein Link auf seine Uebersichtsseite, das Feld darunter
 * zeigt beim Darauffahren die einzelnen Wege. :focus-within nimmt die
 * Tastatur mit - wer sich mit dem Tabulator auf den Link stellt, sieht das
 * Feld ebenfalls.
 */

.seo-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.seo-nav__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.seo-nav__caret {
  font-size: 0.7em;
  transition: transform 0.15s ease;
}

.seo-nav__item:hover .seo-nav__caret,
.seo-nav__item:focus-within .seo-nav__caret {
  transform: rotate(180deg);
}

.seo-nav__dropdown {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-md));
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

/* Unsichtbarer Streifen zwischen Punkt und Feld: Ohne ihn liegt dazwischen
   echte Kopfzeile, und die Maus verliert das Feld auf dem Weg dorthin. */
.seo-nav__dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--space-xs) - 2px);
  height: calc(var(--space-xs) + 2px);
}

.seo-nav__item:hover .seo-nav__dropdown,
.seo-nav__item:focus-within .seo-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Im Feld steht dunkle Schrift auf hellem Grund - die Regel fuer die weissen
   Links der Kopfzeile gilt hier nicht. */
.seo-nav__dropdown a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 500;
  transition: transform 0.15s ease, color 0.15s ease;
}

.seo-nav__dropdown a:last-child {
  border-bottom: none;
}

.seo-nav__dropdown a:hover,
.seo-nav__dropdown a:focus {
  transform: translateX(8px);
  color: var(--color-primary-dark);
  /* Ausdruecklich: ".seo-nav a:hover" macht die Wege der Kopfzeile fett -
     hier drin ist das Ruecken nach rechts die Kennzeichnung, und beides
     zusammen waere zu viel. */
  font-weight: 500;
  text-decoration: none;
}

/* Anmelden und Registrieren. Rund und gefuellt wie in der Kartenansicht:
   Das eine ist Navigation, das andere eine Handlung. */
.seo-nav__auth {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.seo-nav__pill {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 100px;
  font-weight: 600;
  white-space: nowrap;
}

.seo-nav__pill:hover,
.seo-nav__pill:focus {
  background: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

/* Der Selektor nennt bewusst BEIDE Klassen samt Element: ".seo-nav a" weiter
   oben ist spezifischer als eine einzelne Klasse und hat die Schrift sonst
   weiss gefaerbt - auf weissem Grund also unsichtbar. Genau das war hier
   passiert. */
.seo-nav a.seo-nav__pill--primary {
  border-color: #fff;
  background: #fff;
  color: var(--color-primary-dark);
}

.seo-nav a.seo-nav__pill--primary:hover,
.seo-nav a.seo-nav__pill--primary:focus {
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-primary-dark);
}

@media (prefers-reduced-motion: reduce) {
  .seo-nav__dropdown,
  .seo-nav__caret,
  .seo-nav__dropdown a {
    transition: none;
  }

  .seo-nav__dropdown a:hover,
  .seo-nav__dropdown a:focus {
    transform: none;
  }
}

/* --- Klappmenue der Kopfzeile -------------------------------------------
 *
 * Auf breiten Anzeigen ueberfluessig: Dort stehen die Wege offen daneben.
 * Erst auf schmalen wird es gebraucht, und dort ist es die einzige
 * Navigation - deshalb ohne JavaScript (<details>), damit es auch dann
 * aufgeht, wenn sonst nichts laedt.
 */
.seo-nav__menu {
  display: none;
}

.seo-nav__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  /* Das Dreieck, das Browser einem <summary> voranstellen, waere hier ein
     zweites Sinnbild neben dem Hamburger. */
  list-style: none;
}

/* Im offenen Zustand liegt der Knopf ueber dem Overlay und zeigt das X. Ohne
   diese Stelle waere er darunter verschwunden - und das Menue liesse sich
   ohne JavaScript nicht mehr schliessen. */
.seo-nav__menu[open] .seo-nav__menu-btn {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 210;
  /* Der Knopf steht jetzt auf hellem Grund - der helle Rahmen der Kopfzeile
     waere dort unsichtbar. */
  border-color: var(--color-border);
  background: var(--color-surface);
}

.seo-nav__menu-icon--close,
.seo-nav__menu[open] .seo-nav__menu-icon--open {
  display: none;
}

.seo-nav__menu[open] .seo-nav__menu-icon--close {
  display: block;
  color: var(--color-text);
}

.seo-nav__menu-btn::-webkit-details-marker {
  display: none;
}

/* Vollflaechig statt als kleines Feld unter dem Knopf (2026-08-11): Auf den
   schmalen Anzeigen, fuer die dieses Menue ueberhaupt existiert, ist es die
   einzige Navigation. Als Overlay bekommt jeder Weg eine ganze Zeile, statt
   dass acht Links in einem Kaestchen von 220px stehen. */
.seo-nav__menu-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Heller Grund, damit die weissen Kaestchen der Gruppen darauf stehen. */
  background: var(--color-background);
  overflow-y: auto;
  animation: seo-menu-in 0.18s ease-out;
}

@keyframes seo-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-nav__menu-panel {
    animation: none;
  }
}

.seo-nav__menu-inner {
  max-width: 720px;
  margin: 0 auto;
  /* Oben Platz fuer das X, das darueber schwebt. */
  padding: 72px var(--space-lg) var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}

/* Jede Gruppe ein eigenes Kaestchen - dieselbe Form wie "Worum geht es?" auf
   /vorschlagen und wie im Menue der Kartenansicht (css/layout.css). */
.seo-nav__menu-group {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.seo-nav__menu-title {
  margin-bottom: var(--space-xs);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.seo-nav__menu-panel a:last-child {
  border-bottom: none;
}

/* Impressum und Datenschutz stehen ohne Ueberschrift am Fuss - sie sind
   Pflichtwege, keine Angebote, und brauchen deshalb auch kein Kaestchen. */
.seo-nav__menu-group--legal {
  padding: 0 var(--space-md);
  border: none;
  background: none;
}

.seo-nav__menu-group--legal a {
  min-height: 40px;
  border-bottom: none;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* Im Klappmenue steht dunkle Schrift auf hellem Grund - die Regel fuer die
   Kopfzeile daneben (weiss auf dem Verlauf) gilt hier nicht. */
.seo-nav__menu-panel a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 500;
  transition: transform 0.15s ease, color 0.15s ease;
}

/* Dieselbe Sprache wie im Menue der Kartenansicht (css/layout.css): Die Zeile
   rueckt beim Darauffahren sanft nach rechts, mehr nicht. */
.seo-nav__menu-panel a:hover,
.seo-nav__menu-panel a:focus {
  transform: translateX(8px);
  color: var(--color-primary-dark);
  /* Wie im Klappfeld: nicht zusaetzlich fett werden (".seo-nav a:hover"). */
  font-weight: 500;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .seo-nav__menu-panel a {
    transition: none;
  }

  .seo-nav__menu-panel a:hover,
  .seo-nav__menu-panel a:focus {
    transform: none;
  }
}

/* Der Umschlagpunkt. Er liegt seit 2026-08-11 hoeher: In der Zeile stehen
   jetzt drei Links, zwei aufklappende Punkte, "Zur Karte" und die beiden
   Konto-Knoepfe. Darunter tragen sie sich gegenseitig aus der Zeile - genau
   das war zu sehen, bevor es das Menue gab. */
@media (max-width: 1100px) {
  .seo-nav__links,
  .seo-nav__auth {
    display: none;
  }

  .seo-nav__menu {
    display: block;
  }
}

/* --- Hero --- */

.seo-hero {
  padding: 72px var(--space-lg) 80px;
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
  color: #fff;
  text-align: center;
}

/* Kopfbereich mit Foto (Zielseiten).
 *
 * Drei Ebenen in einem eigenen Stapel (isolation): unten der Verlauf des
 * Kopfbereichs als Rueckfall, wenn das Bild nicht laedt, darueber das Foto,
 * darueber ein Schleier - und erst darauf der Text. Die negativen z-index
 * ersparen dabei einen zusaetzlichen Behaelter um den Inhalt.
 *
 * Mehr Luft nach oben und unten als beim farbigen Kopfbereich: Der Text steht
 * ohnehin in der Mitte, der Zuwachs ist genau die Flaeche, auf der das Foto
 * unverdeckt zu sehen ist.
 */
.seo-hero--image {
  position: relative;
  isolation: isolate;
  /* Der Text sitzt unten, das Foto darueber bleibt frei. Die Hoehe kommt
     deshalb nicht mehr aus Innenabstand plus Inhalt, sondern aus min-height -
     sonst waere der Kopfbereich um die Knoepfe geschrumpft, die jetzt
     darunter stehen. Der Wert entspricht der bisherigen Hoehe. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 560px;
  padding: var(--space-xl) var(--space-lg) 56px;
  /* Faengt die weissen Stellen im Bild ab, an denen der Schleier allein zu
     wenig waere. Auf den Knoepfen wieder aufgehoben - dort steht dunkle
     Schrift auf hellem Grund. */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.seo-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /* cover statt contain: Der Kopfbereich ist eine Flaeche, kein Bilderrahmen -
     ein Foto mit Balken links und rechts saehe aus wie ein Fehler. */
  object-fit: cover;
}

/* Der Schleier - der entscheidende Unterschied zur frueheren Fassung.
 *
 * Vorher lag ein gleichmaessiger Vorhang von 55 bis 72 % ueber dem ganzen
 * Foto, weil der Text quer darueber verteilt stand. Das Bild war dadurch
 * durchweg zu dunkel, um etwas darauf zu erkennen. Jetzt steht der Text
 * unten, und der Schleier folgt ihm: Das obere Drittel bleibt fast klar,
 * erst darunter wird es dunkel.
 *
 * Die Werte am unteren Ende sind nicht frei gewaehlt: Bei 78 % bleibt selbst
 * eine weisse Bildstelle dunkel genug, dass weisse Schrift darauf das
 * Kontrastverhaeltnis 4,5:1 der WCAG erreicht. Wer die Zahlen senkt, macht
 * die Seite auf hellen Fotos unlesbar.
 */
.seo-hero--image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 26, 8, 0.12) 0%,
    rgba(8, 26, 8, 0.18) 35%,
    rgba(8, 26, 8, 0.55) 62%,
    rgba(8, 26, 8, 0.78) 100%
  );
}

/* Auf einem Foto traegt die Abstufung nicht mehr - die Angaben stehen sonst
   je nach Bildstelle im Nichts. */
.seo-hero--image .seo-hero__lead {
  opacity: 1;
}

.seo-hero--image .seo-hero__meta {
  opacity: 0.95;
}

/* Dunkel statt hell hinterlegt: Auf einem hellen Foto verschwaende die
   weisse Fuellung, die auf dem Verlauf richtig ist. */
.seo-hero--image .seo-hero__badge {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.35);
}

.seo-hero--image .place__button {
  text-shadow: none;
}

/* Der Bildnachweis: sichtbar, aber als Letztes zu lesen. */
.seo-hero__credit {
  margin-top: var(--space-lg);
  font-size: 0.78rem;
  opacity: 0.85;
}

.seo-hero__credit a {
  color: inherit;
  text-decoration: underline;
}

/* Kategorie und Bewertung in einer Zeile (Zielseite). Der Abstand nach unten
   wandert dabei vom einzelnen Abzeichen auf die Reihe - sonst stuenden zwei
   Abzeichen mit doppeltem Abstand untereinander, sobald sie umbrechen. */
.seo-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.seo-hero__badges .seo-hero__badge {
  margin-bottom: 0;
}

/* Die Bewertung traegt eine Zahl, keine Beschriftung - deshalb ohne
   Grossbuchstaben und Sperrung, die am Kategorie-Abzeichen richtig sind.
   Bewusst schmal: Stern und Wert, mehr nicht. Die Zahl der Bewertungen steht
   im Abschnitt unten, zu dem dieses Abzeichen fuehrt. */
.seo-hero__badge--rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
}

.seo-hero__badge--rating:hover,
.seo-hero__badge--rating:focus-visible {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.28);
}

.seo-hero__badge {
  display: inline-block;
  margin-bottom: var(--space-lg);
  padding: 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.seo-hero h1 {
  max-width: 760px;
  margin: 0 auto var(--space-md);
  /* clamp statt Medienabfragen: Die Ueberschrift waechst stufenlos mit der
     Breite, statt an zwei Punkten zu springen. */
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
}

.seo-hero__lead {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
  opacity: 0.92;
}

/* Nur dort, wo unter der Einleitung noch Knoepfe im Kopfbereich stehen. Auf
   der Zielseite folgt die Ortsangabe, die naeher heranrueckt. */
.seo-hero__lead + .seo-hero__btns {
  margin-top: var(--space-xl);
}

/* Knopfreihe im Kopfbereich - so steht sie weiterhin auf der Startseite, der
   Anleitung, den Listen und der 404-Seite. Nur die Zielseite hat sie darunter
   gestellt (.seo-hero__actions). */
.seo-hero__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* Die Handlungen der Seite, unmittelbar unter dem Kopfbereich. Eigener
   heller Streifen: Auf dem Foto standen die Knoepfe frueher mitten im Bild
   und nahmen ihm die Flaeche, die sie selbst nicht brauchen. */
.seo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Der Textblock am unteren Rand des Kopfbereichs. */
.seo-hero__text {
  width: 100%;
}

/* Merken, Einplanen, Teilen (js/seo/placeActions.js). Leiser als die
   Hauptknoepfe darueber: Das sind Handlungen am eigenen Konto, nicht der
   Grund, warum jemand die Seite geoeffnet hat. */
.place-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.place-actions__btn {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

.place-actions__btn:hover,
.place-actions__btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* Der Weg in die Moderation. Abgesetzt von den drei Knoepfen daneben: Das
   ist ein Werkzeug der Redaktion und keine Handlung fuer Besucher - die
   sehen ihn ohnehin nie. */
.place-actions__btn--mod {
  border-style: dashed;
  color: var(--color-text-muted);
  text-decoration: none;
}

/* Gemerkt und eingeplant heben sich ab - sonst waere am Knopf nicht zu
   sehen, dass er bereits etwas bewirkt hat. */
.place-actions__btn.favorite-btn--active,
.place-actions__btn.trip-btn--active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

/* Ortsangabe unter der Einleitung - je Angabe ein Haken. */
.seo-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  font-size: 0.88rem;
  opacity: 0.8;
}

.seo-hero__meta span::before {
  content: '\2713\00a0\00a0';
  font-weight: 700;
}

/* --- Abschnitte --- */

.seo-section {
  padding: 72px var(--space-lg);
}

/* Wechselnder Untergrund: Er trennt die Abschnitte ohne Linien und macht
   auf einer langen Seite ueberhaupt erst erkennbar, wo einer endet. */
.seo-section:nth-of-type(even) {
  background: var(--color-surface-alt);
}

.seo-container {
  max-width: 1080px;
  margin: 0 auto;
}

/* Schmaler fuer Fliesstext: Ueber 70 Zeichen je Zeile wird Lesen anstrengend. */
.seo-container--narrow {
  max-width: 760px;
}

/* Schlussaufruf eines Abschnitts: ein einzelner Knopf, mittig. */
.seo-cta {
  text-align: center;
}

.seo-label {
  display: block;
  margin-bottom: var(--space-sm);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.seo-section__title {
  margin-bottom: var(--space-sm);
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800;
  color: var(--color-primary-dark);
}

.seo-section__lead {
  max-width: 680px;
  margin: 0 auto var(--space-xl);
  text-align: center;
  color: var(--color-text-muted);
}

/* --- Kacheln --- */

.seo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.seo-card {
  padding: var(--space-xl);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.seo-card__icon {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: 2rem;
  line-height: 1;
}

.seo-card__title {
  margin-bottom: var(--space-xs);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.seo-card__text {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* --- Nummerierter Ablauf --- */

.seo-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-lg);
  /* Die Nummern zaehlt CSS, nicht die Vorlage: So bleibt die Reihenfolge auch
     dann richtig, wenn ein Schritt dazukommt oder wegfaellt. */
  counter-reset: schritt;
  list-style: none;
  padding: 0;
}

.seo-step {
  counter-increment: schritt;
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  text-align: center;
}

.seo-step::before {
  content: counter(schritt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-md);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
}

.seo-step__title {
  margin-bottom: var(--space-xs);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.seo-step__text {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* --- Aufklappbare Fragen --- */

.seo-faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* <details> statt einer Nachbildung mit JavaScript: Der Browser kann das
   selbst, samt Tastaturbedienung und Vorlesen. */
.seo-faq details {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.seo-faq summary {
  padding: var(--space-md) var(--space-lg);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-primary-dark);
}

.seo-faq details[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.seo-faq__body {
  padding: var(--space-md) var(--space-lg);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* --- Fusszeile --- */

.seo-footer {
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-primary-deep);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.85rem;
  text-align: center;
}

.seo-footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
}

.seo-footer__legal {
  margin-top: var(--space-sm);
}

.seo-footer__credit {
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  opacity: 0.75;
}

/* --- Brotkruemelnavigation --- */

.seo-breadcrumbs {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg) 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.seo-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.seo-breadcrumbs li:not(:last-child)::after {
  content: '\203a';
  margin-left: var(--space-xs);
}

/* --- Grundlayout --- */

.seo-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Inhaltsseiten (Ziel, Impressum, Datenschutz) bleiben schmal - dort steht
   Fliesstext, kein Raster. */
.seo-main--narrow {
  max-width: 800px;
}

@media (max-width: 720px) {
  .seo-hero {
    padding: 48px var(--space-md) 56px;
  }

  /* Muss hinter .seo-hero stehen: gleiche Spezifitaet, es gewinnt die
     spaetere Regel. Auf dem Telefon nimmt der Kopfbereich sonst den halben
     ersten Bildschirm ein, ohne dass mehr vom Foto zu sehen waere. */
  .seo-hero--image {
    min-height: 400px;
    padding: var(--space-lg) var(--space-md) 40px;
  }

  .seo-section {
    padding: 48px var(--space-md);
  }
}

/* --- Detailseite --- */

.place__category {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--category-color, var(--color-text-muted));
  margin-bottom: var(--space-xs);
}

.place__category a {
  color: inherit;
}

.place__title {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}

.place__lead {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

.place__description {
  margin: var(--space-lg) 0;
}

.place__description p + p {
  margin-top: var(--space-md);
}

.place__section {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.place__section h2 {
  font-size: 1.15rem;
  margin-bottom: var(--space-md);
}

.place__facts {
  display: grid;
  gap: var(--space-sm);
}

.place__fact {
  display: grid;
  grid-template-columns: minmax(9rem, 30%) 1fr;
  gap: var(--space-md);
}

.place__fact dt {
  color: var(--color-text-muted);
}

.place__facilities,
.place__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
}

.place__facilities li,
.place__tags li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.9rem;
}

.place__address {
  font-style: normal;
  margin-bottom: var(--space-md);
}

.place__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.place__button {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.place__button:hover,
.place__button:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Auf dem farbigen Hero kehrt sich das Verhaeltnis um: weisser Grund,
   gruene Schrift. Sonst verschwaende der Knopf im Verlauf. */
.seo-hero .place__button {
  background: #fff;
  color: var(--color-primary-dark);
}

.seo-hero .place__button--secondary {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}

.place__button--secondary {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}

.place__related {
  margin-top: var(--space-xl);
  color: var(--color-text-muted);
}

/* --- Landingpages (Kategorie/Ort) --- */

.listing__header {
  margin-bottom: var(--space-lg);
}

.listing__header h1 {
  font-size: 1.85rem;
  line-height: 1.25;
}

.listing__count {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.listing__intro {
  margin-top: var(--space-sm);
}

.listing__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.card {
  height: 100%;
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  /* Hebt sich beim Ueberfahren leicht an - dieselbe Bewegung wie bei den
     Knoepfen, damit die Seite eine Sprache spricht. */
  transition: transform 0.15s, box-shadow 0.15s;
}

.card:hover,
.card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}

.card__category {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--category-color, var(--color-text-muted));
}

.card__title {
  font-size: 1.1rem;
  margin: var(--space-xs) 0;
}

.card__title a {
  text-decoration: none;
}

.card__title a:hover,
.card__title a:focus {
  text-decoration: underline;
}

.card__text {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.card__meta {
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.listing__siblings {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.listing__siblings h2 {
  font-size: 1.05rem;
  margin-bottom: var(--space-sm);
}

.listing__siblings ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  padding: 0;
  font-size: 0.95rem;
}

.listing__siblings span {
  color: var(--color-text-muted);
}

@media (min-width: 700px) {
  .listing__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Impressum und Datenschutz in der Fusszeile aller oeffentlichen Seiten. */
.seo-footer__legal {
  margin-top: var(--space-xs);
}

/* --- Rechtstexte (Impressum, Datenschutz) --------------------------------
   Lange Fliesstexte: hier zaehlt Lesbarkeit, nicht Gestaltung. Etwas mehr
   Zeilenabstand als im uebrigen Projekt, klare Abstaende vor den
   Zwischenueberschriften, damit die Abschnitte auffindbar bleiben. */

.legal {
  line-height: 1.6;
}

.legal h1 {
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
}

.legal h2 {
  font-size: 1.1rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.legal p,
.legal ul {
  margin-bottom: var(--space-md);
}

.legal ul {
  padding-left: 1.25em;
  display: grid;
  gap: var(--space-xs);
}

.legal__lead {
  font-size: 1.05rem;
  padding: var(--space-md);
  border-left: 3px solid var(--color-primary);
  background: var(--color-background);
}

.legal__address {
  font-style: normal;
  margin-bottom: var(--space-md);
}

/* Unuebersehbar: eine unvollstaendige Pflichtseite darf nicht wie eine
   fertige aussehen. */
.legal__warning {
  padding: var(--space-md);
  border: 2px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-danger);
}

.legal__updated {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- Anleitung "Karte einbetten" (Phase 13i) ------------------------------ */

.embed-guide__lead {
  font-size: 1.05rem;
  margin-bottom: var(--space-lg);
}

.embed-guide__list,
.embed-guide__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
}

.embed-guide__list {
  list-style: disc;
}

.embed-guide__steps {
  list-style: decimal;
}

/* Karte und Eingabefelder nebeneinander, auf dem Smartphone untereinander -
   die Karte zuerst, weil dort der Standort gewählt wird. */
.embed-guide__picker {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

@media (min-width: 720px) {
  .embed-guide__picker {
    grid-template-columns: 2fr 1fr;
  }
}

.embed-guide__map {
  height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.embed-guide__map p {
  padding: var(--space-md);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.embed-guide__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.embed-guide__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.embed-guide__field label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.embed-guide__field input,
.embed-guide__field select,
.embed-guide__field textarea {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
}

.embed-guide__field textarea {
  /* Der Schnipsel ist Quelltext - dafür eine feste Laufweite, sonst rutschen
     die Zeilen auseinander und wirken fehlerhaft. */
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  resize: vertical;
}

.embed-guide__categories {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.embed-guide__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-xs);
}

.embed-guide__checkboxes label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9rem;
}

.embed-guide__count {
  margin: var(--space-sm) 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Ein zu kleiner Umkreis ist der häufigste Fehlgriff - er soll auffallen,
   bevor der Text kopiert wird. */
.embed-guide__count--warn {
  color: var(--color-danger);
  font-weight: 600;
}

.embed-guide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.embed-guide__quote {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  background: #f5f5f5;
  font-size: 0.9rem;
}

.embed-guide__faq dt {
  font-weight: 600;
  margin-top: var(--space-md);
}

.embed-guide__faq dd {
  margin-left: 0;
  font-size: 0.95rem;
}

/* Landingpages tragen ihre Abschnitte selbst - dort darf der Rahmen weder
   begrenzen noch einruecken, sonst laufen die farbigen Flaechen nicht mehr
   ueber die volle Breite. */
.seo-main--flush {
  max-width: none;
  padding: 0;
}

/* --- Ortssuche im Baukasten (2026-08-01) ---------------------------------- */

.embed-guide__search {
  display: flex;
  gap: var(--space-sm);
}

.embed-guide__search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
}

/* Der Knopf steht neben einem schmalen Feld - die grosse Polsterung der
   Hauptknoepfe sprengt die Zeile. */
.embed-guide__search .place__button {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  white-space: nowrap;
}

.embed-guide__search-status {
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.embed-guide__search-status:empty {
  display: none;
}

.embed-guide__search-status--warn {
  color: var(--color-danger);
}

.embed-guide__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  list-style: none;
  padding: 0;
}

/* Ganze Zeile als Trefferfläche: Auf dem Smartphone ist ein Wort in einer
   Liste sonst kaum zu treffen. */
.embed-guide__result {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.embed-guide__result:hover,
.embed-guide__result:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
}

/* Der Ausweg für den seltenen Fall, dass die Suche nichts findet. Steht
   zugeklappt da - Koordinaten sind nicht der übliche Weg. */
.embed-guide__manual summary {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-xs) 0;
}

.embed-guide__manual[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* --- Blog (Phase 13k) ----------------------------------------------------- */

.blog-list {
  display: grid;
  gap: var(--space-lg);
  /* Eine Spalte auf dem Telefon, zwei ab Tabletbreite - ohne Medienabfrage.
     Beitraege sind Fliesstext; drei Spalten machten daraus Kacheln, in denen
     kein Anreisser mehr Platz haette. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.blog-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card__text {
  padding: var(--space-md);
}

.blog-card__date {
  margin-bottom: var(--space-xs);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.blog-card__title {
  margin-bottom: var(--space-sm);
  font-size: 1.15rem;
  line-height: 1.3;
}

.blog-card__link {
  color: inherit;
  text-decoration: none;
}

/* Macht die ganze Karte anklickbar, ohne den Linktext aufzublaehen: Der
   Screenreader liest weiterhin nur den Titel vor. */
.blog-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.blog-card__link:hover,
.blog-card__link:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.blog-card__lead {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.blog-empty {
  padding: var(--space-xl) 0;
  text-align: center;
  color: var(--color-text-muted);
}

/* Der Beitrag selbst. Alle Abstaende haengen am Element davor
   (Nachbar-Selektoren): So bekommt die erste Zeile keinen Abstand nach oben,
   und zwischen zwei Absaetzen steht genau einer. */
.blog-body {
  line-height: 1.7;
}

.blog-body > * + * {
  margin-top: var(--space-md);
}

.blog-body h2 {
  margin-top: var(--space-xl);
  font-size: 1.5rem;
  line-height: 1.25;
}

.blog-body h3 {
  margin-top: var(--space-lg);
  font-size: 1.2rem;
}

.blog-body ul,
.blog-body ol {
  padding-left: 1.4em;
}

.blog-body li + li {
  margin-top: var(--space-xs);
}

.blog-body a {
  color: var(--color-primary-dark);
}

.blog-body blockquote {
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  font-style: italic;
}

.blog-body figure {
  margin-top: var(--space-lg);
}

.blog-body__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.blog-body figcaption {
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

.blog-back {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.blog-back a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* Verweis auf einen eigenen Blogeintrag (Phase 13o). */
.place__blog-link {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* --- Spenden (/unterstuetzen) -------------------------------------------- */

.donate {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
  /* Eine Spalte auf dem Telefon, mehrere ab Tabletbreite. Die Mindestbreite
     richtet sich am QR-Code aus - schmaler wäre er nicht mehr zu scannen. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.donate__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  text-align: center;
}

.donate__title {
  font-size: 1rem;
}

.donate__hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Weißer Grund unter dem Bild, nicht nur im Bild: Der QR-Code braucht seinen
   hellen Rand zum Erkennen, und das Kästchen darunter ist getönt. */
.donate__qr {
  width: 100%;
  max-width: 220px;
  height: auto;
  padding: var(--space-xs);
  background: #fff;
  border-radius: var(--radius-sm);
}

/* Die Adresse selbst. Umbruch an jeder Stelle, weil ein PayNym-Code länger
   ist als jede Zeile - und Schrift mit festen Zeichenbreiten, damit 0 und O
   auseinanderzuhalten sind. Das ist bei einer Zahlungsadresse kein
   Schönheitsfrage. */
.donate__value {
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  /* Ein Doppelklick soll die ganze Adresse markieren, nicht ein Wortstück. */
  user-select: all;
}

.donate__note {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-primary);
  background: var(--color-background);
  font-size: 0.9rem;
}

/* --- Vorschlagen (/vorschlagen, 2026-08-11) -------------------------------
   Das einzige Formular des Projekts, das ohne Konto benutzt wird. Entsprechend
   ruhig gehalten: eine Spalte, grosse Felder, keine Spielereien - es soll auf
   dem Handy in der Bahn ausfüllbar sein. */

.suggest {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.suggest__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.suggest__field > label {
  font-weight: 600;
  font-size: 0.95rem;
}

.suggest__optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.suggest__field input,
.suggest__field textarea {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  /* 16px verhindert, dass iOS beim Hineintippen in das Feld zoomt - danach
     steht die Seite verschoben und muss von Hand zurückgeschoben werden. */
  font-size: 1rem;
}

.suggest__field textarea {
  resize: vertical;
  line-height: 1.55;
}

.suggest__field input:focus,
.suggest__field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.suggest__hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.suggest__fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-surface);
}

.suggest__legend {
  padding: 0 var(--space-xs);
  font-weight: 600;
  font-size: 0.95rem;
}

.suggest__choices {
  display: grid;
  gap: var(--space-sm);
}

/* Die ganze Zeile ist anklickbar, nicht nur der Knopf: Auf dem Handy trifft
   sonst jeder Zweite daneben. */
.suggest__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.suggest__choice:hover {
  background: var(--color-background);
}

.suggest__choice input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--color-primary);
}

.suggest__choice small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Die Rechenaufgabe. Das Eingabefeld bleibt schmal - es kommt eine Zahl
   hinein, ein Feld über die volle Breite würde etwas anderes versprechen. */
.suggest__field--captcha {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-background);
}

.suggest__captcha-input {
  max-width: 8rem;
}

/* Der Honigtopf: für Menschen unsichtbar, für ein Formular-Skript aber ein
   ganz normales Feld. Bewusst NICHT "display: none" - manche Bots überspringen
   genau das. */
.suggest__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.suggest__actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.suggest__legal {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Rückmeldungen stehen über dem Formular und sind die erste Zeile, die ein
   Screenreader nach dem Absenden vorliest (role="status"/"alert"). */
.suggest__ok,
.suggest__error {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.suggest__ok {
  border-left: 4px solid var(--color-primary);
  background: rgba(46, 125, 50, 0.08);
}

.suggest__error {
  border-left: 4px solid var(--color-danger);
  background: rgba(198, 40, 40, 0.08);
  color: var(--color-danger);
}