/* ==========================================================================
   Chosen Forge – Styles
   Grid: 12 Spalten, Rand 80px, Gutter 24px (Desktop 1440)
   Farben: #000 / #FFF / #FCE800
   Schrift: Acumin Pro (Adobe Fonts, Kit fvu2jil)
   ========================================================================== */

:root {
  --black: #000000;
  --white: #ffffff;
  --yellow: #fce800;
  --placeholder: #d9d9d9;
  --field: #e6e6e6;

  --font: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --margin: 80px;       /* Seitenrand links/rechts */
  --gutter: 24px;       /* Spaltenabstand */
  --nav-h: 80px;        /* Navigationshöhe ohne Linie */
  --line: 1px;

  --pt: 200px;          /* Section oben */
  --pb: 80px;           /* Section unten */

  /* Schriftgrössen – schrumpfen statt umbrechen */
  --fs-menu: min(96px, 8.8vw);
  --fs-h1: min(56px, 9vw);
  --fs-h2: min(40px, 5.8vw);
  --fs-h3: clamp(22px, 5.4vw, 28px);
  --fs-h4: 20px;
  --fs-large: 18px;
  --fs-body: 16px;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.25;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html.menu-open { overflow: hidden; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--black); color: var(--white); padding: 10px 16px;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.bg-yellow :focus-visible { outline-color: var(--black); }

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

/* Typografie ------------------------------------------------------------- */
.t-menu, .t-h1, .t-h2 {
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0;
}
.t-menu { font-size: var(--fs-menu); }
.t-h1   { font-size: var(--fs-h1); }
.t-h2   { font-size: var(--fs-h2); }
.t-h3   { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; }
.t-h4   { font-size: var(--fs-h4); line-height: 1.25; font-weight: 700; }
.t-large{ font-size: var(--fs-large); line-height: 1.25; }
.t-body { font-size: var(--fs-body); line-height: 1.25; }
.t-bold { font-size: var(--fs-body); line-height: 1.25; font-weight: 700; }

/* Titelzeilen: jede Zeile bleibt auf einer Zeile und verkleinert sich */
.line { display: block; white-space: nowrap; }

/* Spitzmarke */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-large);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Layout ----------------------------------------------------------------- */
.container { padding-inline: var(--margin); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.section { padding-top: var(--pt); padding-bottom: var(--pb); }
.bg-yellow { background: var(--yellow); }

/* Abstände nach Design System */
.eyebrow + .section-title,
.eyebrow + .lead { margin-top: 20px; }
.section-title + .intro { margin-top: 40px; }
.section-title + .cards { margin-top: 40px; }
.intro + .cards,
.lead + .feature-row { margin-top: 80px; }
.intro + .feature-row { margin-top: 56px; }

.lead  { max-width: 810px; }
.intro { max-width: 630px; }
.intro p + p { margin-top: 20px; }

/* Links: unterstrichen + Pfeil, Hover zieht die Linie neu -------------- */
.cf-link {
  display: inline-flex;
  align-items: baseline;
  line-height: 1.25;
  white-space: nowrap;
}
.cf-link__text {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 0.06em;
}
.cf-link__arrow {
  display: inline-block;
  width: 0.335em;
  height: 0.67em;
  margin-left: 0.66em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 0.4s var(--ease);
}
.cf-link:focus-visible .cf-link__text { animation: cf-line 0.65s var(--ease) both; }
/* Hover nur mit Maus/Trackpad – auf dem Handy würde er beim Antippen hängen bleiben */
@media (hover: hover) and (pointer: fine) {
  .cf-link:hover .cf-link__text { animation: cf-line 0.65s var(--ease) both; }
  .cf-link:hover .cf-link__arrow { transform: translateX(3px); }
}

@keyframes cf-line {
  0%   { background-size: 100% 1px; background-position: 100% 100%; }
  45%  { background-size: 0% 1px;   background-position: 100% 100%; }
  55%  { background-size: 0% 1px;   background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

.cf-link--lg { font-size: 28px; }
.cf-link--md { font-size: var(--fs-large); }
.cf-link--sm { font-size: var(--fs-body); }

.link-row { display: flex; justify-content: flex-end; margin-top: 40px; }

/* Navigation ------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: calc(var(--nav-h) + var(--line));
  background: var(--white);
  border-bottom: var(--line) solid var(--black);
}
.nav__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 29px 0 24px;
}
.nav__lang { display: flex; gap: 10px; font-size: 16px; font-weight: 700; }
.nav__lang a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
}
.nav__lang a[aria-disabled="true"] { cursor: default; }
.nav__logo {
  position: absolute;
  top: 19px;
  left: calc(50% - 55px);
  left: round(down, calc(50% - 55px), 1px); /* ganze Pixel, sonst wirkt das Logo unscharf */
  width: 110px;
}
.nav__logo img { display: block; width: 109px; height: 42px; max-width: none; }

/* Burger → X */
.burger {
  position: relative;
  width: 30px;
  height: 18px;
  margin-top: 1px;
}
.burger::before { content: ""; position: absolute; inset: -14px -12px; } /* grössere Klickfläche */
.burger__bar {
  position: absolute;
  left: 0;
  width: 30px;
  height: 3.34px;
  background: var(--black);
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 7.33px; }
.burger__bar:nth-child(3) { top: 14.66px; }
.menu-open .burger__bar:nth-child(1) { transform: translateY(7.33px) rotate(45deg); }
.menu-open .burger__bar:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.menu-open .burger__bar:nth-child(3) { transform: translateY(-7.33px) rotate(-45deg); }

/* Menü-Overlay ----------------------------------------------------------- */
.menu {
  position: fixed;
  top: calc(var(--nav-h) + var(--line));
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--white);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.8s var(--ease), visibility 0s linear 0.8s;
}
.menu-open .menu {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.8s var(--ease), visibility 0s linear 0s;
}
.menu__rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.42em;
  font-size: min(96px, 12vw);
  overflow: hidden;
}
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee--right .marquee__track { animation-direction: reverse; }
.marquee__group { display: flex; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.menu__link {
  position: relative;
  z-index: 0;
  display: block;
  padding: 0.12em 0.5em;
  font-size: 1em;
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Hover: Guillemet fährt durch das Wort, das Wort wird dabei zur Outline */
.ml { position: relative; z-index: 0; display: block; }
.ml__solid,
.ml__outline { display: block; clip-path: inset(0 0 0 0); }
.ml__outline {
  position: absolute;
  inset: 0;
  /* Kontur liegt ausserhalb der Buchstaben (paint-order), Innenfläche weiss:
     so bleiben auch kleine Formen wie die Ü-Punkte als Outline sichtbar */
  color: var(--white);
  -webkit-text-stroke: 0.04em var(--black);
  paint-order: stroke fill;
  clip-path: inset(0 100% 0 0);
}
.ml::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -1.64em;
  width: 1.64em;
  height: 1.3em;
  margin-top: -0.66em;
  background: url("../assets/guillemet.svg") no-repeat right center / contain;
  transform: scaleX(-1);           /* Guillemet zeigt nach rechts (Fahrtrichtung) */
  opacity: 0;
  pointer-events: none;
}
.menu__link:focus-visible .ml::before { animation: ml-guillemet 0.5s linear both; }
.menu__link:focus-visible .ml__solid { animation: ml-solid 0.5s linear both; }
.menu__link:focus-visible .ml__outline { animation: ml-outline 0.5s linear both; }
@media (hover: hover) and (pointer: fine) {
  .menu__link:hover .ml::before { animation: ml-guillemet 0.5s linear both; }
  .menu__link:hover .ml__solid { animation: ml-solid 0.5s linear both; }
  .menu__link:hover .ml__outline { animation: ml-outline 0.5s linear both; }
}

/* Ein gleichmässiger, schneller Durchlauf ohne Abbremsen:
   Spitze des Guillemet = Grenze Schwarz/Outline, danach fährt es hinaus */
@keyframes ml-guillemet {
  0%   { left: -1.64em; opacity: 1; }
  80%  { left: calc(100% - 1.64em); opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes ml-solid {
  0%   { clip-path: inset(0 0 0 0); }
  80%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes ml-outline {
  0%   { clip-path: inset(0 100% 0 0); }
  80%, 100% { clip-path: inset(0 0 0 0); }
}

/* Einblenden der Menüzeilen */
.menu .marquee {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-out);
}
.menu-open .menu .marquee { opacity: 1; transform: none; transition-delay: 0.35s; }
.menu-open .menu .marquee + .marquee { transition-delay: 0.45s; }

.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 29px 28px 24px;
}
.menu__contact { display: flex; gap: 40px; }

/* Guillemet + Titel (Hero, CTA) ------------------------------------------ */
.g-title {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fs-menu);
  min-height: 3.4em;
}
.g-title__mark {
  position: absolute;
  left: 0;
  top: 0;
  height: 3.4em;
  width: auto;
  aspect-ratio: 411 / 326;
}
.g-title__text {
  position: relative;
  font-size: 1em;
  padding-left: 1.18em;
}
/* Variante H1 (Unterseiten): Guillemet 238px bei 56px Schrift */
.g-title--h1 { font-size: var(--fs-h1); min-height: 4.25em; }
.g-title--h1 .g-title__mark { height: 4.25em; }
.g-title--h1 .g-title__text { padding-left: 1.96em; }

/* Hero ------------------------------------------------------------------- */
.hero {
  min-height: calc(100vh - var(--nav-h) - var(--line));
  min-height: calc(100svh - var(--nav-h) - var(--line));
  display: flex;
  flex-direction: column;
  padding-top: 204px;
  padding-bottom: 80px;
}
.hero__cta {
  margin-top: auto;
  padding-top: 120px;
  display: flex;
  justify-content: flex-end;
}

/* Hero-Video (Homepage) -------------------------------------------------- */
.hero-wrap { position: relative; isolation: isolate; overflow: hidden; }
.hero-wrap__bg { position: absolute; inset: 0; z-index: -1; background: #e9e9e9 url("../assets/video/hero-poster.jpg") center / cover no-repeat; }
.hero-wrap__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-wrap__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.2); }
@media (prefers-reduced-motion: reduce) { .hero-wrap__bg video { display: none; } }

/* Wer wir sind / Warum uns: Liste + Outline-Guillemets ------------------ */
.feature-row { align-items: center; }
.feature-row__list { grid-column: 2 / span 4; max-width: 400px; }
.feature-row__mark {
  grid-column: 7 / -1;
  margin-left: -10px;
  margin-right: -6px;
}
.feature-row__mark img { width: 100%; height: auto; }
.facts-title { margin-bottom: 20px; }
.facts li + li { margin-top: 20px; }
.facts strong { display: block; font-weight: 700; }

.section--wws { padding-top: 80px; padding-bottom: 0; }
.section--wwm { padding-top: 110px; padding-bottom: 200px; }
.section--wie { padding-bottom: 0; }
.section--warum { padding-bottom: 190px; }

/* Karten (Leistungen, Ablauf) ------------------------------------------- */
.cards { row-gap: 48px; }
.cards--3 > * { grid-column: span 4; }
.cards--4 > * { grid-column: span 3; }
.card__num { display: block; margin-bottom: 12px; }
.card__text { padding-right: 8px; }

/* Projekt-Platzhalter */
.project-tile {
  display: block;
  height: 88px;
  background: var(--placeholder);
}

/* Zitate ----------------------------------------------------------------- */
.quote {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.quote__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.83em;
  font-size: var(--fs-h2);
}
.quote__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 3.83em;
  width: auto;
  aspect-ratio: 411 / 326;
  transform: translate(-50%, -50%);
}
.quote__text {
  position: relative;
  font-size: 1em;
  text-align: center;
}

/* Chosen Performance ---------------------------------------------------- */
.section--cp { position: relative; }
.cp__wordmark {
  display: block;
  position: absolute;
  top: 80px;
  right: var(--margin);
  width: min(519px, 45vw);
}
.cp__wordmark img { width: 100%; height: auto; }
.cp__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}
.cp__bottom .intro { margin-top: 0; }

/* CTA -------------------------------------------------------------------- */
.cta {
  padding-top: 160px;
  padding-bottom: 88px;
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Footer ----------------------------------------------------------------- */
.footer { padding-top: 24px; padding-bottom: 60px; }
.footer__inner { align-items: end; }
.footer__contact { grid-column: 1 / span 3; font-style: normal; }
.footer__contact strong { display: block; font-weight: 700; }
.footer__center {
  grid-column: 4 / span 6;
  justify-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__claim { margin-bottom: 60px; text-transform: uppercase; }
.footer__nav,
.footer__legal { display: flex; gap: 40px; }
.footer__legal { grid-column: 10 / -1; justify-self: end; }
.footer .cf-link__text { padding-bottom: 0.1em; }

/* Scroll-Reveal ---------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal="left"]  { transform: translateX(-60px); }
html.js [data-reveal="right"] { transform: translateX(60px); }
html.js [data-reveal="fade"]  { transform: none; }
html.js .quote__mark[data-reveal] { transform: translate(calc(-50% - 40px), -50%); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js .quote__mark[data-reveal].is-in { transform: translate(-50%, -50%); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1199px) {
  .feature-row__list { grid-column: 1 / span 6; }
}

@media (max-width: 991px) {
  :root { --margin: 40px; --pt: 160px; }
  .cards--4 > * { grid-column: span 6; }
  .cards--projects > * { grid-column: span 6; }
  .cards--3 > * { grid-column: span 4; }
  .section--wwm { padding-top: 100px; }
  .section--warum { padding-bottom: 160px; }
  .cp__wordmark { position: static; width: min(519px, 100%); margin-bottom: 80px; }
  .section--cp { padding-top: 80px; }
  .footer__inner { row-gap: 40px; }
  .footer__contact { grid-column: 1 / -1; order: 2; }
  .footer__center { grid-column: 1 / -1; order: 1; align-items: flex-start; justify-self: start; text-align: left; }
  .footer__legal { grid-column: 1 / -1; justify-self: start; order: 3; }
  .footer__claim { margin-bottom: 24px; }
}

@media (max-width: 767px) {
  :root { --margin: 20px; --gutter: 16px; --pt: 120px; --pb: 60px; }
  .nav__inner { padding: 0 20px; }
  .menu__bar { flex-direction: column; align-items: flex-start; padding: 20px; gap: 12px; }
  .menu__contact { flex-direction: column; gap: 8px; }

  .hero { min-height: 0; padding-top: 100px; padding-bottom: 60px; }
  .hero__cta { padding-top: 100px; }
  .cf-link--lg { font-size: 22px; }

  .section--wws { padding-top: 60px; }
  .section--wwm { padding-top: 80px; }
  .section--warum { padding-bottom: 120px; }

  .feature-row { row-gap: 60px; }
  .feature-row__list { grid-column: 1 / -1; max-width: none; }
  .feature-row__mark { grid-column: 1 / -1; margin: 0; width: 80%; }

  .cards { row-gap: 40px; }
  .cards--3 > *, .cards--4 > * { grid-column: 1 / -1; }
  .cards--projects { row-gap: var(--gutter); }
  .cards--projects > * { grid-column: span 6; }

  .quote { margin-top: 80px; }
  .section-title + .intro { margin-top: 32px; }
  .intro + .cards, .intro + .feature-row, .lead + .feature-row { margin-top: 60px; }

  .cp__wordmark { margin-bottom: 60px; }
  .section--cp { padding-top: 60px; }
  .cp__bottom { flex-direction: column; align-items: flex-end; }

  .cta { padding-top: 100px; padding-bottom: 60px; }
  .cta__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .cta__inner .cf-link { align-self: flex-end; }

  .footer__nav, .footer__legal { gap: 24px; flex-wrap: wrap; }
}

/* Weniger Bewegung ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .marquee__track { animation: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js .quote__mark[data-reveal] { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   Unterseiten
   ========================================================================== */

/* Unterseiten-Header (H1 mit Guillemet) */
.sub-hero { padding-top: 176px; }

/* Einleitung: Lead + Text */
.page-intro { padding-top: 200px; }
.page-intro .lead + .intro { margin-top: 40px; }
.page-intro .lead + .intro p { max-width: 630px; }

/* Wechselnde Reihen: Bild + Text (Leistungen, Projekte) */
.rows { padding-top: 200px; padding-bottom: 200px; }
.split { align-items: start; }
.split + .split { margin-top: 200px; }
.split__media { grid-column: 1 / span 5; }
.split__body  { grid-column: 7 / -1; }
.split--reverse .split__media { grid-column: 8 / -1; order: 2; }
.split--reverse .split__body  { grid-column: 1 / span 6; order: 1; padding-right: 24px; }
.media {
  aspect-ratio: 519 / 382;
  background: var(--placeholder);
  overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.split__title { margin-top: 20px; }
.split__text { margin-top: 40px; }
.split__text p + p { margin-top: 20px; }
.ticks { margin-top: 20px; font-weight: 700; }
.ticks li::before { content: "– "; }

/* Spitzmarke, nur das Wort unterstrichen (z. B. «Leistung 01») */
.eyebrow--word { text-decoration: none; }
.eyebrow--word .u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Projekte: Mehr laden */
.load-more-row { display: flex; justify-content: center; margin-top: 200px; }
.load-more-row[hidden] { display: none; }
.rows--projects:has(.load-more-row[hidden]) { padding-bottom: 200px; }

/* Button als Link */
button.cf-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }

/* Formulare ---------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: 40px; }
.field__label,
.choice-group legend {
  display: block;
  padding: 0;
  margin-bottom: 16px;
  font-weight: 700;
}
.input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--field);
  color: var(--black);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
textarea.input { height: 165px; padding: 12px 14px; resize: vertical; line-height: 1.25; }
select.input {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.input::placeholder { color: #7a7a7a; opacity: 1; }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--black); }
.input:user-invalid { box-shadow: inset 0 0 0 2px var(--black); background: #fff7a8; }

.choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-group legend { margin-bottom: 20px; }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: fit-content;
}
.choice + .choice { margin-top: 10px; }
.choice input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--black);
  border-radius: 0;
  background: var(--white);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
.choice input:checked {
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.3l3.2 3.2L13 4.4' fill='none' stroke='%23FCE800' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.choice input:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.choice-note { margin-top: 20px; }

.form-block + .form-block { margin-top: 60px; }
.form-block--contact { margin-top: 100px !important; }
.form-reveal { overflow: hidden; }
.form-reveal[hidden] { display: none; }
html.js .form-reveal.is-opening { animation: form-open 0.5s var(--ease-out); }
@keyframes form-open {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}

.form-consent { margin-top: 40px; color: #555; }
.form-consent a { text-decoration: underline; text-underline-offset: 0.2em; }
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 30px;
  margin-top: 40px;
}
.form-status { text-align: right; font-weight: 700; }
.form-status:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form[aria-busy="true"] button[type="submit"] { opacity: 0.5; pointer-events: none; }

/* Kontakt */
.contact { padding-top: 200px; padding-bottom: 80px; }
.contact__grid { align-items: start; }
.contact__title { grid-column: 1 / span 6; }
.contact__title .g-title { font-size: min(96px, 6.6vw); }
.contact__form { grid-column: 7 / -1; }

/* Projektformular */
.pf { padding-top: 230px; padding-bottom: 100px; }
.pf__col { grid-column: 4 / span 6; }
.pf__title { margin-bottom: 48px; }

/* Danke */
.thanks { padding-top: 200px; padding-bottom: 80px; }
.thanks .lead { margin-top: 180px; }
.thanks .link-row { margin-top: 60px; }

/* Rechtliches */
.legal { padding-top: 200px; padding-bottom: 120px; }
.legal__body { grid-column: 1 / span 7; }
.legal__body h2 { margin-top: 48px; margin-bottom: 12px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p + p,
.legal__body p + ul,
.legal__body ul + p { margin-top: 12px; }
.legal__body ul li::before { content: "– "; }
.legal__body a { text-decoration: underline; text-underline-offset: 0.2em; }
.legal__note { margin-top: 60px; color: #555; }
.placeholder-text { background: var(--yellow); padding: 0 4px; }

/* 404 */
.notfound { padding-bottom: 120px; }
.notfound .lead { margin-top: 160px; }

@media (max-width: 991px) {
  .split__media, .split__body,
  .split--reverse .split__media, .split--reverse .split__body { grid-column: 1 / -1; order: 0; padding-right: 0; }
  .split__body { margin-top: 48px; }
  .split--reverse .split__media { order: 1; }
  .split--reverse .split__body { order: 2; }
  .split + .split { margin-top: 140px; }
  .rows { padding-top: 160px; padding-bottom: 160px; }
  .load-more-row { margin-top: 140px; }

  .contact__title, .contact__form { grid-column: 1 / -1; }
  .contact__title .g-title { font-size: var(--fs-menu); }
  .contact__form { margin-top: 100px; }

  .pf__col { grid-column: 1 / -1; max-width: 628px; }
  .legal__body { grid-column: 1 / -1; max-width: 700px; }
}

@media (max-width: 767px) {
  .sub-hero { padding-top: 100px; }
  .page-intro, .contact, .pf, .thanks, .legal { padding-top: 120px; }
  .rows { padding-top: 120px; padding-bottom: 120px; }
  .split + .split { margin-top: 100px; }
  .split__body { margin-top: 32px; }
  .split__text { margin-top: 28px; }
  .load-more-row { margin-top: 100px; }
  .contact__form { margin-top: 80px; }
  .thanks .lead { margin-top: 100px; }
  .notfound .lead { margin-top: 100px; }
  .form-block--contact { margin-top: 80px !important; }
}
.page-intro--end { padding-bottom: 200px; }
@media (max-width: 767px) { .page-intro--end { padding-bottom: 120px; } }
@media (max-width: 767px) {
  .form-actions .cf-link { display: inline; white-space: normal; text-align: right; }
}

/* Outline-Guillemets: zeichnen sich beim Scrollen */
.g-outline { display: block; width: 100%; height: auto; overflow: visible; }
.g-outline path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 10;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
}
html.js .g-outline path { stroke-dasharray: 1 1; }

/* Kunden-Logos (Homepage, Unsere Projekte) */
.logo-marquee {
  margin: var(--pb) calc(-1 * var(--margin)) 0;   /* gleich viel Luft wie unten */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.logo-marquee .marquee__group { list-style: none; margin: 0; padding: 0; }
.logo-item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: 0 40px;
}
.logo-item img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(0);           /* alle Logos einheitlich schwarz */
}
.logo-item--placeholder span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 64px;
  background: var(--placeholder);
  font-size: 14px;
  text-transform: uppercase;
  color: #6b6b6b;
}
@media (max-width: 767px) {
  .logo-item { height: 64px; padding: 0 24px; }
  .logo-item img { height: 36px; max-width: 120px; }
  .logo-item--placeholder span { width: 120px; height: 44px; font-size: 12px; }
}

/* ==========================================================================
   Projekte: Karten-Übersicht
   ========================================================================== */
.cs-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 120px;
}
.cs-card:nth-child(even) { margin-top: 200px; }
.cs-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--placeholder);
  overflow: hidden;
}
.cs-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.cs-card .eyebrow { margin-top: 28px; }
.cs-card h2 { margin-top: 20px; }
.cs-card__teaser { margin-top: 20px; max-width: 520px; }
.cs-card .cf-link { margin-top: 28px; }

/* ==========================================================================
   Case Study
   ========================================================================== */
.cs-head__media {
  position: relative;
  height: clamp(280px, 50vw, 680px);
  background: var(--placeholder);
  overflow: hidden;
}
.cs-head__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-title { padding-top: 80px; }
.cs-title h1 { margin-top: 20px; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 20px 64px; margin: 48px 0 0; }
.cs-meta dt { font-weight: 700; }
.cs-meta dd { margin: 0; }
.cs-missing { padding-top: 200px; padding-bottom: 120px; }

.chapters { padding-bottom: 120px; }

/* Reiter (Desktop/Tablet) */
.chapnav {
  position: sticky;
  top: calc(var(--nav-h) + var(--line));
  z-index: 5;
  display: flex;
  gap: clamp(32px, 4.5vw, 64px);
  margin-top: 160px;
  padding: 28px 0 26px;
  background: var(--white);
  border-bottom: 1px solid var(--black);
}
.chapnav__tab {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 0.95;
  text-transform: uppercase;
  text-align: left;
  color: #b8b8b8;
  transition: color 0.2s var(--ease);
}
.chapnav__tab .n { display: block; margin-bottom: 8px; font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .chapnav__tab:hover { color: #6b6b6b; } }
.chapnav__tab[aria-selected="true"] { color: var(--black); }

/* Kapitel */
.chapter__heading { font: inherit; margin: 0; }
.chapter__toggle { display: none; }
.chapter:not(.is-active) { display: none; }
.chapter__body { padding-top: 80px; }
.chapter__cols { align-items: start; }
.chapter__lead { grid-column: 1 / span 5; }
.chapter__text { grid-column: 7 / -1; }
.chapter__text p + p { margin-top: 20px; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: 40px;
  list-style: none;
}
.steps__n { display: block; margin-bottom: 12px; font-size: var(--fs-h2); line-height: 0.95; font-weight: 700; }

/* Bild- und Video-Raster: breite 12 / 8 / 6 / 4 */
.media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(200px, 32vw, 460px);
  gap: 16px;
  margin-top: 80px;
}
.m { position: relative; margin: 0; background: var(--placeholder); overflow: hidden; }
.m--12 { grid-column: span 12; }
.m--8  { grid-column: span 8; }
.m--6  { grid-column: span 6; }
.m--4  { grid-column: span 4; }
.m img, .m video, .m iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.m__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  font-size: 13px;
  text-transform: uppercase;
  color: #6b6b6b;
}
.cs-head .m__ph { font-size: 14px; padding: 16px 20px; }
.m__ph--video::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M0 0l20 11L0 22z' fill='%23FCE800'/%3E%3C/svg%3E") 55% 50% / 20px no-repeat;
}

.cs-quote { margin-top: 160px; }
.cs-quote__by { margin-top: 48px; text-align: center; }
.cs-quote__by b { display: block; }

.chapter__foot { display: flex; justify-content: space-between; gap: 24px; margin-top: 80px; }
.chapter__foot .cf-link:last-child { margin-left: auto; }

/* ---------- Tablet (iPad hoch/quer) ---------- */
@media (max-width: 1199px) {
  .chapter__lead { grid-column: 1 / span 5; }
  .chapter__text { grid-column: 6 / -1; }
}
@media (max-width: 991px) {
  .cs-card:nth-child(even) { margin-top: 120px; }
  .cs-cards { row-gap: 100px; }
  .cs-title { padding-top: 64px; }
  .chapnav { margin-top: 120px; }
  .chapter__body { padding-top: 60px; }
  .chapter__lead, .chapter__text { grid-column: 1 / -1; }
  .chapter__text { margin-top: 28px; }
  .media-grid { margin-top: 60px; gap: 12px; }
  .cs-quote { margin-top: 120px; }
}

/* ---------- Handy: Kapitel als aufklappbare Zeilen ---------- */
@media (max-width: 767px) {
  .cs-cards { grid-template-columns: 1fr; row-gap: 80px; }
  .cs-card:nth-child(even) { margin-top: 0; }
  .cs-card .eyebrow { margin-top: 20px; }

  .cs-title { padding-top: 48px; }
  .cs-meta { gap: 16px 32px; margin-top: 32px; }
  .chapters { padding-bottom: 80px; }

  .chapnav { display: none; }
  .chapter { display: block !important; border-top: 1px solid var(--black); }
  .chapter:first-of-type { margin-top: 80px; }
  .chapter:last-of-type { border-bottom: 1px solid var(--black); }
  .chapter__toggle {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 22px 0;
    font-family: var(--font);
    font-weight: 700;
    text-align: left;
    color: var(--black);
  }
  .chapter__toggle .n { font-size: 16px; }
  .chapter__label { font-size: 20px; line-height: 1; text-transform: uppercase; }
  .chapter__sign { margin-left: auto; font-size: 28px; line-height: 1; font-weight: 400; }
  .chapter__sign::before { content: "+"; }
  .chapter.is-active .chapter__sign::before { content: "–"; }
  .chapter:not(.is-active) .chapter__body { display: none; }
  .chapter__body { padding: 8px 0 48px; }
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .media-grid { grid-auto-rows: 240px; gap: 10px; margin-top: 32px; }
  .m--12, .m--8, .m--6, .m--4 { grid-column: 1 / -1; }
  .cs-quote { margin-top: 72px; }
  .chapter__foot { flex-direction: column; align-items: flex-end; gap: 20px; margin-top: 48px; }
}

/* Footer auf iPad quer (992–1199 px): engere Spalten, damit nichts kollidiert */
@media (min-width: 992px) and (max-width: 1199px) {
  .footer__contact { grid-column: 1 / span 3; }
  .footer__center { grid-column: 4 / span 6; }
  .footer__legal { grid-column: 10 / -1; }
  .footer__nav, .footer__legal { gap: 24px; }
}
.cs-quote .quote__text p { max-width: 16em; margin: 0 auto; }

/* Projekt-Karten Hover:
   Das Bild schrumpft von oben links her (Ecke unten rechts bleibt stehen),
   der Guillemet kommt dahinter in der frei werdenden Ecke zum Vorschein,
   der Text rückt um denselben Betrag nach rechts. Alles bleibt in der
   ursprünglichen Fläche der Karte. */
.cs-card { position: relative; --shrink: 0.12; }
.cs-card__media {
  position: relative;
  z-index: 1;
  transform-origin: 100% 100%;
  transition: transform 0.6s var(--ease);
}
.cs-card:hover .cs-card__media img { transform: none; }
.cs-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 30%;
  aspect-ratio: 411 / 326;
  background: url("../assets/guillemet.svg") no-repeat left top / contain;
  transform: translate(12%, 12%);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.2s linear 0.05s;
  pointer-events: none;
}
.cs-card__body { transition: padding-left 0.6s var(--ease); }
.cs-card:has(:focus-visible) .cs-card__media { transform: scale(calc(1 - var(--shrink))); }
.cs-card:has(:focus-visible)::before { transform: translate(0, 0); opacity: 1; }
.cs-card:has(:focus-visible) .cs-card__body { padding-left: calc(var(--shrink) * 100%); }
@media (hover: hover) and (pointer: fine) {
  .cs-card:hover .cs-card__media { transform: scale(calc(1 - var(--shrink))); }
  .cs-card:hover::before { transform: translate(0, 0); opacity: 1; }
  .cs-card:hover .cs-card__body { padding-left: calc(var(--shrink) * 100%); }
}
@media (hover: none) {
  .cs-card::before { display: none; }
}

/* Menü: zwei ruhige Zeilen, zentriert (wie Figma) */
.menu__rows { justify-content: center; align-items: center; gap: 0.42em; }
.menu__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 0.1em; }
.menu__row .menu__link { padding: 0.06em 0.45em; }
.menu .menu__row {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-out);
}
.menu-open .menu .menu__row { opacity: 1; transform: none; transition-delay: 0.35s; }
.menu-open .menu .menu__row + .menu__row { transition-delay: 0.45s; }
@media (max-width: 767px) {
  .menu__rows { gap: 0.2em; }
  .menu__row { flex-direction: column; align-items: center; gap: 0.2em; }
}

/* ==========================================================================
   Über uns: Vision / Mission / Werte
   ========================================================================== */
.vmw { padding-bottom: 0; }
.vmw .chapnav { margin-top: 0; }
.vmw__statement { max-width: 22em; }
.vmw__cols { margin-top: 48px; }
.vmw__text { grid-column: 7 / -1; }
.vmw__pull { margin-top: 80px; }
.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px var(--gutter);
  list-style: none;
}
.values__n { display: block; margin-bottom: 12px; font-size: var(--fs-h2); line-height: 0.95; font-weight: 700; }
.values strong { display: block; font-weight: 700; }

/* Über uns: Team */
.team { padding-top: 200px; padding-bottom: 200px; }
.team .cs-cards { margin-top: 80px; }
.cs-card h3 { margin-top: 20px; }
.team-card .cs-card__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.team-card .cs-card__media video,
.team-card .cs-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-card .m__ph { font-size: 13px; }

/* Video-Vollbild */
html.dialog-open { overflow: hidden; }
.video-dialog {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.video-dialog[open] { display: flex; align-items: center; justify-content: center; }
.video-dialog::backdrop { background: rgba(0, 0, 0, 0.92); }
.video-dialog__frame { position: relative; background: #000; }
.video-dialog__frame--hoch { height: min(86vh, 160vw); aspect-ratio: 9 / 16; }
.video-dialog__frame--quer { width: min(90vw, 1280px); aspect-ratio: 16 / 9; }
.video-dialog__frame iframe,
.video-dialog__frame video { display: block; width: 100%; height: 100%; border: 0; }
.video-dialog__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 700; text-transform: uppercase; font-size: var(--fs-h4);
}
.video-dialog__close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.video-dialog__close::before,
.video-dialog__close::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  width: 30px;
  height: 3.34px;
  background: var(--white);
  transform: rotate(45deg);
}
.video-dialog__close::after { transform: rotate(-45deg); }

@media (max-width: 991px) {
  .vmw__text { grid-column: 1 / -1; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { padding-top: 160px; padding-bottom: 160px; }
}
@media (max-width: 767px) {
  .vmw .chapter:first-of-type { margin-top: 0; }
  .vmw__cols { margin-top: 24px; }
  .vmw__pull { margin-top: 40px; }
  .values { grid-template-columns: 1fr; gap: 32px; }
  .team { padding-top: 120px; padding-bottom: 120px; }
  .team .cs-cards { margin-top: 60px; }
}

/* ==========================================================================
   Typo-Skala Handy: Menu 34 · H1 29 · H2 24 · H3 20 · H4 18 · Body 16
   (jede Stufe rund 20% kleiner als die nächsthöhere)
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-h1: min(56px, 7.4vw);
    --fs-h2: min(40px, 6.2vw);
    --fs-h3: 20px;
    --fs-h4: 18px;
  }
  .cf-link--lg { font-size: 20px; }
}

.vmw__text p + p { margin-top: 20px; }

/* ==========================================================================
   Bewegung – Seitenübergänge, Touch, weiche Zustände
   ========================================================================== */

html { overflow-x: clip; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--nav-h) + var(--line) + 16px); }

/* Seitenübergang: moderne Browser (View Transitions) --------------------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: cf-nav; }
::view-transition-old(root) { animation: cf-page-out 0.35s var(--ease) both; }
::view-transition-new(root) { animation: cf-page-in 0.6s var(--ease-out) both; }
::view-transition-group(cf-nav) { animation-duration: 0.35s; }
@keyframes cf-page-out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes cf-page-in { from { opacity: 0; transform: translateY(24px); } }

/* Seitenübergang: ältere Browser (nur Deckkraft, damit fixe Elemente bleiben) */
html.no-vt body { animation: cf-fade-in 0.5s var(--ease-out) both; }
html.no-vt.is-leaving body { opacity: 0; transition: opacity 0.28s var(--ease); }
@keyframes cf-fade-in { from { opacity: 0; } }

/* Header-Video weich einblenden ----------------------------------------- */
html.js .hero-wrap__bg video { opacity: 0; transition: opacity 1.2s var(--ease-out); }
html.js .hero-wrap__bg video.is-playing { opacity: 1; }

/* Bilder weich einblenden ------------------------------------------------ */
main img { transition: opacity 0.7s var(--ease-out); }
html.img-fade main img:not(.is-loaded):not([src$=".svg"]) { opacity: 0; }

/* Reiter (Desktop/Tablet): Inhalt blendet beim Wechsel weich ein --------- */
@media (min-width: 768px) {
  .chapter.is-active { animation: cf-chapter-in 0.6s var(--ease-out) both; }
}
@keyframes cf-chapter-in { from { opacity: 0; transform: translateY(16px); } }
.chapnav__tab { transition: color 0.35s var(--ease); }

/* Touch: Rückmeldung beim Tippen, kein «hängender» Hover ---------------- */
.cf-link, .menu__link, .chapter__toggle { transition: opacity 0.2s var(--ease); }
@media (hover: none) {
  .cs-card__media { transition-duration: 0.25s; }   /* kurzes Nachgeben beim Antippen */
}
.cf-link:active, .menu__link:active, .chapter__toggle:active { opacity: 0.55; }
.cs-card__media:active { transform: scale(0.985); }

/* Handy: sanftere, kürzere Einblendungen -------------------------------- */
@media (max-width: 767px) {
  html.js [data-reveal] {
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: calc(var(--d, 0s) * 0.7);
  }
  html.js [data-reveal="left"]  { transform: translateX(-24px); }
  html.js [data-reveal="right"] { transform: translateX(24px); }
  html.js [data-reveal="fade"]  { transform: none; }
  html.js [data-reveal].is-in { transform: none; }
  html.js .quote__mark[data-reveal] { transform: translate(calc(-50% - 20px), -50%); }
  html.js .quote__mark[data-reveal].is-in { transform: translate(-50%, -50%); }

  /* Aufklappbare Kapitel: weich auf und zu */
  .chapter {
    display: grid !important;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.55s var(--ease);
  }
  .chapter.is-active { grid-template-rows: auto 1fr; }
  .chapter .chapter__body,
  .chapter:not(.is-active) .chapter__body {
    display: block;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    visibility: hidden;
    transition: padding 0.55s var(--ease), visibility 0s linear 0.55s;
  }
  .chapter.is-active .chapter__body {
    padding: 8px 0 48px;
    visibility: visible;
    transition: padding 0.55s var(--ease), visibility 0s;
  }

  /* Plus wird zu Minus – gedreht statt ausgetauscht */
  .chapter__sign { position: relative; width: 16px; height: 16px; font-size: 0; align-self: center; }
  .chapter__sign::before,
  .chapter.is-active .chapter__sign::before,
  .chapter__sign::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 2px;
    margin-top: -1px;
    background: currentColor;
    transition: transform 0.45s var(--ease);
  }
  .chapter__sign::after { transform: rotate(90deg); }
  .chapter.is-active .chapter__sign::after { transform: rotate(0deg); }
}

/* Weniger Bewegung: alles aus ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.no-vt body { animation: none; }
  html.js .hero-wrap__bg video { opacity: 1; }
  .chapter.is-active { animation: none; }
}

/* ==========================================================================
   Stand 29.09.2026 – Navigation über Video, Instagram, Team-Fotos, Bildraster
   ========================================================================== */

.burger { margin-left: auto; }

/* Homepage: Navigation liegt transparent über dem Video, beim Scrollen weiss */
.nav { transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease); }
html.js .page-index .nav:not(.is-solid) { background-color: transparent; border-bottom-color: transparent; }
html.js.menu-open .page-index .nav:not(.is-solid) { background-color: var(--white); border-bottom-color: var(--black); }
.page-index .hero-wrap { margin-top: calc(-1 * (var(--nav-h) + var(--line))); }
.page-index .hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(204px + var(--nav-h) + var(--line));
}
@media (max-width: 767px) {
  .page-index .hero { min-height: 0; padding-top: calc(100px + var(--nav-h) + var(--line)); }
}

/* Instagram-Link mit Icon */
.ig-link { display: inline-flex; align-items: center; gap: 8px; }
.ig-link.cf-link { align-items: center; }
.ig-icon { flex: none; width: 20px; height: 20px; }
.ig-link--footer { display: flex; margin-top: 8px; }
.ig-link--lg { font-size: var(--fs-large); }
.ig-link--lg .ig-icon { width: 24px; height: 24px; }

/* Footer-Kontakt: Linie zeichnet sich beim Hover von links */
.cf-hover {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease);
}
a:focus-visible > .cf-hover { background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) { a:hover > .cf-hover { background-size: 100% 1px; } }

/* Kontaktseite: direkte Kontaktwege unter dem Titel */
.contact__direct { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 56px; font-size: var(--fs-large); }
@media (max-width: 767px) { .contact__direct { margin-top: 40px; } }

/* Team mit Fotos (Light-Variante): nicht klickbar, kein Hover-Effekt */
.team-card--foto .cs-card__media { cursor: default; }
.team-card--foto:hover .cs-card__media,
.team-card--foto:has(:focus-visible) .cs-card__media { transform: none; }
.team-card--foto:hover::before { opacity: 0; }
.team-card--foto:hover .cs-card__body { padding-left: 0; }
.team-card--foto .cs-card__media:active { transform: none; }

/* Case Study: Bildraster in Zeilen mit gleicher Höhe */
.media-grid { display: flex; flex-direction: column; gap: 16px; }
.mg-row { display: flex; gap: 16px; }
.mg-row > .m { min-width: 0; }
@media (max-width: 767px) {
  .media-grid, .mg-row { gap: 10px; }
}

/* Homepage oben: Logo und Burger weiss über dem Video, schwarz sobald weiss hinterlegt */
.nav__logo { display: block; }
.nav__logo-img { transition: opacity 0.45s var(--ease); }
.nav__logo-img--weiss { position: absolute; top: 0; left: 0; opacity: 0; }
html.js .page-index .nav:not(.is-solid) .nav__logo-img { opacity: 0; }
html.js .page-index .nav:not(.is-solid) .nav__logo-img--weiss { opacity: 1; }
html.js.menu-open .page-index .nav:not(.is-solid) .nav__logo-img { opacity: 1; }
html.js.menu-open .page-index .nav:not(.is-solid) .nav__logo-img--weiss { opacity: 0; }
.burger__bar { transition: transform 0.5s var(--ease), opacity 0.3s var(--ease), background-color 0.45s var(--ease); }
html.js .page-index .nav:not(.is-solid) .burger__bar { background-color: var(--white); }
html.js.menu-open .page-index .nav:not(.is-solid) .burger__bar { background-color: var(--black); }
/* leichter Schatten oben im Video, damit das weisse Logo lesbar bleibt */
.page-index .hero-wrap__bg::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* ==========================================================================
   Stand 05.10.2026 – Header-Unterzeile, Über uns Layout A, Kunden-Logos weiss
   ========================================================================== */

/* Homepage-Header: Unterzeile bündig mit dem Text des Titels */
.hero__sub {
  margin: 28px 0 0 calc(var(--fs-menu) * 1.18);
  max-width: 30em;
  font-size: var(--fs-large);
  line-height: 1.35;
}
@media (max-width: 767px) {
  .hero__sub { margin-top: 20px; font-size: var(--fs-body); }
}

/* Über uns, Vision und Mission (Desktop): Leitsatz gross links, Text rechts unten bündig */
@media (min-width: 992px) {
  .vmw #body-vision,
  .vmw #body-mission {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
  }
  .vmw #body-vision .vmw__statement,
  .vmw #body-mission .vmw__statement {
    grid-column: 1 / span 7;
    max-width: none;
    font-size: var(--fs-h1);
    line-height: 0.95;
    text-wrap: balance;
  }
  .vmw #body-vision .vmw__cols,
  .vmw #body-mission .vmw__cols {
    grid-column: 9 / -1;
    display: block;
    margin-top: 0;
  }
  .vmw #body-vision .vmw__text,
  .vmw #body-mission .vmw__text { font-size: var(--fs-large); }
  .vmw #body-mission .vmw__pull { grid-column: 1 / -1; }
}

/* Über uns (Light): Team ohne Fotos, nur Text */
.team-cards--text { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
.team-cards--text .cs-card:nth-child(even) { margin-top: 0; }
.team-card--text { border-top: 1px solid var(--black); padding-top: 24px; }
.team-card--text::before { display: none; }
.team-card--text .cs-card__body { padding-left: 0 !important; }
.team-card--text .eyebrow { margin-top: 0; }
@media (max-width: 767px) {
  .team-cards--text { grid-template-columns: 1fr; row-gap: 40px; }
}

/* Leistungsbilder: als Hintergrund, nicht speicher- oder ziehbar ---------- */
.media--bild {
  background-size: cover;
  background-position: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}