:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  --bg: #06101a;
  --panel: #0c2031;
  --panel-2: #102b40;
  --ink: #f5f8fb;
  --muted: #b9c8d4;
  --cyan: #79def0;
  --gold: #f1bd68;
  --line: #35536a;
  --sidebar-open: 17rem;
  --sidebar-closed: 4.75rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 78% 8%, #143d56 0, transparent 29rem), var(--bg); line-height: 1.55; }
a { color: var(--cyan); }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.topbar { position: sticky; z-index: 100; top: 0; display: flex; align-items: center; gap: 2rem; min-height: 72px; padding: 0 max(20px, calc((100% - 1180px) / 2)); border-bottom: 1px solid rgb(121 222 240 / 18%); background: rgb(5 15 25 / 92%); backdrop-filter: blur(15px); }
.brand { display: inline-flex; align-items: center; gap: .8rem; margin-right: auto; color: var(--ink); font-size: 1.08rem; font-weight: 750; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border: 1px solid var(--cyan); border-radius: .65rem; color: #06101a; background: var(--cyan); font-size: .88rem; font-weight: 900; letter-spacing: -.05em; box-shadow: 0 0 1.5rem rgb(121 222 240 / 22%); }
.topnav { display: flex; align-items: center; gap: .3rem; }
.topnav a { padding: .5rem .7rem; border-radius: .4rem; color: #dbe7ef; text-decoration: none; }
.topnav a:hover, .topnav a[aria-current=page] { color: #07111d; background: var(--cyan); }
.nav-toggle { display: none; }
.hero { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; min-height: 660px; padding-block: 5rem; }
.eyebrow { margin: 0 0 .75rem; color: var(--cyan); font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { text-wrap: balance; }
.hero h1 { margin: 0; font-size: clamp(3.2rem, 7.2vw, 6.7rem); line-height: .95; letter-spacing: -.055em; }
.hero h1 span { color: var(--cyan); }
.lead { max-width: 52rem; margin: 1.6rem 0; color: var(--muted); font-size: clamp(1.15rem, 2vw, 1.5rem); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: .8rem 1.15rem; border: 1px solid #55758d; border-radius: .6rem; color: var(--ink); background: #10283b; font-weight: 750; text-decoration: none; }
.button:hover { border-color: var(--cyan); background: #183e58; }
.button.primary { border-color: var(--cyan); color: #06101a; background: var(--cyan); }
.button.primary:hover { background: #a2edf8; }
.button.wide { width: 100%; }
.meta { color: #8195a4; font-size: .9rem; }
.hero-panel { display: grid; gap: .8rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.4rem; background: linear-gradient(155deg, rgb(16 43 64 / 92%), rgb(7 22 34 / 92%)); box-shadow: 0 2rem 6rem #0008; transform: rotate(1.6deg); }
.hero-logo { display: grid; place-items: center; min-height: 11rem; border-radius: 1rem; color: #06101a; background: linear-gradient(135deg, var(--cyan), #46a9c7); font-size: 5rem; font-weight: 900; letter-spacing: -.1em; }
.hero-panel div { display: grid; grid-template-columns: 7rem 1fr; padding: .75rem .85rem; border-radius: .6rem; background: rgb(4 15 24 / 62%); }
.hero-panel small { color: var(--muted); }
.screenshot-section { padding-block: 4rem 6rem; }
.section-heading { max-width: 54rem; margin-bottom: 2rem; }
.section-heading h2, .workflow h2, .download-section h2, .content-page h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: 1.02; letter-spacing: -.035em; }
.section-heading p:not(.eyebrow), .download-section > div > p:not(.eyebrow) { color: var(--muted); font-size: 1.15rem; }
.app-shot { margin: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 1rem; background: #07111d; box-shadow: 0 2rem 6rem #0009; }
.app-shot img { display: block; width: 100%; height: auto; border-radius: .55rem; }
.app-shot figcaption { padding: .8rem .4rem .1rem; color: #91a5b5; font-size: .9rem; }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding-bottom: 7rem; }
.features article { position: relative; min-height: 16rem; padding: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: linear-gradient(145deg, var(--panel), #0a1a29); }
.features article > span { position: absolute; right: 1rem; top: -.9rem; color: rgb(121 222 240 / 13%); font-size: 7rem; font-weight: 900; }
.features h2 { position: relative; margin: 1rem 0 .5rem; font-size: 1.55rem; }
.features p { position: relative; color: var(--muted); }
.workflow-section { padding: 6rem 0; border-block: 1px solid rgb(121 222 240 / 14%); background: #091827; }
.workflow { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: start; }
.workflow ol { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.workflow li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 1.1rem; border-left: .25rem solid var(--cyan); background: #10283b; counter-increment: step; }
.workflow li strong::before { content: "0" counter(step) " "; color: var(--gold); }
.workflow li span { color: var(--muted); }
.download-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding-block: 7rem; }
.download-card { display: grid; gap: .9rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.download-card p { margin: .4rem 0 -.45rem; color: var(--muted); }
.download-card code, pre { display: block; overflow: auto; padding: .8rem; border-radius: .45rem; color: #c7f5fb; background: #06111c; }
footer { padding: 1.5rem 0 2.5rem; border-top: 1px solid rgb(121 222 240 / 14%); color: #8da0ae; }
.footer-grid { display: flex; justify-content: space-between; gap: 1rem; }
.content-page { min-height: calc(100vh - 160px); padding-block: 4rem 6rem; }
.content-page > section { margin-top: 1.2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.content-page h2 { margin: 1.2rem 0 .4rem; color: var(--cyan); font-size: 1.35rem; }
.content-page section > h2:first-child { margin-top: 0; }
.content-page p, .content-page li { color: var(--muted); }
.shortcut-grid { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .6rem 1rem; align-items: center; }
kbd, .shortcut-grid code { padding: .25rem .45rem; border: 1px solid #45647b; border-radius: .35rem; color: #fff; background: #06111c; }
@media (max-width: 820px) {
  .nav-toggle { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--ink); background: var(--panel); font-size: 1.25rem; }
  .topnav { position: absolute; inset: 72px 0 auto; display: none; padding: .8rem 20px; border-bottom: 1px solid var(--line); background: #07121d; }
  .topnav.is-open { display: grid; }
  .hero, .workflow, .download-section { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-panel { max-width: 34rem; transform: none; }
  .features { grid-template-columns: 1fr; }
  .workflow { gap: 2rem; }
  .workflow li { grid-template-columns: 1fr; }
}

/* Verbindliche linke Seitennavigation für alle öffentlichen Produktseiten. */
body { min-width: 18rem; }
.skip-link { position: fixed; z-index: 500; left: .75rem; top: .75rem; transform: translateY(-180%); padding: .6rem .8rem; color: #06101a; background: var(--cyan); }
.skip-link:focus { transform: none; }
.site-layout { display: grid; grid-template-columns: var(--sidebar-open) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease; }
body.nav-collapsed .site-layout { grid-template-columns: var(--sidebar-closed) minmax(0, 1fr); }
.site-sidebar { position: sticky; z-index: 100; top: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; border-right: 1px solid rgb(121 222 240 / 22%); background: rgb(5 15 25 / 96%); box-shadow: .8rem 0 2.8rem #0005; backdrop-filter: blur(15px); }
.sidebar-head { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; gap: .35rem; align-items: center; min-height: 5rem; padding: .75rem; border-bottom: 1px solid rgb(121 222 240 / 16%); }
.site-sidebar .brand { margin: 0; }
.brand-mark { flex: 0 0 2.7rem; width: 2.7rem; height: 2.7rem; overflow: hidden; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-sidebar .nav-toggle { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--line); border-radius: .55rem; color: var(--ink); background: var(--panel); font-size: 1.2rem; cursor: pointer; }
.site-sidebar .nav-toggle:hover, .site-sidebar .nav-toggle:focus-visible { border-color: var(--cyan); outline: none; background: #173a52; }
.side-nav { display: grid; gap: .22rem; align-content: start; padding: .75rem; }
.side-nav a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; min-height: 2.8rem; border: 1px solid transparent; border-radius: .55rem; color: #dbe7ef; text-decoration: none; }
.side-nav a:hover, .side-nav a:focus-visible { border-color: #476a82; outline: none; background: #10283b; }
.side-nav a[aria-current=page] { color: #06101a; background: var(--cyan); font-weight: 800; }
.nav-icon { display: grid; place-items: center; font-size: .72rem; font-weight: 900; letter-spacing: -.02em; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-note { margin: auto .85rem 1rem; color: #7891a3; font-size: .75rem; }
body.nav-collapsed .sidebar-head { grid-template-columns: 1fr; padding-inline: .95rem; }
body.nav-collapsed .site-sidebar .brand { display: none; }
body.nav-collapsed .site-sidebar .nav-toggle { transform: rotate(180deg); }
body.nav-collapsed .side-nav { padding-inline: .65rem; }
body.nav-collapsed .side-nav a { grid-template-columns: 1fr; }
body.nav-collapsed .nav-label, body.nav-collapsed .sidebar-note { display: none; }
.site-content { min-width: 0; }
.site-content .wrap { margin-left: 20px; margin-right: auto; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 2rem; }
.footer-grid p { margin: 0; }
.footer-disclosure { grid-column: 1 / -1; font-size: .85rem; }
.content-page > section { max-width: 72rem; }
.content-page dt { margin-top: 1rem; color: var(--ink); font-weight: 800; }
.content-page dd { color: var(--muted); }
.parameter-list { display: grid; gap: .8rem; }
.parameter-list article { padding: 1rem; border-left: .25rem solid var(--cyan); background: #0a1a29; }
.parameter-list h3 { margin: 0 0 .4rem; }
.parameter-list p { margin: .25rem 0; }
code { padding: .18rem .4rem; border: 1px solid #45647b; border-radius: .35rem; color: #fff; background: #06111c; }
pre { max-width: 100%; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
pre code { padding: 0; border: 0; white-space: inherit; background: transparent; }

@media (max-width: 920px) {
  .site-content .hero, .site-content .workflow, .site-content .download-section { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-layout, body.nav-collapsed .site-layout { display: block; }
  .site-sidebar { position: fixed; width: var(--sidebar-open); transition: width .18s ease; }
  .site-content { margin-left: var(--sidebar-closed); }
  body.nav-collapsed .site-sidebar { width: var(--sidebar-closed); }
  body:not(.nav-collapsed) .site-sidebar { box-shadow: 1.2rem 0 3rem #000c; }
  .site-content .wrap { width: min(100% - 24px, 1180px); margin-left: 12px; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-disclosure { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media (max-width: 520px) {
  .wrap { width: min(100% - 24px, 1180px); }
  .hero { padding-block: 3.3rem; }
  .hero h1 { font-size: 3rem; }
  .footer-grid { display: block; }
  .shortcut-grid { grid-template-columns: 1fr; }
}