/* ==========================================================================
   Romic Consulting — Relaunch Variante A: "Bright Editorial 2026"
   Warmes Papier, riesige Display-Typo, asymmetrische Grids mit Überlappung,
   Terracotta als einziger Akzent, eine warme Graufamilie.
   Default = HELL. Dark nur über den manuellen Toggle (data-theme="dark").
   Radius-Lock: 3px. Motion: nur transform/opacity, reduced-motion respektiert.
   ========================================================================== */

/* ---------- Tokens (Default: warmes, helles Papier) ---------- */
:root {
  color-scheme: light;

  /* Warme Neutrale, EINE Graufamilie (Hue ~80, leicht gelblich-warm) */
  --paper:        oklch(97.8% 0.008 85);
  --paper-2:      oklch(95.6% 0.013 82);
  --surface:      oklch(99.4% 0.004 90);
  --ink:          oklch(23%   0.014 55);
  --ink-2:        oklch(43%   0.014 55);
  --ink-3:        oklch(52%   0.013 60);
  --line:         oklch(88%   0.014 78);
  --line-strong:  oklch(78%   0.018 72);

  /* Ein einziger Akzent: Terracotta, seitenweit gesperrt */
  --accent:       oklch(54.5% 0.150 39);
  --accent-deep:  oklch(46%   0.140 38);
  --accent-tint:  oklch(94.6% 0.030 48);
  --on-accent:    oklch(99%   0.005 60);

  --radius: 3px;
  --nav-h: 68px;
  --maxw: 1240px;

  --font-display: "Cabinet Grotesk", "Switzer", system-ui, sans-serif;
  --font-body:    "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", "Consolas", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Schatten warm getönt statt neutral-schwarz */
  --shadow-sm: 0 1px 2px oklch(30% 0.02 55 / 0.07);
  --shadow-md: 0 14px 34px -18px oklch(30% 0.03 55 / 0.38);
  --shadow-lg: 0 34px 74px -34px oklch(28% 0.035 50 / 0.5);

  --img-filter: grayscale(1) contrast(1.06) brightness(1.03) sepia(.14);
  --grain-opacity: .05;
  --grain-blend: multiply;

  /* Fehler-Rot als Token, damit der dunkle Finale-Block eine helle Variante bekommt */
  --err: oklch(52% 0.19 25);
  --err-border: oklch(55% 0.19 25);
}

/* Dark NUR über den Toggle, nie automatisch — die Seite soll hell wirken. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:       oklch(18%  0.012 60);
  --paper-2:     oklch(21.5% 0.013 60);
  --surface:     oklch(24%  0.014 60);
  --ink:         oklch(95.5% 0.008 80);
  --ink-2:       oklch(75%  0.012 75);
  --ink-3:       oklch(66%  0.013 72);
  --line:        oklch(31%  0.014 62);
  --line-strong: oklch(41%  0.016 64);

  --accent:      oklch(70%  0.145 44);
  --accent-deep: oklch(78%  0.130 48);
  --accent-tint: oklch(28%  0.048 42);
  --on-accent:   oklch(17%  0.020 40);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 14px 34px -18px oklch(0% 0 0 / 0.7);
  --shadow-lg: 0 34px 74px -34px oklch(0% 0 0 / 0.8);

  --img-filter: grayscale(1) contrast(1.1) brightness(0.78) sepia(.1);
  --grain-opacity: .07;
  --grain-blend: screen;

  --err: oklch(72% 0.16 25);
  --err-border: oklch(64% 0.17 25);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100dvh;
}
/* height:auto ist nötig, damit CSS aspect-ratio die width/height-Attribute schlägt. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Subtiles Grain-Overlay gegen digitale Flachheit (fixed, klickfrei) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: .7rem 1.1rem; border-radius: var(--radius); font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.75rem); }

/* ---------- Typo: riesige Editorial-Displays ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.035em; line-height: 0.98;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 1.1rem + 7.7vw, 8.75rem); letter-spacing: -0.045em; line-height: 0.93; }
h2 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1.0; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.014em; line-height: 1.26; }
p  { color: var(--ink-2); max-width: 62ch; }
.lede { font-size: clamp(1.05rem, .99rem + .32vw, 1.28rem); color: var(--ink-2); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .18em;
  /* Kontrast-Fix: --accent (54.5% L) verfehlt AA bei .72rem auf Papier,
     --accent-deep (46% L) erreicht ~4.9:1. Im Dark-Theme ist --accent-deep heller. */
  color: var(--accent-deep); font-weight: 500;
}

/* ---------- Buttons: Scale/Translate + Pfeil-Bewegung ---------- */
.btn {
  --fill: var(--accent);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55rem;
  white-space: nowrap;
  padding: .84rem 1.45rem;
  border-radius: var(--radius);
  border: 1px solid var(--fill);
  background: var(--fill);
  color: var(--on-accent);
  font-weight: 600; font-size: .94rem; letter-spacing: -0.006em;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .28s var(--ease), border-color .28s, color .28s;
  box-shadow: var(--shadow-sm);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent-deep);
  transform: scaleX(0); transform-origin: var(--origin, left);
  transition: transform .42s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn .ph { font-size: 1.05em; transition: transform .3s var(--ease); }
.btn:hover .ph-arrow-up-right { transform: translate(3px, -3px); }
.btn:hover .ph-arrow-down { transform: translateY(3px); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--paper); border-color: var(--ink); }

.btn--big { font-size: 1.05rem; padding: 1.05rem 1.9rem; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: color-mix(in oklab, var(--paper) 85%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav[data-stuck="true"] { border-bottom-color: var(--line); }
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--paper); backdrop-filter: none; } }

.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.brand { display: inline-flex; align-items: baseline; gap: .12rem; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; }
.brand i { color: var(--accent); font-style: normal; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__links a {
  position: relative; font-size: .92rem; font-weight: 500; color: var(--ink-2);
  transition: color .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
/* Aktiver Abschnitt: Unterstrich bleibt stehen */
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { display: flex; align-items: center; gap: .7rem; }
.themebtn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; cursor: pointer; color: var(--ink-2);
  transition: border-color .2s, color .2s;
}
.themebtn:hover { border-color: var(--line-strong); color: var(--ink); }
.themebtn .ph { font-size: 1.1rem; }

/* Icon-Umschaltung: Default hell → Mond anbieten; im Dark-Theme Sonne anbieten */
.themebtn .ph-sun { display: none; }
.themebtn .ph-moon { display: block; }
:root[data-theme="dark"] .themebtn .ph-sun { display: block; }
:root[data-theme="dark"] .themebtn .ph-moon { display: none; }

.burger { display: none; }

/* Scroll-Progress-Linie unter der Nav (Graft aus Variante C):
   CSS scroll-driven wenn der Browser es kann (:root.sda), sonst JS-Fallback. */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.progress__bar {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
@supports (animation-timeline: scroll()) {
  :root.sda .progress__bar {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@media (max-width: 900px) {
  /* Absolut unter der Leiste statt fixed: .nav traegt backdrop-filter und ist damit
     Containing Block fuer fixed-Kinder. visibility haelt das geschlossene Panel
     ausserdem klick- und fokusfrei. */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .5rem clamp(1.15rem, 4vw, 2.75rem) 1.4rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
    box-shadow: var(--shadow-lg);
  }
  .nav__links[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__links a { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav__links a::after { display: none; }
  .nav .btn--nav { display: none; }
  .burger {
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: transparent; cursor: pointer; color: var(--ink-2);
  }
  .burger .ph { font-size: 1.25rem; }
  .burger, .themebtn { width: 44px; height: 44px; }
}

/* ---------- Hero: Editorial mit Überlappung + Parallax ---------- */
.hero { padding-block: clamp(2rem, 4.5vw, 4.5rem) clamp(3rem, 7vw, 6.5rem); position: relative; }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 4.5vw, 4rem); align-items: start;
}
.hero__copy { padding-top: clamp(.5rem, 2vw, 2.5rem); min-width: 0; }
.hero__copy .eyebrow { margin-bottom: 1.4rem; }
/* Headline darf bewusst in die Bildspalte hineinlaufen (editoriale Überlappung).
   max-width:100% sichert 901–1100px ab: wird die Spalte schmaler als die laengste
   Zeile, bricht die Headline um statt zu clippen. */
/* max-width erlaubt begrenzten, bewussten Overlap in die Bildspalte (Editorial-Stil),
   bricht aber um, bevor die Headline den Viewport verlaesst. */
.hero h1 { width: max-content; max-width: calc(100% + clamp(2rem, 6vw, 6.5rem)); position: relative; z-index: 2; }
.hero h1 .accentword { color: var(--accent); font-style: normal; }
.hero__sub { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.hero__sub > * + * { margin-top: 1.4rem; }
.hero .lede { max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem;
  font-size: .84rem; color: var(--ink-3); max-width: none;
}
.hero__trust span { display: inline-flex; align-items: center; gap: .4rem; }
.hero__trust .ph { color: var(--accent); font-size: .95rem; }

/* Bild mit verschobenem Terracotta-Rahmen dahinter + überlappender Chip-Karte */
.hero__media { position: relative; margin-top: clamp(1rem, 3vw, 3rem); }
.hero__frame {
  position: absolute; inset: 0;
  transform: translate(clamp(.7rem, 1.6vw, 1.4rem), clamp(.7rem, 1.6vw, 1.4rem));
  border: 1px solid var(--accent); border-radius: var(--radius);
  opacity: .55;
}
.parallax {
  position: relative; overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 6;
  max-height: calc(100dvh - var(--nav-h) - 7rem);
}
.parallax img {
  width: 100%; height: 116%; object-fit: cover;
  filter: var(--img-filter);
  will-change: transform;
}
.parallax::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(200deg, transparent 45%, color-mix(in oklab, var(--accent) 26%, transparent));
  mix-blend-mode: multiply; pointer-events: none;
}
:root[data-theme="dark"] .parallax::after { mix-blend-mode: screen; opacity: .55; }

.hero__chip {
  position: absolute; left: clamp(-1.6rem, -2vw, -1rem); bottom: 1.6rem;
  display: flex; align-items: center; gap: .7rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: .75rem 1rem; font-size: .82rem; color: var(--ink-2);
}
.hero__chip .ph { font-size: 1.25rem; color: var(--accent); }
.hero__chip b { display: block; color: var(--ink); font-weight: 600; font-size: .86rem; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero h1 { width: auto; max-width: 100%; }
  .hero__media { margin-top: 0; }
  .parallax { aspect-ratio: 16 / 10; }
  .parallax img { height: 120%; }
  .hero__chip { left: 1rem; }
}

/* Zeilen-Maskeneffekt beim Laden */
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: block; will-change: transform; }

/* ---------- Logo-Wall: Marquee ---------- */
.proof { padding-block: clamp(2rem, 4vw, 3rem); border-block: 1px solid var(--line); background: var(--paper-2); overflow: hidden; }
.proof__label { font-size: .82rem; color: var(--ink-3); margin-bottom: 1.4rem; }

.marquee {
  overflow: hidden;
  /* weiche Kanten links/rechts */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 36s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: clamp(2.25rem, 5vw, 4rem); padding-right: clamp(2.25rem, 5vw, 4rem); }
.marquee__item {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .9rem; font-weight: 500; color: var(--ink-3);
  white-space: nowrap;
  opacity: .75; transition: opacity .3s var(--ease);
}
.marquee__item:hover { opacity: 1; }
.marquee__item img { height: 28px; width: auto; }
/* Wortmarken ohne Icon (Simple Icons hat keine Slugs fuer Billbee/Plenty/Mirakl) */
.marquee__item--word { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Capabilities-Marquee: große Outline-Begriffe unter dem Hero ---------- */
.capsmarquee { padding-block: clamp(1.1rem, 2.2vw, 1.8rem); border-top: 1px solid var(--line); }
.capsmarquee .marquee__track { animation-duration: 46s; }
.capsmarquee .marquee__group { gap: clamp(1.4rem, 3vw, 2.5rem); padding-right: clamp(1.4rem, 3vw, 2.5rem); }
.capsmarquee__item, .capsmarquee__dot {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.6rem);
  letter-spacing: -.03em; line-height: 1.15; white-space: nowrap;
}
.capsmarquee__item { color: color-mix(in oklab, var(--ink-3) 32%, transparent); }
@supports (-webkit-text-stroke: 1px black) {
  .capsmarquee__item { color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--ink-3) 62%, transparent); }
}
.capsmarquee__dot { color: var(--accent); }

/* ---------- Section-Rahmen ---------- */
.section { padding-block: clamp(4rem, 9vw, 8.5rem); }
/* Anker-Ziele: Sticky-Nav-Hoehe + Puffer, damit Ueberschriften nicht unter der Leiste landen */
#top, #leistungen, #arbeitsweise, #projekte, #kontakt { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* isolation: eigener Stacking-Context, damit die negative z-index-Ziffer VOR dem
   Sektions-Hintergrund, aber HINTER dem Head-Inhalt gemalt wird. */
.section__head { position: relative; isolation: isolate; max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head > * + * { margin-top: 1rem; }
.section__head .eyebrow { margin-bottom: .3rem; }

/* Große Outline-Sektionsziffern (01–06) hinter den Überschriften, Agentur-Stil */
.secno {
  position: absolute; z-index: -1; top: 0; left: -0.05em;
  transform: translateY(-42%);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(5.5rem, 3.5rem + 9vw, 11rem);
  line-height: 1; letter-spacing: -.04em;
  color: color-mix(in oklab, var(--ink-3) 16%, transparent);
  pointer-events: none; user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .secno { color: transparent; -webkit-text-stroke: 1.25px color-mix(in oklab, var(--ink-3) 42%, transparent); }
}

/* ---------- Leistungen: asymmetrischer Editorial-Grid (12 Spalten, Versatz) ---------- */
.editgrid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
.card {
  position: relative; isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: flex; flex-direction: column; gap: .65rem;
  min-height: 210px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Spotlight-Border: 1px-Maskenring, der dem Cursor folgt */
.card::before {
  content: ""; position: absolute; inset: -1px; z-index: 1;
  border-radius: var(--radius);
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
              var(--accent), transparent 65%);
  -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, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
/* plus ein hauchzarter Flächen-Glow */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radius); opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
  transition: opacity .35s var(--ease);
}
.card:hover::before, .card:hover::after { opacity: 1; }

.card__no {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  color: var(--ink-3);
}
.card .ph { font-size: 1.7rem; color: var(--accent); }
.card p { font-size: .93rem; }

/* Spannen + Versatz: bewusst kein gleichmäßiges Raster */
.card--a { grid-column: 1 / span 7; }
.card--b { grid-column: 8 / span 5; margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.card--c { grid-column: 1 / span 5; margin-top: calc(-1 * clamp(.5rem, 2vw, 2rem)); }
.card--d { grid-column: 6 / span 7; }
.card--e { grid-column: 1 / span 4; }
.card--f { grid-column: 5 / span 8; margin-top: clamp(1rem, 3vw, 2.5rem); }
.card--g { grid-column: 1 / span 4; margin-top: calc(-1 * clamp(.25rem, 1.5vw, 1.5rem)); }
.card--h { grid-column: 5 / span 4; }
.card--i { grid-column: 9 / span 4; margin-top: clamp(1rem, 2.5vw, 2rem); }

.card--media { padding: 0; min-height: 240px; overflow: hidden; border: 0; }
.card--media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); transition: transform .9s var(--ease); }
.card--media:hover img { transform: scale(1.05); }
.card--media::before, .card--media::after { display: none; }

.card--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.card--accent .ph, .card--accent .card__no { color: inherit; }
.card--accent p { color: inherit; opacity: .92; }
.card--accent::before, .card--accent::after { display: none; }

.card--tint { background: var(--accent-tint); border-color: color-mix(in oklab, var(--accent) 22%, var(--line)); }

@media (max-width: 900px) {
  .editgrid { grid-template-columns: 1fr; }
  .card--a, .card--b, .card--c, .card--d, .card--e, .card--f, .card--g, .card--h, .card--i {
    grid-column: 1 / -1; margin-top: 0;
  }
  .card { min-height: 0; }
}

/* ---------- CTA-Band nach den Leistungen ---------- */
.ctaband { background: var(--paper-2); border-block: 1px solid var(--line); }
.ctaband__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.ctaband__line { font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); color: var(--ink-2); max-width: none; text-wrap: balance; }
.ctaband__line b { color: var(--ink); font-weight: 600; }

/* ---------- Arbeitsweise: Sticky-Card-Stack (Graft aus Variante C) ----------
   Sticky-Stack-Mechanik: Jeder Wrapper bekommt per ::after einen unsichtbaren
   Spacer (Sticky-Laufweg der Karte) und zieht den Folge-Wrapper mit negativem
   margin wieder hoch. So bleibt Karte 1 geklebt, waehrend Karte 2 und 3 sie
   ueberrollen. --i: 0/1/2 kommt aus dem Markup. An A angepasst: --radius 3px,
   A-Schatten, Mono-Step-Label in --accent-deep (AA), Terracotta bleibt einziger Akzent. */
.how { background: var(--paper-2); border-block: 1px solid var(--line); }
.stack { padding-bottom: clamp(2rem, 6vh, 4rem); }
.stack__item {
  --gap: clamp(1.2rem, 3vh, 2rem);
  --travel: calc((2 - var(--i, 0)) * 55vh);
  position: relative;
  margin-bottom: calc(var(--gap) - var(--travel));
}
.stack__item::after { content: ""; display: block; height: var(--travel); }
.stack__card {
  position: sticky;
  top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3rem) + var(--i, 0) * 1.1rem);
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4.5vw, 3.4rem);
  box-shadow: var(--shadow-lg);
  min-height: clamp(280px, 46vh, 420px);
  align-content: start;
  transform-origin: center top;
}
.stack__meta { display: grid; gap: .6rem; align-content: start; }
.stack__step {
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--accent-deep); font-weight: 500;
}
.stack__mark {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  letter-spacing: -0.03em; line-height: 1;
}
.stack__body h3 { font-size: clamp(1.2rem, 1rem + .9vw, 1.65rem); margin-bottom: .8rem; }
.stack__body p { font-size: .98rem; }

/* Skalierung der dahinterliegenden Karten: rein per CSS-Scroll-Timeline.
   Ohne Support bleibt der Stapel als reines position:sticky-Stacking erhalten. */
@supports (animation-timeline: view()) {
  :root.sda .stack__item { view-timeline: --stack-seg block; }
  :root.sda .stack__card {
    animation: stack-back linear both;
    animation-timeline: --stack-seg;
    animation-range: exit 0% exit 100%;
  }
  @keyframes stack-back {
    to { transform: scale(.93) translateY(-6px); filter: brightness(.965); }
  }
}

@media (max-width: 820px) {
  .stack__card { grid-template-columns: 1fr; min-height: 0; gap: 1.2rem; }
}

/* ---------- Projekte: Case-Galerie (1 Feature-Case + 3 versetzte Karten) ---------- */
.cases { background: var(--paper-2); border-block: 1px solid var(--line); overflow: clip; }
.casegrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); align-items: start; }
.ccard {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ccard__media { overflow: hidden; aspect-ratio: 16 / 10; margin: 0; }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); transition: transform .8s var(--ease); }
.ccard:hover .ccard__media img { transform: scale(1.05); }
.ccard__body { padding: clamp(1.4rem, 2.5vw, 2.2rem); display: grid; gap: .85rem; align-content: start; }
.ccard__body h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.ccard__body p { font-size: .93rem; }
.ccard__tags { display: flex; flex-wrap: wrap; gap: .45rem; max-width: none; }
.ccard__tags span {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--accent-deep);
  border: 1px solid color-mix(in oklab, var(--accent) 32%, var(--line));
  border-radius: 999px; padding: .26rem .62rem;
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
/* Tag-Slide beim Hover: leicht versetzt nach rechts, gestaffelt */
.ccard:hover .ccard__tags span { transform: translateX(4px); background-color: color-mix(in oklab, var(--accent) 8%, transparent); }
.ccard .ccard__tags span:nth-child(2) { transition-delay: 45ms; }
.ccard .ccard__tags span:nth-child(3) { transition-delay: 90ms; }
.ccard__results { list-style: none; display: grid; gap: .45rem; margin-top: .15rem; }
.ccard__results li { position: relative; padding-left: 1.2rem; font-size: .88rem; color: var(--ink-2); }
.ccard__results li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

.ccard--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.ccard--feature .ccard__media { aspect-ratio: auto; min-height: 320px; height: 100%; }
.ccard--feature .ccard__body { padding: clamp(1.8rem, 3.5vw, 3rem); align-content: center; }
.ccard--sm { grid-column: span 4; }
.ccard--push { margin-top: clamp(1.5rem, 3vw, 2.75rem); }

@media (max-width: 1080px) {
  .ccard--sm { grid-column: span 6; }
  .casegrid .ccard--sm:last-of-type { grid-column: 1 / -1; }
  .ccard--push { margin-top: 0; }
  .ccard--feature { grid-template-columns: 1fr; }
  .ccard--feature .ccard__media { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
}
@media (max-width: 700px) {
  .ccard--sm, .casegrid .ccard--sm:last-of-type { grid-column: 1 / -1; }
}

/* ---------- Kennzahlen: typografisch fett, Zähler animiert per JS ---------- */
.metrics-wrap { border-top: 1px solid var(--line); }
.metrics__head { position: relative; isolation: isolate; padding-block: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem); }
.metrics__head .secno {
  left: auto; right: clamp(1.15rem, 4vw, 2.75rem);
  top: 50%; transform: translateY(-38%);
  font-size: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
}
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.metric { background: var(--paper); padding: clamp(1.8rem, 3.5vw, 3.2rem) clamp(1.2rem, 2vw, 2rem); }
.metric b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 1.8rem + 4.4vw, 6.5rem); letter-spacing: -.05em;
  line-height: 1; color: var(--ink); margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.metric span { font-size: .86rem; color: var(--ink-3); }
@media (max-width: 720px) { .metrics { grid-template-columns: repeat(2, 1fr); } .metrics__head .secno { display: none; } }

/* ---------- Dunkles Finale: CTA + Kontakt + Footer in der Slate-Familie ----------
   Token-Umschaltung pro Block: dieselben Werte wie das Dark-Theme, damit der
   Block im hellen Theme als bewusstes dunkles Finale steht. Im Dark-Theme
   wird das Finale eine Stufe tiefer, damit es weiterhin als Block lesbar ist. */
.finale {
  color-scheme: dark;
  --paper: oklch(18% 0.012 60);
  --paper-2: oklch(21.5% 0.013 60);
  --surface: oklch(24% 0.014 60);
  --ink: oklch(95.5% 0.008 80);
  --ink-2: oklch(75% 0.012 75);
  --ink-3: oklch(66% 0.013 72);
  --line: oklch(31% 0.014 62);
  --line-strong: oklch(41% 0.016 64);
  --accent: oklch(70% 0.145 44);
  --accent-deep: oklch(78% 0.130 48);
  --accent-tint: oklch(28% 0.048 42);
  --on-accent: oklch(17% 0.020 40);
  --err: oklch(72% 0.16 25);
  --err-border: oklch(64% 0.17 25);
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 14px 34px -18px oklch(0% 0 0 / 0.7);
  --shadow-lg: 0 34px 74px -34px oklch(0% 0 0 / 0.8);
  background: var(--paper);
  color: var(--ink);
}
:root[data-theme="dark"] .finale {
  --paper: oklch(14.5% 0.012 60);
  --paper-2: oklch(17% 0.013 60);
  --surface: oklch(19.5% 0.014 60);
  --line: oklch(27% 0.014 62);
  --line-strong: oklch(37% 0.016 64);
}

/* ---------- Großer CTA im Finale ---------- */
.bigcta {
  padding-block: clamp(4.5rem, 10vw, 9rem);
}
.bigcta .shell { position: relative; isolation: isolate; }
.bigcta .eyebrow { margin-bottom: 1.3rem; }
.secno--cta { left: auto; right: clamp(1.15rem, 4vw, 2.75rem); transform: translateY(-15%); }
.bigcta__head {
  font-size: clamp(2.4rem, 1.2rem + 5vw, 6rem);
  letter-spacing: -.04em; line-height: .98;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 16ch;
}
.bigcta__head em { color: var(--accent); font-style: normal; }

/* ---------- Kontakt ---------- */
.contact { background: var(--paper-2); border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact__aside > * + * { margin-top: 1.1rem; }
.contact__direct { display: grid; gap: .7rem; padding-top: .6rem; }
.contact__direct a { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; color: var(--ink); transition: color .2s; }
.contact__direct a .ph { color: var(--accent); font-size: 1.15rem; }
.contact__direct a:hover { color: var(--accent); }
.contact__promise {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .86rem; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .55rem .85rem; background: var(--surface);
}
.contact__promise .ph { color: var(--accent); }

.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .84rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: .78rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.field .hint { font-size: .78rem; color: var(--ink-3); }
/* Fehler-Semantik (Graft aus Variante B): echtes Fehler-Rot statt Terracotta,
   min-height verhindert Layout-Spruenge beim Ein-/Ausblenden der Meldung.
   Ueber Tokens, damit das dunkle Finale automatisch die helle Variante bekommt. */
.field .err { font-size: .78rem; color: var(--err); font-weight: 600; min-height: 1.1em; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--err-border); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__status { font-size: .88rem; font-weight: 600; color: var(--accent-deep); }

.btn[data-busy="true"] { pointer-events: none; opacity: .72; }

@media (max-width: 900px) { .contact__grid, .form__row { grid-template-columns: 1fr; } }

/* ---------- Sticky-CTA-Pill (Graft aus Variante B) ----------
   Versteckt: zusaetzlich visibility:hidden, damit die Pill weder klick- noch
   fokusierbar ist (A11y-Handling analog Variante C, JS schaltet aria-hidden/tabindex). */
.stickycta {
  position: fixed; z-index: 95;
  left: 50%; bottom: 1.1rem;
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem .6rem .55rem 1.1rem;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  border-radius: 999px;
  transform: translate(-50%, 140%);
  opacity: 0; visibility: hidden;
  transition: transform .45s var(--ease), opacity .45s var(--ease), visibility .45s;
  pointer-events: none;
}
.stickycta[data-visible="true"] {
  transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto;
}
.stickycta__label { font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
.stickycta .btn--sm { padding: .58rem 1rem; font-size: .88rem; border-radius: 999px; }
@media (max-width: 520px) { .stickycta__label { display: none; } }
@media (prefers-reduced-transparency: reduce) { .stickycta { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---------- Footer ---------- */
.footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: 3rem 2rem; }
.footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .9rem; }
.footer__nav a { color: var(--ink-2); transition: color .2s; }
.footer__nav a:hover { color: var(--accent); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; font-size: .82rem; color: var(--ink-3); }
.footer__bottom a:hover { color: var(--accent); }

/* ---------- Scroll-Reveal (Staggered, nur transform/opacity) ---------- */
/* Grundzustand ist sichtbar. Versteckt wird nur, wenn JS nachweislich laeuft
   (Klasse .js im head). Ohne JS bleibt die Seite vollstaendig lesbar. */
:root.js [data-reveal] { opacity: 0; transform: translateY(26px); }
:root.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ---------- Reduced Motion: alles ruhigstellen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  :root.js [data-reveal] { opacity: 1; transform: none; }
  .line > span { transform: none !important; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  /* Die aria-hidden-Duplikatgruppe existiert nur fuer die Endlos-Schleife.
     Steht die Marquee still, wuerde sie Inhalte doppelt zeigen → ausblenden. */
  .marquee__group[aria-hidden="true"] { display: none; }
  .parallax img { transform: none !important; height: 100%; }
  /* Karten-Stack: Scroll-Timeline-Skalierung aus, Sticky-Stacking bleibt. */
  .stack__card { animation: none !important; }
  .stickycta { transition: none; }
}