/* =========================================================================
   Fonts — Geist / Geist Mono, self-hosted (SIL Open Font License 1.1)
   https://github.com/vercel/geist-font
   ========================================================================= */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2-variations"),
       url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   Design System
   ========================================================================= */

:root {
  /* Dunkelton — Alpinschiefer statt Schwarz.
     Bewusst hell genug, dass die Farbe als Farbe gelesen wird: bei 10 %
     Helligkeit wirkt jeder Ton am Bildschirm wieder wie Schwarz. */
  --ink:        #16283A;
  --ink-2:      #1A2F44;
  --ink-3:      #1D3348;
  --ink-4:      #24405A;

  /* Neutrals */
  --white:      #FFFFFF;
  /* leicht warm verschoben — passt zur alpinen Bildwelt und deckt sich
     mit keiner fremden Palette */
  --g-50:       #FBFAF8;
  --g-100:      #F4F2EF;
  --g-200:      #E8E5E1;
  --g-300:      #D8D4CF;
  --g-400:      #9B9791;
  /* Nur fuer Fliesstext auf --ink-3. Die Grundsatz-Karten sind heller als der
     Abschnitt um sie herum: --g-400 kommt auf dem Abschnitt auf 5.17:1, auf der
     Karte aber nur auf 4.46:1 und damit knapp unter AA. */
  --g-350:      #A5A19B;
  --g-500:      #5A5854;

  /* Akzent — Schweizer Bundesrot nach CD Bund (#DA291C) */
  --red:        #DA291C;
  --red-2:      #E8463A;
  /* nur fuer kleine Schrift auf dunklem Grund: #E8463A erreicht dort
     lediglich 3.3:1, dieser Ton kommt auf 5.1:1 */
  --red-hell:   #FF7A6D;
  --red-tint:   rgba(218, 41, 28, 0.10);

  /* Type */
  --f-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --------------------------------------------------------------------
     Gesamtwirkung. 1 = Originalgroesse, 0.8 entspricht etwa 80 % Browserzoom.
     Wirkt auf alle grossen Schriftgrade und auf die Sektionsabstaende.
     Fliesstext bleibt bewusst aussen vor — unter 15px liest ihn niemand mehr
     gern, auch wenn die Seite dann "kompakter" wirkt.
     -------------------------------------------------------------------- */
  --skala: 0.75;

  /* Zweiter Regler, nur fuer den Fliesstext. Er wirkt ueber die Wurzelgroesse
     auf jeden rem-Wert, also auch auf Absaetze, Listen und Beschriftungen.
     0.94 entspricht 15px statt 16px Grundgroesse — zusammen mit --skala
     ergibt das fuer Ueberschriften rund 75 %. Tiefer als 0.9 sollte er nicht,
     dann rutschen die Mono-Beschriftungen unter 11px. */
  --skala-text: 0.92;

  /* --------------------------------------------------------------------
     Dritter Regler: die Geometrie. Spaltenbreite, Abstaende, Radien,
     Bauteilgroessen.

     Er fehlte, und das war der Grund, warum die Seite bei 75 Prozent
     Browserzoom besser aussah: Der Zoom verkleinert ALLES um denselben
     Faktor, auch die Inhaltsspalte. Hier lief die Schrift auf 75 Prozent,
     die Geometrie aber unveraendert auf 100 — Text wurde kleiner, die
     Kaesten drumherum blieben gross. Die Verhaeltnisse verschoben sich.

     Warum nach Breite gestaffelt statt einem festen Wert: Der Zoom
     verkleinert auch auf dem Handy, und dort ist die Seite schon klein
     genug. Unterhalb von 1000px bleibt deshalb alles, wie es war —
     nachgerechnet identisch auf die Nachkommastelle. Erst darueber wird
     die Seite Schritt fuer Schritt ruhiger, und am meisten dort, wo der
     Bildschirm am meisten Platz hat.
     -------------------------------------------------------------------- */
  --skala-mass: 1;

  /* Rhythm */
  --page-pad:   calc(clamp(6px, 0.83vw, 12px) * var(--skala-mass));
  --inset:      calc(clamp(15px, 1.76vw, 24px) * var(--skala-mass));
  --sec-y:      calc(clamp(57px, 7.05vw, 110px) * var(--skala-mass));
  --gap:        calc(clamp(12px, 1.28vw, 18px) * var(--skala-mass));

  /* Radii */
  --r-xl:       calc(24px * var(--skala-mass));
  --r-lg:       calc(20px * var(--skala-mass));
  --r-row:      calc(44px * var(--skala-mass));
  --r-md:       calc(14px * var(--skala-mass));
  --r-pill:     calc(999px * var(--skala-mass));

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur:        0.6s;
}
/* Staffelung der beiden Massstaebe nach Bildschirmbreite. Unter 1000px
   bleibt alles unveraendert; darueber wird die Seite schrittweise ruhiger.
   --skala-text laeuft jetzt mit — vorher blieb der Fliesstext stehen,
   waehrend Geometrie und Ueberschriften schrumpften. Damit war er im
   Verhaeltnis zur Spalte 39 Prozent groesser als zuvor, und genau das
   sah man. Die Untergrenze von 11px in jeder Groessenangabe verhindert,
   dass die kleinsten Beschriftungen mit abtauchen. */
@media (min-width: 1000px) { :root { --skala-mass: 0.86; --skala: 0.70; --skala-text: 0.88; } }
@media (min-width: 1400px) { :root { --skala-mass: 0.78; --skala: 0.66; --skala-text: 0.83; } }
@media (min-width: 1800px) { :root { --skala-mass: 0.72; --skala: 0.62; --skala-text: 0.78; } }


/* =========================================================================
   Reset
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; scroll-padding-top: clamp(96px, 11vw, 124px); }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: max(11px, calc(16px * var(--skala-text)));
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: calc(4px * var(--skala-mass));
}

/* =========================================================================
   Typography scale
   ========================================================================= */

.t-h1 {
  font-size: calc(clamp(2.6rem, 6.85vw, 6rem) * var(--skala));
  line-height: 1.055;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.t-h2 {
  /* Untergrenze so gewaehlt, dass auch lange deutsche Komposita
     ("Entwicklungspartner") bei 320px in die Zeile passen. */
  font-size: calc(clamp(1.85rem, 4.6vw, 4rem) * var(--skala));
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 400;
}

.t-h3 {
  font-size: calc(clamp(1.4rem, 2.1vw, 2rem) * var(--skala));
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.t-display {
  font-size: calc(clamp(2.1rem, 6.55vw, 6rem) * var(--skala));
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.t-lead {
  font-size: max(11px, calc(clamp(1rem, 1.15vw, 1.0625rem) * var(--skala-text)));
  line-height: 1.62;
  color: var(--g-500);
}

.t-mono {
  font-family: var(--f-mono);
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-weight: 400;
}

.muted { color: var(--g-500); }
.on-dark .muted, .is-dark .muted { color: var(--g-400); }

/* =========================================================================
   Layout primitives
   ========================================================================= */

.page { padding: var(--page-pad); }

.wrap {
  width: 100%;
  /* Fest, nicht skaliert: sonst wird die Spalte auf einem breiteren
     Bildschirm ABSOLUT schmaler statt gleich zu bleiben. 1180px ist die
     Breite, die der 75-Prozent-Ansicht entspricht (dort 1134 physische
     Pixel), und sie gilt ab 1180px aufwaerts unveraendert. */
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--inset);
}

.panel {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}

.panel--dark {
  background: var(--ink);
  color: var(--white);
}

.panel--grey { background: var(--g-100); }

.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: clamp(calc(52px * var(--skala-mass)), 5.6vw, calc(88px * var(--skala-mass))); }

.grid { display: grid; gap: var(--gap); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(calc(24px * var(--skala-mass)), 4vw, calc(72px * var(--skala-mass)));
  align-items: end;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; align-items: start; gap: calc(24px * var(--skala-mass)); }
}

.split__aside { justify-self: end; }
@media (max-width: 900px) { .split__aside { justify-self: start; } }

.hr {
  height: 1px;
  background: var(--g-200);
  border: 0;
  margin: 0;
}

.is-dark .hr { background: rgba(255, 255, 255, 0.14); }

/* =========================================================================
   Badge  (red swiss-cross chip + mono label)
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--skala-mass));
  padding: calc(8px * var(--skala-mass)) calc(14px * var(--skala-mass)) calc(8px * var(--skala-mass)) calc(9px * var(--skala-mass));
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.15;
  /* Kein nowrap: eine lange Kennzeichnung hat sonst auf 320px die ganze Seite
     seitlich aufgeschoben. Die Pille darf zweizeilig werden, die Seite nicht
     wandern. */
  max-width: 100%;
  text-wrap: balance;
}

.badge__mark {
  flex: 0 0 auto;
  width: calc(18px * var(--skala-mass));
  height: calc(18px * var(--skala-mass));
  border-radius: calc(4px * var(--skala-mass));
  background: var(--red);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.badge__mark::before {
  content: "";
  width: calc(10px * var(--skala-mass));
  height: calc(10px * var(--skala-mass));
  background: #fff;
  /* Swiss cross */
  clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
}

.badge--onlight { background: var(--g-100); }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--skala-mass));
  padding: calc(13px * var(--skala-mass)) calc(22px * var(--skala-mass));
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: max(11px, calc(1rem * var(--skala-text)));
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  will-change: transform;
}

.btn__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--skala-mass));
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: translateY(0); }

.btn--red   { --btn-bg: var(--red);   --btn-fg: #fff; }
.btn--white { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--white::before { background: rgba(0, 0, 0, 0.07); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--g-200);
}
.btn--ghost::before { background: rgba(0, 0, 0, 0.05); }

.btn__arrow {
  width: calc(12px * var(--skala-mass));
  height: calc(12px * var(--skala-mass));
  flex: 0 0 auto;
  transition: transform 0.35s var(--ease);
}
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

/* Underline text link */
.link-u {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--skala-mass));
  font-size: calc(clamp(1.125rem, 1.5vw, 1.375rem) * var(--skala));
  letter-spacing: -0.02em;
  padding-bottom: calc(6px * var(--skala-mass));
  border-bottom: 1.5px dashed var(--red);
  transition: gap 0.35s var(--ease);
  justify-self: start;
  width: fit-content;
}
.link-u:hover { gap: calc(16px * var(--skala-mass)); }
.link-u svg { color: var(--red); width: calc(20px * var(--skala-mass)); height: calc(14px * var(--skala-mass)); }

/* =========================================================================
   Navigation
   ========================================================================= */

/* Fixed, damit Navigation und Kontakt-CTA auf der ganzen Seite erreichbar bleiben.
   Liegt über .drawer, sonst wäre der Burger beim offenen Menü nicht mehr klickbar. */
.nav {
  position: fixed;
  top: var(--page-pad);
  left: var(--page-pad);
  right: var(--page-pad);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24px * var(--skala-mass));
  padding: clamp(calc(18px * var(--skala-mass)), 2.1vw, calc(30px * var(--skala-mass))) var(--inset);
  color: var(--white);
  border-radius: var(--r-xl);
  transition: background-color 0.4s var(--ease), padding 0.4s var(--ease),
              box-shadow 0.4s var(--ease), transform 0.45s var(--ease);
}

/* Nach dem Hero: kompakte, abgesetzte Leiste */
.nav.is-stuck {
  background: rgba(22, 40, 58, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(calc(16px * var(--skala-mass)));
  backdrop-filter: saturate(160%) blur(calc(16px * var(--skala-mass)));
  padding-block: clamp(calc(12px * var(--skala-mass)), 1.3vw, calc(18px * var(--skala-mass)));
  box-shadow: 0 12px 40px -22px rgba(0, 0, 0, 0.7);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(11px * var(--skala-mass));
  font-size: calc(clamp(1.375rem, 1.8vw, 1.75rem) * var(--skala));
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  z-index: 2;
}

.brand__mark { width: calc(30px * var(--skala-mass)); height: calc(30px * var(--skala-mass)); flex: 0 0 auto; }
/* Schweizer Flagge in der Wortmarke */
/* Haarlinie trennt Marke und Herkunftszeichen – sonst liest sich die
   Flagge wie ein hochgestelltes Markenzeichen. */
.brand__rule {
  width: 1px;
  height: 1.02em;
  background: currentColor;
  opacity: 0.26;
  margin-left: 0.62em;
  align-self: center;
  flex: 0 0 auto;
}

/* Die Flagge hing mit 0.54em an der Wortmarke und kam damit auf 11px, auf dem
   Handy sogar auf 9. Ein Schweizerkreuz braucht mehr, sonst bleibt davon ein
   roter Punkt. Jetzt 0.82em, und die Kreuzbalken sind kraeftiger — bei dieser
   Groesse liest sich die amtliche Strichstaerke als Haarlinie. */
.brand__flag {
  width: 0.82em;
  height: 0.82em;
  border-radius: 0.15em;
  background: #DA291C;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  margin-left: 0.55em;
  align-self: center;
}
.brand__flag::before {
  content: "";
  width: 62%;
  height: 62%;
  background: #fff;
  clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
}

.brand sup { font-size: 0.42em; font-weight: 400; top: -0.85em; position: relative; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(calc(14px * var(--skala-mass)), 1.9vw, calc(30px * var(--skala-mass)));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  letter-spacing: -0.01em;
}

.nav__link {
  position: relative;
  padding: calc(6px * var(--skala-mass)) 2px;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link.is-active { color: #fff; opacity: 1; }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 2px;
  background: var(--red-2);
  border-radius: 2px;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: calc(12px * var(--skala-mass));
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: calc(7px * var(--skala-mass)) calc(22px * var(--skala-mass)) calc(7px * var(--skala-mass)) calc(7px * var(--skala-mass));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  font-weight: 500;
  transition: transform 0.35s var(--ease);
}
.nav__cta:hover { transform: translateY(-2px); }
.nav__cta img,
.nav__cta .nav__avatar {
  width: calc(38px * var(--skala-mass)); height: calc(38px * var(--skala-mass));
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--g-100);
}
.nav__cta .nav__avatar { display: grid; place-items: center; color: var(--ink); }
.nav__cta .nav__avatar svg { width: calc(19px * var(--skala-mass)); height: calc(19px * var(--skala-mass)); }

.nav__burger {
  display: none;
  width: calc(34px * var(--skala-mass));
  height: calc(24px * var(--skala-mass));
  position: relative;
  z-index: 60;
}
.nav__burger span {
  position: absolute;
  left: 0;
  height: 2.5px;
  width: 100%;
  background: var(--red);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s linear, background-color 0.3s;
}
.nav__burger span:nth-child(1) { top: 2px; }
.nav__burger span:nth-child(2) { top: calc(10.5px * var(--skala-mass)); }
.nav__burger span:nth-child(3) { top: calc(19px * var(--skala-mass)); }

body.menu-open .nav__burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__burger { display: block; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  background: var(--ink);
  color: #fff;
  padding: calc(96px * var(--skala-mass)) var(--inset) calc(40px * var(--skala-mass));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
  overflow-y: auto;
}
body.menu-open .drawer {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.6s var(--ease), visibility 0s linear 0s;
}
/* While the menu is open the nav sits on the dark drawer — keep the mark legible */
body.menu-open .nav { color: var(--white); }

.drawer__nav { display: flex; flex-direction: column; gap: calc(4px * var(--skala-mass)); }
.drawer__nav a {
  font-size: calc(clamp(2rem, 9vw, 2.75rem) * var(--skala));
  letter-spacing: -0.035em;
  line-height: 1.25;
  font-weight: 500;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.menu-open .drawer__nav a { opacity: 1; transform: none; }
body.menu-open .drawer__nav a:nth-child(1) { transition-delay: 0.14s; }
body.menu-open .drawer__nav a:nth-child(2) { transition-delay: 0.19s; }
body.menu-open .drawer__nav a:nth-child(3) { transition-delay: 0.24s; }
body.menu-open .drawer__nav a:nth-child(4) { transition-delay: 0.29s; }
body.menu-open .drawer__nav a:nth-child(5) { transition-delay: 0.34s; }
body.menu-open .drawer__nav a:nth-child(6) { transition-delay: 0.39s; }

.drawer__foot { display: grid; gap: calc(18px * var(--skala-mass)); padding-top: calc(32px * var(--skala-mass)); }
.drawer__foot .btn { justify-content: center; }

body.menu-open { overflow: hidden; }

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  min-height: clamp(calc(600px * var(--skala-mass)), 92vh, calc(940px * var(--skala-mass)));
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  /* No `isolation` / `z-index` here on purpose: it would trap .nav in its own
     stacking context and the fixed drawer would then cover the burger. */
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transform: scale(1.06);
  animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(22,40,58,0.76) 0%, rgba(22,40,58,0.36) 24%, rgba(22,40,58,0.30) 52%, rgba(22,40,58,0.64) 78%, rgba(22,40,58,0.90) 100%),
    linear-gradient(100deg, rgba(22,40,58,0.82) 0%, rgba(22,40,58,0.46) 44%, rgba(22,40,58,0.06) 78%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Auf dieselbe Spalte wie der Rest der Seite. Solange die Spalte 1512 breit
     war, fiel der Versatz kaum auf; mit dem schmaleren Satzspiegel sprang die
     Titelzeile 340 Pixel weiter nach aussen als alles darunter. Die Flaeche
     bleibt randlos, der Text nicht. */
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(calc(96px * var(--skala-mass)), 11vw, calc(150px * var(--skala-mass))) var(--inset) clamp(calc(28px * var(--skala-mass)), 3.4vw, calc(46px * var(--skala-mass)));
  gap: clamp(calc(28px * var(--skala-mass)), 4.6vw, calc(64px * var(--skala-mass)));
}

.hero__top { max-width: min(60%, calc(780px * var(--skala-mass))); }
.hero__badge { margin-bottom: clamp(calc(18px * var(--skala-mass)), 2.4vw, calc(30px * var(--skala-mass))); }
.hero__title { max-width: 100%; text-wrap: balance; }
.hero__sub {
  margin-top: clamp(calc(16px * var(--skala-mass)), 1.8vw, calc(24px * var(--skala-mass)));
  max-width: 48ch;
  text-wrap: pretty;
  font-size: max(11px, calc(clamp(0.9375rem, 1.15vw, 1.0625rem) * var(--skala-text)));
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}

.hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: end;
  gap: clamp(calc(28px * var(--skala-mass)), 4vw, calc(56px * var(--skala-mass)));
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(calc(20px * var(--skala-mass)), 4.6vw, calc(76px * var(--skala-mass)));
  color: rgba(255, 255, 255, 0.62);
}
.hero__meta li { white-space: nowrap; }
@media (max-width: 480px) { .hero__meta li { white-space: normal; } }

.hero__pitch { display: grid; gap: clamp(calc(18px * var(--skala-mass)), 2.2vw, calc(30px * var(--skala-mass))); justify-items: end; }
.hero__pitch p {
  font-size: calc(clamp(1.25rem, 2.25vw, 2rem) * var(--skala));
  line-height: 1.25;
  letter-spacing: -0.03em;
  max-width: 26ch;
  text-align: right;
  text-wrap: balance;
}
.hero__actions { display: flex; gap: calc(12px * var(--skala-mass)); flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__inner { padding-top: calc(128px * var(--skala-mass)); gap: calc(40px * var(--skala-mass)); }
  .hero__top, .hero__title { max-width: none; }
  .hero__bottom { grid-template-columns: 1fr; align-items: start; gap: calc(30px * var(--skala-mass)); }
  .hero__meta { flex-wrap: wrap; gap: calc(6px * var(--skala-mass)) calc(16px * var(--skala-mass)); font-size: 0.6875rem; }
  .hero__pitch { justify-items: start; }
  .hero__pitch p { text-align: left; max-width: none; }
  .hero__actions { justify-content: flex-start; }
}

/* =========================================================================
   Logo marquee strip
   ========================================================================= */

.strip {
  border-top: 1px solid var(--g-200);
  border-bottom: 1px solid var(--g-200);
  display: grid;
  grid-template-columns: minmax(0, calc(440px * var(--skala-mass))) minmax(0, 1fr);
  align-items: center;
  gap: clamp(calc(20px * var(--skala-mass)), 3vw, calc(48px * var(--skala-mass)));
  padding: 0 var(--inset);
  margin-top: 2px;
}

.strip__head {
  display: flex;
  align-items: center;
  gap: calc(18px * var(--skala-mass));
  padding-block: calc(26px * var(--skala-mass));
  color: var(--g-500);
}
.strip__star { width: calc(38px * var(--skala-mass)); height: calc(38px * var(--skala-mass)); flex: 0 0 auto; color: var(--ink); }
.strip__head p { max-width: 46ch; line-height: 1.5; }

.strip__track { overflow: hidden; padding-block: calc(26px * var(--skala-mass)); }

@media (max-width: 860px) {
  .strip { grid-template-columns: 1fr; gap: 0; }
  .strip__head { padding-bottom: calc(14px * var(--skala-mass)); }
  .strip__track { padding-top: calc(6px * var(--skala-mass)); border-top: 1px dashed var(--g-200); }
}

/* Marquee engine */
.marquee { display: flex; width: max-content; will-change: transform; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(calc(38px * var(--skala-mass)), 5vw, calc(76px * var(--skala-mass)));
  padding-right: clamp(calc(38px * var(--skala-mass)), 5vw, calc(76px * var(--skala-mass)));
  animation: marquee var(--mq-dur, 34s) linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee:hover .marquee__group { animation-play-state: paused; }

.tool-item {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--skala-mass));
  font-size: calc(clamp(1.05rem, 1.4vw, 1.35rem) * var(--skala));
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0.9;
}
/* Trennlinie laeuft durch, der Rechtstext bleibt auf lesbarer Zeilenlaenge. */
.strip__note {
  grid-column: 1 / -1;
  margin: 0;
  padding: calc(14px * var(--skala-mass)) 0 calc(18px * var(--skala-mass));
  border-top: 1px dashed var(--g-200);
}
.strip__note span {
  display: block;
  max-width: 78ch;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--g-500);
}

/* =========================================================================
   Gallery marquee (images)
   ========================================================================= */

.gallery__track { overflow: hidden; margin-top: clamp(calc(44px * var(--skala-mass)), 6vw, calc(92px * var(--skala-mass))); }
.gallery .marquee__group { gap: var(--gap); padding-right: var(--gap); }

.gallery__item {
  width: clamp(calc(230px * var(--skala-mass)), 27vw, calc(400px * var(--skala-mass)));
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--g-100);
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.gallery__item:hover img { transform: scale(1.05); }

/* =========================================================================
   Stats / counters
   ========================================================================= */

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(calc(24px * var(--skala-mass)), 3.4vw, calc(52px * var(--skala-mass)));
  margin-top: clamp(calc(30px * var(--skala-mass)), 3.6vw, calc(52px * var(--skala-mass)));
}
@media (max-width: 900px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .stats__grid { grid-template-columns: 1fr; gap: calc(60px * var(--skala-mass)); }
  .stat__rule { margin: calc(16px * var(--skala-mass)) 0; }
}

.stat__num {
  display: flex;
  align-items: baseline;
  font-size: calc(clamp(3.25rem, 6.4vw, 6rem) * var(--skala));
  line-height: 1.05;
  letter-spacing: normal;
  font-weight: 600;
  height: 1.05em;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.stat__digits { display: flex; }
.stat__digit {
  display: block;
  height: 1.05em;
  overflow: hidden;
}
.stat__reel {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat__reel span { height: 1.05em; display: block; }
/* Die Endung stand bisher in derselben Groesse wie die Ziffer. Bei "%" und
   "Mt." faellt das nicht auf, bei "Werktag" lief sie aus der Spalte. */
.stat__suffix {
  font-weight: 500;
  font-size: 0.42em;
  align-self: baseline;
  margin-left: 0.12em;
  letter-spacing: -0.01em;
}

.stat__rule {
  margin: calc(24px * var(--skala-mass)) 0;
  height: 1px;
  background: var(--g-200);
}
.stat h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.022em; margin-bottom: calc(6px * var(--skala-mass)); }
.stat p { font-size: max(11px, calc(0.9375rem * var(--skala-text))); color: var(--g-500); line-height: 1.55; max-width: 30ch; }

/* =========================================================================
   Services (dark, hover-reveal rows)
   ========================================================================= */

.services { color: var(--white); }
.services__inner { padding: clamp(calc(48px * var(--skala-mass)), 5.6vw, calc(84px * var(--skala-mass))) var(--inset) clamp(calc(30px * var(--skala-mass)), 4vw, calc(60px * var(--skala-mass))); }

.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: clamp(calc(24px * var(--skala-mass)), 4vw, calc(64px * var(--skala-mass)));
  align-items: start;
}
@media (max-width: 900px) { .services__head { grid-template-columns: 1fr; gap: calc(20px * var(--skala-mass)); } }

.services__title { max-width: 13ch; }

.services__note { color: var(--g-400); font-size: max(11px, calc(0.9375rem * var(--skala-text))); line-height: 1.6; max-width: 46ch; text-wrap: pretty; padding-top: clamp(calc(20px * var(--skala-mass)), 4.6vw, calc(66px * var(--skala-mass))); }

.services__rule { margin-top: clamp(calc(30px * var(--skala-mass)), 3.6vw, calc(50px * var(--skala-mass))); height: 1px; background: rgba(255,255,255,0.18); }

.srv { border-bottom: 1px dashed rgba(255, 255, 255, 0.2); }
.srv:first-child { border-top: 0; }

/* Die Zeile ist ein Behaelter: der Titel verweist, das Plus schaltet. */
.srv__row {
  width: 100%;
  display: flex;
  align-items: baseline;   /* Ziffer und Titel auf einer Grundlinie */
  gap: calc(14px * var(--skala-mass));
  padding: clamp(calc(18px * var(--skala-mass)), 2.4vw, calc(34px * var(--skala-mass))) 0;
  text-align: left;
  color: #8A8A8A;
  transition: color 0.55s var(--ease);
}
.srv:hover .srv__row, .srv.is-open .srv__row { color: var(--white); }

/* Die Leistungsnamen sind jetzt h3. Das Element traegt keine eigene Gestaltung —
   Grundlinie und Knopfposition der Zeile bleiben, wie sie waren. */
.srv__titel { margin: 0; font: inherit; letter-spacing: inherit; }

.srv__name {
  letter-spacing: -0.04em;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.35s var(--ease);
}
.srv__name:hover,
.srv__name:focus-visible { border-bottom-color: var(--red-hell); }

.srv__toggle {
  /* Aus zwei Balken gebaut statt aus einem Schriftzeichen: ein gedrehtes
     Minus sah aus wie ein senkrechter Strich. So wird aus dem Plus sauber
     ein Minus, indem sich nur der senkrechte Balken legt. */
  align-self: center;
  margin-left: auto;
  position: relative;
  width: clamp(calc(16px * var(--skala-mass)), 1.5vw, calc(20px * var(--skala-mass)));
  height: clamp(calc(16px * var(--skala-mass)), 1.5vw, calc(20px * var(--skala-mass)));
  color: inherit;
  flex: 0 0 auto;
  cursor: pointer;
}
.srv__toggle::before,
.srv__toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform 0.45s var(--ease);
}
.srv__toggle::after { transform: translateY(-50%) rotate(90deg); }
.srv.is-open .srv__toggle::after { transform: translateY(-50%) rotate(0deg); }
/* Nummer steht vorn und auf der Grundlinie, nicht als Superskript hinten */
.srv__no {
  font-size: calc(clamp(1rem, 1.5vw, 1.5rem) * var(--skala));
  font-weight: 500;
  /* Der Abschnitt ist dunkel. --red kommt dort auf 3.08:1 und faellt damit
     unter AA; --red-hell erreicht 5.9:1. Der Rest des Abschnitts war laengst
     umgestellt, diese Nummer und das Plus daneben waren uebersehen worden. */
  color: var(--red-hell);
  align-self: baseline;      /* auf der Grundlinie des Titels, nicht darunter */
  margin-right: 0.5em;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.srv__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease);
}
.srv.is-open .srv__panel { grid-template-rows: 1fr; }
.srv__panelInner { overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.7s; }
.srv.is-open .srv__panelInner { visibility: visible; transition-delay: 0s; }

.srv__content {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(calc(20px * var(--skala-mass)), 3vw, calc(52px * var(--skala-mass)));
  align-items: center;
  padding-bottom: clamp(calc(24px * var(--skala-mass)), 3vw, calc(44px * var(--skala-mass)));
}
@media (max-width: 780px) { .srv__content { grid-template-columns: 1fr; } }

.srv__img {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--ink-4);
}
.srv__img img { width: 100%; height: 100%; object-fit: cover; }

.srv__label {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--skala-mass));
  color: var(--g-400);
  margin-bottom: calc(14px * var(--skala-mass));
}
.srv__label .plus { color: var(--red-hell); font-size: max(11px, calc(1.1rem * var(--skala-text))); line-height: 1; }
.srv__text { font-size: max(11px, calc(clamp(1rem, 1.25vw, 1.1875rem) * var(--skala-text))); line-height: 1.55; color: rgba(255,255,255,0.92); max-width: 46ch; letter-spacing: -0.012em; }
.srv__tags { display: flex; flex-wrap: wrap; gap: calc(8px * var(--skala-mass)); margin-top: calc(20px * var(--skala-mass)); }
.srv__tags li {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: calc(7px * var(--skala-mass)) calc(13px * var(--skala-mass));
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-pill);
  color: var(--g-400);
}

/* =========================================================================
   Selected work (staggered grid)
   ========================================================================= */

.work__head { text-align: center; display: grid; justify-items: center; gap: clamp(calc(16px * var(--skala-mass)), 1.8vw, calc(24px * var(--skala-mass))); }
.work__head p { max-width: 52ch; }

.work__grid {
  margin-top: clamp(calc(46px * var(--skala-mass)), 6vw, calc(96px * var(--skala-mass)));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(calc(28px * var(--skala-mass)), 4vw, calc(72px * var(--skala-mass))) var(--gap);
}

/* Eigenes Ordnungsprinzip: obere Reihe dreispaltig im Hochformat,
   untere Reihe zweispaltig im Querformat. Keine vertikalen Versaetze. */
/* Alle Karten im gleichen Hochformat. Die freie Zelle unten rechts ist
   gesetzt, nicht uebrig: dort steht der Abschluss der Sektion. */
.case { grid-column: span 4; }
.case .case__media { aspect-ratio: 4 / 5; }

.case__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--g-100);
}
.case__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.case:hover .case__media img { transform: scale(1.045); }

.case__meta {
  display: grid;
  gap: calc(5px * var(--skala-mass));
  margin-top: calc(16px * var(--skala-mass));
}
/* Abschlusszelle unten rechts */
.case-end {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc(8px * var(--skala-mass));
}
.case-end p {
  font-size: calc(clamp(1.0625rem, 1.5vw, 1.375rem) * var(--skala));
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin-bottom: calc(22px * var(--skala-mass));
}
@media (max-width: 900px) { .case-end { grid-column: 1 / -1; padding-bottom: 0; } }
.case__cat {
  font-size: max(11px, calc(clamp(0.8125rem, 1vw, 1rem) * var(--skala-text)));
  letter-spacing: 0.06em;
  color: var(--g-500);
  text-transform: uppercase;
}

.work__all {
  margin-top: clamp(calc(48px * var(--skala-mass)), 6vw, calc(96px * var(--skala-mass)));
  border-top: 1px dashed var(--g-300);
  padding-top: clamp(calc(22px * var(--skala-mass)), 2.6vw, calc(34px * var(--skala-mass)));
  display: flex;
  justify-content: center;
}
.work__allLink {
  display: inline-flex;
  align-items: baseline;
  gap: calc(12px * var(--skala-mass));
  font-size: calc(clamp(1.25rem, 1.9vw, 1.75rem) * var(--skala));
  letter-spacing: -0.03em;
  transition: gap 0.4s var(--ease);
}
.work__allLink:hover { gap: calc(20px * var(--skala-mass)); }
.work__allLink .arrow { color: var(--red); }
.work__allLink sup { color: var(--red); font-family: var(--f-mono); font-size: 0.5em; }

@media (max-width: 980px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case, .case--a, .case--b, .case--c, .case--d, .case--e { grid-column: span 1; }
}
@media (max-width: 620px) {
  .work__grid { grid-template-columns: 1fr; gap: calc(34px * var(--skala-mass)); }
  .case--a .case__media, .case--b .case__media, .case--c .case__media { aspect-ratio: 16 / 10; }
}

/* =========================================================================
   Pricing
   ========================================================================= */

.pricing__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: calc(24px * var(--skala-mass));
  align-items: end;
}
@media (max-width: 760px) { .pricing__head { grid-template-columns: 1fr; align-items: start; } }

.toggle {
  display: inline-flex;
  padding: calc(5px * var(--skala-mass));
  background: var(--white);
  border-radius: var(--r-pill);
  position: relative;
  border: 1px solid var(--g-200);
}
.toggle button {
  position: relative;
  z-index: 1;
  padding: calc(10px * var(--skala-mass)) calc(22px * var(--skala-mass));
  border-radius: var(--r-pill);
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  font-weight: 500;
  color: var(--g-500);
  transition: color 0.35s var(--ease);
}
.toggle button.is-active { color: var(--white); }
.toggle__pill {
  position: absolute;
  top: calc(5px * var(--skala-mass)); bottom: calc(5px * var(--skala-mass)); left: calc(5px * var(--skala-mass));
  background: var(--ink-4);
  border-radius: var(--r-pill);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}

.plans {
  margin-top: clamp(calc(32px * var(--skala-mass)), 4vw, calc(56px * var(--skala-mass)));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: calc(520px * var(--skala-mass)); margin-inline: auto; } }

.plan {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(calc(24px * var(--skala-mass)), 2.4vw, calc(32px * var(--skala-mass)));
  display: flex;
  flex-direction: column;
  gap: calc(20px * var(--skala-mass));
  border: 1px solid transparent;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 18px 50px -24px rgba(0,0,0,0.22); }
.plan--popular { border-color: var(--red); }

.plan__top { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--skala-mass)); }
.plan__name { display: inline-flex; align-items: center; gap: calc(12px * var(--skala-mass)); }
.plan__icon {
  width: calc(34px * var(--skala-mass)); height: calc(34px * var(--skala-mass));
  border-radius: 50%;
  background: var(--g-100);
  display: grid; place-items: center;
  color: var(--red);
  flex: 0 0 auto;
}
.plan__icon svg { width: calc(19px * var(--skala-mass)); height: calc(19px * var(--skala-mass)); }
.plan__label { font-family: var(--f-mono); font-size: max(11px, calc(0.8125rem * var(--skala-text))); letter-spacing: 0.08em; text-transform: uppercase; }
.plan__tag {
  background: var(--red); color: #fff;
  font-family: var(--f-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em;
  padding: calc(6px * var(--skala-mass)) calc(11px * var(--skala-mass)); border-radius: calc(7px * var(--skala-mass));
  text-transform: uppercase;
}

.plan__price { font-size: calc(clamp(1.75rem, 2.4vw, 2rem) * var(--skala)); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.plan__price small { font-size: 0.5em; font-weight: 400; color: var(--g-500); letter-spacing: -0.01em; }
.plan__pos { font-size: max(11px, calc(0.9375rem * var(--skala-text))); color: var(--g-500); margin-top: -12px; min-height: 2.9em; }
.plans__fine {
  margin-top: clamp(calc(26px * var(--skala-mass)), 3vw, calc(40px * var(--skala-mass)));
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  line-height: 1.5;
  color: var(--g-500);
  text-align: center;
}

.plan__features { display: grid; }
.plan__features li {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--skala-mass));
  padding: calc(13px * var(--skala-mass)) 0;
  border-top: 1px solid var(--g-200);
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  letter-spacing: -0.006em;
}
.plan__features li svg { width: calc(17px * var(--skala-mass)); height: calc(17px * var(--skala-mass)); color: var(--ink); flex: 0 0 auto; opacity: 0.75; }
.plan .btn { justify-content: center; margin-top: auto; }
@media (max-width: 400px) { .plan .btn { white-space: normal; text-align: center; } }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(calc(28px * var(--skala-mass)), 5vw, calc(88px * var(--skala-mass)));
  align-items: start;
}
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

.faq__list { display: grid; gap: calc(12px * var(--skala-mass)); }

.acc {
  background: var(--g-100);
  border-radius: var(--r-row);
  overflow: hidden;
  transition: background-color 0.4s var(--ease);
}
.acc.is-open { background: var(--g-100); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20px * var(--skala-mass));
  padding: clamp(calc(20px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass))) clamp(calc(22px * var(--skala-mass)), 2.2vw, calc(30px * var(--skala-mass)));
  text-align: left;
  font-size: max(11px, calc(clamp(1rem, 1.3vw, 1.1875rem) * var(--skala-text)));
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--g-500);
  transition: color 0.35s var(--ease);
}
.acc:hover .acc__btn, .acc.is-open .acc__btn { color: var(--ink); }

.acc__icon { position: relative; width: calc(17px * var(--skala-mass)); height: calc(17px * var(--skala-mass)); flex: 0 0 auto; }
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.45s var(--ease), opacity 0.3s;
}
.acc__icon::before { top: 50%; left: 0; width: 100%; height: 1.8px; transform: translateY(-50%); }
.acc__icon::after  { left: 50%; top: 0; height: 100%; width: 1.8px; transform: translateX(-50%); }
.acc.is-open .acc__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panelInner { overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.55s; }
.acc.is-open .acc__panelInner { visibility: visible; transition-delay: 0s; }
.acc__panelInner p {
  padding: 0 clamp(calc(22px * var(--skala-mass)), 2.2vw, calc(30px * var(--skala-mass))) clamp(calc(20px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass)));
  color: var(--g-500);
  font-size: max(11px, calc(0.9688rem * var(--skala-text)));
  line-height: 1.62;
  max-width: 48ch;
  text-wrap: pretty;
}

/* =========================================================================
   Testimonials
   ========================================================================= */

.tst { color: #fff; }
.tst__inner { padding: clamp(calc(44px * var(--skala-mass)), 5.2vw, calc(80px * var(--skala-mass))) var(--inset) clamp(calc(36px * var(--skala-mass)), 4vw, calc(62px * var(--skala-mass))); }
.tst__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(calc(20px * var(--skala-mass)), 4vw, calc(64px * var(--skala-mass))); align-items: end; }
@media (max-width: 900px) { .tst__head { grid-template-columns: 1fr; align-items: start; } }
.tst__head .lead { color: rgba(255,255,255,0.72); font-size: max(11px, calc(0.9688rem * var(--skala-text))); line-height: 1.6; }

.tst__viewport { overflow: hidden; margin-top: clamp(calc(30px * var(--skala-mass)), 3.6vw, calc(50px * var(--skala-mass))); }
.tst__track {
  display: flex;
  gap: var(--gap);
  transition: transform 0.7s var(--ease);
}

.quote {
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  background: var(--ink-3);
  border-radius: var(--r-lg);
  padding: clamp(calc(20px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass)));
  display: flex;
  flex-direction: column;
  gap: clamp(calc(28px * var(--skala-mass)), 3.4vw, calc(52px * var(--skala-mass)));
  justify-content: space-between;   /* Name sitzt unten an, statt Raum uebrig zu lassen */
  min-height: calc(396px * var(--skala-mass));
}
@media (max-width: 1000px) { .quote { flex-basis: calc((100% - var(--gap)) / 2); min-height: calc(380px * var(--skala-mass)); } }
@media (max-width: 680px)  { .quote { flex-basis: 100%; min-height: 0; } }

.quote__top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(16px * var(--skala-mass)); }
.quote__idx {
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  letter-spacing: 0.1em;
  color: var(--red-hell);   /* --red kommt auf --ink-3 nur auf 2.66:1 */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  padding: calc(7px * var(--skala-mass)) calc(13px * var(--skala-mass));
  line-height: 1;
}
.quote__avatar { width: calc(62px * var(--skala-mass)); height: calc(74px * var(--skala-mass)); border-radius: calc(8px * var(--skala-mass)); object-fit: cover; background: var(--ink-4); }
.quote__brand { display: inline-flex; align-items: center; gap: calc(9px * var(--skala-mass)); font-weight: 600; letter-spacing: -0.02em; font-size: max(11px, calc(1.0625rem * var(--skala-text))); }
.quote__brand svg { width: calc(21px * var(--skala-mass)); height: calc(21px * var(--skala-mass)); }

.quote__text {
  color: var(--g-350);
  font-size: max(11px, calc(clamp(1rem, 1.25vw, 1.1875rem) * var(--skala-text)));
  line-height: 1.5;
  letter-spacing: -0.018em;
  flex: 1;
}
.quote__text .qm { color: var(--red-hell); margin-right: calc(6px * var(--skala-mass)); font-size: max(11px, calc(1.15em * var(--skala-text))); }
.quote__name { font-size: max(11px, calc(1.0625rem * var(--skala-text))); letter-spacing: -0.02em; }
.quote figcaption.quote__name {
  font-size: calc(clamp(1.125rem, 1.5vw, 1.375rem) * var(--skala));
  letter-spacing: -0.024em;
  line-height: 1.3;
  margin-top: -18px;
}
.quote figcaption.quote__name + .quote__text { margin-top: -22px; color: var(--g-350); }
.quote__role { font-size: max(11px, calc(0.9375rem * var(--skala-text))); color: var(--g-400); margin-top: 2px; }

.tst__controls { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(calc(24px * var(--skala-mass)), 2.6vw, calc(34px * var(--skala-mass))); }
.dots { display: flex; gap: calc(7px * var(--skala-mass)); }
.dots button {
  width: calc(8px * var(--skala-mass)); height: calc(8px * var(--skala-mass)); border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transition: background-color 0.3s, width 0.35s var(--ease);
}
.dots button.is-active { background: #fff; width: calc(20px * var(--skala-mass)); border-radius: calc(4px * var(--skala-mass)); }

.arrows { display: flex; gap: calc(10px * var(--skala-mass)); }
.arrows button {
  width: calc(46px * var(--skala-mass)); height: calc(46px * var(--skala-mass));
  border-radius: 50%;
  background: var(--ink-4);
  display: grid; place-items: center;
  color: #fff;
  transition: background-color 0.3s, transform 0.3s var(--ease), opacity 0.3s;
}
.arrows button:hover { background: var(--red); transform: translateY(-2px); }
.arrows button[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.arrows button[aria-disabled="true"]:hover { background: var(--ink-4); transform: none; }
.arrows svg { width: calc(17px * var(--skala-mass)); height: calc(17px * var(--skala-mass)); }

/* =========================================================================
   Journal
   ========================================================================= */

.journal__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: calc(24px * var(--skala-mass)); align-items: end; }
@media (max-width: 820px) { .journal__head { grid-template-columns: 1fr; align-items: start; gap: calc(20px * var(--skala-mass)); } }
.journal__head h2 .dim { color: var(--g-500); }

.posts {
  margin-top: clamp(calc(32px * var(--skala-mass)), 4vw, calc(56px * var(--skala-mass)));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 940px) { .posts { grid-template-columns: 1fr; } }

.post {
  background: var(--g-100);
  border-radius: var(--r-lg);
  padding: clamp(calc(20px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass)));
  display: flex;
  flex-direction: column;
  gap: clamp(calc(26px * var(--skala-mass)), 3.4vw, calc(46px * var(--skala-mass)));
  transition: background-color 0.45s var(--ease);
}
.post:hover { background: var(--g-200); }

.post__top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(16px * var(--skala-mass)); }
.post__cat { font-size: max(11px, calc(0.9375rem * var(--skala-text))); letter-spacing: -0.01em; }
.post__thumb { width: calc(178px * var(--skala-mass)); aspect-ratio: 1 / 1.02; border-radius: calc(10px * var(--skala-mass)); object-fit: cover; background: var(--g-200); flex: 0 0 auto; }
@media (max-width: 480px) { .post__thumb { width: calc(132px * var(--skala-mass)); } }

.post__foot { display: grid; gap: calc(12px * var(--skala-mass)); }
.post__meta { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--skala-mass)); font-size: max(11px, calc(0.9375rem * var(--skala-text))); color: var(--g-500); }
.post__meta .l { display: inline-flex; align-items: center; gap: calc(9px * var(--skala-mass)); }
.post__meta svg { width: calc(16px * var(--skala-mass)); height: calc(16px * var(--skala-mass)); }
.post__meta .dot { width: calc(7px * var(--skala-mass)); height: calc(7px * var(--skala-mass)); border-radius: 50%; background: var(--red); display: inline-block; }
.post h3 { transition: color 0.3s; }
.post p { font-size: max(11px, calc(0.9375rem * var(--skala-text))); color: var(--g-500); line-height: 1.55; }

/* =========================================================================
   CTA
   ========================================================================= */

/* Ohne feste Spalte waechst die implizite Rasterspalte auf ihren Inhalt statt
   auf den Container — bei 320px lief der Kontaktbereich dadurch 12px ueber. */
.cta {
  text-align: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(calc(22px * var(--skala-mass)), 2.6vw, calc(34px * var(--skala-mass)));
  border-top: 1px solid var(--g-200);
  padding-inline: var(--inset);
}
.contact {
  margin-top: clamp(calc(34px * var(--skala-mass)), 4vw, calc(56px * var(--skala-mass)));
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(calc(24px * var(--skala-mass)), 3vw, calc(48px * var(--skala-mass)));
  text-align: left;
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }

.contact__form {
  min-width: 0;
  background: var(--g-100);
  border-radius: var(--r-xl);
  padding: clamp(calc(22px * var(--skala-mass)), 2.6vw, calc(36px * var(--skala-mass)));
  display: grid;
  gap: calc(16px * var(--skala-mass));
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16px * var(--skala-mass)); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: calc(8px * var(--skala-mass)); margin: 0; min-width: 0; }
.field label {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-500);
}
.field label span { color: var(--red); }
/* Sichtbare Laengenangabe statt einer stillen Grenze: eine Grenze, die man
   erst beim Abschneiden bemerkt, ist schlimmer als keine. */
.field__hinweis {
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  line-height: 1.5;
  color: var(--g-500);
}
.field__hinweis a { color: var(--ink); border-bottom: 1px solid var(--g-300); }
.field__hinweis a:hover { color: var(--red); border-color: var(--red); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: max(11px, calc(0.9688rem * var(--skala-text)));
  width: 100%;
  min-width: 0;
  padding: calc(13px * var(--skala-mass)) calc(16px * var(--skala-mass));
  border: 1px solid var(--g-200);
  border-radius: calc(12px * var(--skala-mass));
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.25s;
}
.field textarea { resize: vertical; min-height: calc(118px * var(--skala-mass)); border-radius: calc(14px * var(--skala-mass)); }
/* Das Betriebssystem-Dropdown bringt eigenen Rahmen, Radius und Pfeil mit.
   Beides abschalten und den Pfeil selbst setzen, sonst steht es fremd
   neben den drei gestalteten Textfeldern. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(44px * var(--skala-mass));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235A5854' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--g-300); }
.field input::placeholder, .field textarea::placeholder { color: var(--g-400); }

.contact__submit { display: flex; align-items: center; gap: calc(16px * var(--skala-mass)); flex-wrap: wrap; }
.contact__note { font-size: max(11px, calc(0.9375rem * var(--skala-text))); color: var(--ink); min-height: 1.2em; }
.contact__note[data-state="error"] { color: var(--red); }
.contact__note[data-state="warte"] { color: var(--g-500); }
/* Honigfalle: ein Feld, das kein Mensch sieht und kein Mensch ausfuellt.
   Nicht display:none — das erkennen die einfachen Ausfuellprogramme und
   lassen es dann aus. So bleibt es fuer sie ein ganz normales Feld. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
[aria-invalid="true"] { border-color: var(--red) !important; }
.contact__legal { font-size: 0.75rem; line-height: 1.5; color: var(--g-500); }
.contact__legal a { border-bottom: 1px solid var(--g-300); }
.contact__legal a:hover { color: var(--red); border-color: var(--red); }
.contact__legal strong { color: var(--ink); font-weight: 500; }

.contact__side {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(calc(22px * var(--skala-mass)), 2.6vw, calc(36px * var(--skala-mass)));
  display: grid;
  gap: calc(24px * var(--skala-mass));
  align-content: start;
}
.contact__facts { display: grid; gap: calc(4px * var(--skala-mass)); margin: 0; }
.contact__facts dt {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g-400);
  margin-top: calc(16px * var(--skala-mass));
}
.contact__facts dt:first-child { margin-top: 0; }
.contact__facts dd { margin: 0; font-size: max(11px, calc(1.0625rem * var(--skala-text))); line-height: 1.5; letter-spacing: -0.015em; }
.contact__facts a { border-bottom: 1px solid rgba(255,255,255,0.35); transition: border-color 0.25s, color 0.25s; }
.contact__facts a:hover { color: var(--red); border-color: var(--red); }
.contact__promise { margin: 0; }

.cta h2 { max-width: 14ch; font-size: calc(clamp(2.6rem, 7.6vw, 6.75rem) * var(--skala)); line-height: 1.02; letter-spacing: -0.042em; font-weight: 500; }

/* =========================================================================
   Fussbereich
   Bewusst anders aufgebaut als die uebliche Agentur-Schablone: Claim und
   Kontakt oben, Links als eine durchlaufende Zeile, keine Riesen-Wortmarke.
   ========================================================================= */

.footer { color: #fff; }
.footer__inner { padding: clamp(calc(44px * var(--skala-mass)), 5vw, calc(76px * var(--skala-mass))) var(--inset) clamp(calc(24px * var(--skala-mass)), 2.6vw, calc(34px * var(--skala-mass))); }

.footer__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(calc(28px * var(--skala-mass)), 4vw, calc(64px * var(--skala-mass)));
  align-items: start;
  padding-bottom: clamp(calc(34px * var(--skala-mass)), 4vw, calc(56px * var(--skala-mass)));
}
@media (max-width: 820px) { .footer__lead { grid-template-columns: 1fr; gap: calc(28px * var(--skala-mass)); } }

.footer__claim {
  font-size: calc(clamp(2rem, 5.6vw, 5rem) * var(--skala));
  line-height: 1.04;
  letter-spacing: -0.038em;
  font-weight: 400;
}

.footer__reach { display: grid; gap: calc(14px * var(--skala-mass)); justify-items: start; align-content: start; }
@media (min-width: 821px) { .footer__reach { justify-items: end; text-align: right; } }

.footer__mail {
  font-size: calc(clamp(1.125rem, 1.7vw, 1.5rem) * var(--skala));
  letter-spacing: -0.02em;
  border-bottom: 1.5px solid var(--red);
  padding-bottom: calc(4px * var(--skala-mass));
  transition: color 0.3s;
}
.footer__mail:hover { color: var(--red); }
.footer__place { color: var(--g-400); line-height: 1.7; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--skala-mass)) clamp(calc(18px * var(--skala-mass)), 2.4vw, calc(34px * var(--skala-mass)));
  padding: clamp(calc(20px * var(--skala-mass)), 2.4vw, calc(28px * var(--skala-mass))) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.footer__nav a {
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.25s;
}
.footer__nav a:hover { color: var(--red); }

.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18px * var(--skala-mass));
  flex-wrap: wrap;
  padding-top: clamp(calc(20px * var(--skala-mass)), 2.4vw, calc(28px * var(--skala-mass)));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  color: rgba(255, 255, 255, 0.72);
}
/* Statt eines Newsletterfelds ohne Verteiler steht hier eine Aussage,
   die sich am Quelltext dieser Seite nachpruefen laesst. */
.footer__hint {
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  letter-spacing: 0.05em;
  color: var(--g-400);
  margin-left: auto;
  text-align: right;
}
@media (max-width: 620px) {
  .footer__base { flex-direction: column; align-items: flex-start; gap: calc(10px * var(--skala-mass)); }
  .footer__hint { margin-left: 0; text-align: left; }
}

/* =========================================================================
   Scroll reveal
   ========================================================================= */

/* Nur wenn JS läuft, wird versteckt — sonst ist die Seite sofort lesbar. */
[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(0.965); }
.js [data-reveal="scale"].is-in { transform: none; }

/* Word-by-word headline reveal */
.rv-line { display: block; overflow: hidden; }
.rv-word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease);
  transition-delay: var(--wd, 0s);
}
.rv-word span { display: inline-block; }
.is-in .rv-word { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .rv-word { transform: none !important; }
  .hero__media img { animation: none; transform: none; }
}

/* Skip-Link */
.skip {
  position: absolute;
  left: calc(12px * var(--skala-mass)); top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: calc(12px * var(--skala-mass)) calc(20px * var(--skala-mass));
  border-radius: var(--r-pill);
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  font-weight: 500;
  transition: top 0.25s var(--ease);
}
.skip:focus { top: calc(12px * var(--skala-mass)); }

/* Utility */
.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;
}


/* =========================================================================
   Rechtstexte
   ========================================================================= */

.legal-head { height: clamp(calc(86px * var(--skala-mass)), 9vw, calc(120px * var(--skala-mass))); }
/* Auf Unterseiten hat die Leiste immer ihren dunklen Grund */
.legal-head .nav { background: rgba(22, 40, 58, 0.95); }
.legal-head .nav__cta { display: inline-flex; }

.prose { max-width: 74ch; }
.prose > .badge { margin-bottom: calc(22px * var(--skala-mass)); }
.prose h1 { margin-bottom: clamp(calc(24px * var(--skala-mass)), 3vw, calc(40px * var(--skala-mass))); }
.prose h2 { margin: clamp(calc(30px * var(--skala-mass)), 3.4vw, calc(46px * var(--skala-mass))) 0 calc(12px * var(--skala-mass)); }
.prose p { color: var(--g-500); line-height: 1.68; margin-bottom: calc(14px * var(--skala-mass)); max-width: 68ch; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--g-300); }
.prose a:hover { color: var(--red); border-color: var(--red); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose__note {
  background: var(--g-100);
  border-left: 3px solid var(--red);
  border-radius: 0 calc(12px * var(--skala-mass)) calc(12px * var(--skala-mass)) 0;
  padding: calc(16px * var(--skala-mass)) calc(20px * var(--skala-mass));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
}
/* Fassungsangabe unter Impressum und Datenschutz. Ohne sie laesst sich nicht
   belegen, welcher Stand galt, als jemand die Seite gelesen hat. */
.prose__stand {
  margin-top: clamp(calc(30px * var(--skala-mass)), 3.2vw, calc(46px * var(--skala-mass)));
  padding-top: calc(16px * var(--skala-mass));
  border-top: 1px solid var(--g-200);
  color: var(--g-400);
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  letter-spacing: 0.04em;
}
.prose__back { margin-top: clamp(calc(38px * var(--skala-mass)), 4vw, calc(58px * var(--skala-mass))); }
.prose__back a { border-bottom-color: var(--red); }

/* =========================================================================
   Team
   Runde Porträts, 128 px. Der Kreisanschnitt entfernt 21,5 % Fläche — genau die
   Ecken, also den Hintergrund. Das ist die einzige Massnahme, die die vier sehr
   unterschiedlichen Aufnahmeorte wirklich angleicht statt sie nur umzufärben.
   128 x 2 = 256 px entspricht exakt dem, was in den Quelldateien an Information steckt.
   ========================================================================= */

.team__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(calc(24px * var(--skala-mass)), 4vw, calc(72px * var(--skala-mass)));
  align-items: end;
}
@media (max-width: 900px) { .team__head { grid-template-columns: 1fr; align-items: start; gap: calc(20px * var(--skala-mass)); } }

.team__grid {
  margin-top: clamp(calc(38px * var(--skala-mass)), 4.6vw, calc(68px * var(--skala-mass)));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: calc(48px * var(--skala-mass));
}
@media (max-width: 940px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.member {
  min-width: 0;
  /* Haarlinie über die volle Spaltenbreite — sie trägt das Spaltenmass,
     der Kreis sitzt darunter. Dieselbe Linie wie bei den Kennzahlen. */
  border-top: 1px solid var(--g-200);
  padding-top: calc(22px * var(--skala-mass));
}

.member__photo {
  position: relative;
  width: calc(128px * var(--skala-mass));
  height: calc(128px * var(--skala-mass));
  border-radius: 50%;
  overflow: hidden;
  background: var(--g-100);
  display: grid;
  place-items: center;
  margin: 0 0 calc(18px * var(--skala-mass));
}

.member__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  /* Alexanders Hintergrund liegt nur knapp unter Seitenweiss — ohne Kante
     löst sich die Scheibe auf */
  outline: 1px solid rgba(22, 40, 58, 0.14);
  outline-offset: -1px;
  transition: transform 0.7s var(--ease);
}
.member:hover .member__photo img { transform: scale(1.04); }

/* Monogramm, falls ein Foto fehlt */
.member__photo::before {
  content: attr(data-initials);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--g-400);
  line-height: 1;
}
.member__photo.is-empty { background: radial-gradient(120% 120% at 30% 0%, #fff 0%, var(--g-100) 55%, var(--g-200) 100%); }

.member__name {
  font-size: calc(clamp(1.0625rem, 1.35vw, 1.25rem) * var(--skala));
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.25;
}
.member__role {
  margin-top: calc(5px * var(--skala-mass));
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1.45;
  min-height: 2.9em;
}
.member__note {
  margin-top: calc(12px * var(--skala-mass));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  line-height: 1.55;
  color: var(--g-500);
}

/* Schmale Screens: kompakte Zeile, Kreis links */
@media (max-width: 560px) {
  .team__grid { grid-template-columns: 1fr; row-gap: calc(26px * var(--skala-mass)); }
  .member {
    display: grid;
    grid-template-columns: calc(96px * var(--skala-mass)) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: calc(18px * var(--skala-mass));
    align-items: start;
  }
  .member__photo { grid-column: 1; grid-row: 1 / -1; width: calc(96px * var(--skala-mass)); height: calc(96px * var(--skala-mass)); margin: 0; }
  .member__photo::before { font-size: 1.375rem; }
  .member__name { grid-column: 2; grid-row: 1; }
  .member__role { grid-column: 2; grid-row: 2; min-height: 0; }
  .member__note { grid-column: 2; grid-row: 3; margin-top: calc(9px * var(--skala-mass)); }
}


/* =========================================================================
   Leistungs-Unterseiten
   Eigene Bausteine, damit die Startseite unangetastet bleibt. Alles baut
   auf den bestehenden Tokens auf — keine neuen Farben, keine neuen Radien.
   ========================================================================= */

/* --- Brotkrumen --- */
.krumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10px * var(--skala-mass));
  /* Fest, nicht skaliert: sonst wird die Spalte auf einem breiteren
     Bildschirm ABSOLUT schmaler statt gleich zu bleiben. 1180px ist die
     Breite, die der 75-Prozent-Ansicht entspricht (dort 1134 physische
     Pixel), und sie gilt ab 1180px aufwaerts unveraendert. */
  max-width: 1180px;
  margin-inline: auto;
  /* Die Navigation liegt fest oben und endet je nach Breite bei 62 bis 104px.
     Ohne diesen Abstand verschwinden die Brotkrumen darunter. */
  padding: clamp(calc(78px * var(--skala-mass)), 7.4vw, calc(128px * var(--skala-mass))) var(--inset) 0;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--g-500);
}
.krumen a { border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.krumen a:hover { border-bottom-color: var(--g-400); }
/* Das Trennzeichen stand auf --g-300 und kam damit auf 1.47:1 — sichtbar war
   es praktisch nicht, die Brotkrumen lasen sich als ein Wort. */
.krumen span[aria-hidden] { color: var(--g-500); }
.krumen [aria-current] { color: var(--ink); }

/* --- Kopfbereich der Unterseite --- */
.lp-kopf { margin-top: clamp(calc(18px * var(--skala-mass)), 2vw, calc(28px * var(--skala-mass))); }
.lp-kopf__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(calc(28px * var(--skala-mass)), 4vw, calc(64px * var(--skala-mass)));
  align-items: center;
  padding: clamp(calc(40px * var(--skala-mass)), 5vw, calc(84px * var(--skala-mass))) var(--inset);
  /* Fest, nicht skaliert: sonst wird die Spalte auf einem breiteren
     Bildschirm ABSOLUT schmaler statt gleich zu bleiben. 1180px ist die
     Breite, die der 75-Prozent-Ansicht entspricht (dort 1134 physische
     Pixel), und sie gilt ab 1180px aufwaerts unveraendert. */
  max-width: 1180px;
  margin-inline: auto;
}
@media (max-width: 900px) { .lp-kopf__inner { grid-template-columns: 1fr; gap: calc(30px * var(--skala-mass)); } }

.lp-kicker { color: var(--red-hell); margin-bottom: clamp(calc(16px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass))); }
.lp-h1 { max-width: 16ch; }
.lp-h1__zwei { color: rgba(255, 255, 255, 0.62); }
.lp-lead {
  margin-top: clamp(calc(20px * var(--skala-mass)), 2.4vw, calc(30px * var(--skala-mass)));
  max-width: 52ch;
  font-size: max(11px, calc(clamp(1rem, 1.15vw, 1.125rem) * var(--skala-text)));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.lp-kopf__aktionen { display: flex; flex-wrap: wrap; gap: calc(12px * var(--skala-mass)); margin-top: clamp(calc(26px * var(--skala-mass)), 3vw, calc(38px * var(--skala-mass))); }

.lp-kopf__bild { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 11; margin: 0; }
.lp-kopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Ausgangslage --- */
.lp-lage .split__aside { justify-self: stretch; }
.lp-lage__liste { margin-top: clamp(calc(20px * var(--skala-mass)), 2.4vw, calc(30px * var(--skala-mass))); display: grid; gap: calc(14px * var(--skala-mass)); }
.lp-lage__liste li {
  position: relative;
  padding-left: calc(26px * var(--skala-mass));
  line-height: 1.6;
  color: var(--g-500);
}
.lp-lage__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: calc(12px * var(--skala-mass)); height: 1px;
  background: var(--red);
}

/* --- Leistungsumfang --- */
.lp-umfang__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(calc(34px * var(--skala-mass)), 4vw, calc(56px * var(--skala-mass)));
  list-style: none;
}
@media (max-width: 1000px) { .lp-umfang__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .lp-umfang__raster { grid-template-columns: 1fr; } }

.lp-karte {
  border-top: 1px solid var(--g-200);
  padding-top: calc(20px * var(--skala-mass));
  display: grid;
  align-content: start;
  gap: calc(8px * var(--skala-mass));
}
.lp-karte__nr { color: var(--red); font-size: 0.75rem; }
.lp-karte__titel { font-size: calc(clamp(1.0625rem, 1.35vw, 1.3125rem) * var(--skala)); letter-spacing: -0.022em; font-weight: 500; }
.lp-karte p { color: var(--g-500); line-height: 1.6; font-size: max(11px, calc(0.9688rem * var(--skala-text))); }

/* --- Ablauf --- */
.lp-ablauf { color: #fff; margin-block: clamp(calc(18px * var(--skala-mass)), 2vw, calc(28px * var(--skala-mass))); }
.lp-ablauf__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(calc(34px * var(--skala-mass)), 4vw, calc(56px * var(--skala-mass)));
  list-style: none;
}
@media (max-width: 1000px) { .lp-ablauf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lp-ablauf__liste { grid-template-columns: 1fr; } }

.lp-schritt {
  background: var(--ink-3);
  border-radius: var(--r-lg);
  padding: clamp(calc(20px * var(--skala-mass)), 2vw, calc(28px * var(--skala-mass)));
  display: grid;
  align-content: start;
  gap: calc(10px * var(--skala-mass));
}
.lp-schritt__zeit { color: var(--red-hell); font-size: 0.6875rem; }
.lp-schritt__titel { font-size: calc(clamp(1.0625rem, 1.3vw, 1.25rem) * var(--skala)); letter-spacing: -0.022em; font-weight: 500; }
.lp-schritt p { color: rgba(255, 255, 255, 0.76); line-height: 1.6; font-size: max(11px, calc(0.9375rem * var(--skala-text))); }

/* --- Werkzeuge --- */
.lp-werkzeuge .split__aside { justify-self: stretch; }
.lp-chips { display: flex; flex-wrap: wrap; gap: calc(10px * var(--skala-mass)); list-style: none; }
.lp-chips li {
  border: 1px solid var(--g-200);
  border-radius: var(--r-pill);
  padding: calc(8px * var(--skala-mass)) calc(16px * var(--skala-mass));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  color: var(--ink);
  background: var(--white);
}
.lp-marken { margin-top: calc(20px * var(--skala-mass)); font-size: 0.75rem; line-height: 1.6; color: var(--g-500); max-width: 62ch; }

/* --- Offen gesagt --- */
.lp-offen__block {
  border-left: 2px solid var(--red);
  padding: clamp(calc(18px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass))) 0 clamp(calc(18px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass))) clamp(calc(20px * var(--skala-mass)), 2.4vw, calc(32px * var(--skala-mass)));
  max-width: 74ch;
}
.lp-offen__label { color: var(--red); margin-bottom: calc(10px * var(--skala-mass)); }
.lp-offen__text { font-size: calc(clamp(1.0625rem, 1.5vw, 1.375rem) * var(--skala)); line-height: 1.5; letter-spacing: -0.015em; }

/* --- Fragen --- */
.lp-faq .split { align-items: start; }
.lp-faq .split__aside { justify-self: stretch; }

/* --- Verwandte Leistungen --- */
.lp-weiter__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(calc(30px * var(--skala-mass)), 3.6vw, calc(48px * var(--skala-mass)));
  list-style: none;
}
@media (max-width: 820px) { .lp-weiter__liste { grid-template-columns: 1fr; } }
.lp-weiter__liste a {
  display: grid;
  gap: calc(8px * var(--skala-mass));
  border-top: 1px solid var(--g-200);
  padding-top: calc(20px * var(--skala-mass));
  transition: border-color 0.3s var(--ease);
}
.lp-weiter__liste a:hover { border-top-color: var(--red); }
.lp-weiter__titel { font-size: calc(clamp(1.125rem, 1.5vw, 1.4375rem) * var(--skala)); letter-spacing: -0.024em; font-weight: 500; }
.lp-weiter__text { color: var(--g-500); font-size: max(11px, calc(0.9375rem * var(--skala-text))); line-height: 1.55; }
.lp-weiter__pfeil { color: var(--red); font-size: max(11px, calc(1.125rem * var(--skala-text))); }

/* --- Abschluss --- */
.lp-schluss__block {
  display: grid;
  justify-items: start;
  gap: clamp(calc(18px * var(--skala-mass)), 2.2vw, calc(28px * var(--skala-mass)));
  border-top: 1px solid var(--g-200);
  padding-top: clamp(calc(30px * var(--skala-mass)), 3.6vw, calc(48px * var(--skala-mass)));
}
.lp-schluss__satz {
  /* Die Abschlusssaetze sind unterschiedlich lang. 32ch haelt auch den
     laengsten auf vier bis fuenf Zeilen statt auf neun. */
  font-size: calc(clamp(1.3125rem, 2.5vw, 2rem) * var(--skala));
  line-height: 1.22;
  letter-spacing: -0.028em;
  max-width: 32ch;
}
.lp-schluss__daten { display: flex; flex-wrap: wrap; gap: calc(8px * var(--skala-mass)) calc(26px * var(--skala-mass)); color: var(--g-500); }

/* --- Uebersichtsseite --- */
.lp-ueberkopf__h1 { margin-top: clamp(calc(20px * var(--skala-mass)), 2.4vw, calc(30px * var(--skala-mass))); max-width: 15ch; }
.lp-ueberkopf__lead { margin-top: clamp(calc(20px * var(--skala-mass)), 2.4vw, calc(28px * var(--skala-mass))); max-width: 60ch; }

/* Uebersicht: Kopf und Kartenliste gehoeren zusammen, deshalb hier nur
   einmal der Sektionsabstand statt zweimal. */
.lp-ueberkopf { padding-bottom: clamp(calc(30px * var(--skala-mass)), 3.6vw, calc(52px * var(--skala-mass))); }
.lp-liste { padding-top: 0; }

.lp-liste__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(calc(28px * var(--skala-mass)), 3vw, calc(44px * var(--skala-mass))) var(--gap);
  list-style: none;
}
@media (max-width: 1000px) { .lp-liste__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .lp-liste__raster { grid-template-columns: 1fr; } }

.lp-eintrag a { display: grid; gap: calc(10px * var(--skala-mass)); }
.lp-eintrag__bild {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  margin: 0 0 calc(8px * var(--skala-mass));
  background: var(--g-100);
}
.lp-eintrag__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.lp-eintrag a:hover .lp-eintrag__bild img { transform: scale(1.045); }
.lp-eintrag__nr { color: var(--red); font-size: 0.75rem; }
.lp-eintrag__titel { font-size: calc(clamp(1.25rem, 1.8vw, 1.625rem) * var(--skala)); letter-spacing: -0.026em; font-weight: 500; }
.lp-eintrag__text { color: var(--g-500); line-height: 1.6; font-size: max(11px, calc(0.9688rem * var(--skala-text))); }
.lp-eintrag__mehr { color: var(--red); font-size: max(11px, calc(0.9375rem * var(--skala-text))); font-weight: 500; }


/* Verweise von der Startseite auf die Leistungs-Unterseiten.
   Beide sitzen im dunklen Leistungs-Panel, deshalb der helle Rotton. */
.srv__mehr {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--skala-mass));
  margin-top: calc(18px * var(--skala-mass));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  font-weight: 500;
  color: var(--red-hell);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.srv__mehr:hover { border-bottom-color: var(--red-hell); }

.services__alle {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--skala-mass));
  margin-top: calc(20px * var(--skala-mass));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  font-weight: 500;
  color: var(--red-hell);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.services__alle:hover { border-bottom-color: var(--red-hell); }

/* Dauerhaft sichtbarer Pfeil: der Titel soll ohne Ausprobieren erkennbar
   auf die Unterseite fuehren. */
.srv__pfeil {
  display: inline-block;
  margin-left: 0.34em;
  font-size: 0.42em;
  vertical-align: 0.34em;
  color: var(--red-hell);
  opacity: 0.75;
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}
.srv__name:hover .srv__pfeil,
.srv__name:focus-visible .srv__pfeil { opacity: 1; transform: translateX(4px); }

/* =========================================================================
   Referenzen
   Zwei Kartenarten: Websites mit einem breiten Vorschaubild, Apps mit zwei
   Telefonbildern, die auf einer getoenten Flaeche stehen. Bewusst getrennte
   Raster — unterschiedliche Seitenverhaeltnisse im selben Raster waren der
   Fehler, den wir bei den Arbeitsfeldern behoben haben.
   ========================================================================= */

.ref__h2 { margin-top: calc(26px * var(--skala-mass)); max-width: 22ch; }
.ref__lead { margin-top: clamp(calc(18px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass))); max-width: 62ch; }

.ref__gruppe { margin-top: clamp(calc(44px * var(--skala-mass)), 5.4vw, calc(84px * var(--skala-mass))); }

.ref__kopf {
  display: flex;
  align-items: baseline;
  gap: calc(16px * var(--skala-mass));
  flex-wrap: wrap;
  border-top: 1px solid var(--g-200);
  padding-top: calc(18px * var(--skala-mass));
  margin-bottom: clamp(calc(24px * var(--skala-mass)), 3vw, calc(38px * var(--skala-mass)));
}
.ref__gruppeTitel {
  font-size: calc(clamp(1.375rem, 2.1vw, 1.875rem) * var(--skala));
  letter-spacing: -0.028em;
  font-weight: 500;
}
.ref__gruppeText { color: var(--g-500); font-size: max(11px, calc(0.9688rem * var(--skala-text))); }
.ref__zahl { margin-left: auto; color: var(--red); font-size: 0.75rem; }
@media (max-width: 560px) { .ref__zahl { margin-left: 0; } }

.ref__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(calc(26px * var(--skala-mass)), 3vw, calc(42px * var(--skala-mass))) var(--gap);
  list-style: none;
}
@media (max-width: 1000px) { .ref__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ref__raster { grid-template-columns: 1fr; } }

.ref__karte { display: grid; align-content: start; gap: calc(7px * var(--skala-mass)); }

/* --- Websites --- */
.ref__bild--web {
  aspect-ratio: 2 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0 0 calc(12px * var(--skala-mass));
  background: var(--g-100);
  border: 1px solid var(--g-200);
}
.ref__bild--web img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 1s var(--ease);
}
.ref__karte:hover .ref__bild--web img { transform: scale(1.035); }

/* --- Apps: zwei Telefone, unten aus dem Rahmen laufend --- */
.ref__bild--app {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(calc(8px * var(--skala-mass)), 1vw, calc(14px * var(--skala-mass)));
  aspect-ratio: 4 / 3;
  padding: clamp(calc(20px * var(--skala-mass)), 2.4vw, calc(30px * var(--skala-mass))) clamp(calc(12px * var(--skala-mass)), 1.6vw, calc(20px * var(--skala-mass))) 0;
  margin: 0 0 calc(12px * var(--skala-mass));
  background: var(--g-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ref__bild--app img {
  width: 42%;
  height: auto;
  border-radius: calc(14px * var(--skala-mass));
  box-shadow: 0 22px 44px -20px rgba(22, 40, 58, 0.5);
  outline: 1px solid rgba(22, 40, 58, 0.1);
  outline-offset: -1px;
  transition: transform 0.9s var(--ease);
}
.ref__karte:hover .ref__bild--app img:first-child { transform: translateY(-6px) rotate(-1.2deg); }
.ref__karte:hover .ref__bild--app img:last-child  { transform: translateY(-6px) rotate(1.2deg); }

/* --- Text auf beiden Kartenarten --- */
.ref__branche { color: var(--red); font-size: 0.6875rem; }
.ref__titel {
  font-size: calc(clamp(1.0625rem, 1.4vw, 1.3125rem) * var(--skala));
  letter-spacing: -0.024em;
  font-weight: 500;
}
.ref__karte p { color: var(--g-500); line-height: 1.6; font-size: max(11px, calc(0.9375rem * var(--skala-text))); }
.ref__rolle {
  margin-top: calc(5px * var(--skala-mass));
  padding-top: calc(9px * var(--skala-mass));
  border-top: 1px solid var(--g-200);
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  color: var(--g-500);
}

/* --- Bereich ohne Referenzen: ehrlich statt leer --- */
.ref__gruppe--leer .ref__leer {
  /* Weiss statt Grau: das Rot der Verweise erreicht auf --g-100 nur 4.36:1 */
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  padding: clamp(calc(24px * var(--skala-mass)), 3vw, calc(40px * var(--skala-mass)));
  display: grid;
  gap: calc(18px * var(--skala-mass));
  max-width: 78ch;
}
.ref__leer p { line-height: 1.65; color: var(--ink); }
.ref__leerLinks { display: flex; flex-wrap: wrap; gap: calc(10px * var(--skala-mass)) calc(26px * var(--skala-mass)); list-style: none; }
.ref__leerLinks a {
  font-weight: 500;
  color: var(--red);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.ref__leerLinks a:hover { border-bottom-color: var(--red); }

.ref__hinweis {
  margin-top: clamp(calc(34px * var(--skala-mass)), 4vw, calc(56px * var(--skala-mass)));
  padding-top: calc(18px * var(--skala-mass));
  border-top: 1px solid var(--g-200);
  font-size: max(11px, calc(0.8125rem * var(--skala-text)));
  line-height: 1.6;
  color: var(--g-500);
  max-width: 86ch;
}

.ref__mehr { margin-top: clamp(calc(30px * var(--skala-mass)), 3.6vw, calc(48px * var(--skala-mass))); }
.ref__mehr a {
  display: inline-flex; align-items: center; gap: calc(10px * var(--skala-mass));
  font-size: max(11px, calc(clamp(1rem, 1.3vw, 1.1875rem) * var(--skala-text))); font-weight: 500;
  color: var(--red);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.ref__mehr a:hover { border-bottom-color: var(--red); }

/* --- Vorspann in den Rechtstexten --- */
.prose__lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
  margin-bottom: clamp(calc(26px * var(--skala-mass)), 3vw, calc(40px * var(--skala-mass))) !important;
  max-width: 56ch !important;
}
.prose ul {
  margin: 0 0 calc(16px * var(--skala-mass));
  padding-left: 0;
  list-style: none;
  max-width: 68ch;
}
.prose ul li {
  position: relative;
  padding-left: calc(24px * var(--skala-mass));
  margin-bottom: calc(10px * var(--skala-mass));
  color: var(--g-500);
  line-height: 1.68;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: calc(11px * var(--skala-mass)); height: 1px;
  background: var(--red);
}

/* =========================================================================
   WhatsApp-Knopf
   Ein reiner Verweis, kein Widget: es wird nichts von Meta geladen und nichts
   uebermittelt, solange niemand klickt. Deshalb bleibt die Aussage
   « nichts von fremden Servern » in der Datenschutzerklaerung wahr.
   ========================================================================= */
.wa {
  position: fixed;
  right: clamp(calc(16px * var(--skala-mass)), 2.4vw, calc(30px * var(--skala-mass)));
  bottom: clamp(calc(16px * var(--skala-mass)), 2.4vw, calc(30px * var(--skala-mass)));
  z-index: 55;                      /* unter der Navigation (60) und dem Menue */
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: calc(58px * var(--skala-mass));
  padding: 0 calc(17px * var(--skala-mass));
  border-radius: var(--r-pill);
  /* Im Ruhezustand die Markenfarbe mit weisser Glyphe — das offizielle
     Erscheinungsbild, das jeder sofort erkennt. Sobald die Beschriftung
     ausfaehrt, wird der Grund dunkler: weisse Schrift auf #25D366 erreicht
     nur 1.98:1, auf dem dunklen Gruen 6.5:1. */
  background: #25D366;
  color: #fff;
  transition: gap 0.4s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease), background-color 0.35s var(--ease);
  box-shadow: 0 14px 34px -10px rgba(18, 92, 52, 0.55), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: gap 0.4s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.wa:hover,
.wa:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(18, 92, 52, 0.6);
}
@media (hover: hover) and (min-width: 700px) {
  /* Nur wenn Text sichtbar wird, muss der Grund dunkler sein. */
  .wa:hover, .wa:focus-visible { background: #0E6B45; }
}
.wa:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.wa__glyph { width: calc(26px * var(--skala-mass)); height: calc(26px * var(--skala-mass)); flex: 0 0 auto; position: relative; z-index: 1; }

/* Statuspunkt: gruen waehrend der Geschaeftszeiten, bernstein ausserhalb.
   Ohne Angabe (Zeitzone nicht ermittelbar) erscheint er gar nicht. */
/* Weisse Scheibe mit farbigem Kern. Ein gruener Punkt auf gruenem Knopf
   waere unsichtbar — nachgemessen, nicht vermutet. */
.wa__punkt {
  position: absolute;
  top: calc(8px * var(--skala-mass));
  right: calc(8px * var(--skala-mass));
  width: calc(15px * var(--skala-mass));
  height: calc(15px * var(--skala-mass));
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.wa__punkt::before {
  content: "";
  width: calc(7px * var(--skala-mass));
  height: calc(7px * var(--skala-mass));
  border-radius: 50%;
  background: var(--g-400);
}
/* Der Punkt erscheint nur, wenn wirklich jemand da ist. Ein bernsteinfarbener
   Punkt ausserhalb der Zeiten liest sich wie eine Stoerung, nicht wie
   Feierabend — also zeigen wir dann gar nichts. */
.wa[data-status="offen"] .wa__punkt { opacity: 1; }
.wa[data-status="offen"] .wa__punkt::before { background: #12A150; }

/* Ruhiger Puls, nur waehrend der Erreichbarkeit. Zwei versetzte Ringe wirken
   wie ein Signal, ein einzelner wie ein Fehler. */
.wa__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.wa[data-status="offen"] .wa__ring::before,
.wa[data-status="offen"] .wa__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25D366;
  opacity: 0;
  animation: waPuls 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.wa[data-status="offen"] .wa__ring::after { animation-delay: 1.4s; }

@keyframes waPuls {
  0%   { transform: scale(1);    opacity: 0.34; }
  70%  { transform: scale(1.3);  opacity: 0; }
  100% { transform: scale(1.3);  opacity: 0; }
}

/* Die Beschriftung faehrt erst bei Zeigergeraeten aus. Auf dem Telefon bleibt
   der Knopf ein Kreis, damit er nichts verdeckt. */
.wa__text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  font-weight: 500;
  opacity: 0;
  transition: max-width 0.45s var(--ease), opacity 0.3s var(--ease), margin-left 0.45s var(--ease);
}
@media (hover: hover) and (min-width: 700px) {
  .wa:hover .wa__text,
  .wa:focus-visible .wa__text { max-width: calc(220px * var(--skala-mass)); opacity: 1; margin-left: calc(11px * var(--skala-mass)); }
}

/* Solange das mobile Menue offen ist, hat der Knopf nichts zu suchen. */
body.menu-open .wa { opacity: 0; pointer-events: none; }

/* Im Kopfbereich stehen unten rechts bereits zwei Knoepfe. Solange er sichtbar
   ist, haelt sich der WhatsApp-Knopf zurueck. Nur mit JavaScript — ohne ist er
   durchgehend da. */
.js .wa {
  transition: gap 0.4s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease), opacity 0.35s var(--ease);
}
.js .wa.is-hidden {
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wa, .wa__text { transition: none; }
  .wa:hover { transform: none; }
  .wa__ring::before, .wa__ring::after { animation: none !important; }
}

@media print { .wa { display: none; } }

/* --- Ausweg, wenn kein Mailprogramm eingerichtet ist --------------------- */
.ausweg {
  margin-top: calc(22px * var(--skala-mass));
  padding: clamp(calc(18px * var(--skala-mass)), 2vw, calc(26px * var(--skala-mass)));
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  display: grid;
  gap: calc(14px * var(--skala-mass));
}
.ausweg__titel { font-size: max(11px, calc(0.9375rem * var(--skala-text))); color: var(--g-500); line-height: 1.6; }
.ausweg__titel a { color: var(--ink); border-bottom: 1px solid var(--g-300); }
.ausweg__titel a:hover { color: var(--red); border-color: var(--red); }
.ausweg__text {
  width: 100%;
  font: inherit;
  font-size: max(11px, calc(0.875rem * var(--skala-text)));
  line-height: 1.6;
  padding: calc(14px * var(--skala-mass)) calc(16px * var(--skala-mass));
  border: 1px solid var(--g-200);
  border-radius: calc(12px * var(--skala-mass));
  background: var(--g-50);
  color: var(--ink);
  resize: vertical;
}
.ausweg__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--skala-mass)) calc(20px * var(--skala-mass)); }
.ausweg__knopf {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  padding: calc(11px * var(--skala-mass)) calc(22px * var(--skala-mass));
  font-size: max(11px, calc(0.9375rem * var(--skala-text)));
  font-weight: 500;
}
.ausweg__knopf:hover { background: var(--ink-4); }
.ausweg__zweit { font-size: max(11px, calc(0.9375rem * var(--skala-text))); color: var(--red); border-bottom: 1px solid transparent; }
.ausweg__zweit:hover { border-bottom-color: var(--red); }

/* Die Arbeitsfeld-Karten fuehren auf die passende Leistungsseite. Vorher sahen
   sie anklickbar aus und waren es nicht — der haeufigste Grund, warum Leute
   eine Seite wieder verlassen. */
.case__link { display: grid; gap: 0; }
.case__mehr {
  margin-top: calc(10px * var(--skala-mass));
  font-size: max(11px, calc(0.875rem * var(--skala-text)));
  font-weight: 500;
  color: var(--red);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.case__link:hover .case__mehr,
.case__link:focus-visible .case__mehr { opacity: 1; transform: none; }
.case__link:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; border-radius: var(--r-lg); }
@media (hover: none) {
  /* Ohne Zeigergeraet gibt es kein Hover — dann steht der Hinweis dauerhaft. */
  .case__mehr { opacity: 1; transform: none; }
}