/* PewPew Timer – gemeinsames Erscheinungsbild für alle Seiten (index, scheiben, datenschutz).
   Hell ist Standard (draußen in der Sonne besser lesbar), dunkel folgt der Handy-Einstellung.
   Schrift: Atkinson Hyperlegible (für Menschen mit Sehschwäche entworfen), liegt in fonts/ – läuft offline. */
@font-face{font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:200 800; font-display:swap; src:url(fonts/atkinson-next.woff2) format('woff2');}

:root{
  color-scheme:light;
  --font:'Atkinson Hyperlegible Next',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Zahlen: gleiche Schrift mit gleich breiten Ziffern, damit die Zeit nicht springt */
  --mono:var(--font);
  /* Flächen: Grund (Scheibenpapier), Karte, Bedienelement, Linie */
  --bg:#F2F1EC; --card:#FFFFFF; --card2:#E7E5DE; --line:#E3E0D8; --field:#CFCCC3;
  /* Text */
  --txt:#111214; --muted:#45474D;
  /* Hauptknopf: fast schwarz, im Dunkeln hell */
  --accent:#111214; --on-accent:#FFFFFF;
  /* Bedeutungsfarben (Text bzw. Hinweisflächen) */
  --brand:#E30714; --red:#B3121B; --green:#1B7F3B; --amber:#8A5300; --orange:#C2410C;
  --bad-bg:#FFE3E1; --bad-ink:#7A1014; --good-bg:#DDF5E4; --good-ink:#0E4A23; --note-bg:#FFF3CC; --note-ink:#5C3B00;
  /* Lauf-Flächen */
  --run-ready:#F5B700; --run-fire:#22C55E; --run-ink:#0A0B0C; --run-dark:#111214;
  --radius:8px;
  --sat:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px));
  --sab:max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px));
  --sal:max(env(safe-area-inset-left,0px),var(--safe-area-inset-left,0px));
  --sar:max(env(safe-area-inset-right,0px),var(--safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0B0B0C; --card:#161618; --card2:#26262A; --line:#232326; --field:#3A3A3F;
    --txt:#F5F4F0; --muted:#B8B8B4;
    --accent:#F5F4F0; --on-accent:#0B0B0C;
    --red:#FF7A7A; --green:#5BD889; --amber:#F5C542; --orange:#FB923C;
    --bad-bg:#3A1416; --bad-ink:#FFB4B0; --good-bg:#12301D; --good-ink:#9BE8B5; --note-bg:#352A0A; --note-ink:#FBDF8A;
    --run-dark:#000000;
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; min-height:100%;}
body{font-family:var(--font); font-size:18px; line-height:1.4; background:var(--bg); color:var(--txt);
  overscroll-behavior:none; padding-left:var(--sal); padding-right:var(--sar);}
button,select,input,textarea{font-family:inherit; color:inherit;}
a{color:inherit;}
h1,h2,h3{line-height:1.2;}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px;}
.num,.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* Kopfzeile mit Logo */
.appbar{padding:calc(12px + var(--sat)) 16px 10px; display:flex; align-items:center; gap:12px; background:var(--bg);}
.appbar .logo{width:36px; height:36px; border-radius:8px; flex:none; display:block;}
.appbar h1{font-size:21px; font-weight:800; margin:0; letter-spacing:0;}
.appbar .sub{font-size:15px; color:var(--muted);}
.iconbtn{min-height:48px; min-width:48px; background:var(--card); border:1px solid var(--line); color:var(--txt);
  border-radius:var(--radius); padding:8px 14px; font-size:17px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;}
.iconbtn:active{background:var(--card2);}
.iconbtn svg{width:22px; height:22px;}

/* Untere Leiste: Timer · Log · Einstellungen */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--card); border-top:1px solid var(--line); padding:4px calc(8px + var(--sar)) calc(6px + var(--sab)) calc(8px + var(--sal));}
.tabbar a,.tabbar button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0; min-height:60px;
  background:none; border:0; color:var(--muted); text-decoration:none; font-size:15px; font-weight:600; cursor:pointer;}
.tabbar svg{width:26px; height:26px;}
.tabbar a,.tabbar button{position:relative;}
/* Roter Punkt: im Waffenschrank ist eine Waffe zum Reinigen fällig */
.tab-dot{position:absolute; top:5px; left:calc(50% + 7px); width:13px; height:13px; border-radius:50%; background:var(--red); border:2px solid var(--card);}
.tab-dot[hidden]{display:none;}
.tabbar .on{color:var(--txt); font-weight:800;}
/* Leichter roter Akzent wie im Logo (Zeiger, Scheibenmitte, ein Regler) */
.tabbar .acc{stroke:var(--brand);} .tabbar .accf{fill:var(--brand); stroke:none;}
.has-tabbar{padding-bottom:calc(84px + var(--sab));}

/* Segmentschalter (Verband, Reiter) */
.seg{display:flex; background:var(--card2); border:0; border-radius:var(--radius); padding:4px; gap:4px; margin-bottom:14px;}
.seg button{flex:1; min-height:48px; padding:10px; border:0; border-radius:6px; background:transparent; color:var(--txt);
  font-weight:600; font-size:18px; cursor:pointer;}
.seg button.on{background:var(--accent); color:var(--on-accent); font-weight:800;}

/* Knöpfe */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:60px; padding:14px 16px; border:none;
  border-radius:var(--radius); font-size:19px; font-weight:800; cursor:pointer; margin-top:10px; text-align:center;}
.btn-primary{background:var(--accent); color:var(--on-accent);}
.btn-ghost{background:var(--card); color:var(--txt); border:1px solid var(--line);}
.btn-danger{background:transparent; color:var(--red); border:2px solid var(--red);}
.btn:active,.seg button:active{transform:scale(.98);}
.btn:disabled{opacity:.55;}

/* Formulare */
select,input[type=text],input[type=search],input[type=email],input[type=date],input[type=time],input[type=number],input[type=datetime-local],textarea{background:var(--card); color:var(--txt);
  border:1px solid var(--field); border-radius:var(--radius); padding:12px; font-size:18px; min-height:48px;}
::placeholder{color:var(--muted); opacity:.85;}
/* Auswahlfelder: eigener, größerer Pfeil mit Abstand zum Rand (der eingebaute war klein und klebte rechts) */
select{appearance:none; -webkit-appearance:none; padding-right:52px; background-repeat:no-repeat; background-position:right 16px center; background-size:22px 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345474D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");}
@media (prefers-color-scheme:dark){
  select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8B8B4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");}
}

/* „i“ für Erklärungen: überall dasselbe Symbol in derselben Größe */
.ibtn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto; border:0; border-radius:50%;
  background:none; color:var(--txt); padding:0; cursor:pointer;}
.ibtn svg{width:28px; height:28px;}
.ibtn:active{background:var(--card2);}

/* Kleine Hinweisflächen */
.note-bad{background:var(--bad-bg); color:var(--bad-ink);}
.note-good{background:var(--good-bg); color:var(--good-ink);}
.note-warn{background:var(--note-bg); color:var(--note-ink);}

@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

/* Sperre beim Öffnen der App (ui.js): nichts von der Seite zeigen, bis entsperrt ist */
html.applock-on body{visibility:hidden;}
.applock{position:fixed; inset:0; z-index:9999; visibility:visible; background:var(--bg); color:var(--txt); display:flex; align-items:center; justify-content:center; padding:24px 16px; overflow:auto;}
.applock .albox{width:100%; max-width:380px; text-align:center; zoom:var(--ui-zoom,1);}
.applock img{width:72px; height:72px;}
.applock h2{margin:8px 0 4px; font-size:30px; font-weight:800;}
.applock p{margin:0 0 14px; font-size:18px;}
.applock input{width:100%; font-size:26px; text-align:center; padding:12px; margin-bottom:6px;}
.applock .almsg{min-height:24px; color:var(--brand); font-weight:700; font-size:16px; margin:0 0 8px;}
.row[hidden]{display:none !important;}