/* ==========================================================================
   Munta Core - Designsystem
   Design Revision 1: modern, hochwertig, markant, regional, digital.

   Leitlinien:
   - eckig statt Bubble (Radien 2/4/6/10)
   - Trennung durch feine Linien und Flaechen, nicht durch Schatten
   - grosse, kontrastreiche Typografie
   - dunkle Kontrastmodule in einer sonst hellen Seite
   - regionale Motive nur als sparsame Akzente

   Aufbau:
     1. Token
     2. Grundlagen und Typografie
     3. Layout-Hilfen und asymmetrische Raster
     4. Kopfbereich und Navigation
     5. Buttons
     6. Karten
     7. Hero und Kontrastmodule
     8. Kacheln und Schnellnavigation
     9. Hinweise, Warnleiste, Leerzustaende
    10. Fussbereich und mobile Navigation
    11. Typspezifische Karteninhalte
   ========================================================================== */

/* ------------------------------------------------------------- 1. Token */
:root {
  /*
     Markenfarben - direkt aus der Logodatei ausgelesen.
     Navy + Orange sind die Erkennungszeichen von muntafuner.at und ziehen sich
     durch Header, Buttons, Akzente und spaeter das App-Icon.
  */
  --brand-navy:    #001531;
  --brand-orange:  #FE8A00;

  /* Flaechen */
  --bg:            #F3F0E9;
  --surface:       #FFFFFF;
  --surface-soft:  #EBE6DC;
  --dark:          var(--brand-navy);
  --dark-soft:     #052243;

  /* Text */
  --text:          var(--brand-navy);
  --text-muted:    #5F6874;
  --text-invert:   #FFFFFF;
  --text-invert-muted: rgba(255,255,255,.70);

  /* Akzente */
  --orange:        var(--brand-orange);
  /* Abgedunkelt fuer Text auf hellem Grund - reines #FE8A00 hat dort zu wenig Kontrast */
  --orange-dark:   #A85400;
  --orange-soft:   #FFEBD1;

  --gold:          #D99D2B;
  --gold-soft:     #F8EDD4;

  --forest:        #294536;
  --forest-soft:   #DFE7E0;

  --enzian:        #176B9A;
  --enzian-soft:   #DCEAF3;

  --danger:        #A3281B;
  --danger-soft:   #F7DED9;
  --warning:       #8A5600;
  --warning-soft:  #FAEBCD;

  /* Linien statt Schatten */
  --border:        rgba(0,21,49,.14);
  --border-strong: rgba(0,21,49,.26);
  --border-invert: rgba(255,255,255,.18);

  /* Schatten nur fuer wirklich schwebende Elemente */
  --shadow-float:  0 6px 24px rgba(0,21,49,.12);

  /* Eckig statt Bubble */
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-pill:   999px;   /* ausschliesslich fuer kleine Tags und Filter */

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* ================== Die Schriftskala (06.09.2026) ==================

     Vorher standen in dieser Datei 35 verschiedene Schriftgroessen:
     .82, .84, .85, .86, .88 — Unterschiede, die niemand sieht, die aber
     zusammen dafuer sorgen, dass nichts zueinander passt. Zwei Kaesten
     nebeneinander hatten Beschriftungen in .78 und .8 rem.

     Acht Stufen genuegen fuer die ganze Seite. Wer eine neue Groesse
     braucht, nimmt die naechstliegende Stufe — nicht einen neuen Wert.

     Alle Stufen sind etwas kleiner als vorher. Der Text wird dadurch
     nicht schlechter lesbar (die Grundschrift bleibt bei 16 px), aber
     die Seite wird ruhiger: Beiwerk darf klein sein, damit das Wichtige
     gross wirken kann, ohne riesig zu sein.                          */
  --fs-micro: .68rem;   /* Versal-Labels ueber einer Zahl              */
  --fs-tiny:  .74rem;   /* Rubrikwoerter, Datumsangaben in Karten      */
  --fs-xs:    .8rem;    /* Chips, Fussnoten, Hinweise                  */
  --fs-sm:    .86rem;   /* Nebentext in Karten                         */
  --fs-md:    .92rem;   /* Fliesstext in Karten, Formularfelder        */
  --fs-base:  1rem;     /* Fliesstext                                  */
  --fs-lg:    1.08rem;  /* Kartenueberschrift                          */
  --fs-xl:    1.25rem;   /* kleine Abschnittsueberschrift               */

  /* ================== Der Schwebeschatten (06.09.2026) ==============

     Zwei Stufen, sonst nichts. Die erste liegt auf allem, was ein
     eigener Kasten ist; die zweite kommt beim Zeigen dazu, aber nur
     dort, wo der Kasten auch anklickbar ist.

     Beide sind zweiteilig: ein harter Millimeter direkt unter der Kante
     und ein weiter, sehr blasser Schein darunter. Ein einzelner grosser
     Schatten sieht nach Word-Dokument aus; erst die Kombination laesst
     eine Flaeche wirklich ueber dem Grund liegen.

     Die Farbe ist das Navy des Hauses mit sehr wenig Deckkraft, nicht
     Schwarz: Schwarz auf dem warmen Sandton der Seite wird grau und
     schmutzig.                                                       */
  --schwebe:      0 1px 2px rgba(0,21,49,.05), 0 5px 16px rgba(0,21,49,.07);
  --schwebe-hoch: 0 2px 4px rgba(0,21,49,.06), 0 12px 28px rgba(0,21,49,.13);



  /*
     Kopfzeile, flacher seit 05.09.2026.

     78 px waren fuer eine Leiste, die auf jeder Seite mitscrollt, zu viel
     - auf einem 800 px hohen Laptopbildschirm ist das ein Zehntel der
     Hoehe, bevor der Inhalt anfaengt. Die Navigation braucht die Hoehe
     nicht: Ihre Schrift ist 0,82 rem, das Logo bestimmt das Mass.

     Die kompakte Stufe (beim Scrollen) rueckt entsprechend nach.
  */
  --header-height: 62px;
  --header-compact: 54px;
  --logo-height: 38px;
  --logo-height-compact: 34px;
  --bottom-nav:    58px;
  --wrap:          1240px;
}

/* --------------------------------------- 2. Grundlagen und Typografie */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* Systemschriften: keine externen Ladevorgaenge (Masterplan 6.3) */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: 700; }

/* Grosse Headline - der Kontrast zwischen riesig und klein erzeugt die Modernitaet */
/* ================== Die Ueberschriften (06.09.2026) ==================

   Alle Stufen sind kleiner geworden. `.display` ging bis 5,1 rem — auf
   einem gewoehnlichen Bildschirm ueber 80 Pixel hohe Buchstaben, und
   darunter begann der Inhalt erst nach einem halben Bildschirm.

   Der Kontrast zwischen gross und klein macht die Gestaltung, nicht die
   absolute Groesse: Wenn das Beiwerk klein und ruhig ist, wirkt eine
   Ueberschrift in 3,6 rem genauso stark wie vorher eine in 5,1 rem — nur
   dass jetzt der erste Absatz mit ins Bild passt.                      */
.display {
  font-size: clamp(2.1rem, 1.5rem + 3.2vw, 3.6rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* --- Eine ganze Frage als Ueberschrift (06.09.2026) -------------------

   `.display` ist fuer zwei, drei Woerter gebaut („Betriebe von hier.").
   Auf den Heimatseiten steht dort ein ganzer Satz — „Warum heisst
   Gaschurn eigentlich Gaschurn?" —, und der fuellte in 5 rem den halben
   Bildschirm, bevor eine Zeile Inhalt kam.

   Ein Drittel kleiner, dazu wieder Luft zwischen den Zeilen: Bei .95
   kleben zwei Zeilen aneinander, was bei drei grossen Woertern gut
   aussieht und bei einem Satz gedraengt wirkt.                        */
.display--frage {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  max-width: 24ch;
}


h1 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.3rem); line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem); line-height: 1.15; letter-spacing: -.02em; }
h3 { font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -.01em; }

/* Sektionstitel: kraeftig, klar, in Versalien */
.section-title {
  font-size: clamp(1rem, .93rem + .38vw, 1.2rem);
  font-weight: 750;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}

.eyebrow {
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-4); }
img { max-width: 100%; height: auto; display: block; }

/* --- Links (06.09.2026) ------------------------------------------------

   Ein Link im Fliesstext war bisher nur an der Farbe zu erkennen. Das
   genuegt nicht: Wer Farben schlecht unterscheidet, sieht dasselbe Wort
   wie alle anderen — nur eben ohne den Hinweis, dass es eines ist, das
   irgendwohin fuehrt. Deshalb im Fliesstext immer ein Strich darunter.

   Ausgenommen ist alles, was ohnehin als Schaltflaeche erkennbar ist:
   Knoepfe, Karten, Chips, Navigation. Dort waere der Strich Laerm.

   Der Strich sitzt tief und ist duenn (`text-underline-offset`,
   `text-decoration-thickness`) — er soll die Unterlaengen von g, p und j
   nicht durchschneiden.                                                */
a { color: var(--orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* `:where()` statt `:not()` an dieser Stelle (06.09.2026): Innerhalb von
   `:where()` zaehlt kein Selektor fuer die Spezifitaet. Mit `:not()`
   wog diese Regel schwerer als die Ausnahmen weiter unten — die
   Fussleiste bekam ihre Striche trotzdem. */
p a:not(:where(.btn, [class*="card"], [class*="chip"])),
li a:not(:where(.btn, [class*="card"], [class*="chip"], [class*="nav"])),
.prose a,
.lead a,
dd a,
.card__text a,
figcaption a {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
  text-decoration-color: rgba(168, 84, 0, .45);
}
/* Ausgenommen: Fussbereich und Navigationen. Dort steht ohnehin nichts
   als Links — ein Strich unter jedem Wort ergibt einen Zaun, keine
   Auskunft. */
.site-footer a,
.main-nav a,
.mobilmenue a,
.bottom-nav a,
.bildpfad a,
.eyebrow a,
.breadcrumb a {
  text-decoration: none;
}
.site-footer a:hover,
.bildpfad a:hover,
.eyebrow a:hover { text-decoration: underline; }

p a:hover,
li a:hover,
.prose a:hover,
.lead a:hover,
dd a:hover,
.card__text a:hover,
figcaption a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: .1em;
}

:focus-visible { outline: 3px solid var(--enzian); outline-offset: 2px; border-radius: var(--radius-xs); }

.lead { color: var(--text-muted); font-size: var(--fs-base); max-width: 62ch; }
.lead--small { font-size: var(--fs-md); }

/* ------------------------------- 3. Layout-Hilfen und Raster */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }

/* --- Die Abstaende zwischen den Abschnitten (06.09.2026) ---------------

   Von 3 rem auf 2 rem oben und unten, bei den engen von 1,5 auf 1,25.
   Zwischen zwei Abschnitten standen damit 6 rem Nichts — fast ein
   Drittel eines Telefonbildschirms, auf dem nichts zu sehen war ausser
   Hintergrund.

   Luft ist gut, solange sie trennt. Sobald sie so gross wird, dass der
   naechste Abschnitt beim Scrollen erst wieder gesucht werden muss,
   trennt sie nicht mehr, sondern zerreisst.                            */
.section        { padding: var(--space-6) 0; }
.section--tight { padding: var(--space-5) 0; }

.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  /*
     Umbruch erlaubt: Auf schmalen Geraeten passen Ueberschrift und Verweis
     ("Alle Veranstaltungen") nicht nebeneinander. Ohne flex-wrap schob der
     Verweis die Zeile ueber den Rand hinaus.
  */
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--text);
}
/* --- Der Weiterlesen-Verweis neben einer Ueberschrift (06.09.2026) -----

   „Alle Events", „Alle auf der Karte", „Alle 16" — der Weg von einem
   Ausschnitt in die vollstaendige Liste. Er stand als kleines Wort in
   Versalien am rechten Rand und ging zwischen Ueberschrift und Inhalt
   unter.

   Jetzt mit Pfeil und einer Unterkante, die beim Zeigen mitgeht: Man
   sieht, dass es weitergeht, und wohin. Der Pfeil steht als Zeichen im
   Inhalt (`::after`), damit ihn keine Vorlesehilfe mitliest — „Alle
   Events Pfeil nach rechts" ist keine Auskunft.                       */
.section__head a {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  /* Zur Not doch umbrechen, statt die Seite zu sprengen. */
  max-width: 100%; overflow-wrap: anywhere;
}
.section__head a::after {
  content: "→";                 /* Pfeil nach rechts */
  font-size: 1.05em; line-height: 1;
  transition: transform .15s ease;
}
.section__head a:hover {
  border-bottom-color: currentColor;
  text-decoration: none;
}
.section__head a:hover::after { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .section__head a::after { transition: none; }
  .section__head a:hover::after { transform: none; }
}

.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.grid--feed { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/*
   Asymmetrisches Raster: nicht alles gleich gross.
   Mobil bleibt alles einspaltig, ab Tablet entsteht der Rhythmus.
*/
.grid--mixed { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .grid--mixed { grid-template-columns: repeat(6, 1fr); }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-6 { grid-column: span 6; }
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--dark); color: var(--text-invert);
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------ 4. Kopfbereich und Navigation */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  /* Sehr heller Grund, damit Navy und Orange des Logos wirken */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background-color .18s ease;
}
/*
   Beim Scrollen bleibt der Kopf deckend - bei 96 % schimmerte der Seitentext
   durch, was wie ein Darstellungsfehler aussah. Nur wo der Weichzeichner
   wirklich unterstuetzt wird, darf er leicht durchscheinend sein; dort ist
   nichts mehr lesbar. Ohne @supports bleibt es beim deckenden Grund.
*/
.site-header--compact {
  background: var(--surface);
  box-shadow: 0 1px 12px rgba(0,21,49,.06);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .site-header--compact {
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
  }
}

.site-header__inner {
  display: flex; align-items: center;
  min-height: var(--header-height);
  transition: min-height .18s ease;
}
.site-header--compact .site-header__inner { min-height: var(--header-compact); }

/*
   Das Logo steht frei im Header - kein Kasten, kein Rahmen, keine Farbfilter.
   Hoehe steuert die Groesse, die Breite ergibt sich aus dem Seitenverhaeltnis.
*/
.site-logo {
  display: block; flex-shrink: 0;
  position: relative;
  margin-right: var(--space-6);
  line-height: 0;
}
.site-logo picture img {
  display: block;
  width: auto;
  height: var(--logo-height);
  object-fit: contain;
  transition: height .18s ease;
}
.site-header--compact .site-logo picture img { height: var(--logo-height-compact); }

/*
   Der Fengga schaut zwischen den beiden Bergen hervor. Die Prozentwerte
   stammen aus der Logodatei (887 x 138): Die Kerbe zwischen dunklem und
   orangem Berg sitzt bei x 153, ihr Fusspunkt bei y 62. Genau dort endet
   der Rahmen - der Schnitt liegt hinter deckendem Berg und ist unsichtbar.
   Nur Muetze und Kopf bleiben ueber der Bergkante stehen.
*/
.site-logo__peek {
  position: absolute;
  z-index: 0;
  left: 12.87%;
  top: 7.25%;
  width: 8.5%;
  height: 37.7%;
  overflow: hidden;
  pointer-events: none;
}
.site-logo__peek img { display: block; width: 100%; height: auto; }

/* Das Logo selbst liegt darueber und verdeckt den Rest der Figur. */
.site-logo picture { position: relative; z-index: 1; display: block; }

@media (min-width: 1100px) { .site-logo { margin-right: 48px; } }

@media (max-width: 1099px) and (min-width: 720px) {
  :root { --logo-height: 34px; --logo-height-compact: 31px; --header-height: 58px; --header-compact: 52px; }
  .site-logo { margin-right: var(--space-5); }
}

@media (max-width: 719px) {
  :root { --logo-height: 26px; --logo-height-compact: 24px; --header-height: 54px; --header-compact: 50px; }
  .site-logo { margin-right: var(--space-3); }
  /* Bei 28px Logohoehe waere der Kopf acht Pixel gross - das ist nur noch Matsch. */
  .site-logo__peek { display: none; }
}

/*
   ================== 360 px: das Logo gibt nach (RC-1a) =================

   Gemessen bei 360 px: Logo 180 px, drei Kopfsymbole 148 px, dazwischen
   12 px Abstand - zusammen 340 px in einem 313 px breiten Kopf. Die Zeile
   lief um 11 px ueber.

   Nachgeben muss das Logo, nicht das Tap-Ziel: 44 px sind die Untergrenze
   fuer etwas, das mit dem Daumen getroffen wird, ein Logo hat keine solche
   Grenze. Bei 23 px Hoehe misst es 150 px - zusammen 302 px, und die Zeile
   steht.
*/
@media (max-width: 399px) {
  :root { --logo-height: 23px; --logo-height-compact: 22px; }
  .site-logo { margin-right: var(--space-2); }
  .header-actions { gap: 6px; }
}

.main-nav { display: none; }
.main-nav ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.main-nav a {
  display: block; padding: var(--space-2) 0;
  color: var(--text); font-weight: 650; font-size: var(--fs-xs);
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid transparent;
  /* „Was geht?" ist der einzige zweiwortige Punkt - ohne diese Zeile
     bricht er um und macht die ganze Kopfzeile zweizeilig. */
  white-space: nowrap;
}
/* Die Navigation gibt keinen Platz ab: Schrumpft sie, wandern die
   Kontoaktionen ueber den rechten Rand hinaus. */
.main-nav { flex-shrink: 0; }
.main-nav ul { flex-wrap: nowrap; }
.main-nav a:hover { color: var(--orange-dark); border-bottom-color: var(--border-strong); text-decoration: none; }
/* Aktiver Punkt: farbige Unterkante statt Pille */
.main-nav a[aria-current="page"] { border-bottom-color: var(--orange); }
/*
   ================== Warum 1100 und nicht 900 (RC-1a) ==================

   Bei 900 px erschien die Hauptnavigation, waehrend im Kopf rechts noch
   Region, Nachrichten, Glocke und Konto stehen. Angemeldet ergab das eine
   Zeile von rund 1075 px in einem 853 px breiten Kopf: Die Kontoaktionen
   ragten rechts hinaus - auf JEDEM Geraet zwischen 900 und 1350 px, also
   auch auf einem gewoehnlichen 1280er-Laptop.

   Gemessen wurde das erst, als die Browsermatrix um 1024 px erweitert
   wurde. Die alte Regel entstand am abgemeldeten Kopf, wo drei Elemente
   weniger stehen.

   Ein Umschaltpunkt statt zweier Notloesungen: Bis 1099 px fuehrt die
   Bottom-Nav (sie ist dafuer gebaut), ab 1100 px die Kopfnavigation.
*/
@media (min-width: 1100px) { .main-nav { display: block; } }

/*
   Zwischen 900 und 1180 Pixeln stehen sieben Navigationspunkte neben Logo,
   Regionsknopf und Anmelden. Das passt nur, wenn die Abstaende schrumpfen und
   der Regionsknopf weicht - die Region steht ohnehin im Seitentitel.
*/
@media (min-width: 1100px) and (max-width: 1399px) {
  .main-nav ul { gap: var(--space-4); }
  .main-nav a { font-size: var(--fs-xs); letter-spacing: .06em; }
  .site-header .region-badge { display: none; }
}

.header-actions {
  margin-left: auto; display: flex; align-items: center; gap: var(--space-3);
  flex-shrink: 0;
}

.region-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: .3rem .6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text); font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.region-badge:hover { border-color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------ 5. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: .7rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  background: var(--dark); color: var(--text-invert);
  min-height: 46px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--orange-dark); color: var(--text-invert); text-decoration: none; }

/*
   Orange-Knopf mit Navy-Schrift: weisser Text auf #FE8A00 erreicht nur 2,4:1
   und faellt damit unter WCAG AA. Navy auf Orange kommt auf 7:1 - und ist
   zugleich die Markenkombination.
*/
.btn--primary { background: var(--orange); color: var(--brand-navy); }
.btn--primary:hover { background: var(--brand-navy); color: var(--text-invert); }

.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: transparent; border-color: var(--text); color: var(--text); }

.btn--invert { background: var(--text-invert); color: var(--dark); }
.btn--invert:hover { background: var(--orange); color: var(--text-invert); }

.btn--soft { background: var(--surface-soft); color: var(--text); }
.btn--soft:hover { background: var(--dark); color: var(--text-invert); }

/*
   Der Knopf fuer das, was sich nicht rueckgaengig machen laesst (Phase 8b).

   Bewusst NICHT gefuellt rot: Ein grosser roter Block zieht den Blick auf
   sich und laedt zum Klicken ein - genau das Gegenteil dessen, was er soll.
   Rote Kontur, roter Text, heller Grund; er ist eindeutig als Gefahr
   erkennbar, draengt sich aber nicht auf. Erst beim Hover wird er voll.

   Steht zentral, weil ihn Phase 9 (Moderation) und die Kontoloeschung
   ebenso brauchen - eine zweite Fassung in einer Featuredatei waere der
   Anfang zweier verschiedener Loeschknoepfe.
*/
.btn--danger {
  background: var(--danger-soft); border-color: var(--danger); color: var(--danger);
}
.btn--danger:hover { background: var(--danger); color: var(--text-invert); }

/* Pfeil wandert beim Hover leicht nach rechts - dezent, nicht verspielt */
.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn:hover .btn__arrow { transform: none; } }

/* -------------------------------------------------------------- 6. Karten */
/*
   Vordergrundfarben laufen ueber Komponentenvariablen, nicht ueber inherit.
   Grund: "color: inherit" im Hover holte die Body-Farbe (Navy) - auf einer
   dunklen Karte stand damit Navy auf Navy und der Inhalt verschwand.
*/
.card {
  --card-fg: var(--text);
  --card-muted: var(--text-muted);

  display: block;
  position: relative;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
  overflow: hidden;
  color: var(--card-fg);
  transition: transform .18s ease, border-color .18s ease;
}

/* --- Eine Karte, die ueber dem Grund steht (06.09.2026) ---------------

   Die gewoehnliche Karte ist flach: heller Grund, Haarstrich, kein
   Schatten. Das ist richtig fuer ein Raster aus zwanzig Kacheln — dort
   waere zwanzigmal Schatten Unruhe.

   Steht aber EIN Kasten allein auf der Seite, verschwindet er so. Diese
   Abwandlung gibt ihm den weichen Schatten, den das Haus schon kennt
   (`--shadow-float`), Luft nach innen und eine ruhige Lesebreite.

   Der Rahmen wird heller statt staerker: Was schwebt, braucht keinen
   Strich, der es festhaelt — beides zusammen sieht nach Kasten IM Kasten
   aus.                                                                 */
.card--schwebt {
  border-color: rgba(0,21,49,.06);
  box-shadow: var(--shadow-float);
  padding: clamp(1.1rem, .8rem + 1vw, 1.8rem) clamp(1.2rem, .9rem + 1.2vw, 2rem);
}

/* Fliesstext braucht eine Lesebreite; im Raster stehende Karten nicht —
   deshalb zwei Klassen statt einer. */
.card--lesebreite { max-width: 46rem; }   /* dasselbe Mass wie .bizclaim
   und .notice — eine Lesebreite, die im ganzen Haus dieselbe ist. 62ch
   waren bei dieser Schriftgroesse rechnerisch richtig und optisch ein
   zu schmaler Streifen neben einer breiten Seite. */

/* Auch im Raster schwebt jeder Kasten fuer sich: Der Schatten trennt sie
   voneinander, wo vorher nur ein Haarstrich stand. Beim Zeigen hebt sich
   der Kasten etwas — nur bei denen, die auch anklickbar sind, sonst waere
   es eine Bewegung ohne Zweck. */
a.card--schwebt:hover,
.card--schwebt:has(> a):hover {
  box-shadow: 0 10px 30px rgba(0,21,49,.16);
  transform: translateY(-2px);
}
.card--schwebt .card__text {
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.65;
  margin: 0;
}
.card__body { padding: var(--space-4); }

.card--link:hover,
.card--link:focus-visible {
  border-color: var(--border-strong);
  text-decoration: none;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }

/* Akzent als schmale Oberkante - ruhiger als ein farbiger Rahmen */
/*
   Jede Akzentfarbe steht jetzt zweimal zur Verfuegung: als Oberkante wie
   bisher UND als Variable, damit das Zeichen im Kicker dieselbe Farbe
   tragen kann (16.08.2026). Ein Wert, zwei Stellen - so laufen Kante und
   Zeichen nicht auseinander, wenn eine Farbe getauscht wird.
*/
.card--accent-orange { --card-accent: var(--orange-dark); border-top: 3px solid var(--orange); }
.card--accent-gold   { --card-accent: var(--gold);   border-top: 3px solid var(--gold); }
.card--accent-forest { --card-accent: var(--forest); border-top: 3px solid var(--forest); }
.card--accent-enzian { --card-accent: var(--enzian); border-top: 3px solid var(--enzian); }
.card--accent-danger { --card-accent: var(--danger); border-top: 3px solid var(--danger); }
.card--accent-dark   { --card-accent: var(--dark);   border-top: 3px solid var(--dark); }

.card__media { margin: 0; position: relative; background: var(--surface-soft); }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card--tall .card__media img { aspect-ratio: 4 / 5; }
.card__credit {
  position: absolute; right: 0; bottom: 0;
  padding: .1rem .4rem; font-size: var(--fs-micro);
  background: rgba(23,23,23,.72); color: #fff;
}

.card__kicker {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: 0 0 var(--space-2);
  color: var(--text-muted); font-size: var(--fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.card__dot { opacity: .5; }

/*
   Das Typzeichen im Kicker (16.08.2026).

   Etwas groesser als die Versalien daneben - ein Zeichen auf Schriftgroesse
   ist bei 0,7 rem nicht mehr zu erkennen. `--card-accent` kommt von der
   Karte; fehlt sie, faellt es auf die Textfarbe zurueck und bleibt damit
   in jedem Fall sichtbar.

   Auf der dunklen Warnkarte traegt das Danger-Rot zu wenig - dort steht
   das Zeichen weiss, wie der Text darunter.
*/
.card__kicon {
  width: 1.15em; height: 1.15em;
  flex: none;
  color: var(--card-accent, currentColor);
}
.card--dark .card__kicon { color: currentColor; }

.card__title { margin: 0 0 var(--space-2); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; }
.card__meta  { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); }
.card__text  { margin: 0; color: var(--text-muted); font-size: var(--fs-md); }
.card__facts { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-3) 0 0; }
.card__source { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--fs-micro); letter-spacing: .04em; }

.card--wide .card__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
.card--wide .card__body  { padding: var(--space-5); }

/* Dunkle Karte - fuer Hervorhebungen mitten in der hellen Seite */
.card--dark {
  --card-fg: var(--text-invert);
  --card-muted: var(--text-invert-muted);
  background: var(--dark); border-color: transparent;
}
.card--dark .card__title  { color: var(--card-fg); }
.card--dark .card__kicker { color: var(--card-muted); }
.card--dark .card__text   { color: var(--card-muted); }
.card--dark .card__meta   { color: var(--card-muted); }
.card--dark .chip { background: rgba(255,255,255,.1); color: var(--text-invert); }
.card--dark.card--link:hover { border-color: var(--orange); }

/* --------------------------------------------------------------- Chips */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: .16rem .5rem; border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--text-muted);
  font-size: var(--fs-tiny); font-weight: 600; text-decoration: none;
}
.chip--adjacent { background: var(--enzian-soft); color: var(--enzian); }
.chip--village  { background: var(--forest-soft); color: var(--forest); }

/* --------------------------------- 7. Hero und Kontrastmodule */
.hero {
  position: relative;
  background: var(--dark);
  color: var(--text-invert);
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
}
.hero__inner {
  position: relative; z-index: 2;
  /*
     ============ Enger gestellt (06.09.2026) ============

     In der rechten Spalte stehen inzwischen fuenf Dinge: Melden, Suche,
     Bauernkalender, Zahlen, Entdecken. Mit dem alten Innenabstand von bis
     zu 4 rem oben und unten fuellte der Hero auf einem gewoehnlichen
     Bildschirm die ganze Seite - man sah nichts anderes mehr.

     Der Hero ist der Einstieg, nicht die Seite. Er darf so hoch sein, dass
     darunter noch etwas anfaengt.
  */
  padding: clamp(1.25rem, .8rem + 2vw, 2.25rem) clamp(1.25rem, .75rem + 2.5vw, 3rem);
  display: grid; gap: var(--space-4);
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); align-items: end; }
}

/* Hintergrundbild, sobald rechtlich geklaerte Fotos vorliegen */
.hero__media { position: absolute; inset: 0; z-index: 0; }
/*
   Das Bild traegt jetzt mehr (05.09.2026).

   Ueber dem Foto lagen DREI Daempfer uebereinander: dieses `opacity`,
   der Verlauf in `.hero__media::after` und noch einmal `.hero::before`.
   Jeder fuer sich war massvoll, zusammen kam vom Berg kaum mehr an als
   eine Ahnung. Alle drei sind gelockert - und zwar gemeinsam, weil ein
   einzelner Wert das Verhaeltnis nur verschoben haette.

   Die Grenze setzt der Text, nicht der Geschmack: "Heute im Montafon"
   steht in Weiss darauf, und die Zahlen daneben ebenso. Deshalb bleibt
   die Abdunklung unten und links am staerksten - genau dort, wo
   geschrieben steht.
*/
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,23,23,.12) 0%, rgba(23,23,23,.62) 78%);
}

/* Stilisierte Berglinie - subtiles regionales Motiv, kein Dekor an jeder Ecke */
.hero__ridge {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  width: 100%; height: clamp(60px, 12vw, 130px);
  opacity: .16; color: var(--surface-soft);
  pointer-events: none;
}

.hero__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-invert-muted);
}
.hero__title { margin: 0 0 var(--space-3); color: var(--text-invert); }
/* --- Die Tageszeile ganz oben (06.09.2026) ----------------------------

   Sie steht jetzt VOR den beiden Spalten und ueber beide hinweg. Der
   Grund ist `align-items: end` weiter oben: Die Spalten stehen unten
   buendig, weil die rechte mehr traegt — was innerhalb der linken Spalte
   „ganz oben" war, landete damit auf halber Hoehe.

   Der halbe negative Abstand nach oben zieht sie in den Innenabstand des
   Heros hinein, also dicht unter den Bildrand. Der Rest des Abstands
   bleibt: buendig mit der Bildkante abzuschliessen, saehe nach Versehen
   aus.                                                                 */
.hero__date  {
  margin: 0; color: var(--text-invert-muted); font-size: var(--fs-md); letter-spacing: .02em;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
}
.hero__inner > .hero__date {
  grid-column: 1 / -1;
  align-self: start;
  margin-top: clamp(-1rem, -.35rem - 1vw, -.4rem);
  /* Der Abstand zur naechsten Zeile kommt vom `gap` des Rasters und
     wuerde die Zeile sonst zweimal absetzen. */
  margin-bottom: calc(-1 * var(--space-2));
}

/* --- Mondphase (A-006, 16.08.2026) -----------------------------------

   Die Scheibe ist bewusst klein: Der Mond gehoert zum Tag, aber er ist
   keine Nachricht. Zwei Farben, keine Textur — was er sagen soll, sagt
   die Form.

   `--mond-hell` und `--mond-dunkel` als Variablen, weil dasselbe Zeichen
   spaeter auch auf hellem Grund stehen koennte; im Hero liegt es auf
   Navy.                                                                */
.hero__mond {
  display: inline-flex; align-items: center; gap: .45rem;
  --mond-hell: #F3F0E9;
  /*
     DECKEND, nicht halbtransparent — und das ist keine Geschmacksfrage.

     Die Schattengrenze ist eine Ellipse, die ueber der hellen Haelfte
     LIEGT und sie abdeckt. Mit `rgba(255,255,255,.16)` schien die helle
     Flaeche darunter durch: Der Neumond sah aus wie ein Halbmond, die
     Sichel wie ein Dreiviertelmond. Gemessen am 16.08.2026 an allen acht
     Gestalten nebeneinander — im Kleinen faellt es nicht auf, im Grossen
     sofort.

     Der Ton ist ein aufgehelltes Navy: dunkel genug, dass die helle
     Scheibe traegt, hell genug, dass die dunkle Haelfte auf dem
     Hero-Grund ueberhaupt zu sehen ist.
  */
  --mond-dunkel: #16304d;
}
.mond { width: 1.15em; height: 1.15em; flex: none; }
.mond__hell   { fill: var(--mond-hell); }
.mond__dunkel { fill: var(--mond-dunkel); }
.hero__mond-text { white-space: nowrap; }

/* Auf schmalen Geraeten traegt der Name zu viel Breite - das Zeichen
   allein sagt bereits, ob er zu- oder abnimmt. Der Name bleibt im
   `title` und fuer Vorlesehilfen im `aria-label` des Zeichens. */
@media (max-width: 420px) {
  .hero__mond-text { display: none; }
}

/*
   Enger als der Rest der Seite: Die Kaesten hier gehoeren zusammen und
   lesen sich als eine Reihe. Ein Abstand von 1 rem zwischen fuenf Kaesten
   sind allein 4 rem zusaetzliche Hoehe.
*/
.hero__side { display: grid; gap: var(--space-2); align-content: start; }

.hero__weather { display: flex; align-items: baseline; gap: var(--space-3); }
.hero__temp {
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.2rem);
  font-weight: 750; line-height: .9; letter-spacing: -.045em;
  margin: 0; color: var(--text-invert);
}
.hero__condition {
  margin: 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-invert-muted);
}

/* Zahlenzeile: gross, ohne Kachelrahmen */
.hero__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hero__stat { display: flex; align-items: baseline; gap: var(--space-3); }
.hero__stat a { color: inherit; text-decoration: none; display: flex; align-items: baseline; gap: var(--space-3); }
.hero__stat a:hover .hero__stat-label { color: var(--orange); }
.hero__stat-value {
  font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em;
  color: var(--text-invert); min-width: 2.2ch;
}
.hero__stat-label {
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-invert-muted); transition: color .18s ease;
}

.hero__cta { margin: var(--space-1) 0 0; }
.hero__question {
  margin: 0 0 var(--space-2); font-size: var(--fs-base); font-weight: 650;
  color: var(--text-invert);
}

/* Dunkles Kontrastmodul fuer einzelne Bereiche mitten in der Seite */
.spotlight {
  background: var(--dark); color: var(--text-invert);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.spotlight__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange);
}
.spotlight__title { margin: 0 0 var(--space-2); color: var(--text-invert); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); letter-spacing: -.025em; }
.spotlight__meta  { margin: 0 0 var(--space-4); color: var(--text-invert-muted); font-size: var(--fs-md); }

/* ---------------------------- 8. Kacheln und Schnellnavigation */
.tiles { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile { background: var(--surface); padding: var(--space-4); color: inherit; text-decoration: none; }
a.tile:hover { background: var(--surface-soft); text-decoration: none; color: inherit; }
.tile__value { margin: 0; font-size: 1.6rem; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.tile__label { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tile__sub   { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--fs-xs); }

/* ---------------------------------------- Entdecken-Raster
   Asymmetrische Themenflaechen statt gleich grosser Kaestchen.
   Wandern und Heimat tragen mehr Gewicht als Jobs oder Markt.
   -------------------------------------------------------------------- */
.section__head--intro { display: block; border-bottom: 2px solid var(--text); }
.section__sub { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-md); }

.discovery {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;         /* mobil: eine Spalte, Groessen bleiben */
}

@media (min-width: 640px) {
  .discovery { grid-template-columns: repeat(2, 1fr); }
  .dtile--wide  { grid-column: span 2; }
  .dtile--half  { grid-column: span 2; }
  .dtile--strip { grid-column: span 2; }
}

@media (min-width: 1000px) {
  /*
     Sieben Flaechen auf sechs Spalten, in drei Zeilen ohne Luecke:
       Wandern (4) + Heute los (2)         -> zwei Zeilen hoch
       Essen (2)   + Heimat (4)
       Markt (2)   + Regional (2) + Jobs (2)
  */
  .discovery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); }
  .dtile--wide   { grid-column: span 4; grid-row: span 2; }
  .dtile--tall   { grid-column: span 2; grid-row: span 2; }
  .dtile--half   { grid-column: span 4; }
  .dtile--medium { grid-column: span 3; }
  .dtile--small  { grid-column: span 2; }
  .dtile--strip  { grid-column: span 6; }
}

/*
   Themenflaeche.
   
   Vordergrundfarben laufen ueber --tile-fg / --tile-muted. Sie werden je
   Farbwelt EINMAL gesetzt und im Hover NICHT angefasst. Zuvor stand hier
   "color: inherit" im Hover - dadurch holte sich eine dunkle Karte die
   Body-Farbe (Navy) und der weisse Text verschwand auf navyfarbenem Grund.
   
   Der Hover aendert deshalb ausschliesslich Rahmen und Position.
*/
.dtile {
  --tile-fg: var(--brand-navy);
  --tile-muted: rgba(0, 21, 49, .70);

  position: relative; overflow: hidden;
  isolation: isolate;
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--tile-fg);
  text-decoration: none;
  min-height: 150px;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.dtile:hover,
.dtile:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--brand-orange);
}
@media (prefers-reduced-motion: reduce) {
  .dtile:hover, .dtile:focus-visible { transform: none; }
}

/* Inhalt liegt immer ueber dekorativen Ebenen */
.dtile__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: var(--space-4) var(--space-4) var(--space-3);
  width: 100%;
  color: var(--tile-fg);
}

/*
   Alle Textbausteine nehmen die Kartenfarbe - nie eine globale Linkfarbe.

   Wichtig: Hier stand einmal `.dtile svg`. Das traf auch die dekorative
   Berglinie, die ebenfalls ein SVG ist, und faerbte sie in voller Textfarbe -
   auf der dunklen Wandernflaeche also deckend weiss ueber dem Text. Deshalb
   werden hier nur die Symbole angesprochen.
*/
.dtile__eyebrow,
.dtile__value,
.dtile__claim,
.dtile__action,
.dtile__icon,
.dtile__svg { color: inherit; }

.dtile__eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .78;
}
.dtile__svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.5; }

.dtile__value {
  margin: 0 0 var(--space-1);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  font-weight: 750; line-height: .9; letter-spacing: -.045em;
}

.dtile__claim {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg); font-weight: 750;
  line-height: 1.08; letter-spacing: -.03em;
}
.dtile--wide .dtile__claim { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem); }
.dtile--tall .dtile__claim,
.dtile--medium .dtile__claim { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.7rem); }

/* Sekundaertext ueber die eigene Variable, nicht ueber Deckkraft der Karte */
.dtile__detail { margin: 0; font-size: var(--fs-sm); color: var(--tile-muted); }

.dtile__action {
  display: flex; align-items: center; gap: var(--space-2);
  margin: auto 0 0; padding-top: var(--space-4);
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.dtile__arrow { transition: transform .18s ease; }
.dtile:hover .dtile__arrow,
.dtile:focus-visible .dtile__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .dtile:hover .dtile__arrow, .dtile:focus-visible .dtile__arrow { transform: none; }
}

/*
   Berglinie: rein dekorativ, liegt unter dem Inhalt und faengt keine Klicks.
   Die Fuellung wird direkt am Pfad gesetzt und nicht ueber currentColor
   geerbt - sonst kann eine Textfarbregel sie wieder deckend machen.
*/
.dtile__ridge {
  position: absolute; inset: auto 0 0 0; z-index: 0;
  width: 100%; height: 46%;
  pointer-events: none;
}
.dtile__ridge path { fill: rgba(255,255,255,.07); }

/* --- Farbwelten. Jede setzt NUR Flaeche und die beiden Textvariablen. */
.dtile--navy {
  --tile-bg: var(--brand-navy);
  --tile-fg: var(--text-invert);
  --tile-muted: rgba(255,255,255,.72);
  background: var(--brand-navy); border-color: transparent;
}

.dtile--orange {
  --tile-bg: var(--orange);
  --tile-fg: var(--brand-navy);
  --tile-muted: rgba(0, 21, 49, .78);
  background: var(--orange); border-color: transparent;
}
.dtile--orange:hover, .dtile--orange:focus-visible { border-color: var(--brand-navy); }

.dtile--enzian {
  --tile-bg: var(--enzian);
  --tile-fg: var(--text-invert);
  /* Enzian ist heller als Navy - der Sekundaertext braucht mehr Deckkraft,
     sonst liegt er bei 4,2:1 und damit unter der Barrierefreiheitsgrenze. */
  --tile-muted: rgba(255,255,255,.92);
  background: var(--enzian); border-color: transparent;
}

.dtile--gold {
  --tile-fg: var(--brand-navy);
  --tile-muted: rgba(0, 21, 49, .72);
  background: var(--gold-soft); border-color: transparent;
}

.dtile--cream {
  --tile-bg: var(--surface-soft);
  --tile-fg: var(--brand-navy);
  --tile-muted: rgba(0, 21, 49, .70);
  background: var(--surface-soft);
}

.dtile--white {
  --tile-bg: var(--surface);
  --tile-fg: var(--brand-navy);
  --tile-muted: rgba(0, 21, 49, .70);
  background: var(--surface);
}

/*
   Der Hover-Rahmen steht bewusst NACH den Farbwelten: die setzen
   border-color auf transparent und wuerden ihn sonst ueberschreiben.
*/
.dtile:hover,
.dtile:focus-visible { border-color: var(--brand-orange); }
.dtile--orange:hover,
.dtile--orange:focus-visible { border-color: var(--brand-navy); }
/* Die Munta-hilft-Leiste laeuft quer und darf flacher sein */
.dtile--strip { min-height: 0; }
.dtile--strip .dtile__inner {
  flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.dtile--strip .dtile__eyebrow,
.dtile--strip .dtile__claim,
.dtile--strip .dtile__detail { margin: 0; }
.dtile--strip .dtile__claim  { font-size: var(--fs-lg); }
.dtile--strip .dtile__action { margin-left: auto; padding-top: 0; }
/* ------------------------ 9. Hinweise, Warnleiste, Leerzustaende */
.notice {
  border: 1px solid var(--border); border-left: 3px solid var(--enzian);
  background: var(--surface); color: var(--text);
  padding: var(--space-4); border-radius: var(--radius-sm);
}
.notice--build { border-left-color: var(--gold); }

/*
   Statuszeile im Hero: Wetter und aktuelle Warnungen als kleine Marken.
   Bewusst kein Balken ueber die volle Seitenbreite - er hat den Einstieg
   zerschnitten und optisch zu viel Gewicht bekommen.
*/
.status-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.status-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .3rem .6rem;
  border: 1px solid var(--border-invert);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  color: var(--text-invert);
  font-size: var(--fs-xs); line-height: 1.2;
}
.status-chip strong { font-size: var(--fs-base); font-weight: 750; letter-spacing: -.02em; }
.status-chip__place {
  color: var(--text-invert-muted);
  font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

/*
   Der Messzeitpunkt (06.09.2026). Bewusst leise: Er ist die Fussnote zur
   Zahl, nicht die Auskunft selbst. Ist der Wert nicht von heute, wird er
   heller UND traegt das Datum - dann soll er auffallen.
*/
.status-chip__zeit {
  color: var(--text-invert-muted);
  font-size: var(--fs-tiny);
  font-variant-numeric: tabular-nums;
}
.status-chip__zeit--alt { color: var(--gold); }

/* Warnung: geschlossen nur eine Marke, aufgeklappt der ganze Text */
.status-warning {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
}
.status-warning summary {
  display: flex; align-items: center; gap: var(--space-2);
  padding: .3rem .6rem;
  cursor: pointer; list-style: none;
  font-size: var(--fs-xs); color: var(--text-invert);
}
.status-warning summary::-webkit-details-marker { display: none; }
.status-warning summary::after {
  content: "▾"; margin-left: .1rem;
  color: var(--text-invert-muted); font-size: var(--fs-micro);
  transition: transform .18s ease;
}
.status-warning[open] summary::after { transform: rotate(180deg); }
.status-warning summary:hover { background: rgba(255,255,255,.1); border-radius: var(--radius-sm); }

.status-warning__level {
  font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
/*
   Der Titel darf die Zeile nicht sprengen: Bei mehreren Warnungen einer
   Stufe stehen dort seit 15.08.2026 alle Titel nebeneinander
   („Hitze · Gewitter").
*/
.status-warning__title {
  font-weight: 650;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Überschrift je Warnung im aufgeklappten Text - nur bei mehreren */
.status-warning__untertitel {
  margin: var(--space-2) 0 .15rem;
  font-size: var(--fs-tiny); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-invert);
}
.status-warning__untertitel:first-child { margin-top: 0; }

/* Farbe zeigt die Dringlichkeit - der Text nennt sie zusaetzlich */
.status-warning--info     { border-color: rgba(255,255,255,.22); }
.status-warning--info     .status-warning__level,
.status-warning--minor    .status-warning__level { color: var(--text-invert-muted); }
.status-warning--moderate { border-color: var(--gold); }
.status-warning--moderate .status-warning__level { color: var(--gold); }
.status-warning--severe,
.status-warning--extreme  { border-color: var(--orange); background: rgba(254,138,0,.16); }
.status-warning--severe   .status-warning__level,
.status-warning--extreme  .status-warning__level { color: var(--orange); }

.status-warning__body {
  padding: 0 .7rem .6rem;
  max-width: 46ch;
}
.status-warning__text {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm); line-height: 1.45;
  color: var(--text-invert-muted);
}
.status-warning__meta {
  margin: 0;
  font-size: var(--fs-tiny); color: var(--text-invert-muted);
}
.status-warning__meta a { color: var(--orange); }

/*
   Schmale Geraete: Es weicht die STUFE, nicht der Titel (15.08.2026).

   Vorher stand hier das Gegenteil - unter 520px wurde
   `.status-warning__title` ausgeblendet, „auf schmalen Geraeten reicht die
   Stufe". Das war ein Fehler: Zwei verschiedene Warnungen sahen dort
   voellig gleich aus, beide nur „⚠ WARNUNG". Wer die Marke nicht antippte,
   erfuhr auf dem Telefon nicht einmal, WOVOR gewarnt wird.

   Der Titel ist die Auskunft, die Stufe ist die Einordnung - und die traegt
   ohnehin schon die Farbe (Gold bei moderate, Orange bei severe/extreme).
   Weichen darf also das Wort, nie der Titel.

   Ausgeblendet wird es visuell, nicht fuer Vorleseprogramme: `display: none`
   haette die Dringlichkeit auch dort verschluckt, wo es keine Farbe gibt.
*/
@media (max-width: 520px) {
  .status-warning__level {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .status-warning[open] .status-warning__level {
    position: static; width: auto; height: auto;
    margin: 0; clip-path: none; overflow: visible;
  }
  /* Die Titelzeile bekommt den frei gewordenen Platz. */
  .status-warning summary { max-width: 100%; }
  .status-warning__title { flex: 1 1 auto; }
}
.empty-state {
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); padding: var(--space-6);
  text-align: center; color: var(--text-muted);
}
/*
   Motiv im Leerzustand (C.5, 16.08.2026).

   Die Hoehe ist fest in Pixeln angegeben und NICHT in Prozent der Breite:
   Ein Leerzustand steht mal in einer schmalen Spalte, mal ueber die volle
   Seite, und ein prozentual skaliertes Motiv wuerde dabei riesig. 200 px
   sind gross genug, dass man den Fengga erkennt, und klein genug, dass der
   Satz darunter die Hauptsache bleibt.
*/
.empty-state__bild {
  display: block; margin: 0 auto var(--space-3);
  width: auto; height: 200px; max-width: 100%;
}
@media (max-width: 480px) {
  .empty-state__bild { height: 150px; }
}

/* --------------------- 10. Fussbereich und mobile Navigation */
.bottom-nav {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--space-2) var(--space-1); min-height: var(--bottom-nav);
  color: var(--text-muted); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border-top: 2px solid transparent;
}
.bottom-nav a:hover { text-decoration: none; color: var(--text); }
.bottom-nav a[aria-current="page"] { color: var(--text); border-top-color: var(--orange); }
.bottom-nav__icon { font-size: var(--fs-lg); line-height: 1; }

/* Der Plus-Knopf ist bewusst der einzige runde Sonderfall.
   Der Selektor nennt das a mit, sonst gewinnt `.bottom-nav a { flex: 1 }` -
   der Knopf waechst dann auf Spaltenbreite und wird auf Tablets zum Oval. */
.bottom-nav a.bottom-nav__create {
  flex: 0 0 auto; align-self: center;
  width: 46px; min-width: 46px; max-width: 46px; height: 46px;
  min-height: 46px; padding: 0; margin: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--orange); color: var(--brand-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; font-weight: 400;
  border-top: 0;
}
.bottom-nav a.bottom-nav__create:hover { background: var(--brand-navy); color: var(--text-invert); }
.bottom-nav a.bottom-nav__create[aria-current="page"] { border-top: 0; color: var(--brand-navy); }
@media (min-width: 1100px) { .bottom-nav { display: none; } }

/* ======================================================================
   Die fuenf Wege am Telefon (06.09.2026)
   ---------------------------------------------------------------------
   Zur neuen unteren Leiste: ein Zaehler am Symbol, ein Profilbild statt
   des Personensymbols, und der Plus-Knopf etwas groesser - er ist die
   Hauptaktion und darf das zeigen.
   ====================================================================== */

.bottom-nav__icon { position: relative; display: inline-flex; }
.bottom-nav__icon .icon { width: 22px; height: 22px; }

.bottom-nav__zahl {
  position: absolute; top: -6px; right: -10px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--danger); color: #fff;
  font-size: .58rem; font-weight: 800; letter-spacing: 0;
}

.bottom-nav__bild {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border);
}

.bottom-nav a.bottom-nav__create {
  width: 52px; min-width: 52px; max-width: 52px;
  height: 52px; min-height: 52px;
  font-size: 1.6rem;
  /* Leicht angehoben: Der Knopf sitzt dadurch naeher am Daumen und
     hebt sich von den vier flachen Wegen daneben ab. */
  margin-top: -6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* ---------------------------------------------------- Erstellen-Auswahl */

.erstellen__frage { margin-bottom: var(--space-2); }
.erstellen__ort {
  display: flex; align-items: center; gap: .35rem;
  color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5);
}

.erstellen__gross { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }

.erstellenkarte {
  display: flex; align-items: center; gap: var(--space-4);
  /* Deutlich ueber 44px: Das hier sind die Hauptwege. */
  min-height: 68px; padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
}
.erstellenkarte:hover { border-color: var(--orange); text-decoration: none; }
.erstellenkarte__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, rgba(0,0,0,.05));
}
.erstellenkarte__icon .icon { width: 24px; height: 24px; }
.erstellenkarte__text { flex: 1; min-width: 0; }
.erstellenkarte__titel { display: block; font-weight: 700; font-size: var(--fs-base); }
.erstellenkarte__zeile { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.erstellenkarte__pfeil { flex: 0 0 auto; color: var(--text-muted); }
.erstellenkarte__pfeil .icon { width: 18px; height: 18px; }

.erstellen__klein {
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.erstellenchip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: inherit;
}
.erstellenchip:hover { border-color: var(--orange); text-decoration: none; }
.erstellenchip .icon { width: 18px; height: 18px; }

.erstellen__hinweis { color: var(--text-muted); font-size: var(--fs-sm); }

/* ------------------------------------------------------- Ortswahl */

.ortwahl__liste {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.ortwahl__knopf {
  width: 100%; min-height: 56px;
  display: flex; align-items: center; gap: .5rem;
  padding: 0 var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer;
}
.ortwahl__knopf:hover { border-color: var(--orange); }
.ortwahl__knopf .icon { width: 18px; height: 18px; color: var(--text-muted); }
.ortwahl__hinweis { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--fs-xs); }

/* ------------------------------------------------------------ Ich */

.ich__gast { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

.ich__kopf {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.ich__bild {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; border: 1px solid var(--border);
}
.ich__bild--leer {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-navy); color: var(--text-invert);
  font-size: 1.5rem; font-weight: 800;
}
.ich__wer { flex: 1; min-width: 0; }
.ich__name { font-size: var(--fs-xl); font-weight: 800; margin: 0; }
.ich__ort {
  display: flex; align-items: center; gap: .3rem;
  color: var(--text-muted); font-size: var(--fs-sm); margin: 0;
}
.ich__ort .icon { width: 15px; height: 15px; }

.ich__kacheln {
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 360px) { .ich__kacheln { grid-template-columns: repeat(2, 1fr); } }

.ich__kacheln a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 88px; padding: var(--space-3) var(--space-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
}
.ich__kacheln a:hover { border-color: var(--orange); text-decoration: none; }
.ich__kacheln .icon { width: 22px; height: 22px; }
.ich__wort { font-size: var(--fs-xs); font-weight: 700; }
.ich__zahl { font-size: var(--fs-base); font-weight: 800; line-height: 1; }
.ich__zahl--neu { color: var(--danger); }

.ich__liste, .ich__bereiche { list-style: none; margin: 0; padding: 0; }
.ich__liste a, .ich__bereiche a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; font-weight: 600;
}
.ich__liste a:hover, .ich__bereiche a:hover { color: var(--orange); text-decoration: none; }
.ich__liste .icon, .ich__bereiche .icon { width: 19px; height: 19px; color: var(--text-muted); }
.ich__ueberschrift { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: var(--space-2); }

/* ======================================================================
   Mein Dorf (06.09.2026)
   ====================================================================== */

.dorf__kopf { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.dorf__marke { display: inline-flex; color: var(--orange); }
.dorf__marke .icon { width: 26px; height: 26px; }
.dorf__name { font-size: 1.6rem; font-weight: 800; margin: 0; flex: 1; min-width: 0; }
.dorf__wechseln { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

.dorf__aktionen {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
}
.dorf__aktionen a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 64px; padding: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); text-decoration: none; color: inherit;
  font-size: var(--fs-tiny); font-weight: 700;
}
.dorf__aktionen a:hover { border-color: var(--orange); text-decoration: none; }
.dorf__aktionen .icon { width: 20px; height: 20px; }

/* Die Reiter scrollen seitlich; der Rand zeigt, dass rechts mehr kommt. */
.dorf__reiter {
  display: flex; gap: var(--space-1);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
}
.dorf__reiter::-webkit-scrollbar { display: none; }
.dorf__reiter a {
  flex: 0 0 auto; min-height: 44px;
  display: inline-flex; align-items: center; padding: 0 var(--space-4);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.dorf__reiter a.an { color: var(--text); border-bottom-color: var(--orange); }
.dorf__reiter a:hover { color: var(--text); text-decoration: none; }

.dorffeed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }

/* ------------------------------------------------------------- Leute */

.leuteliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.leutekarte {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface);
}
.leutekarte__wer { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2);
  text-decoration: none; color: inherit; }
.leutekarte__wer:hover { text-decoration: none; color: var(--orange); }
.leutekarte__bild { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.leutekarte__bild--leer {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-navy); color: var(--text-invert); font-weight: 800;
}
.leutekarte__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leutekarte__tat {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--text-muted);
}
.leutekarte__tat:hover { background: var(--surface-2, rgba(0,0,0,.05)); color: var(--orange); }
.leutekarte__tat .icon { width: 20px; height: 20px; }

/* -------------------------------------------------------- Leerstelle */

.leerstelle {
  text-align: center; padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--border); border-radius: var(--radius-md);
}
.leerstelle__icon { display: inline-flex; color: var(--text-muted); margin-bottom: var(--space-2); }
.leerstelle__icon .icon { width: 34px; height: 34px; }
.leerstelle__satz { color: var(--text-muted); margin-bottom: var(--space-4); }

/* ======================================================================
   Emoji beim Schreiben (06.09.2026)
   ---------------------------------------------------------------------
   Der Knopf sitzt IM Feld, unten rechts — dort, wo bei bekannten
   Messengern auch. Das Blatt kommt am Telefon von unten und ist auf
   320 px noch vollstaendig; deshalb sechs Spalten und kein festes Mass.
   ====================================================================== */

.emojifeld { position: relative; }
.emojifeld > textarea { padding-right: 46px; }

.emojifeld__knopf {
  position: absolute; right: 6px; bottom: 6px;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; font-size: var(--fs-lg); line-height: 1; cursor: pointer;
  opacity: .7;
}
.emojifeld__knopf:hover, .emojifeld__knopf:focus-visible { opacity: 1; background: var(--surface-2, rgba(0,0,0,.06)); }

/* Das Blatt ist ein <dialog> (siehe munta-emoji.js): erst die
   Browser-Grundwerte wegraeumen - Rahmen, Innenabstand, halbe
   Bildschirmbreite -, dann unser Aussehen. Abgedunkelt wird vom eigenen
   Grund, deshalb bleibt der native ::backdrop klar. */
.emojiblatt {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  overflow: visible;
}
.emojiblatt:not([open]) { display: none; }
.emojiblatt::backdrop { background: transparent; }
.emojiblatt__grund {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; background: rgba(0, 0, 0, .45); cursor: pointer;
}
.emojiblatt__inhalt {
  position: relative; width: 100%; max-height: 62vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .22);
}
@media (min-width: 720px) {
  .emojiblatt { align-items: center; justify-content: center; }
  .emojiblatt__inhalt { max-width: 420px; border-radius: var(--radius-md); border: 1px solid var(--border); }
}

.emojiblatt__suche {
  width: 100%; min-height: 44px; margin-bottom: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: inherit; font: inherit;
}
.emojiblatt__liste { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.emojiblatt__titel {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: var(--space-2) 0 var(--space-1);
}
.emojiblatt__reihe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
@media (min-width: 420px) { .emojiblatt__reihe { grid-template-columns: repeat(8, 1fr); } }

.emojiblatt__zeichen {
  /* 44px Trefferflaeche - auch auf 320 px passen sechs davon nebeneinander. */
  min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.emojiblatt__zeichen:hover, .emojiblatt__zeichen:focus-visible { background: var(--surface-2, rgba(0,0,0,.07)); }

body.emoji-offen { overflow: hidden; }

/* ======================================================================
   Die Neu-Zeile im Hero (06.09.2026)
   ---------------------------------------------------------------------
   Sie steht dort, wo bis eben „Heute im Muntafu" stand — aber klein und
   in einer Zeile. Auf schmalen Geraeten scrollt sie seitlich, statt in
   drei Zeilen umzubrechen: Sie soll Platz sparen, nicht welchen kosten.
   ====================================================================== */

.hero__neues {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-3);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hero__neues::-webkit-scrollbar { display: none; }

.hero__neues-marke {
  flex: 0 0 auto;
  padding: .1rem .45rem; border-radius: var(--radius-pill);
  background: var(--orange); color: var(--brand-navy);
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}

.hero__neues-stueck {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .3rem;
  max-width: 62vw;
  padding: .25rem .5rem; border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
  font-size: var(--fs-xs); line-height: 1.3;
  background: rgba(255, 255, 255, .09);
}
.hero__neues-stueck:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.hero__neues-stueck .icon { width: 14px; height: 14px; opacity: .8; flex: 0 0 auto; }
.hero__neues-wort { font-weight: 700; opacity: .75; }
.hero__neues-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ======================================================================
   Bewerten, reagieren, mitreden (06.09.2026)
   ====================================================================== */

.mitreden__sterne {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.mitreden__schnitt { display: flex; align-items: center; gap: .5rem; margin: 0; }
.mitreden__schnitt strong { font-size: 1.5rem; line-height: 1; }
.mitreden__sterneleiste { color: var(--border); letter-spacing: .05em; }
.mitreden__sterneleiste .voll { color: var(--orange); }
.mitreden__anzahl { font-size: var(--fs-xs); color: var(--text-muted); }

.mitreden__geben { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.mitreden__frage { font-size: var(--fs-xs); color: var(--text-muted); margin-right: .35rem; }
.mitreden__stern {
  /* 44px Trefferflaeche, obwohl der Stern kleiner aussieht. */
  width: 44px; height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--border);
}
.mitreden__stern.an { color: var(--orange); }
.mitreden__stern:hover, .mitreden__stern:focus-visible { color: var(--orange-dark, var(--orange)); }

.mitreden__zeichen {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.mitreden__zeichen form { display: contents; }

.reaktion {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); cursor: pointer;
  font-size: var(--fs-base); line-height: 1; color: inherit;
}
.reaktion:hover { border-color: var(--orange); }
.reaktion.an { border-color: var(--orange); background: rgba(240, 120, 30, .12); }
.reaktion--still { cursor: default; opacity: .8; }
.reaktion--gast { text-decoration: none; opacity: .7; }
.reaktion--gast:hover { opacity: 1; border-color: var(--orange); text-decoration: none; }

/* „mehr" — die zwoelf weiteren Zeichen. Am Telefon klappt das Blatt unter
   der Reihe auf und ist vier Spalten breit; das passt auf 320 px. */
.reaktion__mehr { position: relative; }
.reaktion__mehr > summary {
  list-style: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: var(--radius-pill);
  color: var(--text-muted); font-size: var(--fs-lg);
}
.reaktion__mehr > summary::-webkit-details-marker { display: none; }
.reaktion__mehr[open] > summary,
.reaktion__mehr > summary:hover { border-color: var(--orange); color: var(--orange); }
.reaktion__blatt {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  min-width: 208px; padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.reaktion__blatt form { display: contents; }
.reaktion__blatt .reaktion { padding: 0; min-width: 44px; justify-content: center; }

/* ---------------------------------------------------------- Kontakt */

.kontaktwege { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.kontaktwege a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 60px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); text-decoration: none; color: inherit;
}
.kontaktwege a:hover { border-color: var(--orange); text-decoration: none; }
.kontaktwege .icon { width: 22px; height: 22px; color: var(--text-muted); flex: 0 0 auto; }
.kontaktwege__wort { font-weight: 700; }
.kontaktwege__zeile { color: var(--text-muted); font-size: var(--fs-xs); margin-left: auto; text-align: right; }

.kontakt__titel { font-size: var(--fs-base); font-weight: 800; margin: var(--space-6) 0 var(--space-3); }
.kontaktform label { display: block; margin-bottom: var(--space-3); }
.kontaktform label > span { display: block; font-size: var(--fs-xs); font-weight: 700; margin-bottom: .25rem; }
.kontaktform input, .kontaktform textarea {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: inherit; font: inherit;
}
.kontaktform textarea { min-height: 120px; }
.kontaktform__zwei { display: grid; gap: var(--space-3); }
@media (min-width: 520px) { .kontaktform__zwei { grid-template-columns: 1fr 1fr; } }
.kontaktform__pflicht { color: var(--danger); }
.kontaktform__merk { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--space-3); }
.kontakt__ernst { line-height: 1.7; margin-bottom: var(--space-3); }
.kontakt__knoepfe { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.kontakt__klein { font-size: var(--fs-xs); color: var(--text-muted); }


.reaktion__zahl { font-size: var(--fs-xs); font-weight: 700; }

.mitreden__titel {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-base); font-weight: 800; margin-bottom: var(--space-3);
}
.mitreden__titel .icon { width: 18px; height: 18px; }

.mitreden__schreiben { margin-bottom: var(--space-4); }
.mitreden__schreiben textarea {
  width: 100%; min-height: 84px; margin-bottom: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: inherit; font: inherit;
}
.mitreden__gast { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }

.kommentare { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.kommentare--antworten {
  margin: var(--space-3) 0 0 var(--space-4);
  padding-left: var(--space-3); border-left: 2px solid var(--border);
  gap: var(--space-3);
}
.kommentar__kopf { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.kommentar__bild { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.kommentar__bild--leer {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-navy); color: var(--text-invert); font-size: var(--fs-xs); font-weight: 800;
}
.kommentar__wer { font-weight: 700; text-decoration: none; color: inherit; }
.kommentar__wer:hover { color: var(--orange); text-decoration: none; }
.kommentar__wann { font-size: var(--fs-tiny); color: var(--text-muted); }
.kommentar__text { margin: 0 0 .35rem; line-height: 1.6; overflow-wrap: anywhere; }

.kommentar__fuss { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kommentar__antwort > summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  min-height: 32px; display: inline-flex; align-items: center;
}
.kommentar__antwort > summary::-webkit-details-marker { display: none; }
.kommentar__antwort > summary:hover { color: var(--orange); }
.kommentar__antwort textarea {
  width: 100%; margin: var(--space-2) 0; padding: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: inherit; font: inherit;
}
.kommentar__weg {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: var(--text-muted); text-decoration: underline;
}
.kommentar__weg:hover { color: var(--danger); }

/* --- Was nur die Verwaltung sieht (06.09.2026) ------------------------

   Der Kasten mit den abgegebenen Bewertungen und den Anschluessen. Er
   sieht bewusst nach Werkzeug aus und nicht nach Seite: grauer Grund,
   schmale Schrift, Tabelle. Wer ihn sieht, soll merken, dass er hier
   etwas tut, was sonst niemand sehen kann.                            */
.mitverwaltung {
  margin-top: var(--space-4);
  border: 1px dashed var(--border-strong);
  background: var(--surface-soft);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
}
.mitverwaltung__auf {
  cursor: pointer; font-weight: 700; font-size: var(--fs-xs);
  display: flex; align-items: center; gap: var(--space-2);
}
.mitverwaltung__zahl {
  font-weight: 600; color: var(--text-muted);
}
.mitverwaltung__hinweis {
  margin: var(--space-3) 0; color: var(--text-muted); font-size: var(--fs-xs);
  max-width: 52ch;
}

/* Die Tabelle rollt fuer sich, statt die Seite breit zu machen. */
.mitverwaltung__tabelle {
  width: 100%; border-collapse: collapse; display: block; overflow-x: auto;
}
.mitverwaltung__tabelle th,
.mitverwaltung__tabelle td {
  text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--border); vertical-align: top;
  white-space: nowrap;
}
.mitverwaltung__tabelle th {
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.mitverwaltung__sterne { color: var(--orange); letter-spacing: .05em; }
.mitverwaltung__ip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-xs); }
.mitverwaltung__leer { color: var(--text-muted); font-style: italic; }
.mitverwaltung__tun { display: flex; gap: var(--space-3); align-items: center; }
.mitverwaltung__tun form { display: flex; gap: var(--space-2); align-items: center; }
.mitverwaltung__weg {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: var(--danger); text-decoration: underline;
}

/* Anschluss und Zustand am einzelnen Kommentar — ebenfalls nur fuer sie. */
.kommentar__ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-tiny); color: var(--text-muted);
}
.kommentar__marke {
  font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--danger);
  border: 1px solid var(--danger); border-radius: var(--radius-sm);
  padding: 1px 5px;
}







.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-7) 0 calc(var(--bottom-nav) + var(--space-6));
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--fs-sm);
}
.site-footer ul {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text); }
.site-footer__brand { font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; color: var(--text); }
@media (min-width: 1100px) { .site-footer { padding-bottom: var(--space-7); } }

main { padding-bottom: var(--bottom-nav); }
@media (min-width: 1100px) { main { padding-bottom: 0; } }

/* ------------------------ 11. Typspezifische Karteninhalte
   Gemeinsame Huelle, eigenes Gesicht je Inhaltstyp.
   -------------------------------------------------------------------- */

.card__lead-facts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-2);
}

.fact { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 650; letter-spacing: .02em; }
.fact--strong { color: var(--text); }

/* Marktplatz und Angebot: der Preis dominiert */
.fact--price {
  color: var(--text); font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem);
  font-weight: 750; letter-spacing: -.03em;
}
.card--dark .fact--price { color: var(--text-invert); }
.fact--strike { text-decoration: line-through; opacity: .6; font-weight: 500; }

/* Event: grosser Datumsblock links */
/*
   Der Datumsblock steht in Listenkarten neben dem Titel, in Feedkarten
   dagegen allein. Ohne inline-block dehnte er sich dort ueber die volle
   Breite und wurde zum orangen Balken.
*/
.date-block {
  display: inline-block;
  flex-shrink: 0; text-align: center; line-height: 1;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); min-width: 58px; width: fit-content;
  margin-bottom: var(--space-2);
}
.date-block__day   { display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; }
.date-block__month { display: block; margin-top: 2px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.date-block--today { background: var(--orange); border-color: var(--orange); color: var(--brand-navy); }
.date-block--today .date-block__month { color: rgba(0,21,49,.7); }

.card__event-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.card__event-head .card__title { margin-bottom: var(--space-1); }

/* Tour: Kennzahlen als Reihe */
.trail-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-2); }
.trail-stat__value { font-size: var(--fs-base); font-weight: 750; letter-spacing: -.02em; display: block; }
.trail-stat__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.fact--difficulty { padding: .12rem .5rem; border-radius: var(--radius-xs); font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fact--easy   { background: var(--forest-soft); color: var(--forest); }
.fact--medium { background: var(--gold-soft);   color: var(--warning); }
.fact--hard   { background: var(--danger-soft); color: var(--danger); }

/* Angebot: Rabatt als Marke */
.deal-badge {
  display: inline-block; padding: .2rem .5rem;
  background: var(--orange); color: var(--brand-navy);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em;
  border-radius: var(--radius-xs);
}

.fact--severity { padding: .12rem .5rem; border-radius: var(--radius-xs); font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fact--info     { background: var(--enzian-soft); color: var(--enzian); }
.fact--minor    { background: var(--forest-soft); color: var(--forest); }
.fact--moderate { background: var(--gold-soft);   color: var(--warning); }
.fact--severe,
.fact--extreme  { background: var(--danger-soft); color: var(--danger); }

.chip--free     { background: var(--forest-soft); color: var(--forest); }
.chip--validity { background: var(--gold-soft);   color: var(--warning); }
.chip--seller   { background: var(--enzian-soft); color: var(--enzian); }

.card__meta--business { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--text); }

/* Community: der Mensch steht vorne */
.card__author { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.card__avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); object-fit: cover; flex-shrink: 0; }
.card__avatar--letter {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dark); color: var(--text-invert); font-weight: 700; font-size: var(--fs-xs);
}
.card__author-name { color: var(--text); font-weight: 700; }
.card--dark .card__author-name { color: var(--text-invert); }
.card__reactions { display: flex; gap: var(--space-4); margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Wortmarke als Rueckfall, wenn keine Logodatei vorhanden ist (z. B. munta.eu) */
.site-logo__fallback {
  display: inline-block; line-height: 1.1;
  color: var(--brand-navy); font-weight: 800;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem);
  letter-spacing: -.02em; text-transform: uppercase;
}
.site-logo:hover { text-decoration: none; }

/* ------------------------------------ 12. Listen, Filter und Detailseiten
   Kommt mit Phase 4 (Veranstaltungen, Touren, Ausflugsziele).
   -------------------------------------------------------------------- */

.filterbar {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.filterchip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .38rem .8rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  font-size: var(--fs-xs); font-weight: 650; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.filterchip:hover { background: var(--surface); border-color: var(--text); text-decoration: none; }
.filterchip--active {
  background: var(--brand-navy); border-color: var(--brand-navy); color: var(--text-invert);
}
.filterchip--active:hover { background: var(--brand-navy); color: var(--text-invert); }
.filterchip__count { opacity: .6; font-weight: 600; font-size: var(--fs-tiny); }

/* --- Der Wegweiser-Chip (06.09.2026) ---------------------------------

   Ein Chip in einer Filterleiste verspricht: „ich schraenke diese Liste
   ein". Der Immobilien-Reiter auf dem Marktplatz tut das nicht, er fuehrt
   auf eine andere Seite. Also darf er nicht aussehen wie seine Nachbarn.

   Der gestrichelte Rahmen sagt „gehoert dazu, ist aber nicht dasselbe",
   die orange Schrift setzt ihn ab, und der Pfeil zeigt die Richtung.
   Alles drei zusammen, weil Farbe allein fuer Farbenblinde nichts sagt.

   `margin-inline-start: auto` waere schoen (Chip ganz rechts), scheitert
   aber an `flex-wrap`: in der letzten Zeile springt er dann irgendwohin.
   Er steht deshalb schlicht am Ende der Reihe.                          */
.filterchip--weg {
  border-style: dashed;
  border-color: var(--brand-orange);
  color: var(--orange-dark);
}
.filterchip--weg:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  border-style: solid;
  color: var(--text-invert);
}
.filterchip__weg-icon {
  width: 1em; height: 1em; flex: 0 0 auto;
}

/* --- Die Reiterleiste zu einem Ort (06.09.2026) -----------------------

   Kleiner als die Filterleisten der Listenseiten: Sie filtert nichts,
   sie fuehrt weiter. Die Beschriftung davor steht in derselben Zeile,
   damit die Leiste nicht nach Ueberschrift aussieht — sie ist Beiwerk
   am Ende der Seite, kein neuer Abschnitt.                            */
.ortsreiter {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.ortsreiter__vor {
  font-size: var(--fs-tiny); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
  margin-right: var(--space-2);
}
.ortsreiter__chip { font-size: var(--fs-xs); padding: .3rem .7rem; }

/* Das Bildzeichen vor einer Rubrik — etwas groesser als die Schrift
   daneben, sonst verschwindet es zwischen den Buchstaben. */
.filterchip__zeichen,
.ortsreiter__zeichen {
  font-size: 1.05em; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}




.section__count {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  letter-spacing: .06em;
}

/* ----------------------------------------------------------- Detailseiten */
.detail { max-width: 780px; }

.detail__title {
  font-size: clamp(1.8rem, 1.4rem + 2.2vw, 3.1rem);
  font-weight: 750; line-height: 1.03; letter-spacing: -.035em;
  margin: 0 0 var(--space-5);
}

/* Die Trennlinien zeichnen die Zellen selbst (linke und obere Kante), nicht der
   Hintergrund des Rasters. Sonst bleibt bei ungerader Anzahl - fuenf Kennzahlen
   in zwei Spalten - eine graue Leerzelle stehen, die wie ein Fehler aussieht. */
.detail__facts {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 0 var(--space-5);
}
.detail__fact {
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border);
}

/* Schmal: verlaesslich zwei Spalten, und die letzte Kennzahl nimmt die ganze
   Zeile ein, wenn sie sonst allein stehen wuerde. */
@media (max-width: 620px) {
  .detail__facts { grid-template-columns: repeat(2, 1fr); }
  .detail__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.detail__fact-label {
  display: block; margin-bottom: var(--space-1);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
.detail__fact-value { display: block; font-size: var(--fs-base); font-weight: 700; }
.detail__fact-sub   { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }

.detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-5); }

.detail__text {
  font-size: var(--fs-base); line-height: 1.65; color: var(--text);
  margin: 0 0 var(--space-5);
}
.detail__meta { color: var(--text-muted); font-size: var(--fs-sm); }

/* Weitere Termine einer Serie */
.datelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
            background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.datelist li {
  background: var(--surface); padding: var(--space-3) var(--space-4);
  display: flex; align-items: baseline; gap: var(--space-4);
}
.datelist strong { min-width: 6.5rem; }
.datelist span { color: var(--text-muted); font-size: var(--fs-sm); }

/* Hinweis über einer vergangenen Veranstaltung */
.warning-note {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
  font-size: var(--fs-md); font-weight: 650;
}

.source-note { color: var(--text-muted); font-size: var(--fs-xs); margin: 0; }

/* ------------------------------------------- 13. Konto und Formulare
   Kommt mit Phase 4b (Anmeldung, Registrierung, Passwort).
   -------------------------------------------------------------------- */

.auth { max-width: 480px; }

.auth__title {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  font-weight: 750; line-height: 1.02; letter-spacing: -.035em;
  margin: 0 0 var(--space-4);
}

.auth__links {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-md); color: var(--text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}

.form { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; }

.field { display: grid; gap: var(--space-2); }
.field label {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

/*
   `search` stand hier bis Phase 8b nicht - und fiel damit durch jede
   Formatierung: 22px hoch statt 48, 13px Schrift statt 16. Gefunden beim
   Breitenaudit zu den Gruppen, wo das erste Suchfeld der Seite entstand.

   Beides ist mehr als ein Schönheitsfehler. 22px sind auf dem Telefon kaum
   zu treffen, und alles unter 16px laesst iOS beim Antippen in die Seite
   zoomen - dieselbe Feststellung wie beim Messenger-Composer in 8a.

   `font: inherit` deckt die Schriftgroesse ab, sobald der Selektor greift.
*/
.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="search"],
.field input[type="tel"],
.field select {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  min-height: 48px;              /* bequem auf dem Handy */
  transition: border-color .15s ease;
}

/*
   Das Kreuz zum Leeren, das WebKit in ein Suchfeld setzt, sitzt sonst auf
   der Kante der Umrandung.
*/
.field input[type="search"] { -webkit-appearance: none; appearance: none; }
.field input:focus, .field select:focus { border-color: var(--brand-navy); }

.field__hint  { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.field__error { margin: 0; font-size: var(--fs-xs); font-weight: 650; color: var(--danger); }
.field__optional { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }

.field--error input, .field--error select { border-color: var(--danger); }

/* Zustimmungsfeld */
.field--check { gap: var(--space-1); }
.check {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--fs-md); font-weight: 400; text-transform: none; letter-spacing: 0;
  line-height: 1.45; cursor: pointer;
}
.check input[type="checkbox"] {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--orange);
}

.btn--block { width: 100%; }

.notice--error {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

/* Kopfbereich: Konto-Zugang */
.header-account {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .3rem .7rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}
.header-account:hover { border-color: var(--text); text-decoration: none; }
.header-account--primary { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--text-invert); }
.header-account--primary:hover { background: var(--orange); border-color: var(--orange); color: var(--brand-navy); }

/* ---------------------------------------------- Korrekturen 11.08.2026 */

/*
   Auf schmalen Geraeten ist im Kopf kein Platz fuer Logo, Regionsangabe UND
   Anmeldeknopf - zusammen ragten sie ueber den Rand hinaus. Die Regionsangabe
   entfaellt dort: sie steht ohnehin gross im Hero ("Heute im Montafon").
*/
@media (max-width: 520px) {
  .site-header .region-badge { display: none; }
  .header-account { padding: .3rem .55rem; font-size: var(--fs-micro); }
}

/*
   Mittlere Breiten: bei zwei Spalten und sieben Flaechen bliebe sonst die
   letzte allein in ihrer Zeile stehen. Heimat belegt dort nur eine Spalte,
   damit die Zeilen aufgehen.
*/
@media (min-width: 640px) and (max-width: 999px) {
  .dtile--half { grid-column: span 1; }
}

/* ==========================================================================
   12. Heimat - Namensherkunft, Zeitleiste, Sagen

   Der Bereich darf nicht als Kette gleicher Textkaesten wirken. Deshalb hat
   jede Inhaltsart eine eigene Form: die Wusstest-du-Flaeche ist dunkel und
   gross, die Zeitleiste liegt auf einer Linie, Sagen bekommen einen ruhigeren,
   dunkleren Ton - ohne dass daraus eine Gruselseite wird.
   ========================================================================== */

.wrap--reading { max-width: 46rem; }

.eyebrow__link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.eyebrow__link:hover { color: var(--orange-dark); }

.display--article {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.06;
  margin-bottom: var(--space-4);
}

.section__note {
  color: var(--text-muted);
  max-width: 46rem;
  margin: calc(var(--space-3) * -1) 0 var(--space-5);
  font-size: var(--fs-md);
}

/* --- Kennzeichnung der Sicherheit ---------------------------------------
   Steht immer sichtbar am Inhalt, nie im Kleingedruckten. Eine Sage muss als
   Sage erkennbar sein, bevor der Text gelesen wird. */
.confidence {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  border-left: 3px solid var(--border-strong);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  background: var(--surface-soft);
  max-width: 44rem;
}
/* Hinweisfläche und Handlung nebeneinander - mit echtem Abstand statt der
   4px, die sonst nur der Wortzwischenraum zwischen den Elementen hergibt.
   Schmal brechen sie um und stehen bündig untereinander. */
.confidence-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.confidence-row .confidence { margin: 0; }

.confidence__label {
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.confidence__note { color: var(--text-muted); font-size: var(--fs-md); }

.confidence--confirmed { border-left-color: var(--forest); background: var(--forest-soft); }
.confidence--probable  { border-left-color: var(--enzian); background: var(--enzian-soft); }
.confidence--disputed  { border-left-color: var(--gold);   background: var(--gold-soft); }
.confidence--uncertain { border-left-color: var(--text-muted); }
.confidence--legend    { border-left-color: var(--brand-navy); background: #E3E6EC; }

.tag--probable  { background: var(--enzian-soft); color: var(--enzian); }
.tag--disputed  { background: var(--gold-soft);   color: #7A5300; }
.tag--uncertain { background: var(--surface-soft);color: var(--text-muted); }
.tag--legend    { background: #E3E6EC; color: var(--brand-navy); }

/* --- Wusstest du? -------------------------------------------------------- */
.factgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.factcard {
  --tile-fg: var(--text-invert);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--dark);
  color: var(--tile-fg);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  border-top: 4px solid var(--orange);
  transition: transform .15s ease, border-color .15s ease;
}
.factcard:hover, .factcard:focus-visible {
  transform: translateY(-2px);
  text-decoration: none;
  border-top-color: var(--gold);
}
.factcard__eyebrow {
  font-size: var(--fs-tiny); letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}
.factcard__title {
  font-size: 1.35rem; line-height: 1.15; font-weight: 700;
  color: var(--tile-fg);
}
/*
   Eine Flaeche, nicht drei nebeneinander: die eine Aussage bekommt die volle
   Breite und die grosse Schrift. Das Raster darunter bleibt fuer den Fall,
   dass spaeter mehrere Kurzfakten nebeneinander stehen sollen.
*/
/* Knapper (06.09.2026): Der einzelne „Wusstest du?"-Kasten war fast einen
   halben Bildschirm hoch — drei Zeilen in 3 rem, dazu 3 rem Luft oben und
   unten, und rechts daneben blieb die halbe Breite leer. Er ist ein
   Hinweis auf eine Geschichte, nicht die Geschichte selbst.            */
.factcard--solo {
  padding: var(--space-5) var(--space-5);
  gap: var(--space-3);
}
.factcard--solo .factcard__title {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.15;
  max-width: 26ch;
}
.factcard--solo .factcard__teaser { font-size: var(--fs-base); max-width: 46ch; }

.factcard--wide {
  grid-column: span 2;
  grid-row: span 2;
}
.factcard--wide .factcard__title { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.placecard__parent {
  font-size: var(--fs-tiny); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.factcard__teaser { color: rgba(255,255,255,.76); font-size: var(--fs-md); }
.factcard__place {
  margin-top: auto;
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* --- Ortsraster ---------------------------------------------------------- */
.placegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.placegrid--small { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.placecard {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.placecard:hover, .placecard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  border-left-color: var(--brand-navy);
  text-decoration: none;
}
.placecard__top {
  min-height: 46px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}
.placecard__name { font-size: var(--fs-lg); margin: 0; }
.placecard--small .placecard__name { font-size: var(--fs-base); }
.placecard__meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  color: var(--text-muted); font-size: var(--fs-xs);
}

/* --- Sagen --------------------------------------------------------------- */
.legendgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.legendcard {
  --card-fg: var(--text-invert);
  display: flex; flex-direction: column; gap: var(--space-2);
  background: linear-gradient(160deg, var(--dark-soft), var(--brand-navy));
  color: var(--card-fg);
  border: 1px solid rgba(255,255,255,.10);
  padding: var(--space-5);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.legendcard:hover, .legendcard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  text-decoration: none;
}
.legendcard__eyebrow {
  font-size: var(--fs-tiny); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.legendcard__title { font-size: var(--fs-xl); margin: 0; color: var(--card-fg); line-height: 1.18; }
.legendcard__teaser { color: rgba(255,255,255,.74); font-size: var(--fs-md); margin: 0; }
.legendcard__place, .legendcard__note {
  margin-top: auto; font-size: var(--fs-xs); letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.58);
}

.section--legend { background: var(--surface-soft); }

/* --- Geschichten und Verweise -------------------------------------------- */
/* `auto-fit` statt `auto-fill` (06.09.2026).

   Mit `auto-fill` legt der Browser so viele 240-px-Spalten an, wie
   hineinpassen — auch leere. Steht in einem Abschnitt nur EIN Beitrag
   (auf den Heimatseiten der Normalfall), klebte er als schmale Karte
   links, und rechts davon lagen drei leere Spalten.

   `auto-fit` faltet die leeren Spalten zusammen, die Karte nimmt die
   Breite. Damit daraus kein ueberbreiter Streifen wird, bekommt eine
   alleinstehende Karte eine Lesebreite.                               */
.storygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.storygrid > :only-child { max-width: 42rem; }
.storycard {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-navy);
  padding: var(--space-4) var(--space-5);
  text-decoration: none; color: var(--text);
  transition: transform .15s ease, border-color .15s ease;
}
.storycard:hover, .storycard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  border-top-color: var(--orange);
  text-decoration: none;
}
.storycard--muted { background: var(--surface-soft); border-top-color: var(--text-muted); }
.storycard__eyebrow {
  font-size: var(--fs-tiny); letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-dark); font-weight: 700;
}
.storycard__title { font-size: var(--fs-lg); margin: 0; line-height: 1.2; }
.storycard__teaser { color: var(--text-muted); font-size: var(--fs-md); margin: 0; }
.storycard__more {
  margin-top: auto; font-size: var(--fs-xs); font-weight: 700;
  color: var(--orange-dark);
}

/* --- Zeitleiste ---------------------------------------------------------
   Eine durchgehende Linie statt einzelner Kaesten: die Abfolge ist die
   Aussage, nicht der einzelne Eintrag. */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute;
  /* Die Linie liegt am rechten Rand der Jahresspalte. */
  left: 6.5rem; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--border);
}
.timeline__item {
  display: grid;
  /* Breit genug fuer Zeitspannen wie "1805-1814", ohne dass sie umbrechen. */
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  position: relative;
}
.timeline__year {
  font-size: var(--fs-base); font-weight: 700; text-align: right;
  padding-right: var(--space-4);
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
}
.timeline__body { position: relative; padding-left: var(--space-5); }
/*
   Der Punkt muss auf der Linie sitzen, nicht daneben. Er steht um den
   Spaltenabstand plus die halbe Punktbreite nach links versetzt - so trifft
   seine Mitte die Linie, egal wie breit die Jahresspalte gerade ist.
*/
.timeline__body::before {
  content: ""; position: absolute;
  left: calc(-1 * var(--space-5) - 4px);
  top: .55rem;
  width: 10px; height: 10px;
  background: var(--orange);
  border: 2px solid var(--bg);
}
.timeline__title { font-size: var(--fs-base); margin: 0 0 var(--space-1); }
.timeline__text { color: var(--text-muted); font-size: var(--fs-md); margin: 0 0 var(--space-2); }

/* --- Artikel ------------------------------------------------------------- */
.articlemeta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0;
}
.articlemeta .confidence { margin: 0; }
.articlemeta__year, .articlemeta__time {
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

.prose { font-size: var(--fs-lg); line-height: 1.7; }
.prose p { margin: 0 0 var(--space-4); }
.prose em { font-style: italic; color: var(--brand-navy); }

.openquestion {
  border: 1px solid var(--gold);
  background: var(--gold-soft);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
}
.openquestion__title { font-size: var(--fs-base); margin: 0 0 var(--space-2); }
.openquestion p { margin: 0; color: #6B4A00; font-size: var(--fs-md); }

/* --- Quellen ------------------------------------------------------------- */
.sources {
  border-top: 2px solid var(--brand-navy);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
}
.sources__title {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.sources__list { list-style: none; margin: 0; padding: 0; }
.sources__item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
}
.sources__primary {
  font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase;
  background: var(--brand-navy); color: var(--text-invert);
  padding: 2px var(--space-2); border-radius: var(--radius-xs);
}
.sources__note { color: var(--text-muted); font-size: var(--fs-sm); width: 100%; }
.sources__legal { color: var(--text-muted); font-size: var(--fs-xs); margin-top: var(--space-3); }

/* --- Community-Vorbereitung ---------------------------------------------- */
.contribute {
  border: 1px dashed var(--border-strong);
  padding: var(--space-5);
  margin-top: var(--space-6);
}
.contribute__title { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.contribute__text { color: var(--text-muted); font-size: var(--fs-md); margin: 0 0 var(--space-4); }
.contribute__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contribute__soon {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs); color: var(--text-muted);
}

/* --- Karte --------------------------------------------------------------- */
.mapbox {
  height: 260px;
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
  margin: var(--space-5) 0;
  display: flex; align-items: center; justify-content: center;
}
.mapbox__fallback { color: var(--text-muted); font-size: var(--fs-md); margin: 0; }
.mapbox__hint { color: var(--text-muted); }
.mapnote { color: var(--text-muted); font-size: var(--fs-md); }
.leaflet-container { height: 100%; width: 100%; }

.researchnote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-navy);
  padding: var(--space-5);
  max-width: 46rem;
}
.researchnote__title { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
.researchnote p { color: var(--text-muted); font-size: var(--fs-md); margin: 0 0 var(--space-3); }
.researchnote p:last-child { margin-bottom: 0; }

/* ==========================================================================
   13. Was geht?

   Energetischer als der Rest der Seite, aber im selben Markenbild: die Uhrzeit
   traegt die Karte, nicht ein Bild. Auf dem Telefon soll die Liste wie eine
   Event-App wirken.
   ========================================================================== */

.section--wasgeht { background: var(--dark); color: var(--text-invert); }
.section--wasgeht .eyebrow { color: var(--orange); }
.section--wasgeht .display { color: var(--text-invert); }
.section--wasgeht .lead { color: rgba(255,255,255,.76); }

.filterbar--time { margin-bottom: var(--space-3); }
.filterchip--lg {
  font-size: var(--fs-base);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
}
.filterchip__count {
  font-size: var(--fs-tiny);
  opacity: .7;
  margin-left: var(--space-1);
}

.gigs { display: flex; flex-direction: column; gap: var(--space-3); }

.gig {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-navy);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease;
}
.gig:hover, .gig:focus-visible {
  transform: translateX(2px);
  border-color: var(--border-strong);
  border-left-color: var(--orange);
  text-decoration: none;
}

.gig__when {
  display: flex; flex-direction: column; gap: var(--space-1);
  border-right: 1px solid var(--border);
  padding-right: var(--space-4);
}
.gig__time {
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gig__day {
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

.gig__title { font-size: var(--fs-lg); margin: 0 0 var(--space-2); line-height: 1.2; }
.gig__summary { color: var(--text-muted); font-size: var(--fs-md); margin: 0 0 var(--space-2); }
.gig__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.gig__place { font-weight: 700; color: var(--text); }
.gig__free {
  background: var(--forest-soft); color: var(--forest);
  padding: 1px var(--space-2); font-size: var(--fs-xs); font-weight: 700;
}
.gig__age {
  background: var(--surface-soft); color: var(--text);
  padding: 1px var(--space-2); font-size: var(--fs-xs); font-weight: 700;
}
.gig__tags {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.gig__tags li {
  font-size: var(--fs-tiny); letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-soft); color: var(--text-muted);
  padding: 2px var(--space-2);
}

/* Die erste Veranstaltung traegt die Seite. */
.gig--lead { border-left-width: 4px; }
.gig--lead .gig__time { font-size: 2rem; }
.gig--lead .gig__title { font-size: clamp(1.4rem, 3vw, 1.9rem); }

.gig--party { border-left-color: var(--orange); }
.gig--party .gig__tags li:first-child {
  background: var(--orange-soft); color: var(--orange-dark); font-weight: 700;
}

/* Startseiten-Modul */
.tonight { background: var(--dark); color: var(--text-invert); }
.tonight .section-title { color: var(--text-invert); }
.tonight .gig {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  border-left-color: var(--orange);
  color: var(--text-invert);
}
.tonight .gig__title { color: var(--text-invert); }
.tonight .gig__when { border-right-color: rgba(255,255,255,.16); }
.tonight .gig__day, .tonight .gig__summary, .tonight .gig__meta { color: rgba(255,255,255,.70); }
.tonight .gig__place { color: var(--text-invert); }
.tonight .gig__tags li { background: rgba(255,255,255,.10); color: rgba(255,255,255,.78); }
.tonight .gig:hover { border-color: var(--orange); }

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 860px) {
  .factgrid { grid-template-columns: 1fr 1fr; }
  /* Bei zwei Spalten ist die grosse Flaeche nur noch breit, nicht mehr hoch. */
  .factcard--wide { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 620px) {
  .factgrid { grid-template-columns: 1fr; }
  .factcard--wide { grid-column: span 1; grid-row: span 1; }

  .timeline::before { left: 4.2rem; }
  .timeline__item { grid-template-columns: 4.2rem 1fr; gap: var(--space-3); }
  .timeline__year { font-size: var(--fs-md); padding-right: var(--space-2); }
  /* Gleiche Regel, nur mit dem kleineren Spaltenabstand. */
  .timeline__body::before { left: calc(-1 * var(--space-3) - 4px); }

  .gig { grid-template-columns: 4.2rem 1fr; gap: var(--space-3); padding: var(--space-4); }
  .gig__when { padding-right: var(--space-3); }
  .gig__time { font-size: var(--fs-lg); }
  .gig--lead .gig__time { font-size: 1.5rem; }

  .confidence { max-width: 100%; }
}

/* ==========================================================================
   14. Betriebe

   Bewusst ohne Bilder: Fremde Betriebsfotos duerfen wir nicht uebernehmen, und
   ein Platzhalterbild wirkt aermlicher als eine gut gesetzte Textkarte. Die
   Unterscheidung tragen ein farbiger Rand je Art und die Typografie.
   ========================================================================== */

/*
   Zwei bis drei Karten je Reihe am Schreibtisch, zwei auf dem Tablet, eine
   auf dem Handy. `minmax(280px, 1fr)` erledigt das von selbst - eine feste
   Spaltenzahl je Haltepunkt wäre mehr Regeln für dasselbe Ergebnis.
*/
.bizgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}
@media (min-width: 1100px) {
  .bizgrid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

/*
   Die Karte ist kein Anker mehr, sondern ein <article> mit einem Namenslink,
   der sich über die Fläche legt (::after). Grund: In der Aktionsleiste stehen
   echte Links - ein Anker im Anker ist ungültiges HTML.
*/
.bizcard {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  padding: var(--space-3) var(--space-4) var(--space-2);
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease;
}
.bizcard:hover, .bizcard:focus-within {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  border-left-color: var(--brand-orange);
}

/*
   Beim Zeigen entsteht durch `transform` ein eigener Stapelkontext - die
   aufgeklappten Öffnungszeiten lägen sonst unter der nächsten Karte, weil die
   später im Dokument steht. Deshalb hebt sich eine Karte mit offener Klappe
   heraus.
*/
.bizcard:hover, .bizcard:focus-within { z-index: 2; }
.bizcard:has(details[open]) { z-index: 5; }

/* Ein Farbton je Art - hilft beim Ueberfliegen langer Listen.

   Seit 16.08.2026 steht der Ton als Variable, weil ihn zwei Stellen
   brauchen: die Kante links UND das Zeichen in der Kategoriezeile. Vorher
   war die Kante eines Arztes rot und sein Kreuz orange - zwei Aussagen
   ueber dieselbe Karte.

   `service` und `mobility` haben keine eigene Farbe und tragen deshalb
   eine graue Kante. Als Zeichenfarbe waere Grau falsch: Ein graues Symbol
   liest sich als abgeschaltet, nicht als neutral. Dort steht Navy. */
.bizcard--gastronomy    { --biz-accent: var(--brand-orange); }
.bizcard--accommodation { --biz-accent: var(--enzian); }
.bizcard--shop          { --biz-accent: var(--gold); }
.bizcard--craft         { --biz-accent: var(--forest); }
.bizcard--health        { --biz-accent: var(--danger); }
.bizcard--leisure       { --biz-accent: var(--forest); }
.bizcard--institution   { --biz-accent: var(--brand-navy); }

.bizcard--gastronomy,
.bizcard--accommodation,
.bizcard--shop,
.bizcard--craft,
.bizcard--health,
.bizcard--leisure,
.bizcard--institution   { border-left-color: var(--biz-accent); }

.bizcard--service       { border-left-color: var(--text-muted); --biz-accent: var(--brand-navy); }
.bizcard--mobility      { border-left-color: var(--text-muted); --biz-accent: var(--brand-navy); }

.bizcard__eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
}
/* Traegt den Ton seiner Art; ohne zugeordnete Art bleibt es Orange. */
.bizcard__kicon { width: 17px; height: 17px; flex: none; color: var(--biz-accent, var(--brand-orange)); }

.bizcard__name { font-size: var(--fs-base); margin: 0; line-height: 1.25; font-weight: 700; }

/* Der Namenslink macht die ganze Karte anklickbar. */
.bizcard__link { color: inherit; text-decoration: none; }
.bizcard__link::after { content: ""; position: absolute; inset: 0; }
.bizcard__link:hover, .bizcard__link:focus-visible { text-decoration: none; color: var(--brand-navy); }
.bizcard__link:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

/* Ort und Kurzbeschreibung in EINER Zeile - das war vorher zweimal Absatz. */
.bizcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35;
}
.bizcard__micon { width: 14px; height: 14px; flex: none; }
.bizcard__dot { opacity: .6; }

.bizcard__owned {
  display: flex; align-items: center; gap: 4px; margin: 2px 0 0;
  font-size: var(--fs-tiny); font-weight: 700; color: var(--forest);
}

/* --- Aktionsleiste ------------------------------------------------------- */

.bizcard__actions {
  position: relative; z-index: 1;      /* über der Klickfläche des Namens */
  display: flex; align-items: center; gap: 2px;
  margin: 4px calc(var(--space-4) * -1 + 4px) 0;
}
.bizcard__arrow {
  margin-left: auto; margin-right: 6px;
  display: inline-flex; color: var(--text-muted);
  pointer-events: none;                /* der Pfeil zeigt nur, wohin es geht */
}
.bizcard:hover .bizcard__arrow { color: var(--brand-orange); }

/*
   Die Schaltflächen: Symbol 20 px, Fläche 44 x 44 px.

   Die Karte wird kleiner, die Ziele dürfen es nicht - 44 px ist die Größe,
   bei der ein Daumen zuverlässig trifft. Erreicht wird das ohne zusätzliche
   Höhe, weil die Leiste bis an den Kartenrand reicht.
*/
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  color: var(--text-muted); background: none; border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  position: relative;
  transition: color .12s ease, background-color .12s ease;
}
.iconbtn__svg { width: 20px; height: 20px; }
.iconbtn:hover { color: var(--brand-navy); background: var(--surface-soft); text-decoration: none; }
.iconbtn:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; color: var(--brand-navy); }

/* Der Hinweis am Schreibtisch - bei Zeigen UND bei Tastaturfokus. */
.iconbtn[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% - 4px); left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--brand-navy); color: #fff;
  font-size: var(--fs-tiny); font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.iconbtn[data-tip]:hover::after,
.iconbtn[data-tip]:focus-visible::after { opacity: 1; }

/* Auf Geräten ohne Zeiger gibt es keinen Hinweis - dort genügt das aria-label. */
@media (hover: none) {
  .iconbtn[data-tip]::after { display: none; }
}

/* --- Öffnungszeiten, aufklappbar ohne JavaScript ------------------------- */

.bizcard__hours { position: relative; display: inline-flex; }
.bizcard__hours summary { list-style: none; }
.bizcard__hours summary::-webkit-details-marker { display: none; }
.bizcard__hours[open] > summary { color: var(--brand-navy); background: var(--surface-soft); }

/*
   Zugeklappt wird die Fläche ausdrücklich aus dem Aufbau genommen.

   Man sollte meinen, das erledigt `<details>` von selbst - tut es aber nicht
   mehr, sobald das Element ein anderes `display` bekommt (hier `inline-flex`,
   damit die Klappe in der Symbolleiste sitzt). Der Kasten blieb dann im
   Aufbau stehen, ragte über den rechten Rand hinaus und tauchte in der
   Überlaufmessung als 90-facher Fehler auf.
*/
.bizcard__hours:not([open]) .bizcard__hourspanel { display: none; }

.bizcard__hourspanel {
  position: absolute; z-index: 3; top: calc(100% + 2px); left: 0;
  min-width: 15rem; max-width: 20rem;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgb(0 0 0 / .12);
}
.bizcard__hourstext { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.bizcard__hoursnote { margin: var(--space-2) 0 0; font-size: var(--fs-tiny); color: var(--text-muted); }

@media (max-width: 620px) {
  /* Auf schmalen Karten würde die Klappe rechts hinausragen. */
  .bizcard__hourspanel { left: auto; right: 0; }
}

/* --- Jobkarte ------------------------------------------------------------ */

/*
   Erbt bewusst von der Betriebskarte: Wer auf /regional gelernt hat, wo der
   Ort steht, findet ihn auf /jobs an derselben Stelle.
*/
.jobcard {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-navy);
  padding: var(--space-3) var(--space-4) var(--space-2);
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease;
}
.jobcard:hover, .jobcard:focus-within {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  border-left-color: var(--brand-orange);
  z-index: 2;
}

/* Ein Farbton je Beschäftigungsart - dieselbe Idee wie bei den Betrieben. */
.jobcard--apprenticeship { border-left-color: var(--brand-orange); }
.jobcard--seasonal       { border-left-color: var(--gold); }
.jobcard--part_time      { border-left-color: var(--enzian); }
.jobcard--temporary      { border-left-color: var(--text-muted); }

.jobcard__eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
}
.jobcard__flag {
  letter-spacing: .04em; text-transform: none; font-weight: 600;
  background: var(--surface-soft); padding: 1px 6px; border-radius: var(--radius-sm);
}

.jobcard__facts {
  display: flex; flex-wrap: wrap; gap: 4px var(--space-3); margin: 2px 0 0;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35;
}
.jobcard__fact { display: inline-flex; align-items: center; gap: 4px; }

/* --- Leerer Zustand ------------------------------------------------------ */

/*
   Kein „keine Ergebnisse" in Grau. Eine leere Rubrik ist der Normalzustand
   einer neuen Rubrik und bekommt deshalb dieselbe Sorgfalt wie eine volle.
*/
.leerzustand {
  display: grid; justify-items: start; gap: var(--space-3);
  padding: var(--space-6) 0;
  max-width: 40rem;
}
.leerzustand__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--brand-orange);
}
.leerzustand__svg { width: 28px; height: 28px; }
/* Motiv statt Zeichen, wenn die Rubrik wirklich leer ist (C.5, 16.08.2026). */
.leerzustand__bild { display: block; width: auto; height: 200px; max-width: 100%; }
@media (max-width: 480px) {
  .leerzustand__bild { height: 150px; }
}
.leerzustand__titel { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.leerzustand__text { margin: 0; color: var(--text-muted); max-width: 34rem; }
.leerzustand__hinweis { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

.jobowner {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.form--inline { display: inline-flex; margin: 0 var(--space-2) 0 0; }

/* --- Detailseite --------------------------------------------------------- */
.bizactions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-5);
}

.bizdetail {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.bizdetail__side {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-5);
}
.bizdetail__title {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.bizdetail__side .bizdetail__title + * { margin-top: 0; }
.bizdetail__side .bizdetail__title:not(:first-child) { margin-top: var(--space-5); }

.bizfacts { margin: 0; }
.bizfacts dt {
  font-size: var(--fs-tiny); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-top: var(--space-3);
}
.bizfacts dt:first-child { margin-top: 0; }
.bizfacts dt { display: flex; align-items: center; gap: 6px; }
.bizfacts__icon { width: 14px; height: 14px; flex: none; }
.bizfacts dd { margin: 2px 0 0 20px; font-size: var(--fs-md); word-break: break-word; }

/* Symbol im Knopf - etwas kleiner als die Versalien daneben. */
.btn__icon { width: 17px; height: 17px; flex: none; }

.bizsources { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); }
.bizsources li { padding: var(--space-1) 0; color: var(--text-muted); }

.bizhours { font-size: var(--fs-base); margin: 0 0 var(--space-2); }
.bizhours__note { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }

/* --- Der Kontakt steht neben dem Bild (06.09.2026) --------------------

   Das Raster faengt jetzt weiter oben an, gleich unter der Ueberschrift.
   Es braucht deshalb einen eigenen Abstand nach oben — vorher kam er vom
   Abstand des eigenen Abschnitts, den es nicht mehr gibt.

   `align-items: start` stand schon da und ist hier entscheidend: Der
   Kontaktkasten soll oben buendig zum Bild stehen und nur so hoch sein,
   wie sein Inhalt ist — nicht auf Bildhoehe auseinandergezogen.        */
.bizdetail { margin-top: var(--space-5); }

/* Der Gewaehrhinweis sitzt jetzt unter den Oeffnungszeiten im Kasten. */
.bizfacts .bizhours__note { display: block; margin-top: 3px; line-height: 1.35; }


/* --- Uebernahme und Meldung ---------------------------------------------- */
.bizclaim {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand-orange);
  background: var(--surface);
  padding: var(--space-5);
  max-width: 46rem;
}
.bizclaim--done { border-left-color: var(--forest); background: var(--forest-soft); }
.bizclaim__title { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.bizclaim__text { color: var(--text-muted); margin: 0 0 var(--space-4); }

.bizreport { max-width: 46rem; }
.bizreport__summary {
  cursor: pointer; font-weight: 700; font-size: var(--fs-md);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
}
.bizreport__summary:hover { color: var(--orange-dark); }
.bizreport__form { padding-top: var(--space-4); display: grid; gap: var(--space-4); }
.bizreport__note { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }

.notice {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--border-strong);
  background: var(--surface-soft);
  margin: var(--space-4) 0;
  max-width: 46rem;
}
.notice--warning { border-left-color: var(--warning); background: var(--warning-soft); color: #6B4A00; }
.notice--error   { border-left-color: var(--danger);  background: var(--danger-soft);  color: var(--danger); }
.notice--ok      { border-left-color: var(--forest);  background: var(--forest-soft);  color: var(--forest); }

@media (max-width: 860px) {
  .bizdetail { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ==========================================================================
   16. Rueckweg, Quellenhinweis, Lesefenster

   Drei Verbesserungen aus dem Betrieb:
   - Wer liest, muss zurueckfinden koennen, ohne zu suchen
   - Der rechtliche Hinweis gehoert nicht in die Mitte der Aufmerksamkeit
   - Eine Leseseite soll wie eine Leseseite aussehen, nicht wie ein Rohtext
   ========================================================================== */

/* --- Sichtbarer Rueckweg --------------------------------------------------
   Mit Ziel im Text ("Zurueck zu Gaschurn"), nicht nur ein Pfeil: Man soll
   wissen, wo man landet, bevor man klickt.
*/
/*
   Die Hoehe stand auf 38 px - das faellt auf einem Zeigegeraet nicht auf,
   auf einem Telefon schon: Der Rueckweg ist oft das erste, was jemand
   sucht, und traf danebem. 44 px ist die Vorgabe seit Phase 2 (RC-1a).
*/
.backlink {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm); font-weight: 650;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.backlink:hover, .backlink:focus-visible {
  border-color: var(--brand-orange);
  color: var(--text);
  text-decoration: none;
  transform: translateX(-2px);
}
.backlink__arrow { font-size: var(--fs-base); line-height: 1; color: var(--orange-dark); }
@media (prefers-reduced-motion: reduce) {
  .backlink:hover, .backlink:focus-visible { transform: none; }
}

/* --- Quellenhinweis, klein ------------------------------------------------
   Eine Zeile statt eines Kastens. Aufgeklappt wird nur, wer will.
*/
.sourcehint {
  margin: var(--space-5) 0;
  max-width: 46rem;
}
.sourcehint__summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: var(--space-1) 0;
  list-style: none;
}
.sourcehint__summary::-webkit-details-marker { display: none; }
.sourcehint__summary:hover { color: var(--orange-dark); }
.sourcehint__icon {
  font-size: var(--fs-md);
  color: var(--orange-dark);
}
.sourcehint__label { border-bottom: 1px dotted var(--border-strong); }

.sourcehint__body {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-soft);
  border-left: 2px solid var(--border-strong);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.sourcehint__title { display: block; color: var(--text); margin-bottom: var(--space-2); }
.sourcehint__list { margin: 0; padding-left: var(--space-4); }
.sourcehint__list li { margin-bottom: var(--space-1); }

/* Nur fuer Vorlesesoftware */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Lesefenster ----------------------------------------------------------
   Der Text bekommt eine eigene Flaeche: heller Grund, feiner Rahmen, viel
   Luft. Dazu eine sehr blasse Bergsilhouette im Kopf - das einzige
   Schmuckelement, und es bleibt hinter dem Text.
*/
.reader {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-orange);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,21,49,.04), 0 12px 32px rgba(0,21,49,.07);
}
.reader--legend {
  border-top-color: var(--gold);
  background: linear-gradient(180deg, #FCFBF8 0%, var(--surface) 40%);
}

/* Der Inhalt liegt ueber der Silhouette - die Silhouette selbst ist von dieser
   Regel ausgenommen, sonst holt sie sich position:relative zurueck, steht im
   Textfluss und schiebt die Ueberschrift um ihre volle Hoehe nach unten. */
.reader > *:not(.reader__ridge) { position: relative; z-index: 1; }

.reader__ridge {
  position: absolute; top: 0; left: 0; right: 0;
  height: 120px; width: 100%;
  color: rgba(0,21,49,.035);
  pointer-events: none;
  z-index: 0;
}

.reader__head { margin-bottom: var(--space-6); }
.reader__lead { max-width: 44ch; }

.reader__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.reader__metaitem {
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.reader__metaitem--place { margin-left: auto; }

.reader__confidencenote {
  font-size: var(--fs-sm); color: var(--text-muted);
  margin: 0;
}

.reader__body { margin-top: var(--space-5); }
.reader__body p { max-width: 68ch; line-height: 1.75; }

/* --- Zustandsschild -------------------------------------------------------
   Kurz und farbig statt als Textblock. Die Erklaerung steht darunter.
*/
.statusbadge {
  display: inline-flex; align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-tiny); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent;
}
.statusbadge--confirmed { background: var(--forest-soft); color: var(--forest); border-color: var(--forest); }
.statusbadge--probable  { background: var(--enzian-soft); color: var(--enzian); border-color: var(--enzian); }
.statusbadge--disputed  { background: var(--gold-soft);   color: #7A5300;       border-color: var(--gold); }
.statusbadge--uncertain { background: var(--surface-soft);color: var(--text-muted); border-color: var(--border-strong); }
.statusbadge--legend    { background: var(--brand-navy);  color: var(--text-invert); border-color: var(--brand-navy); }

/* --- Quellen als Chips ----------------------------------------------------- */
.sourcechips {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.sourcechip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.sourcechip:hover { border-color: var(--brand-orange); background: var(--surface); text-decoration: none; }
.sourcechip--primary { border-color: var(--border-strong); background: var(--surface); }
.sourcechip__badge {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--brand-navy); color: var(--text-invert);
  padding: 2px var(--space-2);
}
.sourcechip__ext { color: var(--text-muted); font-size: var(--fs-xs); }

/* --- Kartenvorschau -------------------------------------------------------- */
.mappreview__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.maplink {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--orange-dark); text-decoration: none;
  white-space: nowrap;
}
.maplink:hover { text-decoration: underline; }

/* Kompakt: zeigt wo etwas liegt, ohne die Seite zu beherrschen.
   Zwei Klassen, damit die allgemeinen Kartenregeln in Abschnitt 15
   (.mapbox--live, .mapconsent) die kompakte Hoehe nicht wieder ueberschreiben. */
.mapbox.mapbox--compact { height: 260px; }
.mapconsent.mapconsent--compact { min-height: 260px; padding: var(--space-5) var(--space-4); }

@media (max-width: 620px) {
  .mapbox.mapbox--compact { height: 240px; }
  .mapconsent.mapconsent--compact { min-height: 220px; }
  .reader { padding: var(--space-5) var(--space-4); }
  .reader__metaitem--place { margin-left: 0; }
  .backlink { width: 100%; justify-content: center; }
}

/* ==========================================================================
   15. Karten

   Eine Karte je Detailseite, eine gemeinsame je Liste. Ohne Schluessel, ohne
   Einwilligung oder ohne Koordinaten steht hier ein Hinweis - die Seite bleibt
   in jedem Fall benutzbar.
   ========================================================================== */

.detail__map { margin: var(--space-6) 0; }

.mapbox--live {
  height: 380px;
  padding: 0;
  border: 1px solid var(--border-strong);
  overflow: hidden;
  display: block;
}
/* 520 px waren mehr als ein halber Telefonbildschirm — auf einer
   Ortsseite, wo die Karte einer von acht Abschnitten ist. 380 zeigen
   dasselbe Tal; wer mehr will, hat den Knopf „Karte gross". */
.mapbox--tall { height: 380px; }
.mapbox__frame { width: 100%; height: 100%; border: 0; display: block; }

.mapbox--empty {
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6) var(--space-4);
  height: auto;
  min-height: 140px;
}
/* Ohne Karte richtet sich der Hinweis nach seinem Inhalt - auch dann, wenn
   daneben die kompakte Hoehe gesetzt ist (zwei Klassen, siehe oben). */
.mapbox--empty.mapbox--compact { height: auto; }

.mapbox__note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}

/* --- Die grosse Streckendetailkarte (16.08.2026) ---------------------------

   Ein Knopf in der kleinen Karte oeffnet einen Dialog, in dem der echte
   Track frei erkundet werden kann. Der Knopf sitzt oben rechts IN der
   Kartenflaeche - nicht darueber: Dort ist er dort, wo man ihn sucht, und
   er nimmt der Karte keine Hoehe weg.

   `z-index: 500` liegt ueber den Kacheln (400) und unter den Popups (700)
   der Leaflet-Ebenen.
*/
.mapbox { position: relative; }

.mapbox__gross {
  position: absolute;
  inset-block-start: var(--space-2); inset-inline-end: var(--space-2);
  z-index: 500;
  display: inline-flex; align-items: center; gap: .4rem;
  /* 44px Mindestflaeche - der Knopf liegt auf einer Flaeche, auf der jede
     Fehlberuehrung die Karte verschiebt. */
  min-height: 44px; padding: .5rem .8rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
}
.mapbox__gross:hover { background: var(--surface-soft); }
.mapbox__grossicon { font-size: var(--fs-base); line-height: 1; }

.mapmodal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column;
  background: var(--surface);
}

/* Auf grossen Schirmen ein Fenster mit Rand, auf dem Telefon der ganze
   Bildschirm - dort zaehlt jeder Pixel Kartenflaeche. */
@media (min-width: 900px) {
  .mapmodal {
    inset: 2.5vh 2.5vw;
    width: 95vw; height: 95vh;
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    overflow: hidden;
  }
}

.mapmodal__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--border);
  background: var(--surface);
}
.mapmodal__titel { margin: 0; font-weight: 700; line-height: 1.25; }
.mapmodal__meta  { margin: .15rem 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

.mapmodal__zu {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .5rem .9rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; cursor: pointer;
  flex: none;
}
.mapmodal__zu:hover { background: var(--surface-soft); }

.mapmodal__karte { flex: 1; min-height: 0; background: var(--surface-soft); }

.mapmodal__fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-block-start: 1px solid var(--border);
  background: var(--surface);
  /* Auf dem Telefon liegt darunter die feste untere Navigation - ohne
     diesen Abstand verdeckt sie die Zeile samt Knopf. */
  padding-block-end: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}
.mapmodal__fuss .btn { min-height: 44px; }
.mapmodal__quelle { font-size: var(--fs-xs); color: var(--text-muted); }

/* ================== Warum die Seite dahinter NICHT gesperrt wird =========

   Zwei uebliche Wege wurden am 16.08.2026 gemessen und beide verwerfen die
   Leseposition, weil sie den Scrollbereich verkuerzen:

     position: fixed   Das Dokument verliert seine Hoehe. Beim Schliessen
                       klemmt der Browser die Rueckkehr - aus 1.199 px
                       wurden 149 px.
     overflow: hidden  Dasselbe schon beim Oeffnen.

   Der Dialog deckt den Bildschirm ohnehin fast vollstaendig ab, und
   `overscroll-behavior: contain` haelt das Scrollen in ihm. Wer die Karte
   schliesst, steht damit exakt dort, wo er gelesen hat - ohne dass
   irgendetwas wiederhergestellt werden muesste. */
.mapmodal { overscroll-behavior: contain; }

/* Start und Ziel tragen im Dialog ihren Namen: Zwei gleich aussehende
   Punkte an den Enden einer 24-km-Linie sagen nichts. */
.mapziel { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.mapziel__punkt {
  width: 14px; height: 14px; flex: none;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,21,49,.5);
}
.mapziel__text {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: .05rem .45rem;
  font-size: var(--fs-tiny); font-weight: 700;
}

@media (max-width: 480px) {
  .mapmodal__zutext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mapmodal__quelle { width: 100%; }
}

/* --- Einwilligung ---------------------------------------------------------
   Erst fragen, dann laden. Der Platzhalter ist so hoch wie die Karte, damit
   die Seite beim Laden nicht springt.
*/
.mapconsent {
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  padding: var(--space-6) var(--space-4);
}
.mapconsent__inner { max-width: 30rem; text-align: center; }
.mapconsent__title { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
.mapconsent__text { color: var(--text-muted); margin: 0 0 var(--space-4); font-size: var(--fs-md); }
.mapconsent__note { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--space-3) 0 0; }

/* --- Umschalter Liste/Karte ------------------------------------------------ */
.viewswitch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  margin-bottom: var(--space-4);
}
.viewswitch__btn {
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  background: var(--surface);
}
.viewswitch__btn + .viewswitch__btn { border-left: 1px solid var(--border-strong); }
.viewswitch__btn:hover { color: var(--orange-dark); text-decoration: none; }
.viewswitch__btn--active {
  background: var(--brand-navy);
  color: var(--text-invert);
}
.viewswitch__btn--active:hover { color: var(--text-invert); }

/* --- Sprechblase am Marker ------------------------------------------------- */
/* Liste unter der Karte - etwas Luft dazwischen. */
.grid--after-map { margin-top: var(--space-6); }

.mappop { min-width: 170px; font-family: inherit; }
.mappop__title { display: block; font-size: var(--fs-base); margin-bottom: 2px; color: var(--brand-navy); }
.mappop__place { display: block; font-size: var(--fs-xs); color: #5F6874; }
.mappop__meta  { display: block; font-size: var(--fs-xs); color: #5F6874; margin: 4px 0 8px; }
.mappop__link  { font-size: var(--fs-xs); font-weight: 700; color: #A85400; text-decoration: none; }
.mappop__link:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .mapbox--live { height: 340px; }
  .mapbox--tall { height: 400px; }
  .mapconsent { min-height: 300px; }
  .viewswitch { width: 100%; }
  .viewswitch__btn { flex: 1; text-align: center; }
}

/* --------------------------------------------------------------- Maskottchen
   Der Fengga steht rechts im Hero und ist vollstaendig zu sehen: ein kleiner
   Abstand zur rechten Kante, damit ihn der abgerundete Rand nicht anschneidet.
   Der Hoehe nach fuellt er den Kasten aus - er steht im Hero, nicht daneben.

   --hero-mascot-w ist der Streifen, der ihm gehoert. Aus derselben Variablen
   berechnet sich der Abstand des Inhalts, damit beides nie auseinanderlaeuft.
*/
/*
   Schmaler seit dem 06.09.2026, auf Hinweis des Betreibers.

   Bei 340 px gehoerte dem Fengga ein Viertel des Hero, und der Inhalt
   musste ihm ausweichen - der Text links wurde schmal, die Spalte rechts
   lang. Er ist das Maskottchen der Seite, nicht ihr Hauptdarsteller.
*/
.hero { --hero-mascot-w: clamp(150px, 15vw, 215px); --hero-mascot-gap: clamp(.75rem, 1.4vw, 1.5rem); }

.hero__mascot {
  position: absolute;
  right: var(--hero-mascot-gap);
  bottom: 0;
  z-index: 1;
  /*
     Volle Hoehe des Hero. object-fit haelt die Figur unverzerrt: Wird der
     Kasten sehr hoch, begrenzt die Breite des Streifens - dann steht sie
     unten buendig statt in den Text zu wachsen.
  */
  height: 100%;
  width: var(--hero-mascot-w);
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  user-select: none;
}

/*
   Der Inhalt bekommt rechts Platz freigehalten, damit die Figur weder den
   Text noch die Zahlen beruehrt. Ohne diesen Abstand stuende sie mitten in
   "Veranstaltungen heute".
*/
@media (min-width: 1101px) {
  .hero__inner {
    padding-right: calc(var(--hero-mascot-w) + var(--hero-mascot-gap) + var(--space-3));
  }
}

/*
   Ab hier wuerde er den Inhalt der rechten Spalte beruehren - dann lieber weg.
   Ein Maskottchen, das Zahlen verdeckt, ist kein Gewinn.
*/
@media (max-width: 1100px) {
  .hero__mascot { display: none; }
}

/* ==========================================================================
   17. Community (Phase 6)

   Beitraege sind unterschiedlich lang - deshalb eine Liste und kein Raster.
   Der Mensch steht zuerst, dann der Text. Reaktionszahlen bekommen bewusst
   kein Gewicht (Masterplan 30.4): Regionalitaet zaehlt, nicht Reichweite.
   ========================================================================== */

.community__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-5) 0;
}

.postlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }

.postcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  padding: var(--space-4) var(--space-5);
}
.postcard:hover { border-left-color: var(--brand-orange); }

/* Die Art des Beitrags faerbt nur die Kante - kein Regenbogen aus Kaesten. */
.postcard--question     { border-left-color: var(--enzian); }
.postcard--tip          { border-left-color: var(--forest); }
.postcard--local_update { border-left-color: var(--gold); }

.postcard__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }

.postcard__avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-navy); color: var(--text-invert);
  font-weight: 700; font-size: var(--fs-base);
  border-radius: var(--radius-pill);
}

.postcard__who { display: grid; gap: 2px; min-width: 0; }
.postcard__author { font-weight: 700; color: var(--text); text-decoration: none; }
.postcard__author:hover { text-decoration: underline; }

.postcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.postcard__meta a { color: var(--text-muted); }
.postcard__type { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--fs-tiny); }

.postcard__title { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.postcard__title a { color: var(--text); text-decoration: none; }
.postcard__title a:hover { text-decoration: underline; }

.postcard__text { margin: 0; color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
.postcard__more { margin: var(--space-3) 0 0; font-size: var(--fs-sm); font-weight: 650; }
.postcard__more a { color: var(--orange-dark); text-decoration: none; }
.postcard__more a:hover { text-decoration: underline; }

/* --- Einzelseite ---------------------------------------------------------- */

.reader--post { border-top-color: var(--enzian); }
.reader__author { font-weight: 700; color: var(--text); text-decoration: none; }
.reader__author:hover { text-decoration: underline; }
.reader--post .reader__meta { gap: var(--space-2) var(--space-3); }

.postactions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: var(--space-5) 0 0;
}
.postactions__form { margin: 0; }

/* Ehrlicher Hinweis statt eines Knopfes, der noch nichts tut. */
.post__soon {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* --- Profil --------------------------------------------------------------- */

.profile { display: flex; align-items: flex-start; gap: var(--space-4); margin: var(--space-5) 0 0; }

.profile__avatar {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-navy); color: var(--text-invert);
  font-weight: 750; font-size: 1.9rem;
  border-radius: var(--radius-pill);
}

.profile__body { min-width: 0; }
.profile__name { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: 0; line-height: 1.1; }
.profile__handle { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-md); }
.profile__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted);
}
.profile__bio { margin: var(--space-3) 0 0; max-width: 44rem; }

/* --- Beitragsformular ------------------------------------------------------ */

.field textarea {
  width: 100%;
  min-height: 160px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit; line-height: 1.6;
  resize: vertical;
}
.field textarea:focus { border-color: var(--brand-navy); }
.field--error textarea { border-color: var(--danger); }

.field--choices { border: 0; margin: 0; padding: 0; }
.field--choices legend {
  padding: 0; margin: 0 0 var(--space-2);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.choice {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.choice + .choice { margin-top: -1px; }
.choice:hover { border-color: var(--brand-orange); }
.choice input { width: 20px; height: 20px; flex: 0 0 auto; }

.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.form__note { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }

@media (max-width: 620px) {
  .postcard { padding: var(--space-4); }
  .profile__avatar { width: 56px; height: 56px; font-size: 1.5rem; }
  .form__actions .btn { width: 100%; }
  .community__actions .btn { width: 100%; }

  /*
     Vierzehn Ortsnamen ergeben umgebrochen fünf Zeilen - die Beiträge stünden
     dann erst weit unten. Schmal laufen sie deshalb in einer Zeile weiter;
     der angeschnittene Chip am rechten Rand zeigt, dass es weitergeht.
     Auf breiten Geräten bleibt es beim Umbruch.
  */
  .filterbar--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filterbar--scroll::-webkit-scrollbar { display: none; }
  .filterbar--scroll .filterchip { flex: 0 0 auto; }
}

/* ==========================================================================
   18. Community-Interaktion (Phase 6b)

   Reagieren, merken, folgen und kommentieren sehen bewusst gleich aus: Es
   sind alles leise Handlungen, keine Werbeflaechen. Zahlen stehen klein
   daneben, nie als Trophaee (Masterplan 30.4).
   ========================================================================== */

.reactbar {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-5) 0 0;
  align-items: center;
}
.reactbar form { margin: 0; }
.reactbar__hint { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

.reactbtn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 650;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.reactbtn:hover { border-color: var(--brand-orange); }
.reactbtn--active {
  border-color: var(--brand-navy);
  background: var(--brand-navy);
  color: var(--text-invert);
}
.reactbtn__count { font-size: var(--fs-xs); opacity: .8; }

/* Ein Knopf, der wie ein Link aussieht - fuer Nebenhandlungen im Text */
.linkbtn {
  border: 0; background: none; padding: 0;
  color: var(--orange-dark);
  font: inherit; font-size: var(--fs-xs); font-weight: 650;
  cursor: pointer; text-decoration: none;
  min-height: 44px;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn--quiet { color: var(--text-muted); font-weight: 500; }

/* --- Bilder am Beitrag ---------------------------------------------------- */

.postmedia { margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.postmedia--grid { grid-template-columns: repeat(2, 1fr); }
.postmedia__item { margin: 0; }
.postmedia__item img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}
.postmedia__credit {
  margin-top: var(--space-1);
  font-size: var(--fs-tiny); color: var(--text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
}
.postmedia__delete { margin: 0; }

.mediaform {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  display: grid; gap: var(--space-3);
}
.field input[type="file"] {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font: inherit; font-size: var(--fs-sm);
}

/* --- Kommentare ----------------------------------------------------------- */

.comments { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.comments--replies {
  margin: var(--space-3) 0 0 var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border);
  gap: var(--space-3);
}
.comments__empty { color: var(--text-muted); font-size: var(--fs-md); margin: var(--space-4) 0 0; }

.comment { background: var(--surface); border: 1px solid var(--border); padding: var(--space-4); }
.comment--reply { background: var(--surface-soft); }
.comment--removed { border-style: dashed; background: transparent; }
.comment__removed { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; }

.comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.comment__avatar {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-navy); color: var(--text-invert);
  font-size: var(--fs-xs); font-weight: 700;
  border-radius: var(--radius-pill);
}
.comment__author { font-weight: 700; color: var(--text); text-decoration: none; font-size: var(--fs-md); }
.comment__author:hover { text-decoration: underline; }
.comment__time { font-size: var(--fs-xs); color: var(--text-muted); }
.comment__text { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

.comment__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-2);
}
.comment__actions form { margin: 0; }
.comment__actions .reactbtn { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); }

.comment__form { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
/* `display: grid` schlaegt sonst das eingebaute [hidden] { display: none } -
   Antwort- und Bearbeitungsfelder stuenden dann alle offen. */
.comment__form[hidden] { display: none; }
.comment__form textarea {
  width: 100%; min-height: 90px;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font: inherit; line-height: 1.6;
  resize: vertical;
}
.comment__formactions { display: flex; gap: var(--space-3); }
.btn--small { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); min-height: 40px; }

/* --- Gefolgt -------------------------------------------------------------- */

.followform { margin: var(--space-4) 0 0; }

.followlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border);
              border: 1px solid var(--border); }
.followlist__item {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}
.followlist__item a { font-weight: 650; color: var(--text); text-decoration: none; }
.followlist__item a:hover { text-decoration: underline; }
.followlist__type {
  font-size: var(--fs-tiny); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.followlist__item form { margin-left: auto; }

@media (max-width: 620px) {
  .postmedia--grid { grid-template-columns: 1fr; }
  .comments--replies { margin-left: var(--space-3); padding-left: var(--space-3); }
  .reactbar { gap: var(--space-2); }
  .reactbtn { flex: 1 1 auto; justify-content: center; }
  .followlist__item form { margin-left: 0; width: 100%; }
}

/* Vorschaubild in Listen - bewusst begrenzt hoch, damit ein Hochformat die
   Karte nicht auseinanderzieht. */
.postcard__preview { display: block; margin: var(--space-3) 0 0; }
.postcard__preview img {
  display: block; width: 100%; height: auto;
  max-height: 280px; object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

/* ==========================================================================
   19. Eigene Karte (Leaflet + OpenStreetMap)

   Sie tritt an, wenn kein Google-Schluessel hinterlegt ist. Ein Besucher
   soll sehen, wo eine Tour liegt - und nicht lesen, dass etwas nicht
   geladen werden konnte.
   ========================================================================== */

.mapbox--osm {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  height: 260px;
}
@media (max-width: 620px) {
  .mapbox--osm { height: 240px; }
}

/* Kompakt und hoch gelten auch hier - zwei Klassen, damit die allgemeinen
   Regeln sie nicht ueberschreiben (siehe Abschnitt 15). */
.mapbox.mapbox--osm.mapbox--tall { height: 380px; }
@media (max-width: 620px) {
  .mapbox.mapbox--osm.mapbox--tall { height: 400px; }
}

/* Leaflet setzt eigene Schriftgroessen - hier auf Munta zurueckgeholt. */
.mapbox--osm .leaflet-container {
  font: inherit;
  background: var(--surface-soft);
}
.mapbox--osm .leaflet-control-attribution {
  font-size: var(--fs-micro);
  background: rgba(255,255,255,.86);
  color: var(--text-muted);
}
.mapbox--osm .leaflet-control-attribution a { color: var(--orange-dark); }

/* Eckiger Marker statt der Standardnadel - passt zum uebrigen Design. */
.mapmarker { background: none; border: 0; }
.mapmarker__dot {
  display: block; width: 16px; height: 16px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,21,49,.35);
}

.mapbox--fehler { display: flex; align-items: center; justify-content: center; }

/* Karte mit echtem Streckenverlauf bekommt mehr Hoehe: Bei einer Bergtour
   ist der Verlauf wichtiger als eine besonders kleine Kartenflaeche. */
.mapbox.mapbox--osm.mapbox--track { height: 340px; }
@media (max-width: 620px) {
  .mapbox.mapbox--osm.mapbox--track { height: 320px; }
}

.mapbox__note--track {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-2) var(--space-4);
  font-weight: 650; color: var(--text);
}
.mapsource { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.mapsource__license {
  margin-left: var(--space-1);
  padding: .1rem .35rem;
  border: 1px solid var(--border);
  font-size: var(--fs-micro);
}

/* ==========================================================================
   18. Community-Touren und Routenplaner (Phase 5.2b)

   Drei Dinge brauchen hier eine eigene Gestalt:
   - die Auswahl (Tourart, Weg zur Strecke) - grosse Flaechen statt Radiolisten
   - der Planer selbst - Karte, Punkte, Kennzahlen, zwei klare Knoepfe
   - die Kennzeichnung - COMMUNITY darf nie wie OFFIZIELL aussehen
   ========================================================================== */

/* --- Auswahl: Tourart und Weg --------------------------------------------- */

.wahlliste { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }

.wahl {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--space-4);
  min-height: 64px;
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.wahl:hover { border-color: var(--brand-orange); text-decoration: none; }
.wahl__titel  { font-weight: 700; font-size: var(--fs-base); }
.wahl__hinweis {
  grid-column: 1; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45;
}
.wahl__pfeil {
  grid-column: 2; grid-row: 1 / span 2;
  font-size: var(--fs-xl); color: var(--brand-orange);
}
.wahl--primary { border-color: var(--brand-navy); border-left-width: 4px; }

/* --- Routenplaner ---------------------------------------------------------- */

.planer { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; }

.planer__modes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.planer__modes .btn { flex: 0 1 auto; }

.planer__hint {
  margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5;
  max-width: 46rem;
}

.mapbox.mapbox--planer { height: 460px; }
@media (max-width: 620px) { .mapbox.mapbox--planer { height: 360px; } }

/* Gesetzte Punkte: verschieben, entfernen, umsortieren */
.planer__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.planer__punkt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.planer__punkt + .planer__punkt { margin-top: -1px; }
.planer__punkt-name { min-width: 0; overflow-wrap: anywhere; }
.planer__punkt-actions { display: flex; gap: var(--space-1); flex: 0 0 auto; }
.planer__punkt-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: var(--fs-md); line-height: 1;
  cursor: pointer;
}
.planer__punkt-btn:hover { border-color: var(--brand-orange); color: var(--orange-dark); }

.planer__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }

/* Ergebnis: Kennzahlen und die beiden Knoepfe */
.planer__ergebnis {
  display: grid; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--brand-navy);
  border-left-width: 4px;
  background: var(--surface);
}
.planer__ergebnis[hidden] { display: none; }

.planer__zahlen {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 0;
}
.planer__zahl { font-size: var(--fs-sm); color: var(--text-muted); }
.planer__zahl strong {
  display: block; font-size: 1.35rem; color: var(--text); line-height: 1.15;
}

.planer__uebernehmen { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.planer__note { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

/* Kein Fehlerbildschirm - ein Satz und drei Auswege */
.planer__problem {
  padding: var(--space-4);
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
  color: #6B4A00;
}
.planer__problem[hidden] { display: none; }
.planer__problem-text { margin: 0 0 var(--space-3); font-weight: 650; }
.planer__problem-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

@media (max-width: 620px) {
  .planer__modes .btn,
  .planer__actions .btn,
  .planer__uebernehmen .btn,
  .planer__problem-actions .btn { width: 100%; }
}

/* --- Formularteile, die es bisher nicht gab -------------------------------- */

.radiorow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.radiocol { display: grid; gap: 0; }

.radiochip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: var(--fs-md); font-weight: 500;
  text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.radiochip:hover { border-color: var(--brand-orange); }
.radiochip input { width: 20px; height: 20px; accent-color: var(--orange); }
.radiochip:has(input:checked) { border-color: var(--brand-navy); border-width: 2px; }

.checkrow {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: 44px; padding: var(--space-2) 0;
  font-size: var(--fs-md); font-weight: 400;
  text-transform: none; letter-spacing: 0; line-height: 1.45;
  cursor: pointer;
}
.checkrow input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); }
.radiocol .checkrow { padding: var(--space-3); border: 1px solid var(--border); }
.radiocol .checkrow + .checkrow { margin-top: -1px; }

.field__label {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

.hinweiszeile {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5;
  max-width: 46rem;
}

.form--danger { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }

.mediagrid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin: var(--space-2) 0 0;
}
.mediagrid__item { margin: 0; }
.mediagrid__item img { width: 100%; height: auto; display: block; border: 1px solid var(--border); }

/* --- Kennzeichnung: offiziell oder Community ------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .5rem;
  font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor;
  white-space: nowrap;
  vertical-align: middle;
}
/* Community traegt Navy - sichtbar, aber ohne Signalwirkung. */
.badge--community { color: var(--brand-navy); background: transparent; }
/* Offiziell traegt die Fuellung: Es ist der geprueftere Zustand. */
.badge--official {
  color: var(--text-invert); background: var(--brand-navy); border-color: var(--brand-navy);
}
.badge--draft { color: var(--orange-dark); border-color: var(--orange-dark); }

.tourorigin {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--brand-navy);
  background: var(--surface-soft);
  font-size: var(--fs-sm); line-height: 1.5;
}
.tourorigin strong { display: block; }
.tourorigin__by { color: var(--text-muted); }

/* Community-Marker: derselbe Punkt, aber mit Navy-Ring. Die Farbe des Punktes
   sagt weiter, welche Tourart es ist - der Ring sagt, woher sie stammt. */
.mapmarker--community .mapmarker__dot {
  border-color: var(--brand-navy);
  outline: 2px solid #FFFFFF;
  outline-offset: 0;
}

.mappop__badge {
  display: inline-block; margin: 2px 0;
  padding: .1rem .35rem;
  border: 1px solid var(--brand-navy);
  color: var(--brand-navy);
  font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}

/* --- Eingang der Moderation ------------------------------------------------ */

.inbox { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.inbox__item {
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  display: grid; gap: var(--space-2);
}
.inbox__title { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.inbox__note { margin: 0; font-size: var(--fs-md); color: var(--text-muted); }
.inbox__snapshot summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 650; }
.inbox__snapshot p { margin: var(--space-2) 0 0; font-size: var(--fs-sm); line-height: 1.55; }
.inbox__form { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; }
.inbox__form .field__input {
  width: 100%; min-height: 44px;
  padding: .6rem .8rem;
  border: 1px solid var(--border-strong);
  background: var(--surface); font: inherit;
}
.inbox__form .postactions { margin-top: var(--space-2); }

.mediaactions {
  display: grid; gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border);
}
.mediaactions form { margin: 0; }
.mediaactions .field__label { margin: 0 0 var(--space-1); color: var(--text-muted); }

/* ==========================================================================
   19. Munta Social (Phase 6d.1)

   Ein Feed, der lebendig wirkt, ohne die Muster zu kopieren, die anderswo
   suechtig machen sollen:
   - Karten mit Mensch, Ort, Zeit und grossem Bild
   - Reagieren direkt an der Karte
   - KEINE endlose Scrollflaeche, keine Streaks, keine Rangliste
   ========================================================================== */

.feed { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-5); }

.feedcard {
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid; gap: var(--space-3);
  padding: var(--space-4);
}

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

.feedcard__avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-navy); color: var(--text-invert);
  font-size: var(--fs-base); font-weight: 700;
  text-decoration: none;
}
.feedcard__avatar:hover { text-decoration: none; }

.feedcard__who { min-width: 0; flex: 1 1 auto; }
.feedcard__author {
  display: block;
  font-weight: 700; font-size: var(--fs-base); color: var(--text); text-decoration: none;
  overflow-wrap: anywhere;
}
.feedcard__author:hover { text-decoration: underline; }
.feedcard__meta {
  margin: 1px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.feedcard__meta a { color: inherit; }
.feedcard__type { font-weight: 650; color: var(--orange-dark); }

.feedcard__title { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.feedcard__title a { color: var(--text); text-decoration: none; }
.feedcard__title a:hover { text-decoration: underline; }

/* Das Bild traegt die Karte - deshalb volle Breite, nicht als Miniatur. */
.feedcard__image {
  position: relative; display: block;
  margin: 0 calc(var(--space-4) * -1);
  background: var(--surface-soft);
}
.feedcard__image img {
  display: block; width: 100%; height: auto;
  /* Ein Bild darf die Karte tragen, aber nicht den ganzen Bildschirm
     belegen - sonst sieht man nie zwei Beitraege zugleich. */
  max-height: min(520px, 70vh); object-fit: cover;
}
.feedcard__count {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  padding: .2rem .5rem;
  background: var(--brand-navy); color: var(--text-invert);
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.feedcard__text { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.feedcard__more { margin: 0; font-size: var(--fs-sm); }

.feedcard__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.feedcard__actions form { margin: 0; }

.feedaction {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .4rem .7rem;
  border: 1px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 650;
  text-decoration: none; cursor: pointer;
}
.feedaction:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.feedaction--static { cursor: default; }
.feedaction--static:hover { border-color: transparent; color: var(--text-muted); }
.feedaction--quiet { margin-left: auto; }

/* "Gefaellt mir" gesetzt: Orange als Textfarbe, nicht als Flaeche - auf
   Orange braeuchte es Navy-Schrift, und ein knallbunter Knopf pro Karte
   waere genau die Reizwand, die hier vermieden wird. */
.feedaction--on { color: var(--orange-dark); border-color: var(--brand-orange); }
.feedaction--on .feedaction__icon { fill: rgba(254,138,0,.18); }

.feedaction__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.feedaction__count { font-variant-numeric: tabular-nums; }

.feednote {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
}

@media (max-width: 620px) {
  .feedcard { padding: var(--space-3); }
  .feedcard__image { margin: 0 calc(var(--space-3) * -1); }
  .feedaction__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .feedaction { padding: .4rem .55rem; }
}

/* --- Munta Momente --------------------------------------------------------- */

.momente {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.momente--kompakt { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-top: 0; }

.momente__item { margin: 0; }
.momente__link {
  position: relative; display: block;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  text-decoration: none;
}
.momente__link:hover { border-color: var(--brand-orange); text-decoration: none; }

.momente__bild {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.momente__info {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
  padding: var(--space-3) var(--space-3) var(--space-2);
  /* Farbverlauf statt voller Flaeche: Das Bild bleibt Hauptsache. */
  background: linear-gradient(to top, rgba(0,21,49,.82), rgba(0,21,49,0));
  color: #FFFFFF;
}
.momente__wer { font-size: var(--fs-sm); font-weight: 700; }
.momente__ort { font-size: var(--fs-tiny); opacity: .85; }

/* --- Sichtbarkeit beim Posten ---------------------------------------------- */

.visibility { display: grid; gap: 0; }

.visibility__option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 400; text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.visibility__option + .visibility__option { margin-top: -1px; }
.visibility__option:hover { border-color: var(--brand-orange); }
.visibility__option:has(input:checked) {
  border-color: var(--brand-navy); border-width: 2px; background: var(--surface-soft);
}
.visibility__option input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); }

.visibility__body { display: grid; gap: 2px; min-width: 0; }
.visibility__label { font-weight: 700; font-size: var(--fs-md); }
.visibility__text { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }

/* Der Satz unter der Rechtebestaetigung. Er steht bewusst nicht klein und
   grau ganz unten, sondern direkt an der Zusage. */
.rightsnote {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  border-left: 3px solid var(--border-strong);
  background: var(--surface-soft);
  font-size: var(--fs-xs); line-height: 1.55; color: var(--text);
}


/* Filterleiste und Feed gehoeren zusammen: Der Abstand dazwischen war so
   gross, dass die erste Karte unter der Falz verschwand. */
.section--tight + .section--tight .feed { margin-top: 0; }
.section--tight:has(> .wrap > .feed) { padding-top: 0; }

/* --------------------------------------------------------------------------
   Beschriftungen, die SAETZE sind, keine Feldnamen.

   `.field label` setzt Versalien und Sperrung - richtig fuer "Ort" oder
   "Titel", falsch fuer einen ganzen Satz wie "Nur wer dir folgt, sieht
   diesen Beitrag". In Versalien liest sich das wie ein Schild, nicht wie
   eine Erklaerung.

   Gefunden bei der Sichtpruefung von Phase 6d.1 - betrifft auch die
   Bestaetigungen aus 5.2b, deshalb steht die Regel hier zentral.
   -------------------------------------------------------------------------- */
.field label.visibility__option,
.field label.checkrow,
.field label.radiochip,
.field label.choice,
.visibility__option, .visibility__option *,
.checkrow, .checkrow *,
.radiochip, .radiochip * {
  text-transform: none;
  letter-spacing: 0;
}
.field label.visibility__option .visibility__label { font-weight: 700; }
.field label.visibility__option .visibility__text { font-weight: 400; }

/* Der Hinweis auf den groesseren Personenkreis (Phase 6d.1a). Er soll auffallen,
   ohne zu erschrecken - Warnfarbe als Kante, nicht als Flaeche. */
.rightsnote--warn {
  border-left-color: var(--warning);
  background: var(--warning-soft);
  color: #6B4A00;
  font-weight: 600;
}
[data-visibility-warning][hidden] { display: none; }

/* --- Videos (Phase 6d.2) ---------------------------------------------------

   Die Gestaltung sagt: „Hier ist ein Video, tipp drauf" - und nicht: „Hier
   laeuft schon etwas, schau zu". Kein Autoplay, kein Ton, keine Endlosflaeche.
*/

.postvideo {
  display: block; width: 100%; height: auto;
  max-height: 70vh;
  background: var(--brand-navy);
  border: 1px solid var(--border);
}

/* Der Abspielknopf auf dem Posterbild im Feed. */
.feedcard__image--video { position: relative; }

.playbadge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  pointer-events: none;
}
.playbadge__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: rgba(0,21,49,.78);
  color: #FFFFFF;
  font-size: 1.4rem; line-height: 1;
  padding-left: 4px;   /* das Dreieck wirkt sonst aus der Mitte gerueckt */
}
.playbadge__time {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  padding: .2rem .5rem;
  background: rgba(0,21,49,.85); color: #FFFFFF;
  font-size: var(--fs-tiny); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

/* Fuer Text, der nur Screenreadern gilt. */
.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;
}

/* --- Flohmaerkte (Phase 4d) ------------------------------------------------
   Datum zuerst, dann was und wo. Wer einen Flohmarkt sucht, fragt nach dem
   naechsten Termin - nicht nach einer Kategorie.
*/

.marktliste { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }

.marktkarte { margin: 0; }
.marktkarte__link {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text); text-decoration: none;
}
.marktkarte__link:hover { border-color: var(--brand-orange); text-decoration: none; }

.marktkarte__body { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }

.marktkarte__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.marktkarte__tag { font-weight: 700; color: var(--text); }
.marktkarte__zeit { font-variant-numeric: tabular-nums; }

.marktkarte__titel { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }

.marktkarte__meta {
  display: flex; flex-wrap: wrap; gap: .35rem;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.marktkarte__preis { margin-top: 2px; }

@media (max-width: 620px) {
  .marktkarte__link { gap: var(--space-3); padding: var(--space-3); }
  .marktkarte__titel { font-size: var(--fs-base); }
}

/* --- Termin eintragen (Phase 4d) ------------------------------------------- */

/*
   Die Eingabefelder für Datum, Uhrzeit und Adresse waren bisher nicht
   aufgeführt und liefen deshalb ungestylt mit - auf dem Handy mit
   Systemschrift und 30 px Höhe. Sie gehören zur selben Aufzählung wie Text
   und Auswahl.
*/
.field input[type="date"],
.field input[type="time"],
.field input[type="url"],
.field input[type="number"] {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  min-height: 48px;
  transition: border-color .15s ease;
}
.field--error input[type="date"],
.field--error input[type="time"],
.field--error input[type="url"] { border-color: var(--danger); }

/* Abschnitte im Formular: „Wann?", „Wo?", „Was?" */
.fieldgroup {
  border: 0; margin: 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  display: grid; gap: var(--space-4);
}
.fieldgroup__legend {
  padding: 0; margin: 0;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}

/*
   Datum, Beginn und Ende stehen nebeneinander, solange Platz ist. Auf dem
   Handy untereinander - drei Felder à 48 px nebeneinander wären auf 390 px
   Breite unbedienbar.
*/
.detail__herkunft {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.fieldrow { display: grid; gap: var(--space-3); }
@media (min-width: 560px) {
  .fieldrow { grid-template-columns: 1.4fr 1fr 1fr; align-items: end; }
}

/* --- Datenzustand, Admin (Phase 4d) ---------------------------------------- */

/*
   Die Ampel trägt Farbe UND Wort. Wer Rot und Grün nicht unterscheidet, liest
   „Störung" - deshalb steht der Text nie nur im title-Attribut.
*/
.ampel {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: var(--fs-xs); font-weight: 650; white-space: nowrap;
}
.ampel--gruen { border-color: #1f7a3f; color: #14532d; background: #eaf6ee; }
.ampel--gelb  { border-color: #a1701a; color: #7a4f04; background: #fdf3e0; }
.ampel--rot   { border-color: #a32020; color: #7f1d1d; background: #fceeee; }
.ampel--grau  { border-color: var(--border-strong); color: var(--text-muted); background: var(--surface-alt, transparent); }

.kennzahlen {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin: var(--space-4) 0 0;
}
.kennzahl {
  display: grid; gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.kennzahl__wert  { font-size: 1.7rem; font-weight: 750; line-height: 1.1; }
.kennzahl__label { font-size: var(--fs-xs); font-weight: 650; }
.kennzahl__hint  { font-size: var(--fs-tiny); color: var(--text-muted); }

.quellenliste { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.quelle {
  padding: var(--space-4);
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-sm); background: var(--surface);
  display: grid; gap: var(--space-2);
}
.quelle--gruen { border-left-color: #1f7a3f; }
.quelle--gelb  { border-left-color: #a1701a; }
.quelle--rot   { border-left-color: #a32020; }
.quelle--grau  { border-left-color: var(--border-strong); }

.quelle__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.quelle__name { font-size: var(--fs-base); }
.quelle__key  { font-size: var(--fs-xs); color: var(--text-muted); font-family: ui-monospace, monospace; }
.quelle__befund { margin: 0; font-size: var(--fs-md); }

.quelle__daten {
  display: grid; gap: var(--space-2) var(--space-4); margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.quelle__daten dt { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.quelle__daten dd { margin: 0; font-size: var(--fs-sm); }
.quelle__aktion { margin: 0; }

/* Breite Tabellen scrollen in sich, nie die Seite. */
.tabelle-rahmen { overflow-x: auto; margin: var(--space-4) 0 0; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabelle th, .tabelle td {
  padding: var(--space-2) var(--space-3);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tabelle th { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.tabelle__sub { display: block; font-size: var(--fs-tiny); color: var(--text-muted); }
.tabelle__fehler { color: var(--danger); white-space: normal; }
.tabelle__notiz td { white-space: normal; font-size: var(--fs-xs); color: var(--text-muted); }

.marktpruefliste { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.marktzeile {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.marktzeile__text  { display: grid; gap: 2px; min-width: 12rem; flex: 1 1 20rem; }
.marktzeile__titel { font-weight: 650; }
.marktzeile__meta  { font-size: var(--fs-xs); color: var(--text-muted); }
.marktzeile__form  { display: flex; gap: var(--space-2); align-items: center; }
/*
   Dieses Auswahlfeld steht außerhalb eines .field-Blocks (es sitzt direkt in
   der Zeile), deshalb bekommt es seinen Rahmen hier selbst - die Regeln unter
   `.field select` greifen dort nicht.
*/
.field__input--klein {
  min-height: 40px; width: auto;
  padding: .4rem .6rem; font-size: var(--fs-sm);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-family: inherit;
}


/* ==========================================================================
   21. Schutzkern — Melden und Blockieren (Phase 8.0)

   Diese Seiten sind die einzigen auf Munta, auf denen jemand steht, weil
   ihm etwas unangenehm ist. Sie sind deshalb bewusst ruhig gehalten:
   kein Rot, kein Ausrufezeichen, keine Dramatik. Wer meldet, soll nicht
   das Gefuehl haben, gerade eine Anzeige zu erstatten - und wer blockiert,
   soll nicht angehalten werden, es sich nochmal zu ueberlegen.

   Der Hinweiskasten traegt eine linke Kante in Navy statt einer Warnfarbe:
   Es ist eine Auskunft, keine Warnung.
   ========================================================================== */

.schutzhinweis {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-navy);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.schutzhinweis__titel {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}

.schutzhinweis__liste { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-2); }
.schutzhinweis__liste li { font-size: var(--fs-md); line-height: 1.5; }

/*
   Symbol im Knopf. `flex: 0 0 auto` verhindert, dass das Symbol schmaler
   gequetscht wird, wenn die Beschriftung auf schmalen Geraeten umbricht -
   ohne die Regel wird aus dem Verbotskreis ein Ei.
*/
.btn__icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; }

/*
   Die Schutzaktionen an Profil, Beitrag und Kommentar.

   Sie stehen bewusst NICHT als gleichwertige Knoepfe neben „Folgen" oder
   „Nachricht": Melden und Blockieren sind seltene Handlungen. Als leise
   Textlinks sind sie da, wenn man sie sucht, und draengen sich sonst nicht
   auf. Die Klickflaeche bleibt trotzdem bei 44px.
*/
.schutzaktionen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
}

.schutzaktion {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
}
.schutzaktion:hover { color: var(--text); text-decoration: underline; }
.schutzaktion svg { width: 16px; height: 16px; flex: 0 0 auto; }

/*
   Meldungsdetail der Moderation (Phase 8.0).

   Der gesicherte Text steht in einem eigenen Rahmen, damit auf einen Blick
   klar ist: Das ist fremdes Material, kein Text dieser Seite. Der gemeldete
   Beitrag im Umfeld bekommt eine orange Kante - ohne sie liest sich ein
   Gespraechsausschnitt wie ein durchgehender Verlauf, und die Moderation
   muesste raten, worum es eigentlich geht.
*/
.inbox__snapshot-text {
  padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); white-space: normal;
}

.kontextliste { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.kontextliste__item {
  padding: var(--space-3);
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
}
.kontextliste__item--gemeldet { border-left-color: var(--brand-orange); }
.kontextliste__kopf {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-tiny); color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.kontextliste__text { margin: 0; font-size: var(--fs-md); }

.zugriffsliste { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.zugriffsliste li {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline;
  font-size: var(--fs-sm);
}


/* ==========================================================================
   22. Messenger — ausgelagert (Phase 8a.1)

   Die Regeln stehen jetzt in `messenger.css` und werden nur auf den
   Messengerseiten geladen. Siehe dort.
   ========================================================================== */

/* ==========================================================================
   23. Wettervorschau im Hero (15.08.2026)

   Drei Kacheln, sehr kompakt. Sie sitzen unter dem Datum, also auf der
   dunklen Hero-Flaeche - deshalb helle Schrift und eine leichte
   Aufhellung als Grund statt eines Rahmens.

   Bewusst KEIN Diagramm und keine Stundenwerte: Die eine Frage, die man
   beim Blick auf die Startseite hat, ist „muss ich morgen die Jacke
   mitnehmen".
   ========================================================================== */

.vorschau { margin-top: var(--space-4); }

.vorschau__titel {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-tiny); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255, 255, 255, .62);
}

.vorschau__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  max-width: 26rem;
}

.vorschau__tag {
  display: grid; gap: 2px; justify-items: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .07);
  text-align: center;
}

/* Heute traegt eine orange Kante - der Tag, der jetzt gilt. */
.vorschau__tag--heute {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 -2px 0 var(--brand-orange);
}

.vorschau__name {
  font-size: var(--fs-tiny); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255, 255, 255, .72);
}

.vorschau__icon { display: block; line-height: 0; margin: 2px 0; }
.vorschau__svg  { width: 28px; height: 28px; color: #fff; }

.vorschau__grad {
  display: flex; align-items: baseline; gap: .3rem;
  font-size: var(--fs-base); color: #fff;
}
.vorschau__grad strong { font-weight: 750; }
.vorschau__min { font-size: var(--fs-xs); color: rgba(255, 255, 255, .58); }

/*
   Der Zustand als Wort. Er darf umbrechen, aber nicht die Kachel
   sprengen - „Teils bewoelkt" ist laenger als die Spalte breit ist.
*/
.vorschau__zustand {
  font-size: var(--fs-micro); line-height: 1.25;
  color: rgba(255, 255, 255, .6);
  overflow-wrap: anywhere;
}

.vorschau__quelle {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-micro); color: rgba(255, 255, 255, .45);
}

@media (max-width: 479px) {
  /*
     Auf sehr schmalen Geraeten faellt das Zustandswort weg. Symbol und
     Temperatur sagen dort dasselbe auf kleinerem Raum; der Text stuende
     sonst dreizeilig unter jeder Kachel.
  */
  .vorschau__zustand { display: none; }
  .vorschau__svg { width: 24px; height: 24px; }
  .vorschau__grad { font-size: var(--fs-md); }
}

/*
   Auf hellem Grund - falls die Vorschau spaeter ausserhalb des Hero
   verwendet wird, etwa auf einer Ortsseite.
*/
.vorschau--hell .vorschau__titel   { color: var(--text-muted); }
.vorschau--hell .vorschau__tag     { background: var(--surface); border: 1px solid var(--border); }
.vorschau--hell .vorschau__name    { color: var(--text-muted); }
.vorschau--hell .vorschau__svg     { color: var(--text); }
.vorschau--hell .vorschau__grad    { color: var(--text); }
.vorschau--hell .vorschau__min,
.vorschau--hell .vorschau__zustand { color: var(--text-muted); }
.vorschau--hell .vorschau__quelle  { color: var(--text-muted); }


/* ==========================================================================
   24. „Heute als Naechstes" (Phase 8a.1)

   Drei Zeilen zwischen Hero und Entdecken-Raster. Bewusst KEINE Karten:
   Karten haben Bilder, Abstaende und Gewicht - hier geht es um drei
   Zeilen, die man im Vorbeigehen liest.

   Die Uhrzeit steht in einer eigenen Spalte und traegt die Zeile. Sie ist
   das Erste, was jemand sucht: „geht sich das noch aus?"
   ========================================================================== */

.naechstes { padding-top: 0; }

.naechstes__liste {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}

.naechstes__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 64px;
  background: var(--surface);
  color: var(--text); text-decoration: none;
}
.naechstes__link:hover { background: var(--bg); }

/*
   Tabellenziffern: Ohne sie sind „17:30" und „19:00" verschieden breit,
   und die Titel daneben stehen nicht auf einer Linie.
*/
.naechstes__zeit {
  font-size: var(--fs-base); font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 3.2rem;
}

.naechstes__text { min-width: 0; display: grid; gap: 2px; }

/*
   Ein langer Veranstaltungstitel bekommt Auslassungspunkte statt einer
   zweiten Zeile - drei Zeilen sollen drei Zeilen bleiben. `min-width: 0`
   am Elternteil ist dafuer noetig.
*/
.naechstes__titel {
  font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.naechstes__meta {
  font-size: var(--fs-xs); color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: .35rem;
}

.naechstes__pfeil { color: var(--text-muted); line-height: 0; }
.naechstes__pfeil svg { width: 20px; height: 20px; }
.naechstes__link:hover .naechstes__pfeil { color: var(--brand-orange); }

@media (max-width: 479px) {
  /*
     Auf sehr schmalen Geraeten faellt der Pfeil weg - die ganze Zeile ist
     ohnehin anklickbar, und die 20 Pixel fehlen dem Titel.
  */
  .naechstes__link  { grid-template-columns: auto 1fr; gap: var(--space-2); }
  .naechstes__pfeil { display: none; }
  .naechstes__zeit  { font-size: var(--fs-base); min-width: 2.9rem; }
}


/* ==========================================================================
   25. Hero auf schmalen Geraeten straffen (Phase 8a.1)

   Gemessen am 15.08.2026 bei 390 px: Der Hero nahm 78 % des ersten
   Bildschirms ein. Mit „Heute als Naechstes" direkt darunter steht der
   erste konkrete Termin jetzt bei 794 px - also gerade noch im Viewport
   von 844 px, aber angeschnitten.

   Diese Regeln holen rund 70 Pixel heraus, damit die erste Terminzeile
   VOLLSTAENDIG im Bild steht. Bewusst keine radikale Umgestaltung: Die
   Marke, das Wetter und die Warnung bleiben, wo sie sind - nur die
   Abstaende und die Zahlenzeile werden kompakter.
   ========================================================================== */

@media (max-width: 479px) {
  .hero { margin-top: var(--space-3); }

  /* Der obere Innenabstand traegt am meisten - unten bleibt mehr Luft,
     damit der Fengga nicht am Rand klebt. */
  .hero__inner {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    gap: var(--space-4);
  }

  /*
     Die grosse Ueberschrift ist die Marke - sie bleibt gross, aber
     „Heute im Montafon" braucht bei 390 px keine 5,1rem.
  */
  .hero .display { font-size: clamp(2.1rem, 1.4rem + 4.4vw, 3.2rem); }

  .hero__date { margin-top: var(--space-1); }

  /*
     Die Zahlenzeile stand untereinander und kostete zwei volle Zeilen.
     Nebeneinander sagt sie dasselbe auf halber Hoehe.
  */
  .hero__stats {
    display: flex; flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }
  .hero__stat { flex: 0 0 auto; }

  .vorschau { margin-top: var(--space-4); }
}


/* ==========================================================================
   26. Kopfzeile bei 390 px (Phase 8a.1)

   Der Fund: Sobald ein angemeldeter Nutzer ungelesene Nachrichten hat,
   kommt zum Nachrichten-Symbol ein Zaehler dazu - und die Zeile lief bei
   390 px um 34 Pixel ueber. Logo, Region, Nachrichten, Zaehler und Konto
   passen dort nicht nebeneinander.

   Gemessen, nicht geraten: Ohne Zaehler ging es sich aus, mit nicht.

   Die Loesung nimmt Platz weg, wo er am wenigsten kostet - Abstaende und
   Innenabstaende. Ausgeblendet wird nichts: Die Regionsmarke ist auf
   munta.eu ein Umschalter, das Konto ist der einzige Weg zu den
   Einstellungen, und der Zaehler ist genau die Information, um die es
   geht.
   ========================================================================== */

@media (max-width: 479px) {
  .header-actions { gap: var(--space-2); }

  .region-badge,
  .header-account {
    padding-left: .45rem;
    padding-right: .45rem;
    letter-spacing: .03em;
  }

  /* Der Zaehler direkt am Symbol - der Abstand dazwischen kostet mehr,
     als er ordnet. */
  .header-account--messages { gap: .2rem; }

  .header-account__count {
    min-width: 18px; height: 18px; padding: 0 .25rem;
    font-size: var(--fs-micro);
  }
}

/*
   Unter 360 px wird auch das noch eng. Dort weicht die Regionsmarke -
   sie steht als Wort ohnehin gleich darunter in „Heute im Montafon", und
   auf munta.eu bleibt der Wechsel ueber /regionen erreichbar.
*/
@media (max-width: 359px) {
  .region-badge { display: none; }
}


/* ==========================================================================
   27. Kopfzeile, Filterchips, Kachelmotive — zurueck im Core (Phase 8a.1)

   Diese Regeln waren beim Auslagern des Messengers versehentlich in
   `messenger.css` gelandet, weil sie in der Datei direkt dahinter standen.
   Folge: Auf jeder Seite OHNE Messenger fehlten sie - das Wort
   „Nachrichten" blieb im Kopf stehen und liess die Zeile bei 390 px
   ueberlaufen, die Filterchips verloren ihre 44-px-Hoehe und die
   Kachelmotive ihre Positionierung.

   Sie gehoeren hierher: Kopfzeile, Chips und Startseitenkacheln sind
   zentrale Bausteine, keine Messengerteile.
   ========================================================================== */

.header-account--messages { display: inline-flex; align-items: center; gap: .4rem; }
.header-account__count {
  min-width: 20px; height: 20px; padding: 0 .35rem;
  display: grid; place-items: center;
  background: var(--brand-orange); color: var(--brand-navy);
  font-size: var(--fs-micro); font-weight: 750; border-radius: var(--radius-pill);
}


/*
   Zwei Funde aus dem Breitenaudit zu Phase 8a.

   1. KOPFZEILE BEI 390 px

   Mit dem neuen Nachrichten-Eintrag standen dort drei beschriftete
   Elemente nebeneinander - Region, Nachrichten, Konto - und die Zeile lief
   um 37 px ueber. Das Wort erscheint deshalb erst ab 560 px; darunter
   bleibt das Symbol, das denselben Weg oeffnet. Der Zaehler bleibt in
   beiden Faellen sichtbar, denn er ist die eigentliche Information.

   2. FILTERCHIPS UNTER 44 px

   Die Chips waren 34 px hoch und damit unter dem Tap-Ziel, das Munta sich
   seit Phase 2 selbst vorschreibt. Aufgefallen ist es erst jetzt, weil die
   frueheren Messungen nur `.btn` geprueft haben - auf der Nachrichtenseite
   sind die Chips aber die Hauptnavigation zwischen Posteingang und
   Anfragen. Korrigiert wird das global: Eine Regel, die nur fuer eine
   Seite gilt, waere keine Regel.
*/

.header-account__icon { width: 20px; height: 20px; flex: 0 0 auto; }

@media (max-width: 559px) {
  /*
     Beide Kopfaktionen nur als Symbol (Phase 8a.1). Der Name bleibt in
     `aria-label` und als Tooltip - er verschwindet nur fuer das Auge.

     Gemessen: Logo, Region, Nachrichten mit Zaehler und Konto brauchen
     als Woerter zusammen rund 400 px. Bei 390 lief die Zeile ueber.
  */
  .header-account__wort { display: none; }
  .header-account--messages,
  .header-account--bell,
  .header-account--konto { padding-left: .5rem; padding-right: .5rem; }
}

/*
   ================== Symbol statt Wort, sobald die Navigation steht =====

   „Nachrichten" und „Konto" kosten zusammen rund 100 px. Neben sieben
   Navigationspunkten ist das genau der Betrag, der die Kopfzeile ueber den
   Rand schiebt. Der Name bleibt im `aria-label` - er verschwindet nur fuer
   das Auge, nicht fuer das Vorleseprogramm.

   ================== Warum 1100 und nicht 1399 (05.09.2026) =============

   Die alte Grenze war an der FENSTERbreite gemessen. Der Kopf richtet sich
   aber nach `.wrap` - und das hoert bei 1240 px auf, ganz gleich, wie breit
   der Bildschirm ist. Ab 1400 px kamen die Woerter deshalb zurueck, obwohl
   der Platz daneben derselbe blieb: Logo 309 + Navigation 558 + Aktionen
   414 = 1281 px in einem 1240 px breiten Kopf. Gemessen an einem 1920er
   Bildschirm - „Was geht?" brach um, die Zeile wurde 78 statt 64 px hoch.

   Jetzt gilt dieselbe Regel wie fuer die Navigation selbst: Ab 1100 px
   steht die Hauptnavigation im Kopf, und ab da tragen die Kontoaktionen
   nur noch ihr Symbol.

   Nach unten hin gibt es ein zweites Fenster: Zwischen 800 und 1099 px
   ist die Navigation ausgeblendet, dort ist Platz fuer die Woerter.
   Darunter nicht: Bei 560 px lief die Zeile um 62 px ueber, und bei 720 px
   springt die Logohoehe eine Stufe hoch (180 auf 270 px Breite) - genau
   dort wurde es wieder eng. Ab 800 px bleibt in jeder Stufe Luft, auch
   fuer laengere Regionsnamen als „Montafon".
*/
@media (max-width: 799px), (min-width: 1100px) {
  .header-account__wort { display: none; }
  .header-account--messages,
  .header-account--bell,
  .header-account--konto {
    padding-left: .5rem; padding-right: .5rem;
    /* Ohne Wort schrumpft der Knopf auf 38 px - unter dem Tap-Ziel. */
    min-width: 44px; justify-content: center;
  }
}

/* ==========================================================================
   Der Zaehler als ueberlappendes Abzeichen (Phase 8d)

   ================== Warum das noetig wurde ==================

   Mit der Glocke stehen vier Elemente in der Kopfzeile: Region,
   Nachrichten, Glocke, Konto. Gemessen bei 390 px: 32 px Ueberlauf -
   dasselbe Problem wie in 8a.1, nur eine Aktion spaeter.

   Der Grund lag nicht an der Glocke selbst, sondern an den ZAEHLERN: Sie
   standen NEBEN dem Symbol und machten jede Aktion von 38 auf 64 px breit.
   Damit haengt die Breite der Kopfzeile davon ab, wie viel jemand
   ungelesen hat - und bei dreistelligen Zahlen waere sie noch einmal
   gewachsen.

   Jetzt sitzt der Zaehler ALS ABZEICHEN auf dem Symbol. Die Aktion ist
   immer gleich breit, egal ob 0, 3 oder 128 - und die Kopfzeile kann aus
   diesem Grund nie wieder ueberlaufen.

   Das Abzeichen ist `aria-hidden`; die Zahl steht im `aria-label` der
   Aktion („Benachrichtigungen, 3 ungelesen"). Fuer ein Vorleseprogramm
   aendert sich also nichts.
   ========================================================================== */

.header-account--messages,
.header-account--bell {
  position: relative;
  display: inline-flex; align-items: center; gap: .4rem;
}

.header-account--messages .header-account__count,
.header-account--bell .header-account__count {
  position: absolute;
  /*
     Nach INNEN versetzt, nicht nach aussen.

     Mit `right: -6px` ragte das Abzeichen ueber den Kopfzeilencontainer
     hinaus und trieb dessen `scrollWidth` um 9 px hoch - bei 390 px
     unkritisch, aber ein Ueberlauf bleibt ein Ueberlauf, und beim
     naechsten Element rechts daneben waere er sichtbar geworden.
  */
  top: 0; right: 0;
  min-width: 18px; height: 18px; padding: 0 .25rem;
  font-size: var(--fs-micro); line-height: 1;
  /* Ein Rand in der Flaechenfarbe trennt das Abzeichen vom Symbol
     darunter, ohne einen Schatten zu brauchen. */
  box-shadow: 0 0 0 2px var(--bg);
}

/*
   ================== 44 px in der Kopfzeile (Phase 8d) ==================

   Die Kopfaktionen waren 32 px hoch (26 auf sehr schmalen Geraeten) - seit
   8a, unbemerkt, weil frueher nur `.btn` und `.filterchip` gemessen wurden.
   Drei Symbole nebeneinander, jedes unter dem Tap-Ziel, das Munta sich seit
   Phase 2 selbst vorschreibt.

   44 px passen ohne Weiteres in die 78 px hohe Kopfzeile. Die Symbolgroesse
   bleibt unveraendert; es waechst nur die Flaeche, auf die man tippen kann.
*/
.header-account { min-height: 44px; }

/* Steht das Wort daneben (ab 560 px), rueckt das Abzeichen mit. */
@media (min-width: 560px) {
  .header-account--messages .header-account__count {
    position: static; box-shadow: none;
    min-width: 20px; height: 20px; padding: 0 .35rem; font-size: var(--fs-micro);
  }
}

.filterchip {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: .4rem;
}


/*
   Die grossen Szenen-Motive im Entdecken-Raster (15.08.2026).

   Der Betreiber wollte „groessere Icons, das lockert das Ganze auf". Die
   24×24-Symbole bleiben oben in der Kategoriezeile - sie beschriften. Das
   64×64-Motiv steht zusaetzlich gross in der Flaeche und traegt sie.

   Es liegt HINTER dem Text (`z-index: 0` gegen den Inhalt auf 1) und mit
   reduzierter Deckkraft. Voll deckend wuerde es mit der Aussage
   konkurrieren; als reines Wasserzeichen bei 16 % waere es das, was der
   Betreiber gerade nicht wollte. 26 % auf hellen und 34 % auf dunklen
   Flaechen trifft die Mitte - dunkle Flaechen brauchen mehr, weil ein
   heller Strich auf Navy optisch schwaecher wirkt.
*/

.dtile__scenewrap {
  position: absolute;
  right: -6%;
  bottom: -4%;
  width: 46%;
  max-width: 220px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}

.dtile__scene {
  width: 100%; height: 100%;
  opacity: var(--tile-scene-opacity, .26);
  color: var(--tile-scene, currentColor);
}

/* Auf dunklen Flaechen traegt derselbe Strich weniger - also etwas mehr. */
.dtile--navy   .dtile__scene,
.dtile--enzian .dtile__scene { opacity: .34; }

/*
   Farbe statt Grau auf den hellen Flaechen (16.08.2026).

   Bis dahin nahm das Motiv `currentColor` - auf einer hellen Kachel also
   das Navy des Textes. Bei 26 % Deckkraft wurde daraus ein blasses Grau,
   und „Essen & Trinken" und „Jobs" wirkten neben den Kacheln mit echtem
   Foto leer statt zurueckhaltend.

   Jetzt tragen sie Orange. Es bleibt dieselbe Zeichnung an derselben
   Stelle in derselben Groesse - nur nicht mehr farblos. Etwas hoehere
   Deckkraft darf sein, weil Orange auf Creme weicher liegt als Navy.

   Der Text bleibt unberuehrt: Das Motiv sitzt rechts unten, die Schrift
   links - und es liegt weiterhin hinter ihr.
*/
.dtile--cream .dtile__scene,
.dtile--white .dtile__scene,
.dtile--gold  .dtile__scene {
  --tile-scene: var(--orange);
  --tile-scene-opacity: .38;
}

/*
   Die grosse Wandern-Flaeche hat bereits die Berglinie am unteren Rand.
   Dort rueckt das Motiv nach oben, sonst liegen zwei Zeichnungen
   uebereinander.
*/
.dtile--wide .dtile__scenewrap { bottom: auto; top: 8%; width: 30%; }

/* Der Inhalt bleibt vorn. */
.dtile__inner { position: relative; z-index: 1; }

@media (max-width: 719px) {
  /*
     Schmale Geraete: kleiner und weiter aussen. Auf 390 px hat eine Kachel
     kaum Flaeche - dort darf das Motiv die Schrift nicht bedraengen.
  */
  .dtile__scenewrap { width: 38%; max-width: 130px; right: -8%; }
  .dtile__scene     { opacity: .2; }
  .dtile--navy   .dtile__scene,
  .dtile--enzian .dtile__scene { opacity: .28; }
}


/* -------------------------------------------------------------------------
   Regionale Bildakzente (16.08.2026)

   Nur die visuelle Schicht: kleine WebP-Motive aus dem Montafon-Gefuehl,
   keine PHP-Logik, keine neuen Abfragen, kein JavaScript. Die Bilder bleiben
   dekorativ und liegen hinter vorhandenen Inhalten.
   ------------------------------------------------------------------------- */

/* Das Motiv liegt als echtes <img> in `.hero__media` (siehe
   `templates/components/hero-today.php`). Hier steht nur noch, wie es
   wirkt: der Verlauf darueber, damit die weisse Schrift auf jedem Motiv
   lesbar bleibt, und eine ruhige Bewegung beim Ueberfahren.

   Vorher lag das Bild als `url()` in diesem Pseudoelement und war damit
   fuer den Browser kein Bild: keine Ladeprioritaet, keine Groesse, kein
   `loading`. Im Hero - dem groessten Element der Startseite - ist das der
   Unterschied zwischen "laedt sofort" und "laedt nach dem Stylesheet". */
.hero__media img {
  transform: scale(1.015);
  transition: transform .7s ease, opacity .25s ease;
}

.hero:hover .hero__media img,
.hero:focus-within .hero__media img {
  opacity: .9;
  transform: scale(1.035);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,21,49,.82) 0%, rgba(0,21,49,.48) 46%, rgba(0,21,49,.22) 100%),
    linear-gradient(180deg, rgba(0,21,49,.04) 0%, rgba(0,21,49,.72) 100%);
  opacity: .46;
}

.section:has(.discovery) {
  position: relative;
  overflow: hidden;
}

.section:has(.discovery) > .wrap {
  position: relative;
  z-index: 1;
}

/* Das schwebende Kaestchen neben dem Raster ist entfallen (16.08.2026):
   Es hing an `:has(.discovery)` und damit an der Seitenstruktur, und es
   zeigte ein Motiv ohne Bezug zu dem, was daneben stand. Das Motiv sitzt
   jetzt IN der Wandern-Kachel - dort, wo es hingehoert. */

.dtile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.24) 50%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-28%);
  transition: opacity .18s ease, transform .35s ease;
}

.dtile:hover::before,
.dtile:focus-visible::before {
  opacity: .45;
  transform: translateX(28%);
}

.tonight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tonight > .wrap {
  position: relative;
  z-index: 1;
}

/* Das Abendmotiv steht als <img class="tonight__foto"> im Template.
   Hier nur seine Lage und der Verlauf darueber. */
.tonight__foto {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  height: 100%;
  width: min(42rem, 62vw);
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: .55;
}

.tonight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,21,49,.96) 0%, rgba(0,21,49,.80) 48%, rgba(0,21,49,.62) 100%);
  opacity: .82;
}

.card__media,
.feedcard__image,
.postcard__preview,
.momente__link {
  overflow: hidden;
}

.card__media img,
.feedcard__image img,
.postcard__preview img,
.momente__bild {
  transition: transform .35s ease, filter .35s ease;
}

.card--link:hover .card__media img,
.card--link:focus-visible .card__media img,
.feedcard:hover .feedcard__image img,
.postcard:hover .postcard__preview img,
.momente__link:hover .momente__bild,
.momente__link:focus-visible .momente__bild {
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.03);
}

.momente__link {
  transition: transform .18s ease, border-color .18s ease;
}

.momente__link:hover,
.momente__link:focus-visible {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .dtile__foto,
  .dtile::before,
  .card__media img,
  .feedcard__image img,
  .postcard__preview img,
  .momente__bild,
  .momente__link {
    transition: none;
  }

  .hero:hover .hero__media img,
  .hero:focus-within .hero__media img,
  .dtile:hover .dtile__foto,
  .dtile:focus-visible .dtile__foto,
  .dtile:hover::before,
  .dtile:focus-visible::before,
  .card--link:hover .card__media img,
  .card--link:focus-visible .card__media img,
  .feedcard:hover .feedcard__image img,
  .postcard:hover .postcard__preview img,
  .momente__link:hover .momente__bild,
  .momente__link:focus-visible .momente__bild,
  .momente__link:hover,
  .momente__link:focus-visible {
    transform: none;
  }
}

@media (max-width: 719px) {
  /* Schmale Geraete: Das Motiv sitzt oben und traegt weniger, weil die
     Schrift die ganze Breite braucht. */
  .hero__media img { object-position: center top; opacity: .38; }

  .hero::before {
    background: linear-gradient(180deg, rgba(0,21,49,.62) 0%, rgba(0,21,49,.88) 100%);
    opacity: .5;
  }

  .tonight__foto { width: 100%; opacity: .28; }

  .tonight::before {
    background: linear-gradient(180deg, rgba(0,21,49,.94), rgba(0,21,49,.88));
    opacity: .36;
  }
}

/* Noch mehr lokale Energie: Party, Markt und Community bleiben Bildakzente,
   keine eigenen Inhaltsmodule. */
.section--wasgeht {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dark);
}

.section--wasgeht > .wrap {
  position: relative;
  z-index: 1;
}

/* Das Partymotiv steht als <img class="wasgeht__foto"> im Template. */
.wasgeht__foto {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  height: 100%;
  width: min(48rem, 62vw);
  object-fit: cover;
  pointer-events: none;
  opacity: .6;
}

.section--wasgeht::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,21,49,.96) 0%, rgba(0,21,49,.82) 44%, rgba(0,21,49,.50) 100%),
    linear-gradient(180deg, rgba(0,21,49,.10), rgba(0,21,49,.86));
  opacity: .92;
}

.gig--party {
  position: relative;
  overflow: hidden;
}

.gig--party::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: min(19rem, 36%);
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--surface) 0%, rgba(255,255,255,.76) 38%, rgba(255,255,255,.08) 100%),
    url("../img/montafon-party-accent.webp") center / cover no-repeat;
  opacity: .18;
  transition: opacity .18s ease, transform .35s ease;
}

.gig--party:hover::after,
.gig--party:focus-visible::after {
  opacity: .28;
  transform: scale(1.035);
}

.gig--party .gig__when,
.gig--party .gig__body {
  position: relative;
  z-index: 1;
}

.filterchip[href*="tag=party"],
.filterchip[href*="tag=dj"],
.filterchip[href*="kategorie=party"],
.filterchip[href*="kategorie=apres_ski"] {
  border-color: rgba(254,138,0,.58);
}

.filterchip[href*="tag=party"]:not(.filterchip--active),
.filterchip[href*="tag=dj"]:not(.filterchip--active),
.filterchip[href*="kategorie=party"]:not(.filterchip--active),
.filterchip[href*="kategorie=apres_ski"]:not(.filterchip--active) {
  background: linear-gradient(135deg, rgba(254,138,0,.12), rgba(255,235,209,.36));
}

/* Das Fotomotiv einer Kachel (16.08.2026).

   Vorher hingen diese Regeln an `[href*="/markt"]` - einer Zuordnung ueber
   die Adresse. Wird ein Pfad umbenannt, verschwindet das Bild lautlos.
   Jetzt sagt die Kachel selbst, welches Motiv zu ihr gehoert
   (`TodayService::discoveryTiles()`), und es steht als
   <img class="dtile__foto"> im Markup.

   Es sitzt unten rechts hinter dem Text und wird beim Ueberfahren etwas
   deutlicher - genug, um zu leben, wenig genug, um lesbar zu bleiben. */
/* Das Foto fuellt die rechte Haelfte der Kachel und laeuft nach links
   weich aus - dort steht der Text.

   Zuvor sass es als kleines schraeges Kaestchen unten rechts (48 % Breite,
   4:3, ueber den Rand hinaus). Gemessen am 16.08.2026: Von 243 x 184 px
   blieben nach dem Beschnitt am Kachelrand und unter der Zeichnung
   ungefaehr zwei Fingerbreit sichtbar. Ein Motiv, das man suchen muss,
   ist kein Motiv - es ist nur Ladezeit. */
.dtile__foto {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  /* Voll deckend. Das Marktmotiv ist ein helles Sommerbild; bei .55 gegen
     Weiss blieb davon nichts uebrig - geladen, gross genug, trotzdem
     unsichtbar (gemessen am 16.08.2026). */
  opacity: 1;
  transition: opacity .25s ease, transform .45s ease;
}

/* Der weiche Uebergang zur Textseite - als VERLAUF, nicht als Maske.

   `mask-image` waere der elegantere Weg und hat bei der breiten
   Wandern-Kachel auch funktioniert; auf den beiden schmalen Kacheln blieb
   das Bild damit unsichtbar (Chrome, 16.08.2026 gemessen: geladen,
   234 x 225 px, opacity .88 - und nichts zu sehen). Ein Verlauf in der
   Kachelfarbe tut dasselbe, ohne eine eigene Zeichenebene zu brauchen. */
.dtile:has(.dtile__foto)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--tile-bg, var(--surface)) 0%,
    var(--tile-bg, var(--surface)) 34%,
    color-mix(in srgb, var(--tile-bg, var(--surface)) 55%, transparent) 58%,
    transparent 82%);
}

.dtile:hover .dtile__foto,
.dtile:focus-visible .dtile__foto {
  transform: scale(1.04);
}

/* Auf den dunklen Kacheln etwas zurueckgenommen - dort steht weisse
   Schrift davor, und ein volles Foto wuerde sie bedraengen. */
.dtile--navy .dtile__foto,
.dtile--enzian .dtile__foto { opacity: .82; }

@media (max-width: 719px) {
  .wasgeht__foto { width: 100%; opacity: .34; }

  .section--wasgeht::before {
    background: linear-gradient(180deg, rgba(0,21,49,.82), rgba(0,21,49,.94));
    opacity: .52;
  }

  .gig--party::after {
    width: 42%;
    opacity: .10;
  }

  /* Schmale Geraete: schmaler, aber nicht blasser - auf 390 px hat eine
     Kachel wenig Flaeche, und ein kaum sichtbares Motiv waere dort nur
     Ladezeit ohne Wirkung. Der weiche Rand beginnt frueher, damit die
     Schrift ihre Ruhe behaelt. */
  .dtile__foto { width: 50%; }
  .dtile--navy .dtile__foto,
  .dtile--enzian .dtile__foto { opacity: .74; }

  /* Auf 390 px braucht die Schrift mehr Ruhe - der Verlauf deckt weiter
     nach rechts. */
  .dtile:has(.dtile__foto)::after {
    background: linear-gradient(90deg,
      var(--tile-bg, var(--surface)) 0%,
      var(--tile-bg, var(--surface)) 46%,
      color-mix(in srgb, var(--tile-bg, var(--surface)) 60%, transparent) 66%,
      transparent 88%);
  }
}

/* ==========================================================================
   Betriebsuebersicht (RC-3)

   Kein eigenes Farbsystem, keine Kopie von .btn oder .notice - der
   Adminbereich sieht aus wie der Rest der Seite. Was hier dazukommt, sind
   drei Bausteine: die Zustandsliste (Ampel + Titel + Satz), die
   Uebersichtskacheln und eine Tabelle, die auf einem Telefon waagrecht
   rollt statt die Seite zu sprengen.
   ========================================================================== */

.dashkacheln {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: var(--space-5) 0;
}

.dashkachel {
  display: flex; flex-direction: column; gap: .2rem;
  min-height: 44px;
  padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text); text-decoration: none;
}
.dashkachel:hover { border-color: var(--border-strong); text-decoration: none; }

/* Offene Meldungen warten auf eine Entscheidung - das darf man sehen. */
.dashkachel--achtung { border-color: #a1701a; background: #fdf3e0; }

.dashkachel__wert  { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.dashkachel__label { font-size: var(--fs-sm); color: var(--text-muted); }

.zustandsliste { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }

/* --- Livegang (A-005, 16.08.2026) ------------------------------------

   Der Zustandskasten traegt links eine kraeftige Kante in der Farbe der
   Lage: Wer diese Seite oeffnet, soll in einer halben Sekunde wissen, ob
   die Seite oeffentlich ist - noch bevor er den ersten Satz gelesen hat.  */
.livegang {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.livegang--test      { border-left-color: var(--gold); }
.livegang--live      { border-left-color: #1f7a3f; }
.livegang--blockiert { border-left-color: var(--danger); background: var(--danger-soft); }

.livegang__stand { margin: 0 0 var(--space-2); font-size: var(--fs-base); }
.livegang__folgen { margin: 0; padding-left: 1.2rem; color: var(--text-muted); font-size: var(--fs-md); }
.livegang__folgen li { margin: .2rem 0; }
.livegang__wer { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.livegang__notiz { font-style: italic; }
.livegang__hinweis { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

.zustand {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem var(--space-3);
  align-items: baseline;
  padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.zustand__titel { font-weight: 700; }
/* Der Satz beginnt unter dem Titel, nicht unter der Ampel. */
.zustand__text  {
  grid-column: 2;
  color: var(--text-muted); font-size: var(--fs-md);
  /*
     Ein Dateiname wie „20260816_040_marktplatz_favoriten.sql" hat keine
     Stelle, an der ein Zeilenumbruch von selbst passiert - und sprengte
     bei 360 px die Seite um elf Pixel (gefunden in der Release-Matrix).
     `min-width: 0` erlaubt dem Grid-Kind, schmaler als sein Inhalt zu
     werden; `anywhere` bricht dann notfalls mitten im Wort.
  */
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .zustand { grid-template-columns: 4.5rem 12rem 1fr; align-items: center; }
  .zustand__text { grid-column: auto; }
}

/*
   Eine Tabelle ist auf 360 px nie ganz zu sehen. Sie rollt deshalb in
   ihrem eigenen Rahmen - die SEITE darf nicht waagrecht rollen.
*/
.tabellenrahmen { overflow-x: auto; margin: var(--space-4) 0; }

.datentabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.datentabelle th,
.datentabelle td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
  white-space: nowrap;
}
.datentabelle th { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.datentabelle tbody tr:last-child td { border-bottom: 0; }

.tabellennebentext { color: var(--text-muted); font-size: var(--fs-xs); }

/* Suchfeld und Knopf nebeneinander, sobald Platz ist. */
.form--suche { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
@media (min-width: 560px) {
  .form--suche { grid-template-columns: 1fr auto; align-items: end; }
}

/* --------------------------------------------------------------------------
   Der Kopf von „Entdecken" (16.08.2026)

   Dasselbe Muster wie bei „Was geht", nur hell: Das Bild liegt rechts,
   der Verlauf darueber laeuft von der Seitenfarbe ins Durchsichtige.

   Warum ueberhaupt ein Verlauf? Ohne ihn stuende die Ueberschrift auf
   einem Foto - lesbar bei diesem Bild, unlesbar beim naechsten. Der
   Verlauf macht die Lesbarkeit unabhaengig vom Motiv.
   -------------------------------------------------------------------------- */

.section--entdecken {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section--entdecken > .wrap { position: relative; z-index: 1; }

.entdecken__foto {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  height: 100%;
  width: min(44rem, 52vw);
  object-fit: cover;
  object-position: center 40%;
  pointer-events: none;
  /*
     Beim ersten Anlauf stand hier .5 und der Verlauf war bis 34 Prozent
     voll deckend - zusammen ergab das ein Bild, das man beim besten
     Willen nicht sah. Derselbe Fehler wie bei den Kachelmotiven in 7.1a:
     zwei dezente Massnahmen uebereinander sind nicht dezent, sondern
     unsichtbar.
  */
  opacity: .85;

  /*
     Die linke Bildkante lief als scharfe Senkrechte durch die Seite. Eine
     Maske laesst sie auslaufen - anders als in 7.1a ist das hier
     unbedenklich: Damals stand die Maske auf schmalen Kacheln, wo sie das
     ganze Bild verschluckte. Hier ist die Flaeche breit genug.

     `-webkit-` steht dabei, weil Safari die Eigenschaft bis heute nur mit
     Praefix kennt; ohne sie bliebe dort die harte Kante - kein Fehler,
     aber unnoetig.
  */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.section--entdecken::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /*
     Deckend nur dort, wo die Ueberschrift steht - danach schnell
     durchsichtig. Der Text bleibt lesbar, das Bild bleibt sichtbar.
  */
  background: linear-gradient(90deg,
    var(--bg) 0%,
    var(--bg) 30%,
    color-mix(in srgb, var(--bg) 55%, transparent) 52%,
    transparent 78%);
}

/*
   Auf dem Telefon steht der Text ueber dem ganzen Bild statt daneben -
   sonst bliebe fuer die Ueberschrift ein Streifen von zwei Woertern.
*/
@media (max-width: 720px) {
  .entdecken__foto {
    width: 100%;
    opacity: .5;
    /* Ueber die ganze Breite braucht es keine seitliche Maske. */
    -webkit-mask-image: none;
            mask-image: none;
  }

  .section--entdecken::before {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 55%, transparent) 0%,
      color-mix(in srgb, var(--bg) 88%, transparent) 55%,
      var(--bg) 100%);
  }
}

/* --- Verweis auf fremde Quellen (A-008, 17.08.2026) -------------------

   Deutlich abgesetzt von den eigenen Inhalten: Was hier steht, betreut
   Munta nicht. Ein Kasten, der aussieht wie die Liste darueber, wuerde
   den Unterschied verwischen — und genau der ist hier die Aussage.      */
.quellenhinweis {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.quellenhinweis__titel {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-base); font-weight: 700;
}
.quellenhinweis p { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-md); }
.quellenhinweis__liste {
  margin: 0 0 var(--space-3); padding-left: 1.2rem;
  font-size: var(--fs-md);
}
.quellenhinweis__liste li { margin: .3rem 0; color: var(--text-muted); }
.quellenhinweis__fuss { margin: 0; font-size: var(--fs-xs); }

/* ==========================================================================
   Ortsseite (A-018, 17.08.2026)

   Die Seite begann mit einer Zeile Fliesstext und einem Absatz Geschichte —
   inhaltlich richtig, aber wie ein Lexikonauszug. Dass Veranstaltungen,
   Touren und Betriebe weiter unten stehen, sah man erst nach viel Scrollen.

   Der Kopf traegt jetzt Farbe und die Berglinie, die Kennzahlen stehen als
   Kacheln, und die Einstiege mit ihrer Zahl fuehren direkt hinunter.
   ========================================================================== */

.ortskopf {
  position: relative; overflow: hidden;
  padding: var(--space-6) 0 var(--space-5);
  background: linear-gradient(160deg, var(--brand-navy) 0%, var(--dark-soft) 62%, #0a2f52 100%);
  color: var(--text-invert);
}
.ortskopf__ridge {
  position: absolute; inset: auto 0 0 0;
  width: 100%; height: 90px;
  color: rgba(255,255,255,.06);
  pointer-events: none;
}
.ortskopf__inner { position: relative; z-index: 1; }

.ortskopf__weg { margin: 0 0 var(--space-2); font-size: var(--fs-xs); color: var(--text-invert-muted); }
.ortskopf__weg a { color: var(--brand-orange); }

.ortskopf__titel {
  margin: 0 0 var(--space-3);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  line-height: 1.05; letter-spacing: -.02em;
}
.ortskopf__text {
  margin: 0 0 var(--space-4); max-width: 46rem;
  color: var(--text-invert-muted); font-size: var(--fs-base); line-height: 1.6;
}
.ortskopf__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* --- Das Gemeindewappen (A-024) ---------------------------------------

   Drei Groessen, ein Bauteil: im Ortskopf gross genug, um die Teilung des
   Schildes zu erkennen, auf der Ortskarte als Erkennungszeichen in der
   Ecke, auf der Heimatseite nur noch als Zeichen in der Kopfzeile.

   Die HELLE PLATTE im Ortskopf ist kein Schmuck. Der Kopf ist dunkelblau,
   und die Wappen von Stallehr, Gaschurn und Bartholomaeberg sind schwarz
   konturiert - ohne hellen Grund laufen ihre Raender im Hintergrund aus.
   Auf der weissen Karte und auf der hellen Heimatseite braucht es sie
   nicht, dort steht das freigestellte Wappen direkt auf der Flaeche.

   Die Hoehe steht hier und nicht am Bild: Ein Wappen soll ein Zeichen
   bleiben und nicht zum Kopfbild werden (siehe Munta\Support\Wappen). */

.ortswappen { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ortswappen__bild { display: block; width: auto; }

.ortskopf__zeile {
  display: flex; align-items: center; gap: var(--space-4);
  margin: 0 0 var(--space-3);
}
.ortskopf__zeile .ortskopf__titel { margin: 0; }

.ortswappen--kopf {
  height: 76px; padding: 5px 9px;
  background: var(--bg); border-radius: var(--radius-sm);
  box-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.ortswappen--kopf .ortswappen__bild { height: 66px; }

/* Der Satz, der bei einem Ortsteil erklaert, wessen Wappen da steht.
   Er gehoert zum Wappen, nicht zum Beschreibungstext darunter - deshalb
   steht er dicht am Titel und mit deutlichem Abstand zum naechsten Absatz. */
.ortskopf__wappennote {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text-invert-muted);
}

/* Auf der Ortskarte: oben rechts, mit Platz dafuer im Text. Ohne das
   `padding-right` liefe ein langer Ortsname unter das Wappen. */
.ortswappen--karte { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; }
.ortswappen--karte .ortswappen__bild { height: 40px; }
.card--mitwappen .card__body { padding-right: calc(var(--space-4) + 44px); }

/* Auf der Heimatseite: in der Zeile „Heimat · Ort". */
.eyebrow--wappen { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ortswappen--klein .ortswappen__bild { height: 38px; }
.ortswappen--gemeindekarte .ortswappen__bild { max-height: 38px; }

@media (max-width: 640px) {
  .ortswappen--kopf { height: 60px; padding: 4px 7px; }
  .ortswappen--kopf .ortswappen__bild { height: 52px; }
  .ortswappen--karte .ortswappen__bild { height: 34px; }
  .ortswappen--klein .ortswappen__bild { height: 32px; }
  .ortswappen--gemeindekarte .ortswappen__bild { max-height: 32px; }
  .card--mitwappen .card__body { padding-right: calc(var(--space-4) + 38px); }
}

/* --- Die Kennzahlen ---------------------------------------------------- */

.ortszahlen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  max-width: 46rem;
}
.ortszahl {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 2px var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
}
.ortszahl__icon { grid-row: span 2; width: 20px; height: 20px; color: var(--brand-orange); }
.ortszahl__wert  { font-weight: 700; font-size: var(--fs-base); line-height: 1.2; }
.ortszahl__label { font-size: var(--fs-tiny); letter-spacing: .06em; text-transform: uppercase;
                   color: var(--text-invert-muted); }

/* --- Die Einstiege ----------------------------------------------------- */

.ortseinstiege {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.orteinstieg {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-left: 4px solid var(--ort-ton, var(--brand-orange));
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none; color: var(--text);
  transition: border-color .12s ease, transform .12s ease;
}
.orteinstieg:hover, .orteinstieg:focus-visible {
  border-color: var(--ort-ton, var(--brand-orange));
  transform: translateY(-1px);
  text-decoration: none;
}
.orteinstieg__icon  { grid-row: span 2; width: 24px; height: 24px; color: var(--ort-ton, var(--brand-orange)); }
.orteinstieg__zahl  { font-size: 1.5rem; font-weight: 700; line-height: 1.05; }
.orteinstieg__label { font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase;
                      color: var(--text-muted); }

.orteinstieg--orange { --ort-ton: var(--orange-dark); }
.orteinstieg--forest { --ort-ton: var(--forest); }
.orteinstieg--enzian { --ort-ton: var(--enzian); }
.orteinstieg--gold   { --ort-ton: var(--gold); }

/* Eine Sprungmarke, die den Kopf der Seite nicht verdeckt. */
.sprungmarke { display: block; height: 0; scroll-margin-top: 5rem; }

/* ==========================================================================
   Suche (A-009, 17.08.2026)
   ========================================================================== */

.suchform {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-3);
}
.suchform__feld {
  flex: 1 1 16rem; min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface);
}
.suchform__feld:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 1px; }

/* Was die Suche aus der Eingabe gemacht hat — sichtbar, nicht heimlich. */
.suchdeutung {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: 0; font-size: var(--fs-sm); color: var(--text-muted);
}
.suchdeutung__icon { width: 16px; height: 16px; color: var(--brand-orange); flex: none; }

.suchtreffer { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.suchtreffer__link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none; color: var(--text);
  transition: border-color .12s ease;
}
.suchtreffer__link:hover, .suchtreffer__link:focus-visible {
  border-color: var(--brand-orange); text-decoration: none;
}
.suchtreffer__icon  { width: 20px; height: 20px; color: var(--brand-orange); flex: none; }
.suchtreffer__text  { display: grid; gap: 2px; min-width: 0; }
.suchtreffer__titel { font-weight: 650; }
.suchtreffer__zeile {
  font-size: var(--fs-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suchtreffer__pfeil { color: var(--text-muted); }

/* ==========================================================================
   Munta Momente 2.0 (A-014, 17.08.2026)
   ========================================================================== */

/* --- Runde Filter ------------------------------------------------------

   Kreise, wie man sie von Bilderdiensten kennt — aber FILTER, keine
   Stories: kein Ungelesen-Ring, kein Ablauf nach 24 Stunden. Der Ring
   markiert allein die aktive Auswahl.

   44 px Mindestgroesse fuer den Daumen; die Leiste scrollt waagrecht,
   ohne die Seite mitzuziehen (`overscroll-behavior-x`).                */
.rundfilter-leiste {
  display: flex; gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-bottom: var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.rundfilter {
  flex: none;
  display: grid; justify-items: center; gap: 6px;
  width: 4.5rem;
  text-decoration: none; color: var(--text-muted);
}
.rundfilter:hover, .rundfilter:focus-visible { text-decoration: none; color: var(--text); }

.rundfilter__kreis {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 2px solid var(--border);
  font-size: 1.35rem; font-weight: 700; color: var(--text-muted);
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.rundfilter:hover .rundfilter__kreis { border-color: var(--brand-orange); }
.rundfilter:focus-visible .rundfilter__kreis { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

.rundfilter--aktiv .rundfilter__kreis {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
  background: var(--surface);
  color: var(--orange-dark);
}
.rundfilter--aktiv .rundfilter__label { color: var(--text); font-weight: 650; }

.rundfilter__label {
  font-size: var(--fs-tiny); line-height: 1.2; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}

/* --- Das Raster --------------------------------------------------------

   Feste Spaltenzahlen statt `auto-fill`: Ein Bilderraster soll auf jedem
   Geraet dieselbe Ordnung haben. Mobil drei, Tablet vier, Desktop sechs —
   so, wie es der Auftrag vorgibt.                                      */
.momente {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 640px)  { .momente { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .momente { grid-template-columns: repeat(6, 1fr); } }

/* Quadratisch — sonst springt die Zeilenhoehe mit jedem Hochformat. */
.momente__link, .momente__platzhalter { aspect-ratio: 1; }
.momente__bild { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Das leere Raster --------------------------------------------------

   Es zeigt, wie die Seite aussehen WIRD. Gestrichelt und ohne Inhalt,
   damit es unter keinen Umstaenden nach Bildern aussieht, die nur nicht
   geladen haben.                                                       */
.momente-leer { margin: var(--space-4) 0 0; }
.momente-leer__text { margin: 0 0 var(--space-4); color: var(--text-muted); max-width: 40rem; }
.momente-leer__weg  { margin: var(--space-4) 0 0; }

.momente--platzhalter { margin-top: 0; pointer-events: none; }
.momente__platzhalter {
  display: grid; place-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.momente__platzhalter-icon { width: 22px; height: 22px; color: var(--border-strong); }

/* Nach hinten hin blasser — die Andeutung soll nicht wie eine Liste
   wirken, die man durchsehen koennte. */
.momente--platzhalter .momente__item:nth-child(n+4) { opacity: .6; }
.momente--platzhalter .momente__item:nth-child(n+7) { opacity: .3; }


/* ==========================================================================
   Zwei Wege zum Foto — Kamera und Galerie

   Aus `marketplace.css` hierher verschoben (A-015, 17.08.2026): Seit die
   Community denselben Weg anbietet, wird das Muster an zwei Stellen
   gebraucht, und `marketplace.css` laedt nur der Marktplatz.
   ========================================================================== */
/* ================== Fotos vom Telefon (7.1a) ==================

   Zwei benannte Wege statt eines technischen „Datei auswählen": Der eine
   oeffnet die Kamera, der andere die Galerie. Auf dem Telefon stehen sie
   untereinander und nehmen die volle Breite - dort wird getippt, nicht
   gezielt.

   Das Dateifeld liegt unsichtbar UEBER dem Knopf statt `display: none`:
   So bleibt es fuer die Tastatur und fuer Vorleseprogramme erreichbar, und
   der ganze Knopf ist die Trefferflaeche. */
.fotoknoepfe {
  display: grid; gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
}

@media (min-width: 560px) {
  .fotoknoepfe { grid-template-columns: 1fr 1fr; }
}

.fotoknopf {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  /* Deutlich groesser als 44px: Das hier ist die Hauptaktion der Seite. */
  min-height: 56px;
  cursor: pointer;
}

.fotoknopf__feld {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  /* Ohne diese Zeile faengt Safari den Tipp nicht zuverlaessig ab. */
  font-size: var(--fs-base);
}


/* --- Der Weg zum eigenen Bild auf Momente (A-015, 17.08.2026) ---------

   Er steht ueber dem Raster und ist der einzige grosse Knopf der Seite.
   Auf einer Bilderseite ist „selbst eines beitragen" die Hauptaktion —
   nicht eine von mehreren.                                             */
.momente__aktion {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
}
.momente__aktion-hinweis { font-size: var(--fs-sm); color: var(--text-muted); }

/* Deutlich ueber der 44-px-Grenze: Das hier soll der Daumen finden,
   ohne zu zielen. */
.btn--gross {
  min-height: 52px;
  padding-inline: var(--space-5);
  font-size: var(--fs-base);
  gap: .4rem;
}

/* ================================================================
   „Verknüpft mit …" am Beitrag (A-017)
   ================================================================

   Bewusst RUHIG: keine gefüllten Flächen, keine Farbe, die nach
   Auszeichnung aussieht. Ein verknüpfter Betrieb ist eine Angabe des
   Verfassers, keine Empfehlung der Seite - und das soll man sehen.
   Deshalb dieselbe Umrandung wie bei einem gewöhnlichen Verweis.
   ================================================================ */
.postkontext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: var(--space-5) 0 0;
  font-size: var(--fs-md);
  color: var(--text-soft);
}
.postkontext__wort { font-weight: 600; }
.postkontext__ziel {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
}
.postkontext__ziel:hover,
.postkontext__ziel:focus-visible { border-color: var(--text-soft); }
.postkontext__ziel svg { width: 1em; height: 1em; flex: none; }

/* Die Art („Betrieb", „Tour") steht klein daneben - sie beantwortet die
   Frage, was das für ein Ding ist, ohne den Namen zu verdrängen. */
.postkontext__art {
  font-size: .8em;
  color: var(--text-soft);
}

/* Die Mehrfachauswahl im Formular. Höher als ein gewöhnliches Feld -
   eine Liste, bei der nur zwei Zeilen sichtbar sind, sieht aus wie ein
   Fehler. */
.select--mehrfach {
  min-height: 11rem;
  padding: .4rem;
}

/* Der aktive Verknüpfungsfilter in den Momenten (A-017). */
.momente__kontext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: 0 0 var(--space-4);
  padding: .55rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface-soft);
  font-size: var(--fs-md);
}
.momente__kontext-weg { color: var(--text-soft); }

/* „Beiträge aus der Community" am Betrieb (A-017). Ruhig gehalten - es
   ist ein Hinweis, keine Auszeichnung. */
.bizbilder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface-soft);
}
.bizbilder svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--text-soft); }
.bizbilder > span { flex: 1 1 14rem; }

/* ================================================================
   Sagenübersicht (A-021)
   ================================================================ */
.sagenfilter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: var(--space-5) 0 0;
}
.sagenfilter__knopf {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-md);
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
}
.sagenfilter__knopf:hover,
.sagenfilter__knopf:focus-visible { border-color: var(--text-soft); text-decoration: none; }
.sagenfilter__knopf--aktiv {
  border-color: var(--brand-navy);
  background: var(--brand-navy);
  color: var(--text-invert);
}
.sagenfilter__zahl { font-size: .78em; opacity: .7; }

.sagenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* Die Karte ist ein Nebeneinander aus Bildfläche und Text. Sie bleibt es
   auch, wenn die Illustrationen kommen — dann ersetzt ein <img> den
   Platzhalter, sonst ändert sich nichts. */
.sagenkarte {
  display: flex;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(160deg, var(--dark-soft), var(--brand-navy));
  color: var(--text-invert);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.sagenkarte:hover,
.sagenkarte:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  text-decoration: none;
}

/* Ausdrücklich KEINE Bildattrappe: gestrichelt, blass, beschriftet. Eine
   Fläche, die wie ein Foto aussieht, hält man für ein kaputtes Foto. */
.sagenkarte__bild {
  flex: 0 0 7.5rem;
  align-self: flex-start;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border: 1px dashed rgba(255,255,255,.24);
  border-radius: var(--radius-1);
  color: rgba(255,255,255,.42);
  text-align: center;
}
.sagenkarte__zeichen { width: 1.5rem; height: 1.5rem; }
.sagenkarte__folgt { font-size: .58rem; letter-spacing: .04em; line-height: 1.2; }

.sagenkarte__text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.sagenkarte__ort {
  font-size: var(--fs-tiny); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.sagenkarte__titel { font-size: var(--fs-lg); line-height: 1.2; font-weight: 600; }
.sagenkarte__teaser { font-size: var(--fs-md); color: rgba(255,255,255,.74); }
.sagenkarte__offen {
  margin-top: auto; font-size: var(--fs-tiny); letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.sagen-mehr { margin: var(--space-5) 0 0; }

/* „Mehr Bilder anzeigen" und das benannte Ende (A-010). */
.momente__mehr { margin: var(--space-6) 0 0; text-align: center; }
.momente__ende {
  margin: var(--space-6) 0 0;
  text-align: center;
  color: var(--text-soft);
  font-size: var(--fs-md);
}

/* Datumstrenner im Gespräch (A-011/A-016b). Eine Linie mit Beschriftung
   in der Mitte — dieselbe Form, die jeder Messenger benutzt, weil sie
   sofort verstanden wird. */
.verlauf__tag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
  list-style: none;
}
.verlauf__tag::before,
.verlauf__tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.verlauf__tag span {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ================================================================
   Sagenillustrationen (A-023)
   ================================================================ */

/* In der Kachel: Das Bild ersetzt die gestrichelte Fläche, behält aber
   deren Maße — die Anordnung bleibt dieselbe, ob mit Bild oder ohne. */
.sagenkarte__bild--foto {
  position: relative;
  border: 0;
  overflow: hidden;
  padding: 0;
}
.sagenkarte__bild--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-1);
}

/* Die Marke sitzt IM Bild, nicht daneben. Wer die Seite überfliegt, sieht
   Bild und Kennzeichnung zusammen — getrennt liest man nur das Bild. */
.sagenkarte__marke {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .2rem .3rem;
  font-size: var(--fs-micro);
  letter-spacing: .02em;
  line-height: 1.15;
  text-align: center;
  color: rgba(255,255,255,.92);
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, transparent);
  border-radius: 0 0 var(--radius-1) var(--radius-1);
}

/* Auf der Detailseite darf das Bild groß sein — dort ist Platz, und der
   Hinweis steht ausgeschrieben darunter. */
.sagenbild {
  margin: var(--space-6) 0;
}
.sagenbild__img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface-soft);
}
.sagenbild__unterschrift {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-width: 640px;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.4;
}
.sagenbild__herkunft { font-size: var(--fs-xs); opacity: .85; }

/* ==========================================================================
   Montis Hinweisleiste (A-029, erweitert mit A-032 am 18.08.2026)

   Eine schmale Zeile unter dem Hero: kleine Figur, der Name, dahinter bis
   zu fuenf Hinweise. Bewusst KEINE Sprechblase im Hero - dort steht die
   Figur rechts im Bild, und auf schmalen Geraeten wird sie ausgeblendet;
   eine Blase an ihr haette sich mit den Zahlen ueberlagert und waere mobil
   ganz verschwunden.

   ================== Warum die Hinweise keine Links sind =================

   Optisch, wohlgemerkt - klickbar sind sie natuerlich. Fuenf blaue,
   unterstrichene Woerter nebeneinander lesen sich wie eine Navigation, die
   man schon kennt und deshalb ueberliest. Ein kleines Feld mit Rubrik
   darueber und Namen darunter liest sich wie eine Nachricht.

   Deshalb: eigene Flaeche, weicher Grund, kein Unterstrich, keine
   Linkfarbe. Der Kicker traegt die Farbe, der Name traegt das Gewicht.
   ========================================================================== */

.monti {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* Die Figur ist 167 x 380 - hochkant. Auf 52 px Hoehe bleibt sie als
   kleiner Fengga erkennbar, ohne die Zeile zu dehnen. */
.monti__figur { display: block; height: 52px; width: auto; }

.monti__name {
  margin: 0;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-orange);
  white-space: nowrap;
}

/* Die Hinweise selbst.

   `overflow-x: auto` statt Umbruch auf breiten Schirmen: Fuenf Felder
   passen bei 1200 px nebeneinander, bei 900 px nicht mehr - und eine
   Leiste, die je nach Fensterbreite mal ein-, mal zweizeilig ist, laesst
   den Rest der Seite springen. Auf dem Telefon wird daraus ein Wischen,
   das man von Bildkarussellen kennt. */
.monti__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.monti__liste > li { flex: 0 0 auto; }

.montichip {
  display: grid; gap: .1rem;
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.montichip:hover,
.montichip:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface);
  text-decoration: none;
  transform: translateY(-1px);
}

.montichip__kicker {
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.montichip__text {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
  white-space: nowrap;
}

/* Was heute stattfindet, traegt die Markenfarbe im Kicker - es ist der
   einzige Hinweis mit einer Uhrzeit, und die ist heute noch zu schaffen. */
.montichip--event .montichip__kicker { color: var(--brand-orange); }

/* Bei einer Wetterwarnung wechselt der Rahmen die Farbe. Mehr nicht:
   Monti wiederholt die Warnung nicht und verschaerft sie nicht, er zeigt
   auf sie. Ein roter Kasten waere eine zweite Warnung neben der echten. */
.montichip--warnung { border-color: var(--warning); }
.montichip--warnung .montichip__kicker { color: #6B4A00; }

@media (max-width: 860px) {
  /* Auf schmalen Geraeten rutscht die Leiste unter Figur und Namen - sonst
     blieben fuer die Hinweise dreissig Pixel. Die Figur bleibt oben links
     stehen, damit klar ist, wer da spricht. */
  .monti { grid-template-columns: auto 1fr; }
  .monti__liste { grid-column: 1 / -1; }
  .monti__figur { height: 44px; }
}
/* ==========================================================================
   Statistik im Adminbereich (A-031, 17.08.2026)

   Zwei Bausteine, mehr braucht es nicht: die Befunde ganz oben - die
   Saetze, aus denen eine Aufgabe folgt - und eine schmale Liste fuer
   Pfade mit Zahl dahinter. Kacheln und Tabellen gibt es im Admin bereits
   (`.dashkacheln`, `.datentabelle`), sie werden hier weiterverwendet.
   ========================================================================== */

.befunde { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-2); }

.befund {
  display: grid; gap: .15rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--forest);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* „Achtung" heisst hier NICHT Fehler, sondern: Hier lohnt ein Blick.
   Deshalb Gold und nicht Rot - eine Statistik meldet keine Stoerung. */
.befund--achtung { border-left-color: var(--gold); }

.befund__titel { font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.befund__satz  { font-size: var(--fs-base); line-height: 1.5; }

.liste-schmal { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: .3rem; }
.liste-schmal li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding-bottom: .3rem; border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
}
.liste-schmal li:last-child { border-bottom: 0; }
.liste-schmal code { font-size: var(--fs-sm); word-break: break-all; }

/* Der kleine Admin-Zugang im Fussbereich (A-031).

   Unauffaellig, aber auffindbar: Er steht rechts in der Markenzeile und
   traegt die gedaempfte Textfarbe. Wer ihn nicht sucht, sieht ihn nicht;
   wer ihn sucht, findet ihn immer an derselben Stelle. */
.site-footer__marke {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-3);
}
.site-footer__admin {
  font-size: var(--fs-xs); letter-spacing: .04em;
  opacity: .6;
}
.site-footer__admin:hover,
.site-footer__admin:focus-visible { opacity: 1; }

/* ==========================================================================
   Leere Zeitraeume und leere Listen (A-034, 18.08.2026)

   BEFUND BEIM EINBAU: Die Klasse `.empty` wird auf drei Seiten verwendet -
   `/was-geht`, `/regional`, `/regional/essen` - und hatte im gesamten
   Stylesheet KEINE einzige Regel. Der leere Zustand war nackter Text auf
   nacktem Grund; eine Ueberschrift, ein Absatz, ein blauer Link.

   Das ist die Stelle, an der Besucher abspringen. Sie bekommt jetzt eine
   Flaeche, ein kleines Motiv und einen Knopf - und der Erklaersatz („wir
   erfinden nichts") rutscht nach unten und wird zur Fussnote. Er ist
   fachlich wichtig, aber er ist nicht die Auskunft, auf die jemand
   gewartet hat.
   ========================================================================== */

.empty {
  padding: var(--space-5) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.empty__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1rem, .93rem + .38vw, 1.2rem);
  line-height: 1.25;
}

/* Der Ausblick - der Satz, der die eigentliche Frage beantwortet. */
.empty__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-base); line-height: 1.55;
  color: var(--text);
  max-width: 42rem;
}

.empty__action {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

/* Die Fussnote: kleiner, gedaempft, aber vollstaendig lesbar. */
.empty__text {
  margin: 0;
  font-size: var(--fs-sm); line-height: 1.55;
  color: var(--text-muted);
  max-width: 42rem;
}

/* Mit Motiv: Bild links, Text rechts. Das Motiv ist Beiwerk und rueckt
   deshalb als Erstes weg, wenn es eng wird. */
.empty--ausblick {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

.empty__motiv {
  display: block;
  width: auto; height: 140px;
  border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
  .empty--ausblick { grid-template-columns: 1fr; gap: var(--space-3); }
  .empty__motiv { height: 110px; }
}

/* ==========================================================================
   28. Bauernkalender (05.09.2026)

   Der Hinweis im Hero und das Fenster dahinter.

   ================== Warum nicht in der Kopfzeile ==================

   Dort stand er zuerst. Die Kopfzeile ist aber Navigation - sie sagt,
   wohin man kann. Der Kalender sagt, was heute ansteht, und gehoert
   damit zu den Zahlen im Hero ("25 Veranstaltungen heute"), die dieselbe
   Frage beantworten. Er steht ueber ihnen: Die Zahlen zaehlen, der
   Kalender raet - und was raet, gehoert nach oben.

   Der Hero ist dunkel; die Farben sind deshalb hell auf durchscheinendem
   Grund, nicht die Kartenfarben der uebrigen Seite.
   ========================================================================== */

.hero__bauern {
  display: block;
  margin-bottom: 0;
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff; text-decoration: none;
  /* Auf dem dunklen Hero leuchtet der Mond, statt zu verschwinden. */
  --mond-hell: #F3D27A;
  --mond-dunkel: rgba(255, 255, 255, .22);
}
.hero__bauern:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .38);
  color: #fff; text-decoration: none;
}
.hero__bauern-kopf {
  display: block;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.hero__bauern-was {
  display: block;
  font-size: var(--fs-base); font-weight: 650;
  margin: .1rem 0 .15rem;
}
.hero__bauern-mond {
  display: flex; align-items: center; gap: .35rem;
  font-size: var(--fs-tiny); color: rgba(255, 255, 255, .72);
}
.hero__bauern-mond .mond { width: 1em; height: 1em; }

/* ------------------------------------------ „Mein Betrieb fehlt hier" */

/*
   Die Kachel steht ueber dem Bauernkalender und sieht ihm bewusst
   aehnlich: gleiche Breite, gleicher Rahmen, gleiche Sprache. Sie ist
   aber eine FRAGE und keine Auskunft - deshalb der gepunktete Rahmen.
   Er sagt „hier ist etwas offen", ohne zu blinken.
*/
.hero__fehlt {
  display: block;
  width: 100%;
  /* Aus dem Knopf einen Kasten machen: kein Rand, keine Systemfarbe. */
  text-align: left;
  font: inherit;
  cursor: pointer;
  margin-bottom: 0;
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  color: #fff; text-decoration: none;

  /*
     ============ Sichtbarkeit (06.09.2026, auf Hinweis des Betreibers) ===

     Der Kasten stand mit weissem Schleier (5 % Deckung) und gepunktetem
     Rand auf einem Foto, auf dem Berge, Wiese und Himmel hell sind. Auf
     dem Bildschirm war er da; auf dem Foto war er weg.

     Jetzt traegt er dieselbe dunkle Flaeche wie der Bauernkalender
     darunter - nur eine Spur dichter, weil er als einziger Kasten eine
     FRAGE stellt und deshalb zuerst gesehen werden soll. Dazu ein
     orangener Streifen an der Seite: Orange ist auf dieser Seite die
     Farbe fuer „hier kannst du etwas tun".
  */
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 3px solid var(--orange);
  background: rgba(0, 21, 49, .62);
}
.hero__fehlt:hover,
.hero__fehlt:focus-visible {
  background: rgba(0, 21, 49, .78);
  border-color: rgba(255, 255, 255, .38);
  border-left-color: var(--orange);
  color: #fff; text-decoration: none;
}
.hero__fehlt-frage {
  display: block;
  font-size: var(--fs-sm); line-height: 1.35;
  color: rgba(255, 255, 255, .92);
}
.hero__fehlt-tun {
  display: block; margin-top: .25rem;
  font-size: var(--fs-md); font-weight: 700;
  color: var(--orange);
}
.hero__fehlt:hover .hero__fehlt-tun { color: #FFA53D; }

/*
   Die schnelle Suche unter dem Melde-Kasten.

   Sie steht auf dem dunklen Hero und muss dort lesbar sein, ohne wie ein
   zweites Hauptelement zu wirken: heller Rahmen, durchscheinender Grund.
   Die Trefferliste dagegen ist eine gewoehnliche helle Flaeche - sie
   gehoert nicht mehr zum Bild, sondern zur Antwort.
*/
.hero__finden {
  position: relative;
  display: flex; align-items: center; gap: .35rem;
  margin-bottom: 0;
  padding: .25rem .3rem .25rem .8rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
  /* Dieselbe Flaeche wie die Kaesten daneben - siehe hero__fehlt. */
  background: rgba(0, 21, 49, .58);
}
.hero__finden:focus-within {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(0, 21, 49, .78);
}
.hero__finden-feld {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; color: #fff;
  font: inherit; font-size: var(--fs-sm);
  padding: .2rem 0;
}
.hero__finden-feld::placeholder { color: rgba(255, 255, 255, .78); }
.hero__finden-feld:focus { outline: none; }
/* Das eigene X von type="search" passt nicht ins Bild. */
.hero__finden-feld::-webkit-search-cancel-button { display: none; }

.hero__finden-knopf {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; padding: 0;
  border: 0; border-radius: 50%;
  /* Der einzige farbige Punkt im Feld: Hier wird gesucht. */
  background: var(--orange);
  color: var(--brand-navy); cursor: pointer;
}
.hero__finden-knopf:hover { background: #FFA53D; }
.hero__finden-knopf svg { width: 1rem; height: 1rem; }

/*
   Die Trefferliste haengt unter dem Feld und darf ueber allem liegen -
   sonst schiebt sie bei jedem Buchstaben den halben Hero nach unten.
*/
/*
   Breiter als das Feld.

   Die Spalte im Hero ist schmal - im Versuch am 06.09.2026 stand dort
   „Ausflug Kristb...", „Vom Kristberg übers Mut...". Ein Treffer, dessen
   Name abgeschnitten ist, ist kein Treffer, sondern ein Raten.

   Die Liste waechst deshalb nach LINKS aus dem Feld heraus (rechts
   buendig, Mindestbreite). Nach rechts waere kein Platz - dort steht der
   Rand des Hero.
*/
.hero__finden-liste {
  position: absolute; z-index: 30;
  top: calc(100% + .35rem); right: 0; left: auto;
  width: max(100%, 24rem);
  max-width: calc(100vw - 2rem);
  max-height: 22rem; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 21, 49, .28);
}
.hero__finden-treffer {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.hero__finden-treffer:last-of-type { border-bottom: 0; }
.hero__finden-treffer:hover,
.hero__finden-treffer:focus-visible {
  background: var(--surface-soft);
  color: var(--text); text-decoration: none;
}
.hero__finden-titel {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-md); font-weight: 600;
  line-height: 1.3;
  /* Zwei Zeilen sind besser als drei Punkte. */
  overflow-wrap: anywhere;
}
.hero__finden-bereich {
  flex: none;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.hero__finden-mehr {
  display: block; padding: .5rem .7rem;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  font-size: var(--fs-xs); font-weight: 650;
}
.hero__finden-leer {
  margin: 0; padding: .7rem;
  color: var(--text-muted); font-size: var(--fs-sm);
}

/*
   „Sag uns deine Meinung" - der Kasten in der Seitenmitte.

   Er soll auffallen, ohne wie Werbung auszusehen: heller Grund mit
   orangenem Rand statt einer vollflaechigen Farbe. Auf einer Seite, die
   sonst weiss und sandfarben ist, reicht das - eine orange Flaeche in der
   Mitte haette wie ein Banner gewirkt, und Banner werden uebersehen.
*/
.meinung {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.meinung__text { flex: 1 1 22rem; min-width: 0; }
.meinung__kicker {
  margin: 0 0 .15rem;
  font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-dark);
}
.meinung__titel {
  margin: 0 0 .3rem;
  font-size: var(--fs-xl); line-height: 1.25;
}
.meinung__zeile {
  margin: 0;
  font-size: var(--fs-md); color: var(--text-muted);
  max-width: 46ch;
}
.meinung__knopf { flex: none; }

/*
   Das Wort „Meinung" neben „Alles heute".

   Es sieht aus wie der Link daneben und ist doch ein Knopf - deshalb
   werden ihm die Knopf-Vorgaben abgewoehnt. Ein Link waere hier falsch:
   Er fuehrt nirgendwohin, er oeffnet ein Fenster.

   Der senkrechte Strich davor trennt die beiden, ohne ein zweites
   Element zu sein.
*/
/* Im Fuss sieht der Knopf aus wie die Links daneben. */
.site-footer__knopf {
  padding: 0; border: 0; background: none;
  font: inherit; cursor: pointer;
  color: inherit; text-decoration: underline;
  text-underline-offset: .18em;
}

/*
   Die Frage steht als eigene Zeile hinter dem Hero - mittig, in der
   Groesse eines Fliesstextes, aber halbfett. Gross genug, um beim
   Vorbeiscrollen haengen zu bleiben; klein genug, um keine Ueberschrift
   zu sein. Sie konkurriert nicht mit „Heute als Naechstes" darunter.
*/
.meinungszeile { margin: var(--space-3) 0 var(--space-4); text-align: center; }
.meinungszeile__knopf {
  padding: .35rem .6rem;
  border: 0; background: none;
  font: inherit; font-size: var(--fs-base); font-weight: 650;
  cursor: pointer;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--orange);
}
.meinungszeile__knopf:hover,
.meinungszeile__knopf:focus-visible { color: var(--orange-dark); }

/*
   In der Kopfzeile (06.09.2026): Die Frage sitzt zwischen „Heute als
   Naechstes" und „Alles heute" und bekommt deshalb keine eigene Zeile
   mehr - also auch keine Aussenabstaende, die den Kopf auseinanderziehen
   wuerden. Etwas kleiner als freistehend, damit sie neben der
   Ueberschrift nicht wie eine zweite Ueberschrift wirkt.
*/
.meinungszeile--kopf { margin: 0; text-align: center; }
.meinungszeile--kopf .meinungszeile__knopf { font-size: var(--fs-base); padding: 0 .2rem; }

.naechstes__meinung-zeile {
  margin: var(--space-4) 0 0;
  text-align: center;
}
/*
   Es sieht aus wie ein Link und ist doch ein Knopf - deshalb werden ihm
   die Knopf-Vorgaben abgewoehnt. Ein Link waere hier falsch: Er fuehrt
   nirgendwohin, er oeffnet ein Fenster.
*/
.naechstes__meinung {
  padding: .2rem .4rem; border: 0; background: none;
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: rgba(95, 104, 116, .4);
}
.naechstes__meinung:hover,
.naechstes__meinung:focus-visible {
  color: var(--orange-dark);
  text-decoration-color: currentColor;
}

/*
   Die knappe Fassung steht mitten im Seitenkopf (etwa auf /jobs) und darf
   dort nicht so viel Gewicht haben wie der Kasten in der Seitenmitte -
   dort ist sie das Thema, hier eine Beigabe.
*/
.meinung--knapp {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-soft);
}
.meinung--knapp .meinung__titel { font-size: var(--fs-base); }
.meinung--knapp .meinung__zeile { font-size: var(--fs-sm); }

/*
   Die Reiter im Melde-Fenster. Sie tragen die ganze Erweiterung: Aus
   „mein Betrieb fehlt" wurde „was fehlt" - Betrieb, Termin, Tour,
   Geschichte. Umbrechen duerfen sie, weil vier deutsche Woerter auf
   einem Handy nicht in eine Zeile passen.
*/
.fehlt-reiter {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: var(--space-4);
}
.fehlt-reiter__knopf {
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
}
.fehlt-reiter__knopf:hover { border-color: var(--text-muted); }
.fehlt-reiter__knopf.ist-aktiv {
  border-color: transparent;
  background: var(--enzian);
  color: #fff;
}

.fehlt-feld__eingabe--gross {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.45;
}

.fehlt-fenster {
  width: min(460px, calc(100vw - 32px));
  max-height: min(84vh, 680px);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
}
.fehlt-fenster::backdrop { background: rgba(0, 21, 49, .45); }
.fehlt-fenster__zu { float: right; margin: -.4rem -.4rem 0 0; }
.fehlt-fenster__zu .btn { font-size: var(--fs-lg); line-height: 1; padding: .1rem .5rem; min-height: 0; }
.fehlt-fenster__titel { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
.fehlt-fenster__vor { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-md); }
.fehlt-fenster__ergebnis { font-size: var(--fs-base); margin: 0 0 var(--space-2); }
.fehlt-fenster__knoepfe { margin-top: var(--space-4); }
.fehlt-fenster__fehler {
  margin: var(--space-3) 0 0;
  color: var(--enzian);
  font-size: var(--fs-sm);
}

/*
   `hidden` muss hier gewinnen.

   Der Knopf „Betrieb ansehen" ist ein `.btn` und damit `inline-flex` -
   und `display` schlaegt das HTML-Attribut `hidden`. Im Versuch am
   06.09.2026 stand deshalb im Fall „nichts gefunden" ein leeres oranges
   Rechteck unter dem Text: ein Knopf ohne Aufschrift, der nirgendwohin
   fuehrt.
*/
.fehlt-fenster [hidden] { display: none !important; }

.fehlt-feld { display: block; margin-bottom: var(--space-3); }
.fehlt-feld__name {
  display: block; margin-bottom: .25rem;
  font-size: var(--fs-xs); font-weight: 650;
}
.fehlt-feld__zusatz { font-weight: 400; color: var(--text-muted); }
.fehlt-feld__eingabe {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: var(--fs-md);
}
.fehlt-feld__eingabe:focus-visible {
  outline: 2px solid var(--enzian);
  outline-offset: 1px;
}

/*
   Die Suche dauert - Overpass antwortet in ein bis fuenfzehn Sekunden.
   Drei Punkte sagen „es laeuft noch", ohne einen Fortschritt zu
   behaupten, den niemand kennt.
*/
.fehlt-fenster__laeuft {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--text-muted); font-size: var(--fs-md);
}
.fehlt-fenster__punkte { display: inline-flex; gap: .25rem; flex: none; }
.fehlt-fenster__punkte i {
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--enzian);
  animation: fehlt-punkt 1.2s infinite ease-in-out;
}
.fehlt-fenster__punkte i:nth-child(2) { animation-delay: .18s; }
.fehlt-fenster__punkte i:nth-child(3) { animation-delay: .36s; }

@keyframes fehlt-punkt {
  0%, 80%, 100% { opacity: .25; }
  40%           { opacity: 1; }
}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .fehlt-fenster__punkte i { animation: none; opacity: .6; }
}

/* ---------------------------------------------------------- Das Fenster */

.bauern-fenster {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
}
.bauern-fenster::backdrop { background: rgba(0, 21, 49, .45); }
.bauern-fenster__zu { float: right; margin: -.4rem -.4rem 0 0; }
.bauern-fenster__zu .btn { font-size: var(--fs-lg); line-height: 1; padding: .1rem .5rem; min-height: 0; }
.bauern-fenster__titel { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }

/* ---------------------------------------------------------- Der Inhalt */

.bauern__stand {
  font-size: var(--fs-xs); color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.bauern__gruppe {
  display: inline-block; margin-left: .35rem;
  padding: .1rem .4rem; border-radius: var(--radius-pill);
  background: var(--surface-soft); font-size: var(--fs-tiny); font-weight: 700;
}
.bauern__heute { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.bauern__heute li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.bauern__heute li:last-child { border-bottom: 1px solid var(--border); }
.bauern__heute strong { display: block; margin-bottom: .2rem; }
.bauern__heute span { font-size: var(--fs-sm); color: var(--text-muted); }
.bauern__leer { font-size: var(--fs-md); color: var(--text-muted); }

.bauern__titel { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
                 color: var(--text-muted); margin: 0 0 var(--space-2); }
.bauern__liste { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.bauern__liste li {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: .1rem .6rem;
  padding: .5rem 0; border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.bauern__tag { font-weight: 700; }
.bauern__was { }
.bauern__mond { grid-column: 2; font-size: var(--fs-tiny); color: var(--text-muted); }

.bauern__quelle {
  font-size: var(--fs-tiny); line-height: 1.5; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: var(--space-3); margin: 0;
}

/* --------------------------------------------------------------------------
   Erfahrungen zum Bauernkalender (07.09.2026)

   Der Weg von der Tagesauskunft zur Regel, und die Uebersicht am Fuss der
   Seite. Beides bewusst leise: Der Kalender soll zuerst sagen, was heute
   ansteht - die Einladung zum Mitschreiben steht daneben, nicht davor.
   -------------------------------------------------------------------------- */

/* Eigene Zeile: Der Satz oben erklaert die Regel, der Link fuehrt weg -
   die beiden duerfen nicht ineinanderlaufen. */
.bauern__heute li > span { display: block; }
.bauern__erfahrung {
  display: inline-block; margin-top: .35rem;
  font-size: var(--fs-tiny); font-weight: 600;
  color: var(--brand-orange); text-decoration: none;
}
.bauern__erfahrung::after { content: " \2192"; }
.bauern__erfahrung:hover, .bauern__erfahrung:focus-visible { text-decoration: underline; }

/* Auf der Regelseite: „Heute ist so ein Tag." - die Antwort auf die erste
   Frage, die jeder an eine Mondregel hat. */
.bauern__heutehinweis {
  margin: 0 0 var(--space-3); padding: var(--space-3);
  border-left: 3px solid var(--brand-orange);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
}

.regel__daten {
  display: grid; gap: var(--space-2);
  margin: 0 0 var(--space-4); padding: 0;
}
@media (min-width: 560px) { .regel__daten { grid-template-columns: 1fr 1fr; } }
.regel__daten > div {
  border-top: 1px solid var(--border); padding-top: var(--space-2);
}
.regel__daten dt {
  font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0 0 .2rem;
}
.regel__daten dd { margin: 0; font-size: var(--fs-sm); }

.regelliste { list-style: none; margin: 0; padding: 0; }
.regelliste__zeile { border-top: 1px solid var(--border); }
.regelliste__zeile:last-child { border-bottom: 1px solid var(--border); }
.regelliste__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; text-decoration: none; color: inherit;
}
.regelliste__link:hover .regelliste__titel,
.regelliste__link:focus-visible .regelliste__titel { text-decoration: underline; }
.regelliste__titel { font-weight: 600; }
.regelliste__zahl {
  flex: none; font-size: var(--fs-tiny); color: var(--text-muted); white-space: nowrap;
}

/* ==========================================================================
   29. Lesbarkeit im Hero (05.09.2026)

   Das Hintergrundbild traegt jetzt deutlich mehr (Abschnitt oben). Damit
   steht die weisse Schrift stellenweise auf hellem Grund - auf dem Dorf im
   Tal, auf besonnten Wiesen. Frueher war das kein Thema, weil das Bild
   ohnehin fast verschwand.

   Die Loesung ist ein Schatten an der Schrift und nicht mehr Farbe ueber
   dem Bild: Ein Schatten wirkt genau dort, wo Text steht, und laesst das
   Foto sonst in Ruhe. Eine weitere Abdunklung haette den ganzen Berg
   wieder eingetruebt, um vier Zeilen lesbar zu machen.

   Die Werte sind bewusst weich (grosse Streuung, niedrige Deckkraft) -
   ein harter Schatten sieht nach Textverarbeitung aus.
   ========================================================================== */

.hero__title {
  text-shadow: 0 2px 24px rgba(0, 21, 49, .55), 0 1px 3px rgba(0, 21, 49, .4);
}

.hero__date,
.hero__eyebrow,
.hero__question,
.hero__stat-value,
.hero__stat-label,
.vorschau__titel,
.vorschau__quelle {
  text-shadow: 0 1px 12px rgba(0, 21, 49, .7), 0 1px 2px rgba(0, 21, 49, .5);
}

/* Die Wetterkacheln und der Kalenderkasten liegen als eigene Flaechen auf
   dem Bild - sie brauchen etwas mehr Deckung, seit darunter das Foto
   sichtbar ist, sonst schimmert der Berg durch die Zahlen. */
.hero__bauern { background: rgba(0, 21, 49, .55); }
.hero__bauern:hover { background: rgba(0, 21, 49, .7); }

/*
   ============ Die Zahlen bekommen eine Flaeche (06.09.2026) ============

   „18 Veranstaltungen heute" stand frei auf dem Foto und hatte nur einen
   Textschatten. Bei einem hellen Bild reicht das fuer eine Ueberschrift,
   nicht fuer eine Zeile in Grossbuchstaben - und genau diese Zeile ist
   der Weg zu den Terminen.

   Jetzt steht sie auf derselben dunklen Flaeche wie die Kaesten darueber.
   Damit liest sich die ganze Spalte als eine Reihe: fragen, suchen,
   Kalender, Zahlen.
*/
.hero__stats {
  margin: 0;
  /*
     Schmales Innenmass: „VERANSTALTUNGEN HEUTE" ist lang, die Spalte im
     Hero schmal. Mit dem ueblichen Innenabstand brach die Zeile mitten im
     Wort um - zwei Zeilen Grossbuchstaben lesen sich schlechter als eine.
  */
  padding: .5rem .65rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  background: rgba(0, 21, 49, .5);
}
/* Auf der Flaeche traegt der Schatten nichts mehr bei - er macht die
   Zahlen nur unscharf. */
.hero__stats .hero__stat-value,
.hero__stats .hero__stat-label { text-shadow: none; }

.hero__stat-label {
  color: rgba(255, 255, 255, .82);
  /* Weniger Sperrung, damit die Zeile in die Spalte passt. */
  letter-spacing: .07em;
}

/* Der Fragesatz darunter gehoert zum Knopf und darf so deutlich sein
   wie er. */
.hero__question { font-weight: 700; }

/* ==========================================================================
   30. Bilder gross ansehen (05.09.2026)

   Das Fenster hinter jedem Bild und die Vorschau der Dateien, die man
   gerade ausgewaehlt hat.

   ================== Warum schwarz und nicht wie die Seite ==============

   Ein Bild beurteilt man neben dem, was daneben liegt. Der helle
   Seitengrund faerbt die Wahrnehmung - deshalb steht das grosse Bild vor
   fast schwarzem Grund, wie in jedem Bildbetrachter.
   ========================================================================== */

.bildschau {
  width: min(96vw, 1400px);
  max-width: 96vw;
  height: min(92vh, 1000px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: var(--space-2);
}
.bildschau::backdrop { background: rgba(6, 10, 18, .92); }

.bildschau__bild {
  grid-column: 2; grid-row: 1;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  /* Ein heller Rahmen faellt bei hellen Bildern weg, ein Schatten nie. */
  box-shadow: 0 12px 48px rgba(0, 0, 0, .6);
}

.bildschau__zu {
  position: absolute; top: 8px; right: 10px;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.bildschau__zu:hover { background: rgba(255, 255, 255, .24); }

.bildschau__pfeil {
  width: 48px; height: 72px;
  border: 0; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
}
.bildschau__pfeil:hover { background: rgba(255, 255, 255, .22); }
.bildschau__pfeil--links  { grid-column: 1; grid-row: 1; }
.bildschau__pfeil--rechts { grid-column: 3; grid-row: 1; }

.bildschau__fuss {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: baseline; justify-content: center;
  gap: var(--space-3); flex-wrap: wrap;
  margin: 0; padding: var(--space-2) var(--space-3);
  color: rgba(255, 255, 255, .82); font-size: var(--fs-sm); text-align: center;
}
.bildschau__zaehler { color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }

@media (max-width: 599px) {
  /* Am Telefon wischt man, statt einen 48-px-Pfeil zu treffen. */
  .bildschau__pfeil { display: none; }
  .bildschau { grid-template-columns: 1fr; }
  .bildschau__bild { grid-column: 1; }
  .bildschau__fuss { grid-column: 1; }
}

/* Bilder, die sich gross ansehen lassen, zeigen das auch. */
a[data-gross] { display: block; cursor: zoom-in; }
a[data-gross] img { display: block; }

/* ------------------------------- Die Auswahl im Erstellen-Formular */

.bildwahl {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.bildwahl__eintrag {
  position: relative;
  width: 104px;
}
.bildwahl__eintrag img {
  width: 104px; height: 104px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.bildwahl__marke {
  position: absolute; left: 4px; bottom: 4px;
  padding: .1rem .4rem; border-radius: var(--radius-pill);
  background: var(--brand-navy); color: var(--text-invert);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
}
.bildwahl__hinweis {
  flex: 1 1 100%;
  font-size: var(--fs-xs); color: var(--danger);
}

/*
   Wegnehmen, was man versehentlich erwischt hat (06.09.2026).

   Seit die Fotos gesammelt werden, ersetzt eine neue Auswahl die alte
   nicht mehr - also braucht es einen Weg zurueck. Der Knopf sitzt in der
   Ecke des Bildes, ist aber 32 px gross: am Telefon getippt, nicht
   gezielt.
*/
.bildwahl__weg {
  position: absolute; top: 4px; right: 4px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: var(--fs-md); line-height: 1; cursor: pointer;
}
.bildwahl__weg:hover,
.bildwahl__weg:focus-visible { background: var(--danger); }



/* ==========================================================================
   Navigation darf umbrechen (05.09.2026)
   ==========================================================================

   Mit „Bilder aus dem Tal" sind es acht Punkte. In eine Zeile passen sie
   ab 1100 px nicht mehr — vorher standen dort sieben, und schon die waren
   knapp (siehe den Vermerk bei .main-nav zum Platzverhalten).

   Statt die Navigation zu teilen, bricht sie um: Alle acht Bereiche
   stehen gleichberechtigt beieinander, in derselben Schrift und Farbe.
   Eine abgesetzte zweite Leiste haette eine Rangordnung behauptet, die es
   nicht gibt.

   Das ueberschreibt bewusst das `flex-wrap: nowrap` weiter oben. Der dort
   genannte Grund — die Kontoaktionen wandern nach rechts hinaus — gilt
   nur, solange die Navigation NICHT umbrechen darf: Genau der Umbruch
   nimmt ihr ja die Breite, die sie sonst dem Rest wegnimmt.
   ========================================================================== */

.main-nav ul {
  flex-wrap: wrap;
  /* Enger als die urspruenglichen --space-5: Acht Punkte mit dem alten
     Abstand brauchen auch zweizeilig zu viel Platz. */
  gap: var(--space-2) var(--space-4);
}

/*
   Die Kopfzeile ist damit nicht mehr eine Zeile hoch. `align-items` von
   der Mitte auf den Anfang: Sonst haengt das Logo bei zweizeiliger
   Navigation in der Luft.
*/
@media (min-width: 1100px) {
  .site-header__inner { align-items: center; }
}

/*
   Fuer alles, was sich unter der Kopfzeile festsetzt (derzeit die
   Ortsliste des Bildarchivs). Bewusst grosszuegig statt gemessen: Ob die
   Navigation ein- oder zweizeilig steht, haengt von der Fensterbreite ab,
   und eine Spalte, die ein paar Pixel zu tief beginnt, faellt niemandem
   auf — eine, die unter der Kopfzeile verschwindet, schon.
*/
:root { --header-gesamt: calc(var(--header-height) + 2rem); }


/* ==========================================================================
   Menue-Knopf in der Fussleiste (05.09.2026)
   ==========================================================================

   Der fuenfte Platz war „Ich". Damit fehlten auf dem Telefon vier von
   acht Bereichen — die Kopfnavigation ist unter 1100 px ausgeblendet,
   es gab also gar keinen Weg zu Regional, Heimat, Events oder dem
   Bildarchiv.

   Gebaut mit <details>: Der Browser oeffnet und schliesst selbst, mit
   Tastatur und Vorlesehilfe, auch ohne JavaScript.
   ========================================================================== */

.bottom-nav__menue {
  /* Fuer das Panel, das darueber aufklappt. */
  position: relative;
  display: flex;
  flex: 1;
}

/* Der Schalter sieht aus wie die uebrigen Punkte der Leiste. */
.bottom-nav__menue > summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: var(--space-1) 0;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

.bottom-nav__menue > summary::-webkit-details-marker { display: none; }
.bottom-nav__menue[open] > summary { color: var(--orange-dark); }

/*
   Der Grund hinter dem Panel faengt Klicks daneben ab. Ohne ihn muesste
   man den Schalter exakt wieder treffen, um zu schliessen — auf einem
   Telefon eine Zumutung.

   Er haengt am ::before des offenen <details>, damit kein zusaetzliches
   Element ins Markup muss, das ohne JavaScript nur im Weg staende.
*/
.bottom-nav__menue[open]::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 21, 49, .45);
  z-index: -1;
}

.mobilmenue {
  position: absolute;
  bottom: 100%;
  right: 0;
  z-index: 1;
  width: min(17rem, calc(100vw - var(--space-4)));
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: var(--shadow-float);
  padding: var(--space-3);
  text-align: left;
}

.mobilmenue__titel {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: var(--space-2) 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.mobilmenue__titel:first-child { margin-top: 0; }

.mobilmenue__liste { list-style: none; margin: 0; padding: 0; }

.mobilmenue__liste a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-1);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-md);
}

.mobilmenue__liste a:hover { color: var(--orange-dark); }

.mobilmenue__liste a[aria-current="page"] {
  color: var(--orange-dark);
  background: var(--orange-soft);
  border-radius: var(--radius-xs);
}

/* Ab 1100 px fuehrt die Kopfzeile, die Fussleiste ist ohnehin aus. */
@media (min-width: 1100px) {
  .bottom-nav__menue { display: none; }
}


/* ==========================================================================
   Partnerjobs (Laendlejob-Widget)
   ========================================================================== */

.partnerjobs__unterzeile {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin: var(--space-1) 0 0;
}

/*
   Der Rahmen bekommt die Breite des Inhalts und nie mehr. `overflow:
   hidden` faengt ab, wenn das fremde Widget breiter rendert als
   angekuendigt — sonst haette die ganze Seite einen waagrechten
   Rollbalken, und zwar auf jedem Telefon.
*/
.partnerjobs__rahmen {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.partnerjobs__frame {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

.partnerjobs__nachweis {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}

/* Kurzfassung und Herkunft auf der Jobkarte (05.09.2026) */
.jobcard__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}

/* Externe Anzeigen sind als solche gekennzeichnet — beworben wird bei
   der Quelle, und das muss vor dem Klick erkennbar sein. */
.jobcard__quelle {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* Herkunftsblock auf der Jobdetailseite (05.09.2026) */
.jobquelle {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--surface-soft);
  border-left: 3px solid var(--brand-navy);
  border-radius: var(--radius-sm);
}

.jobquelle__zeile { margin: 0 0 var(--space-2); }

.jobquelle__hinweis {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
  max-width: 60ch;
}

/* Gesperrter Teil der Schnittstellen-Anleitung (05.09.2026) */
.apidoku__sperre {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}
.apidoku__sperre h2 { margin-top: 0; }
.apidoku__sperre p { max-width: 60ch; }
.apidoku__sperre p { max-width: 60ch; }


/* Beitraege der Bevoelkerung zu Heimat-Artikeln (05.09.2026) */
.contribute__form { margin-top: var(--space-4); text-align: left; }
.contribute__form .form__label:first-of-type { margin-top: 0; }

/*
   Deutlich abgesetzt vom recherchierten Text: Der Artikel oben ist
   belegt, das hier ist Erinnerung. Die Seite verspricht diese Trennung
   ausdruecklich — sie muss auch sichtbar sein.
*/
.ueberliefert {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 2px solid var(--text);
  text-align: left;
}

.ueberliefert__titel {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.ueberliefert__anzahl {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ueberliefert__eintrag {
  background: var(--surface);
  border-left: 3px solid var(--brand-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.ueberliefert__text { margin: 0 0 var(--space-2); line-height: 1.7; max-width: 62ch; }

.ueberliefert__zeichnung {
  margin: 0; font-size: var(--fs-sm); color: var(--text-muted); font-style: italic;
}

.ueberliefert__hinweis {
  font-size: var(--fs-xs); color: var(--text-muted); margin: var(--space-3) 0 0;
}
/* Zugeklapptes Beitragsformular (05.09.2026) */
.contribute__klapp {
  margin-top: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
}

/* Der Schalter sieht aus wie ein Knopf — denn er ist einer. */
.contribute__schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  color: var(--orange-dark);
  cursor: pointer;
  list-style: none;
}

.contribute__schalter::-webkit-details-marker { display: none; }
.contribute__schalter:hover { background: var(--orange-soft); }

.contribute__klapp[open] .contribute__pfeil { transform: rotate(180deg); }
.contribute__pfeil { transition: transform .15s ease; }

.contribute__klapp[open] .contribute__schalter {
  border-bottom: 1px solid var(--border);
}

.contribute__klapp .contribute__form { padding: 0 var(--space-4) var(--space-4); margin-top: 0; }


/* „In Google Maps öffnen" unter der Karte (05.09.2026) */
.mapbox__aktion { margin: var(--space-2) 0 0; }
.btn--klein { font-size: var(--fs-sm); padding: var(--space-2) var(--space-3); min-height: 40px; }
/* Die drei Wege zum Einliefern (05.09.2026) */
.wege { margin: var(--space-4) 0 var(--space-6); }

.weg {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: var(--space-3);
}

.weg__kopf {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-3) var(--space-4);
  cursor: pointer; list-style: none;
}
.weg__kopf::-webkit-details-marker { display: none; }
.weg__kopf:hover { background: var(--orange-soft); }

/* Die Nummer macht auf einen Blick klar, dass es eine Reihenfolge gibt —
   von einfach nach aufwendig. */
.weg__nummer {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-pill);
  background: var(--brand-navy); color: var(--text-invert);
  font-weight: 800; font-size: var(--fs-md);
}

.weg__titel { flex: 1; display: flex; flex-direction: column; font-weight: 700; }

.weg__fuer {
  font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px;
}

.weg__pfeil { flex: none; color: var(--text-muted); transition: transform .15s ease; }
.weg[open] .weg__pfeil { transform: rotate(180deg); }
.weg[open] .weg__kopf { border-bottom: 1px solid var(--border); }

.weg__inhalt { padding: var(--space-4); }
.weg__inhalt > p { max-width: 62ch; }
.weg__liste { margin: 0 0 var(--space-3) var(--space-4); line-height: 1.7; }

/* Der technische Weg ist optisch ruhiger — er soll niemanden anspringen,
   der ihn nicht braucht. */
.weg--technisch .weg__nummer { background: var(--text-muted); }


/* Sprungmarken „Auf dieser Seite" (05.09.2026) */
.seitensprung {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.seitensprung__label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}

.seitensprung a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: var(--space-1) var(--space-3);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600;
}

.seitensprung a:hover {
  background: var(--orange-soft); border-color: var(--brand-orange);
  color: var(--orange-dark);
}

/* Sonst verschwindet die angesprungene Überschrift unter der Kopfzeile. */
.section-title[id] { scroll-margin-top: calc(var(--header-gesamt) + var(--space-4)); }

/* ==========================================================================
   Symbolbilder (A-030, 05.09.2026)

   Zwei Formen, mehr braucht es nicht:

   `.kopfbild` stellt das Motiv NEBEN den Kopftext — auf dem Schreibtisch
   etwa 55 zu 45, auf dem Telefon darunter. Nicht dahinter: Die vorhandenen
   Motive (Hero, Entdecken, Was geht) liegen halbdurchsichtig hinter der
   Schrift, und das ist dort richtig, weil sie Stimmung tragen. Ein
   Erntekorb oder eine Werkbank sind aber Gegenstände; hinter Text
   verblasst, saehe man nur noch braune Flaechen.

   `.symbolbild` steht an einem einzelnen Eintrag — Tour, Stelle, Betrieb.
   Es folgt `.sagenbild` in Aufbau und Massen, denn es ist derselbe Fall:
   ein erzeugtes Bild mit sichtbarer Kennzeichnung darunter.

   Die Hoehen (mobil 180–220, Schreibtisch 260–340) stammen aus dem Auftrag
   und sind mit `clamp()` gesetzt, damit zwischen den beiden Enden nichts
   springt.
   ========================================================================== */
.kopfbild { display: grid; gap: var(--space-5); align-items: center; }

/*
   `min-width: 0` ist hier kein Zierrat: Ein Rasterfeld ist von sich aus
   mindestens so breit wie sein laengstes Wort. „Veranstaltungen." in der
   Schaugroesse waere in der schmaleren Spalte breiter als die Spalte - und
   das Raster waere ueber den Rand hinausgewachsen, statt umzubrechen.
*/
.kopfbild__text, .kopfbild__medium { min-width: 0; }

.kopfbild__img {
  display: block;
  width: 100%;
  height: clamp(180px, 48vw, 220px);
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

/*
   Zweispaltig erst ab 1100 Punkten - und das ist gemessen, nicht geschaetzt.

   Der erste Anlauf schaltete bei 900 um. Bei genau dieser Breite steht in
   der Textspalte „Veranstaltungen." in der Schaugroesse, und das Wort ist
   dort breiter als die Spalte: Es lief quer ueber das Bild daneben. Ein
   einzelnes Wort kann nicht umbrechen, also muss die Spalte weg.

   1100 ist im uebrigen Stylesheet ohnehin die Marke, ab der die Seite
   „breit" ist.
*/
@media (min-width: 1100px) {
  .kopfbild { grid-template-columns: 55fr 45fr; gap: var(--space-6); }
  .kopfbild__img { height: clamp(260px, 24vw, 340px); }

  /*
     Die Schaugroesse rechnet mit der ganzen Fensterbreite (5.2vw), steht
     hier aber in einer Spalte, die nur gut die Haelfte davon misst. Bei
     1100 Punkten reichte „Veranstaltungen." deshalb genau bis an die
     Bildkante - kein Ueberlauf, aber auch kein Abstand.

     Eine eigene Kurve nur fuer den bebilderten Kopf: dieselbe Schrift,
     dasselbe Gewicht, ein Stueck kleiner. Ohne Bild bleibt der Kopf so
     gross wie bisher.
  */
  .kopfbild .display { font-size: clamp(2.5rem, 1.2rem + 3.2vw, 4rem); }
}

.symbolbild { margin: var(--space-5) 0; }

.symbolbild__img {
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.symbolbild__unterschrift {
  max-width: 640px;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   Stelle melden (06.09.2026)

   Die Seite, die bei den Wegen 1 und 2 auf `/api` die E-Mail ersetzt.
   Fast alles daran ist gewoehnliches Formular — nur drei Dinge brauchen
   eigene Regeln.
   ========================================================================== */

/*
   Das Feld fuer die Roboter. Es muss FUER MENSCHEN unsichtbar sein und
   trotzdem im Quelltext wie ein echtes Feld aussehen — `display: none`
   waere zu offensichtlich, ein Roboter prueft das. Deshalb aus dem Bild
   geschoben statt ausgeblendet.
*/
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Die Rueckmeldung nach dem Absenden. */
.einreich-ergebnis { margin: var(--space-5) 0; scroll-margin-top: calc(var(--header-gesamt) + var(--space-4)); }

.einreich-liste { margin: var(--space-2) 0 0; padding-left: 1.1rem; }
.einreich-liste li { margin-bottom: var(--space-2); }
.einreich-liste__titel { display: block; font-weight: 650; }
.einreich-liste__grund { display: block; font-size: var(--fs-sm); }

.einreich-hinweis { font-size: var(--fs-md); color: var(--text-muted); max-width: 62ch; }

.einreich-spalten { font-size: var(--fs-sm); line-height: 2; }
.einreich-spalten code { background: var(--surface-soft); padding: .1rem .4rem; border-radius: var(--radius-sm); }

/*
   Das Feld fuer die eingefuegte Tabelle: Schreibmaschinenschrift und kein
   Zeilenumbruch. Eine umgebrochene Tabellenzeile sieht aus wie zwei
   Zeilen, und wer das sieht, glaubt, sein Einfuegen sei schiefgegangen.
*/
.einreich-tabelle {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  white-space: pre;
  overflow-x: auto;
}

/* ==========================================================================
   Prüfkarte: eine eingereichte Stelle im Adminbereich (06.09.2026)

   Alles, was für die Entscheidung zählt, steht auf der Karte. Wer zehn
   Einsendungen durchgeht, soll nicht zehnmal eine Detailseite öffnen und
   wieder zurück.
   ========================================================================== */
.pruefkarte {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.pruefkarte__titel { margin: var(--space-1) 0 .2rem; font-size: var(--fs-lg); line-height: 1.25; }
.pruefkarte__firma { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-md); }

.pruefkarte__daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-md);
}
.pruefkarte__daten dt { color: var(--text-muted); }
.pruefkarte__daten dd { margin: 0; }

.pruefkarte__text { margin: 0 0 var(--space-3); font-size: var(--fs-md); max-width: 68ch; }

.pruefkarte__aktionen { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pruefkarte__aktionen form { margin: 0; }

/* ==========================================================================
   Die Hilfe (06.09.2026)

   Ein Gespräch, kein Chatfenster im Eck: Es steht mitten auf der Seite,
   in Lesebreite, und wächst nach unten. Ein schwebendes Blasenfenster
   wäre die Optik, die man von Verkaufsseiten kennt — und genau die will
   diese Seite nicht.
   ========================================================================== */
.hilfe {
  margin: var(--space-5) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.hilfe__verlauf {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  max-height: 60vh;
  overflow-y: auto;
}

.hilfe__nachricht {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  font-size: var(--fs-md);
  line-height: 1.5;
  max-width: 46ch;
}
.hilfe__nachricht p { margin: 0 0 .5rem; }
.hilfe__nachricht p:last-child { margin-bottom: 0; }

/* Die eigene Nachricht rechts, in der Akzentfarbe — der einzige Ort, an
   dem die Seite zwei Sprecher unterscheiden muss. */
.hilfe__nachricht--ich {
  margin-left: auto;
  background: var(--dark);
  color: var(--text-invert);
}

.hilfe__eingabe {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
}
.hilfe__eingabe .field__input { flex: 1; }

.hilfe__vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}

.hilfe__vorschlag {
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
}
.hilfe__vorschlag:hover { border-color: var(--dark); color: var(--dark); }

/* Die drei Punkte, während die Antwort entsteht. */
.hilfe__punkte::after {
  content: "···";
  letter-spacing: .15em;
  animation: hilfe-punkte 1.2s steps(4, end) infinite;
}
@keyframes hilfe-punkte {
  0%   { opacity: .3; }
  50%  { opacity: 1; }
  100% { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .hilfe__punkte::after { animation: none; }
}

/*
   Der Weg zum Betreiber. Er steht IMMER da - hervorgehoben wird er nur,
   wenn die Hilfe selbst nicht weiterkam. Ihn wegzusperren, bis die KI
   dreimal gescheitert ist, waere genau die Art Hilfe, ueber die sich
   Leute zu Recht aergern.
*/
.hilfe-anliegen { margin-top: var(--space-6); scroll-margin-top: calc(var(--header-gesamt) + var(--space-4)); }

.hilfe-anliegen--hervor {
  padding: var(--space-4);
  border: 1px solid var(--orange);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

/* Ergänzungen zur Prüfkarte für die Anliegen (06.09.2026). */
.pruefkarte__klein { font-size: var(--fs-xs); color: var(--text-muted); }

.pruefkarte__verlauf { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.pruefkarte__verlauf summary { cursor: pointer; color: var(--text-muted); }
.pruefkarte__zeile { margin: var(--space-2) 0 0; }

.pruefkarte__form { display: grid; gap: var(--space-2); margin: 0; }

/* ==========================================================================
   Vorarlberger Sagen (06.09.2026)

   Die Sammlung nutzt die vorhandenen Sagenkarten, den vorhandenen
   Ortsfilter und die vorhandenen Knöpfe. Neu sind nur drei Dinge, die es
   im Montafon-Bereich nicht gab: die Wahl zwischen beiden Sammlungen, ein
   Suchfeld und der Quellenblock auf der Detailseite.
   ========================================================================== */

/*
   Die Wahl zwischen Montafon und ganz Vorarlberg.

   Bewusst KEINE Reiter über die volle Breite: Es sind zwei Sammlungen,
   nicht zwei Ansichten derselben Liste. Zwei Schaltflächen nebeneinander
   sagen das genauer - die aktive ist keine Schaltfläche, sondern eine
   Beschriftung, weil ein Knopf, der auf die Seite führt, auf der man
   steht, nichts tut.
*/
.sagenwahl {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-4) 0 0;
}

.sagenwahl__knopf {
  padding: .4rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 650;
  text-decoration: none;
  color: var(--text-muted);
  background: var(--surface);
}
.sagenwahl__knopf:hover { border-color: var(--dark); color: var(--dark); }

.sagenwahl__knopf--aktiv {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--text-invert);
  cursor: default;
}

/* Der Satz über den Charakter der Sammlung — leise, aber nicht versteckt. */
.sagen-hinweis {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 62ch;
}

/* Die Suche. Eine Zeile, in der das Feld den Platz bekommt. */
.sagensuche {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-4) 0;
}
.sagensuche .field__input { flex: 1 1 18rem; max-width: 28rem; }

/* Die zweite Filterreihe (Orte) steht etwas enger unter der ersten. */
.sagenfilter--orte { margin-top: calc(var(--space-2) * -1); }

/* Lesezeit und „Sage lesen" am Fuß der Karte. */
.sagenkarte__meta {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ================== Der Quellenblock auf der Detailseite ================== */

.quellenblock {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.quellenblock__liste {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-md);
}
.quellenblock__liste dt { color: var(--text-muted); }
.quellenblock__liste dd { margin: 0; overflow-wrap: anywhere; }

.quellenblock__hinweis { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.quellenblock__notiz   { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }

@media (max-width: 480px) {
  /* Auf schmalen Geräten untereinander: Zwei Spalten lassen für die
     Angabe selbst kaum noch Platz. */
  .quellenblock__liste { grid-template-columns: 1fr; gap: 0; }
  .quellenblock__liste dt { margin-top: var(--space-2); font-size: var(--fs-xs); }
}

/*
   Der Hinweis auf die Vorarlberger Sagen im Heimatbereich (06.09.2026).

   Eine eigene Fläche mit Rahmen, damit sie sich von den Montafoner
   Sagenkacheln darüber absetzt: Es ist ein Angebot daneben, keine
   Fortsetzung der Liste. Deshalb auch `<aside>` und nicht `<section>`.
*/
.laendlebox {
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.laendlebox__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}

.laendlebox__titel { margin: 0 0 var(--space-2); font-size: var(--fs-xl); line-height: 1.2; }
.laendlebox__text  { margin: 0 0 var(--space-4); max-width: 58ch; color: var(--text-muted); }
.laendlebox__aktion { margin: 0; }


/* ==========================================================================
   Die Filterbox (06.09.2026)

   Der Baustein `components/filterbox.php` legt alle Filterreihen einer
   Uebersichtsseite in einen Aufklapper. Zugeklappt steht dort eine Zeile:
   das Wort „Filter", die aktive Auswahl und ein Pfeil.

   Gestalterisch ist sie bewusst KEIN Kasten mit Schatten: Sie steht ganz
   oben auf jeder Uebersicht, und ein auffaelliger Block an dieser Stelle
   wuerde genau das verdraengen, wofuer die Box gebaut wurde — die Liste
   selbst. Ein Rahmen, ein Radius, sonst nichts.
   ========================================================================== */

.filterbox {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin: 0 0 var(--space-4);
}

/* Das Dreieck, das der Browser vor ein <summary> setzt, ist auf jeder
   Plattform ein anderes. Der eigene Pfeil rechts sagt dasselbe, nur
   ueberall gleich. */
.filterbox__kopf {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
}
.filterbox__kopf::-webkit-details-marker { display: none; }
.filterbox__kopf:hover { background: var(--surface-soft); }
.filterbox__kopf:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; }

.filterbox__marke {
  display: inline-flex; align-items: center; gap: var(--space-2);
  flex: none;
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
}

/* OHNE diese Zeile wird das Symbol so gross wie sein Kasten — ein
   bildschirmfuellender Trichter. Ein SVG ohne Groessenangabe nimmt sich,
   was da ist. */
.filterbox__icon { width: 16px; height: 16px; flex: none; }

/* Die aktive Auswahl bleibt zugeklappt sichtbar — sonst filtert jemand
   unbemerkt weiter und haelt eine kurze Liste fuer das ganze Angebot. */
.filterbox__gewaehlt {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  min-width: 0; flex: 1 1 auto;
}
.filterbox__wert {
  background: var(--orange-soft); color: var(--orange-dark);
  border-radius: var(--radius-xs);
  padding: .1rem .45rem;
  font-size: var(--fs-xs); font-weight: 650;
}
.filterbox__hinweis {
  flex: 1 1 auto; min-width: 0;
  color: var(--text-muted); font-size: var(--fs-xs);
}

.filterbox__pfeil {
  flex: none; display: inline-flex; color: var(--text-muted);
  transition: transform .18s ease;
}
.filterbox[open] .filterbox__pfeil { transform: rotate(180deg); }

.filterbox__inhalt {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  display: grid; gap: var(--space-4);
}

.filtergruppe { display: grid; gap: var(--space-2); min-width: 0; }
.filtergruppe__titel {
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}

/* Lange Reihen laufen in EINER Zeile weiter, statt umzubrechen: Sonst
   waere die aufgeklappte Box genauso hoch wie der Zustand, den sie
   ersetzt hat. */
.filterbox__inhalt .filterbar {
  margin: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.filterbox__inhalt .filterchip { flex: 0 0 auto; }

.filterbox__reset { margin: 0; font-size: var(--fs-xs); }

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


/* ==========================================================================
   Der Ortssteckbrief (06.09.2026)

   Zahlen und Lage eines Ortes, unter der Heimatgeschichte. Beides steht
   auf einer schwebenden Flaeche — nicht, weil es huebsch ist, sondern
   weil es ein Einschub ist: Der Text davor erzaehlt, hier stehen Fakten.
   Ein abgesetzter Grund sagt das schneller als eine Ueberschrift.

   Auf breiten Schirmen stehen Kacheln und Karte nebeneinander, darunter
   untereinander. Die Karte behaelt in beiden Faellen ihre Hoehe: Eine
   Karte, die auf 90 Pixel zusammenfaellt, zeigt nichts mehr.
   ========================================================================== */

.steckbrief {
  display: grid;
  gap: var(--space-4);
  /* Knapper als beim ersten Wurf (06.09.2026): Der Kasten ist Beiwerk und
     stand mit anderthalb Zentimetern Luft an jeder Seite da wie ein
     eigener Abschnitt. */
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid rgba(0,21,49,.06);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
@media (min-width: 860px) {
  .steckbrief { grid-template-columns: minmax(0, 1fr) minmax(300px, 42%); align-items: start; }
}

/* Die Zahlen: eine Zeile, die bei Bedarf umbricht — nie eine Spalte aus
   vier Zeilen, dafuer sind es zu wenige Angaben. */
.steckbrief__zahlen {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  /* Mittig neben der Karte: Die Kachelzeile ist eine Zeile hoch, die
     Karte gut das Dreifache — oben angeschlagen haengt sie in der Luft.
     `align-content` allein genuegt nicht: Es wirkt erst, wenn der
     Flexinhalt mehrzeilig ist. Die Hoehe im Raster regelt `align-self`. */
  align-content: center;
  align-self: center;
}
.steckbrief__kachel {
  flex: 1 1 7.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
}
.steckbrief__icon  { grid-row: span 2; width: 20px; height: 20px; color: var(--brand-orange); align-self: center; }
.steckbrief__wert  { font-weight: 700; font-size: var(--fs-base); line-height: 1.2; }
.steckbrief__label {
  font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}

.steckbrief__lage { margin: 0; }
.steckbrief__karte {
  /* Niedriger als zuerst: Die Karte soll die Lage zeigen, nicht die
     Seite tragen. */
  height: clamp(170px, 20vw, 210px);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Farbe allein sagt Farbenblinden nichts — deshalb steht der Name des
   Ortes zusaetzlich als Wort unter der Karte. */
.steckbrief__legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: var(--space-2);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.steckbrief__punkt {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-navy); display: inline-block; flex: none;
}
.steckbrief__punkt--hier { background: #C1121F; }
.steckbrief__trenner { opacity: .5; }


/* ==========================================================================
   Alles schwebt (06.09.2026)

   Bis hierher war jede Karte im Haus flach: heller Grund, ein Haarstrich
   als Rahmen. In einem Raster aus zwanzig Kacheln funktioniert das — die
   Ordnung entsteht durch das Raster selbst. Ueberall sonst sah es aus wie
   ein Formular: Man sah Linien, aber keine Gegenstaende.

   Diese eine Stelle gibt allen Kastenarten denselben Schatten. Sie steht
   bewusst am Ende der Datei und sammelt die Klassen auf, statt fuenfzehn
   Bloecke einzeln zu aendern: So gibt es EINEN Ort, an dem sich das
   Aussehen aller Karten aendern laesst, und keine fuenfzehn, die
   auseinanderlaufen koennen.

   Nur der Schatten, NICHT der Rahmen: Ein erster Versuch setzte hier auch
   `border-color` und loeschte damit die farbigen Kanten der Betriebskarten
   — der orange Strich am Gasthaus, der gruene am Handwerker. Eine
   Sammelregel am Dateiende gewinnt gegen jede Regel davor; sie darf
   deshalb nur setzen, was ueberall gleich sein soll.
   ========================================================================== */

.card,
.storycard,
.bizcard,
.feedcard,
.jobcard,
.legendcard,
.leutekarte,
.erstellenkarte,
.factcard,
.tile,
.bizdetail__side,
.marktkarte,
.immokarte,
.bildkarte,
.gruppenkarte,
.ortskachel {
  box-shadow: var(--schwebe);
}

/* Beim Zeigen hebt sich nur, was auch anklickbar ist — sonst ist es eine
   Bewegung ohne Zweck, und der Zeiger tanzt ueber die ganze Seite. */
a.card:hover,
a.storycard:hover,
a.bizcard:hover,
a.feedcard:hover,
a.jobcard:hover,
a.legendcard:hover,
a.leutekarte:hover,
a.erstellenkarte:hover,
a.factcard:hover,
a.tile:hover,
a.marktkarte:hover,
a.immokarte:hover,
a.bildkarte:hover,
a.gruppenkarte:hover,
a.ortskachel:hover,
.card--link:hover,
.storycard:focus-visible,
.card:focus-within {
  box-shadow: var(--schwebe-hoch);
}

/* Wer Bewegung abgestellt hat, bekommt den Schatten trotzdem — er sagt
   „anklickbar", und das ist keine Animation, sondern eine Auskunft. */
@media (prefers-reduced-motion: reduce) {
  .card, .storycard, .bizcard, .feedcard, .jobcard { transition: box-shadow .15s ease; }
}


/* --- Das Beitragen-Band (06.09.2026) ----------------------------------

   Am Ende jeder Uebersicht, ueberall gleich: eine Zeile, ein Knopf.
   Schwebend wie die Karten, aber flacher — es ist ein Hinweis, kein
   Inhalt. Auf schmalen Geraeten bricht es um, der Knopf rutscht unter
   den Text und wird breit genug zum Treffen.                          */
.beitragen {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid rgba(0,21,49,.07);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius-sm);
  box-shadow: var(--schwebe);
}
.beitragen__zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--orange-soft); color: var(--orange-dark);
}
.beitragen__icon { width: 16px; height: 16px; }
.beitragen__text { display: flex; flex-wrap: wrap; gap: .1rem var(--space-2); flex: 1 1 16rem; min-width: 0; }
.beitragen__frage { font-size: var(--fs-md); }
.beitragen__satz  { font-size: var(--fs-md); color: var(--text-muted); }
.beitragen__knopf { flex: none; }

@media (max-width: 560px) {
  .beitragen__knopf { flex: 1 1 100%; justify-content: center; }
}


/* --- Mitreden: die Einladung (06.09.2026) -----------------------------

   Der Bereich, in dem Wissen aus dem Tal zusammenkommen soll. Er darf
   deshalb nicht aussehen wie ein Anhaengsel unter dem Artikel, sondern
   wie ein eigener Platz: schwebende Flaeche, etwas Luft, ein klarer
   Satz.                                                               */
.mitreden__einladung {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid rgba(0,21,49,.07);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius-sm);
  box-shadow: var(--schwebe);
  margin-bottom: var(--space-4);
}
.mitreden__einladung-text {
  margin: 0; flex: 1 1 18rem; min-width: 0;
  font-size: var(--fs-md); color: var(--text-muted);
}
.mitreden__einladung-text strong { color: var(--text); display: block; }

/* Der Satz, wenn noch niemand geschrieben hat. Er steht da, WEIL nichts
   da ist — eine leere Flaeche beantwortet keine Frage. */
.mitreden__erste {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: var(--fs-md); color: var(--text-muted);
}


/* Die Flaeche, auf der mitgeredet wird (06.09.2026). Sie liegt ueber dem
   Seitengrund und fasst alles zusammen, was zum Gespraech gehoert:
   Sterne, Zeichen, Schreibfeld, Kommentare.                          */
.mitreden__flaeche {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid rgba(0,21,49,.07);
  border-radius: var(--radius-md);
  box-shadow: var(--schwebe);
}

/* Innerhalb der Flaeche braucht die Einladung keinen zweiten Kasten. */
.mitreden__flaeche .mitreden__einladung {
  box-shadow: none;
  background: var(--surface-soft);
}

@media (max-width: 560px) {
  .mitreden__flaeche { padding: var(--space-4); }
}


/* Zwei Spalten statt einer Reihe (06.09.2026).

   Nebeneinander waren die drei bis vier Kacheln eine duenne Zeile neben
   einer dreimal so hohen Karte — oben und unten blieb je eine Handbreit
   leer. Im 2x2-Raster stehen sie so hoch wie die Karte daneben.

   Die Regel steht am Dateiende, weil `.steckbrief__zahlen` weiter oben
   auf `display: flex` steht: Eine Media-Query erhoeht die Spezifitaet
   nicht, sie muss also spaeter kommen, um zu gewinnen.               */
@media (min-width: 860px) {
  .steckbrief__zahlen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
  }
}

/* ==========================================================================
   Steckbrief: Ueberschrift und die Einstiegs-Kacheln (07.09.2026)

   "Gemeinde Infos" als kleine Zeile ueber den Kacheln. Und die Einstiege
   (Bilder, Betriebe, Veranstaltungen ...) als dieselben Kaestchen wie die
   Zahlen - nur sind sie Links und tragen die Anzahl.
   ========================================================================== */
.steckbrief__titel {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

/* Die Link-Kachel: aussen wie jede Kachel, innen ein Link, der die ganze
   Flaeche ausfuellt - so ist das ganze Kaestchen anklickbar. */
.steckbrief__kachel--link { display: block; padding: 0; }
.steckbrief__kachelflaeche {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-2);
  height: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background-color .12s ease;
}
.steckbrief__kachelflaeche:hover,
.steckbrief__kachelflaeche:focus-visible { background: rgba(0,21,49,.06); }
.steckbrief__zeichen {
  grid-row: span 2;
  align-self: center;
  width: 20px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
}

/* ==========================================================================
   Der schwebende Zurueck-Knopf (07.09.2026, auf Wunsch des Betreibers)

   Steht fest am rechten Rand und bleibt beim Scrollen sichtbar - er ist
   nicht in die Seite eingebaut, sondern schwebt darueber. Ein Klick geht
   eine Seite zurueck; wer mehrfach klickt, geht mehrere Seiten zurueck.
   Auf der ersten Seite ohne Verlauf blendet ihn das Skript aus.
   ========================================================================== */
.zurueckschweber {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .8rem .6rem .7rem;
  border: 1px solid rgba(0,21,49,.08);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-float);
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1;
  cursor: pointer;
}
.zurueckschweber:hover,
.zurueckschweber:focus-visible { background: var(--surface-soft); }
.zurueckschweber__pfeil { font-size: 1.15em; line-height: 1; }
@media (max-width: 560px) {
  .zurueckschweber { padding: .55rem .6rem; }
  .zurueckschweber__wort {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ==========================================================================
   Der Aufklapp-Filter "Suchen und filtern" (07.09.2026)

   Diese Regeln standen nur in marketplace.css und wurden dort geladen.
   Der Filter (.marktfilter) ist aber ein GETEILTES Bauteil: /markt und
   /immobilien binden dasselbe <details> ein. /immobilien laedt jedoch nur
   real-estate.css + munta.css, nicht marketplace.css - dort stand der
   Filter deshalb ungestylt da: der Pfeil ohne Groesse riesig, der
   Browser-Aufklappmarker sichtbar. Da das Bauteil geteilt ist, gehoert
   sein Grundstil in die gemeinsame munta.css.
   ========================================================================== */
.marktfilter {
  margin: var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.marktfilter__auf {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer; list-style: none;
  font-weight: 650; font-size: var(--fs-md);
  border-radius: var(--radius-sm);
}
.marktfilter__auf::-webkit-details-marker { display: none; }
.marktfilter__auf:hover { background: var(--surface-soft); }
.marktfilter__auf:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; }
.marktfilter__icon {
  width: 18px; height: 18px; flex: none;
  color: var(--brand-orange);
  transition: transform .15s ease;
}
.marktfilter[open] .marktfilter__icon { transform: rotate(90deg); }
.marktfilter__marke {
  margin-left: auto;
  padding: .1rem .5rem; border-radius: 999px;
  background: var(--orange-soft); color: var(--orange-dark);
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Spritpreise neben Montis Tipps (13.09.2026)
   ==========================================================================

   Rechts neben der Hinweisleiste ein schmaler Kasten: billigster Diesel,
   billigstes Benzin. Auf dem Telefon rutscht er unter die Leiste.

   Farben: Diesel = Navy, Benzin = Gruen (wie die Zapfpistolen). Im Fenster
   laufen die Balken von Gruen (billig) nach Orange (teuer).

   Das Fenster ist ein <dialog> ohne Innenabstand - der Abstand sitzt auf
   den Kindern. So landet ein Klick daneben sicher auf dem Dialog selbst
   und schliesst ihn, ein Klick in den Rand des Inhalts aber nicht.
   ========================================================================== */

.monti-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: stretch;
}
.monti-zeile > .monti { min-width: 0; }

.sprit-icon {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.sprit {
  --sprit-diesel: #001531;
  --sprit-benzin: #2F7A4B;
  display: grid;
  align-content: center;
  gap: .3rem;
  padding: .55rem .7rem .6rem;
  border: 1px solid rgba(23, 107, 154, .22);
  border-radius: 10px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(254, 138, 0, .16) 0%, rgba(254, 138, 0, 0) 55%),
    linear-gradient(135deg, #E3EFF7 0%, #F6FAFD 60%, #FFFFFF 100%);
  box-shadow: 0 1px 2px rgba(0, 21, 49, .06), 0 6px 18px rgba(23, 107, 154, .10);
  min-width: 17.5rem;
}

.sprit__titel {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .1rem;
  font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--enzian);
}
.sprit__titel small {
  display: block;
  font-size: .62rem; font-weight: 600; letter-spacing: .02em;
  text-transform: none; color: var(--text-muted);
}
.sprit__titel-icon {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), #FFB347);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 2px 6px rgba(254, 138, 0, .35);
}

.sprit__zeile {
  display: grid;
  grid-template-columns: 4.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .3rem .35rem .3rem .3rem;
  border: 1px solid rgba(0, 21, 49, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .85);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sprit__zeile:hover,
.sprit__zeile:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(23, 107, 154, .35);
  box-shadow: 0 4px 12px rgba(0, 21, 49, .12);
}

.sprit__sorte {
  display: block;
  padding: .22rem 0;
  border-radius: 999px;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  text-align: center;
  color: #fff;
}
.sprit__zeile--die .sprit__sorte { background: var(--sprit-diesel); color: #FFD27A; }
.sprit__zeile--sup .sprit__sorte { background: var(--sprit-benzin); }

.sprit__stelle {
  font-size: var(--fs-sm); font-weight: 700;
  white-space: nowrap;
}
.sprit__stelle small { color: var(--text-muted); font-weight: 500; }
.sprit__stelle em {
  font-style: normal; font-size: .68rem; font-weight: 700;
  color: var(--enzian);
}

.sprit__preis {
  padding: .12rem .45rem;
  border-radius: 6px;
  font-size: .98rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sprit__preis small { font-size: .72em; font-weight: 700; margin-left: .15em; }
.sprit__zeile--die .sprit__preis { background: rgba(0, 21, 49, .07); color: var(--sprit-diesel); }
.sprit__zeile--sup .sprit__preis { background: rgba(47, 122, 75, .12); color: var(--sprit-benzin); }

@media (max-width: 860px) {
  .monti-zeile { grid-template-columns: minmax(0, 1fr); }
  .sprit { min-width: 0; }
}

/* ---------- Das Fenster ---------- */

.sprit-fenster {
  --sprit-farbe: #001531;
  width: min(25rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 21, 49, .35);
  overflow: auto;
}
.sprit-fenster--sup { --sprit-farbe: #2F7A4B; }
.sprit-fenster::backdrop { background: rgba(0, 21, 49, .5); backdrop-filter: blur(2px); }

.sprit-fenster__kopf {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background:
    radial-gradient(100% 160% at 100% 0%, rgba(254, 138, 0, .35) 0%, rgba(254, 138, 0, 0) 60%),
    linear-gradient(135deg, var(--sprit-farbe) 0%, #176B9A 130%);
  color: #fff;
}
.sprit-fenster__icon {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 1.35rem;
}
.sprit-fenster__titel { margin: 0; font-size: 1.2rem; line-height: 1.15; color: #fff; flex: 1; }
.sprit-fenster__titel span {
  display: block;
  font-size: .72rem; font-weight: 500; color: rgba(255, 255, 255, .78);
}
.sprit-fenster__zu {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sprit-fenster__zu:hover { background: rgba(255, 255, 255, .28); }

.sprit-liste { list-style: none; margin: 0; padding: .6rem .75rem; display: grid; gap: .4rem; }

.sprit-liste__eintrag {
  --stufe: #2F7A4B;
  border-radius: 10px;
  background: var(--surface-soft);
  background: color-mix(in srgb, var(--stufe) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--stufe) 18%, transparent);
}
.sprit-stufe-0 { --stufe: #2F7A4B; }
.sprit-stufe-1 { --stufe: #8A9A2B; }
.sprit-stufe-2 { --stufe: #D99D2B; }
.sprit-stufe-3 { --stufe: #E0661A; }
.sprit-stufe-alt { --stufe: #8A929C; }

.sprit-liste__rang {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; margin-top: .05rem;
  border-radius: 50%;
  background: var(--stufe); color: #fff;
  font-size: .78rem; font-weight: 800;
}

.sprit-liste__oben,
.sprit-liste__unten {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
}
.sprit-liste__name { font-size: var(--fs-sm); font-weight: 700; }
.sprit-liste__name small { color: var(--text-muted); font-weight: 500; }
.sprit-liste__preis {
  font-size: 1.02rem; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--stufe);
}
.sprit-liste__preis small { font-size: .72em; }
.sprit-liste__unten { font-size: .68rem; color: var(--text-muted); margin-top: .2rem; }

.sprit-liste__balken {
  height: 7px; margin-top: .3rem;
  border-radius: 4px;
  background: rgba(0, 21, 49, .07);
  overflow: hidden;
}
.sprit-liste__balken span {
  display: block; height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--stufe) 55%, #fff), var(--stufe));
}

.sprit-liste__marke {
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--stufe); color: #fff;
  font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  font-size: .6rem;
}
.sprit-liste__mehr { font-weight: 700; color: var(--stufe); }

.is-billigste { box-shadow: 0 3px 10px rgba(47, 122, 75, .18); }
.is-veraltet  { opacity: .7; }

.sprit-rauf   { color: var(--danger); font-weight: 700; }
.sprit-runter { color: #2F7A4B; font-weight: 700; }

.sprit-fenster__fuss {
  padding: .6rem 1rem .9rem;
  border-top: 1px solid var(--border);
  background: #F7F9FB;
  font-size: .68rem; line-height: 1.45;
  color: var(--text-muted);
}
.sprit-fenster__fuss p { margin: 0; }
.sprit-fenster__wechsel {
  margin-top: .55rem; padding: .35rem .8rem;
  border: 0; border-radius: 999px;
  color: #fff; font: inherit; font-size: .78rem; font-weight: 700;
  cursor: pointer;
}
.sprit-fenster__wechsel--die { background: #001531; }
.sprit-fenster__wechsel--sup { background: #2F7A4B; }
.sprit-fenster__wechsel:hover { filter: brightness(1.15); }

/* ---------- Pfeile: rauf = teurer (rot), runter = billiger (gruen) ---------- */

.sprit-pfeil {
  display: inline-block;
  margin-right: .2rem;
  font-size: .62em; line-height: 1;
  vertical-align: .12em;
}
.sprit-pfeil--rauf   { color: #C0392B; }
.sprit-pfeil--runter { color: #2F7A4B; }
.sprit__preis { display: inline-flex; align-items: baseline; }

/* ---------- Karten im Fenster klappen den Verlauf auf ---------- */

.sprit-fenster__hinweis {
  margin: .6rem .9rem 0;
  font-size: .7rem; color: var(--text-muted);
}

.sprit-liste__eintrag { display: block; padding: 0; }
.sprit-karte__kopf {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .6rem;
  align-items: start;
  padding: .5rem .6rem;
  list-style: none;
  cursor: pointer;
  border-radius: 10px;
}
.sprit-karte__kopf::-webkit-details-marker { display: none; }
.sprit-karte__kopf:hover { background: color-mix(in srgb, var(--stufe) 6%, transparent); }
.sprit-karte__kopf:focus-visible { outline: 2px solid var(--stufe); outline-offset: -2px; }
.sprit-liste__inhalt { display: block; min-width: 0; }
.sprit-liste__oben, .sprit-liste__unten { width: 100%; }
.sprit-liste__rechts { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

.sprit-karte__auf {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stufe) 35%, transparent);
  color: var(--text);
  font-size: .6rem; font-weight: 700;
}
.sprit-karte__auf::after { content: "▾"; font-size: .8em; transition: transform .15s ease; }
.sprit-karte[open] .sprit-karte__auf::after { transform: rotate(180deg); }

/* ---------- Das Verlaufsdiagramm ---------- */

.sprit-chart { padding: 0 .7rem .6rem 2.8rem; }

.sprit-chart__flaechen {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem;
  align-items: stretch;
}
.sprit-chart__svg {
  display: block; width: 100%; height: 80px;
  overflow: visible;
  touch-action: pan-y;
}
.sprit-chart__gitter { stroke: rgba(0, 21, 49, .09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sprit-chart__leer   { fill: rgba(0, 21, 49, .04); }
.sprit-chart__linie  {
  fill: none; stroke: var(--sprit-farbe); stroke-width: 2;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.sprit-chart__flaeche { fill: var(--sprit-farbe); opacity: .1; }

.sprit-chart__achse {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1px 0;
  font-size: .6rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sprit-chart__kreuz {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed rgba(0, 21, 49, .45);
  pointer-events: none;
}
.sprit-chart__tipp {
  position: absolute; top: -1.9rem;
  padding: .2rem .5rem;
  border-radius: 6px;
  background: var(--brand-navy); color: #fff;
  font-size: .68rem; font-weight: 600; white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 21, 49, .25);
}

.sprit-chart__zeit {
  display: flex; justify-content: space-between; gap: .4rem;
  margin: .2rem 3.1rem 0 0;
  font-size: .6rem; color: var(--text-muted);
}
.sprit-chart__seit { color: var(--enzian); font-weight: 600; }
.sprit-chart__summe { margin: .35rem 0 0; font-size: .68rem; color: var(--text-muted); }
.sprit-chart__summe b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Montis Tipps neben dem Spritkasten - groesser und waermer (13.09.2026)

   Neben dem farbigen Spritkasten sah die weisse Leiste leer aus: Die Zeile
   ist so hoch wie der Kasten, Monti aber nur 52 px. Jetzt steht er gross
   links, ragt oben ein Stueck heraus, und die Flaeche traegt einen warmen
   Verlauf aus der Markenfarbe - das Gegenstueck zum kuehlen Spritkasten.
   Gilt nur innerhalb der Zeile; die Grundregeln von .monti bleiben.
   ========================================================================== */

.monti-zeile .monti {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 1rem; row-gap: .35rem;
  padding: .7rem 1rem .75rem .6rem;
  border: 1px solid rgba(254, 138, 0, .28);
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 90' preserveAspectRatio='xMaxYMax meet'%3E%3Cpath d='M0 90 L70 52 L105 66 L170 18 L215 50 L250 34 L300 62 L345 28 L420 70 L420 90Z' fill='%23FE8A00' fill-opacity='.10'/%3E%3Cpath d='M120 90 L190 58 L230 72 L290 44 L340 68 L380 52 L420 78 L420 90Z' fill='%23FE8A00' fill-opacity='.10'/%3E%3C/svg%3E") right bottom / auto 88% no-repeat,
    radial-gradient(90% 160% at 0% 100%, rgba(254, 138, 0, .20) 0%, rgba(254, 138, 0, 0) 55%),
    linear-gradient(135deg, #FFF3E2 0%, #FFFAF3 55%, #FFFFFF 100%);
  box-shadow: 0 1px 2px rgba(0, 21, 49, .06), 0 6px 18px rgba(254, 138, 0, .12);
}

.monti-zeile .monti__figur {
  grid-row: 1 / span 2;
  height: 118px;
  margin: -26px 0 -6px;
  filter: drop-shadow(0 6px 8px rgba(0, 21, 49, .18));
}

.monti-zeile .monti__name {
  align-self: auto;
  font-size: .82rem; font-weight: 800; letter-spacing: .06em;
  color: var(--orange-dark);
}

.monti-zeile .monti__liste { align-self: auto; gap: .5rem; padding-bottom: 2px; }

.monti-zeile .montichip {
  padding: .45rem .85rem;
  border: 1px solid rgba(254, 138, 0, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(0, 21, 49, .06);
}
.monti-zeile .montichip:hover,
.monti-zeile .montichip:focus-visible {
  border-color: var(--brand-orange);
  box-shadow: 0 4px 12px rgba(254, 138, 0, .22);
}
.monti-zeile .montichip__kicker { color: var(--orange-dark); }
.monti-zeile .montichip__text { font-size: .92rem; font-weight: 700; }

@media (max-width: 860px) {
  .monti-zeile .monti { grid-template-columns: auto minmax(0, 1fr); }
  .monti-zeile .monti__liste { grid-column: 2; }
  .monti-zeile .monti__figur { height: 84px; margin: -14px 0 -4px; }
}

/* ==========================================================================
   Veranstaltungen: ausverkauft / abgesagt (13.09.2026)
   Vom Veranstalter selbst gemeldet - Hinweis auf der Detailseite, Chip
   auf der Karte, Knöpfe für den Ersteller.
   ========================================================================== */

.terminhinweis {
  margin: 0 0 var(--space-3);
  padding: .55rem .9rem;
  border-radius: 8px;
  font-weight: 700;
}
.terminhinweis--ausverkauft { background: #FAEBCD; color: #6B4A00; border-left: 4px solid #D99D2B; }
.terminhinweis--abgesagt    { background: #F7DED9; color: #A3281B; border-left: 4px solid #A3281B; }

.chip--ausverkauft { background: #FAEBCD; color: #6B4A00; font-weight: 700; }
.chip--abgesagt    { background: #F7DED9; color: #A3281B; font-weight: 700; }

.terminaktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.25rem 0 var(--space-4); }
.terminaktionen form { margin: 0; }

/* Hinweis „Bild KI-generiert" im Hero (13.09.2026): klein rechts unten,
   über Montis Schuhen, damit er nicht verdeckt wird. */
.hero > .card__credit {
  z-index: 5;
  font-size: 10.5px;
  background: rgba(23,23,23,.45);
  border-top-left-radius: 6px;
  opacity: .9;
}

/* Montis Tipps: 8 statt 5, bei jedem Aufruf neu gemischt (13.09.2026).
   Am Desktop dürfen die Tipps in eine zweite Zeile umbrechen - so sieht
   man alle, statt seitlich wischen zu müssen. Am Telefon bleibt das Wischen. */
@media (min-width: 861px) {
  .monti-zeile .monti__liste { flex-wrap: wrap; overflow: visible; }
}

/* Montis Tipps: 6 Tipps in genau zwei vollen Zeilen (13.09.2026).
   Drei gleich breite Spalten statt freiem Umbruch - sonst entstehen je
   nach Bildschirmbreite drei Zeilen mit Lücke unten. Lange Namen werden
   mit … gekürzt, der ganze Titel steht beim Überfahren im Tooltip. */
@media (min-width: 861px) {
  .monti-zeile .monti__liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    overflow: visible;
  }
  .monti-zeile .monti__liste > li { min-width: 0; }
  .monti-zeile .montichip { width: 100%; height: 100%; box-sizing: border-box; min-width: 0; }
  .monti-zeile .montichip__kicker,
  .monti-zeile .montichip__text { overflow: hidden; text-overflow: ellipsis; }
}

/* Spritpreise: Stand unter dem Kasten (13.09.2026) - "geprüft heute 17:32",
   waehrend des Nachladens "Preise werden gerade geprüft …". */
.sprit__stand { margin: .35rem 0 0; font-size: var(--fs-micro, .72rem); color: var(--text-muted, #5F6874); text-align: right; }
.sprit--pruefe .sprit__stand { color: var(--brand-orange, #FE8A00); }
.sprit--pruefe .sprit__preis { opacity: .55; transition: opacity .2s; }
.sprit-liste__unsicher { color: var(--warning, #8A5600); }

/* ==========================================================================
   „Heute als Nächstes" kompakt (14.09.2026)

   Eine Zeile je Termin statt zwei: Uhrzeit · Titel · Ort. Vorher 64 px
   Mindesthöhe und die Kategorie in einer zweiten Zeile – drei Termine
   nahmen fast einen halben Telefonbildschirm ein.
   ========================================================================== */
.naechstes__link--kompakt {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  min-height: 0;
  padding: .55rem var(--space-4);
}
.naechstes__link--kompakt .naechstes__zeit { min-width: 2.9rem; font-size: var(--fs-md); }
.naechstes__link--kompakt .naechstes__titel { font-size: var(--fs-md); }
.naechstes__ort {
  font-size: var(--fs-xs); color: var(--text-muted);
  white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis;
}
.naechstes__link--kompakt .naechstes__pfeil svg { width: 16px; height: 16px; }

@media (max-width: 479px) {
  .naechstes__link--kompakt { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); padding: .5rem var(--space-3); }
  .naechstes__ort { max-width: 6.5rem; }
}

/* Umschalter Alle Termine / Was geht? (16.09.2026) */
.events-umschalter { margin-bottom: var(--space-3); flex-wrap: wrap; }
.events-umschalter .filterchip { font-weight: 600; }