/* Wirtschaftskalender -- Farben, Layout, Tabelle, Filterleiste, Dunkelmodus.
 * PROMPT-oeffentlicher-wirtschaftskalender.md, Abschnitt 3. Alle Farben als
 * CSS-Variablen auf :root, im Dunkelmodus ueberschrieben -- nie eine Farbe
 * nur innerhalb eines Media-Query-Blocks definieren (Abschnitt 3.11). */

:root {
  --k-akzent: #b2dd4c;
  --k-akzent-hell: #cde98a; /* heller als --k-akzent, fuer :hover -- damit sich
    Mouseover (hell) optisch vom aktiven Zustand (--k-akzent, kraeftiger)
    unterscheidet */
  --k-grund: #ffffff;
  --k-grund-zart: #f2f4f6;
  --k-text: #303030;
  --k-text-gedaempft: #797979;
  --k-linie: #c9ccd4;
  --k-warnton: #ff8a4a;
  --k-spark-ist: #2f6fed; /* Sparkline "Ist"-Linie -- vom Gruen-Akzent
    abgesetzt, damit Ist/Prognose auch ohne Legende unterscheidbar bleiben */

  /* Wichtigkeit (Abschnitt 3.3) -- 1:1 aus trade_companion/econ_calendar.py::_IMPACT_STYLE */
  --k-hoch-vg: #c0392b;   --k-hoch-hg: #fbeaea;
  --k-mittel-vg: #a8890a; --k-mittel-hg: #faf3df;
  --k-niedrig-vg: #888888; --k-niedrig-hg: #f2f2f2;
  --k-ohne-vg: #9a9a9a;   --k-ohne-hg: transparent;

  /* Ist-Wert-Faerbung (Abschnitt 3.5) */
  --k-gruen: #2e7d32;
  --k-rot: #c0392b;

  --k-heute-streifen: var(--k-akzent);
  --k-schatten: 0 2px 10px rgba(20, 26, 40, .08);

  /* Windows-11-Chrome (WinUI-3-Standardbutton, Fluent Design System) --
     nur fuer die Download-Knoepfe, s. dortiger Kommentar. */
  --k-win11-grund: #fbfbfb;
  --k-win11-grund-hover: #f5f5f5;
  --k-win11-grund-press: #f0f0f0;
  --k-win11-rand: #e5e5e5;
  --k-win11-rand-hover: #d9d9d9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-kalender-thema="hell"]) {
    --k-grund: #14161a;
    --k-grund-zart: #17191d;
    --k-text: #ffffff;
    --k-text-gedaempft: #9a9a9a;
    --k-linie: #303030;
    --k-hoch-hg: rgba(192, 57, 43, .16);
    --k-mittel-hg: rgba(168, 137, 10, .16);
    --k-niedrig-hg: rgba(136, 136, 136, .14);
    --k-schatten: 0 2px 10px rgba(0, 0, 0, .35);
    --k-win11-grund: #2c2c2c;
    --k-win11-grund-hover: #323232;
    --k-win11-grund-press: #262626;
    --k-win11-rand: #3a3a3a;
    --k-win11-rand-hover: #454545;
  }
}

[data-kalender-thema="dunkel"] {
  --k-grund: #14161a;
  --k-grund-zart: #17191d;
  --k-text: #ffffff;
  --k-text-gedaempft: #9a9a9a;
  --k-linie: #303030;
  --k-hoch-hg: rgba(192, 57, 43, .16);
  --k-mittel-hg: rgba(168, 137, 10, .16);
  --k-niedrig-hg: rgba(136, 136, 136, .14);
  --k-schatten: 0 2px 10px rgba(0, 0, 0, .35);
  --k-win11-grund: #2c2c2c;
  --k-win11-grund-hover: #323232;
  --k-win11-grund-press: #262626;
  --k-win11-rand: #3a3a3a;
  --k-win11-rand-hover: #454545;
}

/* body/html: diese Datei wird ausschliesslich von den Kalenderseiten
   geladen (index.html/schluessel.html/api.html ueber geruest.html), daher
   hier unbedenklich -- sonst bliebe der WordPress-Theme-Hintergrund im
   Dunkelmodus weiss sichtbar (Rand neben/ueber .k-kal). */
html, body { background: var(--k-grund); }

.k-kal {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  color: var(--k-text);
  background: var(--k-grund);
  font: 14px/1.5 "Raleway", -apple-system, "Segoe UI", Roboto, sans-serif;
}

.k-kal h1 { font-size: 26px; margin: 0 0 6px; color: var(--k-text); }
.k-kal-unter { color: var(--k-text-gedaempft); margin: 0 0 22px; }

/* ── Hero-Bild abdunkeln (18.9.26, Nutzer-Wunsch) ─────────────────────────
   "About me"/"thank you" auf www.brauckmann.ch wirken dunkler -- dort sind
   das aber schlicht von Haus aus dunkle/gedaempfte Quellbilder, keine
   CSS-Ebene (geprueft: kein Overlay-Markup, kein Overlay-Regelsatz im
   Theme-CSS). Hier stattdessen ein echter, halbtransparenter Schleier ueber
   dem Header-Bild -- unabhaengig vom gewaehlten Foto immer angenehm lesbar/
   gedaempft, nicht auf ein bestimmtes Bild angewiesen. Nur auf
   .qodef-title-image (die Bildebene), NICHT auf .qodef-title-holder (die
   Titeltext-Ebene) -- beide sind Geschwister, der Text bleibt unangetastet. */
.qodef-title-image { position: relative; }
.qodef-title-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, .45);
}

/* ── Fliesstext-Seiten (API-Doku, Schluessel-Verwaltung u.ae.) ──────────
   Reine Text-/Doku-Unterseiten liefern bislang nur nacktes h2/p/code/pre --
   ohne eigene Regeln hier fallen sie auf UA-Defaults zurueck, die mit dem
   WordPress-Theme kollidieren (siehe .k-tabelle td weiter unten: Theme
   setzt "table td,th{text-align:center}" global). Ein Absatz-/Abstands-
   system fuer genau diese Elemente, einmal fuer alle Kalender-Unterseiten. */
.k-kal h2 {
  font-size: 19px; font-weight: 700; color: var(--k-text);
  margin: 38px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--k-linie);
}
.k-kal h2:first-child { margin-top: 0; }
.k-kal p { margin: 0 0 14px; line-height: 1.65; max-width: 74ch; }
.k-kal ul, .k-kal ol { margin: 0 0 14px; padding-left: 22px; line-height: 1.65; }
.k-kal li { margin-bottom: 4px; }
.k-kal a { color: var(--k-text); text-decoration: underline; text-decoration-color: var(--k-linie); text-underline-offset: 2px; }
.k-kal a:hover { text-decoration-color: var(--k-akzent); }
.k-kal code {
  font: 12.5px/1.4 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: var(--k-grund-zart); border: 1px solid var(--k-linie);
  padding: 1px 5px; border-radius: 0;
}
.k-kal pre {
  background: var(--k-grund-zart); border: 1px solid var(--k-linie);
  padding: 14px 16px; margin: 0 0 18px; overflow-x: auto; border-radius: 0;
}
.k-kal pre code { background: none; border: 0; padding: 0; }
.k-kal table:not(.k-tabelle) {
  width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 20px;
}
.k-kal table:not(.k-tabelle) th {
  text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--k-linie);
  color: var(--k-text-gedaempft); font-weight: 700; font-size: 12px;
}
.k-kal table:not(.k-tabelle) td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--k-linie);
  vertical-align: top;
}
.k-kal table:not(.k-tabelle) tbody tr:hover { background: var(--k-grund-zart); }

/* ── Stand / Ventil ───────────────────────────────────────────────────── */
.k-stand {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin-bottom: 18px; font-size: 13px; color: var(--k-text-gedaempft);
}
.k-treffer { font-weight: 600; color: var(--k-text); }
.k-fehlermeldung {
  margin: 8px 0 0; padding: 8px 12px; font-size: 13px;
  color: var(--k-warnton); border: 1px solid var(--k-warnton); border-radius: 0;
}
.k-ventil { display: inline-flex; align-items: center; gap: 6px; }
.k-ventil-punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.k-ventil-punkt.gruen { background: #2e7d32; }
.k-ventil-punkt.gelb  { background: #a8890a; }
.k-ventil-punkt.rot   { background: #c0392b; }

/* ── Filterleiste (Abschnitt 5) ───────────────────────────────────────── */
.k-filter {
  /* 18.9.26, Nutzer-Wunsch: graue Kiste um die Buttons weg -- kein
     Hintergrund/Rahmen/Innenabstand mehr, nur noch die reine Anordnung. */
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  margin-bottom: 18px;
}
.k-filter-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.k-filter-feld label { color: var(--k-text-gedaempft); font-weight: 600; }
/* 18.9.26, Nutzer-Wunsch: mehr Abstand zwischen Zeitzone (jetzt ganz vorne)
   und dem Zeitraum-Block -- ueber den normalen ".k-filter"-Reihenabstand
   (14px) hinaus. */
.k-filter-feld-zeitraum { margin-left: 22px; }
/* 18.9.26: nach dem Entfernen von "Ist-Wert"/"Überraschung" blieb zwischen
   dem Zeitraum-Block und Zeitzone/Anwenden/Zurücksetzen eine unschöne
   Lücke (drei schmale Felder direkt hinter einem breiten Block, ohne
   gezielte Verteilung). Zeitzone+Anwenden+Zurücksetzen jetzt als eine
   Gruppe, die per auto-margin an den rechten Rand rutscht -- zwei klare
   Cluster (Zeitraum links, Rest rechts) statt einer zufälligen Lücke in
   der Mitte. */
.k-filter-rechts {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  margin-left: auto;
}
.k-filter select, .k-filter input[type="date"], .k-filter input[type="search"] {
  font: inherit; padding: 6px 8px; border: 1px solid var(--k-linie);
  background: var(--k-grund); color: var(--k-text); min-height: 30px;
}
.k-knopfleiste { display: flex; gap: 4px; flex-wrap: wrap; }
/* Mouseover 18.9.26 nach echtem Vorbild (www.brauckmann.ch/hobby, die
   "DOWNLOAD"-Knöpfe, Theme-Klasse ".qodef-btn"): dort wird der Hintergrund
   beim Hover zu Akzentgrün, Schrift weiss. Hier bewusst dunkle statt
   weisser Schrift auf dem Hover-Grün -- weiss auf #b2dd4c ist zu
   kontrastarm. Schriftbild (fett/Grossbuchstaben) NICHT uebernommen --
   Nutzer-Wunsch 18.9.26: normale Schrift wie Anwenden/Zurücksetzen. */
.k-knopfleiste button {
  font: inherit; padding: 6px 10px; border: 1px solid var(--k-linie);
  background: var(--k-grund); color: var(--k-text); cursor: pointer;
  transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out;
}
.k-knopfleiste button:hover { background: var(--k-akzent-hell); border-color: var(--k-akzent-hell); color: #14161a; }
.k-knopfleiste button[aria-pressed="true"] { background: var(--k-akzent); border-color: var(--k-akzent); color: #14161a; }
.k-aufklapp { position: relative; }
.k-aufklapp > summary {
  cursor: pointer; padding: 6px 10px; border: 1px solid var(--k-linie);
  background: var(--k-grund); list-style: none; font-size: 13px;
}
.k-aufklapp > summary::-webkit-details-marker { display: none; }
.k-aufklapp[open] > summary { border-bottom-color: transparent; }
.k-aufklapp-kasten {
  position: absolute; z-index: 20; top: 100%; left: 0; min-width: 220px;
  max-height: 320px; overflow-y: auto; padding: 10px;
  background: var(--k-grund); border: 1px solid var(--k-linie); box-shadow: var(--k-schatten);
}
.k-aufklapp-kasten label {
  display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; cursor: pointer;
}
.k-schalter { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
/* 18.9.26, Nutzer-Wunsch: Anwenden/Zurücksetzen genau wie die Zeitraum-
   Knöpfe (Heute/Diese Woche/...) -- gleiche Basis-Optik, siehe
   ".k-knopfleiste button" oben; hier nur die Elemente ergänzt, die keine
   ".k-knopfleiste button" sind (Zurücksetzen ist ein <a>, kein <button>). */
.k-filter-knopf-anwenden button,
.k-filter-rechts .k-filter-zuruecksetzen {
  /* Selektor ".k-filter-rechts .k-filter-zuruecksetzen" (nicht nur
     ".k-filter-zuruecksetzen") bewusst: ".k-kal a" (Textseiten-Grundregel,
     text-decoration:underline) hat sonst durch die hoehere Spezifitaet
     (Klasse+Element) gegen die einfache Klasse hier gewonnen -- die
     Unterstreichung blieb trotz "text-decoration:none" sichtbar (18.9.26,
     Nutzer-Meldung). Zwei Klassen schlagen Klasse+Element eindeutig.
     font-size explizit statt "font:inherit" -- diese Elemente stecken
     NICHT in einem .k-filter-feld (das 12px setzt), sonst liefen sie auf
     dem Basis-Seitenschriftgrad (14px) und wirkten sichtbar groesser als
     Heute/Diese Woche/... (18.9.26, Nutzer-Meldung: nicht gleich gross). */
  font-family: inherit; font-size: 12px; line-height: 18px;
  padding: 6px 10px; border: 1px solid var(--k-linie);
  background: var(--k-grund); color: var(--k-text); cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out;
}
.k-filter-knopf-anwenden button:hover,
.k-filter-rechts .k-filter-zuruecksetzen:hover {
  background: var(--k-akzent-hell); border-color: var(--k-akzent-hell); color: #14161a;
}

/* ── Downloads / API-Leiste ───────────────────────────────────────────── */
/* 18.9.26, Nutzer-Wunsch: graue Kiste wie bei der Tabelle (gleiches Muster
   wie ".k-tabelle-wrapper"/".k-tabelle thead th": --k-grund-zart + Rahmen
   --k-linie) statt der zuvor entfernten Trennlinie. */
.k-werkzeuge {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 13px;
  padding: 14px 16px; background: var(--k-grund-zart); border: 1px solid var(--k-linie);
}
.k-werkzeuge a {
  padding: 5px 10px; border: 1px solid var(--k-linie); color: var(--k-text);
  text-decoration: none; background: var(--k-grund);
}
.k-werkzeuge a:hover { border-color: var(--k-akzent); }

/* Download-Knoepfe auf /kalender/downloads (18.9.26, Nutzer-Wunsch: "die
   originalen Windows 11 Buttons") -- echte WinUI-3-Werte statt der
   sonstigen Linien-Optik: 4px Eckenradius (WinUI "ControlCornerRadius"),
   helles/dunkles Chrome-Grau statt Seitenfarben, Hover/Press-Zustand wie
   ein echter Windows-11-Standardbutton. Bewusst NICHT Teil der
   site-weiten eckigen-Kanten-Regel unten (siehe dortiger Kommentar) --
   eigene, zweite Ausnahme neben den Zeitraum-Knoepfen. Selektor
   ".k-kal a.k-werkzeuge-knopf" (nicht nur ".k-werkzeuge-knopf") bewusst:
   ".k-kal a" (Textseiten-Grundregel, text-decoration:underline) schlaegt
   sonst per Spezifitaet -- gleiches Muster wie bei .k-filter-zuruecksetzen. */
.k-kal a.k-werkzeuge-knopf {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px;
  min-height: 32px; border: 1px solid var(--k-win11-rand); border-radius: 4px;
  color: var(--k-text); text-decoration: none; background: var(--k-win11-grund);
  font-size: 13px; font-weight: 600; box-sizing: border-box;
  transition: background-color .1s ease-out, border-color .1s ease-out;
}
.k-kal a.k-werkzeuge-knopf:hover { background: var(--k-win11-grund-hover); border-color: var(--k-win11-rand-hover); }
.k-kal a.k-werkzeuge-knopf:active { background: var(--k-win11-grund-press); }
.k-dl-icon { width: 18px; height: 18px; flex: none; }
/* Farbe je Dateiformat statt "currentColor" -- s. Kommentar im Icon-Macro
   in _dl_symbole.html. */
.k-dl-icon-tabelle   { color: #107c41; }
.k-dl-icon-text      { color: #185abd; }
.k-dl-icon-ndjson    { color: #e8730c; }
.k-dl-icon-datenbank { color: #0f80cc; }
.k-dl-icon-kalender  { color: #d13438; }

/* Kompakte Format-Icon-Links in der Werkzeuge-Leiste auf /kalender/
   (18.9.26, Nutzer-Wunsch) -- gleiches Windows-11-Chrome wie
   .k-werkzeuge-knopf oben, nur kleiner (wie .k-werkzeuge a). Selektor
   ".k-werkzeuge a.k-werkzeuge-dl" (nicht nur ".k-werkzeuge-dl") bewusst:
   ".k-werkzeuge a" oben (Klasse+Element, hoehere Spezifitaet) wuerde
   Rahmen/Hintergrund/Radius sonst durch die allgemeine Regel ueberschreiben. */
.k-werkzeuge a.k-werkzeuge-dl {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--k-win11-rand); border-radius: 4px; box-sizing: border-box;
  color: var(--k-text); text-decoration: none; background: var(--k-win11-grund);
  transition: background-color .1s ease-out, border-color .1s ease-out;
}
.k-werkzeuge a.k-werkzeuge-dl:hover { background: var(--k-win11-grund-hover); border-color: var(--k-win11-rand-hover); }
.k-werkzeuge a.k-werkzeuge-dl:active { background: var(--k-win11-grund-press); }
.k-werkzeuge-dl .k-dl-icon { width: 15px; height: 15px; }

/* ── Eckige Buttons (Design-Angleichung an www.brauckmann.ch) ────────────── */
/* .k-werkzeuge-knopf bewusst NICHT hier (s. Kommentar dort) --
   Windows-11-Chrome mit 4px Radius statt eckig. */
.k-knopfleiste button,
.k-filter-knopf-anwenden button,
.k-aufklapp > summary,
.k-werkzeuge a {
  border-radius: 0;
}

/* ── Zeitraum-Leiste + Datumsbereichs-Picker (18.9.26, Nutzer-Referenz-
   Screenshots) -- EINZIGE Ausnahme von den sonst eckigen Kanten oben:
   sanft abgerundet (3px -- Wert aus dem echten Vorbild www.brauckmann.ch/
   hobby uebernommen, ".qodef-btn{border-radius:3px}" im Theme-CSS),
   weder eckig (0, wie der Rest der Seite) noch Vollkreis/Pille (wie z.B.
   das Hauptmenue oder der Rueckruf-Knopf auf www.brauckmann.ch/contact --
   ausdruecklich NICHT gewollt). Bewusst nur hier, nicht sitzenweit:
   Compound-Selektor (.k-knopfleiste UND .k-knopfleiste-zeitraum auf
   demselben Element) schlaegt die allgemeine ".k-knopfleiste
   button{border-radius:0}"-Regel oben per Spezifitaet, unabhaengig von
   der Regel-Reihenfolge im Stylesheet. */
.k-knopfleiste.k-knopfleiste-zeitraum button,
.k-zr-anwenden,
.k-filter-knopf-anwenden button,
.k-filter-zuruecksetzen {
  border-radius: 3px;
}
.k-knopfleiste-zeitraum button[data-k-zeitraum-oeffner] {
  display: inline-flex; align-items: center; gap: 5px;
}

.k-zr-popover {
  /* Gleiches Portal-/position:fixed-Muster wie .k-th-menu (s. dortiger
     Kommentar zu Stacking-Context-Fallstricken) -- hier per JS aus dem
     Formular geloest und an <body> gehaengt. */
  position: fixed; z-index: 2000; background: var(--k-grund);
  border: 1px solid var(--k-linie); border-radius: 6px; box-shadow: var(--k-schatten);
  padding: 14px; width: 560px; max-width: calc(100vw - 16px); font-size: 13px;
}
.k-zr-popover[hidden] { display: none; }
.k-zr-kopf { display: flex; align-items: flex-start; gap: 8px; }
.k-zr-nav {
  font: inherit; font-size: 18px; line-height: 1; padding: 4px 10px; margin-top: 4px;
  border: 1px solid var(--k-linie); background: var(--k-grund); color: var(--k-text);
  cursor: pointer; border-radius: 6px; flex: none;
}
.k-zr-nav:hover { border-color: var(--k-akzent); }
.k-zr-monate { display: flex; gap: 18px; flex: 1; min-width: 0; }
.k-zr-monat { flex: 1; min-width: 0; }
.k-zr-monat-titel { text-align: center; font-weight: 700; margin-bottom: 8px; }
.k-zr-wochentage {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 11px; color: var(--k-text-gedaempft); margin-bottom: 4px;
}
.k-zr-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.k-zr-tag {
  font: inherit; font-size: 12px; aspect-ratio: 1; width: 100%; padding: 0;
  border: 1px solid transparent; background: transparent; color: var(--k-text);
  cursor: pointer; border-radius: 6px;
}
.k-zr-tag:hover { border-color: var(--k-akzent); }
.k-zr-tag.k-zr-leer { cursor: default; visibility: hidden; }
.k-zr-tag.k-zr-heute-tag { border-color: var(--k-linie); font-weight: 700; }
.k-zr-tag.k-zr-start, .k-zr-tag.k-zr-ende {
  background: var(--k-akzent); color: #14161a; font-weight: 700; border-color: var(--k-akzent);
}
.k-zr-tag.k-zr-im-bereich { background: rgba(178, 221, 76, .22); border-radius: 0; }
.k-zr-links {
  display: flex; justify-content: space-between; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--k-linie); font-size: 13px;
}
.k-zr-links a { color: var(--k-text); }
.k-zr-eingabe {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px;
}
.k-zr-eingabe-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; flex: 1; min-width: 120px; }
.k-zr-eingabe-feld span { color: var(--k-text-gedaempft); font-weight: 600; }
.k-zr-eingabe-feld input {
  font: inherit; padding: 6px 8px; border: 1px solid var(--k-linie); border-radius: 6px;
  background: var(--k-grund); color: var(--k-text); min-height: 30px; box-sizing: border-box;
}
.k-zr-anwenden {
  font: inherit; padding: 7px 16px; border: 1px solid var(--k-akzent);
  background: var(--k-akzent); color: #14161a; cursor: pointer; font-weight: 600;
}
@media (max-width: 620px) {
  .k-zr-popover { width: calc(100vw - 16px); padding: 10px; }
  .k-zr-monate { flex-direction: column; gap: 14px; }
}

/* ── Uhrzeit-Anzeige (.k-stand, Bild 3) ───────────────────────────────── */
.k-uhrzeit { display: inline-flex; align-items: center; gap: 4px; }
.k-uhr-icon { font-size: 12px; }

/* ── Tabelle ───────────────────────────────────────────────────────────── */
.k-tabelle-wrapper { overflow-x: auto; border: 1px solid var(--k-linie); }
table.k-tabelle { width: 100%; border-collapse: collapse; min-width: 760px; }
.k-tabelle thead th {
  position: sticky; top: 0; z-index: 5; background: var(--k-grund-zart);
  text-align: left; padding: 9px 10px; font-size: 12px; color: var(--k-text-gedaempft);
  border-bottom: 2px solid var(--k-linie); white-space: nowrap;
}
.k-tabelle td {
  /* Theme-CSS setzt "table td, table th { text-align: center }" global --
     ohne diese Zeile faellt jede unklassifizierte Zelle (Ereignis, Kategorie,
     Quelle ...) auf zentriert zurueck, nicht auf den erwarteten UA-Standard
     "links". */
  text-align: left;
}
.k-tabelle th.k-spalte-zahl, .k-tabelle td.k-spalte-zahl { text-align: right; }
.k-tabelle th.k-spalte-mitte, .k-tabelle td.k-spalte-mitte { text-align: center; }
.k-tabelle th[data-sortierbar] { cursor: pointer; user-select: none; }
.k-tabelle th[data-sortierbar]:hover { color: var(--k-text); }
.k-tabelle th[data-sortierbar]:focus-visible { outline: 2px solid var(--k-akzent); outline-offset: -2px; }
/* Staendig sichtbares Pfeilchen statt eines selbstlaufenden Vorfuehr-
   Effekts (18.9.26, Nutzer-Wunsch: weg mit dem Auf-/Zuklappen beim Laden,
   stattdessen etwas, das sofort erkennbar ist) -- gleiche Konvention wie
   Excel/Google Sheets: ein kleines Dreieck neben dem Spaltentitel zeigt
   permanent "hier gibt es ein Menue", ganz ohne Hover oder Animation
   noetig, funktioniert genauso auf Touch-Geraeten.
   Echtes CSS-Dreieck per Rahmentrick statt des Unicode-Zeichens "▾"
   (18.9.26, Nutzer-Feedback: "andere, groessere Dreiecke, die den Absatz
   nicht durcheinanderbringen und die Spaltenhoehe nicht beeinflussen").
   BEWUSST inline (nicht "position:absolute"): ein erster Versuch mit
   "position:absolute; right:0" sass bei breiten Spalten (z.B. "Ereignis")
   weit vom Text entfernt am rechten Zellenrand -- fuer den Nutzer
   erkennbar als "schwebendes", nicht zugeordnetes Dreieck. Inline direkt
   nach dem Text bleibt bei JEDER Spaltenbreite/-ausrichtung (links/
   rechts/zentriert) unmittelbar neben dem Titel. Die Zeilenhoehe bleibt
   trotzdem unberuehrt, weil die Boxhoehe des Dreiecks (hier: 9px durch
   "border-top") kleiner ist als die durch den Titeltext selbst
   vorgegebene Zeilenhoehe (12px Schrift, keine eigene Schriftgroesse
   noetig, da reiner Rahmentrick statt Textzeichen) -- ein inline-Element,
   das kleiner ist als die umgebende Zeile, kann diese nicht aufziehen. */
.k-tabelle th[data-sortierbar]::after {
  content: ""; display: inline-block; margin-left: 7px; vertical-align: middle;
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--k-text-gedaempft);
}
.k-tabelle th[data-sortierbar]:hover::after { border-top-color: var(--k-text); }

/* ── Excel-artiges Spaltenkopf-Menue (Sortieren/Filtern) ─────────────────
   .k-th-menu wird beim Oeffnen per JS auf "position:fixed" mit berechneten
   top/left gesetzt (kalender.js, kopfMenuPositionieren) -- NICHT auf
   "position:absolute" relativ zum <th>. Grund: <th> steckt in einem
   ".k-tabelle-wrapper" mit "overflow-x:auto", was per CSS-Spezifikation
   automatisch auch "overflow-y" auf einen echten Clip-Kontext setzt --
   dieselbe Klasse Fehler wie beim Markt-Menue vor dem Umbau auf Flyouts
   (siehe HANDOFF). "position:fixed" entgeht dem, da <th> weder transform
   noch filter/will-change setzt und damit keinen eigenen Containing Block
   fuer fixed-positionierte Kinder erzeugt. */
.k-tabelle th { position: relative; }
.k-th-menu {
  /* z-index 2000, nicht 50/500 (17.9.26, Nutzer-Screenshot: Footer schnitt
     das offene Menue an). Zwei uebereinanderliegende Fallstricke gefunden,
     nicht nur einer:
     1) ".k-tabelle thead th" traegt selbst "position:sticky; z-index:5" --
        das erzeugt einen EIGENEN Stacking-Context auf dem <th>. Ein Kind
        (auch mit "position:fixed") kann dessen z-index niemals nach aussen
        "durchreichen" -- der ganze <th> konkurriert dann nur mit SEINEM
        eigenen z-index (5) gegen den Footer. Behoben durch kalender.js:
        .k-th-menu wird beim Laden aus dem <th> geloest und direkt an
        <body> gehaengt (Portal-Muster) -- damit umgeht es diesen
        Stacking-Context ueberhaupt erst.
     2) Selbst als <body>-Kind reicht z-index:500 NICHT: das komplette
        Seiten-Grundgeruest steckt in einem ".qodef-wrapper"-Div direkt in
        <body>, mit "position:relative; z-index:1000" -- auch das ein
        eigener Stacking-Context, der ALLES darin (Footer inklusive)
        traegt. 2000 schlaegt diesen Wrapper sicher, bleibt aber unter den
        echten Vollbild-Overlays des Themes (mobiles Seitenmenue bei 9999),
        die bewusst weiter obenauf bleiben sollen. */
  position: fixed; z-index: 2000; min-width: 220px; max-width: 300px;
  padding: 6px; background: var(--k-grund); border: 1px solid var(--k-linie);
  box-shadow: var(--k-schatten); font-size: 13px; font-weight: 400;
  text-align: left; white-space: normal; text-transform: none; cursor: auto;
}
.k-th-menu[hidden] { display: none; }
.k-th-menu button[data-k-sortieren] {
  display: block; width: 100%; text-align: left; font: inherit; padding: 6px 8px;
  border: 0; background: transparent; color: var(--k-text); cursor: pointer; border-radius: 0;
}
.k-th-menu button[data-k-sortieren]:hover { background: var(--k-grund-zart); }
.k-th-menu hr { border: 0; border-top: 1px solid var(--k-linie); margin: 4px 0; }
.k-th-suche, .k-th-menu input[type="search"] {
  width: 100%; box-sizing: border-box; font: inherit; padding: 5px 7px;
  border: 1px solid var(--k-linie); background: var(--k-grund); color: var(--k-text);
  margin-bottom: 4px; border-radius: 0;
}
.k-th-alle-zeile {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-weight: 600;
  border-bottom: 1px solid var(--k-linie); margin-bottom: 2px; cursor: pointer;
}
.k-th-liste { max-height: 220px; overflow-y: auto; }
.k-th-liste label {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-weight: 400;
  cursor: pointer;
}
.k-th-liste label[hidden] { display: none; }
.k-th-menu-fuss {
  display: flex; justify-content: space-between; gap: 6px; margin-top: 6px;
  padding-top: 6px; border-top: 1px solid var(--k-linie);
}
.k-th-menu-fuss button {
  font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; border-radius: 0;
}
.k-th-menu-fuss button[data-k-th-zuruecksetzen] {
  border: 1px solid var(--k-linie); background: transparent; color: var(--k-text-gedaempft);
}
.k-th-menu-fuss button[type="submit"] {
  border: 1px solid var(--k-akzent); background: var(--k-akzent); color: #14161a; font-weight: 600;
}

.k-tag-zeile td {
  position: sticky; top: 32px; z-index: 4; text-align: left;
  background: var(--k-grund-zart); font-weight: 700; font-size: 13px;
  padding: 7px 10px; border-bottom: 1px solid var(--k-linie);
}
.k-tag-zeile.k-heute td { border-left: 4px solid var(--k-heute-streifen); }

.k-tabelle tbody tr.k-termin-zeile { border-bottom: 1px solid var(--k-linie); cursor: pointer; }
.k-tabelle tbody tr.k-termin-zeile:hover { background: var(--k-grund-zart); }
.k-tabelle td { padding: 8px 10px; vertical-align: middle; }

.k-punkte { display: inline-flex; gap: 2px; }
.k-punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .25; }
.k-punkt.an { opacity: 1; }
.k-wichtigkeit-hoch    { color: var(--k-hoch-vg); }
.k-wichtigkeit-mittel  { color: var(--k-mittel-vg); }
.k-wichtigkeit-niedrig { color: var(--k-niedrig-vg); }
.k-wichtigkeit-ohne_marktwirkung { color: var(--k-ohne-vg); }

.k-waehrung-flagge { margin-right: 4px; }

.k-ist.gruen { color: var(--k-gruen); font-weight: 600; }
.k-ist.rot   { color: var(--k-rot); font-weight: 600; }
.k-pfeil { font-size: 11px; margin-left: 2px; }

/* Text-only-Termine (Reden/Statements/Pressekonferenzen/Protokolle,
   kalender_texte.py) -- Hinweis statt "—" in der Ist-Spalte, siehe
   Erklärung im aufgeklappten Detail. */
.k-text-only-hinweis { color: var(--k-text-gedaempft); font-weight: 600; cursor: help; }
.k-info-punkt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border: 1px solid var(--k-text-gedaempft);
  border-radius: 50%; font-size: 10px; font-style: normal; line-height: 1;
  margin-right: 3px;
}

.k-marktwirkung-punkt { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.k-marktwirkung-hoch    { background: var(--k-hoch-vg); }
.k-marktwirkung-mittel  { background: var(--k-mittel-vg); }
.k-marktwirkung-niedrig { background: var(--k-niedrig-vg); }
.k-marktwirkung-keine   { background: var(--k-ohne-vg); }

/* Kategorie-Spalte wird ab hier NICHT mehr per @media ausgeblendet
   (frueher: "display:none" unter 900px) -- seit dem Excel-Spaltenfilter
   traegt der Kopf dieser Spalte den einzigen Zugang zum Kategorie-Filter
   (die Checkbox-Liste in der oberen Filterleiste ist entfallen). Ausblenden
   wuerde den Filter auf schmalen Bildschirmen komplett unerreichbar machen
   -- gefunden im Live-Test bei 400px Breite. Stattdessen greift die schon
   vorhandene horizontale Scroll-Leiste von .k-tabelle-wrapper. */

/* ── Aufklappbare Detailzeile (Abschnitt 3.7) ────────────────────────── */
.k-detail-zeile { display: none; }
.k-detail-zeile.offen { display: table-row; }
.k-detail-zeile td { background: var(--k-grund-zart); padding: 14px 18px; }
.k-detail-inhalt dl { display: grid; grid-template-columns: max-content 1fr; gap: 0px 14px; margin: 0 0 12px; font-size: 13px; }
.k-detail-inhalt dt { color: var(--k-text-gedaempft); }
/* 20.9.26, Nutzerauftrag: Zeitstempel/UTC enger zusammen (eine Gruppe), dann
   sichtbarer Abstand, dann Kategorie/Nachlesen/Originalquelle wieder enger
   (zweite Gruppe) -- die dl-Zeilen sind fest in dieser Reihenfolge. */
.k-detail-inhalt dt:nth-of-type(3), .k-detail-inhalt dd:nth-of-type(3) { margin-top: 16px; }

/* 20.9.26: Nachlesen-Link -- gruener Knopf statt blossem Unterstrich-Link,
   damit er im dl (Zeitstempel/UTC/Kategorie/...) nicht uebersehen wird. */
.k-detail-inhalt .k-nachlesen-link {
  display: inline-block; padding: 2.52px 7.56px; background: var(--k-akzent);
  color: #14161a; text-decoration: none; font-weight: 600; border-radius: 3px;
  font-size: 0.84em;
}
.k-detail-inhalt .k-nachlesen-link:hover { background: var(--k-akzent-hell); }

/* 20.9.26: Sparkline-CSS -- dritter Anlauf, bleibt jetzt endgueltig. Das
   zugrundeliegende Sparkline-JS ist aktiv, ohne diese Regeln zeigt der
   Termin-Detail-Block "13 TermineIst Prognose" ohne Abstand und einen
   riesigen schwarzen Kreis statt eines kleinen Punkts. */
.k-detail-fakten {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
}
.k-detail-fakten dl { flex: 1 1 220px; min-width: 200px; }
.k-detail-spark {
  /* 20.9.26, Nutzerauftrag "Diagramm 30% groesser", dann nochmal 20%: 220px -> 286px -> 343px */
  flex: 0 0 auto; width: 343px; box-sizing: border-box;
  padding: 10px 12px 8px; border: 1px solid var(--k-linie); border-radius: 8px;
  background: var(--k-grund);
}
.k-detail-spark-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 11px; color: var(--k-text-gedaempft); margin-bottom: 6px;
}
.k-detail-spark-legende { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.k-detail-spark-punkt {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-left: 8px;
}
.k-detail-spark-legende .k-detail-spark-punkt:first-child { margin-left: 0; }
.k-detail-spark-punkt-ist { background: var(--k-spark-ist); }
.k-detail-spark-punkt-prognose { background: var(--k-text-gedaempft); }
.k-detail-spark-svg { display: block; width: 100%; height: 100px; overflow: visible; }
.k-detail-spark-pfad-ist { stroke: var(--k-spark-ist); }
.k-detail-spark-pfad-prognose { stroke: var(--k-text-gedaempft); }
.k-detail-spark-punkt-letzt { fill: var(--k-spark-ist); stroke: var(--k-grund); stroke-width: 1.2; }
.k-detail-spark-fuss { margin-top: 6px; font-size: 11px; color: var(--k-text-gedaempft); }
.k-detail-spark-leer { margin: 0; font-size: 12px; color: var(--k-text-gedaempft); font-style: italic; }
.k-detail-erklaerung {
  margin: 0 0 14px; padding: 10px 12px; font-size: 13px; line-height: 1.55;
  background: var(--k-grund); border: 1px solid var(--k-linie); border-left: 3px solid var(--k-akzent);
}
.k-detail-verlauf table { border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.k-detail-verlauf th, .k-detail-verlauf td { padding: 3px 8px; text-align: right; border-bottom: 1px solid var(--k-linie); }
.k-detail-verlauf th:first-child, .k-detail-verlauf td:first-child { text-align: left; }
/* Aktuellste Zeile (Nutzerauftrag 26.9.26): sofort erkennbar, auch wenn
   der Kopfbereich oben uebersehen wird -- gleicher Akzentton wie die
   Sparkline-Legende (k-detail-spark-punkt-ist), nicht neu erfunden. */
.k-verlauf-aktuell td { font-weight: 600; background: rgba(178,221,76,.15); }
.k-verlauf-aktuell td:first-child::after { content: " · neu"; font-weight: 400; font-size: 10px; color: var(--k-akzent); }
.k-detail-ics { display: inline-block; margin-top: 10px; font-size: 12px; }

/* ── Mehr laden / Fusszeile ───────────────────────────────────────────── */
.k-mehr-laden { text-align: center; margin: 20px 0; }
.k-mehr-laden button {
  font: inherit; padding: 9px 22px; border: 1px solid var(--k-akzent);
  background: transparent; color: var(--k-text); cursor: pointer;
}
.k-mehr-laden button:hover { background: var(--k-akzent); color: #14161a; }
.k-mehr-laden[hidden] { display: none; }

/* ── Mobile Kurzansicht (18.9.26, Nutzer-Wunsch) ─────────────────────────
   "Auf dem Handy will ich nicht erstmal nur Knoepfe sehen -- nur die Werte
   von dieser Woche, kurz und knapp, mit einem Hinweis 'Filter einblenden'
   oben." Der Umschalter-Knopf existiert IMMER im DOM (serverseitig immer
   gerendert, kein Layout-Sprung), ist aber nur unterhalb 640px sichtbar --
   auf Desktop-Breiten aendert sich nichts am bisherigen Verhalten (Filter/
   Downloads bleiben dort permanent offen, wie schon vor diesem Auftrag). */
.k-mobil-umschalter {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  padding: 10px 14px; margin-bottom: 12px; font: inherit; font-weight: 600;
  border: 1px solid var(--k-linie); background: var(--k-grund-zart); color: var(--k-text);
  cursor: pointer; border-radius: 0;
}
.k-mobil-umschalter-pfeil { transition: transform .15s ease; }
.k-mobil-umschalter[aria-expanded="true"] .k-mobil-umschalter-pfeil { transform: rotate(180deg); }

/* ── Mobile Kartenansicht (18.9.26, Nutzer-Vorgabe per Referenz-Screenshot:
   Karten statt Tabellenzeilen -- unsere Farben/Wortwahl, NICHT investing.
   com 1:1 kopiert). Karten sind IMMER im DOM (kalender.js baut sie aus
   denselben Daten wie die Tabellenzeilen, siehe zeilenEinfuegen()), auf
   Desktop per Default unsichtbar, die Tabelle bleibt dort unveraendert. */
.k-karten-liste { display: none; }

.k-karten-tag {
  /* Bewusst LINKSBUENDIG (ausdrueckliche Nutzer-Korrektur: NICHT wie im
     Referenzbild zentriert) -- dieselbe Konvention wie .k-tag-zeile td in
     der Tabelle. */
  text-align: left; font-weight: 700; font-size: 13px; color: var(--k-text);
  background: var(--k-grund-zart); padding: 7px 10px; margin-top: 14px;
  border-bottom: 1px solid var(--k-linie); position: sticky; top: 0; z-index: 4;
}
.k-karten-tag:first-child { margin-top: 0; }
.k-karten-tag.k-heute { border-left: 4px solid var(--k-heute-streifen); }

.k-karte { display: flex; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--k-linie); cursor: pointer; }
.k-karte:hover, .k-karte:active { background: var(--k-grund-zart); }
.k-karte-zeit-spalte { flex: none; width: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.k-karte-uhrzeit { font-weight: 700; font-size: 13px; }
.k-karte-land { font-size: 11px; color: var(--k-text-gedaempft); white-space: nowrap; }
.k-karte-wichtigkeit { margin-top: 1px; }
.k-karte-inhalt { flex: 1; min-width: 0; }
.k-karte-ereignis { font-weight: 600; font-size: 13px; line-height: 1.35; margin-bottom: 3px; }
/* KEINE Kategorie in der Kartenansicht (ausdrueckliche Nutzer-Vorgabe) --
   anders als in der Tabelle, wo die Kategorie-Spalte der einzige Zugang
   zum Kategorie-Filter ist, gibt es hier bewusst kein Kategorie-Element. */
.k-karte-werte { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.k-karte-ist { font-weight: 700; color: var(--k-text); }
.k-karte-ist.gruen { color: var(--k-gruen); }
.k-karte-ist.rot { color: var(--k-rot); }
.k-karte-prognose { color: var(--k-text-gedaempft); }
.k-karte-vorherig { font-size: 11.5px; color: var(--k-text-gedaempft); margin-top: 2px; }
.k-karte-erklaerung {
  font-size: 12px; color: var(--k-text-gedaempft); font-weight: 600; cursor: help;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.k-karte-detail { padding: 0 6px 14px; border-bottom: 1px solid var(--k-linie); background: var(--k-grund-zart); }
.k-karte-detail[hidden] { display: none; }
.k-karte-detail .k-detail-inhalt { padding-top: 10px; }

@media (max-width: 640px) {
  .k-kal { padding: 24px 14px 60px; }
  .k-mobil-umschalter { display: flex; }
  .k-mobil-inhalt { display: none; }
  .k-mobil-inhalt.k-offen { display: block; }
  .k-filter { padding: 12px; }

  /* Tabelle raus, Karten rein (Nutzer-Vorgabe: kein horizontales Scrollen,
     keine gequetschten Spalten -- Karten statt Tabellenzeilen). */
  .k-tabelle-wrapper { display: none; }
  .k-karten-liste { display: block; }
}

/* Vorwert-Hinweis in der Verlaufstabelle (30.9.2026): kleines Kürzel "rev."/
   "vorl." hinter "Vorherig", Erklärung im Tooltip. */
.k-vorwert-hinweis {
  font-size: 0.75em;
  opacity: 0.7;
  text-decoration: underline dotted;
  cursor: help;
  margin-left: 0.2em;
}

/* Einordnung im Detail (30.9.2026): Satz "Ist … vs. Prognose … → …". */
.k-einordnung-staerker { font-weight: 600; }
.k-einordnung-schwaecher { font-weight: 600; }
.k-einordnung-neben { opacity: 0.7; font-weight: 400; }