/* Timetracker, Basis-Stile. Tokens aus Design/Designsystem.html. */

:root{
  /* Marke */
  --blau:#1573C9; --blau-dunkel:#12508F; --blau-hell:#EAF2FC;
  /* Laufend */
  --gruen:#1DC74C; --gruen-dunkel:#0B6B29; --gruen-hell:#E9FBEE;
  /* Neutral */
  --schwarz:#000000; --tinte:#101317; --grau-700:#4A5568; --grau-600:#6E7480;
  --grau-500:#98A2B3; --grau-400:#A6AEBD; --linie-stark:#D3D8E0; --linie:#E2E5EA;
  --linie-weich:#E7EAF0; --linie-zart:#EDEFF3; --flaeche:#F1F3F6; --flaeche-aktiv:#F5F6F9;
  --weiss:#FFFFFF; --rot:#C92D2D;
  /* Bewegung */
  --dur-1:120ms; --dur-2:180ms; --dur-3:260ms; --dur-4:420ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.4,0,.2,1);
  /* Radien */
  --r-1:8px; --r-2:11px; --r-3:14px; --r-4:20px; --r-voll:999px;
  /* Schrift */
  --schrift:"Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--weiss); color:var(--schwarz);
  font-family:var(--schrift); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1{font-size:22px; font-weight:600; margin:0 0 4px}
h2{font-size:16px; font-weight:600; margin:0}
code{font-family:var(--mono); font-size:13px; background:var(--flaeche); padding:2px 6px; border-radius:var(--r-1)}
a{color:inherit; text-decoration:none}

/* Marke */
.marke{display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:-.01em}
.punkt{width:10px; height:10px; border-radius:var(--r-voll); background:var(--blau); display:inline-block}

/* Einzelne Karte mittig, für Login und Einrichtung */
.mitte{min-height:100%; display:grid; place-items:center; padding:32px}

.karte{
  background:var(--weiss); border:1px solid var(--linie);
  border-radius:var(--r-4); padding:24px;
  transition:box-shadow var(--dur-2) var(--ease-inout), transform var(--dur-2) var(--ease-out);
}
.karte--schmal{width:100%; max-width:380px}
.karte__kopf{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}

.hinweis{color:var(--grau-600); margin:0 0 16px}
.schritte{margin:0; padding-left:20px; color:var(--grau-700)}
.schritte li{margin-bottom:10px}

/* Formular */
.feld{display:block; margin:20px 0 12px}
.feld__label{display:block; font-size:13px; color:var(--grau-600); margin-bottom:6px}
.feld input{
  width:100%; font:inherit; color:var(--schwarz);
  padding:11px 12px; border:1px solid var(--linie-stark); border-radius:var(--r-2);
  background:var(--weiss); outline:none;
  transition:border-color var(--dur-1) var(--ease-inout), box-shadow var(--dur-1) var(--ease-inout);
}
.feld input:focus{border-color:var(--blau); box-shadow:0 0 0 3px var(--blau-hell)}

.fehler{color:var(--rot); font-size:13px; margin:0 0 12px}

.btn{
  font:inherit; font-weight:500; cursor:pointer;
  border:1px solid var(--linie-stark); background:var(--weiss); color:var(--schwarz);
  padding:11px 16px; border-radius:var(--r-3);
  transition:background var(--dur-1) var(--ease-inout), border-color var(--dur-1) var(--ease-inout), transform var(--dur-1) var(--ease-out);
}
.btn:hover{background:var(--flaeche)}
.btn:active{transform:translateY(1px)}
.btn--primaer{width:100%; background:var(--blau); border-color:var(--blau); color:var(--weiss)}
.btn--primaer:hover{background:var(--blau-dunkel); border-color:var(--blau-dunkel)}
.btn--klein{padding:6px 12px; font-size:13px; border-radius:var(--r-1)}

/* Grundgeruest mit Navigation */
.rahmen{display:grid; grid-template-columns:236px 1fr; min-height:100%}
.nav{
  display:flex; flex-direction:column; gap:24px;
  border-right:1px solid var(--linie); padding:24px 16px;
}
.nav__kopf{padding:0 8px}
.nav__bezeichnung{font-size:12px; color:var(--grau-500); margin-top:2px}
.nav__liste{display:flex; flex-direction:column; gap:2px}
.nav__gruppe{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--grau-500); padding:16px 8px 6px}
.nav__punkt{
  display:block; text-align:left; padding:9px 10px; border-radius:var(--r-1);
  color:var(--grau-700); font-size:14px;
  transition:background var(--dur-1) var(--ease-inout), color var(--dur-1) var(--ease-inout);
}
.nav__punkt:hover{background:var(--flaeche-aktiv); color:var(--schwarz)}
.nav__punkt--aktiv{background:var(--flaeche-aktiv); color:var(--schwarz); font-weight:500}
.nav__punkt--knopf{width:100%; font:inherit; font-size:14px; border:0; background:none; cursor:pointer}
.nav__fuss{margin-top:auto; border-top:1px solid var(--linie-zart); padding-top:12px}

.inhalt{padding:32px 32px 64px; max-width:820px}
.inhalt__kopf{margin-bottom:24px}

/* Pruefliste des Selbsttests */
.pruefliste{display:flex; flex-direction:column}
.pruef{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 0; border-top:1px solid var(--linie-zart);
}
.pruef:first-child{border-top:0}
.pruef__wert{font-family:var(--mono); font-size:13px; color:var(--grau-600)}
.pille{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500; padding:3px 10px; border-radius:var(--r-voll);
}
.pille--gut{background:var(--gruen); color:var(--weiss)}
.pille--schlecht{background:var(--flaeche); color:var(--rot)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms !important; animation-duration:1ms !important}
}