:root{
  --glass-bg: rgba(20,20,24,0.55);
  --glass-border: rgba(255,255,255,0.08);
  --text: #f5f5f5;
  --text-dim: #b8b8bd;
  --accent-orange: #e0964d;
  --accent-purple: #7c6fe0;
  --accent-gray: #4b4b52;
  --radius: 14px;
  --blur: 18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:#0b0b0d;
  height:100vh; overflow:hidden;
}
.hidden{display:none !important;}

/* ---- Landing ---- */
.landing{
  min-height:100vh; overflow-y:auto;
  background: radial-gradient(circle at 20% 0%, #3a2b1f, #0b0b0d 60%);
}
.landing-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px;
}
.landing-nav .brand{font-size:18px; font-weight:700;}
.landing-nav-actions{display:flex; gap:12px; align-items:center;}
.nav-link-btn{
  background:none; border:none; color:var(--text); cursor:pointer; font-size:14px;
}
.nav-cta-btn{
  background:var(--accent-orange); border:none; border-radius:20px;
  padding:9px 18px; color:#111; font-weight:600; cursor:pointer; font-size:14px;
}
.landing-hero{
  max-width:640px; margin:60px auto; text-align:center; padding:0 20px;
}
.landing-hero h1{font-size:38px; font-weight:700; line-height:1.2; margin-bottom:16px;}
.landing-hero p{color:var(--text-dim); font-size:16px; margin-bottom:28px;}
.landing-hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.landing-features{
  display:flex; gap:20px; max-width:900px; margin:40px auto 80px; padding:0 20px; flex-wrap:wrap; justify-content:center;
}
.feature-card{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius);
  padding:24px; width:250px; backdrop-filter:blur(var(--blur));
}
.feature-icon{font-size:28px;}
.feature-card h3{margin:12px 0 8px; font-size:16px;}
.feature-card p{color:var(--text-dim); font-size:13px; line-height:1.5;}

/* ---- Showcase ---- */
.showcase{ max-width:980px; margin:0 auto 80px; padding:0 20px; text-align:center;}
.showcase h2{font-size:26px; margin-bottom:6px;}
.showcase-sub{color:var(--text-dim); font-size:14px; margin-bottom:32px;}
.showcase-grid{display:flex; gap:24px; flex-wrap:wrap; justify-content:center;}
.mock-window{
  width:280px; background:#141417; border:1px solid var(--glass-border); border-radius:12px;
  overflow:hidden; text-align:left; box-shadow:0 20px 40px rgba(0,0,0,0.4);
}
.mock-titlebar{display:flex; gap:6px; padding:10px 12px; background:#1c1c20;}
.mock-titlebar .dot{width:10px; height:10px; border-radius:50%;}
.mock-titlebar .dot.red{background:#ff5f57;}
.mock-titlebar .dot.yellow{background:#febc2e;}
.mock-titlebar .dot.green{background:#28c840;}
.mock-body{
  padding:16px; min-height:150px;
  background:linear-gradient(160deg,#2b2140,#7a3b3b 60%,#d98a3d);
}
.mock-dashboard{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.mock-widget{
  background:rgba(20,20,24,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:8px;
  padding:8px; font-size:13px; font-weight:700; color:#fff; display:flex; flex-direction:column; gap:2px;
}
.mock-widget span{font-size:10px; font-weight:400; color:var(--text-dim);}
.mock-storage{background:#141417; display:flex; flex-direction:column; gap:8px;}
.mock-file{
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:8px;
  padding:8px 10px; font-size:12px;
}
.mock-settings{background:#141417; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mock-swatch{
  height:50px; border-radius:8px; border:1px solid var(--glass-border);
}
.mock-swatch.upload{
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05);
  font-size:11px; color:var(--text-dim);
}
.mock-caption{padding:12px 16px 16px; font-size:12px; color:var(--text-dim); background:#141417;}

/* ---- Contact ---- */
.contact{max-width:480px; margin:0 auto 80px; padding:0 20px; text-align:center;}
.contact h2{font-size:24px; margin-bottom:20px;}
.contact-form{display:flex; flex-direction:column; gap:12px;}
.contact-form input, .contact-form textarea{
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); border-radius:8px;
  padding:10px 12px; color:var(--text); font-size:14px; font-family:inherit; resize:vertical;
}

/* ---- Auth ---- */
.auth-screen{
  height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, #3a2b1f, #0b0b0d 70%);
}
.auth-card{
  background:var(--glass-bg); backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border); border-radius:var(--radius);
  padding:32px; width:320px; display:flex; flex-direction:column; gap:12px;
}
.auth-card h1{ text-align:center; margin-bottom:8px; font-weight:600;}
.auth-card input{
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border);
  border-radius:8px; padding:10px 12px; color:var(--text); font-size:14px;
}
.auth-card button{
  background:var(--accent-orange); border:none; border-radius:8px;
  padding:10px; color:#111; font-weight:600; cursor:pointer;
}
.auth-back{background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:13px; align-self:flex-start; padding:0;}
.auth-toggle{font-size:13px; text-align:center; color:var(--text-dim);}
.auth-toggle a{color:var(--accent-orange);}
.auth-error{color:#e05d5d; font-size:13px; text-align:center; min-height:16px;}
.auth-success{color:#7ec98f; font-size:13px; text-align:center;}

/* ---- App shell ---- */
.app{ position:relative; height:100vh; width:100vw;}
.wallpaper{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, #2b2140 0%, #7a3b3b 35%, #d98a3d 55%, #6b3a2e 80%, #1a1520 100%);
  filter:brightness(0.85);
}
/* Eigenes Wallpaper: Bild nach /public/img/wallpaper-default.jpg legen und obige Zeile durch
   background: url('/img/wallpaper-default.jpg') center/cover no-repeat; ersetzen */

.topbar{
  height:40px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:rgba(15,15,17,0.6); backdrop-filter:blur(10px);
  font-size:13px;
}
.topbar-left{display:flex; align-items:center; gap:10px;}
.icon-btn{background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px;}
.brand{font-weight:600;}
.divider{color:var(--text-dim);}
.topbar-right{display:flex; align-items:center; gap:16px;}
.topbar-pill{
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border);
  border-radius:20px; padding:5px 12px; color:var(--text-dim); font-size:12px; cursor:pointer;
}
.topbar-pill kbd{opacity:0.6; margin-left:4px;}
.topbar-item{color:var(--text-dim);}
.avatar{
  width:22px; height:22px; border-radius:50%; background:var(--accent-purple);
}

.view{position:relative; height:calc(100vh - 40px);}

/* ---- Search ---- */
.search-bar{ display:flex; justify-content:center; padding-top:24px;}
.search-bar input{
  width:480px; max-width:80vw; padding:12px 18px; border-radius:24px;
  background:rgba(20,20,24,0.5); backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border); color:var(--text); font-size:14px;
}

/* ---- Widgets ---- */
.widget{
  position:absolute; background:var(--glass-bg); backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border); border-radius:var(--radius); padding:16px;
}
.widget-label{font-size:11px; letter-spacing:0.08em; color:var(--text-dim); margin-bottom:8px;}
.widget-clock{ top:70px; left:24px; width:210px;}
.clock-time{font-size:34px; font-weight:700;}
.clock-date{color:var(--text-dim); font-size:13px; margin-top:4px;}
.widget-weather{ top:70px; right:24px; width:220px;}
.weather-main{display:flex; align-items:center; gap:10px;}
.weather-icon{font-size:26px;}
.weather-temp{font-size:26px; font-weight:700;}
.weather-desc{color:var(--text-dim); font-size:13px; margin-top:6px;}
.widget-focuslinks{ bottom:130px; left:24px; width:280px; min-height:90px;}
.widget-upcoming{ bottom:130px; right:24px; width:280px; min-height:90px;}
.widget-body{color:var(--text-dim); font-size:13px;}
.widget-news{
  bottom:220px; left:50%; transform:translateX(-50%); width:480px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.news-headline{font-size:15px; font-weight:500;}
.news-dots{display:flex; gap:6px;}
.news-dots span{width:6px; height:6px; border-radius:50%; background:var(--text-dim); opacity:0.4;}
.news-dots span.active{opacity:1; background:var(--accent-orange);}

/* ---- Dock ---- */
.dock{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:14px; align-items:flex-end; padding:10px 16px;
  background:rgba(20,20,24,0.45); backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border); border-radius:22px;
}
.dock-btn{
  width:58px; height:58px; border-radius:18px; border:none; cursor:pointer;
  font-size:24px; display:flex; align-items:center; justify-content:center;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
}
.dock-btn:hover{ transform:translateY(-16px) scale(1.12); box-shadow:0 20px 24px rgba(0,0,0,0.4);}
.dock-btn:active{ transform:translateY(-8px) scale(1.05);}
.dock-quick{background:linear-gradient(135deg, var(--accent-orange), #c97a3a);}
.dock-storage{background:linear-gradient(135deg,#5b8def,#3a63c9);}
.dock-search{background:var(--accent-purple);}
.dock-settings{background:linear-gradient(135deg,#5a5a62,#38383e);}

/* ---- Storage view ---- */
.storage-toolbar{
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  background:rgba(15,15,17,0.5); flex-wrap:wrap;
}
.storage-toolbar button, .upload-btn{
  background:rgba(255,255,255,0.08); border:1px solid var(--glass-border);
  color:var(--text); border-radius:8px; padding:6px 12px; cursor:pointer; font-size:13px;
}
.storage-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:16px; padding:20px;
}
.storage-item{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:10px;
  padding:12px; text-align:center; cursor:pointer; font-size:12px;
  transition:transform .15s ease, background .15s ease;
}
.storage-item:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.08);}
.storage-item .icon{font-size:28px; display:block; margin-bottom:6px;}

/* ---- Mac-Fenster (Settings & Storage), 16:9 ---- */
.mac-window{
  position:fixed; top:64px; left:50%; transform:translateX(-50%);
  width:880px; height:495px; /* 16:9 */
  background:#16161a; border:1px solid rgba(255,255,255,0.1); border-radius:20px;
  box-shadow:0 60px 120px rgba(0,0,0,0.6); overflow:hidden; user-select:none;
  display:flex; flex-direction:column; z-index:20;
}
.mac-window.hidden{display:none;}
#storage-window{ left:32%; }
#settings-window{ left:68%; }
.mac-window.maximized{ width:92vw; height:88vh; top:6vh; left:4vw; transform:none;}
.mac-window.minimized{ height:44px;}
.mac-window.minimized .mac-window-body{display:none;}
.mac-titlebar{
  display:flex; align-items:center; gap:8px; padding:12px 14px; background:#222226;
  cursor:grab; position:relative; flex-shrink:0;
}
.mac-titlebar:active{cursor:grabbing;}
.mac-dot{width:13px; height:13px; border-radius:50%; cursor:pointer;}
.mac-close{background:#ff5f57;}
.mac-min{background:#febc2e;}
.mac-max{background:#28c840;}
.mac-title{
  position:absolute; left:0; right:0; text-align:center; font-size:12px; color:var(--text-dim);
  pointer-events:none;
}
.mac-window-body{flex:1; overflow-y:auto; min-height:0;}

.settings-card{
  max-width:none; margin:0; border:none; border-radius:0; padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.wallpaper-picker{display:flex; gap:10px; flex-wrap:wrap;}
.wallpaper-swatch{
  width:64px; height:40px; border-radius:8px; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease;
}
.wallpaper-swatch:hover{ transform:scale(1.06);}
.wallpaper-swatch.active{border-color:var(--accent-orange);}
.settings-card label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim);}
.settings-card input, .settings-card select{
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border);
  border-radius:8px; padding:8px 10px; color:var(--text);
}
.settings-card button{
  background:var(--accent-orange); border:none; border-radius:8px; padding:10px;
  color:#111; font-weight:600; cursor:pointer;
}
#pin-list .pin-row{display:flex; justify-content:space-between; font-size:13px; padding:4px 0;}

/* ---- Kontextmenü & Share-Modal ---- */
.ctx-menu{
  position:fixed; z-index:200; background:#1c1c20; border:1px solid var(--glass-border);
  border-radius:10px; padding:6px; box-shadow:0 20px 40px rgba(0,0,0,0.5); min-width:160px;
}
.ctx-menu button{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--text);
  padding:8px 10px; border-radius:6px; font-size:13px; cursor:pointer;
}
.ctx-menu button:hover{background:rgba(255,255,255,0.08);}
.ctx-menu button.danger{color:#ff8a80;}
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:300;
}
.modal-box{
  background:#1c1c20; border:1px solid var(--glass-border); border-radius:16px; padding:24px;
  width:360px; text-align:center; box-shadow:0 30px 60px rgba(0,0,0,0.5);
}
.modal-box h3{font-size:15px; margin-bottom:14px;}
.modal-link-row{display:flex; gap:8px;}
.modal-link-row input{
  flex:1; background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); border-radius:8px;
  padding:8px 10px; color:var(--text); font-size:12px;
}
.modal-link-row button{
  background:var(--accent-orange); border:none; border-radius:8px; padding:8px 14px;
  color:#111; font-weight:600; cursor:pointer; font-size:12px;
}
.modal-close-btn{
  margin-top:16px; background:rgba(255,255,255,0.08); border:1px solid var(--glass-border);
  color:var(--text); border-radius:8px; padding:8px 16px; cursor:pointer; font-size:13px;
}

/* ---- Quick Find ---- */
.quickfind-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center; padding-top:120px; z-index:100;
}
.quickfind-box{
  width:480px; background:rgba(24,24,28,0.9); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:12px; backdrop-filter:blur(var(--blur));
}
.quickfind-box input{
  width:100%; background:none; border:none; color:var(--text); font-size:16px; padding:8px;
}
#quickfind-results .qf-item{padding:8px; border-radius:8px; cursor:pointer; font-size:13px;}
#quickfind-results .qf-item:hover{background:rgba(255,255,255,0.08);}