/* Zeichenfabrik -- Kursdetailseite, sektionsspezifische Stile. */
/* .breadcrumb* wurde nach basis.css verschoben (jetzt auch vom Buchungsformular genutzt). */

/* Das Hinweisband der Vorschau steht seit 24.10.2026 als `.vorschau-banner` in basis.css. */

/* ---- Hero -- oben durch die Breadcrumb-Trennlinie, unten durch die eigene begrenzt ---- */
.detail-hero {
  display: grid;
  gap: 24px;
  border-bottom: 1px solid var(--farbe-rand);
}
.detail-hero-pad { padding: 32px 24px; display: flex; flex-direction: column; justify-content: center; }
.detail-badges { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.detail-hero h1 { letter-spacing: -0.02em; }
.detail-untertitel { margin: 22px 0 0; font-size: 19px; line-height: 1.55; color: #4A463F; max-width: 30em; }
/* Das Inhaltsverzeichnis der Kursseite (Karte 576, E1): Bild gibt der Baustein „Nummerierte Liste“
   (`.menue-liste--klein`, basis.css), hier nur der Abstand zum Untertitel. Die Titelgröße gibt
   „Seitentitel im Kopf“ (`.seitentitel-kopf`, basis.css), nicht diese Datei. */
.detail-verzeichnis { margin-top: 30px; }
.detail-hero-bild { position: relative; min-height: 260px; }
.detail-hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Unter 1024 px steht das Bild zuerst (Karte 576, E1, Inhaber 06.11.2026: „Telefon Bild zuerst“). Die
   Dozent*innen-Seite hat es schon im Markup zuerst, für sie ändert sich nichts. Die Spielart
   `--streifen` (Kursseite) macht daraus einen Streifen 16 : 9; der Bildausschnitt des Kurses gilt
   (basis.css). Mit festem Seitenverhältnis verschiebt das Bild nichts (CLS 0). */
@media (max-width: 1023px) {
  .detail-hero-bild { order: -1; }
  .detail-hero--streifen .detail-hero-bild { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .detail-hero { grid-template-columns: 1.05fr 0.95fr; gap: 0; }
  .detail-hero-pad { padding: 56px 56px 52px; }
  /* Trennlinie nur in der Zwei-Spalten-Ansicht -- auf schmalen Bildschirmen wirkte der
     border-left als 1px-Strich am linken Bildrand (Abnahme R2 K1/M5). */
  .detail-hero-bild { min-height: 440px; border-left: 1px solid var(--farbe-rand); }
}

/* ---- Body: Hauptspalte + Preisbox ---- */
.detail-body-sektion { border-bottom: 1px solid var(--farbe-rand); }
.detail-koerper { display: grid; grid-template-columns: 1fr; }
.detail-hauptspalte { padding: 32px 24px; }
/* Karte 585: Jeder Abschnitt trägt den Kapitelkopf (basis.css); hier nur der Abstand zwischen den Kapiteln. */
.detail-abschnitt { margin-bottom: 56px; }
@media (max-width: 767px) { .detail-abschnitt { margin-bottom: 44px; } }
/* `.detail-label` steht seit Karte 571 in basis.css: Kontakt und Kursberatung laden diese Datei nicht. */
/* Ohne Termin (Karte 576, E4): die ähnlichen Kurse unter dem Satz; nur der Abstand gehört der Kursseite. */
#termine > .warteliste-alternativen { margin-top: 32px; }
/* K4 (Karte 576): rund 70 Zeichen je Zeile — bis 06.11.2026 36em. Zieht mit: Material-Text, Material-Hinweis. */
.detail-inhalt-text { font-size: 18px; line-height: 1.7; color: #37342D; max-width: 31em; }
.detail-inhalt-text p { margin: 0 0 40px; }
.detail-inhalt-text :is(h1, h2, h3) { margin: 1.4em 0 0.5em; font-size: 1.2em; }
.detail-inhalt-text--material { font-size: 16px; line-height: 1.65; }
.detail-inhalt-text--material p { margin: 0 0 16px; }

.lernpunkte-liste { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 14px 28px; max-width: 44em; }
.lernpunkte-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid #EFECE5;
  padding-top: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: #37342D;
}
.lernpunkt-pfeil { color: var(--farbe-teal); flex: 0 0 auto; display: inline-flex; margin-top: 2px; }
@media (min-width: 700px) { .lernpunkte-liste { grid-template-columns: 1fr 1fr; } }

.material-status { font-weight: 700; margin: 0 0 10px; }
/* „Wer dich anleitet“ (Karte 576, E1): die Namen, bis E6 die Werkproben dazubaut. */
.detail-leitung { margin: 0; font-size: 18px; font-weight: 700; }
/* „Wer dich anleitet“ (Karte 585): Den Baustein „Kursleitung vorgestellt“ zeichnet basis.css; hier nur der Abstand
   zwischen zwei Leitungen. */
.leitung-vorgestellt + .leitung-vorgestellt { margin-top: 44px; }
/* K7 (Karte 576) gab „Termine“ eigenen Abstand nach oben; seit Karte 585 trennt jeder Kapitelkopf gleich. */

/* ---- Termine ---- */
.termin-zeile { border: 1px solid var(--farbe-rand); background: #fff; max-width: 44em; margin-bottom: 12px; }
.termin-zeile[role="radio"] { cursor: pointer; }
/* Der Fokus-Umriss der Terminzeile kommt aus basis.css (`:focus-visible`). */
.termin-zeile.aktiv { border-color: var(--farbe-teal); background: var(--farbe-teal-flaeche); }
.termin-kopfzeile { display: flex; align-items: center; gap: 16px; padding: 16px 18px; flex-wrap: wrap; }
/* Das Wochentag-Feld der Terminzeile: `.wochentag-feld` in basis.css (Werkbank 373). */
.termin-info { flex: 1; min-width: 140px; }
.termin-zeit { font-weight: 700; font-size: 16px; margin: 0; }
.termin-meta { font-size: 13px; color: #6B665E; margin: 2px 0 0; }
/* Fall 227: der Schwerpunkt des Termins (und die Leitung, wenn sie wechselt) — zuerst. */
.termin-schwerpunkt { font-size: 14px; color: #3B3831; margin: 0 0 2px; }
/* Fall 250/249: Beschreibung und Material des Termins — unter dem Schwerpunkt, leiser. */
.termin-beschreibung { font-size: 14px; line-height: 1.5; color: #4A463F; margin: 8px 0 4px; max-width: 42em; }
.termin-material { font-size: 13px; color: #6B665E; margin: 0 0 4px; }
.termin-materialliste { font-size: 13px; color: #6B665E; margin: 0 0 6px; }
.termin-materialliste summary { cursor: pointer; }
.termin-frei { font-family: var(--schrift-mono); font-size: 11px; color: var(--farbe-muted); white-space: nowrap; margin-right: 4px; }
/* K2 (Karte 576, E3): Das Platz-Etikett steht in der Zeile im Fluss, nicht oben rechts wie auf der Kachel; die
   Größe kommt aus der Quelle (basis.css). relative statt static: Der Klebestreifen braucht ein positioniertes Blatt. */
.termin-kopfzeile .karte-warteliste, .termin-kopfzeile .karte-plaetze { position: relative; top: auto; right: auto; white-space: nowrap; }
.termin-buchen-btn {
  border: none;
  background: var(--farbe-teal);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 15px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: filter 0.15s ease;
}
.termin-buchen-btn:not([disabled]):hover { filter: brightness(1.12); }
.termin-buchen-btn[disabled] { cursor: default; opacity: 0.92; }

/* ---- Aufklapper der Kursseite (Karte 458, 29.10.2026) ----
   Die cremefarbene Leiste „… anzeigen ▾“ / „… ausblenden“, ohne Skript (<details>). EIN Baustein
   für die Terminzeile („Alle 4 Kurstage anzeigen“) und die Stimmen („3 weitere Stimmen anzeigen“);
   bis dahin hießen die Klassen nach den Kurstagen (.termin-kurstage summary, -label-an/-aus,
   .termin-chevron). Was er umschließt und wo er steht, bestimmt der Verwender. */
.aufklapper summary {
  list-style: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--farbe-creme);
  border-top: 1px solid #EFECE5;
  padding: 11px 18px;
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--farbe-teal);
}
.aufklapper summary::-webkit-details-marker { display: none; }
.aufklapper-aus { display: none; }
.aufklapper[open] .aufklapper-an { display: none; }
.aufklapper[open] .aufklapper-aus { display: inline; }
.aufklapper-pfeil { display: inline-block; transition: transform 0.18s ease; }
.aufklapper[open] .aufklapper-pfeil { transform: rotate(180deg); }
/* Frei stehend (nicht in einer gerahmten Zeile wie der Terminzeile): mit eigenem Rahmen. */
.aufklapper--frei summary { border: 1px solid #EFECE5; }
.termin-kurstage-liste { border-top: 1px solid #EFECE5; padding: 6px 18px 14px; }
.termin-kurstag-zeile {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #F1EEE8;
}
.termin-kurstag-zeile:last-child { border-bottom: none; }
.termin-kurstag-nr { font-family: var(--schrift-mono); font-size: 11px; color: #B1936B; width: 34px; flex: 0 0 auto; }
.termin-kurstag-datum { flex: 1; font-size: 14px; font-weight: 600; color: #37342D; }
.termin-kurstag-zeit { font-size: 14px; color: #37342D; white-space: nowrap; }

/* ---- Stimmen aus dem Kurs (Karte 458, Variante A) ----
   Die Karten selbst sind der Baustein „Stimme“ (basis.css); hier steht nur die Nachbarschaft:
   Abstand nach oben (vorher am Baustein: margin 52px 0 12px), die Breite der großen Karte für den
   Aufklapper und die Liste der weiteren Stimmen. */
.kurs-stimmen { margin: 52px 0 12px; max-width: 39em; }
.kurs-stimmen > .aufklapper { margin-top: 26px; }
.kurs-stimmen-liste { display: grid; gap: 14px; padding-top: 14px; }
.kurs-stimmen .leiser-hinweis { margin-top: 20px; }

/* ---- Preisbox (Sidebar) ---- */
.detail-sidebar { padding: 28px 24px; background: #F4F1EA; }
.sidebar-preis-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-muted);
  margin: 0 0 6px;
}
.sidebar-preis { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.sidebar-preis-hinweis { font-size: 12px; color: var(--farbe-muted); margin: 6px 0 0; }
.sidebar-kennzahlen {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 22px;
  padding: 18px 0;
  border-top: 1px solid #E1DCD1;
  border-bottom: 1px solid #E1DCD1;
  font-size: 14px;
}
.sidebar-kennzahlen div { display: flex; justify-content: space-between; gap: 16px; }
.sidebar-kennzahlen div[hidden] { display: none; }   /* „Plätze“ ohne Höchstzahl (Karte 576) */
.sidebar-kennzahlen span:first-child { color: #6B665E; flex: none; }
/* Rechtsbündig auch beim Umbruch (Fall 210): Der Ort ist seit 29.09.2026 die Adresse und kann
   zwei Zeilen brauchen -- ohne Abstand und Ausrichtung klebte er an seiner Beschriftung. */
.sidebar-kennzahlen span:last-child { font-weight: 600; text-align: right; }

/* Fassung A1 (Design 06.11.2026, Inhaber gewählt): unter den Kennzahlen alles LINKS, an einem Rand mit ihren
   Beschriftungen, in 14 px; nur „Kein Account nötig“ (die Unterschrift des Knopfs, ab 1024 px) 13 px leise. Bis dahin
   stand ein Teil mittig unter dem Knopf, ein Teil links unter dem Preis — unter 1024 px fehlen beide, und die
   Ausrichtungen standen ohne Anlass da (vier Stimmen, zwei Fluchten). Wächter: website.tests.DeinTerminTests. */
.sidebar-fussnote { font-size: 13px; color: var(--farbe-muted); margin: 12px 0 0; line-height: 1.5; }

/* Die Zusagen: zwei gleich gebaute Paare — der Satz in Tinte, darunter der Nachsatz (leise bzw. als Weg mit Pfeil). */
.sidebar-zusagen { display: grid; gap: 12px; margin-top: 22px; }
.sidebar-zusagen:not(:has(> :not([hidden]))) { display: none; }   /* kein Termin mit Teilzahlung, kein Geld zurück */
.sidebar-zusage { display: block; margin: 0; font-size: 14px; line-height: 1.5; color: var(--farbe-muted); text-decoration: none; }
.sidebar-zusage[hidden] { display: none; }
.sidebar-zusage strong { display: block; font-weight: 600; color: var(--farbe-tinte); }

/* Die Wege: eine Linie darüber, dann Weiterempfehlen (eine Handlung, Knopf) und die Fragen (ein `<a>`, Weg mit Pfeil
   aus basis.css). Beide links, Petrol 14/600, Tippfläche 44 px. */
.sidebar-wege { display: grid; justify-items: start; margin-top: 20px; padding-top: 8px; border-top: 1px solid #E1DCD1; }
.sidebar-faq-link { min-height: 44px; }
.sidebar-teilen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--farbe-teal);
}
.sidebar-teilen .icon { width: 15px; height: 15px; }
.sidebar-teilen:hover { color: #2b4e54; }

@media (min-width: 1024px) {
  .detail-koerper { grid-template-columns: 1fr 360px; }
  .detail-hauptspalte { padding: 52px 56px 60px; border-right: 1px solid var(--farbe-rand); }
  /* Klebt bündig an der Unterkante des Kopfs (`--kopf-hoehe`, EINE Größe): Bis 06.11.2026 stand hier „78px“
     gegen 73 px Kopf, durch den Spalt sah man beim Scrollen den Inhalt dahinter. */
  .detail-sidebar { position: sticky; top: var(--kopf-hoehe); align-self: start; padding: 34px 28px; }
}

/* ---- Weitere Kurse ---- */
.detail-weitere { padding: 32px 24px 56px; border-bottom: 1px solid var(--farbe-rand); }
.detail-weitere h2 { margin: 0 0 28px; font-size: 28px; }
/* Das Kachel-Raster `.kurs-karten` steht in basis.css (Werkbank 374). */
@media (min-width: 1024px) { .detail-weitere { padding: 52px 56px 64px; } }

/* ---- Mobile Bottom-Bar ---- */
.mobile-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: fixed;
  /* Über dem Cookie-Hinweis, solange er steht (Befund 133, `--unten-belegt` in basis.css). */
  left: 0; right: 0; bottom: var(--unten-belegt, 0px);
  background: #fff;
  border-top: 1px solid var(--farbe-rand);
  padding: 12px 24px;
  z-index: 15;
}
.mobile-bottom-bar .sidebar-preis { font-size: 20px; }
.mobile-bottom-bar .sidebar-preis-hinweis { margin: 0; }
.sidebar-preis-hinweis:empty { display: none; } /* kostenloser Termin: kein Hinweis, kein Abstand */
/* Karte 576, E3: Zeile 2 der Leiste, „ab Mo, 9. Nov. · inkl. 20 % USt“, als ein Satz: Bricht er, bricht der
   Hinweis, das Datum bleibt ganz. */
.mobilebar-zeile { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--farbe-muted); }
.mobilebar-zeile > p { display: inline; }
.mobilebar-datum { white-space: nowrap; }
.mobilebar-datum:empty { display: none; }
.mobilebar-datum:has(+ .sidebar-preis-hinweis:not(:empty))::after { content: "\00a0·"; }   /* das Leerzeichen danach steht im Markup */
@media (min-width: 1024px) {
  .mobile-bottom-bar { display: none; }
}
@media (max-width: 1023px) {
  body:has(.mobile-bottom-bar) { padding-bottom: 84px; }
  /* „Dein Termin“ direkt nach dem Kopf, ohne Preis und großen Knopf: die Leiste unten trägt beide (Karte 576, E3,
     Design Teil 7). Mit dem Knopf geht sein Satz „Kein Account nötig …“ (Nachtrag 06.11.2026): er spricht vom Knopf,
     also gilt für beide EINE Regel. Lage und Sichtbarkeit, nicht Bild. */
  .detail-sidebar--oben { order: -1; }
  .sidebar-preis-kopf, .sidebar-cta, .sidebar-fussnote { display: none; }
  .sidebar-kennzahlen { margin-bottom: 0; }   /* die Zusagen halten den Abstand selbst (Fassung A1) */
}

/* ==== Impressionen & Teilnehmer:innen-Arbeiten (Galerie „Aus dem Kurs") ==== */
/* Die leise Hinweiszeile (Karte 458: EIN Baustein für Galerie und Stimmen, vorher nur
   .kurs-impressionen .impression-hinweis). Den Abstand gibt der Verwender. */
.leiser-hinweis {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--farbe-muted);
  max-width: 46em;
}
.kurs-impressionen .leiser-hinweis { margin: 0 0 22px; }
.impression-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 960px) { .impression-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .impression-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .impression-grid { grid-template-columns: 1fr; } }

.impression-kachel {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  background: #fff;
  border: 1px solid var(--farbe-rand);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.impression-kachel:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.28); }
/* Der Fokus-Umriss der Kachel kommt aus basis.css (`:focus-visible`). */
.impression-bild {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--farbe-rand);
}
.impression-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.impression-kachel:hover .impression-bild img { transform: scale(1.05); }
.impression-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 15, 0.55);
  color: #fff;
  font-size: 14px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.impression-kachel:hover .impression-zoom, .impression-kachel:focus-visible .impression-zoom { opacity: 1; }
.impression-caption {
  display: block;
  padding: 10px 12px 12px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--farbe-tinte);
}

/* ---- Lightbox (Muster wie Dozenten-Werkproben) ---- */
.impression-lightbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(20, 18, 15, 0.84);
  animation: impressionFade 0.2s ease;
}
.impression-lightbox[hidden] { display: none; }
@keyframes impressionFade { from { opacity: 0; } to { opacity: 1; } }
.impression-lightbox-schliessen {
  position: fixed;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.impression-lightbox-schliessen:hover { background: rgba(0, 0, 0, 0.55); }
.impression-lightbox-schliessen { top: 22px; right: 26px; width: 44px; height: 44px; font-size: 26px; }
/* Weiterschalten: die Blätter-Knöpfe des Hauses, Lage .lightbox-blaettern (basis.css). */
.impression-lightbox-panel {
  display: flex;
  flex-direction: column;
  background: var(--farbe-creme);
  max-width: min(1000px, 90vw);
  max-height: 88vh;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  animation: impressionPanel 0.22s ease;
}
@keyframes impressionPanel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.impression-lightbox-bild { background: #0d1413; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.impression-lightbox-bild img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; }
.impression-lightbox-leiste {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--farbe-rand);
  min-height: 20px;
}
.impression-lightbox-caption { font-size: 15px; line-height: 1.35; color: var(--farbe-tinte); }
.impression-lightbox-pos { font-family: var(--schrift-mono); font-size: 12px; color: var(--farbe-muted); white-space: nowrap; }

/* ---- Auftakt zum Lehrgang (03.08.2026) ----
   Ein einzeln buchbares Lehrgangsmodul steht in der Kursuebersicht wie jeder andere Kurs.
   Dieser Kasten stellt den Zusammenhang her -- deshalb ganz oben und farbig abgesetzt, aber
   ohne Alarmton: Es ist ein Angebot, keine Warnung. Der Kicker erbt seine 12px aus basis.css;
   :not(.kicker) an der Textregel haelt das so (gleiche Falle wie einst bei .teaser-karte). */
.kurs-auftakt {
  margin: 0 0 40px;
  padding: 22px 24px;
  background: #EFF4F3;   /* heller Teal-Hauch, klar abgesetzt vom Creme der Seite */
  border-left: 4px solid var(--farbe-teal);
}
.kurs-auftakt-kicker { color: var(--farbe-teal); margin-bottom: 6px; }
.kurs-auftakt-titel { font-size: 22px; font-weight: 800; margin: 0 0 8px; line-height: 1.25; }
.kurs-auftakt p:not(.kicker) { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #37342d; }
.kurs-auftakt-entwurf { color: #8a6d3b; font-style: italic; }
.kurs-auftakt-knopf { margin-top: 4px; }