/* ============================================================================
   project — helles Theme „Preussen" (schwarz/weiss, Akzent Rot, Kontrast Gold)

   Ein einziges Stylesheet. Selbst gehostete Schriften (assets/fonts/), keine
   externen Requests. KEINE Inline-Styles, KEIN !important — alles ueber Klassen.
   Space Grotesk fuer Ueberschriften/Marke, Inter fuer Fliesstext.

   Farbwelt (bewusst streng, wenig Chrome):
     • Basis  = Weiss/Schwarz (heller Grund, dunkler Text).
     • Akzent = Rot  (--akzent): Knoepfe, Links, aktive Markierung, Fokus-Ring.
     • Kontrast = Gold (--gold): sehr sparsam gesetzt (Marke, Vision-Merkmal).
   Der Kopf traegt bewusst KEINE eigene Hintergrundfarbe und KEINEN Trennstrich
   mehr — er verschmilzt mit der Seite (Wunsch: so wenig UI-Chrome wie moeglich).
   ============================================================================ */

/* ---- Schriften (selbst gehostet, woff2) ---------------------------------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }

/* ---- Design-Tokens ------------------------------------------------------- */
/* Ein Wechsel des Akzents passiert NUR hier: alle Regeln unten lesen --akzent /
   --akzent-stark / --akzent-schwach, nie eine feste Farbe. Rot ist der einzige
   „laute" Ton; Gold (--gold) ist der seltene Kontrast. */
:root {
  --bg: #f6f7f9;
  --flaeche: #ffffff;
  --flaeche-2: #fbfbfd;
  --text: #17181c;
  --text-leise: #6b7280;
  --rand: #e5e7eb;
  --rand-stark: #d3d7de;
  /* Akzent = Rot ("Preussen"). --akzent-schwach ist ein sehr helles, leicht
     warmes Grau-Rose fuer ruhige Flaechen (aktive Nav, Chips, Fokus-Ring) —
     dezent, damit die App nicht „rosa" wirkt, nur der echte Akzent ist satt. */
  --akzent: #b3121f;
  --akzent-stark: #8d0d17;
  --akzent-schwach: #f7ecec;
  /* Gold = zweiter Kontrast, sehr sparsam (Marke, Vision-Merkmal). */
  --gold: #b8860b;
  --gold-schwach: #f6efda;
  --fehler-bg: #fef2f2;
  --fehler-text: #b42318;
  --fehler-rand: #fecaca;
  --radius: 10px;
  --radius-klein: 7px;
  --schatten: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; color: #14161a; line-height: 1.2; }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- App-Shell ----------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* Der Kopf verschmilzt mit der Seite: gleiche Hintergrundfarbe wie der Body
   (--bg), damit beim Scrollen nichts durchscheint, aber KEIN Trennstrich und
   KEINE abweichende Farbe mehr — genau der Wunsch „weniger UI". Bleibt sticky,
   damit die Navigation oben erreichbar bleibt. */
.kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.7rem 1.5rem;
  background: var(--bg);
}

/* Marken-Punkt: roter Kern mit zartem Gold-Ring — die eine Stelle, an der Rot
   und Gold zusammen auftreten (sonst bleibt Gold sehr sparsam). */
.marke__punkt {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 0 3px var(--gold-schwach);
}

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.7rem; border-radius: var(--radius-klein);
  color: var(--text-leise); font-weight: 500;
}
.nav__link:hover { background: var(--akzent-schwach); color: var(--akzent-stark); text-decoration: none; }
.nav__link.is-active { background: var(--akzent-schwach); color: var(--akzent-stark); }

/* margin-left:auto schiebt das Zahnrad ganz nach rechts — Navigation und
   Brotkrumen bleiben dadurch zusammen auf der linken Seite der Zeile. Das
   Zahnrad oeffnet das Einstellungs-Overlay (data-overlay-oeffnen). */
.kopf__einstellungen {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: transparent; color: var(--text-leise);
  font-size: 1.05rem; cursor: pointer;
}
.kopf__einstellungen:hover { background: var(--akzent-schwach); color: var(--akzent-stark); }

/* Kopf des Einstellungs-Overlays: Name + Rollen-Chip in einer Reihe.
   .wer__name/.wer__rolle stylen Text bzw. Chip — hier wiederverwendet. */
.einstellungen__konto { display: flex; align-items: center; gap: 0.6rem; }
.wer__name { font-weight: 600; }
.wer__rolle {
  font-size: 0.72rem; color: var(--akzent-stark); background: var(--akzent-schwach);
  padding: 0.1rem 0.45rem; border-radius: 999px; font-weight: 600;
}

.inhalt { width: 100%; max-width: 1040px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; flex: 1; }

/* „Baum"-Ansicht nutzt die volle Fensterbreite: Baum + Detail-Panel sollen den
   ganzen Schirm fuellen, nicht auf die zentrierten 1040px begrenzt sein. Nur diese
   Ansicht traegt „inhalt--voll" (Modifier von render_kopf). Kommt NACH der Grundregel
   bei gleicher Spezifitaet — deshalb greift max-width:none ohne !important. */
.inhalt--voll { max-width: none; padding-left: 1.25rem; padding-right: 1.25rem; }

/* ---- Typo-Bloecke -------------------------------------------------------- */
.seiten-titel { font-size: 1.6rem; font-weight: 700; margin: 0 0 1.1rem; }
/* Brotkrumen-Leiste — sitzt im Kopf, auf einer Zeile neben der Navigation. */
.brotkrume { color: var(--text-leise); font-size: 0.9rem; margin: 0; }
.brotkrume b { color: var(--text); }
.leer-hinweis { color: var(--text-leise); padding: 0.5rem 0; }
.tiny { font-size: 0.8rem; }
.muted { color: var(--text-leise); }

/* ---- Karten -------------------------------------------------------------- */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; box-shadow: var(--schatten);
}

/* ---- Formularfelder ------------------------------------------------------ */
.feld { margin-bottom: 0.9rem; display: flex; flex-direction: column; }
.feld label { font-size: 0.85rem; color: var(--text-leise); margin-bottom: 0.3rem; font-weight: 500; }
.eingabe {
  font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  padding: 0.55rem 0.7rem; width: 100%;
}
.eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-schwach); }
textarea.eingabe { min-height: 5rem; resize: vertical; }

/* ---- Knoepfe ------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--akzent); color: #fff; border: 1px solid var(--akzent);
  padding: 0.5rem 0.9rem; border-radius: var(--radius-klein);
}
.knopf:hover { background: var(--akzent-stark); border-color: var(--akzent-stark); text-decoration: none; }
.knopf--geist { background: transparent; color: var(--akzent); border-color: var(--rand-stark); }
.knopf--geist:hover { background: var(--akzent-schwach); color: var(--akzent-stark); border-color: var(--akzent); }
.knopf--voll { width: 100%; justify-content: center; }
.knopf--gefahr { background: var(--fehler-text); border-color: var(--fehler-text); color: #fff; }
.knopf--gefahr:hover { background: #96190f; border-color: #96190f; }
.knopf-reihe { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; }
.knopf-reihe form { margin: 0; }

/* ---- Flash / Meldungen --------------------------------------------------- */
.flash { padding: 0.6rem 0.8rem; border-radius: var(--radius-klein); margin-bottom: 0.9rem; font-size: 0.92rem; }
.flash--fehler { background: var(--fehler-bg); color: var(--fehler-text); border: 1px solid var(--fehler-rand); }

/* ---- Login / Gate -------------------------------------------------------- */
.gate-body { background: linear-gradient(180deg, var(--akzent-schwach) 0%, var(--bg) 42%); }
.gate-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.gate { width: 100%; max-width: 380px; text-align: center; }
.gate__marke {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.5rem; color: #14161a;
}
.gate__unterzeile { color: var(--text-leise); margin: 0.4rem 0 1.4rem; }
.gate__box {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--schatten); text-align: left;
}
.gate__box .feld:last-of-type { margin-bottom: 1.1rem; }

/* ---- Projekte: Grid aus Karten ------------------------------------------- */
/* Das Anlege-Formular lebt im Overlay; die erste Kachel im Grid ist die
   "Neues Projekt"-Card (.projekt-karte--neu), die es oeffnet. */
.projekt-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.projekt-karte {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1rem 1.1rem; color: var(--text); box-shadow: var(--schatten);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.projekt-karte:hover {
  border-color: var(--akzent); box-shadow: 0 4px 12px rgba(179,18,31,0.12);
  text-decoration: none; transform: translateY(-1px);
}
.projekt-karte__name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; color: #14161a; }

/* "Neues Projekt" als eigene Kachel: erbt den Karten-Look von .projekt-karte,
   ist aber ein <button>. Die Button-Defaults (Font, Breite, Ausrichtung) werden
   hier auf den Karten-Look zurueckgesetzt. Gestrichelter Rand + zentriertes Plus
   grenzen sie ruhig von echten Projekten ab; sie liegt flach (kein Schatten,
   kein Anheben beim Hover), damit die echten Projekte die "Objekte" bleiben und
   die Anlege-Kachel eher wie ein offener Slot wirkt. */
.projekt-karte--neu {
  font: inherit; width: 100%; cursor: pointer;
  align-items: center; justify-content: center; text-align: center; gap: 0.5rem;
  color: var(--text-leise); background: var(--flaeche-2);
  border-style: dashed; border-color: var(--rand-stark); box-shadow: none;
}
.projekt-karte--neu:hover {
  color: var(--akzent-stark); background: var(--akzent-schwach);
  border-color: var(--akzent); box-shadow: none; transform: none;
}
.projekt-karte__neu-icon { font-size: 1.4rem; line-height: 1; }
.projekt-karte__neu-text { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; }

/* ---- Projekt-Detail ------------------------------------------------------ */
/* Inline umbenennbarer Titel IN der Brotkrume — an ZWEI Stellen gleich: der
   Projekt-Titel (projekt.php) und der Knoten-Titel als aktuelle Stufe der
   Detailseite (knoten.php). Der Name IST ein Eingabefeld, das wie die fette
   Brotkrumen-Stufe (.brotkrume b) aussieht: gleiche Schrift/Groesse
   (font: inherit -> 0.9rem), fett, Textfarbe. Es ruht rahmenlos (wirkt wie Text);
   Hover deutet die Bearbeitbarkeit an, Fokus zeigt den klaren Eingabe-Rahmen. Als
   inline-flex sitzt das Formular auf derselben Zeile wie die Stufen davor. Beide
   Titel teilen sich dieselben Regeln (DRY) — nur die Klassennamen unterscheiden
   sich, damit jede Stelle im HTML klar benannt bleibt. */
.projekt-titel-form, .knoten-titel-form { margin: 0; display: inline-flex; vertical-align: middle; }
.projekt-titel-eingabe, .knoten-titel-eingabe {
  font: inherit; font-weight: 700; color: var(--text); line-height: 1.3;
  box-sizing: border-box; min-width: 12rem;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: transparent; padding: 0.1rem 0.4rem; margin: -0.1rem 0;
}
.projekt-titel-eingabe:hover, .knoten-titel-eingabe:hover { border-color: var(--rand-stark); }
.projekt-titel-eingabe:focus, .knoten-titel-eingabe:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-schwach); background: var(--flaeche);
}
/* Aktuelle (letzte) Brotkrumen-Stufe der Knoten-Detailseite: der Typ-Chip
   (VISION/RICHTUNG/SCHRITT) und das inline umbenennbare Titelfeld zusammen auf
   einer Linie. */
.brotkrume-aktuell { display: inline-flex; align-items: center; gap: 0.4rem; vertical-align: middle; }

/* Notizen als Karten-Grid (baugleich zu .projekt-liste / .projekt-karte), nicht
   mehr als volle Zeilen. Der Wrapper #notiz-liste bleibt das htmx-Ziel. */
.notiz-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
/* Die Karte ist ein Container: der <a> (.notiz-karte__link) deckt sie zum Oeffnen
   ab, der Drei-Punkt-Knopf schwebt oben rechts darueber. position:relative macht
   die Karte zum Bezug fuer den absolut gesetzten Knopf. */
.notiz-karte {
  position: relative;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.notiz-karte:hover {
  border-color: var(--akzent); box-shadow: 0 4px 12px rgba(179,18,31,0.12);
  transform: translateY(-1px);
}
.notiz-karte__link {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 1.1rem; padding-right: 2.6rem; color: var(--text);
}
.notiz-karte__link:hover { text-decoration: none; }
.notiz-karte__titel {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; color: #14161a;
}
.notiz-karte__meta { color: var(--text-leise); font-size: 0.8rem; margin-top: 0.2rem; }
/* Drei-Punkt-Menue der Karte: oben rechts, ruhig grau, deutet sich erst beim
   Hover an. Liegt ueber dem abdeckenden Link, damit sein Klick das Loeschen-
   Overlay oeffnet statt der Notiz. */
.notiz-karte__menue {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: transparent; color: var(--text-leise);
  cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.notiz-karte__menue:hover { background: var(--akzent-schwach); color: var(--akzent-stark); }

/* Das Anlegen einer Notiz laeuft jetzt ueber den gemeinsamen „+"-Chooser
   (.hinzufuegen-*, weiter unten) — es gibt hier keine „Neue Notiz"-Kachel mehr. */

/* ---- Anhaenge: hochgeladene Dateien als Karten-Grid ---------------------- */
/* Steht direkt unter den Notizen auf der Knoten-Seite. Baugleich zum Notiz-Grid,
   nur zeigt jede Karte eine DATEI (Typ-Icon, Name, Groesse) und oeffnet beim Klick
   die Vorschau statt eines Editors. Der Wrapper #anhang-liste ist das htmx-Ziel
   fuers Hochladen/Loeschen. */
.anhang-liste { margin-top: 1.2rem; }
/* Offene Fehlermeldung beim Hochladen (falscher Typ, zu gross …) — Debug-First. */
.anhang-fehler {
  background: var(--fehler-bg); color: var(--fehler-text); border: 1px solid var(--fehler-rand);
  border-radius: var(--radius-klein); padding: 0.6rem 0.8rem; margin: 0 0 0.9rem; font-size: 0.9rem;
}
.anhang-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;
}
/* Die Datei-Karte: gleicher ruhiger Flaechen-Look wie die Notiz-Karte, Inhalt aber
   zentriert (Icon oben, darunter Name + Meta) — sie wirkt wie eine „Datei-Kachel". */
.anhang-karte {
  position: relative;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.anhang-karte:hover {
  border-color: var(--akzent); box-shadow: 0 4px 12px rgba(179,18,31,0.12);
  transform: translateY(-1px);
}
.anhang-karte__link {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  text-align: center; padding: 1.1rem 1rem; color: var(--text);
}
.anhang-karte__link:hover { text-decoration: none; }
.anhang-karte__icon { font-size: 1.9rem; line-height: 1; color: var(--akzent); }
/* Lange Dateinamen umbrechen statt die Kachel zu sprengen. */
.anhang-karte__name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.98rem; color: #14161a;
  overflow-wrap: anywhere;
}
.anhang-karte__meta { color: var(--text-leise); font-size: 0.8rem; }

/* Das Hochladen laeuft jetzt ueber den gemeinsamen „+"-Chooser (.hinzufuegen-*,
   weiter unten) — es gibt hier keine Hochlade-Kachel mehr. */

/* Speicher-Toast auf der Notiz-Seite: normalerweise unsichtbar, blendet beim
   Autospeichern kurz gruen (mit Haken) ein und nach ~1s wieder aus. position:fixed
   verankert ihn unten rechts im Viewport, unabhaengig vom Scrollstand. .is-sichtbar
   schaltet die Sichtbarkeit, .is-fehler die Farbe (rot). pointer-events:none, damit
   der Toast nie Klicks abfaengt. */
.speicher-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #ecfdf5; color: #067647; border: 1px solid #a7f3d0;
  padding: 0.45rem 0.8rem; border-radius: var(--radius-klein);
  font-size: 0.85rem; font-weight: 600;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.speicher-toast.is-sichtbar { opacity: 1; transform: translateY(0); }
.speicher-toast.is-fehler {
  background: var(--fehler-bg); color: var(--fehler-text); border-color: var(--fehler-rand);
}

/* ---- Notiz-Seite: inline bearbeitbar (kein Overlay) --------------------- */
/* Titel als Ueberschrift-Eingabe: sieht aus wie eine Ueberschrift, ist aber ein
   Feld. Rahmenlos in Ruhe, Hover deutet Bearbeitbarkeit an, Fokus zeigt den Rahmen.
   Baugleich zu .projekt-titel-eingabe, nur groesser. */
.notiz-titel-eingabe {
  width: 100%; box-sizing: border-box;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem; font-weight: 700; color: #14161a; line-height: 1.3;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: transparent; padding: 0.3rem 0.5rem; margin: 0 0 0.6rem -0.5rem;
}
.notiz-titel-eingabe:hover { border-color: var(--rand-stark); }
.notiz-titel-eingabe:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-schwach); background: var(--flaeche);
}

/* JS-Modus (Klasse js-an von notiz-editor.js): die gerenderte Lese-Ansicht ist
   anklickbar (-> Editor), das rohe <textarea> und der "Speichern"-Knopf entfallen
   (EasyMDE + Autospeichern uebernehmen). Der EasyMDE-Container ruht im Lese-Modus
   versteckt und erscheint erst beim Bearbeiten; dann weicht die gerenderte Anzeige.
   Ohne js-an bleibt alles ein normales Formular (Textarea + Speichern). */
.notiz-seite.js-an #notiz-inhalt-anzeige { cursor: text; min-height: 4rem; }
.notiz-seite.js-an #notiz-inhalt-anzeige:empty::before {
  content: 'Klick zum Schreiben …'; color: var(--text-leise);
}
.notiz-seite.js-an #notiz-text { display: none; }
.notiz-seite.js-an .notiz-nojs { display: none; }
.notiz-seite.js-an .EasyMDEContainer { display: none; }
.notiz-seite.js-an.im-bearbeiten .EasyMDEContainer { display: block; }
.notiz-seite.js-an.im-bearbeiten #notiz-inhalt-anzeige { display: none; }

/* ---- Notiz-Inhalt (gerendertes Markdown) -------------------------------- */
.notiz-inhalt { line-height: 1.65; }
.notiz-inhalt h1, .notiz-inhalt h2, .notiz-inhalt h3 { margin-top: 1.3em; }
.notiz-inhalt pre {
  background: var(--flaeche-2); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: 0.8em 1em; overflow-x: auto;
}
.notiz-inhalt code { background: var(--akzent-schwach); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }
.notiz-inhalt pre code { background: none; padding: 0; }
.notiz-inhalt blockquote { margin: 0.7em 0; padding-left: 1em; border-left: 3px solid var(--rand-stark); color: var(--text-leise); }
.notiz-inhalt ul, .notiz-inhalt ol { padding-left: 1.4em; }
.notiz-meta { margin-top: 1rem; }

/* ---- Notiz-Editor (EasyMDE ins helle Theme einpassen) -------------------- */
/* .notiz-editor ist der Formular-Container um EasyMDE — inline auf der Notiz-Seite. */
.notiz-editor .EasyMDEContainer .CodeMirror {
  border: 1px solid var(--rand-stark); border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  background: var(--flaeche); color: var(--text); min-height: 320px;
}
.notiz-editor .editor-toolbar {
  border: 1px solid var(--rand-stark); border-bottom: none;
  border-radius: var(--radius-klein) var(--radius-klein) 0 0; opacity: 1;
}
.notiz-editor .editor-toolbar button:hover { background: var(--akzent-schwach); border-color: transparent; }
.notiz-editor .editor-preview { background: var(--flaeche-2); }

/* ---- Notiz-Werkzeuge: Diktieren + Strukturieren -------------------------- */
/* Kleine Knopf-Reihe im Editor (per JS eingeblendet). Der Status-Text daneben
   meldet „nehme auf …" / „transkribiere …" / Fehler offen. */
.notiz-werkzeuge { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.notiz-werkzeuge__status { color: var(--text-leise); font-size: 0.85rem; }
.notiz-werkzeuge__status.is-fehler { color: var(--fehler-text); }
/* Waehrend der Aufnahme wird der Diktat-Knopf rot (klare Rueckmeldung „laeuft"). */
#notiz-diktat-knopf.is-aufnahme { background: var(--fehler-text); border-color: var(--fehler-text); color: #fff; }
#notiz-diktat-knopf.is-aufnahme:hover { background: #96190f; border-color: #96190f; }

/* ---- Overlay (natives <dialog> als Modal) -------------------------------- */
/* EIN Overlay-Look fuer alle Faelle: neues Projekt, Notiz-Optionen, Einstellungen.
   showModal() bringt Backdrop + Escape-zum-Schliessen von Haus aus mit.
   WICHTIG: padding:0 am Dialog ist Voraussetzung fuer den Backdrop-Klick in
   overlay.js — der Inhalt (.overlay__kopf/.overlay__inhalt) fuellt die Box, ein
   Klick aufs <dialog> selbst ist damit immer der Backdrop. Kein Padding hier
   ergaenzen; Innenabstaende gehoeren in .overlay__inhalt. */
dialog.overlay {
  width: 100%; max-width: 460px; padding: 0;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text);
  box-shadow: 0 12px 44px rgba(16,24,40,0.20);
}
dialog.overlay::backdrop { background: rgba(16,24,40,0.45); }

.overlay__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--rand);
}
.overlay__titel { font-size: 1.1rem; margin: 0; }
.overlay__schliessen {
  border: none; background: transparent; color: var(--text-leise);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  padding: 0.1rem 0.5rem; border-radius: var(--radius-klein);
}
.overlay__schliessen:hover { background: var(--akzent-schwach); color: var(--akzent-stark); }
.overlay__inhalt { padding: 1.3rem; }
.overlay__inhalt .knopf-reihe { margin-top: 1.2rem; }

/* Vorschau-Overlay (Datei ansehen): breiter als die schmalen Aktions-Overlays,
   damit Bild/PDF/HTML wirklich lesbar sind. Erbt Rahmen + Backdrop von
   dialog.overlay. Der Selektor traegt bewusst „dialog." — nur so schlaegt seine
   max-width die 460px der Grundregel dialog.overlay (gleiche Spezifitaet, aber
   spaeter). Auf schmalen Schirmen setzt die Responsive-Regel unten alle Overlays
   wieder auf Viewport-Breite. */
dialog.overlay--vorschau { max-width: 900px; }

/* Notiz-Editor-Overlay: deutlich breiter als die schmalen Aktions-Overlays, damit der
   Markdown-Editor Platz hat. Wie bei --vorschau traegt der Selektor „dialog.", um die
   460px-Grundregel zu schlagen; auf schmalen Schirmen greift die Responsive-Regel unten. */
dialog.overlay--notiz { max-width: 820px; }
/* Nur ein Schliessen-Knopf im Kopf -> rechtsbuendig (die Grundregel verteilt mit
   space-between, was bei EINEM Kind sonst links landet). */
.overlay--notiz .overlay__kopf { justify-content: flex-end; }
/* Der Editor-Inhalt darf hoch werden, aber nie den Schirm sprengen: Hoehe deckeln und
   bei Bedarf scrollen (wie .anhang-vorschau). */
.overlay--notiz .overlay__inhalt { max-height: 75vh; overflow: auto; }

/* Der Anzeigebereich: fasst Bild oder iframe, mit ruhiger Flaeche und Rahmen. Hoehe
   gedeckelt (70vh), damit das Overlay nie den Schirm sprengt; scrollt bei Bedarf. */
.anhang-vorschau {
  display: flex; align-items: center; justify-content: center;
  min-height: 40vh; max-height: 70vh; overflow: auto;
  background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--radius-klein);
}
.anhang-vorschau__bild { max-width: 100%; max-height: 70vh; display: block; }
/* Der iframe fuellt die Breite; weisser Hintergrund, damit HTML/PDF/Text sauber
   auf Weiss sitzen. Rahmenlos — den Rahmen traegt schon .anhang-vorschau. */
.anhang-vorschau__rahmen { width: 100%; height: 70vh; border: none; background: #fff; }
.anhang-vorschau__fuss { display: flex; justify-content: flex-end; margin-top: 1rem; }
.anhang-vorschau__fuss form { margin: 0; }

/* Optionen-Liste: eine vertikale Liste von Aktions-Knoepfen (.option). Genutzt vom
   Notiz-Optionen-Overlay und vom Baum-Kontextmenue. Jeder Knopf ist volle Breite,
   damit die Optionen sauber untereinander andocken. .option--gefahr faerbt
   destruktive Aktionen (z. B. „Loeschen"). */
.optionen-liste { display: flex; flex-direction: column; gap: 0.5rem; }
.optionen-liste form { margin: 0; }
.option {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  padding: 0.6rem 0.8rem;
}
/* Das native hidden-Attribut muss auch auf einem .option greifen. Ohne diese Regel
   schlaegt das display:flex oben die UA-Regel [hidden]{display:none}, und ein per
   hidden ausgeblendeter Eintrag (z. B. „Loeschen" bei der Vision im Kontextmenue)
   bliebe sichtbar. Hoehere Spezifitaet als .option, kein !important noetig. */
.option[hidden] { display: none; }
.option:hover { background: var(--flaeche-2); border-color: var(--akzent); }
.option--gefahr { color: var(--fehler-text); }
.option--gefahr:hover { background: var(--fehler-bg); border-color: var(--fehler-rand); }

/* ---- Kontextmenue (Rechtsklick auf eine Baumzeile) ----------------------- */
/* EIN schwebendes Menue fuer den ganzen Baum (wie die Overlays: einmal je Seite).
   assets/baum-kontextmenue.js setzt es per position:fixed an den Cursor und klemmt es
   in den sichtbaren Bereich. Sein Inhalt ist die bekannte .optionen-liste mit
   .option-Knoepfen — im Menue aber dichter und ohne eigenen Rahmen je Knopf (den
   traegt schon das Menue), damit es wie ein Kontextmenue wirkt und nicht wie
   gestapelte Knoepfe. [hidden] haelt es verborgen, bis ein Rechtsklick es oeffnet. */
.kontextmenue {
  position: fixed; z-index: 60; min-width: 190px;
  padding: 0.3rem;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  box-shadow: 0 12px 44px rgba(16,24,40,0.20);
}
.kontextmenue[hidden] { display: none; }
.kontextmenue .optionen-liste { gap: 0.1rem; }
.kontextmenue .option { border-color: transparent; }
.kontextmenue .option:hover { background: var(--flaeche-2); border-color: transparent; }
.kontextmenue .option--gefahr:hover { background: var(--fehler-bg); border-color: transparent; }

/* ---- Projekt-Baum (Vision / Richtungen / Schritte) ----------------------- */
/* Der Baum ist eine verschachtelte Liste. Die Einrueckung samt zarter
   Fuehrungslinie zeigt die Tiefe; die Zeilen bleiben ruhig (wenig Chrome). */
.baum-wurzel { margin-top: 0.4rem; }
.baum { list-style: none; margin: 0; padding: 0; }
.baum .baum { padding-left: 1.1rem; margin-left: 0.55rem; border-left: 1px solid var(--rand); }
.baum-knoten { margin: 0.1rem 0; }

/* Ein-/Ausklapp-Pfeil ganz links an der Zeile — nur bei Knoten mit Kindern (bei
   Blaettern steht dort .knoten-einklapp-platz, ein gleich breiter, leerer Platzhalter,
   damit die Titel einer Ebene buendig beginnen). Der Pfeil ist ruhig und tritt beim
   Ueberfahren staerker hervor. Aufgeklappt zeigt er nach unten; beim Einklappen dreht
   er sich nach rechts. Das Umschalten macht assets/baum-einklappen.js ueber die Klasse
   is-eingeklappt am <li class="baum-knoten">. */
.knoten-einklapp,
.knoten-einklapp-platz { flex: none; width: 1.1rem; height: 1.1rem; }
.knoten-einklapp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  font-size: 0.7rem; color: var(--text-leise);
  background: transparent; border: none; border-radius: var(--radius-klein);
}
.knoten-einklapp:hover { color: var(--akzent-stark); background: var(--akzent-schwach); }
.knoten-einklapp .fa { transition: transform 0.12s; }

/* Eingeklappt: den eigenen Pfeil nach rechts drehen UND die eigene Kinder-Liste
   ausblenden. Die direkten Kind-Kombinatoren (>) sind hier entscheidend — so ist NUR
   dieser Knoten betroffen und nicht die gleichnamigen Elemente tiefer im Unterbaum. */
.baum-knoten.is-eingeklappt > .knoten-zeile > .knoten-einklapp .fa { transform: rotate(-90deg); }
.baum-knoten.is-eingeklappt > ul.baum-kinder { display: none; }

/* Eine Zeile: links der anklickbare Hauptbereich (Icon + Titel, waechst), rechts
   die erst beim Ueberfahren sichtbaren Aktionen. */
.knoten-zeile {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.15rem 0.35rem; border-radius: var(--radius-klein);
}
.knoten-zeile:hover { background: var(--flaeche-2); }

/* Anklickbarer Hauptbereich: fuehrt auf die Knoten-Detailseite. Faerbt sich
   bewusst NICHT wie ein Link (Textfarbe, kein Unterstreichen) — er ist eine ganze
   Zeile, kein einzelnes Wort. min-width:0 laesst den Titel darin beschneiden. */
.knoten-zeile__haupt {
  display: inline-flex; align-items: center; gap: 0.5rem;
  flex: 1 1 auto; min-width: 0;
  color: var(--text); padding: 0.15rem 0.3rem; border-radius: var(--radius-klein);
}
.knoten-zeile__haupt:hover { text-decoration: none; color: var(--text); }

/* Typ-Icon: Gold fuer die Vision (die Wurzel), Rot fuer Richtungen, ruhiges Grau
   fuer Schritte/Teilschritte — dieselbe Bedeutung, die frueher die Chip-Farben
   trugen, jetzt als Icon. Feste Breite, damit die Titel buendig untereinander
   starten. */
.knoten-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; font-size: 0.95rem;
}
.knoten-icon--vision   { color: var(--gold); }
.knoten-icon--richtung { color: var(--akzent); }
.knoten-icon--schritt  { color: var(--text-leise); }

/* Titel als reiner Text (kein Eingabefeld — Umbenennen laeuft ueber das Kontextmenue,
   Rechtsklick auf die Zeile). Zu lange Titel werden beschnitten, statt den Griff zu
   verdraengen. */
.knoten-titel {
  min-width: 0; font-weight: 600; color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Baum-Titel im Bearbeiten-Zustand: ein Doppelklick auf .knoten-titel ersetzt den
   Text durch dieses Feld (assets/baum-titel-umbenennen.js). Es sieht aus wie der
   Titel (gleiche Schrift, gleiches Gewicht 600), traegt aber den klaren Bearbeiten-
   Rahmen und nimmt die Titelflaeche der Zeile ein (flex), damit die Zeile beim
   Umschalten Text<->Feld nicht springt. Es ist beim Erscheinen sofort fokussiert. */
.baum-titel-eingabe {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  font: inherit; font-weight: 600; color: var(--text); line-height: 1.3;
  padding: 0.05rem 0.35rem; margin: -0.1rem 0;
  background: var(--flaeche); border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
}
.baum-titel-eingabe:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-schwach);
}

/* Typ-Chip (Text-Variante): im Baum NICHT mehr benutzt, aber weiterhin auf der
   Knoten-Detailseite (knoten.php) — dort jetzt in der letzten Brotkrumen-Stufe,
   links vom umbenennbaren Titel. Gold/Rot/Grau je Typ. */
.knoten-chip {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.13rem 0.5rem; border-radius: 999px; border: 1px solid transparent;
}
.knoten-chip--vision   { color: #7a5900; background: var(--gold-schwach); border-color: #e6d29a; }
.knoten-chip--richtung { color: var(--akzent-stark); background: var(--akzent-schwach); border-color: #f0d2d2; }
.knoten-chip--schritt  { color: var(--text-leise); background: var(--flaeche-2); border-color: var(--rand); }

/* Aktionen rechts: nur noch der Drag-&-Drop-Griff. Er ruht unsichtbar und tritt erst
   hervor, wenn die Zeile ueberfahren wird ODER er den Fokus traegt (Tastatur — der
   Griff ist ein echter Knopf). So bleibt der Baum ruhig. Er sitzt ausserhalb des
   Haupt-Links, damit ein Zug den Knoten nicht oeffnet. Anlegen/Umbenennen/Loeschen
   liegen im Kontextmenue (Rechtsklick). */
.knoten-zeile__aktionen {
  flex: none; display: inline-flex; align-items: center; gap: 0.15rem;
  opacity: 0; transition: opacity 0.12s;
}
.knoten-zeile:hover .knoten-zeile__aktionen,
.knoten-zeile:focus-within .knoten-zeile__aktionen { opacity: 1; }
.knoten-aktion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; cursor: pointer;
  font-size: 0.85rem; color: var(--text-leise);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-klein);
}
.knoten-aktion:hover { color: var(--akzent-stark); background: var(--akzent-schwach); border-color: var(--rand); }

/* Abhaken direkt im Baum: die Checkbox jeder Schritt-Zeile — ganz links, VOR dem
   anklickbaren Hauptbereich (nur so erreicht der Geschwister-Kombinator ~ weiter unten
   den Titel). Ruhiger Geist-Look wie der Einklapp-Pfeil; erledigt = das eine Gruen der
   App. Ein Klick schaltet erledigt/offen um. Nicht-Schritte tragen an derselben Stelle
   den gleich breiten Platzhalter, damit die Titel buendig untereinander starten. */
.knoten-haken-form { flex: none; margin: 0; display: inline-flex; }
.knoten-haken-platz { flex: none; width: 1.4rem; height: 1.4rem; }
.knoten-haken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; padding: 0; cursor: pointer;
  font-size: 0.95rem; color: var(--text-leise);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-klein);
}
.knoten-haken:hover { color: var(--akzent-stark); background: var(--akzent-schwach); }
.knoten-haken-form.is-erledigt .knoten-haken { color: #067647; }

/* Erledigt: der Titel dieser Zeile wird durchgestrichen und leiser. Die Checkbox steht
   VOR dem Hauptbereich, darum erreicht der Geschwister-Kombinator (~) den Titel. */
.knoten-haken-form.is-erledigt ~ .knoten-zeile__haupt .knoten-titel {
  text-decoration: line-through; color: var(--text-leise);
}

/* ---- Knoten-Detailseite -------------------------------------------------- */
/* „Gefahrzone" (Knoten loeschen): ruhig unten abgesetzt. Der Geist-Knopf traegt
   die Fehlerfarbe nur im Text/Rahmen, nicht als Flaeche — er soll nicht schreien. */
.knoten-gefahrzone { margin-top: 2.5rem; }
.knopf--gefahr-geist { background: transparent; color: var(--fehler-text); border-color: var(--rand-stark); }
.knopf--gefahr-geist:hover { background: var(--fehler-bg); border-color: var(--fehler-rand); color: var(--fehler-text); }

/* ---- Baum-Split: Baum links, Knoten-Detail rechts (50/50) ---------------- */
/* Die Baum-Ansicht ist zweigeteilt: links der Baum, rechts das Detail-Panel des
   angeklickten Knotens (per htmx eingeswappt). Zwei gleich breite Spalten
   (flex: 1 1 0), ohne Trennlinie dazwischen. min-width:0 erlaubt beiden Spalten,
   ihren Inhalt zu beschneiden statt die Zeile zu sprengen. */
.baum-split { display: flex; }
.baum-split__baum { flex: 1 1 0; min-width: 0; padding-right: 1.5rem; }
.baum-split__detail { flex: 1 1 0; min-width: 0; padding-left: 1.5rem; }

/* Einen Kopf mit Typ-Chip und Titel traegt das Detail-Panel bewusst NICHT mehr:
   welcher Knoten offen ist, steht schon links im Baum (aktive Zeile markiert, mit
   Titel + Typ-Icon). Das Panel beginnt darum direkt mit dem Inhalt. */

/* Die im rechten Panel gerade geoeffnete Baumzeile wird links markiert, damit klar
   ist, welcher Knoten angezeigt wird. Steht bewusst NACH der :hover-Regel weiter
   oben, damit die aktive Zeile auch beim Ueberfahren ihren Akzent behaelt. */
.knoten-zeile.is-aktiv { background: var(--akzent-schwach); }
.knoten-zeile.is-aktiv .knoten-titel { color: var(--akzent-stark); }

/* ---- Baum: Drag & Drop (Umsortieren / Umhaengen) ------------------------- */
/* Gezogen wird nur am Griff (SortableJS-Anfasser) — der Rest der Zeile bleibt zum
   Oeffnen anklickbar. Der Greif-Cursor deutet das Ziehen an. */
.knoten-griff { cursor: grab; }
.knoten-griff:active { cursor: grabbing; }

/* Waehrend eines Zuges (assets/baum-dnd.js setzt body.baum-zieht) werden auch LEERE
   Kinder-Listen zu sichtbaren Ablagezonen — sonst haetten bisher kinderlose Knoten
   kein Drop-Ziel. Ohne Zug bleiben leere Listen unsichtbar (Hoehe 0), der Baum bleibt
   ruhig. */
body.baum-zieht ul.baum-kinder:empty {
  min-height: 1.5rem; margin-top: 0.15rem;
  border: 1px dashed var(--rand-stark); border-radius: var(--radius-klein);
  background: var(--flaeche-2);
}

/* Der Platzhalter (ghost), der zeigt, wo der Knoten landen wuerde. */
.baum-knoten--geist > .knoten-zeile {
  opacity: 0.6; background: var(--akzent-schwach);
  outline: 1px dashed var(--akzent); outline-offset: -1px;
}
/* Der gerade angefasste Knoten (waehrend er gezogen wird). */
.baum-knoten--gewaehlt > .knoten-zeile { background: var(--flaeche-2); }

/* ---- Schritt-Aktionsleiste (Timer / Bonus / Prioritaet) ------------------- */
/* Sitzt auf der Knoten-Detailseite ueber den Notizen und (kompakter) in der
   Aufgaben-Uebersicht. Bewusst ruhig: eine leichte Flaeche, wenige Elemente. Die
   Formulare darin sind htmx-Knoepfe — margin:0 + inline-flex, damit sie sauber in
   den Zeilen sitzen. */
.schritt-leiste {
  background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0.8rem 1rem; margin-bottom: 1.4rem;
}
.schritt-leiste form { margin: 0; display: inline-flex; }

.schritt-leiste__kopf { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.schritt-leiste__timer {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--rand);
}

.schritt-meta { color: var(--text-leise); font-size: 0.85rem; }

/* Bonus-Merkmal: Gold, der seltene Kontrast der App — passt zum „Bonus fuer
   geringe Zeitpraeferenz" (etwas Besonderes, sparsam gesetzt). */
.schritt-bonus {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: #7a5900; background: var(--gold-schwach); border: 1px solid #e6d29a;
  font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px;
}

/* Prioritaets-Stern: ganz rechts (margin-left:auto), hohl = normal, voll = gold. */
.schritt-stern-form { margin-left: auto; }
.schritt-stern {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; cursor: pointer; font-size: 1rem;
  background: transparent; color: var(--text-leise);
  border: 1px solid transparent; border-radius: var(--radius-klein);
}
.schritt-stern:hover { background: var(--gold-schwach); color: var(--gold); border-color: #e6d29a; }
.schritt-stern.is-prio { color: var(--gold); }

/* Timer: die vier Grund-Knoepfe (idle) bzw. laufende Uhr + Stopp. */
.schritt-gruende { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.schritt-grund {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  background: var(--flaeche); color: var(--text-leise); border: 1px solid var(--rand-stark);
  padding: 0.3rem 0.6rem; border-radius: var(--radius-klein);
}
.schritt-grund:hover { color: var(--akzent-stark); background: var(--akzent-schwach); border-color: var(--akzent); }

/* Laufende Uhr: der Akzent zeigt, dass sie tickt. Die Ziffern in fester Breite
   (tabular-nums), damit die Anzeige beim Ticken nicht springt. */
.schritt-uhr.laeuft { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--akzent-stark); font-weight: 600; }
.schritt-uhr .js-laufzeit { font-variant-numeric: tabular-nums; }
.schritt-stopp { padding: 0.3rem 0.7rem; }

.schritt-gesamt { margin-left: auto; color: var(--text-leise); font-size: 0.85rem; }

/* Verlauf: die Zeitläufe des Schritts, klein und ruhig. */
.schritt-verlauf { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.schritt-verlauf__zeile { color: var(--text-leise); font-size: 0.82rem; padding: 0.15rem 0; }
.schritt-verlauf__tag { color: var(--text); font-weight: 600; }
.schritt-verlauf__dauer { color: var(--text); }

/* ---- Links (Verweise je Knoten) ------------------------------------------ */
/* Ein Link haengt an einem Knoten und erscheint an ZWEI Orten: als kleine Zeile im
   BAUM (nur oeffnen) und als Karte im DETAIL-PANEL (verwalten). Beide teilen die
   Akzentwelt der App; der Look ist bewusst ruhig. */

/* --- Baum: die Links eines Knotens als kleine Zeilen unter seiner Zeile --- */
/* Leicht eingerueckt (etwa unter den Titel), damit sie sichtbar zum Knoten gehoeren.
   Eine LEERE Liste nimmt keinen Platz (:empty) — so ist sie zugleich ein stilles,
   festes Out-of-Band-Ziel fuer die Link-Handler (id="knoten-links-<id>"). */
.knoten-links { list-style: none; margin: 0; padding: 0.05rem 0 0.15rem 2.1rem; }
.knoten-links:empty { display: none; }
.knoten-link { margin: 0; }

/* Eine Link-Zeile: die GANZE Zeile ist der Verweis (<a target="_blank">). Icon +
   Titel (beschnitten) + „Oeffnen"-Pfeil, der beim Ueberfahren hervortritt — genau
   wie die Knoten-Aktionen ruhig bleiben und erst beim Hover erscheinen. */
.knoten-link__oeffnen {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.1rem 0.35rem; border-radius: var(--radius-klein);
  color: var(--text-leise);
}
.knoten-link__oeffnen:hover { text-decoration: none; color: var(--akzent-stark); background: var(--flaeche-2); }
.knoten-link__icon { flex: none; width: 1rem; font-size: 0.8rem; color: var(--text-leise); }
.knoten-link__oeffnen:hover .knoten-link__icon { color: var(--akzent-stark); }
.knoten-link__titel {
  min-width: 0; font-size: 0.88rem; font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Der „Oeffnen"-Pfeil ruht unsichtbar (opacity:0) und tritt beim Ueberfahren der
   Zeile hervor — das ist der Oeffnen-Knopf, den man kennt. margin-left:auto schiebt
   ihn ans rechte Ende. */
.knoten-link__pfeil {
  flex: none; margin-left: auto; font-size: 0.75rem; color: var(--akzent);
  opacity: 0; transition: opacity 0.12s;
}
.knoten-link__oeffnen:hover .knoten-link__pfeil,
.knoten-link:focus-within .knoten-link__pfeil { opacity: 1; }
/* Defensiv: eine (theoretisch) ungueltige gespeicherte URL wird als stummer Text
   gezeigt — kein Link, kein Pfeil, kein Hover-Akzent. */
.knoten-link__oeffnen--tot { color: var(--text-leise); cursor: default; }
.knoten-link__oeffnen--tot:hover { color: var(--text-leise); background: transparent; }

/* --- Panel: die Link-Liste zum Verwalten (Titel + URL, Oeffnen/Bearbeiten) --- */
.link-liste { margin-top: 1.2rem; }
/* Offene Fehlermeldung beim Speichern (leere/ungueltige URL) — Debug-First. */
.link-fehler {
  background: var(--fehler-bg); color: var(--fehler-text); border: 1px solid var(--fehler-rand);
  border-radius: var(--radius-klein); padding: 0.6rem 0.8rem; margin: 0 0 0.9rem; font-size: 0.9rem;
}
/* Ruhige, vertikale Liste (Links sind breit: Titel + URL) — kein zentriertes Grid
   wie bei den Datei-Kacheln. */
.link-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.link-karte {
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; box-shadow: var(--schatten);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.link-karte:hover { border-color: var(--rand-stark); }
.link-karte__haupt { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 auto; min-width: 0; }
.link-karte__icon { flex: none; font-size: 1.1rem; color: var(--akzent); }
.link-karte__text { display: flex; flex-direction: column; min-width: 0; }
.link-karte__titel {
  font-weight: 600; color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-karte__url {
  color: var(--text-leise); font-size: 0.8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-karte__aktionen { flex: none; display: inline-flex; align-items: center; gap: 0.2rem; }
.link-aktion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; cursor: pointer;
  font-size: 0.9rem; color: var(--text-leise);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-klein);
}
.link-aktion:hover { color: var(--akzent-stark); background: var(--akzent-schwach); border-color: var(--rand); text-decoration: none; }

/* Einen neuen Link legt man jetzt ueber den gemeinsamen „+"-Chooser an
   (.hinzufuegen-*, weiter unten) — es gibt hier keine „Neuer Link"-Kachel mehr. */

/* Das Loeschen-Formular im Link-Overlay: ruhig unter den Speichern-Knoepfen abgesetzt. */
.link-overlay__loeschen { margin: 1rem 0 0; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .nav { display: none; }
  .kopf { gap: 0.8rem; }
  dialog.overlay { max-width: calc(100vw - 1.5rem); }

  /* Auf schmalen Schirmen ist kein Platz fuer zwei Spalten: Baum oben, Detail
     darunter. Aus der senkrechten Trennlinie wird eine waagerechte oben am Panel. */
  .baum-split { flex-direction: column; }
  .baum-split__baum { padding-right: 0; }
  .baum-split__detail {
    padding-left: 0; border-left: none;
    padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--rand);
  }
}

/* ---- „+"-Chooser: der eine Hinzufuegen-Knopf im Detail-Panel -------------- */
/* Ersetzt die frueheren drei Add-Affordanzen (Neue Notiz / Datei / Link). Ein
   ruhiger, gestrichelter Knopf ueber den Listen; ein Klick oeffnet das Chooser-
   Overlay (#hinzufuegen-overlay), das fragt, WAS angelegt werden soll. Die drei
   Aktionen darin nutzen die geteilte .optionen-liste/.option-Optik (siehe oben);
   die Datei-Option ist ein <label> mit verstecktem Datei-Feld. */
.hinzufuegen-leiste { margin-bottom: 1rem; }
.hinzufuegen-knopf {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0.7rem; cursor: pointer; font-size: 1.3rem;
  color: var(--text-leise); background: var(--flaeche-2);
  border: 1px dashed var(--rand-stark); border-radius: var(--radius);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.hinzufuegen-knopf:hover {
  border-style: solid; border-color: var(--akzent);
  background: var(--akzent-schwach); color: var(--akzent-stark);
}

/* ---- Projekt-Aktionen im Einstellungs-Overlay ---------------------------- */
/* Nur auf einer Projekt-Sicht sichtbar (render_kopf mit Projektkontext):
   Archivieren/Pausieren/Loeschen unter dem Konto-Block, abgesetzt durch eine
   Trennlinie. Sie nutzen dieselbe .optionen-liste/.option-Optik wie das Notiz-
   Optionen-Menue. */
.einstellungen__projekt { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rand); }
.einstellungen__abschnitt {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 700;
  color: var(--text-leise); text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
}
/* Die Loesch-Rueckfrage (startet hidden, assets/projekt-einstellungen.js blendet sie ein). */
.projekt-loeschen-frage { margin: 0.3rem 0 0.7rem; font-size: 0.9rem; color: var(--text); line-height: 1.45; }
.einstellungen__abmelden { margin-top: 1.1rem; }