@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --papier: #f2efe8;
  --flaeche: #e8e3d9;
  --linie: #d8d1c4;
  --stein: #6b665e;
  --stein-flaeche: #5c574f; /* Stein auf --flaeche, damit AA (5,6:1) hält */
  --tinte: #1c1b19;
  --rost: #c24e25;
  --rost-dunkel: #a3401d;

  --mass: 1120px;
  --rand: clamp(20px, 5vw, 48px);
  --takt: clamp(72px, 11vw, 144px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  caret-color: var(--rost);
}

::selection { background: var(--rost); color: #fff; }
p, li, dd { text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rost-dunkel); }
:focus-visible { outline: 2px solid var(--rost); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--tinte); color: var(--papier); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.skip:hover { color: #fff; }

.wrap { width: 100%; max-width: var(--mass); margin: 0 auto; padding: 0 var(--rand); }

/* Kopf */
.kopf { padding: 24px 0; }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.marke svg { width: 32px; height: 32px; flex: none; }
.kopf nav { display: flex; gap: clamp(16px, 3vw, 32px); font-size: 0.9375rem; }
.kopf nav a { text-decoration: none; color: var(--stein); }
.kopf nav a:hover { color: var(--tinte); }
@media (max-width: 560px) { .kopf nav a:not(.nav-kontakt) { display: none; } }

/* Hero */
.hero { padding: clamp(40px, 7vw, 88px) 0 0; }
.hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 7.2vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 650;
  max-width: 17ch;
  text-wrap: balance;
}
.hero h1 span { display: block; color: var(--stein); font-weight: 500; }
.hero .lead { margin: 32px 0 0; max-width: 31em; color: var(--stein); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }
.hero .lead strong { color: var(--tinte); font-weight: 550; }
.frueh { margin: 20px 0 0; font-size: 1rem; }
.frueh a { color: var(--rost-dunkel); font-weight: 600; text-decoration-thickness: 1.5px; }
.frueh a:hover { color: var(--tinte); }

/* Wellenform: WAVE wird MP3 */
.welle { margin: clamp(48px, 7vw, 88px) 0 0; }
.welle-flaeche {
  display: flex; align-items: center; gap: 3px;
  height: clamp(120px, 18vw, 200px);
}
.welle-flaeche i {
  flex: 1 1 0; min-width: 2px; border-radius: 2px;
  background: var(--tinte);
  height: var(--h);
  opacity: 0.82;
  transition: height 1100ms cubic-bezier(.6,0,.2,1) var(--d), opacity 900ms ease var(--d), background-color 900ms ease var(--d);
}
.welle-flaeche i.signal { --signalfarbe: var(--rost); }
.welle.mp3 .welle-flaeche i { height: 4px; opacity: 0.22; }
.welle.mp3 .welle-flaeche i.signal { height: var(--h); opacity: 1; background: var(--signalfarbe); }
.welle figcaption {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie);
  font-size: 0.9375rem; color: var(--stein);
}
.welle figcaption b { color: var(--tinte); font-weight: 550; }
@media (prefers-reduced-motion: reduce) { .welle-flaeche i { transition: none; } }

/* Abschnitte */
.abschnitt { padding: var(--takt) 0 0; }
.abschnitt h2, .kontakt h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 620;
  max-width: 18ch;
  text-wrap: balance;
}
.abschnitt .text, .kontakt .text { margin: 24px 0 0; max-width: 36em; color: var(--stein); }
.abschnitt .text strong { color: var(--tinte); font-weight: 550; }

.zweispaltig { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .zweispaltig { grid-template-columns: 1fr; } }

/* Maßstab: zwei Fragen */
.fragen { list-style: none; margin: 0; padding: 0; counter-reset: frage; }
.fragen li {
  counter-increment: frage;
  display: grid; grid-template-columns: 56px 1fr; gap: 8px;
  padding: 24px 0; border-top: 1px solid var(--linie);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.3; letter-spacing: -0.015em; font-weight: 550;
}
.fragen li:last-child { border-bottom: 1px solid var(--linie); }
.fragen li::before { content: counter(frage); color: var(--rost); font-weight: 650; }
.merksatz { margin: 28px 0 0; color: var(--stein); max-width: 32em; }
.merksatz strong { display: block; margin-top: 6px; color: var(--tinte); font-weight: 600; }

/* Körbe */
.koerbe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 48px 0 0; border-top: 1px solid var(--tinte); }
.korb { padding: 20px 24px 8px 0; }
.korb + .korb { padding-left: 24px; border-left: 1px solid var(--linie); }
.korb dt { display: flex; align-items: baseline; gap: 12px; font-weight: 600; font-size: 1.125rem; }
.korb dt span { font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; color: var(--tinte); font-weight: 650; }
.korb.weg dt span { color: var(--rost); }
.korb dd { margin: 10px 0 0; color: var(--stein); font-size: 1rem; }
@media (max-width: 860px) {
  .koerbe { grid-template-columns: 1fr 1fr; }
  .korb:nth-child(3) { padding-left: 0; border-left: 0; }
  .korb:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 480px) {
  .koerbe { grid-template-columns: 1fr; }
  .korb, .korb + .korb { padding-left: 0; border-left: 0; }
  .korb + .korb { border-top: 1px solid var(--linie); }
}

.ergebnis { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.ergebnis li { padding-top: 14px; border-top: 1px solid var(--linie); }
.ergebnis b { display: block; font-weight: 600; }
.ergebnis span { color: var(--stein); font-size: 1rem; }
@media (max-width: 640px) { .ergebnis { grid-template-columns: 1fr; } }

.modell { margin: 48px 0 0; padding: 28px clamp(20px, 3vw, 32px); background: var(--flaeche); border-radius: 4px; display: grid; grid-template-columns: auto 1fr; gap: 8px 32px; align-items: baseline; }
.modell .zahl { font-size: clamp(2rem, 4vw, 3rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1; }
.modell p { margin: 0; color: var(--stein-flaeche); font-size: 1rem; max-width: 40em; }
.modell p strong { color: var(--tinte); font-weight: 600; }
.modell small { grid-column: 1 / -1; color: var(--stein-flaeche); font-size: 0.875rem; }
@media (max-width: 640px) { .modell { grid-template-columns: 1fr; } }

/* Danach: Industrie Jarvis */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 40px 1fr; padding: 18px 0; border-top: 1px solid var(--linie); }
.schritte li::before { content: counter(schritt); color: var(--stein); font-weight: 600; }
.schritte b { font-weight: 600; }
.schritte span { display: block; color: var(--stein); font-size: 1rem; }
.vertrauen { margin: 32px 0 0; display: grid; gap: 16px; }
.vertrauen p { margin: 0; font-size: 1rem; color: var(--stein); }
.vertrauen p b { display: block; color: var(--tinte); font-weight: 600; font-size: 1.0625rem; }

/* Menschen */
.menschen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin: 48px 0 0; }
.mensch h3 { margin: 0; font-size: 1.375rem; letter-spacing: -0.015em; font-weight: 620; }
.mensch .rolle { margin: 4px 0 0; color: var(--rost-dunkel); font-size: 1rem; font-weight: 550; }
.mensch p { margin: 14px 0 0; color: var(--stein); font-size: 1rem; max-width: 30em; }
@media (max-width: 720px) { .menschen { grid-template-columns: 1fr; } }

/* Kontakt */
.kontakt { padding: var(--takt) 0; }
.kontakt-flaeche { background: var(--tinte); color: var(--papier); border-radius: 6px; padding: clamp(36px, 6vw, 80px) clamp(24px, 5vw, 72px); }
.kontakt-flaeche h2 { color: var(--papier); max-width: 14ch; }
.kontakt-flaeche .text { color: #bdb7ac; }
.knopf {
  display: inline-block; margin-top: 36px;
  background: var(--rost); color: #fff; text-decoration: none;
  padding: 16px 26px; border-radius: 3px; font-weight: 600; font-size: 1.0625rem;
  transition: background-color 160ms ease;
}
.knopf:hover { background: var(--rost-dunkel); color: #fff; }
.kontakt-flaeche :focus-visible { outline-color: var(--papier); }
.kontakt-alt { margin: 18px 0 0; font-size: 0.9375rem; color: #bdb7ac; }
.kontakt-alt a { color: var(--papier); }
.kontakt-alt a:hover { color: #fff; }
.kopieren { margin-left: 8px; font: inherit; font-size: 0.875rem; color: #bdb7ac; background: none; border: 1px solid #4a4741; border-radius: 3px; padding: 4px 10px; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; }
.kopieren:hover { color: var(--papier); border-color: #8a847a; }
.kopieren[data-kopiert] { color: var(--papier); border-color: var(--rost); }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding: 32px 0 48px; font-size: 0.875rem; color: var(--stein); }
.fuss .wrap { display: flex; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 20px; flex-wrap: wrap; }
.fuss a { color: var(--stein); }
.fuss a:hover { color: var(--tinte); }

/* Rechtsseiten */
.recht { padding: clamp(40px, 7vw, 88px) 0 var(--takt); }
.recht h1 { margin: 0 0 32px; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; font-weight: 620; }
.recht h2 { margin: 40px 0 8px; font-size: 1.25rem; letter-spacing: -0.01em; font-weight: 600; }
.recht p, .recht li { max-width: 40em; color: var(--stein); font-size: 1rem; }
.recht p strong { color: var(--tinte); font-weight: 600; }
.platzhalter { background: #f6dccf; color: var(--rost-dunkel); padding: 0 4px; border-radius: 2px; }