/*
 * Hub — Oberflaeche im Obsidian-Geist.
 *
 * Bewusst eine einzelne, handgeschriebene Datei ohne Build-Schritt: kein
 * Node, kein npm, kein Vite. Deployment bleibt damit ein reines `git pull`.
 * Wenn spaeter Module wie Mermaid oder Excalidraw dazukommen, ist das der
 * Zeitpunkt fuer ein Bundling — nicht vorher.
 *
 * Helles und dunkles Erscheinungsbild folgen der Systemeinstellung.
 */

:root {
    --grund:        #ffffff;
    --grund-zwei:   #f6f6f7;
    --rand:         #e0e0e3;
    --text:         #26262b;
    --text-leise:   #6e6e78;
    --akzent:       #7c5cd6;
    --akzent-leise: #efeafc;
    --tot:          #c04a4a;
    --erfolg:       #2f7d4f;
    --erfolg-grund: #eaf6ee;
    --fehler:       #b3261e;
    --fehler-grund: #fdeceb;

    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund:        #1e1e21;
        --grund-zwei:   #26262a;
        --rand:         #35353b;
        --text:         #dcdce0;
        --text-leise:   #8e8e98;
        --akzent:       #a98cf0;
        --akzent-leise: #2f2846;
        --tot:          #e08585;
        --erfolg:       #7fd3a0;
        --erfolg-grund: #1e3328;
        --fehler:       #f0a09a;
        --fehler-grund: #3a2220;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--grund);
}

/* ---------------------------------------------------------------- Kopf */

.kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rand);
    background: var(--grund-zwei);
    position: sticky;
    top: 0;
    z-index: 10;
}

.marke {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.suchform { flex: 1; max-width: 520px; }

.suchform input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--grund);
    color: var(--text);
    font: inherit;
}

.suchform input:focus {
    outline: 2px solid var(--akzent);
    outline-offset: -1px;
}

.kopf-rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.konto { color: var(--text-leise); font-size: 13px; }

/* -------------------------------------------------------------- Rumpf */

.rumpf {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 52px);
}

.seitenleiste, .baum {
    width: 270px;
    flex: 0 0 270px;
    border-right: 1px solid var(--rand);
    padding: 10px 6px 24px;
    background: var(--grund-zwei);
    position: sticky;
    top: 52px;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ------------------------------------------------------- Dateibaum */
/*
 * Aufklappbarer Baum wie in Obsidian. Der farbige Block umfasst den
 * GANZEN aufgeklappten Ordner samt Kindern, nicht nur die Kopfzeile —
 * dadurch sieht man auch tief im Baum noch, in welchem Bereich man ist.
 */

.baum-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Verschachtelte Listen einrücken, mit Führungslinie wie in Obsidian. */
.baum-liste .baum-liste {
    margin-left: 11px;
    padding-left: 8px;
    border-left: 1px solid rgba(128, 128, 140, .28);
}

.baum-zweig { border-radius: 6px; }

/* Der farbige Block: nur für oberste Ordner, damit nicht jede Ebene
   eine eigene Fläche bekommt und alles unruhig wird. */
.baum-liste > .baum-zweig.ist-ordner[class*="regenbogen-"] {
    background: var(--rb-flaeche);
    margin-bottom: 2px;
}

.baum-zeile {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 6px;
    min-height: 26px;
}

.baum-zeile:hover { background: rgba(128, 128, 140, .14); }

.baum-pfeil {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-leise);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.baum-pfeil.leer { cursor: default; }

.baum-pfeil svg {
    width: 9px;
    height: 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .12s ease;
}

.baum-zweig.offen > .baum-zeile > .baum-pfeil svg { transform: rotate(90deg); }

.baum-name {
    flex: 1;
    min-width: 0;
    padding: 3px 6px 3px 2px;
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Oberste Ordner etwas kräftiger — sie tragen die Farbe. */
.baum-liste > .baum-zweig.ist-ordner > .baum-zeile > .baum-name { font-weight: 600; }

.baum-zweig.ist-datei > .baum-zeile > .baum-name { color: var(--text-leise); }
.baum-zweig.ist-datei > .baum-zeile:hover > .baum-name { color: var(--text); }

/* Die gerade geöffnete Notiz. */
.baum-zweig.aktiv > .baum-zeile {
    background: var(--akzent-leise);
}

.baum-zweig.aktiv > .baum-zeile > .baum-name {
    color: var(--akzent);
    font-weight: 600;
}

/* Während die Kinder geholt werden. */
.baum-zweig.laedt > .baum-zeile > .baum-pfeil { opacity: .4; }

.baum-liste .leer {
    padding: 3px 6px 3px 22px;
    color: var(--text-leise);
    font-size: 12px;
    font-style: italic;
}

.baum-liste .leer.fehler { color: var(--fehler); font-style: normal; }

.inhalt {
    flex: 1;
    min-width: 0;
    padding: 24px 32px 80px;
    max-width: 900px;
}

/* --------------------------------------------------------- Brotkrumen */

.krumen {
    font-size: 13px;
    color: var(--text-leise);
    margin-bottom: 12px;
}

.krumen a { color: var(--text-leise); text-decoration: none; }
.krumen a:hover { color: var(--akzent); text-decoration: underline; }
.krumen .trenner { margin: 0 5px; opacity: .5; }
.krumen .hier { color: var(--text); }

/* ------------------------------------------------------------- Listen */

h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.3; }

.liste { list-style: none; padding: 0; margin: 0; }

.liste li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 6px;
}

.liste li:hover { background: var(--grund-zwei); }

.liste a {
    color: var(--text);
    text-decoration: none;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.liste a:hover .name { color: var(--akzent); }

.nebenher {
    margin-left: auto;
    color: var(--text-leise);
    font-size: 12px;
    white-space: nowrap;
}

.leer { color: var(--text-leise); font-style: italic; }

/* -------------------------------------------------------------- Notiz */

.notiz-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.eigenschaften {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0 0 24px;
    padding: 12px 16px;
    background: var(--grund-zwei);
    border: 1px solid var(--rand);
    border-radius: 8px;
    font-size: 13px;
}

.eigenschaften dt { color: var(--text-leise); }
.eigenschaften dd { margin: 0; }

.etikett {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 4px;
    border-radius: 10px;
    background: var(--akzent-leise);
    color: var(--akzent);
    font-size: 12px;
}

.notiz { overflow-wrap: break-word; }

.notiz h1, .notiz h2, .notiz h3 { margin: 28px 0 12px; line-height: 1.3; }
.notiz h1 { font-size: 24px; }
.notiz h2 { font-size: 20px; border-bottom: 1px solid var(--rand); padding-bottom: 4px; }
.notiz h3 { font-size: 17px; }

.notiz a { color: var(--akzent); }
.notiz a.tot { color: var(--tot); text-decoration: underline dotted; cursor: help; }

.notiz img { max-width: 100%; height: auto; border-radius: 6px; }

.notiz code {
    font-family: var(--schrift-fest);
    font-size: 13px;
    background: var(--grund-zwei);
    padding: 2px 5px;
    border-radius: 4px;
}

.notiz pre {
    background: var(--grund-zwei);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
}

.notiz pre code { background: none; padding: 0; }

.notiz blockquote {
    margin: 16px 0;
    padding: 4px 16px;
    border-left: 3px solid var(--akzent);
    color: var(--text-leise);
}

/* Breite Tabellen scrollen in sich, die Seite nicht. */
.notiz table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    max-width: 100%;
}

.notiz th, .notiz td {
    border: 1px solid var(--rand);
    padding: 6px 12px;
    text-align: left;
}

.notiz th { background: var(--grund-zwei); }

.notiz input[type="checkbox"] { margin-right: 6px; }

/* ------------------------------------------------------ Rueckverweise */

.rueckverweise {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--rand);
}

.rueckverweise h2 { font-size: 15px; color: var(--text-leise); margin: 0 0 12px; }
.rueckverweise ul { list-style: none; padding: 0; margin: 0; }
.rueckverweise li { padding: 8px 0; border-bottom: 1px solid var(--rand); }
.rueckverweise a { color: var(--akzent); text-decoration: none; }
.rueckverweise .nebenher { display: block; margin: 2px 0 0; white-space: normal; }

/* ------------------------------------------------------------- Suche */

.trefferliste { list-style: none; padding: 0; }
.trefferliste li { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.trefferliste a { color: var(--akzent); text-decoration: none; font-weight: 500; }
.trefferliste .pfad { color: var(--text-leise); font-size: 12px; margin-left: 8px; }
.trefferliste .stelle { margin: 4px 0 0; color: var(--text-leise); font-size: 13px; }

/* ---------------------------------------------------------- Bearbeiten */

.editor {
    width: 100%;
    min-height: 65vh;
    padding: 16px;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: var(--grund-zwei);
    color: var(--text);
    font-family: var(--schrift-fest);
    font-size: 13.5px;
    line-height: 1.7;
    resize: vertical;
    tab-size: 4;
}

.editor:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }

.knopfleiste { display: flex; gap: 10px; margin-top: 14px; }

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

.knopf {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--grund);
    color: var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.knopf:hover { border-color: var(--akzent); color: var(--akzent); }

.knopf.haupt {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
}

.knopf.haupt:hover { filter: brightness(1.1); color: #fff; }
.knopf.schlicht { background: none; }
.knopf.breit { display: block; text-align: center; width: 100%; }

/* Löschen sieht anders aus als alles andere — erst beim Zeigen kräftig,
   damit es nicht dauernd nach Alarm schreit, aber auch nicht aus Versehen
   getroffen wird. */
.knopf.gefahr { color: var(--fehler); }
.knopf.gefahr:hover {
    background: var(--fehler);
    border-color: var(--fehler);
    color: #fff;
}

/* Ein Formular, das nur einen Knopf enthält (Löschen als POST statt GET).
   Ohne das setzt es sich als Blockelement in die Knopfleiste. */
.knopf-form { display: inline; margin: 0; }

/* ------------------------------------------------- Ordner-Werkzeuge */

/* Zugeklappt, weil Ordner anlegen und Hochladen selten gebraucht werden.
   <details> statt eigenem Aufklapp-Skript: Der Browser kann das, und ohne
   JavaScript funktioniert es genauso. */
.ordner-werkzeuge {
    margin: 0 0 20px;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: var(--grund-zwei);
}

.ordner-werkzeuge > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-leise);
}

.ordner-werkzeuge > summary:hover { color: var(--akzent); }
.ordner-werkzeuge[open] > summary { border-bottom: 1px solid var(--rand); }
.ordner-werkzeuge .formular { padding: 4px 14px 16px; }

/* ---------------------------------------------------------- Formulare */

.formular { max-width: 560px; }

.formular label {
    display: block;
    margin: 18px 0 6px;
    font-weight: 600;
    font-size: 14px;
}

.formular input[type="text"],
.formular input[type="file"] {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--grund);
    color: var(--text);
    font: inherit;
}

.formular input[type="text"]:focus {
    outline: 2px solid var(--akzent);
    outline-offset: -1px;
}

.hilfe {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-leise);
}

/* ---------------------------------------------------------- Meldungen */

.meldung {
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 16px;
    font-size: 14px;
}

.meldung.erfolg { background: var(--erfolg-grund); color: var(--erfolg); }
.meldung.fehler { background: var(--fehler-grund); color: var(--fehler); }
.meldung.hinweis { background: var(--akzent-leise); color: var(--text); }

/* --------------------------------------------------------- Anmeldung */

.anmeldeseite {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--grund-zwei);
}

.anmeldekarte {
    width: min(400px, calc(100vw - 32px));
    padding: 32px;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 12px;
    text-align: center;
}

.anmeldekarte h1 { margin-top: 0; }
.anmeldekarte .nebenher { margin: 0 0 24px; display: block; white-space: normal; }
.anmeldekarte code { font-family: var(--schrift-fest); font-size: 12px; }

/* ------------------------------------------------------------- Mobil */

@media (max-width: 800px) {
    .seitenleiste { display: none; }
    .inhalt { padding: 16px; }
    .kopf { flex-wrap: wrap; }
    .konto { display: none; }
}

/* ----------------------------------------------------------- Callouts */
/*
 * Obsidian-Callouts. Die Farbe steckt in --callout-farbe, damit Rand,
 * Kopfzeile und Hintergrund aus einer Quelle kommen.
 */

.callout {
    --callout-farbe: var(--akzent);
    margin: 16px 0;
    border: 1px solid var(--rand);
    border-left: 4px solid var(--callout-farbe);
    border-radius: 8px;
    background: color-mix(in srgb, var(--callout-farbe) 8%, var(--grund));
    padding: 12px 16px;
}

.callout-titel {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    color: var(--callout-farbe);
}

.callout-rumpf > :first-child { margin-top: 8px; }
.callout-rumpf > :last-child  { margin-bottom: 0; }

.callout-hinweis { --callout-farbe: #4a7fd6; }
.callout-tipp    { --callout-farbe: #12a594; }
.callout-erfolg  { --callout-farbe: #2f9e5e; }
.callout-frage   { --callout-farbe: #c48a1a; }
.callout-warnung { --callout-farbe: #d97a1a; }
.callout-fehler  { --callout-farbe: #d04545; }
.callout-zitat   { --callout-farbe: var(--text-leise); }

/* ------------------------------------------------- Modul-Navigation */
/*
 * Wächst automatisch mit, sobald ein Modul im HubServiceProvider
 * angemeldet wird. Solange es nur eines gibt, fällt sie kaum auf —
 * das ist gewollt, nicht vergessen.
 */

.modulnav { display: flex; gap: 4px; }

.modul-reiter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    color: var(--text-leise);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.modul-reiter:hover { background: var(--akzent-leise); color: var(--akzent); }

.modul-reiter.aktiv {
    background: var(--akzent-leise);
    color: var(--akzent);
    font-weight: 500;
}

/* ------------------------------------------------------ Vorschläge */

.vorschlag-pille {
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--warnung-grund, #fdf1e3);
    color: var(--warnung, #b06a12);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.vorschlag-pille:hover { filter: brightness(.95); }

.vorschlagsliste { list-style: none; padding: 0; margin: 0; }

.vorschlag {
    border: 1px solid var(--rand);
    border-left: 4px solid var(--akzent);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--grund-zwei);
}

.vorschlag-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.vorschlag .begruendung {
    margin: 8px 0 0;
    color: var(--text-leise);
    font-size: 14px;
}

/* Die Nutzdaten im Klartext: Bei Geld soll sichtbar sein, was genau
   freigegeben wird, nicht nur eine hübsche Zusammenfassung. */
.nutzdaten { margin-top: 10px; font-size: 13px; }
.nutzdaten summary { cursor: pointer; color: var(--text-leise); }

.nutzdaten pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 6px;
    overflow-x: auto;
    font-family: var(--schrift-fest);
    font-size: 12.5px;
}

.vorschlag .knopfleiste { margin-top: 12px; }

.entschieden { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rand); }
.entschieden h2 { font-size: 15px; color: var(--text-leise); margin: 0 0 12px; }

.status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.status-angenommen     { background: var(--erfolg-grund); color: var(--erfolg); }
.status-verworfen      { background: var(--grund-zwei);   color: var(--text-leise); }
.status-fehlgeschlagen { background: var(--fehler-grund);  color: var(--fehler); }

/* Fließtext-Variante von .nebenher: ohne Rechtsbündigkeit und Umbruchsperre. */
.nebenher.breit {
    margin-left: 0;
    white-space: normal;
    display: block;
    max-width: 60ch;
    margin-bottom: 20px;
}

@media (max-width: 800px) {
    .modul-name { display: none; }
}

/* ---------------------------------------------------------------- Graph */
/*
 * SVG-Graph ohne fremde Bibliothek. Farben kommen aus dem JavaScript
 * (aus dem Ordnernamen abgeleitet), hier steht nur das Verhalten.
 */

/*
 * Graph-Leinwand: IMMER dunkel, unabhängig vom Erscheinungsbild der
 * Anwendung. Genau wie Obsidians Graph-Ansicht.
 *
 * Der Grund ist nicht Geschmack: Die Punktfarben leiten sich vom
 * Ordnernamen ab und liegen im mittleren Helligkeitsbereich. Auf Weiß
 * verschwinden die hellen (Gelb, Grün) fast, auf Dunkel heben sich alle
 * gleichmäßig ab. Eine feste dunkle Fläche macht die Farben verlässlich.
 */
#graph {
    /* Flex-Spalte, damit das SVG darunter den Rest bekommt. Fehlte das,
       blieb #graph auf display:block und das flex:1 am SVG war wirkungslos —
       das SVG behielt seine Eigenhöhe aus dem viewBox-Seitenverhältnis. */
    display: flex;
    flex-direction: column;

    /* Blaustichiges Dunkel wie in Obsidian — neutrales Grau wirkt
       daneben stumpf, und die Pastelltöne stehen darauf ruhiger. */
    --g-grund:  #21202e;
    --g-linie:  rgba(255, 255, 255, .13);
    --g-text:   rgba(255, 255, 255, .55);
    --g-hell:   rgba(255, 255, 255, .95);

    position: relative;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--g-grund);
    overflow: hidden;
    margin-top: 8px;
}

/*
 * Höhe über Flexbox, NICHT über calc(100vh - feste Pixel).
 *
 * Der feste Abzug war geraten und stimmte nie: Überschrift, Beschreibung
 * und Legende sind unterschiedlich hoch, je nach Fensterbreite bricht der
 * Text um. Ergebnis war eine Leinwand, die mal überstand und mal einen
 * Streifen leer liess. Jetzt bekommt die Seite die Fensterhöhe und der
 * Graph den Rest — was immer davon übrig ist.
 */
#graph-svg {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 260px;
    cursor: grab;
    touch-action: none;
}

/* Auf der Notizseite ist der Graph nur ein Ausschnitt, kein Hauptinhalt. */
/* Auf der Notizseite ist der Graph nur ein Ausschnitt, kein Hauptinhalt —
   dort also doch eine feste Höhe. */
.notiz-graph #graph-svg { height: 380px; flex: none; min-height: 0; }

#graph-svg.zieht { cursor: grabbing; }

.graph-kanten line {
    stroke: var(--g-linie);
    stroke-width: 1.1;
}

/* Kein Ring um die Punkte. Der dunkle Rand liess sie wie Perlen wirken;
   Obsidian zeichnet flache Scheiben, das wirkt ruhiger. */
.graph-punkt circle {
    stroke: none;
    cursor: pointer;
}

.graph-punkt circle.mitte { stroke: #fff; stroke-width: 2.5; }

.graph-punkt text {
    font-family: var(--schrift);
    font-size: 11px;
    fill: var(--g-text);
    pointer-events: none;
    user-select: none;
    paint-order: stroke;
    stroke: var(--g-grund);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* Beim Überfahren tritt alles zurück außer der Nachbarschaft. Ohne das
   ist ein Graph mit 300 Kanten nur ein Knäuel. */
#graph-svg.hebt-hervor .graph-punkt { opacity: .18; }
#graph-svg.hebt-hervor .graph-kanten line { opacity: .06; }
#graph-svg.hebt-hervor .graph-punkt.nah { opacity: 1; }

#graph-svg.hebt-hervor .graph-kanten line.nah {
    opacity: 1;
    stroke: rgba(255, 255, 255, .8);
    stroke-width: 1.8;
}

#graph-svg.hebt-hervor .graph-punkt.nah text { fill: var(--g-hell); font-weight: 500; }

.graph-meldung {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 8px 16px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .55);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    pointer-events: none;
}

.graph-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .25);
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.graph-legende-eintrag { display: inline-flex; align-items: center; gap: 6px; }

.graph-legende-punkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.schalter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-leise);
    cursor: pointer;
    white-space: nowrap;
}

/* ------------------------------------------------ Lokaler Graph in Notiz */

.notiz-graph {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--rand);
}

.notiz-graph h2 {
    font-size: 15px;
    color: var(--text-leise);
    margin: 0 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.notiz-graph #graph-svg { height: 340px; }
.notiz-graph .graph-legende { display: none; }

.vault-reiter { display: flex; gap: 2px; }

.vault-reiter a {
    padding: 5px 10px;
    border-radius: 6px;
    color: var(--text-leise);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.vault-reiter a:hover,
.vault-reiter a.aktiv { background: var(--akzent-leise); color: var(--akzent); }

/* ------------------------------------------------------------- Tagwolke */

.tagwolke {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: baseline;
    padding: 18px;
    background: var(--grund-zwei);
    border: 1px solid var(--rand);
    border-radius: 10px;
    margin-bottom: 28px;
}

.tagwolke-eintrag {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--grund);
    border: 1px solid var(--rand);
    color: var(--text);
    text-decoration: none;
    line-height: 1.4;
}

.tagwolke-eintrag:hover { border-color: var(--akzent); color: var(--akzent); }

.tagwolke-eintrag.aktiv {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
}

.tagwolke-zahl { font-size: .7em; opacity: .6; }

.tag-treffer h2 { font-size: 16px; margin-bottom: 12px; }

/* ------------------------------------------------------------ Aufgaben */

.filter-leiste {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rand);
    padding-bottom: 10px;
}

.filter-leiste a {
    padding: 5px 12px;
    border-radius: 6px;
    color: var(--text-leise);
    text-decoration: none;
    font-size: 14px;
}

.filter-leiste a:hover { background: var(--grund-zwei); }
.filter-leiste a.aktiv { background: var(--akzent-leise); color: var(--akzent); font-weight: 500; }

.aufgabengruppe { margin-bottom: 26px; }

.aufgabengruppe h2 {
    font-size: 15px;
    margin: 0 0 8px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.aufgabengruppe h2 a { color: var(--akzent); text-decoration: none; }

.aufgabenliste { list-style: none; padding: 0; margin: 0; }

.aufgabenliste li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 6px;
}

.aufgabenliste li:hover { background: var(--grund-zwei); }
.aufgabenliste li.erledigt .aufgabentext { color: var(--text-leise); text-decoration: line-through; }

.aufgabenliste form { display: inline; }

.haken {
    background: none;
    border: none;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-leise);
}

.haken:hover { color: var(--akzent); }

.aufgabentext { flex: 1; min-width: 0; }

.faellig {
    font-size: 12px;
    color: var(--text-leise);
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--grund-zwei);
}

.faellig.ueberfaellig { background: var(--fehler-grund); color: var(--fehler); font-weight: 600; }

/* ------------------------------------------------------------- Tabelle */

.filterform {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.filterform select,
.filterform input {
    padding: 6px 10px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--grund);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

/* Breite Tabellen scrollen in sich, die Seite nie waagerecht. */
.tabellenrahmen {
    overflow-x: auto;
    border: 1px solid var(--rand);
    border-radius: 8px;
}

.datentabelle { border-collapse: collapse; width: 100%; font-size: 14px; }

.datentabelle th {
    background: var(--grund-zwei);
    text-align: left;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.datentabelle th a { color: var(--text); text-decoration: none; display: block; padding: 8px 12px; }
.datentabelle th a:hover { color: var(--akzent); }
.datentabelle td { padding: 7px 12px; border-top: 1px solid var(--rand); }
.datentabelle tbody tr:hover { background: var(--grund-zwei); }
.datentabelle td a { color: var(--akzent); text-decoration: none; }
.datentabelle .leise { color: var(--text-leise); font-size: 13px; }
.datentabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ Tote Verweise */

.toter-verweis { margin-bottom: 22px; }

.toter-verweis h2 {
    font-size: 15px;
    margin: 0 0 6px;
    color: var(--tot);
    font-family: var(--schrift-fest);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

/* -------------------------------------------------------------- Editor */
/*
 * Selbst gebaut auf einem gewöhnlichen textarea. Kein CodeMirror (bräuchte
 * einen Build-Schritt), kein EasyMDE (spritzt Inline-Styles ein, die die
 * CSP verbietet).
 */

/*
 * KEIN overflow:hidden hier — das würde #editor zum Scroll-Container
 * machen, und die sticky Werkzeugleiste würde sich dann daran ausrichten
 * statt am Fenster: dauerhafte 52-Pixel-Lücke und keine echte Haftung
 * beim Scrollen. Die runden Ecken erledigen deshalb die Kindelemente.
 */
#editor {
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--grund);
}

#editor.geaendert { border-color: var(--akzent); }

.werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: var(--grund-zwei);
    border-bottom: 1px solid var(--rand);
    border-radius: 9px 9px 0 0;
    position: sticky;
    top: 52px;
    z-index: 5;
}

.werkzeugleiste button {
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    color: var(--text-leise);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.werkzeugleiste button:hover {
    background: var(--grund);
    border-color: var(--rand);
    color: var(--akzent);
}

.werkzeugleiste .trenner {
    width: 1px;
    height: 18px;
    background: var(--rand);
    margin: 0 6px;
}

.editor-flaechen { display: flex; align-items: stretch; }

#editor .editor {
    flex: 1;
    min-width: 0;
    min-height: 60vh;
    padding: 20px 22px;
    border: none;
    border-radius: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift-fest);
    font-size: 14px;
    line-height: 1.75;
    resize: vertical;
    tab-size: 4;
    outline: none;
}

.editor-vorschau {
    flex: 1;
    min-width: 0;
    padding: 20px 22px;
    overflow-y: auto;
    max-height: 60vh;
    border-left: 1px solid var(--rand);
    background: var(--grund-zwei);
}

/* Die drei Ansichten. Umgeschaltet über eine Klasse am Rahmen, damit
   kein JavaScript Stile setzen muss (die CSP verbietet das ohnehin). */
#editor.zeigt-text     .editor-vorschau { display: none; }
#editor.zeigt-vorschau .editor          { display: none; }
#editor.zeigt-vorschau .editor-vorschau { border-left: none; }

.ansichtswahl {
    display: inline-flex;
    border: 1px solid var(--rand);
    border-radius: 7px;
    overflow: hidden;
}

.ansichtswahl button {
    padding: 6px 14px;
    border: none;
    background: var(--grund);
    color: var(--text-leise);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ansichtswahl button + button { border-left: 1px solid var(--rand); }
.ansichtswahl button:hover { background: var(--grund-zwei); }
.ansichtswahl button.aktiv { background: var(--akzent); color: #fff; }

.editor-fuss {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 14px;
    border-top: 1px solid var(--rand);
    background: var(--grund-zwei);
    border-radius: 0 0 9px 9px;
    font-size: 12px;
    color: var(--text-leise);
}

.editor-status { font-weight: 600; }
.editor-status.sicher { color: var(--erfolg); }
.editor-status.offen  { color: var(--akzent); }
.editor-zaehler { font-variant-numeric: tabular-nums; }
.editor-hinweis { margin-left: auto; opacity: .75; }

@media (max-width: 900px) {
    /* Nebeneinander lohnt auf schmalen Schirmen nicht. */
    #editor.zeigt-beides .editor-vorschau { display: none; }
    .editor-hinweis { display: none; }
}

/* --------------------------------------------------- Regenbogen-Ordner */
/*
 * Farbverlauf über die obersten Vault-Ordner, wie in Martins Obsidian.
 * Die Zuordnung Ordner -> Nummer macht OrdnerFarben.php nach der
 * alphabetischen Position; bei der PARA-Nummerierung (00, 01, 02 …) ergibt
 * das automatisch die richtige Reihenfolge.
 *
 * Als KLASSEN und nicht als style-Attribut: Die CSP erlaubt style-src
 * 'self' ohne unsafe-inline und blockiert damit auch Style-Attribute im
 * Markup. Ein inline gesetzter Farbwert wäre wirkungslos.
 *
 * Zwei Variablen je Stufe: --rb ist die kräftige Farbe (Balken, Rand),
 * --rb-flaeche die zurückhaltende Füllung dahinter.
 */

.regenbogen-1  { --rb: #e0577f; --rb-flaeche: #fce4ec; }  /* Rosé      */
.regenbogen-2  { --rb: #d9628f; --rb-flaeche: #fbe3ef; }  /* Altrosa   */
.regenbogen-3  { --rb: #e07a3f; --rb-flaeche: #fdead9; }  /* Orange    */
.regenbogen-4  { --rb: #d9a520; --rb-flaeche: #fdf3d6; }  /* Gelb      */
.regenbogen-5  { --rb: #6fa83c; --rb-flaeche: #e9f5dc; }  /* Grün      */
.regenbogen-6  { --rb: #2fa891; --rb-flaeche: #d9f2ed; }  /* Türkis    */
.regenbogen-7  { --rb: #3f97cf; --rb-flaeche: #ddeffb; }  /* Hellblau  */
.regenbogen-8  { --rb: #4a7fd6; --rb-flaeche: #dde7fb; }  /* Blau      */
.regenbogen-9  { --rb: #6b6ede; --rb-flaeche: #e2e3fc; }  /* Indigo    */
.regenbogen-10 { --rb: #9160d9; --rb-flaeche: #eae0fb; }  /* Violett   */
.regenbogen-11 { --rb: #b95bc4; --rb-flaeche: #f5dff8; }  /* Magenta   */
.regenbogen-12 { --rb: #8b8f96; --rb-flaeche: #eceef0; }  /* Grau      */

@media (prefers-color-scheme: dark) {
    /* Im Dunkeln müssen die Flächen dunkel bleiben, sonst blendet die
       Seitenleiste. Die kräftige Farbe wird dafür etwas heller. */
    .regenbogen-1  { --rb: #f090ac; --rb-flaeche: #3a2029; }
    .regenbogen-2  { --rb: #eb9ab8; --rb-flaeche: #38222c; }
    .regenbogen-3  { --rb: #f0a86a; --rb-flaeche: #3a2a1c; }
    .regenbogen-4  { --rb: #e8c65c; --rb-flaeche: #38311a; }
    .regenbogen-5  { --rb: #a3d072; --rb-flaeche: #26331b; }
    .regenbogen-6  { --rb: #6ad4bd; --rb-flaeche: #1b332f; }
    .regenbogen-7  { --rb: #78c3ef; --rb-flaeche: #1e2f3a; }
    .regenbogen-8  { --rb: #86aaf0; --rb-flaeche: #202a3c; }
    .regenbogen-9  { --rb: #9a9cf0; --rb-flaeche: #262740; }
    .regenbogen-10 { --rb: #b795ee; --rb-flaeche: #2d2340; }
    .regenbogen-11 { --rb: #d992e0; --rb-flaeche: #37223a; }
    .regenbogen-12 { --rb: #a8adb5; --rb-flaeche: #2b2d31; }
}

/* Seitenleiste: farbiger Balken links plus zarte Fläche. Zurückhaltender
   als volle Pillen, weil die Leiste auch Dateien enthält. */
/* Ordnerliste im Hauptbereich: volle Pille, wie in Obsidian. */
.liste li[class*="regenbogen-"] {
    background: var(--rb-flaeche);
    border-left: 4px solid var(--rb);
    margin-bottom: 3px;
}

.liste li[class*="regenbogen-"]:hover { filter: brightness(.97); }
.liste li[class*="regenbogen-"] .name { font-weight: 500; }

/* ------------------------------------------------- Tagwolke: Größen */
/* Als Klassen, weil style-Attribute an der CSP scheitern. */
.tagwolke-eintrag.stufe-1 { font-size: .78rem; }
.tagwolke-eintrag.stufe-2 { font-size: .92rem; }
.tagwolke-eintrag.stufe-3 { font-size: 1.06rem; }
.tagwolke-eintrag.stufe-4 { font-size: 1.22rem; }
.tagwolke-eintrag.stufe-5 { font-size: 1.42rem; }
.tagwolke-eintrag.stufe-6 { font-size: 1.65rem; font-weight: 600; }

/*
 * Volle Breite für Ansichten, die keine Textbreite brauchen.
 *
 * 900 px sind für Fließtext richtig — darüber wird eine Zeile mühsam zu
 * lesen. Ein Graph oder eine breite Tabelle sollen dagegen den ganzen
 * Bildschirm nutzen.
 */
.inhalt.weit {
    max-width: none;
    padding-right: 32px;
}


/* ------------------------------------------------- Seiten voller Höhe */
/*
 * Für Ansichten, die den Bildschirm ausfüllen sollen statt zu scrollen.
 * Der Graph ist der erste Fall: Eine Karte, bei der man scrollen muss,
 * um den Rand zu sehen, ist keine Übersicht.
 */
/*
 * Drei Dinge muessen zusammenkommen, sonst wirkt nichts davon:
 *
 *   align-items: stretch  — sonst streckt sich die Inhaltsspalte nicht auf
 *                           volle Hoehe (der Grundwert ist flex-start) und
 *                           das innere Flex-Layout rechnet aus dem Inhalt
 *   min-height: 0         — die Grundregel setzt min-height auf fast
 *                           Fensterhoehe, und min-height schlaegt height
 *   overflow: hidden      — damit der Graph nicht doch ueberlaeuft
 */
.rumpf:has(.inhalt.hoch) {
    height: calc(100vh - var(--kopf-hoehe, 61px));
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.inhalt.hoch {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-bottom: 18px;
}

/* Alles ausser dem Graph behält seine natürliche Höhe, der Graph
   bekommt den Rest. */
.inhalt.hoch > #graph { flex: 1; min-height: 0; }

.inhalt.hoch h1 { margin-bottom: 6px; }
.inhalt.hoch .nebenher.breit { margin-bottom: 10px; }

/* ------------------------------------------------- Graph-Kopfzeile */
/*
 * Kompakt, damit die Leinwand darunter möglichst viel Platz bekommt.
 * Die Hinweise stecken in einem <details> und sind standardmäßig zu —
 * beim ersten Mal nützlich, danach nur Platzverbrauch.
 */

.graph-kopf { margin-bottom: 8px; align-items: center; }
.graph-kopf h1 { margin: 0; }
.graph-kopf .knopfleiste { margin-top: 0; align-items: center; }

.graph-hinweis { position: relative; }

.graph-hinweis > summary {
    list-style: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rand);
    border-radius: 50%;
    background: var(--grund);
    color: var(--text-leise);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.graph-hinweis > summary::-webkit-details-marker { display: none; }
.graph-hinweis > summary:hover { border-color: var(--akzent); color: var(--akzent); }
.graph-hinweis[open] > summary { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Als Sprechblase über den Graph gelegt, damit das Aufklappen die
   Leinwand nicht verschiebt. */
.graph-hinweis[open] > p:first-of-type,
.graph-hinweis > p {
    position: absolute;
    right: 0;
    top: 38px;
    z-index: 20;
    width: 340px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: var(--grund);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    font-size: 13px;
    color: var(--text-leise);
    line-height: 1.55;
}

.graph-hinweis > p + p { top: 116px; }

/* ============================================================ Kalender */

.kalender {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.kalender th {
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-leise);
    text-align: center;
}

.kalender td {
    border: 1px solid var(--rand);
    padding: 0;
    height: 72px;
    vertical-align: top;
}

.kalender td.fremd { background: var(--grund-zwei); }
.kalender td.heute { outline: 2px solid var(--akzent); outline-offset: -2px; }

.kalender form { margin: 0; height: 100%; }

/* Der ganze Tag ist die Trefferfläche — am Handy ist ein kleines Ziel
   der Unterschied zwischen bedienbar und nicht. */
.kalender-tag {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 7px 9px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.kalender-tag:hover { background: var(--akzent-leise); }
.kalender td.fremd .kalender-tag { color: var(--text-leise); }
.kalender-tag .zahl { font-size: 14px; }
.kalender-tag.hat-notiz .zahl { font-weight: 700; }

.kalender-tag .punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--akzent);
}

/* ============================================================== Kanban */

.board {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    /* Spalten scrollen in sich, die Seite scrollt nie waagerecht —
       Vorgabe aus Design.md §8. */
    overflow-x: auto;
    padding-bottom: 12px;
}

.spalte {
    flex: 0 0 280px;
    background: var(--grund-zwei);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 12px;
}

.spalte.ziel { border-color: var(--akzent); background: var(--akzent-leise); }

.spalte > h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px;
    font-size: 15px;
    border: 0;
    padding: 0;
}

.spalte .anzahl {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-leise);
}

.karten {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 24px;
}

.karte {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 11px;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.45;
    cursor: grab;
}

.karte:hover { border-color: var(--akzent); }
.karte.zieht { opacity: 0.4; }

/* Ausgewählt: der Weg fürs Handy, wo es kein Ziehen gibt. */
.karte.gewaehlt {
    border-color: var(--akzent);
    box-shadow: 0 0 0 2px var(--akzent-leise);
}

.karte.erledigt .text { text-decoration: line-through; color: var(--text-leise); }

.karte .kaestchen {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    line-height: 1.45;
    cursor: pointer;
    color: var(--text-leise);
}

.karte .kaestchen:hover { color: var(--akzent); }

.karte-neu input {
    width: 100%;
    padding: 7px 10px;
    border: 1px dashed var(--rand);
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.karte-neu input:focus {
    outline: 2px solid var(--akzent);
    outline-offset: -1px;
    border-style: solid;
}

.beispiel {
    background: var(--grund-zwei);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 12px 14px;
    overflow-x: auto;
    font-family: var(--schrift-fest);
    font-size: 13px;
    line-height: 1.5;
}

/* ============================================================== OAuth */

.einwilligung { max-width: 560px; }

.einwilligung .antragsteller {
    font-size: 17px;
    padding: 12px 16px;
    background: var(--akzent-leise);
    border-radius: 8px;
}

/* Was die Anwendung darf, muss lesbar sein — eine Einwilligung, die man
   überfliegt, ist keine. Deshalb Zeilenluft statt Kompaktheit. */
.einwilligung .rechte {
    margin: 0 0 16px;
    padding-left: 22px;
}

.einwilligung .rechte li { margin-bottom: 6px; }

.einwilligung .rueckruf {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--rand);
    word-break: break-all;
}