/* ==========================================================================
   janicke.de — zentrales Stylesheet
   Ingenieurbüro Janicke GbR · Gesellschaft für Umweltphysik

   Aufbau dieser Datei
   00  Schriften (lokal eingebunden)
   01  Farben, Maße, Schriften (Variablen)   — hier ändern Sie Farben zentral
   02  Grundlagen
   03  Kopfbereich, Navigation, Sprachwahl
   04  Seitengerüst und Textsatz
   05  Tabellen
   06  Einträge (Probleme, Berichte)
   07  Hinweis- und Warnkästen
   08  Startseiten-Bausteine
   09  Dokumente, Dateien, Kennzeichnungen
   10  Fußbereich und Nach-oben
   11  Abschnitte, Kacheln, Listen (K8, K14–K17)
   12  Druckfassung

   Grundregel zur Pflege: Es gibt keine Inline-Stile. Jede Gestaltung hängt
   an einer Klasse. Neue Zeilen und Blöcke fügen Sie ein, indem Sie einen
   vorhandenen Block im Quelltext kopieren und den Inhalt austauschen.
   Kopiervorlagen: siehe UEBERGABE/pflege.html

   Kachelregel: Eine Kachel ist ein Navigationselement und hat immer ein
   Verweisziel. Fachfließtext steht nie in einer Kachel, sondern in einem
   Textabschnitt mit gestalteter Kopfzeile (.sektion).

   Komponenten dieser Datei
   K1  .hinweis          Hinweiskasten grün        Abschnitt 07
   K2  .warnung          Warnkasten rot            Abschnitt 07
   K3  .eintrag/.felder  Datensatz mit Feldern     Abschnitt 06
   K4  .tabelle          Datentabelle              Abschnitt 05
   K5  .bericht__*       Bericht mit Zitierhinweis Abschnitt 06
   K6  .versionen        Versionskasten            Abschnitt 08
   K7  .aktualisierungen Änderungsliste            Abschnitt 08
   K8  .kachel           Navigationskachel         Abschnitt 11
   K9  .merkmal          Vertrauens-Badge          Abschnitt 08
   K12 .nach-oben        Zurück nach oben          Abschnitt 10
   K13 .sprungnav        Sprungmarken-Navigation   Abschnitt 04
   K14 .sektion          Textabschnitt mit Kopf    Abschnitt 11
   K15 .themenliste      Liste Thema + Satz        Abschnitt 11
   K16 .projekte         Kompaktes Projektraster   Abschnitt 11
   K17 .produktkarte     Produktkarte mit Grafik   Abschnitt 11
   ========================================================================== */


/* 00 · Schriften ==========================================================

   Die Schriftdateien liegen lokal im Ordner fonts/. Es wird nichts von
   fremden Servern geladen — davon haengt die kurze Datenschutzerklaerung ab.

   Source Sans 3    Fließtext und Überschriften. Variable Schrift: eine
                    einzige Datei deckt Normal bis Fett ab.
   Source Code Pro  Dateinamen, Pfade, Versionsnummern, Parameter.

   Beide unter der SIL Open Font License. Die Lizenztexte liegen als
   fonts/OFL-Source-Sans-3.txt und fonts/OFL-Source-Code-Pro.txt bei und
   muessen bei Weitergabe erhalten bleiben.

   Geladen wird nur Latein; andere Zeichensaetze sind nicht enthalten.
   ======================================================================== */

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

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

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

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

/* 01 · Farben, Maße, Schriften ============================================ */

:root {
  /* --- Marke ------------------------------------------------------------
     --marke      Bildmarke, Linien, Tabellenköpfe, Flächen, Kennzeichnungen
     --marke-text Der einzige Wert für klickbaren Text. Dunkler, damit er
                  auf Weiß den Kontrastwert 4,5:1 nach WCAG AA erreicht.
                  --marke selbst ist für Text auf Weiß zu hell (3,29:1).   */
  --marke:            #18a082;
  --marke-text:       #11705c;
  --marke-text-aktiv: #0d5a49;
  --marke-flaeche:    #edf7f4;
  --marke-linie:      #b8dfd5;

  /* --- Signalfarben ------------------------------------------------------
     Ausschließlich für Hinweis- und Warnkästen. Tauchen diese Farben
     anderswo auf, verlieren die Kästen ihre Signalwirkung.               */
  --hinweis:          #1e9e52;
  --hinweis-flaeche:  #edf9f1;
  --warnung:          #b3261e;
  --warnung-flaeche:  #fcedeb;

  /* --- Neutralskala ---------------------------------------------------- */
  --text:        #141a18;
  --text-leise:  #55605c;
  --text-sehr-leise: #6f7a76;
  --linie:       #dbe3e0;
  --linie-zart:  #eceff0;
  --flaeche:     #f6f8f7;
  --grund:       #ffffff;

  /* --- Schrift ----------------------------------------------------------
     Mitgelieferte Schriften aus fonts/ (siehe Abschnitt 00). Dahinter steht
     jeweils ein Stapel systemeigener Schriften: Sind die Dateien einmal
     nicht erreichbar, bleibt die Seite lesbar. Es wird nichts von fremden
     Servern geladen.                                                      */
  --schrift: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-fest: "Source Code Pro", ui-monospace, SFMono-Regular, "SF Mono",
             Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Maße ------------------------------------------------------------ */
  --breite:      72rem;   /* Gesamtbreite  */
  --lesebreite:  38rem;   /* Fließtext, entspricht rund 72 Zeichen */
  --radius:      3px;

  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;
  --raum-8: 4.5rem;
}


/* 02 · Grundlagen ========================================================= */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* damit Sprungmarken nicht unter dem Kopf landen */
}

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.65;
  /* Lange, ununterbrochene Zeichenketten — im Bestand stehen Dateinamen
     wie Bericht_Dachnahe_Quellen_20180524.pdf mitten im Fließtext —
     brechen um, statt die Seite seitlich hinauszuschieben. */
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Browser-Oberflächen aus der Palette einfärben statt Werkseinstellung */
::selection { background: var(--marke); color: #fff; }

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

* { scrollbar-color: var(--marke-linie) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--marke-linie);
  border-radius: 5px;
  border: 2px solid var(--grund);
}
*::-webkit-scrollbar-thumb:hover { background: var(--marke); }

a {
  color: var(--marke-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--marke-linie);
  transition: color 0.12s ease-out, text-decoration-color 0.12s ease-out;
}
a:hover { color: var(--marke-text-aktiv); text-decoration-color: currentColor; }

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

hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: var(--raum-6) 0;
}

/* Nur für Screenreader, optisch nicht vorhanden */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprung zum Inhalt — nur sichtbar, wenn er den Tastaturfokus bekommt */
.sprung-zum-inhalt {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--marke-text);
  color: #fff;
  padding: var(--raum-3) var(--raum-4);
  text-decoration: none;
}
.sprung-zum-inhalt:focus {
  left: 0;
  color: #fff;
}


/* 03 · Kopfbereich, Navigation, Sprachwahl ================================ */

.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}

.kopf__oben {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-4) var(--raum-5);
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  flex-wrap: wrap;
}

/* --- Marke: Bildzeichen als Datei, Wortmarke als echter Text ----------- */
.marke {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.marke:hover { color: inherit; }
.marke__zeichen {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: block;
}
.marke__wort {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.marke__zusatz {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-leise);
  line-height: 1.35;
  margin-top: 0.1rem;
}
.marke:hover .marke__wort { color: var(--marke-text); }

/* --- Sprachwahl -------------------------------------------------------- */
.sprachwahl {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 0.8125rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  flex: none;
  /* kein overflow: hidden — es würde den Fokusring des ersten
     Bedienelements abschneiden, das per Tastatur erreicht wird */
}
.sprachwahl a:first-child { border-radius: 2px 0 0 2px; }
.sprachwahl a:last-child  { border-radius: 0 2px 2px 0; }
.sprachwahl a,
.sprachwahl span {
  display: block;
  padding: 0.3rem 0.6rem;
  text-decoration: none;
  color: var(--text-leise);
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--grund);
}
.sprachwahl a:hover { background: var(--marke-flaeche); color: var(--marke-text); }
.sprachwahl [aria-current="true"] {
  background: var(--marke-text);
  color: #fff;
}

/* --- Hauptnavigation ---------------------------------------------------
   Das <details>-Element trägt auf Mobilgeräten das Klappmenü. Es
   funktioniert vollständig ohne JavaScript. Ab 62rem wird es per CSS
   dauerhaft geöffnet dargestellt und die Klappleiste ausgeblendet.      */
.hauptnav { border-top: 1px solid var(--linie-zart); }
.hauptnav__schalter {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-3) var(--raum-5);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  list-style: none;
}
.hauptnav__schalter::-webkit-details-marker { display: none; }
.hauptnav__schalter:hover { color: var(--marke-text); }
.hauptnav__balken {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  fill: none;
}
.hauptnav[open] .hauptnav__balken-auf { display: none; }
.hauptnav:not([open]) .hauptnav__balken-zu { display: none; }

.hauptnav__liste {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--raum-5) var(--raum-4);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hauptnav__liste a {
  display: block;
  padding: var(--raum-2) var(--raum-3);
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.hauptnav__liste a:hover { background: var(--marke-flaeche); color: var(--marke-text); }
.hauptnav__liste [aria-current="page"] {
  color: var(--marke-text);
  font-weight: 700;
  background: var(--marke-flaeche);
}

/* Kennzeichnung für Verweise, die die Seite verlassen */
.extern__zeichen {
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.35em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  vertical-align: baseline;
}

@media (min-width: 62rem) {
  .hauptnav__schalter { display: none; }
  .hauptnav__liste {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hauptnav__liste a {
    padding: var(--raum-3) var(--raum-4);
    border-radius: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .hauptnav__liste a:hover { background: transparent; }
  .hauptnav__liste [aria-current="page"] {
    background: transparent;
    border-bottom-color: var(--marke);
  }
}

/* --- Unternavigation eines Bereichs ------------------------------------ */
.bereichsnav {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.bereichsnav__liste {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-2) var(--raum-5);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-5);
}
.bereichsnav__liste a {
  display: block;
  padding: var(--raum-2) 0;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--text-leise);
}
.bereichsnav__liste a:hover { color: var(--marke-text); }
.bereichsnav__liste [aria-current="page"] {
  color: var(--marke-text);
  font-weight: 700;
}


/* 04 · Seitengerüst und Textsatz =========================================== */

.seite {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.inhalt {
  flex: 1;
  max-width: var(--breite);
  width: 100%;
  margin: 0 auto;
  padding: var(--raum-7) var(--raum-5) var(--raum-8);
}

/* Fließtext bleibt schmal und damit lesbar; Tabellen und Datensätze
   dürfen die volle Breite nutzen. */
.inhalt > p,
.inhalt > ul:not(.themenliste):not(.kacheln):not(.projekte):not(.merkmale):not(.produktkarten):not(.dokumente):not(.aktualisierungen),
.inhalt > ol,
.inhalt > blockquote,
.inhalt > section:not(.versionen) > p,
.inhalt > section:not(.versionen) > ul,
.inhalt > section:not(.versionen) > ol,
.eintrag__koerper > p,
.eintrag__koerper > ul,
.eintrag__koerper > ol,
.felder dd,
.bericht__zusammenfassung,
.textblock {
  max-width: var(--lesebreite);
}
.textblock > * + * { margin-top: var(--raum-4); }

h1, h2, h3, h4 {
  line-height: 1.22;
  letter-spacing: -0.018em;
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);
  margin-bottom: var(--raum-5);
  padding-bottom: var(--raum-4);
  border-bottom: 2px solid var(--marke);
}
h1 .untertitel {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--text-leise);
  margin-top: var(--raum-3);
  max-width: var(--lesebreite);
}

h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-top: var(--raum-7);
  margin-bottom: var(--raum-4);
}
h3 {
  font-size: 1.0625rem;
  margin-top: var(--raum-6);
  margin-bottom: var(--raum-3);
}
h4 {
  font-size: 0.9375rem;
  margin-top: var(--raum-5);
  margin-bottom: var(--raum-2);
  color: var(--text-leise);
}
/* Erste Überschrift nach der Seitenüberschrift ohne zusätzlichen Vorlauf */
h1 + h2 { margin-top: 0; }

p { margin: 0 0 var(--raum-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--raum-4); padding-left: 1.35rem; }
li { margin-bottom: var(--raum-2); }
li:last-child { margin-bottom: 0; }
li > ul, li > ol { margin-top: var(--raum-2); }

strong, b { font-weight: 700; }

abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Sprungnavigation am Seitenanfang langer Seiten */
.sprungnav {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-4) var(--raum-5);
  margin-bottom: var(--raum-6);
  background: var(--flaeche);
}
.sprungnav__titel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--raum-3);
}
.sprungnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-5);
}
.sprungnav li { margin: 0; }

/* Suchfeld über die Einträge einer Seite (Fragen, Probleme) */
.seitensuche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-3);
  margin: var(--raum-7) 0 var(--raum-5);
  padding-top: var(--raum-5);
  border-top: 1px solid var(--linie-zart);
}
.seitensuche label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-leise);
}
.seitensuche input {
  flex: 1 1 16rem;
  font: inherit;
  font-size: 0.9375rem;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
}
.seitensuche input::placeholder { color: var(--text-sehr-leise); }
.seitensuche input:focus-visible { border-color: var(--marke); }
.seitensuche__hinweis {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--text-leise);
  margin: 0;
}
.seitensuche__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  flex: none;
}
.seitensuche__filter label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-leise);
}
.seitensuche select {
  font: inherit;
  font-size: 0.875rem;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
}
.seitensuche select:focus-visible { border-color: var(--marke); }


/* 05 · Tabellen =========================================================== */

/* .tabelle ist die einzige Tabellenklasse der Website.
   Zusatz .tabelle--stapelt lässt die Zeilen auf schmalen Bildschirmen
   untereinander laufen, statt seitlich zu verlaufen.                     */
.tabelle,
.versionen,
.aktualisierungen {
  font-variant-numeric: tabular-nums;
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--raum-5);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.tabelle caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-leise);
  padding-bottom: var(--raum-3);
}
.tabelle > thead > tr > th, .tabelle th {
  text-align: left;
  vertical-align: bottom;
  background: var(--marke);
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--marke);
}
.tabelle td {
  vertical-align: top;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie);
}
.tabelle > tbody > tr:nth-child(even) > td { background: var(--flaeche); }
.tabelle > tbody > tr:hover > td { background: var(--marke-flaeche); }

/* Zwischenüberschrift innerhalb einer Tabelle, z. B. Jahreszahl */
.tabelle .zwischenzeile td {
  background: var(--marke-flaeche);
  font-weight: 700;
  color: var(--marke-text-aktiv);
  border-top: 2px solid var(--marke-linie);
}
.tabelle > tbody > tr.zwischenzeile:hover > td { background: var(--marke-flaeche); }

.tabelle .zahl { text-align: right; white-space: nowrap; }
.tabelle .schmal { width: 1%; white-space: nowrap; }
/* Dateinamen dürfen überall umbrechen, die Größenangabe dahinter nicht */
.groesse { white-space: nowrap; }
.tabelle td[data-spalte="Datei"],
.tabelle td[data-spalte="File"],
.tabelle td[data-spalte="Datei (Größe)"],
.tabelle td[data-spalte="File (size)"] { width: 32%; }

/* Verschachtelte Wertetabelle, z. B. Preisstaffel je Produkt */
.wertetabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.wertetabelle td { padding: var(--raum-2) 0; border: 0; border-bottom: 1px solid var(--linie-zart); }
.wertetabelle tr:last-child td { border-bottom: 0; }
.wertetabelle td + td { text-align: right; white-space: nowrap; padding-left: var(--raum-4); }
.tabelle td.hat-wertetabelle { padding: var(--raum-2) var(--raum-4); }

@media (max-width: 47.99rem) {
  /* Nur die äußere Tabelle stapelt. Die Regeln sind auf direkte Nachfahren
     eingegrenzt, damit eine verschachtelte Wertetabelle nicht mitgestaltet
     wird — sie hat weiter unten ihr eigenes Verhalten. */
  .tabelle--stapelt,
  .tabelle--stapelt > tbody,
  .tabelle--stapelt > tbody > tr,
  .tabelle--stapelt > tbody > tr > td { display: block; width: 100%; }
  .tabelle--stapelt > thead { display: none; }
  .tabelle--stapelt > tbody > tr {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin-bottom: var(--raum-4);
    overflow: hidden;
  }
  .tabelle--stapelt > tbody > tr > td { border: 0; border-top: 1px solid var(--linie-zart); }
  .tabelle--stapelt > tbody > tr > td:first-child {
    border-top: 0;
    background: var(--marke-flaeche);
    font-weight: 700;
  }
  .tabelle--stapelt > tbody > tr:nth-child(even) > td { background: transparent; }
  .tabelle--stapelt > tbody > tr:nth-child(even) > td:first-child { background: var(--marke-flaeche); }
  .tabelle--stapelt > tbody > tr:hover > td { background: transparent; }
  .tabelle--stapelt > tbody > tr:hover > td:first-child { background: var(--marke-flaeche); }
  /* Zeile, die eine Wertetabelle enthält, braucht keine eigene Hinterlegung */
  .tabelle--stapelt > tbody > tr > td:first-child:has(.wertetabelle) {
    background: transparent;
    font-weight: 400;
  }
  /* Spaltenname vor dem Wert, sofern im Quelltext data-spalte gesetzt ist */
  .tabelle--stapelt > tbody > tr > td[data-spalte]::before {
    content: attr(data-spalte);
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-leise);
    margin-bottom: 0.15rem;
  }
  .tabelle--stapelt > tbody > tr > td:first-child[data-spalte]::before { color: var(--marke-text-aktiv); }
  .tabelle--stapelt > tbody > tr > .zahl { text-align: left; }
  /* Spaltenbreiten gelten nur im Tabellenraster, nicht im gestapelten Zustand */
  .tabelle--stapelt > tbody > tr > .schmal { width: 100%; white-space: normal; }

  /* Eine Wertetabelle in einer gestapelten Zelle behielte sonst ihr
     zweispaltiges Raster und schöbe die Seite über den Bildschirmrand
     hinaus. Deshalb wird auch sie hier zu Zeilen aus Text und Wert. */
  .wertetabelle,
  .wertetabelle tbody { display: block; width: 100%; }
  .wertetabelle colgroup { display: none; }
  .wertetabelle tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--raum-2) var(--raum-4);
    align-items: baseline;
    padding: var(--raum-2) 0;
    border-bottom: 1px solid var(--linie-zart);
  }
  .wertetabelle tr:last-child { border-bottom: 0; }
  .wertetabelle td { display: block; border: 0; padding: 0; min-width: 0; }
  .wertetabelle td + td {
    padding-left: 0;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
  }
  .tabelle td.hat-wertetabelle { padding: var(--raum-3) var(--raum-4); }
}

/* Sicherung: kein Element darf die Seite seitlich hinausschieben */
.inhalt table,
.inhalt pre,
.inhalt figure { max-width: 100%; }


/* 06 · Einträge (Probleme, Berichte) ======================================= */

/* Ein Eintrag ist ein Datensatz mit benannten Feldern. Er bricht auf
   schmalen Bildschirmen von selbst um und ist von Hand leicht zu kopieren. */
.eintrag {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: var(--raum-5);
  scroll-margin-top: 5rem;
}
.eintrag__kopf { border-radius: 2px 2px 0 0; }
.eintrag__kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: var(--raum-3) var(--raum-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-2) var(--raum-4);
}
.eintrag__titel {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  flex: 1 1 20rem;
  line-height: 1.35;
}
.eintrag__kennung {
  font-family: var(--schrift-fest);
  font-size: 1rem;
  color: var(--marke-text);
  font-weight: 700;
  flex: none;
}
.eintrag__koerper { padding: var(--raum-4); }
.eintrag__koerper > * + * { margin-top: var(--raum-3); }

.felder { margin: 0; display: grid; gap: var(--raum-3); min-width: 0; }
/* min-width: 0 ist nötig, weil ein Rasterelement sonst nicht unter seine
   min-content-Breite schrumpft — lange Parameter- und Dateinamen im
   Fachtext würden die Seite sonst auf schmalen Bildschirmen sprengen. */
.felder > div {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: var(--raum-4);
  align-items: baseline;
  min-width: 0;
}
.felder > div > dt,
.felder > div > dd { min-width: 0; }
.felder dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-leise);
  padding-top: 0.15rem;
}
.felder dd { margin: 0; }
.felder dd > * + * { margin-top: var(--raum-3); }

@media (max-width: 47.99rem) {
  .felder > div { grid-template-columns: 1fr; gap: var(--raum-1); }
}

/* Zustandskennzeichnung eines Eintrags */
.zustand {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  flex: none;
}
/* Kein Signalrot: Rot ist allein den Warnkästen vorbehalten. Der Zustand
   wird über die Neutralskala und die Markenfarbe unterschieden. */
.zustand--offen   { color: var(--text-leise); border-color: var(--linie); }
.zustand--behoben { color: var(--marke-text); border-color: var(--marke-linie); }

/* Bericht mit Zusammenfassung, z. B. Berichte zur Umweltphysik */
.bericht__zusammenfassung {
  font-size: 0.9375rem;
  color: var(--text);
}
.bericht__zitat {
  margin: 0;
  padding: var(--raum-3) var(--raum-4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--schrift-fest);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-leise);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bericht__zitat-titel {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  font-family: var(--schrift);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--raum-2);
}

.kopierknopf {
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marke-text);
  background: var(--grund);
  border: 1px solid var(--marke-linie);
  border-radius: var(--radius);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: background 0.12s ease-out, border-color 0.12s ease-out;
}
.kopierknopf:hover { background: var(--marke-flaeche); border-color: var(--marke); }
.kopierknopf--fertig {
  background: var(--marke-text);
  border-color: var(--marke-text);
  color: #fff;
}


/* 07 · Hinweis- und Warnkästen ============================================ */

/* Bestandselement: Grün steht für Hinweis, Rot für Warnung.
   Diese beiden Farben werden nirgends sonst auf der Website verwendet. */
.hinweis,
.warnung {
  display: flex;
  gap: var(--raum-3);
  padding: var(--raum-4);
  border: 1px solid;
  border-radius: var(--radius);
  margin: 0 0 var(--raum-5);
  font-size: 0.9375rem;
}
.hinweis  { border-color: var(--hinweis); background: var(--hinweis-flaeche); }
.warnung  { border-color: var(--warnung); background: var(--warnung-flaeche); font-weight: 600; }

.hinweis__zeichen,
.warnung__zeichen {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.15rem;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.hinweis__zeichen { stroke: var(--hinweis); }
.warnung__zeichen { stroke: var(--warnung); }

.hinweis__text,
.warnung__text { min-width: 0; }
.hinweis__text > * + *,
.warnung__text > * + * { margin-top: var(--raum-3); }
.hinweis p:last-child, .warnung p:last-child { margin-bottom: 0; }


/* 08 · Startseiten-Bausteine =============================================== */

/* Kasten mit den aktuellen Programmversionen */
.versionen {
  border: 1px solid var(--marke-linie);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--raum-7) 0 var(--raum-6);
}
.versionen__titel {
  background: var(--marke);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--raum-3) var(--raum-4);
  margin: 0;
}
.versionen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.versionen__liste li {
  margin: 0;
  padding: var(--raum-4);
  border-top: 1px solid var(--marke-linie);
  border-right: 1px solid var(--marke-linie);
}
.versionen__liste li:last-child { border-right: 0; }
.versionen__programm {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.1rem;
}
.versionen__nummer {
  display: block;
  font-family: var(--schrift-fest);
  font-size: 1.125rem;
  color: var(--marke-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.versionen__datum {
  display: block;
  font-family: var(--schrift-fest);
  font-size: 0.75rem;
  color: var(--text-leise);
  margin-top: 0.15rem;
}

/* Liste „Zuletzt aktualisiert“ */
.aktualisierungen { list-style: none; margin: 0 0 var(--raum-5); padding: 0; }
.aktualisierungen li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--raum-4);
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--linie-zart);
  margin: 0;
}
.aktualisierungen li:first-child { border-top: 1px solid var(--linie-zart); }
.aktualisierungen time {
  font-family: var(--schrift-fest);
  font-size: 0.8125rem;
  color: var(--text-leise);
  padding-top: 0.1rem;
}
@media (max-width: 35rem) {
  .aktualisierungen li { grid-template-columns: 1fr; gap: var(--raum-1); }
}

/* Wegweiser: Erläuterung sämtlicher Menüpunkte */
.wegweiser { margin: 0 0 var(--raum-5); }
.wegweiser > div {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--raum-4);
  padding: var(--raum-4) 0;
  border-bottom: 1px solid var(--linie-zart);
}
.wegweiser > div:first-child { border-top: 1px solid var(--linie-zart); }
.wegweiser dt { font-weight: 700; }
.wegweiser dt a { text-decoration-color: var(--marke-linie); }
.wegweiser dd { margin: 0; color: var(--text-leise); font-size: 0.9375rem; }
@media (max-width: 47.99rem) {
  .wegweiser > div { grid-template-columns: 1fr; gap: var(--raum-1); }
}

/* Kennzeichnung wie „VDI 3945-3“ oder „ICAO Doc 9889“ */
.merkmale {
  list-style: none;
  margin: 0 0 var(--raum-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
}
.merkmale li { margin: 0; }
.merkmal {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--marke-text);
  background: var(--marke-flaeche);
  border: 1px solid var(--marke-linie);
  border-radius: var(--radius);
  padding: 0.2rem 0.55rem;
}


/* 09 · Dokumente, Dateien, Kennzeichnungen ================================= */

/* Dateinamen, Pfade, Versionsnummern und Parameter im Text.
   Gilt auch für die Dateispalten der Download- und Gruppentabellen und
   für Datumsangaben — dieselbe Datenart trägt überall dieselbe Schrift. */
.tabelle td[data-spalte="Datei"] a,
.tabelle td[data-spalte="File"] a,
.tabelle td[data-spalte="Datei (Größe)"] a,
.tabelle td[data-spalte="File (size)"] a,
.tabelle td[data-spalte="Stand"],
.tabelle td[data-spalte="Date"],
.tabelle td[data-spalte="Datum"],
.tabelle time,
.aktualisierungen time,
.datei, .pfad, .version, code, kbd, samp {
  font-family: var(--schrift-fest);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
code {
  background: var(--flaeche);
  border: 1px solid var(--linie-zart);
  border-radius: 2px;
  padding: 0.08em 0.32em;
}
pre {
  font-family: var(--schrift-fest);
  font-size: 0.8125rem;
  line-height: 1.6;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-4);
  overflow-x: auto;
  margin: 0 0 var(--raum-5);
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Liste von Dokumenten zum Herunterladen */
.dokumente { list-style: none; margin: 0 0 var(--raum-5); padding: 0; min-width: 0; }
.dokumente li { margin: 0 0 -1px; min-width: 0; }
.dokumente a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
  gap: var(--raum-2) var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie);
  text-decoration: none;
  color: var(--text);
  background: var(--grund);
}
.dokumente a:hover {
  background: var(--marke-flaeche);
  border-color: var(--marke-linie);
  position: relative;
  z-index: 1;
  color: var(--marke-text);
}
.dokumente li:first-child a { border-radius: var(--radius) var(--radius) 0 0; }
.dokumente li:last-child a  { border-radius: 0 0 var(--radius) var(--radius); }
.dokumente li:only-child a  { border-radius: var(--radius); }
.dokumente__zeichen {
  width: 1.125rem;
  height: 1.375rem;
  flex: none;
  stroke: var(--marke);
  stroke-width: 1.5;
  stroke-linejoin: round;
  fill: none;
}
.dokumente__name {
  flex: 1 1 10rem;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.dokumente__zusatz {
  font-family: var(--schrift-fest);
  font-size: 0.75rem;
  color: var(--text-leise);
  flex: none;
}
.dokumente a:hover .dokumente__zusatz { color: var(--marke-text); }

/* Abbildung mit Bildunterschrift */
figure {
  margin: 0 0 var(--raum-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grund);
  max-width: 34rem;
}
figure img { display: block; width: 100%; }
figcaption {
  font-size: 0.8125rem;
  color: var(--text-leise);
  padding: var(--raum-3) var(--raum-4);
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
}
.abbildung--breit { max-width: 100%; }

/* Zweispaltiger Bereich für Text neben Abbildung */
.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--raum-6);
  align-items: start;
  margin-bottom: var(--raum-5);
}
.spalten > * { min-width: 0; }
.spalten p { max-width: var(--lesebreite); }
@media (max-width: 55rem) {
  .spalten { grid-template-columns: 1fr; gap: var(--raum-5); }
}


/* 10 · Fußbereich und Nach-oben ============================================ */

.nach-oben {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: 0.8125rem;
  color: var(--text-leise);
  text-decoration: none;
  padding: var(--raum-2) 0;
  margin-top: var(--raum-4);
}
.nach-oben:hover { color: var(--marke-text); }
.nach-oben svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  margin-top: auto;
}
.fuss__inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-6) var(--raum-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-4) var(--raum-6);
  align-items: baseline;
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.fuss__verweise {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-5);
}
.fuss__verweise li { margin: 0; }
.fuss__stand { margin-left: auto; font-family: var(--schrift-fest); }
.fuss p { margin: 0; }
@media (max-width: 47.99rem) {
  .fuss__stand { margin-left: 0; }
}


/* 11 · Abschnitte, Kacheln, Listen ========================================= */

/* --- K14 · Textabschnitt mit gestalteter Kopfzeile ----------------------
   Für Fachfließtext, dessen Absatzgrenzen unangetastet bleiben müssen.
   Die Kopfzeile trägt Piktogramm, Überschrift und eine Haarlinie; darunter
   steht der Text unverändert. Musterblock siehe UEBERGABE/pflege.html.   */
.sektion {
  margin: 0 0 var(--raum-8);
  max-width: var(--lesebreite);
  scroll-margin-top: 5rem;
}
.sektion:last-child { margin-bottom: 0; }

.sektion__kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  margin-bottom: var(--raum-4);
  padding-bottom: var(--raum-3);
  border-bottom: 1px solid var(--marke);
}
.sektion__zeichen {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  stroke: var(--marke);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.sektion__titel {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.3;
}
.sektion__koerper > * + * { margin-top: var(--raum-4); }
.sektion__koerper p,
.sektion__koerper ul,
.sektion__koerper ol { max-width: var(--lesebreite); }

/* --- K8 · Navigationskachel ---------------------------------------------
   Immer mit Verweisziel. Die ganze Fläche ist anklickbar, ohne dass
   Verweise ineinander geschachtelt werden: Ein Verweis sitzt im Titel,
   sein ::after legt sich über die Kachel.                                */
.kacheln {
  list-style: none;
  margin: 0 0 var(--raum-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--raum-4);
}
.kacheln li { margin: 0; }

.kachel {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  transition: border-color 0.12s ease-out, background 0.12s ease-out;
}
.kachel:hover { border-color: var(--marke-linie); background: var(--marke-flaeche); }
.kachel:has(a:focus-visible) { outline: 2px solid var(--marke-text); outline-offset: 2px; }

.kachel__zeichen {
  width: 1.75rem;
  height: 1.75rem;
  stroke: var(--marke);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.kachel__titel {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.kachel__titel a {
  color: inherit;
  text-decoration: none;
}
.kachel__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.kachel:hover .kachel__titel a { color: var(--marke-text); }
.kachel__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-leise);
}
.kachel__text > * + * { margin-top: var(--raum-3); }
/* Verweise und Aufklappbereiche im Kacheltext liegen über der Klickfläche
   der Kachel, sonst wären sie nicht mehr erreichbar. */
.kachel__text a,
.kachel details,
.produktkarte__text a { position: relative; z-index: 1; }
.kachel details > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--marke-text);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
}
.kachel details > summary::-webkit-details-marker { display: none; }
.kachel details > summary::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.12s ease-out;
}
.kachel details[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.kachel details > p { margin-top: var(--raum-3); }
/* Kennung eines Programms oder Modells. Trägt sie einen Verweis, wird
   die ganze Kachel anklickbar — ohne Verweise ineinander zu schachteln. */
.kachel__kennung {
  font-family: var(--schrift-fest);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.kachel__kennung a { color: inherit; text-decoration: none; }
.kachel__kennung a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.kachel:hover .kachel__kennung a { color: var(--marke-text); }
.kachel__fuss {
  margin-top: auto;
  padding-top: var(--raum-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--marke-text);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}
.kachel__fuss svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
/* Kachel ohne Verweisziel — nur für reine Kennungen wie Modellnamen */
.kachel--ohne-ziel { color: var(--text-leise); }
.kachel--ohne-ziel:hover { border-color: var(--linie); background: var(--grund); }

/* Dichtes Raster für kurze Kennungen */
.kacheln--dicht { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.kacheln--dicht .kachel { padding: var(--raum-4); gap: var(--raum-2); }

/* --- K15 · Themenliste ---------------------------------------------------
   Ein Thema, ein Satz. Für Aufzählungen, deren Einträge je aus einem
   einzigen Satz bestehen und die kein Aufklappen rechtfertigen.          */
.themenliste { list-style: none; margin: 0 0 var(--raum-6); padding: 0; }
.themenliste > li {
  display: grid;
  min-width: 0;
  grid-template-columns: 15rem 1fr;
  gap: var(--raum-2) var(--raum-5);
  padding: var(--raum-4) 0;
  border-bottom: 1px solid var(--linie-zart);
  margin: 0;
  scroll-margin-top: 5rem;
}
.themenliste > li:first-child { border-top: 1px solid var(--linie-zart); }
.themenliste__thema {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--marke-text-aktiv);
}
.themenliste__thema, .themenliste__satz { min-width: 0; }
.themenliste__satz { margin: 0; }
@media (max-width: 47.99rem) {
  .themenliste > li { grid-template-columns: 1fr; gap: var(--raum-1); }
}

/* --- K15a · Veröffentlichungsliste ---------------------------------------------------
   Ein Thema, ein Satz. Für Aufzählungen, deren Einträge je aus einem
   einzigen Satz bestehen und die kein Aufklappen rechtfertigen.          */
.publikation { list-style: none; margin: 0 0 var(--raum-6); padding: 0; }
.publikation > li {
  display: grid;
  min-width: 0;
  grid-template-columns: 7rem 1fr;
  gap: var(--raum-2) var(--raum-5);
  padding: var(--raum-4) 0;
  border-bottom: 1px solid var(--linie-zart);
  margin: 0;
  scroll-margin-top: 5rem;
}
.publikation > li:first-child { border-top: 1px solid var(--linie-zart); }
.publikation__thema {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--marke-text-aktiv);
}
.publikation__thema, .publikation__satz { min-width: 0; }
.publikation__satz { margin: 0; }
@media (max-width: 47.99rem) {
  .publikation > li { grid-template-columns: 1fr; gap: var(--raum-1); }
}

/* --- K16 · Projektraster -------------------------------------------------
   Kompakt, gleichrangig, Kürzel als Sprungziel.                          */
.projekte {
  list-style: none;
  margin: 0 0 var(--raum-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--raum-4);
}
.projekt {
  height: 100%;
  padding: var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  scroll-margin-top: 5rem;
  margin: 0;
}
.projekt__kuerzel {
  display: block;
  font-family: var(--schrift-fest);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--marke-text);
  letter-spacing: 0.01em;
  margin-bottom: var(--raum-1);
}
.projekt__titel {
  display: block;
  font-size: 0.9375rem;
  margin-bottom: var(--raum-2);
}
.projekt__rahmen {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.projekt__nummer { font-family: var(--schrift-fest); }

/* --- K17 · Produktkarte --------------------------------------------------
   Grafik klein und gerahmt über dem Kurztext, nie randlos und nie als
   Hintergrund. Die Grafiken sind technische Darstellungen, kein Bildmotiv. */
.produktkarten {
  list-style: none;
  margin: 0 0 var(--raum-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--raum-5);
}
.produktkarte {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin: 0;
  transition: border-color 0.12s ease-out;
}
.produktkarte:hover { border-color: var(--marke-linie); }
.produktkarte:has(a:focus-visible) { outline: 2px solid var(--marke-text); outline-offset: 2px; }
.produktkarte__bild {
  align-self: flex-start;
  max-height: 3rem;
  height: auto;
  width: auto;
  max-width: 100%;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius);
  background: var(--flaeche);
  object-fit: contain;
}
.produktkarte__titel {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.014em;
}
.produktkarte__titel a { color: inherit; text-decoration: none; }
.produktkarte__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.produktkarte:hover .produktkarte__titel a { color: var(--marke-text); }
.produktkarte__text { margin: 0; font-size: 0.9375rem; }
.produktkarte .merkmale { margin-bottom: 0; }
.produktkarte__fuss {
  margin-top: auto;
  padding-top: var(--raum-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--marke-text);
}

/* Ein Hinweis, der auf eine andere Seite führt (z. B. Preisliste) */
.verweiskachel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-5);
  border: 1px solid var(--marke-linie);
  border-radius: var(--radius);
  background: var(--marke-flaeche);
  margin: 0 0 var(--raum-6);
  transition: border-color 0.12s ease-out;
}
.verweiskachel:hover { border-color: var(--marke); }
.verweiskachel:has(a:focus-visible) { outline: 2px solid var(--marke-text); outline-offset: 2px; }
.verweiskachel__zeichen {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  stroke: var(--marke-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.verweiskachel__titel {
  margin: 0 0 0.15rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.verweiskachel__titel a { color: var(--marke-text-aktiv); text-decoration: none; }
.verweiskachel__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.verweiskachel__text { margin: 0; font-size: 0.9375rem; color: var(--text-leise); }


/* 12 · Druckfassung ======================================================== */

@media print {
  .kopf, .bereichsnav, .fuss, .nach-oben, .sprungnav,
  .seitensuche, .sprung-zum-inhalt { display: none !important; }
  body { font-size: 10.5pt; color: #000; }
  .inhalt { max-width: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #444;
    word-break: break-all;
  }
  .tabelle > thead > tr > th, .tabelle th { background: #ddd !important; color: #000; border-color: #999; }
  .tabelle td { border-color: #999; }
  .tabelle tbody tr:nth-child(even) td { background: #f4f4f4 !important; }
  .eintrag, .hinweis, .warnung, figure,
  .kachel, .projekt, .produktkarte, .sektion { break-inside: avoid; border-color: #999; }
  h1, h2, h3 { break-after: avoid; }
  .sektion__kopf { border-bottom-color: #666; }
  .verweiskachel { display: none; }
  /* Im Druck ist jeder Aufklappbereich offen */
  details > summary { list-style: none; }
  details:not([open]) > *:not(summary) { display: revert !important; }
  details::details-content { content-visibility: visible !important; block-size: auto !important; }
}