/* ══ Redesign "Design perfekt" Etappe 6 – Uebrige Seiten anheben ═══════════════
   Nur in app.html (nach home.css). Farben nur als var(--…). Tiefe ueber warme Toene
   und Schatten, Blau nur fuer die Figur (Leandro 11.10.2026). */

/* 1) Seitenkoepfe mit Bereichsfarbe: Icon-Feld links, Linie unten beginnt in Bereichsfarbe */
.tool-head[class*="rub-"] { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center;
  border-bottom: none; padding-bottom: 18px;
  background: linear-gradient(90deg, var(--rub) 0 64px, var(--line-soft) 64px) bottom left / 100% 2px no-repeat; }
.tool-head[class*="rub-"] > .tool-title { grid-column: 2; margin-bottom: 0; }
.tool-head[class*="rub-"] > p { grid-column: 2; }
.tool-head-icon { grid-row: span 2; width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--tone-card); box-shadow: var(--shadow-card); }
.tool-head-icon .ico { width: 30px; height: 30px; }

/* 2) Bewerbung + Bewerbungsunterlagen als Bento */
.bew-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bew-bento .tile { background: linear-gradient(160deg, var(--rub-tint) 0%, var(--tone-card) 72%); box-shadow: var(--shadow-card); min-height: 148px; display: flex; flex-direction: column; gap: 8px; }
.bew-bento .bew-wide { grid-column: span 2; box-shadow: var(--shadow-card-hi); }
.bew-bento .tile h3 { font-size: 15px; margin: 4px 0 0; }
.bew-bento .tile p { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.bew-bento .ico-tile, .career-intro-icon.ico-tile { background: var(--tone-card); box-shadow: var(--shadow-card); }
@media (max-width: 760px) { .bew-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bew-bento .bew-wide { grid-column: span 2; } }

/* 3) Einstellungen: Auswahl-Chips mit Farbe je Gruppe und Unterkante */
.pchip { display: inline-flex; align-items: center; cursor: pointer; font-size: 12.5px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--tone-card); border: 1.5px solid var(--line-soft); color: var(--text); box-shadow: 0 2px 0 var(--line-soft); }
.pchip--interests { --rub: var(--accent-violet); --rub-text: var(--accent-violet-text); --rub-tint: var(--tint-violet); }
.pchip--strengths { --rub: var(--accent-sun-icon); --rub-text: var(--accent-sun-text); --rub-tint: var(--tint-sun); }
.pchip--career_values { --rub: var(--accent-aqua); --rub-text: var(--accent-aqua-text); --rub-tint: var(--tint-aqua); }
.pchip.is-on { background: var(--rub-tint); border-color: var(--rub); color: var(--rub-text); font-weight: 600; box-shadow: 0 2px 0 var(--rub); }
.pchip:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--rub, var(--line-soft)); }

/* 4) Mein Weg in Stellio Blue (Leandro 12.10.2026, Vorbild Duolingo): Stationen als Knoepfe
   mit dunklerer Unterkante ("3D"), kommende hellgrau-beige. Illustrationen daneben (myway-illu.js). */
.myway-zz-blob { filter: none; }
.myway-zz-blob-1 { background: radial-gradient(circle at 35% 35%, #E3ECFD, transparent 70%); opacity: 1; }
.myway-zz-blob-2 { background: radial-gradient(circle at 50% 50%, var(--tint-sun), transparent 70%); opacity: .6; }
.myway-zz-circle { --mw-under: #1E40AF; transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out); }
.myway-zz-circle-done { background: radial-gradient(circle at 35% 28%, #4F86F7, var(--gold) 62%); color: var(--on-accent); border: none;
  box-shadow: 0 4px 0 var(--mw-under), 0 6px 10px hsl(222 70% 30% / .18); font-size: 18px; }
.myway-zz-circle-current { background: radial-gradient(circle at 35% 28%, #4F86F7, var(--gold) 62%); color: var(--on-accent); border: none;
  box-shadow: 0 4px 0 var(--mw-under), 0 0 0 7px #DCE7FD, 0 0 0 9px #C7D8FB; animation: none; }
.myway-zz-circle-upcoming { --mw-under: #D2C8B7; background: #E9E3D8; color: #9C9282; border: none; box-shadow: 0 4px 0 var(--mw-under); }
.myway-zz-circle-pending { box-shadow: 0 4px 0 #DCE7FD; }
.myway-zz-node:active .myway-zz-circle { transform: translateY(3px); box-shadow: 0 1px 0 var(--mw-under); }
.myway-zz-line-all { stroke: #DCD3C4; }
.myway-zz-pill { background: var(--gold); color: var(--on-accent); box-shadow: 0 2px 0 #1E40AF; }
.myway-zz-info { background: var(--tone-card); border: none; box-shadow: var(--shadow-card-hi); }
.myway-zz-info-eyebrow { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: #1D4ED8; }
.myway-zz-connector-h, .myway-zz-connector-v { border-color: var(--gold); }
.myway-zz-connector-h.is-left::after { border-left-color: var(--gold); }
.myway-zz-connector-h.is-right::after { border-right-color: var(--gold); }
.myway-zz-connector-v::after { border-bottom-color: var(--gold); }
@media (min-width: 1024px) { .myway-zz-circle-done, .myway-zz-circle-current, .myway-zz-circle-upcoming { box-shadow: 0 5px 0 var(--mw-under); }
  .myway-zz-circle-done { box-shadow: 0 5px 0 var(--mw-under), 0 8px 14px hsl(222 70% 30% / .18); font-size: 22px; }
  .myway-zz-circle-current { box-shadow: 0 5px 0 var(--mw-under), 0 0 0 8px #DCE7FD, 0 0 0 10px #C7D8FB; } }

/* Illustrationen und Deko: unter den Stationen, ueber den Farbflecken; Lage setzt placeMyWayIllus() */
.myway-zz-illu, .myway-zz-deco { position: absolute; z-index: 0; pointer-events: none; line-height: 0; }
.myway-zz-illu svg, .myway-zz-deco svg { display: block; overflow: visible; }
.myway-zz-illu .mwi-fig, .myway-zz-illu .mwi-eyes, .myway-zz-illu .mwi-arm-r { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .myway-zz-illu, .myway-zz-deco { animation: mwi-in 520ms var(--ease-out) both; animation-delay: 260ms; }
  /* Aktuelle Station: ruhiges Atmen, Blinzeln und ein kurzes Winken */
  .myway-zz-illu.is-current .mwi-fig { transform-origin: 50% 100%; animation: mwi-breathe 3.4s ease-in-out infinite; }
  .myway-zz-illu.is-current .mwi-eyes { transform-origin: center; animation: mwi-blink 5s ease-in-out infinite; }
  .myway-zz-illu.is-current .mwi-arm-r { transform-origin: center; animation: mwi-wave 4.2s var(--ease-out) infinite; }
}
@keyframes mwi-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mwi-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes mwi-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes mwi-wave { 0%, 70%, 100% { transform: translate(0, 0); } 76% { transform: translate(1px, -4px); } 82% { transform: translate(-1px, 0); } 88% { transform: translate(1px, -4px); } 94% { transform: translate(0, 0); } }
/* Home: erledigte Aufgabe gruen statt blau */
.todo-done .todo-check { background: var(--accent-green); border-color: var(--accent-green); color: var(--on-accent); }

/* 5) Bibliothek: Reiterleiste als eingelassene Flaeche, aktiver Reiter als Karte */
.bib-tabs { background: var(--tone-inset); box-shadow: var(--shadow-inset); }
.bib-tab.active { color: var(--text); background: var(--tone-card); box-shadow: var(--shadow-card); }

/* 6) Berufswahl-Einstieg */
.career-intro-icon.ico-tile { width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 14px; box-shadow: var(--shadow-card-hi); }

/* 7) Tracker-Kopf mit Icon */
.tracker-head-v2.rub-tracker { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; }
.tracker-head-v2 .tool-head-icon { grid-row: span 2; }

/* 8) Coach Motivationsschreiben: farbige Typ-Chips, Startkarte mit Sonnen-Kante, Phasen */
#cover-type-chips .chip[class*="rub-"], #cover-type-edit-options .chip[class*="rub-"] { display: inline-flex; align-items: center; gap: 7px; }
#cover-type-chips .chip[class*="rub-"]::before, #cover-type-edit-options .chip[class*="rub-"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rub); }
#cover-type-chips .chip.selected[class*="rub-"] { background: var(--rub-tint); border-color: var(--rub); color: var(--rub-text); font-weight: 600; box-shadow: 0 2px 0 var(--rub); }
.cover-setup { background: linear-gradient(160deg, var(--tint-sun) 0%, var(--tone-card) 42%); border-top: 3px solid var(--accent-sun); }
.cover-stage-dot.done { background: var(--tint-green); color: var(--accent-green-text); }
.cover-stage-dot.current { background: var(--tint-sun); color: var(--accent-sun-text); font-weight: 700; }

/* 9) Berufswahl: Lupe als Knopf + Pop-up "Alle Lehrberufe" (Leandro 12.10.2026)
   Desktop: grosses Modal. Handy: Vollbild-Sheet. Warme Toene, braune Knoepfe, keine Glows. */
button.career-intro-lupe { border: none; padding: 0; cursor: pointer; color: inherit; font: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease; }
button.career-intro-lupe:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
button.career-intro-lupe:active { transform: translateY(0) scale(.97); }
button.career-intro-lupe:focus-visible { outline: 3px solid var(--btn); outline-offset: 3px; }
body.career-list-lock { overflow: hidden; }
.career-list-overlay { position: fixed; inset: 0; z-index: 330; display: none; align-items: center; justify-content: center;
  padding: 24px; background: hsl(var(--shadow-color) / .38); }
.career-list-overlay.open { display: flex; }
.career-list-dialog { width: 100%; max-width: 760px; height: min(86vh, 900px); display: flex; flex-direction: column;
  background: var(--tone-page); border-radius: 28px; box-shadow: var(--shadow-pop); overflow: hidden;
  animation: careerListIn 260ms cubic-bezier(0.22,1,0.36,1); }
@keyframes careerListIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.career-list-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 12px; }
.career-list-headtext { flex: 1; min-width: 0; }
.career-list-head h2 { font-family: var(--font-title); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text); }
.career-list-sub { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.career-list-close { flex: none; width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  background: var(--tone-card); box-shadow: var(--shadow-card); }
.career-list-close:hover { color: var(--text); background: var(--btn-tint); }
.career-list-close:focus-visible { outline: 3px solid var(--btn); outline-offset: 2px; }
.career-list-search { display: flex; align-items: center; gap: 10px; margin: 0 24px 12px; padding: 0 14px; height: 48px;
  border-radius: 14px; background: var(--tone-card); box-shadow: var(--shadow-inset), 0 0 0 1px var(--line-soft); color: var(--text-muted); }
.career-list-search:focus-within { box-shadow: 0 0 0 2px var(--btn); }
.career-list-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit;
  font-size: 15px; color: var(--text); height: 100%; padding: 0; box-shadow: none; }
.career-list-search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; cursor: pointer; }
.career-list-body { flex: 1; overflow-y: auto; padding: 4px 24px 24px; overscroll-behavior: contain; }
.career-list-group { margin-top: 14px; }
.career-list-gtitle { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0 -4px 8px;
  padding: 8px 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--btn-text);
  background: var(--tone-page); }
.career-list-emoji { font-size: 16px; text-transform: none; }
.career-list-gcount { font-weight: 500; color: var(--text-muted); }
.career-list-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.career-list-item { background: var(--tone-card); border-radius: 16px; box-shadow: var(--shadow-card); }
.career-list-item.is-open { grid-column: 1 / -1; box-shadow: var(--shadow-card-hi); }
.career-list-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; text-align: left; padding: 12px 14px;
  border: none; background: none; cursor: pointer; font: inherit; color: inherit; border-radius: 16px; }
.career-list-row:hover { background: var(--btn-tint); }
.career-list-row:focus-visible { outline: 3px solid var(--btn); outline-offset: -3px; }
.career-list-name { font-size: 14px; font-weight: 650; color: var(--text); line-height: 1.35; }
.career-list-meta { font-size: 11.5px; font-weight: 600; color: var(--btn-text); background: var(--btn-tint);
  border-radius: 999px; padding: 2px 8px; align-self: start; white-space: nowrap; }
.career-list-desc { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.career-list-item.is-open .career-list-desc { -webkit-line-clamp: unset; display: block; }
.career-list-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 0 14px 14px; }
.career-list-more[hidden] { display: none; }
.career-list-link { font-size: 13px; font-weight: 600; color: var(--btn-text); text-decoration: underline; text-underline-offset: 3px; }
.career-list-empty { text-align: center; color: var(--text-muted); font-size: 14px; padding: 32px 0; }
.career-list-empty[hidden], .career-list-group[hidden], .career-list-item[hidden] { display: none; }
.career-list-source { font-size: 11.5px; color: var(--text-muted); margin-top: 22px; text-align: center; }
@media (max-width: 640px) {
  .career-list-overlay { padding: 0; align-items: stretch; }
  .career-list-dialog { max-width: none; height: 100%; height: 100dvh; border-radius: 0;
    animation-name: careerListUp; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  @keyframes careerListUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .career-list-head { padding: 16px 16px 10px; }
  .career-list-search { margin: 0 16px 10px; }
  .career-list-body { padding: 4px 16px 24px; }
  .career-list-items { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .career-list-dialog, button.career-intro-lupe { animation: none; transition: none; } }

/* ── Bewerbungen und Unterlagen: ruhige Stellio-Farben (29.10.2026, Wunsch Lino) ──
   Keine blauen/gelben Verlaeufe mehr, alle Kacheln gleich hell, Symbole im Stellio-Braun.
   Bei den Unterlagen sind Motivationsschreiben und Lebenslauf gleich gross. */
.bew-bento .tile { --rub: var(--btn); --rub-text: var(--hn-text, var(--text)); --rub-tint: var(--bg-second); background: var(--card-bg); }
.bew-bento .tile .ico-tile { background: var(--bg-second); box-shadow: none; color: var(--btn); }
#page-coach .bew-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-coach .bew-bento .bew-wide { grid-column: auto; box-shadow: var(--shadow-card); }
@media (max-width: 760px) { #page-coach .bew-bento { grid-template-columns: 1fr; } }
.bew-tips { margin-top: 26px; }
.bew-tips-title { font-family: var(--font-title); font-size: 19px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.bew-tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bew-tip { padding: 16px; border-radius: var(--r-card, 18px); background: var(--bg-second); }
.bew-tip b { display: block; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.bew-tip p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 760px) { .bew-tips-grid { grid-template-columns: 1fr; } }

/* Home "Direkt zu Stellio": lange Namen (Motivationsschreiben) brechen um statt aus der Kachel zu laufen */
.hn-tile { min-width: 0; }
.hn-tile-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }

/* Tipps als kurze Sprechblasen der Stellio-Figur statt Kästchen (Lino 29.10.2026) */
.bew-talk { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 28px auto 8px; }
.bew-talk-row { display: flex; align-items: flex-end; gap: 10px; }
.bew-talk-row.is-right { justify-content: flex-end; padding-left: 50px; }
.bew-mascot { flex: none; width: 40px; height: 40px; }
.bew-mascot .mascot { width: 40px; height: 40px; }
.bew-bubble { position: relative; margin: 0; padding: 11px 15px; border-radius: 18px 18px 18px 6px; background: var(--card-bg); box-shadow: var(--hn-shadow-sm, 0 1px 2px rgba(24,24,27,.04), 0 4px 12px rgba(24,24,27,.05)); font-size: 14.5px; line-height: 1.5; color: var(--text); max-width: 520px; }
.bew-talk-row.is-right .bew-bubble { border-radius: 18px 18px 6px 18px; background: var(--gold-light, #EFF4FF); }
.bew-bubble b { color: var(--text); }
.bew-tips { display: none; }
@media (max-width: 640px) { .bew-talk-row.is-right { padding-left: 24px; } .bew-bubble { font-size: 14px; } }