/* ==========================================================================
   VESSÁRA – Alchemie des Herzens
   CI-Stylesheet für LifterLMS  ·  helle Variante
   --------------------------------------------------------------------------
   Passt sich der bestehenden Seite an: heller Grund, Bordeaux als Akzent.
   Setzt bewusst keine großflächigen dunklen Hintergründe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */

:root {
  --vess-bordeaux-deep: #4f1019;
  --vess-bordeaux:      #6d1621;
  --vess-red-deep:      #831a19;
  --vess-red:           #c83d43;
  --vess-cream:         #d6cbb8;
  --vess-brown:         #5d472b;
  --vess-gold:          #b8923f;

  /* Helle Flächen */
  --vess-paper:         #ffffff;
  --vess-paper-warm:    #faf7f3;
  --vess-paper-tint:    #f2ece4;

  /* Text auf hellem Grund – alle über 8:1 */
  --vess-ink:           #4f1019;
  --vess-ink-soft:      #6d1621;
  --vess-ink-mute:      #5d472b;

  --vess-line:          rgba(79, 16, 25, 0.14);
  --vess-line-strong:   rgba(79, 16, 25, 0.28);

  --phase-nigredo:      #4f1019;
  --phase-albedo:       #5d472b;
  --phase-citrinitas:   #b8923f;
  --phase-rubedo:       #c83d43;

  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --step-xs: 0.5rem;
  --step-s:  0.875rem;
  --step-m:  1.5rem;
  --step-l:  2.5rem;
}

/* --------------------------------------------------------------------------
   2. Titel
   -------------------------------------------------------------------------- */

.single-course .entry-title,
.single-lesson .entry-title,
.llms-lesson-title,
.llms-section-title,
.llms-sd-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--vess-ink);
  line-height: 1.15;
}

.single-course .entry-title,
.single-lesson .entry-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: var(--step-xs);
}

.vessara-beiname {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--vess-ink-mute);
  margin: 0 0 var(--step-l);
}

/* --------------------------------------------------------------------------
   3. Lehrplan
   -------------------------------------------------------------------------- */

.llms-syllabus-wrapper {
  background: transparent;
  margin-top: var(--step-l);
}

/* Abschnittsüberschrift: schmale Linie statt Farbblock */
.llms-syllabus-wrapper .llms-section-title,
.llms-syllabus-wrapper h3.llms-h3 {
  background: transparent;
  color: var(--vess-ink);
  font-size: 1.5rem;
  padding: 0 0 var(--step-s) 0;
  margin: var(--step-l) 0 var(--step-m);
  border-bottom: 1px solid var(--vess-line-strong);
}

/* --------------------------------------------------------------------------
   4. Lektionskacheln
   --------------------------------------------------------------------------
   Wichtig: LifterLMS setzt den weißen Hintergrund auf .llms-lesson-preview
   UND auf das innere .llms-lesson-link. Beide müssen adressiert werden,
   sonst steht helle Schrift auf weißem Grund.
   -------------------------------------------------------------------------- */

.llms-syllabus-wrapper .llms-lesson-preview {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 var(--step-xs);
}

.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-link {
  display: block;
  position: relative;
  background: var(--vess-paper-warm);
  border: 1px solid var(--vess-line);
  border-left: 3px solid var(--phase, var(--vess-red-deep));
  border-radius: 0;
  padding: var(--step-m) var(--step-m) var(--step-m) calc(var(--step-m) + 4px);
  box-shadow: none;
  transition: background 200ms ease, border-color 200ms ease;
}

.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-link:hover {
  background: var(--vess-paper-tint);
  border-color: var(--vess-line-strong);
  border-left-color: var(--phase, var(--vess-red-deep));
}

.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-title {
  color: var(--vess-ink);
  font-size: 1.3125rem;
  margin: 0;
}

.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-excerpt,
.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-counter {
  font-family: var(--font-body);
  color: var(--vess-ink-mute);
  font-size: 0.8125rem;
}

.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-counter {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Badges: "FREE" und "Has Quiz" kommen ab Werk blau */
.llms-syllabus-wrapper .llms-free-lesson-svg,
.llms-syllabus-wrapper .llms-lesson-preview .llms-free-lesson,
.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-complete-placeholder,
.llms-syllabus-wrapper .llms-icon-free {
  background: var(--vess-brown);
  color: #fff;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Zustände
   -------------------------------------------------------------------------- */

.llms-lesson-preview.is-complete .llms-lesson-link {
  border-left-width: 5px;
}

.llms-lesson-preview.is-incomplete .llms-lesson-link { }

/* Gesperrt: ruhig, nicht alarmierend */
.llms-lesson-preview.llms-restricted .llms-lesson-link,
.llms-lesson-preview.is-locked .llms-lesson-link {
  background: transparent;
  border-style: dashed;
  border-left-style: solid;
  border-left-color: var(--vess-line-strong);
}

.llms-lesson-preview.llms-restricted .llms-lesson-title,
.llms-lesson-preview.is-locked .llms-lesson-title {
  color: var(--vess-ink-mute);
}

.llms-lesson-preview.llms-restricted .llms-lesson-link:hover,
.llms-lesson-preview.is-locked .llms-lesson-link:hover {
  background: transparent;
}

/* --------------------------------------------------------------------------
   6. Phasenfarbe
   --------------------------------------------------------------------------
   Body-Klasse phase-i … phase-iv setzen, dann färbt sich der linke Rand.
   -------------------------------------------------------------------------- */

body.phase-i   { --phase: var(--phase-nigredo); }
body.phase-ii  { --phase: var(--phase-albedo); }
body.phase-iii { --phase: var(--phase-citrinitas); }
body.phase-iv  { --phase: var(--phase-rubedo); }

/* --------------------------------------------------------------------------
   7. Fortschritt
   -------------------------------------------------------------------------- */

.llms-progress { margin: var(--step-m) 0 var(--step-l); }

.llms-progress .llms-progress-bar {
  background: var(--vess-line);
  height: 2px;
  border-radius: 0;
}

.llms-progress .progress-bar-complete {
  background: var(--phase, var(--vess-red-deep));
  height: 2px;
  border-radius: 0;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.llms-progress .llms-progress-caption {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--vess-ink-mute);
  margin-top: var(--step-xs);
}

/* --------------------------------------------------------------------------
   8. Access Plans
   --------------------------------------------------------------------------
   Kommt ab Werk in LifterLMS-Blau. Für Vessára später ohnehin ausgeblendet,
   da manuell eingeschrieben wird – hier trotzdem sauber gesetzt.
   -------------------------------------------------------------------------- */

.llms-access-plan .llms-access-plan-title {
  background: var(--vess-bordeaux-deep);
  color: var(--vess-cream);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  border-radius: 0;
  padding: var(--step-s) var(--step-m);
  text-transform: none;
}

.llms-access-plan .llms-access-plan-content,
.llms-access-plan .llms-access-plan-footer {
  background: var(--vess-paper-warm);
  border: 1px solid var(--vess-line);
  border-top: 0;
  border-radius: 0;
}

.llms-access-plan .llms-access-plan-pricing .price-regular {
  font-family: var(--font-display);
  color: var(--vess-ink);
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   9. Schaltflächen
   --------------------------------------------------------------------------
   Umriss statt Fläche. Ein gefüllter Block in fast schwarzem Bordeaux wog
   auf diesen hellen Seiten zu schwer; die Umrissform trägt dieselbe
   Erkennbarkeit bei einem Bruchteil des visuellen Gewichts und füllt sich
   erst beim Überfahren.

   Farbe ist #6d1621 statt #4f1019 – wärmer und näher am Granatapfel.
   Als Textfarbe auf Weiß liegt es bei rund 10:1, gefüllt mit weißer
   Schrift ähnlich hoch. #c83d43 wäre zu schwach: auf Weiß nur 4.99:1.

   3px Radius, nicht mehr. Ganz eckig wirkte hart, rund wirkte verspielt.
   -------------------------------------------------------------------------- */

.llms-button-action,
.llms-button-primary,
.llms-course-continue-button,
.llms-access-plan .llms-button-action,
.llms-field-button,
.vessara-upload button.llms-button-action {
  display: inline-block;
  /* Der Anmeldeknopf bekam von aussen eine feste Breite von 116px –
     zu wenig fuer "Anmelden" samt Innenabstand, der Text lief heraus.
     Breite richtet sich nach dem Inhalt, Umbruch ist unterbunden. */
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.2;
  padding: 1em 2.1em;
  border: 1px solid var(--vess-bordeaux);
  border-radius: 6px;
  background: transparent;
  color: var(--vess-bordeaux);
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.llms-button-action:hover,
.llms-button-primary:hover,
.llms-course-continue-button:hover,
.llms-access-plan .llms-button-action:hover,
.llms-field-button:hover,
.vessara-upload button.llms-button-action:hover {
  background: var(--vess-bordeaux);
  border-color: var(--vess-bordeaux);
  color: #fff;
}

.llms-button-action:active,
.llms-button-primary:active,
.vessara-upload button.llms-button-action:active {
  background: var(--vess-bordeaux-deep);
  border-color: var(--vess-bordeaux-deep);
  color: #fff;
}

.llms-button-secondary {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 1em 2.1em;
  border: 1px solid var(--vess-line-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--vess-ink-mute);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.llms-button-secondary:hover {
  background: var(--vess-paper-tint);
  border-color: var(--vess-ink-mute);
  color: var(--vess-ink);
}

/* --------------------------------------------------------------------------
   10. Katalog
   -------------------------------------------------------------------------- */

.llms-loop-item {
  border: 1px solid var(--vess-line);
  background: var(--vess-paper);
  border-radius: 0;
  overflow: hidden;
}

.llms-loop-item-content { padding: var(--step-m); }

.llms-loop-item-content .llms-loop-title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--vess-ink);
}

.llms-loop-item-content .llms-loop-title:hover { color: var(--vess-red-deep); }

/* --------------------------------------------------------------------------
   11. Dashboard
   -------------------------------------------------------------------------- */

.llms-student-dashboard { background: transparent; }

.llms-student-dashboard .llms-sd-section {
  border-bottom: 1px solid var(--vess-line);
  padding-bottom: var(--step-l);
  margin-bottom: var(--step-l);
}

.llms-student-dashboard .llms-sd-title {
  font-size: 1.625rem;
  margin-bottom: var(--step-m);
}

.llms-student-dashboard .llms-sd-nav a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--vess-ink-mute);
  text-decoration: none;
}

.llms-student-dashboard .llms-sd-nav a:hover,
.llms-student-dashboard .llms-sd-nav .is-active a { color: var(--vess-ink); }

/* --------------------------------------------------------------------------
   12. Video
   -------------------------------------------------------------------------- */

.llms-video-wrapper {
  margin: 0 0 var(--step-l);
  border: 1px solid var(--vess-line);
  background: #000;
}

.llms-video-wrapper video,
.llms-video-wrapper iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* --------------------------------------------------------------------------
   13. Meldungen
   -------------------------------------------------------------------------- */

.llms-notice {
  background: var(--vess-paper-tint);
  border: 0;
  border-left: 3px solid var(--vess-red-deep);
  border-radius: 0;
  color: var(--vess-ink);
  padding: var(--step-m);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.llms-notice.llms-success { border-left-color: var(--vess-brown); }
.llms-notice.llms-error   { border-left-color: var(--vess-red); }

/* --------------------------------------------------------------------------
   14. Grundlagen
   -------------------------------------------------------------------------- */

.llms-lesson-link:focus-visible,
.llms-button-action:focus-visible,
.llms-button-primary:focus-visible,
.llms-button-secondary:focus-visible,
.llms-sd-nav a:focus-visible {
  outline: 2px solid var(--vess-ink);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-link {
    padding: var(--step-s) var(--step-s) var(--step-s) 1rem;
  }
  .single-course .entry-title,
  .single-lesson .entry-title { font-size: 1.875rem; }
  .llms-button-action,
  .llms-button-primary,
  .llms-button-secondary { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .llms-lesson-link,
  .llms-progress .progress-bar-complete,
  .llms-button-action,
  .llms-button-primary { transition: none; }
}

/* ==========================================================================
   15. Vessára – Lehrplan: 4 Phasen, 12 Portale
   --------------------------------------------------------------------------
   Struktur: Abschnitt = Phase (4), Lektion = Portal (12), die 36 Archetypen
   liegen als Inhalt in der Lektion.

   Der Lehrplan rendert flach: h3.llms-section-title und div.llms-lesson-preview
   sind Geschwister im .llms-syllabus-wrapper, es gibt keinen Container je
   Abschnitt. Deshalb laeuft die Phasenzuordnung ueber :nth-of-type + ~ –
   jede spaetere Regel ueberschreibt die vorige fuer alles, was ihr folgt.

   Das Plugin schreibt dieses CSS inline in die Seite, nicht als externe Datei.
   Damit gilt das Dokument-Charset, Sonderzeichen stehen direkt drin.
   CSS-Escapes waeren hier sogar schaedlich: ein Escape verschluckt das
   folgende Leerzeichen.
   ========================================================================== */

/* -- Zaehler: Portale 01 bis 12, durchlaufend ------------------------------ */
/* Ein einziger Reset auf dem Wrapper. Kein Reset auf .llms-section-title –
   sonst begaenne jede Phase wieder bei 01 und "Portal 4" traege die 01. */

.llms-syllabus-wrapper { counter-reset: portal; }
.llms-syllabus-wrapper .llms-lesson-preview { counter-increment: portal; }

/* "1 OF 3" kommt aus LifterLMS auf Englisch. Ersetzt durch eine Ziffer.
   Spezifitaet muss die drei Klassen der Regeln oben mitgehen. */
.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-counter {
  font-size: 0;
  letter-spacing: 0;
}

.llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-counter::after {
  content: counter(portal, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--phase, var(--vess-ink-mute));
  opacity: 0.75;
}

/* "FREE" uebersetzt inzwischen das WPCode-Snippet "Vessára – LifterLMS auf
   Deutsch" serverseitig. Hier steht deshalb nichts mehr. */

/* -- Aufraeumen ------------------------------------------------------------- */

.llms-syllabus-wrapper .llms-lesson-excerpt p { margin: 0; }
.llms-syllabus-wrapper .llms-lesson-meta:empty { display: none; }
.llms-syllabus-wrapper .llms-favorite-wrapper { display: none; }

/* -- Phasenfarbe ------------------------------------------------------------ */

.llms-syllabus-wrapper .llms-section-title:nth-of-type(1),
.llms-syllabus-wrapper .llms-section-title:nth-of-type(1) ~ * { --phase: var(--phase-nigredo); }

.llms-syllabus-wrapper .llms-section-title:nth-of-type(2),
.llms-syllabus-wrapper .llms-section-title:nth-of-type(2) ~ * { --phase: var(--phase-albedo); }

.llms-syllabus-wrapper .llms-section-title:nth-of-type(3),
.llms-syllabus-wrapper .llms-section-title:nth-of-type(3) ~ * { --phase: var(--phase-citrinitas); }

.llms-syllabus-wrapper .llms-section-title:nth-of-type(4),
.llms-syllabus-wrapper .llms-section-title:nth-of-type(4) ~ * { --phase: var(--phase-rubedo); }

/* -- Alchemistische Zeile ueber dem Phasentitel -----------------------------
   Auf den Vessára-Kurs begrenzt, sonst bekaeme jeder andere Kurs dieselben
   Beschriftungen.
   -------------------------------------------------------------------------- */

body.postid-15751 .llms-syllabus-wrapper .llms-section-title::before {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 0.5em;
  color: var(--phase, var(--vess-ink-mute));
}

body.postid-15751 .llms-syllabus-wrapper .llms-section-title:nth-of-type(1)::before {
  content: "Nigredo · Das Dunkle, der Ruf ins Unbekannte";
}
body.postid-15751 .llms-syllabus-wrapper .llms-section-title:nth-of-type(2)::before {
  content: "Albedo · Reinigung, Schattenintegration, das innere Feuer";
}
body.postid-15751 .llms-syllabus-wrapper .llms-section-title:nth-of-type(3)::before {
  content: "Citrinitas · Das Licht, die Klarheit, die neue Frequenz";
}
body.postid-15751 .llms-syllabus-wrapper .llms-section-title:nth-of-type(4)::before {
  content: "Rubedo · Ganzwerdung, Herzstrahlung im Leben";
}

/* Mehr Luft zwischen den Phasen als zwischen den Portalen */
body.postid-15751 .llms-syllabus-wrapper .llms-section-title:nth-of-type(n+2) {
  margin-top: calc(var(--step-l) * 2);
}

/* -- Gesperrte Portale ------------------------------------------------------ */

.llms-syllabus-wrapper .llms-lesson-link.llms-lesson-link-locked,
.llms-syllabus-wrapper .llms-lesson-preview.is-locked .llms-lesson-link {
  background: transparent;
  border-style: dashed;
  border-left-style: solid;
  border-left-color: var(--vess-line-strong);
  cursor: default;
}

.llms-syllabus-wrapper .llms-lesson-preview.is-locked .llms-lesson-counter::after {
  color: var(--vess-line-strong);
}

/* -- "Zurück zu:" ---------------------------------------------------------
   Der Text kommt uebersetzt aus dem Snippet "Vessára – LifterLMS auf Deutsch"
   (die msgid enthaelt das komplette <p>-Markup). Hier nur noch Typografie.
   -------------------------------------------------------------------------- */

.single-lesson .llms-parent-course-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--vess-ink-mute);
  margin: 0 0 var(--step-m);
}

.single-lesson .llms-parent-course-link a {
  color: var(--vess-ink);
}

/* -- Fortschrittsbalken ---------------------------------------------------- */
/* Auf Wunsch ueberall aus: in der Einblendung oben rechts und auf den
   Kurskacheln in Katalog und Mitgliederbereich. Auf der Kursseite selbst
   ist der Block bereits aus dem Kursinhalt entfernt. */

.llms-notification .llms-progress,
.llms-loop-item .llms-progress,
.llms-loop-item-content .llms-progress {
  display: none !important;
}

/* -- Noch verschlossene Archetypen ----------------------------------------- */
/* Steht anstelle der Videoreiter, solange der Termin nicht erreicht ist.
   Das Plugin "Vessára Portale und Videoschutz" liefert diesen Absatz. */

/* Balken der Teilnehmerinnen-Vorschau, nur fuer Redakteurinnen sichtbar. */
.single-lesson .vessara-vorschau {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vess-paper);
  background: var(--vess-bordeaux);
  border-radius: 6px;
  padding: 0.9em 1.4em;
  margin: 0 0 var(--step-l);
}

.single-lesson .vessara-vorschau a {
  color: var(--vess-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Der Knopf zum Entfernen einer Live-Aufzeichnung, bewusst zurueckhaltend. */
.vessara-upload .vessara-upload-entfernen {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--vess-ink-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.vessara-upload .vessara-upload-entfernen:hover {
  color: var(--vess-red-deep);
}

.single-lesson .vessara-verschlossen,
.page-id-15965 .vessara-verschlossen {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--vess-ink-mute);
  background: var(--vess-paper-tint);
  border: 1px dashed var(--vess-line-strong);
  border-radius: 6px;
  padding: var(--step-m);
  margin: 0 0 var(--step-m);
  text-align: center;
}

/* -- Material auf der Kursseite --------------------------------------------- */
/* Workbook und weitere Unterlagen, oberhalb des Lehrplans. Bewusst anders
   gehalten als die Portalkacheln: heller Grund, Dateisymbol, Pfeil nach
   unten. Es soll nach Datei aussehen, nicht nach dem naechsten Kursschritt. */

.vessara-material {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-s);
  margin: 0 0 var(--step-l);
}

.single-course .vessara-material-datei {
  display: flex;
  align-items: center;
  gap: 1em;
  min-width: 19em;
  padding: 0.9em 1.2em;
  border: 1px solid var(--vess-line-strong);
  border-radius: 6px;
  background: var(--vess-paper);
  text-decoration: none;
  color: var(--vess-ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.single-course .vessara-material-datei:hover,
.single-course .vessara-material-datei:focus-visible {
  background: var(--vess-paper-tint);
  border-color: var(--vess-bordeaux);
  text-decoration: none;
}

.vessara-material-symbol {
  flex: 0 0 auto;
  display: block;
  color: var(--vess-bordeaux);
  opacity: 0.85;
}

.vessara-material-symbol svg {
  display: block;
}

.vessara-material-text {
  flex: 1 1 auto;
  min-width: 0;
}

.single-course .vessara-material-titel {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--vess-ink);
  text-decoration: none;
}

.single-course .vessara-material-zusatz {
  display: block;
  margin-top: 0.2em;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--vess-ink-mute);
  text-decoration: none;
}

.vessara-material-pfeil {
  flex: 0 0 auto;
  display: block;
  color: var(--vess-ink-mute);
  transition: transform 0.15s ease, color 0.15s ease;
}

.vessara-material-pfeil svg {
  display: block;
}

.single-course .vessara-material-datei:hover .vessara-material-pfeil {
  color: var(--vess-bordeaux);
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .single-course .vessara-material-datei,
  .vessara-material-pfeil { transition: none; }
  .single-course .vessara-material-datei:hover .vessara-material-pfeil { transform: none; }
}

/* ==========================================================================
   16. Vessára – Portalseite: die drei Archetypen
   ========================================================================== */

.single-lesson .vessara-archetyp {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  color: var(--vess-ink);
  line-height: 1.15;
  margin: 0 0 0.25em;
}

.single-lesson .vessara-beiname {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--vess-ink-mute);
  margin: 0 0 var(--step-m);
}

.single-lesson .vessara-trenner {
  border: 0;
  border-top: 1px solid var(--vess-line);
  width: 100%;
  max-width: none;
  margin: var(--step-l) 0;
}

.single-lesson .vessara-video {
  margin: 0 0 var(--step-m);
  border: 1px solid var(--vess-line);
  background: #000;
}

.single-lesson .vessara-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Die Videobeschriftung sitzt jetzt im Tab-Reiter ueber dem Video,
   deshalb gibt es hier keine figcaption-Regel mehr. */

.single-lesson .vessara-video-fehlt {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--vess-ink-mute);
  background: var(--vess-paper-tint);
  border-left: 3px solid var(--vess-line-strong);
  padding: var(--step-s) var(--step-m);
  margin: 0 0 var(--step-m);
}


/* ==========================================================================
   17. Vessára – Upload-Formular für Live-Sessions
   --------------------------------------------------------------------------
   Erscheint im Frontend über den Shortcode [vessara_live_upload] und in
   wp-admin unter LifterLMS. Sichtbar nur für angemeldete Benutzer mit der
   Fähigkeit upload_files.
   ========================================================================== */

.vessara-upload {
  max-width: 34rem;
  font-family: var(--font-body);
}

.vessara-upload label {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--vess-ink-mute);
  margin-bottom: 0.4em;
}

.vessara-upload input[type="text"],
.vessara-upload input[type="date"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7em 0.9em;
  border: 1px solid var(--vess-line-strong);
  border-radius: 6px;
  background: var(--vess-paper);
  color: var(--vess-ink);
}

.vessara-upload input[type="text"]:focus,
.vessara-upload input[type="date"]:focus,
.vessara-upload input[type="file"]:focus-visible {
  outline: 2px solid var(--vess-ink);
  outline-offset: 2px;
}

.vessara-upload input[type="file"] {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--vess-ink);
}

.vessara-upload-hinweis {
  font-size: 0.9375rem;
  color: var(--vess-ink-mute);
  background: var(--vess-paper-tint);
  border-left: 3px solid var(--vess-brown);
  padding: var(--step-s) var(--step-m);
  margin: 0 0 var(--step-l);
}

/* Fortschritt: dieselbe Sprache wie der Kursfortschritt, nur kraeftiger,
   weil hier tatsaechlich etwas laeuft. */
.vessara-upload-balken {
  height: 4px;
  background: var(--vess-line);
  border-radius: 2px;
  overflow: hidden;
  margin: var(--step-s) 0;
}

.vessara-upload-fortschritt {
  height: 100%;
  width: 0;
  background: var(--vess-bordeaux);
  transition: width 200ms linear;
}

.vessara-upload-status {
  font-size: 0.9375rem;
  color: var(--vess-ink);
  min-height: 1.5em;
  margin: 0;
}

.vessara-upload button[disabled] {
  opacity: 0.5;
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .vessara-upload-fortschritt { transition: none; }
}


/* ==========================================================================
   18. Vessára – Videoreiter je Archetyp
   --------------------------------------------------------------------------
   Zwei Aufnahmen je Archetyp: "in der Begleitung" und "Praxisübung".
   Untereinander wurde die Seite zu lang, deshalb Reiter.

   Ohne JavaScript gebaut: zwei Radio-Buttons tragen den Zustand, die Labels
   sind die Reiter, die Panels folgen als <section>. Damit funktioniert es
   auch, wenn Skripte blockiert sind, und die Tastaturbedienung bringt der
   Browser mit (Pfeiltasten innerhalb der Gruppe).

   Die Regeln greifen über :nth-of-type, weil die IDs je Archetyp anders
   heissen und CSS sie nicht kennen kann.
   ========================================================================== */

.vessara-tabs {
  margin: 0 0 var(--step-m);
}

/* Die Radios tragen nur den Zustand und bleiben unsichtbar – aber
   fokussierbar, sonst geht die Tastaturbedienung verloren. */
.vessara-tabs > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vessara-tabs-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--vess-line-strong);
  margin: 0;
}

/* Karteireiter statt gefüllter Blöcke. Der inaktive Reiter ist nur Text,
   der aktive sitzt als helle Karte mit farbigem Streifen auf der Linie und
   überdeckt sie – dadurch liest man sofort, welcher gewählt ist, ohne dass
   ein schwerer dunkler Block den Blick zieht.
   Der Streifen trägt die Phasenfarbe, das verbindet den Reiter mit dem
   Portal, in dem er steht. */
.vessara-tabs-leiste label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--vess-ink-mute);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-top: 3px solid transparent;
  border-radius: 5px 5px 0 0;
  padding: 0.75em 1.4em;
  margin-bottom: -1px;
  cursor: pointer;
  user-select: none;
  transition: background 160ms ease, color 160ms ease;
}

.vessara-tabs-leiste label:hover {
  background: var(--vess-paper-tint);
  color: var(--vess-ink);
}

/* Das Panel trägt denselben Sandton wie der aktive Reiter – dadurch lesen
   sich Reiter und Inhalt als eine Fläche. 15px Innenabstand setzen das
   Video als Bild in diese Fläche, statt es bündig anzuschlagen. */
.vessara-tab-inhalt {
  display: none;
  border: 1px solid var(--vess-line-strong);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--vess-paper-tint);
  padding: 15px;
}

/* Nur unten gerundet: oben schliesst das Panel an die Reiterleiste an.
   Das Video bekommt einen eigenen, kleineren Radius – es liegt als Bild
   in der Flaeche und soll nicht mit ihr verschmelzen. */
.vessara-tab-inhalt video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 4px;
  background: #000;
}

/* Aktiver Reiter */
.vessara-tabs > input:nth-of-type(1):checked ~ .vessara-tabs-leiste label:nth-of-type(1),
.vessara-tabs > input:nth-of-type(2):checked ~ .vessara-tabs-leiste label:nth-of-type(2),
.vessara-tabs > input:nth-of-type(3):checked ~ .vessara-tabs-leiste label:nth-of-type(3),
.vessara-tabs > input:nth-of-type(4):checked ~ .vessara-tabs-leiste label:nth-of-type(4),
.vessara-tabs > input:nth-of-type(5):checked ~ .vessara-tabs-leiste label:nth-of-type(5),
.vessara-tabs > input:nth-of-type(6):checked ~ .vessara-tabs-leiste label:nth-of-type(6),
.vessara-tabs > input:nth-of-type(7):checked ~ .vessara-tabs-leiste label:nth-of-type(7),
.vessara-tabs > input:nth-of-type(8):checked ~ .vessara-tabs-leiste label:nth-of-type(8),
.vessara-tabs > input:nth-of-type(9):checked ~ .vessara-tabs-leiste label:nth-of-type(9),
.vessara-tabs > input:nth-of-type(10):checked ~ .vessara-tabs-leiste label:nth-of-type(10) {
  background: var(--vess-paper-tint);
  border-color: var(--vess-line-strong);
  border-top-color: var(--phase, var(--vess-bordeaux));
  color: var(--vess-ink);
}

.vessara-tabs > input:nth-of-type(1):checked ~ .vessara-tab-inhalt:nth-of-type(1),
.vessara-tabs > input:nth-of-type(2):checked ~ .vessara-tab-inhalt:nth-of-type(2),
.vessara-tabs > input:nth-of-type(3):checked ~ .vessara-tab-inhalt:nth-of-type(3),
.vessara-tabs > input:nth-of-type(4):checked ~ .vessara-tab-inhalt:nth-of-type(4),
.vessara-tabs > input:nth-of-type(5):checked ~ .vessara-tab-inhalt:nth-of-type(5),
.vessara-tabs > input:nth-of-type(6):checked ~ .vessara-tab-inhalt:nth-of-type(6),
.vessara-tabs > input:nth-of-type(7):checked ~ .vessara-tab-inhalt:nth-of-type(7),
.vessara-tabs > input:nth-of-type(8):checked ~ .vessara-tab-inhalt:nth-of-type(8),
.vessara-tabs > input:nth-of-type(9):checked ~ .vessara-tab-inhalt:nth-of-type(9),
.vessara-tabs > input:nth-of-type(10):checked ~ .vessara-tab-inhalt:nth-of-type(10) {
  display: block;
}

/* Tastaturfokus muss sichtbar sein, obwohl das Radio es nicht ist. */
.vessara-tabs > input:nth-of-type(1):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(1),
.vessara-tabs > input:nth-of-type(2):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(2),
.vessara-tabs > input:nth-of-type(3):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(3),
.vessara-tabs > input:nth-of-type(4):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(4),
.vessara-tabs > input:nth-of-type(5):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(5),
.vessara-tabs > input:nth-of-type(6):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(6),
.vessara-tabs > input:nth-of-type(7):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(7),
.vessara-tabs > input:nth-of-type(8):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(8),
.vessara-tabs > input:nth-of-type(9):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(9),
.vessara-tabs > input:nth-of-type(10):focus-visible ~ .vessara-tabs-leiste label:nth-of-type(10) {
  outline: 2px solid var(--vess-ink);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .vessara-tabs-leiste label {
    flex: 1 1 100%;
    padding: 0.8em var(--step-s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vessara-tabs-leiste label { transition: none; }
}


/* ==========================================================================
   19. Vessára – Teilnehmerinnen anlegen und verwalten
   --------------------------------------------------------------------------
   Frontend über [vessara_teilnehmer], in wp-admin unter LifterLMS.
   Erbt Felder und Buttons von Abschnitt 17.
   ========================================================================== */

.vessara-teilnehmer {
  max-width: 46rem;
}

.vessara-tn-titel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--vess-ink);
  margin: var(--step-l) 0 var(--step-m);
  padding-bottom: var(--step-xs);
  border-bottom: 1px solid var(--vess-line);
}

.vessara-teilnehmer > .vessara-tn-titel:first-child {
  margin-top: 0;
}

.vessara-tn-fussnote {
  display: block;
  font-size: 0.8125rem;
  color: var(--vess-ink-mute);
  margin-top: 0.4em;
}

.vessara-tn-leer {
  font-size: 0.9375rem;
  color: var(--vess-ink-mute);
}

.vessara-tn-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.vessara-tn-tabelle th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--vess-ink-mute);
  border-bottom: 1px solid var(--vess-line-strong);
  padding: 0 var(--step-s) var(--step-xs) 0;
}

.vessara-tn-tabelle td {
  border-bottom: 1px solid var(--vess-line);
  padding: var(--step-s) var(--step-s) var(--step-s) 0;
  vertical-align: middle;
  color: var(--vess-ink);
}

.vessara-tn-tabelle tr:last-child td {
  border-bottom: 0;
}

/* Status: Farbe allein traegt die Aussage nicht – der Text steht daneben. */
.vessara-tn-status {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.35em 0.7em;
  white-space: nowrap;
  border: 1px solid currentColor;
}

.vessara-tn-enrolled   { color: var(--vess-brown); }
.vessara-tn-vorgemerkt { color: var(--vess-ink-mute); }
.vessara-tn-cancelled,
.vessara-tn-expired    { color: var(--vess-red-deep); }

/* Kündigen: unauffällig, bis es ernst wird. Der zweite Klick bestätigt –
   deshalb wechselt der Knopf Beschriftung und Farbe, statt einen
   Browserdialog zu öffnen. */
.vessara-tn-kuendigen {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vess-ink-mute);
  background: transparent;
  border: 1px solid var(--vess-line-strong);
  border-radius: 6px;
  padding: 0.5em 1em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.vessara-tn-kuendigen:hover {
  color: var(--vess-red-deep);
  border-color: var(--vess-red-deep);
}

.vessara-tn-kuendigen.ist-sicher {
  background: var(--vess-red-deep);
  border-color: var(--vess-red-deep);
  color: #fff;
}

.vessara-tn-kuendigen:focus-visible {
  outline: 2px solid var(--vess-ink);
  outline-offset: 2px;
}

.vessara-tn-kuendigen[disabled] {
  opacity: 0.5;
  cursor: progress;
}

@media (max-width: 600px) {
  .vessara-tn-tabelle,
  .vessara-tn-tabelle tbody,
  .vessara-tn-tabelle tr,
  .vessara-tn-tabelle td { display: block; width: 100%; }
  .vessara-tn-tabelle thead { display: none; }
  .vessara-tn-tabelle tr {
    border-bottom: 1px solid var(--vess-line-strong);
    padding: var(--step-s) 0;
  }
  .vessara-tn-tabelle td { border: 0; padding: 0.2em 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vessara-tn-kuendigen { transition: none; }
}


/* ==========================================================================
   20. Vessára – Autoren- und Dozentenangaben ausblenden
   --------------------------------------------------------------------------
   LifterLMS zeigt an mehreren Stellen den Autor des Kursbeitrags als
   "Course Instructor" beziehungsweise "Author" – Kursseite, Katalogkarten,
   Lehrplan. Das ist die Person, die den Kurs technisch angelegt hat, nicht
   Simone, und für Teilnehmerinnen ohnehin ohne Nutzen.

   Zusammen mit der Infobox verschwinden auch "Über diese Ausbildung" und
   "Dauer" – bewusst, die Angaben stehen bereits im Untertitel des Kurses.

   Ausgeblendet statt entfernt: Ein Plugin-Update setzt Templates zurück,
   eine CSS-Regel überlebt das.
   ========================================================================== */

.llms-meta-info,
.llms-instructor-info,
.llms-instructors,
.llms-author,
.llms-author-info {
  display: none !important;
}


/* ==========================================================================
   21. Vessára – Abschlussseite /vollendung/
   --------------------------------------------------------------------------
   Wird nach dem Abschluss des Kurses angezeigt. Bewusst ruhig gehalten:
   keine Konfetti-Grafik, kein Abzeichen. Nach drei Jahren wirkt Zurückhaltung
   würdiger als eine Belohnungsanimation.

   Mittig gesetzt, mit viel Luft – die Seite soll sich anders anfühlen als
   eine Portalseite.
   ========================================================================== */

.page-id-15965 .page-content,
.page-id-15965 .entry-content {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.page-id-15965 .page-header,
.page-id-15965 .entry-title {
  text-align: center;
}

.page-id-15965 .entry-title,
.page-id-15965 .page-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--vess-ink);
  line-height: 1.1;
  margin-bottom: var(--step-s);
}

.vessara-abschluss-kicker {
  margin: 0 0 var(--step-l);
  color: var(--phase-rubedo);
}

.vessara-abschluss-vorwort {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.55;
  color: var(--vess-ink);
  margin: 0 auto var(--step-l);
  max-width: 32rem;
}

/* Der Reiter trägt hier keine Auswahl, nur die Beschriftung – deshalb
   mittig statt linksbündig. */
.vessara-abschluss-video .vessara-tabs-leiste {
  justify-content: center;
}

.vessara-abschluss-video .vessara-tabs-leiste label {
  cursor: default;
  border-top-color: var(--phase-rubedo);
}

.vessara-abschluss-nachwort {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.9;
  color: var(--vess-ink-mute);
  margin: var(--step-l) auto 0;
  max-width: 28rem;
}

@media (max-width: 480px) {
  .vessara-abschluss-video .vessara-tabs-leiste label {
    flex: 1 1 100%;
    text-align: center;
  }
  .vessara-abschluss-nachwort {
    letter-spacing: 0.14em;
  }
}


/* ==========================================================================
   22. Vessára – Luft um die Kursseite
   --------------------------------------------------------------------------
   Das Theme setzt Titel und Inhalt ohne Abstand an den Seitenkopf und an
   den Fuss. Je 50px Polster oben vor dem Kurstitel und unten hinter dem
   letzten Abschnitt.

   Unten sitzt das Polster am Lehrplan selbst, nicht am Seiteninhalt –
   der Lehrplan ist immer das letzte Element, und so verschiebt sich der
   Abstand nicht, falls spaeter noch etwas darunter kommt.
   ========================================================================== */

/* Gilt für alle Seiten der Ausbildung, einzeln aufgezählt statt pauschal –
   die übrige Website und der Shop bleiben unberührt.

   .single-course          Kursseite
   .single-lesson          Portal- und Aufzeichnungsseiten
   .page-id-15714          Mitgliederbereich /dashboard/
   .page-id-15965          Abschlussseite /vollendung/
   .page-id-15926          Live-Session hochladen
   .post-type-archive-course  Katalog /courses/ – hat keinen .page-header,
                              dort trägt der Archivtitel den Abstand. */

.single-course .page-header,
.single-lesson .page-header,
.page-id-15714 .page-header,
.page-id-15965 .page-header,
.page-id-15926 .page-header {
  padding-top: 50px;
}

.post-type-archive-course .page-header,
.post-type-archive-course .archive-title,
.post-type-archive-course .page-title {
  padding-top: 50px;
}

.single-course .llms-syllabus-wrapper {
  padding-bottom: 50px;
}


/* ==========================================================================
   23. Vessára – Navigation unter der Lektion
   --------------------------------------------------------------------------
   LifterLMS zeigt im "Nächste Lektion"-Feld zusätzlich den Auszug, bei uns
   also die drei Archetypennamen des nächsten Portals. Auf der Kursseite ist
   das eine sinnvolle Vorschau, hier steht es der klaren Weiter-Geste im Weg
   und nimmt dem Feld die Ruhe.

   Nicht im Lehrplan ausblenden – dort trägt derselbe Auszug Information.
   Deshalb ausschliesslich innerhalb von .llms-course-navigation.

   Die Kachelhöhe setzt LifterLMS per Skript beim Laden. Da CSS vorher
   greift, wird die kleinere Höhe korrekt berechnet.
   ========================================================================== */

.llms-course-navigation .llms-lesson-excerpt {
  display: none;
}

.llms-course-navigation {
  padding-bottom: 50px;
}


/* ==========================================================================
   24. Vessára – Anmeldung und Mitgliederbereich
   --------------------------------------------------------------------------
   Die Anmeldeseite kam ab Werk in Theme-Schrift, mit Standardfeldern und
   einem pinken "Passwort anzeigen"-Knopf – eine Farbe, die in der Palette
   nicht vorkommt. Hier wird alles auf die Vessára-Sprache gezogen:
   Serife für Überschriften, dieselben Felder wie in den Formularen,
   dieselben Buttons.

   Das Anmeldeformular wird eingefasst: über die volle Breite eines
   Desktopmonitors gezogen wirkt eine zweispaltige Anmeldung verloren.
   ========================================================================== */

.page-id-15714 .entry-title,
.page-id-15714 .page-header h1,
.llms-student-dashboard .llms-sd-title,
.llms-person-login-form-wrapper h2,
.llms-person-login-form-wrapper h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--vess-ink);
  line-height: 1.15;
}

.page-id-15714 .entry-title,
.page-id-15714 .page-header h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.llms-person-login-form-wrapper h2,
.llms-person-login-form-wrapper h4 {
  font-size: 1.5rem;
  margin: 0 0 var(--step-m);
}

/* Anmeldeformular einfassen */
.llms-person-login-form-wrapper {
  max-width: 34rem;
  margin: 0 0 var(--step-l);
}

.llms-person-login-form-wrapper .llms-cols-6 {
  width: 100%;
  float: none;
  padding: 0;
  margin: 0 0 var(--step-m);
}

/* Beschriftungen wie in den übrigen Formularen */
.llms-form-field label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--vess-ink-mute);
  margin-bottom: 0.5em;
}

/* Der Pflichtstern kam in Rot – hier zurückgenommen, er soll hinweisen,
   nicht warnen. */
.llms-form-field .llms-required {
  color: var(--vess-ink-mute);
  margin-left: 0.25em;
}

/* LifterLMS setzt den Rahmen mit hoeherer Spezifitaet auf Grau –
   deshalb hier ebenfalls ueber zwei Klassen adressiert. */
.llms-form-field .llms-field-input,
.lifterlms .llms-field-input,
.llms-student-dashboard .llms-field-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7em 0.9em;
  border: 1px solid var(--vess-line-strong);
  border-radius: 6px;
  background: var(--vess-paper);
  color: var(--vess-ink);
  box-shadow: none;
}

.llms-field-input:focus {
  outline: 2px solid var(--vess-ink);
  outline-offset: 2px;
  border-color: var(--vess-ink);
}

/* "Passwort anzeigen": war ein pinker Kasten, jetzt ein zurückhaltender
   Textknopf unter dem Feld. */
.llms-visibility-toggle {
  margin-top: 0.5em;
}

.llms-visibility-toggle .llms-button-plain {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--vess-ink-mute);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.llms-visibility-toggle .llms-button-plain:hover {
  color: var(--vess-ink);
}

.llms-form-field.type-checkbox label,
.llms-field-checkbox + label {
  display: inline;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--vess-ink);
}

.llms-person-login-form-wrapper a {
  color: var(--vess-ink-mute);
  font-size: 0.875rem;
}

.llms-person-login-form-wrapper a:hover {
  color: var(--vess-ink);
}


/* ==========================================================================
   25. Vessára – Absendeknopf in LifterLMS-Formularen
   --------------------------------------------------------------------------
   LifterLMS setzt
     .llms-form-field.type-submit button:not(.auto) { width: 100%; }
   Der Knopf sitzt aber in einer schmalen Rasterspalte, 100% davon waren
   116px – zu wenig fuer "Anmelden" samt Innenabstand, der Text lief aus dem
   Rahmen. Spalte und Knopf richten sich jetzt nach dem Inhalt.

   Gleiche Spezifitaet wie die Plugin-Regel, gewinnt ueber die Reihenfolge.
   ========================================================================== */

.lifterlms .llms-form-field.type-submit button:not(.auto),
.llms-form-field.type-submit button:not(.auto) {
  width: auto;
}

.llms-person-login-form-wrapper .llms-form-field.type-submit {
  width: auto;
  float: none;
  clear: both;
  padding: 0;
}

/* Kontrollkaestchen und "Passwort vergessen" sassen gedraengt neben dem
   Knopf und brachen um. Untereinander mit Luft. */
.llms-person-login-form-wrapper .llms-form-field.type-checkbox,
.llms-person-login-form-wrapper .llms-form-field.llms-cols-last {
  width: auto;
  float: none;
  clear: both;
  padding: 0;
  margin-top: var(--step-s);
}

.llms-person-login-form-wrapper .llms-form-field a {
  white-space: nowrap;
}


/* ==========================================================================
   26. Vessára – Platzhalterbild in den Kurskacheln
   --------------------------------------------------------------------------
   Ohne Beitragsbild setzt LifterLMS ein graues Fülbild von 450x450 ein.
   In der einspaltigen Ansicht nimmt das den halben Bildschirm ein und sagt
   nichts. Ausgeblendet, bis es echtes Bildmaterial gibt – dann diese Regel
   entfernen, echte Beitragsbilder werden dadurch nicht getroffen.
   ========================================================================== */

.llms-loop-item .llms-placeholder {
  display: none;
}

/* Ohne Bild braucht die Kachel eigene Innenabstaende. */
.llms-loop-item-content {
  padding: var(--step-m);
}

/* Die Beschriftungen der Kachel kommen uebersetzt aus dem Snippet
   "Vessára – LifterLMS auf Deutsch"; hier nur noch die Typografie. */

.llms-loop-item-footer .llms-course-length p,
.llms-loop-item-footer .llms-lessons-count p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  margin: 0;
  color: var(--vess-ink-mute);
}

.llms-loop-item-footer .length,
.llms-loop-item-footer .lessons-count {
  color: var(--vess-ink);
}
/* ==========================================================================
   27. Vessára – Seite Vollendung

   Der Abschluss ist kein Video, sondern ein gemeinsamer Abend. Die Seite ist
   deshalb ruhig gehalten: kein Kasten, nur eine feine Linie und viel Luft.
   Steht bewusst am Ende der Datei, damit sie die allgemeine Regel fuer
   .vessara-verschlossen ueberschreibt.
   ========================================================================== */

/* Abstand zum Fuss der Seite, sonst klebt der Schlusssatz am Footer. */
.page-id-15965 .site-main {
  padding-bottom: 5.5rem;
}

.page-id-15965 .vessara-abschluss-termin {
  max-width: 34em;
  margin: var(--step-l) auto 0;
}

.page-id-15965 .vessara-verschlossen {
  max-width: 26em;
  margin: var(--step-l) auto 0;
  padding: var(--step-l) 0 0;
  border: 0;
  border-top: 1px solid var(--vess-line);
  border-radius: 0;
  background: none;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
  text-transform: none;
  color: var(--vess-ink-mute);
  opacity: 0.9;
}

/* Sobald die Aufzeichnung da ist, steht sie an derselben Stelle. */
.page-id-15965 .vessara-abschluss-video {
  max-width: 44em;
  margin: var(--step-l) auto 0;
  text-align: left;
}

.page-id-15965 .vessara-abschluss-nachwort {
  margin-top: var(--step-l);
}


/* ==========================================================================
   28 · Hochladeseite, abgemeldet
   --------------------------------------------------------------------------
   Ohne Anmeldung zeigte die Seite frueher nur die Ueberschrift und darunter
   nichts. Das sah aus wie ein Fehler. Jetzt steht dort ein Satz und ein
   Anmeldelink, der nach dem Login wieder auf diese Seite zurueckfuehrt.
   ========================================================================== */

.vessara-live-hinweis {
  max-width: 34em;
  margin: var(--step-m) 0 var(--step-l);
  padding: var(--step-m) var(--step-m) calc(var(--step-m) + 0.2em);
  border: 1px solid var(--vess-line);
  border-radius: 6px;
  background: var(--vess-paper, #fff);
}

.vessara-live-hinweis p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--vess-ink-mute);
}

.vessara-live-hinweis p + p { margin-top: var(--step-m); }

a.vessara-live-anmelden {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.2;
  padding: 1em 2.1em;
  border: 1px solid var(--vess-bordeaux);
  border-radius: 6px;
  background: transparent;
  color: var(--vess-bordeaux);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

a.vessara-live-anmelden:hover,
a.vessara-live-anmelden:focus {
  background: var(--vess-bordeaux);
  color: #fff;
}


/* ==========================================================================
   29 · Live-Call-Kasten oben im Portal
   --------------------------------------------------------------------------
   Steht vor dem ersten Archetyp und nennt den naechsten Live-Call sowie den
   Zoom-Raum. Das Plugin gibt ihn nur an Eingeschriebene aus, die Kursseite
   selbst ist oeffentlich.

   Bewusst ruhiger als die Videoreiter: duenne Linie links in der Phasenfarbe,
   kein Kasten mit Fuellung, damit er den Einstieg nicht ueberlagert.
   ========================================================================== */

.vessara-livecall {
  max-width: 44em;
  margin: 0 0 var(--step-l);
  padding: var(--step-s) 0 var(--step-s) var(--step-m);
  border-left: 2px solid var(--phase, var(--vess-bordeaux));
}

.vessara-livecall-kopf {
  margin: 0 0 0.4em;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--vess-ink-mute);
}

.vessara-livecall-termin {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--vess-ink, inherit);
}

.vessara-livecall-aktion {
  margin: var(--step-s) 0 0;
}

a.vessara-livecall-knopf {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.2;
  padding: 0.85em 1.9em;
  border: 1px solid var(--vess-bordeaux);
  border-radius: 6px;
  background: transparent;
  color: var(--vess-bordeaux);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

a.vessara-livecall-knopf:hover,
a.vessara-livecall-knopf:focus {
  background: var(--vess-bordeaux);
  color: #fff;
}

.vessara-livecall-fuss {
  margin: var(--step-s) 0 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--vess-ink-mute);
}

@media (max-width: 600px) {
  .vessara-livecall {
    padding-left: var(--step-s);
  }
}