/* Zeiterfassung — Seitengestaltung.
   Das Seitengerüst läuft über die Tokens aus style.css. Die nachgebauten
   Terminalbildschirme (.kiosk und alles darin) behalten ihre eigene
   Bildsprache: Sie zeigen ein Gerät, keine Website. Deshalb stehen dort
   feste Werte und sie bleiben auch im dunklen Modus hell. */

/* ---------- Grundlagen ---------- */
.time-story{color:var(--ink)}
.time-story h1,
.time-story h2{font-family:var(--font-display);letter-spacing:-.055em;font-weight:550;line-height:1.12}
.time-story h1{font-size:clamp(46px,6vw,78px);margin:var(--space-5) 0}
.time-story h2{font-size:clamp(32px,3.6vw,46px);margin:var(--space-5) 0}
.time-story p{color:var(--muted);line-height:1.8;font-size:17px}
.time-story .eyebrow{font-size:10px;letter-spacing:.17em;color:var(--accent-text)}

/* ---------- Auftakt ---------- */
/* Aufbau und Abstand oben kommen aus product-hero.css */
.time-hero{padding-bottom:var(--space-7)}

/* Der Tagesverlauf: vier Stationen, die den Aufbau der Seite vorwegnehmen */
.dayline{
  margin:0;
  padding:var(--space-6);
  border:1px solid var(--line);
  border-radius:var(--radius-card,24px);
  background:linear-gradient(120deg,var(--canvas,#fffdf7),#fbf4df);
  display:grid;grid-template-columns:repeat(4,1fr);
  text-align:left;gap:var(--space-5);
}
.dayline div{display:grid;gap:var(--space-2)}
.dayline small{color:var(--accent-text);font-size:12px}
.dayline span{color:var(--muted);font-size:13px}

/* ---------- Kapitel ---------- */
.time-chapter{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:var(--space-8);align-items:center;
  padding:var(--section-y) 0;
}
.chapter-copy ul{list-style:none;padding:var(--space-3) 0;color:var(--muted);font-size:14px}
.chapter-copy li{padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.chapter-copy li:before{content:'✓';color:#8e9d6c;margin-right:var(--space-4)}
.reverse .chapter-copy{order:2}
.reverse .demo-deck{order:1}

.time-total{
  display:flex;gap:var(--space-5);margin-top:var(--space-6);
  border-top:1px solid var(--line);padding-top:var(--space-5);
}
.time-total strong{display:block;font:600 24px var(--font-display)}
.time-total span{display:block;font-size:11px;color:var(--muted);margin-top:var(--space-2)}

/* ---------- Das Gerät ----------
   Ab hier ist es ein Terminal, kein Seitenelement. */
.demo-deck{min-width:0;background:var(--sand,#f7f3e9);padding:var(--space-5);border-radius:var(--radius-hero,28px)}
.kiosk{
  background:#fff;border:8px solid #2c2e2b;border-radius:24px;
  box-shadow:0 18px 35px #2a2a2010;overflow:hidden;padding:16px;
  color:#161616;font-family:Arial,sans-serif;font-size:13px;
}
.kbar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;height:30px;margin-bottom:16px}
.kbar>span{padding:8px;background:#e5e5ea;border-radius:8px}
.kbar em{font-style:normal;color:#26ae55;background:#f6f6f6;padding:4px 7px;border-radius:20px}
.keyview{max-width:350px;margin:30px auto 15px;text-align:center;min-height:305px}
.kiosk h3{font:600 21px Arial,sans-serif;letter-spacing:-.02em;margin:16px 0}
.keyview>strong{font:600 30px monospace;display:block;margin:16px}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.keys i{padding:9px;background:#e5e5ea;color:#ed9316;border-radius:7px;font-style:normal;font-size:19px}
.keys i:empty{background:none}
.kbutton{display:block;background:#ef9418;color:#fff;padding:12px;border-radius:8px;text-align:center;font-weight:600;margin-top:10px}
.camera{height:233px;background:#e5e5ea;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8e8e94}
.camera svg{width:84px;fill:#b4b4bb}
.camera small{font-size:10px;margin-top:10px}
.kactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.kactions>span{padding:12px 5px;color:#fff;text-align:center;border-radius:8px;font-weight:600;font-size:12px;opacity:.55}
.kactions .selected,.admin-story .kactions>span{opacity:1}
.green{background:#2ac553}
.red{background:#ff363b}
.orange{background:#ff8c21}
.blue{background:#0089ff}
.success{height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.success i{font-style:normal;font-size:43px;width:72px;height:72px;border-radius:50%;background:#2ac553;color:#fff;text-align:center;line-height:72px}
.success p{font-size:14px;color:#6c7067}
.breakview{max-width:350px;margin:0 auto;min-height:350px;text-align:center}
.breakview>div{padding:14px;background:#f2f2f6;border-radius:8px;margin:8px 0;font-size:18px;font-weight:600}
.breakview p{font:11px Arial,sans-serif;color:#888}
.breakview small{display:block;font-size:10px;color:#888;margin-top:12px}
.employee-camera{position:relative;overflow:hidden}
.employee-camera>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 15%}
.employee-camera>small{position:absolute;bottom:10px;left:12px;margin:0;color:#fff;background:#20251e99;padding:4px 8px;border-radius:5px}
.demo-deck .kiosk{height:460px;box-sizing:border-box}
.demo-deck .success{height:350px}

/* Steuerung unter dem Gerät — das ist wieder Seite, nicht Gerät */
.demo-controls{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-2);margin:var(--space-4) var(--space-1) 0;
  font-size:12px;color:var(--muted);
}
.demo-toggle{
  border:1px solid var(--line);background:var(--surface,#fff);
  width:var(--touch-target,48px);height:var(--touch-target,48px);
  border-radius:50%;cursor:pointer;color:var(--ink);
  transition:background 160ms var(--ease-out),border-color 160ms var(--ease-out),
             transform 120ms var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .demo-toggle:hover{background:var(--sand,#f7f3e9);border-color:#e8c366}
}
.demo-toggle:active{transform:scale(.97)}
.demo-toggle:focus-visible{outline:3px solid var(--focus,#a77316);outline-offset:3px}

/* ---------- Pausen ---------- */
.pause-band{
  padding:var(--space-7)!important;
  background:var(--canvas,#fffdf7);
  border:1px solid var(--line);
  border-radius:var(--radius-card,24px);
}
.pause-band>p{max-width:650px}
.pause-band>div{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap;font-size:14px;margin-top:var(--space-5)}
.pause-band>div span{background:var(--surface,#fff);border:1px solid var(--line);padding:var(--space-3) var(--space-5);border-radius:var(--radius-control,10px)}
.pause-band i{font-style:normal;color:var(--muted)}
.pause-band b{color:var(--accent-text);font-size:13px}

/* ---------- Zeltleitung ---------- */
.admin-story{padding:var(--section-y-tight) 0 var(--section-y)}
.admin-intro{max-width:730px;text-align:center;margin:0 auto var(--space-7)}
.admin-story>.kiosk{max-width:960px;margin:auto;padding:25px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stats>div{padding:18px;background:#f2f2f7;border-radius:10px}
.stats small{display:block;color:#8c8c92}
.stats strong{display:block;font-size:28px;margin-top:12px}
.eventlist>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid #eee}
.eventlist small{display:block;color:#909096;margin-top:8px}
.pill{font-size:10px;padding:4px 8px;border-radius:10px;font-style:normal;color:#fff}

.admin-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-7)}
.admin-benefits h3{font-size:18px;margin:0 0 var(--space-2)}
.admin-benefits p{font-size:14px}

/* ---------- Ohne Netz ---------- */
.offline-story{padding:var(--section-y-tight) 0 var(--section-y);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.offline-card{
  background:var(--sand,#f7f3e9);border:1px solid var(--line);
  border-radius:var(--radius-card,24px);padding:var(--space-6);text-align:center;
}
.offline-card>span:first-child{display:block;font-size:34px;line-height:1;color:var(--accent-text)}
.offline-card h3{font-size:22px;margin:var(--space-4) 0 var(--space-2)}
.offline-card p{font-size:14px}
.offline-card .kbutton{max-width:260px;margin:var(--space-5) auto 0}
.offline-card>small{display:block;margin-top:var(--space-4);font-size:12px;color:var(--accent-text)}

/* ---------- Abschluss ---------- */
.time-cta{text-align:center;padding:var(--section-y) 0}
.time-cta>p{max-width:600px;margin:0 auto var(--space-6)}
.time-cta .button{gap:var(--space-3)}
.time-cta p{font-size:12px;margin-top:var(--space-5);color:var(--muted)}

/* Der Bildwechsel im Gerät: eine kurze Blende, damit der Sprung
   nicht als Fehler gelesen wird. */
.demo-frame[hidden]{display:none}
.demo-frame:not([hidden]){animation:time-blende 240ms var(--ease-out)}
@keyframes time-blende{from{opacity:.35}to{opacity:1}}

/* ---------- Dunkle Darstellung ----------
   Das Terminal bleibt hell: Es ist ein Bildschirmfoto eines Geräts.
   Die Regel dafür steht in dark-mode.css bei den übrigen Nachbauten. */
[data-theme=dark] .dayline{
  background:linear-gradient(120deg,#20261d,#2b2a1d);
  border-color:var(--line);
}
[data-theme=dark] .pause-band{background:var(--surface);border-color:var(--line)}
[data-theme=dark] .pause-band>div span{background:var(--sand);border-color:var(--line)}
[data-theme=dark] .offline-card{background:var(--surface);border-color:var(--line)}
[data-theme=dark] .chapter-copy li{border-bottom-color:var(--line)}
[data-theme=dark] .chapter-copy li:before{color:#a8ba84}

@media(prefers-reduced-motion:reduce){
  .demo-toggle,.demo-toggle:active{transition:none;transform:none}
  .demo-frame:not([hidden]){animation:none}
}

/* ---------- Schmalere Schirme ---------- */
@media(max-width:1000px){
  .time-chapter,.offline-story{grid-template-columns:1fr;gap:var(--space-6);padding:var(--section-y-tight) 0}
  .reverse .chapter-copy,.reverse .demo-deck{order:initial}
  .dayline{grid-template-columns:1fr 1fr}
  .admin-benefits{grid-template-columns:1fr;gap:var(--space-4)}
}
@media(max-width:500px){
    .demo-deck{padding:var(--space-3)}
  .kiosk{padding:10px;border-width:5px}
  .kbar{font-size:9px}
  .keyview{min-height:305px}
  .pause-band{padding:var(--space-5)!important}
  .pause-band>div{gap:var(--space-2)}
  .time-total{gap:var(--space-4)}
  .time-total strong{font-size:20px}
  .admin-story>.kiosk{padding:12px}
  .eventlist b{font-size:11px}
  .eventlist small{font-size:9px}
  .stats small{font-size:10px}
  .dayline{padding:var(--space-5);grid-template-columns:1fr}
  .dayline b{font-size:14px}
}

.admin-intro>.eyebrow,.time-cta>.eyebrow{display:block;text-align:center}