/* a-round-music — Gestaltung nach dem Flyer: dunkles Braun, Apfelgrün,
   leuchtendes Lindgrün als Akzent; Roboto Condensed für Text, Courgette für
   den Schriftzug. Farben wurden aus den Flyerfotos gemessen (Weißabgleich am
   QR-Code-Rand), nicht geschätzt. */

@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/roboto-condensed-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Courgette"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/courgette-latin-400-normal.woff2") format("woff2"); }

:root {
  --braun-950: #211812;
  --braun-900: #33271f;
  --braun-800: #443428;
  --braun-600: #6e5a4b;
  --gruen: #a5b93c;
  --gruen-dunkel: #55620f;
  --lime: #d4e45a;
  --creme: #f6f4ec;
  --creme-dunkel: #e9e4d6;
  --sand: #e4dcc6;
  --weiss: #ffffff;
  --text: #2a2019;
  --text-mild: #5d4f44;
  --text-hell: #f3efe6;
  --text-hell-mild: #d2c9b8;
  --fehler: #a3261a;
  --fehler-hell: #fbe9e6;
  --erfolg: #37570f;
  --erfolg-hell: #eef5d6;
  --rand: #cfc6b5;

  --schrift: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --schrift-logo: "Courgette", "Segoe Script", cursive;
  --rundung: 4px;
  --kopfhoehe: 4.25rem;
  --seitenrand: clamp(16px, 4vw, 32px);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--creme);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--gruen-dunkel); text-underline-offset: .18em; }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
code { font-size: .92em; background: var(--creme-dunkel); padding: .1em .3em; border-radius: 3px; }

[id] { scroll-margin-top: calc(var(--kopfhoehe) + 12px); }

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

.sprungmarke {
  position: absolute; left: var(--seitenrand); top: -4rem; z-index: 100;
  background: var(--lime); color: var(--braun-950); padding: .6rem 1rem; font-weight: 700;
  border-radius: var(--rundung);
}
.sprungmarke:focus { top: .75rem; }

.rahmen { max-width: 1120px; margin: 0 auto; padding: 0 var(--seitenrand); }
.rahmen-schmal { max-width: 780px; }

mark.platzhalter { background: #ffe34d; color: #000; padding: 0 .25em; border-radius: 2px; }

h1, h2, h3 { overflow-wrap: break-word; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  line-height: 1.2;
  padding: .85rem 1.5rem;
  border-radius: var(--rundung);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.knopf-hell { background: var(--lime); color: var(--braun-950); }
.knopf-hell:hover { background: var(--weiss); color: var(--braun-950); }
.knopf-rahmen { background: transparent; color: inherit; border-color: currentColor; }
.knopf-rahmen:hover { background: rgba(255, 255, 255, .12); color: inherit; }
.knopf-dunkel { background: var(--braun-900); color: var(--lime); }
.knopf-dunkel:hover { background: var(--braun-950); color: var(--weiss); }
.knopf-dunkel:disabled { opacity: .7; cursor: progress; }
.knopf-warnung { background: transparent; color: var(--fehler); border-color: var(--fehler); }
.knopf-warnung:hover { background: var(--fehler); color: var(--weiss); }
.knopf-klein { padding: .45rem .8rem; font-size: .85rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--braun-900);
  color: var(--text-hell);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 6px 20px rgba(0, 0, 0, .18);
}
.kopf-innen {
  max-width: 1120px; margin: 0 auto; padding: 0 var(--seitenrand);
  min-height: var(--kopfhoehe);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.logo {
  font-family: var(--schrift-logo);
  font-size: 1.65rem;
  color: var(--lime);
  text-decoration: none;
  white-space: nowrap;
}
.logo:hover { color: var(--weiss); }

.hauptmenue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; align-items: center; }
.hauptmenue a {
  color: var(--text-hell); text-decoration: none; text-transform: uppercase;
  letter-spacing: .07em; font-size: .95rem; font-weight: 500; padding: .35rem 0;
}
.hauptmenue a:hover { color: var(--lime); }
.hauptmenue a.menue-hervor { background: var(--lime); color: var(--braun-950); padding: .45rem .9rem; border-radius: var(--rundung); font-weight: 700; }
.hauptmenue a.menue-hervor:hover { background: var(--weiss); }

.menue-knopf { display: none; }

@media (max-width: 860px) {
  .kopf-innen { padding-top: .5rem; padding-bottom: .5rem; }
  /* Ohne JavaScript bleibt das Menü eine umbrechende Zeile unter dem Logo. */
  .hauptmenue { width: 100%; }
  .hauptmenue ul { gap: .1rem 1rem; }

  .mit-js .kopf-innen { padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
  .mit-js .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--rundung);
    background: transparent; color: var(--lime); cursor: pointer;
  }
  .menue-knopf-strich, .menue-knopf-strich::before, .menue-knopf-strich::after {
    display: block; width: 1.5rem; height: 2px; background: currentColor; border-radius: 1px;
    transition: transform .2s, opacity .2s;
  }
  .menue-knopf-strich { position: relative; }
  .menue-knopf-strich::before, .menue-knopf-strich::after { content: ""; position: absolute; left: 0; }
  .menue-knopf-strich::before { top: -7px; }
  .menue-knopf-strich::after { top: 7px; }
  .menue-offen .menue-knopf-strich { background: transparent; }
  .menue-offen .menue-knopf-strich::before { transform: translateY(7px) rotate(45deg); }
  .menue-offen .menue-knopf-strich::after { transform: translateY(-7px) rotate(-45deg); }

  .mit-js .hauptmenue {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--braun-900);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .25);
  }
  .mit-js .menue-offen .hauptmenue { display: block; }
  .mit-js .hauptmenue ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--seitenrand) 1rem; }
  .mit-js .hauptmenue a { display: block; padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .mit-js .hauptmenue a.menue-hervor { margin-top: .75rem; text-align: center; border-bottom: 0; }
}

/* ---------- Einstieg ----------
   Wie auf erfolgreichen Bandseiten: randloses Foto als Blickfang, der Name
   steht NUR im Logo der Kopfzeile, darauf eine kräftige Aussage und ein
   klarer Hauptknopf. Die Kopfzeile ist ein fester Balken ÜBER dem Foto, nicht
   darauf (Betreiber-Entscheid 26.09.2026). Handy: Foto randlos unter der
   Kopfzeile, Text läuft mit Verlauf ins Bild. Desktop: Foto füllt den Einstieg. */

.held { position: relative; background: var(--braun-950); color: var(--text-hell); overflow: hidden; }
.held-foto { position: relative; margin: 0; }
/* Handy-Zuschnitt. Die Vorschau in der Verwaltung teilt die Regeln, damit sie
   zeigt, was die Startseite wirklich zeigt. Die Lage 60 % 35 % passt nur zum
   mitgelieferten Foto; ein eigenes steht waagrecht mittig, leicht nach oben (Köpfe). */
.held-foto img, .vorschau-handy img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; object-position: 60% 35%; }
.held-foto-eigen img { object-position: 50% 30%; }
.held-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33, 24, 18, 0) 0, rgba(33, 24, 18, 0) 52%, var(--braun-950) 100%);
}
.held-inhalt { position: relative; padding: 0 var(--seitenrand) 3rem; margin-top: -4.25rem; }
.held-slogan { font-family: var(--schrift-logo); color: var(--lime); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2; margin: 0 0 .3rem; }
.held h1 {
  font-size: clamp(2.4rem, 9vw, 5.4rem); line-height: .96; letter-spacing: .005em;
  text-transform: uppercase; font-weight: 700; color: var(--weiss);
  margin: 0 0 1.1rem; max-width: 13ch; text-shadow: 0 2px 22px rgba(0, 0, 0, .35);
}
.held-stile { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; font-weight: 700; color: var(--lime); }
.held-stile span { white-space: nowrap; }
.held-stile span:not(:last-child)::after { content: "·"; color: var(--text-hell-mild); margin-left: .55em; }
.held-einleitung { color: var(--text-hell-mild); font-size: 1.05rem; max-width: 40ch; margin: 0; }
.held .knopfreihe { margin-top: 1.6rem; }
.held .knopfreihe .knopf { flex: 1 1 14rem; text-align: center; }
.knopf-glas { color: var(--weiss); border-color: rgba(255, 255, 255, .75); background: rgba(33, 24, 18, .3); }
.knopf-glas:hover { background: var(--weiss); color: var(--braun-950); }

@media (min-width: 861px) {
  .held { min-height: min(calc(100vh - var(--kopfhoehe)), 52rem); display: flex; align-items: flex-end; }
  .held-foto { position: absolute; inset: 0; }
  /* Breite Fenster schneiden das Foto in der Höhe zu. Oben stehen die Köpfe, also
     nur unten kürzen (Betreiber-Wunsch 08.10.2026: im Vollbild fehlten Köpfe). */
  .held-foto img { height: 100%; aspect-ratio: auto; object-position: 50% 0; }
  .held-foto::after {
    background:
      linear-gradient(180deg, rgba(33, 24, 18, 0) 0, rgba(33, 24, 18, .05) 42%, rgba(33, 24, 18, .86) 80%, var(--braun-950) 100%),
      linear-gradient(90deg, rgba(33, 24, 18, .78) 0, rgba(33, 24, 18, .35) 38%, rgba(33, 24, 18, 0) 62%);
  }
  .held-inhalt { width: 100%; max-width: 1120px; margin: 0 auto; padding: 6rem var(--seitenrand) clamp(3rem, 8vh, 5.5rem); }
  .held-einleitung { font-size: 1.15rem; }
  .held .knopfreihe .knopf { flex: 0 0 auto; }
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.abschnitt h2 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  text-transform: uppercase; letter-spacing: .02em; font-weight: 700;
  margin-bottom: 1.5rem;
}
.dachzeile {
  display: flex; align-items: center; gap: .75rem;
  text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; font-weight: 700;
  color: var(--gruen-dunkel); margin: 0 0 .5rem;
}
.dachzeile::before { content: ""; width: 2.25rem; height: 3px; background: currentColor; }

.abschnitt-hell { background: var(--weiss); }
.abschnitt-dunkel { background: var(--braun-900); color: var(--text-hell); }
.abschnitt-dunkel .dachzeile { color: var(--lime); }
.abschnitt-dunkel a { color: var(--lime); }
.abschnitt-dunkel a:hover { color: var(--weiss); }
.abschnitt-gruen { background: var(--gruen); }
.abschnitt-gruen .dachzeile { color: var(--braun-900); }

/* Die Band */
.band-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.gross { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--braun-900); font-weight: 500; }
.band-text p:not(.gross) { color: var(--text-mild); }

.besetzung { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.besetzung li {
  background: var(--braun-900); color: var(--text-hell);
  border-radius: var(--rundung); padding: 1.1rem 1rem 1rem;
  border-top: 4px solid var(--lime);
  min-height: 5.5rem; display: flex; align-items: flex-end;
}
.besetzung-instrument { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }

.angebot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: clamp(2.5rem, 6vw, 4rem) 0;
  background: var(--lime); color: var(--braun-950);
  border-radius: var(--rundung);
}
.angebot-block { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.angebot:last-child { margin-bottom: 0; }
.angebot-block + .angebot-block { border-left: 2px solid rgba(33, 24, 18, .12); }
.angebot h3 { text-transform: uppercase; letter-spacing: .04em; font-size: 1.2rem; }

.haken { list-style: none; margin: 0; padding: 0; }
.haken li { position: relative; padding-left: 1.5rem; margin: .45rem 0; text-transform: uppercase; letter-spacing: .03em; font-size: 1.02rem; }
.haken li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .55rem; height: .55rem; background: var(--braun-900); border-radius: 50%; }

@media (max-width: 760px) {
  .band-raster, .angebot { grid-template-columns: 1fr; }
  .angebot-block + .angebot-block { border-left: 0; border-top: 2px solid rgba(33, 24, 18, .12); }
}

/* Veranstaltungen: schmale aufklappbare Zeilen unter Monatsüberschriften —
   bleibt auch mit vielen Einträgen übersichtlich. */
.rahmen-mittel { max-width: 920px; }

/* Termine (kommend): dunkle Karten auf sandfarbenem Grund — kräftiger
   Kontrast (Betreiber: „keine hellen Farben auf hellem Hintergrund“) und klar
   abgesetzt vom weißen Bandbereich darüber und den Veranstaltungen darunter. */
.abschnitt-termine { background: var(--sand); border-top: 6px solid var(--gruen); }
.abschnitt-termine .veranstaltung { background: var(--braun-900); box-shadow: 0 6px 16px rgba(33, 24, 18, .18); }
.abschnitt-termine summary.v-zeile:hover { background: var(--braun-800); }
.abschnitt-termine .v-monatstitel { color: var(--braun-900); }
.abschnitt-termine .v-monatstitel::after { background: rgba(51, 39, 31, .25); }
.abschnitt-termine .v-weitere > summary { border-color: var(--braun-900); color: var(--braun-900); }
.abschnitt-termine .v-weitere > summary:hover { background: var(--braun-900); color: var(--lime); }
.abschnitt-termine .v-weitere > summary:focus-visible { outline-color: var(--braun-900); }
.abschnitt-termine .hinweis { background: var(--weiss); }

.v-einleitung { color: var(--text-hell-mild); margin: .35rem 0 0; }
h2 + .v-einleitung { margin-top: -.5rem; }
.v-monatstitel {
  font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
  color: var(--text-hell-mild); margin: 1.75rem 0 .6rem;
  display: flex; align-items: center; gap: .75rem;
}
.v-monatstitel::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
.veranstaltungen { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.veranstaltung { background: var(--braun-800); border-radius: var(--rundung); overflow: hidden; }
.v-zeile {
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: .75rem 1rem .75rem .75rem;
}
summary.v-zeile { cursor: pointer; list-style: none; }
summary.v-zeile::-webkit-details-marker { display: none; }
summary.v-zeile:hover { background: rgba(255, 255, 255, .04); }
summary.v-zeile:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.veranstaltung-fest .v-zeile { grid-template-columns: 3.6rem minmax(0, 1fr); }

.v-datum {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  background: var(--lime); color: var(--braun-950); border-radius: var(--rundung); padding: .35rem .2rem .4rem;
}
.v-wochentag, .v-monat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.v-tag { font-size: 1.45rem; font-weight: 700; }
/* Vier Ziffern passen nur etwas kleiner in die Kachel; allein darin, also mittig. */
.v-jahr { font-size: 1.05rem; font-weight: 700; }
.v-kopf { display: flex; flex-direction: column; min-width: 0; }
.v-titel { font-size: 1.15rem; font-weight: 700; color: var(--weiss); text-transform: uppercase; letter-spacing: .02em; line-height: 1.25; overflow-wrap: anywhere; }
.v-meta { color: var(--text-hell-mild); font-size: .95rem; overflow-wrap: anywhere; }
.v-pfeil { width: .7rem; height: .7rem; border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(45deg); margin: 0 .35rem .3rem 0; transition: transform .2s; }
.veranstaltung[open] .v-pfeil { transform: rotate(-135deg); margin-bottom: -.3rem; }

.v-inhalt { padding: 0 1rem 1.25rem; display: grid; gap: 1.25rem; }
.mit-bild .v-inhalt { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.v-bild { margin: 0; }
.v-bild img { width: 100%; border-radius: var(--rundung); background: var(--braun-900); }
.v-text { color: var(--text-hell); overflow-wrap: anywhere; }
.v-text p { margin: 0 0 .8em; }
.v-adresse { color: var(--text-hell-mild); }
.v-eintritt { font-weight: 700; }
@media (max-width: 700px) {
  .mit-bild .v-inhalt { grid-template-columns: 1fr; }
  .v-inhalt { padding: 0 .75rem 1rem; }
}

.v-weitere { margin-top: 1rem; }
.v-weitere > summary {
  list-style: none; cursor: pointer; display: block; width: fit-content; margin: .5rem auto 0;
  padding: .7rem 1.3rem; border: 2px solid var(--lime); border-radius: var(--rundung);
  color: var(--lime); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
}
.v-weitere > summary::-webkit-details-marker { display: none; }
.v-weitere > summary:hover { background: var(--lime); color: var(--braun-950); }
.v-weitere > summary:focus-visible { outline: 3px solid var(--weiss); outline-offset: 2px; }
.v-weitere-auf, .v-weitere[open] .v-weitere-zu { display: none; }
.v-weitere[open] .v-weitere-auf { display: inline; }

.hinweis { padding: 1rem 1.25rem; border-radius: var(--rundung); border-left: 4px solid var(--gruen); background: rgba(255, 255, 255, .06); margin: 0 0 1.5rem; }
.abschnitt-hell .hinweis, .verwaltung .hinweis { background: var(--weiss); }
.hinweis-fehler { border-left-color: var(--fehler); }
.abschnitt-dunkel .hinweis-fehler { border-left-color: #ff8a7a; }
.verwaltung .hinweis-fehler { background: var(--fehler-hell); color: var(--fehler); }
.verwaltung .hinweis-erfolg { background: var(--erfolg-hell); color: var(--erfolg); border-left-color: var(--erfolg); }

/* Buchung */
.buchen-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.buchen-einleitung p { font-size: 1.1rem; }
.direktkontakt { background: var(--braun-900); color: var(--text-hell); border-radius: var(--rundung); padding: 1.4rem 1.5rem; margin-top: 2rem; }
.direktkontakt h3 { color: var(--lime); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
.direktkontakt ul { list-style: none; margin: 0; padding: 0; }
.direktkontakt li { padding: .3rem 0; }
.direktkontakt a { color: var(--lime); font-weight: 700; margin-left: .3rem; white-space: nowrap; }
.direktkontakt li:last-child a { margin-left: 0; }
.direktkontakt a:hover { color: var(--weiss); }

@media (max-width: 860px) {
  .buchen-raster { grid-template-columns: 1fr; }
}

/* ---------- Formulare ---------- */

.formular { background: var(--weiss); border-radius: var(--rundung); padding: clamp(1.25rem, 3.5vw, 2.25rem); box-shadow: 0 14px 34px rgba(33, 24, 18, .18); }
.karte .formular { padding: 0; box-shadow: none; }
.feld { margin-bottom: 1.1rem; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .feld-paar { grid-template-columns: 1fr; } }
.feld label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--weiss);
  border: 2px solid var(--rand); border-radius: var(--rundung);
  padding: .65rem .75rem; min-height: 2.9rem;
}
/* Safari auf dem iPhone gibt Datums- und Zeitfeldern eine eigene Mindestbreite
   und zentriert den Wert — das Feld ragt dann über den Rand (Betreiber-
   Screenshot 26.09.2026). appearance: none + min-width: 0 hebt beides auf; die
   Auswahl per Kalender/Uhr bleibt erhalten. */
.feld input[type="date"], .feld input[type="time"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%;
  text-align: left; line-height: 1.4;
}
.feld input[type="date"]::-webkit-date-and-time-value,
.feld input[type="time"]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
.feld textarea { resize: vertical; min-height: 8rem; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--gruen); outline-offset: 0; border-color: var(--gruen-dunkel); }
.feld [aria-invalid="true"] { border-color: var(--fehler); background: var(--fehler-hell); }
.feld-fehler { color: var(--fehler); font-size: .92rem; font-weight: 500; margin: .3rem 0 0; }
.feld-fehler[hidden] { display: none; }
.pflicht { color: var(--fehler); }

.feld-haken { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; align-items: start; }
.feld-haken input { width: 1.3rem; height: 1.3rem; min-height: 0; margin: .15rem 0 0; accent-color: var(--gruen-dunkel); }
.feld-haken label { font-weight: 400; font-size: .95rem; margin: 0; }
.feld-haken .feld-fehler { grid-column: 2; }

.formular-fuss { font-size: .85rem; color: var(--text-mild); margin: 0 0 1rem; }
.formular-meldung { border-radius: var(--rundung); padding: .9rem 1.1rem; margin-bottom: 1.25rem; font-weight: 500; }
.formular-meldung[hidden] { display: none; }
.formular-meldung.ist-erfolg { background: var(--erfolg-hell); color: var(--erfolg); border-left: 4px solid var(--erfolg); }
.formular-meldung.ist-fehler { background: var(--fehler-hell); color: var(--fehler); border-left: 4px solid var(--fehler); }

/* Für Menschen unsichtbar, für Formular-Roboter ein Feld wie jedes andere. */
.honigtopf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Impressum & Datenschutz (eigene Seiten) ---------- */

.abschnitt-recht { background: var(--weiss); font-size: 1rem; overflow-wrap: break-word; }
.abschnitt-recht h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); text-transform: uppercase; letter-spacing: .02em; }
.abschnitt-recht h2 { font-size: 1.15rem; margin-top: 1.8rem; margin-bottom: .4rem; }
.abschnitt-recht h3 { font-size: 1rem; margin-top: 1.4rem; margin-bottom: .3rem; }
.abschnitt-recht p { color: var(--text-mild); }
.zurueck { margin-bottom: 1.5rem; font-weight: 700; }

/* ---------- Hinweis „Keine Cookies“ ---------- */

.cookie-hinweis {
  position: fixed; z-index: 60; left: var(--seitenrand); right: var(--seitenrand); bottom: 1rem;
  max-width: 44rem; margin: 0 auto;
  display: flex; gap: 1rem; align-items: center;
  background: var(--braun-950); color: var(--text-hell);
  border: 1px solid rgba(212, 228, 90, .35); border-radius: var(--rundung);
  padding: .9rem 1rem .9rem 1.2rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  font-size: .95rem; line-height: 1.45;
}
.cookie-hinweis[hidden] { display: none; }
.cookie-hinweis p { margin: 0; }
.cookie-hinweis strong { color: var(--lime); }
.cookie-hinweis a { color: var(--lime); }
.cookie-hinweis .knopf { flex-shrink: 0; }
@media (max-width: 520px) {
  .cookie-hinweis { flex-direction: column; align-items: stretch; bottom: .5rem; }
}
/* Auf breiten Bildschirmen rechts unten — so bleiben die Knöpfe im Einstieg frei. */
@media (min-width: 861px) {
  .cookie-hinweis { left: auto; right: 1.5rem; bottom: 1.5rem; max-width: 30rem; margin: 0; flex-direction: column; align-items: flex-start; }
}

/* ---------- Fußzeile ---------- */

.fuss { background: var(--braun-950); color: var(--text-hell-mild); padding: 3rem 0 2.5rem; text-align: center; }
.fuss p { margin: 0 0 .4rem; }
.fuss-logo { font-family: var(--schrift-logo); color: var(--lime); font-size: 2rem; }
.fuss a { color: var(--text-hell); }
.fuss a:hover { color: var(--lime); }
.fuss-links, .fuss-profile { margin-top: 1rem !important; }
.fuss-klein { font-size: .85rem; opacity: .75; margin-top: 1rem !important; }

/* ---------- Verwaltung ---------- */

.verwaltung { background: var(--creme-dunkel); }
.verwaltung-titel { margin: 0 auto 0 0; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: var(--text-hell-mild); }
.verwaltung .abmelden { margin: 0; }
.verwaltung-inhalt { padding-top: 2rem; padding-bottom: 3rem; }
.verwaltung-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .verwaltung-raster { grid-template-columns: 1fr; } }
.karte { background: var(--weiss); border-radius: var(--rundung); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 6px 18px rgba(33, 24, 18, .08); }
.karte-schmal { max-width: 30rem; margin: 2rem auto; }
.karte h1 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em; }
.karte h2 { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .02em; }
.karte h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mild); margin-top: 1.5rem; }
.verwaltung-liste { list-style: none; margin: 0; padding: 0; }
.liste-kategorie { border-bottom: 3px solid var(--gruen); padding-bottom: .3rem; }
.verwaltung-liste li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--creme-dunkel); flex-wrap: wrap; }
.verwaltung-aktionen { display: flex; gap: .5rem; align-items: center; }
.verwaltung-aktionen form { margin: 0; }
.klein { font-size: .9rem; color: var(--text-mild); }
.marke { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; background: var(--lime); color: var(--braun-950); padding: .05rem .4rem; border-radius: 3px; vertical-align: middle; }
.bild-aktuell { margin: .25rem 0 .5rem; }
.bild-aktuell img { max-width: 16rem; border-radius: var(--rundung); }
.bild-aktuell figcaption { font-size: .85rem; color: var(--text-mild); }
.karte-mittel { max-width: 46rem; margin: 2rem auto; }
.titelbild-vorschau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; margin: 0 0 1rem; }
@media (max-width: 560px) { .titelbild-vorschau { grid-template-columns: 1fr; } }
.vorschau { margin: 0; }
.vorschau img { border-radius: var(--rundung); background: var(--braun-950); }
.vorschau figcaption { font-size: .85rem; color: var(--text-mild); margin-top: .3rem; }
/* Wie der Einstieg am PC (min-width: 861px): oben bündig, nur unten gekürzt. Der
   Einstieg ist höchstens 52rem hoch — auf einem Full-HD-Bildschirm also etwa 1920 × 832
   (7 : 3). Breitere Bildschirme kürzen noch mehr, schmalere weniger. */
.vorschau-pc img { width: 100%; aspect-ratio: 7 / 3; object-fit: cover; object-position: 50% 0; }
.haken-zeile { display: flex; gap: .5rem; align-items: center; margin: 0 0 .6rem; }
.haken-zeile input { width: 1.2rem; height: 1.2rem; min-height: 0; accent-color: var(--gruen-dunkel); }
.haken-zeile label { font-weight: 400; margin: 0; }
.feld input[type="file"] { padding: .5rem; }
.verwaltung-liste li > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.leer { color: var(--text-mild); font-style: italic; }
.verwaltung-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0 0 1.5rem; }
.verwaltung-nav a { color: var(--braun-900); font-weight: 500; text-decoration: none; padding: .35rem 0; border-bottom: 3px solid transparent; }
.verwaltung-nav a:hover, .verwaltung-nav a[aria-current="page"] { border-bottom-color: var(--gruen); }
.verwaltung-nav a[aria-current="page"] { font-weight: 700; }
.verwaltung-ueberschrift { font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 1rem; }
.feld .textfeld-lang { min-height: 24rem; font-size: .95rem; line-height: 1.5; }
.schreibweise { padding-left: 1.2rem; }
.schreibweise li { margin-bottom: .35rem; }
.karte .klein code { overflow-wrap: anywhere; }