/* ============================================================
   RStudios – Aufbau nach Logsy, in den eigenen Farben
   Grau und Weiß – keine Akzentfarbe, Farbe nur für Statusangaben.
   Ruhig gehalten: keine Leuchtverläufe, keine schrägen Karten,
   keine Großbuchstaben-Etiketten, keine Schmuck-Nummern.
   Liegt über styles.css und belegt deren Variablen neu.
   ============================================================ */

:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f3;
  --ink: #18181b;
  --text: #3f3f46;
  --muted: #63636c;
  --acc: #27272a;    /* Hauptknopf hell: Graphit */
  --acc-2: #3f3f46;
  --acc-3: #18181b;
  --acc-fg: #ffffff;
  --acc-ink: #27272a;    /* Links und Häkchen auf hell */
  --acc-soft: #e4e4e7;    /* aktive Tabs */
  --lime: #a1a1aa;
  --card: #ffffff;
  --card-2: #f7f7f8;
  --card-3: #e4e4e7;
  --border: rgba(24, 24, 27, .1);
  --border-2: rgba(24, 24, 27, .19);
  --term: #161618;
  --term-2: #1d1d20;
  --term-line: rgba(255, 255, 255, .07);
  --lift:     0 1px 2px rgba(23, 27, 29, .05), 0 10px 30px -18px rgba(23, 27, 29, .25);
  --lift-big: 0 1px 2px rgba(23, 27, 29, .05), 0 24px 60px -30px rgba(23, 27, 29, .35);

  --alu: var(--bg); --alu-light: var(--card); --alu-deep: var(--card-3);
  --graphite: var(--ink); --graphite-2: #3f3f46;
  --ink-muted: var(--text); --ink-faint: var(--muted);
  --led: #2f9e57; --led-amber: #c98c0c; --led-off: #a1a1aa;
  --surface: var(--card); --surface-2: var(--card-2);
  --line: var(--border); --line-strong: var(--border-2);
  --wash: rgba(24, 24, 27, .05); --tray: rgba(24, 24, 27, .04);
  --top-bg: rgba(242, 242, 243, .9);
  --light-a: transparent; --light-b: transparent;
  --solid-bg: var(--acc); --solid-bg-hover: var(--acc-2); --solid-bg-active: var(--acc-3); --solid-fg: var(--acc-fg);
  --shadow-sm: var(--lift); --float-shadow: var(--lift-big);
  --inset-bg: var(--card-2); --inset-lo: transparent; --inset-hi: transparent; --rivet: transparent; --engrave: var(--border);

  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px;
  --sec: clamp(5rem, 10vw, 8rem);
  --wrap: 1180px;
  /* Bühnen-Hintergrund (design.js) */
  --fx-star: 40, 42, 48; --fx-star-a: .7; --fx-beam: 255, 255, 255; --fx-beam-a: .75;
}

:root[data-theme="dark"] {
  --lime: #d4d4d8;
  color-scheme: dark;
  --bg: #141416;
  --ink: #f4f4f5;
  --text: #c4c4c9;
  --muted: #9a9aa2;
  --acc: #f4f4f5;    /* Hauptknopf dunkel: Weiß */
  --acc-2: #ffffff;
  --acc-3: #d4d4d8;
  --acc-fg: #18181b;
  --acc-ink: #f4f4f5;
  --acc-soft: #2c2c31;
  --card: #1b1b1e;
  --card-2: #202023;
  --card-3: #2c2c31;
  --border: rgba(244, 244, 245, .1);
  --border-2: rgba(244, 244, 245, .2);
  --term: #0e0e10;
  --term-2: #151517;
  --lift:     0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -20px rgba(0, 0, 0, .7);
  --lift-big: 0 1px 2px rgba(0, 0, 0, .3), 0 28px 70px -30px rgba(0, 0, 0, .8);

  --alu: var(--bg); --alu-light: var(--card); --alu-deep: var(--card-3);
  --graphite: var(--ink); --graphite-2: #d4d4d8;
  --ink-muted: var(--text); --ink-faint: var(--muted);
  --led: #3fc97a; --led-amber: #e8b23a; --led-off: #71717a;
  --surface: var(--card); --surface-2: var(--card-2);
  --line: var(--border); --line-strong: var(--border-2);
  --wash: rgba(244, 244, 245, .06); --tray: rgba(244, 244, 245, .04);
  --top-bg: rgba(20, 20, 22, .88);
  --light-a: transparent; --light-b: transparent;
  --solid-bg: var(--acc); --solid-bg-hover: var(--acc-2); --solid-bg-active: var(--acc-3); --solid-fg: var(--acc-fg);
  --shadow-sm: var(--lift); --float-shadow: var(--lift-big);
  --inset-bg: var(--card-2); --inset-lo: transparent; --inset-hi: transparent; --rivet: transparent; --engrave: var(--border);
  --fx-star: 228, 230, 236; --fx-star-a: .85; --fx-beam: 255, 255, 255; --fx-beam-a: .09;
}

/* Sprachen mit eigener Schrift: Latein in Plus Jakarta, der Rest aus dem System */
html:lang(ja) { --font-body: 'Plus Jakarta Sans', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', sans-serif; --font-display: var(--font-body); }
html:lang(ko) { --font-body: 'Plus Jakarta Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; --font-display: var(--font-body); }
html:lang(zh) { --font-body: 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; --font-display: var(--font-body); }
html:lang(ar) { --font-body: 'Plus Jakarta Sans', 'Segoe UI', 'Noto Sans Arabic', Tahoma, system-ui, sans-serif; --font-display: var(--font-body); }
html:lang(hi) { --font-body: 'Plus Jakarta Sans', 'Segoe UI', 'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif; --font-display: var(--font-body); }
html:lang(el), html:lang(ru), html:lang(uk), html:lang(bg) { --font-body: 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-display: var(--font-body); }

/* ---------- Grundfläche ---------- */
body { background-color: var(--bg); background-image: none; color: var(--text); font-size: 1.04rem; line-height: 1.6; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline-color: var(--ink); }
.light { display: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 750; letter-spacing: -.03em; }
.mono { font-family: var(--font-mono); }
main > section:not(.hero) { padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.services, .tech, .work, .faq, .contact, .studio { border-top: 0; }

.sechead { max-width: 44rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }
.sechead h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.sechead p { margin-top: 1rem; font-size: clamp(1.03rem, 1.3vw, 1.15rem); color: var(--text); max-width: 40rem; text-wrap: pretty; }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead--center p { margin-inline: auto; }

/* ---------- Knöpfe ---------- */
.btn { border-radius: var(--r-md); font-weight: 600; transition: background var(--fast), color var(--fast), border-color var(--fast); }
.btn--solid { box-shadow: none; }
.btn--plate { background: var(--card); border-color: var(--border-2); color: var(--ink); }
.btn--plate:hover { background: var(--card-2); }
.link-arrow { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: .25em; }
.link-arrow:hover { color: var(--ink); text-decoration-color: currentColor; }
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(2px); }

/* ---------- Kopfzeile ---------- */
.top { min-height: 70px; padding-block: .6rem; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.top.is-scrolled { background: var(--top-bg); box-shadow: none; border-bottom-color: var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { font-weight: 750; font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink); }
.brand img { width: 32px; }
.top__nav { gap: .1rem; }
.top__nav a { font-size: .92rem; font-weight: 500; color: var(--text); padding: 0 .7rem; }
.top__nav a:hover { background: transparent; color: var(--ink); }
.top__nav a.is-active { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.top__cta { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .95rem; border-radius: var(--r-md); font-weight: 600; font-size: .9rem; white-space: nowrap; background: var(--acc); color: var(--acc-fg); transition: background var(--fast); }
.top__cta:hover { background: var(--acc-2); }
.top__cta svg { display: none; }
.tool, .theme, .lang__btn { color: var(--muted); border-radius: 8px; }
.tool:hover, .theme:hover, .lang__btn:hover { color: var(--ink); background: var(--wash); }
.drawer { background: var(--bg); }
.drawer__links a { font-family: var(--font-display); font-weight: 750; letter-spacing: -.02em; color: var(--ink); }
.lang__menu { background: var(--card); border-color: var(--border); box-shadow: var(--lift-big); }

/* ---------- Start ---------- */
.hero { display: block; min-height: 0; text-align: center; overflow: hidden; padding: clamp(7.5rem, 12vw, 9rem) var(--gutter) 1rem; position: relative; }
.hero::before, .hero::after { content: none; }
.hero__copy { max-width: 58rem; margin: 0 auto; }
.hero h1 { margin: 0 auto; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 750; max-width: 14ch; text-wrap: balance; }
.hero__lead { margin: 1.5rem auto 0; max-width: 38rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--text); }
.hero__actions { justify-content: center; align-items: center; gap: .6rem 1.3rem; margin-top: 2rem; }
.hero__actions .btn { min-height: 50px; padding-inline: 1.35rem; }

/* ---------- Schaubild ---------- */
.stagehero { position: relative; max-width: 1240px; height: 33rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: left; }
.mock { position: absolute; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--lift-big); color: var(--text); font-size: .8rem; line-height: 1.45; }
.mock code, .mono { font-family: var(--font-mono); }
.mock--panel { left: 50%; top: 0; width: min(54%, 680px); transform: translateX(-50%); overflow: hidden; z-index: 2; }
.mock__bar { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mock__bar b { color: var(--ink); font-size: .92rem; font-weight: 700; }
.mock__burger { display: grid; gap: 3px; } .mock__burger i { display: block; width: 13px; height: 1.6px; background: var(--muted); border-radius: 2px; }
.mock__tab { padding: .22rem .6rem; border-radius: 6px; color: var(--muted); }
.mock__tab.is-on { background: var(--card-3); color: var(--ink); font-weight: 600; }
.mock__tab em { font-style: normal; margin-left: .25rem; color: var(--muted); }
.mock__inst { margin-left: auto; color: var(--muted); font-size: .72rem; }
.mock__inst code { color: var(--ink); }
.mock__search { display: flex; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--border); }
.mock__search > span:first-child { flex: 1; padding: .38rem .7rem; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); }
.mock__btn { padding: .38rem .65rem; border: 1px solid var(--border); border-radius: 7px; color: var(--text); white-space: nowrap; }
.mock__row { display: grid; grid-template-columns: 1.35fr 1.4fr .75fr 1.15fr .8fr; align-items: center; gap: .6rem; padding: .62rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mock__row > * { overflow: hidden; text-overflow: ellipsis; }
.mock__row--head { color: var(--muted); font-size: .74rem; padding-block: .5rem; }
.mock__row small { color: var(--muted); font-size: .72rem; }
.mock__name { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 600; }
.mock__ic { flex: 0 0 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.mock__ic--fivem { background: var(--muted); }
.mock__ic--web { background: var(--card-3); box-shadow: inset 0 0 0 1px var(--border-2); }
.t-red { color: #b4372f; } .t-green { color: #2f7d45; } .t-mute { color: var(--muted); }
:root[data-theme="dark"] .t-red { color: #f0897f; } :root[data-theme="dark"] .t-green { color: #7fd69a; }
/* Etiketten: neutral; Farbe nur für den Stand */
.chip { display: inline-block; padding: .12rem .45rem; border-radius: 5px; font: 500 .7rem/1.35 var(--font-body); background: var(--card-2); color: var(--text); border: 1px solid var(--border); }
.chip--amber { background: #f6ecd2; color: #7a5506; border-color: transparent; }
.chip--green { background: #e1edd8; color: #2b5a2f; border-color: transparent; }
.chip--lime  { background: var(--acc-soft); color: var(--ink); border-color: transparent; }
:root[data-theme="dark"] .chip--amber { background: #33290f; color: #f0cd78; }
:root[data-theme="dark"] .chip--green { background: #18301f; color: #9fe0b2; }
.mock__row.is-open { background: var(--card-2); }
.mock__detail { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; margin: 0 .8rem .7rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 9px; background: var(--card); }
.mock__detail.is-swap > * { animation: swapIn .35s var(--ease) both; }
@keyframes swapIn { from { opacity: 0; } }
.mock__lbl { font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.mock__side .mock__lbl:not(:first-child) { margin-top: .6rem; }
.mock__diffbox ul { list-style: none; display: grid; gap: 3px; font: 500 .72rem/1.5 var(--font-mono); }
.mock__diffbox li { padding: .15rem .5rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-red { background: #f6e3df; color: #9b2f27; } .l-green { background: #e3eed9; color: #2b5a2f; }
.l-amber { background: #f6ecd2; color: #7a5506; } .l-mute { color: var(--muted); }
:root[data-theme="dark"] .l-red { background: #32191a; color: #f0a59c; }
:root[data-theme="dark"] .l-green { background: #18301f; color: #9fe0b2; }
:root[data-theme="dark"] .l-amber { background: #33290f; color: #f0cd78; }
.mock__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.mbtn { display: inline-flex; align-items: center; padding: .36rem .75rem; border-radius: 6px; border: 1px solid var(--border-2); background: var(--card); color: var(--ink); font-weight: 600; font-size: .76rem; }
.mbtn--solid { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }
.mbtn--green { background: #248046; border-color: #248046; color: #fff; }   /* Discord-Grün */
.mock__note { margin-left: auto; color: var(--muted); font-size: .72rem; }

/* Seitenkarten: gerade, ohne Schweben */
.mock--float { z-index: 3; padding: .85rem 1rem; }
.mock__cap { font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: .55rem; }
.mock--stack { left: 1%; top: 2.2rem; width: 15.5rem; }
.sw { display: grid; grid-template-columns: 30px 5.2rem 1fr auto; align-items: center; gap: .55rem; padding: .22rem 0; }
.sw b { font: 500 .76rem/1 var(--font-body); color: var(--ink); }
.sw small { font-size: .7rem; color: var(--muted); }
.sw__t { width: 28px; height: 16px; border-radius: 999px; background: var(--card-3); position: relative; }
.sw__t::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sw__t--on { background: var(--ink); }
.sw__t--on::after { left: 14px; }
:root[data-theme="dark"] .sw__t--on { background: var(--ink); }
:root[data-theme="dark"] .sw__t--on::after { background: #18181b; }
.sw--off b { color: var(--muted); text-decoration: line-through; }
.bar { display: block; height: 4px; border-radius: 4px; background: var(--card-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
:root[data-theme="dark"] .bar i { background: var(--ink); }

.mock--chat { left: 4%; top: 16.5rem; width: 15.5rem; }
.mock__quote { padding: .6rem .7rem; border-radius: 8px; background: var(--card-2); color: var(--ink); font-size: .82rem; }
.mock__quote b { font-weight: 700; }
.mock__call { margin-top: .55rem; font-size: .72rem; color: var(--ink); }
.mock__wait { margin-top: .3rem; font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.spin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--border-2); border-top-color: var(--ink); animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.mock--bots { right: 1%; top: 1.6rem; width: 15.5rem; padding: 0; background: transparent; border: 0; box-shadow: none; display: grid; gap: .5rem; }
.bot { padding: .65rem .8rem; border-radius: 10px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--lift); }
.bot p { display: flex; align-items: center; gap: .4rem; font-size: .78rem; }
.bot p b { color: var(--ink); font-weight: 700; }
.bot p code { font-size: .68rem; color: var(--muted); }
.bot p span { margin-left: auto; font-size: .7rem; color: var(--muted); }
.bot .bar { margin: .45rem 0 .3rem; }
.bot small { font-size: .7rem; color: var(--muted); }
.bot .led { width: 7px; height: 7px; }

.mock--dc { right: 2.5%; top: 19.6rem; width: 15rem; background: #313338; border-color: #3f4147; color: #dbdee1; }
.dc__head { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.dc__head b { color: #f2f3f5; font-size: .8rem; }
.dc__head small { margin-left: auto; font-size: .66rem; color: #949ba4; }
.dc__av { width: 20px; height: 20px; border-radius: 50%; background: url("assets/logo-96.png?v=20260923") center / 82% no-repeat, #1e1f22; }
.dc__app { padding: 0 .3rem; border-radius: 3px; background: #5865f2; color: #fff; font-size: .58rem; font-weight: 700; }
.mock--dc > p:nth-child(2) b { color: #f2f3f5; }
.mock--dc .mbtn { background: #4e5058; border-color: #4e5058; color: #fff; }
.mock--dc .mbtn--green { background: #248046; border-color: #248046; }
.dc__btns { display: flex; gap: .4rem; margin-top: .6rem; }

/* Phasen-Leiste */
.phases { display: flex; width: fit-content; max-width: 100%; margin: 1.5rem auto 0; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); overflow-x: auto; scrollbar-width: none; }
.phases span { padding: .42rem .85rem; border-radius: 7px; font-size: .82rem; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; transition: background var(--fast), color var(--fast); }
.phases span:hover { color: var(--ink); background: var(--wash); }
.phases span.is-on { background: var(--acc); color: var(--acc-fg); }

/* ---------- Plattform-Leiste ---------- */
.strip { padding-top: clamp(3.5rem, 6vw, 4.5rem); padding-bottom: 1rem; text-align: center; }
.strip__cap { font-size: .9rem; color: var(--muted); }
.strip__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem clamp(1.3rem, 3.2vw, 2.4rem); margin-top: .8rem; }
.strip__list li { font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.15rem); letter-spacing: -.01em; color: var(--muted); opacity: .8; }

/* ---------- Ablauf ---------- */
.flowcards { padding-top: var(--sec); }
.cards4 { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ccard { display: flex; flex-direction: column; padding: 1.3rem 1.3rem 1.5rem; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); }
.ccard img { display: block; width: 78%; max-width: 220px; height: auto; margin: 0 auto 1rem; }
.ccard h3 { font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.ccard p { font-size: .95rem; color: var(--text); text-wrap: pretty; }

/* ---------- Leistungen ---------- */
.services { padding-top: var(--sec); padding-bottom: 0; }
.service { padding: clamp(1.4rem, 3vw, 2.3rem); margin-bottom: 1.1rem; border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: var(--r-xl); background: var(--card); box-shadow: none; gap: clamp(1.5rem, 3.5vw, 3rem); }
.service__clay { display: block; width: 140px; height: auto; margin: -.4rem 0 .6rem -.6rem; }
.service__text h3 { font-size: clamp(1.55rem, 2.5vw, 2.05rem); letter-spacing: -.035em; line-height: 1.12; }
.service__text > p { font-size: 1.03rem; }
.perks svg { color: var(--acc-ink); }
.perks li { font-size: .97rem; color: var(--text); }
.service__stack { border-top: 1px solid var(--border); padding-top: 1.1rem; }
.console.plate { background: var(--card-2); border: 1px solid var(--border); box-shadow: none; border-radius: 14px; padding: .6rem; }
.console__bar { flex-wrap: nowrap; }
.console__bar .seg { flex: 0 1 auto; }
.console__screen { background: var(--term); border-radius: 10px; }
.console__foot { background: var(--term-2); border-top-color: var(--term-line); }
.console__tag { font-size: .82rem; color: var(--muted); }
.console__meta b { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.seg { border: 1px solid var(--border); background: var(--card); border-radius: var(--r-md); padding: 3px; }
.seg button { border-radius: 7px; font-weight: 600; font-size: .83rem; color: var(--text); }
.seg button:hover { background: var(--wash); color: var(--ink); }
.seg button.is-active { background: var(--acc); color: var(--acc-fg); }

/* ---------- Technik ---------- */
.tech { padding-top: var(--sec); }
.tech__groups { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--border); }
.tech__head { color: var(--ink); font-weight: 700; border-bottom-color: var(--border); }
.tech__icon { background: var(--card-2); color: var(--ink); box-shadow: none; border-radius: 8px; }
.tech__bar { background: var(--card-3); height: 5px; border-radius: 5px; }
.tech__bar i { background: var(--ink); border-radius: 5px; }
:root[data-theme="dark"] .tech__bar i { background: var(--ink); }
.tech__name { color: var(--ink); font-weight: 600; }

/* ---------- Projekte ---------- */
.work { padding-top: var(--sec); padding-bottom: 0; }
.case { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: none; padding: .8rem; transition: border-color var(--dur); }
.case:hover { transform: none; box-shadow: none; border-color: var(--border-2); }
.case__shot { border-radius: 12px; }
.case__body h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: -.035em; }
.case__kind { font-size: .85rem; color: var(--muted); }
.case__facts dt { color: var(--muted); }
.case__facts dd { color: var(--ink); }
.chips li { border-radius: 6px; background: var(--card-2); border: 1px solid var(--border); color: var(--ink); }
.pgroup__title { color: var(--ink); font-weight: 700; }
.plist__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.plist__item { border-color: var(--border); }

/* ---------- Projekt-Präsentation (nach reezy.dev) ----------
   Breite Bildschirme: die Bühne bleibt stehen, Scrollen schaltet die Projekte durch,
   unten zeigt die Leiste, wo man ist. Schmal: Projekte untereinander. */
.cases { display: block; }
.show__item { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.show__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.show__rule { width: 2.2rem; height: 1px; background: var(--border-2); }
.show__state .pstatus { font-size: .8rem; }
.show__text h3 { margin-top: 1rem; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.045em; }
.show__text h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.show__lead { margin-top: .9rem; font-size: 1.12rem; color: var(--ink); text-wrap: pretty; max-width: 34rem; }
.show__scope { margin-top: .9rem; font-size: .94rem; color: var(--text); text-wrap: pretty; max-width: 34rem; }
.show__stack { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--border); font: 500 .76rem/1.5 var(--font-mono); color: var(--muted); max-width: 34rem; }
.show__links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-top: 1.1rem; }
.show__media { perspective: 1600px; }
.show__card {
  display: block; width: 100%; padding: 0; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; cursor: zoom-in;
  background: var(--card); box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 40px 80px -30px rgba(0, 0, 0, .45);
  transform: rotateY(calc(-16deg + var(--f, .5) * 8deg)) rotateX(4deg) rotateZ(1.2deg); transform-origin: 40% 50%;
  transition: box-shadow var(--dur);
}
.show__card:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 50px 90px -30px rgba(0, 0, 0, .55); }
.show__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.show__card--bot { background: #313338; border-color: #3f4147; padding: 1rem 1.2rem 1.3rem; text-align: left; }
.show__card--bot img { aspect-ratio: auto; object-fit: initial; margin-left: 2.6rem; width: calc(100% - 2.6rem); border-radius: 8px; }
.show__dc { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; font-size: .85rem; color: #f2f3f5; }
.show__dc i { width: 2.1rem; height: 2.1rem; margin-right: .5rem; border-radius: 50%; background: url("assets/logo-96.png?v=20260923") center / 78% no-repeat, #1e1f22; }
.show__dc b { font-weight: 600; }
.show__dc em { padding: 0 .3rem; border-radius: 3px; background: #5865f2; color: #fff; font: 700 .6rem/1.5 var(--font-body); }
.show__dc small { font-size: .72rem; color: #949ba4; }
.show__bar { display: flex; align-items: center; gap: 5px; padding: .5rem .7rem; border-bottom: 1px solid var(--border); background: var(--card-2); }
.show__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--card-3); }
.show__bar span { margin-left: .6rem; padding: .1rem .7rem; border-radius: 5px; background: var(--card); font-size: .7rem; color: var(--muted); }
.show { position: relative; }
.show__anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.show__index { display: none; }

@media (min-width: 901px) {
  .show { height: calc(var(--n) * 75svh + 100svh); }
  .show__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 5.5rem 0 1.6rem; }
  .show__stage { position: relative; }
  .show__item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
  .show__item.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
  .show__item .show__text > * { transform: translateY(10px); transition: transform .55s var(--ease); }
  .show__item.is-on .show__text > * { transform: none; }
  .show__index { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .9rem; }
  .show__tab { display: block; padding: 0 0 .2rem; border: 0; background: none; cursor: pointer; text-align: left; font: 500 .74rem/1.3 var(--font-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .show__tab i { display: block; height: 2px; margin-bottom: .6rem; background: var(--border); border-radius: 2px; overflow: hidden; }
  .show__tab i b { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
  .show__tab span { font-family: var(--font-mono); margin-right: .3rem; }
  .show__tab:hover, .show__tab.is-on { color: var(--ink); }
}
@media (max-width: 900px) {
  .show__stage { display: grid; gap: 3.5rem; }
  .show__item { grid-template-columns: 1fr; gap: 1.6rem; }
  .show__media { order: -1; }
  .show__card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .show__card { transform: rotateY(-10deg) rotateX(3deg); }
  .show__item, .show__item .show__text > * { transition: none !important; transform: none; }
}

/* Leistungen in der Bühne: Demo-Konsole gerade (sie ist bedienbar), Text wie bei den Projekten */
.show__text.service__text h3 { margin-top: 1rem; margin-bottom: 0; font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.04; letter-spacing: -.045em; }
.show__text.service__text > p:not(.show__meta) { margin-top: .9rem; font-size: 1.08rem; color: var(--ink); max-width: 34rem; }
.show__text .perks { margin-top: 1.1rem; gap: .5rem; }
.show__text .perks li { font-size: .94rem; }
.show__text .service__stack { max-width: 34rem; }
.show__media--live .console { width: 100%; }
.work__more { margin: clamp(4rem, 8vw, 6rem) 0 1.5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.035em; }
.show__group { grid-row: 1; font-size: .78rem; font-weight: 600; color: var(--ink); padding-bottom: .5rem; }
.show__tab { grid-row: 2; }
@media (min-width: 901px) {
  .show__index { grid-template-rows: auto auto; column-gap: .7rem; }
  .show__item--svc { align-items: center; }
  .show__item--svc .show__media { justify-self: end; width: 100%; max-width: min(100%, 620px); transform: scale(var(--fit, 1)); transform-origin: right center; }
  .show__item--svc .gallery__caption .console__hint { display: none; }   /* Platz: der Hinweis steht auch auf der Projektseite */
}
@media (max-width: 900px) {
  .show__item--svc .show__media { order: 0; }
}

/* Bühnen-Hintergrund: Canvas über die volle Fensterbreite hinter der stehenden Bühne */
.show__pin { isolation: isolate; }
.show__fx { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); pointer-events: none; }
@media (max-width: 900px) { .show__fx { display: none; } }

/* ---------- Studio ---------- */
.studio { display: block; padding-top: var(--sec); padding-bottom: 0; }
.studio__panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding: clamp(1.6rem, 4vw, 3rem); border-radius: 22px; background: var(--card); border: 1px solid var(--border); }
.studio h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.05; letter-spacing: -.04em; }
.studio__text p { font-size: 1.08rem; color: var(--text); margin-top: 1.2rem; }
.studio__text p:last-child { border: 0; padding: 0; }
.studio__card { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; margin-top: 2rem; padding: .9rem 1.1rem .9rem .7rem; border-radius: 14px; background: var(--card-2); border: 1px solid var(--border); }
.studio__card img { width: 96px; height: auto; }
.studio__card p { margin: 0 !important; font-size: .95rem !important; }
.facts { display: grid; }
.facts__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border-2); }
.facts__row:last-child { border-bottom: 1px solid var(--border-2); }
.facts dt { display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.facts dt svg { color: var(--acc-ink); transform: translateY(2px); }
.facts dd { color: var(--text); font-size: .95rem; }
.facts dd b { color: var(--ink); font-weight: 750; margin-right: .25rem; }

/* ---------- Fragen ---------- */
.faq { display: block; padding-top: var(--sec); padding-bottom: 0; }
.faq__list { max-width: 50rem; margin: 0 auto; display: grid; gap: .5rem; }
.faq__item, .faq__item:last-child { border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.faq__item[open] { border-color: var(--border-2); }
.faq__item summary { padding: 1rem 1.25rem; font-weight: 650; color: var(--ink); }
.faq__item summary:hover { color: var(--ink); background: var(--wash); border-radius: 12px; }
.faq__item p { padding: 0 1.25rem 1.15rem; color: var(--text); }

/* ---------- Kontakt ---------- */
.contact { padding-top: var(--sec); padding-bottom: var(--sec); background: none; }
.contact::before { content: none; }
.contact__inner { display: block; max-width: 46rem; text-align: center; }
.contact__badge { height: 240px; margin: 0 auto .8rem; max-width: 320px; }
.contact__badge .hero__badge-fallback { width: auto; max-width: 175px; max-height: 200px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .25)); }
.contact h2 { margin: 0 auto; max-width: 16ch; font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.06; letter-spacing: -.04em; }
.contact__sub { margin: 1rem auto 0; font-size: 1.1rem; }
.contact__path { margin-top: 2rem; padding: 0; background: none; border: 0; box-shadow: none; }
.contact__actions { align-items: center; }
.contact__actions > .btn { min-height: 52px; padding-inline: 1.5rem; }
.contact__mail { justify-content: center; }
.contact__brief { margin-top: 2rem; padding: 1.2rem 1.4rem; text-align: left; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.contact__brief p { color: var(--ink); font-weight: 700; }

/* ---------- Fußzeile, Dialoge ---------- */
.foot { background: none; border-top: 1px solid var(--border); color: var(--muted); padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.demo__box.plate { background: var(--card-2); }

/* ---------- Breiten ---------- */
@media (max-width: 1180px) {
  .mock--panel { width: min(60%, 640px); }
  .mock--stack, .mock--chat { left: -1%; }
  .mock--bots, .mock--dc { right: -1%; }
}
@media (max-width: 1000px) {
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio__panel { grid-template-columns: 1fr; }
  .stagehero { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .mock { position: relative; inset: auto; }
  .mock--panel { grid-column: 1 / -1; width: 100%; transform: none; left: auto; }
  .mock--float { width: auto; }
  .mock--bots { display: none; }
  .mock__col-hide { display: none; }
  .mock__row { grid-template-columns: 1.3fr 1.4fr .8fr .8fr; }
}
@media (max-width: 760px) {
  .top__cta { display: none; }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3.3rem); }
  .stagehero { grid-template-columns: 1fr; }
  .mock--stack { display: none; }
  .mock__bar { gap: .6rem; padding: .6rem .8rem; }
  .mock__inst, .mock__tab--hide, .mock__row--head { display: none; }
  .mock__search { padding: .5rem .8rem; }
  .mock__row { grid-template-columns: minmax(0, 1fr) auto auto; padding: .6rem .8rem; }
  .mock__row > :nth-child(2) { display: none; }
  .mock__detail { grid-template-columns: 1fr; margin: 0 .6rem .6rem; }
  .mock__note { display: none; }
  .phases { justify-content: flex-start; }
  .service { padding: 1.2rem; border-radius: 16px; }
  .service__clay { width: 110px; }
  .facts__row { grid-template-columns: 1fr; gap: .25rem; }
}
@media (max-width: 560px) {
  .cards4 { grid-template-columns: 1fr; }
  .ccard img { width: 58%; }
  .studio__panel { padding: 1.3rem; border-radius: 18px; }
  .studio__card { grid-template-columns: 72px 1fr; }
  .studio__card img { width: 72px; }
  .contact__badge { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .spin, .mock__detail.is-swap > * { animation: none !important; }
}