/* ==========================================================================
   folien.css — Folienweise Bedienung (gestaltung.md R-GEST-081), Gegenstück zu folien.js.
   Werte wie die Präsentation (sales-presentation/04_site/css/styles.css, „Präsentations-Chrome"),
   Farben und Maße aus den Tokens der Trägerseite; Rückfallwerte sind dieselben Zahlen.

   Einrasten nur breit und ohne abbestellte Bewegung; unter 56 rem (b-m) und bei Berührung wie die
   Präsentation: kein Einrasten, keine Punkte, kein Hinweis — die Sprungmarken im Menüschalter
   übernehmen. Die Folie ist mindestens fensterhoch (abzüglich Kopf); höher darf sie werden, dann
   rollt man in ihr zu Ende, bevor sie weiterschaltet.
   ========================================================================== */
@media (min-width: 56.0625rem) {
  html.folien { scroll-snap-type: y mandatory; scroll-padding-top: var(--kopf-h, 0px); }
  .folien [data-folie] {
    min-height: calc(100vh - var(--kopf-h, 0px));
    min-height: calc(100dvh - var(--kopf-h, 0px));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex; flex-direction: column; justify-content: center;
  }
  .folien [data-folie] > * { width: 100%; }
  /* Die Folie füllt das Fenster und zentriert ihren Inhalt — der Abschnittsrhythmus a-8 der
     Verkaufsseite wird innen zu a-4..a-6, mit der Fensterhöhe gleitend (4vh: 720 px → 29 px, 1080 px → 43 px).
     Das ist keine Höhenabfrage (R-GEST-081), sondern ein Maß wie die 100vh der Folie selbst: jede Folie soll
     auf einen Schirm passen, und auf dem niedrigen Laptop zählt jeder Pixel (check-folien-ueberlauf.mjs). */
  .folien .sect[data-folie], .folien .hero[data-folie] {
    padding-top: clamp(var(--a-4, 1.5rem), 4vh, var(--a-6, 3rem));
    padding-bottom: clamp(var(--a-4, 1.5rem), 4vh, var(--a-6, 3rem));
  }
  /* Was als Folge im Abschnitt Abstand nach oben brauchte, steht als erster Baustein einer Folie oben an. */
  .folien [data-folie] > .wrap > :first-child { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html.folien { scroll-behavior: smooth; }
}

.folien-leiste {
  position: fixed; top: 0; left: 0; z-index: 40; height: 4px; width: 0%;
  background: var(--accent, #026CDF); transition: width var(--d-2, 200ms) ease;
}
.folien-punkte {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column;
}
/* Trefferfläche 24 px (R-GEST-036, nur Maus), sichtbar bleibt der 12-px-Punkt. */
.folien-punkte button {
  position: relative; width: 1.5rem; height: 1.5rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.folien-punkte button::before {
  content: ""; position: absolute; inset: 0.375rem; border-radius: 50%;
  border: 2px solid var(--accent, #026CDF); background: var(--white, #fff); transition: all var(--d-2, 200ms) ease;
}
.folien-punkte button[aria-current="true"]::before { background: var(--accent, #026CDF); transform: scale(1.35); }
.folien-punkte button:focus-visible { outline: 3px solid var(--accent, #026CDF); outline-offset: 2px; }
.folien-punkte__titel {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; pointer-events: none;
  padding: var(--a-0, 0.25rem) var(--a-1, 0.5rem); border-radius: 6px;
  font-size: var(--s-00, 0.75rem); line-height: 1; color: var(--white, #fff); background: var(--ink, #2b3033);
  box-shadow: var(--e-1, 0 6px 18px rgba(43, 48, 51, 0.08));
  opacity: 0; visibility: hidden; transition: opacity var(--d-2, 200ms) ease, transform var(--d-2, 200ms) ease;
}
.folien-punkte__titel::after {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-left-color: var(--ink, #2b3033);
}
.folien-punkte button:focus-visible .folien-punkte__titel { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
@media (hover: hover) {
  .folien-punkte button:hover::before { background: var(--accent-soft, #DCEBFF); }
  .folien-punkte button[aria-current="true"]:hover::before { background: var(--accent, #026CDF); }
  .folien-punkte button:hover .folien-punkte__titel { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
}

.folien-hinweis {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 40; margin: 0;
  padding: var(--a-0, 0.25rem) var(--a-2, 0.75rem); border-radius: var(--r-pille, 999px);
  font-size: var(--s-00, 0.75rem); color: var(--grey, #61686c); background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--e-1, 0 6px 18px rgba(43, 48, 51, 0.08)); transition: opacity var(--d-3, 320ms) ease;
}
.folien-hinweis.ist-weg { opacity: 0; visibility: hidden; transition: opacity var(--d-3, 320ms) ease, visibility 0s var(--d-3, 320ms); }
.folien-hinweis kbd {
  margin: 0 1px; padding: 1px var(--a-0, 0.25rem); border-radius: 4px;
  font: inherit; color: var(--white, #fff); background: var(--ink, #2b3033);
}

@media (max-width: 56rem), (pointer: coarse) {
  .folien-punkte, .folien-hinweis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .folien-leiste, .folien-punkte button::before, .folien-punkte__titel, .folien-hinweis { transition: none; }
}