/* ============================================================
   Paginor Hilfe – docs.paginor.de
   Gestaltung nach DESIGNRICHTLINIE.md (Relaunch-Entwurf paginor.de):
   Gold #d09038 und Braun #705040 in beiden Modi, Neutraltöne kippen.
   ============================================================ */
:root {
  --gold: #d09038; --gold-licht: #e3a95a; --gold-tief: #8e6530; --braun: #705040;
  --gruen: #4a8b5e; --rot: #c0392b;
  --bg: #f8f8f8; --bg-soft: #f0f0e8; --surface: #ffffff; --surface-2: #f0e8e0;
  --line: rgba(40,32,24,.13); --line-strong: rgba(40,32,24,.22);
  --text: #1b1610; --text-2: #4a423a; --muted: #6f665b; --link: var(--gold-tief);
  --shadow-sm: 0 4px 14px rgba(40,32,24,.07); --shadow: 0 18px 48px rgba(40,32,24,.12);
  --radius-sm: 14px; --radius: 22px; --radius-lg: 32px;
  --kopf-h: 62px; --seite: 272px; --toc: 220px;
  --ease: cubic-bezier(.2,.7,.2,1); --t-fast: .18s var(--ease); --t-med: .3s var(--ease);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --bg: #101008; --bg-soft: #181810; --surface: #201a12; --surface-2: #282018;
    --line: rgba(255,246,232,.10); --line-strong: rgba(255,246,232,.18);
    --text: #f6f1e8; --text-2: #cfc6b8; --muted: #9a9183; --link: var(--gold-licht);
    --shadow-sm: 0 6px 16px rgba(0,0,0,.35); --shadow: 0 18px 52px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-thema="dunkel"] {
  --bg: #101008; --bg-soft: #181810; --surface: #201a12; --surface-2: #282018;
  --line: rgba(255,246,232,.10); --line-strong: rgba(255,246,232,.18);
  --text: #f6f1e8; --text-2: #cfc6b8; --muted: #9a9183; --link: var(--gold-licht);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.35); --shadow: 0 18px 52px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.028em; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0 0 14px; }
a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; background: var(--gold); color: #1b1610; padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; z-index: 100; }
.skip-link:focus { left: 0; top: 0; }

/* ---------- Kopfzeile ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line); }
.topbar-inner { height: var(--kopf-h); display: flex; align-items: center; gap: 12px; padding: 0 16px; max-width: 1480px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 650; white-space: nowrap; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand em { font-style: normal; color: var(--muted); font-weight: 550; }
.burger, .icon-knopf, .sprach-knopf { appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); border-radius: 12px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; font: inherit; font-size: .9rem; transition: border-color var(--t-fast); }
.burger, .icon-knopf { width: 38px; padding: 0; }
.burger svg, .icon-knopf svg { width: 20px; height: 20px; }
.burger:hover, .icon-knopf:hover, .sprach-knopf:hover { border-color: var(--line-strong); }
.burger { display: inline-flex; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ti-dunkel { display: none; }
:root[data-thema="dunkel"] .ti-hell { display: none; } :root[data-thema="dunkel"] .ti-dunkel { display: block; }
@media (prefers-color-scheme: dark) { :root[data-thema="system"] .ti-hell { display: none; } :root[data-thema="system"] .ti-dunkel { display: block; } }

/* Suche */
.suche { position: relative; flex: 1; max-width: 520px; margin-left: 8px; }
.suche > svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.suche input { width: 100%; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: .95rem; padding: 0 12px 0 38px; }
.suche input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.suchergebnisse { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; max-height: 70vh; overflow: auto; }
.suchergebnisse a, .trefferliste a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); }
.suchergebnisse a:hover, .suchergebnisse a[aria-selected="true"], .trefferliste a:hover { background: var(--surface-2); }
.suchergebnisse small, .trefferliste small { display: block; color: var(--muted); font-size: .8rem; }
.suchergebnisse .leer { padding: 10px 12px; color: var(--muted); font-size: .92rem; margin: 0; }
mark { background: color-mix(in srgb, var(--gold) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Sprachwahl */
.sprachwahl { position: relative; }
.sprach-knopf { padding: 0 10px; }
.flagge { font-size: 1.05em; line-height: 1; }
.pfeil { width: 9px; height: 6px; opacity: .65; transition: transform var(--t-fast); }
.sprach-knopf[aria-expanded="true"] .pfeil { transform: rotate(180deg); }
.sprach-liste { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; min-width: 170px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.sprach-liste[hidden] { display: none; }
.sprach-liste a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--text); font-size: .95rem; }
.sprach-liste a:hover { background: var(--surface-2); }
.sprach-liste a[aria-current="true"] { background: var(--surface-2); font-weight: 650; }

/* ---------- Gerüst ---------- */
.rahmen { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1480px; margin: 0 auto; }
.seitenleiste { position: fixed; inset: var(--kopf-h) auto 0 0; width: min(86vw, var(--seite)); background: var(--bg);
  border-right: 1px solid var(--line); padding: 18px 14px 40px; overflow-y: auto; transform: translateX(-102%);
  transition: transform var(--t-med); z-index: 40; }
.seitenleiste.offen { transform: none; box-shadow: var(--shadow); }
.seitenleiste ul { list-style: none; margin: 0 0 10px; padding: 0; }
.seitenleiste a { display: block; padding: 7px 12px; border-radius: 10px; text-decoration: none; color: var(--text-2); font-size: .95rem; }
.seitenleiste a:hover { background: var(--surface-2); color: var(--text); }
.seitenleiste a.aktiv { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--text); font-weight: 650; }
.sl-start { font-weight: 650; color: var(--text) !important; margin-bottom: 8px; }
.sl-gruppe { margin: 14px 12px 6px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.inhalt { padding: 28px 20px 70px; min-width: 0; }
.toc { display: none; }
@media (min-width: 1000px) {
  .burger { display: none; }
  .rahmen { grid-template-columns: var(--seite) minmax(0, 1fr); }
  .seitenleiste { position: sticky; top: var(--kopf-h); height: calc(100vh - var(--kopf-h)); transform: none; width: auto; z-index: 1; }
  .inhalt { padding: 40px 48px 90px; }
}
@media (min-width: 1300px) {
  .rahmen { grid-template-columns: var(--seite) minmax(0, 1fr) var(--toc); }
  .toc { display: block; position: sticky; top: var(--kopf-h); height: calc(100vh - var(--kopf-h)); overflow-y: auto; padding: 40px 18px 40px 0; }
  .toc p { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; margin-bottom: 8px; }
  .toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
  .toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted);
    text-decoration: none; font-size: .88rem; line-height: 1.35; }
  .toc a:hover { color: var(--text); }
  .toc a.aktiv { color: var(--text); border-left-color: var(--gold); }
}

/* ---------- Inhalt ---------- */
.inhalt > * { max-width: 920px; }
.eyebrow { color: var(--gold-tief); font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
:root[data-thema="dunkel"] .eyebrow { color: var(--gold-licht); }
@media (prefers-color-scheme: dark) { :root[data-thema="system"] .eyebrow { color: var(--gold-licht); } }
.inhalt h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 14px; }
.lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--text-2); max-width: 62ch; }
.abschnitt { padding-top: 34px; margin-top: 30px; border-top: 1px solid var(--line); }
.abschnitt h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: 14px; position: relative; }
.anker { position: absolute; left: -30px; top: .15em; width: 22px; height: 22px; opacity: 0; color: var(--muted); transition: opacity var(--t-fast); }
.anker svg { width: 18px; height: 18px; }
.abschnitt h2:hover .anker, .anker:focus { opacity: 1; }
.abschnitt-text { color: var(--text); max-width: 68ch; }
.abschnitt-text ul, .abschnitt-text ol { padding-left: 22px; margin: 0 0 16px; }
.abschnitt-text li { margin-bottom: 7px; }
ol.schritte { list-style: none; counter-reset: s; padding-left: 0; }
ol.schritte li { counter-increment: s; position: relative; padding-left: 40px; min-height: 28px; }
ol.schritte li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: #1b1610; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.abschnitt.ziel { animation: ziel 2.2s var(--ease); }
@keyframes ziel { 0%, 40% { box-shadow: -14px 0 0 -10px var(--gold); } 100% { box-shadow: none; } }
.tabelle { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); font-weight: 650; }
tr:last-child td { border-bottom: 0; }
.kasten { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); margin: 0 0 16px;
  border: 1px solid var(--line); background: var(--surface); }
.kasten svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.kasten strong { margin-right: 4px; }
.k-tip { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.k-tip svg { color: var(--gold); }
.k-note { background: color-mix(in srgb, var(--braun) 9%, var(--surface)); }
.k-note svg { color: var(--braun); }
:root[data-thema="dunkel"] .k-note svg { color: var(--gold-licht); }
@media (prefers-color-scheme: dark) { :root[data-thema="system"] .k-note svg { color: var(--gold-licht); } }
.k-warn { background: color-mix(in srgb, var(--rot) 10%, var(--surface)); border-color: color-mix(in srgb, var(--rot) 35%, transparent); }
.k-warn svg { color: var(--rot); }

/* ---------- Bilder ---------- */
.shots { margin: 22px 0 6px; }
.shot-set { display: flex; flex-wrap: wrap; gap: 26px 22px; align-items: flex-end; }
.shot-set[hidden] { display: none; }
.shot { margin: 0; }
.shot img { filter: drop-shadow(0 18px 30px rgba(40,32,24,.20)); }
.f-iphone, .f-duo-zu { width: min(250px, 44vw); }
.f-ipad, .f-duo-auf { width: min(640px, 100%); }
.f-web { width: 100%; }
.f-web img { border-radius: 10px; filter: drop-shadow(0 18px 36px rgba(40,32,24,.18)); }
.shot figcaption { margin-top: 10px; color: var(--muted); font-size: .88rem; line-height: 1.4; text-align: center; }
.bild-dunkel { display: none; }
:root[data-thema="dunkel"] .bild-hell { display: none; } :root[data-thema="dunkel"] .bild-dunkel { display: block; }
@media (prefers-color-scheme: dark) { :root[data-thema="system"] .bild-hell { display: none; } :root[data-thema="system"] .bild-dunkel { display: block; } }
.geraete-schalter { display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin: 6px 0 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.geraete-schalter span { font-size: .8rem; color: var(--muted); padding: 0 8px 0 10px; }
.geraete-schalter button { appearance: none; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: .88rem;
  padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.geraete-schalter button[aria-pressed="true"] { background: var(--gold); color: #1b1610; font-weight: 650; }

/* ---------- Blättern, Fußzeile ---------- */
.blaettern { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 50px; }
.blaettern a { display: block; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  text-decoration: none; color: var(--text); font-weight: 600; }
.blaettern a:hover { border-color: var(--gold); }
.blaettern span { display: block; font-size: .8rem; color: var(--muted); font-weight: 500; }
.blaettern .weiter { text-align: right; grid-column: 2; }
.footer { border-top: 1px solid var(--line); background: var(--bg-soft); }
.footer-inner { max-width: 1480px; margin: 0 auto; padding: 26px 20px 34px; color: var(--muted); font-size: .88rem;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.footer-inner p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); }

/* ---------- Startseite der Hilfe ---------- */
.hero { display: grid; gap: 30px; align-items: center; margin-bottom: 26px; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.hinweis-suche { color: var(--muted); font-size: .95rem; }
.hero-bild { display: none; }
@media (min-width: 760px) { .hero { grid-template-columns: 1fr 210px; } .hero-bild { display: block; } .hero-bild .f-iphone { width: 210px; } }
.gruppe { margin-top: 34px; }
.gruppe h2 { font-size: 1.3rem; margin-bottom: 14px; }
.karten { display: grid; gap: 14px; }
@media (min-width: 680px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.karte { display: block; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); transition: border-color var(--t-fast), transform var(--t-fast); }
.karte:hover { border-color: var(--gold); transform: translateY(-2px); }
.karte strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.karte span { display: block; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.trefferliste { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; margin-bottom: 20px; }
.trefferliste h2 { font-size: 1rem; margin: 8px 12px; }

/* ---------- Eingebettet in die App (?embed=1) ---------- */
.embed .seitenleiste, .embed .toc, .embed .footer, .embed .sprachwahl, .embed .blaettern, .embed .burger, .embed .skip-link { display: none !important; }
.embed .rahmen { grid-template-columns: minmax(0, 1fr) !important; }
.embed .inhalt { padding: 20px 18px 60px; }
.embed .brand em { display: none; }
@media print { .topbar, .seitenleiste, .toc, .footer, .blaettern, .geraete-schalter { display: none !important; } .rahmen { display: block; } }