* {
  box-sizing: border-box;
}

:root {
  --color-bg: #fafafa;
  --color-header: #1a1a1a;
  --color-gold: #d4af37;
  --color-text: #4a4a4a;
  --color-border: #e0e0e0;
  --color-white: #ffffff;
  --color-muted: #767676;
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Work Sans", Arial, sans-serif;
  --container: 1120px;
}

html {
  scroll-behavior: smooth;
  /* Reserviert dauerhaft Platz für die Scrollbar.
     Verhindert Layout-Shift wenn Scrollbar je nach Seiteninhalt
     erscheint oder verschwindet → Header-Breite bleibt konstant. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  /* Unterbindet synthetisch erzeugten Fettdruck/Kursiv durch den
     Browser während Google Fonts noch laden (FOUT-Schutz Ebene 2). */
  font-synthesis: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-gold);
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 2000;
  padding: .75rem 1rem;
  background: var(--color-gold);
  color: var(--color-header);
  font-weight: 600;
  border-radius: .25rem;
}

.skip-link:focus {
  top: 1rem;
}

/* ============================================================
   SITE HEADER (mobile-first Basis)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-header);
  color: var(--color-white);
  border-bottom: 1px solid rgba(212, 175, 55, .35);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* --- Branding ---------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.brand-symbol {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  border-radius: 999px;
  font-size: 1.45rem;
  line-height: 1;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.brand-title {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: .02em;
  /* nowrap bereits in der Basis, nicht erst im Media Query.
     Verhindert Umbruch egal in welchem Font-Ladezustand. */
  white-space: nowrap;
}

.brand-subtitle {
  margin-top: .18rem;
  color: #d8d8d8;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* nowrap in der Basis: verhindert Zeilenumbruch nach
     "LICHTENFELS ·" auch bevor Google Fonts fertig geladen sind.
     Ohne diese Regel → Header-Höhe springt → Menü verschiebt sich. */
  white-space: nowrap;
  /* Sicherheitsnetz: bei extrem schmalem Viewport abschneiden
     statt umbrechen. */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Mobile Navigation ------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
}

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: inline-flex;
  width: 2.7rem;
  height: 2.7rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .32rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: .35rem;
  cursor: pointer;
}

.nav-toggle-label span {
  width: 1.35rem;
  height: 2px;
  background: var(--color-white);
  border-radius: 999px;
}

.nav-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  margin: 0;
  padding: .5rem 1rem 1rem;
  list-style: none;
  background: var(--color-header);
  border-top: 1px solid rgba(255, 255, 255, .12);
  /* Begrenzt die Menühöhe auf den Platz unterhalb des Headers und
     lässt das Menü SELBST scrollen, wenn es länger ist als der
     Bildschirm. Ohne dies scrollte der Scrollbalken den Seiteninhalt
     hinter dem Menü statt das Menü. */
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-toggle:checked ~ .nav-menu {
  display: block;
}

.nav-item {
  position: relative;
}

.nav-link,
.dropdown-link {
  display: block;
  padding: .8rem .25rem;
  font-size: .94rem;
  font-weight: 600;
}

.dropdown-marker {
  color: var(--color-gold);
}

/* Mobil: Dropdown eingerückt mit Goldlinie */
.dropdown {
  margin: 0;
  padding: 0 0 .25rem 1rem;
  list-style: none;
  border-left: 2px solid var(--color-gold);
}

.dropdown-link {
  color: #eeeeee;
  font-weight: 500;
}

/* ============================================================
   CONTENT-BEREICHE
   ============================================================ */
.site-main {
  min-height: 62vh;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(26, 26, 26, .98), rgba(26, 26, 26, .78)),
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, .22), transparent 32%);
  color: var(--color-white);
}

.hero-overlay {
  position: absolute;
  inset: auto -2rem -2rem auto;
  z-index: -1;
  max-width: 780px;
  color: rgba(255, 255, 255, .06);
  font-family: var(--font-heading);
  font-size: clamp(4rem, 13vw, 10rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  transform: rotate(-8deg);
  user-select: none;
}

.hero-content {
  width: min(var(--container), calc(100% - 2rem));
  margin: 0 auto;
  padding: 5rem 0;
}

.hero-kicker,
.page-kicker {
  margin: 0 0 .75rem;
  color: var(--color-gold);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero h1,
.page-header h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.08;
}

.hero h1 {
  max-width: 860px;
  font-size: clamp(2.4rem, 8vw, 5rem);
}

.hero-subtitle {
  max-width: 720px;
  margin: 1.25rem 0 0;
  color: #eeeeee;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 400;
}

.content-section {
  padding: 3rem 0;
}

.intro-section {
  padding-bottom: 1rem;
}

.content-container,
.footer-inner,
.footer-bottom {
  width: min(var(--container), calc(100% - 2rem));
  margin: 0 auto;
}

.section-heading {
  margin-bottom: 1.8rem;
}

.section-title {
  margin: 0;
  color: #222222;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
}

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin-top: .65rem;
  background: var(--color-gold);
}

.news-grid,
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.news-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.news-card:hover,
.news-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .11);
}

.news-card-header {
  padding: 1.25rem 1.25rem 1rem;
  background: var(--color-header);
  color: var(--color-white);
}

.news-date {
  margin: 0 0 .45rem;
  color: var(--color-gold);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.news-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.22;
}

.news-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}

.news-card-body p {
  margin: 0 0 1rem;
}

.read-more {
  margin-top: auto;
  color: var(--color-header);
  font-weight: 600;
}

.read-more:hover,
.read-more:focus {
  color: var(--color-gold);
}

.info-box {
  display: block;
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .05);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.info-box:hover,
.info-box:focus {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .09);
}

.info-icon {
  display: inline-block;
  margin-bottom: .75rem;
  color: var(--color-gold);
  font-size: 2rem;
}

.info-box h3 {
  margin: 0 0 .5rem;
  color: #222222;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
}

.info-box p {
  margin: 0;
}

.page-shell {
  padding: 3.2rem 0 4rem;
}

.page-header {
  width: min(900px, calc(100% - 2rem));
  margin: 0 auto 2rem;
  text-align: center;
}

.page-header h1 {
  color: #222222;
  font-size: clamp(2.1rem, 6vw, 4rem);
}

.page-description,
.page-meta {
  max-width: 760px;
  margin: 1rem auto 0;
  color: var(--color-muted);
  font-size: 1.05rem;
}

.page-content {
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .05);
}

.prose h2,
.prose h3,
.prose h4 {
  color: #222222;
  font-family: var(--font-heading);
  line-height: 1.25;
}

.prose h2 {
  margin-top: 2rem;
  font-size: 1.9rem;
}

.prose h3 {
  margin-top: 1.6rem;
  font-size: 1.45rem;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.1rem;
}

.prose a {
  color: #222222;
  font-weight: 600;
  border-bottom: 2px solid rgba(212, 175, 55, .5);
}

.prose a:hover,
.prose a:focus {
  color: var(--color-gold);
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-gold);
  background: #fff8e2;
}

table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  background: var(--color-white);
}

th,
td {
  padding: .75rem;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--color-header);
  color: var(--color-white);
  font-weight: 600;
}

tr:nth-child(even) td {
  background: #f5f5f5;
}

/* Nächster anstehender Termin: leichte Hervorhebung. Die Zeile wird vom
   Render-Hook (layouts/.../render-table.html) anhand des Datums in der
   ersten Spalte mit .is-next markiert. Steht bewusst NACH der
   nth-child(even)-Regel, damit die Hervorhebung auch auf geraden Zeilen
   gewinnt (gleiche Spezifität, spätere Regel). */
tr.is-next td {
  background: rgba(212, 175, 55, .14);
}

tr.is-next td:first-child {
  border-left: 4px solid var(--color-gold);
  font-weight: 600;
}

input,
textarea,
select,
button {
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: .25rem;
  background: var(--color-white);
  color: var(--color-text);
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(212, 175, 55, .28);
  border-color: var(--color-gold);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.15rem;
  border: 0;
  background: var(--color-header);
  color: var(--color-white);
  font-weight: 600;
  cursor: pointer;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  background: var(--color-gold);
  color: var(--color-header);
}

.empty-state {
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-header);
  color: #e8e8e8;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 0 2rem;
}

.footer-column h2 {
  margin: 0 0 1rem;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.35rem;
}

.footer-column p {
  margin: 0 0 .75rem;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin-bottom: .55rem;
}

.footer-column a {
  color: #e8e8e8;
}

.footer-column a:hover,
.footer-column a:focus {
  color: var(--color-gold);
}

.footer-bottom {
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: #bdbdbd;
  font-size: .9rem;
}

.footer-bottom p {
  margin: 0;
}

/* ============================================================
   HORIZONTALE NAVIGATION  >= 960px
   Ab dieser Breite ist genug Platz für Logo + alle sechs
   Menüpunkte nebeneinander (Logo ~302px + Menü ~569px + Abstände
   ≈ 899px, gemessen). Breakpoint mit Puffer auf 960px gesetzt.
   Darunter bleibt das (scrollbare) Burger-Menü, sonst würde das
   Menüband ins Logo rutschen.
   (Früher 1024px, als das Menü noch sieben Punkte hatte.)
   ============================================================ */
@media (min-width: 960px) {

  /* --- Header-Wrapper --------------------------------------- */
  .header-inner {
    padding: .8rem .5rem;
    gap: .75rem;
  }

  /* --- Branding links fix ----------------------------------- */
  .brand {
    flex: 0 0 auto;
    min-width: 0;
    gap: .55rem;
  }

  .brand-symbol {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.25rem;
  }

  .brand-title {
    font-size: 1.12rem;
  }

  .brand-subtitle {
    font-size: .65rem;
    letter-spacing: .03em;
    /* white-space: nowrap ist bereits in der Basis gesetzt.
       Hier nur noch Schriftgrößen-Override nötig. */
  }

  /* --- Navigation-Wrapper ---------------------------------- */
  .site-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
  }

  /* --- Hamburger-Button verstecken ------------------------- */
  .nav-toggle-label {
    display: none;
  }

  /* --- Menü-Liste ------------------------------------------ */
  .nav-menu {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: 100%;
    gap: .5rem;
    padding: 0;
    margin: 0;
    background: transparent;
    border-top: 0;
    flex-wrap: nowrap;
    /* Mobile Höhenbegrenzung zurücksetzen, sonst würden die
       absolut positionierten Desktop-Dropdowns abgeschnitten. */
    max-height: none;
    overflow: visible;
  }

  /* --- Einzelne Nav-Items ---------------------------------- */
  .nav-item {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
  }

  /* --- Top-Level-Links ------------------------------------- */
  .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 3.4rem;
    padding: .45rem .4rem;
    border-radius: .2rem;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
  }

  .nav-link:hover,
  .nav-link:focus {
    background: rgba(255, 255, 255, .08);
    color: var(--color-gold);
  }

  /* --- "Termine & Ordnungen" zweizeilig --------------------
     Klasse wird in nav.html automatisch gesetzt wenn
     .Identifier == "termine-ordnungen".                      */
  .nav-item--wrap > .nav-link {
    max-width: 7.5rem;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .dropdown-marker {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* --- Dropdown -------------------------------------------- */
  .dropdown {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 1001;
    min-width: 15rem;
    display: block;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: var(--color-header);
    border: 1px solid rgba(212, 175, 55, .35);
    border-left: 0;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Die rechten Navigationspunkte klappen ihr Dropdown nach innen
     (rechtsbündig) auf, damit es nicht über den rechten Bildschirm-
     rand hinausragt und horizontalen Scroll erzeugt. Betrifft die
     letzten drei Top-Level-Punkte (effektiv "Termine & Ordnungen"
     und "Kontaktdaten"; "Impressum" hat kein Dropdown). */
  .nav-item.has-dropdown:nth-last-child(-n + 3) .dropdown {
    left: auto;
    right: 0;
  }

  .dropdown-link {
    display: block;
    padding: .7rem 1rem;
    color: #eeeeee;
    font-weight: 500;
    font-size: .92rem;
    white-space: normal;
  }

  .dropdown-link:hover,
  .dropdown-link:focus {
    background: rgba(212, 175, 55, .12);
    color: var(--color-gold);
  }
}

/* ============================================================
   INHALTS-GRIDS  >= 768px
   Bewusst getrennt von der Navigation: mehrspaltige Karten/Footer
   sollen schon auf Tablets greifen, lange bevor das horizontale
   Menü (>= 1024px) erscheint.
   ============================================================ */
@media (min-width: 768px) {

  /* --- Content-Grids --------------------------------------- */
  .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-grid,
  .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-content {
    padding: 2rem;
  }
}

/* ============================================================
   MOBILE-ROBUSTHEIT
   Verhindert horizontales Scrollen der gesamten Seite durch
   lange Wörter (E-Mails, URLs, Dateinamen) und breite Tabellen.
   ============================================================ */

/* Lange, nicht umbrechbare Strings (E-Mail-Adressen, URLs,
   PDF-Dateinamen mit Unterstrichen) brechen am Wortende um, statt
   überzulaufen. Bewusst NICHT auf Tabellenzellen angewandt — dort
   würde "Rundschreiben" mitten im Wort getrennt (hässlich). */
.prose,
.page-description,
.page-meta,
.footer-column {
  overflow-wrap: break-word;
}

/* Tabellen werden vom Render-Hook (layouts/.../render-table.html) in
   .table-wrap gewickelt. Dieser Wrapper ist der Scroll-Container:
   passt eine Tabelle nicht, scrollt nur SIE horizontal — nie die
   ganze Seite. Zellen brechen nicht mitten im Wort um. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .prose th,
  .prose td {
    padding: .6rem .7rem;
    white-space: nowrap;
  }
}

/* Breite Tabellen (>= 3 Spalten, vom Render-Hook als .table-wrap--stack
   markiert) werden auf schmalen Bildschirmen NICHT seitlich gescrollt,
   sondern in gestapelte Karten umgewandelt: jede Zeile = eine Karte,
   jede Zelle = "Spaltenüberschrift + Wert" untereinander. So bleibt
   alles ohne Wischen lesbar, wenn der Platz nebeneinander fehlt.
   Schmale 2-Spalten-Tabellen (z. B. Termine) sind nicht betroffen. */
@media (max-width: 600px) {
  .table-wrap--stack {
    overflow-x: visible;
  }

  .table-wrap--stack table,
  .table-wrap--stack tbody,
  .table-wrap--stack tr,
  .table-wrap--stack td {
    display: block;
    width: 100%;
  }

  /* Kopfzeile visuell ausblenden (Labels kommen aus data-label),
     für Screenreader aber erhalten. */
  .table-wrap--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table-wrap--stack tr {
    margin: 0 0 1rem;
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-gold);
    background: var(--color-white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
  }

  .table-wrap--stack td {
    padding: .65rem .9rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    white-space: normal;
    text-align: left;
  }

  .table-wrap--stack tr td:last-child {
    border-bottom: 0;
  }

  /* Zebra-Streifen im Karten-Modus deaktivieren (Karten sind weiß). */
  .table-wrap--stack tr:nth-child(even) td {
    background: none;
  }

  /* Leere Zellen (z. B. "—" oder keine Anlage) gar nicht anzeigen. */
  .table-wrap--stack td:empty {
    display: none;
  }

  /* Spaltenüberschrift als kleines Label über dem Wert. */
  .table-wrap--stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .2rem;
    color: var(--color-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
}

/* ============================================================
   DOWNLOAD-SEKTION (single.html: "Dateien & Downloads")
   Zuvor ohne eigenes Styling — hier dezent gestaltet.
   ============================================================ */
.downloads-box {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .05);
}

.downloads-box h2 {
  margin: 0 0 1rem;
  color: #222222;
  font-family: var(--font-heading);
  font-size: 1.45rem;
}

.download-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.download-list li {
  margin-bottom: .5rem;
}

.download-link {
  display: inline-block;
  max-width: 100%;
  color: #222222;
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: break-word;
  border-bottom: 2px solid rgba(212, 175, 55, .5);
}

.download-link:hover,
.download-link:focus {
  color: var(--color-gold);
}

/* ============================================================
   SPIELLOKALE & SPIELZEITEN
   ============================================================ */

/* Spielzeiten-Kacheln */
.spielzeiten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0 2.4rem;
}
.sz-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .05);
  padding: 1.3rem 1.2rem;
  text-align: center;
}
.sz-typ {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.sz-card h3 {
  margin: .25rem 0 .8rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: #222;
}
.sz-zeit {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-header);
}
.sz-tag {
  font-size: .9rem;
  color: var(--color-muted);
  margin-top: .2rem;
}
.sz-tbd {
  display: inline-block;
  margin-top: .3rem;
  padding: .15rem .45rem;
  font-size: .76rem;
  color: #8a6d00;
  background: #fff8e2;
  border-radius: .25rem;
}

/* Filter-Chips */
.karte-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.kf-label {
  font-weight: 600;
  color: #222;
}
.kf-chip {
  padding: .45rem .9rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  border-radius: 999px;
  font-weight: 600;
  font-size: .86rem;
  cursor: pointer;
}
.kf-chip.is-active {
  background: var(--color-header);
  color: var(--color-white);
  border-color: var(--color-header);
}
.kf-chip:hover {
  border-color: var(--color-gold);
}

/* Karte */
.spielorte-karte {
  height: 460px;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: .25rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
}
.karte-legende {
  margin-top: .9rem;
}
.legende-liste {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.legende-liste li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--color-text);
}
.legende-pin {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.legende-pin--kol { background: #c0392b; }
.legende-pin--kki { background: #2c6fbb; }
.legende-pin--beide { background: #b8860b; }
.legende-hinweis {
  margin: 0;
  font-size: .85rem;
  color: var(--color-muted);
}

/* CSS-Marker (divIcon) */
.lm-pin span {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}

/* --- Kontaktdaten mit Bot-Schutz --- */
.kontakt-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.kontakt-karte {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-gold);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .05);
  padding: 1.2rem;
}
.kontakt-karte .kk-rolle {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.kontakt-karte .kk-name {
  margin: .25rem 0 .5rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: #222;
}
.kontakt-karte .kk-person {
  margin: 0 0 .5rem;
  font-weight: 600;
}
.kontakt-karte .kk-homepage {
  margin: 0 0 .6rem;
  font-size: .92rem;
}
.kk-geschuetzt .kk-zeile {
  margin: .2rem 0;
  font-size: .95rem;
}
.kk-zeile .kk-label {
  color: var(--color-muted);
}
.kk-btn {
  align-self: flex-start;
  margin-top: auto;
  padding: .45rem .9rem;
  border: 0;
  border-radius: .25rem;
  background: var(--color-header);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .85rem;
  transition: background .2s ease, color .2s ease;
}
.kk-btn:hover,
.kk-btn:focus {
  background: var(--color-gold);
  color: var(--color-header);
}
.kk-hinweis {
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--color-muted);
}

/* Popup-Inhalt */
.lm-popup strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: #222;
}
.lm-popup .lm-lokal {
  margin-top: .15rem;
  font-weight: 600;
  color: var(--color-text);
}
.lm-popup .lm-addr {
  margin: .15rem 0 .35rem;
  color: var(--color-muted);
  font-size: .88rem;
}
.lm-popup .lm-mf {
  font-size: .85rem;
  color: var(--color-muted);
}
.lm-popup .lm-hinweis {
  margin: .3rem 0 .15rem;
  padding: .4rem .55rem;
  font-size: .82rem;
  line-height: 1.4;
  color: #5a4a00;
  background: #fff8e2;
  border-left: 3px solid var(--color-gold);
  border-radius: .15rem;
}
.lm-popup .lm-route {
  display: inline-block;
  margin-top: .6rem;
  padding: .45rem .8rem;
  background: var(--color-header);
  color: #fff;
  border-radius: .25rem;
  font-weight: 600;
  font-size: .82rem;
}
.lm-popup .lm-route:hover {
  background: var(--color-gold);
  color: var(--color-header);
}

@media (min-width: 768px) {
  .spielzeiten {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   BEGEGNUNGEN – NÄCHSTER SPIELTAG / ABSCHLUSSTABELLE
   Filterabhängig (steuert über dieselben .kf-chip-Buttons).
   1 Liga → volle Breite, 2 Ligen → nebeneinander, mobil gestapelt.
   ============================================================ */
.begegnungen {
  margin-top: 2.8rem;
}
.begegnungen-titel {
  margin: 0 0 1.4rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  color: #222;
}
.begegnungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.6rem;
  align-items: start;
}
.bg-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .05);
  padding: 1.3rem 1.4rem;
}
.bg-titel {
  margin: 0 0 .2rem;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: #222;
}
.bg-meta {
  margin: 0 0 1rem;
  color: #9a7b15;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bg-hinweis {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  font-size: .9rem;
  line-height: 1.45;
  color: #5a4a00;
  background: #fff8e2;
  border-left: 3px solid var(--color-gold);
  border-radius: .15rem;
}
.bg-block--info {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.bg-info-icon {
  flex: 0 0 auto;
  color: var(--color-gold);
}
.bg-info-text {
  margin: 0;
  color: #444;
  font-size: .98rem;
  line-height: 1.55;
}
.bg-tabelle {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: transparent;
}
.bg-tabelle th {
  background: var(--color-header);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
  padding: .5rem .7rem;
}
.bg-tabelle td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .92rem;
}
.bg-tabelle tbody tr:nth-child(even) td {
  background: #f7f7f7;
}
.bg-tabelle--stand th:first-child,
.bg-tabelle--stand td:first-child {
  width: 2.1rem;
  text-align: center;
  color: var(--color-muted);
}
.bg-tabelle--stand th:nth-child(n + 3),
.bg-tabelle--stand td:nth-child(n + 3) {
  text-align: right;
  white-space: nowrap;
}

/* --- Archiv-Tabellen (Rundschreiben / Protokolle) --- */
.archiv-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  background: var(--color-white);
}
.archiv-tabelle th {
  background: var(--color-header);
  color: #fff;
  text-align: left;
  padding: .55rem .7rem;
  font-size: .85rem;
}
.archiv-tabelle td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .92rem;
  vertical-align: top;
}
.archiv-tabelle tbody tr:nth-child(even) td {
  background: #f7f7f7;
}
.archive-year-heading {
  font-family: var(--font-heading);
  margin: 1.4rem 0 .6rem;
  color: #222;
}

/* --- Route-Icon (Paarungen-Tabelle) --- */
.route-cell {
  width: 1.8rem;
  text-align: center;
}
.route-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
  opacity: .65;
  transition: opacity .15s ease, color .15s ease;
}
.route-icon:hover,
.route-icon:focus {
  color: var(--color-gold);
  opacity: 1;
}

/* --- iCal-Hinweis (Termine-Seite) --- */
.ical-hint {
  margin: .75rem 0 1rem;
}
.ical-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .88rem;
  color: var(--color-header);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .3rem .7rem;
  text-decoration: none;
  background: #f9f9f9;
  transition: background .15s ease, border-color .15s ease;
}
.ical-link:hover,
.ical-link:focus {
  background: #fff;
  color: var(--color-gold);
  border-color: var(--color-gold);
  text-decoration: none;
}

/* --- Nächster Spieltag (Spielorte-Seite) --- */
.naechster-spieltag {
  margin: 1.5rem 0;
}
.nst-inner {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  padding: .9rem 1.2rem 1rem;
}
.nst-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-gold);
  font-weight: 700;
}
.nst-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #222;
}
.nst-datum {
  font-size: .9rem;
  color: var(--color-muted);
}