/*
Theme Name: Gemeindebüro Online
Description: Das übersichtliche und anpassbare Theme für das digitale Gemeindebüro einer oder mehrerer kooperierender Kirchengemeinden. Startseite mit frei belegbaren Sektionen (Gemeindeverbund, Anliegen, Angebote, Kalender, Kontakt). Erweiterbar durch ein schlankes Basismodul für Termine (Datum, Ort, Kurzbeschreibung). Optional erweiterbar um ein ausführliches Terminmanagement (Kategorien, Serientermine, Anmeldung), Ansprechpartner (DSG-EKD-konformer Einwilligungs-Workflow), verwaltete Orte, Bescheinigungen und Kasualanfragen.
Version: 2.6.2
Author: theoloog.de
Author URI: https://theoloog.de/gemeindebuero-online/
Tags: Kirchengemeinde, Gemeindeverbund, Kalender, Terminverwaltung, Ansprechpartner, Non-Profit, DSGVO, editierbare Startseite, Individuelle Farben, Individuelles Logo, Stilvarianten, erweiterbar durch zugeschnittene Plugins
Text Domain: gemeindebuero-theme
Requires at least: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ── Farbsystem ── */
:root {
    --green:  #4A7C59;   /* Akzentfarbe Gemeinde/Anliegen 1 */
    --teal:   #2A7F7F;   /* Akzentfarbe Gemeinde/Anliegen 2 */
    --navy:   #1E3A5F;   /* Akzentfarbe Gemeinde/Anliegen 3 + Markenfarbe */
    --terra:  #C4714A;   /* Akzentfarbe Gemeinde/Anliegen 4 */
    --gold:   #D4A847;   /* Einheit / Akzente – nie als Text auf Weiß */
    --cream:  #F5F0E8;
    --dark:   #1E2A35;
    --mid:    #5A6A78;
    --light:  #EAF0F0;

    /* Schriften – werden vom gewählten Design-Schema überschrieben */
    --schrift-titel: 'Merriweather', Georgia, serif;
    --schrift-text: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ── Schriften: lokal gehostet (DSGVO), mit System-Ersatz ──
   Die Font-Dateien gehören nach assets/fonts/ (siehe README).
   Solange sie fehlen, greifen automatisch die Ersatzschriften. */
@font-face {
    font-family: 'Merriweather';
    src: url('assets/fonts/merriweather-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Merriweather';
    src: url('assets/fonts/merriweather-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Merriweather';
    src: url('assets/fonts/merriweather-400italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('assets/fonts/nunito-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('assets/fonts/nunito-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--schrift-text);
    background: #fff;
    color: var(--dark);
    font-size: 17px;
    line-height: 1.65;
}

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

/* ── Skip-Link: unsichtbar bis zum Tastaturfokus, dann oben links sichtbar
   (WCAG 2.4.1 Bypass Blocks) — überspringt Logo/Navigation, Ziel ist der
   Anker #hauptinhalt direkt nach dem Header (siehe header.php). */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--navy);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 6px 0;
}
.skip-link:focus {
    left: 0;
}

/* Nur für Screenreader sichtbar, visuell ausgeblendet. */
.ist-nur-vorlesbar {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── HEADER ── */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 2px solid var(--cream);
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 40px;
    box-shadow: 0 2px 12px rgba(30,42,53,0.07);
}

.logo-wrap { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.logo-svg,
.logo-bild { width: 54px; height: 54px; flex-shrink: 0; object-fit: contain; }
.logo-text { line-height: 1.2; }
.logo-text strong {
    display: block;
    font-family: var(--schrift-titel);
    font-size: 15px;
    color: var(--navy);
    font-weight: 700;
}
.logo-text span {
    font-size: 12px;
    color: var(--mid);
    font-weight: 400;
    letter-spacing: 0.03em;
}

.site-nav { display: flex; gap: 28px; align-items: center; }
.site-nav ul { display: flex; gap: 28px; align-items: center; list-style: none; }
.site-nav a {
    text-decoration: none;
    color: var(--mid);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
}
.site-nav a:hover { color: var(--teal); }
.nav-cta, .site-nav .nav-cta a, .site-nav li.nav-cta a {
    background: var(--teal);
    color: #fff !important;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: background .2s !important;
}
.nav-cta:hover, .site-nav li.nav-cta a:hover { background: var(--navy) !important; color: #fff !important; }
/* Schnellzugang in der Kopfzeile (z. B. Gemeindeamt: Anfragen, Neuer Termin) */
.site-nav a.nav-aktionslink {
    border: 1.5px solid var(--gold);
    color: var(--navy);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}
.site-nav a.nav-aktionslink:hover { background: var(--gold); color: var(--navy); }

/* Menü-Knopf: nur unter 640px sichtbar (siehe Media Query unten), auf dem
   Desktop bleibt .site-nav wie gehabt immer offen. */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1.5px solid var(--light);
    border-radius: 8px;
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
}
.nav-toggle:hover { border-color: var(--teal); }
.nav-toggle-strich,
.nav-toggle-strich::before,
.nav-toggle-strich::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--navy);
    border-radius: 1px;
}
.nav-toggle-strich { position: relative; }
.nav-toggle-strich::before,
.nav-toggle-strich::after { content: ""; position: absolute; left: 0; }
.nav-toggle-strich::before { top: -6px; }
.nav-toggle-strich::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-text::after { content: " schließen"; }

/* ── Willkommen: persönliche Startseite für Mitarbeitende ([gbo_willkommen]) ──
   Jede Regel beginnt mit .gbo-willkommen, damit sie die allgemeinen
   Unterseiten-Regeln (.seiten-inhalt h2/h3/p/ul/a, weiter unten in dieser
   Datei) sicher schlägt — sonst gewönne bei gleicher Spezifität die später
   notierte Regel und der Gruß stünde dunkel auf dunklem Grund. */
.gbo-willkommen .gbo-willkommen-kopf {
    background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
    color: #fff;
    border-radius: 12px;
    padding: 28px 32px;
}
.gbo-willkommen .gbo-willkommen-kopf h2 {
    margin: 0;
    color: #fff;
    font-family: var(--schrift-titel);
}
.gbo-willkommen .gbo-willkommen-rolle {
    margin: 6px 0 0;
    font-size: 15px;
    color: #fff;
    opacity: .85;
}
.gbo-willkommen .gbo-willkommen-gemeinde::before { content: '·'; margin: 0 8px; }
/* „Heute" — der erste Blick am Morgen. Bewusst schmal und ohne Farbe:
   Er sortiert den Tag, er alarmiert nicht. Der Goldbalken links bindet ihn
   an den Kopf darüber, ohne mit den Kacheln darunter zu konkurrieren. */
.gbo-willkommen .gbo-willkommen-heute {
    margin: 22px 0 0;
    padding: 16px 20px;
    border-left: 3px solid var(--gold);
    background: rgba(0, 0, 0, .03);
    border-radius: 0 8px 8px 0;
}
.gbo-willkommen .gbo-willkommen-heute h3 {
    margin: 0 0 8px;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}
.gbo-willkommen .gbo-willkommen-heute ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gbo-willkommen .gbo-willkommen-heute li { line-height: 1.45; }
.gbo-willkommen .gbo-willkommen-heute a {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid transparent;
}
.gbo-willkommen .gbo-willkommen-heute a:hover,
.gbo-willkommen .gbo-willkommen-heute a:focus-visible { border-bottom-color: currentColor; }

.gbo-willkommen .gbo-willkommen-schnellzugriff {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 28px;
}
.gbo-willkommen a.gbo-willkommen-knopf {
    display: inline-block;
    border: 1.5px solid var(--gold);
    color: var(--navy);
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.gbo-willkommen a.gbo-willkommen-knopf:hover { background: var(--gold); color: var(--navy); }
.gbo-willkommen .gbo-willkommen-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.gbo-willkommen .gbo-willkommen-karte {
    background: #fff;
    border: 1px solid var(--light);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(30, 42, 53, 0.06);
}
.gbo-willkommen .gbo-willkommen-karte h3 {
    margin: 0 0 14px;
    font-size: 17px;
    color: var(--navy);
}
.gbo-willkommen .gbo-willkommen-liste { list-style: none; margin: 0; padding: 0; }
.gbo-willkommen .gbo-willkommen-liste li {
    padding: 9px 0;
    margin: 0;
    border-top: 1px solid var(--light);
}
.gbo-willkommen .gbo-willkommen-liste li:first-child { border-top: none; }
.gbo-willkommen .gbo-willkommen-datum {
    display: block;
    font-size: 13px;
    color: var(--mid);
}
.gbo-willkommen .gbo-willkommen-zahl {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--terra);
}
.gbo-willkommen .gbo-willkommen-leer { margin: 4px 0 0; color: var(--mid); font-size: 14px; }
.gbo-willkommen.gbo-willkommen-anmelden { text-align: center; padding: 40px 0; }

/* Zwei-Zahlen-Kachel (z. B. Urlaubstage: Anspruch/Genommen nebeneinander) */
.gbo-willkommen .gbo-willkommen-urlaub-zahlen { display: flex; gap: 28px; }
.gbo-willkommen .gbo-willkommen-zahl-klein { font-size: 28px; }

/* Karte „Wartet auf jemanden": offene Anfragen aus dem Kontaktformular.
   Über die volle Breite, weil je Zeile ein Knopf danebensteht. */
.gbo-willkommen .gbo-willkommen-karte-weit { grid-column: 1 / -1; }
.gbo-willkommen .gbo-willkommen-anfragen li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 0;
}
.gbo-willkommen .gbo-willkommen-anfragen li strong { flex: 1; min-width: 160px; color: var(--navy); }
.gbo-willkommen .gbo-willkommen-anfragen .gbo-willkommen-datum { min-width: 190px; }
.gbo-willkommen .gbo-willkommen-gemeindemarke {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 99px;
    background: var(--light);
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
}
.gbo-willkommen .gbo-willkommen-gemeindemarke.ist-gemeinsam { background: var(--gold); }
/* Vertretung: „Ich bin vom … bis … vertreten durch …" — eine Angabe, keine
   Meldung, deshalb ohne Signalfarbe. */
.gbo-willkommen-vertretung {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--light);
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
}
.gbo-vertretung-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px;
}
.gbo-vertretung-form label {
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
}
.gbo-vertretung-form select,
.gbo-vertretung-form input[type="date"] {
    padding: 8px 10px;
    border: 1px solid #c9d3d3;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--dark);
    background: #fff;
}
.gbo-vertretung-form .gbo-willkommen-leer { flex-basis: 100%; margin: 0; }

.gbo-willkommen .gbo-anf-uebernehmen { margin: 0; }
.gbo-willkommen .gbo-anf-uebernehmen-knopf {
    border: 1.5px solid var(--teal);
    background: none;
    color: var(--teal);
    padding: 8px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.gbo-willkommen .gbo-anf-uebernehmen-knopf:hover { background: var(--teal); color: #fff; }

/* ── Kontaktformular ([gbo_kontakt], Kontakt-Abschnitt der Startseite) ── */
.gbo-kontakt {
    max-width: 720px;
    margin: 38px auto 0;
    text-align: left;
}
.gbo-kontakt .gbo-kontakt-titel {
    font-family: var(--schrift-titel);
    font-size: 21px;
    color: var(--navy);
    margin: 0 0 16px;
}
/* Kommt jemand über den „Ich habe Interesse"-Knopf einer Gruppenkarte
   herein, steht das hier — der Beweis, dass die richtige Gruppe ankam,
   bevor überhaupt ein Formularfeld folgt. */
.gbo-kontakt .gbo-kontakt-gruppen-hinweis {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--cream, #f8f5ee);
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
}
.gbo-kontakt .gbo-kontakt-form {
    background: #fff;
    border: 1px solid var(--light);
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 2px 14px rgba(30, 42, 53, 0.07);
}
.gbo-kontakt .gbo-kontakt-feld { margin: 0 0 16px; }
.gbo-kontakt label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 5px;
}
/* Eine Definition für BEIDE Anfrage-Formulare: das öffentliche
   Kontaktformular (.gbo-kontakt) und das interne Protokoll-Formular
   (.gbo-anf-wrap, Shortcode [gbo_anfragen]). Letzteres hatte bisher gar
   keine Gestaltung und lief auf Browser-Vorgaben — was bei Textfeldern
   kaum, bei Auswahlfeldern sofort auffällt. Zwei getrennte Definitionen
   liefen unweigerlich auseinander, deshalb hier zusammengefasst. */
.gbo-kontakt input[type="text"],
.gbo-kontakt input[type="email"],
.gbo-kontakt input[type="tel"],
.gbo-kontakt select,
.gbo-kontakt textarea,
.gbo-anf-wrap input[type="text"],
.gbo-anf-wrap input[type="email"],
.gbo-anf-wrap input[type="tel"],
.gbo-anf-wrap input[type="date"],
.gbo-anf-wrap select,
.gbo-anf-wrap textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c9d3d3;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    color: var(--dark);
    background: #fff;
}
.gbo-kontakt textarea,
.gbo-anf-wrap textarea { resize: vertical; }
.gbo-kontakt input:focus,
.gbo-kontakt select:focus,
.gbo-kontakt textarea:focus,
.gbo-anf-wrap input:focus,
.gbo-anf-wrap select:focus,
.gbo-anf-wrap textarea:focus {
    outline: 3px solid var(--gold);
    outline-offset: 1px;
    border-color: var(--teal);
}

/* Beschriftungen im internen Formular: dieselbe Größe wie im öffentlichen,
   statt der überlebensgroßen Vorgabe des Fließtextes. */
.gbo-anf-wrap label > strong,
.gbo-anf-wrap p > strong {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 5px;
}
.gbo-anf-wrap .description {
    font-size: 14px;
    color: var(--mid);
    line-height: 1.45;
}
/* Auswahl per Radio/Checkbox bleibt in Zeilenhöhe — sie ist keine Eingabe,
   die eine Kastenbreite braucht. */
.gbo-anf-wrap input[type="radio"],
.gbo-anf-wrap input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
}
.gbo-anf-wrap label {
    display: block;
    margin-bottom: 4px;
}
/* Ein Datum ist so breit wie ein Datum. */
.gbo-anf-wrap input[type="date"] { max-width: 220px; }
.gbo-kontakt .gbo-kontakt-pflicht { color: var(--terra); }
.gbo-kontakt .gbo-kontakt-optional { font-weight: 400; color: var(--mid); }
.gbo-kontakt .gbo-kontakt-hilfe {
    display: block;
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--mid);
    font-weight: 400;
}
.gbo-kontakt .gbo-kontakt-erreichbar {
    border: 1px solid var(--light);
    border-radius: 10px;
    padding: 14px 16px 2px;
    margin: 0 0 16px;
}
.gbo-kontakt .gbo-kontakt-erreichbar legend {
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    padding: 0 6px;
}
.gbo-kontakt .gbo-kontakt-erreichbar .gbo-kontakt-hilfe { margin: 0 0 10px; }
.gbo-kontakt .gbo-kontakt-zweispaltig {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 20px;
}
/* Honigtopf: für Menschen unsichtbar, aber nicht display:none — manche Bots
   überspringen ausgeblendete Felder gezielt. */
.gbo-kontakt .gbo-kontakt-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.gbo-kontakt .gbo-kontakt-hinweis {
    font-size: 13.5px;
    color: var(--mid);
    margin: 4px 0 18px;
}
.gbo-kontakt .gbo-kontakt-absenden { margin: 0; }
.gbo-kontakt .gbo-kontakt-knopf {
    background: var(--navy);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 13px 28px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.gbo-kontakt .gbo-kontakt-knopf:hover { background: var(--teal); }
.gbo-kontakt .gbo-kontakt-danke,
.gbo-kontakt .gbo-kontakt-fehler {
    border-radius: 12px;
    padding: 20px 24px;
    margin: 0 0 18px;
}
.gbo-kontakt .gbo-kontakt-danke { background: #EAF3EC; border: 1px solid var(--green); color: var(--dark); }
.gbo-kontakt .gbo-kontakt-danke p:last-child { margin-bottom: 0; }
.gbo-kontakt .gbo-kontakt-fehler { background: #FBEDE7; border: 1px solid var(--terra); color: var(--dark); }
.gbo-kontakt .gbo-kontakt-adresse {
    margin: 16px 0 0;
    font-size: 14.5px;
    color: var(--mid);
}

/* ── Willkommen: Ablauf als Flussdiagramm (inc/willkommen-ablauf.php) ──
   Senkrechte Linie durch alle Schritte, die Nummernkreise sitzen darauf.
   Die Linie liegt hinter den Kreisen (z-index), damit sie nicht durch sie
   hindurchscheint. */
.gbo-ablauf { margin: 34px 0 0; }
.gbo-ablauf .gbo-ablauf-hinweis {
    margin: 0 0 18px;
    color: var(--mid);
    font-size: 14px;
}
.gbo-ablauf .gbo-ablauf-liste {
    list-style: none;
    margin: 0;
    padding: 0 0 0 56px;
    position: relative;
}
.gbo-ablauf .gbo-ablauf-liste::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 12px;
    bottom: 24px;
    width: 2px;
    background: var(--light);
}
.gbo-ablauf .gbo-ablauf-schritt {
    position: relative;
    margin: 0 0 14px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--light);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(30, 42, 53, 0.06);
}
.gbo-ablauf .gbo-ablauf-schritt.ist-offen {
    border-color: var(--teal);
    box-shadow: 0 4px 20px rgba(30, 42, 53, 0.12);
}
.gbo-ablauf .gbo-ablauf-kopf {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 16px 20px;
    background: none;
    border: 0;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font-family: var(--schrift-titel);
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
}
.gbo-ablauf .gbo-ablauf-kopf:hover .gbo-ablauf-titel { color: var(--teal); }
.gbo-ablauf .gbo-ablauf-kopf:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gbo-ablauf .gbo-ablauf-nummer {
    position: absolute;
    left: -56px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--light);
    color: var(--mid);
    font-family: var(--schrift-text);
    font-size: 17px;
    font-weight: 700;
}
.gbo-ablauf .gbo-ablauf-schritt.ist-offen .gbo-ablauf-nummer {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.gbo-ablauf .gbo-ablauf-titel { flex: 1; }
.gbo-ablauf .gbo-ablauf-pfeil {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-right: 2.5px solid var(--mid);
    border-bottom: 2.5px solid var(--mid);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .2s;
}
.gbo-ablauf .gbo-ablauf-schritt.ist-offen .gbo-ablauf-pfeil {
    border-color: var(--navy);
    transform: rotate(225deg) translate(-3px, -3px);
}
.gbo-ablauf .gbo-ablauf-inhalt { padding: 0 20px 4px; }
.gbo-ablauf .gbo-ablauf-inhalt[hidden] { display: none; }
.gbo-ablauf .gbo-ablauf-text > *:first-child { margin-top: 0; }
.gbo-ablauf .gbo-ablauf-text h3 {
    margin: 22px 0 8px;
    font-size: 17px;
    color: var(--teal);
}
.gbo-ablauf .gbo-ablauf-weiter {
    margin: 18px 0 0;
    padding: 14px 0 18px;
    border-top: 1px solid var(--light);
}
.gbo-ablauf .gbo-ablauf-weiter-knopf {
    display: inline-block;
    max-width: 100%;
    border: 1.5px solid var(--gold);
    background: none;
    color: var(--navy);
    padding: 10px 20px;
    border-radius: 8px;
    font-family: var(--schrift-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.gbo-ablauf .gbo-ablauf-weiter-knopf:hover { background: var(--gold); color: var(--navy); }
.gbo-ablauf .gbo-ablauf-weiter-knopf--zurueck { border-color: var(--light); color: var(--mid); }
.gbo-ablauf .gbo-ablauf-weiter-knopf--zurueck:hover { background: var(--light); color: var(--navy); }

@media (max-width: 640px) {
    .gbo-ablauf .gbo-ablauf-liste { padding-left: 40px; }
    .gbo-ablauf .gbo-ablauf-liste::before { left: 15px; }
    .gbo-ablauf .gbo-ablauf-nummer { left: -40px; width: 32px; height: 32px; font-size: 14px; }
    .gbo-ablauf .gbo-ablauf-kopf { font-size: 17px; padding: 14px 16px; gap: 10px; }
    .gbo-ablauf .gbo-ablauf-inhalt { padding: 0 16px 4px; }
}

@media print {
    .gbo-ablauf .gbo-ablauf-inhalt { display: block !important; }
    .gbo-ablauf .gbo-ablauf-weiter,
    .gbo-ablauf .gbo-ablauf-pfeil,
    .gbo-ablauf .gbo-ablauf-hinweis { display: none; }
}

/* ── HERO (Startseite) ── */
.hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
    color: #fff;
    padding: 80px 40px 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-bild {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.hero-bild.ist-aktiv { opacity: var(--hero-deckkraft, 1); }
@media (prefers-reduced-motion: reduce) {
    .hero-bild { transition: none; }
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 70% 50%, rgba(212,168,71,0.18) 0%, transparent 65%);
    pointer-events: none;
}
.hero-badge {
    display: inline-block;
    background: rgba(212,168,71,0.25);
    border: 1px solid rgba(212,168,71,0.5);
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 20px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}
.hero h1 {
    font-family: var(--schrift-titel);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.25;
    max-width: 680px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.hero h1 em {
    font-style: normal;
    color: var(--gold);
}
.hero p {
    font-size: 18px;
    max-width: 560px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 40px;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}
/* Ausrichtung: Badge-Zeile bis Beschreibungstext (eigene Auswahl je
   Startseiten-Einstellung, unabhängig von den Buttons darunter). Textschatten
   läuft dagegen als Inline-Style (siehe go_hero_schatten_style()), weil
   seine Stärke stufenlos einstellbar ist, nicht nur an/aus. */
.hero-text-links { align-self: flex-start; text-align: left; }
.hero-text-zentriert { align-self: center; text-align: center; }
.hero-text-rechts { align-self: flex-end; text-align: right; }

.contact-bar { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 2; }
.hero-buttons-links { align-self: flex-start; justify-content: flex-start; }
.hero-buttons-zentriert { align-self: center; justify-content: center; }
.hero-buttons-rechts { align-self: flex-end; justify-content: flex-end; }
.contact-btn {
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    color: var(--navy);
    padding: 14px 26px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.contact-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.contact-btn .icon { font-size: 20px; }
.contact-btn.gold { background: var(--gold); color: #fff; }

/* ── UNDER CONSTRUCTION (Baustellen-Hinweis) ── */
.underconstruction {
    padding: 48px 20px;
    text-align: center;
    background: #fff;
}

.underconstruction img {
    max-width: 620px;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.underconstruction p {
    max-width: 620px;
    margin: 18px auto 0;
    font-size: 1.1em;
    color: var(--mid);
}

/* ── PROMISE STRIP ── */
.promise {
    padding: 28px 40px;
    text-align: center;
    font-size: 17px;
    color: var(--navy);
    font-family: var(--schrift-titel);
}
.promise strong { font-style: normal; color: var(--teal); }
/* Wrapper für den Inhalts-Scroll-Effekt (siehe .lr-inhalt-parallax/-flip
   weiter unten) — braucht display:inline-block, damit rotateY/translateY
   sauber wirken statt sich wie bei einer normalen Inline-Box zu verhalten. */
.promise-inhalt { display: inline-block; }

/* ── SEKTIONEN ── */
.section-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 10px;
}
.section-title {
    font-family: var(--schrift-titel);
    font-size: clamp(22px, 3vw, 34px);
    color: var(--navy);
    margin-bottom: 12px;
    font-weight: 700;
}
.section-sub {
    color: var(--mid);
    font-size: 16px;
    max-width: 580px;
    margin-bottom: 48px;
}

/* ── LEISTUNGEN ── */
.leistungen { padding: 72px 40px; }
.leistungen-inner { max-width: 1100px; margin: 0 auto; }
.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
.leistung-card {
    background: #fff;
    border: 1.5px solid var(--cream);
    border-radius: 16px;
    padding: 28px 24px;
    transition: box-shadow .2s, border-color .2s, transform .2s;
    position: relative;
    overflow: hidden;
}
.leistung-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--accent, var(--teal));
    border-radius: 16px 16px 0 0;
}
.leistung-card:hover {
    box-shadow: 0 8px 32px rgba(30,58,95,0.10);
    border-color: var(--accent, var(--teal));
    transform: translateY(-3px);
}
.leistung-icon { font-size: 32px; margin-bottom: 14px; display: block; }
.leistung-card h3 {
    font-family: var(--schrift-titel);
    font-size: 16px;
    color: var(--navy);
    margin-bottom: 8px;
    font-weight: 700;
}
.leistung-card p { font-size: 14px; color: var(--mid); line-height: 1.6; }

/* ── ZIELGRUPPEN ── */
.zielgruppen { padding: 72px 40px; }
.zielgruppen-inner { max-width: 1100px; margin: 0 auto; }
.zg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.zg-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(30,58,95,0.06);
    transition: transform .2s;
}
.zg-card:hover { transform: translateY(-4px); }
.zg-emoji { font-size: 42px; display: block; margin-bottom: 14px; }
.zg-card h3 { font-family: var(--schrift-titel); font-size: 15px; color: var(--navy); margin-bottom: 8px; }
.zg-card p { font-size: 13px; color: var(--mid); }

/* ── KIRCHPLATZ ONLINE (Neuigkeiten-Feed + App-Vorstellung, Plugin "Gemeindebüro PWA") ── */
.kirchplatz { padding: 72px 40px; }
.kirchplatz-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}
.kirchplatz-hauptspalte { min-width: 0; }
.kirchplatz-app-karte {
    background: #fff;
    border: 1.5px solid var(--cream);
    border-radius: 20px;
    padding: 32px 26px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(30, 42, 53, 0.06);
}
.kirchplatz-app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.kirchplatz-app-icon-bildschirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--light);
    padding: 10px;
    box-shadow: inset 0 0 0 1.5px var(--cream);
}
.kirchplatz-app-icon-bildschirm .logo-bild { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.kirchplatz-app-icon-schritte { font-size: 14px; color: var(--mid); }
.kirchplatz-app-titel {
    font-family: var(--schrift-titel);
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin: 4px 0 4px;
}
.kirchplatz-app-slogan { font-size: 14px; font-weight: 600; color: var(--teal); margin-bottom: 14px; }
.kirchplatz-app-text { font-size: 14px; color: var(--mid); line-height: 1.6; margin-bottom: 22px; }
.kirchplatz-app-button {
    display: inline-block;
    background: var(--gold);
    color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.kirchplatz-app-button:hover { opacity: 0.9; }
/* Zweiter Knopf ("So installierst du die App") tritt neben dem Haupt-Knopf
   ("App jetzt öffnen") bewusst zurück — beide gleich auffällig zu machen,
   nähme der Karte die klare Handlungsaufforderung. */
.kirchplatz-app-button.ist-zweitrangig {
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--navy);
    margin-top: 8px;
}
@media (max-width: 900px) {
    .kirchplatz-inner { grid-template-columns: 1fr; }
}

/* ── TERMINE (Startseiten-Sektion, Daten aus dem Termin-Plugin) ── */
.termine-start { padding: 72px 40px; }
.termine-start-inner { max-width: 1100px; margin: 0 auto; }
.termine-start .lr-termine { text-align: left; }
.termine-alle-link {
    display: inline-block;
    margin-top: 24px;
    background: var(--gold);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 12px;
    transition: transform .2s, box-shadow .2s;
}
.termine-alle-link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); color: #fff; }

/* ── AKZENTFARBEN (für Kacheln und Gemeinde-Chips, als CSS-Klasse wählbar) ── */
.accent-gruen  { --accent: #4A7C59; }
.accent-petrol { --accent: #2A7F7F; }
.accent-navy   { --accent: #1E3A5F; }
.accent-terra  { --accent: #C4714A; }
.accent-gold   { --accent: #D4A847; }

/* ── EXTRA (Block-Inhalt einer frei gewählten Seite) ──
   padding-top/-bottom kommen als Inline-Style (frei wählbar in den Theme-
   Einstellungen); hier nur die feste Seitenrandbreite und die Breiten-Variante. */
.frei-bereich { padding-left: 40px; padding-right: 40px; }
.frei-bereich-inner { max-width: 1100px; margin: 0 auto; }
.frei-bereich.voll { padding-left: 0; padding-right: 0; }
.frei-bereich.voll .frei-bereich-inner { max-width: none; }
/* "Ganze Breite": normale (nicht extra ausgerichtete) Bilder/Videos füllen automatisch die volle Breite. */
.frei-bereich.voll .frei-bereich-inner > .wp-block-image,
.frei-bereich.voll .frei-bereich-inner > .wp-block-cover,
.frei-bereich.voll .frei-bereich-inner > .wp-block-embed,
.frei-bereich.voll .frei-bereich-inner > img { width: 100%; }
.frei-bereich.voll .frei-bereich-inner > .wp-block-image img { width: 100%; height: auto; display: block; }

/* ── GEMEINDEN ── */
.gemeinden { padding: 64px 40px; }
.gemeinden-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.gemeinden-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.gemeinde-chip {
    display: inline-flex; align-items: center; gap: 10px;
    border: 2px solid var(--accent, var(--navy));
    color: var(--accent, var(--navy));
    border-radius: 40px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    transition: background .2s, color .2s;
    cursor: default;
}
.gemeinde-chip::before {
    content: '';
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent, var(--navy));
    flex-shrink: 0;
}
.gemeinde-chip .dot { display: none; }

/* ── KONTAKT ── */
.kontakt { background: var(--navy); color: #fff; padding: 80px 40px; text-align: center; }
.kontakt h2 {
    font-family: var(--schrift-titel);
    font-size: clamp(22px, 3vw, 34px);
    margin-bottom: 14px;
}
.kontakt h2 em { font-style: normal; color: var(--gold); }
.kontakt > p { color: rgba(255,255,255,0.75); font-size: 17px; max-width: 520px; margin: 0 auto 40px; }
.kontakt-cards { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.kontakt-card {
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 28px 36px;
    min-width: 220px;
    transition: background .2s;
}
.kontakt-card:hover { background: rgba(255,255,255,0.12); }
.kontakt-card .k-icon { font-size: 28px; margin-bottom: 10px; }
.kontakt-card .k-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 6px; }
.kontakt-card .k-value { font-size: 16px; font-weight: 600; }
.kontakt-card .k-hinweis { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 6px; }
.kontakt-card a { color: #fff; text-decoration: none; }

/* ── UNTERSEITEN ── */
.seiten-kopf {
    background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
    color: #fff;
    padding: 48px 40px;
    text-align: center;
}

/* Titelzeile mit Beitragsbild (z. B. bei Terminen) – Bild unverfälscht,
   Textschatten hält die Überschrift auf hellen Bildern lesbar */
.seiten-kopf-bild {
    background-size: cover;
    background-position: center;
    padding: 96px 40px;
}
.seiten-kopf-bild h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.4);
}

/* Titelzeile mit HOCHFORMATIGEM Beitragsbild – das Motiv wird ganz gezeigt
   statt beschnitten (siehe Begründung in single.php). Der Farbverlauf von
   .seiten-kopf bleibt als Rahmen stehen. Am Handy untereinander, ab
   Tablet-Breite nebeneinander. */
.seiten-kopf-hochbild {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 24px;
}
.seiten-kopf-motiv {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 380px);  /* am Rechner nicht ausufernd breit */
    max-height: 65vh;             /* am Handy nicht bildschirmfüllend */
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
@media (min-width: 900px) {
    .seiten-kopf-hochbild {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
        text-align: left;
    }
    .seiten-kopf-hochbild h1 {
        flex: 0 1 460px;
    }
}
.seiten-kopf h1 {
    font-family: var(--schrift-titel);
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 700;
}
.seiten-inhalt {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 24px 72px;
}
.seiten-inhalt h2, .seiten-inhalt h3 {
    font-family: var(--schrift-titel);
    color: var(--navy);
    margin: 1.4em 0 0.5em;
}
.seiten-inhalt p, .seiten-inhalt ul, .seiten-inhalt ol { margin-bottom: 1em; }
.seiten-inhalt ul, .seiten-inhalt ol { padding-left: 1.4em; }
.seiten-inhalt a { color: var(--teal); }
.seiten-inhalt .wp-block-image { margin: 1.5em 0; }

/* Beitragslisten (Blog/Archive) */
.beitrags-liste { display: grid; gap: 20px; }
.beitrags-karte {
    background: #fff;
    border: 1.5px solid var(--cream);
    border-radius: 16px;
    padding: 24px 26px;
    transition: box-shadow .2s;
}
.beitrags-karte:hover { box-shadow: 0 8px 32px rgba(30,58,95,0.10); }
.beitrags-karte h2 { font-size: 20px; margin: 0 0 6px; }
.beitrags-karte h2 a { color: var(--navy); text-decoration: none; font-family: var(--schrift-titel); }
.beitrags-karte .beitrags-datum { font-size: 13px; color: var(--mid); margin-bottom: 8px; }
.beitrags-karte p { color: var(--mid); font-size: 15px; }

/* ── FOOTER ── */
.site-footer {
    background: #111820;
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 28px 40px;
    font-size: 13px;
    /* Schmaler Balken in der Akzentfarbe am Seitenende
       (folgt dem gewählten Design-Schema bzw. der eigenen Akzentfarbe) */
    border-top: 5px solid var(--gold);
}
.site-footer a { color: var(--gold); text-decoration: none; }
.site-footer ul { list-style: none; display: inline-flex; gap: 6px; }
.site-footer li + li::before { content: '·'; margin-right: 6px; color: rgba(255,255,255,0.5); }

.nach-oben {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: background .2s, transform .2s;
}
.nach-oben:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── EDITIERBARE STARTSEITE (Block-Versionen der Sektionen) ──
   Diese Regeln sorgen dafür, dass die Sektionen auch als
   Gutenberg-Blöcke (Seite "Startseite") genauso aussehen. */

.hero p { position: relative; }

/* Buttons im Hero und in Sektionen */
.wp-block-buttons.contact-bar { gap: 16px; justify-content: center; position: relative; }
.contact-bar .wp-block-button__link {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff;
    color: var(--navy);
    padding: 14px 26px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.contact-bar .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.wp-block-button.gold .wp-block-button__link { background: var(--gold); color: #fff; }
.termine-start .wp-block-buttons { margin-top: 24px; }
.termine-start .wp-block-button__link {
    border-radius: 12px;
    font-weight: 600;
    padding: 12px 26px;
    text-decoration: none;
}

/* Kachel-Raster als Block-Gruppen */
.wp-block-group.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
.wp-block-group.zg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.leistung-card p.leistung-icon,
.zg-card p.zg-emoji { margin: 0 0 14px; }
.leistung-card h3.wp-block-heading {
    font-family: var(--schrift-titel);
    font-size: 16px;
    color: var(--navy);
    margin: 0 0 8px;
    font-weight: 700;
}
.zg-card h3.wp-block-heading {
    font-family: var(--schrift-titel);
    font-size: 15px;
    color: var(--navy);
    margin: 0 0 8px;
}

/* Zielgruppen-Sektion ohne Innen-Wrapper (Block-Version) */
.wp-block-group.zielgruppen > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* Kontakt-Sektion als Blöcke */
.kontakt .section-title { color: #fff; }
.kontakt-card p { margin: 0; }
.kontakt-card p.k-icon { font-size: 28px; margin-bottom: 10px; }
.kontakt-card p.k-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 6px; }
.kontakt-card p.k-value { font-size: 16px; font-weight: 600; color: #fff; }

/* Versprechen-Streifen als Block */
.wp-block-group.promise p { margin: 0; }

/* ── TERMIN-EINZELSEITE: Anfahrt, Anmeldung, interner Bereich (Feinschliff) ── */
.seiten-inhalt .lr-anfahrt-fotos {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.seiten-inhalt .lr-anfahrt-fotos img.lr-anfahrt-foto {
    width: 180px;
    height: 130px;
    object-fit: cover;
    border-radius: 10px;
    border: 1.5px solid var(--cream);
    transition: transform .2s, box-shadow .2s;
}

.seiten-inhalt .lr-anfahrt-fotos a:hover img.lr-anfahrt-foto {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(30, 58, 95, 0.18);
}

.seiten-inhalt .lr-badge-bf {
    display: inline-block;
    background: var(--light);
    border: 1px solid var(--teal);
    color: var(--navy);
    border-radius: 999px;
    padding: 3px 14px;
    font-size: 0.9em;
    font-weight: 600;
}

.seiten-inhalt .lr-anmeldung {
    border: 1.5px solid var(--teal);
    background: var(--light);
    border-radius: 14px;
}

.seiten-inhalt .lr-anmeldung h2 {
    font-family: var(--schrift-titel);
    color: var(--navy);
}

.seiten-inhalt .lr-anmeldung .lr-button {
    background: var(--gold);
    border-radius: 10px;
    font-weight: 600;
}

.seiten-inhalt .lr-intern-kasten {
    border: 2px dashed var(--terra);
    background: #FBF4EF;
    border-radius: 14px;
    position: relative;
}

.seiten-inhalt .lr-intern-kasten::before {
    content: 'INTERN';
    position: absolute;
    top: -11px;
    left: 18px;
    background: var(--terra);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 12px;
    border-radius: 999px;
}

.seiten-inhalt .lr-intern-kasten h2 {
    font-family: var(--schrift-titel);
    color: var(--terra);
}

.seiten-inhalt .lr-anmeldeliste li {
    margin-left: 1.2em;
}

/* ── VERLINKTE KACHELN UND CHIPS ── */
a.leistung-card,
a.zg-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.leistung-card h3, a.zg-card h3 { text-decoration: none; }
a.gemeinde-chip { text-decoration: none; cursor: pointer; }
a.gemeinde-chip:hover { background: var(--accent, var(--navy)); color: #fff; }
a.gemeinde-chip:hover::before { background: #fff; }

/* ── SPALTENWAHL (Customizer: 1 bis 4 Spalten je Abschnitt) ── */
@media (min-width: 641px) {
    .spalten-1 .leistungen-grid,
    .spalten-1 .zg-grid,
    .spalten-1 .lr-termine,
    .spalten-1 .kontakt-cards { display: grid; grid-template-columns: 1fr; }

    .spalten-2 .leistungen-grid,
    .spalten-2 .zg-grid,
    .spalten-2 .lr-termine,
    .spalten-2 .kontakt-cards { display: grid; grid-template-columns: repeat(2, 1fr); }

    .spalten-3 .leistungen-grid,
    .spalten-3 .zg-grid,
    .spalten-3 .lr-termine,
    .spalten-3 .kontakt-cards { display: grid; grid-template-columns: repeat(3, 1fr); }

    .spalten-4 .leistungen-grid,
    .spalten-4 .zg-grid,
    .spalten-4 .lr-termine,
    .spalten-4 .kontakt-cards { display: grid; grid-template-columns: repeat(4, 1fr); }

    .spalten-1 .kontakt-cards,
    .spalten-2 .kontakt-cards,
    .spalten-3 .kontakt-cards,
    .spalten-4 .kontakt-cards { gap: 20px; max-width: 900px; margin: 0 auto; }

    /* Terminkarten in Mehrspalten-Ansicht kompakter */
    .spalten-2 .lr-termine .lr-termin,
    .spalten-3 .lr-termine .lr-termin,
    .spalten-4 .lr-termine .lr-termin { align-items: flex-start; }
}

@media (max-width: 640px) {
    /* Auf dem Smartphone immer einspaltig, egal welche Einstellung */
    .spalten-2 .leistungen-grid, .spalten-3 .leistungen-grid, .spalten-4 .leistungen-grid,
    .spalten-2 .zg-grid, .spalten-3 .zg-grid, .spalten-4 .zg-grid,
    .spalten-2 .lr-termine, .spalten-3 .lr-termine, .spalten-4 .lr-termine,
    .spalten-2 .kontakt-cards, .spalten-3 .kontakt-cards, .spalten-4 .kontakt-cards { grid-template-columns: 1fr; }
}

/* ── MOBIL ── */
@media (max-width: 640px) {
    .site-header { padding: 12px 20px; flex-wrap: wrap; }
    .nav-toggle { display: inline-flex; }
    .site-nav {
        display: none;
        width: 100%;
        order: 3;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--light);
    }
    .site-nav.ist-offen { display: flex; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 4px; }
    .site-nav a { padding: 10px 4px; }
    .nav-cta, .site-nav .nav-cta a, .site-nav li.nav-cta a,
    .site-nav a.nav-aktionslink { text-align: center; }
    .hero, .leistungen, .zielgruppen, .kontakt, .gemeinden, .frei-bereich, .termine-start, .kirchplatz { padding-left: 20px; padding-right: 20px; }
    .contact-btn { width: 100%; justify-content: center; }
}

/* ── SEITENSPALTEN (Terminsuche + optional Kalender-Rubrik) ── */

/* Terminsuche (/termine/): Hauptspalte + optionale Seitenspalte */
.seiten-mit-sidebar {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}
.seiten-mit-sidebar.ohne-seitenspalte { display: block; max-width: 820px; padding: 0; }
.seiten-mit-sidebar .seiten-inhalt-haupt { max-width: none; padding: 48px 0 72px; margin: 0; }

/* Kalender-Rubrik der Startseite mit Schalter "Mit Seitenspalte anzeigen" */
.termine-start-inner.hat-seitenspalte {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}
.termine-start-inner.hat-seitenspalte .termine-start-hauptspalte { min-width: 0; }

/* Widget-Karten in beiden Seitenspalten – einheitliches, "schönes" Aussehen */
.seiten-sidebar, .termine-start-seitenspalte {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 48px;
}
.sidebar-widget {
    background: #fff;
    border: 1.5px solid var(--cream);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(30, 42, 53, 0.06);
}
.sidebar-widget-titel {
    font-family: var(--schrift-titel);
    color: var(--navy);
    font-size: 18px;
    margin: 0 0 12px;
}
.sidebar-widget:first-child { margin-top: 0; }

@media (max-width: 900px) {
    .seiten-mit-sidebar,
    .termine-start-inner.hat-seitenspalte { grid-template-columns: 1fr; }
    .seiten-sidebar, .termine-start-seitenspalte { padding-top: 0; }
}

/* Belegungsplan-Kalender ([lr_belegungsplan]) in einer schmalen Seitenspalte:
   das 7-Tage-Wochenraster ist fürs volle Seitenmaß gebaut, deutlich
   kompakter statt zeichenweise umbrechender Einträge. !important nötig,
   weil das Plugin sein CSS als <style>-Block direkt beim Shortcode
   ausgibt – der steht im Dokument später als dieses Stylesheet und würde
   bei gleicher Spezifität sonst gewinnen. */
.seiten-sidebar .lr-belegungsplan,
.termine-start-seitenspalte .lr-belegungsplan,
.seiten-sidebar .lrtw-bel-tabelle,
.termine-start-seitenspalte .lrtw-bel-tabelle {
    font-size: 9px !important;
}
.seiten-sidebar .lr-belegungsplan th,
.termine-start-seitenspalte .lr-belegungsplan th,
.seiten-sidebar .lrtw-bel-tabelle th,
.termine-start-seitenspalte .lrtw-bel-tabelle th {
    padding: 2px !important;
    font-size: 9px !important;
}
.seiten-sidebar .lr-belegungsplan td,
.termine-start-seitenspalte .lr-belegungsplan td,
.seiten-sidebar .lrtw-bel-tabelle td,
.termine-start-seitenspalte .lrtw-bel-tabelle td {
    height: 46px !important;
    padding: 2px 3px !important;
}
.seiten-sidebar .lr-bel-tag,
.termine-start-seitenspalte .lr-bel-tag,
.seiten-sidebar .lrtw-bel-tag,
.termine-start-seitenspalte .lrtw-bel-tag {
    font-size: 9px !important;
}
.seiten-sidebar .lr-bel-eintrag,
.termine-start-seitenspalte .lr-bel-eintrag,
.seiten-sidebar .lrtw-bel-eintrag,
.termine-start-seitenspalte .lrtw-bel-eintrag {
    padding: 1px 2px !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.seiten-sidebar .lr-bel-raum,
.termine-start-seitenspalte .lr-bel-raum,
.seiten-sidebar .lrtw-bel-raum,
.termine-start-seitenspalte .lrtw-bel-raum {
    display: none !important; /* zu wenig Platz für die Raum-Zeile */
}
.seiten-sidebar .lr-bel-kopf,
.termine-start-seitenspalte .lr-bel-kopf {
    font-size: 12px !important;
}
.seiten-sidebar .lr-bel-kopf h2,
.termine-start-seitenspalte .lr-bel-kopf h2 {
    font-size: 13px !important;
}
.seiten-sidebar .lrtw-bel-nav,
.termine-start-seitenspalte .lrtw-bel-nav {
    font-size: 11px !important;
    margin: 0 0 8px !important;
}
.seiten-sidebar .lrtw-titel,
.termine-start-seitenspalte .lrtw-titel {
    font-size: 14px !important;
}

/* ── Hintergrundbilder der Startseiten-Abschnitte ──
   Negativer z-index statt Positionierung des normalen Seiteninhalts (wie
   beim Hero-Bild, siehe .hero-bild oben): ein Element mit negativem
   z-index malt VOR dem statischen Fließtext-Inhalt seines Elternelements,
   aber NACH dessen eigenem Hintergrund (CSS-Stapelreihenfolge). Dadurch
   braucht keines der bestehenden Inhaltselemente in den sieben Abschnitten
   eine eigene Positionierung — nur der Abschnitt selbst (.lr-hat-bild)
   und das Bild ändern sich. Wichtig: z-index:0 auf .lr-hat-bild ist nötig,
   damit der Abschnitt selbst einen eigenen Stapelkontext bildet — sonst
   rutscht das negative z-index des Bildes bis unter den gesamten
   Seiteninhalt statt nur innerhalb dieses Abschnitts nach hinten. */
.lr-hat-bild { position: relative; z-index: 0; overflow: hidden; }
.lr-sektion-bild {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: var(--lr-deckkraft, 1);
    pointer-events: none;
}

/* Parallax: JS (lr-scroll-effekte.js) setzt "transform" passend zur
   Scrollposition; das Bild ist etwas größer als sein Rahmen, damit beim
   Verschieben nirgends eine Kante sichtbar wird. */
.lr-sektion-bild.lr-parallax {
    height: 130%;
    top: -15%;
    will-change: transform;
}

/* Flip: startet gedreht/unsichtbar, dreht sich beim ersten Erscheinen im
   Sichtbereich einmalig ein (lr-scroll-effekte.js setzt "ist-sichtbar"
   über IntersectionObserver) und bleibt danach im Ruhezustand stehen.
   Rotation und Stauchung skalieren mit --lr-staerke (0..1, Vorgabe 0.5 —
   bei 0.5 ergibt sich exakt die alte feste Rotation/Stauchung, siehe
   Effektstärke-Feld im Customizer). */
.lr-sektion-bild.lr-flip {
    opacity: 0;
    transform: perspective(1200px)
        rotateY(calc(var(--lr-staerke, 0.5) * -70deg))
        scale(calc(1 - (var(--lr-staerke, 0.5) * 0.16)));
    transition: transform .9s cubic-bezier(.2,.7,.3,1), opacity .9s ease;
}
.lr-sektion-bild.lr-flip.ist-sichtbar {
    opacity: var(--lr-deckkraft, 1);
    transform: none;
}

/* ── Effekt auf den Inhalt statt das Hintergrundbild (Feld "Effekt anwenden
   auf" im Customizer) ── Der Inhalt bleibt im normalen Textfluss — anders
   als beim Bild keine Positionierung, keine Übergröße/Überstand nötig, nur
   Verschiebung (Parallax, per JS) bzw. Drehung (Flip). */
.lr-inhalt-parallax { will-change: transform; }
.lr-inhalt-flip {
    opacity: 0;
    transform: perspective(1200px)
        rotateY(calc(var(--lr-staerke, 0.5) * -70deg))
        scale(calc(1 - (var(--lr-staerke, 0.5) * 0.16)));
    transition: transform .9s cubic-bezier(.2,.7,.3,1), opacity .9s ease;
}
.lr-inhalt-flip.ist-sichtbar {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .lr-sektion-bild.lr-parallax,
    .lr-inhalt-parallax { transform: none !important; }
    .lr-sektion-bild.lr-flip,
    .lr-inhalt-flip {
        transition: none;
        opacity: var(--lr-deckkraft, 1);
        transform: none;
    }
}

/* ── Ansprechperson am Termin (Termine Pro) ──────────────────────────
   Das Foto steht nur hier, wenn die Person der Veröffentlichung
   zugestimmt hat UND es am Termin nicht abgewählt wurde — beides
   entscheidet PHP, das Stylesheet macht daraus nur eine Zeile. */
.gbo-kalx-kontakt {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.gbo-kalx-kontakt-bild {
    flex: 0 0 auto;
}

.gbo-kalx-kontakt-foto {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
}

.gbo-kalx-kontakt-text {
    flex: 1 1 240px;
    min-width: 0;
}

.gbo-kalx-kontakt-text p {
    margin: 0 0 6px;
}

.gbo-kalx-kontakt-weg {
    font-size: .9em;
    opacity: .75;
}