/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FONTS  –  system-ui stack, kein externer Font-Abruf
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Palette */
    --bg:           #0c0e14;
    --glass:        rgba(20, 24, 36, 0.78);
    --glass2:       rgba(255,255,255,0.04);
    --glass-hi:     rgba(255,255,255,0.06);
    --border:       rgba(255,255,255,0.08);
    --border-h:     rgba(94,234,212,0.25);
    --blur:         blur(22px) saturate(170%);
    --text:         #e8eaf2;
    --text-2:       rgba(232,234,242,0.55);
    --text-3:       rgba(232,234,242,0.28);

    /* Teal accent family */
    --teal-1: #5eead4;
    --teal-2: #2dd4bf;
    --teal-3: #14b8a6;
    --teal-4: #0d9488;

    --accent:       var(--teal-1);
    --accent-blue:  #60a5fa;
    --accent-warm:  #fb923c;
    --accent-rose:  #f472b6;
    --accent-amber: #fbbf24;

    --maxw:      1560px;   /* Inhaltsbreite am Desktop */
    --radius:    18px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --shadow:    0 8px 40px rgba(0,0,0,0.55);
    --shadow-teal: 0 0 18px rgba(94,234,212,0.18);

    /* Wetter-Karte: dynamische Variablen (werden via JS gesetzt) */
    --w-bg-1: rgba(16,28,72,0.65);
    --w-bg-2: rgba(10,50,44,0.55);
    --w-accent: rgba(94,234,212,0.18);
}

/* ── Base ── */
html, body { height:100%; background:var(--bg); color:var(--text); overflow-x:hidden; }
body { -webkit-font-smoothing:antialiased; }

/* ── Animated BG orbs ── */
.bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-canvas::before {
    content:''; position:absolute; width:800px; height:800px; border-radius:50%;
    background:radial-gradient(circle, rgba(20,50,100,0.55) 0%, transparent 70%);
    top:-220px; left:-220px; animation:orb1 22s ease-in-out infinite alternate;
}
.bg-canvas::after {
    content:''; position:absolute; width:650px; height:650px; border-radius:50%;
    background:radial-gradient(circle, rgba(13,148,136,0.25) 0%, transparent 70%);
    bottom:-160px; right:-160px; animation:orb2 28s ease-in-out infinite alternate;
}
.bg-orb3 {
    position:absolute; width:450px; height:450px; border-radius:50%;
    background:radial-gradient(circle, rgba(60,30,100,0.22) 0%, transparent 70%);
    top:45%; left:45%; transform:translate(-50%,-50%);
    animation:orb3 20s ease-in-out infinite alternate;
}
@keyframes orb1 { to { transform:translate(60px,45px) scale(1.08); } }
@keyframes orb2 { to { transform:translate(-45px,-60px) scale(1.10); } }
@keyframes orb3 { to { transform:translate(-40%,-60%) scale(1.15); } }

/* ── macOS Menu Bar ── */
.mac-bar {
    position:fixed; top:0; left:0; right:0; height:34px;
    background:rgba(8,9,14,0.9); backdrop-filter:blur(30px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; z-index:1100;
    font-size:0.75rem; font-weight:500;
}
.mac-bar .logo { font-weight:700; color:var(--text); letter-spacing:-0.02em; }
.mac-bar .bar-right { display:flex; align-items:center; gap:10px; color:var(--text-2); }
.mac-bar #mac-time {
    font-family:'Courier New', monospace;
    font-size:0.75rem; color:var(--text); letter-spacing:0.05em;
}

/* ── Header-Tabs ── */
.mac-tabs { display:flex; align-items:center; gap:4px; }
.mac-tab {
    appearance:none; background:transparent; border:1px solid transparent;
    color:var(--text-2); font:inherit; font-size:0.73rem; font-weight:600;
    padding:3px 11px; border-radius:9px; cursor:pointer;
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    transition:background .2s, color .2s, border-color .2s;
}
a.mac-tab { text-decoration:none; }
.mac-tab .lucide { width:12px; height:12px; }
.mac-tab:hover { color:var(--text); background:var(--glass-hi); }
.mac-tab.active { color:#03201c; background:var(--teal-2); box-shadow:var(--shadow-teal); }

/* ── Ansichten ── */
.view[hidden] { display:none; }

/* ── Desktop Layout ── */
.desktop {
    position:relative; z-index:1;
    min-height:100vh;
    padding:50px 18px 100px;
    display:grid;
    grid-template-columns: 1fr clamp(320px, 24vw, 420px);
    gap:14px;
    max-width:var(--maxw);
    margin:0 auto;
}

/* ── Glass Widget ── */
.widget {
    background:var(--glass);
    backdrop-filter:var(--blur);
    -webkit-backdrop-filter:var(--blur);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    animation:fadeUp .55s cubic-bezier(.34,1.2,.64,1) both;
    position:relative;
    overflow:hidden;
}
/* Innerer Highlight-Border oben (Glass-Polish) */
.widget::before {
    content:''; position:absolute; top:0; left:18px; right:18px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
    pointer-events:none;
}
.widget:nth-child(1){animation-delay:.04s}
.widget:nth-child(2){animation-delay:.10s}
.widget:nth-child(3){animation-delay:.16s}
.widget:nth-child(4){animation-delay:.22s}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.wlabel {
    font-size:0.62rem; font-weight:600; letter-spacing:0.13em;
    text-transform:uppercase; color:var(--text-3);
    margin-bottom:12px;
    display:flex; align-items:center; gap:6px;
}
.wlabel .lucide { color:var(--teal-3); width:12px; height:12px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SKELETON
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sk {
    background:linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
    background-size:200% 100%; animation:shimmer 1.5s infinite;
    border-radius:5px; color:transparent !important;
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVIGATION  ·  oben am Desktop, unten am Handy
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a.mac-tab { text-decoration:none; }

/* ── Leiste unten (Handy) ── */
.tabbar {
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(12,14,20,0.86);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar-inner { display:flex; align-items:stretch; }
.tabbar a, .tabbar button {
    flex:1; min-width:0; appearance:none; background:none; border:0;
    font:inherit; color:var(--text-3); text-decoration:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; border-radius:11px;
    transition:color .16s, background .16s;
}
.tabbar .lucide { width:19px; height:19px; }
.tabbar span {
    font-size:0.56rem; font-weight:600; letter-spacing:0.01em;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tabbar a:active, .tabbar button:active { background:var(--glass-hi); }
.tabbar a.active { color:var(--teal-1); }

/* ── "Mehr"-Sheet ── */
.sheet-bd {
    position:fixed; inset:0; z-index:70;
    background:rgba(4,6,10,0.62);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.sheet-bd.open { opacity:1; pointer-events:auto; }
.sheet {
    position:fixed; left:0; right:0; bottom:0; z-index:71;
    background:rgba(18,22,32,0.96);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-top:1px solid var(--border);
    border-radius:20px 20px 0 0;
    padding:10px 14px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(102%); transition:transform .28s cubic-bezier(.32,1.05,.5,1);
    max-height:82vh; overflow-y:auto;
}
.sheet.open { transform:translateY(0); }
.sheet-grip { width:38px; height:4px; border-radius:999px; background:var(--border); margin:4px auto 14px; }
.sheet-t { font-size:0.6rem; color:var(--text-3); text-transform:uppercase;
           letter-spacing:0.1em; font-weight:600; margin:0 0 8px 6px; }
.sheet a {
    display:flex; align-items:center; gap:12px;
    padding:13px 14px; border-radius:13px; margin-bottom:5px;
    color:var(--text); text-decoration:none; font-size:0.87rem; font-weight:500;
    background:var(--glass2); border:1px solid transparent;
    transition:background .16s, border-color .16s;
}
.sheet a:active { background:var(--glass-hi); }
.sheet a.active { background:rgba(94,234,212,0.10); border-color:var(--border-h); color:var(--teal-1); }
.sheet a .lucide { width:17px; height:17px; color:var(--teal-1); flex-shrink:0; }
.sheet a.active .lucide { color:var(--teal-1); }

@media (max-width:760px) {
    .mac-tabs { display:none; }
    .tabbar { display:block; }
    body { padding-bottom:64px; }
}

/* Ersatz für die wenigen Bootstrap-Klassen, die die Kopfleiste nutzt */
.d-flex { display:flex; }
.align-items-center { align-items:center; }
.gap-3 { gap:12px; }

/* Auf schmalen Geräten stört die rechte Statusgruppe */
@media (max-width:760px) {
    .mac-bar .bar-right i { display:none; }
}

/* Die Kopfleiste liegt fix über dem Inhalt – Seiten ohne eigenen
   Innenabstand brauchen oben Platz */
.vz-wrap, .nw-wrap { padding-top:52px; }
@media (max-width:760px) { .vz-wrap, .nw-wrap { padding-top:46px; } }

/* aus wetter.css übernommen – wird von mehreren Seiten gebraucht */
.wx-sec-h {
    display:flex; align-items:center; gap:7px;
    font-size:0.7rem; font-weight:600; color:var(--text-2);
    text-transform:uppercase; letter-spacing:0.1em;
    margin:6px 0 -4px 4px;
}
.wx-sec-h .lucide { color:var(--teal-3); width:13px; height:13px; }

/* aus dashboard.css übernommen – wird von mehreren Seiten gebraucht */
.eco-dot { width:6px; height:6px; border-radius:50%; background:var(--teal-2); animation:live-pulse 2s ease-in-out infinite; flex-shrink:0; }
.eco-dot.off { background:#f87171; animation:none; }