/* Selbst gehostete Schriften (Google Fonts, SIL Open Font License 1.1), geholt von scripts/assets.php am 20.10.2026 */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* nextweb.design – Child-Theme „nextweb“ (YOOtheme). Dunkel wie die Reise durch das Sonnensystem. Quelle: ntnextweb/design/custom.css (aufbau.sh css). */

:root { --nwd-night: #05050f; --nwd-ink: #f6f1ff; --nwd-text: #d9d4ef; --nwd-muted: #9d97bd; --nwd-peach: #ffb08a; --nwd-sun: #ffc46b; --nwd-lilac: #b9a6ff; --nwd-mint: #7ff2cf; --nwd-line: rgba(255,255,255,.12); }
html { background: var(--nwd-night); }
body { background: transparent; }
/* Sternenhimmel und Nebel im Hintergrund, ohne Bilddatei */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 62%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1px 1px at 88% 48%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1.5px 1.5px at 58% 30%, rgba(255,230,210,.7), transparent 60%),
    radial-gradient(1px 1px at 94% 82%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 6% 46%, rgba(200,210,255,.6), transparent 60%),
    radial-gradient(45% 40% at 85% 8%, rgba(185,166,255,.13), transparent 70%), radial-gradient(40% 35% at 5% 70%, rgba(255,176,138,.08), transparent 70%),
    var(--nwd-night);
  background-size: 420px 420px, 520px 520px, 610px 610px, 380px 380px, 470px 470px, 700px 700px, 560px 560px, 330px 330px, 100% 100%, 100% 100%, 100% 100%; }
.uk-section-default, .uk-section-muted, .tm-page { background: transparent; }
.uk-section-muted { background: linear-gradient(180deg, rgba(185,166,255,.04), rgba(255,176,138,.03)); }

/* Schrift */
h1, h2, h3, .uk-h1, .uk-h2, .uk-h3, .uk-heading-small, .uk-heading-medium { font-family: Fraunces, Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.025em; color: var(--nwd-ink); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--nwd-peach); }
.nwd-hero-title { font-size: clamp(44px, 7.4vw, 112px) !important; line-height: .92; font-weight: 540; }
.nwd-title { font-size: clamp(40px, 5.4vw, 84px) !important; line-height: .95; font-weight: 540; }
.uk-text-lead { font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: #e4dff5; }
.nwd-kicker, .nwd-kicker-dyn { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--nwd-muted); }
.nwd-kicker i, .nwd-kicker-dyn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nwd-sun); box-shadow: 0 0 12px var(--nwd-sun); }
.nwd-kicker-dyn p { margin: 0; }

/* Kopf */
.tm-header .uk-navbar-container { background: transparent; transition: background .3s, backdrop-filter .3s; }
.tm-header .uk-sticky-fixed .uk-navbar-container, .tm-header .uk-navbar-sticky { background: rgba(5,5,15,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--nwd-line); }
.tm-header-mobile .uk-sticky-fixed .uk-navbar-container, .tm-header-mobile .uk-navbar-container.uk-sticky-fixed, .tm-header-mobile .uk-sticky-fixed { background: rgba(5,5,15,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--nwd-line); }
@media (max-width: 639px) { .nwd-demo iframe { height: 72svh; } }
.uk-logo { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.015em; color: var(--nwd-ink); }
.uk-navbar-item.uk-logo { display: flex; align-items: center; }
.uk-navbar-nav > li > a.nwd-nav-cta { min-height: 0; height: 42px; align-self: center; margin-left: 12px; padding: 0 20px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: var(--nwd-ink); }
.uk-navbar-nav > li:has(> a.nwd-nav-cta) { display: flex; align-items: center; }
.uk-navbar-nav > li > a.nwd-nav-cta:hover { background: rgba(255,255,255,.08); }
.uk-navbar-nav > li > a { font-family: "Space Grotesk", system-ui, sans-serif; }

/* Logo: der Punkt ist ein Planet, der langsam wechselt */
.ldot { position: relative; display: inline-block; width: .6em; height: .6em; margin: 0 .09em 0 .11em; transform: translateY(.04em); }
.ldot i { position: absolute; inset: 0; border-radius: 50%; background: #111 var(--tex) 0 0 / auto 100% repeat-x; opacity: 0; transform: scale(.6);
  box-shadow: inset -.14em -.05em .16em rgba(0,0,0,.85), inset .03em .02em .05em rgba(255,255,255,.3), 0 0 .5em var(--glow, transparent);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); animation: nwd-roll 14s linear infinite; }
.ldot i.on { opacity: 1; transform: scale(1); }
.ldot i.ringed::after { content: ""; position: absolute; left: 50%; top: 50%; width: 210%; height: 52%; border-radius: 50%; border: 1px solid rgba(232,212,170,.8); transform: translate(-50%, -50%) rotate(-20deg); }
@keyframes nwd-roll { to { background-position: -1.2em 0; } }

/* Seitenkopf, Brotkrumen */
.nwd-crumbs .uk-breadcrumb > * > * { color: var(--nwd-muted); font-size: 13px; }
.nwd-crumbs .uk-breadcrumb > :last-child > * { color: var(--nwd-text); }

/* Knöpfe */
.uk-button { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; }
.uk-button-default { border: 1px solid rgba(255,255,255,.3); color: var(--nwd-ink); }
.uk-button-primary { box-shadow: 0 10px 30px -12px rgba(255,176,138,.6); }

/* Karten */
.nwd-cards .uk-card { border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px var(--nwd-line);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.nwd-cards .uk-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(255,176,138,.35), 0 30px 60px -30px rgba(255,140,90,.35); }
.nwd-cards .uk-card-media-top img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.nwd-cards .uk-card:hover .uk-card-media-top img { transform: scale(1.04); }
.nwd-cards .uk-card-title { color: var(--nwd-ink); }
.nwd-cards .uk-text-meta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--nwd-peach); }
.nwd-cards .uk-button-text { color: var(--nwd-ink); }

/* Experiment: Live-Demo und Text */
.nwd-demo { position: relative; margin: 0 0 48px; border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--nwd-line), 0 40px 80px -40px rgba(0,0,0,.8); background: #000; }
.nwd-demo iframe { display: block; width: 100%; height: min(78vh, 760px); border: 0; }
.nwd-body { font-size: 17px; }
.nwd-body h2 { font-size: clamp(26px, 2.4vw, 36px); margin: 48px 0 14px; }
.nwd-body ul { padding-left: 0; list-style: none; }
.nwd-legal .nwd-body h2 { font-size: clamp(22px, 2vw, 30px); margin: 40px 0 12px; }
.nwd-legal .nwd-body h3 { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0; margin: 26px 0 8px; }
.nwd-legal .nwd-body a { word-break: break-word; }
.nwd-body li { position: relative; padding-left: 26px; margin: 6px 0; }
.nwd-body li::before { content: "✦"; position: absolute; left: 0; color: var(--nwd-peach); font-size: 12px; top: .25em; }
.nwd-facts dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--nwd-muted); }
.nwd-facts dd { color: var(--nwd-ink); margin-top: 2px; }
.nwd-aside-col.uk-card { border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px var(--nwd-line); }

/* Logbuch */
.nwd-narrow { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.nwd-post-head .nwd-crumbs, .nwd-post-head .nwd-title { text-align: left; }
.nwd-kicker-dyn.nwd-narrow { display: flex; }
.nwd-post-image { max-width: 960px; margin-left: auto !important; margin-right: auto !important; }
.nwd-post-image img { border-radius: 22px; width: 100%; max-height: 520px; object-fit: cover; }

/* Abschluss */
.nwd-cta { position: relative; max-width: 860px; margin: 0 auto; text-align: center; padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px); border-radius: 32px;
  background: radial-gradient(70% 90% at 50% 0%, rgba(255,196,107,.18), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); box-shadow: inset 0 0 0 1px var(--nwd-line); }
.nwd-cta h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1; margin: 14px 0 18px; }
.nwd-cta h2 em { color: var(--nwd-sun); }
.nwd-cta .nwd-kicker { justify-content: center; }
.nwd-cta .nwd-buttons { margin: 26px 0 0; }
.nwd-cta .nwd-aside { margin: 26px auto 0; max-width: 560px; font-size: 14px; color: var(--nwd-muted); }
.nwd-cta .nwd-aside a { color: var(--nwd-ink); border-bottom: 1px solid rgba(255,255,255,.35); }

/* Fuß */
.nwd-footer { border-top: 1px solid var(--nwd-line); background: rgba(5,5,15,.6); }
.nwd-footer-logo { display: inline-flex; align-items: baseline; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 22px; color: var(--nwd-ink) !important; }
.nwd-footer h4 { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--nwd-muted); margin-bottom: 12px; }
.nwd-footer ul { list-style: none; padding: 0; margin: 0; } .nwd-footer li { margin: 6px 0; }
.nwd-footer a { color: var(--nwd-text); } .nwd-footer a:hover { color: var(--nwd-ink); }
.nwd-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--nwd-line); font-size: 13px; color: var(--nwd-muted); }

@media (prefers-reduced-motion: reduce) { .ldot i { animation: none; transition: none; } .nwd-cards .uk-card, .nwd-cards img { transition: none; } }

/* ======================================================================= Vollbild-Ansicht der Experimente (custom.js)
   Stil: YOOthemes „View Fullscreen“ + Bento Card von useLayouts. Dunkel, links die Liste, oben Umschalter, unten eine Pille. */
html.nwdv-open, html.nwdv-open body { overflow: hidden; }
.nwdv *, .nwdv *::before, .nwdv *::after { box-sizing: border-box; }
.nwdv { --v-bg: #121214; --v-side: #0b0b0d; --v-btn: #222226; --v-line: rgba(255,255,255,.09); --v-ink: #f4f4f5; --v-mut: #8e8e96; --v-side-w: 268px;
  position: fixed; inset: 0; z-index: 1100; display: flex; background: var(--v-bg); color: var(--v-ink); font: 400 14px/1.45 "Space Grotesk", system-ui, sans-serif;
  opacity: 0; transition: opacity .3s ease; }
.nwdv.in { opacity: 1; }
.nwdv[hidden] { display: none; }
.nwdv svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nwdv-ib { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: var(--v-btn); color: var(--v-ink); cursor: pointer; transition: background .2s, transform .2s; }
.nwdv-ib:hover { background: #2d2d33; }
.nwdv button:focus-visible, .nwdv a:focus-visible { outline: 2px solid var(--nwd-peach); outline-offset: 2px; }

/* Seitenleiste */
.nwdv-side { position: relative; z-index: 3; flex: none; width: 0; overflow: hidden; background: var(--v-side); transition: width .45s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.nwdv.side-on .nwdv-side { width: var(--v-side-w); }
.nwdv-side > * { width: var(--v-side-w); flex: none; }
.nwdv-brand { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 18px; }
.nwdv-logo { display: inline-flex; align-items: baseline; color: var(--v-ink) !important; font-weight: 600; font-size: 17px; letter-spacing: -.015em; text-decoration: none; }
.nwdv-brand .nwdv-ib { width: 34px; height: 34px; background: transparent; }
.nwdv-count { margin: 8px 18px 18px; padding: 0; font-size: 17px; line-height: 1.4; color: #bdbdc4; letter-spacing: -.01em; }
.nwdv-count b { display: inline-block; padding: 0 9px; border-radius: 999px; background: #fff; color: #111; font-weight: 600; }
.nwdv-list { flex: 1 !important; overflow-y: auto; padding: 4px 0 10px; scrollbar-width: thin; }
.nwdv-list a { display: flex; align-items: center; gap: 14px; padding: 6px 18px 6px 22px; color: var(--v-mut) !important; text-decoration: none; font-size: 14px; transition: color .2s; }
.nwdv-list a i { flex: none; width: 22px; height: 1px; background: rgba(255,255,255,.25); transition: width .3s cubic-bezier(.2,.8,.2,1), background .3s; }
.nwdv-list a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nwdv-list a:hover { color: var(--v-ink) !important; } .nwdv-list a:hover i { width: 30px; background: rgba(255,255,255,.6); }
.nwdv-list a[aria-current] { color: #fff !important; } .nwdv-list a[aria-current] i { width: 40px; background: var(--nwd-peach); }
.nwdv-all { margin: 0; padding: 14px 22px 18px; border-top: 1px solid var(--v-line); color: var(--v-mut) !important; text-decoration: none; font-size: 13px; }

/* Hauptbereich */
.nwdv-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nwdv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px 18px; }
.nwdv-l { display: flex; gap: 8px; } .nwdv.side-on .nwdv-l .nwdv-ib { visibility: hidden; }
.nwdv-c { display: flex; align-items: center; gap: 8px; }
.nwdv-pn { width: 36px; height: 36px; background: transparent; color: var(--v-mut); } .nwdv-pn:hover { color: var(--v-ink); }
.nwdv-switch { position: relative; }
.nwdv-switch > button { display: inline-flex; align-items: center; gap: 10px; height: 42px; max-width: min(46vw, 420px); padding: 0 14px 0 18px; border: 0; border-radius: 12px; background: var(--v-btn); color: var(--v-ink); cursor: pointer; font: 500 15px "Space Grotesk", sans-serif; }
.nwdv-switch > button b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nwdv-switch > button svg { width: 15px; height: 15px; color: var(--v-mut); }
.nwdv-menu { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 5; width: 320px; max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 14px;
  background: #1b1b1f; box-shadow: 0 20px 50px -14px rgba(0,0,0,.8), inset 0 0 0 1px var(--v-line); }
.nwdv-menu a { display: block; padding: 9px 12px; border-radius: 9px; color: #c9c9cf !important; text-decoration: none; }
.nwdv-menu a:hover { background: #26262b; color: #fff !important; } .nwdv-menu a[aria-current] { background: #2a2a30; color: #fff !important; }
.nwdv-r { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.nwdv-devs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--v-btn); }
.nwdv-devs button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: none; color: var(--v-mut); cursor: pointer; }
.nwdv-devs button[aria-pressed="true"] { background: #36363d; color: #fff; }
.nwdv-info { background: var(--nwd-peach); color: #1a0f08; } .nwdv-info:hover { background: #ffc7a8; }
.nwdv.info-on .nwdv-info { background: #fff; }

/* Bühne mit Gerät */
.nwdv-stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 4px 18px 84px; }
.nwdv-frame { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--v-line), 0 40px 80px -40px rgba(0,0,0,.9);
  transition: width .55s cubic-bezier(.2,.8,.2,1), border-radius .55s, box-shadow .55s; }
.nwdv[data-dev="tab"] .nwdv-frame { width: min(834px, 100%); border-radius: 28px; box-shadow: 0 0 0 10px #1f1f23, 0 0 0 11px #2c2c31, 0 40px 80px -30px rgba(0,0,0,.9); }
.nwdv[data-dev="phone"] .nwdv-frame { width: min(390px, 100%); border-radius: 40px; box-shadow: 0 0 0 10px #1f1f23, 0 0 0 11px #2c2c31, 0 40px 80px -30px rgba(0,0,0,.9); }
.nwdv[data-dev="tab"] .nwdv-stage, .nwdv[data-dev="phone"] .nwdv-stage { padding-top: 16px; padding-bottom: 96px; }
.nwdv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity .5s ease .1s; }
.nwdv.ready .nwdv-frame iframe { opacity: 1; }
.nwdv-load { position: absolute; inset: 0; display: grid; place-items: center; }
.nwdv-load i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); border-top-color: var(--nwd-peach); animation: nwdv-spin .9s linear infinite; }
@keyframes nwdv-spin { to { transform: rotate(360deg); } }
.nwdv.ready .nwdv-load { display: none; }

/* Pille unten */
.nwdv-pill { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100% - 36px); padding: 5px; border-radius: 14px;
  background: #1b1b1f; box-shadow: inset 0 0 0 1px var(--v-line), 0 18px 40px -16px rgba(0,0,0,.8); white-space: nowrap; }
.nwdv-pill .nwdv-k { padding: 0 10px 0 12px; font: 500 12px "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--v-mut); overflow: hidden; text-overflow: ellipsis; }
.nwdv-pill a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; background: #0b0b0d; color: #7ff2cf !important; text-decoration: none; font: 500 13px "Geist Mono", ui-monospace, monospace; }
.nwdv-pill a svg { width: 14px; height: 14px; }
.nwdv-pill a.nwdv-cta { background: var(--nwd-peach); color: #1a0f08 !important; font: 600 14px "Space Grotesk", sans-serif; }
/* Schalter „Animation abspielen“: nur bei „Bewegung reduzieren“ auf dem Gerät (custom.js) */
.nwdv-mo { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: 10px; background: #0b0b0d; color: var(--v-ink); cursor: pointer; font: 500 13px "Geist Mono", ui-monospace, monospace; }
.nwdv-mo:hover { background: #26262b; } .nwdv-mo svg { width: 14px; height: 14px; color: #7ff2cf; }

/* Steckbrief */
.nwdv-drawer { position: absolute; top: 10px; right: 10px; bottom: 10px; z-index: 6; width: min(460px, calc(100% - 20px)); overflow-y: auto; padding: 18px 24px 30px; border-radius: 20px;
  background: rgba(20,20,23,.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--v-line), -30px 0 80px -30px rgba(0,0,0,.9);
  transform: translateX(calc(100% + 20px)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.nwdv.info-on .nwdv-drawer { transform: none; }
.nwdv-dhead { display: flex; justify-content: space-between; align-items: center; }
.nwdv-dhead .nwdv-k { font: 500 12px "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--nwd-peach); }
.nwdv-dhead .nwdv-ib { width: 34px; height: 34px; }
.nwdv-drawer h2 { margin: 14px 0 10px; font: 540 32px/1.02 Fraunces, Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.025em; color: #fff; }
.nwdv-lead { margin: 0 0 18px; color: #d3d3da; font-size: 15px; line-height: 1.55; }
.nwdv-facts { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--v-line); }
.nwdv-facts .nwd-facts { margin: 0 !important; }
.nwdv-body { color: #cfcfd6; font-size: 14.5px; line-height: 1.6; }
.nwdv-body h2 { margin: 24px 0 8px; font: 600 17px "Space Grotesk", sans-serif; letter-spacing: 0; color: #fff; }
.nwdv-body ul { padding-left: 0; list-style: none; } .nwdv-body li { position: relative; padding-left: 22px; margin: 5px 0; }
.nwdv-body li::before { content: "✦"; position: absolute; left: 0; color: var(--nwd-peach); font-size: 11px; top: .25em; }
.nwdv-dfoot a { display: inline-flex; align-items: center; gap: 8px; color: var(--nwd-peach) !important; text-decoration: none; }

/* Handy und kleine Fenster */
@media (max-width: 1099px) {
  .nwdv-side { position: absolute; top: 0; bottom: 0; left: 0; box-shadow: 30px 0 80px -30px rgba(0,0,0,.9); }
  .nwdv.side-on .nwdv-l .nwdv-ib { visibility: visible; }
}
@media (max-width: 760px) {
  .nwdv-top { grid-template-columns: auto 1fr auto; padding: 10px; gap: 6px; }
  .nwdv-c { justify-content: center; min-width: 0; } .nwdv-pn { display: none; }
  .nwdv-switch, .nwdv-switch > button { min-width: 0; max-width: 100%; } .nwdv-switch > button { font-size: 14px; padding: 0 10px 0 12px; }
  .nwdv-devs { display: none; }
  .nwdv-ib { width: 38px; height: 38px; border-radius: 11px; }
  .nwdv-stage { padding: 0 8px 70px; } .nwdv-frame { border-radius: 16px; }
  .nwdv-pill { bottom: 10px; } .nwdv-pill .nwdv-k, .nwdv-pill a:not(.nwdv-cta) { display: none; }
  .nwdv-menu { width: min(320px, 92vw); }
}
@media (prefers-reduced-motion: reduce) { .nwdv, .nwdv-side, .nwdv-frame, .nwdv-drawer { transition: none; } .nwdv-load i { animation: none; } }

/* ======================================================================= Labor-Karten im Stil der Bento Card (useLayouts) */
.nwd-cards .uk-card { display: flex; flex-direction: column; min-height: 420px; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, #17161f 0%, #0f0e16 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -40px rgba(0,0,0,.9); }
.nwd-cards .uk-card:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(255,176,138,.35), 0 40px 80px -40px rgba(255,120,70,.35); }
.nwd-cards .uk-card-body { order: 1; padding: 26px 28px 18px; }
.nwd-cards .uk-card-body .el-meta { margin: 0 !important; font: 500 12px "Space Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9d97bd; }
.nwd-cards .uk-card-body .el-title { margin-top: 10px !important; font: 500 clamp(22px, 1.9vw, 28px)/1.18 "Space Grotesk", sans-serif; letter-spacing: -.02em; color: #fff; }
.nwd-cards .uk-card-body .el-content { margin-top: 10px !important; font-size: 14.5px; color: #a9a4c4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nwd-cards .uk-card-body > .uk-margin-medium-top { display: none; }
.nwd-cards .uk-card-media-top { order: 2; position: relative; margin: auto -1px -1px 16%; padding-top: 30px; border-radius: 14px 0 0 0; background: #08080c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), -20px -20px 60px -30px rgba(0,0,0,.8); transform: translate(18px, 22px); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.nwd-cards .uk-card-media-top::before { content: ""; position: absolute; left: 14px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #3a3a44; box-shadow: 14px 0 0 #3a3a44, 28px 0 0 #3a3a44; }
.nwd-cards .uk-card-media-top::after { content: ""; position: absolute; left: 30%; right: 30%; top: 9px; height: 12px; border-radius: 6px; background: rgba(255,255,255,.05); }
.nwd-cards .uk-card-media-top img { display: block; width: 100%; height: auto; border-top: 1px solid rgba(255,255,255,.08); transform: none !important; }
.nwd-cards .uk-card:hover .uk-card-media-top { transform: translate(4px, 4px) rotate(-1deg); }
.nwd-cards-log .uk-card-media-top { margin-left: 22%; }
@media (max-width: 640px) { .nwd-cards .uk-card { min-height: 0; } .nwd-cards .uk-card-media-top { margin-left: 10%; } }
@media (prefers-reduced-motion: reduce) { .nwd-cards .uk-card-media-top { transition: none; } }