/* ================================================================
   R.O.S.I.E. — Betriebsanleitungen
   Version 9.9 · Markenbild: Pflaume · Creme · Orange

   Grundhaltung: Diese Handbücher werden gelesen und gelernt — von
   Heimleitungen, von Verkaufspersonal, oft nebenbei am Bildschirm.
   Deshalb heller Cremegrund, ruhige Zeilenlänge, viel Luft, und
   Farbe nur dort, wo sie etwas sagt. Kapitel-Auftakte tragen ein
   vollflächiges Foto mit Pflaume-Verlauf, wie im Referenzdeck.
   Der Dunkelmodus bleibt vollständig erhalten (.dark am <body>).
   ================================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}

/* ── Markenfarben ──────────────────────────────────────────── */
:root{
  /* Markenkonstanten — in jedem Modus identisch */
  --brand-plum-900:#241640;
  --brand-plum-700:#3B2A63;
  --brand-plum-600:#4F3A82;
  --brand-cream:#FBF1E7;
  --brand-orange:#FF6A3D;
  --brand-amber:#FFC24A;

  /* HELL ist die Voreinstellung */
  --bg:#FAF3EA;
  --panel:#FFFFFF;
  --panel-soft:#FDF8F1;
  --panel-border:#E9DFD2;
  --panel-border-soft:#F2EAE0;

  --text:#241640;
  --text-secondary:#4C3F69;
  --muted:#7B6E94;

  --accent:#4F3A82;              /* strukturelle Akzente */
  --accent-strong:#2E1D52;
  --accent-dim:rgba(79,58,130,.08);
  --accent-line:rgba(79,58,130,.22);
  --accent-glow:rgba(79,58,130,.16);

  --warm:#FF6A3D;                /* Eyebrows, Aufzählungspunkte */
  --warm-ink:#C2410C;            /* Orange als Textfarbe */
  --warm-dim:rgba(255,106,61,.10);
  --warm-line:rgba(255,106,61,.30);

  --gold:#B07607;
  --gold-dim:rgba(255,194,74,.20);
  --gold-line:rgba(176,118,7,.30);

  --red:#A6231C;   --red-dim:rgba(166,35,28,.07);   --red-line:rgba(166,35,28,.24);
  --green:#0F6B4F; --green-dim:rgba(15,107,79,.08); --green-line:rgba(15,107,79,.24);

  --radius:12px;--radius-sm:8px;--radius-lg:20px;
  --shadow:0 1px 2px rgba(36,22,64,.05),0 4px 16px rgba(36,22,64,.06);
  --shadow-lg:0 2px 6px rgba(36,22,64,.06),0 16px 48px rgba(36,22,64,.10);

  --sidebar-width:284px;
  --content-max:760px;
  --topbar-h:66px;
}

/* ── Dunkelmodus ───────────────────────────────────────────── */
body.dark{
  --bg:#1A1030;
  --panel:#241640;
  --panel-soft:#2A1A4A;
  --panel-border:#3B2A63;
  --panel-border-soft:#31215A;

  --text:#FBF1E7;
  --text-secondary:#D2C7E6;
  --muted:#9E92BC;

  --accent:#BCA8EC;
  --accent-strong:#D6C8F6;
  --accent-dim:rgba(188,168,236,.12);
  --accent-line:rgba(188,168,236,.28);
  --accent-glow:rgba(188,168,236,.24);

  --warm:#FF8A5F;
  --warm-ink:#FFA783;
  --warm-dim:rgba(255,138,95,.12);
  --warm-line:rgba(255,138,95,.30);

  --gold:#FFC24A;
  --gold-dim:rgba(255,194,74,.12);
  --gold-line:rgba(255,194,74,.30);

  --red:#F5A19B;   --red-dim:rgba(245,161,155,.10);  --red-line:rgba(245,161,155,.26);
  --green:#79D6B4; --green-dim:rgba(121,214,180,.10);--green-line:rgba(121,214,180,.26);

  --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 16px 48px rgba(0,0,0,.55);
}
/* Rückwärtskompatibel: ältere Seiten setzen .light. Hell ist ohnehin
   die Voreinstellung — die Klasse darf folgenlos bleiben. */

/* ── Grundlage ─────────────────────────────────────────────── */
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.75;font-size:1rem;
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--warm);outline-offset:2px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Kopfleiste ────────────────────────────────────────────── */
.man-topbar{
  position:sticky;top:0;z-index:1000;height:var(--topbar-h);
  background:var(--panel);border-bottom:1px solid var(--panel-border);
  display:flex;align-items:center;gap:16px;padding:0 24px;
}
.man-topbar-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.man-topbar-logo img{height:34px;width:auto;display:block}
/* Spezifitaet beachten: `.man-topbar-logo img{display:block}` steht direkt
   darueber und ist spezifischer als eine blosse Klasse — ohne den img-Teil
   im Selektor gewinnt sie, und beide Logos stehen nebeneinander. */
.man-topbar-logo img.man-logo-dark{display:none}
body.dark .man-topbar-logo img.man-logo-light{display:none}
body.dark .man-topbar-logo img.man-logo-dark{display:block}
.man-topbar-title{flex:1;font-size:14px;font-weight:600;color:var(--text-secondary)}
.man-topbar-badge{
  padding:5px 13px;border-radius:999px;font-size:11px;font-weight:700;
  background:var(--accent-dim);color:var(--accent-strong);border:1px solid var(--accent-line);
  white-space:nowrap;letter-spacing:.01em;
}
body.dark .man-topbar-badge{color:var(--accent)}
.man-topbar-actions{display:flex;gap:8px;align-items:center}
.man-btn-icon{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--panel-border);
  background:var(--panel-soft);color:var(--text-secondary);display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:15px;transition:all .15s;
}
.man-btn-icon:hover{border-color:var(--warm-line);color:var(--warm-ink);background:var(--warm-dim)}

/* ── Suche ─────────────────────────────────────────────────── */
.man-search{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-soft);border:1px solid var(--panel-border);border-radius:10px;
  padding:7px 12px;min-width:220px;transition:border-color .15s,box-shadow .15s;
}
.man-search:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-glow)}
.man-search input{background:none;border:none;outline:none;color:var(--text);font-size:13px;width:100%;font-family:inherit}
.man-search-icon{color:var(--muted);font-size:13px;flex-shrink:0}
.man-search-hl{background:var(--gold-dim);border-radius:3px;padding:0 3px;box-shadow:inset 0 -2px 0 var(--brand-amber)}

/* ── Layout ────────────────────────────────────────────────── */
.man-layout{display:flex;flex:1;max-width:1280px;margin:0 auto;width:100%;padding:0 24px}

/* ── Inhaltsverzeichnis ────────────────────────────────────── */
.man-sidebar{
  width:var(--sidebar-width);flex-shrink:0;
  position:sticky;top:calc(var(--topbar-h) + 24px);
  height:calc(100vh - var(--topbar-h) - 48px);
  overflow-y:auto;padding:28px 0;margin-right:40px;scrollbar-width:thin;
}
.man-toc-title{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:var(--warm-ink);padding:0 14px 10px;
}
.man-toc-title + .man-toc-title,.man-toc-link + .man-toc-title{padding-top:24px}
.man-toc-link{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:9px;
  font-size:13.5px;color:var(--text-secondary);text-decoration:none;
  transition:all .13s;cursor:pointer;border:none;background:none;
  width:100%;text-align:left;line-height:1.45;font-family:inherit;
}
.man-toc-link:hover{background:var(--accent-dim);color:var(--accent-strong)}
body.dark .man-toc-link:hover{color:var(--accent)}
.man-toc-link.active{background:var(--accent-dim);color:var(--accent-strong);font-weight:700;box-shadow:inset 3px 0 0 var(--warm)}
body.dark .man-toc-link.active{color:var(--accent)}
.man-toc-link-icon{font-size:15px;flex-shrink:0;width:22px;text-align:center}
.man-toc-sub{padding-left:26px}
.man-toc-sub .man-toc-link{font-size:12.5px;padding:6px 14px}

/* ── Inhalt ────────────────────────────────────────────────── */
.man-content{flex:1;min-width:0;padding:40px 0 96px;max-width:var(--content-max)}

/* ── Kapitel-Auftakt mit Foto ──────────────────────────────── */
.man-chapter-hero{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  margin-bottom:44px;min-height:300px;
  display:flex;align-items:flex-end;padding:38px 42px;
  background:var(--brand-plum-900);
}
.man-chapter-hero > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.man-chapter-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,
    rgba(36,22,64,.94) 0%,
    rgba(46,29,82,.86) 42%,
    rgba(79,58,130,.66) 100%);
}
.man-chapter-hero-inner{position:relative;z-index:1;max-width:34em}
.man-chapter-eyebrow{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  color:var(--brand-amber);margin-bottom:14px;
}
.man-chapter-title{
  font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1.18;
  color:var(--brand-cream);text-wrap:balance;
}
.man-chapter-lead{
  font-size:16px;line-height:1.7;color:rgba(251,241,231,.86);margin-top:14px;
}

/* ── Abschnitt ─────────────────────────────────────────────── */
.man-section{margin-bottom:80px;scroll-margin-top:calc(var(--topbar-h) + 24px)}
.man-section-header{
  display:flex;align-items:center;gap:18px;margin-bottom:28px;
  padding-bottom:20px;border-bottom:2px solid var(--panel-border);
}
.man-section-icon{
  font-size:29px;width:58px;height:58px;display:flex;align-items:center;
  justify-content:center;background:var(--accent-dim);border-radius:16px;
  border:1px solid var(--accent-line);flex-shrink:0;
}
.man-section-title{font-size:29px;font-weight:800;color:var(--text);letter-spacing:-.022em;line-height:1.25;margin:0;text-wrap:balance}
.man-section-subtitle{font-size:13.5px;color:var(--muted);margin-top:6px}

/* ── Überschriften ─────────────────────────────────────────── */
.man-h2,.man-section h2{
  font-size:21px;font-weight:700;color:var(--text);letter-spacing:-.012em;
  line-height:1.35;margin:48px 0 16px;display:flex;align-items:baseline;gap:12px;text-wrap:balance;
}
.man-h2::before,.man-section h2::before{
  content:'';display:block;width:5px;height:.82em;background:var(--warm);
  border-radius:3px;flex-shrink:0;transform:translateY(.06em);
}
.man-h3,.man-section h3{
  font-size:16.5px;font-weight:700;color:var(--accent-strong);
  margin:34px 0 12px;line-height:1.4;letter-spacing:-.005em;
}
body.dark .man-h3,body.dark .man-section h3{color:var(--accent)}
.man-section h2:first-child,.man-section h3:first-child{margin-top:0}

/* Eyebrow über einer Überschrift, wie im Deck */
.man-eyebrow{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  color:var(--warm-ink);margin:44px 0 -6px;
}
.man-eyebrow + .man-h2,.man-eyebrow + h2{margin-top:10px}

/* ── Fliesstext ────────────────────────────────────────────── */
.man-p,.man-section p{font-size:15.5px;color:var(--text-secondary);line-height:1.8;margin-bottom:18px}
.man-section p strong,.man-p strong{color:var(--text);font-weight:650}
.man-section a{color:var(--warm-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.man-section a:hover{color:var(--warm)}

/* ── Listen ────────────────────────────────────────────────── */
.man-list,.man-section ul,.man-section ol{
  margin:0 0 20px;padding-left:0;list-style:none;
  font-size:15.5px;color:var(--text-secondary);line-height:1.8;
}
.man-section ol{counter-reset:manol}
.man-list li,.man-section ul li,.man-section ol li{position:relative;padding-left:26px;margin-bottom:10px}
.man-list li::before,.man-section ul li::before{
  content:'';position:absolute;left:7px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--warm);
}
.man-section ol li{counter-increment:manol}
.man-section ol li::before{
  content:counter(manol) '.';position:absolute;left:0;top:0;
  color:var(--warm-ink);font-weight:700;font-size:14px;
}
.man-list li strong,.man-section li strong{color:var(--text);font-weight:650}

/* ── Kurztext / Überblick ──────────────────────────────────── */
.hilfe-kurztext{
  background:linear-gradient(135deg,var(--accent-dim) 0%,rgba(79,58,130,.02) 100%);
  border:1px solid var(--accent-line);border-left:5px solid var(--warm);
  border-radius:var(--radius);padding:22px 26px;margin:0 0 40px;
}
.hilfe-kurztext p{font-size:17px;line-height:1.72;color:var(--text);margin:0}
.hilfe-kurztext p + p{margin-top:12px}
.hilfe-kurztext strong{font-weight:700;color:var(--accent-strong)}
body.dark .hilfe-kurztext strong{color:var(--accent-strong)}

/* ── Karten ────────────────────────────────────────────────── */
.man-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);margin-bottom:22px;overflow:hidden;box-shadow:var(--shadow)}
.man-card-head{display:flex;align-items:center;gap:12px;padding:15px 20px;background:var(--panel-soft);border-bottom:1px solid var(--panel-border-soft)}
.man-card-title{font-size:14.5px;font-weight:700;color:var(--text)}
.man-card-body{padding:20px}

/* ── Hinweiskästen ─────────────────────────────────────────
   Fliesstext bleibt in der normalen Textfarbe; farbig sind nur
   Symbol, Titel und die linke Kante. Farbiger Fliesstext auf
   getöntem Grund liest sich schlecht. */
.man-box{
  border-radius:var(--radius);padding:18px 22px;margin:26px 0;
  display:flex;gap:16px;align-items:flex-start;
  font-size:15px;line-height:1.75;color:var(--text-secondary);
  border:1px solid var(--panel-border);border-left-width:5px;
  background:var(--panel-soft);
}
.man-box-icon{font-size:20px;flex-shrink:0;margin-top:1px;line-height:1.4}
.man-box-text{flex:1;min-width:0}
.man-box-text strong{display:block;font-weight:700;margin-bottom:6px;font-size:15.5px;color:var(--text)}
.man-box-text strong:not(:first-child){display:inline;margin:0;font-size:inherit}
.man-box p{margin:0 0 10px;font-size:inherit;color:inherit}
.man-box p:last-child{margin-bottom:0}

.box-info   {background:var(--accent-dim);border-color:var(--accent-line);border-left-color:var(--accent)}
.box-tip    {background:var(--warm-dim);  border-color:var(--warm-line);  border-left-color:var(--warm)}
.box-warn   {background:var(--gold-dim);  border-color:var(--gold-line);  border-left-color:var(--brand-amber)}
.box-danger {background:var(--red-dim);   border-color:var(--red-line);   border-left-color:var(--red)}
.box-success{background:var(--green-dim); border-color:var(--green-line); border-left-color:var(--green)}
.box-pro    {background:var(--accent-dim);border-color:var(--accent-line);border-left-color:var(--accent)}

.box-info    .man-box-text strong{color:var(--accent-strong)}
.box-tip     .man-box-text strong{color:var(--warm-ink)}
.box-warn    .man-box-text strong{color:var(--gold)}
.box-danger  .man-box-text strong{color:var(--red)}
.box-success .man-box-text strong{color:var(--green)}
.box-pro     .man-box-text strong{color:var(--accent-strong)}
body.dark .box-info .man-box-text strong,
body.dark .box-pro  .man-box-text strong{color:var(--accent)}

/* ── Schrittfolgen ─────────────────────────────────────────── */
.man-steps{counter-reset:step;display:flex;flex-direction:column;gap:14px;margin:26px 0}
.man-step{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:var(--radius);padding:18px 22px;position:relative;
  transition:border-color .18s,box-shadow .18s;box-shadow:var(--shadow);
}
.man-step:hover{border-color:var(--warm-line);box-shadow:var(--shadow-lg)}
.man-step-num{
  counter-increment:step;
  width:32px;height:32px;border-radius:50%;
  background:var(--warm);color:#FFF8F4;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;
}
/* Leere Nummern zählt die Liste selbst — gesetzte bleiben stehen. */
.man-step-num:empty::before{content:counter(step)}
.man-step-body{flex:1;min-width:0}
.man-step-title{font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.45}
.man-step-desc{font-size:15px;color:var(--text-secondary);line-height:1.75}
.man-step-desc p:last-child{margin-bottom:0}

/* ── Tabellen ──────────────────────────────────────────────── */
.man-table-wrap{overflow-x:auto;margin:26px 0;border-radius:var(--radius);border:1px solid var(--panel-border)}
.man-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;
  margin:26px 0;background:var(--panel);
  border:1px solid var(--panel-border);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
}
.man-table-wrap .man-table{margin:0;border:none;border-radius:0;box-shadow:none}
.man-table th{
  background:var(--accent-dim);color:var(--accent-strong);
  padding:14px 18px;text-align:left;font-weight:700;font-size:13px;
  letter-spacing:.02em;border-bottom:2px solid var(--accent-line);vertical-align:bottom;
}
body.dark .man-table th{color:var(--accent)}
.man-table td{padding:14px 18px;border-bottom:1px solid var(--panel-border-soft);vertical-align:top;color:var(--text-secondary);line-height:1.7}
.man-table td strong{color:var(--text);font-weight:650}
.man-table tr:last-child td{border-bottom:none}
.man-table tbody tr:nth-child(even) td{background:var(--panel-soft)}
.man-table tbody tr:hover td{background:var(--accent-dim)}

/* ── Code ──────────────────────────────────────────────────── */
code{
  font-family:'SF Mono',Consolas,Monaco,'Courier New',monospace;
  background:var(--accent-dim);color:var(--accent-strong);padding:2px 7px;
  border-radius:5px;font-size:.88em;border:1px solid var(--accent-line);word-break:break-word;
}
body.dark code{color:var(--accent)}
pre{
  background:var(--brand-plum-900);color:#EFE7FA;border-radius:var(--radius);
  padding:20px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;
  line-height:1.7;overflow-x:auto;margin:22px 0;border:1px solid var(--brand-plum-700);
}
pre code{background:none;border:none;color:inherit;padding:0}

/* ── Funktionsraster ───────────────────────────────────────── */
.man-feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:26px 0}
.man-feat{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:20px;transition:all .2s;box-shadow:var(--shadow)}
.man-feat:hover{border-color:var(--warm-line);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.man-feat-icon{font-size:26px;margin-bottom:10px}
.man-feat-title{font-size:12.5px;font-weight:800;color:var(--warm-ink);margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase}
.man-feat-desc{font-size:14px;color:var(--text-secondary);line-height:1.65}

/* ── Abzeichen ─────────────────────────────────────────────── */
.man-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:700}
.badge-teal,.badge-plum{background:var(--accent-dim);color:var(--accent-strong);border:1px solid var(--accent-line)}
body.dark .badge-teal,body.dark .badge-plum{color:var(--accent)}
.badge-blue{background:var(--accent-dim);color:var(--accent-strong);border:1px solid var(--accent-line)}
.badge-amber{background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold-line)}
.badge-red{background:var(--red-dim);color:var(--red);border:1px solid var(--red-line)}
.badge-green{background:var(--green-dim);color:var(--green);border:1px solid var(--green-line)}
.badge-purple{background:var(--accent-dim);color:var(--accent-strong);border:1px solid var(--accent-line)}
.badge-orange{background:var(--warm-dim);color:var(--warm-ink);border:1px solid var(--warm-line)}

/* ── Tastenkürzel ──────────────────────────────────────────── */
.man-keys{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
kbd{display:inline-block;padding:3px 9px;border-radius:6px;background:var(--panel);border:1px solid var(--panel-border);border-bottom:2px solid var(--panel-border);font-family:monospace;font-size:12.5px;color:var(--text)}

/* ── Trenner ───────────────────────────────────────────────── */
.man-divider{border:none;border-top:1px solid var(--panel-border);margin:48px 0}

/* ── Auftakt ohne Foto ─────────────────────────────────────── */
.man-hero{
  background:linear-gradient(135deg,var(--brand-plum-900) 0%,var(--brand-plum-600) 100%);
  border-radius:var(--radius-lg);padding:44px;margin-bottom:56px;position:relative;overflow:hidden;
}
.man-hero::before{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,194,74,.10);pointer-events:none}
.man-hero-eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--brand-amber);font-weight:800;margin-bottom:14px;position:relative}
.man-hero-title{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:16px;color:var(--brand-cream);position:relative;text-wrap:balance}
.man-hero-desc{font-size:17px;color:rgba(251,241,231,.86);line-height:1.75;max-width:620px;margin-bottom:26px;position:relative}
.man-hero-meta{display:flex;flex-wrap:wrap;gap:10px;position:relative}
.man-hero .man-badge{background:rgba(251,241,231,.14);color:var(--brand-cream);border:1px solid rgba(251,241,231,.28)}

/* ── Schnelleinstieg ───────────────────────────────────────── */
.man-quickstart{background:var(--panel);border:1px solid var(--panel-border);border-top:4px solid var(--warm);border-radius:var(--radius-lg);padding:26px;margin-bottom:48px;box-shadow:var(--shadow)}
.man-quickstart-title{font-size:12.5px;font-weight:800;color:var(--warm-ink);margin-bottom:16px;display:flex;align-items:center;gap:9px;letter-spacing:.08em;text-transform:uppercase}
.man-quickstart-list{display:flex;flex-wrap:wrap;gap:10px}
.man-quickstart-item{display:flex;align-items:center;gap:7px;padding:9px 15px;background:var(--panel-soft);border:1px solid var(--panel-border);border-radius:9px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .15s;text-decoration:none}
.man-quickstart-item:hover{border-color:var(--warm-line);color:var(--warm-ink);background:var(--warm-dim)}

/* ── FAQ (ältere Handbücher, JS-gesteuert) ─────────────────── */
.man-faq{margin:26px 0}
.man-faq-item{border:1px solid var(--panel-border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--panel)}
.man-faq-q{padding:16px 20px;font-weight:700;font-size:15px;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--panel);transition:background .15s}
.man-faq-q:hover{background:var(--accent-dim)}
.man-faq-q.open{color:var(--accent-strong);background:var(--accent-dim)}
body.dark .man-faq-q.open{color:var(--accent)}
.man-faq-a{padding:0 20px 18px;font-size:15px;color:var(--text-secondary);line-height:1.75;display:none}
.man-faq-a.open{display:block}
.man-faq-arrow{transition:transform .2s;font-size:11px;color:var(--muted)}
.man-faq-q.open .man-faq-arrow{transform:rotate(90deg)}

/* ── FAQ (Hilfe-Anker, natives <details>) ──────────────────── */
.hilfe-faq{margin:32px 0 0;display:flex;flex-direction:column;gap:10px}
.hilfe-faq details{border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--panel);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.hilfe-faq details[open]{border-color:var(--warm-line);box-shadow:var(--shadow)}
.hilfe-faq summary{
  padding:16px 20px 16px 46px;font-weight:650;font-size:15.5px;color:var(--text);
  cursor:pointer;list-style:none;position:relative;line-height:1.5;
  transition:background .15s,color .15s;
}
.hilfe-faq summary::-webkit-details-marker{display:none}
.hilfe-faq summary::before{
  content:'';position:absolute;left:20px;top:1.42em;
  width:8px;height:8px;border-right:2px solid var(--warm);border-bottom:2px solid var(--warm);
  transform:translateY(-50%) rotate(-45deg);transition:transform .2s;
}
.hilfe-faq details[open] summary::before{transform:translateY(-50%) rotate(45deg)}
.hilfe-faq summary:hover{background:var(--warm-dim);color:var(--warm-ink)}
.hilfe-faq details > p,.hilfe-faq summary > p{
  margin:0;padding:0 20px 18px 46px;font-size:15px;color:var(--text-secondary);line-height:1.78;
}
.hilfe-faq summary > p{cursor:auto;font-weight:400;padding-top:10px}

/* ── Glossar ───────────────────────────────────────────────── */
.man-glossary{display:flex;flex-direction:column;gap:0}
.man-gloss-item{display:flex;gap:24px;padding:16px 0;border-bottom:1px solid var(--panel-border-soft)}
.man-gloss-item:last-child{border-bottom:none}
.man-gloss-term{font-size:15px;font-weight:700;color:var(--accent-strong);min-width:190px;flex-shrink:0}
body.dark .man-gloss-term{color:var(--accent)}
.man-gloss-def{font-size:15px;color:var(--text-secondary);line-height:1.7}

/* ── Drucken ───────────────────────────────────────────────── */
@page{size:A4;margin:16mm}
@media print{
  /* Papierfarben gelten auch bei gespeichertem Dunkelmodus am body. */
  body,body.dark{
    --bg:#fff;--panel:#fff;--panel-soft:#fff;
    --panel-border:#ccc;--panel-border-soft:#ddd;
    --text:#241640;--text-secondary:#333;--muted:#555;
    --accent:#4F3A82;--accent-strong:#2E1D52;
    --accent-dim:rgba(79,58,130,.08);--accent-line:rgba(79,58,130,.22);--accent-glow:rgba(79,58,130,.16);
    --warm:#FF6A3D;--warm-ink:#C2410C;--warm-dim:rgba(255,106,61,.10);--warm-line:rgba(255,106,61,.30);
    --gold:#B07607;--gold-dim:rgba(255,194,74,.20);--gold-line:rgba(176,118,7,.30);
    --red:#A6231C;--red-dim:rgba(166,35,28,.07);--red-line:rgba(166,35,28,.24);
    --green:#0F6B4F;--green-dim:rgba(15,107,79,.08);--green-line:rgba(15,107,79,.24);
    --shadow:none;--shadow-lg:none;
  }
  html{font-size:10.5pt}
  .man-topbar,.man-sidebar,.man-btn-icon,.man-quickstart,.man-search{display:none!important}
  .man-layout{display:block;max-width:100%;padding:0}
  .man-content{max-width:100%;padding:0}
  body{display:block;min-height:0;color:#000;background:#fff}
  .man-section{page-break-inside:auto;break-inside:auto;margin-bottom:24px}
  .man-section-header{border-bottom:1.5pt solid #4F3A82}
  .man-section-header,.man-h2,.man-section h2{page-break-after:avoid;break-after:avoid-page}
  .man-step,.man-box,.man-gloss-item{page-break-inside:avoid;break-inside:avoid-page}
  .man-glossary{display:block}
  .man-gloss-item{padding:12px 0}
  .man-table{page-break-inside:auto;break-inside:auto}
  .man-table tr{page-break-inside:avoid;break-inside:avoid-page}
  .man-table thead{display:table-header-group}
  .man-content p{orphans:3;widows:3}
  .man-chapter-hero{display:block;min-height:0;padding:0;background:none;border-bottom:2pt solid #4F3A82;border-radius:0;margin-bottom:24px;page-break-inside:avoid;break-inside:avoid-page}
  .man-chapter-hero > img,.man-chapter-hero::after{display:none}
  .man-chapter-title{color:#241640;font-size:22pt}
  .man-chapter-eyebrow{color:#C2410C}
  .man-chapter-lead{color:#333}
  .man-hero{background:none;border:1.5pt solid #4F3A82}
  .man-hero-eyebrow{color:#C2410C}
  .man-hero-title,.man-hero-desc{color:#241640}
  .man-hero .man-badge,body.dark .man-hero .man-badge{color:#241640;background:#fff;border-color:#4F3A82}
  body.dark .man-h3,body.dark .man-section h3,body.dark code,
  body.dark .box-info .man-box-text strong,body.dark .box-pro .man-box-text strong,
  body.dark .man-table th,body.dark .man-gloss-term,body.dark .man-faq-q.open{color:var(--accent-strong)}
  body.dark .badge-teal,body.dark .badge-plum{color:var(--accent-strong)}
  .man-box{border:1pt solid #999;background:none;color:#222}
  .man-step,.man-card,.man-feat,.hilfe-faq details{box-shadow:none;border:1pt solid #ccc}
  .man-feat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .man-card,.man-feat{min-width:0;overflow-wrap:anywhere;hyphens:auto;page-break-inside:avoid;break-inside:avoid-page}
  .man-section > p:has(+ .man-feat-grid){page-break-after:avoid;break-after:avoid-page}
  .man-feat{padding:14px}
  .man-content > hr.man-divider:last-of-type{margin:16px 0;page-break-after:avoid;break-after:avoid-page}
  .man-content > .man-section:has(+ hr.man-divider:last-of-type),
  .man-content > .man-section:has(+ hr.man-divider:last-of-type) .man-gloss-item:last-child{page-break-after:avoid;break-after:avoid-page}
  .man-content > div:last-child{display:inline-block;width:100%;padding:8px 0!important;page-break-inside:avoid;break-inside:avoid-page}
  pre{color:#241640;background:#fff;border-color:#999;white-space:pre-wrap;overflow-wrap:anywhere}
  .hilfe-faq details,.man-faq-item{page-break-inside:avoid;break-inside:avoid-page}
  .hilfe-faq details > p,.man-faq-a{display:block!important}
  a{color:#000;text-decoration:none}
}

/* ── Bildschirmgrössen ─────────────────────────────────────── */
@media(max-width:1100px){
  :root{--sidebar-width:244px}
  .man-sidebar{margin-right:28px}
}
@media(max-width:900px){
  :root{--sidebar-width:0}
  .man-sidebar{display:none}
  .man-layout{padding:0 20px}
  .man-content{padding:28px 0 64px}
}
@media(max-width:600px){
  html{font-size:15.5px}
  .man-topbar{padding:0 14px;gap:10px}
  .man-topbar-logo img{height:28px}
  .man-search{min-width:0;flex:1}
  .man-topbar-title,.man-topbar-badge{display:none}
  .man-layout{padding:0 16px}
  .man-chapter-hero{min-height:220px;padding:26px 22px}
  .man-chapter-title{font-size:25px}
  .man-hero{padding:26px}
  .man-hero-title{font-size:27px}
  .man-section-title{font-size:23px}
  .man-section-header{gap:14px;margin-bottom:22px}
  .man-section-icon{width:46px;height:46px;font-size:24px}
  .man-h2,.man-section h2{font-size:19px;margin-top:38px}
  .hilfe-kurztext{padding:18px 20px}
  .hilfe-kurztext p{font-size:16px}
  .man-box{padding:16px 18px;gap:12px}
  .man-step{padding:16px 18px;gap:14px}
  .man-table th,.man-table td{padding:11px 13px}
  .man-feat-grid{grid-template-columns:1fr}
  .hilfe-faq summary{padding-left:40px}
  .hilfe-faq details > p,.hilfe-faq summary > p{padding-left:40px}
}

/* ================================================================
   NACHTRAG 2026-09-05 · Foto-Auftakte und Token-Bereinigung
   ----------------------------------------------------------------
   Grund: Beim Wechsel auf das Markenbild fielen vier Farbtoken weg
   (--teal, --amber, --blue, --purple), die im Markup noch als
   style-Attribut standen. Links verloren dadurch ihre Farbe, die
   Rollen-Abzeichen ihre Kennzeichnung, und vier Handbuch-Auftakte
   überschrieben den Pflaume-Verlauf mit einem hellen Rest-Verlauf —
   cremefarbene Schrift auf cremefarbenem Grund.
   Behebung: keine Farbe mehr im style-Attribut. Alles, was Farbe
   trägt, hat hier eine Klasse. Damit schlägt jede spätere Änderung
   am Design-System auch wirklich bis ins Handbuch durch.
   ================================================================ */

/* ── Verweise im Fliesstext ────────────────────────────────── */
.man-link{
  color:var(--accent);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:var(--accent-line);transition:color .15s,text-decoration-color .15s;
}
.man-link:hover{color:var(--warm-ink);text-decoration-color:var(--warm-line)}
body.dark .man-link{color:var(--brand-amber);text-decoration-color:rgba(255,194,74,.4)}
body.dark .man-link:hover{color:var(--brand-orange)}

/* ── Rollen-Abzeichen in der Kopfzeile ─────────────────────── */
.man-topbar-badge.badge-role-admin{
  background:var(--accent-dim);color:var(--accent-strong);border-color:var(--accent-line);
}
.man-topbar-badge.badge-role-it{
  background:rgba(76,63,105,.08);color:var(--text-secondary);border-color:rgba(76,63,105,.22);
}
.man-topbar-badge.badge-role-buyer{
  background:var(--gold-dim);color:var(--gold);border-color:var(--gold-line);
}
.man-topbar-badge.badge-role-internal{
  background:var(--red-dim);color:var(--red);border-color:var(--red-line);
}
body.dark .man-topbar-badge.badge-role-admin{color:var(--brand-amber)}
body.dark .man-topbar-badge.badge-role-it{color:var(--text-secondary)}
body.dark .man-topbar-badge.badge-role-buyer{color:var(--brand-amber)}
body.dark .man-topbar-badge.badge-role-internal{color:#F0857E}

/* ── Auftakt MIT Foto ──────────────────────────────────────────
   Gleiche Bauart wie .man-chapter-hero: Foto vollflächig, darüber
   ein Pflaume-Verlauf, damit die cremefarbene Schrift auf jedem
   Bild lesbar bleibt. Der Verlauf ist links dicht und rechts offen,
   sodass das Motiv sichtbar bleibt, wo kein Text steht. */
.man-hero--photo{background:var(--brand-plum-900)}
.man-hero--photo > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.man-hero--photo::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,
    rgba(36,22,64,.95) 0%,
    rgba(46,29,82,.88) 45%,
    rgba(79,58,130,.62) 100%);
}
.man-hero--photo::before{z-index:1}
.man-hero--photo > *:not(img){position:relative;z-index:1}

/* ── Papier ────────────────────────────────────────────────── */
@media print{
  .man-hero--photo > img,
  .man-hero--photo::after{display:none}
  .man-hero--photo{background:none}
  .man-link,.man-section a,body.dark .man-link,body.dark .man-link:hover,body.dark .man-section a{color:#4F3A82;text-decoration:underline;text-decoration-color:currentColor}
  .man-topbar-badge{display:none}
}

/* ── Schmale Bildschirme ───────────────────────────────────── */
@media (max-width:820px){
  .man-hero--photo::after{
    background:linear-gradient(180deg,
      rgba(36,22,64,.90) 0%,
      rgba(46,29,82,.92) 60%,
      rgba(36,22,64,.94) 100%);
  }
}