/* ==========================================================================
   YELS – Bausteine für die echten Inhalte
   Schulungskarten, die ausführlichen Porträts und die Studio-Geschichte.
   Liegt bewusst in einer eigenen Datei, damit components.css übersichtlich
   bleibt. Farben und Abstände kommen alle aus tokens.css.
   ========================================================================== */

/* --- „Nur bei Sude buchbar“ ---------------------------------------------- */
.bei-wem {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-deep);
  background: var(--accent-soft); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: .45em 1em;
  margin: 0 0 1.6rem;
}
.bei-wem::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: var(--accent); flex: none;
}
.section-ink .bei-wem {
  color: var(--paper); background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

/* --- Schulungskarten ------------------------------------------------------ */
.kurs-liste { display: grid; gap: var(--gap-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .kurs-liste { grid-template-columns: 1fr; } }

.kurs {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.kurs:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }

.kurs-art {
  align-self: flex-start;
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
  border-radius: var(--radius-pill); padding: .4em 1em; margin-bottom: 1.1rem;
}
.kurs-art-vorort { background: var(--ink); color: var(--paper); }
.kurs-art-online { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--line-strong); }

.kurs-name   { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.05; margin: 0; }
.kurs-sub    { font-size: var(--fs-small); color: var(--ink-soft); margin: .35rem 0 0; }
.kurs-umfang {
  font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-deep); margin: 1rem 0 0;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.kurs-intro  { font-size: var(--fs-small); margin: 1rem 0 0; }

.kurs-block { margin-top: 1.6rem; }
.kurs-block h4 {
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 .8rem;
}

/* Stichpunkte als Chips – liest sich schneller als eine lange Liste */
.kurs-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.kurs-chips li {
  font-size: var(--fs-micro); line-height: 1.3;
  background: var(--paper-soft); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: .45em .9em;
}

.kurs-incl { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.kurs-incl li { display: flex; gap: .65em; font-size: var(--fs-small); }
.kurs-incl li > span:first-child { color: var(--accent); flex: none; font-weight: 800; }

.kurs-fuss {
  margin: auto 0 0; padding-top: 1.8rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-s) var(--gap-m);
}
.kurs-fuss .small { margin-left: auto; text-align: right; }

/* --- Ausführliche Porträts ------------------------------------------------ */
.portraet {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: .85fr 1.15fr; align-items: center;
}
.portraet + .portraet { margin-top: clamp(3rem, 7vw, 6rem); }
.portraet.ist-gedreht > .portraet-bild { order: 2; }
@media (max-width: 860px) {
  .portraet { grid-template-columns: 1fr; }
  .portraet.ist-gedreht > .portraet-bild { order: 0; }
}

.portraet-bild {
  border-radius: var(--radius-l); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--paper-warm); box-shadow: var(--shadow-card);
}
.portraet-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.portraet-text > p + p { margin-top: .9rem; }
.portraet-text > p:first-of-type { font-size: var(--fs-body); color: var(--ink-soft); }

/* --- Die Geschichte ------------------------------------------------------- */
.story-teile {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 900px) { .story-teile { grid-template-columns: 1fr; } }

.story-teil { padding-top: 1.6rem; border-top: 2px solid var(--ink); }
.story-teil h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 .9rem; }
.story-teil p + p { margin-top: .8rem; }
.story-teil p { font-size: var(--fs-small); }

.story-schluss {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius-l);
  background: linear-gradient(140deg, var(--accent-soft) 0%, var(--paper-warm) 100%);
  border: 1px solid var(--line);
}
.story-schluss p { margin: 0; color: var(--ink-soft); }
.story-schluss p + p { margin-top: .9rem; }
.story-schluss p:first-child {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.2; color: var(--ink);
}

/* --- Bildband: mehrere Fotos nebeneinander -------------------------------- */
.bildband { display: grid; gap: var(--gap-m); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .bildband { grid-template-columns: 1fr 1fr; } }
.bildband figure {
  margin: 0; border-radius: var(--radius-m); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--paper-warm);
}
.bildband figure.ist-breit { grid-column: span 2; aspect-ratio: 16 / 11; }
.bildband img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-mid) var(--ease);
}
.bildband figure:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .kurs:hover, .bildband figure:hover img { transform: none; }
}

/* --- Vorher/Nachher-Regler ------------------------------------------------
   Die Vorlage ist hochkant, deshalb steht der Regler hier im Format 4:5 statt
   quer – sonst bliebe vom Gesicht nur ein schmaler Streifen. Die beiden
   Dateien sind aufeinander ausgerichtet (gleiche Augenhoehe, gleiche
   Gesichtsgroesse), damit beim Ziehen nichts springt.
-------------------------------------------------------------------------- */
.ba { aspect-ratio: 4 / 5; max-width: 520px; margin-inline: auto; }
.ba img { object-position: 50% 50%; }
/* Der Griff darf nicht am Rand kleben, wenn der Regler ganz aussen steht. */
.ba-handle { box-shadow: 0 0 0 1px rgba(14, 14, 13, .18); }

/* --- Hotspot-Foto ---------------------------------------------------------
   `hotspots-gesicht.jpg` ist exakt 3:2 zugeschnitten. Deshalb hier überall
   dasselbe Seitenverhältnis und kein weiterer Beschnitt – nur so sitzen die
   Punkte aus data.js auf jedem Bildschirm an derselben Stelle.
-------------------------------------------------------------------------- */
.hotspot-figure { aspect-ratio: 3 / 2; }
@media (max-width: 640px) { .hotspot-figure { aspect-ratio: 3 / 2; } }
.hotspot-figure > img { object-position: 50% 50%; }

/* --- Abschluss-Banner und Footer als ein durchgehender Block --------------
   Beide hatten ihren eigenen Lichtschein genau an der Nahtstelle – dadurch sah
   die Kante aus wie abgeschnitten, und rechts blieb ein Schleier stehen. Jetzt
   sind beide einfarbig in --deep: eine Fläche, keine Naht. Wer den Schein im
   Banner zurückwill, setzt bei .cta-band wieder einen radial-gradient davor,
   der unten vor der Kante auf transparent läuft.
-------------------------------------------------------------------------- */
.cta-band { background: var(--deep); }
/* Einfarbig. Jeder Verlauf hier erzeugte an der Naht zum Banner eine
   sichtbare Kante – das Banner laeuft unten ohnehin in genau dieser Farbe aus,
   dadurch gehen beide nahtlos ineinander ueber. */
.site-footer { background: var(--deep); }
/* Folgt der Footer direkt auf das Banner, rücken beide zusammen. */
main:has(> .cta-band:last-child) + .site-footer {
  padding-block-start: clamp(2rem, 4vw, 3.25rem);
}

/* Auf dem Handy ist das Foto nur rund 210 px hoch – da wirken die Punkte in
   voller Größe wie Aufkleber. Etwas kleiner, aber weiterhin gut zu treffen. */
@media (max-width: 640px) {
  .hotspot { width: 27px; height: 27px; }
}

/* --- Preis auf der Kurskarte ---------------------------------------------
   Nur die Online-Kurse haben einen. Der alte Preis steht durchgestrichen
   davor, damit der Nachlass ohne Erklärung zu sehen ist.
-------------------------------------------------------------------------- */
.kurs-preis {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .7rem;
  margin: 1rem 0 0;
}
.kurs-preis s { color: var(--ink-muted); font-size: var(--fs-small); text-decoration-thickness: 1px; }
.kurs-preis strong {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em;
  font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1; color: var(--ink);
}
.kurs-spar {
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: var(--radius-pill);
  padding: .35em .85em;
}

/* --- Kurs kaufen ----------------------------------------------------------
   Die Kaufseite und die Bestätigung danach. Beide nutzen sonst die
   vorhandenen Bausteine (Felder, Knöpfe, Hinweiskasten).
-------------------------------------------------------------------------- */
.kauf-kasten {
  border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--paper-soft); padding: clamp(1.4rem, 3vw, 2rem);
}
.kauf-preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem .9rem; }
.kauf-preis .alt { color: var(--ink-muted); text-decoration: line-through; }
.kauf-preis strong {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em;
  font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1;
}
.kauf-kasten .kurs-incl { margin-top: 1.4rem; }

/* Das Häkchen auf der Bestätigungsseite */
.siegel {
  display: inline-grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: #DDEEE6; color: var(--ok);
  font-size: 2rem; font-weight: 700;
}

/* --- Rechtstexte ----------------------------------------------------------
   Impressum, AGB, Datenschutz. Lange Textstrecken, die niemand zum Spaß
   liest: schmale Spalte, großzügige Zeilenhöhe, klare Zwischenüberschriften.
   Die Seiten bekommen bewusst keine Animation – wer hier landet, sucht
   eine Information und will sie sofort sehen.
-------------------------------------------------------------------------- */
.rechtstext {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}
.rechtstext > *:first-child { margin-top: 0; }

.rechtstext h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 3.2rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.rechtstext h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.rechtstext h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 2rem 0 .5rem;
}

.rechtstext p,
.rechtstext ul,
.rechtstext ol { margin: 0 0 1rem; }

.rechtstext ul,
.rechtstext ol { padding-left: 1.3rem; }
.rechtstext li { margin-bottom: .5rem; }

.rechtstext a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.rechtstext a:hover { color: var(--accent-deep); }

.rechtstext strong { color: var(--ink); font-weight: 700; }

/* Anschrift, Kontaktblock – wie abgetippt stehen lassen, nur ruhiger setzen */
.rechtstext address {
  font-style: normal;
  margin: 0 0 1.4rem;
  line-height: 1.7;
}

/* Hervorgehobener Kasten, z. B. die Widerrufsbelehrung. Die muss sich vom
   Fließtext abheben, weil sie rechtlich eine eigene Einheit ist. */
.rechtskasten {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--paper-soft);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  margin: 1.6rem 0 2rem;
}
.rechtskasten > *:first-child { margin-top: 0; }
.rechtskasten > *:last-child  { margin-bottom: 0; }
.rechtskasten h3 { margin-top: 1.6rem; }
.rechtskasten h3:first-child { margin-top: 0; }

/* Inhaltsverzeichnis oben auf den langen Seiten */
.rechts-toc {
  display: flex; flex-wrap: wrap; gap: .5rem .7rem;
  margin: 0 0 3rem; padding: 0; list-style: none;
  max-width: 68ch;
}
.rechts-toc a {
  display: inline-block;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .4em 1em;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.rechts-toc a:hover { background: var(--accent-soft); border-color: var(--accent); }

.rechtstext :target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* --- Vorführband ----------------------------------------------------------
   Nur auf der Vorführumgebung (Port 8010), eingehängt von ui.js. Klebt unten
   am Fensterrand, damit es die Kopfzeile nicht verdeckt, und ist bewusst
   unübersehbar: Wer hier bucht, soll wissen, dass nichts davon echt ist.
-------------------------------------------------------------------------- */
.demo-band {
  position: fixed; inset: auto 0 0 0; z-index: 9999;
  background: #7A1D2B; color: #fff;
  font-size: var(--fs-small); line-height: 1.4;
  text-align: center; padding: .7em 1.2em;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.demo-band strong { letter-spacing: .08em; text-transform: uppercase; }

/* Platz schaffen, damit das Band den Footer nicht überdeckt */
body.hat-demo-band { padding-bottom: 3.2rem; }

@media print { .demo-band { display: none; } }