/* Source Serif 4 und Source Sans 3, beide SIL Open Font License 1.1.
   Variable Schriften: eine Datei je Zeichensatz deckt 200 bis 900 ab.
   Deshalb vier Dateien statt der vierzehn statischen Schnitte zuvor. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   St. Thomas e.V. — v2
   --------------------------------------------------------------------------
   Der Schriftzug im Logo ist eine Serife in tiefem Navy. v1 stellte eine
   geometrische Grotesk daneben und führte ein deutlich helleres Blau — das
   war der Grund, warum die Seite trotz sauberer Technik beliebig wirkte.
   v2 nimmt die Marke ernst: Serife für Überschriften, das Navy des Logos
   als führende Farbe, warme Papiertöne statt kühlem Grau.
   ========================================================================== */

:root {
  /* Marke — abgenommen vom Logo, nicht erfunden */
  --marke:        #16456f;   /* der Navy des Schriftzugs */
  --marke-tief:   #0e3053;
  --marke-hell:   #2c6d9f;   /* nur Hover und Fokus */
  --marke-blass:  #e7eef4;
  --marke-hauch:  #f2f6fa;

  /* Neutrale — durchgehend warm getönt, kein kühles Grau dazwischen */
  --tinte:        #211e1a;
  --tinte-2:      #3d382f;
  --text:         #57503f;
  --gedaempft:    #6d6557;   /* dunkel genug für 4,5:1 auch auf --flaeche-2 */
  --linie:        #e6dfd3;
  --linie-stark:  #d2c8b7;
  --papier:       #fbf9f5;
  --flaeche:      #f3eee5;
  --flaeche-2:    #ebe4d8;
  --weiss:        #ffffff;

  --fuss:         #1c1a16;
  --fuss-text:    #b3aa9a;

  /* Typografie */
  --schrift-titel: "Source Serif 4", Georgia, "Times New Roman", serif;
  --schrift-text:  "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* Raster */
  --breite: 1180px;
  --rand: 24px;

  /* Radien: innen enger, außen weicher — nicht überall derselbe Wert */
  --radius-klein: 4px;
  --radius: 8px;
  --radius-gross: 14px;

  /* Schatten warm getönt statt neutral schwarz */
  --schatten-s: 0 1px 2px rgba(43, 34, 20, .05);
  --schatten-m: 0 6px 18px rgba(43, 34, 20, .07), 0 2px 5px rgba(43, 34, 20, .04);
  --schatten-l: 0 18px 44px rgba(43, 34, 20, .11), 0 5px 12px rgba(43, 34, 20, .05);

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* --- Brücke zu den Namen aus v1 -------------------------------------
     Über tausend Zeilen CSS und alle Seiten sprechen noch die alten
     Variablen an. Statt sie überall umzubenennen, zeigen sie hier auf die
     neuen Werte. Neue Regeln verwenden die Namen oben. */
  --brand:        var(--marke);
  --brand-600:    var(--marke-tief);
  --brand-700:    var(--marke-tief);
  --brand-800:    var(--marke-tief);
  --brand-900:    #0a2540;
  --brand-050:    var(--marke-hauch);
  --brand-100:    var(--marke-blass);
  --accent:       var(--marke-hell);
  --ink:          var(--tinte);
  --ink-2:        var(--tinte-2);
  --body:         var(--text);
  --muted:        var(--gedaempft);
  --line:         var(--linie);
  --line-strong:  var(--linie-stark);
  --surface:      var(--flaeche);
  --surface-2:    var(--flaeche-2);
  --white:        var(--weiss);
  --footer-bg:    var(--fuss);
  --footer-ink:   var(--fuss-text);
  --font-head:    var(--schrift-titel);
  --font-body:    var(--schrift-text);
  --container:    var(--breite);
  --gutter:       var(--rand);
  --radius-lg:    var(--radius-gross);
  --shadow-sm:    var(--schatten-s);
  --shadow-md:    var(--schatten-m);
  --shadow-lg:    var(--schatten-l);
}

/* --------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

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

/* Jede eigene display-Angabe schlägt die Browserregel für [hidden].
   Ohne diese Zeile bleiben per JavaScript ausgeblendete Elemente sichtbar —
   etwa die gefilterten News-Karten, die display:flex tragen. */
[hidden] { display: none !important; }

h1, h2, h3, h4, h5 {
  font-family: var(--schrift-titel);
  color: var(--tinte);
  font-weight: 600;
  line-height: 1.16;
  margin: 0 0 .55em;
  letter-spacing: -.011em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.08;
}
h2 {
  font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.6rem);
  letter-spacing: -.018em;
  line-height: 1.13;
}
h3 { font-size: clamp(1.24rem, 1.06rem + .72vw, 1.55rem); letter-spacing: -.008em; }
h4 { font-size: 1.12rem; letter-spacing: 0; }

/* Fließtext bricht freundlicher um, sobald der Browser es kann. */
p, li { text-wrap: pretty; }

p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--marke);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s var(--ease);
}
a:hover { color: var(--marke-tief); }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--marke-blass); color: var(--marke-tief); }

/* -------------------------------------------------------- Hilfsklassen -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--brand-800); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 500; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- Abschnitte -- */
/* Unten etwas mehr Luft als oben — optisch sitzt ein Block sonst zu hoch. */
.section { padding: clamp(60px, 7vw, 108px) 0 clamp(70px, 8vw, 124px); }
.section--tight { padding: clamp(44px, 5vw, 72px) 0 clamp(50px, 5.6vw, 84px); }
.section--flaeche, .section--surface { background: var(--flaeche); }
.section--brand { background: var(--marke-tief); color: #d6e2ec; }
.section--brand h2, .section--brand h3 { color: #fff; }

.section-head { max-width: 44rem; margin-bottom: clamp(30px, 3.6vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; max-width: 40rem; }

/* Der Kicker war Versalien mit weiter Sperrung — die Bauart, die jede
   zweite Seite trägt. Jetzt eine Serifen-Kursive in Satzschreibung: leiser,
   und sie spricht dieselbe Sprache wie der Schriftzug im Logo. */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--schrift-titel);
  font-size: 1rem; font-weight: 400; font-style: italic;
  letter-spacing: 0; text-transform: none;
  color: var(--marke);
  margin: 0 0 12px;
}
.eyebrow::before {
  content: ""; flex: 0 0 auto;
  width: 26px; height: 1px; background: var(--marke);
}
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after {
  content: ""; flex: 0 0 auto;
  width: 26px; height: 1px; background: var(--marke);
}

/* Der Kicker verschwindet, wo er nur die Überschrift wiederholt.
   Diese Klasse blendet ihn aus, ohne die Auszeichnung aus dem HTML zu
   nehmen — sie bleibt für Vorlesewerkzeuge und Suchmaschinen erhalten. */
.eyebrow--still { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lead {
  font-size: clamp(1.09rem, 1.02rem + .3vw, 1.22rem);
  line-height: 1.6;
  color: var(--tinte-2);
  max-width: 40rem;
}
.section-head--center .lead { margin-inline: auto; }

/* ------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--schrift-text); font-size: .96rem; font-weight: 600;
  letter-spacing: .002em;
  line-height: 1;
  padding: 15px 27px;
  border-radius: var(--radius-klein);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--marke); color: #fff; }
.btn--primary:hover { background: var(--marke-tief); color: #fff; box-shadow: var(--schatten-m); }

.btn--outline { border-color: var(--linie-stark); color: var(--tinte); background: transparent; }
.btn--outline:hover { border-color: var(--marke); color: var(--marke); background: var(--marke-hauch); }

.btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn--ghost:hover { background: #fff; color: var(--marke-tief); border-color: #fff; }

.btn--sm { padding: 11px 20px; font-size: .875rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--schrift-text); font-weight: 600; font-size: .94rem;
  color: var(--marke); text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* -------------------------------------------------------------- Header -- */
.topbar {
  background: var(--brand-800);
  color: #c6dcee;
  font-size: .85rem;
}
.topbar__inner {
  display: flex; align-items: center; gap: 28px;
  min-height: 42px; flex-wrap: wrap;
}
.topbar a { color: #c6dcee; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.topbar__social { margin-left: auto; display: flex; gap: 6px; }
.topbar__social a {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.10);
  transition: background-color .2s var(--ease);
}
.topbar__social a:hover { background: var(--brand); }
.topbar__social svg { width: 15px; height: 15px; fill: currentColor; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 84px;
}
.brand { flex: none; display: block; }
.brand img { width: 172px; }

/* Navigation */
.nav__list, .nav__sub {
  list-style: none; margin: 0; padding: 0;
}
.nav__list { display: flex; align-items: center; gap: 2px; }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: .92rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  padding: 11px 11px; border-radius: 6px;
  white-space: nowrap;
  position: relative;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--brand-700); background: var(--brand-050); }
.nav__link .caret { width: 9px; height: 9px; fill: currentColor; opacity: .6; transition: transform .2s var(--ease); }

.nav__item { position: relative; }
.nav__item--current > .nav__link { color: var(--brand-700); }
.nav__item--current > .nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--brand); border-radius: 2px;
}

.nav__sub {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 268px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__item:hover > .nav__link .caret { transform: rotate(180deg); }

.nav__sub .nav__link {
  display: flex; width: 100%; white-space: normal; font-size: .9rem; font-weight: 400;
  padding: 10px 14px; border-radius: 6px; color: var(--body);
  justify-content: space-between;
}
.nav__sub .nav__link:hover { color: var(--brand-700); background: var(--brand-050); }
.nav__sub .nav__sub { top: -8px; left: calc(100% + 4px); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.header-cta { display: inline-flex; }

/* ---------------------------------------------------------------- Hero -- */
.hero { position: relative; overflow: hidden; background: var(--brand-900); }
.hero__slides { position: relative; display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  min-height: clamp(440px, 62vh, 660px);
  display: grid; align-items: center;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero__slide.is-active { opacity: 1; }

/* Sehr langsames Zurücksinken des Kopfbildes, solange die Folie sichtbar ist.
   1.04 -> 1.0 in 9,5 s linear: rund 0,4 % pro Sekunde — man sieht es erst beim
   zweiten Hinsehen, und das Bild steht am Ende exakt auf seiner Nativgröße,
   ist also gerade dann am schärfsten. Nach 5 s wechselt die Folie, der Lauf
   bricht also bei etwa 1.019 ab und beginnt beim nächsten Aufruf von vorn.
   Der Verlauf ::after liegt darüber und bewegt sich nicht mit.

   Nur für img: die Folien der Startseite tragen Videos, und die bringen ihre
   eigene Kamerabewegung schon mit. Beides übereinander hieße zwei Zoomfahrten
   in entgegengesetzter Richtung im selben Bild. Die Regel greift dort also
   derzeit nicht — sie bleibt für Folien mit Standbild. */
.hero__slide.is-active img.hero__bild {
  animation: kopfbild-sinkt 9.5s linear both;
}
@keyframes kopfbild-sinkt {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(12,52,84,.85) 0%, rgba(12,52,84,.62) 45%, rgba(12,52,84,.30) 100%);
}

/* Video-Kopfbild der ersten Folie. Geometrie erbt es von .hero__bild
   (absolut, deckend, object-fit: cover) — es füllt den Kasten also genauso
   wie ein Bild und wird auf 2,55:1 beschnitten. Das Standbild bleibt sichtbar,
   solange die Datei nicht läuft; das ist der Zustand auf Schmalbild, bei
   Datensparmodus und bei prefers-reduced-motion. */
.hero__video { background: var(--brand-900); }
.hero__content { position: relative; z-index: 2; max-width: 720px; color: #fff; padding-block: 40px; }
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: #9fc9e9;
  padding: 7px 14px; margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 100px;
}
/* Trägt h1 auf der ersten Folie, p auf den übrigen — die Größe hängt
   deshalb an der Klasse, nicht am Element. */
.hero__title {
  font-family: var(--schrift-titel);
  font-size: clamp(2.15rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero__text { font-size: 1.12rem; color: #d5e5f2; max-width: 560px; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__dots {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 26px;
  display: flex; gap: 10px;
}
.hero__dots button {
  width: 30px; height: 4px; border: 0; padding: 0; border-radius: 4px;
  background: rgba(255,255,255,.4); cursor: pointer;
  transition: background-color .2s var(--ease), width .2s var(--ease);
}
.hero__dots button[aria-current="true"] { background: #fff; width: 46px; }

/* Seiten-Hero (Unterseiten) */
.page-hero {
  position: relative;
  background: var(--brand-900) center/cover no-repeat;
  color: #fff;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,52,84,.90), rgba(12,52,84,.62));
}

/* Unterseiten haben kein Karussell, also keine Schleife: das Kopfbild sinkt
   einmal beim Aufruf zurück und steht dann still. 12 s ease-out heißt, die
   Bewegung ist in den ersten Sekunden da und danach praktisch vorbei. */
.page-hero__bild {
  animation: kopfbild-sinkt 12s cubic-bezier(.16, .8, .3, 1) both;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: 12px; max-width: 18ch; text-wrap: balance; }
.page-hero p { color: #cfe1f0; max-width: 62ch; font-size: 1.08rem; margin: 0; }

.breadcrumb { font-size: .87rem; margin-bottom: 18px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.breadcrumb a { color: #b9d5ea; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current] { color: #fff; }

/* --------------------------------------------------------------- Grids -- */
.grid { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.split--media-right > .split__media { order: 2; }

.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }

/* --------------------------------------------------------------- Cards -- */
.card {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 30px 30px 32px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-m); transform: translateY(-2px); }
.card h3 { margin-bottom: .45em; }
.card p { font-size: .99rem; color: var(--text); }

/* Auf heller Fläche kehrt sich das um: Papier auf Sand, ganz ohne Rahmen. */
.section--flaeche .card, .section--surface .card { border-color: transparent; box-shadow: var(--schatten-s); }
.section--flaeche .card:hover, .section--surface .card:hover { box-shadow: var(--schatten-m); }

.card__icon {
  width: 42px; height: 42px; margin-bottom: 18px;
  display: grid; place-items: start;
  border-radius: 0;
  background: none; color: var(--marke);
}
.card__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.card--link { display: flex; flex-direction: column; }
.card--link .link-arrow { margin-top: auto; padding-top: 18px; }

/* Säulen: Text nebeneinander, ohne Kachel. Für Inhalte, die keine
   eigenständigen Einheiten sind, sondern drei Aspekte einer Aussage.
   Ein Haarstrich links gibt ihnen Halt, mehr braucht es nicht. */
.saeulen {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
}
.saeule { border-top: 2px solid var(--marke); padding-top: 22px; }
.saeule h3 { margin-bottom: .4em; }
.saeule p { font-size: 1rem; color: var(--text); margin: 0; }
.saeule .card__icon { margin-bottom: 14px; }

@media (max-width: 900px) { .saeulen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .saeulen { grid-template-columns: 1fr; } }

/* Merkmal-Liste */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feature-list li { position: relative; padding-left: 34px; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--marke-blass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316456f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* --------------------------------------------------------------- Zahlen -- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 8px; }
.stat__value {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem);
  color: var(--brand); line-height: 1; margin-bottom: 8px;
}
.section--brand .stat__value { color: #fff; }
.stat__label { font-size: .93rem; color: var(--muted); }
.section--brand .stat__label { color: #b6cee2; }

/* ----------------------------------------------------------- Standorte -- */
.tabs__nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: 36px;
}
.tabs__tab {
  font-family: var(--font-head); font-size: .93rem; font-weight: 500;
  padding: 11px 22px; border-radius: 100px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.tabs__tab:hover { border-color: var(--brand); color: var(--brand-700); }
.tabs__tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Ohne JavaScript sind alle Standorte untereinander sichtbar.
   Erst mit JavaScript werden daraus umschaltbare Reiter. */
.tabs__nav { display: none; }
.js .tabs__nav { display: flex; }
.js .tabs__panel { display: none; }
.js .tabs__panel:not([hidden]) { display: block; }
.tabs__panel + .tabs__panel { margin-top: clamp(40px, 5vw, 64px); }
.js .tabs__panel + .tabs__panel { margin-top: 0; }

.location {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.location__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
.location__meta {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 10px; font-size: .95rem;
}
.location__meta li { display: flex; gap: 12px; align-items: flex-start; }
.location__meta svg { width: 18px; height: 18px; flex: none; margin-top: 4px; stroke: var(--brand); fill: none; stroke-width: 1.8; }

.capacity { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.capacity span {
  font-size: .85rem; padding: 6px 14px; border-radius: 100px;
  background: var(--brand-050); color: var(--brand-800); font-weight: 500;
}

/* ----------------------------------------------------------------- CTA -- */
.cta-band {
  background: linear-gradient(115deg, var(--brand-800), var(--brand-600));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(34px, 4vw, 54px);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .35em; }
.cta-band p { color: #cfe1f0; margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.phone-link {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 600;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.phone-link:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- News -- */
.news-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.news-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.news-card:hover .news-card__img img { transform: scale(1.04); }
.news-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.news-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  font-size: .74rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  background: var(--surface-2); color: var(--muted);
}
.news-card h3 { font-size: 1.12rem; margin-bottom: .5em; }
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a:hover { color: var(--brand-700); }
.news-card time { font-size: .85rem; color: var(--muted); }
.news-card .link-arrow { margin-top: auto; padding-top: 16px; }

/* ------------------------------------------------------------- Partner -- */
.partnerband { border-top: 1px solid var(--linie); }
.partnerband__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.partnerband__text {
  margin: 0; flex: 0 0 auto;
  font-family: var(--schrift-titel); font-style: italic;
  font-size: 1.05rem; color: var(--gedaempft);
}
.partnerband .partners { flex: 1 1 340px; justify-content: flex-start; }

@media (max-width: 700px) {
  .partnerband__inner { flex-direction: column; align-items: flex-start; }
  .partnerband .partners { justify-content: center; width: 100%; }
}

.partners {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(30px, 5vw, 70px);
}
.partners img {
  max-height: 54px; width: auto;
  filter: grayscale(1); opacity: .72;
  transition: filter .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
.partners a:hover img { transform: translateY(-2px); }
.partners .logo-hoch { max-height: 62px; }
.partners a:hover img, .partners img:hover { filter: grayscale(0); opacity: 1; }

/* -------------------------------------------------------------- Galerie -- */
/* Bildergalerie. Die Spaltenzahl ergibt sich aus der Breite — vom Handy
   (eine Spalte) bis zum großen Schirm (vier) ohne eigene Haltepunkte. */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
/* Nur oben gerundet: unten sitzt die Bildunterschrift bündig an der Kante,
   ein Radius dort würde die Unterlängen der ersten Zeichen anschneiden.
   Das Bild selbst behält seinen eigenen Radius auch unten. */
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.gallery img {
  aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius);
  width: 100%; display: block;
  transition: transform .45s var(--ease);
}
/* Dieselbe Geste wie bei .news-card__img: das Bild wächst um 4 %, der
   Ausschnitt bleibt stehen. Nur auf Geräten mit echtem Zeiger — auf dem
   Handy gäbe es sonst einen Zustand, der beim Tippen hängen bleibt. */
@media (hover: hover) {
  .gallery figure:hover img { transform: scale(1.04); }
}
.gallery figcaption { margin-top: 8px; font-size: .88rem; color: var(--muted); line-height: 1.45; }

/* -------------------------------------------------------------- Kontakt -- */
.contact-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
}
.contact-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.contact-card__person { font-size: .95rem; color: var(--muted); margin-bottom: 18px; }
.contact-card dl { margin: 0; display: grid; gap: 10px; font-size: .95rem; }
.contact-card dl > div { display: flex; gap: 12px; align-items: flex-start; }
.contact-card dt { flex: none; }
.contact-card dt svg { width: 18px; height: 18px; margin-top: 4px; stroke: var(--brand); fill: none; stroke-width: 1.8; }
.contact-card dd { margin: 0; }
.contact-card a { color: var(--body); text-decoration: none; }
.contact-card a:hover { color: var(--brand-700); text-decoration: underline; }

.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours th { color: var(--ink-2); font-weight: 500; }
.hours td { text-align: right; color: var(--body); font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- Formular -- */
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--font-head); font-size: .89rem; font-weight: 500; color: var(--ink-2); }
.field .req { color: #c0392b; }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 13px 15px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.field textarea { min-height: 160px; resize: vertical; }
.field--check { display: flex; gap: 12px; align-items: flex-start; }
.field--check input { width: 18px; height: 18px; margin-top: 4px; flex: none; }
.field--check label { font-family: var(--font-body); font-weight: 400; font-size: .92rem; color: var(--body); }
.form__note { font-size: .87rem; color: var(--muted); }

/* ---------------------------------------------------------------- Stellen -- */
.job {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  padding: 22px 26px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.job:hover { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }
.job h3 { font-size: 1.08rem; margin-bottom: 6px; }
.job__meta { font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ---------------------------------------------------------------- Footer -- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); font-size: .95rem; }
.site-footer__main { padding: clamp(48px, 6vw, 76px) 0 44px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr .9fr 1.15fr;
  gap: clamp(30px, 4.5vw, 64px);
}
.site-footer h4 {
  color: #fff; font-family: var(--schrift-titel);
  font-size: 1.06rem; font-weight: 600;
  letter-spacing: -.005em; text-transform: none;
  margin-bottom: 18px;
}
.site-footer a { color: var(--footer-ink); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-logo { width: 180px; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: .92; }
.footer-contact { display: grid; gap: 12px; }
.footer-contact div { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: 4px; stroke: var(--marke-hell); fill: none; stroke-width: 1.7; }

.social { display: flex; gap: 10px; margin-top: 22px; }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--radius-klein); background: rgba(255,255,255,.07);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.social a:hover { background: var(--marke-hell); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; fill: #fff; }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 22px 0;
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  font-size: .88rem;
}
.site-footer__bottom nav { margin-left: auto; display: flex; gap: 24px; }

.donate-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 22px;
  /* Nur so breit wie die IBAN — sonst zieht sich der Kasten
     in der Spalte unnoetig in die Breite. */
  width: fit-content;
  max-width: 100%;
}
.donate-box strong {
  color: #fff; display: block; margin-bottom: 8px;
  font-family: var(--schrift-titel); font-size: 1rem; font-weight: 600;
}
.donate-box code {
  display: block;
  font-size: .82rem; line-height: 1.75; color: #d8d0c2;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Prosa -- */
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--brand);
  font-size: 1.1rem; color: var(--ink-2); font-style: italic;
}

/* --------------------------------------------------- Stellenanzeigen -- */
.job h3 a { color: inherit; text-decoration: none; }
.job h3 a:hover { color: var(--brand-700); }

/* Zähler im Standort-Reiter */
.tabs__count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 100px;
  background: var(--surface-2); color: var(--muted);
  font-size: .74rem; font-weight: 600;
}
.tabs__tab[aria-selected="true"] .tabs__count {
  background: rgba(255,255,255,.22); color: #fff;
}

/* Ohne JavaScript trägt jede Gruppe ihre eigene Überschrift,
   mit JavaScript steht der Standort schon auf dem Reiter. */
.tabs__panel-title { margin-bottom: 18px; }
.js .tabs__panel-title { display: none; }

/* Detailseite einer Stellenanzeige */
.job-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.job-detail__main h2:first-child { margin-top: 0; }
.job-detail__main h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.job-detail__side { position: sticky; top: 108px; }

.job-facts { margin: 18px 0 0; display: grid; gap: 14px; }
.job-facts > div { display: grid; gap: 2px; }
.job-facts dt {
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.job-facts dd { margin: 0; color: var(--ink); font-size: .97rem; }

/* ------------------------------------------------------- Flipbook -- */
.flipbook {
  /* Aus der schmalen Textspalte ausbrechen: Scans brauchen Fläche.
     Die Textspalte ist 860px breit, der Rahmen darf bis 1140px.
     Der Ausbruch ist doppelt gedeckelt — er endet am Rand des Viewports
     abzüglich Rand und Bildlaufleiste, sonst entsteht seitliches Scrollen. */
  --fb-ausbruch: clamp(0px, (1140px - 100%) / 2, calc(50vw - 50% - var(--gutter) - 18px));
  margin: 0 calc(-1 * var(--fb-ausbruch)) 34px;
  padding: clamp(16px, 2.5vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.flipbook:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.flipbook__stage {
  min-height: 220px;
  display: flex; justify-content: center;
  touch-action: pan-y;
}
.flipbook.is-ready .flipbook__stage { min-height: 0; }

.flipbook__single {
  max-width: 100%; height: auto;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
}

.flipbook__status {
  margin: 0 0 14px;
  font-size: .93rem; color: var(--muted); text-align: center;
}
.flipbook__status--error { color: #8a2a20; }

.flipbook__controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 22px;
}
.flipbook__nav {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: #fff; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease);
}
.flipbook__nav:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-050); }
.flipbook__nav:disabled { opacity: .35; cursor: default; }
.flipbook__nav svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--ink-2); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.flipbook__counter {
  font-family: var(--font-head); font-size: .9rem; font-weight: 500;
  color: var(--body); font-variant-numeric: tabular-nums;
  min-width: 12ch; text-align: center;
}

.flipbook__download { margin-top: 20px; text-align: center; }

/* Die Seiten selbst verwaltet StPageFlip. Im HTML-Modus sind es echte
   img-Elemente — die bleiben beim Zoomen scharf. */
.flipbook .stf__parent { margin-inline: auto; }
.flipbook .page {
  background: #fff;
  overflow: hidden;
}
.flipbook .page img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;

  /* Der Viewer steht mitten im Artikeltext. Dessen Bildregeln
     (`.article-body img` mit Außenabstand und runden Ecken) würden die
     Seiten im Rahmen nach unten schieben und unten abschneiden — sichtbar
     erst nach dem ersten Blättern, weil StPageFlip die Startseite anders
     aufbaut. Deshalb hier alles zurücksetzen, was von außen hereinwirkt. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  vertical-align: top;
}

/* Gleicher Grund: Das Einzelblatt darf keinen geerbten Außenabstand haben. */
.flipbook__single { margin: 0; }
/* Vor der Initialisierung dürfen die Seiten nicht als Stapel aufblitzen */
.flipbook__stage > .page { display: none; }
.flipbook__stage .stf__parent .page { display: block; }


/* ---------------------------------------------------------- Lupe -- */
.flipbook__nav--zoom svg { stroke-width: 1.9; }

.flipbook__singlebtn {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  display: block; max-width: 100%;
  border-radius: 6px;
}
.flipbook__singlebtn:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

body.lupe-offen { overflow: hidden; }

.lupe {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(12, 20, 26, .95);
  display: flex; flex-direction: column;
}

.lupe__bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(12px, 2.5vw, 28px);
  color: #e6edf3;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.lupe__group { display: flex; align-items: center; gap: 10px; }

.lupe__info {
  font-family: var(--font-head); font-size: .92rem; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  min-width: 13ch; text-align: center;
}

.lupe__btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.26); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background-color .2s var(--ease), opacity .2s var(--ease);
}
.lupe__btn:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.lupe__btn:disabled { opacity: .3; cursor: default; }
.lupe__btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.lupe__btn--zoom[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
/* Im gezoomten Zustand wird aus dem Plus ein Minus */
.lupe__btn--zoom[aria-pressed="true"] .lupe__plus { display: none; }

.lupe__stage {
  flex: 1; min-height: 0;
  /* Flex statt Grid: nur so hat das Bild eine definierte Bezugshöhe für
     max-height: 100% — im Grid wächst die Zeile mit dem Inhalt mit und die
     Seite ragt unten heraus. */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 1.6vw, 22px);
  overflow: hidden;
  color: #aebac4; font-size: .93rem;
}
.lupe__laden { margin: 0; }

/* Standard: die Seite passt vollständig auf den Schirm — kein Scrollen. */
.lupe__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  background: #fff;
  cursor: zoom-in;
}

/* Erst auf Wunsch in Originalgröße — dann darf gescrollt werden. */
.lupe--gezoomt .lupe__stage {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  justify-content: safe center;
}
.lupe--gezoomt .lupe__img {
  max-width: none; max-height: none;
  width: min(3000px, 180vw);
  cursor: zoom-out;
}

@media (max-width: 720px) {
  .lupe__info { min-width: 0; font-size: .85rem; }
  .lupe__btn { width: 36px; height: 36px; }
  .lupe__btn svg { width: 18px; height: 18px; }
}

/* ------------------------------------------------------ Artikelkopf -- */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-bottom: 26px;
  font-size: .92rem; color: var(--muted);
}
.article-meta time { font-variant-numeric: tabular-nums; }

.article-body img { border-radius: var(--radius); margin-block: 1.4em; }
.article-body figure { margin: 1.6em 0; }
.article-body figcaption { font-size: .88rem; color: var(--muted); margin-top: .6em; }

.news-filter { margin-bottom: 34px; justify-content: flex-start; }
.news-filter__leer { margin-bottom: 30px; }
.tabs__tab[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.tabs__tab[aria-pressed="true"] .tabs__count { background: rgba(255,255,255,.22); color: #fff; }

.news-card__img--leer {
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--brand);
}
.news-card__img--leer svg { width: 46px; height: 46px; }

@media (max-width: 720px) {
  .flipbook { padding: 14px; }
  .flipbook__controls { gap: 12px; }
  .flipbook__counter { min-width: 11ch; font-size: .85rem; }
}


/* -------------------------------------- Reiter auf schmalen Schirmen -- */
/* Untereinander gestapelt fressen sieben Standorte den halben Bildschirm.
   Deshalb ab hier eine Zeile, die seitlich gescrollt wird. */
@media (max-width: 860px) {
  .tabs__nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* bis an den Bildschirmrand laufen lassen, sonst wirkt es abgeschnitten */
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .tabs__nav::-webkit-scrollbar { height: 6px; }
  .tabs__nav::-webkit-scrollbar-track { background: transparent; }
  .tabs__nav::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: 100px;
  }
  .tabs__tab {
    flex: none;
    scroll-snap-align: start;
  }
}


/* ------------------------------------------------ News mit Seitenleiste -- */
.news-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
/* Ohne min-width:0 schrumpfen Grid-Spalten nicht unter ihren Inhalt —
   die seitlich scrollende Jahresleiste würde die Seite auseinanderziehen. */
.news-layout > * { min-width: 0; }

.news-side { position: sticky; top: 108px; }
.news-side__titel {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 16px;
}
.news-side__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.news-side__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  font-family: var(--font-head); font-size: .95rem; font-weight: 500;
  text-align: left;
  padding: 10px 14px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.news-side__btn:hover { background: var(--brand-050); color: var(--brand-700); }
.news-side__btn[aria-pressed="true"] { background: var(--brand); color: #fff; }
.news-side__btn[aria-pressed="true"] .tabs__count { background: rgba(255,255,255,.22); color: #fff; }

.news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

/* Auf schmalen Schirmen wandern die Jahre nach oben in eine Scrollzeile. */
@media (max-width: 860px) {
  .news-layout { grid-template-columns: 1fr; gap: 24px; }
  .news-side { position: static; }
  .news-side__titel { margin-bottom: 10px; }
  .news-side__liste {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .news-side__liste::-webkit-scrollbar { height: 6px; }
  .news-side__liste::-webkit-scrollbar-track { background: transparent; }
  .news-side__liste::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; }
  .news-side__btn {
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    padding: 9px 16px;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .news-side__btn[aria-pressed="true"] { border-color: var(--brand); }
}


/* --------------------------------------------------------- Video -- */
/* Zwei-Klick-Lösung: sichtbar ist zunächst nur ein lokales Standbild.
   Der YouTube-Player kommt erst nach ausdrücklichem Klick dazu. */
.video {
  margin: 0;
  max-width: 900px;
  margin-inline: auto;
}
/* Im zweispaltigen Layout füllt das Video seine Spalte */
.split__media > .video { max-width: none; }

.video__start {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-900);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.video__start img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.video__start:hover img { transform: scale(1.03); opacity: .85; }
.video__start:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

.video__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.video__play span {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.video__start:hover .video__play span { transform: scale(1.08); background: #fff; }
.video__play svg {
  width: 26px; height: 26px; margin-left: 4px;
  fill: var(--brand-800);
}

.video__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 22px 18px;
  background: linear-gradient(to top, rgba(10,26,40,.88), transparent);
  color: #fff;
  font-family: var(--font-head); font-weight: 500; font-size: 1.05rem;
  text-align: left;
}

.video__frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}
.video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.video__hinweis {
  margin: 12px 0 0;
  font-size: .85rem; color: var(--muted);
  text-align: center;
}
.video.is-playing .video__hinweis { display: none; }

@media (max-width: 720px) {
  .video__play span { width: 58px; height: 58px; }
  .video__play svg { width: 20px; height: 20px; }
  .video__label { font-size: .95rem; padding: 32px 16px 14px; }
}


/* ------------------------------------ Aus WordPress übernommene Seiten -- */
/* Die Texte kommen aus dem alten Redaktionssystem und bringen eigene
   Strukturen mit — hier auf das Design der neuen Seite gebracht. */
.uebernommen h2 {
  margin-top: 2.2em;
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
}
.uebernommen h2:first-child { margin-top: 0; }

.uebernommen h3 {
  margin-top: 1.9em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
  color: var(--brand-800);
}

.uebernommen ul:not(.feature-list) { padding-left: 1.3em; }
.uebernommen li + li { margin-top: .5em; }

.inhalt-bild {
  margin: 2em 0;
}
.inhalt-bild img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Text-Bild-Element des alten Themes */
.split--klein {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
  margin: 2em 0;
}
.split--klein .split__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 720px) {
  .split--klein { grid-template-columns: 1fr; }
  .uebernommen h3 { margin-top: 1.6em; }
}


/* ------------------------------------------------ Bewerbungsformular -- */
.field input[type="file"] {
  padding: 11px 14px;
  font-size: .95rem;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font-head); font-size: .875rem; font-weight: 500;
  margin-right: 14px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: #fff; color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input[type="file"]:hover::file-selector-button {
  border-color: var(--brand); color: var(--brand-700); background: var(--brand-050);
}

.dateiliste {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 6px;
  font-size: .9rem;
}
.dateiliste__eintrag {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.dateiliste__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink);
}
.dateiliste__groesse {
  flex: none;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.dateiliste__eintrag.is-fehler {
  border-color: #f0b2ab; background: #fdecea;
}
.dateiliste__eintrag.is-fehler .dateiliste__groesse { color: #8a2a20; }

.dateiliste__summe {
  padding: 2px 2px 0;
  color: var(--muted); font-size: .87rem;
}
.dateiliste__summe.is-fehler { color: #8a2a20; font-weight: 500; }

/* ------------------------------------------------------------ Responsiv -- */
@media (max-width: 1140px) {
  /* Ab hier reichen Logo + Navigation die Zeile aus – der Button muss weichen. */
  .header-cta { display: none; }
}

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .header-cta { display: none; }
  .job-detail { grid-template-columns: 1fr; }
  .job-detail__side { position: static; }
  .js .nav-toggle { display: inline-flex; }

  /* Ohne JavaScript steht die Navigation ausgeklappt im Textfluss,
     mit JavaScript wird sie zum ausklappbaren Menü. */
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { width: 100%; padding-bottom: 12px; }

  .js .site-header__inner { flex-wrap: nowrap; }
  .js .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; width: auto;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 84px); overflow-y: auto;
    padding: 12px var(--gutter) 24px;
    display: none;
  }
  .site-nav.is-open { display: block; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__item:last-child { border-bottom: 0; }
  .nav__link { padding: 15px 4px; justify-content: space-between; border-radius: 0; }
  .nav__item--current > .nav__link::after { display: none; }

  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 10px 16px; min-width: 0;
  }
  .js .nav__sub { display: none; }
  .nav__item.is-open > .nav__sub { display: block; }
  .nav__item.is-open > .nav__link .caret { transform: rotate(180deg); }
  .nav__sub .nav__link { padding: 11px 4px; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split, .location { grid-template-columns: 1fr; }
  .split--media-right > .split__media { order: 0; }
  .cta-band { grid-template-columns: 1fr; }
  .job { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .topbar__inner { gap: 14px; padding-block: 9px; }
  .topbar__item--address { display: none; }
  .topbar__social { display: none; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .site-footer__bottom nav { margin-left: 0; }
  .hero__slide { min-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------- Druck -- */
@media print {
  .topbar, .site-header, .site-footer, .hero__dots, .cta-band { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* Vier Bilder wirken als 2x2 oder als eine Reihe besser als 3+1. */
@media (min-width: 560px) {
  .gallery--vier { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .gallery--vier { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------- Karte -- */
/* Vor dem Klick nur ein lokales Vorschaubild — es wird nichts von einem
   Kartendienst nachgeladen. Erst der Knopf bettet OpenStreetMap ein. */

.karte {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.karte__vorschau { position: relative; display: block; }
.karte__vorschau img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 2 / 1; object-fit: cover;
}

/* Die Deckfläche sitzt unten, damit der Kartenausschnitt darüber sichtbar
   bleibt. Ein voller Schleier über der Karte macht den Text zwar lesbar,
   nimmt aber genau die Information weg, wegen der die Karte da ist. */
.karte__deckel {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 22px; flex-wrap: wrap;
  padding: 16px 20px;
  background: rgba(16, 27, 36, .88);
  backdrop-filter: blur(2px);
}
.karte__deckel p {
  margin: 0; flex: 1 1 22ch; min-width: 0;
  color: #e6edf3; font-size: .86rem; line-height: 1.5;
}
.karte__deckel .btn { flex: none; }

/* Der obere Teil bekommt nur einen leichten Verlauf, damit die Kante
   zwischen Karte und Deckfläche nicht hart wirkt. */
.karte__vorschau::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,27,36,0) 55%, rgba(16,27,36,.35) 100%);
  pointer-events: none;
}

.karte__fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 12px 18px;
  font-size: .85rem; color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--white);
}
.karte__fuss a { color: var(--brand-700); }
.karte__quelle { margin-left: auto; font-size: .78rem; }

.karte__rahmen { aspect-ratio: 2 / 1; background: var(--surface-2); }
.karte__rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 640px) {
  .karte__vorschau img, .karte__rahmen { aspect-ratio: 4 / 3; }
  .karte__quelle { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------- Rezensionen -- */
/* Ohne JavaScript stehen alle Rezensionen untereinander. Erst das Skript
   setzt .ist-karussell und blendet bis auf eine alle aus. */

.rezensionen { display: grid; gap: 18px; }

.rezension {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}

.rezension__sterne { display: flex; gap: 3px; margin-bottom: 14px; }
.rezension__sterne svg { width: 19px; height: 19px; fill: #f5a623; }

.rezension__text {
  margin: 0 0 18px;
  font-size: 1.05rem; line-height: 1.65; color: var(--ink-2);
}
.rezension__text::before { content: "\201E"; }
.rezension__text::after  { content: "\201C"; }

.rezension__wer {
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; color: var(--muted);
}
.rezension__wer strong { color: var(--ink); font-weight: 600; }

.rezensionen.ist-karussell { position: relative; display: block; }
.rezensionen.ist-karussell .rezension { display: none; }
.rezensionen.ist-karussell .rezension.ist-aktiv { display: block; }

.rezensionen__steuerung {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 22px;
}
.rezensionen__nav {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.rezensionen__nav:hover { border-color: var(--brand); background: var(--brand-050); }
.rezensionen__nav svg { width: 18px; height: 18px; }

.rezensionen__punkte { display: flex; gap: 8px; }
.rezensionen__punkt {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--line-strong);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.rezensionen__punkt[aria-current="true"] { background: var(--brand); transform: scale(1.25); }

.rezensionen__quelle {
  margin: 18px 0 0;
  font-size: .85rem; color: var(--muted); text-align: center;
}

/* ================================================================== */
/*  Ersatz für Inline-Styles                                          */
/*                                                                     */
/*  Die Sicherheitsrichtlinie der Seite (Content-Security-Policy)      */
/*  erlaubt nur Stile aus dieser Datei. style="…"-Attribute würden     */
/*  vom Browser verworfen — deshalb steht hier alles, was vorher       */
/*  direkt im HTML stand.                                             */
/* ================================================================== */

/* --------------------------------------------------------- Abstände -- */
.mt-0    { margin-top: 0; }
.mt-xs   { margin-top: 10px; }
.mt-s    { margin-top: 14px; }
.mt-m    { margin-top: 24px; }
.mt-l    { margin-top: 32px; }
.mt-xl   { margin-top: 44px; }
.mt-text { margin-top: 1.6em; }
.mb-s    { margin-bottom: 16px; }
.mb-m    { margin-bottom: 26px; }
.m-0     { margin: 0; }
.mt-block { margin-top: clamp(32px, 4vw, 52px); }

/* ------------------------------------------------------- Textgrößen -- */
.klein     { font-size: .95rem; }
.gross     { font-size: 1.1rem; }
.gedaempft { color: var(--muted); }
.ohne-strich { text-decoration: none; }
.zentriert { text-align: center; }
.adresse   { font-style: normal; }
.adresse--gross { font-style: normal; font-size: 1.05rem; margin-bottom: 26px; }

/* Knopfreihen */
.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.6em; }
.knopfreihe--zentriert { justify-content: center; margin-top: 2em; gap: 14px; }

/* Bildunterschrift außerhalb der Galerie */
.bildunterschrift { margin-top: 10px; font-size: .88rem; color: var(--muted); }

/* ------------------------------------------------------ Kontodaten -- */
.konto { display: grid; gap: 14px; margin: 20px 0 0; }
.konto dt {
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.konto dd { margin: 2px 0 0; font-size: 1.05rem; color: var(--ink); }
.konto dd.iban { font-family: ui-monospace, Consolas, monospace; }

/* --------------------------------------------- Meldungen in Formularen -- */
.formmeldung {
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 26px;
}
.formmeldung:last-child { margin-bottom: 0; }
.formmeldung--ok      { background: #e9f7ee; border: 1px solid #a8d9bb; color: #1c5c35; }
.formmeldung--fehler  { background: #fdecea; border: 1px solid #f0b2ab; color: #8a2a20; }
.formmeldung--warnung { background: #fff4e5; border: 1px solid #f0c893; color: #7a4a06; }

/* Spamfalle: für Menschen unsichtbar, für Bots ein verlockendes Feld */
.honigtopf { position: absolute; left: -9999px; }

/* ------------------------------------------------ Hintergrundbilder -- */
/* Statt background-image im style-Attribut steht das Bild jetzt als
   img-Element im Markup. Das ist nicht nur richtlinienkonform, der
   Browser kann das Bild dadurch auch früher anfordern. */
.hero__bild, .page-hero__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero > .container, .hero__slide > .container { position: relative; z-index: 2; }
.page-hero::after, .hero__slide::after { z-index: 1; }

/* ------------------------------------------------------- Sonstiges -- */
.card--oben     { align-self: start; }
.grid--eng      { gap: 14px; }
.spalte-voll    { grid-column: 1 / -1; }
.breite-640     { max-width: 640px; }
.logo-hoch      { max-height: 80px; }
.titel-klein    { font-size: 1.5rem; }
.pflichtnote    { color: var(--brand-700); font-family: var(--font-head); font-weight: 500; margin-bottom: .8em; }
.req            { color: #c0392b; }
.tabellenkopf   { color: var(--ink); font-family: var(--font-head); }
.hinweis-klein  { margin-top: 18px; font-size: .95rem; color: var(--muted); }