/* Publisher · gemeinsame Grundlage aller Website-Themes.
 *
 * Die drei Farben kommen aus der Veröffentlichung (--farbe-hintergrund, --farbe-text,
 * --farbe-akzent); Flächen, Linien und Abstufungen werden daraus gemischt, damit jedes
 * Farbschema in jedem Theme stimmig bleibt. Ein Theme setzt nur seine --t-* Variablen und
 * ein paar Regeln für den Aufbau. Keine fremden Quellen; Skripte nur als Verbesserung
 * (/theme/basis.js, ab 0.1.7, nur auf Seiten, die eines brauchen). */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 300 800; src: url("/theme/schriften/source-serif-4-latin-wght-normal.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-display: swap; font-weight: 300 800; src: url("/theme/schriften/source-serif-4-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-display: swap; font-weight: 300 800; src: url("/theme/schriften/source-serif-4-latin-wght-italic.woff2") format("woff2"); }

:root {
  --f-bg: var(--farbe-hintergrund, #f3f2f2);
  --f-fg: var(--farbe-text, #201e1d);
  --f-akzent: var(--farbe-akzent, #0088b0);
  --f-flaeche: color-mix(in oklch, var(--f-fg) 4%, var(--f-bg));
  --f-erhaben: color-mix(in oklch, var(--f-fg) 2%, var(--f-bg));
  --f-n200: color-mix(in oklch, var(--f-fg) 10%, var(--f-bg));
  --f-n300: color-mix(in oklch, var(--f-fg) 17%, var(--f-bg));
  --f-n500: color-mix(in oklch, var(--f-fg) 40%, var(--f-bg));
  --f-n600: color-mix(in oklch, var(--f-fg) 52%, var(--f-bg));
  --f-n700: color-mix(in oklch, var(--f-fg) 64%, var(--f-bg));
  --f-n800: color-mix(in oklch, var(--f-fg) 80%, var(--f-bg));
  --f-a100: color-mix(in oklch, var(--f-akzent) 12%, var(--f-bg));
  --f-a200: color-mix(in oklch, var(--f-akzent) 24%, var(--f-bg));
  --f-a300: color-mix(in oklch, var(--f-akzent) 42%, var(--f-bg));
  --f-a700: color-mix(in oklch, var(--f-akzent) 82%, var(--f-fg));
  --f-a800: color-mix(in oklch, var(--f-akzent) 66%, var(--f-fg));
  --f-a900: color-mix(in oklch, var(--f-akzent) 48%, var(--f-fg));
  /* Knöpfe: --f-a700, beim Überfahren --f-a800. Wo das nicht 4,5 : 1 zur Schrift erreicht (etwa im
     Schema „sand“), schreibt der Server eine dunklere Mischung derselben Farben in den Seitenstil
     (--farbe-knopf, --farbe-knopf-hover; src/website/darstellung/kontrast.rs). */
  --f-knopf: var(--farbe-knopf, var(--f-a700));
  --f-knopf-hover: var(--farbe-knopf-hover, var(--f-a800));
  /* Schleier über Bildern, auf dem Text steht (ab 0.1.7, Kacheln mit Titel): die Textfarbe zu
     70 % deckend, darauf die Hintergrundfarbe; so bleibt Text auf jedem Bild in allen Schemata
     bei mindestens 4,5 : 1. */
  --f-bildschleier: color-mix(in oklch, var(--f-fg) 70%, transparent);
  --f-auf-bildschleier: var(--f-bg);
  /* Ab 0.1.7 für Großansicht und Menü: die dunklere und die hellere der beiden Grundfarben. Hier
     die Vorgabe der hellen Schemata; für neuere Themes setzt der Server beide im Seitenstil aus den
     geprüften Farben (`darstellung::tiefe_farben`), damit die Großansicht auch im Schema „nacht“
     dunkel ist. Daraus der Schleier hinter Menü und Dialogen (wie im Backend: Textfarbe zu 32 %),
     die Fläche der Großansicht und der Schatten eines Panels (wie die Menüs im Backend). */
  --f-tief: var(--f-fg);
  --f-hell: var(--f-bg);
  --f-schleier: color-mix(in oklch, var(--f-tief) 32%, transparent);
  --f-overlay: color-mix(in oklch, var(--f-tief) 92%, transparent);
  --schatten-panel: 0 6px 20px color-mix(in oklch, var(--f-tief) 12%, transparent);

  /* Größen gleiten zwischen Smartphone (390 px) und Desktop (1280 px), wie in der Vorschau. */
  --gr-h1: clamp(2.125rem, 1.45rem + 2.8vw, 3.5rem);
  --gr-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --gr-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --gr-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --gr-text: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --gr-zitat: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --gr-marke: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);
  --rand: clamp(22px, 6vw, 80px);
  --abstand-y: clamp(36px, 5vw, 64px);
  --abstand-block: var(--abstand-y) var(--rand);
  --abstand-kopf: clamp(16px, 2vw, 22px) var(--rand);
  --luecke: clamp(24px, 3.5vw, 48px);
  --box: clamp(32px, 4vw, 48px) clamp(20px, 3vw, 40px);
  --breite: 1280px;

  /* Theme-Vorgaben (Blatt); jedes Theme überschreibt sie. */
  --t-schrift: "Source Serif 4", Georgia, serif;
  --t-gewicht-kopf: 600;
  --t-laufweite-kopf: -0.02em;
  --t-rund-knopf: 999px;
  --t-rund-gross: 8px;
  --t-rund-mittel: 4px;
  --t-nav-transform: none;
  --t-nav-laufweite: 0;
  --t-nav-groesse: 15px;
  --t-marke-gewicht: 700;
  --t-kopflinie: 1px solid var(--f-n200);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  /* Hier statt in :root, weil das Theme --t-schrift erst am body setzt; eine abgeleitete
     Variable würde sonst mit dem Wert von :root festgelegt. Themes können sie überschreiben. */
  --t-kopf-schrift: var(--t-schrift);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--f-bg);
  color: var(--f-fg);
  font-family: var(--t-schrift);
  font-size: var(--gr-text);
  line-height: 1.65;
  font-kerning: normal;
  overflow-wrap: break-word;
}
/* Breite und Höhe stehen am Bild (Seitenverhältnis vor dem Laden); die Höhe folgt der Breite. */
img { max-width: 100%; height: auto; }
a { color: var(--f-a800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--f-a900); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--f-akzent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--f-a200); }

.sprung { position: absolute; left: 12px; top: -100px; z-index: 10; padding: 10px 16px; background: var(--f-fg); color: var(--f-bg); border-radius: var(--t-rund-mittel); text-decoration: none; }
.sprung:focus { top: 12px; color: var(--f-bg); }
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------- Kopf und Fuß */
.kopf { border-bottom: var(--t-kopflinie); }
.kopf-innen, .fuss-innen, .inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: var(--abstand-kopf); }
.marke { flex: 1 1 auto; min-width: 0; font-family: var(--t-kopf-schrift); font-weight: var(--t-marke-gewicht); font-size: var(--gr-marke); line-height: 1.2; letter-spacing: var(--t-laufweite-kopf); color: var(--f-fg); text-decoration: none; }
.marke:hover { color: var(--f-fg); }
.hauptnavigation ul, .fussnavigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.hauptnavigation a { display: inline-block; padding: 2px 0 3px; color: var(--f-fg); text-decoration: none; font-size: var(--t-nav-groesse); text-transform: var(--t-nav-transform); letter-spacing: var(--t-nav-laufweite); border-bottom: 2px solid transparent; }
.hauptnavigation a:hover { border-bottom-color: var(--f-n300); }
.hauptnavigation a[aria-current="page"] { color: var(--f-a800); border-bottom-color: var(--f-akzent); }
.inhalt { flex: 1 0 auto; }
.fuss { border-top: 1px solid var(--f-n200); color: var(--f-n700); font-size: 14px; }
.fuss-innen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: var(--abstand-kopf); }
.fuss-name { margin: 0; flex: 1 1 auto; }
.fussnavigation a { color: var(--f-n700); text-decoration: none; }
.fussnavigation a:hover, .fussnavigation a[aria-current="page"] { color: var(--f-fg); text-decoration: underline; }
/* Die Anmeldung für Betreiber: da, aber unauffällig. */
.anmelden { color: var(--f-n600); font-size: 13px; text-decoration: none; }
.anmelden:hover { color: var(--f-fg); text-decoration: underline; }
/* „Publisher by SlowAutomatics“: leiser als die Fußnavigation, das Zeichen in der Textfarbe. */
.publisher-hinweis { display: inline-flex; align-items: baseline; gap: 6px; color: var(--f-n600); font-size: 13px; text-decoration: none; white-space: nowrap; }
.publisher-hinweis:hover { color: var(--f-fg); }
.publisher-hinweis:hover span { text-decoration: underline; }
/* Der Text gibt die Grundlinie vor (wie bei den Nachbarn im Fuß), das Zeichen steht mittig. */
.publisher-symbol { flex: none; align-self: center; width: 14px; height: 14px; }
/* Hinweis für Angemeldete, solange Besucher die Wartungsseite sehen. */
.wartung-leiste { background: var(--f-fg); color: var(--f-bg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; line-height: 1.4; }
.wartung-leiste p { max-width: var(--breite); margin: 0 auto; padding: 8px var(--rand); text-align: center; }
.wartung-leiste a { color: inherit; font-weight: 600; text-decoration: underline; }
.wartung-leiste a:hover { color: inherit; }
.wartung-leiste a:focus-visible { outline-color: var(--f-bg); }
/* Die Wartungsseite: viel Raum, in der Mitte nur Name, Überschrift und ein Satz. */
.wartung { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: clamp(64px, 14vh, 160px) var(--rand) clamp(32px, 6vh, 64px); text-align: center; }
.wartung-innen { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 46rem; }
.wartung-name { font-family: var(--t-kopf-schrift); font-weight: var(--t-marke-gewicht); font-size: 15px; letter-spacing: var(--t-laufweite-kopf); color: var(--f-n700); }
.wartung-name::after { content: ""; display: block; width: 28px; height: 2px; margin: 22px auto 6px; border-radius: 1px; background: var(--f-akzent); }
.wartung-titel { font-size: var(--gr-h1); line-height: 1.08; }
.wartung-text { max-width: 32rem; font-size: var(--gr-lead); line-height: 1.55; color: var(--f-n700); }
.wartung-fuss { display: flex; justify-content: flex-end; padding: 20px var(--rand); }

@media (max-width: 599px) {
  .kopf-innen { flex-direction: column; align-items: flex-start; }
  .hauptnavigation ul { gap: 4px 18px; }
}

/* ---------------------------------------------------------- Ab 0.1.7: Logo, Untermenüs, Fuß
 * Alles hier gilt nur für Elemente, die erst mit den neuen Angaben entstehen; ohne sie sieht
 * jedes Theme aus wie vorher. Themes können die Regeln überschreiben. */
.marke.mit-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.marke .logo { display: block; width: auto; height: auto; max-height: 56px; max-width: min(320px, 100%); }
.marke .logo-zweit { display: block; width: auto; height: auto; max-height: 24px; max-width: 120px; }
.marke-name { display: block; }
/* Untermenüs im Kopf: beim Überfahren und per Tastatur (focus-within) aufgeklappt; ohne Zeiger
   (Touch) und auf schmalen Bildschirmen stehen sie eingerückt unter dem Elternpunkt. */
.hauptnavigation li { position: relative; }
.hauptnavigation .untermenue { display: none; position: absolute; left: -14px; top: 100%; z-index: 5; min-width: 12rem; flex-direction: column; gap: 0; padding: 8px 14px; background: var(--f-bg); border: 1px solid var(--f-n200); border-radius: var(--t-rund-mittel); }
.hauptnavigation li:hover > .untermenue, .hauptnavigation li:focus-within > .untermenue { display: flex; }
.hauptnavigation .untermenue a { display: block; padding: 5px 0; }
.hauptnavigation .im-zweig > a { border-bottom-color: var(--f-n300); }
@media (hover: none), (max-width: 599px) {
  .hauptnavigation .untermenue { display: flex; position: static; min-width: 0; padding: 0 0 0 14px; border: 0; background: transparent; }
}
.fussnavigation .hat-untermenue { display: flex; flex-wrap: wrap; gap: 6px 24px; }
/* Fuß: Kontaktblock als eigene Zeile vorn, Rechtliches und Symbole in der Zeile der Links. */
.fuss-kontakt { flex: 1 1 100%; order: -1; display: flex; flex-direction: column; gap: 4px; }
.fuss-kontakt-titel { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--f-fg); }
.fuss-kontakt p { margin: 0; }
.fuss-kontakt a, .fuss-recht a { color: var(--f-n700); }
.fuss-kontakt a:hover, .fuss-recht a:hover { color: var(--f-fg); }
.fuss-recht ul, .sozial ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fuss-recht a { text-decoration: none; }
.fuss-recht a:hover { text-decoration: underline; }
.sozial { align-self: center; }
.sozial ul { gap: 2px; }
.sozial a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--t-rund-mittel); color: var(--f-n700); }
.sozial a:hover { color: var(--f-fg); background: var(--f-flaeche); }
.sozial-symbol { width: 20px; height: 20px; }

/* ---------------------------------------------------------- Bausteine */
.block { padding: var(--abstand-block); }
.block + .block { padding-top: 0; }
.block-umbruch { padding-top: 8px !important; padding-bottom: 8px; }
/* Flächige Bausteine brauchen Luft nach oben, und der folgende Baustein Abstand zur Fläche. */
.block-zitat { background: var(--f-flaeche); padding-top: var(--abstand-y) !important; }
.block-zitat + .block { padding-top: var(--abstand-y); }

h1, h2, h3 { margin: 0; font-family: var(--t-kopf-schrift); font-weight: var(--t-gewicht-kopf); letter-spacing: var(--t-laufweite-kopf); text-wrap: balance; }
.titel-gross { font-size: var(--gr-h1); line-height: 1.08; }
.titel { font-size: var(--gr-h2); line-height: 1.15; }
.titel-klein, .karte-titel, .teaser-titel { font-size: var(--gr-h3); line-height: 1.25; font-weight: 600; letter-spacing: 0; text-wrap: pretty; }
.teaser-titel.gross { font-size: var(--gr-h2); line-height: 1.15; font-weight: var(--t-gewicht-kopf); letter-spacing: var(--t-laufweite-kopf); }
.teaser-titel a, .index-zeile a { color: inherit; text-decoration: none; }
.teaser-titel a:hover, .index-zeile a:hover { color: var(--f-a800); text-decoration: underline; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: var(--gr-lead); line-height: 1.55; color: var(--f-n800); }
.kicker { margin: 0; font-size: 13px; line-height: 1.4; color: var(--f-a700); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }

.lesespalte, .aufmacher-text, .spalte-text, .aufruf, .karte, .kontakt, .zwei-spalten > div, .teaser, .teaser-text, .schutz { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lesespalte { max-width: 68ch; }
.block-kartenraster, .block-textliste { display: flex; flex-direction: column; gap: 22px; }
.block-kartenraster, .block-textliste, .block-sammlung { --gap-intern: 22px; }
.block-sammlung { display: flex; flex-direction: column; gap: 14px; }

.knopf-zeile { margin-top: 6px; }
.knopf { display: inline-flex; align-items: center; padding: 12px 22px; border: 0; border-radius: var(--t-rund-knopf); background: var(--f-knopf); color: var(--f-bg); font: inherit; font-size: var(--gr-text); line-height: 1.3; text-decoration: none; cursor: pointer; }
.knopf:hover { background: var(--f-knopf-hover); color: var(--f-bg); }

.aufmacher-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); align-items: center; }
@media (min-width: 1000px) { .aufmacher-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.bild, .bild-platz { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--t-rund-gross); }
.bild { height: auto; object-fit: cover; background: var(--f-n200); }
.bild.breit, .bild-platz.breit { aspect-ratio: 16 / 9; }
/* Ein leerer Bildplatz erscheint als ruhige Fläche (wie im Editor angekündigt). */
.bild-platz { background: linear-gradient(135deg, var(--f-a200), var(--f-a100) 70%); }

.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); }
.zwei-spalten.mitte { align-items: center; }
.zwei-spalten.oben { align-items: start; }
@media (min-width: 700px) {
  .zwei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zwei-spalten.bild-rechts .spalte-bild { order: 2; }
}

.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--gr-text); line-height: 1.45; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--f-n300); }
.tabelle th { font-weight: 600; border-bottom: 2px solid var(--f-fg); }

.schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: schritt; }
.schritte > li { display: flex; gap: 16px; align-items: baseline; line-height: 1.5; counter-increment: schritt; }
.schritte > li::before { content: counter(schritt); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: var(--t-rund-knopf); background: var(--f-a100); color: var(--f-a800); font-weight: 600; font-size: .85em; }

.infokasten { margin: 0; padding: 20px 24px; border-radius: var(--t-rund-mittel); background: var(--f-a100); color: var(--f-a900); display: flex; flex-direction: column; gap: 12px; }

.zitat { margin: 0 auto; max-width: 44ch; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.zitat blockquote { margin: 0; font-style: italic; font-size: var(--gr-zitat); line-height: 1.35; }
.zitat blockquote p { text-wrap: balance; }
.zitat figcaption { font-size: 14px; color: var(--f-n700); }

.abbildung { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.abbildung figcaption { font-size: 14px; line-height: 1.5; color: var(--f-n700); }

.umbruch { height: 1px; margin: 16px 0; border: 0; background: var(--f-n300); }

.karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); }
@media (min-width: 600px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte { gap: 10px; padding: 24px; border-radius: var(--t-rund-gross); background: var(--f-flaeche); }

.aufruf { align-items: center; gap: 14px; padding: var(--box); border-radius: var(--t-rund-gross); background: var(--f-a100); color: var(--f-a900); text-align: center; }
.aufruf p { max-width: 60ch; }

.kontakt-weg { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--gr-lead); }
.kontakt-weg span { color: var(--f-n700); }

.mehr { margin: 4px 0 0; }
.leer { font-style: italic; color: var(--f-n700); }

/* ---------------------------------------------------------- Textlisten */
.teaser-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); }
@media (min-width: 600px) { .teaser-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .teaser-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Spaltenzahl einer Übersicht (ab 0.1.7, nur wenn eingestellt) für Listen im Raster. */
@media (min-width: 1000px) {
  .spalten-1 .teaser-raster { grid-template-columns: minmax(0, 1fr); }
  .spalten-2 .teaser-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spalten-4 .teaser-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Bildkacheln der Startseite (ab 0.1.7): ein schlichtes Raster aus Bild und Titel. */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); }
@media (min-width: 600px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachel-link { display: flex; flex-direction: column; gap: 12px; color: var(--f-fg); text-decoration: none; }
.kachel-bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--t-rund-gross); background: var(--f-flaeche); }
.kachel-titel { font-family: var(--t-kopf-schrift); font-weight: var(--t-gewicht-kopf); font-size: var(--gr-h3); line-height: 1.25; letter-spacing: var(--t-laufweite-kopf); }
.kachel-link:hover .kachel-titel { color: var(--f-a800); }
.teaser { gap: 10px; }
.teaser-bild { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--t-rund-mittel); background: var(--f-n200); }
.anriss { color: var(--f-n800); line-height: 1.6; }
.teaser-liste { display: flex; flex-direction: column; gap: var(--luecke); }
.teaser-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 28px; align-items: center; }
@media (min-width: 700px) { .teaser-zeile.mit-bild { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }
.teaser-zeile .teaser-bild { aspect-ratio: 4 / 3; }
.teaser-gross { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); align-items: center; margin-bottom: var(--luecke); }
@media (min-width: 1000px) { .teaser-gross.mit-bild { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.teaser-rest > .teaser { padding-top: 16px; border-top: 1px solid var(--f-n300); gap: 8px; }
.teaser-index { display: flex; flex-direction: column; }
.index-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--f-n300); }
.index-zeile:last-child { border-bottom: 1px solid var(--f-n300); }
.index-zeile time { font-size: 14px; color: var(--f-n700); }
@media (min-width: 700px) { .index-zeile { grid-template-columns: 9.5em minmax(0, 1fr) auto; } }

/* ---------------------------------------------------------- Beitrag */
.beitrag { width: 100%; max-width: calc(68ch + 2 * var(--rand)); margin: 0 auto; padding: var(--abstand-block); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.beitrag-kopf { display: flex; flex-direction: column; gap: 14px; }
.beitrag-meta { font-size: 14px; color: var(--f-n700); }
.beitrag-text { display: flex; flex-direction: column; gap: 1.1em; font-size: calc(var(--gr-text) * 1.06); line-height: 1.7; }
.beitrag-text h2 { font-size: calc(var(--gr-h3) * 1.2); line-height: 1.2; margin-top: .8em; }
.beitrag-text h3 { font-size: var(--gr-h3); line-height: 1.25; margin-top: .5em; }
/* Ohne die Galerie: Ihr Raster ist auch eine Liste (ab 0.1.7). */
.beitrag-text ul:not(.galerie-raster), .beitrag-text ol:not(.schritte) { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: .35em; }
.beitrag-text blockquote { margin: 0; padding-left: 22px; border-left: 2px solid var(--f-a300); font-style: italic; color: var(--f-n800); }
.beitrag-text .mitte { text-align: center; }
.beitrag-text .blocksatz { text-align: justify; hyphens: auto; }
.beitrag-fuss { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--f-n300); }
.begriffe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.begriffe-titel { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--f-n700); }
.stichworte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stichworte a { display: inline-block; padding: 3px 12px; border: 1px solid var(--f-n300); border-radius: var(--t-rund-knopf); color: var(--f-n800); font-size: 14px; text-decoration: none; }
.stichworte a:hover { border-color: var(--f-akzent); color: var(--f-a800); }

/* ---------------------------------------------------------- Schutz und Hinweise */
.schutz { max-width: 440px; gap: 14px; padding: var(--box); border-radius: var(--t-rund-gross); background: var(--f-flaeche); }
.schutz-form { display: flex; flex-direction: column; gap: 10px; }
.schutz-form label { font-size: 14px; color: var(--f-n800); }
.schutz-form input { width: 100%; height: 44px; padding: 8px 12px; border: 1px solid var(--f-n300); border-radius: var(--t-rund-mittel); background: var(--f-erhaben); color: var(--f-fg); font: inherit; }
.schutz-form input[aria-invalid="true"] { border-color: var(--f-a700); }
.schutz-form .knopf { align-self: flex-start; margin-top: 4px; }
.fehler { padding: 10px 14px; border-radius: var(--t-rund-mittel); background: var(--f-a100); color: var(--f-a900); font-weight: 600; }
.hinweis { padding-top: clamp(56px, 10vw, 120px); padding-bottom: clamp(56px, 10vw, 120px); }

/* ---------------------------------------------------------- Kontaktformular
   Dieselben Formularstile wie das Passwortformular (.schutz-form): Beschriftung 14 px über dem
   Feld, Felder 44 px hoch mit dem Rundungsmaß des Themes, Knopf .knopf, Meldungen wie .fehler.
   Der Rand der Felder hat wie im Publisher-Designsystem mindestens 3:1 zur Fläche (WCAG 1.4.11),
   Fehler stehen als Text am Feld (nicht nur als Farbe). Ohne Skript: Fehler am Feld sind per
   aria-describedby verknüpft, die Meldung oben ist eine aria-live-Region mit Links zu den
   Feldern. Themes ordnen an (z. B. in einer Fläche oder neben einem Bild) und behalten die Werte. */
.kontaktformular { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 44rem; }
.kontaktformular-form { display: flex; flex-direction: column; gap: 18px; }
.kontaktformular-felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 20px; }
@media (min-width: 700px) {
  .kontaktformular-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontaktformular-feld[data-feld="betreff"], .kontaktformular-feld[data-feld="nachricht"] { grid-column: 1 / -1; }
}
.kontaktformular-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kontaktformular-feld label, .kontaktformular-einwilligung label { font-size: 14px; line-height: 1.45; color: var(--f-n800); }
.kontaktformular-feld input, .kontaktformular-feld textarea, .schutz-form input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--f-n600); border-radius: var(--t-rund-mittel); background: var(--f-erhaben); color: var(--f-fg); font: inherit; line-height: 1.5; }
.kontaktformular-feld textarea { min-height: 11em; resize: vertical; }
.kontaktformular-feld input:hover, .kontaktformular-feld textarea:hover, .schutz-form input:hover { border-color: var(--f-n800); }
.kontaktformular [aria-invalid="true"], .schutz-form input[aria-invalid="true"] { border-color: var(--f-a700); box-shadow: inset 0 0 0 1px var(--f-a700); }
.kontaktformular-stern { color: var(--f-a800); font-weight: 600; }
.kontaktformular-pflichthinweis, .kontaktformular-zusatz, .kontaktformular-datenschutz { margin: 0; font-size: 14px; line-height: 1.5; color: var(--f-n700); }
.kontaktformular-datenschutz { max-width: 62ch; }
.kontaktformular-feldfehler { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--f-a900); }
.kontaktformular-status { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-left: 3px solid var(--f-akzent); border-radius: 0 var(--t-rund-mittel) var(--t-rund-mittel) 0; background: var(--f-a100); color: var(--f-a900); line-height: 1.5; }
.kontaktformular-status-titel, .kontaktformular-erfolg p { font-weight: 600; }
.kontaktformular-fehlerliste { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.kontaktformular-fehlerliste a { color: inherit; }
.kontaktformular-einwilligung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.kontaktformular-einwilligung > input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--f-a700); }
.kontaktformular-einwilligung > .kontaktformular-feldfehler { grid-column: 1 / -1; }
.kontaktformular-einwilligung > .kontaktformular-zusatz { grid-column: 2; }
/* Honeypot: für Menschen weder sichtbar noch erreichbar (aria-hidden, tabindex -1). */
.kontaktformular-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.kontaktformular-hinweis { padding: 10px 14px; border-radius: var(--t-rund-mittel); background: var(--f-flaeche); color: var(--f-n800); }
.kontaktformular .knopf-zeile { margin-top: 2px; }
.kontaktformular .knopf:focus-visible { outline-offset: 3px; }
/* Mit Bild (ab 0.1.7, in jedem Theme): Einleitung über beiden Spalten, darunter links das Bild,
   rechts das Formular; schmal untereinander in der Reihenfolge des HTML (Formular zuerst, mit
   „Bild zuerst“ das Bild). */
.kontaktformular.mit-bild { max-width: var(--breite); }
.kontaktformular-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); align-items: start; }
.kontaktformular-bild { min-width: 0; }
.kontaktformular-foto { display: block; width: 100%; height: auto; border-radius: var(--t-rund-gross); background: var(--f-n200); }
.kontaktformular-inhalt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 700px) {
  .kontaktformular-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontaktformular-spalten > .kontaktformular-bild { grid-column: 1; grid-row: 1; }
  .kontaktformular-spalten > .kontaktformular-inhalt { grid-column: 2; grid-row: 1; }
  /* In der halben Breite stehen die Felder untereinander, erst auf großen Bildschirmen paarweise. */
  .mit-bild .kontaktformular-felder { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .mit-bild .kontaktformular-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .kontaktformular-form { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  a, .knopf { transition: color .15s, background-color .15s, border-color .15s; }
}

@media print {
  .kopf nav, .fuss, .sprung, .knopf-zeile { display: none; }
  body { background: #fff; color: #000; }
  .block { padding: 12px 0; }
}

/* ---------------------------------------------------------- KI-Kennzeichnung
   Nach den EU-Symbolen: das Grundsymbol (Kreis mit „AI“) und das Label als dezente, umrandete
   Pille im Stil des Themes (Rundung des Knopfs), daneben sichtbar „Mehr erfahren“. Die Erklärung
   klappt ohne Skript auf (details/summary). Farben aus Theme und Farbschema (currentColor),
   Größe aus der Schrift; das Zeichen mindestens 1,1em. Beiträge: unter der Metazeile; Seiten:
   oben im Inhalt; Listen: kompakt neben den Metadaten, ohne zweite Ebene. */
.ki-kennzeichnung { font-size: 14px; line-height: 1.45; color: var(--f-n800); }
.ki-kennzeichnung summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 100%; cursor: pointer; list-style: none; border-radius: var(--t-rund-mittel); }
.ki-kennzeichnung summary::-webkit-details-marker { display: none; }
.ki-pille { display: inline-flex; align-items: center; gap: .45em; padding: .2em .8em .2em .3em; border: 1px solid var(--f-n300); border-radius: var(--t-rund-knopf); background: var(--f-erhaben); color: var(--f-fg); font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.ki-symbol { flex: none; display: block; width: 1.3em; height: 1.3em; }
.ki-mehr { display: inline-flex; align-items: center; gap: .45em; color: var(--f-n700); text-decoration: underline; text-decoration-color: var(--f-n300); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Ein feiner Winkel zeigt, dass es mehr zu lesen gibt. */
.ki-mehr::after { content: ""; flex: none; width: .38em; height: .38em; margin: 0 .1em; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-.18em) rotate(45deg); opacity: .8; }
.ki-kennzeichnung[open] .ki-mehr::after { transform: translateY(.1em) rotate(-135deg); }
.ki-kennzeichnung summary:hover .ki-pille { border-color: var(--f-n500); }
.ki-kennzeichnung summary:hover .ki-mehr { color: var(--f-fg); text-decoration-color: currentColor; }
.ki-kennzeichnung p { max-width: 62ch; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--f-n300); color: var(--f-n800); text-wrap: pretty; }
.beitrag-meta + .ki-kennzeichnung { margin-top: -2px; }
/* Seiten: eine leise Zeile über dem ersten Baustein, in der Breite des Inhalts. */
.ki-seite { padding: clamp(14px, 2vw, 20px) var(--rand) 0; }
.inhalt > .ki-seite + .block { padding-top: clamp(20px, 3vw, 36px); }
.theme-satz .ki-seite { display: flex; flex-direction: column; align-items: center; text-align: center; }
.theme-satz .ki-seite p, .theme-satz .beitrag-kopf .ki-kennzeichnung p { margin-left: auto; margin-right: auto; text-align: left; }
.theme-linie .ki-pille, .theme-raster .ki-pille { letter-spacing: .02em; }
/* Listen: Zeichen und Label klein umrandet in der Zeile der Metadaten, ohne Großbuchstaben
   der Kicker (das Label bleibt, wie es ist). */
.ki-marke { display: inline-flex; align-items: center; gap: .3em; padding: 0 .55em 0 .2em; border: 1px solid var(--f-n300); border-radius: var(--t-rund-knopf); color: var(--f-n800); font-weight: 500; line-height: 1.6; vertical-align: middle; white-space: nowrap; text-transform: none; letter-spacing: .01em; }
.ki-marke .ki-symbol { width: 1.15em; height: 1.15em; }
/* Sprachkürzel und KI-Marke folgen den Metadaten als eine Gruppe, die nur als Ganzes umbricht. */
.kicker-marken { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-left: 4px; vertical-align: middle; }
@media print {
  .ki-mehr::after { display: none; }
}

/* ---------------------------------------------------------- Sprachen
   Website-Umschalter im Kopf (Kürzel, die aktuelle Sprache umrandet), Textumschalter am Text,
   Hinweis, wenn eine Fassung fehlt, und das Sprachkürzel in Listen. Alles Links ohne Skript. */
.sprachwahl ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.sprachwahl a { display: inline-block; min-width: 2.4em; padding: 2px 6px; border: 1px solid transparent; border-radius: var(--t-rund-mittel); color: var(--f-n700); font-size: 13px; line-height: 1.5; letter-spacing: .06em; text-align: center; text-decoration: none; }
.sprachwahl a:hover { color: var(--f-fg); border-color: var(--f-n200); }
.sprachwahl a[aria-current="true"] { color: var(--f-fg); border-color: var(--f-n300); font-weight: 600; }
.fassungen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; line-height: 1.5; color: var(--f-n700); }
.fassungen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fassungen a { color: var(--f-n800); text-decoration-color: var(--f-n300); }
.fassungen a:hover { color: var(--f-fg); text-decoration-color: currentColor; }
.fassungen a[aria-current="true"] { color: var(--f-fg); font-weight: 600; text-decoration: none; }
.theme-satz .fassungen { justify-content: center; }
.sprachhinweis { max-width: 68ch; padding: 10px 14px; border-left: 3px solid var(--f-akzent); border-radius: 0 var(--t-rund-mittel) var(--t-rund-mittel) 0; background: var(--f-flaeche); color: var(--f-n800); font-size: 15px; line-height: 1.5; }
.sprachhinweis-seite { padding: clamp(14px, 2vw, 20px) var(--rand) 0; }
.inhalt > .sprachhinweis-seite + .block { padding-top: clamp(20px, 3vw, 36px); }
.inhalt > .sprachhinweis-seite + .ki-seite { padding-top: 12px; }
.theme-satz .sprachhinweis-seite { display: flex; justify-content: center; }
.sprachkuerzel { display: inline-block; padding: 0 .4em; border: 1px solid var(--f-n300); border-radius: var(--t-rund-mittel); color: var(--f-n700); font-size: .9em; font-weight: 600; line-height: 1.45; letter-spacing: .05em; vertical-align: middle; }
@media print {
  .sprachwahl, .fassungen { display: none; }
}

/* ---------------------------------------------------------- Bilder und Blöcke ab 0.1.7
   Bildausschnitt und Seitenverhältnis kommen als Klassen, deren Regeln der Server in den
   Seitenstil schreibt (die CSP erlaubt keine Stilattribute): `.fokus-<x>-<y>` setzt
   object-position sowie --fokus-x und --fokus-y, `.sv-<Hundertstel>` setzt --sv (Breite durch
   Höhe, etwa 1.50). Ein Theme nutzt sie für zugeschnittene Kacheln (object-fit: cover) und
   Bildreihen gleicher Höhe (flex: var(--sv) 1 0). */

/* Galerie: Raster mit ein bis drei Spalten, jedes Bild ein Link auf die Großansicht. */
.galerie-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); }
@media (min-width: 600px) { .galerie-spalten-2 .galerie-raster, .galerie-spalten-3 .galerie-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .galerie-spalten-3 .galerie-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie-figur { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.galerie-link { display: block; border-radius: var(--t-rund-gross); }
.galerie-bild { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--t-rund-gross); background: var(--f-n200); }
/* Eine Spalte: ganze Bilder untereinander, nicht beschnitten. */
.galerie-spalten-1 .galerie-bild { aspect-ratio: auto; }
.galerie-unterschrift { font-size: 14px; line-height: 1.5; color: var(--f-n700); }
.block-galerie { display: flex; flex-direction: column; gap: 22px; }

/* Zitat mit Quelle: auf Seiten wie bisher groß und mittig, in Texten in der Lesespalte. */
.zitat-quelle { font-size: 14px; line-height: 1.5; color: var(--f-n700); }
.beitrag-text .zitat { margin: 0; max-width: none; gap: 8px; text-align: inherit; }
.beitrag-text .zitat blockquote { font-size: inherit; line-height: inherit; }
.beitrag-text .zitat-quelle { padding-left: 24px; }

/* Einbettung mit Zwei-Klick-Lösung: erst eine ruhige Fläche mit Hinweis, dann der Rahmen. */
.einbettung { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.einbettung-vorschau { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: var(--box); border: 1px solid var(--f-n300); border-radius: var(--t-rund-gross); background: var(--f-flaeche); }
.einbettung-vorschau.einbettung-video { aspect-ratio: 16 / 9; }
.einbettung-anbieter { font-family: var(--t-kopf-schrift); font-weight: var(--t-gewicht-kopf); font-size: var(--gr-h3); line-height: 1.25; }
.einbettung-hinweis { max-width: 62ch; font-size: 14px; line-height: 1.5; color: var(--f-n800); }
.einbettung-rahmen iframe { display: block; width: 100%; border: 0; border-radius: var(--t-rund-gross); background: var(--f-flaeche); }
.einbettung-rahmen.einbettung-video iframe { aspect-ratio: 16 / 9; height: auto; }
.einbettung-titel { font-size: 14px; line-height: 1.5; color: var(--f-n700); }
.block-einbettung .einbettung { max-width: 68ch; }
.theme-satz .block-einbettung .einbettung { margin: 0 auto; }

/* Link-Liste: je Eintrag ein Knopf im Stil des Themes, untereinander. */
.linkliste-eintraege { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.linkliste-text { color: var(--f-n800); }
.theme-satz .linkliste { align-items: center; text-align: center; }
.theme-satz .linkliste-eintraege { align-items: center; }

/* Angaben eines Texts als Attributtabelle. Kategorie, Schlagworte und Datum stehen in diesen
   Themes schon am Text; sichtbar sind hier nur die eigenen Angaben. Ein Theme, das die Tabelle
   als Ganzes zeigt, blendet .angabe-grund und .angaben-ohne-eigene wieder ein. */
.angaben { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 14px; line-height: 1.5; color: var(--f-n800); }
.angabe { display: contents; }
.angabe dt { font-weight: 600; }
.angabe dd { margin: 0; }
.angabe dd a { color: inherit; }
.angabe-grund, .angaben-ohne-eigene { display: none; }
.theme-satz .angaben { justify-content: center; text-align: left; }

@media print {
  .einbettung-aktion { display: none; }
}

/* ---------------------------------------------------------- Großansicht und Menü (ab 0.1.7)
   Für Themes, die die Module „lightbox“ und „menue“ aus basis.js einschalten
   (`Publisher.nutze`): Das Skript setzt dann `mit-lightbox` bzw. `mit-menue` an <html>, und nur
   darunter gilt hier etwas. Werte wie im übrigen Theme: Rundung des Themes, Fokusring, Übergänge
   von .15 s, nichts davon bei weniger Bewegung. Wo und wie das Panel des Menüs erscheint,
   bestimmt das Theme. */
.mit-lightbox.lightbox-offen, .mit-lightbox.lightbox-offen body, .mit-menue.menue-offen body { overflow: hidden; }
.mit-lightbox .lightbox { position: fixed; inset: 0; z-index: 60; display: flex; background: var(--f-overlay); color: var(--f-hell); font-family: var(--t-schrift); }
.mit-lightbox .lightbox[hidden] { display: none; }
.mit-lightbox .lightbox-figur { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 72px 20px; }
.mit-lightbox .lightbox-buehne { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.mit-lightbox .lightbox-bild { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--t-rund-mittel); }
.mit-lightbox .lightbox-fuss { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 18px; max-width: 68ch; min-height: 1.5em; font-size: 14px; line-height: 1.5; text-align: center; }
.mit-lightbox .lightbox-zaehler { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mit-lightbox .lightbox-knopf { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--t-rund-mittel); background: transparent; color: var(--f-hell); cursor: pointer; }
.mit-lightbox .lightbox-knopf[hidden] { display: none; }
.mit-lightbox .lightbox-knopf:hover { background: color-mix(in oklch, var(--f-hell) 14%, transparent); }
.mit-lightbox .lightbox-knopf:focus-visible { outline-color: var(--f-hell); }
.mit-lightbox .lightbox-schliessen { top: 12px; right: 12px; }
/* Zeichen ohne Schrift und ohne Bild: Pfeile aus zwei Kanten, das Kreuz aus zwei Linien. */
.mit-lightbox .lightbox-zeichen { display: block; position: relative; }
.mit-lightbox .lightbox-zurueck .lightbox-zeichen, .mit-lightbox .lightbox-weiter .lightbox-zeichen { width: 12px; height: 12px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.mit-lightbox .lightbox-zurueck .lightbox-zeichen { margin-left: 5px; transform: rotate(45deg); }
.mit-lightbox .lightbox-weiter .lightbox-zeichen { margin-right: 5px; transform: rotate(-135deg); }
.mit-lightbox .lightbox-schliessen .lightbox-zeichen, .mit-lightbox .lightbox-schliessen .lightbox-zeichen::after { width: 20px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.mit-lightbox .lightbox-schliessen .lightbox-zeichen::after { content: ""; position: absolute; left: 0; top: 0; transform: rotate(90deg); }
.mit-lightbox .lightbox-zurueck, .mit-lightbox .lightbox-weiter { top: 50%; margin-top: -22px; }
.mit-lightbox .lightbox-zurueck { left: 12px; }
.mit-lightbox .lightbox-weiter { right: 12px; }
@media (max-width: 599px) {
  .mit-lightbox .lightbox-figur { padding: 64px 12px 72px; }
  .mit-lightbox .lightbox-zurueck, .mit-lightbox .lightbox-weiter { top: auto; bottom: 12px; margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .mit-lightbox .lightbox:not([hidden]) { animation: publisher-einblenden .15s ease-out; }
  .mit-lightbox .lightbox-knopf { transition: background-color .15s; }
}
@keyframes publisher-einblenden { from { opacity: 0; } }

/* Menüknopf: drei Striche, offen ein Kreuz; mindestens 44 × 44 px. */
.mit-menue .menue-knopf { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--f-n300); border-radius: var(--t-rund-mittel); background: var(--f-bg); color: var(--f-fg); cursor: pointer; }
.mit-menue .menue-knopf[hidden] { display: none; }
.mit-menue .menue-knopf:hover { border-color: var(--f-n600); }
.mit-menue .menue-knopf-striche, .mit-menue .menue-knopf-striche::before, .mit-menue .menue-knopf-striche::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; }
.mit-menue .menue-knopf-striche { position: relative; }
.mit-menue .menue-knopf-striche::before, .mit-menue .menue-knopf-striche::after { content: ""; position: absolute; left: 0; }
.mit-menue .menue-knopf-striche::before { top: -6px; }
.mit-menue .menue-knopf-striche::after { top: 6px; }
.mit-menue .menue-knopf[aria-expanded="true"] .menue-knopf-striche { background: transparent; }
.mit-menue .menue-knopf[aria-expanded="true"] .menue-knopf-striche::before { top: 0; transform: rotate(45deg); }
.mit-menue .menue-knopf[aria-expanded="true"] .menue-knopf-striche::after { top: 0; transform: rotate(-45deg); }
.mit-menue .menue-schleier { position: fixed; inset: 0; z-index: 40; background: var(--f-schleier); }
.mit-menue .menue-schleier[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mit-menue .menue-knopf { transition: border-color .15s; }
  .mit-menue .menue-knopf-striche, .mit-menue .menue-knopf-striche::before, .mit-menue .menue-knopf-striche::after { transition: transform .15s, top .15s, background-color .15s; }
  .mit-menue .menue-schleier:not([hidden]) { animation: publisher-einblenden .15s ease-out; }
}
@media print {
  .mit-menue .menue-knopf, .mit-menue .menue-schleier, .mit-lightbox .lightbox { display: none; }
}