@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/fraunces.woff2') format('woff2'); }
  @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/space-grotesk.woff2') format('woff2'); }


  :root {
    --black: #070a10;
    --surface: #10141d;
    --surface-raised: #161b26;
    --navy-line: #1f2a44;
    --navy-deep: #16213e;
    --accent: #4a72c4;
    --accent-bright: #7fa0e0;
    --violet: #6d5ec8;
    --white: #f4f6fa;
    --grey: #9aa2b3;
    --grey-dim: #6b7284;
    --radius: 3px;
    --max-width: 1120px;
    --content-width: 700px;
    --ease-out: cubic-bezier(.16,1,.3,1);
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--black);
    color: var(--grey);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
    animation: page-in 0.6s var(--ease-out);
  }

  @keyframes page-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* subtle animated dot-grid texture, fixed behind all content */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(244,246,250,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    animation: grid-pan 70s linear infinite;
    pointer-events: none;
    z-index: -1;
  }

  @keyframes grid-pan {
    from { background-position: 0 0; }
    to { background-position: 320px 320px; }
  }

  h1, h2, h3, .display {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--white);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
  }

  h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 600; }
  h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
  h3 { font-size: 1.25rem; font-weight: 600; }

  p { margin: 0 0 1.1em; }
  a { color: var(--accent-bright); text-decoration: none; }
  a:hover { color: var(--white); }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
  }

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

  .wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 28px;
  }

  .prose { max-width: var(--content-width); }
  .prose p { color: var(--grey); }
  .prose h2 { margin-top: 1.6em; }

  /* ---------- Scroll progress bar ---------- */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--violet), var(--accent-bright));
    background-size: 200% 100%;
    animation: progress-shimmer 4s linear infinite;
    z-index: 200;
  }
  @keyframes progress-shimmer {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
  }

  /* ---------- Header ---------- */
  /* Der Weichzeichner sitzt bewusst auf einem ::before-Layer statt direkt
     auf header.site-header: "backdrop-filter" auf dem Header selbst würde
     ihn zum "containing block" für seine fixed-positionierten Kinder machen
     (das mobile Menü) und dessen Fixed-Positionierung auf die 76px-Header-
     höhe statt auf das Browserfenster beziehen. */
  header.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--navy-line);
    transition: border-color 0.35s ease;
  }
  header.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(7, 10, 16, 0.7);
    backdrop-filter: blur(10px);
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }
  header.site-header.is-scrolled::before {
    background: rgba(7, 10, 16, 0.94);
    box-shadow: 0 12px 34px rgba(0,0,0,0.35);
  }

  .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
    min-height: 18px;
  }
  .brand svg { color: var(--white); overflow: visible; flex-shrink: 0; }
  .brand .lockup-divider {
    display: inline-block;
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg, transparent, var(--navy-line) 20%, var(--navy-line) 80%, transparent);
    flex-shrink: 0;
  }
  .brand .lockup-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--white);
    white-space: nowrap;
  }
  .brand .lockup-name .lockup-amp {
    color: var(--accent-bright);
    font-style: italic;
    padding: 0 2px;
  }
  .brand .lockup-name .lockup-suffix {
    color: var(--grey-dim);
    font-size: 0.85em;
    margin-left: 6px;
  }
  @media (max-width: 480px) {
    .brand { gap: 8px; }
    .brand .lockup-name { font-size: 0.88rem; }
  }
  @media (max-width: 380px) {
    .brand .lockup-name .lockup-suffix { display: none; }
  }

  nav.main-nav { display: flex; gap: 56px; }

  nav.main-nav a {
    position: relative;
    color: var(--grey);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    padding: 6px 0;
    transition: color 0.25s ease, letter-spacing 0.25s ease, transform 0.3s ease, opacity 0.3s ease;
  }
  nav.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent-bright), var(--violet));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-out);
  }
  nav.main-nav a:hover,
  nav.main-nav a[aria-current="page"] {
    color: var(--white);
    letter-spacing: 0.03em;
  }
  nav.main-nav a:hover::after,
  nav.main-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* Kundenbereich im Header: am PC nur die goldene Krone */
  nav.main-nav { align-items: center; }
  nav.main-nav a.nav-portal {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 38px; height: 38px; padding: 0; margin-left: -18px;
    border-radius: 50%; border: 1px solid rgba(212,178,106,.28); background: rgba(212,178,106,.06);
    color: #d4b26a; letter-spacing: 0;
    transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  }
  nav.main-nav a.nav-portal::after { display: none; }
  nav.main-nav a.nav-portal:hover { color: #ecd29a; border-color: rgba(212,178,106,.6); background: rgba(212,178,106,.12); box-shadow: 0 0 0 6px rgba(212,178,106,.06); letter-spacing: 0; }
  nav.main-nav a.nav-portal svg { transition: transform .35s cubic-bezier(.16,1,.3,1); }
  nav.main-nav a.nav-portal:hover svg { transform: translateY(-1px) rotate(-6deg); }
  .nav-portal-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .nav-toggle {
    display: none;
    position: relative;
  }

  @media (max-width: 880px) {
    nav.main-nav {
      position: fixed;
      inset: 76px 0 0 0;
      background: var(--black);
      flex-direction: column;
      gap: 0;
      padding: 12px 28px;
      transform: translateY(-8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    nav.main-nav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    nav.main-nav a {
      padding: 16px 0;
      border-bottom: 1px solid var(--navy-line);
      opacity: 0;
      transform: translateX(-14px);
    }
    nav.main-nav.open a { opacity: 1; transform: translateX(0); }
    nav.main-nav.open a:nth-child(1) { transition-delay: .06s; }
    nav.main-nav.open a:nth-child(2) { transition-delay: .11s; }
    nav.main-nav.open a:nth-child(3) { transition-delay: .16s; }
    nav.main-nav.open a:nth-child(4) { transition-delay: .21s; }
    nav.main-nav.open a:nth-child(5) { transition-delay: .26s; }
    nav.main-nav { align-items: stretch; }
    /* Handy-Menü: Kundenbereich als goldene Pille wie im Footer */
    nav.main-nav a.nav-portal {
      align-self: flex-start; width: auto; height: auto; margin: 26px 0 0;
      padding: 10px 18px 10px 15px; border-radius: 999px; border-bottom: 1px solid rgba(212,178,106,.28);
      font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
    }
    nav.main-nav a.nav-portal:hover { letter-spacing: 0.16em; }
    nav.main-nav.open a.nav-portal { transition-delay: .31s; }
    .nav-portal-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .nav-toggle {
      display: block;
      background: none;
      border: none;
      color: var(--white);
      font-size: 1.6rem;
      cursor: pointer;
    }
  }

  /* ---------- Hero ----------
     Kein echtes Videomaterial vorhanden -> stattdessen ein "kinematografisches"
     Gefühl über volle Bildschirmhöhe, geschichtete Motion-Layer (ruhige Aurora
     + Film-Korn) simuliert. */
  .hero {
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: 130px 0 90px;
    position: relative;
    overflow: hidden;
  }
  .hero .wrap { position: relative; z-index: 2; width: 100%; }

  /* Film-Korn-Textur über dem Hero, sehr dezent (reines SVG-Data-URI, kein
     externer Request) -> gibt der Fläche die "Kamera-Textur" statt platt zu
     wirken. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Ruhiger, dezenter Aurora-Hintergrund: wenige weiche geblurrte Flächen in
     der Marken-Blaupalette, die extrem langsam sanft driften. Bewusst
     zurückhaltend in Farbzahl und Sättigung -- kein "Regenbogen"-Effekt. */
  .aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transition: transform 0.4s ease-out;
  }
  .aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.4;
    animation: drift 26s ease-in-out infinite alternate;
  }
  .aurora span:nth-child(1) {
    width: 46vw;
    height: 46vw;
    top: -14%;
    right: -10%;
    background: var(--accent);
  }
  .aurora span:nth-child(2) {
    width: 36vw;
    height: 36vw;
    bottom: -16%;
    left: -8%;
    background: var(--navy-deep);
    animation-delay: -9s;
  }
  .aurora span:nth-child(3) {
    width: 26vw;
    height: 26vw;
    top: 36%;
    left: 30%;
    background: var(--accent-bright);
    opacity: 0.22;
    animation-delay: -17s;
  }
  @keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-3%, 4%) scale(1.08); }
  }

  /* ---------- Scroll-Cue am unteren Hero-Rand ---------- */
  .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--grey-dim);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 1;
    transition: opacity 0.4s ease;
  }
  .scroll-cue.is-hidden { opacity: 0; }
  .scroll-cue-line {
    position: relative;
    width: 1px;
    height: 42px;
    overflow: hidden;
    background: rgba(244,246,250,0.12);
  }
  .scroll-cue-line::after {
    content: "";
    position: absolute;
    inset: -100% 0 auto 0;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--accent-bright));
    animation: cue-drop 1.9s ease-in-out infinite;
  }
  @keyframes cue-drop {
    to { inset: 100% 0 auto 0; }
  }
  /* Auf schmalen Screens wird die Hero-Headline mehrzeilig und die CTA-Buttons
     brechen auf zwei Zeilen um -> dann reicht der Platz nicht mehr für den
     Scroll-Hinweis, ohne die Buttons zu überlappen. Dort blenden wir ihn aus,
     Scrollen ist auf Mobile ohnehin die erwartete Geste. */
  @media (max-width: 640px) {
    .scroll-cue { display: none; }
  }

  /* ---------- Back-to-top ---------- */
  .back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--navy-line);
    background: var(--surface);
    color: var(--white);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out), border-color 0.2s ease, color 0.2s ease;
    z-index: 100;
  }
  .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .back-to-top:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

  .eyebrow {
    color: var(--accent-bright);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
  }
  .hero h1 { max-width: 900px; font-size: clamp(2.6rem, 6.2vw, 5.2rem); letter-spacing: -0.02em; }
  .hero .subline { max-width: 560px; font-size: 1.15rem; margin-top: 22px; }
  .hero-actions { display: flex; gap: 16px; margin-top: 42px; flex-wrap: wrap; }

  /* word-by-word headline reveal (populated by JS for [data-split] elements) */
  .split-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    animation: word-in 0.8s var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  @keyframes word-in {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ---------- Buttons ---------- */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    will-change: transform;
    transition: transform 0.25s var(--ease-out), background 0.2s ease, border-color 0.2s ease;
  }
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.35), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .btn:hover::before { opacity: 1; }
  .btn-primary { background: var(--white); color: var(--black); }
  .btn-primary:hover { background: var(--accent-bright); color: var(--black); }
  .btn-secondary {
    /* explizit transparent setzen: ohne das fällt ein <button> (anders als
       ein <a>) sonst auf den grauen "buttonface"-Browser-Default zurück */
    background: transparent;
    border-color: var(--navy-line);
    color: var(--white);
  }
  .btn-secondary:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
  .btn-secondary::before {
    background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(127,160,224,0.3), transparent 70%);
  }
  .btn:active { transform: scale(0.97) !important; }

  /* ---------- Sections ---------- */
  section { padding: 76px 0; }
  section.tight { padding: 50px 0; }
  .section-border-top { border-top: 1px solid var(--navy-line); }

  /* Dezente Tönung im Wechsel zwischen Sektionen -> jede Seite bekommt einen
     spürbaren Rhythmus beim Scrollen, wie einzelne "Slides" statt einer
     durchgehend gleichen Fläche. */
  .section-alt {
    background: linear-gradient(180deg, rgba(74,114,196,0.055), transparent 65%);
  }

  /* ---------- Reveal-on-scroll system ----------
     Blur+Move+Fade kombiniert -> wirkt spürbar "kinematografischer" als ein
     reines Fade. Etwas längere Dauer/Delay-Streuung für ruhigeres Tempo. */
  [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(7px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out), filter 0.85s var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 100ms);
  }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
  [data-reveal="left"] { transform: translateX(-30px); }
  [data-reveal="left"].is-visible { transform: translateX(0); }
  [data-reveal="right"] { transform: translateX(30px); }
  [data-reveal="right"].is-visible { transform: translateX(0); }
  [data-reveal="scale"] { transform: scale(0.92); }
  [data-reveal="scale"].is-visible { transform: scale(1); }

  /* ---------- Study case cards ---------- */
  .case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
    margin-top: 40px;
  }
  .case-card {
    position: relative;
    border: 1px solid var(--navy-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    will-change: transform;
    transition: border-color 0.25s ease, transform 0.2s var(--ease-out), box-shadow 0.3s ease;
  }
  .case-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(127,160,224,0.16), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .case-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(6,10,20,0.4);
  }
  .case-card:hover::before { opacity: 1; }
  .case-card .case-image {
    aspect-ratio: 16 / 10;
    background: var(--navy-deep) center/cover no-repeat;
    overflow: hidden;
    position: relative;
  }
  .case-card .case-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-position: inherit;
    background-size: cover;
    transform: scale(1);
    transition: transform 0.5s var(--ease-out);
  }
  img.case-image { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 0.5s var(--ease-out); }
  .case-card:hover img.case-image { transform: scale(1.04); }
  .case-empty { max-width: 680px; margin: 0 auto; text-align: center; padding: 48px 32px; border: 1px solid var(--navy-line); border-radius: 26px; background: var(--surface); }
  .case-empty h3 { font-size: 1.5rem; margin: 14px 0 12px; }
  .case-empty p { margin: 0 auto 10px; max-width: 52ch; }
  .case-empty .hero-actions { justify-content: center; }
  .case-empty-badge { display: inline-block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); border: 1px solid var(--navy-line); border-radius: 999px; padding: 5px 14px; }
  .case-card .case-body { padding: 22px 24px 26px; position: relative; z-index: 1; }
  .case-card h3 { margin-bottom: 8px; }
  .case-card p { font-size: 0.94rem; margin-bottom: 14px; }
  .case-card .case-link { font-size: 0.88rem; display: inline-flex; align-items: center; gap: 4px; }
  .case-card .case-link span { display: inline-block; transition: transform 0.25s var(--ease-out); }
  .case-card .case-link:hover span { transform: translate(3px, -2px); }

  /* ---------- Startseite (neu) ---------- */
  .home-hero { min-height: 92vh; }
  .hh-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
  .hh-title { font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: 1.1; margin: 0; }
  .hh-prefix { display: block; }
  .hh-rotator { display: inline-block; position: relative; padding: .04em .06em .1em 0; margin-top: .02em; perspective: 600px; }
  .hh-word { display: inline-block; font-style: italic; padding-right: .08em; background: linear-gradient(120deg, #b6cbf5, #8f7ff0 75%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .42s var(--ease-out), opacity .42s ease, filter .42s ease; }
  .hh-word.is-out { transform: translateY(-.45em) rotateX(40deg); opacity: 0; filter: blur(6px); }
  .hh-word.is-in { transform: translateY(.45em) rotateX(-40deg); opacity: 0; filter: blur(6px); transition: none; }
  .hh-rotator::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .7; }

  /* Browser, der sich selbst aufbaut */
  .hb { position: relative; border-radius: 18px; border: 1px solid var(--navy-line); background: var(--surface); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(127,160,224,.06); overflow: hidden; transform: perspective(1400px) rotateY(-8deg) rotateX(4deg); transition: transform .6s var(--ease-out); }
  .hh-visual:hover .hb { transform: perspective(1400px) rotateY(-3deg) rotateX(2deg); }
  .hb-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--navy-line); background: rgba(7,10,16,.5); }
  .hb-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3550; }
  .hb-url { margin-left: 12px; font-size: .72rem; color: var(--grey-dim); background: rgba(255,255,255,.04); border-radius: 999px; padding: 3px 12px; }
  .hb-page { padding: 18px; display: grid; gap: 14px; aspect-ratio: 16 / 11; align-content: start; }
  .hb-nav { display: flex; gap: 10px; align-items: center; }
  .hb-nav span { height: 7px; width: 34px; border-radius: 4px; background: rgba(255,255,255,.1); }
  .hb-nav .hb-logo { width: 22px; height: 22px; border-radius: 7px; margin-right: auto; background: linear-gradient(135deg, var(--accent), var(--violet)); }
  .hb-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
  .hb-hero-text { display: grid; gap: 9px; }
  .hb-l1 { height: 13px; width: 90%; border-radius: 5px; background: var(--white); }
  .hb-l2 { height: 8px; width: 70%; border-radius: 4px; background: rgba(255,255,255,.25); }
  .hb-btn { height: 20px; width: 46%; border-radius: 999px; background: var(--accent); margin-top: 4px; }
  .hb-img { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #2b3d6b, #16213e); }
  .hb-sun { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; top: 18%; right: 16%; background: #ecd29a; }
  .hb-hill { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; border-radius: 50%; background: #4a72c4; }
  .hb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hb-cards span { height: 54px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--navy-line); }
  /* Aufbau-Animation: Linien -> Flächen -> Farbe, endlos */
  .hb .hb-nav span, .hb .hb-l1, .hb .hb-l2, .hb .hb-btn, .hb .hb-img, .hb .hb-cards span { animation: hbBuild 9s var(--ease-out) infinite both; }
  .hb .hb-l1 { animation-delay: .3s; } .hb .hb-l2 { animation-delay: .5s; } .hb .hb-btn { animation-delay: .8s; }
  .hb .hb-img { animation-name: hbImg; animation-delay: 1.1s; }
  .hb .hb-cards span:nth-child(1) { animation-delay: 1.6s; } .hb .hb-cards span:nth-child(2) { animation-delay: 1.8s; } .hb .hb-cards span:nth-child(3) { animation-delay: 2s; }
  @keyframes hbBuild { 0% { opacity: 0; transform: scaleX(.2); transform-origin: left; } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes hbImg { 0% { opacity: 0; clip-path: inset(0 100% 0 0 round 12px); filter: grayscale(1); } 10% { opacity: 1; clip-path: inset(0 0 0 0 round 12px); filter: grayscale(1); } 22%, 88% { filter: none; opacity: 1; clip-path: inset(0 0 0 0 round 12px); } 100% { opacity: 0; } }
  .hb-cursor { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 6px rgba(127,160,224,.2); top: 30%; left: 30%; animation: hbCursor 9s ease-in-out infinite; }
  @keyframes hbCursor { 0% { top: 70%; left: 20%; } 15% { top: 30%; left: 30%; } 30% { top: 44%; left: 18%; } 34% { transform: scale(.7); } 38% { transform: none; } 60% { top: 40%; left: 72%; } 85% { top: 80%; left: 50%; } 100% { top: 70%; left: 20%; } }

  /* Ablauf mit mitlaufendem Gerät */
  .section-head p { max-width: 58ch; margin: 12px auto 0; }
  .pr-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
  .pr-device-wrap { position: sticky; top: 120px; display: grid; justify-items: center; gap: 18px; }
  .pr-device { position: relative; width: min(300px, 80%); aspect-ratio: 9 / 18.5; border-radius: 42px; border: 10px solid #1a2133; background: var(--black); box-shadow: 0 50px 90px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 1px var(--navy-line); overflow: hidden; }
  .pr-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 34%; height: 20px; border-radius: 999px; background: #1a2133; z-index: 3; }
  .dv-screen { position: absolute; inset: 0; padding: 46px 18px 18px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: scale(.96) translateY(10px); transition: opacity .5s ease, transform .6s var(--ease-out); }
  .dv-screen.is-on { opacity: 1; transform: none; }
  .pr-dots { display: flex; gap: 8px; }
  .pr-dots i { width: 28px; height: 3px; border-radius: 3px; background: var(--navy-line); transition: background .4s; }
  .pr-dots i.is-on { background: var(--accent-bright); box-shadow: 0 0 8px rgba(127,160,224,.6); }
  /* Skizze */
  .dv-sketch { background-image: linear-gradient(rgba(127,160,224,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(127,160,224,.07) 1px, transparent 1px); background-size: 16px 16px; }
  .sk-box { border: 1.5px dashed rgba(127,160,224,.55); border-radius: 10px; }
  .sk-a { height: 28px; width: 40%; } .sk-b { height: 34%; } .sk-c { height: 22%; margin-top: auto; }
  .sk-line { height: 8px; width: 80%; border-radius: 4px; background: rgba(127,160,224,.3); } .sk-line.short { width: 52%; }
  .sk-note { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--accent-bright); font-size: .82rem; transform: rotate(-3deg); }
  /* Design */
  .dv-design { justify-content: center; align-items: flex-start; }
  .ds-swatch { width: 46px; height: 46px; border-radius: 50%; display: inline-block; }
  .dv-design .s1 { background: #d4b26a; } .dv-design .s2 { background: #4a72c4; margin-top: -12px; } .dv-design .s3 { background: #f4f6fa; margin-top: -12px; }
  .dv-design .ds-swatch { box-shadow: 0 0 0 3px var(--black); }
  .ds-type { font-family: 'Fraunces', Georgia, serif; font-size: 4rem; color: var(--white); line-height: 1; margin-top: 8px; }
  .ds-line { height: 9px; width: 85%; border-radius: 4px; background: rgba(255,255,255,.18); } .ds-line.short { width: 60%; }
  /* Umsetzung */
  .bd-hero { height: 34%; border-radius: 14px; background: linear-gradient(160deg, #2b3d6b, #4a72c4); }
  .bd-row { height: 9px; border-radius: 4px; background: rgba(255,255,255,.22); width: 88%; } .bd-row.short { width: 58%; }
  .bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bd-grid i { height: 46px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--navy-line); }
  .bd-progress { margin-top: auto; height: 6px; border-radius: 6px; background: var(--navy-line); overflow: hidden; }
  .bd-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8924a, #ecd29a); }
  .dv-build.is-on .bd-progress i { animation: bdFill 2.4s var(--ease-out) .2s forwards; }
  @keyframes bdFill { to { width: 78%; } }
  /* Live */
  .dv-live { justify-content: center; align-items: center; text-align: center; }
  .dvl-dot { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8ff0cd, #1fae80); box-shadow: 0 0 30px rgba(63,215,166,.5); }
  .dvl-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; color: var(--white); }
  .dvl-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; width: 85%; margin-top: 10px; }
  .dvl-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ecd29a, rgba(184,146,74,.5)); transform-origin: bottom; transform: scaleY(0); transition: transform .8s cubic-bezier(.2,1.25,.3,1); }
  .dv-live.is-on .dvl-bars i { transform: scaleY(1); }
  .dv-live.is-on .dvl-bars i:nth-child(2) { transition-delay: .06s; } .dv-live.is-on .dvl-bars i:nth-child(3) { transition-delay: .12s; } .dv-live.is-on .dvl-bars i:nth-child(4) { transition-delay: .18s; } .dv-live.is-on .dvl-bars i:nth-child(5) { transition-delay: .24s; } .dv-live.is-on .dvl-bars i:nth-child(6) { transition-delay: .3s; } .dv-live.is-on .dvl-bars i:nth-child(7) { transition-delay: .36s; }
  .dvl-cap { font-size: .72rem; color: var(--grey-dim); letter-spacing: .1em; text-transform: uppercase; }
  .pr-steps { list-style: none; margin: 0; padding: 8vh 0 18vh; display: grid; gap: 30vh; }
  .pr-step { position: relative; padding-left: 70px; opacity: .32; transition: opacity .5s ease, transform .5s var(--ease-out); transform: translateX(10px); }
  .pr-step.is-active, .pr-step.is-past { opacity: 1; transform: none; }
  .pr-step.is-past { opacity: .55; }
  .pr-num { position: absolute; left: 0; top: -4px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: .84rem; font-weight: 600; color: var(--grey); border: 1px solid var(--navy-line); background: var(--black); transition: all .4s ease; }
  .pr-step.is-active .pr-num { color: var(--white); border-color: var(--accent-bright); background: var(--navy-deep); box-shadow: 0 0 0 6px rgba(127,160,224,.12), 0 0 22px rgba(127,160,224,.4); }
  .pr-step h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 10px; }
  .pr-step p { font-size: 1.04rem; line-height: 1.7; max-width: 44ch; margin: 0; }

  /* ---------- Kundenbereich-Diashow ---------- */
  .ps-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
  .ps-copy, .ps-visual { min-width: 0; }
  .ps-copy h2 { margin: 10px 0 14px; }
  .ps-copy > p { margin-bottom: 26px; }
  .ps-navs { display: grid; gap: 6px; }
  .ps-nav { position: relative; display: grid; gap: 3px; text-align: left; padding: 12px 14px 12px 18px; border: 1px solid transparent; border-radius: 14px; background: none; font: inherit; color: var(--grey-dim); cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
  .ps-nav b { color: var(--grey); font-weight: 600; font-size: .98rem; transition: color .3s; }
  .ps-nav > span:last-child { font-size: .86rem; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease-out), opacity .35s; }
  .ps-nav-bar { position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--navy-line); overflow: hidden; }
  .ps-nav-bar i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: #d4b26a; }
  .ps-nav .ps-nav-bar i { width: 100% !important; height: var(--fill, 0%); }
  .ps-nav.is-on { background: rgba(212,178,106,.06); border-color: rgba(212,178,106,.22); }
  .ps-nav.is-on b { color: var(--white); }
  .ps-nav.is-on > span:last-child { max-height: 60px; opacity: 1; }
  .ps-nav:hover b { color: var(--white); }
  .ps-stage { position: relative; aspect-ratio: 16 / 12.5; }
  .ps-glow { position: absolute; inset: 10% 5% -6%; background: radial-gradient(closest-side, rgba(212,178,106,.18), transparent 70%); filter: blur(30px); z-index: -1; }
  .ps-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .55s ease, transform .7s var(--ease-out); pointer-events: none; }
  .ps-slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .ps-app { height: 100%; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: radial-gradient(120% 80% at 0% 0%, rgba(212,178,106,.10), transparent 55%), #0b0f17; border: 1px solid rgba(212,178,106,.3); box-shadow: 0 50px 100px -40px rgba(0,0,0,.85); }
  .ps-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #1f2a44; color: #d4b26a; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
  .ps-crown { font-size: .9rem; letter-spacing: 0; }
  .ps-tab { margin-left: 8px; color: var(--white); letter-spacing: .04em; text-transform: none; font-size: .8rem; background: rgba(212,178,106,.12); border: 1px solid rgba(212,178,106,.3); padding: 3px 10px; border-radius: 999px; }
  .ps-user { margin-left: auto; color: var(--grey-dim); letter-spacing: .02em; text-transform: none; font-size: .76rem; }
  .ps-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .ps-card { border-radius: 18px; border: 1px solid #1f2a44; background: #131925; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .ps-card small { color: var(--grey-dim); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
  .ps-grid2 { flex: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; min-height: 0; }
  .ps-grid2--rev { grid-template-columns: .75fr 1.25fr; }
  .ps-muted { color: var(--grey-dim); font-size: .78rem; }
  .ps-pill { white-space: nowrap; width: fit-content; font-size: .72rem; color: #ecd29a; border: 1px solid rgba(212,178,106,.4); background: rgba(212,178,106,.1); border-radius: 999px; padding: 3px 10px; }
  /* Fortschritt */
  .ps-ring-card { align-items: center; justify-content: center; text-align: center; }
  .ps-ring { position: relative; width: 70%; max-width: 160px; aspect-ratio: 1; display: grid; place-items: center; }
  .ps-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
  .ps-ring .trk { fill: none; stroke: #1f2a44; stroke-width: 7; }
  .ps-ring .bar { fill: none; stroke: #d4b26a; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(212,178,106,.5)); }
  .ps-ring strong { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 2.2rem; color: var(--white); line-height: 1; }
  .ps-ring strong small { font-size: .45em; color: var(--grey); margin-left: 2px; letter-spacing: 0; text-transform: none; }
  .ps-timeline { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
  .ps-timeline li { position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 7px 0; }
  .ps-timeline li::before { content: ""; position: absolute; left: 10px; top: 28px; bottom: -6px; width: 2px; background: #1f2a44; }
  .ps-timeline li:last-child::before { display: none; }
  .ps-timeline li.done::before { background: rgba(212,178,106,.6); }
  .ps-timeline i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #2a3550; display: grid; place-items: center; color: #15110a; background: #0b0f17; }
  .ps-timeline i svg { width: 13px; height: 13px; }
  .ps-timeline li.done i { background: #d4b26a; border-color: #d4b26a; }
  .ps-timeline li.active i { border-color: #ecd29a; box-shadow: 0 0 0 4px rgba(212,178,106,.15); animation: psPulse 1.8s ease-in-out infinite; }
  @keyframes dlTurn { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }
  @keyframes psPulse { 50% { box-shadow: 0 0 0 7px rgba(212,178,106,.05); } }
  .ps-timeline b { color: var(--white); font-weight: 600; font-size: .86rem; }
  .ps-timeline li.open b { color: var(--grey); }
  .ps-timeline span { color: var(--grey-dim); font-size: .72rem; }
  .ps-timeline li.active span { color: #ecd29a; }
  /* To-dos & Dokumente */
  .ps-todo { display: flex; align-items: center; gap: 10px; color: var(--grey); font-size: .84rem; padding: 7px 0; border-top: 1px solid #1a2233; }
  .ps-todo i { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #2a3550; display: grid; place-items: center; color: #15110a; flex: 0 0 auto; }
  .ps-todo i svg { width: 12px; height: 12px; opacity: 0; transition: opacity .3s .5s; }
  .ps-todo.done span { text-decoration: line-through; color: var(--grey-dim); }
  .ps-slide.is-on .ps-todo.done i { background: #d4b26a; border-color: #d4b26a; transition: background .4s .3s, border-color .4s .3s; }
  .ps-slide.is-on .ps-todo.done i svg { opacity: 1; }
  .ps-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
  .ps-table th { text-align: left; color: var(--grey-dim); font-weight: 500; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; padding: 0 6px 8px 0; border-bottom: 1px solid #1f2a44; }
  .ps-table td { padding: 9px 6px 9px 0; border-bottom: 1px solid #1a2233; color: var(--grey); white-space: nowrap; }
  .ps-table td:first-child { color: var(--white); white-space: normal; display: flex; align-items: center; gap: 8px; }
  .ps-table tr { opacity: 0; transform: translateX(8px); transition: opacity .4s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * 90ms + .2s); }
  .ps-slide.is-on .ps-table tr { opacity: 1; transform: none; }
  .ps-file { width: 16px; height: 16px; color: #d4b26a; flex: 0 0 auto; }
  .ps-dlc { width: 26px; color: #d4b26a; }
  .ps-dlc svg { width: 16px; height: 16px; }
  /* Fristen */
  .ps-card.ps-dl { flex: 1; border-color: rgba(229,140,122,.35); background: radial-gradient(70% 90% at 100% 0%, rgba(229,140,122,.12), transparent 60%), #131925; gap: 12px; justify-content: center; }
  .ps-dl-head { display: flex; align-items: center; gap: 12px; }
  .ps-dl-head > div { display: grid; flex: 1; }
  .ps-dl-head b { color: var(--white); font-size: .95rem; }
  .ps-dl-head span { color: var(--grey-dim); font-size: .74rem; }
  .ps-dl-head em { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e58c7a; border: 1px solid rgba(229,140,122,.4); border-radius: 999px; padding: 4px 10px; }
  .ps-dl-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #e58c7a; background: rgba(229,140,122,.1); border: 1px solid rgba(229,140,122,.3); }
  .ps-dl-ico svg { width: 18px; height: 18px; animation: dlTurn 3.2s cubic-bezier(.7,0,.3,1) infinite; }
  .ps-dl-count { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .ps-dl-count strong { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 3.6rem; line-height: .9; color: #e58c7a; text-shadow: 0 0 26px rgba(229,140,122,.35); }
  .ps-dl-count span { color: var(--grey); }
  .ps-dl-count code { flex-basis: 100%; color: #e58c7a; font-family: inherit; letter-spacing: .08em; font-size: .86rem; }
  .ps-dl-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
  .ps-dl-grid span { height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: .66rem; font-weight: 600; color: var(--white); background: rgba(229,140,122,.1); border: 1px solid rgba(229,140,122,.3); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * 40ms + .15s); }
  .ps-slide.is-on .ps-dl-grid span { opacity: 1; transform: none; }
  .ps-dl-grid span.past { background: transparent; border-color: rgba(255,255,255,.07); }
  .ps-dl-grid span.now { background: rgba(229,140,122,.25); border-color: #e58c7a; box-shadow: 0 0 14px rgba(229,140,122,.4); }
  .ps-dl-grid span.last { background: rgba(229,140,122,.32); }
  .ps-dl-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
  .ps-dl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(229,140,122,.4), #e58c7a); transition: width 1.4s var(--ease-out) .3s; }
  .ps-slide.is-on .ps-dl-bar i { width: 75%; }
  .ps-dl-btn { text-align: center; padding: 10px; border-radius: 12px; background: rgba(229,140,122,.9); color: #0a0d14; font-weight: 600; font-size: .86rem; }
  /* Statistik */
  .ps-card.ps-stats { flex: 1; gap: 14px; }
  .ps-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ps-kpis > div { display: grid; gap: 5px; padding: 11px; border-radius: 14px; border: 1px solid #1f2a44; background: rgba(7,10,16,.4); min-width: 0; }
  .ps-kpis small { font-size: .56rem; }
  .ps-kpis strong { font-family: 'Fraunces', Georgia, serif; font-weight: 400; color: var(--white); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
  .ps-kpis em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; width: fit-content; font-size: .66rem; font-weight: 600; color: #3fd7a6; background: rgba(63,215,166,.1); border-radius: 999px; padding: 2px 7px; }
  .ps-kpis em svg { width: 11px; height: 11px; }
  .ps-kpi-online span { display: inline-flex; align-items: center; gap: 7px; color: #7fd4c8; font-size: .9rem; }
  .ps-kpi-online i { width: 9px; height: 9px; border-radius: 50%; background: #3fd7a6; box-shadow: 0 0 10px #3fd7a6; }
  .ps-bars { flex: 1; display: flex; align-items: flex-end; gap: 3px; min-height: 110px; border-bottom: 1px solid #1f2a44; background: repeating-linear-gradient(to top, transparent 0 calc(33.3% - 1px), rgba(255,255,255,.04) calc(33.3% - 1px) 33.3%); }
  .ps-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #ecd29a, rgba(184,146,74,.5)); transform-origin: bottom; }
  .ps-axis { display: flex; justify-content: space-between; font-size: .62rem; color: var(--grey-dim); letter-spacing: .08em; text-transform: uppercase; }
  /* Nachrichten */
  .ps-card.ps-chat { flex: 1; gap: 12px; }
  .ps-card.ps-files { flex: 1; gap: 12px; }
  .ps-drop { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 16px 12px; border-radius: 14px; border: 1.5px dashed rgba(212,178,106,.45); background: rgba(212,178,106,.05); font-size: .74rem; color: var(--grey-dim); }
  .ps-drop b { color: var(--white); font-weight: 500; font-size: .84rem; }
  .ps-drop-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #15110a; background: linear-gradient(140deg, #ecd29a, #d4b26a); margin-bottom: 4px; }
  .ps-drop-ic svg { width: 18px; height: 18px; }
  .ps-flist { display: grid; gap: 8px; }
  .ps-fitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(7,10,16,.45); border: 1px solid #1f2a44; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .25s + .2s); }
  .ps-slide.is-on .ps-fitem { opacity: 1; transform: none; }
  .ps-fic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #d4b26a; background: rgba(212,178,106,.12); }
  .ps-fic svg { width: 16px; height: 16px; }
  .ps-fmeta { flex: 1; min-width: 0; display: grid; gap: 5px; }
  .ps-fmeta b { color: var(--white); font-weight: 500; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ps-fmeta em { height: 4px; border-radius: 4px; background: #1f2a44; overflow: hidden; }
  .ps-fmeta em i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d4b26a, #ecd29a); transition: width 1.2s var(--ease-out); transition-delay: calc(var(--i) * .25s + .45s); }
  .ps-slide.is-on .ps-fmeta em i { width: var(--p); }
  .ps-fst { flex: none; font-size: .68rem; color: var(--grey-dim); }
  .ps-fitem:not(:last-child) .ps-fst { color: #7fd3a0; }
  .ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .ps-chips span { font-size: .72rem; color: var(--grey); border: 1px solid #1f2a44; border-radius: 999px; padding: 5px 10px; }
  .ps-chips span.on { color: #ecd29a; border-color: #d4b26a; background: rgba(212,178,106,.12); }
  .ps-msgs { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
  .ps-msg { max-width: 78%; padding: 9px 12px; border-radius: 14px; font-size: .8rem; line-height: 1.45; color: var(--white); display: grid; gap: 3px; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .5s + .2s); }
  .ps-slide.is-on .ps-msg { opacity: 1; transform: none; }
  .ps-msg b { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-dim); }
  .ps-msg span { font-size: .64rem; color: var(--grey-dim); justify-self: end; }
  .ps-msg.me { align-self: flex-end; background: rgba(212,178,106,.14); border: 1px solid rgba(212,178,106,.3); border-bottom-right-radius: 4px; }
  .ps-msg.them { align-self: flex-start; background: #1a2233; border: 1px solid #243052; border-bottom-left-radius: 4px; }
  .ps-arrived, .ps-mail { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .5s + .2s); }
  .ps-slide.is-on .ps-arrived, .ps-slide.is-on .ps-mail { opacity: 1; transform: none; }
  .ps-arrived { align-self: flex-end; display: flex; align-items: center; gap: 6px; font-size: .7rem; color: #7fd3a0; }
  .ps-arrived svg { width: 14px; height: 14px; }
  .ps-mail { align-self: stretch; display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; padding: 11px 13px; border-radius: 12px; background: #141c2c; border: 1px solid #243052; }
  .ps-mail-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(127,160,224,.14); color: #9db7ea; }
  .ps-mail-ico svg { width: 18px; height: 18px; }
  .ps-mail-txt { display: grid; gap: 2px; min-width: 0; font-size: .8rem; line-height: 1.45; }
  .ps-mail-txt b { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-dim); font-weight: 600; }
  .ps-mail-txt strong { color: var(--white); font-weight: 600; }
  .ps-mail-txt em { font-style: normal; color: var(--grey); }
  .ps-compose { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 9px 9px 14px; border-radius: 12px; border: 1px solid #1f2a44; color: var(--grey-dim); font-size: .8rem; }
  .ps-compose em { font-style: normal; background: #d4b26a; color: #15110a; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .78rem; }

  /* ---------- Vorher / Nachher ---------- */
  .cx { max-width: 1040px; margin: 0 auto; }
  .cx-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; border: 1px solid var(--navy-line); box-shadow: 0 50px 100px -40px rgba(0,0,0,.85); container-type: inline-size; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
  .cx-layer { position: absolute; inset: 0; isolation: isolate; }
  .cx-a { z-index: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .cx-b { z-index: 1; clip-path: inset(0 0 0 var(--pos)); }
  .cx-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; transform: translateX(-1px); background: #fff; box-shadow: 0 0 22px rgba(255,255,255,.5); pointer-events: none; z-index: 4; }
  .cx-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #0a0d14; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,.12); }
  .cx-handle svg { width: 22px; height: 22px; }
  .cx-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 5; }
  .cx-tag { position: absolute; bottom: 14px; z-index: 3; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
  .cx-tag-a { left: 14px; background: rgba(217,90,70,.92); color: #fff; }
  .cx-tag-b { right: 14px; background: rgba(63,215,166,.92); color: #062a1f; }
  /* Marker mit Hinweisen */
  .cx-mark { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: inline-flex; align-items: center; gap: .6cqw; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: max(10px, 1.15cqw); font-weight: 600; padding: .45cqw 1cqw .45cqw .6cqw; border-radius: 999px; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.95); transition: opacity .4s, transform .5s var(--ease-out); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
  .cx-mark::before { content: ""; width: .8cqw; height: .8cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .35cqw rgba(255,255,255,.25); animation: cxPing 1.8s ease-out infinite; }
  @keyframes cxPing { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 100% { box-shadow: 0 0 0 1cqw rgba(255,255,255,0); } }
  .cx-mark--bad { background: #d95a46; color: #fff; }
  .cx-mark--good { background: #1fae80; color: #fff; }
  .cx.is-in .cx-mark { opacity: 1; transform: none; }
  .cx.is-in .cx-mark:nth-of-type(2) { transition-delay: .15s; } .cx.is-in .cx-mark:nth-of-type(3) { transition-delay: .3s; } .cx.is-in .cx-mark:nth-of-type(4) { transition-delay: .45s; } .cx.is-in .cx-mark:nth-of-type(5) { transition-delay: .6s; }
  /* Alte Seite (~2014) */
  .ox { position: absolute; inset: 0; background: #d9d9d9; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; }
  .ox-bar, .nx-bar { display: flex; align-items: center; gap: 1cqw; padding: .9cqw 1.4cqw; font-size: 1.1cqw; }
  .ox-bar { background: #ececec; border-bottom: 1px solid #bbb; color: #555; }
  .ox-warn { display: inline-flex; align-items: center; gap: .4cqw; color: #c0392b; font-weight: 600; }
  .ox-warn svg, .nx-lock svg { width: 1.3cqw; height: 1.3cqw; }
  .ox-url { color: #666; }
  .ox-page { position: relative; flex: 1; margin: 0 auto; width: 76%; background: #fff; box-shadow: 0 0 1cqw rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
  .ox-head { display: flex; justify-content: space-between; align-items: center; padding: 1.4cqw 1.8cqw; background: linear-gradient(#7b4a2a, #4e2c16); color: #ffe9b0; }
  .ox-logo { font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 2.6cqw; font-weight: bold; text-shadow: .15cqw .15cqw 0 #000; display: grid; }
  .ox-logo small { font-family: Arial, sans-serif; font-size: 1cqw; font-weight: normal; color: #f0d79a; text-shadow: none; }
  .ox-counter { font-family: "Courier New", monospace; font-size: 1cqw; background: #000; color: #0f0; padding: .3cqw .6cqw; border: .15cqw inset #666; }
  .ox-nav { display: flex; gap: .2cqw; background: #e6dcc8; padding: .4cqw .6cqw; border-bottom: .2cqw solid #b49a6a; }
  .ox-nav span { font-size: 1cqw; padding: .4cqw .9cqw; background: linear-gradient(#fff, #ddd); border: 1px solid #aaa; color: #333; }
  .ox-nav span.on { background: linear-gradient(#ffd27a, #e8a83c); font-weight: bold; }
  .ox-main { display: grid; grid-template-columns: 1fr 24%; gap: 1.6cqw; padding: 1.6cqw 1.8cqw; flex: 1; }
  .ox-col h4 { font-family: "Times New Roman", serif; color: #7b4a2a; font-size: 1.6cqw; margin: 1cqw 0 .6cqw; text-decoration: underline; }
  .ox-col p { font-size: .95cqw; line-height: 1.35; color: #333; margin: 0 0 .8cqw; text-align: justify; }
  .ox-news { background: #ffffcc; border: 1px dashed #cc9; padding: .5cqw; }
  .ox-broken { height: 9cqw; display: flex; align-items: center; justify-content: center; gap: .6cqw; border: 1px solid #ccc; background: #f4f4f4; color: #999; font-size: 1cqw; }
  .ox-broken span { font-size: 1.6cqw; }
  .ox-side { display: flex; flex-direction: column; gap: .3cqw; font-size: .95cqw; background: #f3eee2; border: 1px solid #d8ccae; padding: .9cqw; color: #333; }
  .ox-side b { margin-top: .5cqw; color: #7b4a2a; } .ox-side u { color: #00e; }
  .ox-foot { font-size: .85cqw; color: #888; text-align: center; padding: .7cqw; border-top: 1px solid #ddd; }
  .ox-cookie { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(30,30,30,.92); color: #fff; font-size: 1.05cqw; padding: 1.6cqw 2cqw; display: flex; align-items: center; gap: 1cqw; flex-wrap: wrap; }
  .ox-cookie span { background: #888; padding: .3cqw 1cqw; border-radius: .2cqw; }
  .ox-cookie span:first-of-type { background: #4caf50; }
  .ox-spinner { position: absolute; top: 34%; left: 46%; display: grid; justify-items: center; gap: .5cqw; color: #999; font-size: 1cqw; }
  .ox-spinner i { width: 3cqw; height: 3cqw; border-radius: 50%; border: .35cqw solid #ddd; border-top-color: #999; animation: oxSpin 1s linear infinite; }
  @keyframes oxSpin { to { transform: rotate(360deg); } }
  /* Neue Seite */
  .nx { position: absolute; inset: 0; display: flex; flex-direction: column; background: #120f0b; font-family: 'Space Grotesk', system-ui, sans-serif; }
  .nx-bar { background: #1b1712; border-bottom: 1px solid #2c251c; color: #bfb39f; }
  .nx-lock { color: #3fd7a6; display: inline-flex; }
  .nx-url { background: rgba(255,255,255,.05); padding: .3cqw 1.2cqw; border-radius: 99px; }
  .nx-page { flex: 1; display: flex; flex-direction: column; padding: 1.8cqw 3.4cqw 2.4cqw; gap: 2.2cqw; background: radial-gradient(60% 80% at 85% 20%, rgba(212,178,106,.22), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(140,80,40,.25), transparent 60%); }
  .nx-nav { display: flex; align-items: center; gap: 2.4cqw; font-size: 1.15cqw; color: rgba(244,239,230,.7); }
  .nx-nav b { font-family: 'Fraunces', Georgia, serif; font-size: 1.9cqw; color: #f8f1e5; margin-right: auto; font-weight: 600; }
  .nx-nav em { font-style: normal; color: #15110a; background: #ecd29a; padding: .7cqw 1.6cqw; border-radius: 99px; font-weight: 600; }
  .nx-hero { flex: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3cqw; align-items: center; }
  .nx-open { display: inline-flex; align-items: center; gap: .8cqw; font-size: 1.1cqw; color: #7fe3bf; background: rgba(63,215,166,.1); border: 1px solid rgba(63,215,166,.35); padding: .5cqw 1.2cqw; border-radius: 99px; }
  .nx-open i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #3fd7a6; box-shadow: 0 0 1cqw #3fd7a6; }
  .nx-copy h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 5.2cqw; line-height: 1.02; color: #fff; margin: 1.6cqw 0 1.2cqw; letter-spacing: -.02em; }
  .nx-copy h4 span { font-style: italic; color: #ecd29a; }
  .nx-copy p { font-size: 1.35cqw; color: rgba(244,239,230,.7); margin: 0 0 2cqw; max-width: 34ch; }
  .nx-ctas { display: flex; align-items: center; gap: 2cqw; flex-wrap: wrap; }
  .nx-ctas em { font-style: normal; background: #f8f1e5; color: #15110a; padding: 1cqw 2.2cqw; border-radius: 99px; font-weight: 600; font-size: 1.25cqw; }
  .nx-rating { display: inline-flex; align-items: center; gap: .2cqw; color: rgba(244,239,230,.75); font-size: 1.1cqw; }
  .nx-rating svg { width: 1.3cqw; height: 1.3cqw; color: #f5c04a; }
  .nx-rating b { color: #fff; margin: 0 .4cqw 0 .6cqw; }
  .nx-visual { position: relative; aspect-ratio: 1; border-radius: 3cqw; background: radial-gradient(circle at 50% 40%, #6b4527 0, #3a2516 55%, #1d140d 100%); box-shadow: inset 0 0 0 1px rgba(236,210,154,.25), 0 3cqw 6cqw -2cqw rgba(0,0,0,.7); overflow: hidden; }
  .nx-plate { position: absolute; left: 14%; right: 14%; bottom: 16%; height: 16%; border-radius: 50%; background: radial-gradient(#f2e8d8, #c8b89d); box-shadow: 0 1.5cqw 2cqw rgba(0,0,0,.5); }
  .nx-cup { position: absolute; left: 30%; right: 30%; bottom: 22%; height: 34%; border-radius: 0 0 45% 45% / 0 0 60% 60%; background: linear-gradient(90deg, #fbf6ee, #e6dccb); box-shadow: inset 0 1.2cqw 0 #8a5a2b; }
  .nx-cup::after { content: ""; position: absolute; right: -22%; top: 18%; width: 26%; height: 44%; border: 1cqw solid #ece3d3; border-left: 0; border-radius: 0 50% 50% 0; }
  .nx-cup i { position: absolute; bottom: 110%; width: .6cqw; height: 7cqw; border-radius: 99px; background: linear-gradient(transparent, rgba(255,255,255,.35)); filter: blur(.25cqw); animation: nxSteam 3s ease-in-out infinite; }
  .nx-cup .s1 { left: 30%; } .nx-cup .s2 { left: 50%; animation-delay: -1s; height: 9cqw; } .nx-cup .s3 { left: 70%; animation-delay: -2s; }
  @keyframes nxSteam { 0% { transform: translateY(1cqw) scaleY(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-2cqw) scaleY(1.1) translateX(1cqw); opacity: 0; } }
  .nx-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
  .nx-menu > div { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; padding: 1.3cqw 1.6cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.04); border: 1px solid rgba(236,210,154,.18); font-size: 1.15cqw; color: rgba(244,239,230,.8); }
  .nx-menu b { color: #ecd29a; font-weight: 600; }
  .nx-map { position: relative; overflow: hidden; background: repeating-linear-gradient(35deg, rgba(255,255,255,.04) 0 .3cqw, transparent .3cqw 2.4cqw), rgba(63,215,166,.06) !important; }
  .nx-map i { width: 1.4cqw; height: 1.4cqw; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #e58c7a; flex: 0 0 auto; }
  /* Kennzahlen unter dem Regler */
  .cx-scores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; margin-top: 26px; }
  .cx-side { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--navy-line); background: var(--surface); }
  .cx-side--a { border-color: rgba(217,90,70,.35); }
  .cx-side--b { border-color: rgba(63,215,166,.35); }
  .cx-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .cx-side li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--grey); border-bottom: 1px dashed var(--navy-line); padding-bottom: 6px; }
  .cx-side li:last-child { border-bottom: 0; }
  .cx-side--a li b { color: #f0a090; } .cx-side--b li b { color: #7fe3bf; }
  .cx-vs { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--grey-dim); font-size: 1.4rem; }
  .cx-gauge { position: relative; width: 120px; display: grid; justify-items: center; }
  .cx-gauge svg { width: 120px; height: 70px; overflow: visible; }
  .cx-gauge .trk { fill: none; stroke: var(--navy-line); stroke-width: 9; stroke-linecap: round; }
  .cx-gauge .bar { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
  .cx.is-in .cx-gauge .bar { stroke-dashoffset: calc(100 - var(--v)); }
  .cx-gauge--bad .bar { stroke: #d95a46; } .cx-gauge--good .bar { stroke: #3fd7a6; filter: drop-shadow(0 0 6px rgba(63,215,166,.5)); }
  .cx-gauge strong { position: absolute; top: 28px; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 2rem; color: var(--white); line-height: 1; }
  .cx-gauge span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-dim); margin-top: 6px; }
  .cmp-note { text-align: center; font-size: .78rem; color: var(--grey-dim); margin-top: 16px; }
  @media (max-width: 960px) {
    .ps-split { grid-template-columns: 1fr; gap: 30px; }
    .ps-navs { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; }
    .ps-navs::-webkit-scrollbar { display: none; }
    .ps-nav > span:last-child { display: none; }
    .ps-nav { padding: 12px 12px 14px; }
    .ps-nav-bar { left: 12px; right: 12px; top: auto; bottom: 6px; width: auto; height: 2px; }
    .ps-nav .ps-nav-bar i { height: 100% !important; width: var(--fill, 0%) !important; }
    .ps-visual { order: 2; }
  }
  @media (max-width: 640px) {
    .ps-stage { aspect-ratio: auto; height: 560px; }
    .ps-body { padding: 12px; overflow: hidden; }
    .ps-grid2, .ps-grid2--rev { grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: start; flex: 0 0 auto; }
    .ps-ring-card { padding: 12px 14px; }
    .cx-tag { font-size: .58rem; padding: 4px 9px; bottom: 10px; }
    .cx-handle span { width: 42px; height: 42px; }
    .ps-ring-card { flex-direction: row; justify-content: flex-start; gap: 14px; }
    .ps-ring { width: 84px; }
    .ps-ring strong { font-size: 1.4rem; }
    .ps-kpis { grid-template-columns: 1fr 1fr; }
    .ps-user { display: none; }
    .ps-table th:nth-child(3), .ps-table td:nth-child(3) { display: none; }
    .ps-dl-grid span { height: 20px; font-size: .56rem; }
    .cx-stage { aspect-ratio: 16 / 11; }
    .cx-mark { display: none; }
    .cx-scores { grid-template-columns: 1fr; gap: 12px; }
    .cx-vs { text-align: center; }
    .cx-side { grid-template-columns: 96px 1fr; padding: 16px; }
    .cx-gauge, .cx-gauge svg { width: 96px; } .cx-gauge svg { height: 56px; } .cx-gauge strong { top: 20px; font-size: 1.6rem; }
  }
  @media (prefers-reduced-motion: reduce) { .ox-spinner i, .nx-cup i, .cx-mark::before, .ps-timeline li.active i, .ps-dl-ico svg { animation: none !important; } }

  /* Preis-Teaser */
  .hp-from { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--grey); margin-top: 8px; }
  .hp-from strong { font-weight: 400; font-size: 2.2em; background: linear-gradient(135deg, var(--white), var(--accent-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
  .hp-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
  .hp-pack { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 24px; border-radius: 22px; border: 1px solid var(--navy-line); background: var(--surface); color: var(--grey); text-decoration: none; transition: border-color .3s, transform .3s var(--ease-out); }
  .hp-pack:hover { border-color: var(--accent); transform: translateY(-4px); }
  .hp-pack.is-hl { border-color: rgba(127,160,224,.5); background: radial-gradient(120% 100% at 50% 0%, rgba(74,114,196,.16), transparent 60%), var(--surface); }
  .hp-badge { position: absolute; top: -11px; left: 24px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: #fff; border-radius: 999px; padding: 4px 11px; }
  .hp-pack-title { font-size: .8rem; letter-spacing: .16em; color: var(--accent-bright); text-transform: uppercase; }
  .hp-pack-price { font-family: 'Fraunces', Georgia, serif; font-size: 2.2rem; color: var(--white); }
  .hp-pack-note { font-size: .86rem; }
  .hp-pack-go { margin-top: 10px; font-size: .88rem; color: var(--white); }

  @media (max-width: 960px) {
    .hh-grid { grid-template-columns: 1fr; gap: 40px; }
    .hb { transform: none; }
    /* Handy/Tablet: Gerät oben, Schritte als Wisch-Karten darunter – nichts läuft mehr hinter das Bild */
    .pr-grid { grid-template-columns: 1fr; gap: 0; }
    .pr-device-wrap { position: relative; top: auto; padding: 0 0 18px; margin: 0; background: none; }
    .pr-device { width: 112px; border-radius: 20px; border-width: 4px; }
    .pr-dots { gap: 6px; }
    .pr-dots i { position: relative; width: 30px; height: 4px; cursor: pointer; }
    .pr-dots i::after { content: ""; position: absolute; inset: -14px -4px; }
    .pr-steps { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 4px 20px 6px; margin: 0 -20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .pr-steps::-webkit-scrollbar { display: none; }
    .pr-step { flex: 0 0 84%; scroll-snap-align: center; padding: 22px 20px 24px; border-radius: 22px; border: 1px solid var(--navy-line); background: var(--surface); opacity: .45; transform: scale(.95); transition: opacity .35s ease, transform .45s var(--ease-out), border-color .35s; }
    .pr-step.is-active { opacity: 1; transform: none; border-color: rgba(127,160,224,.45); box-shadow: 0 24px 50px -30px rgba(0,0,0,.8); }
    .pr-step.is-past { opacity: .45; }
    .pr-num { position: static; margin-bottom: 14px; width: 42px; height: 42px; }
    .pr-step h3 { font-size: 1.45rem; margin-bottom: 8px; }
    .pr-step p { font-size: .98rem; line-height: 1.6; }
    .pr-swipe { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: .78rem; letter-spacing: .08em; color: var(--grey-dim); transition: opacity .5s; }
    .pr-swipe.is-gone { opacity: 0; }
    .pr-swipe i { display: inline-block; animation: prNudge 1.6s ease-in-out infinite; }
    @keyframes prNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
    .pr-notch { height: 12px; top: 6px; }
    .dv-screen { padding: 26px 10px 10px; gap: 7px; }
    .ds-type { font-size: 2.2rem; } .ds-swatch { width: 26px; height: 26px; }
    .dvl-dot { width: 30px; height: 30px; } .dvl-title { font-size: 1rem; } .dvl-bars { height: 48px; gap: 3px; }
    .bd-grid i { height: 24px; } .sk-note { font-size: .6rem; }
  }
  .pr-swipe { display: none; }
  @media (max-width: 960px) { .pr-swipe { display: flex; } }
  @media (max-width: 640px) {
    .home-hero { min-height: 0; padding: 120px 0 64px; }
    .hh-title { font-size: clamp(2.3rem, 10vw, 3rem); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hb *, .hb-cursor { animation: none !important; }
    .pr-step { opacity: 1; transform: none; }
  }

  /* ---------- Über uns ---------- */
  .about-first { padding-top: 120px; }
  .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; }
  .about-hero .subline { max-width: 640px; }
  .section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
  .section-head .eyebrow { justify-content: center; }

  /* Duo: zwei Karten mit großem "&" dazwischen */
  .duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; max-width: 980px; margin: 0 auto; }
  .duo-card { margin: 0; position: relative; padding: 34px 30px 30px; border: 1px solid var(--navy-line); border-radius: 26px; background: var(--surface); text-align: center; overflow: hidden; transition: border-color .35s ease, transform .35s var(--ease-out); }
  .duo-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(127,160,224,.14), transparent 65%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  .duo-card:hover { border-color: var(--accent); transform: translateY(-4px); }
  .duo-card:hover::before { opacity: 1; }
  .duo-photo { position: relative; width: 132px; height: 132px; margin: 0 auto 22px; }
  .duo-photo img, .duo-mono { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 50%; object-fit: cover; }
  .duo-mono { display: grid; place-items: center; font-family: 'Fraunces', Georgia, serif; font-size: 2.4rem; color: var(--white); letter-spacing: .02em; background: radial-gradient(circle at 30% 25%, var(--navy-deep), var(--black) 75%); }
  .duo-ring { position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: conic-gradient(from var(--rot, 0deg), var(--accent-bright), transparent 30%, var(--violet) 55%, transparent 80%, var(--accent-bright)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: duoSpin 9s linear infinite; }
  .duo-card:nth-child(3) .duo-ring { animation-direction: reverse; }
  @property --rot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes duoSpin { to { --rot: 360deg; } }
  .duo-card h3 { font-size: 1.45rem; margin: 0 0 12px; }
  .duo-card blockquote { margin: 0 auto; max-width: 30ch; color: var(--grey); font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 1.05rem; line-height: 1.55; }
  .duo-amp { display: grid; place-items: center; }
  .duo-amp span { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: clamp(3.4rem, 7vw, 5.4rem); line-height: 1; background: linear-gradient(135deg, var(--accent-bright), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(127,160,224,.35)); animation: ampFloat 6s ease-in-out infinite; }
  @keyframes ampFloat { 50% { transform: translateY(-6px) rotate(-4deg); } }
  .duo-text { max-width: 660px; margin: 44px auto 0; text-align: center; font-size: 1.12rem; line-height: 1.75; color: var(--white); }

  /* Fakten */
  .about-facts { padding: 64px 0; }
  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border: 1px solid var(--navy-line); border-radius: 26px; overflow: hidden; background: var(--surface); }
  .fact { padding: 30px 26px; border-right: 1px solid var(--navy-line); display: flex; flex-direction: column; gap: 8px; }
  .fact:last-child { border-right: 0; }
  .fact-value { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(2.4rem, 4.5vw, 3.2rem); line-height: 1; background: linear-gradient(135deg, var(--white), var(--accent-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
  .fact-label { color: var(--grey); font-size: .92rem; line-height: 1.5; }

  /* Geschichte */
  .story { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
  .story-head { position: sticky; top: 110px; }
  .story-head h2 { margin-top: 10px; }
  .story-text p { font-size: 1.08rem; line-height: 1.8; }
  .story-text p:first-child::first-letter { font-family: 'Fraunces', Georgia, serif; float: left; font-size: 3.6em; line-height: .82; padding: 6px 10px 0 0; color: var(--accent-bright); }

  /* Werte */
  .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
  .value-card { position: relative; padding: 28px 24px; border: 1px solid var(--navy-line); border-radius: 22px; background: var(--surface); overflow: hidden; transition: border-color .3s ease, transform .3s var(--ease-out); }
  .value-card::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--violet)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
  .value-card:hover { border-color: var(--accent); transform: translateY(-4px); }
  .value-card:hover::after { transform: scaleX(1); }
  .value-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--accent-bright); background: rgba(74,114,196,.12); border: 1px solid rgba(127,160,224,.25); margin-bottom: 18px; transition: transform .4s var(--ease-out); }
  .value-card:hover .value-ico { transform: rotate(-8deg) scale(1.06); }
  .value-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
  .value-card p { font-size: .94rem; margin: 0; }

  /* Ablauf mit Linie, die sich beim Scrollen füllt */
  .steps { --fill: 0; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 22px; }
  .steps-line { position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; background: var(--navy-line); border-radius: 2px; }
  .steps-line span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--fill)); background: linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow: 0 0 12px rgba(127,160,224,.6); border-radius: inherit; }
  .step { position: relative; padding-top: 66px; }
  .step-num { position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 600; letter-spacing: .06em; color: var(--grey); background: var(--black); border: 1px solid var(--navy-line); transition: color .4s ease, border-color .4s ease, box-shadow .4s ease, background .4s ease; }
  .step.is-active .step-num { color: var(--white); border-color: var(--accent-bright); background: var(--navy-deep); box-shadow: 0 0 0 5px rgba(127,160,224,.12), 0 0 18px rgba(127,160,224,.4); }
  .step h3 { font-size: 1.1rem; margin-bottom: 8px; }
  .step p { font-size: .94rem; margin: 0; }

  /* Abschluss */
  .about-cta { padding: 90px 0; }
  .cta-card { position: relative; max-width: 760px; margin: 0 auto; text-align: center; padding: 56px 36px; border-radius: 30px; border: 1px solid var(--navy-line); background: radial-gradient(120% 140% at 50% 0%, rgba(74,114,196,.22), transparent 60%), var(--surface); overflow: hidden; }
  .cta-card h2 { margin-bottom: 12px; }
  .cta-card p { max-width: 50ch; margin: 0 auto 26px; }

  @media (max-width: 860px) {
    .duo { grid-template-columns: 1fr; gap: 6px; }
    .duo-amp span { font-size: 3.2rem; }
    .story { grid-template-columns: 1fr; gap: 18px; }
    .story-head { position: static; }
    .steps { grid-template-columns: 1fr; gap: 26px; padding-left: 64px; }
    .steps-line { top: 22px; bottom: 22px; left: 22px; right: auto; width: 2px; height: auto; }
    .steps-line span { transform-origin: top; transform: scaleY(var(--fill)); }
    .step { padding-top: 6px; }
    .step-num { left: -64px; }
    .fact { border-right: 0; border-bottom: 1px solid var(--navy-line); }
    .fact:last-child { border-bottom: 0; }
  }
  @media (max-width: 640px) {
    .about-first { padding-top: 96px; }
    .facts { grid-template-columns: 1fr 1fr; }
    .fact { padding: 22px 18px; }
    .fact:nth-child(odd) { border-right: 1px solid var(--navy-line); }
    .fact:nth-last-child(-n+2):nth-child(odd), .fact:last-child { border-bottom: 0; }
    /* Ungerade Anzahl: letzte Zahl über die volle Breite statt leerer Kachel */
    .fact:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; flex-direction: row; align-items: center; gap: 18px; }
    .fact:last-child:nth-child(odd) .fact-label { max-width: 22ch; }
    .fact:last-child:nth-child(odd) .fact-value { white-space: nowrap; flex: none; }
    .cta-card { padding: 40px 22px; }
  }
  @media (prefers-reduced-motion: reduce) { .duo-ring, .duo-amp span { animation: none; } }

  /* ---------- Preis-Pakete ---------- */
  .price-single { margin-top: 40px; max-width: 380px; }
  .price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 32px;
    border: 1px solid var(--navy-line);
    border-radius: 24px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.2s var(--ease-out), box-shadow 0.3s ease;
  }
  .price-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(127,160,224,0.14), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .price-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(6,10,20,0.4); }
  .price-card:hover::before { opacity: 1; }
  .price-card.is-highlighted {
    border-color: var(--accent-bright);
    background: linear-gradient(180deg, rgba(74,114,196,0.08), var(--surface) 40%);
  }
  .price-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--accent-bright);
    color: var(--black);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 5px 14px;
    border-radius: 999px;
    z-index: 2;
  }
  .price-card.is-highlighted h3 { margin-top: 26px; }
  .price-card h3, .price-card .price-tag, .price-card p, .price-card .price-features, .price-card > .btn,
  .price-card .price-admin-badge, .price-card .price-example-wrap {
    position: relative;
    z-index: 1;
  }
  .price-tag { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 16px; }
  .price-amount { font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; color: var(--white); font-weight: 500; }
  .price-note { color: var(--grey-dim); font-size: 0.85rem; }
  .price-card p { font-size: 0.94rem; }
  .price-features { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; min-height: 0; overflow-y: auto; }
  .price-features li { font-size: 0.9rem; color: var(--grey); padding-left: 24px; position: relative; }
  .price-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-bright);
    font-weight: 600;
  }
  .price-card > .btn { align-self: flex-start; margin-top: auto; }
  .pricing-closing { margin-top: 44px; color: var(--grey-dim); text-align: center; }
  .inc-wrap { margin-top: 64px; }
  .inc-head { text-align: center; font-family: 'Fraunces', Georgia, serif; font-weight: 400; color: var(--white); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 26px; }
  .inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .inc-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--navy-line); background: linear-gradient(180deg, rgba(22,28,41,.6), rgba(14,18,27,.6)); color: var(--grey); font-size: .9rem; line-height: 1.55; transition: border-color .25s, transform .25s var(--ease-out); }
  .inc-item:hover { border-color: rgba(127,160,224,.35); transform: translateY(-2px); }
  .inc-item strong { display: block; color: var(--white); font-weight: 500; font-size: .98rem; margin-bottom: 3px; }
  .inc-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--accent-bright); background: rgba(127,160,224,.1); border: 1px solid rgba(127,160,224,.25); }
  .inc-ic svg { width: 20px; height: 20px; }
  @media (max-width: 900px) { .inc-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .inc-grid { grid-template-columns: 1fr; } .inc-wrap { margin-top: 44px; } }

  /* ---------- FAQ (Preise) ---------- */
  .faq-section { padding-top: 90px; padding-bottom: 90px; }
  .faq-head { text-align: center; margin-bottom: 38px; }
  .faq-head .eyebrow { justify-content: center; }
  .faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
  .faq-item { border: 1px solid var(--navy-line); border-radius: 20px; background: var(--surface); transition: border-color .3s ease, background .3s ease; overflow: hidden; }
  .faq-item[open] { border-color: rgba(127,160,224,.45); background: var(--surface-raised); }
  .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; color: var(--white); font-size: 1.04rem; line-height: 1.4; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; border-radius: 20px; }
  .faq-icon { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--navy-line); transition: transform .35s var(--ease-out), border-color .3s; }
  .faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--accent-bright); transform: translate(-50%, -50%); border-radius: 2px; }
  .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .25s; }
  .faq-item[open] .faq-icon { transform: rotate(180deg); border-color: var(--accent-bright); }
  .faq-item[open] .faq-icon::after { opacity: 0; }
  .faq-answer { padding: 0 24px 22px; }
  .faq-answer p { margin: 0; line-height: 1.75; max-width: 68ch; }
  .faq-item[open] .faq-answer { animation: faqIn .4s var(--ease-out) both; }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .faq-more { text-align: center; margin-top: 30px; color: var(--grey-dim); }
  .faq-more a { color: var(--accent-bright); }
  @media (max-width: 640px) { .faq-item summary { padding: 17px 18px; font-size: .98rem; } .faq-answer { padding: 0 18px 18px; } .faq-section { padding-top: 64px; padding-bottom: 64px; } }


  /* ---------- Preis-Pakete: Admin-Badge & "Beispiel ansehen" ---------- */
  .price-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 5px 11px;
    margin-bottom: 14px;
    border-radius: 999px;
    border: 1px solid var(--navy-line);
    background: rgba(74,114,196,0.12);
    color: var(--accent-bright);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  .price-admin-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
  /* .price-example-wrap bleibt im normalen Fluss (schiebt nichts an --
     die Karten haben eine feste Höhe im Coverflow); das Panel selbst wird
     als schwebendes Overlay ÜBER dem Toggle eingeblendet, damit sein
     Inhalt nie an der festen Kartenhöhe abgeschnitten wird, egal wie lang
     der Beispieltext ist. */
  .price-example-wrap { position: relative; margin-top: 14px; }
  .price-example-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-bright);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .price-example-toggle svg { width: 10px; height: 7px; transition: transform 0.25s ease; }
  .price-example-toggle:hover { color: var(--white); }
  .price-example-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .price-example-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--surface-raised);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius);
    box-shadow: 0 18px 38px rgba(0,0,0,0.5);
    transition: max-height 0.35s ease, opacity 0.25s ease;
    z-index: 4;
  }
  .price-example-toggle[aria-expanded="true"] + .price-example-panel {
    max-height: 210px;
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;
    padding: 14px 16px;
  }
  .price-example-panel p {
    font-size: 0.84rem;
    color: var(--grey-dim);
    line-height: 1.55;
  }
  .pricing-calendly-cta {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--navy-line);
    text-align: center;
  }
  .pricing-calendly-cta p { color: var(--grey-dim); margin-bottom: 18px; }

  /* ---------- Preis-Umschalter: abgerundeter Schalter + eine Karte ----------
     Oben ein Pill-Schalter mit allen Paketen, eine helle "Pille" gleitet
     unter den aktiven Eintrag. Darunter liegen alle Karten übereinander im
     selben Grid-Feld (Höhe = höchste Karte, dadurch kein Springen); die
     aktive wird weich eingeblendet, die anderen verblassen. */
  .price-switch-wrap { display: flex; justify-content: center; margin-top: 40px; }
  .price-switch {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--navy-line);
    border-radius: 999px;
    background: var(--surface);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .price-switch::-webkit-scrollbar { display: none; }
  .price-switch-pill {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 6px 22px rgba(127,160,224,0.25);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
  }
  .price-switch-btn {
    position: relative;
    z-index: 1;
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--grey);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.35s ease;
  }
  .price-switch-btn:hover { color: var(--white); }
  .price-switch-btn.is-active { color: var(--black); }
  .price-switch-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
  .price-switch-star { color: var(--accent); margin-left: 6px; font-size: 0.8em; }
  .price-switch-btn.is-active .price-switch-star { color: var(--accent); }

  .price-stage {
    display: grid;
    max-width: 540px;
    margin: 34px auto 0;
  }
  .price-panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.98);
    filter: blur(6px);
    transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s ease, visibility 0s linear 0.55s;
  }
  .price-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    filter: none;
    transition: opacity 0.55s ease 0.08s, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, filter 0.55s ease 0.08s, visibility 0s;
  }
  .price-panel .price-card { height: 100%; }
  .price-panel .price-card:hover { transform: translateY(-3px); }
  /* In der Umschalter-Ansicht hat die Karte keine feste Höhe mehr -> das
     Beispiel klappt direkt in der Karte auf statt als schwebendes Overlay. */
  .price-stage .price-example-panel {
    position: static;
    box-shadow: none;
    margin-top: 0;
    border-radius: 14px;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
  }
  .price-stage .price-example-toggle[aria-expanded="true"] + .price-example-panel {
    margin-top: 12px;
    max-height: 320px;
  }
  .price-single .price-example-panel { position: static; box-shadow: none; border-radius: 14px; }
  .price-single .price-example-toggle[aria-expanded="true"] + .price-example-panel { margin-top: 12px; }
  @media (max-width: 560px) {
    .price-switch-btn { padding: 10px 15px; font-size: 0.86rem; }
    .price-card { padding: 28px 22px; }
  }

  /* ---------- Cursor: kleiner Punkt + nachziehender Ring ----------
     Zwei Elemente statt einem: der Punkt sitzt exakt auf der Maus (kein
     Nachlauf, für ein präzises Gefühl), der Ring folgt mit spürbarer
     Verzögerung hinterher. Über interaktiven Elementen wächst der Ring
     deutlich und der Punkt blendet aus. */
  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.25s ease;
  }
  .cursor-dot.is-active { opacity: 1; }
  .cursor-dot.is-hover { opacity: 0; }
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--accent-bright);
    background: rgba(127,160,224,0.06);
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.3s ease, width 0.3s var(--ease-out), height 0.3s var(--ease-out), background 0.3s ease, border-color 0.3s ease;
  }
  .cursor-ring.is-active { opacity: 1; }
  .cursor-ring.is-hover { width: 62px; height: 62px; background: rgba(127,160,224,0.16); border-color: rgba(127,160,224,0.55); }

  /* ---------- Contact / Calendly ---------- */
  .contact-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: 52px;
    align-items: start;
    margin-top: 40px;
  }
  .contact-side .contact-item {
    display: block;
    padding: 16px 0;
    border-top: 1px solid var(--navy-line);
    color: var(--white);
    transition: padding-left 0.25s var(--ease-out), color 0.2s ease;
  }
  .contact-side .contact-item:hover { padding-left: 8px; color: var(--accent-bright); }
  .contact-side .contact-item span { display: block; color: var(--grey-dim); font-size: 0.82rem; margin-bottom: 4px; }
  .calendly-frame-wrap {
    border: 1px solid var(--navy-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    min-height: 700px;
  }

  /* ---------- Kontakt (neu): Formular in Schritten ---------- */
  .contact-first { padding-top: 78px; }
  /* Überschrift oben links; darunter Direktkontakt und Formular auf gleicher Höhe */
  .ct-layout { display: grid; grid-template-columns: .85fr 1.15fr; grid-template-areas: "head head" "direct form"; column-gap: 56px; row-gap: 22px; align-items: start; }
  .ct-head { grid-area: head; max-width: 720px; }
  .ct-direct { grid-area: direct; position: sticky; top: 100px; }
  .ct-form-card { grid-area: form; }
  .ct-head h1 { margin: 6px 0 10px; font-size: clamp(2.1rem, 3.6vw, 2.9rem); }
  .ct-intro { font-size: 1.05rem; line-height: 1.65; max-width: 62ch; margin: 0; }
  .ct-direct-h { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-dim); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; margin: 6px 0 12px; }
  .ct-tiles { display: grid; gap: 10px; }
  .ct-tile { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--navy-line); border-radius: 16px; background: var(--surface); color: var(--white); text-decoration: none; transition: border-color .25s, transform .25s var(--ease-out), background .25s; }
  .ct-tile svg { flex: 0 0 auto; color: var(--accent-bright); transition: transform .3s var(--ease-out); }
  .ct-tile span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
  .ct-tile small { color: var(--grey-dim); font-size: .74rem; letter-spacing: .04em; }
  .ct-tile:hover { border-color: var(--accent); transform: translateX(4px); background: rgba(74,114,196,.08); }
  .ct-tile:hover svg { transform: scale(1.1) rotate(-6deg); }

  .ct-form-card { position: relative; border: 1px solid var(--navy-line); border-radius: 28px; padding: 24px 30px 26px; background: radial-gradient(120% 90% at 100% 0%, rgba(74,114,196,.16), transparent 55%), var(--surface); overflow: hidden; }
  .ct-form-top h2 { margin: 0 0 8px; }
  .ct-form-top p { margin: 0 0 14px; font-size: .92rem; }
  .ct-form-top h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); margin-bottom: 4px; }
  /* Mini-Hinweis: weiter unten gibt's den Kalender */
  .ct-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--grey); font-size: .86rem; text-decoration: none; transition: color .2s; }
  .ct-hint:hover { color: var(--white); }
  .ct-hint i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(74,114,196,.18); border: 1px solid rgba(127,160,224,.45); color: var(--accent-bright); animation: ctBob 1.8s ease-in-out infinite; flex: 0 0 auto; }
  @keyframes ctBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  .lf-head { margin-bottom: 16px; }
  .lf-steps { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .lf-steps span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-dim); transition: color .3s; cursor: default; }
  .lf-steps span.is-on { color: var(--accent-bright); cursor: pointer; }
  .lf-steps span.is-cur { color: var(--white); cursor: default; }
  .lf-bar { height: 3px; background: var(--navy-line); border-radius: 3px; overflow: hidden; }
  .lf-bar span { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow: 0 0 12px rgba(127,160,224,.6); border-radius: inherit; transition: width .5s var(--ease-out); }
  .lf fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
  .lf legend { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; color: var(--white); margin: 0 0 12px; padding: 0; }
  .lf.lf-js .lf-step { display: none; }
  .lf.lf-js .lf-step.is-on { display: block; animation: lfIn .45s var(--ease-out); }
  .lf.lf-js .lf-step.is-on.from-left { animation-name: lfInL; }
  @keyframes lfIn { from { opacity: 0; transform: translateX(26px); } }
  @keyframes lfInL { from { opacity: 0; transform: translateX(-26px); } }
  .lf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .lf-chip { position: relative; cursor: pointer; }
  .lf-chip input { position: absolute; opacity: 0; pointer-events: none; }
  .lf-chip span { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--navy-line); background: rgba(7,10,16,.4); color: var(--grey); font-size: .95rem; transition: border-color .2s, color .2s, background .2s, transform .15s, box-shadow .2s; }
  .lf.lf-js .lf-step.is-on .lf-chip span { animation: lfChip .5s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
  @keyframes lfChip { from { opacity: 0; transform: translateY(8px) scale(.96); } }
  .lf-chip:hover span { border-color: var(--accent); color: var(--white); }
  .lf-chip input:checked + span { border-color: var(--accent-bright); color: var(--white); background: rgba(74,114,196,.22); box-shadow: 0 0 0 4px rgba(127,160,224,.12); }
  .lf-chip input:focus-visible + span { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
  .lf-chip:active span { transform: scale(.96); }
  .lf-hint { font-size: .84rem; color: var(--grey-dim); margin: 14px 0 0; line-height: 1.55; }
  .lf-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
  .lf-summary span { font-size: .78rem; color: var(--accent-bright); border: 1px solid rgba(127,160,224,.35); border-radius: 999px; padding: 4px 11px; }
  .lf-summary:empty { display: none; }
  .lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .lf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .lf-field span { font-size: .8rem; color: var(--grey); }
  .lf-field input, .lf-field textarea { width: 100%; background: rgba(7,10,16,.55); border: 1px solid var(--navy-line); border-radius: 12px; color: var(--white); font: inherit; font-size: .96rem; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
  .lf-field textarea { resize: vertical; min-height: 110px; }
  .lf-field input:focus, .lf-field textarea:focus { outline: none; border-color: var(--accent-bright); box-shadow: 0 0 0 4px rgba(127,160,224,.12); }
  .lf-send { margin-top: 18px; }
  .lf-send .hold { min-width: 260px; }
  .lf-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .lf-nav .lf-next { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
  .lf-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--grey); font: inherit; cursor: pointer; padding: 10px 0; }
  .lf-back:hover { color: var(--white); }
  .lf-back[hidden], .lf-next[hidden] { display: none; }
  .lf:not(.lf-js) .lf-nav { display: none; }
  .lf-error { border: 1px solid rgba(217,140,140,.5); background: rgba(217,140,140,.08); color: #f0b4b4; border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin-bottom: 16px; }
  .lf-error[hidden] { display: none; }
  .lf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .lf.is-leaving { opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .35s, transform .35s var(--ease-out); }
  .lf-success { text-align: center; padding: 30px 10px 10px; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ease-out); }
  .lf-success.is-on { opacity: 1; transform: none; }
  .lf-success h2 { margin: 18px 0 10px; }
  .lf-success p { max-width: 42ch; margin: 0 auto; }
  .lf-check { width: 84px; height: 84px; }
  .lf-check circle { fill: rgba(74,114,196,.14); stroke: var(--accent-bright); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; }
  .lf-check path { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
  .lf-success.is-on .lf-check circle { animation: lfDraw .7s var(--ease-out) forwards; }
  .lf-success.is-on .lf-check path { animation: lfDraw .45s var(--ease-out) .55s forwards; }
  @keyframes lfDraw { to { stroke-dashoffset: 0; } }
  .ct-cal .section-head p { margin: 10px auto 0; }
  @media (max-width: 900px) {
    /* Handy: Überschrift -> Formular -> Direktkontakt */
    .ct-layout { grid-template-columns: 1fr; grid-template-areas: "head" "form" "direct"; row-gap: 24px; }
    .ct-direct { position: static; margin-top: 8px; }
  }
  @media (max-width: 640px) {
    .contact-first { padding-top: 64px; }
    .ct-form-card { padding: 24px 18px; border-radius: 24px; }
    .lf-grid { grid-template-columns: 1fr; }
    .lf-chip span { padding: 11px 15px; font-size: .9rem; }
    .lf-steps span { font-size: .62rem; letter-spacing: .08em; }
    .lf-send .hold { width: 100%; min-width: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .lf.lf-js .lf-step.is-on, .lf-chip span, .ct-hint i { animation: none !important; } }

  /* ---------- Klick-Schutz vor Drittanbieter-Einbindungen (Calendly) ----------
     Lädt Calendly (Skript + iFrame, inkl. Cookies/IP-Übertragung an Calendly
     LLC) erst nach explizitem Klick — vorher passiert schlicht nichts. */
  .consent-shield {
    height: 100%;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 48px;
  }
  .consent-shield p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--grey);
    max-width: 380px;
  }
  @media (max-width: 860px) {
    .contact-layout { grid-template-columns: 1fr; }
  }

  /* ---------- Footer (minimalistisch) ----------
     Die Navigation steht schon oben -- unten nur noch Marke, eine feine
     Linie, Copyright und die rechtlichen Links (müssen auf jeder Seite
     erreichbar bleiben). */
  footer.site-footer {
    border-top: 1px solid var(--navy-line);
    padding: 64px 0 52px;
    margin-top: 60px;
  }
  .footer-min {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
  }
  .footer-min .brand { pointer-events: auto; }
  .footer-line {
    width: min(420px, 80%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(127,160,224,0.45), transparent);
    margin: 4px 0;
  }
  .footer-copy { color: var(--grey-dim); font-size: 0.85rem; margin: 0; }
  .footer-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: -8px; }
  .footer-legal a { color: var(--grey-dim); font-size: 0.85rem; transition: color 0.2s ease; }
  .footer-legal a:hover { color: var(--white); }
  .footer-legal .sep { color: var(--navy-line); font-size: 0.85rem; }
  .footer-portal {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 2px;
    color: #d4b26a; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    border: 1px solid rgba(212,178,106,.28); border-radius: 999px; padding: 8px 16px 8px 14px;
    background: rgba(212,178,106,.06);
    transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  }
  .footer-portal:hover { color: #ecd29a; border-color: rgba(212,178,106,.6); background: rgba(212,178,106,.12); box-shadow: 0 0 0 6px rgba(212,178,106,.06); }
  .footer-portal svg { transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .footer-portal:hover svg { transform: translateY(-1px) rotate(-6deg); }

  /* ---------- Legal pages ---------- */
  .legal-body { white-space: pre-wrap; font-size: 0.96rem; }
  .legal-updated { color: var(--grey-dim); font-size: 0.85rem; margin-bottom: 30px; }

  /* ---------- Gate / login pages ---------- */
  .auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
  }
  .auth-shell::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    background:
      radial-gradient(38vw 38vw at 82% 12%, rgba(74,114,196,0.22), transparent 65%),
      radial-gradient(32vw 32vw at 10% 88%, rgba(109,94,200,0.16), transparent 65%);
    pointer-events: none;
  }
  .auth-box {
    width: 100%;
    max-width: 360px;
    padding: 40px 34px;
    border: 1px solid var(--navy-line);
    border-radius: var(--radius);
    background: var(--surface);
    position: relative;
    z-index: 2;
    animation: auth-in 0.6s var(--ease-out);
  }
  @keyframes auth-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .auth-box form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
  .auth-box input {
    background: var(--black);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius);
    color: var(--white);
    padding: 12px 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
  }
  .auth-box input:focus { border-color: var(--accent-bright); }
  .auth-box input:disabled { opacity: 0.45; cursor: not-allowed; }
  .auth-box button:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
  .auth-notice { color: #7fd4c8; font-size: .88rem; margin: 10px 0 0; line-height: 1.5; }
  .auth-links { margin-top: 18px; font-size: .86rem; text-align: center; }
  .auth-links a { color: var(--grey); }
  .auth-links a:hover { color: var(--white); }
  .auth-error { color: #d98c8c; font-size: 0.88rem; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition: none !important;
      animation: none !important;
      scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
    .split-word { opacity: 1 !important; transform: none !important; }
    .scroll-cue-line::after { animation: none !important; }
  }
  /* ---------- 404-Seite ---------- */
  .notfound { min-height: 78vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 140px 0 100px; }
  .notfound .wrap { position: relative; z-index: 2; width: 100%; }
  .notfound-code {
    font-family: 'Fraunces', Georgia, serif; font-weight: 300; line-height: 0.9;
    font-size: clamp(7rem, 22vw, 15rem); letter-spacing: -0.04em; margin: 0 0 8px;
    background: linear-gradient(120deg, var(--white) 10%, var(--accent-bright) 55%, var(--violet) 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .notfound h1 { max-width: 16ch; }
  .notfound p { max-width: 46ch; color: var(--grey); }
  .notfound-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; font-size: 0.95rem; }
  .notfound-links a { color: var(--grey); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
  .notfound-links a:hover { color: var(--white); border-color: var(--accent-bright); }

  /* ---------- Rechtlicher Hinweis unter den Preisen ---------- */
  .price-legal-note { text-align: center; color: var(--grey-dim); font-size: 0.85rem; max-width: 60ch; margin: 34px auto 0; line-height: 1.6; }

  /* ---------- Handy: Karten nebeneinander statt endlos untereinander ---------- */
  @media (max-width: 640px) {
    /* Über uns: Ben & Karim nebeneinander, das „&“ schwebt in der Mitte */
    .duo { position: relative; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
    .duo-amp { position: absolute; left: 50%; top: 64px; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; width: 44px; height: 44px; border-radius: 50%; background: var(--black); box-shadow: 0 0 0 1px var(--navy-line); }
    .duo-amp span { font-size: 1.7rem; animation: none; }
    .duo-card { padding: 22px 12px 18px; border-radius: 20px; }
    .duo-photo { width: 86px; height: 86px; margin-bottom: 12px; }
    .duo-photo img, .duo-mono { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
    .duo-mono { font-size: 1.6rem; }
    .duo-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
    .duo-card blockquote { font-size: .84rem; line-height: 1.45; }
    .duo-text { margin-top: 28px; font-size: 1rem; }

    /* Werte: 2 × 2 */
    .values { grid-template-columns: 1fr 1fr; gap: 10px; }
    .value-card { padding: 18px 14px; border-radius: 18px; }
    .value-ico { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px; }
    .value-ico svg { width: 18px; height: 18px; }
    .value-card h3 { font-size: .98rem; line-height: 1.3; }
    .value-card p { font-size: .84rem; line-height: 1.5; }

    /* Startseite: Pakete 2 nebeneinander, das dritte über die volle Breite */
    .hp-packs { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hp-pack { padding: 22px 16px 18px; border-radius: 18px; }
    .hp-pack:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .hp-pack-title { font-size: .7rem; letter-spacing: .12em; }
    .hp-pack-price { font-size: 1.65rem; }
    .hp-pack-note, .hp-pack-go { font-size: .8rem; }
    .hp-badge { left: 14px; font-size: .6rem; padding: 3px 9px; }

    /* Preise: „In jedem Paket dabei“ als 2er-Kacheln */
    .inc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .inc-item { flex-direction: column; gap: 10px; padding: 14px; font-size: .82rem; line-height: 1.5; border-radius: 16px; }
    .inc-item strong { font-size: .9rem; }
    .inc-ic { width: 34px; height: 34px; border-radius: 10px; }
    .inc-ic svg { width: 17px; height: 17px; }
    .inc-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* Zwei Buttons nebeneinander */
    /* passen beide in eine Zeile, stehen sie nebeneinander – sonst je volle Breite (nie zweizeilig) */
    .hero-actions { flex-wrap: wrap; gap: 10px; }
    .hero-actions > .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding: 13px 16px; font-size: .88rem; }
    .hero-actions > .btn:only-child { flex: 0 1 auto; padding: 13px 22px; }
  }
  @media (max-width: 340px) {
    .duo, .values, .hp-packs, .inc-grid { grid-template-columns: 1fr; }
    .duo-amp { position: static; transform: none; }
    .hero-actions { flex-wrap: wrap; }
  }


  /* Weiche Seitenwechsel (Chrome, Edge, Safari 18.2+): Kopf bleibt stehen, Inhalt blendet über */
  @view-transition { navigation: auto; }
  header.site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: 220ms cubic-bezier(.4,0,1,1) both kbFadeOut; }
  ::view-transition-new(root) { animation: 380ms cubic-bezier(.16,1,.3,1) both kbFadeIn; }
  @keyframes kbFadeOut { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes kbFadeIn { from { opacity: 0; transform: translateY(8px); } }
  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
  }