/*
Theme Name: St. Johanni Bruderschaft Senden
Theme URI: https://johanni-senden.de
Author: St. Johanni Bruderschaft Senden von 1602 e.V.
Author URI: https://johanni-senden.de
Description: Individuelles WordPress-Theme fuer die St. Johanni Bruderschaft Senden von 1602 e.V. Traditionell-heraldisches Design in Dunkelgruen und Gold, mit Custom Post Types fuer Termine, Aktuelles, Galerie, Koenigspaare, Vorstand und Sponsoren.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: johanni-senden
*/

/* =========================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================= */
:root {
  /* Farben */
  --sv-green-dark:    #1c2e22; /* Nav / Footer / dunkle Sections */
  --sv-green-mid:     #2d4a34; /* Akzent-Hintergruende, CTAs, Headings */
  --sv-green-accent:  #3a5c42; /* Eyebrow-Labels, Links auf hellem Grund */
  --sv-gold:          #c9a860; /* CTA-Buttons, Trennlinien, Akzente */
  --sv-gold-mid:      #b99a5e; /* Offiziere-Avatare etc. */
  --sv-cream:         #faf9f6; /* Seitenhintergrund */
  --sv-cream-alt:     #efece5; /* Abwechselnder Section-Hintergrund */
  --sv-footer-dark:   #182219; /* dunkelster Footer-Ton */
  --sv-text:          #3d3a2f; /* Fliesstext dunkel */
  --sv-text-muted:    #5f5a4a; /* Fliesstext gedaempft */
  --sv-border:        #e0ddd3; /* Kartenrahmen hell */
  --sv-white:         #ffffff;

  /* Typografie */
  --sv-font-display: 'Cormorant Garamond', Georgia, serif;
  --sv-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Abstaende */
  --sv-section-pad-y: 96px;
  --sv-section-pad-y-sm: 80px;
  --sv-section-pad-x: 56px;
  --sv-max-width: 1440px;
  --sv-max-width-text: 900px;
  --sv-radius: 4px;
  --sv-radius-lg: 8px;
}

/* =========================================================
   2. RESET & BASICS
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Sicherheitsnetz gegen horizontales Verschieben/Abschneiden auf schmalen
   Bildschirmen, falls trotz der Breakpoints unten irgendwo ein Element
   minimal breiter als der Viewport wird (z. B. durch lange, nicht
   umbrechende Wörter). Kein Ersatz für die gezielten Fixes weiter unten,
   sondern zusätzliche Absicherung. */
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--sv-cream);
  color: var(--sv-text);
  font-family: var(--sv-font-body);
  font-size: 16px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sv-green-mid); }
h1, h2, h3, h4 { font-family: var(--sv-font-display); font-weight: 600; margin: 0; color: var(--sv-green-dark); }
p { margin: 0 0 16px; }
ul { margin: 0; padding: 0; list-style: none; }
input, select, textarea, button { font-family: var(--sv-font-body); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--sv-gold); color: var(--sv-green-dark); padding: 12px 20px; z-index: 10000; font-weight: 700; }
.skip-link:focus { left: 10px; top: 10px; }

/* =========================================================
   3. LAYOUT HELPERS
   ========================================================= */
.sv-container { max-width: var(--sv-max-width); margin: 0 auto; padding-left: var(--sv-section-pad-x); padding-right: var(--sv-section-pad-x); }
.sv-container--text { max-width: var(--sv-max-width-text); }
.sv-container--narrow { max-width: 900px; }
.sv-section { padding: var(--sv-section-pad-y) var(--sv-section-pad-x); }
.sv-section--sm { padding: var(--sv-section-pad-y-sm) var(--sv-section-pad-x); }
.sv-section--dark { background: var(--sv-green-dark); }
.sv-section--mid { background: var(--sv-green-mid); }
.sv-section--alt { background: var(--sv-cream-alt); }
.sv-section--center { text-align: center; }
.sv-grid { display: grid; gap: 28px; }
.sv-grid--2 { grid-template-columns: 1fr 1fr; }
.sv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sv-grid--5 { grid-template-columns: repeat(5, 1fr); }
.sv-grid--6 { grid-template-columns: repeat(6, 1fr); }

.sv-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-green-accent); margin-bottom: 12px; }
.sv-eyebrow--on-dark { color: var(--sv-gold); }
.sv-heading-hero { font-size: 56px; font-weight: 700; line-height: 1.08; }
.sv-heading-lg { font-size: 38px; font-weight: 600; }
.sv-heading-md { font-size: 28px; font-weight: 600; }
.sv-heading-sm { font-size: 22px; font-weight: 600; }
.sv-lede { font-size: 17px; line-height: 1.8; color: var(--sv-text-muted); }
@media (min-width: 900px) { .sv-heading-hero { font-size: 64px; } }

.sv-section-head { text-align: center; margin-bottom: 56px; }
.sv-divider-gold { width: 60px; height: 2px; background: var(--sv-gold); margin: 0 auto 22px; }
.sv-divider-gold--left { margin-left: 0; }


.sv-breadcrumb { padding: 56px; background: var(--sv-green-dark); text-align: center; }
.sv-breadcrumb__path { font-size: 13px; color: var(--sv-gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.sv-breadcrumb__path a { color: var(--sv-gold); }
.sv-breadcrumb__title { font-family: var(--sv-font-display); font-size: 44px; font-weight: 600; color: var(--sv-white); }
.sv-breadcrumb__sub { font-size: 17px; color: #e7e3d6; margin-top: 10px; }
@media (max-width: 700px) {
  .sv-breadcrumb { padding: 40px 24px; }
  .sv-breadcrumb__title { font-size: 30px; }
}

/* =========================================================
   4. BUTTONS & LINKS
   ========================================================= */
.sv-btn { display: inline-block; font-weight: 700; font-size: 15px; padding: 15px 30px; border-radius: 3px; border: none; cursor: pointer; transition: filter .15s ease, background-color .15s ease; }
.sv-btn:hover { filter: brightness(1.08); color: inherit; }
.sv-btn--gold { background: var(--sv-gold); color: var(--sv-green-dark); }
.sv-btn--dark { background: var(--sv-green-mid); color: var(--sv-white); }
.sv-btn--outline { background: transparent; border: 1.5px solid rgba(255,255,255,0.6); color: var(--sv-white); }
.sv-link-underline { font-size: 15px; font-weight: 600; color: var(--sv-green-mid); border-bottom: 1.5px solid var(--sv-gold); padding-bottom: 2px; }
.sv-link-underline--on-dark { color: var(--sv-gold); }

/* =========================================================
   5. HEADER / NAVIGATION
   ========================================================= */
.sv-header { font-family: var(--sv-font-body); position: relative; z-index: 100; }
.sv-header__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 12px 24px; min-height: 76px; background: var(--sv-green-dark); border-bottom: 3px solid var(--sv-gold); }
.sv-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sv-brand__mark { width: 55px; height: 64px; background: var(--sv-gold); clip-path: polygon(50% 0%,100% 15%,100% 60%,50% 100%,0% 60%,0% 15%); display: flex; align-items: center; justify-content: center; font-family: var(--sv-font-display); font-weight: 700; color: var(--sv-green-dark); font-size: 19px; flex-shrink: 0; }
/* Hochgeladenes Logo (Design > Customizer > Website-Identität) im Header
   immer auf Kopfzeilen-Höhe begrenzen, unabhängig von der Originalgröße
   der hochgeladenen Datei. */
.sv-brand .custom-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.sv-brand img.custom-logo { height: 64px; width: auto; max-width: 230px; max-height: 64px; object-fit: contain; }
@media (max-width: 640px) { .sv-brand img.custom-logo { height: 52px; max-height: 52px; } }
/* .sv-brand ist ein <div>, keine <a> mehr (verschachtelte <a>-Tags sind
   ungueltiges HTML und wurden vom Browser beim Parsen wieder auseinander-
   gerissen, wodurch die Groessenbegrenzung oben ins Leere lief). Die beiden
   Teilbereiche (Logo/Kuerzel, Textblock) sind stattdessen einzeln in eigene,
   nicht verschachtelte <a>-Elemente gepackt; display:contents sorgt dafuer,
   dass diese Links selbst keine eigene Box erzeugen und das Flex-Layout von
   .sv-brand unveraendert bleibt. */
.sv-brand__mark-link, .sv-brand__text-link { display: contents; color: inherit; text-decoration: none; }
.sv-brand__name { font-family: var(--sv-font-display); font-size: 16px; font-weight: 600; color: #fff; line-height: 1.1; white-space: nowrap; }
.sv-brand__tag { font-size: 9px; letter-spacing: 0.1em; color: var(--sv-gold); text-transform: uppercase; }
/* Der Vereinsname ist als "white-space:nowrap" gesetzt (soll auf Desktop
   nicht mitten im Wort umbrechen) UND ".sv-brand" hat "flex-shrink:0" –
   diese Kombination kann bei einem langen Vereinsnamen auf sehr schmalen
   Bildschirmen dazu führen, dass der Textblock schmaler als sein Inhalt
   nicht werden kann und dadurch über den Bildschirmrand hinausragt
   ("abgeschnitten" wirkt bzw. horizontales Scrollen erzwingt). Ab 640px
   darf der Text daher umbrechen und schrumpfen; unter 400px wird er ganz
   ausgeblendet – das Logo allein reicht dort als Absender. */
@media (max-width: 640px) {
  .sv-brand { flex-shrink: 1; min-width: 0; }
  .sv-brand__name, .sv-brand__tag { white-space: normal; }
}
@media (max-width: 400px) {
  .sv-brand__text-link { display: none; }
}

.sv-nav { display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 14px; font-size: 12.5px; font-weight: 600; color: #e5e2d5; letter-spacing: 0.01em; align-items: center; flex: 1 1 auto; justify-content: center; min-width: 0; }
.sv-nav ul { display: contents; }
.sv-nav li { position: relative; }
.sv-nav a { white-space: nowrap; color: #e5e2d5; padding: 6px 2px; display: inline-block; }
.sv-nav a:hover, .sv-nav .current-menu-item > a, .sv-nav .current-menu-parent > a, .sv-nav .current-menu-ancestor > a { color: var(--sv-gold); }
.sv-nav .menu-item-has-children > a::after { content: ''; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 6px; }
.sv-nav .sub-menu { display: none; position: absolute; top: 28px; left: 0; background: #fff; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.3); border-radius: 4px; padding: 8px 0; min-width: 230px; z-index: 200; }
.sv-nav li:hover > .sub-menu, .sv-nav li.sv-open > .sub-menu, .sv-nav li:focus-within > .sub-menu { display: block; }
.sv-nav .sub-menu a { display: block; padding: 10px 20px; color: var(--sv-green-dark); font-size: 14px; font-weight: 500; white-space: normal; }
.sv-nav .sub-menu a:hover { color: var(--sv-green-mid); background: var(--sv-cream-alt); }
.sv-nav li.sv-align-right .sub-menu { left: auto; right: 0; }

.sv-header__cta { background: var(--sv-gold); color: var(--sv-green-dark); font-weight: 700; font-size: 12.5px; padding: 9px 16px; border-radius: 3px; letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; }

.sv-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: transparent; border: none; cursor: pointer; padding: 0; }
.sv-nav-toggle span { display: block; height: 2px; width: 100%; background: #fff; }

@media (max-width: 980px) {
  .sv-nav-toggle { display: flex; }
  .sv-nav { display: none; flex-basis: 100%; justify-content: flex-start; flex-direction: column; align-items: stretch; background: var(--sv-green-dark); padding: 8px 0 16px; }
  .sv-nav.sv-nav--open { display: flex; }
  .sv-nav li { width: 100%; }
  /* white-space:normal (statt nowrap wie im Desktop-Hover-Menü): ein langer
     Menüpunkt-Text darf hier umbrechen, statt über den Bildschirmrand
     hinauszuragen und dadurch horizontal abgeschnitten zu wirken. */
  .sv-nav a { padding: 10px 4px; width: 100%; white-space: normal; }
  .sv-nav .sub-menu { position: static; box-shadow: none; background: rgba(255,255,255,0.04); min-width: 0; display: none; border-radius: 0; }
  .sv-nav li.sv-open > .sub-menu { display: block; }
  .sv-nav .sub-menu a { color: #e5e2d5; }
  .sv-nav .menu-item-has-children > a::after { float: right; margin-top: 6px; }
}

/* =========================================================
   6. HERO
   ========================================================= */
.sv-hero { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.sv-hero--placeholder { background-image: repeating-linear-gradient(135deg, var(--sv-green-mid), var(--sv-green-mid) 22px, #263f2c 22px, #263f2c 44px); }
.sv-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,20,0.35), rgba(15,20,15,0.65)); }
.sv-hero__content { position: relative; text-align: center; max-width: 760px; padding: 40px 24px; }
.sv-hero__content .sv-btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.sv-hero--sm { min-height: 420px; }
/* Wappenvogel-Icon oberhalb des goldenen Trennstrichs, mit "Glaseffekt"
   (Deckkraft < 100%). Größe und Deckkraft sind über Design > Customizer >
   Logo-Größen & Effekt einstellbar – diese Werte hier sind nur der
   Standard/Fallback, siehe sv_output_dynamic_logo_css() in inc/customizer.php. */
.sv-hero__vogel { display: block; width: 90px; height: 90px; object-fit: contain; margin: 0 auto 20px; opacity: 0.55; }
@media (max-width: 700px) { .sv-hero__vogel { width: 60px; height: 60px; margin-bottom: 14px; } }

/* =========================================================
   7. PHOTO PLACEHOLDER (solange keine echten Fotos vorliegen)
   ========================================================= */
.sv-photo-placeholder { background-image: repeating-linear-gradient(45deg, var(--sv-border), var(--sv-border) 14px, #d7d3c6 14px, #d7d3c6 28px); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 12px; color: var(--sv-text-muted); text-align: center; padding: 8px; }
.sv-media { position: relative; overflow: hidden; border-radius: var(--sv-radius); }
.sv-media img { width: 100%; height: 100%; object-fit: cover; }
.sv-media--round { border-radius: 50%; }

/* =========================================================
   8. CARDS
   ========================================================= */
.sv-card { background: #fff; border: 1px solid var(--sv-border); border-radius: var(--sv-radius); overflow: hidden; }
.sv-card__body { padding: 22px; }
.sv-card__date { font-size: 12px; color: var(--sv-green-accent); font-weight: 600; margin-bottom: 8px; }
.sv-card__title { font-size: 17px; font-weight: 600; color: var(--sv-green-dark); margin-bottom: 8px; }
.sv-card__excerpt { font-size: 14px; color: var(--sv-text-muted); line-height: 1.6; }

.sv-event-card { background: #27362c; border: 1px solid #3b4f40; padding: 32px; border-radius: var(--sv-radius); }
.sv-event-card__day { font-family: var(--sv-font-display); font-size: 44px; font-weight: 700; color: var(--sv-gold); line-height: 1; }
.sv-event-card__month { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #d9d5c7; margin: 6px 0 14px; }
.sv-event-card__title { font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.sv-event-card__desc { font-size: 14px; color: #d9d5c7; line-height: 1.6; }

.sv-event-row { display: flex; align-items: center; gap: 28px; background: #fff; border: 1px solid var(--sv-border); padding: 26px 32px; border-radius: var(--sv-radius); }
.sv-event-row__date { width: 76px; text-align: center; flex-shrink: 0; border-right: 1px solid var(--sv-cream-alt); padding-right: 20px; }
.sv-event-row__day { font-family: var(--sv-font-display); font-size: 30px; font-weight: 700; color: var(--sv-green-mid); }
.sv-event-row__month { font-size: 11px; text-transform: uppercase; color: var(--sv-text-muted); }
.sv-event-row__title { font-size: 18px; font-weight: 600; color: var(--sv-green-dark); }
.sv-event-row__desc { font-size: 14px; color: var(--sv-text-muted); margin-top: 4px; }
@media (max-width: 480px) {
  .sv-event-row { padding: 18px; gap: 16px; }
  .sv-event-row__date { width: 54px; padding-right: 14px; }
  .sv-event-row__day { font-size: 24px; }
}

.sv-news-row { display: grid; grid-template-columns: 280px 1fr; gap: 28px; background: #fff; border: 1px solid var(--sv-border); border-radius: var(--sv-radius); overflow: hidden; }
.sv-news-row .sv-media { height: 100%; min-height: 180px; }
.sv-news-row__body { padding: 24px 24px 24px 0; }
@media (max-width: 700px) { .sv-news-row { grid-template-columns: 1fr; } .sv-news-row .sv-media { min-height: 160px; } .sv-news-row__body { padding: 0 20px 20px; } }

/* People / Vorstand */
.sv-person { text-align: center; }
.sv-person__photo { width: 110px; height: 110px; border-radius: 50%; background: var(--sv-green-mid); margin: 0 auto 16px; overflow: hidden; }
.sv-person__photo--sm { width: 96px; height: 96px; }
.sv-person__photo--gold { background: var(--sv-gold-mid); }
.sv-person__name { font-weight: 600; color: var(--sv-green-dark); font-size: 16px; }
.sv-person__role { font-size: 13px; color: var(--sv-green-accent); margin-top: 2px; }

.sv-committee-card { background: var(--sv-cream-alt); padding: 24px; border-radius: 6px; }
.sv-committee-card__title { font-weight: 600; color: var(--sv-green-dark); font-size: 15px; }
.sv-committee-card__desc { font-size: 14px; color: var(--sv-text-muted); margin-top: 6px; }

/* Gruppenfoto-Karte (Darstellung "Gruppe" bei Vorstand/Komitee-Einträgen) */
.sv-groupcard { grid-column: span 2; }
.sv-groupcard__photo { aspect-ratio: 640 / 420; border-radius: 6px; overflow: hidden; background: var(--sv-green-mid); }
.sv-groupcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-groupcard__title { font-weight: 600; color: var(--sv-green-dark); font-size: 16px; margin-top: 12px; }
.sv-groupcard__desc { font-size: 14px; color: var(--sv-text-muted); margin-top: 4px; }

/* Stats */
.sv-stats { display: flex; gap: 36px; margin-top: 28px; flex-wrap: wrap; }
.sv-stat__num { font-family: var(--sv-font-display); font-size: 32px; font-weight: 700; color: var(--sv-green-mid); }
.sv-stat__label { font-size: 13px; color: var(--sv-text-muted); }

/* Sponsors */
.sv-sponsor-tile { background: #fff; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-lg); padding: 24px; display: flex; align-items: center; justify-content: center; height: 100px; }
.sv-sponsor-tile--lg { height: 140px; padding: 40px; }
.sv-sponsor-tile img { max-height: 100%; width: auto; }

/* Gallery */
.sv-gallery-filters { display: flex; gap: 12px; justify-content: center; margin-bottom: 48px; flex-wrap: wrap; }
.sv-chip { padding: 10px 20px; background: var(--sv-cream-alt); color: var(--sv-text); border: none; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sv-font-body); }
.sv-chip.is-active, .sv-chip:hover { background: var(--sv-green-mid); color: #fff; }
.sv-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sv-gallery-item { display: block; height: 220px; border-radius: 6px; overflow: hidden; cursor: pointer; }
.sv-gallery-item.is-hidden { display: none; }
.sv-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sv-gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 980px) { .sv-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Galerie-Lightbox (Bild-Popup, siehe assets/js/main.js: initGalleryLightbox) */
.sv-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(20, 24, 20, .92); align-items: center; justify-content: center; }
.sv-lightbox.is-open { display: flex; }
body.sv-lightbox-open { overflow: hidden; }
.sv-lightbox__stage { max-width: 90vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; }
.sv-lightbox__img { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.sv-lightbox__caption { color: #f1efe6; font-size: 14px; margin-top: 14px; text-align: center; max-width: 70vw; }
.sv-lightbox__counter { color: rgba(241,239,230,.6); font-size: 12px; margin-top: 6px; }
.sv-lightbox__btn { position: absolute; background: transparent; border: none; color: #f1efe6; cursor: pointer; line-height: 1; }
.sv-lightbox__close { top: 20px; right: 24px; font-size: 36px; }
.sv-lightbox__prev, .sv-lightbox__next { top: 50%; transform: translateY(-50%); font-size: 52px; padding: 0 16px; }
.sv-lightbox__prev { left: 12px; }
.sv-lightbox__next { right: 12px; }
.sv-lightbox__btn:hover { color: var(--sv-gold); }
@media (max-width: 700px) {
	.sv-lightbox__prev, .sv-lightbox__next { font-size: 36px; padding: 0 8px; }
	.sv-lightbox__close { top: 12px; right: 16px; font-size: 30px; }
}

/* Table (Koenigspaare) */
.sv-table { display: flex; flex-direction: column; border: 1px solid var(--sv-border); border-radius: 6px; overflow: hidden; }
.sv-table__row { display: grid; grid-template-columns: 120px 1fr; padding: 20px 28px; border-top: 1px solid var(--sv-cream-alt); }
@media (max-width: 480px) { .sv-table__row { grid-template-columns: 64px 1fr; padding: 14px 16px; gap: 8px; } }
.sv-table__row:first-child { border-top: none; }
.sv-table__row--head { background: var(--sv-green-mid); }
.sv-table__row--head div { font-weight: 700; color: #fff; font-size: 14px; }
.sv-table__row:hover:not(.sv-table__row--head) { background: var(--sv-cream-alt); }
.sv-table__year { font-family: var(--sv-font-display); font-weight: 700; color: var(--sv-green-mid); font-size: 17px; }
.sv-table__value { font-size: 15px; color: #4a453a; }
.sv-typ-badge { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 10px; background: var(--sv-cream-alt); color: var(--sv-green-accent); font-size: 12px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; }

/* Timeline */
.sv-timeline { display: flex; flex-direction: column; gap: 28px; border-left: 3px solid var(--sv-gold); padding-left: 28px; margin-top: 56px; }
.sv-timeline__year { font-family: var(--sv-font-display); font-size: 24px; font-weight: 700; color: var(--sv-green-mid); }
.sv-timeline__text { font-size: 15px; color: var(--sv-text-muted); }

/* Statute */

/* =========================================================
   9. FORMS
   ========================================================= */
.sv-form-panel { background: #fff; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-lg); padding: 40px; }
@media (max-width: 640px) { .sv-form-panel { padding: 22px; } }
.sv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sv-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.sv-form-field label, .sv-form-field .wpcf7-form-control-wrap { display: block; }
.sv-form-label { font-size: 13px; font-weight: 600; color: var(--sv-text); }
.sv-info-box { background: var(--sv-cream-alt); border-radius: 6px; padding: 24px; margin-bottom: 16px; }
.sv-info-box__title { font-weight: 600; color: var(--sv-green-dark); font-size: 15px; margin-bottom: 6px; }
.sv-info-box__text { font-size: 14px; color: var(--sv-text-muted); }

/* Contact Form 7 field styling -> matches .sv-input look automatically */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-date,
.sv-input {
  border: 1px solid #d9d5c7;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--sv-font-body);
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: var(--sv-text);
}
.wpcf7-form-control:focus, .sv-input:focus { outline: 2px solid var(--sv-gold); outline-offset: 1px; }
.wpcf7-form-control.wpcf7-submit { display: inline-block; background: var(--sv-green-mid); color: #fff; font-weight: 700; font-size: 15px; padding: 16px 28px; border-radius: 4px; border: none; cursor: pointer; width: auto; }
.wpcf7-form-control.wpcf7-submit:hover { filter: brightness(1.1); }
.wpcf7-form p { margin-bottom: 20px; }
.wpcf7-not-valid-tip { color: #b00020; font-size: 13px; margin-top: 4px; }
.wpcf7-response-output { border-radius: 4px; padding: 14px 18px; font-size: 14px; margin-top: 20px !important; }
.wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--sv-text-muted); }
.sv-cf7-missing { border: 1px dashed #b00020; background: #fdecec; color: #7a1120; padding: 20px; border-radius: 4px; font-size: 14px; }

/* Kontakt */
.sv-contact-detail dt { font-weight: 700; color: var(--sv-green-dark); }
.sv-contact-detail dd { margin: 2px 0 18px; font-size: 15px; color: var(--sv-text-muted); }

/* =========================================================
   10. FOOTER
   ========================================================= */
.sv-footer { font-family: var(--sv-font-body); background: var(--sv-footer-dark); }
.sv-footer__grid { max-width: var(--sv-max-width); margin: 0 auto; padding: 64px 56px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
/* Optionales zweites Logo (Design > Customizer > Footer-Logo), z. B. das
   Vogel-Wappen. Gleiche Begrenzungslogik wie beim Header-Logo, damit auch
   hier eine hochauflösend hochgeladene Datei nicht in Originalgröße
   erscheint. */
.sv-footer__logo { display: block; height: 56px; width: auto; max-width: 140px; max-height: 56px; object-fit: contain; margin-bottom: 16px; }
.sv-footer__brand { font-family: var(--sv-font-display); font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.sv-footer__tag { font-size: 14px; color: #b7b2a2; line-height: 1.7; max-width: 320px; }
.sv-footer__col-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-gold); margin-bottom: 16px; }
.sv-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sv-footer__links a { color: #c9c5b6; }
.sv-footer__links a:hover { color: var(--sv-gold); }
.sv-flink { color: #c9c5b6; text-decoration: none; }
.sv-flink:hover { color: var(--sv-gold); }
.sv-flink--icon { display: inline-flex; align-items: center; gap: 8px; }
.sv-flink__icon { flex-shrink: 0; }
.sv-footer__contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #c9c5b6; line-height: 1.6; }
.sv-footer__contact a.sv-footer__cta-link { color: var(--sv-gold); font-weight: 600; margin-top: 6px; }
.sv-footer__bottom { border-top: 1px solid #2a352c; max-width: var(--sv-max-width); margin: 0 auto; padding: 24px 56px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #8f8a78; flex-wrap: wrap; gap: 12px; }
.sv-footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.sv-footer__legal a { color: #8f8a78; }
.sv-footer__legal a:hover { color: var(--sv-gold); }

@media (max-width: 980px) {
  .sv-footer__grid { grid-template-columns: 1fr 1fr; }
  .sv-grid--3, .sv-grid--4, .sv-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .sv-grid--2 { grid-template-columns: 1fr; }
  .sv-section, .sv-section--sm { padding-left: 24px; padding-right: 24px; }
  .sv-container { padding-left: 24px; padding-right: 24px; }
  .sv-form-row { grid-template-columns: 1fr; }
  .sv-heading-lg { font-size: 28px; }
}
@media (max-width: 640px) {
  .sv-footer__grid { grid-template-columns: 1fr; padding: 48px 24px 32px; }
  .sv-footer__bottom { padding: 20px 24px; flex-direction: column; align-items: flex-start; }
  .sv-grid--3, .sv-grid--4, .sv-grid--5 { grid-template-columns: 1fr; }
  .sv-gallery-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   10b. PROSE (the_content() – redaktioneller Fließtext)
   ========================================================= */
.sv-prose { font-size: 17px; line-height: 1.85; color: var(--sv-text-muted); }
.sv-prose p { margin-bottom: 24px; }
.sv-prose h2 { font-size: 28px; margin: 48px 0 16px; }
.sv-prose h2:first-child { margin-top: 0; }
.sv-prose h3 { font-size: 22px; margin: 36px 0 12px; color: var(--sv-green-mid); }
.sv-prose ul, .sv-prose ol { padding-left: 22px; margin-bottom: 24px; }
.sv-prose li { margin-bottom: 8px; }
.sv-prose strong { color: var(--sv-green-dark); }
.sv-prose a { color: var(--sv-green-mid); border-bottom: 1px solid var(--sv-gold); }
.sv-prose--card { background: #fff; border: 1px solid var(--sv-border); border-radius: 6px; padding: 48px; }
@media (max-width: 640px) { .sv-prose--card { padding: 24px; } }
.sv-prose--card h2 { font-size: 24px; margin-top: 0; }
.sv-prose--card p:last-child { margin-bottom: 0; }
.sv-schedule h2 { color: var(--sv-green-mid); border-bottom: 2px solid var(--sv-gold); padding-bottom: 10px; }
.sv-schedule p strong:first-child { color: var(--sv-green-mid); margin-right: 12px; }

/* Cookie-Mock-Toggle (visuelle Vorlage, an echtes Consent-Plugin anzubinden) */
.sv-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--sv-border); }
.sv-toggle-row:last-child { border-bottom: none; }
.sv-toggle-row__title { font-weight: 600; color: var(--sv-green-dark); font-size: 15px; }
.sv-toggle-row__desc { font-size: 13px; color: var(--sv-text-muted); margin-top: 4px; max-width: 480px; }
.sv-toggle { position: relative; width: 44px; height: 24px; border-radius: 20px; background: var(--sv-border); flex-shrink: 0; }
.sv-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.sv-toggle.is-on { background: var(--sv-green-mid); }
.sv-toggle.is-on::after { left: 23px; }
.sv-toggle.is-disabled { opacity: .6; }

/* =========================================================
   11. MISC / WP DEFAULTS
   ========================================================= */
.alignleft { float: left; margin-right: 20px; }
.alignright { float: right; margin-left: 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-block-quote, blockquote { border-left: 3px solid var(--sv-gold); padding-left: 20px; font-style: italic; color: var(--sv-text-muted); }
.sv-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 48px; }
.sv-pagination a, .sv-pagination span { padding: 10px 16px; border: 1px solid var(--sv-border); border-radius: 4px; font-size: 14px; }
.sv-pagination .current { background: var(--sv-green-mid); color: #fff; border-color: var(--sv-green-mid); }
.sv-empty-state { text-align: center; padding: 64px 24px; color: var(--sv-text-muted); font-size: 15px; }