/* ---- Notizen wie in Notion (NotizenAnsicht, NotizEigenschaften, NotizDatenbankAnsicht, TagesnotizKarte) ----
   Eigene Datei, damit os.css und lebensplaner.css unberührt bleiben. Farben nur über Variablen; dunkel an beiden Stellen. */

:root {
    --notiz-verlauf-1:linear-gradient(120deg,#f6d5c4,#e9b8d1 55%,#c9c3ef);
    --notiz-verlauf-2:linear-gradient(120deg,#cfe9d9,#a9d5c8 50%,#9fc3dc);
    --notiz-verlauf-3:linear-gradient(120deg,#fbe7a8,#f6c48f 50%,#ef9f8f);
    --notiz-verlauf-4:linear-gradient(120deg,#d9e4f5,#b7c6ea 50%,#a7a3dc);
    --notiz-verlauf-5:linear-gradient(120deg,#e8e2d6,#d5c6ad 50%,#b9a98e);
    --notiz-verlauf-6:linear-gradient(120deg,#2f3a4f,#4b4f7a 50%,#7a5f8f);
    --notiz-schatten:0 10px 32px rgba(15,15,15,.18);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --notiz-verlauf-1:linear-gradient(120deg,#6b4b45,#6a4561 55%,#4c4775);
        --notiz-verlauf-2:linear-gradient(120deg,#2f5443,#2b5550 50%,#2c4a63);
        --notiz-verlauf-3:linear-gradient(120deg,#6e5a26,#6f4f31 50%,#6a3c35);
        --notiz-verlauf-4:linear-gradient(120deg,#33415c,#3a4672 50%,#47426f);
        --notiz-verlauf-5:linear-gradient(120deg,#4d473d,#5a4f3e 50%,#4b4334);
        --notiz-verlauf-6:linear-gradient(120deg,#1d2433,#2c2f4d 50%,#46374f);
        --notiz-schatten:0 10px 32px rgba(0,0,0,.5);
    }
}

:root[data-theme="dunkel"] {
    --notiz-verlauf-1:linear-gradient(120deg,#6b4b45,#6a4561 55%,#4c4775);
    --notiz-verlauf-2:linear-gradient(120deg,#2f5443,#2b5550 50%,#2c4a63);
    --notiz-verlauf-3:linear-gradient(120deg,#6e5a26,#6f4f31 50%,#6a3c35);
    --notiz-verlauf-4:linear-gradient(120deg,#33415c,#3a4672 50%,#47426f);
    --notiz-verlauf-5:linear-gradient(120deg,#4d473d,#5a4f3e 50%,#4b4334);
    --notiz-verlauf-6:linear-gradient(120deg,#1d2433,#2c2f4d 50%,#46374f);
    --notiz-schatten:0 10px 32px rgba(0,0,0,.5);
}

/* Seitenleiste: Seitenbaum mit Unterseiten, Ablage beim Ziehen, Tags */
.tree-seite {
    display:flex;
    align-items:center;
    gap:0;
    border-radius:6px;
}

.tree-seite.active {
    background:var(--selected,var(--surface));
}

.tree-seite.active .note-link {
    font-weight:600;
}

.tree-seite .tree-note {
    flex:1;
    min-width:0;
    padding-left:2px;
}

.tree-auf {
    flex:0 0 18px;
    width:18px;
    padding:0;
    font-size:12px;
    color:var(--muted);
    text-align:center;
}

.tree-seite:has(.tree-note[draggable=true]):hover {
    background:var(--surface);
}

.notes-ablage {
    display:none;
    margin-top:6px;
    padding:10px;
    border:1.5px dashed var(--line);
    border-radius:8px;
    font-size:12px;
    color:var(--muted);
    text-align:center;
}

/* Nur zu sehen, während eine Seite im Baum gezogen wird (sortieren.js setzt .sortiert am Rahmen). */
.sortierbar.sortiert .notes-ablage {
    display:block;
}

.notes-tagkopf {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 6px 6px;
}

.notes-tags {
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--line);
    font-size:12px;
}

.notes-tags summary {
    cursor:pointer;
    color:var(--muted);
    padding:2px 6px;
}

.notes-tags div {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:6px 4px 2px;
}

a.note-tag {
    text-decoration:none;
}

a.note-tag:hover,a.note-tag.an {
    background:color-mix(in srgb,var(--accent) 28%,transparent);
}

.note-tag small {
    opacity:.7;
}

.notes-neu .property-check {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--muted);
}

.notes-neu small {
    font-size:11px;
    line-height:1.4;
}

.notes-start {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}

/* Kopf der Seite: Titelbild, Icon, Zusätze */
.notiz-cover {
    position:relative;
    height:170px;
    margin:8px 0 0;
    border-radius:12px;
    background:var(--notiz-verlauf-1);
}

.notiz-cover.verlauf-2,.notiz-cover-wahl.verlauf-2 { background:var(--notiz-verlauf-2); }
.notiz-cover.verlauf-3,.notiz-cover-wahl.verlauf-3 { background:var(--notiz-verlauf-3); }
.notiz-cover.verlauf-4,.notiz-cover-wahl.verlauf-4 { background:var(--notiz-verlauf-4); }
.notiz-cover.verlauf-5,.notiz-cover-wahl.verlauf-5 { background:var(--notiz-verlauf-5); }
.notiz-cover.verlauf-6,.notiz-cover-wahl.verlauf-6 { background:var(--notiz-verlauf-6); }
.notiz-cover-wahl.verlauf-1 { background:var(--notiz-verlauf-1); }

.notiz-cover-knoepfe {
    position:absolute;
    right:10px;
    bottom:10px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:5px;
    border-radius:8px;
    background:var(--bg);
    opacity:0;
    transition:opacity .15s;
}

.notiz-cover:hover .notiz-cover-knoepfe,.notiz-cover-knoepfe:focus-within {
    opacity:1;
}

.notiz-cover-wahl {
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid transparent;
}

.notiz-cover-wahl.an {
    border-color:var(--text);
}

.note-kopf {
    position:relative;
}

/* Mit Titelbild ragt das Icon wie in Notion ins Bild. */
.note-kopf.mit-cover .notiz-icon {
    position:relative;
    margin-top:-38px;
}

.note-path a {
    color:inherit;
    text-decoration:none;
}

.note-path a:hover {
    color:var(--text);
    text-decoration:underline;
}

.notiz-icon {
    display:block;
    margin:10px 0 2px -4px;
    padding:0 4px;
    font-size:54px;
    line-height:1.1;
    border-radius:10px;
}

.notiz-icon:not(:disabled):hover {
    background:var(--surface);
}

.notiz-zusaetze {
    display:flex;
    flex-wrap:wrap;
    gap:2px 10px;
    margin:10px 0 0;
    min-height:22px;
    opacity:0;
    transition:opacity .15s;
}

.note-kopf:hover .notiz-zusaetze,.notiz-zusaetze:focus-within {
    opacity:1;
}

.notiz-zusaetze .outline {
    color:var(--muted);
}

.notiz-zusaetze .outline:hover {
    color:var(--text);
}

.notiz-iconwahl {
    position:absolute;
    z-index:40;
    width:min(340px,92vw);
    padding:8px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--bg);
    box-shadow:var(--notiz-schatten);
}

.notiz-iconwahl-raster {
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:2px;
}

.notiz-iconwahl-raster button {
    padding:3px 0;
    font-size:19px;
    line-height:1.3;
}

.notiz-iconwahl-raster button:hover {
    background:var(--surface);
}

.notiz-iconwahl-fuss {
    display:flex;
    gap:6px;
    margin-top:8px;
}

.notiz-iconwahl-fuss input {
    flex:1;
    min-width:0;
}

/* Tagesnotiz */
.notiz-tag-kopf {
    display:flex;
    align-items:center;
    gap:8px;
    margin:4px 0 10px;
    font-size:14px;
}

.notiz-tagesplan {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:10px 24px;
    margin:0 0 16px;
    padding:12px 14px;
    border-radius:10px;
    background:var(--surface);
}

.notiz-tagesplan h3 {
    margin:0 0 6px;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.4px;
}

.notiz-tagesplan-zeile {
    display:flex;
    align-items:center;
    gap:8px;
    padding:2px 0;
    font-size:13.5px;
}

.notiz-tagesplan-zeile a {
    color:var(--text);
    text-decoration:none;
}

.notiz-tagesplan-zeile a:hover {
    text-decoration:underline;
}

.notiz-tagesplan-zeile.erledigt a {
    color:var(--muted);
    text-decoration:line-through;
}

.notiz-zeit {
    flex:0 0 auto;
    min-width:74px;
    font-variant-numeric:tabular-nums;
    font-size:12px;
    color:var(--muted);
}

/* Eigenschaften (Frontmatter) */
.np {
    display:grid;
    gap:1px;
    margin:12px 0 14px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
}

.np-zeile {
    position:relative;
    display:grid;
    grid-template-columns:minmax(110px,180px) minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-height:32px;
}

.np-name {
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    padding:4px 6px;
    font-size:13px;
    color:var(--muted);
    text-align:left;
    border-radius:5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

button.np-name:hover {
    background:var(--surface);
}

.np-name > span {
    flex:0 0 16px;
    text-align:center;
    font-size:12px;
}

.np-leer .np-name {
    opacity:.75;
}

.np-wert {
    min-width:0;
}

.np-feld,.np-text input {
    width:100%;
    min-width:0;
    padding:4px 6px;
    font-size:13.5px;
    color:var(--text);
    background:transparent;
    border:1px solid transparent;
    border-radius:5px;
}

.np-feld:hover,.np-feld:focus,.np-text input:hover,.np-text input:focus {
    background:var(--surface);
    border-color:var(--line);
    outline:none;
}

.np-text {
    display:flex;
    align-items:center;
    gap:4px;
}

.np-oeffnen {
    flex:0 0 auto;
    padding:0 6px;
    color:var(--muted);
    text-decoration:none;
}

.np-liste {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px;
    padding:3px 4px;
}

.np-chip {
    padding:1px 8px;
    border-radius:10px;
    font-size:12.5px;
    color:var(--text);
    background:color-mix(in srgb,var(--accent) 16%,transparent);
    text-decoration:none;
}

.np-chip-weg {
    margin-left:-4px;
    padding:0 4px;
    font-size:10px;
    color:var(--muted);
}

.np-dazu .knopf-menue-knopf {
    padding:1px 7px;
}

.np-lesen {
    display:block;
    padding:4px 6px;
    font-size:13.5px;
    overflow-wrap:anywhere;
}

.np-objekt {
    padding:4px 6px;
    font-size:12.5px;
    color:var(--muted);
}

.np-menue {
    position:absolute;
    left:0;
    top:100%;
    z-index:35;
    display:grid;
    gap:8px;
    width:250px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--bg);
    box-shadow:var(--notiz-schatten);
    font-size:12.5px;
}

.np-menue label {
    display:grid;
    gap:3px;
    color:var(--muted);
}

.np-menue input,.np-menue select,.np-neu select {
    font:inherit;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:5px;
    padding:4px 6px;
}

.np-neu {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    padding-top:6px;
}

.np-neu input {
    flex:1 1 180px;
}

.notiz-eintrag-von {
    display:block;
    margin:-6px 0 10px;
}

/* Block-Editor mit Vorschau (MarkdownSeite + Vorschau): gesetzt anzeigen, beim Klick das Textfeld */
.mblock-inhalt.mit-anzeige {
    position:relative;
}

/* Nur der Fokus im Textfeld zählt – ein Link in der Vorschau darf den Fokus bekommen, ohne dass sie verschwindet. */
.mit-anzeige > .mblock-feld:not(:focus) {
    position:absolute;
    inset:0 0 auto 0;
    max-height:100%;
    opacity:0;
    pointer-events:none;
}

.mit-anzeige:not(:has(> .mblock-feld:focus)) > .mblock-etikett {
    display:none;
}

.mit-anzeige > .mblock-feld:focus + .mblock-anzeige {
    display:none;
}

.mblock-anzeige {
    min-height:calc(1.65em + 4px);
    padding:2px 2px;
    line-height:1.65;
    overflow-wrap:anywhere;
    cursor:text;
}

.mblock-anzeige a {
    cursor:pointer;
}

.mblock-anzeige code {
    padding:1px 4px;
    border-radius:4px;
    font-size:.88em;
    background:var(--surface);
}

.mblock-h1 .mblock-anzeige {
    font-size:24px;
    font-weight:700;
    line-height:1.3;
    margin-top:14px;
}

.mblock-h2 .mblock-anzeige {
    font-size:19px;
    font-weight:650;
    line-height:1.35;
    margin-top:10px;
}

.mblock-h3 .mblock-anzeige {
    font-size:16px;
    font-weight:650;
    margin-top:6px;
}

.mblock-check.erledigt .mblock-anzeige {
    color:var(--muted);
    text-decoration:line-through;
}

.mblock-roh .mblock-anzeige > :first-child {
    margin-top:0;
}

.mblock-roh .mblock-anzeige > :last-child {
    margin-bottom:0;
}

.mblock-eigen {
    cursor:auto;
}

/* Seitenkarte: ein Absatz nur mit [[Seite]] (Unterseiten) */
.mblock-seitenlink {
    display:inline-flex;
    align-items:center;
    gap:7px;
    max-width:100%;
    padding:2px 6px 2px 2px;
    border-radius:5px;
    color:var(--text);
    font-weight:550;
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:3px;
}

.mblock-seitenlink:hover {
    background:var(--surface);
}

.mblock-seitenlink span:first-child {
    text-decoration:none;
}

.note-unterseiten {
    display:grid;
    justify-items:start;
    gap:2px;
    margin-top:18px;
}

.note-unterseiten h3 {
    margin:0 0 4px;
    font-size:13px;
    color:var(--muted);
}

/* Eingebettete Notiz (![[Notiz]]) und Datenbank (![[Datenbank]]) */
.notiz-einbettung {
    margin:4px 0;
    padding:8px 12px;
    border-left:3px solid var(--line);
    border-radius:0 8px 8px 0;
    background:var(--surface);
}

.notiz-einbettung-titel {
    display:block;
    margin-bottom:4px;
    font-size:12.5px;
    font-weight:600;
    color:var(--muted);
    text-decoration:none;
}

.notiz-db {
    margin-top:16px;
}

.notiz-db.eingebettet {
    margin:6px 0;
}

.notiz-db-titel {
    display:inline-block;
    margin-bottom:6px;
    font-size:16px;
    font-weight:650;
    color:var(--text);
    text-decoration:none;
}

.notiz-db .db-titelzelle {
    display:flex;
    align-items:center;
    gap:4px;
}

.notiz-db-icon {
    flex:0 0 auto;
    padding-left:4px;
}

.notiz-db-weg {
    opacity:0;
}

tr:hover .notiz-db-weg,.notiz-db-weg:focus-visible {
    opacity:1;
}

.notiz-db a.db-karte,.notiz-db a.db-listenzeile,.notiz-db a.db-galeriekarte,.notiz-db a.db-tag-eintrag {
    color:var(--text);
    text-decoration:none;
}

.notiz-db-galerie-icon {
    font-size:26px;
}

.notiz-db-neu {
    display:flex;
    gap:6px;
    margin:6px 0;
}

.notiz-db-neu input {
    flex:1;
    min-width:0;
    border:1px solid var(--line);
    border-radius:5px;
}

/* Bilder aus dem Vault (![[foto.png]], ![Text](Anhänge/foto.png)) – nichts aus dem Netz */
img.note-bild {
    display:block;
    max-width:100%;
    height:auto;
    margin:6px 0;
    border-radius:6px;
}

.mblock-anzeige img.note-bild {
    cursor:text;
}

.note-bild-laedt,.note-embed.missing {
    display:inline-block;
    padding:2px 8px;
    border-radius:6px;
    font-size:12.5px;
    color:var(--muted);
    background:var(--surface);
}

.note-embed.missing {
    text-decoration:line-through dotted;
}

a.note-bild-extern {
    color:var(--muted);
}

.notiz-cover.bild {
    overflow:hidden;
    background:var(--surface);
}

.notiz-cover.bild img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Tagesnotiz auf der Übersicht */
.tagesnotiz-karte {
    margin:0 0 24px;
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--bg);
}

.tagesnotiz-kopf {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.tagesnotiz-kopf h2 {
    margin:2px 0 0;
    font-size:18px;
}

.tagesnotiz-kopf .outline {
    flex:0 0 auto;
    font-size:12.5px;
    text-decoration:none;
}

.tagesnotiz-text {
    max-height:260px;
    overflow-y:auto;
    margin-top:8px;
    font-size:13.5px;
}

.tagesnotiz-leer {
    margin:8px 0 0;
}

.tagesnotiz-schnell {
    display:flex;
    gap:8px;
    margin-top:12px;
}

.tagesnotiz-schnell input {
    flex:1;
    min-width:0;
}

@media (max-width: 700px) {
    .notiz-cover {
        height:120px;
    }

    .np-zeile {
        grid-template-columns:minmax(90px,120px) minmax(0,1fr);
    }

    .notiz-zusaetze {
        opacity:1;
    }

    .notiz-iconwahl-raster {
        grid-template-columns:repeat(8,1fr);
    }
}

/* Seite „Gedächtnis“: der ganze Vault als Netz (notiznetz.js) und daneben die gezeigte Notiz – nur lesen. Das Netz bleibt
   wie alle Netze dunkel (.memory); die Notiz daneben folgt dem Farbschema. */
.gedaechtnis-werkzeuge {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
}

.gedaechtnis-suche {
    flex:0 1 240px;
    min-width:160px;
}

.gedaechtnis-bereiche {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.gedaechtnis-bereiche .cal-chip {
    cursor:pointer;
    background:none;
}

.gedaechtnis-zahl {
    margin-left:auto;
    font-size:12px;
    color:var(--muted);
}

.gedaechtnis-layout {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:16px;
    align-items:start;
}

.gedaechtnis-layout.mit-notiz {
    grid-template-columns:minmax(0, 1fr) minmax(280px, 380px);
}

.gedaechtnis-netz canvas {
    height:calc(100vh - 260px);
    min-height:380px;
}

.gedaechtnis-notiz {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:16px 18px;
    max-height:calc(100vh - 220px);
    overflow:auto;
}

.gedaechtnis-notiz-kopf {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
}

.gedaechtnis-notiz-kopf h2 {
    margin:4px 0 2px;
    font-size:20px;
    color:var(--text);
}

.gedaechtnis-notiz-kopf small,
.gedaechtnis-ordner,
.gedaechtnis-leise {
    font-size:12px;
    color:var(--muted);
}

.gedaechtnis-ordner {
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.gedaechtnis-text {
    border-top:1px solid var(--line);
    padding-top:12px;
    margin-bottom:12px;
}

.gedaechtnis-verweise {
    border-top:1px solid var(--line);
    padding-top:10px;
    margin-top:10px;
}

.gedaechtnis-verweise h3 {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
    margin:0 0 6px;
}

.gedaechtnis-verweise h3 span {
    margin-left:4px;
}

.gedaechtnis-verweise ul {
    list-style:none;
    margin:0;
    padding:0;
}

.gedaechtnis-verweise li a {
    display:flex;
    align-items:center;
    gap:7px;
    padding:4px 0;
    color:var(--text);
    text-decoration:none;
    font-size:13.5px;
}

.gedaechtnis-verweise li a:hover {
    color:var(--accent);
}

@media (max-width:900px) {
    .gedaechtnis-layout.mit-notiz {
        grid-template-columns:minmax(0, 1fr);
    }

    .gedaechtnis-netz canvas {
        height:min(55vh, 460px);
        min-height:300px;
    }

    .gedaechtnis-notiz {
        max-height:none;
    }

    .gedaechtnis-zahl {
        margin-left:0;
        width:100%;
    }
}

/* Lösch-Rückfragen von Jarvis im Chat (Komponente Rueckfragen): erst „Löschen“ führt aus. */
.ki-rueckfragen {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:10px;
}

.ki-rueckfrage {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:13px;
}

.ki-rueckfrage .ki-fehler-aktionen {
    margin-top:0;
}

.ki-rueckfrage-text {
    flex:1 1 200px;
}

.ki-rueckfrage-ergebnis {
    font-size:12px;
    color:var(--muted);
}

.ki-rueckfrage:not(.offen) .ki-rueckfrage-text {
    color:var(--muted);
}

.ki-rueckfrage.bestaetigt .ki-rueckfrage-text {
    text-decoration:line-through;
}

/* Mac-App: Jarvis wartet am Bildschirm auf „Erlauben“ (BildschirmFrageKarte im Chatfenster). */
.bildschirm-frage {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:10px 12px;
    padding:12px 14px;
    border:1px solid var(--accent);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
}

.bildschirm-frage-text {
    display:flex;
    flex-direction:column;
    gap:3px;
    font-size:13.5px;
}

.bildschirm-frage-text span {
    font-size:12px;
    color:var(--muted);
}

.bildschirm-frage .ki-fehler-aktionen {
    margin-top:0;
}

/* Ein Befehl im Projektordner – genau so, wie er laufen wird. */
.bildschirm-frage-befehl {
    margin:4px 0 2px;
    padding:8px 10px;
    max-height:220px;
    overflow:auto;
    border-radius:6px;
    background:var(--bg);
    color:var(--text);
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:12.5px;
    white-space:pre-wrap;
    word-break:break-word;
}

.bildschirm-frage-text:has(.bildschirm-frage-befehl) {
    flex:1 1 100%;
}