/* Rahmen (Seitenleiste), Bereichsseiten mit Bausteinen, KI-Einstellungen und Jarvis.
   Farben und Grundlagen kommen aus lebensplaner.css. */

:root {
    --hover:rgba(55,53,47,.06);
    --selected:rgba(55,53,47,.08);
    --menue-schatten:rgba(15,15,15,.18);
    --cyan:#5ee7ff;
    --danger:#d44c47;
    --ok:#448361;
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme]) {
        --hover:rgba(255,255,255,.055);
        --selected:rgba(255,255,255,.08);
        --menue-schatten:rgba(0,0,0,.5);
        --danger:#ff7369;
        --ok:#6fbf8e;
    }
}

:root[data-theme="dunkel"] {
    --hover:rgba(255,255,255,.055);
    --selected:rgba(255,255,255,.08);
    --menue-schatten:rgba(0,0,0,.5);
    --danger:#ff7369;
    --ok:#6fbf8e;
}

/* ---- Rahmen ---- */

.app-shell {
    --dock:88px; /* Platz, den das Dock unten braucht (inkl. Abstand darüber) */
    min-height:100vh;
}

/* Inhalt endet über dem Dock */
.app-content {
    min-width:0;
    padding-bottom:var(--dock);
}

/* Die Seitenleiste ist eingeklappt und fährt über das Menü im Dock von links ein. */
.sidebar {
    position:fixed;
    z-index:40;
    left:0;
    top:0;
    bottom:0;
    width:min(272px,84vw);
    display:flex;
    flex-direction:column;
    gap:1px;
    padding:14px 10px 12px;
    background:var(--surface);
    border-right:1px solid var(--line);
    overflow-y:auto;
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s;
}

.menu-open .sidebar {
    transform:none;
    visibility:visible;
    transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.25);
}

.menu-open .sidebar-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:35;
    background:rgba(15,15,15,.35);
}

.sidebar-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.sidebar-close {
    width:30px;
    height:30px;
    color:var(--muted);
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:650;
    text-decoration:none;
    padding:6px 10px 14px;
}

.brand-mark,.mini-orb {
    width:18px;
    height:18px;
    border-radius:50%;
    flex-shrink:0;
    background:radial-gradient(circle at 50% 50%,#e6ffff 0,#5ee7ff 30%,#0a8fd6 62%,#06304d 100%);
    box-shadow:0 0 10px rgba(94,231,255,.55);
}

.nav-item {
    display:flex;
    align-items:center;
    gap:9px;
    padding:5px 10px;
    border-radius:6px;
    color:var(--muted);
    text-decoration:none;
    min-height:30px;
}

button.nav-item {
    width:100%;
    text-align:left;
    font:inherit;
}

.nav-item:hover {
    background:var(--hover);
    color:var(--text);
}

.nav-item.active {
    background:var(--selected);
    color:var(--text);
    font-weight:550;
}

.nav-item>span:nth-child(2) {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.nav-icon {
    width:20px;
    display:inline-flex;
    justify-content:center;
    flex-shrink:0;
}

.jarvis-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan);
}

.nav-section {
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    padding:18px 10px 6px;
}

/* Projekte im Menü wie in Claude/Codex: Kopfzeile mit Pfeil, ＋ beim Drüberfahren, Chats eingerückt */
.nav-projekt-kopf {
    position:relative;
}

.nav-projekt-kopf .nav-item {
    width:100%;
    padding-right:34px;
    border:0;
    background:none;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.nav-projekt-kopf .nav-item:hover {
    background:var(--hover);
}

.nav-chevron {
    margin-left:auto;
    font-size:10px;
    opacity:.6;
}

.nav-neu {
    position:absolute;
    right:4px;
    top:50%;
    width:24px;
    height:24px;
    margin-top:-12px;
    padding:0;
    border:0;
    border-radius:6px;
    background:none;
    color:var(--muted);
    font-size:15px;
    opacity:0;
    transition:opacity .12s;
}

.nav-projekt-kopf:hover .nav-neu,.nav-neu:focus-visible {
    opacity:1;
}

.nav-neu:hover {
    background:var(--selected);
    color:var(--text);
}

.nav-meldung {
    margin:0 6px 6px;
    padding:6px 10px;
    border-radius:6px;
    font-size:12px;
    color:var(--text);
    background:color-mix(in srgb,var(--danger) 12%,transparent);
}

/* Der Pfeil weicht dem ＋, sobald es erscheint */
.nav-projekt-kopf:hover .nav-chevron {
    visibility:hidden;
}

/* Chats im Menü flacher als die übrigen Einträge (Benedikts Wunsch, 09.11.2026: 20 px statt 30 px) – auf dem Telefon bleiben
   sie fingergerecht (.telefon .nav-item, 46 px). */
.nav-chat {
    min-height:20px;
    padding-top:0;
    padding-bottom:0;
    padding-left:30px;
    font-size:13px;
    line-height:20px;
}

.nav-chat .nav-icon {
    height:20px;
    align-items:center;
    font-size:12px;
}

.nav-leer {
    display:block;
    padding:3px 10px 6px 39px;
    font-size:12px;
    color:var(--muted);
    opacity:.7;
}

.nav-projekt.ruhend>.nav-projekt-kopf .nav-item {
    opacity:.6;
}

.nav-spacer {
    flex:1;
    min-height:20px;
}

.nav-ki {
    margin:6px 10px 0;
    font-size:11px;
    color:var(--muted);
    text-decoration:none;
}

.pulse {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 0 0 rgba(94,231,255,.6);
    animation:pulse 1.4s ease-out infinite;
    flex-shrink:0;
    display:inline-block;
}

.nav-item .pulse {
    margin-left:auto;
}

@keyframes pulse {
    0% { box-shadow:0 0 0 0 rgba(94,231,255,.6); }
    100% { box-shadow:0 0 0 9px rgba(94,231,255,0); }
}

.sidebar-backdrop {
    display:none;
}

/* Dock wie bei macOS, eine Glasleiste: links Übersicht und Jarvis (Mac-App: dazu die Programme und ＋), in der Mitte
   der Chat-Balken (außer auf Jarvis), rechts das Menü. Ein Icon wächst beim Drüberfahren, seine Nachbarn ein wenig mit. */
.dock {
    position:fixed;
    z-index:15;
    left:0;
    right:0;
    bottom:calc(10px + env(safe-area-inset-bottom));
    display:flex;
    justify-content:center;
    padding:0 16px;
    pointer-events:none;
}

.menu-open .dock {
    z-index:38;
}

/* Wächst der Text im Balken auf mehrere Zeilen, wächst die Leiste nach oben mit; die Icons bleiben unten. */
.dock-leiste {
    --glas:color-mix(in srgb,var(--bg) 55%,transparent);
    --glas-rand:color-mix(in srgb,var(--text) 12%,transparent);
    --glas-schatten:0 10px 34px rgba(15,15,15,.16),0 1px 3px rgba(15,15,15,.08);
    position:relative;
    display:flex;
    align-items:flex-end;
    gap:6px;
    min-width:0;
    max-width:100%;
    min-height:64px;
    padding:7px 8px;
    border-radius:20px;
    background:var(--glas);
    border:1px solid var(--glas-rand);
    box-shadow:var(--glas-schatten);
    backdrop-filter:blur(22px) saturate(1.7);
    -webkit-backdrop-filter:blur(22px) saturate(1.7);
    pointer-events:auto;
}

.dock-links,.dock-programme {
    display:flex;
    align-items:flex-end;
    gap:6px;
}

.dock-links {
    flex-shrink:0;
}

.dock-icon {
    position:relative;
    width:48px;
    height:48px;
    flex-shrink:0;
    padding:0;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    text-decoration:none;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--line);
    transform-origin:bottom center;
    transition:transform .16s cubic-bezier(.3,.7,.4,1.3),background .15s;
}

.dock-icon:hover {
    z-index:1;
    transform:scale(1.35) translateY(-3px);
}

.dock-icon:hover+.dock-icon,.dock-icon:has(+.dock-icon:hover) {
    transform:scale(1.15) translateY(-1px);
}

/* Programme ohne Kachel – ihr Icon ist selbst die Form */
.dock-app {
    background:none;
    border-color:transparent;
}

.dock-app .seiten-icon-bild {
    width:46px;
    height:46px;
}

/* Punkt darunter: die offene Seite bzw. ein Programm, das gerade läuft */
.dock-icon.active::after,.dock-app.laeuft::after {
    content:"";
    position:absolute;
    bottom:-6px;
    left:50%;
    width:4px;
    height:4px;
    margin-left:-2px;
    border-radius:50%;
    background:var(--text);
    opacity:.7;
}

/* Das Programm, das gerade vorn ist: heller Punkt */
.dock-app.vorn::after {
    opacity:1;
    background:var(--cyan);
    box-shadow:0 0 6px rgba(94,231,255,.8);
}

.dock-trenner {
    align-self:stretch;
    width:1px;
    margin:4px 3px;
    background:color-mix(in srgb,var(--text) 18%,transparent);
}

.dock-plus,.dock-menu {
    font-size:20px;
    background:color-mix(in srgb,var(--surface) 70%,transparent);
}

.dock-jarvis .brand-mark {
    width:24px;
    height:24px;
}

.dock-jarvis.active .brand-mark {
    box-shadow:0 0 16px rgba(94,231,255,.85);
}

.dock-jarvis .pulse {
    position:absolute;
    top:4px;
    right:4px;
}

/* Chat-Balken in der Mitte: eine breite Kachel, so hoch wie die Icons. Die Antwort öffnet sich über der ganzen Leiste. */
.dock .chat-dock {
    position:static;
    flex:0 1 520px;
    width:520px;
    min-width:180px;
    max-width:none;
    margin:0 4px;
}

.dock .chat-bar {
    --c-bg:var(--surface);
    --c-line:var(--line);
    --c-shadow:none;
    min-height:48px;
    padding:5px 5px 5px 14px;
    border-radius:12px;
}

/* Schmaler Balken: Platzhalter einzeilig mit „…“ – sonst wüchse schon das leere Feld auf mehrere Zeilen */
.dock .chat-bar textarea::placeholder {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dock .chat-answer {
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 10px);
    max-height:min(50vh,460px);
}

/* Eingeklappt: die schmale Leiste mittig über dem Dock (left/right 0 + margin auto + max-content = zentriert). */
.dock .chat-answer-zu {
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 10px);
}

@media(max-width:700px) {
    .dock {
        padding:0 10px;
    }
    .dock-leiste {
        min-height:56px;
        gap:4px;
        padding:6px;
    }
    .dock-links {
        gap:4px;
    }
    .dock-icon {
        width:42px;
        height:42px;
        font-size:20px;
        border-radius:11px;
    }
    .dock .chat-dock {
        min-width:0;
        margin:0 2px;
    }
    .dock .chat-bar {
        min-height:42px;
        padding:3px 3px 3px 12px;
        border-radius:11px;
    }
    .dock .chat-bar .send {
        width:34px;
        height:34px;
    }
    .dock .chat-bar .mini-orb {
        display:none;
    }
}

/* Auf Jarvis sieht das Dock aus wie überall (Benedikts Vorgabe, 05.11.2026); die Seite hält unten selbst Platz frei. */
.auf-jarvis .app-content {
    padding-bottom:0;
}

/* ---- Knöpfe und Formulare ---- */

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

.primary:hover {
    background:var(--text);
    opacity:.88;
}

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

/* Aktionen sind Knöpfe, Links nur Verweise (Benedikts Vorgabe, 07.11.2026, docs/UI-SPEC.md). Führt ein Knopf woandershin
   (z. B. „Konto verbinden“ → Einstellungen), bleibt er ein <a href> mit den Klassen der Knöpfe – so geht Öffnen im
   neuen Tab weiter, und er sieht trotzdem aus wie die anderen. */
a.primary,a.outline {
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:6px;
    text-decoration:none;
    line-height:inherit;
}

a.outline:hover {
    background:var(--surface);
}

a.icon-only {
    text-decoration:none;
}

/* ---- Knopf mit eigenem Menü (KnopfMenue) – statt einer Auswahlliste, wenn das Wählen etwas tut ---- */

.knopf-menue {
    display:inline-flex;
    position:relative;
    max-width:100%;
}

.knopf-menue-knopf {
    display:inline-flex;
    align-items:center;
    gap:6px;
    max-width:100%;
    white-space:nowrap;
}

.knopf-menue-beschriftung {
    overflow:hidden;
    text-overflow:ellipsis;
}

.knopf-menue-pfeil {
    font-size:.8em;
    color:var(--muted);
    transition:transform .12s;
}

.knopf-menue-knopf[aria-expanded="true"] {
    background:var(--surface);
    border-color:color-mix(in srgb,var(--text) 22%,var(--line));
}

.knopf-menue-knopf[aria-expanded="true"] .knopf-menue-pfeil {
    transform:rotate(180deg);
}

.knopf-menue-liste {
    position:fixed;
    left:0;
    top:0;
    z-index:70;
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:180px;
    max-width:min(340px,calc(100vw - 16px));
    max-height:340px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:5px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--bg);
    color:var(--text);
    font-size:13px;
    font-weight:400;
    text-align:left;
    box-shadow:0 10px 32px var(--menue-schatten);
}

.knopf-menue-punkt {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    min-height:32px;
    padding:5px 9px 5px calc(9px + var(--ebene,0) * 14px);
    border-radius:6px;
    text-align:left;
    color:inherit;
}

.knopf-menue-punkt:hover:not(:disabled),
.knopf-menue-punkt:focus-visible {
    background:var(--hover);
}

.knopf-menue-punkt:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:-2px;
}

.knopf-menue-icon {
    flex:none;
    width:18px;
    text-align:center;
}

.knopf-menue-icon:empty {
    display:none;
}

/* Lange Namen (Aufgaben) brechen um statt abgeschnitten zu werden – sonst wären zwei ähnliche nicht zu unterscheiden. */
.knopf-menue-text {
    min-width:0;
    line-height:1.3;
    overflow-wrap:anywhere;
}

.knopf-menue-gruppe {
    display:flex;
    flex-direction:column;
    gap:1px;
}

.knopf-menue-gruppe + .knopf-menue-gruppe {
    margin-top:4px;
    padding-top:4px;
    border-top:1px solid var(--line);
}

.knopf-menue-gruppe-titel,
.knopf-menue-leer {
    padding:4px 9px 2px;
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.knopf-menue-leer {
    padding:8px 9px;
    font-weight:400;
}

/* Finger: größere Ziele, wie die übrigen Menüs auf dem Handy. */
@media(pointer:coarse) {
    .knopf-menue-punkt {
        min-height:44px;
        font-size:15px;
    }
}

/* Im Netz (immer dunkel) mit seinen Farben. */
.knopf-menue-netz .knopf-menue-liste {
    background:var(--netz-karte);
    color:var(--netz-text);
    border-color:var(--netz-rand);
    box-shadow:0 10px 30px var(--netz-schatten);
}

.knopf-menue-netz .knopf-menue-punkt:hover:not(:disabled),
.knopf-menue-netz .knopf-menue-punkt:focus-visible {
    background:var(--netz-rand);
}

.knopf-menue-netz .knopf-menue-gruppe-titel,
.knopf-menue-netz .knopf-menue-leer,
.knopf-menue-netz .knopf-menue-pfeil {
    color:var(--netz-leise);
}

textarea,input:not([type]),input[type=text],input[type=password] {
    font:inherit;
    color:inherit;
}

code {
    font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;
    background:var(--surface);
    border-radius:4px;
    padding:1px 5px;
}

/* ---- Bereichsseiten ---- */

.area-heading {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
}

.area-icon {
    font-size:46px;
    line-height:1;
}

.area-title h1 {
    margin:2px 0 4px;
}

.area-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.blocks {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:34px 36px;
    margin-bottom:28px;
}

.block {
    grid-column:1/-1;
    margin:0;
    min-width:0;
}

.block.half {
    grid-column:auto;
}

.block-title {
    font-size:15px;
    margin-bottom:12px;
}

.callout.md {
    display:block;
}

.md ul {
    margin:4px 0;
    padding-left:22px;
}

.md li {
    margin:2px 0;
}

.md-h {
    font-weight:650;
    margin:10px 0 2px;
}

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

.metrics {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:12px;
}

.metric {
    border:1px solid var(--line);
    border-radius:8px;
    padding:13px 15px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.metric strong {
    font-size:24px;
    font-weight:650;
    letter-spacing:-.4px;
}

.metric strong span {
    margin-left:3px;
    font-size:14px;
    font-weight:500;
    color:var(--muted);
}

.plan-day {
    min-height:0;
}

.plan-cell {
    margin-top:12px;
}

.plan-cell>small {
    display:block;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:0 6px;
}

.plan-text {
    display:block;
    width:100%;
    text-align:left;
    padding:3px 6px;
    border-radius:4px;
    line-height:1.4;
    cursor:text;
}

button.plan-text:hover {
    background:var(--hover);
}

.plan-cell textarea {
    width:100%;
    border:1px solid var(--accent);
    border-radius:4px;
    padding:3px 6px;
    background:var(--bg);
    resize:vertical;
}

.checklist {
    display:flex;
    flex-direction:column;
}

.check-group {
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.4px;
    margin:14px 0 4px;
}

.check-group:first-child {
    margin-top:0;
}

.check-item {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:4px 6px;
    border-radius:4px;
    cursor:pointer;
}

.check-item:hover {
    background:var(--hover);
}

.check-item span {
    padding-top:2px;
}

.check-item.done span {
    color:var(--muted);
    text-decoration:line-through;
}

.check-add {
    display:flex;
    gap:6px;
    margin-top:10px;
}

.check-add input {
    flex:1;
    min-width:0;
    border:1px solid var(--line);
    border-radius:6px;
    padding:6px 10px;
    background:var(--bg);
}

.check-add button {
    border:1px solid var(--line);
}

.table-scroll {
    overflow-x:auto;
}

.area-table {
    width:100%;
    border-collapse:collapse;
}

.area-table th {
    text-align:left;
    font-weight:500;
    font-size:12.5px;
    color:var(--muted);
    padding:6px 10px;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
}

.area-table td {
    padding:8px 10px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
}

.area-cards {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:12px;
}

.area-card {
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.area-card-head {
    display:flex;
    align-items:center;
    gap:9px;
}

.area-card-icon {
    font-size:22px;
}

.area-card p {
    margin:2px 0 4px;
}

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

.html-block {
    width:100%;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--bg);
    display:block;
}

.empty pre {
    text-align:left;
    white-space:pre-wrap;
    font-size:12px;
}

.json-editor {
    margin-bottom:30px;
}

.json-editor textarea {
    width:100%;
    min-height:420px;
    font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 14px;
    background:var(--surface);
    resize:vertical;
}

.json-actions {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:8px;
}

/* ---- Chat-Balken und Antwortfenster (im Dock, auf jeder Seite außer Jarvis) ---- */

.chat-dock {
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    max-width:760px;
    margin:0 auto;
}

/* Bereichsseiten füllen mindestens die Höhe bis zum Dock */
.area-page {
    min-height:calc(100vh - var(--dock));
    display:flex;
    flex-direction:column;
}

/* Grundwerte – der Balken im Dock setzt eigene (siehe .dock .chat-bar). */
.chat-bar,.chat-answer,.chat-answer-zu {
    --c-bg:var(--bg);
    --c-line:var(--line);
    --c-text:var(--text);
    --c-muted:var(--muted);
    --c-shadow:0 8px 28px rgba(15,15,15,.1),0 1px 3px rgba(15,15,15,.06);
    --c-blur:none;
}

.chat-bar {
    display:flex;
    align-items:flex-end;
    gap:10px;
    background:var(--c-bg);
    color:var(--c-text);
    border:1px solid var(--c-line);
    border-radius:14px;
    padding:7px 7px 7px 14px;
    box-shadow:var(--c-shadow);
    backdrop-filter:var(--c-blur);
    -webkit-backdrop-filter:var(--c-blur);
    transition:border-color .15s,box-shadow .15s;
}

.chat-bar:focus-within {
    border-color:color-mix(in srgb,var(--cyan) 60%,var(--c-line));
}

.chat-bar .mini-orb {
    margin-bottom:9px;
    animation:orb-atmen 3.2s ease-in-out infinite;
}

.chat-bar textarea {
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    resize:none;
    background:transparent;
    padding:7px 0;
    max-height:220px;
    line-height:1.45;
}

.chat-bar textarea::placeholder {
    color:var(--c-muted);
}

.send,.stop {
    width:36px;
    height:36px;
    border-radius:50%;
    flex-shrink:0;
    font-weight:700;
    font-size:16px;
    padding:0;
}

.chat-bar .send {
    background:var(--c-text);
    color:var(--bg);
}

.send:disabled {
    opacity:.3;
    cursor:default;
}

/* Sprachchat: 🎤 neben Senden (SprachKnopf) – rot pulsierend, solange Jarvis zuhört; Lautsprecher, solange er vorliest. */
.sprache-knopf {
    width:36px;
    height:36px;
    border-radius:50%;
    flex-shrink:0;
    padding:0;
    display:grid;
    place-items:center;
    background:transparent;
    color:var(--c-muted,var(--muted));
    border:0;
}
.sprache-knopf svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.sprache-knopf:hover:not(:disabled) {
    color:var(--c-text,var(--text));
    background:color-mix(in srgb,currentColor 10%,transparent);
}
.sprache-knopf:disabled {
    opacity:.3;
    cursor:default;
}
.sprache-knopf.hoert {
    color:#fff;
    background:#e5484d;
    animation:sprache-hoert 1.4s ease-in-out infinite;
}
.sprache-knopf.spricht {
    color:var(--cyan);
}
.sprache-knopf.spricht .welle {
    animation:sprache-welle 1.2s ease-in-out infinite;
}
.sprache-knopf.laedt {
    opacity:.6;
    animation:sprache-welle 1.2s ease-in-out infinite;
}
@keyframes sprache-hoert {
    0%,100% { box-shadow:0 0 0 0 rgba(229,72,77,.45); }
    50% { box-shadow:0 0 0 7px rgba(229,72,77,0); }
}
@keyframes sprache-welle {
    0%,100% { opacity:1; }
    50% { opacity:.35; }
}
@media (prefers-reduced-motion:reduce) {
    .sprache-knopf.hoert,.sprache-knopf.spricht .welle,.sprache-knopf.laedt { animation:none; }
}
.dock .chat-bar .sprache-knopf {
    width:38px;
    height:38px;
}
@media(max-width:700px) {
    .dock .chat-bar .sprache-knopf {
        width:34px;
        height:34px;
    }
}

.chat-answer {
    background:var(--c-bg);
    color:var(--c-text);
    border:1px solid var(--c-line);
    border-radius:12px;
    padding:10px 14px 12px;
    box-shadow:var(--c-shadow);
    backdrop-filter:var(--c-blur);
    -webkit-backdrop-filter:var(--c-blur);
    max-height:42vh;
    overflow:auto;
    animation:chat-auf .22s ease-out;
}

@keyframes chat-auf {
    from { opacity:0; transform:translateY(8px) scale(.99); }
}

.chat-answer.error {
    border-color:color-mix(in srgb,var(--danger) 45%,transparent);
}

.chat-answer-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:4px;
}

.chat-answer-head .ki-label {
    font-size:11px;
    font-weight:600;
    letter-spacing:.3px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--c-muted);
}

.chat-answer-head .mini-orb {
    width:10px;
    height:10px;
}

.chat-answer-action {
    font-size:12px;
    color:var(--c-muted);
    padding:2px 8px;
}

.chat-answer-knoepfe {
    display:inline-flex;
    align-items:center;
    gap:2px;
    flex-shrink:0;
}

/* Pfeil zum Ein- und Aufklappen des Chats (Antwortfenster, Jarvis-Seite) – als SVG, ▾/▴ sind in der Systemschrift
   kaum mehr als ein Punkt. */
.klapp-pfeil {
    width:12px;
    height:12px;
    flex-shrink:0;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.chat-answer-action.einklappen {
    display:inline-flex;
    align-items:center;
    padding:4px 7px;
}

/* Eingeklappte Antwort: nur eine schmale Leiste – Klick, Tippen, Senden oder die Antwort auf deine Frage klappen auf. */
.chat-answer-zu {
    display:flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    min-width:0;
    margin:0 auto;
    padding:6px 14px 6px 11px;
    border:1px solid var(--c-line);
    border-radius:999px;
    background:var(--c-bg);
    color:var(--c-muted);
    box-shadow:var(--c-shadow);
    backdrop-filter:var(--c-blur);
    -webkit-backdrop-filter:var(--c-blur);
    font-size:12.5px;
    line-height:1.3;
    animation:chat-auf .18s ease-out;
}

.chat-answer-zu:hover,.chat-answer-zu:focus-visible {
    background:var(--c-bg);
    color:var(--c-text);
    border-color:color-mix(in srgb,var(--cyan) 55%,var(--c-line));
}

.chat-answer-zu.error {
    border-color:color-mix(in srgb,var(--danger) 45%,transparent);
}

.chat-answer-zu .mini-orb {
    width:10px;
    height:10px;
    flex-shrink:0;
}

.chat-answer-zu .ki-label {
    font-weight:600;
    letter-spacing:.3px;
    color:var(--c-text);
}

.chat-answer-zu-text {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chat-answer-zu .klapp-pfeil {
    margin-left:-2px;
}

.chat-question {
    margin:0 0 6px;
    color:var(--c-muted);
    font-size:13px;
}

.chat-question::before {
    content:"Du · ";
    font-weight:600;
}

.chat-pending {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--c-muted);
}

.chat-answer .badge {
    background:color-mix(in srgb,var(--c-text) 8%,transparent);
    color:var(--c-muted);
}

@keyframes orb-atmen {
    50% { box-shadow:0 0 16px rgba(94,231,255,.85); transform:scale(1.06); }
}

/* ---- Einstellungen ---- */

.settings-page {
    max-width:880px;
}

.settings-page section {
    margin-bottom:30px;
}

.settings-page h2 {
    margin-bottom:12px;
}

.settings-page .muted {
    margin:12px 0;
}

.choice-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.choice,.segmented label {
    position:relative;
    cursor:pointer;
}

.choice input,.segmented input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.choice {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 16px;
}

.choice:hover {
    background:var(--hover);
}

.choice.selected {
    border-color:var(--text);
    box-shadow:inset 0 0 0 1px var(--text);
}

.choice:has(input:focus-visible),.segmented label:has(input:focus-visible) {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.choice strong,.choice small {
    display:block;
}

.choice small {
    color:var(--muted);
}

.choice-logo {
    width:30px;
    height:30px;
    border-radius:8px;
    flex-shrink:0;
}

.choice-logo.claude {
    background:linear-gradient(135deg,#e8a27c,#c76a45);
}

.choice-logo.codex {
    background:linear-gradient(135deg,#6b7280,#1f2937);
}

.provider {
    border:1px solid var(--line);
    border-radius:10px;
    padding:18px 20px 20px;
}

.provider .section-heading {
    margin-bottom:12px;
}

/* iPhone-App: Jarvis über die Mac-App oder auf diesem Gerät (GeraetKiEinstellungen). */
.geraet-ki {
    display:grid;
    gap:14px;
}

.geraet-ki-app {
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 16px 16px;
}

.geraet-ki-app h4 {
    margin:0;
    font-size:15px;
}

.geraet-ki-schritte {
    margin:10px 0 12px;
    padding-left:20px;
    display:grid;
    gap:6px;
    line-height:1.45;
}

.segmented {
    display:inline-flex;
    flex-wrap:wrap;
    gap:3px;
    padding:3px;
    border-radius:8px;
    background:var(--surface);
}

.segmented label {
    padding:6px 12px;
    border-radius:6px;
    color:var(--muted);
}

.segmented label small {
    margin-left:4px;
}

.segmented label.selected {
    background:var(--bg);
    color:var(--text);
    box-shadow:0 1px 3px rgba(15,15,15,.12);
}

.fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.fields label span {
    display:block;
    font-size:12.5px;
    color:var(--muted);
    margin-bottom:4px;
}

.fields input {
    width:100%;
    border:1px solid var(--line);
    border-radius:6px;
    padding:7px 10px;
    background:var(--bg);
}

.test-row {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:14px;
}

.test-result {
    font-size:13px;
    color:var(--muted);
    overflow-wrap:anywhere;
}

.test-result.ok {
    color:var(--ok);
}

.test-result.fail {
    color:var(--danger);
}

.toggle {
    display:flex;
    gap:10px;
    align-items:flex-start;
    cursor:pointer;
}

.toggle small {
    display:block;
    color:var(--muted);
}

.save-row {
    display:flex;
    align-items:center;
    gap:14px;
}

/* ---- Seiten gestalten (Bearbeiten-Modus) ---- */

.icon-picker {
    position:relative;
}

.icon-button {
    font-size:46px;
    line-height:1;
    padding:4px;
    border-radius:10px;
}

.icon-button:hover {
    background:var(--hover);
}

.icon-menu {
    position:absolute;
    z-index:20;
    top:calc(100% + 6px);
    left:0;
    width:min(340px,86vw);
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:2px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--bg);
    box-shadow:0 12px 36px rgba(15,15,15,.14);
    animation:chat-auf .16s ease-out;
}

.icon-menu button {
    font-size:20px;
    padding:5px 0;
    border-radius:6px;
}

.icon-menu button:hover {
    background:var(--hover);
}

.icon-menu button[aria-selected=true] {
    background:var(--selected);
}

.icon-menu input {
    grid-column:1/-1;
    margin-top:6px;
}

input.title-input,input.desc-input {
    display:block;
    width:100%;
    border:0;
    padding:0;
    background:transparent;
    color:var(--text);
    border-radius:4px;
}

input.title-input {
    font-size:36px;
    font-weight:700;
    letter-spacing:-1.3px;
    line-height:1.3;
    margin:2px 0 4px;
}

input.desc-input {
    color:var(--muted);
    font-size:15px;
}

.title-input:hover,.desc-input:hover {
    background:var(--hover);
}

.title-input:focus,.desc-input:focus,.block-title-input:focus {
    outline:0;
    background:transparent;
}

.area-page.editing .block {
    border-radius:8px;
    outline:1px dashed color-mix(in srgb,var(--text) 16%,transparent);
    outline-offset:10px;
}

.block-tools {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.block-kind {
    font-size:10.5px;
    font-weight:650;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--muted);
}

input.block-title-input {
    flex:1;
    min-width:140px;
    border:0;
    border-bottom:1px solid transparent;
    background:transparent;
    padding:3px 0;
    font-size:15px;
    font-weight:650;
    color:var(--text);
}

.block-title-input:hover {
    border-bottom-color:var(--line);
}

.tool-group {
    display:inline-flex;
    align-items:center;
    gap:2px;
    margin-left:auto;
}

.icon-only {
    width:28px;
    height:28px;
    padding:0;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    flex-shrink:0;
}

.icon-only:hover {
    background:var(--hover);
    color:var(--text);
}

.icon-only:disabled {
    opacity:.3;
    cursor:default;
}

.outline.small {
    padding:3px 9px;
    font-size:12px;
}

.block-add {
    grid-column:1/-1;
    width:100%;
    text-align:left;
    color:var(--muted);
    padding:10px 14px;
    border:1px dashed var(--line);
    border-radius:8px;
}

.block-add:hover {
    background:var(--hover);
    color:var(--text);
}

.block-menu {
    grid-column:1/-1;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--bg);
    box-shadow:0 12px 36px rgba(15,15,15,.12);
    animation:chat-auf .18s ease-out;
}

.block-menu-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 6px 8px;
}

.block-menu-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:4px;
}

.block-option {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    border-radius:8px;
    text-align:left;
}

.block-option:hover,.block-option:focus-visible {
    background:var(--hover);
}

.block-option-icon {
    width:38px;
    height:38px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--bg);
    font-size:17px;
}

.block-option strong,.block-option small {
    display:block;
}

.block-option small {
    color:var(--muted);
    font-size:12px;
}

.edit-input,.md-input {
    width:100%;
    min-width:0;
    border:1px solid var(--line);
    border-radius:6px;
    padding:6px 9px;
    background:var(--bg);
    color:var(--text);
}

.edit-input:focus,.md-input:focus {
    outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
    outline-offset:-1px;
    border-color:transparent;
}

.edit-input.small {
    font-size:12.5px;
}

.edit-input.strong {
    font-weight:650;
}

.edit-input.narrow {
    width:110px;
}

.edit-input.code,.md-input {
    font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
    resize:vertical;
}

.md-input {
    padding:10px 12px;
    border-radius:8px;
}

.edit-text.callout {
    display:block;
    padding:10px;
}

.edit-rows {
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
}

.edit-row {
    width:100%;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr 28px;
    gap:6px;
    align-items:center;
}

.edit-row.head span {
    font-size:11px;
    color:var(--muted);
}

.edit-row.check-edit {
    grid-template-columns:auto 2fr 1fr 28px;
    margin-bottom:6px;
}

.edit-chips {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-bottom:10px;
}

.edit-chip {
    display:inline-flex;
    align-items:center;
    gap:2px;
}

.edit-chip .edit-input {
    width:130px;
}

.area-card.editing {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.area-card.editing .area-card-head {
    display:flex;
    gap:6px;
}

.icon-input {
    width:48px;
    flex:none;
    text-align:center;
}

.add-card {
    min-height:120px;
    border-style:dashed;
    color:var(--muted);
}

.area-table.editing th,.area-table.editing td {
    padding:4px;
}

.cell-edit {
    display:flex;
    gap:2px;
}

.add-col {
    width:34px;
}

.edit-html {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:10px;
}

.setting-row {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.setting-row>span:first-child {
    width:120px;
    flex-shrink:0;
    font-size:12.5px;
    color:var(--muted);
}

.setting-row .edit-input {
    flex:1;
    width:auto;
}

.segmented.small label {
    padding:4px 10px;
    font-size:12.5px;
}

.chat-settings {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:12px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
}

.chat-settings-head {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 8px;
}

.chat-settings-head strong {
    white-space:nowrap;
}

.chat-settings-head small {
    margin-left:auto;
}

/* ---- Einstellungen: Darstellung und Seiten ---- */

.settings-page h3 {
    font-size:15px;
    margin:0 0 12px;
}

.settings-group {
    border-top:1px solid var(--line);
    padding-top:26px;
    margin-top:8px;
}

.settings-group-head {
    margin-bottom:18px;
}

.settings-group-head h2 {
    font-size:22px;
    margin:0 0 4px;
}

.theme-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.theme-choice {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    cursor:pointer;
}

.theme-choice:hover {
    background:var(--hover);
}

.theme-choice input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.theme-choice.selected {
    border-color:var(--text);
    box-shadow:inset 0 0 0 1px var(--text);
}

.theme-choice:has(input:focus-visible) {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.theme-choice strong,.theme-choice small {
    display:block;
}

.theme-choice small {
    color:var(--muted);
    font-size:12px;
}

.theme-preview {
    display:grid;
    grid-template-columns:28% 1fr;
    grid-template-rows:1fr 1fr;
    gap:5px;
    height:74px;
    padding:7px;
    border-radius:8px;
    border:1px solid var(--line);
}

.theme-preview span {
    border-radius:4px;
}

.theme-preview span:first-child {
    grid-row:1/-1;
}

.theme-hell .theme-preview {
    background:#fff;
}

.theme-hell .theme-preview span {
    background:#f1f1ef;
}

.theme-dunkel .theme-preview {
    background:#191919;
}

.theme-dunkel .theme-preview span {
    background:#2a2a2a;
}

.theme-system .theme-preview {
    background:linear-gradient(135deg,#fff 50%,#191919 50%);
}

.theme-system .theme-preview span {
    background:rgba(128,128,128,.28);
}

/* Einstellungen → Dock (nur Mac-App): kleiner Bildschirm mit Leiste (aufgeklappt) oder nur dem Rand, an dem sie kommt. */
.dock-vorschau {
    display:flex;
    gap:6px;
    height:74px;
    padding:7px;
    border-radius:8px;
    border:1px solid var(--line);
}

.dock-vorschau-schirm {
    position:relative;
    flex:1;
    border-radius:4px;
    background:var(--hover);
}

.dock-vorschau-schirm.vollbild {
    background:var(--selected);
    box-shadow:inset 0 0 0 1px var(--line);
}

.dock-vorschau-leiste {
    position:absolute;
    left:16%;
    right:16%;
    bottom:5px;
    height:9px;
    border-radius:4px;
    background:var(--text);
    opacity:.75;
}

.dock-vorschau-rand {
    position:absolute;
    left:16%;
    right:16%;
    bottom:3px;
    border-top:2px dashed var(--muted);
}

.page-list {
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}

.page-row {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    border-top:1px solid var(--line);
}

.page-row:first-child {
    border-top:0;
}

.page-row-title {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
    text-decoration:none;
}

.page-row-title small {
    margin-left:6px;
    font-size:12px;
    color:var(--muted);
}

.page-row.hidden-page .page-row-title,.page-row.hidden-page .nav-icon {
    opacity:.45;
}

.switch {
    position:relative;
    width:36px;
    height:20px;
    flex-shrink:0;
    cursor:pointer;
}

.switch input {
    position:absolute;
    inset:0;
    margin:0;
    opacity:0;
    cursor:pointer;
}

.switch span {
    position:absolute;
    inset:0;
    border-radius:20px;
    background:color-mix(in srgb,var(--text) 22%,transparent);
    transition:background .15s;
    pointer-events:none;
}

.switch span::after {
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.25);
    transition:transform .15s;
}

.switch input:checked+span {
    background:var(--accent);
}

.switch input:checked+span::after {
    transform:translateX(16px);
}

.switch input:focus-visible+span {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* ---- Gewohnheiten (Habit-Tracker) ---- */

.habits-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px 20px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.habits-stats {
    display:flex;
    gap:22px;
}

.habits-stats small {
    display:block;
    font-size:11.5px;
    color:var(--muted);
}

.habits-stats strong {
    font-size:22px;
    letter-spacing:-.4px;
}

.habit-grid {
    display:flex;
    flex-direction:column;
    gap:2px;
}

.habit-row {
    display:grid;
    grid-template-columns:minmax(130px,1.6fr) repeat(7,minmax(32px,1fr));
    align-items:center;
    gap:6px;
    padding:6px 4px;
    border-radius:8px;
}

.habit-row:not(.habit-days):hover {
    background:var(--hover);
}

.habit-days span {
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:11.5px;
    color:var(--muted);
}

.habit-days span small {
    font-size:13px;
    color:var(--text);
}

.habit-days span.today small {
    font-weight:700;
}

.habit-name {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.habit-icon {
    font-size:20px;
    width:26px;
    text-align:center;
    flex-shrink:0;
}

.habit-text {
    min-width:0;
}

.habit-text strong {
    display:block;
    font-weight:550;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.habit-text small {
    color:var(--muted);
    font-size:12px;
}

.habit-text small.goal-met {
    color:var(--ok);
}

.streak {
    margin-left:8px;
    color:#c97a2c;
}

.habit-cell {
    display:inline-grid;
    place-items:center;
    justify-self:center;
    width:30px;
    height:30px;
    padding:0;
    border-radius:50%;
    border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);
    color:#fff;
    font-size:14px;
    font-weight:700;
    transition:background .15s,border-color .15s,transform .1s;
}

.habit-cell:hover:not(:disabled) {
    border-color:var(--accent);
}

.habit-cell:active:not(:disabled) {
    transform:scale(.9);
}

.habit-cell.done {
    background:var(--accent);
    border-color:var(--accent);
}

.habit-cell:disabled {
    opacity:.55;
    cursor:default;
}

/* ---- Trainingsplan ---- */

.training-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.split-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:3px;
    border-radius:10px;
    background:var(--surface);
}

.split-tab {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:8px;
    color:var(--muted);
    font-weight:550;
}

.split-tab.selected {
    background:var(--bg);
    color:var(--text);
    box-shadow:0 1px 3px rgba(15,15,15,.12);
}

.split-tab.add {
    font-weight:400;
}

.training-progress {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.training-progress progress {
    flex:1;
    max-width:260px;
}

.training-day-edit {
    margin-bottom:14px;
}

.exercise-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:14px;
}

.exercise-card {
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    background:var(--bg);
    transition:border-color .15s,opacity .15s;
}

.exercise-card.done {
    border-color:color-mix(in srgb,var(--ok) 55%,var(--line));
}

.exercise-card.done .exercise-anim {
    opacity:.55;
}

/* Animation: Start- und Endbild der Übung überblenden */
.exercise-anim {
    position:relative;
    aspect-ratio:3/2;
    background:#fff;
    overflow:hidden;
}

.exercise-anim .frame {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
}

.exercise-anim .frame-b {
    animation:uebung 2.6s ease-in-out infinite;
}

@keyframes uebung {
    0%,30% { opacity:0; }
    50%,80% { opacity:1; }
    100% { opacity:0; }
}

@media(prefers-reduced-motion:reduce) {
    .exercise-anim .frame-b {
        animation:none;
        opacity:0;
    }
}

.exercise-placeholder {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    background:var(--surface);
}

.exercise-body {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px 14px 14px;
}

.exercise-title {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.exercise-title strong {
    font-size:15px;
}

.exercise-check {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    cursor:pointer;
}

.exercise-card.done .exercise-check {
    color:var(--ok);
    font-weight:600;
}

.exercise-meta {
    font-size:14px;
    font-weight:550;
}

.muted-badge {
    opacity:.75;
}

.exercise-howto summary {
    cursor:pointer;
    font-size:12.5px;
    color:var(--muted);
}

.exercise-howto ol {
    margin:8px 0;
    padding-left:20px;
    font-size:13px;
}

.exercise-edit {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.exercise-edit-row {
    display:grid;
    grid-template-columns:70px 1fr 1fr;
    gap:6px;
}

.exercise-edit-row small {
    display:block;
    font-size:11px;
    color:var(--muted);
}

/* Eigene Übung: Start- und Endbild wählen oder generieren */
.exercise-bilder {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.exercise-bild-slot {
    display:flex;
    align-items:flex-start;
    gap:2px;
}

.exercise-bild-slot label {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    aspect-ratio:3/2;
    border:1px dashed var(--line);
    border-radius:8px;
    background:#fff;
    overflow:hidden;
    font-size:12px;
    color:var(--muted);
    cursor:pointer;
}

.exercise-bild-slot label:hover {
    border-color:var(--muted);
}

.exercise-bild-slot img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.exercise-bild-slot input[type=file] {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.exercise-bild-meldung {
    color:var(--danger);
}

.exercise-search {
    margin-top:16px;
    padding:14px;
    border:1px dashed var(--line);
    border-radius:12px;
}

.exercise-search-head {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.exercise-search-head .edit-input {
    width:auto;
    flex:1;
    min-width:160px;
}

.exercise-search-head select.edit-input {
    flex:0 1 180px;
}

.exercise-results {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:6px;
    margin-bottom:8px;
}

.exercise-result {
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px;
    border-radius:8px;
    text-align:left;
}

.exercise-result:hover {
    background:var(--hover);
}

.exercise-result img {
    width:64px;
    height:43px;
    object-fit:cover;
    border-radius:6px;
    background:#fff;
    flex-shrink:0;
}

.exercise-result strong,.exercise-result small {
    display:block;
}

.exercise-result small {
    font-size:11.5px;
    color:var(--muted);
}

/* ---- Notizen (Obsidian-Vault) ---- */

.notes-layout {
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:28px;
    align-items:start;
    margin-bottom:28px;
}

.notes-nav {
    position:sticky;
    top:16px;
    max-height:calc(100vh - var(--dock) - 32px);
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    border-radius:12px;
    background:var(--surface);
}

.notes-tree,.notes-results,.notes-recent {
    display:flex;
    flex-direction:column;
    gap:1px;
}

.tree-folder,.note-link {
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    min-width:0;
    padding:4px 8px;
    border-radius:6px;
    color:var(--text);
    text-align:left;
    text-decoration:none;
    font-size:13.5px;
}

.note-link {
    justify-content:space-between;
}

.note-link span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.note-link small {
    flex-shrink:0;
    color:var(--muted);
    font-size:11.5px;
}

.tree-folder {
    color:var(--muted);
    font-weight:550;
}

.tree-folder .chevron {
    width:12px;
}

.tree-folder:hover,.note-link:hover {
    background:var(--hover);
}

.note-link.active {
    background:var(--selected);
    font-weight:600;
}

.note-view {
    min-width:0;
    max-width:820px;
}

.note-back {
    display:none;
    margin-bottom:10px;
    color:var(--muted);
    text-decoration:none;
}

.note-path {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    font-size:12px;
    color:var(--muted);
}

.note-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin:4px 0 14px;
}

.note-title {
    font-size:30px;
    letter-spacing:-.8px;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.note-props {
    display:grid;
    grid-template-columns:minmax(110px,max-content) minmax(0,1fr);
    gap:4px 18px;
    margin:0 0 20px;
    padding:12px 14px;
    border-radius:10px;
    background:var(--surface);
    font-size:13.5px;
}

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

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

.note-body {
    line-height:1.65;
}

.note-body h2,.note-body h3,.note-body h4,.note-body h5 {
    margin:22px 0 8px;
    line-height:1.3;
}

.note-body h2 {
    font-size:22px;
}

.note-body h3 {
    font-size:18px;
}

.note-body h4,.note-body h5 {
    font-size:15px;
}

.note-body p {
    margin:0 0 10px;
}

.note-body .note-list {
    margin:4px 0 12px;
    padding-left:22px;
}

.note-body li.task {
    list-style:none;
    margin-left:-20px;
}

.note-body li.task input {
    margin-right:8px;
}

.note-body li.task .done {
    color:var(--muted);
    text-decoration:line-through;
}

.note-body blockquote {
    margin:10px 0;
    padding:2px 14px;
    border-left:3px solid var(--line);
    color:var(--muted);
}

.note-callout {
    margin:12px 0;
    padding:10px 14px;
    border-radius:8px;
    border-left:3px solid var(--accent);
    background:color-mix(in srgb,var(--accent) 10%,var(--bg));
}

.note-callout-title {
    font-weight:650;
    margin-bottom:4px;
}

.callout-warning,.callout-caution,.callout-attention {
    border-left-color:#d9822b;
    background:color-mix(in srgb,#d9822b 10%,var(--bg));
}

.callout-danger,.callout-error,.callout-bug {
    border-left-color:var(--danger);
    background:color-mix(in srgb,var(--danger) 9%,var(--bg));
}

.callout-tip,.callout-success,.callout-check,.callout-done {
    border-left-color:var(--ok);
    background:color-mix(in srgb,var(--ok) 10%,var(--bg));
}

.note-body pre {
    margin:10px 0;
    padding:12px 14px;
    border-radius:8px;
    background:var(--surface);
    overflow-x:auto;
}

.note-body pre code {
    background:none;
    padding:0;
}

.note-body hr {
    border:0;
    border-top:1px solid var(--line);
    margin:18px 0;
}

.note-body mark {
    background:color-mix(in srgb,var(--gold) 55%,transparent);
    color:inherit;
    border-radius:3px;
}

.wikilink {
    color:var(--accent);
    font-weight:550;
    text-decoration:none;
}

.wikilink:hover {
    text-decoration:underline;
}

.wikilink.missing {
    color:var(--muted);
    border-bottom:1px dashed var(--muted);
}

.note-tag {
    padding:1px 6px;
    border-radius:10px;
    font-size:.9em;
    background:color-mix(in srgb,var(--accent) 14%,transparent);
    color:var(--accent);
}

.note-embed {
    color:var(--muted);
}

.note-backlinks {
    margin-top:28px;
    padding-top:14px;
    border-top:1px solid var(--line);
}

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

.note-changed {
    display:block;
    margin-top:18px;
    font-size:12px;
}

/* Notizen bleiben unten am Chat-Balken: Seite füllt die Höhe */
.notes-page {
    min-height:calc(100vh - var(--dock));
    display:flex;
    flex-direction:column;
}

/* ---- Kalender ---- */

.calendar-page,.mail-page {
    min-height:calc(100vh - var(--dock));
    display:flex;
    flex-direction:column;
}

.cal-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}

.cal-heading h1 {
    text-transform:none;
}

.cal-controls {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.cal-legend {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin:4px 0 16px;
}

.cal-chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:4px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:12.5px;
    color:var(--text);
}

.cal-chip.off {
    opacity:.45;
}

.cal-chip.off .cal-dot {
    background:transparent !important;
    box-shadow:inset 0 0 0 1.5px var(--muted);
}

.cal-chip.selected {
    background:var(--selected);
    border-color:color-mix(in srgb,var(--text) 30%,var(--line));
    font-weight:600;
}

.cal-chip .count {
    font-size:11px;
    color:var(--muted);
}

.cal-dot {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    flex-shrink:0;
}

/* Monat */
.cal-month {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
    margin-bottom:24px;
}

.cal-month-head {
    padding:6px 8px;
    font-size:11.5px;
    color:var(--muted);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--surface);
}

.cal-cell {
    min-height:112px;
    padding:4px 4px 6px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.cal-cell.other {
    background:color-mix(in srgb,var(--surface) 60%,transparent);
}

.cal-cell.other .cal-daynum {
    color:var(--muted);
}

.cal-cell-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.cal-daynum {
    width:26px;
    height:26px;
    padding:0;
    border-radius:50%;
    font-size:13px;
    font-weight:550;
}

.cal-cell.today .cal-daynum {
    background:#e0565b;
    color:#fff;
}

.cal-add {
    opacity:0;
    width:22px;
    height:22px;
    padding:0;
    border-radius:6px;
    color:var(--muted);
}

.cal-cell:hover .cal-add,.cal-add:focus-visible {
    opacity:1;
}

.cal-pill {
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    padding:2px 6px;
    border-radius:5px;
    font-size:12px;
    text-align:left;
    color:var(--text);
    background:color-mix(in srgb,var(--farbe) 14%,transparent);
    border-left:3px solid var(--farbe);
}

.cal-pill span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cal-pill small {
    flex-shrink:0;
    color:var(--muted);
    font-size:11px;
}

.cal-pill.allday {
    background:color-mix(in srgb,var(--farbe) 26%,transparent);
    font-weight:550;
}

.cal-more {
    font-size:11.5px;
    color:var(--muted);
    text-align:left;
    padding:1px 6px;
}

.cal-dots {
    display:none;
}

/* Woche / Tag */
.cal-week {
    --stunde:48px;
    --minute:calc(var(--stunde) / 60);
    display:grid;
    grid-template-columns:52px repeat(var(--tage),minmax(96px,1fr));
    grid-template-rows:auto auto calc(var(--stunden) * var(--stunde));
    margin-bottom:24px;
    overflow-x:auto;
}

.cal-week-corner {
    border-bottom:1px solid var(--line);
}

.cal-week-head {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:6px 0;
    border-bottom:1px solid var(--line);
    border-radius:0;
}

.cal-week-head small {
    font-size:11.5px;
    color:var(--muted);
}

.cal-week-head strong {
    font-size:20px;
    font-weight:600;
}

.cal-week-head.today strong {
    color:#e0565b;
}

.cal-allday-label {
    font-size:10.5px;
    color:var(--muted);
    padding:6px 4px;
    border-bottom:1px solid var(--line);
}

.cal-allday {
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:3px 2px;
    border-bottom:1px solid var(--line);
    border-left:1px solid var(--line);
    min-width:0;
}

.cal-hours {
    display:flex;
    flex-direction:column;
}

.cal-hours span {
    height:var(--stunde);
    font-size:10.5px;
    color:var(--muted);
    text-align:right;
    padding-right:6px;
    transform:translateY(-7px);
}

.cal-day-col {
    position:relative;
    border-left:1px solid var(--line);
    background:repeating-linear-gradient(to bottom,var(--line) 0,var(--line) 1px,transparent 1px,transparent var(--stunde));
}

.cal-day-col.today {
    background-color:color-mix(in srgb,#e0565b 4%,transparent);
}

.cal-event {
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    overflow:hidden;
    padding:3px 6px;
    border-radius:6px;
    border:1px solid var(--bg);
    border-left:3px solid var(--farbe);
    background:color-mix(in srgb,var(--farbe) 18%,var(--bg));
    color:var(--text);
    font-size:12px;
    line-height:1.3;
    text-align:left;
}

.cal-event:hover {
    background:color-mix(in srgb,var(--farbe) 28%,var(--bg));
    z-index:2;
}

.cal-event strong {
    flex:none;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
}

.cal-event small {
    min-height:0;
    overflow:hidden;
    color:var(--muted);
    font-size:11px;
}

.cal-now {
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:#e0565b;
    z-index:3;
}

.cal-now::before {
    content:"";
    position:absolute;
    left:-5px;
    top:-4px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#e0565b;
}

.cal-empty {
    margin-top:-10px;
}

.cal-detail h2 {
    margin-bottom:12px;
}

.cal-form {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.cal-form label small {
    display:block;
    font-size:11.5px;
    color:var(--muted);
    margin-bottom:3px;
}

.cal-form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.cal-form input.title-input {
    font-size:24px;
}

/* ---- E-Mail ---- */

.mail-list {
    display:flex;
    flex-direction:column;
    border-top:1px solid var(--line);
    margin-bottom:24px;
}

.mail-row {
    display:grid;
    grid-template-columns:12px minmax(120px,220px) minmax(0,1fr) auto auto;
    align-items:center;
    gap:12px;
    padding:9px 6px;
    border-bottom:1px solid var(--line);
    font-size:13.5px;
}

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

.mail-dot {
    width:8px;
    height:8px;
    border-radius:50%;
}

.mail-row.unread .mail-dot {
    background:#3f8ae0;
}

.mail-row.unread .mail-from,.mail-row.unread .mail-subject {
    font-weight:650;
}

.mail-from,.mail-subject {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.mail-date {
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
}

/* ---- Verbindungen (Einstellungen) ---- */

.conn-add {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:12px 0;
}

.conn-form {
    margin:12px 0;
}

.conn-form .fields .wide {
    grid-column:1/-1;
}

.conn-form input[type=color] {
    width:56px;
    height:34px;
    padding:2px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--bg);
}

.conn-abo code {
    word-break:break-all;
}

/* ---- Jarvis (immer dunkel, wie das Netz) ---- */

.jarvis {
    --j-text:#d3eef8;
    --j-muted:rgba(176,216,232,.58);
    --j-line:rgba(94,231,255,.16);
    --j-card:rgba(7,22,34,.66);
    position:relative;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:var(--j-text);
    color-scheme:dark;
    background:
        radial-gradient(ellipse 60% 45% at 50% 28%,rgba(16,74,110,.55),transparent 70%),
        radial-gradient(ellipse 90% 70% at 50% 110%,rgba(4,40,64,.5),transparent 70%),
        #03070c;
}

.jarvis::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(94,231,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(94,231,255,.035) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%);
}

.jarvis>* {
    position:relative;
}

.jarvis a {
    color:var(--cyan);
}

.jarvis button:hover {
    background:rgba(94,231,255,.08);
}

.jarvis-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 28px 0;
}

.jarvis-top h1 {
    font-size:13px;
    font-weight:650;
    letter-spacing:.42em;
    text-transform:uppercase;
    color:var(--cyan);
    margin:0 0 2px;
    line-height:1.4;
}

.jarvis-sub {
    font-size:12px;
    color:var(--j-muted);
}

.jarvis-tools {
    display:flex;
    gap:8px;
    align-items:center;
}

.jarvis-tools>* {
    font-size:12.5px;
    border:1px solid var(--j-line);
    border-radius:999px;
    padding:5px 12px;
    text-decoration:none;
    color:var(--j-text)!important;
}

.jarvis-stage {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,min(42vh,400px)) minmax(0,1fr);
    align-items:center;
    gap:28px;
    padding:6px 28px 0;
    height:clamp(250px,46vh,470px);
    flex-shrink:0;
}

.jarvis-core {
    position:relative;
    width:100%;
    aspect-ratio:1;
    max-height:100%;
    justify-self:center;
}

.jarvis-core canvas {
    width:100%;
    height:100%;
    display:block;
}

.jarvis-state {
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    text-align:center;
    font-size:10.5px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--j-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.jarvis-cards {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
    height:100%;
    min-width:0;
}

.jarvis-cards.links {
    align-items:flex-end;
    --dx:16px;
}

.jarvis-cards.rechts {
    align-items:flex-start;
    --dx:-16px;
}

.jarvis-cards.reihe {
    display:none;
    --dx:0px;
}

.jcard {
    position:relative;
    width:min(100%,310px);
    background:var(--j-card);
    border:1px solid var(--j-line);
    border-radius:10px;
    padding:11px 14px 12px;
    backdrop-filter:blur(6px);
    box-shadow:0 10px 32px rgba(0,0,0,.35);
    animation:jcard-ein .55s cubic-bezier(.2,.75,.2,1) both;
    animation-delay:calc(var(--i) * 70ms);
}

/* HUD-Ecken */
.jcard::before,.jcard::after {
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    border:solid rgba(94,231,255,.6);
}

.jcard::before {
    top:-1px;
    left:-1px;
    border-width:1px 0 0 1px;
    border-top-left-radius:10px;
}

.jcard::after {
    bottom:-1px;
    right:-1px;
    border-width:0 1px 1px 0;
    border-bottom-right-radius:10px;
}

.jarvis-cards.aus .jcard {
    animation:jcard-aus .26s ease-in both;
}

@keyframes jcard-ein {
    from { opacity:0; transform:translateX(var(--dx,0)) scale(.96); filter:blur(5px); }
    to { opacity:1; transform:none; filter:none; }
}

@keyframes jcard-aus {
    to { opacity:0; transform:translateX(var(--dx,0)) scale(.96); filter:blur(5px); }
}

.jcard-head {
    display:flex;
    align-items:center;
    gap:8px;
}

.jcard-icon {
    font-size:14px;
}

.jcard-title {
    flex:1;
    min-width:0;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--cyan);
    opacity:.9;
    hyphens:auto;
    overflow-wrap:break-word;
}

.jcard-value {
    font-weight:650;
    font-size:13px;
    color:#fff;
    white-space:nowrap;
}

.jcard p {
    margin:6px 0 0;
    font-size:13px;
    line-height:1.45;
    white-space:pre-line;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jcard-bar {
    height:3px;
    margin-top:9px;
    border-radius:3px;
    background:rgba(94,231,255,.12);
    overflow:hidden;
}

.jcard-bar span {
    display:block;
    height:100%;
    border-radius:3px;
    background:linear-gradient(90deg,#0096ff,var(--cyan));
    box-shadow:0 0 8px var(--cyan);
}

.jcard-link {
    display:inline-block;
    margin-top:7px;
    font-size:12px;
    text-decoration:none;
}

.jarvis-chat {
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:14px 28px 18px;
    mask-image:linear-gradient(transparent,#000 22px);
    scrollbar-width:thin;
    scrollbar-color:rgba(94,231,255,.25) transparent;
}

.jarvis-thread {
    max-width:780px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.jarvis-hello {
    text-align:center;
    color:var(--j-muted);
    padding-top:6px;
}

.jarvis-hello strong {
    color:var(--j-text);
}

.jarvis-chips {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:14px;
}

.jarvis-chips button,.jarvis-chips a {
    text-decoration:none;
    border:1px solid var(--j-line);
    background:rgba(94,231,255,.05);
    border-radius:999px;
    padding:7px 14px;
    color:var(--j-text);
}

.jmsg {
    max-width:88%;
    border:1px solid var(--j-line);
    padding:10px 15px;
    animation:jmsg-ein .35s ease-out both;
}

.jmsg.du {
    align-self:flex-end;
    background:rgba(94,231,255,.1);
    border-color:rgba(94,231,255,.24);
    border-radius:14px 14px 4px 14px;
}

.jmsg.ki {
    align-self:flex-start;
    background:rgba(255,255,255,.03);
    border-radius:14px 14px 14px 4px;
}

.jmsg.fehler {
    border-color:rgba(255,125,115,.4);
    background:rgba(255,90,80,.07);
}

.jmsg-meta {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--j-muted);
    margin-bottom:4px;
}

.jmsg-body {
    font-size:14.5px;
    line-height:1.55;
    overflow-wrap:anywhere;
}

.jmsg.du .jmsg-body {
    white-space:pre-wrap;
}

.jmsg-body.md a {
    color:var(--cyan);
}

.jmsg-changes {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:9px;
}

.jmsg-changes>* {
    font-size:12px;
    border:1px solid var(--j-line);
    border-radius:999px;
    padding:3px 10px;
    text-decoration:none;
    color:var(--cyan);
}

@keyframes jmsg-ein {
    from { opacity:0; transform:translateY(6px); }
}

.jarvis .send {
    background:var(--cyan);
    color:#03121c;
}

.jarvis .send:hover {
    background:#8ff0ff;
}

.jarvis .stop {
    background:rgba(255,255,255,.12);
    color:var(--j-text);
    font-size:13px;
}

/* ---- Schmale Bildschirme ---- */

/* Niedrige Fenster: pro Seite nur so viele Karten, wie neben Jarvis passen – sie dürfen nie in den Chat ragen. */
@media(min-width:901px) and (max-height:900px) {
    .jarvis-cards.links .jcard:nth-child(n+3),.jarvis-cards.rechts .jcard:nth-child(n+3) {
        display:none;
    }
}

@media(min-width:901px) and (max-height:560px) {
    .jarvis-cards.links .jcard:nth-child(n+2),.jarvis-cards.rechts .jcard:nth-child(n+2) {
        display:none;
    }
}

@media(max-width:1100px) {
    .jarvis-stage {
        gap:16px;
        padding:6px 16px 0;
    }
}

@media(max-width:900px) {
    /* Die offene Leiste deckt das Dock zur Hälfte ab – dann schließt ✕ oder ein Tipp daneben. */
    .menu-open .dock {
        visibility:hidden;
    }
    .jarvis-top {
        padding:12px 16px 0;
        align-items:flex-start;
    }
    .jarvis-tools {
        flex-direction:column;
        align-items:flex-end;
        gap:6px;
    }
    .jarvis-tools>* {
        white-space:nowrap;
        padding:3px 10px;
        font-size:12px;
    }
    .jarvis-stage {
        display:flex;
        flex-direction:column;
        height:auto;
        gap:10px;
        padding:4px 0 0;
    }
    .jarvis-core {
        width:min(48vw,190px);
        order:-1;
    }
    .jarvis-cards {
        flex-direction:row;
        justify-content:flex-start;
        width:100%;
        height:auto;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding:2px 16px 6px;
        scrollbar-width:none;
    }
    .jarvis-cards.links,.jarvis-cards.rechts {
        display:none;
    }
    .jarvis-cards.reihe {
        display:flex;
    }
    .jcard {
        flex:0 0 min(78%,300px);
        scroll-snap-align:center;
    }
    .jarvis-chat {
        padding:10px 16px 12px;
    }
    .jmsg {
        max-width:94%;
    }
    .blocks {
        grid-template-columns:minmax(0,1fr);
    }
    .area-heading {
        grid-template-columns:auto minmax(0,1fr);
    }
    .area-actions {
        grid-column:1/-1;
        justify-content:flex-start;
    }
    .choice-grid,.fields,.theme-grid {
        grid-template-columns:1fr;
    }
    .habit-row {
        grid-template-columns:minmax(104px,1.3fr) repeat(7,minmax(28px,1fr));
        gap:3px;
        padding:6px 0;
    }
    .habit-cell {
        width:28px;
        height:28px;
    }
    .habit-icon {
        display:none;
    }
    .notes-layout {
        grid-template-columns:minmax(0,1fr);
    }
    /* Kalender: Monat nur mit Punkten, Tag antippen öffnet die Tagesansicht */
    .cal-cell {
        min-height:58px;
        padding:2px;
        align-items:center;
    }
    .cal-cell .cal-pill,.cal-cell .cal-more,.cal-add {
        display:none;
    }
    .cal-cell-head {
        justify-content:center;
    }
    .cal-dots {
        display:flex;
        gap:3px;
        flex-wrap:wrap;
        justify-content:center;
    }
    .cal-dots span {
        width:6px;
        height:6px;
        border-radius:50%;
    }
    .cal-month-head {
        text-align:center;
        padding:4px 0;
    }
    .cal-week {
        grid-template-columns:40px repeat(var(--tage),minmax(84px,1fr));
    }
    .cal-week.single {
        grid-template-columns:40px minmax(0,1fr);
    }
    .cal-form-row {
        grid-template-columns:1fr;
    }
    .mail-row {
        grid-template-columns:10px minmax(0,1fr) auto;
        grid-template-areas:"dot from date" "dot subject subject";
        row-gap:2px;
    }
    .mail-dot { grid-area:dot; }
    .mail-from { grid-area:from; }
    .mail-subject { grid-area:subject; font-weight:400; color:var(--muted); }
    .mail-date { grid-area:date; }
    .mail-row .badge { display:none; }
    .notes-nav {
        position:static;
        max-height:none;
    }
    /* Auf dem Handy: entweder die Liste oder die geöffnete Notiz */
    .notes-page.has-note .notes-nav {
        display:none;
    }
    .notes-page:not(.has-note) .note-view {
        display:none;
    }
    .note-back {
        display:inline-block;
    }
    .note-heading {
        flex-direction:column;
    }
    .edit-row {
        grid-template-columns:1fr 1fr 28px;
    }
    .edit-row.head {
        display:none;
    }
    .edit-row.check-edit {
        grid-template-columns:auto 1fr 28px;
    }
    .edit-row.check-edit .small {
        grid-column:2;
    }
    .setting-row>span:first-child {
        width:100%;
    }
    input.title-input {
        font-size:30px;
    }
    .tool-group {
        margin-left:0;
    }
}

/* ---- Programme (Mac-App): Baustein „programm“ beim Bearbeiten, Programmauswahl ---- */

.programm-einstellung {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px;
}

/* Programmauswahl (Dock, Sperrliste) */
.programm-auswahl h2 {
    margin:8px 0 4px;
}

.programm-suche {
    width:100%;
    margin:12px 0;
}

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

.programm-eintrag {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:6px 8px;
    border:0;
    border-radius:6px;
    background:none;
    color:inherit;
    text-align:left;
}

.programm-eintrag:hover {
    background:var(--hover);
}

.seiten-icon-bild {
    width:1.25em;
    height:1.25em;
    vertical-align:-0.2em;
}

/* Modell und Denkaufwand (ModellWahl): im Feldraster der Einstellungen wie eigene Felder, im Jarvis-Kopf als Pillen */
.modell-wahl {
    display:contents;
}

.fields .modell-wahl select {
    width:100%;
    border:1px solid var(--line);
    border-radius:6px;
    padding:7px 10px;
    background:var(--bg);
    color:var(--text);
}

.fields .modell-wahl small {
    grid-column:1 / -1;
    margin-top:-4px;
}

.modell-wahl.kompakt label span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
}

.modell-wahl.kompakt select,.modell-wahl.kompakt input {
    font-size:12.5px;
    max-width:190px;
    border:1px solid var(--j-line);
    border-radius:999px;
    padding:5px 10px;
    background:transparent;
    color:var(--j-text);
    color-scheme:dark;
}

/* ---- Chats: Gespräch auf der Seite (ChatVerlauf), geschrieben wird im Dock ---- */
.chat-verlauf {
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
    max-width:760px;
    margin:8px auto 0;
}

/* Einstellungen → KI → Projektordner (Mac-App). */
.ordner-liste {
    list-style:none;
    margin:8px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ordner-zeile {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 12px;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:8px;
}

.ordner-projekt {
    font-weight:600;
    min-width:160px;
}

.ordner-pfad {
    flex:1 1 200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12.5px;
}

.ordner-pfad.fehlt {
    color:var(--muted);
    text-decoration:line-through;
}

.ordner-knoepfe {
    display:flex;
    gap:6px;
    margin-left:auto;
}

.chat-aeltere {
    align-self:center;
    margin:4px auto 10px;
}

.chat-leer {
    color:var(--muted);
    text-align:center;
    padding:40px 0;
}

.chat-msg {
    max-width:100%;
    line-height:1.6;
    overflow-wrap:anywhere;
}

.chat-msg.du {
    align-self:flex-end;
    max-width:85%;
    padding:9px 14px;
    border-radius:14px 14px 4px 14px;
    background:var(--surface);
    border:1px solid var(--line);
}

.chat-msg.fehler {
    color:var(--danger);
}

.chat-msg-meta {
    font-size:11.5px;
    color:var(--muted);
    margin-bottom:3px;
}

.chat-msg-text {
    white-space:pre-wrap;
}

.jarvis-tools .jarvis-fehler {
    border-color:rgba(255,120,120,.5);
    color:#ffb4b4!important;
}

/* ---- Mac-App: Dock und Chatfenster als eigene Fenster (DockAnsicht, ChatFenster) ---- */

/* Das Dock-Fenster ist durchsichtig: Wo nichts gemalt ist, gehen Klicks an die Fenster darunter. */
html.fenster-dock,html.fenster-dock body {
    background:transparent !important;
    overflow:hidden;
}

/* Hinter dem Fenster liegt der Schreibtisch, den die Unschärfe nicht erreicht – deshalb weniger durchsichtiges Glas. */
.dock-eigen .dock-leiste {
    --glas:color-mix(in srgb,var(--bg) 84%,transparent);
    --glas-schatten:0 6px 18px rgba(15,15,15,.18),0 1px 3px rgba(15,15,15,.1);
}

/* Laufen viele Programme, wird erst vor allem der Balken schmaler (bis 280 px), dann scrollt die Gruppe der Programme.
   Schrumpfen nach Gewicht, nicht mit einem Faktor unter 1 – sonst gäbe die Gruppe allein nur einen Bruchteil her. */
.dock-eigen .dock-links {
    flex-shrink:1;
    min-width:0;
}

.dock-eigen .chat-dock {
    flex:0 20 560px;
    width:560px;
    min-width:280px;
}

.dock-programme {
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
    /* Platz für das wachsende Icon und den Punkt darunter – sonst schnitte der Rand der Gruppe sie ab */
    padding:26px 8px 8px;
    margin:-26px -8px -8px;
}

.dock-programme::-webkit-scrollbar {
    display:none;
}

/* Bis an den Rand der Gruppe ist ein abgeschnittenes Programm zu sehen – ＋ steht dahinter, nicht darüber. */
.dock-programme+.dock-plus {
    margin-left:4px;
}

.dock-eigen .panel-backdrop,.dock-kontext-hintergrund {
    position:fixed;
    inset:0;
    /* fast unsichtbar, fängt aber Klicks daneben (ganz durchsichtig gingen sie ans Fenster darunter) */
    background:rgba(0,0,0,.01);
    pointer-events:auto;
}

.dock-eigen .programm-auswahl {
    top:auto;
    right:auto;
    left:50%;
    bottom:96px;
    transform:translateX(-50%);
    width:min(440px,calc(100vw - 32px));
    max-height:calc(100vh - 112px);
    padding:16px 22px 22px;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 12px 40px rgba(15,15,15,.25);
    animation:none;
    pointer-events:auto;
}

.dock-eigen .programm-auswahl h2 {
    font-size:22px;
    margin-bottom:12px;
}

.dock-kontext {
    position:fixed;
    z-index:22;
    left:50%;
    bottom:96px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    min-width:220px;
    padding:6px;
    border-radius:12px;
    background:var(--bg);
    border:1px solid var(--line);
    box-shadow:0 12px 40px rgba(15,15,15,.25);
    pointer-events:auto;
}

.dock-kontext strong {
    padding:6px 10px 4px;
    font-size:12px;
    color:var(--muted);
}

.dock-kontext button {
    text-align:left;
    padding:7px 10px;
    border-radius:7px;
    background:none;
    color:var(--text);
}

.dock-kontext button:hover {
    background:var(--hover);
}

/* Chatfenster: Kopf und Balken bleiben stehen, dazwischen scrollt das Gespräch. */
html.fenster-chat body {
    background:var(--bg);
}

.chat-fenster {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.chat-fenster-kopf {
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
}

.chat-fenster-wahl {
    min-width:0;
    max-width:65%;
    padding:5px 6px;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-weight:600;
}

.chat-fenster-wahl:hover {
    border-color:var(--line);
}

.chat-fenster-platz {
    flex:1;
}

.chat-fenster-knopf {
    min-width:30px;
    height:30px;
    padding:0 9px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--text);
}

.chat-fenster-knopf.stopp {
    color:var(--danger);
}

.chat-fenster-fehler {
    margin:10px 14px 0;
    color:var(--danger);
    font-size:13px;
}

.chat-fenster-verlauf {
    flex:1;
    padding:12px 16px 4px;
}

.chat-fenster-eingabe {
    position:sticky;
    bottom:0;
    padding:10px 12px 12px;
    background:linear-gradient(transparent,var(--bg) 35%);
}

/* Hauptfenster der Mac-App: Das Dock ist ein eigenes Fenster und liegt nicht über der Seite. */
.app-shell.ohne-dock {
    --dock:24px;
}

/* Baustein „programm“: Karte mit Icon, Name und „Öffnen“ (Mac-App) */
.programm-karte {
    display:flex;
    align-items:center;
    gap:12px;
}

.programm-karte .seiten-icon-bild {
    width:40px;
    height:40px;
}

.programm-karte > span {
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}

.sperrliste-titel {
    margin:22px 0 4px;
    font-size:15px;
}

.page-row.ruhend {
    opacity:.72;
}

/* ---- Konten und Einrichtung ---- */
/* Nutzt die bestehenden Farbvariablen samt beiden Dunkel-Schemata. */
.konto-seite { min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--surface); color:var(--text); }
.konto-karte { width:100%; max-width:440px; padding:32px; background:var(--bg); border:1px solid var(--line); border-radius:16px; }
.konto-karte .brand { padding:0; }
.konto-karte h1 { font-size:26px; margin:24px 0; }
.konto-server { color:var(--muted); font-size:12px; overflow-wrap:anywhere; margin-top:6px; }
.konto-form { margin:20px 0; max-width:560px; }
.konto-form fieldset { border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:14px; }
.konto-form label { display:flex; flex-direction:column; gap:6px; font-size:14px; }
.konto-form input { width:100%; min-width:0; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--bg); font:inherit; font-size:16px; line-height:44px; }
/* Die Textzeile füllt das ganze Feld (Zeilenhöhe = Feldhöhe ohne Rand), die Schrift bleibt normal groß. Die Punkte im
   Passwortfeld zeichnen Browser kleiner als Buchstaben. */
.konto-form input[type=password] { font-size:20px; letter-spacing:.04em; }
.konto-form p { margin:0; }
.konto-form button { min-height:40px; }
.konto-passphrase { display:flex; gap:8px; align-items:center; }
.konto-passphrase button { color:var(--muted); flex-shrink:0; }
.konto-links,.konto-aktionen { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.konto-links { margin-top:20px; }
.konto-fehler { color:var(--danger); }
.konto-hinweis { padding:10px 12px; border-radius:8px; background:var(--surface); }
.konto-zeile { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.konto-gruppe { position:relative; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.konto-datum { display:grid; grid-template-columns:1fr 1fr 1.6fr auto; gap:12px; }
.konto-form .kalender-knopf { align-self:end; min-height:46px; min-width:46px; padding:0 12px; font-size:18px; }
.kalender-wahl { position:absolute; z-index:20; top:100%; right:0; margin-top:6px; width:300px; max-width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--text); box-shadow:0 12px 32px rgba(0,0,0,.25); }
.kalender-wahl-kopf { display:flex; gap:8px; margin-bottom:10px; }
.kalender-wahl-kopf select { flex:1; min-height:38px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface); font:inherit; font-size:15px; }
.kalender-wahl-tage { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; font-size:14px; }
.kalender-wahl-tage span { color:var(--muted); font-size:12px; padding:4px 0; }
.kalender-wahl-tage button { min-height:34px; border:0; border-radius:8px; background:none; color:var(--text); font:inherit; cursor:pointer; }
.kalender-wahl-tage button:hover { background:var(--surface); }
.kalender-wahl-tage button[aria-pressed=true] { background:var(--accent); color:var(--bg); }
.kalender-wahl-tage button:disabled { opacity:.3; cursor:default; }
.konto-datum label { font-size:12px; color:var(--muted); }
.konto-form .konto-haken { flex-direction:row; align-items:center; gap:10px; }
.konto-form .konto-haken input { width:18px; height:18px; padding:0; }
.konto-agb { font-size:13px; color:var(--muted); }
.konto-agb summary { cursor:pointer; color:var(--accent); }
.agb-text { margin-top:8px; padding:12px; max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); }
.konto-name { padding:8px 10px; color:var(--muted); overflow-wrap:anywhere; }
.konto-liste { list-style:none; margin:16px 0; padding:0; }
.konto-liste li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.konto-liste li>div:first-child { flex:1; min-width:180px; overflow-wrap:anywhere; }
.konto-liste small { display:block; color:var(--muted); margin-top:4px; }
.konto-code { padding:20px; margin:20px 0; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.konto-code>code { display:block; font-size:20px; overflow-wrap:anywhere; user-select:all; }
.einrichtung { width:100%; max-width:900px; margin:0 auto; padding:40px 28px; color:var(--text); }
.einrichtung progress { width:100%; height:6px; accent-color:var(--accent); }
.einrichtung h1 { font-size:32px; margin:24px 0; }
.einrichtung-inhalt { min-height:240px; line-height:1.65; }
.einrichtung footer { border-top:1px solid var(--line); margin-top:28px; padding-top:20px; justify-content:flex-end; }
.konto-seite :focus-visible,.einrichtung :focus-visible,.settings-group .konto-form :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.konto-form fieldset:disabled { opacity:.65; }
@media(max-width:540px) {
    .konto-seite { padding:12px; }
    .konto-karte { padding:24px 18px; }
    .konto-zeile { grid-template-columns:1fr; }
    .einrichtung { padding:24px 16px; }
    .konto-aktionen { gap:8px; }
    .konto-liste li { align-items:flex-start; }
}

/* ---- Unterseiten (wie in Notion) ---- */
.seiten-pfad {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-bottom:14px;
    font-size:12.5px;
    color:var(--muted);
}

.seiten-pfad a {
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--muted);
    text-decoration:none;
}

.seiten-pfad a:hover {
    color:var(--text);
}

.unterseiten {
    display:grid;
    gap:2px;
    margin-top:28px;
    padding-top:14px;
    border-top:1px solid var(--line);
}

.unterseite {
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    color:var(--text);
    text-decoration:none;
    border-radius:6px;
}

.unterseite span {
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:3px;
}

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

.unterseiten > button {
    justify-self:start;
    margin-top:6px;
}

/* Verknüpfte Aufgaben auf einer Seite */
.verknuepfte-aufgabe {
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 8px;
    border-radius:6px;
    font-size:13.5px;
}

.verknuepfte-aufgabe:hover {
    background:var(--surface);
}

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

.verknuepfte-aufgabe.done a {
    color:var(--muted);
    text-decoration:line-through;
}

.verknuepfte-aufgaben .relation-neu {
    justify-self:start;
    margin-top:6px;
}

/* ---- Notiz-Editor (eigener Editor für den Vault, kein eingebettetes Obsidian) ---- */
.notes-werkzeuge {
    display:flex;
    gap:6px;
    align-items:center;
}

.notes-werkzeuge .notes-search {
    flex:1;
    min-width:0;
}

.notes-werkzeuge .outline.an {
    background:var(--surface);
    border-color:var(--muted);
}

.notes-neu {
    display:grid;
    gap:6px;
    margin:8px 0 4px;
    padding:8px;
    background:var(--surface);
    border-radius:8px;
}

.notes-neu select {
    font:inherit;
    font-size:12px;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:5px;
    padding:4px 6px;
}

.note-heading input.note-title-eingabe {
    flex:1;
    min-width:0;
    font:inherit;
    font-size:28px;
    letter-spacing:-.5px;
    font-weight:700;
    color:var(--text);
    background:transparent;
    border:1px solid transparent;
    border-radius:6px;
    padding:2px 4px;
    margin-left:-4px;
}

.note-heading input.note-title-eingabe:hover,.note-heading input.note-title-eingabe:focus {
    background:var(--surface);
    border-color:var(--line);
    outline:none;
}

.note-aktionen {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    font-size:12px;
}

.note-aktionen .outline.an {
    background:var(--surface);
}

.note-hinweis {
    margin:6px 0 14px;
}

.note-editor {
    display:grid;
    gap:8px;
    margin-top:6px;
}

.notes-netz {
    margin-bottom:20px;
}

.notes-netz-kopf {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    font-size:12px;
    color:var(--netz-leise);
}

.notes-netz-kopf span {
    margin-right:auto;
    color:var(--netz-text);
}

.notes-netz-kopf .outline {
    color:var(--netz-text);
    border-color:var(--netz-rand);
}

.notes-netz canvas {
    display:block;
    width:100%;
    height:min(62vh,560px);
    touch-action:none;
    cursor:grab;
}

.notes-netz-hilfe {
    display:block;
    padding:8px 14px;
    font-size:10.5px;
    color:var(--netz-leise);
}

/* Vorschläge beim Tippen von [[ (wikilink.js) */
.wikilink-vorschlaege {
    position:absolute;
    z-index:60;
    width:290px;
    max-height:280px;
    overflow-y:auto;
    padding:4px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 10px 30px #0003;
}

.wikilink-vorschlaege button {
    display:flex;
    justify-content:space-between;
    gap:8px;
    width:100%;
    padding:6px 8px;
    text-align:left;
    font-size:13px;
    color:var(--text);
    background:none;
    border-radius:5px;
}

.wikilink-vorschlaege button small {
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:45%;
}

.wikilink-vorschlaege button.an,.wikilink-vorschlaege button:hover {
    background:var(--surface);
}


/* ==== Jarvis-Seite mit Widgets (JarvisAnsicht, Bausteine/Widgets, js/jarvisteiler.js) ====
   Eigener Abschnitt am Ende: überschreibt die Bühne von oben (Karten links/rechts) durch Spalten mit Widgets, dazu
   Bearbeiten-Modus, Katalog und den Trenner zum Chat. */

/* Widgets und Bausteine nutzen die Farben der Seiten – in Jarvis immer die dunklen, egal welches Schema. */
.jarvis {
    --bg:#06131d;
    --surface:rgba(94,231,255,.05);
    --text:var(--j-text);
    --muted:var(--j-muted);
    --line:var(--j-line);
    --yellow:rgba(255,200,90,.12);
    --blue:rgba(94,231,255,.1);
    --accent:#5ee7ff;
    --hover:rgba(94,231,255,.07);
    --selected:rgba(94,231,255,.1);
    --danger:#ff8a80;
    --ok:#6fdc9b;
    --warten-text:#dac27c;
    --jarvis-oben-standard:clamp(250px,46vh,470px);
    /* So groß wird die Figur: höchstens ihre Spalte, und sie passt in die Bühne. */
    --jarvis-kern:min(42vh,400px,calc(var(--jarvis-oben,var(--jarvis-oben-standard)) - 30px));
}

.jarvis .status-wartet {
    color:#dac27c;
}

.jarvis .status-in-arbeit {
    color:#9fc4df;
}

/* ---- Bühne: links | Figur | rechts, darunter „unten“ – scrollt, wenn mehr Widgets da sind, als Platz ist ---- */

.jarvis-stage {
    height:var(--jarvis-oben,var(--jarvis-oben-standard));
    flex-shrink:1;
    min-height:0;
    grid-template-columns:minmax(0,1fr) minmax(160px,min(42vh,400px)) minmax(0,1fr);
    grid-template-areas:"links kern rechts" "unten unten unten";
    /* So hoch wie der Inhalt – mit „auto“ blieb die obere Zeile so hoch wie die Figur, wenn die Bühne nicht alles fasste,
       und eine lange Spalte rechts lag über den Widgets unten (die Bühne scrollt stattdessen). */
    grid-template-rows:max-content max-content;
    align-items:start;
    row-gap:18px;
    padding:6px 28px 14px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(94,231,255,.25) transparent;
}

.jarvis-core {
    grid-area:kern;
    align-self:start;
    position:sticky;
    top:0;
    width:min(100%,var(--jarvis-kern));
    min-width:60px;
}

.jarvis-widgets {
    display:contents;
}

.jarvis-spalte {
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
    align-self:start;
}

/* Neben der Figur: auf ihrer Höhe mittig – passt nicht alles, beginnt die Spalte oben und die Bühne scrollt. „unten“
   steht direkt darunter. */
.jarvis-spalte.links,.jarvis-spalte.rechts {
    min-height:var(--jarvis-kern);
}

.jarvis-spalte.links>:first-child,.jarvis-spalte.rechts>:first-child {
    margin-top:auto;
}

.jarvis-spalte.links>:last-child,.jarvis-spalte.rechts>:last-child {
    margin-bottom:auto;
}

.jarvis-spalte.links {
    grid-area:links;
    align-items:flex-end;
    --dx:16px;
}

.jarvis-spalte.rechts {
    grid-area:rechts;
    align-items:flex-start;
    --dx:-16px;
}

.jarvis-spalte.unten {
    grid-area:unten;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:center;
    --dx:0px;
}

.jarvis:not(.editing) .jarvis-spalte.leer {
    display:none;
}

/* ---- Ein Widget: HUD-Karte wie die Infokarten ---- */

.jwidget {
    position:relative;
    width:min(100%,310px);
    min-width:0;
    margin:0;
    background:var(--j-card);
    border:1px solid var(--j-line);
    border-radius:10px;
    padding:11px 14px 12px;
    backdrop-filter:blur(6px);
    box-shadow:0 10px 32px rgba(0,0,0,.35);
    font-size:13px;
    animation:jcard-ein .55s cubic-bezier(.2,.75,.2,1) both;
    animation-delay:calc(min(var(--i),8) * 60ms);
}

.jwidget::before,.jwidget::after {
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    border:solid rgba(94,231,255,.6);
    pointer-events:none;
}

.jwidget::before {
    top:-1px;
    left:-1px;
    border-width:1px 0 0 1px;
    border-top-left-radius:10px;
}

.jwidget::after {
    bottom:-1px;
    right:-1px;
    border-width:0 1px 1px 0;
    border-bottom-right-radius:10px;
}

/* Die Infokarten bringen ihren Rahmen selbst mit. */
.jwidget.ohne-rahmen {
    width:100%;
    background:none;
    border:0;
    padding:0;
    box-shadow:none;
    backdrop-filter:none;
    animation:none;
}

.jwidget.ohne-rahmen::before,.jwidget.ohne-rahmen::after {
    display:none;
}

.jarvis-spalte.unten .jwidget {
    flex:1 1 340px;
    width:auto;
}

.jarvis-spalte.unten .jwidget-netz,.jarvis-spalte.unten .jwidget-fortschritt,.jarvis-spalte.unten .jwidget-ausschnitt {
    flex-basis:100%;
}

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

.jwidget-kopf h2 {
    margin:0;
    font-size:10.5px;
    line-height:1.4;
}

.jw-infos {
    height:auto;
    justify-content:flex-start;
}

.jarvis-spalte.links .jw-infos {
    align-items:flex-end;
}

.jarvis-spalte.rechts .jw-infos {
    align-items:flex-start;
}

.jarvis-spalte.unten .jw-infos {
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
}

.jwidget:not(.ohne-rahmen) .jw-infos {
    align-items:stretch;
}

.jwidget:not(.ohne-rahmen) .jw-infos .jcard {
    width:100%;
}

/* Bausteine aus Seiten (Ausschnitt, Fortschritt, Netz …) etwas kompakter. */
.jwidget .block-title {
    display:none;
}

.jw-ausschnitt {
    min-width:0;
    font-size:13.5px;
}

/* ---- Inhalt der Widgets (auch auf normalen Seiten – deshalb nur Farben aus den Variablen) ---- */

.jw {
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

.jw-summe {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px 8px;
}

.jw-summe strong {
    font-size:17px;
    font-weight:650;
    line-height:1.2;
}

.jw-summe span,.jw-summe b {
    font-size:12.5px;
}

.jw-summe span {
    color:var(--muted);
}

.jw-summe.klein span:first-child {
    color:var(--text);
    flex:1;
    min-width:0;
}

.jw-balken {
    display:block;
    flex:1 1 100%;
    height:3px;
    border-radius:3px;
    background:color-mix(in srgb,var(--text) 12%,transparent);
    overflow:hidden;
}

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

.jarvis .jw-balken span {
    background:linear-gradient(90deg,#0096ff,var(--cyan));
    box-shadow:0 0 8px var(--cyan);
}

.jw-liste {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:1px;
}

.jw-zeile {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding:3px 4px;
    border-radius:6px;
    font-size:13px;
    line-height:1.35;
}

.jw-zeile:hover {
    background:var(--hover);
}

.jw-zeile input[type=checkbox] {
    margin:0;
    flex-shrink:0;
}

.jw-text {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left;
    color:var(--text)!important;
    text-decoration:none;
}

button.jw-text {
    padding:0;
    font-size:inherit;
    text-decoration:none;
}

button.jw-text:hover,a.jw-text:hover {
    text-decoration:underline;
    text-underline-offset:3px;
    background:none;
}

label.jw-text {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.jw-text b {
    font-weight:600;
}

.jw-text span {
    color:var(--muted);
    margin-left:6px;
    font-size:12px;
}

.jw-zeit {
    flex-shrink:0;
    color:var(--muted);
    font-size:11.5px;
    font-variant-numeric:tabular-nums;
}

.jw-zeile>.jw-zeit:not(:last-child) {
    min-width:36px;
}

.jw-zeile.done .jw-text {
    color:var(--muted)!important;
    text-decoration:line-through;
}

.jw-zeile.vorbei .jw-zeit {
    color:var(--danger);
}

.jw-zeile.jetzt {
    background:color-mix(in srgb,var(--accent) 11%,transparent);
}

.jw-zeile.post .jw-text b,.jw-zeile.post .jw-text span {
    display:block;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

.jw-zeile.post.neu .jw-text b::before {
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    margin:0 6px 1px 0;
    background:var(--accent);
}

.jw-zeile.essen {
    align-items:flex-start;
}

.jw-zeile.essen .jw-zeit {
    min-width:72px;
    padding-top:1px;
}

.jw-zeile.essen .jw-text {
    white-space:normal;
}

.jw-gruppe {
    padding:6px 4px 1px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
}

.jw-gruppe:first-child {
    padding-top:0;
}

.jw-leer {
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

.jw-meta {
    color:var(--muted);
    font-size:11.5px;
    padding-left:4px;
}

.jw-fehler {
    color:var(--danger);
    font-size:12px;
}

/* Knöpfe in Widgets (＋ Neuer Chat, Postfach verbinden) stehen links unter dem Inhalt wie die „… öffnen →“-Verweise. */
.jw-knopf {
    align-self:flex-start;
}

.jw-mehr {
    align-self:flex-start;
    font-size:12px;
    text-decoration:none;
    color:var(--muted);
}

a.jw-mehr:hover,button.jw-mehr:hover {
    color:var(--text);
}

.jarvis a.jw-mehr {
    color:var(--cyan);
    opacity:.85;
}

.jw-chips {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

.jw-chips span {
    font-size:11.5px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:2px 8px;
    color:var(--muted);
}

.jw-zitat {
    margin:0;
    font-size:13px;
    line-height:1.4;
}

.jw-woche {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:5px;
    align-items:end;
    height:64px;
}

.jw-tag {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
    height:100%;
}

.jw-saeule {
    display:flex;
    align-items:flex-end;
    width:100%;
    max-width:22px;
    border-radius:3px;
    background:color-mix(in srgb,var(--text) 12%,transparent);
    overflow:hidden;
}

.jw-saeule span {
    display:block;
    width:100%;
    background:var(--accent);
}

.jarvis .jw-saeule span {
    background:linear-gradient(0deg,#0096ff,var(--cyan));
}

.jw-tag small {
    font-size:10.5px;
    color:var(--muted);
}

.jw-tag.heute small {
    color:var(--text);
    font-weight:650;
}

.jw-gewohnheiten {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.jw-gewohnheiten button {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12.5px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px 10px;
    color:var(--text);
}

.jw-gewohnheiten button.an {
    background:color-mix(in srgb,var(--ok) 20%,transparent);
    border-color:color-mix(in srgb,var(--ok) 55%,transparent);
}

.jw-gewohnheiten button.an::after {
    content:"✓";
    color:var(--ok);
    font-weight:700;
}

.jw-neu {
    margin-top:2px;
}

.jw-neu input {
    padding:4px 9px;
    font-size:12.5px;
    color:var(--text);
}

/* Einstellungen eines Widgets (⚙ bzw. Bearbeiten-Modus einer Seite) */
.jw-felder {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:2px 0 10px;
    margin-bottom:10px;
    border-bottom:1px dashed var(--line);
    font-size:12.5px;
    color:var(--muted);
}

.jw-felder>label,.jw-seitenwahl {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.jw-felder .edit-input.narrow {
    width:64px;
    padding:3px 6px;
}

.jw-seitenwahl select,.jw-felder>label>.edit-input:not(.narrow) {
    flex:1;
    min-width:120px;
    padding:4px 6px;
}

.jw-felder .projekt-wahl {
    margin:0;
}

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

.jarvis-tools .fertig {
    background:var(--cyan);
    color:#03121c!important;
    border-color:transparent;
    font-weight:600;
}

.jarvis-tools .fertig:hover {
    background:#8ff0ff;
}

.jarvis .gefahr {
    color:#ffb4b4!important;
    border:1px solid rgba(255,120,120,.5);
}

.jarvis .gefahr.klein {
    font-size:11.5px;
    border-radius:6px;
    padding:2px 8px;
}

.jarvis.editing .jwidget {
    outline:1px dashed rgba(94,231,255,.35);
    outline-offset:3px;
    animation:none;
}

.jarvis.editing .jwidget.offen {
    width:min(100%,380px);
    outline-color:rgba(94,231,255,.7);
}

.jarvis-spalte.unten .jwidget.offen {
    width:auto;
}

.jwidget-tools {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin:-4px -6px 8px;
}

.jwidget-tools .block-kind {
    color:var(--cyan);
    letter-spacing:.08em;
}

.jwidget-tools .tool-group {
    gap:1px;
}

.jwidget-tools .icon-only {
    width:26px;
    height:26px;
}

.jwidget-platz {
    font-size:12px;
    background:var(--bg);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:6px;
    padding:2px 4px;
}

.jwidget>.block-title-input {
    width:100%;
    margin-bottom:8px;
    font-size:13px;
}

.jarvis-plus {
    width:min(100%,310px);
    border:1px dashed rgba(94,231,255,.35);
    border-radius:10px;
    padding:10px 14px;
    color:var(--j-muted);
    font-size:12.5px;
    background:rgba(94,231,255,.03);
}

.jarvis-plus:hover {
    color:var(--j-text);
    border-color:rgba(94,231,255,.7);
}

.jarvis-spalte.unten .jarvis-plus {
    flex:1 1 100%;
    width:auto;
}

.jarvis-notiz {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:8px 28px 0;
    padding:8px 12px;
    border:1px solid rgba(255,200,90,.35);
    border-radius:8px;
    background:rgba(255,200,90,.08);
    font-size:13px;
    flex-shrink:0;
}

/* Katalog: über der Bühne, nicht in der schmalen Spalte */
.jarvis-katalog-hintergrund {
    position:absolute;
    inset:0;
    z-index:20;
    background:rgba(0,4,8,.55);
    backdrop-filter:blur(2px);
}

.jarvis-katalog {
    position:absolute;
    z-index:21;
    left:50%;
    top:max(64px,10vh);
    transform:translateX(-50%);
    width:min(780px,calc(100% - 32px));
    max-height:calc(100% - 130px);
    overflow-y:auto;
    padding:12px;
    border:1px solid rgba(94,231,255,.3);
    border-radius:14px;
    background:rgba(5,16,25,.97);
    box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(0,160,255,.12);
    animation:chat-auf .18s ease-out;
}

.jarvis-katalog .block-menu-head {
    gap:10px;
}

.jarvis-katalog-platz {
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
    font-size:12.5px;
    color:var(--j-muted);
}

.jarvis-katalog-platz select {
    background:var(--bg);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:6px;
    padding:3px 6px;
}

.jarvis-katalog-gruppe {
    display:block;
    margin:10px 8px 4px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--cyan);
    opacity:.85;
}

.jarvis-katalog .block-option-icon {
    background:rgba(94,231,255,.06);
    border-color:var(--j-line);
}

.jarvis-katalog .block-option small em {
    font-style:normal;
    color:#ffd58a;
}

/* ---- Trenner zwischen Widgets und Chat, rechts daneben der Knopf zum Ein- und Aufklappen ---- */

.jarvis-teilerzeile {
    position:relative;
    flex-shrink:0;
}

.jarvis-teiler {
    position:relative;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    height:14px;
    margin:0 28px;
    cursor:row-resize;
    touch-action:none;
}

.jarvis-chat-knopf {
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:2px 10px;
    border:1px solid var(--j-line);
    border-radius:999px;
    background:var(--bg);
    color:var(--j-muted);
    font-size:11.5px;
    line-height:1.4;
    opacity:.7;
    transition:opacity .15s,color .15s,border-color .15s;
}

.jarvis-chat-knopf:hover,.jarvis-chat-knopf:focus-visible,.jarvis-chat-knopf.zu {
    opacity:1;
    color:var(--j-text);
    border-color:color-mix(in srgb,var(--cyan) 50%,var(--j-line));
    background:var(--bg);
}

/* Eingeklappt: Die Widgets nehmen alles (jarvisteiler.js setzt die Höhe), vom Gespräch bleibt nur der Trenner. */
.jarvis[data-chat-zu] .jarvis-chat {
    padding-top:0;
    padding-bottom:0;
    visibility:hidden;
}

.jarvis-teiler::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(94,231,255,.22),transparent);
}

.jarvis-teiler span {
    position:relative;
    width:44px;
    height:4px;
    border-radius:4px;
    background:rgba(94,231,255,.28);
    transition:background .15s,width .15s,box-shadow .15s;
}

.jarvis-teiler:hover span,.jarvis-teiler:focus-visible span,.jarvis.zieht .jarvis-teiler span {
    width:64px;
    background:var(--cyan);
    box-shadow:0 0 10px var(--cyan);
}

.jarvis-teiler:focus-visible {
    outline:none;
}

.jarvis.zieht,.jarvis.zieht * {
    cursor:row-resize!important;
    user-select:none;
    -webkit-user-select:none;
}

.jarvis.oben-zu .jarvis-stage {
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
}

.jarvis.chat-zu .jarvis-chat {
    padding-top:0;
    padding-bottom:0;
}

@media(pointer:coarse) {
    .jarvis-teiler {
        height:26px;
    }
    .jarvis-chat-knopf {
        padding:4px 12px;
        font-size:12.5px;
    }
    .jarvis-teiler span {
        width:56px;
        height:5px;
    }
}

/* Niedrige Fenster: Die Figur nimmt nicht mehr als die halbe Breite der Bühne. */
@media(max-width:1100px) {
    .jarvis-stage {
        padding:6px 16px 12px;
    }
    .jarvis-teiler {
        margin:0 16px;
    }
    .jarvis-chat-knopf {
        right:16px;
    }
}

/* Handy: Figur oben, alle Widgets in einer Reihe zum Wischen (wie früher die Karten). */
@media(max-width:900px) {
    .jarvis-stage {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        height:var(--jarvis-oben,auto);
        max-height:var(--jarvis-oben,62dvh);
        gap:10px;
        padding:4px 0 6px;
    }
    .jarvis-core {
        position:relative;
        top:auto;
        flex-shrink:0;
        align-self:center;
        width:min(48vw,190px,calc(var(--jarvis-oben,999px) - 40px));
    }
    .jarvis-widgets {
        display:flex;
        align-items:flex-start;
        gap:12px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding:2px 16px 6px;
        scrollbar-width:none;
    }
    .jarvis-spalte,.jarvis-spalte.unten {
        display:contents;
    }
    .jarvis-widgets .jwidget,.jarvis-spalte.unten .jwidget {
        flex:0 0 min(80%,320px);
        width:auto;
        scroll-snap-align:center;
    }
    .jarvis-widgets .jwidget.ohne-rahmen,.jarvis-widgets .jwidget.ohne-rahmen .jw-infos {
        display:contents;
    }
    .jarvis-widgets .jw-infos .jcard {
        flex:0 0 min(78%,300px);
        width:auto;
        scroll-snap-align:center;
    }
    .jarvis-plus,.jarvis-spalte.unten .jarvis-plus {
        flex:0 0 min(60%,220px);
        align-self:stretch;
    }
    .jarvis-teiler {
        margin:0 16px;
    }
    .jarvis-chat-knopf {
        right:16px;
    }
    .jarvis-notiz {
        margin-left:16px;
        margin-right:16px;
    }
    .jarvis-katalog {
        top:56px;
        width:calc(100% - 24px);
        max-height:calc(100% - 110px);
    }
}

/* Baustein-Menü der Seiten: Abschnitt für die Widgets */
.block-menu-gruppe {
    display:block;
    margin:12px 8px 4px;
    font-size:10.5px;
    font-weight:650;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--muted);
}

/* ---- Einkaufsliste: Checkliste nach Abteilungen im Supermarkt (AbteilungsCheckliste) ---- */

.checklist .abteilungen-schalter {
    margin-bottom:10px;
    font-size:13px;
    color:var(--muted);
}

.checklist.abteilungen .check-kopf {
    display:flex;
    gap:6px;
    margin:0 0 4px;
}

.checklist.abteilungen .check-kopf .check-add {
    flex:1;
    min-width:0;
    margin:0;
}

.checklist.abteilungen .check-bearbeiten {
    min-width:40px;
}

.check-hinweis {
    display:block;
    margin-bottom:8px;
    font-size:12px;
    color:var(--muted);
}

/* Jede Abteilung ist ein Block (Ziel beim Ziehen); die Überschrift darin ist immer die erste. */
.checklist.abteilungen .abteilung {
    border-radius:6px;
}

.checklist.abteilungen .abteilung>.check-group {
    margin:14px 0 4px;
}

.checklist.abteilungen .abteilung>.check-group.leer {
    opacity:.45;
    margin:8px 0 2px;
}

.checklist.abteilungen .erledigte-entfernen {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    margin:4px 0 6px;
    padding:9px 12px;
    font-weight:600;
    color:var(--accent);
    border-color:color-mix(in srgb,var(--accent) 55%,transparent);
    background:color-mix(in srgb,var(--accent) 10%,var(--bg));
}

.checklist.abteilungen .erledigte-entfernen:hover {
    background:color-mix(in srgb,var(--accent) 18%,var(--bg));
}

/* Kategorien bearbeiten: dieselbe Ansicht, dazu Griff, Name zum Ändern und ✕. */
.kategorien-hinweis {
    display:block;
    margin:2px 0 6px;
    font-size:12px;
}

.checklist.abteilungen .kategorie-kopf {
    display:flex;
    align-items:center;
    gap:4px;
}

.checklist.abteilungen .kategorie-kopf .icon-only {
    margin-left:auto;
}

input.kategorie-name {
    flex:1;
    min-width:0;
    padding:3px 6px;
    font:inherit;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--muted);
    background:transparent;
    border:1px solid transparent;
    border-radius:4px;
}

input.kategorie-name:hover,input.kategorie-name:focus {
    color:var(--text);
    background:var(--bg);
    border-color:var(--line);
}

.checklist.abteilungen .griff {
    padding:0 4px;
    color:var(--muted);
    cursor:grab;
    user-select:none;
}

.checklist.abteilungen .check-item.ziehbar {
    align-items:center;
    cursor:grab;
}

.checklist.abteilungen .check-item.ziehbar .icon-only {
    margin-left:auto;
}

.checklist.abteilungen .abteilung.ziel {
    background:color-mix(in srgb,var(--accent) 12%,transparent);
    outline:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);
}

.checklist.abteilungen .kategorie-neu {
    margin-top:14px;
}

@media(max-width:700px) {
    /* Im Laden: größere Tippflächen. */
    .checklist.abteilungen .check-item {
        padding:9px 6px;
    }
    .checklist.abteilungen .check-item input[type=checkbox] {
        width:20px;
        height:20px;
    }
    .checklist.abteilungen .check-add input {
        padding:10px 12px;
        font-size:16px;
    }
}

/* ---- Fitnessplan: Wochenreview und Vorschau in der Übungssuche ---- */

/* Die Überschrift des Bausteins setzt der Trainingsplan selbst unter das Wochenreview. */
.block-training > .block-title {
    display:none;
}

.training > .training-titel {
    display:none;
}

.block-training > .training > .training-titel {
    display:block;
    margin-top:22px;
}

.training-woche {
    margin-bottom:6px;
    padding:18px 20px 16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface);
}

.tw-kopf {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}

.tw-kopf p {
    margin-top:5px;
    font-size:12px;
    color:var(--muted);
}

.tw-blaettern {
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
}

.tw-blaettern .outline {
    margin-right:4px;
}

.tw-zahlen {
    display:flex;
    flex-wrap:wrap;
    gap:14px 48px;
    margin-bottom:16px;
}

.tw-zahlen small {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:4px;
}

.tw-zahlen strong {
    font-size:14px;
    font-weight:550;
}

.tw-zahlen strong span {
    font-size:12px;
    font-weight:400;
    color:var(--muted);
}

.tw-tage {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:6px;
    margin:0;
    padding:0;
    list-style:none;
}

.tw-tag button {
    display:flex;
    flex-direction:column;
    gap:3px;
    width:100%;
    height:100%;
    padding:8px 8px 9px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--bg);
    color:var(--text);
    text-align:left;
}

.tw-tag button:not(:disabled):hover {
    border-color:color-mix(in srgb,var(--text) 25%,var(--line));
}

/* Tage ohne Trainingstag (Rest, nicht im Plan) sind nur nicht anklickbar – nicht blass. */
.tw-tag button:disabled {
    cursor:default;
    opacity:1;
}

.tw-vor::before {
    content:"· ";
}

.tw-tag small {
    font-size:11px;
    color:var(--muted);
    white-space:nowrap;
}

.tw-tag strong {
    font-size:13px;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tw-wert {
    font-size:11.5px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-height:16px;
}

.tw-balken {
    display:block;
    height:4px;
    margin-top:auto;
    border-radius:2px;
    background:var(--line);
    overflow:hidden;
}

.tw-balken span {
    display:block;
    height:100%;
    background:var(--ok);
}

.tw-tag.erledigt button {
    border-color:color-mix(in srgb,var(--ok) 55%,var(--line));
}

.tw-tag.erledigt .tw-wert {
    color:var(--ok);
    font-weight:600;
}

.tw-tag.teilweise .tw-balken span {
    background:color-mix(in srgb,var(--ok) 65%,var(--line));
}

.tw-tag.verpasst strong {
    color:var(--muted);
    text-decoration:line-through;
}

.tw-tag.verpasst .tw-wert {
    color:var(--danger);
}

.tw-tag.rest button,.tw-tag.leer button {
    background:transparent;
}

.tw-tag.rest strong,.tw-tag.leer strong,.tw-tag.geplant strong {
    color:var(--muted);
    font-weight:550;
}

.tw-tag.ist-heute button {
    border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
}

@media(max-width:640px) {
    .training-woche {
        padding:14px 12px 12px;
    }

    .tw-zahlen {
        gap:10px 22px;
    }

    .tw-zahlen strong .tw-vor {
        display:block;
        margin-top:2px;
    }

    .tw-vor::before {
        content:none;
    }

    .tw-tage {
        gap:3px;
    }

    .tw-tag button {
        padding:6px 4px 7px;
        align-items:center;
        text-align:center;
    }

    .tw-tag strong {
        font-size:11.5px;
        max-width:100%;
    }

    .tw-tag small,.tw-wert {
        font-size:10px;
    }

    .tw-balken {
        width:100%;
    }
}

/* Übungssuche: großes, bewegtes Vorschaubild beim Drüberfahren (nur mit Maus – am Handy fügt Tippen direkt hinzu). */
.exercise-result {
    position:relative;
}

.exercise-preview {
    position:absolute;
    left:50%;
    bottom:calc(100% + 6px);
    z-index:30;
    width:min(340px,90vw);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 14px 36px rgba(0,0,0,.28);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,4px);
    transition:opacity .12s,transform .12s,visibility 0s .12s;
    pointer-events:none;
}

.exercise-preview .exercise-anim {
    display:block;
}

@media(hover:hover) {
    .exercise-result:hover .exercise-preview,.exercise-result:focus-visible .exercise-preview {
        opacity:1;
        visibility:visible;
        transform:translate(-50%,0);
        transition:opacity .15s .25s,transform .15s .25s,visibility 0s .25s;
    }
}

/* ---- Gewohnheiten: Raster, Gewohnheitsfenster, Routinen übernehmen ---- */

.habit-manage-goal {
    width:auto;
    flex:none;
}

.habit-new-open {
    margin-top:10px;
}

.habits .primary.small {
    padding:3px 10px;
    font-size:12px;
}

/* Die Gewohnheit, die gerade im Fenster offen ist */
.habit-row.offen {
    background:var(--hover);
}

/* Der Name öffnet die Gewohnheit zum Bearbeiten; ✎ erscheint beim Drüberfahren (auf Touch-Geräten immer, blass). */
.habit-text-button,.habit-text-button:hover {
    display:block;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.habit-edit-hint {
    color:var(--muted);
    font-size:12px;
    font-weight:400;
    opacity:0;
    transition:opacity .15s;
}

.habit-row:hover .habit-edit-hint,.habit-text-button:focus-visible .habit-edit-hint {
    opacity:1;
}

@media(hover:none) {
    .habit-edit-hint {
        opacity:.6;
    }
}

/* Unter dem Namen: was geplant ist */
.habit-text small.habit-plan-text {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11.5px;
}

/* Kreise (Benedikts Vorgabe): erledigt = Haken, offen = normal umrandet, verpasst = rot umrandet, nicht fällig =
   ausgegraut. Heute steht oben am Datum (Zahl in Akzentfarbe), nicht als Ring um die Kreise. */
.habit-cell.missed,.habit-dot.missed {
    border:2px solid var(--danger);
}

.habit-cell.frei,.habit-dot.frei {
    border-color:transparent;
    background:color-mix(in srgb,var(--text) 10%,transparent);
}

.habit-cell.frei:hover:not(:disabled) {
    border-color:var(--accent);
}

.habit-days span.today small {
    min-width:24px;
    padding:1px 6px;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    text-align:center;
}

.habit-legend {
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    margin-top:10px;
    font-size:12px;
    color:var(--muted);
}

.habit-legend span {
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.habit-dot {
    display:inline-grid;
    place-items:center;
    width:16px;
    height:16px;
    border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);
    border-radius:50%;
    font-size:10px;
    font-style:normal;
    font-weight:700;
    color:#fff;
}

.habit-dot.done {
    border-color:var(--accent);
    background:var(--accent);
}

/* Reihenfolge per Ziehen (sortieren.js): am Griff bzw. am Namen */
.habit-grip {
    flex:none;
    width:12px;
    margin-right:-4px;
    color:var(--muted);
    font-size:13px;
    cursor:grab;
    opacity:0;
    transition:opacity .15s;
}

.habit-row:hover .habit-grip {
    opacity:.7;
}

@media(hover:none) {
    .habit-grip {
        opacity:.5;
    }
}

.habit-row.dragging {
    opacity:.35;
}

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

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

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

/* Routinen aus dem Vault übernehmen */
.habit-import {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:14px;
    padding:12px 14px;
    border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
    border-radius:10px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
}

.habit-import-head small {
    display:block;
    margin-top:2px;
    font-size:12px;
    color:var(--muted);
}

.habit-import-row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
}

.habit-import-row .habit-text {
    flex:1 1 200px;
}

.habit-import-row select {
    width:280px;
    max-width:100%;
}

.habit-import-row .habit-text small {
    display:block;
    font-size:12px;
    color:var(--muted);
}

.habit-import-fehler {
    color:var(--danger);
}

/* Gewohnheitsfenster (GewohnheitFenster – Aufbau wie das Aufgabenfenster). Titel und Icon gegen
   „input:not([type]) { font:inherit }“ oben in dieser Datei, die sonst Größe und Gewicht zurücksetzt. */
.gewohnheit-fenster .detail-titel {
    font-size:29px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.6px;
}

.gewohnheit-fenster .projekt-icon-eingabe {
    font-size:26px;
}

.gewohnheit-fenster .segmented {
    margin:-3px 0;
}

.gewohnheit-summe {
    display:block;
    margin-top:2px;
}

.habit-day-pick {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

.habit-day-chip {
    min-width:38px;
    padding:4px 8px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:12.5px;
    color:var(--muted);
}

.habit-day-chip.an {
    border-color:var(--accent);
    background:var(--accent);
    color:#fff;
}

.gewohnheit-zeiten .termin-zeile {
    margin-bottom:6px;
}

.gewohnheit-tag {
    display:inline-block;
    min-width:24px;
    color:var(--muted);
}

.rhythmus-teile {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.rhythmus-teil {
    display:flex;
    align-items:center;
    gap:4px;
}

.rhythmus-nr {
    flex:none;
    width:24px;
    color:var(--muted);
    font-size:12px;
    text-align:right;
}

.rhythmus-teil input {
    flex:1;
    min-width:0;
    padding:4px 8px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
}

.rhythmus-teil.rest input {
    color:var(--muted);
    font-style:italic;
}

.rhythmus-neu {
    display:flex;
    gap:14px;
    padding-left:28px;
}

/* Nächste Tage laut Plan: fällige als Kästchen, die anderen grau */
.gewohnheit-vorschau {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:4px;
}

.gewohnheit-vorschau span {
    display:flex;
    flex-direction:column;
    min-width:56px;
    padding:4px 8px;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:12px;
}

.gewohnheit-vorschau span b {
    font-size:11px;
    font-weight:600;
    color:var(--muted);
}

.gewohnheit-vorschau span.frei {
    border-color:transparent;
    background:color-mix(in srgb,var(--text) 7%,transparent);
    color:var(--muted);
}

.gewohnheit-vorschau span.heute {
    border-color:var(--accent);
}

/* ---- Ernährung: Tagesziele und Essensplan (Bausteine „tagesziele“, „essensplan“) ---- */

.tz-kachel {
    position:relative;
    text-align:left;
    color:inherit;
    background:transparent;
    border-radius:8px;
}

.tz-kachel:hover {
    background:var(--hover);
}

.tz-stift {
    position:absolute;
    top:10px;
    right:12px;
    font-size:12px;
    color:var(--muted);
    opacity:0;
    transition:opacity .15s;
}

.tz-kachel:hover .tz-stift,.tz-kachel:focus-visible .tz-stift {
    opacity:1;
}

.tz-edit {
    gap:8px;
    border-color:var(--accent);
}

.tz-edit label {
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:11px;
    color:var(--muted);
}

.tz-edit .edit-input {
    width:100%;
    min-width:0;
    font-size:13px;
    color:var(--text);
}

.tz-paar {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.tz-knoepfe {
    display:flex;
    justify-content:space-between;
    gap:6px;
    margin-top:2px;
}

.tz-neu {
    justify-content:center;
    align-items:center;
    min-height:84px;
    border-style:dashed;
    color:var(--muted);
    background:transparent;
}

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

.ep-leiste {
    display:flex;
    justify-content:flex-end;
    margin:-8px 0 8px;
}

.ep-neue-mahlzeit {
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.ep-neue-mahlzeit .edit-input {
    width:180px;
}

.ep-zelle {
    display:flex;
    flex-direction:column;
    gap:1px;
}

.ep-gericht {
    display:flex;
    align-items:flex-start;
    border-radius:4px;
}

.ep-gericht:hover {
    background:var(--hover);
}

.ep-name {
    flex:1;
    min-width:0;
    padding:3px 6px;
    text-align:left;
    line-height:1.4;
    border-radius:4px;
    overflow-wrap:anywhere;
}

.ep-name:hover {
    background:transparent;
}

.ep-gericht.frei .ep-name {
    color:var(--muted);
}

.ep-gericht.fehlt .ep-name {
    color:var(--danger);
    text-decoration:line-through;
}

.ep-portionen {
    margin-left:5px;
    font-size:11px;
    color:var(--muted);
    white-space:nowrap;
}

.ep-weg {
    padding:3px 6px;
    font-size:11px;
    color:var(--muted);
    opacity:0;
}

.ep-dazu {
    align-self:flex-start;
    padding:1px 8px;
    color:var(--muted);
    opacity:.45;
}

.ep-gericht:hover .ep-weg,.ep-weg:focus-visible,.ep-zelle:hover .ep-dazu,.ep-dazu:focus-visible {
    opacity:1;
}

@media(hover:none) {
    .ep-weg,.ep-dazu,.tz-stift {
        opacity:.7;
    }
}

.ep-tag {
    display:flex;
    flex-direction:column;
}

.ep-zellen {
    flex:1;
}

.ep-summe {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:14px;
    padding:9px 4px 0;
    border-top:1px solid var(--line);
    font-size:12px;
}

.ep-naehrwert {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;
    gap:3px 6px;
}

.ep-naehrwert-name {
    color:var(--muted);
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ep-naehrwert-zahl {
    white-space:nowrap;
    color:var(--muted);
}

.ep-naehrwert-zahl strong {
    color:var(--text);
    font-weight:650;
}

.ep-naehrwert.ok .ep-naehrwert-zahl strong {
    color:var(--ok);
}

.ep-naehrwert.drueber .ep-naehrwert-zahl strong {
    color:var(--warten-text);
}

.ep-naehrwert progress {
    grid-column:1/-1;
    width:100%;
    height:4px;
}

.ep-ohne {
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}

.ep-wert {
    padding:2px 6px;
    border-radius:4px;
    background:var(--hover);
    font-weight:600;
    white-space:nowrap;
    cursor:default;
}

.ep-wert small {
    margin-left:3px;
    font-weight:400;
    color:var(--muted);
}

.ep-wert.knapp {
    color:var(--muted);
}

.ep-wert.ok {
    color:var(--ok);
}

.ep-wert.drueber {
    color:var(--warten-text);
}

.ep-dialog {
    position:fixed;
    z-index:21;
    left:50%;
    top:max(16px,8vh);
    transform:translateX(-50%);
    width:min(560px,calc(100vw - 32px));
    max-height:min(660px,calc(100vh - 32px));
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:16px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.ep-dialog-kopf {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.ep-suchzeile {
    display:flex;
    align-items:center;
    gap:10px;
}

.ep-suchzeile .ep-suche {
    flex:1;
    min-width:0;
    width:auto;
    padding:7px 10px;
}

.ep-portionen-wahl {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
}

.ep-portionen-wahl input {
    width:66px;
    padding:6px;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
}

.ep-liste {
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:120px;
    overflow-y:auto;
    margin:0 -6px;
    padding:0 6px;
}

.ep-gruppe {
    display:flex;
    flex-direction:column;
    gap:1px;
}

.ep-gruppe>small {
    padding:0 8px 2px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--muted);
}

.ep-rezept {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:7px 8px;
    text-align:left;
}

.ep-rezept:hover {
    background:var(--hover);
}

.ep-rezept small {
    white-space:nowrap;
}

.ep-eigenes {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
    padding-top:10px;
    border-top:1px solid var(--line);
}

.ep-portionen-feld {
    display:flex;
    align-items:center;
    gap:8px;
}

.ep-rezepttext {
    margin:0 0 24px;
}

.ep-freitext {
    width:100%;
    margin-bottom:16px;
    padding:8px 10px;
    font:inherit;
    font-size:20px;
    font-weight:600;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
    resize:vertical;
}

@media(max-width:640px) {
    .ep-suchzeile {
        flex-wrap:wrap;
    }

    .ep-rezept {
        flex-direction:column;
        gap:1px;
    }

    .ep-rezept small {
        white-space:normal;
    }
}

/* Rezept: „🛒 Zutaten auf die Einkaufsliste“ (ZutatenEinkaufen) – über dem Rezepttext */
.zutaten-einkauf {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    margin:0 0 20px;
    font-size:13px;
}

.zutaten-einkauf a {
    white-space:nowrap;
}

/* Kalorientracker (Baustein „kalorientracker“) und die Haken im Essensplan */
:root {
    --kt-eiweiss:#4f7fd1;
    --kt-kohlenhydrate:#d1972a;
    --kt-fett:#c45a8c;
    --kt-zuviel:#c0622f;
    --kt-flaeche:rgba(68,131,97,.08);
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme]) {
        --kt-eiweiss:#7ea6ef;
        --kt-kohlenhydrate:#e9b85a;
        --kt-fett:#e58bb4;
        --kt-zuviel:#f0935f;
        --kt-flaeche:rgba(111,191,142,.1);
    }
}

:root[data-theme="dunkel"] {
    --kt-eiweiss:#7ea6ef;
    --kt-kohlenhydrate:#e9b85a;
    --kt-fett:#e58bb4;
    --kt-zuviel:#f0935f;
    --kt-flaeche:rgba(111,191,142,.1);
}

.ep-gegessen {
    flex:none;
    margin:6px 0 0 4px;
    accent-color:var(--ok);
    cursor:pointer;
}

.kt {
    display:flex;
    flex-direction:column;
    gap:16px;
}

.kt section {
    margin:0;
}

/* Woche: ein Tag je Säule, Klick wählt ihn */
.kt-woche {
    display:flex;
    align-items:stretch;
    gap:6px;
}

.kt-pfeil {
    flex:none;
    width:30px;
    padding:0;
    font-size:18px;
    color:var(--muted);
    border-radius:10px;
}

.kt-pfeil:hover {
    color:var(--text);
    background:var(--hover);
}

.kt-wtag {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:8px 2px 7px;
    border:1px solid transparent;
    border-radius:12px;
    font-size:11px;
    color:var(--muted);
}

.kt-wtag:hover {
    background:var(--hover);
}

.kt-wtag.gewaehlt {
    color:var(--text);
    background:var(--surface);
    border-color:var(--line);
}

.kt-wtag:disabled {
    cursor:default;
    opacity:.35;
}

.kt-wtag-name {
    font-weight:600;
    letter-spacing:.3px;
}

.kt-wtag.heute .kt-wtag-name {
    color:var(--ok);
}

.kt-saeule {
    position:relative;
    width:12px;
    height:46px;
    border-radius:7px;
    background:var(--line);
    overflow:hidden;
}

.kt-saeule span {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    border-radius:7px;
    background:var(--accent);
    transition:height .3s ease;
}

.kt-wtag.ok .kt-saeule span {
    background:var(--ok);
}

.kt-wtag.drueber .kt-saeule span {
    background:var(--kt-zuviel);
}

.kt-wtag-zahl {
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

/* Tagessumme: Ring mit „übrig“, daneben Bilanz und Makros */
.kt-held {
    display:flex;
    align-items:center;
    gap:30px;
    padding:20px 24px;
    border:1px solid var(--line);
    border-radius:16px;
    background:linear-gradient(135deg,var(--kt-flaeche),transparent 65%),var(--surface);
}

.kt-ring {
    position:relative;
    flex:none;
    width:156px;
    height:156px;
}

.kt-ring svg {
    width:100%;
    height:100%;
    transform:rotate(-90deg);
}

.kt-ring circle {
    fill:none;
    stroke-width:11;
}

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

.kt-ring-wert {
    stroke:var(--ok);
    stroke-linecap:round;
    transition:stroke-dasharray .4s ease;
}

.kt-ring.drueber .kt-ring-wert {
    stroke:var(--kt-zuviel);
}

.kt-ring-text {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
}

.kt-ring-text strong {
    font-size:32px;
    font-weight:700;
    line-height:1.1;
    font-variant-numeric:tabular-nums;
}

.kt-ring-text small {
    font-size:12px;
    color:var(--muted);
}

.kt-ring.drueber .kt-ring-text strong {
    color:var(--kt-zuviel);
}

.kt-held-rechts {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.kt-held-kopf {
    display:flex;
    align-items:center;
    gap:10px;
}

.kt-held-tag {
    font-size:15px;
    font-weight:650;
}

.kt-bilanz {
    display:flex;
    flex-wrap:wrap;
    gap:8px 32px;
}

.kt-bilanz div {
    display:flex;
    flex-direction:column;
    gap:2px;
}

.kt-bilanz small {
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--muted);
}

.kt-bilanz strong {
    font-size:21px;
    font-weight:650;
    font-variant-numeric:tabular-nums;
}

.kt-bilanz strong span {
    margin-left:4px;
    font-size:12px;
    font-weight:400;
    color:var(--muted);
}

.kt-makros {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.kt-makro {
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    font-size:12.5px;
}

.kt-eiweiss {
    --kt-farbe:var(--kt-eiweiss);
}

.kt-kohlenhydrate {
    --kt-farbe:var(--kt-kohlenhydrate);
}

.kt-fett {
    --kt-farbe:var(--kt-fett);
}

.kt-makro-kopf {
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:600;
}

.kt-punkt {
    flex:none;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--kt-farbe);
}

.kt-makro-zahl {
    margin-left:auto;
    font-weight:400;
    color:var(--muted);
    white-space:nowrap;
}

.kt-makro-zahl strong {
    font-weight:650;
    color:var(--text);
}

.kt-balken {
    height:7px;
    border-radius:4px;
    background:var(--line);
    overflow:hidden;
}

.kt-balken span {
    display:block;
    height:100%;
    border-radius:4px;
    background:var(--kt-farbe);
    transition:width .3s ease;
}

.kt-makro small {
    font-size:11px;
}

.kt-hinweis {
    margin:0;
    font-size:12px;
    color:var(--muted);
}

/* Mahlzeiten als Karten; abgehakte Gerichte zugeklappt, ein Klick zeigt die Zutaten */
.kt-mahlzeiten {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    align-items:start;
    gap:12px;
}

.kt-mahlzeit {
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--bg);
}

.kt-mahlzeit-kopf {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 10px 10px 12px;
}

.kt-mahlzeit-icon {
    flex:none;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:11px;
    font-size:18px;
    background:var(--surface);
}

.kt-mahlzeit-name {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.3;
}

.kt-mahlzeit-name strong {
    font-size:14px;
}

.kt-mahlzeit-name small {
    font-size:12px;
    font-variant-numeric:tabular-nums;
}

.kt-plus {
    flex:none;
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    padding:0;
    border:1px solid transparent;
    border-radius:50%;
    font-size:15px;
    color:var(--ok);
    background:var(--kt-flaeche);
}

.kt-plus:hover {
    border-color:var(--ok);
    background:var(--kt-flaeche);
}

.kt-eintraege {
    display:flex;
    flex-direction:column;
    gap:1px;
    padding:6px;
    border-top:1px solid var(--line);
}

.kt-gericht {
    border-radius:8px;
}

.kt-gericht.offen {
    padding-bottom:4px;
    background:var(--surface);
}

.kt-zeile,.kt-eintrag {
    display:flex;
    align-items:center;
    gap:4px;
    border-radius:8px;
}

.kt-zeile:hover,.kt-eintrag:hover {
    background:var(--hover);
}

.kt-zeile:hover .ep-weg,.kt-eintrag:hover .ep-weg {
    opacity:1;
}

.kt-gericht-name {
    flex:1;
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:6px;
    padding:6px;
    text-align:left;
    font-size:13px;
    font-weight:600;
}

.kt-gericht-name:hover {
    background:transparent;
}

.kt-pfeilchen {
    flex:none;
    display:inline-block;
    width:10px;
    color:var(--muted);
    transition:transform .15s ease;
}

.kt-gericht.offen .kt-pfeilchen {
    transform:rotate(90deg);
}

.kt-gericht-titel {
    min-width:0;
    overflow-wrap:anywhere;
}

.kt-gericht-titel small {
    margin-left:6px;
    font-size:11.5px;
    font-weight:400;
}

.kt-name {
    flex:1;
    min-width:0;
    padding:6px;
    font-size:13px;
    line-height:1.4;
    text-align:left;
    overflow-wrap:anywhere;
}

.kt-name:hover,.kt-name:disabled {
    background:transparent;
}

.kt-name:disabled {
    color:inherit;
    cursor:default;
    opacity:1;
}

.kt-zutat .kt-name {
    padding-left:22px;
    font-size:12.5px;
    color:var(--muted);
}

.kt-wert {
    flex:none;
    font-size:12.5px;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.kt-zutat .kt-wert,.kt-eintrag.geschaetzt .kt-wert {
    color:var(--muted);
}

.kt-eintrag.geschaetzt .kt-name {
    font-style:italic;
}

.kt-ergaenzen {
    flex:none;
}

/* Eintragen-Fenster */
.kt-lm-link {
    margin-right:auto;
    align-self:center;
}

.kt-gewaehlt {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    padding:10px 12px;
    border:1px solid var(--accent);
    border-radius:8px;
    font-size:13px;
}

.kt-liste .kt-aktiv {
    background:var(--hover);
    font-weight:600;
}

.kt-form {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
}

.kt-feld {
    display:flex;
    flex-direction:column;
    gap:3px;
    font-size:12px;
    color:var(--muted);
}

.kt-feld .edit-input {
    width:100%;
    min-width:0;
    font-size:14px;
    color:var(--text);
}

.kt-breit {
    grid-column:1/-1;
}

@media(max-width:640px) {
    .kt-woche {
        gap:2px;
    }

    .kt-pfeil {
        width:22px;
    }

    .kt-wtag {
        padding:6px 0;
        font-size:10px;
    }

    .kt-held {
        flex-direction:column;
        align-items:stretch;
        gap:18px;
        padding:18px 16px;
    }

    .kt-ring {
        align-self:center;
    }

    .kt-held-kopf,.kt-bilanz {
        justify-content:center;
    }

    .kt-makros,.kt-form {
        grid-template-columns:1fr;
    }
}

/* ---- KI verbinden: welche CLI, wie alt (Jarvis-Chat & KI) ---- */
.ki-cli-warnung {
    margin:6px 0 0;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid var(--danger);
    color:var(--text);
    font-size:13px;
    overflow-wrap:anywhere;
}

.ki-cli-warnung span {
    display:block;
    margin-top:4px;
    color:var(--muted);
}

.ki-cli-pfad {
    margin:4px 0 0;
    font-size:12px;
    overflow-wrap:anywhere;
}

.ki-cli-pfad > span + span::before {
    content:" · ";
}

.ki-cli-pfad code {
    font-size:12px;
}

/* ---- Jarvis-Status (KiStatus) und Knöpfe unter Fehlern im Chat (FehlerAktionen) – Jarvis-Chat & KI ---- */
:root {
    --ki-warn:#b7791f;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --ki-warn:#e8b44f;
    }
}

:root[data-theme="dunkel"] {
    --ki-warn:#e8b44f;
}

.ki-status {
    color:inherit;
    text-decoration:none;
    white-space:nowrap;
}

.ki-status:hover {
    text-decoration:underline;
}

.ki-status.warn {
    color:var(--ki-warn);
}

.ki-status-punkt {
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:6px;
    border-radius:50%;
    vertical-align:1px;
    background:var(--muted);
}

.ki-status-punkt.an {
    background:var(--ok);
}

.ki-status-punkt.warn {
    background:var(--ki-warn);
}

.ki-status-punkt.aus {
    background:var(--danger);
}

/* Am Jarvis-Symbol im Dock unten rechts – ohne KI gibt es das Symbol nicht, dann am ☰; bereit = kein Punkt, damit das
   Dock ruhig bleibt. */
.dock-jarvis .ki-status-punkt,.dock-menu .ki-status-punkt {
    position:absolute;
    right:5px;
    bottom:5px;
    width:9px;
    height:9px;
    margin:0;
    box-shadow:0 0 0 2px var(--surface);
}

.dock-jarvis .ki-status-punkt.an,.dock-menu .ki-status-punkt.an {
    display:none;
}

.ki-fehler-aktionen {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-top:10px;
}

.ki-fehler-knopf {
    padding:4px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, currentColor 35%, transparent);
    background:transparent;
    color:inherit;
    font:inherit;
    font-size:12px;
    text-decoration:none;
    cursor:pointer;
}

.ki-fehler-knopf:hover:not(:disabled) {
    border-color:currentColor;
}

.ki-fehler-knopf:disabled {
    opacity:.5;
    cursor:default;
}

.ki-fehler-meldung {
    font-size:12px;
    opacity:.8;
}

/* ---- Ziehen überall gleich (Sortierbar/sortieren.js): Abbilder, die außerhalb ihres Rahmens am <body> hängen ---- */
.check-gruppe {
    display:flex;
    flex-direction:column;
}

.drag-geist.check-item,.drag-geist.block,.drag-geist.exercise-card,.drag-geist.db-karte,.drag-geist.abteilung {
    border:1px solid var(--line);
    background:var(--surface);
}

.drag-geist.mblock {
    padding:4px 8px 4px 44px;
    border:1px solid var(--line);
    background:var(--bg);
}

.drag-geist.note-link,.drag-geist.db-tag-eintrag {
    display:block;
    padding:4px 10px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--text);
}

/* Jarvis bleibt dunkel – sein Abbild auch. */
.drag-geist.jwidget {
    padding:10px 12px;
    border:1px solid rgba(80,200,255,.35);
    background:#0b1620;
    color:#d8e9f2;
}

.jwidget-tools .sortier-griff {
    color:rgba(140,210,240,.7);
}

.jwidget-tools .sortier-griff:hover {
    background:rgba(80,200,255,.12);
    color:#e6f7ff;
}

.block-tools .sortier-griff {
    margin-right:2px;
}

/* ---- Jarvis: Leiste wie auf allen Seiten, Browser freischalten (Jarvis-Chat & KI, Runde 3) ---- */
.jarvis {
    padding-bottom:var(--dock);
}

/* Hauptfenster der Mac-App: kein Dock – die Leiste steht unten in der Seite. */
.jarvis-eigene-leiste {
    position:static;
    padding:8px 16px 0;
    pointer-events:auto;
    flex-shrink:0;
}

.ki-freischalten {
    display:grid;
    gap:8px;
    justify-items:start;
}

.ki-freischalten p {
    margin:0;
}

.ki-freischalten-meldung {
    color:var(--danger);
    font-size:13px;
}

.ki-code {
    margin:2px 0;
    font-size:30px;
    font-weight:700;
    letter-spacing:.32em;
    font-variant-numeric:tabular-nums;
}

.ki-code.klein {
    font-size:20px;
    letter-spacing:.24em;
}

.ki-anfragen li {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.ki-anfragen li > div {
    flex:1 1 220px;
}

/* ---- Handy-App (Rahmen mit Telefon): unten nur Chat-Balken und ☰, das Menü als Liste über den ganzen Bildschirm ----
   Gilt nur unter .telefon – das setzt der Rahmen nur, wenn Lebensplaner.Mobil den Dienst Telefon registriert. */

.telefon .dock {
    padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
}

.telefon .dock-leiste {
    flex:1 1 auto;
    max-width:640px;
    gap:6px;
}

.telefon .dock .chat-dock {
    flex:1 1 auto;
    width:auto;
    min-width:0;
    margin:0;
}

.telefon .dock-menu .pulse {
    position:absolute;
    top:5px;
    right:5px;
}

/* Das Menü deckt alles ab, das Dock bleibt darüber: ☰ wird ✕ an derselben Stelle. */
.telefon .sidebar {
    right:0;
    width:auto;
    gap:2px;
    padding:calc(env(safe-area-inset-top) + 12px) max(14px,env(safe-area-inset-right)) calc(var(--dock) + env(safe-area-inset-bottom) + 12px) max(14px,env(safe-area-inset-left));
    background:var(--bg);
    border-right:0;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    opacity:0;
    transform:translateY(14px);
    transition:transform .2s ease,opacity .2s ease,visibility 0s linear .2s;
}

.telefon.menu-open .sidebar {
    opacity:1;
    transform:none;
    box-shadow:none;
    transition:transform .2s ease,opacity .2s ease;
}

.telefon.menu-open .sidebar-backdrop,.telefon .sidebar-close {
    display:none;
}

.telefon.menu-open .dock {
    z-index:45;
    visibility:visible;
}

.telefon .brand {
    font-size:17px;
    padding:4px 12px 12px;
}

.telefon .brand-mark {
    width:22px;
    height:22px;
}

/* Fingergerecht: mindestens 44 pt hoch, ＋ immer sichtbar (kein Drüberfahren auf dem Telefon). */
.telefon .nav-item {
    min-height:46px;
    gap:12px;
    padding:8px 12px;
    border-radius:10px;
    font-size:16px;
}

.telefon .nav-icon {
    width:24px;
    font-size:18px;
}

.telefon .nav-section {
    font-size:12px;
    padding:20px 12px 6px;
}

.telefon .nav-projekt-kopf .nav-item {
    padding-right:52px;
}

.telefon .nav-neu {
    width:40px;
    height:40px;
    margin-top:-20px;
    border-radius:10px;
    font-size:19px;
    opacity:1;
}

.telefon .nav-projekt-kopf:hover .nav-chevron {
    visibility:visible;
}

.telefon .nav-chat {
    padding-left:48px;
    font-size:15px;
}

.telefon .nav-leer {
    padding:4px 12px 8px 48px;
    font-size:13px;
}

.telefon .nav-ki {
    margin:8px 12px 0;
    font-size:13px;
}

.telefon .konto-name {
    padding:8px 12px;
    font-size:13px;
}

/* Einstellungen → KI → Sprache */
.sprache-stimme {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:12px 18px;
    margin:12px 0 6px;
}
.sprache-stimme label {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}
.sprache-stimme select {
    max-width:100%;
}

/* Einstellungen → KI → Sprache: nur einfache Stimmen da – Hinweis und „Stimmen laden …“ (Mac). */
.sprache-hinweis {
    margin:10px 0 4px;
    padding:8px 12px;
    border-radius:8px;
    background:color-mix(in srgb,var(--cyan) 12%,transparent);
    color:var(--text);
}
.sprache-laden {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px;
    margin:8px 0 4px;
}
.sprache-laden p {
    flex:1 1 280px;
    margin:0;
}
/* Admin (/admin, nur Web): Kacheln mit dem Stand des Servers. Nur Variablen – hell und dunkel ohne eigene Regeln. */
.admin-kopfzeile { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.admin-kopfzeile h2 { margin:0; }
.admin-kacheln { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin:0; }
.admin-kacheln>div { padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); min-width:0; }
.admin-kacheln dt { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.admin-kacheln dd { margin:6px 0 2px; font-size:26px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.admin-kacheln small { display:block; }
.admin-seite .konto-aktionen a.outline { text-decoration:none; }
/* Die Admin-Seite steht ohne Rahmen (kein Konto): eigener Rand, Aktionen als echte Formulare nebeneinander. */
.admin-seite { margin:0 auto; padding:40px 24px 80px; }
.admin-seite .page-heading form { margin-top:14px; }
.admin-seite .konto-aktionen form { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.admin-seite .admin-loeschen input { width:210px; max-width:100%; }
.admin-seite a.outline.small { text-decoration:none; }