/* ==========================================================================
   Orgel-Website Lehnin - Stylesheet der oeffentlichen Info-Seiten
   Design-Sprache uebernommen aus der Patenschafts-App (app-frontend/):
   "Zisterzienserkloster Lehnin - heller Backsteinraum": Kalkstein-Flaechen,
   Backstein-Primaerfarbe, Gold-Akzente, Barlow, kleine Radien (2-6px).
   Kein Inline-CSS in den Templates (CSP: style-src 'self').
   ========================================================================== */

:root {
  --stone-lt:  #F2EDE4;   /* heller Kalkstein / Putz -> Body-Hintergrund */
  --stone-md:  #E0D8CC;   /* mittlerer Kalkstein */
  --stone-dk:  #C8B89A;   /* Sandstein-Akzent */
  --brick:     #8C4A2A;   /* norddeutscher Backstein -> Primaerfarbe */
  --brick-dk:  #5A2A10;   /* dunkler Backstein -> Header/Footer */
  --mortar:    #C4B8A4;   /* Fugenmoertel -> Border-Standard */
  --ink:       #2C2418;   /* Haupttext */
  --ink-lt:    #5A4E3A;   /* Sekundaertext */
  --gold:      #C09038;   /* Vergoldung */
  --gold-lt:   #E0C070;   /* helles Gold */
  --hell:      #F8F0E0;   /* Text auf dunklem Grund */
  --hell-warm: #FFF8F0;   /* Button-Text auf brick */
  --papier:    #FFFDF8;   /* fast-weisse Kartenflaeche */
  --cta1:      #fa5d19;   /* Orange-CTA (wie Warenkorb-Button der App) */
  --cta2:      #d44810;
  --gruen:     #0fa978;   /* Erfolgsmeldungen */
  --rot:       #b02a20;   /* Fehlermeldungen */
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scrollbar-color: var(--mortar) transparent;
}

body {
  margin: 0;
  /* Bezugsrahmen fuer die absolut positionierten Rand-Deko-Streifen */
  position: relative;
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--stone-lt);
  -webkit-font-smoothing: antialiased;
}

/* Gotische Lichtfenster-Reflexe (wie body::after der App): zwei schmale,
   warme Lanzettfenster-Lichtbahnen, rein dekorativ. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(11vw, 130px);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(178deg, rgba(255, 244, 214, .55), rgba(255, 244, 214, 0) 62%);
  clip-path: polygon(50% 0%, 78% 5%, 92% 14%, 100% 30%, 88% 100%, 12% 100%, 0% 30%, 8% 14%, 22% 5%);
  opacity: .5;
}
body::before { left: 7vw; }
body::after  { right: 12vw; top: 8vh; opacity: .35; }

.topbar, main, .appell, footer { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Rand-Dekoration: Orgel-Reliefs in den freien Streifen neben dem Inhalt
   (Bilder des Auftraggebers; nur auf breiten Viewports, s. Media-Query)
   -------------------------------------------------------------------------- */

/* Der Container ist exakt der freie Streifen zwischen Viewport-Rand und
   Inhaltsspalte (72rem) und clippt das Relief: wird der Browser schmaler,
   bleibt nur der aeussere Teil des Bildes sichtbar - nie unter dem Inhalt.
   Dunkle Flaechen (Topbar, Appell, Footer) liegen mit z-index 1 darueber.
   Die PNGs sind freigestellt und in Tintenfarbe getoent (kein
   mix-blend-mode: das blendete in Chromium ueber die dunklen Baender).

   2026-07-19 (Wunsch Auftraggeber): Die Reliefs stehen wieder FEST im
   Viewport (position: fixed, wie urspruenglich) und bewegen sich beim
   Scrollen nicht mehr. Die vorherige Zwischenvariante (Streifen ab
   Seitenkopf-Unterkante via --rand-deko-start aus website.js, Relief mit
   position: sticky angedockt) wurde damit zurueckgebaut - Details siehe
   Git-Historie. Vertikal mittig, aber nie hoeher als knapp unter die
   Menueleiste (88px). */
.rand-deko {
  display: none;                /* -> flex ab 1340px (Media-Query unten) */
  position: fixed;
  top: 0;
  bottom: 0;
  width: calc((100vw - 72rem) / 2);
  overflow: clip;
  z-index: 0;
  pointer-events: none;
  /* Vertikal mittig im Bereich unterhalb der Menueleiste (die ist mit dem
     84px-Logo ~112px hoch) - flex statt margin-Rechnerei, damit auch ein
     breitenbegrenztes Relief (links, s. u.) sauber zentriert. */
  flex-direction: column;
  justify-content: center;
  padding-top: 112px;
}
.rand-deko-links  { left: 0;  mask-image: linear-gradient(90deg,  #000 60%, transparent 97%); }
.rand-deko-rechts { right: 0; mask-image: linear-gradient(270deg, #000 60%, transparent 97%); }

.rand-deko::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* oben/unten weich auslaufen lassen */
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
/* 2026-07-19 (Wunsch Auftraggeber): dichter an den Textbereich - an die
   Innenkante des Randstreifens gerueckt, mit 2rem Abstand zur Inhaltsspalte
   (vorher klebte das Relief am linken Viewport-Rand). Breitengetrieben:
   auf schmaleren Desktops (Randstreifen < Bildbreite) schrumpft das Relief,
   statt aus dem Streifen zu laufen - der 2rem-Abstand bleibt immer erhalten. */
.rand-deko-links::before {
  width: min(calc(100% - 2rem), calc(min(80vh, 880px) * 359 / 1033));
  aspect-ratio: 359 / 1033;
  margin-left: auto;
  margin-right: 2rem;
  background-image: url("../img/rand-relief-prospekt.7d7e4b70eadb.png");
}
.rand-deko-rechts::before {
  height: min(62vh, 680px);
  aspect-ratio: 1323 / 1605;
  margin-left: auto;
  background-image: url("../img/rand-relief-pfeifen.bf8215caeefc.png");
}

@media (min-width: 1340px) {
  .rand-deko { display: flex; }
}

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

/* Das hidden-Attribut muss auch gewinnen, wenn eine Klasse `display` setzt -
   sonst zeigt z. B. .btn { display: inline-block } einen versteckten Button an
   (Author-CSS schlaegt das UA-Stylesheet unabhaengig von der Spezifitaet). */
[hidden] { display: none !important; }

a { color: var(--brick); }
a:hover { color: var(--brick-dk); }

:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brick-dk);
  color: var(--hell);
  padding: .6rem 1rem;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
  color: var(--hell);
}

/* --------------------------------------------------------------------------
   Kopfleiste (Navigation)
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--brick);
  /* Foto des Kleeblatt-Frieses der Klosterkirche mit Abdunkelung, damit
     Logo und Navigation lesbar bleiben.
     2026-07-19 (Wunsch Auftraggeber): helle Fries-Variante (Auftraggeber-
     Bild Fries_hell_neu.jpg als Kachel hintergrund-fries-hell.jpg) mit
     schwaecherer Abdunkelung. Vorher (dunkle Variante, bei Nichtgefallen
     einfach zuruecktauschen):
       linear-gradient(rgba(44, 18, 6, .48), rgba(44, 18, 6, .48)),
       url("../img/hintergrund-fries.1b263679c60d.jpg");  */
  background-image:
    linear-gradient(rgba(44, 18, 6, .32), rgba(44, 18, 6, .32)),
    url("../img/hintergrund-fries-hell.8401c67c2470.jpg");
  background-size: auto, auto 100%;
  background-repeat: repeat;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .25);
}

/* Auf dem Foto-Hintergrund brauchen die hellen Texte etwas Tiefe */
.marke-kicker,
.marke-name,
.hauptnav a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.topbar-inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: .65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  line-height: 1.25;
  padding: .15rem 0;
  min-width: 0;
}
/* Rundes Logo-Siegel (Strichzeichnung auf transparentem PNG) auf heller
   Kreisflaeche mit Goldring - direkt auf dem Backstein waere die feine
   schwarze Zeichnung nicht lesbar. */
.marke-logo {
  flex: none;
  /* 2026-07-19 (Wunsch Auftraggeber, zur Abnahme): Logo ~1,8-fach groesser,
     die Menueleiste wird dadurch etwas hoeher. Vorher (bei Nichtgefallen
     einfach zuruecktauschen): width: 47px; height: 47px; */
  width: 84px;
  height: 84px;
  padding: 3px;
  border-radius: 50%;
  background: var(--hell);
  border: 1px solid var(--gold);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .30);
}
.marke:hover .marke-logo { border-color: var(--gold-lt); }
.marke-text { display: block; min-width: 0; }
.marke-kicker {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.marke-name {
  display: block;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--hell);
  white-space: nowrap;
}
.marke:hover .marke-name { color: var(--gold-lt); }

.hauptnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.hauptnav a {
  display: block;
  padding: .55rem .65rem .45rem;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(248, 240, 224, .88);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.hauptnav a:hover { color: var(--gold-lt); }
.hauptnav a[aria-current="page"] {
  color: var(--gold-lt);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(248, 240, 224, .45);
  border-radius: 3px;
  color: var(--hell);
  font-family: 'Barlow', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  padding: .45rem .7rem;
  cursor: pointer;
  align-items: center;
  gap: .45rem;
}
.nav-toggle:hover { border-color: var(--gold-lt); color: var(--gold-lt); }
.nav-toggle .balken {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle .balken::before,
.nav-toggle .balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.nav-toggle .balken::before { top: -5px; }
.nav-toggle .balken::after  { top: 5px; }

/* Goldband unter der Kopfleiste (wie .header-gold der App) */
.goldband {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-lt) 50%, var(--gold) 80%, transparent);
}

/* --------------------------------------------------------------------------
   Seitenkopf der Unterseiten (dunkles Backstein-Band)
   -------------------------------------------------------------------------- */

/* Dunkles Band auf voller Breite; Hintergrund ist ein Foto echten
   Klosterziegel-Mauerwerks (Auftraggeber-Bild Ziegelwand1.jpg, nahtlose
   Kachel), abgedunkelt, damit Ueberschrift/Einleitung lesbar bleiben.
   2026-07-19 (Wunsch Auftraggeber): Abdunkelung reduziert, die Ziegel
   wirken heller/naeher am Originalfoto. Vorher (bei Nichtgefallen einfach
   zuruecktauschen): rgba(44, 16, 5, .58) in beiden Gradient-Stops. */
.seiten-kopf {
  position: relative;
  color: var(--hell);
  background-color: var(--brick-dk);
  background-image:
    linear-gradient(rgba(44, 16, 5, .38), rgba(44, 16, 5, .38)),
    url("../img/hintergrund-ziegel.0377e33eb2bd.jpg");
  background-size: auto, 655px auto;
}
.seiten-kopf-inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.6rem 1.5rem 2.2rem;
  /* 2026-07-21 (Wunsch Auftraggeber): Der radiale Verlauf dunkelte genau die
     mittlere Inhaltsspalte ab und wirkte wie ein Schatten ueber der Ziegelwand.
     Vorher (bei Nichtgefallen einfach zuruecktauschen):
     background: radial-gradient(ellipse at 30% 120%, rgba(60, 20, 5, .55), rgba(60, 20, 5, .15)); */
}
/* Etwas Tiefe fuer helle Texte direkt auf dem Ziegelfoto (seit Wegfall des
   radialen Verlaufs 2026-07-21 noetig, Muster wie im Appell-Band) */
.seiten-kopf .kicker,
.seiten-kopf h1,
.seiten-kopf .einleitung {
  text-shadow: 0 1px 4px rgba(60, 25, 8, .55);
}
.seiten-kopf .kicker { color: var(--gold-lt); }
.seiten-kopf h1 {
  margin: .3rem 0 0;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--hell);
}
.seiten-kopf .einleitung {
  margin: .8rem 0 0;
  /* 2026-07-20 (Wunsch Auftraggeber/Felix): kein fruehzeitiger Umbruch mehr -
     die Einleitung darf die volle Breite des Kopfbereichs nutzen
     (vorher: max-width: 62ch). */
  font-size: 1.02rem;
  font-weight: 300;
  color: rgba(248, 240, 224, .88);
}

.kicker {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brick);
}

/* --------------------------------------------------------------------------
   Runder "Jetzt Pate werden!"-Button im Ziegelband (Wunsch Auftraggeber
   2026-07-21): sitzt rechts in jedem Unterseiten-Kopf und fuehrt den eiligen
   Besucher direkt zur Pfeifen-Auswahl. Kreis mit Goldring wie die Topbar-
   Marke. Hintergrund seit 2026-07-24 (Wunsch Auftraggeber): Ausschnitt aus
   seinem Foto "Pfeifendetail.jpg" (Prospektpfeifen mit Spitzbogen-Labium,
   dev-felix/vom-auftraggeber-240726/) statt des Trompetenregister-Fotos
   ("Pfeifenoeffnungen wie eine Rakete"). Sein rundes Gold-Bild ("Pfeifen
   gold rund.jpg") war mit 121px zu klein fuer den 148px-Kreis (Retina 2x).
   -------------------------------------------------------------------------- */

.pate-badge {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  padding: .9rem;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  /* Ueberlanger CMS-Text bleibt im Kreis, statt auf die Ziegelwand zu laufen */
  overflow: hidden;
  background-image:
    linear-gradient(rgba(60, 25, 8, .5), rgba(60, 25, 8, .5)),
    url("../img/pfeifendetail-badge.e94d39cd16e1.jpg");
  background-size: cover;
  background-position: center;
  border: 3px solid var(--gold);
  box-shadow:
    0 0 0 4px rgba(60, 25, 8, .45),
    0 0 0 5px rgba(192, 144, 56, .5),
    0 8px 24px rgba(0, 0, 0, .35);
  transition: transform .18s, box-shadow .18s;
}
.pate-badge:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow:
    0 0 0 4px rgba(60, 25, 8, .45),
    0 0 0 5px rgba(192, 144, 56, .7),
    0 12px 30px rgba(0, 0, 0, .45);
}
.pate-badge:focus-visible {
  outline: 3px solid var(--gold-lt);
  outline-offset: 4px;
}
.pate-badge-text {
  color: var(--hell-warm);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.22;
  letter-spacing: .03em;
  text-shadow: 0 1px 4px rgba(30, 12, 4, .8);
}

/* Platz fuer den Badge: rechts, damit die Einleitung nicht unter ihm
   durchlaeuft, und eine Mindesthoehe, damit er auch auf kurzen Baendern
   (z. B. Impressum: nur Kicker + Titel) nicht unten herausragt. */
@media (min-width: 981px) {
  .seiten-kopf-inner {
    padding-right: 13rem;
    min-height: 12.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 980px) and (min-width: 721px) {
  .pate-badge { width: 118px; height: 118px; padding: .7rem; }
  .pate-badge-text { font-size: .86rem; }
  .seiten-kopf-inner {
    padding-right: 10rem;
    min-height: 10.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* Schmale Screens: Badge rutscht zentriert unter den Text */
@media (max-width: 720px) {
  .pate-badge {
    position: static;
    transform: none;
    width: 118px;
    height: 118px;
    padding: .7rem;
    margin: 1.2rem auto 0;
  }
  .pate-badge:hover { transform: scale(1.05); }
  .pate-badge-text { font-size: .86rem; }
}

/* --------------------------------------------------------------------------
   Inhalt / Typografie
   -------------------------------------------------------------------------- */

.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

main { display: block; }

.abschnitt { padding: 2.6rem 0 .6rem; }
.abschnitt::after { content: ""; display: block; clear: both; }

.prosa { max-width: 70ch; }
.prosa p { margin: 0 0 1rem; }
/* Der Admin-Editor (TipTap) speichert Listenpunkte als <li><p>…</p></li> -
   der innere Absatz darf keinen Abstand einbringen (Muster wie
   .termin-beschreibung li p weiter unten, hier fuer alle CMS-Inhalte).
   Die Container-Selektoren sind noetig, weil ".prosa p" und
   ".leichte-sprache p" die nackte li > p-Regel per Spezifitaet schlagen. */
li > p,
.prosa li p,
.leichte-sprache li p { margin: 0; }

h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--brick-dk);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  position: relative;
}
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(192, 144, 56, 0));
}

h3 {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--brick-dk);
  margin: 1.6rem 0 .6rem;
}

.abschnitt ul { padding-left: 1.2rem; }
.abschnitt li { margin: 0 0 .45rem; }

hr.zier {
  border: none;
  height: 2px;
  margin: 2.4rem auto 0;
  max-width: 72rem;
  background: linear-gradient(90deg, transparent, var(--mortar) 25%, var(--stone-dk) 50%, var(--mortar) 75%, transparent);
}

/* Grosses Zitat ("Stellen Sie sich vor ...") */
.zitat {
  margin: 2.2rem auto;
  padding: 1.6rem 1rem;
  max-width: 52ch;
  text-align: center;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-lt);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.zitat strong { font-weight: 500; color: var(--ink); }

/* --------------------------------------------------------------------------
   Bilder
   -------------------------------------------------------------------------- */

.figur {
  margin: 1.4rem 0 1.6rem;
  background: var(--papier);
  border: 1px solid var(--mortar);
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 2px 10px rgba(44, 36, 24, .10);
}
.figur img { width: 100%; border-radius: 2px; }
.figur figcaption {
  padding: .55rem .35rem .25rem;
  font-size: .8rem;
  font-style: italic;
  color: var(--ink-lt);
  line-height: 1.45;
}

/* Bild neben Fliesstext */
@media (min-width: 760px) {
  .figur-rechts { float: right; width: min(46%, 380px); margin: .3rem 0 1.2rem 1.8rem; }
  .figur-links  { float: left;  width: min(46%, 380px); margin: .3rem 1.8rem 1.2rem 0; }
  .figur-schmal { max-width: 420px; }
}

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */

.karte {
  /* flow-root: eigener Formatting-Context, damit die Karte sich neben
     gefloatete Bilder (.figur-rechts/-links) legt statt darunter durchzulaufen */
  display: flow-root;
  background: var(--papier);
  border: 1px solid var(--mortar);
  border-radius: 6px;
  padding: 1.2rem 1.3rem;
  box-shadow: 0 2px 10px rgba(44, 36, 24, .08);
}

.karten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0;
}
.karten-raster .karte h3 { margin-top: 0; }
.karten-raster .karte p:last-child { margin-bottom: 0; }

/* Hervorgehobene Hinweis-Karte (Gold-Rahmen wie Intro-Overlay der App) */
.hinweis-karte {
  /* flow-root: nicht unter Floats durchlaufen (s. .karte); .extern-karte
     ueberschreibt das weiter unten gezielt mit display:flex */
  display: flow-root;
  background: var(--papier);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 1.3rem 1.5rem;
  margin: 1.6rem 0;
  box-shadow: 0 2px 12px rgba(192, 144, 56, .18);
}
.hinweis-karte h3 { margin-top: 0; }
.hinweis-karte p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Veranstaltungskalender (Termin-Liste)
   -------------------------------------------------------------------------- */

.termin-liste {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.termin-karte {
  display: flex;
  gap: 1.1rem;
  align-items: stretch;
  background: var(--papier);
  border: 1px solid var(--mortar);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(44, 36, 24, .08);
  margin: 0;
  padding: 0;
}
.termin-datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-width: 5.4rem;
  padding: .9rem .7rem;
  background: linear-gradient(135deg, var(--brick-dk), var(--brick));
  border-right: 2px solid var(--gold);
  color: var(--hell-warm);
}
.termin-tag {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-lt);
}
/* Dreizeilig (Wunsch Auftraggeber 2026-07-23): Tag + Monat gross/fett,
   Jahr darunter kleiner */
.termin-monat {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--gold-lt);
}
.termin-jahr {
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .06em;
  opacity: .8;
}
.termin-info {
  padding: .9rem 1.1rem 1rem;
  min-width: 0;
}
.termin-info h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.termin-zeit {
  margin: 0 0 .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brick-dk);
}
/* Termin-Fotos (Import + optionales zweites Admin-Foto) inkl. Bildnachweis.
   Hochkant-Bilder werden per max-height gedeckelt (Wunsch Auftraggeber
   2026-07-23: Terminboxen nicht seitenfuellend hoch; 2026-07-25: hoechstens
   halb so hoch -> 320px auf 160px halbiert); Klick oeffnet die Lightbox
   (website.js). Zwei Fotos stehen nebeneinander. */
.termin-bilder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .9rem;
  margin: 0 0 .6rem;
}
.termin-bild {
  margin: 0;
  max-width: 340px;
}
.termin-bild img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--mortar);
}
.termin-bild figcaption {
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--ink-lt);
}
.termin-beschreibung {
  margin: 0 0 .5rem;
  font-size: .92rem;
  color: var(--ink-lt);
}
/* Vorschau-Karte: Beschreibung auf 3 Zeilen gekuerzt. Moderne Browser rendern
   per line-clamp die "..." am Zeilenende (klares Abgeschnitten-Signal),
   Alt-Browser bekommen max-height + Ausblend-Verlauf als Fallback.
   Der "Mehr anzeigen"-Link wird nur per JS eingeblendet, wenn wirklich
   Text abgeschnitten ist (website.js). */
.termin-beschreibung.eingeklappt {
  max-height: 4.6em;
  overflow: hidden;
  position: relative;
}
.termin-beschreibung.eingeklappt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.6em;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--papier));
}
@supports (-webkit-line-clamp: 3) {
  .termin-beschreibung.eingeklappt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: none;
  }
  .termin-beschreibung.eingeklappt::after { content: none; }
}
/* Aufklapp-Link: bewusst KEIN Button-Look (unterscheidet sich von den
   Kalender-/Teilen-Buttons darunter) - kleiner Textlink direkt unterm Text */
.termin-mehr {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  color: var(--brick-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.termin-mehr:hover { color: var(--brick); }
/* Das display oben schlaegt das UA-`[hidden] { display: none }`: ohne diese
   Regel bliebe der Knopf auch dann sichtbar, wenn website.js gar nichts
   abgeschnitten hat - ein Link, der beim Klick nichts tut. */
.termin-mehr[hidden] { display: none; }
/* Seiten-Navigation unter der Terminliste: mittig, runde Seiten-Chips
   (aktive Seite im Backstein-Verlauf der Datums-Badges), Pfeile als Textlinks */
.seiten-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.6rem;
}
.seiten-nav-seite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .6rem;
  border-radius: 999px;
  border: 1px solid var(--mortar);
  background: var(--papier);
  color: var(--brick-dk);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
a.seiten-nav-seite:hover {
  background: var(--brick-dk);
  border-color: var(--brick-dk);
  color: #fff;
}
.seiten-nav-aktiv {
  background: linear-gradient(135deg, var(--brick-dk), var(--brick));
  border-color: var(--brick-dk);
  color: #fff;
}
.seiten-nav-pfeil {
  padding: 0 .3rem;
  color: var(--brick-dk);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.seiten-nav-pfeil:hover { color: var(--brick); }
.seiten-nav-ellipsis { color: var(--ink-lt); padding: 0 .2rem; }
/* Richtext-Inhalte aus dem Admin-Editor (Absaetze, Listen) */
.termin-beschreibung p,
.termin-beschreibung ul,
.termin-beschreibung ol {
  margin: 0 0 .5rem;
}
.termin-beschreibung ul,
.termin-beschreibung ol {
  padding-left: 1.25rem;
}
.termin-beschreibung li {
  margin-bottom: .15rem;
}
/* TipTap verpackt Listenpunkte als <li><p>..</p></li> - innerer Absatz ohne Abstand */
.termin-beschreibung li p {
  margin: 0;
}
/* Bewusste Leerzeile (leerer Absatz aus dem Editor) sichtbar lassen -
   ohne min-height kollabiert ein leeres <p> zu 0 Hoehe */
.termin-beschreibung p:empty {
  min-height: 1.4em;
}
.termin-beschreibung > :last-child {
  margin-bottom: 0;
}
.termin-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .6rem;
}

/* Kompakter Button fuer Nebenaktionen (Kalender-Links) */
.btn-klein {
  font-size: .82rem;
  padding: .45rem .9rem;
}

/* Teilen-Zeile unter den Kalender-Buttons einer Termin-Karte */
.termin-teilen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem;
}
/* Fett statt groesser (Wunsch Auftraggeber 2026-07-23) */
.termin-teilen-label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink);
}
/* Geteilte Anker-Links (#termin-<pk>): Karte nicht unter der sticky Topbar
   verstecken (2026-07-19: 6rem -> 8.5rem, die Leiste ist mit dem groesseren
   Logo ~112px hoch) */
.termin-karte {
  scroll-margin-top: 8.5rem;
}

@media (max-width: 560px) {
  .termin-karte { flex-direction: column; }
  .termin-datum {
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: .5rem;
    border-right: none;
    border-bottom: 2px solid var(--gold);
    padding: .5rem 1.1rem;
  }
  .termin-tag { font-size: 1.2rem; }
  .termin-monat { font-size: .9rem; }
}

/* Teaser-Karten der Startseite (klickbar -> Hover erlaubt) */
.teaser-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.3rem;
  margin: 1.6rem 0 .6rem;
}
a.teaser-karte {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--mortar);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(44, 36, 24, .08);
  transition: transform .18s, box-shadow .18s, border-color .18s;
  cursor: pointer;
}
a.teaser-karte:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 36, 24, .16);
  border-color: var(--brick);
  color: var(--ink);
}
.teaser-bild {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 2px solid var(--gold);
}
.teaser-bild img { width: 100%; height: 100%; object-fit: cover; }
.teaser-text { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.teaser-text h3 { margin: 0; font-size: 1.02rem; color: var(--brick-dk); }
.teaser-text p { margin: 0; font-size: .88rem; color: var(--ink-lt); }
.teaser-mehr {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--brick);
}
a.teaser-karte:hover .teaser-mehr { color: var(--gold); }

/* --------------------------------------------------------------------------
   Disposition (drei Werke)
   -------------------------------------------------------------------------- */

.werk-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.3rem;
  margin: 1.5rem 0;
}
.werk-karte {
  background: var(--papier);
  border: 1px solid var(--mortar);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(44, 36, 24, .08);
}
.werk-kopf {
  background: linear-gradient(135deg, var(--brick-dk), var(--brick));
  padding: .7rem 1.1rem .6rem;
  border-bottom: 2px solid var(--gold);
}
.werk-kopf h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.werk-karte ul {
  list-style: none;
  margin: 0;
  padding: .5rem 1.1rem .9rem;
}
.werk-karte li {
  padding: .32rem 0;
  margin: 0;
  font-size: .93rem;
  border-bottom: 1px dotted var(--stone-md);
}
.werk-karte li:last-child { border-bottom: none; }
.werk-fuss {
  padding: .5rem 1.1rem .8rem;
  font-size: .85rem;
  font-style: italic;
  color: var(--ink-lt);
  border-top: 1px solid var(--stone-md);
}

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

.btn {
  display: inline-block;
  font-family: 'Barlow', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .03em;
  /* explizit, damit <button> (UA: normal) und <a> (erbt 1.65) gleich hoch sind */
  line-height: 1.65;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 3px;
  padding: .68rem 1.35rem;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .15s;
}

.btn-primaer { background: var(--brick); color: var(--hell-warm); }
.btn-primaer:hover { background: var(--brick-dk); color: var(--hell-warm); }

.btn-sekundaer {
  background: var(--stone-md);
  color: var(--ink);
  border: 1px solid var(--mortar);
}
.btn-sekundaer:hover {
  background: var(--stone-dk);
  border-color: var(--brick);
  color: var(--brick-dk);
}

/* Heller Umriss-Button fuer dunkle Flaechen */
.btn-hell {
  background: transparent;
  color: var(--hell);
  border: 1px solid rgba(248, 240, 224, .55);
}
.btn-hell:hover { border-color: var(--gold-lt); color: var(--gold-lt); }

/* Grosser Orange-CTA (wie Warenkorb-Button der App) */
.btn-cta {
  background: linear-gradient(135deg, var(--cta1) 0%, var(--cta2) 100%);
  color: var(--hell-warm);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 36px;
  padding: .8rem 1.9rem;
  border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 4px 18px rgba(250, 93, 25, .45), 0 1px 4px rgba(0, 0, 0, .2);
}
.btn-cta:hover {
  color: var(--hell-warm);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(250, 93, 25, .55), 0 2px 6px rgba(0, 0, 0, .22);
}

.btn-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.4rem 0;
  align-items: center;
}

/* Zentrierte Variante - Wunsch Auftraggeber 2026-07-26 fuer den CTA
   "Hier geht's zu den Pfeifen" ueber dem Abschnitt "Spenden & Gewinnen". */
.btn-zeile-mitte { justify-content: center; }

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

.hero { padding: 3rem 0 1rem; }
.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem;
  align-items: center;
}
.hero h1 {
  margin: .4rem 0 1rem;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 300;
  letter-spacing: .015em;
  line-height: 1.15;
  color: var(--brick-dk);
}
.hero h1 strong { font-weight: 600; }
.hero-text p {
  max-width: 58ch;
  margin: 0 0 .9rem;
  font-size: 1.04rem;
}
.hero-bild .figur { margin: 0; }

/* --------------------------------------------------------------------------
   Sprung-Navigation (Anker auf langen Seiten)
   -------------------------------------------------------------------------- */

.sprungnav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.6rem 0 .4rem;
}
.sprungnav a {
  display: inline-block;
  font-size: .82rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-lt);
  text-decoration: none;
  background: var(--stone-md);
  border: 1px solid var(--mortar);
  border-radius: 2px;
  padding: .32rem .7rem;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.sprungnav a:hover {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--hell-warm);
}

/* --------------------------------------------------------------------------
   Video (Click-to-Load) + Externe-Link-Karte
   -------------------------------------------------------------------------- */

.video-karte {
  position: relative;
  max-width: 760px;
  margin: 1.4rem 0;
  border: 1px solid var(--mortar);
  border-radius: 6px;
  overflow: hidden;
  background: var(--brick-dk);
  box-shadow: 0 2px 12px rgba(44, 36, 24, .14);
}
.video-flaeche { position: relative; aspect-ratio: 16 / 9; }
.video-flaeche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .78;
}
.video-start {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  background: linear-gradient(180deg, rgba(44, 20, 5, .15), rgba(44, 20, 5, .55));
  border: none;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  color: var(--hell);
  transition: background-color .18s;
}
.video-start:hover { background-color: rgba(44, 20, 5, .35); }
.video-start .play-kreis {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--brick);
  border: 2px solid var(--gold-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  transition: background-color .18s, transform .15s;
}
.video-start:hover .play-kreis { background: var(--cta2); transform: scale(1.05); }
.video-start .play-dreieck {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--hell-warm);
  margin-left: 5px;
}
.video-start .video-label {
  font-size: .95rem;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  padding: 0 1rem;
}
.video-start .video-datenschutz {
  font-size: .74rem;
  font-weight: 400;
  color: rgba(248, 240, 224, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  padding: 0 1.5rem;
  max-width: 46ch;
}
.video-karte iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

.extern-karte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 760px;
}
.extern-karte p { margin: 0; }
.extern-hinweis { font-size: .78rem; color: var(--ink-lt); font-style: italic; }

/* --------------------------------------------------------------------------
   Einweihungsfeier (Startseiten-Kasten + Galerie-Seite /einweihung/)
   Sichtbarkeit steuert der Admin-Schalter (Menuepunkt "Einweihungsfeier").
   -------------------------------------------------------------------------- */

/* Kasten auf der Startseite: EIN grosser Link zur Einweihungs-Seite
   (Hover-Effekt erlaubt, weil klickbar) */
a.einweihung-kasten {
  display: block;
  background: var(--papier);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 2px 12px rgba(192, 144, 56, .18);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
a.einweihung-kasten:hover,
a.einweihung-kasten:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(192, 144, 56, .30);
}
a.einweihung-kasten:hover .teaser-mehr { color: var(--gold); }
.einweihung-kasten h2 { margin-top: 0; margin-bottom: .6rem; }
.einweihung-kasten p { margin: 0 0 .4rem; }
.einweihung-kasten .teaser-mehr { display: inline-block; }

/* Bis zu 4 Thumbnails unter dem Kasten-Text */
.einweihung-kasten-bilder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin: 1rem 0 .7rem;
}
.einweihung-kasten-bilder img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--mortar);
}
@media (max-width: 560px) {
  .einweihung-kasten-bilder { grid-template-columns: repeat(2, 1fr); }
}

/* Galerie-Raster der Einweihungs-Seite: Thumbnails im Figur-Rahmen,
   Klick oeffnet die Lightbox mit dem Original (data-gross, website.js) */
.galerie-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0;
}
.galerie-raster .figur { margin: 0; }
.galerie-raster .figur img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Video-Liste der Einweihungs-Seite (Click-to-Load-Karten + externe Links) */
.video-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0;
}
.video-liste .video-karte { margin: 0; max-width: none; }
.video-liste .video-extern { display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   Appell-Band (wiederkehrender Spenden-Aufruf)
   -------------------------------------------------------------------------- */

.appell {
  /* Nur so breit wie die Inhaltsspalte - links/rechts bleiben die
     Seitenstreifen mit den Rand-Reliefs frei (nur der Footer darunter
     laeuft ueber die volle Breite). Unten bewusst Luft zum Footer,
     damit die Box nicht am Footer klebt. */
  max-width: 72rem;
  margin: 3rem auto;
  position: relative;
  /* Warmes, gleichmaessiges Ziegelmauerwerk (Auftraggeber-Bild
     Ziegelwand_hell.jpg) - bewusst ein ANDERES als im Footer darunter,
     damit sich beide Baender voneinander abheben. */
  background-color: var(--brick);
  background-image:
    linear-gradient(rgba(90, 42, 16, .55), rgba(90, 42, 16, .55)),
    url("../img/hintergrund-ziegel-hell.0cda7e5e9d3d.jpg");
  background-size: auto, 655px auto;
  color: var(--hell);
  overflow: hidden;
}
/* Solange die Rand-Reliefs nicht sichtbar sind (<1340px), gibt es neben dem
   Band nichts zu zeigen -> volle Breite statt schmaler Leer-Streifen. */
@media (max-width: 1339px) {
  .appell { max-width: none; }
}
.appell-gold-oben {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-lt) 50%, var(--gold) 80%, transparent);
}
.appell-inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.6rem 1.5rem 2.8rem;
  text-align: center;
}
.appell h2 {
  margin: 0 0 .7rem;
  padding-bottom: 0;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--hell);
}
/* Etwas Tiefe fuer helle Texte auf dem Ziegelfoto */
.appell h2,
.appell p {
  text-shadow: 0 1px 4px rgba(60, 25, 8, .55);
}
.appell h2::after { content: none; }
.appell p {
  max-width: 62ch;
  margin: 0 auto 1.5rem;
  font-weight: 300;
  color: rgba(248, 240, 224, .9);
}

/* --------------------------------------------------------------------------
   Kontaktformular
   -------------------------------------------------------------------------- */

.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem;
  align-items: start;
  margin: 1.5rem 0;
}
.ansprechpartner { display: grid; gap: 1.1rem; }
.ansprechpartner .karte h3 { margin: 0 0 .3rem; }
.ansprechpartner .karte p { margin: .15rem 0; font-size: .95rem; }
.ansprechpartner .rolle {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.formular-karte h3 { margin-top: 0; }

/* --- Anfahrt auf der Kontaktseite (dezent unter den Ansprechpartnern) ---
   Die Karte laedt erst auf Klick (website.js), bis dahin steht hier nur eine
   gezeichnete Flaeche - es geht KEINE Anfrage an Google raus. */
.anfahrt { margin-top: 1.6rem; }
.anfahrt h2 { margin-bottom: .7rem; }
.anfahrt-karte address {
  font-style: normal;
  white-space: pre-line;
  margin: 0 0 .6rem;
  font-size: .95rem;
}
.anfahrt-karte p { margin: .3rem 0; font-size: .95rem; }
.anfahrt-art { font-weight: 600; }
.anfahrt-link { margin-top: .9rem; }
.anfahrt-link .extern-hinweis { display: block; margin-top: .15rem; }

.karten-karte {
  margin-top: 1rem;
  border: 1px solid var(--mortar);
  border-radius: 6px;
  overflow: hidden;
}
.karten-flaeche {
  position: relative;
  /* Bewusst flach: die Karte soll die Seite nicht dominieren. */
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(0deg, rgba(44, 20, 5, .07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(44, 20, 5, .07) 0 1px, transparent 1px 34px),
    var(--papier);
}
.karte-start {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 0 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  color: var(--ink);
  transition: background-color .18s;
}
.karte-start:hover { background-color: rgba(44, 20, 5, .05); }
.karten-nadel {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--brick);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.karten-label { font-size: .95rem; font-weight: 600; }
.karten-datenschutz {
  font-size: .74rem;
  color: var(--ink-lt);
  max-width: 40ch;
  text-align: center;
}
.karten-karte iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: none;
}

.feld { margin-bottom: 1.05rem; }
.feld label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--brick-dk);
}
.feld input,
.feld textarea {
  width: 100%;
  font-family: 'Barlow', sans-serif;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--mortar);
  border-radius: 3px;
  padding: .62rem .75rem;
}
.feld input:focus,
.feld textarea:focus {
  outline: 2px solid var(--brick);
  outline-offset: 0;
  border-color: var(--brick);
}
.feld textarea { min-height: 9rem; resize: vertical; }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.hp-feld {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-radius: 4px;
  font-size: .92rem;
}
.form-status.sichtbar { display: block; }
.form-status.erfolg {
  background: rgba(15, 169, 120, .12);
  border: 1px solid var(--gruen);
  color: #0a6b4c;
}
.form-status.fehler {
  background: rgba(176, 42, 32, .08);
  border: 1px solid var(--rot);
  color: var(--rot);
}

.pflicht-hinweis { font-size: .78rem; color: var(--ink-lt); margin-top: .4rem; }

/* --------------------------------------------------------------------------
   Rechtstexte (Impressum / Datenschutz)
   -------------------------------------------------------------------------- */

/* 2026-07-19 (Wunsch Auftraggeber): Rechtstexte nutzen die volle Breite des
   Inhaltsbereichs (vorher schmale Lesespalte: max-width: 70ch). */
.rechtstext h2 { margin-top: 2.2rem; font-size: 1.25rem; }
.rechtstext h3 { font-size: 1.02rem; }

.platzhalter {
  background: rgba(224, 192, 112, .35);
  border-radius: 2px;
  padding: 0 .25rem;
  font-style: italic;
}

/* Leichte-Sprache-Seite: ein kurzer Hauptsatz pro Absatz, etwas groessere
   Schrift und lockerer Zeilenabstand; Links sichtbar unterstrichen */
.leichte-sprache { max-width: 70ch; font-size: 1.05rem; }
.leichte-sprache p { margin: 0 0 .55rem; line-height: 1.65; }
.leichte-sprache h2 { margin-top: 2.4rem; }
.leichte-sprache ul { padding-left: 1.2rem; }
.leichte-sprache li { margin: 0 0 .5rem; }
.leichte-sprache a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Fusszeile
   -------------------------------------------------------------------------- */

footer.fuss {
  margin-top: 0;
  /* 2026-07-25 (Wunsch Auftraggeber, "testweise"): helle Kreuzgang-Wandflaeche
     (sein Foto Wandflaeche_Kreuzgang, dev-felix/vom-auftraggeber-250726/) als
     Hintergrund, kombiniert mit dunkler Schriftfarbe #424242. cover statt
     Kachelung -> keine Wiederholungs-Naehte. Vorheriger Stand (dunkler
     Kleeblatt-Fries, bei Ruecktausch): nahtlose Kachel
     hintergrund-fries-footer.jpg (Erzeugung: scripts/erzeuge_fries_footer_kachel.py)
     mit linear-gradient(rgba(44,18,6,.32), rgba(44,18,6,.32)) davor,
     background-size: auto, auto 128px, color rgba(248,240,224,.92),
     Gold-Ueberschriften + helle Links + Text-Shadows. */
  background-color: var(--stone-md);
  background-image: url("../img/hintergrund-kreuzgang-footer.2578b051ffba.jpg");
  background-size: cover;
  background-position: center;
  color: #424242;
  position: relative;
}
/* Kompakt-Footer (Wunsch Auftraggeber 2026-07-25, "Hoehe deutlich reduzieren"):
   die frueheren drei Spalten (Adresse / Orgelprojekt-Links / Rechtliches) sind
   entfallen - nur noch eine zentrierte Link-Zeile + einzeilig Copyright und
   Bildnachweis darunter. Heller Hintergrund -> alle Texte in #424242,
   normale Schriftgewichte statt 300, sonst wirkt der dunkle Text duenn. */
.fuss-inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.1rem 1.5rem 1.2rem;
  text-align: center;
}
.fuss-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.7rem;
}
.fuss a {
  color: #424242;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 400;
}
.fuss a:hover { color: var(--brick); text-decoration: underline; }
.fuss-unten {
  margin: .55rem 0 0;
  font-size: .76rem;
  font-weight: 400;
  color: rgba(66, 66, 66, .8);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.fehlerseite { text-align: center; padding: 4rem 1.5rem; }
.fehlerseite .fehlercode {
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 300;
  color: var(--stone-dk);
  letter-spacing: .1em;
}
.fehlerseite h1 { font-weight: 400; color: var(--brick-dk); margin: .4rem 0 1rem; }
.fehlerseite .btn-zeile { justify-content: center; }

/* --------------------------------------------------------------------------
   Bild-Lightbox (vergroesserte Bildansicht im Overlay, JS in website.js)
   -------------------------------------------------------------------------- */

.lightbox-zoombar { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 10 % Rand um das Bild - dahinter bleibt die abgedunkelte Seite sichtbar */
  padding: 10vh 10vw;
  background: rgba(28, 21, 12, .82);
  cursor: zoom-out;
  animation: lightbox-einblenden .18s ease-out;
}
.lightbox[hidden] { display: none; }

@keyframes lightbox-einblenden {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Keine width-Angabe -> das Bild rendert hoechstens in Originalgroesse
   (kleine Bilder werden NICHT hochskaliert); ist es groesser als der
   Bereich innerhalb des 10 %-Rands, verkleinern max-width/max-height
   es proportional. */
.lightbox-bild {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

.lightbox-schliessen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(248, 240, 224, .45);
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: var(--hell);
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
.lightbox-schliessen:hover { border-color: var(--gold-lt); color: var(--gold-lt); }
.lightbox-schliessen:focus-visible { outline-color: var(--gold-lt); }

/* Seite hinter dem Overlay nicht scrollbar */
body.lightbox-offen { overflow: hidden; }

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

@media (max-width: 900px) {
  /* 2026-07-19: unterhalb des Burger-Breakpoints Logo eine Stufe kleiner,
     damit die sticky Leiste auf Tablets/Landscape nicht zu hoch wird
     (Desktop 84px, hier 64px, unter 640px 48px) */
  .marke-logo { width: 64px; height: 64px; }
  .nav-toggle { display: inline-flex; }
  .hauptnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brick);
    border-top: 1px solid rgba(248, 240, 224, .18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  }
  .hauptnav.offen { display: block; }
  .hauptnav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .4rem 0; }
  .hauptnav a {
    padding: .8rem 1.5rem;
    font-size: .98rem;
    border-bottom: none;
    border-left: 3px solid transparent;
  }
  .hauptnav a[aria-current="page"] { border-left-color: var(--gold); background: rgba(0, 0, 0, .25); }

  .hero-raster { grid-template-columns: 1fr; gap: 1.8rem; }
  .kontakt-raster { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body::before, body::after { display: none; }
  .topbar-inner { padding: .55rem 1rem; }
  .marke { gap: .6rem; }
  /* 2026-07-19: mobil nur moderat mitvergroessert (vorher: 40px) - mehr
     draengt den Markennamen neben dem Menue-Button in den Umbruch */
  .marke-logo { width: 48px; height: 48px; }
  .marke-name { font-size: 1rem; white-space: normal; }
  .container { padding: 0 1rem; }
  .seiten-kopf-inner { padding: 2rem 1rem 1.7rem; }
  .hero { padding: 2rem 0 .6rem; }
  .abschnitt { padding: 2rem 0 .4rem; }
  .btn-zeile .btn { flex: 1 1 auto; }
  .appell-inner { padding: 2.1rem 1rem 2.3rem; }
  .fuss-inner { padding: 1rem 1rem 1.1rem; }
}

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