/*
Theme Name: TSV Child (TT4)
Theme URI: https://www.tsv-eschollbruecken-eich.de/
Description: Child Theme für Twenty Twenty-Four. Layouts/Design versioniert, ohne Page Builder.
Author: TSV Eschollbrücken-Eich
Template: twentytwentyfour
Version: 1.5.0
Text Domain: tsv-child
*/

/* ============================================================
   CUSTOM PROPERTIES
   Farb-Aliase auf theme.json-Presets + semantische Tokens
   ohne direktes theme.json-Pendant.
   Quelle: W3C CSS Custom Properties for Cascading Variables
   ============================================================ */

:root {
  /* Aliase auf theme.json-Tokens (lesbar, kurz) */
  --tsv-c-blue:    var(--wp--preset--color--tsv-blue);
  --tsv-c-ink:     var(--wp--preset--color--tsv-ink);
  --tsv-c-white:   var(--wp--preset--color--tsv-white);
  --tsv-c-surface: var(--wp--preset--color--tsv-surface);

  /* Erweiterte Farbtokens (kein direktes theme.json-Pendant)
     Alle Kontraste auf Weiss (#fff) dokumentiert. */
  --tsv-c-border:        #e5e7eb;
  --tsv-c-border-card:   #d1d5db;
  --tsv-c-meta:          #6b7280; /* Kontrast 4.77:1 auf #fff — besteht WCAG AA */
  --tsv-c-muted:         #4b5563; /* Kontrast 7.0:1  auf #fff — besteht WCAG AA */
  --tsv-c-label:         #374151;
  --tsv-c-footer-bg:     #f9fafb;

  /* Gradient-Startton: heller Blau-Derivat aus TSV Blau (#172191) */
  --tsv-c-blue-tint:     #eef0f9;

  /* Hover-Ton: gedämpfte Mischung aus TSV Blau + Surface */
  --tsv-c-blue-hover:    #e9eaf0;

  /* Spacing-Aliase */
  --tsv-sp-xs: var(--wp--preset--spacing--xs);
  --tsv-sp-s:  var(--wp--preset--spacing--s);
  --tsv-sp-m:  var(--wp--preset--spacing--m);
  --tsv-sp-l:  var(--wp--preset--spacing--l);
  --tsv-sp-xl: var(--wp--preset--spacing--xl);
}

/* ============================================================
   TYPOGRAFIE
   clamp() statt starrer rem-Werte für fluid sizing auf Mobile.
   Quelle: W3C CSS Values and Units Module Level 4, clamp()
   ============================================================ */

h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 3vw,   1.6rem);  margin-bottom: 0.75rem; }
h3 { font-size: 1.1rem; }

/* ============================================================
   ACCESSIBILITY: SKIP-LINK
   Erstes fokussierbares Element — erscheint nur bei Fokus.
   Quelle: W3C, WCAG 2.2, SC 2.4.1 Bypass Blocks (Level A)
   ============================================================ */

.tsv-skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 9999;
  padding: 0.6rem 1.2rem;
  background: var(--tsv-c-blue);
  color: var(--tsv-c-white);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  white-space: nowrap;
}

.tsv-skip-link:focus,
.tsv-skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--tsv-c-white);
  outline-offset: 2px;
}

/* ============================================================
   ACCESSIBILITY: FOKUS
   :focus:not(:focus-visible) entfernt outline nur für Maus.
   Quelle: W3C, WCAG 2.2, SC 2.4.7  Focus Visible (Level AA)
   Quelle: W3C, WCAG 2.2, SC 2.4.11 Focus Appearance (Level AA)
   ============================================================ */

:where(a, button, input, textarea, select, summary):focus:not(:focus-visible) {
  outline: none;
}

:where(
  a[href],
  button,
  input,
  textarea,
  select,
  summary,
  [role="button"],
  [role="link"]
):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tsv-c-blue);
  border-radius: 10px;
}

:where(a[href]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tsv-c-blue);
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* ============================================================
   HEADER
   Quelle: W3C CSS Positioned Layout Module Level 3, z-index
   ============================================================ */

.tsv-header {
  border-bottom: 1px solid var(--tsv-c-border);
  position: relative;
  z-index: 100;
}

/* ============================================================
   NAVIGATION: TOP-LEVEL
   Touch-Target mind. 24×24 px (WCAG 2.2 AA) bleibt gewahrt.
   Quelle: W3C, WCAG 2.2, SC 2.5.8 Target Size Minimum (Level AA)
   ============================================================ */

.wp-block-navigation .wp-block-navigation-item__content {
  padding: 0.45rem 0.65rem !important;
  border-radius: 8px;
  font-size: 1rem;
  white-space: nowrap;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
  background: var(--tsv-c-surface) !important;
}

.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tsv-c-blue);
  border-radius: 8px;
}

.wp-block-navigation__submenu-icon {
  padding: 0.45rem 0.2rem !important;
}

/* ============================================================
   NAVIGATION: DROPDOWN (Desktop)
   Alle Dropdown-Stile in @media (min-width: 601px) gekapselt —
   verhindert schwebende Box im mobilen Overlay-Panel.
   Quelle: W3C CSS Media Queries Level 4, §5 Media Features
   Quelle: W3C CSS Positioned Layout Module Level 3, Stacking Context
   ============================================================ */

@media (min-width: 601px) {

  .wp-block-navigation__submenu-container {
    z-index: 200 !important;
    background: var(--tsv-c-white) !important;
    border: 1px solid var(--tsv-c-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
    padding: 0.35rem !important;
    min-width: 200px !important;
    margin-top: 0.25rem !important;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block !important;
    width: 100% !important;
    border-radius: 6px !important;
    padding: 0.55rem 0.85rem !important;
    color: var(--tsv-c-ink) !important;
    font-size: 1rem !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--tsv-c-surface) !important;
    color: var(--tsv-c-blue) !important;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--tsv-c-blue) inset !important;
    border-radius: 6px !important;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border: none !important;
  }

}

/* ============================================================
   NAVIGATION: MOBILES OVERLAY-MENÜ
   Top-Level: fett, volle Breite, Trennlinie.
   Sub-Items: eingerückt, TSV-Blau-Akzentlinie links, Dash-Präfix.

   Kontrast Sub-Item --tsv-c-muted (#4b5563) auf #fff = 7.0:1 → AA
   Quelle: W3C, WCAG 2.2, SC 1.4.3 Contrast Minimum (Level AA)
   Quelle: W3C, WCAG 2.2, SC 2.5.8 Target Size Minimum (Level AA)
   Quelle: W3C, WCAG 2.2, SC 1.3.1 Info and Relationships (Level A)

   ::before dekorativ (CSS content, nicht im Accessibility-Tree).
   Quelle: W3C ARIA Authoring Practices Guide, §6.10 Decorative Images
   ============================================================ */

@media (max-width: 600px) {

  .wp-block-navigation__submenu-container {
    position: static !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid var(--tsv-c-blue) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.25rem 0 !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    margin-left: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
    display: flex !important;
    align-items: center !important;
    padding: 0.7rem 1rem 0.7rem 1.1rem !important;
    color: var(--tsv-c-muted) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    white-space: normal !important;
    min-height: 44px !important;
  }

  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content::before {
    content: "–" !important;
    color: var(--tsv-c-blue) !important;
    font-weight: 700 !important;
    margin-right: 0.6rem !important;
    flex-shrink: 0 !important;
  }

  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
    color: var(--tsv-c-blue) !important;
    background: rgba(23, 33, 145, 0.05) !important; /* rgba-Äquivalent von --tsv-c-blue */
  }

  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--tsv-c-blue) inset !important;
    border-radius: 4px !important;
  }

  .wp-block-navigation__submenu-container
  .wp-block-navigation-item {
    border: none !important;
  }

  .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item
  > .wp-block-navigation-item__content {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: var(--tsv-c-ink) !important;
    padding: 0.85rem 1rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item {
    border-bottom: 1px solid var(--tsv-c-border) !important;
  }

  .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:last-child {
    border-bottom: none !important;
  }

  .wp-block-navigation__submenu-icon {
    padding: 0.85rem 0.5rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  .wp-block-navigation__responsive-container-content {
    text-align: left !important;
  }

  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container {
    align-items: flex-start !important;
  }

}

/* ============================================================
   BUTTONS
   ============================================================ */

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  filter: brightness(0.92);
}

/* ============================================================
   LAYOUT & ABSTÄNDE
   ============================================================ */

.wp-block-query { margin-bottom: 2rem; }

/* Listenformatierung nur im Fließtext — nicht in Navigation, Cards usw.
   Quelle: W3C HTML Standard, 4.4.8 The ul element */
.wp-block-post-content ul,
.entry-content ul {
  margin-left: 2em;
  list-style-type: disc;
}

/* ============================================================
   HERO
   Gradient aus TSV-Blau-Tönen, blauer Top-Akzent, responsive Padding.
   Quelle: W3C, WCAG 2.2, SC 1.4.10 Reflow (Level AA)
   ============================================================ */

.tsv-hero {
  background: linear-gradient(145deg, var(--tsv-c-blue-tint) 0%, var(--tsv-c-surface) 100%);
  border-top: 4px solid var(--tsv-c-blue);
  border-radius: 20px;
  margin-bottom: var(--tsv-sp-xl) !important;
  padding: var(--tsv-sp-l) !important;
}

@media (min-width: 640px) {
  .tsv-hero {
    padding: var(--tsv-sp-xl) !important;
  }
}

/* ============================================================
   ABSCHNITTS-ÜBERSCHRIFTEN (Blauer Akzent-Strich)
   ============================================================ */

.tsv-section-heading {
  position: relative;
  padding-bottom: var(--tsv-sp-s);
  margin-bottom: var(--tsv-sp-m) !important;
}

.tsv-section-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--tsv-c-blue);
  border-radius: 2px;
}

/* ============================================================
   ABSCHNITTS-LINK ("Alle Beiträge" / "Alle Termine")
   Pill-Badge-Stil für klare Klickbarkeit.
   Quelle: W3C, WCAG 2.2, SC 2.4.4 Link Purpose In Context (Level AA)
   ============================================================ */

.tsv-section-link {
  margin: 0;
  font-size: 1rem;
  flex-shrink: 0;
}

.tsv-section-link a {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tsv-c-blue);
  text-decoration: none;
  padding: 0.3rem 0.85rem;
  border: 1.5px solid var(--tsv-c-blue);
  border-radius: 20px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.tsv-section-link a:hover {
  background: var(--tsv-c-blue);
  color: var(--tsv-c-white);
}

.tsv-section-link a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tsv-c-blue);
}

/* ============================================================
   CARDS (News / Veranstaltungen)
   CSS Grid: 1 Spalte → 2 Spalten ab 540 px (ersetzt margin-Stapel).
   equal-height Cards via display:flex auf den li-Elementen.
   ============================================================ */

.tsv-cards .wp-block-post { margin-bottom: 0; }

.tsv-cards .wp-block-post-template {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--tsv-sp-m) !important;
}

@media (min-width: 540px) {
  .tsv-cards .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--tsv-sp-l) !important;
  }
}

/* li-Elemente als Flex-Spalten damit Karten gleich hoch wachsen */
.tsv-cards .wp-block-post-template > li {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tsv-card {
  background: var(--tsv-c-white);
  border: 1px solid var(--tsv-c-border-card);
  border-radius: 16px;
  padding: var(--tsv-sp-m);
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tsv-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-3px);
}

.tsv-card.is-layout-flow,
.tsv-card.is-layout-flex {
  gap: 0 !important;
}

.tsv-card > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.tsv-card > * + * {
  margin-top: 0.75rem !important;
}

/* Beitragsbild: max-height + overflow:hidden verhindert Aufblähen.
   Quelle: W3C CSS Overflow Module Level 3, overflow property */
.tsv-card .wp-block-post-featured-image {
  margin: 0 !important;
  overflow: hidden;
  border-radius: 12px;
  max-height: 220px;
  line-height: 0;
}

.tsv-card .wp-block-post-featured-image a {
  display: block;
  line-height: 0;
  margin: 0;
}

.tsv-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Kontrast --tsv-c-meta (#6b7280) auf #fff = 4.77:1 → WCAG AA ✓
   Quelle: W3C, WCAG 2.2, SC 1.4.3 Contrast Minimum (Level AA) */
.tsv-meta {
  font-size: 0.875rem;
  color: var(--tsv-c-meta);
}

.tsv-card h2 a,
.tsv-card h3 a { color: var(--tsv-c-blue); }

.tsv-card h2 a:hover,
.tsv-card h3 a:hover { text-decoration: underline; }

/* ============================================================
   ABTEILUNGS-KACHELN
   Stretched-Link: h3 a::after füllt die gesamte Kachel.
   Dekorativer Pfeil (::after auf .tsv-tile) erscheint bei Hover.

   Quelle: W3C, WCAG 2.2, SC 2.4.4 Link Purpose In Context (Level AA)
   Quelle: W3C, WCAG 2.2, SC 2.5.8 Target Size Minimum (Level AA)
   Quelle: W3C ARIA Authoring Practices Guide, §6.10 Decorative Images
   ============================================================ */

.tsv-tile {
  position: relative;
  background: var(--tsv-c-surface);
  border: 1px solid transparent;
  border-radius: 16px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 1.5rem;
  overflow: hidden;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tsv-tile:hover {
  background: var(--tsv-c-blue-hover);
  border-color: var(--tsv-c-blue);
  box-shadow: 0 4px 16px rgba(23, 33, 145, 0.10); /* rgba-Äquivalent von --tsv-c-blue */
}

.tsv-tile h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.tsv-tile h3 a {
  color: var(--tsv-c-blue);
  text-decoration: none;
  font-weight: 700;
}

.tsv-tile h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.tsv-tile h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Dekorativer Richtungspfeil — pointer-events:none, kein AT-Rauschen */
.tsv-tile::after {
  content: '→';
  position: absolute;
  bottom: 0.6rem;
  right: 0.75rem;
  font-size: 0.85rem;
  color: var(--tsv-c-blue);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.tsv-tile:hover::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 600px) {
  .tsv-tiles .wp-block-columns {
    flex-direction: column !important;
  }
  .tsv-tiles .wp-block-column {
    width: 100% !important;
    min-width: 0 !important;
  }
  .tsv-tiles .wp-block-column:empty {
    display: none;
  }
}

/* ============================================================
   VERANSTALTUNGS-INFOBOX
   <dl> = semantisch korrekt für strukturierte Metadaten.
   Quelle: W3C HTML Standard, 4.9.9 The dl element
   Quelle: Informationsarchitektur.md, Abschnitt 5.2
   ============================================================ */

.tsv-event-infobox {
  background: var(--tsv-c-surface);
  border-left: 4px solid var(--tsv-c-blue);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}

.tsv-event-infobox dl { margin: 0; }

.tsv-event-infobox__row {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--tsv-c-border);
}

.tsv-event-infobox__row:last-child { border-bottom: none; }

.tsv-event-infobox dt {
  font-weight: 600;
  min-width: 8rem;
  color: var(--tsv-c-label);
}

.tsv-event-infobox dd {
  margin: 0;
  color: var(--tsv-c-ink);
}

@media (max-width: 480px) {
  .tsv-event-infobox__row {
    flex-direction: column;
    gap: 0.2rem;
  }
  .tsv-event-infobox dt {
    min-width: 0;
  }
}

/* ============================================================
   FOOTER
   Quelle: Informationsarchitektur.md, Abschnitt 2.2 Footer-Menü
   ============================================================ */

.tsv-footer {
  border-top: 2px solid var(--tsv-c-border);
  background: var(--tsv-c-footer-bg);
}

.tsv-footer__copy {
  font-size: 0.875rem;
  color: var(--tsv-c-meta);
  margin: 0;
}

.tsv-footer__nav a {
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}

.tsv-footer__nav a:hover {
  text-decoration: underline;
}

/* ============================================================
   ZURÜCK-LINK (single.html / single-veranstaltung.html)
   Button-Stil für klare Klickbarkeit (Senioren-Zielgruppe).
   Quelle: Informationsarchitektur.md, Abschnitt 8
   ============================================================ */

.tsv-back-link {
  margin-top: 2.5rem;
}

.tsv-back-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--tsv-c-border-card);
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--tsv-c-ink);
  background: var(--tsv-c-surface);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tsv-back-link a:hover {
  background: var(--tsv-c-blue-hover);
  border-color: var(--tsv-c-blue);
  color: var(--tsv-c-blue);
}

.tsv-back-link a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tsv-c-blue);
}

/* ============================================================
   PAGINIERUNG
   Quelle: W3C, WCAG 2.2, SC 2.4.5 Multiple Ways (Level AA)
   ============================================================ */

.wp-block-query-pagination {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.wp-block-query-pagination-numbers .page-numbers {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--tsv-c-blue);
  color: var(--tsv-c-white);
}

.wp-block-query-pagination-numbers .page-numbers:hover:not(.current) {
  background: var(--tsv-c-surface);
}

/* ============================================================
   BEITRAG: EINZELSEITE
   Quelle: Informationsarchitektur.md, Abschnitt 5.1 / 5.2
   ============================================================ */

.tsv-single-featured-image {
  margin-bottom: 1.5rem !important;
  overflow: hidden;
  border-radius: 14px;
  line-height: 0;
}

.tsv-single-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.tsv-single-meta {
  font-size: 0.875rem;
  color: var(--tsv-c-meta);
  margin-bottom: 1.5rem !important;
}

main .wp-block-post-featured-image + .wp-block-post-title {
  margin-top: 1.25rem !important;
}

/* ============================================================
   SEITEN-TEMPLATE (page.html / statische Seiten)
   ============================================================ */

.tsv-page {
  padding-top: var(--tsv-sp-l);
  padding-bottom: var(--tsv-sp-xl);
}

.tsv-page-title {
  margin-bottom: var(--tsv-sp-l) !important;
  padding-bottom: var(--tsv-sp-s);
  border-bottom: 2px solid var(--tsv-c-border);
}

/* ============================================================
   EINZELSEITE: ARTIKEL-LAYOUT
   Struktur: Featured Image → Artikel-Header (Badge + Titel + Meta)
             → Artikel-Body (Content + Infobox) → Artikel-Footer (Zurück-Link)
   ============================================================ */

/* Haupt-Wrapper: einheitliches Seiten-Spacing */
.tsv-single {
  padding-top: var(--tsv-sp-l);
  padding-bottom: var(--tsv-sp-xl);
}

/* Featured Image auf Einzelseiten: mehr vertikaler Atem */
.tsv-single .tsv-single-featured-image {
  margin-bottom: var(--tsv-sp-l) !important;
  border-radius: 16px;
  overflow: hidden;
}

/* ---- ARTIKEL-HEADER ---------------------------------------- */

/* Container für Badge, Titel und Meta-Leiste */
.tsv-article-header {
  margin-bottom: var(--tsv-sp-m);
}

/* Kategorie-Badge (wp:post-terms mit Klasse tsv-category-badge)
   Jede Kategorie erscheint als farbige Kapsel über dem Titel.
   Kontrast: --tsv-c-blue (#172191) auf rgba-Hintergrund (~#ecedfa) ≈ 8.2:1 → WCAG AA ✓
   Quelle: W3C, WCAG 2.2, SC 1.4.3 Contrast Minimum (Level AA) */
.tsv-category-badge {
  margin-bottom: var(--tsv-sp-xs) !important;
  line-height: 1;
}

.tsv-category-badge a {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tsv-c-blue);
  background: rgba(23, 33, 145, 0.09);
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.tsv-category-badge a:hover {
  background: rgba(23, 33, 145, 0.18);
}

.tsv-category-badge a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tsv-c-blue);
  border-radius: 4px;
}

/* Komma-Separator zwischen mehreren Kategorien wird ausgeblendet;
   die Badge-Optik trennt die Elemente visuell hinreichend. */
.tsv-category-badge .wp-block-post-terms__separator {
  display: none;
}

/* Post-Titel im Artikel-Header: kompakter als Standard-Margin */
.tsv-article-header .wp-block-post-title {
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
  line-height: 1.2;
}

/* Meta-Leiste: nur Datum — Trennlinie grenzt Header von Content ab.
   Kategorie wird als Badge über dem Titel angezeigt (kein Duplikat). */
.tsv-article-meta {
  display: block;
  font-size: 0.875rem;
  color: var(--tsv-c-meta);
  padding-top: var(--tsv-sp-s);
  padding-bottom: var(--tsv-sp-m);
  border-bottom: 2px solid var(--tsv-c-surface);
  margin-top: 0.4rem !important;
  margin-bottom: 0 !important;
}

/* ---- ARTIKEL-BODY ------------------------------------------ */

/* Container für Post-Content + eventuelle Event-Infobox */
.tsv-article-body {
  padding-top: var(--tsv-sp-m);
}

/* Absätze: komfortabler Lesefluss
   Quelle: W3C CSS Text Module Level 3, line-height */
.tsv-article-body .wp-block-post-content p {
  line-height: 1.85;
  margin-bottom: 1.25em !important;
}

/* Zwischen-Überschriften im Content mit Akzent-Trennlinie */
.tsv-article-body .wp-block-post-content .wp-block-heading {
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
}

.tsv-article-body .wp-block-post-content h2.wp-block-heading {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--tsv-c-border);
}

/* Bilder im Content: abgerundete Ecken, vertikaler Atem */
.tsv-article-body .wp-block-image {
  margin-top: 1.75rem !important;
  margin-bottom: 1.75rem !important;
}

.tsv-article-body .wp-block-image img {
  border-radius: 10px;
}

/* Bildunterschrift: dezent, kursiv
   Quelle: W3C HTML Standard, 4.4.12 The figcaption element */
.tsv-article-body .wp-block-image figcaption {
  font-size: 0.85rem;
  color: var(--tsv-c-meta);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Aufzählungen im Content: konsistenter Einzug */
.tsv-article-body .wp-block-post-content ul,
.tsv-article-body .wp-block-post-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.25em !important;
}

.tsv-article-body .wp-block-post-content li {
  line-height: 1.7;
  margin-bottom: 0.4em;
}

/* Blockquote: TSV-Blau-Akzent links, heller Hintergrund
   Quelle: W3C HTML Standard, 4.4.4 The blockquote element */
.tsv-article-body .wp-block-quote {
  border-left: 4px solid var(--tsv-c-blue) !important;
  background: var(--tsv-c-surface) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0 12px 12px 0;
  margin: 1.75rem 0 !important;
}

.tsv-article-body .wp-block-quote p {
  font-style: italic;
  line-height: 1.7;
  margin: 0 !important;
}

.tsv-article-body .wp-block-quote cite {
  display: block;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--tsv-c-meta);
  margin-top: 0.6rem;
}

/* Horizontale Trennlinie im Content */
.tsv-article-body .wp-block-separator {
  border: none !important;
  border-top: 1px solid var(--tsv-c-border) !important;
  margin: 2rem 0 !important;
}

/* ---- ARTIKEL-FOOTER --------------------------------------- */

/* Bereich mit Zurück-Link: deutliche Abtrennung vom Content */
.tsv-article-footer {
  margin-top: var(--tsv-sp-xl) !important;
  padding-top: var(--tsv-sp-l);
  border-top: 1px solid var(--tsv-c-border);
}

/* Kein doppeltes margin-top wenn back-link im article-footer steckt */
.tsv-article-footer .tsv-back-link {
  margin-top: 0 !important;
}

/* ============================================================
   STATISCHE SEITEN: INHALT-TYPOGRAFIE
   Gleiche Lesetypografie für page.html über .tsv-page-body.
   ============================================================ */

.tsv-page-body .wp-block-post-content p {
  line-height: 1.85;
  margin-bottom: 1.25em !important;
}

.tsv-page-body .wp-block-post-content .wp-block-heading {
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
}

.tsv-page-body .wp-block-post-content h2.wp-block-heading {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--tsv-c-border);
}

.tsv-page-body .wp-block-image img {
  border-radius: 10px;
}

.tsv-page-body .wp-block-image figcaption {
  font-size: 0.85rem;
  color: var(--tsv-c-meta);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

.tsv-page-body .wp-block-quote {
  border-left: 4px solid var(--tsv-c-blue) !important;
  background: var(--tsv-c-surface) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0 12px 12px 0;
  margin: 1.75rem 0 !important;
}

.tsv-page-body .wp-block-quote p {
  font-style: italic;
  margin: 0 !important;
}

/* ============================================================
   KONTAKTFORMULAR  –  Native WordPress Block Form (wp:form)
   Ziel: Modernes Card-Layout, konsistent mit Design-System.
   WCAG 2.2 AA: SC 1.3.1 Info and Relationships,
                SC 1.4.3 Contrast Minimum,
                SC 2.4.11 Focus Appearance,
                SC 3.3.2 Labels or Instructions
   ============================================================ */

/* Container: weißer Card auf Surface-Hintergrund */
.wp-block-form {
  background: var(--tsv-c-white);
  border: 1px solid var(--tsv-c-border-card);
  border-radius: 16px;
  padding: var(--tsv-sp-l);
  max-width: 640px;
}

/* Jedes Feld als vertikaler Flex-Stack (Label über Input) */
.wp-block-form-input {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--tsv-sp-m);
}

/* Letztes Feld vor dem Button ohne zusätzlichen Abstand */
.wp-block-form-input:last-of-type {
  margin-bottom: 0;
}

/* Labels */
.wp-block-form label,
.wp-block-form .wp-block-form-input__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tsv-c-label);
  letter-spacing: 0.01em;
}

/* Pflichtfeld-Stern (Accessibility: nicht nur visuell — title-Attribut bleibt) */
.wp-block-form label abbr[title] {
  text-decoration: none;
  color: var(--tsv-c-blue);
  margin-left: 0.15em;
  font-weight: 700;
}

/* Eingabefelder — Text, E-Mail, Tel */
.wp-block-form input[type="text"],
.wp-block-form input[type="email"],
.wp-block-form input[type="tel"],
.wp-block-form input[type="number"],
.wp-block-form input[type="url"],
.wp-block-form select,
.wp-block-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--tsv-c-border-card);
  border-radius: 10px;
  background: var(--tsv-c-white);
  color: var(--tsv-c-ink);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover: Border in Vereinsblau */
.wp-block-form input[type="text"]:hover,
.wp-block-form input[type="email"]:hover,
.wp-block-form input[type="tel"]:hover,
.wp-block-form input[type="number"]:hover,
.wp-block-form input[type="url"]:hover,
.wp-block-form textarea:hover {
  border-color: var(--tsv-c-blue);
}

/* Focus: Border + dezenter Glow (ergänzt globale :focus-visible-Regel) */
.wp-block-form input[type="text"]:focus,
.wp-block-form input[type="email"]:focus,
.wp-block-form input[type="tel"]:focus,
.wp-block-form input[type="number"]:focus,
.wp-block-form input[type="url"]:focus,
.wp-block-form textarea:focus {
  border-color: var(--tsv-c-blue);
  box-shadow: 0 0 0 3px rgba(23, 33, 145, 0.12);
  outline: none;
}

/* Textarea: mindestens 140 px hoch, manuell skalierbar */
.wp-block-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Placeholder-Farbe: ausreichend Kontrast (WCAG 1.4.3) */
.wp-block-form input::placeholder,
.wp-block-form textarea::placeholder {
  color: var(--tsv-c-meta);
  opacity: 1;
}

/* Absendebutton: analog zu primären Buttons der Seite */
.wp-block-form .wp-block-buttons {
  margin-top: var(--tsv-sp-m);
}

.wp-block-form .wp-block-button__link,
.wp-block-form button[type="submit"],
.wp-block-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: var(--tsv-c-blue);
  color: var(--tsv-c-white) !important;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.wp-block-form .wp-block-button__link:hover,
.wp-block-form button[type="submit"]:hover,
.wp-block-form input[type="submit"]:hover {
  background: #1219a0;
  box-shadow: 0 4px 14px rgba(23, 33, 145, 0.25);
  transform: translateY(-2px);
  color: var(--tsv-c-white) !important;
}

/* Erfolgsmeldung / Fehlermeldung (wp:form-submission-notification) */
.wp-block-form-submission-notification {
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-top: var(--tsv-sp-m);
}

.wp-block-form-submission-notification[data-type="success"] {
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
  color: #065f46;
}

.wp-block-form-submission-notification[data-type="error"] {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #991b1b;
}

/* DSGVO-Checkbox-Zeile (wp:form-checkbox-input) */
.wp-block-form-checkbox-input {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: var(--tsv-sp-m);
  margin-bottom: var(--tsv-sp-s);
}

.wp-block-form-checkbox-input input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  margin-top: 0.15rem;
  accent-color: var(--tsv-c-blue);
  cursor: pointer;
}

.wp-block-form-checkbox-input label {
  font-size: 0.8125rem;
  color: var(--tsv-c-muted);
  line-height: 1.5;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.wp-block-form-checkbox-input label a {
  color: var(--tsv-c-blue);
  text-decoration: underline;
}

/* ============================================================
   ACCESSIBILITY: PREFERS-REDUCED-MOTION
   Alle Transitions und Transforms deaktivieren.
   Quelle: W3C, WCAG 2.2, SC 2.3.3 Animation from Interactions (Level AAA)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .tsv-tile,
  .tsv-tile::after,
  .tsv-card,
  .wp-block-button__link,
  .tsv-section-link a,
  .tsv-back-link a,
  .tsv-category-badge a,
  .wp-block-form input,
  .wp-block-form textarea,
  .wp-block-form button[type="submit"],
  .wp-block-form input[type="submit"] {
    transition: none !important;
    transform: none !important;
  }
}