/* observed reality · Variante 4 · Annäherung
   Ein heller, neutraler Grund. Die Farbe kommt nur aus den Bildern. */
@font-face {
  font-family: "Atkinson Next";
  src: url("fonts/atkinson-next.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --grund: #e9e7e2;
  --tinte: #1d1d1b;
  --matt: #6b6a66;
  --linie: rgba(29, 29, 27, .18);
  --flaeche-schrift: "Atkinson Next", system-ui, sans-serif;
  --fuge: clamp(14px, 2.4vw, 28px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--grund); color: var(--tinte);
  font: 400 15px/1.5 var(--flaeche-schrift);
  overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

#flaeche { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#flaeche.zieht { cursor: grabbing; }

.kopf { position: fixed; left: calc(var(--fuge) - 8px); top: calc(var(--fuge) - 6px); margin: 0; pointer-events: none; max-width: min(520px, 60vw); padding: 6px 8px; border-radius: 10px; background: rgba(233, 231, 226, .82); backdrop-filter: blur(6px); }
.marke { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.marke .name { display: block; font-weight: 400; color: var(--matt); }
.ort { margin: .7em 0 0; font-size: 15px; max-width: 34em; }
.ort[hidden] { display: none; }
.ort .ort-text { display: block; color: var(--matt); font-size: 14px; margin-top: .2em; }
body[data-welt="tagebuch"] { --grund: #e2ddd3; }
body[data-welt="notizbuch"] { --grund: #dcd9d1; }
body[data-welt="tagebuch"] .kopf, body[data-welt="notizbuch"] .kopf { background: rgba(250, 249, 245, .9); pointer-events: auto; }
body:not([data-welt="haupt"]) .regel { display: none; }
.regel { margin: .7em 0 0; font-size: 15px; color: var(--matt); max-height: 5em; overflow: hidden; transition: opacity .6s, max-height .6s .3s, margin .6s .3s; }
.regel.weg { opacity: 0; max-height: 0; margin: 0; }

.werkzeug { position: fixed; right: var(--fuge); top: var(--fuge); display: flex; gap: 8px; }
.knopf {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: rgba(233, 231, 226, .86); color: var(--tinte);
  border: 1px solid var(--tinte); border-radius: 999px; padding: 6px 14px;
  backdrop-filter: blur(6px);
}
.knopf:hover { background: var(--tinte); color: var(--grund); }
.knopf.voll { background: var(--tinte); color: var(--grund); }
.knopf.voll:hover { background: #000; }

.fuss { position: fixed; left: var(--fuge); right: var(--fuge); bottom: calc(var(--fuge) - 4px); display: flex; justify-content: space-between; align-items: end; gap: 12px; pointer-events: none; }
.fuss p { margin: 0; pointer-events: auto; }
.massstab { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--matt); }
.massstab:not(:empty) { background: rgba(233, 231, 226, .88); padding: 2px 8px; border-radius: 999px; }
.massstab b { color: var(--tinte); font-weight: 700; }
.recht { display: flex; gap: 14px; font-size: 13px; }
.recht a { background: rgba(233, 231, 226, .8); padding: 2px 4px; border-radius: 3px; }

/* Übersicht: die ganze Tafel klein, rot der Ausschnitt */
.uebersicht { position: fixed; right: var(--fuge); bottom: calc(var(--fuge) + 26px); border-radius: 4px; box-shadow: 0 0 0 1px var(--linie), 0 6px 18px rgba(0, 0, 0, .12); cursor: pointer; }
.uebersicht[hidden] { display: none; }

/* Ankommen: was man ganz nah vor sich hat */
.ankunft {
  position: fixed; left: 50%; bottom: calc(var(--fuge) + 30px); transform: translateX(-50%);
  width: max-content; max-width: min(620px, calc(100vw - 2 * var(--fuge)));
  background: rgba(233, 231, 226, .92); backdrop-filter: blur(8px);
  border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 14px;
}
.ankunft[hidden] { display: none; }
.ankunft .gang { font-weight: 700; }
.ankunft .klein { color: var(--matt); }
.ankunft .knopf { padding: 4px 12px; }

/* Felder als HTML: unsichtbar, bis eins den Fokus hat */
.felder { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.felder button { all: unset; }

dialog {
  border: 0; padding: 0; color: var(--tinte); background: #f4f2ee;
  width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}
dialog::backdrop { background: rgba(233, 231, 226, .7); backdrop-filter: blur(3px); }
.dlg-innen { padding: clamp(18px, 4vw, 40px); }
.dlg-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.dlg-kopf h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.dlg-text { margin: 0 0 18px; color: var(--matt); }

.verzeichnis { width: min(980px, calc(100vw - 24px)); }
.vz-gruppe { margin: 22px 0 0; }
.vz-gruppe h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.vz-gruppe h3 span { font-weight: 400; color: var(--matt); }
.vz-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.vz-liste button {
  all: unset; cursor: pointer; display: block; border-radius: 3px;
  width: 34px; height: 34px; background: var(--f); position: relative;
}
.vz-liste.gross button { width: 64px; height: 44px; }
.vz-liste.text button { width: auto; height: auto; background: none; padding: 4px 8px; border: 1px solid var(--linie); border-radius: 999px; font-size: 14px; }
.vz-liste button:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.vz-liste button.beob::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--bild) center / cover; }
.vz-liste.text button.beob { border-color: var(--tinte); }
.sichern-zeile { margin: 26px 0 0; }

/* Blättern in Tagebuch und Notizbuch */
.blaettern { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.blaettern:last-child { margin: 28px 0 0; }
.blaettern .klein { color: var(--matt); font-size: 14px; }
.knopf:disabled { opacity: .35; cursor: default; background: transparent; color: var(--tinte); }
.eintrag-bilder { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.eintrag-bilder figure { margin: 0; background: #fbfaf6; padding: 8px 8px 26px; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.eintrag-bilder img { display: block; width: 100%; height: auto; }

/* Blatt: lesen und hören, wenn man ganz angekommen ist */
.blatt-ueber { margin: 0; font-size: 13px; color: var(--matt); }
.blatt h2 { margin: 0 0 .3em; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.blatt .datum { margin: 0 0 1.2em; color: var(--matt); }
.blatt .lauftext p { font-size: 18px; line-height: 1.6; margin: 0 0 1em; max-width: 36em; }
.blatt figure { margin: 1.4em 0; }
.blatt figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.mix-kopf { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start; }
.mix-kopf img { width: 160px; height: 160px; object-fit: cover; border-radius: 4px; display: block; }
.mix-kopf .tags { color: var(--matt); font-size: 14px; }
.hoeren { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hoeren p { margin: 0; font-size: 14px; color: var(--matt); flex-basis: 100%; }
.tracks { list-style: none; margin: 24px 0 0; padding: 0; }
.tracks li { display: grid; grid-template-columns: 4.8em 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.tracks time { font-variant-numeric: tabular-nums; color: var(--matt); }

.empfang {
  position: fixed; z-index: 5; left: 50%; top: var(--fuge); transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  background: #f4f2ee; border: 1px solid var(--linie); border-radius: 12px; padding: 6px 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.empfang[hidden] { display: none; }
.empfang iframe { width: 100%; height: 60px; border: 0; }

.ohne-js { position: fixed; inset: auto 20px 20px; background: #fff; padding: 12px; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .kopf { max-width: calc(100vw - 2 * var(--fuge) - 120px); }
  .marke, .regel { font-size: 13px; }
  .werkzeug { flex-direction: column; align-items: end; gap: 6px; }
  .knopf { font-size: 13px; padding: 5px 11px; }
  .ankunft { bottom: calc(var(--fuge) + 46px); font-size: 13px; left: var(--fuge); transform: none; max-width: calc(100vw - 2 * var(--fuge) - 110px); }
  .uebersicht { bottom: calc(var(--fuge) + 46px); }
  .fuss { flex-direction: column-reverse; align-items: start; gap: 4px; }
  .mix-kopf { grid-template-columns: 96px 1fr; gap: 14px; }
  .mix-kopf img { width: 96px; height: 96px; }
  .blatt .lauftext p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .regel { transition: none; }
}

/* Impressum, Datenschutz, 404 */
body.blatt-seite { overflow: auto; }
.lesen { max-width: 680px; margin: 0 auto; padding: 48px 20px 80px; }
.lesen h1 { font-size: 40px; line-height: 1.1; margin: .4em 0 .8em; }
.lesen h2 { font-size: 18px; margin: 1.6em 0 .3em; }
.lesen p { margin: 0 0 1em; }
.lesen .zurueck { font-size: 14px; }
.leer-feld { width: 180px; height: 120px; background: #d9d6cf; margin: 0 0 24px; }

@media print {
  #flaeche, .werkzeug, .ankunft, .empfang { display: none !important; }
  body { overflow: visible; }
}