/* ══ Neues Design (Vorlage Leandro 19.10.2026) ═════════════════════════════════
   Wird nur in app.html geladen, als letzte Stilvorlage. Enthaelt:
   1. Farben und Schrift (Leiste unten in der Vorlage) fuer die ganze App
   2. Schwebende Seitenleiste (eingeklappt nur Icons, mit Maus/Tastatur offen mit Namen)
   3. Kopfzeile (STELLIO, Kreis mit Anfangsbuchstaben = Profilmenue) und untere Leiste (Handy)
   4. Home: Begruessung mit Figur, drei Karten, "Direkt zu Stellio"
   Icons: Symbole #n-* direkt in app.html. Inhalte der Home-Karten: js/home.js. */

/* ── 1. Farben und Schrift ─────────────────────────────────────────────────── */
:root {
  --hn-bg:        #F7F3EC;   /* Hintergrund */
  --hn-surface:   #FBF8F2;   /* Flaechen */
  --hn-second:    #EDE2D5;   /* Sekundaer */
  --hn-hover:     #E5D5C5;   /* Hover */
  --hn-line:      #DED2C5;   /* Rahmen */
  --hn-primary:   #8A7765;   /* Primaer */
  --hn-primary-h: #7B6857;   /* Hover Knopf */
  --hn-primary-p: #705E4E;   /* gedrueckt */
  --hn-text:      #302823;   /* Text */
  --hn-text-2:    #756B63;   /* Sekundaer Text */
  --hn-gold:      #D3A257;   /* Sternchen bei der Figur (wie in der Vorlage) */
  --hn-shadow:    0 1px 2px rgba(112, 94, 78, .05), 0 14px 34px -14px rgba(112, 94, 78, .22);
  --hn-shadow-sm: 0 1px 2px rgba(112, 94, 78, .05), 0 10px 24px -14px rgba(112, 94, 78, .20);

  /* bestehende Variablen auf die neue Leiste setzen */
  --bg-main: var(--hn-bg);
  --bg-second: var(--hn-second);
  --card-bg: var(--hn-surface);
  --card-border: var(--hn-line);
  --tone-page: var(--hn-bg);
  --tone-card: var(--hn-surface);
  --tone-side: var(--hn-second);
  --tone-hover: var(--hn-hover);
  --line-soft: var(--hn-line);
  --line-side: var(--hn-line);
  --btn: var(--hn-primary);
  --btn-hover: var(--hn-primary-h);
  --btn-press: var(--hn-primary-p);
  --text: var(--hn-text);
  --text-secondary: var(--hn-text-2);
  --text-muted: var(--hn-text-2);
  --text-faint: var(--hn-text-2);

  --font-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:  'Caveat', 'Segoe Print', cursive;
}
body { font-family: var(--font-body); color: var(--hn-text); background: var(--hn-bg); }
.page-title, .tool-title { letter-spacing: -0.005em; font-weight: 700; }
/* Boot-Skelett mit demselben Punkteraster wie die App (body::before weiter unten) */
.boot-skeleton {
  background-color: var(--hn-bg);
  background-image: radial-gradient(circle, rgba(138, 119, 101, .20) 1px, transparent 1.6px);
  background-size: 22px 22px;
}

/* Seite: ruhige, helle Flaeche (ohne die frueheren Bogenformen) */
.app-shell, .app-main { background: transparent; }
.app-main { background-image: none; }

/* ── 2. Schwebende Seitenleiste ────────────────────────────────────────────── */
.sidebar .sidebar-logo .logo-mark,
.sidebar .sidebar-collapse-btn,
.sidebar-expand-btn,
.sidebar .sidebar-sep,
.sidebar .nav-section-label,
.sidebar .nav-chevron,
.sidebar .nav-group,
.sidebar .sidebar-user-text,
.sidebar .user-menu-chevron { display: none !important; }
.shell-tip { display: none !important; }   /* Namen stehen in der offenen Leiste */

.app-shell .sidebar {
  background: var(--hn-surface);
  border: 1px solid rgba(222, 210, 197, .65);
  box-shadow: 0 2px 6px rgba(112, 94, 78, .06), 0 22px 44px -18px rgba(112, 94, 78, .30);
}
.sidebar .sidebar-logo { padding: 0 14px 22px; }
.sidebar .logo-word {
  font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hn-text);
}
.app-shell .sidebar .nav-item {
  height: 48px; padding: 0 16px; gap: 16px; margin: 0 0 8px; border: none; border-radius: 16px;
  color: var(--hn-text); font-size: 13.5px; font-weight: 500; overflow: hidden;
}
.app-shell .sidebar .nav-item:not(.active):not(.is-child-active):hover { background: var(--hn-bg); }
.app-shell .sidebar .nav-item.active,
.app-shell .sidebar .nav-group-toggle.is-child-active {
  background: var(--hn-second); color: var(--hn-text); font-weight: 600;
  border: none; padding-left: 16px; box-shadow: none;
}
.sidebar .nav-item .nav-icon, .sidebar .nav-item .nav-icon .hn-ico { width: 24px; height: 24px; margin: 0; }
.hn-ico { display: block; flex-shrink: 0; color: var(--hn-text); }
.active > .nav-icon > .hn-ico-home, .active > .hn-ico-home { --hn-fill: currentColor; }
.sidebar .nav-item.rub-settings { margin-top: 44px; }

@media (min-width: 761px) {
  /* Leiste schwebt links ueber der Seite; Seite bekommt links Platz dafuer */
  .app-shell .sidebar {
    position: fixed; left: 16px; top: 76px; z-index: 120;
    width: 66px; height: auto; max-height: calc(100vh - 92px);
    padding: 9px 8px; border-radius: 33px; overflow: hidden;
    transition: width 220ms var(--ease-out), padding 220ms var(--ease-out), border-radius 220ms var(--ease-out);
  }
  .app-shell .sidebar .nav-item { width: 48px; padding: 0; justify-content: center; margin: 0 0 24px; }
  /* eingeklappt: auch der aktive Eintrag mittig (vorher schob padding-left:16px das Symbol nach rechts) */
  .app-shell .sidebar .nav-item.active,
  .app-shell .sidebar .nav-group-toggle.is-child-active { padding: 0; }
  .app-shell .sidebar .nav-item.rub-settings { margin-top: 0; margin-bottom: 0; }
  .sidebar .sidebar-logo, .sidebar .nav-label { display: none; }

  /* offen: Maus darueber oder Tastatur darin (das Profil ist seit 25.10.2026 oben rechts) */
  .app-shell .sidebar:hover, .app-shell .sidebar:focus-within {
    width: 238px; padding: 26px 14px 20px; border-radius: 28px; overflow: visible;
  }
  .sidebar:is(:hover, :focus-within) .sidebar-logo { display: flex; }
  .sidebar:is(:hover, :focus-within) .nav-label { display: inline; }
  .app-shell .sidebar:is(:hover, :focus-within) .nav-item { width: auto; padding: 0 16px; justify-content: flex-start; margin: 0 0 8px; }
  .app-shell .sidebar:is(:hover, :focus-within) .nav-item.rub-settings { margin-top: 44px; }

  .app-main { padding-left: 0; }
  .app-shell .content, .app-shell .content:has(#page-dashboard.active) { padding: 20px 36px 90px 116px; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .app-shell .sidebar { transition: none; } }

/* Handy: keine Seitenleiste (25.10.2026, Wunsch Leandro) - navigiert wird ueber die untere Leiste,
   Bibliothek und Klassen stehen im Profilmenue oben rechts (.user-menu-mobile, siehe unten). */
@media (max-width: 760px) {
  .app-shell .sidebar, .sidebar-overlay { display: none !important; }
  .app-shell .content, .app-shell .content:has(#page-dashboard.active) { padding-top: 14px; padding-left: 16px; padding-right: 16px; padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
}

/* ── 3. Kopfzeile ──────────────────────────────────────────────────────────── */
.content-inner > .page-location { display: none !important; }
.hn-top {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 16px; height: 40px;
  max-width: 1290px; margin: 0 auto 18px; padding: 0 12px; box-sizing: border-box;
}
/* Logo: etwas groesser und mit mehr Luft nach unten, damit man es als Logo erkennt (29.10.2026, Wunsch Lino) */
.hn-top { margin-bottom: 22px; }
.hn-brand {
  font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hn-text); margin-right: auto;
  /* Logo-Zeichen + Schriftzug als Knopf zur Startseite */
  display: inline-flex; align-items: center; gap: 9px; background: none; border: none;
  padding: 4px 6px 4px 0; cursor: pointer; border-radius: 10px;
}
.hn-brand:focus-visible { outline: 2px solid var(--hn-primary); outline-offset: 3px; }
.hn-brand-icon { width: 27px; height: 27px; object-fit: contain; display: block; }
@media (max-width: 760px) { .app-shell .hn-top { margin-bottom: 8px; } }
/* Profil: Kreis oben rechts, darunter rechtsbuendig das Profilmenue (Eintraege wie bisher) */
.hn-profile { position: relative; flex-shrink: 0; }
.hn-top:has(.user-menu:not(.hidden)) { z-index: 130; }   /* offenes Menue ueber Seite und Leiste */
.hn-avatar {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: var(--hn-text); color: var(--hn-surface); font: 700 13px/1 var(--font-body);
  display: flex; align-items: center; justify-content: center;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.hn-avatar:hover, .hn-avatar[aria-expanded="true"] { transform: translateY(-1px); box-shadow: var(--hn-shadow-sm); }
.hn-avatar:focus-visible { outline: 2px solid var(--hn-primary); outline-offset: 3px; }
.hn-profile .user-menu {
  top: calc(100% + 10px); bottom: auto; left: auto; right: 0; width: 260px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px); overflow-y: auto; box-sizing: border-box;
  background: var(--hn-surface); border-color: var(--hn-line); border-radius: 18px; box-shadow: var(--hn-shadow);
}
.content-inner { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .hn-avatar { transition: none; } .hn-avatar:hover, .hn-avatar[aria-expanded="true"] { transform: none; } }
/* Profilmenue: Bibliothek/Klassen nur auf dem Handy (dort fehlt die Seitenleiste) */
@media (min-width: 761px) { .user-menu-mobile { display: none !important; } }
@media (max-width: 760px) {
  .hn-top { height: 44px; padding: 0 8px; margin-bottom: 4px; gap: 10px; }
  .hn-avatar { width: 36px; height: 36px; font-size: 14px; }   /* auf dem Handy etwas groesser zum Antippen */
}

/* Untere Leiste (Handy): schwebend, nur Icons */
@media (max-width: 760px) {
  .app-shell .bottom-nav {
    left: 16px; right: 16px; bottom: 14px; height: 64px; padding: 8px 12px; box-sizing: border-box;
    justify-content: space-between; align-items: center; gap: 0; border-radius: 24px;
    background: var(--hn-surface); backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid rgba(222, 210, 197, .7); box-shadow: 0 2px 6px rgba(112, 94, 78, .06), 0 16px 36px -14px rgba(112, 94, 78, .32);
    padding-bottom: 8px;
  }
  .app-shell .bottom-nav::before, .app-shell .bottom-nav-item::before { display: none; }
  .app-shell .bottom-nav-item {
    flex: 0 0 48px; height: 48px; padding: 0; border-radius: 16px; justify-content: center; color: var(--hn-text);
  }
  .app-shell .bottom-nav-item .hn-ico { width: 23px; height: 23px; }
  .app-shell .bottom-nav-item.active { background: var(--hn-second); color: var(--hn-text); }
  .app-shell .bottom-nav-item > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ── 4. Home ───────────────────────────────────────────────────────────────── */
/* feines Punkteraster als fester Hintergrund der ganzen App (Leandro, 19.10.):
   Das Raster steht still, Karten und Inhalte gleiten beim Scrollen darueber. */
body:has(.app-shell)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--hn-bg);
  background-image: radial-gradient(circle, rgba(138, 119, 101, .20) 1px, transparent 1.6px);
  background-size: 22px 22px;
}
.app-shell .content { background: transparent; }
.content-inner:has(#page-dashboard.active) { max-width: 1290px; }
#page-dashboard .hn-home { padding: 0; max-width: none; }

.hn-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 22px 0 26px;
  border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--hn-primary), var(--hn-primary-h));
  color: #FFFFFF; font: 600 14px/1 var(--font-body);
  box-shadow: 0 1px 2px rgba(112, 94, 78, .25), 0 8px 18px -8px rgba(112, 94, 78, .65);
}
.hn-btn:hover { background: var(--hn-primary-h); }
.hn-btn:active { background: var(--hn-primary-p); transform: translateY(1px); }
.hn-btn .hn-arrow { flex-shrink: 0; }
.hn-btn-sm { height: 42px; padding: 0 20px 0 24px; font-size: 13px; gap: 14px; }
.hn-btn-light {
  background: #FFFDF9; color: var(--hn-text); border: 1px solid rgba(222, 210, 197, .8);
  box-shadow: 0 1px 2px rgba(112, 94, 78, .06), 0 8px 18px -10px rgba(112, 94, 78, .35);
}
.hn-btn-light:hover, .hn-btn-light:active { background: var(--hn-bg); }

/* Begruessung */
.hn-hero { position: relative; min-height: 425px; margin-top: -18px; padding-top: 18px; }
.hn-hero-text { position: relative; z-index: 1; padding: 78px 0 0 138px; max-width: 640px; }
.hn-hello { margin: 0; font-family: var(--font-title); color: var(--hn-text); font-weight: 400; }
.hn-hello-hi { display: block; font-weight: 700; font-size: 54px; line-height: 1.06; letter-spacing: -.01em; }
.hn-hello-sub { display: block; font-size: 40px; line-height: 1.2; margin-top: 2px; }
.hn-lead { margin: 22px 0 0; max-width: 410px; font-size: 15px; line-height: 1.8; color: var(--hn-text); }
.hn-hero .hn-btn { margin-top: 28px; }

.hn-hero-art { position: absolute; inset: 0; pointer-events: none; }
.hn-wave { position: absolute; right: -36px; top: 190px; width: 330px; height: 240px; fill: rgba(229, 213, 197, .32); filter: blur(2px); }
.hn-figure { position: absolute; left: 65.3%; top: 172px; width: 166px; height: 166px; }
.hn-figure .mascot { display: block; }
.hn-figure-shadow {
  position: absolute; left: calc(65.3% - 10px); top: 324px; width: 186px; height: 22px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138, 119, 101, .30), rgba(138, 119, 101, 0));
}
.hn-hand {
  position: absolute; left: 76.2%; top: 126px; font-family: var(--font-hand); font-weight: 600; font-size: 25px;
  color: var(--hn-text); transform: rotate(-13deg); transform-origin: left bottom; white-space: nowrap;
}
.hn-curl { position: absolute; left: 73.4%; top: 172px; width: 30px; height: 24px; color: var(--hn-text); }
.hn-spark { position: absolute; fill: var(--hn-gold); }
.hn-spark-1 { left: 78.4%; top: 192px; width: 24px; height: 24px; }
.hn-spark-2 { left: 64.6%; top: 238px; width: 13px; height: 13px; }
.hn-spark-3 { left: 66.2%; top: 196px; width: 11px; height: 11px; fill: var(--hn-line); }
.hn-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--hn-line); }
.hn-dot-1 { left: 79.8%; top: 250px; }
.hn-dot-2 { left: 78.1%; top: 296px; width: 4px; height: 4px; }
.hn-dot-3 { left: 63.8%; top: 300px; width: 3px; height: 3px; }

/* Drei Karten */
.hn-cards { display: grid; grid-template-columns: 1.09fr 1.07fr 1fr; gap: 32px; }
.hn-card {
  position: relative; background: var(--hn-surface); border-radius: 22px; padding: 28px 26px 28px;
  border: 1px solid rgba(222, 210, 197, .55); box-shadow: var(--hn-shadow); min-width: 0;
}
.hn-label { font-size: 11px; color: var(--hn-text-2); }
.hn-card-title { margin: 12px 0 0; font-family: var(--font-title); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--hn-text); }
.hn-card-title::after { content: ""; display: block; width: 110px; height: 1px; margin-top: 12px; background: linear-gradient(90deg, var(--hn-line), rgba(222, 210, 197, 0)); }
.hn-text { margin: 12px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--hn-text-2); }
.hn-card .hn-btn { margin-top: 20px; }
.hn-card-head { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 14.5px/1.3 var(--font-body); color: var(--hn-text); }

.hn-next { display: flex; gap: 20px; }
.hn-next-ico {
  flex-shrink: 0; width: 66px; height: 66px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--hn-second); color: var(--hn-text); box-shadow: inset 0 0 0 1px rgba(138, 119, 101, .12);
}
.hn-next-ico svg { display: block; }
.hn-next-body { min-width: 0; padding-top: 2px; }

.hn-mini-ico { width: 22px; height: 22px; border-radius: 7px; background: var(--hn-second); display: inline-flex; align-items: center; justify-content: center; color: var(--hn-text); }
.hn-mini-ico svg { display: block; }
.hn-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.hn-step { position: relative; text-align: center; }
.hn-step + .hn-step::before {   /* Linie zum vorherigen Punkt */
  content: ""; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px; background: var(--hn-second);
}
.hn-step.is-done + .hn-step::before { background: var(--hn-text); }
.hn-step button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 0; border: none; background: none; cursor: pointer; color: var(--hn-text-2); }
.hn-step-dot { width: 10px; height: 10px; margin: 7px 0; border-radius: 50%; background: #6E5F52; box-shadow: 0 0 0 5px var(--hn-second); }
.hn-step.is-done .hn-step-dot { background: var(--hn-text); box-shadow: 0 0 0 5px var(--hn-second); }
.hn-step.is-current .hn-step-dot { width: 24px; height: 24px; margin: 0; background: var(--hn-surface); box-shadow: 0 0 0 2px var(--hn-text), 0 2px 6px rgba(112, 94, 78, .25); }
.hn-step.is-current::after {   /* kurzes Stueck Fortschritt nach dem aktuellen Punkt */
  content: ""; position: absolute; top: 12px; left: calc(50% + 12px); width: 28%; height: 2px; background: var(--hn-text);
}
.hn-steps.is-loading .hn-step-dot { background: var(--hn-line); }
.hn-step-label { font-size: 11px; line-height: 1.3; }
.hn-step.is-current .hn-step-label { color: var(--hn-text); font-weight: 600; }
.hn-small { margin: 30px 0 0; font-size: 12px; line-height: 1.6; color: var(--hn-text-2); }

.hn-bulb { position: absolute; top: 22px; right: 24px; color: #A08C74; }
.hn-tip-kind { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-family: var(--font-title); font-weight: 700; font-size: 15.5px; color: var(--hn-text); }
.hn-tip-badge { width: 24px; height: 24px; border-radius: 50%; background: var(--hn-second); color: var(--hn-primary-p); display: inline-flex; align-items: center; justify-content: center; }
.hn-tip-badge svg { display: block; }

/* Direkt zu Stellio */
.hn-direct { margin: 40px 0 0; }
.hn-direct-title { margin: 0 0 18px 12px; font: 600 14.5px/1.3 var(--font-body); color: var(--hn-text); }
.hn-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 0 4px 0 12px; }
.hn-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 26px; min-height: 135px; padding: 30px 24px 26px;
  text-align: left; border-radius: 20px; cursor: pointer; background: var(--hn-surface); color: var(--hn-text);
  border: 1px solid rgba(222, 210, 197, .5); box-shadow: var(--hn-shadow-sm); font-family: var(--font-body);
}
.hn-tile:hover { background: #FFFDF9; box-shadow: var(--hn-shadow); }
.hn-tile-ico { color: #5E4F43; line-height: 0; --hn-tile-fill: var(--hn-second); }
.hn-tile-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) {
  .hn-tile, .hn-btn { transition: background 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 100ms var(--ease-out); }
  .hn-tile:hover { transform: translateY(-2px); }
}

/* Bisherige Abschnitte unter "Direkt zu Stellio" (nur wenn es etwas zu zeigen gibt) */
.hn-home .home-sec, .hn-home .home-duo { margin-top: 36px; padding: 0 4px 0 12px; }

/* Mittlere Breiten: Figur unter den Text, Karten umbrechen */
@media (max-width: 1100px) {
  .hn-hero { min-height: 0; }
  .hn-hero-text { padding: 56px 0 0 24px; }
  .hn-hero-art { position: relative; height: 230px; }
  .hn-figure { left: calc(50% - 75px); top: 40px; }
  .hn-figure-shadow { left: calc(50% - 93px); top: 184px; }
  .hn-hand { left: calc(50% + 70px); top: 6px; }
  .hn-curl { left: calc(50% + 20px); top: 26px; }
  .hn-spark-1 { left: calc(50% + 92px); top: 70px; }
  .hn-spark-2 { left: calc(50% - 112px); top: 100px; }
  .hn-spark-3 { left: calc(50% - 90px); top: 52px; }
  .hn-dot-1 { left: calc(50% + 110px); top: 130px; } .hn-dot-2 { left: calc(50% + 96px); top: 160px; } .hn-dot-3 { left: calc(50% - 120px); top: 160px; }
  .hn-wave { top: 60px; height: 170px; }
  .hn-cards { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
  .hn-tiles { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* Handy (Vorlage "Home – Mobile") */
@media (max-width: 760px) {
  .content:has(#page-dashboard.active) { background-size: 100% 100%, 20px 20px; }
  .hn-hero-text { padding: 34px 8px 0; max-width: none; }
  .hn-hello-hi { font-size: 38px; line-height: 1.1; }
  .hn-hello-sub { font-size: 28px; line-height: 1.25; margin-top: 4px; }
  .hn-lead { margin-top: 18px; font-size: 15px; line-height: 1.75; max-width: 250px; }
  .hn-hero .hn-btn { margin-top: 26px; height: 52px; padding: 0 26px 0 28px; font-size: 15px; gap: 14px; }
  .hn-hero-art { height: 200px; margin-top: 4px; }
  .hn-figure { left: calc(50% - 64px); top: 52px; width: 104px; height: 104px; }
  .hn-figure .mascot { --m-size: 104px !important; }
  .hn-figure-shadow { left: calc(50% - 76px); top: 152px; width: 128px; height: 18px; }
  .hn-hand { left: calc(50% + 40px); top: 26px; font-size: 19px; }
  .hn-curl { left: calc(50% - 6px); top: 36px; width: 22px; height: 18px; }
  .hn-spark-1 { left: calc(50% + 58px); top: 96px; width: 16px; height: 16px; }
  .hn-spark-2 { left: calc(50% - 98px); top: 100px; width: 11px; height: 11px; }
  .hn-spark-3 { left: calc(50% - 74px); top: 66px; width: 8px; height: 8px; }
  .hn-dot-1 { left: calc(50% + 74px); top: 130px; } .hn-dot-2 { left: calc(50% + 130px); top: 76px; } .hn-dot-3 { left: calc(50% - 110px); top: 150px; }
  .hn-wave { right: -16px; top: 30px; width: 70%; height: 170px; opacity: .8; }
  .hn-cards { grid-template-columns: 1fr; gap: 18px; padding: 0 4px; }
  .hn-card { padding: 22px 22px 24px; border-radius: 22px; }
  .hn-next-ico { display: none; }
  .hn-card-title { font-size: 17px; margin-top: 14px; }
  .hn-card-title::after { width: 64%; }
  .hn-text { font-size: 14px; }
  .hn-direct { margin-top: 30px; }
  .hn-direct-title { margin-left: 8px; }
  .hn-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 0 4px; }
  .hn-tile { min-height: 112px; padding: 20px 18px; gap: 18px; }
  .hn-tile:last-child { grid-column: 1 / -1; }
  .hn-home .home-sec, .hn-home .home-duo { padding: 0 4px; }
}

/* ── Mein Weg in Braun statt Blau (Leandro, 19.10.) ─────────────────────────── */
#page-myway { --gold: var(--hn-primary); --gold-hover: var(--hn-primary-h); --gold-text: #705E4E; --gold-light: #EDE2D5; }
#page-myway .myway-zz-blob-1 { background: radial-gradient(circle at 35% 35%, #EDE2D5, transparent 70%); }
#page-myway .myway-zz-circle { --mw-under: #5E4E40; }
#page-myway .myway-zz-circle-done,
#page-myway .myway-zz-circle-current { background: radial-gradient(circle at 35% 28%, #A08D7A, #8A7765 62%); }
#page-myway .myway-zz-circle-done { box-shadow: 0 4px 0 var(--mw-under), 0 6px 10px rgba(48, 40, 35, .18); }
#page-myway .myway-zz-circle-current { box-shadow: 0 4px 0 var(--mw-under), 0 0 0 7px #EDE2D5, 0 0 0 9px #DED2C5; }
#page-myway .myway-zz-circle-upcoming { --mw-under: #D2C8B7; }
#page-myway .myway-zz-circle-pending { box-shadow: 0 4px 0 #EDE2D5; }
#page-myway .myway-zz-pill { box-shadow: 0 2px 0 #5E4E40; }
#page-myway .myway-zz-info-eyebrow { color: #705E4E; }
@media (min-width: 1024px) {
  #page-myway .myway-zz-circle-done { box-shadow: 0 5px 0 var(--mw-under), 0 8px 14px rgba(48, 40, 35, .18); }
  #page-myway .myway-zz-circle-current { box-shadow: 0 5px 0 var(--mw-under), 0 0 0 8px #EDE2D5, 0 0 0 10px #DED2C5; }
}

/* ── 5. Mein Weg – Detailansicht eines Schritts (myway-detail.js) ────────────── */
body.mwd-lock { overflow: hidden; }
.mwd-overlay, .cstep-overlay {
  position: fixed; inset: 0; z-index: 150; display: none; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box; background: rgba(48, 40, 35, .26);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.mwd-overlay.open, .cstep-overlay.open { display: flex; }
.mwd-sheet, .cstep-card { outline: none; }
.mwd-sheet {
  position: relative; width: 460px; max-width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; box-sizing: border-box;
  padding: 26px 26px 34px; border-radius: 28px; background: var(--hn-surface); color: var(--hn-text);
  border: 1px solid rgba(222, 210, 197, .65);
  box-shadow: 0 2px 6px rgba(112, 94, 78, .08), 0 30px 60px -20px rgba(48, 40, 35, .40);
}
.mwd-head, .bibn-d-head { display: flex; align-items: center; gap: 14px; }
.mwd-icon-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--hn-text);
}
.mwd-icon-btn:hover { background: var(--hn-second); }
.mwd-icon-btn:focus-visible { outline: 2px solid var(--hn-primary); outline-offset: 2px; }
.mwd-icon-btn svg { display: block; }
.mwd-icon-btn.mwd-x { margin-left: auto; width: 32px; height: 32px; background: transparent; color: var(--hn-text-2); }
.mwd-icon-btn.mwd-x:hover { background: var(--hn-second); color: var(--hn-text); }
.mwd-title { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--hn-text); }
.mwd-card {
  margin-top: 28px; padding: 28px 24px 18px; border-radius: 20px; background: var(--hn-surface);
  border: 1px solid rgba(222, 210, 197, .6); box-shadow: var(--hn-shadow-sm);
}
.mwd-intro { display: flex; gap: 20px; align-items: flex-start; }
.mwd-ico {
  flex-shrink: 0; width: 74px; height: 74px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #EFE5D9, #E6D8C8); color: #3E332B; box-shadow: inset 0 0 0 1px rgba(138, 119, 101, .12);
  --hn-tile-fill: #F7F0E6;
}
.mwd-intro-body { min-width: 0; padding-top: 6px; }
.mwd-card-title { margin: 0; font: 600 16px/1.35 var(--font-body); color: var(--hn-text); }
.mwd-card-title::after { content: ""; display: block; width: 74%; height: 1px; margin-top: 14px; background: linear-gradient(90deg, var(--hn-line), rgba(222, 210, 197, 0)); }
.mwd-text { margin: 14px 0 0; font-size: 13px; line-height: 1.75; color: var(--hn-text); }
.mwd-files { display: grid; gap: 12px; margin-top: 22px; }
.mwd-file {
  display: flex; align-items: center; gap: 18px; padding: 14px 16px 14px 18px; border-radius: 16px;
  background: #FFFDF9; border: 1px solid rgba(222, 210, 197, .55); box-shadow: var(--hn-shadow-sm);
}
.mwd-file-thumb { flex-shrink: 0; width: 50px; line-height: 0; }
.doc-thumb { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 4px rgba(112, 94, 78, .16)); }
.mwd-file-body { flex: 1; min-width: 0; }
.mwd-file-name { font-size: 13.5px; font-weight: 600; color: var(--hn-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwd-file-meta { margin-top: 5px; font-size: 12px; color: var(--hn-text-2); }
.mwd-go { width: 100%; justify-content: center; margin-top: 26px; height: 50px; font-size: 14px; }
.mwd-sep { height: 1px; margin: 22px 0 16px; background: var(--hn-line); opacity: .7; }
.mwd-check { display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-size: 12.5px; color: var(--hn-text); position: relative; }
.mwd-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mwd-box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid var(--hn-text); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; color: transparent; background: #FFFDF9;
}
.mwd-box svg { display: block; }
.mwd-check input:checked + .mwd-box { color: var(--hn-text); }
.mwd-check input:focus-visible + .mwd-box { outline: 2px solid var(--hn-primary); outline-offset: 2px; }
.mwd-check:has(input:disabled) { cursor: default; color: var(--hn-text-2); }
.mwd-check input:disabled + .mwd-box { border-color: var(--hn-text-2); }
#page-myway .myway-zz-node { cursor: pointer; }

/* ── 6. Mein Weg – Abschlussanimation (celebrateStep() in celebrate.js) ───────── */
.cstep-overlay { z-index: 160; }
.cstep-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cstep-card {
  position: relative; width: 420px; max-width: 100%; min-height: 660px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 40px 34px 46px; border-radius: 30px; color: var(--hn-text); overflow: hidden;
  background: radial-gradient(ellipse 70% 42% at 50% 22%, #FBF7F1 0%, rgba(251, 247, 241, 0) 100%), linear-gradient(180deg, #F2EBE1, #ECE2D5);
  border: 1px solid rgba(222, 210, 197, .7);
  box-shadow: 0 2px 6px rgba(112, 94, 78, .08), 0 30px 60px -20px rgba(48, 40, 35, .45);
}
.cstep-art { position: relative; width: 250px; height: 210px; flex-shrink: 0; }
.cstep-glow { position: absolute; left: 50%; top: -30px; width: 230px; height: 230px; margin-left: -115px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 253, 249, .9), rgba(255, 253, 249, 0)); }
.cstep-figure { position: absolute; left: 50%; top: 44px; margin-left: -66px; width: 132px; height: 132px; }
.cstep-figure .mascot { display: block; }
.cstep-shadow { position: absolute; left: 50%; top: 172px; width: 150px; height: 18px; margin-left: -75px; border-radius: 50%; background: radial-gradient(closest-side, rgba(138, 119, 101, .26), rgba(138, 119, 101, 0)); }
.cstep-spark { position: absolute; fill: var(--hn-gold); }
.cstep-s1 { left: 196px; top: 34px; width: 26px; height: 26px; }
.cstep-s2 { left: 22px; top: 112px; width: 17px; height: 17px; }
.cstep-s3 { left: 214px; top: 106px; width: 15px; height: 15px; }
.cstep-bit { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: #5E4E43; transform: rotate(24deg); }
.cstep-b1 { left: 54px; top: 22px; }
.cstep-b2 { left: 30px; top: 70px; width: 8px; height: 6px; background: #8A7765; transform: rotate(-30deg); }
.cstep-b3 { left: 46px; top: 166px; width: 8px; height: 8px; transform: rotate(50deg); }
.cstep-b4 { left: 96px; top: 12px; width: 6px; height: 6px; background: var(--hn-line); }
.cstep-b5 { left: 206px; top: 156px; width: 6px; height: 6px; background: #A99A8C; }
.cstep-curl { position: absolute; left: 160px; top: 20px; width: 26px; height: 20px; color: #4A3D34; transform: rotate(10deg); }
.cstep-title { margin: 30px 0 0; font-family: var(--font-title); font-weight: 700; font-size: 31px; line-height: 1.2; color: var(--hn-text); }
.cstep-sub { margin: 14px auto 0; max-width: 280px; font-size: 14.5px; line-height: 1.75; color: var(--hn-text); }
.cstep-next { margin-top: 30px; height: 50px; padding: 0 26px 0 30px; font-size: 14px; }
.cstep-link {
  margin-top: 26px; border: none; background: none; cursor: pointer; padding: 4px 6px; color: var(--hn-text);
  font: 500 13px/1.3 var(--font-body); text-decoration: underline; text-underline-offset: 3px;
}
.cstep-link:hover { color: var(--hn-primary-p); }
@media (prefers-reduced-motion: no-preference) {
  .cstep-overlay.open .cstep-card { animation: cstep-in 380ms var(--ease-out) both; }
  .cstep-overlay.open .cstep-spark, .cstep-overlay.open .cstep-bit { animation: cstep-pop 520ms var(--ease-out) both; animation-delay: 160ms; }
  .mwd-overlay.open .mwd-sheet { animation: cstep-in 260ms var(--ease-out) both; }
}
@keyframes cstep-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cstep-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; } }

@media (max-width: 760px) {
  .mwd-overlay, .cstep-overlay { padding: 12px; align-items: stretch; }
  .mwd-sheet { width: 100%; max-height: none; padding: 22px 18px 30px; border-radius: 26px; }
  .mwd-card { margin-top: 24px; padding: 22px 18px 14px; }
  .mwd-intro { gap: 16px; }
  .mwd-ico { width: 64px; height: 64px; }
  .cstep-card { width: 100%; min-height: 0; padding: 30px 22px 40px; border-radius: 26px; }
  .cstep-title { font-size: 28px; }
}

/* ── 7. Meine Bibliothek (bibliothek.js, unten) ─────────────────────────────── */
.content-inner:has(#page-bibliothek.active) { max-width: 1290px; }
.bibn-panel {
  background: var(--hn-surface); border-radius: 24px; padding: 34px 36px 34px;
  border: 1px solid rgba(222, 210, 197, .6); box-shadow: var(--hn-shadow);
}
.bibn-head { display: flex; align-items: flex-start; gap: 20px; }
.bibn-head-text { flex: 1; min-width: 0; }
.bibn-title { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 25px; line-height: 1.25; color: var(--hn-text); letter-spacing: -.005em; }
.bibn-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--hn-text-2); }
.bibn-new { flex-shrink: 0; gap: 10px; padding: 0 22px 0 20px; margin-top: 4px; }
.bibn-new svg { display: block; }
.bibn-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.bibn-pill {
  height: 38px; padding: 0 22px; border-radius: 999px; border: none; cursor: pointer;
  background: #F1EADF; color: var(--hn-text); font: 600 12.5px/1 var(--font-body);
}
.bibn-pill:hover { background: var(--hn-second); }
.bibn-pill.active { background: linear-gradient(180deg, #7B6857, #705E4E); color: #FFFFFF; box-shadow: 0 6px 14px -8px rgba(112, 94, 78, .7); }
.bibn-pill:focus-visible, .bibn-row:focus-visible, .bibn-dtab:focus-visible, .bibn-menu-btn:focus-visible { outline: 2px solid var(--hn-primary); outline-offset: 2px; }
.bibn-main { margin-top: 24px; }
.bibn-panel.is-detail .bibn-head, .bibn-panel.is-detail .bibn-pills { display: none; }
.bibn-panel.is-detail .bibn-main { margin-top: 0; }
.bibn-list { display: grid; gap: 14px; }
.bibn-row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 230px 130px; align-items: center; gap: 28px;
  width: 100%; padding: 22px 34px 22px 30px; box-sizing: border-box; text-align: left; cursor: pointer;
  border-radius: 18px; background: #FDFBF7; border: 1px solid rgba(222, 210, 197, .5); box-shadow: var(--hn-shadow-sm);
  font-family: var(--font-body); color: var(--hn-text);
}
.bibn-row:hover { background: #FFFDF9; box-shadow: var(--hn-shadow); }
.bibn-row-ico {
  width: 58px; height: 58px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: #F3EDE5; color: var(--hn-text); box-shadow: inset 0 0 0 1px rgba(138, 119, 101, .08);
}
.bibn-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bibn-row-title { font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibn-row-sub { font-size: 12.5px; color: var(--hn-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibn-status {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px;
  background: #EFE7DC; color: #4E4036; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.bibn-status svg { display: block; flex-shrink: 0; }
.bibn-status.is-closed { background: #E7EBDF; color: #4F5A3F; }
.bibn-row-date { justify-self: end; font-size: 12.5px; color: var(--hn-text-2); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .bibn-row, .bibn-pill, .bibn-file { transition: background 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 100ms var(--ease-out); }
  .bibn-row:hover, .bibn-file:hover { transform: translateY(-1px); }
}

/* Dokumente: die bisherigen Reiter als ruhige Unter-Pillen */
#bibn-docs .bib-tabs { background: #F3EDE5; box-shadow: none; margin-bottom: 22px; }
#bibn-docs .bib-tab.active { background: #FFFDF9; }

/* Dateivorschau einer Bewerbung */
.bibn-d-head { padding-bottom: 20px; border-bottom: 1px solid rgba(222, 210, 197, .7); }
.bibn-d-title { margin: 0; min-width: 0; font-family: var(--font-title); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--hn-text); overflow-wrap: anywhere; }
.bibn-dtabs { display: flex; gap: 14px; margin-top: 22px; }
.bibn-dtab {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 20px; border-radius: 12px; border: none; cursor: pointer;
  background: transparent; color: var(--hn-text-2); font: 600 12.5px/1 var(--font-body);
}
.bibn-dtab svg { display: block; }
.bibn-dtab:hover { color: var(--hn-text); background: #F3EDE5; }
.bibn-dtab.active { background: var(--hn-hover); color: var(--hn-text); box-shadow: 0 4px 10px -6px rgba(112, 94, 78, .5); }
.bibn-d-body { margin-top: 24px; }
.bibn-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.bibn-file {
  display: flex; flex-direction: column; border-radius: 18px; overflow: visible; background: #FDFBF7;
  border: 1px solid rgba(222, 210, 197, .55); box-shadow: var(--hn-shadow-sm);
}
.bibn-file-prev {
  height: 220px; display: flex; align-items: flex-end; justify-content: center; border-radius: 18px 18px 0 0; overflow: hidden;
  background: linear-gradient(180deg, #F7F3ED, #F1EBE2); border-bottom: 1px solid rgba(222, 210, 197, .55);
}
.bibn-file-prev .doc-thumb { width: 150px; margin-bottom: -6px; }
.bibn-file-info { padding: 14px 16px 10px; min-width: 0; }
.bibn-file-name { font-size: 13px; font-weight: 600; color: var(--hn-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibn-file-meta { margin-top: 4px; font-size: 11.5px; color: var(--hn-text-2); }
.bibn-file-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.bibn-file-date { font-size: 11px; color: var(--hn-text-2); }
.bibn-menu-wrap { position: relative; }
.bibn-menu-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--hn-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.bibn-menu-btn:hover { background: var(--hn-second); }
.bibn-menu {
  position: absolute; right: 0; bottom: 36px; z-index: 5; min-width: 190px; padding: 6px; border-radius: 14px;
  background: #FFFDF9; border: 1px solid rgba(222, 210, 197, .8); box-shadow: var(--hn-shadow);
}
.bibn-menu button {
  display: block; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: none; cursor: pointer;
  text-align: left; font: 500 13px/1.3 var(--font-body); color: var(--hn-text);
}
.bibn-menu button:hover, .bibn-menu button:focus-visible { background: var(--hn-bg); outline: none; }
.bibn-file.is-skel .bibn-file-prev { background: #F1EBE3; }
.bibn-file.is-skel .bibn-file-info { height: 52px; }
.bibn-notes { display: grid; gap: 14px; max-width: 720px; }
#bibn-detail textarea.bibn-notes-input {
  width: 100%; min-height: 180px; box-sizing: border-box; padding: 16px 18px; border-radius: 16px; resize: vertical;
  border: 1px solid var(--hn-line); background: #FFFDF9; color: var(--hn-text); font: 400 14px/1.7 var(--font-body);
}
#bibn-detail textarea.bibn-notes-input:focus { outline: 2px solid var(--hn-primary); outline-offset: 1px; }
.bibn-notes .hn-btn { justify-self: start; }

@media (max-width: 760px) {
  .bibn-panel { padding: 24px 16px 22px; border-radius: 22px; }
  .bibn-head { flex-direction: column; gap: 16px; }
  .bibn-title { font-size: 23px; }
  .bibn-new { margin-top: 0; }
  .bibn-pills { gap: 8px; margin-top: 22px; }
  .bibn-pill { padding: 0 18px; }
  .bibn-row {
    grid-template-columns: 46px auto minmax(0, 1fr); grid-template-areas: "ico main main" "ico status date";
    gap: 6px 14px; padding: 14px 16px;
  }
  .bibn-row-ico { grid-area: ico; width: 46px; height: 46px; align-self: start; }
  .bibn-row-main { grid-area: main; }
  .bibn-status { grid-area: status; margin-top: 4px; }
  .bibn-row-date { grid-area: date; align-self: center; font-size: 11.5px; margin-top: 4px; }
  .bibn-d-title { font-size: 18px; }
  .bibn-files { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .bibn-file-prev { height: 150px; }
  .bibn-file-prev .doc-thumb { width: 102px; }
  .bibn-file-info { padding: 12px 12px 8px; }
}


/* ── Knoepfe heben sich beim Darueberfahren leicht an (Leandro, 19.10.) ──────── */
@media (hover: hover) {
  .app-shell .sidebar .nav-item,
  .btn, .hn-btn, .hn-btn-light, .bottom-nav-item {
    transition: transform 160ms var(--ease-out, ease-out), box-shadow 160ms var(--ease-out, ease-out), background-color 160ms ease;
  }
  .app-shell .sidebar .nav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(112, 94, 78, .35);
  }
  .btn:not(:disabled):hover, .hn-btn:not(:disabled):hover, .hn-btn-light:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(112, 94, 78, .45);
  }
  .btn:not(:disabled):active, .hn-btn:not(:disabled):active, .hn-btn-light:not(:disabled):active,
  .app-shell .sidebar .nav-item:active { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .sidebar .nav-item:hover, .btn:hover, .hn-btn:hover, .hn-btn-light:hover { transform: none; }
}

/* ── Bibliothek+ (lino/bibliothek): Vorschau-Karten, Ordner, Ansicht, Zusammenstellen ── */
.bibp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bibp-card { position: relative; display: flex; flex-direction: column; background: var(--hn-surface, var(--card-bg)); border: 1px solid var(--hn-line, var(--card-border)); border-radius: 14px; overflow: hidden; }
.bibp-thumb-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.bibp-thumb { position: relative; height: 150px; background: var(--hn-bg, var(--bg-second)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bibp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bibp-thumb iframe { position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; pointer-events: none; background: #fff; }
.bibp-thumb-text { align-items: flex-start; padding: 10px; }
.bibp-page { width: 100%; height: 100%; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 8px; font-size: 6.5px; line-height: 1.35; color: #333; overflow: hidden; white-space: pre-wrap; text-align: left; }
.bibp-page-empty { color: var(--text-faint); font-size: 10px; }
.bibp-card-info { padding: 8px 10px 4px; min-width: 0; }
.bibp-name { font-size: 13px; font-weight: 600; color: var(--hn-text, var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibp-meta { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibp-actions { display: flex; justify-content: flex-end; gap: 2px; padding: 0 6px 6px; }
.bibp-act { width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.bibp-act:hover { background: var(--hn-bg, var(--bg-second)); color: var(--hn-text, var(--text)); }
.bibp-act.is-danger:hover { color: var(--red); }
.bibp-act:disabled { opacity: .35; cursor: default; }
.bibp-folders { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bibp-folder { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hn-line, var(--card-border)); background: var(--hn-surface, var(--card-bg)); color: var(--hn-text, var(--text)); border-radius: 999px; padding: 7px 12px; font: 600 13px/1 var(--font-body); cursor: pointer; }
.bibp-folder span { color: var(--text-muted); font-weight: 500; }
.bibp-folder.active { border-color: var(--hn-primary, var(--gold)); box-shadow: 0 0 0 1px var(--hn-primary, var(--gold)); }
.bibp-folder-new { color: var(--hn-primary, var(--gold-text)); border-style: dashed; }
.bibp-drafts { margin-top: 14px; border: 1px solid var(--hn-line, var(--card-border)); border-radius: 14px; padding: 4px 14px; background: var(--hn-surface, var(--card-bg)); }
.bibp-drafts summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 13.5px; }
.bibp-draft { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hn-line, var(--card-border)); }
.bibp-draft-main { flex: 1; min-width: 0; }
/* Ansicht + kleine Eingabe-Fenster */
.bibp-viewer { position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bibp-viewer-card { background: var(--hn-surface, var(--card-bg)); border-radius: 18px; width: min(900px, 100%); height: min(88vh, 1100px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.bibp-viewer-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--hn-line, var(--card-border)); }
.bibp-viewer-title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibp-viewer-body { flex: 1; min-height: 0; overflow: auto; background: var(--hn-bg, var(--bg-second)); display: flex; flex-direction: column; }
.bibp-viewer-pdf { flex: 1; width: 100%; border: 0; background: #fff; }
.bibp-viewer-img { max-width: 100%; margin: auto; display: block; }
.bibp-viewer-text { background: #fff; margin: 16px auto; padding: 28px 32px; max-width: 680px; width: calc(100% - 32px); box-sizing: border-box; white-space: pre-wrap; font-size: 14px; line-height: 1.6; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.bibp-viewer-body > div:last-child:not(.bibp-viewer-text) { padding: 0 16px 16px; }
.bibp-viewer-loading { margin: auto; color: var(--text-muted); }
.bibp-ask-card { background: var(--hn-surface, var(--card-bg)); border-radius: 18px; padding: 20px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; }
.bibp-ask-title { font-weight: 700; font-size: 15px; }
.bibp-ask-card input { padding: 10px 12px; border: 1.5px solid var(--hn-line, var(--card-border)); border-radius: 10px; font-size: 15px; }
.bibp-ask-actions { display: flex; justify-content: flex-end; gap: 8px; }
.bibp-move-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* Zusammenstellen */
.bibp-combine { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .bibp-combine { grid-template-columns: 1fr; } }
.bibp-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.bibp-pick, .bibp-order-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--hn-line, var(--card-border)); border-radius: 12px; background: var(--hn-surface, var(--card-bg)); margin-bottom: 8px; }
.bibp-pick-main { flex: 1; min-width: 0; }
.bibp-mini { width: 46px; flex-shrink: 0; padding: 0; border: none; background: none; cursor: pointer; border-radius: 6px; overflow: hidden; }
.bibp-mini .bibp-thumb { height: 60px; }
.bibp-mini .bibp-thumb svg { width: 26px; height: 26px; }
.bibp-mini .bibp-page { font-size: 3px; padding: 3px; }
.bibp-order { list-style: none; padding: 0; margin: 0; }
.bibp-order-row { cursor: grab; }
.bibp-order-row.dragging { opacity: .45; }
.bibp-order-row.drop-target { border-color: var(--hn-primary, var(--gold)); }
.bibp-grip { color: var(--text-faint); letter-spacing: -2px; user-select: none; }
.bibp-order-num { font-weight: 700; color: var(--text-muted); min-width: 16px; text-align: center; }
.bibp-order-btns { display: flex; gap: 2px; }
@media (max-width: 760px) { .bibp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bibp-thumb { height: 130px; } .bibp-grip { display: none; } }
.bibp-pick .hn-btn, .bibp-draft .hn-btn { height: 36px; padding: 0 14px; gap: 6px; white-space: nowrap; flex-shrink: 0; }

/* Niedrige Bildschirme (z.B. Laptop mit Zoom): Abstaende in der eingeklappten Leiste verkleinern,
   damit das Zahnrad (Einstellungen) unten nicht abgeschnitten wird (03.11.2026). */
@media (min-width: 761px) and (max-height: 720px) {
  .app-shell .sidebar .nav-item { margin-bottom: 10px; height: 44px; }
  .app-shell .sidebar .nav-item.rub-settings { margin-bottom: 0; }
  .app-shell .sidebar { top: 68px; max-height: calc(100vh - 80px); }
}
@media (min-width: 761px) and (max-height: 560px) {
  .app-shell .sidebar { overflow-y: auto; }
}