:root {
    color-scheme:light dark;
    --bg:#fff;
    --surface:#f7f7f5;
    --text:#37352f;
    --muted:#787774;
    --line:#e9e9e7;
    --yellow:#fbf3db;
    --accent:#7c9686;
    --blue:#e7f1f8;
    --gold:#f5d06f;
    --danger:#d44c47;
    --warten-text:#92712b;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

button,input,select {
    font:inherit;
}

button,a,input,select {
    -webkit-tap-highlight-color:transparent;
}

button {
    color:inherit;
    cursor:pointer;
    border:0;
    background:transparent;
    border-radius:6px;
    padding:6px 9px;
}

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

button:disabled,input:disabled,select:disabled {
    cursor:wait;
    opacity:.55;
}

a {
    color:inherit;
    text-underline-offset:3px;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px;
}

input[type=checkbox] {
    accent-color:var(--accent);
    width:16px;
    height:16px;
    flex-shrink:0;
    cursor:pointer;
    margin:4px 0;
}

h1,h2,p {
    margin:0;
}

h1 {
    font-size:36px;
    letter-spacing:-1.3px;
    line-height:1.3;
    margin:9px 0;
}

h2 {
    font-size:17px;
    font-weight:650;
}

/* Rand rundum ca. 1 cm, die Seite nutzt die ganze Fensterbreite */
.page {
    margin:auto;
    padding:1cm 1cm 24px;
}

.page-heading {
    margin-bottom:30px;
}

.page-heading p,.muted,small {
    color:var(--muted);
}

.eyebrow {
    font-size:10px;
    letter-spacing:1.7px;
    font-weight:650;
    color:var(--muted);
}

section {
    margin-bottom:40px;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.week-nav {
    display:flex;
    align-items:center;
    gap:8px;
}

.week-nav strong {
    font-size:13px;
    font-weight:500;
}

.week-nav>button:first-child,.week-nav>button:nth-child(3) {
    font-size:24px;
    line-height:1;
}

.outline {
    border:1px solid var(--line);
    border-radius:6px;
    padding:6px 11px;
    text-decoration:none;
    display:inline-block;
    background:var(--bg);
}

.callout {
    display:flex;
    gap:12px;
    background:var(--surface);
    padding:13px 16px;
    border-radius:6px;
    margin-bottom:18px;
}

.week-scroll {
    overflow-x:auto;
    padding-bottom:9px;
}

.week-grid {
    display:grid;
    grid-template-columns:repeat(7,minmax(170px,1fr));
    gap:10px;
}

.day {
    padding:0 5px 12px;
    border:1px solid transparent;
    border-radius:6px;
    min-height:235px;
}

.day.today {
    border-color:var(--line);
    background:var(--surface);
}

.day-heading {
    display:flex;
    align-items:center;
    gap:9px;
    background:var(--yellow);
    border-radius:6px;
    padding:10px;
    margin:0 -5px;
}

.day-heading small {
    display:block;
    font-size:11px;
}

.today .weekday {
    font-weight:750;
}

.today-dot {
    background:#bca55e;
    width:6px;
    height:6px;
    border-radius:50%;
    margin-left:auto;
}

.day-progress {
    display:flex;
    align-items:center;
    flex-direction:column;
    padding:15px 0 18px;
    gap:4px;
}

.day-progress svg {
    width:74px;
    height:74px;
}

.day-progress small {
    font-size:11px;
}

.ring-track,.ring-value {
    fill:none;
    stroke-width:6;
}

.ring-track {
    stroke:var(--line);
}

.ring-value {
    stroke:var(--accent);
    transition:stroke-dasharray .25s;
}

svg text {
    fill:var(--text);
    font-size:13px;
}

.day-task {
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-bottom:8px;
    padding:4px;
}

/* Ziehen und Ablegen (woche.js): Halten hebt die Aufgabe an, der Tag unter dem Zeiger leuchtet auf. */
.day-task[data-aufgabe] {
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}

.day-task.drop-davor {
    box-shadow:0 -3px 0 var(--accent);
}

.day-task.drop-danach {
    box-shadow:0 3px 0 var(--accent);
}

.day-task.dragging,.day-task.moving {
    opacity:.35;
}

.drag-geist {
    position:fixed;
    left:0;
    top:0;
    z-index:60;
    pointer-events:none;
    margin:0;
    border-radius:8px;
    background:var(--bg);
    box-shadow:0 12px 32px rgba(15,15,15,.22),0 2px 6px rgba(15,15,15,.12);
    transform-origin:top left;
}

body.zieht,body.zieht * {
    cursor:grabbing!important;
    -webkit-user-select:none;
    user-select:none;
}

/* Umsortieren per Ziehen (sortieren.js, Komponente Sortierbar) – überall gleich wie im Wochenplan: blasser Eintrag, Abbild
   am Zeiger, Strich in Akzentfarbe an der Zielstelle; eine andere Liste (Kategorie, Spalte, Tag) leuchtet als Ziel auf.
   Eigene Regeln einzelner Listen (z. B. die Balken nebeneinander) stehen danach und gehen vor. */
.sortierbar {
    display:contents;
}

[data-sortier].dragging {
    opacity:.35;
}

[data-sortier].sortier-davor {
    box-shadow:inset 0 2px 0 var(--accent);
}

[data-sortier].sortier-danach {
    box-shadow:inset 0 -2px 0 var(--accent);
}

[data-sortier-gruppe].sortier-ziel {
    outline:2px dashed color-mix(in srgb,var(--accent) 65%,transparent);
    outline-offset:2px;
    border-radius:8px;
    background:color-mix(in srgb,var(--accent) 7%,transparent);
}

[data-sortier-griff] {
    cursor:grab;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
}

.sortier-griff {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    min-height:22px;
    border-radius:5px;
    color:var(--muted);
    font-size:14px;
    line-height:1;
}

.sortier-griff:hover {
    background:var(--hover,color-mix(in srgb,var(--muted) 14%,transparent));
    color:var(--text);
}

.drag-geist .sortier-griff {
    color:var(--accent);
}

/* Umsortieren per Ziehen (sortieren.js): Projekt-Balken im Wochenreview, Aufgaben eines Projekts */
.task-row.dragging,.project-progress.dragging {
    opacity:.35;
}

.task-row.sortier-davor {
    box-shadow:inset 0 2px 0 var(--accent);
}

.task-row.sortier-danach {
    box-shadow:inset 0 -2px 0 var(--accent);
}

.project-progress.sortier-davor {
    box-shadow:-14px 0 0 -12px var(--accent);
}

.project-progress.sortier-danach {
    box-shadow:14px 0 0 -12px var(--accent);
}

.project-progress[data-sortier] {
    cursor:grab;
}

.drag-geist.task-row {
    background:var(--surface);
    border:1px solid var(--line);
}

/* Der Geist hängt an <body> – außerhalb des (immer dunklen) Reviews, deshalb dessen Aussehen hier noch einmal. */
.drag-geist.project-progress {
    padding:8px 12px;
    background:#1e1e1e;
    color:#d4d4d4;
}

.drag-geist.project-progress>span {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:11px;
    color:#aaa;
    min-height:18px;
    margin-bottom:6px;
}

.drag-geist.project-progress>span>span {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.drag-geist.project-progress b {
    font-weight:400;
    white-space:nowrap;
}

.drag-geist .bar-remove {
    display:none;
}

.day.drop-ziel {
    outline:2px dashed color-mix(in srgb,var(--accent) 70%,transparent);
    outline-offset:-2px;
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
}

/* Gezogen, Jarvis sucht noch eine Zeit */
.day-task.pending {
    align-items:center;
    border:1px dashed var(--line);
    border-radius:8px;
    color:var(--muted);
}

/* Routinen (Gym, Geige, Rest Day) im Tagesplan: zurückhaltend, ohne Häkchen */
.day-routine {
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:0 0 8px;
    padding:5px 8px;
    border-left:3px solid var(--routine, var(--muted));
    border-radius:4px;
    background:var(--surface);
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
}

.day-routine small {
    display:block;
    font-size:10px;
}

.day-routine.rest {
    font-style:italic;
    opacity:.8;
}

/* Liegengeblieben und heute nachgezogen */
.day-task.carried {
    border-radius:4px;
    background:color-mix(in srgb,#d9822b 8%,transparent);
}

.task-title>small.carried-from {
    color:#c97a2c;
    font-weight:600;
}

.task-title {
    text-align:left;
    padding:0;
    line-height:1.45;
    overflow-wrap:anywhere;
    flex:1;
}

.task-title>small {
    display:block;
    font-size:10px;
    margin:2px 0 3px;
}

.task-title>span {
    font-size:12px;
}

.project-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    margin-right:5px;
    background:var(--muted);
}

.done .task-title>span,.done .row-title {
    text-decoration:line-through;
    color:var(--muted);
}

.filters {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:20px;
}

.chip {
    font-size:12px;
    color:var(--muted);
    padding:5px 12px;
}

.chip.selected {
    background:var(--surface);
    color:var(--text);
    font-weight:600;
}

.task-group {
    margin-bottom:14px;
}

.group-heading {
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    text-align:left;
    padding:9px 5px;
}

.group-heading strong {
    font-weight:600;
}

.group-heading small {
    font-size:10px;
}

/* Projektkopf der Aufgabenliste: Aufklappen und daneben „＋“ (wie .day-neu im Wochenplan) */
.group-kopf {
    display:flex;
    align-items:center;
    gap:4px;
}

.group-kopf .group-heading {
    flex:1;
    min-width:0;
}

.chevron {
    width:13px;
    color:var(--muted);
}

.count {
    color:var(--muted);
    font-size:12px;
}

.mini-progress {
    display:block;
    width:65px;
    height:4px;
    border-radius:9px;
    background:var(--line);
    overflow:hidden;
    margin-left:6px;
}

.mini-progress>span {
    height:100%;
    display:block;
}

.task-row {
    display:flex;
    gap:10px;
    align-items:center;
    padding:0 10px 0 27px;
    min-height:43px;
    border-top:1px solid var(--line);
}

.task-row:hover {
    background:var(--surface);
}

.row-content {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex:1;
    min-width:0;
    text-align:left;
    padding:10px 0;
}

.row-title {
    overflow-wrap:anywhere;
}

.task-meta {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.badge {
    font-size:11px;
    padding:2px 7px;
    border-radius:4px;
    background:var(--surface);
    color:var(--muted);
    white-space:nowrap;
}

.status-wartet {
    background:var(--yellow);
    color:#92712b;
}

.status-in-arbeit {
    background:var(--blue);
    color:#477a9b;
}

.badge.carried {
    background:color-mix(in srgb,#d9822b 14%,transparent);
    color:#c97a2c;
}

/* Voraussetzungen: wartet noch (🔒) bzw. zu früh eingeplant (⚠) */
.badge.blockiert {
    background:var(--yellow);
    color:var(--warten-text);
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.badge.konflikt {
    background:color-mix(in srgb,var(--danger) 13%,transparent);
    color:var(--danger);
}

.tag-konflikt {
    color:var(--danger);
}

.empty {
    padding:35px 15px;
    text-align:center;
    background:var(--surface);
    border-radius:6px;
    color:var(--muted);
}

.empty > p {
    margin:0 0 14px;
}

.empty > p:last-child {
    margin-bottom:0;
}

.empty small {
    display:block;
    margin-top:6px;
}

footer {
    border-top:1px solid var(--line);
    padding-top:18px;
    color:var(--muted);
    font-size:11px;
}

.notice {
    background:var(--yellow);
    border-radius:6px;
    padding:12px 16px;
    margin-bottom:16px;
    overflow-wrap:anywhere;
}

.notice p {
    margin-top:8px;
}

.notice button {
    float:right;
}

.memory {
    background:#1e1e1e;
    color:#d4d4d4;
    border-radius:8px;
    overflow:hidden;
}

.memory-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 24px 18px;
}

.memory .eyebrow {
    color:#8e958e;
}

.memory-top p {
    font-size:12px;
    color:#aaa;
    margin-top:5px;
}

.memory-caption {
    font-size:12px;
    color:#858585;
}

.stats {
    display:grid;
    grid-template-columns:repeat(2, max-content);
    padding:0 24px 20px;
    gap:22px 56px;
}

.stats small {
    display:block;
    font-size:11px;
    color:#929292;
    margin-bottom:5px;
}

.stats strong {
    font-size:14px;
    font-weight:500;
}

.stats strong span {
    font-size:12px;
    color:#aaa;
    font-weight:400;
}

.review-text {
    padding:0 24px 18px;
    font-size:13px;
    line-height:1.5;
    color:#c8c8c8;
    max-width:760px;
}

.review-text small {
    display:block;
    font-size:11px;
    color:#929292;
    margin-bottom:5px;
}

.review-text ul {
    margin:2px 0;
    padding-left:20px;
}

.review-bars {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:16px 28px;
    padding:0 24px 20px;
    border-bottom:1px solid #303030;
}

.review-bars>div {
    flex:1 1 220px;
    max-width:400px;
}

.review-bars>div>span {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:11px;
    color:#aaa;
    min-height:18px;
}

.review-bars>div>span>span {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.review-bars b {
    font-weight:400;
    white-space:nowrap;
}

.bar-remove {
    padding:0 3px;
    margin-left:-6px;
    font-size:11px;
    line-height:18px;
    color:#6f6f6f;
}

.bar-remove:hover,.bar-remove:focus-visible {
    background:#333;
    color:#d4d4d4;
}

.bar-add-menue {
    flex:0 0 auto;
}

.bar-add {
    background:#262626;
    color:#aaa;
    border:1px solid #3b3b3b;
    border-radius:6px;
    font-size:11px;
    padding:4px 8px;
    cursor:pointer;
}

.bar-add:hover {
    background:#333;
}

.bar-error {
    flex-basis:100%;
    font-size:11px;
    color:#e28b7f;
}

progress {
    appearance:none;
    display:block;
    width:100%;
    height:4px;
    border:none;
    border-radius:4px;
    overflow:hidden;
    background:#363636;
    margin-top:7px;
}

progress::-webkit-progress-bar {
    background:#363636;
}

progress::-webkit-progress-value {
    background:#91a695;
}

progress::-moz-progress-bar {
    background:#91a695;
}

.goal-progress progress::-webkit-progress-value {
    background:#c5af6f;
}

.goal-progress progress::-moz-progress-bar {
    background:#c5af6f;
}

.project-progress progress::-webkit-progress-value {
    background:var(--balken, #91a695);
}

.project-progress progress::-moz-progress-bar {
    background:var(--balken, #91a695);
}

.graph-wrap {
    position:relative;
    height:420px; /* graph.js passt die Höhe an die Zahl der Projektspuren an */
}

.graph-wrap canvas {
    width:100%;
    height:420px;
    display:block;
    touch-action:pan-y; /* senkrecht wischen scrollt die Seite, waagrecht/zwei Finger bedienen das Netz */
}

/* Das Netz bleibt immer dunkel – seine Farben hier als Variablen. */
.memory,.netz-box {
    --netz-bg:#1e1e1e;
    --netz-karte:#262626;
    --netz-rand:#3b3b3b;
    --netz-text:#ececec;
    --netz-leise:#9a9a9a;
    --netz-gold:#f5d06f;
    --netz-warn:#ff8a7a;
    --netz-schatten:#0008;
}

.graph-tooltip {
    position:absolute;
    pointer-events:none;
    background:var(--netz-karte);
    color:var(--netz-text);
    border:1px solid var(--netz-rand);
    padding:12px 14px;
    border-radius:10px;
    font-size:12px;
    width:300px;
    max-width:calc(100% - 16px);
    box-shadow:0 10px 30px var(--netz-schatten);
    z-index:3;
}

.karte-kopf {
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:13.5px;
    line-height:1.3;
}

.karte-punkt {
    flex:none;
    width:10px;
    height:10px;
    margin-top:4px;
    border-radius:50%;
}

.karte-meta {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin:6px 0 0 18px;
    color:var(--netz-leise);
    font-size:11px;
}

.karte-chip {
    padding:1px 7px;
    border:1px solid var(--netz-rand);
    border-radius:999px;
    color:var(--netz-text);
}

.karte-warte {
    color:var(--netz-gold);
}

.karte-balken {
    flex-basis:100%;
    height:5px;
    border-radius:3px;
    background:var(--netz-rand);
    overflow:hidden;
}

.karte-balken span {
    display:block;
    height:100%;
}

.karte-daten {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:3px 10px;
    margin:10px 0 0;
    padding-top:9px;
    border-top:1px solid var(--netz-rand);
}

.karte-daten dt {
    color:var(--netz-leise);
}

.karte-daten dd {
    margin:0;
}

.karte-liste {
    margin-top:9px;
    line-height:1.5;
}

.karte-liste small {
    display:block;
    color:var(--netz-leise);
    font-size:10px;
    letter-spacing:.4px;
    text-transform:uppercase;
}

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

.karte-liste .mehr {
    color:var(--netz-leise);
}

.karte-warn {
    margin-top:8px;
    color:var(--netz-warn);
}

.karte-text {
    margin:9px 0 0;
    color:var(--netz-leise);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.karte-fuss {
    margin-top:10px;
    color:var(--netz-leise);
    font-size:10px;
}

.karte-fuss:empty {
    display:none;
}

/* Griff zum Sortieren der Fortschrittsbalken */
.balken-griff {
    margin-right:6px;
    color:var(--netz-leise);
    cursor:grab;
    opacity:.45;
}

.project-progress:hover .balken-griff {
    opacity:1;
}

/* Rechtsklick-Menü und Ablegen im Netz */
.netz-menue-hinter {
    position:absolute;
    inset:0;
    z-index:4;
}

.netz-menue {
    position:absolute;
    z-index:5;
    width:260px;
    padding:6px;
    background:var(--netz-karte);
    color:var(--netz-text);
    border:1px solid var(--netz-rand);
    border-radius:10px;
    box-shadow:0 10px 30px var(--netz-schatten);
    font-size:12.5px;
}

.netz-menue-kopf {
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 8px 8px;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.netz-menue button[role=menuitem] {
    display:block;
    width:100%;
    padding:7px 8px;
    text-align:left;
    color:inherit;
    background:none;
    border-radius:6px;
}

.netz-menue button[role=menuitem]:hover:not(:disabled),.netz-menue button[role=menuitem]:focus-visible {
    background:var(--netz-rand);
}

.netz-menue button.gefahr {
    color:var(--netz-warn);
}

.netz-menue hr {
    border:none;
    border-top:1px solid var(--netz-rand);
    margin:4px 0;
}

.netz-menue-eingabe {
    padding:4px 6px 6px;
}

.netz-menue-eingabe label {
    display:block;
    color:var(--netz-leise);
    font-size:11px;
}

.netz-menue-eingabe input {
    display:block;
    width:100%;
    margin:6px 0 8px;
    padding:6px 8px;
    font:inherit;
    color:var(--netz-text);
    background:var(--netz-bg);
    border:1px solid var(--netz-rand);
    border-radius:6px;
}

.netz-menue-eingabe div {
    display:flex;
    gap:6px;
}

.netz-menue-eingabe .primary {
    background:var(--netz-gold);
    color:var(--netz-bg);
    padding:5px 12px;
}

.netz-menue-eingabe .outline {
    color:var(--netz-text);
    border-color:var(--netz-rand);
}

.netz-meldung {
    position:absolute;
    left:16px;
    right:16px;
    top:8px;
    z-index:6;
    padding:8px 10px;
    color:var(--netz-warn);
    background:var(--netz-karte);
    border:1px solid var(--netz-rand);
    border-radius:8px;
    font-size:12px;
}

.netz-meldung button {
    float:right;
    color:inherit;
}

.netz-menue-hervor {
    color:var(--netz-gold) !important;
}

.netz-menue-treffer {
    max-height:240px;
    overflow-y:auto;
}

.netz-menue-treffer button[role=menuitem] {
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.treffer-art {
    flex:none;
    width:52px;
    font-size:10px;
    color:var(--netz-leise);
}

.treffer-an {
    color:var(--netz-gold);
}

.netz-menue-gruppe {
    display:block;
    padding:6px 8px 2px;
    color:var(--netz-leise);
    font-size:10px;
    letter-spacing:.4px;
    text-transform:uppercase;
}

/* Projektfenster */
.projekt-titel-zeile {
    display:flex;
    align-items:center;
    gap:8px;
}

.projekt-titel-zeile .detail-titel {
    margin-bottom:0;
}

.projekt-icon-eingabe {
    width:52px;
    font-size:26px;
    text-align:center;
    background:transparent;
    color:var(--text);
    border:1px solid transparent;
    border-radius:6px;
}

.projekt-icon-eingabe:hover,.projekt-icon-eingabe:focus {
    background:var(--surface);
    border-color:var(--line);
}

.detail-panel form .properties,.projekt-titel-zeile + .properties {
    margin-top:24px;
}

.projekt-beschreibung {
    width:100%;
    font:inherit;
    font-size:13px;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    padding:6px 8px;
    resize:vertical;
}

.graph-reset {
    position:absolute;
    right:16px;
    bottom:45px;
    background:#262626;
    color:#aaa;
    border:1px solid #3b3b3b;
    font-size:10px;
}

.graph-reset:hover {
    background:#333;
}

.graph-legend {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 24px;
    color:#868686;
    font-size:10px;
    border-top:1px solid #303030;
}

.graph-empty {
    position:absolute;
    inset:40% 0 auto;
    text-align:center;
    color:#aaa;
    pointer-events:none;
}

.panel-backdrop {
    position:fixed;
    inset:0;
    background:#0004;
    z-index:20;
}

.detail-panel {
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    width:560px;
    max-width:100%;
    overflow-y:auto;
    background:var(--bg);
    z-index:21;
    border-left:1px solid var(--line);
    padding:20px 30px 40px;
    animation:slide-in .18s ease-out;
    outline:none;
}

.panel-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    margin-bottom:32px;
}

.detail-panel h2 {
    font-size:29px;
    line-height:1.25;
    overflow-wrap:anywhere;
    letter-spacing:-.6px;
    margin-bottom:28px;
}

.properties {
    display:grid;
    grid-template-columns:125px minmax(0,1fr);
    gap:15px 12px;
    margin:0 0 28px;
    font-size:13px;
}

.properties dt {
    color:var(--muted);
}

.properties dd {
    margin:0;
    overflow-wrap:anywhere;
}

.properties input {
    margin:0;
}

.properties select,.properties input[type=date] {
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:4px;
    padding:3px;
    max-width:100%;
}

.properties dd small {
    display:block;
    margin-top:4px;
}

.property-check {
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.detail-panel .notice {
    margin:-12px 0 20px;
}

.description-edit {
    width:100%;
    min-height:120px;
    resize:vertical;
    font:inherit;
    line-height:1.6;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    padding:10px 12px;
}

.description-actions {
    display:flex;
    gap:8px;
    margin-top:12px;
    font-size:12px;
}

.description {
    border-top:1px solid var(--line);
    padding-top:24px;
    overflow-wrap:anywhere;
    line-height:1.7;
}

.description ul {
    padding-left:22px;
    margin:8px 0;
}

.description a {
    color:var(--accent);
}

.detail-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:30px;
    font-size:12px;
}

/* ---- Aufgabenfenster: alle Felder bearbeitbar, neue Aufgabe, Löschen ---- */

.detail-titel {
    display:block;
    width:100%;
    font:inherit;
    font-size:29px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.6px;
    color:var(--text);
    background:transparent;
    border:none;
    border-radius:6px;
    padding:2px 4px;
    margin:0 -4px 24px;
}

/* os.css setzt für Eingabefelder „font:inherit“ (input:not([type]) ist spezifischer als .detail-titel) – in den Fenstern
   für Aufgaben, Projekte und Gewohnheiten gelten die eigenen Größen. */
.detail-panel .detail-titel {
    font-size:29px;
    font-weight:700;
    line-height:1.25;
}

.detail-panel .projekt-icon-eingabe {
    font-size:26px;
}

.detail-titel:hover,.detail-titel:focus {
    background:var(--surface);
    outline:none;
}

.properties input[type=time],.properties input[type=url],.properties input[type=date] {
    font:inherit;
    font-size:13px;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:4px;
    padding:3px 5px;
    max-width:100%;
}

.properties .feld-breit {
    width:100%;
}

.properties dd.mit-punkt {
    display:flex;
    align-items:center;
    gap:6px;
}

.termin-zeile {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
}

.termin-weg {
    padding:2px 6px;
    font-size:11px;
    color:var(--muted);
}

.detail-panel .primary {
    background:var(--text);
    color:var(--bg);
    padding:7px 14px;
    font-weight:550;
}

.detail-panel .danger:not(.outline) {
    background:var(--danger);
    color:var(--bg);
    padding:7px 14px;
    font-weight:550;
}

.detail-panel .outline.danger {
    color:var(--danger);
    border-color:color-mix(in srgb,var(--danger) 45%,transparent);
}

.detail-loeschen {
    margin-top:28px;
    padding-top:18px;
    border-top:1px solid var(--line);
    font-size:12px;
}

.detail-loeschen p {
    margin:0 0 10px;
    color:var(--danger);
}

/* Vorher / Danach im Aufgabenfenster */
.properties dd.relationen {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
}

.relation {
    display:inline-flex;
    align-items:center;
    gap:5px;
    max-width:100%;
    padding:2px 4px 2px 8px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--surface);
}

.relation.fertig .relation-titel {
    color:var(--muted);
    text-decoration:line-through;
}

.relation.fehlt {
    border-style:dashed;
    color:var(--muted);
}

.relation-titel {
    padding:0;
    font-size:12.5px;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.relation-titel:hover {
    text-decoration:underline;
    text-underline-offset:3px;
}

.relation-weg {
    padding:0 5px;
    font-size:10px;
    color:var(--muted);
    border-radius:999px;
}

.properties .relation-neu {
    max-width:100%;
}

.properties dd.relationen small {
    flex-basis:100%;
    margin-top:0;
}

.relation-hinweis {
    color:var(--muted);
}

.relation-konflikt {
    color:var(--danger);
}

/* „＋“ im Tageskopf des Wochenplans */
.day-neu {
    margin-left:auto;
    padding:2px 8px;
    font-size:15px;
    line-height:1;
    color:var(--muted);
    border-radius:6px;
}

.day-neu:hover {
    color:var(--text);
}

/* ---- Seite einer Aufgabe (MarkdownSeite): Blöcke wie in Notion ---- */

.mseite {
    margin-left:-34px;
}

.mblock {
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:6px;
    padding:1px 0 1px 34px;
    border-radius:4px;
}

.mblock-griff {
    position:absolute;
    left:0;
    top:3px;
    display:flex;
    opacity:0;
    transition:opacity .12s;
}

.mblock:hover .mblock-griff,.mblock:focus-within .mblock-griff {
    opacity:1;
}

.mblock-griff button {
    padding:0 3px;
    font-size:12px;
    line-height:20px;
    color:var(--muted);
}

.mblock-inhalt {
    flex:1;
    min-width:0;
}

.mblock-feld {
    display:block;
    width:100%;
    font:inherit;
    line-height:1.65;
    color:var(--text);
    background:transparent;
    border:none;
    padding:2px 2px;
    resize:none;
    overflow:hidden;
}

.mblock-feld:focus {
    outline:none;
}

.mblock-feld::placeholder {
    color:var(--muted);
    opacity:.7;
}

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

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

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

.mblock-zeichen {
    flex:0 0 auto;
    min-width:16px;
    line-height:1.65;
    padding-top:2px;
    color:var(--muted);
    text-align:right;
}

.mblock-haken {
    margin-top:8px;
}

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

.mblock-zitat .mblock-inhalt {
    border-left:3px solid var(--text);
    padding-left:12px;
}

.mblock-hinweis .mblock-inhalt,.mblock-code .mblock-inhalt {
    background:var(--surface);
    border-radius:6px;
    padding:6px 10px;
}

.mblock-code .mblock-feld,.mblock-roh .mblock-feld {
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12.5px;
}

.mblock-sprache {
    font:inherit;
    font-size:11px;
    color:var(--muted);
    background:transparent;
    border:none;
    padding:0;
    margin-bottom:2px;
}

.mblock-etikett {
    font-size:11px;
    color:var(--muted);
}

.mblock-linie hr {
    flex:1;
    border:none;
    border-top:1px solid var(--line);
    margin:12px 0;
}

.mblock-tabelle-rahmen {
    overflow-x:auto;
    padding:4px 0;
}

.mblock-tabelle {
    border-collapse:collapse;
    font-size:13px;
}

.mblock-tabelle td {
    border:1px solid var(--line);
    padding:0;
}

.mblock-tabelle tr.kopf td {
    background:var(--surface);
    font-weight:600;
}

.mblock-tabelle input {
    font:inherit;
    color:var(--text);
    background:transparent;
    border:none;
    padding:5px 8px;
    min-width:90px;
}

.mblock-tabelle-knoepfe {
    display:flex;
    gap:6px;
    margin-top:4px;
}

.mblock-tabelle-knoepfe button {
    font-size:11px;
    color:var(--muted);
    padding:2px 6px;
}

.mblock-menue-hintergrund {
    position:fixed;
    inset:0;
    z-index:30;
}

.mblock-menue {
    position:absolute;
    left:34px;
    top:100%;
    z-index:31;
    display:flex;
    flex-direction:column;
    min-width:220px;
    max-height:340px;
    overflow-y:auto;
    padding:6px;
    border-radius:10px;
    background:var(--bg);
    border:1px solid var(--line);
    box-shadow:0 10px 32px rgba(15,15,15,.18);
}

.mblock-menue small {
    padding:4px 8px;
    font-size:11px;
    color:var(--muted);
}

.mblock-menue button {
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    padding:6px 8px;
    font-size:13px;
}

.mblock-menue button span {
    display:inline-block;
    width:24px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
}

.mblock-menue button.gefahr {
    color:var(--danger);
}

.mblock-menue hr {
    border:none;
    border-top:1px solid var(--line);
    margin:4px 0;
}

.mseite-weiter {
    display:block;
    width:100%;
    margin:6px 0 0 34px;
    padding:6px 2px;
    text-align:left;
    font-size:13px;
    color:var(--muted);
    opacity:.75;
}

.mseite-weiter:hover {
    opacity:1;
    background:transparent;
}

#blazor-error-ui {
    display:none;
}

/* Kurz zu sehen, wenn die Sitzung endet und die Web-App zur Anmeldung weiterleitet (MainLayout). */
.abgemeldet {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--bg);
    color:var(--muted);
}

.abgemeldet a {
    color:var(--text);
}

#aufgaben {
    scroll-margin-top:20px;
}

@keyframes slide-in {
    from {
        transform:translateX(100%);
    }
    to {
        transform:translateX(0);
    }
}

/* Dunkel: wie das System (ohne data-theme) oder fest gewählt (data-theme="dunkel", siehe Einstellungen → Darstellung). */
@media(prefers-color-scheme:dark) {
    :root:not([data-theme]) {
        --bg:#191919;
        --surface:#202020;
        --text:#d4d4d4;
        --muted:#9b9b9b;
        --line:#2f2f2f;
        --yellow:#3a3220;
        --blue:#203342;
        --danger:#ff7369;
        --warten-text:#dac27c;
    }
    :root:not([data-theme]) .status-wartet {
        color:#dac27c;
    }
    :root:not([data-theme]) .status-in-arbeit {
        color:#9fc4df;
    }
}

:root[data-theme="dunkel"] {
    color-scheme:dark;
    --bg:#191919;
    --surface:#202020;
    --text:#d4d4d4;
    --muted:#9b9b9b;
    --line:#2f2f2f;
    --yellow:#3a3220;
    --blue:#203342;
    --danger:#ff7369;
    --warten-text:#dac27c;
}

:root[data-theme="dunkel"] .status-wartet {
    color:#dac27c;
}

:root[data-theme="dunkel"] .status-in-arbeit {
    color:#9fc4df;
}

:root[data-theme="hell"] {
    color-scheme:light;
}

@media(max-width:800px) {
    .page {
        padding:28px 16px 20px;
    }
    h1 {
        font-size:30px;
    }
    .section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }
    .week-nav {
        gap:4px;
        flex-wrap:wrap;
    }
    .stats {
        grid-template-columns:1fr 1fr;
        gap:15px;
    }
    .memory-top,.stats,.review-text,.review-bars {
        padding-left:16px;
        padding-right:16px;
    }
    .memory-caption {
        display:none;
    }
    .graph-legend {
        padding:12px 16px;
        flex-direction:column;
    }
    .review-bars {
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }
    .review-bars>div {
        flex:none;
        max-width:none;
    }
    .bar-add-menue {
        align-self:flex-start;
    }
    .row-content {
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
    .task-meta {
        justify-content:flex-start;
    }
    .task-row {
        padding-left:10px;
    }
    .task-row input {
        align-self:flex-start;
        margin-top:13px;
    }
    .mini-progress {
        margin-left:auto;
    }
    .detail-panel {
        padding:16px 22px 32px;
    }
    .group-heading {
        gap:6px;
    }
}

@media(max-width:480px) {
    .detail-panel {
        width:100%;
    }
    .properties {
        grid-template-columns:110px minmax(0,1fr);
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}

h1:focus { outline: none; }

/* ---- Bausteine „netz“ und „fortschritt“ ---- */
.netz-box {
    border-radius:8px;
    overflow:hidden;
}

.netz-box .graph-wrap {
    min-height:200px;
}

.projekt-wahl {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0 0 14px;
    padding:10px 12px;
    border:1px dashed var(--line);
    border-radius:8px;
}

.projekt-wahl legend {
    padding:0 4px;
    color:var(--muted);
    font-size:12px;
}

.projekt-wahl-eintrag {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 10px 3px 6px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:12.5px;
    cursor:pointer;
}

.projekt-wahl-eintrag.an {
    background:var(--surface);
    border-color:var(--muted);
}

.projekt-wahl small {
    flex-basis:100%;
}

.fortschritt-schalter {
    margin:0 0 14px;
    font-size:13px;
}

.fortschritt-baustein {
    display:grid;
    gap:18px;
}

.fortschritt-kopf {
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:14px;
}

.fortschritt-balken {
    height:8px;
    margin:6px 0 4px;
    border-radius:4px;
    background:var(--line);
    overflow:hidden;
}

.fortschritt-balken span {
    display:block;
    height:100%;
    background:var(--balken);
    border-radius:4px;
}

.fortschritt-aufgaben {
    list-style:none;
    margin:8px 0 0;
    padding:0;
}

.fortschritt-aufgaben li {
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 2px;
    border-bottom:1px solid var(--line);
    font-size:13px;
}

.fortschritt-aufgaben li[data-sortier] {
    cursor:grab;
}

.fortschritt-aufgaben li.sortier-davor {
    box-shadow:0 -2px 0 var(--accent);
}

.fortschritt-aufgaben li.sortier-danach {
    box-shadow:0 2px 0 var(--accent);
}

.fortschritt-titel {
    padding:0;
    text-align:left;
    color:var(--text);
}

.fortschritt-titel:hover {
    background:none;
    text-decoration:underline;
    text-underline-offset:3px;
}

/* ---- Baustein „datenbank“ (wie eine Notion-Datenbank) ---- */
.db {
    display:grid;
    gap:10px;
}

.db-leiste {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    border-bottom:1px solid var(--line);
}

.db-ansichten {
    display:flex;
    flex-wrap:wrap;
    gap:2px;
}

.db-tab {
    padding:6px 10px;
    font-size:13px;
    color:var(--muted);
    background:none;
    border-radius:6px 6px 0 0;
    border-bottom:2px solid transparent;
}

.db-tab.an {
    color:var(--text);
    border-bottom-color:var(--text);
}

.db-werkzeuge {
    display:flex;
    align-items:center;
    gap:6px;
    padding-bottom:6px;
    font-size:12px;
}

.db-suche {
    width:150px;
    padding:4px 8px;
    font:inherit;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
}

.db-einstellungen {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px 14px;
    padding:10px 12px;
    font-size:12px;
    color:var(--muted);
    background:var(--surface);
    border-radius:8px;
}

.db-einstellungen label {
    display:grid;
    gap:3px;
}

.db-einstellungen label.property-check {
    display:flex;
}

.db-einstellungen input,.db-einstellungen select,.db-spaltenmenue input,.db-spaltenmenue select,.db-spaltenmenue textarea {
    font:inherit;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:5px;
    padding:3px 6px;
}

.db-tabelle-rahmen {
    overflow-x:auto;
}

.db-tabelle {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.db-tabelle th {
    position:relative;
    text-align:left;
    font-weight:500;
    color:var(--muted);
    border-bottom:1px solid var(--line);
    white-space:nowrap;
}

.db-tabelle td {
    border-bottom:1px solid var(--line);
    padding:0;
    min-width:110px;
}

.db-tabelle td + td,.db-tabelle th + th {
    border-left:1px solid var(--line);
}

.db-spalte {
    width:100%;
    padding:6px 8px;
    text-align:left;
    color:inherit;
    background:none;
    font-size:12px;
}

.db-spaltenmenue {
    position:absolute;
    z-index:6;
    top:100%;
    left:0;
    display:grid;
    gap:8px;
    width:240px;
    padding:10px;
    font-weight:400;
    color:var(--text);
    white-space:normal;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 8px 24px #0002;
}

.db-spaltenmenue label {
    display:grid;
    gap:3px;
    font-size:12px;
    color:var(--muted);
}

.db-menue-knoepfe {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.db-neue-spalte form {
    display:flex;
    gap:4px;
    padding:3px;
}

.db-neue-spalte input,.db-neue-spalte select {
    font:inherit;
    font-size:12px;
    color:var(--text);
    background:none;
    border:none;
    width:110px;
}

.db-feld,.db-titelzelle input {
    width:100%;
    padding:6px 8px;
    font:inherit;
    color:var(--text);
    background:transparent;
    border:none;
}

.db-feld:focus,.db-titelzelle input:focus {
    outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);
    background:var(--surface);
}

.db-zelle-checkbox {
    text-align:center;
}

.db-titelzelle {
    display:flex;
    align-items:center;
}

.db-titelzelle input {
    font-weight:550;
}

.db-oeffnen {
    padding:2px 7px;
    font-size:11px;
    color:var(--muted);
    opacity:0;
}

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

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

.db-neu {
    margin-top:6px;
}

.db-board {
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:6px;
}

.db-board-spalte {
    flex:0 0 230px;
    display:grid;
    align-content:start;
    gap:6px;
    padding:8px;
    background:var(--surface);
    border-radius:8px;
}

.db-board-kopf {
    display:flex;
    justify-content:space-between;
    font-size:12.5px;
}

.db-karte,.db-galeriekarte {
    display:grid;
    gap:6px;
    padding:9px 10px;
    text-align:left;
    font-size:13px;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:7px;
    cursor:pointer;
}

.db-karte[draggable=true] {
    cursor:grab;
}

.db-board-neu {
    justify-self:start;
    font-size:12px;
    color:var(--muted);
    background:none;
}

.db-merkmale {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

.db-merkmal {
    padding:1px 7px;
    font-size:11px;
    color:var(--muted);
    background:var(--surface);
    border-radius:4px;
}

.db-liste {
    display:grid;
}

.db-listenzeile {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:8px;
    padding:8px 6px;
    text-align:left;
    font-size:13.5px;
    color:var(--text);
    background:none;
    border-bottom:1px solid var(--line);
    border-radius:0;
}

.db-galerie {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:10px;
}

.db-galeriekarte p {
    margin:0;
    font-size:12px;
    color:var(--muted);
}

.db-kalender-kopf {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.db-kalender-raster {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}

.db-wochentag {
    padding:4px 6px;
    font-size:11px;
    color:var(--muted);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.db-tag {
    position:relative;
    display:grid;
    align-content:start;
    gap:3px;
    min-height:84px;
    padding:4px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.db-tag.fremd {
    background:var(--surface);
    color:var(--muted);
}

.db-tag.heute .db-tag-nr {
    color:var(--bg);
    background:var(--danger);
    border-radius:999px;
    padding:0 5px;
}

.db-tag-nr {
    justify-self:start;
    font-size:11px;
}

.db-tag-eintrag {
    padding:2px 5px;
    text-align:left;
    font-size:11px;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.db-tag-neu {
    position:absolute;
    top:2px;
    right:2px;
    padding:0 5px;
    font-size:12px;
    color:var(--muted);
    background:none;
    opacity:0;
}

.db-tag:hover .db-tag-neu,.db-tag-neu:focus-visible {
    opacity:1;
}

@media(max-width:700px) {
    .db-tag {
        min-height:56px;
    }
    .db-suche {
        width:110px;
    }
}

/* ---- Wochenplan: Gewohnheiten zum Abhaken (Seite „Gewohnheiten“) ---- */

.day-routine.habit input[type=checkbox] {
    width:14px;
    height:14px;
    margin:2px 0;
    accent-color:var(--routine, var(--accent));
}

.day-routine.habit.done > span:last-child > span {
    text-decoration:line-through;
}

.day-routine.habit.done {
    opacity:.75;
}