/* Seiteneigenes CSS fuer /api – ausgelagert aus api.php,
   wo es als Inline-Block bei jedem Aufruf neu uebertragen wurde. */
/* ── Hero ─────────────────────────────────────────────────────────────── */
.api-hero {
    background: linear-gradient(160deg, #050d1a 0%, #0c1628 45%, #060e1c 100%);
    position: relative; overflow: hidden;
}
.api-dotgrid {
    background-image:
        radial-gradient(rgba(99,102,241,.13) 1px, transparent 1px),
        radial-gradient(rgba(20,184,166,.06) 1px, transparent 1px);
    background-size: 32px 32px, 16px 16px;
    background-position: 0 0, 8px 8px;
    mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 20%, transparent 100%);
}

/* ── Sticky Sidebar Nav ───────────────────────────────────────────────── */
.api-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: 10px;
    font-size: .8rem; font-weight: 500; color: #64748b;
    text-decoration: none; transition: all .18s;
    border: 1px solid transparent;
}
.api-nav-link:hover, .api-nav-link.active {
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.18);
    color: #3b82f6;
}
.dark .api-nav-link { color: #475569; }
.dark .api-nav-link:hover, .dark .api-nav-link.active {
    background: rgba(59,130,246,.10);
    border-color: rgba(59,130,246,.22);
    color: #60a5fa;
}

/* ── Code Block ───────────────────────────────────────────────────────── */
.api-code-wrap {
    background: #0a0f1e;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.api-code-bar {
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 10px 16px;
    display: flex; align-items: center; gap: 6px;
}
.api-dot { width: 10px; height: 10px; border-radius: 50%; }
pre.api-pre {
    margin: 0; padding: 20px 22px;
    overflow-x: auto; font-size: .82rem; line-height: 1.75;
    font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
}
.tok-kw   { color: #c792ea; }
.tok-str  { color: #c3e88d; }
.tok-fn   { color: #82aaff; }
.tok-cm   { color: #546e7a; font-style: italic; }
.tok-num  { color: #f78c6c; }
.tok-key  { color: #89ddff; }
.tok-val  { color: #c3e88d; }
.tok-url  { color: #89ddff; text-decoration: underline; text-underline-offset: 2px; }
.tok-op   { color: #89ddff; }
.tok-obj  { color: #ffcb6b; }
.tok-bool { color: #f78c6c; }
.tok-pun  { color: #89ddff; }

/* ── Copy Button ──────────────────────────────────────────────────────── */
.api-copy-btn {
    margin-left: auto; display: flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700; color: #475569;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px; padding: 3px 10px; cursor: pointer; transition: all .18s;
}
.api-copy-btn:hover { color: #94a3b8; background: rgba(255,255,255,.1); }

/* ── Method Badge ─────────────────────────────────────────────────────── */
.badge-get  { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.3); border-radius: 6px; padding: 2px 8px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.badge-post { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); border-radius: 6px; padding: 2px 8px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }

/* ── Lang Tabs ────────────────────────────────────────────────────────── */
.api-tab { padding: 6px 14px; border-radius: 8px; font-size: .78rem; font-weight: 600; color: #64748b; cursor: pointer; transition: all .18s; background: transparent; border: none; }
.api-tab:hover { color: #94a3b8; }
.api-tab.active { background: rgba(59,130,246,.15); color: #60a5fa; }

/* ── Parameter table ─────────────────────────────────────────────────── */
.api-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.api-table th { padding: 10px 14px; text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #64748b; border-bottom: 1px solid rgba(255,255,255,.06); }
.api-table td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.04); color: #94a3b8; vertical-align: top; }
.api-table tr:last-child td { border-bottom: none; }
.api-table tr:hover td { background: rgba(255,255,255,.015); }
.type-pill { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: .68rem; font-weight: 700; font-family: monospace; }
.type-string  { background: rgba(139,92,246,.15); color: #a78bfa; }
.type-integer { background: rgba(245,158,11,.12); color: #fbbf24; }
.type-boolean { background: rgba(16,185,129,.12); color: #34d399; }
.type-object  { background: rgba(59,130,246,.12); color: #60a5fa; }
.type-array   { background: rgba(239,68,68,.12);  color: #f87171; }
.req-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 5px; font-size: .67rem; font-weight: 700; }
.req-yes { background: rgba(239,68,68,.12); color: #f87171; }
.req-no  { background: rgba(100,116,139,.10); color: #64748b; }

/* ── Section card ────────────────────────────────────────────────────── */
.api-card {
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    transition: border-color .25s;
}
.dark .api-card { background: rgba(15,23,42,.5); }
:root:not(.dark) .api-card { background: #fff; border-color: #e2e8f0; }

/* ── Status dot ──────────────────────────────────────────────────────── */
@keyframes api-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.api-status-dot { animation: api-pulse 2.5s ease-in-out infinite; }

/* ── Section heading underline ──────────────────────────────────────── */
.api-section-h { position: relative; padding-bottom: 14px; margin-bottom: 24px; }
.api-section-h::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 48px; height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

/* ── Glow ─────────────────────────────────────────────────────────────── */
.api-glow-blue   { background: radial-gradient(ellipse at center, rgba(59,130,246,.15) 0%, transparent 65%); }
.api-glow-purple { background: radial-gradient(ellipse at center, rgba(139,92,246,.11) 0%, transparent 60%); }
.api-glow-teal   { background: radial-gradient(ellipse at center, rgba(20,184,166,.08) 0%, transparent 58%); }

/* ── Inline code ─────────────────────────────────────────────────────── */
code.ic {
    font-family: monospace;
    font-size: .8em;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(59,130,246,.1);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,.18);
}
:root:not(.dark) code.ic { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }