/* Nucez Software | Startseite
 * Single source of truth: comspace.de (Open Sans, weiß-dominant, schwarze Bänder,
 * Foto-getrieben, scharfe uppercase Buttons, Cyan-Link-Akzent). Kein Framework.
 * Fonts selbst gehostet (DSGVO). */

/* comspace Open Sans (Original-Dateien von comspace.de) */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/opensans-light.woff2") format("woff2"), url("../fonts/opensans-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/opensans-regular.woff2") format("woff2"), url("../fonts/opensans-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/opensans-bold.woff2") format("woff2"), url("../fonts/opensans-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --ink: #212529;         /* body text */
  --paper: #ffffff;
  --paper-2: #f5f6f7;
  --muted: #6c757d;
  --muted-on-dark: #b7bcc0;
  --accent: #b3de4f;      /* Nucez-Grün: Akzent auf Dunkel, Marker, Fills */
  --accent-black: #111111; /* Textfarbe auf Grün-Flächen (hoher Kontrast) */
  --line: #dee2e6;
  --line-dark: rgba(255, 255, 255, 0.16);

  --font: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --container: 1440px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band-y: clamp(3.5rem, 6vw, 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.125rem;      /* 18px */
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* Browser surfaces */
::selection { background: var(--accent); color: var(--accent-black); }
:root { caret-color: var(--accent); accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent-black); outline-offset: 2px; }
.band--black :focus-visible { outline-color: var(--accent); }

/* Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band-y); }
.band--black { background: var(--black); color: #fff; }
.band--paper { background: var(--paper); color: var(--ink); }
.band--paper-2 { background: var(--paper-2); color: var(--ink); }

/* Type */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; color: inherit; }
.h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.08; font-weight: 700; }
.h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.15; }
.h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); line-height: 1.25; }
.lead { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem); font-weight: 300; line-height: 1.55; }
.overline { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 0.7em; margin-bottom: 1rem; }
.overline::before { content: ""; width: 1.6em; height: 0.2em; background: var(--accent); flex: none; }
.band--black .overline { color: #fff; }
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.15rem; }
.mute { color: var(--muted); }
.band--black .mute { color: var(--muted-on-dark); }

/* Body links: auf hell dunkler Text mit grünem Unterstrich, auf dunkel grün */
.rte a, .txt-link-inline { color: var(--accent-black); font-weight: 700; text-decoration: none; transition: color 0.18s ease; }
.rte a:hover, .txt-link-inline:hover { color: #7ba32f; }
.band--black .rte a, .band--black .txt-link-inline { color: #fff; }
.band--black .rte a:hover, .band--black .txt-link-inline:hover { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent; border-radius: 0;
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, transform 0.25s ease;
}
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--dark { background: var(--black); color: #fff; border-color: var(--black); }
.btn--dark:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--light { background: #fff; color: var(--black); border-color: #fff; }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Primärer Marken-Button: Grün mit schwarzem Text */
.btn--accent { background: var(--accent); color: var(--accent-black); border-color: var(--accent); }
.btn--accent:hover { background: #a2ce3c; border-color: #a2ce3c; color: #fff; }
.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.8rem; }

/* Text link with arrow */
.tlink { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 0.5em; }
.tlink .arrow { color: var(--accent); }
.band--black .tlink { color: #fff; }
.tlink .arrow { transition: transform 0.2s ease; }
.tlink:hover .arrow { transform: translateX(4px); }

/* Header: eine Leiste: Nav links, Logo mittig, Aktionen rechts */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--black); color: #fff; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.wordmark { font-size: 1.6rem; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; color: #fff; }
.wm-b { font-weight: 700; }
.wm-dot { font-weight: 700; color: var(--accent); }
.wm-l { font-weight: 300; margin-left: 0.32em; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__link { position: relative; font-size: 1rem; font-weight: 700; color: #fff; padding-block: 0.4rem; transition: color 0.18s ease; white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease, ease); }
.nav__link:hover, .nav__link:focus-visible { color: #fff; }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }
.has-mega:hover .nav__link::after, .has-mega:focus-within .nav__link::after { transform: scaleX(1); }
.nav__lang { font-size: 0.9rem; font-weight: 700; color: #fff; letter-spacing: 0.04em; padding: 0.3rem 0.6rem; border: 1px solid var(--line-dark); transition: border-color 0.18s ease, color 0.18s ease; }
.nav__lang:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle { display: none; }

/* Desktop Mega-Dropdown */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.mega { display: none; }
@media (min-width: 641px) {
  .mega { display: block; position: fixed; left: 0; right: 0; top: 76px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 44px rgba(0,0,0,0.14); opacity: 0; transform: translateY(-15px); pointer-events: none; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; z-index: 90; }
  .has-mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; pointer-events: none; }
  .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; transform: none; pointer-events: auto; }
  .has-mega:hover::after, .has-mega:focus-within::after { pointer-events: auto; }
  .mega__inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 3vw, 3rem); }
  .mega__lead { color: var(--ink); font-weight: 700; font-size: 1.05rem; margin-bottom: 1.25rem; }
  .mega__title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; color: var(--ink); margin-bottom: 1.5rem; }
  .mega__title .arrow { color: var(--accent); }
  .mega__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 2rem; max-width: 46rem; }
  .mega__cols a { position: relative; display: inline-block; justify-self: start; font-weight: 700; color: var(--ink); padding: 0.35rem 0; }
  .mega__cols a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease, ease); }
  .mega__cols a:hover::after, .mega__cols a:focus-visible::after { transform: scaleX(1); }
  .mega__aside { border-left: 1px solid var(--line); padding-left: clamp(2rem, 4vw, 4rem); }
  .mega__aside-h { font-weight: 700; font-size: 1.15rem; margin-bottom: 0.6rem; }
  .mega__aside-p { color: var(--ink); font-weight: 300; margin-bottom: 1.25rem; max-width: 34ch; }
}

/* Hero */
.hero { position: relative; color: #fff; background: #0a0a0a; min-height: min(90vh, 820px); display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.5) 72%, rgba(0,0,0,0.62) 100%); }
.hero .container { position: relative; z-index: 1; padding-block: clamp(4.5rem, 10vw, 7rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__inner { max-width: min(1150px, 94vw); margin-left: 0; }

/* Code-Fenster (echtes DOM, kein Bild) */
.hero__code { min-width: 0; }
.codewin { background: #111317; border: 1px solid var(--line-dark); box-shadow: 0 30px 70px rgba(0,0,0,0.5); }
.codewin__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-dark); }
.codewin__dot { width: 11px; height: 11px; border-radius: 50%; background: #3a3d44; }
.codewin__dot:first-child { background: var(--accent); }
.codewin__name { margin-left: 10px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--muted-on-dark); }
.codewin__body { margin: 0; padding: 22px 24px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(0.8rem, 0.72rem + 0.4vw, 0.95rem); line-height: 1.95; color: #e6e8ea; overflow-x: auto; }
.codewin__body code { display: block; white-space: pre; }
.codewin .ln { display: inline-block; width: 2.4ch; margin-right: 1.6ch; color: #464a52; user-select: none; }
.codewin .c { color: #6f7d5a; }
.codewin .k { color: var(--accent); }
.codewin .v { color: #e6e8ea; }
.codewin .s { color: #cfe89a; }
.hero__crumb { display: inline-block; font-size: 0.9rem; font-weight: 700; color: #fff; padding-bottom: 0.35rem; border-bottom: 2px solid var(--accent); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero__title { margin: 0; font-size: clamp(2.75rem, 1.2rem + 6vw, 5.75rem); line-height: 1.04; }
.hero__tagline { font-weight: 700; font-size: clamp(1.6rem, 0.9rem + 3vw, 3.25rem); line-height: 1.05; margin-top: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); color: #fff; }
.hero__badge { position: absolute; z-index: 2; right: clamp(1.25rem, 4vw, 3rem); bottom: clamp(1.25rem, 4vw, 2.5rem); width: clamp(160px, 20vw, 270px); height: auto; }
.hero__services { display: flex; flex-direction: column; gap: 0.9rem; }
.hero__services a { display: inline-flex; align-items: center; gap: 0.7rem; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); font-weight: 700; color: #fff; transition: color 0.18s ease; }
.hero__services-mark { width: 10px; height: 10px; background: var(--accent); flex: none; }
.hero__services .arrow { color: var(--accent); transition: transform 0.2s ease; }
.hero__services a:hover { color: var(--accent); }
.hero__services a:hover .arrow { transform: translateX(4px); }

/* Intro (linksbündig eingerückt, luftig, comspace-Stil) */
.intro__text { max-width: 62ch; margin-left: clamp(0px, 7vw, 150px); font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.8rem); font-weight: 300; line-height: 1.5; color: var(--ink); }
.intro__text strong { font-weight: 700; }

/* Facts row (schwarzer Streifen, weißer Text) */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.facts li { display: grid; justify-items: center; text-align: center; }
.facts__icon { width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; background: #fff; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.facts__d { margin-inline: auto; }
.facts__k { display: block; font-size: clamp(2.5rem, 1.5rem + 2.6vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.facts__v { display: block; font-size: 1.1rem; font-weight: 700; margin-top: 0.5rem; color: #fff; }
.facts__d { display: block; color: #f2f4f6; margin-top: 0.6rem; font-size: 0.98rem; max-width: 30ch; }

/* Section head */
.section-head { max-width: 78ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .h2 { margin-bottom: 1rem; }
.section-head p { color: var(--ink); }
.band--black .section-head p { color: #f2f4f6; }
.band--black .mute { color: #f2f4f6; }

/* Teaser band (black, image + body): comspace section-teaser */
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.teaser--textfirst .teaser__media { order: 2; }
.teaser__media img { width: 100%; height: auto; }
.teaser__frame { border: 1px solid var(--line-dark); }
.teaser__body h2 { margin-bottom: 1.25rem; }
.teaser__body p { margin-bottom: 1.25rem; color: #e7e9ea; }

/* Service cards */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; }
.card h3 { margin-bottom: 0.85rem; }
.card p { color: var(--muted); margin-bottom: 1.75rem; }
.card__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.5rem; margin-bottom: 2rem; }
.card__list li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 1rem; }
.card__list li::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: none; transform: translateY(-1px); }
.card .btn { align-self: flex-start; margin-top: auto; }

/* Leistungen: Karussell aus Bild-Kacheln (comspace-Stil) */
.carousel__mask { overflow: hidden; padding: 2.75rem 0; margin-block: -2.75rem; }
.carousel__track { display: flex; gap: clamp(1rem, 2vw, 1.5rem); transition: transform 0.6s ease-in-out; will-change: transform; }
.svc-card { position: relative; flex: 0 0 clamp(280px, 30vw, 360px); aspect-ratio: 3 / 4; overflow: hidden; background: #101216 var(--img, none) center/cover no-repeat; transform-origin: center; transition: transform 0.5s ease-in-out, filter 0.35s ease; }
.svc-card:first-child { transform-origin: center left; }
@media (min-width: 992px) {
  .svc-card:hover { transform: scale(1.1); z-index: 10; }
}
.svc-card::before { content: ""; position: absolute; inset: 0; transition: background 0.35s ease; background: linear-gradient(180deg, rgba(10,11,13,0.6) 0%, rgba(10,11,13,0.42) 50%, rgba(10,11,13,0.85) 100%); }
/* inaktive Karten verblenden */
.svc-card:not(.is-active)::before { background: linear-gradient(180deg, rgba(10,11,13,0.78) 0%, rgba(10,11,13,0.82) 100%); }
.svc-card:not(.is-active) { filter: saturate(0.75); }
.svc-card::after { content: var(--n, ""); position: absolute; top: 0.6rem; right: 1.1rem; font-size: 4.5rem; font-weight: 700; line-height: 1; color: rgba(255,255,255,0.09); }
.svc-card__inner { position: absolute; inset: 0; padding: clamp(1.5rem, 2.2vw, 2rem); display: flex; flex-direction: column; text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.8); }
.svc-card__title { color: #fff; font-size: 1.35rem; line-height: 1.25; min-height: 2.5em; margin-bottom: 0.25rem; }
.svc-card__title::after { content: ""; display: block; width: 0; height: 3px; background: var(--accent); margin-top: 0.85rem; transition: width 0.4s ease; }
.svc-card.is-active .svc-card__title::after { width: 40px; }
.svc-card__text { color: #f2f4f6; margin-top: 0.85rem; font-size: 1rem; line-height: 1.5; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.svc-card.is-active .svc-card__text { opacity: 1; transform: none; transition-delay: 0.18s; }
/* MEHR INFOS immer sichtbar, unten rechts */
.svc-card__cta { margin-top: auto; align-self: flex-end; text-shadow: none; }
.carousel__nav { display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem; margin-top: 1.75rem; }
.carousel__btn { border: 0; background: none; padding: 0.25rem; color: var(--ink); font-size: 1.6rem; line-height: 1; transition: color 0.18s ease, transform 0.18s ease; }
.carousel__btn:hover:not(:disabled) { color: var(--accent); }
.carousel__btn:disabled { opacity: 0.25; cursor: default; }
.carousel__count { font-size: 1.05rem; color: var(--muted); letter-spacing: 0.06em; min-width: 4.5ch; text-align: center; }
.carousel__count b { color: var(--ink); font-weight: 700; }

/* Was mich ausmacht (3 nummerierte Spalten, schwarz) */
.us-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); }
.us-col { display: grid; gap: 0.6rem; justify-items: center; text-align: center; }
.us-col__icon { width: 4.25rem; height: 4.25rem; background: #fff; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; margin-bottom: 0.75rem; }
.us-col__h { font-size: 1.3rem; font-weight: 700; color: #fff; }
.us-col p { color: #f2f4f6; max-width: 34ch; }
@media (max-width: 780px) { .us-grid { grid-template-columns: 1fr; } }

/* Lösungen / Use-Cases (schwarz, 4 Karten mit Bild) */
.sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.sol-card { display: flex; flex-direction: column; }
.sol-card__img { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.25rem; }
.sol-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sol-card:hover .sol-card__img img { transform: scale(1.05); }
.sol-card h3 { color: #fff; margin-bottom: 0.85rem; }
.sol-card p { color: #f2f4f6; margin-bottom: 1.5rem; }
.sol-card p a { color: #fff; font-weight: 700; }
.sol-card p a:hover { color: var(--accent); }
.sol-card__cta { margin-top: auto; align-self: stretch; width: 100%; justify-content: center; }

/* Technologien: Logo-Raster (comspace-Stil) */
.tech__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); align-items: center; justify-items: center; }
.tech__item { display: flex; align-items: center; justify-content: center; min-height: 64px; }
.tech__logo { height: 56px; width: auto; max-width: 100%; object-fit: contain; display: block; transition: transform 0.25s ease; }
.tech__item:hover .tech__logo { transform: scale(1.08); }
.tech__word { font-weight: 800; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em; }

/* Technologien-Seite: Slider-Karten mit Logo statt Bild */
.tech-card { position: relative; flex: 0 0 clamp(280px, 30vw, 360px); aspect-ratio: 3 / 4; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.2vw, 2rem); background: #15171b; border: 1px solid rgba(255,255,255,0.12); color: #fff; transform-origin: center; transition: transform 0.5s ease-in-out, border-color 0.35s ease, opacity 0.35s ease; }
.tech-card:first-child { transform-origin: center left; }
.tech-card:not(.is-active) { opacity: 0.6; }
.tech-card.is-active { border-color: rgba(255,255,255,0.35); }
@media (hover: hover) { .tech-card:hover { transform: scale(1.06); z-index: 10; opacity: 1; } }
.tech-card::after { content: var(--n, ""); position: absolute; top: 0.6rem; right: 1.1rem; font-size: 4.5rem; font-weight: 700; line-height: 1; color: rgba(255,255,255,0.09); }
.tech-card__logo { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 14px; margin-bottom: auto; }
.tech-card__logo img { width: 52px; height: 52px; object-fit: contain; }
.tech-card__kicker { margin: 1.5rem 0 0.35rem; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-dark); }
.tech-card__title { color: #fff; font-size: 1.35rem; line-height: 1.2; margin: 0; }
.tech-card__title::after { content: ""; display: block; width: 0; height: 3px; background: var(--accent); margin-top: 0.85rem; transition: width 0.4s ease; }
.tech-card.is-active .tech-card__title::after { width: 40px; }
.tech-card__text { color: #f2f4f6; margin: 0.85rem 0 0; font-size: 1rem; line-height: 1.5; }
.band--black .carousel__btn { color: #fff; }
.band--black .carousel__count { color: var(--muted-on-dark); }
.band--black .carousel__count b { color: #fff; }

/* Pains: recognizable statements als cleane Hairline-Liste */
.pains__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); border-top: 1px solid var(--line-dark); }
.pain { display: flex; gap: 1rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--line-dark); transition: color 0.2s ease; }
.pain__mark { color: var(--accent); font-weight: 700; flex: none; }
.pain__text { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem); line-height: 1.35; color: #f2f4f6; transition: color 0.2s ease; }
.pain:hover .pain__text { color: var(--accent); }
.pains__foot { margin-top: 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.pains__foot p { color: #e7e9ea; max-width: 42ch; }

/* Person */
.person { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.person__body { max-width: 52ch; }
.person__body h2 { margin-bottom: 1.25rem; }
.person__body p { margin-bottom: 1.15rem; }

/* FAQ: schlichtes Q&A-Raster (aus comspace-Grammatik: Karten, keine Linien) */
.qa2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2.25rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 6rem); }
.qa2__q { color: #fff; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); font-weight: 700; line-height: 1.25; margin-bottom: 0.85rem; }
.qa2__a { color: #f2f4f6; font-size: 1.05rem; line-height: 1.65; max-width: 54ch; }

/* FAQ (alt) */
.faq-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq-intro { position: sticky; top: 96px; }
.faq-intro h2 { margin-bottom: 1rem; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .sign { flex: none; position: relative; width: 20px; height: 20px; }
.faq summary .sign::before, .faq summary .sign::after { content: ""; position: absolute; background: var(--ink); top: 50%; left: 50%; transform: translate(-50%,-50%); transition: transform 0.2s ease, background 0.2s ease; }
.faq summary .sign::before { width: 16px; height: 2px; }
.faq summary .sign::after { width: 2px; height: 16px; }
.faq details[open] summary .sign::before, .faq details[open] summary .sign::after { background: var(--accent-dark, #6f9a1f); }
.faq details[open] summary .sign::after { transform: translate(-50%,-50%) scaleY(0); }
.faq details[open] summary { color: var(--ink); }
.faq summary:hover { color: #000; }
.faq__body { padding: 0 0 1.5rem; max-width: 68ch; color: var(--muted); }
/* FAQ auf schwarzem Band */
.band--black .faq { border-top-color: var(--line-dark); }
.band--black .faq details { border-bottom-color: var(--line-dark); }
.band--black .faq summary { color: #fff; }
.band--black .faq details[open] summary { color: #fff; }
.band--black .faq summary:hover { color: var(--accent); }
.band--black .faq__body { color: #f2f4f6; }
.band--black .faq summary .sign::before, .band--black .faq summary .sign::after { background: #fff; }
.band--black .faq details[open] summary .sign::before, .band--black .faq details[open] summary .sign::after { background: var(--accent); }

/* Final CTA */
.finalcta-band { padding-block: clamp(5rem, 9vw, 8.5rem); }
.finalcta { text-align: center; max-width: 62rem; margin-inline: auto; }
.finalcta__h { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; max-width: 16ch; margin: 0 auto 1.25rem; }
.finalcta__sub { color: var(--ink); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); line-height: 1.55; max-width: 52ch; margin: 0 auto 2.5rem; }
.finalcta__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.finalcta__cta .btn { font-size: 0.9rem; padding: 1.1rem 1.9rem; }

/* Footer */
.site-footer { background: var(--black); color: #fff; padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
.site-footer .container { max-width: none; padding-inline: clamp(1.5rem, 5vw, 4.5rem); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.6fr; gap: clamp(2rem, 3vw, 3.5rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.footer__brand .logo { height: 34px; width: auto; margin-bottom: 1.1rem; }
.footer__brand p { color: var(--muted-on-dark); max-width: 30ch; font-size: 1rem; }
.footer__col h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; }
.footer__col li { margin-bottom: 0.55rem; }
.footer__col a { color: #e6e7e8; font-size: 0.98rem; transition: color 0.18s ease; }
.footer__col a:hover { color: var(--accent); }
/* Newsletter als Spalte */
.footer__news p { color: var(--muted-on-dark); font-size: 0.95rem; line-height: 1.55; margin-bottom: 1.5rem; max-width: 34ch; }
.newsletter { display: flex; align-items: flex-end; gap: 0.9rem; }
.newsletter__input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--muted-on-dark); color: #fff; padding: 0.55rem 0; font: inherit; border-radius: 0; transition: border-color 0.2s ease; }
.newsletter__input::placeholder { color: var(--muted-on-dark); }
.newsletter__input:focus { outline: none; border-bottom-color: var(--accent); }
.newsletter .btn { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.75rem; color: var(--muted-on-dark); font-size: 0.875rem; }
/* Logo (Inline-SVG) */
.logo { display: block; height: 28px; width: auto; }

/* Reveal */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* Skip link */
.skip { position: absolute; left: -999px; top: 0; background: var(--accent-black); color: #fff; padding: 0.7rem 1rem; z-index: 200; font-weight: 700; }
.skip:focus { left: 0; }

/* Responsive */
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .hero__code { order: 2; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .qa2 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .tech__grid { grid-template-columns: repeat(3, 1fr); }
  .sol-grid { grid-template-columns: repeat(2, 1fr); }
  .teaser, .person { grid-template-columns: 1fr; }
  .teaser--textfirst .teaser__media, .person__photo { order: -1; }
  .cards { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nav__link, .nav > .btn { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); }
  .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after { display: block; width: 20px; height: 2px; background: #fff; }
  .nav-toggle .bar { position: relative; transition: background 0.15s; }
  .nav-toggle .bar::before, .nav-toggle .bar::after { content: ""; position: absolute; left: 0; transition: transform 0.22s ease; }
  .nav-toggle .bar::before { top: -6px; } .nav-toggle .bar::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar::after { transform: translateY(-6px) rotate(-45deg); }
  .mobile-nav { display: none; position: fixed; inset: 76px 0 0 0; background: var(--black); z-index: 90; flex-direction: column; }
  .mobile-nav.is-open { display: flex; }
  .mnav__scroll { flex: 1; overflow-y: auto; padding: 0.5rem var(--gutter) 1rem; }
  .mnav__link, .mnav__top { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; font-size: 1.6rem; font-weight: 700; color: #fff; padding: 0.85rem 0; }
  .mnav__top { cursor: pointer; }
  .mnav__pm { position: relative; width: 22px; height: 22px; flex: none; }
  .mnav__pm::before, .mnav__pm::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--accent); }
  .mnav__pm::before { width: 20px; height: 3px; }
  .mnav__pm::after { width: 3px; height: 20px; transition: transform 0.2s ease; }
  .mnav__top[aria-expanded="true"] .mnav__pm::after { transform: translate(-50%,-50%) scaleY(0); }
  .mnav__sub { display: flex; flex-direction: column; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s ease-in-out, opacity 0.3s ease-in-out; }
  .mnav__sub.is-open { opacity: 1; padding-bottom: 0.7rem; }
  .mnav__sub a { font-size: 1.15rem; font-weight: 400; color: var(--muted-on-dark); padding: 0.55rem 0; }
  .mnav__sub a:hover { color: var(--accent); }
  .mnav__foot { padding: 1.25rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .mnav__cta { width: 100%; justify-content: center; color: var(--accent-black); font-size: 0.95rem; padding: 1.05rem 1.4rem; }
  .mnav__cta:hover { color: #fff; }
  .card__list { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 2rem; }
  .tech__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .sol-grid { grid-template-columns: 1fr; }
  .pains__grid { grid-template-columns: 1fr; }
  .site-header__util { display: none; }
}
@media (min-width: 641px) { .mobile-nav { display: none !important; } }

/* ---- Sub-page hero ---- */
.hero--page { min-height: min(56vh, 480px); }

/* ---- Contact form band (dark) ---- */
.contactform__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contactform__intro .lead { color: #fff; }
.contactform__direct { margin-top: 1.5rem; font-weight: 700; color: var(--muted-on-dark); }
.contactform__direct a { color: var(--accent); font-weight: 700; }

.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.field { display: grid; gap: 0.45rem; }
.field__label { font-weight: 700; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; border-radius: 0;
  transition: border-color 0.18s ease;
}
.field textarea { resize: vertical; min-height: 7rem; }

/* Dark variant: underline-only inputs like comspace */
.form--dark .field__label { color: #fff; }
.form--dark .field input, .form--dark .field select, .form--dark .field textarea {
  color: #fff; background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); padding: 0.7rem 0;
}
.form--dark .field select { color: #fff; }
.form--dark .field select option { color: var(--ink); }
.form--dark .field input:focus, .form--dark .field select:focus, .form--dark .field textarea:focus {
  outline: none; border-bottom-color: var(--accent);
}
.form--dark .field input::placeholder, .form--dark .field textarea::placeholder { color: var(--muted-on-dark); }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; font-size: 0.9rem; }
.form--dark .field--check { color: var(--muted-on-dark); }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--accent); }
.field--check a { color: var(--accent); font-weight: 700; }
.form__req { font-size: 0.85rem; color: var(--muted-on-dark); }
.form__actions { display: flex; justify-content: flex-end; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formnote { border-left: 3px solid var(--line-dark); padding: 1rem 1.2rem; margin-bottom: 1.5rem; display: grid; gap: 0.4rem; color: #fff; }
.formnote--ok { border-left-color: var(--accent); background: rgba(255,255,255,0.05); }
.formnote--err { border-left-color: #e06a5b; background: rgba(224,106,91,0.1); }
.formnote ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.formnote--err li { color: #f3b7ae; }

/* ---- Contact: Ansprechpartner ---- */
.contactme__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contactme__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.contactme__name { font-size: 1.6rem; font-weight: 700; }
.contactme__role { color: var(--muted); margin-bottom: 1.5rem; }
.contactme__list { display: grid; gap: 1.1rem; }
.contactme__list dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--ink); margin-bottom: 0.15rem; }
.contactme__list dd { color: var(--ink); }
.contactme__list a { font-weight: 700; color: var(--accent-black); }
.contactme__list a:hover { color: #7ba32f; }

@media (max-width: 820px) {
  .contactform__grid { grid-template-columns: 1fr; }
  .contactme__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ---- Legal pages ---- */
.legalhead { padding-block: clamp(2.5rem, 5vw, 4rem); }
.legalhead .hero__crumb { margin-bottom: 1.25rem; }
.legal-rte { max-width: 74ch; }
.legal-rte h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); margin-top: 2.5rem; margin-bottom: 0.8rem; }
.legal-rte h2:first-child { margin-top: 0; }
.legal-rte h3 { font-size: 1.15rem; margin-top: 1.6rem; margin-bottom: 0.5rem; }
.legal-rte p { margin-bottom: 1rem; }
.legal-rte ul { display: grid; gap: 0.4rem; margin: 0.5rem 0 1.2rem; padding-left: 1.2rem; list-style: disc; }
.legal-rte li { padding-left: 0.2rem; }
.legal-rte a { color: var(--accent-black); font-weight: 700; text-decoration: none; word-break: break-word; }
.legal-rte a:hover { color: #7ba32f; }

/* ---- Anfrage-Wizard (auf weissem Band) ---- */
.anfrage__wrap { max-width: 820px; margin-inline: auto; }
.anfrage__lead { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem); font-weight: 400; color: var(--ink); margin-bottom: 2.5rem; max-width: 54ch; }

.formnote--light { color: var(--ink); background: #fdf0ee; border-left-color: #c0392b; }
.formnote--light li { color: #922b21; }

.wizard { display: grid; gap: 2.25rem; }

/* Step tabs */
.wizard__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--line); }
.wizard__tab { position: relative; }
.wizard__tab-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; width: 100%; padding: 0.9rem 0.4rem 0; text-align: left; cursor: default; color: var(--ink); }
.wizard__tab::before { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.wizard__tab.is-done::before, .wizard__tab.is-active::before { transform: scaleX(1); }
.wizard__tab-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ink); }
.wizard__tab-label { font-size: 0.95rem; font-weight: 400; color: var(--ink); transition: font-weight 0.18s ease; }
.wizard__tab.is-active .wizard__tab-label, .wizard__tab.is-done .wizard__tab-label { font-weight: 700; }
.wizard__tab.is-reachable .wizard__tab-btn { cursor: pointer; }
.wizard__tab.is-done .wizard__tab-num::after { content: " ✓"; color: var(--accent-black); }

.wizard__step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1.4rem; }
.wizard__q { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.15; color: var(--ink); padding: 0; margin: 0 0 0.25rem; }
.wizard__hint { color: var(--ink); font-weight: 400; margin: -0.6rem 0 0; }
.wizard__sub { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); margin: 0.4rem 0 -0.7rem; }

/* Topic photo cards (comspace-Stil) */
.wizard__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.topic-card { position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 2; overflow: hidden; background: #101216 var(--img, none) center/cover no-repeat; cursor: pointer; transition: transform 0.4s ease-in-out, filter 0.35s ease; }
.topic-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,13,0.25) 0%, rgba(10,11,13,0.45) 55%, rgba(10,11,13,0.9) 100%); transition: background 0.35s ease; }
.topic-card:hover { transform: scale(1.03); z-index: 2; }
.topic-card input { position: absolute; opacity: 0; pointer-events: none; }
.topic-card__body { position: relative; padding: clamp(1.2rem, 2vw, 1.6rem); text-shadow: 0 2px 14px rgba(0,0,0,0.9); }
.topic-card__title { display: block; color: #fff; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.topic-card__title::after { content: ""; display: block; width: 0; height: 3px; background: var(--accent); margin-top: 0.6rem; transition: width 0.4s ease; }
.topic-card__desc { display: block; color: #e7e9ea; font-size: 0.95rem; margin-top: 0.75rem; }
.topic-card__check { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-black); font-weight: 700; opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.2s ease; }
.topic-card:hover .topic-card__title::after { width: 2.5rem; }
.topic-card:has(input:checked) { outline: 3px solid var(--accent); outline-offset: -3px; }
.topic-card:has(input:checked) .topic-card__title::after { width: 2.5rem; }
.topic-card:has(input:checked) .topic-card__check { opacity: 1; transform: none; }
.topic-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Pills (timeline / budget) */
.wizard__pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wizard__pill { position: relative; cursor: pointer; }
.wizard__pill input { position: absolute; opacity: 0; pointer-events: none; }
.wizard__pill span { display: inline-block; padding: 0.55rem 1.1rem; border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 0.95rem; transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.wizard__pill:hover span { border-color: var(--accent-black); }
.wizard__pill:has(input:checked) span { border-color: var(--accent-black); background: var(--accent-black); color: #fff; }
.wizard__pill:has(input:focus-visible) span { outline: 2px solid var(--accent-black); outline-offset: 2px; }

/* Light form fields */
.wizard .field__label { color: var(--ink); }
.wizard .field input, .wizard .field textarea, .wizard .field select {
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 0.8rem 0.9rem;
}
.wizard .field textarea { resize: vertical; min-height: 8rem; }
.wizard .field input:focus, .wizard .field textarea:focus, .wizard .field select:focus {
  outline: none; border-color: var(--accent-black); box-shadow: inset 0 -2px 0 var(--accent);
}
.wizard .field--check { color: var(--ink); margin-top: 1.5rem; }
.wizard .field--check a { color: var(--accent-black); font-weight: 700; }
.wizard .form__req { color: var(--ink); }

/* Nav */
.wizard__nav { display: flex; align-items: center; gap: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line); margin-top: 0.5rem; }
.wizard__next, .wizard__send { margin-left: auto; }

/* No-JS: show all steps stacked */
.wizard:not(.is-enhanced) .wizard__step { margin-bottom: 2.5rem; }

/* Success */
.anfrage__done { text-align: center; max-width: 46ch; margin-inline: auto; display: grid; gap: 1rem; justify-items: center; padding-block: 2rem; color: var(--ink); }
.anfrage__check { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-black); font-size: 2rem; font-weight: 700; }
.anfrage__done p { color: var(--ink); }

@media (max-width: 560px) {
  .wizard__cards { grid-template-columns: 1fr; }
}

/* ---- Über mich ---- */
.about__role { font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); font-weight: 400; }

.about-intro__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about-intro__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-intro__text { display: grid; gap: 1.2rem; font-size: 1.2rem; line-height: 1.65; color: var(--ink); }
.about-facts { margin-top: 1.75rem; display: grid; gap: 1.1rem; }
.about-facts__row { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; }
.about-facts dt { color: var(--ink); font-weight: 400; }
.about-facts dd { color: var(--ink); font-weight: 700; }
@media (max-width: 560px) { .about-facts__row { grid-template-columns: 1fr; gap: 0.1rem; } }
@media (max-width: 820px) { .about-intro__grid { grid-template-columns: 1fr; } }

/* Split-Panels (Bild + Textpanel, alternierend, comspace-Stil) */
.split { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; }
@media (min-width: 821px) { .split { min-height: 16rem; } }
.split--rev { grid-template-columns: 0.8fr 1.2fr; }
.split--rev .split__media { grid-column: 1; grid-row: 1; }
.split--rev .split__panel { grid-column: 2; grid-row: 1; }
.split__media { align-self: stretch; }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__panel { position: relative; align-self: stretch; display: flex; align-items: center; padding-block: clamp(1.25rem, 2vw, 2rem); }
.split__panel--dark { background: var(--black); color: #fff; }
.split__panel--paper { background: var(--paper); color: var(--ink); }
.split__inner { max-width: 52rem; margin-inline: auto; padding-inline: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: 0.55rem; }
.split__h { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.25rem); line-height: 1.06; font-weight: 700; margin-bottom: 0.15rem; hyphens: auto; overflow-wrap: break-word; }
.split__panel p { font-size: 1.05rem; line-height: 1.6; }
.split__panel--dark p { color: #f2f4f6; }
.split__kicker { font-weight: 400; font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.4rem; }
.split__panel--dark .split__kicker { color: var(--muted-on-dark); }
.split__panel--paper .split__kicker { color: var(--muted); }
.split__tag { font-weight: 700; font-size: 0.9rem; }
.split__panel--dark .split__tag { color: #fff; }
.split__panel--paper .split__tag { color: var(--ink); }
.split__link { justify-self: start; margin-top: 0.4rem; }
.split__btn { justify-self: start; margin-top: 1.1rem; }
.split__badge { position: absolute; right: clamp(1.5rem, 4vw, 3.5rem); bottom: clamp(1.25rem, 2vw, 2rem); width: clamp(120px, 14vw, 160px); height: auto; }
@media (max-width: 820px) { .split__badge { position: static; margin-top: 1rem; width: 150px; } }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1 !important; aspect-ratio: 16 / 10; }
  .split--rev .split__media, .split--rev .split__panel { grid-column: 1; grid-row: auto; }
}

/* Timeline (zentrierter Zeitstrahl, Einträge links/rechts) */
.tl { position: relative; max-width: 60rem; margin-inline: auto; list-style: none; padding: 0; }
.tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line-dark); transform: translateX(-50%); }
.tl__item { position: relative; width: 50%; box-sizing: border-box; padding: 0 2.75rem; margin-bottom: 2.75rem; }
.tl__item:last-child { margin-bottom: 0; }
.tl__item:nth-child(odd)  { left: 0; text-align: right; }
.tl__item:nth-child(even) { left: 50%; text-align: left; }
.tl__dot { position: absolute; top: 0.35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 3px solid var(--black); box-sizing: content-box; }
.tl__item:nth-child(odd) .tl__dot  { right: -8px; }
.tl__item:nth-child(even) .tl__dot { left: -8px; }
.tl__period { display: inline-block; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 0.4rem; }
.tl__h { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.tl__card p { color: #f2f4f6; font-size: 0.98rem; line-height: 1.55; }
@media (max-width: 760px) {
  .tl::before { left: 7px; transform: none; }
  .tl__item { width: 100%; left: 0 !important; text-align: left !important; padding: 0 0 0 2.5rem; margin-bottom: 2rem; }
  .tl__dot { left: 0 !important; right: auto !important; }
}

/* Werte */
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
.value-card { border: 1px solid var(--line-dark); padding: clamp(1.5rem, 2.5vw, 2rem); background: rgba(255,255,255,0.02); }
.value-card__h { position: relative; font-size: 1.2rem; font-weight: 700; color: #fff; padding-top: 0.9rem; margin-bottom: 0.6rem; border-top: 2px solid var(--accent); }
.value-card p { color: #f2f4f6; }
@media (max-width: 620px) { .values-grid { grid-template-columns: 1fr; } }

/* Foto-Strip */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--black); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* Zahlen / Kurz gesagt */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.stat { display: grid; gap: 0.4rem; text-align: center; justify-items: center; }
.stat__icon { width: 4.5rem; height: 4.5rem; background: var(--ink); -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; margin-bottom: 0.75rem; }
.band--black .stat__icon { background: #fff; }
.stat__v { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.stat__l { color: var(--ink); font-size: 0.95rem; max-width: 22ch; margin-inline: auto; }
.band--black .stat__v { color: #fff; }
.band--black .stat__l { color: #f2f4f6; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* CTA zweispaltig (About) */
.ctablock { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ctablock__sub { font-size: 1.2rem; color: var(--ink); margin: 1rem 0 1.75rem; max-width: 42ch; }
.ctablock__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.ctacard { background: var(--black); color: #fff; padding: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: 1.5rem; }
.ctacard__icon { width: 3.25rem; height: 3.25rem; background: #fff; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.ctacard__mail { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 700; color: #fff; justify-self: start; }
.ctacard__mail:hover { color: var(--accent); }
.ctacard__list { display: grid; gap: 1rem; }
.ctacard__list dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: #fff; margin-bottom: 0.15rem; }
.ctacard__list dd { color: #f2f4f6; }
@media (max-width: 820px) { .ctablock { grid-template-columns: 1fr; } }

/* Projekt-Karten */
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.proj-card { display: flex; flex-direction: column; }
.proj-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.proj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.proj-card__media:hover img { transform: scale(1.05); }
.proj-card__body { padding-top: 1.25rem; display: grid; gap: 0.5rem; }
.proj-card__tag { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.proj-card__title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 700; }
.proj-card__desc { color: var(--ink); }
.proj-card__link { margin-top: 0.4rem; justify-self: start; }
@media (max-width: 700px) { .proj-grid { grid-template-columns: 1fr; } }

/* Zweispaltiger Text-Block (Heading links, Text rechts) */
.about-block { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.about-block__text { display: grid; gap: 1.15rem; font-size: 1.1rem; color: var(--ink); }
.band--black .about-block__text p { color: #f2f4f6; }
@media (max-width: 820px) { .about-block { grid-template-columns: 1fr; } }

/* Intro-Block (Heading oben, Text darunter, einspaltig) */
.intro-block__h { margin-bottom: 1.5rem; }
.intro-block__text { display: grid; gap: 1.15rem; max-width: 78rem; font-size: 1.1rem; color: var(--ink); }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.blog-card { border-top: 2px solid var(--ink); }
.blog-card__link { display: grid; gap: 0.6rem; padding-top: 1.25rem; }
.blog-card__date { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.blog-card__title { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); font-weight: 700; line-height: 1.25; }
.blog-card__desc { color: var(--ink); }
.blog-card__more { justify-self: start; margin-top: 0.3rem; }
.blog-card__link:hover .blog-card__title { color: #7ba32f; }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }

.post__date { color: #fff; font-weight: 700; margin-top: 1rem; }
.post__back { margin-top: 2.5rem; }

/* Blog-Mosaik */
.blog-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-auto-flow: dense; }
.mtile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; overflow: hidden; background: #101216; color: #fff; }
.mtile--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.mtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.mtile:hover .mtile__img { transform: scale(1.05); }
.mtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,13,0.15) 0%, rgba(10,11,13,0.35) 45%, rgba(10,11,13,0.9) 100%); transition: background 0.35s ease; }
.mtile:hover::after { background: linear-gradient(180deg, rgba(10,11,13,0.2) 0%, rgba(10,11,13,0.5) 45%, rgba(10,11,13,0.94) 100%); }
.mtile__inner { position: relative; z-index: 1; display: grid; gap: 0.4rem; padding: clamp(1.1rem, 2vw, 1.6rem); text-shadow: 0 2px 14px rgba(0,0,0,0.9); }
.mtile__date { font-size: 0.8rem; font-weight: 700; color: #fff; }
.mtile__title { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); font-weight: 700; line-height: 1.2; }
.mtile__title::after { content: ""; display: block; width: 0; height: 3px; background: var(--accent); margin-top: 0.6rem; transition: width 0.4s ease; }
.mtile:hover .mtile__title::after { width: 2.5rem; }
@media (max-width: 900px) { .blog-mosaic { grid-template-columns: repeat(2, 1fr); } .mtile--wide { grid-column: span 2; } }
@media (max-width: 560px) { .blog-mosaic { grid-template-columns: 1fr; } .mtile--wide { grid-column: span 1; } }

/* Service-Detail */
.svc-lead { max-width: 60rem; }
.svc-lead__icon { display: block; width: 4rem; height: 4rem; margin-bottom: 1.25rem; background: var(--accent-black); -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.svc-lead__tag { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; line-height: 1.25; color: var(--ink); margin-bottom: 1rem; }
.svc-lead__text { font-size: 1.15rem; color: var(--ink); max-width: 62ch; margin-bottom: 1.75rem; }
.svc-lead__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.svc-feats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem); }
.svc-feat { display: grid; gap: 0.5rem; }
.svc-feat__n { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; color: #fff; }
.svc-feat__h { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); font-weight: 700; color: #fff; }
.svc-feat__t { color: #f2f4f6; }
@media (max-width: 700px) { .svc-feats { grid-template-columns: 1fr; } }

/* Referenzen-Teaser (Home) */
.proj-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ref-more { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .proj-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .proj-grid--3 { grid-template-columns: 1fr; } }

/* Ergebnis-Zeile auf Referenz-Karten */
.proj-card__result { display: inline-block; align-self: start; font-weight: 700; font-size: 0.9rem; color: var(--accent-black); background: var(--accent); padding: 0.3rem 0.7rem; margin-bottom: 0.2rem; }

/* Service: Use-Cases */
.usecases { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; max-width: 64rem; }
.usecase { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: 1.05rem; color: var(--ink); }
.usecase__mark { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: var(--accent); color: var(--accent-black); font-weight: 700; font-size: 0.85rem; flex: none; }
@media (max-width: 700px) { .usecases { grid-template-columns: 1fr; } }

/* Service: Referenz-Box */
.refbox { display: grid; grid-template-columns: 0.9fr 1.1fr; background: var(--paper); max-width: 60rem; margin: 0 auto; }
.refbox + .refbox { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.refbox__media { overflow: hidden; }
.refbox__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.5s ease; }
.refbox:hover .refbox__media img { transform: scale(1.05); }
.refbox__body { display: grid; gap: 0.6rem; align-content: center; padding: clamp(1.5rem, 3vw, 2.25rem); }
.refbox__title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); font-weight: 700; color: var(--ink); }
.refbox__desc { color: var(--ink); }
.refbox__link { margin-top: 0.3rem; }
@media (max-width: 620px) { .refbox { grid-template-columns: 1fr; } }

/* Ablauf-Schritte */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step { display: grid; gap: 0.5rem; align-content: start; }
.step__n { font-size: 1.4rem; font-weight: 700; color: var(--accent-black); }
.step__h { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0; }
.step__t { color: var(--muted); margin: 0; }
.band--black .step__n, .band--black .step__h { color: #fff; }
.band--black .step__t { color: var(--muted-on-dark); }
.band--black .refbox .tlink { color: var(--ink); }

/* Service-Intro (weiss unter Hero) */
.svc-intro__h { margin-bottom: 1.5rem; max-width: 42ch; }
.svc-intro__text { display: grid; gap: 1.2rem; font-size: 1.2rem; line-height: 1.65; color: var(--ink); max-width: 78rem; margin-bottom: 2rem; }
.svc-intro__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Hero-Kicker (über dem Titel) */
.hero__kicker { color: #fff; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); font-weight: 400; margin-bottom: 0.6rem; }

/* Breadcrumb (jedes Segment einzeln unterstrichen) */
.crumb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); font-size: 0.9rem; font-weight: 700; }
.crumb__seg { color: #fff; border-bottom: 2px solid var(--accent); padding-bottom: 0.15rem; }
.crumb__seg--current { color: #fff; }
.crumb__sep { color: #fff; border: 0; }

/* Service-Feature Icon (schwarze Section) */
.svc-feat__icon { width: 3rem; height: 3rem; margin-bottom: 0.25rem; background: #fff; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }

/* Home-Hero: Mühle Enger, leicht verblurrt + entsättigt, dunkler Overlay für Lesbarkeit */
.hero--home .hero__bg img { filter: saturate(1.15) sepia(0.14) brightness(1.03); object-position: center bottom; }
.hero--home .hero__bg::after { background: linear-gradient(90deg, rgba(20,12,0,0.66) 0%, rgba(20,12,0,0.42) 45%, rgba(20,12,0,0.2) 72%, rgba(20,12,0,0.35) 100%); }

/* Home: Websites-Section */
.webs-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.webs-grid__list { grid-template-columns: 1fr; max-width: none; gap: 1.1rem; }
.webs-grid__ref { max-width: none; }
@media (max-width: 820px) { .webs-grid { grid-template-columns: 1fr; } }

/* Pfeile in Buttons/Links global entfernen (Slider-Pfeile sind .carousel__btn, bleiben) */
.arrow { display: none !important; }

/* Service: schwarze Erklär-Section */
.svc-explain { max-width: 62rem; }
.svc-explain__head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.svc-explain__head .h2 { color: var(--ink); max-width: none; }
.band--black .svc-explain__head .h2 { color: #fff; }
.svc-explain__text { display: grid; gap: 1.2rem; font-size: 1.15rem; line-height: 1.65; }
.svc-explain__text p { color: var(--ink); }
.band--black .svc-explain__text p { color: #f2f4f6; }
.svc-explain__cta { justify-self: start; margin-top: 0.75rem; }

/* Split-Text zur Bildseite hin bündig (comspace): Bild rechts -> Text rechtsbündig, Bild links -> linksbündig */
.split--aligned { grid-template-columns: 1fr 1fr; }
.split--aligned.split--rev { grid-template-columns: 1fr 1fr; }
.split--aligned .split__inner { text-align: left; max-width: 34rem; }
.split--aligned:not(.split--rev) .split__inner { margin-left: auto; margin-right: 0; }
.split--aligned.split--rev .split__inner { margin-right: auto; margin-left: 0; }
@media (max-width: 820px) {
  .split--aligned, .split--aligned.split--rev { grid-template-columns: 1fr; }
  .split--aligned .split__inner { text-align: left; margin: 0; max-width: none; }
}

/* Newsletter: Status + Hinweis unter dem Formular */
.newsletter__msg { margin: 1rem 0 0; color: #fff; font-size: 0.95rem; line-height: 1.5; }
.newsletter__note { margin: 0.85rem 0 0; color: var(--muted-on-dark); font-size: 0.8rem; line-height: 1.5; }
.newsletter__note a { color: #fff; font-weight: 700; text-decoration: none; }
.newsletter__note a:hover { color: var(--accent); }

/* Projekt-Case-Study: Eckdaten, Kennzahlen, Technik, Screenshots */
.pj-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid var(--line); }
.pj-facts > div { padding: 1.25rem 1.25rem 0 0; }
.pj-facts dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.pj-facts dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.pj-stats { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.pj-stats li { display: grid; gap: 0.4rem; padding-top: 1.25rem; border-top: 3px solid var(--accent); }
.pj-stats__v { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; line-height: 1; color: #fff; }
.pj-stats__l { color: var(--muted-on-dark); font-size: 1rem; line-height: 1.5; }
.pj-tech__h { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-dark); }
.pj-tech { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }
.pj-tech li { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: #fff; }
.pj-tech .tech-card__logo { width: 56px; height: 56px; border-radius: 12px; margin: 0; }
.pj-tech .tech-card__logo img { width: 34px; height: 34px; }
.pj-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.split__media--contain { background: var(--paper-2); display: flex; align-items: center; justify-content: center; padding: clamp(1.25rem, 3vw, 2.5rem); }
.split__media--contain img { width: 100%; height: 100%; max-height: 34rem; object-fit: contain; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
@media (max-width: 820px) { .pj-facts { grid-template-columns: repeat(2, 1fr); } .split__media--contain { aspect-ratio: auto !important; } .split__media--contain img { max-height: 28rem; height: auto; } }
@media (max-width: 480px) { .pj-facts { grid-template-columns: 1fr; } }

/* Themen-Uebersicht: 4 Bildkarten im Raster statt Slider */
.themen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.themen-grid .svc-card { flex: none; }
@media (max-width: 1100px) { .themen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .themen-grid { grid-template-columns: 1fr; } .themen-grid .svc-card { aspect-ratio: 4 / 3; } }

/* Startseite: Hero-Buttons, Referenzen auf Schwarz, Blog-Vorschau */
.hero__link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.hero__link:hover { color: var(--accent); }
.home-refs .proj-card__title { color: #fff; }
.home-refs .proj-card__desc { color: #f2f4f6; }
.home-refs .proj-card__desc strong { color: #fff; }
.home-refs .tlink { color: #fff; }
.home-refs .tlink:hover { color: var(--accent); }
.home-refs .section-head p { color: #f2f4f6; }
.home-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 900px) { .home-blog { grid-template-columns: 1fr; } }

/* Nphor-Linienicons als CSS-Maske: faerben sich mit der Textfarbe (weiss auf Schwarz, schwarz auf Weiss) */
.ico { display: inline-block; width: 48px; height: 48px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; flex: none; }
.ico--lg { width: 72px; height: 72px; margin-bottom: 1.25rem; }
.step__ico { width: 52px; height: 52px; margin-bottom: 0.5rem; color: var(--ink); }
.band--black .step__ico { color: #fff; }
.split__ico { width: 52px; height: 52px; margin-bottom: 0.25rem; }
.svc-card__ico { width: 44px; height: 44px; color: #fff; margin-bottom: 0.9rem; }

/* Lightbox (natives <dialog>) fuer [data-zoom]-Bilder */
.zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.split__media--contain .zoom { display: flex; align-items: center; justify-content: center; }
.zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.lightbox { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; background: transparent; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.95); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__fig { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.lightbox__img { max-width: 92vw; max-height: 84dvh; width: auto; height: auto; object-fit: contain; background: #fff; }
.lightbox__cap { color: #fff; font-weight: 700; font-size: 1rem; text-align: center; }
.lightbox__btn { position: fixed; width: 48px; height: 48px; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background 0.2s ease; }
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--accent); color: #000; outline: none; }
.lightbox__btn::before { display: block; font-size: 1.6rem; line-height: 48px; text-align: center; }
.lightbox__close { top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; }
.lightbox__close::before { content: "\00D7"; font-size: 2rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__prev::before { content: "\2190"; }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next::before { content: "\2192"; }
.lightbox--single .lightbox__prev, .lightbox--single .lightbox__next { display: none; }
@media (max-width: 600px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; transform: none; } }

/* <picture> aus dem WebP-Filter: layoutneutral, das <img> bleibt direktes Kind im Layout */
picture { display: contents; }