/* Drei-Ebenen-Weltseiten (Bibliothek / Strecke / Uebung) + gemeinsame "Als Naechstes"-Karte.
   Genutzt von verkauf/fuehrung/rhetorik (welt-ebenen.js) und im Empfangsraum app.html (als-naechstes.js).
   Ruhig, mobil zuerst, Tokens aus css/tokens.css. */

/* ── Als-Naechstes-Karte (gruener Seitenstrich) ── */
.an-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--flaeche-karte, #14141B); border: 1px solid var(--linie, #23232E);
  border-left: 3px solid var(--gruen-primaer, #00C2A8); border-radius: 14px;
  padding: 14px 14px 14px 15px; margin: 0; cursor: pointer; text-decoration: none;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) { .an-card:hover { box-shadow: 0 0 0 3px rgba(0,194,168,0.14); } }
.an-card .an-stripe { display: none; }
.an-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.an-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--gruen-still, #6E9E93); }
.an-titel { font-size: 16px; font-weight: 700; color: var(--text-hell); line-height: 1.3; margin-top: 6px; }
.an-meta { font-size: 12px; color: var(--text-sekundaer); line-height: 1.4; margin-top: 3px; }
.an-quelle { font-size: 12px; color: var(--text-meta); line-height: 1.4; margin-top: 5px; }
.an-chev { flex: 0 0 auto; color: var(--text-meta); }

/* ── Kopf jeder Ebene ── */
.we-head { margin: 6px 0 20px; }
.we-kicker { font-size: 12px; font-weight: 700; letter-spacing: .09em; color: var(--gruen-still, #6E9E93); text-transform: uppercase; }
.we-h1 { font-size: 26px; font-weight: 700; color: var(--text-hell); margin: 6px 0 6px; line-height: 1.15; }
.we-sub { font-size: 15px; color: var(--text-sekundaer); line-height: 1.5; }
/* Welt-Kopf: Weltname als grosse H1 (26px) mit 44px-Portrait daneben, darunter klein "Deine Trainings". */
.we-head--welt .we-head-zeile { display: flex; align-items: center; gap: 12px; }
.we-head--welt .we-h1 { font-size: 26px; margin: 0; min-width: 0; }
.we-head-portrait { flex: 0 0 auto; display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.12); }
.we-head-unter { font-size: 12px; color: var(--text-sekundaer); line-height: 1.4; margin-top: 6px; text-transform: uppercase; letter-spacing: .07em; }

.we-root { width: 100%; max-width: 560px; margin: 0 auto; }
.we-anslot { margin-bottom: 26px; }

/* ── Ebene 1: Strecken als ruhige Liste ── */
.we-liste { border-top: 1px solid var(--linie, #23232E); }
.we-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--linie, #23232E);
  padding: 18px 2px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.we-row-main { min-width: 0; flex: 1; display: block; }
.we-row-titel { display: block; font-size: 16px; font-weight: 600; color: var(--text-hell); line-height: 1.3; }
.we-row-beschr { display: block; font-size: 12px; color: var(--text-sekundaer); line-height: 1.45; margin-top: 4px; }
.we-row-meta { display: inline-block; font-size: 12px; color: var(--text-meta); }
.we-row-fortschritt { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.we-row-bar { flex: 0 0 auto; width: 52px; height: 4px; border-radius: 99px; background: var(--linie, #23232E); overflow: hidden; }
.we-row-bar span { display: block; height: 100%; background: var(--gruen-still, #6E9E93); border-radius: 99px; }
.we-row-chev { flex: 0 0 auto; color: var(--text-meta); }

/* ── Ebene 1: Fusszeilen (freier Einstieg als Kachel + Stil) ── */
.we-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.we-link { background: none; border: none; padding: 0; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--gruen-still, #6E9E93); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
/* (Kachel-Kopf 16px Kartentitel, Sub 15px Fliesstext) */
/* Freier Einstieg als echte Kachel, Optik wie die Wahl-Kacheln der Startseite (.weiche-card). */
.we-frei-kachel {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 20px 18px; border: 1px solid #2A2A35; border-radius: 16px;
  background: linear-gradient(180deg, #1a1a22, #141419);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), border-color 240ms ease, box-shadow 240ms ease;
}
@media (hover: hover) {
  .we-frei-kachel:hover { transform: translateY(-2px); border-color: rgba(0,194,168,0.45); box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 36px rgba(0,194,168,0.45); }
}
.we-frei-kachel:active { transform: translateY(0); }
.we-frei-kachel-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.we-frei-kachel-head { font-size: 16px; font-weight: 600; color: var(--text-hell); line-height: 1.2; }
.we-frei-kachel-sub { font-size: 15px; color: var(--text-sekundaer); line-height: 1.5; }
.we-stil-link { background: none; border: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-meta); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.we-stil-hinweis { font-size: 12px; color: #D69E2E; line-height: 1.5; background: rgba(214,158,46,0.10); border: 1px solid rgba(214,158,46,0.28); border-radius: 10px; padding: 10px 12px; }

/* ── Ebene 2: Strecke als Akkordeon ── */
.we-schritte { display: flex; flex-direction: column; }
.we-step { border-bottom: 1px solid var(--linie, #23232E); }
.we-step-head {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: none; border: none; padding: 14px 2px; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.we-step-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; box-sizing: border-box;
}
.we-step--done .we-step-num { background: rgba(0,194,168,0.16); border: 1px solid rgba(0,194,168,0.4); color: var(--gruen-primaer, #00C2A8); }
.we-step--aktiv .we-step-num { background: var(--gruen-primaer, #00C2A8); color: var(--btn-text-dunkel, #04110E); }
.we-step--kommend .we-step-num { background: none; border: 1px solid var(--linie, #23232E); color: var(--text-meta); }
.we-step--stil .we-step-num { background: rgba(0,194,168,0.12); border: 1px solid rgba(0,194,168,0.35); color: var(--gruen-primaer, #00C2A8); font-weight: 700; }
.we-step-body { min-width: 0; flex: 1; }
.we-step-titel { display: block; font-size: 15px; font-weight: 600; color: var(--text-hell); line-height: 1.35; }
.we-step--kommend .we-step-titel { color: var(--text-meta); font-weight: 500; }
/* Modul-Subzeile (Ebene 2): ein konkreter Satz, was man in dieser Uebung tut. */
.we-step-sub { display: block; font-size: 12px; color: var(--text-meta); line-height: 1.4; margin-top: 3px; }
.we-step--kommend .we-step-sub { color: var(--text-meta); opacity: 0.85; }
.we-step-meta { display: block; font-size: 12px; color: var(--text-sekundaer); margin-top: 2px; }
.we-step .we-row-chev { transition: transform .18s ease; }
.we-step.is-open .we-row-chev { transform: rotate(90deg); }
/* aufgeklappte Karte: buendig unter dem Zeilentitel, NICHT unter den Nummern-Kreis eingerueckt. */
.we-step-panel { padding: 0 2px 16px; }
.we-step-card { background: var(--flaeche-karte, #14141B); border: 1px solid var(--linie, #23232E); border-radius: 12px; padding: 14px; }
/* (1) Kopfzeile: Portrait 44px + Metatext in EINER Zeile. */
.we-step-card-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.we-step-card-portrait { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.12); }
.we-step-card-meta { font-size: 12px; color: var(--text-sekundaer); line-height: 1.4; }
/* (2) Beschreibung linksbuendig. */
.we-step-card-satz { font-size: 15px; color: var(--text-sekundaer); line-height: 1.55; margin: 0; text-align: left; }

/* ── Primaerbutton + Metazeile (aufgeklappte Karte) ── */
/* Ghost-Pill wie ds-btn-primary (Freigabe: alle Buttons Ghost-Pill 40px), mittig, max 280px. */
.we-start { display: block; width: 100%; max-width: 280px; margin: 16px auto 8px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--gruen-primaer, #00C2A8); background: transparent; border: 1.5px solid var(--gruen-primaer, #00C2A8); border-radius: 999px; min-height: 40px; padding: 0 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease; }
.we-start:hover { background: rgba(0,194,168,0.10); }

/* ── Ebene 2: Pfad-Kopf statt Kicker+H1 ── */
.we-head--pfad { margin: 6px 0 18px; }
.we-pfad { font-size: 19px; line-height: 1.3; }
.we-pfad-welt { color: var(--gruen-primaer, #00C2A8); font-weight: 500; }
.we-pfad-sep { color: var(--text-meta); margin: 0 7px; font-weight: 400; }
.we-pfad-titel { color: var(--text-hell); font-weight: 700; }
.we-head--pfad .we-sub { margin-top: 8px; }

/* Zwei Zustaende: geübt = grüner Haken-Kreis (bestehende done-Optik), sonst leerer Kreis, dezenter Rand. */
.we-step--offen .we-step-num { background: none; border: 1px solid var(--linie, #23232E); }

/* Schrittfolge in der aufgeklappten Karte: "Das übst du, in dieser Reihenfolge:" + nummerierte Liste. */
.we-step-folge-head { font-size: 13px; font-weight: 600; color: var(--text-hell); margin: 10px 0 8px; }
.we-step-folge { margin: 0; padding: 0 0 0 22px; list-style: decimal; }
.we-step-folge li { font-size: 14px; color: var(--text-sekundaer); line-height: 1.5; margin: 0 0 4px; padding-left: 2px; }
.we-step-folge-satz { font-size: 15px; color: var(--text-sekundaer); line-height: 1.55; margin: 0; text-align: left; }

/* Frei üben: Trennüberschrift + GESTRICHELTE Kachel (noch nichts vorgegeben), Abstand zur Streckenliste. */
.we-frei-kicker { font-size: 12px; font-weight: 700; letter-spacing: .09em; color: var(--text-meta); text-transform: uppercase; margin: 26px 0 10px; }
.we-frei-kachel--gestrichelt { background: none; border: 1.5px dashed #33333f; box-shadow: none; }
@media (hover: hover) {
  .we-frei-kachel--gestrichelt:hover { border-color: rgba(0,194,168,0.55); box-shadow: none; }
}
.we-startmeta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--text-sekundaer); }
.we-trainer-mini { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.12); }

@media (min-width: 600px) {
  .we-h1 { font-size: 26px; }
}