/* ===========================================================================
   IM COCKPIT STILLGELEGT (10.08.2026) — in den Handy-Apps weiter in Kraft.

   Das Bild des Cockpits kommt seit dem Redesign „Projektzentrale" aus
   cockpit.css: Tannengrün als Gehäuse, Petrol als Struktur, Systemschrift,
   Flächen mit Ring statt Rand. Türkis (#00b2ad) und Raleway/Open Sans dieser
   Fassung würden es überschreiben — deshalb sind die Verweise in base.html
   und login.html entfernt.

   Die vier PWA-Vorlagen (bau, werkzeug, shell, login) laden sie WEITERHIN.
   Dort liegt sie über app.css, das für sich dunkel gedacht ist — die Apps
   sehen deshalb hell und türkis aus. Das ist eine offene Entscheidung: Wer
   die Apps auf dasselbe Bild wie das Cockpit heben will, entfernt dort den
   Verweis und rechnet mit einem anderen Aussehen.
   ===========================================================================

   marke.css — das gemeinsame Bild der Anwendung.

   Wird als LETZTES Blatt geladen und legt sich über cockpit.css, planraum.css,
   projektliste.css und app.css. Es ändert keine Struktur und kein Markup,
   sondern nur Farbe, Schrift und die wenigen Stellen, an denen ein Bauteil
   lauter war als seine Aufgabe.

   Herkunft der Werte: rechbergerbau.at — Weiß, ein Türkis #00b2ad, Grautext,
   Raleway versal für Titel und Navigation, Open Sans für Text und Tabellen.

   Regeln, die dieses Blatt durchhält:
     · EINE Stellschraube: --marke. Alles Türkise leitet sich daraus ab.
     · Türkis ist Fläche, Rand, Unterstreichung, Symbol — nie kleiner Text auf
       Hell. #00b2ad hat auf Weiß nur 2,6:1. Für Text gilt --marke-tief (5,9:1).
     · Kein Orange, kein Navy, kein Gelb, keine gesättigten Cyanflächen.
     · Anthrazit ist Rahmen, nie Inhalt.
   =========================================================================== */


/* Raleway + Open Sans, lokal ausgeliefert (SIL OFL 1.1).
   Kein Aufruf bei Google — die CSP erlaubt font-src nur 'self'. */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/OpenSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/OpenSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/OpenSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/OpenSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/OpenSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/OpenSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------------------------------------------------------------------------
   1 — Die Stellschraube und ihre Ableitungen
   Für die Schwesterfirma "Die Wohnraum Sanierer" wird genau --marke getauscht.
   --------------------------------------------------------------------------- */

:root {
  --marke: #00b2ad;

  --marke-flaeche:       color-mix(in oklab, var(--marke) 10%, #ffffff);
  --marke-flaeche-stark: color-mix(in oklab, var(--marke) 18%, #ffffff);
  --marke-rand:          color-mix(in oklab, var(--marke) 45%, #ffffff);
  --marke-strich:        color-mix(in oklab, var(--marke) 88%, #000000);
  --marke-tief:          color-mix(in oklab, var(--marke) 72%, #000000);
  --auf-marke:           color-mix(in oklab, var(--marke) 22%, #000000);

  --titel-schrift: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --sperr: 0.08em;
  --sperr-klein: 0.04em;
}


/* ---------------------------------------------------------------------------
   2 — Die Variablen der Bestandsblätter neu belegt
   Damit zieht die ganze Anwendung mit, ohne dass ein einziges Markup
   angefasst werden muss.
   --------------------------------------------------------------------------- */

:root {
  /* Marke (überschreibt /branding.css) ----------------------------------- */
  --brand:      var(--marke-tief);   /* Struktur: aktiver Reiter, Auswahl, Verweise */
  --brand-dark: color-mix(in oklab, var(--marke) 58%, #000000);
  --accent:     var(--marke);        /* genau eine Hauptaktion je Ansicht          */

  /* Neutrale Leiter — die Website-Werte, entbräunt ------------------------ */
  --ground:        #f2f2f2;
  --surface:       #ffffff;
  --surface-alt:   #fafafa;
  --surface-brand: var(--marke-flaeche);

  --chassis:      #242b2f;
  --chassis-soft: #333b40;

  --ink:       #333333;
  --ink-soft:  #666666;
  --ink-faint: #6b6b6b;

  --rule:        #e7e7e7;
  --rule-strong: #d4d4d4;

  /* Status — gedeckt, dem Türkis untergeordnet --------------------------- */
  --gruen:         #2c7a53;
  --gruen-flaeche: #e8f3ed;
  --gelb:          #8a6212;
  --gelb-flaeche:  #f7efdd;
  --rot:           #a83a33;
  --rot-flaeche:   #f7e7e5;

  --radius:       8px;
  --radius-klein: 6px;

  --schrift: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Der Planraum trug bisher eine eigene Palette — Türkis, Hellblau, Orange,
   Navy, Gelb. Er wird eingemeindet: die Arbeitsweise bleibt vollständig
   (Ordner, Indizes, "Alle anzeigen", Zähler an leeren Ordnern), nur die
   Farbwelt ist ab hier dieselbe wie überall. */
.planraum {
  --pf-petrol:       var(--marke-tief);
  --pf-petrol-tief:  var(--brand-dark);
  --pf-petrol-hell:  var(--marke-strich);
  --pf-flaeche:      var(--marke-flaeche);
  --pf-flaeche-tief: var(--marke-flaeche-stark);
  --pf-kohle:        var(--chassis);
  --pf-kohle-hell:   var(--chassis-soft);
  --pf-orange:       var(--marke);
  --pf-orange-tief:  var(--marke-strich);
  --pf-navy:         var(--marke-tief);
  --pf-gelb:         var(--gelb-flaeche);
  --pf-tinte:        var(--ink);
  --pf-tinte-leise:  var(--ink-soft);
  --pf-radius:       var(--radius);
}


/* ---------------------------------------------------------------------------
   3 — Schrift
   Zwei Familien, mehr nicht. Raleway trägt Marke, Überschriften, Navigation
   und alle versal gesperrten Etiketten; Open Sans trägt Text und Tabellen.
   --------------------------------------------------------------------------- */

body {
  font-family: var(--schrift);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.rail-marke strong,
.pl-listenkopf h2,
.pl-karte-haupt h3 {
  font-family: var(--titel-schrift);
  font-weight: 800;
  letter-spacing: var(--sperr-klein);
  font-style: normal;
}

h1, .rail-marke strong {
  text-transform: uppercase;
  letter-spacing: var(--sperr);
}

/* Der Bestand setzt an mehreren Stellen Kursive als Stilmittel. Neben Raleway
   wirkt das unruhig — die Betonung kommt jetzt aus Versalien und Sperrung. */
button.aktion,
.pf-alle,
.planraum h2,
.pl-listenkopf h2,
.pl-karte-haupt h3 { font-style: normal; }

/* Gruppentitel in der Schiene und Tabellenköpfe: klein, versal, gesperrt. */
.rail-gruppe,
.tabelle thead th,
table thead th {
  font-family: var(--titel-schrift);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sperr);
}

/* Zahlen bleiben vergleichbar. */
.zahl, .mono, td.zahl, .kennzahl-wert { font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------------------
   4 — Die Schiene
   Anthrazit als ruhiger Rahmen, die Marke türkis, der aktive Punkt türkis
   unterlegt statt orange gerandet.
   --------------------------------------------------------------------------- */

.rail { background: var(--chassis); }
.rail-marke strong { color: #ffffff; }
.rail-marke span { color: #9aa3a6; }

.rail nav a { color: #cdd3d5; border-left: 2px solid transparent; }
.rail nav a:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.rail nav a[aria-current="page"] {
  background: rgba(0, 178, 173, 0.16);
  border-left-color: var(--marke);
  color: #ffffff;
}


/* ---------------------------------------------------------------------------
   5 — Reiter
   Der Bestand kennt vier Formen: .reiter, .pf-reiter, .pl-tab, .segmente.
   Sie bekommen hier dieselbe Handschrift — schlanke Textreiter, aktiv türkis
   unterstrichen. Die dunklen Ordnerreiter des Planraums verschwinden.
   --------------------------------------------------------------------------- */

.reiter, .pf-reiter, .pf-untertabs {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  gap: 4px;
}

.reiter button, .reiter a,
.pf-reiter button, .pf-reiter a,
.pf-untertabs button, .pf-untertabs a {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink-soft);
  font-family: var(--titel-schrift);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--sperr-klein);
  box-shadow: inset 0 -2px 0 transparent;
}

.reiter button:hover, .reiter a:hover,
.pf-reiter button:hover, .pf-reiter a:hover,
.pf-untertabs button:hover { color: var(--ink); background: none; }

.reiter .aktiv, .reiter [aria-selected="true"], .reiter [aria-current],
.pf-reiter .aktiv, .pf-reiter [aria-selected="true"], .pf-reiter [aria-current],
.pf-untertabs .aktiv, .pf-untertabs [aria-selected="true"] {
  background: none;
  color: var(--marke-tief);
  box-shadow: inset 0 -2px 0 var(--marke-strich);
  font-size: 13px;
}


/* ---------------------------------------------------------------------------
   6 — Filterbänder
   Aus dem flächigen Farbblock wird eine ruhige Zeile: heller Grund,
   Chips mit Rand, aktiver Chip türkis blass.
   --------------------------------------------------------------------------- */

.pf-band, .pf-filterband, .filterband, .pl-filter {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.pf-band *, .pf-filterband *, .filterband * { color: inherit; }

.pf-band .etikett, .pf-filterband .etikett,
.pf-bandlabel, .filterband label {
  font-family: var(--titel-schrift);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sperr);
  color: var(--ink-soft);
}

.filterknopf, .pf-filterknopf, .pl-tab, .kategorie {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  border-radius: 999px;
}
.filterknopf:hover, .pf-filterknopf:hover { border-color: var(--marke-strich); }

.filterknopf.aktiv, .pf-filterknopf.aktiv,
.filterknopf[aria-pressed="true"], .pf-filterknopf[aria-pressed="true"],
.pl-tab.aktiv {
  background: var(--marke-flaeche);
  border-color: var(--marke-strich);
  color: var(--marke-tief);
  font-weight: 600;
}


/* ---------------------------------------------------------------------------
   7 — Knöpfe
   Genau eine gefüllte Hauptaktion je Ansicht. Türkis gefüllt mit dunkler
   Schrift — weiß auf #00b2ad wäre mit 2,6:1 nicht lesbar.
   --------------------------------------------------------------------------- */

.knopf, button.knopf, .pf-knopf, .pl-neu {
  border-radius: var(--radius-klein);
  font-family: var(--schrift);
  font-weight: 600;
}

button.aktion, .knopf--haupt, .pf-knopf--haupt, .pl-neu, .aktion {
  background: var(--marke);
  border: 1px solid var(--marke-strich);
  color: var(--auf-marke);
  font-weight: 700;
}
button.aktion:hover, .knopf--haupt:hover, .pf-knopf--haupt:hover, .pl-neu:hover {
  background: var(--marke-flaeche-stark);
  color: var(--marke-tief);
}

/* Alles Zweitrangige bleibt ruhig. */
.knopf--zweit, .pf-knopf:not(.pf-knopf--haupt) {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}


/* ---------------------------------------------------------------------------
   8 — Flächen, Tabellen, Verweise
   --------------------------------------------------------------------------- */

body, .buehne, .inhalt { background: var(--ground); }
.karte, .pf-kachel, .pl-karte, .pf-projektkarte {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: none;
}

.tabelle thead th, table thead th {
  background: var(--surface-alt);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
  font-size: 11px;
}
.tabelle tbody tr:hover td, table tbody tr:hover td { background: #f7f7f7; }

a, .verweis, .pf-verweis {
  color: var(--marke-tief);
  text-decoration-color: var(--marke-rand);
  text-underline-offset: 2px;
}
a:hover { color: var(--brand-dark); text-decoration-color: var(--marke-strich); }

/* Der Fokusring muss in jedem Zustand sichtbar bleiben. */
:focus-visible {
  outline: 2px solid var(--marke-tief);
  outline-offset: 1px;
}


/* ---------------------------------------------------------------------------
   9 — Bänder und Pillen
   --------------------------------------------------------------------------- */

.warnband {
  background: var(--gelb-flaeche);
  color: #5c4109;
  border-bottom: 1px solid #e4d4ac;
  box-shadow: inset 3px 0 0 var(--gelb);
}
.warnband code { background: rgba(0, 0, 0, 0.06); color: inherit; }

.pf-hinweis, .hinweis, .band--hinweis {
  background: var(--marke-flaeche);
  border: 1px solid var(--marke-rand);
  color: var(--ink);
}

.marke, .pille, .tagmarke, .pf-marke {
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--sperr-klein);
}


/* ---------------------------------------------------------------------------
   10 — Der Planraum im Einzelnen
   Was dort fest verdrahtet war und sich der Umstellung sonst entzieht.
   --------------------------------------------------------------------------- */

.planraum .pf-zentrale, .planraum .pf-inhalt { background: var(--ground); }
.planraum .pf-liste, .planraum .pf-tabelle { background: var(--surface); }
.planraum .pf-nadel { background: var(--marke); border-color: var(--marke-strich); }
.planraum .pf-index { background: var(--surface-alt); border: 1px solid var(--rule-strong); color: var(--ink-soft); }
.planraum .pf-ortstag { background: var(--marke-flaeche); color: var(--marke-tief); }


/* ---------------------------------------------------------------------------
   11 — Nachzug: Stellen, an denen der Bestand spezifischer schreibt
   Diese Regeln brauchen dieselbe oder eine höhere Spezifität als das Original,
   sonst greifen sie nicht.
   --------------------------------------------------------------------------- */

/* Die eine Hauptaktion: gefüllt in der Marke, mit dunkler Schrift.
   Weiß auf #00b2ad hätte nur 2,6:1 — der Knopf wäre nicht lesbar. */
button.aktion,
.knopf.aktion,
.pl-neu,
.planraum .pf-knopf.petrol,
.planraum .pf-knopf.navy {
  background: var(--marke);
  border: 1px solid var(--marke-strich);
  color: var(--auf-marke);
  font-weight: 700;
  font-style: normal;
}
button.aktion:hover:not(:disabled),
.knopf.aktion:hover,
.pl-neu:hover,
.planraum .pf-knopf.petrol:hover:not(:disabled),
.planraum .pf-knopf.navy:hover:not(:disabled) {
  background: var(--marke-flaeche-stark);
  border-color: var(--marke-strich);
  color: var(--marke-tief);
}

/* Die acht Ordnerreiter des Bauprojekts werden zu schlanken Textreitern.
   Vorher: dunkle Kacheln über die volle Breite, der aktive wuchs auf 17 px. */
.planraum .pf-reiter,
.pf-reiter {
  gap: 2px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.planraum .pf-reiter button,
.pf-reiter button {
  flex: 0 0 auto;
  min-width: 0;
  padding: 13px 14px;
  border-radius: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--titel-schrift);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -2px 0 transparent;
}
.planraum .pf-reiter button:hover:not([aria-current]),
.pf-reiter button:hover:not([aria-current]) { background: none; color: var(--ink); }

.planraum .pf-reiter button[aria-current="page"],
.pf-reiter button[aria-current="page"] {
  background: none;
  color: var(--marke-tief);
  font-size: 13px;
  padding-top: 13px;
  box-shadow: inset 0 -2px 0 var(--marke-strich);
}
.pf-reiter .anzahl {
  background: var(--marke-flaeche);
  color: var(--marke-tief);
  font-family: var(--schrift);
  font-weight: 700;
}

/* Das Filterband war eine flächige Farbtafel. Jetzt eine ruhige Zeile. */
.planraum .pf-band,
.pf-band {
  background: var(--surface-alt);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.planraum .pf-band *,
.pf-band * { color: inherit; }
.planraum .pf-bandkopf,
.pf-bandkopf { background: none; color: var(--ink-soft); }

/* Zähler und Marken im Band bleiben hell, damit sie nicht mit dem Türkis
   um Aufmerksamkeit kämpfen. */
.pf-chips button,
.pf-filterzeile button,
.pf-tagzeile button {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.pf-chips button[aria-pressed="true"],
.pf-chips button.aktiv,
.pf-filterzeile button[aria-pressed="true"],
.pf-filterzeile button.aktiv {
  background: var(--marke-flaeche);
  border-color: var(--marke-strich);
  color: var(--marke-tief);
}

/* Die Projektzentrale trug eine flächige Hellblau-Kachel. */
.planraum .pf-kachelzentrale,
.planraum .pf-zentrale > * { background: var(--surface); }


/* ---------------------------------------------------------------------------
   12 — Nachzug: das Filterband des Planraums
   planraum.css hat diese Teile für das alte dunkle Band gebaut (weiße Schrift
   auf rgba-Weiß) und schreibt spezifischer als Abschnitt 11. Auf dem hellen
   Band waren Chips, Segmente und Zeitraum unsichtbar; die Hauptaktion stand
   in --pf-orange (= Marke) auf Markengrund — Türkis auf Türkis.
   --------------------------------------------------------------------------- */

.planraum button.aktion,
.planraum .knopf.aktion {
  background: var(--marke);
  border-color: var(--marke-strich);
  color: var(--auf-marke);
  font-style: normal;
}
.planraum button.aktion:hover:not(:disabled),
.planraum .knopf.aktion:hover {
  background: var(--marke-flaeche-stark);
  border-color: var(--marke-strich);
  color: var(--marke-tief);
}

/* Filterchips: Kästchen-Pille auf hellem Grund. */
.planraum .filterknopf {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.planraum .filterknopf::before { border-color: var(--ink-faint); }
.planraum .filterknopf:hover:not(:disabled) {
  background: var(--marke-flaeche);
  border-color: var(--marke-strich);
}
.planraum .filterknopf[aria-pressed="true"] {
  background: var(--marke-flaeche);
  border-color: var(--marke-strich);
  color: var(--marke-tief);
}
.planraum .filterknopf[aria-pressed="true"]::before {
  background: var(--marke-strich);
  border-color: var(--marke-strich);
  box-shadow: inset 0 0 0 2px #fff;
}

/* Leere Ordner bleiben sichtbar, treten aber zurück — jetzt in Grau statt
   in durchscheinendem Weiß. */
.planraum .filterknopf.leer {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink-faint);
}
.planraum .filterknopf.leer::before { border-color: var(--rule-strong); }
.planraum .filterleer { color: var(--ink-soft); }
.planraum .pf-filterzeile + .pf-filterzeile { border-top-color: var(--rule); }

/* Segmentleiste und Zeitraumwahl im Band. */
.planraum .pf-band .segmente button {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.planraum .pf-band .segmente button[aria-pressed="true"] {
  background: var(--marke-flaeche);
  border-color: var(--marke-strich);
  color: var(--marke-tief);
  font-weight: 600;
}
.planraum .pf-zeitraum input[type="date"] { border: 1px solid var(--rule-strong); }
.planraum .pf-zeitraum .bis { color: var(--ink-soft); }

/* Der Meldekasten „Letzte Uploads": Weiß auf #00b2ad hat nur 2,6:1 —
   dunkle Schrift auf der Marke, wie bei den Knöpfen. */
.planraum .pf-uploads { background: var(--marke); color: var(--auf-marke); }
.planraum .pf-uploads span { color: var(--auf-marke); opacity: 0.85; }