/* Lernbereich: Login, Rollen-Dashboard, Tutorials, Journeys, Lernkarten.
   Baut auf denselben Tokens wie die Marketing-Seite auf (tokens.css), ergänzt
   nur, was dort fehlt. --role-accent wird pro Seite inline gesetzt (Rolle
   oder Future-Skills-Pink), genau wie in der echten App. */

/* .content-grid{display:grid} würde sonst [hidden] überschreiben, weil beide
   Regeln dieselbe Spezifität haben und diese hier später geladen wird. */
[hidden] { display: none !important; }

/* Die Marketing-Seite kommt ohne echte <button>-Elemente aus (Buttons sind
   dort Links). Hier gibt es viele echte Buttons für reine JS-Interaktion
   (Rollen-Umschalter, Tutorial-Schritte, Karten-Navigation) - ohne Reset
   zeigt der Browser sein helles Standard-Button-Aussehen. */
button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-align: inherit;
}

/* Login */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.login-glow {
  position: absolute;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  opacity: 0.18;
  filter: blur(100px);
  background: var(--accent);
  pointer-events: none;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 28rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 2.5rem;
}
.login-card p.login-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.login-card h1 { margin-top: 1.5rem; font-size: 1.85rem; }
.login-card .login-sub { margin-top: 0.25rem; font-size: 0.9rem; }
.login-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.login-field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.login-field input {
  margin-top: 0.5rem;
  width: 100%;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.login-field input:focus { border-color: var(--accent); }
.login-error { font-size: 0.85rem; color: #f87171; }
.login-submit { width: 100%; justify-content: center; }

/* Rollen-Dashboard */
.lernen-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.lernen-hero-glow {
  position: absolute;
  top: -8rem;
  right: 0;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  opacity: 0.16;
  filter: blur(90px);
  background: var(--role-accent);
  pointer-events: none;
}
.lernen-hero-inner { position: relative; padding: 4.5rem 0 3rem; }
.lernen-hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }

.lernen-controls {
  position: sticky;
  top: 4.5rem;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: rgba(250, 249, 247, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.lernen-controls-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
}
.role-switch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.role-switch {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.role-switch:hover { border-color: var(--role-accent); color: var(--text-primary); }
.role-switch.active { color: #fff; border-color: transparent; background: var(--role-accent); }
.role-switch-divider { width: 1px; height: 1.5rem; background: var(--border); margin: 0 0.25rem; }

.type-filter-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.type-filter {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.type-filter:hover { color: var(--text-primary); }
.type-filter.active { color: var(--text-primary); background: var(--surface); }

.content-grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
.content-grid.grid-sales,
.content-grid.grid-engineering { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.content-grid.grid-produktion { grid-template-columns: 1fr; max-width: 42rem; }
.content-grid.grid-entwicklung { grid-template-columns: 1fr; max-width: 48rem; }
.content-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.75rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.content-card:hover { transform: translateY(-4px); border-color: var(--role-accent); }
.content-card .type-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--role-accent);
}
.content-card h3 { margin-top: 0.85rem; font-size: 1.15rem; }
.content-card p { margin-top: 0.6rem; flex: 1; }
.content-card .content-meta {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.content-empty { color: var(--text-secondary); font-size: 0.9rem; }

/* Rollenspezifische Kachel-Stile (ContentCard.jsx: jede Rolle hat im
   Original ein eigenes Layout, nicht nur eine eigene Farbe). */

/* Sales: Bild oben, Verlauf, Typ-Badge auf dem Bild */
.content-card--sales { padding: 0; overflow: hidden; }
.content-card--sales:hover { transform: translateY(-4px); }
.cc-sales-media { position: relative; height: 11rem; }
.cc-sales-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-sales-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--surface) 0%, rgba(0, 0, 0, 0) 60%);
}
.cc-sales-badge {
  position: absolute;
  left: 1rem;
  bottom: 0.75rem;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius);
  background: rgba(250, 249, 247, 0.85);
  color: var(--role-accent);
}
.cc-sales-body { padding: 1.5rem 1.75rem 1.75rem; }
.cc-sales-body h3 { font-size: 1.1rem; }
.cc-sales-body p { margin-top: 0.5rem; font-size: 0.9rem; }
.cc-sales-body .content-meta { margin-top: 0.85rem; }

/* Engineering: technische Eckklammern, Monospace-Kommentarpraefix */
.content-card--engineering { position: relative; background: var(--background); }
.eng-corner { position: absolute; width: 0.75rem; height: 0.75rem; border-color: var(--role-accent); }
.eng-corner-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.eng-corner-br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
.eng-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--role-accent); }
.content-card--engineering h3 { margin-top: 0.75rem; font-size: 1.05rem; }
.content-card--engineering p { margin-top: 0.5rem; }
.eng-meta { margin-top: 1.15rem; display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }

/* Produktion: dicker linker Rand, große Konturziffer, Pfeil */
.content-card--produktion {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  border: none;
  border-left: 8px solid var(--role-accent);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
}
.pk-index { flex-shrink: 0; font-family: var(--font-grotesk); font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.25rem); line-height: 1; }
.pk-body { flex: 1; min-width: 0; }
.pk-body .type-badge { display: block; }
.pk-body h3 { margin-top: 0.5rem; font-size: 1.2rem; }
.pk-body p { margin-top: 0.5rem; }
.pk-arrow { flex-shrink: 0; align-self: flex-start; font-size: 1.2rem; color: var(--text-secondary); transition: color 0.2s ease; }
.content-card--produktion:hover .pk-arrow { color: var(--role-accent); }

/* Entwicklung: Zeitstrahl mit verbundenen Stationen */
.timeline-item { position: relative; padding-left: 2.5rem; }
.timeline-item .ent-line {
  position: absolute;
  left: 7px;
  top: 2rem;
  bottom: -2rem;
  width: 1px;
  background: var(--border);
}
.timeline-item:last-child .ent-line { display: none; }
.timeline-item .ent-dot {
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--role-accent);
  background: var(--background);
}
.content-card--entwicklung .content-meta { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Detail-Kopf (Tutorial/Journey/Karten/Nugget gemeinsam) */
.detail-shell { padding-bottom: 6rem; }
.detail-container { max-width: 56rem; padding-top: 6rem; }
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.detail-back:hover { color: var(--text-primary); }
.detail-badge {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--role-accent);
  color: var(--role-accent);
}
.detail-shell h1 { margin-top: 1.5rem; font-size: clamp(2rem, 5vw, 3.25rem); }
.detail-sub { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--text-secondary); }
.detail-meta {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Tutorial */
.tutorial-progress { margin-top: 2.5rem; height: 4px; border-radius: var(--radius); background: var(--border); overflow: hidden; }
.tutorial-progress-bar { height: 100%; border-radius: var(--radius); background: var(--role-accent); transition: width 0.4s ease; width: 0%; }
.tutorial-steps { margin-top: 3rem; position: relative; }
.tutorial-steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.tutorial-step {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem 1.25rem 3.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}
.tutorial-step .step-num {
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}
.tutorial-step h3 { font-size: 1.05rem; color: var(--text-secondary); transition: color 0.3s ease; }
.tutorial-step .step-body {
  display: none;
  margin-top: 0.65rem;
  max-width: 42rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.tutorial-step.active { border-color: var(--role-accent); background: rgba(43, 39, 36, 0.035); }
.tutorial-step.active .step-num,
.tutorial-step.done .step-num { border-color: var(--role-accent); color: var(--role-accent); }
.tutorial-step.active h3 { color: var(--text-primary); }
.tutorial-step.active .step-body { display: block; }
.tutorial-nav { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tutorial-done {
  margin-top: 2.5rem;
  border: 1px solid var(--role-accent);
  border-radius: var(--radius);
  background: rgba(43, 39, 36, 0.035);
  padding: 2rem;
  text-align: center;
  display: none;
}
.tutorial-done.show { display: block; }
.tutorial-done p:first-child { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--text-primary); }

/* Journey */
.journey-progress { margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; }
.journey-progress-track { flex: 1; height: 4px; border-radius: var(--radius); background: var(--border); overflow: hidden; }
.journey-progress-bar { height: 100%; border-radius: var(--radius); background: var(--role-accent); transition: width 0.4s ease; width: 0%; }
.journey-progress-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.journey-stations { margin-top: 3rem; position: relative; }
.journey-stations::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: var(--border);
}
.journey-station { position: relative; padding-left: 3.5rem; margin-bottom: 2.5rem; }
.journey-station:last-child { margin-bottom: 0; }
.journey-marker {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: border-color 0.3s ease;
}
.journey-station.done .journey-marker { border-color: var(--role-accent); color: var(--role-accent); }
.journey-station-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color 0.3s ease;
}
.journey-station.done .journey-station-card { border-color: var(--role-accent); }
.journey-station-card h3 { font-size: 1.1rem; }
.journey-station-card p { margin-top: 0.5rem; max-width: 32rem; font-size: 0.92rem; }
.journey-station-meta { margin-top: 0.65rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }
.journey-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.journey-toggle.done { color: #fff; border-color: transparent; background: var(--role-accent); }
.journey-done {
  margin-top: 3rem;
  border: 1px solid var(--role-accent);
  border-radius: var(--radius);
  background: rgba(43, 39, 36, 0.035);
  padding: 2rem;
  text-align: center;
  display: none;
}
.journey-done.show { display: block; }
.journey-done p:first-child { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--text-primary); }

/* Lernkarten */
.karten-status {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.karten-status .known { color: var(--role-accent); }
.flashcard-area { margin-top: 2rem; perspective: 1200px; }
.flashcard {
  position: relative;
  width: 100%;
  height: 22rem;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.flashcard.flipped { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
}
.flashcard-face.back { transform: rotateY(180deg); border-color: var(--role-accent); }
.flashcard-face .flashcard-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
}
.flashcard-face.back .flashcard-label { color: var(--role-accent); }
.flashcard-face .flashcard-front-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.flashcard-face .flashcard-back-text { font-size: 1.05rem; line-height: 1.7; color: var(--text-primary); }
.flashcard-hint { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }
.karten-nav { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.karten-mark-row { display: flex; align-items: center; gap: 0.75rem; }

@media (max-width: 640px) {
  .lernen-controls-inner { flex-direction: column; align-items: flex-start; }
  .tutorial-nav, .karten-nav { flex-direction: column; align-items: stretch; }
}

/* Nugget (einfaches Format: nummerierte Abschnitte, kein Block-Renderer) */
.nugget-sections { margin-top: 3rem; display: grid; gap: 2.5rem; }
.nugget-section {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: 1.5rem;
  align-items: start;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}
.nugget-section-num { font-family: var(--font-grotesk); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.nugget-section h3 { font-size: 1.35rem; }
.nugget-section p { margin-top: 0.75rem; max-width: 42rem; }
@media (max-width: 640px) {
  .nugget-section { grid-template-columns: 1fr; }
}

/* Nugget-Beschreibung + Abschluss-Kasten (beide Formate) */
.nugget-desc { margin-top: 2.5rem; max-width: 42rem; font-size: 1.05rem; line-height: 1.7; }
.nugget-takeaway {
  margin-top: 4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 2rem;
}
.nugget-takeaway p { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }

/* Nugget (Block-Format: Text/Akkordeon/Flip/Quiz, fuer Future Skills) */
.nugget-blocks { margin-top: 3rem; display: grid; gap: 3.5rem; }
.nugget-block { border-top: 1px solid var(--border); padding-top: 2.5rem; }
.block-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--role-accent);
}
.block-heading { margin-top: 0.75rem; font-size: 1.4rem; }
.block-body { margin-top: 1rem; max-width: 42rem; line-height: 1.7; }

/* Akkordeon */
.accordion { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.25s ease; }
.accordion-item.open { border-color: var(--role-accent); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-secondary);
}
.accordion-item.open .accordion-trigger { color: var(--text-primary); }
.accordion-trigger .accordion-icon { flex-shrink: 0; transition: transform 0.25s ease; color: var(--text-secondary); }
.accordion-item.open .accordion-trigger .accordion-icon { transform: rotate(90deg); color: var(--role-accent); }
.accordion-panel { display: none; padding: 0 1.4rem 1.3rem; font-size: 0.92rem; line-height: 1.7; color: var(--text-secondary); }
.accordion-item.open .accordion-panel { display: block; }

/* Karteikarten-Grid (mehrere kleine Flip-Karten, Future Skills) */
.flip-grid { margin-top: 1.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); perspective: 1200px; }
.flip-card {
  position: relative;
  height: 13rem;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.flip-card.flipped { transform: rotateY(180deg); }
.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
}
.flip-card-face.back { transform: rotateY(180deg); border-color: var(--role-accent); }
.flip-card-face .flip-card-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
}
.flip-card-face.back .flip-card-label { color: var(--role-accent); }
.flip-card-face .flip-card-front-text { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.flip-card-face .flip-card-back-text { font-size: 0.88rem; line-height: 1.6; }
.flip-card-hint { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); }

/* Quiz Multiple-Choice */
.quiz-mc { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.75rem; }
.quiz-question { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.quiz-options { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.quiz-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  text-align: left;
  transition: border-color 0.2s ease;
}
.quiz-option:not(:disabled):hover { border-color: var(--role-accent); }
.quiz-option .quiz-option-letter {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.quiz-option.correct { border-color: #4ade80; background: rgba(74, 222, 128, 0.08); }
.quiz-option.wrong { border-color: #f87171; background: rgba(248, 113, 113, 0.08); }
.quiz-option .quiz-option-mark { margin-left: auto; font-size: 0.85rem; }
.quiz-option.correct .quiz-option-mark { color: #4ade80; }
.quiz-option.wrong .quiz-option-mark { color: #f87171; }
.quiz-feedback { margin-top: 1.25rem; font-size: 0.9rem; }
.quiz-feedback.ok { color: #4ade80; }
.quiz-feedback.no { color: #f87171; }
.quiz-retry { margin-left: 0.75rem; text-decoration: underline; color: var(--text-secondary); }
.quiz-retry:hover { color: var(--text-primary); }

/* Quiz-Zusammenfassung am Seitenende (nur wenn Blockformat mind. ein Quiz enthaelt) */
.quiz-summary {
  margin-top: 3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.75rem;
}
.quiz-summary p { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.quiz-summary-track { margin-top: 1rem; height: 5px; border-radius: var(--radius); background: var(--border); overflow: hidden; }
.quiz-summary-bar { height: 100%; border-radius: var(--radius); background: var(--role-accent); transition: width 0.4s ease; }

/* Learning Path (Journey-Stationen mit Link zu einem Future-Skills-Kurs) */
.path-station-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--role-accent);
}
.path-station-link:hover { text-decoration: underline; }

/* Future-Skills-Bereich im Dashboard */
.fs-switch-divider { width: 1px; height: 1.5rem; background: var(--border); margin: 0 0.35rem; }
.fs-grid { display: grid; gap: 1.25rem; margin-top: 3rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fs-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.5rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.fs-card:hover { transform: translateY(-4px); border-color: #FF4577; }
.fs-card .fs-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
}
.fs-card h3 { margin-top: 0.6rem; font-size: 1.05rem; }
.fs-card p { margin-top: 0.5rem; flex: 1; font-size: 0.88rem; }
.fs-card .content-meta { margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); }