/* Components — homepage-atelier.de */

/* ============================================================
   HEADER + NAV
   ============================================================ */

.site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  transition: background var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}
.site-header.is-scrolled {
  background: var(--color-cream);
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 24px rgba(43, 38, 48, 0.06);
}
/* Frosted Glass nur Desktop: auf Mobil würde backdrop-filter den Header zum
   Containing-Block des fixed-Overlays machen (Menü dann auf Header-Größe). */
@media (min-width: 768px) {
  .site-header.is-scrolled {
    background: rgba(245, 239, 230, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
.site-header.is-scrolled .site-header__inner {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
  gap: var(--sp-5);
  transition: padding-top var(--transition-normal), padding-bottom var(--transition-normal);
}

.site-logo {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: -0.03em;
}
.site-logo:hover { color: var(--color-primary); }
.site-logo__dot { color: var(--color-primary); }

.site-nav {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
}
.site-nav__list {
  list-style: none;
  padding: 6px 8px;
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.site-nav__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.site-nav__link:hover { color: var(--color-ink); background: rgba(203, 90, 51, 0.08); }
.site-nav__link[aria-current="page"] {
  background: var(--color-ink);
  color: var(--color-white);
}

.nav-cta {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  transition: background var(--transition-fast);
}
.nav-cta:hover { background: var(--color-primary-dark); color: var(--color-white); }

.nav-toggle {
  display: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; z-index: 130; }
  .site-header__inner { position: relative; z-index: 130; }

  /* Hamburger blendet beim Öffnen zum X */
  .nav-toggle::before,
  .nav-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-toggle svg { transition: opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] svg { opacity: 0; }
  .nav-toggle[aria-expanded="true"]::before { opacity: 1; transform: translate(-50%, -50%) rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after  { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg); }

  /* Vollbild-Overlay statt schmaler Schublade */
  .site-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    background: var(--color-cream);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-12) var(--sp-6);
    transform: scale(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 120;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, visibility 0.5s;
  }
  .site-nav[data-open="true"] {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .site-nav__list {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6); /* war var(--sp-7): Token existiert nicht, gap fiel auf 0 */
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .site-nav__link {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-ink);
  }
  .site-nav__link:hover { background: none; }
  .site-nav__link[aria-current="page"] { background: none; color: var(--color-primary); }
  .nav-cta { font-size: 1.125rem; padding: var(--sp-3) var(--sp-6); margin-top: var(--sp-2); }

  /* Gestaffelter Reveal der Einträge */
  .site-nav__list li,
  .site-nav .nav-cta {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .site-nav[data-open="true"] .site-nav__list li,
  .site-nav[data-open="true"] .nav-cta {
    opacity: 1;
    transform: translateY(0);
  }
  .site-nav[data-open="true"] .site-nav__list li:nth-child(1) { transition-delay: 0.10s; }
  .site-nav[data-open="true"] .site-nav__list li:nth-child(2) { transition-delay: 0.15s; }
  .site-nav[data-open="true"] .site-nav__list li:nth-child(3) { transition-delay: 0.20s; }
  .site-nav[data-open="true"] .site-nav__list li:nth-child(4) { transition-delay: 0.25s; }
  .site-nav[data-open="true"] .site-nav__list li:nth-child(5) { transition-delay: 0.30s; }
  .site-nav[data-open="true"] .site-nav__list li:nth-child(6) { transition-delay: 0.35s; }
  .site-nav[data-open="true"] .site-nav__list li:nth-child(7) { transition-delay: 0.40s; }
  .site-nav[data-open="true"] .nav-cta { transition-delay: 0.45s; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .site-nav { transition: opacity 0.01s linear; transform: none; }
  .site-nav__list li,
  .site-nav .nav-cta { transition: none; opacity: 1; transform: none; }
  .nav-toggle::before, .nav-toggle::after, .nav-toggle svg { transition: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

/* Footer im Hero-Retro-Stil: Terracotta-Verlauf (unten dunkler -> Kontrast
   fuer Kleintext), Drahtgitter-Globus als Wasserzeichen + Fenster-Icons
   oben rechts (Inline-SVG, 0 Requests), gestrichelte Datenlinie als Kante. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary-dark) 45%, #93391c 100%);
  color: var(--color-cream);
  padding: var(--sp-10) 0 var(--sp-6);
  margin-top: var(--sp-16);
}
.site-footer::before {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 26rem;
  height: 26rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f5efe6' stroke-width='1.2'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Cellipse cx='50' cy='50' rx='17' ry='40'/%3E%3Cellipse cx='50' cy='50' rx='32' ry='40'/%3E%3Cpath d='M10 50h80M15 30h70M15 70h70'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.13;
  pointer-events: none;
}
.site-footer::after {
  content: "";
  position: absolute;
  top: var(--sp-5);
  right: var(--container-pad);
  width: 4.125rem;
  height: 1.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 18' fill='none' stroke='%23f5efe6' stroke-width='1.5'%3E%3Crect x='1' y='1' width='16' height='16'/%3E%3Cline x1='5' y1='13' x2='13' y2='13'/%3E%3Crect x='25' y='1' width='16' height='16'/%3E%3Crect x='29' y='5' width='8' height='8'/%3E%3Crect x='49' y='1' width='16' height='16'/%3E%3Cpath d='m53 5 8 8m0-8-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.75;
  pointer-events: none;
}
.site-footer .container { position: relative; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
@media (max-width: 767px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
.site-footer__brand h3 {
  font-family: var(--font-heading);
  color: var(--color-cream);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}
.site-footer__brand p { color: rgba(255, 255, 255, 0.88); max-width: 32ch; font-size: var(--fs-sm); }
.site-footer__column h4 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-cream);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.site-footer__column ul { list-style: none; padding: 0; }
.site-footer__column li { margin-bottom: var(--sp-2); }
.site-footer__column a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.site-footer__column a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.site-footer__author-bio {
  border-top: 1px solid rgba(245, 239, 230, 0.3);
  padding-top: var(--sp-6);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.88);
}
.site-footer__author-bio img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
}
.site-footer__author-bio p { max-width: 56ch; }
.site-footer__author-bio a { color: #fff; } /* globales Link-Orange waere auf Terracotta unsichtbar */

.site-footer__legal {
  border-top: 1px solid rgba(245, 239, 230, 0.3);
  padding-top: var(--sp-4);
  margin-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.88);
}
.site-footer__legal ul { list-style: none; padding: 0; display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.site-footer__legal a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.site-footer__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}
@media (max-width: 767px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.hero__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.hero__title {
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-5);
}
.hero__title em {
  font-style: normal;
  color: var(--color-primary);
}
.hero__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-6);
  max-width: 50ch;
}
.hero__ctas {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.hero__visual img,
.hero__visual svg {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Homepage-Hero: Retro-Ebenen-Stage (Hintergrund / Typo / Frau, hero-layers.js).
   Die drei Layer sind deckungsgleiche 1920x1080-Exporte derselben Canva-Komposition,
   daher exakt uebereinander gestapelt. Der Bildgrund ist identisch mit
   --color-cream, die Stage-Kanten sind dadurch unsichtbar — bei begrenzter
   Viewport-Hoehe schrumpft die Stage proportional statt zu beschneiden. */
.hero--home {
  position: relative;
  /* Stage rutscht ganz unter den (initial transparenten) Sticky-Header:
     Header schwebt ueber der Komposition statt als eigene Zeile drueber. */
  margin-top: calc(-1 * 4.5rem);
  padding-top: 0;
  padding-bottom: var(--sp-10);
  background: var(--color-cream);
}
.hero-stage {
  position: relative;
  width: min(100%, calc(100vh * 16 / 9));
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero-stage__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.hero-stage__layer picture,
.hero-stage__layer img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Mobil: eigene 940x788-Exporte derselben Komposition (engerer Ausschnitt),
   Austausch via <picture> am Site-Breakpoint — Stage-Ratio wechselt mit. */
@media (max-width: 767px) {
  /* Gesamte Stage mobil ein Stueck runter (rutscht sonst zu weit unter den Header) */
  .hero--home { padding-top: 3rem; }
  .hero-stage {
    width: min(100%, calc(100vh * 940 / 788));
    aspect-ratio: 940 / 788;
  }
}
/* Anti-Flash: Typo + Frau starten unsichtbar, hero-layers.js blendet ein.
   Gleiche Absicherung wie beim Hero-Entrance: nur mit JS (js-ready) und
   Opt-in (body.fx); reduced-motion zeigt sofort alles. */
.js-ready body.fx .hero-stage__typo img,
.js-ready body.fx .hero-stage__woman img,
.js-ready body.fx .hero-stage__maus img {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .js-ready body.fx .hero-stage__typo img,
  .js-ready body.fx .hero-stage__woman img,
  .js-ready body.fx .hero-stage__maus img {
    opacity: 1;
    visibility: visible;
  }
}
/* Slow-Network-Fallback (Burgherstelle-Lektion: Hero nie hart hinter dem
   JS-Stack gaten): laeuft die Entrance nicht binnen 3s (Inline-Timeout im
   <head> setzt .fx-fallback), zeigt CSS alles — die Scripts ueberspringen
   die Entrance dann, statt sie verspaetet nachzuholen. */
.js-ready.fx-fallback body.fx .hero-stage__typo img,
.js-ready.fx-fallback body.fx .hero-stage__woman img,
.js-ready.fx-fallback body.fx .hero-stage__maus img {
  opacity: 1;
  visibility: visible;
}
.js-ready.fx-fallback body.fx .hero .hero__kicker,
.js-ready.fx-fallback body.fx .hero .hero__title,
.js-ready.fx-fallback body.fx .hero .hero__lead,
.js-ready.fx-fallback body.fx .hero .hero__ctas {
  opacity: 1;
}
.hero--home .container { position: relative; z-index: 1; margin-top: var(--sp-10); }
.hero--home .hero__inner { grid-template-columns: 1fr; }
/* Text unter der Stage zentriert (Muster wie .hero--solo): passt zur mittigen Komposition. */
.hero--home .hero__content { max-width: 54rem; margin-inline: auto; text-align: center; }
.hero--home .hero__ctas { justify-content: center; }
.hero--home .hero__title {
  font-size: clamp(2.375rem, 6.6vw, 5.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.hero--home .hero__lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); max-width: 46ch; margin-inline: auto; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-primary-dark); color: var(--color-white); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-border); }

/* Hero-Ghost-Button: dezente Brand-Border (#cb5a33) statt neutralem Grau */
.hero .btn--ghost { border-color: var(--color-primary); }

.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); }

/* ============================================================
   CTA-BLOCK
   ============================================================ */

.cta-block {
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 13px -6px rgba(43, 38, 48, 0.08), 0 20px 31px 3px rgba(43, 38, 48, 0.09), 0 8px 20px 7px rgba(43, 38, 48, 0.02);
  padding: var(--sp-10);
  border-radius: var(--radius-lg);
  text-align: center;
  margin: var(--sp-10) 0;
}
.cta-block h2 {
  color: var(--color-ink);
  margin-bottom: var(--sp-4);
}
.cta-block p {
  color: var(--color-text-muted);
  margin: 0 auto var(--sp-6);
  max-width: 56ch;
}
.cta-block .btn--primary { background: var(--color-primary); }
.cta-block .btn--primary:hover { background: var(--color-primary-dark); }
.cta-block .btn--ghost {
  background: transparent;
  border-color: var(--color-text-muted);
  color: var(--color-ink);
}
.cta-block .btn--ghost:hover { background: rgba(43, 38, 48, 0.06); color: var(--color-ink); }

/* CTA im Ultrawide-Monitor (Startseite, ab Tablet): cta-block fuellt exakt das
   transparente Screen-Loch (L 0,97 / R 0,86 / T 0,91 / B 17,81 — width-relativ,
   Element haelt die Bild-Ratio 1752x1051), der Standfuss steht auf der
   Footer-Oberkante (Section ohne Bottom-Padding + Footer margin-top 0 inline).
   Mobil: normaler weisser Block, Monitor waere zu flach fuer den Inhalt. */
/* Showcase direkt ueber dem Footer (Startseite): weiss-terracotta Band als
   pures CSS (skaliert auf jede Breite, 0 KB; Band-Orange = Footer-Orange ->
   nahtloser Uebergang), Geraete-Ensemble slidet per Parallax darueber
   (footer-showcase.js). Ersetzt die Monitor+Handy-CTA-Variante; deren
   Styles bleiben unten als Alternative erhalten. */
.footer-showcase {
  padding: var(--sp-12) 0 0;
  /* Band: Creme oben (= Seitengrund, nahtlos), Terracotta-Streifen unten —
     von unten bemessen (min: mobil nicht hoeher als ~42 % der Section),
     damit die CTA-Zeile daruber nie ins Orange rutscht. */
  background: linear-gradient(to top, var(--color-primary) 0, var(--color-primary) min(22rem, 42%), var(--color-cream) min(22rem, 42%));
  overflow: hidden;
  margin-bottom: -1px; /* schliesst Sub-Pixel-Naht zum Footer (gleiche Farbe -> unsichtbar) */
}
.footer-showcase__cta {
  text-align: center;
  margin-bottom: var(--sp-10);
}
.footer-showcase__cta h2 { font-size: clamp(var(--fs-2xl), 3.4vw, 2.75rem); }
.footer-showcase__cta p {
  max-width: 56ch;
  margin: var(--sp-4) auto var(--sp-6);
  color: var(--color-text-muted);
}
.footer-showcase__devices {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  will-change: transform;
}
/* Mobil: Orange-Streifen an der Geraetebild-Hoehe bemessen (Bild ~90vw breit
   x 0,594 Ratio -> Streifen ~ halbe Bildhoehe), sonst reicht er bis in den
   CTA-Text, weil die Section durch den Textumbruch hoch wird. */
@media (max-width: 767px) {
  .footer-showcase {
    background: linear-gradient(to top, var(--color-primary) 0, var(--color-primary) 27vw, var(--color-cream) 27vw);
  }
}

.cta-monitor-section {
  position: relative;
  padding-bottom: 0; /* Monitor-Fuss + Handy-Arm stehen auf der Footer-Kante */
}
/* Hand mit Handy (CTA-Botschaft baked-in): Desktop dekorativ in der rechten
   Ecke neben dem Monitor; Mobil ERSETZT das Bild den weissen Block (Text
   steckt im Handy-Screen) -> deshalb als Link auf /kontakt/, sonst waere der
   CTA mobil nicht klickbar. Arm steht jeweils auf der Footer-Kante. */
.cta-phone-link { display: block; position: relative; }
.cta-phone-link picture { display: block; }
.cta-phone {
  display: block;
  width: 100%;
  height: auto;
}
/* Hotspot ueber dem eingebackenen Button: dunkelt bei Hover/Druck nach wie
   der echte btn--primary (Orange -> primary-dark). Position pixel-vermessen,
   pro Bildvariante eigene Koordinaten (unten in den Media Queries). */
.cta-phone-btnfx {
  position: absolute;
  border-radius: 999px;
  background: rgba(43, 38, 48, 0);
  transition: background var(--transition-fast);
}
.cta-phone-link:hover .cta-phone-btnfx,
.cta-phone-link:active .cta-phone-btnfx { background: rgba(43, 38, 48, 0.16); }
.cta-phone-link:focus-visible .cta-phone-btnfx {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}
@media (min-width: 768px) {
  .cta-phone-link {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(14rem, 22vw, 23rem);
    z-index: 1;
  }
  /* Button-Position im Desktop-Bild (cta-phone.webp, 800x855) */
  .cta-phone-btnfx { left: 9.5%; top: 41.4%; width: 24.8%; height: 8.4%; }
}
@media (max-width: 767px) {
  .cta-monitor .cta-block { display: none; }
  .cta-phone-link {
    width: min(100%, 30rem);
    margin: 0 0 0 auto;
  }
  /* Button-Position im Mobil-Bild (cta-phone-mobil.webp, 507x588) */
  .cta-phone-btnfx { left: 14.6%; top: 59.2%; width: 38.7%; height: 12.2%; }
}
@media (min-width: 768px) {
  .cta-monitor {
    aspect-ratio: 1752 / 1051;
    background: url("/assets/img/cta-monitor.webp") center / 100% 100% no-repeat;
    padding: 0.91% 0.86% 17.81% 0.97%;
  }
  .cta-monitor .cta-block {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   CARD + GRIDS
   ============================================================ */

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

@media (max-width: 1023px) {
  .grid--cols-3, .grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid--cols-2, .grid--cols-3, .grid--cols-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  position: relative;
  isolation: isolate;
  transition: border-color 280ms ease-out, transform 280ms cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 280ms ease-out;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* Soft radial glow behind card on hover — premium 2026 polish */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 0%, rgba(203, 90, 51, 0.10), transparent 65%);
  opacity: 0;
  transition: opacity 350ms ease-out;
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) {
  .card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .card:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card::before { transition: none; }
  .card:hover { transform: none; }
}
.card__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
}
/* Branchen-Icons als Grafiken (statt Stroke-SVG): detailreicher -> etwas groesser */
img.card__icon {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
}
.card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
}
.card__lead {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}
.card__link {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.card__link::after { content: '→'; transition: transform var(--transition-fast); }
.card:hover .card__link::after { transform: translateX(4px); }

.card--coaches:hover     { border-color: var(--niche-coaches); }
.card--handwerker:hover  { border-color: var(--niche-handwerker); }
.card--friseure:hover    { border-color: var(--niche-friseure); }
.card--restaurants:hover { border-color: var(--niche-restaurants); }

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-link:focus-visible .card {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-4) 0;
}
.faq__item:first-child { border-top: 1px solid var(--color-border); }

.faq__question {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: '+';
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  color: var(--color-primary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.faq__item[open] .faq__question::after { content: '−'; }

.faq__answer {
  padding-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}
.faq__answer > p:not(:last-child) { margin-bottom: var(--sp-3); }

/* ============================================================
   PRICING
   ============================================================ */

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
@media (max-width: 1023px) { .pricing { grid-template-columns: 1fr; max-width: 28rem; margin-left: auto; margin-right: auto; } }

.pricing__tier {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing__tier--featured {
  border-color: var(--color-primary);
  border-width: 2px;
}
.pricing__tier--featured::before {
  content: 'Beliebt';
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pricing__name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.pricing__price {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.pricing__price-suffix {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}
.pricing__tagline {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-5);
  min-height: 2.5rem;
}
.pricing__features {
  list-style: none;
  padding: 0;
  margin-bottom: var(--sp-6);
  flex: 1;
}
.pricing__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  padding: var(--sp-2) 0;
}
.pricing__features li::before {
  content: '✓';
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.pricing__cta { width: 100%; justify-content: center; }

/* ============================================================
   PROCESS (4 Steps)
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-left: 0;
  position: relative;
  --fill: 0;
}
.process::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
  border-radius: 2px;
}
.process::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
}

.process__step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  padding-top: 30px;
  z-index: 1;
}
.process__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 3px solid var(--color-border);
  box-sizing: border-box;
  z-index: 2;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.process__step.lit::before {
  border-color: var(--color-primary);
  transform: scale(1.12);
}
/* Komet-Kopf: leuchtende Kugel reitet auf der Füll-Kante (process-line.js erzeugt das Element). */
.process__comet {
  position: absolute;
  top: 8px;
  left: calc(var(--fill, 0) * 100%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 5px rgba(203, 90, 51, 0.14), 0 0 18px 5px rgba(203, 90, 51, 0.55);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 4;
}
@media (prefers-reduced-motion: reduce) {
  .process__comet { display: none; }
}
.process__num {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .process {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-left: 0;
  }
  .process::before,
  .process::after {
    top: 7px;
    bottom: 7px;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .process::after {
    transform: scaleY(var(--fill, 0));
    transform-origin: top center;
  }
  .process__step {
    padding: 0 0 0 40px;
  }
  .process__step::before {
    top: 1px;
    left: 0;
  }
  .process__comet {
    top: calc(7px + var(--fill, 0) * (100% - 14px));
    left: 7px;
  }
}
.process__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
}
.process__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) { .testimonials { grid-template-columns: 1fr; max-width: 36rem; margin-left: auto; margin-right: auto; } }

.testimonial {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.testimonial__quote {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--color-ink);
  line-height: var(--lh-snug);
  flex: 1;
}
.testimonial__quote::before { content: '" '; color: var(--color-primary); }
.testimonial__quote::after  { content: ' "'; color: var(--color-primary); }
.testimonial__author {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-3);
}
.testimonial__photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-ink);
}
.testimonial__company {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   SHOWCASE-SLIDER — Branchen-Design-Beispiele (showcase-slider.js)
   ============================================================ */
.showcase-slider { position: relative; margin-top: var(--sp-6); /* war var(--sp-7): Token existiert nicht, margin fiel auf 0 */ }
.showcase-track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-3) 0 var(--sp-2);
}
.showcase-track::-webkit-scrollbar { display: none; }
.showcase-slide {
  flex: 0 0 86%;
  max-width: 820px;
  scroll-snap-align: center;
  margin: 0;
}
@media (min-width: 768px) { .showcase-slide { flex-basis: 72%; } }
/* Dimming nur wenn JS laeuft (No-JS: alle Slides voll sichtbar, kein Dauer-50%). */
.js-ready .showcase-slide { opacity: 0.5; transition: opacity 0.45s ease; }
.js-ready .showcase-slide.is-active { opacity: 1; }
.showcase-frame {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(34, 35, 58, 0.14);
}
.showcase-frame::before {
  content: "";
  display: block;
  height: 32px;
  background: #f3ede5;
  border-bottom: 1px solid var(--color-border);
  background-image:
    radial-gradient(circle 4px at 20px 16px, #e0826b 98%, transparent 100%),
    radial-gradient(circle 4px at 38px 16px, #e7b24d 98%, transparent 100%),
    radial-gradient(circle 4px at 56px 16px, #74b681 98%, transparent 100%);
}
.showcase-frame img { display: block; width: 100%; height: auto; }
.showcase-caption {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.showcase-caption strong { color: var(--color-ink); margin-right: var(--sp-2); }
.showcase-caption a { color: var(--color-primary); font-weight: var(--fw-medium); white-space: nowrap; }
.showcase-nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: grid; place-items: center;
}
.showcase-nav:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
.showcase-nav--prev { left: -6px; }
.showcase-nav--next { right: -6px; }
@media (max-width: 767px) { .showcase-nav { display: none; } }
.showcase-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.showcase-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}
.showcase-dot.is-active { background: var(--color-primary); width: 26px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .showcase-track { scroll-behavior: auto; }
  .js-ready .showcase-slide { transition: none; }
}
/* Gepinnter Horizontal-Scroll (Desktop, via gsap.matchMedia in showcase-slider.js) */
.showcase-slider.is-pinned { overflow: hidden; }
.showcase-slider.is-pinned .showcase-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.showcase-slider.is-pinned .showcase-nav { display: none; }
/* Bildhoehe an den Viewport binden, damit die gepinnte Section komplett reinpasst. */
.showcase-slider.is-pinned .showcase-frame img { height: 44vh; object-fit: cover; object-position: top; }

/* ============================================================
   FORM
   ============================================================ */

.form {
  display: grid;
  gap: var(--sp-4);
  max-width: 36rem;
  margin: 0;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.form__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}
.form__required {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form__textarea { resize: vertical; min-height: 8rem; }
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(203, 90, 51, 0.15);
}
.form__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.form__honeypot {
  position: absolute;
  left: -9999px;
}

/* ============================================================
   REFERENCES — Project Card Layout
   ============================================================ */

.ref-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
.ref-header img {
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .ref-header { flex-direction: column; align-items: flex-start; }
}

.ref-screenshots {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-4);
  align-items: start;
  margin-bottom: var(--sp-4);
}
@media (max-width: 767px) {
  .ref-screenshots { grid-template-columns: 1fr; }
}
.ref-screenshots__caption {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  margin: var(--sp-2) 0 0;
  text-align: center;
}
.ref-screenshots img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   ROTATING WORD (Hero animation, ported from shop-atelier)
   ============================================================ */

.rotating-word {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3em;
  vertical-align: -0.26em;
  color: var(--color-primary);
  font-style: normal;
  transition: width 600ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.rotating-word__item {
  display: block;
  white-space: nowrap;
}
.rotating-word.is-init .rotating-word__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: left;
  opacity: 0;
  transform: translateY(100%);
}
.rotating-word.is-init .rotating-word__item.is-active {
  animation: rotating-word-in 650ms cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.rotating-word.is-init .rotating-word__item.is-leaving {
  animation: rotating-word-out 550ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes rotating-word-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rotating-word-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .rotating-word.is-init .rotating-word__item {
    animation: none !important;
  }
  .rotating-word.is-init .rotating-word__item:first-child {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   SCROLL-REVEAL — Sections fade-in + slide-up on viewport-entry
   ============================================================ */

/* Only animate when JS is ready (graceful degradation for no-JS). */
.js-ready main > section:not(.hero) {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 750ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready main > section.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* .showcase nie verstecken/transformieren (wird gepinnt; Transform wuerde Pinning brechen).
   Gleiche Spezifitaet wie .is-revealed (0,2,2), danach platziert -> gewinnt fuer .showcase. */
.js-ready main > section.showcase {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-ready main > section:not(.hero) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   IMAGE-REVEAL — Mockup + Hero-Foto subtle scale+fade
   ============================================================ */

.js-ready .hero__visual picture,
.js-ready .ref-screenshots picture {
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready .hero__visual.is-revealed picture,
.js-ready .ref-screenshots.is-revealed picture {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .hero__visual picture,
  .js-ready .ref-screenshots picture {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   HERO-ENTRANCE (GSAP, hero-reveal.js) — nur Opt-in-Seiten (body.fx)
   Hidden-State js-ready-gated -> No-JS zeigt alles; reduced-motion zeigt alles.
   ============================================================ */
.js-ready body.fx .hero .hero__kicker,
.js-ready body.fx .hero .hero__title,
.js-ready body.fx .hero .hero__lead,
.js-ready body.fx .hero .hero__ctas {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .js-ready body.fx .hero .hero__kicker,
  .js-ready body.fx .hero .hero__title,
  .js-ready body.fx .hero .hero__lead,
  .js-ready body.fx .hero .hero__ctas {
    opacity: 1;
  }
}

/* ============================================================
   MOCKUP-FRAME — Geräterahmen für Mockups (reines CSS, 0 JS)
   ============================================================ */
.hero__visual:has(.mockup-frame) { perspective: 1400px; }

.mockup-frame {
  display: block;
  padding: clamp(0.4rem, 1vw, 0.7rem);
  background: var(--color-ink);
  border-radius: calc(var(--radius-lg) + 0.5rem);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.10),
    0 14px 30px rgba(0, 0, 0, 0.16),
    0 40px 64px rgba(0, 0, 0, 0.12);
}
.mockup-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* Tilt wird per GSAP/ScrollTrigger gesteuert (mockup-tilt.js) — scroll-gekoppelt.
   CSS-Transition für gerahmte Mockups aussetzen, damit GSAP die Transforms pro Frame ruckelfrei treibt. */
.js-ready .hero__visual .mockup-frame {
  opacity: 1;
  transition: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .hero__visual .mockup-frame { transform: none; }
}

/* Hero ohne Seiten-Mockup: Text zentriert; Mockup bekommt eine eigene Showcase-Section darunter */
.hero--solo .hero__inner { grid-template-columns: 1fr; }
.hero--solo .hero__content { max-width: 52rem; margin: 0 auto; text-align: center; }
.hero--solo .hero__lead { margin-left: auto; margin-right: auto; }
.hero--solo .hero__ctas { justify-content: center; }

.mockup-showcase { padding-top: 0; padding-bottom: var(--sp-12); }
.mockup-showcase .container { perspective: 1400px; text-align: center; }
.mockup-showcase .mockup-frame { max-width: 56rem; margin: 0 auto; transition: none; will-change: transform; }
.mockup-showcase__caption {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  margin-top: var(--sp-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: none;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .mockup-showcase .mockup-frame { transform: none; }
}

/* Sohub-Stil Karten (POC): größere Rundung + sanftes Hover-Lift. Reveal via cards-reveal.js. */
.cards-showcase .card {
  border-radius: 1.5rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cards-showcase .card-link:hover .card,
.cards-showcase .card-link:focus-visible .card {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

/* Retro-Monitor-Karten (Startseite "Warum Festpreis"): Inhalt sitzt wie auf
   einem alten Bildschirm — Fensterleiste mit Min/Max/Close-Icons im Stil der
   Hero-Komposition + dezente Scanlines. Markup-Zusatz: .card__chrome (aria-hidden). */
.card--crt {
  overflow: hidden;
  border: 1.5px solid var(--color-ink);
  padding-top: calc(2.5rem + var(--sp-6));
  background:
    repeating-linear-gradient(0deg, rgba(43, 38, 48, 0.03) 0 1px, transparent 1px 4px),
    var(--color-white);
}
.card--crt .card__chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--sp-4);
  background: var(--color-cream);
  border-bottom: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}
.card--crt .card__chrome svg { display: block; height: 0.875rem; width: auto; }

/* Test-Variante: echter Roehrenmonitor (Foto mit transparentem Screen) als
   Kartenrahmen, Inhalt sitzt im Screen-Loch. Loch im Bild (820x886): links 9 %,
   rechts 9,2 %, oben 10,1 %, unten 32,9 % — alle Paddings width-relativ, das
   Element haelt die Bild-Ratio, dadurch stimmen die Prozente in jeder Groesse. */
.card--monitor {
  border: none;
  background: url("/assets/img/card-monitor.webp") center / 100% 100% no-repeat;
  aspect-ratio: 820 / 886;
  align-self: start;
  padding: 13% 12% 36% 12%;
  justify-content: center;
  gap: var(--sp-2);
}
.card--monitor .card__chrome { display: none; }
.card--monitor .card__icon { width: 2rem; height: 2rem; }
.card--monitor .card__lead { font-size: var(--fs-xs); }
/* Monitore sind Deko, keine Links: Karten-Hover (Lift/Schatten/Glow) abschalten. */
.card--monitor:hover {
  transform: none;
  box-shadow: none;
}
.card--monitor:hover::before { opacity: 0; }
/* Daten-Linie hinter den Monitoren: gestricheltes "Kabel" 1->2->3->4, darauf
   laeuft der orange Puls (monitor-link.js). Liegt im Grid absolut hinter den
   Karten; einspaltig (mobil) ergibt der 2x2-Pfad keinen Sinn -> aus. */
.monitor-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.monitor-link path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.monitor-link__base {
  stroke: var(--color-ink);
  stroke-width: 1.5;
  stroke-dasharray: 2 4;
  opacity: 0.18;
}
.monitor-link__pulse {
  stroke: var(--color-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  visibility: hidden; /* monitor-link.js setzt Dash-Pattern und blendet ein */
}
/* Zwei Pfad-Sets: __d = 2x2-S-Kurve (Desktop/Tablet), __m = vertikaler Schwung
   (einspaltig). CSS schaltet die Sichtbarkeit, gsap.matchMedia() die Animation. */
.monitor-link__m { display: none; }
@media (max-width: 639px) {
  .monitor-link__d { display: none; }
  .monitor-link__m { display: block; }
}

/* ============================================================
   PRICING-PANEL (Startseite): Terracotta-Band hinter einem verbundenen
   weissen Panel, 3 Plaene mit Haarlinien getrennt. Alte .pricing-Styles
   bleiben unangetastet (nutzt /preise weiter).
   ============================================================ */
/* Band als eigener Block: waechst mit dem Inhalt (kein Fixhoehen-Verrutschen
   bei Textumbruch), Panel zieht sich per negativem Margin 8rem ins Band hoch. */
.pricing-band { padding-top: 0; }
.pricing-band__head {
  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding-top: var(--sp-12);
  padding-bottom: calc(8rem + var(--sp-8));
}
/* Ueberschrift + Intro stehen auf dem Band -> Creme statt Ink/Orange */
.pricing-band__head h2 { color: var(--color-cream); }
.pricing-band__head h2 .u { color: var(--color-cream); }

.pricing-panel {
  margin-top: -8rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 13px -6px rgba(43, 38, 48, 0.08), 0 20px 31px 3px rgba(43, 38, 48, 0.09), 0 8px 20px 7px rgba(43, 38, 48, 0.02);
  display: flex;
  flex-direction: column;
}
.pricing-panel__plan {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}
.pricing-panel__plan:last-child { border-bottom: none; }
@media (min-width: 900px) {
  .pricing-panel { flex-direction: row; }
  .pricing-panel__plan { border-bottom: none; border-right: 1px solid var(--color-border); }
  .pricing-panel__plan:last-child { border-right: none; }
}
.pricing-panel__img {
  display: block;
  width: 10rem;
  height: auto;
  margin: 0 auto var(--sp-4);
}
.pricing-panel__name {
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.pricing-panel__price {
  margin: var(--sp-3) auto 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}
.pricing-panel__price-suffix {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.pricing-panel__tagline {
  margin: var(--sp-2) auto 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.pricing-panel__features {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0;
}
.pricing-panel__features li {
  border-top: 1px solid var(--color-border);
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}
.pricing-panel__features li:last-child { border-bottom: 1px solid var(--color-border); }
.pricing-panel__cta { margin-top: auto; align-self: center; }

/* ============================================================
   ANIMATED UNDERLINES — Body-text-Links inside <p>/<blockquote>/<details>
   ============================================================ */

.js-ready main p a:not(.btn):not(.card__link):not(.card-link),
.js-ready main blockquote a:not(.btn),
.js-ready main details a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: left calc(100% - 0.05em);
  padding-bottom: 1px;
  transition: background-size 380ms cubic-bezier(0.65, 0, 0.35, 1);
}
.js-ready main p a:not(.btn):not(.card__link):not(.card-link):hover,
.js-ready main blockquote a:not(.btn):hover,
.js-ready main details a:not(.btn):hover,
.js-ready main p a:not(.btn):not(.card__link):not(.card-link):focus-visible,
.js-ready main blockquote a:not(.btn):focus-visible,
.js-ready main details a:not(.btn):focus-visible {
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  .js-ready main p a:not(.btn):not(.card__link):not(.card-link),
  .js-ready main blockquote a:not(.btn),
  .js-ready main details a:not(.btn) {
    text-decoration: underline;
    background-image: none;
    transition: none;
  }
}