/* Ergänzendes CSS für die statische Fassung.
 *
 * Nur für die Bedienelemente, die vorher React erzeugt hat. Die Farben kommen
 * aus den Variablen der Hauptstildatei, damit sich alles einfügt.
 * Eigene Klassen sind mit "sa-" gekennzeichnet, damit sie sich nicht mit den
 * generierten Utility-Klassen überschneiden.
 */

/* ── Mobilmenü ──────────────────────────────────────────────────────── */

#mobilmenue {
  border-top: 1px solid var(--border);
  background: var(--surface, #fff);
  padding: 0.75rem 1rem 1.25rem;
}

#mobilmenue[hidden] {
  display: none;
}

#mobilmenue ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mobilmenue > ul > li + li {
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.25rem;
}

#mobilmenue a {
  display: block;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius, 0.5rem);
  color: var(--foreground);
  text-decoration: none;
  font-weight: 600;
}

#mobilmenue .sa-untermenue a {
  padding-left: 1.25rem;
  font-weight: 400;
  color: var(--muted-foreground, var(--foreground));
}

#mobilmenue a:hover,
#mobilmenue a:focus-visible {
  background: var(--surface-strong, rgba(0, 0, 0, 0.05));
}

/* Ab der Desktop-Breite ist die normale Navigation sichtbar */
@media (min-width: 1024px) {
  #mobilmenue {
    display: none !important;
  }
}

/* ── Karte nach Zustimmung ──────────────────────────────────────────── */

.sa-karte {
  width: 100%;
  height: 20rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.5rem);
}

/* ── Rückmeldung nach dem Absenden eines Formulars ──────────────────── */

.sa-gesendet {
  margin-top: 1rem;
  border-left: 3px solid var(--brand, #2f6b3f);
  padding: 0.5rem 0.75rem;
  background: var(--surface-strong, rgba(0, 0, 0, 0.04));
  color: var(--foreground);
}

/* ── Rückmeldung der „Kopieren\"-Schaltflächen ──────────────────────── */

.sa-kopiert {
  background: var(--brand, #2f6b3f) !important;
  color: #fff !important;
}

/* ── Bildvergrößerung in der Galerie ────────────────────────────────── */

body.sa-fixiert {
  overflow: hidden;
}

.sa-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.8);
}

.sa-lightbox-innen {
  position: relative;
  display: flex;
  max-height: 100%;
  max-width: 60rem;
  flex-direction: column;
  gap: 0.75rem;
}

.sa-lightbox img {
  max-height: 78vh;
  max-width: 100%;
  border-radius: var(--radius, 0.5rem);
  object-fit: contain;
  background: #000;
}

.sa-lightbox-text {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 0.95rem;
}

.sa-lightbox-zu {
  align-self: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius, 0.5rem);
  background: rgba(0, 0, 0, 0.55);
  padding: 0.5rem 0.9rem;
  color: #fff;
  font: inherit;
  cursor: pointer;
  min-height: 2.75rem;
}

.sa-lightbox-zu:hover,
.sa-lightbox-zu:focus-visible {
  background: rgba(0, 0, 0, 0.85);
}

/* ── Hinweis zum IBAN-Namensabgleich ────────────────────────────────── */

.sa-kontoname-hinweis {
  grid-column: 1 / -1;
  border: 2px dashed var(--destructive, #c0392b);
  border-radius: var(--radius, 0.5rem);
  padding: 1.25rem 1.5rem;
  background: var(--surface, #fff);
}

.sa-kontoname-hinweis h3 {
  margin: 0 0 0.5rem;
  color: var(--destructive, #c0392b);
}

.sa-kontoname-hinweis p {
  margin: 0 0 0.5rem;
}

.sa-kontoname-hinweis p:last-child {
  margin-bottom: 0;
}

/* ── Rückmeldung der Anfrageformulare ───────────────────────────────── */

.sa-meldung {
  margin-top: 1rem;
  border-left: 3px solid var(--border);
  padding: 0.6rem 0.85rem;
  background: var(--surface-strong, rgba(0, 0, 0, 0.04));
  color: var(--foreground);
}

.sa-meldung-erfolg {
  border-left-color: var(--brand, #2f6b3f);
}

.sa-meldung-fehler {
  border-left-color: var(--destructive, #c0392b);
}

.sa-meldung-warten {
  opacity: 0.8;
}

/* Honigtopf gegen Bots — für Menschen unsichtbar, aber nicht per
   display:none, weil manche Bots genau darauf prüfen. */
.sa-honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Bildausschnitt nach oben verschieben ───────────────────────────────
   Für hochformatige Fotos in flachen Kästen: der mittige Standard-
   ausschnitt schneidet sonst die Köpfe weg. */

.sa-bild-oben {
  object-position: center 22%;
}

/* ── Anrisskarten unter „Aktuelles" ─────────────────────────────────────
   Das Logo sitzt als rundes Zeichen über der unteren Bildkante — an der
   Stelle, an der andere Blogs das Autorenbild zeigen. */

.sa-anriss-bild {
  position: relative;
  display: block;
  line-height: 0;
}

.sa-anriss-logo {
  position: absolute;
  bottom: -1.4rem;
  left: 1.25rem;
  display: flex;
  height: 3.25rem;
  width: 3.25rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface, #fff);
  border-radius: 50%;
  background: var(--surface, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.sa-anriss-logo img {
  height: 2.1rem;
  width: auto;
}

/* Platz für das überstehende Logo schaffen */
.sa-anriss .sa-anriss-bild + div {
  padding-top: 2rem;
}

/* ── Seitennummerierung ─────────────────────────────────────────────── */

.sa-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.sa-blaettern a,
.sa-blaettern .sa-jetzt {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.5rem);
  padding: 0 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  font-weight: 600;
}

.sa-blaettern a:hover,
.sa-blaettern a:focus-visible {
  background: var(--surface-strong, rgba(0, 0, 0, 0.05));
}

.sa-blaettern .sa-jetzt {
  border-color: var(--brand, #2f6b3f);
  background: var(--brand, #2f6b3f);
  color: #fff;
}

/* ── Fließtext über die ganze Breite ────────────────────────────────────
   Kalles Vorgabe vom 19.08.2026, ausdrücklich für ALLE Seiten.

   Die Stildatei aus dem Baukasten begrenzt Absätze zusätzlich auf 68 Zeichen
   (.copy p { max-width: 68ch } = rund 608 px). Das Entfernen der
   max-w-Klassen im HTML allein genügt deshalb nicht — die Begrenzung muss
   hier aufgehoben werden. Diese Datei wird nach der ursprüngliche Stildatei
   geladen und gewinnt dadurch. */

.copy p,
.copy ul,
.copy ol,
.copy blockquote {
  max-width: none;
}

/* ── Waren, die nicht angenommen werden können ──────────────────────────
   Kalles Vorgabe: rot und fett. Es ist die einzige Liste der Seite, bei der
   ein Missverständnis echte Arbeit verursacht — Verdorbenes muss jemand
   entsorgen. Der Aufzählungspunkt wird mit eingefärbt, sonst bliebe er
   grün und die Zeile wirkte halbherzig. */

.sa-nicht-annehmen > li {
  color: var(--destructive, #c0392b);
  font-weight: 700;
}

.sa-nicht-annehmen > li::before {
  background-color: var(--destructive, #c0392b) !important;
}

/* ── Gemeindelogos in der Fußzeile ──────────────────────────────────────
   Kalles Vorgabe: über die ganze Breite und sauber aufgeteilt.

   Eigene Regel statt Tailwind-Klassen: Die Stildatei aus dem Baukasten enthält
   nur Klassen, die dort verwendet werden — „grid-cols-7" ist nicht dabei.
   Sieben gleich breite Felder, das Logo mittig darin. Höhe 48 px; höher
   würden die Dateien unscharf, sie sind nur 80 px hoch. */

.sa-logo-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: center;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

@media (min-width: 640px) {
  .sa-logo-reihe { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .sa-logo-reihe { grid-template-columns: repeat(7, 1fr); }
}

.sa-logo-reihe li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-logo-reihe img {
  height: 3rem;
  width: auto;
  max-width: 100%;
}

/* ── Hinweis: nichts vor die Tür stellen ────────────────────────────────
   Kalles Vorgabe: fett und rot. Der Hinweis verhindert Arbeit und Ärger —
   Waren vor der Tür verderben oder verschwinden. */

.sa-abgabe-warnung {
  border-left: 3px solid var(--destructive, #c0392b);
  padding: 0.5rem 0.85rem;
  color: var(--destructive, #c0392b);
  font-weight: 700;
}

/* ── Mehr Luft am unteren Ende der Fußzeile ─────────────────────────────
   Kalles Vorgabe vom 19.08.2026, ausdrücklich für ALLE Seiten. Der letzte
   Streifen der Fußzeile — Gemeindelogos und Zeile mit dem Jahr — schloss
   knapp mit dem Seitenende ab. Als eigene Regel statt über Klassen im HTML,
   damit sie auch für Seiten gilt, die später dazukommen. */

footer > div:last-child {
  padding-bottom: 3.5rem;
}

footer > div:last-child > div {
  padding-bottom: 1.5rem;
}

/* ── Bilder in Beiträgen nicht über ihre Größe hinaus strecken ──────────
   Der Textbereich ist 1120 px breit. Kleinere Bilder wurden darauf
   hochgerechnet und dadurch unscharf. Die Obergrenze setzt das Bauskript
   je Bild in Pixeln; hier steht nur, dass ein schmaleres Bild mittig
   stehen soll statt links zu kleben. */

.sa-bild-natuerlich {
  display: block;
  margin-inline: auto;
  height: auto;
}

/* ── Text markieren über Links und Bildern ──────────────────────────────
   Kalle konnte an manchen Stellen keinen Text markieren — in der Fußzeile
   und neben großen Bildern. Ursache ist keine Sperre, sondern das
   Gegenteil: Links und Bilder sind von Haus aus ZIEHBAR. Beginnt ein
   Mauszug auf einem Link oder Bild, zieht der Browser dieses Element,
   statt Text zu markieren. Die Fußzeile besteht fast nur aus Links,
   deshalb fiel es dort besonders auf.

   Mit user-drag: none wird aus dem Zug wieder eine Textmarkierung.
   Bilder lassen sich danach weiterhin per Rechtsklick speichern. */

a, img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* user-drag allein GENÜGT NICHT — am 20.08.2026 im Browser nachgemessen:
 *
 *   Mauszug bei x=600 (auf dem Bild) → nichts markiert
 *   Mauszug bei x=700 (im Text)      → "e Waren gehören nicht in den Müll"
 *
 * Ein Bild ist ein ersetztes Element ohne Textposition. Beginnt der Zug
 * darauf, findet der Browser keinen Anfangspunkt für eine Markierung —
 * auch dann nicht, wenn das Ziehen unterbunden ist.
 *
 * Auf der Startseite steht ein 540 px breites Bild direkt links neben der
 * Überschrift, dazwischen 40 px Luft. Wer zum Markieren links vom ersten
 * Buchstaben ansetzt — die übliche Handbewegung — landet auf dem Bild.
 * Genau das hat Kalle dreimal gemeldet.
 *
 * pointer-events: none reicht den Mauszug an das Element darunter weiter,
 * und die Markierung beginnt an der nächsten Textstelle. Nachgemessen:
 * derselbe Zug liefert danach "HELFEN STATT ENTSORGEN … Gute Waren
 * gehören nicht in den Müll".
 *
 * AUSGENOMMEN sind Bilder in Links und Schaltflächen — dort wird geklickt
 * (Galerie-Vergrößerung, verlinkte Beiträge). Die Vergrößerung hängt an
 * <button>, nicht am Bild, sie bleibt also unberührt. Betroffen sind die
 * 341 frei stehenden Bilder.
 *
 * Preis dieser Regel: Auf frei stehenden Bildern öffnet der Rechtsklick
 * das Menü des Umfelds statt des Bildmenüs. Auf Galeriebildern — dort, wo
 * Speichern sinnvoll ist — bleibt alles wie gehabt. */

img:not(a img):not(button img) {
  pointer-events: none;
}

/* ── Logo in der Kopfzeile ──────────────────────────────────────────────
   Kalle: größer und mehr Luft nach oben und unten. Von 48 auf 64 Pixel;
   die Datei hat 304 × 191 Pixel und bleibt damit scharf. */

header img[alt="SOLEart Logo"] {
  height: 4rem;
}

/* ACHTUNG: nicht :first-child — das ist die grüne Adressleiste.
   Die Logo-Zeile ist der zweite Block und als einziger direkt unter
   <header> mit mx-auto zentriert. */

header > div.mx-auto {
  padding-block: 1.1rem;
}

/* ── „Das können wir leider nicht annehmen" ─────────────────────────────
   Kalles Vorgabe: Lato, 30 px. */

.sa-nicht-annehmen-titel {
  font-family: Lato, system-ui, sans-serif;
  font-size: 30px;
  line-height: 1.2;
}

/* ── Hinweis zum IBAN-Namensabgleich: kräftigere Umrandung ──────────── */

.sa-kontoname-hinweis {
  border-width: 4px;
}

/* ── „nur für kurze Zeit": nicht über die eigene Größe hinaus ─────────── */

img[src*="kurze-Zeit"] {
  max-width: 420px;
  height: auto;
}

/* ── Sanfte Bewegung beim Scrollen ──────────────────────────────────────
   Kalle: „die Seite ist halt sehr statisch."

   WICHTIGSTE REGEL HIER: Ohne JavaScript ist alles sofort sichtbar.
   Das JavaScript setzt zuerst die Klasse sa-bewegung auf <html> — erst
   dadurch greifen die Startzustände unten. Bleibt das JavaScript aus
   (Fehler, alter Browser, Leseprogramm), gibt es kein Versteckspiel:
   die Seite sieht aus wie vorher. Inhalte, die nur durch JavaScript
   sichtbar werden, sind der häufigste Weg, eine Seite unbenutzbar zu
   machen — den gehen wir nicht.

   Die Zahlen selbst stehen ebenfalls im HTML und sind für Suchmaschinen
   und Vorleseprogramme jederzeit lesbar. Das Hochzählen ändert nur, was
   während der Bewegung angezeigt wird. */

html.sa-bewegung .sa-auftritt {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.95s ease-out, transform 0.95s ease-out;
  transition-delay: var(--sa-verzug, 0s);
}

html.sa-bewegung .sa-auftritt.sa-da {
  opacity: 1;
  transform: none;
}

/* Die Linie über jeder Kennzahl wächst von links nach rechts.
   Sie liegt als eigene Fläche über der Rahmenlinie, weil sich eine
   Rahmenbreite nicht flüssig bewegen lässt. */

html.sa-bewegung .sa-kennzahl {
  position: relative;
}

html.sa-bewegung .sa-kennzahl[class*="border-t"] {
  border-top-color: transparent;
}

html.sa-bewegung .sa-kennzahl[class*="border-t"]::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand, #2f6b3f);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s ease-out;
  transition-delay: var(--sa-verzug, 0s);
}

html.sa-bewegung .sa-kennzahl.sa-da[class*="border-t"]::before {
  transform: scaleX(1);
}

/* Während des Hochzählens bekommen alle Ziffern dieselbe Breite,
   sonst zappelt die Zahl bei jedem Schritt. */

.sa-zahl {
  font-variant-numeric: tabular-nums;
}

/* Wer in den Systemeinstellungen weniger Bewegung wünscht, bekommt
   keine. Das ist keine Höflichkeit, sondern für Menschen mit
   Gleichgewichtsstörungen eine Frage der Benutzbarkeit. */

@media (prefers-reduced-motion: reduce) {
  html.sa-bewegung .sa-auftritt,
  html.sa-bewegung .sa-kennzahl[class*="border-t"]::before {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.sa-bewegung .sa-kennzahl[class*="border-t"] {
    border-top-color: var(--brand, #2f6b3f);
  }
}

/* ── Die Textmarkierung sichtbar machen ─────────────────────────────────
 *
 * ZWEITE, UNABHÄNGIGE URSACHE für Kalles Meldung „kann Text nicht
 * markieren" — und die schwerwiegendere.
 *
 * Die ursprüngliche Stildatei setzt global
 *     ::selection { background: var(--color-brand-soft) }
 * und sonst nichts. Diese Farbe hat exakt dieselbe Helligkeit wie der
 * Hintergrund der Seite — beide 95,5 % in oklch. Am 20.08.2026 im
 * Browser nachgemessen:
 *
 *     Markierung #e5f5e7 auf bg-surface-strong #f5f0e4 → 1,004 : 1
 *     Markierung #e5f5e7 auf weiß                      → 1,132 : 1
 *     Markierung #e5f5e7 auf dem Seitengrund           → 1,085 : 1
 *
 * 1,004 : 1 heißt: kein sichtbarer Unterschied. Der Text WIRD markiert,
 * die Markierung ist nur unsichtbar. Genau deshalb meldeten alle meine
 * technischen Messungen „nichts blockiert" — es ist auch nichts
 * blockiert. Und genau deshalb betraf es „nur vereinzelt" Stellen:
 * Die beiden von Kalle genannten Beispiele — die Überschrift im
 * Abschnitt mit bg-surface-strong und die Fußzeile — haben beide diesen
 * Hintergrund.
 *
 * Weil die Regel dort in @layer base steht und diese Datei ungeschichtet
 * und später geladen wird, gewinnt die Ergänzung hier, ohne dass die
 * kompilierte ursprüngliche Datei angefasst werden muss.
 *
 * Nachgemessen mit der Markenfarbe: 5,95 : 1 gegen bg-surface-strong,
 * weiße Schrift darauf 6,76 : 1. */

::selection {
  background: var(--brand, #176933);
  color: #fff;
}

::-moz-selection {
  background: var(--brand, #176933);
  color: #fff;
}

/* ── Übersichtseintrag im Aufklappmenü ──────────────────────────────────
   Er führt auf die Seite, deren Namen der Menütitel trägt — deshalb hebt
   ihn eine Trennlinie von den Unterpunkten ab. */

.sa-uebersicht {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
  padding-bottom: 0.6rem;
}

/* ── „Vom Handel ins Regal": alle vier Kästen gleich hoch ───────────────
   Kalle am 20.08.2026: „Hier das Bild so anpassen das alle 4 Kästen die
   selbe Höhe haben."

   Im Raster sind die <li> von sich aus gleich hoch — die <figure> darin
   war es nicht, deshalb endete jeder Kasten dort, wo sein Text aufhörte.
   Jetzt füllt die Bildunterschrift den Rest aus, und alle vier Kästen
   schließen auf derselben Linie ab. */

.sa-ablauf > li {
  display: flex;
}

.sa-ablauf figure {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.sa-ablauf figcaption {
  flex: 1;
}

/* ── Brotkrumenspur ─────────────────────────────────────────────────────
   Zurückhaltend gehalten: Sie ist eine Orientierungshilfe, kein
   Gestaltungselement. Auf der Startseite gibt es sie nicht. */

.sa-brotkrumen {
  /* Kalle am 20.08.2026: größer und mehr Luft. */
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}

/* Der einleitende Satz steht in derselben Zeile wie die Spur und bricht
   auf schmalen Bildschirmen sauber davor um. */
.sa-brotkrumen-titel {
  display: inline-block;
  margin-right: 0.6rem;
  color: var(--muted-foreground, #5b5b52);
  font-size: 1rem;
  line-height: 1.6;
}

.sa-brotkrumen ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-foreground, #5b5b52);
}

.sa-brotkrumen li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.sa-brotkrumen li + li::before {
  content: "›";
  opacity: 0.55;
}

.sa-brotkrumen a {
  color: inherit;
  text-decoration: none;
}

.sa-brotkrumen a:hover,
.sa-brotkrumen a:focus-visible {
  color: var(--brand, #176933);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sa-brotkrumen [aria-current="page"] {
  color: var(--foreground, #1c1c17);
  font-weight: 600;
}