/* LifeVault - kein Framework, kein Build-Step.
 *
 * Bildsprache: technische Architekturdiagramme. Fast schwarzer Grund,
 * Haarlinien, monospace-Etiketten in Versalien, Punktwolken als Datenbild.
 * Dicht auf den Schauflaechen, ruhig auf den Erfassungsflaechen.
 *
 * Anfassgefuehl nach Apple-Regeln: Rueckmeldung beim Druecken (nicht beim
 * Loslassen), kurze Wege, kein Ueberschwingen ausser nach Schwung.
 */

:root {
  color-scheme: dark;

  /* EIN Grund fuer die ganze Seite. Es gibt keine Panels, die sich abheben -
   * Gliederung entsteht ausschliesslich durch Haarlinien, Etiketten und Luft.
   * --flaeche bleibt fuer die zwei Stellen, an denen ein Zustand wirklich
   * angehoben werden muss (gewaehlter Skalenknopf, offener Editor). */
  --tiefe: #06070a;
  --flaeche: #0d1013;
  --flaeche-hoch: #141a1d;

  /* Linien - Haarlinien wie im Plan, nie kraeftig */
  --linie: #1b1f28;
  --linie-hell: #2a2f3b;

  /* Schrift */
  --text: #e9ebf1;
  --text-leise: #79808f;
  --text-still: #464c59;

  /* Akzent: dasselbe Gruen wie auf soellhammer.work. EINE Akzentfarbe, sonst
   * kippt die Monochromie - "Signal" und "in Ordnung" sind derselbe Ton. */
  --gruen: #2ecc71;
  --signal: var(--gruen);
  --ok: var(--gruen);
  --warn: #ffb057;
  --fehler: #ff6b6b;

  /* Schriften */
  --schrift: system-ui, -apple-system, "Segoe UI", sans-serif;
  --daten: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius: 3px;
  --nav-hoehe: 58px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--tiefe);
  color: var(--text);
  font: 16px/1.55 var(--schrift);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Kein Tap-Delay, keine blaue Tap-Markierung - Rueckmeldung machen wir selbst */
a, button, input, select, textarea, [role=button] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--signal); text-decoration: none; }

/* Typografie: Tracking ist groessenabhaengig. Grosse Schrift zieht zusammen,
 * kleine Schrift bekommt Luft - eine feste Laufweite waere ueberall falsch. */

h1 {
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 600;
  margin: 0 0 .5rem;
}

.boot {
  padding: 2rem;
  font-family: var(--daten);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--text-still);
}

/* Etikett: das Grundelement der Bildsprache. Winzig, Versalien, weit
 * gesperrt, monospace - wie die Beschriftung an einem Plan. */
.etikett {
  font-family: var(--daten);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-still);
  font-weight: 500;
}

/* Zahlen immer tabellarisch, damit nichts springt */
.zahl, .messwert, input[type=number] {
  font-family: var(--daten);
  font-variant-numeric: tabular-nums;
}

/* ---------- Grundgeruest ---------- */

#app {
  display: grid;
  grid-template-areas: "kopf" "inhalt" "nav";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}

.topbar {
  grid-area: kopf;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--linie);
  /* Deckend im selben Ton wie die Seite, nicht durchscheinend: Ein
   * milchiger Streifen waere wieder ein eigener Grund. Deckend bleibt es
   * derselbe - man sieht nur die Haarlinie. */
  background: var(--tiefe);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marke {
  font-family: var(--daten);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.marke strong { color: var(--text); font-weight: 600; }
@media (hover: hover) {
  .marke:hover { color: var(--text); }
}

.status {
  margin-left: auto;
  font-family: var(--daten);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-still);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.status::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--text-still);
}
.status.ok::before { background: var(--ok); }
.status.weg::before { background: var(--fehler); }

main {
  grid-area: inhalt;
  padding: 1.5rem 1rem 3rem;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Rueckweg ----------
 * Ohne Seitenmenue braucht jede geoeffnete Ansicht einen sichtbaren Weg
 * zurueck, sonst sitzt man fest. Im Etikett-Stil, damit er nicht wie ein
 * fremder Knopf in der Flaeche liegt. Zweiter Weg: Esc, dritter: die Marke. */

/* Am Handy fuehrt die untere Navigation zurueck - dort waere der Rueckweg
 * doppelt und kostete auf jedem Modulschirm eine Zeile. Er gehoert zum
 * Desktop, wo es sonst gar keinen Weg heraus gibt. */
.rueckweg {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
  padding: .3rem .55rem .3rem 0;
  font-family: var(--daten);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-still);
  transition: color 140ms ease-out, transform 110ms cubic-bezier(.2, 0, .2, 1);
}
.rueckweg span { font-size: .95rem; line-height: 1; }
.rueckweg[hidden] { display: none; }
.rueckweg:active { transform: scale(.975); }
@media (hover: hover) {
  .rueckweg:hover { color: var(--text-leise); }
}

/* ---------- Aufzieher ----------
 * Die leere Huelle, die beim Oeffnen aus dem Feld auf die Flaeche waechst.
 * Unter der Topbar (z-index 10), damit Marke und Status stehen bleiben. */

.aufzieher {
  position: fixed;
  z-index: 5;
  /* Deckend im Seitenton, damit der alte Inhalt dahinter verschwindet - der
   * Rahmen ist das Einzige, was man von der Huelle sieht. Mit einer eigenen
   * Flaechenfarbe blitzte bei jedem Oeffnen ein Kasten auf. */
  background: var(--tiefe);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  pointer-events: none;
}

/* ---------- Navigation ---------- */

.nav {
  grid-area: nav;
  display: flex;
  border-top: 1px solid var(--linie);
  background: var(--tiefe);
  padding-bottom: env(safe-area-inset-bottom);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.navlink {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: var(--nav-hoehe);
  color: var(--text-still);
  font-family: var(--daten);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color 120ms ease-out;
}
.navlink.aktiv { color: var(--text); }
.navicon { font-size: 1rem; line-height: 1; }

.navlink.aktiv .navicon { color: var(--signal); }

.is-anonym .nav,
.is-anonym .topbar .status,
.is-anonym .topbar #abmelden { display: none; }

/* ---------- Rueckmeldung beim Anfassen ----------
 * Beim Druecken, nicht beim Loslassen. 100ms, kein Ueberschwingen:
 * ein Knopf hat keinen Schwung mitbekommen. */

.knopf, .navlink, .kachel, .task-titel, .tafel-klick {
  transition: transform 110ms cubic-bezier(.2, 0, .2, 1),
              border-color 140ms ease-out,
              color 140ms ease-out,
              background-color 140ms ease-out;
}
.knopf:active, .navlink:active, .tafel-klick:active { transform: scale(.975); }
.kachel:active { transform: scale(.99); }
.task-titel:active { transform: scale(.995); }

@media (hover: hover) {
  .knopf:hover { border-color: var(--linie-hell); color: var(--text); }
  .kachel:hover { border-color: var(--linie-hell); }
  .navlink:hover { color: var(--text-leise); }
}

@media (prefers-reduced-motion: reduce) {
  .knopf:active, .navlink:active, .kachel:active,
  .task-titel:active, .rueckweg:active, .tafel-klick:active { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Tafel: das Panel der Bildsprache ----------
 * Duenner Rahmen, Eckmarken wie ein Passkreuz, Etikett oben links. */

.tafel {
  position: relative;
  padding: 0 0 1.75rem;
}

.tafel-kopf {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
}
.tafel-kopf .etikett { flex: 1; }
.tafel-wert {
  font-family: var(--daten);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--text-leise);
}

/* Die Eckmarken sind mit den Kaesten entfallen: Vier Winkel sind die Ecken
 * eines Rahmens, und genau den soll es nicht mehr geben. .markiert bleibt als
 * Klasse bestehen, damit die Ansichten nichts davon wissen muessen. */

/* ---------- Messwert: die grosse Zahl ---------- */

.messwert {
  display: block;
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 500;
  color: var(--text);
}
.messwert .einheit {
  font-size: .32em;
  letter-spacing: .1em;
  color: var(--text-still);
  margin-left: .5em;
  font-weight: 400;
}
.messwert-note {
  font-family: var(--daten);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--text-leise);
  margin-top: .5rem;
}

/* ---------- Punktwolke ---------- */

.wolke {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.wolke canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Achsenbeschriftung an der Wolke */
.wolke-achse {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-family: var(--daten);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--text-still);
}

/* Linksbuendig und flach: Ohne Kasten hat zentrierter Text nichts, worin er
 * zentriert waere - er sieht dann nur verloren aus. */
.wolke-leer {
  font-family: var(--daten);
  font-size: .65rem;
  line-height: 1.8;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-still);
  padding: .5rem 0 1rem;
}

/* ---------- Bausteine ---------- */

.karte {
  padding: 1.1rem 0;
}
.karte.leer {
  color: var(--text-still);
  font-family: var(--daten);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Ein Fehler braucht eine Kante, aber keinen Kasten - eine kraeftige
 * Randlinie links reicht und bleibt in der Sprache des Plans. */
.karte.fehler {
  border-left: 2px solid var(--fehler);
  padding-left: 1rem;
}
.karte.fehler h2 { color: var(--fehler); }

.hinweis { color: var(--text-leise); margin-top: 0; font-size: .92rem; }
.hinweis.klein { font-size: .8rem; margin-top: 1.5rem; }

.knopf {
  font: inherit;
  font-size: .9rem;
  border: 1px solid var(--linie-hell);
  background: transparent;
  color: var(--text-leise);
  border-radius: var(--radius);
  padding: .55rem .9rem;
  cursor: pointer;
}
.knopf:disabled { opacity: .4; cursor: default; }

/* Die eine Stelle, an der der Akzent traegt: der Knopf, der etwas ausloest.
 * Nicht gefuellt - eine weisse oder grasgruene Flaeche waere wieder ein Kasten
 * und der lauteste dazu. Gruene Schrift auf gruener Haarlinie reicht. */
.knopf.primaer {
  background: transparent;
  border-color: var(--gruen);
  color: var(--gruen);
  width: 100%;
  padding: .65rem;
  font-weight: 500;
  letter-spacing: .01em;
}
@media (hover: hover) {
  .knopf.primaer:hover {
    background: color-mix(in srgb, var(--gruen) 12%, transparent);
    border-color: var(--gruen);
    color: var(--gruen);
  }
}

.knopf.schlicht {
  padding: .3rem .6rem;
  font-family: var(--daten);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-color: transparent;
}
@media (hover: hover) {
  .knopf.schlicht:hover { border-color: var(--linie); }
}

/* ---------- Sektionen der Uebersicht ----------
 * Kein Modulraster mehr: Jedes Modul bekommt eine eigene Flaeche mit seinem
 * eigenen Bild. Die ganze Sektion ist der Link ins Modul - dadurch misst der
 * Aufzieher auch die ganze Flaeche und nicht nur eine Kopfzeile. */

/* Keine Kaesten. Die Sektionen liegen auf demselben Grund wie alles andere;
 * getrennt werden sie von einer Haarlinie und viel Luft - so wie die Felder
 * eines Plans, die auch keinen Rahmen brauchen, um auseinanderzufallen. */

.sektionen {
  display: grid;
  margin-top: 2rem;
}

.sektion {
  position: relative;
  display: block;
  color: var(--text);
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--linie);
}
.sektion:first-child { border-top: 0; padding-top: 0; }
.sektion:last-child { padding-bottom: 1rem; }

/* Ohne Flaeche muss die Rueckmeldung aus der Schrift kommen: Beim Zeigen hellt
 * das Etikett auf und der Pfeil rueckt nach - eine Kachel, die sich einfaerbt,
 * gibt es nicht mehr. */
@media (hover: hover) {
  .sektion:hover .sektion-kopf .etikett { color: var(--text); }
  .sektion:hover .sektion-pfeil { transform: translateX(3px); color: var(--gruen); }
}

.sektion-kopf {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding-bottom: .6rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--linie);
}
.sektion-kopf .etikett {
  color: var(--text-leise);
  transition: color 160ms ease-out;
}

.sektion-lage {
  flex: 1;
  font-family: var(--daten);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--text-still);
  text-align: right;
}

.sektion-pfeil {
  font-family: var(--daten);
  font-size: .8rem;
  line-height: 1;
  color: var(--text-still);
  transition: transform 160ms cubic-bezier(.2, 0, .2, 1), color 160ms ease-out;
}

/* Die grosse Zahl in einer Sektion (Finanzen) */
.messwert.gross {
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  margin-bottom: .1rem;
}

/* Nächste Termine in der Uni-Sektion */
.lage-liste {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 1px;
}
.lage-liste li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--linie);
}
.lage-liste li:last-child { border-bottom: 0; }
.lage-liste .posten-titel { font-size: .9rem; }
.lage-liste .marker { border-color: transparent; padding-left: 0; padding-right: 0; }

/* Das Gelände darf mehr Platz bekommen als die kleinen Balken */
.wolke.gross { margin-bottom: .5rem; }

/* Die Achse gehoert zum Bild darueber, nicht zur Messreihe darunter - ohne
 * Abstand kleben die beiden Zeilen aneinander und lesen sich als eine. */
.sektion .wolke-achse { margin-bottom: 1.35rem; }
.sektion .wolke-achse span:nth-child(2) { color: var(--text-leise); }

@media (prefers-reduced-motion: reduce) {
  .sektion:hover .sektion-pfeil { transform: none; }
}

/* ---------- Uebersicht ---------- */

/* Kopfzeile wie der Titelblock eines Plans */
.kopfzeile {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .55rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--linie);
}
.kopfzeile-datum { margin-left: auto; color: var(--text-leise); }

/* Messwertleiste: drei Felder, getrennt durch senkrechte Haarlinien.
 * Frueher war das ein Gitter aus Kaesten mit 1px Fugen - dieselbe Trennung,
 * aber ohne dass drei Rechtecke entstehen. */
.messreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 2rem;
}
.messfeld {
  display: grid;
  gap: .5rem;
  padding: 0 1.25rem;
  border-left: 1px solid var(--linie);
}
.messfeld:first-child { padding-left: 0; border-left: 0; }
.messfeld .messwert { font-size: clamp(1.5rem, 6vw, 2.1rem); }

.abschnitt {
  display: block;
  margin: 2rem 0 .6rem;
  color: var(--text-still);
}

.wochentage span { flex: 1; text-align: center; }
.wochentage { justify-content: stretch; }

@media (min-width: 560px) {
  .messfeld { padding: 1rem 1.25rem 1.15rem; }
}

/* ---------- Formulare ---------- */

label {
  display: grid;
  gap: .4rem;
  font-family: var(--daten);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-still);
}

/* Unterstrich statt Kaestchen: Ein umrandetes Feld ist auf einem einfarbigen
 * Grund die auffaelligste Box ueberhaupt. Die Linie sagt genauso deutlich
 * "hier wird getippt" und bleibt in der Sprache des Plans. */
input, select, textarea {
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie-hell);
  border-radius: 0;
  padding: .5rem .1rem;
  width: 100%;
}
textarea {
  resize: vertical;
  border: 1px solid var(--linie-hell);
  padding: .55rem .6rem;
}
input::placeholder { color: var(--text-still); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gruen);
}
/* Die Fokuslinie darf kraeftiger sein, ohne dass das Feld springt */
input:focus, select:focus { box-shadow: 0 1px 0 0 var(--gruen); }

.fehlertext {
  margin: 0;
  color: var(--fehler);
  font-size: .82rem;
}

/* ---------- Tasks ---------- */

.neuform {
  display: grid;
  gap: .7rem;
  margin-bottom: 2.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--linie);
}
/* .karte.neuform kam vom Kasten - die Polsterung darf nicht doppelt kommen */
.karte.neuform { padding: 0 0 1.25rem; }
.neuform-zeile { display: flex; gap: .5rem; flex-wrap: wrap; }
.neuform-zeile select { flex: 1 1 8rem; width: auto; }
.knopf.schmal { width: auto; flex: 0 0 auto; padding: .55rem 1.2rem; }

/* Zeitfaecher */

.fach { margin-bottom: 1.75rem; }
.fachtitel {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--daten);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-still);
  margin: 0 0 .65rem;
  font-weight: 500;
}
/* Leitlinie nach rechts, wie eine Bemassung */
.fachtitel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}
.fachtitel .zahl {
  font-size: .625rem;
  color: var(--text-still);
  letter-spacing: .04em;
  order: 3;
}
.fach-spaet .fachtitel { color: var(--fehler); }
.fach-spaet .fachtitel::after { background: color-mix(in srgb, var(--fehler) 30%, transparent); }
.fach-erledigt { opacity: .55; }

/* Zeilen */

.tasks { list-style: none; margin: 0; padding: 0; display: grid; }

.task {
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}
.task:last-child { border-bottom: 0; }
.task.prio-hoch { border-left-color: var(--text); }
.task.prio-normal { border-left-color: var(--linie-hell); }
.task.prio-niedrig { border-left-color: transparent; }

.task-kopf {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .72rem .85rem .72rem .7rem;
}

.task input[type=checkbox] {
  width: 1.05rem; height: 1.05rem;
  flex: 0 0 auto;
  accent-color: var(--ok);
  cursor: pointer;
  margin: 0;
}

.task-titel {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
  font: inherit;
  font-size: .95rem;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.task.ist-erledigt .task-titel { text-decoration: line-through; color: var(--text-still); }

.marker, .faellig, .notizzeichen { flex: 0 0 auto; }
/* Ohne Rahmen: Auch ein kleines Rechteck ist ein Rechteck. Als gesperrte
 * Versalie liest es sich ohnehin als Beschriftung. */
.marker {
  font-family: var(--daten);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-still);
}
.faellig {
  font-family: var(--daten);
  font-variant-numeric: tabular-nums;
  font-size: .7rem;
  color: var(--text-still);
}
.faellig.spaet { color: var(--fehler); }
.notizzeichen { font-size: .75rem; color: var(--text-still); }

/* Der Moment beim Abhaken: kurz aufleuchten, durchstreichen, weggleiten.
 * Kein Ueberschwingen - das Haekchen hat keinen Schwung mitgebracht. */

.task.wird-erledigt {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-left-color: var(--ok);
  transform: translateX(12px);
  opacity: 0;
  transition:
    background-color 90ms ease-out,
    border-left-color 90ms ease-out,
    transform 380ms cubic-bezier(.32, 0, .24, 1),
    opacity 380ms cubic-bezier(.32, 0, .24, 1);
}
.task.wird-erledigt .task-titel { text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
  .task.wird-erledigt {
    transition: opacity 160ms linear, background-color 90ms ease-out;
    transform: none;
  }
}

/* Editor */

/* Der offene Editor darf sich abheben - hier ist ein Zustand gemeint, kein
 * Panel. Statt einer Flaeche markiert ihn die Akzentkante links. */
.task.offen { border-left-color: var(--gruen); }
.task-editor {
  display: grid;
  gap: .7rem;
  padding: .5rem .85rem 1rem .7rem;
  border-top: 1px solid var(--linie);
}
.editor-zeile { display: flex; gap: .5rem; flex-wrap: wrap; }
.editor-zeile select, .editor-zeile input[type=date] { flex: 1 1 7rem; width: auto; }
.editor-knoepfe { justify-content: flex-start; }
.editor-knoepfe .loeschen { margin-left: auto; color: var(--fehler); }

/* ---------- Postenlisten (Finanzen, Uni) ----------
 * Eine Zeile ist: Etikett links, Wert rechts, Loeschkreuz ganz aussen.
 * Bewusst schlicht gehalten - die Gestaltung kommt in einem eigenen Durchgang. */

.posten {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
}

.posten-zeile {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--linie);
}
.posten-zeile:last-child { border-bottom: 0; }
.posten-zeile.ist-erledigt { opacity: .5; }
.posten-zeile.ist-erledigt .posten-titel { text-decoration: line-through; }

.posten-tag {
  flex: 0 0 2.4rem;
  font-family: var(--daten);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-still);
}

.posten-titel {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .95rem;
}

.posten-betrag {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: .88rem;
  color: var(--text-leise);
}

.posten-zeile input[type=checkbox] {
  width: 1.05rem; height: 1.05rem;
  flex: 0 0 auto;
  accent-color: var(--ok);
  cursor: pointer;
  margin: 0;
}

/* Das Loeschkreuz bleibt still, bis man die Zeile anfasst - sonst schreit
 * jede Liste den Nutzer mit roten Kreuzen an. */
.posten-zeile .loeschen {
  flex: 0 0 auto;
  padding: .1rem .4rem;
  font-size: .9rem;
  line-height: 1;
  color: var(--text-still);
  opacity: 0;
  transition: opacity 140ms ease-out, color 140ms ease-out;
}
.posten-zeile:hover .loeschen,
.posten-zeile:focus-within .loeschen { opacity: 1; }
.posten-zeile .loeschen:hover { color: var(--fehler); }

/* Ohne Zeigegeraet gibt es kein hover - dort steht das Kreuz dauerhaft. */
@media (hover: none) {
  .posten-zeile .loeschen { opacity: .6; }
}

/* ---------- Klappen ----------
 * Fuer Dinge, die man einmal eintraegt und danach selten anfasst. */

.klappe {
  border-top: 1px solid var(--linie);
  margin-top: 2rem;
  padding-top: .9rem;
}
.klappe.klein { margin-top: .9rem; border-top: 0; }

.klappe > summary {
  cursor: pointer;
  list-style: none;
  padding: .25rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::before {
  content: "+";
  font-family: var(--daten);
  color: var(--text-still);
}
.klappe[open] > summary::before { content: "–"; }
@media (hover: hover) {
  .klappe > summary:hover { color: var(--text-leise); }
}

.klappe-inhalt { padding-top: 1rem; }

/* ---------- Finanzen ---------- */

.messwert.still { color: var(--text-still); }
.messwert.ist-knapp { color: var(--fehler); }

/* Der Betrag ist das Feld, in das zuerst getippt wird - es bekommt Gewicht. */
.betragfeld {
  flex: 0 0 8rem;
  width: auto;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.neuform-zeile .betragfeld + input { flex: 1 1 10rem; width: auto; }
.neuform-zeile input[type=date] { flex: 0 0 auto; width: auto; }

/* ---------- Uni ---------- */

.projekt { margin-bottom: 1.25rem; }
.projekt-notiz { margin: 0 0 1rem; white-space: pre-wrap; }
.terminform {
  margin: .25rem 0 0;
  padding: .6rem 0 0;
  border: 0;
  border-top: 1px solid var(--linie);
  background: transparent;
  border-radius: 0;
}
.terminform .neuform-zeile input[type=text] { flex: 1 1 9rem; width: auto; }
.terminform select { flex: 0 0 auto; width: auto; }

.projekt-fuss {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .7rem;
}
.projekt-fuss .loeschen { margin-left: auto; color: var(--text-still); }
.projekt-fuss .loeschen:hover { color: var(--fehler); }

.schmalfeld { flex: 0 0 7rem; width: auto; }

/* ---------- Health ---------- */

.skala { margin-bottom: 1rem; }
.skala-knoepfe {
  display: flex;
  margin-top: .5rem;
  border-bottom: 1px solid var(--linie);
}

/* Grosse Ziele: Das hier wird im Vorbeigehen angetippt, nicht studiert. */
/* Grosse Ziele bleiben, der Kasten geht: Gewaehlt wird durch eine kraeftige
 * Linie darunter angezeigt, nicht durch eine gefuellte Flaeche. */
.skalaknopf {
  flex: 1;
  min-height: 48px;
  font: inherit;
  font-family: var(--daten);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  color: var(--text-still);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease-out, border-color 140ms ease-out,
              transform 110ms cubic-bezier(.2, 0, .2, 1);
}
.skalaknopf:active { transform: scale(.975); }
.skalaknopf.gewaehlt { color: var(--gruen); border-bottom-color: var(--gruen); }
@media (hover: hover) {
  .skalaknopf:hover { color: var(--text-leise); }
  .skalaknopf.gewaehlt:hover { color: var(--gruen); }
}
@media (prefers-reduced-motion: reduce) {
  .skalaknopf:active { transform: none; }
}

.feldgruppe {
  flex: 1 1 9rem;
  display: grid;
  gap: .4rem;
}
.feldgruppe input { width: 100%; }

/* Messreihe innerhalb einer Tafel: kein zweiter Rahmen um den ersten. */
.messreihe-innen {
  border: 0;
  margin-bottom: 0;
  background: transparent;
  gap: 1rem;
}
/* Das Etikett nimmt die dehnbare Zeile, die Zahl sitzt darunter. Bricht ein
 * laengeres Etikett um, rutscht sonst nur seine Zahl nach unten und die drei
 * Werte stehen nicht mehr auf einer Linie. */
.messreihe-innen .messfeld {
  padding: 0;
  grid-template-rows: 1fr auto;
}
.messreihe-innen .messwert { font-size: clamp(1.2rem, 5vw, 1.6rem); }

/* ---------- Login ---------- */

.loginbox {
  max-width: 320px;
  margin: 12vh auto 0;
}
.loginbox .marke-gross {
  font-family: var(--daten);
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-still);
  text-align: center;
  margin-bottom: 2.5rem;
}
.loginbox .marke-gross strong { color: var(--text); font-weight: 500; }
.loginbox form { display: grid; gap: 1.1rem; }

/* ---------- Ab Tablet: kein Menue mehr ----------
 * Die untere Navigation ist eine Handy-Loesung - Daumenreichweite, ein Tipser
 * pro Modul. Am Desktop faellt sie ersatzlos weg: dort ist die Uebersicht die
 * Oberflaeche, man klickt in ihre Felder hinein und kommt ueber den Rueckweg
 * oben links wieder heraus. Die beiden Geraete navigieren also bewusst
 * unterschiedlich. */

@media (min-width: 760px) {
  #app {
    grid-template-areas: "kopf" "inhalt";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .nav { display: none; }
  .rueckweg { display: inline-flex; }
  .rueckweg[hidden] { display: none; }
  main { padding: 2rem 2.25rem 4rem; max-width: 1080px; margin: 0 auto; }
  h1 { font-size: 1.7rem; }

  /* Jede Sektion nimmt die volle Breite - auch am grossen Schirm. Zwei
   * Spalten hatten die Diagramme auf halbe Breite gedrueckt, und ein
   * Punktwolken-Gelaende in einem schmalen Feld verliert genau die Wirkung,
   * fuer die es da ist. */
  .sektion { padding: 1.15rem 1.3rem 1.3rem; }
  .sektionen { gap: 1.5rem; }
}