/* ===========================================================================
   Karrierepfad - gemeinsames Erscheinungsbild
   ---------------------------------------------------------------------------
   Editor (index.html), Mappe (mappe.html), Einladung (einladung.html) und
   die Einstiegsseite (start.html) teilen sich diese Datei. Vorher trug jede Seite ihre eigenen Farben und
   Abstaende - zwei Oberflaechen desselben Produkts sahen aus wie zwei
   Produkte, und jede Aenderung musste man dreimal machen.

   Der Entwurf stammt aus karrierepfad-website (Karrierepfad Studio). Uebernommen ist
   die letzte Fassung: Intuitive-Blau auf Weiss, ruhige Flaechen, Schatten nur
   dort, wo etwas wirklich ueber dem Blatt liegt. Die drei aelteren Fassungen
   des Entwurfs (Oliv, Royalblau, Studio-Verlauf) sind bewusst NICHT
   mituebernommen - sie lagen dort nur als uebereinandergelegte Schichten.
   =========================================================================== */

:root{
  /* Leitfarben. --akzent traegt die Aktion, --akzent-dunkel die Schrift auf
     hellem Grund (fuer Kontrast), --akzent-tief den Fuss der Verlaeufe. */
  --akzent:#3449ed;
  --akzent-dunkel:#19247c;
  --akzent-tief:#020b35;
  --akzent-hell:#eef1ff;
  --akzent-hell2:#e8ebff;
  /* Der Verlauf der Hauptaktion steht hier und nicht im Knopf: er wird an
     mehreren Stellen gebraucht (gross, klein, jeweils mit Hover), und vier
     ausgeschriebene Verlaeufe laufen beim naechsten Anfassen auseinander. */
  --akzent-verlauf:linear-gradient(100deg,var(--akzent-tief) 0%,var(--akzent-dunkel) 48%,var(--akzent) 100%);
  --akzent-verlauf-hover:linear-gradient(100deg,#02082a,#131d69 52%,#283ccf);
  /* Derselbe Verlauf fuer grosse Flaechen (Videoflaeche, Standkarte der
     Buehne): diagonal statt flach, damit er auf 16:9 nicht wie ein
     breiter Knopf aussieht. */
  --akzent-verlauf-flaeche:linear-gradient(135deg,var(--akzent-tief),var(--akzent-dunkel) 60%,var(--akzent));

  /* Die Schriften (v3.5, aus dem Prototyp der Buehne): Inter fuer alles,
     Newsreader nur dort, wo ein Satz gross stehen darf - Titel und
     Leitfragen der Einstiegsseite. Die Dateien liegen unter
     static/schriften/ (schriften.css); fehlen sie, greifen Georgia und
     Segoe UI, und die Seite bleibt lesbar. Nicht von Google laden: Eine
     Seite, auf der jemand ueber sich redet, ruft keinen Dritten. */
  --schrift:Inter,"Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif;
  --schrift-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --schrift-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  --dunkel:#11162b;
  --text:#272c3d;
  --sekundaer:#6f7481;
  --leise:#9296a1;
  /* --leise faellt auf Weiss unter 3:1 - fuer reine Zier vertretbar, fuer
     Text nicht. Wo leiser Text lesbar bleiben muss (Nebenzeilen, kleine
     Ueberschriften), gilt diese Stufe: mindestens 4,5:1 auf Weiss. */
  --leise-lesbar:#5f6575;

  --linie:#e4e6eb;
  --linie-zart:#eff0f3;
  --flaeche:#ffffff;
  --flaeche-still:#f7f7f9;
  --flaeche-tief:#f1f2f5;

  --fehler:#b4321f;
  --fehler-hell:#fdeeec;
  --warn:#8a6412;
  --warn-hell:#fff6e4;
  --ok:#2f6a2a;
  --ok-hell:#edf6ea;

  --schatten:0 18px 46px rgba(2,11,53,.08);
  --schatten-karte:0 6px 22px rgba(2,11,53,.045);

  /* Das Massystem (UX-Ueberarbeitung, Oktober 2026). Vorher standen in den
     Seiten 21 verschiedene Schriftgroessen zwischen 8 und 30 px und 17
     Rundungen - jede fuer sich begruendet, zusammen ein Rauschen. Hier
     steht die Skala; die Komponenten nehmen einen Wert daraus, nie einen
     eigenen. tests/rauch_stil.py haelt das. Wer eine Zwischengroesse
     braucht, nimmt die naechste Stufe - der Unterschied von einem halben
     Pixel ist mit dem Auge nicht zu sehen, der Wildwuchs schon. */
  --groesse-11:11px;   /* Versalien-Beschriftungen mit Sperrung */
  --groesse-12:12px;   /* Marken, Pillen, Fussnoten */
  --groesse-13:13px;   /* Nebenzeilen, Chips, kleine Knoepfe */
  --groesse-14:14px;   /* Grundschrift des Editors */
  --groesse-16:16px;   /* Lesetext des Kandidaten, Felder am Telefon */
  --groesse-18:18px;
  --groesse-20:20px;
  --groesse-24:24px;
  --groesse-28:28px;
  --groesse-32:32px;
  --abstand-1:4px;
  --abstand-2:8px;
  --abstand-3:12px;
  --abstand-4:16px;
  --abstand-6:24px;
  --abstand-8:32px;
  --rund-klein:8px;    /* Chips, Menueeintraege, kleine Flaechen */
  --rund:12px;         /* Knoepfe, Felder, Pillen in Kaesten */
  --rund-mittel:16px;  /* Karten */
  --rund-gross:20px;   /* Blaetter und Standkarte */
  --rund-voll:999px;   /* Pillen und runde Knoepfe */

  /* Die uebrigen Werte, die bisher als Hex in den Komponenten standen -
     an einer Stelle, damit sie sich gemeinsam anpassen lassen. */
  --weiss:#ffffff;
  --linie-knopf:#dedfe4;
  --linie-feld:#e0e2e7;
  --linie-hover:#c6cad3;
  --ok-linie:#cfe4c8;
  --fehler-linie:#f2cec7;
  --warn-linie:#f0dfb4;
  --meldung-schlecht:#5c1a12;
  /* Der Fokusring ist voll gedeckt: Bis Oktober 2026 war er der Akzent mit
     30 % Deckung und kam auf Weiss auf etwa 1,7:1 - WCAG verlangt fuer
     eine Fokusanzeige 3:1, und mit der Tastatur sah man kaum, wo man war.
     Der weiche Wert bleibt fuer den Puls des Fuehrungsknopfs. */
  --fokus:var(--akzent);
  --fokus-weich:rgba(52,73,237,.30);
  --fokus-hell:rgba(52,73,237,.09);
  --akzent-linie:#d6dbf3;
  /* Die drei Farbpaare der Namenszeichen in der Kandidatenliste des
     Editors (das vierte ist der Akzent). Vorher als Hex in editor.css. */
  --zeichen-1:#1d6e8c;--zeichen-1-hell:#e2f1f8;
  --zeichen-2:#8a5a2b;--zeichen-2-hell:#f8eee1;
  --zeichen-3:#6a4a8c;--zeichen-3-hell:#efe8f8;
  /* Eine gefuellte Flaeche mit weisser Schrift (Typ-Marke, gewaehlter
     Knopf): eigener Name, damit eine Flaeche nie eine Schriftfarbe erbt -
     bis v3.8 trug die Nachtpalette hier einen anderen Wert. */
  --akzent-flaeche:var(--akzent-dunkel);
  --typ-bruecke:#2c6e8c;
  --typ-wunsch:#8a5a2b;
}

*{box-sizing:border-box}

/* Das hidden-Attribut wirkt nur ueber die Browser-Regel display:none, und
   die verliert gegen jede Klasse mit eigenem display (.knopf, .haupt ...).
   So standen "Meine Mappe" und "Anforderungen" im Kopf, obwohl das Skript
   sie verborgen hatte. Einmal hier statt je Element ein #id[hidden]. */
[hidden]{display:none!important}

html,body{background:var(--flaeche)}
body{
  margin:0;
  color:var(--text);
  font:14px/1.45 var(--schrift);
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
}

button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
button,input,textarea,select{
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,
             color .18s ease,transform .18s ease;
}
a{color:var(--akzent-dunkel)}

/* Ein sichtbarer Fokusring ueberall. Der Editor laesst sich mit der Tastatur
   bedienen; ohne Ring weiss man nicht, wo man ist. */
button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,a:focus-visible,[contenteditable]:focus-visible{
  outline:3px solid var(--fokus);
  outline-offset:2px;
}

.sprunglink{
  position:fixed;top:-90px;left:16px;z-index:200;
  padding:10px 15px;border-radius:var(--rund);
  color:var(--weiss);background:var(--akzent-tief);text-decoration:none;
}
.sprunglink:focus{top:12px}

/* --- Symbole ------------------------------------------------------------- */
/* Als Sprite im Dokument, nicht als Zeichen aus der Schrift: Glyphen wie
   "⌂" sehen je nach installierter Schrift anders aus oder fehlen ganz. */
.sym{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;
     stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- Knoepfe ------------------------------------------------------------- */
.knopf,.haupt,.klein{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:var(--rund);font-weight:600;
}
.knopf,.haupt{min-height:40px;padding:0 17px}
.knopf{border:1px solid var(--linie-knopf);color:var(--dunkel);background:var(--flaeche)}
.knopf:hover{border-color:var(--linie-hover);box-shadow:0 5px 14px rgba(2,11,53,.06)}
.haupt{
  border:1px solid transparent;color:var(--weiss);
  background:var(--akzent-verlauf);
  box-shadow:0 10px 24px rgba(25,36,124,.22);
}
.haupt:hover{
  background:var(--akzent-verlauf-hover);
  box-shadow:0 12px 27px rgba(25,36,124,.27);
}
.haupt:disabled,.knopf:disabled{opacity:.55;cursor:default;box-shadow:none;transform:none}
.klein{
  min-height:30px;padding:0 11px;font-size:var(--groesse-13);font-weight:600;
  border:1px solid var(--linie);border-radius:var(--rund-klein);
  color:var(--dunkel);background:var(--flaeche);
}
.klein:hover{border-color:var(--linie-hover);background:var(--flaeche-still)}
/* Der kleine Hauptknopf muss den Hintergrund selbst mitbringen: `.klein` steht
   weiter unten als `.haupt` und ist gleich stark, seine weisse Flaeche gewinnt
   sonst - weisse Schrift auf weissem Grund, der Knopf war praktisch
   unsichtbar. Dasselbe gilt fuer den Hover. */
.klein.haupt{
  min-height:30px;padding:0 12px;border-color:transparent;color:var(--weiss);
  background:var(--akzent-verlauf);
  box-shadow:0 6px 16px rgba(25,36,124,.18);
}
.klein.haupt:hover{
  border-color:transparent;background:var(--akzent-verlauf-hover);
  box-shadow:0 8px 19px rgba(25,36,124,.24);
}
.klein:disabled{opacity:.5;cursor:default}
/* Ein Knopf, der aussieht wie Text - fuer "+ Absatz", "+ Station" und alles,
   was etwas hinzufuegt, ohne sich in den Vordergrund zu draengen. */
.textknopf{
  border:0;background:transparent;padding:2px 0;margin-top:12px;
  color:var(--akzent-dunkel);font-size:var(--groesse-13);font-weight:650;
}
.textknopf:hover{text-decoration:underline}
.iconknopf{
  width:36px;height:36px;display:inline-grid;place-items:center;
  border:1px solid var(--linie-knopf);border-radius:var(--rund);
  color:var(--sekundaer);background:var(--flaeche);
}
.iconknopf:hover{border-color:var(--linie-hover);color:var(--dunkel)}

/* --- Formularfelder ------------------------------------------------------ */
label{display:block;margin:12px 0 5px;color:var(--sekundaer);
      font-size:var(--groesse-11);font-weight:650}
input[type=text],input[type=search],input[type=password],input[type=email],input[type=number],input[type=url],input[type=date],textarea,select{
  width:100%;
  border:1px solid var(--linie-feld);border-radius:var(--rund);
  padding:0 13px;background:var(--flaeche);color:var(--dunkel);
}
input[type=text],input[type=search],input[type=password],input[type=email],input[type=number],input[type=url],input[type=date],select{height:43px}
textarea{padding:12px 13px;min-height:78px;resize:vertical;line-height:1.55}
input:hover,textarea:hover,select:hover{border-color:var(--linie-hover)}
input:focus,textarea:focus,select:focus,[contenteditable]:focus{
  outline:none;border-color:var(--akzent);
  box-shadow:0 0 0 4px var(--fokus-hell);
}
input[type=file]{font-size:var(--groesse-13);margin:4px 0}
input[type=color]{
  width:100%;height:40px;padding:3px;cursor:pointer;
  border:1px solid var(--linie);border-radius:var(--rund);background:var(--flaeche);
}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* --- Karten und Text ----------------------------------------------------- */
.hinweis{margin:5px 0 0;color:var(--sekundaer);font-size:var(--groesse-12);line-height:1.55}
.hinweis.warn{color:var(--warn)}
.hinweis.fehler{color:var(--fehler)}

.karte{
  border:1px solid var(--linie);border-radius:var(--rund-mittel);
  padding:17px 19px;margin-bottom:12px;background:var(--flaeche);
}

/* Meldungsfelder: gruen wenn es geklappt hat, rot wenn nicht. Sie stehen
   dort, wo die Aktion war - nicht als Fenster ueber allem. */
.melden{display:none;margin-top:12px;padding:10px 13px;border-radius:var(--rund);
        font-size:var(--groesse-13)}
.melden.gut{display:block;color:var(--ok);background:var(--ok-hell);
            border:1px solid var(--ok-linie)}
.melden.schlecht{display:block;color:var(--fehler);background:var(--fehler-hell);
                 border:1px solid var(--fehler-linie)}

/* Zustandspille. Dieselben Farben nach derselben Logik ueberall: neutral
   solange offen, gruen wenn etwas Gutes passiert ist, rot beim Aus. */
.stand{
  display:inline-block;padding:4px 11px;border-radius:var(--rund-voll);
  font-size:var(--groesse-12);font-weight:600;
  color:var(--sekundaer);background:var(--flaeche-tief);
}
.stand.wartet{color:var(--warn);background:var(--warn-hell)}
.stand.offen,.stand.laeuft,.stand.versendet{color:var(--akzent-dunkel);background:var(--akzent-hell)}
.stand.geliefert,.stand.eingeladen,.stand.zusage{color:var(--ok);background:var(--ok-hell)}
.stand.abgelehnt,.stand.absage{color:var(--fehler);background:var(--fehler-hell)}
.stand.entwurf,.stand.zurueckgezogen{color:var(--sekundaer);background:var(--flaeche-tief)}

/* Kurze Rueckmeldung unten rechts. Ersetzt die frueheren Meldungen, die im
   Kopf verschwanden, bevor man hingesehen hatte. */
/* Der Raum fuer diese Meldungen (js/meldung.js legt ihn an): Neue reihen sich
   untereinander ein, statt die alte sofort zu verdraengen. Der Raum traegt
   die feste Position, damit sich der Stapel als Ganzes setzt; die einzelne
   Meldung steht darin im Fluss. */
.meldungen{position:fixed;right:24px;bottom:24px;z-index:120;
           display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.meldungen .meldung{position:static}
.meldung{
  position:fixed;right:24px;bottom:24px;z-index:120;
  display:flex;align-items:center;gap:10px;max-width:380px;
  padding:13px 16px;border-radius:var(--rund-mittel);
  color:var(--weiss);background:var(--akzent-tief);border:1px solid var(--akzent-tief);
  box-shadow:0 16px 38px rgba(2,11,53,.25);
  animation:einblenden .18s ease-out;
}
.meldung.schlecht{background:var(--meldung-schlecht);border-color:var(--meldung-schlecht)}
/* Eine Meldung mit Folgeschritt (js/meldung.js, melden({text, aktion})) ist
   anklickbar - der Pfeil sagt es, der Zeiger bestaetigt es. */
.meldung.klickbar{cursor:pointer}
.meldung.klickbar:hover{filter:brightness(1.18)}
.meldung .weiter{margin-left:4px;font-weight:700}
.meldung .punkt{width:20px;height:20px;display:grid;place-items:center;
                border-radius:50%;background:rgba(255,255,255,.16);flex:0 0 auto}
@keyframes einblenden{from{opacity:0;transform:translateY(8px)}}
/* Die Wartezeile von js/api.js: unten in der Mitte, damit sie sich nicht
   mit den Meldungen rechts stapelt; der Punkt pulst, der Knopf bricht ab. */
.meldung.warten{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 32px)}
.meldung.warten .punkt{background:var(--weiss);width:10px;height:10px;animation:warten-puls 1.2s ease-in-out infinite}
.meldung.warten .abbrechen{margin:0 0 0 4px;border:0;border-radius:var(--rund-klein);padding:7px 11px;min-height:36px;
  background:rgba(255,255,255,.16);color:var(--weiss);font-weight:600;font-size:var(--groesse-13)}
.meldung.warten .abbrechen:hover{background:rgba(255,255,255,.28)}
@keyframes warten-puls{50%{opacity:.35}}

/* Ladezustand (v3.9): graue Platzhalter in der Form des spaeteren Inhalts
   statt eines Satzes - die Seite springt beim Fuellen nicht, und wer keine
   Bewegung will, sieht stehende Flaechen (unten). */
.skelett{display:grid;gap:12px;padding:6px 0}
.skelett i{display:block;border-radius:var(--rund);background:linear-gradient(90deg,var(--flaeche-tief) 25%,var(--flaeche-still) 50%,var(--flaeche-tief) 75%);
           background-size:200% 100%;animation:schimmer 1.4s linear infinite}
.skelett .zeile{height:14px;width:60%}
.skelett .zeile.kurz{width:34%}
.skelett .block{height:110px;border-radius:var(--rund-gross)}
.skelett .karte{height:150px}
@keyframes schimmer{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;
                       scroll-behavior:auto!important}
}

/* Am Telefon (UX-Ueberarbeitung, Oktober 2026): Wer mit dem Finger zielt,
   braucht 44 px, und ein Feld unter 16 px laesst iOS Safari beim Antippen
   in die Seite zoomen - danach steht die Mappe schief im Fenster. Beides
   haengt am Zeigegeraet, nicht an der Breite: Ein Tablet mit Tastatur hat
   das Problem nicht, ein kleines Telefon im Querformat schon. Die Werte
   gelten fuer alle Seiten; der Editor wird am Telefon ohnehin nicht
   bedient und verliert dadurch nichts. */
@media (pointer:coarse){
  /* !important, weil das ein Boden ist, kein Vorschlag: Die Seiten setzen
     ihren kleinen Knoepfen eigene Hoehen (.zweit.klein, .faecher button),
     und die stehen spaeter im Dokument. Der Boden muss gegen jede davon
     gewinnen, sonst gilt er nur dort, wo zufaellig niemand widerspricht. */
  .knopf,.haupt,.klein,.zweit,.textknopf,.iconknopf,.fuehrung,button.textknopf,
  .faecher button,.entscheidung button,.job .link,.punkte summary,.link,
  .schritte button,.mappe-reiter a,.aufgabe,.termin,.richtungswahl,
  .kopfleiste .wer a,.zurueck{min-height:44px!important}
  .kopfleiste .wer a,.zurueck{display:inline-flex;align-items:center}
  .menue button,.menue a{min-height:44px}
  .beschreibung summary,.job .firma a,.erklaerung a{display:inline-block;padding:12px 0}
  .iconknopf{min-width:44px}
  .textknopf{padding:10px 0}
  input[type=text],input[type=search],input[type=password],input[type=email],
  input[type=number],input[type=url],input[type=date],input[type=tel],
  textarea,select{font-size:var(--groesse-16)!important;height:auto;min-height:46px!important}
  textarea{min-height:96px!important}
}

/* Die Toolfuehrung (v3.12.1): ein Knopf im Kopf von Mappe und
   Einstiegsseite, der zur generischen Fuehrung (/fuehrung) fuehrt. Er
   pulst, bis er einmal gedrueckt wurde (js/fuehrung.js merkt sich das im
   Browser) - ein weicher Ring statt eines harten Blinkens, und wer weniger
   Bewegung will, bekommt einen stehenden Rahmen. */
.fuehrung{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--rund-voll);
  background:var(--akzent-flaeche);color:var(--weiss);text-decoration:none;
  font-size:var(--groesse-13);font-weight:600;white-space:nowrap;flex:none;
}
/* Auf einem schmalen Telefon schrumpfte der Knopf in der Kopfleiste zu
   einem leeren Oval, weil er als Flex-Kind nachgab. Jetzt gibt er nicht
   nach und zeigt unter 480 px das kuerzere Wort; der volle Name steht
   im aria-label des Links. */
@media (max-width:480px){
  .fuehrung span{display:none}
  .fuehrung::after{content:"Führung"}
}

/* --- Die Kopfleiste der Kandidatenseiten ---------------------------------
   Mappe, Einstiegsseite, Fragebogen und Weg trugen bis Oktober 2026 je
   eine eigene Kopie dieser Regeln. Einmal hier, mit dem, was am Telefon
   fehlte: Das Logo gibt nicht mehr bis auf 30 px nach, die Links brechen
   nicht mehr in zwei Zeilen. Der Editor hat seine eigene Markenzeile. */
.kopfleiste{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:flex-end;
            padding:14px 24px;background:var(--flaeche-still)}
.markenlogo{
  width:min(160px,38vw);flex:none;margin-right:auto;aspect-ratio:597/63;display:block;
  background:linear-gradient(90deg,var(--akzent-tief) 0 9.55%,
             var(--dunkel) 9.55% 67.85%,var(--akzent) 67.85% 100%);
  -webkit-mask:url("karrierepfad-logo.svg") center / contain no-repeat;
  mask:url("karrierepfad-logo.svg") center / contain no-repeat;
}
.kopfleiste .wer{margin-left:auto;display:flex;gap:12px;align-items:center;min-width:0;
                 color:var(--sekundaer);font-size:var(--groesse-13)}
.kopfleiste .wer a{color:var(--akzent-dunkel);text-decoration:none;white-space:nowrap}
.kopfleiste .wer a:hover{text-decoration:underline}
/* Der Fuehrungsknopf steht auf /weg innerhalb von .wer und erbte dort die
   Linkfarbe: dunkle Schrift auf dunklem Grund, ein scheinbar leerer Knopf.
   Die Regel hier ist spezifischer als die Linkregel darueber. */
.kopfleiste .wer a.fuehrung{color:var(--weiss);text-decoration:none}
@media (max-width:640px){.kopfleiste{padding:12px 16px;gap:10px}}
.fuehrung::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--weiss);opacity:.9}
.fuehrung:hover{background:var(--akzent)}
.fuehrung.blinkt{animation:fuehrung-puls 2.2s ease-in-out infinite}
.fuehrung.blinkt::before{animation:fuehrung-punkt 2.2s ease-in-out infinite}
@keyframes fuehrung-puls{
  0%,100%{box-shadow:0 0 0 0 var(--fokus-weich)}
  55%{box-shadow:0 0 0 10px rgba(52,73,237,0)}
}
@keyframes fuehrung-punkt{0%,100%{opacity:.9}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){
  .fuehrung.blinkt,.fuehrung.blinkt::before{animation:none}
  .fuehrung.blinkt{outline:3px solid var(--fokus);outline-offset:2px}
}

/* Die Weg-Karte (v3.13, entscheidungen/0012): der Weg als Wanderkarte,
   gezeichnet von js/weg.js - auf dem Reiter Start der Mappe und auf /weg
   vor dem Fragebogen. Die Toene der Landschaft stehen hier als Variablen,
   weil die Karte die einzige Flaeche ist, die Gruen und Sand braucht; das
   Modul selbst kennt keinen Hex-Wert. Die drei Richtungen tragen die
   Farben, die die Mappe ohnehin hat: Akzent, ok, warn. */
:root{
  --weg-land:#f4f5f0;--weg-land2:#eceee6;--weg-huegel:#e4ebe0;--weg-huegel2:#d9e3d3;
  --weg-baum:#cfdcc6;--weg-baum2:#bfd0b4;--weg-stamm:#b9ab93;--weg-wasser:#e2eaf3;
  --weg-pfad:#e8e0cf;--weg-spur:#b9ab93;--weg-berg:#d4dccf;--weg-berg2:#c6d0c0;--weg-schnee:#f7f8f4;
  --weg-fels:#d9d9d3;--weg-holz:#b9a68a;--weg-haut:#f1d5bd;--weg-bart:#eceae3;
  --weg-ork:#6f7d5c;--weg-ork-auge:#f3d35b;
  --weg-kern:var(--akzent);--weg-bruecke:var(--ok);--weg-wunsch:var(--warn);
  /* Der Pfad (v3.15, entscheidungen/0013): Gold und die Stufen des
     Nachtblaus fuer die Nachtkarte ueber dem Pfad. Gold steht nur auf
     Dunkelblau, nie als Schrift auf Weiss - dort reicht der Kontrast nicht. */
  --gold:#d4b062;--gold-hell:#ecd9a4;
  --weg-nacht:#020b35;--weg-nacht2:#0a1547;--weg-nacht3:#13205c;--weg-nacht4:#1c2b73;--weg-dunst:#2a3a86;
}
/* Die Nachtkarte des Pfads (js/weg.js, pfadKarte). */
.pfadkarte{border-radius:var(--rund-mittel);overflow:hidden;background:var(--weg-nacht);box-shadow:0 10px 24px rgba(2,11,53,.18)}
.pfadkarte svg{display:block;width:100%;height:auto}
.pfadkarte .pk-stern{fill:var(--gold-hell);opacity:.5}
.pfadkarte .pk-stern.f{animation:pk-funkeln 4s ease-in-out infinite alternate}
@keyframes pk-funkeln{from{opacity:.15}to{opacity:.7}}
.pfadkarte .pk-berg-fern{fill:var(--weg-nacht2)}.pfadkarte .pk-berg{fill:var(--weg-nacht3)}
.pfadkarte .pk-grat{fill:none;stroke:var(--gold);stroke-width:.7;opacity:.4}
.pfadkarte .pk-hoehe{fill:none;stroke:var(--gold);stroke-width:.5;stroke-dasharray:2 5;opacity:.25}
.pfadkarte .pk-pfad{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:1 5;stroke-linecap:round;opacity:.45}
.pfadkarte .pk-gegangen{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(212,176,98,.6))}
.pfadkarte .pk-ast{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:1 5;stroke-linecap:round;opacity:.45}
.pfadkarte .pk-ende circle{fill:var(--gold)}
.pfadkarte .pk-ende text{font:italic 500 8.5px var(--schrift-serif);fill:var(--gold-hell)}
.pfadkarte .pk-ende{transition:opacity 1.2s ease 1s}
.pfadkarte .zu .pk-ende{opacity:0}
.pfadkarte .pk-name{font:500 7.6px var(--schrift);letter-spacing:.09em;text-transform:uppercase;fill:var(--gold-hell)}
.pfadkarte .pk-name.leise{opacity:.42}
.pfadkarte .pk-name.dunst{opacity:.6}
.pfadkarte .pk-ring{fill:var(--weg-nacht);stroke:var(--gold);stroke-width:1.4;opacity:.45}
.pfadkarte .pk-tor.fertig .pk-ring{fill:var(--gold);opacity:1}
.pfadkarte .pk-tor.jetzt .pk-ring{opacity:1;stroke-width:1.8}
.pfadkarte .pk-kern{fill:var(--gold-hell)}
.pfadkarte .pk-schein-a{stop-color:var(--gold);stop-opacity:.55}
.pfadkarte .pk-schein-b{stop-color:var(--gold);stop-opacity:0}
.pfadkarte .pk-schein{fill:url(#pk-schein);transform-box:fill-box;transform-origin:center;animation:pk-atmen 3.2s ease-in-out infinite}
@keyframes pk-atmen{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.pfadkarte .pk-dunst{transition:opacity 2.4s ease,transform 2.4s ease;animation:pk-ziehen 11s ease-in-out infinite alternate}
.pfadkarte .pk-dunst ellipse{fill:var(--weg-dunst);opacity:.85}
@keyframes pk-ziehen{from{transform:translateX(-6px)}to{transform:translateX(8px)}}
.pfadkarte .pk-dunst.gelichtet{opacity:0;transform:translateX(40px);animation:none}
.pfadkarte .pk-torbogen path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;opacity:.5;transition:opacity 1s}
.pfadkarte .pk-torbogen.offen path{opacity:1}
.pfadkarte .pk-torlicht{fill:url(#pk-schein);opacity:0;transition:opacity 1.2s ease .3s}
.pfadkarte .pk-torbogen.offen .pk-torlicht{opacity:1}
.pfadkarte .pk-wanderer .kopf{fill:var(--gold-hell)}
.pfadkarte .pk-wanderer .linie,.pfadkarte .pk-wanderer .bein{stroke:var(--weiss);stroke-width:1.7;stroke-linecap:round}
.pfadkarte .pk-wanderer .rucksack{fill:var(--gold)}
/* Kapitel 2 (v3.16, entscheidungen/0014): die Karte der Aeste auf Start.
   Dieselbe Nacht wie der Pfad - Gold auf Dunkelblau -, darunter die Aeste
   als Liste. Die Laterne atmet, solange die Suche laeuft; neue Lichter
   atmen; der Rucksack am Pfahl fuellt sich, wenn der Grundlebenslauf steht. */
.kapitelkarte{display:grid;gap:12px;align-items:start}
.kapitelkarte > .eyebrow{display:flex;align-items:center;gap:8px;color:var(--weg-nacht4)}
.kapitelkarte > .eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--gold)}
.kapitel-inhalt{display:grid;gap:12px}
.kapitelkarte-land{border-radius:var(--rund-mittel);overflow:hidden;background:var(--weg-nacht);box-shadow:0 10px 24px rgba(2,11,53,.18)}
.kapitelkarte-land svg{display:block;width:100%;height:auto}
.kapitelkarte-land .kk-stern{fill:var(--gold-hell);opacity:.5}
.kapitelkarte-land .kk-stern.f{animation:pk-funkeln 4s ease-in-out infinite alternate}
.kapitelkarte-land .kk-berg-fern{fill:var(--weg-nacht2)}.kapitelkarte-land .kk-berg{fill:var(--weg-nacht3)}
.kapitelkarte-land .kk-grat{fill:none;stroke:var(--gold);stroke-width:.7;opacity:.4}
.kapitelkarte-land .kk-hoehe{fill:none;stroke:var(--gold);stroke-width:.5;stroke-dasharray:2 5;opacity:.25}
.kapitelkarte-land .kk-name{font:500 7.6px var(--schrift);letter-spacing:.09em;text-transform:uppercase;fill:var(--gold-hell)}
.kapitelkarte-land .kk-name.leise{opacity:.42}
.kapitelkarte-land .kk-torbogen path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.kapitelkarte-land .kk-schein-a{stop-color:var(--gold);stop-opacity:.55}
.kapitelkarte-land .kk-schein-b{stop-color:var(--gold);stop-opacity:0}
.kapitelkarte-land .kk-torlicht{fill:url(#kk-schein)}
.kapitelkarte-land .kk-treffer{fill:none;stroke:transparent;stroke-width:22;cursor:pointer}
.kapitelkarte-land .kk-ast{fill:none;stroke:var(--gold);stroke-width:1.3;stroke-dasharray:1 5;stroke-linecap:round;opacity:.5;pointer-events:none}
.kapitelkarte-land .kk-ast-gruppe.an .kk-ast{stroke-dasharray:none;stroke-width:2.2;opacity:1;filter:drop-shadow(0 0 3px rgba(212,176,98,.6))}
.kapitelkarte-land .kk-ast-gruppe:focus-visible{outline:none}
.kapitelkarte-land .kk-ast-gruppe:focus-visible .kk-ast{stroke-width:2.2;opacity:1}
.kapitelkarte-land .kk-ende{fill:var(--gold);opacity:.6}
.kapitelkarte-land .kk-zahlkreis{fill:var(--gold)}
.kapitelkarte-land .kk-zahl{font:600 8px var(--schrift);fill:var(--weg-nacht)}
.kapitelkarte-land .kk-laterne .pfahl{stroke:var(--gold);stroke-width:1}
.kapitelkarte-land .kk-laterne .glas{fill:var(--weg-nacht);stroke:var(--gold);stroke-width:1.2}
.kapitelkarte-land .kk-laterne .flamme{fill:var(--gold-hell)}
.kapitelkarte-land .kk-laterne .schein{fill:none}
.kapitelkarte-land .kk-laterne.laeuft .schein{fill:url(#kk-schein);transform-box:fill-box;transform-origin:center;animation:pk-atmen 3.2s ease-in-out infinite}
.kapitelkarte-land .kk-laterne.wartet .flamme,.kapitelkarte-land .kk-laterne.offen .flamme{opacity:.35}
.kapitelkarte-land .kk-laterne.wartet .glas{opacity:.6}
.kapitelkarte-land .kk-laterne.aus .flamme{display:none}
.kapitelkarte-land .kk-laterne.aus .glas{stroke:var(--leise);opacity:.5}
.kapitelkarte-land .kk-rucksack rect,.kapitelkarte-land .kk-rucksack path{fill:none;stroke:var(--gold);stroke-width:.9;opacity:.5}
.kapitelkarte-land .kk-rucksack.voll rect{fill:var(--gold);opacity:1}
.kapitelkarte-land .kk-rucksack.voll path{opacity:1}
.kapitelkarte-land .kk-licht{fill:var(--gold-hell)}
.kapitelkarte-land .kk-licht.neu{fill:var(--gold);transform-box:fill-box;transform-origin:center;animation:pk-atmen 2.6s ease-in-out infinite}
.kapitelkarte-land .kk-licht.weg{fill:var(--leise);opacity:.35}
.kapitelkarte-land .kk-fahne line{stroke:var(--gold-hell);stroke-width:1.1}
.kapitelkarte-land .kk-fahne path{fill:var(--weg-nacht);stroke:var(--gold);stroke-width:1}
.kapitelkarte-land .kk-fahne.voll path{fill:var(--gold)}
.kapitelkarte-land .kk-wanderer .kopf{fill:var(--gold-hell)}
.kapitelkarte-land .kk-wanderer .linie,.kapitelkarte-land .kk-wanderer .bein{stroke:var(--weiss);stroke-width:1.7;stroke-linecap:round}
.kapitelkarte-land .kk-wanderer .rucksack{fill:var(--gold)}
/* Die Aeste als Liste: je Jobrichtung eine Zeile mit Laterne (als Satz),
   der Zahl neuer Vorschlaege und dem Weg zum Grundlebenslauf. */
.astliste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.astliste li{border:1px solid var(--linie);border-radius:var(--rund-mittel);background:var(--flaeche);overflow:hidden}
.astliste li.an{border-color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent)}
.astliste .ast{width:100%;display:flex;gap:var(--abstand-3);align-items:center;padding:10px 12px;margin:0;border:0;
  background:transparent;text-align:left;color:var(--dunkel);min-height:52px;cursor:pointer}
.astliste .ast:hover{background:var(--flaeche-still)}
.astliste .typ{flex:none;font:500 var(--groesse-11) var(--schrift);letter-spacing:.1em;text-transform:uppercase;font-style:normal;
  min-width:52px;color:var(--sekundaer)}
.astliste .typ.kern{color:var(--weg-kern)}.astliste .typ.bruecke{color:var(--weg-bruecke)}.astliste .typ.wunsch{color:var(--weg-wunsch)}
.astliste .text{min-width:0;display:grid;flex:1}
.astliste .text b{font-size:var(--groesse-14);font-weight:600;line-height:1.3}
.astliste .text small{font-size:var(--groesse-13);color:var(--leise-lesbar)}
.astliste .zahl{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:var(--rund-voll);background:var(--weg-nacht);color:var(--gold-hell);
  font-size:var(--groesse-13);font-weight:600;display:grid;place-items:center}
.astliste .zahl.leer{background:var(--flaeche-tief);color:var(--leise-lesbar)}
.astliste .grundlage{display:flex;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--linie-zart);
  font-size:var(--groesse-13);color:var(--leise-lesbar);text-decoration:none;min-height:44px}
.astliste .grundlage span{margin-left:auto;color:var(--akzent-dunkel);font-weight:600;white-space:nowrap}
.astliste .grundlage:hover span{text-decoration:underline;text-underline-offset:2px}
.astliste .rucksack{flex:none;width:12px;height:15px;border:1.5px solid var(--linie-hover);border-radius:4px 4px 5px 5px;position:relative}
.astliste .rucksack::before{content:"";position:absolute;left:2px;right:2px;top:-5px;height:5px;border:1.5px solid var(--linie-hover);border-bottom:0;border-radius:4px 4px 0 0}
.astliste .grundlage.da{color:var(--text)}
.astliste .grundlage.da .rucksack{background:var(--weg-nacht);border-color:var(--weg-nacht)}
.astliste .grundlage.da .rucksack::before{border-color:var(--weg-nacht)}
@media (prefers-reduced-motion:reduce){
  .kapitelkarte-land .kk-stern.f,.kapitelkarte-land .kk-laterne .schein,.kapitelkarte-land .kk-licht.neu{animation:none}
}

/* Das Mikrofon (entscheidungen/0008; seit v3.15.2 fuer Buehne und Bogen,
   js/diktat.js): ein runder Knopf, der pulsiert, solange das Diktat
   laeuft. Im Bogen sitzt er in der Ecke des Textfelds (.diktatfeld). */
.mic{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--linie);background:var(--flaeche);flex:none;
     display:grid;place-items:center;color:var(--akzent-dunkel);padding:0;cursor:pointer}
.mic:hover{border-color:var(--akzent)}
.mic .sym{width:19px;height:19px}
.mic.an{background:var(--akzent);border-color:var(--akzent);color:var(--flaeche);animation:pulsieren 1.2s infinite}
@keyframes pulsieren{0%,100%{box-shadow:0 0 0 0 var(--akzent-hell2)}50%{box-shadow:0 0 0 8px transparent}}
.diktatfeld{position:relative}
.diktatfeld textarea{width:100%;box-sizing:border-box;padding-right:58px}
.diktatfeld input{width:100%;box-sizing:border-box;padding-right:58px}
.diktatfeld .mic{position:absolute;right:8px;bottom:8px;width:38px;height:38px}
/* Im einzeiligen Feld mittig statt in der Ecke. */
.diktatfeld input~.mic{top:50%;bottom:auto;transform:translateY(-50%)}
.diktatfeld .mic .sym{width:17px;height:17px}
@media (prefers-reduced-motion:reduce){.mic.an{animation:none;box-shadow:0 0 0 3px var(--akzent-hell2)}}

/* Das Pfadband (v3.15.1): unter der Kopfleiste von Bogen und Buehne, solange
   die Mappe als Pfad gezeigt wird - derselbe Nachtton wie die Karte, damit
   die drei Seiten als ein Weg gelesen werden. */
.pfadband{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 24px;
          background:var(--weg-nacht);color:var(--gold-hell);text-decoration:none;font-size:var(--groesse-13)}
.pfadband .zurueck{font-weight:600;white-space:nowrap}
.pfadband .schritt{font:500 var(--groesse-11)/1 var(--schrift);letter-spacing:.09em;text-transform:uppercase;opacity:.85;
                 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfadband:hover .zurueck{text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.pfadband{padding:8px 16px}}
@media (prefers-reduced-motion:reduce){
  .pfadkarte .pk-stern.f,.pfadkarte .pk-schein,.pfadkarte .pk-dunst{animation:none}
}
.wegkarte{display:grid;gap:16px;align-items:start}
.wegkarte.breit{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.wegkarte.breit .wegkarte-station{position:sticky;top:12px}
.wegkarte-land{border-radius:var(--rund-gross);background:var(--weg-land);overflow:hidden}
.wegkarte-land svg{display:block;width:100%;height:auto;max-width:100%}
.wegkarte-land .huegel{fill:var(--weg-huegel)}
.wegkarte-land .huegel2{fill:var(--weg-huegel2)}
.wegkarte-land .wasser{fill:var(--weg-wasser)}
.wegkarte-land .hoehe{fill:none;stroke:var(--weg-huegel2);stroke-width:1.2;stroke-dasharray:3 5}
.wegkarte-land .baum{fill:var(--weg-baum)}
.wegkarte-land .baum.dunkel{fill:var(--weg-baum2)}
.wegkarte-land .stamm{stroke:var(--weg-stamm);stroke-width:2;stroke-linecap:round}
.wegkarte-land .berg{fill:var(--weg-berg)}
.wegkarte-land .berg2{fill:var(--weg-berg2)}
.wegkarte-land .schnee{fill:var(--weg-schnee)}
.wegkarte-land .fels{fill:var(--weg-fels)}
.wegkarte-land .bach{fill:none;stroke:var(--weg-wasser);stroke-width:9;stroke-linecap:round}
.wegkarte-land .bach-glanz{fill:none;stroke:var(--weiss);stroke-width:1.5;stroke-dasharray:6 10;stroke-linecap:round;opacity:.8}
.wegkarte-land .bruecke .holz{fill:var(--weg-holz)}
.wegkarte-land .bruecke .gelaender{stroke:var(--weg-stamm);stroke-width:1.6;fill:none}
/* Der Pfad: eine schmale sandige Spur mit Trittpunkten, kein Asphalt. */
.wegkarte-land .weg{fill:none;stroke:var(--weg-pfad);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.wegkarte-land .mitte{fill:none;stroke:var(--weg-spur);stroke-width:3;stroke-dasharray:0 9;stroke-linecap:round}
.wegkarte-land .mitte.fertig{stroke:var(--akzent)}
.wegkarte-land .weg.fertig{stroke:var(--akzent-hell2)}
.wegkarte-land .weg.kern.fertig{stroke:color-mix(in srgb,var(--weg-kern) 16%,white)}
.wegkarte-land .weg.bruecke.fertig{stroke:color-mix(in srgb,var(--weg-bruecke) 16%,white)}
.wegkarte-land .weg.wunsch.fertig{stroke:color-mix(in srgb,var(--weg-wunsch) 16%,white)}
.wegkarte-land .mitte.kern.fertig{stroke:var(--weg-kern)}
.wegkarte-land .mitte.bruecke.fertig{stroke:var(--weg-bruecke)}
.wegkarte-land .mitte.wunsch.fertig{stroke:var(--weg-wunsch)}
.wegkarte-land .mensch-weg{fill:none;stroke:var(--weg-spur);stroke-width:2.5;stroke-dasharray:0 8;stroke-linecap:round}
/* Die Knoten. */
.wegkarte-land .knoten{cursor:pointer;outline:none}
.wegkarte-land .knoten circle.ring{fill:var(--flaeche);stroke:var(--linie-hover);stroke-width:4}
.wegkarte-land .knoten text.nr{font:700 17px var(--schrift);fill:var(--leise-lesbar);text-anchor:middle;dominant-baseline:central}
.wegkarte-land .knoten text.name{font:600 16px var(--schrift);fill:var(--dunkel)}
.wegkarte-land .knoten text.sub,.wegkarte-land .knoten text.bsp{font:500 12.5px var(--schrift);fill:var(--leise-lesbar)}
.wegkarte-land .knoten.fertig circle.ring{fill:var(--akzent);stroke:var(--akzent)}
.wegkarte-land .knoten.fertig text.nr{fill:var(--weiss)}
.wegkarte-land .knoten.aktiv circle.ring{stroke:var(--akzent)}
.wegkarte-land .knoten.aktiv text.nr{fill:var(--akzent-dunkel)}
.wegkarte-land .knoten.aktiv circle.puls{fill:none;stroke:var(--akzent);stroke-width:2;opacity:.6;animation:weg-puls 2.2s ease-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes weg-puls{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.wegkarte-land .knoten.gewaehlt circle.ring{stroke-width:6}
.wegkarte-land .knoten:hover circle.ring,.wegkarte-land .knoten:focus-visible circle.ring{stroke:var(--akzent)}
.wegkarte-land .knoten:focus-visible circle.ring{stroke-width:6}
.wegkarte-land .knoten.klein circle.ring{stroke-width:3}
.wegkarte-land .knoten.klein text.nr{font-size:var(--groesse-13)}
.wegkarte-land .knoten.kern.fertig circle.ring,.wegkarte-land .knoten.kern.aktiv circle.ring{stroke:var(--weg-kern)}
.wegkarte-land .knoten.bruecke.fertig circle.ring,.wegkarte-land .knoten.bruecke.aktiv circle.ring{stroke:var(--weg-bruecke)}
.wegkarte-land .knoten.wunsch.fertig circle.ring,.wegkarte-land .knoten.wunsch.aktiv circle.ring{stroke:var(--weg-wunsch)}
.wegkarte-land .knoten.kern.fertig circle.ring{fill:var(--weg-kern)}
.wegkarte-land .knoten.bruecke.fertig circle.ring{fill:var(--weg-bruecke)}
.wegkarte-land .knoten.wunsch.fertig circle.ring{fill:var(--weg-wunsch)}
.wegkarte-land .jetzt{font:600 12.5px var(--schrift);fill:var(--akzent)}
.wegkarte-land .fahne{fill:var(--akzent-tief);stroke:var(--akzent-tief);stroke-width:3}
.wegkarte-land .richtung-et{font:600 16px var(--schrift)}
.wegkarte-land .richtung-et.kern{fill:var(--weg-kern)}
.wegkarte-land .richtung-et.bruecke{fill:var(--weg-bruecke)}
.wegkarte-land .richtung-et.wunsch{fill:var(--weg-wunsch)}
/* Der Begleiter als Zauberer. */
.wegkarte-land .knoten.mensch .treffer{fill:transparent}
.wegkarte-land .knoten.mensch .halo{fill:var(--weg-land2)}
.wegkarte-land .knoten.mensch.gewaehlt .halo,.wegkarte-land .knoten.mensch:hover .halo,.wegkarte-land .knoten.mensch:focus-visible .halo{fill:var(--akzent-hell2);stroke:var(--akzent);stroke-width:2}
.wegkarte-land .knoten.mensch .umhang,.wegkarte-land .knoten.mensch .hut{fill:var(--akzent-tief)}
.wegkarte-land .knoten.mensch .bart{fill:var(--weg-bart)}
.wegkarte-land .knoten.mensch .haut{fill:var(--weg-haut)}
.wegkarte-land .knoten.mensch .stab{stroke:var(--weg-stamm);stroke-width:3;stroke-linecap:round}
.wegkarte-land .knoten.mensch .licht{fill:var(--akzent)}
.wegkarte-land .knoten.mensch .schein{fill:var(--akzent);opacity:.18}
.wegkarte-land .knoten.mensch .auge{fill:var(--dunkel)}
.wegkarte-land .knoten.mensch .figur{transition:transform .15s;transform-origin:center;transform-box:fill-box}
.wegkarte-land .knoten.mensch:hover .figur{transform:translateY(-2px)}
/* Der Wanderer, der Zauber, die Orks. */
.wegkarte-land .wanderer .bein,.wegkarte-land .wanderer .rumpf{stroke:var(--akzent-dunkel);stroke-linecap:round;fill:none}
.wegkarte-land .wanderer .bein{stroke-width:3.5}
.wegkarte-land .wanderer .rumpf{stroke-width:5.5}
.wegkarte-land .wanderer .arm{stroke:var(--weg-haut);stroke-width:3;stroke-linecap:round;fill:none}
.wegkarte-land .wanderer .kopf{fill:var(--weg-haut)}
.wegkarte-land .wanderer .haar{fill:var(--dunkel)}
.wegkarte-land .wanderer .rucksack{fill:var(--weg-holz)}
.wegkarte-land .wanderer .schatten{fill:var(--dunkel);opacity:.12}
.wegkarte-land .wanderer .glanz{fill:var(--akzent);opacity:0;transform-origin:center;transform-box:fill-box}
.wegkarte-land .wanderer.verzaubert .glanz{animation:weg-glanz 1.6s ease-out}
@keyframes weg-glanz{0%{opacity:0;transform:scale(.4)}25%{opacity:.35}100%{opacity:0;transform:scale(1.6)}}
.wegkarte-land .funke{fill:var(--akzent)}
.wegkarte-land .blitz{fill:none;stroke:var(--akzent);stroke-width:3;opacity:0}
.wegkarte-land .ork .leib{fill:var(--weg-ork)}
.wegkarte-land .ork .auge{fill:var(--weg-ork-auge)}
.wegkarte-land .ork .pupille{fill:var(--dunkel)}
.wegkarte-land .ork .keule{stroke:var(--weg-stamm);stroke-width:3;stroke-linecap:round}
.wegkarte-land .ork .beine{stroke:var(--weg-ork);stroke-width:3;stroke-linecap:round;fill:none}
.wegkarte-land .ork{transition:transform 1.2s ease-in,opacity 1.2s ease-in}
/* Die Karte zur gewaehlten Station: kurz. */
.wegkarte-station{border:1px solid var(--linie);border-radius:var(--rund-gross);background:var(--flaeche);padding:20px 22px 18px;min-width:0}
.wegkarte-station .eyebrow{font:500 11.5px/1 var(--schrift);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);margin:0 0 10px}
.wegkarte-station h2{font:500 22px/1.15 var(--schrift-serif);margin:0;color:var(--dunkel)}
.wegkarte-station .satz{margin:10px 0 0;font-size:var(--groesse-14);line-height:1.55;color:var(--text)}
.wegkarte-station dl{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linie-zart);display:grid;gap:12px}
.wegkarte-station dt{font-size:var(--groesse-11);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leise-lesbar);margin-bottom:3px}
.wegkarte-station dd{margin:0;font-size:var(--groesse-14);line-height:1.5;color:var(--text)}
.wegkarte-station .weg-chip{display:block;margin-top:16px;padding:10px 12px;border-radius:var(--rund);font-size:var(--groesse-13);line-height:1.5;background:var(--akzent-hell);color:var(--akzent-dunkel)}
.wegkarte-station .weg-chip b{display:block;font-size:var(--groesse-11);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.wegkarte-station .weg-chip.ohne{background:var(--flaeche-tief);color:var(--leise-lesbar)}
.wegkarte-station .weg-liste{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.wegkarte-station .weg-liste li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline;font-size:var(--groesse-13)}
.wegkarte-station .weg-liste b{font-size:var(--groesse-11);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.wegkarte-station .weg-liste b.kern{color:var(--weg-kern)}
.wegkarte-station .weg-liste b.bruecke{color:var(--weg-bruecke)}
.wegkarte-station .weg-liste b.wunsch{color:var(--weg-wunsch)}
.wegkarte-station .weg-liste i{color:var(--leise-lesbar);font-style:normal}
@media (max-width:900px){
  .wegkarte.breit{grid-template-columns:1fr}
  .wegkarte .wegkarte-station{order:-1;position:static}
}
/* Die Liste (js/weg.js, listeZeichnen) bis 640 px: Nummer oder Haken,
   Name, Nebensatz. Dieselben Farben wie die Knoten der Karte. */
.wegliste{list-style:none;margin:0;padding:var(--abstand-2) 0;display:grid;gap:2px;
          background:var(--weg-land);border-radius:var(--rund-gross)}
.wegliste li{position:relative}
.wegliste li::before{content:"";position:absolute;left:29px;top:0;bottom:0;width:2px;background:var(--weg-huegel2)}
.wegliste li:first-child::before{top:50%}
.wegliste li:last-child::before{bottom:50%}
.wegliste button{position:relative;width:100%;display:flex;gap:var(--abstand-3);align-items:center;
  padding:10px 14px;margin:0;border:0;border-radius:var(--rund);background:transparent;text-align:left;
  color:var(--dunkel);min-height:52px}
.wegliste button:hover,.wegliste button[aria-pressed="true"]{background:var(--flaeche)}
.wegliste button i{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--flaeche);border:3px solid var(--linie-hover);font:700 var(--groesse-13) var(--schrift);
  font-style:normal;color:var(--leise-lesbar)}
.wegliste li.fertig i{background:var(--akzent);border-color:var(--akzent);color:var(--weiss)}
.wegliste li.aktiv i{border-color:var(--akzent);color:var(--akzent-dunkel)}
.wegliste li.mensch i{background:var(--akzent-hell2);border-color:var(--akzent-hell2);color:var(--akzent-dunkel)}
.wegliste button span{min-width:0;display:grid}
.wegliste button b{font-size:var(--groesse-16);font-weight:600}
.wegliste li.aktiv b{color:var(--akzent-dunkel)}
.wegliste button small{font-size:var(--groesse-13);color:var(--leise-lesbar);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wegliste li.aktiv small{color:var(--akzent);white-space:normal}
.weg-mehr{margin-top:var(--abstand-3)}
.weg-mehr summary{cursor:pointer;color:var(--akzent-dunkel);font-size:var(--groesse-14);font-weight:600;padding:8px 0;min-height:44px;
  display:flex;align-items:center}
.wegkarte .wegliste + .wegkarte-station{order:1;position:static}
@media (prefers-reduced-motion:reduce){
  .wegkarte-land .knoten.aktiv circle.puls{animation:none;opacity:.3}
  .wegkarte-land .wanderer.verzaubert .glanz{animation:none}
  .wegkarte-land .ork{transition:none}
}