/* ============================================================
   William · Child Model — Online-Deck
   Zeigt die fertigen Folien als Präsentation.
   Farben/Maße zentral hier oben anpassbar.
   ============================================================ */

:root {
  --bg:      #141414;   /* Seitenhintergrund */
  --panel:   #1d1d1d;   /* Leisten */
  --text:    #f2f2f2;
  --muted:   #9a9a9a;
  --accent:  #ffe100;   /* das Gelb */
  --radius:  8px;
  --maxw:    1180px;    /* maximale Folienbreite */
  --sans: "Noto Sans SC", -apple-system, "Segoe UI", "PingFang SC",
          "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;            /* der Deck-Container scrollt */
}

/* ---- Kopfleiste -------------------------------------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  background: linear-gradient(180deg, rgba(20,20,20,.92), rgba(20,20,20,0));
  pointer-events: none;
}
.topbar .brand { font-family: var(--serif); font-size: 17px; letter-spacing: .5px; }
.topbar .brand .zh { color: var(--muted); margin-left: 8px; font-family: var(--sans); font-size: 14px; }
.topbar .brand b { color: var(--accent); font-weight: 800; }
.topbar .role { color: var(--muted); font-size: 13px; letter-spacing: 2px; }

/* ---- Deck (scroll-snap) ----------------------------------------- */
.deck {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.slide {
  min-height: 100vh;
  scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 70px 26px 60px;
}
.slide img {
  max-width: min(var(--maxw), 94vw);
  max-height: 84vh;
  width: auto; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #222;
  display: block;
}

/* ---- Untere Leiste: Titel + Zähler ------------------------------ */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0; height: 50px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  background: linear-gradient(0deg, rgba(20,20,20,.92), rgba(20,20,20,0));
  pointer-events: none;
}
.footer .caption { color: var(--muted); font-size: 13px; letter-spacing: .5px; }
.footer .counter { font-family: var(--serif); font-size: 15px; color: #ddd; }
.footer .counter b { color: var(--accent); font-weight: 700; }

/* ---- Navigationspfeile ------------------------------------------ */
.nav {
  position: fixed; right: 20px; bottom: 64px; z-index: 25;
  display: flex; flex-direction: column; gap: 10px;
}
.nav button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid #3a3a3a; background: rgba(40,40,40,.85); color: #eee;
  font-size: 18px; cursor: pointer; transition: background .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center;
}
.nav button:hover { background: var(--accent); color: #1c1c1c; border-color: var(--accent); }

@media (max-width: 700px) {
  .topbar .role { display: none; }
  .nav { display: none; }            /* mobil: einfach wischen */
  .slide { padding: 62px 12px 56px; }
  .footer .caption { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Druck: alle Folien untereinander */
@media print {
  body { overflow: visible; background: #fff; }
  .topbar, .footer, .nav { display: none; }
  .deck { height: auto; overflow: visible; }
  .slide { min-height: auto; page-break-after: always; padding: 0 0 10px; }
  .slide img { box-shadow: none; max-height: none; width: 100%; }
}