/* ==========================================================================
   KrassMedien — Design System
   Berlin · Werbeagentur & Werbetechnik
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke — abgeleitet aus Logo (#090B09) und bestehender Farbwelt
     (#1E3C72 → #2A5298 Verlauf, #1D5D85 Steel, #25DAFF Cyan-Akzent) */
  --ink:        #0B0D10;
  --ink-800:    #12161C;
  --ink-700:    #1A2029;
  --ink-600:    #252D38;

  --navy:       #1E3C72;
  --navy-light: #2A5298;
  --steel:      #1D5D85;
  --cyan:       #25DAFF;
  --cyan-deep:  #0FA9CC;

  --paper:      #FFFFFF;
  --paper-50:   #F7F8FA;
  --paper-100:  #EFF2F5;
  --paper-200:  #E2E7ED;

  /* Semantisch – helle Flächen */
  --bg:         var(--paper);
  --surface:    var(--paper-50);
  --text:       var(--ink);
  --text-muted: #5C6675;
  --line:       rgba(11, 13, 16, .10);
  --line-soft:  rgba(11, 13, 16, .06);

  /* Typografie */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + .74vw, 2rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.7vw, 4.1rem);
  --step-5:  clamp(3rem, 1.9rem + 5.4vw, 7rem);

  /* Raster & Rhythmus */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --radius-s: 10px;
  --radius:   18px;
  --radius-l: 28px;

  /* Bewegung */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .5s;

  /* Markenverlauf – Basis fuer Buttons und Akzente */
  --grad-brand: linear-gradient(100deg, var(--navy) 0%, var(--steel) 52%, var(--cyan) 100%);
  --grad-ink:   linear-gradient(140deg, #171C24 0%, var(--ink) 72%);
  --grad-light: linear-gradient(140deg, #FFFFFF 0%, #EDF3F7 100%);

  --shadow-sm: 0 1px 2px rgba(11,13,16,.05), 0 4px 14px rgba(11,13,16,.05);
  --shadow:    0 2px 4px rgba(11,13,16,.04), 0 18px 45px -18px rgba(11,13,16,.22);
  --shadow-lg: 0 40px 90px -40px rgba(11,13,16,.45);

  --logo-knockout: #FFFFFF;
}

/* Dunkle Bereiche: gleiche Tokens, invertierte Semantik */
.is-dark {
  --bg:         var(--ink);
  --surface:    var(--ink-800);
  --text:       #FFFFFF;
  --text-muted: rgba(255, 255, 255, .64);
  --line:       rgba(255, 255, 255, .14);
  --line-soft:  rgba(255, 255, 255, .07);
  --logo-knockout: var(--ink);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Einige Themes setzen figcaption auf kursiv. Die verwendeten Schriften
   haben keinen Kursivschnitt, der Browser wuerde sie schraegstellen. */
figure, figcaption { margin: 0; font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

::selection { background: var(--cyan); color: var(--ink); }

/* Ohne diese Zeilen zeichnet der Browser beim Antippen seine eigene
   Markierung - ein rosa Aufblitzen, das nichts ueber den Zustand aussagt.
   "manipulation" nimmt zusaetzlich die Wartezeit heraus, mit der Browser
   sonst pruefen, ob ein zweiter Tipp zum Hineinzoomen folgt. */
a, button, [role="button"], label, summary,
input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-s);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* --------------------------------------------------------------------------
   3. Layout-Primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1560px; }
.container--narrow { max-width: 800px; }

.section {
  position: relative;
  background: var(--bg);
  color: var(--text);
  padding-block: var(--section-y);
}
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split {
  max-width: none;
  display: grid;
  gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 2px;
  background: var(--cyan);
  flex: none;
}
.section-head--center .eyebrow { justify-content: center; }
@media (max-width: 599px) {
  .eyebrow { font-size: .72rem; letter-spacing: .1em; }
  .eyebrow::before { width: 1.15rem; }
}

.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.h4 { font-size: var(--step-1); letter-spacing: -.02em; }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 58ch;
  margin-top: 1.4rem;
}
.body-text { color: var(--text-muted); max-width: 66ch; }
.body-text + .body-text { margin-top: 1.1rem; }

.accent { color: var(--cyan); }
.text-gradient {
  background: linear-gradient(96deg, var(--navy-light), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.is-dark .text-gradient {
  background: linear-gradient(96deg, #8FC4FF, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   4. Buttons & Links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-grad: var(--grad-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background-color: var(--btn-bg);
  background-image: var(--btn-grad);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--cyan) 55%, transparent);
  color: #fff;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); }

.btn .btn__icon { transition: transform .35s var(--ease-out); flex: none; }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-grad: none;
  --btn-fg: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover { --btn-fg: #fff; border-color: transparent; }

.btn--light { --btn-bg: #fff; --btn-grad: var(--grad-light); --btn-fg: var(--ink); }
.btn--light:hover { --btn-fg: #fff; }

.btn--sm { padding: .68rem 1.2rem; font-size: var(--step--1); }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--text);
  position: relative;
}
.link-arrow svg { transition: transform .4s var(--ease-out); flex: none; }
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.2rem;
}

/* --------------------------------------------------------------------------
   5. Header / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: clamp(.75rem, 2vw, 1.25rem);
  transition: padding-top .35s var(--ease);
}
/* Die Leiste bleibt beim Scrollen stehen und wird nur kompakter. */
.site-header[data-scrolled="true"] { padding-top: clamp(.4rem, 1.2vw, .7rem); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: .6rem .6rem .6rem 1.1rem;
  border-radius: 100px;
  /* Oben vollstaendig transparent, ohne Rahmen. */
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  --logo-knockout: var(--ink);
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease), color .4s var(--ease), padding .4s var(--ease);
}
/* Beim Scrollen nur so viel Abdunklung, dass die Schrift auch ueber
   hellen Abschnitten lesbar bleibt - weiterhin ohne Rahmen. */
.site-header[data-scrolled="true"] .nav {
  background: rgba(11, 13, 16, .72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .8);
  padding: .34rem .34rem .34rem .85rem;
}
/* Auf hellen Seiten (kein dunkler Hero) startet die Nav hell */
.site-header[data-theme="light"] .nav {
  background: rgba(255, 255, 255, .72);
  border-color: var(--line);
  color: var(--ink);
  --logo-knockout: #FFFFFF;
}
.site-header[data-theme="light"][data-scrolled="true"] .nav {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 40px -30px rgba(11, 13, 16, .45);
}

/* Eine Weichzeichnung muss das Handy bei jedem Scrollbild neu berechnen.
   Auf der schmalen, kompakten Leiste ist der Effekt kaum zu sehen - ein
   etwas deckenderer Hintergrund sieht gleich aus und kostet nichts. */
@media (max-width: 860px) {
  .site-header[data-scrolled="true"] .nav {
    background: rgba(11, 13, 16, .94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header[data-theme="light"][data-scrolled="true"] .nav {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.nav__logo {
  display: flex;
  align-items: center;
  flex: none;
  /* Ohne diese Regel greift der Standard-Hover des Themes (#333366)
     und faerbt die Logokachel in einem Fremdton. */
  transition: color .3s var(--ease);
}
.nav__logo:hover, .nav__logo:focus-visible { color: var(--cyan); }
.nav__logo svg {
  width: clamp(104px, 10.5vw, 128px);
  height: auto;
  transition: width .4s var(--ease);
}
/* Beim Scrollen zehn Prozent kleiner */
.site-header[data-scrolled="true"] .nav__logo svg {
  width: clamp(93.6px, 9.45vw, 115.2px);
}

.nav__menu {
  display: none;
  align-items: center;
  gap: clamp(.25rem, 1.4vw, 1.1rem);
  margin-inline: auto;
}
.nav__link {
  position: relative;
  display: block;
  padding: .5rem .85rem;
  border-radius: 100px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -.005em;
  color: inherit;
  opacity: .78;
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
  white-space: nowrap;
}
.nav__link:hover, .nav__link:focus-visible { opacity: 1; color: var(--cyan); }
.nav__link[aria-current="page"] { opacity: 1; font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: .22rem;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--cyan);
}

.nav__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 100px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
  cursor: pointer;
}
/* Sichtbare Antwort auf den Tipp - ersetzt die entfernte Browser-Markierung. */
.nav__toggle:active { background: color-mix(in srgb, currentColor 28%, transparent); }
.nav__toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.nav__toggle span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .25s var(--ease);
}
.nav__toggle span:nth-child(1) { width: 20px; }
.nav__toggle span:nth-child(2) { width: 13px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { width: 20px; transform: translateY(-3.25px) rotate(-45deg); }

@media (min-width: 1024px) {
  .nav__menu { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__actions { margin-left: 0; }
}

/* Mobile-Menü */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 6.5rem var(--gutter) 2.5rem;
  background: var(--ink);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  /* Kurz gehalten: ein Menue soll sich sofort anfuehlen, nicht animiert wirken. */
  transition: opacity .18s var(--ease), visibility .18s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[data-open="true"] { visibility: visible; opacity: 1; }
.mobile-menu__list { display: grid; gap: .25rem; align-content: start; }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), color .25s var(--ease);
}
.mobile-menu[data-open="true"] .mobile-menu__link {
  opacity: 1; transform: none;
  transition-delay: calc(.028s * var(--i, 0) + .03s);
}
.mobile-menu__link span {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
}
.mobile-menu__link:hover, .mobile-menu__link[aria-current="page"] { color: var(--cyan); }
.mobile-menu__foot {
  display: grid;
  gap: .4rem;
  margin-top: 2.5rem;
  font-size: var(--step--1);
  color: rgba(255,255,255,.62);
}
.mobile-menu__foot a:hover { color: #fff; }
.mobile-menu .btn { margin-top: 1.5rem; justify-content: center; }

body[data-menu-open="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(8.5rem, 16vh, 11.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__grid {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
/* Frueher lag hier filter: blur(90px) auf drei grossen Flaechen, dazu
   will-change: transform. Ein Weichzeichner dieser Groesse gehoert zum
   Teuersten, was ein Handy-Grafikchip zu tun hat, und er wird bei jedem
   Bild neu berechnet - waehrenddessen ruckelt jede Animation daneben,
   etwa das Aufklappen des Menues. Bewegt wurden die Flaechen ohnehin nie
   (kein Parallax), die Grafikebenen waren also reine Reservierung.

   Ein weich auslaufender Farbverlauf sieht praktisch identisch aus und
   kostet nichts: Die Weichheit steckt jetzt in den Farbstopps statt im
   Filter. Die Flaechen sind dafuer groesser, weil ein Weichzeichner ueber
   den Rand hinaus strahlte. */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  opacity: .5;
}
.hero__glow--a {
  width: 64vw; height: 64vw; min-width: 500px; min-height: 500px;
  top: -24vw; left: -18vw;
  background: radial-gradient(circle,
    var(--navy) 0%,
    color-mix(in srgb, var(--navy) 60%, transparent) 26%,
    color-mix(in srgb, var(--navy) 24%, transparent) 46%,
    color-mix(in srgb, var(--navy) 7%, transparent) 64%,
    transparent 80%);
  opacity: .85;
}
.hero__glow--b {
  width: 58vw; height: 58vw; min-width: 460px; min-height: 460px;
  top: 4vh; right: -20vw;
  background: radial-gradient(circle,
    var(--steel) 0%,
    color-mix(in srgb, var(--steel) 58%, transparent) 26%,
    color-mix(in srgb, var(--steel) 22%, transparent) 46%,
    color-mix(in srgb, var(--steel) 6%, transparent) 64%,
    transparent 80%);
  opacity: .6;
}
.hero__glow--c {
  width: 44vw; height: 44vw; min-width: 380px; min-height: 380px;
  bottom: -18vw; left: 24%;
  background: radial-gradient(circle,
    var(--cyan) 0%,
    color-mix(in srgb, var(--cyan) 55%, transparent) 24%,
    color-mix(in srgb, var(--cyan) 20%, transparent) 44%,
    color-mix(in srgb, var(--cyan) 5%, transparent) 62%,
    transparent 78%);
  opacity: .22;
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}

.hero__title {
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line > span {
  display: block;
  animation: line-up 1s var(--ease-out) both;
  animation-delay: calc(.1s * var(--i, 0) + .15s);
}
@keyframes line-up {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

.hero__lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  max-width: 46ch;
  margin-top: 1.7rem;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .55rem;
  margin-top: 2.4rem;
}
.hero__facts li,
.hero__facts .elementor-icon-list-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .95rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px;
  background: rgba(255,255,255,.04);
  font-size: var(--step--1);
  color: rgba(255,255,255,.8);
}
.hero__facts li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}

/* Bild-Collage */
.hero__stage {
  position: relative;
  display: grid;
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
}
.stage-card {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(.9rem, 2vw, 1.6rem);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
  overflow: hidden;
  will-change: transform;
  animation: stage-in .8s var(--ease-out) both;
  animation-delay: calc(.12s * var(--i, 0) + .35s);
}
@keyframes stage-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.stage-card img { width: 100%; height: 100%; object-fit: contain; }
.stage-card__label {
  position: absolute;
  left: clamp(.9rem, 2vw, 1.3rem);
  bottom: clamp(.75rem, 1.6vw, 1.1rem);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.stage-card--wide { grid-column: span 5; aspect-ratio: 16 / 8; }
.stage-card--wide img { padding-block: .4rem; }
.stage-card--a { grid-column: span 3; aspect-ratio: 5 / 4; }
.stage-card--b { grid-column: span 2; aspect-ratio: 4 / 5; }
.stage-card--b img { object-position: center; }

@media (max-width: 599px) {
  .hero__stage { gap: .6rem; }
  .stage-card { border-radius: var(--radius); }
}

/* Laufband */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(.9rem, 2vw, 1.15rem);
  border-block: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 44s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding-right: clamp(1.75rem, 4vw, 3.25rem);
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1.5vw, 1.05rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}
.marquee__item::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   7. Page-Hero (Unterseiten)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(8rem, 15vh, 10.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.page-hero__inner { position: relative; }
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; }
.page-hero .lead { color: rgba(255,255,255,.72); }
.page-hero__media {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-radius: var(--radius-l);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  padding: clamp(1rem, 3vw, 2.25rem);
}
.page-hero__media img { margin-inline: auto; }

.page-hero__aside { display: none; }
@media (min-width: 1100px) {
  .page-hero--split .page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .page-hero--split .page-hero__inner > nav:first-child,
  .page-hero--split .anchor-nav { grid-column: 1 / -1; }
  .page-hero__aside { display: block; justify-self: end; max-width: 460px; }
}
.page-hero__aside img {
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.5rem;
  font-size: var(--step--1);
  color: rgba(255,255,255,.55);
}
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumb a:hover { color: #fff; }

/* Sprungmarken im Seitenkopf */
.anchor-nav { margin-top: clamp(2rem, 4vw, 2.75rem); }
.anchor-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.anchor-nav a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 100px;
  background: rgba(255, 255, 255, .05);
  font-size: var(--step--1);
  font-weight: 500;
  color: rgba(255, 255, 255, .84);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out);
}
.anchor-nav a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
  transition: transform .3s var(--ease-out);
}
.anchor-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .34);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Bereichs-Collage (Seitenkopf Leistungen)
   Vier echte Arbeitsproben statt einer Produktgrafik.
   -------------------------------------------------------------------------- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, .9rem);
  width: 100%;
}
.area-card {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 4 / 3;
  box-shadow: 0 26px 60px -38px rgba(0, 0, 0, .95);
  transition: transform .6s var(--ease-out), border-color .4s var(--ease);
}
.area-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.area-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: .85rem .9rem .7rem;
  background: linear-gradient(to top, rgba(11, 13, 16, .92) 25%, transparent);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  /* Manche Themes setzen figcaption auf kursiv. Archivo hat keinen
     Kursivschnitt, der Browser wuerde ihn sonst schraegstellen. */
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.area-card:hover { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.area-card:hover img { transform: scale(1.05); }

/* Leichter Versatz, damit das Raster nicht zu starr wirkt */
.area-card:nth-child(1) { transform: translateY(-10px); }
.area-card:nth-child(4) { transform: translateY(10px); }
.area-card:nth-child(1):hover { transform: translateY(-14px); }
.area-card:nth-child(4):hover { transform: translateY(6px); }

@media (max-width: 599px) {
  .area-card:nth-child(1),
  .area-card:nth-child(4) { transform: none; }
}

/* --------------------------------------------------------------------------
   8. Leistungs-Bento
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 680px)  { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.s-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .45s var(--ease), transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.s-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 85% 8%, rgba(37, 218, 255, .16), transparent 58%);
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.s-card:hover, .s-card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--steel) 45%, transparent);
  box-shadow: var(--shadow);
}
.s-card:hover::before, .s-card:focus-within::before { opacity: 1; }

.s-card__index {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--text-muted);
}
.s-card__title { font-size: var(--step-2); margin-top: .5rem; }
.s-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.s-card__text { margin-top: .85rem; color: var(--text-muted); max-width: 40ch; font-size: var(--step-0); }

.s-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.25rem;
}
.s-card__tags li,
.s-card__tags .elementor-icon-list-item {
  padding: .3rem .75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .78rem;
  color: var(--text-muted);
  background: var(--bg);
}

.s-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.75rem;
}
.s-card__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.s-card:hover .s-card__arrow {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: rotate(-45deg);
}

/* Motiv erscheint erst beim Ueberfahren – als gedaempfter Hintergrund
   hinter einem Verlauf, damit Text und Schlagworte lesbar bleiben. */
.s-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.s-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.1s var(--ease-out);
}
/* Verlauf: links deckend, nach rechts durchscheinend */
.s-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 94%, transparent) 38%,
    color-mix(in srgb, var(--surface) 62%, transparent) 72%,
    color-mix(in srgb, var(--surface) 42%, transparent) 100%);
}
.s-card:hover .s-card__bg,
.s-card:focus-within .s-card__bg { opacity: 1; }
.s-card:hover .s-card__bg img { transform: scale(1); }

/* Akzentlinie am oberen Rand, faehrt von links ein */
.s-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease-out);
  border-radius: inherit;
}
.s-card:hover::after, .s-card:focus-within::after { transform: scaleX(1); }

/* CSS-Mockup in der digitalen Karte */
.s-card__mock {
  position: absolute;
  right: -5%;
  bottom: -16%;
  width: 48%;
  max-width: 420px;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-2.5deg);
  transition: transform .7s var(--ease-out);
}
.s-card:hover .s-card__mock { transform: rotate(-2.5deg) translateY(-10px) scale(1.03); }
.s-card__mock .browser { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85); }
.s-card__mock .phone {
  position: absolute;
  right: -14%;
  bottom: -18%;
  width: 34%;
  min-width: 96px;
}
@media (max-width: 679px) {
  .s-card__mock { width: 62%; right: -12%; bottom: -12%; }
  .s-card__mock .phone { display: none; }
}

/* Bento-Zuschnitt */
@media (min-width: 1000px) {
  .s-card--7 { grid-column: span 7; }
  .s-card--5 { grid-column: span 5; }
  .s-card--12 { grid-column: span 12; }
}
.s-card--tall { min-height: 400px; }

.s-card--digital {
  background: var(--ink);
  border-color: transparent;
  color: #fff;
  /* --text muss mitgesetzt werden: .link-arrow und andere Bausteine
     greifen darauf zu und waeren sonst schwarz auf schwarz. */
  --text: #FFFFFF;
  --text-muted: rgba(255,255,255,.66);
  --line: rgba(255,255,255,.16);
  --bg: rgba(255,255,255,.06);
}
.s-card--digital .s-card__bg::after {
  background: linear-gradient(100deg,
    var(--ink) 0%,
    color-mix(in srgb, var(--ink) 92%, transparent) 40%,
    color-mix(in srgb, var(--ink) 58%, transparent) 100%);
}
.s-card--digital::before {
  background: radial-gradient(100% 120% at 82% 20%, rgba(37,218,255,.3), transparent 60%);
  opacity: .55;
}
.s-card--digital:hover::before { opacity: 1; }
.s-card--digital:hover .s-card__arrow { background: #fff; border-color: #fff; color: var(--ink); }
.s-card--digital .s-card__inner { max-width: 46ch; }

@media (max-width: 679px) {
  .s-card { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   9. Spotlight (Bild + Text)
   -------------------------------------------------------------------------- */
.spotlight {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .spotlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .spotlight--reverse .spotlight__media { order: 2; }
}
.spotlight + .spotlight { margin-top: clamp(4rem, 9vw, 8rem); }

.spotlight__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 80% at 50% 10%, color-mix(in srgb, var(--steel) 12%, transparent), transparent 70%),
    var(--surface);
  overflow: hidden;
}
.spotlight__media img { width: 100%; max-width: 480px; }
.spotlight__media--flush { padding: 0; }
.spotlight__media--flush img { max-width: none; border-radius: var(--radius-l); }

.spec-list { display: grid; gap: .1rem; margin-top: 2rem; }
.spec-list li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}
.spec-list li:last-child { border-bottom: 1px solid var(--line); }
.spec-list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.015em;
}
.spec-list svg { flex: none; margin-top: .3rem; color: var(--cyan); }

.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.chip-list li,
.chip-list .elementor-icon-list-item {
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  font-size: var(--step--1);
  font-weight: 500;
  transition: border-color .3s var(--ease), transform .3s var(--ease-out), background-color .3s var(--ease);
}
.chip-list li:hover,
.chip-list .elementor-icon-list-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, var(--surface));
}

/* Foto-Variante: randlos, kein Rahmen im Rahmen */
.spotlight__media--photo { padding: 0; border: 0; background: none; }
.spotlight__media--photo img {
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* Browser-Mockup (CSS, kein Bild) */
.browser {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem .9rem;
  background: var(--paper-100);
  border-bottom: 1px solid var(--line);
}
.browser__dots { display: flex; gap: .35rem; flex: none; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #CDD4DC; }
.browser__url {
  flex: 1;
  padding: .3rem .8rem;
  border-radius: 100px;
  background: #fff;
  font-size: .72rem;
  letter-spacing: .02em;
  color: #8A94A2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser__view { padding: 1.1rem; background: #fff; display: grid; gap: .85rem; }
.browser__nav { display: flex; align-items: center; gap: .5rem; }
.browser__nav i { height: 8px; border-radius: 4px; background: var(--paper-200); }
.browser__nav i:first-child { width: 42px; background: var(--navy); }
.browser__nav i:nth-child(n+2) { width: 26px; }
.browser__hero {
  height: 116px;
  border-radius: var(--radius-s);
  background: linear-gradient(120deg, var(--navy), var(--steel) 62%, var(--cyan-deep));
  display: grid;
  align-content: center;
  gap: .5rem;
  padding: 1rem;
}
.browser__hero i { height: 9px; border-radius: 5px; background: rgba(255,255,255,.85); }
.browser__hero i:first-child { width: 62%; height: 13px; }
.browser__hero i:nth-child(2) { width: 44%; opacity: .6; }
.browser__hero i:last-child { width: 78px; height: 20px; border-radius: 100px; background: #fff; margin-top: .3rem; }
.browser__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.browser__cards div {
  height: 62px;
  border-radius: var(--radius-s);
  background: var(--paper-50);
  border: 1px solid var(--line-soft);
  display: grid;
  align-content: end;
  gap: .3rem;
  padding: .55rem;
}
.browser__cards i { height: 6px; border-radius: 3px; background: var(--paper-200); }
.browser__cards i:first-child { width: 70%; background: #C3CCD6; }

/* Phone-Mockup */
.phone {
  width: 190px;
  border-radius: 26px;
  padding: 8px;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-lg);
}
.phone__screen {
  border-radius: 19px;
  overflow: hidden;
  background: #fff;
  display: grid;
  gap: .45rem;
  padding: .55rem;
}
.phone__post { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(150deg, var(--navy), var(--cyan-deep)); }
.phone__line { height: 6px; border-radius: 3px; background: var(--paper-200); }
.phone__line--short { width: 55%; }

.mock-stack {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}
.mock-stack .phone {
  position: absolute;
  right: -6%;
  bottom: -12%;
}
@media (max-width: 599px) {
  .mock-stack .phone { width: 128px; right: -2%; bottom: -8%; }
}

/* --------------------------------------------------------------------------
   Medienkette – "ein Auftritt, überall"
   Zeigt dieselbe Marke auf vier Trägern, verbunden durch eine Linie.
   -------------------------------------------------------------------------- */
.chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
}
/* Durchgehende Linie über allen Gliedern */
.chain::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--line) 12%, var(--line) 88%, transparent);
}

.chain__item {
  position: relative;
  display: grid;
  gap: .9rem;
  align-content: start;
}
/* Punkt auf der Linie */
.chain__item::before {
  content: "";
  position: absolute;
  top: -1.75rem;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .45s var(--ease), transform .45s var(--ease-out);
}
.chain__item:hover::before { background: var(--cyan); transform: scale(1.5); }

.chain__label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
  transition: color .35s var(--ease);
}
.chain__item:hover .chain__label { color: var(--text); }

.chain__media {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  padding: clamp(.6rem, 1.4vw, 1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .55s var(--ease-out);
}
.chain__item:hover .chain__media {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
}
.chain__media img { width: 100%; height: 100%; object-fit: contain; }
.chain__media--photo { padding: 0; }
.chain__media--photo img { object-fit: cover; }

/* Das Browser-Mockup passt sich der Kachel an */
.chain__media .browser { width: 100%; box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .6); }
.chain__media .browser__view { padding: .55rem; gap: .45rem; }
.chain__media .browser__hero { height: 46px; padding: .5rem; gap: .3rem; }
.chain__media .browser__hero i:first-child { height: 7px; }
.chain__media .browser__hero i:last-child { width: 34px; height: 11px; }
.chain__media .browser__cards div { height: 26px; padding: .3rem; }
.chain__media .browser__bar { padding: .4rem .5rem; gap: .5rem; }
.chain__media .browser__url { font-size: .55rem; padding: .2rem .5rem; }

@media (max-width: 767px) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .chain::before { left: 22%; right: 22%; }
  .chain__item:nth-child(n+3)::before { display: none; }
}

/* Zentrierte Abschnitte: Buttons mittig statt linksbündig */
.center .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   10. Projekte-Galerie
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.15rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.project {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.project img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out), filter .6s var(--ease);
}
.project::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,13,16,.9) 0%, rgba(11,13,16,.25) 42%, transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.project__meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: grid;
  gap: .15rem;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  color: #fff;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease);
}
.project__meta strong {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -.02em;
}
.project__meta span { font-size: .78rem; color: rgba(255,255,255,.7); letter-spacing: .06em; text-transform: uppercase; }
.project:hover img, .project:focus-visible img { transform: scale(1.06); }
.project:hover::after, .project:focus-visible::after { opacity: 1; }
.project:hover .project__meta, .project:focus-visible .project__meta { transform: none; opacity: 1; }

/* Auf Touch-Geräten Beschriftung dauerhaft zeigen */
@media (hover: none) {
  .project::after { opacity: 1; }
  .project__meta { transform: none; opacity: 1; }
}

.project--tall { grid-row: span 2; aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   11. Prozess / Zahlen / Partner
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 1.75rem;
  border-top: 2px solid var(--line);
}
/* Die Akzentlinie faehrt beim Ueberfahren von links nach rechts ein. */
.step::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease-out);
}
.step:hover::after,
.step:focus-within::after { transform: scaleX(1); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--cyan);
  margin-bottom: .75rem;
}
.step h3 { font-size: var(--step-1); }
.step p { margin-top: .6rem; color: var(--text-muted); font-size: var(--step-0); }

.stats {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(140deg, #fff 20%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { margin-top: .5rem; color: var(--text-muted); font-size: var(--step--1); }

.partners {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  align-items: center;
}
.partners li { display: grid; place-items: center; min-height: 56px; }
.partners img {
  width: auto;
  max-width: 128px;
  max-height: 48px;
  object-fit: contain;
  opacity: .5;
  filter: grayscale(1);
  transition: opacity .4s var(--ease), filter .4s var(--ease);
}
.partners li:hover img { opacity: 1; filter: none; }
.is-dark .partners img { filter: grayscale(1) brightness(0) invert(1); opacity: .45; }
.is-dark .partners li:hover img { filter: grayscale(1) brightness(0) invert(1); opacity: .85; }

/* --------------------------------------------------------------------------
   12. Kontakt
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.cta-band__glow {
  position: absolute;
  z-index: -1;
  width: 60vw; height: 60vw;
  min-width: 420px; min-height: 420px;
  right: -14vw; top: -22vw;
  border-radius: 50%;
  /* wie beim Hero: Weichheit im Farbverlauf statt im Filter */
  background: radial-gradient(circle,
    var(--navy) 0%,
    color-mix(in srgb, var(--navy) 58%, transparent) 26%,
    color-mix(in srgb, var(--navy) 22%, transparent) 46%,
    color-mix(in srgb, var(--navy) 6%, transparent) 62%,
    transparent 78%);
  opacity: .9;
}
.cta-band__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.cta-band h2 { font-size: var(--step-4); }

.contact-list { display: grid; gap: .25rem; }
.contact-list a, .contact-list p {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-size: var(--step-1);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  transition: color .3s var(--ease), padding-left .35s var(--ease-out);
}
.contact-list li:last-child a, .contact-list li:last-child p { border-bottom: 1px solid rgba(255,255,255,.14); }
.contact-list a:hover { color: var(--cyan); padding-left: .5rem; }
.contact-list svg { flex: none; color: var(--cyan); }
.contact-list small {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* Formular */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .45rem; }
.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -.01em;
}
.field > label .req { color: var(--cyan); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--step-0);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235C6675' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.75rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 26%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--text-muted) 75%, transparent); }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.5;
}
.checkbox input { width: 1.15rem; height: 1.15rem; margin-top: .18rem; accent-color: var(--steel); }
.checkbox a { text-decoration: underline; text-underline-offset: 2px; color: var(--text); }

.form-note {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: .25rem;
}

.form-card {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   Cookie-Hinweis
   -------------------------------------------------------------------------- */

/* Eigene display-Werte und Theme-Regeln ueberstimmen sonst das
   hidden-Attribut, mit dem der Banner seine Bereiche umschaltet. */
.consent [hidden] { display: none !important; }

.consent {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 120;
  width: min(430px, calc(100vw - 2rem));
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.consent[data-sichtbar="true"] { opacity: 1; transform: none; }

.consent__inner {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(16, 20, 26, .94);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  color: #fff;
}

.consent__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
}
.consent__text {
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}

.consent__options { display: grid; gap: .1rem; margin-top: 1.1rem; }
.consent__option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  padding: .8rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--step--1);
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
}
.consent__option:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.consent__option--fix { cursor: default; }
.consent__option input {
  width: 1.05rem; height: 1.05rem;
  margin-top: .15rem;
  accent-color: var(--cyan);
}
.consent__option strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1.4rem;
}
.consent__actions .btn--ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, .25); }

.consent__link {
  padding: .4rem .2rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--step--1);
  color: rgba(255, 255, 255, .62);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.consent__link:hover { color: var(--cyan); }

.consent__legal {
  margin-top: 1rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .45);
}
.consent__legal a { text-decoration: underline; text-underline-offset: 2px; }
.consent__legal a:hover { color: var(--cyan); }

@media (max-width: 480px) {
  .consent { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
  .consent__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* --------------------------------------------------------------------------
   Verfahren-Karten (Druckverfahren im Textildruck)
   -------------------------------------------------------------------------- */
.verfahren {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.verfahren__karte {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .45s var(--ease), transform .5s var(--ease-out);
}
.verfahren__karte:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
}
.verfahren__kurz {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--cyan) 16%, transparent);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.is-dark .verfahren__kurz { color: var(--cyan); }
.verfahren__karte h3 {
  font-size: var(--step-1);
  margin-top: .9rem;
}
.verfahren__karte p {
  margin-top: .75rem;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text-muted);
}
.verfahren__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.25rem;
}
.verfahren__merkmale li {
  padding: .3rem .75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .78rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Hilfe-Panel ("Nicht das Passende gefunden?")
   -------------------------------------------------------------------------- */
.help-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}
@media (min-width: 880px) {
  .help-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
}

/* Feines Raster und ein Lichtschein als Untergrund */
.help-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(11, 13, 16, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 13, 16, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%);
}
.help-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  right: -12%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--cyan) 26%, transparent) 0%,
    color-mix(in srgb, var(--cyan) 15%, transparent) 30%,
    color-mix(in srgb, var(--cyan) 5%, transparent) 52%,
    transparent 74%);
  pointer-events: none;
}

.help-panel__actions {
  display: grid;
  gap: .75rem;
  align-content: center;
}
.help-panel__actions .btn { justify-content: center; }

/* Direkte Kontaktzeilen unter den Knöpfen */
.help-contact {
  display: grid;
  gap: .2rem;
  margin-top: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.help-contact a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem 0;
  font-size: var(--step--1);
  color: var(--text-muted);
  transition: color .3s var(--ease), transform .3s var(--ease-out);
}
.help-contact a:hover { color: var(--text); transform: translateX(3px); }
.help-contact svg { flex: none; color: var(--steel); }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(6, 8, 11, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .3s var(--ease);
  cursor: zoom-out;
}
.lightbox[data-sichtbar="true"] { opacity: 1; }

.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 100%);
  cursor: default;
  transform: scale(.96);
  transition: transform .35s var(--ease-out);
}
.lightbox[data-sichtbar="true"] .lightbox__figure { transform: none; }

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95);
}

.lightbox__caption {
  margin-top: 1.1rem;
  text-align: center;
  /* figcaption wird von manchen Themes kursiv gesetzt */
  font-style: normal;
  color: rgba(255, 255, 255, .78);
}
.lightbox__caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
}
.lightbox__caption span {
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease-out);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }

body[data-lightbox-open="true"] { overflow: hidden; }

/* Kacheln als anklickbar kennzeichnen */
.project[role="button"] { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__figure { transition: none; }
  .lightbox__close:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Digitaler Seitenkopf (Webdesign)
   Bewegter Hintergrund aus Raster, Lichtern und schwebenden UI-Splittern.
   -------------------------------------------------------------------------- */
.digital-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.digital-bg__grid {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(rgba(37, 218, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 218, 255, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(110% 80% at 70% 30%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 80% at 70% 30%, #000 10%, transparent 72%);
}

/* Ein Lichtpunkt wandert langsam ueber das Raster */
.digital-bg__scan {
  position: absolute;
  top: 0; bottom: 0;
  width: 42vw;
  background: linear-gradient(90deg, transparent, rgba(37, 218, 255, .07), transparent);
  animation: scan 11s ease-in-out infinite alternate;
}
@keyframes scan {
  from { transform: translateX(-30%); }
  to   { transform: translateX(150%); }
}

/* Schwebende UI-Splitter */
.ui-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  animation: schweben 7s ease-in-out infinite alternate;
}
.ui-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}
/* Die Chips bleiben rechts der Textspalte und meiden das Mockup,
   das etwa das mittlere Drittel der rechten Haelfte einnimmt.
   Zwei sitzen darueber, zwei darunter. */
.ui-chip--a { top: 10%; right: 6%;  animation-delay: -1s; }
.ui-chip--d { top: 26%; right: 24%; animation-delay: -2s; }
.ui-chip--b { top: 76%; right: 30%; animation-delay: -3s; }
.ui-chip--c { top: 85%; right: 9%;  animation-delay: -5s; }

@keyframes schweben {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}

@media (max-width: 899px) {
  .ui-chip--b, .ui-chip--d { display: none; }
  .ui-chip--a { top: 8%; right: 4%; }
  .ui-chip--c { top: auto; bottom: 6%; right: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .digital-bg__scan, .ui-chip { animation: none; }
}

/* --------------------------------------------------------------------------
   Rückmeldung nach dem Formularversand
   -------------------------------------------------------------------------- */
.form-meldung {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-s);
  font-size: var(--step-0);
  line-height: 1.55;
}
.form-meldung::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: .55rem;
  border-radius: 50%;
}
.form-meldung--erfolg {
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  color: var(--text);
}
.form-meldung--erfolg::before { background: var(--cyan); }
.form-meldung--fehler {
  border: 1px solid rgba(190, 60, 60, .38);
  background: rgba(190, 60, 60, .07);
  color: var(--text);
}
.form-meldung--fehler::before { background: #C0392B; }

/* Honigtopf gegen Spam – für Menschen unsichtbar, von Bots ausgefüllt */
.km-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Contact Form 7
   CF7 umschließt jedes Feld mit einem eigenen span und bringt eigene
   Meldungs- und Fehlerausgaben mit. Hier wird das an das Designsystem
   angeglichen, damit das Formular unverändert aussieht.
   -------------------------------------------------------------------------- */

/* Die Wrapper von CF7 aus dem Layout nehmen */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form p { margin: 0; }

/* Abstand nur zwischen den Bloecken auf oberster Ebene des Formulars.
   Eine Regel wie ".field + .field" wuerde auch die nebeneinander
   stehenden Felder innerhalb einer Reihe treffen und sie versetzen. */
.wpcf7-form > * + * { margin-top: 1.1rem; }
.wpcf7-form .form__row > .field { margin-top: 0; }

/* Eingabefelder erben die Gestaltung des Designsystems */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--step-0);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235C6675' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.75rem;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 26%, transparent);
}

/* Einwilligung */
.wpcf7-form .wpcf7-acceptance {
  display: block;
  margin-top: 1.4rem;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  font-size: var(--step--1);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .18rem;
  accent-color: var(--steel);
}
.wpcf7-form .wpcf7-acceptance a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--text);
}

/* Absende-Knopf: die Schaltfläche liegt unsichtbar über dem gestalteten
   Element, damit Verlauf, Pfeil und Hover-Effekt erhalten bleiben. */
.btn--cf7 { position: relative; }
.btn--cf7 .wpcf7-submit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
.btn--cf7:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.btn--cf7 .wpcf7-spinner {
  position: absolute;
  right: -2.25rem;
  top: 50%;
  margin: -8px 0 0;
}

/* Rückmeldungen im Stil des Designsystems */
.wpcf7 form .wpcf7-response-output {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-s);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: rgba(190, 60, 60, .38);
  background: rgba(190, 60, 60, .07);
}

/* Feldbezogene Fehlermeldungen */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: .4rem;
  font-size: var(--step--1);
  color: #C0392B;
}
.wpcf7-form .wpcf7-not-valid {
  border-color: rgba(190, 60, 60, .55);
}

/* Feldreihen oben ausrichten, Beschriftungen mit fester Zeilenhoehe. */
.form__row { align-items: start; }
.field > label {
  line-height: 1.35;
  min-height: 1.35em;
}
.wpcf7-form-control-wrap { line-height: 0; }
.wpcf7-form-control-wrap > input,
.wpcf7-form-control-wrap > textarea,
.wpcf7-form-control-wrap > select { line-height: normal; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.66);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  --logo-knockout: var(--ink);
}
.site-footer__top {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 800px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer__brand svg { width: 160px; height: auto; color: #fff; }
.site-footer__claim { margin-top: 1.5rem; max-width: 40ch; }
.footer-col h3 {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.1rem;
}
.footer-col li + li { margin-top: .6rem; }
.footer-col a { transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--cyan); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: var(--step--1);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__legal a:hover { color: #fff; }
.socials { display: flex; gap: .5rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-out);
}
.socials a:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   14. Scroll-Animationen
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-out);
  transition-delay: calc(80ms * var(--i, 0));
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-in { opacity: 1; transform: none; }

.no-js [data-reveal] { opacity: 1; transform: none; }

/* Auf kleinen Bildschirmen stehen die Abschnitte dichter untereinander und
   scrollen schneller vorbei. Lange Wege, lange Dauern und grosse Versaetze
   lassen die Seite dort "stueckweise" wirken - deshalb hier deutlich kuerzer. */
@media (max-width: 860px) {
  [data-reveal] {
    transform: translateY(10px);
    transition-duration: .4s;
    transition-delay: calc(25ms * var(--i, 0));
  }
  [data-reveal="left"]  { transform: translateX(-12px); }
  [data-reveal="right"] { transform: translateX(12px); }
  [data-reveal="scale"] { transform: scale(.985); }
}

/* Parallax-Träger */
[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: clamp(2.5rem, 5vw, 4rem); }
.center { text-align: center; }
.stack-l > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }

.notice {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--step--1);
}
.notice svg { flex: none; margin-top: .2rem; color: var(--steel); }

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.75rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 1rem; color: var(--text-muted); }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }
.prose a { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }

/* Back-to-top */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(11,13,16,.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out), visibility .35s, background-color .3s var(--ease);
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--steel); }

/* --------------------------------------------------------------------------
   16. Reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__title .line > span,
  .stage-card { animation: none !important; opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  [data-parallax] { transform: none !important; }
}