/* ============================================================
   XXX AGENCY — xxx-agency.com · statischer Neubau (Stand 2026-09-02)
   Dark Theme #0a0a0a/#111 · Carlito + Caveat (self-hosted, fonts/fonts.css)
   Cyan #0084D1 primär · Orange #FF7A00 sekundär
   Aufbau: Tokens/Basis → Kopf-/Fußzeile → Startseite → Schnellcheck →
   Kontakt → Profil-Guide. Quelle: Customizer-CSS v9 + Inline-CSS der
   WP-Blöcke, 1:1 übernommen (Blocksy-Korrekturen entfernt).
   ============================================================ */

:root {
    --cyan: #0084D1;
    --cyan-glow: rgba(0, 132, 209, 0.6);
    --orange: #FF7A00;
    --orange-glow: rgba(255, 122, 0, 0.5);
    --bg-darker: #0a0a0a;
    --bg-dark: #111111;
    --bg-card: #161616;
    --bg-card-hover: #1c1c1c;
    --text: #fff;
    --text-dim: rgba(255,255,255,0.7);
    --text-muted: rgba(255,255,255,0.55);
    --nav-aktiv: var(--cyan); /* kein Baukasten-Blau: unser Cyan, mit leuchtendem Rest (s. .topnav) */
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  /* ---- Blocksy-Basis (Theme-Grundwerte, die das Customizer-CSS live geerbt hat) ----
     Blocksy setzt per Element-Selektor Grundschrift, Überschriften-, Absatz- und
     Block-Abstände. Das Customizer-CSS hat diese Werte nie selbst definiert — ohne
     sie stimmen alle Abstände nicht. Element-Selektoren schlagen den *-Reset,
     jede Klassen-Regel aus dem Customizer-CSS schlägt sie — exakt wie live.
     Werte = Blocksy-Standard (16px/1.65, h1 40 … h6 16, 700/1.5, Absatz 1.5em,
     Überschrift .3em+10px, Block-Abstand 24px, Inhaltsbereich 70px oben/unten). */
  body { font-size: 16px; line-height: 1.65; font-weight: 400; overflow-wrap: break-word;
         -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.5; margin-block-end: calc(.3em + 10px); }
  h1 { font-size: 40px; } h2 { font-size: 35px; } h3 { font-size: 30px; }
  h4 { font-size: 25px; } h5 { font-size: 20px; } h6 { font-size: 16px; }
  p { margin-block-end: 1.5em; }
  img { height: auto; max-width: 100%; vertical-align: middle; }
  a { text-decoration: none; }
  main { padding-block: 70px; }
  body.start main { padding-top: 0; } /* Startseite: der Hero ist die Bühne und beginnt direkt unter der Kopfzeile */
  main > * + * { margin-block-start: 24px; }
  /* Dekorative Glows (Mantra, Promo-Halo, Schnellcheck-Puls, Sucher-Rahmen) ragen absolut
     über den Rand — ohne diese Zeile wackelt die Seite auf dem Handy seitlich. */
  html, body { overflow-x: clip; } /* clip statt hidden: hidden würde position:sticky der Kopfzeile aushebeln */
  body {
    background: var(--bg-darker);
    font-family: 'Carlito', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text);
  }

  /* === HERO === */
  .hero {
    width: 100%;
    background: var(--bg-darker);
    /* Bühne statt Karte (Christian 03.09.): Cyan-Schein von oben, Hauch Orange von unten, kein Rahmen */
    background-image:
      radial-gradient(ellipse 62% 50% at 50% 8%, rgba(0,132,209,.20) 0%, transparent 70%),
      radial-gradient(ellipse 34% 26% at 50% 100%, rgba(255,122,0,.05) 0%, transparent 70%);
    color: var(--text);
    padding: 0 24px 44px;
    overflow: hidden;
  }
  .hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 104px 24px 36px;
    text-align: center;
    position: relative;
  }
  .hero-inner::before, .hero-inner::after, .frame-glow { display: none; }
  .hero-headline {
    font-size: clamp(40px, 5.2vw, 88px);
    font-weight: 700; line-height: 1.04;
    margin-bottom: 26px; letter-spacing: -.015em;
    text-wrap: balance;
  }
  .hero-headline .accent { color: var(--orange); }
  .hero-lead {
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55; color: var(--text-dim);
    max-width: 1000px; margin: 0 auto 38px;
  }
  .hero-divider {
    width: 100%;
    max-width: 200px;
    height: 1px;
    margin: 0 auto 34px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0,132,209,0.95) 50%,
      transparent 100%);
    box-shadow: 0 0 18px rgba(0,132,209,0.6);
  }
  .label-wrap {
    position: relative; margin-bottom: 22px;
    min-height: 32px; text-align: center;
  }
  .label {
    font-size: clamp(16px, 1.3vw, 19px);
    font-style: italic; font-weight: 600;
    letter-spacing: 0.2px; line-height: 1.4;
    transition: opacity 0.5s ease;
  }
  /* „Das Licht geht an": oben gedämpft → Cyan, unten Cyan → Weiß (s. .whisper) */
  .label.weak { color: rgba(255,255,255,.58); }
  .label.strong { color: var(--cyan); text-shadow: 0 0 18px rgba(0,132,209,.45); position: absolute; top: 0; left: 0; right: 0; }
  .mockup-wrapper { max-width: 1080px; margin: 0 auto; }
  .mockup {
    position: relative; width: 100%;
    aspect-ratio: 2646 / 540;
    background: #000; border-radius: 10px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 70px rgba(0,132,209,.16);
  }
  .banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease, filter 0.6s ease; }
  .banner.weak { z-index: 1; }
  .banner.strong { z-index: 2; opacity: 0; }
  .weak-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%); z-index: 3; pointer-events: none; }
  .pb { position: absolute; top: 12%; left: 2.34%; width: 15%; aspect-ratio: 1; border-radius: 2px; overflow: hidden; z-index: 5; transition: opacity 0.5s ease, transform 0.5s ease; }
  .pb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pb.weak { z-index: 5; }
  .pb.strong { z-index: 6; opacity: 0; transform: scale(0.85); transform-origin: center; }
  .verify { position: absolute; top: 80%; left: 15.5%; width: 4%; aspect-ratio: 1; z-index: 7; opacity: 0; transform: scale(0); }
  .verify svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(29,155,240,0.6)); }
  .stats { position: absolute; right: 2%; bottom: 11%; width: 22.6%; z-index: 5; transition: opacity 0.4s ease; }
  .stats img { width: 100%; height: auto; display: block; }
  .stats.weak { z-index: 5; }
  .stats.strong { z-index: 6; opacity: 0; }
  .sweep {
    position: absolute; top: 0; left: -30%;
    width: 30%; height: 100%; z-index: 10; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(0,132,209,0.0) 10%, rgba(0,132,209,0.4) 40%, rgba(255,255,255,0.95) 50%, rgba(0,132,209,0.4) 60%, rgba(0,132,209,0.0) 90%, transparent 100%);
    opacity: 0; filter: blur(2px);
    box-shadow: 0 0 40px var(--cyan-glow);
  }
  /* Die Pointe unter dem Mockup: Handschrift, Cyan (Diagnose) → Weiß mit Cyan-Schein (der Gewinn),
     Einzug von unten + Leucht-Impuls, dazu eine Linie, die sich unter den starken Satz zeichnet. */
  .whisper-container { position: relative; height: 64px; margin-top: 22px; }
  .whisper {
    position: absolute; left: 0; right: 0; text-align: center;
    font-family: 'Caveat', cursive; font-style: normal; font-weight: 700;
    font-size: clamp(28px, 2.4vw, 42px); letter-spacing: 0; line-height: 1.2;
  }
  .whisper-weak { color: var(--cyan); }
  .whisper-strong { color: #ffffff; }
  .whisper-strong::after {
    content: ""; display: block; height: 2px; width: 0; margin: 2px auto 0;
    background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--cyan) 80%, transparent);
    box-shadow: 0 0 12px var(--cyan-glow); opacity: 0;
    animation: whisperLinie 15s infinite ease-in-out;
  }

  .btn {
    display: inline-block; padding: 14px 28px;
    border-radius: 4px; font-weight: 700; font-size: 16px;
    text-decoration: none; letter-spacing: 0.3px;
    transition: all 0.2s ease; cursor: pointer;
    border: 2px solid transparent;
  }
  .btn-primary { background: var(--cyan); color: white; border-color: var(--cyan); box-shadow: 0 6px 20px rgba(0,132,209,0.35); }
  .btn-primary:hover { background: #006eaf; border-color: #006eaf; transform: translateY(-1px); }

  /* === BRIDGE === */
  .bridge {
    width: 100%; background: var(--bg-dark);
    background-image: radial-gradient(ellipse at 80% 50%, rgba(0,132,209,0.06) 0%, transparent 50%);
    color: var(--text); padding: 70px 24px 30px;
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .bridge-inner {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 160px auto;
    gap: 48px;
    align-items: center;
    justify-content: center;
  }
  .bridge-text { text-align: center; }
  /* SCHMERZ-Block — eigene Sektion zwischen Mantra und Bridge */
  .pain {
    width: 100%;
    background: var(--bg-darker);
    padding: 10px 24px 20px;
    text-align: center;
  }
  .pain-inner {
    max-width: 720px;
    margin: 0 auto;
  }
  .pain-text {
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.6;
    color: var(--text-dim);
    margin: 0;
  }
  .pain-pivot {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: -0.2px;
    line-height: 1.3;
    text-shadow: 0 0 22px rgba(0,132,209,0.35);
    margin: 28px 0 0;
  }
  /* Handy (Christian 03.09.): jeder Satz eine Zeile — „Liegt an Deinem Profil." komplett in Zeile 2,
     Schrift so bemessen, dass die längere Zeile (23 Zeichen) bei 320–640 px einzeilig bleibt. */
  @media (max-width: 640px) {
    .pain-pivot .pivot-zeile { display: block; white-space: nowrap; }
    .pain-pivot { font-size: clamp(22px, 7.6vw, 34px); }
  }
  .pain-come-word {
    display: inline-block;
    color: var(--orange);
    text-shadow: 0 0 8px rgba(255,122,0,0.25);
  }
  .pain.in-view .pain-come-word {
    animation:
      painComeGlow 2.5s ease-out 2.5s forwards,
      painComeGlowLoop 6s ease-out 13.5s infinite;
  }
  @keyframes painComeGlow {
    0% {
      text-shadow: 0 0 8px rgba(255,122,0,0.25);
      filter: brightness(1);
    }
    30% {
      text-shadow:
        0 0 14px rgba(255,122,0,1),
        0 0 28px rgba(0,132,209,0.5);
      filter: brightness(1.55);
    }
    100% {
      text-shadow: 0 0 8px rgba(255,122,0,0.25);
      filter: brightness(1);
    }
  }
  @keyframes painComeGlowLoop {
    0%, 100% {
      text-shadow: 0 0 8px rgba(255,122,0,0.25);
      filter: brightness(1);
    }
    10% {
      text-shadow:
        0 0 14px rgba(255,122,0,1),
        0 0 28px rgba(0,132,209,0.5);
      filter: brightness(1.55);
    }
    20% {
      text-shadow: 0 0 8px rgba(255,122,0,0.25);
      filter: brightness(1);
    }
  }

  .bridge-headline { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; line-height: 1.25; letter-spacing: -0.4px; margin-bottom: 28px; }
  .bridge-headline .bridge-accent { color: var(--orange); font-weight: 700; }
  .bridge-lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: var(--text-dim); }
  .bridge-lead .softer { color: var(--text-muted); }

  /* Stickfigur rechts mit Schweben + Herz-Glow */
  .bridge-figure {
    position: relative;
    width: 100%;
    max-width: 160px;
  }
  .bridge-figure-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    animation: figureFloat 5.5s infinite ease-in-out;
  }
  @keyframes figureFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  /* Glow am Herz-Bereich oben links — pulsiert separat */
  .bridge-figure-glow {
    position: absolute;
    /* Herz sitzt im PNG ungefähr bei top:5%, left:25% (von Figur-Größe) */
    top: -10px;
    left: 0;
    width: 60%;
    height: 30%;
    background: radial-gradient(circle at 30% 50%,
      rgba(255,122,0,0.4) 0%,
      rgba(255,122,0,0.15) 30%,
      transparent 60%);
    filter: blur(20px);
    z-index: 1;
    pointer-events: none;
    animation: heartPulse 3.2s infinite ease-in-out;
  }
  @keyframes heartPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
  }

  /* ============================================================
     SEKTION 3 — DIE VIER WEGE (Karten)
     ============================================================ */
  .ways {
    width: 100%;
    background: var(--bg-dark);
    background-image:
      radial-gradient(ellipse at 0% 50%, rgba(0,132,209,0.05) 0%, transparent 50%),
      radial-gradient(ellipse at 100% 50%, rgba(255,122,0,0.05) 0%, transparent 50%);
    padding: 20px 24px 70px;
  }

  .ways-inner {
    max-width: 1280px;
    margin: 0 auto;
  }

  .ways-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  /* Card-Basis — NUR innerhalb .ways (Startseite) */
  .ways .card {
    position: relative;
    background: var(--bg-card);
    border-radius: 10px;
    padding: 36px 28px 32px;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    /* Stagger-Eintritt: initial unsichtbar */
    opacity: 0;
    transform: translateY(30px);
  }

  .ways .card.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* Subtiler Glow-Schimmer hinten in Karten-Akzentfarbe */
  .ways .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.4s ease;
  }
  .ways .card.cyan::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(0,132,209,0.18) 0%, transparent 60%);
  }
  .ways .card.orange::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(255,122,0,0.18) 0%, transparent 60%);
  }

  /* Hover */
  .ways .card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-6px);
  }
  .ways .card.cyan:hover {
    border-color: rgba(0,132,209,0.5);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(0,132,209,0.18);
  }
  .ways .card.orange:hover {
    border-color: rgba(255,122,0,0.5);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(255,122,0,0.18);
  }
  .ways .card:hover::before { opacity: 1; }

  /* Sanftes Schweben im Ruhezustand (versetzt) */
  @keyframes floatA {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  @keyframes floatB {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(2px); }
  }
  @keyframes floatC {
    0%, 100% { transform: translateY(2px); }
    50% { transform: translateY(-2px); }
  }
  @keyframes floatD {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(3px); }
  }
  .ways .card.in-view.float-a { animation: floatA 5.5s infinite ease-in-out; }
  .ways .card.in-view.float-b { animation: floatB 5.0s infinite ease-in-out 0.4s; }
  .ways .card.in-view.float-c { animation: floatC 5.8s infinite ease-in-out 0.8s; }
  .ways .card.in-view.float-d { animation: floatD 5.2s infinite ease-in-out 1.2s; }

  /* Bei Hover Schweben pausieren, damit Hover-Lift sauber ist */
  .ways .card:hover { animation: none; }

  /* Card-Content */
  .ways .card-headline {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
  }
  .ways .card.cyan .card-headline { color: var(--cyan); }
  .ways .card.orange .card-headline { color: var(--orange); }

  .ways .card-stage {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
  }

  .ways .card-desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-dim);
    margin-bottom: 24px;
    flex-grow: 1;
    position: relative;
    z-index: 1;
  }

  .ways .card-link {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    transition: gap 0.3s ease;
  }
  .ways .card.cyan .card-link { color: var(--cyan); }
  .ways .card.orange .card-link { color: var(--orange); }

  .ways .card-link .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  .ways .card:hover .card-link { gap: 14px; }
  .ways .card:hover .card-link .arrow { transform: translateX(4px); }

  /* === ANIMATIONEN MOCKUP === */
  @keyframes bannerWeakOut { 0%,36%{opacity:1;filter:saturate(.85);}47%{opacity:1;filter:saturate(1);}50%{opacity:0;}93%,97%{opacity:0;}100%{opacity:1;filter:saturate(.85);} }
  @keyframes bannerStrongIn { 0%,47%{opacity:0;}50%{opacity:1;}93%{opacity:1;}97%{opacity:0;}100%{opacity:0;} }
  @keyframes weakOverlayFade { 0%,36%{opacity:1;}50%{opacity:0;}93%,97%{opacity:0;}100%{opacity:1;} }
  @keyframes pbWeakOut { 0%,47%{opacity:1;transform:scale(1);}52%{opacity:0;transform:scale(.92);}93%,97%{opacity:0;}100%{opacity:1;transform:scale(1);} }
  @keyframes pbStrongIn { 0%,50%{opacity:0;transform:scale(.85);box-shadow:0 0 0 transparent;}54%{opacity:1;transform:scale(1.05);box-shadow:0 0 30px var(--cyan-glow);}58%{transform:scale(1);box-shadow:0 0 15px var(--cyan-glow);}62%{box-shadow:0 0 0 transparent;}93%{opacity:1;transform:scale(1);}97%{opacity:0;}100%{opacity:0;} }
  @keyframes verifyPop { 0%,56%{opacity:0;transform:scale(0) rotate(-15deg);}61%{opacity:1;transform:scale(1.3) rotate(0deg);}65%{transform:scale(.9);}69%{transform:scale(1.05);}72%{transform:scale(1);}93%{opacity:1;transform:scale(1);}97%{opacity:0;}100%{opacity:0;transform:scale(0);} }
  @keyframes statsWeakOut { 0%,47%{opacity:1;}50%{opacity:0;}93%,97%{opacity:0;}100%{opacity:1;} }
  @keyframes statsWeakBreath { 0%,100%{filter:brightness(1);}50%{filter:brightness(.85);} }
  @keyframes statsStrongIn { 0%,60%{opacity:0;filter:brightness(1);}65%{opacity:1;filter:brightness(2.5);}70%{filter:brightness(1);}93%{opacity:1;}97%{opacity:0;}100%{opacity:0;} }
  @keyframes mockupBreath { 0%,93%{transform:scale(1);opacity:1;}97%{transform:scale(.985);opacity:.7;}100%{transform:scale(1);opacity:1;} }
  @keyframes labelWeakOut { 0%,47%{opacity:1;}52%{opacity:0;}93%,97%{opacity:0;}100%{opacity:1;} }
  @keyframes labelStrongIn { 0%,52%{opacity:0;}57%{opacity:1;}93%{opacity:1;}97%{opacity:0;}100%{opacity:0;} }
  @keyframes whisperWeak {
    0%   { opacity: 0; transform: translateY(10px); text-shadow: 0 0 0 rgba(0,132,209,0); }
    8%   { opacity: 1; transform: translateY(0);    text-shadow: 0 0 34px rgba(0,132,209,.95), 0 0 70px rgba(0,132,209,.45); }
    14%  { text-shadow: 0 0 18px rgba(0,132,209,.5); }
    36%  { opacity: 1; transform: translateY(0); }
    44%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; }
  }
  @keyframes whisperStrong {
    0%, 70% { opacity: 0; transform: translateY(12px); text-shadow: 0 0 0 rgba(255,255,255,0); }
    78%  { opacity: 1; transform: translateY(0); text-shadow: 0 0 30px rgba(255,255,255,.9), 0 0 80px rgba(0,132,209,.6); }
    84%  { text-shadow: 0 0 14px rgba(255,255,255,.35), 0 0 40px rgba(0,132,209,.45); }
    93%  { opacity: 1; }
    97%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; }
  }
  @keyframes whisperLinie {
    0%, 80% { width: 0; opacity: 0; }
    81%  { opacity: 1; }
    88%  { width: 58%; opacity: 1; }
    93%  { width: 58%; opacity: 1; }
    97%, 100% { width: 58%; opacity: 0; }
  }
  @keyframes sweepRun { 0%,42%{left:-30%;opacity:0;}44%{opacity:1;}47%{left:30%;}50%{left:60%;}54%{left:100%;opacity:1;}56%{opacity:0;}100%{left:100%;opacity:0;} }

  .mockup { animation: mockupBreath 15s infinite ease-in-out; }
  .banner.weak { animation: bannerWeakOut 15s infinite ease-in-out; }
  .banner.strong { animation: bannerStrongIn 15s infinite ease-in-out; }
  .weak-overlay { animation: weakOverlayFade 15s infinite ease-in-out; }
  .pb.weak { animation: pbWeakOut 15s infinite ease-in-out; }
  .pb.strong { animation: pbStrongIn 15s infinite ease-in-out; }
  .verify { animation: verifyPop 15s infinite ease-in-out; }
  .stats.weak { animation: statsWeakOut 15s infinite ease-in-out, statsWeakBreath 3s infinite ease-in-out; }
  .stats.strong { animation: statsStrongIn 15s infinite ease-in-out; }
  .sweep { animation: sweepRun 15s infinite ease-in-out; }
  .label.weak { animation: labelWeakOut 15s infinite ease-in-out; }
  .label.strong { animation: labelStrongIn 15s infinite ease-in-out; }
  .whisper-weak { animation: whisperWeak 15s infinite ease-in-out; }
  .whisper-strong { animation: whisperStrong 15s infinite ease-in-out; }

  
  /* ============================================================
     SEKTION 1.5 — MANTRA-PAUSE (zwischen Hero und Brücke)
     ============================================================ */
  .mantra-section {
    width: 100%;
    background: var(--bg-darker);
    padding: 30px 24px 0;
    position: relative;
    overflow: hidden;
  }
  .mantra-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
  }
  .mantra-glow {
    position: absolute;
    inset: -50px;
    background: radial-gradient(ellipse at 50% 50%,
      rgba(0,132,209,0.08) 0%,
      rgba(255,122,0,0.06) 30%,
      transparent 70%);
    filter: blur(40px);
    opacity: 0;
    transition: opacity 1.5s ease;
    pointer-events: none;
  }
  .mantra-section.in-view .mantra-glow {
    opacity: 1;
    animation: mantraBreath 6s infinite ease-in-out;
  }
  @keyframes mantraBreath {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
  }

  .mantra-text {
    font-family: 'Caveat', cursive;
    font-size: clamp(40px, 5.5vw, 64px);
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0;
    line-height: 1.15;
    text-shadow: 0 0 30px rgba(255,122,0,0.25);
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0.35em;
    flex-wrap: wrap;
  }

  .mantra-word {
    opacity: 0;
    transform: translateY(12px);
    display: inline-block;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .mantra-section.in-view .mantra-word[data-word="0"],
  .promo-intro.in-view .mantra-word[data-word="0"] {
    opacity: 1; transform: translateY(0);
    transition-delay: 0.2s;
  }
  .mantra-section.in-view .mantra-word[data-word="1"],
  .promo-intro.in-view .mantra-word[data-word="1"] {
    opacity: 1; transform: translateY(0);
    transition-delay: 0.55s;
  }
  .mantra-section.in-view .mantra-word[data-word="2"],
  .promo-intro.in-view .mantra-word[data-word="2"] {
    opacity: 1; transform: translateY(0);
    transition-delay: 0.9s;
  }
  /* Glow auf dem letzten Wort des Mantras ("einfach.") */
  .mantra-section.in-view .mantra-word[data-word="2"] {
    animation:
      lastWordGlow 2.5s ease-out 1.4s forwards,
      lastWordGlowLoop 6s ease-out 12.4s infinite;
  }
  /* Glow auf dem mittleren Wort der Promo-Intro ("klick") */
  .promo-intro.in-view .mantra-word[data-word="1"] {
    animation:
      lastWordGlow 2.5s ease-out 1.4s forwards,
      lastWordGlowLoop 6s ease-out 12.4s infinite;
  }
  @keyframes lastWordGlow {
    0% {
      text-shadow: 0 0 30px rgba(255,122,0,0.3);
      filter: brightness(1);
    }
    30% {
      text-shadow:
        0 0 40px rgba(255,122,0,1),
        0 0 80px rgba(0,132,209,0.6);
      filter: brightness(1.55);
    }
    100% {
      text-shadow: 0 0 30px rgba(255,122,0,0.3);
      filter: brightness(1);
    }
  }
  @keyframes lastWordGlowLoop {
    0%, 100% {
      text-shadow: 0 0 30px rgba(255,122,0,0.3);
      filter: brightness(1);
    }
    10% {
      text-shadow:
        0 0 40px rgba(255,122,0,1),
        0 0 80px rgba(0,132,209,0.6);
      filter: brightness(1.55);
    }
    20% {
      text-shadow: 0 0 30px rgba(255,122,0,0.3);
      filter: brightness(1);
    }
  }

  /* ============================================================
     SEKTION 4 — SCHNELLCHECK-BLOCK
     ============================================================ */
  .quickcheck {
    width: 100%;
    background: #080808;
    padding: 30px 24px 80px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .quickcheck-bg-pulse {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(0,132,209,0.18) 0%,
      rgba(0,132,209,0.06) 30%,
      transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    animation: pulseBackground 5s infinite ease-in-out;
  }
  @keyframes pulseBackground {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  }
  .quickcheck-inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .quickcheck-headline {
    text-align: center;
    margin-bottom: 0;
  }
  .quickcheck-cols {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }
  .quickcheck-text {
    text-align: center;
    max-width: 700px;
  }

  /* Figur rechts: größer, horizontal mittig in der Spalte */
  .quickcheck-figure {
    position: relative;
    width: 100%;
    max-width: 320px;
    justify-self: center;
  }
  .quickcheck-figure-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    /* animation entfernt — Bewegung wird via JS gesteuert (random) */
  }
  /* Glow um den Tritt-/Aufprall-Bereich (rechts unten) */
  .quickcheck-figure-glow {
    position: absolute;
    /* Kopf der Frau sitzt oben links im PNG */
    top: -10px;
    left: -15px;
    width: 70%;
    height: 50%;
    background: radial-gradient(circle at 40% 40%,
      rgba(255,122,0,0.35) 0%,
      rgba(0,132,209,0.15) 40%,
      transparent 70%);
    filter: blur(22px);
    z-index: 1;
    pointer-events: none;
    animation: kickPulse 1.8s infinite ease-in-out;
  }
  @keyframes kickPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.18); }
  }
  .quickcheck-anti {
    font-size: clamp(15px, 1.3vw, 17px);
    font-style: italic;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 0.1px;
    line-height: 1.5;
    margin-bottom: 24px;
    text-shadow: 0 0 24px rgba(0,132,209,0.3);
  }
  .quickcheck-headline {
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin-bottom: 0;
    text-align: center;
  }
  .quickcheck-lead {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--text);
    max-width: 720px;
    margin: 0 auto 40px;
  }
  .quickcheck-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Größerer Hauptbutton */
  .btn-large {
    padding: 18px 36px;
    font-size: 17px;
    letter-spacing: 0.4px;
  }

  /* Outline-Cyan-Button (Variante mit Cyan-Border) */

  /* ============================================================
     SEKTION 5 — PROFIL-GUIDE-ANKER (Topseller)
     ============================================================ */
  .guide-anchor {
    width: 100%;
    background: var(--bg-dark);
    background-image:
      radial-gradient(ellipse at 20% 50%, rgba(0,132,209,0.06) 0%, transparent 55%),
      radial-gradient(ellipse at 90% 50%, rgba(255,122,0,0.04) 0%, transparent 55%);
    padding: 60px 24px 90px;
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .guide-anchor-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 64px;
    align-items: center;
  }

  /* Cover-Bereich */
  .guide-cover-link {
    position: relative;
    display: block;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: guideFloat 6s infinite ease-in-out;
  }
  @keyframes guideFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .guide-cover-link:hover {
    transform: translateY(-12px);
    animation: none;
  }

  .guide-cover {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow:
      0 30px 60px rgba(0,0,0,0.6),
      0 10px 30px rgba(0,0,0,0.4),
      0 0 0 1px rgba(255,255,255,0.08);
    position: relative;
    z-index: 2;
    transition: box-shadow 0.5s ease;
  }
  .guide-cover-link:hover .guide-cover {
    box-shadow:
      0 40px 80px rgba(0,0,0,0.7),
      0 0 60px rgba(0,132,209,0.25),
      0 0 0 1px rgba(0,132,209,0.3);
  }

  .guide-cover-glow {
    position: absolute;
    inset: -30px;
    background: radial-gradient(ellipse at center,
      rgba(0,132,209,0.18) 0%,
      rgba(0,132,209,0.06) 40%,
      transparent 70%);
    filter: blur(40px);
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  .guide-cover-link:hover .guide-cover-glow {
    opacity: 1;
  }

  /* Text-Bereich */
  .guide-text {
    color: var(--text);
  }

  .guide-headline {
    font-size: clamp(32px, 4.2vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.6px;
    margin-bottom: 12px;
    color: var(--text);
  }

  .guide-subline {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 700;
    color: var(--cyan);
    margin-bottom: 24px;
    letter-spacing: 0.1px;
  }

  .guide-lead {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--text-dim);
    margin-bottom: 36px;
    max-width: 560px;
  }

  .guide-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    border: 2px solid var(--cyan);
    color: var(--cyan);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
  }
  .guide-cta:hover {
    background: var(--cyan);
    color: white;
    gap: 16px;
    box-shadow: 0 6px 24px rgba(0,132,209,0.4);
  }
  .guide-cta .arrow {
    transition: transform 0.3s ease;
  }
  .guide-cta:hover .arrow {
    transform: translateX(4px);
  }

  /* ============================================================
     SEKTION 6 — WERTE: SO ARBEITEN WIR
     ============================================================ */
  /* Sektion: leicht heller als Nachbarn, klare Abgrenzungslinien oben/unten */
  .values {
    width: 100%;
    background: #0e0e0e;
    padding: 70px 24px 75px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(0,132,209,0.12);
    border-bottom: 1px solid rgba(0,132,209,0.12);
  }
  /* Sehr dezenter zentraler Glow im Hintergrund */
  .values::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; height: 60%;
    background: radial-gradient(ellipse at center,
      rgba(0,132,209,0.05) 0%,
      transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
  }
  .values-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .values-headline {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    margin-bottom: 50px;
    color: var(--text);
  }

  /* === WERTE-KETTE — Knoten auf einer Cyan-Verbindungslinie === */
  .values-chain {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 0;
  }

  /* Verbindungslinie horizontal durch die Knoten-Mitte */
  .values-chain::before {
    content: '';
    position: absolute;
    top: 38px; /* Mitte des Knotens (76px / 2) */
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg,
      rgba(0,132,209,0) 0%,
      rgba(0,132,209,.45) 8%,
      rgba(0,132,209,.85) 50%,
      rgba(0,132,209,.45) 92%,
      rgba(0,132,209,0) 100%);
    box-shadow: 0 0 18px rgba(0,132,209,.45);
    z-index: 1;
    animation: chainPulse 5s ease-in-out infinite;
  }

  @keyframes chainPulse {
    0%, 100% { opacity: .75; box-shadow: 0 0 14px rgba(0,132,209,.35); }
    50%      { opacity: 1;   box-shadow: 0 0 24px rgba(0,132,209,.6); }
  }

  .value-item {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 12px;
  }
  /* Einzug der Werte-Kette (Christian 03.09.): erst zeichnet sich die Linie von links,
     dann gleiten die vier Stationen nacheinander herein (Stagger per Skript). Ohne Skript
     (html ohne .js) bleibt alles sofort sichtbar. */
  .js .values-chain::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
  .js .values-chain.in-view::before { transform: scaleX(1); }
  .js .value-item { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .js .value-item.in-view { opacity: 1; transform: none; }

  /* Der "Knoten" auf der Kette: kreisrund, mit Icon */
  .value-node {
    width: 76px;
    height: 76px;
    margin: 0 auto 26px;
    border-radius: 50%;
    border: 2px solid #0084D1;
    background: #0e0e0e;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
      0 0 0 8px #0e0e0e,
      0 0 28px rgba(0,132,209,.45),
      inset 0 0 14px rgba(0,132,209,.15);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    animation: nodeGlow 5.5s ease-in-out infinite;
  }

  .value-node svg {
    width: 34px;
    height: 34px;
    color: #0084D1;
    filter: drop-shadow(0 0 8px rgba(0,132,209,.5));
  }

  /* Versetzter Glow-Atmer pro Knoten */
  .value-item:nth-child(1) .value-node { animation-delay: 0s; }
  .value-item:nth-child(2) .value-node { animation-delay: 1s; }
  .value-item:nth-child(3) .value-node { animation-delay: 2s; }
  .value-item:nth-child(4) .value-node { animation-delay: 3s; }

  @keyframes nodeGlow {
    0%, 100% {
      box-shadow:
        0 0 0 8px #0e0e0e,
        0 0 22px rgba(0,132,209,.35),
        inset 0 0 12px rgba(0,132,209,.12);
    }
    50% {
      box-shadow:
        0 0 0 8px #0e0e0e,
        0 0 36px rgba(0,132,209,.6),
        inset 0 0 16px rgba(0,132,209,.22);
    }
  }

  /* Hover: Knoten lupft sich, Glow intensiver */
  .value-node:hover {
    transform: translateY(-4px) scale(1.05);
    border-color: rgba(0,132,209,1);
    animation: none;
    box-shadow:
      0 0 0 8px #0e0e0e,
      0 0 44px rgba(0,132,209,.7),
      inset 0 0 16px rgba(0,132,209,.25);
  }

  .value-headline {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text);
    margin-bottom: 16px;
  }

  .value-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 320px;
    margin: 0 auto;
  }
  /* === Guide-Intro: Übergang vor dem Profil-Guide-Block === */
  .guide-intro {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
    position: relative;
    padding: 0 24px;
  }

  .guide-intro-arrow {
    width: 26px;
    height: 34px;
    margin: 0 auto 24px;
    color: var(--cyan);
    opacity: 0.85;
    filter: drop-shadow(0 0 14px rgba(0,132,209,0.4));
    animation: arrowDrift 2.5s infinite ease-in-out;
  }
  .guide-intro-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  @keyframes arrowDrift {
    0%, 100% {
      opacity: 0.55;
      transform: translateY(-4px);
    }
    50% {
      opacity: 1;
      transform: translateY(4px);
    }
  }

  .guide-intro-headline {
    font-size: clamp(28px, 4.2vw, 44px);
    font-style: normal;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: -0.2px;
    line-height: 1.15;
    margin: 0 0 12px;
    text-shadow: 0 0 32px rgba(255,122,0,0.35);
    text-align: center;
  }

  /* ============================================================
     SEKTION 8 — PROMO-CLIP (Vertiefungs-Sektion)
     ============================================================ */
  .promo {
    width: 100%;
    background: var(--bg-darker);
    background-image:
      radial-gradient(ellipse at 50% 35%, rgba(0,132,209,0.10) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 100%, rgba(0,132,209,0.04) 0%, transparent 50%);
    padding: 30px 24px 30px;
    overflow: hidden;
    position: relative;
  }
  .promo-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
  }

  /* Promo-Intro — Spiegel zum guide-intro: gleiche Struktur, kleinere Geste */
  .promo-intro {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
    position: relative;
    padding: 0 24px;
  }

  /* Eyebrow — in Caveat, alle Parameter wie .mantra-text (Word-by-Word + Orange) */
  .promo-intro-eyebrow {
    font-family: 'Caveat', cursive;
    font-size: clamp(40px, 5.5vw, 64px);
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0;
    line-height: 1.15;
    text-shadow: 0 0 30px rgba(255,122,0,0.25);
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0.35em;
    flex-wrap: wrap;
    margin: 0 0 18px;
  }
  .promo-intro-divider {
    width: 100%;
    max-width: 280px;
    height: 1px;
    margin: 0 auto 32px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0,132,209,0.95) 50%,
      transparent 100%);
    box-shadow: 0 0 18px rgba(0,132,209,0.6);
    opacity: 1;
  }
  .promo-intro-headline {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--text);
    margin: 0 0 20px;
    text-align: center;
  }
  .promo-intro-headline .accent-cyan {
    color: var(--cyan);
  }
  .promo-intro-subline {
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 600;
    color: var(--orange);
    margin: 0 auto 12px;
    line-height: 1.55;
    max-width: 620px;
    text-shadow: 0 0 18px rgba(255,122,0,0.25);
  }
  .promo-intro-values {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: var(--text-dim);
    max-width: 580px;
    margin: 0 auto;
  }

  /* Bühne — Video als Star, Spotlight von oben, Halo rundherum */
  .promo-stage {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
  }
  .promo-stage-halo {
    position: absolute;
    inset: -80px;
    background: radial-gradient(ellipse at center,
      rgba(0,132,209,0.26) 0%,
      rgba(0,132,209,0.10) 35%,
      rgba(0,132,209,0.03) 60%,
      transparent 80%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
    animation: stageHaloBreath 5s infinite ease-in-out;
  }
  @keyframes stageHaloBreath {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
  }
  .promo-stage-beam {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 130px;
    background: radial-gradient(ellipse at 50% 0%,
      rgba(0,132,209,0.32) 0%,
      rgba(0,132,209,0.10) 30%,
      transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
    animation: beamPulse 4s infinite ease-in-out;
  }
  @keyframes beamPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.85; }
  }

  /* Schnellcheck — interner Trennstrich + Kontakt-Teil */

  /* ============================================================
     SCHLUSS-KONTAKT (am Seitenende, nach Guide-Anchor)
     ============================================================ */
  .contact-end {
    width: 100%;
    background: var(--bg-darker);
    padding: 70px 24px 60px;
    text-align: center;
  }
  .contact-end-inner {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Contact-End — PG-Style (Caveat, konsistent zu PG-Detail) */
  .pg-contact-script {
    font-family: 'Caveat', cursive;
    font-size: clamp(38px, 4.5vw, 62px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 28px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .pg-contact-script.pg-in-view { opacity: 1; transform: translateY(0); }
  .pg-contact-dann {
    font-family: Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,.4);
    letter-spacing: .08em;
    margin: 0 0 6px;
  }
  .pg-contact-link {
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 44px);
    color: #FF7A00 !important;
    text-decoration: underline;
    text-decoration-color: rgba(255,122,0,.35);
    text-underline-offset: 6px;
    line-height: 1.2;
    margin: 4px 0 0;
    animation: pg-abo-pulse 3.5s ease-in-out infinite;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease .15s, transform .6s ease .15s;
  }
  .pg-contact-link.pg-in-view { opacity: 1; transform: translateY(0); }
  .pg-contact-link:hover { text-decoration-color: rgba(255,122,0,.8) !important; }
  .pg-contact-hint {
    color: rgba(255,255,255,.3);
    font-size: 16px;
    letter-spacing: .06em;
    margin: 18px 0 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .6s ease .3s, transform .6s ease .3s;
  }
  .pg-contact-hint.pg-in-view { opacity: 1; transform: translateY(0); }
  @keyframes pg-abo-pulse {
    0%, 100% { transform: scale(1); text-shadow: none; }
    50% { transform: scale(1.07); text-shadow: 0 0 22px rgba(255,122,0,.55); }
  }
  .contact-end-sub {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--text-dim);
    max-width: 620px;
    margin: 26px auto 18px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .6s ease .3s, transform .6s ease .3s;
  }
  .contact-end-sub.pg-in-view { opacity: 1; transform: translateY(0); }
  .contact-end-promise {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.5;
    color: var(--text);
    max-width: 540px;
    margin: 0 auto 36px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .6s ease .45s, transform .6s ease .45s;
  }
 .contact-end-promise.pg-in-view {
  opacity: 1;
  transform: translateY(0);
  animation: contactPromisePulse 3.0s ease-in-out 0.5s infinite;
}

@keyframes contactPromisePulse {
  0%, 100% {
    color: var(--text);
    text-shadow: 0 0 0 rgba(0,132,209,0);
    filter: brightness(1);
  }

  45%, 55% {
    color: #ffffff;
    text-shadow:
      0 0 10px rgba(255,255,255,0.55),
      0 0 24px rgba(0,132,209,0.55),
      0 0 42px rgba(0,132,209,0.28);
    filter: brightness(1.22);
  }
}

.contact-end-helper {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease .6s, transform .6s ease .6s;
}
  .contact-end-helper.pg-in-view { opacity: 1; transform: translateY(0); }
  .contact-end-helper a {
    color: var(--cyan);
    text-decoration: underline;
    text-decoration-color: rgba(0,132,209,0.4);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
  .contact-end-helper a:hover {
    color: var(--orange);
    text-decoration-color: var(--orange);
  }
  /* Startseite-spezifisch: Caveat-Größen für längeren Text */
  .contact-end .pg-contact-script {
    font-size: clamp(28px, 3.6vw, 44px);
  }
  .contact-end .pg-contact-link {
    font-size: clamp(28px, 3.2vw, 42px);
  }

  /* Schnellcheck — Detail-Zeile mit den 5 Fragen-Bereichen */
  .quickcheck-detail {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 640px;
    margin: -20px auto 40px;
  }

  /* Helper-Link in der Kontakt-Helfer-Zeile */

  /* Mini-Pfeil-Leitsystem zwischen Sektionen */
  .nav-arrow {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
    background: var(--bg-darker);
    position: relative;
    z-index: 5;
  }
  .nav-arrow.nav-arrow-close {
    padding: 0 0 8px 0;
    margin-top: -10px;
  }

  .nav-arrow svg {
    width: 26px;
    height: 34px;
    color: var(--cyan);
    opacity: 0.85;
    filter: drop-shadow(0 0 14px rgba(0,132,209,0.4));
    animation: navArrowDrift 3s infinite ease-in-out;
  }
  @keyframes navArrowDrift {
    0%, 100% { transform: translateY(-4px); opacity: 0.7; }
    50% { transform: translateY(4px); opacity: 1; }
  }

  /* === Profil-Guide-Frame: Sucher-Akzente + atmender Glow === */
  .guide-frame {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 60px;
    border: 1px solid rgba(0,132,209,0.28);
    border-radius: 6px;
    background: rgba(0,132,209,0.015);
    box-shadow: 0 0 30px rgba(0,132,209,0.08);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
  }
  .guide-frame:hover {
    border-color: rgba(0,132,209,0.55);
    box-shadow: 0 0 50px rgba(0,132,209,0.18);
  }

  /* Sucher-Winkel an den vier Ecken */
  .frame-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: none;
    z-index: 2;
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  }
  .frame-corner::before,
  .frame-corner::after {
    content: '';
    position: absolute;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan-glow);
    transition: background 0.3s ease;
  }
  /* Horizontaler Strich */
  .frame-corner::before {
    height: 2px;
    width: 100%;
    top: 0; left: 0;
  }
  /* Vertikaler Strich */
  .frame-corner::after {
    width: 2px;
    height: 100%;
    top: 0; left: 0;
  }

  /* Position der vier Ecken */
  .frame-corner.tl { top: -1px; left: -1px; }
  .frame-corner.tr {
    top: -1px; right: -1px;
    transform: scaleX(-1);
  }
  .frame-corner.bl {
    bottom: -1px; left: -1px;
    transform: scaleY(-1);
  }
  .frame-corner.br {
    bottom: -1px; right: -1px;
    transform: scale(-1);
  }

  /* Atmender Glow im Hintergrund */
  .frame-glow {
    position: absolute;
    inset: -30px;
    background: radial-gradient(ellipse at center,
      rgba(0,132,209,0.12) 0%,
      rgba(0,132,209,0.04) 40%,
      transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: frameGlowBreath 5s infinite ease-in-out;
  }
  @keyframes frameGlowBreath {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
  }

  /* guide-anchor-inner soll relativ über dem Glow sitzen */
  .guide-frame .guide-anchor-inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
  }

  /* Hover am ganzen Frame: Winkel werden größer und leuchten stärker */
  .guide-frame:hover .frame-corner {
    width: 40px;
    height: 40px;
  }
  .guide-frame:hover .frame-corner::before,
  .guide-frame:hover .frame-corner::after {
    box-shadow: 0 0 18px rgba(0,132,209,0.9);
  }
  .guide-frame:hover .frame-glow {
    animation-duration: 3s;
  }

  /* Mobile: Frame-Padding reduzieren */
  @media (max-width: 900px) {
    .guide-frame { padding: 50px 30px; }
    .frame-corner { width: 22px; height: 22px; }
  }
  @media (max-width: 600px) {
    .frame-corner { width: 18px; height: 18px; }
  }

  /* === Promo-Clip — Bühne mit Vignette + Herzschlag-Play === */
  .promo-video-wrapper {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow:
      0 40px 90px rgba(0,0,0,0.75),
      0 0 60px rgba(0,132,209,0.18),
      0 0 0 1px rgba(0,132,209,0.35);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.5s ease;
  }
  .promo-video-wrapper:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow:
      0 50px 110px rgba(0,0,0,0.8),
      0 0 90px rgba(0,132,209,0.4),
      0 0 0 1px rgba(0,132,209,0.6);
  }
  .promo-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    background: #000;
  }

  /* Vignette über dem Video — öffnet sich beim Hover */
  .promo-video-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.35) 100%);
    transition: opacity 0.6s ease;
    opacity: 1;
  }
  .promo-video-wrapper:hover .promo-video-vignette {
    opacity: 0.5;
  }

  /* Innerer Glow näher am Frame */
  .promo-video-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(ellipse at center,
      rgba(0,132,209,0.22) 0%,
      rgba(0,132,209,0.06) 45%,
      transparent 75%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: promoGlowBreath 4.5s infinite ease-in-out;
    opacity: 0.85;
  }
  @keyframes promoGlowBreath {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
  }
  .promo-video-wrapper:hover .promo-video-glow {
    animation-duration: 2.5s;
  }

  /* Play-Overlay — Herzschlag */
  .promo-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    font-family: inherit;
    transition: background 0.3s ease, opacity 0.4s ease;
  }
  .promo-play-overlay:hover {
    background: rgba(0,0,0,0.15);
  }
  .promo-play-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
  }

  .promo-play-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 0 0 0 rgba(0,132,209,0.7),
      0 16px 40px rgba(0,132,209,0.55);
    animation: promoHeartbeat 1.6s infinite ease-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .promo-play-circle svg {
    width: 42px;
    height: 42px;
    color: white;
    margin-left: 5px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  }
  /* Herzschlag: zwei Schläge dicht hintereinander */
  @keyframes promoHeartbeat {
    0% {
      box-shadow:
        0 0 0 0 rgba(0,132,209,0.7),
        0 16px 40px rgba(0,132,209,0.55);
      transform: scale(1);
    }
    14% { transform: scale(1.06); }
    28% {
      box-shadow:
        0 0 0 18px rgba(0,132,209,0.05),
        0 16px 40px rgba(0,132,209,0.55);
      transform: scale(1);
    }
    42% { transform: scale(1.04); }
    56% {
      box-shadow:
        0 0 0 30px rgba(0,132,209,0),
        0 16px 40px rgba(0,132,209,0.55);
      transform: scale(1);
    }
    100% {
      box-shadow:
        0 0 0 0 rgba(0,132,209,0),
        0 16px 40px rgba(0,132,209,0.55);
      transform: scale(1);
    }
  }
  .promo-video-wrapper:hover .promo-play-circle {
    transform: scale(1.1);
    box-shadow:
      0 0 0 12px rgba(0,132,209,0.18),
      0 20px 50px rgba(0,132,209,0.75);
  }

  .promo-play-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 0 18px rgba(0,0,0,0.7);
  }

  /* Cyan-Linie als finaler Vorhang — Schlusspunkt der Seite, statisch */
  .promo-end-line {
    width: 140px;
    height: 1px;
    margin: 70px auto 0;
    background: var(--cyan);
    box-shadow: 0 0 16px var(--cyan-glow);
    opacity: 0.7;
  }

/* Responsive */
  @media (max-width: 1100px) {
    .ways-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .hero { padding: 0 0 28px; }
    .hero-inner { padding: 52px 20px 20px; }
    .hero-headline { font-size: clamp(30px, 8.2vw, 44px); text-wrap: initial; }
    .mockup-wrapper { max-width: none; }
    .mockup { border-radius: 0; margin: 0 -20px; width: auto; box-shadow: 0 20px 50px rgba(0,0,0,.6); } /* Banner randlos */
    .whisper-container { height: 46px; }
    .whisper { font-size: clamp(20px, 6vw, 24px); } /* Pointe einzeilig auf 390 px */
    .bridge { padding: 60px 18px; }
    .ways { padding: 50px 18px 70px; }
    .ways-grid { grid-template-columns: 1fr; gap: 18px; }

    .btn { width: 100%; }
    .card { min-height: auto; padding: 28px 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .banner.strong, .pb.strong, .stats.strong, .verify { opacity: 1 !important; transform: scale(1) !important; }
    .banner.weak, .pb.weak, .stats.weak, .weak-overlay, .label.weak, .whisper-weak { opacity: 0 !important; }
    .card { opacity: 1 !important; transform: none !important; }
    .mantra-word { opacity: 1 !important; transform: none !important; }
    .mantra-glow { opacity: 1 !important; }
    .quickcheck-figure-glow { opacity: 0.7 !important; transform: none !important; }
    .nav-arrow svg { animation: none !important; transform: none !important; opacity: 0.5 !important; }
    .js .value-item { opacity: 1 !important; transform: none !important; }
    .js .values-chain::before { transform: none !important; }
  }

/* MOBILE RESPONSIVE — fehlende Sektionen       */
/* ============================================ */
@media (max-width: 900px) {
  .values-chain {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 0;
  }
  .values-chain::before {
    display: none;
  }
  .quickcheck-cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .quickcheck-figure { max-width: 200px; margin: 0 auto; order: -1; }
  .bridge-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
  .bridge-figure { max-width: 100px; margin: 0 auto; }
  .guide-anchor-inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
    width: 100%;
  }
  .guide-cover-link { display: block; width: 100%; }
  .guide-cover { display: block; margin: 0 auto; max-width: 280px; width: 100%; }
  .guide-text { width: 100%; }
  .promo-inner { padding: 50px 18px; }
}

@media (max-width: 600px) {
  .promo-intro-headline br { display: none; }
}

@media (max-width: 600px) {
  .values-chain {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .quickcheck { padding: 50px 18px 60px; }
  .quickcheck-headline { font-size: clamp(22px, 6vw, 32px); }
  .guide-anchor { padding: 40px 18px; }
  .guide-frame { padding: 32px 16px; }
  .guide-anchor-inner { gap: 24px; }
  .guide-cover { max-width: 180px; }
  .promo-play-circle { width: 72px; height: 72px; }
  .promo-play-circle svg { width: 32px; height: 32px; }
}

/* ============================================ */
/* FOOTER MOBIL — zentriert                     */
/* ============================================ */
@media (max-width: 600px) {
  .ct-footer,
  .ct-footer .ct-container,
  .ct-footer nav,
  .ct-footer ul,
  .ct-footer p,
  .ct-footer div { text-align: center !important; justify-content: center !important; }
}
/* TEST: Profil-Schnellcheck sichtbar korrekt schalten */
.psc-screen {
  display: none !important;
}

.psc-screen.active {
  display: block !important;
}

.psc {
  width: 100%;
  background: #0a0a0a;
  padding: 70px 24px 90px;
  text-align: center;
  color: #fff;
  font-family: 'Carlito', 'Helvetica Neue', Arial, sans-serif;
}

.psc-box {
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 58px);
  background: #161616;
  border: 1px solid rgba(0,132,209,0.28);
  border-radius: 10px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 50px rgba(0,132,209,0.12);
}

.psc-eyebrow {
  color: #0084D1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.psc h1,
.psc h2 {
  color: #fff;
  line-height: 1.2;
  margin: 0 0 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.psc h1 {
  font-size: clamp(32px, 4.2vw, 46px);
}

.psc h2 {
  font-size: clamp(26px, 3.4vw, 38px);
}

.psc p {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  max-width: 660px;
  margin: 0 auto 30px;
}

.psc-btn,
.psc-option,
.psc-reset {
  font-family: inherit;
  cursor: pointer;
}

.psc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  background: #0084D1;
  color: #fff;
  border: 2px solid #0084D1;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  transition: all .25s ease;
}

.psc-btn:hover {
  background: #006db5;
  border-color: #006db5;
  transform: translateY(-2px);
}

.psc-count {
  color: #FF7A00;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 18px;
}

.psc-cat {
  color: #0084D1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.psc-options {
  display: grid;
  gap: 14px;
  max-width: 700px;
  margin: 32px auto 0;
}

.psc-option {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.75);
  padding: 17px 20px;
  font-size: 16px;
  line-height: 1.5;
  transition: all .22s ease;
}

.psc-option strong {
  color: #fff;
  margin-right: 8px;
}

.psc-option:hover {
  color: #fff;
  border-color: rgba(0,132,209,0.5);
  background: rgba(0,132,209,0.08);
  transform: translateY(-2px);
}

.psc-focus {
  display: inline-block;
  margin: 0 auto 28px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.psc-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 auto 24px;
}

.psc-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: all .25s ease;
}

.psc-actions .primary {
  background: #0084D1;
  color: #fff;
  border: 2px solid #0084D1;
  animation: pscGlowCyan 6s ease-in-out infinite;
}

.psc-actions .secondary {
  background: #FF7A00;
  color: #fff;
  border: 2px solid #FF7A00;
  animation: pscGlowOrange 6s ease-in-out infinite 3s;
}

@keyframes pscGlowCyan {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,132,209,0); }
  50%      { box-shadow: 0 0 40px 4px rgba(0,132,209,0.85); }
}
@keyframes pscGlowOrange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,0,0); }
  50%      { box-shadow: 0 0 40px 4px rgba(255,122,0,0.85); }
}

/* Hover übersteuert die Atem-Animation und setzt klaren Fokus */
.psc-actions .primary:hover {
  animation: none;
  background: #006db5;
  border-color: #006db5;
  box-shadow: 0 0 30px rgba(0,132,209,0.7);
}
.psc-actions .secondary:hover {
  animation: none;
  background: #e66e00;
  border-color: #e66e00;
  box-shadow: 0 0 30px rgba(255,122,0,0.7);
}

/* Cross-Dim — wenn ein Button gehovert wird, dimt der andere leise */
.psc-actions:hover .primary:not(:hover),
.psc-actions:hover .secondary:not(:hover) {
  opacity: 0.6;
}

.psc-reset {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================
   XXX AGENCY — Kopfzeile (Neubau 2026-09, Nachbau der WP/Blocksy-
   Kopfzeile: WEISSE Leiste, Logo links, gesperrtes Versal-Menü
   START · GUIDES ▾ · ANALYSE ▾ · COACHING ▾ · SHOP · KONTAKT,
   aktiver Punkt cyan) und Fußzeile.
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,10,.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: box-shadow .25s ease, background .25s ease;
}
.topbar.scrolled { background: rgba(10,10,10,.92); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 6px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 64px;
}
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { height: 52px; width: auto; display: block; filter: brightness(1.18); transition: filter .25s ease; }
.wordmark:hover img { filter: brightness(1.7); }
.topnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2.6rem; }
.topnav li { position: relative; }
.topnav a {
  font-family: Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.76); text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6em; line-height: 1; transition: color .2s ease;
}
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--nav-aktiv); text-shadow: 0 0 14px rgba(0,132,209,.45); }

.topnav .pfeil { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .8; }
/* Untermenüs: dunkles Feld, normale Schrift {
  position: absolute; left: -22px; top: calc(100% + 6px); min-width: 250px;
  background: #141416; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.55);
  padding: 4px 0; display: none; flex-direction: column; gap: 0; z-index: 101;
}
 /* Brücke fürs Überfahren */

.kopf-knopf { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.kopf-knopf svg { width: 26px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 860px) {
  .topbar-inner { padding: 8px 16px; min-height: 58px; }
  .wordmark img { height: 42px; }
  .kopf-knopf { display: inline-flex; }
  .topnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #0f0f10; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 12px 30px rgba(0,0,0,.35);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .topnav.offen { max-height: 80vh; overflow-y: auto; }
  .topnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .topnav a { width: 100%; padding: 14px 20px; font-size: 13px; border-top: 1px solid rgba(255,255,255,.06); justify-content: space-between; }

}
@media (prefers-reduced-motion: reduce) { .topbar, .topnav, .topnav a, .wordmark img { transition: none; } }
.fuss {
  background: var(--bg-darker);
  padding: 15px 24px 34px; /* + 70px Inhaltsabstand von main = ~85px wie live */
  text-align: center;
  font-family: Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
}
.fuss-menue { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 0 0 66px; }
.fuss-menue a {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8a8a8a; text-decoration: none; transition: color .2s ease;
}
.fuss-menue a:hover { color: #ffffff; }
.fuss-copy { color: #5f6b7d; font-size: 13px; line-height: 2; }
.fuss-copy p { margin: 0; }
.fuss-copy .trenner { display: inline-block; width: 1px; height: .9em; background: #3a3f48; margin: 0 10px; vertical-align: -.1em; }
.fuss-copy .herz { color: #5f6b7d; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .fuss { padding: 60px 20px 28px; }
  .fuss-menue { gap: 8px 18px; margin-bottom: 48px; }
}

/* Kontaktformular: rundes Häkchen-Feld + kursive Einwilligung (wie das FluentForm-Original), Pflichtstern */
.xxx-contact .fluentform input[type="checkbox"] { appearance: none; -webkit-appearance: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); background: transparent; position: relative; }
.xxx-contact .fluentform input[type="checkbox"]:checked { background: var(--cyan); border-color: var(--cyan); }
.xxx-contact .fluentform input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.xxx-contact .fluentform input[type="checkbox"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.xxx-contact .fluentform .ff-el-form-check-label { font-style: italic !important; }
.xxx-contact .fluentform .ff-el-is-required label::after { content: " *"; }
/* Kontaktformular: ⓘ-Hinweis unter dem Label (wie das FluentForm-Original), Tipp beim Überfahren/Fokus */
.xxx-contact .fluentform .ff-el-help-message { margin: -2px 0 8px; position: relative; }
.af-info { display: inline-flex; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--cyan); cursor: help; position: relative; vertical-align: middle; }
.af-info svg { width: 16px; height: 16px; fill: var(--cyan); stroke: #0a0a0a; stroke-width: 1.8; stroke-linecap: round; }
.af-info::after { content: attr(data-tipp); position: absolute; left: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: #1c1c1c; color: rgba(255,255,255,.9); font-size: 13.5px; font-style: italic; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(0,132,209,.35); box-shadow: 0 8px 20px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 5; }
.af-info:hover::after, .af-info:focus-visible::after { opacity: 1; }
@media (max-width: 640px) { .af-info::after { white-space: normal; width: min(70vw, 320px); } }
/* Kontaktformular: Spam-Fangfeld (nur für Bots sichtbar) + Quittungszeile */
.af-falle { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.xxx-contact .fluentform .af-quittung { margin-top: 16px; }
.xxx-contact .fluentform .af-quittung.fehler { color: #ff8a80; }
.xxx-contact .fluentform .ff-btn-submit[disabled] { opacity: .6; cursor: wait; }

/* Anker-Sprünge landen unter der klebenden Kopfzeile, nicht dahinter */
[id] { scroll-margin-top: 84px; }

/* Nach-oben-Knopf — 1:1 aus global-scrolltop-v2 (Alt-Projekt, 17.05.) */
.xxx-scrolltop {
  position: fixed; right: 22px; bottom: 22px; z-index: 9999;
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(0,132,209,.55); background: rgba(10,10,10,.86); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 22px rgba(0,132,209,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.xxx-scrolltop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.xxx-scrolltop:hover { background: rgba(0,132,209,.88); border-color: rgba(0,132,209,.95); box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 28px rgba(0,132,209,.35); transform: translateY(-2px); }
.xxx-scrolltop svg { width: 22px; height: 22px; display: block; }
@media (max-width: 620px) { .xxx-scrolltop { right: 16px; bottom: 16px; width: 42px; height: 42px; } .xxx-scrolltop svg { width: 20px; height: 20px; } }

@media (prefers-reduced-motion: reduce) { .topbar, .topnav, .topnav a, .topnav a::after, .wordmark img { transition: none; } }

/* ============================================================
   SCHNELLCHECK — Seite /schnellcheck/ (Inline-CSS des WP-Blocks)
   ============================================================ */

/* ============================================================
   KONTAKT — Seite /kontakt/ (Inline-CSS des WP-Blocks)
   ============================================================ */

/* ━━━ XXX AGENCY — KONTAKTSEITE V36 ━━━ */

.xxx-contact {
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:#0a0a0a;
  color:#fff;
  font-family:Carlito,Calibri,"Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  overflow:hidden;
  color-scheme:dark;
}

.xxx-contact * {
  box-sizing:border-box;
}

.xxx-contact a {
  color:inherit;
}

/* HERO */

.xxx-contact-hero {
  background:#111111;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(0,132,209,.14) 0%, transparent 62%);
  padding:61px 24px 45px;
  text-align:center;
}

.xxx-contact-hero-inner {
  max-width:980px;
  margin:0 auto;
}

.xxx-contact-hero-layout {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}

.xxx-contact-hero-figure {
  flex:0 0 170px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.xxx-contact-hero-figure img {
  width:100%;
  max-width:160px;
  height:auto;
  display:block;
  animation:xxxContactFigFloat 6s ease-in-out infinite;
}

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

.xxx-contact-hero-copy {
  flex:1 1 auto;
  max-width:760px;
  text-align:center;
}

.xxx-contact-title {
  font-size:clamp(38px,5vw,62px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:700;
  color:#fff;
  margin:0 0 22px;
}

.xxx-contact-title span {
  color:#FF7A00;
}

.xxx-contact-lead {
  max-width:760px;
  margin:0 auto;
  color:rgba(255,255,255,.78);
  font-size:clamp(17px,1.55vw,20px);
  line-height:1.65;
}

.xxx-contact-lead strong {
  color:#fff;
}

.xxx-contact-divider {
  width:100%;
  max-width:280px;
  height:1px;
  margin:34px auto 0;
  background:linear-gradient(90deg, transparent 0%, rgba(0,132,209,.95) 50%, transparent 100%);
  box-shadow:0 0 18px rgba(0,132,209,.6);
}

/* SECTION BASIS */

.xxx-contact-section {
  padding:78px 24px;
}

.xxx-contact-inner {
  max-width:1100px;
  margin:0 auto;
}

.xxx-contact-section.dark {
  background:#0a0a0a;
}

/* FORMULAR-BEREICH */

.xxx-contact-formbox {
  background:#161616;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:34px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}

.xxx-contact-formbox h2 {
  font-family:'Caveat',cursive;
  color:#fff;
  font-size:clamp(38px,4.8vw,56px);
  line-height:1.1;
  letter-spacing:0;
  font-weight:700;
  margin:0 0 14px;
  text-align:center;
}

.xxx-contact-formbox p {
  color:rgba(255,255,255,.74);
  font-size:16.5px;
  line-height:1.65;
  margin:0 auto 26px;
  max-width:620px;
  text-align:center;
}

/* PROMISE-STEMPEL (3 Mini-Karten unter "Deine Anfrage") */

.xxx-contact-promise {
  margin:0 0 26px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.xxx-contact-promise-card {
  background:rgba(0,132,209,.04);
  border:1px solid rgba(0,132,209,.20);
  border-radius:10px;
  padding:20px 14px 18px;
  text-align:center;
  position:relative;
  transition:border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.xxx-contact-promise-card:hover {
  border-color:rgba(0,132,209,.45);
  background:rgba(0,132,209,.085);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.35), 0 0 20px rgba(0,132,209,.15);
}

.xxx-contact-promise-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin:0 auto 12px;
  color:#0084D1;
  opacity:.95;
}

.xxx-contact-promise-icon svg {
  width:100%;
  height:100%;
  filter:drop-shadow(0 0 10px rgba(0,132,209,.35));
}

.xxx-contact-promise-label {
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  margin-bottom:8px;
}

.xxx-contact-promise-text {
  color:rgba(255,255,255,.68);
  font-size:13.5px;
  line-height:1.5;
  margin:0;
}

.xxx-contact-pregrid {
  max-width:1100px;
  margin:0 auto 34px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
}

.xxx-contact-pregrid.after-form > .xxx-contact-info {
  min-height:300px;
}

.xxx-contact-formcenter {
  max-width:760px;
  margin:0 auto;
}

.xxx-contact-pregrid.after-form {
  margin-top:58px;
  margin-bottom:0;
}

@media (max-width:860px) {
  .xxx-contact-pregrid {
    grid-template-columns:1fr;
  }
}

/* INFOBOXEN — Tönungs-Gradient statt farbigem Balken */

.xxx-contact-info {
  background:#161616;
  background-image:radial-gradient(ellipse at 0% 0%, rgba(0,132,209,.10) 0%, transparent 55%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:26px 26px 24px;
}

.xxx-contact-info.orange {
  background-image:radial-gradient(ellipse at 0% 0%, rgba(255,122,0,.10) 0%, transparent 55%);
}

.xxx-contact-info h3 {
  color:#fff;
  font-size:21px;
  line-height:1.25;
  font-weight:700;
  margin:0 0 12px;
}

.xxx-contact-info p {
  color:rgba(255,255,255,.73);
  font-size:16px;
  line-height:1.62;
  margin:0;
}

.xxx-contact-info strong {
  color:#fff;
}

.xxx-contact-list {
  list-style:none;
  padding:0;
  margin:18px 0 0;
}

.xxx-contact-list li {
  position:relative;
  padding-left:24px;
  color:rgba(255,255,255,.78);
  font-size:15.5px;
  line-height:1.55;
  margin:8px 0;
}

.xxx-contact-list li:before {
  content:"";
  position:absolute;
  left:0;
  top:.63em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#0084D1;
  box-shadow:0 0 14px rgba(0,132,209,.5);
}

.xxx-contact-info.orange .xxx-contact-list li:before {
  background:#FF7A00;
  box-shadow:0 0 14px rgba(255,122,0,.45);
}

/* DETAILS / NEUTRALE MAIL */

.xxx-contact-details {
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
}

.xxx-contact-details summary {
  color:#FF7A00;
  font-weight:700;
  font-size:15.5px;
  line-height:1.5;
  list-style:none;
  cursor:pointer;
}

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

.xxx-contact-details summary:after {
  content:" +";
  color:#FF7A00;
}

.xxx-contact-details[open] summary:after {
  content:" –";
}

.xxx-contact-steps {
  margin:16px 0 0;
  padding:0;
  counter-reset:mailsteps;
  list-style:none;
}

.xxx-contact-steps li {
  counter-increment:mailsteps;
  position:relative;
  padding-left:34px;
  color:rgba(255,255,255,.76);
  font-size:15.5px;
  line-height:1.55;
  margin:10px 0;
}

.xxx-contact-steps li:before {
  content:counter(mailsteps);
  position:absolute;
  left:0;
  top:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,122,0,.14);
  color:#FF7A00;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
}

.xxx-contact-note {
  margin-top:16px !important;
  color:rgba(255,255,255,.56) !important;
  font-size:14.5px !important;
  line-height:1.55 !important;
}

/* MINI-ARROW — Brücke Formular → Seriosität */

.xxx-contact-arrow {
  background:#0a0a0a;
  padding:16px 0;
  text-align:center;
  line-height:0;
}

.xxx-contact-arrow svg {
  width:26px;
  height:34px;
  color:#0084D1;
  opacity:.85;
  filter:drop-shadow(0 0 14px rgba(0,132,209,.4));
  animation:xxxContactArrowDrift 3s infinite ease-in-out;
}

@keyframes xxxContactArrowDrift {
  0%, 100% { transform:translateY(-4px); opacity:.7; }
  50% { transform:translateY(4px); opacity:1; }
}

/* SERIOSITÄT */

.xxx-contact-serious {
  background:#0a0a0a;
  background-image:
    radial-gradient(ellipse at 20% 40%, rgba(0,132,209,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(255,122,0,.07) 0%, transparent 55%);
  padding:84px 24px;
  text-align:center;
}

.xxx-contact-serious-inner {
  max-width:1080px;
  margin:0 auto;
  background:#111111;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:46px 30px;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
}

.xxx-contact-serious-layout {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

.xxx-contact-serious-copy {
  flex:1 1 auto;
  max-width:760px;
  text-align:center;
}

.xxx-contact-serious-love {
  flex:0 0 160px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.xxx-contact-serious-love img {
  display:block;
  width:100%;
  max-width:150px;
  height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));
  animation:xxxContactSeriousSwing 6.5s ease-in-out infinite;
}

@keyframes xxxContactSeriousSwing {
  0%, 100% { transform:translateX(0); }
  50% { transform:translateX(8px); }
}

.xxx-contact-serious h2 {
  color:#fff;
  font-size:clamp(27px,3.6vw,42px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 18px;
}

.xxx-contact-serious h2 span {
  color:#FF7A00;
}

.xxx-contact-serious p {
  color:rgba(255,255,255,.76);
  font-size:17px;
  line-height:1.7;
  margin:0 auto;
  max-width:720px;
}

.xxx-contact-mantra {
  margin-top:28px;
  color:#0084D1;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.35;
  font-weight:700;
  text-shadow:0 0 22px rgba(0,132,209,.28);
}

/* ━━━ FLUENT FORMS — Dark-Theme Override ━━━ */

.xxx-contact .fluentform {
  font-family:Carlito,Calibri,"Helvetica Neue",Arial,sans-serif !important;
  color:#fff !important;
}

/* Label */
.xxx-contact .fluentform .ff-el-input--label label,
.xxx-contact .fluentform label.ff-el-input--label {
  color:#fff !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  margin-bottom:8px !important;
  display:block !important;
}

/* Required-Stern */
.xxx-contact .fluentform .ff-el-is-required label::after {
  color:#FF7A00 !important;
}

/* Spacing zwischen Feldern */
.xxx-contact .fluentform .ff-el-group,
.xxx-contact .fluentform .ff-t-cell {
  margin-bottom:18px !important;
}

/* Inputs / Textarea / Select */
.xxx-contact .fluentform .ff-el-form-control,
.xxx-contact .fluentform input[type="text"],
.xxx-contact .fluentform input[type="email"],
.xxx-contact .fluentform input[type="url"],
.xxx-contact .fluentform input[type="number"],
.xxx-contact .fluentform input[type="tel"],
.xxx-contact .fluentform textarea,
.xxx-contact .fluentform select {
  background:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:8px !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:15.5px !important;
  padding:12px 14px !important;
  width:100% !important;
  box-shadow:none !important;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.xxx-contact .fluentform input::placeholder,
.xxx-contact .fluentform textarea::placeholder {
  color:rgba(255,255,255,.35) !important;
}

/* Focus */
.xxx-contact .fluentform input:focus,
.xxx-contact .fluentform textarea:focus,
.xxx-contact .fluentform select:focus,
.xxx-contact .fluentform .ff-el-form-control:focus {
  border-color:rgba(0,132,209,.5) !important;
  background:rgba(0,0,0,.5) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(0,132,209,.18) !important;
}

/* Help-Text */
.xxx-contact .fluentform .ff-el-help-message, .xxx-contact .fluentform .ff-el-help-message p {
  color:rgba(255,255,255,.5) !important;
  font-size:13.5px !important;
  font-style:italic !important;
  line-height:1.5 !important;
  margin-top:6px !important;
}

/* Textarea spezifisch */
.xxx-contact .fluentform textarea {
  min-height:130px !important;
  resize:vertical !important;
}

/* Select — Fallback-Stil (sichtbar nur kurz vor JS-Init) */
.xxx-contact .fluentform select {
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  color-scheme:dark !important;
  background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230084D1%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:18px !important;
  padding-right:42px !important;
}

.xxx-contact .fluentform select option {
  background:#1a1a1a !important;
  color:#fff !important;
}

/* DSGVO-Checkbox / GDPR Agreement */
.xxx-contact .fluentform .ff-el-form-check {
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  padding:0 !important;
}

.xxx-contact .fluentform input[type="checkbox"] {
  width:18px !important;
  height:18px !important;
  margin-top:3px !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
}

.xxx-contact .fluentform .ff-el-form-check-label,
.xxx-contact .fluentform .ff-el-form-check label {
  color:rgba(255,255,255,.78) !important;
  font-size:14.5px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  cursor:pointer !important;
  margin:0 !important;
}

/* Submit-Button */
.xxx-contact .fluentform .ff-btn,
.xxx-contact .fluentform .ff-btn-submit,
.xxx-contact .fluentform button[type="submit"] {
  background:#0084D1 !important;
  color:#fff !important;
  border:none !important;
  border-radius:6px !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  padding:14px 32px !important;
  margin-top:8px !important;
  cursor:pointer !important;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow:0 8px 24px rgba(0,132,209,.30);
  text-shadow:none !important;
}

.xxx-contact .fluentform .ff-btn:hover,
.xxx-contact .fluentform .ff-btn-submit:hover,
.xxx-contact .fluentform button[type="submit"]:hover {
  background:#006db5 !important;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,132,209,.40);
}

/* Validierungs-Fehler */
.xxx-contact .fluentform .error-text,
.xxx-contact .fluentform .text-danger,

.xxx-contact .fluentform .ff-el-is-error input,
.xxx-contact .fluentform .ff-el-is-error textarea,

/* Success Message nach Submit */
.xxx-contact .fluentform .ff-message-success,
.xxx-contact .ff-message-success {
  background:rgba(0,132,209,.08) !important;
  border:1px solid rgba(0,132,209,.35) !important;
  border-radius:10px !important;
  padding:24px !important;
  color:#fff !important;
  font-size:16.5px !important;
  line-height:1.65 !important;
  white-space:pre-line !important;
}

/* ━━━ CUSTOM DROPDOWN (Safari-Fix für Select) ━━━ */

.xxx-contact-cdd {
  position:relative;
  width:100%;
}

.xxx-contact .fluentform .xxx-contact-cdd select {
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  background-image:none !important;
}

.xxx-contact-cdd-trigger {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  color:#fff;
  font-family:inherit;
  font-size:15.5px;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.xxx-contact-cdd-trigger:hover {
  border-color:rgba(0,132,209,.3);
}

.xxx-contact-cdd.is-open .xxx-contact-cdd-trigger,
.xxx-contact-cdd-trigger:focus {
  border-color:rgba(0,132,209,.5);
  background:rgba(0,0,0,.5);
  outline:none;
  box-shadow:0 0 0 3px rgba(0,132,209,.18);
}

.xxx-contact-cdd-trigger.is-placeholder .xxx-contact-cdd-label {
  color:rgba(255,255,255,.5);
}

.xxx-contact-cdd-label {
  flex:1 1 auto;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.xxx-contact-cdd-arrow {
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:#0084D1;
  transition:transform .25s ease;
}

.xxx-contact-cdd-arrow svg {
  width:100%;
  height:100%;
}

.xxx-contact-cdd.is-open .xxx-contact-cdd-arrow {
  transform:rotate(180deg);
}

.xxx-contact-cdd-list {
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:50;
  background:#1a1a1a;
  border:1px solid rgba(0,132,209,.35);
  border-radius:8px;
  padding:6px;
  margin:0;
  list-style:none;
  box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 24px rgba(0,132,209,.12);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  max-height:320px;
  overflow-y:auto;
}

.xxx-contact-cdd.is-open .xxx-contact-cdd-list {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.xxx-contact-cdd-list li {
  padding:11px 14px;
  border-radius:6px;
  color:rgba(255,255,255,.85);
  font-size:15.5px;
  line-height:1.4;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  list-style:none;
}

.xxx-contact-cdd-list li:hover {
  background:rgba(0,132,209,.18);
  color:#fff;
}

.xxx-contact-cdd-list li.is-selected {
  background:rgba(0,132,209,.10);
  color:#fff;
  font-weight:700;
}

.xxx-contact-cdd-list li.is-placeholder-option {
  color:rgba(255,255,255,.4);
  cursor:default;
}

.xxx-contact-cdd-list li.is-placeholder-option:hover {
  background:transparent;
  color:rgba(255,255,255,.4);
}

/* RESPONSIVE */

@media (max-width:620px) {
  .xxx-contact-hero {
    padding:66px 20px 56px;
  }

  .xxx-contact-hero-layout {
    flex-direction:column;
    gap:16px;
  }

  .xxx-contact-hero-figure {
    flex:0 0 auto;
  }

  .xxx-contact-hero-figure img {
    max-width:120px;
  }

  .xxx-contact-section,
  .xxx-contact-serious {
    padding-left:20px;
    padding-right:20px;
  }

  .xxx-contact-formbox,
  .xxx-contact-info,
  .xxx-contact-serious-inner {
    padding:26px 22px;
  }

  .xxx-contact-serious-layout {
    flex-direction:column;
    gap:18px;
  }

  .xxx-contact-serious-love {
    flex:0 0 auto;
  }

  .xxx-contact-serious-love img {
    max-width:110px;
  }

  .xxx-contact-promise {
    grid-template-columns:1fr;
    gap:10px;
  }
}

/* ============================================================
   PROFIL-GUIDE — Seite /profil-guide/ (Inline-CSS der WP-Blöcke { border:none !important; outline:none !important; box-shadow:none !important; background:transparent !important; padding:0 !important; margin:0 !important; max-width:none !important; width:100% !important; }
.xxx-kauf { width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; max-width:100vw !important; background:#0a0a0a !important; box-sizing:border-box !important; }
.xxx-kauf .bridge { background:#0a0a0a !important; }
.xxx-kauf .inner { background:#0a0a0a !important; }
.pg-s { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); box-sizing:border-box; font-family:Carlito,Calibri,"Helvetica Neue",Arial,sans-serif; }
.pg-s * { box-sizing:border-box; }

/* HERO */
.pg-hero { background:#111111; padding:80px 24px; }
.pg-hero-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:500px 1fr; gap:60px; align-items:center; }
@keyframes pg-float { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(-2deg) translateY(-10px); } }
.pg-cover-wrap { position:absolute; top:0; left:0; width:300px; z-index:3; transform-origin:bottom center; animation:pg-float 5.5s ease-in-out infinite; filter:drop-shadow(14px 28px 40px rgba(0,0,0,.75)); transition:filter .4s ease; }
.pg-cover-wrap:hover { filter:drop-shadow(18px 36px 55px rgba(0,0,0,.9)) drop-shadow(0 0 28px rgba(0,132,209,.18)); }
.pg-cover-glow { position:absolute; inset:-28px; background:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(0,132,209,.18) 0%,transparent 65%); pointer-events:none; border-radius:24px; }
.pg-cover { width:100%; height:auto; display:block; border-radius:8px 11px 11px 8px; box-shadow:0 0 0 1px rgba(255,255,255,.18), -4px 0 8px rgba(0,0,0,.5), 10px 30px 55px rgba(0,0,0,.8); position:relative; z-index:1; }

.pg-title { color:#ffffff; font-size:clamp(36px,4vw,52px); font-weight:700; line-height:1.1; margin:0 0 10px; letter-spacing:-.01em; }
.pg-subtitle { color:#FF7A00; font-size:clamp(19px,2.4vw,26px); font-weight:700; line-height:1.3; margin:0 0 26px; }
.pg-hero-text p { color:rgba(255,255,255,.8); font-size:17px; line-height:1.65; margin:0 0 12px; }
.pg-hero-text p strong { color:#fff; }

/* HERO — Substanz-Block (Stempel + Vorschau-Bilder) */
.pg-hero-inner { align-items:start; }
.pg-hero-text { display:flex; flex-direction:column; min-height:680px; }
/* STAMPS — 2x2 mit echter Stempel-Optik, Press-Animation, Count-Up, Hover-Press */
.pg-hero-stamps { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:32px 0 0; margin-top:auto; }
@keyframes pg-stamp-in { 0% { opacity:0; transform:scale(.78) rotate(var(--rot,0deg)); filter:brightness(.7); } 55% { opacity:1; transform:scale(1.12) rotate(var(--rot,0deg)); filter:brightness(1.4); } 100% { opacity:1; transform:scale(1) rotate(var(--rot,0deg)); filter:brightness(1); } }
@keyframes pg-stamp-press { 0%,100% { transform:scale(1) rotate(0deg); filter:brightness(1); } 30% { transform:scale(.93) rotate(0deg); filter:brightness(1.3); } 60% { transform:scale(1.05) rotate(0deg); filter:brightness(1.1); } }
.pg-stamp { position:relative; background:rgba(0,132,209,.04); background-image:radial-gradient(ellipse at 50% 0%, rgba(0,132,209,.16) 0%, transparent 65%); border:1px solid rgba(0,132,209,.35); border-radius:6px; padding:24px 20px 22px; text-align:center; opacity:0; transform:scale(.78) rotate(var(--rot,0deg)); transition:border-color .3s ease, background .3s ease, box-shadow .3s ease; box-shadow:inset 0 0 0 1px rgba(0,132,209,.06); }
.pg-stamp:nth-child(1) { --rot:-1.2deg; }
.pg-stamp:nth-child(2) { --rot:0.9deg; }
.pg-stamp:nth-child(3) { --rot:-0.6deg; }
.pg-stamp:nth-child(4) { --rot:1.3deg; }
.pg-stamp.pg-in-view { opacity:1; transform:scale(1) rotate(var(--rot,0deg)); animation:pg-stamp-in .65s cubic-bezier(.2,.8,.2,1) forwards; box-shadow:inset 0 0 0 1px rgba(0,132,209,.06), 0 0 26px rgba(0,132,209,.14); }
.pg-stamp:hover { border-color:rgba(0,132,209,.65); background:rgba(0,132,209,.08); background-image:radial-gradient(ellipse at 50% 0%, rgba(0,132,209,.26) 0%, transparent 65%); box-shadow:0 14px 32px rgba(0,0,0,.4), 0 0 38px rgba(0,132,209,.32); }
.pg-stamp.pg-in-view:hover { animation:pg-stamp-press .7s ease-in-out; transform:rotate(0deg); }
.pg-stamp-marker { display:block; position:absolute; top:8px; left:12px; color:rgba(0,132,209,.5); font-size:10px; font-weight:700; letter-spacing:.18em; }
.pg-stamp-num { display:block; color:#0084D1; font-size:38px; font-weight:700; line-height:1; margin-bottom:8px; text-shadow:0 0 18px rgba(0,132,209,.45); }
.pg-stamp-label { display:block; color:#fff; font-size:13px; font-weight:700; letter-spacing:.18em; margin-bottom:10px; }
.pg-stamp-text { color:rgba(255,255,255,.74); font-size:13.5px; line-height:1.55; display:block; }
/* COVER-STACK — drei Seiten in gleicher Größe, gefächert hinter dem Cover */
.pg-cover-stack { position:relative; width:500px; height:680px; }
/* HINT-Block unter dem Stack — präsente Caveat-Notiz + dicker Cyan-Pfeil, unten bündig */
.pg-stack-hint { position:absolute; left:0; right:0; bottom:10px; text-align:center; padding:0 18px; pointer-events:none; }
@keyframes pg-hint-zoom-pulse { 0%,100% { transform:scale(1); opacity:.85; filter:drop-shadow(0 0 12px rgba(0,132,209,.35)); } 50% { transform:scale(1.12); opacity:1; filter:drop-shadow(0 0 22px rgba(0,132,209,.75)); } }
.pg-stack-hint-arrow { display:block; width:44px; height:44px; margin:0 auto 12px; color:#0084D1; animation:pg-hint-zoom-pulse 2.4s ease-in-out infinite; }
.pg-stack-hint-arrow svg { width:100%; height:100%; }
.pg-stack-hint-text { display:block; font-family:'Caveat',cursive; font-size:clamp(28px, 3vw, 38px); font-weight:700; color:#fff; line-height:1.15; text-shadow:0 0 22px rgba(0,132,209,.3); }
.pg-stack-hint-text .pg-hint-accent { display:block; color:#0084D1; margin-top:2px; }
@keyframes pg-stack-A { 0%,100% { transform:rotate(5deg) translateY(0); } 50% { transform:rotate(5.5deg) translateY(-8px); } }
@keyframes pg-stack-B { 0%,100% { transform:rotate(11deg) translateY(-3px); } 50% { transform:rotate(10.5deg) translateY(5px); } }
.pg-stack-page { position:absolute; width:300px; border-radius:6px; overflow:hidden; background:#fff; filter:drop-shadow(0 16px 30px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(0,132,209,.20)); text-decoration:none !important; transition:filter .4s ease, transform .4s ease; transform-origin:bottom left; cursor:zoom-in; }
.pg-stack-page img { width:100%; height:auto; display:block; }
.pg-stack-page-1 { top:20px; left:80px; z-index:2; animation:pg-stack-A 6.2s ease-in-out infinite .3s; }
.pg-stack-page-2 { top:40px; left:160px; z-index:1; animation:pg-stack-B 6.8s ease-in-out infinite .7s; }
.pg-stack-page:hover { z-index:10; animation:none; transform:rotate(0deg) translateY(-12px) scale(1.04); filter:drop-shadow(0 26px 50px rgba(0,0,0,.85)) drop-shadow(0 0 36px rgba(0,132,209,.55)); }
.pg-stack-zoom { position:absolute; top:10px; right:10px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(0,132,209,.85); color:#fff; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.4); z-index:5; transition:transform .3s ease, background .3s ease; pointer-events:none; }
.pg-stack-zoom svg { width:18px; height:18px; }
.pg-stack-page:hover .pg-stack-zoom { background:#006db5; transform:scale(1.12); }
.pg-stack-cap { position:absolute; bottom:0; left:0; right:0; padding:10px 14px 12px; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:#fff; text-align:center; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.88) 100%); pointer-events:none; opacity:.85; transition:opacity .3s ease, padding .3s ease, font-size .3s ease; }
.pg-stack-page:hover .pg-stack-cap { opacity:1; font-size:13.5px; padding:12px 14px 14px; }

/* LIGHTBOX — Originalseiten im Overlay statt Seitenwechsel */
body.pg-lightbox-open {
  overflow:hidden;
}

.pg-lightbox {
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease, visibility .24s ease;
}

.pg-lightbox.pg-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.pg-lightbox-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.pg-lightbox-stage {
  position:relative;
  z-index:1;
  width:min(96vw, 1180px);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.pg-lightbox-img-wrap {
  position:relative;
  max-width:100%;
  max-height:82vh;
  border-radius:10px;
  overflow:hidden;
  background:#111;
  box-shadow:
    0 28px 90px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 60px rgba(0,132,209,.22);
}

.pg-lightbox-img {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:82vh;
  object-fit:contain;
  cursor:zoom-in;
  transform-origin:center center;
  transition:transform .18s ease;
}

.pg-lightbox-img.pg-zoomed {
  cursor:zoom-out;
  max-width:none;
  max-height:none;
  transform:scale(2.15);
}

.pg-lightbox-img-wrap.pg-zoom-active {
  overflow:hidden;
  cursor:zoom-out;
}

.pg-lightbox-close {
  position:absolute;
  top:-18px;
  right:-18px;
  width:44px;
  height:44px;
  border:1px solid rgba(0,132,209,.5);
  border-radius:999px;
  background:rgba(10,10,10,.92);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 22px rgba(0,132,209,.22);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}

.pg-lightbox-close:hover {
  background:#0084D1;
  border-color:#0084D1;
  transform:scale(1.05);
}

.pg-lightbox-caption {
  margin-top:14px;
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:1.45;
  text-align:center;
}

@media (max-width:700px) {
  .pg-lightbox {
    padding:18px;
  }

  .pg-lightbox-close {
    top:-12px;
    right:-12px;
    width:38px;
    height:38px;
    font-size:24px;
  }

  .pg-lightbox-img-wrap,
  .pg-lightbox-img {
    max-height:78vh;
  }
}
@media (max-width:900px) { .pg-hero-stamps { grid-template-columns:repeat(2,1fr); margin-top:32px; } .pg-hero-text { min-height:auto; display:block; } .pg-hero-inner { grid-template-columns:1fr; gap:36px; align-items:center; } .pg-cover-stack { width:100%; max-width:440px; margin:0 auto; height:560px; } .pg-cover-wrap { position:absolute; top:0; left:0; width:260px; } .pg-stack-page { width:260px; } .pg-stack-page-1 { top:18px; left:70px; } .pg-stack-page-2 { top:36px; left:140px; } }

/* BRIDGE */
@keyframes pg-glow-pulse { 0%,100% { opacity:.5; transform:translate(-50%,-50%) scale(1); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.3); } }
@keyframes pg-fig-float { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-6px) rotate(0.5deg); } }
@keyframes pg-whip-pulse { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.2); } }
.pg-bridge { background:#0a0a0a; background-image:radial-gradient(ellipse at 80% 50%,rgba(0,132,209,.07) 0%,transparent 50%); padding:90px 24px; position:relative; overflow:hidden; margin-bottom:-1px; }
.pg-bridge-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:380px; background:radial-gradient(ellipse,rgba(0,132,209,.22) 0%,transparent 65%); animation:pg-glow-pulse 6s ease-in-out infinite; pointer-events:none; }
.pg-bridge-flex { max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:60px; position:relative; z-index:1; }
.pg-bridge-inner { flex:1; text-align:center; opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
.pg-bridge-inner.pg-in-view { opacity:1; transform:translateY(0); }
.pg-bridge-inner h2 { color:#fff; font-size:clamp(24px,3.2vw,38px); font-weight:700; line-height:1.25; margin:0 0 24px; letter-spacing:-.01em; }
.pg-bridge-inner p { color:rgba(255,255,255,.75); font-size:17px; line-height:1.7; margin:0; }
.pg-bridge-inner p strong { color:#fff; }
.pg-bridge-fig-wrap { position:relative; flex-shrink:0; width:160px; }
.pg-bridge-figure { width:100%; height:auto; display:block; position:relative; z-index:2; animation:pg-fig-float 5.5s infinite ease-in-out; }
.pg-bridge-fig-glow { position:absolute; bottom:0; right:-10px; width:80%; height:50%; background:radial-gradient(circle at 60% 70%,rgba(255,122,0,.4) 0%,rgba(0,132,209,.15) 40%,transparent 70%); filter:blur(20px); z-index:1; pointer-events:none; animation:pg-whip-pulse 2.8s infinite ease-in-out; }
@media (max-width:700px) { .pg-bridge-flex { flex-direction:column; gap:32px; } .pg-bridge-fig-wrap { width:110px; } }

/* ARROW */
@keyframes pg-click-press { 0%,6%,100% { transform:scale(1); filter:brightness(1); } 9% { transform:scale(.87) translateY(2px); filter:brightness(1.5); } 13% { transform:scale(1.07); filter:brightness(1.15); } 17%,99% { transform:scale(1); filter:brightness(1); } }
.pg-click-word { display:inline-block; color:#FF7A00; animation:pg-click-press 8s ease-in-out infinite; }
@keyframes pg-text-roll { 0%,17% { transform:translateY(110%); opacity:0; } 27% { transform:translateY(0); opacity:1; } 74% { transform:translateY(0); opacity:1; } 86% { transform:translateY(-110%); opacity:0; } 100% { transform:translateY(110%); opacity:0; } }
.pg-scroll-clip { display:inline-block; overflow:hidden; vertical-align:text-bottom; line-height:inherit; height:1.2em; }
.pg-scroll-word { display:inline-block; animation:pg-text-roll 8s ease-in-out infinite; }
@keyframes pg-abo-pulse { 0%,100% { transform:scale(1); text-shadow:none; } 50% { transform:scale(1.07); text-shadow:0 0 22px rgba(255,122,0,.55); } }
.pg-abo-word { display:inline-block; color:#FF7A00; font-weight:700; animation:pg-abo-pulse 3.5s ease-in-out infinite; }
@keyframes pg-arrow-drift { 0%,100% { transform:translateY(0); opacity:.7; } 50% { transform:translateY(8px); opacity:1; } }
.pg-arrow { background:#0a0a0a; padding:16px 0 0; text-align:center; line-height:0; }
.pg-arrow svg { width:26px; height:34px; color:#0084D1; filter:drop-shadow(0 0 14px rgba(0,132,209,.4)); animation:pg-arrow-drift 3s ease-in-out infinite; }

/* SECTION LABEL */
.pg-label { background:#0a0a0a; padding:72px 24px 36px; text-align:center; }
.pg-label h3 { color:#0084D1; font-size:clamp(22px,2.8vw,32px); font-weight:700; letter-spacing:-.01em; text-transform:none; margin:0 0 20px; opacity:0; transform:translateY(12px); transition:opacity .5s ease,transform .5s ease; }
.pg-label h3.pg-in-view { opacity:1; transform:translateY(0); }
#pgLabelFW {
  font-family:'Caveat',cursive !important;
  font-size:clamp(38px,4.5vw,62px) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  line-height:1.15 !important;
  color:#ffffff !important;
  text-transform:none !important;
  text-shadow:0 0 24px rgba(0,132,209,.28);
}
.pg-label p { color:rgba(255,255,255,.8); font-size:17px; line-height:1.6; max-width:780px; margin:0 auto; opacity:0; transform:translateY(12px); transition:opacity .6s ease .15s,transform .6s ease .15s; }
.pg-label p.pg-in-view { opacity:1; transform:translateY(0); }
.pg-label p strong { color:#fff; }

/* BEREICHE GRID */
.pg-bereiche { background:#0a0a0a; padding:0 24px 80px; }
.pg-bereiche-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.pg-bc { background:#161616; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:22px 18px; opacity:0; transform:translateY(18px); transition:opacity .5s ease,transform .5s ease,box-shadow .3s ease; }
.pg-bc.pg-in-view { opacity:1; transform:translateY(0); }
.pg-bc.pg-in-view:hover { transform:translateY(-5px); box-shadow:0 14px 36px rgba(0,0,0,.45); }
.pg-bc-num { color:rgba(0,132,209,.6); font-size:42px; font-weight:300; line-height:1; margin-bottom:6px; letter-spacing:-.02em; }
.pg-bc h3 { color:#fff; font-size:15px; font-weight:700; margin:0 0 8px; letter-spacing:.04em; }
.pg-bc p { color:rgba(255,255,255,.78); font-size:15px; line-height:1.55; margin:0; }
.pg-bc.pg-eckdaten { background:#1a1a1a; border-color:rgba(0,132,209,.2); }

/* BONUS */
.pg-bonus { background:#111111; padding:80px 24px; }
.pg-bonus-inner {
  max-width:1050px;
  width:fit-content;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
}
.pg-bonus-h2 { color:#fff; font-size:clamp(18px,2.2vw,24px); font-weight:700; margin:0 0 22px; letter-spacing:.03em; opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease; }
.pg-bonus-h2.pg-in-view { opacity:1; transform:translateY(0); }
.pg-bonus ul { list-style:none; padding:0; margin:0; }
.pg-bonus-li { color:rgba(255,255,255,.8); font-size:16px; line-height:1.65; padding:7px 0 7px 26px; position:relative; opacity:0; transform:translateX(-14px); transition:opacity .5s ease,transform .5s ease; }
.pg-bonus-li.pg-in-view { opacity:1; transform:translateX(0); }
.pg-bonus-li::before { content:"\2665\FE0E"; position:absolute; left:0; color:#FF7A00; font-weight:700; }
.pg-bonus-li strong { color:#fff; }
@keyframes pg-bonus-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.pg-bonus-img-wrap { flex-shrink:0; width:115px; }
.pg-bonus-text { flex:0 1 auto; min-width:0; }
.pg-bonus-img { width:100%; height:auto; display:block; animation:pg-bonus-float 6s ease-in-out infinite; }

/* FÜR WEN */
.pg-fw { background:#0a0a0a; padding:0 24px; }
.pg-fw-grid { max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; gap:0; padding-bottom:80px; align-items:center; }
.pg-fw-card { background:#161616; border:1px solid rgba(255,255,255,.05); border-left:3px solid #0084D1; border-radius:12px; padding:38px 32px; opacity:0; transform:translateY(18px); transition:opacity .5s ease,transform .5s ease,box-shadow .3s ease; }
.pg-fw-card.pg-in-view { opacity:1; transform:translateY(0); }
.pg-fw-card.pg-in-view:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 24px rgba(0,132,209,.1); }
.pg-fw-card h3 { color:#fff; font-size:clamp(17px,2vw,22px); font-weight:700; letter-spacing:.03em; margin:0 0 14px; }
.pg-fw-card p { color:rgba(255,255,255,.78); font-size:17px; line-height:1.65; margin:0; }
.pg-fw-card p strong { color:#fff; }
@keyframes pg-plus-pulse { 0%,100% { transform:scale(1); text-shadow:0 0 8px rgba(255,122,0,.4); } 50% { transform:scale(1.2); text-shadow:0 0 22px rgba(255,122,0,.8); } }
.pg-fw-oder { text-align:center; padding:0 28px; color:#FF7A00; font-size:32px; font-weight:700; letter-spacing:0; white-space:nowrap; animation:pg-plus-pulse 3s ease-in-out infinite; display:flex; align-items:center; justify-content:center; }

/* CONTACT */
.pg-contact { background:#111111; padding:80px 24px; text-align:center; }
.pg-contact-inner { max-width:560px; margin:0 auto; }
/* .pg-contact-script/-hint/-link/-dann: NUR zentral im Customizer-CSS definiert (Dubletten entfernt 2026-09-01) */
.pg-btn { display:inline-block; padding:13px 30px; background:#0084D1; color:#fff !important; text-decoration:none !important; font-weight:700; font-size:16px; border-radius:4px; transition:background .3s,transform .3s; }
.pg-btn:hover { background:#006db5; transform:translateY(-2px); }

/* RESPONSIVE */
@media (max-width:900px) {
  .pg-hero-inner { grid-template-columns:1fr; gap:36px; }
  .pg-cover-wrap { max-width:260px; margin:0 auto; }
  .pg-bereiche-grid { grid-template-columns:repeat(2,1fr); }
  .pg-bereiche-grid .pg-bc:last-child { grid-column:1/-1; max-width:50%; margin:0 auto; }
  .pg-bonus-inner { width:100%; max-width:560px; flex-direction:column; gap:28px; }
  .pg-bonus-img-wrap { max-width:90px; margin:0 auto; }
  .pg-bonus-text { width:100%; }
}
@media (max-width:600px) {
  .pg-bereiche-grid { grid-template-columns:1fr; }
  .pg-bereiche-grid .pg-bc:last-child { max-width:100%; }
  .pg-fw-grid { grid-template-columns:1fr; } .pg-fw-oder { padding:18px 0; } /* Plus mittig, auch als eigene Zeile (Befund Christian 04.09.) */
}

.xxx-beweis {
  position: relative;
  background: #0a0a0a;
  padding: 70px 24px 72px;
  overflow: hidden;
  font-family: Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
.xxx-beweis::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 260px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,132,209,.1) 0%, transparent 65%);
  pointer-events: none;
}
.xxx-beweis * { box-sizing: border-box; }
.xxx-beweis .inner { position: relative; max-width: 1000px; margin: 0 auto; }
.xxx-beweis .label-wrap { text-align: center; margin-bottom: 20px; opacity:0; transform:translateY(12px); transition:opacity .5s ease,transform .5s ease; }
.xxx-beweis .label-wrap.pg-in-view { opacity:1; transform:translateY(0); }

.xxx-beweis .guide-excerpt-note {
  max-width: 820px;
  margin: 0 auto 34px;
  color: rgba(255,255,255,.76);
  font-size: 18px;
  line-height: 1.55;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.xxx-beweis .guide-excerpt-note.pg-in-view {
  opacity: 1;
  transform: translateY(0);
}
.xxx-beweis .guide-excerpt-note strong {
  color: #0084D1;
  font-weight: 700;
}
.xxx-beweis h2.headline {
  color: #ffffff;
  font-size: clamp(26px,3.2vw,40px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  opacity:0; transform:translateY(14px); transition:opacity .6s ease .1s,transform .6s ease .1s;
}
.xxx-beweis h2.headline.pg-in-view { opacity:1; transform:translateY(0); }
.xxx-beweis h2.headline .accent { color: #FF7A00; }
.xxx-beweis .sub {
  text-align: center;
  color: rgba(255,255,255,.75);
  font-size: 17px;
  line-height: 1.65;
  max-width: 660px;
  margin: 0 auto 64px;
  opacity:0; transform:translateY(12px); transition:opacity .6s ease .2s,transform .6s ease .2s;
}
.xxx-beweis .sub.pg-in-view { opacity:1; transform:translateY(0); }
.xxx-beweis .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 52px;
}
@keyframes xxx-card-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0,132,209,.9), 0 0 18px rgba(0,132,209,.2); }
  60%  { box-shadow: 0 0 0 22px rgba(0,132,209,0), 0 0 32px rgba(0,132,209,.35); }
  100% { box-shadow: 0 0 0 0   rgba(0,132,209,0), 0 0 18px rgba(0,132,209,.2); }
}
.xxx-beweis .card {
  background: #161616;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 38px 28px 30px;
  position: relative;
  transition: transform .4s ease;
  opacity: 1;
  transform: translateY(0);
}
.xxx-beweis .card:hover { transform: translateY(-5px); }
.xxx-beweis .card.strong {
  border-color: rgba(0,132,209,.45);
  animation: xxx-card-pulse 2.2s ease-out infinite;
}

.xxx-beweis .raster-wrap { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 22px; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.xxx-beweis .raster-wrap img { width: 100%; height: auto; display: block; }
.xxx-beweis .raster-wrap .highlight { position: absolute; top: 34.8%; left: 34.2%; width: 31.8%; height: 23.8%; border-radius: 6px; pointer-events: none; z-index: 2; }
.xxx-beweis .card.weak .raster-wrap .highlight { box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.xxx-beweis .card.strong .raster-wrap .highlight { box-shadow: 0 0 0 3px #0084D1, 0 0 24px rgba(0,132,209,.6); }
.xxx-beweis h3.card-title { color: #ffffff; font-size: 17px; font-weight: 700; margin: 0 0 10px; text-align: center; }
.xxx-beweis .card.strong h3.card-title { color: #FF7A00; }
.xxx-beweis ul.points { list-style: none; padding: 0; margin: 0; }
.xxx-beweis ul.points li { color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.6; padding: 6px 0; position: relative; }
.xxx-beweis .card.weak ul.points li { color: rgba(255,255,255,.42); font-style: italic; }
.xxx-beweis ul.points { text-align: center; }
.xxx-beweis ul.points li { padding: 6px 0; }
.xxx-beweis ul.points li::before { display: none; }
.xxx-beweis .card-verdict { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0,132,209,.2); color: #0084D1; font-size: 15px; font-weight: 700; letter-spacing: .02em; text-align: center; }
.xxx-beweis .kicker { text-align:center; padding-top:52px; border-top:1px solid rgba(255,255,255,.07); }
.xxx-beweis .kicker-h2 { color:#fff; font-size:clamp(22px,2.8vw,32px); font-weight:700; letter-spacing:-.01em; margin:0 0 48px; }
.xxx-beweis .kicker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; max-width:920px; margin:0 auto; }
@keyframes kStempelA { 0%,100% { transform:translateY(0) rotate(-0.8deg); } 50% { transform:translateY(-3px) rotate(-0.6deg); } }
@keyframes kStempelB { 0%,100% { transform:translateY(-2px) rotate(0.5deg); } 50% { transform:translateY(2px) rotate(0.7deg); } }
@keyframes kStempelC { 0%,100% { transform:translateY(2px) rotate(-0.3deg); } 50% { transform:translateY(-2px) rotate(-0.5deg); } }
.xxx-beweis .kicker-card { position:relative; padding:38px 26px 32px; text-align:center; border:1px solid rgba(0,132,209,.35); border-radius:4px; background:rgba(0,132,209,.02); opacity:1; transform:translateY(0); transition:box-shadow .5s ease,border-color .4s ease,transform .5s ease; }
.xxx-beweis .kicker-card::after { content:''; position:absolute; inset:-2px; border-radius:5px; box-shadow:0 0 24px rgba(0,132,209,0); pointer-events:none; transition:box-shadow .5s ease; z-index:-1; }
.xxx-beweis .kicker-card.pg-in-view:nth-child(1) { opacity:1; transform:translateY(0) rotate(-0.8deg); transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1); animation:kStempelA 7s infinite ease-in-out 1.2s; }
.xxx-beweis .kicker-card.pg-in-view:nth-child(2) { opacity:1; transform:translateY(0) rotate(0.5deg); transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1); animation:kStempelB 7.6s infinite ease-in-out 1.5s; }
.xxx-beweis .kicker-card.pg-in-view:nth-child(3) { opacity:1; transform:translateY(0) rotate(-0.3deg); transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1); animation:kStempelC 7.3s infinite ease-in-out 1.8s; }
.xxx-beweis .kicker-card.pg-in-view::after { box-shadow:0 0 24px rgba(0,132,209,.18); }
.xxx-beweis .kicker-card.pg-in-view:hover { transform:translateY(-4px) rotate(0deg) !important; border-color:rgba(0,132,209,.6); animation:none !important; }
.xxx-beweis .kicker-card.pg-in-view:hover::after { box-shadow:0 0 36px rgba(0,132,209,.35); }
.xxx-beweis .kicker-icon { width:36px; height:36px; margin:0 auto 22px; color:#0084D1; opacity:.9; filter:drop-shadow(0 0 12px rgba(0,132,209,.3)); }
.xxx-beweis .kicker-icon svg { width:100%; height:100%; }
.xxx-beweis .kicker-lbl { font-size:17px; font-weight:700; letter-spacing:3px; color:#fff; margin-bottom:16px; }
.xxx-beweis .kicker-text { font-size:15px; line-height:1.65; color:rgba(255,255,255,.65); max-width:280px; margin:0 auto; }
@media (max-width:700px) { .xxx-beweis .kicker-grid { grid-template-columns:1fr; gap:24px; } }
@media (max-width: 880px) {
  .xxx-beweis .grid { grid-template-columns: 1fr; gap: 48px; }
  .xxx-beweis { padding: 72px 18px 80px; }
}

.pg-uebergang {
  background: #0a0a0a;
  padding: 32px 24px 48px;
  text-align: center;
  font-family: Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
.pg-ue-script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(38px, 5vw, 68px);
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.pg-ue-script.pg-in-view { opacity: 1; transform: translateY(0); text-shadow: 0 0 24px rgba(255,255,255,.6), 0 0 52px rgba(255,255,255,.2); }

.xxx-kauf .kauf-pfeil { display:block; margin:-128px 0 22px; line-height:0; }
.xxx-kauf .kauf-pfeil svg { width:36px; height:48px; color:#FF7A00; }
@keyframes pak-pulse { 0%,100% { transform:translateY(0); opacity:.6; filter:drop-shadow(0 0 10px rgba(255,122,0,.4)); } 50% { transform:translateY(10px); opacity:1; filter:drop-shadow(0 0 28px rgba(255,122,0,.95)); } }
.xxx-kauf .kauf-pfeil svg { animation:pak-pulse 2.2s ease-in-out infinite; }
.xxx-kauf {
  position: relative;
  background: #0a0a0a;
  font-family: Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 0 0 100px;
}
.xxx-kauf * { box-sizing: border-box; }
.xxx-kauf .bridge {
  padding: 90px 24px 48px;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
.xxx-kauf .bridge-text { text-align: center; }
@keyframes pg-gibsmir-float {
  0%,100% { transform: rotate(-1.2deg) translateY(0); }
  25%      { transform: rotate(1.4deg)  translateY(-5px); }
  50%      { transform: rotate(-1deg)   translateY(0); }
  75%      { transform: rotate(1.2deg)  translateY(-4px); }
}
.xxx-kauf .bridge-fig { flex-shrink:0; width:240px; animation:pg-gibsmir-float 1.8s ease-in-out infinite; filter:drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
@media (max-width:700px) { .xxx-kauf .bridge { flex-direction:column; gap:28px; } .xxx-kauf .bridge-fig { width:160px; } }
.xxx-kauf .bridge-eyebrow {
  color: #0084D1;
  font-size: clamp(22px,2.8vw,32px);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.xxx-kauf .bridge-eyebrow.pg-in-view { opacity:1; transform:translateY(0); }
.xxx-kauf .bridge-headline {
  color: #ffffff;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 780px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease .15s, transform .6s ease .15s;
}
.xxx-kauf .bridge-headline.pg-in-view { opacity:1; transform:translateY(0); }
.xxx-kauf .bridge-headline .accent { color: #FF7A00; }

@keyframes pg-kauf-rein {
  0%, 8%  { transform: translateX(-115%); opacity: 0; }
  20%, 68% { transform: translateX(0);    opacity: 1; }
  80%, 100% { transform: translateX(-115%); opacity: 0; }
}
@keyframes pg-kauf-raus {
  0%, 20%  { transform: translateX(0);    opacity: 1; }
  32%      { transform: translateX(115%); opacity: 0; }
  33%, 92% { transform: translateX(0);    opacity: 0; }
  100%     { transform: translateX(0);    opacity: 1; }
}
.pg-kauf-clip { display:inline-block; overflow:hidden; vertical-align:text-bottom; }
.pg-kauf-rein-word { display:inline-block; color:#FF7A00; animation:pg-kauf-rein 8s ease-in-out infinite; }
.pg-kauf-raus-word { display:inline-block; color:#FF7A00; animation:pg-kauf-raus 8s ease-in-out infinite; }
.xxx-kauf .inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.xxx-kauf .row { display: grid; gap: 20px; margin-bottom: 20px; }
.xxx-kauf .row.row-top { grid-template-columns: 1fr 1fr 1.3fr 1.3fr; }
.xxx-kauf .row.row-bottom { grid-template-columns: 1.5fr 1fr; }
.xxx-kauf .card {
  background: #161616;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 36px 28px 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.xxx-kauf .card.pg-in-view { opacity:1; transform:translateY(0); }
.xxx-kauf .card.pg-in-view:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  background: #1c1c1c;
}
@keyframes kauf-top-pulse {
  0%,100% { box-shadow: 0 20px 50px rgba(255,122,0,.12), 0 0 0 1px rgba(255,122,0,.12); }
  50%     { box-shadow: 0 28px 65px rgba(255,122,0,.28), 0 0 0 1px rgba(255,122,0,.28); }
}
.xxx-kauf .stamp {
  position: absolute; top: 16px; right: 16px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(0, 132, 209, 0.12);
  color: #0084D1;
  border: 1px solid rgba(0, 132, 209, 0.25);
  white-space: nowrap; z-index: 5;
}
.xxx-kauf .card-label { color: #0084D1; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; }
.xxx-kauf .card-name { color: #ffffff; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px; }
.xxx-kauf .card-hook { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.5; font-style: italic; margin-bottom: 22px; min-height: 42px; }
.xxx-kauf .card-price { color: #ffffff; font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin-bottom: 4px; display: flex; align-items: baseline; gap: 4px; }
.xxx-kauf .card-price .currency { font-size: 24px; font-weight: 500; color: rgba(255,255,255,0.5); }
.xxx-kauf .card-price-was { color: #FF7A00; font-size: 15px; line-height: 1; height: 13px; overflow: visible; text-decoration: none; margin-bottom: 18px; }
.xxx-kauf .card-price-spacer { height: 13px; margin-bottom: 18px; }
.xxx-kauf .card-features { list-style: none; padding: 18px 0 0 0; margin: 0 0 22px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.xxx-kauf .card-features li { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.5; padding: 5px 0 5px 22px; position: relative; }
.xxx-kauf .card-features li::before { content: "\2713"; position: absolute; left: 0; color: #0084D1; font-weight: 700; }
.xxx-kauf .card.topseller {
  background: linear-gradient(135deg, #1a2332 0%, #0f1828 100%);
  border-color: rgba(255, 122, 0, 0.2);
  padding: 40px 36px 36px;
  overflow: visible;
  transform: translateY(24px) scale(.97);
}
.xxx-kauf .card.topseller.pg-in-view {
  transform: translateY(0) scale(1);
  transition: opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1);
  animation: kauf-top-pulse 4s ease-in-out infinite;
}
.xxx-kauf .card.topseller.pg-in-view:hover {
  transform: translateY(-8px) scale(1) !important;
  box-shadow: 0 28px 60px rgba(255,122,0,.25), 0 0 0 1px rgba(255,122,0,.3);
  animation: none !important;
}
.xxx-kauf .card.topseller::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255, 122, 0, 0.15) 0%, transparent 60%);
  pointer-events: none; border-radius: 14px;
}
.xxx-kauf .card.topseller > *:not(.stamp) { position: relative; z-index: 1; }
.xxx-kauf .card.topseller:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(255, 122, 0, 0.25), 0 0 0 1px rgba(255, 122, 0, 0.3);
}
.xxx-kauf .card.topseller .stamp { background: #FF7A00; color: white; border: none; box-shadow: 0 4px 18px rgba(255,122,0,.5); padding: 7px 14px; font-size: 11px; top: 28px; right: 28px; transform: none; animation: none; }
.xxx-kauf .card.topseller .card-label { color: #ffb673; }
.xxx-kauf .card.topseller .card-name { color: white; font-size: 28px; margin-bottom: 12px; }
.xxx-kauf .card.topseller .card-hook { color: rgba(255,255,255,0.65); font-size: 15px; margin-bottom: 26px; min-height: 0; }
.xxx-kauf .card.topseller .card-price { color: white; font-size: 56px; text-shadow: 0 0 30px rgba(255, 122, 0, 0.3); }
.xxx-kauf .card.topseller .card-price .currency { color: rgba(255,255,255,0.5); font-size: 32px; }
.xxx-kauf .card.topseller .card-price-was { color: #FF7A00; }
.xxx-kauf .card.topseller .card-features { border-top-color: rgba(255,255,255,0.1); }
.xxx-kauf .card.topseller .card-features li { color: rgba(255,255,255,0.75); font-size: 15px; }
.xxx-kauf .card.topseller .card-features li::before { color: #FF7A00; }
.xxx-kauf .topseller-highlight {
  background: rgba(255, 122, 0, 0.12);
  padding: 16px 20px; margin-top: 20px;
  color: #fff;
  font-size: 15px; font-style: italic; line-height: 1.5;
  border-radius: 6px;
  text-align: center;
  width: 100%;
}
.xxx-kauf .card-bottom { margin-top: auto; display: block; width: 100%; box-sizing: border-box; }
.xxx-kauf .card-bottom .topseller-highlight { margin-top: 0; display: block; width: 100%; box-sizing: border-box; }
.xxx-kauf .card-bottom .card-btn { margin: 12px 0 0 0; display: block; width: 100%; box-sizing: border-box; }
.xxx-kauf .row.row-bottom .card:not(.topseller) { padding: 40px 36px 36px; }
.xxx-kauf .row.row-bottom .card:not(.topseller) .card-name { font-size: 28px; margin-bottom: 12px; }
.xxx-kauf .row.row-bottom .card:not(.topseller) .card-price { font-size: 56px; }
.xxx-kauf .row.row-bottom .card:not(.topseller) .card-hook { font-size: 15px; min-height: 0; margin-bottom: 26px; }
.xxx-kauf .row.row-bottom .card:not(.topseller) .card-features li { font-size: 15px; }
.xxx-kauf .row.row-bottom .card:not(.topseller) .card-btn { font-size: 16px; padding: 15px 20px; }
.xxx-kauf .card-img { width:110px; height:auto; display:block; margin:0 auto 20px; border-radius:4px; box-shadow:0 6px 20px rgba(0,0,0,.6); }
.xxx-kauf .card-img-pair { display:flex; gap:14px; align-items:flex-end; justify-content:center; margin-bottom:20px; height:170px; }
.xxx-kauf .card-img-pair .card-img { margin:0; width:auto; max-width:110px; flex:1; }
.xxx-kauf .card-img-pair > img.card-img { max-width:150px; mix-blend-mode:screen; transform:translateY(12px); }
.xxx-kauf .card-img-pair .ci-print { margin:0; height:auto; }
.xxx-kauf .card-img-pair .ci-print .card-img { width:88px; }
/* ── Guide Format Visualization ── */
.xxx-kauf .ci { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; position:relative; margin:0 auto 20px; width:fit-content; height:170px; }
.xxx-kauf .ci-pair { height:170px; align-items:flex-end; }
.xxx-kauf .ci .card-img { width:auto; height:auto; display:block; margin:0; border-radius:0; box-shadow:none; }
/* DIGITAL — Monitor Symbol */
.xxx-kauf .ci-digital { padding-bottom:26px; }
.xxx-kauf .ci-monitor {
  position:relative;
  background:#0d0d1f;
  border:6px solid #3a3a5c;
  border-bottom:12px solid #3a3a5c;
  border-radius:8px 8px 5px 5px;
  padding:5px;
  box-shadow:
    0 0 0 1px rgba(0,132,209,.7),
    0 0 16px rgba(0,132,209,.55),
    0 0 40px rgba(0,132,209,.3),
    0 0 80px rgba(0,132,209,.12);
}
.xxx-kauf .ci-monitor .card-img { width:130px; display:block; border-radius:2px; }
.xxx-kauf .ci-dl {
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  color:#0084D1; font-size:12px; font-weight:900; line-height:1;
  pointer-events:none; text-shadow:0 0 8px rgba(0,132,209,.8); letter-spacing:.04em;
}
/* Monitor neck */
.xxx-kauf .ci-digital::before { content:''; position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:6px; height:14px; background:#3a3a5c; }
/* Monitor base */
.xxx-kauf .ci-digital::after { content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:60px; height:8px; background:#3a3a5c; border-radius:4px; box-shadow:0 0 10px rgba(0,132,209,.3); }
/* PRINT — 3D Book */
.xxx-kauf .ci-print { padding-right:8px; }
.xxx-kauf .ci-print .card-img { width:108px; border-radius:2px 5px 5px 2px; transform:perspective(600px) rotateY(-7deg); transform-origin:center center; box-shadow:-9px 0 0 -1px rgba(5,5,5,.95), -13px 2px 14px rgba(0,0,0,.5), 5px 0 0 rgba(220,215,205,.35), 7px 0 0 rgba(200,195,185,.2), 9px 0 0 rgba(180,175,165,.1), 0 14px 26px rgba(0,0,0,.55); }
/* PAIR — beide Formate nebeneinander */
.xxx-kauf .ci-pair { display:flex; gap:16px; align-items:flex-end; justify-content:center; margin:0 auto 20px; }
.xxx-kauf .ci-pair .ci { margin:0; }
.xxx-kauf .ci-pair .ci-digital { padding-bottom:20px; }
.xxx-kauf .ci-pair .ci-digital::before { bottom:8px; width:4px; height:11px; }
.xxx-kauf .ci-pair .ci-digital::after { bottom:3px; width:38px; height:5px; }
.xxx-kauf .ci-pair .ci-print .card-img { width:108px; }
.xxx-kauf .ci-pair .ci-dl { font-size:9px; bottom:4px; }
/* Pair — gleiche Monitor-Größe erzwingen */
.xxx-kauf .ci-pair .ci-monitor { width:130px; }
.xxx-kauf .ci-pair .ci-monitor .card-img { width:100%; height:80px; object-fit:cover; }
/* TRIO — Topseller, volle Breite nutzen */
.xxx-kauf .ci-trio { display:flex; gap:22px; align-items:flex-end; justify-content:center; margin:0 auto 20px; height:170px; }
.xxx-kauf .ci-trio .ci { margin:0; }
.xxx-kauf .ci-trio .ci-monitor { width:120px; }
.xxx-kauf .ci-trio .ci-monitor .card-img { width:100%; height:74px; object-fit:cover; }
.xxx-kauf .ci-trio .ci-digital { padding-bottom:22px; }
.xxx-kauf .ci-trio .ci-digital::before { bottom:9px; width:5px; height:12px; }
.xxx-kauf .ci-trio .ci-digital::after { bottom:3px; width:44px; height:6px; }
.xxx-kauf .ci-trio .ci-print .card-img { width:90px; }
.xxx-kauf .ci-trio .ci-dl { font-size:9px; bottom:5px; }
.xxx-kauf .card-btn { display:block; width:100%; margin-top:auto; padding:13px 20px; background:#0084D1; color:#fff !important; text-decoration:none !important; font-weight:700; font-size:15px; border-radius:4px; text-align:center; transition:background .3s,transform .3s; }
.xxx-kauf .card-btn:hover { background:#006db5; transform:translateY(-2px); }
.xxx-kauf .card.topseller .card-btn { background:#FF7A00; font-size:16px; padding:15px 20px; }
.xxx-kauf .card.topseller .card-btn:hover { background:#e06d00; }
@media (max-width: 980px) {
  .xxx-kauf .row.row-top { grid-template-columns: repeat(2, 1fr); }
  .xxx-kauf .row.row-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .xxx-kauf .row.row-top { grid-template-columns: 1fr; }
  /* ci-pair verkleinern */
  .xxx-kauf .ci-pair { gap:12px; height:auto; }
  .xxx-kauf .ci-pair .ci { height:auto; }
  .xxx-kauf .ci-pair .ci-monitor { width:100px; }
  .xxx-kauf .ci-pair .ci-monitor .card-img { height:62px; }
  .xxx-kauf .ci-pair .ci-print .card-img { width:64px; }
  /* ci-trio verkleinern */
  .xxx-kauf .ci-trio { gap:14px; height:auto; align-items:flex-end; }
  .xxx-kauf .ci-trio .ci { height:auto; }
  .xxx-kauf .ci-trio .ci-monitor { width:86px; }
  .xxx-kauf .ci-trio .ci-monitor .card-img { height:54px; }
  .xxx-kauf .ci-trio .ci-digital { padding-bottom:18px; }
  .xxx-kauf .ci-trio .ci-print { margin-left:8px; }
  .xxx-kauf .ci-trio .ci-print .card-img { width:66px; }
  .xxx-kauf .ci-trio .ci-digital::before { width:4px; height:10px; }
  .xxx-kauf .ci-trio .ci-digital::after { width:34px; height:5px; }
}

/* ============================================================
   ANALYSE — Seite /analyse/ (Neubau 03.09.2026)
   Signatur: der Scanner — ein Lichtstrich fährt über das Profil-Mockup.
   Baut auf den Guide-Komponenten auf (pg-label, pg-bereiche, xxx-kauf-Karten, pg-contact).
   ============================================================ */
.an-hero { background:#0a0a0a; padding:0 24px 40px; position:relative; overflow:hidden;
  background-image: radial-gradient(ellipse 55% 45% at 72% 30%, rgba(0,132,209,.16), transparent 70%); }
.an-hero-inner { max-width:1180px; margin:0 auto; padding:96px 0 20px; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.an-kicker { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#0084D1; font-weight:700; margin:0 0 14px; }
.an-title { font-size:clamp(40px,4.6vw,72px); line-height:1.04; letter-spacing:-.015em; margin:0 0 10px; color:#fff; }
.an-sub { font-size:clamp(22px,2.2vw,30px); color:#FF7A00; font-weight:700; margin:0 0 22px; }
.an-lead { font-size:clamp(17px,1.25vw,19px); line-height:1.6; color:rgba(255,255,255,.8); max-width:560px; margin:0 0 14px; }
.an-lead strong { color:#fff; }
.an-lead.klein { font-size:16px; color:rgba(255,255,255,.6); }
.an-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.an-btn { display:inline-block; padding:14px 26px; border-radius:6px; font-weight:700; font-size:16px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.an-btn.primary { background:#0084D1; color:#fff !important; box-shadow:0 8px 24px rgba(0,132,209,.3); }
.an-btn.primary:hover { background:#006db5; transform:translateY(-2px); }
.an-btn.ghost { color:#fff !important; border:1px solid rgba(255,255,255,.28); }
.an-btn.ghost:hover { border-color:#0084D1; color:#0084D1 !important; }
/* Der Scanner */
.an-monitor { position:relative; margin:0 auto; max-width:520px; border-radius:14px; padding:14px; background:#141414; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(0,132,209,.18); }
.an-monitor img { display:block; width:100%; border-radius:8px; }
.an-monitor::after { content:""; position:absolute; left:14px; right:14px; height:3px; top:14px; border-radius:2px;
  background:linear-gradient(90deg, rgba(0,132,209,0), rgba(0,132,209,.95) 30%, rgba(255,255,255,.95) 50%, rgba(0,132,209,.95) 70%, rgba(0,132,209,0));
  box-shadow:0 0 18px rgba(0,132,209,.8), 0 0 40px rgba(0,132,209,.4); animation:anScan 4.5s ease-in-out infinite; pointer-events:none; }
.an-monitor .an-scan-schein { position:absolute; left:14px; right:14px; top:14px; height:26%; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, rgba(0,132,209,.22), transparent); animation:anSchein 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes anScan { 0%{ top:14px; opacity:0 } 6%{ opacity:1 } 46%{ top:calc(100% - 17px); opacity:1 } 52%{ opacity:0 } 100%{ top:calc(100% - 17px); opacity:0 } }
@keyframes anSchein { 0%,52%,100%{ opacity:0 } 6%,46%{ opacity:1 } 30%{ transform:translateY(60%) } }
.an-fuss { position:absolute; right:26px; bottom:-10px; font-family:'Caveat',cursive; font-size:24px; color:#0084D1; transform:rotate(-4deg); text-shadow:0 0 18px rgba(0,132,209,.45); }
/* Ablauf: drei Schritte, Zahlen stempeln nacheinander */
.an-ablauf { background:#111; padding:70px 24px 60px; border-top:1px solid rgba(255,255,255,.04); }
.an-ablauf-inner { max-width:1100px; margin:0 auto; }
.an-ablauf h2 { text-align:center; font-size:clamp(26px,3vw,38px); margin:0 0 40px; }
.an-schritte { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; }
.an-schritt { text-align:center; padding:0 12px; opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.an-schritt.pg-in-view { opacity:1; transform:none; }
.an-num { font-family:'Caveat',cursive; font-size:64px; line-height:1; color:#0084D1; text-shadow:0 0 22px rgba(0,132,209,.4); display:inline-block; transform:scale(.6); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.an-schritt.pg-in-view .an-num { transform:scale(1); }
.an-schritt h3 { font-size:22px; margin:6px 0 10px; color:#fff; }
.an-schritt p { color:rgba(255,255,255,.72); font-size:16.5px; line-height:1.55; margin:0; }
/* Stufen: drei Karten in einer Reihe (Guide-Karten-Komponente) */
.xxx-kauf.an-stufen .row.row-top { grid-template-columns:1fr 1fr 1.25fr; }
.xxx-kauf.an-stufen .an-stufen-kopf { text-align:center; padding:76px 24px 36px; }
.xxx-kauf.an-stufen .an-stufen-kopf .an-script { font-family:'Caveat',cursive; font-size:clamp(34px,4vw,56px); color:#fff; font-weight:700; margin:0 0 6px; }
.xxx-kauf.an-stufen .an-stufen-kopf p { color:rgba(255,255,255,.62); font-size:17px; margin:0; }
.xxx-kauf.an-stufen .card.gratis .stamp { background:rgba(0,132,209,.16); color:#0084D1; }
.xxx-kauf.an-stufen .card .card-btn.ghost { background:transparent; border:1px solid rgba(0,132,209,.6); color:#0084D1; }
/* Gratis-Check-Formular */
.an-gratis { background:#0a0a0a; padding:80px 24px; }
.an-gratis-box { max-width:680px; margin:0 auto; background:#111; border:1px solid rgba(255,255,255,.07); border-right:3px solid #0084D1; border-radius:16px; padding:44px 40px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(0,132,209,.08); }
.an-gratis-box .an-script { font-family:'Caveat',cursive; font-size:clamp(34px,4vw,54px); color:#fff; text-align:center; margin:0 0 6px; }
.an-gratis-box .an-hinweis { text-align:center; color:rgba(255,255,255,.62); margin:0 0 28px; font-size:16.5px; }
.an-form label { display:block; color:#fff; font-size:15px; font-weight:700; margin:0 0 8px; }
.an-form .feld { margin-bottom:18px; }
.an-form input[type="text"], .an-form input[type="url"], .an-form input[type="email"] { width:100%; background:#0a0a0a; border:1px solid rgba(255,255,255,.12); border-radius:8px; color:#fff; font:inherit; font-size:16px; padding:14px 16px; transition:border-color .2s ease, box-shadow .2s ease; }
.an-form input:focus { outline:none; border-color:#0084D1; box-shadow:0 0 0 3px rgba(0,132,209,.2); }
.an-form input::placeholder { color:rgba(255,255,255,.35); }
.an-form .check { display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.78); font-size:14.5px; line-height:1.5; font-style:italic; margin:4px 0 22px; }
.an-form .check input { appearance:none; -webkit-appearance:none; width:18px; height:18px; flex-shrink:0; margin-top:3px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55); background:transparent; position:relative; cursor:pointer; }
.an-form .check input:checked { background:#0084D1; border-color:#0084D1; }
.an-form .check input:checked::after { content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.an-form .af-quittung { margin-top:14px; color:#0084D1; font-weight:700; }
.an-form .af-quittung.fehler { color:#ff8a80; }
.an-form .an-klein { color:rgba(255,255,255,.45); font-size:14px; margin:12px 0 0; text-align:center; }
@media (max-width:900px) {
  .an-hero-inner { grid-template-columns:1fr; gap:36px; padding-top:60px; text-align:center; }
  .an-lead { margin-left:auto; margin-right:auto; }
  .an-cta { justify-content:center; }
  .an-monitor { max-width:420px; }
  .an-schritte { grid-template-columns:1fr; gap:36px; }
  .xxx-kauf.an-stufen .row.row-top { grid-template-columns:1fr; }
  .an-gratis-box { padding:32px 22px; }
}
@media (prefers-reduced-motion: reduce) { .an-monitor::after, .an-monitor .an-scan-schein { animation:none; display:none; } .an-schritt { opacity:1; transform:none; } .an-num { transform:none; } }
/* Schluss-Zeile: „Noch unsicher, welche Stufe?" = 10,05 em in Caveat 700 → EINE Zeile, Schrift skaliert mit (gemessen 03.09.) */
body.analyse .pg-contact-inner { max-width:680px; }
body.analyse .pg-contact-script { white-space:nowrap; font-size:min(62px, calc((100vw - 48px) / 10.3)); }
/* Bewusste Handy-Umbrüche der Caveat-Zeilen (nach dem Satzzeichen, nie mitten im Satz) */
.an-br { display:none; }
@media (max-width:600px) { .an-br { display:inline; } }

/* ============================================================
   COACHING — Seite /coaching/ (Neubau 04.09.2026)
   Signatur: der Chat, der sich selbst schreibt (Telegram-Look, 14-s-Schleife).
   Baut auf Analyse-/Guide-Komponenten auf (an-kicker/-title/-sub/-lead/-btn, pg-fw, xxx-kauf, pg-contact).
   ============================================================ */
.co-hero { background:#0a0a0a; padding:0 24px 40px; position:relative; overflow:hidden;
  background-image: radial-gradient(ellipse 50% 45% at 74% 40%, rgba(0,132,209,.16), transparent 70%); }
.co-hero-inner { max-width:1180px; margin:0 auto; padding:96px 0 20px; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
/* Das Chat-Fenster */
/* Farben = Telegram-Nachtmodus (Desktop), auf Christians Wunsch authentisch (04.09.): Hintergrund #0E1621, Kopf #17212B, eingehend #182533, ausgehend #2B5278 */
.co-chat { position:relative; margin:0 auto; max-width:400px; text-align:left; border-radius:22px; background:#0E1621; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(0,132,209,.16); overflow:visible; }
.co-chat-kopf { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.07); border-radius:22px 22px 0 0; background:#17212B; }
.co-chat-kopf img { width:34px; height:auto; display:block; opacity:.9; }
.co-chat-name { color:#fff; font-weight:700; font-size:15px; line-height:1.2; }
.co-chat-status { color:#5EB5F7; font-size:12.5px; line-height:1.2; }
/* Feste Endhöhe (gemessen 04.09.: 392 px Desktop / 413 px Handy) — das Fenster wächst NICHT mit, nur der Inhalt bewegt sich; Blasen erscheinen der Reihe nach von oben; unsichtbare Blasen belegen ihren Platz schon */
.co-chat-verlauf { box-sizing:border-box; height:400px; padding:18px 16px 22px; display:flex; flex-direction:column; justify-content:flex-start; gap:10px; overflow:hidden; }
.co-blase { position:relative; max-width:82%; padding:10px 14px 18px; border-radius:16px; font-size:15px; line-height:1.4; color:#fff; opacity:0; transform:translateY(8px) scale(.96); }
.co-blase.sie { align-self:flex-start; background:#182533; border-bottom-left-radius:4px; transform-origin:left bottom; }
.co-blase.wir { align-self:flex-end; background:#2B5278; border-bottom-right-radius:4px; transform-origin:right bottom; }
.co-blase time { position:absolute; right:10px; bottom:4px; font-size:10.5px; color:rgba(255,255,255,.45); }
.co-tipp { display:flex; gap:4px; padding:10px 14px; border-radius:16px; width:max-content; opacity:0; }
.co-tipp.sie { align-self:flex-start; background:#182533; border-bottom-left-radius:4px; }
.co-tipp.wir { align-self:flex-end; background:#2B5278; border-bottom-right-radius:4px; }
.co-tipp span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.7); animation:coPunkt 1s ease-in-out infinite; }
.co-tipp span:nth-child(2) { animation-delay:.15s; } .co-tipp span:nth-child(3) { animation-delay:.3s; }
@keyframes coPunkt { 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(-3px); opacity:1 } }
/* Ablauf über 14 s: Tippen → Blase, viermal, dann alles ausblenden und von vorn */
.co-tipp, .co-blase { animation-duration:14s; animation-iteration-count:infinite; animation-timing-function:ease-out; animation-fill-mode:both; }
.co-tipp[data-n="1"]  { animation-name:coTipp1; }  .co-blase[data-n="1"] { animation-name:coBlase1; }
.co-tipp[data-n="2"]  { animation-name:coTipp2; }  .co-blase[data-n="2"] { animation-name:coBlase2; }
.co-tipp[data-n="3"]  { animation-name:coTipp3; }  .co-blase[data-n="3"] { animation-name:coBlase3; }
.co-tipp[data-n="4"]  { animation-name:coTipp4; }  .co-blase[data-n="4"] { animation-name:coBlase4; }
/* Tipp-Fenster: sichtbar, dann per Höhe/Abstand weg, damit die Blase an seine Stelle rückt */
@keyframes coTipp1 { 0%{ opacity:0 } 2%,8%{ opacity:1; max-height:40px } 8.6%,100%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px } }
@keyframes coTipp2 { 0%,15%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px } 16%,28%{ opacity:1; max-height:40px; padding-top:10px; padding-bottom:10px; margin-top:0 } 28.6%,100%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px } }
@keyframes coTipp3 { 0%,36%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px } 37%,44%{ opacity:1; max-height:40px; padding-top:10px; padding-bottom:10px; margin-top:0 } 44.3%,100%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px } }
@keyframes coTipp4 { 0%,51%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px } 52%,64%{ opacity:1; max-height:40px; padding-top:10px; padding-bottom:10px; margin-top:0 } 64.3%,100%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px } }
@keyframes coBlase1 { 0%,8.6%{ opacity:0; transform:translateY(8px) scale(.96) } 11%,92%{ opacity:1; transform:none } 97%,100%{ opacity:0; transform:none } }
@keyframes coBlase2 { 0%,28.6%{ opacity:0; transform:translateY(8px) scale(.96) } 31%,92%{ opacity:1; transform:none } 97%,100%{ opacity:0; transform:none } }
@keyframes coBlase3 { 0%,44.3%{ opacity:0; transform:translateY(8px) scale(.96) } 46.5%,92%{ opacity:1; transform:none } 97%,100%{ opacity:0; transform:none } }
@keyframes coBlase4 { 0%,64.3%{ opacity:0; transform:translateY(8px) scale(.96) } 66.5%,92%{ opacity:1; transform:none } 97%,100%{ opacity:0; transform:none } }
.co-blase { display:block; }
.co-fuss { right:22px; bottom:-44px; color:#FF7A00; text-shadow:0 0 18px rgba(255,122,0,.45); }
/* Für-wen-Label: Abstand nach der Bühne */
.co-label { padding-top:80px; }
/* Sicherheit: drei ruhige Zeilen */
.co-sicher { background:#0a0a0a; padding:10px 24px 80px; }
.co-sicher-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; border-top:1px solid rgba(255,255,255,.06); padding-top:36px; }
.co-sicher-punkt { color:rgba(255,255,255,.62); font-size:15.5px; line-height:1.55; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.co-sicher-punkt.pg-in-view { opacity:1; transform:none; }
.co-sicher-punkt strong { color:#fff; display:block; margin-bottom:4px; letter-spacing:.02em; }
/* Kontakt-Schluss mit Stickfigur (LOVE4) */
.co-schluss .co-schluss-inner { max-width:900px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:48px; }
.co-schluss .co-figur { position:relative; flex-shrink:0; width:150px; }
.co-schluss .co-figur img { width:100%; height:auto; }
.co-schluss .pg-contact-inner { margin:0; text-align:center; } /* Zeilen unter der Caveat-Frage mittig unter ihr (Christian 04.09.) */
body.coaching .pg-contact-inner { max-width:620px; }
body.coaching .pg-contact-script { white-space:nowrap; font-size:min(62px, calc((100vw - 48px - 150px - 48px) / 9.9)); }
@media (max-width:900px) {
  .co-hero-inner { grid-template-columns:1fr; gap:36px; padding-top:60px; text-align:center; }
  .co-chat { max-width:360px; }
  .co-chat-verlauf { height:424px; }
  .co-sicher-inner { grid-template-columns:1fr; gap:22px; }
  .co-schluss .co-schluss-inner { flex-direction:column; gap:20px; text-align:center; }
  .co-schluss .co-figur { width:110px; }
  body.coaching .pg-contact-script { font-size:min(62px, calc((100vw - 48px) / 9.9)); }
}
@media (prefers-reduced-motion: reduce) {
  .co-tipp { display:none; } .co-blase { animation:none; opacity:1; transform:none; }
  .co-sicher-punkt, .pg-fw-card { opacity:1; transform:none; }
}

/* ============================================================
   BAUSTEINE — Seite /bausteine/ (Neubau 04.09.2026)
   Signatur: der Baukasten — Profilbild, Header und Profiltext rasten (Guide-Reihenfolge)
   nacheinander in ein leeres Profil ein (12-s-Schleife).
   ============================================================ */
.bs-hero { background:#0a0a0a; padding:0 24px 40px; position:relative; overflow:hidden;
  background-image: radial-gradient(ellipse 50% 45% at 74% 40%, rgba(0,132,209,.16), transparent 70%); }
.bs-hero-inner { max-width:1180px; margin:0 auto; padding:96px 0 20px; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.bs-bau { position:relative; margin:0 auto; max-width:440px; }
.bs-profil { position:relative; height:340px; border-radius:14px; background:#0f0f0f; border:1px solid rgba(255,255,255,.08); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(0,132,209,.16); }
/* Aufbau wie das echte Profil (Screenshot Christian 04.09.): Banner volle Breite, eckiges Profilbild links im Banner,
   Name + Zahlen unten im Banner, darunter Symbolleiste mit orangenem Knopf, dann der Text. */
.bs-profil::before { content:""; position:absolute; left:0; right:0; top:0; height:150px; border-bottom:1.5px dashed rgba(255,255,255,.14); }
.bs-profil::after { content:""; position:absolute; left:16px; top:16px; width:100px; height:100px; border:1.5px dashed rgba(255,255,255,.16); border-radius:6px; }
.bs-header { position:absolute; left:0; right:0; top:0; height:150px; border-radius:14px 14px 0 0;
  background:linear-gradient(115deg, rgba(0,132,209,.55) 0%, #0084D1 55%, rgba(0,132,209,.7) 100%); box-shadow:0 10px 30px rgba(0,132,209,.25); }
.bs-header::after { content:""; position:absolute; inset:0; border-radius:14px 14px 0 0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, transparent 6px 14px); }
.bs-bild { position:absolute; left:16px; top:16px; width:100px; height:100px; border-radius:6px; background:radial-gradient(circle at 40% 30%, #ffb066, #FF7A00 60%, #b35400); box-shadow:0 8px 24px rgba(255,122,0,.35); }
.bs-name { position:absolute; left:130px; top:112px; display:flex; align-items:center; gap:8px; z-index:2; }
.bs-name .bs-zeile.name { width:110px; height:16px; margin:0; }
.bs-check { width:12px; height:12px; border-radius:50%; background:#0084D1; display:inline-block; }
.bs-stats { position:absolute; right:16px; top:104px; display:flex; gap:14px; z-index:2; }
.bs-stats i { display:block; width:38px; height:28px; border-radius:4px; background:rgba(255,255,255,.55); }
.bs-leiste { position:absolute; left:16px; right:16px; top:160px; height:36px; display:flex; align-items:center; gap:10px; }
.bs-leiste i { display:block; width:14px; height:14px; border-radius:3px; background:rgba(255,255,255,.35); }
.bs-leiste i:first-child { background:#FF7A00; }
.bs-pill { display:block; height:24px; border-radius:999px; width:70px; border:1px solid rgba(255,255,255,.35); margin-left:auto; }
.bs-pill.orange { background:#FF7A00; border-color:#FF7A00; width:84px; }
.bs-pill.orange + .bs-pill { margin-left:0; }
.bs-text { position:absolute; left:16px; right:16px; top:214px; }
.bs-zeile { display:block; height:11px; border-radius:6px; background:rgba(255,255,255,.22); margin:0 0 12px; width:100%; }
.bs-zeile.name { height:16px; width:52%; background:rgba(255,255,255,.85); margin-bottom:16px; }
.bs-zeile.kurz { width:64%; }
.bs-tag { position:absolute; right:-6px; top:-12px; font-family:Carlito, Calibri, 'Helvetica Neue', Arial, sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:#0a0a0a; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 9px; }
.bs-header .bs-tag { right:12px; top:12px; }
.bs-bild .bs-tag { right:auto; left:0; top:108px; }
.bs-text .bs-tag { right:0; top:auto; bottom:-34px; }
/* Einrasten: von rechts, kleiner Überschwung, dann Ruhe; am Ende alles weg und von vorn */
.bs-header, .bs-bild, .bs-text { opacity:0; animation-duration:12s; animation-iteration-count:infinite; animation-timing-function:cubic-bezier(.34,1.4,.64,1); animation-fill-mode:both; }
.bs-header { animation-name:bsHeader; } .bs-bild { animation-name:bsBild; } .bs-text { animation-name:bsText; }
@keyframes bsHeader { 0%,30%{ opacity:0; transform:translateX(70px) } 36%,90%{ opacity:1; transform:none } 96%,100%{ opacity:0; transform:none } }
@keyframes bsBild   { 0%,6%{ opacity:0; transform:translateX(70px) scale(.7) } 13%,90%{ opacity:1; transform:none } 96%,100%{ opacity:0; transform:none } }
@keyframes bsText   { 0%,55%{ opacity:0; transform:translateX(70px) } 62%,90%{ opacity:1; transform:none } 96%,100%{ opacity:0; transform:none } }
.bs-fuss { right:22px; bottom:-44px; color:#FF7A00; text-shadow:0 0 18px rgba(255,122,0,.45); }
/* Drei Karten statt fünf */
.bs-label { padding-top:80px; }
.bs-drei .pg-bereiche-grid { grid-template-columns:repeat(3,1fr); max-width:1000px; gap:18px; }
.bs-drei .pg-bc { padding:26px 24px; }
/* Kaufkarten: 3 oben, 2 unten */
.xxx-kauf.bs-kauf .row.row-top { grid-template-columns:1fr 1fr 1fr; }
.xxx-kauf.bs-kauf .row.row-bottom { grid-template-columns:1fr 1.25fr; }
body.bausteine .an-title { white-space:nowrap; font-size:min(clamp(40px,4.6vw,72px), calc((100vw - 48px) / 8.9)); } /* „Die PROFIL-Bausteine“ = 8,56 em → eine Zeile, Schrift skaliert mit */
body.bausteine .pg-contact-inner { max-width:640px; }
body.bausteine .pg-contact-script { white-space:nowrap; font-size:min(62px, calc((100vw - 48px - 150px - 48px) / 11.4)); }
@media (max-width:900px) {
  .bs-hero-inner { grid-template-columns:1fr; gap:36px; padding-top:60px; text-align:center; }
  .bs-bau { max-width:360px; }
  .bs-profil { height:330px; }
  .bs-name .bs-zeile.name { width:86px; } .bs-stats { gap:8px; } .bs-stats i { width:26px; height:24px; }
  .bs-drei .pg-bereiche-grid { grid-template-columns:1fr; }
  .xxx-kauf.bs-kauf .row.row-top, .xxx-kauf.bs-kauf .row.row-bottom { grid-template-columns:1fr; }
  body.bausteine .pg-contact-script { font-size:min(62px, calc((100vw - 48px) / 11.4)); }
}
@media (prefers-reduced-motion: reduce) { .bs-header, .bs-bild, .bs-text { animation:none; opacity:1; transform:none; } }

/* ============================================================
   SHOP — Seite /shop/ (Neubau 04.09.2026)
   Signatur: das Neon — der orange Schein hinter dem Shirt flackert an
   wie eine Leuchtreklame, steht, verlischt, und von vorn (9-s-Schleife).
   ============================================================ */
.sh-hero { background:#0a0a0a; padding:0 24px 40px; position:relative; overflow:hidden;
  background-image: radial-gradient(ellipse 50% 45% at 74% 45%, rgba(255,122,0,.10), transparent 70%); }
.sh-hero-inner { max-width:1180px; margin:0 auto; padding:96px 0 20px; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.sh-buehne { position:relative; margin:0 auto; max-width:400px; padding:10px 20px 30px; }
.sh-shirt { position:relative; z-index:2; display:block; width:100%; height:auto; mix-blend-mode:screen; animation:shFloat 6s ease-in-out infinite; }
.sh-neon { position:absolute; left:10%; right:10%; top:8%; bottom:14%; border-radius:40%; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,122,0,.55) 0%, rgba(255,122,0,.22) 40%, transparent 70%); filter:blur(28px);
  animation:shNeon 9s linear infinite; }
@keyframes shNeon { 0%{ opacity:0 } 3%{ opacity:.9 } 5%{ opacity:.1 } 8%{ opacity:1 } 10%{ opacity:.3 } 13%,80%{ opacity:1 } 92%,100%{ opacity:0 } }
@keyframes shFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.sh-fuss { right:8px; bottom:-14px; color:#FF7A00; text-shadow:0 0 18px rgba(255,122,0,.45); }
/* Motive: zwei Karten, Shirt-Bild oben in der Karte */
.xxx-kauf.sh-motive .row.row-top { grid-template-columns:1fr 1fr; max-width:820px; margin-left:auto; margin-right:auto; }
.xxx-kauf.sh-motive .card .sh-card-shirt { width:170px; max-width:none; margin:0 auto 18px; box-shadow:none; mix-blend-mode:screen; }
.xxx-kauf.sh-motive .card .card-name { font-size:22px; letter-spacing:.02em; }
/* Platzhalter-Karte, bis das zweite Shirt-Bild da ist */
.sh-ph { width:170px; height:211px; margin:0 auto 18px; border:1.5px dashed rgba(255,255,255,.28); border-radius:8px; display:flex; align-items:center; justify-content:center; text-align:center;
  color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.14em; text-transform:uppercase; line-height:1.6; }
/* Bundle: eine Karte, mittig */
.xxx-kauf.sh-bundle .row.row-top { grid-template-columns:minmax(0, 640px); justify-content:center; }
.xxx-kauf.sh-bundle .an-stufen-kopf { padding-top:40px; }
body.shop .pg-contact-inner { max-width:640px; }
body.shop .pg-contact-script { white-space:nowrap; font-size:min(62px, calc((100vw - 48px - 150px - 48px) / 10.6)); }
@media (max-width:900px) {
  .sh-hero-inner { grid-template-columns:1fr; gap:36px; padding-top:60px; text-align:center; }
  .sh-buehne { max-width:320px; }
  .xxx-kauf.sh-motive .row.row-top { grid-template-columns:1fr; }
  .xxx-kauf.sh-motive .card .card-name { white-space:nowrap; font-size:min(22px, calc((100vw - 48px - 64px) / 14.6)); } /* „ICH WILL DICH (KOMMEN) SEHEN“ = 14,4 em → eine Zeile */
  body.shop .pg-contact-script { font-size:min(62px, calc((100vw - 48px) / 10.6)); }
}
@media (prefers-reduced-motion: reduce) { .sh-neon { animation:none; opacity:1; } .sh-shirt { animation:none; } }

/* ============================================================
   RECHTSSEITEN — Impressum · Datenschutz · AGB · Widerruf (04.09.2026)
   Ruhig, lesbar, volle Spaltenbreite (kein enger Deckel).
   ============================================================ */
.recht-seite { background:#0a0a0a; padding:80px 24px 90px; }
.recht-inner { max-width:820px; margin:0 auto; }
.recht-inner h1 { font-size:clamp(30px,4vw,44px); margin:0 0 28px; color:#fff; }
.recht-inner h2 { font-size:20px; color:#fff; margin:34px 0 10px; }
.recht-inner h3 { font-size:17px; color:#0084D1; margin:22px 0 8px; }
.recht-inner p { color:rgba(255,255,255,.78); font-size:16.5px; line-height:1.65; margin:0 0 14px; }
.recht-inner a { color:#0084D1; text-decoration:underline; text-underline-offset:3px; }
.recht-inner a:hover { color:#fff; }
.recht-inner .recht-formular { background:#111; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:22px 24px; color:rgba(255,255,255,.85); }

/* ============================================================
   FEHLERSEITE / QUITTUNG — statt Inline-Stilen (Aufräumen 05.09.2026)
   ============================================================ */
.pg-contact.kurz { min-height:62vh; display:flex; align-items:center; }
.pg-contact.kurz.hoch { min-height:70vh; }
.pg-contact.kurz .text { color:rgba(255,255,255,.75); font-size:18px; line-height:1.6; margin:0 0 10px; }
.pg-contact.kurz .text.abstand { margin-bottom:28px; }
.pg-contact.kurz .hinweis { color:rgba(255,255,255,.55); font-size:16px; margin:0 0 28px; }
.pg-contact.kurz .knoepfe { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:0; }
.pg-btn.ghost { background:transparent; border:1px solid rgba(0,132,209,.6); }
/* Bilder mit festen Maßen (kein Layoutsprung), Höhe folgt der Breite */
:where(img[width][height]) { height:auto; } /* ohne Gewicht: jede Klassen-Regel darf die Höhe überschreiben */