:root {
  --ink: #243b33;
  --muted: #697069;
  --paper: #e8e1d5;
  --card: #f2ece1;
  --sidebar: #ded6c8;
  --line: #cbc2b3;
  --accent: #b85b3c;
  --moss: #365b4e;
  --soft: #d8d0c2;
  --shadow: 0 14px 38px rgba(38, 48, 42, .12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
/* App-Verhalten: kein Pinch- oder Doppeltipp-Zoom, kein Gummiband am Rand, keine
   automatische Textvergroesserung. dvh folgt der sichtbaren Hoehe, vh bleibt Rueckfall. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: pan-x pan-y; overscroll-behavior-y: none; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; touch-action: pan-x pan-y; background: radial-gradient(circle at 85% 4%, #d8d0c3 0, transparent 29%), var(--paper); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Bedienelemente sind keine Textflaechen: kein Auswahl-Popup beim langen Druck.
   Eingabefelder bleiben ausdruecklich waehlbar, iOS sperrt sie sonst mit. */
button, .sidebar, .topbar { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
.shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; min-height: 100dvh; transition: grid-template-columns .24s ease; }
.sidebar { position: sticky; top: 0; z-index: 40; height: 100vh; height: 100dvh; padding: 25px 20px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(222,214,200,.96); backdrop-filter: blur(12px); transition: transform .24s ease, opacity .2s ease; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-size: 19px; margin-left: 7px; }
.brand-mark { display: grid; place-items: center; background: var(--moss); border-radius: 11px; width: 35px; height: 35px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.brand-mark svg { width: 22px; height: 22px; fill: none; stroke: #eee7dc; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { border: 1px solid var(--line); background: rgba(242,236,225,.72); border-radius: 10px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; line-height: 1; }
.icon-button:hover { background: #d2cabd; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar nav button, .nav-action { border: 0; background: transparent; text-align: left; border-radius: 10px; padding: 10px 11px; color: #59635d; display: flex; gap: 12px; align-items: center; width: 100%; }
.sidebar nav button:hover, .sidebar nav button.active, .nav-action:hover, .mode-action.active { background: #d2cabd; color: var(--ink); }
.sidebar nav button.active { font-weight: 700; }
.display-controls { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 15px; }
.display-controls > p { margin: 0 11px 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.mode-action { cursor: pointer; }
.mode-action span { display: inline-grid; width: 16px; place-items: center; }
.mode-action.active { font-weight: 700; }
.side-bottom { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.side-bottom form { margin: 0; }
.device-name { color: var(--muted); font-size: 11px; padding: 0 12px 5px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { width: min(980px, calc(100vw - 244px)); margin: 0 auto; padding: 42px 48px 160px; transition: width .24s ease, padding .24s ease; }
.topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 35px; }
.date-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 11px; }
.date-block h1, #clock { font-family: Georgia, serif; font-weight: 500; font-size: clamp(24px, 3.1vw, 33px); line-height: 1.08; margin: 0; }
.date-block h1 { text-transform: capitalize; }
#clock { font-variant-numeric: tabular-nums; }
.date-sep { color: var(--line); font-size: clamp(24px, 3.1vw, 33px); line-height: 1; }
.context-line { display: flex; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 13px; }
#view-title { font-weight: 750; color: var(--accent); }
.top-actions { display: flex; align-items: center; gap: 9px; }
.search { display: flex; align-items: center; gap: 7px; background: rgba(242,236,225,.72); border: 1px solid var(--line); padding: 9px 12px; border-radius: 22px; }
.search input { border: 0; outline: 0; background: transparent; width: 160px; padding: 0; }
.status { font-size: 13px; color: var(--muted); min-height: 0; }
.status:not(:empty) { margin-bottom: 10px; }
.task-list { display: grid; gap: 10px; }
.task { position: relative; display: grid; grid-template-columns: auto 1fr auto; column-gap: 13px; row-gap: 0; align-items: start; background: rgba(242,236,225,.88); border: 1px solid var(--line); border-radius: 14px; padding: 15px; transition: transform .12s, border-color .12s, opacity .15s; }
.task:hover { border-color: #afa595; transform: translateY(-1px); }
.complete { appearance: none; position: relative; width: 24px; height: 24px; border: 1.5px solid #858f88; background: #f7f1e7; border-radius: 7px; margin-top: 1px; display: grid; place-items: center; padding: 0; font-size: 15px; line-height: 1; transition: background .15s, border-color .15s, transform .12s; }
.complete:hover { border-color: var(--moss); background: #eef3e9; transform: scale(1.08); }
.task-main { min-width: 0; cursor: pointer; }
.task-main:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 8px; }
.task-title { font-weight: 730; line-height: 1.3; overflow-wrap: anywhere; }
.task-note { font-size: 13px; color: var(--muted); margin: 5px 0 0; white-space: pre-wrap; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pill { font-size: 11px; background: #dcd4c7; color: #56615b; padding: 4px 7px; border-radius: 6px; }
.pill.immediate { background: #f6ddd3; color: #9d3a19; }
.pill.today { background: #f3e7c9; color: #7b5b10; }
/* Statuslabel und freie Tags sehen absichtlich gleich ruhig aus. Sie werden
   ueber Position unterschieden: das Label steht immer zuerst, Tags danach. */
.status-label { font-size: 11px; background: #dcd4c7; color: #56615b; padding: 4px 7px; border-radius: 6px; }
.status-label.immediate { background: #f6ddd3; color: #9d3a19; }
.status-label.today { background: #f3e7c9; color: #7b5b10; }
.tag { font-size: 11px; background: transparent; color: #6c7570; padding: 4px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.task[data-today-state="deferred"] { opacity: .62; }
.task[data-today-state="deferred"]:hover { opacity: 1; }
.task[data-returned] { border-color: #a9b39f; }
.task-actions { display: flex; align-items: center; gap: 2px; }
.task-actions button { border: 0; background: transparent; color: #66706a; border-radius: 8px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; font-size: 19px; line-height: 1; }
.task-actions button:hover { background: #dcd4c7; color: var(--ink); }
/* Der Papierkorb ist die einzige Aktion mit Folgen und tritt deshalb zurueck. */
.task-actions button[data-action="trash"], .task-actions button[data-action="restore"] { width: 28px; height: 28px; font-size: 13px; color: #a29889; opacity: .55; }
.task-actions button[data-action="trash"]:hover, .task-actions button[data-action="restore"]:hover { opacity: 1; color: #8d5741; background: transparent; }
.task-detail { grid-column: 1 / -1; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .24s ease, opacity .18s ease; }
.task[data-open="1"] .task-detail, .tl-item[data-open="1"] .task-detail { max-height: 1600px; opacity: 1; }
.detail-inner { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; display: grid; gap: 10px; }
.detail-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-text { font-size: 13px; color: #4f584f; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-steps { margin: 0; padding-left: 17px; font-size: 13px; color: #4f584f; display: grid; gap: 3px; }
.detail-steps li.done { text-decoration: line-through; color: var(--muted); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-actions button { border: 1px solid var(--line); background: rgba(232,225,213,.7); border-radius: 9px; padding: 7px 12px; font-size: 13px; }
.detail-actions button:hover { background: #d8d0c2; }
/* Untergeordnete Blasen sind kleiner als die grossen und haengen direkt unter
   ihrer Oberaufgabe. */
.task[data-subtask="1"] { margin-left: 26px; padding: 8px 11px; }
.task[data-subtask="1"] .task-title { font-size: .9em; }
.task[data-subtask="1"] .task-note { font-size: 12px; }
.task[data-subtask="1"] .meta { margin-top: 5px; }
.task[data-subtask="1"] .status-label, .task[data-subtask="1"] .pill { font-size: 10px; padding: 3px 6px; }
.task[data-subtask="1"] .complete { width: 19px; height: 19px; font-size: 12px; border-radius: 6px; }
.task[data-subtask="1"] .task-actions button { width: 30px; height: 30px; font-size: 15px; }
.task[data-subtask="1"] .task-actions button[data-action="trash"] { width: 23px; height: 23px; font-size: 11px; }
.task[data-attached="1"] { margin-top: -7px; border-top-left-radius: 4px; }
.task[data-attached="1"]::before { content: ""; position: absolute; left: -14px; top: -7px; bottom: 50%; width: 1px; background: var(--line); }
.task[data-attached="1"]::after { content: ""; position: absolute; left: -14px; top: 50%; width: 10px; height: 1px; background: var(--line); }
.parent-hint { font-size: 11px; color: var(--muted); margin: 0 0 4px; }
/* Direkt angehaengt reicht das Zeichen; der Titel der Oberaufgabe steht ja darueber. */
.sub-mark { color: var(--muted); font-weight: 400; margin-right: 5px; }
.subtask-warning { grid-column: 1 / -1; margin-top: 11px; border: 1px solid #c0705a; background: #f7e2da; color: #8d3418; border-radius: 9px; padding: 9px 11px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.subtask-warning button { border: 1px solid #c0705a; background: transparent; color: #8d3418; border-radius: 8px; padding: 5px 10px; font-size: 12px; }
/* Abhaken ist die haeufigste und die befriedigendste Handlung. Der Ablauf
   dauert bewusst knapp eine Sekunde: Haekchen, gruener Durchzug, Durchstreichen,
   dann verschwindet die Karte nach oben. */
@keyframes task-done {
  0%   { transform: scale(1) translateY(0); opacity: 1; }
  12%  { transform: scale(1.02) translateY(0); }
  30%  { background: #dbe8d1; border-color: #7f9b74; }
  70%  { transform: scale(1) translateY(0); opacity: 1; background: #d3e3c7; border-color: #7f9b74; }
  100% { transform: scale(.9) translateY(-14px); opacity: 0; background: #d3e3c7; }
}
@keyframes check-pop {
  0%   { transform: scale(.2) rotate(-18deg); opacity: 0; }
  45%  { transform: scale(1.45) rotate(4deg); opacity: 1; }
  70%  { transform: scale(.92) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes check-ring {
  0%   { transform: scale(.7); opacity: .55; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes sweep { 0% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes strike { 0%, 12% { text-decoration-color: transparent; } 45%, 100% { text-decoration-color: #4f7345; } }

.task.completing, .tl-item.completing { animation: task-done .95s cubic-bezier(.34, .7, .3, 1) forwards; pointer-events: none; position: relative; overflow: hidden; }
.task.completing::before, .tl-item.completing::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(101deg, transparent 8%, rgba(255,255,255,.85) 47%, transparent 86%);
  animation: sweep .72s cubic-bezier(.4, 0, .3, 1) .1s both;
}
.task.completing .complete { background: var(--moss); border-color: var(--moss); color: #f4efe3; transform: scale(1.1); }
.task.completing .complete::after { content: "✓"; font-size: .95em; font-weight: 800; animation: check-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.task.completing .complete::before {
  content: ""; position: absolute; width: 24px; height: 24px; border-radius: 9px;
  border: 2px solid var(--moss); animation: check-ring .62s ease-out .06s both;
}
.task.completing .task-title, .tl-item.completing .tl-title { text-decoration: line-through; text-decoration-thickness: 2px; animation: strike .95s linear both; }
.task.completing .task-actions, .task.completing .meta, .tl-item.completing .tl-kind { opacity: .25; transition: opacity .3s; }

@media (prefers-reduced-motion: reduce) {
  .task-detail { transition: none; }
  .task.completing, .tl-item.completing { animation: none; opacity: .3; }
  .task.completing::before, .tl-item.completing::before { animation: none; opacity: 0; }
  .task.completing .complete::after, .task.completing .complete::before { animation: none; }
  .task.completing .task-title, .tl-item.completing .tl-title { animation: none; text-decoration-color: #4f7345; }
}
.quick-add { position: fixed; z-index: 30; left: calc(50% + 122px); bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--keyboard, 0px)); width: min(884px, calc(100vw - 340px)); transform: translateX(-50%); background: rgba(242,236,225,.96); border: 1px solid var(--line); border-radius: 16px; padding: 9px 12px 8px; box-shadow: 0 15px 45px rgba(36,50,43,.18); backdrop-filter: blur(16px); }
.quick-add form { display: flex; align-items: center; gap: 10px; }
.quick-add input { border: 0; background: transparent; outline: 0; font-size: 17px; min-width: 0; flex: 1; padding: 10px 5px; }
.quick-submit { border: 0; border-radius: 9px; background: var(--accent); color: #fff8ef; padding: 9px 14px; font-weight: 750; }
.quick-submit:hover { background: #9f4b31; }
.quick-add p { font-size: 11px; color: var(--muted); margin: 1px 0 3px 5px; }
.details-button { border: 1px solid #b9b0a2; background: #e2dacd; border-radius: 10px; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; display: grid; place-items: center; }
.details-button:hover { background: #d4ccbf; border-color: #a59b8d; }
.details-button svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.wall-quick-toggle { display: none; }
.wall-quick-toggle svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 50%; margin: auto; font-size: 24px; }
.empty h2 { color: var(--ink); font-family: Georgia, serif; font-weight: 500; }
.nav-shade { display: none; }

/* Zeitachse fuer "Demnaechst": der Abstand zwischen zwei Datumsknoten waechst
   logarithmisch, ist aber hart gedeckelt. Die relative Beschriftung am Knoten
   traegt die eigentliche Information, zusaetzlicher Leerraum kostet nur
   Scrollweg. Links laufen duenne Spuren: eine Aufgabe mit Arbeitstag und Frist
   bekommt eine eigene Linie, die beide Knoten sichtbar verbindet. */
.timeline { list-style: none; margin: 0; padding: 0 0 0 6px; position: relative; }
.tl-node { position: relative; padding: 0 0 0 40px; margin-top: var(--gap, 0); border-left: 1px solid var(--line); }
.tl-node:last-child { border-left-color: transparent; }
.tl-marker { position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #b3a996; }
.tl-node[data-only-deadline="1"] .tl-marker { background: transparent; border: 1.5px solid #a9613f; transform: rotate(45deg); border-radius: 2px; }
/* Die Spur wird nach dem Zeichnen vermessen und genau zwischen die beiden
   Eintraege gelegt; der waagerechte Ellbogen sitzt am Eintrag selbst. */
.rail { position: absolute; width: 2px; border-radius: 2px; background: #d0c7b7; opacity: .8; transition: opacity .18s, width .18s; }
.rail::before, .rail::after { content: ""; position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: inherit; }
.rail::before { top: -3px; }
.rail::after { bottom: -3px; }
.rail[data-active] { opacity: 1; width: 3px; }
.tl-date { margin: 0 0 6px; font-size: 13px; }
.tl-date strong { font-weight: 700; }
.tl-date span { color: var(--muted); margin-left: 7px; }
.tl-items { list-style: none; margin: 0 0 2px; padding: 0; display: grid; gap: 5px; }
.tl-item { position: relative; background: rgba(242,236,225,.7); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s, background .15s, box-shadow .15s; }
/* Der waagerechte Ellbogen ergibt sich aus der Spurnummer und der festen
   Kante der Blase, ganz ohne Messung. Er ist damit auch dann da, wenn eine
   Messung ausfaellt. */
/* Ellbogen und Streifen sind echte Elemente mit einfachen Inline-Werten:
   keine eigenen CSS-Eigenschaften, kein calc, kein Pseudoelement. Damit haengt
   die Verbindung an nichts, was ein Browser anders auslegen koennte. */
.tl-elbow { position: absolute; top: 17px; height: 2px; border-radius: 2px; opacity: .8; }
.tl-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 9px 0 0 9px; opacity: .85; }
.tl-item[data-active] .tl-elbow, .tl-item[data-active] .tl-stripe { opacity: 1; }
.tl-item[data-active] .tl-elbow { height: 3px; }
.tl-item[data-active] { border-color: #8d6a55; }
/* Fristen treten als eigene Sorte auf: etwas kleiner, etwas roeter, eingerueckt. */
.tl-item.deadline { background: rgba(190,110,78,.05); border-style: dashed; border-color: #c99177; margin-left: 22px; }
.tl-item.deadline .tl-head { font-size: 12.5px; padding: 6px 9px; gap: 7px; }
.tl-item.deadline .tl-kind { color: #a3532f; font-weight: 700; }
.tl-item.deadline .status-label { font-size: 10px; padding: 3px 6px; }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; padding: 8px 10px; cursor: pointer; border-radius: 10px; }
.tl-head:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.tl-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tl-kind { font-size: 11px; color: #8d6a55; }
.tl-link { font-size: 11px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 8px; }
.tl-item .status-label { flex: 0 0 auto; }
.tl-item .task-detail { padding: 0 10px; }
.tl-item[data-open="1"] .task-detail { padding-bottom: 10px; }
.tl-item .detail-inner { margin-top: 0; }
.detail-notes { display: grid; gap: 5px; }
.notes-add { justify-self: start; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 9px; padding: 6px 11px; font-size: 12px; }
.notes-add:hover { border-style: solid; color: var(--ink); background: rgba(232,225,213,.6); }
.notes-field { width: 100%; min-height: 46px; resize: none; overflow: hidden; font-size: 13px; line-height: 1.45; background: #f7f2e8; border-color: #cfc5b4; }
.notes-state { font-size: 11px; color: var(--muted); min-height: 13px; }
.detail-heading { margin: 0 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.detail-subtasks { border-top: 1px solid var(--line); padding-top: 9px; }
.subtask-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); margin-bottom: 3px; }
.subtask-row.done .subtask-title { text-decoration: line-through; color: var(--muted); }
.subtask-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.detail-complete { border-color: #8ba57e !important; background: #e2ecdb !important; color: #3d5c35; font-weight: 700; }
.detail-complete:hover { background: #d3e3c7 !important; }

body.nav-collapsed .shell { grid-template-columns: 0 1fr; }
body.nav-collapsed .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
body.nav-collapsed .main { width: min(1060px, 100vw); }
body.nav-collapsed #nav-toggle { visibility: visible; }
body.nav-collapsed .quick-add { left: 50%; width: min(964px, calc(100vw - 96px)); }

/* Wall display: quiet chrome, large clock and highly legible first tasks. */
body[data-display-mode="productivity"] { background: radial-gradient(circle at 80% 5%, #d6cfc2 0, transparent 32%), var(--paper); }
body[data-display-mode="productivity"] .shell { grid-template-columns: 0 1fr; }
body[data-display-mode="productivity"] .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
body[data-display-mode="productivity"] .main { width: min(1420px, 100vw); padding: clamp(34px, 5vw, 72px) clamp(35px, 7vw, 110px) 120px; }
body[data-display-mode="productivity"] .topbar { grid-template-columns: auto 1fr auto; margin-bottom: clamp(34px, 5vh, 70px); }
body[data-display-mode="productivity"] .date-block h1, body[data-display-mode="productivity"] #clock, body[data-display-mode="productivity"] .date-sep { font-size: clamp(38px, 5.4vw, 72px); }
body[data-display-mode="productivity"] .context-line { font-size: clamp(17px, 1.9vw, 24px); margin-top: 10px; }
body[data-display-mode="productivity"] #view-title { font-size: .7em; opacity: .7; }
body[data-display-mode="productivity"] .search { display: none; }
body[data-display-mode="productivity"] .menu-toggle { display: none; }
body[data-display-mode="productivity"] .status { font-size: 16px; margin-bottom: 13px; }
body[data-display-mode="productivity"] .task-list { gap: clamp(13px, 2vh, 22px); }
body[data-display-mode="productivity"] .task { border-radius: 19px; padding: clamp(20px, 2.3vw, 34px); gap: clamp(16px, 2vw, 27px); box-shadow: 0 12px 32px rgba(31,45,38,.055); }
body[data-display-mode="productivity"] .task-title { font-size: clamp(25px, 3vw, 43px); line-height: 1.17; }
body[data-display-mode="productivity"] .task-note { font-size: clamp(16px, 1.6vw, 23px); }
body[data-display-mode="productivity"] .complete { width: clamp(31px, 3.2vw, 46px); height: clamp(31px, 3.2vw, 46px); border-radius: 11px; font-size: 24px; }
body[data-display-mode="productivity"] .pill { font-size: clamp(12px, 1.15vw, 17px); padding: 6px 9px; }
body[data-display-mode="productivity"] .status-label { font-size: clamp(11px, 1vw, 15px); padding: 6px 11px; }
body[data-display-mode="productivity"] .task-actions button { width: 46px; height: 46px; font-size: 24px; }
body[data-display-mode="productivity"] .task-actions { opacity: .18; }
body[data-display-mode="productivity"] .task:hover .task-actions { opacity: 1; }
body[data-display-mode="productivity"] .quick-add { position: fixed; left: auto; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); transform: none; margin: 0; z-index: 30; width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
body[data-display-mode="productivity"] .wall-quick-toggle { display: grid; place-items: center; border: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--moss); color: #f4ede2; box-shadow: 0 14px 32px rgba(34,56,47,.25); }
body[data-display-mode="productivity"] .quick-content { display: none; }
.wall-float { display: none; }
body[data-display-mode="productivity"] .wall-float { display: grid; place-items: center; position: fixed; z-index: 30; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(242,236,225,.55); color: #6d766f; font-size: 19px; }
body[data-display-mode="productivity"] .wall-back { right: max(29px, env(safe-area-inset-right)); bottom: calc(max(24px, env(safe-area-inset-bottom)) + 70px); opacity: .34; }
body[data-display-mode="productivity"] .wall-pause { left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); opacity: .5; }
body[data-display-mode="productivity"] .wall-float:hover { opacity: 1; }
/* Die offene Leiste muss die Tastatur mitrechnen. Die Grundregel darueber setzt bottom
   fuer die Produktivitaetsansicht ohne --keyboard zurueck; dort verschwand die Leiste
   sonst unter der Tastatur. Der geschlossene Plusknopf braucht das nicht. */
body[data-display-mode="productivity"] .quick-add.open { bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--keyboard, 0px)); width: min(610px, calc(100vw - 36px)); padding: 10px 12px 9px; border: 1px solid var(--line); background: rgba(242,236,225,.97); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
body[data-display-mode="productivity"] .quick-add.open .wall-quick-toggle { display: none; }
body[data-display-mode="productivity"] .quick-add.open .quick-content { display: block; }

.pause-screen { display: none; position: fixed; inset: 0; z-index: 100; overflow: hidden; color: #eee7db; background: linear-gradient(145deg, #243d34, #36584d 52%, #85614d); }
body[data-display-mode="pause"] .pause-screen { display: grid; place-items: center; }
body[data-display-mode="pause"] .wall-float, body[data-display-mode="pause"] .quick-add { display: none; }
body[data-display-mode="pause"] .shell { visibility: hidden; }
/* Die ganze Flaeche beendet die Pause. Ein Ziel, eine Geste, kein Dialog. */
.pause-tap { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; padding: 20px; }
.pause-content { position: relative; z-index: 2; text-align: center; text-shadow: 0 2px 20px rgba(0,0,0,.18); display: block; }
.pause-content time { display: block; font-family: Georgia, serif; font-size: clamp(90px, 19vw, 250px); line-height: .9; letter-spacing: -.045em; }
.pause-content > span { display: block; margin: 18px 0 0; font-size: clamp(20px, 3vw, 40px); }
#pause-date { text-transform: capitalize; opacity: .8; }
#pause-message { font-family: Georgia, serif; }
.pause-hint { font-size: clamp(13px, 1.4vw, 18px) !important; opacity: .45; margin-top: 26px !important; }
.pause-tap:disabled { cursor: default; }
body[data-pause-kind="timed"] .pause-content time { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ambient-shape { position: absolute; border-radius: 50%; filter: blur(5px); opacity: .28; }
.ambient-one { width: 55vw; height: 55vw; left: -15vw; top: -24vw; background: #d2b878; }
.ambient-two { width: 50vw; height: 50vw; right: -20vw; bottom: -26vw; background: #df8a69; }

dialog { border: 0; padding: 0; border-radius: 18px; width: min(680px, calc(100vw - 28px)); background: var(--card); box-shadow: 0 30px 90px #0c211a42; }
dialog::backdrop { background: #10251e87; backdrop-filter: blur(2px); }
#task-form { padding: 25px; }
#task-form header, #task-form footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
#task-form h2 { margin: 0; font-family: Georgia, serif; font-weight: 500; font-size: 28px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; font-weight: 800; color: var(--accent); margin: 0 0 7px; text-transform: uppercase; }
.close { border: 0; background: transparent; font-size: 25px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
#task-form > label, .form-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; margin: 14px 0; }
input, textarea, select { border: 1px solid var(--line); border-radius: 9px; background: #f6f0e6; padding: 10px 11px; outline: 0; }
input:focus, textarea:focus, select:focus { border-color: #71867d; box-shadow: 0 0 0 3px #71867d20; }
.check-row { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; justify-content: start; }
.check-row input { width: auto; }
.primary, .ghost { border: 0; border-radius: 9px; padding: 10px 16px; font-weight: 750; }
.primary { background: var(--ink); color: white; }
.ghost { background: #dcd4c7; }
.wide { width: 100%; }
.error { background: #f8ded6; color: #8d3219; padding: 9px 11px; border-radius: 8px; font-size: 13px; }
.muted { color: var(--muted); line-height: 1.55; }
.auth-page { display: grid; place-items: center; padding: 25px; }
.auth-card { width: min(430px, 100%); background: var(--card); border: 1px solid var(--line); padding: 38px; border-radius: 20px; box-shadow: var(--shadow); }
.auth-card h1 { font-family: Georgia, serif; font-weight: 500; font-size: 42px; line-height: 1; margin: 0; }
.auth-card .brand-mark { margin-bottom: 30px; }
.auth-form { display: grid; gap: 9px; margin-top: 25px; }
.auth-form label { font-size: 12px; font-weight: 700; }
.auth-form button { margin-top: 8px; }
.consent-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.scope-list { padding: 0; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.scope-list li { font-family: ui-monospace, monospace; font-size: 12px; background: #dcd4c7; padding: 6px 8px; border-radius: 7px; }

@media (max-width: 760px) {
  .shell, body.nav-expanded .shell { display: block; }
  .sidebar { position: fixed; left: 0; width: min(300px, 84vw); transform: translateX(-105%); opacity: 0; pointer-events: none; box-shadow: 20px 0 60px rgba(20,40,32,.18); }
  body.nav-expanded .sidebar { transform: translateX(0); opacity: 1; pointer-events: auto; }
  body.nav-expanded .nav-shade { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(17,37,30,.34); }
  .main, body.nav-collapsed .main { width: 100%; padding: 25px 15px 135px; }
  .topbar { grid-template-columns: auto 1fr auto; gap: 11px; margin-bottom: 28px; }
  .date-block h1, #clock, .date-sep { font-size: 23px; }
  .date-row { gap: 8px; }
  .context-line { font-size: 12px; }
  .search { display: none; }
  .quick-add, body.nav-collapsed .quick-add { left: 14px; right: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--keyboard, 0px)); width: auto; transform: none; }
  .quick-add p { display: none; }
  .quick-add form { gap: 6px; }
  .quick-submit { padding: 8px 10px; }
  .task { padding: 10px; column-gap: 9px; }
  .meta { margin-top: 7px; }
  /* Die Aktionen standen untereinander und haben die Karte auf ihre Hoehe
     gezwungen. Nebeneinander bestimmt wieder der Inhalt die Hoehe. */
  .task-actions { flex-direction: row; align-items: flex-start; gap: 0; }
  .task-actions button { width: 32px; height: 32px; font-size: 17px; }
  .task-actions button[data-action="trash"], .task-actions button[data-action="restore"] { width: 26px; height: 26px; }
  .task-title { font-size: 15.5px; }
  .form-grid { grid-template-columns: 1fr; }
  dialog { max-height: 92vh; overflow: auto; }
  .auth-card { padding: 28px; }
  .auth-card h1 { font-size: 35px; }
  body[data-display-mode="productivity"] .main { padding: 28px 18px 100px; }
  body[data-display-mode="productivity"] .quick-add { left: auto; right: max(18px, env(safe-area-inset-right)); width: auto; }
  body[data-display-mode="productivity"] .date-block h1 { font-size: clamp(38px, 10vw, 58px); }
  body[data-display-mode="productivity"] .task-title { font-size: clamp(22px, 6vw, 31px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.field-hint { color: var(--muted); font-size: .76em; font-weight: 500; }
/* iOS zoomt in jedes Feld unter 16px hinein und bleibt danach vergroessert. Auf
   Touchgeraeten daher nie darunter, auch nicht fuer den Notizblock. Steht als Letztes,
   damit es die klassenbezogenen Groessen darueber schlaegt. */
@media (pointer: coarse) {
  input, textarea, select, .quick-add input, .notes-field { font-size: 16px; }
}