/* ==========================================================================
   BILLEVO — Premium Landingpage
   Palette: #050505 · #0F0F10 · #1A1A1C · #F47A20 · #FF8A2A · #FFB15C · #F3F3F3
   Fonts:   Sora (Display) · Manrope (Body) · IBM Plex Mono (Labels/Zahlen)
   ========================================================================== */

:root {
  --ink-0: #050505;
  --ink-1: #0F0F10;
  --ink-2: #1A1A1C;
  --ink-3: #232326;
  --orange: #F47A20;
  --orange-bright: #FF8A2A;
  --amber: #FFB15C;
  --text: #F3F3F3;
  --text-soft: #C9C9CE;
  --text-mute: #A8A8AE;
  --text-dim: #8E8E95;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-orange: rgba(244, 122, 32, 0.35);
  --glow: rgba(244, 122, 32, 0.45);
  --font-display: "Sora", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --radius: 16px;
  --container: 1880px;
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* KEIN overflow-x:clip am html — das wuerde position:sticky (Nav!) brechen.
     Horizontaler Overflow wird an den Quellen geklemmt: .grain/.ambient max-width:100vw,
     Marquee ist in-flow, preise @max-width:360px + body{overflow-x:hidden}. */
  --nav-h: 78px;
}

@media (max-width: 720px) {
  html { --nav-h: 70px; }
}

body {
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

::selection { background: rgba(244, 122, 32, 0.85); color: #0A0500; }

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

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink-0); }
::-webkit-scrollbar-thumb { background: #2A2A2E; border-radius: 8px; border: 3px solid var(--ink-0); }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* Inline-SVG-Icons (Stroke-Stil) */
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.flag, svg.flag * { stroke: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(28px, 3vw, 58px);
}

/* Film-Korn über allem */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 9s steps(1) infinite;
}

@keyframes grainShift {
  0%, 100% { background-position: 0 0; }
  20% { background-position: -34px 26px; }
  40% { background-position: 28px -38px; }
  60% { background-position: -18px -22px; }
  80% { background-position: 38px 18px; }
}

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

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); }

h1 {
  font-size: clamp(2.7rem, 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(2.1rem, 3.3vw, 3.7rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1 em, h2 em, h3 em {
  font-style: normal;
  background: linear-gradient(95deg, var(--amber) 0%, var(--orange-bright) 45%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(244, 122, 32, 0.3));
}

.lead {
  margin-top: 22px;
  font-size: clamp(1rem, 1.3vw, 1.13rem);
  color: var(--text-mute);
  max-width: 56ch;
}

.lead strong { color: var(--text); font-weight: 700; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--orange-bright);
  margin-bottom: 18px;
}

.eyebrow--chip { display: inline-flex; align-items: center; gap: 12px; }

.eyebrow--chip span {
  display: inline-grid;
  place-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line-orange);
  border-radius: 8px;
  background: rgba(244, 122, 32, 0.08);
  color: var(--amber);
  letter-spacing: 0.1em;
}

.section-head--center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.section-head--center .lead { margin-left: auto; margin-right: auto; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}

.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.25s ease; }

.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
  color: #FFF7F0;
  box-shadow: 0 10px 34px -10px rgba(244, 122, 32, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -10px rgba(255, 138, 42, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--ghost {
  background: rgba(26, 26, 28, 0.55);
  border-color: rgba(255, 255, 255, 0.13);
  color: var(--text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--line-orange);
  box-shadow: 0 12px 34px -14px rgba(244, 122, 32, 0.45);
}

.btn--small { padding: 10px 18px; font-size: 0.88rem; border-radius: 10px; }

.btn--block { width: 100%; }

.btn--disabled { opacity: 0.5; cursor: default; pointer-events: none; }

/* ---------- Häkchen-Listen ---------- */

.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 26px;
}

.ticks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-soft);
}

.ticks svg { width: 18px; height: 18px; color: var(--orange-bright); flex: none; }

.ticks .flag { width: 19px; height: 14px; border-radius: 3px; }

.ticks--tight { gap: 8px 18px; }
.ticks--tight li { font-size: 0.8rem; }

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}

.nav--scrolled {
  background: rgba(5, 5, 5, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: 0.06em;
}

.nav__brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 12px rgba(244, 122, 32, 0.5)); }

.nav__links { display: flex; align-items: center; gap: 34px; }

.nav__links a:not(.btn) {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-mute);
  position: relative;
  transition: color 0.25s ease;
}

.nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--amber), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav__links a:not(.btn):hover { color: var(--text); }
.nav__links a:not(.btn):hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 14px; }

.nav__cta-mobile { display: none; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: rgba(26, 26, 28, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sektions-Gerüst & Hintergründe ---------- */

section { position: relative; }

.hero__bg, .problem__bg, .solution__bg, .steps__bg, .insights__bg, .pricing__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero__bg::after, .problem__bg::after, .solution__bg::after,
.steps__bg::after, .insights__bg::after, .pricing__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ink-0) 0%, rgba(5, 5, 5, 0.25) 14%, rgba(5, 5, 5, 0.18) 55%, rgba(5, 5, 5, 0.55) 85%, var(--ink-0) 100%);
}

section > .container { position: relative; z-index: 1; }

/* ---------- HERO ---------- */

.hero { overflow: hidden; }

.hero__bg { background-image: url("../assets/bg-hero.jpg"); background-position: center bottom; }

.hero__bg::after {
  background:
    radial-gradient(58% 75% at 22% 42%, rgba(5, 5, 5, 0.78) 0%, rgba(5, 5, 5, 0.25) 60%, transparent 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.72) 0%, rgba(5, 5, 5, 0.15) 26%, rgba(5, 5, 5, 0.06) 60%, rgba(5, 5, 5, 0.3) 92%, rgba(5, 5, 5, 0.96) 100%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 48px;
  min-height: min(100vh, 985px);
  padding-top: 114px;
  padding-bottom: 90px;
}

/* Grid-Item muss unter seine Inhalts-Mindestbreite schrumpfen dürfen, sonst zwingt ein langes Wort/
   eine lange Zeile (z. B. die Preis-/Garantie-Zeile) die Hero-Spalte über den Handy-Rand. */
.hero__copy { min-width: 0; }
.hero__copy .lead { max-width: 46ch; }
/* Hero-Headline so dimensionieren, dass das lange Wort "Rechnungssoftware" in die Copy-Spalte passt
   (sonst greift der Soft-Hyphen-Notumbruch und es bricht unschön zu "Rechnungs-software"). */
.hero__copy h1 { font-size: clamp(2.3rem, 3vw, 3.35rem); line-height: 1.07; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero__platforms {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-dim);
}

.hero__platforms svg { width: 17px; height: 17px; color: var(--text-soft); flex: none; }

.hero__trust {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.hero__trust-icons { display: flex; }

.hero__trust-icons span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, #1B1B1E, #121214);
  border: 1px solid var(--line-orange);
  color: var(--orange-bright);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.8);
}

.hero__trust-icons span + span { margin-left: -11px; }

.hero__trust-icons svg { width: 18px; height: 18px; }

.hero__trust p { font-size: 0.88rem; color: var(--text-mute); line-height: 1.5; }

.hero__trust em { font-style: normal; color: var(--amber); font-weight: 700; }

/* App-Fenster */

.window {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 138, 42, 0.6);
  background: #0B0B0C;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(244, 122, 32, 0.22),
    0 0 22px -2px rgba(244, 122, 32, 0.55),
    0 0 90px -12px rgba(244, 122, 32, 0.45),
    0 60px 140px -40px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: #121214;
  border-bottom: 1px solid var(--line-soft);
}

.window__dots { display: inline-flex; gap: 6px; }

.window__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2C2C30;
}

.window__dots i:last-child { background: var(--orange); box-shadow: 0 0 8px rgba(244, 122, 32, 0.7); }

.window__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.window__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #5E5E66;
  letter-spacing: 0.08em;
}

.window img { width: 100%; }

.hero__visual { position: relative; }

.hero__visual::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 4%;
  bottom: -52px;
  height: 90px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(244, 122, 32, 0.32), transparent 75%);
  filter: blur(14px);
  z-index: -1;
}

.window--tilt {
  transform: perspective(1500px) rotateY(-7deg) rotateX(3deg) rotate(0.3deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.window--tilt:hover { transform: perspective(1500px) rotateY(-2deg) rotateX(1deg); }

@media (min-width: 1400px) {
  .hero__visual { margin-right: -18px; }
}

/* ---------- PROBLEM ---------- */

.problem { padding: 130px 0 110px; }

.problem__bg { background-image: url("../assets/bg-problem-arc.jpg"); }

.problem__bg::after {
  background:
    linear-gradient(180deg, var(--ink-0) 0%, rgba(5, 5, 5, 0.08) 12%, transparent 32%, transparent 68%, rgba(5, 5, 5, 0.3) 90%, var(--ink-0) 100%);
}

@media (min-width: 1081px) {
  .problem__bg { background-image: url("../assets/bg-problem-composite.jpg"); }
}

.problem__grid {
  /* linke Spalte breiter, damit Text & Karten rechts vom Leucht-Bogen bleiben */
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 44px;
  align-items: center;
}

.chaos {
  position: relative;
}

.chaos img {
  width: 100%;
  -webkit-mask-image: radial-gradient(115% 100% at 38% 42%, #000 50%, rgba(0, 0, 0, 0.82) 64%, transparent 97%);
  mask-image: radial-gradient(115% 100% at 38% 42%, #000 50%, rgba(0, 0, 0, 0.82) 64%, transparent 97%);
}

.chaos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.1) 0%, transparent 40%, rgba(5, 5, 5, 0.55) 100%);
  pointer-events: none;
}

@media (min-width: 1081px) {
  /* Desktop: Schreibtisch + Bogen sind in den Sektions-Hintergrund gebacken —
     die Figur dient nur noch als Träger für die KPI-Chips */
  .problem__visual { margin-left: calc(-1 * clamp(28px, 3vw, 58px)); align-self: stretch; }
  .chaos { height: 100%; min-height: 540px; }
  .chaos img, .chaos::after { display: none; }
  .chaos__chips { right: 18%; }
}

.chaos__chips {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  z-index: 1;
}

.chip-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 13px 14px;
  border-radius: 13px;
  background: rgba(8, 8, 9, 0.66);
  border: 1px solid var(--line-orange);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.9), inset 0 0 24px -14px rgba(244, 122, 32, 0.55);
}

.chip-stat svg { width: 22px; height: 22px; color: var(--orange-bright); }

.chip-stat__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  white-space: nowrap;
}

.chip-stat__value {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}

.problem__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}

.card {
  padding: 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20, 20, 22, 0.82), rgba(13, 13, 14, 0.82));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-orange);
  box-shadow: 0 24px 60px -24px rgba(244, 122, 32, 0.35);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(244, 122, 32, 0.1);
  border: 1px solid rgba(244, 122, 32, 0.3);
  color: var(--orange-bright);
  margin-bottom: 16px;
}

.card__icon svg { width: 21px; height: 21px; }

.card h3 { font-size: 1.04rem; font-weight: 700; margin-bottom: 8px; }

.card p { font-size: 0.88rem; color: var(--text-dim); line-height: 1.55; }

/* Folge-/Fazit-Streifen */

.strip {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 56px;
  padding: 24px 30px;
  border-radius: 18px;
  border: 1px solid rgba(244, 122, 32, 0.28);
  background:
    radial-gradient(120% 180% at 0% 50%, rgba(244, 122, 32, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(18, 18, 20, 0.85), rgba(10, 10, 11, 0.85));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}

.strip--center { justify-content: center; text-align: left; }

.strip__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(244, 122, 32, 0.12);
  border: 1px solid var(--line-orange);
  color: var(--orange-bright);
  box-shadow: 0 0 30px -6px rgba(244, 122, 32, 0.5);
}

.strip__icon svg { width: 24px; height: 24px; }

.strip__text h3 { font-size: 1.18rem; font-weight: 700; }

.strip__text p { font-size: 0.9rem; color: var(--text-mute); margin-top: 5px; }

/* ---------- LÖSUNG ---------- */

.solution { padding: 130px 0 110px; }

.solution__bg { background-image: url("../assets/bg-solution.jpg"); }

.solution__bg::after {
  background:
    linear-gradient(180deg, var(--ink-0) 0%, rgba(5, 5, 5, 0.16) 15%, rgba(5, 5, 5, 0.06) 50%, rgba(5, 5, 5, 0.4) 86%, var(--ink-0) 100%);
}

.solution__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) minmax(0, 1.3fr);
  gap: 44px;
  align-items: center;
}

.bullets { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }

.bullets li { display: flex; gap: 14px; }

.bullets svg { width: 23px; height: 23px; flex: none; color: var(--orange-bright); margin-top: 2px; }

.bullets h4 { font-size: 0.99rem; font-weight: 700; }

.bullets p { font-size: 0.86rem; color: var(--text-dim); margin-top: 3px; }

.drive-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 34px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(244, 122, 32, 0.1), rgba(15, 15, 16, 0.9) 45%);
  border: 1px solid var(--line-orange);
  box-shadow: 0 24px 60px -28px rgba(244, 122, 32, 0.4);
}

.drive-card img { width: 42px; height: 42px; flex: none; filter: drop-shadow(0 0 10px rgba(244, 122, 32, 0.5)); }

.drive-card h4 { font-size: 0.99rem; }

.drive-card p { font-size: 0.85rem; color: var(--text-mute); margin-top: 5px; }

.solution__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.solution__emblem { position: relative; }

.solution__emblem::before {
  content: "";
  position: absolute;
  inset: -34%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(244, 122, 32, 0.3), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}

.solution__emblem img {
  width: min(320px, 60vw);
  filter: drop-shadow(0 0 44px rgba(244, 122, 32, 0.6)) drop-shadow(0 24px 60px rgba(0, 0, 0, 0.6));
  animation: floatY 7s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.window--mini { width: 100%; max-width: 330px; }

.window--mini img {
  height: 168px;
  object-fit: cover;
  object-position: left top;
}

.solution__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tile {
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.8), rgba(12, 12, 13, 0.8));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.tile:hover {
  transform: translateY(-4px);
  border-color: var(--line-orange);
  box-shadow: 0 26px 60px -26px rgba(244, 122, 32, 0.4);
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(244, 122, 32, 0.1);
  border: 1px solid rgba(244, 122, 32, 0.3);
  color: var(--orange-bright);
  margin-bottom: 12px;
}

.tile__icon svg { width: 18px; height: 18px; }

.tile h3 { font-size: 0.93rem; font-weight: 700; margin-bottom: 6px; }

.tile p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.48; }

/* ---------- 3 SCHRITTE ---------- */

.steps { padding: 112px 0 96px; }

.steps__bg { background-image: url("../assets/bg-steps.jpg"); background-position: center bottom; }

.steps__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: 54px;
  --steps-gap: clamp(24px, 3vw, 40px);
  --steps-col: calc((100% - 2 * var(--steps-gap)) / 3);
  --steps-icon: 108px;
  --steps-arrow-w: 132px;
}

.steps__arrow {
  position: absolute;
  top: calc(var(--steps-icon) / 2 - 12px);
  width: var(--steps-arrow-w);
  height: 24px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 145, 50, 0.95)) drop-shadow(0 0 8px rgba(255, 120, 30, 0.7)) drop-shadow(0 0 18px rgba(244, 122, 32, 0.4));
}

/* zentriert im Zwischenraum, endet kurz vor dem Icon der nächsten Spalte */
.steps__arrow--1 { left: calc(var(--steps-col) + var(--steps-gap) - var(--steps-arrow-w) - 6px); }
.steps__arrow--2 { left: calc(2 * var(--steps-col) + 2 * var(--steps-gap) - var(--steps-arrow-w) - 6px); }

.step__head {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: var(--steps-icon);
}

.step__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--steps-icon);
  height: var(--steps-icon);
  border-radius: 16px;
  background: radial-gradient(135% 110% at 50% 0%, rgba(244, 122, 32, 0.14), transparent 62%), #0C0C0E;
  border: 1.5px solid rgba(255, 130, 38, 0.82);
  color: var(--orange-bright);
  box-shadow: 0 0 24px -2px rgba(255, 120, 26, 0.5), 0 0 58px -10px rgba(244, 122, 32, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.step__icon svg { width: 56px; height: 56px; stroke-width: 1.6; }

.step__text { min-width: 0; }

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--orange-bright);
  text-shadow: 0 0 16px rgba(255, 138, 42, 0.35);
}

.step__head h3 { font-size: 1.5rem; font-weight: 700; margin: 10px 0 0; line-height: 1.12; }

.step__head p { font-size: 0.9rem; color: var(--text-mute); line-height: 1.6; margin-top: 10px; }

/* Mini-App-Mockups */

.step { display: flex; flex-direction: column; }

.mock {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #121214, #0B0B0C);
  border: 1px solid transparent;
  box-shadow: 0 36px 80px -34px rgba(0, 0, 0, 0.9), 0 0 54px -22px rgba(244, 122, 32, 0.45);
}

.mock > :last-child { margin-top: auto; }

.mock__title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  padding-bottom: 13px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line-soft);
}

.mock__title--split { display: flex; justify-content: space-between; align-items: center; }

.mock__title--split i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  padding: 3px 9px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  background: rgba(244, 122, 32, 0.08);
}

.mock__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin: 9px 0 4px;
}

.mock__field {
  padding: 9px 12px;
  border-radius: 10px;
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
}

.mock__field--split { display: flex; justify-content: space-between; gap: 10px; }

.mock__field .muted { color: var(--text-dim); font-weight: 500; }

.mock__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.mock__total strong {
  font-family: var(--font-display);
  font-size: 1.04rem;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255, 177, 92, 0.4);
}

.mock__btn {
  margin-top: 14px;
  padding: 11px;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #FB5E16, #ED4604);
  color: #FFF7F0;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 10px 26px -10px rgba(237, 70, 4, 0.6);
}

.mock__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #141416;
}

.mock__row + .mock__row { margin-top: 9px; }

.mock__row > svg { width: 19px; height: 19px; flex: none; color: var(--orange-bright); }

.mock__row div { min-width: 0; flex: 1; }

.mock__row strong { display: block; font-size: 0.8rem; color: var(--text); }

.mock__row span {
  display: block;
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__chip {
  flex: none;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-orange);
  background: rgba(244, 122, 32, 0.1);
}

.mock__ok {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 10px 13px;
  border-radius: 11px;
  background: rgba(255, 177, 92, 0.09);
  border: 1px solid rgba(255, 177, 92, 0.32);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--amber);
}

.mock__ok svg { width: 17px; height: 17px; flex: none; }

.mock__kpi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.mock__kpi + .mock__kpi { border-top: 1px solid rgba(255, 255, 255, 0.05); }

.mock__kpi strong { font-family: var(--font-display); font-size: 0.95rem; }

.mock__kpi .up { color: var(--amber); }

.mock__kpi .down { color: #FF7A5C; }

.mock__chart { width: 100%; height: 56px; margin: 9px 0 2px; }

/* Badge-Reihe */

.badge-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 58px;
  padding-top: 38px;
  border-top: 1px solid var(--line-soft);
}

.badge { display: flex; gap: 13px; align-items: flex-start; }

.badge > svg { width: 26px; height: 26px; flex: none; color: var(--orange-bright); margin-top: 1px; }

.badge .flag { width: 26px; height: 19px; border-radius: 4px; margin-top: 4px; }

.badge h4 { font-size: 0.92rem; font-weight: 700; }

.badge p { font-size: 0.8rem; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }

/* ---------- EINBLICKE ---------- */

.insights { padding: 130px 0 110px; }

.insights__bg { background-image: url("../assets/bg-insights.jpg"); background-position: center bottom; }

.insights__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: center;
}

@media (min-width: 1400px) {
  .insights__visual { margin-right: calc(-1 * clamp(36px, 3vw, 70px)); }
}

.minis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-top: 32px;
}

.mini { display: flex; gap: 12px; }

.mini svg { width: 22px; height: 22px; flex: none; color: var(--orange-bright); margin-top: 2px; }

.mini h4 { font-size: 0.93rem; font-weight: 700; }

.mini p { font-size: 0.82rem; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }

.insights__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.insights__visual { position: relative; }

.insights__visual::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -46px;
  height: 80px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(244, 122, 32, 0.3), transparent 75%);
  filter: blur(13px);
  z-index: -1;
}

.float-card {
  position: absolute;
  right: -28px;
  top: 30%;
  width: min(330px, 86%);
  padding: 17px 18px;
  border-radius: var(--radius);
  background: rgba(11, 11, 12, 0.93);
  border: 1px solid var(--line-orange);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 36px 80px -26px rgba(0, 0, 0, 0.95), 0 0 50px -20px rgba(244, 122, 32, 0.55);
}

.float-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 9px;
}

.float-card__head svg { width: 17px; height: 17px; }

.float-card p { font-size: 0.85rem; color: var(--text-soft); line-height: 1.5; }

.float-card strong { color: var(--text); }

.float-card__tag {
  display: inline-block;
  margin-top: 11px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Ehrliche Automatisierung */

.auto { margin-top: 120px; }

.auto__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }

.auto__head h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; }

.auto__head p { font-size: 0.95rem; color: var(--text-mute); margin-top: 10px; }

.auto__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.auto-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.82), rgba(11, 11, 12, 0.82));
  border: 1px solid var(--line);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.auto-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-orange);
  box-shadow: 0 24px 60px -26px rgba(244, 122, 32, 0.4);
}

.status {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.status--now { color: var(--amber); border: 1px solid rgba(255, 177, 92, 0.4); background: rgba(255, 177, 92, 0.1); }

.status--soon { color: var(--orange-bright); border: 1px solid rgba(255, 138, 42, 0.45); background: rgba(255, 138, 42, 0.1); }

.status--planned { color: var(--text-dim); border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); }

.auto-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(244, 122, 32, 0.1);
  border: 1px solid rgba(244, 122, 32, 0.3);
  color: var(--orange-bright);
  margin-bottom: 13px;
}

.auto-card__icon svg { width: 20px; height: 20px; }

.auto-card h4 { font-size: 0.99rem; font-weight: 700; margin-bottom: 7px; }

.auto-card p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; }

.auto__arrow {
  flex: none;
  align-self: center;
  width: 52px;
  height: 28px;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(255, 150, 60, 0.9)) drop-shadow(0 0 12px rgba(244, 122, 32, 0.6));
}

.auto__arrow path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.auto__emblem {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(244, 122, 32, 0.22), rgba(15, 15, 16, 0.9) 75%);
  border: 1px solid var(--line-orange);
  box-shadow: 0 0 46px -8px rgba(244, 122, 32, 0.75), inset 0 0 26px -10px rgba(244, 122, 32, 0.5);
}

.auto__emblem img {
  width: 46px;
  filter: drop-shadow(0 0 14px rgba(244, 122, 32, 0.7));
  animation: floatY 6s ease-in-out infinite;
}

.auto__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-soft);
}

.auto__note svg { width: 19px; height: 19px; color: var(--amber); flex: none; }

/* ---------- VERTRAUEN & PREISE ---------- */

.pricing { padding: 130px 0 120px; }

.pricing__bg { background-image: url("../assets/bg-pricing.jpg"); background-position: center top; }

.trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 60px;
  align-items: center;
}

.trust__badges {
  display: flex;
  gap: 24px;
  margin-top: 36px;
}

.trust__badges .badge { flex: 1; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 40px;
}

.stat { padding: 4px 0; }

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 2.8vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(95deg, var(--amber), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(244, 122, 32, 0.35));
}

.stat p { font-size: 0.83rem; color: var(--text-dim); margin-top: 8px; line-height: 1.5; max-width: 30ch; }

/* Klartext statt Kundenstimmen */

.honesty { margin-top: 100px; }

.honesty__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 26px;
}

.honesty__head .eyebrow { margin-bottom: 0; }

.honesty__head span { font-size: 0.84rem; color: var(--text-dim); }

.honesty__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.quote {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20, 20, 22, 0.85), rgba(12, 12, 13, 0.85));
  border: 1px solid var(--line);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.quote:hover {
  transform: translateY(-4px);
  border-color: var(--line-orange);
  box-shadow: 0 26px 60px -26px rgba(244, 122, 32, 0.35);
}

.quote__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(244, 122, 32, 0.1);
  border: 1px solid rgba(244, 122, 32, 0.32);
  color: var(--orange-bright);
  margin-bottom: 16px;
}

.quote__icon svg { width: 17px; height: 17px; }

.quote h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 10px; }

.quote p { font-size: 0.87rem; color: var(--text-mute); line-height: 1.6; }

.quote footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

.quote footer img { width: 24px; height: 24px; opacity: 0.9; }

.quote footer span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.quote footer i { font-style: normal; color: var(--amber); }

/* Preiskarten */

.pricing__head { margin-top: 110px; }

.pricing__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-orange);
  background: rgba(244, 122, 32, 0.08);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.pricing__pill svg { width: 17px; height: 17px; }

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 60px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.86), rgba(11, 11, 12, 0.86));
  border: 1px solid var(--line);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.plan:hover { transform: translateY(-5px); border-color: rgba(244, 122, 32, 0.3); }

.plan--featured {
  border-color: rgba(244, 122, 32, 0.55);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(244, 122, 32, 0.13), transparent 60%),
    linear-gradient(180deg, rgba(22, 20, 18, 0.92), rgba(11, 11, 12, 0.92));
  box-shadow: 0 40px 100px -36px rgba(244, 122, 32, 0.5);
}

.plan__flag {
  position: absolute;
  top: -13px;
  left: 22px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
  color: #FFF7F0;
  box-shadow: 0 8px 22px -8px rgba(244, 122, 32, 0.8);
}

.plan__flag--soon {
  background: var(--ink-2);
  border: 1px solid rgba(255, 138, 42, 0.5);
  color: var(--orange-bright);
  box-shadow: none;
}

.plan__flag--planned {
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-dim);
  box-shadow: none;
}

.plan__head { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; }

.plan__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(244, 122, 32, 0.1);
  border: 1px solid rgba(244, 122, 32, 0.3);
  color: var(--orange-bright);
}

.plan__icon svg { width: 21px; height: 21px; }

.plan__head h3 { font-size: 1.16rem; font-weight: 800; }

.plan__head p { font-size: 0.76rem; color: var(--text-dim); }

.plan__price {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.plan__price strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.plan--featured .plan__price strong {
  font-size: 2.3rem;
  background: linear-gradient(95deg, var(--amber), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(244, 122, 32, 0.35));
}

.plan__price span { font-size: 0.72rem; color: var(--text-dim); line-height: 1.45; }

.plan__price i { font-style: normal; color: #6E6E75; }

.plan ul { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }

.plan li {
  position: relative;
  padding-left: 23px;
  font-size: 0.81rem;
  color: var(--text-mute);
  line-height: 1.45;
}

.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--orange-bright);
}

.plan:has(.plan__flag--planned) li::before { content: "○"; color: var(--text-dim); }

.plan .btn { margin-top: auto; }

.plan__note { font-size: 0.72rem; color: #6E6E75; text-align: center; margin-top: 12px; }

.plan__note a { color: var(--amber); transition: color 0.25s ease; }

.plan__note a:hover { color: var(--orange-bright); }

.plans__footnote {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  max-width: 900px;
  margin: 42px auto 0;
  font-size: 0.86rem;
  color: var(--text-mute);
  text-align: left;
}

.plans__footnote svg { width: 20px; height: 20px; flex: none; color: var(--orange-bright); margin-top: 2px; }

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

.faq { padding: 130px 0 110px; }

.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 36% at 50% 0%, rgba(244, 122, 32, 0.07), transparent 70%);
}

.faq__container { position: relative; z-index: 1; }

.faq__list { max-width: 860px; margin: 56px auto 0; }

.faq__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 18, 20, 0.75), rgba(11, 11, 12, 0.75));
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq__item:hover { border-color: rgba(244, 122, 32, 0.3); }

.faq__item[open] {
  border-color: var(--line-orange);
  box-shadow: 0 24px 60px -30px rgba(244, 122, 32, 0.35);
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 19px 24px;
  font-family: var(--font-display);
  font-size: 0.99rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s ease;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item[open] summary { color: var(--amber); }

.faq__plus { position: relative; flex: none; width: 18px; height: 18px; }

.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--orange-bright);
  border-radius: 2px;
  transition: transform 0.3s ease;
}

.faq__plus::before { width: 14px; height: 2px; }
.faq__plus::after { width: 2px; height: 14px; }

.faq__item[open] .faq__plus::after { transform: rotate(90deg); }

.faq__body { padding: 0 24px 20px; }

.faq__body p { font-size: 0.9rem; color: var(--text-mute); max-width: 64ch; }

.faq__item[open] .faq__body { animation: faqIn 0.35s ease; }

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}

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

.cta { padding: 40px 0 130px; }

.cta__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: center;
  gap: 40px;
  padding: 60px 64px;
  border-radius: 28px;
  border: 1px solid rgba(244, 122, 32, 0.32);
  background:
    radial-gradient(90% 130% at 100% 100%, rgba(244, 122, 32, 0.2), transparent 55%),
    radial-gradient(70% 110% at 0% 0%, rgba(244, 122, 32, 0.08), transparent 60%),
    linear-gradient(180deg, #111113, #0A0A0B);
  box-shadow: 0 60px 140px -50px rgba(244, 122, 32, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cta__copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }

.cta__copy > p { margin-top: 14px; font-size: 1rem; color: var(--text-mute); max-width: 46ch; }

.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.cta__actions .btn--ghost svg:first-child { transform: none; }

.cta__platforms { margin-top: 16px; font-size: 0.8rem; color: var(--text-dim); }

.cta__emblem {
  position: relative;
  display: grid;
  place-items: center;
}

.cta__emblem::before {
  content: "";
  position: absolute;
  width: 125%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(244, 122, 32, 0.3);
  box-shadow: 0 0 60px -10px rgba(244, 122, 32, 0.45), inset 0 0 60px -20px rgba(244, 122, 32, 0.4);
  animation: pulseRing 5s ease-in-out infinite;
}

@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.06); opacity: 1; }
}

.cta__emblem img {
  width: min(250px, 50vw);
  filter: drop-shadow(0 0 40px rgba(244, 122, 32, 0.6));
  animation: floatY 7s ease-in-out infinite;
}

/* ---------- FOOTER ---------- */

.footer {
  position: relative;
  z-index: 1;                 /* sicher ÜBER dem fixierten Hintergrund (z -2) + Scrim (z -1) */
  border-top: 1px solid var(--line-soft);
  background: var(--ink-0);   /* deckend -> der fixe Hintergrund scheint nicht durch */
  padding: 70px 0 30px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px;
}

.footer__claim {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
}

.footer__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.footer__chips span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.footer__col a {
  display: block;
  font-size: 0.89rem;
  color: var(--text-mute);
  margin-bottom: 12px;
  transition: color 0.25s ease, transform 0.25s ease;
}

.footer__col a:hover { color: var(--amber); transform: translateX(3px); }

.footer__pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 50px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.footer__pay-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

.footer__pay-logos { display: flex; flex-wrap: wrap; gap: 9px; }

.pay-chip {
  display: grid;
  place-items: center;
  height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  background: #F6F7F9;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pay-chip img { height: 17px; width: auto; display: block; }

.pay-chip img[alt="American Express"] { height: 22px; }

/* Link badge is a filled pill — give it a touch more height so its wordmark matches the others */
.pay-chip img[alt="Link"] { height: 19px; }

.pay-chip--stripe img { height: 19px; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: #6E6E75;
}

/* ---------- Scroll-Reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s cubic-bezier(0.2, 0.65, 0.25, 1) var(--d, 0s),
    transform 0.75s cubic-bezier(0.2, 0.65, 0.25, 1) var(--d, 0s);
}

.js .reveal.in { opacity: 1; transform: none; }

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

/* ==========================================================================
   Announce-Bar, Unterseiten & Preisstufen
   ========================================================================== */

.announce {
  position: relative;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px clamp(44px, 5vw, 60px);
  background: linear-gradient(90deg, #2A1404, #3A1C06 50%, #2A1404);
  border-bottom: 1px solid rgba(244, 122, 32, 0.35);
}

.announce p {
  font-size: 0.84rem;
  color: var(--text-soft);
  text-align: center;
}

.announce strong { color: var(--amber); }

.announce a {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--orange-bright);
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 138, 42, 0.5);
  transition: color 0.25s ease;
}

.announce a:hover { color: var(--amber); }

.announce button {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.announce button:hover { color: var(--text); border-color: var(--line-orange); }

html.announce-hidden .announce { display: none; }

/* Nav: sticky statt fixed (Announce-Bar scrollt weg, Nav bleibt) */
.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, transform 0.35s ease;
}

/* Auto-Hide: beim Runterscrollen aus dem Bild, beim Hochscrollen zurück */
.nav--hidden { transform: translateY(-110%); }

.nav__links a.is-active { color: var(--amber); }

.hero__inner { padding-top: 44px; }

/* Preisstufen */
.plans {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
}

.plan__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: -6px 0 16px;
}

.plan__path span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.plan__path span.now {
  color: var(--amber);
  border-color: var(--line-orange);
  background: rgba(244, 122, 32, 0.1);
}

.plan__path svg { width: 13px; height: 13px; color: var(--orange); flex: none; }

.stages {
  display: flex;
  align-items: stretch;
  gap: 14px;
  max-width: 1100px;
  margin: 54px auto 0;
}

.stage {
  flex: 1;
  padding: 24px 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.82), rgba(11, 11, 12, 0.82));
  border: 1px solid var(--line);
  text-align: center;
}

.stage--active {
  border-color: rgba(244, 122, 32, 0.55);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244, 122, 32, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(22, 20, 18, 0.92), rgba(11, 11, 12, 0.92));
  box-shadow: 0 30px 80px -34px rgba(244, 122, 32, 0.5);
}

.stage__phase {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 13px;
}

.stage--active .stage__phase {
  color: var(--amber);
  border-color: var(--line-orange);
  background: rgba(244, 122, 32, 0.1);
}

.stage strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.stage--active strong {
  font-size: 2.4rem;
  background: linear-gradient(95deg, var(--amber), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(244, 122, 32, 0.35));
}

.stage p { font-size: 0.78rem; color: var(--text-dim); margin-top: 8px; }

.stage__bar {
  flex: none;
  align-self: center;
  width: 44px;
  height: 24px;
  color: var(--orange);
  opacity: 0.9;
  filter: drop-shadow(0 0 5px rgba(255, 150, 60, 0.9));
}

.stages__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-soft);
  text-align: center;
}

.stages__note svg { width: 19px; height: 19px; color: var(--amber); flex: none; }

/* Unterseiten-Hero */
.page-hero {
  position: relative;
  padding: 110px 0 84px;
}

/* Großflächiger Seiten-Hintergrund (wie bei den Rechtstexten): prominent oben, läuft sanft ins
   Schwarz aus, statt nur ein schmaler Streifen. z-index:-1 = hinter dem gesamten Inhalt. */
.page-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(540px, 78vh, 940px);
  background-image: var(--ph-bg, url("../assets/bg-pricing.jpg"));
  background-size: cover;
  background-position: center top;
  z-index: -1;
}

.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.42) 0%, rgba(5, 5, 5, 0.24) 45%, rgba(5, 5, 5, 0.74) 84%, var(--ink-0) 100%);
}

/* Preise-Hero bleibt kompakt (eigener .pricing__bg darunter) – NICHT der große Ambient-Hintergrund. */
.page-hero--tight { overflow: hidden; }
.page-hero--tight .page-hero__bg { position: absolute; inset: 0; height: auto; z-index: 0; }
.page-hero--tight .page-hero__bg::after { background: linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.25) 45%, var(--ink-0) 100%); }

/* Foto-Heros (generierte Motive): zusaetzliche Abdunklung links, wo die Headline sitzt */
.page-hero__bg--photo::after {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.84) 0%, rgba(5, 5, 5, 0.55) 38%, rgba(5, 5, 5, 0.14) 72%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.5) 0%, rgba(5, 5, 5, 0.22) 45%, var(--ink-0) 100%);
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.9rem); }

.page-hero .lead { max-width: 64ch; }

.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.section-pad { padding: 92px 0; position: relative; }

.section-pad--tight { padding: 64px 0; }

/* Funktionsbereiche (Funktionen-Seite) */
.areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 54px;
}

.area {
  padding: 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.82), rgba(11, 11, 12, 0.82));
  border: 1px solid var(--line);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.area:hover {
  transform: translateY(-4px);
  border-color: var(--line-orange);
  box-shadow: 0 26px 60px -26px rgba(244, 122, 32, 0.35);
}

.area__head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }

.area__head .tile__icon { margin-bottom: 0; }

.area__num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--orange-bright);
  display: block;
}

.area h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }

.area ul { display: flex; flex-direction: column; gap: 9px; }

.area li {
  position: relative;
  padding-left: 23px;
  font-size: 0.85rem;
  color: var(--text-mute);
  line-height: 1.5;
}

.area li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--orange-bright);
}

.area li strong { color: var(--text); font-weight: 700; }

/* Download-Karten */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 54px;
}

.dl-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.86), rgba(11, 11, 12, 0.86));
  border: 1px solid var(--line);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.dl-card:hover { transform: translateY(-4px); border-color: var(--line-orange); }

.dl-card--featured {
  border-color: rgba(244, 122, 32, 0.55);
  box-shadow: 0 36px 90px -36px rgba(244, 122, 32, 0.5);
}

.dl-card__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(244, 122, 32, 0.1);
  border: 1px solid rgba(244, 122, 32, 0.3);
  color: var(--orange-bright);
  margin-bottom: 18px;
}

.dl-card__icon svg { width: 25px; height: 25px; }

.dl-card h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0; }

.dl-card p { font-size: 0.84rem; color: var(--text-dim); margin: 8px 0 18px; }

.dl-card .btn { margin-top: auto; }

.dl-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.dl-card__meta span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Info-/Kontakt-Karten & Schrittlisten */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 54px;
}

.info-card {
  padding: 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.82), rgba(11, 11, 12, 0.82));
  border: 1px solid var(--line);
}

.info-card .tile__icon { margin-bottom: 14px; }

.info-card h2, .info-card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; margin-bottom: 8px; }

.info-card p { font-size: 0.87rem; color: var(--text-mute); line-height: 1.6; }

.info-card a:not(.btn) { color: var(--amber); }

.info-card a:not(.btn):hover { color: var(--orange-bright); }

.steps-list { counter-reset: step; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; max-width: 760px; }

.steps-list li {
  counter-increment: step;
  position: relative;
  padding: 18px 20px 18px 64px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.8), rgba(11, 11, 12, 0.8));
  border: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--text-mute);
  line-height: 1.6;
}

.steps-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--orange-bright);
}

.steps-list strong { color: var(--text); }

/* Fließtext (Ratgeber & Rechtliches) */
.prose { max-width: 800px; }

.prose h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
}

.prose h3 { font-size: 1.1rem; margin: 28px 0 10px; }

.prose p { font-size: 0.95rem; color: var(--text-mute); line-height: 1.75; margin-bottom: 14px; }

.prose ul { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 18px; }

.prose li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  color: var(--text-mute);
  line-height: 1.6;
}

.prose li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--orange-bright);
}

.prose strong { color: var(--text); }

.prose a { color: var(--amber); border-bottom: 1px solid rgba(255, 177, 92, 0.35); }

.prose a:hover { color: var(--orange-bright); }

.prose .todo {
  display: block;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 138, 42, 0.5);
  background: rgba(244, 122, 32, 0.06);
  color: var(--amber);
  font-size: 0.86rem;
  margin: 16px 0;
}

/* App-Screenshot-Galerie (Funktionen & Ratgeber) */
.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 22px 0;
}

.shots--single { grid-template-columns: 1fr; max-width: 980px; }

.shot { margin: 0; }

.shot figcaption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-align: center;
  margin-top: 13px;
}

@media (max-width: 720px) {
  .shots { grid-template-columns: 1fr; }
}

.faq__group {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--orange-bright);
  margin: 38px 0 14px;
}

.faq__list .faq__group:first-child { margin-top: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {
  .plans { grid-template-columns: 1fr 1fr; row-gap: 30px; }

  .solution__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .solution__copy { grid-column: 1; }
  .solution__center { grid-column: 2; grid-row: 1; }
  .solution__tiles { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  html { scroll-padding-top: 84px; }

  .nav__inner { height: 70px; }

  /* Mobile: Nav NIE wegblenden (sonst ist der Burger nach dem Runterscrollen weg
     und das Menue unerreichbar). Nav bleibt immer sichtbar. */
  .nav--hidden { transform: none; }

  .nav__links {
    position: fixed;
    top: 82px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(8, 8, 9, 0.97);
    border: 1px solid var(--line);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }

  .nav--open .nav__links { opacity: 1; visibility: visible; transform: none; }

  .nav__links a:not(.btn) { padding: 13px 14px; border-radius: 10px; font-size: 1rem; }

  .nav__links a:not(.btn):hover { background: rgba(244, 122, 32, 0.08); }

  .nav__links a:not(.btn)::after { display: none; }

  .nav__cta-mobile { display: inline-flex; margin-top: 10px; }

  .nav__actions .btn { display: none; }

  .nav__burger { display: flex; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 60px;
    min-height: 0;
    padding-top: 130px;
  }

  .window--tilt { transform: none; }

  .problem__grid, .insights__grid, .trust__grid { grid-template-columns: 1fr; gap: 56px; }

  .problem__visual { order: 2; }

  .steps__row { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; gap: 44px; }

  .steps__arrow { display: none; }

  .step__head { min-height: 0; }

  .auto__row { flex-wrap: wrap; }

  .auto-card { flex: 1 1 calc(50% - 30px); }

  .auto__arrow { display: none; }

  .badge-row { grid-template-columns: 1fr 1fr; gap: 26px; }

  .float-card { right: 12px; top: auto; bottom: -28px; }

  .honesty__row { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }

  .honesty__head { flex-direction: column; gap: 6px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }

  .problem, .solution, .steps, .insights, .pricing, .faq, .multico { padding-top: 60px; padding-bottom: 52px; }

  .cta { padding-top: 36px; padding-bottom: 52px; }

  .problem__cards, .minis, .solution__tiles { grid-template-columns: 1fr; }

  .solution__grid { grid-template-columns: 1fr; }

  .solution__copy, .solution__tiles { grid-column: auto; }

  .solution__center { grid-column: auto; grid-row: auto; }

  .chaos__chips { grid-template-columns: 1fr 1fr; }

  .plans { grid-template-columns: 1fr; }

  .stats { grid-template-columns: 1fr 1fr; gap: 22px; }

  .trust__badges { flex-direction: column; gap: 18px; }

  .auto-card { flex: 1 1 100%; }

  .badge-row { grid-template-columns: 1fr; }

  .strip { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; }

  .cta__panel { grid-template-columns: 1fr; padding: 44px 28px; text-align: center; }

  .cta__copy > p, .cta__actions, .cta__copy .ticks { justify-content: center; }

  .cta__copy .ticks { justify-content: center; }

  .cta__emblem { margin-top: 16px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  .footer__brand { grid-column: 1 / -1; }

  .footer__bottom { flex-direction: column; }

  .hero__trust { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }

  /* Chips rutschen unter das Bild und überlappen es leicht – kein grauer Kasten */
  .chaos__chips {
    padding: 0;
    margin-top: -44px;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    position: relative;
    z-index: 1;
  }

  .hero__actions .btn, .insights__actions .btn, .cta__actions .btn { width: 100%; }

  .hero__trust-icons { display: none; }

  .hero__trust { margin-top: 24px; padding-top: 20px; }

  h1 { font-size: 2.3rem; }

  /* Hero-Headline trägt das lange Kompositum "Rechnungssoftware" – am Handy kleiner + bei Bedarf trennen,
     damit das Wort nie über den rechten Rand läuft. */
  .hero__copy h1 { font-size: 2rem; line-height: 1.1; hyphens: manual; overflow-wrap: normal; }

  h2 { font-size: 1.85rem; }

  .page-hero h1 { font-size: 2.1rem; }

  .lead { font-size: 0.95rem; }
}

/* Sehr schmale Geräte (≤400px): Hero-Headline noch etwas kleiner, damit "Rechnungssoftware" sicher passt. */
@media (max-width: 400px) {
  .hero__copy h1 { font-size: 1.78rem; }
}

/* ---------- Responsive: neue Komponenten ---------- */

/* Mobile Browser (iOS Safari): dynamische Viewport-Höhe statt 100vh */
@supports (height: 100svh) {
  .hero__inner { min-height: min(100svh, 985px); }
}

.hero__platforms { flex-wrap: wrap; }

/* 3 Paketkarten bleiben oberhalb von 1080px immer nebeneinander */
@media (min-width: 1081px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
  /* Menü hängt direkt unter der (sticky) Nav */
  .nav__links {
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
  }

  /* Nav ist sticky (im Fluss) – der alte 130px-Ausgleich für die fixe Nav entfällt */
  .hero__inner { padding-top: 48px; gap: 44px; }

  /* Lösungs-Sektion: einspaltig statt gequetschtem 2-Spalter */
  .solution__grid { grid-template-columns: 1fr; }

  .solution__copy, .solution__tiles { grid-column: auto; }

  .solution__center { grid-column: auto; grid-row: auto; }

  .stages { flex-direction: column; max-width: 560px; }

  .stage__bar {
    transform: rotate(90deg);
    width: 34px;
    height: 30px;
    margin: -2px auto;
  }

  .areas, .dl-grid, .info-grid { grid-template-columns: 1fr 1fr; }

  .plans { grid-template-columns: 1fr; max-width: 560px; }

  .auto__emblem { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }

  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .announce { padding: 9px 44px 9px 14px; }

  .announce p { font-size: 0.76rem; }

  .announce__tail, .announce a { display: none; }

  .page-hero { padding: 64px 0 44px; }

  .section-pad { padding: 54px 0; }

  .section-pad--tight { padding: 42px 0; }

  .areas, .dl-grid, .info-grid { grid-template-columns: 1fr; }

  .hero__inner { padding-top: 38px; }

  .steps-list li { padding: 16px 16px 16px 56px; font-size: 0.86rem; }

  .steps-list li::before { left: 15px; }

  .prose h2 { font-size: 1.3rem; }

  /* Handlungsbedarf-Karte: unter das Dashboard statt darüber */
  .float-card {
    position: static;
    width: 100%;
    margin-top: 14px;
  }

  /* Mindest-Lesbarkeit: Mikro-Labels auf dem Handy anheben */
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; }

  .chip-stat__label, .dl-card__meta span, .plan__path span,
  .mock__label, .mock__chip, .mock__title--split i,
  .footer__chips span, .footer__pay-label, .window__title,
  .float-card__head, .stage__phase, .plan__flag, .quote footer span {
    font-size: 0.68rem;
  }

  .status { font-size: 0.64rem; }

  .chip-stat__value { font-size: 1rem; }
}

/* ==========================================================================
   Interaktiver App-Selector (Funktionen-Seite)
   ========================================================================== */

.selector {
  /* Höhe steuert alles: aktives Panel = Höhe × Bildverhältnis (1919:1199) */
  --sel-h: clamp(380px, 34vw, 620px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 54px;
}

.selector__track {
  display: flex;
  flex: 0 1 auto;
  gap: 10px;
  height: var(--sel-h);
  min-width: 0;
}

.selector__panel {
  position: relative;
  flex: none;
  width: 88px;
  min-width: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: #101012;
  overflow: hidden;
  cursor: pointer;
  contain: layout paint;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 40px -18px rgba(0, 0, 0, 0.8);
  transition:
    width 0.65s cubic-bezier(0.25, 0.7, 0.2, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.selector__panel.is-hidden { display: none; }

@keyframes selPanelIn {
  from { opacity: 0; transform: translateX(-36px); }
}

.selector__panel.enter { animation: selPanelIn 0.6s cubic-bezier(0.2, 0.65, 0.25, 1) backwards; }

.selector__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* dunkle App-Screenshots: inaktive Streifen aufhellen, damit sie sich abheben */
  filter: brightness(1.65) saturate(0.85);
  transition: filter 0.5s ease;
}

.selector__panel.is-active .selector__img { filter: none; }

.selector__panel:hover { border-color: rgba(255, 138, 42, 0.45); }

.selector__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(244, 122, 32, 0.07), rgba(5, 5, 5, 0.22));
  transition: background 0.5s ease;
  pointer-events: none;
}

.selector__panel.is-active {
  /* exakt das Bildverhältnis des Screenshots: nichts wird abgeschnitten */
  width: calc(var(--sel-h) * 1.6005);
  border-color: rgba(255, 138, 42, 0.65);
  box-shadow:
    0 0 0 1px rgba(244, 122, 32, 0.22),
    0 0 28px -4px rgba(244, 122, 32, 0.55),
    0 40px 100px -40px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.selector__panel.is-active::before { background: rgba(5, 5, 5, 0); }

.selector__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.9));
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.selector__panel.is-active .selector__scrim { opacity: 1; }

.selector__label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}

.selector__panel.is-active .selector__label { left: 16px; right: 16px; justify-content: flex-start; }

.selector__icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 11, 0.82);
  border: 1px solid var(--line-orange);
  color: var(--orange-bright);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.8);
}

.selector__icon svg { width: 20px; height: 20px; }

.selector__text {
  min-width: 0;
  max-width: 0;
  opacity: 0;
  transform: translateX(22px);
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.55s ease 0.12s, transform 0.55s ease 0.12s, max-width 0.55s ease;
  color: var(--text);
  text-align: left;
}

.selector__panel.is-active .selector__text {
  max-width: 520px;
  opacity: 1;
  transform: none;
}

.selector__text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 700;
}

.selector__text span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
}

.selector__nav {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(26, 26, 28, 0.7);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.selector__nav:hover { border-color: var(--line-orange); color: var(--amber); transform: scale(1.06); }

.selector__nav svg { width: 18px; height: 18px; }

@media (max-width: 1280px) {
  .selector { --sel-h: clamp(330px, 31vw, 440px); }
}

@media (max-width: 1080px) {
  .selector { --sel-h: clamp(270px, 33vw, 360px); gap: 10px; }
  .selector__panel { width: 64px; }
  .selector__icon { width: 38px; height: 38px; }
  .selector__icon svg { width: 17px; height: 17px; }
}

@media (max-width: 720px) {
  .selector { margin-top: 40px; }
  .selector__nav { display: none; }
  .selector__track { flex-direction: column; height: auto; width: 100%; }
  /* Mobil nur die aktive Ansicht voll zeigen (rotiert automatisch) – keine grauen Vorschau-Streifen */
  .selector__panel { display: none; }
  .selector__panel.is-active {
    display: block;
    width: 100%;
    /* volle Bildhöhe zur Containerbreite – nichts wird abgeschnitten */
    height: calc((100vw - 40px) / 1.6005);
  }
  .selector__label { justify-content: flex-start; left: 12px; right: 12px; bottom: 8px; gap: 9px; }
  .selector__icon { width: 32px; height: 32px; }
  .selector__icon svg { width: 15px; height: 15px; }
  .selector__text strong { font-size: 0.88rem; }
  .selector__text span { font-size: 0.72rem; }
  .selector__scrim { height: 90px; }
}

/* ==========================================================================
   3-Schritte-Mockups im Referenz-Stil
   ========================================================================== */

.mock__chevron { width: 16px; height: 16px; color: var(--text-dim); flex: none; }

.mock__amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.mock__amount strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: #68CD58;
  text-shadow: 0 0 16px rgba(98, 201, 91, 0.35);
}

.mock__row-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: radial-gradient(125% 125% at 30% 22%, rgba(244, 122, 32, 0.26), rgba(244, 122, 32, 0.06) 72%);
  border: 1px solid rgba(255, 138, 42, 0.42);
  color: #FFA94D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px -10px rgba(244, 122, 32, 0.65);
}

/* Bold FILLED glyphs (override the global stroke-only svg rule) — premium, high-contrast. */
.mock__row-icon svg { width: 20px; height: 20px; fill: currentColor; stroke: none; shape-rendering: geometricPrecision; }

.mock__switch {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #2A2A2E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease;
}

.mock__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #F3F3F3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: left 0.3s ease;
}

.mock__switch.is-on {
  background: linear-gradient(90deg, #FF6418, #ED4A02);
  border-color: rgba(255, 90, 20, 0.65);
  box-shadow: 0 0 12px -2px rgba(237, 74, 8, 0.6);
}

.mock__switch.is-on::after { left: 18px; }

.mock__ok {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 13px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #121214;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.mock__ok-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(125% 125% at 30% 22%, rgba(63, 214, 140, 0.28), rgba(63, 214, 140, 0.07) 72%);
  border: 1px solid rgba(63, 214, 140, 0.5);
  color: #56E6A0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px -10px rgba(63, 214, 140, 0.55);
}

.mock__ok-icon svg { width: 19px; height: 19px; fill: currentColor; stroke: none; shape-rendering: geometricPrecision; }

.mock__ok strong { display: block; font-size: 0.8rem; color: var(--text); }

.mock__ok span { display: block; font-size: 0.7rem; color: var(--text-dim); }

.mock__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.mock__kpi-box {
  padding: 11px 12px;
  border-radius: 11px;
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.mock__kpi-box > span {
  display: block;
  font-size: 0.66rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.mock__kpi-box strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  line-height: 1.2;
}

.mock__kpi-box strong.green { color: #68CD58; text-shadow: 0 0 14px rgba(98, 201, 91, 0.3); }

.mock__kpi-box small { display: block; font-size: 0.64rem; color: var(--text-dim); margin-top: 3px; }

.mock__chartwrap {
  position: relative;
  margin-top: 12px;
  padding: 11px 12px 8px;
  border-radius: 11px;
  background: #131315;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.mock__chart-label {
  display: block;
  font-size: 0.66rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.mock__chartwrap .mock__chart { width: 100%; height: 60px; margin: 0; }

.mock__chart-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-30%);
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(13, 13, 14, 0.92);
  border: 1px solid rgba(98, 201, 91, 0.45);
  text-align: right;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.8);
}

.mock__chart-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: #68CD58;
}

.mock__chart-badge small { display: block; font-size: 0.58rem; color: var(--text-dim); }

.mock__top { margin-top: 12px; }

.mock__dotrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  font-size: 0.76rem;
  color: var(--text-soft);
}

.mock__dotrow + .mock__dotrow { border-top: 1px solid rgba(255, 255, 255, 0.05); }

.mock__dotrow i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--dot, var(--orange));
}

.mock__dotrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mock__dotrow strong { font-family: var(--font-display); font-size: 0.76rem; color: var(--text); }

/* Badge-Icons in eckigen Rahmen-Boxen (wie Referenz) */
.badge > svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 13px;
  background: rgba(244, 122, 32, 0.08);
  border: 1px solid rgba(244, 122, 32, 0.32);
  margin-top: 0;
}

.badge > .flag {
  width: 46px;
  height: 46px;
  padding: 14px 10px;
  border-radius: 13px;
  background: rgba(244, 122, 32, 0.08);
  border: 1px solid rgba(244, 122, 32, 0.32);
}

/* ==========================================================================
   Kontaktformular & Checkout
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 22px;
  align-items: start;
  margin-top: 54px;
}

.form-card {
  padding: 30px 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.88), rgba(11, 11, 12, 0.88));
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, 0.9);
}

.form-card h2 { font-size: 1.3rem; letter-spacing: 0; margin-bottom: 6px; }

.form-card > p { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 22px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field { margin-bottom: 14px; min-width: 0; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.field label i { font-style: normal; color: var(--orange-bright); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field input::placeholder,
.field textarea::placeholder { color: #5E5E66; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(255, 138, 42, 0.6);
  box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.16);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 38px;
  cursor: pointer;
}

.field textarea { min-height: 140px; resize: vertical; }

/* Honeypot: fuer Menschen unsichtbar, Bots fuellen es aus */
.field--hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__hint {
  font-size: 0.76rem;
  color: var(--text-dim);
  margin: 4px 0 18px;
  line-height: 1.6;
}

.form__status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 11px;
  font-size: 0.86rem;
  font-weight: 600;
}

.form__status--ok {
  background: rgba(63, 214, 140, 0.1);
  border: 1px solid rgba(63, 214, 140, 0.4);
  color: #7BE3AC;
}

.form__status--error {
  background: rgba(255, 107, 74, 0.1);
  border: 1px solid rgba(255, 107, 74, 0.4);
  color: #FF9B85;
}

.contact-aside { display: flex; flex-direction: column; gap: 16px; }

.contact-aside .info-card { margin: 0; }

/* Checkout */
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 22px;
  align-items: start;
  margin-top: 54px;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.summary {
  padding: 30px 28px;
  border-radius: 20px;
  border: 1px solid rgba(244, 122, 32, 0.45);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(244, 122, 32, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(22, 20, 18, 0.92), rgba(11, 11, 12, 0.92));
  box-shadow: 0 40px 100px -40px rgba(244, 122, 32, 0.4);
}

.summary__product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.summary__product img { width: 46px; height: 46px; filter: drop-shadow(0 0 12px rgba(244, 122, 32, 0.5)); }

.summary__product h2 { font-size: 1.15rem; letter-spacing: 0; }

.summary__product p { font-size: 0.78rem; color: var(--text-dim); }

/* Mehr-Unternehmen-Konfigurator (Phase B) */
.summary__config { margin: 18px 0 4px; }

.summary__config-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 8px;
}

/* WICHTIG - Bugfix Doppel-Button:
   .btn{display:inline-flex} und .btn--block{width:100%} ueberschreiben das
   native [hidden]{display:none} (UA-Stil, Spezifitaet 0), deshalb hat
   payBtn.hidden=true die Anker-Schiene nie versteckt -> beide Bezahl-Buttons
   sichtbar. Diese Regel macht [hidden] auf .btn verbindlich.
   (js/main.js setzt zusaetzlich style.display = primaerer Fix; Guertel + Hosentraeger.) */
.btn[hidden] { display: none !important; }

/* ============================================================
   "AURUM" DETENT-SLIDER  (Synthese A+B+C)  —  Unternehmens-Konfigurator
   Ersetzt den alten .cfg-cards/.cfg-card-Block. Nur bestehende Tokens:
   --amber --orange --orange-bright --text --text-soft --text-mute --text-dim
   --line-soft --glow --font-display --font-body.
   ============================================================ */

.tier {
  --p: 0;                          /* Fuell-Fortschritt 0..1, von main.js gesetzt */
  --track-h: 14px;
  --thumb: 30px;
  --pad: calc(var(--thumb) / 2);   /* haelt Thumb/Fill an den Enden im Track */
  position: relative;
  margin: 30px 0 2px;
  padding-top: 58px;               /* Platz fuer die schwebende Blase */
  -webkit-user-select: none; user-select: none;
}

/* ---------- Rail (positioniert Thumb + Detents) ---------- */
.tier__rail { position: relative; height: var(--thumb); }

.tier__track {
  position: absolute;
  left: var(--pad); right: var(--pad);
  top: 50%; transform: translateY(-50%);
  height: var(--track-h);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(255,255,255,.02)),
    rgba(11, 11, 12, .7);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px var(--line-soft);
}

/* ---------- Detent-Punkte (dekorativ, exakt unter den Stops) ---------- */
.tier__detents { position: absolute; inset: 0; pointer-events: none; }
.tier__detents span {
  position: absolute; top: 50%;
  left: calc(var(--d) / 5 * 100%);
  width: 4px; height: 4px; margin-left: -2px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255,255,255,.30);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  transition: opacity .3s ease;
}

/* ---------- Glow-Gradient FILL (Start -> Thumb) ---------- */
.tier__fill {
  position: absolute; inset: 0;
  width: calc(var(--p) * 100%);
  min-width: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--orange) 62%, var(--orange-bright));
  box-shadow:
    0 0 14px -1px var(--glow),
    0 0 26px -4px rgba(244, 122, 32, .5),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: width .35s cubic-bezier(.22,1,.36,1), background .4s ease, box-shadow .4s ease;
}
/* wandernder Spekular-Glanz */
.tier__fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  background-size: 60% 100%; background-repeat: no-repeat;
  background-position: calc(var(--p) * 140% - 20%) 0;
  mix-blend-mode: overlay; opacity: .55;
  transition: background-position .35s cubic-bezier(.22,1,.36,1);
}
/* Comet-Kopf: heller Lichtpunkt an der Fill-Spitze (aus Konzept C) */
.tier__comet {
  position: absolute; top: 50%; right: 0;
  width: 20px; height: 20px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #FFF7EC 0%, var(--amber) 40%, transparent 72%);
  filter: blur(.5px); opacity: .9; pointer-events: none;
}

/* ---------- Taktiler THUMB ---------- */
.tier__thumb {
  position: absolute;
  top: 50%; left: calc(var(--p) * 100%);
  width: var(--thumb); height: var(--thumb);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #FFFDFB, #FFE4C6 38%, var(--orange) 100%);
  border: 1px solid rgba(255, 240, 224, .9);
  box-shadow:
    0 0 0 6px rgba(244, 122, 32, .14),
    0 0 22px -2px var(--glow),
    0 8px 18px -6px rgba(0,0,0,.7),
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -3px 6px rgba(196, 86, 12, .55);
  transition:
    left .35s cubic-bezier(.22,1,.36,1),
    transform .28s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s ease, background .4s ease;
  z-index: 3; pointer-events: none;   /* echtes <input> uebernimmt Interaktion */
}
.tier__thumb-inf {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 800; line-height: 1; color: #170A02;
  opacity: 0; transform: scale(.5);
  transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Nativer Input: unsichtbar, grosse Trefferflaeche ---------- */
.tier__input {
  -webkit-appearance: none; appearance: none;
  position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  width: 100%; height: 44px;        /* grosszuegiges Touch-Ziel */
  margin: 0; background: transparent; cursor: pointer; z-index: 4;
}
.tier__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: 44px; border: 0; background: transparent; cursor: grab;
}
.tier__input::-moz-range-thumb { width: var(--thumb); height: 44px; border: 0; background: transparent; cursor: grab; }
.tier__input::-moz-range-track { background: transparent; }
.tier__input:active { cursor: grabbing; }
.tier__input:active::-webkit-slider-thumb { cursor: grabbing; }
.tier__input:focus { outline: none; }
.tier__input:focus-visible { outline: none; }

/* Tastatur-Fokus -> Ring am sichtbaren Thumb (Input ist Geschwister von .tier__track) */
.tier__input:focus-visible ~ .tier__track .tier__thumb {
  box-shadow:
    0 0 0 4px var(--orange-bright),
    0 0 26px -2px var(--glow),
    0 8px 18px -6px rgba(0,0,0,.7),
    inset 0 1px 1px rgba(255,255,255,.9);
}
/* gegriffen/aktiv -> Thumb springt + squasht, Halo + Fill leuchten staerker */
.tier__input:active ~ .tier__track .tier__thumb,
.tier.is-grabbing .tier__thumb {
  transform: translate(-50%, -50%) scale(1.14);
  box-shadow:
    0 0 0 9px rgba(244, 122, 32, .2),
    0 0 34px 0 var(--glow),
    0 10px 22px -6px rgba(0,0,0,.75),
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -3px 6px rgba(196, 86, 12, .6);
}
.tier__input:active ~ .tier__track .tier__fill,
.tier.is-grabbing .tier__fill {
  box-shadow: 0 0 20px 0 var(--glow), 0 0 40px -2px rgba(255, 138, 42, .6), inset 0 1px 0 rgba(255,255,255,.4);
}
/* Live-Drag: Positions-/Breiten-Transitions aussetzen -> 1:1-Gefuehl unter Finger/Cursor.
   Nur Snap (nach dem Loslassen), Tastatur- und Tick-Spruenge animieren dann wieder weich. */
.tier.is-grabbing .tier__thumb { transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .4s ease; }
.tier.is-grabbing .tier__fill { transition: background .4s ease, box-shadow .4s ease; }
.tier.is-grabbing .tier__fill::after { transition: none; }
.tier.is-grabbing .tier__bubble { transition: border-color .4s ease, background .4s ease; }

/* ---------- Schwebende PREIS-BLASE ---------- */
.tier__bubble {
  position: absolute; top: 8px;
  left: calc(var(--pad) + var(--p) * (100% - var(--thumb)));
  transform: translateX(-50%);
  /* Mobil: linke Position-1-Blase nicht über den Kartenrand laufen lassen (siehe Media-Query unten) */
  padding: 7px 13px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(244,122,32,.22), transparent 70%),
    linear-gradient(180deg, rgba(34, 26, 19, .96), rgba(14, 12, 11, .96));
  border: 1px solid rgba(244, 122, 32, .55);
  box-shadow: 0 12px 30px -12px rgba(244,122,32,.55), inset 0 1px 0 rgba(255,255,255,.07);
  white-space: nowrap;
  transition: left .35s cubic-bezier(.22,1,.36,1), border-color .4s ease, background .4s ease;
  z-index: 5;
}
@media (max-width: 720px) {
  .tier__bubble { left: max(46px, calc(var(--pad) + var(--p) * (100% - var(--thumb)))); }
}
.tier__bubble::after {
  content: ""; position: absolute;
  bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: linear-gradient(135deg, transparent 50%, rgba(14,12,11,.96) 50%);
  border-right: 1px solid rgba(244,122,32,.55); border-bottom: 1px solid rgba(244,122,32,.55);
  transition: border-color .4s ease;
}
.tier__bubble-flag {
  display: none;
  font-family: var(--font-body);
  font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #170A02; padding: 1px 7px; border-radius: 999px;
  background: linear-gradient(95deg, var(--amber), var(--orange));
}
.tier__bubble-price {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(95deg, var(--amber), var(--orange-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(244,122,32,.35));
}
@keyframes tierPricePop {
  0%   { transform: scale(.78); filter: blur(4px); opacity: 0; }
  60%  { transform: scale(1.06); filter: blur(0);  opacity: 1; }
  100% { transform: scale(1);    filter: blur(0);  opacity: 1; }
}
.tier__bubble-price.is-bump { animation: tierPricePop .42s cubic-bezier(.34,1.56,.64,1); }

/* ---------- Tick-Labels ---------- */
.tier__ticks { display: flex; justify-content: space-between; margin: 16px var(--pad) 0; }
.tier__tick {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 4px 6px; margin: 0;
  cursor: pointer; line-height: 1; position: relative; transition: opacity .3s ease;
}
.tier__tick > span {
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 700; color: var(--text-dim);
  display: inline-block;
  transition: color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), text-shadow .3s ease;
}
.tier__tick:hover > span { color: var(--text-soft); }
.tier__tick.is-active > span {
  color: var(--text); transform: scale(1.18) translateY(-1px);
  text-shadow: 0 0 14px rgba(244,122,32,.6);
}
.tier__tick--inf > span { font-size: 1.05rem; }
.tier__tick.is-active.tier__tick--inf > span {
  background: linear-gradient(95deg, var(--amber), var(--orange-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(244,122,32,.5));
}

/* ============================================================
   LUXE ∞ / BUSINESS-MODUS  —  .tier[data-unlimited]
   ============================================================ */
.tier[data-unlimited] .tier__fill {
  background: linear-gradient(90deg, #FFCE7E, var(--amber) 45%, var(--orange) 100%);
  box-shadow: 0 0 18px 0 rgba(255,190,110,.55), 0 0 36px -2px rgba(255,170,80,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
.tier[data-unlimited] .tier__comet {
  background: radial-gradient(circle, #FFFBF0 0%, #FFD27A 40%, transparent 72%);
}
.tier[data-unlimited] .tier__thumb {
  background: radial-gradient(circle at 50% 30%, #FFFBF4, #FFE9C2 36%, #E9A53A 100%);
  border-color: #FFE9C2;
  box-shadow:
    0 0 0 6px rgba(255, 196, 112, .22),
    0 0 30px 0 rgba(255, 190, 110, .6),
    0 8px 18px -6px rgba(0,0,0,.7),
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -3px 6px rgba(180, 120, 30, .55);
}
.tier[data-unlimited] .tier__thumb-inf { opacity: 1; transform: scale(1); }
.tier[data-unlimited] .tier__bubble {
  border-color: rgba(255, 196, 112, .7); overflow: hidden;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255,190,110,.3), transparent 72%),
    linear-gradient(180deg, rgba(40, 31, 20, .97), rgba(16, 13, 10, .97));
}
.tier[data-unlimited] .tier__bubble::after { border-color: rgba(255,196,112,.7); }
.tier[data-unlimited] .tier__bubble-flag { display: inline-block; }
.tier[data-unlimited] .tier__bubble-price {
  font-size: 1.25rem;
  background: linear-gradient(95deg, #FFD27A, #F0A02A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tier[data-unlimited] .tier__bubble::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,232,196,.28) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: tierShimmer 2.6s ease-in-out 0.2s infinite;
}
@keyframes tierShimmer { 0%,15% { transform: translateX(-130%); } 55%,100% { transform: translateX(130%); } }

/* 1–5 Detents + Ticks im Business-Modus zuruecknehmen, damit beide Modi sofort lesbar sind */
.tier[data-unlimited] .tier__detents span:not(:last-child) { opacity: .3; }
.tier[data-unlimited] .tier__tick:not(.tier__tick--inf) { opacity: .38; }
.tier[data-unlimited] .tier__tick:not(.tier__tick--inf) > span { color: var(--text-dim); filter: saturate(.5); }

/* einmaliger "Ascend"-Puls, wenn ∞ erstmals erreicht wird (Klasse von main.js) */
@keyframes tierAscend {
  0%   { box-shadow: 0 0 0 0 rgba(255,190,110,.55); }
  100% { box-shadow: 0 0 0 26px rgba(255,190,110,0); }
}
.tier.is-ascend .tier__thumb { animation: tierAscend .7s ease-out; }

/* ---------- Schmale Breiten (~340–380px) ---------- */
@media (max-width: 380px) {
  .tier { --thumb: 28px; }
  .tier__bubble-price { font-size: 1.05rem; }
  .tier[data-unlimited] .tier__bubble-price { font-size: 1.12rem; }
  .tier__tick > span { font-size: .82rem; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .tier__fill, .tier__fill::after, .tier__thumb, .tier__bubble, .tier__tick > span { transition-duration: .001ms; }
  .tier__comet { display: none; }
  .tier__bubble-price.is-bump { animation: none; }
  .tier[data-unlimited] .tier__bubble::before { animation: none; opacity: 0; }
  .tier.is-ascend .tier__thumb { animation: none; }
}

.summary__config-hint {
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 8px 0 0;
}

/* Rechtlich tragende "Gesamt-/Endpreis"-Zeile (PAngV/§312j): lesbarer Fliesstext direkt unter dem
   Gesamtpreis — bewusst KEIN .plan__path/.now-Pill (Uppercase-Mono-Chip ist nur fuer kurze Tokens). */
.summary__priceline {
  margin: 0 0 16px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-soft);
}

.summary__rows { margin: 18px 0; display: flex; flex-direction: column; gap: 10px; }

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.9rem;
  color: var(--text-mute);
}

.summary__row strong { color: var(--text); font-weight: 600; }

.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  margin-bottom: 18px;
}

.summary__total span { font-size: 0.9rem; color: var(--text-soft); font-weight: 600; }

.summary__total strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  background: linear-gradient(95deg, var(--amber), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(244, 122, 32, 0.35));
  display: inline-block;      /* fuer die Skalier-Animation bei Preiswechsel */
  transform-origin: right center;
  will-change: transform;
}
/* Der grosse Gesamtbetrag tickt bei jedem Preiswechsel kurz mit (von main.js getoggelt). */
@keyframes priceTick {
  0%   { transform: scale(.9);  opacity: .55; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.summary__total strong.is-tick { animation: priceTick .4s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) {
  .summary__total strong.is-tick { animation: none; }
}

.agree {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 16px 0;
  font-size: 0.8rem;
  color: var(--text-mute);
  line-height: 1.55;
  cursor: pointer;
}

.agree input {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--orange);
  cursor: pointer;
}

.agree a { color: var(--amber); }

.agree a:hover { color: var(--orange-bright); }

.checkout__hint {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 11px;
  background: rgba(255, 177, 92, 0.09);
  border: 1px solid rgba(255, 177, 92, 0.4);
  color: var(--amber);
  font-size: 0.84rem;
}

.summary__pay { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }

.checkout-aside { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 1080px) {
  .contact-grid, .checkout-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .form__row { grid-template-columns: 1fr; gap: 0; }

  .form-card, .summary { padding: 22px 18px; }

  /* Footer: nichts darf seitlich auslaufen */
  .footer__grid { grid-template-columns: 1fr; gap: 26px; }

  .footer__col a, .footer__claim, .footer__bottom p, .footer__pay-label { overflow-wrap: anywhere; }

  .footer__pay { flex-direction: column; align-items: flex-start; gap: 12px; }

  .footer__pay-logos { width: 100%; }

  .pay-chip { height: 30px; padding: 0 10px; }

  .pay-chip img { height: 14px; }

  .pay-chip img[alt="American Express"] { height: 19px; }
}

/* ==========================================================================
   Content-Seiten: zweispaltiges Layout + Ambient-Hintergrund
   ========================================================================== */

/* Subtiler Glut-Schimmer gegen rein schwarze Flaechen */
.ambient {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 36% at 88% 10%, rgba(244, 122, 32, 0.11), transparent 70%),
    radial-gradient(38% 32% at 4% 55%, rgba(244, 122, 32, 0.07), transparent 70%),
    radial-gradient(52% 44% at 72% 98%, rgba(255, 138, 42, 0.08), transparent 72%);
}

main { position: relative; z-index: 1; }

/* Prose links, sticky Seitenleiste rechts */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 56px;
  align-items: start;
}

.content-aside {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-aside .shot { margin: 0; }

.content-aside .info-card .btn { width: 100%; margin-top: 14px; }

/* Fakten-Karte */
.facts {
  padding: 22px 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.85), rgba(11, 11, 12, 0.85));
  border: 1px solid var(--line);
}

.facts h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange-bright);
  margin-bottom: 10px;
}

.facts__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.86rem;
  color: var(--text-mute);
}

.facts__row:first-of-type { border-top: none; }

.facts__row strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--amber);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .content-grid { grid-template-columns: 1fr; gap: 40px; }
  .content-aside { position: static; }
}

/* ==========================================================================
   Rechtsseiten — Impressum / Datenschutz / AGB / Widerruf
   Foto-Hero + zweispaltiges, zentriertes Layout (Text links, sticky Aside
   rechts mit Inhaltsverzeichnis), damit keine grossen Leerflaechen bleiben.
   ========================================================================== */

.legal-hero {
  position: relative;
  padding: 126px 0 46px;
}

/* Großflächiger Seiten-Hintergrund: prominent oben (das KI-Bild), läuft sanft ins Schwarz aus,
   bevor der lange Rechtstext beginnt. z-index:-1 = hinter dem gesamten Inhalt (Text bleibt lesbar). */
.legal-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(540px, 78vh, 940px);
  z-index: -1;
  background-image: var(--ph-bg, url("../assets/bg-pricing.jpg"));
  background-size: cover;
  background-position: center top;
  transform: scale(1.03);
}

.legal-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.55) 46%, rgba(5, 5, 5, 0.12) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.12) 0%, rgba(5, 5, 5, 0.22) 42%, rgba(5, 5, 5, 0.72) 82%, var(--ink-0) 100%);
}

.legal-hero .container { position: relative; z-index: 1; max-width: 1240px; }
.legal-hero h1 { font-size: clamp(2.05rem, 3vw, 3.05rem); line-height: 1.05; margin-top: 6px; }
.legal-hero .legal-sub { max-width: 58ch; margin-top: 14px; color: var(--text-soft); font-size: 1.02rem; }

/* Brotkrumen */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.crumb a { color: var(--text-dim); transition: color 0.15s; }
.crumb a:hover { color: var(--amber); }
.crumb svg { width: 13px; height: 13px; opacity: 0.55; }
.crumb span[aria-current] { color: var(--amber); }

/* Layout: zentrierter Lesblock aus Text + Aside */
.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}
.legal-main { min-width: 0; }
.legal-main .prose { max-width: none; }
.legal-main .prose h2 { scroll-margin-top: 96px; }

.legal-meta {
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Sticky Aside */
.legal-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-toc {
  padding: 20px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 19, 21, 0.85), rgba(11, 11, 12, 0.85));
  border: 1px solid var(--line);
  max-height: calc(100vh - 132px);
  overflow-y: auto;
}
.legal-toc h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange-bright);
  padding: 0 10px;
  margin-bottom: 10px;
}
.legal-toc ul { display: flex; flex-direction: column; gap: 1px; }
.legal-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-mute);
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.legal-toc a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-left-color: var(--orange);
}

.legal-aside .info-card .btn { margin-top: 14px; }

@media (max-width: 1040px) {
  .legal-grid { grid-template-columns: 1fr; gap: 30px; }
  .legal-main .prose { max-width: 72ch; }
  .legal-aside { position: static; }
  .legal-toc { display: none; }
}

/* ==========================================================================
   FIXED CINEMATIC PAGE BACKDROP  (synthesis — owner-directed mechanism)
   The page's EXISTING hero-bg div (.legal-hero__bg / .page-hero__bg) is
   converted from a short top strip (position:absolute; height:clamp(...))
   into a FIXED, full-viewport layer behind ALL content. The per-page image
   is ALREADY wired on every page via  style="--ph-bg: url('<page image>')",
   so NO new HTML and NO per-page <body> change is required.
   EXCLUDES the PRICING --tight hero via :not() guards below.
   ========================================================================== */

/* ---- LEGAL pages: make the hero-bg div a fixed full-viewport backdrop ---- */
.legal-hero__bg,
/* ---- INTERIOR page-hero pages, but NOT the pricing --tight hero ---- */
.page-hero:not(.page-hero--tight) > .page-hero__bg {
  position: fixed;
  inset: 0;                 /* full viewport, not a 540-940px strip */
  height: auto;             /* override the old clamp() height */
  z-index: -2;              /* image behind the -1 scrim; footer (z auto) paints over both */
  background-size: cover;
  background-position: center top;
  /* NO transform/will-change here: a transform on a fixed full-viewport layer creates a
     containing block + promoted layer that breaks scroll/stacking and can swallow the footer. */
}

/* ---- The cinematic scrim, baked onto the SAME div's ::after ----
   Heavier top-left (where eyebrow/crumb/H1 sit), easing to the warm image
   mid-page, deepening to pure ink at the very bottom so the long text column
   never floats in a vacuum. This replaces the old strip gradient. */
.legal-hero__bg::after,
.page-hero:not(.page-hero--tight) > .page-hero__bg::after {
  content: "";
  position: fixed;          /* track the fixed image, not the old strip */
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 14% 0%, rgba(5,5,5,.80) 0%, rgba(5,5,5,.32) 46%, transparent 80%),
    linear-gradient(180deg, rgba(5,5,5,.58) 0%, rgba(5,5,5,.40) 38%, rgba(5,5,5,.66) 84%, var(--ink-0) 100%);
}

/* Photo heros (download/kontakt) carried an extra left-darkening variant;
   fold an equivalent into the fixed scrim so those pages keep their depth. */
.page-hero:not(.page-hero--tight) > .page-hero__bg--photo::after {
  background:
    radial-gradient(120% 82% at 14% 0%, rgba(5,5,5,.84) 0%, rgba(5,5,5,.40) 44%, transparent 78%),
    linear-gradient(90deg, rgba(5,5,5,.66) 0%, rgba(5,5,5,.30) 40%, transparent 74%),
    linear-gradient(180deg, rgba(5,5,5,.50) 0%, rgba(5,5,5,.26) 45%, var(--ink-0) 100%);
}

/* Hero keeps its text + padding; give a touch more top room now full-bleed. */
.legal-hero { padding-top: clamp(120px, 16vh, 168px); }
.page-hero:not(.page-hero--tight) { padding-top: clamp(104px, 13vh, 150px); }

/* main already has z-index:1; ambient stays at z0 but ease it over the photo. */
main { position: relative; z-index: 1; }
.legal-hero ~ * .ambient, .page-hero:not(.page-hero--tight) ~ * .ambient { opacity: .72; }

/* ==========================================================================
   PRICING (excluded): the .page-hero--tight > .page-hero__bg keeps its
   EXISTING absolute, compact behaviour. The :not(.page-hero--tight) guards
   above mean none of the fixed rules ever match it.
   ========================================================================== */

/* ---- MOBILE: position:fixed janks on iOS Safari → tall scrolling bg ----
   Switch to absolute + tall min-height so it still COVERS the long scroll but
   scrolls with content (no repaint jank). Glass panels are KEPT (see below). */
@media (max-width: 720px) {
  .legal-hero__bg,
  .page-hero:not(.page-hero--tight) > .page-hero__bg {
    position: absolute;
    inset: 0 0 auto 0;
    min-height: 240vh;       /* covers a long legal scroll */
    transform: none;
  }
  .legal-hero__bg::after,
  .page-hero:not(.page-hero--tight) > .page-hero__bg::after {
    position: absolute;
    min-height: 240vh;
  }
}

/* Reduced-motion / data-saver: drop the scale + will-change churn. */
@media (prefers-reduced-motion: reduce) {
  .legal-hero__bg,
  .page-hero:not(.page-hero--tight) > .page-hero__bg { transform: none; will-change: auto; }
}

/* ==========================================================================
   REUSABLE FROSTED-GLASS READABILITY PANEL  (.glass-panel)
   Put text on real glass wherever it now sits over the fixed image.
   .glass-panel is the base utility; the existing content containers are
   upgraded in place so the whole site shares ONE glass language.
   ========================================================================== */

.glass-panel,
.legal-main .prose,                 /* long legal prose (IT-Recht iframe + own) */
.legal-toc,                         /* legal sticky table of contents          */
.legal-aside .info-card,            /* legal sidebar note card                 */
.legal-meta,                        /* "Stand: ..." footer line                */
.section-pad .areas,                /* funktionen / feature areas              */
.content-aside .facts,              /* SEO/interior fact card                  */
.content-aside .info-card,          /* SEO/interior aside card                 */
.faq__list {                        /* FAQ accordion slab                      */
  position: relative;
  background: rgba(8, 9, 12, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  box-shadow:
    0 30px 80px -40px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);    /* top sheen = "real glass" */
}

/* Internal padding now that these are panels, not bare blocks */
.legal-main .prose { padding: clamp(28px, 4vw, 52px); }
.legal-toc { padding: 22px 16px; }
.legal-aside .info-card,
.content-aside .info-card,
.content-aside .facts { padding: 24px 26px; }
.section-pad .areas { padding: clamp(20px, 2.4vw, 30px); }
.faq__list { padding: clamp(16px, 2vw, 26px); }
.legal-meta {
  padding: 16px clamp(28px, 4vw, 52px);
  border-radius: 16px;
  margin-top: 18px;
  border-top: none;                  /* was a 1px top-rule; the panel replaces it */
}

/* Keep the FAQ item dividers but let them sit transparently on the slab */
.faq__list .faq__item,
.faq__list .faq__group { background: transparent; }
.faq__list .faq__item { border-color: rgba(255, 255, 255, 0.07); }

/* A faint warm top-edge highlight ties the glass to the orange brand light */
.glass-panel::before,
.legal-main .prose::before,
.faq__list::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 42, 0.35), transparent);
  pointer-events: none;
}

/* Lift prose contrast one step over imagery (mute -> soft) so the warm tint
   bleeding through the glass can never wash body text out. */
.legal-main .prose p,
.legal-main .prose li { color: var(--text-soft); }
.legal-main .prose h2,
.legal-main .prose h3 { color: var(--text); }

/* IT-Recht-Text wird als INLINE-HTML injiziert (kein Iframe) -> lange Komposita-Überschriften
   (z. B. "Datenschutzerklärung") müssen umbrechen/trennen dürfen, sonst werden sie am Rand abgeschnitten. */
.legal-main .prose h1, .legal-main .prose h2, .legal-main .prose h3,
.itrk-legaltext h1, .itrk-legaltext h2, .itrk-legaltext h3 {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
/* In-Content-Überschriften der Rechtstexte angemessen dimensionieren – NICHT die riesige globale
   h1-Größe (clamp ... 4.5rem) erben. (IT-Recht injiziert <h1>/<h2> direkt in .prose.) */
.legal-main .prose h1, .itrk-legaltext h1 { font-size: clamp(1.7rem, 2.4vw, 2.25rem); line-height: 1.18; margin: 0 0 18px; }
.legal-main .prose h2, .itrk-legaltext h2 { font-size: clamp(1.12rem, 1.5vw, 1.38rem); line-height: 1.3; }
.legal-main .prose h3, .itrk-legaltext h3 { font-size: clamp(1rem, 1.15vw, 1.1rem); }

/* ---------- GRACEFUL FALLBACK: no backdrop-filter (older FF/Edge) ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel,
  .legal-main .prose,
  .legal-toc,
  .legal-aside .info-card,
  .legal-meta,
  .section-pad .areas,
  .content-aside .facts,
  .content-aside .info-card,
  .faq__list {
    background: rgba(8, 9, 12, 0.93);   /* near-opaque so text is never muddy */
  }
}

/* ---------- MOBILE: lighter blur for GPU cost, KEEP the panels ---------- */
@media (max-width: 720px) {
  .glass-panel,
  .legal-main .prose,
  .legal-toc,
  .legal-aside .info-card,
  .legal-meta,
  .section-pad .areas,
  .content-aside .facts,
  .content-aside .info-card,
  .faq__list {
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    background: rgba(8, 9, 12, 0.70);
    border-radius: 18px;
  }
  /* Schmale Innen-Abstände am Handy, damit der IT-Recht-Text genug Breite behält und seine lange
     Überschrift (z. B. "Datenschutzerklärung") nicht abgeschnitten wird. */
  .legal-main .prose { padding: 22px 13px; }
}

/* ---------- WICHTIG: Rechtstext-Panel ist KEIN Glas ----------
   Das .legal-main .prose-Panel enthält den KOMPLETTEN IT-Recht-Text und ist oft 5000–8000px hoch.
   backdrop-filter auf einem so hohen Element sprengt das GPU-Texturlimit (~4096px) -> das Panel wird
   abgeschnitten UND die Seite lässt sich nicht mehr bis zum Footer scrollen. Daher hier ein SOLIDES
   dunkles Panel (kein Blur, kein Texturlimit) – voll lesbar, Footer wieder erreichbar. */
.legal-main .prose {
  background: rgba(11, 12, 16, 0.88);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==========================================================================
   Consent-Banner & Cookie-Einstellungen (js/consent.js)
   ========================================================================== */

.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;
}

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  padding: 16px clamp(16px, 3vw, 36px) clamp(16px, 3vw, 28px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.consent.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.consent__card {
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(26, 26, 28, 0.97), rgba(15, 15, 16, 0.97));
  border: 1px solid var(--line);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 122, 32, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.consent__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.consent__text {
  font-size: 0.86rem;
  color: var(--text-mute);
  line-height: 1.6;
  margin-bottom: 16px;
}

.consent__text a {
  color: var(--amber);
  border-bottom: 1px solid rgba(255, 177, 92, 0.35);
}

.consent__text a:hover { color: var(--orange-bright); }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.consent__settings-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 6px;
}

.consent__settings-link:hover { color: var(--text); }

.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.consent-modal.is-visible { display: flex; }

.consent-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.consent-modal__card {
  position: relative;
  width: min(620px, 100%);
  max-height: min(82vh, 720px);
  overflow-y: auto;
  padding: 28px 30px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(26, 26, 28, 0.99), rgba(13, 13, 14, 0.99));
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

.consent-cat {
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
}

.consent-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.consent-cat__head strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text);
}

.consent-cat__state {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.consent-cat p {
  font-size: 0.82rem;
  color: var(--text-mute);
  line-height: 1.55;
}

.consent-switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
}

.consent-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.consent-switch > span[aria-hidden] {
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.consent-switch > span[aria-hidden]::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-mute);
  transition: transform 0.25s ease, background 0.25s ease;
}

.consent-switch input:checked + span[aria-hidden] {
  background: linear-gradient(95deg, var(--orange) 0%, var(--orange-bright) 100%);
  border-color: var(--line-orange);
}

.consent-switch input:checked + span[aria-hidden]::after {
  transform: translateX(20px);
  background: #fff;
}

.consent-switch input:focus-visible + span[aria-hidden] {
  outline: 2px solid var(--orange-bright);
  outline-offset: 3px;
}

.consent__legal {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.consent__legal a { color: var(--text-mute); text-decoration: underline; text-underline-offset: 3px; }
.consent__legal a:hover { color: var(--text); }

@media (max-width: 460px) {
  .consent__actions .btn { width: 100%; justify-content: center; }
  .consent__settings-link { padding-left: 0; }
  .consent-modal { padding: 12px; }
  .consent-modal__card { padding: 22px 18px; }
}

/* ---------- Sprachumschalter (DE/EN) ---------- */
/* Kompakte Pill-Gruppe; teilt sich die Zeile mit Kauf-Button + Burger. */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(26, 26, 28, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lang-switch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 9px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.lang-switch__opt:hover { color: var(--text); }

.lang-switch__opt.is-active {
  color: #FFF7F0;
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lang-switch__opt.is-active:hover { color: #FFF7F0; }

@media (max-width: 1080px) {
  .lang-switch { padding: 2px; }
  .lang-switch__opt { min-width: 28px; padding: 4px 8px; font-size: 0.76rem; }
}


/* Social-Media-Symbole im Footer */
.footer__social{display:flex;gap:10px;align-items:center;margin-top:18px}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#1a1a1c;border:1px solid #2a2a2e;color:#c9c9ce;transition:color .15s,border-color .15s,background .15s}
.footer__social a:hover{color:#FFB15C;border-color:#FFB15C;background:#211a11}
.footer__social svg{width:19px;height:19px;display:block}


/* ==========================================================================
   BILLEVO — CRO synthesis additions (append to end of css/style.css)
   Reuses existing tokens: --orange / --orange-bright / --amber / --text /
   --text-soft / --text-mute / --text-dim / --line / --line-soft / --line-orange
   / --ink-2 and fonts --font-display / --font-body / --font-mono.
   All rules are additive — no existing selector is overwritten.
   ========================================================================== */

/* ---------- Reusable TRUST BAND (under landing hero AND under pricing cards) ---------- */
.trustband{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:28px auto 0;max-width:920px}
.trustband__item{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(26,26,28,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.03em;color:var(--text-soft);white-space:nowrap;transition:border-color .25s ease,color .25s ease}
.trustband__item:hover{border-color:var(--line-orange);color:var(--text)}
.trustband__item svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--orange-bright);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trustband__item--accent{border-color:var(--line-orange);background:rgba(244,122,32,.08);color:var(--amber)}
.trustband__item--accent svg{stroke:var(--amber)}
/* thin wrapper used directly under the landing hero */
.trustband-section{padding:0 0 18px}
.trustband-section .trustband{margin-top:8px}
@media(max-width:720px){.trustband__item{font-size:.68rem;padding:7px 11px;white-space:normal}}

/* ---------- Award-Style Trust-Ticker (Lauftext, fixiert am unteren Rand) ---------- */
.trust-marquee{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  width:100%; max-width:100vw;
  overflow:hidden; padding:12px 0;
  background:linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.72) 40%, rgba(8,8,10,.96) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid rgba(244,122,32,.22);
  /* sanfter Auslauf an beiden Rändern wie auf Award-Seiten */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.trust-marquee.is-hidden{transform:translateY(115%); opacity:0; pointer-events:none}
.trust-marquee__track{display:flex; width:max-content; animation:trustScroll 46s linear infinite}
.trust-marquee:hover .trust-marquee__track{animation-play-state:paused}
.trust-marquee__group{display:flex; align-items:center; flex:none}
.trust-marquee__item{
  display:inline-flex; align-items:center; gap:9px; padding:0 30px; position:relative;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--text-soft); white-space:nowrap;
}
/* Trenn-Punkt zwischen den Einträgen */
.trust-marquee__item::after{content:""; position:absolute; right:-2px; top:50%; width:4px; height:4px; border-radius:50%; background:rgba(244,122,32,.55); transform:translateY(-50%)}
.trust-marquee__item svg{width:15px; height:15px; flex:none; fill:none; stroke:var(--orange-bright); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.trust-marquee__item--accent{color:var(--amber); font-weight:600}
.trust-marquee__item--accent svg{stroke:var(--amber)}
@keyframes trustScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* Inline-Lauftext (z.B. Preise-Seite): nutzt die Trust-Ticker-Items, läuft aber im Fluss statt fixiert */
.trustband-marquee{position:relative; overflow:hidden; margin:30px auto 0; max-width:1120px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.trustband-marquee .trust-marquee__track{animation-duration:42s}
.trustband-marquee:hover .trust-marquee__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .trustband-marquee{overflow:visible; -webkit-mask-image:none; mask-image:none}
  .trustband-marquee .trust-marquee__track{animation:none; flex-wrap:wrap; justify-content:center; width:auto}
  .trustband-marquee .trust-marquee__group[aria-hidden="true"]{display:none}
}
@media (prefers-reduced-motion:reduce){.trust-marquee__track{animation:none}}
@media (max-width:720px){
  /* Mobile: Ticker bleibt fixed am unteren Rand (Design-Intent: sichtbar auf dem Hero),
     aber GPU-beschleunigt, damit die translateX-Animation auf iOS Safari zuverlaessig
     startet/laeuft. max-width:100% verhindert Beitrag zum Horizontal-Overflow. Das
     Wegblenden beim Scrollen in den Inhalt steuert main.js (groessere Schwelle als Desktop). */
  .trust-marquee{ padding:9px 0; width:100%; max-width:100%; }
  .trust-marquee__track{ will-change:transform; transform:translate3d(0,0,0); animation-duration:34s; }
  .trust-marquee__item{font-size:.7rem; padding:0 20px; gap:7px}
  .trust-marquee__item svg{width:13px; height:13px}
}

/* ---------- Decision-point price + trust lines ---------- */
/* (a) bordered glass pill — used under HERO CTAs (landing hero + pricing hero) */
.cta-priceline{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:11px 18px;border-radius:999px;border:1px solid var(--line-orange);background:rgba(244,122,32,.07);font-family:var(--font-mono);font-size:.8rem;letter-spacing:.01em;color:var(--text-soft)}
.cta-priceline strong{color:var(--text);font-weight:700}
.cta-priceline .accent{color:var(--amber);font-weight:700}
.cta-priceline svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--orange-bright);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* (b) plain mono line — used INSIDE cards / under in-card CTAs */
.cta-trustline{margin-top:14px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;color:var(--text-soft)}
.cta-trustline--card{text-align:center;margin-top:12px;color:var(--amber);font-size:.7rem}
/* demoted text-link CTA (single-dominant-CTA rule) */
.btn--text{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;color:var(--amber);transition:color .25s ease}
.btn--text:hover{color:var(--orange-bright)}
.btn--lg{padding:17px 30px;font-size:1.02rem}
@media(max-width:720px){.cta-priceline{display:flex;flex-wrap:wrap;white-space:normal;border-radius:16px}}

/* ---------- Pricing page: collapse hero gap, cards in first viewport ---------- */
.page-hero--tight{padding-bottom:30px}
.page-hero--tight .lead{max-width:62ch}
.pricing--tight{padding-top:18px;padding-bottom:34px}
.pricing--tight .pricing-main{margin-top:36px}

/* ---------- Pricing layout: dominant Standard card + multi block ---------- */
.pricing-main{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start;margin-top:36px}
.plan--hero{padding:34px 32px 30px}
.plan--hero .plan__price strong{font-size:2.7rem}
.plan--hero .plan__features{margin-bottom:18px}
.plan--hero .plan__cta{margin-top:auto}
/* 2-column feature list so the dominant card stays compact (first viewport) */
.plan__features--2col{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}

/* ---------- PROMINENT MULTI-COMPANY ladder (pricing aside + landing block) ---------- */
.multi{padding:26px 24px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(19,19,21,.86),rgba(11,11,12,.86))}
.multi__flag{display:inline-block;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--orange-bright);margin-bottom:8px}
.multi__head h3{font-family:var(--font-display);font-size:1.3rem;font-weight:800;margin-top:2px}
.multi__head p{margin-top:8px;font-size:.84rem;color:var(--text-mute);max-width:54ch}
.multi__ladder{display:flex;flex-direction:column;gap:12px;margin:20px 0 14px}
.multi__step{position:relative;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:4px 14px;padding:16px 18px;border-radius:14px;border:1px solid var(--line-soft);background:rgba(26,26,28,.5)}
.multi__count{grid-row:span 2;display:grid;place-items:center;width:54px;height:54px;border-radius:12px;font-family:var(--font-mono);font-size:1.2rem;font-weight:600;color:var(--orange-bright);background:rgba(244,122,32,.1);border:1px solid rgba(244,122,32,.3)}
.multi__label{font-weight:700;font-size:.95rem;color:var(--text)}
.multi__price{font-family:var(--font-display);font-size:1.35rem;font-weight:800;text-align:right;color:var(--text)}
.multi__sub{grid-column:2 / -1;font-size:.76rem;color:var(--text-dim)}
.multi__step.is-included{border-color:rgba(244,122,32,.3)}
.multi__step.is-included .multi__price{color:var(--amber);font-size:1.05rem}
.multi__step.is-best{border-color:rgba(244,122,32,.55);background:radial-gradient(120% 100% at 100% 0%,rgba(244,122,32,.12),transparent 60%),rgba(26,26,28,.6)}
.multi__step.is-best .multi__price{color:var(--orange-bright)}
.multi__note{margin-top:6px;font-size:.76rem;color:var(--text-dim)}

/* ---------- ROADMAP STRIP (demoted Premium + Kanzlei, no €/month figure) ---------- */
.roadmap{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-top:22px;padding:18px 24px;border-radius:18px;border:1px dashed var(--line);background:rgba(15,15,16,.6)}
.roadmap__label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);flex:none}
.roadmap__label svg{width:16px;height:16px;fill:none;stroke:var(--text-dim);stroke-width:1.8}
.roadmap__items{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.roadmap__item strong{display:block;font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:5px;color:var(--text)}
.roadmap__item p{font-size:.8rem;color:var(--text-dim);line-height:1.5}
.roadmap__item a{color:var(--amber)}
.roadmap__tag{font-family:var(--font-mono);font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);padding:3px 8px;border:1px solid var(--line);border-radius:999px;margin-left:6px;vertical-align:middle}

/* ==========================================================================
   LANDING MULTI-COMPANY — "box-fan showpiece"
   Two columns: copy + glass tier-ladder (left); Unbegrenzt box centerpiece
   with BILLEVO_2/3/4/5 fanned behind it in real CSS 3D depth (right).
   ========================================================================== */

.multico { position: relative; padding: 120px 0 110px; overflow: hidden; }

/* The "glowing connected panels" art, weighted right where the boxes sit;
   dark-out top-left so the copy column keeps clean contrast. */
.multico__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 70% 42%, rgba(244,122,32,.14), transparent 62%),
    linear-gradient(180deg, var(--ink-0) 0%, rgba(5,5,5,.55) 18%, rgba(5,5,5,.45) 60%, var(--ink-0) 100%),
    url("../assets/bg-mehr-unternehmen.jpg") center / cover no-repeat;
}
.multico__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(38% 34% at 18% 30%, rgba(5,5,5,.78), transparent 70%);
}
.multico .container { position: relative; z-index: 1; }

.multico__layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

/* ---- LEFT: copy + glass ladder ---- */
.multico__copy { max-width: 540px; }
.multico__copy h2 { margin-top: 6px; }
.multico__copy .lead { margin-top: 20px; max-width: 46ch; }

.multico__ladder { display: flex; flex-direction: column; gap: 10px; margin: 30px 0 0; }
.mc-tier {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 16px;
  padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(20,20,22,.55), rgba(11,11,12,.55));
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  transition: border-color .3s ease, transform .3s ease;
}
.mc-tier:hover { transform: translateX(4px); border-color: var(--line-orange); }
.mc-tier__badge {
  grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px;
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--orange-bright);
  background: rgba(244,122,32,.1); border: 1px solid rgba(244,122,32,.32);
}
.mc-tier__name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--text); }
.mc-tier__price { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); text-align: right; white-space: nowrap; }
.mc-tier__sub { grid-column: 2 / -1; font-size: .78rem; color: var(--text-dim); }
.mc-tier.is-included { border-color: rgba(244,122,32,.3); }
.mc-tier.is-included .mc-tier__price { color: var(--amber); font-size: 1rem; }
.mc-tier.is-best {
  border-color: rgba(244,122,32,.6);
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(244,122,32,.16), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.62), rgba(11,11,12,.62));
}
.mc-tier.is-best .mc-tier__badge { font-size: 1.4rem; background: rgba(244,122,32,.16); box-shadow: 0 0 26px -6px rgba(244,122,32,.6); }
.mc-tier.is-best .mc-tier__price { color: var(--orange-bright); }

.multico__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 30px; }
.multico__trust { margin-top: 18px; font-size: .82rem; color: var(--text-dim); }
.btn--text { font-weight: 700; font-size: .9rem; color: var(--amber); transition: color .2s; }
.btn--text:hover { color: var(--orange-bright); }

/* ---- RIGHT: the 3D box stage ---- */
.multico__stage { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; perspective: 1700px; }
.multico__stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 120%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(45% 45% at 50% 46%, rgba(244,122,32,.28), transparent 70%); filter: blur(20px);
}

.mc-box {
  position: absolute; border-radius: 18px; overflow: hidden;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.9);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s ease; will-change: transform;
}
.mc-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-box__tag {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(8,9,12,.72); border: 1px solid var(--line-orange); color: var(--amber);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* centerpiece = Unbegrenzt, tilted + glowing + floating */
.mc-box--hero {
  position: relative; z-index: 3; width: min(360px, 72%);
  transform: perspective(1700px) rotateY(-13deg) rotateX(4deg);
  box-shadow: 0 60px 120px -38px rgba(0,0,0,.92), 0 0 90px -22px rgba(244,122,32,.6), 0 0 0 1px rgba(244,122,32,.25);
  animation: mcFloat 8s ease-in-out infinite;
}
.mc-box--hero::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,138,42,.16), transparent 42%);
}
.multico__stage:hover .mc-box--hero { transform: perspective(1700px) rotateY(-7deg) rotateX(2deg) translateY(-8px); }

/* fanned siblings behind, dimmed + pushed back in Z for depth */
.mc-box--l2 { z-index: 2; width: 40%; left: 2%;  top: 14%; opacity: .92; transform: perspective(1700px) rotateY(-20deg) rotateX(5deg) translateZ(-90px)  scale(.82); filter: brightness(.78) saturate(.95); }
.mc-box--l1 { z-index: 1; width: 34%; left: -3%; top: 40%; opacity: .70; transform: perspective(1700px) rotateY(-24deg) rotateX(6deg) translateZ(-200px) scale(.66); filter: brightness(.6)  saturate(.9);  }
.mc-box--r1 { z-index: 2; width: 38%; right: 2%; top: 20%; opacity: .85; transform: perspective(1700px) rotateY(-6deg)  rotateX(4deg) translateZ(-110px) scale(.78); filter: brightness(.72) saturate(.95); }
.mc-box--r2 { z-index: 1; width: 30%; right: -2%; top: 48%; opacity: .60; transform: perspective(1700px) rotateY(-2deg)  rotateX(5deg) translateZ(-230px) scale(.6);  filter: brightness(.55) saturate(.85); }

@keyframes mcFloat {
  0%, 100% { transform: perspective(1700px) rotateY(-13deg) rotateX(4deg) translateY(0); }
  50%      { transform: perspective(1700px) rotateY(-13deg) rotateX(4deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .mc-box--hero { animation: none; } }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .multico__layout { grid-template-columns: 1fr; gap: 20px; }
  .multico__stage { min-height: 440px; order: -1; margin-bottom: 10px; }
  .multico__copy { max-width: none; }
  .multico__copy .lead { max-width: 60ch; }
}
@media (max-width: 560px) {
  .multico__stage { min-height: 360px; }
  .mc-box--hero { width: 78%; }
  .mc-box--l1, .mc-box--r2 { display: none; }   /* thin the fan on small phones */
}

/* MULTICO — tighten the gutter, upsize copy + ladder, pull boxes inward */
.multico__layout--tight {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(24px, 2.4vw, 48px);
  align-items: center;
}
/* keep the new section-mark / copy above the per-section aurora hotspot */
.multico__layout--tight > .aurora { z-index: 0; }
.multico__layout--tight .multico__copy,
.multico__layout--tight .multico__stage { position: relative; z-index: 1; }
.multico__layout--tight .multico__copy { max-width: 620px; }
.multico__layout--tight .multico__copy .lead-xl { max-width: 48ch; }
/* upscale the price ladder so it matches the boxes' visual weight */
.multico__layout--tight .mc-tier { padding: 16px 20px; }
.multico__layout--tight .mc-tier__badge { width: 54px; height: 54px; font-size: 1.25rem; }
.multico__layout--tight .mc-tier__name { font-size: 1.1rem; }
.multico__layout--tight .mc-tier__price { font-size: 1.5rem; }
.multico__layout--tight .mc-tier.is-included .mc-tier__price { font-size: 1.2rem; }
.multico__layout--tight .mc-tier.is-best .mc-tier__badge { font-size: 1.55rem; }
/* widen the stage so boxes fill their column edge-to-edge; nearest box crosses the gridline */
.multico__layout--tight .multico__stage { min-height: 600px; margin-left: clamp(-40px, -3vw, 0px); }
.multico__layout--tight .mc-box--hero { width: min(420px, 80%); }
.multico__layout--tight .multico__stage::before {
  left: 56%;   /* re-center the bloom under the hero box, not the dead gutter */
}
@media (max-width: 1080px) {
  .multico__layout--tight { grid-template-columns: 1fr; gap: 18px; }
  .multico__layout--tight .multico__stage { margin-left: 0; order: -1; min-height: 440px; }
  .multico__layout--tight .multico__copy { max-width: none; }
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .pricing-main{grid-template-columns:1fr}
  .plan__features--2col{grid-template-columns:1fr}
}

/* <=360px: echte In-Flow-Overflow-Ursachen auf /preise/ entschaerfen, ohne >=375px zu aendern */
@media(max-width:360px){
  .plan, .plan--featured, .multi{ min-width:0; max-width:100%; }
  .plan, .plan--featured{ padding-left:18px; padding-right:18px; }
  .multi{ padding-left:16px; padding-right:16px; }
  .multi__step{ grid-template-columns:44px minmax(0,1fr) auto; gap:4px 10px; padding:14px 12px; min-width:0; }
  .multi__count{ width:44px; height:44px; font-size:1rem; }
  .multi__label, .multi__price{ min-width:0; }
  .multi__price{ white-space:normal; word-break:break-word; }
}
@media(max-width:980px){
  .roadmap{grid-template-columns:1fr}
  .roadmap__items{grid-template-columns:1fr}
}

/* ==========================================================================
   BILLEVO — "EMBER EDITORIAL" SHARED DESIGN LANGUAGE
   Append at the END of css/style.css. Purely ADDITIVE: existing classes keep
   working; sections opt in. Includes the Preise fixed-backdrop continuity fix.
   ========================================================================== */

:root {
  /* editorial display tiers (used sparingly as section openers) */
  --fs-mega: clamp(3.2rem, 6.4vw, 6.4rem);
  --fs-display: clamp(2.5rem, 4.6vw, 4.4rem);
  --fs-lead: clamp(1.12rem, 1.55vw, 1.42rem);
  /* radius system — break the blanket 16px */
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --radius-cut: 22px 6px 22px 6px;     /* asymmetric "cut panel" corner */
  /* reusable ember light + hairline */
  --hairline: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  --ember: radial-gradient(closest-side, var(--glow), transparent);
  --ease-cine: cubic-bezier(.2,.7,.2,1);
}

/* ---------- DISPLAY TYPE + EXPRESSIVE WORD ---------- */
.display-xl { font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display); line-height: .99; letter-spacing: -.035em; color: var(--text); }
.display-xl--mega { font-size: var(--fs-mega); line-height: .96; }
.lead-xl { margin-top: 22px; font-size: var(--fs-lead); line-height: 1.5;
  color: var(--text-soft); max-width: 40ch; }
.lead-xl strong { color: var(--text); font-weight: 700; }
/* one expressive outline word per page (signature) */
.em-outline { font-style: normal; color: transparent;
  -webkit-text-stroke: 1.5px var(--orange-bright); }

/* ---------- SECTION-MARK : numbered editorial eyebrow (chapter rhythm) ---------- */
.section-mark { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.section-mark__idx { font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; color: var(--orange-bright); }
.section-mark__rule { flex: none; width: clamp(40px, 8vw, 96px); height: 1px;
  background: linear-gradient(90deg, var(--line-orange), transparent); }
.section-mark__kicker { font-family: var(--font-mono); font-size: .76rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .24em; color: var(--text-soft); }
.section-head--center .section-mark { justify-content: center; }

/* ---------- EMBER-RULE : hairline divider with one glow-node ---------- */
.ember-rule { position: relative; height: 1px; border: 0; margin: 0;
  background: var(--hairline); }
.ember-rule::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%,-50%);
  background: var(--orange-bright); box-shadow: 0 0 14px 2px rgba(255,138,42,.7); }

/* ---------- AURORA : the traveling warm hotspot ---------- */
.aurora { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(42% 38% at 50% 50%, rgba(244,122,32,.16), transparent 70%); }
.aurora--tr { background: radial-gradient(46% 42% at 88% 8%, rgba(244,122,32,.18), transparent 72%); }
.aurora--bl { background: radial-gradient(48% 44% at 8% 96%, rgba(255,138,42,.15), transparent 74%); }
/* local hotspot util with per-section position via custom props */
.section-ember { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(var(--es, 40%) var(--es, 36%) at var(--ex, 80%) var(--ey, 12%),
    rgba(244,122,32,.17), transparent 72%); }
/* oversized outline-B texture (the mark as editorial texture) */
.ghost-b { position: absolute; pointer-events: none; z-index: 0; opacity: .055;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(360px, 52vw, 760px); color: transparent;
  -webkit-text-stroke: 2px var(--orange); user-select: none; }
.ember-node { width: 12px; height: 12px; border-radius: 50%; background: var(--orange-bright);
  box-shadow: 0 0 18px 3px rgba(255,138,42,.75), 0 0 0 1px rgba(255,138,42,.35); }

/* ---------- TIERED SURFACES (anti-uniform-card) ---------- */
.surface-flat { background: transparent; border: 0; }
.surface-glass { position: relative; background: rgba(8,9,12,.62);
  -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--r);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); }
.surface-ember { position: relative; border-radius: var(--radius-cut);
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(244,122,32,.12), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.66), rgba(11,11,12,.66));
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--amber), var(--orange) 55%, transparent) 1;
  box-shadow: 0 40px 90px -42px rgba(0,0,0,.9), 0 0 70px -30px rgba(244,122,32,.55),
    inset 0 1px 0 rgba(255,255,255,.06); }
.surface-ember::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,138,42,.45), transparent);
  pointer-events: none; }

/* ---------- PANEL-FRAME : "framed, not boxed" corner ticks ---------- */
.panel-frame { position: relative; }
.panel-frame::before, .panel-frame::after { content: ""; position: absolute;
  width: 26px; height: 26px; pointer-events: none; }
.panel-frame::before { top: -1px; left: -1px;
  border-top: 1.5px solid var(--orange-bright); border-left: 1.5px solid var(--orange-bright);
  border-top-left-radius: 8px; }
.panel-frame::after { bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--orange-bright); border-right: 1.5px solid var(--orange-bright);
  border-bottom-right-radius: 8px; }

/* ---------- CRISP ICON NORMALIZER ---------- */
.ico, .icon--crisp { shape-rendering: geometricPrecision; }
.ico path, .ico circle, .ico rect, .ico line, .ico ellipse, .ico polyline,
.icon--crisp path, .icon--crisp circle, .icon--crisp rect, .icon--crisp line,
.icon--crisp ellipse, .icon--crisp polyline {
  vector-effect: non-scaling-stroke; stroke-width: 1.75; }

/* ---------- MOTION : upgraded reveal (driven by existing .js .reveal.in) ---------- */
.js .reveal--wipe { clip-path: inset(0 0 100% 0); }
.js .reveal--wipe.in { clip-path: inset(0 0 0 0);
  transition: clip-path .7s var(--ease-cine) var(--d, 0s),
    opacity .7s var(--ease-cine) var(--d, 0s), transform .7s var(--ease-cine) var(--d, 0s); }
.js .reveal--stagger > * { opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease-cine), transform .6s var(--ease-cine); }
.js .reveal--stagger > * { transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal--stagger.in > * { opacity: 1; transform: none; }
/* draw-on line (ember arcs / em underline) */
.draw-line { stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; }
.js .reveal.in .draw-line, .js .draw-line.in {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-cine) .1s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal--wipe { clip-path: none; }
  .js .reveal--stagger > * { opacity: 1; transform: none; }
  .draw-line { stroke-dashoffset: 0 !important; }
  .aurora, .section-ember, .ghost-b, .solution__emblem img, .mc-box--hero { animation: none !important; }
}

/* ==========================================================================
   PREISE FIXED-BACKDROP CONTINUITY FIX
   Root cause: the fixed-backdrop selectors all guard with :not(.page-hero--tight);
   and lines 2062-2064 re-pin the pricing hero bg as a short absolute strip → the
   warm backdrop visibly cuts off at the cards. Make --tight share the SAME
   continuous fixed backdrop. The pricing glass cards/.multi/.roadmap sit on real
   panels at z>=1 and paint over the z:-2 image, so nothing about the cards changes.
   ========================================================================== */

/* Neutralise the compact strip override (was: position:absolute; height:auto; z-index:0) */
.page-hero--tight .page-hero__bg {
  position: fixed; inset: 0; height: auto; z-index: -2;
  background-size: cover; background-position: center top;
}
.page-hero--tight .page-hero__bg::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 14% 0%, rgba(5,5,5,.80) 0%, rgba(5,5,5,.32) 46%, transparent 80%),
    linear-gradient(180deg, rgba(5,5,5,.58) 0%, rgba(5,5,5,.40) 38%, rgba(5,5,5,.66) 84%, var(--ink-0) 100%);
}
/* the pricing section's own .pricing__bg fades INTO ink so cards never float */
.pricing--tight .pricing__bg::after,
.page-hero--tight ~ * .pricing__bg::after {
  background: linear-gradient(180deg, transparent 0%, rgba(5,5,5,.35) 55%, var(--ink-0) 100%);
}
/* let the ambient ember layer match the other interior pages on the pricing page */
.page-hero--tight ~ * .ambient { opacity: .72; }

/* MOBILE: position:fixed janks on iOS → tall absolute bg that scrolls with content */
@media (max-width: 720px) {
  .page-hero--tight .page-hero__bg { position: absolute; inset: 0 0 auto 0; min-height: 240vh; }
  .page-hero--tight .page-hero__bg::after { position: absolute; min-height: 240vh; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--tight .page-hero__bg { transform: none; will-change: auto; }
}

/* ==========================================================================
   SOLUTION — editorial 2-zone (overrides the 3-col grid + tile wall)
   The .window--mini app-screenshot is removed; the B emblem is the centerpiece
   and the 8 features become a borderless asymmetric editorial rail.
   ========================================================================== */
.solution__grid--editorial {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 4vw, 80px);
  align-items: center;
}
.solution__feature-zone { position: relative; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(20px, 2.5vw, 44px); align-items: center; }
.solution__feature-zone .ghost-b { right: -6%; top: 50%; transform: translateY(-50%); }
/* emblem becomes the undisputed centerpiece */
.solution__feature-zone .solution__emblem { align-self: center; }
.solution__feature-zone .solution__emblem img { width: min(420px, 42vw); }
/* the asymmetric editorial list — NOT a card grid */
.feature-rail { position: relative; z-index: 1; display: flex; flex-direction: column;
  margin: 0; padding: 0; list-style: none; }
.feature-line { display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); }
.feature-line:first-child { border-top: 0; }
.feature-line:nth-child(even) { padding-left: clamp(0px, 3vw, 32px); }   /* rhythm/asymmetry */
.feature-line__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(244,122,32,.1); border: 1px solid rgba(244,122,32,.3);
  color: var(--orange-bright); }
.feature-line__ico svg { width: 22px; height: 22px; }
.feature-line h3 { font-size: 1rem; font-weight: 700; }
.feature-line p { font-size: .85rem; color: var(--text-soft); line-height: 1.5; margin-top: 3px; }

/* keep the editorial 2-zone within the mid breakpoint (beats the generic 3-col override) */
@media (max-width: 1280px) {
  .solution__grid--editorial { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}
@media (max-width: 1080px) {
  .solution__grid--editorial { grid-template-columns: 1fr; }
  .solution__feature-zone { grid-template-columns: 1fr; }
  .solution__feature-zone .solution__emblem { justify-self: center; margin-bottom: 8px; }
  .solution__feature-zone .ghost-b { display: none; }
}

/* ==========================================================================
   STEPS — Referenz-Rebuild: gerade Pfeile, Automatisierungs-Spalte, Status-Karte
   ========================================================================== */
.step { position: relative; z-index: 1; }
.step__head { position: relative; z-index: 1; }

/* Spalte 02: Automatisierungs-Karte (natürliche Höhe) + Status-Karte mit festem Abstand;
   Spalte 2 bleibt bewusst kürzer als Spalte 1/3 (wie in der Referenz). */
.step--auto .mock { flex: 0 0 auto; }
.step--auto .statuscard { margin-top: 30px; }

.step--auto .mock__row { padding: 12px 13px; }
.step--auto .mock__row + .mock__row { margin-top: 10px; }
.mock--auto .mock__row-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: #1B1B1E;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #A6A6AD;
  box-shadow: none;
}
.mock--auto .mock__row-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; }

.statuscard {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; border-radius: 14px;
  background: linear-gradient(180deg, #121214, #0C0C0D);
  border: 1px solid transparent;
  box-shadow: 0 26px 60px -36px rgba(0, 0, 0, 0.9), 0 0 42px -24px rgba(244, 122, 32, 0.4);
}

/* Orange Rahmenlinie um die Karten (wie Referenz): hell oben, matt nach unten, runde Ecken erhalten */
.mock::before, .statuscard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 142, 48, 0.9), rgba(244, 122, 32, 0.32) 55%, rgba(244, 122, 32, 0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.statuscard__icon {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(125% 125% at 30% 22%, rgba(98, 201, 91, 0.26), rgba(98, 201, 91, 0.06) 72%);
  border: 1px solid rgba(98, 201, 91, 0.5);
  color: #6FD15F;
}
.statuscard__icon svg { width: 20px; height: 20px; }
.statuscard > div strong { display: block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--text); }
.statuscard > div span { display: block; font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }

/* Karte 03: Zeitraum-Dropdown statt Pille + grüner KPI-Vergleich */
.mock__select {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-style: normal;
  font-size: 0.68rem; font-weight: 500;
  color: var(--text-mute);
  padding: 5px 9px; border-radius: 8px;
  background: #161618; border: 1px solid rgba(255, 255, 255, 0.08);
}
.mock__select svg { width: 13px; height: 13px; color: var(--text-dim); fill: none; stroke: currentColor; }
.mock__kpi-box small.up { color: #68CD58; }

@media (max-width: 980px) {
  .step__head { align-items: flex-start; min-height: 0; }
  .step--auto .statuscard { margin-top: 22px; }
}

/* ============================================================
   ROADMAP — Standard hero + honest ember timeline (no co-equal tiers)
   ============================================================ */
.pricing-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 3.5vw, 64px); align-items: start; margin-top: 30px; }
.pricing-story__now .plan { padding: 30px 28px; }
/* surface-ember owns the look; keep its gradient hairline (override .plan--featured border) */
.pricing-story__now .plan.surface-ember { border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--amber), var(--orange) 55%, transparent) 1; }
.pricing-story__now .plan.surface-ember:hover { transform: translateY(-4px); }
.pricing-story__next .eyebrow { margin-bottom: 18px; }
.roadmap-rail { position: relative; display: flex; flex-direction: column; gap: 0;
  padding-left: 26px; list-style: none; margin: 0; }
.roadmap-rail::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--orange-bright), var(--orange) 50%, rgba(244,122,32,.25)); }
.roadmap-rail__stop { position: relative; padding: 0 0 26px 16px; }
.roadmap-rail__stop:last-child { padding-bottom: 0; }
.roadmap-rail__stop .ember-node { position: absolute; left: -27px; top: 4px; width: 12px; height: 12px; }
.roadmap-rail__status { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.roadmap-rail__stop strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.roadmap-rail__stop strong em { font-style: normal; color: var(--amber); font-weight: 600; }
.roadmap-rail__stop p { font-size: .87rem; color: var(--text-soft); margin-top: 4px; line-height: 1.5; }
.roadmap-rail__stop p a { color: var(--orange-bright); white-space: nowrap; transition: color .25s ease; }
.roadmap-rail__stop p a:hover { color: var(--amber); }
.maker-note { display: flex; align-items: center; gap: 12px; margin-top: 26px;
  font-size: .85rem; color: var(--text-soft); }
.maker-note img { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 8px rgba(244,122,32,.5)); }
@media (max-width: 980px) { .pricing-story { grid-template-columns: 1fr; }
  .pricing-story__now .plan { padding: 28px 22px; } }

/* ============================================================
   FAQ — EDITORIAL 2-ZONE: sticky buy card + flat editorial rows,
   custom rotating ember "+" → "×" tick. (FAQ page only; the
   .faq__tick glyph is global so it also upgrades the landing #faq)
   ============================================================ */
.faq__editorial { position: relative; z-index: 1;
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px); align-items: start; }
.faq__rail { position: sticky; top: 104px; }
.faq__buy { padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.faq__buy .eyebrow { margin-bottom: 0; }
.faq__buy strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.faq__buy-price { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--text); line-height: 1.05; }
.faq__buy-price i { font-style: normal; font-size: .9rem; color: var(--text-soft); font-weight: 500; }
.faq__buy .btn { margin-top: 6px; }
.faq__buy-note { font-size: .76rem; color: var(--text-dim); line-height: 1.45; }

/* list as flat editorial rows, NOT a bordered glass slab (override the .faq__list slab) */
.faq__list--editorial { max-width: none; margin: 0;
  background: transparent !important; -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.faq__list--editorial::before { display: none; }
.faq__list--editorial .faq__group { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--orange-bright); margin: 28px 0 6px; }
.faq__list--editorial .faq__group:first-child { margin-top: 0; }
.faq__list--editorial .faq__item { margin-bottom: 0; border: 0; border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.faq__list--editorial .faq__item:hover { border-color: rgba(255,255,255,.08); }
.faq__list--editorial .faq__item[open] { border-color: rgba(255,255,255,.08); box-shadow: none; }
.faq__list--editorial summary { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700;
  color: var(--text); padding: 18px 0; list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq__list--editorial summary::-webkit-details-marker { display: none; }
.faq__list--editorial .faq__body { padding: 0 0 18px; }
.faq__list--editorial .faq__body p { font-size: .95rem; color: var(--text-soft); max-width: 68ch; }

/* custom + → × rotating ember tick (global glyph) */
.faq__tick { flex: none; position: relative; width: 22px; height: 22px; }
.faq__tick::before, .faq__tick::after { content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--orange-bright); border-radius: 2px; transition: transform .35s var(--ease-cine), opacity .35s var(--ease-cine); }
.faq__tick::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.faq__tick::after  { width: 2px; height: 14px; transform: translate(-50%,-50%); }
.faq__item[open] .faq__tick::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__item[open] .faq__tick::before { transform: translate(-50%,-50%) rotate(135deg); }
.faq__list--editorial .faq__item[open] summary { color: var(--orange-bright); }

@media (max-width: 880px) {
  .faq__editorial { grid-template-columns: 1fr; }
  .faq__rail { position: static; }
}

/* ===================== COMPARE / VERGLEICH ===================== */
.compare {
  position: relative;
  padding: clamp(80px, 9vw, 140px) 0;
  overflow: hidden;
  isolation: isolate;
}

.compare__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Gleiches Bild wie die "Mehrere Unternehmen"-Sektion; kraeftiger Dunkel-Schleier,
     weil die Vergleichstabelle die volle Breite mit Text fuellt (Lesbarkeit). */
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(244, 122, 32, 0.13), transparent 60%),
    linear-gradient(180deg, var(--ink-0) 0%, rgba(5, 5, 5, 0.74) 13%, rgba(5, 5, 5, 0.66) 55%, var(--ink-0) 100%),
    url("../assets/bg-mehr-unternehmen.jpg") center / cover no-repeat;
}
.compare__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 62%, var(--ink-0) 100%);
}

/* ---------- Head ---------- */
.compare .section-head { margin: 0 auto clamp(40px, 5vw, 64px); max-width: 900px; }
.compare .section-head--center { text-align: center; }
.compare .eyebrow {
  font-family: var(--font-mono);
  color: var(--orange);
  letter-spacing: 0.22em;
  font-size: 12px;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.compare h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  margin: 0;
  color: var(--text);
}
.compare .lead {
  max-width: 64ch;
  margin: 18px auto 0;
  color: var(--text-mute);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
}

/* ---------- Table wrapper ---------- */
.compare__table-wrap { max-width: 1180px; margin: 0 auto; }

.compare__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

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

/* ----- header row ----- */
.compare__corner {
  width: 30%;
  text-align: left;
  vertical-align: bottom;
  padding: 0 22px 18px 4px;
}
.compare__corner-txt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.compare__col {
  width: 35%;
  vertical-align: bottom;
  text-align: left;
  padding: 18px 24px;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.compare__col-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.compare__col-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}

.compare__col--abo {
  background: linear-gradient(180deg, rgba(26, 26, 28, 0.55), rgba(15, 15, 16, 0.6));
  border: 1px solid var(--line);
  border-bottom: 0;
}
.compare__col--abo .compare__col-kicker { color: var(--text-dim); }
.compare__col--abo .compare__col-name { color: var(--text-soft); }

.compare__col--billevo {
  position: relative;
  background: linear-gradient(180deg, rgba(244, 122, 32, 0.16), rgba(244, 122, 32, 0.04));
  border: 1px solid var(--line-orange);
  border-bottom: 0;
  box-shadow: 0 -12px 50px -20px var(--glow);
  overflow: hidden;
}
.compare__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -20%, rgba(255, 138, 42, 0.22), transparent 60%);
}
.compare__col--billevo .compare__col-kicker { color: var(--amber); position: relative; }
.compare__col--billevo .compare__col-name {
  position: relative;
  background: linear-gradient(100deg, var(--amber), var(--orange-bright) 55%, var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ----- dimension (row header) ----- */
.compare__dim {
  text-align: left;
  vertical-align: middle;
  padding: 22px 22px 22px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.compare__dim-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.compare__dim-ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--orange-bright);
}
.compare__dim-ico svg { width: 20px; height: 20px; }
.compare__dim-txt {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--text);
}
.compare__dim-sub {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-bright);
  font-style: normal;
  font-weight: 400;
  margin-top: 5px;
}

/* ----- body cells ----- */
.compare__cell {
  vertical-align: top;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.compare__cell p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 0;
}
.compare__cell p strong { color: var(--text); font-weight: 700; }

.compare__cell--abo {
  background: rgba(15, 15, 16, 0.5);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.compare__cell--billevo {
  background: linear-gradient(180deg, rgba(244, 122, 32, 0.055), rgba(244, 122, 32, 0.02));
  border-left: 1px solid var(--line-orange);
  border-right: 1px solid var(--line-orange);
}
.compare__cell--billevo p strong { color: var(--amber); }

/* checkmark / cross */
.compare__mark {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.compare__mark svg { width: 16px; height: 16px; }
.compare__mark--yes {
  background: rgba(244, 122, 32, 0.14);
  border: 1px solid var(--line-orange);
  color: var(--orange-bright);
}
.compare__mark--no {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--text-dim);
}

/* ----- cost centerpiece row ----- */
.compare__row--cost .compare__dim,
.compare__row--cost .compare__cell { border-bottom: 0; padding-bottom: 18px; }
.compare__row--cost .compare__cell--billevo {
  background: linear-gradient(180deg, rgba(244, 122, 32, 0.10), rgba(244, 122, 32, 0.03));
}

/* climbing bars (cold / Abo) */
.cost__bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 16px;
  height: 168px;
}
.cost__bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  text-align: center;
}
.cost__fill {
  order: 2;
  width: 100%;
  height: var(--h);
  min-height: 12px;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, rgba(180, 180, 188, 0.5), rgba(120, 120, 128, 0.24));
  border: 1px solid var(--line);
  border-bottom: none;
  transition: height 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cost__bar--max .cost__fill {
  background: linear-gradient(180deg, rgba(87, 87, 95, 0.85), rgba(44, 44, 49, 0.6));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.cost__amt {
  order: 1;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-bottom: 8px;
  white-space: nowrap;
}
.cost__bar--max .cost__amt { color: var(--text); }
.cost__yr {
  order: 3;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 10px;
}

/* flat bar (warm / Billevo) */
.cost__flat {
  height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cost__flat-yrs {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  padding: 0 4px;
}
.cost__flat-bar {
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--orange-bright), var(--orange));
  box-shadow: 0 0 28px -6px var(--glow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cost__flat-bar .cost__amt {
  order: 0;
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink-0);
}
.cost__flat-bar em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(5, 5, 5, 0.78);
}
.cost__flat-line {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.cost__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 0.86rem;
  color: var(--text-dim);
}
.cost__note svg { width: 16px; height: 16px; flex: none; }
.cost__note--warm { color: var(--text-soft); }
.cost__note--warm svg { color: var(--orange-bright); }

/* ----- assumption caption row ----- */
.compare__assume {
  padding: 14px 22px 26px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.compare__assume p {
  display: inline;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
.compare__assume p strong { color: var(--text-soft); font-weight: 700; }
.compare__assume p em { color: var(--amber); font-style: normal; }
.compare__assume svg {
  width: 16px; height: 16px;
  color: var(--orange);
  vertical-align: -3px;
  margin-right: 8px;
}

/* ---------- Mobile stacked cards (hidden on desktop) ---------- */
.compare__stack { display: none; }

.cmpc {
  background: rgba(15, 15, 16, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}
.cmpc--cost {
  border-color: var(--line-orange);
  box-shadow: 0 0 50px -22px var(--glow);
  background: linear-gradient(180deg, rgba(244, 122, 32, 0.06), rgba(15, 15, 16, 0.6));
}
.cmpc__dim {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.08rem;
  color: var(--text);
  margin: 0 0 16px;
}
.cmpc--cost .cmpc__dim { color: var(--amber); }

.cmpc__pair { display: grid; gap: 14px; }
.cmpc__side {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}
.cmpc__side--billevo {
  border-color: var(--line-orange);
  background: linear-gradient(180deg, rgba(244, 122, 32, 0.08), rgba(244, 122, 32, 0.02));
}
.cmpc__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.cmpc__side--billevo .cmpc__label { color: var(--amber); }
.cmpc__label .compare__mark { width: 20px; height: 20px; margin: 0; }
.cmpc__label .compare__mark svg { width: 13px; height: 13px; }
.cmpc__pair--text p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-mute);
}
.cmpc__side--billevo p { color: var(--text-soft); }

.cmpc--cost .cost__bars { height: 132px; margin-bottom: 4px; }
.cmpc--cost .cost__flat-bar { height: 42px; }
.cost__note--assume {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.cost__note--assume strong { color: var(--text-soft); }

/* ---------- Soft CTA ---------- */
.compare__cta {
  max-width: 1180px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 28px clamp(24px, 3vw, 38px);
  border-radius: var(--radius);
  border: 1px solid var(--line-orange);
  background: linear-gradient(120deg, rgba(244, 122, 32, 0.10), rgba(15, 15, 16, 0.6) 60%);
  box-shadow: 0 30px 80px -40px var(--glow);
}
.compare__cta-lead {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--text);
  margin: 0 0 8px;
}
.compare__cta-sub {
  font-size: 0.95rem;
  color: var(--text-mute);
  margin: 0 0 6px;
}
.compare__price {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--amber);
  font-size: 1.05rem;
}
.compare__kleinst {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.compare__cta-fine {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0;
}
.compare__cta .btn--block { width: auto; min-width: 260px; flex: none; }
.compare__cta .btn--block svg { width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; }

/* ---------- Reveal (gated behind .js like the global system) ---------- */
.js .compare .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--d, 0s);
}
.js .compare .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .compare__table-wrap { max-width: 760px; }
  .compare__col-name { font-size: 1.1rem; }
  .compare__cell, .compare__dim { padding-left: 16px; padding-right: 16px; }
  .cost__bars { height: 150px; }
  .cost__flat { height: 150px; }
}

@media (max-width: 720px) {
  .compare__table-wrap { display: none; }
  .compare__stack { display: block; }
  .compare__cta {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .compare__cta .btn--block { width: 100%; min-width: 0; }
}

@media (min-width: 721px) {
  .compare__stack { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .compare .reveal { opacity: 1; transform: none; transition: none; }
  .compare__table * { transition: none !important; }
}

/* ===================== MOBILE-FEINSCHLIFF (2026-06) =====================
   Behebt "riesige Abstaende" und Uebergroessen auf Smartphones, ohne Desktop
   zu veraendern. Bewusst am Dateiende -> gewinnt per Quell-Reihenfolge.
   Quelle: paralleler Mobile-Audit (8 Seiten) + Synthese. */
@media (max-width: 720px) {
  /* 1) Sektions-Abstaende vereinheitlichen + .compare einbeziehen (war ausgenommen -> 80px) */
  .problem, .solution, .steps, .insights, .pricing, .faq, .multico, .compare {
    padding-top: 48px; padding-bottom: 44px;
  }
  .cta { padding-top: 32px; padding-bottom: 40px; }

  /* 2) CTA-Wasserzeichen (grosses "B") zaehmen -> keine leere Flaeche unter den Buttons */
  .cta__emblem img { width: 104px; filter: drop-shadow(0 0 22px rgba(244,122,32,.5)); }
  .cta__emblem::before { display: none; }
  .cta__emblem { margin-top: 4px; }

  /* 3) Stat-Zahlen: kleinerer Glow & Groesse, engere Abstaende */
  .stats { gap: 18px; }
  .stat strong { font-size: 2.1rem; filter: drop-shadow(0 0 10px rgba(244,122,32,.3)); }

  /* 4) Grosser fixer Abstand vor dem "Klartext"-Block verkleinern */
  .honesty { margin-top: 48px; }

  /* 5) Compare-Sektion: Kopf & Zeilen enger, Kosten-Chart etwas lesbarer */
  .compare .section-head { margin-bottom: 26px; }
  .cmpc { margin-bottom: 12px; }
  .cmpc--cost .cost__bars { height: 150px; }

  /* 6) Lange Fliesstexte/Ratgeber lesbarer */
  .prose p, .prose li { font-size: 1rem; line-height: 1.62; }

  /* 7) Page-Hero: etwas Luft unter dem Eyebrow (war teils gequetscht) */
  .page-hero .eyebrow { margin-bottom: 14px; }
}

@media (max-width: 460px) {
  /* Stats 2-spaltig halten statt zu "stapeln" (keine gestapelten Riesen-Zahlen) */
  .stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat strong { font-size: 1.9rem; }
  /* Lange Titel auf sehr schmalen Geraeten zaehmen */
  .page-hero h1 { font-size: 1.95rem; line-height: 1.12; }
}

/* ==========================================================================
   Screenshot-Lightbox (Vollbild-Ansicht der Produkt-Screenshots)
   ========================================================================== */

/* Body-Scroll sperren, solange die Lightbox offen ist */
html.lb-open,
body.lb-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* Antipp-Affordance auf den Screenshots */
.is-zoomable {
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.is-zoomable:focus-visible {
  outline: 2px solid var(--orange-bright, #ff8a2a);
  outline-offset: 3px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 48px);
  background: rgba(4, 4, 6, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__stage {
  position: relative;
  margin: 0;
  max-width: min(1200px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.9);
  transform: scale(0.97);
  transition: transform 0.28s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__caption {
  max-width: 720px;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-soft, #c7c7cc);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  border-color: var(--line-orange, rgba(255, 138, 42, 0.55));
  background: rgba(30, 30, 33, 0.9);
  transform: scale(1.06);
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--orange-bright, #ff8a2a);
  outline-offset: 2px;
}
.lightbox__close[hidden],
.lightbox__nav[hidden] { display: none; }

.lightbox__close {
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 46px;
  height: 46px;
}
.lightbox__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--prev { left: clamp(8px, 2.5vw, 28px); }
.lightbox__nav--next { right: clamp(8px, 2.5vw, 28px); }
.lightbox__nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lightbox__counter {
  position: absolute;
  bottom: clamp(12px, 3vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-soft, #c7c7cc);
  background: rgba(20, 20, 22, 0.7);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lightbox__counter[hidden] { display: none; }

@media (max-width: 720px) {
  /* aktiver Screenshot soll antippbar wirken */
  .selector__panel.is-active .selector__img { cursor: zoom-in; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav svg { width: 22px; height: 22px; }
  /* Pfeile bei sehr schmalen Geraeten unten zentrieren, damit sie das Bild nicht verdecken */
  .lightbox__nav { top: auto; bottom: clamp(48px, 12vw, 70px); transform: none; }
  .lightbox__nav:hover { transform: scale(1.06); }
  .lightbox__nav--prev { left: 22%; }
  .lightbox__nav--next { right: 22%; }
  .lightbox__counter { bottom: clamp(48px, 12vw, 70px); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__img { transition: none; }
  .lightbox__img { transform: none; }
}

/* ===================== MOBILE-DICHTE / VERTIKALER RHYTHMUS (2026-06) =====================
   Mobile-Feedback "sehr viel Content": KEIN Inhalt entfernt. Nur die zwei verbliebenen
   grossen Desktop-Leerraeume schliessen (.auto 120px, .pricing__head 110px) + die
   Intra-Sektion-Abstaende auf Mobile vereinheitlichen, damit die lange Startseite ruhiger
   wirkt. Greift nur <=720px. */
@media (max-width: 720px) {
  .auto { margin-top: 56px; }
  .pricing__head { margin-top: 56px; }
  .faq__list { margin-top: 32px; }
  .auto__head { margin-bottom: 28px; }
  .pricing-story { margin-top: 24px; }
  .insights__actions { margin-top: 24px; }
  .bullets, .minis { margin-top: 22px; }
  .badge-row { margin-top: 36px; }
  .strip { margin-top: 36px; }
  .feature-line { padding-top: 15px; padding-bottom: 15px; }
}

/* ==========================================================================
   TRUST-MARQUEE: In-Flow-Umbau (Override, additiv) — Lauftext als festes Band
   IM SEITENFLUSS (direkt nach dem Hero) statt fixed-Bottom-Overlay. Entfernt den
   teuren iOS-fixed+backdrop-blur-Layer UND den will-change/translate3d-Dauerlayer.
   Animation (translateX -50%) bleibt. Steht NACH dem Original -> gewinnt.
   ========================================================================== */
.trust-marquee{
  position:static; left:auto; right:auto; bottom:auto; z-index:auto;
  width:100%; max-width:100%;
  overflow:hidden; padding:13px 0;
  background:rgba(12,12,14,.55);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-top:1px solid rgba(244,122,32,.20);
  border-bottom:1px solid rgba(244,122,32,.20);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  transition:none;
}
.trust-marquee.is-hidden{transform:none; opacity:1; pointer-events:auto}
@media (max-width:720px){
  .trust-marquee{position:static; width:100%; max-width:100%; padding:10px 0}
  .trust-marquee__track{will-change:auto; transform:none; animation-duration:34s}
  .trust-marquee.is-hidden{transform:none; opacity:1; pointer-events:auto}
}

/* ---------- Back-to-Top (global, per JS injiziert) ---------- */
.back-to-top{
  position:fixed; right:18px; bottom:18px; z-index:55;
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(244,122,32,.30);
  background:rgba(18,18,20,.86); color:var(--amber);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.back-to-top.is-visible{opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible}
.back-to-top:hover{border-color:var(--orange-bright)}
.back-to-top:focus-visible{outline:2px solid var(--orange-bright); outline-offset:3px}
.back-to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){.back-to-top{right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px)); width:44px; height:44px}}
@media (prefers-reduced-motion:reduce){.back-to-top{transition:opacity .15s ease; transform:none} .back-to-top.is-visible{transform:none}}

/* Reduced-Motion: teure Selektor-Transitions (width/box-shadow/filter) abschalten */
@media (prefers-reduced-motion: reduce) {
  .selector__panel { transition: border-color 0.4s ease; }
  .selector__img { transition: none; }
}