/* Organizer — Bidoli CI „Swiss Precision Systems"
   Quelle: website/docs/01-brand/design-system.md
   Grundsaetze: IBM Plex, Border vor Schatten, Radius 6/8, Navy als
   Autoritaetsflaeche, Bidoli Blue fuer Aktionen, Amber nur als Signal. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/app/schrift/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/app/schrift/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/app/schrift/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/app/schrift/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/app/schrift/ibm-plex-mono-500.woff2') format('woff2'); }

:root {
  --grund: #f7f9fb;            /* Technical White */
  --karte: #ffffff;            /* Pure White */
  --text: #303943;             /* Engineering Graphite */
  --gedimmt: #667085;          /* System Slate */
  --akzent: #175cd3;           /* Bidoli Blue */
  --akzent-text: #ffffff;
  --linie: #d9e0e8;            /* System Grey */
  --navy: #0b1726;             /* Northstar Navy */
  --kopf-grund: #0b1726;       /* Navy-Leiste in beiden Modi */
  --gefahr: #b42318;           /* semantisches Rot, kein Markenkern */
  --rot: #b42318;
  --aufgabe-punkt: #d99028;    /* Signal Amber — Engpass/Aufmerksamkeit */
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0b1726;          /* Navy als dunkle Flaeche (CI-konform) */
    --karte: #111f33;
    --text: #e6ebf2;
    --gedimmt: #8b99ac;
    --akzent: #4e86e8;         /* aufgehelltes Bidoli Blue fuer Kontrast */
    --akzent-text: #0b1726;
    --linie: #24334a;
    --gefahr: #e0705f;
    --rot: #e0705f;
    --aufgabe-punkt: #d99028;
  }
}

/* Tastatur-Fokus ueberall sichtbar */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--grund);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.verborgen { display: none !important; }

/* Icon-System: geometrische Outlines, currentColor */
.symbol { display: inline-flex; width: 1.2em; height: 1.2em; vertical-align: -.2em; flex: 0 0 auto; }
.symbol svg { width: 100%; height: 100%; }

/* Technisches Label (CI-Muster: PROZESS 02) */
.techlabel, h2.abschnitt, .agenda .tag h3,
#erledigtbereich summary, #heute-mehr summary {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gedimmt);
}
h2.abschnitt { margin: .6rem 0 .6rem; }
.agenda .tag h3 { margin: 1rem 0 .45rem; }
#erledigtbereich summary, #heute-mehr summary { margin: .9rem 0 .5rem; cursor: pointer; }

/* Anmeldung */
#anmeldung { display: flex; min-height: 100dvh; align-items: center; justify-content: center; padding: 1.5rem; }
.anmeldekarte { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 2.25rem 1.75rem; width: 100%; max-width: 22.5rem; text-align: center; }
.anmeldekarte .logo { width: 200px; max-width: 80%; margin: 0 auto .9rem; display: block; }
.kopf-marke { cursor: pointer; }
.anmeldekarte h1 { font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; }
.markenzeile { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gedimmt); margin: .3rem 0 .2rem; }
.unterzeile { color: var(--gedimmt); font-size: .9rem; margin: .5rem 0 1.4rem; }
.anmeldekarte label { display: block; text-align: left; font-size: .85rem; font-weight: 500; color: var(--gedimmt); margin-bottom: .9rem; }
.anmeldekarte input { display: block; width: 100%; margin-top: .3rem; padding: .65rem .75rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); color: var(--text); }
.anmeldekarte button { width: 100%; padding: .7rem; font-size: 1rem; font-family: inherit; border: 0; border-radius: 6px; background: var(--akzent); color: var(--akzent-text); font-weight: 600; cursor: pointer; }
.fehler { color: var(--gefahr); font-size: .85rem; margin-top: .75rem; }

/* Navy-Kopfleiste mit Northstar-B */
#haupt header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--kopf-grund); color: #fff;
  padding: calc(.85rem + env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right)) .7rem
    max(1rem, env(safe-area-inset-left));
}
.kopf-marke { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.kopf-logo { height: 26px; width: auto; display: block; }
#haupt h1 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.kopfrechts { display: flex; align-items: center; gap: .45rem; color: #fff; }
#ausgang-zeichen { color: #f0b654; display: inline-flex; }
button.leise { background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 28%); color: #fff; border-radius: 6px; padding: .45rem .55rem; font-size: .9rem; min-height: 2.3rem; min-width: 2.3rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Inhalt */
main {
  padding: 1rem max(1rem, env(safe-area-inset-right)) 5.5rem max(1rem, env(safe-area-inset-left));
  max-width: 40rem; margin: 0 auto;
}
.leer { color: var(--gedimmt); font-size: .9rem; padding: .25rem 0 .75rem; }
.hinweis { font-size: .84rem; color: var(--text); background: var(--karte); border: 1px solid var(--linie); border-left: 3px solid var(--akzent); border-radius: 6px; padding: .55rem .75rem; margin-bottom: .8rem; }
.feldhinweis { font-size: .75rem; color: var(--gedimmt); margin: .1rem 0 .6rem; }
button.zurueck { border: 0; background: none; color: var(--akzent); font-size: .9rem; font-weight: 500; font-family: inherit; padding: 0 0 .6rem; cursor: pointer; }
button.gefahr { background: none; border: 1px solid var(--gefahr); color: var(--gefahr); border-radius: 6px; padding: .5rem 1rem; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
button.gefahr .symbol { width: 1rem; height: 1rem; }

/* Formularbausteine */
.terminzeile { display: flex; gap: .5rem; margin-bottom: .5rem; }
.zeitfeld { position: relative; display: block; flex: 1; min-width: 0; }
.zeitfeld input { width: 100%; }
/* Das Beispiel liegt ueber dem Feld und braucht deshalb, dass die native
   Anzeige ("--:--") verschwindet. Das geht nur in Chrome/Safari
   (::-webkit-datetime-edit); Firefox zeigt sein "--:--" weiter, dort wuerde
   sich beides ueberlagern. Also standardmaessig aus und nur dort einschalten,
   wo sich das Native wirklich ausblenden laesst — in Firefox uebernimmt sein
   eigenes "--:--" die Rolle des Formathinweises. */
.zeitbeispiel { display: none; position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); font-size: .9rem; color: var(--gedimmt); opacity: .7; pointer-events: none; white-space: nowrap; }
@supports selector(::-webkit-datetime-edit) {
  .zeitfeld:not(.gefuellt) input:not(:focus)::-webkit-datetime-edit { color: transparent; }
  .zeitfeld:not(.gefuellt) input:not(:focus) + .zeitbeispiel { display: block; }
}
.terminzeile input, .terminzeile select { flex: 1; min-width: 0; padding: .5rem .55rem; font-size: .92rem; font-family: inherit; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); color: var(--text); }
.terminzeile button { flex: 0 0 auto; padding: .5rem 1rem; border: 0; border-radius: 6px; background: var(--akzent); color: var(--akzent-text); font-weight: 600; font-family: inherit; cursor: pointer; }
.terminzeile button.gefahr { background: none; color: var(--gefahr); }
.feld { display: block; font-size: .8rem; font-weight: 500; color: var(--gedimmt); margin: .75rem 0; }
.feld textarea, .feld select, .feld input[list] { display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem; font-size: .95rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--karte); color: var(--text); font-family: inherit; }
.feld .terminzeile { margin-top: .3rem; }
.feld .terminzeile input, .feld .terminzeile select { background: var(--karte); }
#terminformular .feld.kompakt { margin: .1rem 0 .5rem; }
#terminformular .feld.kompakt .terminzeile { margin-bottom: 0; }
#terminformular .feld.kompakt .terminzeile input { background: var(--grund); }
#terminformular .feld.kompakt select { background: var(--grund); }
#punkte-zeile input { display: block; width: 100%; margin-top: .3rem; padding: .5rem .65rem; font-size: .92rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); color: var(--text); font-family: inherit; }
/* Schalterzeile: Kaestchen plus Text, tippbar auf der ganzen Breite */
.schalterzeile { display: flex; align-items: center; gap: .6rem; margin: .1rem 0 .7rem; font-size: .85rem; color: var(--text); cursor: pointer; }
/* eckig und in Bidoli Blue — die runden Kaestchen bleiben dem Abhaken vorbehalten */
.schalterzeile input[type="checkbox"] { flex: 0 0 auto; margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); }
.schalterzeile.gesperrt { color: var(--gedimmt); cursor: default; }
#termin-mitnehmen-zeile { margin: .3rem 0 1rem; }

#terminformular { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: .75rem; margin: 1rem 0 1.1rem; }
#terminformular input[name="titel"] { width: 100%; padding: .6rem .75rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); color: var(--text); margin-bottom: .5rem; }
.artwahl { display: flex; gap: 1rem; margin-bottom: .6rem; font-size: .9rem; color: var(--gedimmt); }
.artwahl label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.artwahl input { accent-color: var(--akzent); }

#neuformular, #schrittformular, #terminpunktformular { display: flex; gap: .5rem; margin-bottom: 1rem; }
#neuformular input, #schrittformular input, #terminpunktformular input { flex: 1; padding: .7rem .85rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--linie); border-radius: 6px; background: var(--karte); color: var(--text); }
#neuformular button, #schrittformular button, #terminpunktformular button { width: 3rem; border: 0; border-radius: 6px; background: var(--akzent); color: var(--akzent-text); font-size: 1.35rem; line-height: 1; cursor: pointer; }

/* Aufgabenzeilen — Karte mit Border statt Schatten */
ul.aufgaben { list-style: none; padding: 0; }
ul.aufgaben li {
  display: flex; align-items: center; gap: .7rem;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 8px;
  padding: .68rem .8rem; margin-bottom: .4rem; cursor: pointer;
}
ul.aufgaben input[type="checkbox"], .detailkopf input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.35rem; height: 1.35rem; flex: 0 0 auto;
  border: 1.8px solid var(--akzent); border-radius: 50%;
  display: grid; place-content: center; background: transparent; cursor: pointer;
  position: relative;
}
ul.aufgaben input[type="checkbox"]::before, .detailkopf input[type="checkbox"]::before {
  content: ""; position: absolute; inset: -.7rem;
}
ul.aufgaben input[type="checkbox"]:checked, .detailkopf input[type="checkbox"]:checked { background: var(--akzent); }
ul.aufgaben input[type="checkbox"]:checked::after, .detailkopf input[type="checkbox"]:checked::after {
  content: ""; width: .6rem; height: .3rem;
  border-left: 2px solid var(--akzent-text); border-bottom: 2px solid var(--akzent-text);
  transform: rotate(-45deg) translate(0, -1px);
}
ul.aufgaben .titel { flex: 1; min-width: 0; overflow-wrap: break-word; }
ul.aufgaben .titel.durchgestrichen { text-decoration: line-through; color: var(--gedimmt); }
ul.aufgaben .zeichen { color: var(--gedimmt); }
ul.aufgaben .schrittzahl { flex: 0 0 auto; font-family: var(--mono); font-size: .72rem; color: var(--gedimmt); }
ul.aufgaben .listenname { font-size: .72rem; font-weight: 500; color: var(--gedimmt); background: var(--grund); border: 1px solid var(--linie); border-radius: 4px; padding: .12rem .45rem; flex: 0 1 auto; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
ul.aufgaben .faellig { font-family: var(--mono); font-size: .72rem; color: var(--gedimmt); flex: 0 0 auto; }
ul.aufgaben .faellig.ueberfaellig { color: var(--rot); font-weight: 500; }
ul.aufgaben .faellig.heutefaellig { color: var(--akzent); font-weight: 500; }
ul.aufgaben .loeschen, .termin .loeschen {
  border: 0; background: none; color: var(--gedimmt); font-size: 1.05rem;
  padding: .6rem .7rem; margin: -.45rem -.35rem; cursor: pointer; font-family: inherit;
}
button.zurueckholen { border: 0; background: none; color: var(--akzent); font-size: .82rem; font-weight: 600; font-family: inherit; padding: .6rem .4rem; margin: -.45rem 0; cursor: pointer; flex: 0 0 auto; }
ul.aufgaben.eingebettet { margin: 0; }
#erledigte li { opacity: .62; }
#erledigte .titel { text-decoration: line-through; color: var(--gedimmt); }

/* Listen-Uebersicht */
.listenkarte {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 8px;
  padding: .8rem .9rem; margin-bottom: .45rem; cursor: pointer;
  color: var(--text); font-size: 1rem; font-family: inherit; text-align: left;
}
.listenkarte .titel { flex: 1; min-width: 0; overflow-wrap: break-word; display: inline-flex; align-items: center; gap: .45rem; }
.listenkarte .zeichen { color: var(--gedimmt); }
/* Zaehler neutral halten — Bidoli Blue bleibt Aktionen und Aktiv-Zustaenden vorbehalten */
.zaehler { font-family: var(--mono); font-size: .72rem; background: var(--grund); color: var(--gedimmt); border: 1px solid var(--linie); border-radius: 4px; padding: .1rem .4rem; }
.listenfarbe { width: .65rem; height: .65rem; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
#papierkorb-oeffnen { margin-top: 1rem; color: var(--gedimmt); }
#listeformular { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: .75rem; margin-top: 1rem; }
#listeformular input { width: 100%; padding: .6rem .75rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); color: var(--text); margin-bottom: .5rem; }
#listeformular .terminzeile input { margin-bottom: 0; }

/* Aufgaben-Detail */
.detailkopf { display: flex; align-items: center; gap: .7rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: .7rem .8rem; margin-bottom: 1rem; }
.detailkopf input#aufgabe-titel, .detailkopf input#termin-titel { flex: 1; min-width: 0; border: 0; background: none; font-size: 1.05rem; font-weight: 600; font-family: inherit; color: var(--text); }

/* Agenda / Termine */
.termin { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--linie); border-radius: 8px; padding: .62rem .8rem; margin-bottom: .4rem; cursor: pointer; }
/* weitergezogener Termin: bleibt als Beleg stehen, tritt aber zurueck */
.termin.weitergezogen .titel, .termin.weitergezogen .terminzeit { color: var(--gedimmt); }
/* aufklappbare Checkliste direkt in der Terminzeile */
.klapppfeil { flex: 0 0 auto; border: 0; background: none; color: var(--gedimmt); font-size: .8rem; padding: .3rem .35rem; margin: -.3rem -.2rem; cursor: pointer; font-family: inherit; }
.termin .terminpunkte { width: 100%; margin: .15rem 0 0; padding: .35rem 0 0; border-top: 1px solid var(--linie); cursor: default; }
.termin .terminpunkte li { border: 0; background: none; padding: .3rem 0; margin: 0; cursor: default; }
.terminzeit { flex: 0 0 auto; font-family: var(--mono); font-size: .74rem; color: var(--akzent); font-weight: 500; min-width: 5.4rem; }
.termin .titel { flex: 1; min-width: 0; overflow-wrap: break-word; }
.termin .zeichen { flex: 0 0 auto; color: var(--gedimmt); }

/* Monatsuebersicht */
#modusleiste { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
/* Kalender-Filter: je Kalender ein Chip zum Ein-/Ausblenden */
#kalenderfilter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
#kalenderfilter:empty { display: none; }
.filterchip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--linie); background: var(--karte); color: var(--text); border-radius: 6px; padding: .32rem .7rem; font-size: .8rem; font-weight: 500; font-family: inherit; cursor: pointer; }
.filterchip .listenfarbe { border: 1px solid transparent; }
.filterchip.aus { color: var(--gedimmt); background: var(--grund); }
.filterchip.aus .listenfarbe { background: transparent; border-color: var(--linie); }
#monatsnav { display: flex; align-items: center; gap: .1rem; position: relative; }
#monatsnav button { border: 0; background: none; color: var(--text); font-size: 1rem; font-family: inherit; padding: .6rem .7rem; cursor: pointer; }
/* feste Breite (laengster Titel: "KW 36 · Sep 2026"), damit die
   Blaetter-Pfeile nicht mit der Textlaenge wandern */
#monatsnav #monatstitel { font-weight: 600; font-size: .98rem; min-width: 10.5rem; text-align: center; white-space: nowrap; }
/* kleiner Pfeil zeigt: der Titel ist die Monat/Jahr-Auswahl */
#monatstitel::after { content: '▾'; font-size: .62em; margin-left: .3rem; color: var(--gedimmt); }
#monatspanel {
  position: absolute; top: calc(100% + .3rem); left: 50%; transform: translateX(-50%);
  background: var(--karte); border: 1px solid var(--linie); border-radius: 8px;
  padding: .6rem .7rem .7rem; width: 16.5rem; z-index: 30;
}
#jahrzeile { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
#jahr-anzeige { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; font-weight: 500; }
#panelmonate { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
#panelmonate button { border: 1px solid transparent; border-radius: 6px; padding: .5rem 0; font-size: .85rem; }
#panelmonate button.jetzt { color: var(--akzent); font-weight: 600; border-color: var(--linie); }
#panelmonate button.aktiv { background: var(--akzent); color: var(--akzent-text); font-weight: 600; }
/* schmale Schirme: Panel buendig zur Navigationskante statt mittig unterm Titel */
@media (max-width: 600px) {
  #monatspanel { left: 0; transform: none; }
}
#monatswahl { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.modusrechts { display: flex; gap: .35rem; }
.modusrechts button { border: 1px solid var(--linie); background: var(--karte); color: var(--akzent); border-radius: 6px; padding: .35rem .55rem; font-size: .78rem; font-weight: 500; font-family: inherit; cursor: pointer; min-height: 2.4rem; }
.modusrechts .moduswahl.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }

#monatsgitter { width: 100%; border-collapse: collapse; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; table-layout: fixed; }
#monatsgitter th { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--gedimmt); font-weight: 500; padding: .45rem 0 .3rem; text-transform: uppercase; }
#monatsgitter th.rot { color: var(--rot); }
#monatsgitter th.kw, #monatsgitter td.kw { width: 2rem; background: var(--grund); color: var(--gedimmt); font-family: var(--mono); font-size: .66rem; text-align: center; }
#monatsgitter td.tagzelle {
  height: 3.1rem; vertical-align: top; text-align: center;
  border-top: 1px solid var(--linie); cursor: pointer; position: relative;
  padding-top: .3rem;
}
#monatsgitter td.kw { border-top: 1px solid var(--linie); }
.tagnummer { display: inline-grid; place-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-size: .85rem; }
td.rot .tagnummer { color: var(--rot); font-weight: 500; }
td.anderer-monat .tagnummer { color: var(--gedimmt); opacity: .45; }
td.anderer-monat.rot .tagnummer { color: var(--rot); opacity: .4; }
td.istheute .tagnummer { background: var(--akzent); color: var(--akzent-text); font-weight: 600; }
td.gewaehlt { background: color-mix(in srgb, var(--akzent) 10%, transparent); }
td.gewaehlt .tagnummer { outline: 2px solid var(--akzent); outline-offset: 1px; }
.punkte { position: absolute; left: 0; right: 0; bottom: .3rem; display: flex; justify-content: center; gap: .2rem; }
.punkt { width: .38rem; height: .38rem; border-radius: 50%; display: inline-block; }
.termin-punkt { background: var(--akzent); }
.aufgabe-punkt { background: var(--aufgabe-punkt); }

#tagesblock { margin-top: 1rem; scroll-margin-bottom: 6.5rem; border-radius: 8px; }
/* Nach "Heute": die Tagesliste leuchtet kurz auf, damit klar ist, wo die Antwort steht */
@keyframes tagespuls { from { background: rgba(23, 92, 211, .12); } to { background: transparent; } }
#tagesblock.markiert { animation: tagespuls 1.4s ease-out 1; }
#tagesblock h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gedimmt); margin: .5rem 0 .5rem; }

/* Wochenansicht */
#wochenblock { margin-bottom: 1rem; }
#wochen-kopf, #wochen-ganztags { display: flex; }
.wzeit { flex: 0 0 2rem; }
.wtag { flex: 1; min-width: 0; text-align: center; font-size: .68rem; font-family: var(--mono); text-transform: uppercase; color: var(--gedimmt); padding: .25rem 0; display: flex; flex-direction: column; gap: .1rem; }
.wtag b { font-size: .92rem; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--text); font-weight: 600; }
.wtag.rot span, .wtag.rot b { color: var(--rot); }
.wtag.istheute b { background: var(--akzent); color: var(--akzent-text); border-radius: 50%; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; margin: 0 auto; }
.wganz { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 1px; }
.wchip { background: var(--navy); color: #fff; border-radius: 4px; font-size: .62rem; padding: 1px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
#wochen-gitter { display: flex; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; margin-top: .25rem; }
.wzeitspalte { position: relative; background: var(--grund); }
.wzeitspalte span { position: absolute; right: 4px; font-family: var(--mono); font-size: .6rem; color: var(--gedimmt); transform: translateY(-50%); }
.wspalte { flex: 1; min-width: 0; position: relative; border-left: 1px solid var(--linie); background-image: repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px 44px); }
.wspalte.istheute { background-color: color-mix(in srgb, var(--akzent) 7%, transparent); }
.wblock { position: absolute; background: var(--akzent); color: #fff; border-radius: 4px; padding: 1px 3px; font-size: .6rem; line-height: 1.25; overflow: hidden; cursor: pointer; box-sizing: border-box; border: 1px solid rgb(255 255 255 / 25%); }
.wblock span { font-family: var(--mono); }
.wblock b { display: block; font-size: .64rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wjetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--rot); z-index: 2; pointer-events: none; }

/* Suche und Einstellungen */
#suche-feld { width: 100%; padding: .7rem .85rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--linie); border-radius: 6px; background: var(--karte); color: var(--text); margin-bottom: 1rem; }
.karte-block { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: .85rem .9rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.karte-block p { color: var(--gedimmt); font-size: .9rem; }
.farbpunkt { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--linie); flex: 0 0 auto; cursor: pointer; padding: 0; }
#farben-liste .titel { display: inline-flex; align-items: center; gap: .45rem; }
/* Farbtabelle: klappt unter der Zeile auf, ein Tipp waehlt die Farbe */
#farben-liste li { flex-wrap: wrap; }
.farbtabelle { width: 100%; display: flex; flex-wrap: wrap; gap: .55rem; padding: .5rem 0 .15rem; border-top: 1px solid var(--linie); margin-top: .25rem; }
.farbtabelle .farbpunkt { border-color: transparent; }
.farbtabelle .farbpunkt.gewaehlt { border-color: var(--text); }
/* "farblos": leerer Kreis mit diagonalem Strich */
.farbtabelle .farbpunkt.farblos { background: var(--karte); border-color: var(--linie); position: relative; overflow: hidden; }
.farbtabelle .farbpunkt.farblos::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 130%; height: 1.5px; background: var(--gedimmt); transform: translate(-50%, -50%) rotate(-45deg); }
.farbtabelle .farbpunkt.farblos.gewaehlt { border-color: var(--text); }
#push-schalter { border: 1px solid var(--linie); background: var(--karte); color: var(--akzent); border-radius: 6px; padding: .45rem .8rem; font-size: .82rem; font-weight: 500; font-family: inherit; margin-bottom: .9rem; cursor: pointer; min-height: 2.4rem; display: inline-flex; align-items: center; gap: .4rem; }

/* Tab-Leiste unten */
#tabnav {
  position: fixed; inset: auto 0 0 0; display: flex;
  background: var(--karte); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#tabnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  border: 0; background: none; color: var(--gedimmt); font-family: inherit;
  padding: .55rem 0 .55rem; cursor: pointer;
}
#tabnav .symbol { width: 1.35rem; height: 1.35rem; }
#tabnav button span:last-child { font-size: .68rem; font-weight: 500; letter-spacing: .02em; }
#tabnav button.aktiv { color: var(--akzent); }

/* Desktop: mehr Luft fuer den Inhalt, die Tab-Leiste wird zur zentrierten
   Steuerleiste mit Border (kein Schatten) — sonst wirkt die App wie eine
   hochskalierte Handy-Ansicht */
@media (min-width: 900px) {
  main { max-width: 46rem; padding-bottom: 7rem; }
  #tabnav {
    inset: auto 0 1.1rem 0;
    width: 24rem; margin: 0 auto;
    border: 1px solid var(--linie); border-radius: 8px;
    padding: 0;
  }
  #tabnav button { padding: .5rem 0 .55rem; }
}