/* ==========================================================================
   0. Inter — selbst gehostet, damit kein Besucher Kontakt zu Dritten hat.
      SIL Open Font License 1.1, © 2016 The Inter Project Authors.
      Lizenztext: fonts/inter-OFL.txt
      Variable Font: eine Datei deckt 400 und 500 ab, opsz liefert den
      Display-Schnitt für große Überschriften automatisch mit.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. tokens — die Grundwerte des Designsystems
   ========================================================================== */

/* Die 22 Grundwerte unten sind die verbindliche Palette. Darunter folgen
   semantische Aliase: Wer eine Farbe setzt, greift zum Alias, nicht zum
   Grundwert — so bleibt ein spaeterer Wechsel eine Aenderung an einer Stelle.
   Schriften werden referenziert, nicht eingebettet; die Lizenz liegt in
   fonts/inter-OFL.txt. */

:root {
  color-scheme: dark;

  /* ---- primitives: neutral ramp (dark, ordered light → dark) -------------- */
  --ds-white:        #ffffff;
  --ds-warm-white:   #fff3f0;   /* headings — a warm off-white, not pure white */
  --ds-grey-500:     #7a7a7a;
  --ds-ink-500:      #303030;
  --ds-ink-550:      #262626;
  --ds-ink-600:      #242424;
  --ds-ink-700:      #1f1f1f;
  --ds-ink-800:      #171717;
  --ds-ink-850:      #121212;
  --ds-ink-900:      #0f0f0f;
  --ds-black:        #000000;

  /* ---- primitives: chromatic ---------------------------------------------
     The only saturated colours in the whole system, and they appear as gradient
     stops rather than as flat fills. --ds-rose is the accent; --ds-teal shows up
     once or twice and should stay rare. */
  --ds-dusk-900:     #1b2228;
  --ds-dusk-700:     #353f44;
  --ds-rose-400:     #d39794;
  --ds-teal-700:     #177275;

  /* ---- primitives: type --------------------------------------------------- */
  --ds-font-sans:    "Inter", "Inter Placeholder", system-ui, -apple-system, sans-serif;
  --ds-font-display: "Inter Display", "Inter", system-ui, sans-serif;
  /* Fragment Mono war im Original geladen, aber kaum benutzt — hier nur für
     Ziffern und die Mockup-Adresse. Dafür lohnt keine zweite Schriftdatei. */
  --ds-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Headings scale with the viewport; body sizes are fixed at every width. */
  --ds-size-h1:    clamp(2.25rem, 1.8099rem + 1.8779vw, 3.5rem);   /* 36 → 56 */
  --ds-size-h2:    clamp(2rem,    1.8239rem + 0.7512vw, 2.5rem);   /* 32 → 40 */
  --ds-size-h3:    clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);  /* 28 → 36 */
  --ds-size-h4:    clamp(1.375rem,1.243rem  + 0.5634vw, 1.75rem);  /* 22 → 28 */
  --ds-size-h5:    clamp(1.125rem,1.037rem  + 0.3756vw, 1.375rem); /* 18 → 22 */
  --ds-size-lead:  1rem;      /* 16 */
  --ds-size-body:  0.875rem;  /* 14 — the workhorse size */
  --ds-size-label: 0.75rem;   /* 12 */

  /* Tracking tightens as type grows. This pairing is the system's signature —
     applying a size without its tracking and leading loses the look. */
  --ds-track-h1:    -0.04em;
  --ds-track-h2:    -0.04em;
  --ds-track-h3:    -0.03em;
  --ds-track-h4:    -0.03em;
  --ds-track-h5:    -0.02em;
  --ds-track-body:  -0.02em;
  --ds-track-lead:  -0.01em;

  --ds-leading-display: 1.3;
  --ds-leading-heading: 1.35;
  --ds-leading-body:    1.5;

  --ds-weight-regular: 400;
  --ds-weight-medium:  500;

  /* ---- primitives: space (4px grid) --------------------------------------- */
  --ds-space-1:  0.25rem;  /*  4 */
  --ds-space-2:  0.5rem;   /*  8 */
  --ds-space-3:  0.75rem;  /* 12 */
  --ds-space-4:  1rem;     /* 16 */
  --ds-space-5:  1.25rem;  /* 20 */
  --ds-space-6:  1.5rem;   /* 24 */
  --ds-space-7:  1.75rem;  /* 28 */
  --ds-space-8:  2rem;     /* 32 */
  --ds-space-9:  2.25rem;  /* 36 — the most-used card padding */
  --ds-space-10: 2.5rem;   /* 40 */
  --ds-space-12: 3rem;     /* 48 */
  --ds-space-16: 4rem;     /* 64 */
  --ds-space-20: 5rem;     /* 80 */
  --ds-tight:    0.625rem; /* 10 — off-grid, but the single most common flex gap */
  --ds-section-y: clamp(5rem, 2.5rem + 7vw, 11.25rem);  /* 80 → 180 */

  /* ---- primitives: shape -------------------------------------------------- */
  --ds-radius-sm:   0.5rem;   /*  8 */
  --ds-radius-md:   1rem;     /* 16 */
  --ds-radius-lg:   1.5rem;   /* 24 — glass cards */
  --ds-radius-xl:   2rem;     /* 32 — media frames */
  --ds-radius-pill: 999px;

  --ds-blur-sm: blur(5px);
  --ds-blur-md: blur(10px);
  --ds-blur-lg: blur(24px);

  --ds-shadow-drop: 0 1px 32px rgb(0 0 0 / 0.35);
  --ds-shadow-edge: inset 0 0 0 1px rgb(255 255 255 / 0.05);  /* the hairline that
                       separates a glass surface from black — used instead of a border */

  /* ---- primitives: motion ------------------------------------------------- */
  --ds-dur-fast:  150ms;
  --ds-dur-base:  400ms;   /* every CSS transition on the site runs at this */
  --ds-dur-enter: 600ms;   /* Einblend-Animationen beim Scrollen */
  --ds-ease:      cubic-bezier(0.44, 0, 0.56, 1);  /* symmetric ease-in-out, the only
                                                      curve the site uses */
  --ds-enter-shift: 24px;  /* entrances rise by this much */

  /* ---- primitives: layout ------------------------------------------------- */
  --ds-container:      67.5rem;  /* 1080 — text and content column */
  --ds-container-wide: 100rem;   /* 1600 — section max-width */
  --ds-container-full: 120rem;   /* 1920 */
  --ds-gutter:      var(--ds-space-6);   /* 24 on most sections */
  --ds-gutter-wide: var(--ds-space-10);  /* 40 on the nav and the widest section */
  --ds-z-base: 1;
  --ds-z-sticky: 10;
  --ds-z-header: 100;

  /* ---- gradients: the signature treatments --------------------------------
     IMPORTANT: --ds-gradient-dusk is calibrated to a TALL block. Its 83% radius is
     relative to the host element's height: on a hero of about 1270px the rose
     stop falls below the fold and only the slate range is visible. Put it on a short
     hero and the rose lands mid-viewport and the page turns pink. Use
     --ds-hero-height (or anything >= ~1250px) on whatever carries it. */
  --ds-hero-height: clamp(40rem, 88vw, 79.5rem);   /* ~640 → 1272px */
  --ds-gradient-dusk: radial-gradient(200% 83% at 50% 0,
                        var(--ds-dusk-900) 0%, var(--ds-dusk-700) 42%, var(--ds-rose-400) 100%);
  --ds-gradient-rise: linear-gradient(var(--ds-black) 0%, var(--ds-dusk-900) 100%);

  /* Eased fade to black, ~200px tall, laid over the seam where a lit section meets
     the black page. Seven stops approximate the eased ramp closely enough that
     no banding is visible. */
  --ds-scrim-fade: linear-gradient(
      var(--ds-black) 0%, rgb(0 0 0 / 0.99) 8%, rgb(0 0 0 / 0.95) 20%,
      rgb(0 0 0 / 0.82) 36%, rgb(0 0 0 / 0.55) 56%, rgb(0 0 0 / 0.22) 78%,
      rgb(0 0 0 / 0) 100%);
  --ds-scrim-height: 12.75rem;   /* 204px */

  /* ---- semantic aliases --------------------------------------------------- */
  --ds-bg:              var(--ds-black);
  --ds-surface:         rgb(15 15 15 / 0.85);   /* primary card, over blur */
  --ds-surface-raised:  rgb(23 23 23 / 0.85);
  --ds-surface-solid:   var(--ds-ink-600);      /* chips, small opaque fills */
  --ds-glass:           rgb(255 255 255 / 0.10); /* pill badges, light-on-dark fills */
  --ds-glass-strong:    rgb(255 255 255 / 0.25);
  --ds-hairline:        rgb(255 255 255 / 0.05);

  --ds-heading:      var(--ds-warm-white);
  --ds-text-strong:  var(--ds-white);
  --ds-text:         rgb(255 255 255 / 0.80);
  --ds-text-muted:   rgb(255 255 255 / 0.65);

  --ds-invert-surface: rgb(255 255 255 / 0.80);  /* the one light element: the CTA */
  --ds-on-invert:      var(--ds-black);

  --ds-accent:       var(--ds-rose-400);
  --ds-accent-alt:   var(--ds-teal-700);

  /* Sichtbarer Fokus-Ring. Ohne ihn waere die Tastaturbedienung nicht
     nachvollziehbar — das ist ein Zugaenglichkeitsmangel, keine Stilfrage. */
  --ds-focus-ring: 0 0 0 2px var(--ds-black), 0 0 0 4px var(--ds-warm-white);
}

/* Das System ist bewusst dunkel: kein prefers-color-scheme-Block, kein
   [data-theme]-Schalter. Eine helle Variante braucht eigene Werte statt einer
   Umkehrung und wird deshalb, wenn noetig, als eigenes Set gepflegt. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   2. Flowerboys — Layout und Komponenten, ausschließlich auf --ds-Tokens
   ========================================================================== */

/* Flowerboys — Landingpage
   Regeln, die im ganzen Dokument gelten:
     · echtes Schwarz als Grund, durchscheinende Flaechen ueber backdrop-blur
       mit innenliegender Haarlinie
     · keine Rahmen, keine fetten Schnitte, jede Groesse mit ihrem Tracking
     · ausschliesslich Flexbox, kein CSS Grid
     · eine Easing-Kurve, eine Basisdauer */

/* --------------------------------------------------------- Trefferflaechen
   Kleine Ziele sind auf dem Telefon schwer zu treffen; darunter leidet jeder
   Klick, der zu einer Anfrage fuehren soll. Die anklickbare Flaeche waechst
   hier auf 44px Hoehe, ohne dass sich Optik, Abstand oder Zeilenhoehe aendern:
   ein absolut positioniertes ::after legt sich mittig ueber das Element. Nur
   vertikal, damit nebeneinanderliegende Ziele sich nicht ueberlappen. */
.brand,
.langswitch button,
.footer__links a,
.closing__mail,
.closing__copy p > a,
.nav__toggle,
.nav__side .btn { position: relative; }

.brand::after,
.langswitch button::after,
.footer__links a::after,
.closing__mail::after,
.closing__copy p > a::after,
.nav__toggle::after,
.nav__side .btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* the fixed nav */
}

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

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-size-body);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-body);
  letter-spacing: var(--ds-track-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }

a {
  color: var(--ds-text);
  text-decoration: none;
  transition: color var(--ds-dur-base) var(--ds-ease);
}
a:hover { color: var(--ds-text-strong); }

:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}

::selection { background: var(--ds-rose-400); color: var(--ds-black); }

.skip-link {
  position: fixed;
  top: var(--ds-space-4);
  left: var(--ds-space-4);
  z-index: 200;
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-invert-surface);
  color: var(--ds-on-invert);
  transform: translateY(-200%);
  transition: transform var(--ds-dur-fast) var(--ds-ease);
}
.skip-link:focus-visible { transform: none; color: var(--ds-on-invert); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------- typography */
.h1, .h2, .h3, .h4, .h5 { font-weight: var(--ds-weight-regular); text-wrap: balance; }

.h1 {
  font-size: var(--ds-size-h1);
  line-height: var(--ds-leading-display);
  letter-spacing: var(--ds-track-h1);
  color: var(--ds-heading);
}
.h2 {
  font-size: var(--ds-size-h2);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-track-h2);
  color: var(--ds-text-strong);
}
.h3 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-size-h3);
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-track-h3);
  color: var(--ds-heading);
}
.h4 {
  font-size: var(--ds-size-h4);
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-track-h4);
  color: var(--ds-heading);
}
.h5 {
  font-size: var(--ds-size-h5);
  line-height: var(--ds-leading-body);
  letter-spacing: var(--ds-track-h5);
  color: var(--ds-heading);
}
.lead {
  font-size: var(--ds-size-lead);
  line-height: var(--ds-leading-body);
  letter-spacing: var(--ds-track-lead);
  color: var(--ds-text);
  text-wrap: pretty;
}
.label {
  font-size: var(--ds-size-label);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-body);
  letter-spacing: var(--ds-track-body);
  color: var(--ds-text-muted);
  text-transform: uppercase;
}
.muted { color: var(--ds-text-muted); }
.mono {
  font-family: var(--ds-font-mono);
  letter-spacing: 0;
}

/* ----------------------------------------------------------------- layout */
.shell {
  width: 100%;
  max-width: calc(var(--ds-container) + var(--ds-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}
.shell--wide {
  max-width: calc(var(--ds-container-wide) + var(--ds-gutter-wide) * 2);
  padding-inline: var(--ds-gutter-wide);
}

.section { padding-block: var(--ds-section-y); }
.section--tight { padding-block: calc(var(--ds-section-y) * 0.55); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  max-width: 44rem;
  margin-bottom: var(--ds-space-16);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-6);
}
.row > * { flex: 1 1 18rem; min-width: 0; }

.stack {
  display: flex;
  flex-direction: column;
}
.stack-2 { gap: var(--ds-space-2); }
.stack-3 { gap: var(--ds-space-3); }
.stack-4 { gap: var(--ds-space-4); }
.stack-5 { gap: var(--ds-space-5); }
.stack-6 { gap: var(--ds-space-6); }
.stack-8 { gap: var(--ds-space-8); }

.rule {
  height: 1px;
  background: var(--ds-hairline);
  border: 0;
  margin: 0;
}

/* -------------------------------------------------------------- primitives */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  height: 30px;
  padding: var(--ds-space-1) var(--ds-space-3);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-glass);
  color: var(--ds-text);
  font-size: var(--ds-size-body);
  letter-spacing: var(--ds-track-body);
  white-space: nowrap;
}
.badge__dot {
  width: 6px; height: 6px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent);
  flex: none;
}
.badge--quiet { background: rgb(255 255 255 / 0.06); color: var(--ds-text-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  height: 48px;
  padding-inline: var(--ds-space-9);
  border: 0;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-size-body);
  letter-spacing: var(--ds-track-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-fast) var(--ds-ease),
              box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.btn--primary {
  background: var(--ds-invert-surface);
  color: var(--ds-on-invert);
}
.btn--primary:hover { background: var(--ds-warm-white); color: var(--ds-on-invert); }
.btn--ghost {
  background: var(--ds-glass);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-edge);
}
.btn--ghost:hover { background: rgb(255 255 255 / 0.16); color: var(--ds-text-strong); }
.btn--sm { height: 36px; padding-inline: var(--ds-space-5); }
.btn--block { width: 100%; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ds-space-9);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--ds-shadow-edge);
}
.card--raised { background: var(--ds-surface-raised); }
.card--frame { padding: var(--ds-space-2); }

.card__num {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-size-label);
  letter-spacing: 0;
  color: var(--ds-text-muted);
}

.checklist { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.checklist li {
  display: flex;
  gap: var(--ds-space-3);
  color: var(--ds-text-muted);
}
.checklist li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.5em;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-glass-strong);
}

/* -------------------------------------------------------------------- nav */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--ds-z-header);
  display: flex;
  align-items: center;
  transition: background-color var(--ds-dur-base) var(--ds-ease),
              box-shadow var(--ds-dur-base) var(--ds-ease);
}
.nav.is-stuck {
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 0 var(--ds-hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  width: 100%;
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-tight);
  color: var(--ds-heading);
  letter-spacing: var(--ds-track-body);
  flex: none;
}
.brand__mark { width: 18px; height: 18px; flex: none; }
.brand:hover { color: var(--ds-heading); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--ds-space-6);
  margin-left: auto;
}
.nav__side {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  flex: none;
}

.langswitch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-glass);
}
.langswitch button {
  min-width: 34px;
  height: 24px;
  padding-inline: var(--ds-space-2);
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text-muted);
  font-size: var(--ds-size-label);
  letter-spacing: var(--ds-track-body);
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-fast) var(--ds-ease);
}
.langswitch button[aria-pressed="true"] {
  background: var(--ds-glass-strong);
  color: var(--ds-text-strong);
}

.nav__cta-mobile { display: none; }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-glass);
  color: var(--ds-text);
  cursor: pointer;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 16px; height: 1px;
  background: currentColor;
  transition: transform var(--ds-dur-fast) var(--ds-ease),
              opacity var(--ds-dur-fast) var(--ds-ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 1px;
  background: currentColor;
  transition: transform var(--ds-dur-fast) var(--ds-ease);
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after  { top: 5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---------------------------------------------------- nav: Kundenbereich */
/* Kein normaler Menüpunkt: er führt aus der Landingpage heraus, deshalb
   bekommt er die Pillenform der Badges statt der nackten Link-Optik. */
.nav__portal {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  height: 30px;
  padding-inline: var(--ds-space-4);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-glass);
  color: var(--ds-text);
  white-space: nowrap;
  transition: background-color var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-base) var(--ds-ease);
}
.nav__portal:hover { background: rgb(255 255 255 / 0.16); color: var(--ds-text-strong); }
.nav__portal svg { width: 13px; height: 13px; flex: none; opacity: 0.75; }

/* ------------------------------------------------------------ auth page */
.auth {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-8);
  padding: var(--ds-space-20) var(--ds-gutter) var(--ds-space-12);
  /* Kurze Seite: derselbe Verlauf mit größerem Radius, sonst landet der
     Rosé-Stop mitten im Bild. Siehe DESIGN-SYSTEM.md. */
  background: radial-gradient(200% 160% at 50% 0,
                var(--ds-dusk-900) 0%, var(--ds-dusk-700) 42%, var(--ds-rose-400) 100%);
}
.auth__card {
  width: 100%;
  max-width: 25rem;
  gap: var(--ds-space-6);
  padding: var(--ds-space-10);
}
.auth__lock {
  width: 36px;
  height: 36px;
  color: var(--ds-accent);
}
.auth__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  text-align: center;
  color: var(--ds-text-muted);
  font-size: var(--ds-size-label);
}
.auth__foot a { color: var(--ds-text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 810px) {
  /* Im aufgeklappten Menü ist die Pille fehl am Platz — dort ist er eine Zeile
     wie die anderen. */
  .nav__links .nav__portal {
    height: auto;
    padding-inline: 0;
    border-radius: 0;
    background: transparent;
  }
  .nav__links .nav__portal:hover { background: transparent; }
  .auth { padding-top: var(--ds-space-16); }
  .auth__card { padding: var(--ds-space-8); }
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* The dusk gradient's 83% radius is relative to this block. It is calibrated
     to ~1270px — a short hero turns the page pink. Hence the min-height. */
  min-height: var(--ds-hero-height);
  padding-top: 148px;
  padding-bottom: var(--ds-space-20);
  background: var(--ds-gradient-dusk);
  isolation: isolate;
}
.hero__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--ds-scrim-height);
  background: var(--ds-scrim-fade);
  transform: scaleY(-1);
  pointer-events: none;
  z-index: 2;
}
.hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-10);
  text-align: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-6);
  max-width: 42rem;
}
.hero .h1 { max-width: 16ch; }
.hero .lead { max-width: 46ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-2);
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-2) var(--ds-space-4);
  color: var(--ds-text-muted);
  font-size: var(--ds-size-label);
  letter-spacing: var(--ds-track-body);
}
.hero__trust li { display: flex; align-items: center; gap: var(--ds-space-4); }
.hero__trust li + li::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-glass-strong);
}
.hero__visual {
  width: 100%;
  max-width: 62rem;
  margin-top: var(--ds-space-6);
}

/* Mockup: a device frame drawn in CSS — no stock photography anywhere. */
.mock {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mock__desktop {
  width: 100%;
  padding: var(--ds-space-2);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--ds-shadow-edge), var(--ds-shadow-drop);
}
.mock__screen {
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--ds-radius-xl) - var(--ds-space-2));
  background: var(--ds-black);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: rgb(255 255 255 / 0.04);
}
.mock__dot {
  width: 8px; height: 8px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-glass-strong);
}
.mock__url {
  margin-left: var(--ds-space-3);
  padding: 2px var(--ds-space-3);
  border-radius: var(--ds-radius-pill);
  background: rgb(255 255 255 / 0.06);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0;
}
.mock__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  padding: var(--ds-space-10) var(--ds-space-9) var(--ds-space-9);
  background: radial-gradient(140% 90% at 50% 0, #1b2228 0%, #0d0f11 55%, #000 100%);
  text-align: left;
}
.mock__line {
  height: 10px;
  border-radius: var(--ds-radius-pill);
  background: rgb(255 255 255 / 0.14);
}
.mock__line--lg { height: 18px; width: 62%; background: rgb(255 243 240 / 0.55); }
.mock__line--md { height: 18px; width: 40%; background: rgb(255 243 240 / 0.32); }
.mock__line--sm { width: 34%; background: rgb(255 255 255 / 0.10); }
.mock__line--xs { width: 22%; background: rgb(255 255 255 / 0.10); }
.mock__pill {
  width: 118px; height: 30px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-invert-surface);
}
.mock__tiles { display: flex; gap: var(--ds-space-4); margin-top: var(--ds-space-4); }
.mock__tile {
  flex: 1;
  height: 86px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-edge);
}
.mock__mobile {
  position: absolute;
  right: -8px;
  bottom: -28px;
  width: 132px;
  padding: 6px;
  border-radius: 22px;
  background: var(--ds-surface-raised);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--ds-shadow-edge), var(--ds-shadow-drop);
}
.mock__mobile-screen {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-3);
  border-radius: 16px;
  background: linear-gradient(#1b2228 0%, #000 70%);
  min-height: 216px;
}

/* -------------------------------------------------------------- promises */
.promise { gap: var(--ds-space-4); }
.promise__icon {
  width: 32px; height: 32px;
  margin-bottom: var(--ds-space-2);
  color: var(--ds-accent);
}

/* -------------------------------------------------------------- services */
.services__row { align-items: stretch; }
.services__row > * { flex: 1 1 24rem; }
.service { gap: var(--ds-space-6); }
.service__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-4); }
.service__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-2);
  margin-top: auto;
  padding-top: var(--ds-space-6);
  border-top: 0;
  box-shadow: inset 0 1px 0 0 var(--ds-hairline);
}
.service__price-value {
  font-size: var(--ds-size-h5);
  letter-spacing: var(--ds-track-h5);
  color: var(--ds-heading);
}
.price-note {
  margin-top: var(--ds-space-6);
  color: var(--ds-text-muted);
  text-align: center;
}

/* ------------------------------------------------------------------- work */
.work__row > * { flex: 1 1 26rem; }
.work-card { gap: 0; padding: var(--ds-space-2); }
.work-card__art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  background: var(--ds-ink-900);
  box-shadow: var(--ds-shadow-edge);
}
/* The screenshots are drawn, not photographed — they carry their own palette,
   which is the point: they are pictures of other people's sites. */
.work-card__art .shot {
  width: 100%;
  height: 100%;
  opacity: 0.92;
  transition: opacity var(--ds-dur-base) var(--ds-ease);
}
.work-card:hover .shot { opacity: 1; }
.work-card__badge {
  position: absolute;
  bottom: var(--ds-space-5);
  left: var(--ds-space-5);
  z-index: 2;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ds-text);
}
.work-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-7) var(--ds-space-7) var(--ds-space-6);
}
.work-card__meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); color: var(--ds-text-muted); }
/* Separator belongs to the item before it, so a wrap never starts a line
   with a stray dot. */
.work-card__meta span:not(:last-child)::after { content: "\00a0\00b7"; }

/* ---------------------------------------------------------------- process */
.steps { display: flex; flex-wrap: wrap; gap: var(--ds-space-6); }
/* Four abreast on every desktop width — three-plus-one breaks the rhythm. */
.steps > li { flex: 1 1 0; min-width: 10rem; }
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding-top: var(--ds-space-7);
}
.step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--ds-glass-strong);
}
.step__n {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-size-label);
  letter-spacing: 0;
  color: var(--ds-accent);
}

/* ------------------------------------------------------------------- why */
.why {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-12);
  align-items: flex-start;
}
.why__quote { flex: 1 1 28rem; }
.why__quote p {
  font-size: var(--ds-size-h4);
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-track-h4);
  color: var(--ds-heading);
  text-wrap: pretty;
}
.why__stats { flex: 1 1 16rem; display: flex; flex-direction: column; gap: var(--ds-space-6); }
.stat { display: flex; flex-direction: column; gap: var(--ds-space-1); padding-bottom: var(--ds-space-6); box-shadow: inset 0 -1px 0 0 var(--ds-hairline); }
.stat:last-child { box-shadow: none; padding-bottom: 0; }
.stat__value {
  font-size: var(--ds-size-h3);
  line-height: 1.2;
  letter-spacing: var(--ds-track-h3);
  color: var(--ds-heading);
}

/* ------------------------------------------------------------------ team */
.team__row > * { flex: 1 1 22rem; }
.member { gap: var(--ds-space-6); }
.member__portrait {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--ds-radius-md);
  /* A quiet slice of the dusk gradient, so the placeholder belongs to the page
     instead of looking like a missing image. Swap in a real photo and this
     never shows. */
  background: radial-gradient(120% 120% at 30% 0,
                var(--ds-dusk-700) 0%, var(--ds-dusk-900) 45%, #0d0d0d 100%);
  box-shadow: var(--ds-shadow-edge);
  overflow: hidden;
}
.member__portrait img { width: 100%; height: 100%; object-fit: cover; }
.member__initials {
  font-family: var(--ds-font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  letter-spacing: var(--ds-track-h3);
  color: rgb(255 243 240 / 0.42);
}
.member__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ds-scrim-fade);
  transform: scaleY(-1);
  opacity: 0.7;
  pointer-events: none;
}
.member__quote { color: var(--ds-text-muted); }
.team__note {
  margin-top: var(--ds-space-12);
  text-align: center;
  color: var(--ds-text-muted);
}

/* ------------------------------------------------------------------- faq */
.faq { display: flex; flex-wrap: wrap; gap: var(--ds-space-12); align-items: flex-start; }
.faq__head { flex: 1 1 18rem; position: sticky; top: 96px; }
.faq__list { flex: 2 1 30rem; display: flex; flex-direction: column; }
.faq__item { box-shadow: inset 0 -1px 0 0 var(--ds-hairline); }
.faq__item:first-child { box-shadow: inset 0 1px 0 0 var(--ds-hairline), inset 0 -1px 0 0 var(--ds-hairline); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-6);
  width: 100%;
  padding: var(--ds-space-6) 0;
  border: 0;
  background: transparent;
  color: var(--ds-heading);
  font-size: var(--ds-size-lead);
  letter-spacing: var(--ds-track-lead);
  text-align: left;
  cursor: pointer;
  transition: color var(--ds-dur-base) var(--ds-ease);
}
.faq__q:hover { color: var(--ds-text-strong); }
.faq__sign {
  position: relative;
  flex: none;
  width: 14px; height: 14px;
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--ds-dur-base) var(--ds-ease),
              opacity var(--ds-dur-base) var(--ds-ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(0deg); opacity: 0; }
.faq__a {
  display: grid;               /* the one grid on the page: a height animation,
                                  not a layout — the system's flexbox rule is
                                  about columns, and no other technique animates
                                  auto height without JS. */
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ds-dur-base) var(--ds-ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--ds-space-6); max-width: 56ch; color: var(--ds-text-muted); }

/* ------------------------------------------------------------- contact cta */
.closing {
  position: relative;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-gradient-rise);
  box-shadow: var(--ds-shadow-edge);
  overflow: hidden;
}
.closing__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-16);
  padding: clamp(2.25rem, 1rem + 4vw, 5rem);
}
.closing__copy { flex: 1 1 22rem; display: flex; flex-direction: column; gap: var(--ds-space-6); }
.closing__copy .h2 { max-width: 16ch; }
.closing__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  color: var(--ds-heading);
}
.closing__form { flex: 1 1 24rem; }

.form { display: flex; flex-direction: column; gap: var(--ds-space-5); }
.field { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.field > span { color: var(--ds-text-muted); font-size: var(--ds-size-label); letter-spacing: var(--ds-track-body); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: rgb(255 255 255 / 0.06);
  color: var(--ds-text-strong);
  box-shadow: var(--ds-shadow-edge);
  transition: background-color var(--ds-dur-fast) var(--ds-ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgb(255 255 255 / 0.35); }
.field input:hover, .field select:hover, .field textarea:hover { background: rgb(255 255 255 / 0.09); }
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--ds-ink-800); color: var(--ds-text-strong); }
.field--split { display: flex; flex-direction: row; gap: var(--ds-space-4); }
.field--split > label { flex: 1 1 0; }
/* Unsichtbares Feld gegen Bots. Nicht display:none — manche Bots ueberspringen
   verborgene Felder; aus dem Sichtfeld geschoben fuellen sie es aus. */
.field__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.form__status { min-height: 1.5em; color: var(--ds-accent); }
.form__status--ok { color: var(--ds-heading); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---------------------------------------------------------------- footer */
.footer { padding-block: var(--ds-space-16) var(--ds-space-12); box-shadow: inset 0 1px 0 0 var(--ds-hairline); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--ds-space-8); align-items: flex-start; justify-content: space-between; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--ds-space-6); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); justify-content: space-between; margin-top: var(--ds-space-12); color: var(--ds-text-muted); font-size: var(--ds-size-label); }

/* ------------------------------------------------------------------ legal */
.legal { padding-top: 148px; }
.legal h2 { margin-top: var(--ds-space-12); }
.legal p { max-width: 64ch; margin-top: var(--ds-space-4); color: var(--ds-text-muted); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- motion */
.enter {
  opacity: 0;
  transform: translateY(var(--ds-enter-shift));
  transition: opacity var(--ds-dur-enter) var(--ds-ease),
              transform var(--ds-dur-enter) var(--ds-ease);
}
.enter--lg { --ds-enter-shift: 36px; }
.enter.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .enter { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- breakpoints */
@media (max-width: 1280px) {
  .hero__visual { max-width: 54rem; }
}

@media (max-width: 810px) {
  .shell, .shell--wide { padding-inline: var(--ds-space-5); }
  .nav__inner { height: 64px; }
  .nav__links {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-8);
    background: rgb(0 0 0 / 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 0 0 var(--ds-hairline);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ds-dur-fast) var(--ds-ease),
                transform var(--ds-dur-fast) var(--ds-ease),
                visibility var(--ds-dur-fast) var(--ds-ease);
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding-block: var(--ds-space-4); box-shadow: inset 0 -1px 0 0 var(--ds-hairline); }
  .nav__links .nav__cta-mobile {
    display: inline-flex;
    margin-top: var(--ds-space-5);
    padding-block: 0;
    box-shadow: none;
    color: var(--ds-on-invert);
  }
  .nav__toggle { display: flex; }

  /* Der Haupt-CTA bleibt auch auf dem Telefon in der Leiste — er ist das
     einzige Element, das Anfragen erzeugt. Bei 375px reicht der Platz nur,
     wenn der Sprachumschalter weicht; den verschiebt das Skript ins Menue,
     wo eine selten benutzte Einstellung besser aufgehoben ist.

     Die Klasse is-compact setzt das Skript erst, nachdem der Umschalter
     tatsaechlich umgehaengt wurde. Faellt das Skript aus, bleibt exakt das
     bisherige Verhalten bestehen, statt CTA und Umschalter zu ueberlagern. */
  .nav__side .btn { display: none; }
  .nav.is-compact .nav__side .btn {
    display: inline-flex;
    padding-inline: var(--ds-space-3);
  }
  .nav.is-compact .nav__cta-mobile { display: none; }
  .nav__links .langswitch {
    margin-top: var(--ds-space-5);
    align-self: flex-start;
  }

  /* Der Radius des Dusk-Gradienten haengt an der Hoehe seines Elements; auf
     Telefonhoehe landet der Rose-Stop sonst mitten im Bild. Gleiche Stops,
     groesserer Radius, damit nur der Schieferbereich sichtbar bleibt. */
  .hero {
    padding-top: 120px;
    background: radial-gradient(200% 160% at 50% 0,
                  var(--ds-dusk-900) 0%, var(--ds-dusk-700) 42%, var(--ds-rose-400) 100%);
  }
  .hero__visual { margin-top: var(--ds-space-2); }
  /* Dot separators land at the start of a wrapped line; stack instead. */
  .hero__trust { flex-direction: column; gap: var(--ds-space-2); }
  .hero__trust li + li::before { display: none; }
  .mock__body { padding: var(--ds-space-6) var(--ds-space-5); gap: var(--ds-space-4); }
  .mock__tile { height: 56px; }
  .mock__mobile { display: none; }

  .section-head { margin-bottom: var(--ds-space-10); }
  .faq__head { position: static; }
  .steps > li { flex: 1 1 13rem; }
  .field--split { flex-direction: column; }
  .why { gap: var(--ds-space-10); }
}