/* =================================================================
   AIQ Studio · Website aiq-studio.ch · Produktions-Stylesheet
   Stand: 2026-06-13
   Quelle Tokens: 01_SOURCE_OF_TRUTH/design_system.md (DEC-17 bis DEC-21)
   Web-Schicht: Decision-Brief Web-Layout-Layer (2026-06-01)
   Build-Brief: 90_WORKING_JOSCHA/website_build_brief.md
   Schriften: lokal aus assets/fonts/ (DSG, keine externen Requests)
   ================================================================= */

/* ---------- Schriften (self-hosted, WOFF2) ---------- */
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (Spiegel aus aiq_slides.css) ---------- */
:root {
  /* Schrift */
  --font-sans: "Switzer", "Switzer Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Neutrale Farben */
  --c-paper: #FFFFFF;
  --c-ink: #0A0A0A;
  --c-ink-2: #1F1F1F;
  --c-muted: #737373;
  --c-rule: #E8E8E8;

  /* Akzente */
  --c-accent: #E63027;     /* Swiss Red · KMU-Linie 1 */
  --c-accent-text: #CE2418; /* Swiss Red, AA-sicher für Kleintext auf Weiss (>=4.5:1) */
  --c-accent-2: #1830C8;   /* Ink Blue · Online-Kurs-Linie 2 (hier nicht genutzt) */

  /* Letter-Spacing */
  --ls-display: -0.025em;
  --ls-heading: -0.018em;
  --ls-body: 0;
  --ls-mono: 0.18em;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Web-Breakpoints (Referenz) */
  --bp-tablet: 720px;
  --bp-desktop: 1080px;

  /* Web-Type-Skala (fluid, clamp zwischen Token-Stufen) */
  --type-web-meta: var(--type-xs, 0.75rem);
  --type-web-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --type-web-lede: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --type-web-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --type-web-h2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --type-web-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --type-web-hero: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);

  --type-xs: 0.75rem;
  --type-sm: 0.875rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--type-web-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection {
  background: var(--c-ink);
  color: var(--c-paper);
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

/* Anker-Ziele unter dem Sticky-Header freistellen */
[id] { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Fokus-Zustände ---------- */
:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}
.closer :focus-visible,
.btn--primary:focus-visible {
  outline-color: var(--c-paper);
}

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--sp-4) var(--sp-5);
}
.skip-link:focus {
  left: 0;
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: 760px; }
.container--wide { max-width: 1320px; }

@media (min-width: 720px) {
  .container { padding-inline: var(--sp-7); }
}
@media (min-width: 1080px) {
  .container { padding-inline: var(--sp-8); }
}
/* Auf sehr breiten Monitoren mehr Inhaltsbreite, damit die Seite nicht als
   schmale Spalte mit grossen Rändern wirkt. Textmasse bleiben per ch gedeckelt. */
@media (min-width: 1600px) {
  .container { max-width: 1400px; }
}

/* ---------- Eyebrow / Mono-Meta ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow .num { color: var(--c-accent); }

/* =================================================================
   Wortmarke (Inline-Einbettung der Mono-Variante, brand_mark_spec.md)
   fill: currentColor, Farbe steuert der Parent-Container
   ================================================================= */
.wordmark text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 96px;
  letter-spacing: var(--ls-display);
  fill: currentColor;
}

/* =================================================================
   Header / Navigation
   ================================================================= */
/* Masthead: Wortmarke links, Standort-Meta rechts, 2px Ink-Linie (wie Mockup). */
.masthead {
  background: var(--c-paper);
  border-bottom: 2px solid var(--c-ink);
}
@media (max-width: 1023px) {
  .masthead { position: sticky; top: 0; z-index: 100; }
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 64px;
}
.masthead .wordmark { color: var(--c-ink); width: 116px; }
.masthead .wordmark svg { width: 100%; height: auto; }
.masthead__right { display: flex; align-items: center; gap: var(--sp-5); }
.masthead__meta {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  display: none;
}
@media (min-width: 1024px) { .masthead__meta { display: inline; } }

/* Sub-Nav: Navigationslinks + roter Erstgespräch-CTA, sticky ab 1024px. */
.subnav {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-rule);
  display: none;
}
@media (min-width: 1024px) {
  .subnav { display: block; position: sticky; top: 0; z-index: 100; }
}
.subnav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 50px;
}
.subnav__inner a {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.subnav__inner a:hover { color: var(--c-ink); }
.subnav__inner a[aria-current="page"] { color: var(--c-ink); }
.subnav .spacer { margin-left: auto; }
.subnav .subnav__cta { color: var(--c-accent-text); }
.subnav .subnav__cta:hover { color: var(--c-ink); }

/* Mobile-Burger (Touch-Ziel min. 44 px) — sitzt im Masthead, nur unter 1024px. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-2);
  margin-right: calc(-1 * var(--sp-2));
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-ink);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* =================================================================
   Mobiles Menü (Vollbild-Overlay, Slide-In von rechts, 200 ms)
   ================================================================= */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-paper);
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.nav-overlay.is-open { transform: translateX(0); }
.nav-overlay[hidden] { display: none; }

.nav-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: var(--sp-8);
}
.nav-overlay__top .wordmark {
  color: var(--c-ink);
  width: 120px;
}
.nav-overlay__close {
  background: transparent;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--c-ink);
}
.nav-overlay__links {
  display: flex;
  flex-direction: column;
}
.nav-overlay__links a {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-rule);
}
.nav-overlay .btn { margin-top: var(--sp-7); align-self: flex-start; }

html.nav-open,
html.nav-open body { overflow: hidden; }

/* =================================================================
   Buttons
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--type-web-body);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--c-ink);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.btn .arr { font-family: var(--font-mono); }
.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-paper);
}
.btn--primary:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-rule);
}
.btn--ghost:hover {
  border-color: var(--c-ink);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* =================================================================
   Sections (Whitespace-Quote >= 40%)
   ================================================================= */
.section {
  padding-block: var(--sp-8);
}
@media (min-width: 1080px) {
  .section { padding-block: var(--sp-9); }
}
/* Trennlinie auf Inhaltsbreite statt randlos: zentriert, deckungsgleich mit
   dem Content-Block. Kein Vollbreiten-Strich mehr, der mit der Header-Linie
   kollidiert oder die seitlichen Ränder betont. */
.section--rule { position: relative; }
.section--rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--sp-5));
  max-width: calc(1280px - 2 * var(--sp-8));
  height: 1px;
  background: var(--c-rule);
}
@media (min-width: 720px) {
  .section--rule::before { width: calc(100% - 2 * var(--sp-7)); }
}
@media (min-width: 1080px) {
  .section--rule::before { width: calc(100% - 2 * var(--sp-8)); }
}
@media (min-width: 1600px) {
  .section--rule::before { max-width: calc(1400px - 2 * var(--sp-8)); }
}

.section-head {
  max-width: 56ch;
  margin-bottom: var(--sp-8);
}
.section-head--flush { margin-bottom: 0; }
.section-head .eyebrow { display: block; margin-bottom: var(--sp-4); }
.section-head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h2);
  line-height: 1.1;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
.section-head p {
  margin-top: var(--sp-4);
  color: var(--c-muted);
  font-size: var(--type-web-lede);
  max-width: 54ch;
}
.section-head .actions { margin-top: var(--sp-6); }

/* Editoriales Zwei-Spalten-Raster für Section-Köpfe:
   Titel links, beschreibender Lead rechts. Füllt die Desktop-Breite,
   statt schmal links zu stehen und rechts tote Fläche zu lassen. */
.section-head--split { max-width: none; }
.section-head--split .section-head__lead { margin-top: var(--sp-5); }
.section-head--split .section-head__lead p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--type-web-body);
  max-width: 58ch;
}
.section-head--split .section-head__lead p + p { margin-top: var(--sp-4); }
.section-head--split .section-head__lead p.lede {
  color: var(--c-ink);
  font-size: var(--type-web-lede);
  font-weight: 300;
}
@media (min-width: 960px) {
  .section-head--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7) var(--sp-9);
    align-items: start;
  }
  .section-head--split .section-head__title { padding-top: var(--sp-1); }
  .section-head--split .section-head__lead { margin-top: 0; }
}

/* =================================================================
   Hero
   ================================================================= */
.hero {
  padding-block: var(--sp-7) 0;
}
@media (min-width: 1080px) {
  .hero { padding-block: var(--sp-8) 0; }
}
/* Eyebrow als kräftiger Kicker mit Akzent-Strich, damit er die grosse
   Headline trägt statt unter ihr zu verschwinden. */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-size: var(--type-sm);
  color: var(--c-ink-2);
}
.hero .eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  background: var(--c-accent);
}
/* Editorialer Hero (Direction A): grosse, vollbreite Headline; darunter eine
   Fusszeile aus Lede + Gate-Bedingung links und Einstieg-Label + Buttons rechts. */
.hero h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-web-hero);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  max-width: 28ch;
  text-wrap: balance;
}
.hero h1 .ac { color: var(--c-accent); }

.hrow {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-8);
  border-top: 1px solid var(--c-rule);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
/* Ab Desktop: Lede links (gedeckelt), Einstieg-Label + Buttons rechts —
   beide unten ausgerichtet, Buttons nebeneinander (wie Mockup). */
@media (min-width: 1240px) {
  .hrow {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-9);
  }
  .hcol { max-width: 46ch; }
  .hero__side { flex: none; }
}
.hrow .lede {
  font-weight: 300;
  font-size: var(--type-web-lede);
  line-height: 1.45;
  color: var(--c-ink-2);
  max-width: 48ch;
}
.hrow .gate {
  margin-top: var(--sp-4);
  color: var(--c-muted);
  font-size: var(--type-web-body);
  line-height: 1.55;
  max-width: 48ch;
}
.hero__side-label {
  display: block;
  margin-bottom: var(--sp-5);
  color: var(--c-muted);
}
.hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.hero__btns .btn { white-space: nowrap; }
@media (max-width: 599px) {
  .hero__btns { flex-direction: column; align-items: stretch; }
  .hero__btns .btn { justify-content: center; }
}

/* Einspaltiger Hero für lange, beschreibende Headlines (z. B. Über uns):
   Headline läuft breiter, Subheadline steht darunter. */
.hero--lead { padding-bottom: var(--sp-8); }
.hero--lead h1 {
  font-size: var(--type-web-h1);
  line-height: 1.06;
  max-width: 26ch;
}
.hero--lead .sub {
  margin-top: var(--sp-6);
  font-weight: 300;
  font-size: var(--type-web-lede);
  color: var(--c-ink-2);
  max-width: 64ch;
}

/* =================================================================
   Dunkles Prozess-Band (Workshop → Discovery → Umsetzung)
   Vollbreite Akzent-Fläche direkt unter dem Hero, macht die
   Angebotsarchitektur in einem Blick sichtbar.
   ================================================================= */
.band {
  background: var(--c-ink);
  color: var(--c-paper);
}
.band .container {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .band .container { grid-template-columns: repeat(3, 1fr); }
}
.band__step {
  display: flex;
  gap: var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.band__step:first-child { border-top: 0; }
@media (min-width: 720px) {
  .band__step {
    padding-block: var(--sp-7);
    padding-left: var(--sp-6);
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .band__step:first-child { padding-left: 0; border-left: 0; }
}
.band__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-web-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-accent);
}
.band__step .band__h {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  letter-spacing: var(--ls-heading);
  line-height: 1.1;
}
.band__t {
  margin-top: var(--sp-2);
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--type-web-body);
}

/* =================================================================
   Feature-Trio (Klarheit · Roadmap · Tempo / Drei Grundsätze)
   ================================================================= */
.trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
}
@media (min-width: 720px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}
.trio__item {
  background: var(--c-paper);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
.trio__num {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
}
.trio__item h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
}
.trio__item p {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}

/* =================================================================
   Modul-Grid (Workshop)
   ================================================================= */
.modules {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
}
@media (min-width: 720px) {
  .modules { grid-template-columns: repeat(2, 1fr); }
}
.mod {
  background: var(--c-paper);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  border-left: 6px solid var(--c-accent);
}
.mod__num {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
}
.mod__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
}
.mod__desc {
  color: var(--c-muted);
  font-size: var(--type-web-body);
  max-width: 48ch;
}

/* =================================================================
   Definitionsliste / Outcome / Zielgruppe
   ================================================================= */
.checklist {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  max-width: 60ch;
}
.checklist li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--type-web-lede);
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: var(--sp-4);
  height: 2px;
  background: var(--c-accent);
}

/* Zwei-Spalten-Split */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 1080px) {
  .split { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-9); }
}
.split-lede {
  font-size: var(--type-web-lede);
  color: var(--c-ink);
  max-width: 54ch;
}
.split-body {
  margin-top: var(--sp-4);
  color: var(--c-muted);
  max-width: 54ch;
}

/* =================================================================
   Studio-Sektion (Über uns): Build-Karten
   Border wie .person, Status-Tag wie .price-card .tag, kein Akzent-Border
   ================================================================= */
.builds {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 720px) {
  .builds { grid-template-columns: repeat(3, 1fr); }
}
.build {
  border: 1px solid var(--c-rule);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
.build__tag {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}
.build h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
}
.build p {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}
.studio-after {
  margin-top: var(--sp-6);
  font-size: var(--type-web-lede);
  color: var(--c-muted);
  max-width: 54ch;
}

/* =================================================================
   Pricing / Investition
   ================================================================= */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 720px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
.price-card {
  border: 1px solid var(--c-rule);
  padding: var(--sp-6) var(--sp-5);
}
.price-card .tag {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}
.price-card .figure {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-web-h2);
  letter-spacing: var(--ls-display);
  line-height: 1;
}
.price-card .figure .unit {
  display: block;
  font-size: var(--type-web-meta);
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: var(--sp-3);
}
.price-card .note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  color: var(--c-muted);
  font-size: var(--type-web-body);
}

/* =================================================================
   Personen-Karten (Über uns)
   ================================================================= */
.people {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 720px) {
  .people { grid-template-columns: repeat(2, 1fr); }
}
.person {
  border: 1px solid var(--c-rule);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
.person__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  letter-spacing: var(--ls-heading);
}
.person__role {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.person__bio {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}

/* =================================================================
   Leistungen als Index-Zeilen (schlank, editorial)
   ================================================================= */
.idx { border-top: 1px solid var(--c-ink); }
.idx .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--c-rule);
  text-decoration: none;
  color: inherit;
}
.idx .row:hover .idx__cta { color: var(--c-accent); }
/* Ganzes Layout: deckungsgleich mit dem Sektionskopf (1fr 1fr, gleicher
   Spaltenabstand) — Überschrift unter dem Titel, Beschreibung unter dem Lead. */
@media (min-width: 960px) {
  .idx .row {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-9);
    align-items: start;
    padding-block: var(--sp-7);
  }
}
/* Linke Box: schmale Nummern-Spalte, Nummer vertikal zentriert zur
   Überschrift (wie im Mockup). */
.idx__nm {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--sp-5);
  align-items: center;
}
.idx__no {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--c-accent);
}
.idx__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2rem);
  letter-spacing: var(--ls-display);
  line-height: 1.05;
}
.idx__title .lbl {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
}
.idx__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
@media (min-width: 960px) { .idx__body { margin-top: 0; } }
.idx__desc { color: var(--c-ink-2); font-size: var(--type-web-body); max-width: 46ch; }
.idx__desc .note { display: block; margin-top: var(--sp-3); color: var(--c-muted); font-size: var(--type-sm); }
.idx__cta {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-ink-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.idx__cta .arr { color: var(--c-accent); }

/* =================================================================
   Entscheidungskriterien (kompakte Liste statt Karten)
   ================================================================= */
.criteria {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--sp-7);
}
@media (min-width: 720px) { .criteria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .criteria { grid-template-columns: repeat(3, 1fr); } }
.criterion { padding-left: var(--sp-5); border-left: 2px solid var(--c-accent); }
.criterion h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-body);
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-2);
}
.criterion p { color: var(--c-muted); font-size: var(--type-sm); }

/* =================================================================
   CTA-Band (Closer) mit Kontaktformular
   ================================================================= */
.closer {
  background: var(--c-ink);
  color: var(--c-paper);
}
.closer .eyebrow { color: rgba(255,255,255,0.6); display: block; margin-bottom: var(--sp-5); }
.closer h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-web-h1);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  max-width: 22ch;
  text-wrap: balance;
}
.closer h2 .ac { color: var(--c-accent); }
.closer__lead {
  margin-top: var(--sp-5);
  font-size: var(--type-web-lede);
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  max-width: 58ch;
}
/* Kopf: grosse Frage-Headline links, prominenter Erstgespräch-Button rechts. */
.closer__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 860px) {
  .closer__head {
    grid-template-columns: 1.5fr auto;
    gap: var(--sp-9);
    align-items: end;
  }
}
.closer__head .btn--primary { justify-self: start; }
@media (min-width: 860px) { .closer__head .btn--primary { justify-self: end; } }
/* Formular schlank darunter, durch eine Hairline abgesetzt. */
.closer__form-block {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.closer__form-intro {
  margin: 0 0 var(--sp-5);
  color: rgba(255,255,255,0.7);
  font-size: var(--type-web-body);
  max-width: 880px;
}
.closer__form-block .contact-form { margin-top: 0; max-width: 880px; }
.closer .actions { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.closer .btn--ghost { color: var(--c-paper); border-color: rgba(255,255,255,0.3); }
.closer .btn--ghost:hover { border-color: var(--c-paper); }

/* ---------- Kontaktformular ---------- */
.contact-form {
  margin-top: var(--sp-7);
  max-width: 640px;
  display: grid;
  gap: var(--sp-5);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 720px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.field label {
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--c-paper);
}
.field input,
.field textarea {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 0;
  color: var(--c-paper);
  font: inherit;
  padding: 0.7rem 0.9rem;
  min-height: 44px;
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--c-paper);
  outline-offset: 1px;
  border-color: var(--c-paper);
}
.form-note {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.contact-form .btn { justify-self: start; }

/* Honeypot: visuell und fuer Screenreader ausgeblendet */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rueckmeldung im Seitenfluss (CSS :target, ohne JavaScript) */
.form-feedback {
  display: none;
  max-width: 640px;
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid rgba(255,255,255,0.35);
}
.form-feedback:target { display: block; }
.form-feedback p { color: var(--c-paper); }
.form-feedback a { color: var(--c-paper); }

/* Sichtbarer Mail-Fallback unter dem Formular */
.contact-fallback {
  margin-top: var(--sp-6);
  color: rgba(255,255,255,0.7);
  font-size: var(--type-web-body);
}
.contact-fallback a { color: var(--c-paper); }

/* =================================================================
   Rechtsseiten (Impressum, Datenschutz)
   ================================================================= */
.legal {
  padding-block: var(--sp-9);
}
.legal h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-web-h1);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--sp-7);
}
.legal h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  letter-spacing: var(--ls-heading);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}
.legal p,
.legal address {
  font-style: normal;
  max-width: 64ch;
  margin-bottom: var(--sp-3);
}
.legal .eyebrow { display: block; margin-bottom: var(--sp-4); }

/* =================================================================
   Footer
   ================================================================= */
.site-footer {
  border-top: 2px solid var(--c-ink);
  padding-block: var(--sp-8);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer .wordmark { color: var(--c-ink); width: 120px; margin-bottom: var(--sp-4); }
.site-footer .tagline-mini {
  color: var(--c-muted);
  font-size: var(--type-web-body);
  max-width: 32ch;
}
.foot-col__title {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}
.foot-col a {
  display: block;
  text-decoration: none;
  color: var(--c-ink);
  font-size: var(--type-web-body);
  padding: 0.6rem 0;
  transition: color 0.15s ease;
}
.foot-col a:hover { color: var(--c-accent); }
.site-footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
}
.site-footer__legal a {
  color: var(--c-muted);
  text-decoration: none;
  padding: 0.8rem 0;
}
.site-footer__legal a:hover { color: var(--c-ink); }
/* Copyright nimmt den freien Platz, Datenschutz/Impressum rücken an den
   rechten Rand. Auf Mobile (< 720px) bleibt die Zeile gestapelt. */
@media (min-width: 720px) {
  .site-footer__legal > span { flex: 1; }
}

/* =================================================================
   Fliesstext-Block unter Section-Head (Intro, Approach, Use-Cases-Lede)
   ================================================================= */
.section-text {
  max-width: 64ch;
  margin-bottom: var(--sp-8);
}
.section-text p {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}
.section-text p + p { margin-top: var(--sp-4); }
.section-text p.lede {
  color: var(--c-ink);
  font-size: var(--type-web-lede);
  font-weight: 300;
}
.section-text--flush { margin-bottom: 0; }

/* =================================================================
   Problem-Karten (vier Beobachtungen, ruhig statt dramatisch)
   ================================================================= */
.problems {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
}
@media (min-width: 720px) {
  .problems { grid-template-columns: repeat(2, 1fr); }
}
.problem {
  background: var(--c-paper);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
.problem__num {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-5);
}
.problem h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
}
.problem p {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}

/* =================================================================
   Angebots-Karten (Workshop · Discovery · Umsetzung)
   Workshop und Discovery primär (Akzent-Oberkante), Umsetzung gated
   ================================================================= */
.offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 960px) {
  .offers { grid-template-columns: repeat(3, 1fr); }
}
.offer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--c-rule);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
.offer--primary { border-top-color: var(--c-accent); }
.offer__label {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}
.offer--primary .offer__label { color: var(--c-accent); }
.offer__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
}
.offer__lead {
  color: var(--c-ink);
  font-size: var(--type-web-body);
  margin-bottom: var(--sp-5);
}
.offer__sub {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}
.offer__for {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}
.offer__note {
  margin-top: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-accent);
  font-size: var(--type-web-body);
  color: var(--c-ink-2);
}
.offer .btn {
  margin-top: var(--sp-6);
  align-self: flex-start;
}
/* Button am Kartenboden ausrichten, wenn darüber keine Note steht */
.offer__spacer { margin-top: auto; }

/* Kompakte Häkchenliste (in Angebots-Karten) */
.tlist {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.tlist li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--type-web-body);
  color: var(--c-ink);
  line-height: 1.45;
}
.tlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.75rem;
  height: 2px;
  background: var(--c-accent);
}

/* =================================================================
   Use-Case-Karten (sechs typische Ausgangspunkte)
   ================================================================= */
.usecases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
}
@media (min-width: 720px) {
  .usecases { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .usecases { grid-template-columns: repeat(3, 1fr); }
}
.usecase {
  background: var(--c-paper);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
.usecase__num {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
}
.usecase h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
}
.usecase p {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}

/* =================================================================
   Prozess-Schritte (vier, mit Oberkante als Zeitstrahl)
   ================================================================= */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-6); }
}
@media (min-width: 1080px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.step {
  border-top: 2px solid var(--c-ink);
  padding-top: var(--sp-5);
}
.step__num {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.step h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
}
/* Gleiche Kopfhöhe im Mehrspalter, damit alle Schritt-Beschreibungen
   auf derselben Linie starten (kein Höhenversatz bei längeren Titeln). */
@media (min-width: 720px) {
  .step h3 { min-height: 2.5em; }
}
.step p {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}

/* =================================================================
   Prinzipien (Trust-Section, Arbeitsprinzipien)
   Akzent-Kante links, disziplinierter Ein-Farb-Einsatz
   ================================================================= */
.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 720px) {
  .principles { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-6); }
}
@media (min-width: 1080px) {
  .principles { grid-template-columns: repeat(3, 1fr); }
}
.principle {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-accent);
}
.principle h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-web-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
}
.principle p {
  color: var(--c-muted);
  font-size: var(--type-web-body);
}

/* =================================================================
   Fokusbereiche in Personenkarten (Über uns)
   ================================================================= */
.person__focus-label {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.person__focus {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.person__focus li {
  font-family: var(--font-mono);
  font-size: var(--type-web-meta);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-ink-2);
  border: 1px solid var(--c-rule);
  padding: var(--sp-2) var(--sp-3);
}

/* =================================================================
   Netzwerk-Notiz (unter den Personenkarten / About-Section)
   ================================================================= */
.network-note {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-rule);
  color: var(--c-muted);
  font-size: var(--type-web-body);
  max-width: 70ch;
}
.about-cta { margin-top: var(--sp-7); }

/* =================================================================
   Select im Kontaktformular (gleiche Optik wie input/textarea)
   ================================================================= */
.field select {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 0;
  color: var(--c-paper);
  font: inherit;
  padding: 0.7rem 0.9rem;
  min-height: 44px;
  width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-paper) 50%),
                    linear-gradient(135deg, var(--c-paper) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1.15em), calc(100% - 13px) calc(1.15em);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:focus-visible {
  outline: 2px solid var(--c-paper);
  outline-offset: 1px;
  border-color: var(--c-paper);
}
.field select option {
  color: var(--c-ink);
}

/* ---------- Print ---------- */
@media print {
  .masthead, .subnav, .site-footer, .nav-toggle, .nav-overlay,
  .skip-link, .contact-form, .form-feedback { display: none; }
  body { font-size: 11pt; }
  .closer { background: #fff; color: #000; }
  .closer .eyebrow, .contact-fallback { color: #000; }
  .contact-fallback a { color: #000; }
}