*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ═══════════════════════════════════════════════════
   ERSCHEINUNGSBILD „btBasics" (Vorgabe)
   1:1 die Optik der Konto-Seite (konto.btbasics.at):
   tiefes Blaugrau, blauer Akzent, Punktraster im Grund.
   Zweites Erscheinungsbild „Retro" = das frühere warme
   Creme/Orange (siehe [data-theme="retro"] weiter unten).
   ═══════════════════════════════════════════════════ */
:root{
  --bg-primary:#0F141B;--bg-secondary:#11161E;--bg-tertiary:#1B2431;
  --bg-card:#161D27;--bg-input:#0F141B;--bg-hover:rgba(255,255,255,.06);
  --text-primary:#E6EDF5;--text-secondary:#8C98A8;--text-muted:#5D6775;
  --border:rgba(255,255,255,.16);--border-light:rgba(255,255,255,.10);
  --accent:#378ADD;--accent-hover:#2F78C4;--accent-bg:rgba(55,138,221,.16);--accent-on:#9CC4F0;
  --ok:#46C267;--warn:#E6B34A;--danger:#E2564A;
  --shadow:0 1px 2px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.55);
  --radius:10px;--radius-sm:7px;--radius-lg:12px;
  --color-bug:#E2564A;--color-feature:#46C267;--color-idea:#E6B34A;
  --color-problem:#A855F7;--color-note:#8C98A8;--color-thought:#378ADD;
  --font-ui:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
[data-theme="retro"]{
  --bg-primary:#1A1816;--bg-secondary:#242220;--bg-tertiary:#2E2C28;
  --bg-card:#2A2826;--bg-input:#1E1C1A;--bg-hover:#343230;
  --text-primary:#F0EAE0;--text-secondary:#B0A898;--text-muted:#7A7268;
  --border:#3A3836;--border-light:#2E2C28;
  --accent:#E87F3A;--accent-hover:#F09050;--accent-bg:#3A2A1A;--accent-on:#F5B070;
  --ok:#4ADE80;--warn:#FBBF24;--danger:#EF4444;
  --shadow:0 1px 3px rgba(0,0,0,.2);--shadow-lg:0 4px 12px rgba(0,0,0,.3);
  --radius:10px;--radius-sm:6px;--radius-lg:14px;
  --color-bug:#EF4444;--color-feature:#22C55E;--color-idea:#F59E0B;
  --color-problem:#A855F7;--color-note:#8C8C8C;--color-thought:#3B82F6;
}
body{font-family:var(--font-ui);background:var(--bg-primary);color:var(--text-primary);
  font-size:13px;line-height:1.5;height:100vh;height:100dvh;overflow:hidden}

/* Punktraster + weicher Schein wie auf der Konto-Seite. Im Retro-Bild aus. */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-color:var(--bg-primary);
  background-image:
    radial-gradient(circle at 50% 22%, rgba(55,138,221,.14), transparent 60%),
    radial-gradient(rgba(94,150,214,.16) 1.3px, transparent 1.5px);
  background-size:auto,18px 18px}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50vw) var(--my,50vh),
    rgba(55,138,221,.11),transparent 65%)}
[data-theme="retro"] body::before,[data-theme="retro"] body::after{display:none}

.app-layout{display:flex;height:100vh;height:100dvh}

/* ═══════════════════════════════════════════════════
   SEITENLEISTE (Neubau 26.07.2026)
   Gleichmäßige Abstände, klar getrennte Abschnitte,
   Lucide-Strichsymbole statt Emojis, Kategorien per
   Ziehen sortierbar.
   ═══════════════════════════════════════════════════ */
.sidebar{width:268px;background:var(--bg-secondary);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 12px 12px;
  display:flex;flex-direction:column;gap:6px}
.sidebar-logo{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  color:var(--text-primary);padding:14px 14px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-logo img{width:26px;height:26px;border-radius:6px}
.sidebar-foot{flex-shrink:0;border-top:1px solid var(--border);padding:10px 12px 12px;
  display:flex;flex-direction:column;gap:8px}

/* Abschnitt = Überschrift + Inhalt, überall gleicher Rhythmus */
.sb-section{display:flex;flex-direction:column;gap:4px;padding-top:12px}
.sb-section + .sb-section{border-top:1px solid var(--border-light)}
.sidebar-section-label{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:0 4px 2px;margin:0}
.sidebar-section-label .sb-label-btn{margin-left:auto;border:0;background:none;color:var(--text-muted);
  cursor:pointer;padding:2px;border-radius:4px;display:inline-flex}
.sidebar-section-label .sb-label-btn:hover{background:var(--bg-hover);color:var(--accent-on)}

/* Zeilen (Kategorie, Ansicht, Navigation) — einheitliche Höhe */
.sb-row,.workspace-item,.archive-toggle{display:flex;align-items:center;gap:9px;
  min-height:34px;padding:0 9px;border-radius:var(--radius-sm);cursor:pointer;
  color:var(--text-secondary);font-size:13px;transition:background .12s,color .12s;
  border:1px solid transparent;user-select:none}
.sb-row:hover,.workspace-item:hover,.archive-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}
.sb-row.active,.workspace-item.active,.archive-toggle.active{background:var(--accent-bg);
  color:var(--accent-on);border-color:rgba(55,138,221,.35);font-weight:600}
.sb-row svg,.workspace-item svg,.archive-toggle svg{flex-shrink:0;opacity:.85}
.workspace-item .ws-name,.sb-row .sb-row-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ziehgriff + Menüknopf der Kategorien */
.workspace-item{padding-left:4px}
.workspace-item .ws-grip{width:16px;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);cursor:grab;opacity:0;transition:opacity .12s;flex-shrink:0}
.workspace-item:hover .ws-grip,.workspace-item.active .ws-grip{opacity:.7}
.workspace-item .ws-grip:active{cursor:grabbing}
.workspace-item .ws-menu-btn{display:none;border:none;background:none;color:var(--text-muted);
  cursor:pointer;padding:3px;line-height:0;border-radius:4px;flex-shrink:0}
.workspace-item:hover .ws-menu-btn,.workspace-item.active .ws-menu-btn{display:inline-flex}
.workspace-item .ws-menu-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.workspace-item.ws-dragging{opacity:.4}
.workspace-item.ws-over{box-shadow:inset 0 2px 0 0 var(--accent)}
.workspace-item.ws-over-end{box-shadow:inset 0 -2px 0 0 var(--accent)}
@media(max-width:768px){.workspace-item .ws-menu-btn,.workspace-item .ws-grip{display:inline-flex;opacity:.7}}

.search-input{width:100%;padding:8px 11px;background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;outline:none;
  font-family:inherit;transition:border-color .15s,box-shadow .15s}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.search-input::placeholder{color:var(--text-muted)}
.sb-search{position:relative;margin-top:12px}
.sb-search .search-input{padding-left:31px}
.sb-search .sb-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;display:flex}

.tag-chips{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{padding:3px 10px;border-radius:20px;font-size:12px;cursor:pointer;font-weight:500;transition:all .15s;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}
.tag-chip:hover,.tag-chip.active{background:var(--accent-bg);color:var(--accent-on);border-color:var(--accent)}
.prio-badge,.prio-chip{padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--border);transition:all .15s}
.prio-filter{display:flex;gap:5px;flex-wrap:wrap;padding:2px 4px}
.prio-1{background:rgba(226,86,74,.16);color:#F08A80;border-color:rgba(226,86,74,.45)}
.prio-2{background:rgba(230,140,74,.16);color:#F0A968;border-color:rgba(230,140,74,.45)}
.prio-3{background:rgba(230,179,74,.16);color:#E6C87A;border-color:rgba(230,179,74,.45)}
.prio-4{background:rgba(55,138,221,.16);color:#9CC4F0;border-color:rgba(55,138,221,.45)}
.prio-5{background:rgba(70,194,103,.16);color:#7FD79A;border-color:rgba(70,194,103,.45)}
.prio-chip.active{box-shadow:0 0 0 2px currentColor}
.pwa-install-banner{padding:0 0 8px}
.pwa-install-banner .btn{animation:pwa-pulse 2s ease-in-out 1}
@keyframes pwa-pulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 12px var(--accent)}}

/* Umschalter der beiden Erscheinungsbilder */
.theme-switch{display:flex;gap:3px;padding:3px;background:var(--bg-input);
  border:1px solid var(--border);border-radius:var(--radius-sm)}
.theme-switch button{flex:1;padding:6px 4px;border:0;background:transparent;color:var(--text-secondary);
  font-size:11px;font-weight:600;border-radius:5px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:5px;transition:all .15s}
.theme-switch button.active{background:var(--accent);color:#fff}
.theme-switch button:not(.active):hover{background:var(--bg-hover);color:var(--text-primary)}

/* Feed */
.feed{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:var(--bg-primary)}
.feed-content{flex:1;overflow-y:auto;min-height:0;padding:20px}
.quick-input{margin:18px 18px 0;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);display:flex;gap:16px;align-items:flex-start}
.quick-input-left{flex:1;min-width:0}
.quick-input-field{width:100%;padding:10px 0;border:none;background:transparent;color:var(--text-primary);font-size:15px;outline:none;resize:none;font-family:inherit;line-height:1.5;min-height:42px;max-height:300px;overflow-y:auto}
.quick-input-field::placeholder{color:var(--text-muted)}
.quick-input-actions{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light)}
.quick-input-images{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.quick-input-thumb{width:160px;height:120px;border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--border);cursor:pointer}

/* Buttons — Form und Maße wie auf der Konto-Seite */
.btn{padding:7px 13px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;
  border:1px solid transparent;transition:all .15s;display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;line-height:1.3}
.btn svg{flex-shrink:0}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-hover)}
.btn-quiet{background:transparent;color:var(--accent-on);border-color:transparent}
.btn-quiet:hover{background:var(--accent-bg)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(.9)}
.btn-claude{background:var(--accent-bg);color:var(--accent-on);border:1px solid var(--accent)}
.btn-claude:hover{background:var(--accent);color:#fff}
.btn-icon{padding:6px;background:transparent;color:var(--text-muted);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}

/* Entry Cards */
.entry-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:13px 15px;margin-bottom:9px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.entry-card:hover{border-color:rgba(55,138,221,.45)}
.entry-card.selected{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 2px var(--accent)}
.entry-card.focused{outline:2px dashed var(--accent);outline-offset:2px}
.entry-card.selected.focused{outline:2px dashed var(--accent);outline-offset:2px}
.entry-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.entry-type-badge{padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}
.entry-time{color:var(--text-muted);font-size:12px}
.entry-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.entry-preview{font-size:13px;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word}
.entry-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.entry-card-tags{display:flex;gap:4px;flex-wrap:wrap}
.entry-thumb{width:120px;height:80px;border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--border);cursor:pointer;transition:all .2s}
/* Mehrere Vorschauen nebeneinander (27.07.2026) */
.entry-kacheln{display:flex;align-items:center;gap:4px}
.entry-kachel{width:120px;height:80px;border-radius:var(--radius-sm);border:1px solid var(--border);flex:0 0 auto;box-sizing:border-box}
.entry-kachel.kachel-klein{width:48px;height:40px}
.entry-datei,.entry-mehr{display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);color:var(--text-muted)}
.entry-mehr{font-size:11px;font-weight:600;color:var(--text-secondary);cursor:default}

/* Hover preview */
.thumb-preview{display:none;position:fixed;z-index:8900;pointer-events:none;border-radius:var(--radius);box-shadow:var(--shadow-lg);border:2px solid var(--border);object-fit:contain;background:var(--bg-primary)}

/* Fullscreen lightbox */
.lightbox{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.85);justify-content:center;align-items:center;cursor:pointer}
.lightbox.open{display:flex}
.lightbox img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:var(--radius)}
.lightbox-close{position:fixed;top:16px;right:20px;color:#fff;font-size:28px;cursor:pointer;z-index:301;background:rgba(0,0,0,.5);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none}

/* Claude Panel */
.claude-panel-wrapper{position:relative;flex-shrink:0;display:flex}
.claude-panel{width:0;background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease}
.claude-panel.open{width:25vw;min-width:300px}
.claude-resize{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:50;display:none}
.claude-resize:hover,.claude-resize:active{background:var(--accent);opacity:.4}
.claude-header{display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--border)}
.claude-avatar{width:32px;height:32px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center}
.claude-avatar img{width:18px;height:18px;filter:brightness(10)}
.claude-header-title{font-weight:700;font-size:15px;color:var(--accent);flex:1}
.claude-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.claude-msg{padding:10px 14px;border-radius:var(--radius);font-size:14px;line-height:1.5}
.claude-msg.assistant{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary)}
.claude-msg.user{background:var(--accent-bg);color:var(--text-primary);align-self:flex-end;max-width:85%}
.claude-msg-role{font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.claude-input-area{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px}
.claude-input{flex:1;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:14px;outline:none;font-family:inherit}
.claude-input:focus{border-color:var(--accent)}
.claude-input::placeholder{color:var(--text-muted)}
.claude-actions{padding:8px 16px;border-top:1px solid var(--border-light);display:flex;gap:8px}

/* Entry Detail Overlay — Aufbau siehe Abschnitt „PUNKT-ANSICHT" am Dateiende */
.entry-detail-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100;justify-content:center;align-items:center;padding:16px}
.entry-detail-overlay.open{display:flex}

/* Voice Assistant */
.btn-voice{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);justify-content:flex-start;gap:8px}
.btn-voice:hover{background:var(--bg-hover);border-color:var(--accent)}
.btn-voice.voice-standby{background:rgba(70,194,103,.14);color:var(--ok);border-color:rgba(70,194,103,.45)}
.btn-voice.voice-command{background:rgba(230,179,74,.14);color:var(--warn);border-color:rgba(230,179,74,.45);animation:voice-btn-pulse 1.2s ease-in-out infinite}

@keyframes voice-btn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(234,88,12,.45)}50%{box-shadow:0 0 0 8px rgba(234,88,12,0)}}

.voice-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.dot-off{background:var(--text-muted)}
.dot-standby{background:#22c55e;animation:dot-pulse-green 1.5s ease-in-out infinite}
.dot-command{background:#f97316;animation:dot-pulse-orange .5s ease-in-out infinite}

@keyframes dot-pulse-green{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@keyframes dot-pulse-orange{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.4)}}

/* Voice Toast */
.voice-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);padding:10px 18px;font-size:13px;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:500;white-space:nowrap}
.voice-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── Alarm Ringing Fullscreen ── */
#alarm-ringing{display:none;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;flex-direction:column}
.alarm-ring-bg{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.alarm-ring-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 40px;max-width:340px;width:90%}
.alarm-ring-icon{font-size:64px;animation:alarm-bounce 1s ease-in-out infinite}
.alarm-ring-time{font-size:56px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:2px}
.alarm-ring-label{font-size:16px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:3px;font-weight:600}
.alarm-ring-buttons{display:flex;gap:16px;margin-top:24px;width:100%}
.alarm-ring-btn{flex:1;padding:18px 12px;border:none;border-radius:16px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .1s}
.alarm-ring-btn:active{transform:scale(.95)}
.alarm-snooze{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
.alarm-dismiss{background:var(--accent);color:#fff}
@keyframes alarm-bounce{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-12deg)}75%{transform:translateY(-8px) rotate(12deg)}}

/* Utilities */
/* Action buttons on cards */
.btn-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:var(--bg-tertiary);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);transition:all .15s}
.btn-action:hover{background:var(--accent-bg);color:var(--accent)}
.btn-action.bulk-danger:hover{background:rgba(226,86,74,.18);color:var(--danger)}

/* Papierkorb-Umschalter — Grundform kommt aus .sb-row weiter oben */
.archive-toggle{margin:0}

/* Bulk action bar */
.bulk-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--accent-bg);border-bottom:1px solid var(--accent);font-size:13px;font-weight:600;color:var(--accent)}

.drop-active{border:2px dashed var(--accent)!important;background:var(--accent-bg)!important}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-dots{display:flex;align-items:center;gap:2px;color:var(--text-muted);font-size:13px}
.loading-dots .dots::after{content:'';animation:dots 1.5s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.tag-suggestions{display:flex;gap:6px;flex-wrap:wrap}
.tag-suggestion{padding:3px 10px;border-radius:20px;font-size:12px;cursor:pointer;border:1px dashed;opacity:.8;transition:all .15s}
.tag-suggestion:hover{opacity:1;border-style:solid}
code{background:var(--bg-tertiary);padding:1px 4px;border-radius:3px;font-size:13px}
pre{background:var(--bg-tertiary);padding:12px;border-radius:var(--radius-sm);overflow-x:auto;margin:8px 0}
pre code{background:none;padding:0}

/* Context Menu */
.context-menu{position:fixed;z-index:400;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);min-width:160px;padding:4px 0;display:none;max-height:66vh;overflow-y:auto}
.context-menu-item{padding:8px 14px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .1s;display:flex;align-items:center;gap:9px}
.context-menu-item svg{flex-shrink:0;opacity:.8}
.context-menu-item:hover{background:var(--bg-hover)}
.context-menu-item.danger{color:var(--danger)}
.context-menu-item.danger:hover{background:rgba(226,86,74,.18)}

/* Snippets Panel (Desktop only, links) */
.snippets-panel{width:0;background:var(--bg-secondary);border-right:1px solid var(--border);display:none;flex-direction:column;overflow:hidden;transition:width .25s ease;flex-shrink:0}
@media(min-width:1024px){.snippets-panel{display:flex}.snippets-panel.open{width:300px}}
.snippets-header{display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--border)}
.snippets-header-title{font-weight:700;font-size:15px;color:var(--accent);flex:1}
.snippets-toolbar{padding:8px 12px;border-bottom:1px solid var(--border-light);display:flex;gap:8px}
.snippets-list{flex:1;overflow-y:auto;padding:8px 0}
.snip-category{margin-bottom:4px}
.snip-cat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:10px 14px 4px}
.snip-item{padding:8px 14px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border-light)}
.snip-item:hover{background:var(--bg-hover)}
.snip-item.copied{background:var(--accent-bg)}
.snip-item-header{display:flex;align-items:center;gap:6px}
.snip-icon{font-size:14px;flex-shrink:0}
.snip-title{font-size:13px;font-weight:600;color:var(--text-primary);flex:1}
.snip-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.snip-item:hover .snip-actions{opacity:1}
.snip-btn{background:none;border:none;cursor:pointer;font-size:12px;padding:2px 4px;border-radius:3px}
.snip-btn:hover{background:var(--bg-tertiary)}
.snip-text{font-size:12px;color:var(--text-secondary);margin-top:3px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.snip-form{padding:8px 14px}
.snip-form-input{width:100%;padding:6px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;outline:none;margin-bottom:6px;font-family:inherit}
.snip-form-input:focus,.snip-form-textarea:focus{border-color:var(--accent)}
.snip-form-textarea{width:100%;padding:6px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;outline:none;resize:vertical;font-family:inherit}
.btn-sm{padding:4px 10px;font-size:12px}
@media(max-width:1023px){#btn-toggle-snippets{display:none!important}}

/* Pinned entries */
.entry-card.pinned{border-left:3px solid var(--accent);background:var(--accent-bg)}
.btn-pin{opacity:.4;transition:opacity .15s}
.btn-pin:hover,.btn-pin.pinned{opacity:1;color:var(--accent)}

/* ===== Sidebar Navigation ===== */
.sidebar-nav{display:flex;gap:4px}
.sidebar-nav-btn{flex:1;padding:8px 0;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-input);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;
  transition:all .15s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px}
.sidebar-nav-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.sidebar-nav-btn:hover:not(.active){background:var(--bg-hover);color:var(--text-primary)}

/* ===== Smart Home ===== */
.sh-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px;gap:12px}
.sh-header h2{font-size:18px;font-weight:700;color:var(--text-primary);margin:0}
.sh-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sh-header-btns{display:flex;gap:4px}
#smarthome{position:relative}
.sh-error,.sh-empty{text-align:center;padding:48px 20px;color:var(--text-muted);font-size:14px}

/* Room Card */
#smarthome-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;padding:8px 16px 16px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;align-content:start}
.sh-room{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:0;transition:border-color .2s,box-shadow .2s}
.sh-room.sh-on{border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:var(--shadow)}
.sh-room-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border-light);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.sh-room-toggle{width:48px;height:48px;border-radius:50%;background:var(--bg-tertiary);border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.sh-room-toggle.active{background:var(--accent-bg);border-color:var(--accent)}
.sh-room-toggle:active{transform:scale(.9)}
.sh-room-icon{font-size:22px;transition:transform .2s}
.sh-room-info{flex:1;display:flex;flex-direction:column;gap:2px}
.sh-room-name{font-size:16px;font-weight:700;color:var(--text-primary)}
.sh-room-count{font-size:12px;color:var(--text-muted);font-weight:500}
.sh-room-slider-row{display:flex;align-items:center;gap:10px;padding:12px 20px 8px}
.sh-room-slider-row .sh-bri-val{min-width:40px;font-size:13px}
.sh-room-temp-row{display:flex;align-items:center;gap:8px;padding:4px 20px 12px}

/* Presets */
.sh-presets{display:flex;gap:6px}
.sh-preset{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-secondary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;-webkit-tap-highlight-color:transparent}
.sh-preset:hover,.sh-preset:active{background:var(--accent);color:#fff;border-color:var(--accent)}
.sh-preset:active{transform:scale(.9)}

/* Scene Bar */
.sh-scene-bar{display:flex;gap:6px;padding:8px 20px;flex-wrap:wrap}
.sh-scene-btn{white-space:nowrap;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.sh-scene-btn:hover,.sh-scene-btn:active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.sh-scene-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.sh-scene-stop{padding:6px 12px;border:1px solid #e74c3c;border-radius:var(--radius-full);background:rgba(231,76,60,.1);color:#e74c3c;font-size:12px;cursor:pointer;transition:all .15s}
.sh-scene-stop:hover{background:#e74c3c;color:#fff}
.sh-sleep-btn{padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s;margin-left:auto}
.sh-sleep-btn:hover,.sh-sleep-btn.active{background:#2c3e50;color:#ecf0f1;border-color:#2c3e50}

/* Speed Slider */
.sh-speed-row{display:flex;align-items:center;gap:8px;padding:4px 20px 8px}
.sh-speed-label{font-size:14px;flex-shrink:0;line-height:1}
.sh-speed-slider{-webkit-appearance:none;appearance:none;flex:1;height:5px;border-radius:3px;outline:none;cursor:pointer;background:linear-gradient(to right,var(--accent) 50%,var(--bg-tertiary) 50%)}
.sh-speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-card);box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:grab}
.sh-speed-val{font-size:12px;color:var(--text-muted);min-width:32px;font-variant-numeric:tabular-nums;font-weight:600}

/* Alarm Panel */
.sh-alarm-panel{position:absolute;inset:0;z-index:10;background:var(--bg-primary);flex-direction:column;overflow-y:auto}
.sh-alarm-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.sh-alarm-header h3{margin:0;font-size:18px}
.sh-alarm-content{padding:16px 20px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto}
.sh-alarms-list{display:flex;flex-direction:column;gap:10px}
.sh-alarm-item{padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-secondary)}
.sh-alarm-item.running{border-color:var(--accent);background:var(--accent-bg)}
.sh-alarm-item.disabled{opacity:.5}
.sh-alarm-top{display:flex;align-items:center;gap:12px}
.sh-alarm-time{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.sh-alarm-room{font-size:14px;color:var(--text-secondary);flex:1}
.sh-alarm-toggle-label{position:relative;width:44px;height:24px;cursor:pointer}
.sh-alarm-toggle-label input{display:none}
.sh-alarm-switch{position:absolute;inset:0;background:var(--bg-tertiary);border-radius:12px;transition:background .2s;border:1px solid var(--border)}
.sh-alarm-switch::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sh-alarm-toggle-label input:checked + .sh-alarm-switch{background:var(--accent);border-color:var(--accent)}
.sh-alarm-toggle-label input:checked + .sh-alarm-switch::after{transform:translateX(20px)}
.sh-alarm-delete{background:none;border:none;font-size:18px;cursor:pointer;padding:4px;opacity:.5;transition:opacity .15s}
.sh-alarm-delete:hover{opacity:1}
.sh-alarm-days{font-size:12px;color:var(--text-muted);margin-top:4px}
.sh-alarm-details{font-size:12px;color:var(--text-muted);margin-top:2px}
.sh-alarm-empty{text-align:center;padding:20px;color:var(--text-muted)}
.sh-alarm-form{border-top:1px solid var(--border);padding-top:16px}
.sh-alarm-form h4{margin:0 0 12px;font-size:15px;color:var(--text-primary)}
.sh-alarm-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sh-alarm-row label{width:120px;font-size:13px;color:var(--text-secondary);flex-shrink:0}
.sh-alarm-row input,.sh-alarm-row select{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-primary);font-size:14px}
.sh-alarm-days-picker{display:flex;gap:4px;flex:1}
.sh-day-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--bg-tertiary);color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.sh-day-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.sh-alarm-save{width:100%;margin-top:8px}

/* Range Sliders */
.sh-room-slider,.sh-lamp-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;margin:6px 0 2px;background:linear-gradient(to right,var(--accent) var(--val,0%),var(--bg-tertiary) var(--val,0%))}
.sh-room-slider::-webkit-slider-thumb,.sh-lamp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-card);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:grab;transition:transform .1s}
.sh-room-slider::-webkit-slider-thumb:active,.sh-lamp-slider::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.sh-room-slider::-moz-range-thumb,.sh-lamp-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-card);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:grab}
.sh-room-slider::-moz-range-track,.sh-lamp-slider::-moz-range-track{height:6px;border-radius:3px;background:var(--bg-tertiary)}
.sh-room-slider::-moz-range-progress,.sh-lamp-slider::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}

/* Lamp List */
.sh-items{padding:8px 12px 12px;display:flex;flex-direction:column;gap:4px}

/* Shared item info layout */
.sh-item-info{flex:1;display:flex;align-items:center;gap:8px;min-width:0}

/* Groups */
.sh-group{padding:14px 16px;border-radius:var(--radius);transition:background .15s;background:transparent;-webkit-tap-highlight-color:transparent}
.sh-group:not(.sh-on){opacity:.5}
.sh-group.sh-on .sh-group-dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.sh-group-row{display:flex;align-items:center;gap:12px;min-height:44px}
.sh-group-toggle{width:40px;height:40px;border-radius:50%;background:var(--bg-tertiary);border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;-webkit-tap-highlight-color:transparent}
.sh-group-toggle.active{background:var(--accent-bg);border-color:var(--accent)}
.sh-group-toggle:active{transform:scale(.9)}
.sh-group-dot{width:14px;height:14px;border-radius:50%;background:var(--text-muted);opacity:.4;transition:all .2s}
.sh-group.sh-on .sh-group-dot{opacity:1}
.sh-group-name{font-size:14px;color:var(--text-primary);font-weight:600}
.sh-group:not(.sh-on) .sh-group-name{color:var(--text-muted)}
.sh-group-count{font-size:12px;color:var(--text-muted);font-weight:400}
.sh-group-sliders{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-left:52px}

/* Lamps */
.sh-lamp{padding:14px 16px;border-radius:var(--radius);transition:background .15s;-webkit-tap-highlight-color:transparent}
.sh-lamp.sh-on .sh-lamp-dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.sh-lamp-row{display:flex;align-items:center;gap:12px;min-height:44px}
.sh-lamp-toggle{width:40px;height:40px;border-radius:50%;background:var(--bg-tertiary);border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;-webkit-tap-highlight-color:transparent}
.sh-lamp-toggle.active{background:var(--accent-bg);border-color:var(--accent)}
.sh-lamp-toggle:active{transform:scale(.9)}
.sh-lamp-dot{width:12px;height:12px;border-radius:50%;background:var(--text-muted);opacity:.4;transition:all .2s}
.sh-lamp.sh-on .sh-lamp-dot{opacity:1}
.sh-lamp-name{font-size:14px;color:var(--text-primary);font-weight:500}
.sh-lamp:not(.sh-on) .sh-lamp-name{color:var(--text-muted)}
.sh-lamp:not(.sh-on){opacity:.5}
.sh-lamp-sliders{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-left:52px}
.sh-lamp-controls{display:flex;align-items:center;gap:8px}
.sh-bri-val{font-size:13px;color:var(--text-muted);min-width:40px;text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.sh-lamp-slider{height:6px;margin:2px 0 0}
.sh-lamp-slider::-webkit-slider-thumb{width:20px;height:20px}

/* Color Temperature Slider */
.sh-temp-row{display:flex;align-items:center;gap:8px}
.sh-temp-label{font-size:14px;flex-shrink:0;line-height:1}
.sh-temp-slider{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;outline:none;cursor:pointer;margin:2px 0;background:linear-gradient(to right,#ff8c1a var(--val,50%),#8cb4d9 var(--val,50%))}
.sh-temp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:grab}
.sh-temp-slider::-webkit-slider-thumb:active{transform:scale(1.1);cursor:grabbing}
.sh-temp-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:grab}
.sh-temp-slider::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(to right,#ff8c1a,#8cb4d9)}

/* ═══════════════════════════════════════════════════
   RESPONSIVE: Mobile Header, Bottom Nav, V-Switch, Toolbar
   ═══════════════════════════════════════════════════ */

/* --- Mobile Header --- */
.mobile-header{display:none;position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:56px;background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:80;align-items:center;padding:0 12px;gap:10px}
.hamburger-btn{width:44px;height:44px;border-radius:10px;background:var(--bg-tertiary);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--text-secondary)}
.hamburger-btn:hover{border-color:var(--accent);color:var(--accent)}
.mobile-header-title{font-size:16px;font-weight:700;color:var(--text-primary);flex:1}
.mobile-header-right{display:flex;gap:6px;align-items:center}

/* --- Quick Toolbar --- */
.quick-toolbar{display:none;position:fixed;top:calc(56px + env(safe-area-inset-top,0px));left:0;right:0;height:46px;background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:79;align-items:center;padding:0 10px;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.qtb-btn{height:32px;padding:0 10px;border-radius:8px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px;flex-shrink:0;cursor:pointer;white-space:nowrap;transition:all .15s}
.qtb-btn:hover{border-color:var(--accent);color:var(--accent)}
.qtb-btn.accent{background:var(--accent-bg);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}

/* --- Sidebar Backdrop --- */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:89;opacity:0;transition:opacity .25s}
.sidebar-backdrop.open{display:block;opacity:1}

/* --- Sidebar slide-in close button --- */
.sidebar-close-btn{display:none;width:36px;height:36px;border-radius:8px;background:var(--accent-bg);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);align-items:center;justify-content:center;cursor:pointer;color:var(--accent);flex-shrink:0}

/* --- Bottom Nav --- */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:calc(62px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg-secondary);border-top:1px solid var(--border);z-index:80;flex-direction:row}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:var(--text-muted);font-size:10px;font-weight:700;cursor:pointer;transition:color .15s}
.bnav-btn.active{color:var(--accent)}
.bnav-btn svg{flex-shrink:0}

/* --- Vertical Switch (tablet) --- */
.vswitch{display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);width:44px;background:var(--bg-secondary);border-left:1px solid var(--border);border-radius:12px 0 0 12px;flex-direction:column;align-items:center;padding:6px 0;gap:2px;z-index:80;box-shadow:-2px 0 12px rgba(0,0,0,.15)}
.vswitch-btn{width:38px;height:52px;border-radius:8px 0 0 8px;background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--text-muted);font-size:8px;font-weight:700;transition:all .15s}
.vswitch-btn.active{color:var(--accent);background:var(--accent-bg)}

/* ═══════════════════════════════════════════════════
   MOBILE: <768px
   ═══════════════════════════════════════════════════ */
@media(max-width:767px){
  .mobile-header{display:flex}
  .quick-toolbar{display:flex}
  .bottom-nav{display:flex}

  /* Sidebar: off-canvas slide-in */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:248px;z-index:90;transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close-btn{display:flex}

  /* Shift content below header+toolbar, above bottom nav */
  .app-layout{margin-top:calc(102px + env(safe-area-inset-top,0px));height:calc(100vh - 102px - 62px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - 102px - 62px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .feed-content{overflow-y:auto;overscroll-behavior-y:contain}

  /* ── Smart Home: eigenständige Vollbild-Ebene ── */
  #smarthome{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:85;margin:0;background:var(--bg-primary);display:flex;flex-direction:column}
  #smarthome .sh-header{display:flex;position:sticky;top:0;z-index:2;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:12px 16px;gap:8px}
  #smarthome-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;grid-template-columns:1fr;padding:10px 10px 80px;gap:12px}

  /* Hide desktop nav inside sidebar */
  .sidebar-nav{display:none}

  /* Smart Home touch friendly */
  .sh-room-header{padding:14px 16px}
  .sh-room-toggle{width:52px;height:52px}
  .sh-room-slider-row{padding:10px 16px 6px}
  .sh-items{padding:6px 8px 10px}
  .sh-lamp{padding:12px}
  .sh-lamp-row{min-height:48px}
  .sh-lamp-toggle,.sh-group-toggle{width:44px;height:44px}
  .sh-group{padding:12px}
  .sh-group-row{min-height:48px}
  .sh-room-slider,.sh-lamp-slider,.sh-group-slider{height:10px;margin:8px 0 4px}
  .sh-room-slider::-webkit-slider-thumb,.sh-lamp-slider::-webkit-slider-thumb,.sh-group-slider::-webkit-slider-thumb{width:28px;height:28px}
  .sh-temp-slider{height:10px}
  .sh-temp-slider::-webkit-slider-thumb{width:26px;height:26px}
  .sh-room-temp-row{padding:4px 16px 10px}
  .sh-preset{width:40px;height:40px;font-size:16px}
  /* Scene bar mobile */
  .sh-scene-bar{padding:6px 16px;gap:5px}
  .sh-scene-btn,.sh-scene-stop,.sh-sleep-btn{padding:8px 10px;font-size:11px;min-height:36px}
  .sh-speed-row{padding:4px 16px 6px}
  .sh-speed-slider::-webkit-slider-thumb{width:24px;height:24px}
  /* Alarm panel mobile */
  .sh-alarm-row{flex-direction:column;align-items:stretch;gap:6px}
  .sh-alarm-row label{width:auto}
  .sh-day-btn{width:32px;height:32px;font-size:11px}

  /* Entry detail responsive */
  .entry-detail{width:100%;max-width:none;max-height:94vh}
  .ed-main{padding:12px}
  .ed-top{padding:10px 12px}

  /* Quick input less padding */
  .quick-input{margin:10px 10px 0;padding:12px}
  .feed-content{padding:10px}

  /* Claude panel full width */
  .claude-panel.open{width:100vw;min-width:0;position:fixed;inset:0;z-index:95}
}

/* ═══════════════════════════════════════════════════
   TABLET: 768px – 1023px
   ═══════════════════════════════════════════════════ */
@media(min-width:768px) and (max-width:1023px){
  .mobile-header{display:flex}
  .quick-toolbar{display:flex}
  .vswitch{display:flex}

  /* Sidebar: off-canvas slide-in (same as mobile but a bit wider) */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:268px;z-index:90;transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close-btn{display:flex}

  /* Shift content below header+toolbar */
  .app-layout{margin-top:calc(102px + env(safe-area-inset-top,0px));height:calc(100vh - 102px - env(safe-area-inset-top,0px));height:calc(100dvh - 102px - env(safe-area-inset-top,0px))}

  /* Add right padding for vswitch */
  .feed-content{padding:16px 56px 16px 16px}
  #smarthome .sh-header{display:none}
  #smarthome-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:4px 56px 16px 16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

  /* Hide desktop nav */
  .sidebar-nav{display:none}

  /* Touch targets */
  .sh-lamp{padding:12px}
  .sh-lamp-row{min-height:44px}
  .sh-group{padding:12px}
  .sh-group-row{min-height:44px}
  .sh-room-slider,.sh-lamp-slider,.sh-group-slider{height:8px}
  .sh-room-slider::-webkit-slider-thumb,.sh-lamp-slider::-webkit-slider-thumb,.sh-group-slider::-webkit-slider-thumb{width:24px;height:24px}

  /* Entry detail */
  .entry-detail{width:96%;max-height:92vh}
  .ed-main{padding:14px}

  /* Claude panel side */
  .claude-panel.open{width:45vw;min-width:320px}
}

/* ═══════════════════════════════════════════════════
   DESKTOP: >=1024px (default, no changes needed for most)
   ═══════════════════════════════════════════════════ */
@media(min-width:1024px){
  /* Seitenleiste fest sichtbar — Navigation einzeilig mit Symbol + Text */
  .sidebar-nav-btn{padding:8px 4px;font-size:12px;flex-direction:row}
}


/* ===== Anmeldung / Konten / Bereich (25.07.2026) ===== */
.login-overlay{position:fixed;inset:0;z-index:10000;background:var(--bg-primary);
  display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:28px 24px;width:100%;max-width:340px;display:flex;flex-direction:column;
  align-items:center;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.login-title{margin:4px 0 0;font-size:20px;font-weight:600;color:var(--text-primary)}
.login-sub{margin:0 0 8px;font-size:13px;color:var(--text-muted)}
.login-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg-input);color:var(--text-primary);font-size:15px;margin-bottom:2px}
.login-input:focus{outline:none;border-color:var(--accent)}
.login-btn{width:100%;padding:11px;font-size:15px;margin-top:6px}
.login-error{color:#F08A80;font-size:13px;min-height:18px;text-align:center;width:100%}

/* Passwort-Feld mit „anzeigen"-Umschalter */
.pw-wrap{position:relative;width:100%}
.pw-wrap .login-input{padding-right:82px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--accent);cursor:pointer;
  font-size:12px;padding:4px 8px;border-radius:6px}
.pw-toggle:hover{background:var(--bg-tertiary)}
.login-link{background:none;border:0;color:var(--text-muted);font-size:12px;
  cursor:pointer;padding:6px 2px;text-decoration:underline;align-self:center}
.login-link:hover{color:var(--accent)}
.hint-box{font-size:13px;color:var(--text-secondary);line-height:1.5;width:100%}
.hint-box p{margin:0 0 10px}

.users-box{max-width:460px;align-items:stretch;max-height:88vh;overflow-y:auto}
.users-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.user-row{display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:var(--bg-tertiary);border-radius:8px}
.user-row-off{opacity:.55}
.users-new{border-top:1px solid var(--border);padding-top:12px;margin-top:6px}

.user-bar{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px}
.user-bar-name{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}
.user-bar-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:0 0 auto}
.user-bar-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-bar-actions{display:flex;gap:4px;flex-wrap:wrap}
.user-bar-actions .btn{flex:1;font-size:12px;padding:4px 6px;min-width:0}

.bereich-switch{display:flex;gap:4px;padding:0 8px;margin-bottom:4px}
.bereich-btn{flex:1;padding:6px 4px;font-size:12px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-secondary);border-radius:7px;cursor:pointer}
.bereich-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.entry-owner{font-size:11px;color:var(--text-muted);margin-left:6px}
.entry-shared-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:5px;vertical-align:middle}


/* ═══════════════════════════════════════════════════
   PUNKT-ANSICHT (Neubau 26.07.2026)
   Text links und mitwachsend, Fotos rechts in voller
   Höhe, Formatierleiste wie in einem Textprogramm.
   ═══════════════════════════════════════════════════ */
.entry-detail{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  width:94%;max-width:1320px;min-width:0;max-height:90vh;box-shadow:var(--shadow-lg);
  padding:0;display:flex;flex-direction:column;overflow:hidden}
.ed-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;
  border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg-secondary)}
.ed-top-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}
.ed-top-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.ed-body{flex:1;min-height:0;display:flex;gap:0;overflow:hidden}
.ed-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow-y:auto;padding:14px 18px 18px}
.ed-side{width:320px;flex-shrink:0;border-left:1px solid var(--border);background:var(--bg-secondary);
  display:flex;flex-direction:column;overflow:hidden}
.ed-side-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border-light);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);flex-shrink:0}
.ed-side-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.ed-side-foot{flex-shrink:0;border-top:1px solid var(--border-light);padding:8px 10px;
  display:flex;flex-direction:column;gap:6px}
.ed-side.leer .ed-side-scroll{align-items:center;justify-content:center;color:var(--text-muted);
  font-size:12px;text-align:center;padding:20px}
@media(max-width:1023px){
  .ed-body{flex-direction:column;overflow-y:auto}
  .ed-main{overflow:visible}
  .ed-side{width:auto;border-left:0;border-top:1px solid var(--border);max-height:none}
  .ed-side-scroll{flex-direction:row;flex-wrap:wrap;overflow:visible}
  .ed-side-scroll .img-wrap{width:calc(50% - 5px)}
}

/* Titel + Textkörper */
.ed-title{width:100%;font-size:19px;font-weight:600;padding:8px 10px;margin-bottom:6px;
  border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;
  color:var(--text-primary);font-family:inherit;outline:none}
.ed-title:focus{border-color:var(--border);background:var(--bg-input)}

/* Formatierleiste */
.rt-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:5px 6px;
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom:0;position:sticky;top:0;z-index:3}
.rt-btn{width:28px;height:28px;border:1px solid transparent;background:transparent;color:var(--text-secondary);
  border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-family:inherit;transition:all .12s;flex-shrink:0}
.rt-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.rt-btn.aktiv{background:var(--accent-bg);color:var(--accent-on);border-color:rgba(55,138,221,.35)}
.rt-sep{width:1px;height:19px;background:var(--border);margin:0 3px;flex-shrink:0}
.rt-select{height:28px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);
  border-radius:5px;font-size:12px;font-family:inherit;padding:0 4px;cursor:pointer;outline:none}
.rt-farbe{position:relative;display:inline-flex}
.rt-farbe input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0}

/* Der Textkörper wächst mit — nie eine eigene Bildlaufleiste. */
.rt-editor{width:100%;min-height:220px;border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);
  padding:14px 16px;background:var(--bg-input);color:var(--text-primary);font-size:14.5px;line-height:1.65;
  font-family:inherit;outline:none;overflow:visible;word-break:break-word}
.rt-editor:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.rt-editor:empty::before{content:attr(data-platzhalter);color:var(--text-muted)}
.rt-editor h1{font-size:1.5em;margin:.6em 0 .3em;font-weight:600}
.rt-editor h2{font-size:1.28em;margin:.6em 0 .3em;font-weight:600}
.rt-editor h3{font-size:1.12em;margin:.6em 0 .3em;font-weight:600}
.rt-editor p{margin:0 0 .55em}
.rt-editor ul,.rt-editor ol{margin:.4em 0 .6em;padding-left:1.6em}
.rt-editor li{margin:.15em 0}
.rt-editor blockquote{margin:.5em 0;padding:.3em 0 .3em 12px;border-left:3px solid var(--accent);
  color:var(--text-secondary)}
.rt-editor a{color:var(--accent-on);text-decoration:underline}
.rt-editor pre{background:var(--bg-tertiary);padding:10px 12px;border-radius:var(--radius-sm);
  overflow-x:auto;font-family:Consolas,monospace;font-size:.92em}
.rt-editor code{background:var(--bg-tertiary);border-radius:4px;padding:1px 5px;font-family:Consolas,monospace;font-size:.92em}
.rt-editor img{max-width:100%;border-radius:var(--radius-sm)}
.rt-editor table{border-collapse:collapse;margin:.5em 0}
.rt-editor td,.rt-editor th{border:1px solid var(--border);padding:5px 9px}

/* Fotos rechts: durchnummeriert, Zähler als Auflage */
.ed-side .img-wrap{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--border);background:var(--bg-input)}
.ed-side .img-wrap img.detail-img{display:block;width:100%;max-height:78vh;object-fit:contain;cursor:zoom-in}
.img-nr{position:absolute;top:6px;left:6px;background:rgba(9,14,20,.78);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;pointer-events:none;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);font-variant-numeric:tabular-nums}
.btn-delete-img{position:absolute;top:6px;right:6px;background:rgba(9,14,20,.72);color:#fff;border:none;
  border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:12px;line-height:24px;text-align:center;
  padding:0;opacity:0;transition:opacity .15s}
.img-wrap:hover .btn-delete-img,.img-wrap:focus-within .btn-delete-img{opacity:1}
.img-wrap-doc{position:relative;display:flex;align-items:center;gap:8px;padding:10px;
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column}
.img-wrap-doc .btn-delete-img{opacity:1}
.ed-datei-zeile{display:flex;align-items:center;gap:8px;padding:6px 9px;background:var(--bg-input);
  border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:12px}
.ed-datei-zeile .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Farbe des Punktes */
.farb-leiste{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.farb-punkt{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);cursor:pointer;
  padding:0;transition:transform .12s,border-color .12s;position:relative}
.farb-punkt:hover{transform:scale(1.12)}
.farb-punkt.aktiv{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.farb-punkt.farb-frei{overflow:hidden}
.farb-punkt.farb-frei input[type=color]{position:absolute;inset:-6px;opacity:0;cursor:pointer;border:0;padding:0}
.farb-punkt.farb-keine{background:var(--bg-input);
  background-image:linear-gradient(45deg,transparent 44%,var(--text-muted) 44%,var(--text-muted) 56%,transparent 56%)}
.farb-punkt.farb-plus{background:var(--bg-input);color:var(--text-muted);
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  border-style:dashed}
.farb-punkt.farb-plus:hover{color:var(--text-primary);border-color:var(--text-muted)}

/* Eingefärbte Punkte: örtliche Farbwerte, damit alle Kinder mitziehen */
.farbig{--text-primary:#15202B;--text-secondary:#3D4A58;--text-muted:#6B7683;
  --border:rgba(0,0,0,.16);--border-light:rgba(0,0,0,.09);--bg-tertiary:rgba(0,0,0,.06);
  --bg-input:rgba(255,255,255,.55);--bg-hover:rgba(0,0,0,.06);--bg-secondary:rgba(0,0,0,.045);
  --accent-on:#1B5FA6;color:var(--text-primary)}
.entry-card.farbig .entry-title,.entry-card.farbig .entry-preview{color:var(--text-primary)}

/* ═══════════════════════════════════════════════════
   DATEIEN-SEITE — scrollbar, einzeilig, kompakt
   ═══════════════════════════════════════════════════ */
.files-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 18px 10px;
  border-bottom:1px solid var(--border);flex-shrink:0}
#files-view{display:flex;flex-direction:column;overflow:hidden;padding:0}
.files-head h2{font-size:16px;margin:0;flex:1;font-weight:600}
.files-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 8px 20px;position:relative}
.file-row{display:flex;align-items:center;gap:9px;min-height:33px;padding:0 9px;
  border-bottom:1px solid var(--border-light);font-size:13px;color:var(--text-secondary)}
.file-row:hover{background:var(--bg-hover)}
.file-row .fr-icon{display:flex;color:var(--text-muted);flex-shrink:0}
.file-row .fr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.file-row .fr-entry{color:var(--accent-on);flex-shrink:0;max-width:200px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.file-row .fr-size{width:74px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--text-muted)}
.file-row .fr-date{width:112px;text-align:right;flex-shrink:0;font-size:12px;color:var(--text-muted)}
.file-row .fr-act{display:flex;gap:1px;flex-shrink:0;opacity:.45;transition:opacity .12s}
.file-row:hover .fr-act{opacity:1}
.file-row .fr-act a,.file-row .fr-act button{width:26px;height:26px;border:0;background:transparent;
  color:var(--text-secondary);border-radius:5px;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center}
.file-row .fr-act a:hover,.file-row .fr-act button:hover{background:var(--bg-hover);color:var(--accent-on)}
.file-row .fr-act .gefahr:hover{background:rgba(226,86,74,.18);color:var(--danger)}
@media(max-width:767px){
  .file-row .fr-date,.file-row .fr-entry{display:none}
  .file-row .fr-size{width:60px}
}

/* ── Ablage mit echten Ordnern (27.07.2026) ─────────────────────────── */
.files-head h2{flex:0 0 auto}
.dv-luecke{flex:1}
.dv-pfad{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.dv-krumel{border:0;background:transparent;color:var(--text-secondary);font-size:13px;
  padding:3px 8px;border-radius:6px;cursor:pointer;font-family:inherit}
.dv-krumel:hover{background:var(--bg-hover);color:var(--text-primary)}
.dv-krumel.dv-ziel{background:var(--accent);color:#fff}
.dv-trenner{color:var(--text-muted);font-size:12px}
/* Die Tabelle endet an der letzten Spalte. Rechts daneben bleibt freie
   Fläche — dort zählt der Mausklick als Rahmen-Auswahl (26.07.2026).
   Rechts und unten schließt eine Linie das Raster sauber ab. */
.dv-tabelle{--dv-cols:26px 360px 170px 150px 230px;width:max-content;min-width:min-content;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.dv-kopf{display:grid;grid-template-columns:var(--dv-cols);align-items:center;
  position:sticky;top:0;z-index:5;background:var(--bg-card);
  border-bottom:1px solid var(--border);font-size:12px;color:var(--text-muted);
  user-select:none}
.dv-kopfzelle{position:relative;display:flex;align-items:center;height:30px;padding:0 8px;
  overflow:hidden;white-space:nowrap;border-right:1px solid var(--border)}
.dv-kopftitel{cursor:pointer;flex:1;overflow:hidden;text-overflow:ellipsis}
.dv-kopftitel:hover{color:var(--text-primary)}
.dv-kopfzelle.dv-ziel{box-shadow:inset 2px 0 0 var(--accent)}
.dv-griff{position:absolute;right:-3px;top:0;width:7px;height:100%;cursor:col-resize;z-index:2}
.dv-griff:hover{background:var(--accent);opacity:.5}
.dv-zeile{display:grid;grid-template-columns:var(--dv-cols);align-items:center;
  min-height:31px;font-size:13px;color:var(--text-secondary);
  border-bottom:1px solid var(--border-light);cursor:default;user-select:none}
.dv-zeile:hover{background:var(--bg-hover)}
#files-list .dv-zeile:last-child{border-bottom:0}
.dv-zeile.gewaehlt{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent)}
.dv-zeile.dv-blass{opacity:.45}
.dv-zeile.dv-zieht{opacity:.5}
.dv-zeile.dv-ziel{outline:2px solid var(--accent);outline-offset:-2px;background:var(--bg-hover)}
.dv-sym{display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.dv-zeile[data-typ="ordner"] .dv-sym{color:var(--accent-on)}
.dv-z{padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-muted)}
.dv-name{color:var(--text-primary);font-size:13px}
.dv-zeile[data-typ="ordner"] .dv-name{font-weight:600}
.dv-rechts{text-align:right;font-variant-numeric:tabular-nums}
.dv-herkunft{color:var(--text-muted);font-size:11px;margin-left:8px}
.dv-hoch{grid-template-columns:26px 1fr;color:var(--text-muted);cursor:pointer}
.dv-leer{text-align:center;color:var(--text-muted);padding:40px}
/* Auswahlrahmen beim Ziehen mit der Maus */
.dv-rahmen{position:absolute;z-index:6;pointer-events:none;
  border:1px solid var(--accent);background:var(--accent-bg);opacity:.55}
.dv-fuss{flex-shrink:0;border-top:1px solid var(--border);padding:6px 18px;
  font-size:12px;color:var(--text-muted);min-height:26px}
#dv-scroll.dv-abwurf{outline:2px dashed var(--accent);outline-offset:-6px}

/* ── Favoriten in der Seitenleiste (26.07.2026) ─────────────────────── */
.fav-block{margin:0 0 8px;padding:8px 0 0;border-top:1px solid var(--border)}
.fav-block .sidebar-section-label{display:flex;align-items:center;gap:6px}
.fav-block.fav-abwurf{background:var(--accent-bg);border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--accent)}
.fav-leer{font-size:11px;color:var(--text-muted);line-height:1.45;padding:2px 4px 4px}
.fav-zeile{cursor:pointer}
.fav-zeile.fav-zieht{opacity:.5}
.fav-zeile.fav-ziel{box-shadow:inset 0 2px 0 var(--accent)}
#fav-liste{max-height:190px;overflow-y:auto}
.cm-taste{margin-left:auto;padding-left:18px;color:var(--text-muted);font-size:11px}
#dv-scroll{overflow:auto}
@media(max-width:767px){
  .dv-fuss{display:none}
}

/* ═══════════════════════════════════════════════════
   INSTALLATIONS-FENSTER (Handy / Rechner)
   ═══════════════════════════════════════════════════ */
.inst-box{max-width:520px;align-items:stretch;max-height:88vh;overflow-y:auto}
.inst-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
@media(max-width:520px){.inst-kacheln{grid-template-columns:1fr}}
.inst-kachel{border:1px solid var(--border);border-radius:var(--radius);padding:13px 14px;
  background:var(--bg-input);display:flex;flex-direction:column;gap:7px}
.inst-kachel h3{font-size:13px;margin:0;display:flex;align-items:center;gap:7px;font-weight:600;color:var(--text-primary)}
.inst-kachel p{font-size:12px;color:var(--text-secondary);margin:0;line-height:1.5}
.inst-kachel .btn{align-self:flex-start}
.inst-schritte{font-size:12px;color:var(--text-secondary);margin:0;padding-left:17px;line-height:1.6}

/* Sammel-Auswahl in der Liste */
.entry-card-actions{display:flex;align-items:center;gap:5px}

/* ═══════════════════════════════════════════════════
   SEITENLEISTE — Neubau 26.07.2026
   Oben der Umschalter Brain/Dateien, darunter frei
   sortierbare Blöcke, unten der Kontobereich.
   ═══════════════════════════════════════════════════ */
.sidebar-top{display:flex;align-items:center;gap:8px;padding:11px 12px 10px;
  border-bottom:1px solid var(--border);flex-shrink:0}
.view-switch{flex:1;display:flex;gap:4px;background:var(--bg-tertiary);
  border:1px solid var(--border);border-radius:11px;padding:3px;min-width:0}
.view-switch .sidebar-nav-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 3px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);
  font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:background .14s,color .14s}
.view-switch .sidebar-nav-btn.active{background:var(--accent);color:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.3)}
.view-switch .sidebar-nav-btn:hover:not(.active){background:var(--bg-hover);color:var(--text-primary)}
.view-switch .sidebar-nav-btn svg{flex-shrink:0}

/* Griff zum Umstellen der großen Blöcke */
.sb-grip{display:inline-flex;align-items:center;cursor:grab;color:var(--text-muted);
  opacity:.3;transition:opacity .14s;padding:1px;border-radius:4px}
.sb-section:hover .sb-grip{opacity:.85}
.sb-grip:active{cursor:grabbing}
.sidebar-section-label button{margin-left:auto;border:0;background:none;color:var(--text-muted);
  cursor:pointer;padding:3px;border-radius:5px;display:inline-flex}
.sidebar-section-label button:hover{background:var(--bg-hover);color:var(--accent)}
.sb-section.sb-dragging{opacity:.4}
.sb-section.sb-over{box-shadow:inset 0 2px 0 var(--accent)}
.sb-section.sb-over-end{box-shadow:inset 0 -2px 0 var(--accent)}

/* Kontobereich unten — großzügiger als vorher */
.sidebar-foot{flex-shrink:0;border-top:1px solid var(--border);padding:10px 12px 12px;
  display:flex;flex-direction:column;gap:10px}
.user-bar{display:flex;flex-direction:column;gap:9px;margin:0;padding:11px 11px 10px;
  border:1px solid var(--border);border-radius:12px;background:var(--bg-tertiary)}
.ub-kopf{display:flex;align-items:center;gap:10px;min-width:0}
.ub-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.ub-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ub-name{font-size:13.5px;font-weight:600;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub-rolle{font-size:11px;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub-knoepfe{display:flex;gap:5px}
.ub-knopf{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px;border:1px solid var(--border);border-radius:9px;background:var(--bg-card);
  color:var(--text-secondary);font-size:10.5px;font-weight:500;font-family:inherit;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s}
.ub-knopf:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}
.ub-knopf.ub-aus:hover{color:var(--danger);border-color:var(--danger)}
.ub-knopf svg{flex-shrink:0}

/* ═══════════════════════════════════════════════════
   NEUER PUNKT — der Streifen legt nichts mehr still an,
   er öffnet beim ersten Tastendruck das große Fenster.
   ═══════════════════════════════════════════════════ */
.neu-trigger{margin:18px 18px 0;display:flex;align-items:center;gap:11px;
  background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);
  padding:0 16px;height:52px;box-shadow:var(--shadow);cursor:text;flex-shrink:0;
  transition:border-color .14s}
.neu-trigger:focus-within{border-color:var(--accent)}
.nt-icon{display:inline-flex;color:var(--text-muted);flex-shrink:0}
.nt-feld{flex:1;min-width:0;border:0;background:transparent;outline:none;
  color:var(--text-primary);font-family:inherit;font-size:15px}
.nt-feld::placeholder{color:var(--text-muted)}
.nt-hinweis{font-size:11px;color:var(--text-muted);flex-shrink:0}
@media(max-width:820px){.nt-hinweis{display:none}.neu-trigger{margin:12px 12px 0;padding:0 13px}}

/* Schmale Leiste über der Liste mit dem Aktualisieren-Knopf (27.07.2026) */
.feed-leiste{display:flex;justify-content:flex-end;align-items:center;
  margin:8px 20px 0;flex-shrink:0}
.feed-akt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  background:var(--bg-card);color:var(--text-secondary);border-radius:var(--radius);
  padding:4px 10px;font-family:inherit;font-size:12px;cursor:pointer;
  transition:color .14s,border-color .14s}
.feed-akt:hover{color:var(--text-primary);border-color:var(--text-muted)}
.feed-akt svg{display:block}
.feed-akt.dreht svg{animation:feed-dreh .5s linear}
@keyframes feed-dreh{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(max-width:820px){.feed-leiste{margin:8px 12px 0}}

/* ═══════════════════════════════════════════════════
   PUNKT-FENSTER — mehrere gleichzeitig offen
   ═══════════════════════════════════════════════════ */
#punkte-layer{position:fixed;inset:0;z-index:300;pointer-events:none}
/* Solange ein Punkt offen ist, faengt die Flaeche daneben Klicks ab — ein Klick dorthin schliesst das oberste Fenster (Feldtest 10.08.2026). Ohne offene Punkte bleibt sie durchlaessig, damit die Liste dahinter normal bedienbar ist; im ausgeklinkten Einzel-Fenster gibt es kein „daneben". */
body.punkte-offen:not(.solo) #punkte-layer{pointer-events:auto}
.pw{position:absolute;pointer-events:auto;display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 18px 55px rgba(0,0,0,.5);overflow:hidden;
  min-width:340px;min-height:240px;max-width:none;max-height:none;
  transition:box-shadow .16s,border-color .16s}
.pw.pw-vorn{border-color:var(--accent);box-shadow:0 26px 80px rgba(0,0,0,.62)}
.pw.pw-zieht{transition:none;user-select:none}
.pw .ed-top{cursor:grab}
.pw.pw-gross .ed-top{cursor:default}
.pw .ed-body{flex:1;min-height:0}
/* Anfasser rechts unten: Fenster frei in der Größe ziehen */
.pw-groesse{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;
  z-index:5;background:linear-gradient(135deg,transparent 48%,var(--border) 50%,transparent 52%,
  transparent 60%,var(--border) 62%,transparent 64%)}
@media(max-width:1023px){
  #punkte-layer{background:rgba(0,0,0,.5)}
  body:not(.punkte-offen) #punkte-layer{background:transparent}
  .pw{left:6px!important;top:6px!important;
    width:calc(100vw - 12px)!important;height:calc(100vh - 12px)!important;
    min-width:0;border-radius:var(--radius)}
  .pw .ed-top{cursor:default}
  .pw-groesse{display:none}
}

/* ═══════════════════════════════════════════════════
   AUSGEKLINKTES FENSTER — der Punkt allein im eigenen Fenster
   ═══════════════════════════════════════════════════ */
body.solo .app-layout > .sidebar,
body.solo .mobile-header,
body.solo .quick-toolbar,
body.solo #bottom-nav,
body.solo #vswitch,
body.solo .sidebar-backdrop,
body.solo #feed,
body.solo #files-view{display:none!important}
body.solo{overflow:hidden}
body.solo #punkte-layer{background:var(--bg-primary)}
body.solo .pw{left:0!important;top:0!important;width:100vw!important;height:100vh!important;
  border:0;border-radius:0;box-shadow:none}
body.solo .pw .ed-top{cursor:default}
body.solo .pw-groesse{display:none}
body.solo .pw-nur-eingebettet{display:none}

/* ═══════════════════════════════════════════════════
   DIALOGFENSTER — echte Rückfragen statt Browser-Streifen
   ═══════════════════════════════════════════════════ */
.dlg-huelle{position:fixed;inset:0;z-index:99000;display:flex;align-items:center;justify-content:center;
  background:rgba(6,10,15,.55);backdrop-filter:blur(2px);opacity:0;transition:opacity .13s;padding:20px}
.dlg-huelle.dlg-da{opacity:1}
.dlg-huelle.dlg-weg{opacity:0}
.dlg-fenster{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.55);width:min(440px,100%);
  transform:translateY(10px) scale(.98);transition:transform .16s cubic-bezier(.2,.9,.3,1)}
.dlg-huelle.dlg-da .dlg-fenster{transform:none}
.dlg-kopf{display:flex;align-items:center;gap:10px;padding:15px 18px 0}
.dlg-sym{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;background:var(--bg-hover);color:var(--text-secondary);flex-shrink:0}
.dlg-sym.gefahr{background:rgba(220,80,80,.14);color:var(--danger)}
.dlg-titel{font-size:16px;font-weight:600;color:var(--text-primary)}
.dlg-koerper{padding:10px 18px 4px}
.dlg-text{font-size:13.5px;line-height:1.6;color:var(--text-secondary);margin:0}
.dlg-feld{width:100%;margin-top:10px;height:36px;padding:0 10px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);
  font-family:inherit;font-size:14px;outline:none}
.dlg-feld:focus{border-color:var(--accent)}
.dlg-fuss{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px 16px}
.dlg-gefahr{background:var(--danger);border:1px solid var(--danger);color:#fff}
.dlg-gefahr:hover{filter:brightness(1.1)}

/* ═══════════════════════════════════════════════════
   SPRACHE — Knopf mit Zahnrad, Einstellungsfenster
   ═══════════════════════════════════════════════════ */
.voice-reihe{display:flex;gap:5px;margin-top:4px}
.voice-reihe .btn-voice{flex:1;min-width:0}
.voice-zahnrad{width:34px;flex:0 0 34px;padding:0;justify-content:center}
.sp-fenster{width:min(520px,100%);max-height:88vh;display:flex;flex-direction:column}
.sp-fenster .dlg-koerper{overflow-y:auto}
.sp-zustand{font-size:12.5px;color:var(--text-secondary);background:var(--bg-hover);
  border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:12px}
.sp-zeile{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:13px;color:var(--text-secondary)}
.sp-zeile > span:first-child{flex:0 0 200px}
.sp-zeile > span b{color:var(--text-primary);font-weight:600}
.sp-zeile select,.sp-zeile input[type=range]{flex:1;min-width:0}
.sp-zeile select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-input);color:var(--text-primary);font-family:inherit;font-size:13px;padding:0 8px}
.sp-schalter{cursor:pointer}
.sp-schalter input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--accent)}
.sp-schalter > span:first-child{flex:none}
.sp-schalter span{flex:1}
.sp-hinweis{font-size:11.5px;color:var(--text-muted);margin:-4px 0 12px;line-height:1.55}
.sp-block{align-items:center}
.sp-pegel{position:relative;flex:1;height:12px;background:var(--bg-input);
  border:1px solid var(--border);border-radius:7px;overflow:hidden}
.sp-pegel-fuell{height:100%;width:0;background:var(--text-muted);transition:width .08s linear}
.sp-pegel-fuell.laut{background:var(--ok,#46c267)}
.sp-marke{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--accent)}
.sp-probe{font-size:13px;color:var(--text-primary);min-height:20px;margin:6px 0 2px;line-height:1.55}

/* ═══════════════════════════════════════════════════
   FORMATIERLEISTE — mehr Luft, echte Schriftarten
   ═══════════════════════════════════════════════════ */
.rt-toolbar{gap:3px;padding:8px 9px;row-gap:5px}
.rt-btn{width:31px;height:31px}
.rt-select{height:31px;padding:0 7px;font-size:12.5px}
.rt-sep{height:22px;margin:0 5px}
.rt-schrift{min-width:150px;max-width:190px}
.rt-groesse{min-width:96px}
.rt-absatz{min-width:120px}
.rt-gruppe{display:inline-flex;align-items:center;gap:3px}


/* ── Ansicht fest waehlen (Feldtest 10.08.2026) ─────────────────────────────
   NexusBrain schaltete sein Aussehen an vier Fensterbreiten um
   (520/768/820/1024): am PC sah dieselbe Seite je nach Fenstergroesse mal wie
   am Handy, mal wie am Tablet, mal wie am Rechner aus. Die Breiten-Regeln
   bleiben als AUTOMATIK bestehen; wer es fest haben will, waehlt in der
   Benutzerleiste „Ansicht: Automatisch / Handy / Desktop" (ui/js/ansicht.js).
   Die Rechner-Ansicht ist die GRUNDEINSTELLUNG des Stilblatts — nur die
   schmalen Ansichten ueberschreiben sie. Darum:
   · „Handy erzwingen" = die schmalen Regeln unten gelten immer (Zwilling der
     @media-Bloecke, erzeugt — Aenderungen dort hier mitziehen);
   · „Desktop erzwingen" = die schmalen Bedienleisten werden wieder
     abgeschaltet und die Seitenleiste fest gestellt (die uebrigen schmalen
     Regeln sind reine Abstands-Kosmetik und stoeren dort nicht). */

body.zwing-handy .workspace-item .ws-menu-btn,body.zwing-handy .workspace-item .ws-grip{display:inline-flex;opacity:.7}
body.zwing-handy #btn-toggle-snippets{display:none!important}
body.zwing-handy .mobile-header{display:flex}
body.zwing-handy .quick-toolbar{display:flex}
body.zwing-handy .bottom-nav{display:flex}

  /* Sidebar: off-canvas slide-in */
body.zwing-handy .sidebar{position:fixed;top:0;left:0;bottom:0;width:248px;z-index:90;transform:translateX(-100%);transition:transform .25s ease}
body.zwing-handy .sidebar.open{transform:translateX(0)}
body.zwing-handy .sidebar-close-btn{display:flex}

  /* Shift content below header+toolbar, above bottom nav */
body.zwing-handy .app-layout{margin-top:calc(102px + env(safe-area-inset-top,0px));height:calc(100vh - 102px - 62px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - 102px - 62px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
body.zwing-handy .feed-content{overflow-y:auto;overscroll-behavior-y:contain}

  /* ── Smart Home: eigenständige Vollbild-Ebene ── */
body.zwing-handy #smarthome{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:85;margin:0;background:var(--bg-primary);display:flex;flex-direction:column}
body.zwing-handy #smarthome .sh-header{display:flex;position:sticky;top:0;z-index:2;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:12px 16px;gap:8px}
body.zwing-handy #smarthome-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;grid-template-columns:1fr;padding:10px 10px 80px;gap:12px}

  /* Hide desktop nav inside sidebar */
body.zwing-handy .sidebar-nav{display:none}

  /* Smart Home touch friendly */
body.zwing-handy .sh-room-header{padding:14px 16px}
body.zwing-handy .sh-room-toggle{width:52px;height:52px}
body.zwing-handy .sh-room-slider-row{padding:10px 16px 6px}
body.zwing-handy .sh-items{padding:6px 8px 10px}
body.zwing-handy .sh-lamp{padding:12px}
body.zwing-handy .sh-lamp-row{min-height:48px}
body.zwing-handy .sh-lamp-toggle,body.zwing-handy .sh-group-toggle{width:44px;height:44px}
body.zwing-handy .sh-group{padding:12px}
body.zwing-handy .sh-group-row{min-height:48px}
body.zwing-handy .sh-room-slider,body.zwing-handy .sh-lamp-slider,body.zwing-handy .sh-group-slider{height:10px;margin:8px 0 4px}
body.zwing-handy .sh-room-slider::-webkit-slider-thumb,body.zwing-handy .sh-lamp-slider::-webkit-slider-thumb,body.zwing-handy .sh-group-slider::-webkit-slider-thumb{width:28px;height:28px}
body.zwing-handy .sh-temp-slider{height:10px}
body.zwing-handy .sh-temp-slider::-webkit-slider-thumb{width:26px;height:26px}
body.zwing-handy .sh-room-temp-row{padding:4px 16px 10px}
body.zwing-handy .sh-preset{width:40px;height:40px;font-size:16px}
  /* Scene bar mobile */
body.zwing-handy .sh-scene-bar{padding:6px 16px;gap:5px}
body.zwing-handy .sh-scene-btn,body.zwing-handy .sh-scene-stop,body.zwing-handy .sh-sleep-btn{padding:8px 10px;font-size:11px;min-height:36px}
body.zwing-handy .sh-speed-row{padding:4px 16px 6px}
body.zwing-handy .sh-speed-slider::-webkit-slider-thumb{width:24px;height:24px}
  /* Alarm panel mobile */
body.zwing-handy .sh-alarm-row{flex-direction:column;align-items:stretch;gap:6px}
body.zwing-handy .sh-alarm-row label{width:auto}
body.zwing-handy .sh-day-btn{width:32px;height:32px;font-size:11px}

  /* Entry detail responsive */
body.zwing-handy .entry-detail{width:100%;max-width:none;max-height:94vh}
body.zwing-handy .ed-main{padding:12px}
body.zwing-handy .ed-top{padding:10px 12px}

  /* Quick input less padding */
body.zwing-handy .quick-input{margin:10px 10px 0;padding:12px}
body.zwing-handy .feed-content{padding:10px}

  /* Claude panel full width */
body.zwing-handy .claude-panel.open{width:100vw;min-width:0;position:fixed;inset:0;z-index:95}
body.zwing-handy .mobile-header{display:flex}
body.zwing-handy .quick-toolbar{display:flex}
body.zwing-handy .vswitch{display:flex}

  /* Sidebar: off-canvas slide-in (same as mobile but a bit wider) */
body.zwing-handy .sidebar{position:fixed;top:0;left:0;bottom:0;width:268px;z-index:90;transform:translateX(-100%);transition:transform .25s ease}
body.zwing-handy .sidebar.open{transform:translateX(0)}
body.zwing-handy .sidebar-close-btn{display:flex}

  /* Shift content below header+toolbar */
body.zwing-handy .app-layout{margin-top:calc(102px + env(safe-area-inset-top,0px));height:calc(100vh - 102px - env(safe-area-inset-top,0px));height:calc(100dvh - 102px - env(safe-area-inset-top,0px))}

  /* Add right padding for vswitch */
body.zwing-handy .feed-content{padding:16px 56px 16px 16px}
body.zwing-handy #smarthome .sh-header{display:none}
body.zwing-handy #smarthome-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:4px 56px 16px 16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

  /* Hide desktop nav */
body.zwing-handy .sidebar-nav{display:none}

  /* Touch targets */
body.zwing-handy .sh-lamp{padding:12px}
body.zwing-handy .sh-lamp-row{min-height:44px}
body.zwing-handy .sh-group{padding:12px}
body.zwing-handy .sh-group-row{min-height:44px}
body.zwing-handy .sh-room-slider,body.zwing-handy .sh-lamp-slider,body.zwing-handy .sh-group-slider{height:8px}
body.zwing-handy .sh-room-slider::-webkit-slider-thumb,body.zwing-handy .sh-lamp-slider::-webkit-slider-thumb,body.zwing-handy .sh-group-slider::-webkit-slider-thumb{width:24px;height:24px}

  /* Entry detail */
body.zwing-handy .entry-detail{width:96%;max-height:92vh}
body.zwing-handy .ed-main{padding:14px}

  /* Claude panel side */
body.zwing-handy .claude-panel.open{width:45vw;min-width:320px}
body.zwing-handy .ed-body{flex-direction:column;overflow-y:auto}
body.zwing-handy .ed-main{overflow:visible}
body.zwing-handy .ed-side{width:auto;border-left:0;border-top:1px solid var(--border);max-height:none}
body.zwing-handy .ed-side-scroll{flex-direction:row;flex-wrap:wrap;overflow:visible}
body.zwing-handy .ed-side-scroll .img-wrap{width:calc(50% - 5px)}
body.zwing-handy .file-row .fr-date,body.zwing-handy .file-row .fr-entry{display:none}
body.zwing-handy .file-row .fr-size{width:60px}
body.zwing-handy .dv-fuss{display:none}
body.zwing-handy .inst-kacheln{grid-template-columns:1fr}
body.zwing-handy .nt-hinweis{display:none}
body.zwing-handy .neu-trigger{margin:12px 12px 0;padding:0 13px}
body.zwing-handy .feed-leiste{margin:8px 12px 0}
body.zwing-handy #punkte-layer{background:rgba(0,0,0,.5)}
body.zwing-handy body:not(.punkte-offen) #punkte-layer{background:transparent}
body.zwing-handy .pw{left:6px!important;top:6px!important;
    width:calc(100vw - 12px)!important;height:calc(100vh - 12px)!important;
    min-width:0;border-radius:var(--radius)}
body.zwing-handy .pw .ed-top{cursor:default}
body.zwing-handy .pw-groesse{display:none}

body.zwing-handy .vswitch { display: none !important; }
body.zwing-handy .bottom-nav { display: flex !important; }

body.zwing-desktop .mobile-header,
body.zwing-desktop .quick-toolbar,
body.zwing-desktop .bottom-nav,
body.zwing-desktop .vswitch,
body.zwing-desktop .sidebar-close-btn,
body.zwing-desktop #sidebar-backdrop { display: none !important; }
body.zwing-desktop .sidebar {
  position: static !important; transform: none !important; width: 248px; z-index: auto;
}
body.zwing-desktop .app-layout { margin-top: 0 !important; height: 100vh; height: 100dvh; }
body.zwing-desktop .snippets-panel { display: flex; }

/* Der Schalter selbst (Benutzerleiste). */
.ansicht-schalter { display: inline-flex; gap: 2px; margin-left: 6px; }
.ansicht-schalter button {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted);
  border-radius: var(--radius); padding: 3px 8px; font-size: 11.5px; cursor: pointer;
}
.ansicht-schalter button.an { color: var(--text-primary); border-color: var(--accent); }
body.solo .ansicht-schalter { display: none; }