/* ────────────────────────────────────────────
   Proseti · Design System
   Clean, editorial, mit Tessiner Akzenten
   ──────────────────────────────────────────── */

:root {
  --ink: #0b0b0f;
  --ink-soft: #3a3a40;
  --muted: #6e6e76;
  --muted-light: #9a9aa2;
  --line: #e9e9ee;
  --paper: #ffffff;
  --card: #f5f5f7;
  --card-hover: #efeff2;
  --card-strong: #ebebeb;
  --red: #da291c;
  --red-deep: #b71f14;
  --ticino-blue: #005eb8;
  --green: #12a150;

  --dark-bg: #0b0b0f;
  --dark-card: #16161c;
  --dark-line: #26262e;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --track-tight: -0.03em;
  --track-body: -0.012em;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(11, 11, 15, 0.04), 0 12px 32px rgba(11, 11, 15, 0.06);
  --shadow-float: 0 2px 6px rgba(11, 11, 15, 0.05), 0 24px 64px rgba(11, 11, 15, 0.12);

  --max-width: 1200px;
  --header-h: 72px;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
  --transition: 0.22s var(--ease);
}

/* ─── Reset ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: var(--track-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button {
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

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

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform 0.2s;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--dark :focus-visible {
  outline-color: #fff;
}

/* ─── Layout ─── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--narrow {
  max-width: 820px;
}

.section {
  padding-block: clamp(4rem, 7vw, 6.25rem);
}

.section--gray {
  background: #fafafc;
  border-block: 1px solid var(--line);
}

.section--gray + .section--gray {
  border-top: none;
}

.section--dark {
  background: var(--dark-bg);
  color: #fff;
}

.section__header {
  max-width: 52rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.5rem);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.section__header--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  max-width: none;
}

.section__header--row > div {
  max-width: 42rem;
}

.section__title {
  font-size: clamp(1.9rem, 4.2vw, 3.375rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.12;
  text-wrap: balance;
}

.section__title--on-dark {
  color: #fff;
}

.section__subtitle {
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.34;
  color: var(--muted);
}

/* Figma 12:8730: der Lead unter einer zentrierten Headline ist auf 772 px
   begrenzt, sonst läuft er über die ganze Sektionsbreite. */
.section__header--center .section__subtitle {
  max-width: 48.25rem;
  margin-inline: auto;
}

/* Sublines nach Figma 12:8988: 20 px Medium, Schwarz auf 50 Prozent,
   ohne Kapitälchen, ohne Rot und ohne Nummer. */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--font);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.34;
  color: rgba(11, 11, 15, 0.5);
}

/* ─── Ticino flag ─── */
.ticino-flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--ticino-blue) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 11, 15, 0.05);
}

.ticino-flag--sm {
  width: 17px;
  height: 12px;
  border-radius: 2.5px;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition),
    transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}

.btn:active {
  transform: scale(0.98);
}

.btn--lg {
  min-height: 3rem;
  padding: 0 1.625rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  color: #fff;
  background: var(--ink);
}

.btn--primary:hover {
  background: #26262e;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(11, 11, 15, 0.18);
}

.btn--secondary {
  color: var(--ink);
  background: var(--card);
}

.section--gray .btn--secondary {
  background: #ececf0;
}

.btn--secondary:hover {
  background: var(--card-hover);
  transform: translateY(-1px);
}

.btn--light {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 11, 15, 0.08);
}

.btn--light:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(11, 11, 15, 0.16);
}

/* ─── Language menu (shows current language only) ─── */
.lang-menu {
  position: relative;
}

.lang-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.25rem;
  padding: 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border-radius: var(--radius-pill);
  transition: color var(--transition);
}

.lang-menu__icon {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
  color: var(--muted);
  transition: color var(--transition);
}

/* Der Header-CTA trägt am Desktop das lange Label, mobil das kurze:
   sonst schiebt "Kontakt aufnehmen" den Burger aus der Zeile. */
.header__cta-short {
  display: none;
}

.lang-menu__btn:hover,
.lang-menu.is-open .lang-menu__btn {
  color: var(--ink);
}

.lang-menu__btn:hover .lang-menu__icon,
.lang-menu.is-open .lang-menu__icon {
  color: var(--ink);
}

.lang-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 8.25rem;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
}

.lang-menu--up .lang-menu__list {
  top: auto;
  bottom: calc(100% + 8px);
}

.lang-menu__list button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.5625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: left;
  border-radius: 9px;
  transition: background var(--transition), color var(--transition);
}

.lang-menu__list button:hover {
  background: var(--card);
  color: var(--ink);
}

.lang-menu__list button.is-active {
  color: var(--ink);
  font-weight: 700;
}

.lang-menu__list button.is-active::after {
  content: "";
  margin-left: auto;
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
  background: var(--red);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / contain no-repeat;
}

/* ─── Header ─── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}

.header.is-scrolled {
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ink);
}

.logo__svg {
  height: 23px;
  width: auto;
  display: block;
}

.nav-main {
  display: none;
  align-items: center;
  gap: 0.125rem;
}

.nav-main__link {
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition);
}

.nav-main__link:hover {
  color: var(--ink);
  background: var(--card);
}

.nav-main__link.is-active {
  color: var(--ink);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.header__actions .lang-menu {
  display: none;
}

.header__actions .btn {
  min-height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.875rem;
}

.header__cta {
  display: none;
}

/* Burger */
.header__menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--card);
  transition: background var(--transition);
}

.header__menu-btn:hover {
  background: var(--card-hover);
}

.header__menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

.header__menu-btn.is-open span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.header__menu-btn.is-open span:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 0.5rem 1.25rem 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(11, 11, 15, 0.12);
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu nav a {
  padding: 0.8125rem 0.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--track-tight);
  border-bottom: 1px solid var(--line);
}

.mobile-menu nav a:last-child {
  border-bottom: none;
}

.mobile-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.mobile-menu__cta {
  flex: 1;
}

/* ─── Hero (Figma 12-127) ─── */
.hero {
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  /* Gleiche Einrückung wie .container, damit die Textspalte exakt unter dem
     Logo beginnt. 50% bezieht sich auf die Elternbreite, 100vw würde die
     Scrollbar mitzählen und den Hero ein paar Pixel zu breit machen. */
  --hero-gutter: clamp(1.25rem, 4vw, 2.5rem);
  padding-left: max(var(--hero-gutter), calc(50% - var(--max-width) / 2 + var(--hero-gutter)));
  /* Gestapelt braucht auch die rechte Seite die Gasse; erst am Desktop läuft
     das Visual absichtlich aus dem Bild und das Padding fällt weg. */
  padding-right: var(--hero-gutter);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 35.375rem;
  container-type: inline-size;
}

/* Zwei überlappende Flaggenkreise, Tessin vorn (Figma 13:221) */
.hero__badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.hero__flags {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.hero__flag {
  position: relative;
  display: block;
  width: 1.5625rem;
  height: 1.5625rem;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1.27px var(--card-strong);
}

.hero__flag img {
  width: 100%;
  height: 100%;
  max-width: none;
}

.hero__flag:first-child {
  margin-right: -0.4rem;
  z-index: 2;
}

.hero__title {
  /* An die Spaltenbreite gekoppelt, nicht an die Fensterbreite: die längste
     Zeile ("Ohne den Aufwand.") braucht 8.67 px Breite je px Schriftgrad,
     11.2cqw lässt rund 3 % Reserve. Sonst kippt sie in eine vierte Zeile.
     Kein text-wrap: balance, das zerlegt die kurze zweite Zeile in zwei
     gleich lange Hälften, obwohl sie auf eine passt. */
  font-size: clamp(2rem, 11.2cqw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.hero__title > span {
  display: block;
}

.hero__title-line2 {
  color: rgba(0, 0, 0, 0.5);
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.hero__lead {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.34;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.avail-badge__dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  animation: avail-pulse 2.2s var(--ease) infinite;
}

@keyframes avail-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(18, 161, 80, 0.35);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(18, 161, 80, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(18, 161, 80, 0);
  }
}

.hero__trust-sep {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(11, 11, 15, 0.2);
}

.hero__trust-fact {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(11, 11, 15, 0.5);
  white-space: nowrap;
}

.hero__trust-link {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.hero__trust-link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* Hero-Visual: Kreis mit Bergbild, freigestelltes Team darüber, zwei Karten.
   Die Figma-Werte stammen aus einer 774 px breiten Spalte und sind hier in
   Prozent umgerechnet, damit die Komposition mitskaliert. */
.hero__visual {
  position: relative;
  aspect-ratio: 774 / 669;
  container-type: inline-size;
}

.hero__circle {
  position: absolute;
  left: -1.45%;
  top: 8%;
  width: 112.6%;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.hero__team {
  position: absolute;
  left: -9.62%;
  top: -1.84%;
  width: 116.27%;
  max-width: none;
  height: auto;
  z-index: 2;
}

/* Weicher Übergang nach unten, damit die Körper ins Weiss auslaufen (Figma 13:232) */
.hero__fade {
  position: absolute;
  left: -4.78%;
  top: 65.35%;
  width: 104.78%;
  height: 34.65%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 92.788%);
}

.hero-card {
  position: absolute;
  z-index: 3;
  font-size: 1rem;
}

/* Freigabe-Karte (Figma 13:188) */
/* Beide Karten skalieren mit der Breite der Visual-Spalte. Dadurch bleibt ihr
   Abstand zueinander konstant und sie überlappen bei keiner Fensterbreite.
   Der rem-Wert steht als Fallback zuerst, cqw überschreibt ihn. */
.hero-card--release {
  right: 8.6%;
  bottom: 11.4%;
  font-size: 0.88rem;
  font-size: 2.1cqw;
  display: flex;
  flex-direction: column;
  gap: 1.125em;
  width: 21.25em;
  padding: 1.125em 1.375em;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(9.65px);
  -webkit-backdrop-filter: blur(9.65px);
  border-radius: 1em;
}

.hero-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.1875em;
}

.hero-card__title {
  font-size: 0.9375em;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--ink);
}

.hero-card__muted {
  color: rgba(11, 11, 15, 0.3);
}

.hero-card__sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.7125em;
  font-weight: 500;
  line-height: 1.27;
  color: rgba(11, 11, 15, 0.5);
}

.hero-card__thumbs {
  display: flex;
  gap: 0.4375em;
}

.hero-card__thumbs img,
.hero-card__more {
  flex: 1;
  min-width: 0;
  height: 5.7em;
  border-radius: 0.375em;
  object-fit: cover;
}

.hero-card__more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.89em;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.5);
}

.hero-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
}

.hero-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1875em;
  height: 2.5em;
  font-size: 0.7437em;
  font-weight: 700;
  letter-spacing: -0.03em;
  border-radius: 999px;
}

.hero-card__btn img {
  width: 0.76em;
  height: 0.76em;
}

.hero-card__btn--go {
  color: #fff;
  background: #000;
}

.hero-card__btn--flag {
  color: #ff0638;
  background: rgba(255, 6, 56, 0.2);
}

/* Bewertungs-Karte (Figma 13:444) */
.hero-card--rating {
  left: 1%;
  top: 82.7%;
  font-size: 1rem;
  font-size: 2.39cqw;
  display: flex;
  flex-direction: column;
  gap: 0.09375em;
  padding: 0.9375em 1.25em;
  color: #fff;
  background: rgba(11, 11, 15, 0.5);
  backdrop-filter: blur(8.883px);
  -webkit-backdrop-filter: blur(8.883px);
  border-radius: 0.583em;
}

.hero-card__stars {
  display: flex;
  align-items: center;
}

.hero-card__stars img {
  width: 1.115em;
  height: 1.115em;
  margin-right: -0.093em;
}

.hero-card__rating-row {
  display: flex;
  align-items: center;
  gap: 0.1875em;
  font-size: 0.8325em;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hero-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.143em;
  padding: 0.16em 0.32em;
  font-size: 0.56em;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: #048221;
  border-radius: 999px;
}

.demo-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
}

.demo-ico svg {
  width: 1.125rem;
  height: 1.125rem;
}

.demo-ico--wait {
  color: var(--muted);
  background: var(--card);
}

.demo-ico--run {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}

.demo-ico--run svg {
  animation: demo-spin 1.6s linear infinite;
}

@keyframes demo-spin {
  to {
    transform: rotate(360deg);
  }
}

.demo-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}

.demo-card--chat {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
}

.demo-chat__row {
  display: flex;
  gap: 0.625rem;
}

.demo-chat__row--reply {
  justify-content: flex-end;
  text-align: right;
}

.demo-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--muted-light);
  border-radius: 50%;
}

.demo-chat__name {
  margin-bottom: 0.25rem;
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.demo-chat__name--right {
  text-align: right;
}

.demo-bubble {
  display: inline-block;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.45;
  border-radius: 14px;
  text-align: left;
}

.demo-bubble--guest {
  background: var(--card);
  color: var(--ink);
  border-top-left-radius: 4px;
}

.demo-bubble--reply {
  background: var(--ink);
  color: #fff;
  border-top-right-radius: 4px;
}

.demo-chat__note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.demo-chat__note-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.demo-card--task {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  align-self: flex-end;
  min-width: 62%;
}

.demo-task__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
}

.demo-task__check svg {
  width: 1rem;
  height: 1rem;
}

.demo-task__title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.demo-task__meta {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.demo-card--report {
  align-self: flex-start;
  width: min(21rem, 92%);
}

.demo-report__label {
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.demo-report__value {
  margin-top: 0.375rem;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: var(--track-tight);
}

.demo-report__meta {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.demo-badge {
  position: absolute;
  right: 1.125rem;
  bottom: 1.125rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}

/* ─── Platforms marquee ─── */
.platforms {
  padding-block: clamp(2rem, 4vw, 2.75rem);
}

.platforms__note {
  max-width: 44rem;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  padding-inline: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--muted-light);
}

.platforms__label {
  margin-bottom: 1.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.platforms__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.platforms__track {
  display: flex;
  width: max-content;
  animation: platforms-scroll 42s linear infinite;
}

.platforms__track:hover {
  animation-play-state: paused;
}

.platforms__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: clamp(1.25rem, 3vw, 2.25rem);
}

.platforms__group li {
  flex-shrink: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.platform-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--muted-light);
  transition: color var(--transition);
}

.platform-mark__icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

.platform-mark--lower {
  text-transform: lowercase;
}

.platforms__group li:hover .platform-mark {
  color: var(--ink-soft);
}

@keyframes platforms-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ─── Services slider (Apple-style) ─── */
.slider-nav {
  display: none;
  gap: 0.625rem;
  padding-bottom: 0.375rem;
}

.slider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #ececf0;
  color: var(--ink);
  transition: background var(--transition), opacity var(--transition), transform var(--transition);
}

.slider-btn:hover {
  background: #e2e2e8;
  transform: translateY(-1px);
}

/* Auf dem grauen Grund der Prinzipien-Sektion sind die Pfeile weiss,
   sonst verschwinden sie im Hintergrund. */
#why .slider-btn {
  background: var(--paper);
}

#why .slider-btn:hover {
  background: #f5f5f7;
}

.slider-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.slider-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.slider {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 0.25rem 1rem;
  scrollbar-width: none;
  cursor: grab;
}

.slider.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.slider img {
  -webkit-user-drag: none;
  user-select: none;
}

.slider--bleed {
  padding-inline-start: max(calc(50% - (var(--max-width) / 2) + clamp(1.25rem, 4vw, 2.5rem)), 1.25rem);
  padding-inline-end: clamp(1.25rem, 4vw, 2.5rem);
  scroll-padding-inline-start: max(calc(50% - (var(--max-width) / 2) + clamp(1.25rem, 4vw, 2.5rem)), 1.25rem);
}

.slider::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 min(21.5rem, 80vw);
  scroll-snap-align: start;
}

/* Service cards */
.svc {
  --svc-pad: clamp(1.5rem, 2.6vw, 1.875rem);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: clamp(400px, 40vw, 510px);
  padding: var(--svc-pad);
  background: #ececf0;
  border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease);
}

.slide:hover .svc {
  transform: translateY(-3px);
}

.svc--dark {
  background: var(--ink);
}

.svc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(11, 11, 15, 0.62) 0%, rgba(11, 11, 15, 0.3) 38%, rgba(11, 11, 15, 0.12) 62%, rgba(11, 11, 15, 0.22) 100%);
  pointer-events: none;
}

.svc__text {
  position: relative;
  z-index: 2;
}

.svc__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.svc__title {
  margin-top: 0.5rem;
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: pretty;
}

.svc__text--light .svc__label {
  color: rgba(255, 255, 255, 0.85);
}

.svc__text--light .svc__title {
  color: #fff;
  text-shadow: 0 1px 14px rgba(11, 11, 15, 0.3);
}

.svc__visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  flex: 1;
  min-height: 0;
  margin-top: 1.5rem;
}

.svc__visual--float {
  align-items: flex-end;
}

/* Split card: text padded, image bleeds to the card edges */
.svc--split {
  padding: 0;
}

.svc--split .svc__text {
  padding: var(--svc-pad) var(--svc-pad) 0;
}

.svc__img {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  min-height: 0;
  margin-top: var(--svc-pad);
  object-fit: cover;
}

/* Chat mockup */
.chat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.chat__row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.chat__row--out {
  justify-content: flex-end;
}

.chat__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--muted-light);
  border-radius: 50%;
}

.chat__bubble {
  padding: 0.625rem 0.875rem;
  max-width: 85%;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
  background: #fff;
  border-radius: 16px;
  border-bottom-left-radius: 5px;
}

.chat__bubble--out {
  color: #fff;
  background: var(--ink);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 5px;
}

.chat__note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.chat__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* Chat-Sequenz: läuft ab, sobald die Karte im Viewport ist.
   Ohne JavaScript bleibt alles sichtbar, nur der Tipp-Indikator ist dann aus. */
.chat__row {
  position: relative;
}

/* Die Punkte liegen genau dort, wo die Antwortblase erscheint, damit beim
   Wechsel nichts umbricht: die unsichtbare Blase hält die Zeilenhöhe. */
.chat__row--answer {
  position: relative;
}

.chat__typing {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border-radius: 16px;
  border-bottom-right-radius: 5px;
}

.chat__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-light);
}

.chat__heart {
  position: absolute;
  right: 0.5rem;
  bottom: -0.75rem;
  width: 1.375rem;
  height: 1.375rem;
  fill: var(--red);
}

/* Startzustand hängt an .js (im <head> gesetzt), damit nach dem Laden
   nichts sichtbar ausblendet. Ohne JavaScript bleibt der Chat komplett. */
.js .chat [data-chat-step] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

.js .chat .chat__heart {
  opacity: 0;
  transform: scale(0.4);
}

.js .chat [data-chat-step].is-shown {
  opacity: 1;
  transform: none;
}

.js .chat .chat__typing {
  transition: opacity 0.2s var(--ease);
}

.js .chat .chat__typing.is-done {
  opacity: 0;
}

.chat__typing.is-bouncing i {
  animation: chat-typing 1s var(--ease) infinite;
}

.chat__typing.is-bouncing i:nth-child(2) {
  animation-delay: 0.15s;
}

.chat__typing.is-bouncing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.js .chat .chat__heart.is-shown {
  opacity: 1;
  transform: none;
  animation: chat-heart-pop 0.42s var(--ease);
}

@keyframes chat-heart-pop {
  0% {
    transform: scale(0.4);
  }

  55% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

/* White UI tile */
.tile {
  width: 100%;
  padding: 1rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(11, 11, 15, 0.08);
}

.tile--row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tile__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--muted-light);
  border-radius: 50%;
}

.tile__text {
  flex: 1;
  min-width: 0;
}

.tile__title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tile__label {
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tile__value {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.tile__meta {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.tile--row .tile__title,
.tile--row .tile__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile__state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.3125rem 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(18, 161, 80, 0.1);
  border-radius: var(--radius-pill);
}

.tile__state svg {
  width: 0.75rem;
  height: 0.75rem;
}

.tile__state--wide {
  margin-top: 0.625rem;
}

.tile__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.tile__thumb {
  flex: 1;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, #dfe3ea, #bfc9d6);
}

.tile__thumb:nth-child(2) {
  background: linear-gradient(135deg, #e8e2d6, #cfc2ab);
}

.tile__thumb--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--card);
}

/* ─── Principles cards ─── */
.slide--prin {
  flex: 0 0 min(18.5rem, 76vw);
}

.prin {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.375rem, 2.2vw, 1.625rem);
  background: var(--paper);
  border-radius: var(--radius-md);
  transition: transform 0.35s var(--ease);
}

.slide:hover .prin {
  transform: translateY(-3px);
}

.prin__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2.875rem;
  height: 2.875rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.prin__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.prin__icon--flags {
  width: auto;
  overflow: visible;
}

/* Bank mit rotem Schweizer Kreuz wie im Figma. Material liefert
   assured_workload nur mit grauem Schild, also account_balance plus das
   Kreuz aus der vorhandenen Flagge. */
.prin__icon--swiss {
  position: relative;
  overflow: visible;
}

/* Abzeichen nach Figma 12:9136: 18.73 px in einem 50 px Icon, also 37.5 %,
   Position 66.4 / 60.3 %, Ring 5 px #ebebeb. Der Selektor muss spezifischer
   sein als .prin__icon img, sonst wird das Abzeichen auf Icon-Grösse
   aufgeblasen und verdeckt die Bank darunter. */
.prin__icon--swiss .prin__icon-badge {
  position: absolute;
  left: 66.4%;
  top: 60.3%;
  width: 37.5%;
  height: 37.5%;
  box-shadow: 0 0 0 0.28125rem var(--card-strong);
  border-radius: 50%;
}

.flagstack {
  display: flex;
  align-items: center;
}

.flagstack img {
  position: relative;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  border: 2px solid #ececf0;
  background: #ececf0;
}

.flagstack img + img {
  margin-left: -0.5rem;
}

.flagstack img:nth-child(1) { z-index: 5; }
.flagstack img:nth-child(2) { z-index: 4; }
.flagstack img:nth-child(3) { z-index: 3; }
.flagstack img:nth-child(4) { z-index: 2; }
.flagstack img:nth-child(5) { z-index: 1; }

.prin__title {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.prin__desc {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.38;
  color: var(--ink);
}

/* ─── Process (Figma 12-8723) ─── */
.process {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  list-style: none;
}

.pstep {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: clamp(1.375rem, 2.4vw, 1.875rem);
  background: var(--card-strong);
  border-radius: var(--radius-sm);
}

.pstep__icon {
  display: block;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

.pstep__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.pstep__title {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.pstep__desc {
  margin-top: -0.5rem; /* 24px flex-gap → 16px zwischen Titel und Text (Figma) */
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

#process.section {
  border-block: 1px solid var(--line);
}

.process__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
}

/* ─── Zusatzleistungen: Pillen laufen endlos von oben nach unten ─── */
.extras {
  overflow: hidden;
  color: #fff;
  background: var(--dark-bg);
}

.extras__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.eyebrow--green {
  color: #09b030;
}

.extras__text {
  container-type: inline-size;
}

.extras__lead {
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* Die Spur läuft oben und unten weich aus. Ein harter Schnitt an der
   Sektionskante wirkt abgeschnitten, deshalb eine Maske statt reinem clip. */
.extras__viewport {
  position: relative;
  height: 26rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* Kein gap auf Spur und Gruppe: sonst ist -50 % um die halbe Lücke kleiner
   als eine Gruppenhöhe und die Schleife springt bei jedem Durchlauf. Der
   Abstand sitzt deshalb als margin-bottom auf jeder Pille. */
.extras__track {
  display: flex;
  flex-direction: column;
  animation: extras-scroll 34s linear infinite;
}

/* Zwei identische Gruppen: bei -50 % beginnt die Kopie exakt dort,
   wo das Original stand, deshalb wirkt der Sprung unsichtbar. */
@keyframes extras-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

.extras__group {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.extras__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: center;
  margin-bottom: 0.625rem;
  padding: 1.3125rem 1.625rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: #242427;
  border-radius: var(--radius-pill);
}

/* Die Material-Symbole sind schwarz auf transparent, invert macht sie weiss */
.extras__pill img {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  filter: invert(1);
}

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

/* ─── Regions ─── */
.regions {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}

/* Im Figma bilden Regionen und Prinzipien einen durchgehenden grauen Block
   in #ebebeb, dunkler als die übrigen grauen Abschnitte, ohne Trennlinien. */
#why.section,
#regions.section {
  background: var(--card-strong);
  border-block: none;
}

#regions.section {
  padding-block: clamp(3.5rem, 6.5vw, 5.5rem);
}

.regions__intro .section__title {
  margin-top: 0;
}

.regions__intro .section__subtitle {
  max-width: 34rem;
}

/* Region card */
.regcard {
  display: flex;
  overflow: hidden;
  margin-top: clamp(1.75rem, 3.2vw, 2.5rem);
  min-height: 13.5rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.regcard__media {
  position: relative;
  flex: 0 0 13.875rem;
  align-self: stretch;
  background: var(--card);
}

.regcard__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.regcard__photo.is-active {
  opacity: 1;
}

.regcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-width: 0;
  padding: 1.5rem clamp(1.25rem, 2.4vw, 1.875rem);
}

.regcard__texts {
  display: grid;
}

.regcard__text {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.regcard__text.is-active {
  opacity: 1;
  pointer-events: auto;
}

.regcard__name {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.regcard__desc {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.38;
  color: var(--ink);
}

.slider-nav--card {
  display: flex;
  gap: 0.625rem;
  padding-bottom: 0;
}

.slider-nav--card .slider-btn {
  width: 2.75rem;
  height: 2.75rem;
  background: #ececf0;
  border-radius: 50%;
}

.slider-nav--card .slider-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.regions__ask {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.regions__ask a {
  font-weight: 700;
  color: var(--red);
  transition: color var(--transition);
}

.regions__ask a:hover {
  color: var(--red-deep);
}

/* Map with pills */
.regions__map {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 20rem;
  container-type: inline-size;
}

.regions__shape {
  width: 100%;
  height: auto;
  color: #c9c9cf;
}

/* Pillen nach Figma 12:8584: 20.92 px Medium, Polsterung 10.46/16.74,
   Radius 12.55, Zeiger 20.6 × 11.6 darüber. Der Schriftgrad hängt über cqw
   an der Kartenbreite, damit die Beschriftung die Karte nicht überwächst;
   alles Weitere in em, sodass die Pille als Ganzes mitskaliert. */
.map-pill {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, 0);
  padding: 0.5em 0.8em;
  font-size: 0.9375rem;
  font-size: 4.99cqw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border-radius: 0.6em;
  box-shadow: 0 2px 10px rgba(11, 11, 15, 0.1);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

/* Die beschreibende Pille darf zweizeilig umbrechen wie im Figma */
.map-pill--wide {
  max-width: 12em;
  white-space: normal;
  text-align: center;
}

.map-pill::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.5em;
  width: 0.985em;
  height: 0.553em;
  transform: translateX(-50%);
  background: inherit;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.map-pill:hover {
  transform: translate(-50%, -2px);
}

.map-pill.is-active {
  color: #fff;
  background: var(--ink);
}

@media (min-width: 900px) {
  .extras__grid {
    grid-template-columns: 1fr 0.508fr;
  }

  /* "Mehr bieten, mehr verdienen." braucht 13.3 px Breite je px Schriftgrad.
     7.4cqw lässt Reserve, damit die Zeile nicht umbricht. Mobil bricht sie
     normal um, dort wäre eine erzwungene Zeile breiter als der Bildschirm. */
  .extras .section__title {
    font-size: min(3.375rem, 7.4cqw);
  }

  .regions {
    /* Figma: Karte 570, Textspalte 646, Karte zuerst */
    grid-template-columns: 0.882fr 1fr;
    gap: clamp(1.5rem, 2.5vw, 1.5rem);
  }

  .regions__map {
    max-width: 26.1875rem;
  }
}

/* ─── Team photo hero ─── */
.team-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  min-height: clamp(800px, 64vw, 940px);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--ink);
}

.team-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.team-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(11, 11, 15, 0.34) 0%, rgba(11, 11, 15, 0.12) 45%, rgba(11, 11, 15, 0) 70%);
  pointer-events: none;
}

.team-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.eyebrow--on-photo {
  color: #fff;
}

/* Auf dunklem Grund braucht die Subline die helle Variante, sonst
   verschwindet das halbtransparente Schwarz im Hintergrund. */
.section--dark .eyebrow,
.eyebrow--on-photo {
  color: rgba(255, 255, 255, 0.6);
}

.team-hero__title {
  font-size: clamp(1.875rem, 4.4vw, 3.125rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(11, 11, 15, 0.28);
}

.team-hero__lead {
  margin-top: 1.125rem;
  margin-inline: auto;
  max-width: 41rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(11, 11, 15, 0.3);
}

.team-hero .btn {
  margin-top: 1.75rem;
}

/* ─── Team (legacy portraits) ─── */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.team__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.team__portrait {
  width: clamp(7.5rem, 16vw, 10rem);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper);
  border-radius: 50%;
}

.team__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.team__role {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.team__cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

/* ─── Pricing (Figma 12-37) ─── */
.pricing-grid {
  display: grid;
  gap: 0.75rem;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.9vw, 2.5rem);
  background: var(--paper);
  border: 1px solid #f2f2f4;
  border-radius: var(--radius-sm);
}

.price-card--featured {
  background: var(--dark-bg);
  border-color: var(--dark-bg);
  color: #fff;
}

.price-card__name {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  /* Ohne engere Zeilenhöhe kommen zur Lücke noch rund 7 px Durchschuss
     unter der Grundlinie hinzu, der Abstand wirkt dann zu gross. */
  line-height: 1.18;
}

.price-card__value {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.price-card__num {
  font-size: clamp(2.25rem, 4.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1;
}

.price-card__num--sm {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
}

.price-card__unit {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-light);
}

.price-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  margin-block: clamp(2rem, 3.5vw, 2.75rem);
}

/* Runder Haken-Chip wie im Entwurf: hellgrauer Kreis mit grauem Haken,
   auf der dunklen Karte umgekehrt. Als Rahmen gezeichnet, damit die Farbe
   je Karte umschaltbar bleibt. */
.price-card__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}

.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #f2f2f4;
}

/* Haken im selben Kasten wie der Kreis, als zentrierte Maske: so sitzt er
   verlässlich mittig und die Farbe ist eine einzige Eigenschaft. */
.price-card__list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1rem;
  height: 1rem;
  background: #888;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / 0.625rem no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / 0.625rem no-repeat;
}

.price-card--featured .price-card__list li::before {
  background: #3a3a40;
}

.price-card--featured .price-card__list li::after {
  background: #fff;
}

.price-card .btn {
  margin-top: auto;
}

.pricing-note {
  max-width: 40rem;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-light);
}

/* Kennzeichnung der Mockups: die Chats und die Freigabe-Karte zeigen
   erfundene Beispiele, nicht echte Objekte oder Gäste. */
.chat__sample,
.hero-card__sample {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted-light);
}

.chat__sample {
  margin-bottom: 0.625rem;
}

.hero-card__sample {
  margin-bottom: -0.5em;
  color: rgba(11, 11, 15, 0.35);
}

/* ─── FAQ (Figma): flache Zeilen mit Trennlinie, rundes Plus ─── */
.faq__title > span {
  display: block;
}

.faq {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background: #ececf0;
  border-radius: 50%;
  transition: background var(--transition);
}

.faq-item__q:hover .faq-item__icon {
  background: #e2e2e8;
}

/* Plus aus zwei Strichen; offen blendet der senkrechte aus */
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.faq-item__a {
  padding: 0 3.5rem 1.75rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ─── Contact (dark, editorial) ─── */
#contact.section--dark {
  background: #000;
}

.contact-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.contact-info .section__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.contact-info__lead {
  margin-top: 1.25rem;
  max-width: 26rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted-light);
}

/* Personen-Karte nach Figma: quadratisches Porträt, Name, Rolle, E-Mail */
.contact-person {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  margin-top: 2.75rem;
}

.contact-person__photo {
  width: 8.75rem;
  height: 8.75rem;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-sm);
}

.contact-person__name {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.contact-person__role {
  font-size: 1.0625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.contact-person__mail {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.contact-person__mail:hover {
  color: var(--muted-light);
}

/* Formular nach Figma: gefüllte dunkle Felder mit schwebendem Label.
   Der Trick ist placeholder=" " im Markup, dadurch greift :placeholder-shown
   nur solange das Feld leer ist und das Label kann ohne JavaScript wandern. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  position: relative;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1.5rem 1.125rem 0.625rem;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: var(--track-body);
  color: #fff;
  background: #1a1a1a;
  border: 1px solid transparent;
  border-radius: 14px;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

.form-group label {
  position: absolute;
  left: 1.1875rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  color: #fff;
  pointer-events: none;
  transition: top 0.16s var(--ease), transform 0.16s var(--ease),
    font-size 0.16s var(--ease);
}

/* Sobald etwas drin steht oder das Feld aktiv ist, rutscht das Label nach oben */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
  top: 0.6875rem;
  transform: none;
  font-size: 0.75rem;
  color: #9b9b9b;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #3a3a40;
  background: #202020;
}

.form-group input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}

/* Im Textfeld sitzt das Label oben, nicht mittig */
.form-group--area label {
  top: 1.375rem;
  transform: none;
}

.form-group--area textarea {
  display: block;
  min-height: 12.5rem;
  padding-top: 2.375rem;
  resize: vertical;
}

.form-group--area textarea:focus + label,
.form-group--area textarea:not(:placeholder-shown) + label {
  top: 0.6875rem;
}

/* Der Absende-Knopf ist im Entwurf höher als unsere Standard-Pille */
.contact-form button[type="submit"] {
  min-height: 3.625rem;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein ausfüllbares Feld.
   Nicht display:none, das überspringen viele Bots gezielt. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sichtbarer Fokus, wenn der Slider per Tastatur angesteuert wird */
.slider:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.contact-form__privacy {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

.contact-form__privacy a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form__privacy a:hover {
  color: #fff;
}

/* ─── Footer (Figma) ─── */
.footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  background: var(--paper);
}

.footer__columns {
  display: grid;
  gap: 2.5rem 3rem;
  justify-content: center;
  text-align: center;
}

.footer__column h3 {
  margin-bottom: 1.125rem;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--muted-light);
}

.footer__column ul {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
}

.footer__column li,
.footer__column a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

.footer__column a {
  transition: color var(--transition);
}

.footer__column a:hover {
  color: var(--muted);
}

/* Die Orte sind bewusst nicht verlinkt, die Unterseiten kommen später */
.footer__places li {
  cursor: default;
}

.footer__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1.25rem;
  font-size: 0.8125rem;
}

.footer__legal a {
  color: var(--muted);
  transition: color var(--transition);
}

.footer__legal a:hover {
  color: var(--ink);
}

/* Kleingedrucktes im Footer: vier Absätze, zentriert, bewusst unauffällig */
.footer__disclaimer {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 62rem;
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted-light);
}

.footer__copyright {
  font-size: 0.8125rem;
  color: var(--muted-light);
}

/* Riesige Wortmarke, unten beschnitten wie im Entwurf */
.footer__wordmark {
  height: clamp(3.5rem, 13vw, 11.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  color: var(--ink);
  line-height: 0;
}

.footer__wordmark svg {
  display: block;
  width: 104%;
  margin-left: -2%;
  height: auto;
}

/* ─── Thank-you page ─── */
.thanks {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
}

.thanks__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.75rem;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
}

.thanks__check svg {
  width: 1.5rem;
  height: 1.5rem;
}

.thanks__title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.08;
  text-wrap: balance;
}

.thanks__lead {
  margin-top: 1.125rem;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
}

.thanks__meta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.thanks__meta-label {
  margin-bottom: 1.125rem;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.thanks__steps {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.thanks__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Nur die Zahl, nicht jeder Span: der Schritttext liegt seit der
   Übersetzung ebenfalls in einem Span und wurde sonst mitgestaltet. */
.thanks__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--red);
  background: var(--card);
  border-radius: 50%;
}

.thanks__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* ─── Legal page ─── */
.legal {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
}

.legal__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.08;
}

.legal__section {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.legal__section h2 {
  margin-top: 2.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Die erste Überschrift schliesst direkt an die Trennlinie an */
.legal__section > h2:first-child {
  margin-top: 0;
}

.legal__intro + h2 {
  margin-top: 3rem;
}

.legal__section h3 {
  margin-top: 1.75rem;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.legal__section p {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Etwas mehr Luft zwischen aufeinanderfolgenden Absätzen als zwischen
   Überschrift und erstem Absatz */
.legal__section p + p {
  margin-top: 1.375rem;
}

.legal__intro {
  max-width: 44rem;
}

.legal__section a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.legal__section a:hover {
  color: var(--red);
  text-decoration-color: var(--red);
}

.legal__credits {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.legal__credits li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
}

.legal__credits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.legal__lang {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  font-size: 0.9375rem;
}

.legal__lang [aria-current] {
  font-weight: 700;
}

.legal__lang a {
  color: var(--muted);
  text-decoration-color: rgba(11, 11, 15, 0.25);
  text-underline-offset: 3px;
}

.legal__lang a:hover {
  color: var(--ink);
}

.legal__updated {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--font);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.footer__back {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
  transition: color var(--transition);
}

.footer__back:hover {
  color: var(--ink);
}

/* ─── Reveal animations (only when JS is available) ─── */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] {
  transition-delay: 0.08s;
}

[data-reveal-delay="2"] {
  transition-delay: 0.16s;
}

[data-reveal-delay="3"] {
  transition-delay: 0.24s;
}

[data-reveal-delay="4"] {
  transition-delay: 0.32s;
}

[data-reveal-delay="5"] {
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .avail-badge__dot {
    animation: none;
  }

  .js .chat [data-chat-step],
  .js .chat .chat__heart {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .chat .chat__typing {
    display: none;
  }

  .chat__typing.is-bouncing i {
    animation: none;
  }

  .js .chat .chat__heart.is-shown {
    animation: none;
  }

  .platforms__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }

  .platforms__group[aria-hidden="true"] {
    display: none;
  }

  .platforms__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ─── Responsive ─── */
@media (min-width: 640px) {



  .process {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__columns {
    grid-template-columns: repeat(3, minmax(0, 11rem));
  }
}

@media (min-width: 900px) {
  .nav-main {
    display: flex;
  }

  .header__actions .lang-menu {
    display: block;
  }

  .header__cta {
    display: inline-flex;
  }

  .header__menu-btn,
  .mobile-menu {
    display: none;
  }

  .mobile-menu.is-open {
    display: none;
  }

  .hero__grid {
    /* Figma-Verhältnis Textspalte 566 : Visual 774 */
    grid-template-columns: 0.7313fr 1fr;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    padding-block: 0;
    padding-right: 0;
  }

  .slider-nav {
    display: flex;
  }

  .process {
    grid-template-columns: repeat(4, 1fr);
  }

  .principle {
    grid-template-columns: 5.5rem 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
  }

  .footer__top {
    grid-template-columns: 1.2fr 2fr;
    gap: 4rem;
  }

}

@media (min-width: 1000px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Mobile refinements ─── */
@media (max-width: 899px) {
  :root {
    --header-h: 60px;
  }

  .header__inner {
    gap: 0.5rem;
  }

  .header__actions {
    gap: 0.375rem;
  }

  .header__actions .lang-menu,
  .header__cta {
    display: inline-flex;
  }

  .header__cta-long {
    display: none;
  }

  .header__cta-short {
    display: inline;
  }

  .header__cta {
    min-height: 2.125rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
  }

  .lang-menu__btn {
    min-height: 2.125rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
  }

  .lang-menu__icon {
    width: 1rem;
    height: 1rem;
  }

  .header__menu-btn {
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
  }

  .header__menu-btn:hover {
    background: var(--card);
  }

  .header {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .logo__svg {
    height: 18px;
  }
}

@media (max-width: 639px) {
  /* full-width buttons */
  .hero__intro,
  .hero__intro .btn,
  .team-hero .btn,
  .team__cta .btn,
  .thanks__cta .btn {
    width: 100%;
  }

  .thanks__cta {
    flex-direction: column;
    align-items: stretch;
  }

  /* Trennstrich verschwindet, sobald die Zeile umbricht */
  .hero__trust-sep {
    display: none;
  }
}

@media (max-width: 899px) {
  /* Gestapelt zuerst die Überschrift, dann die Karte: eine Umrissform ohne
     jeden Kontext als Sektionsanfang liest sich schlecht. Am Desktop bleibt
     die Reihenfolge wie im Figma, Karte links. */
  .regions__intro {
    order: -1;
  }
}

@media (max-width: 639px) {
  /* Die längsten Pillen passen sonst nicht in die Breite */
  .extras__pill {
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
  }

  .extras__viewport {
    height: 21rem;
  }

  /* Gestapelt ragt der Kreis unter das freigestellte Team hinaus und wird an
     dessen Unterkante als harte Linie sichtbar. Deshalb wird das Visual hier
     beschnitten und der Verlauf ist schon vor der Schnittkante volldeckend,
     sodass Weiss auf Weiss geschnitten wird. Die Gasse des Rasters wird
     zurückgenommen, damit das Bild randlos über die volle Breite läuft. */
  .hero__visual {
    overflow: hidden;
    margin-inline: calc(var(--hero-gutter) * -1);
  }

  /* Das Bild läuft nach unten weiss aus, ein grosses Polster darunter
     wirkt dann wie eine Lücke. */
  .hero__grid {
    padding-bottom: 0.5rem;
  }

  .hero__fade {
    top: 62%;
    height: 38%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 78%);
  }

  /* Hero: die Freigabe-Karte hat auf dem Handy keinen Platz */
  .hero-card--release {
    display: none;
  }

  /* Höher gesetzt, damit die Karte auf dem Bild liegt und nicht auf dem
     ausgeblendeten Weiss */
  .hero-card--rating {
    left: 2%;
    top: 62%;
    font-size: 0.72rem;
  }

  /* Regions: stack the card and shrink the map */
  .regcard {
    flex-direction: column;
    min-height: 0;
  }

  .regcard__media {
    flex: none;
    aspect-ratio: 16 / 10;
    width: 100%;
  }

  .regcard__body {
    padding: 1.25rem;
    gap: 1rem;
  }

  .regions__map {
    max-width: 15rem;
  }

  .map-pill {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 8px;
  }
}