/*
 * Katalogseiten (Agent A2) — Zusatzstyles über den Komponentenklassen des
 * Design-Systems. Nur Token-Variablen (var(--…)); Maße aus den Figma-XMLs
 * 03–07 und 10. Weiß-Alpha-Flächen folgen den Mustern aus core/static_src.
 */

:root {
  /* Token aus 00-design-system.md — im Tailwind-Build tree-shaken, weil ihn
     bisher keine Komponente nutzt; hier einmalig als Variable nachgereicht. */
  --color-champagne: #B99762;
}

/* --- Seitenkopf (03–06) -------------------------------------------------- */
.katalog-kopf {
  padding-top: 96px;
}
.katalog-meta {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

/* --- Filterzeile + Sortierung -------------------------------------------- */
.produktbereich {
  margin-top: 24px;
}
.katalog-filterzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.katalog-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.katalog-sortierung {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.katalog-sortierung select {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  padding: 0 42px 0 18px;
  border-radius: var(--radius-xl);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-foreground);
  cursor: pointer;
}
.katalog-sortierung svg {
  position: absolute;
  right: 16px;
  pointer-events: none;
  color: var(--color-foreground);
}
.katalog-hairline,
.detail-hairline {
  border: 0;
  border-top: 1px solid var(--color-border);
}
.katalog-hairline {
  margin: 24px 0 0;
}

/* --- Produkt-Raster (4 Spalten, Gap 24/32) -------------------------------- */
.produkt-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  margin-top: 32px;
}
.poster-reihe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
/* SET-Karten: feine 2-px-Schmucklinie in Champagner oben auf der Kartenfläche
   (05-sets.md) — greift nur, wenn die Karte das SET-Badge trägt. */
.card-product:has(.badge-set)::before {
  content: "";
  display: block;
  height: 2px;
  margin: -2px 2px 6px;
  border-radius: var(--radius-xl);
  background: var(--color-champagne);
}

/* --- Mehr laden ------------------------------------------------------------ */
/* „Mehr laden" tauscht den Produktbereich gegen die vollstaendige Liste und
   macht die Seite dabei um ein Vielfaches laenger. Chromes Scroll-Anchoring
   verankert die Ansicht in diesem Moment an einem Element *unterhalb* der
   Einfuegestelle (dem Footer) und verschiebt die Scrollposition um genau das
   Hoehenwachstum nach unten — man landet am Seitenende statt dort zu bleiben,
   wo man geklickt hat. Auf Mobil faellt das brutal aus (auf der Seite
   „Videoaufnahmen" 16711 px), auf Desktop faellt der Anker zufaellig auf eine
   Produktkarte und es passiert nichts; deshalb sieht man es nur am Telefon.

   Nachtraeglich laesst sich das nicht abschalten: Der Anker wird beim Scrollen
   gewaehlt, ein spaeteres Setzen von overflow-anchor greift nicht mehr. Die
   Regel muss also statisch dastehen. Sie gilt nur auf Seiten, die ueberhaupt
   einen „Mehr laden"-Block haben, und kostet dort nichts: Alle Karten haben
   ein festes Seitenverhaeltnis (.card-cover: aspect-ratio 1), es gibt also
   nichts, was nachtraeglich die Hoehe aendert und wofuer Anchoring noetig
   waere. */
body:has(.mehr-laden) {
  overflow-anchor: none;
}
.mehr-laden {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
}
.mehr-zaehler {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-muted-foreground);
}
.fortschritt {
  width: 160px;
  height: 4px;
  border-radius: var(--radius-xl);
  background: var(--color-border);
  overflow: hidden;
}
.fortschritt-fuellung {
  display: block;
  height: 100%;
  border-radius: var(--radius-xl);
  background: var(--color-secondary);
}

/* --- Shop (06): Sprungmarken + Sektionen ----------------------------------- */
/* Steht der Buch-Banner darüber, braucht der Kopf weniger Vorlauf —
   die übrigen Katalogseiten behalten ihren Abstand. Der Name folgt dem
   Partial: `.buch-hinweis` heißt jetzt nur noch der Vermerk unter der
   Buchkarte auf /sonstiges, der nie neben `.container-shop` steht. */
.buch-banner + .container-shop .katalog-kopf {
  padding-top: 56px;
}

/* Formate im Kopf: was Aufzeichnung, Unterlagen und Set voneinander trennt. */
.shop-formate {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 20px;
}
.shop-formate li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 34ch;
}
.shop-formate strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.shop-formate span {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

.shop-sprungmarken {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.shop-sektion {
  margin-top: 96px;
}
.shop-sektion-inhalt {
  margin-top: 32px;
}
.shop-sektion-inhalt .produkt-raster {
  margin-top: 0;
}

/* Fachbuch-Zweispalter (06, Sektion 2) */
.buch-karte {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 32px;
}
.buch-cover {
  position: relative;
  flex: none;
  width: 300px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: #ffffff;
}
/* Cover-Fläche als Link auf die Produktseite (Muster wie .card-cover-link). */
.buch-cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.buch-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.buch-cover-titel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
}
.buch-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.buch-hinweis {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}
.buch-hinweis a {
  color: var(--color-foreground);
  text-decoration: underline;
}

/* --- Sonstiges (07) --------------------------------------------------------- */
.sonstiges-kopf {
  padding-top: 96px;
}
.sonstiges-sektion {
  margin-top: 96px;
}
.newsletter-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 24px;
  align-items: stretch;
  margin-top: 32px;
}
.newsletter-karte {
  padding: 32px;
}
.newsletter-karte p {
  margin-top: 12px;
}
.newsletter-punkte {
  margin-top: 12px;
  list-style: none;
  padding: 0;
}
.newsletter-punkte li {
  position: relative;
  padding-left: 15px;
}
.newsletter-punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10.5px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-xl);
  background: var(--color-foreground);
}
.newsletter-punkte a {
  text-decoration: underline;
}
.abo-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  background: var(--color-muted);
  border-radius: var(--radius-lg);
}
.abo-schmetterling {
  color: var(--color-accent);
}

.kachel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.kachel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
@media (hover: hover) {
  .kachel:hover {
    background: var(--color-muted);
  }
}
.kachel-inhalt {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  line-height: 26px;
}

.stimmen-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.stimme {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
}
.stimme-icon {
  color: var(--color-secondary);
}
/* Platzhalter-Balken wie im Design (07) — bewusst ohne Zitat-Texte. */
.stimme-balken {
  display: block;
  height: 12px;
  border-radius: var(--radius-xl);
  background: var(--color-muted);
}
.stimme-balken-1 {
  width: 100%;
  margin-top: 16px;
}
.stimme-balken-2 {
  width: 81%;
  margin-top: 8px;
}
.stimme-balken-3 {
  width: 59%;
  margin-top: 8px;
}
.stimme-balken-name {
  width: 40%;
  margin-top: 16px;
}

/* --- Produkt-Detail (10) ----------------------------------------------------- */
.detail-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-muted-foreground);
}
.detail-pfad a {
  text-decoration: none;
}
.detail-pfad-aktuell {
  color: var(--color-foreground);
}
.detail-blaettern {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
.detail-blaettern-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-foreground);
  text-decoration: none;
}

.detail-bereich {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 552fr);
  gap: 48px;
  margin-top: 48px;
}
.detail-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #ffffff;
}
/* Eingepasst statt beschnitten — wie in der Karte. Die unscharfe Grundflaeche
   dahinter (.cover-grund) steht in main.css, die ueberall geladen wird. */
.detail-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.detail-cover img.cover-grund {
  object-fit: cover;
}
.detail-cover .motif-circle {
  width: 64px;
  height: 64px;
}
.detail-cover .motif-sm {
  width: 40px;
  height: 40px;
}
.detail-kaufbox {
  padding: 32px;
  align-self: start;
}
.detail-titel {
  font-size: 36px;
  line-height: 44px;
}
.detail-meta {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

/* Termin und Leistungsumfang einer Paketstufe. Beide Blöcke stehen auf der
   Veranstaltungsseite genauso — dieselbe Anordnung, damit dieselbe Angabe an
   beiden Orten gleich aussieht (events/css/events.css). */
.detail-termin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-umfang {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
}

.detail-umfang li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.detail-umfang li svg {
  flex: none;
  margin-top: 3px;
  color: var(--color-secondary);
}
.detail-preisblock {
  margin-top: 16px;
}
.detail-preiszeile {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.detail-preis {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
}
.detail-preislabel {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}
.detail-menge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
}
.detail-menge-eingabe {
  width: 88px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-foreground);
}
.detail-kauf-form {
  margin-top: 16px;
}
.detail-hinweis {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}
.detail-hinweis a {
  color: var(--color-foreground);
  text-decoration: underline;
}
.detail-kaufbox .detail-hairline {
  margin: 24px 0 16px;
}
.detail-bewertungen p + p {
  margin-top: 6px;
}
.detail-bewertung-link {
  display: inline-block;
  margin-top: 6px;
  text-decoration: underline;
}

.detail-beschreibung {
  max-width: 816px;
  margin-top: 48px;
}
.detail-beschreibung .detail-hairline {
  margin-bottom: 16px;
}
.detail-beschreibung p {
  margin-top: 16px;
}
.detail-beschreibung .detail-lead {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}
.detail-beschreibung .detail-punkt {
  margin-top: 8px;
  padding-left: 4px;
}

/* --- Suchseite (/suche) -------------------------------------------------------- */
/* Eingabe und Button in einer Zeile — analoges Muster zur Katalog-Filterzeile. */
.suche-formular {
  margin-top: 24px;
}
.suche-label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
  margin-bottom: 8px;
}
.suche-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.suche-eingabe {
  flex: 1;
  max-width: 600px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-foreground);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.suche-eingabe:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(185 127 137 / 0.15);
  outline: none;
}
.suche-eingabe::placeholder {
  color: var(--color-muted-foreground);
}
.suche-btn {
  height: 48px;
  flex: none;
}
.suche-zaehler {
  margin-top: 32px;
  margin-bottom: 0;
}

/* --- Responsive (Ableitung laut Auftrag, Design bleibt bei 1440 maßgeblich) --- */
@media (max-width: 1199.98px) {
  .produkt-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .poster-reihe {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .poster-reihe > * {
    scroll-snap-align: start;
  }
}
@media (max-width: 1023.98px) {
  .detail-bereich,
  .newsletter-zeile {
    grid-template-columns: minmax(0, 1fr);
  }
  .buch-karte {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 899.98px) {
  .produkt-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kachel-grid,
  .stimmen-reihe {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 639.98px) {
  .produkt-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .katalog-kopf,
  .sonstiges-kopf,
  .buch-banner + .container-shop .katalog-kopf {
    padding-top: 40px;
  }
  .shop-sektion,
  .sonstiges-sektion {
    margin-top: 64px;
  }
  /* 390-px-Sonde: Abschnittsköpfe (H2 + Pill) und lange H1-Wörter
     („Veranstaltungsunterlagen/Ebook") dürfen die Seite nicht aufziehen;
     Thumbnail-Leiste bricht um statt überzustehen. */
  .section-head {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 12px;
  }
  .katalog-kopf h1,
  .shop-sektion h2,
  .sonstiges-kopf h1 {
    overflow-wrap: anywhere;
  }
}