/* =========================================================================
   Digitalschlüssel — Stylesheet
   Aufbau:  1 Fonts · 2 Tokens · 3 Reset · 4 Typo · 5 Layout · 6 Buttons
            7 Header · 8 Hero · 9 Sektionen · 10 Formular · 11 Footer
            12 Animation · 13 Responsive
   ========================================================================= */

/* ============================ 1 · FONTS ================================= */
/* Lokal gehostet (DSGVO) — Variable Fonts, decken alle Schnitte ab.        */
/* Inter trägt die gesamte Seite. JetBrains Mono ist bewusst auf Labels,    */
/* Nummern und technische Kleinteile beschränkt — das ist der Tech-Akzent   */
/* und ersetzt die frühere Serifen-Kursive.                                 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================ 2 · TOKENS ================================ */
/* Die Palette besteht aus genau drei Markenfarben:                         */
/*   #FFFFFF  ·  #00171F (Tiefdunkel)  ·  #003459 (Markenblau)              */
/* Alle weiteren Werte sind reine Aufhellungen bzw. Mischungen dieser drei  */
/* Töne — es kommt kein vierter Farbton dazu. Die hellen Blaustufen sind    */
/* nötig, weil #003459 auf dunklem Grund nicht mehr lesbar ist.             */

:root {
  /* --- Markenfarben --- */
  --white: #ffffff;
  --ink:   #00171f;
  --blue:  #003459;

  /* --- Blaustufen (Aufhellungen/Abdunklungen von #003459) --- */
  --blue-900: #00223b;
  --blue-800: #002b4a;
  --blue-700: #003459;
  --blue-600: #01456f;
  --blue-500: #04598f;
  --blue-400: #2f80af;
  --blue-300: #6fb0d5;
  /* Akzenttext auf dunklem Grund. Heller als --blue-300, weil der Text dort
     teils über dem Netzbild steht und sonst zu leise wirkt. */
  --blue-250: #8ec9ea;
  --blue-200: #a9d0e6;
  --blue-100: #dceaf3;

  /* --- Kühle Neutraltöne (Mischung aus #00171F, #003459 und Weiß) --- */
  --slate-700: #244457;
  --slate-600: #385667;
  --slate-500: #526b7a;
  --slate-400: #7a8e9a;
  --slate-300: #b3bec5;
  --slate-200: #dde3e7;
  --slate-100: #ebeeef;
  --slate-50:  #f5f7f8;

  /* --- Rollen-Tokens · HELL (Standard) --- */
  --bg:           var(--white);
  --bg-alt:       var(--slate-50);
  --surface:      var(--white);
  --surface-2:    var(--slate-50);
  --band:         var(--ink);
  --band-edge:    transparent;
  --text:         var(--ink);
  --text-muted:   var(--slate-500);
  --border:       var(--slate-200);
  --border-soft:  var(--slate-100);
  /* accent-fill = Flächen und Ringe · accent-text = kleine Schrift und Icons.
     Zwei Werte, weil #003459 als Fläche stark, als 13-px-Schrift aber zu
     dunkel gegenüber der Fließtextfarbe wirkt. */
  --accent-fill:  var(--blue);
  --accent-text:  var(--blue-500);
  --on-accent:    var(--white);
  /* Primärer Button: immer maximaler Kontrast zum Untergrund. */
  --cta-bg:       var(--blue);
  --cta-bg-hover: var(--blue-600);
  --cta-fg:       var(--white);
  --shadow-sm:    0 1px 2px rgba(0, 23, 31, .05);
  --shadow-md:    0 2px 4px rgba(0, 23, 31, .04), 0 8px 24px rgba(0, 23, 31, .07);
  --shadow-lg:    0 4px 10px rgba(0, 23, 31, .06), 0 24px 56px rgba(0, 23, 31, .10);
  --photo-filter: none;

  /* --- Typografie --- */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono',
               Consolas, monospace;

  /* Ruhigere, engere Skala als zuvor: Tech-Auftritte schreien nicht,
     sie ordnen. Der Sprung von Fließtext zu Headline ist deutlich, die
     Maximalgrößen sind aber spürbar kleiner. */
  --fs-display: clamp(2.35rem, 1.45rem + 3.7vw, 4.4rem);
  --fs-h1:      clamp(2rem, 1.42rem + 2.4vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 1.34rem + 1.5vw, 2.5rem);
  --fs-h3:      clamp(1.1rem, 1.03rem + .32vw, 1.32rem);
  --fs-lead:    clamp(1.03rem, .99rem + .26vw, 1.18rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-label:   .75rem;

  /* --- Maße --- */
  --container: 1200px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 7.5vw, 7rem);
  /* Kantige Radien statt Pillen — der deutlichste Formunterschied
     zwischen „Boutique" und „Tech". */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, .8, .3, 1);

  color-scheme: light;
}

/* --- Rollen-Tokens · DUNKEL --- */
:root[data-theme='dark'] {
  --bg:           var(--ink);
  --bg-alt:       #011e28;
  --surface:      #04222d;
  --surface-2:    #072a37;
  --band:         var(--blue-900);
  --band-edge:    rgba(111, 176, 213, .18);
  --text:         #e8eef2;
  --text-muted:   #b9cbd4;
  --border:       rgba(143, 165, 176, .22);
  --border-soft:  rgba(143, 165, 176, .13);
  --accent-fill:  var(--blue-300);
  --accent-text:  var(--blue-250);
  --on-accent:    var(--ink);
  --cta-bg:       var(--white);
  --cta-bg-hover: #dceaf3;
  --cta-fg:       var(--ink);
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .32);
  --shadow-lg:    0 4px 10px rgba(0, 0, 0, .35), 0 24px 56px rgba(0, 0, 0, .45);
  --photo-filter: brightness(.9) contrast(1.02);

  color-scheme: dark;
}


/* Immer-dunkler Bereich (Hero, CTA-Bänder) — unabhängig vom Theme. */
.on-dark {
  --surface:     rgba(255, 255, 255, .04);
  --surface-2:   rgba(255, 255, 255, .07);
  --text:        #e8eef2;
  --text-muted:  #b9cbd4;
  --border:      rgba(255, 255, 255, .14);
  --border-soft: rgba(255, 255, 255, .10);
  --accent-fill: var(--blue-300);
  --accent-text: var(--blue-250);
  --on-accent:   var(--ink);
  --cta-bg:      var(--white);
  --cta-bg-hover:#dceaf3;
  --cta-fg:      var(--ink);
  --shadow-md:   0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
  color: var(--text);
}

/* ============================ 3 · RESET ================================= */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  letter-spacing: -.006em;
  overflow-x: hidden;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { filter: var(--photo-filter); }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent-fill); color: var(--on-accent); }

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

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

/* ============================ 4 · TYPOGRAFIE ============================ */
/* Grundhaltung: Inter mit enger Laufweite und klarer Stufung. Gewicht 700
   statt 800 — Inter wird bei 800 in großen Graden teigig, 700 bleibt scharf. */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.032em;
  text-wrap: balance;
}
h2 { letter-spacing: -.028em; line-height: 1.14; }
h3, h4 { font-weight: 600; line-height: 1.35; letter-spacing: -.018em; }

.display { font-size: var(--fs-display); }
h1, .h1  { font-size: var(--fs-h1); }
h2, .h2  { font-size: var(--fs-h2); }
h3, .h3  { font-size: var(--fs-h3); }

/* Akzentwort in Überschriften. Früher eine Serifen-Kursive — die passt nicht
   zu einem Technikanbieter. Jetzt derselbe Schnitt, nur im Markenblau:
   ruhiger, und die Zeile bleibt typografisch aus einem Guss. */
.accent {
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
  letter-spacing: -.008em;
  text-wrap: pretty;
}

/* Zeilenlänge begrenzen — bei ~72 Zeichen bricht die Lesbarkeit. In
   zentrierten Blöcken bleibt der Absatz dabei mittig. */
p { text-wrap: pretty; max-width: 72ch; }
.text-center p, .cta-band p, .section-head--center p { margin-inline: auto; }
p + p { margin-top: 1em; }

/* Mono-Hilfsklassen — Labels, Nummern, technische Kleinteile. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.num { font-variant-numeric: tabular-nums; }

/* Label über einer Überschrift. Monospace, versalgesetzt, mit kleinem
   Quadrat als Marke — das trägt den Tech-Charakter, ohne laut zu sein. */
.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: '';
  flex: none;
  margin-top: .5em;
  width: .375rem;
  height: .375rem;
  background: currentColor;
}

.muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* ============================ 5 · LAYOUT =============================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt  { background: var(--bg-alt); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Dunkles Band — in beiden Themes dunkel, im Dark-Mode mit blauer Kontur */
.section--band {
  background-color: var(--band);
  border-block: 1px solid var(--band-edge);
  position: relative;
  overflow: hidden;
}
/* Abdunklung über dem Bild. Ohne sie liefe der Text stellenweise gegen die
   hellen Netzlinien. Der Schleier ist oben etwas leichter, damit das Bild
   dort noch zu erkennen ist. */
.section--band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(47, 128, 175, .14), transparent 70%),
    linear-gradient(rgba(0, 23, 31, .80), rgba(0, 23, 31, .88));
  pointer-events: none;
}
.section--band > * { position: relative; z-index: 1; }

.section-head { max-width: 58ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section-head > .eyebrow { margin-bottom: 1.1rem; }
.section-head > h2 { margin-bottom: 1rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center > .lead { margin-inline: auto; }
.section-head--center > .eyebrow::before { display: none; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.stack-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Bildhintergrund der dunklen Bereiche (Hero, Bänder, Footer)

   Das Netzbild steht fest im Sichtfenster, der Inhalt wandert darüber hinweg.
   `background-attachment: fixed` misst das Bild am Sichtfenster statt am
   Element — genau deshalb sitzt es über mehrere Abschnitte hinweg an
   derselben Stelle und wirkt wie eine durchgehende Ebene.

   Bewusst nicht über ein `position: fixed`-Pseudoelement gelöst: Das müsste
   zusätzlich auf den Abschnitt beschnitten werden, und `overflow: hidden`
   allein beschneidet fest positionierte Kinder nicht verlässlich.

   Die drei Regeln oben setzen `background-color` statt der `background`-
   Kurzschreibweise — sonst würde diese Regel hier wieder überschrieben.
   -------------------------------------------------------------------------- */
/* Der Footer bleibt bewusst außen vor und behält seinen einfarbig dunkelblauen
   Grund — das Bild soll den Inhalt tragen, nicht auch noch den Abbinder. */
.hero,
.section--band {
  background-image: url('../img/mesh-hintergrund.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Auf Touchgeräten behandelt vor allem iOS Safari `fixed` faktisch wie
   `scroll` und skaliert das Bild dabei auf Elementhöhe — es wirkt dann
   grob vergrößert. Dort läuft das Bild einfach mit. Ebenso, wenn reduzierte
   Bewegung gewünscht ist: Ein stehender Hintergrund unter wanderndem Inhalt
   ist genau die Art von Parallaxe, die dabei stören kann. */
@media (max-width: 900px), (hover: none), (prefers-reduced-motion: reduce) {
  .hero,
  .section--band { background-attachment: scroll; }
}

/* ============================ 6 · BUTTONS ============================== */
/* Kantig statt Pille, ruhiger Hover ohne Glanzeffekt. */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.35rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* Primär: auf hellem Grund das Markenblau, auf dunklem Grund Weiß.
   So steht der wichtigste Button immer im stärksten Kontrast zu seinem
   Untergrund — auf einem #00171F-Hero wäre #003459 fast unsichtbar. */
.btn--primary {
  --btn-bg: var(--cta-bg);
  --btn-fg: var(--cta-fg);
  --btn-bd: var(--cta-bg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  --btn-bg: var(--cta-bg-hover);
  --btn-bd: var(--cta-bg-hover);
  box-shadow: var(--shadow-md);
}

.btn--ghost { --btn-bg: transparent; --btn-bd: var(--border); }
.btn--ghost:hover { --btn-bd: var(--accent-fill); background: var(--surface-2); }

.btn--solid { --btn-bg: var(--text); --btn-fg: var(--bg); --btn-bd: var(--text); }
.btn--solid:hover { opacity: .9; }

.btn--sm { padding: .6rem 1rem; font-size: var(--fs-xs); }
.btn--lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--accent-text);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================ 7 · HEADER =============================== */
/* Durchgehend dunkle Leiste — auch im hellen Theme. Sie geht nahtlos in den
   dunklen Hero über und trägt die Marke ohne Bruchkante. Deshalb steht im
   HTML `class="header on-dark"`: die Rollen-Tokens kippen auf hell-auf-dunkel. */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              background-color .3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .header { backdrop-filter: saturate(160%) blur(14px); }
}
.header.is-stuck {
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  background: color-mix(in srgb, var(--ink) 96%, transparent);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}
.header.is-stuck .header__inner { min-height: 4.1rem; }

/* --- Logo --- */
/* Wortmarke in Versalien mit weiter Laufweite — dieselbe Anmutung wie das
   Vorbild: kompaktes Zeichen links, Name daneben, beides einfarbig. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--white);
  flex: none;
}
.logo__mark {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  color: var(--white);
  transition: opacity .25s var(--ease);
}
.logo:hover .logo__mark { opacity: .78; }

/* --- Navigation --- */
/* Links direkt neben dem Logo, nicht am rechten Rand. Rechts bleiben nur
   Telefon, Theme-Umschalter und der CTA. */
.nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-inline-start: 1.75rem;
}

.nav__link {
  position: relative;
  padding: .5rem .75rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-muted);
  transition: color .2s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link::after {
  content: '';
  position: absolute;
  left: .75rem; right: .75rem; bottom: .3rem;
  height: 2px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current='page'],
.nav__link.is-active { color: var(--white); font-weight: 600; }
.nav__link[aria-current='page']::after,
.nav__link.is-active::after { transform: scaleX(1); }

/* Läuft der Scrollspy (nur auf der Startseite, siehe main.js), bestimmt allein
   er die Hervorhebung. `aria-current="page"` bleibt im Markup stehen – es
   stimmt ja weiterhin und Screenreader brauchen es –, verliert hier aber die
   Auszeichnung, damit nicht zwei Punkte gleichzeitig leuchten. */
.nav.is-spying .nav__link[aria-current='page']:not(.is-active) {
  color: var(--text-muted);
  font-weight: 500;
}
.nav.is-spying .nav__link[aria-current='page']:not(.is-active)::after { transform: scaleX(0); }
.nav.is-spying .nav__link[aria-current='page']:not(.is-active):hover { color: var(--text); }
.nav.is-spying .nav__link[aria-current='page']:not(.is-active):hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: .5rem; flex: none; margin-inline-start: auto; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .75rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.header__phone svg { width: 1rem; height: 1rem; color: var(--accent-text); }
.header__phone:hover { color: var(--accent-text); }

/* --- Theme-Umschalter --- */
/* Deutlich sichtbar: blauer Ring auf getönter Fläche statt grauer Umriss,
   damit der Umschalter im Header nicht übersehen wird. */
.theme-toggle {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--accent-fill) 55%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-fill) 15%, transparent);
  color: var(--accent-text);
  flex: none;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.theme-toggle:hover {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: var(--shadow-md);
}
.theme-toggle svg {
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
.theme-toggle .icon-sun  { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme='dark'] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme='dark'] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(.5); }

/* --- Mobile Nav --- */
.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  flex: none;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform .35s var(--ease);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after  { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 6rem var(--gutter) 2.5rem;
  background: var(--ink);
  /* Panel in derselben dunklen Welt wie die Leiste darüber. */
  --text: #e8eef2;
  --text-muted: #b9cbd4;
  --border: rgba(255, 255, 255, .14);
  --border-soft: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .06);
  --accent-text: var(--blue-250);
  --accent-fill: var(--blue-300);
  --cta-bg: var(--white);
  --cta-bg-hover: #dceaf3;
  --cta-fg: var(--ink);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.022em;
}
.mobile-nav__link svg { width: 1rem; height: 1rem; color: var(--accent-text); }
.mobile-nav__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
body.nav-open { overflow: hidden; }

/* ============================ 8 · HERO ================================= */

.hero {
  position: relative;
  background-color: var(--band);
  border-bottom: 1px solid var(--band-edge);
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
}
/* Im Hero liegt der Text links, das Gerätemockup rechts. Der Schleier ist
   deshalb seitlich verlaufend: links kräftig für die Lesbarkeit der
   Schlagzeile, rechts offen, damit das Bild dort sichtbar bleibt. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 65% at 78% 12%, rgba(47, 128, 175, .16), transparent 68%),
    linear-gradient(100deg,
      rgba(0, 23, 31, .94) 0%,
      rgba(0, 23, 31, .84) 48%,
      rgba(0, 23, 31, .55) 100%);
  pointer-events: none;
}

/* Der Inhalt muss über den Schleier. Auf der Startseite erledigt das
   `.hero__inner`; die Unterseiten-Heros enthalten aber nur ein schlichtes
   `.container`-Div, dessen Text sonst unter der Abdunklung läge und
   ausgewaschen wirkte. Gleiche Regel wie bei `.section--band` und `.footer`. */
.hero > * { position: relative; z-index: 1; }

/* Auf schmalen Schirmen steht der Text unter dem Mockup über die volle
   Breite — dann muss der Schleier gleichmäßig decken statt seitlich. */
@media (max-width: 960px) {
  .hero::before {
    background:
      radial-gradient(60% 45% at 70% 8%, rgba(47, 128, 175, .16), transparent 68%),
      linear-gradient(rgba(0, 23, 31, .80), rgba(0, 23, 31, .93));
  }
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
.hero__title { font-size: var(--fs-display); margin-block: 1.5rem 1.4rem; }
.hero__lead { margin-bottom: 2rem; font-size: var(--fs-lead); max-width: 52ch; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-soft);
}
.trust-row li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  list-style: none;
}
.trust-row svg { width: 1.05rem; height: 1.05rem; color: var(--accent-text); flex: none; }

/* --- Geräte-Komposition (Laptop + Handy) --- */
.mockup { position: relative; padding-block: 1rem 2.75rem; }

/* Laptop */
.laptop { position: relative; width: 100%; }
.laptop__lid {
  padding: .5rem .5rem .65rem;
  border-radius: 13px;
  background: linear-gradient(158deg, #454e60, #232936 62%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .5),
    0 3px 10px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
.laptop__cam {
  display: block;
  width: 4px;
  height: 4px;
  margin: 0 auto .35rem;
  border-radius: 50%;
  background: #10141d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 5px;
  overflow: hidden;
  background: #ffffff;
}
.laptop__deck {
  position: relative;
  width: 118%;
  margin-inline: -9%;
  height: 15px;
  background: linear-gradient(#d5dae2, #9aa2af 55%, #767e8b);
  clip-path: polygon(1.2% 0, 98.8% 0, 96.2% 100%, 3.8% 100%);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .42);
}
.laptop__deck::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 13%;
  height: 5px;
  border-radius: 0 0 8px 8px;
  background: rgba(0, 0, 0, .22);
}

/* Handy, überlappt den Laptop */
.phone {
  position: absolute;
  right: -1%;
  bottom: -2.25rem;
  width: 21%;
  min-width: 92px;
  padding: .3rem;
  border-radius: 1.15rem;
  background: linear-gradient(158deg, #454e60, #1c2230);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: rotate(-3deg);
  transition: transform .7s var(--ease);
}
.mockup:hover .phone { transform: rotate(-1deg) translateY(-7px); }
.phone__screen {
  position: relative;
  aspect-ratio: 9 / 18;
  border-radius: .92rem;
  overflow: hidden;
  background: #ffffff;
}
.phone__notch {
  position: absolute;
  z-index: 2;
  top: .22rem;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: .3rem;
  border-radius: 999px;
  background: #1c2230;
}

/* Auf Laptop und Handy läuft die echte Kundenwebsite (verkleinerter iframe).
   Der iframe ist ein Vielfaches der Bildschirmbreite und wird zurückskaliert,
   damit die Seite in einem realistischen Viewport rendert:
   Laptop 300 % → Desktop-Layout, Handy 360 % → Mobil-Layout. */
.device-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(110deg, #eef1f3 25%, #f8fafb 45%, #eef1f3 65%) 0 0 / 300% 100%;
  animation: shimmer 2.4s linear infinite;
}
.device-view iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
/* Breite × Faktor muss exakt 100 % ergeben, sonst schneidet der Rahmen ab.
   Deshalb calc() statt gerundeter Dezimalzahlen. */
.laptop__screen .device-view iframe {
  width: 300%;
  height: 300%;
  transform: scale(calc(1 / 3));
}
.phone__screen .device-view iframe {
  width: 400%;
  height: 400%;
  transform: scale(.25);
}

@media (prefers-reduced-motion: reduce) {
  .device-view { animation: none; }
}

/* Die auf den Geräten gezeigte Website — rein grafisch, ohne Bilddateien */
.site-demo {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 3.5cqw;
  background: #ffffff;
}
.sd__nav { display: flex; align-items: center; gap: 2cqw; }
.sd__logo { width: 7cqw; height: 2.4cqw; border-radius: 1cqw; background: #00171f; flex: none; }
.sd__links { display: flex; gap: 2cqw; margin-inline-start: auto; }
.sd__links i { width: 6cqw; height: 1.4cqw; border-radius: 999px; background: #c3ced4; }
.sd__cta { width: 12cqw; height: 4.2cqw; border-radius: 999px; background: var(--blue); flex: none; }

.sd__hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3cqw; align-items: center; flex: 1; }
.sd__copy { display: flex; flex-direction: column; gap: 1.6cqw; }
.sd__eyebrow { width: 42%; height: 1.4cqw; border-radius: 999px; background: var(--blue); }
.sd__h1 { height: 5.4cqw; border-radius: 1cqw; background: #00171f; }
.sd__h1--short { width: 64%; }
.sd__sub { height: 1.7cqw; border-radius: 999px; background: #bdc9d0; }
.sd__sub--short { width: 70%; }
.sd__btn { width: 46%; height: 5cqw; border-radius: 999px; background: #00171f; margin-top: 1.2cqw; }
.sd__visual {
  align-self: stretch;
  border-radius: 2.5cqw;
  border: 1px solid #dfe3ea;
  background:
    radial-gradient(120% 90% at 22% 14%, #e2e9f4, transparent 62%),
    linear-gradient(150deg, #eef1f6, #d9e2ee);
}
.sd__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.sd__cards i { height: 9cqw; border-radius: 2cqw; background: #eff3f5; border: 1px solid #dfe6ea; }
.sd__cards i:first-child { background: #eaf0f7; border-color: #dbe4f0; }

/* Mobile Fassung derselben Website auf dem Handy */
.site-demo--mobile { padding: 4.5cqw; gap: 3.5cqw; }
.site-demo--mobile .sd__links { display: none; }
.site-demo--mobile .sd__logo { width: 14cqw; height: 4cqw; }
.site-demo--mobile .sd__cta { width: 22cqw; height: 7cqw; }
.site-demo--mobile .sd__hero { grid-template-columns: 1fr; gap: 4cqw; }
.site-demo--mobile .sd__copy { gap: 2.6cqw; }
.site-demo--mobile .sd__eyebrow { height: 2.4cqw; }
.site-demo--mobile .sd__h1 { height: 8cqw; }
.site-demo--mobile .sd__sub { height: 2.8cqw; }
.site-demo--mobile .sd__btn { height: 8cqw; width: 62%; }
.site-demo--mobile .sd__visual { min-height: 38cqw; border-radius: 4cqw; }
.site-demo--mobile .sd__cards { grid-template-columns: 1fr; gap: 3cqw; }
.site-demo--mobile .sd__cards i { height: 14cqw; border-radius: 3.5cqw; }
.site-demo--mobile .sd__cards i:nth-child(3) { display: none; }

/* ============================ 9 · SEKTIONEN ============================ */

/* --- Karte (Basis) --- */
.card {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .3s var(--ease);
}
.card--hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent-fill) 55%, transparent);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-fill) 15%, transparent);
  color: var(--accent-text);
}
.card__icon svg { width: 1.4rem; height: 1.4rem; }
.card h3 { margin-bottom: .6rem; }
/* Karte nur mit Symbol und Überschrift (Abschnitt „Über uns") */
.card h3:last-child { margin-bottom: 0; }
.card p { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Problem-Karten --- */
.pain-card {
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.pain-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-fill) 50%, transparent); }
.pain-card__no {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--accent-text);
  margin-bottom: 1.1rem;
}
.pain-card h3 { font-size: 1.28rem; margin-bottom: .6rem; }
.pain-card p { font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); }

/* --- Leistungskarten --- */
.services { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
/* Zwei Leistungen nebeneinander, gleich breit */
.services--duo { grid-template-columns: 1fr 1fr; }

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.service::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-fill), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.service:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service:hover::after { transform: scaleX(1); }

.service--primary {
  background: var(--band);
  border-color: var(--band-edge);
  color: #edf1f7;
  --text: #edf1f7;
  --text-muted: #bfcede;
  --accent-text: var(--blue-250);
  --border: rgba(111, 176, 213, .22);
}
.service--primary .service__tag {
  background: var(--accent-fill);
  color: var(--on-accent);
  border-color: transparent;
}

.service__tag {
  align-self: flex-start;
  padding: .3rem .7rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.service__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.35rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-fill) 16%, transparent);
  color: var(--accent-text);
}
.service--primary .service__icon { background: rgba(111, 176, 213, .16); }
.service__icon svg { width: 1.5rem; height: 1.5rem; }
.service h3 { margin-bottom: .7rem; }
.service > p { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 1.35rem; }

.service__list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .6rem; }
.service__list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.service__list svg { width: 1.05rem; height: 1.05rem; margin-top: .3rem; color: var(--accent-text); flex: none; }
.service > .link-arrow { margin-top: auto; }

/* --- Nutzen (auf Band) --- */
.benefit {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  backdrop-filter: blur(4px);
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.benefit:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-fill) 60%, transparent); }
.benefit__no {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--accent-text);
  margin-bottom: .85rem;
}
.benefit h3 { font-size: 1.075rem; margin-bottom: .5rem; }
.benefit p { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Ablauf --- */
.process { position: relative; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.process::before {
  content: '';
  position: absolute;
  left: 1.4375rem;
  top: .5rem;
  bottom: 3rem;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}
.process::after {
  content: '';
  position: absolute;
  left: 1.4375rem;
  top: .5rem;
  width: 2px;
  height: var(--process-progress, 0%);
  max-height: calc(100% - 3.5rem);
  background: linear-gradient(180deg, var(--accent-fill), var(--accent-text));
  border-radius: 2px;
  transition: height .25s linear;
}

.step { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.step__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .95rem;
  color: var(--accent-text);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.section--alt .step__no { background: var(--bg-alt); }
.step.is-active .step__no {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}
.step__body { padding-top: .35rem; max-width: 60ch; }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Referenzen --- */
.ref {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
.ref:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent-fill) 55%, transparent);
}
.ref__visual {
  position: relative;
  padding: 1.5rem 1.5rem 0;
  background: linear-gradient(160deg, var(--pv-tint, #eef1f6), transparent 70%), var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.ref__body { padding: clamp(1.4rem, 2.2vw, 1.85rem); display: flex; flex-direction: column; flex: 1; }
.ref__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.tag {
  padding: .28rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ref h3 { margin-bottom: .45rem; }
.ref__role {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .9rem;
}
.ref p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 1.35rem; }
.ref .link-arrow { margin-top: auto; }

/* Platzhalter der Karte „Ihr Unternehmen?“. Dasselbe Seitenverhältnis wie die
   Live-Vorschauen der echten Kundenseiten – nur so stehen die Firmennamen
   aller drei Karten auf einer Linie. Feste Pixelhöhen driften auseinander,
   sobald die Spaltenbreite sich ändert. */
.ref__placeholder {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px dashed color-mix(in srgb, var(--accent-fill) 45%, transparent);
  background: color-mix(in srgb, var(--accent-fill) 6%, transparent);
  color: var(--accent-text);
}
.ref__placeholder svg { width: 2.6rem; height: 2.6rem; opacity: .75; }

/* Live-Vorschau der echten Kundenwebsite (maßstäblich verkleinerter iframe) */
.site-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 23, 31, .16);
  transition: transform .45s var(--ease);
}
.ref:hover .site-frame { transform: translateY(-6px); }

.site-frame__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .3rem;
  height: 1.7rem;
  padding: 0 .6rem;
  background: #eef1f3;
  border-bottom: 1px solid #dde4e8;
}
.site-frame__bar span { width: .38rem; height: .38rem; border-radius: 50%; background: #bfcad0; flex: none; }
.site-frame__bar em {
  margin-inline-start: .4rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: #fff;
  font-size: .58rem;
  font-style: normal;
  font-weight: 600;
  color: #5b6b73;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Der iframe ist viermal so breit wie der Rahmen und wird auf 25 % skaliert.
   Dadurch rendert die Kundenseite in einem echten Desktop-Viewport
   (Rahmenbreite × 4) und passt trotzdem exakt in die Karte. */
.site-frame__viewport {
  position: absolute;
  inset: 1.7rem 0 0;
  overflow: hidden;
  background:
    linear-gradient(110deg, #eef1f3 25%, #f8fafb 45%, #eef1f3 65%) 0 0 / 300% 100%;
  animation: shimmer 2.4s linear infinite;
}
/* Die Höhe ist bewusst grösser als der sichtbare Ausschnitt (640 % statt 400 %):
   Cookie-Banner der fremden Seiten kleben unten am Viewport. Rendert die Seite
   höher als der Rahmen, landet der Banner unterhalb der Beschnittkante und ist
   nicht mehr zu sehen. In einen fremden iframe hineingreifen geht nicht. */
.site-frame__viewport iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 640%;
  border: 0;
  transform: scale(.25);
  transform-origin: 0 0;
  pointer-events: none;
}

/* Sobald main.js den Maßstab berechnet hat, liegen die Maße als Variablen am
   Rahmen (--vp-w, --vp-h, --vp-s). Diese Regel wendet sie auf jeden iframe im
   Rahmen an, auch auf einen, den ein Drittskript (etwa der Consent-Blocker)
   erst später einsetzt oder austauscht. Die Prozentwerte oben bleiben nur
   als Fallback ohne JavaScript. Steht nach den Fallbacks, damit sie bei
   gleicher Spezifität gewinnt. */
.device-view.is-scaled iframe,
.site-frame__viewport.is-scaled iframe {
  width: var(--vp-w);
  height: var(--vp-h);
  transform: scale(var(--vp-s));
}

/* --- Standbild unter der Live-Vorschau ---
   Ein Screenshot der Desktop-Fassung liegt als unterste Ebene im Rahmen. Er
   ist sofort da, während die Live-Seite noch lädt, und auf Handys ist er die
   einzige Ebene: Wix liefert mobilen Browsern nur eine 320 px breite
   Mobil-Fassung, die in Laptop und Referenzkarte falsch aussähe. main.js
   entfernt den iframe dort. Der Live-iframe wird erst eingeblendet, wenn er
   geladen ist, damit kein weißes Fenster das Standbild verdeckt. */
.device-view__still,
.site-frame__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  filter: none;
}
.device-view iframe,
.site-frame__viewport iframe {
  z-index: 1;
  transition: opacity .5s var(--ease);
}
.device-view iframe.is-pending,
.site-frame__viewport iframe.is-pending { opacity: 0; }

/* --- Nachbau der BK-Bau-Startseite (Video + Logo + Navigation + Überschrift) ---
   Die Kundenseite läuft auf Wix und liefert Handys nur eine 320 px breite
   Mobil-Fassung, deren Desktop-Layout sich nicht erzwingen lässt. Statt der
   Live-Seite läuft deshalb ihr Original-Hero-Video, und die Elemente darüber
   sind in HTML nachgebaut. Laptop und Handy zeigen bewusst dieselbe
   Desktop-Ansicht; alle Maße in cqw (Prozent der Rahmenbreite), am Original
   bei 1440 px abgemessen, damit der Nachbau in jedem Rahmen gleich aussieht.
   Der Rahmen füllt sich immer: erst das Standbild (poster), dann das Video. */
.replica {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
  background: #1c2733 url('../img/bkbau-video-poster.jpg') center / cover no-repeat;
  font-family: var(--font-sans);
  color: #fff;
  line-height: 1;
}
.replica__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.replica__logo {
  position: absolute;
  left: 7.7cqw;
  top: 2.6cqw;
  width: 10.5cqw;
  height: 7.3cqw;
  background: #fff;
  overflow: hidden;
}
.replica__logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }
.replica__nav {
  position: absolute;
  left: 43.2cqw;
  top: 2.7cqw;
  width: 35.9cqw;
  height: 4.8cqw;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, .54);
  font-size: 1.1cqw;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.replica__nav span { padding: 0 1.4cqw; }
.replica__cta {
  position: absolute;
  left: 79.2cqw;
  top: 2.7cqw;
  width: 12cqw;
  height: 4.9cqw;
  display: grid;
  place-items: center;
  background: #fff;
  color: #222;
  font-size: 1.1cqw;
}
.replica__copy { position: absolute; left: 4.9cqw; top: 16.5cqw; width: 66cqw; }
.replica__title {
  font-size: 7cqw;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 .2cqw .8cqw rgba(0, 0, 0, .3);
}
.replica__sub { margin-top: .6cqw; font-size: 2.4cqw; line-height: 1.4; font-weight: 700; color: #dbdbdb; }

@keyframes shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -200% 0; }
}

/* Klickfläche über der Vorschau — öffnet die echte Website.
   Bewusst dezent: eine kleine, milchige Schaltfläche unten rechts statt eines
   Farbbuttons über abgedunkeltem Bild. */
.site-frame__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: .6rem;
  background: rgba(10, 23, 48, 0);
  transition: background-color .35s var(--ease);
}
.site-frame__link span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .72rem;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(0, 23, 31, .1);
  box-shadow: 0 2px 10px rgba(0, 23, 31, .14);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.01em;
  opacity: .88;
  transition: opacity .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.site-frame__link span svg { width: .85em; height: .85em; }
.site-frame__link:hover { background: rgba(10, 23, 48, .12); }
.site-frame__link:hover span,
.site-frame__link:focus-visible span {
  opacity: 1;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 23, 31, .2);
}

@media (prefers-reduced-motion: reduce) {
  .site-frame__viewport { animation: none; }
}

/* Referenzkarte, reduziert: Name groß, Eckdaten, Vorschau */
.ref--plain { padding: clamp(1.25rem, 2.2vw, 1.75rem); }
.ref--plain .ref__name {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.35rem);
  letter-spacing: -.035em;
  margin-block: 1.25rem .75rem;
}

/* --- Über uns --- */

/* Rahmen für ein Portraitfoto. Aktuell nutzt keine Seite ihn – die Website
   kommt bewusst ohne Foto aus. Bleibt vorbereitet, falls später doch eines
   dazukommt; dann genügt im HTML:
   <div class="portrait"><img src="assets/img/portrait.jpg" alt="Porträt …"></div> */
.portrait {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(80% 60% at 50% 20%, color-mix(in srgb, var(--accent-fill) 22%, transparent), transparent 70%),
    var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.signature {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.025em;
  font-size: 1.3rem;
  color: var(--accent-text);
  margin-top: 1.5rem;
}
.signature small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: .35rem;
}

.check-list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .85rem; }
.check-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--fs-sm); }
.check-list svg { width: 1.15rem; height: 1.15rem; margin-top: .25rem; color: var(--accent-text); flex: none; }
.check-list strong { display: block; font-weight: 600; }
.check-list span { color: var(--text-muted); }

/* --- FAQ --- */
.faq { display: grid; gap: .75rem; max-width: 820px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent-fill) 55%, transparent); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background:
    linear-gradient(currentColor, currentColor) center / .65rem 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px .65rem no-repeat;
  color: var(--accent-text);
  transition: transform .35s var(--ease), background-size .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(180deg); background-size: .65rem 1.5px, 0 0; }
.faq summary:hover { color: var(--accent-text); }
.faq__answer { padding: 0 clamp(1.15rem, 2vw, 1.6rem) 1.35rem; }
.faq__answer p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 65ch; }

/* --- CTA-Band --- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 1.15rem; }
.cta-band .lead { margin-inline: auto; margin-bottom: 2.25rem; }
.cta-band .stack-cta { justify-content: center; }
.cta-note { margin-top: 1.75rem; font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Kontaktkarten --- */
.contact-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: transform .35s var(--ease), border-color .3s var(--ease);
}
.contact-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-fill) 55%, transparent); }
.contact-tile__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-fill) 15%, transparent);
  color: var(--accent-text);
}
.contact-tile__icon svg { width: 1.3rem; height: 1.3rem; }
.contact-tile small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-tile strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }

/* --- Prosa (Impressum, Datenschutz) --- */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin-block: 2.5rem 1rem; }
.prose h3 { font-size: 1.1rem; margin-block: 1.75rem .6rem; }
.prose p, .prose li { color: var(--text-muted); font-size: var(--fs-sm); }
.prose ul, .prose ol { margin: .75rem 0 0; padding-inline-start: 1.35rem; display: grid; gap: .4rem; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }

/* --- Eingebettetes Impressum (IT-Recht Kanzlei) ---
   Das Skript der Kanzlei lädt den Text per fetch() und setzt ihn als innerHTML
   ein. Er besteht aus Zeilen mit <br>, ohne Absätze und Überschriften, und
   erbt deshalb die Typografie der Seite. Nur Zeilenhöhe und der Hinweisblock
   der Kanzlei am Ende brauchen etwas Feinschliff. */
.itrk-legaltext {
  min-height: 6rem;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--text);
}
.itrk-legaltext #itkanzlei_txt_copyright {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}
/* Die Datenschutzerklärung der Kanzlei bringt eine eigene H1 mit. Die Seite
   hat bereits eine im Hero; die doppelte wird nur nicht angezeigt, der Text
   selbst bleibt unverändert. Die erste Zwischenüberschrift rückt dafür nach oben. */
.itrk-legaltext h1 { display: none; }
.itrk-legaltext h2:first-of-type { margin-top: 0; }
.legal-embed__status { color: var(--text-muted); font-size: var(--fs-sm); }

.placeholder {
  padding: .1rem .45rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-fill) 22%, transparent);
  border: 1px dashed var(--accent-fill);
  font-weight: 700;
  font-size: .92em;
  color: var(--text);
  white-space: nowrap;
}

.notice {
  display: flex;
  gap: .9rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--accent-fill) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-fill) 10%, transparent);
  font-size: var(--fs-sm);
}
.notice svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent-text); margin-top: .15rem; }

/* ============================ 10 · FORMULAR ============================ */

.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.01em;
}
.field label .req { color: var(--accent-text); }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: var(--fs-sm);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
  background-size: .3rem .3rem, .3rem .3rem;
  background-repeat: no-repeat;
  padding-inline-end: 2.5rem;
  cursor: pointer;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill) 22%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: .65; }

.field-error {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #c0392b;
  min-height: 0;
}
:root[data-theme='dark'] .field-error { color: #ff9a8c; }
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: #c0392b; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);
}
.consent input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .18rem;
  flex: none;
  accent-color: var(--accent-fill);
  cursor: pointer;
}
.consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* Honeypot — für Menschen unsichtbar */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin-top: 1rem;
  padding: .9rem 1.15rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-error {
  background: color-mix(in srgb, #c0392b 12%, transparent);
  border: 1px solid color-mix(in srgb, #c0392b 40%, transparent);
}
.form-status.is-info {
  background: color-mix(in srgb, var(--accent-fill) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-fill) 40%, transparent);
}

.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .btn__label { opacity: .5; }

/* ============================ 11 · FOOTER ============================== */

.footer {
  background-color: var(--band);
  border-top: 1px solid var(--band-edge);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  position: relative;
  overflow: hidden;
}
/* Ohne Bild im Rücken braucht der Footer keine Abdunklung mehr – nur den
   dezenten blauen Schimmer, der ihn vom Abschnitt darüber absetzt. */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 80% 0%, rgba(47, 128, 175, .13), transparent 70%);
  pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }

.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.footer__about p { font-size: var(--fs-sm); color: var(--text-muted); margin-block: 1.15rem 1.35rem; max-width: 34ch; }

.footer h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.15rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer a { font-size: var(--fs-sm); color: var(--text-muted); transition: color .2s var(--ease); }
.footer a:hover { color: var(--accent-text); }

/* Buttons im Footer behalten ihre eigene Textfarbe – sonst überschreibt die
   höhere Spezifität von `.footer a` die Textfarbe des CTA-Buttons. */
.footer a.btn { font-size: var(--fs-sm); color: var(--btn-fg); }
.footer a.btn--sm { font-size: var(--fs-xs); }
.footer a.btn:hover { color: var(--btn-fg); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.area-list {
  margin-top: 1.15rem;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text-muted);
}


/* ============================ 12 · ANIMATION =========================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .browser, .phone { transform: none; }
}

/* ============================ 13 · RESPONSIVE ========================== */

@media (max-width: 1080px) {
  /* Telefonnummer verlässt die Leiste als Erstes — sie steht auch im
     Burger-Menü. So bleibt die Navigation bis 960 px am Logo. */
  .header__phone { display: none; }
  .services { grid-template-columns: 1fr 1fr; }
  .services .service--primary { grid-column: 1 / -1; }
  /* Bei nur zwei Karten bleiben beide nebeneinander */
  .services--duo .service--primary { grid-column: auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .nav, .header__phone { display: none; }
  .nav-toggle { display: grid; }
  .header__actions { margin-inline-start: auto; }
  .hero__inner { grid-template-columns: 1fr; }
  /* width: 100% ist nötig – bei Grid-Items schaltet `margin-inline: auto`
     das Strecken ab, sonst schrumpft der Mockup auf Inhaltsbreite.
     padding-inline gibt dem überstehenden Laptop-Sockel (118 %) Platz,
     damit er nicht am Bildschirmrand abgeschnitten wird. */
  .mockup { width: 100%; max-width: 540px; margin-inline: auto; order: -1; padding-inline: 7%; }
  .split { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .services { grid-template-columns: 1fr; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .step { grid-template-columns: 2.75rem 1fr; }
  .step__no { width: 2.75rem; height: 2.75rem; font-size: .95rem; }
  .process::before, .process::after { left: 1.3rem; }
  .stack-cta > .btn { width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .logo__text small { display: none; }
  /* Auf sehr schmalen Geräten passen Logo (152 px) + Aktionen (221 px) +
     Abstände nicht mehr nebeneinander. Der CTA entfällt hier im Header –
     im Burger-Menü steht er weiterhin in voller Breite. */
  .header__actions > .btn--primary { display: none; }
}

@media print {
  .header, .footer, .mobile-nav, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}