/* Zurück-Knöpfe, Berufsfinder-Box und breite Bildschirme (lino/navigation, Wunsch Lino 31.10.2026)
   – siehe js/zurueck.js */

/* Zurück-Knopf oben auf Unterseiten */
.hn-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px -6px; padding: 7px 12px 7px 6px; border: none; border-radius: 10px; background: transparent; color: var(--text-muted, #756B63); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.hn-back:hover { background: var(--bg-second, #EDE2D5); color: var(--text, #302823); }
.hn-back:focus-visible { outline: 2px solid var(--btn, #8A7765); outline-offset: 2px; }
/* Wo es schon einen eigenen Zurück-Knopf gibt, nicht doppelt zeigen */
#aptitude-select-view > .hn-back + .btn-ghost { display: none; }

/* Berufsfinder: Fragen in einer Box, Text links statt alles mittig oben */
#career-questions-view .career-cancel { margin-bottom: 10px; }
.career-q-box { max-width: 760px; margin: 0 auto; padding: 28px 32px 30px; border-radius: 22px; background: var(--card-bg, #FBF8F2); border: 1px solid var(--card-border, #DED2C5); box-shadow: 0 1px 2px rgba(112, 94, 78, .05), 0 14px 34px -14px rgba(112, 94, 78, .22); box-sizing: border-box; }
.career-q-box .career-q-title, .career-q-box .career-q-kicker, .career-q-box .career-q-sub, .career-q-box .career-q-hint { text-align: left; }
.career-q-box .career-q-progress-label { text-align: left; }
@media (max-width: 760px) { .career-q-box { padding: 20px 16px 22px; border-radius: 18px; } }

/* Breite Bildschirme: Inhalt wächst mit, damit nicht links und rechts viel leer bleibt */
@media (min-width: 1400px) {
  .content-inner { max-width: 1120px; }
  .app-shell:has(.sidebar.collapsed) .content-inner { max-width: 1120px; }
  .content-inner:has(#page-career.active),
  .content-inner:has(#page-myway.active),
  .content-inner:has(#page-dashboard.active),
  .content-inner:has(#page-bibliothek.active) { max-width: min(1440px, 92%); }
}
@media (min-width: 1800px) {
  .content-inner:has(#page-career.active),
  .content-inner:has(#page-myway.active),
  .content-inner:has(#page-dashboard.active),
  .content-inner:has(#page-bibliothek.active) { max-width: min(1620px, 90%); }
}

/* Berufe-Karten (Entdecken, Mein Weg): höchstens 4 nebeneinander, auf breiten Seiten werden
   Karten und Bilder grösser statt dass eine 5. Spalte dazukommt */
.bf-grid { grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 64px) / 4)), 1fr)) !important; }
@media (min-width: 1400px) {
  .bf-grid { gap: 20px; }
  .bf-card-name { font-size: 15.5px; }
  .bf-main { font-size: clamp(64px, 4.6vw, 96px); }
  .bf-neben { font-size: clamp(26px, 1.9vw, 40px); }
}

/* ── Runde 3 (31.10.2026, Wunsch Lino) ──────────────────────────────────── */
/* Logo und Schriftzug fest oben links über der Seitenleiste, bleibt beim Scrollen stehen */
@media (min-width: 761px) {
  .hn-brand { position: fixed; top: 22px; left: 22px; z-index: 125; margin: 0; padding: 6px 10px 6px 4px; border-radius: 12px; background: rgba(247, 243, 236, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .hn-top .hn-profile { margin-left: auto; }
}
/* Handy: Kopfzeile mit Logo und Profil bleibt oben stehen */
@media (max-width: 760px) {
  .app-shell .hn-top { position: sticky; top: 0; z-index: 60; background: rgba(247, 243, 236, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  /* Runde 11: Balken ganz oben anliegend (die 14px Abstand der Seite oben liegen jetzt im Balken) */
  .app-shell .hn-top { top: -14px; margin-top: -14px; padding-top: 14px; height: 58px; box-sizing: border-box; }
}

/* Keine Scrollbalken mehr (weder rechts noch unten); scrollen geht weiter mit Rad, Finger,
   Pfeiltasten und Ziehen (js/zurueck.js) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
.hn-drag-scroll { cursor: grab; }
.hn-drag-scroll.is-dragging { cursor: grabbing; user-select: none; }
.hn-drag-scroll.is-dragging * { pointer-events: none; }

/* Seiten mit schmalem Inhalt etwas näher ans Menü (die breiten Seiten bleiben) */
@media (min-width: 1300px) {
  .content-inner { max-width: 1120px; }
  .app-shell:has(.sidebar.collapsed) .content-inner { max-width: 1120px; }
}