/* ===================================================================
   Simply Retail — Website
   Keine eigenen Farbwerte. Alles kommt aus tokens.css (Design-System).
   =================================================================== */

/* --- Zwei Pfade ------------------------------------------------------
   Die Seite spricht zwei Zielgruppen an. Damit sie sich auf den ersten
   Blick unterscheiden, traegt der Verkaufsstellen-Pfad die Zweitfarbe.
   Statt jede Komponente doppelt zu schreiben, wird der Akzent umgehaengt:
   Buttons, Eyebrows, Haken und Kacheln folgen automatisch.
   Beide Ausfuehrungen sind im Design-System gegen WCAG AA geprueft.        */

[data-path="markt"] {
  --accent:        var(--secondary);
  --accent-rgb:    var(--secondary-rgb);
  --accent-bright: var(--secondary-bright);
  --accent-deep:   var(--secondary-deep);
  --accent-text:   var(--secondary-text);
  --accent-solid:  var(--secondary-solid);
  --accent-soft:   var(--secondary-soft);
  --accent-veil:   var(--secondary-veil);
  --shadow-accent: 0 10px 30px rgba(var(--secondary-rgb), .30);
  --gradient: linear-gradient(135deg, var(--secondary-bright), var(--secondary), var(--secondary-deep));
  /* Die Themenschicht setzt --fg-accent auf :root auf. Sie muss hier neu
     gesetzt werden, sonst faerbt der Teal-Pfad seine Texte weiter gruen.
     Hell traegt die dunkle, Dunkel die helle Auspraegung - beide AA. */
  --fg-accent: var(--secondary-text);
}
[data-theme="dark"] [data-path="markt"],
[data-theme="dark"][data-path="markt"] { --fg-accent: var(--secondary-bright); }

/* --- Das dunkle Ende der Bildmarke -----------------------------------
   Der Verlauf laeuft von der hellen zur tiefen Auspraegung. Auf Weiss
   traegt das tiefe Gruen und gibt der Marke Koerper. Auf Schwarz lief
   sie darin aus - die Marke wirkte verschossen. Dort endet sie deshalb
   beim Markenakzent statt im Tiefton.                                   */
:root { --mark-deep: var(--accent-deep); }
[data-theme="dark"] { --mark-deep: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mark-deep: var(--accent); }
}

/* --- Grundlagen ------------------------------------------------------ */

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

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

body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-head); }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

p { color: var(--fg-secondary); text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
strong { color: var(--fg-primary); font-weight: var(--fw-medium); }

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

.wrap {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

section { padding-block: var(--layout-section-y); position: relative; }
.section-tint { background: var(--bg-raised); }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent-solid); color: var(--white);
  padding: 12px 20px; border-radius: var(--radius-sm); z-index: 200;
}
.skip:focus { left: var(--space-5); top: var(--space-5); }

/* --- Kartengrund je Themenschicht ------------------------------------
   In der hellen Themenschicht liegen Seitengrund und Kartengrund fast
   aufeinander (#F0F0EE / #F7F7F5). Karten wuerden auf getoenten
   Abschnitten verschwinden. Sie bekommen deshalb reines Weiss und einen
   leichten Schatten - das uebernimmt die Ebenentrennung, die auf Dunkel
   der Helligkeitsunterschied leistet. Die Zuweisung steht am Dateiende,
   damit sie die Hintergruende der Komponenten sicher ueberschreibt.     */

:root:not([data-theme="dark"]) {
  --karte: var(--white);
  --karte-schatten: 0 1px 2px rgba(24,24,24,.04), 0 8px 24px rgba(24,24,24,.05);
}
[data-theme="dark"] { --karte: var(--bg-card); --karte-schatten: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --karte: var(--bg-card); --karte-schatten: none; }
}

/* --- Kleinteile ------------------------------------------------------ */

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.62em;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow); line-height: var(--lh-eyebrow);
  text-transform: uppercase; color: var(--fg-accent);
  margin-bottom: var(--space-5);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
}

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-secondary); max-width: 62ch; }
.small { font-size: var(--fs-small); color: var(--fg-tertiary); }

.sec-head { max-width: 66ch; margin-bottom: var(--space-8); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head > p { margin-top: var(--space-5); }

.glow {
  position: absolute; border-radius: 50%; filter: blur(110px);
  pointer-events: none; z-index: -1;
  background: var(--accent-soft);
}
/* Der Lichtschein sitzt bewusst ausserhalb des Rasters. Ohne diese Klammer
   verbreitert er das Dokument und die Seite laesst sich seitlich schieben -
   "overflow-x: hidden" am body allein reicht dafuer nicht. */
.hero, .hero-page { overflow: hidden; }

/* --- Logo ------------------------------------------------------------ */

.lockup {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-head); line-height: 1;
  white-space: nowrap; font-size: 1.3rem;
}
.lockup .mark { width: 1.62em; height: auto; flex: 0 0 auto; }
.lockup .word { display: inline-flex; align-items: baseline; }
.lockup .const {
  font-weight: var(--logo-constant-weight);
  letter-spacing: var(--logo-constant-tracking);
  color: var(--logo-constant);
}
.lockup .desc {
  font-weight: var(--logo-descriptor-weight);
  letter-spacing: var(--logo-descriptor-tracking);
  /* Designvorgabe: "Simply" ist gruppenweit invariant, NUR der
     Geschaeftsbereich traegt die Markenfarbe. Vorher stand hier die
     Textfarbe - das Logo war dadurch einfarbig und wirkte kraftlos.
     Der reine Markenton erfuellt die AA-Textschwelle nicht; Wortmarken
     sind davon nach WCAG 1.4.3 ausdruecklich ausgenommen.               */
  color: var(--logo-descriptor-color);
  margin-left: 0.14em;
}
/* Auf dunklem Grund traegt der reine Ton zu wenig - dort die helle
   Auspraegung, wie im Brandbook fuer dunkle Anwendungen vorgesehen. */
[data-theme="dark"] .lockup .desc { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lockup .desc { color: var(--accent-bright); }
}

/* --- Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 0.96rem; font-weight: var(--fw-medium);
  letter-spacing: -0.01em; cursor: pointer;
  border: 1px solid transparent;
  background: var(--accent-solid); color: var(--white);
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn .arrow { transition: transform var(--duration-fast) var(--ease-standard); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  background: rgba(var(--fg-primary-rgb), .04);
  color: var(--fg-primary);
  border-color: var(--line);
}
.btn-ghost:hover { background: rgba(var(--fg-primary-rgb), .08); border-color: rgba(var(--fg-primary-rgb), .26); }

.btn-block { width: 100%; }

.textlink {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--fg-accent); font-weight: var(--fw-medium); font-size: 0.95rem;
}
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }

/* --- Kopfzeile ------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(var(--bg-page-rgb), .78);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 76px; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { font-size: 0.94rem; color: var(--fg-secondary); transition: color var(--duration-fast) var(--ease-standard); }
.nav-links a:hover { color: var(--fg-primary); }
.nav-links a[aria-current] {
  color: var(--fg-primary);
  box-shadow: inset 0 -2px 0 var(--accent);
  padding-bottom: 3px;
}
.nav-cta { display: inline-flex; }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; border-radius: var(--radius-sm);
}
.burger span { display: block; width: 22px; height: 2px; background: var(--fg-primary); border-radius: 2px; }
.burger span + span { margin-top: 5px; }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav-menu {
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--bg-page); border-bottom: 1px solid var(--line);
    padding: var(--space-6) var(--layout-gutter);
    display: none;
  }
  .nav-menu.is-open { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .nav-links a { font-size: 1.05rem; }
  .nav-cta { justify-content: center; }
}

/* --- Hero ------------------------------------------------------------ */

.hero { padding-block: clamp(58px, 8vw, 100px) clamp(44px, 6vw, 68px); }
/* Die Ueberschrift traegt die Aussage - sie darf nicht ueber die ganze
   Bildschirmbreite laufen, sonst zerfaellt der Satz beim Lesen. */
.hero-text h1 { max-width: 17ch; }
.hero-text .sub { max-width: 58ch; }
.hero h1 .hl {
  background: linear-gradient(96deg, var(--accent-text) 8%, var(--secondary-text) 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { margin-top: var(--space-6); font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 54ch; }

.hero-page { padding-block: clamp(52px, 6vw, 78px) clamp(30px, 4vw, 46px); }
.hero-page h1 { max-width: 20ch; }
.hero-page .sub { margin-top: var(--space-6); max-width: 58ch; font-size: var(--fs-lead); line-height: var(--lh-lead); }

.crumb { display: flex; gap: 0.55em; align-items: center; font-size: var(--fs-small); color: var(--fg-tertiary); margin-bottom: var(--space-5); }
.crumb a:hover { color: var(--fg-primary); }

/* Kennzahlen unter dem Hero */
.facts {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 46px);
  margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--line);
}
.facts div { min-width: 0; }
.facts b {
  display: block; font-family: var(--font-head);
  font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: var(--fw-semibold);
  letter-spacing: -0.03em; color: var(--fg-primary); line-height: 1;
}
.facts b em { font-style: normal; color: var(--fg-accent); }
.facts span { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--fg-tertiary); }

/* --- Die Weiche: zwei Zielgruppen ----------------------------------- */

.fork { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.fork-card h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

.fork-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 36px);
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.fork-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--gradient);
}
.fork-card::after {
  content: ""; position: absolute; inset: -40% -30% auto auto;
  width: 320px; height: 320px; border-radius: 50%;
  background: var(--accent-veil); filter: blur(60px);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
  pointer-events: none;
}
.fork-card:hover, .fork-card:focus-within {
  border-color: rgba(var(--accent-rgb), .45);
  transform: translateY(-3px);
}
.fork-card:hover::after, .fork-card:focus-within::after { opacity: 1; }

.fork-card .ic {
  width: 50px; height: 50px; border-radius: var(--radius-md);
  display: grid; place-items: center; color: var(--fg-accent);
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .24);
  margin-bottom: var(--space-6);
}
.fork-card h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.fork-card p { margin-top: var(--space-4); }
.fork-card .fork-list { margin-top: var(--space-6); display: grid; gap: 10px; }
.fork-card .fork-list li { display: flex; gap: 10px; font-size: 0.94rem; color: var(--fg-secondary); }
.fork-card .fork-list li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 0.62em; }
.fork-card .actions { margin-top: auto; padding-top: var(--space-7); }

/* --- Karten ---------------------------------------------------------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.card:hover { border-color: rgba(var(--fg-primary-rgb), .16); transform: translateY(-2px); }
.card .ic {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  display: grid; place-items: center; color: var(--fg-accent);
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .2);
  margin-bottom: var(--space-5);
}
.card h3 { font-size: 1.15rem; }
.card p { margin-top: 8px; font-size: 0.95rem; }

/* --- Zweispalter mit Tafel ------------------------------------------ */

.split { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(36px, 5vw, 62px); align-items: center; }
.split.flip .panel { order: -1; }

.panel {
  background: linear-gradient(160deg, var(--karte), var(--bg-page));
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(26px, 3vw, 34px); box-shadow: var(--shadow-lg);
}
.panel h3 { margin-bottom: var(--space-6); }

.checklist { display: grid; gap: 13px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.97rem; color: var(--fg-secondary); }
.checklist .ck {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--accent-soft); color: var(--fg-accent);
}
.panel .note {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-tertiary);
}

/* --- Kacheln --------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.tile {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 20px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  text-align: center; font-size: 0.92rem; color: var(--fg-secondary);
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.tile:hover { border-color: rgba(var(--accent-rgb), .4); color: var(--fg-primary); transform: translateY(-2px); }
.tile .dot {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--fg-accent);
  border: 1px solid rgba(var(--accent-rgb), .18);
}

/* --- Ablauf ---------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.step {
  position: relative;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.step .n {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: var(--space-5);
  background: var(--accent-solid); color: var(--white);
  font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 0.95rem;
}
.step h3 { font-size: 1.08rem; }
.step p { margin-top: 7px; font-size: 0.93rem; }

/* --- Modelle --------------------------------------------------------- */

.models { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.model {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 32px);
}
.model::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.model.is-teal::before { background: var(--secondary); }
.model.is-teal .pill { background: var(--secondary-soft); color: var(--secondary-text); }
.model h3 { margin: var(--space-4) 0 8px; }
.model .fit { margin-top: var(--space-5); font-size: 0.93rem; color: var(--fg-secondary); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.73rem; font-weight: var(--fw-medium); letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--fg-accent);
}

/* --- Netzwerk -------------------------------------------------------- */

.net {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 44px);
  background:
    radial-gradient(100% 140% at 50% 0%, var(--accent-veil), transparent 62%),
    var(--bg-raised);
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.stat { text-align: center; }
.stat b {
  display: block; font-family: var(--font-head);
  font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: var(--fw-semibold);
  letter-spacing: -0.04em; line-height: 1; color: var(--fg-accent);
}
.stat span { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--fg-tertiary); }

/* --- Kontakt und Formular ------------------------------------------- */

.formwrap { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(36px, 5vw, 62px); align-items: start; }

.contactcard {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6);
}
.contactcard a { color: var(--fg-accent); }
.contactcard a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contactcard p + p { margin-top: 10px; }

.seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-6);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 5px;
}
.seg button {
  border: 0; cursor: pointer; font-family: var(--font-body);
  font-size: 0.88rem; font-weight: var(--fw-medium);
  padding: 10px 18px; border-radius: 9px;
  background: transparent; color: var(--fg-tertiary);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.seg button:hover { color: var(--fg-primary); }
.seg button[aria-pressed="true"] { background: var(--accent-solid); color: var(--white); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { margin-bottom: var(--space-4); }
label { display: block; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--fg-secondary); margin-bottom: 7px; }
input, select, textarea {
  width: 100%; padding: 13px 15px;
  font-family: var(--font-body); font-size: 0.95rem;
  color: var(--fg-primary); background: var(--bg-page);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
input::placeholder, textarea::placeholder { color: var(--fg-tertiary); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23838A7D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
textarea { resize: vertical; min-height: 118px; }
.hp { position: absolute; left: -9999px; }
.formnote { margin-top: 10px; font-size: 0.8rem; color: var(--fg-tertiary); }
.formnote a { color: var(--fg-accent); }
.formmsg {
  display: none; margin-top: var(--space-4);
  padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--fg-accent); font-size: 0.93rem;
}
.formmsg.is-error { background: rgba(190, 40, 40, .09); border-color: rgba(190, 40, 40, .32); color: #A31515; }

/* --- Abschluss-Band -------------------------------------------------- */

.cta-band {
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(34px, 4vw, 54px);
  background: radial-gradient(90% 130% at 50% 0%, var(--accent-veil), transparent 60%), var(--bg-card);
  text-align: center;
}
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band p { margin: var(--space-5) auto 0; max-width: 56ch; }
.cta-band .actions { justify-content: center; }

/* --- Fusszeile ------------------------------------------------------- */

.footer { background: var(--bg-raised); border-top: 1px solid var(--line); padding-block: var(--space-9) var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-7); }
.footer h4 { font-size: 0.92rem; font-weight: var(--fw-medium); color: var(--fg-primary); margin-bottom: var(--space-5); }
.footer nav a { display: block; margin-bottom: 10px; font-size: 0.92rem; color: var(--fg-tertiary); }
.footer nav a:hover { color: var(--fg-primary); }
.footer .about { margin-top: var(--space-5); font-size: 0.92rem; }
.footer .disclaimer { margin-top: var(--space-5); font-size: 0.82rem; color: var(--fg-tertiary); max-width: 62ch; }
.footer-legal {
  margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: 0.83rem; color: var(--fg-tertiary);
}
.footer-legal .legal-links { display: flex; gap: var(--space-5); }
.footer-legal a:hover { color: var(--fg-primary); }

/* --- Rechtsseiten ---------------------------------------------------- */

.legal { padding-block: clamp(48px, 6vw, 76px) var(--space-9); }
.legal .wrap { max-width: 82ch; }
.legal h1 { margin-bottom: var(--space-4); }
.legal .stand { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--fg-tertiary); }
.legal h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-top: var(--space-9);
  padding-top: var(--space-6); border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: var(--space-8); }
.legal h3 { font-size: 1.05rem; margin-top: var(--space-6); }
.legal p, .legal address, .legal ul { margin-top: var(--space-4); color: var(--fg-secondary); font-style: normal; }
.legal ul { padding-left: 1.1em; list-style: disc; }
.legal li { margin-top: 8px; }
.legal a { color: var(--fg-accent); }
.legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-toc {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6); padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.legal-toc a { font-size: 0.92rem; color: var(--fg-secondary); }
.legal .notice {
  margin-top: var(--space-8); padding: var(--space-6);
  border: 1px solid rgba(214, 158, 46, .34); border-radius: var(--radius-lg);
  background: rgba(214, 158, 46, .07);
}
.legal .notice h3 { margin-top: 0; font-size: 1rem; color: #E5B65C; }
.legal .back { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--space-9); color: var(--fg-accent); }

/* --- 404 ------------------------------------------------------------- */

.nf { min-height: 72svh; display: grid; place-items: center; text-align: center; padding-block: var(--space-9); }
.nf .code {
  font-family: var(--font-head); font-size: clamp(4rem, 14vw, 9rem);
  font-weight: var(--fw-semibold); letter-spacing: -0.06em; line-height: 0.9;
  background: linear-gradient(94deg, var(--fg-primary) 10%, var(--accent) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nf h1 { margin-top: var(--space-5); font-size: clamp(1.5rem, 3vw, 2.1rem); }
.nf p { margin: var(--space-5) auto 0; max-width: 46ch; }
.nf .actions { justify-content: center; }

/* --- Einblenden ------------------------------------------------------
   Ohne JavaScript ist alles sichtbar. Erst wenn das Skript laeuft und
   Bewegung erwuenscht ist, wird ueberhaupt etwas versteckt.              */

.reveal { opacity: 1; transform: none; }
html.anim .reveal { opacity: 0; transform: translateY(20px); }
html.anim .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--duration-reveal) var(--ease-entrance),
              transform var(--duration-reveal) var(--ease-entrance);
}
@media (prefers-reduced-motion: reduce) {
  html.anim .reveal { opacity: 1; transform: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Schmalere Ansichten -------------------------------------------- */

@media (max-width: 1000px) {
  .grid-3, .steps { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .hero-grid, .split, .formwrap, .fork, .models { grid-template-columns: 1fr; }
  .split.flip .panel { order: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .grid-3, .steps, .row { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 100%; }
  .seg { width: 100%; }
  .seg button { flex: 1 1 auto; }
}

/* --- Der Schub: Vertrieb und Marketing -------------------------------
   Regalplatz allein verkauft nichts. Diese Section erzaehlt, was NACH der
   Platzierung passiert. Sie ist bewusst anders gebaut als die Kartenraster
   davor: links die Aussage, rechts drei Kanaele als gestapelte Zeilen mit
   durchgehender Linie - das liest sich als Kette, nicht als Auswahl.      */

.push { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 5vw, 68px); align-items: start; }
.push-intro { position: sticky; top: 108px; }
.push-intro .claim {
  margin-top: var(--space-6);
  font-family: var(--font-head); font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  font-weight: var(--fw-medium); letter-spacing: -0.015em; color: var(--fg-primary);
}
.push-intro p { margin-top: var(--space-5); }

.kanaele { display: grid; gap: 0; }
/* Die durchgehende Linie verbindet die Kanaele sichtbar zu einer Kette.
   Sie sitzt auf der Liste, nicht auf der ganzen Section - sonst laeuft
   sie unter dem Abschlusskasten weiter und die Kette hat kein Ende. */
.kanal-liste { position: relative; display: grid; gap: 0; }
.kanal-liste::before {
  content: ""; position: absolute; left: 27px; top: 34px; bottom: 34px;
  width: 2px; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), .12));
}

.kanal {
  position: relative; display: grid;
  grid-template-columns: 56px 1fr; gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
}
.kanal:first-child { border-top: 0; }
.kanal .nr {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--karte); color: var(--fg-accent);
  border: 1px solid rgba(var(--accent-rgb), .28);
  box-shadow: 0 0 0 6px var(--bg-page);
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.kanal:hover .nr { background: var(--accent-solid); color: var(--white); border-color: transparent; }
.kanal h3 { font-size: 1.14rem; }
.kanal p { margin-top: 8px; font-size: 0.96rem; }
.kanal .marker {
  display: inline-flex; align-items: center; gap: 0.45em;
  margin-top: var(--space-4); font-size: var(--fs-small);
  color: var(--fg-tertiary);
}
.kanal .marker::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* Die Aussage, die den Abschnitt traegt. */
.push-note {
  margin-top: var(--space-7); padding: var(--space-6);
  border: 1px solid rgba(var(--accent-rgb), .28); border-radius: var(--radius-lg);
  background: var(--accent-veil);
}
.push-note p { color: var(--fg-primary); font-size: 0.98rem; }

@media (max-width: 880px) {
  .push { grid-template-columns: 1fr; }
  .push-intro { position: static; }
}
@media (max-width: 620px) {
  .kanal-liste::before { left: 21px; }
  .kanal { grid-template-columns: 44px 1fr; gap: var(--space-4); }
  .kanal .nr { width: 44px; height: 44px; }
}

/* --- Nachtrag: Kartengrund und Buttonschrift -------------------------- */

.card, .step, .tile, .fork-card, .model, .contactcard, .seg, .panel {
  background: var(--karte);
  box-shadow: var(--karte-schatten);
}
.panel { background: linear-gradient(160deg, var(--karte), var(--bg-page)); }

/* Der Aufruf in der Kopfzeile ist ein Button, kein Menuepunkt. Ohne diese
   Regel gewinnt ".nav-links a" ueber ".btn" - die Schrift blieb grau und
   stand auf dem dunkelgruenen Grund praktisch unlesbar. */
.nav-links a.btn { color: var(--white); }
.nav-links a.btn:hover { color: var(--white); }