picture { display: contents; }
picture > source { display: none; }

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/switzer-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Schmitko — Design-System nach exoape.com (siehe design-referenzen/exoape-design.md)
   Alle Größen in vw. Basis Desktop 1440px, Mobile 375px.
   ========================================================================== */

:root {
  --color-white: #fff;
  --color-white-02: hsla(0, 0%, 100%, .2);
  --color-white-04: hsla(0, 0%, 100%, .4);
  --color-white-06: hsla(0, 0%, 100%, .6);
  --color-white-08: hsla(0, 0%, 100%, .8);
  --color-off-white: #f8f8f8;
  --color-story: #070707;
  --color-dark-grey: #0d0e13;
  --color-dark-grey-02: rgba(13, 14, 19, .2);
  --color-dark-grey-04: rgba(13, 14, 19, .4);
  --color-dark-grey-06: rgba(13, 14, 19, .6);
  --color-dark-grey-08: rgba(13, 14, 19, .8);
  --color-light-grey: #e4e0db;
  --color-light-grey-02: hsla(33, 14%, 88%, .2);
  --color-light-grey-06: hsla(33, 14%, 88%, .6);
  --color-light-grey-08: hsla(33, 14%, 88%, .8);
  --color-sand: #e0ccbb;
  --color-sand-02: hsla(28, 37%, 81%, .2);
  --color-sand-06: hsla(28, 37%, 81%, .6);
  --color-sand-08: hsla(28, 37%, 81%, .8);

  --font-300: "Switzer", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-400: "Switzer", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-500: "Switzer", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Mobile-Skala (375px Basis) */
  --font-s-h0: 21vw;    --font-lh-h0: 20vw;    --font-ls-h0: -1vw;
  --font-s-h1: 17vw;    --font-lh-h1: 16.5vw;  --font-ls-h1: -0.45vw;
  --font-s-h2: 7.7333vw; --font-lh-h2: 9.0667vw; --font-ls-h2: -0.2667vw;
  --font-s-h3: 6.4vw;   --font-lh-h3: 8vw;     --font-ls-h3: -0.1333vw;
  --font-s-h4: 4.8vw;   --font-lh-h4: 6.4vw;   --font-ls-h4: 0vw;
  /* Untergrenzen (10.09.2026): reine vw-Werte wurden bei 320-360 px kleiner als 12 px. */
  --font-s-p: max(3.7333vw, 14px); --font-lh-p: max(5.6vw, 21px);    --font-ls-p: 0.0267vw;
  --font-s-p-small: max(3.7333vw, 14px); --font-lh-p-small: max(5.6vw, 21px); --font-ls-p-small: 0.0267vw;
  --font-s-subtitle: max(3.2vw, 12px); --font-lh-subtitle: max(4.2667vw, 16px); --font-ls-subtitle: 0.0267vw;
  --font-s-cta: max(4.2667vw, 15px); --font-lh-cta: max(4.2667vw, 15px); --font-ls-cta: 0vw;
  --font-s-label: max(3.7333vw, 14px); --font-lh-label: max(3.7333vw, 14px); --font-ls-label: 0vw;

  --container: 89.3333vw;
  --gap: 4.2667vw;
  --section-gap: 24vw;

  --ease: cubic-bezier(1, 0, 0, 1);
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --duration: .5s;
}

@media (min-width: 601px) {
  :root {
    --font-s-h0: 17.3611vw; --font-lh-h0: 15.6944vw; --font-ls-h0: -0.7986vw;
    --font-s-h1: 10.5vw;    --font-lh-h1: 10.2vw;    --font-ls-h1: -0.36vw;
    /* Untergrenzen (10.09.2026): zwischen 601 und 1200 px (Tablets, Handy quer) sank die
       Schrift auf 7,5 bis 12,8 px. Verhaeltnis Schrift/Zeilenhoehe bleibt gleich. */
    --font-s-h2: max(3.6111vw, 32px);  --font-lh-h2: max(4.4444vw, 40px);  --font-ls-h2: -0.1042vw;
    --font-s-h3: max(2.2222vw, 24px);  --font-lh-h3: max(2.7778vw, 30px);  --font-ls-h3: -0.0069vw;
    --font-s-h4: max(1.6667vw, 18px);  --font-lh-h4: max(2.2222vw, 24px);  --font-ls-h4: 0vw;
    --font-s-p: max(1.1111vw, 15px);   --font-lh-p: max(1.6667vw, 22px);   --font-ls-p: 0.0069vw;
    --font-s-subtitle: max(0.8333vw, 12px); --font-lh-subtitle: max(1.1111vw, 16px); --font-ls-subtitle: 0.0069vw;
    --font-s-p-small: max(0.9722vw, 13px); --font-lh-p-small: max(1.4583vw, 19px); --font-ls-p-small: 0.0069vw;
    --font-s-cta: max(1.1111vw, 15px); --font-lh-cta: max(1.1111vw, 15px); --font-ls-cta: 0vw;
    --font-s-label: max(0.9722vw, 13px); --font-lh-label: max(0.9722vw, 13px); --font-ls-label: 0vw;

    --container: 83.3333vw;
    --gap: 2.2222vw;
    --section-gap: 13.8889vw;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.reduced { scrollbar-width: auto; }
html.reduced::-webkit-scrollbar { display: block; }
body {
  background: var(--color-white);
  color: var(--color-dark-grey);
  font-family: var(--font-300);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
::selection { background: var(--color-sand); color: var(--color-dark-grey); }

/* ---------- Typo-Utilities ---------- */
.h0 { font-family: var(--font-400); font-weight: 410; /* per Pixelmessung: Stammbreite = Referenz (Lausanne 300) */ font-size: var(--font-s-h0); line-height: var(--font-lh-h0); letter-spacing: var(--font-ls-h0); }
.h1 { font-family: var(--font-400); font-weight: 410; font-size: var(--font-s-h1); line-height: var(--font-lh-h1); letter-spacing: var(--font-ls-h1); }
.h4, .intro, .text-2 p, .services .text p, .articles .text p, .footer .body {
  text-wrap: balance;
  font-family: var(--font-300); font-weight: 300;
  font-size: var(--font-s-h4); line-height: var(--font-lh-h4); letter-spacing: var(--font-ls-h4);
}
.label {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-400); font-weight: 400;
  font-size: var(--font-s-label); line-height: var(--font-lh-label); letter-spacing: var(--font-ls-label);
}
.label .plus { width: .62em; height: .62em; flex: none; }

/* Zeilen-Reveal */
.title-mask { overflow: hidden; }
.title-line {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.4s var(--ease-out);
  will-change: transform;
}
.title.is-inview .title-line { transform: none; }
.title.is-inview .title-mask:nth-child(2) .title-line { transition-delay: .08s; }
.title.is-inview .title-mask:nth-child(3) .title-line { transition-delay: .16s; }

.reveal {
  opacity: 0; transform: translate3d(0, 2.5vw, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal.is-inview { opacity: 1; transform: none; }

/* ---------- Grid ---------- */
.container {
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--color-dark-grey);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s linear, visibility 0s linear .4s;
}
.preloader-mark { width: 7.2vw; min-width: 64px; opacity: .38; }
body.is-loaded .preloader { opacity: 0; visibility: hidden; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.cursor.is-visible { opacity: 1; }
/* Größe nur über transform: scale (kein Layout-Thrash) */
/* Wie bei der Referenz: nur über Medien sichtbar (Kreis mit „Play"/„Mehr"), sonst nativer Cursor */
.cursor-dot {
  position: absolute; left: 0; top: 0;
  width: 12px; height: 12px; border-radius: 100%;
  background: var(--color-off-white);
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .3s;
  will-change: transform;
}
.cursor.is-media .cursor-dot { transform: translate(-50%, -50%) scale(8.5); opacity: 1; }
.cursor-label {
  color: var(--color-dark-grey);
  font-size: 1.4px; font-weight: 400; letter-spacing: .01em;
  opacity: 0; transition: opacity .3s;
}
.cursor.is-media .cursor-label { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Header ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  width: var(--container); margin: 0 auto;
  height: 8.3vw; max-height: 120px; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--color-dark-grey);
  transition: color .5s;
  pointer-events: none;
}
.nav.is-light { color: var(--color-white); }
.nav > * { pointer-events: auto; }

.logo { display: block; position: relative; height: 2.2vw; min-height: 24px; }
.wordmark {
  display: block;
  font-family: var(--font-500); font-weight: 500;
  font-size: max(1.55vw, 16px); line-height: 1; letter-spacing: -0.03em; /* Untergrenze: bei 768 px waren es 11,9 px */
  transition: opacity .5s, transform .5s var(--ease-out);
}
.brandmark {
  position: absolute; left: 0; top: 50%;
  height: 3.2vw; min-height: 34px; width: auto;
  transform: translateY(-50%) scale(.9);
  opacity: 0; transition: opacity .5s, transform .5s var(--ease-out), filter .5s;
}
.nav.is-light .brandmark { filter: brightness(0) invert(1); }
.nav.is-compact .wordmark { opacity: 0; transform: translateY(-.4em); pointer-events: none; }
.nav.is-compact .brandmark { opacity: 1; transform: translateY(-50%) scale(1); }

.nav-list { display: flex; gap: 2.4vw; transition: opacity .5s, transform .5s var(--ease-out); }
.nav-link {
  position: relative; display: inline-block;
  font-family: var(--font-300); font-weight: 300;
  font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); letter-spacing: var(--font-ls-p-small);
  will-change: transform;
}
.nav-link::after, .list-link::after, .footer-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--duration) var(--ease);
}
.nav-link:hover::after, .list-link:hover::after, .footer-link:hover::after {
  transform: scaleX(1); transform-origin: left center;
}
.nav.is-compact .nav-list { opacity: 0; transform: translateY(-.6em); pointer-events: none; }

/* Sprachumschalter DE / EN. Eigenes Element zwischen .nav-list und
   Menue-Knopf, nicht in der .nav-list: die verschwindet unter 600px und beim
   Scrollen, der Umschalter waere dann auf dem Handy nie erreichbar.
   margin-left:auto an der Liste haelt Liste und Umschalter rechts, wenn die
   Leiste drei Kinder hat. Der Menue-Knopf liegt absolut rechts aussen; sobald
   er sichtbar ist (beim Scrollen, bei offenem Menue, am Handy immer), rueckt
   der Umschalter um seine Breite nach links. Die Breite ergibt sich aus
   .menu-label (min-width 5.6em), dem Abstand (1vw) und .menu-icon
   (1.55vw, mindestens 20px), dazu ein Abstand wie zwischen den Navlinks. */
.nav-list { margin-left: auto; }
.nav-lang {
  display: flex; gap: .6em; align-items: center;
  margin-left: 2.4vw;
  font-size: var(--font-s-p-small);
  --nav-lang-versatz: calc(-1 * (5.6em + 1vw + max(1.55vw, 20px) + 2.4vw));
  transition: transform .5s var(--ease-out), opacity .5s;
}
.nav-lang .nav-link.is-current { opacity: 1; font-weight: 500; }
.nav-lang .nav-link:not(.is-current) { opacity: .6; }
.nav-lang a.nav-link:hover { opacity: 1; }
/* Groessere Trefferflaeche, ohne das Layout zu verschieben. */
.nav-lang a.nav-link { padding: .4em .3em; margin: -.4em -.3em; }
/* Beim Scrollen blendet der Umschalter mit der Navigation aus (Mehmet,
   08.10.2026: muss nicht dauernd sichtbar sein). Erreichbar bleibt er oben
   auf der Seite und im Menue-Overlay. */
.nav.is-compact .nav-lang { opacity: 0; pointer-events: none; transform: translateY(-.6em); }
body.is-menu-open .nav .nav-lang { transform: translateX(var(--nav-lang-versatz)); }
/* Dieselbe Zeile im Menue-Overlay bei den Kontaktangaben: die Leiste ist bei
   offenem Overlay verdeckt. */
.menu-lang { margin: 1.2em 0; transform: none; }

.menu-button {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 1vw;
  font-size: var(--font-s-p-small); line-height: 1;
  opacity: 0; transition: opacity .5s, color .5s; pointer-events: none;
}
.menu-icon { display: flex; flex-direction: column; gap: 5px; width: 1.55vw; min-width: 20px; }
.menu-icon i { display: block; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.menu-button:hover .menu-icon i:nth-child(1) { transform: translateX(3px); }
.menu-button:hover .menu-icon i:nth-child(3) { transform: translateX(-3px); }
.nav.is-compact .menu-button { opacity: 1; pointer-events: auto; }

/* ---------- App / Page (virtueller Scroll) ---------- */
.app { position: fixed; inset: 0; overflow: hidden; background: var(--color-white); }
.page { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
html.reduced .app { position: static; overflow: visible; }
html.reduced .page { position: static; }

/* ---------- Link (CTA) ---------- */
.link {
  position: relative; display: inline-flex; align-items: center; gap: .9em;
  justify-self: flex-start;
  font-family: var(--font-300); font-weight: 300;
  font-size: var(--font-s-cta); line-height: var(--font-lh-cta); letter-spacing: var(--font-ls-cta);
  color: var(--color-white);
}
.link.is-dark { color: var(--color-dark-grey); }
.link .dot {
  width: .3em; height: .3em; border-radius: 100%;
  background: currentColor; opacity: .45; flex: none;
  transition: transform .5s var(--ease), opacity .3s;
}
.link:hover .dot { opacity: 1; transform: scale(1.3); }
.link .label {
  position: relative; display: inline-block;
  font-family: var(--font-300); font-weight: 300; font-size: inherit; line-height: inherit; gap: 0;
}
.link .label::before, .link .label::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform-origin: right center;
  transition: transform var(--duration) var(--ease);
}
.link .label::after { transform: scaleX(0); transform-origin: left center; transition-delay: .18s; }
.link:hover .label::before { transform: scaleX(0); }
.link:hover .label::after { transform: scaleX(1); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--color-dark-grey);
  color: var(--color-white);
  padding-bottom: var(--section-gap);
  overflow: hidden;
}
.hero .background {
  position: absolute; left: 0; top: 0; width: 100%; height: 100vh;
  z-index: 0; will-change: transform;
}

/* Standbilder der Videos
   Das gewaehlte Standbild liegt als Hintergrund auf der Flaeche selbst, das
   Video blendet sich darueber ein, sobald es laeuft. Zwei Gruende: iOS spielt
   im Stromsparmodus nichts von selbst ab und laedt auch keine Videodaten vor,
   ohne Hintergrund bliebe dort eine schwarze Flaeche. Und weil das Standbild
   nicht der erste Frame sein muss, wuerde ein harter Wechsel sichtbar rucken.
   Deckkraft unter 1 gehoert zur Gestaltung der jeweiligen Flaeche, darum steht
   der Zielwert je Ort an der is-ready-Regel. */
.hat-standbild { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hat-standbild > .video { opacity: 0; transition: opacity 1s var(--ease-out); }
.hat-standbild > .video.is-ready { opacity: 1; }

.hero .background .video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero .background .gradient {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,14,19,.18) 0%, rgba(13,14,19,0) 30%, rgba(13,14,19,0) 65%, rgba(13,14,19,.32) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero .text-1 { grid-column: 1 / -1; padding-top: 48vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.hero .intro { grid-column: 1 / 7; max-width: 37vw; text-wrap: initial; }
.hero .title {
  grid-column: 1 / -1;
  margin-top: 9.5vh;
  margin-left: -1.2vw; /* optische Bündigkeit der Stämme mit der Absatzkante */
  color: var(--color-white);
  will-change: transform;
}
.hero .text-2 {
  grid-column: 1 / -1;
  margin-top: 5vh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gap);
  row-gap: 5.5vw; /* CTA landet auf der Mitte der Linkliste */
}
.hero .text-2 p { grid-column: 1 / 7; grid-row: 1; max-width: 33.5vw; text-wrap: initial; }
.hero .text-2 .link { grid-column: 1 / 6; grid-row: 2; align-self: start; margin-left: -1.2em; } /* hängender Punkt, Text bündig */
.hero .text-2 .list { grid-row: 1 / span 3; align-self: start; padding-top: 13.4vw; }
.hero .text-2 .list-pages { grid-column: 9 / 11; }
.hero .text-2 .list-contact { grid-column: 11 / 13; }
.list-item { line-height: 1; }
.list-link {
  position: relative; display: inline-block;
  font-size: var(--font-s-cta); line-height: 2;
}
.scroll-to {
  transition: opacity .5s;
  position: absolute; right: calc((100vw - var(--container)) / 2); top: calc(100vh - 3.6vw);
  z-index: 1;
  font-size: var(--font-s-p-small); color: var(--color-white-06);
}

/* ---------- LEISTUNGEN ---------- */
.services {
  position: relative;
  background: var(--color-white);
  color: var(--color-dark-grey);
  padding: var(--section-gap) 0;
}
.services .title { grid-column: 2 / 9; margin-left: -1.6vw; }
.services .text { grid-column: 9 / 13; grid-row: 1; display: grid; row-gap: 3vw; align-self: start; align-content: start; padding-top: 1vw; }
.services .text .label { color: var(--color-dark-grey); }

.projects { margin-top: 7vw; row-gap: 0; }
.project { display: block; position: relative; }
.project .block { overflow: hidden; background-color: #1a1b22; }
.project .video, .project img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.2s var(--ease-out);
}
.project:hover .video { transform: scale(1.04); }
.project .info {
  display: flex; flex-wrap: wrap; gap: 0 .5em;
  margin-top: 1.6vw;
  font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); letter-spacing: var(--font-ls-p-small);
  color: var(--color-dark-grey-06);
}
.project .info strong { font-family: var(--font-500); font-weight: 500; color: var(--color-dark-grey); }
.project .info .info-line:nth-child(2)::before { content: "— "; }

/* Versatz exakt nach exoape.com vermessen (vw-Werte, Basis 1440) */
.project-1 { grid-column: 2 / 8; grid-row: 1; }
.project-1 .block { aspect-ratio: 1038 / 1594; }
.project-2 { grid-column: 9 / 13; grid-row: 2; margin-top: -27.5vw; }
.project-2 .block { aspect-ratio: 673 / 901; }
.project-3 { grid-column: 6 / 11; grid-row: 3; margin-top: 15.6vw; }
.project-3 .block { aspect-ratio: 855 / 1127; }
.project-4 { grid-column: 2 / 5; grid-row: 4; margin-top: -18.3vw; }
.project-4 .block { aspect-ratio: 490 / 671; }

.services .browse { grid-column: 1 / -1; justify-self: center; margin-top: 9vw; }

/* ---------- SHOWREEL ---------- */
.showreel {
  position: relative;
  background: var(--color-dark-grey);
  color: var(--color-light-grey);
  padding: 4.4vw 0 3.8vw;
}
.showreel .container { min-height: calc(100vh - 8.2vw); grid-template-rows: auto 1fr auto; }
.showreel .label { grid-column: 1 / -1; justify-self: center; align-self: start; color: var(--color-light-grey); }
.reel {
  grid-column: 1 / -1; position: relative; align-self: center;
  margin-top: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center;
}
.reel-video {
  grid-column: 1 / -1; grid-row: 1; justify-self: center;
  width: 42vw; aspect-ratio: 16 / 10; overflow: hidden; background: #15161c;
  transition: opacity .25s cubic-bezier(.25,.25,.75,.75);
}
.reel-video .video { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .5s; }
.reel:hover .reel-video .video { opacity: .85; }
.reel .title {
  grid-column: 1 / -1; grid-row: 1; z-index: 2;
  position: relative; align-self: stretch;
  width: 100%; pointer-events: none;
  color: var(--color-light-grey);
}
.reel .title .title-mask { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.reel .title .title-mask:first-child { right: calc(50% + 16.3vw); }
.reel .title .title-mask:last-child { left: calc(50% + 17.3vw); }
.reel .word-left, .reel .word-right { margin: 0; }
.reel-text {
  grid-column: 4 / 10; justify-self: center; align-self: end; text-align: center;
  margin-top: 0;
  font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); letter-spacing: var(--font-ls-p-small);
  color: var(--color-light-grey);
}

/* ---------- WISSEN / COLLAGE ---------- */
.articles {
  position: relative;
  background: var(--color-white);
  color: var(--color-dark-grey);
  padding: var(--section-gap) 0;
}
.media-wrapper {
  position: relative; width: 100vw; height: 66vw;
  margin: 0 0 -14vw;
}
.media { position: absolute; overflow: hidden; background: #ededed; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media-1 { left: 37vw; top: 0; width: 25.9vw; height: 44.4vw; z-index: 2; }
.media-2 { left: 73.4vw; top: 40vw; width: 26.6vw; height: 15vw; z-index: 1; }
.media-3 { left: 60.5vw; top: 9.4vw; width: 12vw; height: 17.2vw; z-index: 3; }
.media-4 { left: 15.8vw; top: 27vw; width: 26.3vw; height: 17.6vw; z-index: 3; }
.media-5 { left: 0; top: 52vw; width: 22vw; height: 14vw; z-index: 4; }
.media { will-change: transform; }
.articles .text { row-gap: 0; position: relative; z-index: 2; }
.articles .text .label { grid-column: 1 / -1; justify-self: center; }
.articles .text .title { grid-column: 1 / -1; text-align: center; margin-top: 3.4vw; }
.articles .text p { grid-column: 4 / 10; justify-self: center; max-width: 31vw; text-align: center; margin-top: 4.6vw; }
.articles .text .link { grid-column: 1 / -1; justify-self: center; margin-top: 3.2vw; }

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  background: var(--color-story);
  color: var(--color-sand-08);
  padding: 2.2vw 0 5.6vw;
  overflow: hidden;
}
.footer .top { align-items: start; position: relative; }
.footer .story { grid-column: 1 / 5; display: grid; row-gap: 3.4vw; align-content: start; padding-top: .6vw; position: relative; z-index: 1; }
.footer .story .title { color: var(--color-sand); line-height: 10vw; }
.footer .body { color: var(--color-sand-08); max-width: 30em; }
.footer .orbit {
  position: absolute; left: 28vw; top: -2vw; width: 55vw; height: 24vw; overflow: hidden;
  filter: saturate(.5) brightness(.85) contrast(1.05);
  background: var(--color-story);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 22%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 22%, transparent 76%);
}
.footer .orbit .video { width: 100%; height: 100%; object-fit: cover; }

.footer .bottom { margin-top: 5.3vw; row-gap: 0; align-items: start; }
.footer .line { grid-column: 1 / -1; height: 1px; background: var(--color-sand-02); margin-bottom: 5.2vw; }
.footer .col { display: grid; row-gap: .375em; font-size: var(--font-s-p); line-height: var(--font-lh-p); letter-spacing: var(--font-ls-p); }
.footer .address { grid-column: 1 / 4; }
.footer .pages { grid-column: 4 / 6; }
.footer .socials { grid-column: 6 / 8; }
/* .legal teilt den Klassennamen mit dem Abschnitt der Rechtsseiten (Zeile 703,
   padding-top 2vw) - die Fusszeilenspalte hing dadurch 29 px tiefer. Hier
   zurueckgesetzt und mit der bisher fehlenden Rasterzuweisung versehen. */
.footer .legal { grid-column: 8 / 10; padding-top: 0; }
.footer-link { position: relative; display: inline-block; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .nav { height: 18vw; }
  .wordmark { font-size: 5.4vw; }
  .brandmark { height: 9vw; }
  .nav-list { display: none; }
  .menu-button { opacity: 1; pointer-events: auto; }
  /* Der Menue-Knopf ist hier immer sichtbar, der Umschalter steht deshalb
     links daneben und blendet beim Scrollen ohne Seitwaertssprung aus. */
  .nav > .nav-lang { margin-left: auto; transform: translateX(var(--nav-lang-versatz)); }
  .nav.is-compact > .nav-lang { transform: translateX(var(--nav-lang-versatz)) translateY(-.6em); }

  /* Hero am Handy (10.09.2026, vom Nutzer am Regler eingestellt): 100vh statt 220vh -
     nach dem Text folgten 1,4 Bildschirme nur Video, am Rechner sind es 0,2. Titel
     tiefer (60vh), Absatz direkt darunter (3vh), Titel 9,4vw, Absatz 18,5px. */
  .hero { min-height: 100vh; }
  .hero .text-1 { padding-top: 60vh; }
  .hero .intro { grid-column: 1 / -1; max-width: none; }
  .hero .title { margin-top: 14vw; }
  .hero .text-2 { margin-top: 3vh; row-gap: 8vw; grid-template-rows: none; }
  .hero .text-2 p { font-size: 18.5px; }
  .hero .text-2 p, .hero .text-2 .link, .hero .text-2 .list, .hero .text-2 .list-pages, .hero .text-2 .list-contact { grid-column: 1 / -1; grid-row: auto; padding-top: 0; max-width: none; }
  .scroll-to { display: none; }
  .hero .title { white-space: nowrap; margin-left: 0; }

  .services .title, .services .text { grid-column: 1 / -1; }
  .services .text { margin-top: 8vw; row-gap: 6vw; }
  .projects { margin-top: 16vw; }
  .services .title { grid-column: 1 / -1; }
  .services .text { grid-column: 1 / -1; grid-row: auto; margin-bottom: 10vw; }
  .project-1, .project-2, .project-3, .project-4 { grid-column: 1 / -1; grid-row: auto; margin-top: 12vw; }
  .project .info { margin-top: 4vw; }
  .services .browse { margin-top: 16vw; }

  .showreel .container { min-height: 0; grid-template-rows: none; }
  .reel { display: block; margin: 8vw 0; }
  .reel-video { width: 100%; }
  .reel .title { position: relative; display: flex; flex-direction: column; margin-bottom: 6vw; }
  .reel .title .title-mask { position: static; transform: none; }
  .reel .title .title-mask:last-child { align-self: flex-end; }
  .reel .word-left, .reel .word-right { margin: 0; }
  .reel-text { grid-column: 1 / -1; margin-top: 12vw; }

  .media-wrapper { height: 150vw; margin-bottom: 8vw; }
  .media-1 { left: 30vw; top: 0; width: 44vw; height: 66vw; }
  .media-2 { left: 52vw; top: 78vw; width: 42vw; height: 24vw; }
  .media-3 { left: 76vw; top: 8vw; width: 20vw; height: 28vw; }
  .media-4 { left: 4vw; top: 60vw; width: 40vw; height: 26vw; }
  .media-5 { left: 6vw; top: 96vw; width: 32vw; height: 32vw; }
  .articles .text p { grid-column: 1 / -1; }

  .footer .story, .footer .orbit { grid-column: 1 / -1; }
  .footer .orbit { position: relative; left: auto; top: auto; margin-top: 12vw; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .footer .address, .footer .pages, .footer .socials { grid-column: 1 / -1; margin-bottom: 8vw; }
  .footer .legal { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .title-line, .reveal, .project .video { transition: none !important; transform: none !important; opacity: 1 !important; }
}


/* ==========================================================================
   Menü-Overlay und Unterseiten (ergänzt 07.09.2026)
   ========================================================================== */

/* ---------- Menü-Overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--color-dark-grey); color: var(--color-light-grey);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease-out), visibility 0s linear .6s;
}
body.is-menu-open .menu { opacity: 1; visibility: visible; transition: opacity .6s var(--ease-out), visibility 0s; }
body.is-menu-open { overflow: hidden; }
.menu-inner { height: 100vh; align-content: center; row-gap: 4vw; }
.menu-list { grid-column: 1 / 8; display: grid; row-gap: .6vw; }
.menu-link {
  display: inline-block; position: relative;
  font-family: var(--font-400); font-weight: 400;
  font-size: 7.2vw; line-height: 1; letter-spacing: -0.03em;
  color: var(--color-light-grey-06);
  transition: color .5s;
}
.menu-link:hover, .menu-link.is-current { color: var(--color-light-grey); }
.menu-link .title-mask { display: block; overflow: hidden; }
.menu-link .title-line { display: block; transform: translate3d(0, 110%, 0); transition: transform 1.1s var(--ease-out); }
body.is-menu-open .menu-link .title-line { transform: none; }
body.is-menu-open .menu-item:nth-child(2) .title-line { transition-delay: .06s; }
body.is-menu-open .menu-item:nth-child(3) .title-line { transition-delay: .12s; }
body.is-menu-open .menu-item:nth-child(4) .title-line { transition-delay: .18s; }
.menu-aside {
  grid-column: 9 / 13; align-self: end; display: grid; row-gap: 2.4vw;
  font-size: var(--font-s-p); line-height: var(--font-lh-p);
  opacity: 0; transform: translate3d(0, 1.5vw, 0); transition: opacity .8s var(--ease-out) .25s, transform .8s var(--ease-out) .25s;
}
body.is-menu-open .menu-aside { opacity: 1; transform: none; }
.menu-contact, .menu-social { display: grid; row-gap: .3em; }
.menu-address { color: var(--color-light-grey-06); }
/* Menu-Button: Beschriftung wechselt, Striche werden zum X */
.menu-label { position: relative; display: inline-block; min-width: 5.6em; text-align: right; }
.menu-label-close { position: absolute; right: 0; top: 0; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.menu-label-open { transition: opacity .3s; }
body.is-menu-open .menu-label-open { opacity: 0; }
body.is-menu-open .menu-label-close { opacity: 1; }
.menu-icon i { transition: transform .5s var(--ease), opacity .3s; transform-origin: center; }
body.is-menu-open .menu-button .menu-icon i:nth-child(1), body.is-menu-open .menu-button:hover .menu-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.is-menu-open .menu-button .menu-icon i:nth-child(2) { opacity: 0; }
body.is-menu-open .menu-button .menu-icon i:nth-child(3), body.is-menu-open .menu-button:hover .menu-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.is-menu-open .nav { color: var(--color-light-grey) !important; }
body.is-menu-open .nav .brandmark { filter: brightness(0) invert(1); }
body.is-menu-open .nav .menu-button { opacity: 1; pointer-events: auto; }
body.is-menu-open .nav .nav-list { opacity: 0; pointer-events: none; }
.nav-link.is-current::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- Unterseiten: Kopf ---------- */
.subhero {
  position: relative; min-height: 100vh; overflow: hidden;
  background: var(--color-dark-grey); color: var(--color-white);
  display: grid; align-items: end; padding-bottom: 9vw;
}
.subhero .background { position: absolute; inset: 0; }
.subhero .background .video, .subhero .background img { width: 100%; height: 100%; object-fit: cover; }
.subhero .background img { opacity: .85; }
.subhero .background .video.is-ready { opacity: .85; }
.subhero .background .gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,19,.25) 0%, rgba(13,14,19,.05) 40%, rgba(13,14,19,.55) 100%); }
.subhero .container { position: relative; z-index: 1; row-gap: 3vw; }
.subhero .label { grid-column: 1 / -1; color: var(--color-white-08); }
.subhero .title { grid-column: 1 / -1; }
.subhero .lead { grid-column: 1 / 7; }
.lead, .statement {
  font-family: var(--font-300); font-weight: 300;
  font-size: var(--font-s-h4); line-height: var(--font-lh-h4); letter-spacing: var(--font-ls-h4);
  text-wrap: balance;
}
.h2 { font-family: var(--font-300); font-weight: 300; font-size: var(--font-s-h2); line-height: var(--font-lh-h2); letter-spacing: var(--font-ls-h2); }
.h3 { font-family: var(--font-300); font-weight: 300; font-size: var(--font-s-h3); line-height: var(--font-lh-h3); letter-spacing: var(--font-ls-h3); }
.h4 { font-family: var(--font-300); font-weight: 300; font-size: var(--font-s-h4); line-height: var(--font-lh-h4); }

/* ---------- Sektionen ---------- */
.section { position: relative; padding: var(--section-gap) 0; background: var(--color-white); color: var(--color-dark-grey); }
.section .container { row-gap: 2.6vw; align-items: start; }
.section .label { margin-bottom: 2vw; display: inline-flex; }
.section .h3 { margin-bottom: 2vw; }
.block { display: grid; row-gap: 1.6vw; }
.block .label { margin-bottom: .6vw; }
.section p { font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); max-width: 36em; }
.section p.lead, .section p.statement { font-size: var(--font-s-h4); line-height: var(--font-lh-h4); color: var(--color-dark-grey); max-width: 26em; margin-bottom: 2vw; }
.statement.big { font-size: var(--font-s-h2); line-height: var(--font-lh-h2); letter-spacing: var(--font-ls-h2); color: var(--color-dark-grey); max-width: none; text-align: center; }
.bullets { display: grid; row-gap: .5em; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); }
.bullets li { padding-left: 1.4em; position: relative; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .62em; width: .3em; height: .3em; border-radius: 100%; background: currentColor; opacity: .5; }
.bullets.big { font-size: var(--font-s-h4); line-height: var(--font-lh-h4); color: var(--color-dark-grey); row-gap: .9em; }
.section .link { margin-top: 1vw; }

/* Nummerierte Schritte (wie „How we work" 01–04 der Referenz) */
.steps { display: grid; row-gap: 0; }
.step { display: grid; grid-template-columns: 6vw 1fr; column-gap: var(--gap); padding: 3vw 0; border-top: 1px solid var(--color-dark-grey-02); }
.step:last-child { border-bottom: 1px solid var(--color-dark-grey-02); }
.step-no { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); padding-top: .5em; }
.step .h3 { grid-column: 2; margin-bottom: .6vw; }
.step p { grid-column: 2; }

/* Leistungs-Blöcke */
.service { position: relative; padding: var(--section-gap) 0 0; background: var(--color-white); color: var(--color-dark-grey); }
.service:last-of-type { padding-bottom: 0; }
.service .container { align-items: center; row-gap: 3vw; }
.service-media { grid-column: 1 / 7; aspect-ratio: 4 / 5; overflow: hidden; background-color: #1a1b22; }
.service-media .video { width: 100%; height: 100%; object-fit: cover; }
.service-text { grid-column: 8 / 13; display: grid; row-gap: 1.8vw; }
.service.is-flip .service-media { grid-column: 7 / 13; grid-row: 1; }
.service.is-flip .service-text { grid-column: 1 / 6; grid-row: 1; }
.service-text .h2 { font-weight: 300; }
.service-text .lead { color: var(--color-dark-grey); }
.service-text .tools, .service-text .bullets { font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); }

/* FAQ */
.faq { display: grid; }
.faq-item { border-top: 1px solid var(--color-dark-grey-02); }
.faq-item:last-child { border-bottom: 1px solid var(--color-dark-grey-02); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 2vw; padding: 1.6vw 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: var(--font-s-h4); line-height: var(--font-lh-h4); font-weight: 300; }
.faq-plus { position: relative; width: 1vw; height: 1vw; flex: none; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: rotate(0); }
.faq-item p { padding: 0 0 2vw; max-width: 40em; }

/* CTA-Band (dunkel) */
.cta-band { position: relative; padding: var(--section-gap) 0; background: var(--color-dark-grey); color: var(--color-light-grey); }
.cta-band .container { row-gap: 3vw; }
.cta-band .label, .cta-band .title { grid-column: 1 / -1; }
.cta-band .lead { grid-column: 1 / 7; color: var(--color-light-grey-08); }
.cta-band .link { grid-column: 1 / -1; color: var(--color-light-grey); }

/* Team, Zitat */
.team { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); row-gap: 2vw; margin-top: 3vw; padding-top: 2vw; border-top: 1px solid var(--color-dark-grey-02); }
.team li { display: grid; row-gap: .3em; font-size: var(--font-s-p); }
.team strong { font-family: var(--font-500); font-weight: 500; color: var(--color-dark-grey); }
.team span { color: var(--color-dark-grey-06); }
.quote { padding-top: 0; }

/* Kontakt */
.contact-head { position: relative; background: var(--color-white); color: var(--color-dark-grey); padding: 31vw 0 10vw; overflow: hidden; }
.marquee { position: absolute; left: 0; right: 0; top: 15vw; overflow: hidden; white-space: nowrap; pointer-events: none; }
.marquee-track { display: inline-block; font-weight: 340; animation: marquee 40s linear infinite; padding-right: 2vw; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.contact-head .container { position: relative; align-items: end; row-gap: 4vw; }
.contact-left { grid-column: 1 / 5; display: grid; row-gap: 3vw; align-self: end; }
.contact-left p, .contact-right p { font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey); }
.contact-links { display: grid; row-gap: 1.2vw; }
.contact-media { grid-column: 6 / 9; aspect-ratio: 2 / 3; overflow: hidden; margin-top: -19vw; position: relative; z-index: 1; }
.contact-media img { width: 100%; height: 100%; object-fit: cover; }
.contact-right { grid-column: 10 / 13; display: grid; row-gap: 2vw; align-self: end; padding-bottom: 1vw; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.form { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 2.4vw; }
.form label { display: grid; row-gap: .5em; font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); }
.form label.wide, .form .hint, .form .submit { grid-column: 1 / -1; }
.form input, .form textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--color-dark-grey-02); background: transparent; border-radius: 0;
  font: inherit; font-size: var(--font-s-h4); line-height: var(--font-lh-h4); font-weight: 300; color: var(--color-dark-grey);
  padding: .3em 0; outline: none; transition: border-color .4s;
}
.form input:focus, .form textarea:focus { border-color: var(--color-dark-grey); }
.form textarea { resize: vertical; }
.form .hint { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); max-width: none; }
.form .hint a { text-decoration: underline; text-underline-offset: 3px; }
.form .submit { justify-self: start; padding: 0; line-height: var(--font-lh-cta); align-items: center; }
.form .submit .label { font-family: var(--font-300); font-weight: 300; font-size: var(--font-s-cta); line-height: var(--font-lh-cta); }

/* Rechtliches */
.legal-head { background: var(--color-white); color: var(--color-dark-grey); padding: 16vw 0 6vw; }
.legal-head .container { align-items: end; row-gap: 2vw; }
.legal-head .lead { margin-top: 3vw; color: var(--color-dark-grey-08); }

/* "Datenschutz" ist mit 11 Zeichen der laengste Titel der Website und laesst sich
   als ein Wort nicht umbrechen: der Text ist 12-27 px breiter als seine Spalte
   (5 / 13), das schliessende "z" wurde von .title-mask { overflow: hidden }
   seitlich angeschnitten. Die Maske muss aber nur senkrecht schneiden - sie
   verbirgt die Zeile vor dem Hochfahren. clip-path uebernimmt genau das:
   oben und unten exakt an der Boxkante wie bisher, rechts offen. Die Box
   selbst bleibt unveraendert, das Layout also nachweislich identisch. */
.legal-head .title .title-mask { overflow: visible; clip-path: inset(0 -1em 0 0); }
.legal { padding-top: 2vw; }
.legal-text { display: grid; row-gap: 1.2vw; }
.legal-text .h4 { margin-top: 3vw; color: var(--color-dark-grey); }
.legal-sub { font-family: var(--font-500); font-weight: 500; font-size: var(--font-s-p); color: var(--color-dark-grey); margin-top: 1vw; }
.legal-text p { max-width: 44em; }
/* Links im Fließtext sichtbar machen: global gilt a { text-decoration: none },
   damit waren „Schreiben Sie uns“ und der Newsletter-Link in den
   Ratgeber-Beiträgen nicht von normalem Text zu unterscheiden. Gleiche
   Schreibweise wie .form .hint a und .vc-privacy a. .link ist ausgenommen:
   der zeichnet seine Linie selbst über .label::before/::after, sonst lagen
   dort zwei Unterstreichungen übereinander. */
.legal-text p a:not(.link) { text-decoration: underline; text-underline-offset: 3px; }

/* Mobile */
@media (max-width: 600px) {
  .menu-inner { align-content: start; padding-top: 28vw; row-gap: 12vw; }
  .menu-list, .menu-aside { grid-column: 1 / -1; }
  .menu-link { font-size: 14vw; }
  .subhero { padding-bottom: 20vw; }
  .subhero .lead, .cta-band .lead { grid-column: 1 / -1; }
  .section .container > *, .service .container > *, .contact-head .container > *, .legal-head .container > * { grid-column: 1 / -1 !important; }
  .service.is-flip .service-media, .service.is-flip .service-text { grid-row: auto; }
  .service-text { margin-top: 8vw; }
  .step { grid-template-columns: 14vw 1fr; padding: 8vw 0; }
  .team { grid-template-columns: 1fr; }
  .marquee { top: 30vw; }
  .contact-head { padding-top: 60vw; }
  .contact-media { margin-top: 0; aspect-ratio: 4 / 3; }
  .form { grid-template-columns: 1fr; row-gap: 8vw; }
  .faq-plus { width: 4vw; height: 4vw; }
  .legal-text { row-gap: 4vw; }
}

/* ---------- Startseite: Was wir machen ---------- */
.intro-block { position: relative; background: var(--color-white); color: var(--color-dark-grey); padding: var(--section-gap) 0 0; }
.intro-block .container { row-gap: 4vw; align-items: start; }
.intro-label { grid-column: 1 / 4; }
.intro-block .statement { grid-column: 4 / 12; font-size: var(--font-s-h2); line-height: var(--font-lh-h2); letter-spacing: var(--font-ls-h2); text-wrap: balance; }
.offer { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); row-gap: 0; border-top: 1px solid var(--color-dark-grey-02); }
.offer li { border-bottom: 1px solid var(--color-dark-grey-02); }
.offer a { display: grid; row-gap: .4em; padding: 1.8vw 0; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); transition: color .4s; }
.offer a:hover { color: var(--color-dark-grey); }
.offer strong { font-family: var(--font-500); font-weight: 500; font-size: var(--font-s-h4); line-height: var(--font-lh-h4); color: var(--color-dark-grey); }
.project .info { display: grid; grid-template-columns: auto 1fr; column-gap: .5em; row-gap: .5em; }
.project .info .info-desc { grid-column: 1 / -1; color: var(--color-dark-grey-06); max-width: 34em; }

/* ---------- Startseite: Prozess (dunkel) ---------- */
.process { position: relative; background: var(--color-dark-grey); color: var(--color-light-grey); padding: var(--section-gap) 0; }
.process .container { align-items: start; }
.process-head { grid-column: 1 / 6; display: grid; row-gap: 2.4vw; align-content: start; }
.process-head .title { color: var(--color-light-grey); }
.process-head p { font-size: var(--font-s-h4); line-height: var(--font-lh-h4); color: var(--color-light-grey-08); max-width: 22em; text-wrap: balance; }
.process-head .link { color: var(--color-light-grey); }
.process .steps { grid-column: 7 / 13; }
.steps.dark .step { border-color: var(--color-light-grey-02); }
.steps.dark .step:last-child { border-bottom-color: var(--color-light-grey-02); }
.steps.dark .step-no { color: var(--color-light-grey-06); }
.steps.dark .step p { color: var(--color-light-grey-08); font-size: var(--font-s-p); line-height: var(--font-lh-p); }

/* ---------- Startseite: Werkzeuge ---------- */
.tools { position: relative; background: var(--color-white); color: var(--color-dark-grey); padding: var(--section-gap) 0; }
.tools .text { row-gap: 0; }
.tools .text .label { grid-column: 1 / -1; justify-self: center; }
.tools .text .title { grid-column: 1 / -1; text-align: center; margin-top: 3.4vw; }
.tools .text p { grid-column: 4 / 10; justify-self: center; max-width: 33vw; text-align: center; margin-top: 4.6vw; font-size: var(--font-s-h4); line-height: var(--font-lh-h4); text-wrap: balance; }
.tool-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 7vw; border-top: 1px solid var(--color-dark-grey-02); border-left: 1px solid var(--color-dark-grey-02); }
.tool { display: grid; justify-items: center; align-content: center; row-gap: 1.2vw; aspect-ratio: 1 / 0.78; border-right: 1px solid var(--color-dark-grey-02); border-bottom: 1px solid var(--color-dark-grey-02); padding: 2vw; }
.tool img { height: 2.2vw; width: auto; max-width: 70%; filter: grayscale(1) contrast(1.1); opacity: .85; transition: filter .5s, opacity .5s; }
.tool:hover img { filter: none; opacity: 1; }
.tool span { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); }
.tools-cta { grid-column: 1 / -1; justify-self: center; margin-top: 6vw; }
@media (max-width: 600px) {
  .intro-label, .intro-block .statement, .offer, .process-head, .process .steps { grid-column: 1 / -1; }
  .offer { grid-template-columns: 1fr; }
  .process .steps { margin-top: 10vw; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool img { height: 7vw; }
  .tools .text p { grid-column: 1 / -1; max-width: none; }
}

/* ==========================================================================
   Unterseiten mit mehr Substanz (ergänzt 08.09.2026)
   ========================================================================== */

/* Übersicht auf der Leistungsseite */
.overview-section { padding-bottom: 0; }
.overview { display: grid; border-top: 1px solid var(--color-dark-grey-02); }
.overview li { border-bottom: 1px solid var(--color-dark-grey-02); }
.overview a { display: grid; grid-template-columns: 4vw 1fr 1.6fr; column-gap: var(--gap); align-items: baseline; padding: 1.7vw 0; transition: color .4s; }
.overview a:hover { color: var(--color-dark-grey-06); }
.ov-no { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); }
.overview strong { font-family: var(--font-500); font-weight: 500; font-size: var(--font-s-h4); line-height: var(--font-lh-h4); color: var(--color-dark-grey); }
.overview .ov-text { font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); }

/* Leistungs-Block: Beispiele und Ergebnis */
.service .container { row-gap: 4vw; }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-result { display: grid; row-gap: .4em; padding: 1.4vw 0 0; border-top: 1px solid var(--color-dark-grey-02); font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey); }
.service-result span { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); }
.service-cases { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.4vw; padding-top: 3vw; border-top: 1px solid var(--color-dark-grey-02); margin-top: 1vw; }
.service.is-flip .service-cases { grid-row: 2; }
.service-cases-head { grid-column: 1 / 4; }
.cases { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); row-gap: 2vw; }
.case { display: grid; row-gap: .5em; align-content: start; }
.case strong { font-family: var(--font-500); font-weight: 500; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey); }
.case p { font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); color: var(--color-dark-grey-08); max-width: 22em; }
.service-tools { grid-column: 4 / 11; display: grid; grid-template-columns: 8vw 1fr; column-gap: var(--gap); font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); color: var(--color-dark-grey-06); max-width: none; padding-top: 1.6vw; border-top: 1px solid var(--color-dark-grey-02); }
.service-tools span { color: var(--color-dark-grey); }

/* Schritte mit Ergebnis und Dauer */
.step-body { grid-column: 2; display: grid; row-gap: .6vw; }
.step .h3 { grid-column: auto; }
.step p { grid-column: auto; }
.step-meta { display: grid; grid-template-columns: 1.6fr 1fr; column-gap: var(--gap); margin-top: 1.2vw; padding-top: 1.2vw; border-top: 1px dashed var(--color-dark-grey-02); }
.step-meta div { display: grid; row-gap: .3em; }
.step-meta dt { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); }
.step-meta dd { font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey); }

/* Mini-Schritte (Roadmap, Nach Ihrer Anfrage) */
.mini-steps { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); row-gap: 0; border-top: 1px solid var(--color-dark-grey-02); margin-top: 1vw; }
.mini-steps li { display: grid; grid-template-columns: 3vw 1fr; column-gap: 1vw; row-gap: .3em; padding: 1.6vw 0; border-bottom: 1px solid var(--color-dark-grey-02); align-content: start; }
.mini-steps li span { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); padding-top: .35em; grid-row: 1 / span 2; }
.mini-steps strong { font-family: var(--font-500); font-weight: 500; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey); }
.mini-steps p { font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); color: var(--color-dark-grey-08); }
.section p.coverage { margin-top: 2vw; max-width: none; }

/* Fakten in zwei Spalten */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); row-gap: 2.4vw; margin-top: 1vw; }
.facts li { display: grid; row-gap: .5em; padding-top: 1.2vw; border-top: 1px solid var(--color-dark-grey-02); align-content: start; }
.facts strong { font-family: var(--font-500); font-weight: 500; font-size: var(--font-s-h4); line-height: var(--font-lh-h4); color: var(--color-dark-grey); }
.facts span { font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); max-width: 26em; }

/* Bildband */
.image-band { background: var(--color-white); color: var(--color-dark-grey); padding: 0 0 var(--section-gap); }
.image-band .container { align-items: end; }
.band-img { display: grid; row-gap: .8vw; }
.band-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.band-img figcaption { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); }
.band-img[style*="8 / 13"] img { aspect-ratio: 4 / 3; }

/* Über uns: Team-Kacheln, Perspektiven, Standort */
.team-tile { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; background: var(--color-light-grey); color: var(--color-dark-grey-04); font-family: var(--font-300); font-weight: 300; font-size: var(--font-s-h2); letter-spacing: -0.03em; margin-bottom: .6vw; }
.perspectives { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); }
.perspectives li { display: grid; row-gap: .8em; align-content: start; padding-top: 1.2vw; border-top: 1px solid var(--color-dark-grey-02); }
.perspectives strong { font-family: var(--font-300); font-weight: 300; font-size: var(--font-s-h3); line-height: var(--font-lh-h3); color: var(--color-dark-grey); }
.perspectives p { font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); }
.place { background: var(--color-white); color: var(--color-dark-grey); padding: 0 0 var(--section-gap); }
.place .container { align-items: center; }
.place-img { grid-column: 1 / 7; aspect-ratio: 4 / 5; overflow: hidden; }
.place-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-text { grid-column: 8 / 13; display: grid; row-gap: 1.6vw; }
.place-text p { font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); max-width: 30em; }
.place-text .address { color: var(--color-dark-grey); padding-top: 1.2vw; border-top: 1px solid var(--color-dark-grey-02); }
.place-text .h3 { margin-bottom: .4vw; }

@media (max-width: 600px) {
  .overview a { grid-template-columns: 8vw 1fr; }
  .overview .ov-text { grid-column: 2; }
  .service-cases { grid-column: 1 / -1 !important; grid-row: auto !important; display: grid; row-gap: 6vw; }
  .service-cases-head, .cases, .service-tools { grid-column: 1 / -1 !important; }
  .cases { grid-template-columns: 1fr; row-gap: 6vw; }
  .service-tools { grid-template-columns: 1fr; row-gap: 1em; }
  .step-meta { grid-template-columns: 1fr; row-gap: 3vw; }
  .mini-steps { grid-template-columns: 1fr; }
  .mini-steps li { grid-template-columns: 8vw 1fr; padding: 5vw 0; }
  .facts { grid-template-columns: 1fr; row-gap: 6vw; }
  .band-img img { aspect-ratio: 4 / 3 !important; }
  .perspectives { grid-template-columns: 1fr; row-gap: 8vw; }
  .place-img, .place-text { grid-column: 1 / -1 !important; }
  .place-text { margin-top: 8vw; }
  /* 4:5 wie am Rechner (11.09.2026): 3:2 quer schnitt mit object-position top alles unter dem Kinn ab. */
  .team-tile { aspect-ratio: 4 / 5; }
}

/* Nachzug 08.09.: Listenmarker aus, Sektionsabstände auf Unterseiten enger */
.overview, .mini-steps, .perspectives, .facts, .cases, .steps { list-style: none; margin: 0; padding-left: 0; }
.section { padding: 10vw 0; }
.section + .section { padding-top: 0; }
.image-band, .place { padding: 0 0 10vw; }
.service:last-of-type { padding-bottom: 0; }
.service + .section { padding-top: var(--section-gap); }
.form .submit { display: inline-flex; align-items: center; gap: .6em; }
.form .submit .dot { position: static; }
@media (max-width: 600px) {
  .section { padding: 16vw 0; }
  .section + .section { padding-top: 0; }
  .image-band, .place { padding: 0 0 16vw; }
}

/* Nachzug 08.09.: Listenmarker aus, Sektionsabstände auf Unterseiten enger */
.overview, .mini-steps, .perspectives, .facts, .cases, .steps { list-style: none; margin: 0; padding-left: 0; }
.section { padding: 10vw 0; }
.section + .section { padding-top: 0; }
.image-band, .place { padding: 0 0 10vw; }
.service:last-of-type { padding-bottom: 0; }
.service + .section { padding-top: var(--section-gap); }
.form .submit { display: inline-flex; align-items: center; gap: .6em; }
.form .submit .dot { position: static; }
@media (max-width: 600px) {
  .section { padding: 16vw 0; }
  .section + .section { padding-top: 0; }
  .image-band, .place { padding: 0 0 16vw; }
}
@media (max-width: 600px) {
  .image-band .container > *, .place .container > * { grid-column: 1 / -1 !important; }
  .service-media { aspect-ratio: 4 / 3; }
}

/* Nachzug 08.09. (Nutzer-Feedback): Menüleiste bekommt beim Scrollen einen Hintergrund und wird flacher */
.nav::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .5s;
}
.nav.is-light::before { background: rgba(13, 14, 19, .74); }
.nav.is-scrolled::before { opacity: 1; }
.nav { transition: color .5s, height .5s var(--ease-out); }
.nav.is-scrolled { height: 5.2vw; max-height: 76px; min-height: 56px; }
body.is-menu-open .nav::before { opacity: 0; }
@media (max-width: 600px) { .nav.is-scrolled { height: 14vw; } }

/* Nachzug 08.09.: Unterlängen (g, p, y) wurden von der Zeilenmaske abgeschnitten → Maske unten verlängern, Layout unverändert */
.title-mask { padding-bottom: .18em; margin-bottom: -.18em; }

/* Nachzug 08.09.: „Werk" → „Leistungen" (Nutzerwunsch); längeres Wort, deshalb kleinere Display-Größe */
.services .title { font-size: 12.5vw; line-height: 1; letter-spacing: -0.04em; grid-column: 1 / -1; margin-left: -0.6vw; }
@media (max-width: 600px) { .services .title { font-size: 16vw; grid-column: 1 / -1; margin-left: 0; } }

/* Nachzug 08.09. (Nutzer-Feedback): Startseite „Vier Schritte" als breite Vierer-Reihe statt schmaler Liste */
.process .container { row-gap: 5vw; }
.process-head { grid-column: 1 / 8; }
.process .steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); row-gap: 0; border-top: 1px solid var(--color-light-grey-02); }
.process .step { display: grid; grid-template-columns: 1fr; row-gap: 1vw; align-content: start; padding: 2.6vw 0 0; border: 0; }
.process .step:last-child { border: 0; }
.process .step-no { font-family: var(--font-300); font-weight: 300; font-size: var(--font-s-h3); line-height: 1; color: var(--color-light-grey-06); padding: 0; }
.process .step .h3 { grid-column: auto; font-size: var(--font-s-h4); line-height: var(--font-lh-h4); margin: .4vw 0 0; color: var(--color-light-grey); }
.process .step p, .steps.dark .step p { grid-column: auto; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-light-grey); opacity: .82; max-width: 20em; }
@media (max-width: 900px) { .process .steps { grid-template-columns: repeat(2, 1fr); row-gap: 6vw; } }
@media (max-width: 600px) { .process-head { grid-column: 1 / -1; } .process .steps { grid-template-columns: 1fr; margin-top: 0; } .process .step { padding-top: 6vw; } }

/* Nachzug 08.09.: weniger Leerraum unter den Leistungskarten */
.services { padding-bottom: 7vw; }
.services .browse { margin-top: 5vw; }
/* schmale Karte „Websites": Untertitel nicht einrücken */
.project-4 .info { grid-template-columns: 1fr; }
.project-4 .info .info-line:nth-child(2) { grid-column: 1; }

/* Nachzug 08.09. (Nutzer-Feedback): Leistungskarten in zwei Spalten, eine links, eine rechts */
.services .text { grid-column: 1 / 8; grid-row: auto; padding-top: 0; row-gap: 2vw; }
.projects { margin-top: 4vw; row-gap: 5vw; }
.project-1, .project-2, .project-3, .project-4 { grid-row: auto; margin-top: 0; }
.project-1, .project-3 { grid-column: 1 / 7; }
.project-2, .project-4 { grid-column: 7 / 13; }
.project .block { aspect-ratio: 16 / 10; }
.project-1 .block, .project-2 .block, .project-3 .block, .project-4 .block { aspect-ratio: 16 / 10; }
.project-4 .info { grid-template-columns: auto 1fr; }
.project-4 .info .info-line:nth-child(2) { grid-column: auto; }
@media (max-width: 600px) { .projects { row-gap: 10vw; } .project-1, .project-2, .project-3, .project-4 { margin-top: 0; } }

/* Footer: Kontaktformular statt „Unsere Story" */
.footer .story { grid-column: 1 / 6; }
.footer-contact { display: grid; row-gap: .4em; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-sand); }
.footer-form { grid-column: 7 / 13; align-self: start; padding-top: 1vw; }
.footer-form label { color: var(--color-sand-06); }
.footer-form input, .footer-form textarea { color: var(--color-sand); border-bottom-color: var(--color-sand-02); }
.footer-form input:focus, .footer-form textarea:focus { border-bottom-color: var(--color-sand); }
.footer-form textarea::placeholder, .footer-form input::placeholder { color: var(--color-sand-02); }
.footer-form .hint { color: var(--color-sand-06); }
.footer-form .hint a { color: var(--color-sand); }
.footer-form .submit { color: var(--color-sand); }
.page-kontakt .footer-form { display: none; }
.page-kontakt .footer .story { grid-column: 1 / 8; }
@media (max-width: 600px) { .footer .story, .footer-form { grid-column: 1 / -1 !important; } .footer-form { margin-top: 10vw; } }
.footer .story { grid-column: 1 / 7; }
.footer .story .title { font-size: 7.6vw; line-height: 1.02; letter-spacing: -0.03em; white-space: nowrap; }
.footer-form { grid-column: 8 / 13; }
@media (max-width: 600px) { .footer .story .title { font-size: 14vw; white-space: normal; } }

/* Nachzug 08.09. (Nutzer): versetztes Raster wieder her, nur enger; erste Karte ganz links */
.services .text { grid-column: 9 / 13; grid-row: 1; padding-top: 1vw; row-gap: 3vw; }
.projects { margin-top: 5vw; row-gap: 0; }
.project-1 { grid-column: 1 / 7; grid-row: 1; margin-top: 0; }
.project-1 .block { aspect-ratio: 1038 / 1594; }
.project-2 { grid-column: 8 / 13; grid-row: 2; margin-top: -26vw; }
.project-2 .block { aspect-ratio: 673 / 901; }
.project-3 { grid-column: 7 / 12; grid-row: 3; margin-top: 4vw; }
.project-3 .block { aspect-ratio: 855 / 1127; }
.project-4 { grid-column: 1 / 5; grid-row: 4; margin-top: -22vw; }
.project-4 .block { aspect-ratio: 490 / 671; }
.project-4 .info { grid-template-columns: 1fr; }
.project-4 .info .info-line:nth-child(2) { grid-column: 1; }
.services .browse { margin-top: 4vw; }
@media (max-width: 600px) {
  .services .text { grid-column: 1 / -1; grid-row: auto; }
  .project-1, .project-2, .project-3, .project-4 { grid-column: 1 / -1; grid-row: auto; margin-top: 12vw; }
  .project-1 .block, .project-2 .block, .project-3 .block, .project-4 .block { aspect-ratio: 4 / 3; }
}
/* Nutzer: untere Reihe auseinanderrücken – Prozessautomatisierung an den rechten Rand */
.project-3 { grid-column: 8 / 13; }
.project-4 { grid-column: 1 / 5; }
/* Nutzer: untere Reihe bis an die Bildschirmkanten (Videos angeschnitten, Text bleibt im Raster) */
.project-4 .block { margin-left: calc((100vw - var(--container)) / -2); }
.project-3 .block { margin-right: calc((100vw - var(--container)) / -2); }
@media (max-width: 600px) { .project-4 .block, .project-3 .block { margin-left: 0; margin-right: 0; } }
/* Nutzer: Schlangen-Anordnung – Prozessautomatisierung links wie KI-Agenten, Websites rechts wie Dashboards */
.project-3 .block, .project-4 .block { margin-left: 0; margin-right: 0; }
.project-3 { grid-column: 1 / 7; grid-row: 3; margin-top: 4vw; }
.project-3 .block { aspect-ratio: 1038 / 1594; }
.project-4 { grid-column: 8 / 13; grid-row: 4; margin-top: -26vw; }
.project-4 .block { aspect-ratio: 673 / 901; }
.project-4 .info { grid-template-columns: auto 1fr; }
.project-4 .info .info-line:nth-child(2) { grid-column: auto; }
@media (max-width: 600px) { .project-3, .project-4 { grid-column: 1 / -1; grid-row: auto; margin-top: 12vw; } }
/* Nutzer: Prozessautomatisierung weiter nach oben (rückt neben das Ende von Dashboards) */
.project-3 { margin-top: -14vw; }
@media (max-width: 600px) { .project-3 { margin-top: 12vw; } }

/* Nachzug 08.09.: Originaltexte der alten Website – Zusatzelemente */
.intro-block .intro-sub { grid-column: 4 / 10; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); margin-top: -1.5vw; }
.project .info .info-desc { max-width: 40em; }
.project .info .info-stat { grid-column: 1 / -1; font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); color: var(--color-dark-grey); padding-top: .8vw; margin-top: .4vw; border-top: 1px solid var(--color-dark-grey-02); max-width: 40em; }
.project .info .info-stat em { font-style: normal; color: var(--color-dark-grey-06); }
.dsgvo { grid-column: 4 / 10; display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 2.4em; margin-top: 3vw; font-size: var(--font-s-p); color: var(--color-dark-grey-08); list-style: none; padding: 0; }
.dsgvo li { padding-left: 1.2em; position: relative; }
.dsgvo li::before { content: ""; position: absolute; left: 0; top: .6em; width: .3em; height: .3em; border-radius: 100%; background: currentColor; opacity: .5; }
.step-meta { grid-template-columns: 1fr; }
@media (max-width: 600px) { .intro-block .intro-sub, .dsgvo { grid-column: 1 / -1; } .dsgvo { justify-content: flex-start; } }

/* Nachzug 08.09. (Nutzer): Hero-Claim „Wir automatisieren, was Sie ausbremst." – zwei Zeilen, kleiner als die alte Dreizeiler-Größe */
.hero .title.hero-claim { font-size: 7.6vw; line-height: 1.04; letter-spacing: -0.035em; white-space: nowrap; }
@media (max-width: 600px) { .hero .title.hero-claim { font-size: 9.4vw; white-space: nowrap; } }
@media (min-aspect-ratio: 16/9) and (min-width: 1600px) { .hero .text-1 { padding-top: 38vh; } }
/* Nutzer: Footer-Titel „Lassen Sie uns über Ihr KI-Projekt sprechen." – drei Zeilen */
.footer .story .title { font-size: 4.7vw; line-height: 1.06; letter-spacing: -0.03em; }
.footer .story .title .title-mask:nth-child(3) .title-line { transition-delay: .16s; }
@media (max-width: 600px) { .footer .story .title { font-size: 10.5vw; } }
/* Nutzer: Mail- und Telefon-Symbol im Footer-Kontaktblock */
.footer-contact li { display: flex; }
.footer-contact .footer-link, .footer .socials .footer-link { display: inline-flex; align-items: center; gap: .55em; }
.footer-contact .ico, .footer .socials .ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* Nutzer: Kreis-Cursor auf allen klickbaren Elementen (Links, Buttons, FAQ) – Differenz-Blend, damit er auf Weiß und Schwarz sichtbar ist */
.cursor.is-link { mix-blend-mode: difference; }
.cursor.is-link .cursor-dot { transform: translate(-50%, -50%) scale(3.4); opacity: 1; background: #fff; }

/* Nutzer: Prozessflow-Video in „So arbeiten wir" (rechts neben dem Kopf) */
.process-head { grid-column: 1 / 6; }
.process-media { grid-column: 7 / 13; grid-row: 1; align-self: center; aspect-ratio: 16 / 10; overflow: hidden; background-color: #0a0b0f; }
.process-media .video { width: 100%; height: 100%; object-fit: cover; }
.process .steps { grid-row: 2; }
@media (max-width: 600px) { .process-media { grid-column: 1 / -1; grid-row: auto; margin: 6vw 0; } .process .steps { grid-row: auto; } }

/* Nutzer: Prozessflow-Video als Hintergrund der Sektion (wie im Hero) */
.process { overflow: hidden; }
.process .background { position: absolute; inset: 0; z-index: 0; }
.process .background .video { width: 100%; height: 100%; object-fit: cover; }
.process .background .video.is-ready { opacity: .9; }
.process .background .gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,19,.55) 0%, rgba(13,14,19,.25) 45%, rgba(13,14,19,.7) 100%); }
.process .container { position: relative; z-index: 1; }
.process-head { grid-column: 1 / 8; }
.process .steps { grid-row: auto; }
.process-media { display: none; }
/* Prozess-Hintergrund: Sektion kompakter, Leuchtlinie hinter dem Titel, unten stärker abgedunkelt */
.process { padding: 9vw 0 8vw; }
.process .container { row-gap: 4vw; }
.process .background { top: -28%; height: 128%; }
.process .background .video.is-ready { opacity: .85; }
.process .background .gradient { background: linear-gradient(180deg, rgba(13,14,19,.6) 0%, rgba(13,14,19,.2) 40%, rgba(13,14,19,.55) 70%, rgba(13,14,19,.85) 100%); }
@media (max-width: 600px) { .process { padding: 16vw 0; } .process .background { top: 0; height: 100%; } }
/* Nutzer: „Was wir machen" nicht klickbar (Leistungen zeigen schon alles) */
.offer .offer-item { display: grid; row-gap: .4em; padding: 1.8vw 0; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey-08); }
/* Unterseiten-Kopf: Inhalt darf nicht unter die Menüleiste rutschen, wenn er höher als der Viewport ist */
.subhero { padding-top: 11vw; }

/* Unterseiten: Footer ohne Kopf (nur Linkspalten) kompakt; FAQ-Anker mit Abstand zur Menüleiste */
.footer.is-compact { padding-top: 3vw; }
.footer.is-compact .bottom { margin-top: 0; }
.faq-section, .section[id] { scroll-margin-top: 7vw; }
/* .app darf vom Browser nicht intern gescrollt werden (Anker-Sprünge) */
.app { overflow: clip; }
html.reduced .app { overflow: visible; }

/* Nachzug 08.09.: Sprachnachricht-Kontakt (Issue #3 schmitko-web), Kontaktseite */
.voice-contact { display: flex; flex-direction: column; gap: 1.2vw; }
.vc-chat { display: flex; flex-direction: column; gap: .6vw; min-height: 22vw; max-height: 34vw; overflow-y: auto; padding: 1.6vw 1.4vw; background: var(--color-off-white); border: 1px solid var(--color-dark-grey-02); border-radius: 1.2vw; scroll-behavior: smooth; }
.vc-msg { max-width: 82%; padding: .7em 1em; border-radius: 1em; font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); white-space: pre-line; animation: vc-pop .3s var(--ease) both; }
.vc-msg.is-bot { align-self: flex-start; background: var(--color-white); color: var(--color-dark-grey); border-bottom-left-radius: .25em; }
.vc-msg.is-user { align-self: flex-end; background: var(--color-dark-grey); color: var(--color-light-grey); border-bottom-right-radius: .25em; }
.vc-msg.is-typing { color: var(--color-dark-grey-04); letter-spacing: .2em; }
.vc-msg.is-voice { padding: .6em .8em .6em .6em; min-width: min(20vw, 100%); }
@keyframes vc-pop { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
.vc-voice { display: flex; align-items: center; gap: .8em; }
.vc-play { flex: none; width: 2.6em; height: 2.6em; border-radius: 100%; border: 0; background: var(--color-sand); color: var(--color-dark-grey); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.vc-play .vc-ico { width: 1.1em; height: 1.1em; }
.vc-wavebox { flex: 1; display: flex; flex-direction: column; gap: .3em; min-width: 12em; }
.vc-wave { display: flex; align-items: center; gap: 2px; height: 1.8em; }
.vc-wbar { flex: 1; min-width: 2px; max-width: 4px; height: 30%; border-radius: 2px; background: var(--color-light-grey); opacity: .55; transition: background .2s, opacity .2s; }
.vc-wbar.is-played { background: var(--color-sand); opacity: 1; }
.vc-time { font-size: .8em; color: var(--color-light-grey-06); font-variant-numeric: tabular-nums; }
.vc-controls { display: flex; flex-direction: column; align-items: stretch; gap: .8vw; min-height: 6vw; }
.vc-row { display: flex; gap: .6vw; }
.vc-row > * { flex: 1; }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.4em; border-radius: 100vw; border: 1px solid var(--color-dark-grey-02); background: transparent; color: var(--color-dark-grey); font: inherit; font-size: var(--font-s-p-small); line-height: 1.2; font-weight: 400; cursor: pointer; text-decoration: none; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.vc-btn:hover { border-color: var(--color-dark-grey); }
.vc-btn.is-primary { background: var(--color-dark-grey); color: var(--color-light-grey); border-color: var(--color-dark-grey); }
.vc-btn.is-primary:hover { background: var(--color-story); }
.vc-btn.is-ghost { background: transparent; }
.vc-btn.is-text { border-color: transparent; color: var(--color-dark-grey-06); padding: .4em .8em; align-self: center; }
.vc-btn.is-text:hover { color: var(--color-dark-grey); }
.vc-ico { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; }
.vc-ico svg { width: 100%; height: 100%; }
.vc-recwrap { display: flex; flex-direction: column; align-items: center; gap: .6vw; padding: .5vw 0; }
.vc-rec { width: 5.4vw; height: 5.4vw; min-width: 64px; min-height: 64px; border-radius: 100%; border: 1px solid var(--color-dark-grey); background: var(--color-white); color: var(--color-dark-grey); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: transform .3s var(--ease), background .3s, color .3s; }
.vc-rec .vc-ico { width: 40%; height: 40%; }
.vc-rec:hover { transform: scale(1.05); }
.vc-rec.is-recording { background: var(--color-dark-grey); color: var(--color-sand); animation: vc-pulse 1.4s ease-in-out infinite; }
@keyframes vc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 204, 187, .6); } 50% { box-shadow: 0 0 0 1.2vw rgba(224, 204, 187, 0); } }
.vc-meter { display: flex; gap: 3px; align-items: center; height: 2vw; min-height: 24px; }
.vc-meter[hidden] { display: none; }
/* Der Pegel wird waehrend der Aufnahme in jedem Bild neu gesetzt, ueber 14
   Balken. Darum scaleY statt height: eine Hoehenaenderung zwingt den Browser
   jedes Mal zu einer neuen Layoutberechnung, eine Transformation nicht. */
.vc-meter-bar { width: 3px; height: 100%; border-radius: 2px; background: var(--color-dark-grey);
  transform: scaleY(.12); transition: transform .08s linear; }
.vc-hint { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); min-height: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.vc-fields { display: grid; gap: .5vw; }
.vc-field { width: 100%; padding: .7em 1em; border-radius: .8em; border: 1px solid var(--color-dark-grey-02); background: var(--color-white); color: var(--color-dark-grey); font: inherit; font-size: var(--font-s-p-small); line-height: 1.4; outline: none; transition: border-color .3s; }
.vc-field:focus { border-color: var(--color-dark-grey); }
textarea.vc-field { resize: vertical; min-height: 6em; }
.vc-err { font-size: var(--font-s-p-small); color: #b3261e; }
.vc-err:empty { display: none; }
.vc-privacy { font-size: var(--font-s-p-small); color: var(--color-dark-grey-06); max-width: none; }
.vc-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.vc-btn:focus-visible, .vc-rec:focus-visible, .vc-play:focus-visible, .vc-field:focus-visible { outline: 2px solid var(--color-dark-grey); outline-offset: 3px; }
.form .form-alt { margin-top: 1vw; }
.form .form-alt a { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vc-msg { animation: none; } .vc-rec.is-recording { animation: none; } .vc-chat { scroll-behavior: auto; } }
@media (max-width: 600px) {
  .voice-contact { gap: 4vw; }
  .vc-chat { min-height: 70vw; max-height: 110vw; padding: 4vw 3.5vw; border-radius: 4vw; gap: 2vw; }
  .vc-msg { max-width: 88%; }
  .vc-controls { gap: 3vw; min-height: 20vw; }
  .vc-row { gap: 2vw; }
  .vc-recwrap { gap: 2vw; }
  .vc-rec { width: 20vw; height: 20vw; }
  .vc-meter { height: 6vw; }
  .vc-fields { gap: 2vw; }
}

/* Team-Fotos (09.09.2026): echte Portraits statt Initialen-Kacheln */
img.team-tile { display: block; object-fit: cover; object-position: center top; filter: grayscale(1); }

/* Über uns (09.09.2026): weniger Abstand zwischen Standort und Zitat */
.page-ueber-uns .place { padding-bottom: 3vw; }
.page-ueber-uns .quote { padding-top: 3vw; padding-bottom: 8vw; }

/* Kontakt (09.09.2026): Absende-Button, Punkt und Text auf einer Höhe. `.section .label` (Kicker) traf auch den Button-Text und gab ihm margin-bottom 2vw. */
.section .link .label, .form .submit .label { margin-bottom: 0; display: inline-block; }

/* Kontakt-Laufschrift (09.09.2026): Unterlängen (g in „Erstgespräch“) wurden vom overflow:hidden der .marquee abgeschnitten, weil die Zeilenhöhe 0,97em ist. Platz für Unterlängen: */
.marquee-track { padding-bottom: .22em; }

/* Kontakt-Kopf (09.09.2026): zwei Wege, Formular oder Sprachnachricht */
.contact-choice { display: flex; flex-wrap: wrap; gap: .8vw; width: max-content; max-width: 70vw; }
.btn { display: inline-flex; align-items: center; gap: .55em; padding: .75em 1.3em; border-radius: 100vw; border: 1px solid var(--color-dark-grey-02); background: transparent; color: var(--color-dark-grey); font-family: var(--font-400); font-weight: 400; font-size: var(--font-s-p-small); line-height: 1.2; letter-spacing: 0; text-decoration: none; white-space: nowrap; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn:hover { border-color: var(--color-dark-grey); }
.btn.is-primary { background: var(--color-dark-grey); color: var(--color-light-grey); border-color: var(--color-dark-grey); }
.btn.is-primary:hover { background: var(--color-story); border-color: var(--color-story); }
.btn:focus-visible { outline: 2px solid var(--color-dark-grey); outline-offset: 3px; }
@media (max-width: 767px) { .contact-choice { gap: 2.4vw; } .btn { padding: .8em 1.2em; } }

/* Kontakt-Kopf (09.09.2026): Kontaktdaten als ruhige Zeile statt Punktliste + Adresse rechts */
.contact-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 2vw; margin: 0; padding-top: 2.2vw; border-top: 1px solid var(--color-dark-grey-02); }
.contact-meta > div { grid-column: span 4; display: grid; row-gap: .5vw; align-content: start; }
.contact-meta dt { font-size: var(--font-s-p-small); line-height: 1.4; color: var(--color-dark-grey-06); }
.contact-meta dd { margin: 0; font-size: var(--font-s-p); line-height: var(--font-lh-p); color: var(--color-dark-grey); }
.contact-meta a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: left 100%; transition: background-size .4s var(--ease); }
.contact-meta a:hover { background-size: 100% 1px; }
@media (max-width: 767px) { .contact-meta { grid-template-columns: 1fr; row-gap: 5vw; padding-top: 6vw; } .contact-meta > div { grid-column: auto; } }

/* Menü-Overlay + Footer (09.09.2026): Kontakt-, Social- und Karten-Links als Pill-Buttons */
.btn-list { display: flex; flex-wrap: wrap; gap: .5vw; list-style: none; margin: 0; padding: 0; }
.btn-list li { display: contents; }
.btn-list.is-stack { display: grid; justify-items: start; row-gap: .6vw; }
.btn.is-light { border-color: var(--color-light-grey-02, rgba(235,235,235,.2)); color: var(--color-light-grey); }
.btn.is-light:hover { border-color: var(--color-light-grey); }
.btn.is-sand { border-color: var(--color-sand-02); color: var(--color-sand); }
.btn.is-sand:hover { border-color: var(--color-sand); }
.menu-contact.btn-list, .menu-social.btn-list { display: flex; row-gap: .5vw; }
.menu-address { margin-bottom: -1.4vw; }
@media (max-width: 767px) { .btn-list { gap: 2vw; } .btn-list.is-stack { row-gap: 2vw; } .menu-address { margin-bottom: -2vw; } }

/* 09.09.2026, Nutzer: keine Rahmen an Buttons; Burger-Menü-Buttons untereinander */
.btn, .btn.is-light, .btn.is-sand { border-color: transparent; padding-left: .2em; padding-right: .2em; }
.btn:hover, .btn.is-light:hover, .btn.is-sand:hover { border-color: transparent; opacity: .7; }
.btn.is-primary { border-color: var(--color-dark-grey); padding-left: 1.3em; padding-right: 1.3em; }
.btn.is-primary:hover { opacity: 1; }
.contact-choice .btn:not(.is-primary) { background: var(--color-dark-grey-02, rgba(13,14,19,.08)); padding-left: 1.3em; padding-right: 1.3em; }
.contact-choice .btn:not(.is-primary):hover { opacity: 1; background: var(--color-dark-grey-04, rgba(13,14,19,.16)); }
.btn-list { gap: .2vw; }
.btn-list.is-stack { row-gap: .2vw; }
.menu-aside .btn-list { display: grid; justify-items: start; row-gap: .2vw; }
.menu-aside .menu-contact.btn-list, .menu-aside .menu-social.btn-list { display: grid; }
.menu-aside { row-gap: 1.6vw; }
.menu-address { margin-bottom: -1vw; }


/* Kontaktformular: Honigtopf gegen Bots, Rueckmeldung nach dem Absenden */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--color-dark-grey); }
.form-status.is-error { color: #a4271f; }
.form button[type="submit"][disabled] { opacity: .5; pointer-events: none; }

/* ==========================================================================
   Handy-Ueberarbeitung (10.09.2026) - bewusst ganz am Ende der Datei, weil
   weiter oben Regeln ohne Medienabfrage stehen, die Handy-Regeln gleicher
   Spezifitaet sonst ueberschreiben (z. B. .process-head, .step-body).
   ========================================================================== */

/* ---------- Tippflaechen: Touch-Geraete jeder Breite, und schmale Fenster ----------
   Apple empfiehlt 44 x 44 px; die alte Schmitko-Seite lag im Median dort, diese
   bei 21 px. Menue-Knopf und Logo haben viel Luft: nur die unsichtbare
   Trefferflaeche waechst (Pseudoelement), Sichtbares bleibt gleich. Bei Links
   und Feldern reicht die Luft nicht, dort waechst der Abstand tatsaechlich. */
@media (max-width: 900px), (pointer: coarse) {
  .menu-button::before, .logo::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; min-width: 44px; height: 44px;
  }
  .link { padding-block: 13px; min-height: 44px; }
  .footer-link { padding-block: 11px; }
  .btn { min-height: 44px; }
  .form .submit { padding-block: 13px; }
  .vc-btn { min-height: 44px; }
  .form input, .form textarea { min-height: 44px; }
}

@media (max-width: 600px) {
  /* Umbruch: text-wrap balance liess Einleitungen nur 68-74 % der Breite nutzen.
     Mittig gesetzter Text (.tools .text p) behaelt balance. */
  .lead, .process-head p { text-wrap: wrap; }

  /* "Vier Schritte": Kopf stand in 7 von 12 Spalten (Zeile 1045/1057 ohne
     Medienabfrage ueberschreiben die Handy-Regel aus Zeile 770/937). */
  .process-head { grid-column: 1 / -1; }

  /* Leistungskarten: Name und Beischrift nebeneinander liessen der Beischrift
     bei "Prozessautomatisierung" nur 177 px. Untereinander. */
  .project .info { grid-template-columns: 1fr; }
  .project .info .info-line:nth-child(2) { grid-column: 1; }

  /* Prozessseite: die Nummernspalte (14vw = 60 px) nahm dem Inhalt ein Fuenftel
     der Breite; Titel brachen zweizeilig. Nummer jetzt ueber dem Titel. */
  .step { grid-template-columns: 1fr; row-gap: .4em; }
  .step-no { padding-top: 0; }
  .step .h3, .step p, .step-body { grid-column: auto; }

  /* Tech-Stack: 18 Felder in 2 Spalten, jedes 192 x 149 px fuer ein Wort,
     zusammen 1,5 Bildschirme. Drei Spalten, flachere Felder: ein halber. */
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
  .tool { aspect-ratio: 1 / 0.7; row-gap: 2vw; padding: 3vw 1.5vw; }
  .tool img { height: 5.5vw; }
  .tool span { font-size: max(3.2vw, 12px); text-align: center; }

  /* Sprachnachricht: das Chatfenster startete mit 70vw Mindesthoehe (300 px)
     fuer eine einzige Sprechblase. Kleiner starten, es waechst mit dem Gespraech. */
  .vc-chat { min-height: 44vw; }
}