/* =====================================================================
   DER NOTIZBLOCK (26.09.2026)
   =====================================================================

   Filipe: „ich will dass du das auch wie ein notizblock erstellst.
   ich will dass es übelst geil und einzigartig ist. mach wirklich das
   krasseste und geilste notizblock auf der welt."

   ---------------------------------------------------------------------
   DIE EINE REGEL, AN DER HIER ALLES HÄNGT

   Das Blatt besteht aus ZWEI Schichten, die exakt aufeinanderliegen:
   ein Schreibfeld (trägt Text und Cursor, ist aber unsichtbar) und
   eine Deckschicht darüber (zeichnet denselben Text noch einmal, mit
   Haken, Überschriften und Strichen).

   Damit das aufgeht, muss jedes Zeichen in beiden Schichten an
   derselben Stelle landen. Deshalb gilt in dieser Datei:

     JEDE AUSZEICHNUNG DARF FARBE UND FLÄCHE ÄNDERN — NIE DIE BREITE.

   Erlaubt: color, background, box-shadow, text-decoration, opacity,
   text-shadow, border-radius.
   Verboten: font-weight, font-size, font-family, letter-spacing,
   word-spacing, font-style, text-transform, padding und margin an
   allem, was IM Textfluss liegt.

   Ein einziges `font-weight: 700` auf einer Überschrift verschiebt
   die ganze Zeile um ein paar Pixel, und ab der zweiten Zeile steht
   der sichtbare Text neben dem Cursor. Das sieht aus wie ein
   Browserfehler und ist einer in dieser Datei. `pruef-notizen` misst
   die Deckung deshalb an echten Bildpunkten nach.

   Fettdruck gibt es trotzdem — aber im KOPF des Blattes, außerhalb
   des Textflusses: Die erste Zeile steht dort groß als Titel. So
   bekommt man die Wirkung, ohne die Deckung zu verlieren.

   ---------------------------------------------------------------------
   WARUM DAS PAPIER DUNKEL IST

   Ein cremeweißes Blatt auf einer dunklen Seite ist eine Lampe. Die
   Hausregel heißt augenschonend, und sie gilt auch für Papier. Das
   Papiergefühl trägt hier die STRUKTUR — Linien im Zeilenabstand, ein
   Randstrich, die Perforation oben —, nicht die Helligkeit. Eine
   schwarze Kladde ist auch ein Notizbuch.

   Die gewählte Papierfarbe ist die TINTE: Sie färbt Linien, Rand,
   Kante und Haken. Sechs Farben, alle über 4,5:1 gegen den Grund
   (siehe notiz-tabellen.js), damit sie auch Text tragen können.
   ===================================================================== */

.notizblock {
  /* Der Zeilenabstand ist die Maßeinheit dieser Seite: Er bestimmt die
     Zeilenhöhe im Text UND den Abstand der Linien auf dem Papier. Eine
     zweite Zahl wäre die, die beim nächsten Umbau auseinanderläuft --
     und man sähe es sofort, weil die Schrift dann zwischen den Linien
     schwimmt. */
  --n-zeile: 30px;
  --n-schrift: 15.5px;
  --n-oben: 26px;            /* Innenabstand oben, im Feld wie im Deck */
  --n-links: 66px;           /* bis zum Text -- links davon der Rand */
  --n-rechts: 24px;
  --n-randstrich: 46px;      /* wo der senkrechte Randstrich sitzt */
  --n-tinte: var(--ton, var(--akzent));
}

/* ---------------------------------------------------------------------
   Kopfzeile der Seite
   --------------------------------------------------------------------- */
.n-kopf { align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.n-kopf__griffe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.n-suche {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 40px;
  background: var(--glas); border: 1px solid var(--rand);
  border-radius: 999px;
}
.n-suche:focus-within { border-color: var(--akzent); }
.n-suche__zeichen {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--text-leise); stroke-width: 1.9;
  stroke-linecap: round;
}
.n-suche__feld {
  border: 0; background: none; color: var(--text);
  font: inherit; font-size: .92rem; width: 11ch; min-width: 0;
  padding: 0; outline: none;
}
.n-suche__feld::placeholder { color: var(--text-still); }
/* Das X, das Chromium in ein Suchfeld setzt, ist auf Dunkel fast
   unsichtbar und verschiebt beim Erscheinen den Text. Weg damit --
   geleert wird mit der Escape-Taste, und das steht im Titel. */
.n-suche__feld::-webkit-search-cancel-button { display: none; }

.n-neu { white-space: nowrap; }

/* ---------------------------------------------------------------------
   Der Raum: Stapel links, Blatt rechts
   --------------------------------------------------------------------- */
.n-raum {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* ---------------------------------------------------------------------
   Der Stapel
   --------------------------------------------------------------------- */
.n-stapel {
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 14px;
  max-height: calc(100vh - 120px);
}
.n-stapel__kopf { display: flex; align-items: baseline; gap: 10px; }
.n-stapel__titel {
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-still);
}
.n-zahl {
  display: inline-block; min-width: 20px; padding: 1px 7px;
  text-align: center; font-size: .74rem; font-weight: 700;
  color: var(--text-leise);
  background: rgba(255, 255, 255, .06); border-radius: 999px;
}
.n-korb-knopf {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  border: 0; background: none; color: var(--text-still);
  font: inherit; font-size: .78rem; cursor: pointer; padding: 2px 4px;
}
.n-korb-knopf:hover { color: var(--text-leise); }

.n-liste {
  list-style: none; margin: 0; padding: 0 2px 4px 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; min-height: 0;
}

/* EIN BLATT IM STAPEL. Es sieht aus wie ein Zettel mit angeknickter
   Ecke -- die Ecke ist die einzige Form, die man bei dieser Größe
   noch als „Papier" liest. */
.n-zettel {
  position: relative; width: 100%; text-align: left;
  padding: 11px 13px 10px; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  background: color-mix(in srgb, var(--n-tinte) 7%, var(--glas));
  border-radius: 10px;
  /* Der farbige Streifen links ist die Papierfarbe des Blattes. */
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--n-tinte) 70%, transparent),
    inset 0 0 0 1px var(--rand);
  transition: background-color .14s ease, box-shadow .14s ease;
}
.n-zettel:hover {
  background: color-mix(in srgb, var(--n-tinte) 13%, var(--glas));
}
.n-zettel[aria-current="true"] {
  background: color-mix(in srgb, var(--n-tinte) 17%, var(--glas));
  box-shadow:
    inset 3px 0 0 var(--n-tinte),
    inset 0 0 0 1px color-mix(in srgb, var(--n-tinte) 40%, transparent);
}
/* Die angeknickte Ecke oben rechts. */
.n-zettel::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 14px; height: 14px; border-radius: 0 10px 0 6px;
  background: linear-gradient(225deg,
    color-mix(in srgb, var(--n-tinte) 30%, transparent) 50%, transparent 50%);
}
.n-zettel__titel {
  display: block; font-size: .94rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: 16px;
}
.n-zettel__vor {
  display: block; margin-top: 3px; font-size: .8rem; color: var(--text-still);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.n-zettel__fuss {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
  font-size: .72rem; color: var(--text-still);
}
.n-zettel__nadel { color: var(--n-tinte); }
.n-zettel__haken {
  margin-left: auto; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--n-tinte) 16%, transparent);
  color: var(--text-leise);
}
.n-zettel__haken[data-fertig="ja"] {
  background: color-mix(in srgb, var(--n-tinte) 30%, transparent);
  color: var(--text);
}

.n-leer { margin: 6px 2px; color: var(--text-still); font-size: .88rem; }
.n-leer__knopf {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--akzent); text-decoration: underline; cursor: pointer;
}

/* =====================================================================
   DAS BLATT
   ===================================================================== */
.n-blatt {
  position: relative; display: flex; flex-direction: column;
  min-height: 62vh;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--n-tinte) 6%, var(--glas-tief)),
      var(--glas-tief) 180px);
  border: 1px solid color-mix(in srgb, var(--n-tinte) 22%, var(--rand));
  border-radius: 14px;
  overflow: hidden;
}

/* DIE PERFORATION. Halbkreise, die in den oberen Rand gestanzt sind --
   das Einzige an dieser Seite, das sofort „Block" sagt, bevor man ein
   Wort gelesen hat. Sie sitzt IN der Kante und nicht darunter: Ein
   Streifen mit Löchern darunter wäre eine Verzierung, eine gestanzte
   Kante ist ein Blatt. */
.n-blatt__perforation {
  position: absolute; top: 0; left: 0; right: 0; height: 11px; z-index: 4;
  background:
    radial-gradient(circle at 50% 0,
      var(--tinte) 0 3.4px, transparent 3.8px) repeat-x 0 0 / 16px 11px,
    linear-gradient(to bottom,
      color-mix(in srgb, var(--n-tinte) 34%, transparent),
      transparent);
  pointer-events: none;
}

.n-blatt__kopf {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 18px 20px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--n-tinte) 16%, transparent);
}
/* HIER steht der Fettdruck — außerhalb des Textflusses, deshalb
   unbedenklich (siehe der Kopf dieser Datei). Der Titel ist die erste
   Zeile des Blattes, live abgeleitet. */
.n-blatt__titel {
  margin: 0; flex: 1 1 14ch; min-width: 0;
  font-size: 1.32rem; font-weight: 700; line-height: 1.25;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.n-blatt__titel[data-leer="ja"] { color: var(--text-still); }
.n-blatt__griffe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.n-haken-stand {
  padding: 3px 9px; border-radius: 999px; font-size: .76rem;
  color: var(--text-leise);
  background: color-mix(in srgb, var(--n-tinte) 15%, transparent);
}
.n-haken-stand[data-fertig="ja"] {
  color: var(--text);
  background: color-mix(in srgb, var(--n-tinte) 32%, transparent);
}

.n-griff {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 11px;
  background: none; border: 1px solid var(--rand); border-radius: 9px;
  color: var(--text-leise); font: inherit; font-size: .82rem; cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.n-griff svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.n-griff:hover { color: var(--text); border-color: var(--rand-hell); }
.n-griff[aria-pressed="true"] {
  color: var(--n-tinte);
  border-color: color-mix(in srgb, var(--n-tinte) 55%, transparent);
  background: color-mix(in srgb, var(--n-tinte) 12%, transparent);
}
.n-griff--weg:hover { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

/* Die sechs Papierfarben. Kreise, nicht Kästchen: Ein Kästchen sieht
   aus wie etwas, das man ankreuzt. */
.n-farben { display: flex; align-items: center; gap: 5px; }
/* `flex: none` ist nicht Zierde: In einer Reihe mit `align-items:
   center` dehnt sich ein Knopf sonst auf die Hoehe der Reihe -- im
   Bildschirmfoto standen statt sechs Kreisen sechs Ovale da. */
.n-farbe {
  flex: none; width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
  background: var(--f);
  transition: transform .12s ease, box-shadow .12s ease;
}
.n-farbe:hover { transform: scale(1.12); }
.n-farbe[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--tinte), 0 0 0 3.6px var(--f);
}

/* =====================================================================
   DAS PAPIER — die zwei Schichten

   ALLES, WAS HIER DOPPELT STEHT, MUSS DOPPELT GLEICH SEIN. Die
   gemeinsamen Werte stehen deshalb in EINER Regel, die beide
   Schichten trifft; was nur eine von beiden braucht (Cursorfarbe,
   Zeigedurchlass), steht einzeln darunter.
   ===================================================================== */
.n-papier {
  position: relative; flex: 1 1 auto; min-height: 320px;
  overflow: auto;
  /* Die Liniatur und der Randstrich. `local` sorgt dafür, dass sie
     MIT dem Text scrollen -- ohne das bliebe das Papier stehen und
     die Schrift liefe darüber hinweg. */
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--n-zeile) - 1px),
      color-mix(in srgb, var(--n-tinte) 15%, transparent)
        calc(var(--n-zeile) - 1px) var(--n-zeile)),
    linear-gradient(to right,
      transparent 0 var(--n-randstrich),
      color-mix(in srgb, var(--n-tinte) 34%, transparent) var(--n-randstrich),
      transparent calc(var(--n-randstrich) + 1px));
  background-position: 0 calc(var(--n-oben) + 0.72 * var(--n-zeile)), 0 0;
  background-attachment: local, local;
}

/* Die gemeinsame Schreibweise beider Schichten. */
.n-papier__feld,
.n-papier__deck {
  font-family: inherit;
  font-size: var(--n-schrift);
  line-height: var(--n-zeile);
  letter-spacing: normal;
  word-spacing: normal;
  font-weight: 400;
  font-style: normal;
  padding: var(--n-oben) var(--n-rechts) 60px var(--n-links);
  margin: 0;
  border: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 2;
  text-align: left;
}

.n-papier__feld {
  position: relative; z-index: 2;
  display: block; width: 100%; min-height: 100%;
  resize: none; overflow: hidden;
  background: transparent;
  /* Der Text ist unsichtbar, der Cursor nicht -- gezeichnet wird von
     der Deckschicht. */
  color: transparent;
  caret-color: var(--text);
  outline: none;
}
/* Die Markierung muss sichtbar bleiben, obwohl die Schrift es nicht
   ist: Sie liegt UNTER der Deckschicht und färbt deren Grund. */
.n-papier__feld::selection {
  background: color-mix(in srgb, var(--n-tinte) 34%, transparent);
  color: transparent;
}

.n-papier__deck {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  color: var(--text);
  /* Die Schicht liegt OBEN, lässt aber alles durch -- sonst käme kein
     Klick mehr ins Schreibfeld. Nur die Haken fangen ihn ab (unten). */
  pointer-events: none;
}

/* ---------- Die Auszeichnungen -- Farbe und Fläche, nie Breite ------ */

/* ÜBERSCHRIFT (`# `). Kein Fettdruck, keine größere Schrift -- beides
   würde die Zeile verschieben. Stattdessen: die volle Textfarbe, ein
   feiner Schein und eine Linie darunter. Auf dunklem Grund liest sich
   das genauso als Überschrift, und die Deckung bleibt. */
.n-h {
  color: #fff;
  text-shadow: 0 0 10px color-mix(in srgb, var(--n-tinte) 55%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--n-tinte) 45%, transparent);
}
.n-marke { color: color-mix(in srgb, var(--n-tinte) 70%, var(--text-still)); }

/* HAKEN. Die eckigen Klammern bleiben als Zeichen stehen (sonst
   verschöbe sich die Zeile), werden aber unsichtbar gefärbt; darüber
   liegt ein gezeichnetes Kästchen aus einem Rahmen, der keine Fläche
   beansprucht. */
/* DAS KAESTCHEN WIRD GEZEICHNET, NICHT GERAHMT.

   Der erste Anlauf legte einen Innenrahmen (`box-shadow: inset`) um
   das Stueck Text. Das nimmt die Form des STUECKS an -- und ein
   Stueck Text ist so hoch wie die Zeile (30 px) und so breit wie
   drei Zeichen. Im Bildschirmfoto standen deshalb hochkant stehende
   Pillen da, keine Kaestchen.

   Jetzt zeichnet ein Pseudo-Element ein echtes Quadrat, mittig ueber
   dem Stueck. Es ist absolut gesetzt und beansprucht damit keinen
   Platz -- die Deckung mit dem Schreibfeld bleibt unberuehrt, genau
   wie die Regel im Kopf dieser Datei es verlangt. */
.n-hk {
  position: relative;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.n-hk::before {
  content: ""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border: 1.7px solid color-mix(in srgb, var(--n-tinte) 78%, transparent);
  border-radius: 4px;
  transition: border-color .12s ease, background-color .12s ease;
}
.n-hk:hover::before { border-color: var(--n-tinte); }
.n-hk[data-an="ja"]::before {
  background: var(--n-tinte);
  border-color: var(--n-tinte);
}
/* Der Haken selbst -- ebenfalls absolut. */
.n-hk[data-an="ja"]::after {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 8.5px;
  margin: -1px 0 0 -2px;
  border: solid #07080d; border-width: 0 2.2px 2.2px 0;
  transform: translate(-50%, -60%) rotate(42deg);
}
/* Eine erledigte Zeile wird leiser und durchgestrichen. */
.n-erledigt { color: var(--text-still); text-decoration: line-through; }

/* AUFZÄHLUNG, ZITAT, LINK */
.n-punkt { color: var(--n-tinte); }
.n-zitat {
  color: var(--text-leise);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--n-tinte) 60%, transparent);
}
.n-link {
  color: var(--akzent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--akzent) 55%, transparent);
  text-underline-offset: 2px;
  pointer-events: auto; cursor: pointer;
}
/* Der Treffer der Suche. Nur Fläche -- Breite unverändert. */
.n-treffer {
  background: color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: 3px;
}

/* ---------- Der Fuß des Blattes -------------------------------------- */
.n-blatt__fuss {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 20px 11px;
  border-top: 1px solid color-mix(in srgb, var(--n-tinte) 14%, transparent);
  font-size: .78rem; color: var(--text-still);
}
.n-wann { margin-left: auto; }
.n-stand { display: inline-flex; align-items: center; gap: 7px; }
/* Der Punkt vor dem Wort. Er ist die eigentliche Auskunft -- man liest
   die Farbe, bevor man das Wort liest. */
.n-stand::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--n-tinte) 70%, transparent);
}
.n-stand[data-stand="sichert"]::before { background: var(--akzent); }
.n-stand[data-stand="offen"]::before { background: var(--warn); }
.n-stand[data-stand="offen"] { color: var(--warn); }

/* ---------- Der Papierkorb ------------------------------------------- */
.n-korb {
  background: var(--glas-tief); border: 1px solid var(--rand);
  border-radius: 14px; padding: 18px 20px 20px;
}
.n-korb__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.n-korb__kopf .knopf-still { margin-left: auto; }
.n-korb__satz { margin: 8px 0 14px; color: var(--text-still); font-size: .86rem; }
.n-liste--korb { max-height: none; }
.n-korb-zeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px;
  background: var(--glas); border: 1px solid var(--rand); border-radius: 10px;
}
.n-korb-zeile__text { flex: 1 1 16ch; min-width: 0; }
.n-korb-zeile__titel {
  display: block; color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.n-korb-zeile__wann { display: block; font-size: .76rem; color: var(--text-still); }

/* =====================================================================
   HANDY: eine Spalte, das Blatt legt sich darüber
   =====================================================================

   Gemessen wird das Haus bei 320, 390 und 430 px. Zwei Spalten
   bräuchten dort jede rund 160 px -- ein Blatt Papier, auf das keine
   Zeile passt. Also: Der Stapel IST die Seite, und ein Blatt legt sich
   davor. Zurück geht es mit dem Knopf der Kopfleiste, den es auf jeder
   Seite des Hauses gibt.
   ===================================================================== */
@media (max-width: 860px) {
  .notizblock { --n-links: 52px; --n-randstrich: 34px; --n-rechts: 16px; }
  .n-raum { grid-template-columns: minmax(0, 1fr); }
  .n-stapel { position: static; max-height: none; }
  .n-blatt, .n-korb {
    position: fixed; inset: 0; z-index: 60;
    border-radius: 0; border-left: 0; border-right: 0;
    min-height: 0; overflow: auto;
    /* Unter der Kopfleiste beginnen und über der Fußzeile enden --
       sonst liegt das Blatt über dem Zurück-Knopf, und man kommt aus
       ihm nicht mehr heraus. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 58px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--tinte);
  }
  .n-blatt { display: flex; }
  .n-blatt__perforation { top: calc(env(safe-area-inset-top, 0px) + 58px); }
  .n-blatt__kopf { padding: 14px 16px 10px; }
  .n-blatt__titel { font-size: 1.15rem; }
  .n-griff__text { display: none; }
  .n-griff { padding: 0 9px; }
  /* Das Suchfeld nimmt, was uebrig ist. Mit einer festen Breite von
     acht Zeichen stand im Bildschirmfoto „Suche" mit abgeschnittenem
     n da -- ein Feld, das seinen eigenen Namen nicht fasst. */
  .n-suche { flex: 1 1 150px; min-width: 0; }
  .n-suche__feld { width: 100%; }
  .n-kopf__griffe { width: 100%; }
  /* Die Tastatur des Handys verdeckt sonst die letzte Zeile. */
  .n-papier__feld, .n-papier__deck { padding-bottom: 45vh; }
}

/* Wer weniger Bewegung möchte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .n-zettel, .n-griff, .n-farbe { transition: none; }
  .n-farbe:hover { transform: none; }
}

/* Im Kontrastmodus trägt allein die Kante. Verläufe und
   Farbmischungen würden dort zu grauen Flächen. */
@media (forced-colors: active) {
  .n-papier { background-image: none; }
  .n-blatt__perforation { display: none; }
  .n-hk { box-shadow: none; border: 1px solid CanvasText; color: CanvasText; }
  .n-hk[data-an="ja"] { background: Highlight; }
}