@charset "UTF-8";
/* =========================================================================
   Naturdörfer e. V. — Vereinsportal

   EINE Datei für alles: für die Website und für die Redaktion. Es gibt
   kein zweites Stylesheet, und das ist Absicht — wer in der Redaktion
   schreibt, soll dieselben Farben und Knöpfe sehen wie auf der fertigen
   Seite, sonst ist die Vorschau nichts wert.

   Jede Seite trägt <body data-sparte="…">. Daran hängt die Akzentfarbe
   der Sparte; alles andere ist überall gleich.

   Die Datei ist in Abschnitte geteilt. Suchen Sie nach „== “, dann
   springen Sie von Überschrift zu Überschrift.
   ========================================================================= */

/* == 0  Schriften ======================================================== */

/* Vollkorn, Friedrich Althausen, SIL Open Font License 1.1
   Variabler Schnitt: deckt 400 bis 900 aus einer Datei ab. */
@font-face {
  font-family: "Vollkorn";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/vollkorn-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fira Sans, Erik Spiekermann / Carrois, SIL Open Font License 1.1 */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/firasans-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/firasans-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fira Mono, SIL Open Font License 1.1 — Archivdaten, Objekttafeln */
@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/firamono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* == 1  Token ============================================================ */

:root {
  /* --- Papier: die Farben des Portals, aus dem Logo abgeleitet --------- */
  --papier: #fbfbf9;
  --papier-2: #f1f3ef;
  --tinte: #151a16;        /* Fließtext                          17.0:1 */
  --tinte-2: #5c665e;      /* Sekundärtext                        5.8:1 */
  --linie: #d8ded7;

  --gruen: #2c612b;        /* Logogrün, Struktur, Überschriften   7.1:1 */
  --gruen-tief: #1e441d;   /* Hover, aktiv                       10.7:1 */
  --gruen-wash: #2c612b14; /* 8 % Fläche hinter dem Sparten-Raster */
  --blau: #6590bb;         /* Logoblau — nur Fläche/Linie/ab 24 px 3.2:1 */
  --blau-tief: #27527d;    /* Links und Bedienelemente            7.8:1 */

  /* --- Ruß: nur /backhaus/ -------------------------------------------- */
  --russ: #161a17;
  --russ-2: #1e2320;
  --eisen: #39443f;
  --asche: #8c948e;        /* 5.7:1 auf Ruß */
  --mehl: #e7e3d8;         /* 13.7:1 auf Ruß */

  /* --- Rollen ---------------------------------------------------------
     Alles Weitere greift ausschließlich auf diese sechs Namen zu. Der
     dunkle Raum tauscht sie unten aus, und die ganze Seite kippt mit. */
  --grund: var(--papier);
  --grund-2: var(--papier-2);
  --text: var(--tinte);
  --text-2: var(--tinte-2);
  --kante: var(--linie);
  --akzent: var(--gruen);
  --radius: 6px;
  /* Ein Schwung des Vereinszeichens, dünn — Form für den Wellen-Trenner. */
  --schwung: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 30%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 1C20 11 45 22 66 22C82 22 92 9 104 9C112 9 117 12 120 15C117 14.5 112 13.5 104 13.5C92 13.5 82 29 66 29C45 29 20 14 0 1Z%27/%3E%3C/svg%3E");

  /* Schrift */
  --schrift-display: "Vollkorn", Georgia, "Times New Roman", serif;
  --schrift-text: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --schrift-tafel: "Fira Mono", "Cascadia Mono", Consolas, monospace;

  /* Modulare Skala. 19 px Fließtext, Verhältnis 1.25 mobil. */
  --verhaeltnis: 1.25;
  --s0: 1.1875rem;
  --s-1: calc(var(--s0) / var(--verhaeltnis));
  --s-2: calc(var(--s-1) / var(--verhaeltnis));
  --s1: calc(var(--s0) * var(--verhaeltnis));
  --s2: calc(var(--s1) * var(--verhaeltnis));
  --s3: calc(var(--s2) * var(--verhaeltnis));
  --s4: calc(var(--s3) * var(--verhaeltnis));

  /* Raum */
  --rand: clamp(1rem, 5vw, 4.5rem);
  --gasse: clamp(1rem, 2.2vw, 2rem);
  --breite: 84rem;
  --textbreite: 68ch;
  --abschnitt: clamp(3.5rem, 9vh, 7rem);

  /* Bewegung */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dauer-mikro: 150ms;
  --dauer-reveal: 520ms;

  --kopfhoehe: 3.25rem;
}

@media (min-width: 768px) {
  :root {
    --verhaeltnis: 1.333;
    --kopfhoehe: 3.5rem;
  }
}

/* --- Ein Akzent je Sparte. Eine Regel, kein zweites Stylesheet. -------- */

[data-sparte="heimatstuben"] { --akzent: #8a6520; }  /* Messing, Eiche  5.1:1 */
[data-sparte="feste"]        { --akzent: #9b2f45; }  /* Fahnentuch      7.0:1 */
[data-sparte="sport"]        { --akzent: #27527d; }  /* Logoblau        7.8:1 */
[data-sparte="wege"]         { --akzent: #2c612b; }  /* Logogrün        7.1:1 */
[data-sparte="verein"]       { --akzent: #2c612b; }  /* Marke                  */
[data-sparte="start"]        { --akzent: #2c612b; }
[data-sparte="backhaus"]     { --akzent: #b23a12; }  /* Glut, dunkel    6.1:1 */

/* Die Farben --russ, --mehl, --asche und --eisen oben im Abschnitt
   Token werden derzeit nicht benutzt. Bitte trotzdem stehen lassen: Sie
   sind gemessen und dokumentiert, und wer je einen dunklen Bereich
   braucht, hat sie fertig. */

/* == 2  Grundlagen ======================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--s0);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg { display: block; max-width: 100%; }

img { height: auto; }

ul,
ol { margin: 0; padding: 0; list-style: none; }

figure { margin: 0; }

a {
  color: var(--blau-tief);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dauer-mikro) var(--ease-out);
}

a:hover { color: var(--gruen-tief); }

/* Fokus. Sichtbar, überall, nie abgeschaltet. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Nur für Bildschirmleser */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Der Zeichenvorrat für <use>. Nimmt keinen Platz ein. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* == 3  Typografie ======================================================= */

h1,
h2,
h3 {
  font-family: var(--schrift-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 9vw, var(--s4)); }
h2 { font-size: var(--s3); }
h3 { font-size: var(--s1); line-height: 1.25; }

/* Überschriften tragen die Struktur — deshalb Grün, nicht der Sparten-Akzent.
   Auf den Sparten-Seiten färbt sich nur die h1, siehe Abschnitt 8. */
h1, h2, h3 { color: var(--gruen); }

p { margin: 0 0 1.05em; max-width: var(--textbreite); hyphens: auto; }
p:last-child { margin-bottom: 0; }

.vorspann {
  font-size: var(--s1);
  line-height: 1.5;
  max-width: 46ch;
}

.zwischenraum > * + * { margin-top: 1.05em; }

strong, b { font-weight: 600; }

abbr[title] {
  text-decoration: underline dotted var(--text-2);
  text-underline-offset: 0.2em;
  cursor: help;
}

/* Tabellarisch gesetzt, nicht erzählerisch. */
.tafelschrift,
.objekttafel,
.marke,
.nav a,
.nav button,
.fuss__zeile {
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.marke {
  display: block;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--s-2);
  margin-bottom: 1.1em;
}

.marke::before {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 1px;
  background: var(--text-2);
  vertical-align: 0.32em;
  margin-right: 0.7em;
}

/* Unbelegte Angabe. Sichtbar, damit sie niemand übersieht und niemand
   versehentlich etwas erfindet. Umbrechen muss sie: manche dieser
   Hinweise sind ganze Sätze. */
.pruefen {
  display: inline;
  font-family: var(--schrift-tafel);
  font-size: 0.86em;
  line-height: 1.9;
  color: var(--text-2);
  border: 1px dashed var(--kante);
  padding: 0.1em 0.45em;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* == 4  Hülle, Raster, Abschnitte ======================================== */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gasse);
}

.abschnitt {
  padding-block: var(--abschnitt);
  scroll-margin-top: calc(var(--kopfhoehe) + 1.5rem);
}


.spalte-links,
.spalte-rechts { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .spalte-links { grid-column: 1 / span 4; }
  .spalte-rechts { grid-column: 6 / span 7; }
}

@media (min-width: 1200px) {
  .spalte-links { grid-column: 1 / span 3; }
  .spalte-rechts { grid-column: 5 / span 7; }
}

.kopf-zeile { margin-bottom: clamp(2rem, 5vh, 3.5rem); }

/* == 5  Kopf: Sprungmarke, Lockup, Navigation ============================ */

.sprung {
  position: absolute;
  left: var(--rand);
  top: 0;
  z-index: 60;
  transform: translateY(-120%);
  background: var(--grund);
  color: var(--text);
  border: 1px solid var(--kante);
  padding: 0.7em 1.2em;
  text-decoration: none;
  transition: transform var(--dauer-mikro) var(--ease-out);
}

.sprung:focus-visible { transform: translateY(0.5rem); }

.kopf {
  border-bottom: 1px solid var(--kante);
  background: var(--grund);
}

.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--gasse);
  max-width: var(--breite);
  margin-inline: auto;
  padding: 0.6rem var(--rand);
}

/* --- AUFBAU-HINWEIS ----------------------------------------------------
   Gehört zum Block in inc/funktionen.php, seite_kopf(). Wird der dort
   gelöscht, können diese Regeln mit weg. */
.aufbau {
  background: #f7d84a;
  border-bottom: 1px solid #d2ae1c;
  color: var(--tinte);
}
.aufbau__innen {
  display: flex;
  align-items: center;
  gap: 0.6rem 1rem;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 0.55rem var(--rand);
}
.aufbau__zeichen { flex: none; width: calc(26px * 945 / 311); height: 26px; }
.aufbau p { margin: 0; max-width: none; font-size: var(--s-1); line-height: 1.45; }

/* --- Lockup ----------------------------------------------------------- */

.lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text);
  flex: 0 0 auto;
  padding-block: 0.2rem;
}

.lockup__zeichen {
  flex: 0 0 auto;
  width: calc(34px * 945 / 311);
  height: 34px;
}

.lockup__name {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: var(--s0);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* min-width:0 lässt den Textblock unter seine Inhaltsbreite schrumpfen.
   Ohne das schiebt die zweite Zeile das Lockup auf schmalen Geräten über
   den Rand, und overflow-x:hidden schneidet sie wortlos ab. */
.lockup > span { min-width: 0; }

/* Der Satz unter dem Vereinsnamen: SLOGAN aus /inc/sparten.php. */
.lockup__satz {
  display: block;
  font-family: var(--schrift-tafel);
  font-size: 0.66rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-2);
  margin-top: 0.15em;
}

@media (min-width: 768px) {
  .lockup__zeichen { width: calc(44px * 945 / 311); height: 44px; }
  .lockup__name { font-size: var(--s1); }
  .lockup__satz { font-size: 0.72rem; }
}

/* Die drei Schwünge. */
.ds-g { fill: var(--gruen); }
.ds-b { fill: var(--blau); }

/* --- Navigation: sieben Punkte, auf dem Handy hinter einem Knopf -------
   Sieben Punkte, der längste heißt „Chronologie". Untereinander wären
   das auf dem Handy vier Zeilen, die den Inhalt weit nach unten
   schieben. Deshalb ein Knopf.

   Die Klasse nav--klappbar setzt ausschließlich das JavaScript. Ohne
   Skript bleibt die Liste offen sichtbar — siehe js/seite.js. */

.nav { flex: 1 1 100%; }

.nav__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 0.5rem;
}

/* --- Der Menüknopf ------------------------------------------------------ */

.nav__knopf {
  display: none;
  align-items: center;
  gap: 0.6em;
  margin-left: auto;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--grund-2);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Die drei Balken. Ein Kästchen mit zwei Schatten darüber und darunter —
   so braucht es kein Bild und keine zusätzlichen Elemente im HTML. */
.nav__balken,
.nav__balken::before,
.nav__balken::after {
  display: block;
  width: 1.15em;
  height: 2px;
  background: currentColor;
}

.nav__balken { position: relative; }
.nav__balken::before,
.nav__balken::after { content: ""; position: absolute; left: 0; }
.nav__balken::before { top: -0.38em; }
.nav__balken::after  { top:  0.38em; }

@media (max-width: 719.98px) {
  .nav__knopf { display: inline-flex; }

  /* Solange das Skript den Knopf nicht freigegeben hat, bleibt er weg.
     Diese Zeile muss sein: Ohne sie gewinnt die display-Angabe oben
     gegen das eingebaute [hidden] des Browsers, und der Knopf stünde
     auch dann da, wenn er nichts tut. */
  .nav__knopf[hidden] { display: none; }

  .nav--klappbar .nav__liste { display: none; }
  .nav--klappbar.ist-offen .nav__liste { display: grid; }
}

@media (min-width: 720px) {
  .nav { flex: 1 1 auto; }
  .nav__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.1rem;
  }
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dauer-mikro) var(--ease-out),
    border-color var(--dauer-mikro) var(--ease-out);
}

.nav a:hover {
  color: var(--text);
  border-bottom-color: var(--kante);
}

.nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--akzent);
}

/* == 6  Wellen-Trenner =================================================== */

/* Zwischen zwei Abschnitten steht statt einer Linie ein einzelner,
   dünner Schwung aus dem Vereinszeichen: mittig auf der Kante, in der
   Farbe der Sparte. Er ist als Maske gezeichnet — so nimmt er jede Farbe
   an (--akzent), ohne dass es ein Bild je Sparte braucht. Ein Ornament
   ohne Inhalt, deshalb als ::before und nicht im HTML. */
.abschnitt--linie { position: relative; }
.abschnitt--linie::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(66%, 52rem);    /* zwei Drittel der Inhaltsbreite */
  height: 2rem;
  transform: translate(-50%, -50%);
  background: var(--akzent);
  /* in die Breite gezogen; Höhe = Strichdicke bleibt fest */
  -webkit-mask: var(--schwung) center / 100% 100% no-repeat;
  mask: var(--schwung) center / 100% 100% no-repeat;
}

/* == 7  Startseite ======================================================= */

/* --- Sparten-Raster --------------------------------------------------- */

/* --- Bänder: hell und getönt im Wechsel --------------------------------
   Jeder zweite Abschnitt der Startseite bekommt die grüne Tönung. Das
   zählt der Browser selbst ab — wer in der index.php Abschnitte
   umstellt, muss hier nichts nachziehen; die Bänder wechseln trotzdem
   sauber. Der Aufmacher ist Abschnitt 1 und bleibt damit hell.

   Die ungeraden Abschnitte werden ausdrücklich hell gesetzt: Der
   Beitragsabschnitt bringt sonst seine eigene Tönung mit (Abschnitt 12),
   und zwei getönte Bänder stießen aneinander. */
[data-sparte="start"] main > section:nth-of-type(even) { background: var(--gruen-wash); }
[data-sparte="start"] main > section:nth-of-type(odd)  { background: var(--grund); }

.sparten__raster {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* Die ganze Karte ist der Link — kein Skript macht sie klickbar. */
.karte {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--tinte);
  transition: transform var(--dauer-mikro) var(--ease-out),
    border-color var(--dauer-mikro) var(--ease-out),
    box-shadow var(--dauer-mikro) var(--ease-out);
}

.karte__bild {
  display: block;
  overflow: hidden;
  background: var(--papier-2);
}

.karte__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dauer-mikro) var(--ease-out);
}

.karte__text {
  padding: 1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
}

/* h3 auf der Startseite, h2 in der Redaktion — dort steht darüber schon
   eine h1, und Überschriftenebenen dürfen nicht übersprungen werden. */
.karte h3,
.karte h2 {
  font-size: var(--s1);
  line-height: 1.2;
  color: var(--akzent);
  /* „Heimatstuben" ist breiter als eine schmale Kachel. Ohne diese zwei
     Zeilen schneidet das overflow:hidden der Kachel das Wort wortlos ab
     — man liest dann „Heimatstub". Mit Silbentrennung bricht es sauber
     um; break-word ist die Notbremse für noch längere Wörter. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.karte p {
  margin: 0;
  font-size: var(--s-1);
  line-height: 1.55;
  color: var(--tinte-2);
  max-width: none;
}

.karte:hover,
.karte:focus-visible {
  transform: translateY(-2px);
  border-color: var(--akzent);
  box-shadow: 0 8px 22px rgb(21 26 22 / 0.09);
}

.karte:hover .karte__bild img { transform: scale(1.02); }

/* Je Karte ihr eigener Akzent. */
.karte--backhaus     { --akzent: #b23a12; }
.karte--heimatstuben { --akzent: #8a6520; }
.karte--feste        { --akzent: #9b2f45; }
.karte--sport        { --akzent: #27527d; }
.karte--wege         { --akzent: #2c612b; }

/* --- Termine ---------------------------------------------------------- */

.termin {
  display: grid;
  gap: 0.2rem 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--grund-2);
  border: 1px solid var(--kante);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
}

@media (min-width: 560px) {
  .termin { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; }
}

.termin__wann {
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  color: var(--text-2);
}

.termin__was { font-weight: 600; }

.termin__wo {
  font-size: var(--s-1);
  color: var(--text-2);
  grid-column: -2;
}

/* --- Mitmachen und Kontaktzeile --------------------------------------- */

.kontaktzeile {
  display: grid;
  gap: 0.9rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  max-width: 60rem;
}

.kontaktzeile dt {
  font-family: var(--schrift-tafel);
  font-size: var(--s-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  margin-bottom: 0.2rem;
}

.kontaktzeile dd { margin: 0; }

/* == 8  Sparten-Seiten =================================================== */

.zurueck {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  color: var(--text-2);
  text-decoration: none;
}

.zurueck:hover { color: var(--akzent); }

.sparte__kopf { padding-block: clamp(1rem, 3vh, 2rem) clamp(2rem, 5vh, 3rem); }

.sparte__kopf h1 { color: var(--akzent); }

.sparte__satz {
  font-size: var(--s1);
  line-height: 1.5;
  max-width: 46ch;
  margin-top: 1.1rem;
}

/* Der freundliche Hinweis, dass die Seite entsteht. */
.hinweis {
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--grund-2);
  padding: 1.1rem 1.3rem;
  margin-block: clamp(1.5rem, 4vh, 2.5rem);
  max-width: var(--textbreite);
}

.hinweis > :first-child { margin-top: 0; }
.hinweis p { font-size: var(--s-1); line-height: 1.6; color: var(--text-2); }
.hinweis strong { color: var(--text); }

/* Leeres Abschnittsgerüst: bleibt sichtbar, damit späteres Füllen
   Kopierarbeit ist und niemand die Stelle sucht. */
.gerippe {
  border: 1px dashed var(--kante);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  color: var(--text-2);
  font-size: var(--s-1);
  max-width: var(--textbreite);
}

.daten {
  display: grid;
  gap: 0.9rem 2rem;
  margin: 0;
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  line-height: 1.6;
}

@media (min-width: 560px) {
  .daten { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
}

.daten dt {
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--s-2);
  padding-top: 0.2em;
}

.daten dd { margin: 0; color: var(--text); }

.anfahrt { margin-top: clamp(2rem, 5vh, 3rem); }

.anfahrt img { width: 100%; border: 1px solid var(--kante); border-radius: var(--radius); }

/* == 9  Fuß ============================================================== */

.fuss {
  border-top: 1px solid var(--kante);
  padding-block: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 3vh, 2.5rem);
  background: var(--grund-2);
}

.fuss__raster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.fuss h2 { font-size: var(--s0); margin-bottom: 0.6rem; }

.fuss p,
.fuss li { color: var(--text-2); font-size: var(--s-1); line-height: 1.65; }

.fuss li + li { margin-top: 0.35rem; }

.fuss a { color: var(--blau-tief); }

.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--kante);
  color: var(--text-2);
  max-width: none;
}

/* Der Weg zur Redaktion, nur auf der Startseite: in der Farbe der
   übrigen Zeile, ohne Unterstrich, ganz rechts. Wer ihn sucht, findet
   ihn; Besuchern fällt er nicht ins Auge. */
.fuss__zeile .fuss__redaktion {
  margin-left: auto;
  color: inherit;
  text-decoration: none;
}
.fuss__zeile .fuss__redaktion:hover { text-decoration: underline; }

/* == 10  Gemeinsame Bausteine ============================================ */

/* --- Taste --------------------------------------------------------------
   Der Knopf dieser Website. Als <button> und als <a> gleich aussehend.
   44px Mindesthöhe, damit man ihn auch mit dem Daumen trifft. */

.taste {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--grund-2);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  padding: 0.7em 1.4em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer-mikro) var(--ease-out),
    border-color var(--dauer-mikro) var(--ease-out);
}

.taste:hover { border-color: var(--akzent); }

.taste--wichtig {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

.taste--wichtig:hover { filter: brightness(1.1); }

/* --- Objekttafel --------------------------------------------------------
   Die Bildunterschrift: was zu sehen ist, wo es steht, wem das Bild
   gehört. Gehört unter jedes Bild, dessen Herkunft genannt werden muss. */

.objekttafel {
  color: var(--text-2);
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--kante);
}

.objekttafel b { display: block; color: var(--text); font-weight: 400; margin-bottom: 0.15rem; }
.objekttafel span { display: block; }
.objekttafel .rechte { margin-top: 0.3rem; }


/* == 11  Aufmacher der Startseite ======================================== */

/* Ein großes Bild, darunter der Name und der Satz — am Desktop beides
   nebeneinander, siehe unten. Bewusst nicht mit
   Schrift auf dem Bild: Welches Foto der Verein später liefert, wissen
   wir nicht, und heller Text auf einem hellen Himmel wäre unlesbar.
   Unter dem Bild stimmt der Kontrast immer. */

.held { margin-bottom: clamp(2rem, 6vh, 4rem); }

.held__bild {
  display: block;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
}

.held__bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--grund-2);
}

@media (max-width: 600px) {
  /* Auf dem Handy ein stehenderes Format — ein 16:9-Streifen wäre dort
     nur noch ein Band und zeigte vom Motiv fast nichts. */
  .held__bild img { aspect-ratio: 4 / 3; }
}

.held__text {
  max-width: var(--breite);
  margin-inline: auto;
  padding: clamp(1.4rem, 4vh, 2.4rem) var(--rand) 0;
  text-align: center;
}

.held__satz {
  font-family: var(--schrift-display);
  font-size: var(--s2);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-2);
  margin-top: 0.4em;
  text-wrap: balance;
}

@media (min-width: 900px) {
  /* Am Desktop nebeneinander: Name und Satz links, Bild rechts. So
     stehen beide über der Falz, und der Platz neben dem Bild bleibt
     nicht leer. Im HTML bleibt das Bild vorn — die Reihenfolge regelt
     allein das Raster, damit am Handy alles bleibt, wie es ist. */
  .held {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "text bild";
    align-items: center;
    gap: var(--gasse);
    max-width: var(--breite);
    margin-inline: auto;
    padding: clamp(1.5rem, 4vh, 3rem) var(--rand) 0;
  }

  .held__bild { grid-area: bild; }
  .held__bild img { aspect-ratio: 3 / 2; }

  .held__text {
    grid-area: text;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .held__text h1 { font-size: clamp(2rem, 4vw, var(--s4)); }
}


/* == 12  Beiträge aus der Redaktion ====================================== */

/* So sieht ein Beitrag aus, den der Verein selbst eingetragen hat.
   Dieselbe Darstellung auf der Spartenseite, in der Chronologie und in
   der Vorschau der Redaktion — es gibt dafür nur eine Funktion,
   eintrag_ausgeben() in /inc/vorlage.php. Was hier aussieht wie das
   Ergebnis, IST das Ergebnis. */

/* Ein Beitrag ist eine Kachel, kein weiterer Abschnitt: weiß, mit
   Schatten, auf einer leicht getönten Fläche. Sonst geht er zwischen
   den festen Texten unter, und niemand sieht, wo der feste Text aufhört
   und das anfängt, was der Verein selbst geschrieben hat.

   Der Balken links ist derselbe wie in der Chronologie. Das ist
   Absicht: Wer ihn einmal gesehen hat, erkennt überall auf der Seite
   „hier hat der Verein etwas eingetragen". */
.abschnitt--beitraege {
  background: var(--grund-2);
  background: color-mix(in srgb, var(--akzent) 7%, var(--grund));
}
.beitrag {
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  padding: clamp(1.3rem, 3.5vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--kante);
  border-left: 5px solid var(--akzent);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(21 26 22 / 6%), 0 8px 22px -10px rgb(21 26 22 / 22%);
}

/* Die Überschrift sitzt oben in der Fläche, deshalb ohne Abstand.

   Sie bleibt GRÜN. Es lag nahe, sie in die Farbe der Sparte zu setzen —
   sieht auf den ersten Blick hübsch aus. Aber Abschnitt 3 dieser Datei
   legt fest: Überschriften tragen die Struktur und sind deshalb grün,
   der Sparten-Akzent gehört an Ränder und Kleinteile. Rote
   Überschriften mitten unter grünen sähen nach Versehen aus.
   Die Fläche und der Balken links unterscheiden schon genug. */
.beitrag > :first-child { margin-top: 0; }

.beitrag__datum {
  display: block;
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 0.3em;
}

/* Ein Bild in der Fläche darf bis an deren Rand laufen. Sonst entsteht
   ein doppelter Rahmen: der der Fläche und der Zwischenraum davor. */
.beitrag__bild img,
.galerie__stueck img { background: var(--grund); }

.beitrag__text { margin-top: 1rem; }
.beitrag__text p { max-width: var(--textbreite); }

/* --- Galerie: seitwärts schiebbarer Streifen, ohne JavaScript -----------
   Vier Dinge müssen zusammenkommen, damit das auch bedienbar ist:

     1. tabindex="0" am <ul> im HTML. Erst dadurch ist der Streifen mit
        der Tabulatortaste erreichbar, und dann scrollen die Pfeiltasten,
        Bild auf/ab, Pos1 und Ende ihn ganz von allein.
     2. role="group" und aria-label, sonst landet der Fokus auf etwas
        Namenlosem und ein Screenreader sagt nur „Gruppe".
     3. Die Scrollleiste bleibt SICHTBAR. Sie auszublenden ist der
        häufigste Fehler bei solchen Streifen: Mit der Maus sieht man
        dann nicht, dass es rechts weitergeht.
     4. Der Fokusrahmen darf nicht abgeschnitten werden — dafür der
        negative outline-offset. */

/* Der Rahmen hält Streifen und Pfeile zusammen. container-type macht
   seine Breite für die Pfeile messbar (cqi, siehe unten). */
.galerie-rahmen {
  position: relative;
  margin-top: 1.4rem;
  container-type: inline-size;
}

.galerie {
  display: flex;
  gap: var(--gasse);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 0.75rem;
  margin: 0;
  list-style: none;
}

.galerie:focus-visible { outline-offset: -2px; }

.galerie__stueck {
  flex: 0 0 min(100%, 34rem);
  scroll-snap-align: center;
}

.galerie__stueck img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--grund-2);
}

/* Ein Bild ist ein Link zur großen Ansicht. Die Lupe als Mauszeiger
   verrät das, ohne dass etwas auf dem Bild stehen muss. */
/* position: relative hält den versteckten Screenreader-Text (.nur-sr)
   im Link fest. Ohne das hängt er sich an den Galerie-Rahmen, entkommt
   so dem Scrollbereich des Streifens und macht die ganze Seite breiter. */
.bildlink { position: relative; display: block; cursor: zoom-in; }
.bildlink img { display: block; }

/* --- Pfeile am Streifen ---------------------------------------------------
   Sie sitzen auf halber Bildhöhe, nicht auf halber Höhe des Streifens —
   darunter steht ja oft noch eine Bildunterschrift. Die Bildhöhe ergibt
   sich aus der Breite eines Bildes (min(100cqi, 34rem), wie bei
   .galerie__stueck) und dem Format 3:2; die Hälfte davon ist ein Drittel
   der Breite.

   Am Anfang des Streifens ist „zurück" abgeschaltet, am Ende „vor".
   Passen alle Bilder nebeneinander, blendet das Skript beide aus. */
.galerie__pfeil {
  position: absolute;
  top: calc(min(100cqi, 34rem) / 3);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--text);
  box-shadow: 0 2px 10px rgb(21 26 22 / 0.22);
  transition: opacity var(--dauer-mikro), background var(--dauer-mikro);
}
.galerie__pfeil[hidden] { display: none; }
.galerie__pfeil:hover { background: #fff; }
.galerie__pfeil:disabled { opacity: 0; pointer-events: none; }
.galerie__pfeil--zurueck { left: 0.6rem; }
.galerie__pfeil--vor     { right: 0.6rem; }

/* --- Die große Bildansicht ------------------------------------------------
   Ein <dialog>, gebaut von js/seite.js. Der Browser erledigt dabei das
   Schwierige selbst: Fokus im Dialog halten, Escape schließt, danach
   steht der Fokus wieder auf dem Bild, das geöffnet wurde.

   Das Bild wird hier NICHT beschnitten (object-fit: contain) — im
   Streifen ist es auf 3:2 zugeschnitten, hier sieht man es ganz. */
.leuchte {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0e110f;
  color: #fff;
}
.leuchte::backdrop { background: transparent; }
.leuchte[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.leuchte__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
}

.leuchte__buehne {
  position: relative;
  display: grid;
  /* Feste Rasterzelle, damit max-height: 100% am Bild greift. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: 0 clamp(0.5rem, 5vw, 4.5rem);
}

.leuchte__bild {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.leuchte__text {
  max-width: none;
  margin: 0;
  min-height: 1.5em;
  padding: 0.75rem 1.25rem 1.25rem;
  text-align: center;
  font-size: var(--s-1);
  color: rgb(255 255 255 / 0.85);
}

.leuchte__knopf {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: #fff;
  background: rgb(255 255 255 / 0.1);
  transition: background var(--dauer-mikro);
}
.leuchte__knopf:hover { background: rgb(255 255 255 / 0.22); }
.leuchte__knopf:focus-visible { outline-color: #fff; }
.leuchte__knopf[hidden] { display: none; }

.leuchte__knopf--zurueck,
.leuchte__knopf--vor {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.leuchte__knopf--zurueck { left: 0.5rem; }
.leuchte__knopf--vor     { right: 0.5rem; }

/* Solange die Bildansicht offen ist, scrollt die Seite dahinter nicht. */
.leuchte-offen { overflow: hidden; }

/* Ein einzelnes Bild wird kein Karussell — dafür sorgt die Vorlage. */
.beitrag__bild { margin-top: 1.4rem; }

.beitrag__bild img {
  width: 100%;
  height: auto;
  background: var(--grund-2);
}

/* --- Ton und Film -------------------------------------------------------
   Der eingebaute Abspieler des Browsers. Kein fremdes Programm, kein
   Nachladen von außen. preload="none" steht im HTML und ist wichtig:
   Ohne das lädt ein 40-MB-Film schon, weil jemand daran vorbeiscrollt. */

.medium { margin-top: 1.6rem; }

.medium audio,
.medium video {
  display: block;
  width: 100%;
  max-width: 44rem;
  background: var(--grund-2);
}

.medium video { height: auto; aspect-ratio: 16 / 9; }


/* == 13  Fremde Inhalte: erst nach dem Klick ============================= */

/* Ein eingebettetes Video oder ein eingebetteter Kalender baut beim
   Laden eine Verbindung zu einem fremden Server auf und überträgt dabei
   die IP-Adresse des Besuchers. Das darf nicht ungefragt geschehen.

   Deshalb steht hier zunächst nur diese Kachel. Erst der Knopf holt den
   Inhalt. Der Hinweistext darin ist keine Verzierung — er ist der
   Grund, warum die Sache datenschutzrechtlich trägt. Bitte nicht
   kürzen. */

.zweiklick {
  margin-top: 1.6rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  background: var(--grund-2);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
}

.zweiklick__text > * + * { margin-top: 0.7em; }
.zweiklick__text p { max-width: 56ch; color: var(--text-2); }
.zweiklick__text strong { color: var(--text); }
.zweiklick .taste { margin-top: 0.3em; }

/* Der Rahmen, den das Skript nach dem Klick einsetzt. */
.einbettung {
  margin-top: 1.6rem;
  aspect-ratio: 16 / 9;
  background: var(--grund-2);
  border: 1px solid var(--kante);
}

.einbettung iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Der Kalender ist höher als breit nützlich — 16:9 schneidet ihn ab. */
.einbettung--kalender { aspect-ratio: auto; height: min(80vh, 44rem); }


/* == 14  Chronologie ===================================================== */

/* --- Die Filterzeile ----------------------------------------------------
   Ganz normale Links, kein Auswahlfeld und kein JavaScript. Der Vorteil
   von Links: Jede Auswahl hat ihre eigene Adresse, die man sich merken,
   verschicken oder als Lesezeichen ablegen kann. */

.filterzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.4rem;
  list-style: none;
}

.filterzeile a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  letter-spacing: 0.04em;
  color: var(--text-2);
  text-decoration: none;
  border: 1px solid var(--kante);
  border-radius: var(--radius);
}

.filterzeile a:hover { color: var(--text); border-color: var(--text-2); }

.filterzeile a[aria-current="page"] {
  color: var(--text);
  border-color: var(--akzent);
  border-left-width: 3px;
}

/* --- Die Liste ----------------------------------------------------------
   Kurzfassung: Datum, Sparte, Überschrift, Anfang des Textes. Der ganze
   Eintrag steht unter seiner eigenen Adresse. */

.chronik { list-style: none; margin-top: 1.6rem; }
.chronik__jahr { font-size: var(--s2); margin-top: 2.4rem; }
nav + .tafelschrift { margin-top: 1.2rem; }

.chronik__eintrag {
  display: grid;
  gap: 0.2rem 1.2rem;
  padding: 1.1rem 0 1.1rem 0.9rem;
  border-top: 1px solid var(--kante);
  border-left: 3px solid var(--akzent);
}

.chronik__eintrag:last-child { border-bottom: 1px solid var(--kante); }

@media (min-width: 720px) {
  .chronik__eintrag { grid-template-columns: 12rem 1fr; }
}

.chronik__wann {
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  color: var(--text-2);
}

.chronik__was h3 { font-size: var(--s1); margin: 0; }
.chronik__was h3 a { text-decoration: none; }
.chronik__was h3 a:hover { text-decoration: underline; }

/* Der Titel eines Beitrags auf Start- und Spartenseite führt zu seiner
   Einzelseite. Er bleibt aussehen wie eine Überschrift; erst beim
   Darüberfahren zeigt die Unterstreichung, dass er ein Link ist. */
.beitrag__link { color: inherit; text-decoration: none; }
.beitrag__link:hover { text-decoration: underline; }
.chronik__anriss { color: var(--text-2); margin-top: 0.3em; max-width: 68ch; }

/* Jede Sparte färbt ihren eigenen Streifen. Die Werte stehen schon in
   Abschnitt 1; hier werden sie nur auf die einzelne Zeile gezogen,
   weil in der Chronologie alle Sparten gemischt untereinander stehen. */
.chronik__eintrag[data-sparte="backhaus"]     { border-left-color: #b23a12; }
.chronik__eintrag[data-sparte="heimatstuben"] { border-left-color: #8a6520; }
.chronik__eintrag[data-sparte="feste"]        { border-left-color: #9b2f45; }
.chronik__eintrag[data-sparte="sport"]        { border-left-color: #27527d; }
.chronik__eintrag[data-sparte="wege"]         { border-left-color: #2c612b; }
.chronik__eintrag[data-sparte="verein"]       { border-left-color: #2c612b; }


/* == 15  Redaktion — nur /redaktion/ ===================================== */

/* Die Redaktion benutzt dieselbe Datei wie die Website. Das ist Absicht:
   Wer dort schreibt, soll dieselben Farben, dieselbe Schrift und
   dieselben Knöpfe sehen wie auf der fertigen Seite — dann ist die
   Vorschau glaubwürdig. Ein zweites Stylesheet gibt es nicht.

   Kosten für die Besucher: rund 1,5 KB in einer Datei, die der Browser
   ohnehin ein Jahr lang behält. */

/* --- Das Band: „Sie schreiben für …" ------------------------------------
   Steht auf jedem Bildschirm der Redaktion ganz oben. Das data-sparte
   daran holt sich die Farbe der Sparte aus Abschnitt 1 — ohne eine
   einzige zusätzliche Regel. */

.redaktion__band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  margin-bottom: 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--grund-2);
  border-left: 5px solid var(--akzent);
  border-radius: var(--radius);
}

.redaktion__band strong {
  font-family: var(--schrift-display);
  font-size: var(--s1);
  font-weight: 600;
}

.redaktion__band a { margin-left: auto; }

/* Zeile „Angemeldet als … [Abmelden]" oben auf jeder Redaktionsseite,
   und das schmale Anmeldeformular. */
.redaktion__konto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 1rem;
  margin: 0 0 1.4rem;
  color: var(--text-2);
  font-size: var(--s-1);
}
.redaktion__anmelden { max-width: 26rem; }

/* --- Formularfelder ----------------------------------------------------- */

.feld { margin-top: 1.6rem; }

.feld > label {
  display: block;
  font-family: var(--schrift-tafel);
  font-size: var(--s-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.4rem;
}

.feld input,
.feld textarea,
.feld select {
  display: block;
  width: 100%;
  max-width: 44rem;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
}

.feld textarea { line-height: 1.6; resize: vertical; }
.feld input[type="file"] { padding: 0.5rem; background: var(--grund-2); }

.feld__hinweis {
  max-width: 56ch;
  margin-top: 0.4rem;
  font-size: var(--s-1);
  color: var(--text-2);
}

.feld__reihe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* --- Meldungen ----------------------------------------------------------
   Drei Sorten. Der farbige Streifen links unterscheidet sie auch für
   Menschen, die Rot und Grün nicht auseinanderhalten — deshalb steht in
   jeder Meldung zusätzlich ein Wort, das sagt, worum es geht. */

.melde {
  margin-bottom: 1.6rem;
  padding: 0.9rem 1.1rem;
  background: var(--grund-2);
  border-left: 5px solid var(--text-2);
  border-radius: var(--radius);
}

.melde > * + * { margin-top: 0.5em; }
.melde--gut     { border-left-color: #2c612b; }
.melde--warnung { border-left-color: #9b2f45; }

/* Ein bereits hochgeladenes Bild im Formular: kleine Vorschau links,
   die Beschriftungsfelder rechts daneben. */
.redaktion__datei {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--kante);
}

.redaktion__datei img {
  flex: 0 0 auto;
  width: 120px;
  height: 80px;
  object-fit: cover;
  background: var(--grund-2);
  border: 1px solid var(--kante);
}

.redaktion__datei > div { flex: 1 1 20rem; }
.redaktion__datei label { display: block; }
.redaktion__datei input[type="checkbox"] { display: inline; width: auto; min-height: 0; }

/* Bearbeiten und Löschen nebeneinander. „Löschen" steckt in einem
   eigenen Formular, und ein Formular ist von Haus aus ein Block —
   ohne diese Regel stünde es in einer eigenen Zeile darunter. */
.redaktion__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.redaktion__zeile form { margin: 0; }

/* --- Die Trennlinie nach dem dritten Eintrag ----------------------------
   Macht sichtbar, wo die Spartenseite aufhört und die Chronologie
   anfängt. Ohne diese Zeile fragt früher oder später jemand, wohin
   Eintrag vier verschwunden ist. */

.redaktion__grenze {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.6rem 0;
  color: var(--text-2);
}

.redaktion__grenze::before,
.redaktion__grenze::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kante);
}


/* == 16  Bewegung ======================================================== */

/* Die Website bewegt von sich aus nichts. Was bleibt, sind die kurzen
   Übergänge an Knöpfen und Karten. Wer im Betriebssystem „Bewegung
   reduzieren" eingestellt hat, bekommt auch die nicht.

   Einen eigenen Schalter dafür gibt es bewusst nicht: Er müsste sich
   die Einstellung im Browser merken (localStorage), und die Website
   speichert bei Besuchern nichts — so steht es auch in der
   Datenschutzerklärung. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .karte:hover { transform: none; }
  .karte:hover .karte__bild img { transform: none; }
  .galerie { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* == Druck =============================================================== */

@media print {
  .kopf,
  .sprung,
  .nav__knopf,
  .filterzeile,
  .zweiklick,
  .galerie__pfeil,
  .leuchte { display: none; }
  body { background: #fff; color: #000; }
  .galerie { overflow: visible; flex-wrap: wrap; }
}