/* ==========================================================================
   SBC-Standard - Stylesheet
   Schrift und Grundhaltung folgen ibtc.de / bibservice.de / bibhelp.de,
   die Leitfarbe (Petrol) unterscheidet den Auftritt davon.
   Alle Farbpaare sind auf WCAG 2.1 AA geprueft.
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------ */
/* Source Sans Pro, SIL Open Font License. Liegt lokal - es wird keine
   Verbindung zu fremden Servern aufgebaut (Datenschutz).                    */

@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/sourcesanspro-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/sourcesanspro-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/sourcesanspro-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/sourcesanspro-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/sourcesanspro-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/sourcesanspro-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/sourcesanspro-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/sourcesanspro-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Farben und Masse --------------------------------------------------- */

:root {
  /* Die Baender oben und unten - sie behalten ihre Farbe in beiden
     Darstellungen, so wie bei ibtc.de, bibservice.de und bibhelp.de. */
  --band:        #1f7a8c;   /* Petrol; Weiss darauf 4,98:1 */
  --band-tief:   #17606f;   /* schmales Band, Navigationskaestchen, Fusszeile */
  --band-text:   #ffffff;
  --band-leise:  #cfe6ec;   /* auf --band-tief 5,5:1 */

  --leit:        #1f7a8c;   /* Petrol, 4,98:1 auf Weiss */
  --leit-dunkel: #17606f;
  --leit-hell:   #e8f4f6;
  --leit-rand:   #bfdde3;

  --text:        #22292e;   /* 14,7:1 auf Weiss */
  --text-leise:  #5a6570;   /* 5,9:1  auf Weiss */
  --grund:       #ffffff;
  --grund-matt:  #f6f8f9;
  --rand:        #dde3e6;

  --warn:        #963333;   /* aus der Hausfarbwelt */
  --gut:         #00762a;

  --spalte:      74rem;
  --radius:      6px;
  --schatten:    0 1px 2px rgba(20, 30, 35, .06), 0 4px 16px rgba(20, 30, 35, .05);

  --schrift: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Arial, sans-serif;
  --schrift-fest: ui-monospace, 'DejaVu Sans Mono', 'Cascadia Mono', Consolas, monospace;
}

/* Dunkle Darstellung.
   Sie wird nicht ueber prefers-color-scheme geschaltet, sondern ueber das
   Attribut data-darstellung am <html>-Element. Das setzt ein kurzes Skript im
   Seitenkopf nach der Wahl in der Kopfleiste (Automatisch / Hell / Dunkel).
   Ohne JavaScript bleibt es hell - wie bei den anderen Seiten der Familie. */
:root[data-darstellung="dunkel"] {
  --leit:        #5fc2d6;   /* 8,7:1 auf dem dunklen Grund */
  --leit-dunkel: #8ad6e5;
  --leit-hell:   #16292e;
  --leit-rand:   #24454d;

  --text:        #e7ecef;
  --text-leise:  #a3aeb6;
  --grund:       #14181b;
  --grund-matt:  #1a1f23;
  --rand:        #2b3238;

  --warn:        #e88b8b;
  --gut:         #6cc98a;
  --schatten:    0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
}

/* --- Grundgeruest ------------------------------------------------------- */

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

html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--band);      /* schimmert an den Raendern durch, wie bei ibtc.de */
  -webkit-text-size-adjust: 100%;
}

.breite { width: 100%; max-width: var(--spalte); margin-inline: auto; padding-inline: 1.25rem; }

/* Der Inhalt sitzt als helle Flaeche zwischen den farbigen Baendern. */
.inhalt-flaeche { background: var(--grund); }

.nur-vorlesen {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sprungmarke {
  position: absolute; left: .75rem; top: -4rem; z-index: 100;
  background: var(--leit); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; font-weight: 600;
  transition: top .15s ease;
}
.sprungmarke:focus { top: 0; }

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

main:focus { outline: none; }

/* --- Kopfbereich -------------------------------------------------------- */

/* Schmales Band ganz oben: Geschwisterseiten und Darstellungs-Wahl */
.oberleiste { background: var(--band-tief); font-size: .85rem; }
.oberleiste-innen {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 1.25rem; min-height: 2.1rem; flex-wrap: wrap;
}
.oberleiste ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.oberleiste a { color: var(--band-leise); text-decoration: none; }
.oberleiste a:hover { color: var(--band-text); text-decoration: underline; }
.oberleiste :focus-visible { outline-color: var(--band-text); }

.einstellung {
  display: flex; align-items: center; gap: .45rem;
  color: var(--band-text);                 /* heller als die Verweise daneben */
}
/* Trennstrich nur vor der ersten Einstellung - er scheidet die Verweise
   auf die anderen Seiten von den Einstellungen. */
.sprach-wahl { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .35); }
.einstellung label,
.einstellung-titel { font-weight: 600; }

/* Sprachumschalter: kurze Liste statt Auswahlmenue, damit beide Sprachen
   sichtbar sind und Suchmaschinen den Verweis finden. */
.sprach-wahl ul { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.sprach-wahl a,
.sprach-wahl .sprache-aktiv {
  display: block; padding: .15rem; border-radius: 3px;
  border: 1px solid transparent; line-height: 0;
}
.flagge { width: 1.5rem; height: 1rem; display: block; border-radius: 2px; }
.sprach-wahl a .flagge { opacity: .65; }
.sprach-wahl a:hover .flagge { opacity: 1; }
/* Die gewaehlte Sprache ist am hellen Rahmen erkennbar - Farbe allein waere
   fuer Farbfehlsichtige kein Unterschied (WCAG 1.4.1). */
.sprach-wahl .sprache-aktiv { border-color: var(--band-text); }
.einstellung select {
  font: inherit; font-size: .85rem; color: var(--band-text);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px;
  padding: .1rem 1.4rem .1rem .4rem; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23ffffff'%3E%3Cpath d='M2 4h8l-4 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .35rem center;
  background-size: .6rem;
}
.einstellung select:hover { background-color: rgba(255, 255, 255, .24); }
/* Das Auswahlmenue selbst zeichnet das System - dort braucht es Kontrast. */
.einstellung option { color: #22292e; background: #ffffff; }

/* Hauptband mit Wortmarke und Navigation.
   position/z-index: die aufgeklappte Trefferliste der Suche haengt an diesem
   Band. Der Kapitelbaum daneben ist "sticky" und damit ebenfalls ein
   positioniertes Element; ohne diese Zeile zeichnete er sich - weil er im
   Quelltext spaeter steht - ueber die Trefferliste und liesse sie
   durchsichtig wirken. */
.kopf { background: var(--band); position: relative; z-index: 20; }

.kopf-innen {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.75rem; flex-wrap: wrap;
}

.wortmarke {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: var(--band-text); margin-right: auto; padding: .5rem 0;
}
.wortmarke-zeichen { width: 2.5rem; height: 2.5rem; flex: none; }
.wortmarke-zeichen rect:first-child { fill: #ffffff; }
.wortmarke-zeichen .striche rect { fill: var(--band); }
.wortmarke-text { display: flex; flex-direction: column; line-height: 1.15; }
.wortmarke-text strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
/* Weiss, nicht der hellere Ton: bei dieser Schriftgroesse fordert WCAG 4,5:1,
   und --band-leise erreicht auf dem Hauptband nur 3,8:1. */
.wortmarke-text span { font-size: .85rem; color: var(--band-text); }

.hauptnavigation ul { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.hauptnavigation a {
  display: block; padding: .4rem .9rem; border-radius: 4px;
  background: var(--band-tief); border: 1px solid var(--band-tief);
  color: var(--band-text); text-decoration: none; font-weight: 600; font-size: .98rem;
}
.hauptnavigation a:hover { border-color: var(--band-text); }
.hauptnavigation a[aria-current],
.hauptnavigation a.im-bereich {
  background: var(--grund); border-color: var(--grund); color: var(--leit);
}
.kopf :focus-visible { outline-color: var(--band-text); }

.menue-schalter {
  display: none; align-items: center; gap: .4rem;
  font: inherit; font-weight: 600; color: var(--band-text);
  background: var(--band-tief); border: 1px solid var(--band-tief); border-radius: 4px;
  padding: .45rem .7rem; cursor: pointer;
}
.menue-schalter:hover { border-color: var(--band-text); }
.menue-schalter svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; stroke-width: 2; fill: none; }

/* --- Suche -------------------------------------------------------------- */

.suche { position: relative; flex: 0 1 17rem; }
.suche input {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .45rem .75rem .45rem 2rem;
  border: 1px solid var(--band-tief); border-radius: 4px;
  background: #ffffff no-repeat .55rem center/ .95rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6570' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  color: #22292e;
}
.suche input::placeholder { color: #5a6570; }

.suchergebnisse {
  position: absolute; top: calc(100% + .4rem); right: 0;
  width: min(30rem, 88vw); max-height: 24rem; overflow-y: auto;
  background: var(--grund); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten); padding: .3rem;
}
.suchergebnisse a {
  display: block; padding: .5rem .6rem; border-radius: 4px;
  text-decoration: none; color: var(--text);
}
.suchergebnisse a:hover, .suchergebnisse a.markiert { background: var(--leit-hell); }
.suchergebnisse strong { display: block; color: var(--leit); font-size: .98rem; }
.suchergebnisse .pfad { display: block; font-size: .78rem; color: var(--text-leise); }
.suchergebnisse .schnipsel { display: block; font-size: .85rem; color: var(--text-leise); }
.suchergebnisse mark { background: #ffe9a8; color: inherit; border-radius: 2px; }
:root[data-darstellung="dunkel"] .suchergebnisse mark { background: #5c4a12; color: #fff; }
.suchergebnisse p { margin: .5rem .6rem; color: var(--text-leise); font-size: .9rem; }

/* --- Seitengeruest ------------------------------------------------------ */

/* Voreinstellung: Kapitelbaum rechts, damit der Blick zuerst auf den Inhalt
   faellt. Umschaltbar ueber die Kopfleiste; ohne JavaScript bleibt es rechts.

   Im Dokument steht <main> vor der Seitenleiste. Dadurch stimmt die
   Reihenfolge beim Durchtabben mit dem ueberein, was man sieht, und
   Screenreader lesen den Inhalt vor der Navigation. */
.geruest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 2.5rem;
  align-items: start;
  padding-block: 2rem 2.25rem;
}
.geruest > main { min-width: 0; }
.geruest > .seitenleiste { padding-left: .5rem; }

:root[data-leiste="links"] .geruest { grid-template-columns: 16rem minmax(0, 1fr); }
:root[data-leiste="links"] .geruest > .seitenleiste {
  order: -1; padding-left: 0; padding-right: .5rem;
}

/* Seiten ohne Kapitelbaum (Downloads, Barrierefreiheit ...) und die
   Startseite: eine Spalte statt zwei. Die Breite des Textes regelt weiter
   unten die Regel fuer .text. */
.geruest.ohne-leiste,
body.start .geruest,
:root[data-leiste="links"] .geruest.ohne-leiste { grid-template-columns: minmax(0, 1fr); }

/* --- Kapitelbaum -------------------------------------------------------- */

.seitenleiste {
  position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto;
  font-size: .95rem;
}
.seitenleiste-titel {
  margin: 0 0 .6rem; font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise);
}
.seitenleiste ul { list-style: none; margin: 0; padding: 0; }
.seitenleiste ul ul {
  margin-left: .55rem; padding-left: .6rem; border-left: 1px solid var(--rand);
}
.seitenleiste a {
  display: block; padding: .22rem .45rem; border-radius: 4px;
  color: var(--text); text-decoration: none;
}
.seitenleiste a:hover { background: var(--grund-matt); color: var(--leit); }
.seitenleiste a[aria-current] {
  background: var(--leit-hell); color: var(--leit); font-weight: 600;
}

/* Aufklappbare Zweige. Die Knoepfe setzt kapitelbaum.js ein; ohne Skript
   greift keine dieser Regeln, weil es dann keine Knoepfe gibt. */
.seitenleiste li.hat-kinder {
  display: flex; flex-wrap: wrap; align-items: flex-start;
}
.seitenleiste li.hat-kinder > a { flex: 1 1 0; min-width: 0; }
.seitenleiste li.hat-kinder > ul { flex: 0 0 100%; }

.zweig-schalter {
  flex: none;
  width: 1.5rem; height: 1.5rem;            /* 24px - Mindestgroesse nach WCAG 2.5.8 */
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: .05rem;
  padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--text-leise); cursor: pointer;
}
.zweig-schalter:hover { background: var(--grund-matt); color: var(--leit); }
.zweig-schalter svg {
  width: .7rem; height: .7rem; fill: currentColor;
  transition: transform .15s ease;
}
.zweig-schalter[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Ohne Knopf blieb links Platz fuer die Einrueckung; mit Knopf uebernimmt
   der die Rolle, deshalb rutschen die Unterlisten etwas nach links. */
.seitenleiste.aufklappbar ul ul { margin-left: .2rem; padding-left: .9rem; }

/* Eintraege ohne Unterseiten haben keinen Knopf - ihre Beschriftung stuende
   sonst um dessen Breite weiter links als die der aufklappbaren. Sie bekommen
   die Breite deshalb als Einrueckung, dann fluchten alle Beschriftungen. */
.seitenleiste.aufklappbar li:not(.hat-kinder) > a { margin-left: 1.5rem; }

/* --- Brotkrumen und Blaettern ------------------------------------------- */

.brotkrumen ol {
  display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0 0 1rem;
  padding: 0; font-size: .87rem; color: var(--text-leise);
}
.brotkrumen li + li::before { content: "›"; margin-right: .3rem; color: var(--rand); }
.brotkrumen a { color: var(--text-leise); }

.blaettern-leiste {
  display: flex; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rand);
}
.blaettern {
  flex: 1 1 0; display: flex; flex-direction: column; gap: .1rem;
  padding: .75rem 1rem; border: 1px solid var(--rand); border-radius: var(--radius);
  text-decoration: none; color: var(--text); background: var(--grund);
}
.blaettern:hover { border-color: var(--leit); background: var(--leit-hell); }
.blaettern span { font-size: .78rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; }
.blaettern strong { color: var(--leit); font-weight: 600; }
.blaettern.vor { text-align: right; }

/* --- Textkoerper -------------------------------------------------------- */

/* Der Textkoerper nutzt die verfuegbare Breite aus. Wollen Sie die Zeilen
   kuerzer haben, tragen Sie hier eine Breite ein, z.B. max-width: 46rem;
   dann laeuft der Fliesstext nicht mehr ueber die ganze Spalte. */
.text { max-width: none; }

.text h1 {
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.2; letter-spacing: -.015em; margin: 0 0 1.25rem;
}
.text h2 {
  font-size: 1.45rem; line-height: 1.3; margin: 2.5rem 0 .8rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--rand);
}
.text h3 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
.text h4 { font-size: 1rem; margin: 1.5rem 0 .4rem; }

.text p, .text li { overflow-wrap: break-word; }
.text p { margin: 0 0 1rem; }
.text ul, .text ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.text li { margin-bottom: .3rem; }
.text li > ul, .text li > ol { margin-top: .3rem; }

.text a { color: var(--leit); text-decoration-thickness: 1px; text-underline-offset: .16em; }
.text a:hover { color: var(--leit-dunkel); }

.text hr { border: 0; border-top: 1px solid var(--rand); margin: 2rem 0; }

.text img { max-width: 100%; height: auto; border-radius: var(--radius); }

.text code {
  font-family: var(--schrift-fest); font-size: .88em;
  background: var(--grund-matt); border: 1px solid var(--rand);
  border-radius: 4px; padding: .08em .35em;
}
.text pre {
  background: var(--grund-matt); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .9rem 1rem; overflow-x: auto;
  font-size: .9rem; line-height: 1.5;
}
.text pre code { background: none; border: 0; padding: 0; font-size: 1em; }

.text blockquote {
  margin: 0 0 1rem; padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--leit-rand); color: var(--text-leise);
}

/* Ueberschriften-Anker der toc-Erweiterung */
.text .headerlink {
  margin-left: .4rem; opacity: 0; text-decoration: none; color: var(--text-leise);
  font-weight: 400;
}
.text h2:hover .headerlink, .text h3:hover .headerlink,
.text .headerlink:focus { opacity: 1; }

/* --- Tabellen ----------------------------------------------------------- */

.tabelle-umbruch { overflow-x: auto; margin: 0 0 1.4rem; }
.tabelle-umbruch:focus-visible { outline: 3px solid var(--leit); outline-offset: 3px; }
.text table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.text th, .text td {
  text-align: left; vertical-align: top;
  padding: .5rem .7rem; border-bottom: 1px solid var(--rand);
}
.text thead th {
  background: var(--grund-matt); font-weight: 600;
  border-bottom: 2px solid var(--leit-rand); white-space: nowrap;
}
.text tbody tr:hover { background: var(--grund-matt); }

/* --- Zeichentabelle (Codepage 850) -------------------------------------- */
/* 16 x 16 Zellen, jede mit dem Zeichen und seiner dezimalen Nummer. Die drei
   Bereiche (Steuerzeichen, ASCII, Erweiterung) sind zart hinterlegt, damit man
   sie auf einen Blick auseinanderhaelt - die Nummer steht trotzdem in jeder
   Zelle, die Farbe traegt also keine Information allein. */

.text table.zeichentabelle { table-layout: fixed; min-width: 44rem; }
.text .zeichentabelle th,
.text .zeichentabelle td {
  padding: .3rem .1rem; text-align: center; vertical-align: middle;
  border: 1px solid var(--rand);
}
.text .zeichentabelle thead th { text-align: center; font-size: .78rem; color: var(--text-leise); }
.text .zeichentabelle tbody th {
  background: var(--grund-matt); font-size: .78rem; color: var(--text-leise);
  font-weight: 600; width: 3rem;
}
.text .zeichentabelle tbody tr:hover { background: none; }
.text .zeichentabelle td:hover { background: var(--leit-hell); }
.zeichentabelle .zeichen {
  display: block; font-family: var(--schrift-fest); font-size: 1.15rem; line-height: 1.3;
}
.zeichentabelle .zeichen.klein { font-size: .72rem; letter-spacing: .02em; }
.zeichentabelle .nr { display: block; font-size: .7rem; color: var(--text-leise); }
.zeichentabelle .steuer { background: var(--grund-matt); }
.zeichentabelle .steuer .zeichen { color: var(--text-leise); }
.zeichentabelle .erweiterung { background: var(--leit-hell); }

.zeichen-legende { font-size: .9rem; color: var(--text-leise); }
.zeichen-legende .muster {
  display: inline-block; width: .85rem; height: .85rem; margin: 0 .3rem 0 1rem;
  vertical-align: -.1rem; border: 1px solid var(--rand); border-radius: 2px;
}
.zeichen-legende .muster:first-child { margin-left: 0; }
.zeichen-legende .muster.steuer { background: var(--grund-matt); }
.zeichen-legende .muster.ascii { background: var(--grund); }
.zeichen-legende .muster.erweiterung { background: var(--leit-hell); }

/* --- Steckbrief (Kopfangaben der Feldbeschreibungen) -------------------- */

.steckbrief {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: .35rem 1.1rem; margin: 0 0 1.75rem; padding: 1rem 1.25rem;
  background: var(--leit-hell); border: 1px solid var(--leit-rand);
  border-radius: var(--radius); font-size: .97rem;
}
.steckbrief dt { font-weight: 600; color: var(--leit-dunkel); }
.steckbrief dd { margin: 0; }
:root[data-darstellung="dunkel"] .steckbrief dt { color: var(--leit); }

/* --- Wortlisten (Normlisten mit vielen kurzen Eintraegen) ---------------- */
/* Mehrspaltig, damit aus 70 Beziehungskennzeichnungen keine endlose Kolonne
   wird. Die Spaltenzahl richtet sich nach der Breite, nicht nach einer festen
   Zahl - auf dem Handy bleibt eine Spalte uebrig. */

.wortliste ul {
  columns: 16rem 3; column-gap: 2rem; margin: .6rem 0 1.4rem; padding: 0;
  list-style: none;
}
.wortliste li {
  break-inside: avoid; padding: .18rem 0 .18rem .9rem; position: relative;
}
.wortliste li::before {
  content: "·"; position: absolute; left: .15rem; color: var(--leit); font-weight: 700;
}

/* --- Begriffslisten (Literaturhinweise) --------------------------------- */
/* Werk fett als Stichzeile, die bibliografischen Angaben leiser darunter -
   damit sehen kurze und lange Eintraege gleich aus. */

.text dl:not(.steckbrief) { margin: 1.5rem 0; }
.text dl:not(.steckbrief) dt {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rand);
  font-weight: 600; color: var(--leit-dunkel);
}
.text dl:not(.steckbrief) dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.text dl:not(.steckbrief) dd { margin: .25rem 0 0; color: var(--text-leise); }
:root[data-darstellung="dunkel"] .text dl:not(.steckbrief) dt { color: var(--leit); }

/* --- Hinweiskaesten ----------------------------------------------------- */

.callout {
  margin: 0 0 1.5rem; padding: .9rem 1.1rem;
  border: 1px solid var(--leit-rand); border-left: 4px solid var(--leit);
  border-radius: var(--radius); background: var(--leit-hell);
}
.callout > :last-child { margin-bottom: 0; }
.callout-titel {
  margin: 0 0 .3rem !important; font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--leit-dunkel);
}
:root[data-darstellung="dunkel"] .callout-titel { color: var(--leit); }
.callout-achtung { border-left-color: var(--warn); background: #fbf1f1; border-color: #ecd5d5; }
.callout-achtung .callout-titel { color: var(--warn); }
:root[data-darstellung="dunkel"] .callout-achtung { background: #2b1c1c; border-color: #4a2c2c; }

/* --- Kachelliste (Kapiteluebersichten) ---------------------------------- */

.kachelliste {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.kachelliste a {
  display: block; height: 100%; padding: .85rem 1rem;
  border: 1px solid var(--rand); border-radius: var(--radius);
  text-decoration: none; color: var(--text); background: var(--grund);
}
.kachelliste a:hover { border-color: var(--leit); background: var(--leit-hell); }
.kachelliste strong { display: block; color: var(--leit); }
.kachelliste span { display: block; font-size: .88rem; color: var(--text-leise); margin-top: .15rem; }

/* --- Schaltflaechen ----------------------------------------------------- */

/* --leit ist in der hellen Darstellung dunkles Petrol, in der dunklen ein
   helles Türkis. Die Schrift auf dem gefüllten Knopf muss deshalb mitwechseln:
   weiss auf Petrol, dunkel auf Tuerkis. */
.knopf {
  display: inline-block; margin: .3rem .5rem .3rem 0; padding: .6rem 1.25rem;
  background: var(--leit); color: #fff !important; border: 1px solid var(--leit);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.knopf:hover { background: var(--leit-dunkel); border-color: var(--leit-dunkel); }
:root[data-darstellung="dunkel"] .knopf { color: #10171a !important; }

/* Der Zweitknopf ist durchsichtig - er behaelt in beiden Darstellungen die
   Leitfarbe als Schrift und braucht einen deutlich sichtbaren Rand
   (WCAG 1.4.11 verlangt 3:1 fuer die Umrisse von Bedienelementen). */
.knopf-leise,
:root[data-darstellung="dunkel"] .knopf-leise {
  background: transparent; color: var(--leit) !important; border-color: var(--leit);
}
.knopf-leise:hover,
:root[data-darstellung="dunkel"] .knopf-leise:hover {
  background: var(--leit-hell); border-color: var(--leit);
}

kbd {
  font-family: var(--schrift-fest); font-size: .85em;
  padding: .1em .4em; border: 1px solid var(--rand); border-bottom-width: 2px;
  border-radius: 4px; background: var(--grund-matt); white-space: nowrap;
}

/* --- Seiteninhaltsverzeichnis ------------------------------------------- */

.seiten-toc {
  margin: 0 0 2rem; padding: .85rem 1.1rem;
  background: var(--grund-matt); border: 1px solid var(--rand); border-radius: var(--radius);
  font-size: .93rem;
}
.seiten-toc p {
  margin: 0 0 .4rem; font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise);
}
.seiten-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.seiten-toc li { margin-bottom: .15rem; break-inside: avoid; }
@media (max-width: 40rem) { .seiten-toc ul { columns: 1; } }

/* Hinweis am Seitenende, z.B. zur maschinellen Uebersetzung */
.uebersetzungshinweis {
  margin: 2.5rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rand);
  font-size: .87rem; color: var(--text-leise);
}
.uebersetzungshinweis a { color: var(--leit); }
/* Unter dem Hinweis derselbe Abstand wie darueber - sonst haengt die Zeile
   oben an ihrer Trennlinie und unten weit von der naechsten entfernt. */
.uebersetzungshinweis + .blaettern-leiste { margin-top: .9rem; }

/* --- Externe Verweise --------------------------------------------------- */

.extern-icon {
  width: .68em; height: .68em; margin-left: .22em; vertical-align: baseline;
  fill: currentColor; opacity: .65;
}

/* --- Fusszeile ---------------------------------------------------------- */

.fuss {
  padding-block: 2.5rem 2rem;
  background: var(--band-tief); color: var(--band-text);
  font-size: .93rem;
}
.fuss-innen { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.fuss-block h2 {
  margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--band-leise);
}
.fuss-block ul { list-style: none; margin: 0; padding: 0; }
.fuss-block li { margin-bottom: .3rem; }
.fuss a { color: var(--band-text); }
.fuss a:hover { text-decoration-thickness: 2px; }
.fuss :focus-visible { outline-color: var(--band-text); }
.fuss-schluss p { margin: 0 0 .5rem; color: var(--band-leise); }

/* --- Startseite --------------------------------------------------------- */

/* Auf der Startseite fehlt die Brotkrume, die sonst den Abstand zum Kopfband
   herstellt - deshalb dort etwas mehr Luft ueber der Ueberschrift. */
body.start .geruest { padding-top: 3.5rem; }

body.start .text > p:first-of-type {
  font-size: 1.2rem; line-height: 1.55; color: var(--text-leise);
}

/* --- Schmale Bildschirme ------------------------------------------------ */

@media (max-width: 60rem) {
  /* Einspaltig: der Kapitelbaum steht immer unter dem Inhalt, egal welche
     Stellung gewaehlt ist - die Wahl links/rechts ergibt hier keinen Sinn. */
  .geruest,
  :root[data-leiste="links"] .geruest { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .geruest > .seitenleiste,
  :root[data-leiste="links"] .geruest > .seitenleiste {
    position: static; max-height: none; order: 0;
    border-top: 1px solid var(--rand); padding: 1.25rem 0 0;
  }
  .leiste-wahl { display: none; }
  /* Nur mit JavaScript wird die Navigation hinter dem Menueknopf verstaut.
     Ohne JavaScript steht sie ausgeklappt da - erreichbar bleibt sie immer. */
  :root.mit-js .menue-schalter { display: inline-flex; }
  :root.mit-js .hauptnavigation { display: none; flex-basis: 100%; }
  :root.mit-js .hauptnavigation.offen { display: block; }
  .hauptnavigation { flex-basis: 100%; }
  .hauptnavigation ul { flex-direction: column; gap: .3rem; padding-bottom: .75rem; }
  .hauptnavigation a { padding: .6rem .8rem; }
  .suche { flex: 1 1 100%; order: 5; padding-bottom: .75rem; }
  .suchergebnisse { left: 0; right: auto; width: 100%; }
  /* Auf schmalen Bildschirmen sitzen die beiden Gruppen an den Raendern -
     der Trennstrich waere dort sinnlos. */
  .oberleiste-innen { justify-content: space-between; gap: .75rem; }
  .sprach-wahl { padding-left: 0; border-left: 0; }
}

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .blaettern-leiste { flex-direction: column; }
  .wortmarke-text span { display: none; }
}

/* --- Fingerbedienung ----------------------------------------------------- */

/* Auf Geraeten, die mit dem Finger bedient werden (Handy, Tablett), brauchen
   die Schaltflaechen mehr Flaeche. WCAG 2.5.8 verlangt 24 x 24 CSS-Pixel; die
   Flaggen und die Baumeintraege lagen knapp darunter. Am Zeigergeraet bleibt
   es beim kompakten Satz. */
@media (pointer: coarse) {
  .sprach-wahl a,
  .sprach-wahl .sprache-aktiv { padding: .45rem .4rem; }
  .einstellung select { padding: .3rem 1.4rem .3rem .5rem; }
  .seitenleiste a { padding: .45rem .45rem; }
  .zweig-schalter { width: 2rem; height: 2rem; }
  .seitenleiste.aufklappbar li:not(.hat-kinder) > a { margin-left: 2rem; }
  .hauptnavigation a { padding: .7rem .8rem; }
  .blaettern-leiste a { padding-block: .7rem; }
}

/* --- Druck -------------------------------------------------------------- */

@media print {
  .kopf, .oberleiste, .seitenleiste, .blaettern-leiste, .suche,
  .fuss, .sprungmarke, .seiten-toc { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .geruest { display: block; padding: 0; }
  .text { max-width: none; }
  .text a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .text a.extern::after { content: " (" attr(href) ")"; }
  /* In Tabellen wuerde hinter jedem Eintrag eine Adresse stehen - bei der
     Feldliste sind das 68 Stueck und die Tabelle ist nicht mehr zu lesen. */
  .text table a::after { content: ""; }
  .tabelle-umbruch { overflow: visible; }
}