/* Tagebuch — Posteingang. Ein Notizzettel, sonst nichts.
   Mobil zuerst: grosse Trefferflaechen, Eingabe und "Senden" unten am Daumen. */

:root {
  color-scheme: dark light;

  /* dunkles Schema als Ausgangspunkt */
  --grund: #1b1c1e;
  --flaeche: #26282b;
  --flaeche-hoch: #303336;
  --linie: #3d4145;
  --schrift: #eceef0;
  --schrift-leise: #a2a8ae;
  --schrift-sehr-leise: #767c82;
  --betont: #6fae7a;
  --betont-schrift: #10210f;
  --warnung: #e2a04a;
  --fehler: #e2726a;

  /* von Skripten gesetzt, wenn die Bildschirmtastatur den sichtbaren
     Bereich verkleinert; sonst die dynamische Viewport-Hoehe */
  --viewport-hoehe: 100dvh;

  --rand: 1rem;
  --rundung: 0.75rem;
  --trefferflaeche: 3rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --grund: #f7f6f3;
    --flaeche: #ffffff;
    --flaeche-hoch: #eeece7;
    --linie: #d9d6cf;
    --schrift: #22242a;
    --schrift-leise: #5e646c;
    --schrift-sehr-leise: #8b9198;
    --betont: #2f6f3c;
    --betont-schrift: #ffffff;
    --warnung: #8a5a12;
    --fehler: #a83228;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--grund);
  color: var(--schrift);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

[hidden] { display: none !important; }

.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Seiten ---------- */

.seite {
  display: flex;
  flex-direction: column;
  height: var(--viewport-hoehe);
  min-height: 0;
}

/* ---------- Kopplung ---------- */

.kopplung-inhalt {
  margin: auto;
  width: 100%;
  max-width: 32rem;
  padding: var(--rand);
  padding-top: max(var(--rand), env(safe-area-inset-top));
  padding-bottom: max(var(--rand), env(safe-area-inset-bottom));
}

.kopplung-inhalt h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.hinweis {
  margin: 0 0 1.5rem;
  color: var(--schrift-leise);
}

.hinweis code {
  font-size: 0.9em;
  word-break: break-all;
  background: var(--flaeche);
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
}

#kopplung-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  color: var(--schrift-leise);
}

/* ---------- Kopf mit Zustand ---------- */

.kopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem var(--rand);
  padding-top: max(0.5rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}

.zustand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.plakette {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--flaeche-hoch);
  color: var(--schrift-leise);
  white-space: nowrap;
}

.plakette[data-netz="online"] {
  color: var(--betont);
}

.plakette[data-netz="offline"] {
  color: var(--warnung);
}

.plakette-wartend {
  color: var(--warnung);
}

/* ---------- Inhalt: Liste oben, Eingabe unten am Daumen ---------- */

.inhalt {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.liste-bereich {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--rand);
}

.liste-bereich h2 {
  margin: 1rem 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--schrift-sehr-leise);
}

.leer {
  color: var(--schrift-sehr-leise);
  font-size: 0.95rem;
}

.liste {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notiz {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 0.7rem 0.85rem;
}

.notiz-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.notiz-fuss {
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--schrift-sehr-leise);
}

.marke {
  font-weight: 600;
}

.notiz[data-stand="wartend"] { border-color: var(--warnung); }
.notiz[data-stand="wartend"] .marke { color: var(--warnung); }
.notiz[data-stand="gesendet"] .marke { color: var(--betont); }

/* uebernommen: die Notiz ist im Tagebuch angekommen und darf verblassen */
.notiz[data-stand="uebernommen"] {
  opacity: 0.5;
}

/* ---------- Eingabe ---------- */

#notiz-form {
  order: 3;
  flex: none;
  padding: 0.5rem var(--rand);
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: var(--grund);
}

textarea,
input[type="text"] {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.0625rem; /* nie unter 16px, sonst zoomt iOS beim Fokus */
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 0.75rem;
  resize: none;
}

textarea:focus,
input[type="text"]:focus {
  outline: 2px solid var(--betont);
  outline-offset: 1px;
  border-color: var(--betont);
}

/* ---------- Knoepfe ---------- */

.knopf {
  display: block;
  width: 100%;
  min-height: var(--trefferflaeche);
  margin-top: 0.5rem;
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--betont-schrift);
  background: var(--betont);
  border: none;
  border-radius: var(--rundung);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.knopf-gross { min-height: 3.25rem; }

.knopf:disabled {
  opacity: 0.45;
  cursor: default;
}

.knopf:active:not(:disabled) { filter: brightness(0.92); }

.knopf-flach {
  min-height: var(--trefferflaeche);
  min-width: var(--trefferflaeche);
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--schrift-leise);
  background: none;
  border: none;
  border-radius: var(--rundung);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.knopf-flach:active { color: var(--schrift); }

/* ---------- Rueckmeldungen ---------- */

/* Feste Hoehe: die Rueckmeldung darf den Senden-Knopf nicht unter dem
   Daumen wegschieben. */
.bestaetigung {
  order: 2;
  flex: none;
  margin: 0;
  padding: 0 var(--rand) 0.25rem;
  min-height: 1.4rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--betont);
}

.bestaetigung[data-art="warnung"] { color: var(--warnung); }
.bestaetigung[data-art="fehler"] { color: var(--fehler); }

.fehler {
  margin: 0.75rem 0 0;
  color: var(--fehler);
}

@media (prefers-reduced-motion: no-preference) {
  .notiz { transition: opacity 0.2s ease, border-color 0.2s ease; }
}