/* deck.css — Walkthrough-Viewer. Keine externe Ressource. */
:root{
  --bg:#f5f7f6; --surface:#ffffff; --line:#dfe5e3;
  --ink:#11171a; --ink-2:#4a575c; --ink-3:#75838a;
  --accent:#158463; --frame:#dbe2e0;
  --font-t:"Space Grotesk","IBM Plex Sans",system-ui,-apple-system,
    "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-b:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,
    Helvetica,Arial,sans-serif;
  --font-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,
    "Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#11171a; --surface:#1a2226; --line:#2a3438;
    --ink:#f2f5f4; --ink-2:#b6c1c4; --ink-3:#8b989d;
    --accent:#46b894; --frame:#080c0e;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow-x:hidden;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:15px; line-height:1.5;
  -webkit-text-size-adjust:100%;
  display:flex; flex-direction:column;
}
button{font:inherit; color:inherit}

/* Kopfzeile (nur index.html) */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--line);
  background:var(--surface);
}
.ident{min-width:0; display:flex; flex-direction:column; gap:2px}
.eyebrow{
  font-family:var(--font-m); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.name{
  font-family:var(--font-t); font-weight:600; font-size:16px;
  letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tools{margin-left:auto; display:flex; gap:8px; flex:0 0 auto}
.tool{
  min-height:44px; min-width:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:8px;
  background:transparent; cursor:pointer;
  font-size:14px; white-space:nowrap;
}
.tool:hover{border-color:var(--accent); color:var(--accent)}
.tool[aria-pressed="true"]{
  border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.tool:focus-visible,.nav:focus-visible,.link:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* Buehne.
   Die Hoehe der Buehne rechnet sich aus der FENSTERBREITE (16:9), nicht aus
   dem verbleibenden Platz. Sonst stand auf dem Telefon ein 211 px hohes
   Bild in einem 500 px hohen grauen Feld. max-height fangt den umgekehrten
   Fall ab (breites, niedriges Fenster); dann legt object-fit:contain die
   Balken an die Seiten. aspect-ratio taugt hier nicht: mit fester Breite
   UND max-height verliert die Box ihr Verhaeltnis. */
.stage{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  justify-content:center; background:var(--bg)}
.frame{
  position:relative; flex:0 1 auto;
  height:calc(100vw * 9 / 16); max-height:100%;
  background:var(--frame); overflow:hidden;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}
.rail{position:absolute; inset:0}
.slide{position:absolute; inset:0; opacity:0; visibility:hidden}
.slide.on{opacity:1; visibility:visible}
.slide img{
  width:100%; height:100%; object-fit:contain; display:block;
  user-select:none; -webkit-user-drag:none;
}
.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:64px; min-width:44px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; cursor:pointer;
  background:rgba(17,23,26,.55); color:#f2f5f4;
  font-family:var(--font-t); font-size:30px; line-height:1;
  opacity:.55; transition:opacity .15s;
}
.nav:hover{opacity:1}
.nav.prev{left:8px}
.nav.next{right:8px}
.nav[disabled]{opacity:.16; cursor:default}

/* Notizen */
.notes{
  flex:0 0 auto; max-height:38%; overflow-y:auto;
  padding:14px 18px 18px; border-top:1px solid var(--line);
  background:var(--surface);
}
.notes-h{
  margin:0 0 6px; font-family:var(--font-m); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  font-weight:500;
}
.notes-t{margin:0; max-width:78ch; color:var(--ink-2); font-size:15px}

/* Fusszeile */
.botbar{flex:0 0 auto; background:var(--surface);
  border-top:1px solid var(--line)}
.progress{height:3px; background:var(--line)}
.progress-fill{height:100%; width:0; background:var(--accent);
  transition:width .18s ease-out}
.foot{
  display:flex; align-items:center; gap:12px;
  padding:6px 14px; min-height:44px;
}
.count{
  font-family:var(--font-m); font-size:12px; color:var(--ink-3);
  white-space:nowrap;
}
.foot .tools{margin-left:auto}
.link{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  color:var(--ink-3); font-size:13px; text-decoration:none;
  white-space:nowrap;
}
.link:hover{color:var(--accent); text-decoration:underline}
.hint{
  color:var(--ink-3); font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Einbettung: keine Kopfzeile, alles in die Fusszeile */
body[data-mode="embed"] .foot{padding:4px 10px}

@media (max-width:640px){
  .hint{display:none}
  .name{font-size:15px}
  .tool{padding:0 12px}
  .nav{width:44px; height:56px; font-size:26px}
  /* Auf 375 px ist die Buehne per 16:9 nur 211 px hoch, die Flaeche
     darunter aber 500 px. Offene Notizen fuellen sie deshalb ganz
     (flex:1, keine Hoehengrenze); ohne Notizen bleibt die Folie mittig,
     statt oben zu kleben und ein leeres Feld bis zur Fusszeile zu lassen. */
  .notes{flex:1 1 auto; max-height:none; padding:12px 14px 16px}
  /* Der oesterreichische Vorspann ist 39 Zeichen lang und endete hier als
     "PRODUKT-WALKTHROUGH · F...". Auf dem Telefon traegt der Name. */
  .eyebrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .progress-fill{transition:none}
  .nav{transition:none}
}