/* Mein Weg mit zwei Ebenen (Ziel 2026-10-26, Etappe 10): geschwungener Gesamtweg.
   Nur sichtbar mit Schalter STELLIO_DESIGN_FLAGS.mywayTwoLevels (design-flags.js).
   Farben nur ueber --hn-* aus home-neu.css und die vorhandenen Brauntoene.
   Kein eigener Hintergrund: das Punkteraster der App bleibt sichtbar.
   Knoten liegen abwechselnd links und rechts im linken Rand (--mw2-x), die Linie dazwischen
   zeichnet mw2DrawCurve() als S-Kurven. */
.mw2-way{--mw2-gutter:112px;position:relative;padding:12px 0 28px var(--mw2-gutter)}
.mw2-way.is-cur-first{padding-top:40px}   /* Platz fuer die Figur ueber der ersten Phase */
.mw2-curve{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mw2-curve path{fill:none;stroke-width:6;stroke-linecap:round}
.mw2-curve-rest{stroke:var(--hn-line);stroke-dasharray:1 12}
.mw2-curve-done{stroke:var(--hn-primary)}
.mw2-phases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px}
.mw2-phase{position:relative;min-height:44px}
.mw2-phase:nth-child(odd){--mw2-x:30px} .mw2-phase:nth-child(even){--mw2-x:82px}
.mw2-node{position:absolute;top:2px;left:calc(var(--mw2-x) - var(--mw2-gutter) - 20px);width:40px;height:40px;box-sizing:border-box;border-radius:50%;background:var(--hn-surface);border:3px solid var(--hn-line);display:flex;align-items:center;justify-content:center;color:#fff;z-index:1}
.mw2-phase.is-done .mw2-node{background:var(--hn-primary);border-color:var(--hn-primary)}
.mw2-phase.is-current .mw2-node{width:48px;height:48px;top:-2px;left:calc(var(--mw2-x) - var(--mw2-gutter) - 24px);background:radial-gradient(circle at 35% 28%,#A08D7A,#8A7765 62%);border-color:#EDE2D5;box-shadow:0 0 0 3px #DED2C5}
.mw2-phase-h{margin:0;font:inherit}
.mw2-phase-head{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;color:var(--hn-text);text-align:left;cursor:pointer}
/* Nie mitten im Wort trennen: nur an Silben (hyphens braucht lang am Element) */
.mw2-phase-title{margin:0;font-family:var(--font-title);font-size:19px;font-weight:700;min-width:0;overflow-wrap:break-word;hyphens:auto}
.mw2-phase.is-current .mw2-phase-title{font-size:22px}
.mw2-phase-count{margin-left:auto;font-size:14px;color:var(--hn-text-2);white-space:nowrap}
.mw2-chev{flex-shrink:0;color:var(--hn-text-2);transition:transform .2s ease-out}
.mw2-phase-head[aria-expanded="true"] .mw2-chev{transform:rotate(180deg)}
.mw2-done-toggle .mw2-chev{margin-left:auto}
.mw2-tasks{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.mw2-tasks[hidden],.mw2-done-list[hidden],.mw2-phase-body[hidden]{display:none}
.mw2-task{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 4px;border-radius:16px;background:var(--hn-surface);border:1px solid var(--hn-line)}
.mw2-task.is-current{border-color:var(--hn-primary);box-shadow:0 0 0 1px var(--hn-primary) inset}
.mw2-tick{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0;cursor:pointer}
.mw2-tick.is-auto{cursor:default}
.mw2-tick-dot{width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:2px solid var(--hn-line);background:var(--hn-surface);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.mw2-task.is-done .mw2-tick-dot{background:var(--hn-primary);border-color:var(--hn-primary)}
.mw2-tick.is-auto .mw2-tick-dot{border-style:dashed}
.mw2-task-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mw2-task-text{overflow-wrap:anywhere;color:var(--hn-text)}
.mw2-task.is-current .mw2-task-text{font-weight:700}
.mw2-task.is-done .mw2-task-text{color:var(--hn-text-2)}
.mw2-task.is-skipped{background:transparent;border-style:dashed}
.mw2-task.is-skipped .mw2-task-text{color:var(--hn-text-2)}
.mw2-task-meta{font-size:12px;color:var(--hn-text-2)}
.mw2-task-tool{flex-shrink:0}
.mw2-task-del{flex-shrink:0;min-width:44px;font-size:20px;text-decoration:none}
.mw2-donerow .mw2-phase-title{font-size:16px;color:var(--hn-text-2)}
/* Aufgeklappte erledigte Phasen: ruhig, grau, mit "Wieder oeffnen" */
.mw2-done-list{display:grid;gap:12px;margin:8px 0 0}
.mw2-done-phase{padding:10px 14px;border-radius:16px;background:var(--hn-surface);border:1px solid var(--hn-line)}
.mw2-done-phase-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.mw2-done-phase-title{margin:0;font-size:15px;font-weight:700;color:var(--hn-text)}
.mw2-done-tasks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:14px;color:var(--hn-text-2)}
.mw2-done-tasks li{display:flex;gap:8px;align-items:flex-start;overflow-wrap:anywhere}
.mw2-done-check{flex-shrink:0;line-height:0;color:var(--hn-primary);margin-top:2px}
.mw2-goal .mw2-node{border-style:dashed;color:var(--hn-text-2)}
.mw2-goal-text{display:flex;align-items:center;min-height:44px;margin:0;font-weight:600;color:var(--hn-text-2)}
.mw2-mascot{position:absolute;top:0;left:0;pointer-events:none;line-height:0;z-index:2;transition:top .6s ease-in-out,left .6s ease-in-out}
.mw2-mascot[hidden]{display:none}
.mw2-mascot.is-walking{animation:mwc-bob .2s ease-in-out 3}
.mw2-tick:focus-visible,.mw2-phase-head:focus-visible,.mw2-task-del:focus-visible{outline:2px solid var(--hn-primary);outline-offset:2px;border-radius:12px}
@media (max-width:600px){
  .mw2-way{--mw2-gutter:64px}
  .mw2-way.is-cur-first{padding-top:50px}
  .mw2-phase:nth-child(odd){--mw2-x:20px} .mw2-phase:nth-child(even){--mw2-x:44px}
  .mw2-node{width:30px;height:30px;left:calc(var(--mw2-x) - var(--mw2-gutter) - 15px)}
  .mw2-phase.is-current .mw2-node{width:38px;height:38px;left:calc(var(--mw2-x) - var(--mw2-gutter) - 19px)}
  .mw2-task{flex-wrap:wrap}
  .mw2-task-tool{margin-left:54px}
  /* Text bekommt immer fast die ganze Zeile, der Werkzeug-Knopf rutscht darunter (Haken 44 + Entfernen 44 + Abstaende) */
  .mw2-task-main{min-width:calc(100% - 112px)}
  /* Aktuelle Phase etwas kleiner und engerer Abstand: "Bewerbungsunterlagen" passt bei 375 px auf eine Zeile */
  .mw2-phase-head{gap:6px}
  .mw2-phase-title{font-size:18px} .mw2-phase.is-current .mw2-phase-title{font-size:18px}
}
@media (prefers-reduced-motion: reduce){.mw2-mascot{transition:none}.mw2-mascot.is-walking{animation:none}.mw2-chev{transition:none}}

/* ── Bewerbungen rechts neben dem Weg (Etappe 11, Auftrag 27.10.) ──
   Breit (ab 1100 px): zwei Spalten, links der Weg, rechts "Deine Bewerbungen".
   Schmal: Umschalter "Weg | Bewerbungen" (.mw2-panes), es steht immer nur ein Bereich da. */
.mw2-panes{display:none}
.mw2-split{display:block}
@media (min-width:1100px){
  /* Mehr Platz fuer zwei Spalten, nur solange Mein Weg offen ist */
  .content-inner:has(#page-myway.active .mw2-split){max-width:1040px}
  #page-myway .mwc-root:has(.mw2-split){max-width:none}
  .mw2-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
  .mw2-split .mw2-apps{position:sticky;top:72px;margin-top:12px}
}
@media (max-width:1099px){
  .mw2-panes{display:flex;gap:4px;margin:4px 0 12px;padding:4px;border-radius:999px;background:var(--hn-second)}
  .mw2-split[data-pane="way"] .mw2-apps,.mw2-split[data-pane="apps"] .mw2-way{display:none}
}
.mw2-pane-btn{flex:1;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;font:inherit;font-weight:600;color:var(--hn-text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mw2-pane-btn[aria-pressed="true"]{background:var(--hn-surface);color:var(--hn-text);box-shadow:0 1px 2px rgba(60,40,20,.12)}
.mw2-pane-btn:focus-visible{outline:2px solid var(--hn-primary);outline-offset:2px}
.mw2-pane-n{min-width:22px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--hn-primary);color:#fff;font-size:12px;line-height:22px;text-align:center}
.mw2-apps{padding:16px;border-radius:20px;background:var(--hn-second)}
.mw2-apps-head h2{margin:0;font-family:var(--font-title);font-size:19px;color:var(--hn-text)}
.mw2-apps-sum{margin:2px 0 10px;font-size:13px;color:var(--hn-text-2)}
.mw2-apps-empty{margin:6px 0 0;font-size:14px;color:var(--hn-text-2)}
.mw2-app-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mw2-app{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;width:100%;min-height:56px;padding:12px 14px;border-radius:16px;border:1px solid var(--hn-line);background:var(--hn-surface);font:inherit;color:var(--hn-text);text-align:left;cursor:pointer}
.mw2-app:hover{border-color:var(--hn-primary)}
.mw2-app:focus-visible{outline:2px solid var(--hn-primary);outline-offset:2px}
.mw2-app-title{font-weight:700;overflow-wrap:break-word;min-width:0}
.mw2-app-firm{grid-column:1/-1;font-size:14px;color:var(--hn-text-2);overflow-wrap:anywhere}
.mw2-pill{align-self:start;padding:2px 10px;border-radius:999px;background:var(--hn-second);color:var(--hn-text);font-size:12px;font-weight:700;white-space:nowrap}
.mw2-pill.is-offer{background:#F0FAF3;color:#15803D}
.mw2-pill.is-rejected,.mw2-pill.is-withdrawn,.mw2-pill.is-dropped,.mw2-pill.is-removed{background:transparent;color:var(--hn-text-2);border:1px solid var(--hn-line)}
.mw2-app-prog{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:4px}
.mw2-app-bar{flex:1;height:6px;border-radius:3px;background:var(--hn-line);overflow:hidden}
.mw2-app-bar i{display:block;height:100%;background:var(--hn-primary)}
.mw2-app-count{font-size:12px;color:var(--hn-text-2);white-space:nowrap}
.mw2-app-next{grid-column:1/-1;font-size:13px;color:var(--hn-text-2)}
.mw2-app-more{margin-top:10px}
.mw2-app-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--hn-text-2)}
.mw2-app-more summary:focus-visible{outline:2px solid var(--hn-primary);outline-offset:2px;border-radius:8px}
.mw2-apps-all{display:block;margin-top:4px}
.mw2-add-form{display:grid;gap:6px;margin-top:10px}
.mw2-add-form[hidden],#mw2-add-btn[hidden]{display:none}
.mw2-form-btns{display:flex;gap:12px;align-items:center;margin-top:6px}
#mw2-add-btn{margin-top:12px}
@media (max-width:600px){
  /* Handy: Status unter den Titel, damit der Titel nicht mitten im Wort bricht */
  .mw2-app{grid-template-columns:1fr}
  .mw2-pill{justify-self:start;order:2}
  .mw2-app-prog,.mw2-app-next{order:3}
}

/* ── Bewerbungsweg einer Bewerbung (Etappe 12) ── */
.mw2-appview{padding:6px 4px 20px}
.mw2-appview-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.mw2-appview-head h2{margin:0;font-family:var(--font-title);font-size:24px;color:var(--hn-text);overflow-wrap:break-word;min-width:0}
.mw2-appview-head h2:focus{outline:none}
.mw2-app-company{margin:0;flex-basis:100%;color:var(--hn-text-2);font-weight:600}
.mw2-steps{display:flex;align-items:center;margin:16px 0 4px;max-width:420px}
.mw2-sdot{width:14px;height:14px;flex-shrink:0;box-sizing:border-box;border-radius:50%;border:2px solid var(--hn-line);background:var(--hn-surface)}
.mw2-sdot.is-done{background:var(--hn-primary);border-color:var(--hn-primary)}
.mw2-sdot.is-current{border-color:var(--hn-primary);box-shadow:0 0 0 3px #DED2C5}
.mw2-sline{flex:1;height:3px;background:var(--hn-line)}
.mw2-sline.is-done{background:var(--hn-primary)}
.mw2-steps-txt{margin:0 0 12px;font-size:14px;color:var(--hn-text-2)}
.mw2-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.mw2-actions-label{flex-basis:100%;font-weight:600;color:var(--hn-text)}
.mw2-own{margin-top:16px}
.mw2-back{flex-shrink:0}
@media (max-width:600px){.mw2-appview-head h2{font-size:21px}}

/* ── Mein Weg+ (lino/mein-weg, myway-plus.js) ─────────────────────────────── */
.mwp-today { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--hn-surface, var(--card-bg)); border: 1px solid var(--hn-line, var(--card-border)); box-shadow: var(--hn-shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }
.mwp-today-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mwp-today-kicker { font-size: 12px; font-weight: 700; color: var(--hn-primary, var(--gold-text)); text-transform: uppercase; letter-spacing: .06em; }
.mwp-today-task { font-size: 15px; font-weight: 600; color: var(--hn-text, var(--text)); }
.mwp-due { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #B45309; }
.mwp-banner { margin: 10px 0 12px; padding: 12px 14px; border-radius: 14px; background: #FEF3C7; color: #78350F; font-size: 14px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mwp-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mwp-card { background: var(--hn-surface, var(--card-bg)); border-radius: 18px; padding: 22px; width: min(460px, 100%); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.mwp-card h3 { font-size: 18px; margin: 0; }
.mwp-sub { font-size: 14px; color: var(--text-muted); margin: 0; }
.mwp-set { border: 1px solid var(--hn-line, var(--card-border)); border-radius: 12px; padding: 8px 12px 10px; margin: 0; }
.mwp-set legend { font-size: 13px; font-weight: 700; padding: 0 4px; }
.mwp-check, .mwp-radio { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.mwp-radio { display: inline-flex; margin-right: 14px; }
.mwp-check input, .mwp-radio input { width: 18px; height: 18px; accent-color: var(--hn-primary, var(--gold)); }
.mwp-field { font-size: 13px; font-weight: 700; }
.mwp-btns { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
