/* Speeeak Dokumentation – ruhig, hell, Speeeak-Farben. */
:root { --ink: #22283d; --muted: #697087; --purple: #6751df; --purple-dark: #5540c6; --soft: #f0edff; --line: #eaeaf3; --bg: #f7f8fe; --code: #1f1c3b; }
* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink); background: #fff; font-size: 15.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--purple-dark); }
.dk-kopf { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 22px; padding: 0 28px; border-bottom: 1px solid var(--line); background: #fffd; backdrop-filter: blur(10px); }
.dk-marke { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -.5px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dk-zeichen { display: flex; align-items: center; gap: 3px; height: 24px; } .dk-zeichen i { width: 4px; background: var(--purple); border-radius: 4px; }
.dk-zeichen i:nth-child(1) { height: 10px; } .dk-zeichen i:nth-child(2) { height: 22px; } .dk-zeichen i:nth-child(3) { height: 15px; } .dk-zeichen i:nth-child(4) { height: 9px; }
.dk-marke-zusatz { color: var(--muted); font-weight: 600; font-size: 14px; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line); letter-spacing: 0; }
.dk-suche-knopf { flex: 1; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; color: var(--muted); font-size: 14px; cursor: text; font-family: inherit; text-align: left; }
.dk-suche-knopf svg, .dk-suche-kopf svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.dk-suche-knopf kbd { margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-size: 11.5px; color: var(--muted); font-family: inherit; }
.dk-oben { display: flex; gap: 18px; align-items: center; font-size: 14px; white-space: nowrap; } .dk-oben a { color: var(--muted); text-decoration: none; } .dk-oben a:hover { color: var(--purple-dark); }
.dk-oben .dk-knopf { background: var(--purple); color: #fff; padding: 7px 14px; border-radius: 999px; font-weight: 600; } .dk-oben .dk-knopf:hover { background: var(--purple-dark); color: #fff; }
.dk-menue-knopf { display: none; }
.dk-rahmen { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 30px 28px 60px; }
.dk-nav { position: sticky; top: 94px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; font-size: 14px; padding-right: 6px; }
.dk-nav h4 { margin: 18px 0 6px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); } .dk-nav h4:first-child { margin-top: 4px; }
.dk-nav a { display: block; padding: 7px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; } .dk-nav a:hover { background: var(--bg); }
.dk-nav a.aktiv { background: var(--soft); color: var(--purple-dark); font-weight: 600; }
.dk-inhalt { min-width: 0; }
.dk-krume { font-size: 13px; color: var(--muted); margin: 0 0 10px; } .dk-krume strong { color: var(--ink); font-weight: 600; }
.dk-artikel h1 { font-size: 34px; letter-spacing: -.8px; margin: 0 0 8px; line-height: 1.15; }
.dk-kurz { font-size: 17px; color: var(--muted); margin: 0 0 26px; }
.dk-artikel h2 { font-size: 22px; margin: 36px 0 10px; letter-spacing: -.3px; position: relative; } .dk-artikel h3 { font-size: 17px; margin: 26px 0 8px; } .dk-artikel h4 { font-size: 15px; margin: 18px 0 6px; }
.doku-anker { margin-left: 8px; color: #cfc9ee; text-decoration: none; font-weight: 400; opacity: 0; } h2:hover .doku-anker, h3:hover .doku-anker { opacity: 1; }
.dk-artikel p, .dk-artikel ul, .dk-artikel ol { margin: 0 0 14px; } .dk-artikel li { margin-bottom: 4px; }
.dk-artikel img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px #2c2a5a0d; margin: 8px 0 16px; display: block; }
.dk-artikel ol { counter-reset: s; list-style: none; padding: 0; } .dk-artikel ol > li { counter-increment: s; position: relative; padding: 11px 14px 11px 50px; background: var(--bg); border-radius: 12px; margin-bottom: 8px; }
.dk-artikel ol > li::before { content: counter(s); position: absolute; left: 14px; top: 11px; width: 26px; height: 26px; border-radius: 50%; background: var(--purple); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.dk-artikel ol > li p { margin: 0; } .dk-artikel ol ol, .dk-artikel ol ul { margin-top: 6px; }
.dk-artikel ul { padding-left: 22px; }
.dk-artikel blockquote { display: flex; gap: 12px; background: var(--soft); border-left: 3px solid var(--purple); border-radius: 10px; padding: 12px 16px; margin: 16px 0; font-size: 14.5px; } .dk-artikel blockquote p { margin: 0; }
.dk-artikel blockquote.achtung { background: #fff3f3; border-color: #c23b53; }
.dk-artikel pre { background: var(--code); color: #e9e6ff; border-radius: 12px; padding: 14px 16px; font-size: 13px; overflow: auto; position: relative; line-height: 1.5; }
.dk-artikel code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } .dk-artikel :not(pre) > code { background: var(--soft); border-radius: 5px; padding: 1px 6px; color: var(--purple-dark); }
.dk-kopieren { position: absolute; top: 8px; right: 8px; background: #ffffff22; color: #fff; border: 0; border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: inherit; } .dk-kopieren:hover { background: #ffffff38; }
.dk-artikel table { border-collapse: collapse; width: 100%; margin: 10px 0 18px; font-size: 14px; } .dk-artikel th, .dk-artikel td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .dk-artikel th { background: var(--bg); font-weight: 600; }
.dk-artikel .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 20px; }
.dk-artikel .karten > * { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0; } .dk-artikel .karten a { text-decoration: none; color: var(--ink); } .dk-artikel .karten a:hover { border-color: var(--purple); }
.dk-artikel .karten strong { display: block; margin-bottom: 3px; } .dk-artikel .karten p { margin: 0; }
.dk-artikel hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.dk-fuss { margin-top: 40px; }
.dk-rueckmeldung { font-size: 13.5px; color: var(--muted); } .dk-rueckmeldung button { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; margin: 0 2px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink); } .dk-rueckmeldung button:hover { border-color: var(--purple); }
.dk-blaettern { display: flex; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.dk-blaettern a { color: var(--purple-dark); text-decoration: none; font-weight: 600; max-width: 48%; } .dk-blaettern small { display: block; color: var(--muted); font-weight: 400; } .dk-weiter { text-align: right; margin-left: auto; }
.dk-toc { position: sticky; top: 94px; align-self: start; font-size: 13px; } .dk-toc h5 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.dk-toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; } .dk-toc a.ebene-3 { padding-left: 24px; } .dk-toc a.aktiv, .dk-toc a:hover { border-color: var(--purple); color: var(--purple-dark); }
/* Fußzeile mit Impressum/Datenschutz – auf jeder Seite */
.dk-seitenfuss { border-top: 1px solid var(--line); padding: 18px 28px 26px; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); max-width: 1280px; margin: 0 auto; }
.dk-seitenfuss nav { display: flex; gap: 18px; flex-wrap: wrap; } .dk-seitenfuss a { color: var(--muted); text-decoration: none; } .dk-seitenfuss a:hover { color: var(--purple-dark); }
/* Suche */
.dk-suche { border: 0; border-radius: 18px; padding: 0; width: min(640px, calc(100% - 32px)); box-shadow: 0 30px 80px #2c2a5a40; color: var(--ink); margin-top: 10vh; }
.dk-suche::backdrop { background: #22283d66; backdrop-filter: blur(3px); }
.dk-suche-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); margin: 0; color: var(--muted); }
.dk-suche-kopf input { flex: 1; border: 0; font-size: 17px; outline: none; font-family: inherit; color: var(--ink); background: transparent; }
.dk-suche-kopf button { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; color: var(--muted); cursor: pointer; font-family: inherit; }
.dk-suche-liste { max-height: 60vh; overflow: auto; padding: 8px; }
.dk-treffer { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); } .dk-treffer:hover, .dk-treffer.aktiv { background: var(--soft); }
.dk-treffer b { display: block; font-size: 14.5px; } .dk-treffer small { color: var(--muted); font-size: 12.5px; display: block; } .dk-treffer mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 2px; }
.dk-leer { padding: 20px; color: var(--muted); font-size: 14px; text-align: center; }
.dk-schleier { display: none; }
@media (max-width: 1100px) { .dk-rahmen { grid-template-columns: 240px minmax(0, 1fr); } .dk-toc { display: none; } }
@media (max-width: 820px) {
  .dk-seitenfuss { padding: 16px 16px 24px; flex-direction: column; }
  .dk-kopf { padding: 0 16px; gap: 12px; height: 58px; } .dk-marke-zusatz { display: none; } .dk-oben a:not(.dk-knopf) { display: none; }
  .dk-suche-knopf span { display: none; } .dk-suche-knopf { flex: none; width: 40px; height: 40px; padding: 0; justify-content: center; margin: 0 0 0 auto; } .dk-suche-knopf kbd { display: none; }
  .dk-menue-knopf { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; } .dk-menue-knopf span { display: block; height: 2px; width: 18px; margin: 0 auto; background: var(--ink); border-radius: 2px; }
  .dk-rahmen { display: block; padding: 22px 16px 50px; }
  .dk-nav { position: fixed; top: 58px; left: 0; bottom: 0; width: min(300px, 85vw); background: #fff; border-right: 1px solid var(--line); padding: 16px; transform: translateX(-100%); transition: transform .2s; z-index: 40; max-height: none; }
  .dk-nav.offen { transform: none; } .dk-schleier.offen { display: block; position: fixed; inset: 58px 0 0 0; background: #22283d55; z-index: 35; }
  .dk-artikel h1 { font-size: 27px; } .dk-kurz { font-size: 15.5px; }
  .dk-blaettern { flex-direction: column; } .dk-blaettern a { max-width: none; } .dk-weiter { text-align: left; margin-left: 0; }
}