/* ---------- Schriften (lokal, latin) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
/* Angepasste Ersatzschrift, damit beim Schriftwechsel nichts springt */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%;
}

:root {
  --bg: #f3f3f1;
  --surface: #ffffff;
  --surface-2: #e7e7e4;
  --ink: #17171a;
  --ink-2: #2f2f34;
  --muted: #5d5d63;
  --line: #dcdcd8;
  --line-strong: #c4c4bf;

  --red: #cd1222;
  --red-hover: #b20f1d;
  --red-deep: #8f0c17;
  --red-tint: #fbebea;
  --on-dark: #f3f3f1;
  --on-dark-2: #b9b9bd;

  --font: "Poppins", "Poppins Fallback", "Segoe UI", system-ui, sans-serif;

  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2vw, 3.1rem);
  --fs-display: clamp(2.15rem, 1.3rem + 3.9vw, 4.9rem);

  --r-ui: 8px;
  --r-box: 16px;

  --shadow-s: 0 1px 2px rgb(20 20 24 / 0.05), 0 4px 14px rgb(20 20 24 / 0.05);
  --shadow-m: 0 2px 4px rgb(20 20 24 / 0.05), 0 18px 40px -12px rgb(20 20 24 / 0.18);
  --shadow-l: 0 4px 8px rgb(20 20 24 / 0.04), 0 32px 64px -20px rgb(20 20 24 / 0.28);

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(88px, 10vw, 168px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --z-header: 50;
  --z-float: 40;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scrollbar-color: var(--line-strong) var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--red); }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-ui);
  text-decoration: none; font-weight: 600;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 16px; }

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

.section { padding-block: var(--section); }
.section--surface { background: var(--surface); }
.section--warm { background: var(--surface-2); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--ink h2, .section--ink h3 { color: #fff; }

/* ---------- Typrollen ---------- */
.h-display { font-size: var(--fs-display); line-height: 1.12; letter-spacing: -0.04em; font-weight: 600; }
.h-section { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.035em; }
.h-card { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 56ch; }

.section-head { display: grid; gap: 20px; margin-bottom: clamp(48px, 6vw, 80px); max-width: 780px; }
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end; gap: 20px 72px;
}
.section-head--wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-ui);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.16s var(--ease-out), color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.2s var(--ease-out); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--red-hover); }
  .btn:hover svg { transform: translateX(3px); }
}
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
.btn--block { width: 100%; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg);
  transition: background-color 0.2s ease;
      border-bottom: 1px solid #d7d7d7;
}
.site-header.is-scrolled { background: var(--surface); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 16px; }
.brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.brand img { width: 214px; height: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(24px, 3.5vw, 56px) clamp(72px, 9vw, 136px); overflow: hidden; }
/* Zwei Spalten ab der ersten Zeile: Text links, Video rechts daneben. So steht das Video auch auf
   Laptops (1366 × 720) vollständig im ersten Bildschirm und darf größer sein. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  column-gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.hero-kicker { margin-bottom: 18px; font-weight: 600; color: var(--red); font-size: var(--fs-lead); letter-spacing: -0.01em; }
.hero h1 { margin-bottom: clamp(24px, 2.6vw, 36px); font-size: clamp(2.15rem, 1.1rem + 2.7vw, 3.9rem); }
.hero .lead { margin-bottom: 32px; }
.hero .lead strong { font-weight: 600; color: var(--ink); }

.proof-list { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.proof-list li { display: inline-flex; align-items: center; gap: 8px; }

/* Absender unter dem Button: Gesicht zum "Ich baue Ihnen ..." */
.hero-trust {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line);
  max-width: 30rem;
  font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2);
}
.hero-trust img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: var(--ink); }
.hero-trust b { font-weight: 600; color: var(--ink); }
.hero-trust small { display: block; font-size: 0.8125rem; color: var(--muted); }

.capacity { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-weight: 600; color: var(--red-deep); }
.capacity-mark { position: relative; flex: none; width: 10px; height: 10px; border-radius: 2.5px; background: var(--red); transform: rotate(45deg); }

/* Video im Hero */
.hero-visual { position: relative; padding-block: 0 6%; }
/* Erklärvideo im Hochformat 4:5 (wie die Anzeigen, für das Handy gebaut). Auf dem Desktop über die Bildschirmhöhe
   begrenzt (Kopfzeile 88px + Abstände), damit es vollständig im ersten Bildschirm steht. */
.video-frame {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5;
  width: min(100%, 32rem, calc((100svh - 88px - 72px) * 0.8));
  margin-inline: auto;
  border-radius: var(--r-box);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 30px 60px -28px rgb(20 20 24 / 0.45); /* taste-skill-ignore: schwebendes Video wie die Browser-Mockups der Startseite */
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
/* Über dem Video nur Play-Button und Laufzeit. Der Titel steht groß im Vorschaubild (_poster/poster.html). */
.video-play {
  position: absolute; inset: 0;
  border: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Klassischer runder Play-Button: weiß mit rotem Dreieck, sofort als Video erkennbar */
.video-play-icon {
  --size: clamp(76px, 7vw, 96px);
  position: absolute; left: 50%; top: 46%;
  width: var(--size); height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; color: var(--red);
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.45), 0 0 0 8px rgb(255 255 255 / 0.28); /* taste-skill-ignore: schwebender Play-Button */
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s ease, color 0.18s ease;
}
.video-play-icon svg { width: 40%; height: 40%;     margin-left: -5px;}
/* Laufzeit oben rechts, wie bei Videoplattformen */
.video-duration {
  position: absolute; top: clamp(12px, 1.6vw, 18px); right: clamp(12px, 1.6vw, 18px);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgb(23 23 26 / 0.82); color: #fff;
  font-size: 0.8125rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.video-duration svg { width: 11px; height: 11px; }
.video-play:active .video-play-icon { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .video-play:hover .video-play-icon { transform: scale(1.08); color: var(--red-hover); box-shadow: 0 16px 40px -8px rgb(0 0 0 / 0.5), 0 0 0 12px rgb(255 255 255 / 0.32); } /* taste-skill-ignore: schwebender Play-Button */
}
/* Dezenter Puls, dreimal nach dem Laden: zeigt, dass man hier tippen kann */
@media (prefers-reduced-motion: no-preference) {
  .video-play-icon::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); /* taste-skill-ignore: Puls des Play-Buttons */
    animation: play-pulse 2.2s var(--ease-out) 1.2s 3;
  }
}
@keyframes play-pulse { from { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); } to { box-shadow: 0 0 0 26px rgb(255 255 255 / 0); } } /* taste-skill-ignore: Puls des Play-Buttons */
.video-play:focus-visible { outline-offset: -6px; border-radius: var(--r-box); }
/* Button nach dem Video: klappt mit 0fr → 1fr auf, damit nichts darunter springt */
.video-after {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transform: translateY(8px);
}
.video-after > div { overflow: hidden; display: flex; justify-content: center; }
.video-after .btn { margin-top: 20px; }
.video-after.is-visible { grid-template-rows: 1fr; opacity: 1; transform: none; }
.video-after.is-visible > div { overflow: visible; } /* Fokusrahmen nicht abschneiden */
@media (prefers-reduced-motion: no-preference) {
  .video-after { transition: grid-template-rows 0.4s var(--ease-out), opacity 0.4s var(--ease-out) 0.1s, transform 0.4s var(--ease-out) 0.1s; }
}

/* ---------- Markenraute ---------- */
.diamond {
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 1;
  border-radius: 22%;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #e3141f, var(--red) 55%, #b80f1c); /* taste-skill-ignore: Markenraute aus dem Redesign */
}
.diamond--gray { background: #d9d9d5; }
.diamond--line { background: none; box-shadow: inset 0 0 0 2px var(--line-strong); } /* taste-skill-ignore: Umriss-Raute aus dem Redesign */
.diamond--soft { background: rgb(255 255 255 / 0.09); }
.has-deco { position: relative; overflow: hidden; overflow: clip; isolation: isolate; } /* clip statt hidden, damit position: sticky darin funktioniert */
.has-deco > .container { position: relative; z-index: 1; }

.hero-visual .diamond--hero { width: 70%; top: -4%; right: -14%; } /* bleibt unterhalb der Headline */
.hero-visual .diamond--hero-gray { width: 20%; left: 18%; bottom: -4%; }

/* Listen: Raute statt Häkchen */
.proof-list li::before, .assurances li::before, .pillar-list li::before {
  content: ""; flex: none;
  width: 9px; height: 9px; border-radius: 2.5px;
  background: var(--red); transform: rotate(45deg);
}

/* ---------- Problem (rote Fläche) ---------- */
.section--red { background: var(--red); color: #fff; }
.section--red h2, .section--red .lead { color: #fff; }
.section--red .diamond--soft:nth-of-type(1) { width: 560px; right: -180px; top: -220px; }
.section--red .diamond--soft:nth-of-type(2) { width: 260px; left: -120px; bottom: -110px; }

.situations { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 16px; }
.situation { padding: clamp(30px, 3.6vw, 52px); border-radius: var(--r-box); background: var(--surface); color: var(--ink); box-shadow: 0 30px 60px -30px rgb(80 0 8 / 0.55); } /* taste-skill-ignore: Karten auf Rot wie im Redesign */
.situation--dark { background: var(--ink); color: var(--on-dark); }
.situation ul { display: grid; gap: 18px; }
.situation li { display: flex; align-items: flex-start; gap: 14px; font-weight: 500; }
.situation li svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--red); }
.situation--statement { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.statement-lg { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.025em; color: #fff; }
.situation--statement p:last-child { color: #ff8a91; font-weight: 600; font-size: var(--fs-lead); line-height: 1.45; }

/* ---------- Ablauf (Tintenfläche) ---------- */
.process { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.process-intro { position: sticky; top: 120px; }
.process-intro .btn { margin-top: 34px; }
.steps { display: grid; gap: clamp(40px, 5vw, 64px); }
.step { position: relative; padding-left: clamp(28px, 3vw, 40px); }
.step::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 13px; height: 13px; border-radius: 3px; transform: rotate(45deg); background: var(--red); }
.step:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: calc(0.45em + 20px); bottom: calc(-1 * clamp(40px, 5vw, 64px) + 8px); width: 2px; background: #3a3a40; }
.step h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.step p { color: var(--on-dark-2); max-width: 60ch; }

/* ---------- Wunschauftrag-Website ---------- */
.lead--strong { font-weight: 600; color: var(--ink); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.02em; }

/* ---------- Beispielentwurf mit Markierungen ----------
   Geometrie über Container-Einheiten (cqw), damit die Markierungen bei jeder Breite
   genau auf den Screenshots sitzen. Positionen (--x, --y) stehen im HTML. */
.section-head--stack { gap: 10px; }
.section-head--stack .lead--strong { max-width: none; }

.example { margin: 0; container-type: inline-size; }
.example-visual {
  --pr: 15cqw;      /* Platz rechts für das Handy, damit es im Laptop nichts verdeckt */
  --pb: 7cqw;       /* Überstand des Handys nach unten */
  --bar: 34px;      /* Höhe der Browserleiste */
  --desk-w: calc(100cqw - var(--pr));
  --desk-h: calc(var(--desk-w) * 1000 / 1440);
  --ph-w: 19cqw;
  --ph-h: calc(var(--ph-w) * 900 / 480);
  position: relative;
  padding: 0 var(--pr) var(--pb) 0;
  isolation: isolate;
}
/* Graue Raute hinter dem Handy-Mockup, schaut unten rechts hervor (nicht zwischen Bild und Erklärungen) */
.example-diamond { width: 22%; right: -1%; bottom: -6%; z-index: -1; }
.frame {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-box);
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgb(20 20 24 / 0.45); /* taste-skill-ignore: schwebende Browser-Mockups wie auf der Startseite */
}
.frame img { display: block; width: 100%; height: auto; }
.frame-bar { display: flex; align-items: center; gap: 6px; height: var(--bar); padding: 0 14px; background: #ececea; }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfcfcb; }
.frame-bar span { margin-left: 10px; font-size: 0.8125rem; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.frame--phone {
  position: absolute; right: 0; bottom: 0;
  width: var(--ph-w);
  border-radius: 24px;
  box-shadow: 0 0 0 6px var(--ink), 0 30px 60px -24px rgb(20 20 24 / 0.55); /* taste-skill-ignore: Handy-Rahmen */
}
.frame--phone img { height: var(--ph-h); object-fit: cover; object-position: top; }
.example figcaption { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; max-width: 64ch; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.example figcaption::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 0.5em; border-radius: 2.5px; background: #9a9aa0; transform: rotate(45deg); }

/* Markierungen im Mockup */
.markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.marker-pos { position: absolute; transform: translate(-50%, -50%); }
.marker-pos--desk { left: calc(var(--desk-w) * var(--x)); top: calc(var(--bar) + var(--desk-h) * var(--y)); }
.marker-pos--phone { left: calc(100cqw - var(--ph-w) + var(--ph-w) * var(--x)); top: calc(var(--bar) + var(--desk-h) + var(--pb) - var(--ph-h) + var(--ph-h) * var(--y)); }
.marker, .legend-no {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: 0.875rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgb(205 18 34 / 0.22); /* taste-skill-ignore: Ring der Markierung */
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s ease, background-color 0.18s ease;
}
.marker { pointer-events: auto; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.marker:focus-visible { outline: 2px solid var(--ink); outline-offset: 7px; }

/* Erklärliste: auf dem Desktop als Spalte rechts neben dem Bild, damit Nummer und Erklärung gleichzeitig zu sehen sind */
.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.legend-item {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 6px; align-items: start;
  padding: clamp(16px, 1.5vw, 20px) clamp(18px, 1.8vw, 24px);
  border-radius: var(--r-box);
  background: var(--bg);
  scroll-margin-top: 120px;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.legend-no { grid-row: span 2; margin: 2px 0 0; }
.legend-item h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.015em; }
.legend-item p { color: var(--ink-2); font-size: 0.97rem; }

/* Hervorhebung: Markierung und Listenpunkt mit derselben Nummer, in beide Richtungen.
   Reines CSS über :has(), ohne JavaScript. */
.legend-item.is-active,
.showcase:has(.marker[data-n="1"]:is(:hover, :focus-visible)) .legend-item[data-n="1"],
.showcase:has(.marker[data-n="2"]:is(:hover, :focus-visible)) .legend-item[data-n="2"],
.showcase:has(.marker[data-n="3"]:is(:hover, :focus-visible)) .legend-item[data-n="3"],
.showcase:has(.marker[data-n="4"]:is(:hover, :focus-visible)) .legend-item[data-n="4"],
.legend-item:is(:hover, :focus-within) {
  background: var(--red-tint);
  box-shadow: inset 0 0 0 2px var(--red); /* taste-skill-ignore: Hervorhebung */
}
.marker.is-active,
.marker:is(:hover, :focus-visible),
.showcase:has(.legend-item[data-n="1"]:is(:hover, :focus-within)) .marker[data-n="1"],
.showcase:has(.legend-item[data-n="2"]:is(:hover, :focus-within)) .marker[data-n="2"],
.showcase:has(.legend-item[data-n="3"]:is(:hover, :focus-within)) .marker[data-n="3"],
.showcase:has(.legend-item[data-n="4"]:is(:hover, :focus-within)) .marker[data-n="4"],
.legend-item:is(:hover, :focus-within) .legend-no,
.legend-item.is-active .legend-no {
  transform: scale(1.15);
  background: var(--red-hover);
  box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgb(205 18 34 / 0.38); /* taste-skill-ignore: Ring der Markierung */
}
.showcase:has(.marker[data-n="1"]:is(:hover, :focus-visible)) .legend-item[data-n="1"] .legend-no,
.showcase:has(.marker[data-n="2"]:is(:hover, :focus-visible)) .legend-item[data-n="2"] .legend-no,
.showcase:has(.marker[data-n="3"]:is(:hover, :focus-visible)) .legend-item[data-n="3"] .legend-no,
.showcase:has(.marker[data-n="4"]:is(:hover, :focus-visible)) .legend-item[data-n="4"] .legend-no {
  transform: scale(1.15);
  background: var(--red-hover);
}
@media (prefers-reduced-motion: reduce) {
  .marker, .legend-no, .legend-item { transition-duration: 0.01ms; }
  .marker.is-active, .marker:is(:hover, :focus-visible), .legend-item .legend-no,
  .showcase .marker, .showcase .legend-no { transform: none !important; }
}

@media (max-width: 1080px) {
  /* Zu schmal für zwei Spalten: Erklärungen unter dem Bild, zu zweit nebeneinander */
  .showcase { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 48px); }
}
@media (max-width: 680px) {
  .example-visual { --pr: 24cqw; --pb: 12cqw; --bar: 24px; --ph-w: 28cqw; }
  .frame-bar { padding: 0 10px; gap: 4px; }
  .frame-bar i { width: 7px; height: 7px; }
  .frame-bar span { font-size: 0.7rem; margin-left: 6px; }
  .frame--phone { border-radius: 14px; box-shadow: 0 0 0 4px var(--ink), 0 20px 40px -20px rgb(20 20 24 / 0.55); } /* taste-skill-ignore: Handy-Rahmen */
  .marker { width: 20px; height: 20px; font-size: 0.6875rem; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(205 18 34 / 0.25); } /* taste-skill-ignore: Ring der Markierung */
  /* Auf dem Handy sitzen die Laptop-Markierungen auf dem linken Rahmenrand, damit sie keinen Text verdecken */
  .marker-pos--desk { left: 0; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  /* Auf dem Handy sind die Nummern nur Beschriftung: Die Erklärungen stehen direkt darunter, kein Sprung beim Antippen */
  .marker { pointer-events: none; }
}

.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pillar {
  padding: clamp(28px, 3vw, 40px); border-radius: var(--r-box); background: var(--bg);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background-color 0.25s ease;
}
.pillar-mark { position: relative; display: block; width: 44px; height: 44px; margin-bottom: 26px; }
.pillar-mark::before, .pillar-mark::after { content: ""; position: absolute; border-radius: 24%; transform: rotate(45deg); }
.pillar-mark::before { inset: 4px 10px 10px 4px; background: var(--red); }
.pillar-mark::after { width: 16px; height: 16px; right: 0; bottom: 0; background: #b4b4b0; mix-blend-mode: multiply; }
.pillar h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.pillar p { color: var(--ink-2); max-width: 52ch; }
@media (hover: hover) and (pointer: fine) {
  .pillar:hover { background: var(--surface); box-shadow: var(--shadow-m); transform: translateY(-4px); }
}

/* Gleicher Aufbau wie .process: links Einleitung (klebt beim Scrollen), rechts die Liste */
.offer {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr;
  grid-template-areas: "intro list" "cta list"; column-gap: clamp(40px, 6vw, 112px);
  margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line);
}
.offer-intro { grid-area: intro; }
.offer-title { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.offer-intro .lead { margin-top: 16px; }
.offer-cta { grid-area: cta; margin-top: 32px; }
.offer-note { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }

.included { grid-area: list; display: grid; }
.included li { position: relative; display: grid; gap: 6px; padding: 24px 0 24px clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.included li:first-child { padding-top: 0; }
.included li:last-child { padding-bottom: 0; border-bottom: 0; }
.included li::before { content: ""; position: absolute; left: 0; top: calc(24px + 0.5em); width: 10px; height: 10px; border-radius: 2.5px; background: var(--red); transform: rotate(45deg); }
.included li:first-child::before { top: 0.5em; }
.included strong { font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.015em; font-weight: 600; }
.included strong + span { color: var(--ink-2); max-width: 52ch; }

/* ---------- Über mich und Referenz ---------- */
/* Foto bewusst kleiner als der Text: Es zeigt, wer dahintersteht, die Aussagen stehen rechts */
.about { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.about-photo { position: relative; isolation: isolate; max-width: 360px; }
.about-photo img { width: 100%; aspect-ratio: 5 / 5.7; object-fit: cover; border-radius: var(--r-box); background: var(--surface-2); }
/* Raute wie auf pixel-impact.de: nur hinter der Fotoecke, nie über Text */
.about-photo .diamond { width: 38%; left: -14%; bottom: -12%; z-index: -1; }
.about-text h2 { margin-bottom: 26px; }
.about-text p + p { margin-top: 16px; }
.about-text > p:not(.lead) { color: var(--ink-2); max-width: 60ch; }
/* Belegte Fakten als ruhige Zeile, keine großen Zahlen-Kacheln */
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--line); }
.about-facts li { display: grid; gap: 4px; align-content: start; padding: 18px 20px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.about-facts li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.about-facts b { display: inline-flex; align-items: center; gap: 6px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.about-facts svg { width: 17px; height: 17px; color: var(--red); }

/* Kundenprojekt: Überschrift und Einordnung über die volle Breite, darunter Bild und Zitat nebeneinander */
.reference-head { margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.reference-title { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.12; }
.reference-lead { margin-top: 14px; max-width: 62ch; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; }

.reference { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 4vw, 64px); align-items: center; margin-top: clamp(28px, 3vw, 40px); }

/* Vorher/Nachher-Regler */
.ba {
  --pos: 50%;
  position: relative; overflow: hidden;
  aspect-ratio: 1088 / 553;
  border-radius: var(--r-box);
  background: var(--surface-2);
  box-shadow: var(--shadow-m);
  touch-action: pan-y;
  user-select: none;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.ba-handle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 24%; transform: rotate(45deg);
  background: var(--red);
  box-shadow: 0 0 0 4px #fff; /* taste-skill-ignore: Griff des Reglers */
  transition: transform 0.2s var(--ease-out);
}
.ba-tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: var(--r-ui); background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: 600; pointer-events: none; }
.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; background: var(--red); }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.ba:has(.ba-range:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }
/* Kundenprojekt im Browserfenster: Leiste oben, Regler darunter ohne eigene Ecken und Schatten */
.ba-frame { --bar: 34px; }
.ba-frame .ba { border-radius: 0; box-shadow: none; }
.ba-frame:has(.ba-range:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }
.ba-frame .ba:has(.ba-range:focus-visible) { outline: none; }
.ba:has(.ba-range:active) .ba-handle::after { transform: rotate(45deg) scale(1.12); }

.case-quote { padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r-box); background: var(--surface); box-shadow: var(--shadow-s); }
.case-quote blockquote { margin: 0; }
.case-quote p { color: var(--ink); font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; }
.case-quote figcaption { margin-top: 16px; font-size: var(--fs-small); color: var(--muted); }
.case-quote figcaption b { color: var(--red); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 104px); }
.faq-head { position: sticky; top: 120px; align-self: start; }
.faq-list { display: grid; gap: 8px; }
.faq-item { border-radius: var(--r-box); background: var(--bg); transition: background-color 0.2s ease; }
.faq-item[open] { background: var(--surface-2); }
.faq-item summary {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 18px 22px;
  list-style: none; cursor: pointer;
  font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35;
  border-radius: var(--r-box);
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-ui);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.25s var(--ease-out), background-color 0.18s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); background-color: var(--red-tint); }
.faq-item summary:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .faq-item:not([open]):hover { background: var(--surface-2); }
}
.faq-body { padding: 0 22px 22px; }
.faq-body p { color: var(--ink-2); max-width: 64ch; }
/* "Alle Fragen anzeigen" gibt es nur auf dem Handy (siehe max-width: 680px) */
.faq-more { display: none; }

/* ---------- Formular ---------- */
.request-deco .diamond--gray { width: 520px; right: -140px; top: 14%; opacity: 0.55; }
.request-deco .diamond:not(.diamond--gray) { width: 140px; left: 8%; bottom: -60px; opacity: 0.9; }
.request-head { margin-bottom: clamp(36px, 4vw, 56px); }
.request-head .capacity { margin-top: 0; padding-bottom: 0.4em; font-size: var(--fs-lead); }

.request { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.form-card { --card-pad: clamp(22px, 3.4vw, 44px); padding: var(--card-pad); border-radius: var(--r-box); background: var(--surface); box-shadow: var(--shadow-l); }

.form-alert { display: none; gap: 12px; align-items: flex-start; margin-bottom: 22px; padding: 16px 18px; border-radius: var(--r-ui); background: var(--red-tint); color: var(--red-deep); font-weight: 600; font-size: 0.97rem; line-height: 1.5; }
.form-alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.form-alert a { color: inherit; }
.form-alert:target, .form-alert.is-visible { display: flex; }

.field { display: grid; gap: 8px; margin-top: 20px; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-step > legend + .field { margin-top: 18px; }
.field label, .field .label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
fieldset.field { border: 0; margin-inline: 0; padding: 0; margin-top: 26px; }
fieldset.field legend { padding: 0; margin-bottom: 4px; }
.req { color: var(--red); }
.optional { font-weight: 500; color: var(--muted); }
/* Längere Hinweise stehen auf dem Desktop im Feld, auf dem Handy unter dem Label (im Feld wären sie abgeschnitten). */
.field-hint { display: none; margin-top: 2px; font-weight: 500; font-size: var(--fs-small); color: var(--muted); }

.input {
  width: 100%; min-height: 54px; padding: 12px 16px;
  border: 0; border-radius: var(--r-ui);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px transparent; /* taste-skill-ignore: Formularfeld */
  color: var(--ink);
  transition: box-shadow 0.16s ease, background-color 0.16s ease;
}
.input::placeholder { color: #66666c; }
/* Notizfeld: startet zweizeilig und wächst mit dem Text (field-sizing, sonst per JavaScript) */
.input--area { display: block; min-height: calc(3em + 24px); max-height: 16em; line-height: 1.5; resize: vertical; field-sizing: content; overflow-y: auto; }
@media (hover: hover) and (pointer: fine) { .input:hover { background: var(--surface-2); } }
.input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore: Formularfeld */
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--red); background: #fff; } /* taste-skill-ignore: Formularfeld */

.options { display: grid; gap: 8px; margin-top: 8px; }
.options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option span {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; height: 100%; padding: 14px 16px;
  border-radius: var(--r-ui);
  background: var(--bg);
  font-weight: 500; color: var(--ink); line-height: 1.35;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.14s var(--ease-out);
}
.option span::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong); /* taste-skill-ignore: Formularfeld */
  background: #fff;
  transition: box-shadow 0.16s ease, background-color 0.16s ease;
}
.option input[type="checkbox"] + span::before { border-radius: 3px; }
@media (hover: hover) and (pointer: fine) { .option:hover span { background: var(--surface-2); } }
.option:active span { transform: scale(0.98); }
.option input:checked + span { background: var(--red-tint); box-shadow: inset 0 0 0 2px var(--red); } /* taste-skill-ignore: Formularfeld */
.option input:checked + span::before { background: var(--red); box-shadow: inset 0 0 0 5px var(--red), inset 0 0 0 10px #fff; } /* taste-skill-ignore: Formularfeld */
.option input[type="checkbox"]:checked + span::before {
  box-shadow: none; /* taste-skill-ignore: Formularfeld */
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.option input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.group[aria-invalid="true"] .option span { box-shadow: inset 0 0 0 1.5px var(--red); } /* taste-skill-ignore: Formularfeld */

.field--check { margin-top: 18px; gap: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; cursor: pointer; }
.field .check { font-weight: 500; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--red); flex: none; }
.check a { color: var(--ink); font-weight: 600; }
.check input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; }

.field-error { display: none; gap: 8px; align-items: flex-start; color: var(--red-deep); font-size: 0.92rem; font-weight: 600; line-height: 1.4; }
.field-error.is-visible { display: flex; }
.field-error::before { content: ""; flex: none; margin-top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--red); transform: rotate(45deg); }
.field--check .field-error { margin: 8px 0 0 34px; }
.group .field-error { margin-top: 4px; }
.options--2 .option--wide { grid-column: 1 / -1; }
.other-field { margin-top: 8px; }

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-submit:has(.form-note[hidden]):has(.form-status:empty) { display: none; }

/* ---------- Mehrschritt-Formular ---------- */
.progress { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.progress-track { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.progress-bar { height: 100%; width: 100%; background: var(--red); transform: scaleX(0.3333); transform-origin: left; transition: transform 0.4s var(--ease-out); }
.progress-label { font-size: var(--fs-small); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.form-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-step + .form-step { margin-top: 48px; } /* ohne JavaScript: alle Schritte untereinander */
.js .form-step + .form-step { margin-top: 0; }
.form-title { padding: 0; margin-bottom: 4px; font-size: var(--fs-h3); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; }
.form-title:focus { outline: none; }

.options--tiles .option span { min-height: 64px; padding: 16px 18px; font-weight: 600; }

.form-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 32px; }
.form-nav .btn--submit { flex: 1; }
.form-nav [data-next] { margin-left: auto; min-width: 180px; }
.form-nav .back {
  min-height: 48px; padding: 0 6px;
  border: 0; background: none; cursor: pointer;
  font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.form-nav .back svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .form-nav .back:hover { color: var(--ink); }
  .form-nav .back:hover svg { transform: translateX(-3px); }
}
.form-nav .back:active { transform: scale(0.97); }

@media (prefers-reduced-motion: no-preference) {
  .form-step.is-entering { animation: step-in 0.18s var(--ease-out) both; }
  .form-step.is-entering-back { animation: step-in-back 0.18s var(--ease-out) both; }
}
@keyframes step-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.form-note { margin-top: 16px; font-size: 0.95rem; color: var(--ink-2); text-align: center; }
.form-status { margin-top: 8px; font-size: 0.95rem; color: var(--ink-2); text-align: center; }
.form-status:empty { display: none; }
.form-alt { margin-top: 14px; font-size: 0.95rem; color: var(--ink-2); text-align: center; }
.form-alt a { display: inline-block; padding-block: 10px; color: var(--ink); font-weight: 600; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] svg { display: none; }
.btn[aria-busy="true"]::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.request-aside { position: sticky; top: 120px; display: grid; gap: 20px; }
.person { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-box); background: var(--surface); box-shadow: var(--shadow-s); }
.person img { width: 64px; height: 64px; border-radius: var(--r-ui); object-fit: cover; object-position: top; flex: none; background: var(--surface-2); }
.person b { display: block; font-weight: 600; }
.person small { color: var(--muted); font-size: var(--fs-small); }
.assurances { display: grid; gap: 12px; padding-left: 4px; }
.assurances li { display: flex; gap: 12px; align-items: center; font-weight: 500; }

/* ---------- Danke-Seite ---------- */
/* Kurze Seiten (Danke-Seite): mindestens bildschirmhoch, der Footer sitzt auch auf großen Bildschirmen unten */
.page-short { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page-short main { flex: 1 0 auto; display: flex; flex-direction: column; }
.page-short .thanks { flex: 1 0 auto; }
.thanks { padding-block: clamp(40px, 6vw, 96px) var(--section); }
.thanks .diamond:nth-of-type(1) { width: 420px; right: -220px; top: 20px; }
.thanks .diamond:nth-of-type(2) { width: 130px; right: 30%; bottom: 40px; }
.thanks .diamond:nth-of-type(3) { width: 90px; left: -30px; top: 46%; }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.thanks h1 { font-size: clamp(2.15rem, 1.4rem + 2.8vw, 4rem); margin-bottom: 28px; }
.thanks-card { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-box); background: var(--surface); box-shadow: var(--shadow-l); }
.thanks-card h2 { margin-bottom: 22px; }
.next-steps { display: grid; gap: 18px; counter-reset: n; }
.next-steps li { position: relative; padding-left: 30px; color: var(--ink-2); }
.next-steps li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 10px; height: 10px; border-radius: 2.5px; background: var(--red); transform: rotate(45deg); }
.next-steps b { color: var(--ink); font-weight: 600; }
.thanks-phone { color: var(--ink); font-weight: 600; white-space: nowrap; }
.btn--wa { --btn-bg: #157a3c; width: 100%; margin-top: 30px; }
.btn--wa svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .btn--wa:hover { background: #0f6631; } .btn--wa:hover svg { transform: none; } }
.thanks-note { margin-top: 14px; font-size: 0.95rem; color: var(--ink-2); text-align: center; }
@media (max-width: 900px) {
  .thanks-grid { grid-template-columns: minmax(0, 1fr); }
  .thanks .diamond:nth-of-type(1) { width: 220px; right: -130px; top: -120px; }
  .thanks .diamond:nth-of-type(2) { right: -40px; bottom: 30%; width: 110px; }
  .thanks .diamond:nth-of-type(3) { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-block: 64px 32px; background: var(--ink); color: rgb(255 255 255 / 0.72); font-size: 0.97rem; }
.site-footer .diamond { width: 220px; right: -70px; bottom: -110px; opacity: 0.9; }
.site-footer > .container { position: relative; z-index: 1; }
.footer-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px 40px; }
.footer-logo { width: 190px; height: auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 28px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: #fff; font-weight: 500; transition: color 0.18s ease; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: #ff4a58; } }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.12); color: rgb(255 255 255 / 0.6); font-size: var(--fs-small); }

/* "Cookie-Einstellungen" sieht aus wie die Links daneben; nur sichtbar, wenn consent.js aktiv ist */
.footer-consent { display: none; min-height: 44px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 500; cursor: pointer; transition: color 0.18s ease; }
.has-consent .footer-consent { display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .footer-consent:hover { color: #ff4a58; } }

/* ---------- Einwilligung Meta-Pixel (assets/consent.js) ---------- */
/* Kein Sperrbildschirm: Die Seite bleibt bedienbar. Beide Knöpfe sind gleich gestaltet (gleichwertige Wahl). */
.consent {
  position: fixed; z-index: 60;
  right: 24px; bottom: 24px; /* rechts, damit der Hero-Button frei bleibt */
  width: min(460px, calc(100% - 48px));
  padding: 22px 22px 20px;
  border-radius: var(--r-box);
  background: var(--surface);
  box-shadow: var(--shadow-l), 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(12px);
}
.consent.is-visible { opacity: 1; transform: none; }
.consent-title { margin-bottom: 8px; font-size: 1.05rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.consent-text { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.consent-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: var(--fs-small); }
.consent-links a { color: var(--ink); font-weight: 500; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.btn--consent { --btn-bg: var(--ink); min-height: 48px; padding: 0 16px; }
@media (hover: hover) and (pointer: fine) { .btn--consent:hover { background: #000; } }
/* Solange der Hinweis offen ist, kein Sticky-Button darunter */
.consent-open .sticky-cta { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .consent.is-visible { transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
}
@media (max-width: 680px) {
  .consent { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 18px 18px 16px; }
  .btn--consent { padding: 0 8px; font-size: 0.95rem; white-space: nowrap; } /* "Alle akzeptieren" einzeilig */
}

/* ---------- Sticky-Button (Handy) ---------- */
.sticky-cta { display: none; }
@media (max-width: 680px) {
  .js .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float);
    display: block;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgb(243 243 241 / 0.96);
    box-shadow: 0 -8px 24px -16px rgb(20 20 24 / 0.35); /* taste-skill-ignore: schwebende Leiste */
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.28s var(--ease-out), visibility 0s linear 0.28s;
  }
  .js .sticky-cta.is-visible { transform: none; visibility: visible; transition: transform 0.28s var(--ease-out), visibility 0s; }
  .sticky-cta .btn { width: 100%; min-height: 50px; }
  .js .site-footer { padding-bottom: 104px; }
}

/* ---------- Einblenden ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease-out), transform 0.65s var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .hero-kicker, .hero h1, .hero .lead, .hero-actions { animation: hero-in 0.7s var(--ease-out) both; }
  .hero h1 { animation-delay: 60ms; }
  .hero .lead { animation-delay: 130ms; }
  .hero-actions { animation-delay: 200ms; }
  .video-frame { animation: frame-in 0.9s var(--ease-out) 120ms both; }
  .thanks h1, .thanks .lead, .thanks-card { animation: hero-in 0.7s var(--ease-out) both; }
  .thanks .lead { animation-delay: 80ms; }
  .thanks-card { animation: frame-in 0.9s var(--ease-out) 160ms both; }
  .thanks .diamond:not(.diamond--line) { animation: diamond-in 1.1s var(--ease-out) both, diamond-float 9s ease-in-out 1.1s infinite alternate; }
  .hero-visual .diamond--hero { animation: diamond-in 1.1s var(--ease-out) both, diamond-float 9s ease-in-out 1.1s infinite alternate; }
  .hero-visual .diamond--hero-gray { animation: diamond-in 1.1s var(--ease-out) 200ms both, diamond-float 9s ease-in-out 1.3s infinite alternate; }

  /* Fehlermeldungen erscheinen kurz von oben, damit der Blick sie findet */
  .field-error.is-visible, .form-alert.is-visible, .form-alert:target { animation: msg-in 0.2s var(--ease-out) both; }
  .faq-item[open] .faq-body { animation: msg-in 0.28s var(--ease-out) both; }

  /* Weiches Aufklappen der FAQ in Browsern, die es können */
  .faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

@keyframes msg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes frame-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes diamond-in { from { opacity: 0; transform: rotate(30deg) scale(0.9); } to { opacity: 1; transform: rotate(45deg); } }
@keyframes diamond-float { from { transform: rotate(45deg) translate(0, 0); } to { transform: rotate(45deg) translate(-8px, 8px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Untereinander in HTML-Reihenfolge: Überschrift, Liste, Button */
  .offer { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "list" "cta"; }
  .offer .included { margin-top: 32px; }
  .offer-cta { margin-top: 36px; }
  .request { grid-template-columns: minmax(0, 1fr); }
  .request-aside { position: static; grid-row: 1; grid-template-columns: auto 1fr; align-items: center; }
  .options--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .hero-grid, .process, .about, .faq, .section-head--split, .situations, .reference { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { margin-bottom: 24px; }
  .hero-visual { grid-column: 1; grid-row: auto; margin-top: 48px; max-width: 680px; width: 100%; justify-self: center; padding-block: 0 8%; }
  .video-frame { width: min(100%, 28rem); }
  .process-intro, .faq-head, .request-aside { position: static; }
  .about-photo { max-width: 220px; margin-left: 12px; }
  .about-photo .diamond { width: 32%; left: -12%; bottom: 10%; } /* bleibt neben dem Foto, weg von der Überschrift */
  .request-head .capacity { padding-bottom: 0; }
}

@media (max-width: 680px) {
  .header-inner { height: 72px; gap: 12px; }
  .brand img { width: 150px; }
  /* Auf dem Handy sitzt "Entwurf anfordern" fest unten in der Leiste (main.js), oben nur das Logo */
  .js .header-inner .btn--sm { display: none; }
  .header-inner .btn--sm { padding: 0 14px; font-size: 0.9rem; }
  html { scroll-padding-top: 80px; }

  /* Hero auf dem Handy: Überschrift, gleich darunter das Video (damit lockt die Anzeige), dann ein Satz und der Button */
  .hero-enter { display: contents; }
  .hero-kicker { order: 1; }
  .hero h1 { order: 2; }
  .hero-visual { order: 3; margin: 0 0 28px; padding-block: 0; }
  .hero-visual .video-frame { width: 100%; }
  /* Rauten nur hinter dem Video, nie über Text: rote schaut rechts hervor, graue entfällt */
  .hero-visual .diamond--hero { width: 56%; top: 14%; right: -24%; }
  .hero-visual .diamond--hero-gray { display: none; }
  .hero .lead { order: 4; margin-bottom: 24px; }
  .hero-actions { order: 5; }
  .lead-intro { display: none; }
  .pillars, .options--2, .field-row { grid-template-columns: minmax(0, 1fr); }
  .field-row .field + .field { margin-top: 20px; }
  .hero .btn, .process-intro .btn, .offer-cta .btn { width: 100%; }
  .btn { padding: 0 20px; }
  .field-hint { display: block; }
  .input--hint::placeholder { color: transparent; }
  .input { font-size: 1rem; }
  .js .form-nav {
    position: sticky; bottom: 0; z-index: 2;
    margin-inline: calc(-1 * var(--card-pad));
    padding: 12px var(--card-pad) calc(12px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 -12px 20px -18px rgb(20 20 24 / 0.45); /* taste-skill-ignore: klebende Leiste */
  }
  .form-nav .btn { flex: 1; min-width: 0; padding: 0 16px; }
  .form-nav [data-next] { margin-left: 0; }
  .options--tiles.options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options--tiles .option span { padding: 14px; gap: 10px; }
  .included li { padding-block: 18px; }
  .included li::before { top: calc(18px + 0.5em); }
  .included strong { font-size: 1.05rem; }
  /* Fakten untereinander statt in drei schmalen Spalten */
  .about-facts { grid-template-columns: minmax(0, 1fr); }
  .about-facts li, .about-facts li + li { padding: 14px 0; border-left: 0; }
  .about-facts li + li { border-top: 1px solid var(--line); }
  .about-facts li { grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
  /* Nach Tipp auf "Entwurf anfordern" zuerst die Frage, die Oskar-Karte danach */
  .request-aside { grid-row: auto; grid-template-columns: minmax(0, 1fr); }
  /* Rauten im Formularbereich: graue nur hinter dem Formular, rote entfällt (läge sonst an der Liste) */
  .request-deco .diamond--gray { width: 360px; right: -220px; top: 42%; }
  .request-deco .diamond:not(.diamond--gray) { display: none; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-links { justify-content: flex-start; }
  .ba { aspect-ratio: 16 / 11; }
  .ba-frame { --bar: 26px; }
  .ba-tag { top: 10px; font-size: 0.8125rem; }
  .ba-tag--before { left: 10px; }
  .ba-tag--after { right: 10px; }
  .faq-item summary { padding: 16px 18px; font-size: 1.02rem; }
  .faq-body { padding: 0 18px 18px; }
  /* Nur die drei wichtigsten Fragen, der Rest hinter dem Button */
  .faq-list.is-collapsed .faq-item:not([data-faq-top]) { display: none; }
  .faq-more:not([hidden]) {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; margin-top: 4px; padding: 0 18px;
    border: 1px solid var(--line-strong); border-radius: var(--r-box); background: transparent;
    font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color 0.18s ease;
  }
  .faq-more svg { width: 18px; height: 18px; }
  .faq-more:active { background: var(--bg); }
}

@media (max-width: 420px) {
  .thanks-card { padding: 22px 20px; }
  .options--tiles.options--2 { grid-template-columns: minmax(0, 1fr); }
  /* Schritt 3 auf schmalen Handys: Zurück nur als Pfeil, damit der Absenden-Button einzeilig bleibt */
  .form-nav .back { width: 48px; justify-content: center; padding: 0; border-radius: var(--r-ui); background: var(--bg); color: var(--ink); }
  .form-nav .back svg { width: 18px; height: 18px; }
  .back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .form-nav .btn { padding: 0 12px; font-size: 0.95rem; }
  .form-nav .btn--submit svg { display: none; }
  .btn--wa { padding: 0 14px; gap: 8px; font-size: 0.95rem; }
}
@media (max-width: 400px) {
  .brand img { width: 128px; }
  .header-inner .btn--sm { padding: 0 12px; font-size: 0.875rem; }
}

/* Reduzierte Bewegung: Farb- und Deckkraftwechsel bleiben als Feedback, Wege und Skalierungen entfallen. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .form-nav .back:active, .option:active span, .video-play:active .video-play-icon { transform: none; }
  .btn:hover svg, .pillar:hover, .video-play:hover .video-play-icon { transform: none; }
  .js .sticky-cta, .js .sticky-cta.is-visible { transition-duration: 0.01ms; }
  .faq-item summary::after { transition-duration: 0.01ms; }
  .progress-bar, .form-nav .back svg { transition-duration: 0.01ms; }
}