@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* =========================================================
   Wave Tools – Dokumentation (gemeinsames Stylesheet) · AURORA
   Wird von allen Produkt-Dokus genutzt: /docs/<produkt>/
   Designsystem: /de/wave-access/ (Aurora/Bento)
   ========================================================= */
h1,h2,h3{line-height:1.2}
:root{
  /* Aurora-Palette */
  --ink:#0c1330; --ink-soft:#3d4569; --ink-faint:#5b6285;
  --card:#ffffff; --line:rgba(12,19,48,.09);
  --blue:#0178b6; --deep:#034c96; --sky:#39a2d4; --teal:#54b8a0;
  --teal-ink:#0d6e58; --violet:#7b6cf0; --violet-ink:#5343c9;
  --grad:linear-gradient(70deg,var(--blue) 0%,var(--teal) 100%);
  --r-lg:24px; --r-md:20px; --r-sm:14px;
  --shadow-soft:0 20px 50px -20px rgba(3,76,150,.22);
  /* Alt-Namen → Aurora-Töne */
  --bg:#f7f9fe; --fg:#0c1330; --muted:#5b6285; --muted-2:#8087a8;
  --border:rgba(12,19,48,.12); --subtle:#f1f5fc; --primary:#0c1330;
  --brand-1:#39a2d4; --brand-3:#54b8a0; --brand-4:#0178b6;
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:15.5px}
a{color:var(--deep);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* Kopfzeile als Pillen-Nav */
.docs-header{position:sticky;top:14px;z-index:50;background:transparent;backdrop-filter:none;border-bottom:0;padding:0 16px}
.docs-header .inner{max-width:1200px;margin:0 auto;padding:8px 18px;height:auto;min-height:58px;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:0 10px 34px -16px rgba(3,76,150,.25)}
.docs-logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.docs-logo img{height:30px}
.docs-logo:hover{text-decoration:none}
.docs-crumb{color:var(--ink-faint);font-size:.875rem}
.docs-header .spacer{flex:1}
.docs-header nav a{color:var(--ink-soft);font-size:.875rem;font-weight:600;margin-left:6px;padding:7px 12px;border-radius:999px;transition:background .15s,color .15s}
.docs-header nav a:hover{color:var(--deep);background:rgba(1,120,182,.09);text-decoration:none}

/* Suche (falls vorhanden) – runde Aurora-Pille */
.docs-search input,.docs-header input[type="search"],.docs-side input[type="search"]{font:inherit;font-size:.875rem;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:8px 16px;width:100%;max-width:240px}
.docs-search input:focus,.docs-header input[type="search"]:focus,.docs-side input[type="search"]:focus{outline:3px solid rgba(57,162,212,.35);outline-offset:0;border-color:var(--sky)}

/* Layout: Sidebar + Inhalt */
.docs-shell{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px}
@media(max-width:860px){.docs-shell{grid-template-columns:1fr}.docs-side{position:static;max-height:none;border-right:0;margin-top:28px;padding-bottom:18px}}
.docs-side{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto;margin-top:40px;padding:22px 16px;border-right:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 12px 34px -22px rgba(3,76,150,.25)}
.docs-side .group{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:22px 0 8px}
.docs-side .group:first-child{margin-top:0}
.docs-side a{display:block;padding:7px 12px;border-radius:999px;color:var(--ink-soft);font-size:.875rem;font-weight:500;transition:background .15s,color .15s}
.docs-side a:hover{background:var(--subtle);color:var(--deep);text-decoration:none}
.docs-side a.active{background:rgba(1,120,182,.1);color:var(--deep);font-weight:700}

/* Inhalt */
.docs-main{padding:40px 0 96px;max-width:760px}
.docs-main h1{font-size:2rem;font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.docs-lead{color:var(--ink-soft);font-size:1.05rem;margin-bottom:36px}
.docs-main h2{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:52px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.docs-main h2:first-of-type{border-top:0;padding-top:0;margin-top:24px}
.docs-main h3{font-size:1.05rem;font-weight:700;margin:26px 0 8px}
.docs-main p{margin-bottom:14px;color:var(--ink-soft)}
.docs-main ul,.docs-main ol{margin:0 0 14px 22px;color:var(--ink-soft)}
.docs-main li{margin-bottom:6px}
.docs-main strong{color:var(--ink)}
.docs-main code{background:var(--subtle);border:1px solid var(--line);border-radius:8px;padding:1px 7px;font-size:.85em;font-family:ui-monospace,'SF Mono',Menlo,monospace;color:var(--deep)}
.docs-main pre{background:var(--ink);color:#dbe4ff;border-radius:var(--r-sm);padding:16px 18px;overflow-x:auto;margin:0 0 16px;font-size:.85rem;line-height:1.6;box-shadow:0 16px 40px -20px rgba(12,19,48,.5)}
.docs-main pre code{background:transparent;border:0;padding:0;color:inherit}
.docs-main table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:0 12px 34px -22px rgba(3,76,150,.2)}
.docs-main th,.docs-main td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.docs-main tr:last-child td{border-bottom:0}
.docs-main th{background:var(--subtle);font-weight:700;font-size:.8rem;color:var(--deep);letter-spacing:.02em}
.docs-note{display:flex;gap:10px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r-sm);padding:12px 16px;margin:0 0 16px;font-size:.9rem;color:var(--ink-soft);box-shadow:0 12px 34px -22px rgba(3,76,150,.18)}
.docs-note.is-pro{border-left-color:var(--violet)}
.docs-note.is-warn{border-left-color:#d97706;background:#fffbeb}
.pill{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.05em;border-radius:999px;padding:2px 9px;vertical-align:2px;margin-left:6px}
.pill-pro{background:linear-gradient(70deg,var(--violet),var(--violet-ink));color:#fff}
.pill-free{background:#e6f6f1;color:var(--teal-ink);border:1px solid rgba(84,184,160,.45)}
.kbd{border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;background:#fff;padding:0 6px;font-size:.8em;font-family:inherit}

/* Produkt-Hub (/docs/) */
.hub{max-width:960px;margin:0 auto;padding:56px 24px 96px}
.hub h1{font-size:2.1rem;font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.hub .lead{color:var(--ink-soft);margin-bottom:36px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.hub-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);display:block;color:inherit;box-shadow:0 12px 34px -22px rgba(3,76,150,.25);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.hub-card:hover{text-decoration:none;border-color:rgba(3,76,150,.3);transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(3,76,150,.35)}
.hub-card h2{font-size:1.1rem;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.hub-card p{color:var(--ink-faint);font-size:.9rem}
.hub-card.coming{opacity:.55;pointer-events:none}

/* Fußzeile */
.docs-footer{border-top:1px solid var(--line);background:transparent;padding:28px 0;font-size:.8rem;color:var(--ink-faint);margin-top:40px}
.docs-footer .inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.docs-footer a{color:var(--ink-faint)}
.docs-footer a:hover{color:var(--deep)}

/* Sprachmenü (Aurora-Pille, einheitlich mit Startseite) */
.lang-menu{position:relative;font-size:.85rem}
.lang-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(12,19,48,.12);border-radius:999px;padding:6px 13px;color:#3d4569;font-weight:700;background:#fff;user-select:none}
.lang-menu summary:hover{color:#034c96;border-color:#034c96;background:#fff}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary::after{content:"";border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.lang-menu[open] summary::after{border-top:none;border-bottom:5px solid currentColor}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 10px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid rgba(12,19,48,.09);border-radius:14px;box-shadow:0 18px 40px -18px rgba(3,76,150,.35);min-width:160px;z-index:120}
.lang-menu li a{display:block;padding:8px 12px;border-radius:9px;color:#0c1330;text-decoration:none;font-weight:600}
.lang-menu li a:hover{background:#f1f5fc;text-decoration:none}
.lang-menu li a[aria-current="true"]{font-weight:800;background:#f1f5fc;color:#034c96}