/* ===== Base / Reset ===== */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  /* Farb- & UI-Variablen */
  --accent: #17c011;
  --card: #0f172a0d;         /* leichtes Panel */
  --muted: #6b7280;
  --face:  #fff;
  --border:#111;
  --text:  #222;
  --bg:    #f7f7f8;

  /* Kreisgrößen responsiv */
  --size: clamp(220px, 85vmin, 560px);
  --ring-width: clamp(8px, 3vmin, 16px);

  /* Typo skaliert zwischen Handy und Desktop */
  --fs-100: clamp(12px, 0.85rem, 14px);
  --fs-200: clamp(14px, 1rem, 16px);
  --fs-300: clamp(18px, 3.8vmin, 22px);
  --radius: 12px;
  --gap:    clamp(10px, 2.5vmin, 18px);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root{
    --card: #111827;
    --muted:#9aa0aa;
    --face: #0b0f14;
    --border:#2b2f36;
    --text: #e5e7eb;
    --bg:   #0b0f14;
  }
}

html, body { height: 100%; }

body{
  margin: 0;
  font: 500 var(--fs-200) system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100svh; /* mobiles Adressleisten-Problem */
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ===== Layout ===== */
.app-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 1rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid #1f2937;
}

.status{
  font-size: var(--fs-100);
  color: var(--muted);
}

/* Zentrierter Content mit sauberer max-breite */
main{
  width: min(100%, 1000px);
  margin-inline: auto;
  padding: clamp(12px, 2.5vw, 24px);
}

/* Optionaler Wrapper für Komponenten */
.wrap{
  width: min(100%, var(--size));
  margin-inline: auto;
  display: grid;
  gap: var(--gap);
  justify-items: center;
}

/* ===== Buttons ===== */
button, .btn{
  -webkit-tap-highlight-color: transparent;
  padding: .75rem 1rem;
  border: 0;
  border-radius: .75rem;
  cursor: pointer;
  background: var(--accent);
  color: #001018;
  font-weight: 700;
  line-height: 1;
  /* Breite/Größe responsiv, aber gedeckelt */
  min-width: clamp(140px, 45vw, 240px);
  min-height: 44px; /* Touch Target */
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: center;
}

.btn{
  background: var(--face);
  color: var(--text);
  border: 2px solid var(--border);
}

button:hover, .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

button:active, .btn:active{
  transform: translateY(0);
  box-shadow: none;
}

/* ===== Footer ===== */
footer{
  margin-top: auto;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
}

/* ===== Kreis / Progress-Clock ===== */
.circle{
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) 0deg, #eee 0deg);
  box-shadow: 0 0 24px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Ziffernblatt */
.clock{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -90deg, var(--text) 0 2deg, transparent 2deg 90deg),
    repeating-conic-gradient(from -90deg, var(--text) 0 1.2deg, transparent 1.5deg 30deg),
    repeating-conic-gradient(from -90deg, var(--text) 0 .5deg, transparent .5deg 6deg);
  opacity: .6;
}

/* innerer Deckkreis => Ring bleibt sichtbar */
.clock::before{
  content: "";
  position: absolute;
  inset: calc(var(--ring-width) * 1.1);
  background: var(--face);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #ddd;
}

/* Optik-Ring */
.inner-ring{
  position: absolute;
  inset: calc(var(--ring-width) * 2.6);
  background: var(--face);
  border-radius: 50%;
  border: 2px solid var(--border);
}

/* Deko-Rotor (Animations-Respekt) */
.rotor{
  position: absolute;
  inset: calc(var(--ring-width) * 0.1);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(0,21,255,0) 0 358deg, rgba(32,1,1,.964) 359deg 360deg);
  pointer-events: none;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  .rotor{ animation: spin 60s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Center-Content */
.center{
  position: absolute;
  inset: calc(var(--ring-width) * 4.1);
  display: grid;
  place-items: center;
  background: var(--face);
  border-radius: 50%;
  border: 2px solid var(--border);
  text-align: center;
  padding: 6px;
}

.percent{
  font-weight: 800;
  font-size: clamp(18px, 6.5vmin, 36px);
  line-height: 1;
}
.time-window{
  font-size: clamp(12px, 3.5vmin, 15px);
  opacity: .75;
}

/* Stats-Chips */
.stats{
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
  font-size: clamp(13px, 3.8vmin, 16px);
}
.stats span{
  background: var(--face);
  border: 1px solid #e5e6ea;
  padding: .35em .6em;
  border-radius: 10px;
  min-width: 6ch;
  text-align: center;
}

/* Kleine Hinweise */
.note{ font-size: 13px; opacity: .7; }

/* ===== Breakpoints (mobile-first) ===== */
@media (min-width: 640px){            /* Tablet */
  .app-header{ padding: 1rem 1.5rem; }
  main{ padding: clamp(16px, 3vw, 32px); }
}

@media (min-width: 1024px){           /* Desktop */
  :root{ --radius: 14px; }
  .app-header{ padding: 1rem 2rem; }
  main{ width: min(100%, 1100px); }
  button, .btn{ min-width: 160px; }
}

/* ===== Utility: ruhige Fokus-Ringe ===== */
:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent), black 10%);
  outline-offset: 2px;
}

.zeit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-family: 'Segoe UI', Roboto, sans-serif;
  font-size: 0.8rem;
  background: #f8f9fb;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 0.6rem 1rem;
  width: fit-content;
  margin: 1rem auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.zeit input {
  width: 4rem;
  padding: 0.1rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #222;
  border: 1px solid #bbb;
  border-radius: 8px;
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.zeit input:focus {
  border-color: #0078ff;
  box-shadow: 0 0 5px rgba(0,120,255,0.3);
}

.zeit span {
  font-weight: 600;
  color: #333;
  user-select: none;
}

.zeit p{
  position: relative;
  top: -0.2rem;
  color: #0078ff;
  font-size: 1rem;
  font-weight: bold;
}



  /* ====== Grundlayout ====== */
  #fx{
    position: fixed; inset:0;
    pointer-events:none; z-index: 9999;
    display:grid; place-items:center;
  }
  .burst{
    position:relative; width:10px; height:10px;
  }

  /* Partikel-Basis */
  .burst span{
    --size: 4px;              /* Partikelgröße */
    --dist: 180px;            /* Reichweite */
    --dur: 800ms;             /* Dauer */
    --c: #fff;                /* Grundfarbe */
    position:absolute; left:50%; top:50%;
    width:var(--size); height:var(--size);
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #fff, var(--c) 55%);
    transform: translate(-50%,-50%) rotate(0deg) translateX(0);
    opacity:0;
    filter: drop-shadow(0 0 6px var(--c));
  }

  /* Startzustand ohne Animation */
  #fx:not(.play) .burst span{ animation: none; }

  /* Animation nur wenn .play auf dem Container liegt */
  #fx.play .burst span{
    animation:
      fly var(--dur) cubic-bezier(.2,.7,.1,1) forwards,
      fade var(--dur) linear forwards;
  }

  /* Winkel je Partikel (0..19) */
  .burst span:nth-child(1)  { --i: 0; }
  .burst span:nth-child(2)  { --i: 1; }
  .burst span:nth-child(3)  { --i: 2; }
  .burst span:nth-child(4)  { --i: 3; }
  .burst span:nth-child(5)  { --i: 4; }
  .burst span:nth-child(6)  { --i: 5; }
  .burst span:nth-child(7)  { --i: 6; }
  .burst span:nth-child(8)  { --i: 7; }
  .burst span:nth-child(9)  { --i: 8; }
  .burst span:nth-child(10) { --i: 9; }
  .burst span:nth-child(11) { --i:10; }
  .burst span:nth-child(12) { --i:11; }
  .burst span:nth-child(13) { --i:12; }
  .burst span:nth-child(14) { --i:13; }
  .burst span:nth-child(15) { --i:14; }
  .burst span:nth-child(16) { --i:15; }
  .burst span:nth-child(17) { --i:16; }
  .burst span:nth-child(18) { --i:17; }
  .burst span:nth-child(19) { --i:18; }
  .burst span:nth-child(20) { --i:19; }

  /* dezente Farbmischung (optional, ohne JS) */
  .burst span:nth-child(5n+1){ --c:#ff3b3b; }
  .burst span:nth-child(5n+2){ --c:#ffd400; }
  .burst span:nth-child(5n+3){ --c:#00d26a; }
  .burst span:nth-child(5n+4){ --c:#00a2ff; }
  .burst span:nth-child(5n+5){ --c:#ff5cd1; }

  /* leicht unterschiedliche Distanzen/Delays für organischen Look */
  .burst span:nth-child(odd) { --dist: 150px; }
  .burst span:nth-child(3n)  { --dist: 120px; }
  .burst span:nth-child(4n)  { --dist: 170px; }
  .burst span:nth-child(1){ animation-delay: 10ms }
  .burst span:nth-child(2){ animation-delay: 30ms }
  .burst span:nth-child(3){ animation-delay: 50ms }
  .burst span:nth-child(4){ animation-delay: 20ms }
  .burst span:nth-child(5){ animation-delay: 60ms }
  .burst span:nth-child(6){ animation-delay: 40ms }
  .burst span:nth-child(7){ animation-delay: 70ms }
  .burst span:nth-child(8){ animation-delay: 25ms }
  .burst span:nth-child(9){ animation-delay: 55ms }
  .burst span:nth-child(10){animation-delay: 35ms }
  .burst span:nth-child(11){animation-delay: 15ms }
  .burst span:nth-child(12){animation-delay: 45ms }
  .burst span:nth-child(13){animation-delay: 65ms }
  .burst span:nth-child(14){animation-delay: 30ms }
  .burst span:nth-child(15){animation-delay: 50ms }
  .burst span:nth-child(16){animation-delay: 20ms }
  .burst span:nth-child(17){animation-delay: 40ms }
  .burst span:nth-child(18){animation-delay: 60ms }
  .burst span:nth-child(19){animation-delay: 80ms }
  .burst span:nth-child(20){animation-delay: 90ms }

  @keyframes fly{
    0%   { opacity:.0; transform: translate(-50%,-50%) rotate(calc(var(--i)*18deg)) translateX(0); }
    10%  { opacity:1;  }
    50%  { transform: translate(-50%,-50%) rotate(calc(var(--i)*18deg)) translateX(calc(var(--dist)*.95)); }
    100% { opacity:0; transform: translate(-50%,-50%) rotate(calc(var(--i)*18deg)) translateX(var(--dist)); }
  }
  @keyframes fade{
    0%{opacity:0} 10%{opacity:1} 100%{opacity:0}
  }

  /* Bewegungsreduktion respektieren */
  @media (prefers-reduced-motion: reduce){
    .burst span{ animation: fade 800ms linear forwards !important; }
  }