/* Fumi — Oberfläche nach Hemkes Designentwurf vom 15.09.2026
   (`Fumi_Full_Design_Handoff.zip`, Referenz im Repo unter design/).

   Drei Spalten auf hellem Grund, alles als abgesetzte Karten:

       Navigation │ Arbeitsfläche │ Fumis Kontextspalte

   Die rechte Spalte ist das Eigentliche an diesem Entwurf. Sie bleibt immer
   stehen und beantwortet drei Fragen, ohne dass man irgendwo hinklickt:
   Was braucht mich jetzt? Was hat Fumi von selbst getan? Was sagt der
   Kalender dazu? Der mittlere Block ist damit auch der Ort für Regel R7 —
   was Fumi ohne Nachfrage tut, steht sichtbar da.

   Farbe: Fumi-Pink (#d95f82) als einzige Interaktionsfarbe, Navy als
   Schrift, kühles Grau als Grund. Die Nebenfarben (grün, blau, orange,
   violett) tragen Kategorien — nie Dringlichkeit. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg:        #F7F8FB;
  --card:      #FFFFFF;
  --line:      #E6E9EF;
  --text:      #15223A;
  --muted:     #728096;
  --navy:      #17325B;

  --pink:      #D95F82;
  --pinkDeep:  #9D3858;
  --pinkSoft:  #FFF0F5;
  --pinkLine:  #F3C5D3;

  --green:     #4F8C6C;  --greenSoft:  #EDF8F1;
  --blue:      #5E86C9;  --blueSoft:   #EEF4FF;
  --orange:    #C98A45;  --orangeSoft: #FFF5E9;
  --violet:    #785EC2;  --violetSoft: #F3F0FF;

  --shadow: 0 12px 30px rgba(36,47,66,.08);
  --r-gross: 24px;
  --r:       16px;
  --r-klein: 12px;
  --tempo: .18s cubic-bezier(.4,0,.2,1);
  --auf-flaeche: #FFFFFF;
}

/* Abendmodus: derselbe Bau, nur nachts. Die Nebenfarben werden aufgehellt,
   damit sie auf dunklem Grund überhaupt sprechen; `--auf-flaeche` kippt mit,
   sonst steht weiße Schrift auf hellem Pink. */
:root[data-modus="abend"] {
  --bg:        #12151C;
  --card:      #1A1F29;
  --line:      #2B3240;
  --text:      #E8ECF4;
  --muted:     #98A4B8;
  --navy:      #E8ECF4;

  --pink:      #F08BAA;
  --pinkDeep:  #F7A9C0;
  --pinkSoft:  #2E1D26;
  --pinkLine:  #4A2B38;

  --green:     #6FD3A3;  --greenSoft:  #172C23;
  --blue:      #8FB4F0;  --blueSoft:   #17223A;
  --orange:    #E0AE68;  --orangeSoft: #2E2417;
  --violet:    #AE9CF0;  --violetSoft: #221C3A;

  --shadow: 0 12px 30px rgba(0,0,0,.45);
  --auf-flaeche: #14171E;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--navy); line-height: 1.25; font-weight: 700; }
.hidden { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--pink); }

input, textarea, select {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-klein); padding: 10px 13px; width: 100%; outline: none;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus {
  border-color: var(--pink); box-shadow: 0 0 0 3px var(--pinkSoft);
}
textarea { resize: vertical; line-height: 1.7; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

.btn {
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-klein); padding: 10px 16px; font-size: 14px;
  font-weight: 500; min-height: 42px; transition: all var(--tempo);
}
.btn:hover { border-color: var(--pink); color: var(--pinkDeep); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary, .btn.primary {
  background: var(--pink); color: var(--auf-flaeche); border-color: var(--pink);
  font-weight: 600;
}
.btn--primary:hover, .btn.primary:hover {
  background: var(--pinkDeep); border-color: var(--pinkDeep);
  color: var(--auf-flaeche);
}
.btn--ok { background: var(--green); color: var(--auf-flaeche); border-color: var(--green); }
.btn--ok:hover { color: var(--auf-flaeche); border-color: var(--green); }
.btn--sm { padding: 7px 13px; font-size: 13px; min-height: 36px; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { background: var(--bg); color: var(--text); border-color: transparent; }

/* ── Anmeldung ─────────────────────────────────────────────────────────── */
.gate { display: grid; place-items: center; min-height: 100vh; padding: 24px;
        background: radial-gradient(900px 500px at 20% -10%, var(--pinkSoft), transparent 60%),
                    var(--bg); }
.gate__card { width: 100%; max-width: 380px; background: var(--card);
              border: 1px solid var(--line); border-radius: var(--r-gross);
              padding: 36px 32px; display: grid; gap: 13px; box-shadow: var(--shadow); }
.gate__eyebrow { font-size: 11px; letter-spacing: .18em; color: var(--muted);
                 text-transform: uppercase; font-weight: 700; }
.brand { font-size: 30px; font-weight: 700; color: var(--navy); }
.brand__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
              background: var(--pink); margin-right: 10px; vertical-align: middle; }
.gate__sub { color: var(--muted); margin-bottom: 8px; }
.gate__err { color: #C0392B; font-size: 13px; min-height: 18px; }

/* ── Der Rahmen: drei Spalten ──────────────────────────────────────────── */
.app { min-height: 100vh; display: grid;
       grid-template-columns: 236px minmax(0, 1fr) 320px;
       gap: 18px; padding: 18px; align-items: start; }

.sidebar, .assistant {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-gross); padding: 18px; box-shadow: var(--shadow);
  position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto;
}

/* ── Navigation ────────────────────────────────────────────────────────── */
.marke { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.marke__bild { width: 52px; height: 52px; border-radius: 18px; flex: none;
               background: linear-gradient(145deg, #FFF8FB, #FFE6EF);
               display: grid; place-items: center;
               border: 1px solid var(--pinkLine); position: relative; }
/* Der grüne Punkt sagt: Fumi arbeitet gerade. Er ist echt — er hängt am
   letzten Abruf, nicht an einer Animation. */
.marke__bild::after { content: ''; width: 10px; height: 10px; border-radius: 50%;
                      background: #39B877; border: 3px solid var(--card);
                      position: absolute; right: -3px; bottom: -3px; }
.marke h1 { font-size: 19px; margin: 0; }
.marke p { font-size: 12px; margin: 3px 0 0; color: var(--muted); }

nav { display: flex; flex-direction: column; gap: 6px; }
.nav { border: 0; background: transparent; border-radius: 13px;
       padding: 11px 13px; text-align: left; color: #536278; font-size: 14px;
       display: flex; gap: 11px; align-items: center; min-height: 44px;
       transition: all var(--tempo); width: 100%; }
.nav:hover { background: var(--bg); color: var(--text); }
.nav.is-active { background: var(--pinkSoft); color: var(--pinkDeep); font-weight: 700; }
/* „Mehr" gehört zur unteren Leiste auf dem Handy. Am Schreibtisch stehen
   ohnehin alle zehn Punkte untereinander — dort wäre der Knopf ein elfter,
   der nichts tut. */
.nav--mehr { display: none; }
.nav__n { margin-left: auto; background: #F6DFE7; color: var(--pinkDeep);
          padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.nav.is-active .nav__n { background: var(--card); }
.nav__icon { width: 18px; text-align: center; opacity: .75; }

/* Postfächer als Unterpunkte von „Mail". Fünf Postfächer, zwischen denen man
   den ganzen Tag springt, gehören sichtbar in die Navigation — nicht in einen
   Auswahlkasten, den man erst aufklappen muss. */
.boxen { display: flex; flex-direction: column; gap: 2px;
         margin: 2px 0 6px 13px; padding-left: 11px;
         border-left: 2px solid var(--line); }
.box { background: transparent; border: none; width: 100%; text-align: left;
       padding: 6px 10px; border-radius: 9px; display: flex; align-items: center;
       gap: 8px; font-size: 13px; color: var(--muted); transition: all var(--tempo); }
.box:hover { background: var(--bg); color: var(--text); }
.box.is-active { background: var(--pinkSoft); color: var(--pinkDeep); font-weight: 600; }
.box__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box__n { font-variant-numeric: tabular-nums; font-size: 12px; }
.box__taste { font: 600 10px/13px ui-monospace, Menlo, monospace; min-width: 15px;
              padding: 0 3px; border: 1px solid var(--line); border-radius: 4px;
              text-align: center; opacity: 0; transition: opacity var(--tempo); }
.sidebar:hover .box__taste { opacity: .75; }
@media (hover: none) { .box__taste { display: none; } }

.status { margin-top: 18px; border: 1px solid #CBE8D8; background: var(--greenSoft);
          border-radius: var(--r); padding: 12px; font-size: 13px; color: #366D53; }
:root[data-modus="abend"] .status { border-color: #2A4A38; color: var(--green); }
.status small { display: block; margin-top: 4px; opacity: .85; }

/* ── Arbeitsfläche ─────────────────────────────────────────────────────── */
.main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.topbar { display: flex; justify-content: space-between; align-items: center;
          gap: 16px; background: var(--card); border: 1px solid var(--line);
          border-radius: 20px; padding: 14px 18px; box-shadow: var(--shadow);
          flex-wrap: wrap; }
.topbar .eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
                   color: var(--muted); font-weight: 700; }
.topbar h2 { font-size: 25px; margin: 3px 0 0; }
.top-actions { display: flex; gap: 9px; align-items: center; }

.view { display: none; }
.view.is-active { display: flex; flex-direction: column; gap: 16px; }

.card { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--r-gross); padding: 20px 22px; box-shadow: var(--shadow); }
.card__title { font-size: 15px; font-weight: 700; color: var(--navy);
               margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.subtle, .note { color: var(--muted); font-size: 13px; line-height: 1.6; }
.note--warn { color: var(--orange); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.ul { margin: 8px 0 0 18px; color: var(--muted); line-height: 1.7; }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 16px; }
.kv dt { color: var(--muted); font-weight: 500; }

/* Kennzahlen oben im Dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
         gap: 14px; }
.stat .k { font-size: 12.5px; color: var(--muted); }
.stat .v { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.2;
           font-variant-numeric: tabular-nums; }
.stat .f { font-size: 12.5px; font-weight: 600; }
.f.pink { color: var(--pink); } .f.green { color: var(--green); }
.f.blue { color: var(--blue); } .f.violet { color: var(--violet); }

.pill { font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
        background: var(--bg); color: var(--muted); white-space: nowrap;
        border: 1px solid var(--line); }
.pill--pink { background: var(--pinkSoft); color: var(--pinkDeep); border-color: var(--pinkLine); }
.pill--green { background: var(--greenSoft); color: var(--green); border-color: transparent; }
.pill--blue { background: var(--blueSoft); color: var(--blue); border-color: transparent; }
.pill--orange { background: var(--orangeSoft); color: var(--orange); border-color: transparent; }
.pill--violet { background: var(--violetSoft); color: var(--violet); border-color: transparent; }

/* ── Mail: Liste und Detail nebeneinander ──────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
         gap: 16px; align-items: start; }
.list { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--r-gross); box-shadow: var(--shadow);
        padding: 14px; max-height: calc(100vh - 190px); overflow-y: auto; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters select, .filters input { flex: 1; min-width: 120px; font-size: 13px; }

.item { position: relative; padding: 13px 14px 13px 16px; border-radius: var(--r);
        cursor: pointer; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr);
        border: 1px solid transparent; transition: all var(--tempo); }
.item > * { min-width: 0; }
.item + .item { margin-top: 4px; }
.item:hover { background: var(--bg); }
.item.is-active { background: var(--pinkSoft); border-color: var(--pinkLine); }
.item.is-done { opacity: .5; }
/* Dringlichkeit: eine Farbe, drei Stärken. Keine Ampel — wenn die Hausfarbe
   im roten Bereich liegt, kann Rot nicht auch „eilig" heißen. */
.item::before { content: ''; position: absolute; left: 0; top: 13px; bottom: 13px;
                width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.item--heute::before { background: var(--pink); width: 4px; }
.item--woche::before { background: var(--pink); opacity: .45; }
.item--ruhig::before { background: var(--pink); opacity: .18; }

.item__row { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.item__subject { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; color: var(--navy); }
.item__from { color: var(--muted); font-size: 12.5px; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
.item__sum { color: var(--muted); font-size: 13px; display: -webkit-box;
             -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.wann { display: inline-flex; align-items: center; font-size: 11.5px;
        padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.wann--heute { background: var(--pink); color: var(--auf-flaeche); }
.wann--woche { background: var(--pinkSoft); color: var(--pinkDeep); }
.wann--ruhig { background: var(--bg); color: var(--muted); }
.wann--still { background: var(--bg); color: var(--muted); }
.tag { font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
       background: var(--bg); color: var(--muted); white-space: nowrap;
       border: 1px solid var(--line); }
.tag--box { background: transparent; }

.detail { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.detail__empty { color: var(--muted); display: grid; place-items: center;
                 min-height: 280px; background: var(--card);
                 border: 1px solid var(--line); border-radius: var(--r-gross); }
.detail h2 { font-size: 23px; margin-bottom: 8px; }
.detail__meta { color: var(--muted); font-size: 13px; margin-bottom: 18px;
                display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.detail__meta .spacer { min-width: 8px; }
.body-text { white-space: pre-wrap; line-height: 1.7; color: var(--text);
             max-height: 380px; overflow-y: auto; background: var(--bg);
             border-radius: var(--r); padding: 14px 16px; }

/* ── Antworten ─────────────────────────────────────────────────────────── */
/* Als wer gesendet wird, steht groß und immer da. Bei fünf Postfächern ist
   das der Fehler, der sonst passiert — und der einzige an einer Mail, der
   sich hinterher nicht richtigstellen lässt. */
.absender { background: var(--pinkSoft); border: 1px solid var(--pinkLine);
            color: var(--pinkDeep); border-radius: var(--r-klein);
            padding: 9px 13px; font-size: 13px; margin-bottom: 14px; }
.feld { display: grid; grid-template-columns: 74px minmax(0, 1fr);
        align-items: center; gap: 10px; margin-bottom: 8px; }
.feld > span { font-size: 12.5px; color: var(--muted); }

/* ── Fumis Kontextspalte ───────────────────────────────────────────────── */
.assistant { display: flex; flex-direction: column; gap: 16px; }
.fumi-kopf { background: var(--pinkSoft); border: 1px solid var(--pinkLine);
             border-radius: var(--r); padding: 14px; }
.fumi-kopf__z { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.mini-fumi { width: 26px; height: 26px; border-radius: 50%; flex: none;
             background: var(--card); border: 1px solid var(--pinkLine);
             display: grid; place-items: center; font-weight: 700;
             color: var(--pink); font-size: 13px; }
.fumi-kopf h3 { font-size: 15px; }
.fumi-kopf p { font-size: 12.5px; color: var(--pink); }
.hinweis { background: var(--card); border-radius: var(--r-klein);
           padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.hinweis:last-child { margin-bottom: 0; }
.hinweis__art { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
                font-weight: 700; color: var(--pinkDeep); margin-bottom: 3px; }
.hinweis--gruen .hinweis__art { color: var(--green); }
.hinweis--blau .hinweis__art { color: var(--blue); }
.aktionen { display: flex; flex-direction: column; gap: 8px; }
.aktionen .btn { justify-content: flex-start; text-align: left; }
.absender-karte { display: flex; gap: 11px; align-items: center; background: var(--bg);
                  border-radius: var(--r-klein); padding: 11px 13px; }
.absender-karte b { display: block; color: var(--navy); font-size: 13.5px; }
.absender-karte span { font-size: 12.5px; color: var(--muted); }

/* ── Die Rückholleiste ─────────────────────────────────────────────────── */
/* Sie kostet keinen Klick: Man muss nichts tun, damit die Mail rausgeht —
   nur etwas, damit sie es nicht tut. */
.ausgangleiste { position: fixed; bottom: 18px; left: 50%;
                 transform: translateX(-50%); z-index: 60;
                 background: var(--navy); color: #fff; border-radius: var(--r);
                 padding: 10px 14px; box-shadow: 0 18px 40px rgba(20,30,50,.35);
                 display: flex; flex-direction: column; gap: 8px;
                 max-width: min(620px, calc(100vw - 36px)); }
:root[data-modus="abend"] .ausgangleiste { background: var(--card);
                                           border: 1px solid var(--line); }
.ausgang__z { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.ausgang__an { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; max-width: 260px; }
.ausgang__wann { color: #C9D3E4; flex: 1; font-variant-numeric: tabular-nums; }
:root[data-modus="abend"] .ausgang__wann { color: var(--muted); }
.ausgang__fehler { color: #FFB4A8; }
.ausgangleiste .btn { background: rgba(255,255,255,.12); border-color: transparent;
                      color: #fff; }
.ausgangleiste .btn:hover { background: rgba(255,255,255,.22); color: #fff; }
:root[data-modus="abend"] .ausgangleiste .btn { background: var(--bg); color: var(--text); }

/* ── Tagesplan / Zeitstrahl ────────────────────────────────────────────── */
.plan { display: flex; flex-direction: column; gap: 16px; }
.plan__head { font-size: 24px; font-weight: 700; color: var(--navy); }
.plan__sub { color: var(--muted); margin-top: 4px; max-width: 62ch; }
.block { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px;
         padding: 11px 0; border-bottom: 1px solid var(--line); }
.block:last-child { border-bottom: none; }
.block__time { color: var(--pink); font-weight: 600; font-variant-numeric: tabular-nums; }
.block__typ { font-size: 12.5px; color: var(--muted); }

.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
         background: var(--navy); color: #fff; padding: 12px 22px;
         border-radius: 999px; font-size: 14px; z-index: 80; font-weight: 500;
         box-shadow: 0 12px 34px rgba(20,30,50,.4); }
.toast--err { background: #C0392B; color: #fff; }
kbd { font: 600 12px/1.6 ui-monospace, Menlo, monospace; background: var(--bg);
      border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px;
      color: var(--muted); }
.badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 1px 5px;
         border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 16px;
         text-align: center; background: var(--pink); color: var(--auf-flaeche); }
.badge.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { transition: none !important; animation: none !important; }
}

/* ── Schmale Schirme ───────────────────────────────────────────────────── */
/* Fumi bleibt Desktop zuerst. Das hier hält sie benutzbar — es macht sie
   nicht zur Telefon-App. Die Kontextspalte rutscht nach unten, statt zu
   verschwinden: Was Fumi von selbst getan hat, gehört nicht versteckt. */
@media (max-width: 1280px) {
  .app { grid-template-columns: 210px minmax(0, 1fr); }
  .assistant { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 900px) {
  /* ──────────────────────────────────────────────────────────────────────
     Die Handy-Ansicht.

     Hemke am 16.09.2026: „Handy-Ansicht ist noch katastrophal, so kann ich
     nicht wirklich schön arbeiten."

     Er hatte recht, und der Grund war grundsätzlich: Die Seitenleiste lag
     als erster Block ÜBER dem Inhalt — Logo, zehn Menüpunkte, Postfachfilter,
     Name, Abmelden. Rund 1300 Pixel, bevor irgendetwas Inhaltliches kam. In
     jeder Ansicht, jedes Mal.

     Auf dem Handy gehört die Navigation nach unten, wo der Daumen ist. Vier
     tägliche Punkte plus „Mehr" — zehn Zeichen nebeneinander kann niemand
     treffen.
     ────────────────────────────────────────────────────────────────────── */
  .app { grid-template-columns: minmax(0, 1fr); gap: 12px;
         padding: 10px 12px calc(76px + env(safe-area-inset-bottom)); }

  /* Die Leiste unten. `fixed` und nicht am Seitenende: Sie soll beim
     Scrollen stehen bleiben, sonst sucht man sie wieder. */
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto;
             z-index: 60; max-height: none; border-radius: 0;
             border-top: 1px solid var(--line); background: var(--card);
             padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
             box-shadow: 0 -4px 20px rgba(21,34,58,.09); }

  /* Alles, was nicht Navigation ist, verschwindet aus der Leiste: Logo,
     Statuszeile, Name, Abmelden. Der Name steht ohnehin im Dashboard, und
     „Abmelden" sitzt bei den Einstellungen. */
  .sidebar .marke, .sidebar .status, .sidebar > .row { display: none; }

  nav { flex-direction: row; gap: 2px; }
  .nav { display: none; }                 /* erst einmal alle raus … */
  .nav[data-leiste], .nav--mehr {         /* … und nur die fünf zurück */
    display: flex; flex: 1 1 0; min-width: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 7px 2px; min-height: 52px;
    font-size: 10.5px; line-height: 1.15; text-align: center;
    white-space: nowrap; border-radius: 12px; }
  .nav[data-leiste] .nav__icon, .nav--mehr .nav__icon { font-size: 19px; }
  .nav.is-active { background: var(--pinkSoft); color: var(--pinkDeep); }

  /* Die Zahl neben „Mail" als kleiner Punkt oben rechts am Zeichen — als
     Zeile daneben passt sie nicht mehr. */
  .nav[data-leiste] .nav__n { position: absolute; transform: translate(14px, -6px);
                              font-size: 10px; padding: 1px 5px; }
  .nav[data-leiste] { position: relative; }

  /* Ist „Mehr" aufgeklappt, stehen alle Punkte da — als Blatt über der
     Leiste, nicht als endlose Spalte. */
  .sidebar.ist-offen { top: auto; max-height: 82vh; overflow-y: auto; }
  .sidebar.ist-offen nav { flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
  .sidebar.ist-offen .nav { display: flex; flex-direction: row;
                            flex: 1 1 44%; align-items: center;
                            text-align: left; font-size: 13px;
                            padding: 11px 12px; min-height: 46px; }
  .sidebar.ist-offen .nav .nav__icon { font-size: 16px; }
  .sidebar.ist-offen > .row { display: flex; padding: 4px 8px 8px; }

  /* Der Postfachfilter gehört zur Post, nicht unter jede Ansicht — und im
     aufgeklappten Blatt ans Ende, nicht mitten zwischen die Menüpunkte. */
  .boxen { display: none; }
  .sidebar.ist-offen .boxen { display: flex; flex-direction: row; gap: 6px;
                              overflow-x: auto; scrollbar-width: none;
                              margin: 6px 0 2px; padding: 8px 8px 0;
                              border-left: none; border-top: 1px solid var(--line);
                              flex: 1 1 100%; order: 9; }
  .box { flex: none; white-space: nowrap; }
  /* „Mehr" bleibt der letzte Punkt, auch wenn der Filter dazwischenliegt. */
  .sidebar.ist-offen .nav--mehr { order: 10; flex: 1 1 100%; }

  /* Fumi tritt zurück, solange das Blatt offen ist — sonst liegt sie auf
     „Mehr" und man klappt statt zu tippen. */
  .sidebar.ist-offen ~ .assistant .fumi-ruf,
  body:has(.sidebar.ist-offen) .assistant .fumi-ruf { display: none; }

  .split { grid-template-columns: minmax(0, 1fr); }
  .list { max-height: none; }
  .list.is-mobile-hidden { display: none; }
  .detail { display: none; }
  .detail.is-mobile-open { display: flex; }

  /* Kopfzeile schlank: Der Name der Ansicht reicht, die „Kommunikations-
     zentrale" darüber ist auf 390 Pixeln nur Ballast. */
  .topbar { padding: 2px 0 6px; align-items: center; }
  .topbar .eyebrow { display: none; }
  .topbar h2 { font-size: 20px; }
  .top-actions { gap: 6px; }
  .top-actions .btn { padding: 8px 11px; font-size: 12.5px; }

  /* Fumi schwebt über der Leiste, nicht darauf. */
  .assistant .fumi-ruf { position: fixed; right: 12px;
                         bottom: calc(80px + env(safe-area-inset-bottom));
                         z-index: 65; width: auto; margin: 0; padding: 11px 16px;
                         border-radius: 999px; align-items: center;
                         box-shadow: 0 8px 28px rgba(217,95,130,.40);
                         background: var(--pink); color: #fff; border: none; }
  .assistant .fumi-ruf h3 { color: #fff; margin: 0; font-size: 14px; }
  .assistant .fumi-ruf p { display: none; }
  .assistant .fumi-ruf .mini-fumi { background: rgba(255,255,255,.22);
                                    color: #fff; border-color: transparent; }
  .assistant .fumi-kopf { background: none; border: none; padding: 0;
                          min-height: 0; }

  /* Der Chat füllt den Bildschirm — ein Gesprächsfenster mit Rand ringsum
     ist auf dem Handy verschenkter Platz. */
  .chatpanel { left: 0; right: 0; top: 0; bottom: 0; width: auto;
               border-radius: 0; border: none; }
  .chatpanel__kopf { align-items: center; padding: 12px 14px; gap: 8px;
                     padding-top: calc(12px + env(safe-area-inset-top)); }
  .chatpanel__kopf .note { display: none; }
  .chatpanel__kopf .mini-fumi { flex: none; }
  .chatpanel__fuss { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .chatpanel__fuss textarea { font-size: 16px; min-height: 60px; }

  /* Die Ausgangsleiste über die Navigation, nicht darüber hinweg. */
  /* **Die Kennzahlen als Kacheln, nicht als Spalte.**
     Vier Karten mit je einer Zahl kosteten 1500 Pixel — man scrollte an
     vier Zahlen vorbei, bevor irgendetwas kam. Nebeneinander sind es 300,
     und man sieht alle vier auf einmal. */
  #statKacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #statKacheln .stat { padding: 13px 14px; }
  #statKacheln .stat .k { font-size: 11.5px; line-height: 1.25; }
  #statKacheln .stat .v { font-size: 26px; margin: 2px 0; }
  #statKacheln .stat .f { font-size: 11px; line-height: 1.25; }

  /* Karten insgesamt schlanker: 20 Pixel Rand ringsum sind auf 390 Pixeln
     Breite ein Zehntel des Bildschirms. */
  .card { padding: 14px 15px; }
  .card__title { margin-bottom: 10px; font-size: 14.5px; }

  /* **Lange Listen zugeklappt.** Tageszettel und Tagesplan brachten
     zusammen 4000 Pixel auf die Startseite — man scrollte minutenlang an
     Dingen vorbei, die man gerade nicht braucht. Am Schreibtisch ist der
     Platz da und alles bleibt offen; hier klappt man auf, was man sucht. */
  .faltbar { position: relative; max-height: 132px; overflow: hidden; }
  .faltbar::after { content: ""; position: absolute; left: 0; right: 0;
                    bottom: 34px; height: 46px; pointer-events: none;
                    background: linear-gradient(transparent, var(--card)); }
  .faltbar.ist-offen { max-height: none; }
  .faltbar.ist-offen::after { display: none; }
  .faltbar__mehr { display: block; width: 100%; margin-top: 6px;
                   border: 1px solid var(--line); background: var(--card);
                   border-radius: 11px; padding: 9px; font: inherit;
                   font-size: 12.5px; font-weight: 600; color: var(--pinkDeep);
                   position: relative; z-index: 1; }

  /* **Die Filter schlank.** Vier Felder in zwei Reihen kosteten 330 Pixel,
     bevor die erste Mail kam — fast ein ganzer Bildschirm für Einstellungen,
     die man selten ändert. */
  .filters { gap: 6px; margin-bottom: 8px; }
  .filters select, .filters input { min-width: 0; flex: 1 1 46%;
                                    font-size: 13px; padding: 8px 10px; }

  /* **Die Liste dichter.** Jeder Eintrag war rund 470 Pixel hoch — zwei
     Mails je Bildschirm. Der Betreff bleibt groß, die Zusammenfassung wird
     auf zwei Zeilen gekürzt: Wer mehr wissen will, tippt die Mail an. */
  .item { padding: 11px 12px 11px 14px; gap: 4px; }
  .item__sum { display: -webkit-box; -webkit-line-clamp: 2;
               -webkit-box-orient: vertical; overflow: hidden; }
  .item__meta { gap: 5px; }
  .item__meta .tag { font-size: 11px; padding: 2px 8px; }

  /* Kopfzeile: Titel und Knöpfe in eine Zeile, die auch passt. */
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar h2 { flex: 1 1 auto; }

  /* Rückholleiste und Meldungen über die Navigation heben — sonst liegen
     sie darauf und man trifft beim „Zurückholen" den Kalender. */
  .ausgangleiste { bottom: calc(82px + env(safe-area-inset-bottom));
                   left: 10px; right: 10px; transform: none;
                   max-width: none; }
  .ausgangleiste .ausgang__an { max-width: 42vw; overflow: hidden;
                                text-overflow: ellipsis; white-space: nowrap; }
  .toast { bottom: calc(146px + env(safe-area-inset-bottom));
           left: 12px; right: 12px; transform: none; text-align: center; }
}

@media (max-width: 640px) { .bl-p__g { grid-template-columns: 1fr 1fr; } }

/* Zähler an der Registerkarte „Sendungen“: zeigt, wie viele Zuordnungen auf
   eine Entscheidung warten. Bewusst zurückhaltend — es ist eine Arbeitsliste,
   keine Alarmmeldung. */
.badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  background: var(--akzent);
  color: var(--auf-flaeche);
}
.badge.hidden { display: none; }

/* Der Erledigt-Knopf oben in der Kopfzeile. Der Platzhalter darf auf schmalen
   Schirmen nicht die ganze Zeile aufreißen — dort rutscht der Knopf lieber
   unter die Absenderangaben, als sie auseinanderzuziehen. */
.detail__meta .spacer { min-width: 8px; }
@media (max-width: 700px) { .detail__meta .spacer { flex-basis: 100%; } }

/* Zurück-Knopf auf schmalen Schirmen. Stand bis v3 nur im Kōbō-CSS und
   fehlte dadurch im Alleinbetrieb. */
.mobile-back { display: none; border: 1px solid var(--line); border-radius: 10px;
               background: var(--card); color: var(--pink); font-weight: 600;
               font-size: 13px; padding: 9px 12px; align-self: flex-start; }
@media (max-width: 900px) { .mobile-back { display: inline-flex; align-items: center; gap: 7px; } }

/* ── Vorlagen ──────────────────────────────────────────────────────────── */
.vorlagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 16px; }
.vorlage { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.vorlage__kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.vorlage__logo { width: 48px; height: 48px; object-fit: contain; flex: none;
                 border-radius: 10px; background: var(--bg); }
.vorschau { grid-column: 1 / -1; margin-top: 14px; }
.vorschau__paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                  gap: 14px; }
.vorschau__titel { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
                   color: var(--muted); font-weight: 700; margin-bottom: 6px; }
/* Der Mailrumpf bringt eigene Farben mit — er wird auf Weiß gezeigt, weil er
   beim Empfänger auch auf Weiß landet. Im Abendmodus wäre alles andere eine
   Vorschau, die lügt. */
.vorschau__rahmen { background: #fff; color: #15223A; border: 1px solid var(--line);
                    border-radius: var(--r-klein); padding: 16px; overflow-x: auto; }

/* ── Historie zum Absender ─────────────────────────────────────────────── */
.hist { display: flex; flex-direction: column; gap: 2px; }
.hist__z { display: flex; gap: 10px; align-items: baseline; width: 100%;
           text-align: left; background: transparent; border: 0;
           padding: 7px 10px; border-radius: var(--r-klein); font-size: 13.5px;
           transition: background var(--tempo); }
.hist__z:hover { background: var(--bg); }
.hist__d { color: var(--muted); font-size: 12.5px; white-space: nowrap;
           font-variant-numeric: tabular-nums; min-width: 92px; }
.hist__b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anh__i { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
          padding: 8px 10px; border-radius: var(--r-klein);
          background: var(--bg); margin-bottom: 6px; }

/* ── Tageszettel ───────────────────────────────────────────────────────── */
.zettel { border: 1px solid var(--line); border-radius: var(--r);
          padding: 14px 16px; margin-bottom: 12px; }
.zettel__text { white-space: pre-wrap; margin-bottom: 10px; }

/* ── Kalender: Tag und Woche ───────────────────────────────────────────── */
.umschalter { display: inline-flex; border: 1px solid var(--line);
              border-radius: var(--r-klein); overflow: hidden; }
.umschalter button { border: 0; background: transparent; color: var(--muted);
                     padding: 8px 14px; font-size: 13px; font-weight: 500; }
.umschalter button.is-active { background: var(--pinkSoft); color: var(--pinkDeep);
                               font-weight: 700; }

/* Die Legende trägt die Bedeutung der Farben. Ohne sie ist ein farbiger
   Kalender nur bunt. */
.legende { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 18px;
           padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.legende__z { display: inline-flex; align-items: center; gap: 6px;
              font-size: 12.5px; color: var(--muted); }
.legende__z i { width: 10px; height: 10px; border-radius: 3px; display: block; }

.termin { border-left: 3px solid var(--line); padding-left: 10px; margin-bottom: 8px; }
.termin:last-child { margin-bottom: 0; }
.termin--klick { cursor: pointer; }
.termin--klick:hover { background: var(--bg); }
.termin__t { font-weight: 600; color: var(--navy); }
.art { font-weight: 600; }

/* Wochenansicht: sieben Spalten, waagerecht scrollbar statt gequetscht.
   Eine Woche, in der man die Betreffe nicht mehr lesen kann, ist keine. */
.woche { display: grid; grid-template-columns: repeat(7, minmax(148px, 1fr));
         gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.wtag { min-width: 0; }
.wtag__kopf { display: flex; justify-content: space-between; align-items: baseline;
              padding: 7px 9px; border-radius: var(--r-klein);
              background: var(--bg); margin-bottom: 8px; }
.wtag__kopf b { color: var(--navy); font-size: 13px; }
.wtag__kopf span { font-size: 12px; color: var(--muted);
                   font-variant-numeric: tabular-nums; }
.wtag.ist-heute .wtag__kopf { background: var(--pinkSoft); }
.wtag.ist-heute .wtag__kopf b { color: var(--pinkDeep); }
.wtag__liste { display: flex; flex-direction: column; gap: 5px; }
.wtermin { border-left: 3px solid var(--line); background: var(--card);
           border-radius: 0 var(--r-klein) var(--r-klein) 0;
           padding: 6px 8px; font-size: 12.5px; }
.wtermin__z { color: var(--muted); font-variant-numeric: tabular-nums;
              margin-right: 5px; }
/* Wessen Kalender — als Kürzel, nicht als Farbe. Die Farbe ist für die Art
   reserviert; zwei Bedeutungen auf einem Kanal liest niemand auseinander. */
.wtermin__k { display: inline-block; font-size: 10px; font-weight: 700;
              text-transform: uppercase; letter-spacing: .04em;
              color: var(--muted); border: 1px solid var(--line);
              border-radius: 4px; padding: 0 4px; margin-right: 5px; }
.wtermin__b { display: block; margin-top: 3px; color: var(--text);
              overflow-wrap: anywhere; }
/* Ein Termin, den beide haben, bekommt beide Kürzel — und fällt dadurch
   leicht auf, weil er eine gemeinsame Verpflichtung ist. */
.wtermin__k.ist-beide { color: var(--pinkDeep); border-color: var(--pinkLine);
                        background: var(--pinkSoft); }
.einordnen { border: 0; background: transparent; color: var(--pink);
             font-size: 12px; font-weight: 600; padding: 0 0 0 8px; }
.einordnen:hover { text-decoration: underline; }
.kundenblock { margin-top: 18px; padding-top: 16px;
               border-top: 1px solid var(--line); }

/* ── Das Gespräch mit Fumi ─────────────────────────────────────────────── */
.fumi-ruf { background: transparent; border: 0; padding: 0; width: 100%;
            display: flex; gap: 10px; align-items: flex-start; text-align: left;
            margin-bottom: 12px; border-radius: var(--r-klein);
            transition: opacity var(--tempo); }
.fumi-ruf:hover { opacity: .78; }

/* Rechts angedockt statt mittig: Man arbeitet weiter, während Fumi sucht —
   ein Overlay über der Mail würde genau das verhindern. */
/* `display: flex` schlägt das hidden-Attribut — das unsichtbare Panel lag
   dann unsichtbar über der Seite und fing Klicks ab. Gilt für jedes Element,
   dessen display hier gesetzt wird. */
.chatpanel[hidden] { display: none !important; }
.chatpanel { position: fixed; right: 18px; bottom: 18px; top: 18px;
             width: min(440px, calc(100vw - 36px)); z-index: 70;
             background: var(--card); border: 1px solid var(--line);
             border-radius: var(--r-gross); box-shadow: 0 24px 60px rgba(20,30,50,.28);
             display: flex; flex-direction: column; overflow: hidden; }
.chatpanel__kopf { display: flex; gap: 10px; align-items: center;
                   padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chatpanel__verlauf { flex: 1; overflow-y: auto; padding: 16px;
                      display: flex; flex-direction: column; gap: 12px; }
.chatpanel__fuss { border-top: 1px solid var(--line); padding: 12px 16px;
                   display: flex; gap: 10px; align-items: flex-end; }
.chatpanel__fuss textarea { flex: 1; }

.cm { max-width: 92%; border-radius: var(--r); padding: 10px 13px;
      font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
      overflow-wrap: anywhere; }
.cm--ich { align-self: flex-end; background: var(--pinkSoft);
           color: var(--pinkDeep); border: 1px solid var(--pinkLine); }
.cm--fumi { align-self: flex-start; background: var(--bg); }
.cm--warte { align-self: flex-start; color: var(--muted); font-style: italic; }

/* Was Fumi getan hat — klein, aber sichtbar. Eine Assistenz, die unsichtbar
   handelt, ist keine Assistenz (Regel R7 gilt auch hier). */
.cschritte { align-self: flex-start; font-size: 12px; color: var(--muted);
             border-left: 2px solid var(--line); padding-left: 10px;
             display: flex; flex-direction: column; gap: 3px; }
.cschritt b { color: var(--text); font-weight: 600; }
.cschritt--fehler { color: var(--orange); }

@media (max-width: 900px) {
  .chatpanel { left: 12px; right: 12px; top: 12px; bottom: 12px; width: auto; }

  /* Auf dem Handy bricht die Kopfzeile sonst über fünf Zeilen um und
     schiebt das Gespräch aus dem Bild — gerade dann, wenn man im
     Außendienst schnell etwas fragen will. Der Erklärsatz ist dort
     entbehrlich: Wer den Chat öffnet, weiß, wofür er ihn öffnet. */
  .chatpanel__kopf { align-items: flex-start; padding: 12px 14px; gap: 8px; }
  .chatpanel__kopf .note { display: none; }
  .chatpanel__kopf .mini-fumi { flex: none; }
  .chatpanel__kopf > div[style] { min-width: 0; }

  /* Das Eingabefeld gehört auf dem Handy nach unten und groß genug zum
     Tippen — 16px, sonst zoomt iOS beim Hineintippen die ganze Seite. */
  .chatpanel__fuss textarea { font-size: 16px; min-height: 64px; }
}
.anhangzeile { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.anhangweg { border: 0; background: transparent; color: var(--muted);
             font-size: 11px; padding: 0 0 0 5px; cursor: pointer; }
.anhangweg:hover { color: var(--fehler, #C0392B); }