/* NANGA — Redesign-Erweiterungen. Lädt nach styles.css (kompiliertes Tailwind). */

/* ── Design-Tokens ─────────────────────────────────────────────────────── */
:root {
  --font-display: "Archivo Black", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --nanga-navy: #0d1a2f;
  --nanga-ink: #071a3a;
  --nanga-blue: #1267ff;
  --nanga-blue-2: #3b82f6;
  --nanga-sky: #8bb4ff;
  --nanga-mist: #d8e7ff;
  --nanga-line: #c7d8f5;
  --nanga-text: #42526b;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --radius-btn: .75rem;
  --fs-h2: clamp(2.35rem, 5vw, 4.6rem);
  /* Logo-Klammer „<“ / „>“ aus assets/images/logo.svg: Breite = 0.906 × Höhe,
     Schenkel 25°, Scheitel abgeflacht (16 %), Schenkel vertikal 24 % stark.
     Nur mit fester Proportion (Breite = Höhe × .906) verwenden, sonst kippt der Winkel. */
  --br-lt: polygon(100% 0, 0 41.85%, 0 58.15%, 100% 100%, 100% 76%, 37.87% 50%, 100% 24%);
  --br-gt: polygon(0 0, 100% 41.85%, 100% 58.15%, 0 100%, 0 76%, 62.13% 50%, 0 24%);
}

/* Archivo Black hat nur einen Schnitt — kein künstliches Fett rendern */
html { font-synthesis-weight: none; }
/* styles.css setzt overflow-x: hidden auf html/body. Das macht body zum Scroll-Container
   und bricht position: sticky (Projekt-Stapel). clip verhindert seitliches Scrollen genauso. */
html,
body { overflow-x: clip; }

/* ── Fokus & Formulare ─────────────────────────────────────────────────── */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--nanga-blue-2);
  outline-offset: 3px;
  border-radius: .5rem;
}
:where(header, footer, .voices, #mobile-menu) :where(a, button):focus-visible { outline-color: var(--nanga-sky); }
#contact input:focus,
#contact textarea:focus { box-shadow: 0 0 0 4px rgba(59, 130, 246, .14); }

/* ── Header: Lesbarkeit, Scrollspy, Ausblenden beim Runterscrollen ────── */
header nav > ul a.font-mono {
  position: relative;
  font-size: .8125rem;
  color: rgba(216, 231, 255, .9);
}
header nav > ul a.font-mono:hover,
header nav > ul a.font-mono.is-active { color: #fff; }
header nav > ul a.font-mono::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--nanga-sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
header nav > ul a.font-mono:hover::after,
header nav > ul a.font-mono.is-active::after { transform: scaleX(1); }
header.header-hidden { transform: translateY(-100%); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero-intro-brand { transition-duration: .9s; }
.hero-rest-reveal { transition-duration: .7s; }
.hero-content { will-change: transform, opacity; }

/* Startseite: Leistungen beginnen bereits im ersten Bildschirm. */
.home-hero-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0d1a2f;
}
.home-hero-showcase > .home-hero,
.home-hero-showcase > .services-redesign--cards-first {
  background: transparent;
}
.home-hero-showcase > .services-redesign--cards-first { z-index: 20; }
.home-hero-showcase > .services-redesign--cards-first::before,
.home-hero-showcase > .services-redesign--cards-first::after { content: none; }
.home-hero,
.home-hero .home-hero-inner {
  min-height: clamp(30rem, 72svh, 48rem);
}
.home-hero .home-hero-inner { padding-top: 6rem; padding-bottom: 4rem; }
.services-redesign--cards-first { scroll-margin-top: 4rem; }
.services-redesign--cards-first > .services-list-wrap {
  padding-top: 0;
  padding-bottom: 3rem;
  background: transparent;
}
.services-redesign--cards-first .services-list {
  gap: 1.25rem;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.services-redesign--cards-first .services-tile {
  border: 1px solid #c7d8f5;
  border-radius: 0;
  background: linear-gradient(145deg, #fff, #eff6ff);
  overflow: hidden;
  padding: 2rem 1.5rem;
  box-shadow: 0 16px 40px rgba(13, 26, 47, .12);
}
.services-redesign--cards-first .services-tile:hover,
.services-redesign--cards-first .services-tile:focus-visible {
  background: #0d1a2f;
}
.services-redesign--cards-first .services-number { display: none; }
.services-redesign--cards-first .services-tile:focus-visible { color: #fff; }
.services-redesign--cards-first .services-tile:focus-visible .services-desc { color: #c7d8f5; }
.services-redesign--cards-first .services-tile:focus-visible .services-arrow { color: #8bb4ff; }
.services-redesign--cards-first .services-tile:focus-visible .services-media { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .services-redesign--cards-first .services-desc,
  .services-redesign--cards-first .services-arrow {
    opacity: 0;
    transform: translateY(.65rem);
    transition: opacity .28s ease, transform .28s ease, color .28s ease;
  }
  .services-redesign--cards-first .services-tile:hover .services-desc,
  .services-redesign--cards-first .services-tile:hover .services-arrow,
  .services-redesign--cards-first .services-tile:focus-visible .services-desc,
  .services-redesign--cards-first .services-tile:focus-visible .services-arrow {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .services-redesign--cards-first .services-desc,
  .services-redesign--cards-first .services-arrow { transition: none; }
}
.services-redesign--intro > .services-intro { padding-top: clamp(5rem, 9vw, 8rem); }
@media (max-width: 767px) {
  .home-hero,
  .home-hero .home-hero-inner { min-height: clamp(26rem, 68svh, 36rem); }
  .home-hero .home-hero-inner { padding-top: 5.5rem; padding-bottom: 3rem; }
}

/* Startseite kompakt wie Referenz: Hero, längliche Leistungskarten, Statement direkt darunter. */
.home-hero-showcase {
  position: relative;
  z-index: 2;
  overflow: visible;
}
.home-hero,
.home-hero .home-hero-inner {
  min-height: clamp(27rem, 58svh, 39rem);
}
.home-hero .home-hero-inner {
  align-items: flex-end;
  padding-top: clamp(5.25rem, 8vw, 7rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.home-hero .hero-content {
  max-width: 1040px;
}
.home-hero .hero-intro-brand,
.home-hero .hero-rest-reveal {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}
.hero-intro-brand {
  font-size: clamp(2.75rem, 8.2vw, 6.1rem);
  line-height: .9;
  letter-spacing: 0;
  white-space: nowrap;
}
.hero-intro-brand > span {
  color: rgba(216, 231, 255, .72);
}
.home-hero .hero-typewriter-line {
  justify-content: center;
  margin-top: .75rem;
  font-size: clamp(1rem, 2.4vw, 2rem) !important;
  letter-spacing: .02em;
}
.home-hero h1.hero-rest-reveal {
  max-width: 1120px;
  margin-top: clamp(1.8rem, 4vw, 3.1rem);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: #f7fbff;
  text-shadow: 0 16px 60px rgba(4, 12, 28, .85);
}
.home-hero h1.hero-rest-reveal {
  text-wrap: balance;
}
.mobile-hero-break {
  display: none;
}
.home-hero h1.hero-rest-reveal::first-line {
  color: #f7fbff;
}
.home-hero .hero-rest-reveal .button-arrow {
  font-size: 1.4em;
}
.home-hero .hero-rest-reveal.mt-7 {
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.services-redesign--cards-first {
  position: relative;
  z-index: 30;
  margin-top: -4.5rem;
  margin-bottom: -5.8rem;
  transform: translateY(5.8rem);
}
.services-redesign--cards-first > .services-list-wrap {
  padding: 0 1rem;
}
.services-redesign--cards-first .services-list-inner {
  max-width: 1160px;
}
.home-services-kicker {
  margin: 0 0 .9rem;
  font-family: var(--font-mono);
  font-size: clamp(.7rem, 1.2vw, .86rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-align: center;
  text-transform: uppercase;
  color: #a8c9ff;
}
.services-redesign--cards-first .services-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.65rem, 1vw, 1rem);
}
.services-redesign--cards-first .services-tile {
  min-height: clamp(11.8rem, 14vw, 14.2rem);
  gap: .9rem;
  padding: clamp(1.55rem, 2.25vw, 2rem) clamp(1.25rem, 2vw, 1.6rem);
  border-color: #c7d8f5;
  background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(239, 246, 255, .82));
  box-shadow: 0 16px 40px rgba(13, 26, 47, .12);
}
.services-redesign--cards-first .services-tile strong,
.services-redesign--cards-first .services-tile:nth-child(3) strong {
  font-size: clamp(1.65rem, 2.15vw, 2.2rem);
  font-weight: 800;
  line-height: 1.01;
  color: #071a3a;
}
.services-redesign--cards-first .services-desc {
  max-width: 15rem;
  font-family: inherit;
  font-size: clamp(.9rem, 1vw, .98rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--nanga-text);
}
.services-redesign--cards-first .services-arrow {
  align-self: flex-end;
  font-size: clamp(1.8rem, 2.3vw, 2.35rem);
  color: #1267ff;
}
.services-redesign--cards-first .services-arrow {
  opacity: 1 !important;
  transform: none !important;
}
.services-redesign--cards-first .services-desc {
  opacity: 1;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .services-redesign--cards-first .services-desc {
    opacity: 0 !important;
    transform: translateY(.65rem) !important;
    transition: opacity .28s ease, transform .28s ease, color .28s ease;
  }
  .services-redesign--cards-first .services-tile:hover .services-desc,
  .services-redesign--cards-first .services-tile:focus-visible .services-desc {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}
.services-redesign--cards-first .services-media {
  display: block;
}
.services-redesign--cards-first .services-tile:hover,
.services-redesign--cards-first .services-tile:focus-visible {
  background: #0d1a2f;
  color: #fff;
  transform: translateY(-3px);
}
.services-redesign--cards-first .services-tile:hover strong,
.services-redesign--cards-first .services-tile:focus-visible strong {
  color: #fff;
}
.services-redesign--cards-first .services-tile:hover .services-desc,
.services-redesign--cards-first .services-tile:focus-visible .services-desc {
  color: #c7d8f5;
}
.services-redesign--intro {
  position: relative;
  z-index: 1;
  background: #eaf6ff !important;
}
.services-redesign--intro > .services-intro {
  padding-top: clamp(12rem, 13vw, 14rem);
  padding-bottom: clamp(3.1rem, 5.5vw, 5.2rem);
}
.services-redesign--intro .services-kicker {
  display: none;
}
.services-redesign--intro .services-intro-inner {
  max-width: 1160px;
}
.services-redesign--intro .services-intro-grid {
  display: block;
}
.services-redesign--intro .services-intro h2 {
  max-width: 1080px;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.1;
  color: #080c45;
}
.services-redesign--intro .services-intro-copy {
  max-width: 560px;
  padding-top: clamp(1rem, 1.8vw, 1.35rem);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  color: #10134c;
}
.services-redesign--intro .services-intro-copy strong {
  color: #1267ff;
  font-weight: 900;
}
.services-redesign--intro .split-word > span {
  transform: none;
}

@media (max-width: 980px) {
  .services-redesign--cards-first {
    margin-top: -2rem;
    margin-bottom: -2rem;
    transform: translateY(2rem);
  }
  .services-redesign--cards-first .services-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .services-redesign--intro > .services-intro {
    padding-top: clamp(5rem, 9vw, 7rem);
  }
}
@media (max-width: 640px) {
  .home-hero,
  .home-hero .home-hero-inner {
    min-height: clamp(31rem, 72svh, 38rem);
  }
  .home-hero .home-hero-inner {
    padding-bottom: 2.1rem;
  }
  .home-hero .hero-content {
    max-width: calc(100vw - 2rem);
    overflow: hidden;
  }
  .hero-intro-brand {
    font-size: clamp(1.7rem, 9.1vw, 2.3rem);
  }
  .home-hero .hero-intro-brand { margin: .25rem 0 .5rem; }
  .home-hero .hero-typewriter-line {
    margin-top: 1rem;
    font-size: clamp(.88rem, 4.1vw, 1.05rem) !important;
  }
  .home-hero h1.hero-rest-reveal {
    max-width: 21rem;
    margin-top: 2.25rem;
    font-size: clamp(1.15rem, 4.8vw, 1.45rem);
    line-height: 1.35;
    text-wrap: wrap;
    overflow-wrap: normal;
  }
  .home-hero .hero-rest-reveal.mt-7 {
    margin-top: 2rem;
  }
  .mobile-hero-break {
    display: inline;
  }
  .services-redesign--cards-first .services-list {
    grid-template-columns: 1fr;
  }
  .services-redesign--cards-first .services-tile {
    min-height: 10.25rem;
  }
  .services-redesign--intro .services-intro h2 {
    font-size: clamp(1.85rem, 8.5vw, 2.55rem);
  }
  .services-redesign--intro .services-intro-copy {
    font-size: .95rem;
  }
}

/* ── Magnetische Buttons ───────────────────────────────────────────────── */
.magnetic {
  transition: transform .45s var(--ease-out), background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
  will-change: transform;
}

/* ── Wort-für-Wort-Reveal für Headlines ────────────────────────────────── */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .1em 0 .12em;
  margin: -.1em 0 -.12em;
}
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 42ms);
}
.is-split-in .split-word > span { transform: none; }
/* Bestehende Regeln wie "h2 span { display:block }" nicht auf die Wort-Spans anwenden */
.process-heading h2 span.split-word,
.process-heading h2 span.split-word > span,
.why-head h2 span.split-word,
.why-head h2 span.split-word > span { display: inline-block; color: inherit; }

/* ── Gemeinsame Section-Köpfe (neue Sektionen) ─────────────────────────── */
.section-kicker {
  margin: 0 0 1.15rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nanga-blue);
}
.section-kicker span { opacity: .6; margin-right: .35rem; }
.section-head h2 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: .98;
  color: var(--nanga-ink);
  text-wrap: balance;
}
.section-lead {
  margin-top: 1.4rem;
  max-width: 38rem;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--nanga-text);
}
.section-head--dark .section-kicker { color: var(--nanga-sky); }
.section-head--dark h2 { color: #f7fbff; }
.section-head--dark .section-lead { color: #aebed5; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  color: var(--nanga-blue);
  text-decoration: none;
}
.link-arrow span { transition: transform .3s var(--ease-out); }
.link-arrow:hover span { transform: translateX(5px); }

/* ── Leistungen: Beschreibung, Bild beim Hover, Lichtschein ───────────── */
.services-intro h2 { text-shadow: none; }
.services-tile { overflow: hidden; isolation: isolate; }
.services-tile > * { position: relative; z-index: 2; }
.services-tile strong { hyphens: manual; }
.services-desc {
  max-width: 19rem;
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--nanga-text);
  transition: color .28s ease;
}
.services-tile:hover .services-desc { color: #c7d8f5; }
.services-tile .services-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  transition: opacity .55s ease;
}
.services-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.1);
  transition: transform 1.4s var(--ease-out);
}
.services-media::before,
.services-media::after { content: ""; position: absolute; inset: 0; }
.services-media::before { z-index: 1; background: #1f5fd6; mix-blend-mode: color; }
.services-media::after { z-index: 2; background: linear-gradient(180deg, rgba(13, 26, 47, .62) 0%, rgba(13, 26, 47, .93) 62%); }
.services-tile:hover .services-media { opacity: 1; }
.services-tile:hover .services-media img { transform: scale(1); }
.services-tile::after,
.spotlight::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 180, 255, .24), transparent 46%);
  opacity: 0;
  transition: opacity .35s ease;
}
.services-tile:hover::after,
.spotlight:hover::after { opacity: 1; }
@media (min-width: 1024px) {
  .services-tile { padding: 3rem 2.2rem; }
  .services-tile strong,
  .services-tile:nth-child(3) strong { font-size: clamp(1.85rem, 2.3vw, 2.55rem); }
}

/* ── Tech-Stack-Band ───────────────────────────────────────────────────── */
.stack-band {
  position: relative;
  padding: 3.25rem 0 3.5rem;
  background: #fff;
  border-top: 1px solid var(--nanga-line);
  border-bottom: 1px solid var(--nanga-line);
}
.stack-band-label {
  margin: 0 auto 1.6rem;
  padding: 0 1.25rem;
  max-width: 1340px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #52627a;
}
.stack-band-label span { color: var(--nanga-blue); margin-right: .35rem; }
.stack-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stack-rail {
  display: flex;
  width: max-content;
  animation: stack-scroll 46s linear infinite;
}
.stack-marquee:hover .stack-rail,
.stack-marquee:focus-within .stack-rail { animation-play-state: paused; }
.stack-track {
  display: flex;
  gap: .9rem;
  margin: 0;
  padding: 0 .45rem;
  list-style: none;
}
.stack-track li {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  height: 3.4rem;
  padding: 0 1.25rem;
  border: 1px solid #dfe9f8;
  border-radius: 999px;
  background: #f7fbff;
  font-family: var(--font-mono);
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
  color: #203352;
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease-out);
}
.stack-track img {
  width: 1.5rem;
  height: 1.5rem;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .3s ease, opacity .3s ease;
}
.stack-track li:hover { border-color: #a9c6f5; background: #fff; transform: translateY(-2px); }
.stack-track li:hover img { filter: none; opacity: 1; }
@keyframes stack-scroll { to { transform: translateX(-50%); } }

/* ── Prozess: abgeschnittenen Schritt 04 beheben + Scroll-Steuerung ───── */
@media (min-width: 1121px) { .process-steps { min-height: 37rem; } }
@media (min-width: 768px) and (max-width: 1120px) { .process-steps { min-height: 51rem; } }
.process-redesign.is-scrubbed .process-line {
  animation: none !important;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--pp, 0));
}
.process-redesign.is-scrubbed .process-edge-dot {
  animation: none !important;
  offset-path: none;
  margin: -.41rem 0 0 -.41rem;
  transition: opacity .3s ease;
}
@media (max-width: 767px) { .process-redesign.is-scrubbed .process-edge-dot { display: none; } }
.process-redesign.is-scrubbed .process-steps:before {
  animation: none !important;
  transform: scaleY(max(.04, var(--pp, 0)));
}
.process-redesign.is-scrubbed .process-step {
  opacity: .22;
  transform: translate3d(0, .6rem, 0);
  transition: opacity .6s ease, transform .7s var(--ease-out);
  transition-delay: 0s !important;
}
.process-redesign.is-scrubbed .process-step.is-active { opacity: 1; transform: none; }
.process-redesign.is-scrubbed .process-step .process-step-number { animation: none !important; }
.process-redesign.is-scrubbed .process-step.is-active .process-step-number { animation: process-step-pulse .9s ease both !important; }

/* ── Projekte (Beispiele) ──────────────────────────────────────────────── */
.cases {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* clip statt hidden: sonst funktioniert position: sticky im Projekt-Stapel nicht */
  padding: clamp(5.5rem, 9vw, 8.5rem) 1.25rem;
  background: linear-gradient(180deg, #f7fbff 0%, #fff 60%, #f4f8ff 100%);
}
.cases-mark,
.voices-mark {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.cases-mark { background: #e3eeff; opacity: .7; }
.cases-inner { max-width: 1340px; margin: 0 auto; }
.cases-head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.project-showcase {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  min-width: 0;
}
.project-showcase-copy {
  max-width: 34rem;
  min-width: 0;
}
.project-showcase-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.15rem, 5.6vw, 5.25rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: 0;
  color: #071326;
  text-wrap: balance;
}
.project-showcase-copy .section-lead {
  margin: 1.6rem 0 0;
  max-width: 30rem;
}
.project-showcase-button {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  min-height: 4rem;
  margin-top: 2rem;
  padding: 0 2.25rem;
  border-radius: 999px;
  background: #071a3a;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 20px 44px rgba(7, 26, 58, .18);
}
.project-showcase-button span {
  font-size: 1.45rem;
  line-height: 1;
  transition: transform .3s var(--ease-out);
}
.project-showcase-button:hover span { transform: translateX(4px); }.project-browser {
  margin: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 58px rgba(7, 26, 58, .18), 0 4px 18px rgba(7, 26, 58, .1);
}
.project-browser {
  width: min(100%, 48rem);
  border: 1px solid rgba(143, 163, 191, .36);
  border-radius: .8rem;
}
.project-browser-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 2.4rem;
  padding: 0 .85rem;
  border-bottom: 1px solid rgba(143, 163, 191, .22);
  background: linear-gradient(180deg, #f7f8fb 0%, #e9edf3 100%);
}
.project-browser-bar span {
  width: .68rem;
  height: .68rem;
  border-radius: 999px;
}
.project-browser-bar span:nth-child(1) { background: #ff5f57; }
.project-browser-bar span:nth-child(2) { background: #ffbd2e; }
.project-browser-bar span:nth-child(3) { background: #28c840; }
.project-browser-bar em {
  flex: 1;
  margin-left: .7rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(143, 163, 191, .14);
  padding: .34rem .8rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-style: normal;
  color: #7a8ba6;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.project-browser-screen {
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  background: #0d1a2f;
}.project-browser-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Projekt-Stapel: große Karten, die beim Scrollen oben hängen bleiben und sich übereinanderschieben */
.case-stack {
  --stack-top: 5.5rem;
  display: grid;
  gap: 1.5rem;
}
.case-slide {
  position: sticky;
  top: calc(var(--stack-top) + var(--i, 0) * 1.1rem);
}
.case-slide-inner {
  position: relative;
  display: grid;
  gap: 2rem;
  overflow: hidden;
  padding: clamp(1.6rem, 3.2vw, 3rem);
  border: 1px solid rgba(139, 180, 255, .16);
  border-radius: 1rem;
  background: linear-gradient(150deg, #0d1a2f 0%, #10284b 100%);
  color: #d8e7ff;
  box-shadow: 0 -18px 50px rgba(7, 20, 42, .18), 0 30px 80px rgba(7, 20, 42, .22);
  transform-origin: 50% 0;
  will-change: transform;
}
.case-slide:nth-child(2) .case-slide-inner { background: linear-gradient(150deg, #0f2447 0%, #16376a 100%); }
.case-slide:nth-child(3) .case-slide-inner { background: linear-gradient(150deg, #0b1830 0%, #0f2f5c 100%); }
/* verdeckte Karte wird per JS gedimmt (--cover 0…1) */
.case-slide-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #06101f;
  opacity: calc(var(--cover, 0) * .45);
  pointer-events: none;
}
.case-slide-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.1rem; }
.case-slide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8fa3bf;
}
.case-slide-meta span:first-child { color: var(--nanga-sky); }
.case-slide-meta span:nth-child(2) { color: #fff; }
.case-slide h3 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}
.case-slide-text { margin: 0; max-width: 34rem; font-size: 1.02rem; line-height: 1.6; color: #c4d3ea; }
.case-metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: .4rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(139, 180, 255, .18); }
.case-metric strong {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--nanga-sky);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.case-metric span { max-width: 16rem; font-size: .95rem; line-height: 1.4; color: #d8e7ff; }
.case-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.case-tags li {
  padding: .3rem .7rem;
  border: 1px solid rgba(139, 180, 255, .25);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: #aebed5;
}

/* Screenshot-Rahmen: Browser oder Handys. Platzhalter zeigt ein Raster mit Logo-Klammern. */
.case-shot { position: relative; z-index: 1; margin: 0; align-self: center; }
.case-shot--browser {
  overflow: hidden;
  border: 1px solid rgba(139, 180, 255, .25);
  border-radius: .7rem;
  background: #0a1526;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.case-shot-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(139, 180, 255, .15);
  background: #0f1e36;
}
.case-shot-bar i { width: .55rem; height: .55rem; border-radius: 999px; background: rgba(139, 180, 255, .3); }
.case-shot-bar em {
  flex: 1;
  margin-left: .6rem;
  padding: .25rem .7rem;
  border-radius: .35rem;
  background: rgba(216, 231, 255, .06);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-style: normal;
  color: #8fa3bf;
}
.case-shot-screen {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(rgba(139, 180, 255, .07) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(90deg, rgba(139, 180, 255, .07) 1px, transparent 1px) 0 0 / 2rem 2rem,
    radial-gradient(ellipse at 70% 20%, rgba(59, 130, 246, .22), transparent 60%),
    #0b1729;
}
.case-shot-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-shot--phones { display: flex; justify-content: center; gap: clamp(.8rem, 2vw, 1.4rem); }
.case-phone {
  width: min(42%, 13.5rem);
  padding: .55rem;
  border: 1px solid rgba(139, 180, 255, .3);
  border-radius: 1.9rem;
  background: #081221;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.case-phone:nth-child(2) { transform: translateY(1.8rem); }
.case-phone .case-shot-screen { aspect-ratio: 9 / 19.5; border-radius: 1.45rem; overflow: hidden; }
.case-shot-ph {
  display: grid;
  justify-items: center;
  gap: .35rem;
  margin: 0;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-align: center;
  color: #8fa3bf;
}
/* Logo-Klammern „< >“ als Platzhalter-Motiv */
.case-shot-ph b { display: flex; gap: .45rem; margin-bottom: .5rem; opacity: .6; }
.case-shot-ph b::before,
.case-shot-ph b::after { content: ""; width: 1.45rem; height: 1.6rem; background: var(--nanga-sky); }
.case-shot-ph b::before { clip-path: var(--br-lt); }
.case-shot-ph b::after { clip-path: var(--br-gt); }
.case-shot-ph small { font-size: .68rem; color: #5f7391; }

@media (min-width: 900px) {
  .project-showcase { grid-template-columns: minmax(20rem, .78fr) minmax(0, 1.22fr); }
  .case-slide-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); min-height: min(34rem, calc(100vh - 8rem)); }
}
@media (max-width: 899px) {
  .cases--showcase { padding-top: 6.5rem; }
  .project-showcase-copy h2 { font-size: clamp(2.65rem, 7vw, 4.2rem); }
  .project-browser { width: min(100%, 42rem); }
}
@media (max-width: 560px) {
  .cases--showcase {
    max-width: 100vw;
  }
  .project-showcase {
    width: calc(100vw - 2.5rem);
    max-width: calc(100vw - 2.5rem);
    gap: 2rem;
  }
  .project-showcase-copy {
    width: 100%;
    max-width: 100%;
  }
  .project-showcase-copy .section-lead {
    width: 100%;
    max-width: 20rem;
  }
  .project-showcase-button {
    min-height: 3.5rem;
    padding: 0 1.55rem;
    font-size: .95rem;
  }
  .project-browser {
    width: 100%;
    max-width: 100%;
  }
  .project-browser-bar { height: 2rem; padding: 0 .65rem; }
  .project-browser-bar em { font-size: .58rem; }
}
/* Auf kleinen oder niedrigen Bildschirmen nicht stapeln: Karten wären höher als der Viewport */
@media (max-width: 899px), (max-height: 640px) {
  .case-slide { position: relative; top: auto; }
}
/* per JS gesetzt, wenn eine Karte höher als der Viewport ist */
.case-stack.is-flat .case-slide { position: relative; top: auto; }

.cases-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; color: var(--nanga-text); }
.cases-cta p { margin: 0; font-size: .82rem; }
@media (min-width: 768px) {
  .cases { padding-left: 2.5rem; padding-right: 2.5rem; }
  .cases-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .cases-head .section-lead { margin: 0 0 .35rem; }
}

/* ── Kundenstimmen ─────────────────────────────────────────────────────── */
.voices {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5.5rem, 9vw, 8.5rem) 1.25rem;
  background: linear-gradient(160deg, #0a1628 0%, #0d1a2f 45%, #11284a 100%);
  color: #f7fbff;
}
.voices-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 85% 20%, rgba(59, 130, 246, .28), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(139, 180, 255, .12), transparent 50%);
}
.voices-mark { background: rgba(59, 130, 246, .1); }
.voices-inner { max-width: 1240px; margin: 0 auto; }
.voices-stage { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.voices-quotes { position: relative; display: grid; }
.voices-quotes::before {
  content: "\201C";
  position: absolute;
  left: -.5rem;
  top: -4.2rem;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: rgba(139, 180, 255, .16);
  pointer-events: none;
}
.voices .section-head h2 { max-width: 22ch; }
.voice {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .8s var(--ease-out), visibility 0s linear .6s;
}
.voice.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.voice blockquote { margin: 0; }
.voice blockquote p {
  max-width: 50rem;
  font-size: clamp(1.45rem, 2.7vw, 2.35rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #f7fbff;
  text-wrap: pretty;
}
.voice figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: 1.8rem; font-size: .95rem; color: #aebed5; }
.voice figcaption strong { color: #fff; }
.voice-result {
  padding: .25rem .6rem;
  border: 1px solid rgba(139, 180, 255, .28);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--nanga-sky);
}
.voices-tabs { display: grid; gap: .75rem; }
.voice-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  overflow: hidden;
  padding: .85rem 1rem;
  border: 1px solid rgba(96, 165, 250, .2);
  border-radius: 1rem;
  background: rgba(216, 231, 255, .04);
  color: #aebed5;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.voice-tab:hover { border-color: rgba(139, 180, 255, .45); background: rgba(216, 231, 255, .07); }
.voice-tab[aria-selected="true"] { border-color: rgba(139, 180, 255, .55); background: rgba(216, 231, 255, .09); color: #fff; }
.voice-tab img {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .4s ease;
}
.voice-tab[aria-selected="true"] img { filter: none; box-shadow: 0 0 0 2px #0d1a2f, 0 0 0 4px var(--nanga-blue-2); }
.voice-tab strong,
.voice-tab em { display: block; font-style: normal; }
.voice-tab strong { font-size: .95rem; }
.voice-tab em { margin-top: .1rem; font-size: .8rem; color: #8fa3bf; }
.voice-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--nanga-blue-2);
  transform: scaleX(0);
  transform-origin: left;
}
.voice-tab[aria-selected="true"] .voice-progress { animation: voice-progress var(--voice-duration, 8s) linear forwards; }
.voices-stage.is-paused .voice-progress { animation-play-state: paused; }
.voices-note { margin-top: 2rem; font-size: .8rem; color: #6f84a3; }
@keyframes voice-progress { to { transform: scaleX(1); } }
@media (max-width: 1023px) {
  .voices-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .voice-tab { flex-direction: column; gap: .5rem; padding: .8rem .4rem; text-align: center; }
  .voice-tab strong { font-size: .82rem; }
  .voice-tab em { display: none; }
}
@media (min-width: 768px) { .voices { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) {
  .voices-stage { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; align-items: center; }
}

/* ── Kontakt ───────────────────────────────────────────────────────────── */
.contact-title {
  margin-bottom: 1.75rem;
  font-family: var(--font-display);
  line-height: .98;
  color: #0d1a2f;
}
main.min-h-screen #contact h2.contact-title span.split-word,
main.min-h-screen #contact h2.contact-title span.split-word > span { color: inherit !important; }
@media (min-width: 768px) {
  main.min-h-screen #contact h2.contact-title { font-size: clamp(2.4rem, 3.8vw, 3.9rem) !important; }
}
.contact-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 1.5rem; }
.contact-meta a { color: #42526b; text-decoration: none; overflow-wrap: anywhere; }
.contact-meta a:hover { color: var(--nanga-blue); }
.field-error { display: block; margin-top: .45rem; font-size: .8rem; font-weight: 500; color: #c62828; }
#contact [aria-invalid="true"] { border-color: #e05252 !important; box-shadow: 0 0 0 4px rgba(224, 82, 82, .12); }
.form-success {
  padding: 1.5rem 1.6rem;
  border: 1px solid rgba(96, 165, 250, .35);
  border-radius: 1rem;
  background: #0d1a2f;
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: 1.8;
  color: #d8e7ff;
  box-shadow: 0 24px 60px rgba(13, 26, 47, .25);
}
.form-success .fs-line { display: block; opacity: 0; transform: translateY(6px); animation: fs-line .5s var(--ease-out) forwards; }
.form-success .fs-line:nth-child(2) { animation-delay: .55s; }
.form-success .fs-line:nth-child(3) { animation-delay: 1.1s; }
.form-success .fs-prompt { color: #60a5fa; }
.form-success .fs-ok { color: #35d0ba; }
@keyframes fs-line { to { opacity: 1; transform: none; } }

/* ── Cookie-Hinweis als kompakte Karte ─────────────────────────────────── */
#cookie-consent.cookie-card {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 300;
  width: min(23.5rem, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--nanga-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 20px 50px rgba(13, 26, 47, .18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: cookie-in .7s var(--ease-out) both;
}
.cookie-card .cookie-title { margin: 0 0 .35rem; font-size: .9rem; font-weight: 700; color: #0d1a2f; }
.cookie-card .cookie-text { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--nanga-text); }
.cookie-card .cookie-text a { color: var(--nanga-blue); }
.cookie-actions { display: flex; gap: .5rem; margin-top: .9rem; }
.cookie-actions button { flex: 1; height: 2.5rem; border-radius: .65rem; font-size: .85rem; font-weight: 600; transition: background .2s ease, border-color .2s ease; }
.cookie-actions [data-consent="accepted"] { border: 1px solid var(--nanga-blue); background: var(--nanga-blue); color: #fff; }
.cookie-actions [data-consent="accepted"]:hover { background: #0b55dd; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 640px) {
  #cookie-consent.cookie-card { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
}

/* ── Unterseiten an das Designsystem angleichen ────────────────────────── */
.web-page-button { border-radius: var(--radius-btn); }
.web-page-hero-copy { max-width: 62rem; }
.web-page-hero-title { font-size: clamp(2.3rem, 5.2vw, 5.2rem); font-weight: 400; line-height: .98; }
.web-page-section-head h2 { font-size: var(--fs-h2); font-weight: 400; }

/* ── Logo-Klammern im Hintergrund (Variante A) ─────────────────────────────
   Jede Form ist eine echte Logo-Klammer mit fester Proportion. Positioniert
   wird über den Scheitel: --ax / --ay = Scheitelpunkt, --bh = Höhe.
   Der Scheitel liegt immer im Bild, angeschnitten werden nur die Enden. */
.services-redesign:before,
.cases-mark,
.voices-mark,
.why-bg-mark-right,
main.min-h-screen #contact:before,
.web-page-hero-mark,
.web-page-contact-mark {
  right: auto;
  bottom: auto;
  top: calc(var(--ay) - var(--bh) / 2);
  width: calc(var(--bh) * .906);
  height: var(--bh);
  box-shadow: none;
  transform: translate3d(0, calc(var(--par, 0) * 1px), 0);
}
/* „<“: Scheitel links, Enden laufen nach rechts aus dem Bild */
.services-redesign:before,
.voices-mark,
.web-page-hero-mark { left: var(--ax); clip-path: var(--br-lt); }
/* „>“: Scheitel rechts, Enden laufen nach links aus dem Bild */
.cases-mark,
.why-bg-mark-right,
main.min-h-screen #contact:before,
.web-page-contact-mark { left: calc(var(--ax) - var(--bh) * .906); clip-path: var(--br-gt); }
.why-bg-mark-left { display: none !important; }

.services-redesign:before { --bh: 68rem; --ax: 52%; --ay: 50%; }
.cases-mark { --bh: 52rem; --ax: 57.5%; --ay: 15.5rem; }
.voices-mark { --bh: 58rem; --ax: 64%; --ay: 44%; }
.why-bg-mark-right { --bh: 64rem; --ax: 89%; --ay: 17rem; }
main.min-h-screen #contact:before,
.web-page-contact-mark { --bh: 62rem; --ax: 47%; --ay: 50%; }
.web-page-hero-mark { --bh: 54rem; --ax: 63%; --ay: 50%; }
/* Startseite, Ausgewählte Projekte: „>“ im Hintergrund wie im Kontaktbereich */
.cases--showcase .cases-mark {
  --bh: 62rem; --ax: 47%; --ay: 50%;
  background: linear-gradient(135deg, rgba(216, 231, 255, .9), rgba(139, 180, 255, .28));
  opacity: .55;
}

@media (max-width: 1023px) {
  .services-redesign:before { --bh: 56rem; --ax: 46%; --ay: 30rem; }
  .voices-mark { --bh: 44rem; --ax: 70%; --ay: 12rem; }
  .why-bg-mark-right { --bh: 44rem; --ax: 94%; --ay: 14rem; }
}
@media (max-width: 767px) {
  .services-redesign:before { --bh: 34rem; --ax: 52%; --ay: 40.5rem; }
  .cases-mark { --bh: 30rem; --ax: 92%; --ay: 12rem; }
  .voices-mark { --bh: 30rem; --ax: 74%; --ay: 9rem; }
  .why-bg-mark-right { --bh: 30rem; --ax: 96%; --ay: 12rem; }
  main.min-h-screen #contact:before,
  .web-page-contact-mark { --bh: 34rem; --ax: 92%; --ay: 15rem; }
  .web-page-hero-mark { --bh: 30rem; --ax: 72%; --ay: 40%; }
}

/* ── Prozesslinie schließt mit „>“ (Variante D) ────────────────────────────
   Die Klammer sitzt genau auf der Grenze Prozess → Projekte: obere Hälfte in
   #process, untere in #projekte. Beide sind rechts gleich verankert und
   treffen sich deshalb bei jeder Breite im Scheitel. */
.process-redesign,
.cases { --tc-h: clamp(5rem, 9.5vw, 8.75rem); --tc-right: clamp(1.25rem, 6vw, 6rem); }
.tag-close {
  position: absolute;
  z-index: 1;
  right: var(--tc-right);
  width: calc(var(--tc-h) * 2.1445);
  height: var(--tc-h);
  overflow: visible;
  pointer-events: none;
}
.tag-close--top { bottom: 0; }
.tag-close--bottom { top: 0; z-index: -1; }
.tag-close path {
  fill: none;
  stroke: #2f82ff;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, .55));
}
.tag-close.is-scrubbed path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--tp, 0)); }
.tag-dot {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: .68rem;
  height: .68rem;
  margin: -.34rem 0 0 -.34rem;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, .16), 0 0 18px rgba(59, 130, 246, .75);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* ── Hero: Klammern verlassen das Logo (Variante E) ────────────────────────
   Werden per JS um „NANGA“ gesetzt und wandern beim Scrollen an den Rand. */
.hero-bracket {
  position: absolute;
  z-index: 25;
  left: 0;
  top: 0;
  background: rgba(154, 167, 187, var(--hba, 1));
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.home-hero .hero-bracket {
  background: rgba(216, 231, 255, calc(.72 * var(--hba, 1)));
}
.home-hero .hero-bracket.is-placed {
  opacity: 1;
  animation: none;
}
.hero-bracket--lt { clip-path: var(--br-lt); }
.hero-bracket--gt { clip-path: var(--br-gt); }
.hero-bracket.is-placed { animation: hero-bracket-in .9s var(--ease-out) .3s forwards; }
@keyframes hero-bracket-in { to { opacity: 1; } }

/* ── Leistungskarten: kleine Klammern beim Hovern (Variante E) ─────────── */
.services-number {
  position: relative;
  display: inline-block;
  width: fit-content;
  transition: color .28s ease, transform .5s var(--ease-out);
}
.services-number::before,
.services-number::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .5em;
  height: .552em;
  margin-top: -.3em;
  background: currentColor;
  opacity: 0;
  transition: opacity .3s ease, transform .5s var(--ease-out);
}
.services-number::before { right: 100%; margin-right: .2em; clip-path: var(--br-lt); transform: translateX(.6em); }
.services-number::after { left: 100%; margin-left: .2em; clip-path: var(--br-gt); transform: translateX(-.6em); }
.services-tile:hover .services-number,
.services-tile:focus-visible .services-number { transform: translateX(.7em); }
.services-tile:hover .services-number::before,
.services-tile:hover .services-number::after,
.services-tile:focus-visible .services-number::before,
.services-tile:focus-visible .services-number::after { opacity: 1; transform: none; }

/* ── Leistungsseiten (Web, App, KI, Backend) ────────────────────────────────
   Gemeinsame Bausteine: Vertrauenspunkte, Angebotskarten, Praxisbeispiele,
   Ablauf, weitere Leistungen, Themen-Chips im Kontakt. */
.svc-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
  font-weight: 600;
  color: #24344f;
  animation: webTextUp 850ms cubic-bezier(.19, 1, .22, 1) 520ms both;
}
.svc-trust li { display: inline-flex; align-items: center; gap: .55rem; }
@media (min-width: 720px) { .svc-trust { display: grid; grid-template-columns: repeat(2, max-content); } }
.svc-trust li::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .552rem;
  background: var(--nanga-blue);
  clip-path: var(--br-gt);
}

.svc-section { padding: clamp(5rem, 8vw, 8rem) 0; }
.svc-head { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.svc-head h2 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: .98;
  color: var(--nanga-ink);
  text-wrap: balance;
}
.svc-head > p:not(.web-page-kicker) { margin: 0; max-width: 40rem; font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.55; color: var(--nanga-text); }
@media (min-width: 1024px) {
  .svc-head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; column-gap: 4rem; }
  .svc-head--split .web-page-kicker { grid-column: 1 / -1; margin-bottom: -.2rem; }
  .svc-head--split > p:not(.web-page-kicker) { margin-bottom: .4rem; }
}

/* Angebot (2026-09-24, ersetzt das dunkle Kachel-Raster): helle Sektion, die drei
   Gruppen als Reiter, darunter ein weißes Panel aus offenen Zellen mit Haarlinien —
   dieselbe Sprache wie „Was wir für Sie bauen“ auf der Startseite. Der Kurz-Check
   darüber bleibt dunkel, damit sich hell und dunkel wieder abwechseln. */
.svc-nav-sec { position: relative; background: #f7fbff; border-top: 1px solid var(--nanga-line); }
.svc-check-sec .svc-head h2 { color: #f7fbff; }
.svc-check-sec .svc-head > p:not(.web-page-kicker) { color: #aebed5; }
.svc-check-sec .web-page-kicker { color: var(--nanga-sky); }
.svc-check-skip { margin: 1.8rem 0 0; font-size: .95rem; color: #aebed5; }
.svc-check-skip .link-arrow { margin-left: .35rem; }

/* Ohne JS: Gruppen untereinander, jede mit Überschrift. Mit JS (.is-tabbed): Reiter. */
.svc-groups { display: grid; gap: 3rem; }
.svc-groups.is-tabbed { gap: 0; }
.svc-group-head h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--nanga-ink); }
.svc-group-head p { margin: .4rem 0 1.2rem; font-family: var(--font-mono); font-size: .82rem; line-height: 1.45; color: var(--nanga-blue); }
.is-tabbed .svc-group-head { display: none; }
.is-tabbed .svc-group[hidden] { display: none; }

.svc-group-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--nanga-line); scrollbar-width: none; }
.svc-group-tabs[hidden] { display: none; }
.svc-group-tabs::-webkit-scrollbar { display: none; }
.svc-group-tab {
  display: grid;
  flex: 0 0 auto;
  gap: .3rem;
  margin: 0 2rem -1px 0;
  padding: .9rem 0 1.05rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease;
}
.svc-group-tab b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; color: #8d9cb6; transition: color .2s ease; }
.svc-group-tab span { max-width: 19rem; text-wrap: pretty; font-family: var(--font-mono); font-size: .74rem; line-height: 1.4; color: #8d9cb6; transition: color .2s ease; }
.svc-group-tab:hover b { color: var(--nanga-ink); }
.svc-group-tab[aria-selected="true"] { border-bottom-color: var(--nanga-blue); }
.svc-group-tab[aria-selected="true"] b { color: var(--nanga-ink); }
.svc-group-tab[aria-selected="true"] span { color: var(--nanga-blue); }
/* Schmal: nur die Gruppennamen als Reiter, umbrechend statt seitlich zu scrollen,
   damit kein Reiter abgeschnitten wird. Der Satz steht über dem Panel. */
@media (max-width: 719px) {
  .svc-group-tabs { flex-wrap: wrap; column-gap: 1.2rem; border-bottom: 0; }
  .svc-group-tab { margin: 0; padding: .7rem 0 .75rem; border-bottom-width: 2px; }
  .svc-group-tab b { font-size: .98rem; }
  .svc-group-tab span { display: none; }
  .is-tabbed .svc-group-head { display: block; }
  .is-tabbed .svc-group-head h3 { display: none; }
  .is-tabbed .svc-group-head p { margin: 1.2rem 0 0; }
}

.svc-cells {
  display: grid;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(7, 26, 58, .35);
}
.is-tabbed .svc-cells { margin-top: 2rem; }
.is-tabbed .svc-group:not([hidden]) .svc-cells { animation: svc-panel-in .45s var(--ease-out) both; }
@media (min-width: 720px) { .svc-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-cells { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
.svc-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 15rem;
  padding: 2rem 1.8rem 1.7rem;
  border-top: 3px solid transparent;
  box-shadow: -1px 0 0 var(--nanga-line), 0 -1px 0 var(--nanga-line);
  transition: border-color .25s ease, background-color .25s ease;
}
.svc-cell:hover,
.svc-cell:focus-within { border-top-color: var(--nanga-blue); background: #fbfdff; }
.svc-cell-title { margin: 0; font-family: inherit; font-size: 1.45rem; font-weight: 600; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.svc-cell-open { padding: 0; border: 0; background: none; font: inherit; color: var(--nanga-ink); text-align: left; cursor: pointer; }
.svc-cell-open:focus-visible { outline: none; }
.svc-cell:has(.svc-cell-open:focus-visible) { outline: 2px solid var(--nanga-blue); outline-offset: -2px; }
/* Ganze Zelle klickbar */
.svc-cell-hit { position: absolute; inset: 0; z-index: 1; }
/* Logo-Klammern beim Hovern, wie bei den Leistungskarten der Startseite */
.svc-cell-name { position: relative; }
.svc-cell-name::before,
.svc-cell-name::after {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--nanga-blue);
  opacity: 0;
  transition: opacity .2s ease, transform .3s var(--ease-out);
}
.svc-cell-name::before { content: "<"; position: absolute; right: 100%; margin-right: .3em; transform: translateX(.4em); }
.svc-cell-name::after { content: ">"; margin-left: .3em; transform: translateX(-.4em); }
.svc-cell:hover .svc-cell-name::before,
.svc-cell:hover .svc-cell-name::after,
.svc-cell:focus-within .svc-cell-name::before,
.svc-cell:focus-within .svc-cell-name::after { opacity: 1; transform: none; }
.svc-cell-fit { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--nanga-text); }
.svc-cell-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: auto 0 0; padding-top: 1rem; }
.svc-cell-dauer { font-family: var(--font-mono); font-size: .74rem; color: #7d8fae; font-variant-numeric: tabular-nums; }
.svc-cell-arrow { margin-left: auto; font-size: 1.25rem; line-height: 1; color: var(--nanga-blue); transition: transform .3s var(--ease-out); }
.svc-cell:hover .svc-cell-arrow { transform: translateX(.35rem); }
@media (max-width: 719px) {
  .svc-cell { min-height: 0; padding: 1.5rem 1.3rem 1.3rem; }
  .svc-cell-title { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .is-tabbed .svc-group:not([hidden]) .svc-cells { animation: none; }
  .svc-cell-arrow, .svc-cell-name::before, .svc-cell-name::after { transition: none; }
}

/* Angebots-Detail (2026-09-24). Ohne JS stehen die neun Details als dunkle Karten im
   Fluss (.svc-offer-details). Mit JS schiebt svcBento() das gewählte in die Seitenleiste
   .svc-sheet: fester Kopf mit Pfad und ×, scrollender Inhalt, fester Fuß mit Anfrage
   und „Weiter“. Unter 720 px wird daraus ein Blatt von unten. */
.svc-nav-panel {
  display: grid;
  gap: 1.6rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(139, 180, 255, .22);
  border-radius: 1rem;
  background: linear-gradient(170deg, #0f2240 0%, #0d1a2f 55%, #0b1628 100%);
  color: #c4d3ea;
}
.svc-nav-panel[hidden] { display: none; }
@keyframes svc-panel-in { from { opacity: 0; transform: translateY(8px); } }
.svc-art { margin: -.25rem 0 0; }
.svc-nav-kicker { margin: 0; font-family: var(--font-mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nanga-sky); }
.svc-nav-panel h3 {
  margin: .55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1.04;
  color: #fff;
  text-wrap: balance;
}
.svc-nav-lead { margin: .85rem 0 0; font-size: 1rem; line-height: 1.6; color: #c4d3ea; max-width: 52ch; }

/* Eckdaten als Leiste: die Fragen, die zuerst kommen */
.svc-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1px solid rgba(139, 180, 255, .2);
  border-bottom: 1px solid rgba(139, 180, 255, .2);
}
.svc-facts > div { padding: .85rem 1rem .85rem 0; }
.svc-facts > div + div { padding-left: 1rem; border-left: 1px solid rgba(139, 180, 255, .2); }
.svc-facts dt { margin-bottom: .35rem; font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fa3bf; }
.svc-facts dd { margin: 0; font-size: .93rem; line-height: 1.4; color: #fff; }
/* Schmal: „Ihr Aufwand“ bekommt eine eigene Zeile */
.svc-facts .svc-fact--wide { order: 3; grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid rgba(139, 180, 255, .2); }
.svc-facts[data-n="2"] { grid-template-columns: 1fr; }
.svc-facts[data-n="2"] > div { padding-left: 0; border-left: 0; }
.svc-facts[data-n="2"] .svc-fact--wide { order: 0; border-top: 0; }
.svc-facts[data-n="2"] > div + div { border-top: 1px solid rgba(139, 180, 255, .2); }
@media (min-width: 720px) {
  .svc-facts[data-n="3"] { grid-template-columns: .9fr 1.6fr 1fr; }
  .svc-facts[data-n="2"] { grid-template-columns: 1.6fr 1fr; }
  .svc-facts .svc-fact--wide,
  .svc-facts[data-n="2"] .svc-fact--wide { order: 0; grid-column: auto; border-top: 0; }
  .svc-facts[data-n="3"] .svc-fact--wide { padding-left: 1rem; border-left: 1px solid rgba(139, 180, 255, .2); }
  .svc-facts[data-n="2"] > div + div { padding-left: 1rem; border-left: 1px solid rgba(139, 180, 255, .2); border-top: 0; }
}

/* Leistungsumfang: „Das ist drin“ trägt das Detail, „Nicht dabei“ grenzt ehrlich ab */
.svc-scope b,
.svc-nav-objection b {
  display: block;
  margin-bottom: .65rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nanga-sky);
}
.svc-scope ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.svc-scope li { position: relative; padding-left: 1.5rem; font-size: .96rem; line-height: 1.5; color: #eef4ff; }
.svc-scope li::before {
  /* Logo-Klammer „>“ als Aufzählungszeichen */
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: .48rem;
  height: .53rem;
  background: var(--nanga-sky);
  clip-path: var(--br-gt);
}
.svc-scope--out b { color: #8fa3bf; }
.svc-scope--out li { color: #93a6c1; }
.svc-scope--out li::before { background: #5c718f; clip-path: none; top: .62em; height: 2px; width: .7rem; border-radius: 2px; }

.svc-nav-objection { padding: 1rem 1.2rem; border-left: 2px solid var(--nanga-blue); background: rgba(18, 103, 255, .08); }
.svc-nav-objection b { color: #8fa3bf; }
.svc-nav-q { margin: 0; font-size: .97rem; font-weight: 700; color: #fff; }
.svc-nav-a { margin: .35rem 0 0; font-size: .94rem; line-height: 1.55; color: #c4d3ea; }
.svc-nav-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.svc-ask {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.25rem;
  border-radius: .35rem;
  background: var(--nanga-blue);
  font-size: .94rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}
.svc-ask:hover { background: #0b55d9; }
.svc-ask span { transition: transform .3s var(--ease-out); }
.svc-ask:hover span { transform: translateX(4px); }
.svc-ask:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.svc-nav-next { padding: .4rem 0; border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 600; color: #aebed5; cursor: pointer; }
.svc-nav-next:hover { color: #fff; }
.svc-offers-note { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.4rem; color: var(--nanga-text); }
.svc-offers-note p { margin: 0; }

/* Ohne JS: Details untereinander im Fluss */
.svc-offer-details { display: grid; gap: 1rem; margin-top: 2rem; }
/* display: grid würde das hidden-Attribut überstimmen, das svcBento() setzt */
.svc-offer-details[hidden] { display: none; }
.svc-offer-details .svc-art { max-width: 32rem; }
@media (min-width: 900px) { .svc-offer-details > .svc-nav-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; } .svc-offer-details > .svc-nav-panel > * { grid-column: 1 / -1; } .svc-offer-details .svc-scope { grid-column: auto; } }

/* Seitenleiste */
.svc-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(36rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(139, 180, 255, .25);
  background: linear-gradient(170deg, #0f2240 0%, #0d1a2f 55%, #0b1628 100%);
  color: #c4d3ea;
  box-shadow: -40px 0 80px rgba(5, 12, 24, .45);
  overflow: hidden;
}
.svc-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: svc-sheet-in .45s var(--ease-out); }
.svc-sheet::backdrop { background: rgba(7, 26, 58, .42); backdrop-filter: blur(2px); animation: svc-fade .3s ease; }
@keyframes svc-sheet-in { from { transform: translateX(100%); } }
@keyframes svc-fade { from { opacity: 0; } }
.svc-sheet-grip { display: none; }
.svc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem .9rem 2rem; border-bottom: 1px solid rgba(139, 180, 255, .2); }
.svc-sheet-path { min-width: 0; overflow: hidden; font-family: var(--font-mono); font-size: .78rem; color: #8fa3bf; white-space: nowrap; text-overflow: ellipsis; }
.svc-sheet-path i { font-style: normal; color: var(--nanga-sky); }
.svc-offer-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid rgba(139, 180, 255, .28);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.svc-offer-close:hover { background: rgba(18, 103, 255, .35); }
.svc-offer-close:focus-visible, .svc-sheet-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.svc-sheet-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(139, 180, 255, .3) transparent; }
.svc-sheet .svc-offer-detail { padding: 1.6rem 2rem 2.2rem; border: 0; border-radius: 0; background: none; animation: svc-panel-in .4s var(--ease-out) both; }
.svc-sheet .svc-offer-detail:focus { outline: none; }
.svc-sheet .svc-nav-actions { display: none; }
.svc-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem 1rem 2rem; border-top: 1px solid rgba(139, 180, 255, .2); background: rgba(8, 17, 32, .75); }
.svc-sheet-next { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: .86rem; color: #8fa3bf; text-align: right; cursor: pointer; }
.svc-sheet-next b { overflow: hidden; font-weight: 600; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.svc-sheet-next > span:first-child { display: flex; gap: .3rem; min-width: 0; }
.svc-sheet-next i { display: grid; flex: 0 0 auto; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(139, 180, 255, .28); border-radius: 50%; font-family: var(--font-mono); font-style: normal; font-weight: 700; color: #fff; transition: background .2s ease; }
.svc-sheet-next:hover i { background: rgba(18, 103, 255, .35); }
@media (max-width: 719px) {
  .svc-sheet { inset: auto 0 0 0; width: 100%; height: calc(100dvh - 3.5rem); border-left: 0; border-top: 1px solid rgba(139, 180, 255, .25); border-radius: 1.1rem 1.1rem 0 0; box-shadow: 0 -20px 60px rgba(5, 12, 24, .5); }
  .svc-sheet[open] { grid-template-rows: auto auto minmax(0, 1fr) auto; animation-name: svc-sheet-up; }
  @keyframes svc-sheet-up { from { transform: translateY(100%); } }
  .svc-sheet-grip { display: block; width: 2.5rem; height: 4px; margin: .6rem auto 0; border-radius: 4px; background: rgba(139, 180, 255, .4); }
  .svc-sheet-head { padding: .5rem 1rem .75rem 1.25rem; }
  .svc-sheet .svc-offer-detail { padding: 1.25rem 1.25rem 1.8rem; gap: 1.35rem; }
  .svc-sheet-foot { padding: .75rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px)); }
  .svc-sheet-foot .svc-ask { flex: 1; justify-content: center; }
  .svc-sheet-next > span:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-sheet[open], .svc-sheet::backdrop, .svc-sheet .svc-offer-detail { animation: none; }
}

/* Schaubilder im Angebots-Detail (2026-09-24, ersetzen die Stockfotos). SVGs kommen aus
   _intern/leistungsseiten/services-schaubilder.js. Linie 1,5 px hellblau, genau ein
   Element in Nanga-Blau. Animation nur mit .play (setzt svcBento() beim Öffnen);
   ohne .play steht das fertige Bild. */
.sb { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans, "DM Sans", sans-serif); }
.sb .ln { fill: none; stroke: rgba(139, 180, 255, .6); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb .ln.hi, .sb .hi { stroke: #8bb4ff; }
.sb .old { fill: none; stroke: rgba(143, 163, 191, .5); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb .faint { fill: rgba(139, 180, 255, .22); }
.sb .oldf { fill: rgba(143, 163, 191, .22); }
.sb .wh { fill: #fff; }
.sb .acc { fill: #1267ff; }
.sb .hib { fill: #8bb4ff; }
.sb .uptime { fill: rgba(139, 180, 255, .55); }
.sb .bg { fill: #0d1a2f; }
.sb .note { fill: rgba(18, 103, 255, .14); stroke: #1267ff; stroke-width: 1.5; }
.sb .focus { fill: none; stroke: #1267ff; stroke-width: 2.5; }
.sb .accline { fill: none; stroke: #1267ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb .grid, .sb .grid line { stroke: rgba(139, 180, 255, .14); stroke-width: 1; }
.sb .chk { fill: rgba(18, 103, 255, .18); stroke: #1267ff; stroke-width: 1.5; }
.sb .tick { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sb .tick.sm { stroke-width: 1.4; stroke: #8bb4ff; }
.sb .lab { font: 700 9.5px var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .12em; text-transform: uppercase; fill: #8bb4ff; }
.sb .lab.o { fill: #7f93b3; }
.sb .lab.sm { font-size: 8px; letter-spacing: .08em; }
.sb .mono { font: 500 11px var(--font-mono, "JetBrains Mono", monospace); fill: #8bb4ff; }
.sb .mono.o { fill: #7f93b3; }
.sb .mono.sm { font-size: 8.5px; }
.sb .url { font: 500 8.5px var(--font-mono, "JetBrains Mono", monospace); fill: #8fa3bf; }
.sb .txt { font-size: 12px; font-weight: 500; fill: #fff; }
.sb .txt2 { font-size: 10.5px; fill: #aebed5; }
.sb .txt2.o { fill: #7f93b3; }
.sb .pilltxt { font: 700 9px var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .06em; fill: #fff; }
.sb .pilltxt.l { fill: #8bb4ff; }

.sb.play .draw { stroke-dasharray: 1; animation: sb-draw 1.1s var(--ease-out, ease-out) both; animation-delay: var(--d, 0s); }
.sb.play .pop { animation: sb-pop .6s var(--ease-out, ease-out) both; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
.sb.play .fly { animation: sb-fly 1.2s cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--d, 0s); }
.sb.play .pulse { animation: sb-pulse 1.6s ease-in-out 1.2s 2; transform-box: fill-box; transform-origin: center; }
.sb.play .beat { stroke-dasharray: 1; animation: sb-draw 2.2s cubic-bezier(.45, 0, .2, 1) both; animation-delay: var(--d, 0s); }
.sb.play .rise { animation: sb-rise .9s var(--ease-out, ease-out) both; animation-delay: var(--d, 0s); }
.sb.play .move { animation: sb-move 1.2s cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--d, 0s); }
.sb.play .cursor { animation: sb-blink 1s steps(1) 1.4s 3; }
@keyframes sb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sb-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes sb-fly { 0% { transform: translate(0, 0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(.3); opacity: 0; } }
@keyframes sb-pulse { 50% { transform: scale(1.12); } }
@keyframes sb-rise { from { transform: translateY(var(--ty)); } }
@keyframes sb-move { from { transform: translate(var(--fx, 0), var(--fy, 0)); opacity: 0; } 20% { opacity: 1; } }
@keyframes sb-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sb.play * { animation: none !important; } }

/* Praxisbeispiele: gleicher Stapel wie die Projekte auf der Startseite, rechts „vorher → nachher“ */
.svc-cases { background: #f7fbff; border-top: 1px solid var(--nanga-line); overflow: clip; }
.case-stack--compact .case-slide-inner { min-height: 0; }
.case-diff {
  position: relative;
  z-index: 1;
  align-self: center;
  overflow: hidden;
  border: 1px solid rgba(139, 180, 255, .25);
  border-radius: .7rem;
  background: #0a1526;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.case-diff-body { display: grid; gap: .6rem; padding: 1.3rem 1.1rem 1.4rem; }
.case-diff-line {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: .5rem;
  margin: 0;
  padding: .85rem 1rem;
  border-radius: .45rem;
  font-size: 1rem;
  line-height: 1.5;
}
.case-diff-line > span:first-child { font-family: var(--font-mono); font-weight: 700; }
.case-diff-line b { display: block; margin-bottom: .15rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.case-diff-line--minus { background: rgba(143, 163, 191, .08); color: #aebed5; }
.case-diff-line--minus > span:first-child,
.case-diff-line--minus b { color: #7f93b3; }
.case-diff-line--plus { background: rgba(59, 130, 246, .18); color: #fff; }
.case-diff-line--plus > span:first-child,
.case-diff-line--plus b { color: var(--nanga-sky); }

/* Ablauf */
.svc-steps { background: #fff; }
.svc-step-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: svc-step; }
@media (min-width: 720px) { .svc-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-step-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-step {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.6rem 1.4rem 1.5rem;
  border-top: 2px solid var(--nanga-blue);
  background: #f7fbff;
  counter-increment: svc-step;
}
.svc-step::before {
  content: "0" counter(svc-step);
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--nanga-blue);
}
.svc-step h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--nanga-ink); }
.svc-step p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--nanga-text); }
.svc-step .svc-effort { margin-top: auto; padding-top: .8rem; border-top: 1px solid #e3ecf9; font-size: .88rem; color: #24344f; }
.svc-effort b { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nanga-blue); margin-right: .35rem; }

/* Weitere Leistungen */
.svc-more { background: #f7fbff; border-top: 1px solid var(--nanga-line); }
.svc-more-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .svc-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-more-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem 1.5rem 1.4rem;
  border: 1px solid #d6e3f7;
  border-radius: .5rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .3s ease, background .3s ease, transform .4s var(--ease-out);
}
.svc-more-card:hover { border-color: var(--nanga-blue); transform: translateY(-3px); }
.svc-more-card span { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nanga-blue); }
.svc-more-card strong { font-size: 1.25rem; color: var(--nanga-ink); }
.svc-more-card p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--nanga-text); }
.svc-more-card em { margin-top: auto; padding-top: .5rem; font-style: normal; font-weight: 700; font-size: .9rem; color: var(--nanga-blue); }

/* Kurz-Check: eine Frage pro Schritt, rechts wachsen „Ihre Angaben“ in Alltagssprache mit */
.svc-check-sec {
  position: relative;
  overflow: clip;
  background: linear-gradient(160deg, #0b1830 0%, #0d1a2f 45%, #0f2f5c 100%);
  color: #f7fbff;
}
.svc-check { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .svc-check { grid-template-columns: minmax(0, 1.65fr) minmax(16rem, .75fr); align-items: start; } }
.svc-check-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 31rem;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid rgba(139, 180, 255, .2);
  border-radius: 1rem;
  background: rgba(216, 231, 255, .04);
}
.svc-check-main:focus { outline: none; }
.svc-check-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; font-family: var(--font-mono); font-size: .76rem; color: #8fa3bf; }
.svc-check-dots { display: inline-flex; align-items: center; gap: .45rem; }
.svc-check-dots::before,
.svc-check-dots::after { content: ""; width: .6rem; height: .66rem; background: var(--nanga-sky); opacity: .7; }
.svc-check-dots::before { clip-path: var(--br-lt); margin-right: .15rem; }
.svc-check-dots::after { clip-path: var(--br-gt); margin-left: .15rem; }
.svc-check-dots i { width: .55rem; height: .55rem; border: 1px solid rgba(139, 180, 255, .45); border-radius: 999px; }
.svc-check-dots i.is-done { border-color: var(--nanga-sky); background: var(--nanga-sky); }
.svc-check-dots i.is-now { border-color: #fff; background: var(--nanga-blue); box-shadow: 0 0 0 3px rgba(18, 103, 255, .3); }
.svc-check-q h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  text-wrap: balance;
}
.svc-check-q p { margin: .7rem 0 0; max-width: 38rem; font-size: 1rem; line-height: 1.55; color: #aebed5; }
.svc-check-opts { display: grid; gap: .7rem; }
@media (min-width: 640px) { .svc-check-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-opt {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 4.2rem;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(139, 180, 255, .24);
  border-radius: .6rem;
  background: rgba(216, 231, 255, .04);
  color: #eef4ff;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .3s var(--ease-out);
}
.svc-opt kbd {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(139, 180, 255, .4);
  border-radius: .35rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--nanga-sky);
}
.svc-opt:hover { border-color: rgba(139, 180, 255, .6); background: rgba(216, 231, 255, .08); }
.svc-opt[aria-pressed="true"] { border-color: #fff; background: var(--nanga-blue); }
.svc-opt[aria-pressed="true"] kbd { border-color: #fff; background: #fff; color: var(--nanga-blue); }
.svc-check-multi-hint { margin: -.6rem 0 0; font-family: var(--font-mono); font-size: .74rem; color: #8fa3bf; }
.svc-check-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid rgba(139, 180, 255, .15); }
.svc-check-back,
.svc-check-restart { padding: .4rem 0; border: 0; background: none; font-size: .9rem; font-weight: 600; color: #aebed5; cursor: pointer; }
.svc-check-back:hover,
.svc-check-restart:hover { color: #fff; }
.svc-check-back[disabled] { visibility: hidden; }
.svc-check-next {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.3rem;
  border: 0;
  border-radius: .35rem;
  background: #fff;
  font-size: .92rem;
  font-weight: 700;
  color: var(--nanga-blue);
  cursor: pointer;
}
.svc-check-next[disabled] { opacity: .4; cursor: not-allowed; }

/* Ergebnis */
.svc-result { display: flex; flex-direction: column; gap: 1.4rem; animation: svc-panel-in .5s var(--ease-out) both; }

/* Leuchtender Rand — bewusst nur bei „Hoher Nutzen“. Das ist der eine Moment auf
   der Seite, an dem der Besucher entscheidet. Überall sonst wäre es Lärm.
   Ohne @property-Unterstützung bleibt ein statischer Rand stehen, kein Ausfall. */
@property --svc-glow-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.svc-result[data-level="high"] {
  position: relative;
  padding: 1.6rem;
  margin: -.4rem;
  border-radius: 1rem;
  background: rgba(10, 22, 40, .35);
}
.svc-result[data-level="high"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--svc-glow-ang),
    rgba(96, 165, 250, .18) 0deg, rgba(96, 165, 250, 1) 55deg,
    rgba(53, 208, 186, .95) 105deg, rgba(96, 165, 250, .18) 185deg,
    rgba(96, 165, 250, .18) 360deg);
  /* weicher Schein nach außen, sonst geht der 2px-Rand auf Dunkelblau unter */
  filter: drop-shadow(0 0 7px rgba(96, 165, 250, .5));
  /* nur den Rand färben: Füllung ausstanzen */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: svc-glow-spin 4.5s linear infinite;
  pointer-events: none;
}
@keyframes svc-glow-spin { to { --svc-glow-ang: 360deg; } }
.svc-result-level {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  align-self: flex-start;
  padding: .45rem .8rem;
  border: 1px solid rgba(139, 180, 255, .4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.svc-result-level::before,
.svc-result-level::after { content: ""; width: .5rem; height: .55rem; background: var(--nanga-sky); }
.svc-result-level::before { clip-path: var(--br-lt); }
.svc-result-level::after { clip-path: var(--br-gt); }
.svc-result-level[data-level="high"] { border-color: var(--nanga-sky); background: rgba(18, 103, 255, .3); }
.svc-result-lead { margin: -.4rem 0 0; max-width: 40rem; font-size: 1rem; line-height: 1.55; color: #aebed5; }
.svc-result-offer { margin: 0; }
.svc-result-offer small { display: block; margin-bottom: .4rem; font-family: var(--font-mono); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nanga-sky); }
.svc-result-offer strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 400; line-height: 1.02; color: #fff; }
.svc-result-cols { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .svc-result-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem; } }
.svc-result-cols b { display: block; margin-bottom: .45rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nanga-sky); }
.svc-result-why { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.svc-result-why li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .4rem; font-size: .98rem; line-height: 1.5; color: #eef4ff; }
.svc-result-why li::before { content: "+"; font-family: var(--font-mono); font-weight: 700; color: var(--nanga-sky); }
.svc-result-cols p { margin: 0; font-size: .98rem; line-height: 1.5; color: #eef4ff; }
.svc-result-cols p + p { margin-top: .9rem; }
.svc-result-cols a { color: var(--nanga-sky); font-weight: 600; }
.svc-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid rgba(139, 180, 255, .15); }
.svc-result-actions .svc-check-next { text-decoration: none; }
.svc-result-secondary {
  padding: .7rem 1.1rem;
  border: 1px solid rgba(139, 180, 255, .45);
  border-radius: .35rem;
  background: none;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.svc-result-secondary:hover { border-color: #fff; }
.svc-check-restart { margin-left: auto; }

/* Ergebnis per Mail senden (Formular im Check-Ergebnis) */
.svc-mail { margin-top: -.2rem; }
.svc-mail-toggle { padding: .7rem 1.1rem; border: 1px solid rgba(139, 180, 255, .45); border-radius: .35rem; background: none; font-size: .9rem; font-weight: 700; color: #fff; cursor: pointer; }
.svc-mail-toggle:hover { border-color: #fff; }
.svc-mail-form { display: grid; gap: .9rem; max-width: 34rem; margin-top: 1rem; }
.svc-mail-form[hidden] { display: none; }
.svc-mail-intro { margin: 0; font-size: .95rem; line-height: 1.5; color: #d6e2f7; }
.svc-mail-row { display: grid; gap: .35rem; }
.svc-mail-row label { font-size: .85rem; font-weight: 600; color: #d6e2f7; }
.svc-mail-row input[type="text"], .svc-mail-row input[type="email"], .svc-mail-row textarea {
  width: 100%; padding: .7rem .85rem; border: 1px solid rgba(139, 180, 255, .4); border-radius: .35rem;
  background: rgba(255, 255, 255, .06); font: inherit; font-size: 1rem; color: #fff;
}
.svc-mail-row textarea { resize: vertical; min-height: 5rem; }
.svc-mail-row input:focus-visible, .svc-mail-row textarea:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.svc-mail-row [aria-invalid="true"] { border-color: #ffb4b4; }
.svc-mail .field-error { margin-top: .2rem; color: #ffb4b4; }
.svc-mail-consent label { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; font-weight: 400; line-height: 1.45; }
.svc-mail-consent input { flex: none; margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: #3b82f6; }
.svc-mail-consent a { color: var(--nanga-sky); text-decoration: underline; }
.svc-mail-send { justify-self: start; border: 0; }
.svc-mail-send[disabled] { opacity: .6; cursor: wait; }
.svc-mail-fail { margin: 0; padding: .7rem .9rem; border: 1px solid #ffb4b4; border-radius: .35rem; font-size: .9rem; color: #ffd6d6; }
.svc-mail-ok { margin: 1rem 0 0; padding: .9rem 1.1rem; border-left: 3px solid #60a5fa; background: rgba(96, 165, 250, .12); font-size: 1rem; line-height: 1.5; color: #fff; }
.svc-mail-ok:focus { outline: none; }
/* Honeypot: für Besucher unsichtbar, Bots füllen es aus */
.svc-mail-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Ihre Angaben */
.svc-check-summary {
  padding: 1.4rem 1.3rem;
  border: 1px dashed rgba(139, 180, 255, .3);
  border-radius: 1rem;
}
.svc-check-summary h3 { margin: 0 0 1rem; font-family: var(--font-mono); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nanga-sky); }
.svc-check-summary ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.svc-check-summary li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .45rem; font-size: .93rem; line-height: 1.45; color: #d8e7ff; animation: svc-panel-in .35s var(--ease-out) both; }
.svc-check-summary li::before { content: "+"; font-family: var(--font-mono); font-weight: 700; color: var(--nanga-sky); }
.svc-check-summary .svc-check-empty { font-size: .9rem; line-height: 1.5; color: #8fa3bf; }
.svc-check-noscript { margin: 0; color: #aebed5; }
.svc-check-noscript a { color: var(--nanga-sky); }

/* Kontakt: nächste Schritte und Themen-Chips */
.svc-next { display: grid; gap: .9rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: svc-next; }
.svc-next li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .8rem; align-items: baseline; font-size: .98rem; line-height: 1.5; color: #24344f; counter-increment: svc-next; }
.svc-next li::before {
  content: counter(svc-next);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(18, 103, 255, .35);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--nanga-blue);
  transform: translateY(.45rem);
}
.svc-topics { margin: 0 0 1.4rem; padding: 0; border: 0; }
.svc-topics legend { margin-bottom: .7rem; padding: 0; font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nanga-blue); }
.svc-topic-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.svc-topic {
  padding: .5rem .85rem;
  border: 1px solid #c7d8f5;
  border-radius: 999px;
  background: #fff;
  font-size: .86rem;
  font-weight: 600;
  color: #24344f;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.svc-topic:hover { border-color: var(--nanga-blue); color: var(--nanga-blue); }
.svc-topic[aria-pressed="true"] { border-color: var(--nanga-blue); background: var(--nanga-blue); color: #fff; }

/* ── Reduzierte Bewegung ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .split-word > span { transform: none; transition: none; }
  .stack-rail { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .stack-marquee { -webkit-mask-image: none; mask-image: none; }
  .stack-track { flex-wrap: wrap; justify-content: center; }
  .voice,
  .voice-tab,
  .services-media img,
  .magnetic,
  .services-number,
  .services-number::before,
  .services-number::after { transition: none !important; }
  .hero-bracket.is-placed { animation: none; opacity: 1; }
  .svc-nav-panel,
  .svc-result,
  .svc-check-summary li { animation: none !important; }
  /* Rand bleibt sichtbar, hört aber auf zu wandern */
  .svc-result[data-level="high"]::before { animation: none; background: rgba(96, 165, 250, .55); }
  .voice-progress { display: none; }
  #cookie-consent.cookie-card,
  .form-success .fs-line { animation: none; opacity: 1; transform: none; }
  header.header-hidden { transform: none; }
}
@media (max-width: 640px) {
  .project-showcase-copy h2 { font-size: clamp(1.9rem, 8.6vw, 2.15rem); }
}

/* ── Projekt-Slider (Webentwicklung) ───────────────────────────────────── */
.pshow { background: #fff; }
.pshow-stage-wrap { min-width: 0; }
.pshow-viewport { overflow: hidden; padding: 1rem; margin: -1rem; touch-action: pan-y; }
.pshow-track { display: flex; transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.pshow-slide {
  position: relative; flex: 0 0 100%; min-width: 0; min-height: clamp(21rem, 44vw, 36rem);
  opacity: 0; transition: opacity .55s ease;
}
.pshow-slide.is-active { opacity: 1; }
.pshow-slide img { -webkit-user-drag: none; user-select: none; }
.pshow-info { position: relative; min-height: 6.6rem; margin-top: 1rem; }
.pshow-meta {
  position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-end;
  justify-content: space-between; gap: .45rem 1.5rem; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .5s ease, transform .5s var(--ease-out), visibility 0s .5s;
}
.pshow-meta.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pshow-meta h3 { flex: 0 0 100%; margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; color: #071326; }
.pshow-meta p { flex: 1 1 22rem; margin: 0; max-width: 34rem; font-size: 1rem; line-height: 1.5; color: #4a6288; }
.pshow-visit { font-size: .95rem; font-weight: 600; color: #071a3a; text-decoration: none; border-bottom: 1.5px solid #071a3a; padding-bottom: .15rem; white-space: nowrap; }
.pshow-visit:hover { color: #3b82f6; border-color: #3b82f6; }
.pshow-bar {
  display: flex; align-items: center; gap: 1rem 1.5rem; margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(7, 26, 58, .16);
}
.pshow-tabs { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; flex: 1; min-width: 0; }
.pshow-tab {
  position: relative; padding: .55rem 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; color: #6680aa; transition: color .3s ease;
}
.pshow-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #071a3a; transform: scaleX(0); transition: transform .3s ease; }
.pshow-tab:hover { color: #071a3a; }
.pshow-tab.is-active { color: #071326; font-weight: 700; }
.pshow-tab.is-active::after { transform: scaleX(1); }
.pshow-arrows { display: flex; gap: .6rem; }
.pshow-arrow {
  width: 2.9rem; height: 2.9rem; border-radius: 999px; border: 1.5px solid #071a3a; background: transparent;
  color: #071a3a; font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background .25s ease, color .25s ease;
}
.pshow-arrow:hover { background: #071a3a; color: #fff; }
.pshow button:focus-visible, .pshow a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pshow-track, .pshow-slide { transition: none; }
}
@media (max-width: 560px) {
  .pshow-stage-wrap { width: 100%; max-width: 100%; }
  .pshow-slide { min-height: 21rem; }
  .pshow-info { min-height: 9rem; }
  .pshow-meta p { flex-basis: 100%; font-size: .93rem; }
  .pshow-arrow { width: 2.6rem; height: 2.6rem; }
  .pshow-tabs { gap: .2rem 1rem; }
  .pshow-tab { font-size: .85rem; }
}
.pshow .project-showcase-copy { max-width: 36rem; }
.pshow .project-showcase-copy h2 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1; overflow-wrap: normal; }
@media (max-width: 899px) { .pshow .project-showcase-copy h2 { font-size: clamp(2.2rem, 7vw, 3.2rem); } }
@media (max-width: 640px) { .pshow .project-showcase-copy h2 { font-size: clamp(1.9rem, 8.6vw, 2.15rem); } }

/* ── Unterseite Webentwicklung: Rhythmus, kompakter Check, Weiteres, Kontakt ── */
.page-web .svc-check-sec { padding: clamp(2.75rem, 4.5vw, 4rem) 0; }
.page-web .svc-check-sec .svc-head { gap: .7rem; margin-bottom: 1.5rem; }
.page-web .svc-check-sec .svc-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); max-width: 26ch; }
.page-web .svc-check-sec .svc-head > p:not(.web-page-kicker) { font-size: 1rem; }
.page-web .svc-check-main { min-height: 19rem; gap: 1.1rem; padding: clamp(1.1rem, 2.2vw, 1.8rem); }
.page-web .svc-check-summary { padding: 1.1rem 1.1rem; }
.page-web .svc-check-skip { margin-top: 1.1rem; }
.page-web #faq.web-page-faq { background: #fff !important; }
.svc-more--compact { padding: clamp(2.25rem, 3.5vw, 3.25rem) 0; }
.svc-more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; }
.svc-more-copy h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; color: var(--nanga-ink); }
.svc-more-copy p { margin: .5rem 0 0; max-width: 34rem; font-size: 1rem; line-height: 1.5; color: var(--nanga-text); }
.svc-more-links { display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; margin: 0; padding: 0; list-style: none; }
.svc-more-links a { display: inline-block; padding: .4rem 0; font-size: .97rem; font-weight: 600; color: var(--nanga-blue); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.svc-more-links a:hover { border-bottom-color: currentColor; }
.web-page-contact-copy .web-page-contact-sub { margin: 1rem 0 0; font-family: var(--font-mono); font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 700; letter-spacing: .02em; color: var(--nanga-blue); }
.pshow-viewport { padding: 1.5rem 1.5rem 3.5rem; margin: -1.5rem -1.5rem -3.5rem; }
.page-web .web-page-contact-copy h2 { font-size: clamp(2.2rem, 4.2vw, 4.1rem); }
@media (max-width: 640px) {
  .pshow-viewport { padding: .75rem .75rem 2.5rem; margin: -.75rem -.75rem -2.5rem; }
  .page-web .web-page-contact-copy h2 { font-size: clamp(1.9rem, 8.8vw, 2.75rem); }
}
@media (max-width: 640px) {
  .pshow .project-browser { box-shadow: 0 8px 20px rgba(7, 26, 58, .14); }
}
@media (min-width: 641px) {
  .pshow-viewport { padding: 2.5rem 3rem 5rem; margin: -2.5rem -3rem -5rem; }
}

/* ── Leistungsseiten App / KI / Backend: eigene Konzepte ──────────────────── */
.page-lp .lp-hero { min-height: clamp(30rem, 58vh, 40rem); }
.lp-sec { position: relative; padding: clamp(3.5rem, 6vw, 6rem) 0; }
.lp-sec .svc-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.lp-sec .svc-head h2 { max-width: 24ch; }
.lp-sec--white { background: #fff; }
.lp-sec--tint { background: #f7fbff; border-top: 1px solid var(--nanga-line); }
.lp-sec--dark {
  overflow: clip; color: #f7fbff;
  background: linear-gradient(160deg, #0b1830 0%, #0d1a2f 45%, #0f2f5c 100%);
}
.lp-sec--dark .svc-head h2, .lp-sec--dark .lp-h2 { color: #f7fbff; }
.lp-sec--dark .svc-head > p:not(.web-page-kicker) { color: #aebed5; }
.lp-sec--dark .web-page-kicker { color: var(--nanga-sky); }
.lp-h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; line-height: .98; color: var(--nanga-ink); text-wrap: balance; max-width: 18ch; }
.lp-lead { margin: 1.2rem 0 0; max-width: 34rem; font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.55; color: var(--nanga-text); }

/* Kurz-Check als optionaler Einstieg */
.lp-check-details { margin-top: 1.8rem; }
.lp-check-details > summary {
  display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.3rem; list-style: none; cursor: pointer;
  border: 1.5px solid #071a3a; border-radius: 999px; font-size: .95rem; font-weight: 700; color: #071a3a;
  transition: background .25s ease, color .25s ease;
}
.lp-check-details > summary::-webkit-details-marker { display: none; }
.lp-check-details > summary:hover { background: #071a3a; color: #fff; }
.lp-check-details > summary:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }
.lp-check-chev { transition: transform .3s ease; }
.lp-check-details[open] .lp-check-chev { transform: rotate(180deg); }
.lp-check-details--dark > summary { border-color: #8fb4ff; color: #f7fbff; }
.lp-check-details--dark > summary:hover { background: #f7fbff; color: #0d1a2f; }
.lp-check-embed {
  margin-top: 1rem; padding: clamp(1rem, 2.5vw, 1.8rem); border-radius: 1rem;
  border: 1px solid rgba(139, 180, 255, .25);
}
.lp-check-embed .svc-check-main { min-height: 19rem; gap: 1.1rem; padding: clamp(1.1rem, 2.2vw, 1.8rem); }
.lp-check-embed .svc-check-summary { padding: 1.1rem; }

/* Verweis-Streifen */
.lp-related { background: #fff; border-top: 1px solid var(--nanga-line); padding: 1.5rem 0; }
.lp-related-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; }
.lp-related-row p { margin: 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #52627a; }
.lp-related-row ul { display: flex; flex-wrap: wrap; gap: .2rem 1.8rem; margin: 0; padding: 0; list-style: none; }
.lp-related-row a { display: inline-block; padding: .4rem 0; font-size: .97rem; font-weight: 600; color: var(--nanga-blue); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.lp-related-row a:hover { border-bottom-color: currentColor; }
.page-lp #faq.web-page-faq { background: #f7fbff !important; }
.page-lp .web-page-contact-copy h2 { font-size: clamp(2.2rem, 4.2vw, 4.1rem); }

/* Karten, Listen */
.lp-card { padding: clamp(1.3rem, 2.5vw, 2rem); background: #fff; border: 1px solid #d6e3fa; border-radius: 1rem; }
.lp-card--accent { border-color: var(--nanga-blue); box-shadow: 0 0 0 1px var(--nanga-blue) inset; }
.lp-card--optional { border-style: dashed; background: transparent; }
.lp-card h3 { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.05; color: var(--nanga-ink); }
.lp-card dl { margin: 0; }
.lp-card dt { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nanga-blue); }
.lp-card dd { margin: .25rem 0 1rem; font-size: 1rem; line-height: 1.5; color: var(--nanga-text); }
.lp-card dd:last-child { margin-bottom: 0; }
.lp-opt { margin-left: .5rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #52627a; vertical-align: middle; }
.lp-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.lp-ticks li { position: relative; padding-left: 1.5rem; font-size: 1rem; line-height: 1.45; color: var(--nanga-text); }
.lp-ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: .55rem; height: .6rem; background: var(--nanga-blue); clip-path: var(--br-gt); }
.lp-compare-grid, .lp-ops { display: grid; gap: 1rem; }
@media (min-width: 760px) { .lp-compare-grid, .lp-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* App: Einsatzmöglichkeiten */
.lp-uses-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .lp-uses-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; } }
.lp-uses-list { margin: 0; padding: 0; list-style: none; counter-reset: lpuse; border-top: 1px solid #d6e3fa; }
.lp-use { position: relative; padding: 1.4rem 0 1.4rem 1.2rem; border-bottom: 1px solid #d6e3fa; counter-increment: lpuse; transition: background .3s ease; }
.lp-use::before { content: ""; position: absolute; left: 0; top: 1.4rem; bottom: 1.4rem; width: 3px; background: transparent; transition: background .3s ease; }
.lp-use.is-active::before { background: var(--nanga-blue); }
.lp-use h3 { margin: 0; font-size: 1.3rem; }
.lp-use-btn {
  display: flex; align-items: baseline; gap: .8rem; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: inherit; font-weight: 400; color: #52627a; transition: color .3s ease;
}
.lp-use-btn::before { content: "0" counter(lpuse); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; color: var(--nanga-blue); }
.lp-use.is-active .lp-use-btn, .lp-use-btn:hover { color: var(--nanga-ink); }
.lp-use-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 4px; }
.lp-use p { margin: .6rem 0 0 2.1rem; max-width: 32rem; font-size: 1.02rem; line-height: 1.55; color: var(--nanga-text); }
.lp-phone-wrap { margin: 0; }
.lp-phone-wrap figcaption { margin-top: 1rem; text-align: center; font-size: .85rem; color: #52627a; }
.lp-phone {
  position: relative; width: min(100%, 17.5rem); margin: 0 auto; aspect-ratio: 9 / 18.5; overflow: hidden;
  border: .5rem solid #0d1a2f; border-radius: 2.4rem; background: #f4f8ff;
  box-shadow: 0 26px 56px rgba(7, 26, 58, .26), 0 0 0 1px rgba(96, 165, 250, .25);
}
.lp-phone::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 0; width: 34%; height: .9rem; border-radius: 0 0 .8rem .8rem; background: #0d1a2f; transform: translateX(-50%); }
.lp-screens { position: absolute; inset: 0; }
.lp-screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .55rem; padding: 2rem .9rem .9rem; opacity: 0; transition: opacity .45s ease; font-size: .74rem; line-height: 1.3; color: #0d1a2f; }
.lp-screen.is-active { opacity: 1; }
.lp-s-bar { margin-bottom: .2rem; font-size: .9rem; font-weight: 700; }
.lp-s-card { padding: .6rem .7rem; background: #fff; border: 1px solid #d6e3fa; border-radius: .6rem; }
.lp-s-card b { display: block; }
.lp-s-card small { color: #52627a; font-size: .68rem; }
.lp-s-card--photo { border-style: dashed; }
.lp-s-btn { margin-top: auto; padding: .65rem; border-radius: .6rem; background: #1267ff; color: #fff; text-align: center; font-weight: 700; }
.lp-s-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.lp-s-chip { padding: .22rem .55rem; border: 1px solid #bcd0f5; border-radius: 999px; background: #fff; }
.lp-s-chip.is-on { border-color: #0d1a2f; background: #0d1a2f; color: #fff; }
.lp-s-steps { display: flex; gap: .3rem; margin-top: .5rem; }
.lp-s-steps i { flex: 1; height: .3rem; border-radius: 999px; background: #d6e3fa; }
.lp-s-steps i.is-done { background: #1267ff; }
.lp-s-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lp-s-tile { display: grid; place-items: center; min-height: 4.4rem; padding: .5rem; background: #fff; border: 1px solid #d6e3fa; border-radius: .7rem; text-align: center; font-weight: 700; }

/* App: Prototyp */
.lp-stages { display: grid; gap: .8rem; align-items: stretch; }
@media (min-width: 860px) { .lp-stages { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.2rem; } }
.lp-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem; align-items: center; padding: clamp(1.1rem, 2.4vw, 1.8rem); border: 1px solid rgba(139, 180, 255, .25); border-radius: 1rem; background: rgba(216, 231, 255, .05); }
.lp-stage h3 { margin: .2rem 0 .5rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.05; color: #f7fbff; }
.lp-stage p { margin: 0; font-size: 1rem; line-height: 1.5; color: #aebed5; }
.lp-stage p.lp-stage-n { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nanga-sky); }
.lp-stage-arrow { display: grid; place-items: center; color: var(--nanga-sky); font-family: var(--font-mono); font-size: 1.8rem; }
.lp-stage-arrow::before { content: "↓"; }
@media (min-width: 860px) { .lp-stage-arrow::before { content: "→"; } }
.lp-wire-wrap { display: grid; justify-items: center; gap: .5rem; }
.lp-wire { display: flex; flex-direction: column; gap: .35rem; width: 5.4rem; aspect-ratio: 9 / 17; padding: .55rem; border: 2px dashed #8fb4ff; border-radius: 1rem; }
.lp-wire i { display: block; height: .55rem; border-radius: .2rem; background: rgba(143, 180, 255, .3); }
.lp-wire i:nth-child(1) { height: .85rem; }
.lp-wire i:nth-child(3) { height: 1.6rem; }
.lp-wire i:nth-child(4) { margin-top: auto; height: .8rem; }
.lp-wire--built { border-style: solid; border-color: #3b82f6; background: #12294d; box-shadow: 0 0 22px rgba(59, 130, 246, .35); }
.lp-wire--built i { background: #3b82f6; }
.lp-wire--built i:nth-child(2) { background: #8fb4ff; }
.lp-wire-cap { font-size: .68rem; color: #8fa3bf; }
.lp-after { margin: 1.8rem 0 0; max-width: 44rem; font-size: 1.02rem; line-height: 1.55; color: #aebed5; }
@media (max-width: 480px) { .lp-stage { grid-template-columns: 1fr; justify-items: start; } }

/* KI: Vorher / Nachher */
.lp-ba-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.lp-ba-pair { display: grid; align-items: stretch; border: 1px solid #cfe0fa; border-radius: 1rem; overflow: hidden; }
.lp-ba-before, .lp-ba-after { padding: 1.2rem 1.4rem; }
.lp-ba-before { background: #fff; }
.lp-ba-after { background: #0d1a2f; color: #f7fbff; }
.lp-ba-tag { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #52627a; }
.lp-ba-after .lp-ba-tag { color: var(--nanga-sky); }
.lp-ba-pair p { margin: .5rem 0 0; font-size: 1.08rem; line-height: 1.45; font-weight: 600; }
.lp-ba-arrow { display: grid; place-items: center; padding: .2rem 0; background: #eef4ff; color: var(--nanga-blue); font-family: var(--font-mono); font-size: 1.3rem; }
.lp-ba-arrow::before { content: "↓"; }
@media (min-width: 800px) {
  .lp-ba-pair { grid-template-columns: minmax(0, 1fr) 3.4rem minmax(0, 1fr); }
  .lp-ba-arrow { padding: 0; }
  .lp-ba-arrow::before { content: "→"; }
}

/* KI: Kontrolle */
.lp-split { display: grid; gap: 2.2rem; }
@media (min-width: 900px) { .lp-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4.5rem; align-items: start; } }
.lp-points { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(18, 103, 255, .34); }
.lp-points li { padding: 1.2rem 0; border-bottom: 1px solid rgba(18, 103, 255, .34); }
.lp-points h3 { display: flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; color: var(--nanga-ink); }
.lp-points h3::before { content: ""; width: .55rem; height: .6rem; background: var(--nanga-blue); clip-path: var(--br-lt); }
.lp-points p { margin: .45rem 0 0 1.15rem; font-size: 1.02rem; line-height: 1.5; color: var(--nanga-text); }

/* KI: Pilot */
.lp-pilot-steps { margin: 0; padding: 0; list-style: none; counter-reset: lpps; display: grid; border: 1px solid rgba(139, 180, 255, .25); border-radius: 1rem; background: rgba(216, 231, 255, .05); overflow: hidden; }
@media (min-width: 800px) { .lp-pilot-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-pilot-steps li { display: grid; gap: .3rem; padding: 1.2rem 1.3rem; border-top: 1px solid rgba(139, 180, 255, .2); counter-increment: lpps; }
.lp-pilot-steps li:first-child { border-top: 0; }
@media (min-width: 800px) { .lp-pilot-steps li { border-top: 0; border-left: 1px solid rgba(139, 180, 255, .2); } .lp-pilot-steps li:first-child { border-left: 0; } }
.lp-pilot-steps li::before { content: "0" counter(lpps); font-family: var(--font-display); font-size: 1.8rem; line-height: 1; color: var(--nanga-sky); }
.lp-pilot-steps strong { font-size: 1.05rem; color: #f7fbff; }
.lp-pilot-steps span { font-size: .93rem; line-height: 1.45; color: #aebed5; }

/* Backend: Ausgangslage */
.lp-pains { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(18, 103, 255, .34); }
.lp-pains li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid rgba(18, 103, 255, .34); font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 2rem); line-height: 1.2; color: var(--nanga-ink); }
.lp-pains li::before { content: ""; width: .7rem; height: .78rem; background: var(--nanga-blue); clip-path: var(--br-lt); }

/* Backend: Verbindung */
.lp-tag { display: inline-block; margin: 0 0 1rem; padding: .3rem .8rem; border: 1px solid rgba(139, 180, 255, .45); border-radius: 999px; font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nanga-sky); }
.lp-flow { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; align-items: stretch; }
@media (min-width: 860px) { .lp-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .8rem; } }
.lp-node { display: grid; gap: .35rem; align-content: center; padding: 1.4rem; border: 1px solid rgba(139, 180, 255, .35); border-radius: 1rem; background: rgba(216, 231, 255, .06); }
.lp-node strong { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; color: #f7fbff; }
.lp-node small { font-size: .93rem; line-height: 1.4; color: #aebed5; }
.lp-flow-link { display: grid; place-items: center; min-height: 1.6rem; color: var(--nanga-sky); font-family: var(--font-mono); font-size: 1.6rem; }
.lp-flow-link::before { content: "↓"; }
@media (min-width: 860px) { .lp-flow-link::before { content: "→"; } }
.lp-flow-note { margin: 1.4rem 0 0; max-width: 44rem; font-size: 1.02rem; line-height: 1.55; color: #aebed5; }

/* Backend: Lösungswege, Betrieb */
.lp-paths { margin: 0; padding: 0; list-style: none; counter-reset: lppath; border-top: 1px solid rgba(18, 103, 255, .34); }
.lp-paths li { display: grid; gap: .4rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(18, 103, 255, .34); counter-increment: lppath; }
@media (min-width: 800px) { .lp-paths li { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: baseline; } }
.lp-paths li::before { content: "0" counter(lppath); font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--nanga-blue); }
.lp-paths h3 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--nanga-ink); }
.lp-paths p { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--nanga-text); }
.lp-ops-sec .svc-head { margin-bottom: 1.8rem; }
.page-lp .lp-sec .web-page-kicker, .page-lp .lp-sec .web-page-kicker span { color: #2f5fc0; opacity: 1; }
.page-lp .lp-sec--dark .web-page-kicker, .page-lp .lp-sec--dark .web-page-kicker span { color: #8fb4ff; }
@media (max-width: 640px) { .page-lp .web-page-hero-title { font-size: clamp(1.55rem, 7.2vw, 2.3rem); } }
.page-lp .web-page-hero-kicker, .page-lp .web-page-hero-kicker span { color: #2f5fc0; }
@media (max-width: 767px) { .cases--showcase .cases-mark { --bh: 34rem; --ax: 92%; --ay: 50%; } }

/* ── Über uns: Partnernetzwerk, Vertrauen, Ablauf ─────────────────────────── */
.ab-netbg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(139, 180, 255, .24) 1.2px, transparent 1.5px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 35%, #000 0%, transparent 75%);
}
.ab-netbg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 18% 0%, rgba(59, 130, 246, .2), transparent 55%); }
.ab-grid3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .ab-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-net-note { margin: 2.4rem auto 0; max-width: 46rem; text-align: center; font-size: .95rem; line-height: 1.6; color: #8fa3bf; }
.ab-trust { margin-top: 3rem; padding-top: 2.2rem; border-top: 1px solid rgba(96, 165, 250, .22); }
.ab-trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .ab-trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; } }
.ab-trust-list li { display: flex; align-items: flex-start; gap: 1rem; }
.ab-icon { flex: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(96, 165, 250, .35); border-radius: .75rem; background: rgba(59, 130, 246, .16); color: #8BB4FF; }
.ab-trust-list h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #F7FBFF; }
.ab-trust-list p { margin: .25rem 0 0; font-size: .95rem; line-height: 1.5; color: #AEBED5; }
.ab-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .ab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; } }
.ab-steps li { position: relative; padding: 1.6rem; border: 1px solid #C7D8F5; border-radius: .9rem; background: #fff; box-shadow: 0 14px 40px rgba(13, 26, 47, .06); }
.ab-step-n { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: #3B82F6; }
.ab-steps h3 { margin: .8rem 0 .4rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: #0D1A2F; }
.ab-steps p { margin: 0; font-size: 1rem; line-height: 1.5; color: #42526B; }
@media (min-width: 860px) {
  .ab-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -1.25rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 1.1rem; color: #3B82F6; }
}

/* Prozess: Ansprechpartner als Teil des Ablaufs */
.process-owner {
  position: relative;
  left: auto;
  top: auto;
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto;
  gap: 1.25rem 1.45rem;
  align-items: center;
  width: min(100%, 48rem);
  margin: clamp(1.6rem, 3vw, 2.4rem) 7% 0 auto;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(139, 180, 255, .34);
  border-bottom: 1px solid rgba(139, 180, 255, .2);
  color: #d8e7ff;
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}
.process-owner::before {
  content: "";
  position: absolute;
  left: -.9rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: #3b82f6;
  transform: skewX(-25deg);
  box-shadow: 0 0 14px rgba(59, 130, 246, .45);
}
.process-redesign.visible .process-owner { opacity: 1; transform: none; transition-delay: 1.9s; }
.process-redesign.is-scrubbed .process-owner { opacity: 1; transform: none; transition-delay: 0s; }
.process-owner-photo {
  display: block;
  width: 5.4rem;
  height: 5.4rem;
  overflow: hidden;
  border-radius: 999px;
  border: 2px solid rgba(139, 180, 255, .55);
  box-shadow: 0 0 0 7px rgba(59, 130, 246, .11), 0 18px 42px rgba(4, 12, 28, .28);
}
.process-owner-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.process-owner-eyebrow {
  display: block;
  margin-bottom: .32rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8bb4ff;
}
.process-owner-text strong {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 900;
  line-height: 1.05;
  color: #f7fbff;
}
.process-owner-role {
  display: block;
  margin-top: .28rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: #8bb4ff;
}
.process-owner-text p {
  margin: .7rem 0 0;
  max-width: 33rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #c7d8f5;
}
.process-owner-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid #8bb4ff;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 800;
  color: #8bb4ff;
  text-decoration: none;
  white-space: nowrap;
}
.process-owner-link:hover { color: #fff; border-color: #fff; }
.process-owner a:focus-visible { outline: 2px solid #8bb4ff; outline-offset: 3px; }
.why-panel-bottom--simple { grid-template-columns: 1fr; justify-items: start; }
.why-panel-bottom--simple .why-services-link { margin-left: 2.65rem; }
@media (max-width: 1120px) {
  .process-owner { width: min(100%, 40rem); margin-right: 0; grid-template-columns: 4.8rem minmax(0, 1fr); }
  .process-owner-link { grid-column: 2; justify-self: start; }
  .process-owner-photo { width: 4.8rem; height: 4.8rem; }
}
@media (max-width: 767px) {
  .process-owner {
    width: auto;
    max-width: 21rem;
    margin: 2.4rem 0 0 3.15rem;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    padding: 1rem 0;
  }
  .process-owner::before { left: -2.3rem; top: 1rem; bottom: 1rem; }
  .process-owner-photo { width: 4.2rem; height: 4.2rem; }
  .process-owner-link { grid-column: 1 / -1; justify-self: start; }
  .process-redesign.is-scrubbed .process-owner { opacity: 1; transform: none; }
  .why-panel-bottom--simple { padding: 1.55rem; }
  .why-panel-bottom--simple .why-services-link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .process-owner { opacity: 1; transform: none; transition: none; } }

/* Kontakt-Section der Startseite auch auf Unterseiten (ohne main.min-h-screen) */
main #contact.contact-home{position:relative;background:#eef6ff!important;padding:clamp(5rem,8vw,8rem) 0!important}
main #contact.contact-home>.relative{max-width:1280px!important}
main #contact.contact-home .slow-glow-drift{display:none!important}
main #contact.contact-home .scroll-reveal.mb-12{text-align:left!important;margin-bottom:1.15rem!important}
main #contact.contact-home .grid.lg\\:grid-cols-12{position:relative;z-index:1;display:grid!important;grid-template-columns:minmax(18rem,.85fr) minmax(22rem,1fr)!important;gap:clamp(3rem,7vw,7rem)!important;align-items:start!important}
main #contact.contact-home .lg\\:col-span-5,main #contact.contact-home .lg\\:col-span-6{grid-column:auto!important}
main #contact.contact-home h2{font-size:clamp(2.6rem,5vw,5.6rem)!important;line-height:.98!important;letter-spacing:0!important}
main #contact.contact-home h2 span{color:#52627a!important}
main #contact.contact-home form{border:1px solid rgba(96,165,250,.24)!important;border-radius:0!important;background:rgba(255,255,255,.8)!important;box-shadow:none!important;backdrop-filter:none!important;padding:clamp(1.4rem,3vw,2.4rem)!important}
main #contact.contact-home form .sm\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
main #contact.contact-home label{font-family:var(--font-mono)!important;font-size:.78rem!important;font-weight:900!important;text-transform:uppercase!important;color:#1267ff!important}
main #contact.contact-home input,main #contact.contact-home textarea{width:100%!important;min-width:0!important;border:1px solid rgba(96,165,250,.28)!important;border-radius:.15rem!important;background:#fff!important;box-shadow:none!important;color:#071732!important}
main #contact.contact-home button[type=submit]{border-radius:.25rem!important;background:#1267ff!important;box-shadow:none!important;color:#fff!important}
@media (max-width:980px){main #contact.contact-home .grid.lg\\:grid-cols-12{grid-template-columns:1fr!important}main #contact.contact-home form .sm\\:grid-cols-2{grid-template-columns:1fr!important}}
@media (max-width:560px){main #contact.contact-home h2{font-size:clamp(1.9rem,8.8vw,2.75rem)!important;overflow-wrap:anywhere}}
@media (max-width:560px){main #contact.contact-home>.relative{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:1rem!important;padding-right:1rem!important}main #contact.contact-home .grid.lg\:grid-cols-12,main #contact.contact-home form,main #contact.contact-home input,main #contact.contact-home textarea{min-width:0!important;max-width:100%!important}main #contact.contact-home h2{max-width:100%!important}main #contact.contact-home p{max-width:100%!important;overflow-wrap:anywhere!important}}
@media (max-width:560px){main #contact.contact-home{max-width:100vw!important;overflow:hidden!important}main #contact.contact-home *{min-width:0!important;box-sizing:border-box!important}main #contact.contact-home h2,main #contact.contact-home h2 span,main #contact.contact-home p,main #contact.contact-home label,main #contact.contact-home input,main #contact.contact-home textarea,main #contact.contact-home .text-sm,main #contact.contact-home .text-xs{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}main #contact.contact-home form{width:100%!important;overflow:hidden!important;padding:1.25rem!important}main #contact.contact-home input,main #contact.contact-home textarea{width:100%!important}}
main #contact.contact-home h2.contact-title span.split-word,
main #contact.contact-home h2.contact-title span.split-word > span { color: inherit !important; }
@media (min-width: 768px) {
  main #contact.contact-home h2.contact-title { font-size: clamp(2.4rem, 3.8vw, 3.9rem) !important; }
}
#contact .svc-next { margin-top: 1.75rem; }

/* ── Projekte (Startseite): schlichtes Karussell mit Laptop + Handy ────── */
.pc { position: relative; min-width: 0; min-height: clamp(21rem, 44vw, 39rem); display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; }
.pc-view {
  position: relative;
  height: clamp(15rem, 30vw, 26rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  touch-action: pan-y;
}
.pc-track {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  height: 100%;
  width: 100%;
  will-change: transform;
}
.pc-slide { flex: 0 0 62%; min-width: 0; }
.pc-link { position: relative; display: block; color: inherit; text-decoration: none; }
.pc-laptop { position: relative; }
.pc-screen {
  border: .4rem solid #11151d;
  border-bottom-width: .5rem;
  border-radius: .7rem .7rem 0 0;
  background: #11151d;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(7, 26, 58, .16);
}
.pc-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; -webkit-user-drag: none; user-select: none; }
.pc-base {
  position: relative;
  width: 112%;
  height: .6rem;
  margin-left: -6%;
  border-radius: 0 0 .9rem .9rem;
  background: linear-gradient(180deg, #d9e3f2, #b9c9e0);
  box-shadow: 0 10px 22px rgba(7, 26, 58, .14);
}
.pc-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: .28rem; transform: translateX(-50%); border-radius: 0 0 .5rem .5rem; background: #8fa3bf; }
.pc-phone {
  position: absolute;
  right: -5%;
  bottom: .3rem;
  width: 21%;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border: .3rem solid #11151d;
  border-radius: 1.3rem;
  background: #fff;
  box-shadow: 0 14px 30px rgba(7, 26, 58, .3);
}
.pc-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pc-controls { display: flex; justify-content: center; gap: .75rem; }
.pc-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #c7d8f5;
  border-radius: 999px;
  background: #fff;
  color: #071a3a;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pc-btn:hover { background: #071a3a; border-color: #071a3a; color: #fff; }
.pc-btn:focus-visible, .pc-link:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }
.pc-pause { position: relative; }
.pc-pause i { display: block; width: .8rem; height: .8rem; border-left: .22rem solid currentColor; border-right: .22rem solid currentColor; box-sizing: border-box; }
.pc-pause[aria-pressed="true"] i { width: 0; height: 0; border-left: .72rem solid currentColor; border-right: 0; border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; }
@media (max-width: 899px) { .pc { min-height: 0; } .pc-view { height: clamp(15rem, 56vw, 24rem); } .pc-slide { flex-basis: 70%; } }
@media (max-width: 560px) { .pc-view { height: 14rem; } .pc-slide { flex-basis: 76%; } .pc-phone { border-width: .22rem; border-radius: 1rem; } }
.page-web .lp-check-embed.svc-check-sec { padding: clamp(1rem, 2.5vw, 1.8rem); }
.lp-example { margin: 1rem 0 0; max-width: 22rem; font-size: .9rem; line-height: 1.5; color: var(--nanga-text); }
.lp-example b { color: var(--nanga-ink); }

/* ── Webentwicklung, Angebot: drei Zeilen mit Text links, dunklem Panel und Bild rechts ── */
.svc-nav-sec .svc-groups { gap: 1.1rem; }
.svc-nav-sec .svc-group {
  display: grid;
  grid-template-columns: minmax(11rem, .27fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}
.svc-nav-sec .svc-group-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem 1.6rem 1.4rem 0;
  border-top: 1px solid #dfe8f6;
  border-right: 1px solid #dfe8f6;
}
.svc-nav-sec .svc-group-head h3 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1; color: #0b1a3a; }
.svc-nav-sec .svc-group-head p {
  margin: 1rem 0 0;
  max-width: 15rem;
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  color: #7b8aa3;
}
.svc-nav-sec .svc-cells {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  min-height: 15rem;
  padding: .6rem 38% .6rem 2.6rem;
  background: #0d2142;
  box-shadow: none;
}
.svc-nav-sec .svc-cells[style*="--n:4"],
.svc-nav-sec .svc-cells[style*="--n:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 1.6rem; padding-right: 36%; }
/* Platzhalter für Bilder, links mit ">"-Spitze des dunklen Panels */
.svc-nav-sec .svc-cells::after {
  content: "Bild folgt";
  position: absolute;
  inset: 0 0 0 auto;
  width: 36%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa3bf;
  background: repeating-linear-gradient(135deg, #e7eef9 0 14px, #dfe8f6 14px 28px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%);
  pointer-events: none;
}
.svc-nav-sec .svc-cell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .15rem 1rem;
  min-height: 0;
  padding: 1.15rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(96, 165, 250, .32);
  background: transparent;
  box-shadow: none;
  transition: background .25s ease;
}
.svc-nav-sec .svc-cell:last-child { border-bottom: 0; }
.svc-nav-sec .svc-cells[style*="--n:4"] .svc-cell:nth-child(n+3),
.svc-nav-sec .svc-cells[style*="--n:2"] .svc-cell { border-bottom: 0; }
.svc-nav-sec .svc-cells[style*="--n:4"] .svc-cell:nth-child(even),
.svc-nav-sec .svc-cells[style*="--n:2"] .svc-cell:nth-child(even) { border-left: 1px solid rgba(96, 165, 250, .32); padding-left: 1.6rem; }
.svc-nav-sec .svc-cell:hover, .svc-nav-sec .svc-cell:focus-within { background: rgba(255, 255, 255, .045); border-top-color: transparent; }
.svc-nav-sec .svc-cell-title { grid-column: 1; margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.25; color: #fff; }
.svc-nav-sec .svc-cell-open { color: #fff; text-align: left; }
.svc-nav-sec .svc-cell-name::before, .svc-nav-sec .svc-cell-name::after { content: none; }
.svc-nav-sec .svc-cell-fit { grid-column: 1; margin: 0; font-size: .9rem; line-height: 1.45; color: #aebed5; }
.svc-nav-sec .svc-cell-foot { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; border: 0; }
.svc-nav-sec .svc-cell-arrow { margin: 0; font-size: 1.3rem; color: #3b82f6; }
.svc-offers-note { align-items: baseline; padding-top: 1.1rem; border-top: 1px solid #dfe8f6; }
@media (max-width: 899px) {
  .svc-nav-sec .svc-group { grid-template-columns: 1fr; gap: .6rem; }
  .svc-nav-sec .svc-group-head { padding: 1.2rem 0 .4rem; border-right: 0; }
  .svc-nav-sec .svc-group-head p { max-width: none; margin-top: .5rem; }
  .svc-nav-sec .svc-cells,
  .svc-nav-sec .svc-cells[style*="--n:4"],
  .svc-nav-sec .svc-cells[style*="--n:2"] { grid-template-columns: 1fr; min-height: 0; padding: .4rem 1rem 6.5rem; }
  .svc-nav-sec .svc-cells::after { inset: auto 0 0 0; width: auto; height: 5.2rem; clip-path: polygon(0 0, 50% 0, 53% 0, 100% 0, 100% 100%, 0 100%); }
  .svc-nav-sec .svc-cells[style*="--n:4"] .svc-cell:nth-child(n+3),
  .svc-nav-sec .svc-cells[style*="--n:2"] .svc-cell { border-bottom: 1px solid rgba(96, 165, 250, .32); }
  .svc-nav-sec .svc-cells[style*="--n:4"] .svc-cell:nth-child(even),
  .svc-nav-sec .svc-cells[style*="--n:2"] .svc-cell:nth-child(even) { border-left: 0; padding-left: 1rem; }
  .svc-nav-sec .svc-cell:last-child { border-bottom: 0 !important; }
}
.svc-nav-sec .svc-head h2 { max-width: 20ch; font-size: clamp(2.1rem, 3.5vw, 3.2rem); }
.svc-nav-sec .svc-cells[style*="--n:2"] { min-height: 9.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.about-page #faq.web-page-faq { background: #fff !important; }

/* ── App-Entwicklung: Design nach Vorlage (Inhalte unverändert) ─────────── */
.page-app .lp-hero { min-height: clamp(30rem, 52vh, 36rem); }
.page-app .lp-hero .web-page-lead { max-width: 34rem; }

/* Einsatzmöglichkeiten: Zeilen mit Nummer, Titel, Text und Pfeil; Handy mit ">" im Hintergrund */
.page-app #einsatz { position: relative; overflow: hidden; }
.page-app .lp-uses-list { border-top: 1px solid #dbe6f8; }
.page-app .lp-use { padding: 1.45rem 0; border-bottom: 1px solid #dbe6f8; }
/* Einsatzmöglichkeiten: nur der gewählte Eintrag zeigt seinen Text, die anderen sind eingeklappt.
   Hinweis auf weitere Infos: Zeile ist klickbar (Cursor, blauer Titel beim Hover), der aktive Eintrag hat den blauen Balken. */
.page-app .lp-use { cursor: pointer; padding-left: 1.2rem; }
.page-app .lp-use-btn { transition: color .3s var(--ease-out); cursor: pointer; }
.page-app .lp-use p { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease-out), opacity .3s ease, margin-top .3s ease; }
.page-app .lp-use.is-active p { max-height: 12rem; margin-top: .6rem; opacity: 1; }
.page-app .lp-use:not(.is-active) .lp-use-btn::before { color: #7b95bd; }
@media (hover: hover) {
  .page-app .lp-use:hover .lp-use-btn { color: #1267ff; }
  .page-app .lp-use:not(.is-active):hover { background: #f4f8ff; }
}
.page-app .lp-use h3 { font-family: inherit; font-size: 1.15rem; font-weight: 700; }
.page-app .lp-use-btn { font-family: inherit; font-weight: 700; color: #071a3a; }
.page-app .lp-use-btn::before { color: #7b95bd; }
.page-app .lp-use.is-active .lp-use-btn::before { color: #1267ff; }
.page-app .lp-use p { margin-left: 2.1rem; font-size: .98rem; color: #4a5d7c; }
.page-app .lp-phone-wrap { position: relative; isolation: isolate; }
.page-app .lp-phone-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -9rem;
  top: 46%;
  width: 36rem;
  height: 40rem;
  transform: translateY(-50%);
  background: linear-gradient(135deg, rgba(216, 231, 255, .95), rgba(139, 180, 255, .3));
  clip-path: var(--br-gt);
  opacity: .8;
  pointer-events: none;
}

/* App oder mobile Website: heller Block links, dunkler Block rechts mit ">"-Einschnitt */
.page-app #app-oder-web .svc-head { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .page-app #app-oder-web .svc-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; column-gap: 4rem; }
  .page-app #app-oder-web .svc-head .web-page-kicker { grid-column: 1 / -1; }
  .page-app #app-oder-web .svc-head h2 { max-width: 14ch; font-size: clamp(2.3rem, 4vw, 3.6rem); }
}
.page-app .lp-compare-grid { gap: 0; background: #e6f0ff; margin-top: 2.2rem; }
@media (min-width: 760px) { .page-app .lp-compare-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }
.page-app .lp-card { padding: clamp(1.6rem, 3vw, 2.6rem); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.page-app .lp-card h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); color: #0b1a3a; }
.page-app .lp-card--accent {
  background: #0b1f40;
  box-shadow: none;
  color: #fff;
}
@media (min-width: 760px) {
  .page-app .lp-card--accent { padding-left: clamp(3.4rem, 6vw, 5rem); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6% 50%); }
}
.page-app .lp-card--accent h3 { color: #fff; }
.page-app .lp-card--accent dt { color: #8bb4ff; }
.page-app .lp-card--accent dd { color: #d6e2f7; }
.page-app .lp-check-details > summary {
  display: inline-flex;
  padding: 0 0 .25rem;
  border: 0;
  border-bottom: 1.5px solid #1267ff;
  border-radius: 0;
  background: none;
  font-size: .98rem;
  color: #1267ff;
}

/* Prototyp: Text mit zwei Etappen links, Beispielansichten rechts */
.page-app .lp-proto-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .page-app .lp-proto-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; } }
.page-app .lp-proto .svc-head { margin-bottom: 2rem; }
.page-app .lp-proto .svc-head h2 { max-width: 14ch; }
.page-app .lp-steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .page-app .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.page-app .lp-steps li { padding-top: 1rem; border-top: 1px solid rgba(139, 180, 255, .35); }
.page-app .lp-steps h3 { margin: .35rem 0 .45rem; font-family: inherit; font-size: 1.12rem; font-weight: 700; color: #fff; }
.page-app .lp-steps p { margin: 0; font-size: .95rem; line-height: 1.5; color: #aebed5; }
.page-app .lp-steps .lp-stage-n { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3b82f6; }
.page-app .lp-after { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(139, 180, 255, .3); max-width: 34rem; font-size: .92rem; }
.page-app .lp-proto-visual { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.2rem); }
.page-app .lp-proto-visual .lp-wire { width: clamp(7rem, 12vw, 9.5rem); }
.page-app .lp-proto-visual .lp-wire:not(.lp-wire--built) { transform: rotate(-4deg); }
.page-app .lp-proto-visual .lp-stage-arrow::before { content: "→"; font-size: 1.6rem; }

/* Verwandte Leistungen: Text links, Links rechts getrennt */
.page-app .lp-related-row { justify-content: space-between; }
.page-app .lp-related-row ul { gap: 0; }
.page-app .lp-related-row li + li { margin-left: 1.6rem; padding-left: 1.6rem; border-left: 1px solid var(--nanga-line); }
.page-app .lp-related-row a { color: #1267ff; border-bottom-color: transparent; }
.page-app .lp-proto .svc-head h2 { max-width: none; font-size: clamp(2rem, 3.3vw, 3rem); }
.page-app #einsatz .svc-head h2 { max-width: 16ch; }

/* ── Backend-Entwicklung: Design nach Vorlage (Texte unverändert) ───────── */
.page-be .lp-hero { min-height: clamp(30rem, 52vh, 36rem); }
.page-be .lp-hero .web-page-lead { max-width: 34rem; }

/* Ausgangslage: 2 Spalten, "<" davor */
.page-be .lp-pains { display: grid; border-top: 0; }
@media (min-width: 800px) { .page-be .lp-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 5rem); } }
.page-be .lp-pains li {
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid #dbe6f8;
  border-bottom: 0;
  font-family: inherit;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.45;
  color: #071a3a;
}
.page-be .lp-pains li::before { margin-top: .35em; }

/* Systeme verbinden: drei Pfeil-Felder mit kleinen Beispiel-Ansichten */
.page-be .lp-flow { gap: 0; }
@media (min-width: 860px) { .page-be .lp-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-be .lp-flow-link { display: none; } }
.page-be .lp-node {
  position: relative;
  align-content: start;
  gap: .3rem;
  padding: 1.5rem 3rem 1.6rem 1.6rem;
  border: 0;
  border-radius: 0;
  background: rgba(59, 130, 246, .13);
}
@media (min-width: 860px) {
  .page-be .lp-node { clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 6% 50%); margin-left: -1.2rem; padding-left: 3.2rem; }
  .page-be .lp-node:first-child { margin-left: 0; padding-left: 1.6rem; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); }
  .page-be .lp-node:nth-child(3) { background: rgba(59, 130, 246, .2); }
  .page-be .lp-node:nth-child(5) { background: rgba(59, 130, 246, .13); }
}
.page-be .lp-node strong { font-family: inherit; font-size: 1.12rem; font-weight: 700; }
.page-be .lp-node small { font-size: .88rem; color: #aebed5; }
.page-be .lp-mini { display: grid; gap: .4rem; margin-top: 1rem; padding: .8rem .9rem; border-radius: .5rem; background: #f4f8ff; box-shadow: 0 10px 24px rgba(4, 12, 28, .35); }
.page-be .lp-mini i { display: block; height: .55rem; border-radius: .2rem; background: #cfdcf2; }
.page-be .lp-mini i:nth-child(1) { width: 60%; }
.page-be .lp-mini b { display: block; height: 1.3rem; border-radius: .3rem; background: #1267ff; }
.page-be .lp-mini em { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #3b82f6; }
.page-be .lp-mini--card { grid-template-columns: auto 1fr; align-items: center; column-gap: .6rem; }
.page-be .lp-mini--card i:nth-of-type(n+2) { grid-column: 1 / -1; }
.page-be .lp-mini--list i { height: 1.1rem; background: #e0e9f8; }
.page-be .lp-mini--list i:first-child { background: #bcd3fa; width: 100%; }

/* Lösungswege: dunkles Panel mit Zeilen, Bildplatzhalter rechts mit ">"-Spitze */
.page-be .lp-paths { position: relative; counter-reset: lppath; padding: .6rem 38% .6rem 2.4rem; border-top: 0; background: #0d2142; overflow: hidden; }
.page-be .lp-paths::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 36%;
  background: url("/assets/images/Backend%20Kundenverwaltung.webp") 77% 28% / 220% auto no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%);
  pointer-events: none;
}
.page-be .lp-paths li { position: relative; display: block; padding: 1.2rem 0; border-bottom: 1px solid rgba(96, 165, 250, .32); }
.page-be .lp-paths li:last-child { border-bottom: 0; }
.page-be .lp-paths li::before { content: none; }
.page-be .lp-paths h3 { font-family: inherit; font-size: 1.12rem; font-weight: 600; color: #fff; }
.page-be .lp-paths p { margin-top: .2rem; font-size: .92rem; color: #aebed5; }
@media (max-width: 799px) {
  .page-be .lp-paths { padding: .4rem 1.2rem 6.5rem; }
  .page-be .lp-paths::after { inset: auto 0 0 0; width: auto; height: 5.2rem; clip-path: none; background-size: 100% auto; background-position: 50% 38%; }
}
.page-be .lp-check-details > summary { display: inline-flex; padding: 0 0 .25rem; border: 0; border-bottom: 1.5px solid #1267ff; border-radius: 0; background: none; font-size: .98rem; color: #1267ff; }

/* Betrieb: heller Block mit zwei Spalten und feinem ">" */
.page-be .lp-ops { position: relative; gap: 0; overflow: hidden; background: #eaf2ff; margin-top: 2rem; }
.page-be .lp-ops::before {
  content: "";
  position: absolute;
  left: 38%;
  top: -20%;
  width: 24rem;
  height: 140%;
  background: rgba(184, 207, 245, .45);
  clip-path: var(--br-gt);
  pointer-events: none;
}
.page-be .lp-ops .lp-card { position: relative; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.page-be .lp-ops .lp-card h3 { font-size: 1.15rem; }
.page-be .lp-ticks li::before { content: none; }
.page-be .lp-ticks li { padding-left: 0; font-size: .98rem; }

/* Verwandte Leistungen */
.page-be .lp-related-row { justify-content: space-between; }
.page-be .lp-related-row ul { gap: 0; }
.page-be .lp-related-row li + li { margin-left: 1.6rem; padding-left: 1.6rem; border-left: 1px solid var(--nanga-line); }
.page-be .lp-related-row a { color: #1267ff; border-bottom-color: transparent; }

/* ── KI-Entwicklung: Design nach Vorlage (Texte unverändert) ───────────── */
.page-ki .lp-hero { min-height: clamp(30rem, 52vh, 36rem); }
.page-ki .lp-hero .web-page-lead { max-width: 34rem; }

/* Einsatzbeispiele: dunkle Zeilen "Heute → Mit Automatisierung" mit Bildplatzhalter */
.page-ki .lp-ba .svc-head h2 { max-width: 16ch; font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
.page-ki .lp-ba-list { gap: .8rem; }
.page-ki .lp-ba-pair {
  position: relative;
  min-height: 7.5rem;
  border: 0;
  border-radius: 0;
  background: #0d2142;
  overflow: hidden;
  align-items: center;
}
.page-ki .lp-ba-pair::after {
  content: "Bild folgt";
  position: absolute;
  inset: 0 0 0 auto;
  width: 28%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa3bf;
  background: repeating-linear-gradient(135deg, #e7eef9 0 14px, #dfe8f6 14px 28px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9% 50%);
  pointer-events: none;
}
.page-ki .lp-ba-pair--photo::after { content: none; }
.page-ki .lp-ba-photo { display: none; }
.page-ki .lp-ba-pair--photo .lp-ba-photo { display: block; align-self: stretch; }
@media (min-width: 860px) { .page-ki .lp-ba-pair--photo .lp-ba-photo { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9% 50%); } }
.page-ki .lp-ba-photo img { display: block; width: 100%; height: 100%; min-height: 10rem; object-fit: cover; }
.page-ki .lp-ba-before, .page-ki .lp-ba-after { background: transparent; color: #fff; padding: 1.3rem 1.6rem; }
.page-ki .lp-ba-tag, .page-ki .lp-ba-after .lp-ba-tag { color: #5fa0ff; font-size: .66rem; }
.page-ki .lp-ba-pair p { color: #fff; font-size: 1rem; font-weight: 500; }
.page-ki .lp-ba-arrow { background: transparent; color: #8bb4ff; }
@media (min-width: 860px) {
  .page-ki .lp-ba-pair { grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr) 28%; }
}
@media (max-width: 859px) {
  .page-ki .lp-ba-pair { padding-bottom: 4.6rem; }
  .page-ki .lp-ba-pair--photo { padding-bottom: 0; }
  .page-ki .lp-ba-pair::after { inset: auto 0 0 0; width: auto; height: 3.6rem; clip-path: none; }
}

/* Kontrolle: Pfeil-Spitze "<" vor den Punkten, Text darunter */
.page-ki .lp-points { border-top: 1px solid #dbe6f8; }
.page-ki .lp-points li { border-bottom: 1px solid #dbe6f8; }
.page-ki .lp-points h3 { font-family: inherit; font-size: 1.1rem; font-weight: 700; color: #071a3a; }
.page-ki .lp-points p { margin: .25rem 0 0 1.15rem; color: #5a6c88; }

/* Pilot: Text links, Bildplatzhalter rechts, vier Schritte mit Pfeilen darunter */
.page-ki .lp-pilot-top { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .page-ki .lp-pilot-top { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 4rem; } }
.page-ki .lp-pilot .svc-head { margin-bottom: 0; }
.page-ki .lp-pilot-visual { padding: .6rem; border: 1px solid rgba(139, 180, 255, .3); background: rgba(139, 180, 255, .1); }
.page-ki .lp-pilot-visual img { display: block; width: 100%; height: auto; }
.page-ki .lp-pilot-steps { margin-top: 2rem; background: rgba(139, 180, 255, .08); border-color: rgba(139, 180, 255, .3); }
.page-ki .lp-pilot-steps li { position: relative; }
@media (min-width: 800px) {
  .page-ki .lp-pilot-steps li:not(:last-child)::after { content: "→"; position: absolute; right: 1rem; top: 1.4rem; font-size: 1.3rem; color: #5fa0ff; }
}
.page-ki .lp-pilot-steps li::before { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: #3b82f6; }
.page-ki .lp-pilot-steps strong { font-size: .98rem; }

/* Verwandte Leistungen */
.page-ki .lp-related-row a { color: #1267ff; border-bottom-color: transparent; }
.page-ki .lp-ba .svc-head h2 { max-width: 22ch; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.page-ki .lp-pilot .svc-head h2, .page-ki .lp-control .lp-h2 { font-size: clamp(2rem, 3.3vw, 3rem); }

/* ── Projekte (Unterseite) ──────────────────────────────────────────────── */
.web-page-button-dark { background: #0d1a2f; color: #fff; border-color: #0d1a2f; }
.web-page-button-dark:hover { background: #142b4a; }
.pj-hero { min-height: clamp(28rem, 48vh, 34rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.pj-hero-inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .pj-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.pj-hero .web-page-lead { max-width: 30rem; }
.pj-link { display: inline-flex; align-items: center; gap: .4rem; margin-left: 1.4rem; font-size: .95rem; font-weight: 600; color: #1267ff; text-decoration: none; }
.pj-link:hover { text-decoration: underline; }

.pj-work { padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3rem, 5vw, 5rem); background: #fff; }
.pj-work-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #dbe6f8; }
.pj-work-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; color: #0b1a3a; }
.pj-work-head p { margin: 0; font-size: .95rem; color: #5a6c88; }
.pj-list { display: grid; gap: clamp(2rem, 4vw, 3.2rem); margin-top: 2rem; }
.pj-row { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) {
  .pj-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; }
  .pj-row--3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .pj-row--3 .pj-media { order: 1; } .pj-row--3 .pj-info { order: 2; }
}
.pj-media { position: relative; display: grid; place-items: center; padding: clamp(.5rem, 1.5vw, 1.2rem) clamp(.5rem, 1.5vw, 1.2rem) clamp(1.2rem, 2.5vw, 2rem); background: transparent; }
.pj-media .project-browser { width: min(100%, 38rem); }
.pj-cat { margin: 0; font-size: .92rem; color: #5a6c88; }
.pj-info h3 { margin: .3rem 0 .6rem; font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.05; color: #0b1a3a; }
.pj-desc { margin: 0; font-size: 1rem; line-height: 1.5; color: #4a5d7c; max-width: 24rem; }
.pj-tags { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 1rem 0 1.4rem; font-size: .82rem; color: #7b8aa3; }
.pj-tags span + span::before { content: "/"; margin-right: 1rem; color: #b6c4db; }
.pj-visit { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .3rem; border-bottom: 1.5px solid #1267ff; font-size: .95rem; font-weight: 700; color: #071a3a; text-decoration: none; width: fit-content; }
.pj-visit:hover { color: #1267ff; }
.pj-more { margin: .8rem 0 0; font-size: .95rem; line-height: 1.6; color: #4a5d7c; max-width: 30rem; }

.pj-band { position: relative; overflow: hidden; background: #0d1a2f; color: #fff; padding: clamp(2.2rem, 4vw, 3.2rem) 0; }
.pj-band::after { content: ""; position: absolute; right: -4rem; top: 50%; width: 20rem; height: 22rem; transform: translateY(-50%); border: 2px solid rgba(59, 130, 246, .5); clip-path: var(--br-gt); pointer-events: none; opacity: .7; }
.pj-band-inner { position: relative; z-index: 1; display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 860px) { .pj-band-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } .pj-band-inner p { padding-left: 2.5rem; border-left: 1px solid rgba(139, 180, 255, .3); } }
.pj-band h2 { margin: 0; max-width: 18ch; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; }
.pj-band p { margin: 0; max-width: 22rem; color: #aebed5; line-height: 1.5; }
.pj-hero .web-page-hero-title { font-size: clamp(2.3rem, 4.2vw, 3.7rem); line-height: 1; }
.pj-hero .web-page-hero-title span { display: block; white-space: nowrap; }
.pj-band h2 { max-width: 24ch; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

/* ── Startseite: einheitliche Typografie, Abstände und Raster ───────────── */
.page-home { --home-wrap: min(100% - 3rem, 1280px); --home-h2: clamp(2rem, 3.2vw, 2.8rem); --home-pad: clamp(4rem, 6vw, 5.5rem); }
.page-home .services-redesign--intro h2,
.page-home .project-showcase-copy h2,
.page-home #nanga-process-preview h2,
.page-home .contact-title {
  font-family: var(--font-display);
  font-size: var(--home-h2) !important;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* Intro: Überschrift links, Linie, Text rechts */
.page-home .services-redesign--intro { background: #f4f8ff !important; }
.page-home .services-redesign--intro > .services-intro { padding-top: clamp(11rem, 12vw, 13rem); padding-bottom: var(--home-pad); }
.page-home .services-redesign--intro .services-intro-inner { width: var(--home-wrap); max-width: none; margin: 0 auto; padding: 0; }
.page-home .services-redesign--intro .services-intro-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .page-home .services-redesign--intro .services-intro-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; } }
.page-home .services-redesign--intro .services-intro h2 { max-width: 16ch; color: #080c45; }
.page-home .intro-muted { color: #1267ff; }
.page-home .services-redesign--intro .services-intro-copy {
  max-width: 34rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: #3d4f6d;
}
@media (min-width: 900px) { .page-home .services-redesign--intro .services-intro-copy { padding-left: 3rem; border-left: 1px solid #c7d8f5; } }

/* Projekte: Kopfzeile oben, großes Karussell darunter */
.page-home .cases--showcase { padding: var(--home-pad) 0; background: linear-gradient(180deg, #e9f2ff, #f2f7ff) !important; }
.page-home .cases--showcase .cases-mark, .page-home .cases--showcase .tag-close, .page-home .cases--showcase .tag-dot { display: none; }
.page-home .cases--showcase .project-showcase { display: block; width: var(--home-wrap); max-width: none; margin: 0 auto; }
.page-home .project-showcase-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: end; max-width: none; margin-bottom: 1rem; }
.page-home .project-showcase-copy > * { grid-column: 1; }
.page-home .project-showcase-copy .project-showcase-button { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; min-height: 3.2rem; padding: 0 1.8rem; font-size: .95rem; }
.page-home .project-showcase-copy .section-lead { margin: .8rem 0 0; max-width: 34rem; }
.page-home .project-showcase-copy h2 br { display: none; }
@media (max-width: 700px) {
  .page-home .project-showcase-copy { grid-template-columns: 1fr; }
  .page-home .project-showcase-copy .project-showcase-button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 1.2rem; }
}
.page-home .pc { min-height: 0; gap: 1.2rem; margin-top: 1rem; }
.page-home .pc-view { height: clamp(18rem, 36vw, 33rem); margin: 0 calc(50% - 50vw); }
.page-home .pc-slide { flex-basis: 56%; }
.page-home .pc-controls { align-items: center; justify-content: flex-start; gap: 1rem 1.5rem; }
.page-home .pc-caption { margin: 0; margin-right: auto; font-size: .95rem; color: #5a6c88; }
.page-home .pc-caption b { font-weight: 700; color: #0b1a3a; }
.page-home .pc-count { font-size: .9rem; color: #5a6c88; font-variant-numeric: tabular-nums; }
.page-home .pc-btns { display: flex; gap: .6rem; }
@media (max-width: 899px) { .page-home .pc-slide { flex-basis: 74%; } .page-home .pc-view { height: clamp(14rem, 52vw, 24rem); } }

/* Prozess: gleiche Überschriftengröße */
.page-home #nanga-process-preview h2 { letter-spacing: -.01em; }

/* Kontakt: gleiche Rhythmik wie die übrigen Abschnitte */
.page-home #contact { padding-top: var(--home-pad) !important; padding-bottom: var(--home-pad) !important; }
.page-home .project-showcase-copy h2 span.split-word, .page-home .services-redesign--intro h2 span.split-word { display: inline-block; }
.page-home .project-showcase-copy h2 span.split-word > span, .page-home .services-redesign--intro h2 span.split-word > span { display: inline-block; }
.page-home .project-showcase-copy h2 { max-width: none; }
.page-home .services-redesign--intro .services-intro h2 { max-width: 20ch; }

/* Leistungs-Karten: helle, vollflächige Karten mit Nummer, Titel und Pfeil */
.page-home .services-redesign--cards-first .services-tile {
  min-height: clamp(8.5rem, 10vw, 10rem);
  background: #f4f8ff !important;
  border: 1px solid #c7d8f5;
  box-shadow: 0 16px 40px rgba(13, 26, 47, .14);
}
.page-home .services-redesign--cards-first .services-tile:hover,
.page-home .services-redesign--cards-first .services-tile:focus-visible { background: #0d1a2f !important; }
.page-home .services-redesign--cards-first .services-number {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #7b95bd;
}
.page-home .services-redesign--cards-first .services-tile strong { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
.page-home .project-showcase-copy h2 .split-word,
.page-home .project-showcase-copy h2 .split-word > span { display: inline-block !important; color: inherit !important; }
.page-home .services-redesign--intro > .services-intro { padding-top: clamp(14rem, 15vw, 16rem); }

/* Projekte-Seite: ganze Desktop- und Handy-Ansicht, Handy überlappt den Browser */
.pj-hero .project-browser-screen, .pj-media .project-browser-screen { aspect-ratio: 1440 / 950; }
.pj-media { display: flex; align-items: center; justify-content: center; }
.pj-media .project-browser { flex: 0 1 42rem; width: auto; min-width: 0; }

/* Projekte (Startseite): ganze Desktop- und Handy-Ansicht ohne Anschnitt */
.pc-track { height: auto; gap: clamp(3.5rem, 10vw, 9rem); }
.pc-screen { aspect-ratio: 1440 / 950; }
.pc-phone { width: 24%; right: -7%; bottom: -.9rem; }
.page-home .pc-view { height: auto; padding: .5rem 0 1.6rem; }
.page-home .pc-slide { flex-basis: 54%; }
@media (max-width: 899px) { .page-home .pc-view { height: auto; } .page-home .pc-slide { flex-basis: 74%; } }
@media (max-width: 560px) { .page-home .pc-slide { flex-basis: 80%; } }

/* Angebots-Gruppen: Foto rechts mit ">"-Spitze statt Platzhalter */
.svc-nav-sec .svc-cells--photo::after { content: none; }
.svc-cells-photo { position: absolute; inset: 0 0 0 auto; width: 36%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%); pointer-events: none; }
.svc-cells-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .svc-cells-photo { inset: auto 0 0 0; width: auto; height: 5.2rem; clip-path: none; }
  .svc-nav-sec .svc-cells.svc-cells--photo { padding-bottom: 6.5rem; }
}

/* Backend „Systeme verbinden“: scharfe Mini-Oberflächen statt Platzhalter-Balken */
.page-be .lp-ui { margin-top: 1rem; padding: .85rem .9rem; border-radius: .5rem; background: #f4f8ff; color: #0d1a2f; box-shadow: 0 10px 24px rgba(4, 12, 28, .35); font-size: .74rem; line-height: 1.3; }
.page-be .lp-ui b { display: block; font-weight: 700; color: #0d1a2f; }
.page-be .lp-ui em { display: block; font-style: normal; color: #5a6c88; font-size: .68rem; }
.page-be .lp-ui-av { display: grid; flex: 0 0 auto; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .4rem; background: #dbe8ff; color: #1267ff; font-weight: 700; font-size: .72rem; }
.page-be .lp-ui--form { display: grid; gap: .2rem; }
.page-be .lp-ui--form label { font-size: .62rem; color: #5a6c88; }
.page-be .lp-ui-field { display: block; padding: .35rem .5rem; border: 1px solid #d3e0f5; border-radius: .3rem; background: #fff; color: #0d1a2f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-be .lp-ui-btn { display: block; margin-top: .35rem; padding: .45rem; border-radius: .3rem; background: #1267ff; color: #fff; font-weight: 700; text-align: center; }
.page-be .lp-ui--crm { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; }
.page-be .lp-ui-rail { display: grid; align-content: space-around; justify-items: center; }
.page-be .lp-ui-rail i { width: .55rem; height: .55rem; border: 1.5px solid #8fa3bf; border-radius: 50%; }
.page-be .lp-ui-card { display: grid; gap: .5rem; padding: .6rem; border: 1px solid #d3e0f5; border-radius: .4rem; background: #fff; }
.page-be .lp-ui-who { display: flex; gap: .5rem; align-items: center; }
.page-be .lp-ui-pill { justify-self: start; padding: .15rem .55rem; border-radius: 99px; background: #1267ff; color: #fff; font-weight: 700; font-size: .66rem; }
.page-be .lp-ui-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; color: #3a4a63; }
.page-be .lp-ui-card li { display: flex; gap: .45rem; align-items: center; }
.page-be .lp-ui-card li i { width: .6rem; height: .6rem; border: 1.5px solid #1267ff; border-radius: 50%; }
.page-be .lp-ui--team { display: grid; gap: .45rem; }
.page-be .lp-ui-note { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding: .5rem .55rem; border: 1px solid #d3e0f5; border-radius: .4rem; background: #fff; }
.page-be .lp-ui-note.is-on { border-color: #1267ff; box-shadow: inset 3px 0 0 #1267ff; }
.page-be .lp-ui-note time { align-self: start; font-size: .64rem; color: #8fa3bf; }

/* Projekte: Corinna Feature-Sektion */
.pj-feature { display: grid; gap: 1.6rem; }
.pj-feature-head { display: grid; gap: .8rem 2rem; align-items: start; }
@media (min-width: 900px) { .pj-feature-head { grid-template-columns: minmax(0, 1fr) auto; } .pj-feature-head .pj-tags { margin: 1.2rem 0 0; } }
.pj-feature-head h3 { margin: .3rem 0 .6rem; font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.05; color: #0b1a3a; }
.pj-feature-head .pj-desc { max-width: none; font-size: 1.1rem; }
.pj-feature-stage { display: grid; gap: 2rem; }
@media (min-width: 900px) { .pj-feature-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.pj-feature-device { position: relative; }
.pj-feature .pj-scroll { aspect-ratio: auto; height: clamp(22rem, 38vw, 31rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pj-feature .pj-scroll img { width: 100%; height: auto; object-fit: initial; }
.pj-scroll:focus-visible { outline: 2px solid #1267ff; outline-offset: -2px; }
.pj-feature-foot { display: grid; gap: 1rem 3rem; padding-top: 1.4rem; border-top: 1px solid #dbe6f8; align-items: center; }
@media (min-width: 900px) { .pj-feature-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pj-feature-foot h4 { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.05; color: #0b1a3a; }
.pj-feature-foot > p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #4a5d7c; }

.pj-feature-head { display: block; }
.pj-feature-foot { align-items: start; }
.pj-feature-text { display: grid; gap: .8rem; }
.pj-feature-text > p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #4a5d7c; }
.pj-feature-meta { display: flex; flex-direction: column; align-items: flex-start; }
.pj-feature-meta .pj-tags { margin: 0 0 1.2rem; }
@media (min-width: 900px) { .pj-feature-meta { align-items: flex-end; text-align: right; } .pj-feature-meta .pj-tags { justify-content: flex-end; } }

.pj-media .pj-scroll { aspect-ratio: auto; height: clamp(20rem, 34vw, 27rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pj-media .pj-scroll img { width: 100%; height: auto; object-fit: initial; }

/* Intro-Ablauf (Desktop): Marke mittig → Zeile tippt → Marke links, Text von rechts, Karten */
@media (min-width: 1024px) {
  .home-hero.hero-seq .hero-intro-brand:not(.visible) { opacity: 0; transform: scale(1.07); filter: blur(16px); }
  .home-hero.hero-seq .hero-rest-reveal:not(.visible) { opacity: 0; transform: translateY(28px); filter: none; pointer-events: none; transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
  .home-hero.hero-seq .hero-rest-reveal.visible { transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
  .home-hero-showcase.hero-seq .services-redesign--cards-first .services-list-inner { opacity: 0; transform: translateY(70px); }
  .home-hero-showcase.hero-seq.hero-cards-in .services-redesign--cards-first .services-list-inner { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
}

/* Vorab-Zustand (per Inline-Skript im <head>), damit vor dem Intro nichts aufblitzt */
@media (min-width: 1024px) {
  .hero-pre .home-hero .hero-intro-brand,
  .hero-pre .home-hero .hero-rest-reveal,
  .hero-pre .home-hero .hero-typewriter-line,
  .hero-pre .home-hero-showcase .services-list-inner { opacity: 0; }
  .hero-seq-init, .hero-seq-init * { transition: none !important; }
}

/* Projekte: Sprungziele unter dem fixen Header */
.pj-list > article { scroll-margin-top: 6rem; }

/* Startseite mobil: Hero weiter oben, weniger Leerraum */
@media (max-width: 640px) {
  .home-hero,
  .home-hero .home-hero-inner { min-height: clamp(22rem, 52svh, 27rem); }
  .home-hero .home-hero-inner { align-items: flex-start; padding-top: 7rem; padding-bottom: 2.2rem; }
}

/* Projekt-Karussell mobil: Name oben, darunter Zähler links und Pfeile rechts */
@media (max-width: 560px) {
  .page-home .pc-controls { flex-wrap: wrap; row-gap: .9rem; }
  .page-home .pc-caption { flex: 1 1 100%; margin-right: 0; }
  .page-home .pc-count { flex: 1 1 auto; }
  .page-home .pc-btns { flex: 0 0 auto; gap: .75rem; }
  .page-home .pc-btn { width: 2.9rem; height: 2.9rem; }
}

/* Apps: Einsatzmöglichkeiten mobil ohne Telefon-Beispiel (gehört nur zur Desktop-Ansicht) */
@media (max-width: 899px) {
  .page-app .lp-phone-wrap { display: none; }
}

/* Mobil: keine Querverweise auf weitere Leistungen ("Dazu passt außerdem", "Sie haben mehr vor?") */
@media (max-width: 899px) {
  .lp-related, .svc-more { display: none; }
}

/* Über uns: FAQ in derselben Größe wie auf den Leistungsseiten */
main.about-page #faq.web-page-faq { padding: clamp(5rem, 8vw, 7.5rem) 0 !important; overflow: visible !important; max-width: none !important; }
main.about-page #faq.web-page-faq .web-page-wrap { width: min(100% - 3rem, 1280px) !important; max-width: 1280px !important; margin: 0 auto !important; padding: 0 !important; }
main.about-page #faq.web-page-faq .web-page-section-head { max-width: none !important; margin-bottom: 2.5rem !important; }
main.about-page #faq.web-page-faq .web-page-section-head h2 { font-size: clamp(2.35rem, 5vw, 5.4rem) !important; line-height: .98 !important; }
main.about-page #faq.web-page-faq .web-page-faq-trigger { display: grid !important; grid-template-columns: 4rem minmax(0, 1fr) 2rem !important; gap: 1.5rem !important; align-items: center !important; padding: 1.25rem 0 !important; }
main.about-page #faq.web-page-faq .web-page-faq-trigger span { flex: none !important; font-size: 1.05rem !important; }
main.about-page #faq.web-page-faq .web-page-faq-trigger strong { display: block !important; flex: none !important; max-width: none !important; font-size: clamp(1rem, 1.45vw, 1.25rem) !important; line-height: 1.35 !important; }
main.about-page #faq.web-page-faq .web-page-faq-trigger em { flex: none !important; font-size: 2rem !important; }
main.about-page #faq.web-page-faq .web-page-faq-content p { max-width: 58rem !important; margin: 0 0 1.5rem 4rem !important; }
@media (max-width: 560px) {
  main.about-page #faq.web-page-faq .web-page-wrap { width: min(100% - 2rem, 1280px) !important; }
  main.about-page #faq.web-page-faq .web-page-faq-trigger { grid-template-columns: 2.6rem minmax(0, 1fr) 1.5rem !important; gap: .9rem !important; }
  main.about-page #faq.web-page-faq .web-page-faq-content p { margin-left: 0 !important; }
}

/* Footer mobil: kompakter, Linkgruppen zweispaltig */
@media (max-width: 639px) {
  footer > div { padding-top: 2.5rem !important; padding-bottom: 1.75rem !important; }
  footer > div > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.75rem 1.25rem !important; }
  footer > div > .grid > :nth-child(1) { grid-column: 1 / -1; }
  footer > div > .grid > :nth-child(2) { grid-column: 1; grid-row: 2 / span 2; }
  footer > div > .grid > :nth-child(3) { grid-column: 2; grid-row: 2; }
  footer > div > .grid > :nth-child(4) { grid-column: 2; grid-row: 3; }
  footer > div > .grid > :nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  footer > div > .grid > :first-child p { margin-top: 1rem !important; }
  footer > div > .grid h2 { font-size: .95rem !important; }
  footer > div > .grid ul { margin-top: .85rem !important; }
  footer > div > .grid ul.space-y-3 > * + * { margin-top: .6rem !important; }
  footer > div > .grid a { overflow-wrap: anywhere; }
  footer > div > .mt-14 { margin-top: 1.75rem !important; padding-top: 1.25rem !important; }
}

/* Einheitlicher Check-Einstieg auf allen Leistungsseiten: Hinweis + ein Link (die Aufklapp-Zeile ist ausgeblendet) */
.lp-check-details > summary { display: none !important; }
.lp-check-details { margin-top: 0; }
.svc-offers-note--dark { border-top-color: rgba(143, 180, 255, .3); color: #d6e2f7; }
.svc-offers-note--dark .link-arrow { color: #8fb4ff; }

/* Kontaktformular: Datenschutz-Zustimmung.
   Die allgemeinen #contact-Regeln (label in Versalien/Mono, input auf 100 % Breite, .flex als block)
   gelten mit !important für alle Felder. Hier gezielt mit höherer Spezifität zurücksetzen. */
html body #contact .contact-consent label {
  display: flex !important; align-items: flex-start !important; gap: .75rem !important;
  font-family: inherit !important; font-size: .875rem !important; font-weight: 400 !important;
  line-height: 1.55 !important; text-transform: none !important; letter-spacing: normal !important; color: #42526b !important;
  cursor: pointer;
}
html body #contact .contact-consent input[type="checkbox"] {
  flex: none !important; width: 1.1rem !important; height: 1.1rem !important; min-width: 0 !important;
  margin: .2rem 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: .2rem !important;
  accent-color: #1267ff; cursor: pointer;
}
html body #contact .contact-consent a { color: #1267ff !important; text-decoration: underline !important; }
html body #contact .contact-consent .field-error { margin-left: 1.85rem; }