/* Schicht 4: Seminar-Detail-Seiten */

/* ── Intro / Für-wen ──────────────────────────────── */
.seminar-intro {
  padding-block: var(--section-gap);
}

.seminar-intro__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: start;
}

.seminar-intro__text p {
  color: var(--color-text-soft);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.seminar-intro__fuer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.seminar-intro__fuer h2 {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  margin-bottom: 1rem;
  color: var(--color-accent);
}

.seminar-intro__fuer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.seminar-intro__fuer li {
  padding-left: 1.25rem;
  position: relative;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.seminar-intro__fuer li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.seminar-intro__etabliert {
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

/* ── Modul-Grid ───────────────────────────────────── */
.seminar-module {
  padding-block: var(--section-gap);
  background: var(--color-surface);
}

.seminar-module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.seminar-modul-card {
  padding: 2rem;
  position: relative;
}

.seminar-modul-num {
  display: block;
  font-size: 3rem;
  font-family: var(--font-display);
  color: rgba(212, 115, 42, 0.2);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.seminar-modul-card h3 {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  margin-bottom: 0.75rem;
}

.seminar-modul-card p {
  color: var(--color-text-soft);
  line-height: 1.65;
}

/* ── Methode ──────────────────────────────────────── */
.seminar-methode {
  padding-block: calc(var(--section-gap) * 0.7);
}

.seminar-methode p {
  color: var(--color-text-soft);
  line-height: 1.7;
  margin-bottom: 0.75rem;
  max-width: 72ch;
}

/* ── Rahmen & Preise ──────────────────────────────── */
.seminar-rahmen {
  padding-block: var(--section-gap);
}

.seminar-rahmen h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--font-display);
  margin-bottom: 2rem;
}

.seminar-rahmen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.seminar-rahmen-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.seminar-rahmen-item strong {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
}

.seminar-rahmen-item span {
  font-size: var(--text-base);
  color: var(--color-text);
}

.seminar-rahmen-include {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: 1.7;
}

/* ── Bildungsscheck-Box ───────────────────────────── */
.bildungsscheck-box {
  margin-block: 0;
  padding-block: calc(var(--section-gap) * 0.5);
}

/* ── Modul-Accordion (SDC) ────────────────────────── */
.modul-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modul-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.modul-item__header {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto 24px;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-base);
}

.modul-item__header:hover { background: rgba(255,255,255,0.03); }

/* Variante ohne Laufnummern (SyDC: Bausteine bewusst unnummeriert) */
.modul-accordion--plain .modul-item__header { grid-template-columns: 1fr auto 24px; }

.modul-item__num {
  font-size: 1.75rem;
  font-family: var(--font-display);
  color: rgba(212, 115, 42, 0.3);
  font-weight: 600;
  line-height: 1;
}

.modul-item__title {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  line-height: 1.2;
}

.modul-item__leitung {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  text-align: right;
}

.modul-item__icon {
  font-size: 1.25rem;
  color: var(--color-accent);
  transition: transform var(--transition-base);
}

.modul-item__header[aria-expanded="true"] .modul-item__icon {
  transform: rotate(45deg);
}

.modul-item__body { overflow: hidden; }

.modul-item__content {
  padding: 0 1.5rem 1.5rem;
  color: var(--color-text-soft);
  line-height: 1.7;
}

.modul-item__content p + p { margin-top: 0.75rem; }
.modul-item__content ul { margin-top: 0.5rem; padding-left: 1.5rem; }
.modul-item__content li { margin-bottom: 0.35rem; }

/* ── Breadcrumb ───────────────────────────────────── */
.breadcrumb {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: 0.75rem;
}

.breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--container-max, 1200px);
  padding-inline: var(--container-padding, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
}

.breadcrumb__item { display: flex; align-items: center; gap: 0.5rem; }

.breadcrumb__item a {
  color: var(--color-text-soft);
  text-decoration: none;
}

.breadcrumb__item a:hover { color: var(--color-accent); }

.breadcrumb__item [aria-current="page"] {
  color: var(--color-text);
}

.breadcrumb__sep { color: var(--color-text-soft); opacity: 0.4; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .seminar-intro__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .seminar-module-grid,
  .seminar-rahmen-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Logo-Wasserzeichen hinter den einzelnen Modulen ──────────────────
   Ingo-Wunsch 2026-08-25, praezisiert 2026-08-31: nicht hinter der
   Sektionsueberschrift (dort stand es vorher gross und angeschnitten),
   sondern dezent hinter JEDEM einzelnen Modul.
   Dazu: sanft einblenden beim Hereinscrollen und ganz langsam schweben.
   Bewusst zurueckhaltend — das Emblem soll man ahnen, nicht lesen. */
.modul-item__content,
.seminar-modul-card,
.sdc-modul-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.modul-item__content::after,
.seminar-modul-card::after,
.sdc-modul-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2.5rem;
  width: min(190px, 42%);
  aspect-ratio: 496 / 512;
  background: url('../../img/imc-logo-512.png') no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transform: translateY(-50%) rotate(-6deg);
  /* Einblenden: startet erst, wenn die Karte per .reveal sichtbar geworden ist. */
  transition: opacity 1.4s var(--ease-soft) 0.25s;
}

/* Sichtbar, sobald die Karte im Blick ist. .reveal bekommt beim Hereinscrollen
   .is-visible; Karten ohne .reveal (z. B. Akkordeon-Eintraege) blenden direkt ein. */
.modul-item__content::after,
.reveal.visible.seminar-modul-card::after,
.reveal.visible.sdc-modul-card::after {
  opacity: 0.06;
  animation: imc-mark-schweben 18s ease-in-out infinite;
}

/* Sehr kleine Amplitude: es soll leben, nicht wackeln. */
@keyframes imc-mark-schweben {
  0%, 100% { transform: translateY(-50%) rotate(-6deg) translateX(0); }
  50%      { transform: translateY(calc(-50% - 7px)) rotate(-4.5deg) translateX(-5px); }
}

/* Dunkles Theme: Emblem bleibt orange (kein invert mehr seit Logo 2026-10,
   invert machte aus Orange ein Hellblau), nur die Deckkraft wird angepasst. */
:root[data-theme="dunkel"] .modul-item__content::after,
:root[data-theme="dunkel"] .reveal.visible.seminar-modul-card::after,
:root[data-theme="dunkel"] .reveal.visible.sdc-modul-card::after {
  opacity: 0.07;
}

/* Auf dem Handy kleiner und weiter aussen, aber sichtbar — vorher war es
   unter 900px komplett aus, und die meisten Besucher kommen ueber das Handy. */
@media (max-width: 700px) {
  .modul-item__content::after,
  .seminar-modul-card::after,
  .sdc-modul-card::after {
    width: 130px;
    right: -2rem;
  }
}

/* Kein Schweben, wenn der Nutzer reduzierte Bewegung wuenscht — dann steht das
   Emblem einfach ruhig da. */
@media (prefers-reduced-motion: reduce) {
  .modul-item__content::after,
  .seminar-modul-card::after,
  .sdc-modul-card::after {
    animation: none;
    transition: none;
    opacity: 0.06;
  }
}

/* ── Konditionen-Block (2026-08-30) ───────────────────────────────────
   Beantwortet die Kostenfrage, ohne einen Preis zu nennen. */
.konditionen {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.konditionen__inner {
  max-width: 68ch;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}

.konditionen__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  margin: 0 0 0.75rem;
}

.konditionen__text {
  color: var(--color-text-soft);
  line-height: 1.75;
  margin: 0 0 1rem;
}

.konditionen__hinweis {
  margin: 0 0 1rem;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

/* ── Logo-Wasserzeichen hinter dem einzelnen Seminar ──────────────────
   Ingo- und Ramon-Wunsch, präzisiert 2026-08-31: Das Emblem gehört direkt hinter
   das Seminar selbst, also in den Kopfbereich der Seminarseite.
   Eigenes Element statt Pseudo-Element, weil `.section-blob::before/::after`
   im Projekt schon für den Hintergrund-Verlauf belegt sind (dort verschwand es
   in der ersten Umsetzung spurlos). Gleiches Muster wie `.vita-teaser__mark`.
   Nur auf Seminarseiten, nicht auf den Zielgruppenseiten, die denselben
   Hero-Baustein verwenden. */
.seminar-hero__mark { display: none; }

[class*="page-seminar-"] .seminar-hero__mark {
  display: block;
  position: absolute;
  top: 50%;
  right: -3%;
  width: min(420px, 36vw);
  aspect-ratio: 496 / 512;
  background: url('../../img/imc-logo-512.png') no-repeat center / contain;
  transform: translateY(-50%) rotate(-6deg);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: imc-hero-mark-auf 1.6s var(--ease-soft) 0.4s forwards,
             imc-mark-schweben 22s ease-in-out 2s infinite;
}

/* Inhalt bleibt über dem Emblem */
[class*="page-seminar-"] .seminar-hero__inner { position: relative; z-index: 1; }

@keyframes imc-hero-mark-auf        { to { opacity: 0.16; } }
@keyframes imc-hero-mark-auf-dunkel { to { opacity: 0.11; } }

/* Steht rechts ein Foto, muss das Emblem in die Textspalte ausweichen. Dort sitzt
   es tiefer (hinter Meta-Box und Buttons statt hinter dem Fliesstext) und ist
   zurueckhaltender, damit der Text ruhig bleibt. Sichtprüfung 2026-08-31. */
[class*="page-seminar-"] .seminar-hero:has(.seminar-hero__media) .seminar-hero__mark {
  right: auto;
  left: 24%;
  top: 64%;
  width: min(260px, 20vw);
  animation: imc-hero-mark-auf-leise 1.6s var(--ease-soft) 0.4s forwards,
             imc-mark-schweben 22s ease-in-out 2s infinite;
}
:root[data-theme="dunkel"] [class*="page-seminar-"] .seminar-hero:has(.seminar-hero__media) .seminar-hero__mark {
  animation: imc-hero-mark-auf-leise-dunkel 1.6s var(--ease-soft) 0.4s forwards,
             imc-mark-schweben 22s ease-in-out 2s infinite;
}
@keyframes imc-hero-mark-auf-leise        { to { opacity: 0.10; } }
@keyframes imc-hero-mark-auf-leise-dunkel { to { opacity: 0.08; } }

/* Dunkles Theme: Emblem bleibt orange, nur leiser einblenden. */
:root[data-theme="dunkel"] [class*="page-seminar-"] .seminar-hero__mark {
  animation: imc-hero-mark-auf-dunkel 1.6s var(--ease-soft) 0.4s forwards,
             imc-mark-schweben 22s ease-in-out 2s infinite;
}

@media (max-width: 700px) {
  [class*="page-seminar-"] .seminar-hero__mark {
    width: 210px;
    right: -12%;
    top: 24%;
  }
  [class*="page-seminar-"] .seminar-hero:has(.seminar-hero__media) .seminar-hero__mark {
    left: auto; right: -12%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [class*="page-seminar-"] .seminar-hero__mark { animation: none; opacity: 0.16; }
  :root[data-theme="dunkel"] [class*="page-seminar-"] .seminar-hero__mark { opacity: 0.11; }
}

/* ── Na(h)Klar (2026-10-13) ───────────────────────────────────────────
   ANKER-Modell als Herzstück der Seite: fünf Buchstaben, die von oben
   gelesen das Wort ANKER ergeben. Desktop fünf Spalten, darunter Zeilen
   mit dem Buchstaben links. Das Logo ist selbst ein Anker, darum trägt
   der Block bewusst die Logofarbe. */
.anker {
  padding-block: var(--section-gap);
}
.anker__head {
  max-width: 62ch;
  margin-bottom: 2.75rem;
}
.anker__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.anker__lead {
  color: var(--color-text-soft);
  font-size: var(--text-lg);
  line-height: 1.65;
}
.anker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
}
.anker__item {
  padding: 1.75rem 1.25rem 1.5rem;
  border-right: 1px solid var(--color-border);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.anker__item:first-child { padding-left: 0; }
.anker__item:last-child  { border-right: 0; padding-right: 0; }
.anker__letter {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 0.9;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.anker__word {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: 0.4rem;
  hyphens: auto;
}
.anker__leitsatz {
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.45;
  margin-bottom: 0.6rem;
}
.anker__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-soft);
}
.anker__foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  text-align: center;
}

@media (max-width: 1000px) {
  .anker__list { grid-template-columns: 1fr; border-top: 0; }
  .anker__item,
  .anker__item:first-child,
  .anker__item:last-child {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    column-gap: 1.25rem;
    padding: 1.25rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .anker__letter {
    grid-row: 1 / span 3;
    font-size: 3.75rem;
    margin-bottom: 0;
  }
}

/* Drei Tage */
.nahklar-tage {
  padding-block: var(--section-gap);
}
.nahklar-tage__lead {
  color: var(--color-text-soft);
  max-width: 62ch;
  line-height: 1.65;
}
.nahklar-tage__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.nahklar-tag {
  padding: 2rem;
}
.nahklar-tag__nr {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.nahklar-tag__titel {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: 0.35rem;
}
.nahklar-tag__claim {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.nahklar-tag ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.nahklar-tag li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.nahklar-tag li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Formate */
.nahklar-formate {
  padding-block: var(--section-gap);
  background: var(--color-surface);
}
.nahklar-formate__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.nahklar-format {
  border-top: 2px solid var(--color-accent);
  padding-top: 1.25rem;
}
.nahklar-format__dauer {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}
.nahklar-format h3 {
  font-size: var(--text-lg);
  margin-bottom: 0.5rem;
}
.nahklar-format p:last-child {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.seminar-methode .nahklar-claim {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .nahklar-tage__grid,
  .nahklar-formate__grid { grid-template-columns: 1fr; }
}

/* ANKER-Grafik (Ingo, 15.10.2026): rundes Emblem zwischen Einleitung und Liste */
.anker__figure { margin: 0 auto 2.5rem; max-width: 300px; }
.anker__figure img { display: block; width: 100%; height: auto; border-radius: 50%; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
[data-theme="dunkel"] .anker__figure img { box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.anker__by { font-size: 0.45em; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-left: 0.4em; vertical-align: 0.35em; }