/* Komponenten-Styles nach Figma („⚙️ Pages Componets", „🎨 Design Components"
   und den Seiten-Frames). Klassen-Präfix f-. */

/* ── Basis ─────────────────────────────────────────────── */
.f-page {
  font-family: var(--f-font);
  color: var(--f-n800);
  background: var(--f-n100);
  -webkit-font-smoothing: antialiased;
}
.f-page img {
  display: block;
  max-width: 100%;
}
.f-container {
  width: 100%;
  max-width: calc(var(--f-container) + 2 * var(--f-gutter));
  margin-inline: auto;
  padding-inline: var(--f-gutter);
  box-sizing: border-box;
}
.f-dark {
  background: var(--f-n800);
  color: var(--f-n100);
}
.f-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sprunglink „Zum Inhalt springen“ (components/ui/TastaturHilfen.tsx): nur bei Fokus sichtbar */
.f-sprunglink {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--f-n800);
  color: var(--f-n100);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.f-sprunglink:focus { transform: none; outline: 2.5px solid var(--f-accent); outline-offset: 3px; }
main:focus { outline: none; }

/* Fokus gut sichtbar auf jedem Grund (WCAG 2.4.7, 1.4.11): Zum gelben Ring (outline) kommt ein schmaler
   dunkler und heller Doppelrand direkt am Element. :where() hält die Spezifität bei 0, eigene
   Fokus-Schatten einzelner Bausteine gehen vor. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  box-shadow: 0 0 0 2px var(--f-n800), 0 0 0 4px var(--f-n100);
}

/* Sichtbarer Hinweis bei noch deaktivierten Formularen und Knöpfen (WCAG 3.3.2) */
.f-hinweis-bald { display: block; margin-top: 12px; font-size: 14px; line-height: 20px; color: #6b6b6b; }
.f-footer .f-hinweis-bald { margin-top: 10px; color: #bdbdbd; }

/* ── Typografie ────────────────────────────────────────── */
.f-d1,
.f-d2,
.f-d3,
.f-d4,
.f-h2,
.f-h3,
.f-h64 {
  font-family: var(--f-font);
  font-weight: 900;
  margin: 0;
  text-wrap: balance;
  /* Ganze Wörter umbrechen statt trennen („Jungschar / Mädchen“ statt „Mäd-chen“);
     nur auf schmalen Bildschirmen (siehe unten) automatisch trennen statt überlaufen */
  hyphens: manual;
  overflow-wrap: break-word;
}
@media (max-width: 600px) {
  .f-d1, .f-d2, .f-d3, .f-d4, .f-h2, .f-h3, .f-h64 { hyphens: auto; overflow-wrap: break-word; }
}
.f-d1 { font-size: var(--f-d1-size); line-height: var(--f-d1-lh); }
.f-d2 { font-size: var(--f-d2-size); line-height: var(--f-d2-lh); }
.f-h64 { font-size: var(--f-h64-size); line-height: normal; }
.f-d3 { font-size: var(--f-d3-size); line-height: var(--f-d3-lh); }
.f-h2 { font-size: var(--f-h2-size); line-height: var(--f-h2-lh); }
.f-d4 { font-size: var(--f-d4-size); line-height: var(--f-d4-lh); }
.f-h3 { font-size: var(--f-h3-size); line-height: var(--f-h3-lh); }

.f-p {
  font-size: var(--f-p-size);
  line-height: var(--f-p-lh);
  font-weight: 400;
  margin: 0;
}
.f-muted { color: var(--f-n600); }
.f-upper {
  font-size: var(--f-t200-size);
  line-height: var(--f-t200-lh);
  font-weight: 700;
  letter-spacing: var(--f-upper-tracking);
  text-transform: uppercase;
}
.f-upper--medium { font-weight: 500; }

/* Handschrift-Unterzeile (Caveat Bold 48/56, Accent, −5° gedreht) */
.f-script {
  display: inline-block;
  font-family: var(--f-font-script);
  font-weight: 700;
  font-size: var(--f-script-size);
  line-height: var(--f-script-lh);
  color: var(--f-script-farbe, var(--f-accent-text));
  transform: rotate(-5deg);
  white-space: nowrap;
  margin: 0;
}

/* Titel-Block: Handschrift-Zeile über der Überschrift, überall mit demselben sichtbaren Abstand.
   Bezugslinien (Schriftmetrik, per Canvas gemessen):
   - Script: Unterkante der Buchstaben ohne Unterlänge (Grundlinie + 0,07em). Caveat: Ascent 0,96em,
     Descent 0,30em, also liegt diese Linie 0,5lh − 0,40em über der Unterkante der Zeilenbox.
   - Titel: Oberkante der Großbuchstaben. Clarity City: Ascent 0,80em, Descent 0,21em, Versalhöhe
     0,69em, also liegt sie 0,5lh − 0,395em unter der Oberkante der Zeilenbox.
   Gedreht wird um die linke untere Ecke: der tiefste Punkt der Zeile ist dann immer ihr linkes Ende
   und bleibt stehen, egal wie lang die Zeile ist (bei Drehung um die Mitte hängt das linke Ende
   um Breite/2 · sin 5° tiefer). Unterlängen (g, p, f) enden kurz über der Zeilenbox-Unterkante und
   bleiben damit immer über dem Titel. Seiten ändern diesen Abstand nicht (auch nicht bei größerer
   Special/400-Schrift), damit er überall gleich ist. */
.f-title {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.f-title .f-script {
  position: relative;
  z-index: 1;
  transform-origin: left bottom;
  margin-bottom: calc(var(--f-script-gap) - 0.5lh + 0.4em);
}
.f-title > .f-script + * {
  margin-top: calc(0.395em - 0.5lh);
}
.f-title--center {
  align-items: center;
  text-align: center;
}
/* Mittig: Drehung um die linke Ecke verschiebt die Zeile um Breite · (1 − cos 5°)/2 + Höhe · sin 5°/2
   nach links; das gleicht translateX aus (Prozent = eigene Breite, lh = eigene Zeilenhöhe).
   −0,11em: Caveat-Glyphen stehen rechts in ihrer Box (links mehr Vorbreite, rechts Überhang),
   so steht die sichtbare Schrift optisch mittig über der Überschrift. */
.f-title--center .f-script {
  transform: translateX(calc(0.19% + 0.0436lh - 0.11em)) rotate(-5deg);
}
.f-title--start {
  align-items: flex-start;
  text-align: left;
}

/* ── Buttons ───────────────────────────────────────────── */
.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 26px 38px;
  border-radius: var(--f-r-button);
  font-family: var(--f-font);
  font-weight: 900;
  font-size: var(--f-t200-size);
  line-height: var(--f-t200-lh);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  border: 2.5px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.f-btn:hover { opacity: 0.88; }
.f-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.f-btn:disabled:active { transform: none; }
.f-btn:active { transform: scale(0.98); }
.f-btn:focus-visible {
  outline: 2.5px solid var(--f-accent);
  outline-offset: 3px;
}
.f-btn--dark { background: var(--f-n800); color: var(--f-n100); }
.f-btn--light { background: var(--f-n100); color: var(--f-n800); }
.f-btn--outline-dark { border-color: var(--f-n800); color: var(--f-n800); background: transparent; }
.f-btn--outline-light { border-color: var(--f-n100); color: var(--f-n100); background: transparent; }
/* Header-Button: 24/18 Padding, Radius 14, Text Single/100/Bold */
.f-btn--s {
  padding: 18px 24px;
  border-radius: var(--f-r-button-s);
  font-weight: 700;
  font-size: var(--f-t100-size);
  line-height: var(--f-t100-lh);
  gap: 4px;
}
/* Footer-Newsletter-Button: 28/18 Padding */
.f-btn--m {
  padding: 18px 28px;
}
.f-btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.f-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: center;
}

/* Handy: Buttons kompakter und mit Umbruch statt über den Rand (Figma-Maße sind Desktop) */
@media (max-width: 600px) {
  .f-btn {
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 19px;
    white-space: normal;
    max-width: 100%;
  }
  .f-btn--s { padding: 13px 18px; }
  .f-btn--m { padding: 14px 20px; }
  .f-btn-row { gap: 12px; }
}

/* Quadratischer Pfeil-Button (Primary Square Button 88×88, Radius 20) */
.f-square-btn {
  width: 88px;
  height: 88px;
  border-radius: var(--f-r-square);
  background: var(--f-n800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  flex: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.f-square-btn img { width: 36px; height: 36px; transition: filter 0.2s ease; }
.f-square-btn--flip img { transform: scaleX(-1); }
/* Deaktiviert (z. B. Karussell am Anfang/Ende): nur umrandet, Pfeil dunkel */
.f-square-btn:disabled { background: transparent; box-shadow: inset 0 0 0 2px var(--f-n800); cursor: default; }
.f-square-btn:disabled img { filter: invert(1); }
@media (max-width: 600px) {
  .f-square-btn { width: 60px; height: 60px; border-radius: 16px; }
  .f-square-btn img { width: 26px; height: 26px; }
}

/* ── Icons (Line Rounded) ──────────────────────────────── */
.f-icon { width: 24px; height: 24px; flex: none; }

/* ── Header V2 ─────────────────────────────────────────── */
.f-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 106px;
}
.f-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: clamp(16px, 4.375vw, 63px) clamp(16px, 4.1vw, 59px);
}
.f-header__logo { display: inline-flex; align-items: center; flex: none; }
.f-header__logo img { width: 214.926px; height: auto; }
/* Sehr schmale Handys (320px, WCAG 1.4.10): Logo etwas kleiner, damit der Menüknopf nicht über den Rand ragt */
@media (max-width: 359px) {
  .f-header__inner { gap: 12px; }
  .f-header__logo img { width: 186px; height: auto; }
}
.f-header__right { display: flex; align-items: center; gap: clamp(24px, 4.4vw, 63px); }
.f-nav { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; align-items: center; }
.f-nav a,
.f-nav button {
  font-family: var(--f-font);
  font-weight: 900;
  font-size: var(--f-t200-size);
  line-height: var(--f-t200-lh);
  color: var(--f-n100);
  text-decoration: none;
  background: none;
  border: 0;
  /* Umlaut-Punkte (Ü) ragen über die 20px-Zeile hinaus. Ohne diesen Innenabstand zeichnet der
     Browser beim Hover nur die Zeile neu und die Punkte bleiben halb weiß. Optisch neutral. */
  padding: 6px 0;
  margin: -6px 0;
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
}
.f-nav a:hover,
.f-nav button:hover,
.f-nav a[aria-current="page"] { color: var(--f-accent); }
.f-nav__drop { position: relative; }
.f-nav__menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--f-n800);
  border-radius: var(--f-r-button);
  padding: 12px;
  display: grid;
  gap: 2px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  list-style: none;
  margin: 0;
}
.f-nav__menu a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
}
.f-nav__menu a:hover { background: var(--f-n700); }
.f-nav__menu[hidden] { display: none; }
/* Oberpunkt mit Untermenü: Link + eigener Pfeil-Knopf (Disclosure-Muster) */
.f-nav__drop { display: inline-flex; align-items: center; gap: 6px; }
.f-nav .f-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: -4px -6px -4px 0;
  border-radius: 8px;
}
/* Unterseite aktiv: Oberpunkt markieren (stärker als die Tonalitätsfarben weiter unten) */
.f-header .f-nav .f-nav__drop--aktiv > a,
.f-header .f-nav .f-nav__drop--aktiv > .f-nav__toggle { color: var(--f-accent); }
.f-nav a:focus-visible,
.f-nav button:focus-visible { outline: 2.5px solid var(--f-accent); outline-offset: 3px; border-radius: 6px; }
.f-nav__chev {
  width: 9px;
  height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
[aria-expanded="true"] > .f-nav__chev { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .f-nav__chev { transition: none; } }
.f-header__burger {
  display: none;
  width: 52px;
  height: 52px;
  border-radius: var(--f-r-button-s);
  background: var(--f-n800);
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.f-header__burger span {
  width: 22px;
  height: 2.5px;
  background: var(--f-n100);
  border-radius: 2px;
}
.f-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--f-n800);
  color: var(--f-n100);
  padding: 24px var(--f-gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
}
.f-mobile-menu[hidden] { display: none; }
.f-mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.f-mobile-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
/* Ohne :not(.f-btn) wäre der helle Kontakt-Button weiß auf weiß */
.f-mobile-menu a:not(.f-btn) {
  color: var(--f-n100);
  text-decoration: none;
  font-weight: 900;
  font-size: var(--f-d4-size);
  line-height: var(--f-d4-lh);
}
.f-mobile-menu ul.f-mobile-menu__liste { gap: 6px; }
.f-mobile-menu__liste > li > a,
.f-mobile-menu__zeile > a { display: flex; align-items: center; min-height: 52px; }
.f-mobile-menu__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.f-mobile-menu__toggle {
  width: 52px;
  height: 52px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2.5px solid var(--f-n700);
  border-radius: var(--f-r-button-s);
  color: var(--f-n100);
  cursor: pointer;
}
.f-mobile-menu ul.f-mobile-menu__unter { gap: 0; padding: 0 0 8px 18px; margin: 0 0 6px 4px; border-left: 2px solid var(--f-n700); }
.f-mobile-menu__unter[hidden] { display: none; }
.f-mobile-menu .f-mobile-menu__unter a { font-weight: 700; font-size: 19px; line-height: 26px; display: flex; align-items: center; min-height: 44px; }
.f-mobile-menu ul.f-mobile-menu__klein { display: flex; flex-wrap: wrap; gap: 4px 28px; border-top: 2px solid var(--f-n700); padding-top: 14px; }
.f-mobile-menu .f-mobile-menu__klein a { font-weight: 700; font-size: 17px; line-height: 24px; min-height: 44px; display: inline-flex; align-items: center; }
.f-mobile-menu a[aria-current="page"] { color: var(--f-accent); }
.f-mobile-menu a:focus-visible,
.f-mobile-menu button:focus-visible { outline: 2.5px solid var(--f-accent); outline-offset: 3px; }
.f-mobile-menu__close {
  background: none;
  border: 2.5px solid var(--f-n100);
  color: var(--f-n100);
  border-radius: var(--f-r-button-s);
  width: 52px;
  height: 52px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 1100px) {
  .f-nav,
  .f-header__cta { display: none; }
  .f-header__burger { display: inline-flex; }
}

/* ── Footer V2 ─────────────────────────────────────────── */
.f-footer {
  position: relative;
  background: var(--f-n800);
  color: var(--f-n100);
  overflow: hidden;
  isolation: isolate;
}
.f-footer__texture {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.f-footer__texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.f-footer__line { height: 2px; background: var(--f-n700); border: 0; margin: 0; }
.f-footer__inner { padding-top: clamp(64px, 7.4vw, 106px); }
.f-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 94px;
  padding-bottom: clamp(56px, 5.6vw, 81px);
}
.f-footer__logo { display: inline-flex; margin-bottom: 29px; }
.f-footer__logo img { width: 295px; height: auto; }
.f-footer__claim { max-width: 530px; opacity: 0.7; }
/* Kirchenlogo und Partner-Logo nebeneinander (z. B. JG auf /jg) */
.f-footer__marken { display: flex; align-items: center; gap: 28px; margin-bottom: 29px; }
.f-footer__marken .f-footer__logo { margin-bottom: 0; }
.f-footer__trenner { width: 1px; height: 64px; background: rgb(255 255 255 / 0.3); }
@media (max-width: 520px) {
  .f-footer__marken { flex-wrap: wrap; gap: 20px; }
  .f-footer__trenner { display: none; }
}
.f-newsletter__title { margin-bottom: 26px; }
.f-newsletter__form {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--f-n400);
  padding-bottom: 18px;
}
.f-newsletter__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--f-n100);
  font-family: var(--f-font);
  font-size: var(--f-t200-size);
  line-height: var(--f-t200-lh);
  padding: 0;
}
.f-newsletter__input::placeholder { color: var(--f-n100); opacity: 1; }
.f-newsletter__input:focus { outline: none; }
.f-newsletter__input:disabled { cursor: not-allowed; }
.f-footer__cols {
  display: grid;
  /* Gemeindeleben, Kirchgemeinde, Hilfeseiten, Kontakt */
  grid-template-columns: repeat(3, max-content) 1fr;
  column-gap: clamp(32px, 5vw, 70px);
  row-gap: 48px;
  /* unten 13,9vw = 200px bei 1440 (vorher 12vw: erreichte 200 erst ab 1667px Fensterbreite, bei
     echtem Zoom 0,8 auf 1440–1470 also nur 173–176 statt der zoom-neutral gemessenen 200) */
  padding-block: clamp(56px, 8vw, 118px) clamp(80px, 13.9vw, 200px);
}
.f-footer__head { margin: 0 0 42px; }
.f-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.f-footer__links a {
  color: var(--f-n100);
  text-decoration: none;
  font-weight: 900;
  font-size: var(--f-d4-size);
  line-height: var(--f-d4-lh);
}
.f-footer__links a:hover { color: var(--f-accent); }
.f-footer__contact { display: grid; grid-template-columns: 56px 1fr; gap: 0 21px; align-items: start; }
.f-footer__pin { width: 56px; height: 56px; }
.f-footer__address { opacity: 0.8; margin: 6px 0 24px; }
.f-footer__meta { display: grid; gap: 15px; list-style: none; padding: 0; margin: 0; }
.f-footer__meta li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: var(--f-t100-size); line-height: var(--f-t100-lh); }
.f-footer__meta a { color: inherit; text-decoration: none; }
.f-footer__meta .f-icon { width: 24px; height: 24px; }
.f-footer__meta-lines { white-space: pre; }
.f-footer__bottom { padding: 38px 0 40px; text-align: center; }
/* Handy: Version in eigener Zeile, ohne Trennstrich davor */
@media (max-width: 600px) {
  .f-footer__version-trenner { display: none; }
  .f-footer__version { display: block; }
}
@media (max-width: 960px) {
  .f-footer__top,
  .f-footer__cols { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .f-newsletter__form { flex-wrap: wrap; }
}

/* ── CTA V1 / V2 ───────────────────────────────────────── */
.f-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--f-n100);
  background: var(--f-n800);
}
.f-cta__bg { position: absolute; inset: 0; z-index: -1; }
.f-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.f-cta--v1 { padding: clamp(96px, 15vw, 215px) var(--f-gutter); }
.f-cta--v2 { padding: clamp(96px, 13.9vw, 200px) var(--f-gutter); }
.f-cta__content {
  max-width: 789px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  text-align: center;
}
.f-cta--v2 .f-cta__content { max-width: 1001px; }
.f-cta--v2 .f-d2,
.f-cta--v2 .f-d3 { text-shadow: 0 4px 11px rgba(0, 0, 0, 0.47); }

/* ── Seitenkopf der Unterseiten (components/ui/SeitenKopf.tsx) ──
   Figma „Hero Section" (Ausschüsse/Kirchenvorstand): Neutral/800, Grunge-Textur 28 %, 736 hoch.
   Inhalt waagerecht und senkrecht mittig (gleiche Luft oben und unten). Die Seiten haben 106px
   Abstand für den fixierten Header, der Kopf beginnt also direkt unter ihm. Damit die Mitte auch
   auf niedrigen Bildschirmen im sichtbaren Bereich liegt, ist die dunkle Fläche höchstens so hoch
   wie der Bildschirm unter dem Header (echte Fensterhöhe, vw-echt, docs/skalierung.md). Auf
   dem Handy (51,1vw < 320px) bestimmt der Inhalt plus Innenabstand die Höhe. */
.f-seitenkopf {
  --f-seitenkopf-fenster: 100svh; /* vw-echt */
  --f-seitenkopf-h: min(clamp(320px, 51.1vw, 736px), calc(var(--f-seitenkopf-fenster) - 106px));
  --f-seitenkopf-pad: clamp(64px, 6.94vw, 100px);
  /* Wie weit der dunkle Grund in einen überlappenden Block reicht (/termine: 215 von 675) */
  --f-seitenkopf-ueberlappung: clamp(64px, 14.93vw, 215px);
  position: relative;
  isolation: isolate;
}
.f-seitenkopf__flaeche {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  min-height: max(320px, var(--f-seitenkopf-h));
  padding: var(--f-seitenkopf-pad) var(--f-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--f-n800);
  color: var(--f-n100);
}
.f-seitenkopf__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.f-seitenkopf__bg img {
  object-fit: cover;
  opacity: 0.28;
}
.f-seitenkopf__inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-width: 0;
  text-align: center;
}
.f-seitenkopf__titel {
  max-width: 1204px;
  padding-top: 9px; /* Script-Zeile steht in Figma 9px unter der Oberkante des Title Wrappers */
}
/* Special/400: Caveat Bold 68/76 (Abstand zur Überschrift regelt .f-title) */
.f-seitenkopf__titel .f-script {
  font-size: clamp(40px, 4.72vw, 68px);
  line-height: 1.1176;
}
.f-seitenkopf__titel .f-d1 { color: var(--f-n100); }
/* Einleitung wie .donate-hero__intro / .blog-hero__intro */
.f-seitenkopf__text {
  max-width: 839px;
  margin: 0;
  color: var(--f-n-e8);
}
/* Überlappender Block (Muster /termine): Die dunkle Fläche bekommt unten zusätzlich so viel
   Innenabstand, wie der Block hineinragt; der Text steht damit mittig im freien Bereich darüber.
   Die Fläche bleibt insgesamt so hoch wie ohne Überlappung. */
.f-seitenkopf--ueberlappung .f-seitenkopf__flaeche {
  padding-bottom: calc(var(--f-seitenkopf-pad) + var(--f-seitenkopf-ueberlappung));
}
.f-seitenkopf__ueberlappung {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--f-seitenkopf-ueberlappung));
  padding-inline: var(--f-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Karussell-Spur (components/ui/Carousel.tsx): per Tastatur erreichbar, Fokus sichtbar */
[role="region"][tabindex="0"]:focus-visible { outline: 2.5px solid var(--f-accent); outline-offset: 4px; }

/* ── Divider Section ───────────────────────────────────── */
.f-divider { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 80; }

/* ── Karten ────────────────────────────────────────────── */
/* Bildstil (docs/bildstil.md): wird auf jedes Farbfoto ohne eigene Maske gelegt, auch auf spätere Uploads */
.f-bildstil { filter: var(--f-bildstil); }
/* Luftbild der Kirche (Original) im Standort-Rahmen: Zuschnitt und Filter wie Figma
   (Bild 1124 × 761 bei -150/-16 im Rahmen 582 × 728; Belichtung -0,21, Kontrast +1, Sättigung -1) */
.f-luftbild-standort,
.f-page img.f-luftbild-standort,
.f-media > img.f-luftbild-standort {
  position: absolute;
  left: -25.81%;
  top: -2.17%;
  width: 193.15%;
  max-width: none;
  height: auto;
  filter: grayscale(1) brightness(0.85) contrast(1.3);
}
/* Luftbild gespiegelt im Querformat (Blog Card V6, 1264 × 491: Ausschnitt 2020 px breit ab 83/531).
   Cover plus Zoom, damit höhere Karten (schmale Ansicht, mehr Text) immer gefüllt sind. */
.f-luftbild-quer,
.f-page img.f-luftbild-quer {
  object-fit: cover;
  object-position: 50% 51.66%;
  transform-origin: 55.34% 50%;
  transform: scale(-1.3312, 1.3312);
}
/* Verlauf der Blog Card V6: schwarz links, fast transparent rechts (Figma −18 bis 1515 px) */
.f-luftbild-verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.988) 0%, rgba(0, 0, 0, 0.163) 100%);
}

.f-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--f-r-card);
}
.f-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blog Card V4 */
.f-blog-card { display: flex; flex-direction: column; gap: 39px; color: inherit; text-decoration: none; }
.f-blog-card .f-media { aspect-ratio: 601 / 337.5; }
.f-blog-card__body { display: flex; flex-direction: column; gap: 12px; }
.f-blog-card__text { display: flex; flex-direction: column; gap: 24px; }
.f-meta { display: flex; align-items: center; gap: 16px; color: var(--f-n700); flex-wrap: wrap; }
.f-meta__divider { width: 29px; height: 1px; background: currentColor; flex: none; }
.f-blog-card:hover .f-h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Ministry Card V1 */
.f-ministry-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--f-r-card);
  aspect-ratio: 620 / 555.45;
  color: var(--f-n100);
  text-decoration: none;
  display: block;
}
.f-ministry-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-ministry-card__fade {
  position: absolute;
  inset: 36.98% 0 0 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
}
.f-ministry-card__content {
  position: absolute;
  left: 7.74%;
  right: 7.74%;
  bottom: clamp(28px, 8.5%, 48px);
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.f-ministry-card .f-d3 { text-shadow: var(--f-shadow-02); max-width: 340px; }
.f-ministry-card__info { display: flex; align-items: center; gap: 19px; flex-wrap: wrap; }
.f-ministry-card__detail { display: flex; align-items: center; gap: 8px; }
.f-ministry-card__divider { width: 19.35px; height: 1px; background: var(--f-n100); }

/* Header-Tonalität: dunkle Schrift auf hellen Seitenköpfen (Innenseiten) */
.f-header--dark .f-nav a,
.f-header--dark .f-nav button { color: var(--f-n800); }
.f-header--dark .f-nav__menu a { color: var(--f-n100); }
.f-header--dark .f-nav a:hover,
.f-header--dark .f-nav button:hover,
.f-header--dark .f-nav a[aria-current="page"] { color: var(--f-accent); }
/* Aktiver Menüpunkt auf hellem Kopf: dunkleres Gold für 4,5:1 (WCAG 2.2 AA); Untermenü bleibt dunkel mit hellem Gold */
.f-header--dark .f-nav > li > a[aria-current="page"],
.f-header--dark .f-nav .f-nav__drop--aktiv > a,
.f-header--dark .f-nav .f-nav__drop--aktiv > .f-nav__toggle { color: var(--f-accent-text-klein); }

/* Header fixiert: Beim Scrollen fährt eine Fläche in Neutral 100 von oben ein, der Inhalt
   rückt etwas zusammen (nur transform, kein Layout-Sprung) und das Logo blendet von hell auf
   dunkel über. Zustand per SiteHeader (Klasse --gescrollt). */
.f-header--fixiert { position: fixed; }
.f-header {
  --f-header-kompakt: 84px;
  --f-header-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Farbe der fixierten Fläche = Seitengrund oben (meist Neutral 200; einzelne Seiten Neutral 100,
   Anmeldung mit Papierstruktur im Mittel #f1f1f1) */
:root { --f-header-grund: var(--f-n200); }
:root:has(.contact-hero, .groups-page, .events-page, .blog-post) { --f-header-grund: var(--f-n100); }
:root:has(.login-hero) { --f-header-grund: #f1f1f1; }
.f-header__flaeche {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--f-header-kompakt);
  background: var(--f-header-grund);
  border-bottom: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow: 0 6px 24px rgba(10, 10, 10, 0.06);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.48s var(--f-header-ease),
    opacity 0.3s ease 0.08s;
}
.f-header__inner {
  position: relative;
  transition: transform 0.48s var(--f-header-ease);
}
.f-header__logo {
  position: relative;
  transform-origin: left center;
  transition: transform 0.48s var(--f-header-ease);
}
.f-header__logo img { transition: opacity 0.4s ease; }
.f-header__logo .f-header__logo-hell { position: absolute; inset: 0; }
.f-header--light .f-header__logo-dunkel,
.f-header--dark .f-header__logo-hell { opacity: 0; }
.f-header--gescrollt .f-header__flaeche {
  transform: none;
  opacity: 1;
  transition:
    transform 0.48s var(--f-header-ease),
    opacity 0.2s ease;
}
/* Innenseiten: Fläche von Anfang an da (gleiche Farbe wie der Seitengrund), ohne Schatten. Ungescrollt so hoch
   wie der ganze Header, damit Logo und Navigation mittig sitzen; beim Scrollen schrumpft sie mit dem Inhalt auf
   die kompakte Höhe. Die feine Linie trennt erst beim Scrollen. */
.f-header--ohne-balken .f-header__flaeche {
  height: 100%;
  transform: none;
  opacity: 1;
  box-shadow: none;
  border-bottom-color: transparent;
  transition: height 0.48s var(--f-header-ease);
}
.f-header--ohne-balken.f-header--gescrollt .f-header__flaeche { height: var(--f-header-kompakt); border-bottom-color: rgba(10, 10, 10, 0.06); }
/* Ab 2560px (Ultrawide): Fläche läuft randlos, Logo/Nav stehen mittig in 1440px (wie .f-container) */
@media (min-width: 2560px) {
  .f-header__inner { max-width: 1440px; margin-inline: auto; }
}
/* (106 − 84) / 2 = 11px nach oben: Inhalt sitzt mittig in der kompakten Fläche */
.f-header--gescrollt .f-header__inner { transform: translateY(-11px); }
.f-header--gescrollt .f-header__logo { transform: scale(0.9); }
/* Farbwechsel von Nav und Button nur während des Umschaltens weich (Hover bleibt unberührt) */
.f-header--wechsel .f-nav > li > a,
.f-header--wechsel .f-nav__drop > button { transition: color 0.4s ease; }
.f-header--wechsel .f-header__cta {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .f-header__flaeche,
  .f-header--gescrollt .f-header__flaeche { transform: none; transition: opacity 0.15s linear; }
  .f-header--ohne-balken .f-header__flaeche { transition: none; }
  .f-header__inner,
  .f-header__logo { transition: none; }
  .f-header--gescrollt .f-header__inner,
  .f-header--gescrollt .f-header__logo { transform: none; }
  .f-header__logo img { transition-duration: 0.15s; }
  .f-header--wechsel .f-nav > li > a,
  .f-header--wechsel .f-nav__drop > button,
  .f-header--wechsel .f-header__cta { transition-duration: 0.15s; }
}

/* Partner-Logo hinter dem Kirchenlogo (z. B. JG auf /jg), dazwischen eine Trennlinie */
.f-header__marken { display: flex; align-items: center; gap: 18px; flex: none; }
.f-header__trenner { width: 1px; height: 36px; background: currentColor; opacity: 0.35; }
.f-header--light .f-header__trenner { color: #fff; }
.f-header__partner { display: inline-flex; align-items: center; gap: 10px; height: 66px; text-decoration: none; }
/* Ausschnitt aus einem Logo-Bild (Header, Footer): --x/--y/--b/--h in Bildpixeln (Originalbreite --w), angezeigt in --hoehe */
.f-ausschnitt {
  --hoehe: 58px;
  --s: calc(var(--hoehe) / var(--h));
  position: relative;
  display: block;
  width: calc(var(--b) * var(--s));
  height: var(--hoehe);
  overflow: hidden;
}
.f-ausschnitt .f-ausschnitt__bild {
  position: absolute;
  left: calc(var(--x) * var(--s) * -1);
  top: calc(var(--y) * var(--s) * -1);
  width: calc(var(--w) * var(--s));
  height: auto;
  max-width: none;
}

.f-header__partner-platzhalter {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border: 1.5px dashed #e6b64a;
  border-radius: 6px;
  color: #e6b64a;
  font: 900 12px/1 var(--f-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .f-header__trenner,
  .f-header__partner { display: none; }
}

/* Logo-Kachel statt Foto auf Karten (app/gruppen/_karte.tsx, JG): Grund im Stil des Logos, Logo mittig ganz sichtbar.
   Ausschnitt aus dem 1080er Logo-Bild wie im Hero von /jg (Kreuz, Schrift, Schwung: x 40 bis 1040, y 150 bis 810). */
.logo-kachel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, #4a484e 0%, #34333a 45%, #232428 100%);
  container-type: inline-size;
}
.logo-kachel__logo { position: relative; width: min(82%, 520px); aspect-ratio: 1000 / 660; overflow: hidden; }
.f-page img.logo-kachel__bild {
  position: absolute;
  left: -4%;
  top: -22.727%;
  width: 108%;
  max-width: none;
  height: auto;
}
/* Rahmen mit Bildfiltern (Youth) um die Kachel: ohne Filter, damit das Gold nicht grau wird */
*:has(> .logo-kachel) { filter: none; }

/* Satzteil, der nie umbrechen soll (z. B. „Schau bald wieder vorbei!“ als eigene Zeile) */
.zusammen { white-space: nowrap; }
/* In den großen Gruppenkarten (Titel unten): Logo oben und etwas kleiner, damit der Titel frei bleibt */
.f-ministry-card .logo-kachel { place-items: start center; padding-top: 9%; }
.f-ministry-card .logo-kachel__logo { width: min(62%, 420px); }

/* Kontrast: Auf dunklem Grund behalten Schreibschrift und Akzentzahlen das helle Gold (--f-accent),
   auf hellem Grund gilt --f-accent-text. Neue dunkle Abschnitte hier ergänzen. */
.f-dark,
.f-footer,
.f-mobile-menu,
.f-cta,
.f-seitenkopf,
.home-hero,
.home-mitarbeiten,
.home-pastors,
.events-hero,
.blog-hero,
.groups-hero,
.donate-hero,
.board-hero,
.kat-ablauf,
.kat-passt__karte--dunkel,
.about-objective,
.about-location,
.leitbild-zitat,
.board-teaser-section,
.verein-psalm,
.verein-projekte,
.verein-kontakt,
.chronik-glocken,
.chronik-bilder,
.forms-kopf,
.contact-loc,
.notfound-hero { --f-script-farbe: var(--f-accent); }

/* Ganzes Bild ohne Anschnitt mit verschwommenem Hintergrund aus demselben Bild (components/ui/GanzesBild.tsx) */
.f-media > img.f-bild-hintergrund,
img.f-bild-hintergrund {
  object-fit: cover;
  filter: blur(28px) saturate(1.15) brightness(0.9);
  transform: scale(1.25);
}
.f-media > img.f-bild-ganz,
img.f-bild-ganz { object-fit: contain !important; }

/* Bankverbindung mit Kopieren-Knöpfen (components/ui/KopierZeile.tsx): Bezeichnung links, Wert rechts; schmal untereinander */
.f-kopier-liste { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; font-size: var(--f-t200-size); line-height: var(--f-t200-lh); text-align: left; }
.f-kopier { display: contents; }
.f-kopier dt { font-weight: 900; color: var(--f-n800); }
.f-kopier dd { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--f-n800); overflow-wrap: anywhere; }
.f-kopier__knopf { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--f-n600); cursor: pointer; }
.f-kopier__knopf:hover { color: var(--f-n800); background: var(--f-n200); }
.f-kopier__knopf:focus-visible { outline: 2.5px solid var(--f-accent); outline-offset: 1px; }
.f-kopier__knopf--ok { color: #1f7a3d; }
@media (max-width: 600px) {
  .f-kopier-liste { grid-template-columns: 1fr; gap: 0; }
  .f-kopier dd { margin-bottom: 10px; }
}