/* Zusatzstyles der Bestell-App (Warenkorb, Kasse, Danke, Zugang).
   Nur Design-Tokens (var(--…)) aus dem Design-System — keine neuen Farben.
   Eingaben: Radius 12 (--radius-md) laut 00-design-system.md. */

/* --- Seitengerüst --------------------------------------------------------- */

.section-pad { padding-block: 48px 96px; }

.page-head { margin-bottom: 48px; }

.page-title {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  color: var(--color-foreground);
  margin: 0;
}

.page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

.inline-link {
  color: var(--color-foreground);
  text-decoration: underline;
}

/* --- Warenkorb ------------------------------------------------------------ */

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-line {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
}

.cart-thumb {
  display: block;
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  color: #fff;
}

.cart-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-thumb-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

.cart-line-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cart-line-title {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  margin: 0;
}

.cart-line-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.cart-line-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card);
}

.qty-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--color-foreground);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-xl);
}

.qty-btn:hover { background: var(--color-muted); }

.qty-value {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--color-muted-foreground);
  cursor: pointer;
  border-radius: var(--radius-xl);
}

.cart-remove:hover {
  color: var(--color-notice);
  background: var(--color-muted);
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cart-empty .empty-state { align-self: stretch; }

/* --- Summenkarte ---------------------------------------------------------- */

.summary-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  position: sticky;
  top: 96px;
}

.summary-meta {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.summary-label {
  font-size: 15px;
  font-weight: 500;
}

.summary-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.summary-price {
  font-size: 20px;
  line-height: 28px;
}

.summary-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  line-height: 20px;
}

.summary-line-price {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Kasse ---------------------------------------------------------------- */

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: start;
}

.checkout-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel { padding: 32px; }

.panel-title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}

.panel-note {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.form-field:last-child { margin-bottom: 0; }

.form-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.form-input {
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-foreground);
}

.form-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

.form-check {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--color-primary);
  flex: none;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}

.check-row:first-of-type { margin-top: 0; }

.check-label {
  font-size: 14px;
  line-height: 20px;
}

.form-error {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-notice);
}

/* --- Danke-Seite ---------------------------------------------------------- */

.thanks-wrap {
  max-width: 720px;
  margin-inline: auto;
}

.thanks-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.thanks-card .summary-lines,
.thanks-card .summary-row,
.thanks-card .hairline,
.thanks-card form,
.thanks-card .notice-banner {
  align-self: stretch;
  text-align: left;
}

.thanks-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: var(--color-muted);
  color: var(--color-notice);
}

.thanks-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 34px;
  font-weight: 500;
  margin: 0;
}

.thanks-meta {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

/* --- Zugangsseite --------------------------------------------------------- */

/* Karten einer Reihe sind gleich hoch. Das Einklappen haelt die Karten
   kurz, aber gleich lang macht es sie nicht: eine Beratung hat nur eine
   Statuszeile, eine Veranstaltung Termin und Paketstufe. Ohne diese Zeile
   haengt die kuerzere Karte oben und darunter klafft eine Luecke. */
.access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.access-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  height: 100%;
}

/* Die Herkunftszeile sitzt am Fuss der Karte, damit die gestreckte Karte
   nicht nach unten ausfranst, sondern unten abschliesst. */
.access-card > .access-herkunft { margin-top: auto; }

.access-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  background: var(--color-muted);
  color: var(--color-notice);
  flex: none;
}

.access-title {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin: 0;
}

.access-meta {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

.asset-list {
  display: flex;
  flex-direction: column;
}

.asset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.asset-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  min-width: 0;
}

.asset-btn {
  height: 36px;
  padding: 0 16px;
  flex: none;
}

/* --- Datei-Ausklapper in der Inhaltskarte -------------------------------- */
/* Zugeklappt sind alle Karten gleich hoch. Vorher zog ein Produkt mit zwei
   Videos seine Karte auf die doppelte Höhe der Nachbarkarte und riss damit
   das Raster auseinander. Der Schalter nennt die Zahl der Dateien, damit
   zugeklappt trotzdem erkennbar ist, dass dort etwas liegt. */

.dateien { border-top: 1px solid var(--color-border); }

.dateien-schalter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  list-style: none;               /* der voreingestellte Marker weicht dem eigenen Pfeil */
  user-select: none;
}

.dateien-schalter::-webkit-details-marker { display: none; }

.dateien-schalter:hover { color: var(--color-primary); }

.dateien-marke,
.dateien-pfeil { display: inline-flex; flex: none; }

/* Der Pfeil sitzt rechts und dreht sich beim Aufklappen. */
.dateien-pfeil {
  margin-left: auto;
  transition: transform 150ms ease;
}

.dateien[open] > .dateien-schalter .dateien-pfeil { transform: rotate(180deg); }

/* Ein Text je Zustand: zugeklappt die Zahl, aufgeklappt der Weg zurueck. */
.dateien-text--auf { display: none; }
.dateien[open] > .dateien-schalter .dateien-text--zu { display: none; }
.dateien[open] > .dateien-schalter .dateien-text--auf { display: inline; }

/* Eine Trennlinie unter dem Schalter, gleich ob dahinter eine Zeile oder
   eine Videokachel kommt: die Zeile bringt ihre eigene mit, die Kachel nicht.
   Deshalb sitzt die Linie am Inhalt und nicht am ersten Kind. */
.dateien-inhalt {
  border-top: 1px solid var(--color-border);
  padding-bottom: 4px;
}

.dateien-inhalt > .asset-list > .asset-row:first-child { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .dateien-pfeil { transition: none; }
}

/* --- Videokachel in der Inhaltskarte ------------------------------------- */
/* Kein Player mehr in der Karte: die Kachel führt auf die eigene Videoseite,
   der Knopf darunter lädt dieselbe Datei herunter. Gerüst, Standbild und
   Play-Symbol kommen aus den Komponentenklassen des Design-Systems
   (.card-cover, .cover-leer, .scrim, .cover-motif, .motif-circle). */

.video-eintrag {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}

.video-eintrag + .video-eintrag,
.asset-row + .video-eintrag { border-top: 1px solid var(--color-border); }

.video-kachel {
  display: block;
  text-decoration: none;
}

/* Der Titel liegt auf dem Standbild. Cover kommen aus dem Katalog und können
   hell sein — der Verlauf darunter hält die Schrift auch dann lesbar. Auf der
   leeren Fläche ist er unsichtbar, weil sie dieselbe Farbe trägt. */
.video-kachel-titel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 16px 12px;
  background: linear-gradient(to top, var(--color-inverse), transparent);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

@media (hover: hover) {
  .video-kachel:hover .motif-circle {
    transform: scale(1.08);
  }
}

.video-kachel .motif-circle { transition: transform 0.15s; }

/* Zeile unter der Kachel: nur der Knopf, deshalb rechtsbündig. */
.asset-row-knopf { justify-content: flex-end; border-top: 0; }

/* --- Videoseite ----------------------------------------------------------- */

.video-kopf { margin-bottom: 24px; }

.video-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 20px;
}

.video-buehne {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-inverse);
}

.video-buehne video {
  display: block;
  width: 100%;
  max-height: 72vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.video-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

.zoom-box {
  background: var(--color-muted);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zoom-link { word-break: break-all; font-size: 14px; }

.zoom-notes {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-line;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 960px) {
  .cart-layout,
  .checkout-layout,
  .access-grid {
    grid-template-columns: 1fr;
  }

  .summary-card { position: static; }
}

/* --- Kundenkonto ------------------------------------------------------------ */
.konto-form {
  max-width: 520px;
  margin-inline: auto;
  padding: 32px;
}
.konto-form .btn {
  margin-top: 8px;
}
.konto-hinweis {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
  text-align: center;
}
/* Passwortfeld der Kasse: gehört sichtbar zum Häkchen darüber. */
.konto-passwortfeld {
  margin-top: 16px;
}
/* Gastkauf-Hinweis auf der Danke-Seite. */
.konto-angebot {
  margin-top: 24px;
  padding: 20px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
}
.konto-angebot-titel {
  font-weight: 700;
  margin-bottom: 4px;
}
.konto-angebot-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
  margin-bottom: 16px;
}

/* --- Meine Inhalte (Sammelseite) -------------------------------------------- */
.inhalte-abschnitt {
  margin-top: 32px;
}
.inhalte-abschnitt-titel {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  margin-bottom: 16px;
}
.inhalte-liste .access-grid {
  margin-top: 24px;
}
.inhalte-suche {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inhalte-suche .header-suche-eingabe {
  min-width: 240px;
}
/* Herkunftszeile: welche Bestellung diesen Inhalt gebracht hat. */
.access-herkunft {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-muted-foreground);
}

@media (max-width: 640px) {
  .section-pad { padding-block: 32px 64px; }

  .inhalte-suche { width: 100%; }
  .inhalte-suche .header-suche-eingabe { min-width: 0; flex: 1; }

  .page-head { margin-bottom: 32px; }

  .cart-line {
    grid-template-columns: 96px 1fr;
  }

  .cart-thumb { width: 96px; }

  .cart-line-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .panel { padding: 24px; }
}

/* Die auf der Veranstaltungsseite gewählte Beratungsstunde, sichtbar in der
   Bestellübersicht der Kasse. */
.summary-termin {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-champagne-muted);
  color: var(--color-champagne-foreground);
  font-size: 14px;
  line-height: 20px;
}

.summary-hinweis {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-champagne-muted);
  color: var(--color-champagne-foreground);
  font-size: 14px;
  line-height: 20px;
}

.summary-termin b {
  display: block;
  font-weight: 600;
}