/* ==========================================================================
   Dorfgemeinschaft Werkel – Design-System
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften liegen lokal auf dem eigenen Server (assets/fonts/).
   Kein Google-Fonts-CDN – dadurch wird keine IP-Adresse der Besucherinnen und
   Besucher an Dritte übertragen (DSGVO).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/fraunces-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  /* Damit Browser-Elemente (Datumsauswahl, Checkbox, Scrollbalken) zum Design passen */
  color-scheme: light;
  --bg: #f7f3ea;
  --bg-alt: #f1ebdd;
  --surface: #ffffff;
  --surface-2: #fbf8f1;
  --text: #1e262c;
  --muted: #5d6a72;
  --accent: #3f7a4f;
  --accent-deep: #2c5a39;
  --accent-soft: #e7f0e5;
  --gold: #b5883a;
  /* Herz an den Meldungen („Gefällt mir“) */
  --like: #b0463c;
  --like-soft: #f7e8e5;
  /*
   * Belegungsplan des Multifunktionshauses: frei (grün, glatt) und nicht
   * verfügbar (heller Grund, dunkle Schraffur). Die Schraffur trägt die
   * Unterscheidung auch ohne Farbe.
   */
  --mfh-free: #dcebd9;
  --mfh-free-line: #7fae83;
  --mfh-taken-bg: #f1e7d8;
  --mfh-taken-line: #7b4a24;
  --border: #e3dccc;
  --border-strong: #d3c9b3;
  --shadow-sm: 0 1px 2px rgba(30, 38, 44, 0.06), 0 2px 8px rgba(30, 38, 44, 0.04);
  --shadow-md: 0 4px 12px rgba(30, 38, 44, 0.07), 0 16px 40px rgba(30, 38, 44, 0.07);
  --shadow-lg: 0 8px 24px rgba(30, 38, 44, 0.09), 0 32px 64px rgba(30, 38, 44, 0.1);
  --radius: 18px;
  --radius-lg: 28px;
  /*
   * So viele Zeilen zeigt eine Meldung, bevor „Weiterlesen“ erscheint.
   * Ohne Bild ist in der Karte reichlich Platz – dort steht der Text in aller
   * Regel vollständig und der Knopf erscheint gar nicht erst. Mit Bild
   * braucht die Vorschau die Höhe, deshalb die knappere Grenze.
   */
  --news-body-lines: 20;
  --news-body-lines-image: 8;
  --shell: 1180px;
  --font-body: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* hidden muss auch gegen eigene display-Regeln (z. B. .field) gewinnen */
[hidden] {
  display: none !important;
}

/* Unsichtbarer Sprungpunkt für ältere Links (z. B. #kontakt) */
.anchor-alias {
  display: block;
  height: 0;
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-deep);
}

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

/*
 * Die Schriftgrößen wachsen mit der Fensterbreite. Wichtig ist dabei der
 * *untere* Wert: Er gilt auf dem Handy, denn dort ist vw klein. Ein zu hoher
 * Mindestwert lässt Überschriften auf schmalen Displays riesig wirken und
 * zerreißt sie in Zweiwortzeilen – deshalb steht der Anteil an der Breite hoch
 * und die Untergrenze niedrig.
 */
h1 {
  font-size: clamp(1.95rem, 7.5vw, 4rem);
}

h2 {
  font-size: clamp(1.5rem, 5.5vw, 2.6rem);
}

h3 {
  font-size: clamp(1.05rem, 3.6vw, 1.15rem);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

/*
 * Lange E-Mail-Adressen, Links und zusammengesetzte Wörter dürfen die Seite
 * nicht breiter machen, als das Display ist.
 */
p,
li,
dd,
a,
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

p:last-child {
  margin-bottom: 0;
}

.shell {
  width: min(var(--shell), calc(100% - 2.5rem));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 160ms var(--ease);
}

.skip-link:focus-visible {
  top: 1rem;
}

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

/* ------------------------------- Buttons -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease),
    border-color 160ms var(--ease), color 160ms var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.92rem;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(63, 122, 79, 0.28);
}

.btn-primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 10px 24px rgba(63, 122, 79, 0.34);
}

.btn-outline {
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.btn-light {
  background: #fff;
  color: var(--accent-deep);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* -------------------------------- Header -------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /*
   * Rückfall zuerst: Kennt Safari color-mix() nicht (vor 16.2), bliebe der
   * Kopfbereich sonst ganz ohne Hintergrund – der Inhalt liefe beim Scrollen
   * sichtbar darunter durch. Der Präfix ist für iOS nötig, dort heißt die
   * Weichzeichnung bis Safari 17 -webkit-backdrop-filter.
   */
  background: rgba(247, 243, 234, 0.86);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 88px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.brand img {
  width: auto;
  height: 62px;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.site-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  /* „Wer wir sind“ darf nicht in drei Zeilen zerfallen */
  white-space: nowrap;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.site-nav a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/*
 * Der Einreichen-Button liegt außerhalb des Klappmenüs und bleibt dadurch
 * beim Scrollen und auf dem Handy immer sichtbar.
 */
.header-cta {
  flex: none;
}

.header-cta-short {
  display: none;
}

@media (max-width: 700px) {
  .header-cta-long {
    display: none;
  }

  .header-cta-short {
    display: inline;
  }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--text);
  transition: transform 200ms var(--ease), opacity 160ms var(--ease);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: relative;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 4px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------- Hero ---------------------------------- */

/*
 * Im Hintergrund liegt der weite Blick über die Börde auf Werkel. Das Foto ist
 * rein dekorativ: entsättigt, aufgehellt und zu den Rändern hin in die
 * Seitenfarbe ausgeblendet, damit der Text klar im Vordergrund steht und der
 * Kopfbereich ruhig wirkt.
 */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(74vh, 700px);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dorf und Horizont liegen im oberen Bilddrittel – Ausschnitt dorthin verschoben */
  object-position: 50% 38%;
  /*
   * Zurückgenommen, damit das Foto als ruhige Fläche wirkt und nicht mit dem
   * Text konkurriert: etwas entsättigt, leicht aufgehellt.
   */
  filter: saturate(0.72) brightness(1.06) contrast(0.94);
  opacity: 0.9;
}

/* Weicher Verlauf: an den Rändern geht das Foto in den Seitenhintergrund über */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(247, 243, 234, 0.72) 0%,
      rgba(247, 243, 234, 0.28) 38%,
      rgba(247, 243, 234, 0.6) 78%,
      var(--bg) 100%
    ),
    /* Nur hinter dem Text aufgehellt, damit er gut lesbar bleibt */
      linear-gradient(
        90deg,
        rgba(247, 243, 234, 0.94) 0%,
        rgba(247, 243, 234, 0.82) 30%,
        rgba(247, 243, 234, 0.25) 58%,
        rgba(247, 243, 234, 0) 78%
      );
}

.hero-inner {
  position: relative;
}

.hero h1 {
  max-width: 20ch;
  margin-bottom: 1rem;
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.hero .lead {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ------------------------------- Sections ------------------------------- */

/* Abstand der Abschnitte nach oben und unten – hier zentral einstellbar */
.section {
  padding: clamp(2.25rem, 5vw, 4rem) 0;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.4rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*
 * Begrüßung über der Abschnittskennung. Sie steht in der Auszeichnungsschrift
 * und kursiv – so ist sie deutlich als Gruß zu lesen und gerät der Überschrift
 * darunter nicht in die Quere.
 */
.greeting {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
}

.hero .eyebrow {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-deep);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.section-head h2 {
  margin-bottom: 0.35rem;
}

.section-intro,
.lead {
  max-width: 62ch;
  color: var(--muted);
}

.lead {
  font-size: 1.08rem;
}

/* --------------------------------- News --------------------------------- */

.section-news {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  /* Abstand zwischen den Beiträgen – hier zentral einstellbar */
  gap: 0.75rem;
}

.news-state {
  grid-column: 1 / -1;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.news-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.news-card h3 {
  margin-bottom: 0.6rem;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.news-date {
  font-variant-numeric: tabular-nums;
}

.news-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Ideen heben sich von normalen Meldungen ab */
.news-badge-idee {
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  color: var(--gold);
}

/* --------------------------- Text einer Meldung --------------------------
 * Ein langer Beitrag würde die ganze Seite in die Länge ziehen. Deshalb
 * endet der Text nach einigen Zeilen, und darunter steht „Weiterlesen“ – ein
 * Klick zeigt ihn ganz, ein zweiter klappt ihn wieder zusammen. Passt der
 * Text ohnehin, ist von alldem nichts zu sehen: kein Knopf, kein Rollbalken,
 * keine Auslassungspunkte.
 *
 * Wie viel gezeigt wird, hängt davon ab, ob ein Bild dabei ist: ohne Bild
 * steht in der Karte reichlich Platz zur Verfügung, mit Bild braucht die
 * Vorschau die Höhe. Die Klasse `has-image` setzt assets/js/main.js.
 * ---------------------------------------------------------------------- */

.news-body {
  margin: 0 0 1.1rem;
  color: var(--muted);
  white-space: pre-line;
  /*
   * Kürzt auf --news-body-lines Zeilen und setzt selbst die
   * Auslassungspunkte. Firefox, Chrome und Safari verstehen die
   * -webkit-Schreibweise alle; ohne sie stünde eben der ganze Text da.
   */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--news-body-lines);
  line-clamp: var(--news-body-lines);
  overflow: hidden;
}

/* Mit Bildanhang bleibt für den Text weniger Raum */
.news-card.has-image .news-body {
  -webkit-line-clamp: var(--news-body-lines-image);
  line-clamp: var(--news-body-lines-image);
}

.news-card.is-open .news-body {
  display: block;
  overflow: visible;
}

/*
 * Nur für den Augenblick der Messung: Hier steht der Text unbeschnitten, damit
 * das Skript seine volle Höhe mit der gekürzten vergleichen kann und weiß, ob
 * „Weiterlesen“ überhaupt gebraucht wird (updateClamp in main.js).
 */
.news-body.is-measuring {
  display: block;
  overflow: visible;
}

/*
 * „Weiterlesen“ – ein eigener Knopf über die ganze Kartenbreite. Als bloße
 * Textzeile ging er beim Scrollen unter; jetzt ist er als Fläche erkennbar,
 * und der Text darüber läuft weich aus. Sichtbar wird er erst, wenn wirklich
 * etwas gekürzt ist; das entscheidet assets/js/main.js.
 */
.news-more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  align-self: stretch;
  /* 44 px hoch – mit dem Finger sicher zu treffen */
  min-height: 2.75rem;
  margin: 0 0 1.1rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
    border-color 200ms var(--ease);
}

/*
 * Der Text über dem Knopf läuft weich aus – so ist schon beim Scrollen zu
 * sehen, dass die Meldung weitergeht. Aufgeklappt gibt es nichts mehr zu
 * verbergen, dann verschwindet der Verlauf.
 */
.news-more::before {
  content: "";
  position: absolute;
  right: 0;
  /*
   * Die zusätzliche Rahmenstärke ist wichtig: Absolut positionierte Elemente
   * richten sich an der Padding-Box aus, nicht an der Border-Box. Mit einem
   * glatten `bottom: 100%` läge der Verlauf genau auf der oberen Rahmenlinie
   * des Knopfes – und weil er dort voll deckend ist, würde er sie übermalen.
   * Der Knopf sähe oben abgeschnitten aus.
   */
  bottom: calc(100% + 1px);
  left: 0;
  /* Gerade so hoch, dass die letzte Zeile ausläuft und lesbar bleibt */
  height: 1.6rem;
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}

.news-card.is-open .news-more::before {
  display: none;
}

.news-more:hover,
.news-more:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.news-more svg {
  width: 1rem;
  height: 1rem;
  transition: transform 220ms var(--ease);
}

/* Der Pfeil dreht sich um, sobald der ganze Text zu sehen ist */
.news-card.is-open .news-more svg {
  transform: rotate(180deg);
}

/* --------------------------- Bilder an Meldungen -------------------------
 * Ein Bild steht groß in der Karte, mehrere als Karussell: großes Bild mit
 * Pfeilen und Zähler, darunter die Vorschauen zum Antippen. Ein Tipp auf das
 * große Bild öffnet es vergrößert (.lightbox weiter unten).
 * ---------------------------------------------------------------------- */

.news-gallery {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}

.gallery-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  /* Wischen gehört dem Karussell, senkrechtes Scrollen weiter der Seite */
  touch-action: pan-y;
}

.gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gallery-open img {
  display: block;
  width: 100%;
  /* Einheitliche Fläche, egal ob hoch- oder quer aufgenommen */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 320ms var(--ease);
}

.gallery-open:hover img,
.gallery-open:focus-visible img {
  transform: scale(1.03);
}

.gallery-open:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* Lupe unten rechts: Das Bild lässt sich vergrößern */
.gallery-zoom {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(18, 23, 27, 0.55);
  color: #fff;
  pointer-events: none;
}

.gallery-zoom svg {
  width: 1.15rem;
  height: 1.15rem;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 180ms var(--ease), transform 180ms var(--ease);
}

.gallery-nav svg {
  width: 1.3rem;
  height: 1.3rem;
}

.gallery-nav:hover,
.gallery-nav:focus-visible {
  background: #fff;
  color: var(--accent-deep);
}

.gallery-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.gallery-prev {
  left: 0.5rem;
}

.gallery-next {
  right: 0.5rem;
}

.gallery-count {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(18, 23, 27, 0.6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.gallery-thumbs {
  display: flex;
  gap: 0.4rem;
}

.gallery-thumb {
  flex: 0 1 4.5rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 9px;
  background: var(--surface-2);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 180ms var(--ease), border-color 180ms var(--ease);
}

.gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-thumb:hover,
.gallery-thumb:focus-visible {
  opacity: 1;
}

.gallery-thumb.is-active {
  border-color: var(--accent);
  opacity: 1;
}

/* ------------------------- Vergrößerte Bildansicht ------------------------ */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(12, 16, 19, 0.94);
  color: #fff;
}

.lightbox:not([open]) {
  display: none;
}

.lightbox[open] {
  display: grid;
  place-items: center;
  animation: modalIn 220ms var(--ease);
}

.lightbox::backdrop {
  background: rgba(12, 16, 19, 0.6);
}

.lightbox-figure {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 4rem 1rem 1.5rem;
  max-width: 100%;
  touch-action: pan-y;
}

.lightbox-img {
  display: block;
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}

.lightbox-caption {
  max-width: 60ch;
  font-size: 0.9rem;
  text-align: center;
  opacity: 0.85;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 180ms var(--ease);
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 1.4rem;
  height: 1.4rem;
}

.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-close {
  top: 0.9rem;
  right: 0.9rem;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 0.9rem;
}

.lightbox-next {
  right: 0.9rem;
}

.lightbox-nav[hidden] {
  display: none;
}

.news-author {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.news-author strong {
  color: var(--text);
  font-weight: 600;
}

/* ----------------------- Fußzeile einer Meldung -------------------------
 * Links, von wem die Meldung stammt – „Eingereicht von“ in der einen, der
 * Name in der nächsten Zeile –, rechts das Herz mit der Anzahl. Beide sitzen
 * am unteren Rand: Dadurch steht der Knopf in jeder Karte an derselben
 * Stelle, egal wie lang der Name ist.
 *
 * Die Trennlinie sitzt an dieser Zeile, nicht mehr an der Namenszeile – sonst
 * stünden bei einer Meldung ohne Namen zwei Linien übereinander.
 * ---------------------------------------------------------------------- */

.news-footer {
  display: flex;
  /*
   * Umbrechen erlaubt: Auf schmalen Karten passen Name und Knopf sonst nicht
   * nebeneinander – und weil der Knopf nicht schrumpfen darf, würde er die
   * ganze Karte über den Bildschirmrand hinausschieben. Rutscht er in eine
   * eigene Zeile, steht er weiterhin rechts unten in der Karte.
   */
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.news-footer .news-author {
  /* Beschriftung und Name immer untereinander, nie nebeneinander */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  /* Ein langer Name bricht in sich um, statt den Knopf zu verschieben */
  min-width: 0;
  /* Notbremse für Namen ohne Leerzeichen – sonst ragen sie aus der Karte */
  overflow-wrap: break-word;
}

.news-author-label {
  font-size: 0.78rem;
  /* Steht immer in einer Zeile – lieber rutscht der Knopf darunter */
  white-space: nowrap;
}

/* -------------------------- „Gefällt mir“ --------------------------------
 * Zustimmung ohne Anmeldung und ohne Cookie: gezählt wird auf dem Server
 * (api/likes.php), gefüllt ist das Herz, solange die eigene Stimme zählt.
 * ---------------------------------------------------------------------- */

/*
 * Rechts in der Fußzeile: Teilen und „Gefällt mir“ nebeneinander. Sie bleiben
 * zusammen und rutschen, wenn es eng wird, gemeinsam in eine eigene Zeile.
 */
.news-actions {
  /* Bezugspunkt der Teilen-Auswahl: rechter Rand der Karte */
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

.news-like {
  /* Bleibt in voller Größe stehen */
  flex: 0 0 auto;
  text-align: right;
}

.like-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* 44 px hoch – mit dem Finger sicher zu treffen */
  min-height: 2.75rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease),
    background-color 200ms var(--ease), transform 200ms var(--ease);
}

.like-button svg {
  width: 1.25rem;
  height: 1.25rem;
  /* Umrisslinie, solange nicht zugestimmt wurde */
  fill: none;
  transition: fill 200ms var(--ease), transform 200ms var(--ease);
}

.like-button:hover,
.like-button:focus-visible {
  border-color: var(--like);
  background: var(--like-soft);
  color: var(--like);
}

.like-button:active {
  transform: scale(0.96);
}

.like-button.is-liked {
  border-color: var(--like);
  background: var(--like-soft);
  color: var(--like);
}

.like-button.is-liked svg {
  fill: currentColor;
}

.like-count {
  padding-left: 0.45rem;
  border-left: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
  /* Die Linie soll nicht so kräftig wirken wie die Zahl daneben */
  border-left-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* ------------------------------- Teilen ----------------------------------
 * Gut sichtbarer Knopf neben dem Herz. Die Auswahl (Facebook, WhatsApp,
 * weitere Apps, Link kopieren) öffnet sich nach oben, damit sie innerhalb
 * der Karte bleibt.
 * ---------------------------------------------------------------------- */

.news-share {
  flex: 0 0 auto;
}

.share-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease);
}

.share-button svg {
  width: 1.15rem;
  height: 1.15rem;
}

.share-button:hover,
.share-button:focus-visible,
.share-button[aria-expanded="true"] {
  background: var(--accent);
  color: #fff;
}

.share-button:active {
  transform: scale(0.96);
}

.share-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  z-index: 20;
  display: grid;
  gap: 0.25rem;
  min-width: min(13rem, 100%);
  padding: 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modalIn 160ms var(--ease);
}

.share-menu[hidden] {
  display: none;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Farbpunkt als Wiedererkennung – ohne fremde Logos oder Skripte */
.share-option::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--muted);
}

.share-facebook::before {
  background: #1877f2;
}

.share-whatsapp::before {
  background: #25d366;
}

.share-native::before {
  background: var(--accent);
}

.share-option:hover,
.share-option:focus-visible {
  background: var(--accent-soft);
}

.share-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--accent-deep);
  text-align: right;
}

.share-note:empty {
  display: none;
}

/* Die Karte mit offener Auswahl liegt über ihren Nachbarn */
.news-card:has(.share-menu:not([hidden])) {
  position: relative;
  z-index: 5;
}

/* Über einen geteilten Link angesteuert: kurz hervorgehoben */
.news-card.is-shared {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-md);
}

.news-card:focus {
  outline: none;
}

/* Rückmeldung, wenn der Server den Klick nicht annimmt */
.like-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--like);
}

/* -------------------------- Belegungskalender ---------------------------- */

.section-belegung {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.calendar {
  /* Nimmt die volle Breite des Inhaltsbereichs ein */
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.calendar-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.calendar-month {
  min-width: 11ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  text-align: center;
}

.calendar-nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.calendar-nav:hover:not([disabled]) {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.calendar-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
}

.calendar-weekday {
  padding-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/*
 * Feste Mindesthöhe statt quadratischer Felder: Über die volle Breite würden
 * Quadrate sonst absurd hoch werden.
 */
.calendar-day {
  display: grid;
  place-items: center;
  min-height: clamp(2.6rem, 5vw, 3.4rem);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.calendar-day.is-empty {
  background: none;
}

/*
 * Vergangene Tage: durchgehend grau und mit feiner Schraffur. Auf einen Blick
 * erkennbar, dass dieser Zeitraum vorbei ist. Die Felder des Belegungsplans
 * haben dafür eine eigene Regel (.mfh-cell.is-past weiter unten).
 */
.calendar-day.is-past {
  /* Einfarbig grau als Rückfall, darüber die Schraffur, wo sie geht */
  background: #e6e3da;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--muted) 11%, transparent) 0 3px,
    color-mix(in srgb, var(--muted) 5%, transparent) 3px 7px
  );
  border-color: transparent;
  color: #939ba1;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
  font-weight: 400;
}

.calendar-day.is-today {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.calendar-state {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 1.1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.calendar-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.calendar-key {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.calendar-key.is-past {
  background: #dcd8cd;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--muted) 22%, transparent) 0 3px,
    color-mix(in srgb, var(--muted) 10%, transparent) 3px 7px
  );
  border: 1px solid var(--border-strong);
}

/* ------------------------ Belegungsplan nach Bereichen ---------------------
 * Jeder Tag ist über Kreuz in vier Felder geteilt (2 × 2):
 *
 *   oben links   großer Saal     oben rechts   kleiner Saal
 *   unten links  Küche           unten rechts  Kegelbahn
 *
 * Der Zustand steckt dreifach darin:
 *
 *   frei             grün, glatt
 *   nicht verfügbar  heller Grund mit dunkler Schraffur
 *
 * Dazu die Kurzbeschriftung (ab Tablet-Breite im Feld, sonst in der
 * Zeichenerklärung) und der angetippte Tag in Worten darunter. So bleibt der
 * Plan auch bei Rot-Grün-Schwäche, in Graustufen und auf dem Handy eindeutig.
 * ---------------------------------------------------------------------- */

.mfh-grid .mfh-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.25rem;
  min-height: clamp(3.4rem, 7vw, 5.2rem);
  padding: 0.3rem 0.3rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
}

.mfh-grid button.mfh-cell {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.mfh-grid button.mfh-cell:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.mfh-grid button.mfh-cell:active {
  transform: scale(0.96);
}

.mfh-num {
  padding-left: 0.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mfh-quads {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  min-height: 1.7rem;
}

.mfh-quad {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0.8rem;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.mfh-quad.is-free {
  background: var(--mfh-free);
  box-shadow: inset 0 0 0 1px var(--mfh-free-line);
  color: var(--accent-deep);
}

.mfh-quad.is-taken {
  background-color: var(--mfh-taken-bg);
  background-image: repeating-linear-gradient(-45deg, var(--mfh-taken-line) 0 1.5px, transparent 1.5px 5px);
  box-shadow: inset 0 0 0 1px var(--mfh-taken-line);
  color: var(--mfh-taken-line);
}

/* Auf dem Handy wäre die Schrift zu klein – dort erklärt die Legende die Felder */
.mfh-quad-label {
  display: none;
}

@media (min-width: 720px) {
  .mfh-quads {
    min-height: 2.6rem;
    gap: 3px;
  }

  .mfh-quad-label {
    display: inline;
    padding: 0 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.88);
  }
}

/* Vergangene Tage: blass und ohne Farbe – dort gibt es nichts mehr anzufragen */
.mfh-grid .mfh-cell.is-past {
  background: var(--surface-2);
  color: #939ba1;
  opacity: 0.55;
}

.mfh-grid .mfh-cell.is-past .mfh-quads {
  filter: grayscale(1);
}

/* Ganz belegt: die Tageszahl tritt zurück */
.mfh-grid .mfh-cell.is-full .mfh-num {
  color: var(--mfh-taken-line);
}

/* Gewählter Zeitraum */
.mfh-grid .mfh-cell.is-chosen {
  border-color: var(--accent);
  background: #eef5ec;
}

.mfh-grid .mfh-cell.is-chosen-edge {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.mfh-grid .mfh-cell.is-chosen .mfh-num {
  color: var(--accent-deep);
}

.mfh-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 1.1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--border);
}

.mfh-legend .calendar-legend {
  margin: 0;
  padding: 0;
  border: 0;
}

.mfh-key {
  width: 20px;
  height: 14px;
  border-radius: 3px;
}

.mfh-key.is-free {
  background: var(--mfh-free);
  box-shadow: inset 0 0 0 1px var(--mfh-free-line);
}

.mfh-key.is-taken {
  background-color: var(--mfh-taken-bg);
  background-image: repeating-linear-gradient(-45deg, var(--mfh-taken-line) 0 1.5px, transparent 1.5px 5px);
  box-shadow: inset 0 0 0 1px var(--mfh-taken-line);
}

.mfh-area-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.mfh-area-legend-title {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/*
 * Die vier Bereiche in der Anordnung, in der sie in jedem Tag stehen – ein
 * kleines 2 × 2-Schema, damit die Zuordnung ohne Lesen klar ist.
 */
.mfh-quad-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 3px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  list-style: none;
  font-size: 0.82rem;
}

.mfh-quad-legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text);
}

.mfh-quad-legend b {
  display: inline-block;
  min-width: 1.9rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  font-size: 0.72rem;
  text-align: center;
}

.mfh-quad-legend-box {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
}

.mfh-area-legend b,
.mfh-area-name b {
  display: inline-block;
  min-width: 1.9rem;
  margin-right: 0.2rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.72rem;
  text-align: center;
}

/* Der angetippte Tag in Worten */
.mfh-day {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.mfh-day-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.mfh-day-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mfh-day-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.mfh-day-state {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.mfh-day-list .is-free .mfh-day-state {
  background: var(--mfh-free);
  box-shadow: inset 0 0 0 1px var(--mfh-free-line);
  color: var(--accent-deep);
}

.mfh-day-list .is-taken .mfh-day-state {
  background-color: var(--mfh-taken-bg);
  background-image: repeating-linear-gradient(-45deg, rgba(123, 74, 36, 0.35) 0 1.5px, transparent 1.5px 6px);
  box-shadow: inset 0 0 0 1px var(--mfh-taken-line);
  color: var(--mfh-taken-line);
}

/* ------------------------------ Buchungsanfrage -------------------------- */

.mfh-form {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.mfh-form-title {
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
}

.mfh-form-intro {
  max-width: 70ch;
  margin: -0.5rem 0 0;
  color: var(--muted);
}

/*
 * Auf ganz schmalen Handys (320 px) sprengten die Datumsfelder von Safari mit
 * ihrer festen Mindestbreite das Formular. Spalte und Felder dürfen deshalb
 * schmaler werden als ihr Inhalt es „möchte“.
 */
.mfh-form {
  grid-template-columns: minmax(0, 1fr);
}

.mfh-form .btn {
  /* Lange Beschriftung („Buchungsanfrage absenden“) darf umbrechen */
  max-width: 100%;
  white-space: normal;
}

.mfh-form .field,
.mfh-form input,
.mfh-form textarea,
.mfh-form select {
  min-width: 0;
  max-width: 100%;
}

.mfh-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  min-width: 0;
  margin: 0;
  padding: 1.15rem 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/*
 * „float“ macht die Legende zu einem gewöhnlichen Element: Ohne das säße sie
 * auf der Trennlinie des Fieldsets, so wie Browser Legenden nun einmal setzen.
 */
.mfh-step legend {
  float: left;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.mfh-step-no {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
}

.btn .mfh-step-no {
  width: 1.45rem;
  height: 1.45rem;
  margin-right: 0.35rem;
  background: rgba(255, 255, 255, 0.25);
}

.field-hint.is-warning {
  color: #9a4a12;
  font-weight: 600;
}

.mfh-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 0.6rem;
}

.mfh-area {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.mfh-area input {
  grid-row: span 2;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--accent);
}

.mfh-area-name {
  font-weight: 600;
}

.mfh-area-state {
  color: var(--muted);
  font-size: 0.82rem;
}

.mfh-area.is-free .mfh-area-state {
  color: var(--accent-deep);
  font-weight: 600;
}

.mfh-area.is-taken {
  background-color: var(--mfh-taken-bg);
  background-image: repeating-linear-gradient(-45deg, rgba(123, 74, 36, 0.14) 0 1.5px, transparent 1.5px 7px);
  color: var(--muted);
  cursor: not-allowed;
}

.mfh-area.is-taken .mfh-area-state {
  color: var(--mfh-taken-line);
  font-weight: 600;
}

.mfh-area:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

#bf-areas[aria-invalid="true"] .mfh-area:not(.is-taken) {
  border-color: #c0392b;
}

/* Kurzfassung der Nutzungsbedingungen – verbindlich bleibt die PDF */
.mfh-terms {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 0.9rem;
}

.mfh-terms-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
}

.mfh-terms ul {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.mfh-terms strong {
  color: var(--text);
}

.mfh-pdf {
  justify-self: start;
}

.mfh-pdf[aria-invalid="true"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.mfh-pdf-state {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.mfh-pdf-state.is-done {
  color: var(--accent-deep);
  font-weight: 600;
}

.mfh-pdf-state.is-done::before {
  content: "✓ ";
}

.field-consent input:disabled + label {
  color: var(--muted);
}

.mfh-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.mfh-submit .field-hint {
  margin: 0;
}

/* ------------------------------ Veranstaltungen -------------------------- */

.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Karte nutzt den Aufbau der News-Karten, steht aber in einer Zeile */
.news-card.event-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.1rem;
  /* Beschreibungen werden früher gekürzt als Meldungen */
  --news-body-lines: 5;
}

.event-sheet {
  display: grid;
  flex: none;
  justify-items: center;
  width: 4.2rem;
  padding: 0.45rem 0 0.55rem;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  line-height: 1.05;
  text-align: center;
}

.event-sheet-month,
.event-sheet-weekday {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-sheet-weekday {
  opacity: 0.85;
}

.event-sheet-day {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
}

.event-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.event-body h3 {
  margin-bottom: 0.35rem;
}

.event-when {
  margin: 0 0 0.55rem;
  color: var(--accent-deep);
  font-size: 0.9rem;
  font-weight: 600;
}

.event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.25rem;
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
}

.event-facts div {
  display: flex;
  gap: 0.35rem;
}

.event-facts dt {
  color: var(--muted);
}

.event-facts dt::after {
  content: ":";
}

.event-facts dd {
  margin: 0;
  font-weight: 600;
}

.event-text {
  margin-bottom: 0.9rem;
}

@media (max-width: 600px) {
  .mfh-grid .mfh-cell {
    min-height: 3.4rem;
    padding: 0.25rem 0.2rem 0.3rem;
    border-radius: 8px;
  }

  .mfh-num {
    font-size: 0.82rem;
  }

  .news-card.event-card {
    gap: 0.85rem;
  }

  .event-sheet {
    width: 3.5rem;
  }

  .event-sheet-day {
    font-size: 1.45rem;
  }
}

/* ------------------------------ News-Formular ---------------------------- */

.form-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.form-intro p {
  color: var(--muted);
}

.form-hints {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.form-hints li {
  position: relative;
  padding-left: 1.6rem;
}

.form-hints li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/*
 * Kontaktmöglichkeiten stehen in derselben Spalte wie die Einleitung – so
 * bleibt alles zum Thema „Kontakt“ beim Formular beisammen.
 */
.form-contact {
  /* Deutlich abgesetzt von den Hinweisen darüber */
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.form-contact h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}

.form-contact p {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
}

/* In der weißen Karte braucht die Liste einen leicht abgesetzten Grund */
.form-contact .contact-list a {
  padding: 0.85rem 1.05rem;
  background: var(--surface-2);
  box-shadow: none;
}

.news-form {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.field {
  display: grid;
  gap: 0.4rem;
}

/*
 * Auto-fit: Ausgeblendete Felder sind keine Grid-Elemente mehr, die Zeile
 * verteilt sich also je nach Art der Einsendung auf ein, zwei oder drei Felder.
 */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
  gap: 1.1rem;
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Beschriftung und der kleine Knopf zum Leeren in einer Zeile */
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.field-clear {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 150ms var(--ease);
}

.field-clear:hover {
  color: var(--accent-deep);
}

.field-clear[hidden] {
  display: none;
}

.field label span[aria-hidden] {
  color: var(--gold);
}

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

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.field select {
  cursor: pointer;
  /* Eigener Pfeil, damit die Auswahl in beiden Themen gleich aussieht */
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235d6a72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.field-hint {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #c0492f;
  box-shadow: 0 0 0 3px rgba(192, 73, 47, 0.16);
}

.counter {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}

/* ------------------------------ Bildanhänge ------------------------------ */

.field-upload input[type="file"] {
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  font-size: 0.92rem;
}

.field-upload input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.field-upload input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Die gewählten Bilder – jedes einzeln wieder wegzuklicken */
.upload-list {
  display: grid;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.upload-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.5rem 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.88rem;
}

.upload-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-size {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.upload-remove {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
}

.upload-remove:hover,
.upload-remove:focus-visible {
  border-color: #c0492f;
  background: rgba(192, 73, 47, 0.1);
  color: #c0492f;
}

.field-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
}

.field-consent input {
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}

.field-consent label {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.field-consent a {
  color: var(--accent-deep);
}

.field-consent input[aria-invalid="true"] {
  outline: 2px solid #c0492f;
  outline-offset: 2px;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message {
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.form-message:not(:empty) {
  padding: 0.8rem 1rem;
  border-radius: 12px;
}

.form-message.is-success {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.form-message.is-error {
  background: rgba(192, 73, 47, 0.12);
  color: #a33a23;
}

.news-form .btn {
  justify-self: start;
}

/* -------------------------------- Features ------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  padding: 1.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  /* Nur noch für selbst gesetzte Zeichen – die Symbole sind gezeichnet */
  font-size: 1.2rem;
}

/*
 * Gezeichnete Symbole: Sie nehmen über currentColor die Farbe der Kachel an
 * und bleiben in jeder Größe scharf. Die früheren Schriftzeichen (♪ ✿ ❦) sahen
 * je nach Gerät ganz unterschiedlich aus – auf dem einen zierlich, auf dem
 * anderen als buntes Emoji.
 */
.feature-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* In der hervorgehobenen Kachel sitzt das Symbol auf goldenem Grund */
.feature-more .feature-icon {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
}

.feature p {
  color: var(--muted);
}

/* Termin über der Überschrift – danach sind die Kacheln sortiert */
.feature-when {
  display: block;
  margin: 0 0 0.35rem;
  color: var(--accent-deep);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Schon vorbei: bleibt als Rückblick stehen, tritt aber etwas zurück */
.feature.is-past .feature-when {
  color: var(--muted);
}

.feature-more {
  background: linear-gradient(150deg, var(--accent-soft), var(--surface) 65%);
}

/* --------------------------------- About --------------------------------- */

.section-about {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-media {
  position: relative;
  margin: 0; /* figure-Standardrand zurücksetzen */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.about-media .media-credit {
  margin: 0;
  padding: 0.7rem 1.15rem 0.85rem;
}

.about-media img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Originalbild ist quadratisch – nichts abschneiden */
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.about-media:hover img {
  transform: scale(1.04);
}

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

/* ------------------------ Bild- und Textnachweise ------------------------ */

/*
 * Nachweis direkt am Bild bzw. am Abschnitt. Bei CC BY-SA und ODbL ist die
 * Namensnennung Pflicht – gesammelt stehen die Angaben zusätzlich im Impressum.
 */
.media-credit {
  display: block;
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.media-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.media-credit a:hover {
  color: var(--accent-deep);
}

.section-source {
  margin: 2.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.section-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.section-source a:hover {
  color: var(--accent-deep);
}

/* ---------------------------- Werkel entdecken --------------------------- */

/* Steht zwischen zwei getönten Abschnitten – bleibt daher auf der Grundfarbe */

/* Zurück-Knopf am Fuß einer Unterseite */
.page-back {
  margin: 2.5rem 0 0;
}

/* Sprungmarken unter dem Seitenkopf (Multifunktionshaus) */
.page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* ------------------------- Multifunktionshaus: Räume ---------------------- */

.mfh-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.mfh-room {
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mfh-room h3 {
  margin: 0.75rem 0 0.35rem;
}

.mfh-room p {
  margin: 0;
  color: var(--muted);
}

/* Dieselben Kürzel wie im Belegungsplan */
.mfh-room-key {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 700;
}

.mfh-facts {
  margin-bottom: 0;
}

/* Anschrift neben den Eckdaten; auf schmalen Displays untereinander */
.mfh-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: stretch;
}

.mfh-address {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mfh-address h3 {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mfh-address address {
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
}

.mfh-map-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--accent-deep);
  font-size: 0.9rem;
}

.mfh-rooms-official {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.mfh-rooms-official strong {
  color: var(--text);
}

/* Gebührenübersicht – eine schlichte, gut lesbare Tabelle */
.mfh-fees-wrap {
  max-width: 640px;
}

.mfh-fees {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mfh-fees th,
.mfh-fees td {
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.mfh-fees th {
  font-weight: 500;
}

.mfh-fees td {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mfh-fees tbody:last-child tr:last-child th,
.mfh-fees tbody:last-child tr:last-child td {
  border-bottom: 0;
}

.mfh-fees-group th {
  padding-top: 0.9rem;
  background: var(--bg-alt);
  color: var(--accent-deep);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mfh-fees-links {
  margin: 1rem 0 0;
}

/* Verweis auf die offizielle Seite der Stadt – deutlich, aber im Stil der Seite */
.mfh-official {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.mfh-official h3 {
  margin: 0 0 0.3rem;
}

.mfh-official p {
  margin: 0;
  color: var(--muted);
}

.mfh-official .btn {
  flex: none;
}

@media (max-width: 700px) {
  .mfh-about {
    grid-template-columns: 1fr;
  }

  .mfh-official {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .mfh-official .btn {
    justify-content: center;
  }

  .mfh-fees th,
  .mfh-fees td {
    padding: 0.65rem 0.8rem;
  }

  .mfh-fees td {
    white-space: normal;
  }
}

/* ------------------------------ Hilfreiche Links -------------------------- */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-card a {
  display: grid;
  gap: 0.3rem;
  height: 100%;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

.link-card a:hover,
.link-card a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.link-title {
  font-weight: 700;
  font-size: 1.05rem;
}

/* Pfeil nach außen: Der Link verlässt die Seite */
.link-title::after {
  content: " ↗";
  color: var(--accent);
}

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

.link-host {
  margin-top: 0.35rem;
  color: var(--accent-deep);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Karte mit Datei: „Ansehen“ ist die ganze Karte, darunter „Herunterladen“ */
.link-card-file {
  display: flex;
  flex-direction: column;
}

.link-card-file > a:first-child {
  flex: 1;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Karte und Download-Leiste bleiben beim Überfahren zusammen */
.link-card-file > a:first-child:hover,
.link-card-file > a:first-child:focus-visible {
  transform: none;
}

/* Kein Pfeil nach außen – die Datei liegt auf dem eigenen Server */
.link-card-file .link-title::after {
  content: none;
}

.link-card .link-card-download {
  display: block;
  height: auto;
  padding: 0.8rem 1.35rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: none;
  transform: none;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.link-card .link-card-download::before {
  content: "↓ ";
}

.link-card .link-card-download:hover,
.link-card .link-card-download:focus-visible {
  transform: none;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.links-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ------------------------------- Ortsbeirat ------------------------------
 * Gruppenfoto und Einleitung nebeneinander, darunter die Personen als
 * Karten (Vorsitz größer, Schriftführung kleiner) und die Zuständigkeiten.
 * Ein Tipp auf eine Person hebt ihre Bereiche hervor (.is-filtered).
 * ---------------------------------------------------------------------- */

.section-ortsbeirat {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.ob-intro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: 1.5rem;
}

.ob-intro .section-head {
  margin-bottom: 0;
}

.ob-claim {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-style: italic;
  color: var(--accent-deep);
}

.ob-group {
  margin: 0;
}

.ob-group img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(30, 38, 44, 0.16));
}

.ob-hint {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.ob-group-title {
  margin: 2rem 0 1rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ob-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ob-people-lead {
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 280px));
}

.ob-people-small {
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 170px));
}

.ob-person {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  height: 100%;
  padding: 0 0 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: inherit;
  text-align: center;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

button.ob-person {
  cursor: pointer;
}

button.ob-person:hover,
button.ob-person:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.ob-person[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-md);
}

.ob-person img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  margin-bottom: 0.65rem;
}

.ob-name {
  padding: 0 0.6rem;
  font-weight: 700;
  line-height: 1.25;
}

.ob-role {
  padding: 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.ob-people-lead .ob-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.ob-people-lead .ob-role {
  color: var(--accent-deep);
  font-weight: 600;
}

/* Zuständigkeiten */
.ob-duties-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 2.75rem 0 1rem;
  scroll-margin-top: 110px;
}

.ob-duties-title {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.ob-filter-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  color: var(--accent-deep);
  font-weight: 600;
}

.ob-filter-state[hidden] {
  display: none;
}

.ob-filter-reset {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-deep);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.ob-filter-reset:hover,
.ob-filter-reset:focus-visible {
  background: var(--accent);
  color: #fff;
}

.duty-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 0.85rem;
  margin: 0;
}

.duty {
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  transition: opacity 220ms var(--ease), border-color 220ms var(--ease);
}

.duty-wide {
  grid-column: 1 / -1;
  border-left-color: var(--gold);
}

.duty dt {
  font-weight: 700;
  line-height: 1.3;
}

.duty dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.6rem 0 0;
}

.duty dd span {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

/* Person gewählt: ihre Bereiche bleiben, der Rest tritt zurück */
.duty-list.is-filtered .duty {
  opacity: 0.35;
}

.duty-list.is-filtered .duty.is-match {
  opacity: 1;
}

.duty-list.is-filtered .duty dd span.is-match {
  background: var(--accent);
  color: #fff;
}

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

@media (max-width: 600px) {
  .ob-people,
  .ob-people-lead,
  .ob-people-small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ob-people-lead .ob-name {
    font-size: 1.05rem;
  }
}

/* Zahlen und Daten zum Ort */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1rem;
  margin: 0 0 1.75rem;
  padding: 0;
}

.fact {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.fact dt {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fact dd {
  margin: 0.35rem 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.fact p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Kartenausschnitt */
.ort-figure {
  margin: 0 0 1.75rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* Beschneidet den hineingezoomten Ausschnitt, ohne die Bildunterschrift zu überdecken */
.ort-map {
  overflow: hidden;
}

/*
 * Werkel liegt bei rund 46 % / 61 % des Originalbildes. Genau dieser Punkt ist
 * Ursprung der Vergrößerung und bleibt beim Zoomen an seiner Stelle; das
 * anschließende Verschieben rückt ihn in die Mitte des Rahmens.
 */
.ort-figure img {
  width: 100%;
  /*
   * Feste Höhe statt Seitenverhältnis: Die Karte läuft über die volle Breite,
   * soll dabei aber nicht mitwachsen – sonst wird der Streifen riesig.
   */
  height: clamp(240px, 34vw, 450px);
  object-fit: cover;
  object-position: 46% 61%;
  transform-origin: 46% 61%;
  transform: scale(1.8) translate(2.2%, -6%);
}

.ort-figure figcaption {
  padding: 1rem 1.35rem 1.15rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.ort-text {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2rem;
}

.ort-text h3 {
  font-size: 1.3rem;
}

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

.sights-title {
  margin-bottom: 1.5rem;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.sight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.25rem;
}

.sight {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.sight:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/*
 * Hochformat: zwei der drei Fotos sind hochkant, das dritte querformatig.
 * 3:4 schneidet beim Querformat nur die Ränder ab und lässt das historische
 * Kirchenfoto (1000 x 1370) praktisch unbeschnitten.
 */
.sight img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.sight figcaption,
.sight-text > div {
  padding: 1.4rem;
}

.sight h4 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}

.sight p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

/* Der Nachweis sitzt unter dem Beschreibungstext und bleibt am Kartenfuß */
.sight .media-credit {
  margin: auto 0 0; /* auto oben: sitzt bündig am Kartenfuß */
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
}

.sight figcaption {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sight-text {
  background: linear-gradient(150deg, var(--accent-soft), var(--surface) 65%);
}

.sight-text h4 + p + h4 {
  margin-top: 1.25rem;
}

/* --------------------------------- Join ---------------------------------- */

.section-join {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.join-card {
  padding: clamp(2.25rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--accent-deep), var(--accent) 55%, #4f8f61 100%);
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.join-card .eyebrow {
  color: #f2e2bf;
}

.join-card h2 {
  color: #fff;
}

.join-card .lead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 68ch;
}

.join-card .lead + .lead {
  margin-top: 1rem;
}

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

.contact-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.contact-list a:hover {
  transform: translateX(4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.contact-label {
  font-weight: 600;
}

.contact-value {
  color: var(--muted);
  font-size: 0.92rem;
  text-align: right;
}

/* --------------------------------- Footer -------------------------------- */

.site-footer {
  padding: clamp(3rem, 7vw, 4.5rem) 0 1.75rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(140px, 0.85fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
}

.footer-brand img {
  width: auto;
  height: 66px;
  margin-bottom: 1.1rem;
  object-fit: contain;
}

.footer-claim {
  max-width: 30ch;
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.35;
}

/* Die drei Linkspalten */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.footer-col h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-col a {
  position: relative;
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 160ms var(--ease), transform 160ms var(--ease);
}

.footer-col a:hover {
  color: var(--accent-deep);
  transform: translateX(3px);
}

/* Schaltfläche, die wie ein Link aussieht */
.footer-link-button {
  /* „Cookie-Einstellungen“ nicht am Bindestrich umbrechen */
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: color 160ms var(--ease), transform 160ms var(--ease);
}

.footer-link-button:hover {
  color: var(--accent-deep);
  transform: translateX(3px);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-bottom p {
  margin: 0;
}

.footer-note {
  flex: 1 1 auto;
  text-align: center;
}

/* Hinweis auf die Umsetzung – bewusst zurückhaltend neben dem Copyright */
.footer-powered {
  flex: 0 0 auto;
  text-align: right;
}

.footer-powered a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-powered a:hover {
  color: var(--accent-deep);
}

.to-top {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms var(--ease);
}

.to-top:hover {
  color: var(--accent-deep);
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer-note {
    order: 3;
    flex-basis: 100%;
    text-align: left;
  }

  .footer-powered {
    order: 4;
    flex-basis: 100%;
    text-align: left;
  }
}

/* --------------------------- Unterseiten-Kopf ---------------------------- */

.page-head {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.page-head h1 {
  /* Untergrenze bewusst niedrig – sie ist es, die auf dem Handy zählt */
  font-size: clamp(1.8rem, 6.5vw, 3.2rem);
  margin-bottom: 0.75rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.site-nav a[aria-current="page"] {
  color: var(--accent-deep);
  background: var(--accent-soft);
}

/* ----------------------------- Rechtstexte ------------------------------- */

.legal {
  max-width: 74ch;
}

.legal h2 {
  margin-top: 2.5rem;
  font-size: 1.35rem;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p,
.legal li {
  color: var(--muted);
}

.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
}

.legal code {
  padding: 0.1em 0.4em;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.9em;
}

.credits-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.credits-list li {
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.92rem;
  line-height: 1.5;
}

.credits-list strong {
  color: var(--text);
  font-weight: 600;
}

.legal-meta {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.notice {
  margin-bottom: 2.5rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--muted);
}

/* ------------------- Rechtstexte als Overlay (Dialog) -------------------- */

html.has-modal {
  overflow: hidden;
}

/*
 * Nur der geöffnete Dialog wird dargestellt. Ohne [open] bleibt es beim
 * display:none des Browsers – sonst hängt der Text nach dem Schließen
 * sichtbar am Seitenende.
 */
/*
 * Geschlossene Fenster ausblenden – ausdrücklich und nicht nur über die
 * Voreinstellung des Browsers. Kennt ein Browser <dialog> nicht (Safari erst
 * ab 15.4, also nicht auf älteren iPhones), behandelt er das Element wie einen
 * gewöhnlichen Kasten und zeigt es dauerhaft an. Der Dank nach dem Absenden
 * stand dadurch von Anfang an in der Seite.
 */
.legal-modal:not([open]) {
  display: none;
}

.legal-modal[open] {
  display: flex;
  flex-direction: column;
  animation: modalIn 260ms var(--ease);
}

.legal-modal {
  width: min(760px, calc(100% - 2rem));
  max-width: none;
  max-height: min(84vh, 900px);
  /* Ohne <dialog>-Unterstützung fehlt der Rand des Browsers – selbst zentrieren */
  margin-inline: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Der Bereich um das Fenster herum wird unscharf */
.legal-modal::backdrop {
  background: rgba(18, 23, 27, 0.45);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  animation: backdropIn 260ms var(--ease);
}

.legal-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 1.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.legal-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
}

.legal-modal-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}

.legal-modal-close:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  transform: rotate(90deg);
}

.legal-modal-body {
  padding: 1.6rem 1.75rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Bestätigung nach dem Absenden – schmaler als die Rechtstexte */
.message-modal {
  width: min(520px, calc(100% - 2rem));
}

.message-modal .legal-modal-body {
  padding: 1.4rem 1.75rem 1.75rem;
}

.message-modal-contact {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.message-modal-actions {
  margin-top: 1.5rem;
}

/* Zwei Schaltflächen nebeneinander – auf schmalen Geräten untereinander */
.modal-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.modal-actions-row .btn {
  flex: 1 1 12rem;
  justify-content: center;
}

/* Nachfrage vor dem Absenden („Ich bin ein Mensch“) */
.human-check {
  margin-top: 1.1rem;
}

.human-check label {
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}

/* Die Meldung im Fenster nur zeigen, wenn wirklich etwas darin steht */
#nf-check-message:empty {
  display: none;
}

#nf-check-message {
  margin-top: 0.9rem;
}

.legal-modal-body .legal {
  max-width: none;
}

.legal-modal-body .legal h2:first-of-type {
  margin-top: 0;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes backdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .legal-modal {
    max-height: 90vh;
  }

  .legal-modal-head {
    padding: 1.25rem 1.25rem 0.9rem;
  }

  .legal-modal-body {
    padding: 1.25rem 1.25rem 1.75rem;
  }
}

/* -------------------------- Datenschutz-Hinweis --------------------------
 * Bewusst neutral benannt („werkel-info“): Blocker verstecken Elemente mit
 * Namen wie privacy-banner, cookie-notice oder consent – siehe main.js.
 * ---------------------------------------------------------------------- */

.werkel-info {
  position: fixed;
  z-index: 200;
  left: 1rem;
  right: 1rem;
  /* Über der Home-Leiste von iPhones bleiben */
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  max-width: 460px;
  /* Auf breiten Bildschirmen unten rechts – so bleiben die Buttons im Hero frei */
  margin-left: auto;
  max-height: min(70vh, 560px);
  max-height: min(70dvh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.werkel-info.is-visible {
  opacity: 1;
  transform: none;
}

.werkel-info-text strong {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.werkel-info-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.werkel-info-text a {
  color: var(--accent-deep);
}

/* Was beim Ausfüllen des Formulars passiert – aufklappbar */
.werkel-info-more {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.werkel-info-more summary {
  cursor: pointer;
  color: var(--accent-deep);
  font-size: 0.86rem;
  font-weight: 600;
}

.werkel-info-more p {
  margin-top: 0.4rem;
  font-size: 0.86rem;
}

/* Aktueller Stand, wenn über „Cookie-Einstellungen“ geöffnet */
.werkel-info-state {
  margin-top: 0.75rem !important;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-deep) !important;
  font-size: 0.86rem !important;
}

.werkel-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Handy: schmaler Rand, weniger Innenabstand, Knöpfe nebeneinander */
@media (max-width: 600px) {
  .werkel-info {
    left: 0.6rem;
    right: 0.6rem;
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    gap: 0.8rem;
    padding: 1.05rem 1.1rem;
    border-radius: 18px;
    max-height: min(60vh, 520px);
    max-height: min(60dvh, 520px);
  }

  .werkel-info-text strong {
    font-size: 1.02rem;
  }

  .werkel-info-text p {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .werkel-info-actions .btn {
    flex: 1 1 0;
    width: auto;
    min-height: 2.75rem;
  }
}

/* Rückfallebene in der Datenschutzerklärung, Abschnitt 4 */
.werkel-speicher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.werkel-speicher p {
  flex-basis: 100%;
  margin: 0;
}

/* ------------------------------ Scroll-Reveal ---------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------- Responsive ------------------------------ */

@media (max-width: 960px) {
  .form-card,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-media img {
    aspect-ratio: 16 / 11;
  }
}

/* Einspaltig würden die Hochformate sonst sehr hoch – quadratisch reicht */
@media (max-width: 700px) {
  .sight img {
    aspect-ratio: 1 / 1;
  }
}

/*
 * Klappmenü: Sieben Menüpunkte plus Einreichen-Knopf passen erst ab etwa
 * 1180 px nebeneinander. Darunter öffnet die Menütaste das Menü.
 */
@media (max-width: 1180px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 1.25rem;
    left: 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav a {
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
  }
}

@media (max-width: 820px) {
  html {
    scroll-padding-top: 92px;
  }

  .brand img {
    height: 52px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------ Handyformat ------------------------------
 * Ab hier ist die Breite wirklich knapp. Drei Dinge sind entscheidend:
 * der Kopfbereich muss in eine Zeile passen, nichts darf breiter sein als das
 * Display, und die Abstände dürfen nicht mehr so groß sein wie am Schreibtisch.
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
  html {
    /* Der Kopf ist jetzt niedriger – Ankersprünge dürfen nicht darunter landen */
    scroll-padding-top: 76px;
  }

  .header-inner {
    gap: 0.5rem;
    min-height: 68px;
  }

  /*
   * Logo, Einreichen-Knopf und Menütaste teilen sich eine Zeile. Das Logo ist
   * breit; bleibt es so hoch wie am Desktop, schiebt es die beiden anderen aus
   * dem Bild – genau das war der Grund für den waagerechten Streifen.
   */
  .brand img {
    height: 40px;
  }

  .header-actions {
    gap: 0.4rem;
  }

  .header-cta.btn {
    padding: 0.6rem 0.95rem;
    font-size: 0.9rem;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  .site-nav {
    right: 1rem;
    left: 1rem;
  }

  /* Der Hero darf nicht mehr den halben Bildschirm für sich beanspruchen */
  .hero {
    min-height: 0;
    padding: 2.5rem 0 2.75rem;
  }

  .hero h1 {
    max-width: none;
  }

  .hero-actions {
    margin-top: 1.25rem;
  }

  .section {
    padding: 2.25rem 0;
  }

  .news-grid,
  .feature-grid,
  .sight-grid,
  .facts {
    gap: 0.85rem;
  }

  .news-card,
  .feature {
    padding: 1.25rem;
  }

  /* Kalender: schmalere Abstände, damit die sieben Spalten Luft behalten */
  .calendar {
    padding: 1rem 0.75rem;
  }

  .calendar-grid {
    gap: 0.25rem;
  }

  /*
   * 44 px hoch: Das ist die Größe, die sich mit dem Finger zuverlässig treffen
   * lässt (Apples eigene Vorgabe). In der Breite geben die sieben Spalten das
   * Maß vor, in der Höhe kostet es nichts.
   */
  .calendar-day {
    min-height: 2.75rem;
    border-radius: 8px;
    font-size: 0.92rem;
  }

  .calendar-bar {
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .shell {
    width: calc(100% - 2rem);
  }

  /*
   * Knöpfe über die volle Breite: Nebeneinander würden die Beschriftungen
   * (.btn setzt white-space: nowrap) sonst über den Rand hinauslaufen.
   */
  .hero-actions .btn,
  .news-form .btn {
    width: 100%;
  }

  .contact-list a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .contact-value {
    text-align: left;
  }

  /* Auf dem Handy öffnet die Teilen-Auswahl über die volle Kartenbreite */
  .news-actions {
    width: 100%;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------- Handy: größere Tippflächen ------------------------
 * Links in der Fußzeile, der Brotkrumen und „Nach oben“ waren nur rund 25 px
 * hoch – zu knapp für den Daumen. Unsichtbarer Innenabstand vergrößert die
 * Fläche, ohne das Schriftbild zu ändern.
 * ---------------------------------------------------------------------- */

@media (max-width: 860px) {
  .footer-col {
    gap: 0.1rem;
  }

  .footer-col a,
  .footer-link-button {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
  }

  .breadcrumb a,
  .to-top {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
  }
}

/* Hero-Kennzeile: auf schmalen Handys enger gesetzt, damit sie in eine Zeile
   passt statt in einer halb leeren zweiten zu enden. Bricht sie auf ganz
   kleinen Geräten doch um, wirkt die Form mit kleinerem Radius nicht verzogen. */
@media (max-width: 480px) {
  .hero .eyebrow {
    padding: 0.35rem 0.7rem;
    border-radius: 12px;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
  }
}