/* ApoOpt Trading: Stylesheet im ApoOpt-CI (AUFTRAG Teil C Abschnitt 12).
   Keine Verlaeufe, keine Emojis, Schriften lokal. */

/* ---------- Schriften ---------- */
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../vendor/fonts/lato-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/carlito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../vendor/fonts/carlito-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/carlito-latin-700-normal.woff2") format("woff2"); }
/* Poppins steht dort, wo Century Gothic fehlt: auf dem Server (PDF und Abnahmebilder) und auf
   Rechnern ohne Office. Century Gothic gehoert Monotype und darf nicht mitgeliefert werden;
   dasselbe Muster wie Calibri mit Carlito. */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/poppins-latin-700-normal.woff2") format("woff2"); }

/* ---------- Farben und Masse ---------- */
:root {
  --dunkelblau: #2B4C6F;
  --dunkelblau-tief: #223D59;
  --pastell-dunkelblau: #5185AD;
  --pastell-hellblau: #5FA9DB;
  --hellblau: #A1CDE9;
  --flaeche-10: #F5F8FA;          /* Grund des Inhalts, damit weisse Karten darauf stehen */
  --flaeche-15: #F1F8FC;
  --nav-text: #5B7590;            /* ruhende Navigationspunkte, 4,78:1 auf Weiss */
  --nav-icon: #94AEC4;
  --flaeche-30: #E3F0F8;
  --weiss: #FFFFFF;
  --text: var(--dunkelblau);
  --text-leise: #5B7590;          /* 4,78:1 auf Weiss, nur auf weissem Grund */
  --linie: #D5E4EF;
  --linie-stark: #A1CDE9;
  --gruen: #3E8E6B;
  --gelb: #C98A1B;
  --rot: #B5524A;
  --gruen-flaeche: #EAF4EF;
  --gelb-flaeche: #FBF3E4;
  --rot-flaeche: #F8ECEA;

  /* Century Gothic zuerst: auf den Arbeitsrechnern liegt sie mit Office vor. Ueberall sonst
     Poppins, die naechste freie Verwandte (geometrisch, einstoeckiges a). */
  --schrift-titel: "Century Gothic", "Poppins", "Segoe UI", sans-serif;
  --schrift-auszeichnung: "Century Gothic", "Poppins", "Segoe UI", sans-serif;
  --schrift-text: Calibri, Carlito, "Segoe UI", sans-serif;

  --radius-karte: 12px;
  --radius-feld: 8px;
  --radius-klein: 6px;
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --schatten: 0 1px 2px rgba(43, 76, 111, 0.06);
  --navbreite: 248px;
  --navbreite-eng: 72px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--weiss); color: var(--text);
  font-family: var(--schrift-text); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--schrift-titel); color: var(--dunkelblau); line-height: 1.25; margin: 0 0 var(--abstand-3); }
h1 { font-size: 1.625rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.0625rem; font-weight: 600; }
h4 {
  font-family: var(--schrift-auszeichnung); font-weight: 700; font-size: 0.9375rem;
  margin: 0 0 var(--abstand-2); color: var(--dunkelblau);
}
p { margin: 0 0 var(--abstand-3); }
small, .klein { font-size: 0.875rem; }
.leise { color: var(--text-leise); }
code, pre, .mono { font-family: ui-monospace, "DejaVu Sans Mono", Menlo, monospace; font-size: 0.875rem; }
pre { background: var(--flaeche-15); border: 1px solid var(--linie); border-radius: var(--radius-feld);
  padding: var(--abstand-3); overflow: auto; max-height: 480px; white-space: pre-wrap; word-break: break-all; }
a { color: var(--dunkelblau); text-decoration: underline; text-decoration-color: var(--pastell-hellblau);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--flaeche-30); text-decoration-color: var(--dunkelblau); }
:focus-visible { outline: 2px solid var(--dunkelblau); outline-offset: 2px; box-shadow: 0 0 0 5px var(--hellblau); }
img { max-width: 100%; }
.zahl, td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
[x-cloak] { display: none !important; }
/* Alpine schaltet ueber Klassen, nicht ueber Inline-Styles: die CSP erlaubt style-src nur 'self'. */
.versteckt { display: none !important; }
hr { border: 0; border-top: 1px solid var(--linie); margin: var(--abstand-5) 0; }

/* ---------- Seitengeruest ---------- */
.rahmen { display: grid; grid-template-columns: var(--navbreite) 1fr; min-height: 100vh; }
.rahmen.eng { grid-template-columns: var(--navbreite-eng) 1fr; }
/* Weiss statt blau getoent: die Marke traegt das Blau, die Flaeche muss es nicht wiederholen.
   Die Haarlinie rechts ist ein echter Rahmen, kein Schatten: ein Schatten liegt neben der
   Leiste, also im Hauptbereich, und dessen Hintergrund malt darueber. Sichtbar blieb er nur,
   solange ein Rollbalken die Kante ohnehin zeichnete. */
.seitennav {
  background: var(--weiss);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden;
}
/* Die Kante zum Inhalt traegt nicht die Leiste, sondern was unter dem Kopfband liegt: im Band
   selbst soll keine senkrechte Linie zwischen Marke und Brotkrumen stehen. */
.nav-rollbereich, .nav-fuss { border-right: 1px solid var(--linie); }
/* Gerollt werden nur die Punkte. Wuerde die ganze Leiste rollen, schoebe sich die Marke neben
   der Kopfzeile nach oben und das Band oben waere unterbrochen. */
.nav-rollbereich {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--linie) transparent;
}
/* Die Marke ist der linke Teil des Kopfbands: gleiche Hoehe und gleiche Linie wie die
   Kopfzeile, damit das Band oben ueber die volle Breite durchlaeuft. Logo und Produktwort
   stehen dafuer nebeneinander, gestapelt passen sie nicht in 64 Pixel. */
.marke {
  display: flex; align-items: center; gap: var(--abstand-3); min-height: 64px;
  padding: 0 var(--abstand-4); border-bottom: 1px solid var(--linie); text-decoration: none;
}
.marke:hover { background: transparent; }
.marke img { display: block; height: 30px; width: auto; }
.marke .marke-produkt {
  font-family: var(--schrift-auszeichnung); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--nav-icon);
}
.marke .marke-zeichen { display: none; height: 30px; }
.rahmen.eng .marke { padding: 0; justify-content: center; }
.rahmen.eng .marke .marke-voll, .rahmen.eng .marke .marke-produkt { display: none; }
.rahmen.eng .marke .marke-zeichen { display: inline-block; }

/* Die Rinne links traegt die Punktmarke der aktuellen Seite. Sie braucht Platz, sonst klebt
   der Punkt an der Pille. */
.nav-gruppe { padding: var(--abstand-1) var(--abstand-3); }
.nav-gruppe-titel {
  font-family: var(--schrift-auszeichnung); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--nav-text);
  /* Links buendig mit den Symbolen darunter, rechts bleibt der Pfeil am Rand. */
  padding: var(--abstand-3) var(--abstand-3) var(--abstand-2) var(--abstand-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2);
  width: 100%; background: transparent; border: 0; border-radius: var(--radius-feld);
  cursor: pointer; text-align: left;
}
.nav-gruppe-titel:hover { color: var(--dunkelblau); }
.nav-gruppe-pfeil { flex: 0 0 14px; width: 14px; height: 14px; }
/* Zugeklappt zeigt der Pfeil nach rechts. Keine Drehung ueber Inline-Stil (CSP), sondern per Klasse. */
.nav-gruppe-pfeil.zu { transform: rotate(-90deg); }
.nav-gruppe-punkte { display: flex; flex-direction: column; }
.nav-gruppe-punkte.zugeklappt { display: none; }
/* Ein Punkt ist eine Pille mit Luft darum, kein Balken ueber die volle Breite. Die aktuelle
   Seite traegt zusaetzlich einen Punkt am Rand, damit sie auch ohne Farbe zu erkennen ist. */
.nav-link {
  position: relative; display: flex; align-items: center; gap: var(--abstand-3);
  min-height: 40px; padding: 0 var(--abstand-3); margin: 1px var(--abstand-2);
  border-radius: var(--radius-feld); text-decoration: none; color: var(--nav-text);
  font-family: var(--schrift-auszeichnung); font-size: 0.9375rem;
}
.nav-link:hover { background: var(--flaeche-15); color: var(--dunkelblau); }
.nav-link[aria-current="page"] { background: var(--flaeche-30); color: var(--dunkelblau); font-weight: 700; }
/* Der Punkt steht mittig in der Rinne: sieben Pixel Luft zum Rand, sieben zur Pille. */
.nav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -13px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pastell-hellblau);
}
.nav-link .nav-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--nav-icon); }
.nav-link:hover .nav-icon, .nav-link[aria-current="page"] .nav-icon { color: var(--pastell-dunkelblau); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rahmen.eng .nav-gruppe-titel, .rahmen.eng .nav-link .nav-text { display: none; }
/* In der schmalen Navigation gibt es keinen Gruppentitel zum Anklicken. Dort stehen alle
   Gruppen offen, sonst waeren ihre Punkte nicht mehr erreichbar. */
.rahmen.eng .nav-gruppe-punkte.zugeklappt { display: flex; }
.rahmen.eng .nav-link .nav-icon { flex: 0 0 24px; width: 24px; height: 24px; }
.rahmen.eng .nav-link { justify-content: center; padding: 8px 0; }
.nav-fuss { margin-top: auto; padding: var(--abstand-3) var(--abstand-2) var(--abstand-4); }
/* Ein Schalter, kein Knopf: er soll nicht mit den Navigationspunkten um Aufmerksamkeit ringen. */
.nav-umschalter {
  width: 100%; background: transparent; border: 0; border-radius: var(--radius-feld);
  padding: 8px var(--abstand-3); text-align: left;
  font-family: var(--schrift-auszeichnung); font-size: 0.8125rem; color: var(--nav-text); cursor: pointer;
}
.nav-umschalter:hover { background: var(--flaeche-15); color: var(--dunkelblau); }

.seitennav .nav-mobil { display: none; }
.hauptbereich { min-width: 0; display: flex; flex-direction: column; }
/* Genau ein Rollbalken: Navigation, Kopfzeile und Seitenkopf stehen fest, gerollt wird der
   Inhalt. Vorher rollte die Tabelle in sich und die Seite daneben, zwei Balken nebeneinander. */
@media (min-width: 1024px) {
  body.anwendung { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body.anwendung .rahmen { flex: 1; min-height: 0; }
  body.anwendung .hauptbereich { min-height: 0; }
  body.anwendung .seitennav { position: static; height: 100%; }
  body.anwendung .inhalt { flex: 1; min-height: 0; overflow: auto; }
}
.kopfzeile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4);
  padding: var(--abstand-3) var(--abstand-6); border-bottom: 1px solid var(--linie); background: var(--weiss);
  min-height: 64px;
  /* Bleibt beim Blaettern langer Tabellen stehen; die Seitennavigation ist schon sticky. */
  position: sticky; top: 0; z-index: 20;
}

/* ---------- Brotkrumen ---------- */
.brotkrumen { min-width: 0; }
.brotkrumen ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--schrift-auszeichnung); font-size: 0.875rem; color: var(--text-leise);
}
.brotkrumen li { display: flex; align-items: center; gap: var(--abstand-2); }
.brotkrumen li + li::before { content: "\203A"; color: var(--linie); }
.brotkrumen a { color: var(--text-leise); text-decoration: none; border-bottom: 1px solid transparent; }
.brotkrumen a:hover { color: var(--dunkelblau); border-bottom-color: var(--pastell-hellblau); }
.brotkrumen [aria-current="page"] span { color: var(--dunkelblau); font-weight: 700; }

/* ---------- Nutzermenue ---------- */
.nutzermenue { position: relative; flex: 0 0 auto; }
.nutzermenue > summary {
  display: flex; align-items: center; gap: var(--abstand-2); cursor: pointer; list-style: none;
  padding: 6px var(--abstand-3); border: 1px solid var(--linie); border-radius: 999px;
  font-family: var(--schrift-auszeichnung); font-size: 0.875rem; color: var(--dunkelblau); background: var(--weiss);
}
.nutzermenue > summary::-webkit-details-marker { display: none; }
.nutzermenue > summary:hover { background: var(--flaeche-15); }
.nutzermenue > summary:focus-visible { outline: 2px solid var(--pastell-hellblau); outline-offset: 2px; }
.nutzermenue .nutzer-icon { width: 22px; height: 22px; color: var(--pastell-dunkelblau); }
.nutzermenue .nutzer-name { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nutzermenue .nutzer-pfeil { transform: rotate(90deg); color: var(--text-leise); }
.nutzermenue[open] > summary { background: var(--flaeche-15); }
.nutzermenue[open] .nutzer-pfeil { transform: rotate(-90deg); }
.nutzermenue-inhalt {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 15rem; z-index: 30;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte);
  box-shadow: 0 6px 18px rgba(43, 76, 111, 0.12); padding: var(--abstand-2);
}
.nutzermenue-kopf { margin: 0 0 var(--abstand-2); padding: var(--abstand-2) var(--abstand-3); border-bottom: 1px solid var(--linie); }
.nutzermenue-inhalt a, .nutzermenue-inhalt button {
  display: flex; align-items: center; gap: var(--abstand-3); width: 100%;
  padding: 8px var(--abstand-3); border: 0; background: transparent; border-radius: var(--radius-feld);
  font-family: var(--schrift-auszeichnung); font-size: 0.9375rem; color: var(--dunkelblau);
  text-decoration: none; text-align: left; cursor: pointer;
}
.nutzermenue-inhalt a:hover, .nutzermenue-inhalt button:hover { background: var(--flaeche-15); }
.nutzermenue-inhalt svg { width: 20px; height: 20px; color: var(--pastell-dunkelblau); }
.nutzermenue-inhalt form { margin: 0; }
.inhalt { width: 100%; background: var(--flaeche-10); }
.inhalt-spalte { padding: var(--abstand-5) var(--abstand-6) var(--abstand-7); max-width: 1600px; width: 100%; }
/* Der Seitenkopf steht zwischen Kopfzeile und Inhalt und rollt nicht mit: Titel und die
   Aktionen der Seite bleiben sichtbar, auch weit unten in einer langen Tabelle. */
.seitenkopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--abstand-4);
  flex-wrap: wrap; padding: var(--abstand-4) var(--abstand-6); background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf h1 { margin: 0; font-size: 1.5rem; }
.seitenkopf .untertitel { margin: var(--abstand-1) 0 0; color: var(--text-leise); font-size: 0.9375rem; }
.aktionen { display: flex; gap: var(--abstand-2); flex-wrap: wrap; align-items: center; }

.banner-impersonation {
  background: var(--gelb); color: #1F1A10; font-family: var(--schrift-auszeichnung); font-weight: 700;
  padding: var(--abstand-2) var(--abstand-6); display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-4);
  border-bottom: 3px solid #8A5E12; position: sticky; top: 0; z-index: 30;
}
.banner-impersonation form { margin: 0; }
.banner-hinweis {
  background: var(--flaeche-30); border-bottom: 1px solid var(--linie-stark); padding: var(--abstand-2) var(--abstand-6);
  font-family: var(--schrift-auszeichnung); font-size: 0.875rem;
}

/* ---------- Karten und Raster ---------- */
.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte);
  padding: var(--abstand-5); box-shadow: var(--schatten); margin-bottom: var(--abstand-5);
}
.karte-kopf { display: flex; justify-content: space-between; 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; background: var(--flaeche-15); }
.karte.eng { padding: var(--abstand-4); }
.raster { display: grid; gap: var(--abstand-4); }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kennzahl { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: var(--abstand-4) var(--abstand-5); }
.kennzahl-titel { font-family: var(--schrift-auszeichnung); font-size: 0.8125rem; color: var(--text-leise); margin-bottom: var(--abstand-1); }
.kennzahl-wert { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.kennzahl-zusatz { font-size: 0.875rem; color: var(--text-leise); }

/* ---------- Tabellen ---------- */
/* Kein eigener Rollbalken mehr: gerollt wird der Inhalt, die Spaltenkoepfe kleben an dessen
   oberem Rand. `overflow` bleibt sichtbar, sonst waere der Rahmen der Rollbereich und `sticky`
   haette nichts, woran es kleben kann. */
.tabelle-rahmen { border: 1px solid var(--linie); border-radius: var(--radius-karte); background: var(--weiss); }
.tabelle-rahmen.frei { max-height: none; }
table.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.tabelle th {
  position: sticky; top: 0; z-index: 2; background: var(--flaeche-15); text-align: left;
  font-family: var(--schrift-auszeichnung); font-weight: 700; font-size: 0.8125rem; color: var(--dunkelblau);
  padding: 10px var(--abstand-3); border-bottom: 1px solid var(--linie-stark); white-space: nowrap;
}
.tabelle td { padding: 11px var(--abstand-3); border-bottom: 1px solid var(--linie); vertical-align: middle; }
/* Der Rahmen kann nicht runden, weil er nichts abschneidet; also runden die Eckzellen selbst. */
.tabelle thead th:first-child { border-top-left-radius: var(--radius-karte); }
.tabelle thead th:last-child { border-top-right-radius: var(--radius-karte); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--flaeche-15); }
.tabelle tr.hervorgehoben td { background: var(--flaeche-30); }
.tabelle tr.ausgegraut td { color: var(--text-leise); }
.tabelle td.aktion { text-align: right; white-space: nowrap; width: 1%; }
.tabelle tfoot td { font-weight: 700; background: var(--flaeche-15); border-top: 1px solid var(--linie-stark); }
.tabelle-kompakt td, .tabelle-kompakt th { padding: 6px var(--abstand-2); }
/* Zahlenspalten: auch der Kopf steht rechts, sonst laufen Kopf und Werte auseinander. */
.tabelle th.zahl { text-align: right; }

/* ---------- Formulare ---------- */
form { margin: 0; }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--abstand-4); }
.feld label, .feld .beschriftung { font-family: var(--schrift-auszeichnung); font-weight: 700; font-size: 0.875rem; }
.feld .hilfe { font-size: 0.8125rem; color: var(--text-leise); }
.feld .fehlertext { font-size: 0.875rem; color: var(--rot); font-weight: 700; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: var(--rot); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
input[type="time"], input[type="search"], input[type="file"], select, textarea {
  font-family: var(--schrift-text); font-size: 1rem; color: var(--text); background: var(--weiss);
  border: 1px solid #B9CFDF; border-radius: var(--radius-feld); padding: 9px 12px; width: 100%; min-height: 42px;
}
select {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235185AD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px 18px;
}
input[type="number"] { font-variant-numeric: tabular-nums; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--dunkelblau); }
input[disabled], select[disabled], textarea[disabled] { background: var(--flaeche-15); color: var(--text-leise); }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--abstand-4); }
.auswahl { display: flex; align-items: center; gap: var(--abstand-2); font-family: var(--schrift-text); font-weight: 400; }
.auswahl input { width: 18px; height: 18px; accent-color: var(--dunkelblau); }
.filterleiste {
  display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: flex-end;
  margin-bottom: var(--abstand-5); padding: var(--abstand-4);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte);
}
.filterleiste .feld { margin-bottom: 0; min-width: 160px; flex: 1 1 160px; }
/* In der Filterleiste ist die Beschriftung eine Aufschrift, keine Ueberschrift. */
.filterleiste .feld label { font-family: var(--schrift-auszeichnung); font-weight: 400; font-size: 0.8125rem; color: var(--text-leise); }
.filterleiste .knopf { min-height: 42px; }
.formular-fuss { display: flex; gap: var(--abstand-2); justify-content: flex-end; margin-top: var(--abstand-5); padding-top: var(--abstand-4); border-top: 1px solid var(--linie); }

/* ---------- Schaltflaechen ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2);
  font-family: var(--schrift-titel); font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
  padding: 10px 20px; border-radius: var(--radius-feld); border: 1px solid var(--dunkelblau);
  background: var(--dunkelblau); color: var(--weiss); cursor: pointer; text-decoration: none; min-height: 42px;
}
.knopf:hover { background: var(--dunkelblau-tief); color: var(--weiss); }
.knopf.zweit { background: var(--weiss); color: var(--dunkelblau); border-color: #B9CFDF; }
.knopf.zweit:hover { background: var(--flaeche-30); border-color: var(--dunkelblau); }
.knopf.still { background: transparent; border-color: transparent; color: var(--dunkelblau); text-decoration: underline; text-decoration-color: var(--pastell-hellblau); }
.knopf.still:hover { background: var(--flaeche-30); }
.knopf.gefahr { background: var(--rot); border-color: var(--rot); }
.knopf.gefahr:hover { background: #963F38; }
.knopf.klein { padding: 5px 12px; font-size: 0.8125rem; min-height: 32px; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Markierungen ---------- */
.marker {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px;
  font-family: var(--schrift-auszeichnung); font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
  background: var(--flaeche-30); color: var(--dunkelblau); border: 1px solid var(--linie-stark);
}
.marker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pastell-dunkelblau); }
.marker.gruen { background: var(--gruen-flaeche); border-color: #B7D8C8; }
.marker.gruen::before { background: var(--gruen); }
.marker.gelb { background: var(--gelb-flaeche); border-color: #EAD2A6; }
.marker.gelb::before { background: var(--gelb); }
.marker.rot { background: var(--rot-flaeche); border-color: #E3BDB8; }
.marker.rot::before { background: var(--rot); }
.marker.grau { background: #F2F4F6; border-color: #D6DCE2; }
.marker.grau::before { background: #8A9AAA; }
/* Herkunftsnotiz, kein Status: leise und ohne Punkt, damit die farbigen Marker ihre
   Bedeutung behalten. Drei gleich laute Zeichen je Zeile waren einer zu viel. */
.marker.dummy {
  background: transparent; border-color: transparent; color: var(--text-leise);
  font-weight: 400; font-size: 0.75rem; padding: 2px 6px;
}
.marker.dummy::before { display: none; }

/* ---------- Meldungen ---------- */
.meldung { border-radius: var(--radius-feld); padding: var(--abstand-3) var(--abstand-4); margin-bottom: var(--abstand-4);
  border: 1px solid var(--linie-stark); border-left-width: 4px; background: var(--flaeche-15); }
.meldung.erfolg { border-color: #B7D8C8; border-left-color: var(--gruen); background: var(--gruen-flaeche); }
.meldung.warnung { border-color: #EAD2A6; border-left-color: var(--gelb); background: var(--gelb-flaeche); }
.meldung.fehler { border-color: #E3BDB8; border-left-color: var(--rot); background: var(--rot-flaeche); }
.meldung p:last-child { margin: 0; }
.leerzustand { text-align: center; padding: var(--abstand-7) var(--abstand-5); border: 1px dashed var(--linie-stark); border-radius: var(--radius-karte); background: var(--weiss); }
.leerzustand h3 { margin-bottom: var(--abstand-2); }
.leerzustand p { color: var(--text-leise); max-width: 520px; margin: 0 auto var(--abstand-4); }

/* ---------- Dialog und Aufklapper ---------- */
dialog.dialog { border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: 0; width: min(560px, 92vw); color: var(--text); box-shadow: 0 12px 32px rgba(43, 76, 111, 0.18); }
dialog.dialog::backdrop { background: rgba(43, 76, 111, 0.35); }
.dialog-kopf { padding: var(--abstand-4) var(--abstand-5); border-bottom: 1px solid var(--linie); }
.dialog-kopf h2 { margin: 0; }
.dialog-inhalt { padding: var(--abstand-5); }
.dialog-fuss { padding: var(--abstand-3) var(--abstand-5); border-top: 1px solid var(--linie); display: flex; justify-content: flex-end; gap: var(--abstand-2); background: var(--flaeche-15); }
details.aufklapper { border: 1px solid var(--linie); border-radius: var(--radius-feld); background: var(--weiss); }
details.aufklapper > summary { cursor: pointer; padding: var(--abstand-2) var(--abstand-3); font-family: var(--schrift-auszeichnung); font-weight: 700; font-size: 0.875rem; }
details.aufklapper[open] > summary { border-bottom: 1px solid var(--linie); }
details.aufklapper > .aufklapper-inhalt { padding: var(--abstand-3); }

/* ---------- Reiter und Seitenwechsel ---------- */
.reiter { display: flex; gap: var(--abstand-1); border-bottom: 1px solid var(--linie); margin-bottom: var(--abstand-5); flex-wrap: wrap; }
.reiter a { padding: var(--abstand-2) var(--abstand-4); text-decoration: none; font-family: var(--schrift-auszeichnung); font-size: 0.9375rem; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.reiter a[aria-current="page"] { border-bottom-color: var(--pastell-hellblau); font-weight: 700; }
.seitenwechsel { display: flex; justify-content: space-between; align-items: center; margin-top: var(--abstand-3); font-family: var(--schrift-auszeichnung); font-size: 0.875rem; }
.seitenwechsel .aktionen a { text-decoration: none; }

/* ---------- Anmeldeseite ---------- */
.anmeldung { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.anmeldung-bild { position: relative; background: var(--dunkelblau) url("../img/hero-pharmacy.JPG") center / cover no-repeat; }
.anmeldung-bild::after { content: ""; position: absolute; inset: 0; background: rgba(43, 76, 111, 0.78); }
.anmeldung-bild-inhalt { position: relative; z-index: 1; color: var(--weiss); padding: var(--abstand-7); height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.anmeldung-bild-inhalt img { height: 52px; width: auto; }
.anmeldung-bild-inhalt p { font-family: var(--schrift-auszeichnung); font-size: 1.125rem; max-width: 420px; color: var(--weiss); }
.anmeldung-formular { display: flex; align-items: center; justify-content: center; padding: var(--abstand-6); }
.anmeldung-formular .karte { width: 100%; max-width: 420px; box-shadow: none; }
.anmeldung-produkt { font-family: var(--schrift-auszeichnung); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.875rem; color: var(--hellblau); margin-top: var(--abstand-2); }

/* ---------- Einfache Seiten ---------- */
.seite-schlicht { background: var(--flaeche-15); }
.fehlerseite { max-width: 560px; margin: 12vh auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: var(--abstand-6); }
.fehlerseite-logo { height: 40px; margin-bottom: var(--abstand-5); }
.schlicht-inhalt { max-width: 760px; margin: var(--abstand-6) auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: var(--abstand-6); }

/* ---------- Diagramme und Stilseite ---------- */
.diagramm { position: relative; height: 280px; }
.farbfeld { border-radius: var(--radius-feld); border: 1px solid var(--linie); overflow: hidden; }
.farbfeld-flaeche { height: 64px; }
.farbfeld-text { padding: var(--abstand-2) var(--abstand-3); font-size: 0.8125rem; }
.stil-abschnitt { margin-bottom: var(--abstand-7); }
.htmx-indicator { opacity: 0; transition: opacity 150ms; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1023px) {
  .rahmen, .rahmen.eng { grid-template-columns: 1fr; }
  .seitennav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; }
  /* Hier ist die Leiste eine Zeile. Die Huelle faellt aus dem Umbruch heraus, sonst draengt sie
     als leerer Block voller Breite den Menueknopf in die naechste Zeile. */
  .nav-rollbereich { display: contents; }
  .marke { border-bottom: 0; }
  .nav-gruppe { display: none; }
  .seitennav.offen .nav-gruppe { display: block; width: 100%; }
  .nav-fuss { display: none; }
  .seitennav .nav-mobil { display: inline-flex; margin: 0 var(--abstand-4) 0 auto; }
  .kopfzeile, .inhalt-spalte, .banner-impersonation, .banner-hinweis { padding-left: var(--abstand-4); padding-right: var(--abstand-4); }
  /* Auf schmalen Schirmen rollt die Seite selbst. Bliebe die Kopfzeile stehen, schoebe sich der
     klebende Spaltenkopf darunter, und der Platz nach oben ist hier ohnehin knapp. */
  .kopfzeile { position: static; }
  .seitenkopf { padding-left: var(--abstand-4); padding-right: var(--abstand-4); }
  .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anmeldung { grid-template-columns: 1fr; }
  .anmeldung-bild { min-height: 180px; }
  .anmeldung-bild-inhalt { padding: var(--abstand-5); }
}
@media (max-width: 640px) {
  .raster-2, .raster-3, .raster-4 { grid-template-columns: 1fr; }
  .seitenkopf { align-items: flex-start; }
}
@media print {
  .seitennav, .kopfzeile, .banner-hinweis, .aktionen, .knopf { display: none !important; }
  .rahmen { display: block; }
  .tabelle-rahmen { max-height: none; overflow: visible; }
}
.farbe-1 { background: #2B4C6F; } .farbe-2 { background: #5185AD; } .farbe-3 { background: #5FA9DB; }
.farbe-4 { background: #A1CDE9; } .farbe-5 { background: #F1F8FC; } .farbe-6 { background: #E3F0F8; }
.farbe-7 { background: #5B7590; } .farbe-8 { background: #3E8E6B; } .farbe-9 { background: #C98A1B; }
.farbe-10 { background: #B5524A; }
.stil-abschnitt .raster-2 { margin-top: var(--abstand-4); }
.schlicht-inhalt.schmal { max-width: 520px; }
.schlicht-inhalt.breit { max-width: 880px; }
.marke-schlicht { display: inline-flex; flex-direction: column; text-decoration: none; margin-bottom: var(--abstand-5); }
.marke-schlicht:hover { background: transparent; }
.marke-schlicht img { height: 40px; width: auto; }
.marke-schlicht span { font-family: var(--schrift-auszeichnung); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pastell-dunkelblau); padding-left: 44px; }
.fusszeile-schlicht, .fusszeile-anmeldung { text-align: center; padding: var(--abstand-4); font-family: var(--schrift-auszeichnung); font-size: 0.8125rem; }
.fusszeile-schlicht a, .fusszeile-anmeldung a { margin: 0 var(--abstand-2); }
.fusszeile-anmeldung { position: fixed; bottom: 0; right: 0; width: 47%; }
.knopf.voll { width: 100%; margin-top: var(--abstand-2); }
.anmeldung-links { margin-top: var(--abstand-4); font-family: var(--schrift-auszeichnung); font-size: 0.9375rem; }
.abmelden-schlicht { margin-top: var(--abstand-4); text-align: right; }
@media (max-width: 1023px) { .fusszeile-anmeldung { position: static; width: auto; } }
.raster-nutzer { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
.umbruch { word-break: break-all; }
@media (max-width: 1023px) { .raster-nutzer { grid-template-columns: 1fr; } }
.schmal-karte { max-width: 560px; }
.qr { display: block; margin: var(--abstand-3) 0; border: 1px solid var(--linie); border-radius: var(--radius-feld); }
ol.schritte { padding-left: 20px; }
ol.schritte li { margin-bottom: var(--abstand-2); }
.raster-detail { grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); align-items: start; }
.feld-breit { grid-column: 1 / -1; }
.feld-bool { justify-content: flex-end; }
@media (max-width: 1023px) { .raster-detail { grid-template-columns: 1fr; } }
ul.liste-schlicht { list-style: none; padding: 0; margin: 0; }
ul.liste-schlicht li { padding: var(--abstand-2) 0; border-bottom: 1px solid var(--linie); }
ul.liste-schlicht li:last-child { border-bottom: 0; }
.zeile-zahl { display: flex; justify-content: space-between; }
.inhalt > .raster, .stil-abschnitt > .raster { margin-bottom: var(--abstand-5); }
.massen { margin-top: var(--abstand-5); }
.marker.grau::before { background: #8A9AAA; }
dl.werteliste { display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-2) var(--abstand-4); margin: 0; }
dl.werteliste dt { font-family: var(--schrift-auszeichnung); font-weight: 700; font-size: 0.875rem; }
dl.werteliste dd { margin: 0; }

/* ---------- Portal: Suche und Erklaerung ---------- */
.feld.feld-breit { min-width: 320px; flex: 1; }
.erklaerung { margin-top: var(--abstand-4); border: 1px solid var(--linie); border-radius: var(--radius-karte); background: var(--flaeche-15); }
.erklaerung > summary { cursor: pointer; padding: var(--abstand-3) var(--abstand-4); font-family: var(--schrift-auszeichnung); font-weight: 700; }
.erklaerung > summary:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 2px; }
.erklaerung-inhalt { padding: 0 var(--abstand-4) var(--abstand-4); }
.erklaerungsliste { margin: var(--abstand-3) 0 0; padding-left: var(--abstand-5); display: grid; gap: var(--abstand-2); }
.nur-vorleser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.menge-feld { width: 88px; text-align: right; }
/* Ersatz fuer die abgeschalteten htmx-Indikator-Styles (siehe base.html). */
.htmx-indicator { opacity: 0; visibility: hidden; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; visibility: visible; transition: opacity 200ms ease-in; }

/* Entscheidung ueber einen Konditionsantrag: Ablehnung mit Grund links, Freigabe rechts. */
.entscheidung { display: flex; flex-wrap: wrap; gap: var(--abstand-4); align-items: flex-end; justify-content: space-between; margin-top: var(--abstand-4); }
.entscheidung form { display: flex; gap: var(--abstand-3); align-items: flex-end; }
.entscheidung .feld { margin: 0; min-width: 18rem; }

/* Symbolprobe auf der Stilseite. */
.symbolprobe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }
.symbolprobe-feld {
  display: inline-flex; align-items: center; gap: var(--abstand-2);
  border: 1px solid var(--linie); border-radius: var(--radius-feld); padding: 6px var(--abstand-3);
  font-family: var(--schrift-auszeichnung); font-size: 0.8125rem; color: var(--text-leise);
}