/* ===== Entwickler-Bereich: API-Dokumentation + Integrationen (angemeldet und öffentlich) =====
   Lesbar wie eine Dokumentation, nicht wie ein Dashboard: Text statt Karten, ein ruhiges Menü mit Filter,
   dunkle Code-Blöcke wie im Terminal der Startseite. Nutzt nur die Farb-Tokens der Seite. */

main.side-layout{--dxa:var(--g1)}
body.has-shell main.side-layout{--dxa:var(--ac)}
main.side-layout{--code-bg:#0e131c;--code-fg:#d6deeb;--code-bd:#232b3a;--code-mut:#8b949e}

/* ---------- Menü links ---------- */
main.side-layout>.dx-nav{grid-column:1;grid-row:1/span 80}
.dx-nav{display:block;flex:none;position:sticky;top:78px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;padding:0 6px 20px 0;scrollbar-width:thin}
body.has-shell .dx-nav{top:74px}
.dx-filter{position:relative;margin:0 0 14px}
.dx-filter i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:12px;pointer-events:none}
.dx-filter input,body.has-shell .dx-filter input{width:100%;height:36px;padding:0 34px 0 32px;font-size:13.5px;border-radius:8px}
.dx-filter kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}
.dx-nav .gh{display:block;margin:18px 0 6px;font:600 10.5px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.dx-nav .gh:first-of-type{margin-top:4px}
.dx-nav a{display:block;position:relative;padding:5px 10px 5px 14px;margin:0;border:0;border-radius:0;color:var(--mut);font-size:14px;font-weight:500;background:none;border-left:1px solid var(--bd)}
.dx-nav a i{display:none}
.dx-nav a:hover{color:var(--fg);background:none;border-left-color:var(--mut);text-decoration:none}
.dx-nav a.on{color:var(--dxa);border-left:2px solid var(--dxa);padding-left:13px;font-weight:650;background:none}
.dx-nav [hidden]{display:none}
.dx-none{padding:6px 14px;color:var(--mut);font-size:13px}

/* ---------- Bereichsumschalter (API · Integrationen) ---------- */
.dx-tabs{display:flex;gap:26px;border-bottom:1px solid var(--bd);margin:0 0 26px}
.dx-tabs a{display:flex;align-items:baseline;gap:8px;padding:2px 0 12px;margin-bottom:-1px;color:var(--mut);font-weight:600;font-size:15px;border-bottom:2px solid transparent}
.dx-tabs a small{font:600 11px ui-monospace,Consolas,monospace;color:var(--mut);opacity:.8}
.dx-tabs a:hover{color:var(--fg);text-decoration:none}
.dx-tabs a.on{color:var(--fg);border-bottom-color:var(--dxa)}
.dx-tabs a.on small{color:var(--dxa);opacity:1}

/* ---------- Kopf der Seite ---------- */
.dx-eyebrow{display:block;margin:0 0 6px;font:600 11.5px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dxa)}
main.side-layout h1{font-size:30px;letter-spacing:-.025em;margin:0 0 10px}
main.side-layout h1 i{display:none}
main.side-layout h1::after{display:none!important}
.dx-lead{font-size:16.5px;line-height:1.6;max-width:720px;color:color-mix(in srgb,var(--fg) 85%,var(--mut));margin:0 0 26px}
.dx-lead code{font-size:.9em}

/* ---------- Inhalt: Fließtext statt Karten ---------- */
.docs-main{max-width:820px;line-height:1.65}
.docs-main section.card,.docs-main>.card{background:none;border:0;border-radius:0;padding:0;box-shadow:none;margin:0 0 8px}
.docs-main section.card:hover{border:0}
.docs-main h2{font-size:21px;font-weight:650;letter-spacing:-.015em;margin:34px 0 10px}
.docs-main h2 i{display:none}
.docs-main h3{font-size:17px;font-weight:650;letter-spacing:-.01em;margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--bd)}
.docs-main section>h3:first-child{margin-top:4px;padding-top:0;border-top:0}
.docs-main p{margin:10px 0}
.docs-main ol,.docs-main ul{padding-left:24px}
.docs-main li{margin:6px 0}
.docs-main li::marker{font:700 13px ui-monospace,Consolas,monospace;color:var(--dxa)}
.docs-main a{color:var(--dxa);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--dxa) 35%,transparent);text-underline-offset:3px}
.docs-main a:hover{text-decoration-color:var(--dxa)}
.docs-main a.btn,.docs-main a.ghost{text-decoration:none}
.docs-main code{font:.88em ui-monospace,"Cascadia Mono",Consolas,monospace;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--dxa) 9%,var(--card));border:1px solid color-mix(in srgb,var(--dxa) 14%,var(--bd));color:var(--fg)}
.docs-main .mut i{color:var(--dxa)}
.docs-main .tbl{border:1px solid var(--bd);border-radius:10px;background:var(--card);margin:12px 0}
.docs-main .tbl table{margin:0}
.docs-main .tbl th{background:color-mix(in srgb,var(--bg) 70%,var(--card));font-size:11.5px}
.docs-main .tbl tr:last-child td{border-bottom:0}
.docs-main .tbl td{vertical-align:top}
.docs-main .tbl td:first-child,.docs-main .tbl th:first-child{white-space:nowrap}
.docs-main .tbl td:first-child code{overflow-wrap:normal;word-break:keep-all}

/* Code: dunkel wie das Terminal der Startseite, Kopieren-Knopf im Block */
.docs-main pre,.int-snip pre{background:var(--code-bg);color:var(--code-fg);border:1px solid var(--code-bd);border-radius:10px;padding:16px 18px;font:13px/1.65 ui-monospace,"Cascadia Mono",Consolas,monospace;overflow-x:auto;margin:12px 0}
.docs-main pre code,.docs-main pre a{background:none;border:0;padding:0;color:inherit;font:inherit}
.codebox{position:relative}
.codebox>pre{margin:12px 0}
.codebox .cp{position:absolute;top:10px;right:10px;padding:4px 10px;font-size:12px;border-radius:6px;border:1px solid var(--code-bd);background:#171e2b;color:var(--code-mut);cursor:pointer;opacity:.0;transition:opacity .12s,color .12s}
.codebox:hover .cp,.codebox .cp:focus-visible{opacity:1}.codebox .cp:hover{color:#fff;border-color:#3a4660}
@media(hover:none){.codebox .cp{opacity:1}}
.int-snip{margin:16px 0}
.int-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 8px 8px 16px;background:#141b27;border:1px solid var(--code-bd);border-bottom:0;border-radius:10px 10px 0 0;margin:0!important}
.int-head .mut{color:var(--code-mut);font:600 11.5px ui-monospace,Consolas,monospace;letter-spacing:.04em}
.int-head button.ghost{background:transparent!important;border-color:var(--code-bd)!important;color:var(--code-mut)!important;padding:3px 10px!important;font-size:12px!important}
.int-head button.ghost:hover{color:#fff!important;border-color:#3a4660!important}
.int-snip pre{margin:0;border-radius:0 0 10px 10px}

/* Hinweise */
.docs-main .scope-help,.docs-main .callout{border:1px solid var(--bd);border-left:3px solid var(--dxa);border-radius:8px;background:var(--card);padding:12px 16px}

/* ---------- Vor / Zurück ---------- */
.docs-pager{max-width:820px;margin-top:40px;padding-top:22px;border-top:1px solid var(--bd);gap:14px}
.docs-pager a{border-radius:10px;padding:14px 18px;background:var(--card);text-decoration:none}
.docs-pager a:hover{border-color:var(--dxa);transform:none}
.docs-pager small{font:600 10.5px ui-monospace,Consolas,monospace;letter-spacing:.1em}
.docs-pager b{color:var(--fg);font-weight:650}

/* ---------- Integrationen: Übersicht ---------- */
.dx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--bd);border-radius:12px;background:var(--card);margin:0 0 20px;overflow:hidden}
.dx-step{padding:18px 20px;border-left:1px solid var(--bd);min-width:0}
.dx-step:first-child{border-left:0}
.dx-step .n{font:700 12px ui-monospace,Consolas,monospace;color:var(--dxa);letter-spacing:.08em}
.dx-step>b{display:block;margin:4px 0 4px;font-size:15.5px}
.dx-step p{margin:0;color:var(--mut);font-size:13.5px;line-height:1.5}
.dx-quick{margin:0 0 6px}
.dx-quick .codebox>pre{margin:0}
.dx-group{display:flex;align-items:baseline;gap:10px;margin:34px 0 12px;font-size:13px;font:600 11.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.dx-group::after{content:'';flex:1;height:1px;background:var(--bd)}
.dx-group span{color:var(--dxa)}
.int-gh{display:none}
.int-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.int-tile{grid-template-columns:36px minmax(0,1fr);gap:2px 14px;align-items:start;padding:14px 16px;border-radius:10px;background:var(--card);transition:border-color .12s,background .12s}
.int-tile:hover{border-color:var(--dxa);transform:none;background:color-mix(in srgb,var(--dxa) 4%,var(--card))}
.int-tile i{grid-row:1/span 2;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--dxa) 10%,var(--card));color:var(--dxa);font-size:15px}
.int-tile b{font-size:15px;color:var(--fg)}
.int-tile span{font-size:12.5px;line-height:1.45;grid-column:2}
.dx-more{margin-top:34px;padding:18px 20px;border:1px dashed var(--bd);border-radius:12px}
.dx-more h2{margin:0 0 6px;font-size:16px}.dx-more p{margin:6px 0}

/* ---------- Mobil ---------- */
@media(max-width:860px){
  .dx-nav{position:static;max-height:none;overflow:visible;padding:0 0 4px;margin-bottom:6px}
  .dx-nav .gh{display:none}
  .dx-nav{display:flex;flex:none;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:10px;align-items:center}
  .dx-nav{scrollbar-width:none}.dx-nav::-webkit-scrollbar{display:none}
  .dx-filter{flex:0 0 150px;margin:0}.dx-filter kbd{display:none}
  .dx-nav a{flex:none;border:1px solid var(--bd);border-radius:99px;padding:5px 13px;white-space:nowrap}
  .dx-nav a.on{border:1px solid var(--dxa);background:color-mix(in srgb,var(--dxa) 8%,transparent)}
  .dx-none{display:none}
  main.side-layout h1{font-size:25px}
  .dx-steps{grid-template-columns:1fr}.dx-step{border-left:0;border-top:1px solid var(--bd)}.dx-step:first-child{border-top:0}
  .docs-pager{grid-template-columns:1fr}
}