:root {
  --grund: #f3f1ec;
  --karte: #ffffff;
  --tinte: #1c1b19;
  --leise: #6b675f;
  --linie: #e2ded5;
  --knopf: #1c1b19;
  --knopf-text: #f3f1ec;
  --aus: #d9480f;
  --aus-hell: #fde4d6;
  --an: #2b8a3e;
  --warn-grund: #fff4e0;
  --warn-linie: #f0d39a;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #151412;
    --karte: #1f1e1b;
    --tinte: #f3f1ec;
    --leise: #a29e94;
    --linie: #34322d;
    --knopf: #f3f1ec;
    --knopf-text: #151412;
    --aus: #ff8a4c;
    --aus-hell: #3a2418;
    --an: #69db7c;
    --warn-grund: #2b2416;
    --warn-linie: #5c4a22;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--tinte);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
}

.seite {
  max-width: 30rem;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

p { margin: 0; }

/* Kopf */
.kopf { padding-top: .5rem; }

h1 {
  margin: .35rem 0 .1rem;
  font-size: 2.6rem;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.unterzeile { color: var(--leise); }

.filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--an);
}

.filter .punkt {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: currentColor;
}

.filter[data-an="0"] { color: var(--aus); }
.filter[data-an="0"] .punkt { animation: puls 1.2s ease-in-out infinite; }

@keyframes puls { 50% { opacity: .25; } }

/* Gerätekarte */
.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 1.25rem;
  padding: 1.1rem 1.25rem 1.2rem;
}

.etikett {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leise);
}

.name {
  margin-top: .3rem;
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.adresse {
  margin-top: .2rem;
  font: 500 1rem/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--leise);
}

.karte[data-zustand="suche"] .name { color: var(--leise); }
.karte[data-zustand="fehler"] .name { color: var(--leise); }

/* Hinweise */
.hinweis {
  background: var(--warn-grund);
  border: 1px solid var(--warn-linie);
  border-radius: 1.25rem;
  padding: 1.1rem 1.25rem;
  display: grid;
  gap: .5rem;
}

.hinweis-titel { font-weight: 650; font-size: 1.1rem; }

/* Knöpfe */
.knoepfe { display: grid; gap: 1rem; }

.knopf {
  appearance: none;
  border: 0;
  border-radius: 1.4rem;
  min-height: 6.5rem;
  padding: 1rem 1.25rem;
  background: var(--knopf);
  color: var(--knopf-text);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .45rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, opacity .2s ease;
}

.knopf .zahl { font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; }

.knopf:active { transform: scale(.97); }
.knopf:focus-visible { outline: 3px solid var(--aus); outline-offset: 3px; }
.knopf:disabled { opacity: .45; cursor: default; transform: none; }

.knopf.zweitrangig {
  min-height: 3.5rem;
  margin-top: .35rem;
  font-size: 1.1rem;
  background: transparent;
  color: var(--tinte);
  border: 2px solid currentColor;
}

.leise { color: var(--leise); text-align: center; font-size: .95rem; }

/* Countdown */
.uhr { display: grid; justify-items: center; gap: 1rem; padding-top: .5rem; }

.ring { position: relative; width: min(16rem, 70vw); aspect-ratio: 1; }

.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.ring circle { fill: none; stroke-width: 9; }
.ring-grund { stroke: var(--aus-hell); }
.ring-rest {
  stroke: var(--aus);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.rest {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.rest small {
  display: block;
  margin-top: .35rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--leise);
}

.uhr-text { text-align: center; font-size: 1.1rem; max-width: 22rem; }

/* Fuß */
.fuss {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  justify-content: center;
  gap: .75rem;
  font-size: .8rem;
  color: var(--leise);
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ring-rest, .knopf { transition: none; }
  .filter[data-an="0"] .punkt { animation: none; }
}