/* ==========================================================================
   ChatFlamingo — Design System
   Hell, ruhig, viel Weissraum. Eine kraeftige Marke, ruhige Seiten.
   ========================================================================== */

/* --- Schriften (selbst gehostet) ---------------------------------------- */

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

/* --- Tokens -------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Marke */
  --pink-50: #fff3f6;
  --pink-100: #ffe3ec;
  --pink-200: #ffc9db;
  --pink-300: #ffa3c0;
  --pink-400: #ff7ba5;
  --pink-500: #ff5a8a;
  --pink-600: #d53065;
  --pink-700: #c4295c;

  /* Text & Flaechen */
  --ink: #1f2430;
  --ink-2: #414959;
  --ink-3: #6b7383;
  --ink-4: #98a0ae;
  --line: #eceef3;
  --line-2: #e0e3ea;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --bg: #ffffff;

  /* Akzente */
  --mint-50: #e9fbf4;
  --mint-500: #0fa97e;
  --mint-600: #0b8a66;
  --sky-50: #eef5ff;
  --sky-500: #3b7dd8;
  --amber-50: #fff7e8;
  --amber-500: #d98324;

  /* Form */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 36, 48, 0.05), 0 1px 3px rgba(31, 36, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 36, 48, 0.06), 0 12px 28px rgba(31, 36, 48, 0.05);
  --shadow-lg: 0 8px 24px rgba(31, 36, 48, 0.07), 0 32px 64px rgba(31, 36, 48, 0.08);
  --shadow-pink: 0 8px 24px rgba(213, 48, 101, 0.2), 0 2px 6px rgba(213, 48, 101, 0.14);

  /* Raster */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 11vw, 140px);

  /* Typo */
  --font-body: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Bricolage Grotesque Variable", "Inter Variable", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Reset --------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
:target,
[id] {
  scroll-margin-top: 112px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

a { color: var(--pink-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pink-700); }

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

::selection { background: var(--pink-200); color: var(--ink); }

/* --- Typografie ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.024em;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.55rem); letter-spacing: -0.018em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.09rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pink-600);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.45;
}

.muted { color: var(--ink-3); }
.small { font-size: 0.9375rem; }
.tiny { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }

.u-pink { color: var(--pink-600); }

/* Handschriftlicher Marker-Strich unter einem Wort */
.mark {
  position: relative;
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.06em;
  height: 0.3em;
  background: linear-gradient(90deg, var(--pink-200), var(--pink-300));
  border-radius: var(--r-full);
  z-index: -1;
  transform-origin: left center;
}

/* --- Layout -------------------------------------------------------------- */

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

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 88px); }
.section--rose { background: var(--pink-50); }
.section--soft { background: var(--surface-2); }

.section-head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 + p { margin-top: 18px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.stack > * + * { margin-top: 1rem; }

.grid { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.divider { height: 1px; background: var(--line); border: 0; }

/* --- Knoepfe ------------------------------------------------------------- */

.btn {
  --btn-bg: var(--pink-600);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
    background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { box-shadow: var(--shadow-pink); }
.btn--primary:hover { --btn-bg: var(--pink-700); box-shadow: 0 12px 30px rgba(213, 48, 101, 0.28); }

/* Knopf in der Farbe des Kunden — steht in dessen Block und darf nicht mit
   dem einen Handlungsaufruf der Seite („Kostenlos starten“) konkurrieren,
   deshalb weiß mit Rand statt gefüllt. Der Text ist ein ganzer Satz, darf
   also umbrechen. */
.btn--marke {
  --btn-bg: #fff;
  --btn-fg: var(--marke, var(--pink-700));
  border-color: var(--marke-kontur, var(--pink-200));
  box-shadow: var(--shadow-sm);
  white-space: normal;
  text-align: left;
}
.btn--marke:hover {
  --btn-bg: var(--marke-tint, var(--pink-50));
  border-color: var(--marke, var(--pink-600));
}
.btn--marke svg { flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { --btn-bg: var(--surface-2); border-color: var(--ink-4); box-shadow: var(--shadow-sm); }

.btn--white { --btn-bg: #fff; --btn-fg: var(--ink); box-shadow: var(--shadow-md); }

.btn--lg { padding: 18px 32px; font-size: 1.0625rem; }
.btn--sm { padding: 10px 18px; font-size: 0.9375rem; }

.btn--primary .btn-arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  text-decoration: none;
}
.link-arrow svg { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Pills / Badges ------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.pill--free { border-color: var(--mint-500); background: var(--mint-50); color: var(--mint-600); font-weight: 600; }
.pill--ai { border-color: var(--pink-200); background: var(--pink-50); color: var(--pink-700); font-weight: 600; }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint-500);
  flex: none;
  position: relative;
}
.dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--mint-500);
  opacity: 0;
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping {
  0% { transform: scale(0.6); opacity: 0.7; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--pink-50);
  color: var(--pink-700);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.9);
}

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand b { color: var(--pink-600); font-weight: 700; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}
.nav-links a {
  padding: 9px 14px;
  white-space: nowrap;
  border-radius: var(--r-full);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-links a:hover { background: var(--pink-50); color: var(--pink-700); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Zwischen Klappmenue und viel Platz wird es eng, sobald eine Sprache
   laengere Woerter hat als Deutsch. Dann ruecken die Punkte zusammen. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 9px 9px; font-size: 0.875rem; }
  .nav-actions { gap: 8px; }
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
  position: relative;
}
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 16px var(--gutter) 26px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s var(--ease-out), visibility 0.25s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links a { padding: 13px 14px; font-size: 1.0625rem; }
  .nav-actions .btn--ghost { display: none; }
  .nav-links { margin-left: 0; }
  .nav { justify-content: space-between; }
}

.nav-cta-mobile { display: none; }

@media (max-width: 560px) {
  .nav-actions > .btn { display: none; }
  .nav-cta-mobile {
    display: inline-flex;
    margin-top: 12px;
    width: 100%;
  }
}

/* --- Sprachwahl ----------------------------------------------------------
   Ein <details>, kein Menue aus Fremdcode. Zu, solange niemand klickt; das
   Schliessen bei Klick daneben und mit Escape macht site.js. Ohne JavaScript
   bleibt es ein aufklappbares Verzeichnis — funktioniert trotzdem. */

.sprachwahl { position: relative; flex: none; }
.sprachwahl > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sprachwahl > summary::-webkit-details-marker { display: none; }
.sprachwahl > summary::marker { content: ""; }
.sprachwahl > summary:hover { border-color: var(--pink-300); color: var(--pink-700); }
.sprachwahl > summary:focus-visible { outline: 2px solid var(--pink-600); outline-offset: 2px; }
.sprachwahl[open] > summary { background: var(--pink-50); border-color: var(--pink-300); color: var(--pink-700); }

.sprachwahl-liste {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 2px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.sprachwahl-liste a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.sprachwahl-liste a:hover { background: var(--pink-50); color: var(--pink-700); }
.sprachwahl-liste a[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* Im Klappmenue auf dem Handy stehen die Sprachen als Reihe unter dem Knopf. */
.sprachwahl-mobil { display: none; }

@media (max-width: 1080px) {
  .sprachwahl { display: none; }
  .sprachwahl-mobil {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .nav-links .sprachwahl-mobil a {
    padding: 8px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-full);
    font-size: 0.9375rem;
  }
  .nav-links .sprachwahl-mobil a[aria-current="true"] {
    background: var(--pink-50);
    border-color: var(--pink-300);
    color: var(--pink-700);
    font-weight: 600;
  }
}

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

.hero {
  position: relative;
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(60px, 8vw, 110px);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: -20% -10% auto;
  height: 780px;
  z-index: -2;
  pointer-events: none;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.hero-blob--1 { top: 2%; left: 4%; width: 460px; height: 460px; background: radial-gradient(circle, #ffb5cd, transparent 70%); }
.hero-blob--2 { top: 18%; right: 2%; width: 520px; height: 520px; background: radial-gradient(circle, #ffd9c2, transparent 70%); }
.hero-blob--3 { top: 46%; left: 38%; width: 420px; height: 420px; background: radial-gradient(circle, #c9e4ff, transparent 70%); }

.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  opacity: 0.6;
  pointer-events: none;
}

/* Eine Spalte, alles mittig: Überschrift oben, Chatfenster darunter.
   Der Hero trägt nur noch diese beiden Dinge. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 60px);
  justify-items: center;
  text-align: center;
}

.hero h1 { margin-top: 0; }

/* Das Eingabefeld sitzt mittig unter der Überschrift und ist der einzige
   Handlungsaufruf im Hero — es darf deshalb kräftiger auftreten als ein
   gewöhnliches Formularfeld: weiß statt grau, grösser, mit Schatten und
   Luft nach oben und unten. Die Beschriftung darin bleibt linksbündig,
   sonst rutscht der Platzhalter in die Mitte.

   Die Auswahl lautet überall .url-field.hero-form, nicht nur .hero-form:
   die allgemeinen .url-field-Regeln stehen weiter unten in dieser Datei und
   hätten bei gleicher Spezifität sonst das letzte Wort. */
.url-field.hero-form {
  max-width: 560px;
  margin-inline: auto;
  margin-top: clamp(56px, 7.2vw, 96px);
  margin-bottom: clamp(40px, 5vw, 64px);
  gap: 14px;
  align-items: stretch;
  text-align: left;
}

/* Feld und Knopf bekommen dieselbe feste Höhe — über die Innenabstände
   allein kämen sie nie auf denselben Wert, weil der Knopf seine eigene
   Zeilenhöhe mitbringt. */
.url-field.hero-form .input-wrap { display: flex; }
.url-field.hero-form .input-wrap > svg { left: 22px; }
.url-field.hero-form input[type="text"] {
  width: 100%;
  height: 68px;
  padding: 0 22px 0 56px;
  font-size: 1.0625rem;
  background: #fff;
  border: 2px solid var(--pink-100);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease;
}
/* --ink-3 statt --ink-4: 4,7:1 auf Weiß, der Platzhalter bleibt lesbar. */
.url-field.hero-form input[type="text"]::placeholder { color: var(--ink-3); }
.url-field.hero-form input[type="text"]:hover { border-color: var(--pink-300); }
.url-field.hero-form input[type="text"]:focus {
  outline: none;
  border-color: var(--pink-500);
  box-shadow: 0 0 0 4px var(--pink-100), var(--shadow-md);
}
.url-field.hero-form .btn {
  height: 68px;
  padding: 0 38px;
  font-size: 1.0625rem;
}

/* Der Satz zur E-Mail-Adresse steht direkt unter dem Formular und darf
   nicht wie eine eigene Sektion wirken. */
.hero-hinweis {
  max-width: 34em;
  margin: 16px auto 0;
  text-align: center;
}

.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }

/* Mittig gesetzt, deshalb auch mittig begrenzt. */
.hero-sub { margin-top: 20px; max-width: 34em; margin-inline: auto; }
.hero .btn-row { margin-top: 32px; }
.hero-note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.hero-note svg { flex: none; color: var(--mint-500); }

/* --- Chat-Widget-Attrappe ------------------------------------------------ */

/* Steht in einer eigenen Sektion unter dem Hero, mittig. Die Beschriftung
   der Sektion ist zentriert, das Chatfenster selbst nicht: Sprechblasen und
   Eingabezeile bleiben linksbündig. */
.chat-attrappe {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  margin-top: clamp(28px, 3.4vw, 40px);
  text-align: left;
}

/* Das Fenster nimmt die Markenfarbe an, die auf einem Elternteil gesetzt
   ist. Die Werte stehen deshalb nicht hier, sondern als Rückfallwert an
   jeder Fundstelle — sonst würde .widget die Vorgabe von oben überschreiben.
   Ohne Vorgabe ist es unser Pink, so wie beim Kunden, der nichts einstellt. */
.widget {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  /* Nicht abschneiden: Das Maskottchen ragt oben aus dem Fenster heraus.
     Die Ecken runden dafür die beiden Randstücke selbst — eine Haarlinie
     kleiner als das Fenster, weil sie innerhalb des Rahmens sitzen. */
  overflow: visible;
  isolation: isolate;
}
.widget-top { border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.widget-foot { border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }

.widget-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(
    135deg,
    var(--marke-hell, var(--pink-500)),
    var(--marke, var(--pink-600))
  );
  color: #fff;
}
.widget-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
  flex: none;
}
.widget-avatar svg { width: 26px; height: 26px; }
.widget-title { font-weight: 650; font-size: 0.9375rem; line-height: 1.3; font-family: var(--font-display); }
.widget-status { font-size: 0.75rem; opacity: 0.88; display: flex; align-items: center; gap: 6px; }
.widget-status .dot { background: #8ef0c8; }
.widget-status .dot::after { border-color: #8ef0c8; }
.widget-top-actions { margin-left: auto; display: flex; gap: 8px; opacity: 0.8; }

.widget-body {
  padding: 18px;
  /* Feste Hoehe: Der Verlauf waechst nach oben aus dem Bild heraus, statt
     die Seite waehrend der Animation laenger werden zu lassen. */
  height: 330px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  background: linear-gradient(180deg, #fff 0%, var(--marke-tint, var(--pink-50)) 100%);
  /* Was oben aus dem Fenster laeuft, blendet sanft aus statt hart abzureissen */
  mask-image: linear-gradient(180deg, transparent 0, #000 26px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px);
}

.chat-stream {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.msg.is-in { opacity: 1; transform: none; }
.msg--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  color: var(--ink);
}
.msg--user {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 5px;
  border: 1px solid var(--ink);
}
.msg--agent {
  align-self: flex-start;
  background: var(--mint-50);
  border: 1px solid #b9ead8;
  border-bottom-left-radius: 5px;
  color: #0a5c45;
}
/* Ein Link, den der Bot mitschickt — im Fenster nur Text, das Ganze ist
   eine Attrappe mit role="img". */
.msg-link {
  display: block;
  margin-top: 6px;
  color: var(--marke, var(--pink-600));
  word-break: break-word;
}

.msg-who {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mint-600);
  margin-bottom: 3px;
}
.msg .caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--marke, var(--pink-500));
  vertical-align: -0.16em;
  margin-left: 1px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 13px 16px;
  border-radius: 16px 16px 16px 5px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.typing.is-in { opacity: 1; }
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink-300);
  animation: bounce 1.3s var(--ease-in-out) infinite;
}
.typing i:nth-child(2) { animation-delay: 0.16s; }
.typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.widget-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 18px 12px;
}
.widget-quick button,
.widget-quick span {
  padding: 7px 13px;
  border: 1px solid var(--marke-kontur, var(--pink-200));
  border-radius: var(--r-full);
  background: #fff;
  color: var(--marke-text, var(--pink-700));
  font-size: 0.8125rem;
  font-weight: 500;
}

.widget-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--ink-4);
  font-size: 0.9375rem;
}
.widget-input .send {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--marke, var(--pink-600));
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.widget-foot {
  padding: 9px 18px 12px;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--ink-4);
  background: #fff;
}

/* Fassung mit heller Kopfzeile. So sieht das Fenster auf steri24.de
   wirklich aus: weisser Kopf mit Maskottchen statt Farbverlauf, grauer
   Verlaufshintergrund, Sprechblasen des Besuchers in der Markenfarbe. */
.widget--hell .widget-top {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 13px 16px;
  align-items: flex-start;
}
.widget--hell .widget-avatar {
  width: 108px;
  height: 108px;
  margin: -28px 0 -6px -14px;
  background: transparent;
  border-radius: 0;
}
.widget--hell .widget-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Dreht um einen Punkt unten in der Figur, damit das Schwanken wie ein
     Winken aussieht und nicht wie ein kippendes Bild. */
  transform-origin: 55% 88%;
  animation: winken 8s var(--ease-in-out) infinite;
}
/* Damit die beiden nicht im Gleichtakt winken. */
.widget--hell.winkt-spaeter .widget-avatar img { animation-delay: 3.4s; }

@keyframes winken {
  0%, 84%, 100% { transform: rotate(0deg); }
  87% { transform: rotate(-10deg); }
  90% { transform: rotate(8deg); }
  93% { transform: rotate(-6deg); }
  96% { transform: rotate(3deg); }
}

@media (max-width: 560px) {
  .widget--hell .widget-avatar {
    width: 92px;
    height: 92px;
    margin: -22px 0 -6px -10px;
  }
}
.widget--hell .widget-title { font-size: 1.0625rem; margin-bottom: 3px; }
.widget--hell .widget-status { color: var(--ink-3); opacity: 1; }
.widget--hell .widget-status .dot { background: var(--mint-500); }
.widget--hell .widget-status .dot::after { border-color: var(--mint-500); }
.widget--hell .widget-top-actions { color: var(--ink-4); opacity: 1; }
/* Etwas hoeher als die Grundfassung: Sonst schiebt die Produktkarte die
   Frage des Besuchers aus dem Bild, und man sieht nur noch die Antwort. */
.widget--hell .widget-body { background: #f3f4f8; height: 392px; }
@media (max-width: 560px) {
  /* Schmaler Bildschirm: kleineres Produktbild, sonst schiebt die Karte
     die Frage des Besuchers aus dem Fenster. */
  .produktkarte img { max-width: 92px; }
}
.widget--hell .msg--user {
  background: var(--marke, var(--pink-600));
  border-color: var(--marke, var(--pink-600));
  color: #fff;
}

/* Wechsel von der KI zum Menschen: Das Fenster bekommt .is-mensch, und
   Avatar, Name und Kennzeichen tauschen. Das ist der Moment, den die
   Uebergabe auf der Seite beschreibt — man soll ihn sehen. */
/* Mit .widget davor, damit diese Regeln die spaeteren .ki-badge-Regeln
   schlagen — sonst stehen beide Kennzeichen gleichzeitig im Kopf. */
.widget .avatar-mensch,
.widget .wenn-mensch { display: none; }
.widget.is-mensch .avatar-bot,
.widget.is-mensch .wenn-bot { display: none; }
.widget.is-mensch .avatar-mensch { display: grid; }
.widget.is-mensch .wenn-mensch { display: inline-block; }

.widget-avatar .avatar-mensch {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--marke-tint, var(--pink-50));
  color: var(--marke, var(--pink-600));
  place-items: center;
}
.widget-avatar .avatar-mensch svg { width: 60%; height: 60%; }

.ki-badge {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 4px;
  border-radius: var(--r-full);
  background: #eef0f5;
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ki-badge--mensch {
  background: var(--mint-50);
  color: #0a5c45;
}

/* Produktkarte im Chat — die gibt es wirklich, siehe /fuer-shops/. */
.produktkarte {
  align-self: flex-start;
  max-width: 84%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.produktkarte.is-in { opacity: 1; transform: none; }
.produktkarte img {
  display: block;
  width: 100%;
  max-width: 118px;
  margin: 0 auto 10px;
}
.produktkarte b {
  display: block;
  font-size: 0.9375rem;
  margin-bottom: 11px;
}
.pk-aktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
/* Lieber umbrechen als die Beschriftung mitten im Wort trennen. */
.pk-knopf,
.pk-link { white-space: nowrap; }
.pk-knopf {
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--marke, var(--pink-600));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}
.pk-link {
  color: var(--marke, var(--pink-600));
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- „Entwickelt mit KI" mit Holi-Pulver -------------------------------- */

.ki-abschnitt {
  position: relative;
  overflow: hidden;
  text-align: center;
}
/* Das Pulver liegt hinter dem Text und fängt keine Klicks ab. */
.holi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ki-abschnitt .wrap {
  position: relative;
  z-index: 1;
}
.ki-abschnitt h2 { max-width: 20ch; margin-inline: auto; }

/* Freigestellte Figur, kein Kasten: deshalb kein Rand und kein Schatten am
   Bild, sondern ein weicher Schlagschatten an der Silhouette. */
.holi-flamingo {
  display: block;
  width: auto;
  height: clamp(170px, 21vw, 280px);
  margin: clamp(30px, 4.4vw, 52px) auto clamp(26px, 3.6vw, 40px);
  filter: drop-shadow(0 16px 26px rgba(213, 48, 101, 0.18));
  animation: schweben 7s var(--ease-in-out) infinite;
  will-change: transform;
}
@keyframes schweben {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-16px) rotate(2.5deg); }
}

.ki-text {
  max-width: 34em;
  margin-inline: auto;
}
.ki-text b { color: var(--ink-2); }

/* --- Galerie: eine Folie je Kunde ---------------------------------------- */

.galerie {
  position: relative;
  max-width: 1020px;
  margin-inline: auto;
}
.galerie-fenster {
  /* Der Schatten des weissen Kastens und das herausragende Maskottchen
     brauchen Luft, sonst schneidet das Fenster sie ab. */
  overflow: hidden;
  padding: 46px 6px 18px;
  margin: -46px -6px -18px;
}
.galerie-spur {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
/* Erst mit JavaScript wird daraus eine Galerie. Ohne stehen beide Folien
   untereinander — sichtbar ist immer alles. */
.js-ready .galerie-spur {
  display: flex;
  gap: 0;
  transition: transform 0.55s var(--ease-out);
  will-change: transform;
}
.js-ready .galerie-folie {
  flex: 0 0 100%;
  min-width: 0;
}
.js-ready .galerie-folie[aria-hidden="true"] {
  visibility: hidden;
  transition: visibility 0s linear 0.55s;
}

/* Der weisse Kasten, in dem der Inhalt steht: links das Chatfenster,
   rechts Name, Zitat und Knopf. */
.galerie-folie {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 860px) {
  .galerie-folie { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

.galerie-pfeil {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}
.galerie-pfeil:hover {
  color: var(--pink-600);
  border-color: var(--pink-200);
  transform: scale(1.06);
}
/* Ohne JavaScript steuern sie nichts. */
.galerie-steuerung { display: none; }
.js-ready .galerie-steuerung { display: flex; }
.galerie-pfeil { display: grid; }
.galerie-punkte { display: flex; }

.galerie-steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
.galerie-punkte {
  justify-content: center;
  gap: 9px;
}
.galerie-punkte button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-2);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s var(--ease-out);
}
.galerie-punkte button[aria-selected="true"] {
  background: var(--pink-600);
  transform: scale(1.25);
}

/* Ab 1120px ist links und rechts vom Kasten Platz — dort stehen die Pfeile
   am Rand der Folie. Darunter bleiben sie in der Steuerzeile neben den
   Punkten stehen. */
@media (min-width: 1120px) {
  .galerie-pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .galerie-pfeil:hover { transform: translateY(-50%) scale(1.06); }
  .galerie-pfeil--links { left: 0; margin-left: -23px; }
  .galerie-pfeil--rechts { right: 0; margin-right: -23px; }
}

/* --- Kundenbeispiele auf der Startseite ---------------------------------- */

.kunde-marke {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.kunde-marke i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--marke, var(--pink-600));
  flex: none;
  /* An der Grundlinie der Schrift ausrichten, nicht an der Textmitte. */
  align-self: center;
}
/* Was die Firma macht, steht hinter dem Namen — kleiner, damit der Name
   trotzdem der Name bleibt. */
.kunde-marke small {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}
.kunde-zitat {
  margin: 18px 0 0;
  padding: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.kunde-zitat cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-3);
}

/* Schwebende Notizen neben dem Widget */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  z-index: 2;
}
.float-card svg { flex: none; }
.float-card--1 { top: -20px; left: -15%; }
.float-card--2 { bottom: -18px; right: -12%; }
@media (max-width: 1080px) {
  .float-card--1 { left: -5%; }
  .float-card--2 { right: -3%; }
}
@media (max-width: 520px) {
  .float-card { display: none; }
}

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

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 10px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 52px;
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-3);
  white-space: nowrap;
}
.marquee-item svg { width: 22px; height: 22px; flex: none; color: var(--ink-4); }

/* --- Referenzen ----------------------------------------------------------- */

.ref {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
    border-color 0.35s ease;
}
.ref:hover {
  color: inherit;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink-200);
}
.ref > .tag { align-self: flex-start; }

.ref-domain {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin-top: 14px;
}
.ref p {
  margin-top: 10px;
  font-size: 0.9688rem;
  color: var(--ink-2);
}
.ref-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pink-600);
}
.ref-foot svg { transition: transform 0.3s var(--ease-out); }
.ref:hover .ref-foot svg { transform: translate(3px, -3px); }

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

.card {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
    border-color 0.35s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 0.9688rem; }

.card--flat:hover { transform: none; box-shadow: none; }
.card--rose { background: var(--pink-50); border-color: var(--pink-100); }
.card--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.card--ink h2, .card--ink h3 { color: #fff; }
.card--ink p { color: rgba(255, 255, 255, 0.76); }

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--pink-50);
  color: var(--pink-600);
}
.card-icon--mint { background: var(--mint-50); color: var(--mint-600); }
.card-icon--sky { background: var(--sky-50); color: var(--sky-500); }
.card-icon--amber { background: var(--amber-50); color: var(--amber-500); }

/* --- Problem-Zeilen ------------------------------------------------------ */

.problem {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.8vw, 2.7rem);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.026em;
  max-width: 17em;
}
.problem span { display: block; color: var(--ink-4); transition: color 0.5s ease; }
.problem span.is-lit { color: var(--ink); }
.problem span:last-child { color: var(--pink-600); }

/* --- Schritte ------------------------------------------------------------ */

.steps { position: relative; }
.steps-line {
  position: absolute;
  top: 34px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--line-2);
  z-index: 0;
}
.steps-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--pink-400), var(--pink-600));
  border-radius: 2px;
}
@media (max-width: 900px) { .steps-line { display: none; } }

.step { position: relative; z-index: 1; text-align: center; }
.step-num {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--line-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-4);
  transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease,
    box-shadow 0.4s ease, transform 0.4s var(--ease-out);
}
.step.is-active .step-num {
  border-color: var(--pink-600);
  background: var(--pink-600);
  color: #fff;
  box-shadow: var(--shadow-pink);
  transform: scale(1.06);
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 0.9688rem; max-width: 28ch; margin-inline: auto; }

/* --- Code-Kasten --------------------------------------------------------- */

/* --- Textbaustein zum Kopieren -------------------------------------------
   Anders als .code-box hell und auf Lesbarkeit gebaut: Hier steht kein Code,
   sondern Fließtext, den jemand in seine eigene Datenschutzerklärung
   übernimmt. */

.baustein {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.baustein-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.baustein-kopf h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ink-2);
}
.btn-kopieren {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.btn-kopieren:hover { border-color: var(--pink-300); color: var(--pink-700); }
.btn-kopieren:focus-visible { outline: 2px solid var(--pink-600); outline-offset: 2px; }
.btn-kopieren.is-done {
  border-color: var(--mint-500);
  color: var(--mint-600);
  background: var(--mint-50);
}
.baustein-text { padding: 22px; font-size: 0.9375rem; line-height: 1.68; color: var(--ink-2); }
.baustein-text > :first-child { margin-top: 0; }
.baustein-text > :last-child { margin-bottom: 0; }
.baustein-text h4 {
  margin: 20px 0 7px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ink);
}
.baustein-text p { margin: 0 0 13px; }
.baustein-text ul { margin: 0 0 13px; padding-left: 20px; }
.baustein-text li { margin-bottom: 5px; }

/* Eine Stelle, die der Kunde selbst ausfüllen muss. Sichtbar markiert,
   damit sie niemand versehentlich so stehen lässt. */
.luecke {
  background: var(--amber-50);
  border-bottom: 2px solid var(--amber-500);
  padding: 0 3px;
  font-weight: 600;
  color: var(--ink);
}

.code-box {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 760px;
  margin-inline: auto;
}
.code-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
}
.code-top i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.code-top i:first-child { background: #ff6058; }
.code-top i:nth-child(2) { background: #ffbd2e; }
.code-top i:nth-child(3) { background: #28c840; }
.code-top span { margin-left: 8px; }
.code-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-full);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8125rem;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.code-copy:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.code-copy.is-done { color: #8ef0c8; border-color: rgba(142, 240, 200, 0.4); }
.code-box pre {
  margin: 0;
  padding: 22px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.9vw, 0.9375rem);
  line-height: 1.7;
  color: #e6e8ee;
  -webkit-overflow-scrolling: touch;
}
.code-box .t-tag { color: #ff9ebb; }
.code-box .t-attr { color: #ffd59e; }
.code-box .t-str { color: #a5e8c4; }

/* Der Platzhalter im Einbau-Schnipsel. Er wird nie kopiert, sondern durch den
   eigenen Schlüssel aus dem Dashboard ersetzt — und muss deshalb auf den
   ersten Blick als Lücke erkennbar sein. */
.code-box .t-platzhalter {
  padding: 1px 5px;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffd59e;
  font-style: italic;
}

.code-top .code-hinweis {
  /* margin-left hier mit der Klasse des Elternteils, sonst gewinnt die
     allgemeinere Regel .code-top span darueber. */
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Nutzenbloecke (abwechselnd) ---------------------------------------- */

.alt-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.alt-row + .alt-row { margin-top: clamp(64px, 9vw, 130px); }
.alt-row:nth-child(even) .alt-text { order: 2; }
@media (max-width: 880px) {
  .alt-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .alt-row:nth-child(even) .alt-text { order: 0; }
}
.alt-text h2 { margin-block: 18px 16px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.alt-text p { color: var(--ink-2); }
.alt-text .btn-row { margin-top: 26px; }

.alt-list { margin-top: 22px; display: grid; gap: 11px; }
.alt-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9688rem;
  color: var(--ink-2);
}
.alt-list svg { flex: none; margin-top: 4px; color: var(--mint-500); }

/* --- Produkt-Attrappen (Screenshot-Ersatz) ------------------------------- */

.shot {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.shot-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.shot-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.shot-top span {
  margin-left: 8px;
  font-size: 0.75rem;
  color: var(--ink-4);
  font-family: var(--font-mono);
}
.shot-body { padding: 16px; display: grid; gap: 9px; }

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.row-item:hover { border-color: var(--pink-200); background: var(--pink-50); }
.row-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--pink-400);
}
.row-avatar--2 { background: #7aa7e0; }
.row-avatar--3 { background: #6fc7a8; }
.row-main { min-width: 0; flex: 1; }
.row-main b { display: block; font-size: 0.875rem; font-weight: 600; }
.row-main small { display: block; font-size: 0.75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 0.6875rem; color: var(--ink-4); flex: none; text-align: right; }

.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.kb-chip svg { color: var(--pink-500); flex: none; }

/* --- Bildplatzhalter ------------------------------------------------------ */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--pink-50), #fff 55%, var(--sky-50));
  border: 1px dashed var(--pink-200);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: rgba(31, 36, 48, 0.78);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}

/* --- Zwei Spalten: Gratis vs. KI ---------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
  align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }

.panel {
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.panel--free { border-color: #bfe8d8; background: linear-gradient(180deg, var(--mint-50), #fff 42%); }
.panel--ai { border-color: var(--pink-200); background: linear-gradient(180deg, var(--pink-50), #fff 42%); }

.panel-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.panel-price {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.panel-price small { font-size: 0.34em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.panel h3 { font-size: 1.375rem; }
.panel > p { color: var(--ink-2); margin-top: 6px; }

.check-list { margin-top: 24px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9688rem; }
.check-list svg { flex: none; margin-top: 4px; color: var(--mint-500); }
.check-list b { font-weight: 650; }
.check-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
@media (max-width: 640px) { .check-list--2col { grid-template-columns: minmax(0, 1fr); } }

/* --- Rechner ------------------------------------------------------------- */

.calc {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.calc-q { font-weight: 600; font-size: 1rem; margin-bottom: 14px; display: block; }

.calc-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--pink-600);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--pink-500) var(--fill, 30%), var(--line-2) var(--fill, 30%));
}
input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--pink-500) var(--fill, 30%), var(--line-2) var(--fill, 30%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pink-600);
  box-shadow: var(--shadow-md);
  transition: transform 0.18s var(--ease-out);
}
input[type="range"]::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pink-600);
  box-shadow: var(--shadow-md);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

.seg {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  gap: 2px;
  flex-wrap: wrap;
}
.seg label {
  position: relative;
  padding: 9px 18px;
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: #fff; color: var(--pink-700); box-shadow: var(--shadow-sm); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--pink-600); outline-offset: 2px; }

.calc-out {
  margin-top: 26px;
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--pink-50);
  border: 1px solid var(--pink-100);
  text-align: center;
}
.calc-plan {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.calc-plan em { font-style: normal; color: var(--pink-600); }
.calc-math {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.calc-out .btn { margin-top: 18px; }
.calc-incl { margin-top: 12px; font-size: 0.8125rem; color: var(--ink-3); }

/* --- Preistabelle -------------------------------------------------------- */

.tiers { display: grid; gap: 12px; }
.tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.tier:hover { border-color: var(--pink-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tier.is-match { border-color: var(--pink-600); box-shadow: var(--shadow-pink); }
.tier-name { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; }
.tier-name small { display: block; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.tier-answers { font-size: 0.9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tier-price { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; text-align: right; min-width: 92px; }
.tier-price small { font-size: 0.6em; font-weight: 500; color: var(--ink-3); }
@media (max-width: 560px) {
  .tier { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .tier-answers { grid-column: 1 / -1; }
}

/* --- FAQ ----------------------------------------------------------------- */

.faq { max-width: 800px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.03rem, 1.9vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.016em;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pink-600); }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--pink-50);
  border-radius: 50%;
  background-image: linear-gradient(var(--pink-600), var(--pink-600)),
    linear-gradient(var(--pink-600), var(--pink-600));
  background-size: 10px 1.6px, 1.6px 10px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq-answer { overflow: hidden; }
.faq-answer p { padding: 0 42px 24px 4px; color: var(--ink-2); }
.faq-answer p + p { padding-top: 12px; }

/* --- Datenschutz-Kachel --------------------------------------------------- */

.privacy-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(30px, 4vw, 56px);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.privacy-tile::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 138, 0.3), transparent 68%);
  pointer-events: none;
}
.privacy-tile h2 { color: #fff; position: relative; }
.privacy-tile p { color: rgba(255, 255, 255, 0.76); position: relative; }
.privacy-list { display: grid; gap: 12px; position: relative; }
.privacy-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.88);
}
.privacy-list svg { flex: none; margin-top: 3px; color: #8ef0c8; }
@media (max-width: 820px) { .privacy-tile { grid-template-columns: minmax(0, 1fr); } }

/* --- Demo-Feld ------------------------------------------------------------ */

.demo-box {
  max-width: 660px;
  margin-inline: auto;
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.url-field {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.url-field .input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.url-field .input-wrap > svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
}
.url-field input[type="url"],
.url-field input[type="text"] {
  width: 100%;
  padding: 16px 16px 16px 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: 1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.url-field input:focus {
  outline: none;
  border-color: var(--pink-500);
  background: #fff;
  box-shadow: 0 0 0 4px var(--pink-100);
}
@media (max-width: 560px) {
  .url-field { flex-direction: column; }
  .url-field .btn { width: 100%; }
}

/* --- CTA-Abschluss -------------------------------------------------------- */

.cta-final {
  position: relative;
  padding: clamp(48px, 7vw, 92px) clamp(24px, 4vw, 64px);
  border-radius: var(--r-xl);
  text-align: center;
  background: linear-gradient(140deg, var(--pink-50), #fff 42%, #f2f7ff);
  border: 1px solid var(--pink-100);
  overflow: hidden;
}
.cta-final h2 { font-size: clamp(2rem, 4.8vw, 3.1rem); }
.cta-final p { margin: 18px auto 0; max-width: 46ch; }
.cta-final .btn-row { justify-content: center; margin-top: 32px; }
.cta-flamingo {
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 190px;
  opacity: 0.16;
  pointer-events: none;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 72px) 34px;
  background: var(--surface-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-brand p { margin-top: 14px; max-width: 30ch; font-size: 0.9375rem; color: var(--ink-3); }
.footer-col h4 { margin-bottom: 14px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-4); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--ink-2); font-size: 0.9375rem; text-decoration: none; }
.footer-col a:hover { color: var(--pink-600); }

.footer-bottom {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--ink-3);
}

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

.prose { max-width: 740px; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 48px; }
.prose h3 { margin-top: 32px; }
.prose h2 + p, .prose h3 + p { margin-top: 14px; }
.prose p + p { margin-top: 16px; }
.prose ul, .prose ol { margin-top: 16px; padding-left: 22px; display: grid; gap: 9px; color: var(--ink-2); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 650; color: var(--ink); background: var(--surface-2); }
.prose blockquote {
  margin-top: 22px;
  padding: 18px 22px;
  border-left: 3px solid var(--pink-500);
  background: var(--pink-50);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
}
.note-box {
  margin-top: 26px;
  padding: 20px 24px;
  border: 1px dashed var(--pink-200);
  border-radius: var(--r-md);
  background: var(--pink-50);
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.note-box b { color: var(--ink); }

/* --- Seitenkopf (Unterseiten) -------------------------------------------- */

.page-head {
  position: relative;
  padding-block: clamp(48px, 7vw, 86px) clamp(32px, 4vw, 52px);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  height: 420px;
  background: radial-gradient(ellipse, var(--pink-100), transparent 66%);
  opacity: 0.85;
  pointer-events: none;
}
.page-head > * { position: relative; }
.page-head h1 { font-size: clamp(2.2rem, 5.4vw, 3.5rem); margin-top: 16px; }
.page-head .lead { margin-top: 20px; max-width: 44ch; }
.page-head--center { text-align: center; }
.page-head--center .eyebrow { justify-content: center; }
.page-head--center .lead { margin-inline: auto; }

/* --- Animationen --------------------------------------------------------- */

.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --- Barrierefreiheit ----------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -160%);
  z-index: 200;
  padding: 12px 22px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
}

/* --- Druck ---------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .hero-bg, .hero-grid-lines { display: none; }
  body { font-size: 12pt; }
}