/* ==========================================================================
   Weckzentrale – Grundlagen: Farben, Layout, Navigation, Formulare, Dialoge
   ========================================================================== */

:root{
  --bg:#f6f4ef;
  --surface:#ffffff;
  --surface-2:#efece3;
  --surface-3:#e6e1d4;
  --border:#ddd6c8;
  --border-strong:#c8bfab;
  --text:#221f19;
  --text-dim:#6b6558;
  --text-faint:#8a8373;
  --accent-alarm:#a8660a;
  --accent-alarm-soft:#f2e2c3;
  --on-alarm:#1a1408;
  --accent-timer:#0c7c6d;
  --accent-timer-soft:#d7efe9;
  --on-timer:#ffffff;
  --accent-stopwatch:#5b3fa6;
  --accent-stopwatch-soft:#e7e1f8;
  --on-stopwatch:#ffffff;
  --success:#2f7d4f;
  --success-soft:#dcefe1;
  --warning:#9a6200;
  --warning-soft:#f7e7c6;
  --danger:#b23a34;
  --danger-soft:#f6dcd9;
  --shadow:0 1px 2px rgba(30,25,15,.07), 0 6px 20px rgba(30,25,15,.07);
  --shadow-lg:0 10px 40px rgba(30,25,15,.18);
  --radius-s:10px;
  --radius-m:14px;
  --radius-l:20px;
  --font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,"Roboto Mono",Menlo,Consolas,monospace;
  --accent-local:var(--accent-alarm);
  --accent-local-soft:var(--accent-alarm-soft);
  --on-accent-local:var(--on-alarm);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --tabbar-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11151a; --surface:#181e25; --surface-2:#1f262e; --surface-3:#28313b; --border:#2b333d; --border-strong:#3b4653;
    --text:#eef1f4; --text-dim:#a3adb8; --text-faint:#7c8793;
    --accent-alarm:#f0aa3e; --accent-alarm-soft:#3a2e14; --on-alarm:#14110a;
    --accent-timer:#3fd6c0; --accent-timer-soft:#0f2e2a; --on-timer:#06201c;
    --accent-stopwatch:#b9a2f2; --accent-stopwatch-soft:#241c3a; --on-stopwatch:#1c1430;
    --success:#5cc98a; --success-soft:#173a28;
    --warning:#f0b44a; --warning-soft:#3a2d12;
    --danger:#ef6b63; --danger-soft:#3a1e1c;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4);
    --shadow-lg:0 12px 48px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11151a; --surface:#181e25; --surface-2:#1f262e; --surface-3:#28313b; --border:#2b333d; --border-strong:#3b4653;
  --text:#eef1f4; --text-dim:#a3adb8; --text-faint:#7c8793;
  --accent-alarm:#f0aa3e; --accent-alarm-soft:#3a2e14; --on-alarm:#14110a;
  --accent-timer:#3fd6c0; --accent-timer-soft:#0f2e2a; --on-timer:#06201c;
  --accent-stopwatch:#b9a2f2; --accent-stopwatch-soft:#241c3a; --on-stopwatch:#1c1430;
  --success:#5cc98a; --success-soft:#173a28;
  --warning:#f0b44a; --warning-soft:#3a2d12;
  --danger:#ef6b63; --danger-soft:#3a1e1c;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4);
  --shadow-lg:0 12px 48px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.45;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  min-height:100vh;
  min-height:100dvh;
}
body.no-scroll{overflow:hidden;}
h1,h2,h3,h4{margin:0; line-height:1.25; text-wrap:balance;}
p{margin:0;}
[hidden]{display:none !important;}
button{font:inherit;}
a{color:var(--accent-local);}

.ico{width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em;}
.ico-fill{fill:currentColor;}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Layout ---------- */
.app{
  max-width:780px;
  margin:0 auto;
  padding:calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) calc(var(--tabbar-h) + 32px + var(--safe-bottom)) calc(16px + var(--safe-left));
  display:flex;
  flex-direction:column;
  gap:14px;
}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-logo{width:32px; height:32px; border-radius:8px; flex:none;}
.brand-text{display:flex; flex-direction:column; min-width:0;}
.brand-name{font-weight:700; font-size:1.08rem; letter-spacing:.01em;}
.brand-sub{font-size:.76rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar-actions{display:flex; align-items:center; gap:10px; flex:none;}
.topbar-clock{font-weight:600; font-size:1.25rem; color:var(--text-dim); letter-spacing:.02em;}
.topbar-clock .sec{font-size:.8em; color:var(--text-faint);}

/* ---------- Navigation ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);
  backdrop-filter:saturate(1.5) blur(16px);
  border-top:1px solid var(--border);
  padding:6px calc(6px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(6px + var(--safe-left));
}
.tab-btn{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:52px; padding:5px 2px; border:0; border-radius:12px; background:none; cursor:pointer;
  color:var(--text-faint); font-size:.68rem; font-weight:600; letter-spacing:.01em;
}
.tab-btn .ico{width:24px; height:24px;}
.tab-btn[data-tab="alarms"]{--tab-accent:var(--accent-alarm);}
.tab-btn[data-tab="timers"]{--tab-accent:var(--accent-timer);}
.tab-btn[data-tab="stopwatch"]{--tab-accent:var(--accent-stopwatch);}
.tab-btn[data-tab="settings"]{--tab-accent:var(--text);}
.tab-btn.active{color:var(--tab-accent);}
.tab-btn.active .ico{stroke-width:2.3;}
.tab-btn:focus-visible{outline:2px solid var(--tab-accent); outline-offset:-2px;}
.tab-count{
  position:absolute; top:3px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--accent-timer); color:var(--on-timer); font-size:.66rem; line-height:18px; text-align:center; font-weight:700;
}
.tab-dot{position:absolute; top:7px; left:calc(50% + 9px); width:9px; height:9px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 2px var(--surface);}

@media (min-width:780px){
  .app{padding-bottom:48px;}
  .tabbar{
    position:static; order:0; grid-template-columns:repeat(4,1fr); gap:4px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:4px;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .tab-btn{flex-direction:row; gap:8px; min-height:42px; font-size:.9rem; border-radius:999px; color:var(--text-dim);}
  .tab-btn .ico{width:20px; height:20px;}
  .tab-btn.active{background:var(--surface); box-shadow:var(--shadow);}
  .tab-count{position:static; margin-left:2px;}
  .tab-dot{position:static; margin-left:2px;}
}

.panels{display:block;}
.panel{display:none; flex-direction:column; gap:14px;}
.panel.active{display:flex; animation:panel-in .18s ease-out;}
@keyframes panel-in{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
#panel-alarms{--accent-local:var(--accent-alarm); --accent-local-soft:var(--accent-alarm-soft); --on-accent-local:var(--on-alarm);}
#panel-timers{--accent-local:var(--accent-timer); --accent-local-soft:var(--accent-timer-soft); --on-accent-local:var(--on-timer);}
#panel-stopwatch{--accent-local:var(--accent-stopwatch); --accent-local-soft:var(--accent-stopwatch-soft); --on-accent-local:var(--on-stopwatch);}
.accent-timer{--accent-local:var(--accent-timer); --accent-local-soft:var(--accent-timer-soft); --on-accent-local:var(--on-timer);}
.accent-neutral{--accent-local:var(--text); --accent-local-soft:var(--surface-2); --on-accent-local:var(--bg);}

.panel-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.panel-title{font-size:1.15rem;}
.toolbar-actions{display:flex; gap:8px; flex-wrap:wrap;}
.section-title{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:10px 2px 0;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); padding:14px 16px;}
.empty-state{color:var(--text-faint); font-size:.9rem; padding:18px 4px; text-align:center;}
.muted{color:var(--text-dim);}
.faint{color:var(--text-faint);}
.small{font-size:.82rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-ui); font-size:.9rem; font-weight:600; line-height:1.2;
  min-height:40px; padding:9px 15px; border-radius:var(--radius-s);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  cursor:pointer; transition:filter .12s, transform .06s, background .12s; text-decoration:none; white-space:nowrap;
  -webkit-user-select:none; user-select:none;
}
.btn:hover{filter:brightness(.97);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--accent-local); outline-offset:2px;}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--accent-local); border-color:var(--accent-local); color:var(--on-accent-local);}
.btn-danger{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn-ghost{background:transparent; border:1px dashed var(--border-strong); color:var(--text-dim);}
.btn-quiet{background:transparent; border-color:transparent; color:var(--text-dim);}
.btn-small{min-height:32px; padding:5px 10px; font-size:.8rem;}
.btn-lg{min-height:50px; padding:12px 22px; font-size:1rem; border-radius:14px;}
.btn-block{width:100%;}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface);
  color:var(--text-dim); cursor:pointer; font-size:1rem; padding:0;
}
.icon-btn .ico{width:19px; height:19px;}
.icon-btn:hover{border-color:var(--border-strong); color:var(--text);}
.icon-btn:focus-visible{outline:2px solid var(--accent-local); outline-offset:2px;}
.icon-btn.danger:hover{border-color:var(--danger); color:var(--danger);}
.icon-btn.active{background:var(--accent-local-soft); border-color:var(--accent-local); color:var(--accent-local);}
.icon-btn[disabled]{opacity:.4; cursor:not-allowed;}

/* ---------- Schalter ---------- */
.switch{position:relative; display:inline-block; width:46px; height:28px; flex:none;}
.switch input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1;}
.switch-track{position:absolute; inset:0; background:var(--border-strong); border-radius:999px; transition:background .15s;}
.switch-track::before{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s;
}
.switch input:checked + .switch-track{background:var(--accent-local);}
.switch input:checked + .switch-track::before{transform:translateX(18px);}
.switch input:focus-visible + .switch-track{outline:2px solid var(--accent-local); outline-offset:2px;}
.switch input:disabled + .switch-track{opacity:.45;}

/* ---------- Formulare ---------- */
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field > label, .field-label{font-size:.78rem; font-weight:600; color:var(--text-dim); letter-spacing:.02em;}
.input, .field input[type=text], .field input[type=number], .field input[type=date], .field input[type=time],
.field input[type=datetime-local], .field input[type=url], .field input[type=password], .field select, select.input{
  font-family:var(--font-ui); font-size:16px; line-height:1.3; padding:10px 11px; min-height:44px;
  border:1px solid var(--border-strong); border-radius:var(--radius-s); background:var(--surface); color:var(--text); width:100%;
  -webkit-appearance:none; appearance:none;
}
.field select, select.input{
  padding-right:34px;
  background-image:linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field input:focus-visible, .field select:focus-visible, .input:focus-visible{outline:2px solid var(--accent-local); outline-offset:1px;}
.field-hint{font-size:.78rem; color:var(--text-faint);}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.row-3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.range-row{display:flex; align-items:center; gap:10px;}
.range-row input[type=range]{flex:1; accent-color:var(--accent-local); min-height:32px;}
.range-val{font-size:.85rem; min-width:42px; text-align:right; color:var(--text-dim);}
.toggle-line{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; min-height:44px;}
.toggle-line .toggle-text{display:flex; flex-direction:column; gap:1px;}
.toggle-line .toggle-title{font-size:.94rem; font-weight:500;}
.toggle-line .toggle-sub{font-size:.78rem; color:var(--text-faint);}

.segmented{display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:3px; gap:3px;}
.segmented button{
  flex:1; border:0; background:transparent; color:var(--text-dim); font-weight:600; font-size:.86rem;
  padding:8px 10px; border-radius:9px; cursor:pointer; min-height:38px;
}
.segmented button.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}

.fieldset{display:flex; flex-direction:column; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface-2);}
.fieldset-title{display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--text-dim); letter-spacing:.02em;}
details.fold{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface-2);}
details.fold > summary{
  list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600; color:var(--text-dim);
}
details.fold > summary::-webkit-details-marker{display:none;}
details.fold > summary .ico:last-child{margin-left:auto; transition:transform .15s;}
details.fold[open] > summary .ico:last-child{transform:rotate(90deg);}
details.fold > .fold-body{padding:0 14px 14px; display:flex; flex-direction:column; gap:12px;}

/* ---------- Pillen / Status ---------- */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.02em; white-space:nowrap;}
.pill-ok{background:var(--success-soft); color:var(--success);}
.pill-warn{background:var(--warning-soft); color:var(--warning);}
.pill-off{background:var(--surface-2); color:var(--text-faint); border:1px solid var(--border);}
.pill-blocked{background:var(--danger-soft); color:var(--danger);}
.pill-na{background:transparent; color:var(--text-faint); border:1px dashed var(--border-strong);}
.pill-accent{background:var(--accent-local-soft); color:var(--accent-local);}

/* ---------- Banner ---------- */
.banners{display:flex; flex-direction:column; gap:8px;}
.banners:empty{display:none;}
.banner{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-s);
  background:var(--surface-2); border:1px solid var(--border); font-size:.85rem; color:var(--text-dim);
}
.banner .ico{width:20px; height:20px;}
.banner-text{flex:1; min-width:0;}
.banner.warn{background:var(--warning-soft); border-color:transparent; color:var(--warning);}
.banner.info{background:var(--accent-alarm-soft); border-color:transparent; color:var(--text);}
.banner button.banner-btn{flex:none;}

/* ---------- Modal (Bottom-Sheet auf dem Handy) ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:60; display:none; align-items:flex-end; justify-content:center;
  background:rgba(10,8,4,.48); padding:calc(12px + var(--safe-top)) 0 0;
}
.modal-backdrop.open{display:flex; animation:fade-in .15s ease-out;}
.modal{
  width:100%; max-width:560px; max-height:calc(100dvh - 12px - var(--safe-top)); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border-radius:var(--radius-l) var(--radius-l) 0 0; box-shadow:var(--shadow-lg);
  padding:18px 18px calc(18px + var(--safe-bottom)); display:flex; flex-direction:column; gap:14px;
  animation:sheet-up .2s ease-out;
}
.modal h3{font-size:1.08rem;}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:4px;}
.modal-actions .btn-danger, .modal-actions .push-left{margin-right:auto;}
@media (min-width:640px){
  .modal-backdrop{align-items:center; padding:24px 16px;}
  .modal{border-radius:var(--radius-l); max-height:calc(100dvh - 48px); padding:22px; animation:pop-in .16s ease-out;}
}
@keyframes fade-in{from{opacity:0;} to{opacity:1;}}
@keyframes sheet-up{from{transform:translateY(24px); opacity:.6;} to{transform:none; opacity:1;}}
@keyframes pop-in{from{transform:scale(.97); opacity:0;} to{transform:none; opacity:1;}}

/* ---------- Kleine Bestätigungsdialoge ---------- */
.dialog-backdrop{position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:24px 16px; background:rgba(10,8,4,.5);}
.dialog-backdrop.open{display:flex; animation:fade-in .12s ease-out;}
.dialog{
  width:100%; max-width:380px; background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--shadow-lg);
  padding:20px; display:flex; flex-direction:column; gap:12px; animation:pop-in .14s ease-out;
}
.dialog h3{font-size:1.05rem;}
.dialog p{color:var(--text-dim); font-size:.92rem;}
.dialog-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;}

/* ---------- Toasts ---------- */
.toasts{
  position:fixed; left:50%; transform:translateX(-50%); z-index:95; width:min(92vw,440px);
  bottom:calc(var(--tabbar-h) + 18px + var(--safe-bottom)); display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
@media (min-width:780px){ .toasts{bottom:24px;} }
.toast{
  pointer-events:auto; display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
  background:#26221b; color:#f7f3ea; box-shadow:var(--shadow-lg); font-size:.9rem;
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s;
}
:root[data-theme="dark"] .toast{background:#e9edf1; color:#161a1f;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .toast{background:#e9edf1; color:#161a1f;} }
.toast.show{opacity:1; transform:none;}
.toast span{flex:1;}
.toast-btn{border:0; background:none; color:inherit; font-weight:700; text-decoration:underline; cursor:pointer; padding:4px; opacity:.9;}

.foot-note{text-align:center; font-size:.74rem; color:var(--text-faint); padding-top:4px;}

@media (max-width:420px){
  .app{padding-left:calc(12px + var(--safe-left)); padding-right:calc(12px + var(--safe-right));}
  .topbar-clock{font-size:1.1rem;}
  .row-2.stack-sm{grid-template-columns:1fr;}
}

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