/* =========================================================================
   Dinagentic GmbH — kapaapp-website
   Design-Tokens übernommen aus design/xd-design-tokens.css (Adobe XD Export).
   Design-Canvas der Vorlage: 1654 × 12452 px, Content-Spalte 1304 px.
   ========================================================================= */

:root {
  /* Farben (1:1 aus xd-design-tokens.css) */
  --c-indigo:      #33258E;   /* Primär: Buttons, Flächen */
  --c-blue:        #65B7F4;   /* Akzent-Hellblau: Headlines, Stats */
  --c-blue-alt:    #4FA7F2;   /* Sekundär-Blau: H1/H2-Varianten */
  --c-purple:      #C18BF0;   /* Lila-Akzent: Linien, Icons */
  --c-white:       #FFFFFF;
  --c-black:       #000000;
  --c-field:       #E8E8E8;   /* Formularfelder, Bildplatzhalter */
  /* Das helle Akzentblau hat auf Weiss nur 2,6:1 und ist damit fuer kleine
     Schrift unlesbar. Dieser dunklere Ton erreicht 5,2:1 und erfuellt WCAG AA. */
  --c-blue-dark:   #1E6FB8;

  /* Abgeleitete Töne (nicht im XD-Export, für Tiefe/Hover) */
  --c-ink:         #0B0A14;   /* Seitenhintergrund dunkel */
  --c-indigo-dark: #281D72;
  --c-hairline:    rgba(0, 0, 0, .12);
  --c-hairline-lt: rgba(255, 255, 255, .22);

  /* Schrift */
  --f-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluide Typo: Zielwerte = XD-Werte bei 1654 px Canvas */
  --fs-h1:   clamp(2rem,    1.30rem + 2.10vw, 3.125rem);  /* 32 → 50 px */
  --fs-h2:   clamp(1.5rem,  1.24rem + 0.78vw, 1.875rem);  /* 24 → 30 px */
  --fs-body: clamp(1.0625rem, 0.95rem + 0.35vw, 1.375rem);/* 17 → 22 px */
  --lh-h1: 1.2;
  --lh-h2: 1.33;
  --lh-body: 1.45;

  /* Layout */
  --container: 1304px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  /* Breite der fixierten Schnellkontakt-Leiste — randlose Sektionen müssen
     rechts so viel Platz lassen, sonst liegt sie über dem Inhalt. */
  --quickbar-w: 132px;
  --section-y: clamp(3.5rem, 1.8rem + 6vw, 8.5rem);
  --card-gap: clamp(1.5rem, 0.7rem + 2.6vw, 3rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; margin: 0; }
p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

/* hidden muss auch gegen eigene display-Regeln gewinnen — sonst bleiben
   ausgeblendete Elemente sichtbar, weil eine Klasse spezifischer ist als
   die Browser-Voreinstellung für [hidden]. */
[hidden] { display: none !important; }
a { color: inherit; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-indigo); color: var(--c-white);
  padding: .75rem 1.25rem; font-family: var(--f-body);
}
.skip-link:focus { left: 0; }

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

/* =========================================================================
   Header / Navigation  (XD: 1654 × 132)
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.site-header__inner {
  max-width: 1590px;
  margin-inline: auto;
  min-height: 132px;
  padding: .75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Bewusst zurückhaltend: das Logo soll den Header nicht dominieren.
   Der zweizeilige Lockup ist 448:168 — bei 250px wird er 94px hoch und
   bleibt damit innerhalb der 108px Innenhöhe des 132px hohen Headers. */
.logo img { width: clamp(170px, 16vw, 250px); height: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.5vw, 3.25rem); }
.site-nav > ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); }

.site-nav a {
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(.9375rem, .8rem + .35vw, 1.25rem);
  line-height: 1.4;
  white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.site-nav a:hover { color: var(--c-blue); border-bottom-color: var(--c-blue); }

.lang-switch {
  display: flex; align-items: center; gap: .55rem;
  color: var(--c-white);
  font-size: clamp(.9375rem, .8rem + .35vw, 1.25rem);
}
.lang-switch > span[aria-current] { color: var(--c-blue); }
.lang-switch a { text-decoration: none; }
.lang-switch a:hover { color: var(--c-blue); }

/* Burger */
.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  background: none; border: 0; cursor: pointer;
  padding: 0; place-items: center;
}
.nav-toggle span {
  display: block; width: 26px; height: 2px;
  background: var(--c-white);
  margin: 5px auto;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   Buttons  (XD: Höhe 53 px, Barlow Medium 22, 2 px Kontur bzw. #33258E Fläche)
   ========================================================================= */
.btn {
  --btn-fg: var(--c-white);
  --btn-bg: var(--c-indigo);
  --btn-bd: var(--c-indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 53px;
  padding: .6rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.14;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--sm { min-height: 46px; padding: .45rem 1.25rem; gap: .9rem; }

/* Pfeil aus dem XD-Asset (arrow-right-normal-small) als Inline-Maske */
.btn__arrow {
  flex: none;
  width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .2s ease;
  --arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="none" stroke="black" stroke-width="2"><path d="M20.6 11H2M11.6 2 20.6 11l-9 9"/></svg>');
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--solid:hover { --btn-bg: var(--c-indigo-dark); --btn-bd: var(--c-indigo-dark); }

.btn--outline-light { --btn-fg: var(--c-white); --btn-bg: transparent; --btn-bd: var(--c-white); }
.btn--outline-light:hover { --btn-fg: var(--c-black); --btn-bg: var(--c-white); }

.btn--outline-dark { --btn-fg: var(--c-indigo); --btn-bg: transparent; --btn-bd: var(--c-indigo); }
.btn--outline-dark:hover { --btn-fg: var(--c-white); --btn-bg: var(--c-indigo); }

/* =========================================================================
   Hero
   ========================================================================= */
/* Bildschirmfüllendes Titelvideo. Der Header ist sticky und 132 px hoch, daher
   wird er von der Viewport-Höhe abgezogen — sonst schöbe der Hero die Seite
   um genau diese Höhe zu weit nach unten. */
.hero {
  position: relative;
  background: var(--c-ink);
  min-height: calc(100vh - 132px);
  min-height: calc(100svh - 132px);   /* svh: ohne die ein-/ausfahrende Mobile-Browserleiste */
  display: grid;
  place-items: center;
  padding: clamp(3rem, 1rem + 6vw, 7rem) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* Stapelung im Hero: Video (0) → Abdunkelung (1) → Text (2).
   Bewusst positive z-index-Werte — mit negativen hängt das Ergebnis daran,
   dass "isolation: isolate" greift, und der Text kann hinter dem Video landen. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* Abdunkelung aus der Vorlage (XD: Rechteck 592, 61,4 %), nach unten hin etwas
   dichter, damit der Text über dem bewegten Bild sicher lesbar bleibt. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 10, 20, .55) 0%, rgba(11, 10, 20, .614) 45%, rgba(11, 10, 20, .72) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  /* width zusätzlich zu max-width: ohne sie zieht justify-items:center das
     Element auf max-content auf und der Text bricht auf Mobil nicht um. */
  width: 100%;
  max-width: 62rem;
  color: var(--c-white);
}
/* Etwas größer als der XD-Wert (50 px): auf einer bildschirmfüllenden Fläche
   wirkt die Überschrift sonst verloren. Für exakte Vorlagentreue --fs-h1 nutzen. */
.hero h1 {
  font-size: clamp(2.125rem, 1.2rem + 2.8vw, 4rem);
  line-height: 1.15;
  color: var(--c-white);
}
.hero__sub {
  margin-top: clamp(.75rem, .4rem + 1vw, 1.5rem);
  color: var(--c-blue-alt);
  font-family: var(--f-head);
  font-weight: 600;
  /* bewusst kleiner als die H1, damit sie diese nicht erdrückt */
  font-size: clamp(1.125rem, .85rem + .95vw, 2.125rem);
  line-height: var(--lh-h2);
}
.hero .btn { margin-top: clamp(1.25rem, .6rem + 2vw, 2.75rem); }

@media (max-width: 900px) {
  /* Ab hier ist der Header nur noch 88 px hoch (siehe Breakpoint unten) */
  .hero {
    min-height: calc(100vh - 88px);
    min-height: calc(100svh - 88px);
  }
}

/* =========================================================================
   Sektionen
   ========================================================================= */
.section { padding-block: var(--section-y); }
.section--light { background: var(--c-white); color: var(--c-black); }
.section--dark  { background: var(--c-ink);   color: var(--c-white); }

.section__cta { margin-top: clamp(2rem, 1rem + 3vw, 4rem); text-align: center; }
.section__cta--left { text-align: left; }

/* Headlines */
.headline { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.headline--xl { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.headline--blue { color: var(--c-blue-alt); }
.headline--center { text-align: center; margin-inline: auto; max-width: 25ch; }
.headline--xl.headline--center { max-width: 22ch; }

.subhead { margin-top: clamp(2rem, 1rem + 3vw, 4rem); }

.lead {
  max-width: 62ch;
  margin-top: clamp(1.5rem, .8rem + 2.5vw, 3rem);
}
.lead--center { margin-inline: auto; text-align: center; }

/* Aufzählung unter dem Vorspann. Der Block steht mittig, der Text darin aber
   linksbündig — zentrierte Aufzählungspunkte sind schwer zu lesen, weil das
   Auge für jede Zeile einen neuen Anfang suchen muss. */
.lead-list {
  /* 72ch ist der Umschlagpunkt: Darunter brechen die Punkte auf zwei bis drei
     Zeilen, darüber bringt mehr Breite nichts außer schlechter lesbaren Zeilen. */
  max-width: 72ch;
  margin: clamp(1.25rem, .8rem + 1.5vw, 2rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  text-align: left;
}
.lead-list li { position: relative; padding-left: 1.75rem; }
/* Zahlenspannen und Einheiten sollen nicht am Zeilenende auseinanderfallen. */
.nowrap { white-space: nowrap; }

.lead-list li::before {
  content: "";
  position: absolute; left: .4rem; top: .62em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--c-blue);
}

/* Lila Trennlinie — XD: Rechteck 2-2 / 2-7 (310 × 7, #C18BF0) */
.rule {
  display: block;
  width: 310px; max-width: 60%;
  height: 7px;
  background: var(--c-purple);
  margin-top: clamp(1.25rem, .7rem + 1.6vw, 2.25rem);
}
.rule--full { width: 100%; max-width: none; height: 12px; margin: 0; }

/* =========================================================================
   Karten-Grids
   ========================================================================= */
.cards { display: grid; gap: var(--card-gap); }
/* minmax(0, …) statt 1fr: sonst weiten lange Wörter wie
   „Auftragsverschiebungen“ ihre Spalte über den gleichen Anteil hinaus,
   und die Bilder daneben werden unterschiedlich groß. */
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* Vorteils-Karten — XD: Rechteck 2, 448 × 659, weiß */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Über die Höhe skalieren, nicht über die Breite: Die drei Icons haben
   unterschiedliche Eigenmaße (55x55, 58x60, 41x55). Bei fester Breite würde
   das schmale dritte auf 74px Höhe wachsen und die Überschrift nach unten
   schieben. Bei fester Höhe stehen alle drei auf einer Linie. */
.card__icon { height: 55px; width: auto; align-self: flex-start; }
/* Lange deutsche Komposita wie „Planungsaufwand“ sprengen zwischen 1200 und
   1440px die schmal gewordene Spalte. Die weichen Trennstellen im Markup
   greifen zuerst; hyphens/overflow-wrap fangen alles Übrige ab. */
.card__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  hyphens: auto;
  overflow-wrap: break-word;
}

/* =========================================================================
   Branchen — Auswahl und Panes
   Die Auswahl ist ein Kachelraster, kein Karussell: Wer seine Branche nicht
   sieht, schließt daraus, dass wir sie nicht bedienen. Alle Optionen müssen
   deshalb gleichzeitig sichtbar sein. Erst unter 900 px wird die Leiste
   horizontal scrollbar, weil dort nichts anderes mehr geht.
   ========================================================================= */
.branchen__intro {
  margin-top: 1rem;
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

.branchen__tabs {
  /* Mittig gesetzt und in der Breite begrenzt: Über die volle Spalte verteilt
     stünden drei Kacheln mit kurzen Namen wie „Pharma“ fast leer. */
  margin: clamp(2rem, 1rem + 3vw, 3rem) auto 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.branchen__tab {
  /* Buttons erben nichts von der Seite — Schrift und Farbe explizit setzen. */
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  text-align: left;
  color: var(--c-black);
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  border-radius: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* Mittig, damit einzeilige Namen wie „Pharma“ nicht oben kleben. Trägt die
     Kachel ein „in Vorbereitung“-Label, zieht dessen margin-top:auto den freien
     Raum an sich — dann steht der Name oben und das Label unten. */
  justify-content: center;
  gap: .5rem;
  /* Der gewählte Zustand bekommt unten einen 3 px starken Balken. Die Kachel
     trägt ihn immer, nur transparent — sonst springt die Höhe beim Wechsel. */
  border-bottom: 3px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.branchen__tab:hover { background: #F4F8FD; border-bottom-color: var(--c-hairline); }
.branchen__tab[aria-selected="true"] {
  background: var(--c-indigo);
  border-color: var(--c-indigo);
  border-bottom-color: var(--c-blue);
  color: var(--c-white);
}

/* „in Vorbereitung“ — gedämpft, aber anklickbar. Kein aria-disabled, die
   Kacheln öffnen ja ein Pane. */
.branchen__tab--soon { color: #5B5A6B; }
.branchen__badge {
  /* An den Kachelboden: Die Namen laufen über zwei oder drei Zeilen, ohne das
     hier stünden die Labels auf unterschiedlicher Höhe. */
  margin-top: auto;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-indigo);
}
.branchen__tab[aria-selected="true"] .branchen__badge { color: var(--c-blue); }

.branchen__pane { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.branchen__pane-title {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--c-blue);
}
.branchen__lead { margin-top: .9rem; max-width: 62ch; }

/* Zwei Spalten, nicht drei: Problem und Lösung sind je zwei Sätze, bei drei
   Spalten blieben rund 400 px — dort brachen schon die Vorteilskarten um. */
.branchen__probleme {
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
}
.branchen__problem {
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.branchen__problem h4 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.33;
  /* Bewusst ohne hyphens: auto — in diesen Ueberschriften trennte der Browser
     mitten im Wort („er-faehrt“, „Ferti-gung“). Die Titel sind kurz genug, um
     an Wortgrenzen umzubrechen; break-word faengt nur Ausreisser ab. */
  overflow-wrap: break-word;
}
.branchen__problem p { margin-top: .7rem; }

/* Die Lösung setzt sich über eine Haarlinie und die Akzentfarbe ab, damit das
   Muster „das kennen Sie → das macht die App daraus“ auf einen Blick lesbar ist. */
.branchen__loesung {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-hairline);
  color: var(--c-indigo);
}
.branchen__loesung strong {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .8em;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-blue-dark);
}

.branchen__hinweis {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.25rem, .8rem + 1.4vw, 1.75rem);
  background: #F4F8FD;
  border-left: 3px solid var(--c-blue);
  max-width: 76ch;
}

.branchen__beispiel {
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: var(--c-ink);
  color: var(--c-white);
}
.branchen__beispiel strong {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .8em;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-blue);
}

.branchen__effekte {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  max-width: 72ch;
}
.branchen__effekte li { position: relative; padding-left: 1.75rem; }
.branchen__effekte li::before {
  content: "";
  position: absolute;
  left: .4rem; top: .62em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--c-blue);
}

/* Auffangzeile unter der Sektion — für alle, deren Branche (noch) fehlt */
.branchen__fallback {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-top: 1px solid var(--c-hairline);
  text-align: center;
}
.branchen__fallback a { color: var(--c-blue-dark); }

/* Pane der noch nicht ausgearbeiteten Branchen — derzeit ungenutzt, bleibt für
   künftige Branchen stehen. Siehe design/BRANCHEN.md. */
.branchen__soon-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  max-width: 72ch;
}
.branchen__soon-list li { position: relative; padding-left: 1.75rem; }
.branchen__soon-list li::before {
  content: "";
  position: absolute;
  left: .4rem; top: .62em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--c-purple);
}

@media (max-width: 1100px) {
  .branchen__probleme { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* Wischen statt Umbrechen: die Kacheln bleiben nebeneinander, die Leiste scrollt.
     Der Anschnitt der nächsten Kachel zeigt, dass es weitergeht. */
  .branchen__tabs {
    max-width: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Ohne scroll-padding richtet das Einrasten die erste Kachel an der
       Scrollkante aus und frisst dabei den Seitenrand — der Streifen stünde
       beim Laden bereits um die Randbreite verschoben. */
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    /* Der Rahmen der gewählten Kachel würde sonst am Rand abgeschnitten. */
    padding-bottom: .5rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .branchen__tab { flex: 0 0 min(62vw, 230px); scroll-snap-align: start; }
}

/* =========================================================================
   „Wenn Sie …“ / Anwendungsfälle
   ========================================================================= */
.usecases__kicker {
  margin-top: clamp(1.5rem, .8rem + 2vw, 2.5rem);
  text-align: center;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--c-blue);
}

.usecase { display: flex; flex-direction: column; gap: 1.1rem; }

/* Bildplatzhalter — XD: Rechteck 14, 380 × 221, #E8E8E8 */
.usecase__media {
  aspect-ratio: 380 / 221;
  background: var(--c-field) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23a9a9b4" stroke-width="1.5"><rect x="2.5" y="4" width="19" height="16"/><circle cx="8" cy="9.5" r="1.8"/><path d="m3 17 5.5-5 4 3.5 3.5-3 5 5.5"/></svg>') center / 56px no-repeat;
}
.usecase__title {
  font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--c-blue);
  overflow-wrap: break-word; /* bricht überlange Komposita nur, wenn sie sonst überstehen */
}
.usecase__text { color: var(--c-white); }

/* Das Beispiel ist jetzt der Kacheltext. Das blaue Label bleibt, damit
   erkennbar ist, dass es sich um eine Illustration handelt und nicht um eine
   Kundenreferenz. Die frühere Haarlinie entfällt — darüber steht kein Text
   mehr, von dem abzusetzen wäre. */
.usecase__example {
  margin-top: 1rem;
  color: var(--c-white);
}
.usecase__example strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--c-blue);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .8em;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.usecases__outro {
  margin-top: clamp(3rem, 1.5rem + 4vw, 5.5rem);
  max-width: 42ch;
}

/* =========================================================================
   Sechs Gründe
   ========================================================================= */
.reasons__sub {
  margin-top: 1rem;
  text-align: center;
  max-width: 44ch;
  margin-inline: auto;
}

/* --- Horizontales Karussell (XD: Pfeil-Buttons Gruppe 1110/1111, 53 × 53) --- */
.carousel { position: relative; margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

.carousel__nav {
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.carousel__btn {
  width: 53px; height: 53px;
  flex: none;
  background: var(--c-indigo);
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  transition: opacity .2s ease, background-color .2s ease;
}
.carousel__btn::before {
  content: "";
  width: 22px; height: 22px;
  background: var(--c-white);
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  --arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="none" stroke="black" stroke-width="2"><path d="M1.4 11h18.6M10.4 2 1.4 11l9 9"/></svg>');
}
.carousel__btn--next::before {
  --arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="none" stroke="black" stroke-width="2"><path d="M20.6 11H2M11.6 2 20.6 11l-9 9"/></svg>');
}
.carousel__btn:hover:not(:disabled) { background: var(--c-indigo-dark); }
/* Deckkraft des deaktivierten Zustands exakt wie im XD-Export */
.carousel__btn:disabled { opacity: .401; cursor: default; }

/* Die nächste Karte ragt sichtbar herein, damit erkennbar ist, dass die Strecke
   rechts weitergeht. --peek ist die tatsächlich sichtbare Anschnittbreite;
   --per-view die Zahl voll sichtbarer Karten. Die Gaps zwischen den sichtbaren
   Karten und der eine vor dem Anschnitt müssen abgezogen werden, sonst bliebe
   vom Anschnitt fast nichts übrig. */
.carousel__track {
  --peek: clamp(3rem, 1rem + 5vw, 7.5rem);
  --per-view: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--per-view) * var(--card-gap) - var(--peek)) / var(--per-view));
  gap: var(--card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.reason {
  scroll-snap-align: start;
  border: 1px solid var(--c-hairline);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.reason__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.reason__num-inline { color: var(--c-blue); }
.reason__kpi {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-hairline);
  font-weight: 700;
  color: var(--c-blue);
}

/* =========================================================================
   So arbeiten wir zusammen  (Hintergrund: Netzwerk-Grafik)
   ========================================================================= */
/* Randlose 50/50-Teilung: Foto füllt die linke Bildschirmhälfte, Inhalt rechts.
   Im XD ist das Foto 824 × 885 bei 1654 px Canvas — also exakt die halbe Breite
   (Rechteck 7-4), mit 56,2 % Abdunkelung darüber (Rechteck 592-2). */
.process {
  display: grid;
  /* Foto nimmt ein Drittel der Breite ein; die volle Sektionshöhe bleibt, den
     seitlichen Beschnitt übernimmt object-fit: cover am Bild.
     minmax(0, …) ist zwingend: mit 1fr zieht der Karussell-Track die rechte
     Spalte auf seine Min-Content-Breite und quetscht das Foto zusammen. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  color: var(--c-white);
  /* Radialverlauf wie die Verlaufsflächen im Export (Gruppe maskieren 55/57) */
  background:
    radial-gradient(110% 80% at 75% 40%, rgba(51, 37, 142, .55) 0%, rgba(29, 21, 80, .4) 50%, transparent 78%),
    var(--c-ink);
}

/* Zweispaltig wie in der Vorlage: Überschrift links, Schritte rechts als
   horizontale Strecke. Im XD beginnen die Karten bei x=951 von 1654 px, die
   zweite ragt über den Rahmen hinaus — Schritt 3 und 4 liegen dort außerhalb
   des sichtbaren Frames. */
.process__media { position: relative; min-height: clamp(22rem, 12rem + 26vw, 55.3rem); }
.process__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Abdunkelung auf Wunsch entfernt. Der Export hatte hier 56,2 %
   (Rechteck 592-2); zum Zurückholen den Wert unten wieder setzen. */
.process__media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11, 10, 20, 0);
}

.process__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--section-y) var(--gutter);
  /* Innenabstand wie die Inhaltsspalte der übrigen Sektionen */
  padding-left: clamp(2rem, 1rem + 4vw, 6rem);
  /* rechts an der Schnellkontakt-Leiste vorbei */
  padding-right: calc(var(--gutter) + var(--quickbar-w));
}
.process__cta { margin-top: clamp(1.5rem, .8rem + 2.5vw, 3rem); }

.carousel--process { width: 100%; margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.process__list { --per-view: 1; }

/* Weiße Karten — XD: Rechteck 2-8 / 2-9, 564 × 328 bzw. 538 × 328 */
.step {
  scroll-snap-align: start;
  background: var(--c-white);
  color: var(--c-black);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  min-height: clamp(15rem, 10rem + 12vw, 20.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.step__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.step__num-inline { color: var(--c-blue-alt); }

/* =========================================================================
   Übergangsbänder — randlose Videobänder, über die hinweg gescrollt wird.
   XD: Pfad 74062 (1654 × 609) und Pfad 74072 (1654 × 497), je 45 % Abdunkelung.
   ========================================================================= */
.band {
  position: relative;
  /* overflow clippt das überhohe Video auf die Bandhöhe */
  overflow: hidden;
  height: clamp(16rem, 7rem + 28vw, 38rem);   /* ~609 px bei 1654 px Breite */
  background: var(--c-ink);
  isolation: isolate;
}
.band--sm { height: clamp(13rem, 6rem + 23vw, 31rem); }  /* ~497 px */

/* Video ist viewporthoch und wird per JS so verschoben, dass es relativ zum
   Viewport stehen bleibt — der Inhalt scrollt darüber hinweg. */
.band__video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
}

/* Abdunkelung exakt wie im Export (45 %) */
.band::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11, 10, 20, .45);
}

/* Ohne JS (oder bei reduzierter Bewegung) bleibt ein ruhiges Standbild-Band */
@media (prefers-reduced-motion: reduce) {
  .band__video { height: 100%; transform: none !important; }
}

/* =========================================================================
   Über uns / Team
   ========================================================================= */
.about__intro {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
  align-items: start;
}
.about__claim {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.team {
  margin-top: clamp(2.5rem, 1.2rem + 4vw, 5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.member { display: flex; flex-direction: column; gap: 1.5rem; }

.member__head { display: flex; gap: clamp(1.25rem, .6rem + 2vw, 2.5rem); align-items: flex-start; }

/* Porträt-Platzhalter — in der XD-Vorlage als graue Fläche angelegt */
.member__photo {
  flex: none;
  width: clamp(140px, 16vw, 246px);
  aspect-ratio: 246 / 325;
  background: var(--c-field) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23a9a9b4" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7"/></svg>') center / 52px no-repeat;
}
.member__ident { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.member__name { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.member__role { font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.member__ident .btn { margin-top: 1rem; }

.member__facts { display: flex; flex-direction: column; gap: 1rem; }
.member__facts li { position: relative; padding-left: 1.4rem; }
.member__facts li::before { content: "·"; position: absolute; left: .25rem; }

.member__edu { color: var(--c-blue); }

/* =========================================================================
   Standort
   ========================================================================= */
.office__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.office__address { margin-top: clamp(1.5rem, .8rem + 2vw, 2.5rem); }
.office__address a { text-decoration: none; color: var(--c-blue-alt); }
.office__address a:hover { text-decoration: underline; }
.office__map img { width: 100%; object-fit: cover; }

/* =========================================================================
   Kontaktformular
   ========================================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.contact__claim {
  margin-top: clamp(1rem, .5rem + 1.5vw, 2rem);
  font-family: var(--f-head); font-weight: 600;
  font-size: var(--fs-h2); line-height: var(--lh-h2);
}
.contact__aside { position: sticky; top: 160px; }
.contact__aside img { width: 100%; max-height: 640px; object-fit: cover; }

/* Direkte Kontaktwege unter dem Kopf der Kontaktsektion. Nebeneinander, damit
   sie das Formular nicht nach unten schieben; unter 600 px untereinander. */
.contact__direct {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
}
@media (max-width: 600px) {
  .contact__direct { flex-direction: column; gap: 1rem; }
}
.contact__direct li { display: flex; align-items: center; gap: .9rem; }
/* currentColor statt fester Farbe: dieselben Symbole lassen sich später auch auf
   dunklem Grund verwenden, ohne zweite Dateien. */
.contact__icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: var(--c-indigo);
}
/* Das helle Akzentblau käme auf Weiß nur auf 2,6:1 — hier der dunklere Ton. */
.contact__direct a { color: var(--c-blue-dark); text-decoration: none; }
.contact__direct a:hover { text-decoration: underline; }

.contact-form { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); display: flex; flex-direction: column; gap: 1.5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-weight: 500; }

/* Felder — XD: Rechteck 58/60/192/193, 436 × 55, #E8E8E8 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  min-height: 55px;
  padding: .85rem 1.1rem;
  background: var(--c-field);
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--c-black);
  transition: border-color .18s ease;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--c-indigo); }
.contact-form [aria-invalid="true"] { border-color: #c0392b; }

.field__error { color: #c0392b; font-size: .9em; min-height: 1.2em; }

.hp { position: absolute !important; left: -9999px; opacity: 0; }

.form-note, .form-privacy { font-weight: 300; }
.form-privacy { font-size: .82em; line-height: 1.5; max-width: 70ch; }

.contact-form .btn { align-self: flex-start; }

.form-status { font-weight: 500; min-height: 1.5em; }
.form-status.is-ok { color: var(--c-indigo); }
.form-status.is-error { color: #c0392b; }

/* =========================================================================
   Rechtsseiten (Impressum, Datenschutz)
   ========================================================================= */
.legal { padding-block: var(--section-y); }
.legal__inner { max-width: 48rem; }
.legal h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--c-blue-alt); }
.legal h2 {
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  margin-top: clamp(2rem, 1rem + 3vw, 3.25rem);
}
.legal h3 {
  font-family: var(--f-body); font-weight: 700;
  font-size: 1.05em;
  margin-top: 1.75rem;
}
.legal p, .legal ul { margin-top: 1rem; }
.legal ul { display: flex; flex-direction: column; gap: .5rem; }
.legal li { position: relative; padding-left: 1.4rem; }
.legal li::before { content: "·"; position: absolute; left: .35rem; }
.legal a { color: var(--c-blue-alt); }
.legal address { margin-top: 1rem; }
.legal .rule { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.legal__updated { margin-top: 3rem; font-weight: 300; font-size: .9em; }

/* Hinweis auf die maßgebliche Sprachfassung — steht nur in der englischen
   Übersetzung der Rechtsseiten, weil rechtlich die deutsche Fassung gilt. */
.legal__lang-note {
  margin-top: 1.5rem;
  padding: .9rem 1.15rem;
  border-left: 3px solid var(--c-blue);
  background: #F2F7FC;
  font-weight: 300;
  font-size: .93em;
}
.legal__lang-note a { color: var(--c-indigo); }

/* Offene Punkte, die vor dem Livegang ergänzt werden müssen.
   Fällt bewusst auf, damit nichts Unvollständiges unbemerkt online geht. */
.todo {
  background: #FFF4CE;
  border-left: 5px solid #E0A800;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  font-size: .95em;
}
.todo strong { font-weight: 700; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--c-ink); color: var(--c-white); }

.site-footer__grid {
  padding-block: clamp(2.5rem, 1.2rem + 4vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.site-footer__brand img { width: clamp(170px, 16vw, 250px); height: auto; }
.site-footer__company { margin-top: 1.5rem; font-family: var(--f-head); font-weight: 600; font-size: var(--fs-h2); }
.site-footer__address { margin-top: 1rem; font-weight: 300; }
.site-footer__address a { color: var(--c-blue); text-decoration: none; }
.site-footer__address a:hover { text-decoration: underline; }

.site-footer__nav { display: flex; gap: clamp(1.5rem, 3vw, 3.5rem); }
.site-footer__nav ul { display: flex; flex-direction: column; gap: .75rem; }
.site-footer__nav a { font-weight: 300; text-decoration: none; }
.site-footer__nav a:hover { color: var(--c-blue); }

.site-footer__social { display: flex; gap: 1rem; }
.site-footer__social a {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border: 1px solid var(--c-hairline-lt);
  transition: border-color .2s ease, background-color .2s ease;
}
.site-footer__social a:hover { border-color: var(--c-blue); background: rgba(101, 183, 244, .12); }
.site-footer__social img { filter: invert(1); width: 26px; height: auto; }

.site-footer__bottom {
  padding-block: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-weight: 300;
  font-size: .9em;
}
.site-footer__bottom a { text-decoration: none; }
.site-footer__bottom a:hover { color: var(--c-blue); }

/* =========================================================================
   Schnellkontakt-Leiste rechts — XD: Gruppe 1143 (132 × 393, bündig rechts,
   Oberkante direkt unter dem 132 px hohen Header)
   ========================================================================= */
.quickbar {
  position: fixed;
  top: 132px; right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
}
.quickbar__tile {
  position: relative;          /* Bezugspunkt für die Nummernblase */
  width: 132px; height: 131px;
  display: grid; place-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--c-white);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.14;
  transition: filter .2s ease;
}
.quickbar__tile:hover { filter: brightness(1.12); }
.quickbar__tile--demo  { background: var(--c-blue); }
.quickbar__tile--phone { background: var(--c-indigo); }
.quickbar__tile--mail  { background: var(--c-purple); }
.quickbar__tile img { width: 42px; height: auto; }
.quickbar__tile--mail img { width: 52px; }

/* Nummernblase an der Telefonkachel. Am Rechner tritt sie an die Stelle des
   Wählvorgangs, siehe js/main.js. Links neben der Leiste, weil die am rechten
   Bildschirmrand klebt. */
.quickbar__tip {
  position: absolute;
  right: calc(100% + .5rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--c-ink);
  color: var(--c-white);
  font-size: 1rem;
  line-height: 1;
  padding: .6rem .9rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s;
  pointer-events: none;        /* fängt die Maus nicht ab */
}
.quickbar__tile--phone:hover .quickbar__tip,
.quickbar__tile--phone:focus-visible .quickbar__tip { opacity: 1; visibility: visible; }

/* Zurück nach oben — XD: Gruppe 1139, 77 × 77, #65B7F4 */
.to-top {
  position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem);
  width: clamp(52px, 5vw, 77px); aspect-ratio: 1;
  background: var(--c-blue);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top::before {
  content: ""; width: 40%; height: 40%;
  background: var(--c-black);
  -webkit-mask: var(--up) center / contain no-repeat;
          mask: var(--up) center / contain no-repeat;
  --up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16 12 7l9 9"/></svg>');
}

/* =========================================================================
   Breakpoints: 1200 / 768 / 480
   ========================================================================= */
/* Zwischen 1201 und 1400px stehen die Karten noch dreispaltig, sind dort aber
   nur 188–240px breit, während die Überschrift bei 30px bleibt. „Personalkosten“
   braucht rund 230px und bricht deshalb auf drei Zeilen. In diesem Band die
   Überschrift verkleinern — darunter greift ohnehin das zweispaltige Raster. */
@media (min-width: 1201px) and (max-width: 1400px) {
  .card__title { font-size: 1.4rem; }
}

@media (max-width: 1200px) {
  .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__aside { order: -1; position: static; }
  .contact__aside img { max-height: 360px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__social { grid-column: 1 / -1; }

}

@media (max-width: 1500px) {
  /* Leiste darf den Inhalt nicht überlagern, sobald der Rand schmal wird */
  :root { --quickbar-w: 96px; }
  .quickbar__tile { width: 96px; height: 96px; font-size: .95rem; }
  .quickbar__tile img { width: 32px; }
  .quickbar__tile--mail img { width: 40px; }

}
@media (max-width: 1500px) and (min-width: 901px) {
  /* Inhaltsspalte so weit einziehen, dass sie neben der fixierten Leiste frei
     bleibt (96 px Kachel + 16 px Luft, symmetrisch auf beiden Seiten).
     Ab 900 px wandert die Leiste nach unten und das ist nicht mehr nötig. */
  :root { --container: min(1304px, calc(100vw - 224px)); }
}

@media (max-width: 900px) {
  .nav-toggle { display: grid; }

  :root { --quickbar-w: 0px; }
  .quickbar { top: auto; bottom: 0; left: 0; right: 0; flex-direction: row; }
  .quickbar__tip {
    right: auto; left: 50%; top: auto; bottom: calc(100% + .5rem);
    transform: translateX(-50%);
  }
  .quickbar__tile { flex: 1; width: auto; height: 64px; font-size: .9rem; }
  .to-top { bottom: calc(64px + 1rem); }

  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.75rem var(--gutter) 2.25rem;
    background: var(--c-ink);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav > ul { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .site-header__inner { position: relative; min-height: 88px; }
}

@media (max-width: 768px) {
  .cards--3, .cards--2, .cards--4 { grid-template-columns: minmax(0, 1fr); }
  /* Mobil: eine volle Karte, der Anschnitt bleibt als Scroll-Hinweis erhalten */
  .carousel__track { --per-view: 1; }
  .about__intro { grid-template-columns: 1fr; }
  /* Gestapelt: Foto als Band oben, Inhalt darunter.
     minmax(0, …) statt 1fr — sonst zieht der Karussell-Track die Spalte auf
     seine Min-Content-Breite (alle Karten nebeneinander) auf. */
  .process { grid-template-columns: minmax(0, 1fr); }
  .process__media { min-height: 0; aspect-ratio: 16 / 9; max-height: 300px; }
  .process__body { align-items: stretch; }
  .office__grid { grid-template-columns: 1fr; }
  .headline--center, .headline--xl.headline--center { max-width: none; }
  .member__photo { width: clamp(120px, 34vw, 200px); }
  .site-footer__grid { grid-template-columns: 1fr; }
  .reason__num { font-size: 4.5rem; }
}

/* Zeilenumbrüche aus der XD-Vorlage gelten nur ab Tablet aufwärts */
@media (max-width: 768px) {
  .br-lg { display: none; }
}

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .member__head { flex-direction: column; }
  .site-footer__social a { width: 64px; height: 64px; }
  .btn { width: 100%; }
  .contact-form .btn { align-self: stretch; }
}

/* Kicker über der Überschrift des ROI-Rechners */
.roi-eyebrow {
  text-align: center;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 1rem;
}

/* Fehlender Einzelwert mitten im Fließtext — soll auffallen, bis er ersetzt ist */
.todo-inline {
  background: #FFF4CE;
  border-bottom: 2px solid #E0A800;
  padding: 0 .35rem;
  font-style: italic;
}

/* Echtes Bild in der „Wenn Sie …“-Sektion — gleicher Zuschnitt wie der Platzhalter */
.usecase__img {
  width: 100%;
  aspect-ratio: 380 / 221;
  object-fit: cover;
}

/* Echtes Porträt — gleicher Zuschnitt wie der graue Platzhalter */
.member__img {
  flex: none;
  width: clamp(140px, 16vw, 246px);
  aspect-ratio: 246 / 325;
  object-fit: cover;
  object-position: center top;
}