/* ==========================================================================
   educis.de: Produktseite educis Flow, Film und Modulübersicht
   Wird nur von flow.html geladen (nach home.css). Tokens, Formsystem und
   Bausteine (.modules, .seg, .included, .h2, .lead) kommen aus home.css.

   Der Film endet auf dem Mosaik aller achtzehn Module. Die Übersicht darunter
   ist dasselbe Mosaik zum Anfassen: links die Kacheln in zwei Gruppen
   (Essential, nur in Komplett), rechts das gewählte Modul.
   ========================================================================== */

/* ---------- Film ---------- */
.reel {
  padding-block: var(--section) clamp(56px, 7vw, 96px);
}
.reel__head {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(36px, 4.4vw, 56px);
}
.reel__player {
  /* nie höher als der Bildschirm: Bild und Kapitelleiste bleiben zusammen sichtbar */
  width: min(100%, calc((100vh - 210px) * 16 / 9));
  width: min(100%, calc((100svh - 210px) * 16 / 9));
  min-width: min(100%, 560px);
  margin-inline: auto;
}
.reel__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #f6f6f9;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.reel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel[data-ready] .reel__video {
  cursor: pointer;
}
.reel__start {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 5%, 40px);
  display: none;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 550;
  white-space: nowrap;
  box-shadow: 0 18px 40px -16px rgb(46 16 101 / 0.7);
  transform: translateX(-50%);
  transition:
    background 0.3s,
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease);
}
.reel__start:hover {
  background: var(--accent-hover);
  transform: translateX(-50%) scale(1.03);
}
.reel__start small {
  font-family: var(--mono);
  font-size: 0.78rem;
  opacity: 0.75;
}
.reel__startIcon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
}
.reel__startIcon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* Ohne Skript bedient sich der Film über die Bedienelemente des Browsers. */
.reel[data-ready][data-state="idle"] .reel__start {
  display: inline-flex;
}

.reel__bar {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: 18px;
}
.reel__bar[hidden] {
  display: none;
}
.reel__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  transition:
    border-color 0.3s,
    background 0.3s,
    color 0.3s;
}
.reel__toggle:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
.reel__toggle svg {
  display: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.reel[data-state="idle"] .reel__toggle [data-icon="play"],
.reel[data-state="paused"] .reel__toggle [data-icon="play"],
.reel[data-state="playing"] .reel__toggle [data-icon="pause"],
.reel[data-state="ended"] .reel__toggle [data-icon="replay"] {
  display: block;
}
.reel__chapters {
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 0;
  padding-top: 8px;
}
.reel__chapters li {
  flex: 1 1 0;
  min-width: 0;
}
.reel__chapter {
  display: block;
  width: 100%;
  padding: 12px 0 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--muted);
}
.reel__chapter i {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--line-strong);
  overflow: hidden;
}
.reel__chapter i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
.reel__chapter span {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s;
}
.reel__chapter:hover span,
.reel__chapter.is-current span {
  color: var(--accent-text);
}
.reel__time {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.reel__time span {
  display: none;
  color: var(--accent-text);
}
.reel__time output {
  min-width: 3.2ch;
  font-variant-numeric: tabular-nums;
}

/* ---------- Mosaik: Kacheln links, gewähltes Modul rechts ---------- */
.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr);
  align-items: start;
  gap: clamp(20px, 2.6vw, 40px);
}
.mosaic__board {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 14px clamp(14px, 1.6vw, 22px);
}
.mosaic__group {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-width: 0;
}
/* Klammer über der Gruppe, wie im Film */
.mosaic__label {
  position: relative;
  display: flex;
  justify-content: center;
  height: 28px;
}
.mosaic__label::before {
  content: "";
  position: absolute;
  inset: 13px 0 auto;
  height: 13px;
  border: 1.5px solid var(--accent);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.mosaic__label span {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border: 1.5px solid var(--accent);
  border-radius: var(--pill);
  background: var(--bg-2);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-text);
  white-space: nowrap;
}
.mosaic__label b {
  font-weight: 650;
}
.mosaic__label b:first-child {
  margin-right: 0.3em;
}
.mosaic__label b:last-child {
  margin-left: 0.3em;
}
.mosaic__group--plus .mosaic__label::before,
.mosaic__group--plus .mosaic__label span {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.mosaic__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
.mosaic__group--plus .mosaic__tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mosaic__tiles li {
  display: grid;
  min-width: 0;
}

.modtile,
.modprice {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  min-height: 104px;
  padding: 15px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  text-align: left;
  color: var(--ink);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.3s,
    opacity 0.5s var(--ease),
    filter 0.5s var(--ease);
}
.modtile {
  font-size: 0.96rem;
  font-weight: 550;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.modtile .ico {
  width: 22px;
  height: 22px;
  color: var(--accent-text);
}
.modtile span {
  overflow-wrap: anywhere;
}
.modtile--ess {
  border-color: transparent;
  background:
    radial-gradient(90% 120% at 100% 0%, #8b5cf6 0%, transparent 60%),
    linear-gradient(150deg, #6d28d9, #4c1d95);
  color: #fbfaff;
}
.modtile--ess .ico {
  color: #fbfaff;
}
.modtile:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
}
.modtile--ess:hover {
  border-color: transparent;
}
.modtile[aria-pressed="true"] {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--bg-2),
    0 0 0 4px var(--accent),
    var(--shadow);
}
.modtile:focus-visible,
.modprice:focus-visible,
.reel__chapter:focus-visible,
.reel__toggle:focus-visible,
.reel__start:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.modprice {
  justify-content: flex-end;
  gap: 2px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  background: none;
}
.modprice small {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}
.modprice small:first-child {
  margin-bottom: auto;
}
.modprice b {
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent-text);
  white-space: nowrap;
}
.modprice:hover {
  border-style: solid;
  transform: translateY(-2px);
}

/* Paket Essential gewählt: die elf weiteren treten zurück */
.modules[data-pkg="essential"] .modtile--plus,
.modules[data-pkg="essential"] .modprice--plus {
  opacity: 0.45;
  filter: grayscale(1);
  border-style: dashed;
  border-color: var(--line-strong);
}
.modules[data-pkg="essential"] .modtile--plus[aria-pressed="true"] {
  opacity: 0.85;
}
.modules[data-pkg="essential"] .mosaic__group--plus .mosaic__label {
  opacity: 0.6;
}
.modules[data-pkg="complete"] .modprice--ess {
  opacity: 0.5;
}

/* Auftritt: die Kacheln setzen sich nacheinander, wie im Film */
@keyframes modIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.86);
  }
}
.js:not(.reduce-motion) .mosaic__board.is-in .modtile,
.js:not(.reduce-motion) .mosaic__board.is-in .modprice {
  animation: modIn 0.8s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 38ms + 120ms);
}

/* Das gewählte Modul */
.modpanel {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: grid;
  gap: clamp(20px, 2.2vw, 28px);
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.modpanel__items {
  display: grid;
}
.modpanel__item {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}
.modpanel__item + .modpanel__item {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
/* Mit Skript liegen alle achtzehn übereinander: die Fläche behält ihre Höhe, nur eines ist sichtbar. */
.js .modpanel__item {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.js .modpanel__item.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--ease) 0.12s,
    transform 0.7s var(--ease) 0.12s,
    visibility 0s;
}
.modpanel__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.modpanel__meta span:last-child {
  margin-left: auto;
}
.modpanel__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.modpanel__icon .ico {
  width: 24px;
  height: 24px;
}
.modpanel__item--ess .modpanel__icon {
  background: linear-gradient(150deg, #7c3aed, #4c1d95);
  color: #fbfaff;
}
.modpanel__item h3 {
  margin-top: 6px;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.modpanel__text {
  line-height: 1.55;
  color: var(--text);
}
.modpanel__pkgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.modpanel__pkgs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--muted);
}
.modpanel__pkgs b {
  display: block;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--ink);
}
.modpanel__pkgs .ico {
  box-sizing: content-box;
  padding: 4px;
  border-radius: 50%;
  stroke-width: 2.4;
}
.modpanel__pkgs .is-yes {
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  background: var(--ok-soft);
}
.modpanel__pkgs .is-yes .ico {
  background: var(--ok);
  color: var(--ok-soft);
}
.modpanel__pkgs .is-no {
  border-style: dashed;
  border-color: var(--line-strong);
}
.modpanel__pkgs .is-no .ico {
  background: var(--bg-2);
}
.modpanel__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 18px;
  font-size: 0.86rem;
  color: var(--muted);
}
.modpanel__foot b {
  margin-right: 6px;
  font-weight: 600;
  color: var(--ink);
}
/* Fortschritt des Rundgangs */
.modpanel__run {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.modpanel__run i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@keyframes modRun {
  to {
    transform: scaleX(1);
  }
}
.modpanel__run i.is-running {
  animation: modRun var(--run, 2600ms) linear forwards;
}
.modpanel__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 550;
  color: var(--accent-text);
  white-space: nowrap;
}
.modpanel__more .ico {
  transition: transform 0.4s var(--ease);
}
.modpanel__more:hover .ico {
  transform: translateX(4px);
}
.mosaic + .included {
  margin-top: clamp(48px, 6vw, 72px);
}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width: 1100px) {
  .mosaic {
    grid-template-columns: minmax(0, 1fr);
  }
  .modpanel {
    position: static;
  }
  .modpanel__text {
    max-width: 62ch;
  }
}
@media (max-width: 960px) {
  .modules__head .seg {
    display: inline-flex;
  }
  .reel__chapter span {
    display: none;
  }
  .reel__time span {
    display: inline;
  }
  .reel__bar {
    align-items: center;
  }
  .reel__chapters {
    padding-top: 0;
  }
  .reel__chapter {
    padding-block: 12px;
  }
}
@media (max-width: 767px) {
  .reel__player {
    width: 100%;
    min-width: 0;
  }
  .reel__frame {
    border-radius: var(--r-md);
  }
  .reel__chapters {
    gap: 3px;
  }
  .mosaic {
    gap: 14px;
  }
  /* Am Handy klappt die Beschreibung direkt unter der angetippten Kachel auf
     (flow.js, „inline"). Bis 10/2026 blieb hier eine Karte oben stehen und
     schwebte beim Scrollen über den Kacheln: Sie verdeckte, was man gerade
     lesen wollte. Die Karte selbst zeigt mit Skript nur noch die Zeile zum
     Paket; ohne Skript stehen darin weiterhin alle Module als Liste. */
  .modpanel {
    position: static;
    gap: 14px;
    padding: 16px;
    border-radius: var(--r-md);
    box-shadow: none;
  }
  .js .modpanel {
    order: -1;
    padding: 12px 16px;
  }
  .js .modpanel__items,
  .js .modpanel__run {
    display: none;
  }
  .js .modpanel__foot {
    padding-top: 0;
  }
  /* „dense": Die Nachbarkachel bleibt neben der angetippten stehen, die
     Beschreibung nimmt die ganze Zeile darunter. */
  .js .mosaic__tiles {
    grid-auto-flow: row dense;
    grid-auto-rows: auto;
  }
  .mosaic__tiles li.modinline {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 14px 16px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 14px;
    background: var(--surface);
  }
  .js:not(.reduce-motion) .mosaic__tiles li.modinline {
    animation: modInline 0.35s var(--ease);
  }
  @keyframes modInline {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
  .modinline h3 {
    margin: 0;
    font-size: 1.15rem;
  }
  .modinline .modpanel__meta span:last-child {
    margin-left: auto;
  }
  .modtile[aria-expanded="true"] {
    border-color: var(--accent);
  }
  .modpanel__item {
    gap: 8px;
  }
  .modpanel__icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .modpanel__icon .ico {
    width: 18px;
    height: 18px;
  }
  .modpanel__item h3 {
    margin-top: 0;
    font-size: 1.3rem;
  }
  .modpanel__text {
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .modpanel__pkgs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }
  .modpanel__pkgs li {
    gap: 6px;
    padding: 4px 10px 4px 5px;
    border-radius: var(--pill);
    font-size: 0;
  }
  .modpanel__pkgs b {
    font-size: 0.78rem;
  }
  .modpanel__pkgs .ico {
    width: 12px;
    height: 12px;
    padding: 3px;
  }
  .modpanel__foot {
    padding-top: 12px;
    font-size: 0.8rem;
  }
  .modpanel__more {
    display: none;
  }
  .mosaic__board {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .mosaic__group--plus .mosaic__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mosaic__tiles {
    gap: 8px;
  }
  .modtile,
  .modprice {
    min-height: 58px;
    padding: 12px;
    border-radius: 14px;
  }
  .modtile {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 0.88rem;
  }
  .modtile .ico {
    width: 19px;
    height: 19px;
  }
  .modtile[aria-pressed="true"] {
    transform: none;
  }
  .modprice {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0 8px;
  }
  .modprice small:first-child {
    width: 100%;
    margin-bottom: 0;
  }
  .modprice b {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modtile,
  .modprice,
  .modpanel__item,
  .reel__start {
    transition: none !important;
  }
}