/* ==========================================================================
   Martin Do – Design System
   Dark, ruhig, präzise. Eine Schrift (Satoshi), eine Akzentfarbe.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* RGB-Kanäle für transparente Varianten */
  --ink: 255 255 255;
  --bg-rgb: 11 11 12;
  --surface-rgb: 22 22 24;
  --gradient-text: linear-gradient(100deg, #ffc2bb 0%, #ff7a6e 55%, var(--accent) 100%);
  --logo-filter: grayscale(1) brightness(1.6);
  --mono-logo: none; /* weißes Markenlogo */

  /* Farben */
  --bg: #0b0b0c;
  --bg-raised: #111113;
  --surface: #161618;
  --surface-2: #1d1d20;
  --border: rgb(var(--ink) / 0.08);
  --border-strong: rgb(var(--ink) / 0.16);

  --text: #f4f4f3;
  --text-muted: #a8a8ad;   /* 8.2:1 auf --bg */
  --text-subtle: #85858c;  /* 5.3:1 auf --bg */

  --accent: #ed5145;        /* Markenfarbe */
  --accent-strong: #d63a2e; /* Buttons: 4.6:1 mit Weiß */
  --accent-text: #ff7a6e;   /* Akzent als Text auf dunkel */
  --accent-soft: rgb(237 81 69 / 0.12);
  --accent-glow: rgb(237 81 69 / 0.35);
  --accent-rgb: 237 81 69;
  --accent-2: #8b7bff;      /* Tech-Akzent: Diagramme, Verläufe */
  --accent-2-rgb: 139 123 255;
  --success: #22c55e;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Typografie */
  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem);

  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 75rem;

  /* Form */
  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow: 0 1px 0 rgb(var(--ink) / 0.04) inset, 0 20px 40px -20px rgb(0 0 0 / 0.6);
  --shadow-pop: 0 30px 70px -20px rgb(0 0 0 / 0.85);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 4.25rem;
}

/* ---------- Light Theme ----------
   Gilt bei expliziter Wahl (data-theme="light") oder, ohne Wahl, wenn das System hell ist. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { 
    color-scheme: light;
    --ink: 12 12 14;
    --bg-rgb: 250 250 249;
    --surface-rgb: 255 255 255;
    --bg: #fafaf9;
    --bg-raised: #f2f2f0;
    --surface: #ffffff;
    --surface-2: #f4f4f2;
    --border: rgb(12 12 14 / 0.09);
    --border-strong: rgb(12 12 14 / 0.17);
    --text: #111113;
    --text-muted: #53535a;
    --text-subtle: #6a6a72;
    --accent-text: #c2352a;
    --accent-soft: rgb(237 81 69 / 0.1);
    --accent-glow: rgb(214 58 46 / 0.3);
    --accent-2: #6a55f0;
    --accent-2-rgb: 106 85 240;
    --success: #16a34a;
    --gradient-text: linear-gradient(100deg, #f0776c 0%, #d63a2e 55%, #a8271d 100%);
    --logo-filter: grayscale(1) brightness(0.35);
    --mono-logo: invert(1);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 40px -24px rgb(0 0 0 / 0.22);
    --shadow-pop: 0 24px 60px -20px rgb(0 0 0 / 0.25);
 }
}
:root[data-theme="light"] { 
    color-scheme: light;
    --ink: 12 12 14;
    --bg-rgb: 250 250 249;
    --surface-rgb: 255 255 255;
    --bg: #fafaf9;
    --bg-raised: #f2f2f0;
    --surface: #ffffff;
    --surface-2: #f4f4f2;
    --border: rgb(12 12 14 / 0.09);
    --border-strong: rgb(12 12 14 / 0.17);
    --text: #111113;
    --text-muted: #53535a;
    --text-subtle: #6a6a72;
    --accent-text: #c2352a;
    --accent-soft: rgb(237 81 69 / 0.1);
    --accent-glow: rgb(214 58 46 / 0.3);
    --accent-2: #6a55f0;
    --accent-2-rgb: 106 85 240;
    --success: #16a34a;
    --gradient-text: linear-gradient(100deg, #f0776c 0%, #d63a2e 55%, #a8271d 100%);
    --logo-filter: grayscale(1) brightness(0.35);
    --mono-logo: invert(1);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 40px -24px rgb(0 0 0 / 0.22);
    --shadow-pop: 0 24px 60px -20px rgb(0 0 0 / 0.25);
 }

/* ---------- Reset & Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 { line-height: 1.2; letter-spacing: -0.015em; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { top: var(--space-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(52rem + var(--gutter) * 2); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--raised {
  background: var(--bg-raised);
  border-block: 1px solid var(--border);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); }
}

.stack { display: grid; gap: var(--space-4); align-content: start; }
.stack--lg { gap: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Typo-Helfer ---------- */
.h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1.02; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.01em; }
.lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: 1.55; max-width: 38rem; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.accent { color: var(--accent-text); }
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
}
.section-head--center .eyebrow::after {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: rgb(var(--ink) / 0.03);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}
.pill__dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.pill__dot svg { width: 0.85rem; height: 0.85rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }

.btn--primary {
  --btn-bg: var(--accent-strong);
  --btn-fg: #fff;
  --btn-border: transparent;
  box-shadow: 0 0 0 0 var(--accent-glow), 0 8px 24px -10px var(--accent-glow);
}
.btn--primary:hover {
  --btn-bg: #e2463a;
  box-shadow: 0 0 0 4px rgb(237 81 69 / 0.18), 0 12px 32px -10px var(--accent-glow);
}
.btn--ghost:hover { --btn-bg: rgb(var(--ink) / 0.06); --btn-border: rgb(var(--ink) / 0.28); }
.btn--light { --btn-bg: var(--text); --btn-fg: var(--bg); --btn-border: transparent; }
.btn--light:hover { --btn-bg: var(--text); opacity: .9; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1.1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
}
.link-arrow svg { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease); }
.link-arrow:hover svg,
a:hover > .link-arrow svg,
a:hover .link-arrow svg { transform: translateX(4px); }

.text-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.2s;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.site-header.is-scrolled,
.site-header.is-open {
  background: rgb(var(--bg-rgb) / 0.78);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.brand img { width: 2rem; height: 2rem; transition: transform 0.6s var(--ease); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand__dot { color: var(--accent); }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--space-1); }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.nav__link:hover,
.nav__item:focus-within > .nav__link { color: var(--text); background: rgb(var(--ink) / 0.05); }
.nav__link[aria-current="page"],
.nav__link.is-active { color: var(--text); }
.nav__link svg { width: 0.9rem; height: 0.9rem; transition: transform 0.25s var(--ease); }

.nav__item { position: relative; }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  width: 22rem;
  padding: var(--space-2);
  background: rgb(var(--surface-rgb) / 0.96);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}
.nav__dropdown::before { /* Hover-Brücke */
  content: "";
  position: absolute;
  inset: -0.75rem 0 auto;
  height: 0.75rem;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__item.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__item:hover > .nav__link svg,
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }

.dropdown-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem var(--space-3);
  padding: var(--space-3);
  border-radius: calc(var(--radius) - 0.35rem);
  transition: background-color 0.2s;
}
.dropdown-link:hover { background: rgb(var(--ink) / 0.05); }
.dropdown-link__icon {
  grid-row: span 2;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.6rem;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.dropdown-link__icon svg { width: 1.1rem; height: 1.1rem; }
.dropdown-link__title { font-weight: 700; font-size: var(--fs-sm); }
.dropdown-link__text { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.dropdown-link[aria-current="page"] .dropdown-link__title { color: var(--accent-text); }
.dropdown-all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-1);
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}
.dropdown-all:hover { color: var(--text); }
.dropdown-all svg { width: 0.9rem; height: 0.9rem; }

.header-cta { display: none; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 1.25rem; height: 0.75rem; }
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: calc(100% - 1.5px); }
.is-open .menu-toggle__bars span:first-child { top: calc(50% - 0.75px); transform: rotate(45deg); }
.is-open .menu-toggle__bars span:last-child { top: calc(50% - 0.75px); transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  overflow-y: auto;
  padding: var(--space-5) var(--gutter) var(--space-7);
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__list { display: grid; }
.mobile-nav__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mobile-nav__list a[aria-current="page"] { color: var(--accent-text); }
.mobile-nav__list .is-sub a { padding-left: var(--space-5); font-size: 1.0625rem; font-weight: 500; color: var(--text-muted); }
.mobile-nav__list svg { width: 1.1rem; height: 1.1rem; opacity: 0.5; }
.mobile-nav__footer { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.mobile-nav__footer .muted { font-size: var(--fs-sm); }

body.nav-locked { overflow: hidden; }

@media (min-width: 1000px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-toggle, .mobile-nav { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  isolation: isolate;
}
.hero::before { /* Lichtschein */
  content: "";
  position: absolute;
  z-index: -1;
  top: -12rem;
  left: 50%;
  width: min(70rem, 140vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(237 81 69 / 0.20), rgb(237 81 69 / 0.05) 55%, transparent);
  filter: blur(10px);
  pointer-events: none;
}
.hero::after { /* feines Raster */
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(var(--ink) / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--ink) / 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero__content { display: grid; gap: var(--space-5); justify-items: start; }
.hero--center .hero__content { justify-items: center; text-align: center; margin-inline: auto; max-width: 62rem; }
.hero--center .lead { margin-inline: auto; }
.hero__actions { margin-top: var(--space-2); }

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.hero--center .trust-list { justify-content: center; }
.trust-list li { display: inline-flex; align-items: center; gap: 0.45rem; }
.trust-list svg { width: 1rem; height: 1rem; color: var(--accent-text); }

/* Split-Hero (Unterseiten) */
.hero--split .hero__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero--split .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); opacity: 0.5; }

/* Medien-Collage (Home) */
.collage {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items: end;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.collage__item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.collage__item img,
.collage__item video { width: 100%; height: 100%; object-fit: cover; }
.collage__item--side { aspect-ratio: 4 / 5; }
.collage__item--main { aspect-ratio: 4 / 4.4; }
@media (max-width: 640px) {
  .collage { grid-template-columns: 1fr; }
  .collage__item--side { display: none; }
  .collage__item--main { aspect-ratio: 4 / 3; }
}

/* Logo-Leiste */
.logos {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.logos__label { font-size: var(--fs-sm); color: var(--text-subtle); }
.logos__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.logos__list li { display: grid; place-items: center; }
.logos__list img {
  width: auto;
  height: 1.9rem;
  filter: var(--logo-filter);
  opacity: 0.55;
  transition: filter 0.3s, opacity 0.3s;
}
.logos__list li:hover img { filter: none; opacity: 1; }

/* ---------- Karten ---------- */
.card {
  position: relative;
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), rgb(var(--surface-rgb) / 0.55));
  box-shadow: var(--shadow);
}
.card--link { transition: border-color 0.3s, transform 0.4s var(--ease), background-color 0.3s; }
.card--link:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.card__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0.85rem;
  background: var(--accent-soft);
  border: 1px solid rgb(237 81 69 / 0.25);
  color: var(--accent-text);
}
.card__icon svg { width: 1.4rem; height: 1.4rem; }
.card__num {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.card p { color: var(--text-muted); }

/* Service-Karte mit Bild */
.service-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.service-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.service-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card__body {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.service-card__body p { color: var(--text-muted); }
.service-card__body .link-arrow { margin-top: auto; align-self: end; }

/* Häkchen-Liste */
.checklist { display: grid; gap: 0.6rem; }
.checklist li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text);
}
.checklist svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--accent-text);
}
.checklist--inline { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }

/* Feature-Liste mit Titel + Text */
.feature-list { display: grid; gap: 0; }
.feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
}
.feature-list li:last-child { border-bottom: 1px solid var(--border); }
.feature-list svg { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; color: var(--accent-text); }
.feature-list strong { display: block; font-weight: 700; }
.feature-list span { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Split (Bild + Text) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
}
.split + .split { margin-top: clamp(4rem, 3rem + 5vw, 7.5rem); }

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media__badge {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 1rem 0.65rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgb(var(--bg-rgb) / 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.media__badge .card__icon { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; }
.media__badge .card__icon svg { width: 1.1rem; height: 1.1rem; }
.media__badge small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

/* ---------- Prozess ---------- */
.process {
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
}
@media (min-width: 700px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process--4 { grid-template-columns: repeat(4, 1fr); } .process--3 { grid-template-columns: repeat(3, 1fr); } }
.process__step {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-strong);
}
.process__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.8rem;
  left: 0;
  padding-right: var(--space-3);
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.section--raised .process__step::before { background: var(--bg-raised); }
.process__step p { color: var(--text-muted); font-size: var(--fs-sm); }

/* Phasen mit Bild (gestapelt) */
.phases { display: grid; gap: var(--space-5); }
.phase {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
@media (min-width: 860px) {
  .phase { grid-template-columns: 1fr 1fr; min-height: 24rem; }
  .phase:nth-child(even) .phase__media { order: -1; }
}
@media (min-width: 1100px) {
  .phases--sticky .phase { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.phase__body {
  display: grid;
  gap: var(--space-4);
  align-content: center;
  justify-items: start;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
}
.phase__body p { color: var(--text-muted); max-width: 32rem; }
.phase__media { min-height: 16rem; }
.phase__media img { width: 100%; height: 100%; object-fit: cover; }
.phase__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.phase__tag span { color: var(--accent-text); }

/* ---------- Über-mich ---------- */
.profile {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) { .profile { grid-template-columns: 0.8fr 1.2fr; } }
.profile__photo { position: relative; }
.profile__photo .media { aspect-ratio: 4 / 5; }
.profile__photo .media img { object-position: 50% 20%; }
.profile__quote {
  font-size: var(--fs-xl);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.profile__sign { display: grid; gap: 0.1rem; }
.profile__sign strong { font-size: var(--fs-base); }
.profile__sign span { color: var(--text-muted); font-size: var(--fs-sm); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.stats dt { font-size: var(--fs-sm); color: var(--text-muted); }
.stats dd { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Tech-Grid ---------- */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
}
.tech {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.tech img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.tech strong { display: block; }
.tech span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; }

/* ---------- Mock-UI (Beratung) ---------- */
.mock {
  margin-top: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: var(--fs-xs);
  overflow: hidden;
}
.mock__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.mock__id {
  padding: 0.1rem 0.45rem;
  border-radius: 0.35rem;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 700;
}
.mock__search { padding: 0.7rem 0.9rem; color: var(--text-subtle); border-bottom: 1px solid var(--border); }
.mock__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.55rem 0.9rem;
  color: var(--text-muted);
}
.mock__list li:first-child { background: rgb(var(--ink) / 0.04); color: var(--text); }
.mock__list li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--border-strong);
}
.mock__list li:first-child::before { background: var(--accent); }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding-block: 1.4rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq__icon {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: background-color 0.25s, border-color 0.25s, transform 0.35s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.7rem;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.35s var(--ease); }
.faq details[open] .faq__icon { background: var(--accent-strong); border-color: var(--accent-strong); }
.faq details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__answer {
  padding-bottom: 1.5rem;
  padding-right: 3rem;
  color: var(--text-muted);
  max-width: 48rem;
}

/* ---------- CTA-Band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: var(--space-6);
  padding: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-lg) + 0.5rem);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(237 81 69 / 0.28), transparent 55%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6rem;
  bottom: -8rem;
  width: 26rem;
  aspect-ratio: 1;
  background: url("../images/logo-mark.svg") center / contain no-repeat;
  opacity: 0.07;
  transform: rotate(-12deg);
}
@media (min-width: 960px) {
  .cta-band { grid-template-columns: 1.3fr 1fr; align-items: center; gap: var(--space-8); }
}
.cta-band .lead { color: var(--text-muted); }
.contact-list { display: grid; gap: var(--space-3); }
.contact-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--bg-rgb) / 0.5);
  transition: border-color 0.25s, background-color 0.25s;
}
a.contact-item:hover { border-color: var(--border-strong); background: rgb(var(--bg-rgb) / 0.8); }
.contact-item .card__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; }
.contact-item .card__icon svg { width: 1.15rem; height: 1.15rem; }
.contact-item small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.contact-item strong { font-weight: 700; word-break: break-word; }
.contact-item > svg { width: 1rem; height: 1rem; color: var(--text-subtle); }

/* ---------- Rechtstexte ---------- */
.legal { display: grid; gap: var(--space-7); }
@media (min-width: 1000px) {
  .legal--toc { grid-template-columns: 16rem 1fr; gap: var(--space-8); align-items: start; }
}
.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: none;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
@media (min-width: 1000px) { .legal__toc { display: grid; } }
.legal__toc p { font-weight: 700; margin-bottom: var(--space-2); }
.legal__toc a { color: var(--text-muted); padding: 0.2rem 0; }
.legal__toc a:hover { color: var(--text); }
.prose { max-width: 46rem; color: var(--text-muted); }
.prose > * + * { margin-top: 1rem; }
.prose section + section {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
}
.prose h2 { color: var(--text); font-size: var(--fs-xl); line-height: 1.25; margin-bottom: var(--space-5); }
.prose h3 { color: var(--text); font-size: var(--fs-lg); margin-top: var(--space-6); }
.prose h4 { color: var(--text); font-size: var(--fs-base); margin-top: var(--space-5); }
.prose h2 + h3 { margin-top: 0; }
.prose ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.prose li::marker { color: var(--accent-text); }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.prose strong { color: var(--text); }
.legal-card { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }

/* ---------- 404 ---------- */
.notfound {
  min-height: calc(100svh - var(--header-h) - 10rem);
  display: grid;
  place-items: center;
  text-align: center;
}
.notfound__code {
  font-size: clamp(7rem, 4rem + 18vw, 16rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

/* ---------- Footer ---------- */
.site-footer {
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer-brand { grid-column: 1 / -1; display: grid; gap: var(--space-4); align-content: start; max-width: 22rem; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-brand p { color: var(--text-muted); }
.footer-col { display: grid; gap: var(--space-3); align-content: start; }
.footer-col h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--space-1);
}
.footer-col a,
.footer-col button { color: var(--text-muted); transition: color 0.2s; justify-self: start; }
.footer-col a:hover,
.footer-col button:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.footer-bottom a:hover,
.footer-bottom button:hover { color: var(--text); }
.footer-wordmark {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  font-size: clamp(3.5rem, 1rem + 13vw, 13rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.06em;
  text-align: center;
  background: linear-gradient(180deg, rgb(var(--ink) / 0.10), rgb(var(--ink) / 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.btn-reset {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* ---------- Cookie-Consent (Finsweet fs-cc) ---------- */
.cc-hidden { display: none; }
.cc-banner,
.cc-prefs {
  position: fixed;
  z-index: 1000;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  max-width: 26rem;
  margin-left: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgb(var(--surface-rgb) / 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
  color: var(--text);
}
.cc-prefs { max-height: calc(100svh - 2rem); overflow-y: auto; }
.cc-inner { display: grid; gap: var(--space-4); padding: var(--space-5); }
.cc-head { display: flex; gap: var(--space-3); align-items: center; }
.cc-head strong { font-size: var(--fs-base); }
.cc-text { font-size: var(--fs-sm); color: var(--text-muted); }
.cc-text a { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cc-actions .btn { min-height: 2.75rem; padding-inline: 0.75rem; }
.cc-option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cc-option strong { font-size: var(--fs-sm); }
.cc-option p { grid-column: 1; font-size: var(--fs-xs); color: var(--text-muted); }
.cc-option__state { grid-row: 1 / span 2; grid-column: 2; font-size: var(--fs-xs); color: var(--text-subtle); }
.cc-switch {
  grid-row: 1 / span 2;
  grid-column: 2;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 2.75rem;
  height: 1.6rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background-color 0.2s;
}
.cc-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--text);
  transform: translateY(-50%);
  transition: transform 0.25s var(--ease);
}
.cc-switch:checked { background: var(--accent-strong); border-color: var(--accent-strong); }
.cc-switch:checked::after { transform: translate(1.15rem, -50%); }

/* ---------- Reveal-Animation (nur mit JS) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}
.faq summary h2,
.faq summary h3 { font: inherit; letter-spacing: inherit; }
.hero__media { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }

/* Bildergalerie (3 Spalten) */
.gallery { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery .media { aspect-ratio: 1; }
@media (min-width: 700px) { .gallery .media:nth-child(2) { transform: translateY(2rem); } }

/* ---------- Theme-Umschalter ---------- */
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { color: var(--text); background: rgb(var(--ink) / 0.05); border-color: var(--border-strong); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; grid-area: 1 / 1; transition: transform 0.4s var(--ease), opacity 0.25s; }
/* Dark aktiv -> Sonne zeigen (Wechsel zu hell) */
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { opacity: 1; transform: none; }
}
:root[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: none; }

/* ==========================================================================
   Motion-Ebene
   Alles hier ist rein dekorativ und wird bei "Bewegung reduzieren" abgeschaltet.
   ========================================================================== */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Reveal: weicher mit Unschärfe */
.js [data-reveal] { filter: blur(6px); }
.js [data-reveal].is-visible { filter: none; }

/* Aurora im Hero */
.hero__aurora {
  position: absolute;
  z-index: -1;
  inset: -10rem 0 auto;
  height: 46rem;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.hero__aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: aurora 22s ease-in-out infinite alternate;
}
.hero__aurora span:nth-child(1) { width: 34rem; height: 22rem; left: 12%; top: 6rem; background: rgb(237 81 69 / 0.55); }
.hero__aurora span:nth-child(2) { width: 28rem; height: 20rem; right: 8%; top: 10rem; background: rgb(255 140 90 / 0.35); animation-duration: 26s; animation-delay: -8s; }
.hero__aurora span:nth-child(3) { width: 24rem; height: 18rem; left: 40%; top: 2rem; background: rgb(150 70 255 / 0.25); animation-duration: 30s; animation-delay: -14s; }
@keyframes aurora {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(8rem, 3rem) scale(1.15) rotate(25deg); }
  66%  { transform: translate(-6rem, 5rem) scale(0.9) rotate(-15deg); }
  100% { transform: translate(4rem, -2rem) scale(1.1) rotate(10deg); }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero__aurora span { mix-blend-mode: multiply; opacity: 0.32; }
}
:root[data-theme="light"] .hero__aurora span { mix-blend-mode: multiply; opacity: 0.32; }

/* Headline Wort für Wort */
.split-word {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.split-word > span {
  display: inline-block;
  transform: translateY(105%) rotate(4deg);
  filter: blur(8px);
  opacity: 0;
  transition: transform 1s var(--ease), filter 1s var(--ease), opacity 0.8s var(--ease);
  transition-delay: calc(var(--i) * 70ms + 80ms);
}
.is-split.is-visible .split-word > span { transform: none; filter: none; opacity: 1; }

/* Schimmernder Verlaufstext */
.text-gradient {
  background-size: 200% 100%;
  animation: shimmer 8s ease-in-out infinite alternate;
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Pulsierender Punkt */
.pill__dot { position: relative; }
.pill__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.1); opacity: 0; } }

/* Scroll-Fortschritt */
.scroll-progress {
  position: fixed;
  z-index: 150;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #ff9f6e);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
}

/* Parallax (eigene translate-Eigenschaft, kollidiert nicht mit transform) */
[data-parallax] { translate: 0 var(--py, 0px); will-change: translate; }

/* Licht-Spot auf Karten: eigene Elemente, damit ::before/::after frei bleiben */
.has-spot { position: relative; } /* kein isolation: würde preserve-3d flach machen */
.spot-fill,
.spot-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.spot-fill {
  z-index: 1;
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--accent-rgb) / 0.10), transparent 45%);
}
.spot-ring { /* leuchtender Rand */
  z-index: 3;
  padding: 1px;
  background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--accent-rgb) / 0.8), rgb(var(--accent-2-rgb) / 0.4) 25%, transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.has-spot:hover > .spot-fill,
.has-spot:hover > .spot-ring { opacity: 1; }

/* 3D-Neigung */
.tilt { will-change: transform; }
.tilt.is-tilting { transition: border-color 0.3s, transform 0.12s linear; }

/* Bilder zoomen beim Hover */
.media img { transition: transform 1.2s var(--ease); }
.media:hover img { transform: scale(1.04); }
.phase__media { overflow: hidden; }
.phase__media img { transition: transform 1.2s var(--ease); }
.phase:hover .phase__media img { transform: scale(1.05); }

/* Schwebendes Badge */
.media__badge { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }

/* Buttons: Glanz + Magnet */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn--primary:hover::after { transform: translateX(120%); transition: transform 0.9s var(--ease); }
.magnetic { transition: transform 0.4s var(--ease), background-color 0.25s, box-shadow 0.25s, border-color 0.25s; }

/* Endlos-Laufband für Logos */
.marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration, 32s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .logos__list {
  flex-wrap: nowrap;
  padding-right: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Prozess-Linie zeichnet sich */
.process__step { border-top-color: var(--border); }
.process__step::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.4s var(--ease) 0.2s;
}
.process__step.is-visible::after,
html:not(.js) .process__step::after { transform: scaleX(1); }

/* Kontakt-Block: rotierender Leuchtrand */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), transparent 0 70%, var(--accent) 85%, #ffb08a 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin-border 6s linear infinite;
  pointer-events: none;
}
@keyframes spin-border { to { --angle: 360deg; } }

/* Icons in Karten reagieren */
.card__icon { transition: transform 0.5s var(--ease), background-color 0.3s; }
.card:hover .card__icon,
.service-card:hover .card__icon { transform: translateZ(40px) translateY(-3px) rotate(-6deg); background: rgb(237 81 69 / 0.2); }

@media (prefers-reduced-motion: reduce) {
  .hero__aurora span, .text-gradient, .media__badge, .pill__dot::after, .cta-band::before { animation: none; }
  .split-word > span { transform: none; filter: none; opacity: 1; }
  .js [data-reveal] { filter: none; }
  .marquee__track { animation: none; }
  [data-parallax] { translate: none; }
}
.js .is-split[data-reveal] { opacity: 1; transform: none; filter: none; }

/* ---------- 3D ---------- */
.collage-stage { perspective: 1800px; }
.collage {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.9s var(--ease);
}
.collage__item { transition: transform 0.9s var(--ease), box-shadow 0.6s; }
@media (min-width: 641px) {
  .collage__item--side:first-child { transform: translateZ(-60px) rotateY(22deg) translateY(-1.5rem); transform-origin: right center; }
  .collage__item--side:last-child { transform: translateZ(-60px) rotateY(-22deg) translateY(-1.5rem); transform-origin: left center; }
  .collage__item--main { transform: translateZ(40px); box-shadow: 0 50px 100px -30px rgb(0 0 0 / 0.7), 0 0 0 1px var(--border); }
  .collage:hover .collage__item--side:first-child { transform: translateZ(-30px) rotateY(14deg) translateY(-1.5rem); }
  .collage:hover .collage__item--side:last-child { transform: translateZ(-30px) rotateY(-14deg) translateY(-1.5rem); }
}

/* Karten mit Tiefe: Inhalte schweben vor der Fläche */
.tilt { transform-style: preserve-3d; }
.tilt .card__icon { transform: translateZ(40px); }
.tilt > h2, .tilt > h3 { transform: translateZ(24px); }
.tilt .mock { transform: translateZ(18px); }

/* Profilfoto */
.profile__photo { perspective: 1200px; }
.profile__photo .media { transition: transform 0.6s var(--ease); }

/* Phasen-Stapel: hintere Karten weichen zurück */
.phase { transform-origin: 50% 0; transition: border-color 0.3s; }
@media (min-width: 1100px) {
  .phases--sticky { perspective: 1600px; }
  .phases--sticky .phase { will-change: transform, filter; }
}

@media (prefers-reduced-motion: reduce) {
  .collage { transform: none; }
  .collage__item { transform: none !important; }
}

/* Split-Hero: Headline teilt sich die Breite mit dem Bild */
.hero--split .h1 { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.4rem); }

/* ==========================================================================
   Signature-Momente
   ========================================================================== */

/* 3D-Partikel-Globus hinter dem Hero */
.hero__canvas {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__canvas.is-ready { opacity: 1; }
/* Lesbarkeit: weicher Schleier direkt hinter dem Text */
.hero--globe .hero__content { position: relative; }
.hero--globe .hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2rem -4rem;
  background: radial-gradient(closest-side, rgb(var(--bg-rgb) / 0.75), transparent);
  pointer-events: none;
}

/* Riesiges Laufband */
.mega-marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-block: 1px solid var(--border);
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mega-marquee__row {
  display: flex;
  width: max-content;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  font-size: clamp(3rem, 1.5rem + 7vw, 8.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  will-change: transform;
}
.mega-marquee__row + .mega-marquee__row { margin-top: clamp(0.25rem, 0.5vw, 0.75rem); }
.mega-marquee__row--outline { color: transparent; -webkit-text-stroke: 1.5px rgb(var(--ink) / 0.22); }
.mega-marquee__star {
  display: inline-block;
  font-size: 0.5em;
  color: var(--accent);
  -webkit-text-stroke: 0;
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mega-marquee__accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Scroll-Manifest: Wörter leuchten nacheinander auf */
.manifesto { padding-block: clamp(5rem, 3rem + 8vw, 11rem); }
.manifesto__text {
  max-width: 62rem;
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.manifesto__text .w { color: rgb(var(--ink) / 0.14); transition: color 0.35s linear; }
.manifesto__text .w.lit { color: var(--text); }
.manifesto__text em { font-style: normal; }
.manifesto__text em .w.lit { color: var(--accent-text); }
.manifesto__sign {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.manifesto__sign img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--border-strong); }
.manifesto__sign strong { display: block; }
.manifesto__sign span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Cursor-Glow (nur Desktop) */
.cursor-glow {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 38rem;
  height: 38rem;
  margin: -19rem 0 0 -19rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(237 81 69 / 0.09), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }
main, .site-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .mega-marquee__star { animation: none; }
  .manifesto__text .w { color: var(--text); }
  .cursor-glow { display: none; }
}

/* ---------- Bento-Grid mit lebenden Visualisierungen ---------- */
.bento { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__item--wide { grid-column: span 2; } }
@media (min-width: 1100px) { .bento { grid-template-columns: repeat(3, 1fr); } }
.bento__item { gap: var(--space-5); align-content: space-between; min-height: 18rem; }
.bento__text { display: grid; gap: var(--space-3); }
@media (min-width: 900px) {
  .bento__item--wide { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: var(--space-6); }
}

/* Terminal: bewusst immer dunkel */
.terminal {
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius);
  background: #0d0d0f;
  color: #e6e6e6;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.terminal__bar span { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #3a3a3f; }
.terminal__bar span:first-child { background: #ff5f57; }
.terminal__bar span:nth-child(2) { background: #febc2e; }
.terminal__bar span:nth-child(3) { background: #28c840; }
.terminal__bar em { margin-left: 0.6rem; font-style: normal; font-size: var(--fs-xs); color: #8a8a90; }
.terminal__body {
  margin: 0;
  min-height: 11.5rem;
  padding: 1rem 1.1rem;
  font: 500 0.82rem/1.75 ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  white-space: pre-wrap;
}
.terminal__body .ok { color: #4ade80; }
.terminal__body .cmd { color: #f4f4f3; }
.terminal__body .prompt { color: var(--accent); }
.terminal__caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Performance-Ring */
@property --gauge {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
.gauge { position: relative; width: 8.5rem; aspect-ratio: 1; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.gauge__track { stroke: rgb(var(--ink) / 0.08); }
.gauge__value {
  stroke: #22c55e;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 8px rgb(34 197 94 / 0.45));
  transition: stroke-dashoffset 2s var(--ease) 0.3s;
}
.is-visible .gauge__value { stroke-dashoffset: 5; }
.gauge__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #22c55e;
  font-variant-numeric: tabular-nums;
}

/* Status-Panel */
.status { display: grid; gap: 0.6rem; }
.status li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: rgb(var(--ink) / 0.02);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.status em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); color: #22c55e; font-weight: 700; }
.status__dot { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #22c55e; }
.status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s var(--ease) infinite;
}
.status li:nth-child(2) .status__dot::after { animation-delay: 0.6s; }
.status li:nth-child(3) .status__dot::after { animation-delay: 1.2s; }

/* Persönliche Karte */
.bento__person { overflow: hidden; }
.bento__person img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
}

/* Mini-Karte */
.map {
  position: relative;
  height: 8.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: rgb(var(--ink) / 0.02);
  background-image: radial-gradient(rgb(var(--ink) / 0.16) 1px, transparent 1.5px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse at 45% 55%, #000 45%, transparent 85%);
  mask-image: radial-gradient(ellipse at 45% 55%, #000 45%, transparent 85%);
}
.map__ping {
  position: absolute;
  left: 45%;
  top: 55%;
  width: 0.8rem;
  height: 0.8rem;
  margin: -0.4rem 0 0 -0.4rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 20px var(--accent);
}
.map__ping::before,
.map__ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: ping 2.6s var(--ease) infinite;
}
.map__ping::after { animation-delay: 1.3s; }
@keyframes ping { from { transform: scale(1); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.map__label {
  position: absolute;
  left: calc(45% + 1rem);
  top: calc(55% - 0.7rem);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .status__dot::after, .map__ping::before, .map__ping::after, .terminal__caret { animation: none; }
}

/* Mobil: Hero-Buttons volle Breite, saubere Kante */
@media (max-width: 479px) {
  .hero .btn-row { width: 100%; }
  .hero .btn-row .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Designsprache „Engineering Blueprint"
   Überschreibt die Basis-Komponenten: Mono-Labels, Verlaufsränder,
   Bauplan-Ecken, Index-Nummern, Glas-Kapsel-Header.
   ========================================================================== */

/* ---------- Atmosphäre ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: var(--ease); }

body::before { /* feines Film-Grain */
  content: "";
  position: fixed;
  z-index: 300;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { counter-reset: sec; }

/* ---------- Mono-Labels mit Abschnittsnummer ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  gap: 0.6rem;
}
.eyebrow::before {
  width: auto;
  height: auto;
  background: none;
  color: var(--text-subtle);
  content: "//";
}
.section-head .eyebrow::before,
.manifesto .eyebrow::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) " //";
}
.section-head--center .eyebrow::after { display: none; }

.pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(var(--surface-rgb) / 0.7), rgb(var(--surface-rgb) / 0.7)) padding-box,
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.6), rgb(var(--accent-2-rgb) / 0.5), rgb(var(--ink) / 0.1)) border-box;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.breadcrumb { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; }

/* ---------- Headlines: feine Gewichtung ---------- */
.h2 { letter-spacing: -0.035em; }
.h2 .muted-part, .h1 .muted-part { color: var(--text-subtle); }

/* ---------- Buttons ---------- */
.btn--primary {
  --btn-bg: transparent;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 50%),
    linear-gradient(120deg, #ff6b4a 0%, #e5392d 45%, #c32c5a 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 0 0 1px rgb(var(--accent-rgb) / 0.5),
    0 10px 30px -10px rgb(var(--accent-rgb) / 0.7);
}
.btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 0 0 1px rgb(var(--accent-rgb) / 0.7),
    0 0 0 6px rgb(var(--accent-rgb) / 0.14),
    0 16px 40px -10px rgb(var(--accent-rgb) / 0.8);
}
.btn--ghost {
  border-color: transparent;
  background:
    linear-gradient(rgb(var(--surface-rgb) / 0.6), rgb(var(--surface-rgb) / 0.6)) padding-box,
    linear-gradient(135deg, rgb(var(--ink) / 0.28), rgb(var(--ink) / 0.06) 60%, rgb(var(--accent-rgb) / 0.35)) border-box;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background:
    linear-gradient(rgb(var(--surface-rgb) / 0.9), rgb(var(--surface-rgb) / 0.9)) padding-box,
    linear-gradient(135deg, rgb(var(--accent-rgb) / 0.7), rgb(var(--accent-2-rgb) / 0.5)) border-box;
}
.btn svg {
  box-sizing: content-box;
  padding: 0.3rem;
  margin-right: -0.55rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
}
.btn--ghost svg { background: rgb(var(--ink) / 0.08); }
.btn--sm svg { padding: 0.2rem; margin-right: -0.4rem; }

/* ---------- Karten ---------- */
.card,
.service-card,
.tech,
.phase,
.bento__item {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--surface), rgb(var(--surface-rgb) / 0.75)) padding-box,
    linear-gradient(160deg, rgb(var(--ink) / 0.16), rgb(var(--ink) / 0.04) 35%, rgb(var(--ink) / 0.04) 65%, rgb(var(--accent-rgb) / 0.22)) border-box;
}
.card::before,
.service-card::before { /* feine Lichtkante oben */
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--ink) / 0.35), transparent);
  pointer-events: none;
  z-index: 2;
}
.card, .service-card { position: relative; }

/* Index-Nummern in Karten-Rastern */
.grid, .bento { counter-reset: card; }
.grid > .card,
.grid > .service-card,
.bento > .bento__item { counter-increment: card; }
.grid > .card::after,
.bento > .bento__item::after {
  content: "/" counter(card, decimal-leading-zero);
  position: absolute;
  top: 1.35rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-subtle);
  letter-spacing: 0.05em;
  z-index: 2;
}

/* Icon-Kachel: Glas mit Verlaufsrand und Glow */
.card__icon {
  border: 1px solid transparent;
  background:
    linear-gradient(145deg, rgb(var(--accent-rgb) / 0.22), rgb(var(--accent-2-rgb) / 0.10)) padding-box,
    linear-gradient(145deg, rgb(var(--accent-rgb) / 0.7), rgb(var(--accent-2-rgb) / 0.35) 60%, rgb(var(--ink) / 0.06)) border-box;
  box-shadow: 0 8px 24px -8px rgb(var(--accent-rgb) / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

/* Service-Karte: Bild mit Verlauf + Index-Chip + Pfeil-Kreis */
.service-card__media { position: relative; }
.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(var(--surface-rgb) / 0.95)),
    linear-gradient(120deg, rgb(var(--accent-rgb) / 0.18), transparent 50%, rgb(var(--accent-2-rgb) / 0.15));
  pointer-events: none;
}
.grid > .service-card::after {
  content: "0" counter(card);
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgb(var(--bg-rgb) / 0.6);
  border: 1px solid rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.service-card .link-arrow svg {
  box-sizing: content-box;
  padding: 0.35rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: transform 0.4s var(--ease), background-color 0.3s, border-color 0.3s, color 0.3s;
}
.service-card:hover .link-arrow svg { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; transform: translateX(4px) rotate(-45deg); }

/* ---------- Bauplan-Ecken an Medien ---------- */
.media::before,
.media::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.4rem;
  height: 1.4rem;
  pointer-events: none;
  border: 2px solid var(--accent);
  transition: transform 0.6s var(--ease);
}
.media::before { top: 0.75rem; left: 0.75rem; border-right: 0; border-bottom: 0; border-top-left-radius: 0.5rem; }
.media::after { right: 0.75rem; bottom: 0.75rem; border-left: 0; border-top: 0; border-bottom-right-radius: 0.5rem; }
.media:hover::before { transform: translate(-3px, -3px); }
.media:hover::after { transform: translate(3px, 3px); }
.profile__photo .media::after { display: none; }

/* ---------- Checkliste & Feature-Liste ---------- */
.checklist svg {
  box-sizing: content-box;
  padding: 0.18rem;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.14);
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.2rem;
}
.feature-list li { transition: padding-left 0.4s var(--ease), background-color 0.3s; border-radius: 0.5rem; }
.feature-list li:hover { padding-left: 0.6rem; background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.07), transparent 70%); }
.feature-list svg {
  box-sizing: content-box;
  padding: 0.5rem;
  margin-top: 0;
  border-radius: 0.6rem;
  background: rgb(var(--accent-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
}

/* ---------- Prozess: leuchtende Timeline ---------- */
.process__step { border-top: 0; padding-top: 2.75rem; }
.process__step::before {
  top: 0;
  left: 0;
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(var(--accent-rgb) / 0.6);
  background: var(--bg) !important;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.08), 0 0 24px rgb(var(--accent-rgb) / 0.35);
  z-index: 1;
  transform: translateY(-50%);
}
.section--raised .process__step::before { background: var(--bg-raised) !important; }
.process__step::after {
  top: 0;
  left: 2.25rem;
  right: -1.5rem;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.8), rgb(var(--accent-2-rgb) / 0.4), rgb(var(--ink) / 0.1));
}
.process__step:last-child::after { background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.6), transparent); right: 0; }
.process { row-gap: var(--space-7); }
.process__step > * { position: relative; }
.process__step:hover::before { box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / 0.14), 0 0 32px rgb(var(--accent-rgb) / 0.6); }

/* ---------- Phase-Tag ---------- */
.phase__tag { font-family: var(--font-mono); letter-spacing: 0.05em; }

/* ---------- FAQ: nummeriert ---------- */
.faq { counter-reset: q; border-top-color: var(--border); }
.faq details { counter-increment: q; position: relative; transition: background-color 0.3s; }
.faq summary { gap: var(--space-4); }
.faq summary::before {
  content: counter(q, decimal-leading-zero);
  flex: none;
  width: 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-subtle);
  transition: color 0.3s;
}
.faq summary h2, .faq summary h3 { flex: 1; }
.faq details[open] summary::before,
.faq summary:hover::before { color: var(--accent-text); }
.faq details::after {
  content: "";
  position: absolute;
  left: -1rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent-2));
  transform: scaleY(0);
  transition: transform 0.5s var(--ease);
}
.faq details[open]::after { transform: scaleY(1); }
.faq__answer { padding-left: calc(2rem + var(--space-4)); }

/* ---------- Tech-Kacheln ---------- */
.tech { position: relative; overflow: hidden; transition: transform 0.4s var(--ease); }
.tech img { transition: transform 0.6s var(--ease), filter 0.4s; filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.3)); }
.tech:hover img { transform: scale(1.15) rotate(-6deg); }
.tech strong { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.01em; }

/* ---------- Header: schwebende Glas-Kapsel ---------- */
.site-header,
.site-header.is-scrolled,
.site-header.is-open {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header__inner {
  transition: max-width 0.5s var(--ease), height 0.5s var(--ease), margin 0.5s var(--ease),
    background-color 0.4s, border-color 0.4s, box-shadow 0.4s, padding 0.5s var(--ease);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.site-header.is-scrolled .site-header__inner {
  max-width: min(68rem, calc(100% - 1.5rem));
  height: 3.5rem;
  margin-top: 0.4rem;
  padding-inline: 0.5rem 0.4rem;
  padding-left: 1rem;
  background: rgb(var(--surface-rgb) / 0.72);
  border-color: var(--border-strong);
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}
.site-header.is-open .site-header__inner { background: var(--bg); border-color: var(--border); }
.nav__link[aria-current="page"],
.nav__link.is-active { background: rgb(var(--ink) / 0.06); }

/* ---------- Kontakt-Liste ---------- */
.contact-item { border-color: transparent; background:
  linear-gradient(rgb(var(--bg-rgb) / 0.55), rgb(var(--bg-rgb) / 0.55)) padding-box,
  linear-gradient(135deg, rgb(var(--ink) / 0.18), rgb(var(--ink) / 0.04)) border-box; }
.contact-item small { font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.66rem; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(60rem, 100%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}
.footer-col h2 { font-family: var(--font-mono); letter-spacing: 0.08em; }
.footer-wordmark {
  background: linear-gradient(180deg, rgb(var(--ink) / 0.16), rgb(var(--ink) / 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: background 0.6s;
}
.site-footer:hover .footer-wordmark {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.4), rgb(var(--accent-2-rgb) / 0.08) 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- Sektions-Trenner mit Lichtpunkt ---------- */
.section--raised { position: relative; }
.section--raised::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 12rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: scan 9s linear infinite;
}
@keyframes scan { from { transform: translateX(-12rem); } to { transform: translateX(100vw); } }

/* ---------- Mock-UI (Command-Palette) ---------- */
.mock { font-family: var(--font-mono); }
.mock__list li { transition: background-color 0.3s, color 0.3s; }
.mock__list li.is-active { background: rgb(var(--accent-rgb) / 0.12); color: var(--text); }
.mock__list li.is-active::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.mock[data-cycle] .mock__list li:first-child:not(.is-active) { background: none; color: var(--text-muted); }
.mock[data-cycle] .mock__list li:first-child:not(.is-active)::before { background: var(--border-strong); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .section--raised::before { animation: none; display: none; }
}

/* ==========================================================================
   Signature-Elemente der Unterseiten
   ========================================================================== */

/* Gemeinsame Bühne für Hero-Visuals */
.stage { position: relative; perspective: 1400px; }
.stage__label {
  position: absolute;
  z-index: 5;
  top: -0.9rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow);
}
.stage__label::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.floating { animation: float 7s ease-in-out infinite; }

/* ---------- Webdesign: Browser, der sich baut ---------- */
.browser {
  position: relative;
  margin-inline: auto;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(var(--ink) / 0.03);
  overflow: hidden;
  transition: width 1s var(--ease), border-radius 1s var(--ease);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.4rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid var(--border);
  background: rgb(var(--ink) / 0.03);
}
.browser__bar > span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(var(--ink) / 0.15); }
.browser__bar > span:nth-child(1) { background: #ff5f57; }
.browser__bar > span:nth-child(2) { background: #febc2e; }
.browser__bar > span:nth-child(3) { background: #28c840; }
.browser__url {
  flex: 1;
  max-width: 16rem;
  margin-left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgb(var(--ink) / 0.05);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser__screen { height: 21rem; padding: 1rem; overflow: hidden; }

.site { display: grid; gap: 0.9rem; height: 100%; align-content: start; }
.site i, .site b { display: block; border-radius: 0.35rem; transition: all 0.9s var(--ease); }
.site__nav { display: flex; align-items: center; gap: 0.5rem; }
.site__nav i { height: 0.45rem; width: 2rem; background: rgb(var(--ink) / 0.12); }
.site__nav .site__logo { width: 1.4rem; height: 1.4rem; border-radius: 0.4rem; margin-right: auto; }
.site__nav b { width: 3.5rem; height: 1.3rem; border-radius: var(--radius-pill); background: rgb(var(--ink) / 0.12); }
.site__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; align-items: center; padding-block: 0.6rem; }
.site__text { display: grid; gap: 0.45rem; }
.site__text i { height: 0.9rem; background: rgb(var(--ink) / 0.14); }
.site__text .l1 { width: 90%; height: 1.2rem; }
.site__text .l2 { width: 70%; height: 1.2rem; }
.site__text .l3 { width: 80%; height: 0.45rem; margin-top: 0.3rem; }
.site__btn { width: 5rem; height: 1.6rem; margin-top: 0.4rem; border-radius: var(--radius-pill) !important; background: rgb(var(--ink) / 0.14); }
.site__img { aspect-ratio: 4 / 3; border-radius: 0.6rem; background: rgb(var(--ink) / 0.08); position: relative; overflow: hidden; transition: all 0.9s var(--ease); }
.site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.site__cards i { height: 4.2rem; background: rgb(var(--ink) / 0.07); border-radius: 0.6rem; }

/* Zustand: Wireframe */
.browser.is-wire .site i,
.browser.is-wire .site b,
.browser.is-wire .site__img { background: transparent; outline: 1.5px dashed rgb(var(--ink) / 0.28); outline-offset: -1px; }
.browser.is-wire .site__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgb(var(--ink) / 0.2), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), rgb(var(--ink) / 0.2), transparent calc(50% + 1px));
}
/* Zustand: Design */
.browser.is-design .site__logo { background: linear-gradient(135deg, #ff7a5c, var(--accent-strong)); }
.browser.is-design .site__text .l1,
.browser.is-design .site__text .l2 { background: var(--text); }
.browser.is-design .site__text .l2 { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.browser.is-design .site__btn { background: var(--accent-strong); box-shadow: 0 6px 16px -6px var(--accent); }
.browser.is-design .site__nav b { background: var(--text); }
.browser.is-design .site__img {
  background:
    radial-gradient(circle at 70% 30%, rgb(255 255 255 / 0.5) 0 8%, transparent 9%),
    radial-gradient(120% 90% at 0% 100%, var(--accent-2), transparent 60%),
    linear-gradient(135deg, #ff8a66, var(--accent-strong) 60%, #8b2c6b);
}
.browser.is-design .site__cards i {
  background: linear-gradient(180deg, rgb(var(--ink) / 0.08), rgb(var(--ink) / 0.03));
  box-shadow: inset 0 0 0 1px var(--border);
}
.browser.is-design .site__cards i:nth-child(1) { background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.25), rgb(var(--ink) / 0.03)); }
/* Zustand: Tablet / Phone */
.browser.is-tablet { width: 72%; }
.browser.is-phone { width: 44%; border-radius: 1.6rem; }
.browser.is-phone .browser__url { display: none; }
.browser.is-phone .site__hero,
.browser.is-tablet .site__hero { grid-template-columns: 1fr; }
.browser.is-phone .site__img { order: -1; aspect-ratio: 16 / 9; }
.browser.is-phone .site__cards { grid-template-columns: 1fr; }
.browser.is-phone .site__nav i:not(.site__logo) { display: none; }
.browser.is-tablet .site__cards { grid-template-columns: repeat(2, 1fr); }

.stage-steps {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.stage-steps span {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-subtle);
  transition: all 0.4s var(--ease);
}
.stage-steps span.is-active {
  color: var(--text);
  border-color: rgb(var(--accent-rgb) / 0.6);
  background: rgb(var(--accent-rgb) / 0.12);
  box-shadow: 0 0 20px -6px var(--accent);
}

/* Lighthouse-Reihe */
.scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (min-width: 800px) { .scores { grid-template-columns: repeat(4, 1fr); } }
.score { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.score .gauge { width: 7rem; }
.score .gauge__num { font-size: 1.75rem; }
.score strong { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; }

/* ---------- Software: Editor + Architektur ---------- */
.layered { position: relative; padding-bottom: 5rem; }
.layered .media { width: 92%; margin-left: auto; }
.layered__float {
  position: absolute;
  z-index: 4;
  left: -1rem;
  bottom: 0;
  width: min(78%, 25rem);
}
@media (max-width: 959px) { .layered__float { left: 0; width: min(88%, 25rem); } }
.editor {
  border-radius: 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(13 13 16 / 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8);
  color: #d7d7db;
  overflow: hidden;
}
.editor__tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.8rem;
  height: 2.2rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #8a8a90;
}
.editor__tabs b { padding: 0.25rem 0.6rem; border-radius: 0.4rem; background: rgb(255 255 255 / 0.06); color: #e8e8ea; font-weight: 500; }
.editor__tabs b::before { content: "TS"; margin-right: 0.4rem; color: #3b82f6; font-weight: 700; }
.editor__code {
  margin: 0;
  padding: 0.9rem 0;
  font: 500 0.74rem/1.7 var(--font-mono);
  counter-reset: ln;
  overflow: hidden;
}
.editor__code span.ln {
  display: block;
  padding: 0 1rem 0 0;
  white-space: pre;
  counter-increment: ln;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s, transform 0.35s var(--ease), background-color 0.3s;
}
.editor__code span.ln::before {
  content: counter(ln);
  display: inline-block;
  width: 2.4rem;
  padding-right: 0.9rem;
  text-align: right;
  color: #55555c;
}
.editor__code span.ln.on { opacity: 1; transform: none; }
.editor__code span.ln.cur { background: rgb(255 255 255 / 0.05); }
.tk-k { color: #c084fc; } .tk-f { color: #60a5fa; } .tk-s { color: #4ade80; } .tk-c { color: #6b6b73; font-style: italic; } .tk-n { color: #fbbf24; } .tk-p { color: #f87171; }
.editor__out {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  font: 600 0.72rem var(--font-mono);
  color: #4ade80;
  opacity: 0;
  transition: opacity 0.4s;
}
.editor__out.on { opacity: 1; }
.editor__out::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }

.arch {
  position: relative;
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgb(var(--accent-2-rgb) / 0.12), transparent 60%),
    radial-gradient(rgb(var(--ink) / 0.09) 1px, transparent 1.5px);
  background-size: auto, 18px 18px;
  overflow: hidden;
}
.arch svg { width: 100%; height: auto; overflow: visible; }
.arch .wire { fill: none; stroke: rgb(var(--ink) / 0.16); stroke-width: 1.5; }
.arch .wire--flow { stroke: url(#flow); stroke-width: 2; stroke-dasharray: 6 10; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.arch .node rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.arch .node--main rect { stroke: rgb(var(--accent-rgb) / 0.7); filter: drop-shadow(0 0 18px rgb(var(--accent-rgb) / 0.35)); }
.arch .node text { fill: var(--text); font: 700 15px var(--font); }
.arch .node .sub { fill: var(--text-muted); font: 500 11px var(--font-mono); }
.arch .packet { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.arch .packet--2 { fill: var(--accent-2); filter: drop-shadow(0 0 6px var(--accent-2)); }

/* ---------- Beratung: Dashboard ---------- */
.dash {
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.6);
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}
.dash__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.dash__head b { color: var(--text); font-family: var(--font); font-size: 0.9rem; }
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.kpi { padding: 0.7rem; border-radius: 0.7rem; background: rgb(var(--ink) / 0.04); border: 1px solid var(--border); }
.kpi small { display: block; font-size: 0.62rem; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 0.65rem; font-weight: 700; color: var(--success); margin-left: 0.25rem; }
.dash__chart { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0.6rem; }
.chart { padding: 0.7rem; border-radius: 0.7rem; background: rgb(var(--ink) / 0.04); border: 1px solid var(--border); }
.chart small { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); }
.bars { display: flex; align-items: end; gap: 0.35rem; height: 6rem; margin-top: 0.5rem; }
.bars i {
  flex: 1;
  height: var(--h);
  border-radius: 0.3rem 0.3rem 0.1rem 0.1rem;
  background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / 0.25));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i) * 80ms);
}
.bars i:nth-child(odd) { background: linear-gradient(180deg, var(--accent-2), rgb(var(--accent-2-rgb) / 0.2)); }
.is-live .bars i { transform: scaleY(1); }
.line { width: 100%; height: 6rem; margin-top: 0.5rem; overflow: visible; }
.line path.stroke { fill: none; stroke: var(--success); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 2.2s var(--ease) 0.3s; filter: drop-shadow(0 4px 8px rgb(34 197 94 / 0.4)); }
.line path.area { fill: url(#area); opacity: 0; transition: opacity 1s 1.2s; }
.is-live .line path.stroke { stroke-dashoffset: 0; }
.is-live .line path.area { opacity: 1; }
.dash__note { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-subtle); text-align: right; }

/* ---------- Über mich: 3D-Orbit ---------- */
.orbit { position: relative; }
.orbit__photo { position: relative; z-index: 2; }
.orbit__ring { position: absolute; inset: 0; pointer-events: none; }
.orbit__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.4rem;
  height: 3.4rem;
  margin: -1.7rem 0 0 -1.7rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: rgb(var(--surface-rgb) / 0.85);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.5);
  will-change: transform;
}
.orbit__item img { width: 1.8rem; height: 1.8rem; object-fit: contain; }

/* ---------- Leistungen: 3D-Kartenfächer ---------- */
.fan {
  position: relative;
  height: 24rem;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  perspective: 1600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fan__card {
  position: absolute;
  width: min(19rem, 70vw);
  aspect-ratio: 3 / 4;
  border-radius: 1.4rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7);
  transition: transform 0.9s var(--ease), box-shadow 0.6s;
  color: #fff;
}
.fan__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fan__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 10 12 / 0.1) 30%, rgb(10 10 12 / 0.92));
}
.fan__body { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; display: grid; gap: 0.5rem; }
.fan__body small { font-family: var(--font-mono); font-size: 0.7rem; color: rgb(255 255 255 / 0.7); letter-spacing: 0.05em; }
.fan__body strong { font-size: 1.5rem; letter-spacing: -0.02em; }
.fan__card:nth-child(1) { transform: translateX(-62%) rotateY(28deg) rotateZ(-6deg) translateZ(-60px); }
.fan__card:nth-child(2) { transform: translateZ(40px); z-index: 2; }
.fan__card:nth-child(3) { transform: translateX(62%) rotateY(-28deg) rotateZ(6deg) translateZ(-60px); }
.fan:hover .fan__card:nth-child(1) { transform: translateX(-102%) rotateY(14deg) rotateZ(-3deg); }
.fan:hover .fan__card:nth-child(3) { transform: translateX(102%) rotateY(-14deg) rotateZ(3deg); }
.fan__card:hover { box-shadow: 0 50px 100px -30px rgb(var(--accent-rgb) / 0.5); }
@media (max-width: 700px) {
  .fan { height: 20rem; }
  .fan__card { width: 13rem; }
  .fan__card:nth-child(1) { transform: translateX(-45%) rotateY(25deg) rotateZ(-6deg) translateZ(-60px); }
  .fan__card:nth-child(3) { transform: translateX(45%) rotateY(-25deg) rotateZ(6deg) translateZ(-60px); }
}

/* ---------- Leistungen: Scrollytelling ---------- */
.scrolly { display: grid; gap: var(--space-7); }
@media (min-width: 960px) {
  .scrolly { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
  .scrolly__media { position: sticky; top: calc(50vh - 15rem); height: 30rem; order: 2; }
  .scrolly__step { min-height: 70vh; display: grid; align-content: center; }
  .scrolly__step .media { display: none; }
}
.scrolly__media { display: none; }
@media (min-width: 960px) { .scrolly__media { display: block; } }
.scrolly__frame {
  position: relative;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop);
}
.scrolly__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.12);
  transition: clip-path 1s var(--ease), transform 1.4s var(--ease);
}
.scrolly__frame img.is-active { clip-path: inset(0 0 0 0); transform: scale(1); }
.scrolly__index {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 0.35rem;
}
.scrolly__index i { width: 1.6rem; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.35); transition: background-color 0.4s, width 0.4s var(--ease); }
.scrolly__index i.is-active { width: 3rem; background: #fff; }
.scrolly__step { opacity: 0.35; transition: opacity 0.6s; }
.scrolly__step.is-current { opacity: 1; }
@media (max-width: 959px) { .scrolly__step { opacity: 1; } }

/* ---------- FAQ: Suche ---------- */
.faq-search { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.faq-search__field {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.6), rgb(var(--accent-2-rgb) / 0.5), rgb(var(--ink) / 0.1)) border-box;
  box-shadow: 0 20px 50px -25px rgb(var(--accent-rgb) / 0.5);
}
.faq-search__field svg { position: absolute; left: 1.2rem; width: 1.2rem; height: 1.2rem; color: var(--text-muted); }
.faq-search__field input {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.9rem 6rem 0.9rem 3.2rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  outline: none;
}
.faq-search__field input::placeholder { color: var(--text-subtle); }
.faq-search__field:focus-within { box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.15), 0 20px 50px -25px rgb(var(--accent-rgb) / 0.6); }
.faq-search__count { position: absolute; right: 1.25rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-subtle); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font: 600 0.75rem var(--font-mono);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.chip:hover { color: var(--text); border-color: rgb(var(--ink) / 0.35); }
.chip[aria-pressed="true"] { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 8px 20px -8px var(--accent); }
.faq details[hidden] { display: none; }
.faq mark { background: rgb(var(--accent-rgb) / 0.25); color: inherit; border-radius: 0.2rem; padding: 0 0.1rem; }
.faq-empty { padding: var(--space-6) 0; color: var(--text-muted); text-align: center; }

/* ---------- Rechtstexte: Scrollspy ---------- */
.legal__toc a { position: relative; padding-left: 0.9rem; transition: color 0.3s; }
.legal__toc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.35rem;
  height: 0.35rem;
  margin-top: -0.175rem;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.legal__toc a.is-active { color: var(--text); }
.legal__toc a.is-active::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ---------- 404: Glitch ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}
.glitch::before { color: var(--accent-2); -webkit-text-fill-color: var(--accent-2); animation: glitch 3s infinite steps(1); clip-path: inset(0 0 60% 0); opacity: 0.7; }
.glitch::after { color: var(--accent); -webkit-text-fill-color: var(--accent); animation: glitch 2.4s infinite reverse steps(1); clip-path: inset(55% 0 0 0); opacity: 0.7; }
@keyframes glitch {
  0%, 86%, 100% { transform: none; }
  88% { transform: translate(-6px, 2px); }
  90% { transform: translate(6px, -2px); }
  92% { transform: translate(-3px, 0); }
  94% { transform: translate(4px, 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .floating, .glitch::before, .glitch::after, .arch .wire--flow { animation: none; }
  .scrolly__frame img { transition: none; }
}
.site__text .l4 { width: 60%; }
.orbit { isolation: isolate; }
.split > .stack > .eyebrow::before,
.profile .stack > .eyebrow::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) " //";
}
.editor__out { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Startseite: 3D-Bühne aus echten Interfaces ---------- */
.collage--ui { align-items: center; }
.collage--ui .collage__item {
  position: relative;
  aspect-ratio: auto;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 1rem;
}
.collage--ui .collage__item--main { box-shadow: none; }
.collage--ui .browser__screen { height: 18rem; }
.collage--ui .editor { box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7); }
.collage--ui .editor__code { font-size: 0.7rem; }
.collage--ui .dash { padding: 0.85rem; }
.collage--ui .bars { height: 5rem; }
.dash__kpis--2 { grid-template-columns: repeat(2, 1fr); }
.collage__tag {
  position: absolute;
  left: 50%;
  bottom: -2.2rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
}
@media (max-width: 640px) {
  .collage--ui .browser__screen { height: 15rem; }
}

/* ---------- Mini-Visuals statt Stock-Fotos ---------- */
.svc {
  display: grid;
  place-items: center;
  background-color: rgb(var(--ink) / 0.02);
  background-image:
    radial-gradient(ellipse at 50% 120%, rgb(var(--accent-rgb) / 0.22), transparent 60%),
    radial-gradient(rgb(var(--ink) / 0.10) 1px, transparent 1.5px);
  background-size: auto, 14px 14px;
  border-bottom: 1px solid var(--border);
}
.svc i { display: block; border-radius: 0.3rem; transition: transform 0.7s var(--ease), background-color 0.5s, width 0.7s var(--ease); }

/* Webdesign: Layout setzt sich zusammen */
.svc-web {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 0.5rem 0.7rem 0.7rem 0.9rem 1.6rem;
  gap: 0.45rem;
  width: 62%;
  padding: 0.9rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.6);
}
.svc-web .n { grid-column: 1 / -1; background: rgb(var(--ink) / 0.1); }
.svc-web .h1 { grid-column: 1 / 4; background: var(--text); }
.svc-web .h2 { grid-column: 1 / 3; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.svc-web .cta { grid-column: 1 / 3; background: var(--accent-strong); border-radius: 999px; }
.svc-web .img { grid-column: 4 / 7; grid-row: 2 / 5; border-radius: 0.5rem; background: linear-gradient(135deg, #ff8a66, var(--accent-strong) 55%, var(--accent-2)); }
.svc-web .c { grid-row: 5; grid-column: span 2; background: rgb(var(--ink) / 0.08); border-radius: 0.45rem; }
.service-card:hover .svc-web .img { transform: translate(6px, -6px) rotate(3deg); }
.service-card:hover .svc-web .h1 { transform: translateX(6px); }
.service-card:hover .svc-web .c1 { transform: translateY(-5px); transition-delay: 0.05s; }
.service-card:hover .svc-web .c2 { transform: translateY(-5px); transition-delay: 0.12s; }
.service-card:hover .svc-web .c3 { transform: translateY(-5px); transition-delay: 0.19s; }

/* Software: Code läuft */
.svc-code {
  display: grid;
  gap: 0.5rem;
  width: 64%;
  padding: 1rem;
  border-radius: 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #0e0e11;
  box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.7);
}
.svc-code i {
  height: 0.42rem;
  width: var(--w, 50%);
  margin-left: calc(var(--x, 0) * 0.9rem);
  background: var(--c, rgb(255 255 255 / 0.32));
}
.svc-code .caret {
  width: 0.45rem;
  height: 0.8rem;
  border-radius: 1px;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}
.service-card:hover .svc-code i:not(.caret) { width: calc(var(--w, 50%) + 12%); }

/* Beratung: Kennzahlen wachsen */
.svc-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  width: 62%;
  height: 58%;
  padding: 0.8rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.6);
}
.svc-chart i {
  flex: 1;
  height: var(--h);
  border-radius: 0.25rem 0.25rem 0.1rem 0.1rem;
  background: linear-gradient(180deg, var(--accent-2), rgb(var(--accent-2-rgb) / 0.2));
  transform-origin: bottom;
}
.svc-chart i:nth-child(even) { background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / 0.2)); }
.svc-chart svg { position: absolute; inset: 0.8rem; width: calc(100% - 1.6rem); height: calc(100% - 1.6rem); overflow: visible; }
.svc-chart path { fill: none; stroke: var(--success); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 160; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease); }
.service-card:hover .svc-chart i { transform: scaleY(1.12); }
.service-card:hover .svc-chart path { animation: draw 1.2s var(--ease); }
@keyframes draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
.service-card:has(.svc) .service-card__media::after { display: none; }

/* ---------- Tabs (Software-Lösungen) ---------- */
.tabs { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .tabs { grid-template-columns: 22rem 1fr; gap: var(--space-7); align-items: start; } }
.tabs__list { display: grid; gap: 0.5rem; }
@media (max-width: 959px) {
  .tabs__list { grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; }
  .tabs__tab { scroll-snap-align: start; }
}
.tabs__tab {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.tabs__tab:hover { color: var(--text); border-color: var(--border-strong); }
.tabs__tab[aria-selected="true"] {
  color: var(--text);
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgb(var(--accent-rgb) / 0.7), rgb(var(--accent-2-rgb) / 0.4), rgb(var(--ink) / 0.08)) border-box;
  box-shadow: 0 20px 40px -24px rgb(var(--accent-rgb) / 0.5);
}
.tabs__num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-subtle); }
.tabs__tab[aria-selected="true"] .tabs__num { color: var(--accent-text); }
.tabs__icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 0.6rem; background: rgb(var(--ink) / 0.05); }
.tabs__tab[aria-selected="true"] .tabs__icon { background: rgb(var(--accent-rgb) / 0.16); color: var(--accent-text); }
.tabs__icon svg { width: 1.1rem; height: 1.1rem; }
.tabs__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.tabs__tab[aria-selected="true"] .tabs__bar { transform: scaleX(var(--progress, 1)); }
.tabs__panel {
  display: grid;
  gap: var(--space-6);
  animation: panel-in 0.7s var(--ease);
}
@media (min-width: 700px) { .tabs__panel { grid-template-columns: 1fr 1fr; align-items: center; } }
.tabs__panel[hidden] { display: none; }
.tabs__media { aspect-ratio: 4 / 3; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }

/* ---------- Webdesign: Phasen-Mockups ---------- */
.phase__visual {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  background-color: rgb(var(--ink) / 0.02);
  background-image:
    radial-gradient(ellipse at 70% 100%, rgb(var(--accent-2-rgb) / 0.18), transparent 60%),
    radial-gradient(ellipse at 20% 0%, rgb(var(--accent-rgb) / 0.16), transparent 55%),
    radial-gradient(rgb(var(--ink) / 0.09) 1px, transparent 1.5px);
  background-size: auto, auto, 16px 16px;
}
.phase__visual > * {
  width: min(100%, 24rem);
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55);
  transition: transform 0.8s var(--ease);
}
.phase:hover .phase__visual > * { transform: translateY(-6px) rotate(-1deg); }

.serp { padding: 1rem; display: grid; gap: 0.75rem; }
.serp__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.85rem; }
.serp__bar svg { width: 1rem; height: 1rem; color: var(--text-muted); }
.serp__item { position: relative; display: grid; gap: 0.3rem; padding: 0.75rem; border-radius: 0.7rem; }
.serp__item i { display: block; height: 0.45rem; border-radius: 0.3rem; background: rgb(var(--ink) / 0.1); }
.serp__item.is-you { background: rgb(var(--accent-rgb) / 0.08); border: 1px solid rgb(var(--accent-rgb) / 0.35); }
.serp__item small { font-size: 0.68rem; color: var(--success); font-family: var(--font-mono); }
.serp__item b { font-size: 0.95rem; color: #6ea8ff; }
.serp__item span { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.serp__item em { position: absolute; top: -0.6rem; right: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--accent-strong); color: #fff; font: 700 0.65rem var(--font-mono); font-style: normal; box-shadow: 0 6px 16px -6px var(--accent); }

.trust { overflow: hidden; }
.trust__url { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); font: 500 0.78rem var(--font-mono); }
.trust__url svg { width: 1rem; height: 1rem; color: var(--success); }
.trust__url em { margin-left: auto; font-style: normal; font-size: 0.68rem; color: var(--success); padding: 0.1rem 0.5rem; border-radius: 999px; background: rgb(34 197 94 / 0.12); }
.trust__list { list-style: none; margin: 0; padding: 0.6rem 1rem 1rem; display: grid; gap: 0.15rem; }
.trust__list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; font-size: 0.85rem; font-weight: 500; border-bottom: 1px dashed var(--border); opacity: 0.35; transition: opacity 0.4s; }
.trust__list li:last-child { border-bottom: 0; }
.trust__list li span { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgb(34 197 94 / 0.15); color: var(--success); transform: scale(0); transition: transform 0.5s var(--ease); }
.trust__list svg { width: 0.8rem; height: 0.8rem; }
.phase.is-visible .trust__list li { opacity: 1; }
.phase.is-visible .trust__list li span { transform: scale(1); }
.trust__list li:nth-child(2), .trust__list li:nth-child(2) span { transition-delay: 0.25s; }
.trust__list li:nth-child(3), .trust__list li:nth-child(3) span { transition-delay: 0.5s; }
.trust__list li:nth-child(4), .trust__list li:nth-child(4) span { transition-delay: 0.75s; }
.trust__list li:nth-child(5), .trust__list li:nth-child(5) span { transition-delay: 1s; }

.formmock { position: relative; padding: 1.1rem; display: grid; gap: 0.7rem; }
.formmock > b { font-size: 1rem; }
.formmock__field { display: grid; gap: 0.2rem; padding: 0.55rem 0.75rem; border-radius: 0.6rem; border: 1px solid var(--border-strong); }
.formmock__field small { font: 600 0.62rem var(--font-mono); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.formmock__field span { font-size: 0.85rem; }
.formmock .typing { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--accent); }
.phase.is-visible .formmock .typing { animation: type 2.2s steps(28) 0.4s forwards, caret 0.8s step-end infinite; }
@keyframes type { to { width: 28ch; } }
@keyframes caret { 50% { border-color: transparent; } }
.formmock__btn { padding: 0.65rem; border-radius: 999px; text-align: center; color: #fff; font-weight: 700; font-size: 0.85rem; background: linear-gradient(120deg, #ff6b4a, #e5392d 45%, #c32c5a); }
.formmock__toast {
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 16px 30px -12px rgb(0 0 0 / 0.5);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.5s var(--ease) 2.9s, transform 0.5s var(--ease) 2.9s;
}
.formmock__toast svg { width: 0.9rem; height: 0.9rem; color: var(--success); }
.phase.is-visible .formmock__toast { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .formmock .typing { width: auto; animation: none !important; border: 0; }
}

/* ---------- Über mich: Netzwerk-Graph ---------- */
.network {
  position: relative;
  height: clamp(22rem, 18rem + 12vw, 30rem);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image:
    radial-gradient(circle at 50% 50%, rgb(var(--accent-rgb) / 0.16), transparent 45%),
    radial-gradient(rgb(var(--ink) / 0.08) 1px, transparent 1.5px);
  background-size: auto, 18px 18px;
  overflow: hidden;
}
.network__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.network__lines path { fill: none; vector-effect: non-scaling-stroke; }
.network__lines .base path { stroke: rgb(var(--ink) / 0.14); stroke-width: 1.5; }
.network__lines .flow path {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 4 14;
  animation: dash 1.4s linear infinite;
  opacity: 0;
  transition: opacity 0.8s 0.6s;
}
.network.is-visible .network__lines .flow path { opacity: 0.85; }
.network__lines .flow path:nth-child(even) { stroke: var(--accent-2); animation-duration: 1.8s; }
.network__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 1rem 1.4rem;
  border-radius: 1.2rem;
  background: rgb(var(--surface-rgb) / 0.9);
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  box-shadow: 0 0 0 8px rgb(var(--accent-rgb) / 0.08), 0 0 60px rgb(var(--accent-rgb) / 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  z-index: 2;
}
.network__center img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--accent); }
.network__center b { font-size: 1rem; }
.network__center small { font: 500 0.68rem var(--font-mono); color: var(--text-muted); }
.network__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgb(var(--surface-rgb) / 0.92);
  border: 1px solid var(--border-strong);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: transform 0.8s var(--ease), opacity 0.6s, border-color 0.3s;
  transition-delay: var(--d);
}
.network__node svg { width: 1rem; height: 1rem; color: var(--accent-text); }
.network.is-visible .network__node { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.network__node:hover { border-color: rgb(var(--accent-rgb) / 0.6); }
@media (max-width: 600px) {
  .network__node { font-size: 0.7rem; padding: 0.4rem 0.6rem; gap: 0.35rem; }
  .network__node svg { display: none; }
  .network__center img { width: 3rem; height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .network__node { transform: translate(-50%, -50%); opacity: 1; }
}

/* ---------- Beratung: Kanban & Ranking ---------- */
.mockframe {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
  background-color: rgb(var(--ink) / 0.02);
  background-image:
    radial-gradient(ellipse at 80% 0%, rgb(var(--accent-2-rgb) / 0.18), transparent 55%),
    radial-gradient(rgb(var(--ink) / 0.09) 1px, transparent 1.5px);
  background-size: auto, 16px 16px;
}
.mockframe > * {
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55);
  padding: 0.9rem;
}
.kanban__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.kanban__head b { font-size: 0.9rem; }
.kanban__head span { font: 500 0.65rem var(--font-mono); color: var(--text-muted); }
.kanban__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.kanban__col { display: grid; gap: 0.4rem; align-content: start; min-height: 9rem; padding: 0.5rem; border-radius: 0.6rem; background: rgb(var(--ink) / 0.04); }
.kanban__col small { font: 600 0.62rem var(--font-mono); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.k {
  display: block;
  padding: 0.5rem 0.55rem;
  border-radius: 0.45rem;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 4px 10px -6px rgb(0 0 0 / 0.4);
}
.k--done { opacity: 0.6; text-decoration: line-through; }
.k--move { border-color: rgb(var(--accent-rgb) / 0.6); box-shadow: 0 10px 24px -10px rgb(var(--accent-rgb) / 0.6); }
.is-visible .k--move { animation: kmove 5s var(--ease) 0.8s infinite; }
@keyframes kmove {
  0%, 15% { transform: none; }
  40%, 70% { transform: translateX(calc(100% + 1.4rem)) rotate(-3deg); }
  85%, 100% { transform: translateX(calc(100% + 1.4rem)); opacity: 0.6; }
}

.ranking__chart { width: 100%; height: 8rem; overflow: visible; }
.ranking__chart .stroke { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2.4s var(--ease) 0.3s; filter: drop-shadow(0 4px 10px rgb(var(--accent-rgb) / 0.5)); }
.ranking__chart .area { fill: url(#rank-area); opacity: 0; transition: opacity 1s 1.6s; }
.is-visible .ranking__chart .stroke { stroke-dashoffset: 0; }
.is-visible .ranking__chart .area { opacity: 1; }
.ranking__kw { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.ranking__kw li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.6rem; border-radius: 0.45rem; background: rgb(var(--ink) / 0.04); font-size: 0.72rem; }
.ranking__kw em { font: 700 0.7rem var(--font-mono); font-style: normal; color: var(--success); }
@media (prefers-reduced-motion: reduce) { .is-visible .k--move { animation: none; } }

/* ---------- Impressum: Angaben als Karten ---------- */
.prose--cards { max-width: none; display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .prose--cards { grid-template-columns: repeat(2, 1fr); } }
.prose--cards > * + * { margin-top: 0; }
.prose--cards section,
.prose--cards section + section {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.prose--cards section:first-child {
  grid-column: 1 / -1;
  font-size: var(--fs-lg);
  color: var(--text);
  border-color: rgb(var(--accent-rgb) / 0.4);
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / 0.12), transparent 60%),
    var(--surface);
}
.prose--cards h2 { font-size: 0.75rem; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--space-3); }
.svc-web .n { grid-row: 1; } .svc-web .h1 { grid-row: 2; } .svc-web .h2 { grid-row: 3; } .svc-web .cta { grid-row: 4; height: 0.9rem; } .svc-web .c1 { grid-column: 1 / 3; } .svc-web .c2 { grid-column: 3 / 5; } .svc-web .c3 { grid-column: 5 / 7; }
@media (min-width: 760px) { .prose--cards section:last-child:nth-child(even) { grid-column: 1 / -1; } }
@media (max-width: 760px) { .arch { overflow-x: auto; } .arch svg { min-width: 660px; } }
@media (max-width: 699px) { .stage-steps span:nth-child(n+3) { display: none; } }

/* Menschliche Momente */
.media--banner { aspect-ratio: 21 / 8; margin-bottom: var(--space-8); }
@media (max-width: 700px) { .media--banner { aspect-ratio: 4 / 3; } }
.cta-person { display: flex; align-items: center; gap: var(--space-4); padding: 0.6rem 1.1rem 0.6rem 0.6rem; border-radius: 999px; border: 1px solid var(--border-strong); background: rgb(var(--bg-rgb) / 0.45); justify-self: start; }
.cta-person img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.15); }
.cta-person strong { display: block; font-size: var(--fs-sm); }
.cta-person span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- Über mich: rundes Porträt im Orbit ---------- */
.orbit--avatar {
  width: min(100%, 30rem);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.orbit--avatar .orbit__photo {
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  box-shadow:
    0 0 0 10px rgb(var(--accent-rgb) / 0.06),
    0 0 0 22px rgb(var(--accent-rgb) / 0.03),
    0 40px 90px -30px rgb(var(--accent-rgb) / 0.55);
}
.orbit--avatar .orbit__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.orbit__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px dashed rgb(var(--ink) / 0.18);
  animation: spin 40s linear infinite;
  pointer-events: none;
}
.orbit__halo::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.orbit--avatar .orbit__item { width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; }
.orbit--avatar .orbit__item img { width: 1.6rem; height: 1.6rem; }
.grid > .service-card::after { content: none; }
@media (prefers-reduced-motion: reduce) { .orbit__halo { animation: none; } }

/* ==========================================================================
   Motion-Ebene 3: Überschriften, Labels, Icons, Listen, Bilder, Footer
   ========================================================================== */

/* Section-H2: Wörter steigen aus der Maske (leichter als die Hero-Variante) */
.h2.is-split .split-word > span,
h2.is-split .split-word > span {
  filter: none;
  transform: translateY(110%);
  opacity: 1;
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i) * 55ms + 120ms);
}
.is-visible .is-split .split-word > span,
.is-split.is-visible .split-word > span { transform: none; filter: none; opacity: 1; }

/* Gezeichnete Unterstreichung am letzten Wort */
.split-word.hl { position: relative; }
.split-word.hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.05em;
  bottom: 0.02em;
  height: 0.07em;
  border-radius: 1em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--n) * 55ms + 450ms);
}
.is-visible .split-word.hl::after,
.is-split.is-visible .split-word.hl::after { transform: scaleX(1); }

/* Icons zeichnen sich */
.js svg.draw path,
.js svg.draw circle,
.js svg.draw rect,
.js svg.draw ellipse {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease) 0.25s;
}
.js .is-visible svg.draw path,
.js .is-visible svg.draw circle,
.js .is-visible svg.draw rect,
.js .is-visible svg.draw ellipse,
.js svg.draw.is-visible * { stroke-dashoffset: 0; }

/* Gestaffelte Listen */
.js .stagger > * {
  opacity: 0;
  translate: -10px 0;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease), padding-left 0.4s var(--ease), background-color 0.3s;
  transition-delay: calc(var(--si, 0) * 70ms + 0.25s);
}
.js .is-visible .stagger > *,
.js .stagger.is-visible > * { opacity: 1; translate: 0 0; }
.js .chips.stagger > * { translate: 0 6px; }

/* Bilder öffnen sich wie ein Vorhang */
.js .media[data-reveal],
.js .layered[data-reveal] > .media,
.js .scrolly__step .media {
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: inset(10% 10% 10% 10% round var(--radius-lg));
  transition: clip-path 1.3s var(--ease), translate 0.2s;
}
.js .media[data-reveal].is-visible,
.js .layered[data-reveal].is-visible > .media,
.js .is-visible .scrolly__step .media,
.js .scrolly__step .media { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
.js .media[data-reveal] > img,
.js .media[data-reveal] > video,
.js .layered[data-reveal] > .media > img,
.js .layered[data-reveal] > .media > video {
  scale: 1.18;
  transition: scale 1.8s var(--ease), transform 1.2s var(--ease);
}
.js .media[data-reveal].is-visible > img,
.js .media[data-reveal].is-visible > video,
.js .layered[data-reveal].is-visible > .media > img,
.js .layered[data-reveal].is-visible > .media > video { scale: 1; }

/* Tech-Kacheln klappen in 3D herunter */
.js .tech[data-reveal] {
  transform: perspective(700px) rotateX(-70deg);
  transform-origin: 50% 0;
  filter: none;
  transition: opacity 0.7s var(--ease), transform 1s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .tech[data-reveal].is-visible { transform: none; }

/* Karten: sanft aus der Tiefe */
.js .grid > .card[data-reveal],
.js .bento > [data-reveal] {
  transform: perspective(900px) translateY(30px) rotateX(10deg);
  transform-origin: 50% 100%;
}
.js .grid > .card[data-reveal].is-visible,
.js .bento > [data-reveal].is-visible { transform: none; }

/* Footer-Schriftzug */
.footer-wordmark span {
  display: inline-block;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(40%);
  opacity: 0;
  transition: transform 1s var(--ease), opacity 0.8s;
  transition-delay: calc(var(--i) * 45ms);
}
.footer-wordmark.is-visible span { transform: none; opacity: 1; }
.footer-wordmark:hover span { animation: wave 0.7s var(--ease); animation-delay: calc(var(--i) * 45ms); }
@keyframes wave { 40% { transform: translateY(-12%); } }
.js .footer-wordmark[data-reveal] { opacity: 1; transform: none; filter: none; }

/* Mono-Labels: feste Breite beim Dekodieren, damit nichts springt */
.eyebrow { font-variant-numeric: tabular-nums; }

/* FAQ-Antwort beim Animieren */
.faq__answer { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js svg.draw * { stroke-dashoffset: 0 !important; }
  .js .stagger > * { opacity: 1; translate: none; }
  .js .media[data-reveal], .js .layered[data-reveal] > .media { clip-path: none; }
  .js .media[data-reveal] > img, .js .media[data-reveal] > video { scale: 1; }
  .js .tech[data-reveal], .js .grid > .card[data-reveal], .js .bento > [data-reveal] { transform: none; }
  .footer-wordmark span { transform: none; opacity: 1; }
}

/* Solo-Bühne: ein Interface, keine Überlagerung */
.stage--solo { display: grid; place-items: center; padding: 1.5rem 0; }
.stage--solo::before { content: ""; position: absolute; inset: 10% 5%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.28), rgb(var(--accent-2-rgb) / 0.12) 60%, transparent); filter: blur(30px); }
.stage--solo > .editor, .stage--solo > .dash { width: 100%; transform: perspective(1400px) rotateY(-8deg) rotateX(4deg); transition: transform 0.8s var(--ease); }
.stage--solo:hover > .editor, .stage--solo:hover > .dash { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.editor--lg .editor__code { font-size: 0.82rem; }
.dash--lg .bars { height: 8rem; } .dash--lg .line { height: 8rem; } .dash--lg .kpi strong { font-size: 1.6rem; }
@media (max-width: 959px) { .stage--solo > .editor, .stage--solo > .dash { transform: none; } }

/* Fächer: weiter aufgefächert, damit kein Titel verdeckt wird */
.fan__card:nth-child(1) { transform: translateX(-96%) rotateY(18deg) rotateZ(-4deg) translateZ(-60px) scale(0.92); }
.fan__card:nth-child(3) { transform: translateX(96%) rotateY(-18deg) rotateZ(4deg) translateZ(-60px) scale(0.92); }
.fan:hover .fan__card:nth-child(1) { transform: translateX(-108%) rotateY(10deg) rotateZ(-2deg) scale(0.96); }
.fan:hover .fan__card:nth-child(3) { transform: translateX(108%) rotateY(-10deg) rotateZ(2deg) scale(0.96); }
@media (max-width: 700px) { .fan { height: auto; display: grid; gap: 1rem; perspective: none; } .fan__card { position: relative; width: 100%; aspect-ratio: 16 / 10; } .fan__card:nth-child(n) { transform: none; } .fan:hover .fan__card:nth-child(n) { transform: none; } }

/* ==========================================================================
   Inhalts-Komponenten: Anwendungsfälle, Wegweiser, Leistungsumfang,
   Vorher/Nachher, Selbsttest
   ========================================================================== */

/* Anwendungsfälle */
.usecase { transition: transform 0.5s var(--ease); }
.usecase:hover { transform: translateY(-4px); }
.usecase__tag {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  transition: color 0.3s, letter-spacing 0.4s var(--ease);
}
.usecase:hover .usecase__tag { color: var(--accent-text); letter-spacing: 0.1em; }

/* Wegweiser (Tabs ohne Bild) */
.tabs__panel--single { grid-template-columns: 1fr !important; }
.pick {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / 0.14), transparent 55%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgb(var(--accent-rgb) / 0.6), rgb(var(--accent-2-rgb) / 0.35), rgb(var(--ink) / 0.06)) border-box;
  box-shadow: var(--shadow);
}
.pick__label {
  justify-self: start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent-text);
  font: 600 0.7rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pick__head { display: flex; align-items: center; gap: var(--space-4); }
.pick .checklist { grid-template-columns: 1fr; }
@media (min-width: 700px) { .pick .checklist { grid-template-columns: repeat(3, 1fr); } }

/* Leistungsumfang */
.included { gap: var(--space-5); }
.included__label {
  justify-self: start;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.included__label--always { border-color: transparent; background: var(--accent-strong); color: #fff; box-shadow: 0 8px 20px -8px var(--accent); }
.included .checklist li { font-size: var(--fs-base); }

/* Vorher / Nachher */
.ba-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  justify-self: start;
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.ba-toggle button {
  position: relative;
  z-index: 1;
  min-width: 7rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: 700 0.85rem var(--font);
  cursor: pointer;
  transition: color 0.3s;
}
.ba-toggle button[aria-pressed="true"] { color: #fff; }
.ba-toggle__pill {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0.3rem;
  width: calc(50% - 0.3rem);
  border-radius: 999px;
  background: rgb(var(--ink) / 0.35);
  transition: transform 0.5s var(--ease), background-color 0.4s;
}
[data-state="after"] .ba-toggle__pill { transform: translateX(100%); background: linear-gradient(120deg, #ff6b4a, #e5392d 45%, #c32c5a); box-shadow: 0 8px 20px -8px var(--accent); }
.ba { position: relative; }
.ba p { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), filter 0.5s; }
.ba { grid-template-rows: auto auto 1fr; }
.ba__before, .ba__after { grid-row: 3; grid-column: 1; position: static; }
[data-state="before"] .ba__after,
[data-state="after"] .ba__before { opacity: 0; transform: translateY(10px); filter: blur(4px); pointer-events: none; }
.ba__chip {
  display: block;
  width: max-content;
  margin-bottom: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font: 700 0.65rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ba__chip--before { background: rgb(var(--ink) / 0.08); color: var(--text-muted); }
.ba__chip--after { background: rgb(34 197 94 / 0.14); color: var(--success); }
[data-state="after"] .ba .card__icon { background: linear-gradient(145deg, rgb(34 197 94 / 0.25), rgb(var(--accent-2-rgb) / 0.1)) padding-box, linear-gradient(145deg, rgb(34 197 94 / 0.7), rgb(var(--ink) / 0.06)) border-box; color: var(--success); }

/* Selbsttest */
.qc { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .qc { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.qc__list { display: grid; gap: 0.6rem; }
.qc__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-weight: 500;
  transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease);
}
.qc__item:hover { border-color: var(--border-strong); transform: translateX(4px); }
.qc__item input { position: absolute; opacity: 0; pointer-events: none; }
.qc__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.5rem;
  border: 1.5px solid var(--border-strong);
  transition: background-color 0.3s, border-color 0.3s;
}
.qc__box svg { width: 1rem; height: 1rem; color: #fff; transform: scale(0); transition: transform 0.35s var(--ease); }
.qc__item:has(input:checked) { border-color: rgb(var(--accent-rgb) / 0.55); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.10), var(--surface) 70%); }
.qc__item:has(input:checked) .qc__box { background: var(--accent-strong); border-color: var(--accent-strong); }
.qc__item:has(input:checked) .qc__box svg { transform: scale(1); }
.qc__item:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.qc__result {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(160deg, rgb(var(--accent-rgb) / 0.55), rgb(var(--accent-2-rgb) / 0.3), rgb(var(--ink) / 0.06)) border-box;
  box-shadow: var(--shadow-pop);
}
.qc__meter { position: relative; width: 9rem; aspect-ratio: 1; }
.qc__meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qc__meter circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.qc__value {
  stroke: var(--accent);
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--qc, 0) * 100);
  transition: stroke-dashoffset 0.8s var(--ease), stroke 0.4s;
  filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / 0.5));
}
.qc__score { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.qc__score small { font-size: 1rem; color: var(--text-subtle); margin-left: 0.1rem; }
.qc__score { grid-auto-flow: column; align-content: center; justify-content: center; align-items: baseline; }
.qc__title { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.qc__text { color: var(--text-muted); max-width: 26rem; }

/* ---------- Software: fünf Bausteine als Bento ---------- */
.sol-grid { display: grid; gap: var(--space-4); counter-reset: card; }
@media (min-width: 760px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } .sol--wide { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .sol-grid { grid-template-columns: repeat(4, 1fr); }
  .sol--wide { grid-column: 1 / -1; }
}
.sol { padding: 0; overflow: hidden; gap: 0; grid-template-rows: auto 1fr; counter-increment: card; }
.sol::after {
  content: "/" counter(card, decimal-leading-zero);
  position: absolute; top: 1rem; right: 1.25rem; z-index: 2;
  font: 500 0.72rem var(--font-mono); color: var(--text-subtle);
}
.sol__visual {
  display: grid;
  place-items: center;
  min-height: 11rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--border);
  background-color: rgb(var(--ink) / 0.02);
  background-image:
    radial-gradient(ellipse at 50% 120%, rgb(var(--accent-rgb) / 0.16), transparent 60%),
    radial-gradient(rgb(var(--ink) / 0.09) 1px, transparent 1.5px);
  background-size: auto, 14px 14px;
}
.sol__body { display: grid; gap: var(--space-4); align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.sol__head { display: flex; align-items: center; gap: var(--space-3); }
.sol__head .card__icon { width: 2.5rem; height: 2.5rem; flex: none; }
.sol p { color: var(--text-muted); font-size: var(--fs-sm); }
@media (min-width: 1100px) {
  .sol--wide { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr; }
  .sol--wide .sol__visual { border-bottom: 0; border-right: 1px solid var(--border); min-height: 14rem; }
  .sol--wide .sol__body { align-content: center; }
}

/* Pipeline */
.pipe { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; width: 100%; max-width: 40rem; }
.pipe::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0.35;
}
.pipe__node {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.5);
  animation: node-pulse 4s var(--ease) infinite;
}
.pipe__node:nth-child(2) { animation-delay: 1s; }
.pipe__node:nth-child(3) { animation-delay: 2s; }
.pipe__node:nth-child(4) { animation-delay: 3s; }
.pipe__node b { font-size: 0.78rem; }
.pipe__node small { font: 500 0.6rem var(--font-mono); color: var(--text-muted); }
@keyframes node-pulse {
  0%, 18%, 100% { border-color: var(--border-strong); box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.5); }
  6%, 12% { border-color: rgb(var(--accent-rgb) / 0.8); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.15), 0 10px 24px -10px rgb(var(--accent-rgb) / 0.6); }
}
.pipe__dot {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pipe-run 4s linear infinite;
  z-index: 0;
}
@keyframes pipe-run { from { left: 8%; opacity: 1; } 90% { opacity: 1; } to { left: 92%; opacity: 0; } }
.pipe__node { z-index: 1; }
@media (max-width: 560px) { .pipe { grid-template-columns: repeat(2, 1fr); } .pipe::before, .pipe__dot { display: none; } }

/* Auto-Scaling */
.scale { display: grid; gap: 0.6rem; justify-items: center; }
.scale small { font: 600 0.65rem var(--font-mono); color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.scale__row { display: flex; gap: 0.45rem; }
.scale__row i {
  width: 1.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--ink) / 0.04);
  animation: instance 5s var(--ease) infinite;
}
.scale__row i:nth-child(1) { animation-delay: 0s; }
.scale__row i:nth-child(2) { animation-delay: 0.4s; }
.scale__row i:nth-child(3) { animation-delay: 0.8s; }
.scale__row i:nth-child(4) { animation-delay: 1.2s; }
.scale__row i:nth-child(5) { animation-delay: 1.6s; }
@keyframes instance {
  0%, 10% { background: rgb(var(--ink) / 0.04); border-color: var(--border-strong); box-shadow: none; }
  20%, 70% { background: linear-gradient(180deg, rgb(var(--accent-2-rgb) / 0.55), rgb(var(--accent-2-rgb) / 0.15)); border-color: rgb(var(--accent-2-rgb) / 0.7); box-shadow: 0 0 14px rgb(var(--accent-2-rgb) / 0.4); }
  85%, 100% { background: rgb(var(--ink) / 0.04); border-color: var(--border-strong); box-shadow: none; }
}

/* ERP-Sync */
.sync { display: flex; align-items: center; gap: 0.6rem; width: 100%; max-width: 18rem; }
.sync__box {
  flex: none;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font: 700 0.72rem var(--font-mono);
}
.sync__box--app { border-color: rgb(var(--accent-rgb) / 0.6); }
.sync__lane { position: relative; flex: 1; height: 2rem; }
.sync__lane::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 2px dashed rgb(var(--ink) / 0.18); }
.sync__lane i {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: sync-right 2.2s linear infinite;
}
.sync__lane i:nth-child(2) { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation-name: sync-left; animation-delay: -0.7s; }
.sync__lane i:nth-child(3) { animation-delay: -1.4s; }
@keyframes sync-right { from { left: 0; } to { left: calc(100% - 8px); } }
@keyframes sync-left { from { left: calc(100% - 8px); } to { left: 0; } }

/* Chat */
.chat { display: grid; gap: 0.45rem; width: 100%; max-width: 17rem; }
.chat__msg {
  justify-self: start;
  max-width: 85%;
  padding: 0.5rem 0.7rem;
  border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 0.7rem;
  line-height: 1.35;
}
.chat__msg--me { justify-self: end; border-radius: 0.8rem 0.8rem 0.2rem 0.8rem; border: 0; color: #fff; background: linear-gradient(120deg, #ff6b4a, #e5392d 50%, #c32c5a); }
.chat__typing { display: inline-flex; gap: 0.25rem; padding: 0.5rem 0.7rem; border-radius: 0.8rem; background: var(--surface); border: 1px solid var(--border); justify-self: start; }
.chat__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: typing 1.2s infinite; }
.chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.chat__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Updates */
.updates { display: grid; gap: 0.4rem; width: 100%; max-width: 16rem; }
.updates__row { display: flex; justify-content: space-between; padding: 0.45rem 0.65rem; border-radius: 0.5rem; background: var(--surface); border: 1px solid var(--border); font-size: 0.7rem; }
.updates__row em { font-style: normal; font: 700 0.68rem var(--font-mono); color: var(--success); }
.updates__row em.live::before { content: "● "; animation: blink 1.2s steps(1) infinite; }
.updates__bar { height: 4px; border-radius: 4px; background: rgb(var(--ink) / 0.08); overflow: hidden; margin-top: 0.2rem; }
.updates__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--success), var(--accent-2)); transform-origin: 0 50%; animation: progress 3.5s var(--ease) infinite; }
@keyframes progress { from { transform: scaleX(0); } 80%, to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .pipe__node, .pipe__dot, .scale__row i, .sync__lane i, .chat__typing i, .updates__bar i, .updates__row em.live::before { animation: none; }
}

/* ---------- Bento-Feinschliff Software ---------- */
.sol::after { top: auto; bottom: 1rem; }
.sol .h4 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); line-height: 1.25; }
.sol--wide .h4 { font-size: var(--fs-xl); }

/* ---------- Mini-Animationen in Beratungs-Karten ---------- */
.merge, .sync--card, .vitals {
  margin-top: auto;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: rgb(var(--ink) / 0.02);
  background-image: radial-gradient(rgb(var(--ink) / 0.08) 1px, transparent 1.5px);
  background-size: 14px 14px;
}
.sync--card { max-width: none; justify-content: space-between; }

.merge {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 3rem auto;
  gap: 0.4rem 0.6rem;
  justify-items: center;
}
.merge__src {
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px dashed var(--border-strong);
  font: 600 0.68rem var(--font-mono);
  color: var(--text-muted);
  animation: src-fade 4s var(--ease) infinite;
}
.merge__src:nth-child(2) { animation-delay: 0.3s; }
.merge__src:nth-child(3) { animation-delay: 0.6s; }
@keyframes src-fade { 0%, 40% { opacity: 1; transform: none; } 60%, 80% { opacity: 0.35; transform: translateY(4px) scale(0.95); } 100% { opacity: 1; transform: none; } }
.merge__lines { grid-column: 1 / -1; width: 100%; height: 100%; overflow: visible; }
.merge__lines stop:first-child { stop-color: var(--accent); }
.merge__lines stop:last-child { stop-color: var(--accent-2); }
.merge__lines path {
  fill: none;
  stroke: url(#merge-grad);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.merge__lines { animation: line-grow 4s var(--ease) infinite; }
@keyframes line-grow { 0%, 20% { clip-path: inset(0 0 100% 0); opacity: 0; } 45%, 85% { clip-path: inset(0); opacity: 1; } 100% { clip-path: inset(0); opacity: 0; } }
.merge__target {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgb(34 197 94 / 0.5);
  background: rgb(34 197 94 / 0.1);
  color: var(--success);
  font: 700 0.75rem var(--font-mono);
  animation: target-pop 4s var(--ease) infinite;
}
.merge__target svg { width: 0.9rem; height: 0.9rem; }
@keyframes target-pop { 0%, 45% { transform: scale(0.92); box-shadow: none; } 55%, 85% { transform: scale(1); box-shadow: 0 0 20px rgb(34 197 94 / 0.35); } 100% { transform: scale(0.92); } }

.vitals { display: grid; gap: 0.55rem; }
.vitals__row { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: 0.75rem; font-size: 0.75rem; }
.vitals__row b { font-weight: 600; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; }
.vitals__row i {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background: rgb(var(--ink) / 0.08);
  overflow: hidden;
}
.vitals__row i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--success), #86efac);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.6s var(--ease);
}
.vitals__row:nth-child(2) i::after { transition-delay: 0.2s; }
.vitals__row:nth-child(3) i::after { transition-delay: 0.4s; }
.is-visible .vitals__row i::after { transform: scaleX(var(--v)); }

/* Karten mit Visual unten: Inhalt oben, Visual sauber am Boden */
.card:has(> .merge),
.card:has(> .sync--card),
.card:has(> .vitals),
.card:has(> .mock) { grid-template-rows: auto auto auto auto 1fr; }

@media (prefers-reduced-motion: reduce) {
  .merge__src, .merge__lines, .merge__target { animation: none; }
}

/* Leistungen: Übersicht in drei Spalten */
.overview .service-card__body { gap: var(--space-5); }
.overview .h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); }
.overview__ideal { display: grid; gap: 0.3rem; padding: 0.9rem 1rem; border-radius: var(--radius); border-left: 2px solid var(--accent); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.08), transparent); }
.overview__ideal small, .overview__projects small { font: 600 0.66rem var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-text); }
.overview__ideal span { font-size: var(--fs-sm); color: var(--text); }
.overview__projects { display: grid; gap: 0.5rem; }
.overview__projects ul { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.overview__projects li { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); transition: border-color 0.3s, color 0.3s; }
.overview:hover .overview__projects li { border-color: rgb(var(--accent-rgb) / 0.4); color: var(--text); }
.overview__link { justify-self: start; margin-top: auto; }
.overview-grid .service-card { transform: none; }
.overview .service-card__body { display: flex; flex-direction: column; }

/* ==========================================================================
   Kontakt-Seite
   ========================================================================== */
.contact-panel {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / 0.16), transparent 55%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgb(var(--accent-rgb) / 0.55), rgb(var(--accent-2-rgb) / 0.3), rgb(var(--ink) / 0.06)) border-box;
  box-shadow: var(--shadow-pop);
}
.contact-panel .contact-item a { color: inherit; }
.contact-panel .contact-item a:hover strong { color: var(--accent-text); }

.copy-btn {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font: 600 0.7rem var(--font-mono);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.copy-btn:hover { color: var(--text); border-color: rgb(var(--ink) / 0.35); }
.copy-btn.is-copied { color: #fff; background: var(--success); border-color: var(--success); }
.copy-btn--inline { padding: 0.1rem 0.5rem; font-size: 0.75rem; }

/* Formular */
.inquiry {
  display: grid;
  gap: var(--space-6);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.inquiry__topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.inquiry__topics legend {
  width: 100%;
  margin-bottom: 0.75rem;
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
.topic span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: all 0.25s var(--ease);
}
.topic svg { width: 1rem; height: 1rem; }
.topic:hover span { color: var(--text); border-color: rgb(var(--ink) / 0.35); }
.topic input:checked + span {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, #ff6b4a, #e5392d 45%, #c32c5a);
  box-shadow: 0 8px 20px -8px var(--accent);
}
.topic input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 3px; }

.inquiry__grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .inquiry__grid { grid-template-columns: 1fr 1fr; }  }
.field { display: grid; gap: 0.4rem; }
.field > span { font-size: var(--fs-sm); font-weight: 600; }
.field em { font-style: normal; color: var(--accent-text); }
.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--bg-rgb) / 0.6);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.7);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.14);
}
.field textarea::placeholder { color: var(--text-subtle); }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #ef4444; }
.inquiry__error { color: #f87171; font-size: var(--fs-sm); font-weight: 600; }
.inquiry__footer { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 700px) { .inquiry__footer { grid-template-columns: 1fr auto; gap: var(--space-6); } }

/* ==========================================================================
   Abwechslung: Webdesign-Werkzeuge & Kontakt-Signal
   ========================================================================== */

/* ---------- Webdesign: schwebende Design-Werkzeuge ---------- */
.tools { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.tool {
  position: absolute;
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.6);
  translate: calc(var(--px, 0) * var(--depth, 1) * 1px) calc(var(--py2, 0) * var(--depth, 1) * 1px);
  transition: translate 0.6s var(--ease);
}
.tool small { font: 600 0.58rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.tool b { font-size: 0.85rem; }
.tool--palette { top: 14%; left: -7%; --depth: 1.4; animation: tool-float 7s ease-in-out infinite; }
.tool--palette > span { display: flex; gap: 0.3rem; }
.tool--palette i { width: 1.05rem; height: 1.05rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); }
.tool--palette i:nth-child(1) { background: #ed5145; }
.tool--palette i:nth-child(2) { background: #8b7bff; }
.tool--palette i:nth-child(3) { background: #f4f4f3; }
.tool--palette i:nth-child(4) { background: #111113; }
.tool--type { top: -6%; right: 6%; --depth: 0.8; animation: tool-float 8s ease-in-out -2s infinite; grid-template-columns: auto auto; align-items: center; gap: 0.6rem; }
.tool--type b { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.04em; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool--grid { bottom: 10%; right: -6%; --depth: 1.2; animation: tool-float 9s ease-in-out -4s infinite; }
.tool--cursor {
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  grid-auto-flow: column;
  align-items: start;
  gap: 0.15rem;
  animation: cursor-path 9s var(--ease) infinite;
  translate: none;
}
.tool--cursor svg { width: 1.4rem; height: 1.4rem; color: #fff; fill: var(--accent-2); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.5)); }
.tool--cursor em { margin-top: 1.1rem; padding: 0.15rem 0.45rem; border-radius: 0.35rem; background: var(--accent-2); color: #fff; font: 700 0.6rem var(--font-mono); font-style: normal; }
@keyframes cursor-path {
  0%   { transform: translate(18%, 70%); }
  20%  { transform: translate(55%, 52%); }
  35%  { transform: translate(55%, 52%) scale(0.92); }
  40%  { transform: translate(55%, 52%); }
  60%  { transform: translate(78%, 40%); }
  80%  { transform: translate(30%, 80%); }
  100% { transform: translate(18%, 70%); }
}
.tools { container-type: size; }
@supports (width: 1cqw) {
  @keyframes cursor-path {
    0%   { transform: translate(18cqw, 62cqh); }
    20%  { transform: translate(52cqw, 47cqh); }
    35%  { transform: translate(52cqw, 47cqh) scale(0.9); }
    40%  { transform: translate(52cqw, 47cqh); }
    60%  { transform: translate(80cqw, 32cqh); }
    80%  { transform: translate(28cqw, 74cqh); }
    100% { transform: translate(18cqw, 62cqh); }
  }
}
.guide { position: absolute; background: #ff4fa3; opacity: 0; box-shadow: 0 0 8px #ff4fa3; }
.guide--v { top: -4%; bottom: 8%; width: 1px; left: 52%; animation: guide-v 9s var(--ease) infinite; }
.guide--h { left: -4%; right: -4%; height: 1px; top: 47%; animation: guide-h 9s var(--ease) infinite; }
@keyframes guide-v { 0%, 15% { opacity: 0; } 22%, 38% { opacity: 0.9; } 45%, 100% { opacity: 0; } }
@keyframes guide-h { 0%, 18% { opacity: 0; } 25%, 38% { opacity: 0.9; } 45%, 100% { opacity: 0; } }
@keyframes tool-float { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@media (max-width: 959px) {
  .tool--palette { left: 0; top: -8%; }
  .tool--grid { right: 0; bottom: 4%; }
  .tool--type { display: none; }
}

/* ---------- Kontakt: Signal-Wellen ---------- */
.contact-stage { position: relative; isolation: isolate; }
.contact-stage .contact-panel { position: relative; z-index: 1; }
.pulse { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid; place-items: center; }
.pulse i {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  opacity: 0;
  animation: pulse-out 6s var(--ease) infinite;
}
.pulse i:nth-child(2) { animation-delay: 1.5s; border-color: rgb(var(--accent-2-rgb) / 0.5); }
.pulse i:nth-child(3) { animation-delay: 3s; }
.pulse i:nth-child(4) { animation-delay: 4.5s; border-color: rgb(var(--accent-2-rgb) / 0.5); }
@keyframes pulse-out {
  0% { transform: scale(0.5); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tool, .tool--cursor, .guide, .pulse i { animation: none; }
  .tool--cursor, .guide { display: none; }
}

/* Feinschliff Hero-Animationen */
.hero[data-particles] .hero__content { position: relative; }
.hero[data-particles] .hero__content::before { content: ""; position: absolute; z-index: -1; inset: -2rem -4rem; background: radial-gradient(closest-side, rgb(var(--bg-rgb) / 0.7), transparent); pointer-events: none; }
.tool--palette { top: 34%; left: -9%; }
.pulse i { border-width: 1.5px; border-color: rgb(var(--accent-rgb) / 0.7); }
.pulse i:nth-child(even) { border-color: rgb(var(--accent-2-rgb) / 0.7); }
@keyframes pulse-out { 0% { transform: scale(0.55); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* Ein Porträt pro Seite: Ersatz-Elemente */
.manifesto__mark { border-radius: 0.8rem !important; border: 0 !important; object-fit: contain !important; }
.chat--bento { max-width: 100%; justify-self: stretch; }
.chat--bento .chat__msg { font-size: 0.78rem; }
.network__mono { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; font-weight: 900; font-size: 1.3rem; letter-spacing: -0.04em; color: #fff; background: linear-gradient(135deg, #ff8a66, var(--accent-strong) 55%, #b8261c); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.2); }

/* Horizont-Planet im Kontakt-Block */
.cta-band > .hero__canvas { z-index: 0; }
.cta-band > :not(.hero__canvas) { position: relative; z-index: 1; }
.cta-band::after { content: none; }

/* ==========================================================================
   Runde 8: 6 Leistungen, Projekte-Teaser
   ========================================================================== */

/* Dropdown zweispaltig */
/* (alte Zwei-Spalten-Regel ersetzt durch gruppierte Untermenüs) */
.nav__dropdown .dropdown-all { grid-column: 1 / -1; }

/* Weitere Schwerpunkte (Startseite) */
.more-services { margin-top: var(--space-6); }
.more-services__label {
  margin-bottom: var(--space-4);
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.more-service {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: 1.1rem 1.25rem;
  transition: transform 0.4s var(--ease);
}
.more-service:hover { transform: translateY(-3px); }
.more-service strong { display: block; font-size: var(--fs-base); }
.more-service small { display: block; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.more-service > svg { width: 1.1rem; height: 1.1rem; color: var(--text-subtle); transition: transform 0.4s var(--ease), color 0.3s; }
.more-service:hover > svg { transform: translateX(4px); color: var(--accent-text); }
.grid > .more-service::after { content: none; }

/* Projekt-Teaser */
.project-teaser { transition: transform 0.5s var(--ease); }
.project-teaser:hover { transform: translateY(-4px); }
.project-teaser__tag {
  justify-self: start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent-text);
  font: 600 0.68rem var(--font-mono);
  letter-spacing: 0.05em;
}
.project-teaser__stack { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.project-teaser__stack li {
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border-strong);
  font: 500 0.68rem var(--font-mono);
  color: var(--text-muted);
}
.project-teaser .link-arrow { margin-top: auto; }

/* Mini-Visuals für die neuen Leistungen (Leistungen-Übersicht) */
.svc-chatmini { display: grid; gap: 0.4rem; width: 64%; }
.svc-chatmini i {
  display: block;
  height: 1.3rem;
  border-radius: 0.7rem 0.7rem 0.7rem 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  width: 70%;
}
.svc-chatmini i:nth-child(2) { justify-self: end; width: 80%; border: 0; border-radius: 0.7rem 0.7rem 0.2rem 0.7rem; background: linear-gradient(120deg, #ff6b4a, #e5392d 50%, #c32c5a); }
.svc-chatmini i:nth-child(3) { width: 45%; background: rgb(var(--accent-2-rgb) / 0.25); border-color: rgb(var(--accent-2-rgb) / 0.5); }
.service-card:hover .svc-chatmini i:nth-child(3) { width: 60%; }
.svc-shield { position: relative; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 1.3rem; border: 1px solid rgb(var(--accent-rgb) / 0.5); background: var(--surface); box-shadow: 0 0 0 10px rgb(var(--accent-rgb) / 0.06), 0 20px 40px -20px rgb(0 0 0 / 0.6); }
.svc-shield svg { width: 2.4rem; height: 2.4rem; color: var(--accent-text); }
.svc-shield::after { content: ""; position: absolute; inset: -18px; border-radius: 1.8rem; border: 1px dashed rgb(var(--ink) / 0.2); animation: spin 30s linear infinite; }
.svc-phone { width: 4.6rem; height: 8.4rem; padding: 0.55rem 0.4rem; border-radius: 1.1rem; border: 2px solid var(--border-strong); background: var(--surface); display: grid; gap: 0.3rem; align-content: start; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6); }
.svc-phone i { display: block; height: 0.5rem; border-radius: 0.25rem; background: rgb(var(--ink) / 0.12); }
.svc-phone i:first-child { height: 2.4rem; background: linear-gradient(135deg, #ff8a66, var(--accent-strong) 55%, var(--accent-2)); }
.svc-phone i:last-child { margin-top: 0.4rem; height: 0.9rem; background: var(--accent-strong); border-radius: 999px; }
.service-card:hover .svc-phone { transform: translateY(-4px) rotate(-3deg); }
.svc-phone { transition: transform 0.6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .svc-shield::after { animation: none; } }

/* ===== Seite: Projekte ===== */

/* ==========================================================================
   Projekte (Fallstudien)
   ========================================================================== */

/* Projekt-Index im Hero */
.pj-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.pj-index a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.25s, border-color 0.25s, transform 0.3s var(--ease);
}
.pj-index a span { font: 600 0.7rem var(--font-mono); color: var(--accent-text); }
.pj-index a:hover { color: var(--text); border-color: rgb(var(--accent-rgb) / 0.5); transform: translateY(-2px); }

/* Fallstudien-Layout */
.pj-case { scroll-margin-top: calc(var(--header-h) + 1rem); }
.pj-grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 1000px) {
  .pj-grid { grid-template-columns: 1.05fr 0.95fr; }
  .pj-grid--reverse > .pj-text { order: 2; }
}
.pj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pj-num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgb(var(--accent-rgb) / 0.6);
  font: 600 0.72rem var(--font-mono);
  color: var(--accent-text);
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / 0.3);
}
.pj-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent-text);
  font: 600 0.68rem var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pj-tag svg { width: 0.85rem; height: 0.85rem; }

.pj-tag--feature { color: #fff; background: linear-gradient(120deg, #ff6b4a, #e5392d 45%, #c32c5a); box-shadow: 0 6px 16px -6px var(--accent); }

/* Hervorgehobene Fallstudie */
.pj-case--feature .pj-grid {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: calc(var(--radius-lg) + 0.5rem);
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 0% 0%, rgb(var(--accent-rgb) / 0.12), transparent 50%) padding-box,
    radial-gradient(ellipse at 100% 100%, rgb(var(--accent-2-rgb) / 0.12), transparent 55%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgb(var(--accent-rgb) / 0.6), rgb(var(--accent-2-rgb) / 0.35), rgb(var(--ink) / 0.06)) border-box;
  box-shadow: var(--shadow-pop);
}

/* Herausforderung / Lösung / Ergebnis */
.pj-story { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--border); }
.pj-story > div {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 0 1rem 1rem;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  transition: border-color 0.3s, background-color 0.3s;
}
.pj-story > div:hover { border-left-color: var(--accent); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.06), transparent 70%); }
.pj-story dt { font: 600 0.7rem var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-text); }
.pj-story dd { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; }

/* Tech-Chips */
.pj-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.pj-chips li {
  padding: 0.3rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--ink) / 0.03);
  font: 500 0.72rem var(--font-mono);
  color: var(--text-muted);
}
.pj-case .btn svg { background: rgb(var(--ink) / 0.08); }

/* Visual-Spalte */
.pj-visual { display: grid; gap: var(--space-4); }
.pj-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.pj-stats > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgb(var(--bg-rgb) / 0.4);
}
.pj-stats strong { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pj-stats span { font: 500 0.66rem var(--font-mono); color: var(--text-muted); }
.pj-arch { padding: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); }

/* Security-Event-Feed */
.pj-soc {
  border-radius: var(--radius-lg);
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #0d0d10;
  color: #e6e6e8;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7);
}
.pj-soc__head { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.1rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 600 0.75rem var(--font-mono); }
.pj-soc__head span { display: inline-flex; align-items: center; gap: 0.45rem; }
.pj-soc__head svg { width: 1rem; height: 1rem; color: #8b7bff; }
.pj-soc__head em { font-style: normal; color: #4ade80; }
.pj-soc__head em::before { content: "● "; animation: blink 1.2s steps(1) infinite; }
.pj-soc__flow { list-style: none; margin: 0; padding: 1rem 1.1rem; display: grid; gap: 0.6rem; counter-reset: soc; }
.pj-soc__flow li {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.9rem 0.7rem 2.6rem;
  border-radius: 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(255 255 255 / 0.03);
  counter-increment: soc;
  opacity: 0.35;
  transition: opacity 0.5s, border-color 0.5s, background-color 0.5s;
}
.pj-soc__flow li::before {
  content: counter(soc);
  position: absolute;
  left: 0.85rem;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.2);
  font: 600 0.62rem var(--font-mono);
}
.pj-soc__flow b { font: 700 0.8rem var(--font-mono); }
.pj-soc__flow small { font-size: 0.7rem; color: #9a9aa2; }
.is-visible .pj-soc__flow li { opacity: 1; }
.is-visible .pj-soc__flow li:nth-child(2) { transition-delay: 0.5s; }
.is-visible .pj-soc__flow li:nth-child(3) { transition-delay: 1s; }
.is-visible .pj-soc__flow li:nth-child(4) { transition-delay: 1.5s; }
.pj-soc__flow li.is-attack { border-color: rgb(237 81 69 / 0.5); background: rgb(237 81 69 / 0.08); }
.pj-soc__flow li.is-attack::before { border-color: #ed5145; color: #ff7a6e; }
.pj-soc__flow li.is-detect { border-color: rgb(34 197 94 / 0.5); background: rgb(34 197 94 / 0.08); }
.pj-soc__flow li.is-detect::before { border-color: #22c55e; color: #4ade80; content: "✓"; }

/* ML: Feature-Trichter + Accuracy */
.pj-ml {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: radial-gradient(rgb(var(--ink) / 0.08) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.pj-funnel { display: grid; gap: 0.5rem; justify-items: center; }
.pj-funnel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  width: var(--w);
  min-width: 12rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.78rem;
  transform: scaleX(0.6);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.6s;
}
.pj-funnel__row:nth-child(2) { transition-delay: 0.15s; }
.pj-funnel__row:nth-child(3) { transition-delay: 0.3s; }
.pj-funnel__row:nth-child(4) { transition-delay: 0.45s; }
.is-visible .pj-funnel__row { transform: none; opacity: 1; }
.pj-funnel__row span { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; }
.pj-funnel__row b { font-variant-numeric: tabular-nums; }
.pj-funnel__row--big { border-color: rgb(var(--accent-2-rgb) / 0.6); background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.18), var(--surface)); }
.pj-funnel__row--model { border-color: rgb(var(--accent-rgb) / 0.6); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.16), var(--surface)); }
.pj-ml__score { display: flex; align-items: center; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px dashed var(--border-strong); }
.pj-ml__score .gauge { width: 7rem; flex: none; }
.pj-ml__score .gauge__num { font-size: 1.2rem; }
.pj-ml__score strong { display: block; font-size: var(--fs-base); }
.pj-ml__score span { font-size: var(--fs-xs); color: var(--text-muted); }
.is-visible .pj-gauge67 { stroke-dashoffset: 32.73; }

/* Smart Contract */

@keyframes block-pop { 0%, 60%, 100% { transform: none; box-shadow: none; } 70% { transform: scale(1.08); box-shadow: 0 0 20px rgb(237 81 69 / 0.6); } }

/* Abschluss-Hinweis */
.pj-more {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
}
@media (min-width: 800px) { .pj-more { grid-template-columns: auto 1fr auto; gap: var(--space-5); } }

@media (prefers-reduced-motion: reduce) {
  .pj-soc__flow li,
.pj-funnel__row { opacity: 1; transform: none; transition: none; }
  .pj-soc__head em::before { animation: none; }
}

/* ===== Seite: Über mich ===== */

/* ==========================================================================
   Über mich (ab-)
   ========================================================================== */

/* Was mich antreibt */
.ab-drive { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .ab-drive { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: start; } }
.ab-drive__intro {
  font-size: var(--fs-xl);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ab-drive__intro em { font-style: normal; color: var(--accent-text); }
.ab-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3) !important;
  padding: 0;
  list-style: none;
}
.ab-facts li {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.ab-facts span { font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.02em; color: var(--text); }

/* Schwerpunkte */
.ab-focus { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .ab-focus { grid-template-columns: 1.4fr 1fr 1fr; } }
.ab-focus__item { align-content: start; }
.ab-focus__item .link-arrow { margin-top: auto; padding-top: var(--space-2); }
.ab-focus__item--lead {
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / 0.16), transparent 60%) padding-box,
    linear-gradient(180deg, var(--surface), rgb(var(--surface-rgb) / 0.75)) padding-box,
    linear-gradient(150deg, rgb(var(--accent-rgb) / 0.6), rgb(var(--accent-2-rgb) / 0.35), rgb(var(--ink) / 0.06)) border-box;
}
.ab-topics { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.ab-topics li {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  background: rgb(var(--accent-rgb) / 0.08);
  font: 600 0.75rem var(--font-mono);
  color: var(--text);
}

/* Tech-Stack */
.ab-stack {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: radial-gradient(rgb(var(--ink) / 0.07) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.ab-stack__title { font: 600 0.75rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--space-5); }
.ab-stack__groups { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .ab-stack__groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ab-stack__groups { grid-template-columns: repeat(5, 1fr); } }
.ab-stack__group { display: grid; gap: 0.6rem; align-content: start; }
.ab-stack__group small { font: 600 0.66rem var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-subtle); }
.ab-stack__group ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.ab-stack__group li {
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--bg-rgb) / 0.6);
  font: 500 0.75rem var(--font-mono);
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.ab-stack__group li:hover { border-color: rgb(var(--accent-rgb) / 0.6); color: var(--accent-text); transform: translateY(-2px); }

/* Werdegang: Timeline mit scroll-gezeichneter Linie */
.ab-timeline {
  --ab-progress: 0;
  position: relative;
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0 0 0 3.5rem;
  list-style: none;
}
.ab-timeline::before,
.ab-timeline::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 2px;
}
.ab-timeline::before { background: var(--border); }
.ab-timeline::after {
  background: linear-gradient(var(--accent), var(--accent-2));
  transform: scaleY(var(--ab-progress));
  transform-origin: top;
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.5);
}
.ab-tl { position: relative; }
.ab-tl__dot {
  position: absolute;
  left: -3.5rem;
  top: 0.9rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 0.05rem;
  border-radius: 50%;
  border: 1px solid rgb(var(--accent-rgb) / 0.6);
  background: var(--bg);
  color: var(--accent-text);
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.08);
  transform: scale(0.4);
  transition: transform 0.6s var(--ease) 0.2s, box-shadow 0.4s;
}
.ab-tl.is-visible .ab-tl__dot { transform: none; box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.1), 0 0 22px rgb(var(--accent-rgb) / 0.35); }
.ab-tl__dot svg { width: 1rem; height: 1rem; }
.ab-tl--edu .ab-tl__dot { border-color: rgb(var(--accent-2-rgb) / 0.6); color: var(--accent-2); box-shadow: 0 0 0 5px rgb(var(--accent-2-rgb) / 0.08); }
.ab-tl--now .ab-tl__dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
  animation: pulse 2.4s var(--ease) infinite;
}
.ab-tl__card {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.1rem, 1rem + 0.8vw, 1.6rem);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgb(var(--ink) / 0.16), rgb(var(--ink) / 0.04) 50%, rgb(var(--accent-rgb) / 0.2)) border-box;
  transition: transform 0.4s var(--ease);
}
.ab-tl:hover .ab-tl__card { transform: translateX(4px); }
.ab-tl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ab-tl__meta time { font: 600 0.75rem var(--font-mono); color: var(--accent-text); }
.ab-tl--edu .ab-tl__meta time { color: var(--accent-2); }
.ab-tl__type {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font: 600 0.62rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ab-tl__org { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }
.ab-tl__list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.ab-tl__list li { position: relative; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--text-muted); }
.ab-tl__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 1px; background: var(--accent); }
@media (min-width: 960px) {
  .ab-timeline { padding-left: 0; }
  .ab-timeline::before, .ab-timeline::after { left: 50%; margin-left: -1px; }
  .ab-tl { width: calc(50% - 2.5rem); }
  .ab-tl:nth-child(odd) { justify-self: start; }
  .ab-tl:nth-child(even) { justify-self: end; }
  .ab-tl:nth-child(odd) .ab-tl__dot { left: auto; right: -3.65rem; }
  .ab-tl:nth-child(even) .ab-tl__dot { left: -3.65rem; }
  .ab-timeline { gap: var(--space-3); }
  .ab-tl:nth-child(odd):hover .ab-tl__card { transform: translateX(-4px); }
}

/* Projekte-Teaser */
.ab-projects {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(120deg, var(--surface), var(--surface-2));
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.ab-projects:hover { border-color: rgb(var(--accent-rgb) / 0.5); transform: translateY(-3px); }
@media (min-width: 960px) { .ab-projects { grid-template-columns: 1.1fr 1fr auto; gap: var(--space-7); } }
.ab-projects__code {
  display: block;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: #0d0d0f;
  border: 1px solid rgb(255 255 255 / 0.1);
  color: #d7d7db;
  font: 500 0.78rem/1.8 var(--font-mono);
}
.ab-projects__code > span { color: var(--accent); }
.ab-projects__code em { font-style: normal; color: #60a5fa; margin-right: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .ab-timeline { --ab-progress: 1 !important; }
  .ab-tl__dot { transform: none; }
  .ab-tl--now .ab-tl__dot::after { animation: none; }
}

/* ===== Seite: App-Entwicklung ===== */

/* ==========================================================================
   App-Entwicklung (ap-)
   ========================================================================== */

/* Hero-Bühne mit Smartphone */
.ap-stage { position: relative; display: grid; justify-items: center; gap: 1.25rem; padding-top: 1rem; }
.ap-stage .stage__label { left: 50%; transform: translateX(-50%); top: -0.6rem; z-index: 6; white-space: nowrap; }
.ap-phone {
  position: relative;
  width: min(17rem, 70vw);
  aspect-ratio: 9 / 19;
  padding: 0.65rem;
  border-radius: 2.6rem;
  background: linear-gradient(160deg, #2a2a30, #0d0d10 55%, #1c1c22);
  box-shadow:
    inset 0 0 0 1.5px rgb(255 255 255 / 0.14),
    0 0 0 1px rgb(0 0 0 / 0.6),
    0 50px 90px -30px rgb(0 0 0 / 0.75),
    0 0 80px -20px rgb(var(--accent-rgb) / 0.35);
  transform: perspective(1400px) rotateY(-12deg) rotateX(4deg);
  transition: transform 0.8s var(--ease);
  animation: ap-hover 7s ease-in-out infinite;
}
.ap-stage:hover .ap-phone { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
@keyframes ap-hover { 50% { translate: 0 -10px; } }
.ap-phone__notch {
  position: absolute;
  z-index: 3;
  top: 1.05rem;
  left: 50%;
  width: 5rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #050506;
  transform: translateX(-50%);
}
.ap-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--bg);
  color: var(--text);
}

/* Bildschirme wechseln: Onboarding -> Liste -> Benachrichtigung */
.ap-view {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 2.8rem 1rem 1rem;
  animation: ap-screen 10s var(--ease) infinite;
}
.ap-view--onboarding {
  align-content: center;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(var(--accent-rgb) / 0.35), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgb(var(--accent-2-rgb) / 0.3), transparent 60%),
    var(--bg);
}
.ap-view--list { align-content: start; gap: 0.5rem; animation-name: ap-screen-2; }
.ap-logo {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: 0.4rem;
  border-radius: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #ff8a66, var(--accent-strong) 55%, #b8261c);
  box-shadow: 0 14px 30px -10px rgb(var(--accent-rgb) / 0.7);
}
.ap-logo svg { width: 1.6rem; height: 1.6rem; }
.ap-view--onboarding b { font-size: 1.15rem; letter-spacing: -0.02em; }
.ap-view--onboarding small { font-size: 0.72rem; color: var(--text-muted); max-width: 11rem; line-height: 1.4; }
.ap-dots { display: flex; gap: 0.3rem; margin: 0.4rem 0; }
.ap-dots i { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: rgb(var(--ink) / 0.25); }
.ap-dots i:first-child { width: 1.1rem; background: var(--accent); }
.ap-btn {
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  background: linear-gradient(120deg, #ff6b4a, #e5392d 50%, #c32c5a);
  box-shadow: 0 8px 20px -8px var(--accent);
}
@keyframes ap-screen { 0%, 34% { opacity: 1; transform: none; } 40%, 94% { opacity: 0; transform: translateX(-30%); } 100% { opacity: 1; transform: none; } }
@keyframes ap-screen-2 { 0%, 34% { opacity: 0; transform: translateX(30%); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(30%); } }

.ap-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.ap-bar b { font-size: 0.9rem; letter-spacing: -0.01em; }
.ap-avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.ap-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.6rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.ap-item span { display: grid; gap: 0.1rem; }
.ap-item b { font-size: 0.68rem; }
.ap-item small { font-size: 0.58rem; color: var(--text-muted); }
.ap-item em { font-style: normal; font: 700 0.55rem var(--font-mono); padding: 0.15rem 0.4rem; border-radius: 999px; background: rgb(var(--accent-rgb) / 0.14); color: var(--accent-text); }
.ap-item em.ok { background: rgb(var(--accent-2-rgb) / 0.16); color: var(--accent-2); }
.ap-item em.done { background: rgb(34 197 94 / 0.14); color: var(--success); }
.ap-ico { width: 1.7rem; height: 1.7rem; border-radius: 0.55rem; }
.ap-ico--a { background: linear-gradient(135deg, #ff8a66, var(--accent)); }
.ap-ico--b { background: linear-gradient(135deg, #b4a8ff, var(--accent-2)); }
.ap-ico--c { background: linear-gradient(135deg, #86efac, var(--success)); }
.ap-tabbar {
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.8rem;
  display: flex;
  justify-content: space-around;
  padding: 0.6rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: rgb(var(--surface-rgb) / 0.9);
}
.ap-tabbar i { width: 1.1rem; height: 0.35rem; border-radius: 999px; background: rgb(var(--ink) / 0.2); }
.ap-tabbar i.on { background: var(--accent); }

.ap-toast {
  position: absolute;
  z-index: 4;
  top: 2.7rem;
  left: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 30px -12px rgb(0 0 0 / 0.6);
  opacity: 0;
  transform: translateY(-140%);
  animation: ap-toast 10s var(--ease) infinite;
}
.ap-toast__icon { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.5rem; background: var(--success); color: #fff; flex: none; }
.ap-toast__icon svg { width: 0.9rem; height: 0.9rem; }
.ap-toast span:last-child { display: grid; }
.ap-toast b { font-size: 0.68rem; }
.ap-toast small { font-size: 0.56rem; color: var(--text-muted); }
@keyframes ap-toast { 0%, 58% { opacity: 0; transform: translateY(-140%); } 64%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-140%); } }

.ap-stores { display: flex; gap: 0.5rem; }
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.7);
  font: 600 0.7rem var(--font-mono);
  color: var(--text-muted);
}
.ap-chip svg { width: 0.85rem; height: 0.85rem; color: var(--accent-text); }

/* Store-Veröffentlichung im Ablauf */
.ap-review {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.ap-review__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; }
.ap-review__row b { font: 600 0.7rem var(--font-mono); color: var(--text-muted); }
.ap-status { position: relative; display: inline-grid; font-style: normal; }
.ap-status i { grid-area: 1 / 1; font: 700 0.65rem var(--font-mono); font-style: normal; padding: 0.15rem 0.5rem; border-radius: 999px; text-align: right; justify-self: end; }
.ap-status .s1 { color: #fbbf24; background: rgb(251 191 36 / 0.12); animation: ap-s1 6s steps(1) infinite; }
.ap-status .s2 { color: var(--success); background: rgb(34 197 94 / 0.14); opacity: 0; animation: ap-s2 6s steps(1) infinite; }
.ap-status--late .s1 { animation-delay: 0.8s; }
.ap-status--late .s2 { animation-delay: 0.8s; }
@keyframes ap-s1 { 0% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ap-s2 { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0; } }
.ap-review__bar { height: 4px; border-radius: 4px; background: rgb(var(--ink) / 0.08); overflow: hidden; }
.ap-review__bar i { display: block; height: 100%; background: linear-gradient(90deg, #fbbf24, var(--success)); transform-origin: 0 50%; animation: progress 6s var(--ease) infinite; }
.ap-release::before { box-shadow: 0 0 0 5px rgb(34 197 94 / 0.1), 0 0 24px rgb(34 197 94 / 0.45) !important; border-color: rgb(34 197 94 / 0.7) !important; }

/* App -> API -> Cloud */
.ap-arch {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgb(var(--accent-rgb) / 0.14), transparent 60%),
    radial-gradient(rgb(var(--ink) / 0.08) 1px, transparent 1.5px);
  background-size: auto, 16px 16px;
}
.ap-arch__node {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(100%, 18rem);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.55);
}
.ap-arch__node > svg { width: 1.4rem; height: 1.4rem; color: var(--accent-text); flex: none; }
.ap-arch__node span { display: grid; }
.ap-arch__node b { font-size: 0.95rem; }
.ap-arch__node small { font: 500 0.68rem var(--font-mono); color: var(--text-muted); }
.ap-arch__node--app { border-color: rgb(var(--accent-rgb) / 0.6); box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.08), 0 16px 34px -18px rgb(var(--accent-rgb) / 0.5); }
.ap-arch__link { position: relative; width: 2px; height: 2.6rem; background: rgb(var(--ink) / 0.14); overflow: hidden; }
.ap-arch__link i {
  position: absolute;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: ap-flow 1.8s linear infinite;
}
.ap-arch__link + .ap-arch__node + .ap-arch__link i { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation-delay: -0.9s; }
@keyframes ap-flow { from { top: -6px; } to { top: 100%; } }

@media (max-width: 959px) {
  .ap-phone { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-phone, .ap-view, .ap-toast, .ap-status i, .ap-review__bar i, .ap-arch__link i { animation: none; }
  .ap-view--list, .ap-toast { display: none; }
  .ap-status .s1 { opacity: 0; }
  .ap-status .s2 { opacity: 1; }
}

/* ===== Seite: Cloud & IT-Sicherheit ===== */

/* ==========================================================================
   Cloud & IT-Sicherheit (Präfix cs-)
   ========================================================================== */

/* Hero: Terminal + Security-Feed gestapelt */

@keyframes cs-ev-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes cs-ev-alert {
  0% { opacity: 0; transform: translateX(-8px); }
  40% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgb(239 68 68 / 0.5); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 8px rgb(239 68 68 / 0); }
}

/* Schwerpunkt-Karten (Azure) */

/* ===== Seite: KI-Lösungen ===== */

/* ==========================================================================
   KI-Lösungen (leistungen/ki-loesungen.html)
   ========================================================================== */
.ki-note {
  justify-self: end;
  font: 600 0.6rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* ---------- Hero: Dokumenten-Chat ---------- */
.stage--solo > .ki-chat { width: 100%; transform: perspective(1400px) rotateY(-8deg) rotateX(4deg); transition: transform 0.8s var(--ease); }
.stage--solo:hover > .ki-chat { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
@media (max-width: 959px) { .stage--solo > .ki-chat { transform: none; } }
.ki-chat {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.6);
}
.ki-chat__bar { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.ki-chat__bar b { font-size: 0.9rem; }
.ki-chat__bar small { margin-left: auto; font: 500 0.65rem var(--font-mono); color: var(--text-muted); }
.ki-chat__avatar {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px -6px rgb(var(--accent-rgb) / 0.7);
}
.ki-chat__avatar svg { width: 1rem; height: 1rem; }
.ki-chat__docs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ki-doc {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.03);
  font: 500 0.66rem var(--font-mono);
  color: var(--text-muted);
}
.ki-doc svg { width: 0.85rem; height: 0.85rem; }
.ki-chat__body { display: grid; gap: 0.6rem; min-height: 9.5rem; align-content: start; }
.ki-msg { margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.9rem; font-size: 0.8rem; line-height: 1.45; max-width: 88%; }
.ki-msg--user {
  justify-self: end;
  border-radius: 0.9rem 0.9rem 0.25rem 0.9rem;
  color: #fff;
  background: linear-gradient(120deg, #ff6b4a, #e5392d 50%, #c32c5a);
}
.ki-msg--ai {
  position: relative;
  display: grid;
  gap: 0.5rem;
  justify-self: start;
  border-radius: 0.9rem 0.9rem 0.9rem 0.25rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  min-width: 4rem;
}
.ki-source {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgb(var(--accent-2-rgb) / 0.14);
  border: 1px solid rgb(var(--accent-2-rgb) / 0.4);
  font: 600 0.62rem var(--font-mono);
  color: var(--text);
}
.ki-source svg { width: 0.75rem; height: 0.75rem; }
.ki-typing { display: inline-flex; gap: 0.25rem; padding: 0.15rem 0; }
.ki-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: typing 1.2s infinite; }
.ki-typing i:nth-child(2) { animation-delay: 0.15s; }
.ki-typing i:nth-child(3) { animation-delay: 0.3s; }
.ki-chat__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.ki-chat__input svg { width: 1.6rem; height: 1.6rem; padding: 0.35rem; border-radius: 50%; color: #fff; background: var(--accent-strong); }

/* Ablauf der Unterhaltung (Schleife, startet beim Einblenden) */
.ki-stage .ki-msg--user,
.ki-stage .ki-msg--ai,
.ki-stage .ki-answer,
.ki-stage .ki-source,
.ki-stage .ki-typing { opacity: 0; }
.ki-stage.is-visible .ki-msg--user { animation: ki-user 11s var(--ease) infinite; }
.ki-stage.is-visible .ki-msg--ai { animation: ki-ai 11s var(--ease) infinite; }
.ki-stage.is-visible .ki-typing { animation: ki-typing-show 11s linear infinite; position: absolute; left: 0.8rem; top: 0.75rem; }
.ki-stage.is-visible .ki-typing i { animation: typing 1.2s infinite; }
.ki-stage.is-visible .ki-answer { animation: ki-answer 11s var(--ease) infinite; }
.ki-stage.is-visible .ki-source { animation: ki-source 11s var(--ease) infinite; }
.ki-stage.is-visible .ki-doc--hit { animation: ki-hit 11s var(--ease) infinite; }
@keyframes ki-user { 0%, 4% { opacity: 0; transform: translateY(8px); } 8%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ki-ai { 0%, 14% { opacity: 0; transform: translateY(8px); } 18%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ki-typing-show { 0%, 15% { opacity: 0; } 18%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ki-answer { 0%, 35% { opacity: 0; filter: blur(4px); } 42%, 92% { opacity: 1; filter: none; } 97%, 100% { opacity: 0; } }
@keyframes ki-source { 0%, 46% { opacity: 0; transform: scale(0.85); } 52%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ki-hit {
  0%, 46% { border-color: var(--border); background: rgb(var(--ink) / 0.03); color: var(--text-muted); box-shadow: none; }
  52%, 90% { border-color: rgb(var(--accent-2-rgb) / 0.6); background: rgb(var(--accent-2-rgb) / 0.14); color: var(--text); box-shadow: 0 0 16px -4px rgb(var(--accent-2-rgb) / 0.7); }
  96%, 100% { border-color: var(--border); background: rgb(var(--ink) / 0.03); color: var(--text-muted); box-shadow: none; }
}

/* ---------- Schwerpunkte ---------- */
.ki-pillar .link-arrow { margin-top: auto; }
.ki-pillar { grid-template-rows: auto auto 1fr auto; }

/* ---------- Generative KI: Entwurf entsteht ---------- */
.ki-gen { display: grid; gap: 0.7rem; }
.ki-gen__input,
.ki-gen__output { display: grid; gap: 0.35rem; padding: 0.7rem 0.85rem; border-radius: 0.7rem; border: 1px solid var(--border); background: rgb(var(--ink) / 0.03); }
.ki-gen small { font: 600 0.6rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.ki-gen__input span { font-size: 0.78rem; color: var(--text-muted); }
.ki-gen__spark {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  color: #fff;
  font: 700 0.7rem var(--font);
  background: linear-gradient(120deg, var(--accent-strong), var(--accent-2));
  box-shadow: 0 8px 20px -8px rgb(var(--accent-2-rgb) / 0.8);
}
.ki-gen__spark svg { width: 0.9rem; height: 0.9rem; }
.ki-gen__output { border-color: rgb(var(--accent-2-rgb) / 0.4); }
.ki-gen__output p { margin: 0; font-size: 0.8rem; line-height: 1.45; clip-path: inset(0 100% 0 0); }
.is-visible .ki-gen__output p { animation: ki-write 9s steps(30) infinite; animation-delay: calc(var(--i) * 0.9s + 0.6s); }
.is-visible .ki-gen__spark { animation: ki-spark 9s var(--ease) infinite; }
@keyframes ki-write { 0% { clip-path: inset(0 100% 0 0); } 12%, 85% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes ki-spark { 0%, 4% { transform: scale(1); } 7% { transform: scale(0.92); } 10%, 100% { transform: scale(1); } }

/* ---------- Datenextraktion: Dokument -> JSON ---------- */
.ki-extract { display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: center; gap: 0.6rem; }
.ki-extract .ki-note { grid-column: 1 / -1; }
.ki-invoice {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: #f7f6f3;
  color: #2a2a2e;
  font-size: 0.62rem;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5);
}
.ki-invoice__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; margin-bottom: 0.2rem; }
.ki-invoice__head b { font-size: 0.75rem; letter-spacing: 0.08em; }
.ki-invoice > i { display: block; height: 0.3rem; border-radius: 0.2rem; background: #dcdad4; }
.ki-invoice__sum { display: flex; justify-content: space-between; padding-top: 0.3rem; border-top: 1px solid #dcdad4; font-weight: 700; }
.ki-hl { justify-self: start; padding: 0 0.15rem; border-radius: 0.2rem; transition: background-color 0.3s; }
.is-visible .ki-hl { animation: ki-hl 8s var(--ease) infinite; animation-delay: calc(var(--i) * 0.7s + 0.4s); }
@keyframes ki-hl { 0% { background: transparent; } 4%, 70% { background: rgb(237 81 69 / 0.28); box-shadow: 0 0 0 1px rgb(237 81 69 / 0.6); } 80%, 100% { background: transparent; box-shadow: none; } }
.ki-extract__arrow { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.ki-extract__arrow svg { width: 0.9rem; height: 0.9rem; }
.ki-json {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.6rem;
  background: #0d0d0f;
  border: 1px solid rgb(255 255 255 / 0.1);
  color: #d7d7db;
  font: 500 0.64rem/1.5 var(--font-mono);
  overflow: hidden;
}
.ki-json__row { padding-left: 0.8rem; white-space: nowrap; opacity: 0; transform: translateX(-6px); }
.ki-json em { font-style: normal; color: #c084fc; }
.ki-json b { font-weight: 500; color: #4ade80; }
.is-visible .ki-json__row { animation: ki-row 8s var(--ease) infinite; animation-delay: calc(var(--i) * 0.7s + 0.7s); }
@keyframes ki-row { 0% { opacity: 0; transform: translateX(-6px); } 5%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
@media (max-width: 560px) {
  .ki-extract { grid-template-columns: 1fr; }
  .ki-extract__arrow { justify-self: center; transform: rotate(90deg); }
}

/* ---------- Chatbot ---------- */
.ki-bot { display: grid; gap: 0.55rem; }
.ki-bot__head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.ki-bot__head b { font-size: 0.85rem; }
.ki-bot__head small { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font: 600 0.62rem var(--font-mono); color: var(--success); }
.ki-bot__head small i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
.ki-bot__msg { margin: 0; max-width: 85%; padding: 0.55rem 0.75rem; border-radius: 0.9rem; font-size: 0.78rem; line-height: 1.4; }
.ki-bot__msg--ai { justify-self: start; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 0.9rem 0.9rem 0.9rem 0.25rem; }
.ki-bot__msg--user { justify-self: end; color: #fff; background: linear-gradient(120deg, #ff6b4a, #e5392d 50%, #c32c5a); border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; }
.ki-bot__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ki-bot__chips span { padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.68rem; font-weight: 600; color: var(--text-muted); }
.is-visible .ki-bot__chips .is-picked { animation: ki-pick 10s var(--ease) infinite; }
@keyframes ki-pick { 0%, 30% { background: transparent; color: var(--text-muted); } 34%, 92% { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); } 100% { background: transparent; } }
.ki-bot__msg, .ki-bot__chips { opacity: 0; }
.is-visible .ki-bot__msg,
.is-visible .ki-bot__chips { animation: ki-bubble 10s var(--ease) infinite; animation-delay: calc(var(--i) * 1.1s); }
@keyframes ki-bubble { 0% { opacity: 0; transform: translateY(8px); } 6%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; } }

/* ---------- RAG ---------- */
.ki-pipe-card { gap: var(--space-6); justify-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.ki-pipe-card__label { justify-self: start; font: 600 0.66rem var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-text); }
.ki-pipe { max-width: 52rem; }
.ki-steps { display: grid; gap: var(--space-5); width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: ki; }
@media (min-width: 800px) { .ki-steps { grid-template-columns: repeat(3, 1fr); } }
.ki-steps li { counter-increment: ki; display: grid; gap: 0.35rem; font-size: var(--fs-sm); color: var(--text-muted); }
.ki-steps b { color: var(--text); font-size: var(--fs-base); }
.ki-steps b::before { content: counter(ki, decimal-leading-zero) "  "; font: 600 0.72rem var(--font-mono); color: var(--accent-text); }

.ki-proof {
  margin-top: var(--space-6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-2-rgb) / 0.16), transparent 55%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgb(var(--accent-2-rgb) / 0.6), rgb(var(--accent-rgb) / 0.35), rgb(var(--ink) / 0.06)) border-box;
  box-shadow: var(--shadow);
}
.ki-proof .stack { gap: var(--space-5); }
.ki-proof__tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font: 600 0.68rem var(--font-mono);
  color: var(--text-muted);
}
.ki-proof__tag svg { width: 0.9rem; height: 0.9rem; }
.ki-proof__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ki-proof__facts li { display: grid; gap: 0.2rem; padding: var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); background: rgb(var(--ink) / 0.03); }
.ki-proof__facts b { font-size: var(--fs-xl); font-weight: 900; letter-spacing: -0.03em; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ki-proof__facts span { font-size: var(--fs-sm); color: var(--text-muted); }
.ki-stack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.ki-stack li { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-strong); font: 600 0.7rem var(--font-mono); color: var(--text-muted); }

/* ---------- Datenschutz-Optionen ---------- */
.ki-option { gap: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .ki-stage .ki-msg--user, .ki-stage .ki-msg--ai, .ki-stage .ki-answer, .ki-stage .ki-source { opacity: 1 !important; animation: none !important; }
  .ki-stage .ki-typing { display: none; }
  .ki-gen__output p { clip-path: none !important; animation: none !important; }
  .ki-json__row, .ki-bot__msg, .ki-bot__chips { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ki-hl, .ki-doc--hit, .ki-bot__chips .is-picked { animation: none !important; }
}

/* Webshop: breite Feature-Karte in der Leistungen-Übersicht */
@media (min-width: 900px) {
  .overview--wide { grid-column: 1 / -1; grid-template-columns: 1fr 1.3fr; grid-template-rows: 1fr; }
  .overview--wide .service-card__media { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--border); }
}
.ws-mini { position: relative; display: flex; gap: 0.8rem; align-items: end; }
.ws-mini__item { display: grid; gap: 0.35rem; width: 5.5rem; padding: 0.5rem; border-radius: 0.7rem; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.6); transition: transform 0.5s var(--ease); }
.ws-mini__item i { display: block; aspect-ratio: 1; border-radius: 0.45rem; background: linear-gradient(135deg, #ff8a66, var(--accent-strong) 60%, var(--accent-2)); }
.ws-mini__item:nth-child(2) i { background: linear-gradient(135deg, var(--accent-2), #4f46e5); }
.ws-mini__item b { display: block; height: 0.35rem; border-radius: 0.2rem; background: rgb(var(--ink) / 0.15); }
.ws-mini__item b:last-child { width: 55%; background: var(--accent-strong); }
.ws-mini__cart { position: absolute; top: -1.4rem; right: -1.6rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); }
.ws-mini__cart svg { width: 1.2rem; height: 1.2rem; }
.ws-mini__cart em { position: absolute; top: -0.3rem; right: -0.3rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent-strong); color: #fff; font: 700 0.6rem var(--font-mono); font-style: normal; }
.service-card:hover .ws-mini__item:first-child { transform: translateY(-6px) rotate(-3deg); }
.grid--4 > .more-service { grid-template-columns: auto 1fr; }
.grid--4 > .more-service > svg:last-child { display: none; }

/* ===== Seite: Vorgehen ===== */

/* ---------- Vorgehen: Iterations-Loop im Hero ---------- */
.vg-loop-stage { display: grid; place-items: center; padding: 2rem 0; }
.vg-loop { position: relative; width: min(100%, 27rem); aspect-ratio: 1; }
.vg-loop::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.22), rgb(var(--accent-2-rgb) / 0.08) 60%, transparent);
  filter: blur(20px);
}
.vg-loop__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vg-loop__track { fill: none; stroke: rgb(var(--ink) / 0.12); stroke-width: 2; stroke-dasharray: 2 8; }
.vg-loop__flow {
  fill: none;
  stroke: url(#vg-ring);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 160 783;
  transform-origin: 200px 200px;
  transform: rotate(-90deg);
  animation: vg-flow 8s linear infinite;
  filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.6));
}
@keyframes vg-flow { to { transform: rotate(270deg); } }
.vg-loop__marker { fill: #fff; filter: drop-shadow(0 0 10px var(--accent)); }

.vg-node {
  position: absolute;
  display: grid;
  gap: 0.1rem;
  min-width: 7.5rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.6);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: vg-node-on 8s var(--ease) infinite;
}
.vg-node b { font-size: 0.9rem; }
.vg-node small { font: 500 0.62rem var(--font-mono); color: var(--text-muted); letter-spacing: 0.03em; }
.vg-node--1 { left: 50%; top: 12.5%; animation-delay: 0s; }
.vg-node--2 { left: 87.5%; top: 50%; animation-delay: 2s; }
.vg-node--3 { left: 50%; top: 87.5%; animation-delay: 4s; }
.vg-node--4 { left: 12.5%; top: 50%; animation-delay: 6s; }
@keyframes vg-node-on {
  0%, 18% { border-color: rgb(var(--accent-rgb) / 0.8); box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.14), 0 16px 34px -12px rgb(var(--accent-rgb) / 0.55); transform: translate(-50%, -50%) scale(1.06); }
  26%, 100% { border-color: var(--border-strong); box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.6); transform: translate(-50%, -50%) scale(1); }
}
.vg-loop__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
}
.vg-loop__core small { font: 500 0.62rem var(--font-mono); color: var(--text-subtle); letter-spacing: 0.06em; text-transform: uppercase; max-width: 9rem; }
.vg-loop__ver { position: relative; display: block; width: 4.5rem; height: 3.2rem; }
.vg-loop__ver i {
  position: absolute;
  inset: 0;
  font-style: normal;
  font-weight: 900;
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: -0.05em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: vg-ver 24s var(--ease) infinite;
}
.vg-loop__ver i:nth-child(2) { animation-delay: 8s; }
.vg-loop__ver i:nth-child(3) { animation-delay: 16s; }
@keyframes vg-ver {
  0% { opacity: 0; transform: translateY(12px); }
  4%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-12px); }
}

/* ---------- Phasen ---------- */
.vg-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: none; }
.vg-phase {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--surface), rgb(var(--surface-rgb) / 0.75)) padding-box,
    linear-gradient(160deg, rgb(var(--ink) / 0.16), rgb(var(--ink) / 0.04) 40%, rgb(var(--accent-rgb) / 0.2)) border-box;
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease);
}
.vg-phase:hover { transform: translateX(4px); }
@media (min-width: 1000px) { .vg-phase { grid-template-columns: 19rem 1fr; align-items: start; } }
.vg-phase__head { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-3); }
.vg-phase__head .h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); grid-column: 1 / -1; }
.vg-phase__num { font: 700 0.8rem var(--font-mono); color: var(--accent-text); }
.vg-phase__cols { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .vg-phase__cols { grid-template-columns: repeat(3, 1fr); } }
.vg-phase__cols small {
  display: block;
  margin-bottom: 0.35rem;
  font: 600 0.65rem var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.vg-phase__cols p { color: var(--text-muted); font-size: var(--fs-sm); }
.vg-phase__cols > div:nth-child(2) small { color: var(--accent-text); }
.vg-phase--highlight {
  background:
    radial-gradient(ellipse at 0% 0%, rgb(var(--accent-rgb) / 0.14), transparent 55%) padding-box,
    linear-gradient(180deg, var(--surface), rgb(var(--surface-rgb) / 0.75)) padding-box,
    linear-gradient(140deg, rgb(var(--accent-rgb) / 0.7), rgb(var(--accent-2-rgb) / 0.4), rgb(var(--ink) / 0.06)) border-box;
}
.vg-badge {
  justify-self: start;
  grid-column: 1 / -1;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #fff;
  font: 700 0.62rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px var(--accent);
}
.vg-note { margin-top: var(--space-5); }

/* ---------- Prototyp: Skizze → klickbar → lauffähig ---------- */
.vg-proto { display: grid; gap: var(--space-4); justify-items: center; }
.vg-proto__frame {
  position: relative;
  width: min(100%, 30rem);
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.55);
}
.vg-proto__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); }
.vg-proto__bar span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgb(var(--ink) / 0.18); }
.vg-proto__bar em { margin-left: auto; font: 500 0.62rem var(--font-mono); font-style: normal; color: var(--text-subtle); }
.vg-proto__screen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 1.1rem;
}
.vg-p {
  display: block;
  border-radius: 0.4rem;
  outline: 1.5px dashed rgb(var(--ink) / 0.3);
  outline-offset: -1px;
  background: transparent;
  animation: vg-proto 9s var(--ease) infinite;
}
.vg-p--nav { grid-column: 1 / -1; height: 0.7rem; }
.vg-p--title { grid-column: 1 / 3; height: 1.3rem; }
.vg-p--text { grid-column: 1 / 3; height: 0.6rem; }
.vg-p--btn { grid-column: 1 / 2; height: 1.4rem; border-radius: 999px; }
.vg-p--card { height: 4.2rem; border-radius: 0.6rem; }
@keyframes vg-proto {
  0%, 28% { outline-color: rgb(var(--ink) / 0.3); background: transparent; }
  36%, 62% { outline-color: rgb(var(--accent-2-rgb) / 0.6); background: rgb(var(--ink) / 0.1); }
  70%, 92% { outline-color: transparent; background: var(--vg-fill, rgb(var(--ink) / 0.14)); }
  100% { outline-color: rgb(var(--ink) / 0.3); background: transparent; }
}
.vg-p--title { --vg-fill: var(--text); }
.vg-p--btn { --vg-fill: var(--accent-strong); }
.vg-p--card:nth-of-type(5) { --vg-fill: linear-gradient(135deg, #ff8a66, var(--accent-strong) 60%, var(--accent-2)); }
.vg-proto__note {
  position: absolute;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0.1rem;
  background: #ffd54f;
  color: #1a1a1a;
  font: 600 0.68rem var(--font-mono);
  box-shadow: 0 10px 20px -8px rgb(0 0 0 / 0.5);
  opacity: 0;
  animation: vg-note 9s var(--ease) infinite;
}
.vg-proto__note--a { right: -0.8rem; top: 38%; transform: rotate(3deg); animation-delay: 0.2s; }
.vg-proto__note--b { left: -0.8rem; bottom: 18%; transform: rotate(-3deg); animation-delay: 0.9s; }
@keyframes vg-note { 0%, 30% { opacity: 0; translate: 0 6px; } 36%, 60% { opacity: 1; translate: 0 0; } 66%, 100% { opacity: 0; translate: 0 -6px; } }
.vg-proto__stages { display: flex; gap: 0.4rem; font: 500 0.7rem var(--font-mono); }
.vg-proto__stages span { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-subtle); animation: vg-stage 9s var(--ease) infinite; }
.vg-proto__stages span:nth-child(2) { animation-delay: 3s; }
.vg-proto__stages span:nth-child(3) { animation-delay: 6s; }
@keyframes vg-stage {
  0%, 30% { color: var(--text); border-color: rgb(var(--accent-rgb) / 0.6); background: rgb(var(--accent-rgb) / 0.12); }
  34%, 100% { color: var(--text-subtle); border-color: var(--border); background: transparent; }
}

/* ---------- Feedback-Zyklus ---------- */
.vg-cycle {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-items: center;
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
}
@media (min-width: 1000px) { .vg-cycle { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; } }
.vg-cycle__step {
  display: grid;
  gap: 0.6rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  align-content: start;
  height: 100%;
}
.vg-cycle__step p { color: var(--text-muted); font-size: var(--fs-sm); }
.vg-cycle__arrow { display: grid; place-items: center; color: var(--accent-text); }
.vg-cycle__arrow svg { width: 1.3rem; height: 1.3rem; animation: vg-nudge 1.6s ease-in-out infinite; }
@media (max-width: 999px) { .vg-cycle__arrow svg { transform: rotate(90deg); animation: none; } }
@keyframes vg-nudge { 50% { translate: 4px 0; } }
.vg-cycle__back {
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-3);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgb(var(--accent-2-rgb) / 0.12);
  color: var(--text);
  font: 600 0.72rem var(--font-mono);
}
.vg-cycle__back svg { width: 1rem; height: 1rem; color: var(--accent-2); animation: spin 6s linear infinite; }
.vg-measure {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius);
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.08), transparent);
}
.vg-measure p { color: var(--text-muted); }
.vg-measure strong { color: var(--text); }

/* ---------- Erwartungen ---------- */
.vg-expect { gap: var(--space-5); }
.vg-expect .checklist li { font-size: var(--fs-base); }
.vg-expect__label {
  justify-self: start;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font: 600 0.7rem var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vg-expect__label--me { border-color: transparent; background: var(--accent-strong); color: #fff; box-shadow: 0 8px 20px -8px var(--accent); }

@media (max-width: 560px) {
  .vg-node { min-width: 6rem; padding: 0.45rem 0.6rem; }
  .vg-node small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-loop__flow, .vg-node, .vg-loop__ver i, .vg-p, .vg-proto__note, .vg-proto__stages span, .vg-cycle__arrow svg, .vg-cycle__back svg { animation: none; }
  .vg-loop__ver i:first-child { opacity: 1; }
  .vg-p { outline-color: transparent; background: var(--vg-fill, rgb(var(--ink) / 0.14)); }
}

/* ===== Seite: Webshop ===== */
/* ===== Seite: Webshop-Entwicklung ===== */

/* Hero: animierter Mini-Shop */
.ws-stage { display: grid; place-items: center; padding: 1.5rem 0; }
.ws-shop {
  position: relative;
  width: 100%;
  max-width: 34rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.6);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform 0.8s var(--ease);
}
.ws-stage:hover .ws-shop { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.ws-shop__bar { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.ws-shop__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.85rem; }
.ws-shop__brand i { width: 1.2rem; height: 1.2rem; border-radius: 0.35rem; background: linear-gradient(135deg, #ff8a66, var(--accent-strong)); }
.ws-shop__cart { position: relative; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 0.6rem; border: 1px solid var(--border-strong); }
.ws-shop__cart svg { width: 1.15rem; height: 1.15rem; }
.ws-shop__badge {
  position: absolute; top: -0.45rem; right: -0.45rem;
  display: grid; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--accent-strong); color: #fff; font: 700 0.62rem var(--font-mono);
  overflow: hidden; box-shadow: 0 0 0 2px var(--surface);
}
.ws-shop__badge span { grid-area: 1 / 1; display: grid; place-items: center; }
.ws-shop__badge span:last-child { opacity: 0; transform: translateY(100%); }
.ws-shop__body { display: grid; gap: 0.9rem; padding: 1rem; }

.ws-product { position: relative; display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.75rem; border-radius: 0.8rem; border: 1px solid var(--border); background: rgb(var(--ink) / 0.02); }
.ws-product__img { position: relative; border-radius: 0.6rem; aspect-ratio: 1; overflow: hidden; background: radial-gradient(120% 90% at 0% 100%, var(--accent-2), transparent 60%), linear-gradient(135deg, #ff8a66, var(--accent-strong) 60%, #8b2c6b); }
.ws-product__img i { position: absolute; inset: 22%; border-radius: 50%; background: rgb(255 255 255 / 0.25); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.35); }
.ws-product__info { display: grid; gap: 0.35rem; align-content: center; }
.ws-product__info small { font: 600 0.6rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.ws-product__info strong { font-size: 0.95rem; }
.ws-product__variants { display: flex; gap: 0.3rem; }
.ws-product__variants span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; border: 1px solid var(--border-strong); font: 600 0.65rem var(--font-mono); color: var(--text-muted); }
.ws-product__variants .is-on { border-color: var(--accent); color: var(--text); background: rgb(var(--accent-rgb) / 0.12); }
.ws-product__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; }
.ws-product__row b { font-size: 1rem; }
.ws-product__btn { padding: 0.45rem 0.8rem; border-radius: 999px; color: #fff; font-size: 0.7rem; font-weight: 700; background: linear-gradient(120deg, #ff6b4a, #e5392d 45%, #c32c5a); box-shadow: 0 6px 16px -6px var(--accent); }
.ws-fly { position: absolute; right: 1.5rem; bottom: 1.2rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0; }

.ws-checkout { display: grid; gap: 0.5rem; }
.ws-checkout__steps { display: grid; grid-template-columns: repeat(4, 1fr); font: 600 0.62rem var(--font-mono); color: var(--text-subtle); }
.ws-checkout__steps span { text-align: center; }
.ws-checkout__steps span:first-child { text-align: left; }
.ws-checkout__steps span:last-child { text-align: right; color: var(--success); }
.ws-checkout__track { height: 0.4rem; border-radius: 999px; background: rgb(var(--ink) / 0.08); overflow: hidden; }
.ws-checkout__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--success)); transform: scaleX(0.04); transform-origin: 0 50%; }

.ws-toast {
  position: absolute; left: 50%; bottom: 3.2rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 16px 30px -12px rgb(0 0 0 / 0.5);
  opacity: 0; transform: translate(-50%, 12px);
}
.ws-toast svg { width: 0.9rem; height: 0.9rem; color: var(--success); }
.ws-shop__note { position: absolute; right: 0.9rem; bottom: 0.55rem; font: 600 0.58rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.ws-shop { padding-bottom: 1.8rem; }

/* Animation: Klick → Flug in den Warenkorb → Badge 1 → Checkout → Toast (Schleife) */
.is-visible .ws-product__btn { animation: ws-press 9s var(--ease) infinite; }
.is-visible .ws-fly { animation: ws-fly 9s var(--ease) infinite; }
.is-visible .ws-shop__badge span:first-child { animation: ws-out 9s var(--ease) infinite; }
.is-visible .ws-shop__badge span:last-child { animation: ws-in 9s var(--ease) infinite; }
.is-visible .ws-shop__cart { animation: ws-cart 9s var(--ease) infinite; }
.is-visible .ws-checkout__track i { animation: ws-track 9s var(--ease) infinite; }
.is-visible .ws-toast { animation: ws-toast 9s var(--ease) infinite; }
@keyframes ws-press { 0%, 8% { transform: none; } 10% { transform: scale(0.92); } 13%, 100% { transform: none; } }
@keyframes ws-fly {
  0%, 10% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  24% { opacity: 1; transform: translate(-0.5rem, -10.5rem) scale(0.7); }
  27%, 100% { opacity: 0; transform: translate(-0.5rem, -10.5rem) scale(0.4); }
}
@keyframes ws-out { 0%, 24% { opacity: 1; transform: none; } 28%, 92% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: none; } }
@keyframes ws-in { 0%, 24% { opacity: 0; transform: translateY(100%); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(100%); } }
@keyframes ws-cart { 0%, 24% { transform: none; } 27% { transform: scale(1.15) rotate(-6deg); } 31%, 100% { transform: none; } }
@keyframes ws-track { 0%, 30% { transform: scaleX(0.04); } 40% { transform: scaleX(0.36); } 50% { transform: scaleX(0.66); } 60%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0.04); } }
@keyframes ws-toast { 0%, 62% { opacity: 0; transform: translate(-50%, 12px); } 66%, 88% { opacity: 1; transform: translate(-50%, 0); } 92%, 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* Endzustand ohne Bewegung */
@media (prefers-reduced-motion: reduce) {
  .ws-shop__badge span:first-child { opacity: 0; }
  .ws-shop__badge span:last-child { opacity: 1; transform: none; }
  .ws-checkout__track i { transform: scaleX(1); }
  .ws-toast { opacity: 1; transform: translate(-50%, 0); }
  .is-visible .ws-product__btn, .is-visible .ws-fly, .is-visible .ws-shop__badge span, .is-visible .ws-shop__cart,
  .is-visible .ws-checkout__track i, .is-visible .ws-toast { animation: none; }
}
@media (max-width: 959px) { .ws-shop { transform: none; } }
@media (max-width: 520px) {
  .ws-product { grid-template-columns: 6.5rem 1fr; }
  .ws-checkout__steps { font-size: 0.55rem; }
}

/* Vergleich */
.ws-compare {
  display: grid;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.ws-compare__head,
.ws-compare__row { display: grid; grid-template-columns: 12rem 1fr 1fr; gap: 0; }
.ws-compare__head span,
.ws-compare__row > * { padding: 1rem 1.25rem; }
.ws-compare__head { border-bottom: 1px solid var(--border-strong); background: rgb(var(--ink) / 0.03); }
.ws-compare__head span { font: 700 0.75rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.ws-compare__head .is-custom { color: var(--accent-text); }
.ws-compare__row + .ws-compare__row { border-top: 1px solid var(--border); }
.ws-compare__row b { font-size: var(--fs-sm); }
.ws-compare__row span { font-size: var(--fs-sm); color: var(--text-muted); }
.ws-compare__row span:last-child,
.ws-compare__head span:last-child { background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.06), transparent); border-left: 1px solid rgb(var(--accent-rgb) / 0.25); }
.ws-compare__row span:nth-child(2),
.ws-compare__head span:nth-child(2) { border-left: 1px solid var(--border); }
.ws-compare__note { margin-top: var(--space-5); text-align: center; }
@media (max-width: 760px) {
  .ws-compare__head { display: none; }
  .ws-compare__row { grid-template-columns: 1fr; padding: 0.4rem 0; }
  .ws-compare__row > * { padding: 0.4rem 1.1rem; }
  .ws-compare__row span:nth-child(2)::before { content: "Bewährte Lösung: "; font-weight: 700; color: var(--text); }
  .ws-compare__row span:last-child::before { content: "Individuell: "; font-weight: 700; color: var(--accent-text); }
  .ws-compare__row span:last-child, .ws-compare__row span:nth-child(2) { border-left: 0; background: none; }
}

/* Sync-Panel */
.ws-syncpanel { display: grid; gap: 0.9rem; }
.ws-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ws-log li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.65rem; border-radius: 0.5rem;
  background: rgb(var(--ink) / 0.04); font-size: 0.72rem; color: var(--text-muted);
  opacity: 0.25; transition: opacity 0.5s var(--ease);
}
.ws-log em { flex: none; font: 700 0.6rem var(--font-mono); font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; color: var(--success); padding: 0.15rem 0.45rem; border-radius: 999px; background: rgb(34 197 94 / 0.12); }
.is-visible .ws-log li { opacity: 1; }
.ws-log li:nth-child(2) { transition-delay: 0.5s; }
.ws-log li:nth-child(3) { transition-delay: 1s; }

.ws-steps__more { margin-top: var(--space-6); }

/* ===== Artikel: Smart Contracts ===== */

/* ===== Artikel: Smart Contracts (sc-) ===== */
.sc-title { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); }
.sc-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0; padding: 0; font: 500 0.75rem var(--font-mono); color: var(--text-subtle); }
.sc-meta li { display: inline-flex; align-items: center; gap: 0.4rem; }
.sc-meta svg { width: 0.95rem; height: 0.95rem; color: var(--accent-text); }

.sc-article .container { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.sc-prose { max-width: none; font-size: var(--fs-base); line-height: 1.75; }
.sc-prose h2:first-child { margin-top: 0; }
.sc-prose * + h2 { margin-top: var(--space-7); }
.sc-prose code {
  padding: 0.1rem 0.4rem;
  border-radius: 0.35rem;
  background: rgb(var(--ink) / 0.07);
  color: var(--text);
  font: 500 0.88em var(--font-mono);
}

.sc-callout {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / 0.14), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgb(var(--accent-rgb) / 0.6), rgb(var(--accent-2-rgb) / 0.35), rgb(var(--ink) / 0.06)) border-box;
}
.sc-callout__label {
  justify-self: start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #fff;
  font: 700 0.68rem var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.sc-callout .checklist li { font-size: var(--fs-base); }

.sc-figure {
  margin: 0;
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: radial-gradient(rgb(var(--ink) / 0.07) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.sc-figure__caption { font: 600 0.7rem var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-text); }

.sc-lifecycle { position: relative; display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .sc-lifecycle { grid-template-columns: repeat(4, 1fr); } }
.sc-step {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  opacity: 0.35;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.6s;
}
.sc-step:nth-child(2) { transition-delay: 0.25s; }
.sc-step:nth-child(3) { transition-delay: 0.5s; }
.sc-step:nth-child(4) { transition-delay: 0.75s; }
.is-visible .sc-step { opacity: 1; transform: none; }
.sc-step b { font-size: var(--fs-base); }
.sc-step small { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.sc-step__num { display: inline-flex; align-items: center; font: 600 0.7rem var(--font-mono); color: var(--accent-text); }
.sc-step__num svg { width: 1rem; height: 1rem; }
@media (min-width: 700px) {
  .sc-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.75rem;
    width: 0.75rem;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
  }
}
.sc-step--locked { border-color: rgb(var(--accent-rgb) / 0.6); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.1), 0 0 30px -10px var(--accent); }

.sc-editor { width: 100%; }
.sc-editor .editor__code { font-size: 0.78rem; overflow-x: auto; }
.sc-editor .editor__out { white-space: normal; }

.sc-units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.sc-unit { display: grid; gap: 0.2rem; padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); text-align: center; }
.sc-unit small { font: 600 0.68rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.sc-unit b { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem); font-variant-numeric: tabular-nums; }
.sc-unit--hl { border-color: rgb(var(--accent-rgb) / 0.55); background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.1), var(--surface)); }

.sc-project { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); transition: transform 0.4s var(--ease); }
.sc-project:hover { transform: translateY(-3px); }
.sc-project small { display: block; font: 600 0.66rem var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-text); }
.sc-project strong { display: block; font-size: var(--fs-lg); margin: 0.15rem 0 0.3rem; }
.sc-project span span { color: var(--text-muted); font-size: var(--fs-sm); }
.sc-project > svg { width: 1.2rem; height: 1.2rem; color: var(--text-subtle); }

.sc-author { display: flex; gap: var(--space-4); align-items: flex-start; padding-top: var(--space-6); border-top: 1px solid var(--border); }
.sc-author img { flex: none; width: 3rem; height: 3rem; }
.sc-author p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.sc-author strong { color: var(--text); }
.sc-back { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .sc-step { opacity: 1; transform: none; }
}

/* ===== Artikel: Kurzvideos ===== */

/* ===== Artikel: Kurzvideos (kv-) ===== */

/* Hero: Smartphone mit Kurzvideo */

@keyframes kv-hook { 0%, 100% { opacity: 0; transform: translateY(10px); } 8%, 70% { opacity: 1; transform: none; } 85% { opacity: 0; } }

@keyframes kv-like { 0%, 40%, 100% { transform: scale(1); color: #fff; } 48% { transform: scale(1.25); color: #ff7a6e; } 56%, 95% { transform: scale(1); color: #ff7a6e; } }

@keyframes kv-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Artikel */

/* ===== Seite: Wissen ===== */
/* ==========================================================================
   Wissen: Übersicht & Artikel (Präfix wi-)
   ========================================================================== */

/* ---------- Artikel-Kopf ---------- */
.wi-hero { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.wi-hero .hero__content { justify-items: start; }
.wi-title { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem); }
.wi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font: 500 0.75rem var(--font-mono);
  color: var(--text-muted);
}
.wi-meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.wi-meta svg { width: 1rem; height: 1rem; color: var(--accent-text); }

/* ---------- Layout ---------- */
@media (min-width: 1000px) { .wi-layout.legal--toc { grid-template-columns: 14rem minmax(0, 46rem); justify-content: center; } }
.wi-article { max-width: 46rem; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.75; }
.wi-article section + section { margin-top: var(--space-8); padding-top: 0; border-top: 0; }
.wi-article h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.02em; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.wi-article h3 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.wi-article a:not(.link-arrow):not(.wi-more__item) { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.wi-article em { color: var(--text); font-style: normal; font-family: var(--font-mono); font-size: 0.92em; }

/* ---------- Callouts ---------- */
.wi-callout {
  position: relative;
  padding: 1.25rem 1.4rem 1.25rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.1), var(--surface) 60%);
  color: var(--text);
}
.wi-callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--accent-2), var(--accent));
}
.wi-callout strong { display: block; margin-bottom: 0.35rem; font: 600 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.wi-callout p { margin: 0; }
.wi-callout--accent { background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.12), var(--surface) 65%); border-color: rgb(var(--accent-rgb) / 0.35); }
.wi-callout--warn { background: linear-gradient(90deg, rgb(251 191 36 / 0.12), var(--surface) 65%); border-color: rgb(251 191 36 / 0.35); }
.wi-callout--warn::before { background: #f59e0b; }
.wi-callout--warn strong { color: #f59e0b; }

/* ---------- Abbildungen ---------- */
.wi-figure {
  margin: var(--space-6) 0;
  padding: clamp(1rem, 0.75rem + 1.5vw, 1.75rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: radial-gradient(rgb(var(--ink) / 0.07) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.wi-figure figcaption { margin-top: var(--space-4); font: 500 0.72rem var(--font-mono); color: var(--text-subtle); text-align: center; }

/* Pipeline */
.wi-flow { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 700px) { .wi-flow { grid-template-columns: repeat(5, 1fr); } }
.wi-flow li {
  position: relative;
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding: 0.85rem 0.8rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  line-height: 1.35;
}
.wi-flow span { font: 700 0.65rem var(--font-mono); color: var(--accent-text); }
.wi-flow b { color: var(--text); font-size: 0.92rem; }
.wi-flow small { font-size: 0.72rem; color: var(--text-muted); }
.wi-flow li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.45rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.wi-flow li:last-child::after { display: none; }
@media (max-width: 699px) { .wi-flow li::after { display: none; } }
.is-visible .wi-flow li { animation: wi-pulse 5s var(--ease) infinite; animation-delay: calc(var(--n, 0) * 1s); }
.wi-flow li:nth-child(2) { --n: 1; } .wi-flow li:nth-child(3) { --n: 2; } .wi-flow li:nth-child(4) { --n: 3; } .wi-flow li:nth-child(5) { --n: 4; }
@keyframes wi-pulse { 0%, 18%, 100% { border-color: var(--border-strong); } 6%, 12% { border-color: rgb(var(--accent-rgb) / 0.8); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.12); } }

/* Chunk-Vergleich */
.wi-chunks__row { display: grid; gap: 0.4rem; }
.wi-chunks__row + .wi-chunks__row { margin-top: var(--space-5); }
.wi-chunks small { font: 600 0.65rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.wi-chunks p { margin: 0; font: 500 0.82rem/1.9 var(--font-mono); color: var(--text); }
.wi-chunks mark { color: inherit; padding: 0.15em 0.1em; border-radius: 0.25rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wi-chunks mark.c1 { background: rgb(var(--accent-rgb) / 0.22); box-shadow: inset 0 -2px 0 rgb(var(--accent-rgb) / 0.8); }
.wi-chunks mark.c2 { background: rgb(var(--accent-2-rgb) / 0.22); box-shadow: inset 0 -2px 0 rgb(var(--accent-2-rgb) / 0.8); }
.wi-chunks mark.c3 { background: rgb(34 197 94 / 0.18); box-shadow: inset 0 -2px 0 rgb(34 197 94 / 0.7); }

/* Chips, Kacheln, Schritte */
.prose .wi-chips, .wi-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; }
.wi-chips li { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font: 500 0.75rem var(--font-mono); color: var(--text); }
.wi-chips li::marker { content: none; }
.wi-grid { display: grid; gap: 0.6rem; margin: var(--space-5) 0; }
@media (min-width: 640px) { .wi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .wi-grid:not(.wi-grid--2) { grid-template-columns: repeat(3, 1fr); } }
.wi-tile { display: grid; gap: 0.25rem; padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); line-height: 1.5; }
.wi-tile b { color: var(--text); font-size: 0.95rem; }
.wi-tile span { font-size: 0.85rem; }
.prose .wi-steps, .wi-steps { display: grid; gap: 0.6rem; padding: 0; list-style: none; counter-reset: wi-step; }
.wi-steps li {
  position: relative;
  padding: 0.9rem 1rem 0.9rem 3.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  counter-increment: wi-step;
}
.wi-steps li::before {
  content: counter(wi-step, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  font: 700 0.75rem var(--font-mono);
  color: var(--accent-text);
}
.wi-steps li::marker { content: none; }
.wi-steps b { color: var(--text); }

/* Feature-Trichter */
.wi-funnel { display: grid; gap: 0.45rem; justify-items: center; }
.wi-funnel__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: var(--w);
  min-width: 13rem;
  max-width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  transform: scaleX(0.6);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.6s;
}
.wi-funnel__step:nth-child(2) { transition-delay: 0.15s; } .wi-funnel__step:nth-child(3) { transition-delay: 0.3s; } .wi-funnel__step:nth-child(4) { transition-delay: 0.45s; } .wi-funnel__step:nth-child(5) { transition-delay: 0.6s; }
.is-visible .wi-funnel__step { transform: none; opacity: 1; }
.wi-funnel__step b { color: var(--text); font: 700 0.95rem var(--font-mono); }
.wi-funnel__step span { font-size: 0.75rem; color: var(--text-muted); text-align: right; }
.wi-funnel__step--wide { border-color: rgb(var(--accent-2-rgb) / 0.6); background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.14), var(--bg)); }
.wi-funnel__step--end { border-color: rgb(var(--accent-rgb) / 0.6); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.14), var(--bg)); }

/* Konfusionsmatrizen */
.wi-matrices { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .wi-matrices { grid-template-columns: 1fr 1fr; } }
.wi-matrix { display: grid; gap: 0.6rem; padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); }
.wi-matrix--good { border-color: rgb(34 197 94 / 0.45); }
.wi-matrix small { font: 600 0.68rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-subtle); }
.wi-matrix p { margin: 0; font: 600 0.75rem var(--font-mono); color: var(--text); }
.wi-matrix__grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 0.3rem; }
.wi-matrix__h { font: 500 0.62rem var(--font-mono); color: var(--text-subtle); align-self: center; text-align: center; }
.wi-matrix__grid b { display: grid; place-items: center; height: 2.6rem; border-radius: 0.45rem; background: rgb(var(--ink) / 0.05); color: var(--text); font: 700 0.95rem var(--font-mono); }
.wi-matrix__grid b.hit { background: rgb(34 197 94 / 0.18); color: var(--success); }
.wi-matrix__grid b.miss { background: rgb(var(--accent-rgb) / 0.16); color: var(--accent-text); }

/* Tabelle */
.wi-table-wrap { overflow-x: auto; margin: var(--space-5) 0; border-radius: var(--radius); border: 1px solid var(--border); }
.wi-table { width: 100%; border-collapse: collapse; font: 500 0.82rem var(--font-mono); font-variant-numeric: tabular-nums; }
.wi-table th, .wi-table td { padding: 0.65rem 0.9rem; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.wi-table th:first-child, .wi-table td:first-child { text-align: left; }
.wi-table th { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface); }
.wi-table td { color: var(--text); }
.wi-table tr:last-child td { border-bottom: 0; }
.wi-table tr.best td { background: rgb(var(--accent-rgb) / 0.1); color: var(--text); font-weight: 700; }

/* Autor & weitere Artikel */
.wi-author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-8);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.wi-author img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--accent); }
.wi-author small { font: 600 0.65rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.wi-author strong { display: block; color: var(--text); font-size: 1.05rem; }
.wi-author p { margin: 0.35rem 0 0.75rem; font-size: 0.9rem; line-height: 1.6; }
.wi-author__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.wi-more { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
.wi-more__label { margin: 0; font: 600 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.wi-more__list { display: grid; gap: 0.6rem; }
@media (min-width: 760px) { .wi-more__list { grid-template-columns: repeat(3, 1fr); } }
.wi-more__item {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.wi-more__item:hover { border-color: rgb(var(--accent-rgb) / 0.5); transform: translateY(-3px); }
.wi-more__item small { font: 600 0.65rem var(--font-mono); color: var(--accent-text); letter-spacing: 0.05em; }
.wi-more__item strong { color: var(--text); font-size: 0.92rem; line-height: 1.4; }
.wi-more__item .link-arrow { margin-top: auto; }

/* ---------- Übersicht ---------- */
.wi-stack { position: relative; height: 18rem; perspective: 1200px; }
.wi-stack__card {
  position: absolute;
  left: 50%;
  width: min(80%, 22rem);
  display: grid;
  gap: 0.55rem;
  padding: 1.1rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.92);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
  transition: transform 0.8s var(--ease);
}
.wi-stack__card small { font: 600 0.65rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.wi-stack__card i { display: block; height: 0.5rem; border-radius: 0.3rem; background: rgb(var(--ink) / 0.12); }
.wi-stack__card:nth-child(1) { top: 0; transform: translateX(-62%) rotate(-6deg); }
.wi-stack__card:nth-child(2) { top: 4.5rem; transform: translateX(-45%) rotate(2deg); z-index: 2; border-color: rgb(var(--accent-rgb) / 0.5); }
.wi-stack__card:nth-child(3) { top: 9rem; transform: translateX(-35%) rotate(-2deg); }
.wi-stack:hover .wi-stack__card:nth-child(1) { transform: translateX(-70%) rotate(-9deg) translateY(-6px); }
.wi-stack:hover .wi-stack__card:nth-child(3) { transform: translateX(-28%) rotate(1deg) translateY(6px); }
@media (max-width: 959px) { .wi-stack { height: 15rem; } }

.wi-articles { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .wi-articles { grid-template-columns: repeat(3, 1fr); } .wi-article-card--featured { grid-column: 1 / -1; } }
.wi-article-card { gap: var(--space-4); transition: transform 0.5s var(--ease); }
.wi-article-card:hover { transform: translateY(-4px); }
.wi-article-card p { font-size: var(--fs-sm); }
.wi-article-card__meta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font: 500 0.72rem var(--font-mono); color: var(--text-subtle); }
.wi-article-card__meta > svg { width: 0.95rem; height: 0.95rem; }
.wi-article-card--featured { padding: 0; overflow: hidden; }
@media (min-width: 760px) { .wi-article-card--featured { grid-template-columns: 1fr 1.2fr; } }
.wi-article-card__visual {
  display: grid;
  place-items: center;
  min-height: 13rem;
  padding: 1.5rem;
  background-color: rgb(var(--ink) / 0.02);
  background-image: radial-gradient(ellipse at 30% 100%, rgb(var(--accent-rgb) / 0.2), transparent 60%), radial-gradient(rgb(var(--ink) / 0.09) 1px, transparent 1.5px);
  background-size: auto, 14px 14px;
}
.wi-article-card__body { display: grid; gap: var(--space-4); align-content: center; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.wi-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.wi-tags li { padding: 0.2rem 0.6rem; border-radius: 999px; background: rgb(var(--accent-rgb) / 0.12); color: var(--accent-text); font: 600 0.65rem var(--font-mono); letter-spacing: 0.04em; }
.wi-mini-chunks { display: flex; flex-wrap: wrap; gap: 0.35rem; width: min(100%, 18rem); }
.wi-mini-chunks i { display: block; height: 0.85rem; border-radius: 0.3rem; flex: 1 1 4rem; }
.wi-mini-chunks i.c1 { background: rgb(var(--accent-rgb) / 0.45); }
.wi-mini-chunks i.c2 { background: rgb(var(--accent-2-rgb) / 0.45); flex-basis: 6rem; }
.wi-mini-chunks i.c3 { background: rgb(34 197 94 / 0.4); flex-basis: 3rem; }
.wi-article-card:hover .wi-mini-chunks i { animation: wi-shuffle 0.8s var(--ease); }
@keyframes wi-shuffle { 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .is-visible .wi-flow li, .wi-article-card:hover .wi-mini-chunks i { animation: none; }
  .wi-funnel__step { transform: none; opacity: 1; }
}

/* ===== Projekte: Fallstudie Hull Tactical ===== */

/* ---------- Projekte: Hull Tactical (Data Mining) ---------- */

/* ===== Navigation: gleich gewichtete Untermenüs ===== */
.nav__dropdown--groups { width: 40rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem 0.5rem; padding: 0.75rem; }
.nav__dropdown--groups .dropdown-all { grid-column: 1 / -1; }
.dropdown-group { display: grid; gap: 0.1rem; align-content: start; }
.dropdown-group__title { margin: 0 0 0.35rem; padding: 0.25rem 0.6rem; font: 600 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.dropdown-link--compact { grid-template-columns: auto 1fr; align-items: center; padding: 0.5rem 0.6rem; }
.dropdown-link--compact .dropdown-link__icon { grid-row: auto; width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; }
.dropdown-link--compact .dropdown-link__icon svg { width: 0.95rem; height: 0.95rem; }
.dropdown-link--compact .dropdown-link__title { font-size: 0.82rem; }
.nav__dropdown--list { width: 19rem; display: grid; gap: 0.1rem; padding: 0.5rem; }
.dropdown-item { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.7rem; row-gap: 0.05rem; padding: 0.5rem 0.6rem; border-radius: calc(var(--radius) - 0.35rem); transition: background-color 0.2s; }
.dropdown-item:hover { background: rgb(var(--ink) / 0.05); }
.dropdown-item strong { font-size: 0.85rem; }
.dropdown-item small { font-size: 0.72rem; color: var(--text-muted); }

/* ===== Artikel + Fallstudie: LoRA Fine-Tuning ===== */

/* ===== Wissen: Fine-Tuning mit LoRA (dl-) ===== */
.dl-title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); }
.dl-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.dl-meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.dl-meta svg { width: 1rem; height: 1rem; color: var(--accent-text); }

.dl-article > * + * { margin-top: 0; }
.dl-callout {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / 0.12), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgb(var(--accent-rgb) / 0.55), rgb(var(--accent-2-rgb) / 0.3), rgb(var(--ink) / 0.06)) border-box;
}
.dl-callout__label { font: 600 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.dl-callout .checklist li { color: var(--text); font-size: var(--fs-base); }

.dl-figure {
  margin: var(--space-6) 0;
  padding: clamp(1rem, 0.6rem + 2vw, 1.75rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: radial-gradient(rgb(var(--ink) / 0.07) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.dl-figure__caption { margin-top: var(--space-4); font: 500 0.72rem var(--font-mono); color: var(--text-subtle); }

/* Parameter-Vergleich */
.dl-lora { display: grid; grid-template-columns: 1.2fr auto 1fr; align-items: center; gap: var(--space-4); }
.dl-lora b { display: block; font: 600 0.72rem var(--font-mono); color: var(--text-muted); margin-top: 0.5rem; }
.dl-lora span { display: block; font-size: var(--fs-sm); color: var(--text-muted); }
.dl-lora strong { color: var(--text); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.dl-lora__grid {
  aspect-ratio: 1;
  border-radius: 0.6rem;
  border: 1px solid rgb(var(--accent-2-rgb) / 0.5);
  background-image:
    linear-gradient(rgb(var(--accent-2-rgb) / 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.25) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
  background-color: rgb(var(--accent-2-rgb) / 0.08);
}
.dl-lora__vs { font: 700 0.8rem var(--font-mono); color: var(--text-subtle); }
.dl-lora__pair { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); align-items: end; }
.dl-lora__pair > span { grid-column: 1 / -1; }
.dl-lora__b i, .dl-lora__a i {
  display: block;
  border-radius: 0.4rem;
  background: linear-gradient(135deg, #ff8a66, var(--accent-strong));
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / 0.35);
  transform-origin: bottom left;
  transform: scale(0);
  transition: transform 1s var(--ease) 0.3s;
}
.dl-lora__b i { width: 1.1rem; height: 9rem; }
.dl-lora__a i { width: 9rem; height: 1.1rem; transition-delay: 0.6s; }
.is-visible .dl-lora__b i, .is-visible .dl-lora__a i { transform: none; }
@media (max-width: 600px) {
  .dl-lora { grid-template-columns: 1fr; }
  .dl-lora__full { max-width: 12rem; }
  .dl-lora__b i { height: 6rem; }
  .dl-lora__a i { width: 6rem; }
}

/* Perplexity-Balken */
.dl-bars { display: grid; gap: var(--space-5); }
.dl-bars__label { margin: 0 0 0.5rem; font: 600 0.7rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.dl-bar { display: grid; grid-template-columns: 6.5rem 1fr 3.2rem; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
.dl-bar span { font: 500 0.72rem var(--font-mono); color: var(--text-muted); }
.dl-bar b { font: 700 0.78rem var(--font-mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.dl-bar i {
  display: block;
  height: 0.7rem;
  border-radius: 999px;
  width: calc(var(--v) / 28 * 100%);
  background: linear-gradient(90deg, #22c55e, #86efac);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease) 0.2s;
}
.dl-bar--mid i { background: linear-gradient(90deg, var(--accent-2), #b8adff); }
.dl-bar--bad i { background: linear-gradient(90deg, var(--accent-strong), #ff8a66); }
.is-visible .dl-bar i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dl-lora__b i, .dl-lora__a i, .dl-bar i { transform: none; transition: none; }
}

/* Projekte-Fallstudie: LoRA-Visual (dl-) */
.dl-pj { display: grid; gap: var(--space-4); }
.dl-pj__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.dl-pj__grid div { padding: 0.75rem; border-radius: 0.7rem; border: 1px solid var(--border); background: var(--surface); text-align: center; }
.dl-pj__grid small { display: block; font: 600 0.62rem var(--font-mono); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.05em; }
.dl-pj__grid strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.dl-pj__grid .is-good strong { color: var(--success); }
.dl-pj__grid .is-bad strong { color: var(--accent-text); }
.dl-pj__chat { display: grid; gap: 0.45rem; padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); }
.dl-pj__chat span { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 0.8rem; font-size: 0.8rem; line-height: 1.35; }
.dl-pj__q { justify-self: end; background: rgb(var(--ink) / 0.06); border: 1px solid var(--border); }
.dl-pj__a { justify-self: start; color: #fff; background: linear-gradient(120deg, #ff6b4a, #e5392d 50%, #c32c5a); }
.dl-pj__note { font: 500 0.66rem var(--font-mono); color: var(--text-subtle); }
.dl-article section > * + * { margin-top: 1rem; }
.dl-article section > h2 + * { margin-top: 0; }
.dl-lora__full { max-width: 14rem; }

/* ===== Projekte: Metrik-Vergleich ===== */

/* Projekte: Modellvergleich Market Prediction */
.pj3-metrics {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--fs-sm);
}
.pj3-metrics__row {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.pj3-metrics__row:first-child { border-top: 0; }
.pj3-metrics__row--head {
  background: rgb(var(--ink) / 0.04);
  font: 600 0.66rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.pj3-metrics__row span:first-child { font-weight: 700; }
.pj3-metrics__row small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--text-muted); }
.pj3-metrics__row--bad span:not(:first-child) { color: var(--text-muted); }
.pj3-metrics__row--good { background: linear-gradient(90deg, rgb(34 197 94 / 0.08), transparent 70%); }
.pj3-metrics__row--good span:not(:first-child) { color: var(--success); font-weight: 700; }
@media (max-width: 560px) {
  .pj3-metrics__row { grid-template-columns: 1.4fr repeat(4, 1fr); font-size: 0.75rem; padding: 0.55rem 0.6rem; }
}
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; transition: color 0.2s, border-color 0.2s; }
.footer-social a:hover { color: var(--text); border-color: rgb(var(--accent-rgb) / 0.5); }
.footer-social svg { width: 1rem; height: 1rem; }
.grid--4 > .more-service > svg { display: none; }
/* Footer: Spalten wie die Hauptnavigation */
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
@media (min-width: 600px) and (max-width: 899px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }

/* Kontakt: Anfrage nur per E-Mail */
.mail-cta { display: grid; gap: var(--space-7); align-items: center; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border-radius: var(--radius-lg); border: 1px solid transparent;
  background: radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / 0.14), transparent 55%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgb(var(--accent-rgb) / 0.55), rgb(var(--accent-2-rgb) / 0.3), rgb(var(--ink) / 0.06)) border-box; box-shadow: var(--shadow-pop); }
@media (min-width: 960px) { .mail-cta { grid-template-columns: 1.3fr 1fr; } }
.mail-tips { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius); border: 1px solid var(--border); background: rgb(var(--bg-rgb) / 0.5); }
.mail-tips__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.mail-tips__title svg { width: 1.1rem; height: 1.1rem; color: var(--accent-text); }
.mail-cta .btn svg { box-sizing: content-box; }

/* ===== Fix: Unter-/Oberlängen in animierten Überschriften nicht abschneiden ===== */
.split-word { padding: 0.08em 0 0.24em; margin: -0.08em 0 -0.24em; }
.split-word.hl::after { bottom: 0.16em; }
/* Verlaufstext: Füllfläche bis unter die Unterlänge ziehen */
.text-gradient { padding-bottom: 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.split-word > .text-gradient { margin-bottom: -0.14em; }

/* ---------- Fallstudie LoRA Fine-Tuning (projekte/lora-finetuning.html) ---------- */

/* Hero: Adapter-Diagramm */
.lrd-stage { width: 100%; }
.lrd-adapter {
  width: 100%;
  max-width: 32rem;
  display: grid;
  gap: 0.9rem;
  padding: 1.4rem;
  border-radius: 1.1rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg);
  transition: transform 0.8s var(--ease);
}
.lrd-stage:hover .lrd-adapter { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.lrd-adapter small { display: block; font: 500 0.64rem var(--font-mono); letter-spacing: 0.04em; color: var(--text-subtle); }
.lrd-adapter b { font: 700 0.95rem var(--font-mono); color: var(--text); }
.lrd-adapter__in, .lrd-adapter__out { display: flex; align-items: center; gap: 0.7rem; }
.lrd-adapter__in i, .lrd-adapter__out i {
  flex: 1;
  height: 0.7rem;
  border-radius: 0.3rem;
  background: repeating-linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.55) 0 14%, rgb(var(--accent-2-rgb) / 0.25) 14% 15%);
}
.lrd-adapter__out i { background: repeating-linear-gradient(90deg, rgb(var(--accent-rgb) / 0.7) 0 14%, rgb(var(--accent-rgb) / 0.3) 14% 15%); }
.lrd-adapter__out b { font-size: 0.8rem; color: var(--accent-text); }
.lrd-adapter__paths { display: grid; grid-template-columns: 1.15fr auto 1fr; align-items: center; gap: 0.8rem; }
.lrd-adapter__w {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  overflow: hidden;
}
.lrd-adapter__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(var(--ink) / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--ink) / 0.07) 1px, transparent 1px);
  background-size: 12px 12px;
}
.lrd-adapter__w b, .lrd-adapter__w small { position: relative; }
.lrd-adapter__w b { font-size: 1.5rem; color: var(--text-muted); }
.lrd-adapter__plus { font: 700 1.4rem var(--font-mono); color: var(--accent-text); }
.lrd-adapter__ba { display: grid; justify-items: center; gap: 0.25rem; }
.lrd-adapter__b, .lrd-adapter__a {
  width: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0.75rem 0.4rem;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.85), rgb(var(--accent-2-rgb) / 0.75));
}
.lrd-adapter__b { clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.lrd-adapter__a { clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.lrd-adapter__b b, .lrd-adapter__a b { color: #fff; }
.lrd-adapter__b small, .lrd-adapter__a small { color: rgb(255 255 255 / 0.85); }
.lrd-adapter__r { font: italic 600 0.8rem var(--font-mono); color: var(--text-subtle); }
.lrd-adapter__train { margin-top: 0.25rem; color: var(--accent-text) !important; }
.lrd-stage .lrd-adapter__b, .lrd-stage .lrd-adapter__a { animation: lrd-pulse 3.2s var(--ease) infinite; }
.lrd-stage .lrd-adapter__a { animation-delay: 0.4s; }
@keyframes lrd-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25) saturate(1.2); } }

.lrd-badge {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  display: grid;
  gap: 0.1rem;
  max-width: 13rem;
  padding: 0.8rem 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.lrd-badge small { font: 600 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.lrd-badge strong { font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.02em; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lrd-badge span { font-size: 0.72rem; color: var(--text-muted); }

/* Kennzahlen-Band */
.lrd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--border); }
.lrd-kpis > div { display: flex; flex-direction: column-reverse; gap: 0.3rem; padding: 1.3rem 1.4rem; background: var(--surface); }
.lrd-kpis dt { font: 500 0.72rem var(--font-mono); letter-spacing: 0.04em; color: var(--text-subtle); }
.lrd-kpis dd { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }

/* Query / Key / Value */
.lrd-qkv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: var(--space-5) 0; }
.lrd-qkv > div { padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.lrd-qkv b { display: block; font: 700 0.8rem var(--font-mono); margin-bottom: 0.3rem; }
.lrd-qkv > div:nth-child(1) b { color: #d9a400; }
.lrd-qkv > div:nth-child(2) b { color: #e5603e; }
.lrd-qkv > div:nth-child(3) b { color: var(--accent-2); }
.lrd-qkv span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Attention-Heatmap */
.lrd-attn__wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.lrd-attn__m > p { margin: 0 0 0.6rem; font: 600 0.72rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.lrd-attn__grid { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 4px; align-items: center; }
.lrd-attn__grid .h { font: 500 0.66rem var(--font-mono); color: var(--text-muted); text-align: center; padding: 0 0.2rem; }
.lrd-attn__grid > span.h:nth-child(4n+5), .lrd-attn__grid > span.h:nth-child(5), .lrd-attn__grid > span.h:nth-child(9), .lrd-attn__grid > span.h:nth-child(13) { text-align: right; }
.lrd-attn__grid i {
  display: grid;
  place-items: center;
  aspect-ratio: 1.4;
  border-radius: 0.4rem;
  font: 600 0.74rem var(--font-mono);
  font-style: normal;
  color: var(--text);
  background: rgb(var(--accent-rgb) / calc(0.08 + var(--w, 0) * 0.82));
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.lrd-attn__grid i[style*="--w:.7"], .lrd-attn__grid i[style*="--w:.75"], .lrd-attn__grid i[style*="--w:.8"], .lrd-attn__grid i[style*="--w:1"] { color: #fff; }
.lrd-attn__grid i.x { background: repeating-linear-gradient(45deg, rgb(var(--ink) / 0.06) 0 4px, transparent 4px 8px); color: var(--text-subtle); }
.lrd-attn.is-visible .lrd-attn__grid i { transform: none; opacity: 1; }
.lrd-attn__grid i:nth-of-type(2), .lrd-attn__grid i:nth-of-type(4) { transition-delay: 0.08s; }
.lrd-attn__grid i:nth-of-type(3), .lrd-attn__grid i:nth-of-type(5), .lrd-attn__grid i:nth-of-type(7) { transition-delay: 0.16s; }
.lrd-attn__grid i:nth-of-type(6), .lrd-attn__grid i:nth-of-type(8) { transition-delay: 0.24s; }
.lrd-attn__grid i:nth-of-type(9) { transition-delay: 0.32s; }

/* Versuchsaufbau */
.lrd-setup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-5) 0; }
.lrd-setup__col { padding: 1.2rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.lrd-setup__col--var { border-color: rgb(var(--accent-rgb) / 0.45); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.12); }
.lrd-setup__col > small { display: block; margin-bottom: 0.7rem; font: 600 0.68rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.lrd-setup dl { margin: 0; display: grid; gap: 0.5rem; }
.lrd-setup dl > div { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--border); }
.lrd-setup dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.lrd-setup dt { font-size: var(--fs-sm); color: var(--text-muted); }
.lrd-setup dd { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; font: 600 0.8rem var(--font-mono); color: var(--text); }
.lrd-pill { padding: 0.15rem 0.55rem; border-radius: 999px; background: rgb(var(--accent-rgb) / 0.14); color: var(--accent-text); }
.lrd-setup__calc { margin: 0.9rem 0 0; font: 500 0.8rem var(--font-mono); color: var(--text-muted); }
.lrd-setup__calc strong { color: var(--text); }

/* Ergebnistabelle */
.lrd-table tr.is-bad td { color: var(--text-subtle); }

/* Beispielantwort */
.lrd-chat { margin: var(--space-5) 0; padding: 1.2rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); display: grid; gap: 0.6rem; }
.lrd-chat > small { font: 600 0.66rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.lrd-chat p { margin: 0; max-width: 85%; padding: 0.65rem 0.95rem; border-radius: 1rem; }
.lrd-chat__q { justify-self: end; background: rgb(var(--ink) / 0.07); border-bottom-right-radius: 0.3rem; }
.lrd-chat__a { background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.9), rgb(var(--accent-2-rgb) / 0.8)); color: #fff; border-bottom-left-radius: 0.3rem; }
.lrd-chat > span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Trainingskurve */
.lrd-curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.lrd-curve__legend { display: flex; gap: 1.2rem; margin-bottom: 0.6rem; font: 500 0.72rem var(--font-mono); color: var(--text-muted); }
.lrd-curve__legend span::before { content: ""; display: inline-block; width: 1rem; height: 3px; margin-right: 0.45rem; vertical-align: middle; border-radius: 2px; }
.lrd-curve__legend .t::before { background: var(--accent-2); }
.lrd-curve__legend .v::before { background: var(--accent); }
.lrd-curve__grid line { stroke: rgb(var(--ink) / 0.08); stroke-width: 1; }
.lrd-curve__axis text { font: 500 11px var(--font-mono); fill: var(--text-subtle); text-anchor: end; }
.lrd-curve__axis text:nth-child(n+6) { text-anchor: middle; }
.lrd-curve__zone { fill: rgb(var(--accent-rgb) / 0.07); }
.lrd-curve path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.lrd-curve__t { stroke: var(--accent-2); }
.lrd-curve__v { stroke: var(--accent); transition-delay: 0.3s !important; }
.lrd-curve.is-visible path { stroke-dashoffset: 0; }
.lrd-curve__min { fill: var(--surface); stroke: var(--accent); stroke-width: 3; opacity: 0; transition: opacity 0.4s 1.6s; }
.lrd-curve.is-visible .lrd-curve__min { opacity: 1; }
.lrd-curve__note { font: 600 11px var(--font-mono); fill: var(--accent-text); }

/* Tech-Stack */
.lrd-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.lrd-stack small { display: block; margin-bottom: 0.4rem; font: 600 0.68rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }

@media (max-width: 760px) {
  .lrd-kpis { grid-template-columns: repeat(2, 1fr); }
  .lrd-qkv, .lrd-setup, .lrd-stack, .lrd-attn__wrap { grid-template-columns: 1fr; }
  .lrd-adapter { transform: none; padding: 1.1rem; }
  .lrd-badge { position: static; margin-top: 0.8rem; max-width: none; }
  .lrd-curve__note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lrd-stage .lrd-adapter__b, .lrd-stage .lrd-adapter__a { animation: none; }
  .lrd-curve path { stroke-dashoffset: 0; transition: none; }
  .lrd-curve__min, .lrd-attn__grid i { opacity: 1; transform: none; transition: none; }
}
.lrd-table th, .lrd-table td { padding: 0.6rem 0.55rem; }
.lrd-learn { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .lrd-learn { grid-template-columns: 1fr; } }

/* ===== Detailseite: RT-Vector ===== */
/* ---------- Fallstudie RT-Vector (projekte/rt-vector.html) ---------- */

/* Hero: Query-Trace */
.rtv-stage { width: 100%; }
.rtv-trace {
  width: 100%;
  max-width: 34rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg);
  transition: transform 0.8s var(--ease);
}
.rtv-stage:hover .rtv-trace { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.rtv-trace__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
.rtv-trace__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(var(--ink) / 0.14); }
.rtv-trace__bar i:first-child { background: var(--accent); }
.rtv-trace__bar b { margin-left: 0.6rem; font: 500 0.72rem var(--font-mono); color: var(--text-muted); }
.rtv-trace__body { margin: 0; padding: 0.9rem 1rem 1.1rem; list-style: none; display: grid; gap: 0.15rem; font: 500 0.78rem/1.5 var(--font-mono); }
.rtv-trace__body li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.45rem;
}
.rtv-trace__body span { color: var(--accent-2); }
.rtv-trace__body span::before { content: "› "; color: var(--text-subtle); }
.rtv-trace__body code { font: inherit; color: var(--text); }
.rtv-trace__body em { font-style: normal; color: var(--accent-text); }
.rtv-trace__body em.ok { color: var(--success); }
.rtv-trace__body s { text-decoration: none; color: var(--accent-text); }
.rtv-trace__out { background: rgb(var(--accent-rgb) / 0.1); box-shadow: inset 2px 0 0 var(--accent); }

/* Zeilen nacheinander einblenden */
.rtv-stage .rtv-trace__body li { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.rtv-stage.is-visible .rtv-trace__body li { opacity: 1; transform: none; }
.rtv-trace__body li:nth-child(2) { transition-delay: 0.15s; }
.rtv-trace__body li:nth-child(3) { transition-delay: 0.3s; }
.rtv-trace__body li:nth-child(4) { transition-delay: 0.45s; }
.rtv-trace__body li:nth-child(5) { transition-delay: 0.6s; }
.rtv-trace__body li:nth-child(6) { transition-delay: 0.75s; }
.rtv-trace__body li:nth-child(7) { transition-delay: 0.9s; }
.rtv-trace__body li:nth-child(8) { transition-delay: 1.05s; }

.rtv-score {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  display: grid;
  gap: 0.1rem;
  padding: 0.8rem 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.rtv-score small { font: 600 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.rtv-score strong { font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.02em; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rtv-score span { font-size: 0.75rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .rtv-trace { transform: none; }
  .rtv-trace__body { font-size: 0.7rem; }
  .rtv-trace__body li { grid-template-columns: 3.9rem 1fr; gap: 0.5rem; }
  .rtv-score { position: static; margin-top: 1rem; justify-self: end; }
}

/* Kennzahlen-Band */
.rtv-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--border);
  overflow: hidden;
}
@media (min-width: 800px) { .rtv-kpis { grid-template-columns: repeat(4, 1fr); } }
.rtv-kpis > div { display: flex; flex-direction: column-reverse; gap: 0.3rem; padding: clamp(1rem, 0.8rem + 1vw, 1.6rem); background: var(--surface); }
.rtv-kpis dt { font: 500 0.72rem var(--font-mono); color: var(--text-muted); }
.rtv-kpis dd { margin: 0; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }

/* Architektur: auf schmalen Screens horizontal scrollbar statt winziger Schrift */
.rtv-article { min-width: 0; }
.rtv-figure { padding: 0; background: none; border: 0; }
.rtv-arch { overflow-x: auto; }
.rtv-arch svg { min-width: 560px; }
.rtv-arch .node text { font-size: 16px; }
.rtv-arch .node .sub { font-size: 12px; }

/* Ingestion-Schritte */
.rtv-steps { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .rtv-steps { grid-template-columns: repeat(3, 1fr); } }
.rtv-steps li {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding: 0.85rem 0.8rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  line-height: 1.35;
}
.rtv-steps li:last-child { border-color: rgb(var(--accent-rgb) / 0.5); }
.rtv-steps span { font: 700 0.65rem var(--font-mono); color: var(--accent-text); }
.rtv-steps b { color: var(--text); font-size: 0.92rem; }
.rtv-steps small { font-size: 0.75rem; color: var(--text-muted); }

/* Query-Pipeline als vertikaler Ablauf */
.wi-figure .rtv-pipe { position: relative; display: grid; gap: 0.55rem; margin: 0; padding: 0 0 0 1.6rem; list-style: none; }
.rtv-pipe::before { content: ""; position: absolute; left: 0.45rem; top: 0.6rem; bottom: 0.6rem; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent-2)); }
.rtv-pipe li {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.1rem 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  line-height: 1.4;
}
.rtv-pipe li::before { content: ""; position: absolute; left: -1.44rem; top: 1rem; width: 0.7rem; height: 0.7rem; box-sizing: border-box; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.rtv-pipe__tag { grid-row: span 2; align-self: start; padding-top: 0.15rem; font: 600 0.65rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.rtv-pipe b { color: var(--text); font-size: 0.95rem; }
.rtv-pipe small { font-size: 0.8rem; color: var(--text-muted); }
.rtv-pipe small i { font-style: normal; color: var(--text); }
.rtv-pipe__loop { border-style: dashed !important; }
.rtv-pipe__loop::after { content: "↺ Schleife"; position: absolute; right: 0.8rem; top: 0.7rem; font: 600 0.62rem var(--font-mono); color: var(--accent-2); }
.rtv-pipe__end { border-color: rgb(var(--accent-rgb) / 0.5) !important; background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.1), var(--bg) 70%) !important; }
@media (max-width: 560px) {
  .rtv-pipe li { grid-template-columns: 1fr; }
  .rtv-pipe__tag { grid-row: auto; }
}

/* Metrik-Erklärungen */
.rtv-metrics { display: grid; gap: 0.6rem; margin: var(--space-5) 0; }
@media (min-width: 560px) { .rtv-metrics { grid-template-columns: repeat(2, 1fr); } }
.rtv-metrics div { display: grid; gap: 0.15rem; padding: 0.8rem 0.95rem; border-radius: 0.8rem; border: 1px solid var(--border); background: var(--surface); line-height: 1.4; }
.rtv-metrics b { color: var(--text); font: 600 0.8rem var(--font-mono); }
.rtv-metrics span { font-size: 0.85rem; }

/* Balkendiagramm */
.rtv-chart { display: grid; gap: 1.1rem; }
.rtv-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font: 500 0.72rem var(--font-mono); color: var(--text-muted); }
.rtv-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.rtv-legend span::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; background: var(--rtv-c); }
.rtv-chart .s1 { --rtv-c: linear-gradient(90deg, #ff6b4a, var(--accent)); }
.rtv-chart .s2 { --rtv-c: linear-gradient(90deg, #a99cff, var(--accent-2)); }
.rtv-chart .s3 { --rtv-c: rgb(var(--ink) / 0.3); }
.rtv-chart__group { display: grid; gap: 0.3rem; }
.rtv-chart__group p { margin: 0 0 0.15rem; color: var(--text); font-weight: 700; font-size: 0.9rem; }
.rtv-bar { display: grid; grid-template-columns: 1fr 4rem; align-items: center; gap: 0.7rem; }
.rtv-bar i { display: block; height: 0.7rem; border-radius: 999px; background: rgb(var(--ink) / 0.06); position: relative; overflow: hidden; }
.rtv-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--rtv-c); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.rtv-chart.is-visible .rtv-bar i::after { transform: scaleX(1); }
.rtv-bar b { font: 600 0.78rem var(--font-mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.rtv-bar.s3 b { color: var(--text-muted); }

/* Tech-Stack */
.rtv-stack { display: grid; gap: 1rem; margin-bottom: var(--space-6); }
.rtv-stack small { display: block; margin-bottom: 0.4rem; font: 600 0.68rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.rtv-stack .wi-chips { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .rtv-stage .rtv-trace__body li { opacity: 1; transform: none; transition: none; }
  .rtv-bar i::after { transform: none; transition: none; }
}
.btn-row .link-arrow { align-self: center; margin-left: var(--space-3); }
.wi-layout > * { min-width: 0; }
@media (max-width: 760px) {
  .lrd-attn__grid i { aspect-ratio: auto; padding: 0.55rem 0; }
  .lrd-attn__grid .h { font-size: 0.6rem; }
}

/* ===== Detailseite: Cloud Security ===== */

/* ==========================================================================
   Projekt-Detailseite Cloud Security (csd-)
   ========================================================================== */
.csd-layout.legal--toc { align-items: start; }
@media (min-width: 1000px) { .csd-layout.legal--toc { grid-template-columns: 14rem minmax(0, 50rem); justify-content: center; } }
.csd-article { max-width: 50rem; min-width: 0; }
.csd-article h3 { color: var(--text); }
.csd-article a.btn { text-decoration: none; color: var(--text); }
.csd-article section > h3:not(:first-child) { margin-top: var(--space-7); }
.csd-article :not(pre) > code { font: 400 0.86em var(--font-mono); color: var(--text); padding: 0.08em 0.35em; border-radius: 0.35em; background: rgb(var(--ink) / 0.06); overflow-wrap: anywhere; }

/* ---- Hero: Audit-Ereignis → Regel → Alarm ---- */
.csd-det {
  position: relative;
  width: 100%;
  max-width: 34rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(var(--ink) / 0.03);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform 0.8s var(--ease);
}
.stage--solo:hover > .csd-det { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.csd-det__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); background: rgb(var(--ink) / 0.03); }
.csd-det__bar span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(var(--ink) / 0.15); }
.csd-det__bar em { margin-left: auto; font: 500 0.68rem var(--font-mono); font-style: normal; color: var(--text-subtle); }
.csd-det__body { display: grid; padding: 1rem; }
.csd-det__pane {
  position: relative;
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.025);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.6s, box-shadow 0.6s;
}
.csd-det__pane small { font: 600 0.62rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.csd-det__pane small b { color: var(--accent-text); margin-right: 0.35rem; }
.csd-det__pane code { display: block; font: 500 0.72rem/1.55 var(--font-mono); color: var(--text-muted); overflow-wrap: anywhere; }
.csd-det__pane code i { font-style: normal; color: var(--accent-2); }
.csd-det__pane code u { text-decoration: none; color: var(--success); }
.csd-det__pane--rule { transition-delay: 0.5s; }
.csd-det__pane--alert { transition-delay: 1s; }
.csd-det__match {
  position: relative;
  color: var(--text) !important;
  background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.28), rgb(var(--accent-2-rgb) / 0.28)) no-repeat 0 0 / 0% 100%;
  border-radius: 0.3rem;
  transition: background-size 1.1s var(--ease) 1s;
}
.csd-det__pane--alert {
  grid-template-columns: 1fr auto;
  align-items: center;
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: linear-gradient(120deg, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0.04));
}
.csd-det__pane--alert small { grid-column: 1 / -1; }
.csd-det__pane--alert small b { color: var(--accent-text); }
.csd-det__pane--alert p { margin: 0; font-weight: 600; font-size: 0.86rem; color: var(--text); line-height: 1.35; }
.csd-det__lat { font: 700 0.72rem var(--font-mono); color: #fff; padding: 0.3rem 0.6rem; border-radius: 999px; background: linear-gradient(120deg, #ff6b4a, #e5392d 50%, #c32c5a); white-space: nowrap; }
.csd-det__wire { position: relative; justify-self: center; width: 2px; height: 1.1rem; background: rgb(var(--ink) / 0.12); overflow: hidden; }
.csd-det__wire::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: csd-wire 1.6s linear infinite; }
@keyframes csd-wire { to { top: 100%; } }
.is-visible .csd-det__pane { opacity: 1; transform: none; }
.is-visible .csd-det__match { background-size: 100% 100%; }
.is-visible .csd-det__pane--alert { animation: csd-alert 2.8s ease-in-out 1.8s infinite; }
@keyframes csd-alert { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0); } 50% { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0.12), 0 0 28px -6px rgb(var(--accent-rgb) / 0.6); } }

.csd-score { display: grid; gap: 0.5rem; padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--border); background: rgb(var(--ink) / 0.02); }
.csd-score__row { display: grid; grid-template-columns: 9.5rem 1fr auto; align-items: center; gap: 0.75rem; font: 500 0.68rem var(--font-mono); color: var(--text-muted); }
.csd-score__row b { font: 700 0.85rem var(--font-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.csd-score__row--on b { color: var(--success); }
.csd-dots { display: flex; gap: 0.3rem; }
.csd-dots i { flex: 1; height: 0.55rem; border-radius: 999px; background: rgb(var(--ink) / 0.1); }
.csd-score__row--on .csd-dots i { background: var(--success); box-shadow: 0 0 10px -2px var(--success); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.is-visible .csd-score__row--on .csd-dots i { transform: none; }
.csd-score__row--on .csd-dots i:nth-child(1) { transition-delay: 1.9s; }
.csd-score__row--on .csd-dots i:nth-child(2) { transition-delay: 2.05s; }
.csd-score__row--on .csd-dots i:nth-child(3) { transition-delay: 2.2s; }
.csd-score__row--on .csd-dots i:nth-child(4) { transition-delay: 2.35s; }
.csd-score__row--on .csd-dots i:nth-child(5) { transition-delay: 2.5s; }
.csd-score__row--on .csd-dots i:nth-child(6) { transition-delay: 2.65s; }
.csd-score__row--on .csd-dots i:nth-child(7) { transition-delay: 2.8s; }
@media (max-width: 520px) {
  .csd-det { transform: none; }
  .csd-score__row { grid-template-columns: 1fr auto; }
  .csd-score__row .csd-dots { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- Teilfragen ---- */

/* ---- Architektur ---- */

@keyframes csd-run-x { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 0.55rem); opacity: 0; } }

@keyframes csd-run-y { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 0.55rem); opacity: 0; } }

/* ---- Versionen ---- */

/* ---- Code ---- */
.csd-code {
  margin: 0;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.035);
  overflow: hidden;
}
.csd-code__file { display: block; padding: 0.55rem 1rem; border-bottom: 1px solid var(--border); font: 600 0.64rem var(--font-mono); letter-spacing: 0.05em; color: var(--text-subtle); background: rgb(var(--ink) / 0.03); }
.csd-code code { display: block; padding: 0.9rem 1rem; overflow-x: auto; font: 500 0.76rem/1.65 var(--font-mono); color: var(--text-muted); white-space: pre; }
.csd-code i { font-style: normal; color: var(--accent-2); }
.csd-code u { text-decoration: none; color: var(--success); }
.csd-code mark { color: var(--text); background: rgb(var(--accent-rgb) / 0.22); border-radius: 0.25rem; padding: 0 0.15rem; }

/* ---- Audit-Level ---- */

/* ---- Tabellen ---- */
.csd-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.csd-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.csd-table th { padding: 0.7rem 0.9rem; text-align: left; font: 600 0.62rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border); background: rgb(var(--ink) / 0.03); white-space: nowrap; }
.csd-table td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; }
.csd-table tbody tr:last-child td { border-bottom: 0; }
.csd-table td:first-child { color: var(--text); font-weight: 600; }
.csd-table tbody tr { transition: background-color 0.25s; }
.csd-table tbody tr:hover { background: rgb(var(--ink) / 0.025); }
.csd-table code { white-space: nowrap; }
.csd-table .is-pick td:first-child::after { content: "gewählt"; margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 999px; font: 700 0.58rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--accent-strong); }

.csd-table .is-off td { opacity: 0.55; }
.csd-table .is-off td:first-child code { text-decoration: line-through; }

.csd-table--results td:nth-child(2), .csd-table--results td:last-child { font: 500 0.74rem var(--font-mono); white-space: nowrap; }
@media (max-width: 600px) {
  .csd-table { font-size: 0.8rem; }
  .csd-table th, .csd-table td { padding: 0.55rem 0.6rem; }
  .csd-table--results code { white-space: normal; overflow-wrap: normal; }
}
.csd-pill { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font: 600 0.66rem var(--font-mono); font-style: normal; white-space: nowrap; border: 1px solid transparent; }
.csd-pill--ok { color: var(--success); background: rgb(34 197 94 / 0.12); border-color: rgb(34 197 94 / 0.3); }

.csd-pill--bad { color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.1); border-color: rgb(var(--accent-rgb) / 0.3); }

/* ---- Zwei Phasen ---- */

/* ---- Latenz-Formel ---- */

/* ---- KPIs ---- */

/* ---- Latenz-Chart ---- */
.csd-lat { --label: 8.5rem; --val: 3.4rem; }
.csd-lat__axis, .csd-lat__rows li { display: grid; grid-template-columns: var(--label) 1fr var(--val); gap: 0.75rem; align-items: center; }
.csd-lat__axis { margin-bottom: 0.5rem; font: 500 0.6rem var(--font-mono); color: var(--text-subtle); }
.csd-lat__axis div { position: relative; height: 1em; }
.csd-lat__axis div span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); white-space: nowrap; }
.csd-lat__axis div span:first-child { transform: none; }
.csd-lat__axis div span:last-child { transform: translateX(-100%); }
.csd-lat__rows { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 0.55rem !important; }
.csd-lat__rows li::marker { content: none; }
.csd-lat__rows span { font: 500 0.7rem var(--font-mono); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csd-lat__rows em { font: 700 0.74rem var(--font-mono); font-style: normal; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.csd-lat__track {
  position: relative;
  height: 1.1rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgb(var(--ink) / 0.12) 1px, transparent 1px) 0 0 / 25% 100%,
    rgb(var(--ink) / 0.04);
}
.csd-lat__track::after { content: ""; position: absolute; top: -0.25rem; bottom: -0.25rem; left: calc(1.041 / 2 * 100%); width: 0; border-left: 1px dashed var(--accent-text); opacity: 0.7; }
.csd-lat__track i {
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: calc(var(--min) / 2 * 100%);
  width: calc((var(--max) - var(--min)) / 2 * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.55), rgb(var(--accent-rgb) / 0.75));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1s var(--ease) 0.2s;
}
.csd-lat__track b {
  position: absolute;
  top: 50%;
  left: calc(var(--avg) / 2 * 100%);
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px rgb(var(--ink) / 0.25);
  opacity: 0;
  transition: opacity 0.4s 1s;
}
.is-visible .csd-lat__track i { transform: none; }
.is-visible .csd-lat__track b { opacity: 1; }
@media (max-width: 560px) { .csd-lat { --label: 6.2rem; --val: 2.8rem; } .csd-lat__axis div span:nth-child(2), .csd-lat__axis div span:nth-child(4) { visibility: hidden; } }

/* ---- Robustheitstest ---- */

/* ---- Grenzen ---- */

/* ---- Learnings ---- */
.csd-learn { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .csd-learn { grid-template-columns: 1fr 1fr; } }
.csd-learn article { position: relative; display: grid; align-content: start; gap: 0.45rem; padding: 1.1rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); overflow: hidden; transition: border-color 0.3s, transform 0.4s var(--ease); }
.csd-learn article:hover { border-color: rgb(var(--accent-rgb) / 0.4); transform: translateY(-2px); }
.csd-learn article > span { font: 700 0.7rem var(--font-mono); color: var(--accent-text); }
.csd-learn h3 { margin: 0 !important; font-size: 1rem; }
.csd-learn p { margin: 0; font-size: 0.86rem; line-height: 1.55; }
.csd-learn article::after { content: ""; position: absolute; right: -2rem; top: -2rem; width: 6rem; height: 6rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.14), transparent); }

/* ---- Tech-Stack ---- */
.csd-chips { list-style: none; padding: 0 !important; display: flex !important; }
.csd-chips .chip { cursor: default; }
.csd-chips li::marker { content: none; }

@media (prefers-reduced-motion: reduce) {
  .csd-det,
.csd-det__pane,
.csd-det__match,
.csd-score__row--on .csd-dots i,
.csd-lat__track i,
.csd-lat__track b { transition: none !important; }
  .csd-det__pane { opacity: 1; transform: none; }
  .csd-det__match { background-size: 100% 100%; }
  .csd-score__row--on .csd-dots i,
.csd-lat__track i { transform: none; }
  .csd-lat__track b { opacity: 1; }
  .csd-det__wire::after,
.is-visible .csd-det__pane--alert { animation: none; }
}

/* Untermenüs mit Icons (wie Leistungen) */
.dropdown-item .dropdown-link__icon { grid-row: span 2; width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; transition: background-color 0.2s, color 0.2s; }
.dropdown-item .dropdown-link__icon svg { width: 0.95rem; height: 0.95rem; }
.dropdown-item strong { align-self: end; }
.dropdown-item small { align-self: start; }
.dropdown-item:hover .dropdown-link__icon { background: var(--accent); color: #fff; }

/* ===== Insights: Kubernetes & Terraform ===== */
/* ---------- Insights: Kubernetes & Terraform (k8-) ---------- */
/* Tabelle der Audit-Stufen: Beschreibungen umbrechen, linksbündig */
.wi-table.k8-table td, .wi-table.k8-table th { text-align: left; }
.wi-table.k8-table td:nth-child(2) { white-space: normal; min-width: 14rem; color: var(--text-muted); font-family: inherit; }
.wi-table.k8-table td:first-child { color: var(--accent-text); font-weight: 700; }

/* Detailgrad-Anzeige: drei Segmente, --k8-l = Anzahl aktiver Segmente (0–3) */
.k8-level {
  --k8-on: rgb(var(--accent-rgb) / 0.85);
  --k8-off: rgb(var(--ink) / 0.1);
  display: inline-block;
  width: 4.5rem;
  height: 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  background:
    linear-gradient(90deg,
      var(--k8-on) 0 calc(var(--k8-l, 0) * 33.334%),
      var(--k8-off) calc(var(--k8-l, 0) * 33.334%) 100%);
  -webkit-mask: linear-gradient(90deg, #000 0 31%, transparent 31% 34.5%, #000 34.5% 65.5%, transparent 65.5% 69%, #000 69% 100%);
          mask: linear-gradient(90deg, #000 0 31%, transparent 31% 34.5%, #000 34.5% 65.5%, transparent 65.5% 69%, #000 69% 100%);
}

/* Code-Auszug im Artikel (eigenständig, unabhängig von .csd-code) */
.k8-code { margin: var(--space-5) 0; padding: 0; border-radius: var(--radius); border: 1px solid var(--border); background: rgb(var(--ink) / 0.035); overflow: hidden; }
.k8-code__file { display: block; padding: 0.55rem 1rem; border-bottom: 1px solid var(--border); font: 600 0.64rem var(--font-mono); letter-spacing: 0.05em; color: var(--text-subtle); background: rgb(var(--ink) / 0.03); }
.k8-code code { display: block; padding: 0.9rem 1rem; overflow-x: auto; font: 500 0.76rem/1.65 var(--font-mono); color: var(--text-muted); white-space: pre; background: none; border: 0; }
.k8-code i { font-style: normal; color: var(--accent-2); }
.k8-code u { text-decoration: none; color: var(--success); }

/* ===== Insights: Wazuh & Angriffserkennung ===== */
/* ---------- Insights: Angriffserkennung mit Wazuh (wz-) ---------- */
/* Signal vs. Rauschen: 43 Punkte, einer leuchtet */
.wz-noise { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius, 1rem); background: var(--surface); }
.wz-noise__grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 0.45rem; max-width: 26rem; margin: 0 auto 1.25rem; }
.wz-noise__grid i, .wz-noise__legend i {
  display: block; aspect-ratio: 1; border-radius: 50%;
  background: rgb(var(--ink) / 0.14);
}
.wz-noise__grid i.is-signal, .wz-noise__legend i.is-signal {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.18), 0 0 18px rgb(var(--accent-rgb) / 0.7);
}
.wz-noise.is-visible .wz-noise__grid i.is-signal { animation: wz-pulse 2.4s var(--ease, ease) infinite; }
@keyframes wz-pulse { 50% { box-shadow: 0 0 0 8px rgb(var(--accent-rgb) / 0.06), 0 0 26px rgb(var(--accent-rgb) / 0.9); } }
.wz-noise__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; font-size: 0.9rem; font-weight: 600; }
.wz-noise__legend span { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wz-noise__legend i { width: 0.75rem; flex: none; }
.wz-noise__legend small { flex-basis: 100%; padding-left: 1.25rem; font: 500 0.72rem var(--font-mono); color: var(--text-muted); }

/* Gleicher Angriff, andere Schreibweise */
.wz-compare { display: grid; gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 640px) { .wz-compare { grid-template-columns: 1fr 1fr; } }
.wz-compare__card {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.1rem 1.25rem; border-radius: var(--radius, 1rem);
  border: 1px solid var(--border); background: var(--surface);
}
.wz-compare__card small { font: 600 0.68rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.wz-compare__card code { font-size: 0.92rem; overflow-wrap: anywhere; }
.wz-compare__card b { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.wz-compare__card b svg { width: 1rem; height: 1rem; }
.wz-compare__card.is-hit { border-color: rgb(34 197 94 / 0.4); }
.wz-compare__card.is-hit b { color: var(--success); }
.wz-compare__card.is-miss { border-color: rgb(var(--accent-rgb) / 0.5); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.1), var(--surface) 70%); }
.wz-compare__card.is-miss b { color: var(--accent-text); }

/* Leistungen-Menü mit vier Gruppen */
.nav__dropdown--groups { width: 50rem; grid-template-columns: repeat(4, 1fr); }
.nav__dropdown.nav__dropdown--groups { left: -4rem; width: min(50rem, calc(100vw - 2rem)); transform: translate(0, -6px); }
.nav__item:hover .nav__dropdown--groups,
.nav__item:focus-within .nav__dropdown--groups,
.nav__item.is-open .nav__dropdown--groups { transform: translate(0, 0); }

/* ===== Leistung: Cloud-Lösungen (az-) ===== */
/* ==========================================================================
   Microsoft Azure (Präfix az-)
   Grundzustand = Endzustand (ohne JS sichtbar); Animationen nur unter .js
   und erst, wenn das [data-reveal]-Elternelement .is-visible ist.
   ========================================================================== */

/* ---------- Hero: Ressourcengruppe, die sich aufbaut ---------- */
.az-hero { width: 100%; }
.az-rg {
  position: relative;
  width: 100%;
  max-width: 32rem;
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: rgb(var(--surface-rgb) / 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg);
  transition: transform 0.8s var(--ease);
}
.az-hero:hover .az-rg { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
@media (max-width: 959px) { .az-rg { transform: none; } .az-hero:hover .az-rg { transform: none; } }
.az-rg__head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.az-rg__head b { display: block; font: 700 0.85rem var(--font-mono); }
.az-rg__head small { display: block; font-size: 0.72rem; color: var(--text-subtle); }
.az-rg__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.65rem;
  background: rgb(var(--accent-2-rgb) / 0.14);
  border: 1px solid rgb(var(--accent-2-rgb) / 0.3);
  color: var(--accent-2);
}
.az-rg__icon svg { width: 1.2rem; height: 1.2rem; }
.az-rg__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.az-res {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.025);
}
.az-res__ico {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.5rem;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.az-res__ico svg { width: 1rem; height: 1rem; }
.az-res b { display: block; font-size: 0.8rem; line-height: 1.25; }
.az-res small { display: block; font-size: 0.68rem; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-res em { display: inline-grid; font: 600 0.62rem var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; }
.az-res em i {
  grid-area: 1 / 1;
  justify-self: end;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-style: normal;
  white-space: nowrap;
}
.az-res em i:first-child { background: rgb(234 179 8 / 0.16); color: #ca8a04; opacity: 0; }
.az-res em i:last-child { background: rgb(34 197 94 / 0.15); color: var(--success); }
.az-rg__foot { display: grid; gap: 0.35rem; }
.az-rg__foot small { font: 500 0.66rem var(--font-mono); color: var(--text-subtle); }
.az-rg__bar { display: block; height: 4px; border-radius: 999px; background: rgb(var(--ink) / 0.08); overflow: hidden; }
.az-rg__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: 0 50%; }
.az-note {
  position: absolute;
  right: 0.8rem;
  bottom: 0.7rem;
  font: 600 0.58rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Ablauf: Zeile erscheint → „wird erstellt“ → „läuft“ */
.js .az-hero.is-visible .az-res { animation: az-row-in 0.5s var(--ease) both; animation-delay: calc(0.4s + var(--i) * 0.45s); }
.js .az-hero.is-visible .az-res em i:first-child { animation: az-pending 1.1s ease both; animation-delay: calc(0.5s + var(--i) * 0.45s); }
.js .az-hero.is-visible .az-res em i:last-child { animation: az-ready 0.4s var(--ease) both; animation-delay: calc(1.5s + var(--i) * 0.45s); }
.js .az-hero.is-visible .az-rg__bar i { animation: az-fill 3.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both; }
.js .az-hero:not(.is-visible) .az-res { opacity: 0; }
@keyframes az-row-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes az-pending { 0% { opacity: 1; } 45% { opacity: 0.45; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes az-ready { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes az-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Bausteine (Tabs) ---------- */
.az-blocks .tabs__panel { align-items: start; }
.az-panel .stack { gap: var(--space-4); }
.az-panel .stack p { color: var(--text-muted); }
.az-spec {
  margin: 0;
  display: grid;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgb(var(--accent-2-rgb) / 0.45), rgb(var(--ink) / 0.06) 55%, rgb(var(--accent-rgb) / 0.35)) border-box;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.az-spec > div { display: grid; gap: 0.4rem; padding: 1rem 1.15rem; }
.az-spec > div + div { border-top: 1px solid var(--border); }
.az-spec dt { font: 600 0.66rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.az-spec dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--fs-sm); color: var(--text); }
.az-chip {
  display: inline-flex;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent-2-rgb) / 0.35);
  background: rgb(var(--accent-2-rgb) / 0.1);
  font: 600 0.72rem var(--font-mono);
  color: var(--text);
}

/* ---------- Architektur-Diagramm ---------- */
.az-arch {
  margin: 0;
  display: grid;
  gap: var(--space-6);
  padding: clamp(1rem, 0.6rem + 2vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px dashed rgb(var(--accent-2-rgb) / 0.4);
  background-color: rgb(var(--ink) / 0.015);
  background-image:
    radial-gradient(ellipse at 15% 0%, rgb(var(--accent-2-rgb) / 0.12), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgb(var(--accent-rgb) / 0.08), transparent 50%),
    radial-gradient(rgb(var(--ink) / 0.08) 1px, transparent 1.5px);
  background-size: auto, auto, 18px 18px;
}
.az-arch__grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "user web"
    "entra api"
    "vault data"
    "ai search"
    "iac iac"
    "mon mon";
}
.az-link { display: none; }
@media (min-width: 900px) {
  .az-arch__grid {
    gap: 0;
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr) 3rem minmax(0, 1fr);
    grid-template-rows: auto 2.5rem auto 2.5rem auto;
    grid-template-areas:
      "user h1 web h2 entra"
      ". . v1 . ."
      "vault h3 api h4 ai"
      ". . v2 . v3"
      "iac . data . search"
      "mon mon mon mon mon";
  }
  .az-link { display: block; position: relative; }
}
.az-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.az-node > svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--accent-text); }
.az-node > span { min-width: 0; }
.az-node b { display: block; font-size: 0.92rem; line-height: 1.25; }
.az-node small { display: block; font: 500 0.68rem var(--font-mono); color: var(--text-subtle); overflow-wrap: anywhere; }
.az-node em {
  position: absolute;
  top: -0.6rem;
  right: -0.4rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #fff;
  font: 700 0.68rem var(--font-mono);
  font-style: normal;
  box-shadow: 0 0 0 3px var(--bg-raised);
}
.az-node--key {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgb(var(--accent-rgb) / 0.7), rgb(var(--accent-2-rgb) / 0.4), rgb(var(--ink) / 0.08)) border-box;
}
.az-node--ai { background: linear-gradient(160deg, rgb(var(--accent-2-rgb) / 0.14), var(--surface) 70%); border-color: rgb(var(--accent-2-rgb) / 0.4); }
.az-node--ai > svg { color: var(--accent-2); }
.az-node--iac { border-style: dashed; background: rgb(var(--surface-rgb) / 0.6); box-shadow: none; }
@media (min-width: 900px) {
  .az-node--iac { align-self: center; }
}

/* Verbindungen mit wandernden Datenpaketen */
.az-link::before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.55), rgb(var(--accent-2-rgb) / 0.55));
}
.az-link--h::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; transform-origin: 0 50%; }
.az-link--v::before { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; transform-origin: 50% 0; background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.55), rgb(var(--accent-2-rgb) / 0.55)); }
.az-link i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow), 0 0 0 3px rgb(var(--accent-rgb) / 0.15);
  opacity: 0;
}
.az-link--h i { top: 50%; left: 0; margin: -3.5px 0 0 -3.5px; }
.az-link--v i { left: 50%; top: 0; margin: -3.5px 0 0 -3.5px; }

/* Monitoring-Leiste */
.az-mon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
  margin-top: 0.4rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--accent-2-rgb) / 0.35);
  background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.1), rgb(var(--surface-rgb) / 0.6));
}
@media (min-width: 900px) { .az-mon { margin-top: 1.5rem; } }
.az-mon > svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--accent-2); }
.az-mon > span:not(.az-mon__pulse) { flex: 1 1 14rem; min-width: 0; }
.az-mon b { display: block; font-size: 0.92rem; }
.az-mon small { display: block; font-size: 0.78rem; color: var(--text-muted); }
.az-mon__pulse { display: flex; align-items: flex-end; gap: 3px; height: 1.4rem; }
.az-mon__pulse i { width: 4px; height: 100%; border-radius: 2px; background: var(--accent-2); opacity: 0.7; transform-origin: 50% 100%; }
.az-mon__pulse i:nth-child(1) { transform: scaleY(0.4); }
.az-mon__pulse i:nth-child(2) { transform: scaleY(0.8); }
.az-mon__pulse i:nth-child(3) { transform: scaleY(0.55); }
.az-mon__pulse i:nth-child(4) { transform: scaleY(1); }
.az-mon__pulse i:nth-child(5) { transform: scaleY(0.6); }

/* Legende zum Ablauf */
.az-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: none; }
@media (min-width: 600px) { .az-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .az-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.az-flow li { display: grid; gap: 0.35rem; padding-top: 0.9rem; border-top: 1px solid var(--border-strong); font-size: var(--fs-sm); color: var(--text-muted); }
.az-flow b { font: 700 0.72rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }

/* Aufbau-Animation des Diagramms */
.js .az-arch .az-node,
.js .az-arch .az-mon { transition: opacity 0.6s var(--ease), translate 0.6s var(--ease); }
.js .az-arch:not(.is-visible) .az-node,
.js .az-arch:not(.is-visible) .az-mon { opacity: 0; translate: 0 10px; }
.js .az-arch__grid > div:nth-of-type(1) { transition-delay: 0.1s; }
.js .az-arch__grid > div:nth-of-type(2) { transition-delay: 0.25s; }
.js .az-arch__grid > div:nth-of-type(3) { transition-delay: 0.4s; }
.js .az-arch__grid > div:nth-of-type(4) { transition-delay: 0.55s; }
.js .az-arch__grid > div:nth-of-type(5) { transition-delay: 0.6s; }
.js .az-arch__grid > div:nth-of-type(6) { transition-delay: 0.75s; }
.js .az-arch__grid > div:nth-of-type(7) { transition-delay: 0.9s; }
.js .az-arch__grid > div:nth-of-type(8) { transition-delay: 0.95s; }
.js .az-arch__grid > div:nth-of-type(9) { transition-delay: 1.1s; }
.js .az-arch__grid > div:nth-of-type(10) { transition-delay: 1.3s; }
.js .az-arch .az-link::before { transition: transform 0.7s var(--ease) 0.5s; }
.js .az-arch:not(.is-visible) .az-link--h::before { transform: scaleX(0); }
.js .az-arch:not(.is-visible) .az-link--v::before { transform: scaleY(0); }
.js .az-arch.is-visible .az-link--h i { animation: az-packet-h 2.6s ease-in-out infinite; }
.js .az-arch.is-visible .az-link--v i { animation: az-packet-v 2.6s ease-in-out infinite; }
.js .az-arch.is-visible .az-link:nth-of-type(1) i { animation-delay: 1.2s; }
.js .az-arch.is-visible .az-link:nth-of-type(2) i { animation-delay: 1.6s; }
.js .az-arch.is-visible .az-link:nth-of-type(3) i { animation-delay: 1.9s; }
.js .az-arch.is-visible .az-link:nth-of-type(4) i { animation-delay: 2.1s; }
.js .az-arch.is-visible .az-link:nth-of-type(5) i { animation-delay: 2.4s; }
.js .az-arch.is-visible .az-link:nth-of-type(6) i { animation-delay: 2.7s; }
.js .az-arch.is-visible .az-link:nth-of-type(7) i { animation-delay: 3s; }
.js .az-arch.is-visible .az-mon__pulse i { animation: az-pulse 1.4s ease-in-out infinite; }
.js .az-arch.is-visible .az-mon__pulse i:nth-child(2) { animation-delay: 0.15s; }
.js .az-arch.is-visible .az-mon__pulse i:nth-child(3) { animation-delay: 0.3s; }
.js .az-arch.is-visible .az-mon__pulse i:nth-child(4) { animation-delay: 0.45s; }
.js .az-arch.is-visible .az-mon__pulse i:nth-child(5) { animation-delay: 0.6s; }
@keyframes az-packet-h { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 70% { left: 100%; opacity: 1; } 85%, 100% { left: 100%; opacity: 0; } }
@keyframes az-packet-v { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 70% { top: 100%; opacity: 1; } 85%, 100% { top: 100%; opacity: 0; } }
@keyframes az-pulse { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* ---------- Migration: drei Wege ---------- */
.az-paths { display: grid; gap: var(--space-4); margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 800px) { .az-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.az-path {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgb(var(--surface-rgb) / 0.6);
}
.az-path p { color: var(--text-muted); font-size: var(--fs-sm); }
.az-path__tag { font: 600 0.66rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.az-path--pick {
  border-color: transparent;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / 0.12), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgb(var(--accent-rgb) / 0.65), rgb(var(--accent-2-rgb) / 0.35), rgb(var(--ink) / 0.06)) border-box;
  box-shadow: 0 24px 50px -30px rgb(var(--accent-rgb) / 0.55);
}
.az-path--pick .az-path__tag { color: var(--accent-text); }

/* ---------- Migration: Zeitstrahl ---------- */
ol.az-move {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 2.2rem;
  display: grid;
  gap: var(--space-6);
}
.az-move::before,
.az-move::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  border-radius: 2px;
  background: var(--border-strong);
}
.az-move::after { background: linear-gradient(180deg, var(--accent), var(--accent-2)); transform-origin: 50% 0; }
.az-move__step { position: relative; display: grid; gap: 0.55rem; align-content: start; }
.az-move__step small { font: 600 0.68rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.az-move__step p { color: var(--text-muted); font-size: var(--fs-sm); }
.az-move__dot {
  position: absolute;
  left: -2.2rem;
  top: 0.1rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.14);
}
.az-move__step:last-child .az-move__dot { background: var(--accent); }
.az-move__out {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  justify-self: start;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.03);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.az-move__out svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--accent-text); }
@media (min-width: 1100px) {
  ol.az-move { padding: 2.4rem 0 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
  .az-move::before,
  .az-move::after { left: 0; right: 0; top: 0.55rem; bottom: auto; width: auto; height: 2px; }
  .az-move::after { background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: 0 50%; }
  .az-move__dot { left: 0; top: -2.4rem; }
}
.js .az-move::after { transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.js .az-move:not(.is-visible)::after { transform: scaleY(0); }
@media (min-width: 1100px) { .js .az-move:not(.is-visible)::after { transform: scaleX(0); } }
.js .az-move__dot,
.js .az-move__step > :not(.az-move__dot) { transition: opacity 0.6s var(--ease), translate 0.6s var(--ease), background-color 0.4s; }
.js .az-move:not(.is-visible) .az-move__step > :not(.az-move__dot) { opacity: 0; translate: 0 8px; }
.js .az-move:not(.is-visible) .az-move__dot { opacity: 0.3; }
.js .az-move__step:nth-child(1) > * { transition-delay: 0.2s; }
.js .az-move__step:nth-child(2) > * { transition-delay: 0.55s; }
.js .az-move__step:nth-child(3) > * { transition-delay: 0.9s; }
.js .az-move__step:nth-child(4) > * { transition-delay: 1.25s; }
.js .az-move__step:nth-child(5) > * { transition-delay: 1.6s; }

/* ---------- Kosten: Last, Instanzen, Budget ---------- */
.az-costframe { border-radius: var(--radius-lg); border: 1px solid var(--border); }
.az-cost { position: relative; display: grid; gap: 0.8rem; }
.mockframe > .az-cost { padding: 1.1rem; }
.az-cost__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; }
.az-cost__head b { font-size: 0.9rem; }
.az-cost__head small { font: 600 0.62rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.az-cost__chart {
  position: relative;
  height: 9rem;
  border-bottom: 1px solid var(--border-strong);
  background-image: linear-gradient(rgb(var(--ink) / 0.06) 1px, transparent 1px);
  background-size: 100% 25%;
}
.az-cost__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.az-cost__bars i {
  flex: 1;
  height: calc(var(--h) * 20%);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.75), rgb(var(--accent-rgb) / 0.25));
  transform-origin: 50% 100%;
}
.az-cost__curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.az-cost__curve path { fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.az-cost__axis { display: flex; justify-content: space-between; font: 500 0.64rem var(--font-mono); color: var(--text-subtle); }
.az-cost__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.74rem; color: var(--text-muted); }
.az-cost__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.az-cost__sw { width: 0.8rem; height: 0.8rem; border-radius: 3px; background: rgb(var(--accent-rgb) / 0.6); }
.az-cost__sw--line { height: 3px; border-radius: 2px; background: var(--accent-2); }
.az-budget { display: grid; gap: 0.45rem; margin-top: 0.3rem; padding: 0.8rem; border-radius: 0.7rem; border: 1px solid var(--border); background: rgb(var(--ink) / 0.03); }
.az-budget__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.az-budget__row b { font-size: 0.8rem; }
.az-budget__row small { font: 500 0.64rem var(--font-mono); color: var(--text-subtle); }
.az-budget__bar { position: relative; display: block; height: 0.55rem; border-radius: 999px; background: rgb(var(--ink) / 0.08); }
.az-budget__bar i { position: absolute; inset: 0 auto 0 0; width: 82%; border-radius: inherit; background: linear-gradient(90deg, var(--success), #eab308); transform-origin: 0 50%; }
.az-budget__bar em { position: absolute; top: -0.25rem; bottom: -0.25rem; left: 80%; width: 2px; border-radius: 1px; background: var(--text); opacity: 0.6; }
.az-budget__alert {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  justify-self: start;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgb(234 179 8 / 0.14);
  border: 1px solid rgb(234 179 8 / 0.35);
  font-size: 0.72rem;
  font-weight: 600;
}
.az-budget__alert svg { width: 0.9rem; height: 0.9rem; color: #ca8a04; }

.js .az-costframe .az-cost__bars i { transition: transform 0.7s var(--ease); transition-delay: calc(0.3s + var(--i) * 0.07s); }
.js .az-costframe:not(.is-visible) .az-cost__bars i { transform: scaleY(0); }
.js .az-costframe .az-cost__curve { transition: clip-path 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s; clip-path: inset(-10% 0 -10% 0); }
.js .az-costframe:not(.is-visible) .az-cost__curve { clip-path: inset(-10% 100% -10% 0); }
.js .az-costframe .az-budget__bar i { transition: transform 1.4s var(--ease) 1.2s; }
.js .az-costframe:not(.is-visible) .az-budget__bar i { transform: scaleX(0); }
.js .az-costframe .az-budget__alert { transition: opacity 0.5s var(--ease) 2.5s, translate 0.5s var(--ease) 2.5s; }
.js .az-costframe:not(.is-visible) .az-budget__alert { opacity: 0; translate: 0 6px; }

/* ---------- Warum mit mir: drei Kreise, ein Ansprechpartner ---------- */
.az-venn {
  position: relative;
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 1;
  margin-inline: auto;
}
.az-venn__c {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  border: 1px solid;
  text-align: center;
  transition: transform 1.1s var(--ease), opacity 0.8s var(--ease);
}
.az-venn__c b { display: block; font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem); }
.az-venn__c small { display: block; max-width: 7.5rem; font-size: clamp(0.66rem, 0.62rem + 0.2vw, 0.76rem); line-height: 1.35; color: var(--text-muted); }
.az-venn__c--sw {
  left: 4%;
  top: 4%;
  align-content: start;
  justify-items: start;
  padding: 24% 0 0 13%;
  text-align: left;
  border-color: rgb(var(--accent-rgb) / 0.5);
  background: radial-gradient(circle at 35% 35%, rgb(var(--accent-rgb) / 0.2), rgb(var(--accent-rgb) / 0.05) 70%);
}
.az-venn__c--cloud {
  right: 4%;
  top: 4%;
  align-content: start;
  justify-items: end;
  padding: 24% 13% 0 0;
  text-align: right;
  border-color: rgb(var(--accent-2-rgb) / 0.55);
  background: radial-gradient(circle at 65% 35%, rgb(var(--accent-2-rgb) / 0.22), rgb(var(--accent-2-rgb) / 0.05) 70%);
}
.az-venn__c--ki {
  left: 20%;
  bottom: 2%;
  align-content: end;
  justify-items: center;
  padding: 0 0 14%;
  border-color: rgb(var(--ink) / 0.25);
  background: radial-gradient(circle at 50% 70%, rgb(var(--ink) / 0.1), rgb(var(--ink) / 0.02) 70%);
}
.az-venn__core {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--accent), var(--accent-2)) border-box;
  box-shadow: 0 16px 40px -16px rgb(var(--accent-rgb) / 0.6);
  font-size: 0.8rem;
  white-space: nowrap;
  transition: opacity 0.6s var(--ease) 0.9s, scale 0.6s var(--ease) 0.9s;
}
.az-venn__core svg { width: 1rem; height: 1rem; color: var(--accent-text); }
.js .az-venn:not(.is-visible) .az-venn__c--sw { transform: translate(-12%, -10%); opacity: 0; }
.js .az-venn:not(.is-visible) .az-venn__c--cloud { transform: translate(12%, -10%); opacity: 0; }
.js .az-venn:not(.is-visible) .az-venn__c--ki { transform: translate(0, 14%); opacity: 0; }
.js .az-venn:not(.is-visible) .az-venn__core { opacity: 0; scale: 0.8; }
@media (max-width: 899px) { .az-venn { max-width: 24rem; } }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .az-hero.is-visible .az-res,
  .js .az-hero.is-visible .az-res em i,
  .js .az-hero.is-visible .az-rg__bar i,
  .js .az-arch.is-visible .az-link i,
  .js .az-arch.is-visible .az-mon__pulse i { animation: none; }
  .js .az-hero:not(.is-visible) .az-res { opacity: 1; }
  .js .az-arch.is-visible .az-link i { opacity: 0; }
  .az-arch *, .az-move, .az-move *, .az-move::after, .az-costframe *, .az-venn * { transition: none !important; }
  .az-rg, .az-hero:hover .az-rg { transform: none; }
}

/* Insights-Menü in drei Themenspalten */
.nav__dropdown.nav__dropdown--groups3 { width: min(42rem, calc(100vw - 2rem)); grid-template-columns: repeat(3, 1fr); left: -8rem; }

/* ===== Insights: Kubernetes-Sicherheit ===== */
/* ---------- Insights: Kubernetes-Sicherheit verstehen (ks-) ---------- */
/* Abbildung 1: vereinfachte Architektur, API-Server in der Mitte */
.ks-arch { display: grid; }
.ks-arch__actors, .ks-arch__nodes { display: grid; gap: 0.6rem; }
@media (min-width: 560px) { .ks-arch__actors, .ks-arch__nodes { grid-template-columns: 1fr 1fr; } }
.ks-arch__actor {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.65rem; align-items: center;
  padding: 0.8rem 0.9rem; border-radius: 0.8rem;
  border: 1px solid var(--border-strong); background: var(--bg); line-height: 1.35;
}
.ks-arch__actor svg { grid-row: span 2; width: 1.25rem; height: 1.25rem; color: var(--text-muted); }
.ks-arch__actor b { color: var(--text); font-size: 0.9rem; }
.ks-arch__actor small { font: 500 0.7rem var(--font-mono); color: var(--text-muted); overflow-wrap: anywhere; }
.ks-arch__actor--threat {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.13), var(--bg) 70%);
}
.ks-arch__actor--threat svg { color: var(--accent-text); }

/* Verbindungslinie mit Pfeilspitze und Beschriftung */
.ks-arch__link { position: relative; display: flex; justify-content: center; align-items: center; padding: 1.35rem 0; }
.ks-arch__link::before {
  content: ""; position: absolute; top: 0; bottom: 0.3rem; left: 50%; width: 2px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgb(var(--accent-rgb) / 0.85) 0 6px, transparent 6px 11px);
  background-size: 2px 11px;
}
.ks-arch__link::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  border: 0.32rem solid transparent; border-top: 0.42rem solid rgb(var(--accent-rgb) / 0.9); border-bottom: 0;
}
.ks-arch.is-visible .ks-arch__link::before { animation: ks-flow 0.9s linear infinite; }
@keyframes ks-flow { to { background-position: 0 11px; } }
.ks-arch__link span {
  position: relative; z-index: 1; max-width: 100%;
  padding: 0.2rem 0.65rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  font: 500 0.66rem var(--font-mono); color: var(--text-muted); text-align: center;
}

/* Bereiche: Control Plane, Worker Nodes */
.ks-arch__zone {
  min-width: 0; padding: 0.9rem; border-radius: var(--radius);
  border: 1px dashed rgb(var(--accent-2-rgb) / 0.5); background: rgb(var(--accent-2-rgb) / 0.05);
}
.ks-arch .ks-arch__label { margin: 0 0 0.6rem; font: 600 0.66rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.ks-arch__api {
  display: grid; justify-items: center; gap: 0.2rem; padding: 0.9rem; text-align: center; line-height: 1.35;
  border-radius: 0.8rem; border: 1px solid rgb(var(--accent-rgb) / 0.6);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.16), var(--bg));
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.08), 0 12px 30px -14px rgb(var(--accent-rgb) / 0.7);
}
.ks-arch__api svg { width: 1.3rem; height: 1.3rem; color: var(--accent-text); }
.ks-arch__api b { font: 700 1rem var(--font-mono); color: var(--text); }
.ks-arch__api small { font-size: 0.75rem; color: var(--text-muted); }
.prose .ks-arch__parts, .ks-arch__parts { display: grid; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .prose .ks-arch__parts, .ks-arch__parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ks-arch__parts li {
  display: grid; gap: 0.15rem; margin: 0; padding: 0.65rem 0.75rem; line-height: 1.35;
  border-radius: 0.7rem; border: 1px solid var(--border-strong); background: var(--bg);
}
.ks-arch__parts li::marker { content: none; }
.ks-arch__parts b { font: 600 0.78rem var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.ks-arch__parts small { font-size: 0.72rem; color: var(--text-muted); }
.ks-arch__kubelet {
  padding: 0.5rem 0.7rem; border-radius: 0.6rem; text-align: center;
  border: 1px solid var(--border-strong); background: var(--bg);
  font: 600 0.8rem var(--font-mono); color: var(--text);
}
.ks-arch__runtime { display: block; margin: 0.45rem 0; text-align: center; font: 500 0.66rem var(--font-mono); color: var(--text-subtle); }
.ks-arch__pods { display: flex; gap: 0.4rem; }
.ks-arch__pods span {
  flex: 1; padding: 0.4rem; border-radius: 0.5rem; text-align: center;
  border: 1px solid rgb(var(--accent-2-rgb) / 0.45); background: rgb(var(--accent-2-rgb) / 0.14);
  font: 600 0.7rem var(--font-mono); color: var(--text);
}

/* Abbildung 2: ATT&CK-Auszug, Taktiken als Spalten */
.ks-attack__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; margin-bottom: 0.9rem; font: 600 0.66rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-subtle); }
.prose .ks-attack__cols, .ks-attack__cols { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .prose .ks-attack__cols, .ks-attack__cols { grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); } }
.ks-attack__col {
  display: grid; align-content: start; gap: 0.55rem; min-width: 0; margin: 0; padding: 0.8rem;
  border-radius: 0.8rem; border: 1px solid var(--border-strong); background: var(--bg); line-height: 1.35;
}
.ks-attack__col::marker, .ks-attack__col li::marker { content: none; }
.ks-attack__col > b { padding-bottom: 0.45rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; color: var(--text); overflow-wrap: anywhere; }
.prose .ks-attack__col ul, .ks-attack__col ul { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.ks-attack__col li {
  display: grid; gap: 0.15rem; margin: 0; padding: 0.5rem 0.55rem; border-radius: 0.55rem;
  background: rgb(var(--ink) / 0.04); font-size: 0.74rem; color: var(--text-muted);
}
.ks-attack__col code { padding: 0; background: none; border: 0; font: 700 0.66rem var(--font-mono); color: var(--accent-2); }
.ks-attack__col.is-focus {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.12), var(--bg) 60%);
}
.ks-attack__col.is-focus > b { color: var(--accent-text); }
.ks-attack__col.is-focus code { color: var(--accent-text); }
.ks-attack .ks-attack__more { margin: 0.9rem 0 0; text-align: center; font: 500 0.7rem var(--font-mono); color: var(--text-subtle); }

@media (prefers-reduced-motion: reduce) {
  .ks-arch.is-visible .ks-arch__link::before { animation: none; }
}

/* ===== Insights: Wazuh im Überblick ===== */
/* ===== Insights: Wazuh-Plattform (wp-) ===== */

/* Systemklassen-Tabelle */
.wi-table.wp-classes { min-width: 34rem; }
.wi-table.wp-classes th, .wi-table.wp-classes td { text-align: left; }
.wi-table.wp-classes td:first-child { color: var(--accent-text); font-weight: 700; }
.wi-table.wp-classes td:last-child { white-space: normal; font-family: inherit; color: var(--text-muted); }
.wi-table.wp-classes tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.wi-table.wp-classes tfoot td { background: rgb(var(--accent-rgb) / 0.1); color: var(--text); font-weight: 700; border-bottom: 0; }
.wi-table.wp-classes tfoot td:last-child { color: var(--text); }
.wp-yes, .wp-no { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font: 700 0.66rem var(--font-mono); font-style: normal; letter-spacing: 0.04em; }
.wp-yes { color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.14); border: 1px solid rgb(var(--accent-rgb) / 0.4); }
.wp-no { color: var(--text-subtle); background: rgb(var(--ink) / 0.05); border: 1px solid var(--border); }

/* Architektur-Figur */
.wp-arch { container-type: inline-size; }
.prose .wp-arch__flow, .wp-arch__flow { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.wp-arch__node {
  position: relative;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  min-width: 0;
  padding: 0.9rem 0.9rem 1rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  line-height: 1.4;
}
.wp-arch__node::marker { content: none; }
.wp-arch__node > span { font: 700 0.62rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.wp-arch__node > b { display: flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.95rem; }
.wp-arch__node > b svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--accent-text); }
.wp-arch__node > small { font-size: 0.74rem; color: var(--text-muted); }
.wp-arch__node.is-core { border-color: rgb(var(--accent-rgb) / 0.55); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.08); }
.prose .wp-arch__tags, .wp-arch__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0 0; padding: 0; list-style: none; }
.wp-arch__tags li { padding: 0.12rem 0.5rem; border-radius: 999px; background: rgb(var(--accent-rgb) / 0.12); color: var(--accent-text); font: 600 0.62rem var(--font-mono); }
.wp-arch__tags li::marker { content: none; }
/* Verbindungspfeil: vertikal (schmal) */
.wp-arch__node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.05rem;
  width: 2px;
  height: 1rem;
  transform: translateX(-50%);
  background: linear-gradient(rgb(var(--accent-rgb) / 0.9), rgb(var(--accent-2-rgb) / 0.9));
}
.is-visible .wp-arch__node { animation: wi-pulse 5s var(--ease) infinite; animation-delay: calc(var(--n, 0) * 1.1s); }
.wp-arch__node:nth-child(2) { --n: 1; } .wp-arch__node:nth-child(3) { --n: 2; } .wp-arch__node:nth-child(4) { --n: 3; }
.wp-arch__deploy { display: grid; gap: 0.6rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--border-strong); }
.wp-arch__deploy p { display: grid; gap: 0.15rem; margin: 0; padding: 0.7rem 0.85rem; border-radius: 0.7rem; border: 1px solid var(--border); background: rgb(var(--surface-rgb) / 0.8); font-size: 0.78rem; line-height: 1.45; }
.wp-arch__deploy b { font: 700 0.7rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.wp-arch__deploy span { color: var(--text-muted); }

@container (min-width: 40rem) {
  .prose .wp-arch__flow, .wp-arch__flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
  .wp-arch__node:not(:last-child)::after { left: auto; right: -0.9rem; top: 50%; bottom: auto; width: 0.9rem; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.9), rgb(var(--accent-2-rgb) / 0.9)); }
  .wp-arch__deploy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .is-visible .wp-arch__node { animation: none; }
}

/* ==========================================================================
   Responsive-Korrekturen je Seite (Audit, ein Agent pro Seite)
   ========================================================================== */

/* ----- Responsive: leistungen.html ----- */
/* ---------- Responsive: leistungen.html ---------- */

/* Mobile: 3D-Fächer als wischbare Kartenreihe (Basisregel ließ die Karten im Grid auf 3 px kollabieren) */
@media (max-width: 47.99em) {
  .fan {
    display: flex;
    height: auto;
    gap: 1rem;
    justify-content: flex-start;
    align-items: stretch;
    perspective: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.5rem var(--gutter) 2.5rem;
    margin-bottom: -2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .fan::-webkit-scrollbar { display: none; }
  .fan__card {
    position: relative;
    flex: 0 0 min(78%, 18rem);
    width: auto;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
    box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.6);
  }
  .fan__card:nth-child(n),
  .fan:hover .fan__card:nth-child(n) { transform: none; }
  .fan__body strong { font-size: 1.35rem; }
  .overview__ideal small, .overview__projects small { font-size: 0.72rem; }
}

/* Tablet: Fächer schmaler, damit die äußeren Karten (auch beim Hover) im Viewport bleiben */
@media (min-width: 48em) and (max-width: 63.99em) {
  .fan { height: 22rem; }
  .fan__card { width: min(19rem, 29vw); }
  .fan__body { left: 1rem; right: 1rem; bottom: 1rem; }
  .fan__body strong { font-size: 1.25rem; }
}

/* Übersichtskarten: lange Titel ("Softwarelösungen") stoßen bei 3 Spalten an den Kartenrand */
.overview-grid .h3 { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 48em) and (max-width: 74.99em) {
  .overview-grid .h3 { font-size: clamp(1.3rem, 0.6rem + 1.4vw, 1.7rem); }
}

/* ----- Responsive: leistungen/app-entwicklung.html ----- */
/* ===== Responsive: leistungen/app-entwicklung ===== */
/* Tablet (700–999px): grid--3 falls back to 2 columns, leaving the 3rd card
   orphaned next to an empty cell. Let it span the full row instead, with its
   checklist laid out horizontally so the wide card does not look empty. */
@media (min-width: 700px) and (max-width: 999px) {
  .ap-types > .card:last-child { grid-column: 1 / -1; }
  .ap-types > .card:last-child .checklist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
  }
}

/* ----- Responsive: leistungen/webshop.html ----- */
/* ===== Responsive: leistungen/webshop.html ===== */

/* Integration-Split: einspaltiges Grid darf nicht auf die min-content-Breite
   des langen Ghost-Buttons wachsen (ragte sonst ~18px über den Rand). */
@media (max-width: 899px) {
  .ws-integration .split { grid-template-columns: minmax(0, 1fr); }
  /* Mockup nicht im 4:3-Rahmen abschneiden (dritter Log-Eintrag fehlte). */
  .ws-integration .mockframe { aspect-ratio: auto; }
}
@media (max-width: 47.99em) {
  .ws-integration .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* Hero-Shop-Mockup: Preis und Warenkorb-Button nicht mehrzeilig umbrechen. */
@media (max-width: 520px) {
  .ws-stage .ws-product__row { flex-wrap: wrap; row-gap: 0.4rem; }
  .ws-stage .ws-product__row b,
  .ws-stage .ws-product__btn { white-space: nowrap; }
}

/* Funktions-Grid: 4 Spalten erst ab genug Breite; bis dahin 2 Spalten.
   minmax(0,1fr) statt 1fr, damit lange Wörter die Spalten nicht ungleich aufblähen. */
@media (min-width: 700px) and (max-width: 1179px) {
  .ws-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .ws-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ws-features .card h3,
.ws-features .card p { overflow-wrap: break-word; hyphens: auto; }

/* ----- Responsive: leistungen/softwareloesungen.html ----- */
/* ---- Responsive: leistungen/softwareloesungen ---- */

/* Architektur-Schema: horizontal on wide screens, vertical variant on phones
   (instead of a 660px-wide clipped scroller with 7px labels). */
.arch .arch__svg--m { display: none; }
.arch__svg--m .wire--flow { stroke: url(#flow-m); }
@media (max-width: 47.99em) {
  .arch { overflow: hidden; }
  .arch .arch__svg--wide { display: none; }
  .arch .arch__svg--m { display: block; min-width: 0; width: 100%; max-width: 26rem; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .arch .packet { display: none; }
}

/* Hero code editor: keep every line visible on phones (decorative, aria-hidden). */
@media (max-width: 47.99em) {
  .hero--sw .editor--lg .editor__code { font-size: clamp(0.62rem, 2.75vw, 0.82rem); }
  .hero--sw .editor--lg .editor__code span.ln::before { width: 2rem; padding-right: 0.7rem; }
  .hero--sw .editor--lg .editor__out { align-items: flex-start; line-height: 1.5; }
  .hero--sw .editor--lg .editor__out::before { flex: none; margin-top: 0.3em; }
}

/* Tablet (2-column grid range): no orphaned third card. */
@media (min-width: 700px) and (max-width: 999px) {
  .sw-benefits .grid--3 > :last-child:nth-child(odd),
  .sw-ba .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Small decorative labels: lift to a legible size on phones. */
@media (max-width: 47.99em) {
  .sw-ba .ba__chip { font-size: 0.7rem; }
  #loesungen .pipe__node small,
  #loesungen .scale small { font-size: 0.7rem; }
}

/* ----- Responsive: index.html ----- */
/* ===== Responsive: Startseite (index.html) ===== */
/* Alle Selektoren nur auf der Startseite vorhanden: .collage--ui, .bento, .profile,
   .more-service(s), .project-teaser, section[aria-labelledby="services-title"|"projects-title"] */

/* Hero-3D-Bühne: auf Tablets ragt die rechte Dashboard-Karte aus dem Viewport.
   Mindestbreite der Bühne ~780px -> proportional verkleinern, 3D-Effekt bleibt. */
@media (min-width: 641px) and (max-width: 767.98px) {
  .collage--ui { zoom: 0.74; }
}
@media (min-width: 768px) and (max-width: 899.98px) {
  .collage--ui { zoom: 0.86; }
}

/* Leistungen + Projekte: dritte Karte nicht verwaist im 2er-Raster (700–999px) */
@media (min-width: 700px) and (max-width: 999.98px) {
  section[aria-labelledby="services-title"] .grid--3 > .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: 1fr;
  }
  section[aria-labelledby="services-title"] .grid--3 > .service-card:last-child:nth-child(odd) .service-card__media {
    aspect-ratio: auto;
    min-height: 100%;
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
  section[aria-labelledby="projects-title"] .grid--3 > .project-teaser:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* "Weitere Schwerpunkte": 4 Spalten sind bei 1000–1199px zu eng (Titel brechen) */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .more-services .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Bento: Kartennummer (/01, /03, /04) lag über Terminal, Status-Liste und Chat */
.bento > .bento__item > .terminal,
.bento > .bento__item > .status:first-child,
.bento > .bento__item > .chat--bento:first-child {
  margin-top: 1.4rem;
}
@media (min-width: 1100px) {
  .bento > .bento__item--wide > .terminal { margin-top: 0; margin-right: 1.6rem; }
}

/* Über mich: Porträt auf Tablets nicht bildschirmfüllend, auf Mobil kompakter */
@media (min-width: 700px) and (max-width: 899.98px) {
  .profile { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
}
@media (max-width: 699.98px) {
  .profile__photo { max-width: 26rem; margin-bottom: var(--space-4); }
  .profile__photo .media { aspect-ratio: 1 / 1; }
}

/* Kleine Labels auf Mobil lesbarer */
@media (max-width: 47.99em) {
  .project-teaser__tag,
  .project-teaser__stack li { font-size: 0.75rem; }
}

/* ----- Responsive: leistungen/webdesign.html ----- */
/* ---------- Responsive: leistungen/webdesign.html ---------- */

/* Hero tools: the later global `.tool--palette { left:-9% }` overrides the
   959px rule, so the palette card is clipped at the viewport edge below desktop. */
@media (max-width: 63.99em) {
  .hero--webdesign .tool--palette { left: 0.25rem; top: 30%; }
  .hero--webdesign .guide--h { left: 0; right: 0; }
}
@media (max-width: 47.99em) {
  .hero--webdesign .tool { padding: 0.5rem 0.65rem; }
  .hero--webdesign .tool--palette i { width: 0.9rem; height: 0.9rem; }
}

/* Phase mockups: keep the typed "Anliegen" line inside its field on narrow cards */
.phases--webdesign .formmock,
.phases--webdesign .formmock__field { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.phases--webdesign .formmock .typing { max-width: 100%; }

@media (max-width: 47.99em) {
  /* URL in the trust mock stays on one line instead of breaking after "https://" */
  .phases--webdesign .trust__url span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.72rem;
  }
  .phases--webdesign .trust__url em { flex-shrink: 0; }
}

/* Tablet: the full-width browser mock is wider than tall, so the 4:3 hero image
   pushes the card row out of the fixed-height screen. Flatten it in desktop states. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero--webdesign .browser:not(.is-tablet):not(.is-phone) .site__img { aspect-ratio: 16 / 9; }
}

/* Step pills under the mock: keep each label on one line; wrap whole pills instead */
.hero--webdesign .stage-steps { flex-wrap: wrap; }
.hero--webdesign .stage-steps span { white-space: nowrap; }

/* ----- Responsive: leistungen/azure.html ----- */
/* ---- Responsive: Azure (leistungen/azure.html) ---- */

/* Architektur-Diagramm, 2-spaltig auf schmalen Phones: Icon über Text,
   damit Labels wie "Wissenssuche" nicht aus der Kachel laufen. */
@media (max-width: 29.99em) {
  .az-arch__grid { gap: 0.5rem; }
  .az-node:not(.az-node--iac) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.8rem 0.75rem;
  }
  .az-node > svg { width: 1.15rem; height: 1.15rem; }
  .az-node b { overflow-wrap: anywhere; hyphens: auto; }
}

/* Migrationswege: Mono-Tag auf Mobile etwas lesbarer */
@media (max-width: 47.99em) {
  .az-path__tag { font-size: 0.72rem; }
}

/* ----- Responsive: leistungen/ki-loesungen.html ----- */
/* ---------- KI-Lösungen: responsive fixes ---------- */
/* Mock frames: overflow:clip (not a scroll container) lets the 4:3 box grow
   to its content instead of cutting the mock off on narrow screens. */
.ki-mock { overflow: clip; }
/* Stacked layout on tablets: a flatter frame avoids large empty dotted areas */
@media (min-width: 48em) and (max-width: 899px) {
  .ki-mock { aspect-ratio: 16 / 10; }
}
/* Pillar cards: 4 columns are too narrow below ~1280px (long German words
   push the columns apart and the last card past the container). */
.ki-pillars { grid-template-columns: repeat(var(--ki-pillar-cols, 1), minmax(0, 1fr)); }
.ki-pillars .h4 { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 700px) { .ki-pillars { --ki-pillar-cols: 2; } }
@media (min-width: 80em) { .ki-pillars { --ki-pillar-cols: 4; } }
/* Tiny mono labels: keep them readable on phones */
@media (max-width: 47.99em) {
  .ki-pipe-card__label,
  .ki-proof__tag { font-size: 0.72rem; }
  .ki-pipe .pipe__node small { font-size: 0.68rem; }
}

/* ----- Responsive: leistungen/cloud-sicherheit.html ----- */
/* ===== Responsive: Cloud & IT-Sicherheit ===== */
/* Terraform-Editor: Datei-Badge passend zu main.tf statt "TS" */

/* ----- Responsive: projekte.html ----- */
/* ---- Responsive: projekte.html ---- */
/* Grid-Spalten dürfen schrumpfen (sonst sprengt die LoRA-Statistik das Layout auf 390px) */
.pj-grid > * { min-width: 0; }
/* Leeres Tag-Pill (LoRA) nicht als leere Kapsel zeigen */
.pj-tag:empty { display: none; }
/* Lange deutsche Wörter in Überschriften und Kennzahlen sauber trennen */
.pj-case .h2 { hyphens: auto; overflow-wrap: break-word; }
.pj-stats span, .dl-pj__grid small { hyphens: auto; overflow-wrap: anywhere; }

@media (max-width: 47.99em) {
  /* Architektur-Diagramm (RT-Vector): auf Kartenbreite skalieren statt horizontal scrollen, Schrift im SVG vergrößern */
  .pj-case--feature .pj-grid { padding: 1.5rem 1rem; }
  .pj-arch { overflow-x: hidden; padding: 0.75rem 0; }
  /* Die Knoten nutzen nur 85 % der viewBox-Breite: leere Ränder seitlich abschneiden, damit die Schrift größer wird */
  .pj-arch svg { min-width: 0; width: 112%; margin-inline: -6%; }
  .pj-arch .node text { font-size: 21px; }
  .pj-arch .node .sub { font-size: 16px; }

  /* Kennzahlen-Kacheln: lesbare Mono-Labels, kompaktere Polsterung */
  .pj-stats { gap: 0.45rem; }
  .pj-stats > div { padding: 0.75rem 0.5rem; }
  .pj-stats span { font-size: 0.72rem; line-height: 1.3; }
  .pj-tag { font-size: 0.72rem; }

  .dl-pj__grid { gap: 0.4rem; }
  .dl-pj__grid div { padding: 0.65rem 0.4rem; }
  .dl-pj__grid small { font-size: 0.68rem; letter-spacing: 0; }
  .dl-pj__chat span { max-width: 92%; }
}

/* Zweispaltig (ab 1000px) bis kleiner Desktop: Diagrammspalte ist schmal, Schrift im SVG sonst ~8px */
@media (min-width: 1000px) and (max-width: 79.99em) {
  .pj-arch { padding-inline: 0; }
  .pj-arch svg { width: 112%; margin-inline: -6%; }
  .pj-arch .node text { font-size: 18px; }
  .pj-arch .node .sub { font-size: 13px; }
}

/* ----- Responsive: leistungen/beratung.html ----- */
/* ---------- Responsive: leistungen/beratung.html ---------- */
/* Hero: Grid-Kinder duerfen schrumpfen (Dashboard-KPIs mit nowrap-Labels sprengten die Spalte auf Mobile) */
.beratung-hero .hero__grid > * { min-width: 0; }
.beratung-hero .dash--lg .kpi { min-width: 0; }

/* Mock-Listen: fehlender UL-Reset (40px Browser-Einzug) und umbrechende Ticket-ID */
.beratung-topics .mock__list,
.beratung-seo .mock__list { list-style: none; margin: 0; padding: 0; }
.beratung-topics .mock__id,
.beratung-seo .mock__id { white-space: nowrap; flex-shrink: 0; }

/* Mockframes (Kanban, Ranking): 4:3 schneidet auf Mobile ab bzw. laesst auf Tablet viel Leerraum */
@media (max-width: 56.24em) {
  .beratung-ws .mockframe,
  .beratung-seo .mockframe { aspect-ratio: 16 / 9; }
}
@media (max-width: 37.49em) {
  .beratung-ws .mockframe,
  .beratung-seo .mockframe { aspect-ratio: auto; }
  .beratung-ws .kanban__cols { gap: 0.35rem; }
  .beratung-ws .kanban__col { min-width: 0; padding: 0.4rem 0.35rem; }
  .beratung-ws .k { padding: 0.45rem 0.4rem; overflow-wrap: anywhere; hyphens: auto; }
  .beratung-ws .kanban__head { gap: 0.5rem; }
}
@media (max-width: 37.49em) {
  .beratung-hero .dash--lg .kpi { padding: 0.55rem 0.5rem; }
  .beratung-hero .dash--lg .kpi strong { font-size: 1.35rem; }
}

/* ----- Responsive: insights.html ----- */
/* ---------- Responsive: Insights-Übersicht (insights.html) ---------- */
/* Grid tracks may shrink below the longest word (prevents blow-out past the viewport). */
.wi-articles > * { min-width: 0; }
.wi-articles .wi-article-card h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.wi-articles .wi-article-card__meta { flex-wrap: wrap; row-gap: 0.25rem; }
.wi-articles .wi-article-card__meta .link-arrow { white-space: nowrap; }
@media (min-width: 760px) {
  .wi-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wi-article-card--featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
/* Tablet: two columns instead of three crushed ones */
@media (min-width: 760px) and (max-width: 63.99em) {
  .wi-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----- Responsive: projekte/rt-vector.html ----- */
/* ===== Responsive: Fallstudie RT-Vector (projekte/rt-vector.html) ===== */

/* Architektur: gestapelte Mobil-Variante statt horizontal scrollendem SVG */
.rtv-arch .rtv-arch__m { display: none; }
@media (max-width: 47.99em) {
  .rtv-arch { overflow: hidden; padding: 0.9rem; }
  .rtv-arch .rtv-arch__d { display: none; }
  .rtv-arch .rtv-arch__m { display: block; min-width: 0; max-width: 26rem; margin-inline: auto; }
  .rtv-arch .rtv-arch__m .node text { font-size: 15px; }
  .rtv-arch .rtv-arch__m .node .sub { font-size: 11.5px; }
}

/* Hero: Score-Karte verdeckt im schmalen Split-Layout die letzte Trace-Zeile */
@media (min-width: 40.0625em) and (max-width: 79.99em) {
  .rtv-hero .rtv-score { bottom: -3.75rem; }
  .rtv-hero .rtv-stage { margin-bottom: 3.25rem; }
}

/* Erkenntnisse: vier Kacheln als 2x2 statt 3+1 */
@media (min-width: 640px) {
  .rtv-article .wi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Ergebnistabelle: Strategie-Spalte bleibt beim Scrollen stehen */
@media (max-width: 47.99em) {
  .rtv-article .wi-table th, .rtv-article .wi-table td { padding: 0.6rem 0.7rem; }
  .rtv-article .wi-table th:first-child, .rtv-article .wi-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    white-space: normal;
    min-width: 7.5rem;
    background: var(--surface);
    box-shadow: inset -1px 0 0 var(--border);
  }
  .rtv-article .wi-table tr.best td:first-child {
    background: linear-gradient(rgb(var(--accent-rgb) / 0.1), rgb(var(--accent-rgb) / 0.1)), var(--surface);
  }

  /* Kleine Mono-Labels lesbarer */
  .rtv-pipe .rtv-pipe__tag { font-size: 0.72rem; }
  .rtv-stack small { font-size: 0.72rem; }
}

/* ----- Responsive: projekte/lora-finetuning.html ----- */
/* ---- Responsive: Fallstudie LoRA Fine-Tuning (projekte/lora-finetuning.html) ---- */

/* Hero badge sat on top of the adapter card and hid the "h = W0x + BAx" output label
   (all widths where the badge is absolutely positioned). Reserve room below the card
   so the badge only tucks under its corner. */
@media (min-width: 761px) {
  .lrd-stage { padding-bottom: 5.6rem; }
  .lrd-adapter__w small { padding: 0 0.35rem; }
}

/* Tablet / narrow desktop: hero column is narrow, W0 caption touched the box edges */
@media (min-width: 48em) and (max-width: 63.99em) {
  .lrd-adapter__w small { letter-spacing: 0; }
}

/* Mobile */
@media (max-width: 47.99em) {
  /* Adapter: give the trapezoids more width and a gentler taper so
     "startet mit 0" / "Zufallswerte" are no longer clipped */
  .lrd-adapter__paths { grid-template-columns: 1fr auto 1.2fr; gap: 0.6rem; }
  .lrd-adapter__b { clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }
  .lrd-adapter__a { clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
  .lrd-adapter__b, .lrd-adapter__a { padding: 0.7rem 0.6rem; }
  .lrd-adapter small { font-size: 0.68rem; letter-spacing: 0; }
  .lrd-adapter__w small { padding: 0 0.3rem; }
  .lrd-badge span { font-size: 0.8rem; }

  /* Attention heatmap: header labels were ~9.6px */
  .lrd-attn__grid .h { font-size: 0.7rem; padding: 0 0.1rem; }
  .lrd-attn__grid i { font-size: 0.8rem; }

  /* Loss curve: SVG scales to ~45 %, so 11-unit axis text rendered at ~5px */
  .lrd-curve__axis text { font-size: 22px; }
  .lrd-curve__legend { flex-wrap: wrap; gap: 0.4rem 1.2rem; }
}

/* ----- Responsive: insights/lora-fine-tuning.html ----- */
/* ===== Responsive: insights/lora-fine-tuning (lft-) ===== */
/* Article is a grid item of .legal: let it shrink below its min-content width */
.lft-article { min-width: 0; }

@media (max-width: 47.99em) {
  /* Long CTA label must wrap instead of forcing horizontal overflow */
  .lft-article .btn {
    white-space: normal;
    max-width: 100%;
    text-align: left;
  }
  .lft-article h2 { overflow-wrap: break-word; hyphens: auto; }
}

/* LoRA figure: keep the matrix labels on one line ("B · 1.000 × 50" wrapped at ~1024px) */
.lft-article .dl-lora__pair b { white-space: nowrap; }
.lft-article .dl-lora__a { min-width: 0; }
.lft-article .dl-lora__a i { max-width: 100%; }

/* ----- Responsive: insights/kubernetes-sicherheit.html ----- */
/* ---------- Responsive: Insights Kubernetes-Sicherheit (ks-) ---------- */
/* Mobile: tiny mono labels in the diagrams are hard to read at ~10.5px */
@media (max-width: 47.99em) {
  .ks-arch .ks-arch__label,
  .ks-arch__runtime,
  .ks-arch__link span,
  .ks-attack__legend,
  .ks-attack__col code { font-size: 0.72rem; }
  .ks-arch__actor small,
  .ks-arch__parts small,
  .ks-attack .ks-attack__more { font-size: 0.75rem; }
  .ks-attack__col li { font-size: 0.8rem; }
  .ks-arch__parts b { font-size: 0.82rem; }
}

/* Tablet / small desktop: five cramped columns (768) or a 4+1 orphan (1024).
   Show each tactic as a row: name on the left, techniques on the right. */
@media (min-width: 35em) and (max-width: 79.99em) {
  .prose .ks-attack__cols, .ks-attack__cols { grid-template-columns: minmax(0, 1fr); }
  .ks-attack__col {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    align-items: start; column-gap: 0.9rem;
  }
  .ks-attack__col > b {
    align-self: stretch; padding: 0.15rem 0.9rem 0 0; border-bottom: 0;
    border-right: 1px solid var(--border);
  }
  .prose .ks-attack__col ul, .ks-attack__col ul {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
  .ks-attack__col li { font-size: 0.8rem; }
  .ks-attack__col code { font-size: 0.7rem; }
}

/* ----- Responsive: projekte/cloud-security.html ----- */
/* === Responsive: projekte/cloud-security (csd-* is page-unique) === */
@media (max-width: 47.99em) {
  /* Inline code in tables: break only at hyphens, never mid-word
     (overrides .csd-article :not(pre) > code { overflow-wrap:anywhere }) */
  .csd-article .csd-table code { overflow-wrap: normal; word-break: normal; }
  
  /* Wide tables scroll inside their wrapper instead of crushing columns */
  
  
  .csd-article .csd-table--results { min-width: 40rem; }
  .csd-article .csd-table--results td:first-child code { white-space: nowrap; }
  .csd-table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
}
@media (min-width: 48em) and (max-width: 79.99em) {
  /* Results table: let the long column header wrap so all 5 columns fit
     beside the TOC instead of forcing a horizontal scroll */
  .csd-article .csd-table--results th { white-space: normal; vertical-align: bottom; }
  .csd-article .csd-table--results th:nth-child(2) { max-width: 9rem; }
  .csd-article .csd-table--results th,
  .csd-article .csd-table--results td { padding-inline: 0.7rem; }
}

/* ----- Responsive: insights/kubernetes-terraform.html ----- */
/* ---------- Responsive: Insights Kubernetes & Terraform (k8-) ---------- */
@media (max-width: 47.99em) {
  /* Audit-Stufen-Tabelle: auf Mobil als gestapelte Zeilen statt seitlichem Scrollen,
     damit die Detailgrad-Anzeige ohne Wischen sichtbar bleibt */
  .wi-table.k8-table,
  .wi-table.k8-table tbody { display: block; width: 100%; }
  .wi-table.k8-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .wi-table.k8-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.3rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--border);
  }
  .wi-table.k8-table tbody tr:last-child { border-bottom: 0; }
  .wi-table.k8-table td { display: block; padding: 0; border: 0; }
  .wi-table.k8-table td:first-child { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
  .wi-table.k8-table td:nth-child(3) { grid-column: 2; grid-row: 1; line-height: 0; }
  .wi-table.k8-table td:nth-child(2) {
    grid-column: 1 / -1; grid-row: 2;
    min-width: 0; font-size: 0.8rem; line-height: 1.5;
  }

  /* Dateiname über dem Code-Auszug lesbarer */
  .k8-code--policy .k8-code__file { font-size: 0.7rem; }
}

/* ----- Responsive: insights/wazuh-angriffserkennung.html ----- */
/* ---------- Responsive: Insights Wazuh-Angriffserkennung (wz-) ---------- */
/* Legend + card labels: lift mono micro-text to a readable size */
.wz-noise__legend small { font-size: 0.8rem; line-height: 1.45; }
.wz-compare__card small { font-size: 0.75rem; line-height: 1.4; }
/* Tablet: 43-dot grid read as oversized blobs in the wide article column */
@media (min-width: 48em) and (max-width: 63.99em) { .wz-noise__grid { max-width: 22rem; } }
@media (max-width: 47.99em) {
  .wz-noise { padding: 1.25rem 1rem; }
  .wz-noise__grid { gap: 0.4rem; }
  /* Stack the two legend entries left-aligned so the detail lines hang under their label */
  .wz-noise__legend { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .wz-noise__legend small { padding-left: 1.25rem; text-wrap: balance; }
  .wz-compare__card { padding: 1rem; }
  .wz-compare__card code { font-size: 0.88rem; }
}

/* ----- Responsive: insights/wazuh-plattform.html ----- */
/* Responsive: insights/wazuh-plattform (wp-* classes exist only on this page) */
@media (max-width: 63.99em) {
  /* Architektur-Figur + Tabelle: Mono-Mikrolabels nicht unter ~11px */
  .wp-arch__node > span { font-size: 0.7rem; }
  .wp-arch__tags li { font-size: 0.66rem; padding: 0.14rem 0.45rem; }
  .wp-yes, .wp-no { font-size: 0.72rem; }
}
@media (max-width: 47.99em) {
  /* Architektur-Figur einspaltig: Fließtexte auf Mobile lesbar (vorher ca. 12px) */
  .wp-arch__node { padding: 1rem 1rem 1.1rem; }
  .wp-arch__node > b { font-size: 1.0625rem; }
  .wp-arch__node > small { font-size: 0.875rem; line-height: 1.5; }
  .wp-arch__deploy p { font-size: 0.875rem; }
  .wp-arch__deploy b { font-size: 0.74rem; }
  .wp-arch__tags li { font-size: 0.7rem; padding: 0.18rem 0.55rem; }
}

/* ----- Responsive: insights/smart-contracts.html ----- */
/* ===== Responsive: Artikel Smart Contracts (sc-) ===== */
/* Editor-Tab zeigt eine .sol-Datei: Sprachkürzel passend statt "TS" */
.sc-editor .editor__tabs b::before { content: "SOL"; }

@media (max-width: 47.99em) {
  /* Mehr Breite fuer Code und Figuren */
  .sc-figure { padding: 1rem; }
  .sc-editor .editor__code { font-size: 0.72rem; }

  /* Ether-Einheiten: Werte nicht umbrechen, gleich hohe Kacheln */
  .sc-unit { padding: 0.85rem 0.4rem; align-content: center; }
  .sc-unit b { white-space: nowrap; font-size: clamp(0.95rem, 0.8rem + 0.8vw, 1.1rem); }

  /* Projekt-Karte: Icon + Pfeil oben, Text in voller Breite darunter */
  .sc-project { grid-template-columns: auto 1fr; align-items: center; row-gap: var(--space-3); }
  .sc-project > .card__icon { grid-column: 1; grid-row: 1; }
  .sc-project > svg { grid-column: 2; grid-row: 1; justify-self: end; }
  .sc-project > span:not(.card__icon) { grid-column: 1 / -1; grid-row: 2; }
}

/* Lebenszyklus: 2x2 statt einer langen Spalte bzw. zu enger 4er-Reihe */
@media (min-width: 30em) and (max-width: 47.99em) {
  .sc-lifecycle { grid-template-columns: repeat(2, 1fr); }
  .sc-step:not(:last-child)::after { content: none; }
  .sc-step { align-content: start; }
}

/* ----- Responsive: insights/ml-market-timing.html ----- */
/* insights/ml-market-timing: responsive fixes (page-unique classes only) */
@media (max-width: 47.99em) {
  /* Feature-Trichter: Stufen auf dem Handy breiter, damit die Beschriftung nicht umbricht; Trichterform bleibt */
  .wi-funnel__step { width: calc(var(--w) * 0.45 + 55%); min-width: 0; gap: 0.75rem; padding: 0.6rem 0.85rem; }
  .wi-funnel__step span { line-height: 1.35; }
  /* Konfusionsmatrizen: Achsenbeschriftung lesbar machen */
  .wi-matrix small { font-size: 0.75rem; }
  .wi-matrix__h { font-size: 0.75rem; }
  .wi-matrix p { font-size: 0.8rem; }
  /* Ergebnis-Tabelle: alle fünf Spalten passen ohne Scrollen auf 360 px */
  .mlt-table .wi-table { font-size: 0.8rem; }
  .mlt-table .wi-table th,
  .mlt-table .wi-table td { padding: 0.6rem 0.45rem; }
  .mlt-table .wi-table th:first-child,
  .mlt-table .wi-table td:first-child { padding-left: 0.8rem; }
  .mlt-table .wi-table th:last-child,
  .mlt-table .wi-table td:last-child { padding-right: 0.8rem; }
  .mlt-table .wi-table th { font-size: 0.7rem; letter-spacing: 0.02em; }
}

/* ----- Responsive: insights/kurzvideos.html ----- */
/* ===== Responsive: Insights / Kurzvideos (kv-) ===== */
/* Figure label ("Abb. 1") must never wrap onto two lines */

/* Hero badge "Hochformat · Mobile first" covered the phone caption below desktop width:
   move it under the phone so the caption stays readable */

/* Tablet: single-column hero, keep the badges hugging the phone instead of drifting to the edges */

/* ----- Responsive: ueber-uns.html ----- */
/* ueber-uns.html: responsive fixes */
/* The list reset ol[role="list"] (higher specificity) wiped the timeline's left gutter below 960px:
   dots sat outside the viewport and the line ran through the cards. */
@media (max-width: 59.99em) {
  .ab-timeline[role="list"] { padding-left: 3.5rem; }
  .ab-tl__type { font-size: 0.68rem; }
}
@media (max-width: 47.99em) {
  /* Hero headline: "zusammenkommen." was wider than the column at ~360px */
  .ab-hero .h1 { font-size: clamp(2rem, 1.1rem + 4vw, 2.4rem); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  /* Orbit logos travel to the orbit's edge (rx = 50% width); keep room for the logo tiles */
  .ab-hero .orbit--avatar { width: min(calc(100% - 3.5rem), 30rem); }
  .ab-timeline[role="list"] { padding-left: 3rem; }
  .ab-timeline::before, .ab-timeline::after { left: 0.95rem; }
  .ab-tl__dot { left: -3rem; width: 2rem; height: 2rem; }
  .ab-stack__group small { font-size: 0.72rem; }
}

/* ----- Responsive: vorgehen.html ----- */
/* ---------- Vorgehen: Responsive ---------- */

/* Hero-Loop unter dem Text (einspaltig): weniger Leerraum davor/danach */
@media (max-width: 59.99em) {
  .vg-loop-stage { padding-block: 0; }
}

@media (max-width: 47.99em) {
  /* Seitliche Knoten bleiben im Container statt ueber den Rand zu ragen */
  .vg-node--2 { left: min(87.5%, 100% - 3.1rem); }
  .vg-node--4 { left: max(12.5%, 3.1rem); }
  .vg-loop__core small { font-size: 0.68rem; max-width: 8rem; }

  /* Lesbare Labels */
  .vg-phase__cols small { font-size: 0.72rem; }
  .vg-badge { font-size: 0.7rem; }
  .vg-proto__bar em { font-size: 0.68rem; }

  /* Mess-Hinweis: Icon ueber dem Text statt schmaler Textspalte */
  .vg-measure { grid-template-columns: 1fr; justify-items: start; align-items: start; gap: var(--space-3); }
}

/* Tablet quer / kleine Laptops: Phasen-Kopf ueber den drei Spalten, sonst zu gedraengt */
@media (min-width: 1000px) and (max-width: 74.99em) {
  .vg-phase { grid-template-columns: 1fr; }
}

/* ----- Responsive: faq.html ----- */
/* ---- Responsive: faq.html (scoped to .faq-search / #faq-list, unique to this page) ---- */
#faq-list summary h2 { overflow-wrap: break-word; }

@media (max-width: 47.99em) {
  /* Search: give the placeholder more room on narrow phones */
  .faq-search__field svg { left: 1rem; }
  .faq-search__field input {
    padding-left: 2.75rem;
    padding-right: 4.25rem;
  }
  .faq-search__field input::placeholder { font-size: 0.9rem; }
  .faq-search__count { right: 1rem; }

  /* Filter chips: comfortable tap targets */
  .faq-search .chip {
    min-height: 2.5rem;
    padding-inline: 1.05rem;
    font-size: 0.8rem;
  }

  /* Question rows: slimmer number column so questions get more width */
  #faq-list summary { gap: 0.75rem; }
  #faq-list summary::before { width: 1.5rem; }
  #faq-list .faq__answer { padding-left: 2.25rem; }
}

/* ----- Responsive: kontakt.html ----- */
/* ---------- Kontakt: responsive ---------- */
/* Kontaktkarten: E-Mail/Telefon nicht mitten im Wort umbrechen, Kopieren-Button unter den Wert */
@media (max-width: 47.99em) {
  .contact-stage .contact-item {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
  .contact-stage .contact-item strong { word-break: normal; overflow-wrap: anywhere; white-space: nowrap; }
  .contact-stage .contact-item .copy-btn {
    grid-column: 2;
    justify-self: start;
    min-height: 2.25rem;
    padding-inline: 0.9rem;
  }
  .contact-stage .contact-panel { gap: var(--space-3); }
  .contact-stage .cta-person { min-width: 0; }

  /* Mail-Box: verschachtelte Innenabstände etwas zurücknehmen */
  .mail-cta .mail-tips { padding: var(--space-4); }
  .mail-cta .btn-row .btn { flex: 1 1 auto; justify-content: center; }

  /* Timeline-Linie nicht bis an den Viewportrand ziehen */
  .kontakt-next .process__step::after { right: 0; }
}
@media (max-width: 22.5em) {
  .contact-stage .contact-item strong { white-space: normal; }
}

/* Nächste Schritte: drei Schritte ab Tablet nebeneinander statt 2 + Waise */
@media (min-width: 700px) {
  .kontakt-next .process--3 { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-5); }
  .kontakt-next .process__step h3 { hyphens: auto; overflow-wrap: break-word; }
}

/* ----- Responsive: datenschutzerklaerung.html ----- */
/* ===== Responsive: Datenschutzerklärung (scoped via .legal--privacy) ===== */

/* Absatzabstände innerhalb der Kapitel (p/ul folgen direkt aufeinander, nicht Kinder von .prose) */
.legal--privacy .prose section > p + p,
.legal--privacy .prose section > p + ul,
.legal--privacy .prose section > ul + p { margin-top: 0.85rem; }
.legal--privacy .prose h3,
.legal--privacy .prose h4 { overflow-wrap: break-word; hyphens: auto; }
.legal--privacy .prose h4 + p { margin-top: 0.35rem; }

/* Inhaltsverzeichnis unter 1000px: statische Karte statt ausgeblendet */
@media (max-width: 999.98px) {
  .legal--privacy { gap: var(--space-6); }
  .legal--privacy .legal__toc {
    display: grid;
    position: static;
    gap: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .legal--privacy .legal__toc p {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
  }
  .legal--privacy .legal__toc a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.35rem 0 0.35rem 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
  }
  .legal--privacy .legal__toc a + a { border-top: 1px solid var(--border); }
  /* Scrollspy-Punkt hat bei statischer Liste keine Aussagekraft */
  .legal--privacy .legal__toc a.is-active { color: var(--text-muted); }
  .legal--privacy .legal__toc a.is-active::before { background: var(--border-strong); box-shadow: none; }
}
@media (min-width: 48em) and (max-width: 999.98px) {
  .legal--privacy .legal__toc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .legal--privacy .legal__toc p { grid-column: 1 / -1; }
  .legal--privacy .legal__toc a + a { border-top: 0; }
  .legal--privacy .legal__toc a:nth-of-type(n+3) { border-top: 1px solid var(--border); }
}

/* ==========================================================================
   Responsive-Korrekturen gemeinsamer Bauteile
   ========================================================================== */
/* Header: zwischen 1000 und 1199 px wird es eng -> kein Umbruch, kompaktere Links, kürzerer CTA */
.brand, .nav__link { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .nav__link { padding-inline: 0.6rem; }
  .header-cta__long { display: none; }
}
/* Menü-Gruppentitel lesbar */
.dropdown-group__title { font-size: 0.7rem; }
/* Kontaktblock: Labels lesbar, E-Mail bricht nur am @, Telefonnummer am Stück */
.contact-item small { font-size: 0.72rem; }
.contact-item strong { word-break: normal; overflow-wrap: normal; }
a.contact-item[href^="tel"] strong { white-space: nowrap; }
@media (max-width: 47.99em) { .contact-item strong { font-size: 1rem; } }
/* Artikel & Rechtstexte: Abstände auch innerhalb von <section> */
.prose > section > * + * { margin-top: 1rem; }
.prose > section > h3, .prose > section > * + h3 { margin-top: var(--space-6); }
.prose > section > h2 + *, .prose h3 + * { margin-top: 0.6rem; }
/* Insights: kleine Mono-Labels und Abbildungstexte lesbarer */
.wi-author small, .wi-more__item small, .k8-code__file { font-size: 0.72rem; }
.wi-flow small { font-size: 0.8rem; }
.wi-flow span { font-size: 0.72rem; }
@media (max-width: 47.99em) {
  .wi-steps li { padding: 2.4rem 1rem 0.95rem; }
  .wi-steps li::before { top: 0.9rem; }
}
/* Raster: lange deutsche Wörter dürfen Spalten nicht verbreitern */
.grid > *, .split > *, .hero--split .hero__grid > * { min-width: 0; }
/* Ablauf-Linien: nicht über den Rand hinaus, wenn Schritte untereinander/umbrechen */
@media (max-width: 63.99em) { .process__step::after { right: 0; } }

/* ===== Cloud-Lösungen: Anbieter-Abschnitt ===== */
/* ---------- Cloud-Lösungen: Anbieter-Sektion ---------- */
.az-prov .az-path { padding-top: 1.5rem; }
.az-prov .az-path__tag { padding-right: 3rem; }
.az-prov__icon {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border);
  background: rgb(var(--accent-2-rgb) / 0.1);
  color: var(--accent-text);
}
.az-prov__icon svg { width: 1.2rem; height: 1.2rem; }
.az-path--pick .az-prov__icon {
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: rgb(var(--accent-rgb) / 0.14);
}
.az-prov__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.az-prov__choice { align-items: start; }
.az-prov__choice .stack p:not(.lead) { color: var(--text-muted); }

/* ===== Insights: LLMs im Unternehmen (llm-) ===== */
/* ==========================================================================
   Insights: LLMs im Unternehmen (insights/llm-potenziale.html)
   ========================================================================== */

/* Next-Token-Vorhersage */
.llm-next__prompt { margin: 0 0 var(--space-4); font: 500 0.95rem var(--font-mono); color: var(--text); line-height: 1.6; }
.llm-next__cursor { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.2em; background: var(--accent); border-radius: 2px; animation: llm-blink 1s steps(1) infinite; }
@keyframes llm-blink { 50% { opacity: 0; } }
.prose .llm-next__list, .llm-next__list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.llm-next__list li { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 0.75rem; margin: 0; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); }
.llm-next__list li::marker { content: none; }
.llm-next__list b { font: 600 0.85rem var(--font-mono); color: var(--text); }
.llm-next__list i { position: relative; height: 0.45rem; border-radius: 999px; background: rgb(var(--ink) / 0.08); overflow: hidden; }
.llm-next__list i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.55), rgb(var(--accent-2-rgb) / 0.9)); transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(.2,.7,.2,1) 0.2s; }
.llm-next__list li:nth-child(2) i::after { transition-delay: 0.35s; }
.llm-next__list li:nth-child(3) i::after { transition-delay: 0.5s; }
.is-visible .llm-next__list i::after { transform: none; }
.llm-next__list small { font: 500 0.68rem var(--font-mono); color: var(--text-subtle); white-space: nowrap; }
.llm-next__list li.is-top { border-color: rgb(var(--accent-rgb) / 0.45); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.1), var(--bg) 70%); }
.llm-next__list li.is-top i::after { background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.6), var(--accent)); }
@media (max-width: 520px) {
  .llm-next__list li { grid-template-columns: 1fr auto; row-gap: 0.4rem; }
  .llm-next__list i { grid-column: 1 / -1; grid-row: 2; }
}

/* Anwendungsfälle mit Aufwand/Nutzen */
.prose .llm-uses__grid, .llm-uses__grid { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) {
  .llm-uses__grid { grid-template-columns: repeat(2, 1fr); }
  .llm-uses__grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.llm-uses__grid li { display: grid; align-content: start; gap: 0.35rem; margin: 0; padding: 0.95rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); line-height: 1.5; }
.llm-uses__grid li::marker { content: none; }
.llm-uses__grid b { display: flex; align-items: center; gap: 0.5rem; color: var(--text); font-size: 0.95rem; }
.llm-uses__grid b svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--accent-text); }
.llm-uses__grid span { font-size: 0.85rem; color: var(--text-muted); }
.llm-uses__grid p { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0; }
.wi-article .llm-lvl { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); font: 600 0.66rem var(--font-mono); letter-spacing: 0.03em; color: var(--text-muted); }
.llm-lvl::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.wi-article .llm-lvl--mid { color: var(--accent-2); border-color: rgb(var(--accent-2-rgb) / 0.4); }
.wi-article .llm-lvl--hi { color: var(--accent-text); border-color: rgb(var(--accent-rgb) / 0.45); background: rgb(var(--accent-rgb) / 0.08); }

/* Drei Wege: Prompting, RAG, Fine-Tuning */
.prose .llm-ways__list, .llm-ways__list { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .llm-ways__list { grid-template-columns: repeat(3, 1fr); } }
.llm-ways__list > li { display: grid; align-content: start; gap: 0.6rem; margin: 0; padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); }
.llm-ways__list > li::marker { content: none; }
.llm-ways__list > li.is-key { border-color: rgb(var(--accent-rgb) / 0.5); background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.09), var(--bg) 60%); }
.llm-ways__tag { justify-self: start; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgb(var(--accent-2-rgb) / 0.14); font: 600 0.64rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-2); }
.is-key .llm-ways__tag { background: rgb(var(--accent-rgb) / 0.14); color: var(--accent-text); }
.llm-ways__list > li > b { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; color: var(--text); }
.llm-ways__list > li > b svg { width: 1.15rem; height: 1.15rem; color: var(--accent-text); }
.llm-ways__list dl { display: grid; gap: 0.5rem; margin: 0; }
.llm-ways__list dl div { display: grid; gap: 0.1rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); }
.llm-ways__list dt { font: 600 0.64rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-subtle); }
.llm-ways__list dd { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .llm-next__cursor { animation: none; }
  .llm-next__list i::after { transform: none; transition: none; }
}

/* Smart-Contracts-Insight: TradeCoin-Karte ist kein Link mehr */
div.sc-project:hover { transform: none; }

/* Cursor-Ring (nur feiner Zeiger, ohne reduzierte Bewegung; Position per JS) */
.cursor-ring {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: transform;
}
.cursor-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--accent-rgb) / 0.7);
  transition: transform 0.35s var(--ease), background-color 0.35s, border-color 0.35s;
}
.cursor-ring.is-active { opacity: 1; }
.cursor-ring.is-hover::before { transform: scale(1.6); background-color: rgb(var(--accent-rgb) / 0.08); border-color: rgb(var(--accent-rgb) / 0.45); }
.cursor-ring.is-down::before { transform: scale(0.75); }
.cursor-ring.is-hover.is-down::before { transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .cursor-ring { display: none; } }

/* Mobile Navigation: aufklappbare Gruppen (Leistungen, Projekte, Insights, Über mich) */
.mobile-nav__group summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group summary svg { transition: transform 0.25s var(--ease); }
.mobile-nav__group[open] summary svg { transform: rotate(180deg); opacity: 0.8; }
.mobile-nav__group ul { display: grid; padding-bottom: var(--space-3); }
.mobile-nav__list .is-sub a[aria-current="page"] { color: var(--accent-text); }

/* Projekte ML: Modell-Tuning getrennt vom Feature-Trichter (andere Größe als Features) */
.pj-tune { display: grid; gap: 0.5rem; padding-top: var(--space-4); border-top: 1px dashed var(--border-strong); }
.pj-tune__label { font: 600 0.68rem var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pj-tune .pj-funnel__row { transition-delay: 0.45s; }

/* ---------- Audit 2026-10: Reduced Motion, Cookie-Banner mobil, Fokus, Überläufe ---------- */
/* 404: Glitch-Ebenen bei reduzierter Bewegung ganz ausblenden (statt Artefakt-Zustand) */
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { display: none; }
  /* Mockup-Notizen (Vorgehen) bleiben sonst dauerhaft unsichtbar */
  .vg-proto__note { opacity: 1; translate: 0 0; }
}

/* Cookie-Banner: auf kleinen Handys kompakt, unten angedockt, scrollbar; beide Buttons gleich gewichtet */
.cc-actions .btn { width: 100%; }
@media (max-width: 600px) {
  .cc-banner,
  .cc-prefs {
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    margin: 0;
    max-height: 46svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .cc-prefs { max-height: 80svh; }
  .cc-inner { gap: var(--space-3); padding: var(--space-4); }
  .cc-head .card__icon { display: none; }
  .cc-head strong { font-size: var(--fs-sm); }
  .cc-text { font-size: var(--fs-xs); line-height: 1.45; }
  .cc-actions .btn { min-height: 2.5rem; padding-block: 0.4rem; font-size: var(--fs-sm); }
}

/* Scrollbare Tabellen: sichtbarer Tastaturfokus */
.pj3-scroll { overflow-x: auto; border-radius: var(--radius); }
.pj3-scroll .pj3-metrics { min-width: 30rem; }
.pj3-scroll:focus-visible,
.wi-table-wrap:focus-visible,
.csd-table-wrap:focus-visible,
.table-scroll:focus-visible,
[role="region"][tabindex="0"]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.faq-search__field:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Über mich: Netzwerk-Knoten auf kleinen Handys im Container halten und umbrechen lassen */
@media (max-width: 600px) {
  .network__node {
    left: clamp(4.2rem, var(--x), calc(100% - 4.2rem));
    box-sizing: border-box;
    max-width: 8.4rem;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
}

/* Insights-Hero: dritte Dekorkarte tiefer, damit ihr Label nicht von der zweiten verdeckt wird */
.wi-stack__card:nth-child(3) { top: 10.2rem; }
.wi-stack { height: 19.5rem; }
@media (max-width: 959px) { .wi-stack { height: 16.5rem; } }
.ws-shop__note { font-size: 0.75rem; }

/* ---------- KI-generierte Fotos: sichtbare Kennzeichnung ---------- */
.media__ai {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgb(var(--bg-rgb) / 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  font: 500 0.68rem/1.2 var(--font-mono);
  pointer-events: none;
}
.fan__card .media__ai { top: 0.75rem; bottom: auto; z-index: 3; }
.media__ai { right: 1.4rem; bottom: 1.4rem; z-index: 2; }
.fan__card .media__ai { right: 0.75rem; }

/* Dekorationen (Lichtschein im Hero, wandernde Linie über Abschnitten u. a.) nicht über den Seitenrand ragen lassen:
   verhindert seitliches Scrollen und springende fixe Elemente auf dem Handy. clip statt hidden, damit sticky weiter funktioniert. */
main { overflow-x: clip; }