/*
 * Stylesheet der Weboberfläche.
 *
 * ZWECK
 * Die Oberfläche des DMS trägt dieselbe Designsprache wie der interne Bereich
 * von MailBloom (`website_2`). Wer beide Systeme bedient, soll sie als ein Haus
 * erkennen: dieselbe Schrift, dieselbe Farbrolle, dieselbe Anordnung aus
 * Seitenleiste links und Kopfleiste oben.
 *
 * ZIELGRUPPE
 * Der Betreiber im Alltag und ein sachverständiger Dritter (Betriebsprüfer,
 * Steuerberater), der mit dem Gerät und den Einstellungen arbeitet, die er
 * mitbringt. Barrierearmut ist deshalb keine Zutat, sondern Voraussetzung:
 * kräftige Kontraste, sichtbare Fokusrahmen, relative Schriftgrößen, echte
 * Tabellenkopfzellen.
 *
 * STAND: 01.08.2026
 *
 * ALLES LIEGT ÖRTLICH VOR
 * Kein CDN, keine Schriftart von einem fremden Server, kein Skript von außen.
 * Die Schriften Fira Sans und Fira Code liegen als Dateien neben dieser Datei
 * im Anwendungsabbild. Das hat drei Gründe, und jeder trägt für sich:
 *   1. Das DMS ist nur im internen Netz erreichbar (A-58). Eine externe Quelle
 *      wäre je nach Standort des Betrachters schlicht nicht ladbar.
 *   2. Ein Aufruf an Google Fonts überträgt die IP-Adresse des Betrachters an
 *      einen Dritten. Bei einem Betriebsprüfer, der ein Steuerarchiv einsieht,
 *      ist das weder nötig noch wünschenswert.
 *   3. Die Content-Security-Policy bleibt ohne Ausnahme streng.
 * Die Lizenzen der Schriften stehen in `schriften-lizenz.txt`.
 *
 * KEINE SKRIPTE
 * Diese Oberfläche kommt ohne JavaScript aus, auch bei der Navigation auf
 * kleinen Bildschirmen. ADR-0008 erlaubt zwar eine eigene Skriptdatei, braucht
 * sie hier aber nicht: Die Seitenleiste wird unterhalb von 1024 Pixeln zu einer
 * waagerecht scrollbaren Navigationsleiste. Das ist ohne Zustand, ohne Falle
 * für die Tastaturbedienung und ohne eine Zeile Code zu warten.
 */

/* ==========================================================================
   1. Schriften (örtlich, siehe Kopf dieser Datei)
   ========================================================================== */

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fira-sans-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+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: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fira-sans-400-latinext.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: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fira-sans-500-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: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fira-sans-500-latinext.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: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fira-sans-600-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: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fira-sans-600-latinext.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: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fira-sans-700-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: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fira-sans-700-latinext.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: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fira-code-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+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: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fira-code-400-latinext.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;
}

/* ==========================================================================
   2. Gestaltungswerte (Design Tokens)

   Übernommen aus `website_2/assets/scss/_colors.scss` des MailBloom-Projekts.
   Dort sind es SCSS-Variablen, die beim Bauen ausgerechnet werden. Hier stehen
   die fertigen Werte als CSS-Variablen, denn diese Anwendung hat bewusst keinen
   Bauschritt für Stylesheets.

   Grün ist ausdrücklich nur Akzent: Marke, aktiver Zustand, Fokus, Verweise.
   Flächen und Text sind neutral grau. Das ist die Regel aus dem MailBloom-
   Internbereich, und sie ist hier besonders passend: In einer Oberfläche, in
   der Farbe eine Aussage trifft (Sperre, Fehler, Befund), darf sie nicht schon
   zur Dekoration verbraucht sein.
   ========================================================================== */

:root {
  /* Marke */
  --marke-dunkel: #0b4b3a;
  --marke-hell: #98c055;

  /* Neutrale Graustufen */
  --neutral-0: #ffffff;
  --neutral-50: #f7f9fa;
  --neutral-100: #eef1f4;
  --neutral-200: #e3e8ec;
  --neutral-300: #d2d9df;
  --neutral-400: #aab4bd;
  --neutral-600: #586573;
  --neutral-700: #3f4a55;
  --neutral-900: #1a2026;

  /* Flächen und Linien */
  --flaeche: var(--neutral-0);
  --flaeche-gedaempft: var(--neutral-100);
  --flaeche-vertieft: var(--neutral-50);
  --app-grund: var(--neutral-50);
  --rand: var(--neutral-200);
  --rand-kraeftig: var(--neutral-300);

  /* Text
     ABWEICHUNG von MailBloom, bewusst und begründet: Dort ist der gedämpfte
     Text `$neutral-500` (#76828d). Auf Weiß ergibt das ein Kontrastverhältnis
     von rund 3,9 zu 1 und verfehlt damit die 4,5 zu 1 aus WCAG AA für
     Fließtext. Hier steht deshalb `--neutral-600` (#586573, rund 5,9 zu 1).
     Ein Betriebsprüfer liest diese Hinweise, sie sind kein Beiwerk. */
  --text: var(--neutral-900);
  --text-gedaempft: var(--neutral-600);
  --text-auf-akzent: #ffffff;

  /* Akzent */
  --akzent: var(--marke-dunkel);
  --akzent-stark: #093c2e;
  --akzent-hell: var(--marke-hell);
  --akzent-hell-dunkler: #7a9a44;
  --akzent-zart: #ecf4e0;
  --akzent-zart-neutral: #ebf1ef;

  /* Statusfarben: Fläche, Rand und eine dunklere Textvariante mit AA-Kontrast */
  --gut: #1f9d5b;
  --gut-flaeche: #e4f3eb;
  --gut-rand: #bce2ce;
  --gut-text: #177644;

  --warnung: #c77700;
  --warnung-flaeche: #f8efe0;
  --warnung-rand: #eed6b3;
  --warnung-text: #9f5f00;

  --fehler: #e5484d;
  --fehler-flaeche: #fce9ea;
  --fehler-rand: #f7c8ca;
  --fehler-text: #a53437;

  --info: #2563eb;
  --info-flaeche: #e9effd;
  --info-rand: #c2d3f9;
  --info-text: #1e51c1;

  /* Abstände: 4er- und 8er-Rhythmus */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3rem;
  --abstand-8: 4rem;

  /* Rundungen */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pille: 999px;

  /* Schatten: flach und dezent, nie als Verzierung */
  --schatten-xs: 0 1px 2px rgba(26, 32, 38, 0.05);
  --schatten-sm: 0 1px 3px rgba(26, 32, 38, 0.07), 0 1px 2px rgba(26, 32, 38, 0.04);
  --schatten-md: 0 6px 16px rgba(26, 32, 38, 0.08);
  --schatten-lg: 0 16px 40px rgba(26, 32, 38, 0.12);

  /* Schrift */
  --schrift-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --schrift-mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* Bewegung: eine Kurve, zwei Dauern, mehr nicht.
     Alles bleibt unter 200 ms. Diese Oberfläche wird den ganzen Arbeitstag
     bedient, da ist jede Verzögerung ein Ärgernis und kein Erlebnis. */
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --uebergang-schnell: 0.12s var(--kurve);
  --uebergang: 0.18s var(--kurve);

  /* Aufbau der Hülle */
  --seitenleiste-breite: 256px;
  --kopfleiste-hoehe: 64px;
  --inhalt-breite: 82rem;

  /* Symbole (Lucide, Strichstärke 2), als Maske eingefärbt über currentColor */
  --symbol-uebersicht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  --symbol-dokumente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
  --symbol-hochladen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
  --symbol-loeschung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  --symbol-pruefer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --symbol-audit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12h-5'/%3E%3Cpath d='M15 8h-5'/%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E");
  --symbol-clearing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  --symbol-abmelden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  --symbol-sperre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --symbol-frist: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  --symbol-platz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' x2='2' y1='12' y2='12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3Cline x1='6' x2='6.01' y1='16' y2='16'/%3E%3Cline x1='10' x2='10.01' y1='16' y2='16'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. Grundlagen
   ========================================================================== */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--app-grund);
  color: var(--text);
  font-family: var(--schrift-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--abstand-3);
  color: var(--text);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }

p {
  margin: 0 0 var(--abstand-4);
}

a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--uebergang-schnell);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--akzent-hell-dunkler);
  }
}

strong,
b {
  font-weight: 600;
}

code,
kbd,
samp {
  font-family: var(--schrift-mono);
  font-size: 0.9em;
}

/* Zahlen laufen tabellarisch, sonst springt die Spaltenbreite beim Blättern. */
.zahlenspalte,
.kachel__zahl,
.tabellenzahl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Fokus: sichtbar, kontraststark und überall gleich.
   Der Ring ist absichtlich NICHT das helle Markengrün allein: #98c055 erreicht
   auf Weiß nur rund 2,1 zu 1 und verfehlt die 3 zu 1 aus WCAG 2.2 für
   Bedienelemente. Deshalb der dunkle Markenton als Linie, das Hellgrün nur als
   Hof darum. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(152, 192, 85, 0.45);
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.sprungmarke:focus {
  position: fixed;
  top: var(--abstand-3);
  left: var(--abstand-3);
  display: inline-block;
  padding: var(--abstand-2) var(--abstand-4);
  background: var(--akzent);
  color: var(--text-auf-akzent);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--schatten-lg);
}

.versteckt,
caption.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bildlaufleisten dezent, on-brand */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--neutral-300);
  border-radius: var(--radius-pille);
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
   4. Hülle: Seitenleiste, Kopfleiste, Inhalt
   ========================================================================== */

.huelle {
  display: flex;
  min-height: 100dvh;
}

/* --- Seitenleiste ------------------------------------------------------- */

.seitenleiste {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: var(--seitenleiste-breite);
  height: 100dvh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border-right: 1px solid var(--rand);
}

.seitenleiste__marke {
  height: var(--kopfleiste-hoehe);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--abstand-5);
  border-bottom: 1px solid var(--rand);
}

.seitenleiste__marke a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Die Logodatei bringt ringsum Freiraum mit. 44 Pixel Höhe ergeben damit eine
   sichtbare Marke von rund 30 Pixeln, also genau die Größe aus dem
   MailBloom-Internbereich. */
.seitenleiste__logo {
  height: 44px;
  width: auto;
  margin-left: -6px;
}

.seitenleiste__abschnitt {
  padding: var(--abstand-4) var(--abstand-3) var(--abstand-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

.navi {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--abstand-2) var(--abstand-3) var(--abstand-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navi__punkt {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: 44px;
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-md);
  color: var(--text-gedaempft);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--uebergang-schnell), color var(--uebergang-schnell);
}

@media (hover: hover) and (pointer: fine) {
  .navi__punkt:hover {
    background: var(--flaeche-gedaempft);
    color: var(--text);
  }
}

.navi__punkt--aktiv {
  background: var(--akzent-zart);
  color: var(--akzent-stark);
  font-weight: 600;
}

.navi__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Symbole ------------------------------------------------------------ */

.symbol {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* Ohne Maskenunterstützung bliebe hier ein farbiger Block stehen. Deshalb
     wird die Farbe erst innerhalb von @supports gesetzt: Kann der Browser
     keine Masken, bleibt das Feld leer und der Text daneben trägt allein. */
  background-color: transparent;
}

@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .symbol {
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
  }

  .symbol--uebersicht { -webkit-mask-image: var(--symbol-uebersicht); mask-image: var(--symbol-uebersicht); }
  .symbol--dokumente  { -webkit-mask-image: var(--symbol-dokumente);  mask-image: var(--symbol-dokumente); }
  .symbol--hochladen  { -webkit-mask-image: var(--symbol-hochladen);  mask-image: var(--symbol-hochladen); }
  .symbol--loeschung  { -webkit-mask-image: var(--symbol-loeschung);  mask-image: var(--symbol-loeschung); }
  .symbol--pruefer    { -webkit-mask-image: var(--symbol-pruefer);    mask-image: var(--symbol-pruefer); }
  .symbol--audit      { -webkit-mask-image: var(--symbol-audit);      mask-image: var(--symbol-audit); }
  .symbol--clearing   { -webkit-mask-image: var(--symbol-clearing);   mask-image: var(--symbol-clearing); }
  .symbol--abmelden   { -webkit-mask-image: var(--symbol-abmelden);   mask-image: var(--symbol-abmelden); }
  .symbol--sperre     { -webkit-mask-image: var(--symbol-sperre);     mask-image: var(--symbol-sperre); }
  .symbol--frist      { -webkit-mask-image: var(--symbol-frist);      mask-image: var(--symbol-frist); }
  .symbol--platz      { -webkit-mask-image: var(--symbol-platz);      mask-image: var(--symbol-platz); }
}

/* --- Fuß der Seitenleiste: Konto und Abmelden --------------------------- */

.seitenleiste__fuss {
  flex-shrink: 0;
  border-top: 1px solid var(--rand);
  padding: var(--abstand-3);
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
}

.konto {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-1);
}

.konto__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-pille);
  background: var(--akzent);
  color: var(--text-auf-akzent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.konto__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.konto__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.konto__rolle {
  font-size: var(--text-xs);
  color: var(--text-gedaempft);
}

/* --- Rechte Spalte ------------------------------------------------------ */

.spalte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--kopfleiste-hoehe);
  display: flex;
  align-items: center;
  gap: var(--abstand-4);
  padding: var(--abstand-2) var(--abstand-6);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
}

.kopfleiste__titel {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.kopfleiste__abstand {
  flex: 1;
}

.kopfleiste__rolle {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-1) var(--abstand-3);
  border: 1px solid var(--rand);
  border-radius: var(--radius-pille);
  background: var(--flaeche-vertieft);
  color: var(--text-gedaempft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.inhalt {
  flex: 1;
  width: 100%;
  max-width: var(--inhalt-breite);
  padding: var(--abstand-6);
}

.fuss {
  max-width: var(--inhalt-breite);
  padding: var(--abstand-4) var(--abstand-6) var(--abstand-6);
  color: var(--text-gedaempft);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.fuss p {
  margin: 0;
  max-width: 80ch;
}

/* ==========================================================================
   5. Karten und Abschnitte
   ========================================================================== */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-xs);
  padding: var(--abstand-5);
  margin: 0 0 var(--abstand-5);
}

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

.karte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-4);
}

.karte__kopf h2,
.karte__kopf h3 {
  margin: 0;
}

.karte--flach {
  box-shadow: none;
}

/* Karte, die eine Tabelle trägt: Die Tabelle sitzt bündig an den Rändern. */
.karte--tabelle {
  padding: 0;
  overflow: hidden;
}

.karte--tabelle .karte__kopf {
  padding: var(--abstand-4) var(--abstand-5) 0;
  margin-bottom: var(--abstand-3);
}

.karte--tabelle .karte__fuss {
  padding: 0 var(--abstand-5) var(--abstand-4);
}

/* ==========================================================================
   6. Kacheln (Kennzahlen)
   ========================================================================== */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--abstand-4);
  margin: 0 0 var(--abstand-5);
}

.kachel {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-xs);
  padding: var(--abstand-5);
}

/* Wie im MailBloom-Internbereich trägt die Kachel ein eingefärbtes Symbolfeld.
   Die Statusbedeutung sitzt in dessen Farbe, nicht in einem Streifen am Rand,
   und die Beschriftung sagt dieselbe Sache noch einmal in Worten. */
.kachel__symbolfeld {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--akzent-zart);
  color: var(--akzent);
}

.kachel__inhalt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
}

.kachel--sperre .kachel__symbolfeld {
  background: var(--warnung-flaeche);
  color: var(--warnung-text);
}

.kachel--faellig .kachel__symbolfeld {
  background: var(--info-flaeche);
  color: var(--info-text);
}

.kachel--platz .kachel__symbolfeld {
  background: var(--flaeche-gedaempft);
  color: var(--text-gedaempft);
}

.kachel__zahl {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.kachel__beschriftung {
  font-size: var(--text-sm);
  color: var(--text-gedaempft);
  line-height: 1.45;
}

/* ==========================================================================
   7. Meldungen und Hinweise

   Aufbau wie die Meldungen im MailBloom-Internbereich: eine getönte Fläche mit
   umlaufender Linie in derselben Farbfamilie, kein farbiger Streifen an einer
   Seite. Die Aussage steckt im Text, die Farbe verstärkt sie nur.
   ========================================================================== */

.meldung {
  display: flex;
  gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  margin: 0 0 var(--abstand-4);
  border: 1px solid var(--rand);
  border-radius: var(--radius-md);
  background: var(--flaeche-vertieft);
  font-size: var(--text-sm);
  line-height: 1.55;
}

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

.meldung.fehler {
  background: var(--fehler-flaeche);
  border-color: var(--fehler-rand);
  color: var(--fehler-text);
}

.meldung.erfolg {
  background: var(--gut-flaeche);
  border-color: var(--gut-rand);
  color: var(--gut-text);
}

.meldung.warnung {
  background: var(--warnung-flaeche);
  border-color: var(--warnung-rand);
  color: var(--warnung-text);
}

.meldung.hinweisfeld {
  background: var(--info-flaeche);
  border-color: var(--info-rand);
  color: var(--info-text);
}

.hinweis,
.feldhinweis {
  color: var(--text-gedaempft);
  font-size: var(--text-sm);
  line-height: 1.55;
  max-width: 78ch;
}

.feldhinweis {
  margin: var(--abstand-2) 0 0;
}

.leer {
  color: var(--text-gedaempft);
  padding: var(--abstand-5) 0;
  text-align: center;
}

/* Befund der Protokollkette: Farbe UND Wort, nie Farbe allein. */
.befund {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--rand);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
}

.befund.gut {
  background: var(--gut-flaeche);
  border-color: var(--gut-rand);
  color: var(--gut-text);
}

.befund.schlecht {
  background: var(--fehler-flaeche);
  border-color: var(--fehler-rand);
  color: var(--fehler-text);
}

/* ==========================================================================
   8. Formulare
   ========================================================================== */

fieldset {
  margin: 0 0 var(--abstand-5);
  padding: 0;
  border: 0;
}

fieldset:last-of-type {
  margin-bottom: var(--abstand-4);
}

/* Eine `legend` sitzt von Haus aus in einer Aussparung des Feldgruppenrahmens.
   Trägt die Feldgruppe eine Karte, hängt die Beschriftung damit halb im Rand
   und halb daneben. `float` holt sie zurück in den Inhaltsbereich der Karte.
   Das folgende Element muss den Float wieder aufheben, sonst schiebt es sich
   darunter. */
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--abstand-4);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

legend + * {
  clear: both;
}

.feldgruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-4);
}

.feldgruppe:last-child {
  margin-bottom: 0;
}

.feld {
  margin-bottom: var(--abstand-4);
  min-width: 0;
}

.feldgruppe .feld {
  margin-bottom: 0;
}

.feld label {
  display: block;
  margin-bottom: var(--abstand-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--abstand-2) var(--abstand-3);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand-kraeftig);
  border-radius: var(--radius-md);
  transition: border-color var(--uebergang-schnell), box-shadow var(--uebergang-schnell);
}

input[type="file"] {
  padding: var(--abstand-2);
  line-height: 1.6;
}

select {
  /* Ohne dies bleibt das Auswahlfeld in Safari deutlich niedriger als die
     übrigen Felder, und die Zeile wirkt schief. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--abstand-3) center;
  background-size: 18px 18px;
  padding-right: var(--abstand-6);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--akzent);
}

input::placeholder {
  color: var(--neutral-400);
}

.ankreuzfeld {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-3);
  border: 1px solid var(--rand);
  border-radius: var(--radius-md);
  background: var(--flaeche-vertieft);
}

.ankreuzfeld input {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin: 0.2rem 0 0;
  accent-color: var(--akzent);
}

.ankreuzfeld label {
  margin: 0;
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.55;
  max-width: 78ch;
}

/* Filterleiste über Listen */
.filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: end;
  gap: var(--abstand-4);
  padding: var(--abstand-4) var(--abstand-5);
  margin: 0 0 var(--abstand-5);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-xs);
}

.filter .feld {
  margin-bottom: 0;
}

.filter__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
}

/* ==========================================================================
   9. Knöpfe
   ========================================================================== */

button,
.nebenknopf,
.hauptknopf,
.warnknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: 44px;
  padding: 0 var(--abstand-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--rand-kraeftig);
  border-radius: var(--radius-md);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--uebergang), border-color var(--uebergang),
    color var(--uebergang), transform var(--uebergang-schnell);
}

/* Der Druckpunkt. Ohne ihn wirkt ein Knopf tot, und der Bedienende weiß nicht,
   ob das System ihn gehört hat. */
button:active,
.nebenknopf:active,
.hauptknopf:active,
.warnknopf:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  button:hover,
  .nebenknopf:hover {
    background: var(--flaeche-gedaempft);
    border-color: var(--neutral-400);
    color: var(--text);
  }
}

.hauptknopf {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--text-auf-akzent);
  box-shadow: var(--schatten-xs);
}

@media (hover: hover) and (pointer: fine) {
  .hauptknopf:hover {
    background: var(--akzent-stark);
    border-color: var(--akzent-stark);
    color: var(--text-auf-akzent);
    box-shadow: var(--schatten-sm);
  }
}

.warnknopf {
  background: var(--fehler);
  border-color: var(--fehler);
  color: var(--text-auf-akzent);
  box-shadow: var(--schatten-xs);
}

@media (hover: hover) and (pointer: fine) {
  .warnknopf:hover {
    background: var(--fehler-text);
    border-color: var(--fehler-text);
    color: var(--text-auf-akzent);
  }
}

.knopf--breit {
  width: 100%;
}

/* Knopf, der nur ein Symbol trägt. Die Beschriftung steht in aria-label. */
/* 44 mal 44 Pixel, auch wenn der Knopf optisch kleiner wirken dürfte. Das ist
   die Mindestgröße für eine Bedienung mit dem Finger, und diese Oberfläche wird
   auch auf einem Tablet geöffnet. */
.knopf--symbol {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--text-gedaempft);
  border-color: var(--rand);
}

@media (hover: hover) and (pointer: fine) {
  .knopf--symbol:hover {
    background: var(--fehler-flaeche);
    border-color: var(--fehler-rand);
    color: var(--fehler-text);
  }
}

.knopfform {
  display: inline-flex;
  margin: 0;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  margin: var(--abstand-4) 0 0;
}

/* ==========================================================================
   10. Tabellen
   ========================================================================== */

.tabellenrahmen {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--abstand-3) var(--abstand-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rand);
}

thead th {
  position: relative;
  background: var(--flaeche-vertieft);
  border-bottom: 1px solid var(--rand-kraeftig);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  tbody tr {
    transition: background-color var(--uebergang-schnell);
  }

  tbody tr:hover {
    background: var(--flaeche-vertieft);
  }
}

/* Optische Kante: Die erste Spalte einer Tabelle muss senkrecht unter der
   Überschrift ihrer Karte beginnen und die letzte bündig mit deren rechtem
   Rand enden. Ohne diese beiden Regeln steht die Tabelle je nach Kartenart
   acht Pixel zu weit links oder zu weit rechts, und das sieht man. */
.karte--tabelle th:first-child,
.karte--tabelle td:first-child {
  padding-left: var(--abstand-5);
}

.karte--tabelle th:last-child,
.karte--tabelle td:last-child {
  padding-right: var(--abstand-5);
}

.karte:not(.karte--tabelle) th:first-child,
.karte:not(.karte--tabelle) td:first-child {
  padding-left: 0;
}

.karte:not(.karte--tabelle) th:last-child,
.karte:not(.karte--tabelle) td:last-child {
  padding-right: 0;
}

.zahlenspalte {
  text-align: right;
  white-space: nowrap;
}

.kennungsspalte,
.hashspalte {
  font-family: var(--schrift-mono);
  font-size: var(--text-xs);
  word-break: break-all;
}

.hashspalte {
  color: var(--text-gedaempft);
  max-width: 22rem;
}

.detailspalte {
  font-size: var(--text-xs);
  color: var(--text-gedaempft);
  max-width: 28rem;
  word-break: break-word;
}

.datumsspalte {
  white-space: nowrap;
}

/* ==========================================================================
   11. Detailseite: Metadaten und Marken
   ========================================================================== */

.metadaten {
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  gap: 0;
  margin: 0;
}

.metadaten dt {
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-3) 0;
  border-bottom: 1px solid var(--rand);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-gedaempft);
}

.metadaten dd {
  margin: 0;
  padding: var(--abstand-3) 0;
  border-bottom: 1px solid var(--rand);
  font-size: var(--text-sm);
  word-break: break-word;
}

.metadaten dt:last-of-type,
.metadaten dd:last-of-type {
  border-bottom: 0;
}

.marke {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--abstand-3);
  margin: 0 var(--abstand-1) var(--abstand-1) 0;
  border: 1px solid var(--rand);
  border-radius: var(--radius-pille);
  background: var(--flaeche-gedaempft);
  color: var(--text-gedaempft);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.marke.sperre {
  background: var(--warnung-flaeche);
  border-color: var(--warnung-rand);
  color: var(--warnung-text);
}

.marke.geloescht {
  background: var(--fehler-flaeche);
  border-color: var(--fehler-rand);
  color: var(--fehler-text);
}

.marke.zustand {
  background: var(--akzent-zart-neutral);
  border-color: var(--rand);
  color: var(--akzent-stark);
}

.vorschaurahmen {
  display: block;
  width: 100%;
  height: 40rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius-md);
  background: var(--flaeche-vertieft);
}

/* ==========================================================================
   12. Blättern, Listen, Stapel
   ========================================================================== */

.trefferzahl {
  margin: 0 0 var(--abstand-4);
  color: var(--text-gedaempft);
  font-size: var(--text-sm);
}

.trefferzahl strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.blaetterung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  margin: 0;
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--rand);
  font-size: var(--text-sm);
  color: var(--text-gedaempft);
}

.blaetterung__platz {
  flex: 1;
}

.wegweiser {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
}

.wegweiser a {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: 44px;
  padding: 0 var(--abstand-4);
  border: 1px solid var(--rand);
  border-radius: var(--radius-md);
  background: var(--flaeche);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background-color var(--uebergang-schnell), border-color var(--uebergang-schnell);
}

@media (hover: hover) and (pointer: fine) {
  .wegweiser a:hover {
    background: var(--akzent-zart);
    border-color: var(--akzent-hell);
    color: var(--akzent-stark);
  }
}

/* ==========================================================================
   13. Anonyme Seiten: Anmeldung und Fehler
   ========================================================================== */

.tafelseite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--abstand-5) var(--abstand-4);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(152, 192, 85, 0.18) 0%, rgba(152, 192, 85, 0) 55%),
    var(--flaeche-gedaempft);
}

.tafel {
  width: 100%;
  max-width: 27rem;
  padding: var(--abstand-7) var(--abstand-6) var(--abstand-6);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-xl);
  box-shadow: var(--schatten-lg);
}

.tafel--breit {
  max-width: 34rem;
}

.tafel__marke {
  display: flex;
  justify-content: center;
  margin-bottom: var(--abstand-4);
}

.tafel__logo {
  height: 58px;
  width: auto;
}

.tafel h1 {
  margin: 0 0 var(--abstand-1);
  text-align: center;
  font-size: var(--text-2xl);
}

.tafel__unterzeile {
  margin: 0 0 var(--abstand-6);
  text-align: center;
  color: var(--text-gedaempft);
  font-size: var(--text-sm);
}

.tafel .hinweis {
  margin-top: var(--abstand-5);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--rand);
  font-size: var(--text-xs);
}

/* ==========================================================================
   14. Vorschauseite (eigenes Dokument im Rahmen, ohne Hülle)
   ========================================================================== */

.vorschauseite {
  background: var(--flaeche);
  padding: var(--abstand-5);
}

.erechnung {
  max-width: 62rem;
}

/* ==========================================================================
   15. Kleine Bildschirme

   Unterhalb von 1024 Pixeln wird aus der Seitenleiste eine Kopfzeile mit einer
   waagerecht scrollbaren Navigationsleiste. Kein Schubfach, kein Zustand,
   kein Skript. Die Reihenfolge im Quelltext bleibt dieselbe, damit die
   Tastaturbedienung unverändert funktioniert.
   ========================================================================== */

@media (max-width: 64rem) {
  .huelle {
    display: block;
  }

  .seitenleiste {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-3);
    padding: 0 var(--abstand-4);
    border-right: 0;
    border-bottom: 1px solid var(--rand);
  }

  .seitenleiste__marke {
    height: auto;
    padding: var(--abstand-3) 0;
    border-bottom: 0;
  }

  .seitenleiste__logo {
    height: 40px;
    margin-left: -5px;
  }

  .seitenleiste__abschnitt {
    display: none;
  }

  .seitenleiste__fuss {
    order: 2;
    margin-left: auto;
    padding: var(--abstand-2) 0;
    border-top: 0;
  }

  .konto__meta {
    display: none;
  }

  .navi {
    order: 3;
    width: 100%;
    flex: 1 0 100%;
    flex-direction: row;
    gap: var(--abstand-1);
    padding: 0 0 var(--abstand-2);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .navi::-webkit-scrollbar {
    display: none;
  }

  .navi__punkt {
    flex-shrink: 0;
  }

  .kopfleiste {
    padding: var(--abstand-3) var(--abstand-4);
  }

  .inhalt {
    padding: var(--abstand-5) var(--abstand-4);
  }

  .fuss {
    padding: var(--abstand-3) var(--abstand-4) var(--abstand-5);
  }

  .metadaten {
    grid-template-columns: 1fr;
  }

  .metadaten dt {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .metadaten dd {
    padding-top: var(--abstand-1);
  }

  .vorschaurahmen {
    height: 28rem;
  }
}

@media (max-width: 40rem) {
  .kachel__zahl {
    font-size: var(--text-2xl);
  }

  .karte,
  .filter {
    padding: var(--abstand-4);
  }

  .karte--tabelle {
    padding: 0;
  }

  .karte--tabelle .karte__kopf {
    padding: var(--abstand-4) var(--abstand-4) 0;
  }

  .karte--tabelle .karte__fuss {
    padding: 0 var(--abstand-4) var(--abstand-4);
  }

  th,
  td {
    padding: var(--abstand-3);
  }
}

/* ==========================================================================
   16. Bewegung nur, wenn erwünscht
   ========================================================================== */

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

  button:active,
  .nebenknopf:active,
  .hauptknopf:active,
  .warnknopf:active {
    transform: none;
  }
}

/* ==========================================================================
   17. Druck

   Ein Prüfer druckt Seiten aus oder legt sie als PDF ab. Dann stören
   Navigation und Flächen, und die Adressen hinter den Verweisen fehlen.
   ========================================================================== */

@media print {
  .seitenleiste,
  .kopfleiste,
  .sprungmarke,
  .filter,
  .aktionen,
  .blaetterung {
    display: none !important;
  }

  body {
    background: #ffffff;
  }

  .inhalt {
    max-width: none;
    padding: 0;
  }

  .karte,
  .kachel {
    box-shadow: none;
    break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }
}