/* ERZEUGT, NICHT VON HAND AENDERN. Quelle: tokens.json und src/*.css, gebaut mit build.mjs. Version 0.1.0 */
:root {
  --farbe-marke: #064566;
  --farbe-marke-dunkel: #04364F;
  --farbe-link: #026FB3;
  --farbe-link-hover: #015A94;
  --farbe-akzent: #F3AF3F;
  --farbe-akzent-hover: #E59F26;
  --farbe-akzent-text: #0F172A;
  --farbe-text: #0F172A;
  --farbe-text-gedaempft: #4A5565;
  --farbe-text-auf-marke: #FFFFFF;
  --farbe-bg: #F4F7FB;
  --farbe-flaeche: #FFFFFF;
  --farbe-hell: #F0F9FF;
  --farbe-linie: #DFE7F0;
  --farbe-rand-steuerelement: #7B8898;
  --farbe-platzhalter: #5F6B7C;
  --farbe-fehler: #B3261E;
  --farbe-fehler-hover: #8F1F18;
  --farbe-fehler-bg: #FDECEA;
  --farbe-fehler-rand: #FECDD3;
  --farbe-ok: #1B6E2E;
  --farbe-ok-bg: #E4F4E8;
  --farbe-ok-rand: #A3D4AE;
  --farbe-warn: #7A4A00;
  --farbe-warn-bg: #FFF1D0;
  --farbe-warn-rand: #FDE68A;
  --farbe-notfall: #933509;
  --farbe-notfall-bg: #FBEDE6;
  --farbe-notfall-rand: #F0C5AE;
  --farbe-info: #064566;
  --farbe-info-bg: #E1EFFA;
  --farbe-info-rand: #BEE3F8;
  --farbe-neutral-bg: #E9EDF2;
  --farbe-neutral-text: #3F4A5A;
  --farbe-fokus: #026FB3;
  --farbe-fokus-auf-marke: #F3AF3F;
  --farbe-scrim: rgba(15, 23, 42, 0.55);
  --farbe-info-kopf-bg: rgba(6, 69, 102, 0.06);
  --farbe-info-linie: rgba(6, 69, 102, 0.08);
  --schriftart-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schriftart-ueberschrift: Montserrat, "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --schrift-klein: 0.875rem;
  --schrift-text: 1rem;
  --schrift-gross: 1.125rem;
  --schrift-titel: 1.375rem;
  --schrift-seitentitel: 1.75rem;
  --schrift-haupttitel: 2.25rem;
  --schrift-display: 2.5rem;
  --zeilenhoehe-text: 1.5;
  --zeilenhoehe-ueberschrift: 1.2;
  --zeilenlaenge: 65ch;
  --abstand-xs: 0.25rem;
  --abstand-sm: 0.5rem;
  --abstand-md: 1rem;
  --abstand-lg: 1.5rem;
  --abstand-xl: 2rem;
  --abstand-xxl: 3rem;
  --abstand-xxxl: 4rem;
  --radius-feld: 8px;
  --radius-karte: 12px;
  --radius-rund: 999px;
  --schatten-karte: 0px 2px 8px rgba(15, 23, 42, 0.08);
  --schatten-schwebend: 0px 6px 12px rgba(15, 23, 42, 0.2);
  --dauer-druck: 100ms;
  --dauer-uebergang: 240ms;
  --dauer-einblenden: 320ms;
  --dauer-staffel: 60ms;
  --dauer-skeleton: 900ms;
  --kurve: cubic-bezier(0.2, 0, 0, 1);
  --tippflaeche: 2.75rem;
  --breite-text: 720px;
  --breite-seite: 1120px;
  --fokus-breite: 3px;
  --fokus-abstand: 2px;
}

/* --- 00-schriften.css --- */
/* Schriften: Atkinson Hyperlegible Next (Text) und Montserrat 700 (Ueberschriften). Beide unter OFL, siehe schriften/. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../schriften/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../schriften/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../schriften/montserrat-latin-700-normal.woff2") format("woff2");
}

/* --- 01-basis.css --- */
/* Basis: Grundwerte, Typografie, Links, Fokus, Seitenraster, Bewegung */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--farbe-bg);
  color: var(--farbe-text);
  font-family: var(--schriftart-text);
  font-size: var(--schrift-text);
  line-height: var(--zeilenhoehe-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--farbe-marke);
  line-height: var(--zeilenhoehe-ueberschrift);
  text-wrap: balance;
}
h1 { font-family: var(--schriftart-ueberschrift); font-weight: 700; font-size: var(--schrift-seitentitel); }
h2 { font-family: var(--schriftart-ueberschrift); font-weight: 700; font-size: var(--schrift-titel); }
h3 { font-weight: 700; font-size: var(--schrift-gross); }
h4 { font-weight: 700; font-size: var(--schrift-text); }
@media (min-width: 600px) {
  h1 { font-size: var(--schrift-haupttitel); }
}
.titel-display { font-family: var(--schriftart-ueberschrift); font-weight: 700; font-size: var(--schrift-display); line-height: var(--zeilenhoehe-ueberschrift); color: var(--farbe-marke); }

p { margin: 0; }
.lesebreite { max-inline-size: var(--zeilenlaenge); }
.text-klein { font-size: var(--schrift-klein); }
.text-gedaempft { color: var(--farbe-text-gedaempft); }
.text-gross { font-size: var(--schrift-gross); }

a { color: var(--farbe-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--farbe-link-hover); text-decoration-thickness: 2px; }

/* Sichtbarer Fokus ueberall (3 px), auf Petrol in Gold */
:focus-visible,
.ist-fokus {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}
.auf-marke :focus-visible,
.auf-marke .ist-fokus {
  outline-color: var(--farbe-fokus-auf-marke);
}

.nur-lesegeraet {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  inset-inline-start: var(--abstand-md);
  inset-block-start: var(--abstand-sm);
  z-index: 100;
  padding: var(--abstand-sm) var(--abstand-md);
  min-block-size: var(--tippflaeche);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  color: var(--farbe-marke);
  font-weight: 700;
  transform: translateY(-200%);
}
.sprunglink:focus-visible { transform: translateY(0); }

/* Seitenraster */
.seite {
  inline-size: 100%;
  max-inline-size: calc(var(--breite-text) + 2 * var(--abstand-md));
  margin-inline: auto;
  padding: var(--abstand-lg) var(--abstand-md) var(--abstand-xxl);
}
.seite--breit { max-inline-size: calc(var(--breite-seite) + 2 * var(--abstand-md)); }
@media (min-width: 600px) {
  .seite { padding-inline: var(--abstand-lg); max-inline-size: calc(var(--breite-text) + 2 * var(--abstand-lg)); }
  .seite--breit { max-inline-size: calc(var(--breite-seite) + 2 * var(--abstand-lg)); }
}
.stapel { display: grid; gap: var(--abstand-md); align-content: start; }
.stapel--lg { gap: var(--abstand-lg); }
.stapel--xl { gap: var(--abstand-xl); }
.reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-sm) var(--abstand-md); align-items: center; }
.raster { display: grid; gap: var(--abstand-md); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

/* Seitenwechsel: sanftes Ueberblenden, aeltere Browser springen einfach */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--dauer-uebergang); animation-timing-function: var(--kurve); }

/* Gestaffeltes Einblenden: Kinder erscheinen nacheinander (max. 8 Stufen) */
@keyframes einblenden {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
.staffel > * {
  animation: einblenden var(--dauer-einblenden) var(--kurve) both;
  animation-delay: calc(var(--i, 0) * var(--dauer-staffel));
}
.staffel > :nth-child(2), .staffel > [data-i="1"] { --i: 1; }
.staffel > :nth-child(3), .staffel > [data-i="2"] { --i: 2; }
.staffel > :nth-child(4), .staffel > [data-i="3"] { --i: 3; }
.staffel > :nth-child(5), .staffel > [data-i="4"] { --i: 4; }
.staffel > :nth-child(6), .staffel > [data-i="5"] { --i: 5; }
.staffel > :nth-child(7), .staffel > [data-i="6"] { --i: 6; }
.staffel > :nth-child(8), .staffel > [data-i="7"] { --i: 7; }
.staffel > :nth-child(n+9), .staffel > [data-i="8"] { --i: 8; }

/* Bewegung reduzieren: alles aus, Endzustand sofort */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --- 02-symbole.css --- */
/* Symbole: eigene schlichte Linien-Symbole als Maske, erben die Textfarbe (currentColor). Kein Emoji. */
.symbol {
  display: inline-block;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  background-color: currentColor;
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}
.symbol--gross { inline-size: 3rem; block-size: 3rem; }
:root { --symbol-info: 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='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }
:root { --symbol-ok: 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='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E"); }
:root { --symbol-warn: 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='M12 3l10 17H2z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); }
:root { --symbol-fehler: 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='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
:root { --symbol-notfall: 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='M8 3h8l5 5v8l-5 5H8l-5-5V8z'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E"); }
:root { --symbol-offline: 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='M1 1l22 22M16.7 11.1A11 11 0 0 1 19 12.6M5 12.6a11 11 0 0 1 5.2-2.4M10.7 5.1A16 16 0 0 1 22.6 9M1.4 9a16 16 0 0 1 4.7-2.9M8.5 16.1a6 6 0 0 1 7 0M12 20h.01'/%3E%3C/svg%3E"); }
:root { --symbol-schloss: 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='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
:root { --symbol-suche: 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='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M9 9.5a2 2 0 1 1 2.6 1.9c-.4.2-.6.5-.6 1M11 15h.01'/%3E%3C/svg%3E"); }
:root { --symbol-werkzeug: 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.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E"); }
:root { --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-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
:root { --symbol-zurueck: 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 18l-6-6 6-6'/%3E%3C/svg%3E"); }
:root { --symbol-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
:root { --symbol-leer: 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 13h5l1.5 3h5L16 13h5M5.5 5h13l2.5 8v6H3v-6z'/%3E%3C/svg%3E"); }

.symbol--info { --symbol: var(--symbol-info); }
.symbol--ok { --symbol: var(--symbol-ok); }
.symbol--warn { --symbol: var(--symbol-warn); }
.symbol--fehler { --symbol: var(--symbol-fehler); }
.symbol--notfall { --symbol: var(--symbol-notfall); }
.symbol--offline { --symbol: var(--symbol-offline); }
.symbol--schloss { --symbol: var(--symbol-schloss); }
.symbol--suche { --symbol: var(--symbol-suche); }
.symbol--werkzeug { --symbol: var(--symbol-werkzeug); }
.symbol--abmelden { --symbol: var(--symbol-abmelden); }
.symbol--zurueck { --symbol: var(--symbol-zurueck); }
.symbol--haken { --symbol: var(--symbol-haken); }
.symbol--leer { --symbol: var(--symbol-leer); }

/* Portal- und Menuesymbole (Stufe 2a) */
:root { --symbol-start: 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 11l9-8 9 8M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E"); }
:root { --symbol-mitglieder: 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='M2.500 20a6.500 6.500 0 0 1 13 0M17.500 14.200a5.500 5.500 0 0 1 4 5.800M9 4.500a3.500 3.500 0 1 0 0 7 3.500 3.500 0 0 0 0-7zM17 6.500a2.500 2.500 0 1 0 0 5'/%3E%3C/svg%3E"); }
:root { --symbol-person: 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='M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
:root { --symbol-hinzu: 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='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 8v8M8 12h8'/%3E%3C/svg%3E"); }
:root { --symbol-bearbeiten: 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='M4 20l1-4L16.500 4.500a2.100 2.100 0 0 1 3 3L8 19zM14.500 6.500l3 3'/%3E%3C/svg%3E"); }
:root { --symbol-dokument: 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='M7 3h7l5 5v13H7zM14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E"); }
:root { --symbol-taube: 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 5l-3 1.500c-1-.8-2.500-1-3.800-.3C12 7.300 11.500 9 11 10.500 10 13 7 14.500 3 14.500c1.500 3 4 4.500 7 4.500 5 0 8-3.500 8-8 0-.7-.1-1.300-.3-2L21 8zM15.500 8.500h.01'/%3E%3C/svg%3E"); }
:root { --symbol-liste: 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 4h6v3H9zM8 5.500H6a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6.500a1 1 0 0 0-1-1h-2M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
:root { --symbol-grabstein: 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='M6 21V10a6 6 0 0 1 12 0v11zM12 8v6M9.500 10.500h5'/%3E%3C/svg%3E"); }
:root { --symbol-sarg: 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 3h6l4 6-3 12H8L5 9zM12 8v7M10 10.500h4'/%3E%3C/svg%3E"); }
:root { --symbol-schleife: 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='M12 3c3 0 5 2 5 4.500 0 3-3 5-5 8.500-2-3.500-5-5.500-5-8.500C7 5 9 3 12 3zM9.500 15L6 21l3-1.500M14.500 15L18 21l-3-1.500'/%3E%3C/svg%3E"); }
:root { --symbol-euro: 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='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM15 9.500a4 4 0 1 0 0 5M8 11h5M8 13h5'/%3E%3C/svg%3E"); }
:root { --symbol-brief: 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='M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM3 7l9 6 9-6'/%3E%3C/svg%3E"); }
:root { --symbol-zahnrad: 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='M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM10.500 3h3l.5 2.500 2 1 2.300-1.300 2.100 2.100-1.300 2.300 1 2 2.500.5v3l-2.500.5-1 2 1.300 2.300-2.100 2.100-2.300-1.300-2 1-.5 2.500h-3l-.5-2.500-2-1-2.300 1.300-2.100-2.100 1.300-2.300-1-2L3 13.500v-3l2.500-.5 1-2-1.300-2.300 2.100-2.100 2.300 1.300 2-1z'/%3E%3C/svg%3E"); }
:root { --symbol-pille: 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='M10.500 20.500a5 5 0 0 1-7-7l10-10a5 5 0 0 1 7 7zM8.500 8.500l7 7'/%3E%3C/svg%3E"); }
:root { --symbol-ordner: 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 6a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
:root { --symbol-lupe: 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='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM21 21l-4.300-4.300'/%3E%3C/svg%3E"); }
:root { --symbol-paket: 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='M12 3l8 4.500v9L12 21l-8-4.500v-9zM4 7.500l8 4.500 8-4.500M12 12v9'/%3E%3C/svg%3E"); }
:root { --symbol-kalender: 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='M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
:root { --symbol-warenkorb: 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 18.500a1.500 1.500 0 1 0 0 3 1.500 1.500 0 0 0 0-3zM18 18.500a1.500 1.500 0 1 0 0 3 1.500 1.500 0 0 0 0-3zM2 3h3l2.600 12.500a2 2 0 0 0 2 1.500h8a2 2 0 0 0 2-1.500L21 8H6'/%3E%3C/svg%3E"); }
:root { --symbol-verbindung: 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='M8.500 7.500a4.500 4.500 0 1 0 0 9 4.500 4.500 0 0 0 0-9zM15.500 7.500a4.500 4.500 0 1 0 0 9 4.500 4.500 0 0 0 0-9z'/%3E%3C/svg%3E"); }
:root { --symbol-schule: 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='M2 9l10-5 10 5-10 5zM6 11.500V16c0 1.500 3 3 6 3s6-1.500 6-3v-4.500M22 9v6'/%3E%3C/svg%3E"); }
:root { --symbol-buch: 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='M4 4h6a3 3 0 0 1 2 1 3 3 0 0 1 2-1h6v15h-6a3 3 0 0 0-2 1 3 3 0 0 0-2-1H4zM12 5v15'/%3E%3C/svg%3E"); }
:root { --symbol-glocke: 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='M6 17V11a6 6 0 0 1 12 0v6l1.500 2h-15zM10 21h4'/%3E%3C/svg%3E"); }
.symbol--start { --symbol: var(--symbol-start); }
.symbol--mitglieder { --symbol: var(--symbol-mitglieder); }
.symbol--person { --symbol: var(--symbol-person); }
.symbol--hinzu { --symbol: var(--symbol-hinzu); }
.symbol--bearbeiten { --symbol: var(--symbol-bearbeiten); }
.symbol--dokument { --symbol: var(--symbol-dokument); }
.symbol--taube { --symbol: var(--symbol-taube); }
.symbol--liste { --symbol: var(--symbol-liste); }
.symbol--grabstein { --symbol: var(--symbol-grabstein); }
.symbol--sarg { --symbol: var(--symbol-sarg); }
.symbol--schleife { --symbol: var(--symbol-schleife); }
.symbol--euro { --symbol: var(--symbol-euro); }
.symbol--brief { --symbol: var(--symbol-brief); }
.symbol--zahnrad { --symbol: var(--symbol-zahnrad); }
.symbol--pille { --symbol: var(--symbol-pille); }
.symbol--ordner { --symbol: var(--symbol-ordner); }
.symbol--lupe { --symbol: var(--symbol-lupe); }
.symbol--paket { --symbol: var(--symbol-paket); }
.symbol--kalender { --symbol: var(--symbol-kalender); }
.symbol--warenkorb { --symbol: var(--symbol-warenkorb); }
.symbol--verbindung { --symbol: var(--symbol-verbindung); }
.symbol--schule { --symbol: var(--symbol-schule); }
.symbol--buch { --symbol: var(--symbol-buch); }
.symbol--glocke { --symbol: var(--symbol-glocke); }
:root { --symbol-telefon: 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='M5 4h4l2 5-2.500 1.500a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.symbol--telefon { --symbol: var(--symbol-telefon); }

/* --- 10-knopf.css --- */
/* Knopf: primaer (Petrol), sekundaer (Rand Blau), akzent (Gold, hoechstens einer je Seite), gefahr (Rot) */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-sm);
  min-block-size: var(--tippflaeche);
  padding: var(--abstand-sm) var(--abstand-md);
  border: 2px solid transparent;
  border-radius: var(--radius-karte);
  font: 700 var(--schrift-text) / 1.2 var(--schriftart-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dauer-druck) var(--kurve);
}
.knopf:active,
.knopf.ist-aktiv { transform: scale(0.97); }

.knopf--primaer { background: var(--farbe-marke); color: var(--farbe-text-auf-marke); }
.knopf--primaer:hover, .knopf--primaer.ist-hover { background: var(--farbe-marke-dunkel); color: var(--farbe-text-auf-marke); }

.knopf--sekundaer { background: var(--farbe-flaeche); color: var(--farbe-link); border-color: var(--farbe-link); }
.knopf--sekundaer:hover, .knopf--sekundaer.ist-hover { background: var(--farbe-info-bg); color: var(--farbe-link-hover); border-color: var(--farbe-link-hover); }

.knopf--akzent { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }
.knopf--akzent:hover, .knopf--akzent.ist-hover { background: var(--farbe-akzent-hover); color: var(--farbe-akzent-text); }

.knopf--gefahr { background: var(--farbe-fehler); color: var(--farbe-text-auf-marke); }
.knopf--gefahr:hover, .knopf--gefahr.ist-hover { background: var(--farbe-fehler-hover); color: var(--farbe-text-auf-marke); }

.knopf--block { display: flex; inline-size: 100%; }
.knopf--klein { font-size: var(--schrift-klein); }

/* Auf Petrol (Kopfzeile): heller Knopf */
.auf-marke .knopf--sekundaer { background: transparent; color: var(--farbe-text-auf-marke); border-color: var(--farbe-text-auf-marke); }
.auf-marke .knopf--sekundaer:hover { background: var(--farbe-marke-dunkel); color: var(--farbe-text-auf-marke); border-color: var(--farbe-text-auf-marke); }

.knopf:disabled,
.knopf[aria-disabled="true"] {
  background: var(--farbe-neutral-bg);
  color: var(--farbe-neutral-text);
  border-color: var(--farbe-neutral-bg);
  cursor: not-allowed;
  transform: none;
}

/* Laden: kleiner Kreisel, nur solange der Knopf beschaeftigt ist */
@keyframes drehen { to { transform: rotate(1turn); } }
.knopf[aria-busy="true"] { cursor: progress; }
.knopf[aria-busy="true"]::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-rund);
  animation: drehen 800ms linear infinite;
}

/* Textlink in Listen mit voller Tippflaeche */
.link-flaeche {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tippflaeche);
}

/* --- 11-feld.css --- */
/* Formularfeld: Label oben, Hilfetext, Fehlertext unten (per aria-describedby verbunden) */
.feld { display: grid; gap: var(--abstand-sm); align-content: start; }
.feld__label { font-weight: 700; color: var(--farbe-text); }
.feld__pflicht { color: var(--farbe-text-gedaempft); font-weight: 400; }
.feld__hilfe { margin: 0; font-size: var(--schrift-klein); color: var(--farbe-text-gedaempft); }

.feld__eingabe {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--abstand-sm) var(--abstand-md);
  border: 2px solid var(--farbe-rand-steuerelement);
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: 400 var(--schrift-text) / var(--zeilenhoehe-text) var(--schriftart-text);
}
textarea.feld__eingabe { min-block-size: 7rem; resize: vertical; }
select.feld__eingabe { appearance: auto; }
.feld__eingabe::placeholder { color: var(--farbe-platzhalter); opacity: 1; }
.feld__eingabe:hover,
.feld__eingabe.ist-hover { border-color: var(--farbe-text-gedaempft); }
.feld__eingabe:focus-visible,
.feld__eingabe.ist-fokus { border-color: var(--farbe-link); }
.feld__eingabe:disabled {
  background: var(--farbe-neutral-bg);
  color: var(--farbe-neutral-text);
  border-color: var(--farbe-neutral-bg);
  cursor: not-allowed;
}

/* Fehler: roter Rand, Text mit Symbol, Feld wackelt einmal kurz */
@keyframes feld-wackeln {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.feld__fehler {
  display: none;
  margin: 0;
  gap: var(--abstand-sm);
  align-items: flex-start;
  font-weight: 700;
  font-size: var(--schrift-klein);
  color: var(--farbe-fehler);
}
.feld__fehler::before {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background-color: currentColor;
  -webkit-mask: var(--symbol-fehler) center / contain no-repeat;
  mask: var(--symbol-fehler) center / contain no-repeat;
}
.feld--fehler .feld__fehler { display: flex; }
.feld--fehler .feld__eingabe,
.feld__eingabe[aria-invalid="true"] {
  border-color: var(--farbe-fehler);
  background: var(--farbe-fehler-bg);
  animation: feld-wackeln 200ms var(--kurve);
}

/* --- 12-auswahl.css --- */
/* Auswahlgruppe: fieldset mit legend, jede Option eine ganze tippbare Zeile (Radio oder Checkbox, native Eingaben) */
.auswahl { display: grid; gap: var(--abstand-sm); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.auswahl__legende { padding: 0; margin-block-end: var(--abstand-sm); font-weight: 700; font-size: var(--schrift-gross); color: var(--farbe-text); }
.auswahl__hilfe { margin: 0 0 var(--abstand-sm); font-size: var(--schrift-klein); color: var(--farbe-text-gedaempft); }

.auswahl__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--abstand-md);
  min-block-size: 3.5rem;
  padding: var(--abstand-sm) var(--abstand-md);
  border: 2px solid var(--farbe-rand-steuerelement);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  cursor: pointer;
  transition: transform var(--dauer-druck) var(--kurve);
}
.auswahl__option:active { transform: scale(0.98); }
.auswahl__option:hover,
.auswahl__option.ist-hover { border-color: var(--farbe-marke); }
.auswahl__option:has(input:checked) {
  border-color: var(--farbe-marke);
  background: var(--farbe-info-bg);
}
.auswahl__option:has(input:focus-visible),
.auswahl__option.ist-fokus {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}
.auswahl__option:has(input:disabled) {
  background: var(--farbe-neutral-bg);
  color: var(--farbe-neutral-text);
  border-color: var(--farbe-neutral-bg);
  cursor: not-allowed;
}

.auswahl__eingabe {
  appearance: none;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  border: 2px solid var(--farbe-rand-steuerelement);
  background: var(--farbe-flaeche);
  display: grid;
  place-content: center;
}
.auswahl__eingabe[type="radio"] { border-radius: var(--radius-rund); }
.auswahl__eingabe[type="checkbox"] { border-radius: var(--radius-feld); }
.auswahl__eingabe:checked { border-color: var(--farbe-marke); background: var(--farbe-marke); }
.auswahl__eingabe[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--farbe-flaeche); }
.auswahl__eingabe[type="checkbox"]:checked::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  background-color: var(--farbe-text-auf-marke);
  -webkit-mask: var(--symbol-haken) center / contain no-repeat;
  mask: var(--symbol-haken) center / contain no-repeat;
}
.auswahl__eingabe:focus-visible { outline: none; }

.auswahl__text { display: grid; gap: 2px; }
.auswahl__titel { font-weight: 700; }
.auswahl__beschreibung { font-size: var(--schrift-klein); color: var(--farbe-text-gedaempft); }
.auswahl__option:has(input:disabled) .auswahl__beschreibung { color: inherit; }

/* --- 20-dialog.css --- */
/* Bestaetigungsdialog (ersetzt alert/confirm/prompt). Aufbau erzeugt bausteine.js: dialog.bestaetigen() */
@keyframes dialog-ein { from { opacity: 0; transform: translateY(0.75rem) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes scrim-ein { from { opacity: 0; } to { opacity: 1; } }

.dialog-huelle {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: end center;
  padding: var(--abstand-md);
  background: var(--farbe-scrim);
  animation: scrim-ein var(--dauer-uebergang) var(--kurve) both;
}
@media (min-width: 600px) {
  .dialog-huelle { place-items: center; }
}
.dialog {
  inline-size: 100%;
  max-inline-size: 30rem;
  max-block-size: calc(100dvh - 2 * var(--abstand-md));
  overflow: auto;
  padding: var(--abstand-lg);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  box-shadow: var(--schatten-schwebend);
  display: grid;
  gap: var(--abstand-md);
  animation: dialog-ein var(--dauer-uebergang) var(--kurve) both;
}
.dialog__titel { font-family: var(--schriftart-ueberschrift); font-weight: 700; font-size: var(--schrift-titel); line-height: var(--zeilenhoehe-ueberschrift); color: var(--farbe-marke); }
.dialog__text { margin: 0; }
.dialog__auswahl {
  margin: 0;
  padding: var(--abstand-md);
  border-radius: var(--radius-feld);
  background: var(--farbe-info-bg);
  font-weight: 700;
}
.dialog__aktionen { display: grid; gap: var(--abstand-sm); }
@media (min-width: 600px) {
  .dialog__aktionen { display: flex; flex-direction: row-reverse; justify-content: flex-start; }
}
html.dialog-offen { overflow: hidden; }

/* --- 21-meldung.css --- */
/* Statusmeldung: info, ok, warn, fehler, notfall. Symbol + Text, nie nur Farbe. */
@keyframes meldung-gleiten { from { opacity: 0; transform: translateY(-0.75rem); } to { opacity: 1; transform: none; } }

.meldung {
  --m-farbe: var(--farbe-info);
  --m-bg: var(--farbe-info-bg);
  --m-rand: var(--farbe-info-rand);
  --m-symbol: var(--symbol-info);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--abstand-sm) var(--abstand-md);
  align-items: start;
  padding: var(--abstand-md);
  border: 1px solid var(--m-rand);
  border-inline-start: 6px solid var(--m-farbe);
  border-radius: var(--radius-karte);
  background: var(--m-bg);
  color: var(--m-farbe);
  animation: meldung-gleiten var(--dauer-uebergang) var(--kurve) both;
}
.meldung::before {
  content: "";
  inline-size: 1.5rem;
  block-size: 1.5rem;
  background-color: currentColor;
  -webkit-mask: var(--m-symbol) center / contain no-repeat;
  mask: var(--m-symbol) center / contain no-repeat;
}
.meldung__inhalt { display: grid; gap: var(--abstand-xs); }
.meldung__titel { font-weight: 700; }
.meldung__text { margin: 0; }
.meldung__aktion { grid-column: 2; justify-self: start; }

.meldung--ok { --m-farbe: var(--farbe-ok); --m-bg: var(--farbe-ok-bg); --m-rand: var(--farbe-ok-rand); --m-symbol: var(--symbol-ok); }
.meldung--warn { --m-farbe: var(--farbe-warn); --m-bg: var(--farbe-warn-bg); --m-rand: var(--farbe-warn-rand); --m-symbol: var(--symbol-warn); }
.meldung--fehler { --m-farbe: var(--farbe-fehler); --m-bg: var(--farbe-fehler-bg); --m-rand: var(--farbe-fehler-rand); --m-symbol: var(--symbol-fehler); }
.meldung--notfall { --m-farbe: var(--farbe-notfall); --m-bg: var(--farbe-notfall-bg); --m-rand: var(--farbe-notfall-rand); --m-symbol: var(--symbol-notfall); }

/* Behaelter fuer meldung.zeigen(): oben mittig, sticht ueber den Inhalt */
.meldungen {
  position: fixed;
  inset-block-start: var(--abstand-md);
  inset-inline: var(--abstand-md);
  z-index: 900;
  display: grid;
  gap: var(--abstand-sm);
  justify-items: center;
  pointer-events: none;
}
.meldungen > .meldung { inline-size: 100%; max-inline-size: 36rem; pointer-events: auto; box-shadow: var(--schatten-schwebend); }

/* --- 22-zustand.css --- */
/* Lade-, Leer- und Fehlerzustand fuer Listen und Tabellen; Skelett mit sanftem Schimmer */
.zustand {
  display: grid;
  justify-items: center;
  gap: var(--abstand-sm);
  padding: var(--abstand-xl) var(--abstand-md);
  text-align: center;
  color: var(--farbe-text);
}
.zustand__symbol { color: var(--farbe-text-gedaempft); }
.zustand--fehler .zustand__symbol { color: var(--farbe-fehler); }
.zustand__titel { font-weight: 700; font-size: var(--schrift-gross); color: var(--farbe-marke); }
.zustand__text { margin: 0; max-inline-size: 28rem; color: var(--farbe-text-gedaempft); }
.zustand .knopf { margin-block-start: var(--abstand-sm); }

@keyframes schimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skelett {
  position: relative;
  overflow: hidden;
  display: block;
  min-block-size: 1rem;
  border-radius: var(--radius-feld);
  background: var(--farbe-neutral-bg);
}
.skelett::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--farbe-flaeche), transparent);
  opacity: 0.7;
  animation: schimmer var(--dauer-skeleton) var(--kurve) infinite;
}
.skelett--zeile { block-size: 1rem; }
.skelett--titel { block-size: 1.5rem; inline-size: 60%; }
.skelett--kurz { inline-size: 40%; }
.skelett--block { block-size: 5rem; }
@media (prefers-reduced-motion: reduce) {
  .skelett::after { animation: none; opacity: 0; }
}

/* --- 23-tabelle.css --- */
/* Tabelle: am Desktop echte Tabelle, unter 600 px gestapelte Karten. Jede Zelle braucht data-label. */
.tabelle-huelle { overflow-x: auto; }
.tabelle {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  overflow: hidden;
}
.tabelle caption { padding: var(--abstand-sm) 0; text-align: start; font-weight: 700; color: var(--farbe-marke); }
.tabelle th,
.tabelle td { padding: var(--abstand-sm) var(--abstand-md); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--farbe-linie); }
.tabelle thead th { background: var(--farbe-hell); color: var(--farbe-marke); font-weight: 700; font-size: var(--schrift-klein); }
.tabelle tbody tr:last-child td { border-block-end: 0; }
.tabelle tbody tr:hover { background: var(--farbe-hell); }
.tabelle__zahl { text-align: end; font-variant-numeric: tabular-nums; }

@media (max-width: 599.98px) {
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; }
  .tabelle { background: transparent; border: 0; }
  .tabelle thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tabelle tbody { display: grid; gap: var(--abstand-sm); }
  .tabelle tr {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
    padding: var(--abstand-sm) 0;
  }
  .tabelle td { display: grid; grid-template-columns: 9rem 1fr; gap: var(--abstand-sm); border: 0; padding-block: var(--abstand-xs); }
  .tabelle td::before { content: attr(data-label); font-size: var(--schrift-klein); font-weight: 700; color: var(--farbe-text-gedaempft); }
  .tabelle__zahl { text-align: start; }
}

/* --- 24-kopfzeile.css --- */
/* Kopfzeile: Petrol-Leiste mit Logo, Seitentitel, Zurueck und Abmelden (je mindestens 44 px) */
.kopfzeile {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--farbe-marke);
  color: var(--farbe-text-auf-marke);
}
.kopfzeile__innen {
  display: flex;
  align-items: center;
  gap: var(--abstand-md);
  min-block-size: 3.5rem;
  max-inline-size: calc(var(--breite-seite) + 2 * var(--abstand-md));
  margin-inline: auto;
  padding: var(--abstand-xs) var(--abstand-md);
}
.kopfzeile__logo {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
}
.kopfzeile__logo img { inline-size: 1.75rem; block-size: auto; display: block; }
.kopfzeile__titel {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
  font-family: var(--schriftart-ueberschrift);
  font-weight: 700;
  font-size: var(--schrift-gross);
  line-height: var(--zeilenhoehe-ueberschrift);
  color: var(--farbe-text-auf-marke);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopfzeile__link {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-sm);
  min-block-size: var(--tippflaeche);
  min-inline-size: var(--tippflaeche);
  padding-inline: var(--abstand-sm);
  border-radius: var(--radius-feld);
  color: var(--farbe-text-auf-marke);
  font-weight: 700;
  text-decoration: none;
}
.kopfzeile__link:hover { background: var(--farbe-marke-dunkel); color: var(--farbe-text-auf-marke); }
@media (max-width: 599.98px) {
  .kopfzeile__link-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.kopfzeile--statisch { position: static; }

/* --- 25-karte-badge-chip.css --- */
/* Karte, Badge (Status mit Text), Chip (filterbar, 3:1-Rand) */
.karte {
  display: grid;
  gap: var(--abstand-sm);
  align-content: start;
  padding: var(--abstand-md);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
  color: var(--farbe-text);
}
@media (min-width: 600px) {
  .karte { padding: var(--abstand-lg); }
}
.karte__titel { font-family: var(--schriftart-ueberschrift); font-weight: 700; font-size: var(--schrift-titel); line-height: var(--zeilenhoehe-ueberschrift); color: var(--farbe-marke); }
.karte__text { margin: 0; color: var(--farbe-text-gedaempft); }
.karte--link {
  text-decoration: none;
  transition: transform var(--dauer-uebergang) var(--kurve);
}
.karte--link:hover,
.karte--link.ist-hover { transform: translateY(-2px); border-color: var(--farbe-marke); color: var(--farbe-text); }
.karte--link:active { transform: scale(0.98); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  padding: 2px var(--abstand-sm);
  border-radius: var(--radius-rund);
  background: var(--farbe-info-bg);
  color: var(--farbe-info);
  font-size: var(--schrift-klein);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--ok { background: var(--farbe-ok-bg); color: var(--farbe-ok); }
.badge--warn { background: var(--farbe-warn-bg); color: var(--farbe-warn); }
.badge--fehler { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); }
.badge--notfall { background: var(--farbe-notfall-bg); color: var(--farbe-notfall); }
.badge--neutral { background: var(--farbe-neutral-bg); color: var(--farbe-neutral-text); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-sm);
  min-block-size: var(--tippflaeche);
  padding: var(--abstand-xs) var(--abstand-md);
  border: 2px solid var(--farbe-rand-steuerelement);
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: 700 var(--schrift-klein) / 1.2 var(--schriftart-text);
  cursor: pointer;
  transition: transform var(--dauer-druck) var(--kurve);
}
.chip:hover, .chip.ist-hover { border-color: var(--farbe-marke); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--farbe-marke); border-color: var(--farbe-marke); color: var(--farbe-text-auf-marke); }
.chip[aria-pressed="true"]::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--symbol-haken) center / contain no-repeat;
  mask: var(--symbol-haken) center / contain no-repeat;
}
.chip:disabled { background: var(--farbe-neutral-bg); border-color: var(--farbe-neutral-bg); color: var(--farbe-neutral-text); cursor: not-allowed; }

/* --- 30-systemseite.css --- */
/* Systemseite: gemeinsamer Aufbau fuer Anmeldung, Abmelden, Fehler, Offline, Erfolg, Wartung ... */
.systemseite {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--abstand-md);
  background: var(--farbe-bg);
}
.systemseite__karte {
  inline-size: 100%;
  max-inline-size: 28rem;
  display: grid;
  justify-items: center;
  gap: var(--abstand-md);
  padding: var(--abstand-xl) var(--abstand-lg);
  border: 1px solid var(--farbe-linie);
  border-block-start: 6px solid var(--farbe-marke);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
  text-align: center;
  animation: einblenden var(--dauer-einblenden) var(--kurve) both;
}
.systemseite__logo { inline-size: 5rem; block-size: auto; display: block; }
.systemseite__symbol {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-info-bg);
  color: var(--farbe-marke);
}
.systemseite--fehler .systemseite__symbol { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); }
.systemseite--fehler .systemseite__karte { border-block-start-color: var(--farbe-fehler); }
.systemseite--warn .systemseite__symbol { background: var(--farbe-warn-bg); color: var(--farbe-warn); }
.systemseite--warn .systemseite__karte { border-block-start-color: var(--farbe-warn); }
.systemseite--ok .systemseite__karte { border-block-start-color: var(--farbe-ok); }
.systemseite__titel { font-size: var(--schrift-seitentitel); }
.systemseite__text { margin: 0; color: var(--farbe-text-gedaempft); max-inline-size: 24rem; }
.systemseite__aktionen { display: grid; gap: var(--abstand-sm); inline-size: 100%; margin-block-start: var(--abstand-sm); }
.systemseite__status { margin: 0; font-size: var(--schrift-klein); color: var(--farbe-text-gedaempft); }

/* Warte-Anzeige: drei Punkte, die sanft nacheinander aufleuchten (nur opacity) */
@keyframes punkt { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.warten { display: inline-flex; gap: var(--abstand-sm); align-items: center; }
.warten > span {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-marke);
  animation: punkt 1200ms var(--kurve) infinite both;
}
.warten > span:nth-child(2) { animation-delay: 160ms; }
.warten > span:nth-child(3) { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .warten > span { animation: none; opacity: 1; }
}

/* Erfolgs-Haken: Kreis und Haken werden gezeichnet (Linienlaenge per dash), ruhig, ohne Konfetti */
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes haken-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
.haekchen { inline-size: 5rem; block-size: 5rem; display: block; animation: haken-pop var(--dauer-einblenden) var(--kurve) both; }
.haekchen__kreis,
.haekchen__strich {
  fill: none;
  stroke: var(--farbe-ok);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.haekchen__kreis { stroke-dasharray: 151; stroke-dashoffset: 151; animation: zeichnen var(--dauer-einblenden) var(--kurve) 100ms forwards; }
.haekchen__strich { stroke-dasharray: 36; stroke-dashoffset: 36; animation: zeichnen var(--dauer-uebergang) var(--kurve) 380ms forwards; }

/* Nur in der warmen Variante sichtbar (siehe warm/warm.css, Klasse thema-warm auf html) */
.nur-warm, .taube-erfolg { display: none; }

/* --- 90-muster.css --- */
/* Hilfen der Musterseite (Raster fuer Beispiele, Farbfelder). Nicht fuer Produktseiten gedacht. */
.muster-abschnitt { display: grid; gap: var(--abstand-md); padding-block: var(--abstand-lg); border-block-start: 1px solid var(--farbe-linie); scroll-margin-block-start: 4.5rem; }
.muster-abschnitt:first-of-type { border-block-start: 0; }
.muster-gruppe { display: grid; gap: var(--abstand-sm); }
.muster-gruppe > h3 { color: var(--farbe-text-gedaempft); font-size: var(--schrift-klein); text-transform: none; }
.muster-zeile { display: flex; flex-wrap: wrap; gap: var(--abstand-sm) var(--abstand-md); align-items: flex-start; }
.muster-beispiel { display: grid; gap: var(--abstand-xs); justify-items: start; }
.muster-beschriftung { font-size: var(--schrift-klein); color: var(--farbe-text-gedaempft); }
.muster-navigation { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); padding-block: var(--abstand-md); }
.muster-navigation a { display: inline-flex; align-items: center; min-block-size: var(--tippflaeche); padding-inline: var(--abstand-md); border: 2px solid var(--farbe-rand-steuerelement); border-radius: var(--radius-feld); color: var(--farbe-text); font-weight: 700; text-decoration: none; background: var(--farbe-flaeche); }
.muster-navigation a:hover { border-color: var(--farbe-marke); }
.muster-farbfeld { display: block; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-feld); border: 1px solid var(--farbe-rand-steuerelement); }
.muster-probe { display: inline-block; padding: var(--abstand-xs) var(--abstand-sm); border-radius: var(--radius-feld); border: 1px solid var(--farbe-linie); font-weight: 700; }
.muster-balken { display: block; block-size: 1rem; border-radius: var(--radius-feld); background: var(--farbe-marke); }
.muster-radius { display: block; inline-size: 4rem; block-size: 4rem; background: var(--farbe-info-bg); border: 2px solid var(--farbe-marke); }
.muster-radius--feld { border-radius: var(--radius-feld); }
.muster-radius--karte { border-radius: var(--radius-karte); }
.muster-radius--rund { border-radius: var(--radius-rund); }
.muster-schatten { display: block; inline-size: 8rem; block-size: 4rem; border-radius: var(--radius-karte); background: var(--farbe-flaeche); }
.muster-schatten--karte { box-shadow: var(--schatten-karte); }
.muster-schatten--schwebend { box-shadow: var(--schatten-schwebend); }
.muster-ja { color: var(--farbe-ok); font-weight: 700; }
.muster-nein { color: var(--farbe-fehler); font-weight: 700; }
.muster-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--schrift-klein); }
.muster-vorschau { inline-size: 100%; block-size: 26rem; border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte); background: var(--farbe-flaeche); }
.muster-text-klein { font-size: var(--schrift-klein); }
.muster-typ { margin: 0; color: var(--farbe-text); }
.muster-typ--klein { font-size: var(--schrift-klein); }
.muster-typ--text { font-size: var(--schrift-text); }
.muster-typ--gross { font-size: var(--schrift-gross); }
.muster-typ--titel { font-size: var(--schrift-titel); font-weight: 700; }
.muster-typ--seitentitel { font-size: var(--schrift-seitentitel); font-weight: 700; }
.muster-typ--haupttitel { font-size: var(--schrift-haupttitel); font-weight: 700; }
.muster-typ--display { font-size: var(--schrift-display); font-weight: 700; }

/* --- Hilfsklassen der Musterseite (erzeugt) --- */
.muster-farbe--marke { background-color: var(--farbe-marke); }
.muster-farbe--marke-dunkel { background-color: var(--farbe-marke-dunkel); }
.muster-farbe--link { background-color: var(--farbe-link); }
.muster-farbe--link-hover { background-color: var(--farbe-link-hover); }
.muster-farbe--akzent { background-color: var(--farbe-akzent); }
.muster-farbe--akzent-hover { background-color: var(--farbe-akzent-hover); }
.muster-farbe--akzent-text { background-color: var(--farbe-akzent-text); }
.muster-farbe--text { background-color: var(--farbe-text); }
.muster-farbe--text-gedaempft { background-color: var(--farbe-text-gedaempft); }
.muster-farbe--text-auf-marke { background-color: var(--farbe-text-auf-marke); }
.muster-farbe--bg { background-color: var(--farbe-bg); }
.muster-farbe--flaeche { background-color: var(--farbe-flaeche); }
.muster-farbe--hell { background-color: var(--farbe-hell); }
.muster-farbe--linie { background-color: var(--farbe-linie); }
.muster-farbe--rand-steuerelement { background-color: var(--farbe-rand-steuerelement); }
.muster-farbe--platzhalter { background-color: var(--farbe-platzhalter); }
.muster-farbe--fehler { background-color: var(--farbe-fehler); }
.muster-farbe--fehler-hover { background-color: var(--farbe-fehler-hover); }
.muster-farbe--fehler-bg { background-color: var(--farbe-fehler-bg); }
.muster-farbe--fehler-rand { background-color: var(--farbe-fehler-rand); }
.muster-farbe--ok { background-color: var(--farbe-ok); }
.muster-farbe--ok-bg { background-color: var(--farbe-ok-bg); }
.muster-farbe--ok-rand { background-color: var(--farbe-ok-rand); }
.muster-farbe--warn { background-color: var(--farbe-warn); }
.muster-farbe--warn-bg { background-color: var(--farbe-warn-bg); }
.muster-farbe--warn-rand { background-color: var(--farbe-warn-rand); }
.muster-farbe--notfall { background-color: var(--farbe-notfall); }
.muster-farbe--notfall-bg { background-color: var(--farbe-notfall-bg); }
.muster-farbe--notfall-rand { background-color: var(--farbe-notfall-rand); }
.muster-farbe--info { background-color: var(--farbe-info); }
.muster-farbe--info-bg { background-color: var(--farbe-info-bg); }
.muster-farbe--info-rand { background-color: var(--farbe-info-rand); }
.muster-farbe--neutral-bg { background-color: var(--farbe-neutral-bg); }
.muster-farbe--neutral-text { background-color: var(--farbe-neutral-text); }
.muster-farbe--fokus { background-color: var(--farbe-fokus); }
.muster-farbe--fokus-auf-marke { background-color: var(--farbe-fokus-auf-marke); }
.muster-farbe--scrim { background-color: var(--farbe-scrim); }
.muster-farbe--info-kopf-bg { background-color: var(--farbe-info-kopf-bg); }
.muster-farbe--info-linie { background-color: var(--farbe-info-linie); }
.muster-paar--0 { color: var(--farbe-text); background-color: var(--farbe-bg); }
.muster-paar--1 { color: var(--farbe-text); background-color: var(--farbe-flaeche); }
.muster-paar--2 { color: var(--farbe-text-gedaempft); background-color: var(--farbe-bg); }
.muster-paar--3 { color: var(--farbe-text-gedaempft); background-color: var(--farbe-flaeche); }
.muster-paar--4 { color: var(--farbe-platzhalter); background-color: var(--farbe-flaeche); }
.muster-paar--5 { color: var(--farbe-marke); background-color: var(--farbe-bg); }
.muster-paar--6 { color: var(--farbe-text-auf-marke); background-color: var(--farbe-marke); }
.muster-paar--7 { color: var(--farbe-text-auf-marke); background-color: var(--farbe-marke-dunkel); }
.muster-paar--8 { color: var(--farbe-link); background-color: var(--farbe-flaeche); }
.muster-paar--9 { color: var(--farbe-link); background-color: var(--farbe-bg); }
.muster-paar--10 { color: var(--farbe-link-hover); background-color: var(--farbe-info-bg); }
.muster-paar--11 { color: var(--farbe-akzent-text); background-color: var(--farbe-akzent); }
.muster-paar--12 { color: var(--farbe-akzent-text); background-color: var(--farbe-akzent-hover); }
.muster-paar--13 { color: var(--farbe-text-auf-marke); background-color: var(--farbe-fehler); }
.muster-paar--14 { color: var(--farbe-text-auf-marke); background-color: var(--farbe-fehler-hover); }
.muster-paar--15 { color: var(--farbe-fehler); background-color: var(--farbe-fehler-bg); }
.muster-paar--16 { color: var(--farbe-fehler); background-color: var(--farbe-flaeche); }
.muster-paar--17 { color: var(--farbe-ok); background-color: var(--farbe-ok-bg); }
.muster-paar--18 { color: var(--farbe-ok); background-color: var(--farbe-flaeche); }
.muster-paar--19 { color: var(--farbe-warn); background-color: var(--farbe-warn-bg); }
.muster-paar--20 { color: var(--farbe-warn); background-color: var(--farbe-flaeche); }
.muster-paar--21 { color: var(--farbe-notfall); background-color: var(--farbe-notfall-bg); }
.muster-paar--22 { color: var(--farbe-notfall); background-color: var(--farbe-flaeche); }
.muster-paar--23 { color: var(--farbe-info); background-color: var(--farbe-info-bg); }
.muster-paar--24 { color: var(--farbe-neutral-text); background-color: var(--farbe-neutral-bg); }
.muster-paar--25 { color: var(--farbe-rand-steuerelement); background-color: var(--farbe-flaeche); }
.muster-paar--26 { color: var(--farbe-rand-steuerelement); background-color: var(--farbe-bg); }
.muster-paar--27 { color: var(--farbe-fokus); background-color: var(--farbe-flaeche); }
.muster-paar--28 { color: var(--farbe-fokus); background-color: var(--farbe-bg); }
.muster-paar--29 { color: var(--farbe-fokus-auf-marke); background-color: var(--farbe-marke); }
.muster-abstand--xs { inline-size: var(--abstand-xs); }
.muster-abstand--sm { inline-size: var(--abstand-sm); }
.muster-abstand--md { inline-size: var(--abstand-md); }
.muster-abstand--lg { inline-size: var(--abstand-lg); }
.muster-abstand--xl { inline-size: var(--abstand-xl); }
.muster-abstand--xxl { inline-size: var(--abstand-xxl); }
.muster-abstand--xxxl { inline-size: var(--abstand-xxxl); }