/* Recall — ein ruhiger Raum zum Denken.
   Kein Dashboard, keine Karten, keine Verläufe. Papier, Tinte, Luft. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/schrift/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/schrift/newsreader-latin-kursiv.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}

:root {
  --papier:      #F5F2EA;
  --papier-tief: #EEE9DD;
  --tinte:       #191613;
  --tinte-weich: #4E473E;
  --gedaempft:   #8C8375;
  --linie:       #DFD8C9;
  --linie-fein:  #E8E2D5;
  --siena:       #7B3F2E;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bahn: 34rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 0 1.5rem env(safe-area-inset-bottom);
}

/* ------------------------------------------------------------------ Rahmen */

.kopf {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 1.75rem 0 0;
}
.marke {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gedaempft);
  text-decoration: none;
}
.marke:hover { color: var(--tinte-weich); }

.bahn {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 2.5rem 0 5rem;
}

/* ------------------------------------------------------------------ Typo */

h1, h2 { font-weight: 400; margin: 0; }

.klein-titel {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.ruhig { color: var(--tinte-weich); margin: 0 0 1.5rem; }

.fehler {
  color: var(--siena);
  font-size: 1rem;
  margin: 0 0 1.25rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--siena);
}

/* ------------------------------------------------------------------ Felder */

input[type=text], input[type=url], textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--tinte);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: 0.7rem 0;
  outline: none;
  transition: border-color .18s ease;
  -webkit-appearance: none;
}
input:focus, textarea:focus { border-bottom-color: var(--tinte); }
::placeholder { color: #B9B0A0; }

.feld-link { font-size: 1rem; margin-bottom: 2rem; }

.form-zeit { margin-top: 2.25rem; }

.zeitpaar { display: flex; gap: 2.5rem; }
.zeitfeld { flex: 1; }
.zeitfeld input { font-size: 1.35rem; padding-top: 0.45rem; font-variant-numeric: tabular-nums; }

.warum { margin: 2.25rem 0 0; }
.warum summary {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--gedaempft);
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0;
}
.warum summary::-webkit-details-marker { display: none; }
.warum summary::before { content: '+ '; }
.warum[open] summary::before { content: '\2212  '; }
.warum textarea { margin-top: 0.35rem; }

/* ------------------------------------------------------------------ Knöpfe */

.knopf {
  display: block;
  width: 100%;
  margin-top: 2.5rem;
  padding: 1.05rem 1.5rem;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--papier);
  background: var(--tinte);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .18s ease, opacity .18s ease;
  -webkit-appearance: none;
}
.knopf:hover { background: #2C2722; }
.knopf:disabled { opacity: .45; cursor: default; }

.knopf-leise {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.5rem 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--gedaempft);
  background: none;
  border: none;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
  -webkit-appearance: none;
}
.knopf-leise:hover { color: var(--tinte); border-bottom-color: var(--tinte); }

.zurueck {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--gedaempft);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 1px;
}
.zurueck:hover { color: var(--tinte); border-bottom-color: var(--tinte); }

/* ------------------------------------------------------------------ Hinweis */

.hinweis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: -0.75rem 0 2.5rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinte-weich);
}
.hinweis-text { font-size: 1rem; }
.hinweis-pfeil { color: var(--gedaempft); }
.hinweis:hover { color: var(--tinte); }
.hinweis:hover .hinweis-pfeil { color: var(--tinte); }

/* ------------------------------------------------------------------ Heute

   Die erste Zeile der Startseite beantwortet die einzige Frage, die morgens
   zaehlt: liegt etwas an, woher, wie viel, und wo geht es weiter. */

.heute {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
  margin: -0.5rem 0 2.75rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinte);
}
.heute-marke {
  grid-column: 1;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.heute-titel {
  grid-column: 1;
  font-size: 1.18rem;
  line-height: 1.32;
  margin-top: 0.3rem;
  text-wrap: balance;
}
.heute-meta {
  grid-column: 1;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--gedaempft);
  margin-top: 0.35rem;
}
.heute-pfeil { grid-column: 2; grid-row: 1 / span 3; color: var(--gedaempft); }
.heute:hover .heute-pfeil { color: var(--tinte); }

.heute-leer {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--gedaempft);
  margin: -0.5rem 0 2.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linie-fein);
}

/* ------------------------------------------------------------------ Episode */

.episode { display: flex; gap: 1.1rem; align-items: flex-start; }
.bild {
  width: 68px; height: 68px;
  flex: 0 0 68px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--papier-tief);
}
.pod {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: 0.3rem;
}
.ep-titel {
  font-size: 1.32rem;
  line-height: 1.3;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.ep-meta {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--gedaempft);
  margin-top: 0.4rem;
}

.fortsetzung {
  margin: 1.75rem 0 0;
  font-size: 1rem;
  color: var(--tinte-weich);
  padding-left: 0.9rem;
  border-left: 2px solid var(--linie);
}

/* ------------------------------------------------------------------ Verlauf */

.verlauf { margin-top: 4.5rem; }
.verlauf .klein-titel { margin-bottom: 0.9rem; }
.zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--linie-fein);
}
.zeile-titel { font-size: 1rem; line-height: 1.35; }
.zeile-meta {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--gedaempft);
  margin-top: 0.2rem;
}
.zeile-status {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gedaempft);
}
.zeile-status.s-fertig, .zeile-status.s-gut { color: var(--tinte-weich); }
.zeile-status.s-fehler, .zeile-status.s-ohne_quelle,
.zeile-status.s-schlecht { color: var(--siena); }

a.zeile { text-decoration: none; color: inherit; display: flex; }
a.zeile:hover .zeile-titel { color: var(--siena); }

.fertig { padding-top: 1rem; }

/* -------------------------------------------------------------------- Brief

   Die lange Fassung, zum Nachlesen in acht Monaten. Gesetzt wie eine Seite
   Papier, nicht wie eine App. Kein Verlauf der Sitzung, keine Leistung. */

.b-blatt { padding-top: 0.5rem; }
.b-marke {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.b-titel {
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0.35rem 0 0.2rem;
}
.b-quelle {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--gedaempft);
  margin: 0 0 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--linie);
}
.b-rubrik {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--siena);
  margin: 2.6rem 0 0.9rem;
}
.b-auftakt { font-size: 1.12rem; line-height: 1.6; margin: 0; }
.b-p { margin: 0 0 1.1rem; line-height: 1.62; }
.b-p b { font-weight: 600; }
.b-zitat {
  border-left: 2px solid var(--linie);
  padding-left: 1rem;
  margin: 0 0 1rem;
  font-style: italic;
  color: var(--tinte-weich);
}
.b-kern {
  background: var(--papier-tief);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 1.3rem 1.4rem 0.6rem;
}
.b-kern p {
  margin: 0 0 0.85rem;
  padding-left: 1.2rem;
  text-indent: -1.2rem;
  line-height: 1.55;
}
.b-kern p::before { content: "\25AA"; color: var(--siena); margin-right: 0.55rem; }

/* ------------------------------------------------------------------ Gedanke

   Ein Gedanke pro Bildschirm. Der Text ist der Held, alles andere tritt
   zurueck. Keine Karten, keine Rahmen, keine Sprechblasen, keine Fortschritts-
   balken, keine Farbe ausser Papier und Tinte. Gelesen wird auf dem Handy,
   frueh, im Halbdunkel. */

.sitzung .bahn { padding-top: 1.25rem; }

.gkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--linie-fein);
}
.gkopf-quelle { min-width: 0; }
.gpod {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gedaempft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gzaehler {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--gedaempft);
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

/* Der Ausgang. Immer sichtbar, nie versteckt, nie als Abbruch gerahmt. */
.gschluss {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--gedaempft);
  background: none;
  border: none;
  border-bottom: 1px solid var(--linie);
  padding: 0 0 2px;
  cursor: pointer;
  -webkit-appearance: none;
}
.gschluss:hover { color: var(--tinte); border-bottom-color: var(--tinte); }

/* A) Kontext. Macht die Stelle im Kopf wieder auf. */
.gkontext {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gedaempft);
  margin: 0 0 1.25rem;
}

.gtitel {
  font-size: clamp(1.6rem, 6.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.gtitel-start {
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0.4rem 0 1.5rem;
  text-wrap: balance;
}

/* B) Der Gedanke selbst. Ausgesprochen, nicht angedeutet. */
.gkern {
  font-size: 1.12rem;
  line-height: 1.68;
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

/* C) Bild oder Beispiel. Eingerueckt, damit es sichtbar dazugehoert. */
.gbeispiel {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--tinte-weich);
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--linie);
}

.gmehr:empty { display: none; }
.gmehr-text {
  font-size: 1.02rem;
  line-height: 1.66;
  color: var(--tinte-weich);
  margin: 0 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie-fein);
}

/* D) Der Anstoss. Eine Einladung, keine Frage mit richtiger Antwort. */
.ganstoss {
  font-size: 1.02rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--tinte-weich);
  margin: 2rem 0 0.75rem;
}

.gnotiz {
  width: 100%;
  min-height: 52px;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--tinte);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: 0.45rem 0 0.7rem;
  resize: none;
  outline: none;
  -webkit-appearance: none;
  transition: border-color .18s ease;
}
.gnotiz:focus { border-bottom-color: var(--tinte); }

.gknoepfe { margin-top: 2.25rem; }
.gneben {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 0.25rem;
}

.gstart { padding-top: 1rem; }
.gende { padding-top: 2rem; }
.gross {
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ Status */

.status .bahn { max-width: 46rem; }
.status h2 { font-size: 1.2rem; margin: 2.75rem 0 0.9rem; }
.tafel { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tafel th {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedaempft);
  text-align: left;
  padding: 0 0.9rem 0.5rem 0;
  border-bottom: 1px solid var(--linie);
}
.tafel td {
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: top;
}
.tafel td.zahl { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.rot { color: var(--siena); }

@media (max-width: 420px) {
  body { font-size: 18px; padding: 0 1.25rem env(safe-area-inset-bottom); }
  .zeitpaar { gap: 1.75rem; }
}

/* ------------------------------------------------------- Tippflächen (Handy)

   Gelesen wird frueh, im Halbdunkel, mit dem Daumen. Die feinen Knöpfe mit
   Unterstreichung waren 17 Pixel hoch, und ausgerechnet der Ausgang war damit
   der kleinste Knopf der ganzen Seite. Das widerspricht dem Versprechen, dass
   Aufhoeren jederzeit leicht erreichbar ist.

   Die Linie wandert deshalb auf ein Pseudoelement. Sie bleibt optisch genau
   dort, wo sie war, waehrend die Trefferflaeche ringsum auf ueber vierzig
   Pixel waechst. Die negativen Aussenabstaende nehmen das Wachstum wieder
   zurueck, damit sich am Satzbild nichts verschiebt. */
.gschluss, .knopf-leise, .zurueck {
  position: relative;
  border-bottom: none;
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  line-height: 1.25;
}
.gschluss::after, .knopf-leise::after, .zurueck::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(0.95rem - 3px);
  border-bottom: 1px solid var(--linie);
}
.gschluss:hover::after, .knopf-leise:hover::after, .zurueck:hover::after {
  border-bottom-color: var(--tinte);
}

.gschluss    { margin: -0.95rem 0; }
.knopf-leise { margin-top: 0.65rem; margin-bottom: -0.95rem; }
.zurueck     { margin-top: 0.9rem; margin-bottom: -0.95rem; }