/* ==========================================================================
   Arbeitsmodus - helle Farbwelt fuer den Arbeitsrechner
   --------------------------------------------------------------------------
   Diese Datei wird von index.html, mail.html und adressen.html geladen,
   liegt aber vollstaendig unter html.arbeit: Ohne die Klasse aendert sie
   nichts. Gesetzt wird die Klasse vom kurzen Skript im Kopf der drei
   Dateien - vor dem ersten Zeichnen, sonst blitzt das dunkle Design auf.

   EINE Stelle statt dreier Kopien in drei grossen HTML-Dateien. Wer hier
   etwas aendert, aendert es ueberall.

   Bewusst OHNE Media Query: Ob es den Modus ueberhaupt gibt, entscheidet
   JavaScript (min-width 900px UND pointer:fine). Haenge die Regeln nicht
   zusaetzlich an eine Breite - sonst spraenge die Ansicht ins Dunkle
   zurueck, sobald jemand das Fenster schmaler zieht.

   Das ist KEINE Sicherheitsfunktion. Drei Klicks schalten um; es geht
   allein um den Eindruck beim fluechtigen Blick eines Kollegen.

   Neue Klassen tragen ausnahmslos das Praefix ap-. Die drei Dateien
   definieren 13 Klassennamen mehrfach (.karte, .btn, .titel, .zeile,
   .kopf, .zaehler, .warn, .fehler, .chip, .punkt, .lbl, .hidden,
   .hinweis) - ohne Praefix erbt eine neue Klasse irgendwo eine fremde
   Bedeutung.
   ========================================================================== */

html.arbeit {
  /* Kontraste gegen Karte #ffffff bzw. Flaeche #eef1f5 nachgerechnet. */
  --a-flaeche:       #eef1f5;   /* Seitenflaeche, kuehles Hellgrau-Blau      */
  --a-karte:         #ffffff;   /* Karten und Fliesen                        */
  --a-text:          #1b2430;   /* 15,65:1 auf Karte · 13,82:1 auf Flaeche   */
  --a-leise:         #5b6675;   /*  5,83:1 auf Karte ·  5,15:1 auf Flaeche   */
  --a-akzent:        #2f5f8f;   /*  6,66:1 auf Karte · Weiss darauf ebenso   */
  --a-weich:         #eaf0f7;   /* Flaeche hinter Symbolen, keine Textfarbe  */
  --a-fehler:        #a4262c;   /*  7,26:1 auf Karte - NUR fuer echte Fehler */
  --a-linie:         #d3d9e2;   /* Trennlinien. 1,42:1 - reicht, sie zieren  */
  --a-rahmen:        #78838f;   /* Rahmen von BEDIENELEMENTEN. 3,86:1 auf
                                   Karte, 3,41:1 auf Flaeche - ueber 3,0:1   */
  --a-schiene:       #2b3a4a;
  --a-schiene-text:  #ffffff;   /* 11,62:1 auf der Schiene                   */
  --a-schiene-leise: #c3ccd6;   /*  7,16:1 auf der Schiene                   */

  /* Zwei Toene, die BEDEUTUNG tragen: Unfertiges gegen Freigegebenes.
     Sie unterscheiden sich bewusst nicht nur im Farbton, sondern auch in
     der Helligkeit (1,73:1 zueinander) - sonst waeren sie in Graustufen
     und fuer farbschwache Augen dasselbe. */
  --a-offen:         #9c5f0a;   /*  5,18:1 auf Karte - Rohes, Unfertiges     */
  --a-fertig:        #0b5348;   /*  8,95:1 auf Karte - Freigegebenes         */
  /* Dasselbe Paar fuer den Adress-Finder, 1,44:1 zueinander. */
  --a-gut:           #1f7a46;   /*  5,34:1 auf Karte                         */
  --a-warn:          #7a4700;   /*  7,70:1 auf Karte                         */

  /* Ohne das bleiben Eingabefelder, Auswahllisten und Bildlaufleisten
     dunkel - alle drei Dateien setzen color-scheme:dark im :root. */
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Die Variablen der drei Dateien umlegen. Das ist der kuerzeste Weg: Der
   groesste Teil der Oberflaeche haengt an ihnen und wird hell, ohne dass
   eine einzige Klassenregel angefasst wird.
   html.arbeit (0,1,1) sticht :root (0,1,0) - unabhaengig von der
   Reihenfolge der Dateien.
   -------------------------------------------------------------------------- */
html.arbeit {
  /* index.html */
  --bg: var(--a-flaeche);       --panel: var(--a-karte);
  --card: var(--a-karte);       --raised: var(--a-karte);
  --field: var(--a-karte);
  --line: var(--a-linie);       --line-soft: var(--a-linie);
  --line-field: var(--a-rahmen);
  --text: var(--a-text);        --muted: var(--a-leise);
  --faint: var(--a-leise);
  --accent: var(--a-akzent);    --accent-ink: #ffffff;
  --ok: var(--a-gut);           --danger: var(--a-fehler);
  /* GENAU EIN Akzent. Die App-Farbtoene sind die Handschrift der privaten
     Sammlung - im Arbeitsmodus fallen sie zusammen. */
  --anime: var(--a-akzent);     --expenses: var(--a-akzent);
  --ips: var(--a-akzent);       --figures: var(--a-akzent);
  --water: var(--a-akzent);
  --r: 6px;                     --r-sm: 6px;

  /* mail.html */
  --grund: var(--a-flaeche);    --karte: var(--a-karte);
  --rahmen: var(--a-rahmen);
  --roh: var(--a-offen);        --fertig: var(--a-fertig);
  --leise: var(--a-leise);

  /* adressen.html */
  --erhoben: var(--a-weich);    --akzent: var(--a-akzent);
  --akzent-dunkel: #24486c;     /* 9,47:1 auf Karte */
  --gut: var(--a-gut);          --warn: var(--a-warn);
}

/* --------------------------------------------------------------------------
   Grundflaechen. background-color allein genuegt nicht: Alle drei Dateien
   legen drei radial-gradient plus einen linear-gradient als
   background-image auf den body.
   -------------------------------------------------------------------------- */
html.arbeit,
html.arbeit body {
  background-color: var(--a-flaeche);
  background-image: none;
  color: var(--a-text);
}
html.arbeit body { font-size: 14px; }

/* Kein Leuchten, keine Verlaeufe, keine Schatten - die Wirkung entsteht
   hier aus Zurueckhaltung. */
html.arbeit .card,
html.arbeit .karte,
html.arbeit .menu,
html.arbeit .flash,
html.arbeit .ap-fliese {
  background: var(--a-karte);
  background-image: none;
  box-shadow: none;
}
html.arbeit .card {
  border: 1px solid var(--a-linie);
  border-left: 1px solid var(--a-linie);
  border-radius: 6px;
}
html.arbeit .card.spine-accent,
html.arbeit .card.spine-ok { border-left-color: var(--a-linie); }
html.arbeit h1, html.arbeit h2, html.arbeit h3 { font-family: "Inter", system-ui, sans-serif; }
html.arbeit .page-head h1 { font-size: 1.35rem; font-weight: 600; letter-spacing: 0; }
html.arbeit .card h3 { font-size: .98rem; font-weight: 600; }

html.arbeit .btn {
  background: var(--a-karte);
  border: 1px solid var(--a-rahmen);
  color: var(--a-text);
  border-radius: 4px;
  font-weight: 500;
}
html.arbeit .btn:hover { background: var(--a-weich); border-color: var(--a-akzent); }
html.arbeit .btn-primary,
html.arbeit .btn-primary:hover {
  background: var(--a-akzent);
  background-image: none;
  border-color: var(--a-akzent);
  color: #ffffff;
}
html.arbeit input, html.arbeit select, html.arbeit textarea {
  background: var(--a-karte);
  border-color: var(--a-rahmen);
  color: var(--a-text);
  border-radius: 4px;
}

/* Die Marke in der Seitenleiste ist ein Farbverlauf im Text. Der bleibt
   auch hell stehen, wenn man nur die Farbe setzt - der Verlauf muss weg. */
html.arbeit .brand b {
  background: none;
  -webkit-text-fill-color: var(--a-text);
  color: var(--a-text);
}

/* ==========================================================================
   1. index.html - Startseite im Arbeitsmodus
   ========================================================================== */

/* Fallende Bluetenblaetter. Reine Deko, und am Arbeitsplatz genau das
   Gegenteil dessen, was der Modus erreichen soll. */
html.arbeit .bluete-deko { display: none; }

/* Seitenleiste und ihr Schatten: Im Arbeitsmodus gibt es nur drei
   Fliesen, eine Navigation ueber alle Apps waere ihr Gegenteil.
   .shell ist ein Raster - die Spalte muss mit weg, nicht nur der Inhalt. */
html.arbeit #side,
html.arbeit #scrim,
html.arbeit #burger { display: none; }
html.arbeit .shell { grid-template-columns: minmax(0, 1fr); }

/* Der scrollfreie Startbildschirm rechnet mit Kacheln, die auf eine Seite
   passen. Die Fliesen brauchen ihn nicht - und ein festgenagelter
   Bildschirm mit drei Fliesen sieht aus wie ein Fehler. */
html.arbeit.start-fest,
html.arbeit.start-fest body { height: auto; overflow: visible; }
html.arbeit.start-fest .main,
html.arbeit.start-fest .page,
html.arbeit.start-fest #view-apps {
  display: block;
  flex: none;
  min-height: 0;
}

/* Suchfeld und Schubfach: Ohne sie waere jede andere App einen Klick
   entfernt und der Modus sinnlos. */
html.arbeit .apps-kopf .suchbox,
html.arbeit .apps-kopf .page-head p,
html.arbeit #schubGriff,
html.arbeit #schubfach { display: none; }

/* Die dunkle Kopfschiene ueber die volle Breite. Es ist die vorhandene
   topbar - sie umzubauen waere Umbau ohne Anlass; sie umzufaerben genuegt. */
html.arbeit .topbar {
  background: var(--a-schiene);
  backdrop-filter: none;
  border-bottom: 0;
  color: var(--a-schiene-text);
  padding: 0 1.1rem;
  min-height: 44px;
  gap: .55rem;
}
html.arbeit .topbar h2 {
  color: var(--a-schiene-text);
  font-size: .94rem;
  font-weight: 400;
}
/* Das Winkelzeichen macht aus Marke und Seitentitel einen Pfad -
   "Arbeitsplatz > Einstellungen". */
html.arbeit .topbar h2::before {
  content: "›";
  color: var(--a-schiene-leise);
  margin-right: .5rem;
}
html.arbeit .avatar {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .32);
  color: var(--a-schiene-text);
  width: 30px;
  height: 30px;
  border-radius: 4px;
  font-size: .74rem;
}
html.arbeit .zurueck { color: var(--a-schiene-leise); }

/* Die Marke. Traegt denselben Dreifachklick wie die Ueberschrift "Apps" -
   der Weg zurueck ist dieselbe Geste wie der Weg hinein. */
html.arbeit .ap-marke {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--a-schiene-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
/* Sichtbarer Ausgang neben der Geste. Hausregel: nie eine Einbahnstrasse
   bauen. Oben rechts ist am Rechner die richtige Ecke. */
html.arbeit .ap-beenden {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 4px;
  padding: .25rem .7rem;
  color: var(--a-schiene-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: .78rem;
  cursor: pointer;
}
html.arbeit .ap-beenden:hover { background: rgba(255, 255, 255, .12); }

/* Der Inhalt sitzt in einer begrenzten Spalte. Eine Fliesenreihe ueber
   1080 px auseinanderzuziehen waere leer. */
html.arbeit #view-apps,
html.arbeit #view-einstellungen,
html.arbeit .page > .view {
  max-width: 1080px;
  margin: 0 auto;
}
html.arbeit .apps-kopf .page-head { margin-bottom: 1.1rem; }
/* Die Ueberschrift traegt den Zaehler. Ohne das markiert der dritte Klick
   den Text, statt umzuschalten. */
html.arbeit #appsTitel { user-select: none; -webkit-user-select: none; }

/* Drei Fliesen nebeneinander. Sie duerfen umbrechen: Zieht jemand das
   Fenster schmaler, bleibt der Modus an (siehe Kopf dieser Datei), also
   muss die Reihe das aushalten. */
html.arbeit .ap-fliesen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 780px) {
  html.arbeit .ap-fliesen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  html.arbeit .ap-fliesen { grid-template-columns: 1fr; }
}

html.arbeit .ap-fliese {
  display: block;
  border: 1px solid var(--a-linie);
  border-radius: 6px;
  padding: 1rem 1.05rem 1.1rem;
  text-decoration: none;
  color: var(--a-text);
  transition: border-color .12s ease;
}
html.arbeit .ap-fliese:hover { border-color: var(--a-akzent); }
html.arbeit .ap-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: var(--a-weich);
  margin-bottom: .75rem;
}
/* Einfarbig im Akzent, ohne farbige Flaeche und ohne Schlagschatten -
   die Symbole kommen aus demselben Vorrat wie die Kacheln. */
html.arbeit .ap-symbol svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--a-akzent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.arbeit .ap-name {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .2rem;
}
html.arbeit .ap-text {
  display: block;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--a-leise);
}
/* KEINE Zahl, kein Badge - nirgends. Der Hub zeigt sonst "902" an der
   Anime-Sammlung; genau das ist seine Identitaet und genau das gehoert
   hier weg. Es ist der staerkste verfuegbare Hinweis "das hier ist etwas
   anderes", und er kostet keine Zeile Gestaltung. */
html.arbeit .ap-fliese .num,
html.arbeit .ap-fliese .badge { display: none; }

html.arbeit .ap-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 1.6rem;
  padding-top: .7rem;
  border-top: 1px solid var(--a-linie);
  color: var(--a-leise);
  font-size: .76rem;
}

/* ==========================================================================
   2. mail.html - Mailwerk
   ========================================================================== */

/* Entwurf und Ergebnis nebeneinander statt untereinander. Am Rechner ist
   der Vergleich der Punkt der ganzen Uebung.
   :has() sorgt dafuer, dass die zweite Spalte erst entsteht, wenn es ein
   Ergebnis gibt - #kiErgebnisBox traegt bis dahin .hidden, und ein festes
   Zweispaltenraster liesse solange eine tote halbe Seite stehen.
   ACHTUNG: Die Zeilenzuweisung haengt an der Anzahl der Kinder dieses
   einen Abschnitts - Ueberschrift, dann vier Elemente links. Kommt dort
   eines dazu, muss span 4 mitwachsen. */
html.arbeit #reiter-schreiben > section:has(> #kiErgebnisBox:not(.hidden)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.1rem;
  align-items: start;
}
html.arbeit #reiter-schreiben > section:has(> #kiErgebnisBox:not(.hidden)) > * {
  grid-column: 1;
}
html.arbeit #reiter-schreiben > section:has(> #kiErgebnisBox:not(.hidden)) > h2 {
  grid-column: 1 / -1;
}
html.arbeit #reiter-schreiben > section:has(> #kiErgebnisBox:not(.hidden)) > #kiErgebnisBox {
  grid-column: 2;
  grid-row: 2 / span 4;
  margin-top: 0;
}
html.arbeit #kiErgebnis {
  background: var(--a-karte) !important;   /* steht als style= im Markup */
  border: 1px solid var(--a-linie);
  color: var(--a-text);
}
html.arbeit .feld-roh { border-color: var(--a-offen); }
html.arbeit .feld-fertig { border-color: var(--a-fertig); }
html.arbeit .btn-roh {
  background: var(--a-offen);
  border-color: var(--a-offen);
  color: #ffffff;
}
html.arbeit .btn-fertig {
  background: var(--a-fertig);
  border-color: var(--a-fertig);
  color: #ffffff;
}

/* ==========================================================================
   3. adressen.html - Adress-Finder
   ========================================================================== */
/* Hier steht mit Absicht keine einzige Klassenregel: Der Adress-Finder
   faerbt sich vollstaendig ueber seinen eigenen :root-Block um, den die
   Variablen weiter oben ueberschreiben. Zwei Regeln fuer .erhoben und
   .treffer standen hier im Entwurf - beide Klassen gibt es in
   adressen.html gar nicht, sie waeren totes CSS gewesen. */

/* ==========================================================================
   4. Gemeinsame Navigationsleiste aus hub.js
   --------------------------------------------------------------------------
   hub.js haengt ihre Regeln zur Laufzeit als <style> in den Kopf, mit fest
   eingetragenen dunklen Farben. Angefasst wird die Datei nicht: Die
   Auswahl html.arbeit #hub-nav ... ist spezifischer als #hub-nav ... und
   sticht damit unabhaengig von der Reihenfolge.
   ========================================================================== */
html.arbeit #hub-nav {
  background: var(--a-schiene);
  backdrop-filter: none;
  border-bottom: 0;
  font-family: "Inter", system-ui, sans-serif;
}
html.arbeit #hub-nav .hub-home,
html.arbeit #hub-nav .hub-link { color: var(--a-schiene-leise); }
html.arbeit #hub-nav .hub-home:hover,
html.arbeit #hub-nav .hub-link:hover {
  color: var(--a-schiene-text);
  background: rgba(255, 255, 255, .12);
}
html.arbeit #hub-nav .hub-link.is-active {
  color: var(--a-schiene-text);
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .16);
}
html.arbeit #hub-nav .hub-logout,
html.arbeit #hub-nav.hub-kompakt .hub-btn {
  color: var(--a-schiene-text);
  border-color: rgba(255, 255, 255, .38);
  background: none;
}
html.arbeit #hub-nav.hub-kompakt {
  background: none;
}
html.arbeit #hub-nav.hub-kompakt .hub-btn {
  color: var(--a-text);
  border-color: var(--a-rahmen);
  background: var(--a-karte);
}