@import url("fonts/fonts.css");

/* ===========================================================================
   Office

   Ein Stylesheet, drei Ausprägungen desselben Layouts:

     bis  880 px   Handy: Kopfzeile, Wochenband, Erfassen, Inhalt, Tableiste
     bis 1180 px   Browser schmal: Seitenleiste und Inhalt, Wochenband links
     darüber       Browser: Seitenleiste, Inhalt, rechte Spalte

   Tokens, Klassennamen und Wortwahl stammen aus den beiden Designstudien
   unter studien/. Wo etwas neu ist, steht ein Kommentar dabei.
   ======================================================================== */

:root{
  --paper:#EFEFE9;
  --card:#FBFBF8;
  --ink:#14181A;
  --muted:#6B7370;
  --line:#DCDCD3;
  --petrol:#14545C;
  --petrol-soft:#E1EBEA;
  --amber:#B8860F;
  --amber-soft:#F6EBD2;
  --alert:#A33328;
  --alert-soft:#F5E2DF;
  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:14px;

  /* Rahmen der eingefärbten Karten. Bewusst ein fester, halbdurchsichtiger
     Wert und keine Ableitung aus der Bereichsfarbe: So funktioniert jede
     Farbe, die die Nutzerin wählt. */
  --area-line:rgba(20,24,26,.13);
  --area-line-hover:rgba(20,24,26,.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Eine eigene Regel mit display sticht das eingebaute [hidden] aus — etwa
   .rowBtw{display:flex}. Ohne diese Zeile bliebe ein ausgeblendetes Element
   sichtbar, und zwar ausgerechnet dort, wo es am wenigsten auffällt. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:6px}

/* Sichtbar nur für Screenreader. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------------------
   Grundraster
   ------------------------------------------------------------------------ */

.app{
  display:grid;
  min-height:100vh;
  min-height:100dvh;
  /* minmax(0,1fr) statt 1fr: Eine Spalte mit 1fr ist in Wirklichkeit
     minmax(auto,1fr) und wird damit so breit wie ihr breitester Inhalt.
     Ein langer Aufgabentitel würde die ganze Seite über den Bildschirmrand
     hinausschieben. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto minmax(0,1fr);
  grid-template-areas:
    "side"
    "week"
    "cap"
    "main";
}
.side{grid-area:side}
.weekTop{grid-area:week}
#capture{grid-area:cap}
.main{grid-area:main}
.rail{grid-area:rail;display:none}

/* Browser schmal: Seitenleiste links, Wochenband und Erfassen darunter. Die
   Designstudie lässt die rechte Spalte in diesem Bereich weg — damit das
   Wochenband trotzdem sichtbar bleibt, rückt es in die linke Spalte. */
@media(min-width:881px){
  .app{
    grid-template-columns:236px minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto auto;
    grid-template-areas:
      "side main"
      "week main"
      "cap  main";
  }
}

/* Browser: die drei Spalten der Studie. */
@media(min-width:1181px){
  .app{
    grid-template-columns:236px minmax(0,1fr) 292px;
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:
      "side main rail"
      "cap  main rail";
  }
  .weekTop{display:none}
  .rail{display:flex}
}

/* ---------------------------------------------------------------------------
   Seitenleiste am Rechner, Kopfzeile am Handy
   ------------------------------------------------------------------------ */

.side{padding:22px 20px 0;display:flex;flex-direction:column}
.brandRow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.brand{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.02em}
.brandSub{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  letter-spacing:.07em;margin-top:3px;text-transform:uppercase;display:none;
}
.brandMeta{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}

.nav{display:none;margin-top:26px;flex-direction:column;gap:2px}
.navItem{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  text-align:left;font-size:14.5px;color:var(--muted);min-height:44px;
  transition:background .15s,color .15s;
}
.navItem:hover{background:#E7E7E0;color:var(--ink)}
.navItem.on{background:var(--ink);color:var(--paper)}
.navItem .n{margin-left:auto;font-family:var(--mono);font-size:11px}
.navItem.on .n{color:#B7BCB4}

@media(min-width:881px){
  .side{padding:22px 18px;border-right:1px solid var(--line)}
  .brand{font-size:23px}
  .brandSub{display:block}
  .brandMeta{display:none}
  .nav{display:flex}
}

/* ---------------------------------------------------------------------------
   Wochenband — das wiederkehrende Element

   Akquise-Tage tragen einen Punkt, der Bürotag ist ein gefüllter Block.
   Beim Verschieben pulsiert er kurz: Die Aufgabe ist nicht weg, sondern dort.
   ------------------------------------------------------------------------ */

.weekTop{padding:16px 20px 0}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.day{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:8px 2px 7px;text-align:center;position:relative;
}
.dayName{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.05em}
.dayNum{font-family:var(--display);font-size:16px;font-weight:600;line-height:1.3}
.day.today{border-color:var(--ink)}
.day.akquise::after{
  content:"";position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--muted);
}
.day.office{background:var(--petrol);border-color:var(--petrol);color:#fff}
.day.office .dayName{color:#A9C9CB}
.day.office::after{background:#A9C9CB}
.day.pulse{animation:pulse .9s ease}
@keyframes pulse{0%,100%{transform:none}35%{transform:translateY(-6px) scale(1.05)}}

.legend{
  display:flex;gap:14px;margin-top:9px;font-family:var(--mono);
  font-size:10.5px;color:var(--muted);letter-spacing:.03em;flex-wrap:wrap;
}
.legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;vertical-align:1px}
.lg-o{background:var(--petrol)}
.lg-a{background:var(--muted);border-radius:50%}

@media(min-width:881px){
  .weekTop{padding:18px 18px 0;border-right:1px solid var(--line)}
  .legend{flex-direction:column;gap:4px;font-size:10px}
}
.rail .week{gap:4px}
.rail .day{border-radius:8px;padding:7px 1px 6px}
.rail .dayName{font-size:9px}
.rail .dayNum{font-size:14px}
.rail .day.akquise::after{width:3.5px;height:3.5px;bottom:4px}

/* ---------------------------------------------------------------------------
   Erfassen

   Ein Feld, ein Knopf. Am Handy steht der Kasten fest unter dem Wochenband
   und nur auf der Eingang-Ansicht, am Rechner unten in der Seitenleiste.
   ------------------------------------------------------------------------ */

#capture{padding:16px 20px 0}
body:not([data-screen="s-eingang"]) #capture{display:none}

.capture{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.capture label,.capLbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);display:block;
}
.captureRow{display:flex;gap:9px;margin-top:9px}
.capture input{
  flex:1;min-width:0;border:0;border-bottom:1.5px solid var(--line);background:none;
  font-family:var(--body);font-size:16.5px;padding:6px 2px;color:var(--ink);
}
.capture input:focus{outline:none;border-bottom-color:var(--petrol)}
.capture input::placeholder{color:#A9AEA9}
.btnIcon{
  width:44px;height:44px;border-radius:11px;background:var(--petrol-soft);
  display:grid;place-items:center;font-size:17px;flex:0 0 auto;
}
.btnIcon:hover{background:#D3E1E0}
.btnGo{
  background:var(--petrol);color:#fff;border-radius:11px;padding:0 16px;
  font-weight:600;font-size:14px;min-height:44px;flex:0 0 auto;
}
.btnGo:hover{background:#0F464D}
.btnGo[disabled],.btnIcon[disabled]{opacity:.5;cursor:not-allowed}
.captureHint{font-size:12.5px;color:var(--muted);margin:10px 0 0}

@media(min-width:881px){
  #capture{display:block!important;padding:0 18px 22px;border-right:1px solid var(--line)}
  .capture{border:0;background:none;padding:0}
  .captureRow{margin-top:9px}
  /* In der 236 px schmalen Seitenleiste passen Feld und zwei Knöpfe nicht
     nebeneinander. Das Feld nimmt eine eigene Zeile, die Knöpfe die darunter. */
  .captureRow{flex-wrap:wrap}
  .capture input{
    flex:1 1 100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
    font-size:14px;background:var(--card);
  }
  .btnGo{margin-left:auto}
  .capture input:focus{border-color:var(--petrol);border-bottom-color:var(--petrol)}
  .btnIcon{width:40px;height:40px;border-radius:9px}
  .btnGo{border-radius:9px;padding:0 13px;font-size:13.5px;min-height:40px}
  .captureHint{font-size:11.5px;line-height:1.4}
}

/* ---------------------------------------------------------------------------
   Inhalt
   ------------------------------------------------------------------------ */

.main{overflow-y:auto;padding:20px 20px 110px;-webkit-overflow-scrolling:touch}
.screen{display:none}
.screen.on{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.h1{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.015em;
    line-height:1.22;margin:0 0 6px}
.sub{color:var(--muted);font-size:14px;margin:0 0 18px;max-width:56ch}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin:26px 0 10px;
}
.eyebrow:first-child{margin-top:0}

/* Der Eingang trägt am Handy keine Überschrift — dort steht der Kasten zum
   Erfassen schon darüber und sagt, worum es geht. */
@media(max-width:880px){
  #s-eingang > .h1,#s-eingang > .sub{display:none}
}
@media(min-width:881px){
  .main{padding:30px 34px 46px}
  .h1{font-size:31px;font-weight:800;letter-spacing:-.025em;margin-bottom:5px}
  .sub{font-size:14.5px;margin-bottom:26px}
}

.empty{
  border:1px dashed var(--line);border-radius:var(--r);padding:22px 16px;
  text-align:center;color:var(--muted);font-size:14px;
}

/* ---------------------------------------------------------------------------
   Karten

   Eine Struktur für beide Ausprägungen: Haken, Rumpf, Knöpfe. Am Handy
   liegen die Knöpfe unter dem Text und sind immer sichtbar, weil es dort
   kein Überfahren mit der Maus gibt.
   ------------------------------------------------------------------------ */

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;margin-bottom:9px;display:flex;gap:11px;align-items:flex-start;
  flex-wrap:wrap;
  transition:opacity .3s,transform .3s,border-color .15s;
}
.card:hover{border-color:#C9CABF}
.card.gone{opacity:0;transform:translateX(46px) scale(.95)}
.card.done .title{text-decoration:line-through;color:var(--muted)}

.tick{
  width:22px;height:22px;border:1.5px solid #C3C7C2;border-radius:6px;flex:0 0 auto;
  margin-top:1px;display:grid;place-items:center;font-size:12px;color:transparent;
  transition:background .18s,border-color .18s,color .18s;
}
.tick:hover{border-color:var(--petrol)}
.card.done .tick{background:var(--petrol);border-color:var(--petrol);color:#fff}

.body{flex:1;min-width:0}
.title{font-size:15.5px;font-weight:500;line-height:1.32;word-wrap:break-word}
.title[role="button"]{cursor:pointer}
.note{font-size:13px;color:var(--muted);margin-top:3px;white-space:pre-line;word-wrap:break-word}
.cardFoto{
  margin-top:9px;max-width:190px;max-height:150px;border-radius:9px;
  border:1px solid var(--area-line);display:block;
}

.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;align-items:center}
.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:3px 7px;
  border-radius:5px;background:#EDEEE9;color:var(--muted);
}
.tag.frist{background:var(--amber-soft);color:var(--amber)}
.tag.spaet{background:var(--alert-soft);color:var(--alert)}

/* Bereichsfarbe als Fläche der ganzen Karte, nicht als Tag. Fristen bleiben
   Tags, weil sie eine andere Information tragen.
   Die Farben selbst setzt app.js in ein eigenes <style>-Element, damit eine
   Änderung in den Einstellungen sofort auf allen Karten wirkt. */
.card.hasArea{border-color:var(--area-line)}
.card.hasArea:hover{border-color:var(--area-line-hover)}
.card.hasArea .note{color:inherit;opacity:.72}
.card.hasArea .tag{background:rgba(255,255,255,.68);color:#4E5652}
.card.hasArea .tag.frist{background:var(--amber-soft);color:var(--amber)}
.card.hasArea .tag.spaet{background:var(--alert-soft);color:var(--alert)}
.card.hasArea .act{background:rgba(255,255,255,.72);border-color:rgba(20,24,26,.12)}
.card.hasArea .tick{border-color:rgba(20,24,26,.28)}
.card.done.hasArea{opacity:.55}

/* Am Handy rutscht die Knopfreihe unter den Text, am Rechner an den rechten
   Rand der Karte. Anders als in der Studie bleibt sie dort sichtbar und
   erscheint nicht erst beim Überfahren mit der Maus: Im Bürotag sind das die
   Knöpfe, um die es geht, und auf einem Handy gibt es kein Überfahren. */
.acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;width:100%}
.act{
  border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:13px;
  background:var(--card);min-height:38px;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.act:hover{background:#F1F1EB;border-color:#C9CABF}
.act[disabled]{opacity:.45;cursor:not-allowed}
.act[disabled]:hover{background:var(--card);border-color:var(--line)}
.act.primary{background:var(--petrol);border-color:var(--petrol);color:#fff}
.act.primary:hover{background:#0F464D}

/* Knöpfe zum Einsortieren: tragen die Bereichsfarbe als Fläche, damit sofort
   sichtbar ist, wie die Karte danach aussieht. */
.actArea{border-color:var(--area-line)}
.actArea:hover{border-color:var(--area-line-hover)}

@media(min-width:881px){
  .card{border-radius:13px;padding:13px 15px;margin-bottom:8px;gap:13px;flex-wrap:nowrap}
  .title{font-size:15px}
  .note{font-size:12.5px}
  .tick{width:20px;height:20px;margin-top:2px}
  .acts{margin-top:0;gap:6px;width:auto;flex:0 0 auto;justify-content:flex-end;max-width:52%}
  .act{border-radius:8px;padding:6px 10px;font-size:12.5px;min-height:34px;background:var(--paper)}
  .act:hover{background:#E7E7E0}
}

/* Nachfrage ab der dritten Verschiebung */
.ask{border-top:1px dashed var(--line);margin-top:11px;padding-top:10px}
.card.hasArea .ask{border-top-color:rgba(20,24,26,.2)}
.askQ{font-size:13px;color:var(--alert);margin:0 0 8px}
.card.hasArea .askQ{color:#7E2A22}
.askRow{display:flex;gap:6px;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   Bürotag-Blöcke
   ------------------------------------------------------------------------ */

.block{margin-top:24px}
.block:first-of-type{margin-top:0}
.blockHead{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.blockNo{font-family:var(--mono);font-size:12px;color:var(--petrol);letter-spacing:.06em}
.blockName{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.blockCt{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:auto}

@media(min-width:881px){
  .block{margin-top:0;margin-bottom:30px}
  .blockHead{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:11px;gap:11px}
  .blockName{font-size:18px}
  .blockCt{font-size:11px}
}

/* ---------------------------------------------------------------------------
   Zeitbudget

   Steht am Rechner in der rechten Spalte, sonst über den Blöcken. Der Balken
   zeigt die erledigten Aufgaben, nicht die verstrichene Zeit — er soll sich
   füllen, weil etwas geschafft wurde.
   ------------------------------------------------------------------------ */

.budget{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:24px;
}
.budgetTop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.budgetNum{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.03em}
.budgetLbl{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.bar{height:7px;background:#E4E5DE;border-radius:99px;margin-top:11px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--petrol);border-radius:99px;
          transition:width .35s ease}
.budgetFoot{font-size:12.5px;color:var(--muted);margin:9px 0 0}

@media(min-width:1181px){
  #budgetScreen{display:none}
}

/* Der ruhige Hinweis, wenn die Zeit um ist. */
.schluss{
  background:var(--petrol-soft);border:1px solid #C7DAD9;border-radius:var(--r);
  padding:15px;margin-bottom:24px;
}
.schlussTitel{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:4px}
.schlussText{font-size:13.5px;color:#3D5A5C;margin:0 0 12px}

/* ---------------------------------------------------------------------------
   Ablagen
   ------------------------------------------------------------------------ */

.areaLine{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;font-size:12.5px;color:var(--muted)}
.areaLine span{display:flex;align-items:center;gap:7px}
.areaLine i{width:16px;height:11px;border-radius:3px;border:1px solid;display:block}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  border:1px solid var(--line);background:var(--card);border-radius:99px;
  padding:6px 13px;font-size:13px;min-height:36px;
}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Ueberall minmax(0,1fr) statt 1fr - siehe Kommentar bei .app: sonst wird
   die Spalte so breit wie ihr breitester Inhalt und schiebt die Seite
   ueber den Bildschirmrand hinaus. */
.trays{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.tray{background:#E9E9E2;border:1px solid var(--line);border-radius:var(--r);padding:13px}
.trayHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.trayName{font-family:var(--display);font-size:15.5px;font-weight:600}
.trayN{font-family:var(--mono);font-size:11px;color:var(--muted)}
.tray .card{margin-bottom:7px;padding:11px 12px}
.tray .card .title{font-size:14px}
.tray .acts{display:none}
.tray .empty{background:none;border-color:#D5D6CD;padding:16px 10px;font-size:13px}

@media(min-width:881px){
  .trays{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chips{margin-bottom:22px}
  .areaLine{margin-bottom:18px}
}

/* ---------------------------------------------------------------------------
   Auswertung

   Zugeklappt, weil sie selten gebraucht wird — und weil eine Liste von
   Zahlen über dem Alltag nichts verloren hat.
   ------------------------------------------------------------------------ */

.auswertung{
  margin-top:30px;border-top:1px solid var(--line);padding-top:6px;
}
.auswertung summary{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:12px 0;cursor:pointer;list-style:none;min-height:44px;
}
.auswertung summary::-webkit-details-marker{display:none}
.auswertung summary::before{
  content:"›";font-size:18px;color:var(--muted);
  transition:transform .18s;display:inline-block;
}
.auswertung[open] summary::before{transform:rotate(90deg)}
.auswertungTitel{font-family:var(--display);font-size:17px;font-weight:600}
.auswertungMeta{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:.05em;margin-left:auto;
}
.auswertungInhalt{padding-bottom:8px}

.statsSatz{
  background:var(--petrol-soft);border:1px solid #C7DAD9;border-radius:var(--r);
  padding:14px;font-size:14.5px;color:#20494D;margin:0 0 20px;line-height:1.45;
}
.statsGitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:22px}
.statsKachel{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 13px}
.statsZahl{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.statsWas{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
          text-transform:uppercase;color:var(--muted);margin-top:4px}

.statsBalken{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.statsZeile{display:flex;align-items:center;gap:11px;font-size:13.5px}
.statsName{flex:0 0 34%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statsSpur{flex:1;height:20px;background:#E4E5DE;border-radius:6px;overflow:hidden;min-width:0}
.statsSpur span{display:block;height:100%;border-radius:6px;border:1px solid var(--area-line)}
.statsWert{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;color:var(--muted)}

.statsTage{display:flex;gap:5px;align-items:flex-end;margin-bottom:6px;height:76px}
.statsTag{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-width:0}
.statsTagBalken{background:var(--petrol);border-radius:4px 4px 0 0;min-height:3px}
.statsTagZahl{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center}
.statsTagDatum{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-align:center}

@media(min-width:881px){
  .statsGitter{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .statsName{flex-basis:22%}
}

/* ---------------------------------------------------------------------------
   Einstellungen
   ------------------------------------------------------------------------ */

.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
.field{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.fieldLbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.fieldHint{font-size:12.5px;color:var(--muted);margin:9px 0 0;line-height:1.45}
.fieldHint .act{margin-top:8px}

.picker{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:11px}
.pick{
  border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:0;
  min-height:44px;font-family:var(--mono);font-size:12px;text-align:center;
}
.pick.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pick.office{background:var(--petrol);border-color:var(--petrol);color:#fff}
.pick[disabled]{opacity:.32;cursor:not-allowed}

.rowBtw{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px;font-size:14px}
.val{font-family:var(--mono);font-size:14px}
.valInput{
  font-family:var(--mono);font-size:14px;border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;background:var(--paper);min-height:40px;max-width:9rem;text-align:right;
}
.valInput:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 2px var(--petrol-soft)}

.areas{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.areaRow{display:flex;align-items:center;gap:11px;font-size:14px}
.areaRow.archived{opacity:.5}
.areaSw{
  width:38px;height:30px;border-radius:6px;border:1px solid rgba(20,24,26,.16);
  flex:0 0 auto;padding:0;background:none;cursor:pointer;
}
.areaSw::-webkit-color-swatch-wrapper{padding:2px}
.areaSw::-webkit-color-swatch{border:0;border-radius:4px}
.areaSw::-moz-color-swatch{border:0;border-radius:4px}
.areaName{
  flex:1;min-width:0;border:0;border-bottom:1px solid transparent;background:none;
  padding:6px 2px;font-size:14px;
}
.areaName:hover{border-bottom-color:var(--line)}
.areaName:focus{outline:none;border-bottom-color:var(--petrol)}
.areaBtn{
  font-family:var(--mono);font-size:11px;color:var(--muted);padding:8px;
  border-radius:6px;flex:0 0 auto;
}
.areaBtn:hover{background:#EFEFE9;color:var(--ink)}

/* Listen in den Einstellungen: Wiederkehrendes und Verträge. Eine Zeile je
   Eintrag, mit dem Satz darunter, der sagt, was als Nächstes passiert. */
.liste{display:flex;flex-direction:column;margin-top:10px}
.listeZeile{
  display:flex;align-items:flex-start;gap:11px;padding:11px 0;
  border-top:1px solid var(--line);text-align:left;width:100%;
}
.listeZeile:first-child{border-top:0;padding-top:4px}
.listeZeile:hover .listeName{color:var(--petrol)}
.listeBody{flex:1;min-width:0}
.listeName{font-size:14.5px;font-weight:500;line-height:1.3}
.listeWann{font-size:12.5px;color:var(--muted);margin-top:2px}
.listeZeile.aus .listeName,.listeZeile.aus .listeWann{opacity:.5}
.listeZeile.eilig .listeWann{color:var(--alert)}
.listeLeer{
  border:1px dashed var(--line);border-radius:10px;padding:16px 14px;
  text-align:center;color:var(--muted);font-size:13.5px;margin-top:10px;
}

/* Felder, die über beide Spalten gehen — die Listen brauchen die Breite. */
@media(min-width:881px){
  .breit{grid-column:1 / -1}
}

/* Schalter, wie in den Studien. Mindestens 44 px Trefferfläche über ein
   unsichtbares Polster, damit er sich auf dem Handy sicher treffen lässt,
   ohne dass die Zeile auseinandergeht. */
.switch{
  width:44px;height:26px;border-radius:99px;background:#D3D5CD;position:relative;
  transition:background .2s;flex:0 0 auto;padding:0;
}
.switch::before{content:"";position:absolute;inset:-9px}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:left .2s;
}
.switch.on{background:var(--petrol)}
.switch.on::after{left:21px}

@media(min-width:881px){
  .switch{width:42px;height:25px}
  .switch::after{width:19px;height:19px}
  .switch.on::after{left:20px}
}

/* Adress- und Linkfeld in den Einstellungen. Über die volle Breite, weil
   eine Mailadresse und erst recht ein Kalenderlink in ein Feld am rechten
   Rand nicht hineinpassen. */
.mailInput{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;
  background:var(--paper);font-size:16px;min-height:44px;margin-top:6px;
}
.mailInput:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 2px var(--petrol-soft)}
.mailInput[readonly]{font-family:var(--mono);font-size:12px;color:var(--muted)}
.vorlaufRow{display:flex;align-items:center;gap:8px}
.vorlaufRow .valInput{max-width:5.5rem}
.einheit{font-size:14px;color:var(--muted)}

.warnBox{
  border:1px solid #E4CFCB;background:var(--alert-soft);border-radius:var(--r);
  padding:14px;margin-top:11px;
}
.warnBox .fieldLbl{color:var(--alert)}
.warnBox p{font-size:13px;color:#7E2A22;margin:9px 0 0;line-height:1.5}

@media(min-width:881px){
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px}
  .field{padding:17px;border-radius:13px}
  .fieldLbl{font-size:10.5px}
  .pick{border-radius:8px;font-size:11.5px;min-height:38px}
  .val,.valInput{font-size:13.5px}
}

/* ---------------------------------------------------------------------------
   Rechte Spalte
   ------------------------------------------------------------------------ */

.rail{border-left:1px solid var(--line);padding:26px 20px;flex-direction:column;gap:24px;
      overflow-y:auto}
.railLbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;
}
.railFoot{font-size:12px;color:var(--muted);margin:9px 0 0;line-height:1.45}
.rail .budget{background:none;border:0;padding:0;margin:0}
.rail .budgetTop{display:block}
.rail .budgetNum{font-size:34px;line-height:1}
/* Auf .rail eingegrenzt: Die Designstudie vergibt den Namen "frist" zweimal
   - hier fuer die Zeile in der rechten Spalte, und als .tag.frist fuer die
   Fristmarke auf einer Karte. Ohne diese Eingrenzung wuerde die Marke die
   Breite der ganzen Karte einnehmen. */
.rail .frist{
  display:flex;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px;text-align:left;width:100%;
}
.rail .frist:last-child{border-bottom:0}
.rail .frist:hover{color:var(--petrol)}
.rail .fristD{font-family:var(--mono);font-size:11.5px;color:var(--alert);flex:0 0 auto}
.rail .fristD.soft{color:var(--amber)}

/* ---------------------------------------------------------------------------
   Tableiste am Handy
   ------------------------------------------------------------------------ */

.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(251,251,248,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:9px 6px calc(9px + env(safe-area-inset-bottom));
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;
  color:var(--muted);min-height:44px;position:relative;
}
.tabIcon{font-size:16px;line-height:1;position:relative}
.tabTxt{font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.tab.on{color:var(--petrol)}
.badge{
  position:absolute;top:-4px;left:13px;background:var(--alert);color:#fff;
  font-family:var(--mono);font-size:9px;border-radius:99px;padding:1px 4px;line-height:1.4;
}
@media(min-width:881px){
  .tabs{display:none}
}

/* ---------------------------------------------------------------------------
   Meldungen
   ------------------------------------------------------------------------ */

.toast{
  position:fixed;left:16px;right:16px;bottom:84px;z-index:9;
  background:var(--ink);color:var(--paper);border-radius:11px;padding:12px 14px;
  font-size:13.5px;opacity:0;transform:translateY(10px);
  transition:opacity .25s,transform .25s;pointer-events:none;
  display:flex;align-items:center;gap:12px;
}
.toast.on{opacity:1;transform:none;pointer-events:auto}
.toast button{
  margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:#A9C9CB;padding:6px 2px;
}
.toast button:hover{color:#fff}
@media(min-width:881px){
  .toast{left:50%;right:auto;bottom:34px;transform:translate(-50%,10px);
         border-radius:10px;padding:11px 17px;max-width:34rem}
  .toast.on{transform:translate(-50%,0)}
}

/* ---------------------------------------------------------------------------
   Dialoge
   ------------------------------------------------------------------------ */

dialog{
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  color:var(--ink);padding:0;max-width:min(30rem,calc(100vw - 32px));width:100%;
  /* Die längeren Dialoge passen auf einem Handy nicht auf einen Bildschirm.
     Sie scrollen dann in sich, statt oben und unten abgeschnitten zu werden. */
  max-height:min(90dvh, calc(100vh - 32px));
  overflow-y:auto;
  overscroll-behavior:contain;
}
dialog::backdrop{background:rgba(20,24,26,.4)}
.dlgIn{padding:18px}
.dlgTitel{font-family:var(--display);font-size:19px;font-weight:600;margin:0 0 14px}
.dlgLbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin:14px 0 6px;
}
.dlgIn .dlgLbl:first-of-type{margin-top:0}
.dlgIn input[type=text],.dlgIn input[type=date],.dlgIn input[type=password],.dlgIn textarea,.dlgIn select{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;
  background:var(--paper);font-size:16px;min-height:44px;
}
.dlgIn textarea{min-height:88px;resize:vertical;font-family:var(--body)}
.dlgIn input:focus,.dlgIn textarea:focus,.dlgIn select:focus{
  outline:none;border-color:var(--petrol);box-shadow:0 0 0 2px var(--petrol-soft);
}
.dlgAreas{display:flex;gap:6px;flex-wrap:wrap}
.dlgFuss{display:flex;gap:8px;margin-top:20px;align-items:center;flex-wrap:wrap}
.dlgFuss .rechts{margin-left:auto;display:flex;gap:8px}
.dlgFehler{background:var(--alert-soft);color:var(--alert);border-radius:9px;
           padding:10px 12px;font-size:13px;margin-top:14px}
.dlgFoto{max-width:100%;border-radius:9px;border:1px solid var(--line);margin-top:6px;display:block}

/* ---------------------------------------------------------------------------
   Anmeldung
   ------------------------------------------------------------------------ */

#login{
  position:fixed;inset:0;z-index:20;background:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
#login[hidden]{display:none}
.loginBox{width:100%;max-width:22rem}
.loginBrand{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em}
.loginSub{color:var(--muted);font-size:14px;margin:4px 0 22px}
.loginBox input{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:12px;
  background:var(--card);font-size:16px;min-height:48px;
}
.loginBox input:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 2px var(--petrol-soft)}
.loginBox .btnGo{width:100%;margin-top:12px;min-height:48px}
.loginFehler{background:var(--alert-soft);color:var(--alert);border-radius:9px;
             padding:11px 13px;font-size:13.5px;margin-top:14px}

/* ---------------------------------------------------------------------------
   Bewegung sparsam
   ------------------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}