@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('/static/fonts/myriad-pro/MYRIADPRO-REGULAR.woff') format('woff');
}

/*
  Dark Mode: semantische Rollen statt Farbnamen - "--ms-violett-dunkel" waere
  im dunklen Thema ein heller Ton und damit eine Luege im Code. Beide Bloecke
  haengen am selben Attribut data-bs-theme (siehe skeleton.twig), das auch
  Bootstrap 5.3 fuer seine eigenen Bauteile liest - kein zweiter Mechanismus
  ueber eine eigene Media-Query, sonst laufen beide auseinander.
*/
:root {
  color-scheme: light dark;   /* Scrollbalken und Formularelemente folgen mit */

  --ms-hintergrund:        #F6F0F9;   /* Seitengrund */
  --ms-flaeche:            #ffffff;   /* Karten, Container */
  --ms-flaeche-hoch:       #EBDEF3;   /* abgesetzte Flaeche, Tabellenkopf */
  --ms-rand:               #D6C1DF;
  --ms-text:               #633085;   /* Fliesstext */
  /*
    War #6c757d (Bootstraps Grauton). Auf dem Seitengrund #F6F0F9 kam der nur auf
    4.19:1 und lag damit unter den 4.5:1, die normaler Text braucht - ausgerechnet
    bei Meta-Zeilen und Quellenhinweisen, also dem, was schon klein gesetzt ist.
    #5c636a erreicht 5.44:1 und sieht praktisch gleich aus.
  */
  --ms-text-gedaempft:     #5c636a;   /* Meta-Zeilen, Quellenhinweise */
  --ms-text-auf-akzent:    #ffffff;   /* Schrift auf violetter Flaeche */
  --ms-akzent:             #7B44A4;   /* Links, Balken, Verlaeufe */
  --ms-akzent-hover:       #4e2569;
  --ms-akzent-flaeche:     #DAC3E7;   /* helles Violett als Flaeche (.farbe2) */
  --ms-akzent-stark:       #633085;   /* dunkles Violett als Flaeche (.farbe1) */
  --ms-gruen:              #bfdb34;   /* .farbe3 */
  --ms-gruen-rand:         #84A000;
  --ms-gruen-flaeche:      #EEF4DC;

  /* Fuer die rgba()-Stellen: dieselbe Farbe in verschiedenen Deckungsgraden */
  --ms-akzent-rgb:         99, 48, 133;
  /* Fuer Ausblend-Verlaeufe in den Kartengrund (z.B. .agenda-teaser.is-clamped) -
     ein Verlauf zu "transparent" faerbt sonst auf beiden Enden verschieden ein,
     siehe Kommentar bei .h1-line */
  --ms-flaeche-rgb:        255, 255, 255;
  /* Dasselbe fuer Ausblend-Verlaeufe, die in --ms-akzent-flaeche blenden
     (z.B. die Rand-Hinweise am Testimonial-Swiper) */
  --ms-akzent-flaeche-rgb: 218, 195, 231;

  /* Eigenstaendige Toene nur fuer die Startseite (pages/start.twig), kommen
     in der Hauptpalette sonst nicht vor (Save-the-date-Kachel) */
  --ms-start-orange:       #C84C31;
  --ms-start-schatten:     #CBB1D0;

  /*
    Eigene Hover/Active-Stufen fuer violette Flaechen mit hellem Text
    (--ms-text-auf-akzent) darauf - z.B. .btn-primary, .links-sprungmarke.
    --ms-akzent/--ms-akzent-hover wurden bewusst NICHT wiederverwendet: die
    sind fuer Text/Links gedacht und werden im dunklen Thema absichtlich
    heller, damit sie auf dunklem Grund lesbar bleiben. Genau das kehrt sich
    um, wenn dieselbe Variable als Flaeche unter hellem Text dient - heller
    Text auf einer dann ebenfalls hellen Flaeche waere kaum noch zu lesen.
    Diese beiden Stufen bleiben darum in beiden Themen dunkel genug.
  */
  --ms-akzent-stark-hover:  #7a3ca0;
  --ms-akzent-stark-active: #4e2569;

  /*
    Die zwei Zusatztoene im Farbverlauf der Ueberschriften (siehe h1 weiter
    unten). Der Verlauf hatte hier #A8CE4C und #D6C1DF fest eingetragen, mit der
    Begruendung, es sei dekorative Schrift und brauche keine dunkle Variante.
    Auf dem hellen Grund erreichten die beiden aber nur 1.6:1 bzw. 1.5:1 - Anfang
    und Mitte jeder Ueberschrift lagen damit weit unter den 3:1, die fetter
    Grosstext braucht. Sichtbar war das vor allem im Ruhezustand, also bevor die
    Animation den Verlauf in die Volltonfarbe aufloest, und dauerhaft bei
    "weniger Bewegung".

    Darum jetzt als Variable je Thema:
      hell   abgedunkelte Fassungen, 4.39:1 (gruen) und 3.77:1 (lila)
      dunkel unveraendert die bisherigen Toene - dort tragen sie mit ueber 10:1,
             das dunkle Thema sieht also genau aus wie vorher

    Der zweite und vierte Stopp bleiben var(--ms-akzent) und wechseln damit von
    selbst mit. Bewusst NICHT --ms-akzent-stark: das wird im dunklen Thema zu
    #4a3663 und kaeme auf dunklem Grund auf 1.74:1.
  */
  --ms-h1-verlauf-gruen: #5F7A0A;
  --ms-h1-verlauf-lila:  #8E6FA5;
}

[data-bs-theme="dark"] {
  --ms-hintergrund:        #17131f;
  --ms-flaeche:            #211b2c;
  --ms-flaeche-hoch:       #2b2338;
  --ms-rand:               #3d3350;
  --ms-text:               #e8dff2;
  --ms-text-gedaempft:     #a99fb8;
  --ms-text-auf-akzent:    #f4eefa;
  --ms-akzent:             #c9a3e6;
  --ms-akzent-hover:       #ddc4f2;
  --ms-akzent-flaeche:     #3a2d4d;
  --ms-akzent-stark:       #4a3663;
  --ms-gruen:              #bfdb34;
  --ms-gruen-rand:         #8fae1e;
  --ms-gruen-flaeche:      #2a3318;

  --ms-akzent-rgb:         201, 163, 230;
  --ms-flaeche-rgb:        33, 27, 44;
  --ms-akzent-flaeche-rgb: 58, 45, 77;

  --ms-start-orange:       #e0654a;
  --ms-start-schatten:     #4a2f52;

  --ms-akzent-stark-hover:  #5c4380;
  --ms-akzent-stark-active: #3a2650;

  /*
    Hier bewusst die HELLEN Toene: auf dem dunklen Grund erreichen sie 10.1:1
    bzw. 10.9:1. Das dunkle Thema behaelt damit genau den Verlauf, den es bisher
    hatte - geaendert wurde nur das helle.
  */
  --ms-h1-verlauf-gruen: #A8CE4C;
  --ms-h1-verlauf-lila:  #D6C1DF;
}

body
{
  font-family:'Myriad Pro Regular';
  background-color: var(--ms-hintergrund);
  color: var(--ms-text);
}


/* ---------------------------------------------------------------------
   Sprungmarke zum Inhalt (erstes Element im body, siehe skeleton.twig)

   Sichtbar nur bei Tastaturfokus. Bewusst NICHT mit display:none oder
   visibility:hidden versteckt - beides nimmt das Element aus der
   Tab-Reihenfolge, damit waere die Sprungmarke nicht erreichbar und der
   ganze Zweck verfehlt. Stattdessen aus dem Bild geschoben.

   Der Fokuszustand hat einen eigenen, deutlichen Rahmen: wer hierher
   tabbt, muss auf Anhieb sehen, wo er ist.
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  background: var(--ms-akzent-stark);
  color: var(--ms-text-auf-akzent);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  color: var(--ms-text-auf-akzent);
  text-decoration: underline;
  outline: 3px solid var(--ms-gruen);
  outline-offset: 2px;
}

/* Das Sprungziel selbst traegt tabindex="-1" (siehe skeleton.twig). Ohne diese
   Zeile zeichnen manche Browser danach einen Fokusrahmen um den GANZEN
   Inhaltsbereich - der Sprung hat funktioniert, sieht aber nach einem Fehler aus. */
main:focus {
  outline: none;
}


/* ---------------------------------------------------------------------
   Links (seitenweit)
   Bootstrap liefert per default sein Standard-Blau (#0d6efd) - das passt
   nicht zum violetten Farbschema. #7B44A4 ist bereits an mehreren Stellen
   im Design als Akzentviolett im Einsatz (u.a. im h1-Farbverlauf), hebt
   sich aber deutlich vom dunkleren Fliesstext (#633085, siehe "main"
   weiter unten) ab, damit Links als Links erkennbar bleiben.
   Nur Elemente ohne eigene Farbe/Unterstreichung sind betroffen - Fusszeile,
   Navbar, Card-Titel etc. haben weiter unten ihre eigenen, spezifischeren
   Regeln und werden hiervon nicht ueberschrieben.
   --------------------------------------------------------------------- */
a {
  color: var(--ms-akzent);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--ms-akzent-hover);
  text-decoration: underline;
}


.farbe1
{
  /* Dunkles Violett */
  background-color: var(--ms-akzent-stark);
  /* Ohne eigene Schriftfarbe zieht der Text seine Farbe aus main (--ms-text) -
     im dunklen Thema waere das helles Lila auf dunklem Lila, kaum lesbar */
  color: var(--ms-text-auf-akzent);
}

.farbe2
{
  /* Helles Violett */
  background-color: var(--ms-akzent-flaeche);
}

.farbe3
{
  /* Gruen bleibt in beiden Themen gleich hell (siehe --ms-gruen) - im dunklen
     Thema waere der sonst hier erbende helle Fliesstext (--ms-text) kaum vom
     hellen Gruen zu unterscheiden. --ms-akzent-stark bleibt in beiden Themen
     dunkel genug fuers Auge. */
  background-color: var(--ms-gruen);
  color: var(--ms-akzent-stark);
}


.h1-line {
  flex: 1;
  height: 1px;
  border: none;
  margin: 0;
  opacity: 1;
}

/* linke Linie läuft von transparent nach Violett. "transparent" ist in Safari
   historisch rgba(0,0,0,0) - auf dunklem Grund gaebe das einen grauen
   Schimmer statt sauber auszublenden, darum rgba(...,0) der Akzentfarbe. */
.h1-line:first-child {
  background: linear-gradient(90deg, rgba(var(--ms-akzent-rgb), 0), rgb(var(--ms-akzent-rgb)));
}

/* rechte Linie läuft von Violett nach transparent */
.h1-line:last-child {
  background: linear-gradient(90deg, rgb(var(--ms-akzent-rgb)), rgba(var(--ms-akzent-rgb), 0));
}


.h1-line-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.h1-line {
  flex: 1;
  border: none;
  border-top: 1px solid var(--ms-akzent);
  margin: 0;
  opacity: 1;
}

/*
  Farbverlauf-Text der Ueberschriften.

  Hier stand die Begruendung, A8CE4C (Gruengold) und D6C1DF (blasses Lila) seien
  bewusst literale Werte, weil sie "hell genug" fuer den hellen UND den dunklen
  Seitengrund seien und darum keine eigene dunkle Variante braeuchten. Fuer den
  dunklen Grund stimmt das (10.1:1 und 10.9:1). Fuer den hellen nicht: dort
  kommen sie auf 1.6:1 und 1.5:1, also weit unter die 3:1, die fetter Grosstext
  braucht - "hell genug" war genau der Grund, warum sie dort NICHT lesbar waren.

  Beide sind jetzt Variablen mit einem Wert je Thema (--ms-h1-verlauf-gruen,
  --ms-h1-verlauf-lila, siehe :root oben). Der dunkle behaelt die bisherigen
  Toene, der helle bekommt abgedunkelte.

  Die Annahme "grosse, dekorative Schrift" traegt hier ohnehin nicht: es ist die
  Hauptueberschrift der Seite, also Inhalt. Und in der kleinsten Auspraegung
  (.news-split-body h1.is-long, 1.35rem) ist sie 21.6px gross - fett gerade noch
  Grosstext, aber ohne Spielraum.

  Der zweite und vierte Stopp bleiben var(--ms-akzent): dieselbe Farbe wie
  ueberall sonst als Akzent, und sie wechselt mit dem Thema von selbst.
*/
/*
  Dieser Block stand zweimal hintereinander im Stylesheet, wortgleich bis auf die
  Animationsdauer (2s in der ersten, 1.5s in der zweiten Fassung). Gewonnen hat
  immer die zweite; die erste war toter Code, der beim Lesen den Eindruck machte,
  es gaebe zwei verschiedene Zustaende. Jetzt eine Regel mit 1.5s - dem Wert, der
  auch bisher gewirkt hat.
*/
h1 {
  /*
    War "white-space: nowrap". Lange Ueberschriften brachen damit nicht um,
    sondern liefen aus dem Bild - auf schmalen Schirmen und bei 200 % Zoom
    entstand ein waagrechter Rollbalken fuer die ganze Seite (WCAG 1.4.10).
    Abgefedert wurde das nur ueber die Klasse .is-long ab 55 Zeichen; kuerzere
    Titel liefen bei 320 px Breite weiterhin heraus.

    balance verteilt die Zeilen bei mehrzeiligen Titeln gleichmaessig, statt eine
    lange und eine kurze Zeile zu erzeugen. Browser ohne Unterstuetzung ignorieren
    die Zeile.
  */
  text-wrap: balance;
  overflow-wrap: break-word;

  background: linear-gradient(90deg, var(--ms-h1-verlauf-gruen), var(--ms-akzent), var(--ms-h1-verlauf-lila), var(--ms-akzent));
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  display: inline-block;
  margin: 0;
}

h1.animate {
  animation: gradientSlide 1.5s ease forwards;
}

/*
  Ohne Bewegung: der Farbverlauf entfaellt, die Ueberschrift steht sofort in der
  Volltonfarbe.

  Das ist genau der Zustand, in dem die Animation ohnehin endet (siehe 100 % in
  @keyframes gradientSlide) - es geht also keine Gestaltung verloren, nur die
  Bewegung dorthin.

  Wichtig fuer die Lesbarkeit: der Ausgangszustand des Verlaufs enthaelt mit
  #A8CE4C und #D6C1DF zwei Toene, die auf dem hellen Seitengrund nur 1.6:1 bzw.
  1.5:1 erreichen. Wer weniger Bewegung eingestellt hat, saehe ohne diese Regel
  dauerhaft diesen schlecht lesbaren Ausgangszustand - die Animation, die ihn
  aufloest, laeuft ja nicht.
*/
@media (prefers-reduced-motion: reduce) {
  h1,
  h1.animate {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--ms-akzent);
    color: var(--ms-akzent);
  }
}

/*
  Kontrastmodus des Betriebssystems (Windows "Hoher Kontrast", macOS
  "Farben erhoehen").

  Dort ersetzt das System alle Farben durch ein eigenes Paar. "background-clip:
  text" zusammen mit "-webkit-text-fill-color: transparent" ueberlebt das
  teilweise - der Verlauf wird zum Systemhintergrund, die Fuellfarbe der Schrift
  bleibt durchsichtig, und die Ueberschrift verschwindet vollstaendig. Es gab
  bisher keine Regel dafuer.

  CanvasText ist die Systemschriftfarbe, also immer der lesbare Gegenpol zum
  Systemhintergrund.
*/
@media (forced-colors: active) {
  h1,
  h1.animate {
    animation: none;
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    forced-color-adjust: auto;
  }
}

/*
  Rueckfall fuer Browser ohne background-clip: text. Ohne diese Abfrage bliebe
  dort "color: transparent" wirksam, ohne dass der Verlauf die Schrift ersetzt -
  die Ueberschrift waere unsichtbar. Betrifft vor allem aeltere Firefox-Fassungen
  auf Android und Textbrowser mit Teilunterstuetzung.
*/
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    background: none;
    color: var(--ms-akzent);
  }
}

@keyframes gradientSlide {
  0% {
    background-image: linear-gradient(90deg, var(--ms-h1-verlauf-gruen), var(--ms-akzent), var(--ms-h1-verlauf-lila), var(--ms-akzent));
    background-size: 300% 100%;
    background-position: 0% 50%;
  }
  80% {
    background-image: linear-gradient(90deg, var(--ms-h1-verlauf-gruen), var(--ms-akzent), var(--ms-h1-verlauf-lila), var(--ms-akzent));
    background-size: 300% 100%;
    background-position: 100% 50%;
  }
  100% {
    background-image: linear-gradient(90deg, var(--ms-akzent), var(--ms-akzent));
    background-size: 100% 100%;
    background-position: 0% 50%;
  }
}

/*main > .container {
  padding: 60px 15px 0;
}*/

main
{
  color: var(--ms-text);
  font-size: 19px;
}

/*
  Bootstrap-Karten (.card, ohne eigene Klasse wie .awd-band/.news-compact-card)
  werden von Bootstrap 5.3 im dunklen Thema selbst eingefaerbt (--bs-card-bg
  etc.) - mit einem generischen Grau, das nichts mit dieser Seite zu tun hat
  und nicht zu den eigenen --ms-*-Flaechen passt. Deshalb hier explizit auf
  die eigene Palette umgebogen, bevor Bootstraps Regeln greifen koennen.
  Betrifft u.a. Agenda-, News- und Video-Karten sowie ueber-uns.
*/
.card
{
  background-color: var(--ms-flaeche);
  border-color: var(--ms-rand);
  color: var(--ms-text);
}



.too_big_to_be_true {
  font-size: 80px;
  color: var(--ms-gruen);
}




/* ════════════════════════════════════════
   TOPBAR
════════════════════════════════════════ */

.topbar {
  background-color: var(--ms-akzent-flaeche);
}

/* ── Suche ── */
.topbar-search {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.35);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.6);
  padding: 5px 14px;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

/* Der halbtransparente Aufheller wirkt auf dem hellen Topbar-Grund fein
   erhaben, auf dem dunklen Topbar-Grund im dunklen Thema wuerde er
   stattdessen wie ein hell leuchtender Kasten wirken - dort deshalb
   umgekehrt ein Abdunkler auf demselben Grundton. */
[data-bs-theme="dark"] .topbar-search {
  background: rgba(0, 0, 0, 0.25);
}

.topbar-search svg {
  width: 15px;
  height: 15px;
  color: rgba(var(--ms-akzent-rgb), 0.6);
  flex-shrink: 0;
}

.topbar-search input {
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--ms-text);
  width: 100%;
}

/*
  Hier stand "outline: none" ohne Ersatz - das Suchfeld hatte damit ueberhaupt
  keine Fokusanzeige. Wer mit der Tastatur arbeitet, konnte nicht erkennen, dass
  die Eingabe gerade dort landet (WCAG 2.4.7).

  Der Ring sitzt am umgebenden Kasten statt am Feld selbst: das Feld hat keinen
  eigenen Rand und fuellt den Kasten nur teilweise aus, ein Ring direkt am Feld
  saehe darum versetzt aus. :focus-within greift, sobald irgendetwas im Kasten
  den Fokus hat.
*/
.topbar-search input:focus { outline: none; }

.topbar-search:focus-within {
  outline: 2px solid var(--ms-akzent);
  outline-offset: 2px;
}

/* Angewaehlter Treffer im Vorschaumenue - per Pfeiltaste oder Maus.
   Nicht nur ein Farbton: mit einem Balken links bleibt die Auswahl auch
   erkennbar, wenn Farben nicht unterschieden werden (Farbenblindheit) oder das
   Betriebssystem alle Farben ersetzt (Kontrastmodus). */
#topbar-search-results .sr-item.is-active,
#topbar-search-results .sr-item:hover,
#topbar-search-results .sr-item:focus-visible {
  background: var(--ms-flaeche-hoch);
  box-shadow: inset 3px 0 0 var(--ms-akzent);
}

.topbar-search input::placeholder {
  color: rgba(var(--ms-akzent-rgb), 0.45);
}

/* Resultate Dropdown */
#topbar-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: var(--ms-flaeche);
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(var(--ms-akzent-rgb), 0.15);
  padding: 8px;
  z-index: 500;
}

#topbar-search-results.show { display: block; }


/* sr-item als Link (kein button) */
a.sr-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--ms-text);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s;
}

a.sr-item:hover { background: rgba(var(--ms-akzent-rgb), 0.07); }

.sr-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.sr-icon svg {
  width: 14px;
  height: 14px;
  opacity: 0.45;
}

.sr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sr-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-excerpt {
  font-size: 12px;
  color: rgba(var(--ms-akzent-rgb), 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-footer {
  margin-top: 4px;
  padding: 7px 10px 3px;
  font-size: 12px;
  color: rgba(var(--ms-akzent-rgb), 0.45);
  border-top: 1px solid rgba(var(--ms-akzent-rgb), 0.1);
}

.sr-footer a {
  color: var(--ms-text);
  font-weight: 600;
  text-decoration: none;
}

.sr-footer a:hover { text-decoration: underline; }

.sr-label {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(var(--ms-akzent-rgb), 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sr-item {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ms-text);
  font-size: 14px;
  transition: background 0.15s;
}

.sr-item:hover { background: rgba(var(--ms-akzent-rgb), 0.07); }

.sr-empty {
  padding: 10px;
  color: rgba(var(--ms-akzent-rgb), 0.4);
  font-size: 13px;
  text-align: center;
}

/* ── Logo ── */
.topbar-logo {
  display: inline-flex;
  align-items: center;
}

.topbar-logo img {
  height: 60px;
  width: auto;
  display: block;
}

/* ── Sprach-Pills ── */
.lang-pills {
  display: flex;
  align-items: center;
  gap: 5px;
}

/*
  Die Beschriftung besteht nur aus Versalien (DE, FR, IT, EN). Versalien haben
  keine Unterlaengen, der Zeilenkasten reserviert unten aber trotzdem Platz
  dafuer - deshalb sass "DE" sichtbar zu weit oben in der Pille, obwohl die
  Innenabstaende gleich waren. Zentriert wird jetzt ueber Flexbox bei fester
  Hoehe; die 2px oben gleichen genau den ungenutzten Unterlaengenraum aus.
*/
.lang-pills a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 26px;
  color: var(--ms-text);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.4);
  text-decoration: none;
  transition: all 0.2s;
  line-height: 1;
  background: rgba(255, 255, 255, 0.4);
}

/* Aufheller auf dem Topbar-Grund, der im dunklen Thema selbst dunkel wird -
   siehe Kommentar bei .topbar-search */
[data-bs-theme="dark"] .lang-pills a {
  background: rgba(0, 0, 0, 0.2);
}

.lang-pills a:hover,
.lang-pills a.active {
  background: var(--ms-akzent-stark);
  color: var(--ms-text-auf-akzent);
  border-color: var(--ms-akzent-stark);
}

/* ════════════════════════════════════════
   HAUPTNAVIGATION
════════════════════════════════════════ */

.navbar-main {
  background-color: var(--ms-akzent-stark);
  --bs-nav-link-font-size: 20px;
  font-size: 20px;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-main .navbar-nav .nav-item {
  display: flex;
  align-items: stretch;
}

.navbar-main .navbar-nav .nav-link {
  color: var(--ms-text-auf-akzent);
  text-decoration: none;
  position: relative;
  transition: color 0.25s;
  display: flex;
  align-items: center;
  padding: 14px 18px !important;
  isolation: isolate;
  font-weight: 600;
}

/* Bold-Klon verhindert Layout-Shift */
.navbar-main .navbar-nav .nav-link::before {
  content: attr(data-text);
  font-weight: 700;
  visibility: hidden;
  position: absolute;
  left: 0; right: 0;
  white-space: nowrap;
  pointer-events: none;
  overflow: hidden;
  height: 0;
}

/* Active/Hover Hintergrund */
.navbar-main .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: -1;
}

.navbar-main .navbar-nav .nav-link.active {
  font-weight: 700;
  color: var(--ms-text-auf-akzent);
}

.navbar-main .navbar-nav .nav-link.active::after { opacity: 1; }
.navbar-main .nav-item:hover .nav-link::after { opacity: 0.6; }

/* ════════════════════════════════════════
   HAMBURGER
════════════════════════════════════════ */

.navbar-toggler {
  border: none !important;
  padding: 6px 8px;
  background: none;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: 2px solid rgba(255, 255, 255, 0.4);
}

.navbar-toggler-icon { display: none; }

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 28px;
  height: 22px;
  pointer-events: none;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--ms-text-auf-akzent);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s,
              width 0.4s;
}

.hamburger span:nth-child(1) { margin-bottom: 6px; }
.hamburger span:nth-child(2) { margin-bottom: 6px; }

.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* ════════════════════════════════════════
   MOBILE (≤ 767px)
════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Suche nimmt verfügbaren Platz, kein max-width */
  .topbar-search {
    max-width: 100%;
  }

  /* Nav-Items zentriert */
  .navbar-main .navbar-nav {
    align-items: center;
    padding: 6px 0 10px;
  }

  .navbar-main .navbar-nav .nav-item {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .navbar-main .navbar-nav .nav-link {
    padding: 10px 16px !important;
  }

  /* Active auf Mobile */
  .navbar-main .navbar-nav .nav-link.active::after { opacity: 0.15; }

  .navbar-main .navbar-nav .nav-link.active {
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.8);
  }
}

/*
  Jahresnavigation als Pillenreihe (siehe pages/awareness-day_nav.twig).
  Reiter (nav-tabs) wurden mit jedem Jahrgang enger; Pillen brechen sauber um.
*/
.awd-years
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 1.5rem 0 2rem 0;
}

.awd-years .awd-year
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Myriad-Metrik (siehe Kommentar bei .btn): 1px Asymmetrie reichte nur zur
     Haelfte, jetzt dasselbe em-Muster wie dort, Basis 5.5px */
  padding: calc(5.5px + 0.087em) 16px calc(5.5px - 0.087em) 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ms-text);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.35);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s;
}

/* Aufheller auf dem Seitengrund - im dunklen Thema waere ein halbtransparentes
   Weiss auf dunklem Grund ein grell-graues Fleckchen statt einer feinen
   Flaeche, darum dort ein Abdunkler auf demselben (dunklen) Grundton */
[data-bs-theme="dark"] .awd-years .awd-year {
  background: rgba(var(--ms-flaeche-rgb), 0.5);
}

.awd-years .awd-year:hover,
.awd-years .awd-year:focus-visible
{
  background: rgba(var(--ms-akzent-rgb), 0.12);
  color: var(--ms-akzent-hover);
  text-decoration: none;
}

.awd-years .awd-year.active
{
  background: var(--ms-akzent-stark);
  border-color: var(--ms-akzent-stark);
  color: var(--ms-text-auf-akzent);
}


/*
  Kacheln der Uebersichtsseite: eine je Jahrgang, die erste ueber die ganze
  Breite, damit die laufende Kampagne den ersten Blick bekommt.
*/
.awd-year-card
{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--ms-flaeche);
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.25);
  border-radius: 12px;
  color: var(--ms-text);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}

.awd-year-card:hover,
.awd-year-card:focus-visible
{
  border-color: var(--ms-akzent-stark);
  color: var(--ms-text);
  text-decoration: none;
  transform: translateY(-2px);
}

/*
  Das Bildfeld ist quadratisch, weil die Kampagnenbilder quadratisch sind
  (1080x1080). In einem 4:3-Feld blieben links und rechts helle Streifen
  stehen - das Bild wirkte dann wie hineingelegt statt eingepasst.

  "contain" bleibt: die Bilder tragen Text bis an den Rand, "cover" wuerde
  ihn anschneiden. 2021 ist als einziges 5:4 und bekommt schmale Streifen -
  auf Weiss faellt das nicht auf, auf dem alten Lila schon.
*/
.awd-year-card img
{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--ms-flaeche);
  display: block;
}

.awd-year-card-body
{
  padding: 14px 16px;
}

.awd-year-card-year
{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.awd-year-card-motto
{
  font-size: 15px;
  margin-top: 4px;
}

.awd-year-card-count
{
  font-size: 13px;
  color: rgba(var(--ms-akzent-rgb), 0.65);
  margin-top: 8px;
}

/*
  Die erste Kachel ist die laufende Kampagne. Sie hebt sich nicht nur durch
  die Breite ab, sondern auch durch den farbigen Grund und einen sichtbaren
  Knopf - sonst sieht man der Kachel nicht an, dass sie das Ziel der Seite
  ist. Statt des Rahmens der uebrigen Kacheln traegt sie den Farbton selbst.
*/
.awd-year-card-lead
{
  background: var(--ms-flaeche-hoch);
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(var(--ms-akzent-rgb), 0.10);
}

/* Das Bild bleibt weiss, der Kachelgrund lila - die Rundung muss das Bild
   deshalb selbst mitbringen, sonst stehen die Ecken ueber */
.awd-year-card-lead img
{
  border-radius: 16px 16px 0 0;
}

/* Die ganze Kachel ist der Link, der Knopf ist nur Optik (ein <span>) */
.awd-year-card-cta
{
  display: inline-block;
  align-self: flex-start;
  margin-top: 18px;
  /* Myriad-Metrik (siehe Kommentar bei .btn) - gleiches em-Muster */
  padding: calc(9px + 0.087em) 20px calc(9px - 0.087em) 20px;
  background: var(--ms-akzent-stark);
  border-radius: 999px;
  color: var(--ms-text-auf-akzent);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.2s;
}

.awd-year-card-lead:hover .awd-year-card-cta,
.awd-year-card-lead:focus-visible .awd-year-card-cta
{
  /* nicht --ms-akzent-hover: der wird im dunklen Thema hell (fuer Text
     gedacht) - unter dem hellen --ms-text-auf-akzent waere das hell auf hell */
  background: var(--ms-akzent-stark-hover);
}

/* Ab Tablet liegt die Kachel quer: Bild links, Text rechts */
@media (min-width: 576px)
{
  .awd-year-card-lead
  {
    flex-direction: row;
    align-items: center;
  }

  .awd-year-card-lead img
  {
    width: 44%;
    max-width: 420px;
    border-radius: 16px 0 0 16px;
  }

  .awd-year-card-lead .awd-year-card-body
  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 40px;
  }

  .awd-year-card-lead .awd-year-card-year
  {
    font-size: 38px;
    letter-spacing: -0.5px;
  }

  .awd-year-card-lead .awd-year-card-motto
  {
    font-size: 17px;
    margin-top: 8px;
  }
}


/*
  Kopfbereich eines einzelnen Jahrgangs (components/awd_header.twig) im
  gleichen "Buehnen"-Look wie die grosse Kachel der laufenden Kampagne auf
  der Uebersicht (.awd-year-card-lead) - eigene Klassen statt die Karten-
  Klasse doppelt zu verwenden: die Kachel ist ein <a>, dieser Kopf ein <div>.
*/
.awd-stage
{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ms-flaeche-hoch);
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(var(--ms-akzent-rgb), 0.10);
  color: var(--ms-text);
  margin-bottom: 2rem;
}

.awd-stage-media
{
  background: var(--ms-flaeche);
}

.awd-stage-media img,
.awd-stage-media video
{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.awd-stage-body
{
  padding: 24px;
}

.awd-stage-small
{
  font-size: 13px;
}

.awd-stage-year
{
  margin: 4px 0 12px 0;
  color: var(--ms-text);
}

.awd-stage-motto
{
  font-size: 16px;
}

.awd-stage-cta
{
  margin-top: 12px;
}

/* Ab Tablet liegt die Buehne quer: Bild links, Text rechts (wie .awd-year-card-lead) */
@media (min-width: 576px)
{
  .awd-stage
  {
    flex-direction: row;
    align-items: center;
  }

  .awd-stage-media
  {
    width: 44%;
    max-width: 420px;
    flex-shrink: 0;
    align-self: stretch;
  }

  .awd-stage-media img,
  .awd-stage-media video
  {
    height: 100%;
  }

  .awd-stage-body
  {
    padding: 36px 40px;
  }

  .awd-stage-year
  {
    font-size: 32px;
    letter-spacing: -0.5px;
  }

  .awd-stage-motto
  {
    font-size: 17px;
  }
}

/*
  Informationsblaetter des Jahrgangs 2025 (pages/awd/2025-fact-sheets.twig).

  Der Kopf benutzt die Buehne .awd-stage mit; nur das Bildfeld weicht ab: die
  Kampagnenbilder sind quadratisch, das Werbebild der Blaetter ist 3:2 quer.
  Im 1:1-Feld hinge es zwischen zwei breiten weissen Streifen.
*/
.awd-stage-media.awd-sheets-media img
{
  aspect-ratio: 3 / 2;
}

/*
  Eine Zeile je Blatt, eine Spalte je Sprache - der haeufigste Wunsch ist
  "alles auf Franzoesisch", und dafuer muessen die Spalten untereinander
  stehen. Die Tabelle wird auf schmalen Geraeten deshalb nicht in Karten
  zerlegt, sondern nur enger (siehe Media Query unten); mit fester
  Spaltenaufteilung passt sie bis 320px.
*/
.awd-sheets
{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--ms-flaeche);
  border-radius: 12px;
  overflow: hidden;
  color: var(--ms-text);
}

.awd-sheets thead th
{
  background: var(--ms-flaeche-hoch);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 10px 6px;
}

/* Die Kopfzelle ueber den Titeln bleibt leer - die Spalte erklaert sich */
.awd-sheets thead th:first-child
{
  text-align: left;
}

.awd-sheets tbody th
{
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  padding: 12px 14px;
}

.awd-sheets tbody td
{
  text-align: center;
  padding: 12px 4px;
}

.awd-sheets tbody tr + tr th,
.awd-sheets tbody tr + tr td
{
  border-top: 1px solid rgba(var(--ms-akzent-rgb), 0.15);
}

.awd-sheets tbody tr:hover
{
  background: rgba(var(--ms-akzent-rgb), 0.05);
}

/* Blasse Nummer vor dem Titel - sie ordnet, ohne den Titel zu verdraengen */
.awd-sheets-nr
{
  color: rgba(var(--ms-akzent-rgb), 0.45);
  font-size: 20px;
  margin-right: 8px;
}

/*
  Der sichtbare Inhalt der Zelle ist nur ein Symbol. Die Trefferflaeche muss
  trotzdem fingergross sein, deshalb der Block mit fester Hoehe.
*/
.awd-sheets-dl
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--ms-text);
  font-size: 20px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.awd-sheets-dl:hover,
.awd-sheets-dl:focus-visible
{
  background: var(--ms-flaeche-hoch);
  color: var(--ms-akzent-hover);
  text-decoration: none;
}

/* Quellenhinweis unter der Tabelle */
.awd-sheets-source
{
  font-size: 13px;
  color: rgba(var(--ms-akzent-rgb), 0.75);
  margin-top: 12px;
}

@media (max-width: 575px)
{
  .awd-sheets tbody th
  {
    font-size: 14px;
    padding: 10px;
  }

  .awd-sheets-nr
  {
    font-size: 16px;
    margin-right: 6px;
  }

  .awd-sheets tbody td
  {
    padding: 10px 0;
  }

  .awd-sheets-dl
  {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}


/*
  Beitraege eines Jahrgangs (components/awd_entry.twig) als zweifarbige
  Baender. Die Bildhaelfte bleibt weiss - die Kampagnenbilder tragen Text bis
  an den Rand und duerfen weder angeschnitten noch farbig hinterlegt werden.
  Die Texthaelfte bekommt den hellen Markengruen-Ton: die Buehne des
  Jahrgangs (.awd-stage) ist lila, beides teilt die Geometrie, die Farbe
  trennt sie.

  Vorher lagen die Beitraege als Bootstrap-Spalten in einer .row und alle
  Bilder links untereinander - bei zehn Beitraegen eine sehr gleichfoermige
  Liste. Jetzt wechselt jedes zweite Band die Seite (.is-flipped).
*/
.awd-bands
{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.awd-band
{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ms-gruen-flaeche);
  color: var(--ms-text);
  text-align: left;
  transition: box-shadow 0.2s;
}

.awd-band:hover
{
  box-shadow: 0 2px 14px rgba(var(--ms-akzent-rgb), 0.10);
}

.awd-band-media
{
  background: var(--ms-flaeche);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "height: auto" muss sein, sonst gilt die Hoehe aus dem height-Attribut
   (1080px) und das Seitenverhaeltnis kaeme nicht zum Zug - gleiche Falle wie
   bei .awd-tile img */
.awd-band-media img
{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.awd-band-body
{
  padding: 22px 24px;
}

.awd-band-date
{
  display: inline-block;
  background: var(--ms-flaeche);
  color: var(--ms-text);
  border-radius: 999px;
  /* Myriad-Metrik (siehe Kommentar bei .btn) - gleiches em-Muster */
  padding: calc(3px + 0.087em) 12px calc(3px - 0.087em) 12px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.awd-band-body h2
{
  margin: 0;
  font-size: 22px;
}

.awd-band-body h2 a
{
  color: var(--ms-text);
  text-decoration: none;
}

.awd-band-body h2 a:hover,
.awd-band-body h2 a:focus-visible
{
  color: var(--ms-akzent-hover);
  text-decoration: underline;
}

.awd-band-text
{
  margin-top: 10px;
}

/* Der Sprachhinweis kommt von den News-Karten und traegt dort ein helles
   Lila - auf dem gruenen Band ginge er unter, auf Weiss bleibt er lesbar */
.awd-band .news-lang-badge
{
  background: var(--ms-flaeche);
}

/* Ab Tablet liegt das Band quer, wie die Buehne darueber */
@media (min-width: 576px)
{
  .awd-band
  {
    flex-direction: row;
    align-items: stretch;
  }

  /* jedes zweite Band gespiegelt: Bild rechts, Text links */
  .awd-band.is-flipped
  {
    flex-direction: row-reverse;
  }

  /* schmaler als die Buehne (44 %), damit die Buehne die groesste Flaeche
     der Seite behaelt */
  .awd-band-media
  {
    width: 38%;
    max-width: 340px;
    flex-shrink: 0;
  }

  .awd-band-body
  {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    padding: 28px 32px;
  }
}

/*
  Einzelansicht (pages/awd_entry.twig): dasselbe Band, aber mit h1 statt h2
  und ohne Wechsel - es steht ja nur eines auf der Seite.

  h1 traegt seitenweit einen Farbverlauf mit einem sehr hellen Lila-Anteil.
  Auf Weiss geht das auf, auf dem gruenen Band waere die helle Stelle kaum
  noch lesbar - hier darum eine feste Farbe.
*/
.awd-band-body h1
{
  /* h1 ist global inline-block - dadurch rutscht der Titel neben die
     Datums-Pille, sobald er dort noch Platz findet. Im Band gehoert das
     Datum eine Zeile darueber, darum hier block. */
  display: block;
  margin: 0;
  background: none;
  -webkit-text-fill-color: var(--ms-text);
  color: var(--ms-text);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  /* Zweite Absicherung neben skeleton.twig: falls das h1 doch die Klasse
     .animate bekommt, wuerde gradientSlide den Farbverlauf zurueckholen. */
  animation: none;
}

/*
  Blaettern zwischen den Beitraegen eines Jahrgangs. Weiss statt gruen: die
  Leiste gehoert nicht mehr zum Beitrag, sie fuehrt aus ihm heraus.
*/
.awd-entry-nav
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2rem;
}

.awd-entry-nav-link
{
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: var(--ms-flaeche);
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.25);
  border-radius: 12px;
  color: var(--ms-text);
  text-decoration: none;
  transition: border-color 0.2s;
}

.awd-entry-nav-link:hover,
.awd-entry-nav-link:focus-visible
{
  border-color: var(--ms-akzent-stark);
  color: var(--ms-akzent-hover);
  text-decoration: none;
}

.awd-entry-nav-link.is-next
{
  text-align: right;
}

.awd-entry-nav-label
{
  font-size: 12px;
  color: rgba(var(--ms-akzent-rgb), 0.7);
}

.awd-entry-nav-title
{
  font-weight: 700;
}


/*
  Kachelraster 2022: dort gibt es je Beitrag nur Datum und Bild, kein Fliesstext.
  Drei nebeneinander auf grossen Schirmen, zwei auf mittleren, eines auf dem
  Telefon - das Raster steuert die Vorlage, hier steht nur das Aussehen.
*/
.awd-tile
{
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ms-flaeche);
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.25);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

/* Die 15 Kampagnenbilder von 2022 sind alle 1080x1080, fuellen den Rahmen also
   genau aus. "contain" statt "cover", damit ein spaeter nachgereichtes Bild mit
   anderem Seitenverhaeltnis hoechstens Rand bekommt - abgeschnittener Text auf
   einem Kampagnenbild waere der schlimmere Fehler. */
.awd-tile img
{
  width: 100%;
  /* Die Bilder tragen jetzt width/height aus der Datei. Ohne "height: auto"
     gilt die Hoehe aus dem Attribut (1080px) und das Seitenverhaeltnis kaeme
     nicht zum Zug - die Kachel waere ueber tausend Pixel hoch. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.awd-tile figcaption
{
  padding: 10px 12px;
  font-weight: 700;
  color: var(--ms-text);
  text-align: center;
}


#debug
{
  background-color: white;
  border: 1px black dashed;
  z-index: 99999;
  padding: 10px;
  margin: 100px 0px 10px 0px;
}


.navi
{
  margin-bottom: 13px;
}

.social_icons
{
  font-size: 32px;
  margin-right: 5px;
}


/*
  ===================== FOOTER =====================
  Die Fusszeile ist bewusst immer dunkel - eine feste "Insel", unabhaengig
  vom Seitenthema (aehnlich der violetten Hauptnavigation, nur mit eigenen,
  in der Palette oben nicht vorkommenden Toenen). Im dunklen Thema wuerde sie
  sonst kaum noch von der jetzt ebenfalls dunklen Seite abstechen - das ist
  hier in Ordnung, sie bleibt trotzdem lesbar. Darum bleiben Grundfarbe,
  Fliesstext und Trennlinien hier bewusst literal statt ueber --ms-* Variablen.
*/
.footer {
  background-color: #2d1a42;
  color: #e0d0f0; /* leicht lila-getöntes Weiss statt reines Weiss */
  font-size: 1rem;
  border-top: 3px solid #633085; /* farbe1 als Akzentlinie */
}

.footer > .container {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Spalten-Titel */
.footer .footer-heading {
  color: var(--ms-gruen); /* farbe3 Grün - bleibt in beiden Themen gleich */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Links */
.footer a {
  color: #e0d0f0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--ms-gruen); /* farbe3 */
}

/* Trennlinie vor Copyright */
.footer-bottom {
  border-top: 1px solid #633085;
  margin-top: 30px;
  padding-top: 16px;
  font-size: 0.8rem;
  color: #9e82b8;
  text-align: center;
}

/* Social Icons */
.social_icons {
  font-size: 1.6rem;
  margin: 0 6px;
  color: #e0d0f0;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.social_icons:hover {
  color: var(--ms-gruen);
  transform: translateY(-3px); /* kleiner Lift-Effekt */
}

/* Mobile: Spalten trennen */
@media (max-width: 767.98px) {
  .footer .col-12 {
    margin-bottom: 28px;
  }
  .footer .col-12:last-child {
    margin-bottom: 0;
  }
}


.footer-logos {
  border-top: 1px solid #633085;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.footer-logo {
  /* Beide Logos in derselben Box (Breite x Hoehe), object-fit skaliert das
     Bild hinein - so wirken die sehr unterschiedlich breiten Wortmarken
     (HOPOS ~5:1, Swiss Mastocytosis ~3:1) gleich gross. */
  height: 44px;
  width: 160px;
  object-fit: contain;
  opacity: 0.7;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-logo:hover {
  opacity: 1;
  transform: scale(1.1); /* leicht vergrössern */
}






/* video stuff */
.vcard-lang-badge {
  min-width: 52px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  /* Myriad-Metrik (siehe Kommentar bei .btn) - gleiches em-Muster */
  padding: calc(4px + 0.087em) 6px calc(4px - 0.087em) 6px;
  flex-shrink: 0;
}

.vcard-date {
  font-size: 0.7rem;
}

.vcard-desc-preview-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.vcard-desc-full-text {
  display: block;
  user-select: text;
  cursor: text;
}


.vcard-desc-toggle {
  font-size: 0.7rem;
  color: var(--ms-gruen-rand);
  cursor: pointer;
  font-weight: 500;
}
.vcard-desc-toggle:hover {
  text-decoration: underline;
}




/* ================================================
   AGENDA – Card Styles
   ================================================ */

.agenda-card {
  border: 2px solid var(--ms-akzent-stark);
  border-radius: 0 var(--bs-card-border-radius) var(--bs-card-border-radius) var(--bs-card-border-radius);
  margin-bottom: 40px;
  color: var(--ms-text);
}

.agenda-card .card-img-top {
  border-radius: 0 var(--bs-card-inner-border-radius) 0 0;
}

.agenda-card .card-body .card-title a {
  color: var(--ms-text);
  text-decoration: none;
}

.agenda-card .card-body .card-title a:hover {
  text-decoration: underline;
}

.agenda-card .card-body .card-text {
  color: inherit;
}

.agenda-date-box {
  position: absolute;
  border: 1px solid var(--ms-akzent-stark);
  border-width: 1px 1px 0 1px;
  top: -25px;
  left: -2px;
  font-size: 12px;
  color: var(--ms-text-auf-akzent);
  background-color: var(--ms-akzent-stark);
  border-radius: 3px 3px 0 0;
  padding: 3px;
}

.agenda-card-glow {
    border: 2px solid var(--ms-akzent-stark);
    animation: agenda-softGlow 2s 3; /* 2s × 3 = 6 Sekunden */

}

@keyframes agenda-softGlow {
    0% {
        box-shadow: 0 0 5px rgba(var(--ms-akzent-rgb), 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(var(--ms-akzent-rgb), 0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(var(--ms-akzent-rgb), 0.5);
    }
}

/*
  Chip auf der Agenda-Detailseite: gruen statt des lila news-type-chip, damit
  Typ (lila) und Termindatum (gruen) auf einen Blick auseinanderzuhalten sind.
  Gruenton wie .hrdot (--ms-gruen-rand), aber als helle Flaeche mit dunklem
  Text - gleiches Rezept wie .news-type-chip, nur andere Farbe. Im dunklen
  Thema kehrt sich das Verhaeltnis um: --ms-gruen-rand wird dort hell genug,
  um auf der dann dunklen --ms-gruen-flaeche als Text zu funktionieren.
*/
.agenda-event-chip {
  display: inline-block;
  background: var(--ms-gruen-flaeche);
  color: var(--ms-gruen-rand);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
}

/* vergangenes Event: neutral/grau statt gruen - es steht nichts mehr bevor */
.agenda-event-chip.is-past {
  background: var(--ms-rand);
  color: var(--ms-text-gedaempft);
}

/* Dauer-Zeile unter dem Text, gleiches Rezept wie .news-meta-row */
.agenda-duration-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ms-text-gedaempft);
  margin-top: 8px;
}

/*
  Kuerzung auf der Uebersicht: lange Beitraege zogen die Karte ueber eine
  halbe Bildschirmhoehe und das Masonry-Raster auseinander - und es gab
  keinen Grund mehr, die Einzelseite zu oeffnen.

  Kein line-clamp: der Inhalt bringt eigene Absaetze und Listen mit, und
  -webkit-line-clamp zaehlt nur im -webkit-box-Fluss richtig. Eine feste
  max-height mit weichem Ausblenden vertraegt beliebiges HTML.

  Die Klasse is-clamped setzt das Template nur, wenn der Text tatsaechlich
  laenger ist (Agenda::isLongContent) - eine knapp kuerzere Karte bekommt
  weder Verlauf noch Knopf.
*/
.agenda-teaser.is-clamped {
  position: relative;
  max-height: 12em; /* ~8 Zeilen bei line-height 1.5 */
  overflow: hidden;
}

.agenda-teaser.is-clamped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5em;
  background: linear-gradient(to bottom,rgba(var(--ms-flaeche-rgb),0),rgb(var(--ms-flaeche-rgb)) 85%);
  pointer-events: none;
}

.agenda-teaser > :last-child {
  margin-bottom: 0;
}

.agenda-more {
  margin: 12px 0 0 0;
}

/*
  Die Links eines Eintrags auf den Listenkarten (Agenda und Agenda-Archiv).

  Hier stand bisher gar keine Regel: der Kasten war ein schlichtes
  display:block mit inline-block-Knoepfen darin. Zwei Knoepfe nebeneinander
  hatten damit nur den Wortzwischenraum, und - das fiel auf - zwischen dem
  "Mehr lesen"-Knopf und dem ersten Link lagen gemessene 0 Pixel: .agenda-more
  endet mit margin-bottom:0, und der Kasten darunter brachte keinen eigenen
  Abstand mit. Die beiden Knoepfe stiessen also aneinander.

  Auf den Detailseiten gelten weiterhin .news-compact-body .entry-links und
  .news-split-foot .entry-links - die stehen weiter unten und gewinnen ueber
  die Spezifitaet.
*/
.entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Oben stehende Links sind eine eigene Zeile ueber dem Text, nicht Teil davon */
.entry-links-top {
  margin-bottom: 12px;
}

/*
  Abstand zwischen den Karten der Agenda-Uebersicht und des Archivs.

  .card-wrapper und .card-abstand standen zwar schon im Markup, hatten aber
  nie eine Regel - im Masonry-Raster stiessen die Karten deshalb genau
  aneinander (gemessen 0 Pixel), und die erste Karte half sich mit einem
  eingebauten <div style="height:5px">. Der Abstand gehoert an den Wrapper und
  nicht an die Karte: Masonry rechnet mit den Aussenmassen des Elements, das
  es positioniert, und das ist der Wrapper.

  .card-abstand bleibt bewusst ohne Regel - der Name klingt danach, als
  wuerde er den Abstand setzen, aber zwei Regeln fuer dieselbe Sache waeren
  genau die Falle, aus der das hier kam.
*/
.card-wrapper {
  margin-bottom: 24px;
}




/*
  Knoepfe: zwei Korrekturen, die beide von seitenweiten Regeln herruehren.

  1. Unterstreichung beim Ueberfahren
     Ganz oben steht "a:hover { text-decoration: underline }". Das trifft auch
     Knoepfe, die als <a class="btn"> gebaut sind - Bootstrap setzt
     text-decoration nur auf .btn selbst, nicht auf .btn:hover, und a:hover
     gewinnt dort. Sichtbar war das u.a. beim Kontaktformular-Knopf auf "Ueber
     uns" und beim Knopf "Kalender abonnieren" auf der Agenda. Dieselbe Ursache
     traf Eintraege in Ausklappmenues und die Navigation.

  2. Text sass zu hoch
     Nicht die Symbole sind schuld - ein Knopf ist mit und ohne Symbol exakt
     gleich hoch (38px, nachgemessen). Es sind die Masse von Myriad Pro: bei
     16px liegen 12 Einheiten ueber und 4 unter der Grundlinie, die Versalhoehe
     betraegt aber nur 10,78. Zentriert der Browser den Zeilenkasten, sitzen
     ueber den Grossbuchstaben 12,22px und unter der Grundlinie 15px - der
     Text steht also 1,4px zu hoch, genau der beschriebene Eindruck.

     Der Ausgleich wandert in die Innenabstaende und ist in em angegeben, damit
     er bei btn-sm und btn-lg mitwaechst. Flexbox sorgt zusaetzlich dafuer,
     dass Symbol und Text gemeinsam ausgerichtet werden statt jedes fuer sich
     an der Grundlinie zu haengen. Der Abstand zwischen beiden kommt aus "gap":
     in einem Flex-Container faellt der Leerraum aus dem Quelltext weg, sonst
     klebten Symbol und Beschriftung aneinander.
*/
.btn
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding-top:    calc(var(--bs-btn-padding-y) + 0.087em);
  padding-bottom: calc(var(--bs-btn-padding-y) - 0.087em);
}

.btn:hover,
.btn:focus-visible,
.dropdown-item:hover,
.dropdown-item:focus-visible,
.nav-link:hover,
.nav-link:focus-visible
{
  text-decoration: none;
}

/* Symbole sollen die Knopfhoehe nicht ueber die Schriftmasse steuern */
.btn > .bi
{
  line-height: 1;
}


/*
  Haupt-Button: Dunkles Violett (farbe1), Schrift immer --ms-text-auf-akzent.
  Hover/Active brauchen darum eigene Stufen (--ms-akzent-stark-hover/-active)
  statt --ms-akzent/--ms-akzent-hover: die beiden sind für Text/Links gedacht
  und werden im dunklen Thema absichtlich HELL, damit sie auf dunklem
  Seitengrund lesbar bleiben - als Knopf-Flaeche unter hellem Text waere das
  im dunklen Thema hell auf hell. --ms-akzent-stark-hover/-active bleiben in
  beiden Themen dunkel genug fuer den hellen Knopftext.
*/
.btn-primary {
  --bs-btn-bg:           var(--ms-akzent-stark);
  --bs-btn-border-color: var(--ms-akzent-stark);
  --bs-btn-hover-bg:           var(--ms-akzent-stark-hover); /* etwas heller beim Hover */
  --bs-btn-hover-border-color: var(--ms-akzent-stark-hover);
  --bs-btn-active-bg:          var(--ms-akzent-stark-active);
  --bs-btn-active-border-color:var(--ms-akzent-stark-active);
  --bs-btn-color:         var(--ms-text-auf-akzent);
  --bs-btn-hover-color:   var(--ms-text-auf-akzent);
  --bs-btn-active-color:  var(--ms-text-auf-akzent);
  /* Fokus-Ring in passender Farbe */
  --bs-btn-focus-shadow-rgb: var(--ms-akzent-rgb);
}

/* Optional: Outline-Variante */
.btn-outline-primary {
  --bs-btn-color:          var(--ms-akzent-stark);
  --bs-btn-border-color:   var(--ms-akzent-stark);
  --bs-btn-hover-bg:       var(--ms-akzent-stark);
  --bs-btn-hover-color:    var(--ms-text-auf-akzent);
  --bs-btn-active-bg:      var(--ms-akzent-stark-active);
  --bs-btn-active-color:   var(--ms-text-auf-akzent);
}

/*
  Gruen bleibt in beiden Themen gleich hell (--ms-gruen, --ms-gruen-rand) -
  der Knopf braucht darum in beiden Themen denselben dunklen Text, nicht den
  im dunklen Thema sonst ueblichen hellen (siehe .farbe3 weiter oben, gleicher
  Fall: die Flaeche selbst kehrt sich nie um).
*/
.btn-accent {
  --bs-btn-bg:           var(--ms-gruen);
  --bs-btn-border-color: var(--ms-gruen);
  --bs-btn-hover-bg:     var(--ms-gruen-rand);
  --bs-btn-hover-border-color: var(--ms-gruen-rand);
  --bs-btn-color:        var(--ms-akzent-stark);
  --bs-btn-hover-color:  var(--ms-akzent-stark);
}








/* ===== Ueber Uns: Team-Cards ===== */
.ueber-uns-team {
  padding: 30px 0 40px;
  margin-bottom: 30px;
  background-color: var(--ms-flaeche);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.ueber-uns-team .ueber-uns-team-picture {
  display: inline-block;
  height: 130px;
  width: 130px;
  margin-bottom: 50px;
  z-index: 1;
  position: relative;
}

.ueber-uns-team .ueber-uns-team-picture::before {
  content: "";
  width: 100%;
  height: 0;
  border-radius: 50%;
  background-color: var(--ms-akzent-stark);
  position: absolute;
  bottom: 135%;
  right: 0;
  left: 0;
  opacity: 0.9;
  transform: scale(3);
  transition: all 0.3s linear 0s;
}

.ueber-uns-team:hover .ueber-uns-team-picture::before {
  height: 100%;
}

.ueber-uns-team .ueber-uns-team-picture::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--ms-akzent-flaeche);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.ueber-uns-team .ueber-uns-team-picture img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.9s ease 0s;
}

.ueber-uns-team:hover .ueber-uns-team-picture img {
  box-shadow: 0 0 0 14px #f7f5ec;
  transform: scale(0.7);
}

.ueber-uns-team .ueber-uns-team-title {
  display: block;
  font-size: 15px;
  color: var(--ms-text-gedaempft);
}

/* Eigenstaendiger Hover-Riegel ueber dem Teamfoto, blau/cremefarben statt der
   Seitenpalette - bleibt bewusst literal in beiden Themen: er liegt auf dem
   Foto, nicht auf einer Seitenflaeche, die sich mit dem Thema umkehren wuerde. */
.ueber-uns-team .ueber-uns-team-social {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #1369ce;
  position: absolute;
  bottom: -100px;
  left: 0;
  transition: all 0.5s ease 0s;
}

.ueber-uns-team:hover .ueber-uns-team-social {
  bottom: 0;
}

.ueber-uns-team .ueber-uns-team-social li {
  display: inline-block;
}

.ueber-uns-team .ueber-uns-team-social li a {
  display: block;
  padding: 10px;
  font-size: 17px;
  color: white;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}

.ueber-uns-team .ueber-uns-team-social li a:hover {
  color: #1369ce;
  background-color: #f7f5ec;
}

/* ===== Ueber Uns: Patientenstimme ===== */
.ueber-uns-patientenstimme {
  border: 1px var(--ms-gruen-rand) dotted;
  padding: 15px;
  margin-bottom: 10px;
  background-color: var(--ms-flaeche);
}

/* ===== Ueber Uns: Carousel-Indicators (BS5) ===== */
.ueber-uns-carousel-indicators {
  bottom: 0;
}

.ueber-uns-carousel-indicators [data-bs-target] {
  background-color: rgba(70, 70, 70, 0.25);
}

.ueber-uns-carousel-indicators .active {
  background-color: #444;
}

/* Dunkelgraue Punkte waeren auf dunklem Kartengrund kaum zu sehen */
[data-bs-theme="dark"] .ueber-uns-carousel-indicators [data-bs-target] {
  background-color: rgba(200, 200, 200, 0.35);
}

[data-bs-theme="dark"] .ueber-uns-carousel-indicators .active {
  background-color: #ccc;
}

/* ===== Ueber Uns: Swiper ===== */
.ueber-uns-swiper {
  width: 100%;
  position: relative;
}

.ueber-uns-swiper .ueber-uns-slide-content {
  padding: 1.5rem 4rem;
  text-align: center;
}

/* autoHeight:true im Swiper-Aufruf laesst den Container der Hoehe der aktiven
   Folie folgen statt der laengsten - hier nur noch die Untergrenze, damit die
   Box zwischen kurzen und langen Zitaten nicht springt */
.ueber-uns-swiper .swiper-slide { height: auto; }
.ueber-uns-swiper .ueber-uns-slide-content {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ueber-uns-swiper .swiper-button-prev,
.ueber-uns-swiper .swiper-button-next {
  color: var(--ms-text);
}

/* Schwebender Knopf auf dem Zitat-Hintergrund, nicht auf einer Seitenflaeche -
   bleibt bewusst literal dunkel mit weissem Symbol in beiden Themen. */
.ueber-uns-swiper #swiperButton {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 100;
  background-color: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ueber-uns-swiper #swiperButton:hover {
  background-color: rgba(0,0,0,0.7);
}

.ueber-uns-swiper #swiperButton i {
  color: white;
  font-size: 1.5rem;
  line-height: 0;
}

@media (max-width: 767px) {
  .ueber-uns-swiper .swiper-button-prev,
  .ueber-uns-swiper .swiper-button-next {
    display: block;
    opacity: 0.7;
  }

  .ueber-uns-swiper .swiper-pagination {
    display: none;
  }

  .ueber-uns-swiper .ueber-uns-slide-content {
    padding: 1.5rem 3rem;
  }

  .ueber-uns-swiper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 30px;
    height: 50px;
    background: linear-gradient(to left, rgb(var(--ms-akzent-flaeche-rgb)), rgba(var(--ms-akzent-flaeche-rgb), 0));
    pointer-events: none;
    z-index: 1;
  }

  .ueber-uns-swiper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 50px;
    background: linear-gradient(to right, rgb(var(--ms-akzent-flaeche-rgb)), rgba(var(--ms-akzent-flaeche-rgb), 0));
    pointer-events: none;
    z-index: 1;
  }
}

/* ---- News ---- */

/* Die Filterleiste hatte hier eigene, nachgebaute Knopf-Stile (.news-filter).
   Sie benutzt jetzt echte Bootstrap-Knoepfe in einer .btn-group - btn-primary
   und btn-outline-primary sind weiter oben bereits auf das Violett der Seite
   umgestellt, es braucht also keinen eigenen Stil mehr. */

.news-card {
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.25);
}

.news-card-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* Der Teaser behaelt seit neuem die Zeilenumbrueche des Beitrags (siehe
   Infos::buildTeaser). 160 Zeichen ergaben bisher rund vier Zeilen - als
   Aufzaehlung mit kurzen Zeilen werden daraus schnell zehn, und weil die
   Karten einer Reihe gleich hoch werden, zieht eine einzige Karte die ganze
   Reihe auseinander. Sechs Zeilen sind mehr als bisher und trotzdem gedeckelt;
   der Teaser endet ohnehin mit "…", es fehlt also nichts Sichtbares. */
.news-card .card-text {
  max-height: 9em; /* 6 Zeilen bei line-height 1.5 */
  overflow: hidden;
}

.news-card .card-title a {
  color: var(--ms-text);
  text-decoration: none;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ms-text-gedaempft);
  margin-bottom: 6px;
}

.news-type-chip {
  background: var(--ms-akzent-flaeche);
  color: var(--ms-text);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
}

/* Sprach-Hinweis - ein Hinweis, keine Warnung: dezent statt alarmierend */
.news-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ms-hintergrund);
  color: var(--ms-text);
  border-radius: 999px;
  /* Myriad-Metrik (siehe Kommentar bei .btn) - gleiches em-Muster */
  padding: calc(3px + 0.087em) 10px calc(3px - 0.087em) 10px;
  font-size: 11px;
  margin-top: 8px;
}

/*
  h1 traegt global white-space:nowrap (siehe oben) - ein langer Beitragstitel
  lief damit aus der Seite heraus. Hier darf er umbrechen; gekuerzt wird
  bewusst nicht, der ganze Titel soll lesbar bleiben.
*/
.news-entry-header h1 {
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Ab ~55 Zeichen (Klasse kommt aus news_entry.twig) faellt der Titel auf die
   h2-Groesse zurueck - ein sehr langer Titel in voller h1-Groesse erschlaegt
   sonst die halbe Seite, noch bevor der Beitrag anfaengt. */
.news-entry-header h1.is-long {
  font-size: 2rem;
  line-height: 1.25;
}

.news_content {
  padding: 15px;
}

.hrdot {
  border-top: 1px dashed var(--ms-gruen-rand);
}

.news-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ms-text-gedaempft);
  margin-bottom: 4px;
}

/* Der einfache Link (nicht der Knopf-Typ) bekommt dieselbe Pillenform wie ein
   Outline-Knopf, statt als blauer Fliesstextlink unterzugehen. Der Knopf-Typ
   ist bereits ein .btn und bleibt unangetastet. */
.news-compact-card .entry-links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ms-akzent-stark);
  color: var(--ms-text);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  text-decoration: none;
}

.news-compact-card .entry-links a:not(.btn):hover {
  background: var(--ms-akzent-stark);
  color: var(--ms-text-auf-akzent);
}

/*
  Die Karte der News-Detailseite - eine einzige Form fuer jeden Eintrag, egal
  wie lang der Text ist. Ein zweites, breiteres Layout fuer laengere Texte gab
  es hier schon; es wirkte neben den meist sehr kurzen Beitraegen leer.

  Bewusst linksbuendig auf der Seite (kein mx-auto) statt zentriert -
  zentriert sah bei einer schmalen Karte auf breiten Schirmen verloren aus.
*/
.news-compact-card {
  max-width: 560px;
  background: var(--ms-flaeche);
  border: 1px solid var(--ms-rand);
  border-radius: 12px;
  overflow: hidden;
}

/* Bilder sind i.d.R. im Breitformat (~660×340) hinterlegt - eigenes
   Seitenverhaeltnis statt eines festen Quadrats, damit sie nicht beschnitten
   werden muessen. Dieselbe Flaeche zeigt auch ein Video (16:9), wenn eines
   existiert - .ratio bringt sein eigenes Seitenverhaeltnis selbst mit. */
.news-compact-media img {
  display: block;
  width: 100%;
}

.news-compact-media .ratio {
  border-radius: 0;
}

.news-compact-body {
  padding: 20px 24px;
}

.news-compact-body .news_content {
  padding: 0;
  font-size: 16px;
  margin-bottom: 4px;
}

/*
  Geteilte Karte fuer Eintraege ohne Video: Bild links, rechts Typ/Titel/Text,
  darunter eine eigene Leiste mit Links und Datum. Die Leiste sitzt nur unter
  der Textspalte - das Bild laeuft daneben ueber die volle Kartenhoehe durch.

  Aufbau mobil-zuerst: unterhalb von 768px bleibt alles gestapelt (Bild oben,
  Text darunter, Leiste zuletzt), erst ab Tablet-Breite stehen Bild und Text
  nebeneinander. Auf dem Handy war die gestapelte Form bereits gut, sie soll
  sich nicht aendern.
*/
.news-split {
  max-width: 900px;
}

.news-split-media img {
  display: block;
  width: 100%;
}

.news-split-body {
  padding: 20px 24px;
}

.news-split-body h1 {
  font-size: 1.75rem;
  margin: 0 0 10px 0;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

.news-split-body h1.is-long {
  font-size: 1.35rem;
}

.news-split-body .news_content {
  padding: 0;
  font-size: 16px;
}

/* Die Leiste traegt Links und Datum. Sie steht auch dann als eigener Streifen
   da, wenn ein Eintrag gar keine Links hat - das Datum allein rechtfertigt
   den Abschluss der Karte. */
.news-split-foot {
  border-top: 1px solid var(--ms-rand);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/*
  Die Aussenabstaende, die .entry-links auf den Listenkarten mitbringt, muessen
  hier weg: die Fussleiste ist eine Flex-Zeile mit align-items:center, und ein
  Abstand oben oder unten schoebe die Knoepfe gegen das Datum daneben aus der
  Mitte.
*/
.news-split-foot .entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  /* Das Datum rutscht ans rechte Ende der Leiste, damit die Knoepfe links
     zusammenbleiben. Nur ab Tablet-Breite: auf dem Handy bricht die Leiste um
     und das Datum haenge sonst allein rechts unter den Knoepfen. */
  .news-split-date {
    margin-left: auto;
  }

  .news-split {
    display: flex;
    align-items: stretch;
  }

  .news-split-media {
    flex: 0 0 42%;
  }

  /* ueber die volle Kartenhoehe: das Bild wird dafuer beschnitten statt
     verzerrt, der Bildausschnitt bleibt mittig */
  .news-split-media img {
    height: 100%;
    object-fit: cover;
  }

  /* min-width:0 - ohne das waechst die Textspalte an ihrem laengsten Wort
     auf und schiebt das Bild aus der Karte */
  .news-split-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .news-split-body {
    flex: 1;
  }
}

/*
  Agenda-Ausnahme zur geteilten Karte. Agenda-Bilder sind oft Plakate mit
  eingebranntem Text und QR-Code (static/images/agenda/, Formate von 1000x326
  bis 1000x1029). Die News-Regel streckt das Bild ueber die volle Kartenhoehe
  und schneidet mit object-fit:cover seitlich weg - bei einem langen Text war
  vom Plakat nur noch ein Streifen aus der Mitte lesbar.

  Hier steht das Bild deshalb in seinem eigenen Seitenverhaeltnis oben in der
  Spalte, auf dem weissen Kartengrund. Ein hohes Plakat laesst unter sich eine
  weisse Flaeche - das ist gewollt und immer noch besser als ein
  unleserliches Bild.

  Eigene Klasse statt einer Aenderung an .news-split-media: die Klassen
  gehoeren der News-Detailseite, dort sind die Bilder im Breitformat und der
  Vollhoehen-Zuschnitt richtig.
*/
.agenda-split .news-split-media img {
  width: auto;
  max-width: 100%;
  /* sehr hohe Plakate sollen die Karte nicht ins Endlose ziehen */
  max-height: 620px;
  margin: 0 auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  /* hebt height:100% der News-Regel auf - die Spalte waechst nur so hoch wie
     das Bild, nicht so hoch wie der Text daneben */
  .agenda-split .news-split-media {
    align-self: flex-start;
    padding: 16px;
  }

  .agenda-split .news-split-media img {
    height: auto;
  }
}

/* Existiert sowohl ein Video als auch ein Bild, steht das Bild als kleiner
   Beleg-Chip neben dem Text statt zu verschwinden - das Video hat oben
   bereits den grossen Auftritt. */
.news-compact-chip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.news-compact-chip-img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: cover;
  border-radius: 8px;
}

.news-compact-body .entry-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 14px;
}

/* ════════════════════════════════════════
   BROTKRUMEN (BREADCRUMBS)
════════════════════════════════════════ */

/*
  Bootstrap 5 liefert Brotkrumen ohne Hintergrund und ohne Innenabstand - sie
  stehen dadurch nackt ueber der Seite und sind kaum als eigener Bereich
  erkennbar. Der Grundstil hier holt die Bootstrap-4-Anmutung zurueck: ein
  ruhiger Balken, in den Farben der Seite statt im Bootstrap-Grau.

  Drei Abwandlungen stehen bereit; sie kommen als zusaetzliche Klasse an
  dasselbe <ol class="breadcrumb ..."> und ersetzen den Balken:
    .breadcrumb-line     nur eine Haarlinie darunter, sehr zurueckhaltend
    .breadcrumb-chevron  Pfeile statt Schraegstrich, ohne Balken
    .breadcrumb-pill     abgerundeter Balken, passend zu den Sprach-Pillen
*/
.breadcrumb
{
  --bs-breadcrumb-divider: '/';
  align-items: center;
  /* Myriad-Metrik (siehe Kommentar bei .btn) - gleiches em-Muster */
  padding: calc(0.6rem + 0.087em) 1rem calc(0.6rem - 0.087em) 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  background-color: rgba(var(--ms-akzent-rgb), 0.07);
  border: 1px solid rgba(var(--ms-akzent-rgb), 0.12);
  border-radius: var(--bs-border-radius);
}

/*
  Senkrechte Ausrichtung nicht dem Zufall ueberlassen: align-items am Balken
  allein genuegt nicht zuverlaessig, weil der aktive Eintrag als Flex-Kind mit
  overflow:hidden je nach Browser gestreckt statt zentriert wird - der Text
  sass dann sichtbar zu weit oben. align-self und eine feste Zeilenhoehe am
  Eintrag selbst legen das browserunabhaengig fest.
*/
.breadcrumb-item
{
  align-self: center;
  line-height: 1.4;
}

.breadcrumb-item a
{
  color: var(--ms-akzent);
  text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible
{
  color: var(--ms-akzent-hover);
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before
{
  color: rgba(var(--ms-akzent-rgb), 0.45);
}

/*
  Der letzte Eintrag ist oft ein ganzer Beitragstitel. Ohne Begrenzung sprengt
  er die Zeile; mit Begrenzung bleibt der Balken einzeilig und der Titel wird
  mit … abgeschnitten.

  Die Grenze war vorher ein fester Wert (32ch) - das kuerzte den Titel auch
  dann, wenn der Balken noch reichlich Platz frei hatte, weil "wie viele
  Zeichen" nichts mit "wie viel Platz ist da" zu tun hat. flex-basis:0 mit
  flex-grow laesst den Titel stattdessen den tatsaechlich verbleibenden Platz
  in der Zeile ausfuellen (die vorherigen Eintraege behalten ihre eigene
  Breite); erst wenn der Titel selbst dafuer zu lang ist, greift die Kuerzung.
  min-width:0 ist noetig, weil Flex-Kinder sonst nie schmaler werden als ihr
  Inhalt - genau das wuerde die Kuerzung verhindern.
*/
.breadcrumb-item.active
{
  color: var(--ms-text-gedaempft);
  font-weight: 600;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*
    flex:1 1 0 laesst den Eintrag die ganze Restbreite des Balkens einnehmen
    (Absicht, siehe Kommentar oben zur Kuerzung) - text-align:center erbt er
    dabei vom umgebenden ".text-center"-Container (z.B. next-meetings.twig)
    und stand dadurch mitten im gestreckten Eintrag statt direkt hinter dem
    Trenner. start erzwingt die Position unabhaengig vom Elternelement.
  */
  text-align: start;
}

@media (max-width: 575.98px)
{
  .breadcrumb
  {
    /* Myriad-Metrik (siehe Kommentar bei .btn) - gleiches em-Muster */
    padding: calc(0.5rem + 0.087em) 0.75rem calc(0.5rem - 0.087em) 0.75rem;
    font-size: 0.875rem;
  }
}


/* ── Abwandlung: nur eine Haarlinie ── */
.breadcrumb.breadcrumb-line
{
  padding: 0 0 0.5rem 0;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--ms-akzent-rgb), 0.18);
  border-radius: 0;
}

/* ── Abwandlung: Pfeile statt Schraegstrich, ohne Balken ── */
.breadcrumb.breadcrumb-chevron
{
  --bs-breadcrumb-divider: '›';
  padding: 0;
  background-color: transparent;
  border: 0;
}

.breadcrumb.breadcrumb-chevron .breadcrumb-item + .breadcrumb-item::before
{
  font-size: 1.15em;
  line-height: 1;
}

/* ── Abwandlung: abgerundeter Balken wie die Sprach-Pillen ── */
.breadcrumb.breadcrumb-pill
{
  /* Myriad-Metrik (siehe Kommentar bei .btn) - gleiches em-Muster */
  padding: calc(0.45rem + 0.087em) 1.1rem calc(0.45rem - 0.087em) 1.1rem;
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(var(--ms-akzent-rgb), 0.25);
  border-radius: 999px;
}

/* Aufheller auf dem Seitengrund, der im dunklen Thema selbst dunkel wird -
   siehe Kommentar bei .topbar-search */
[data-bs-theme="dark"] .breadcrumb.breadcrumb-pill
{
  background-color: rgba(var(--ms-flaeche-rgb), 0.6);
}


/* ════════════════════════════════════════
   HINWEISKASTEN (.alert-dark)
════════════════════════════════════════ */

/*
  Benutzt auf den Agenda-Seiten (Austauschtreffen, naechstes Treffen, Termine)
  fuer den Kasten mit Terminen und Anmeldung. Bootstrap liefert dort ein Grau,
  das nichts mit der Seite zu tun hat - jetzt traegt er das Violett der Topbar
  (--ms-akzent-flaeche) und gehoert damit sichtbar zur Seite.

  Kontrast im hellen Thema auf #DAC3E7 (gemessen, WCAG 2.1):
    Fliesstext #633085   5,65:1  - AA erfuellt
    Linkfarbe  #7B44A4   4,04:1  - AA verfehlt (noetig sind 4,5:1)
    Linkfarbe  #4e2569   7,22:1  - AAA erfuellt

  Deshalb bleibt der Hintergrund wie gewuenscht die Topbar-Farbe, und nur die
  Links im Kasten werden auf den dunkleren Ton gesetzt. Das ist ohnehin die
  Farbe, die Links seitenweit beim Ueberfahren annehmen - es kommt also kein
  neuer Ton dazu.

  Im dunklen Thema kehrt sich die Idee "dunklerer Ton = mehr Kontrast" um:
  --ms-akzent-flaeche wird dort selbst dunkel (heller als der Seitengrund,
  das ist der Punkt des Kastens), Text und Links muessen dort darum heller
  statt dunkler werden - beides erledigt --ms-text/--ms-akzent-hover bereits
  automatisch. Nur der zusaetzliche Hover-Ton (frueher #331847, noch dunkler
  als die Linkfarbe) braucht eine eigene Umkehr, siehe unten.
*/
.alert-dark
{
  --bs-alert-bg:           var(--ms-akzent-flaeche);
  --bs-alert-border-color: rgba(var(--ms-akzent-rgb), 0.4);
  --bs-alert-color:        var(--ms-text);
  --bs-alert-link-color:   var(--ms-akzent-hover);
}

/*
  :not(.btn) wie bei ".news-compact-card .entry-links a:not(.btn)": ohne die
  Einschraenkung gewinnt diese Regel (Spezifitaet 0-1-1) gegen Bootstraps
  ".btn { text-decoration:none }" (0-1-0) - der "Kalender abonnieren"-Knopf
  stand dadurch unterstrichen und in der falschen Farbe da.
*/
.alert-dark a:not(.btn)
{
  color: var(--ms-akzent-hover);
  text-decoration: underline;
}

.alert-dark a:not(.btn):hover,
.alert-dark a:not(.btn):focus-visible
{
  color: #331847;
}

/* Dunkles Thema: noch dunkler waere hier unsichtbar - die Umkehrung der
   Betonung ist darum die hellste Textfarbe statt der dunkelsten */
[data-bs-theme="dark"] .alert-dark a:not(.btn):hover,
[data-bs-theme="dark"] .alert-dark a:not(.btn):focus-visible
{
  color: var(--ms-text-auf-akzent);
}


/* ---------------------------------------------------------------------
   Links-Seite (/{lang}/links/)

   Die Sammlung stand als schlichte .list-group da; ab etwa fuenf Eintraegen
   wirkte das gedraengt und altbacken (Rueckmeldung aus dem Test). Jetzt nach
   Thema gruppiert, mit ruhigeren Zeilen und sichtbarer Zieladresse - wer auf
   einen Link klickt, soll vorher sehen, wo er landet.

   Eigene Klassen statt .list-group: Bootstraps Zeilen bringen eigene Rahmen
   und Innenabstaende mit, die hier ueberall wieder ueberschrieben werden
   muessten - das kostet mehr Regeln als ein eigener, kleiner Satz.
   --------------------------------------------------------------------- */

/* Sprungmarken ueber den Gruppen */
.links-sprungmarken {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 26px;
}

.links-sprungmarke {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 14px;
  border: 1px solid var(--ms-akzent-flaeche);
  border-radius: 999px;
  background: var(--ms-flaeche);
  color: var(--ms-text);
  font-size: 14px;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}

.links-sprungmarke:hover,
.links-sprungmarke:focus-visible {
  /* nicht --ms-akzent: der wird im dunklen Thema hell (fuer Text/Links
     gedacht) - als Flaeche unter dem hellen --ms-text-auf-akzent waere das
     im dunklen Thema hell auf hell. --ms-akzent-stark-hover bleibt in
     beiden Themen dunkel genug. */
  background: var(--ms-akzent-stark-hover);
  border-color: var(--ms-akzent-stark-hover);
  color: var(--ms-text-auf-akzent);
  text-decoration: none;
}

.links-sprungmarke .anzahl {
  font-size: 12px;
  color: var(--ms-text-gedaempft);
  font-variant-numeric: tabular-nums;
}
.links-sprungmarke:hover .anzahl,
.links-sprungmarke:focus-visible .anzahl { color: rgba(255,255,255,.75); }


/* Gruppe: Ueberschrift, Haarlinie, Anzahl */
.links-gruppe { margin-bottom: 28px; }

.links-gruppe-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.links-gruppe-kopf h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ms-akzent);
}

.links-gruppe-kopf .linie {
  flex: 1;
  height: 1px;
  background: var(--ms-akzent-flaeche);
}

.links-gruppe-kopf .anzahl {
  font-size: 12px;
  color: var(--ms-text-gedaempft);
  font-variant-numeric: tabular-nums;
}


/* Die Zeilen einer Gruppe */
.links-liste {
  background: var(--ms-flaeche);
  border: 1px solid var(--ms-rand);
  border-radius: 8px;
  overflow: hidden;
}

.links-zeile {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--ms-rand);
  text-decoration: none;
  color: inherit;
  transition: background-color .14s;
}

.links-zeile:last-child { border-bottom: 0; }

.links-zeile:hover,
.links-zeile:focus-visible {
  background: var(--ms-hintergrund);
  text-decoration: none;
}

.links-zeile-text { flex: 1; min-width: 0; }

.links-zeile-titel {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: var(--ms-akzent);
}
.links-zeile:hover .links-zeile-titel,
.links-zeile:focus-visible .links-zeile-titel { color: var(--ms-akzent-hover); }

.links-zeile-beschrieb {
  margin: 1px 0 0;
  font-size: 14px;
  color: var(--ms-text-gedaempft);
}

.links-zeile-ziel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ms-text-gedaempft);
  white-space: nowrap;
}

/* Auf dem Handy reicht die Breite nicht fuer Text und Adresse nebeneinander */
@media (max-width: 575.98px) {
  .links-zeile { flex-direction: column; gap: 4px; }
  .links-zeile-ziel { align-self: flex-start; }
}

/*
  Weniger Bewegung - Sammelregel.

  Vorher standen hier nur diese zwei Uebergaenge. Die eigentlichen Animationen
  liefen weiter: der Farbverlauf der Ueberschriften (siehe den eigenen Block bei
  h1 weiter oben) und agenda-softGlow, ein sechs Sekunden lang pulsierender
  Schein (2s x 3). Fuer Menschen mit Gleichgewichts- oder Wahrnehmungsstoerungen
  ist genau das das Problem, gegen das die Einstellung gedacht ist.

  Die Sammelregel unten fasst alles, was spaeter dazukommt - eine neue Animation
  muss hier nicht mehr nachgetragen werden. transition/animation werden nicht
  entfernt, sondern auf eine unmerklich kurze Dauer gesetzt: so laufen
  Abschluss-Ereignisse (animationend), an denen Skripte haengen koennten, weiter.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .links-sprungmarke,
  .links-zeile { transition: none; }
}