/* =========================
   Design Tokens (Light/Dark)
   ========================= */
:root{
  --bg: #f6f7fb;
  --fg: #0b1020;
  --muted: #5b677a;
  --surface: #ffffffcc;
  --surface-strong: #ffffffee;
  --border: #e6e8ef;
  --accent: #4f46e5;
  --accent-2: #06b6d4;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --glass-blur: 12px;
  --tile: #ffffffb0;
  --tile-hover: #ffffffee;
  --overlay-darkness: 0.25;
}

[data-theme="dark"]{
  --bg: #0b1020;
  --fg: #e8ecf8;
  --muted: #a9b1c4;
  --surface: #11152ab8;
  --surface-strong: #11152add;
  --border: #232a42;
  --accent: #8b7dff;
  --accent-2: #22d3ee;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --tile: #11152acc;
  --tile-hover: #11152aff;
  --overlay-darkness: 0.35;
}

/* =========================
   Base / Resets
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
        "Noto Sans", Helvetica, Arial,
        "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol";
  color:var(--fg);
  background:var(--bg);
  background-attachment:fixed;
  transition: background-color .3s ease, color .3s ease;
  overflow-x:hidden;
}

/* Controls übernehmen denselben Font (fix gegen �) */
button, input, select, textarea { font: inherit; }

/* Utilities */
.hidden{display:none !important;}
.muted{color:var(--muted);}
.kbd{
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 6px;
}

/* =========================
   Background Image + Overlay
   ========================= */
.bg-image{
  position:fixed; inset:0; z-index:-1;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.bg-overlay{
  position:fixed; inset:0; z-index:0;
  background: rgba(0,0,0,var(--overlay-darkness));
  pointer-events:none;
}

/* =========================
   Layout
   ========================= */
.container{ position:relative; z-index:1; max-width:1200px; margin:auto; padding:32px 18px 40px; }

header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 18px;
  border:1px solid var(--border);
  background:var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  border-radius:18px;
  box-shadow: var(--shadow);
}
.greeting{ font-weight:700; font-size: clamp(20px, 3vw, 28px); display:flex; align-items:center; gap:10px; }
.clock{ font-variant-numeric: tabular-nums; color:var(--muted); font-size:15px; }
.actions{ display:flex; gap:10px; align-items:center; }

.layout{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:18px; }
@media (min-width:980px){
  .layout{ grid-template-columns:1.8fr .9fr; }
}

/* =========================
   Buttons
   ========================= */
.btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--surface-strong);
  color:var(--fg);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow: var(--shadow);
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.ghost{ background:transparent; backdrop-filter: blur(var(--glass-blur)); }

/* =========================
   Search Bar
   ========================= */
.search{ display:flex; gap:10px; align-items:stretch; }
.search .input{ flex:1; min-width:220px; }
input, select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-strong);
  color:var(--fg);
  outline:none;
  box-shadow: var(--shadow);
}
input::placeholder{ color:var(--muted); }

/* =========================
   Cards / Sections
   ========================= */
.card{
  border:1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  padding:18px;
  border-radius:18px;
  box-shadow: var(--shadow);
}

/* =========================
   Favorites Grid
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:14px;
  margin-top:16px;
}
.tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:16px; min-height:120px;
  text-align:center;
  border:1px solid var(--border);
  background: var(--tile);
  border-radius:18px;
  cursor:grab;
  transition: background .2s ease, transform .15s ease;
}
.tile:hover{ background: var(--tile-hover); transform: translateY(-2px); }
.favicon{ width:36px; height:36px; border-radius:8px; object-fit:cover; }
.label{ font-weight:600; word-break:break-word; }

/* Toolbar über dem Grid */
.toolbar{ display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:10px; flex-wrap:wrap; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border:1px solid var(--border); border-radius:999px; background:var(--surface-strong);
}

/* =========================
   Weather Widget
   ========================= */
.weather{ display:flex; align-items:center; gap:12px; }
.weather .temp{ font-size:32px; font-weight:800; }

/* =========================
   To-Do Widget
   ========================= */
.todo-list .todo-item{
  display:flex; align-items:center; gap:10px;
  padding:10px; margin-top:8px;
  background: var(--surface-strong);
  border:1px solid var(--border);
  border-radius:12px;
}
.todo-item .title{ flex:1; }
.todo-item.done .title{ text-decoration:line-through; color:var(--muted); }

/* =========================
   Footer
   ========================= */
footer{ margin-top:20px; color:var(--muted); text-align:center; }

/* =========================
   Modals (native <dialog>)
   ========================= */
dialog.modal{
  border:none; padding:0; width:min(640px, 92vw);
  border-radius:20px; overflow:hidden;
  background: var(--surface-strong); color:var(--fg);
}
dialog.modal::backdrop{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}
dialog.modal header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background: var(--surface);
}
dialog.modal .body{ padding:18px; }

/* Form-Grid in Modals */
.row{
  display:grid; gap:10px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width:640px){ .row{ grid-template-columns: 1fr; } }

/* =========================
   Small helpers
   ========================= */
.icon{ width:18px; height:18px; display:inline-block; }

/* Suggest-Box für die Suche */
#searchSuggest {
  position: absolute; z-index: 9999; margin-top: 4px;
  background: var(--panel, rgba(0,0,0,.85)); color: var(--fg,#fff);
  backdrop-filter: blur(6px);
  border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.25);
  min-width: 260px; max-width: 520px; overflow: hidden;
}
#searchSuggest.hidden { display: none; }
#searchSuggest .item {
  padding: 10px 12px; cursor: pointer; display: flex; gap: 10px; align-items: center;
}
#searchSuggest .item:hover, #searchSuggest .item.active { background: rgba(255,255,255,.08); }
#searchSuggest .item .label { font-weight: 600; }
#searchSuggest .item .url   { font-size: 12px; opacity: .8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#searchWrap { position: relative; } /* parent der Inputbox */