/* ---allgemeine Änderungen--- */

/* Linkzeichen ausblenden */
.no_ext .external::after {
content: none !important;
}

.no_ext_no_underline .external::after {
content: none !important;
text-decoration: none !important;
}

/* Textblock wie h1, blaue Schrift */
.big{
color: rgb(0,45,103);
font-size: 2.5rem; 
line-height: 120%;
font-weight:bold;
text-align: center;
}

/* Textblock wie h1, weiße Schrift */
.big_weiß{
color: #ffffff;
font-size: 2.5rem; 
line-height: 120%;
font-weight:bold;
text-align: center;
}

/* Textblock wie h2, blaue Schrift */
.big2{
color: rgb(0,45,103);
font-size: 1.375rem; 
line-height: 120%;
font-weight:bold;
text-align: center;
}

/* Textblock wie h2, weiße Schrift */
.big2_weiß{
color: #ffffff;
font-size: 1.375rem; 
line-height: 120%;
font-weight:bold;
text-align: center;
}

/* Textblock wie h2, orangene Schrift */
.big2_orange{
color: #ff6600;
font-size: 1.375rem; 
line-height: 120%;
font-weight:bold;
text-align: center;
}

/* Farbänderungen im Text, geht nur bei "Textblock" */

.orange{
color:#ff6601;
}

.ultramarin{
color:#002d67;
}

.blau{
color:#0066b3;
}





/* Blog */
.zitat{
color: #ff6600;
font-size: 28.0px; 
line-height: 120%;
font-weight:bold;
}






/* nachhaltige Geldanlage */
.bild-tabelle {
    border-collapse: collapse;
    width:80%;
    margin-left: auto;
   margin-right: auto;
}

.bild-tabelle td {
    padding: 10px;
   margin: 0 auto;
}

.bild-container {
    position: relative;
    width: 300px;
    height: 533px;
    overflow: hidden;
}

.bild-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.bild-container img.hover {
    opacity: 0;
}

.bild-container:hover img.normal {
    opacity: 0;
}

.bild-container:hover img.hover {
    opacity: 1;
}






/* Filialseiten Öffnungszeiten */
.opening-hours {
    border-collapse: collapse;
    text-align: left;
}

.time {
    padding-left:20px;
padding-right:20px;
}

.spalte {
    width:80px;
}







/* Styles für die Zinsübersicht intern */
    .angebote-container * {
      box-sizing: border-box;
    }
  
    .angebote-container h1 {
      color: #00559b;
    }
  
    .angebote-container h2 {
      color: white;
      font-weight: 500;
    }
  
    /* Nur unsere Headline-Box */
    .angebote-header-box h2 {
      margin-bottom: 0 !important;
    }
  
    .angebote-container .angebote-container-flex {
      display: flex;
      justify-content: space-around;
      gap: 20px;
      flex-wrap: nowrap;
      overflow-x: auto;
    }
  
    .angebote-container .angebote-product-card {
      background-color: #002f67;
      color: white;
      padding: 20px;
      border-radius: 10px;
      width: 250px;
      text-align: left;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      position: relative;
      margin-top: 30px;
    }
  
    .angebote-container .angebote-product-card.angebote-sparbriefe {
      width: 300px;
      max-width: none;
    }
  
    .angebote-container .angebote-header-box {
      background-color: #0067b3;
      color: white;
      text-align: center;
      padding: 10px;
      border-radius: 10px 10px 0 0;
      position: absolute;
      top: -30px;
      left: 0;
      right: 0;
    }
  
    .angebote-container .angebote-card-content {
      margin-top: 40px;
    }
  
    .angebote-container .angebote-subtitle {
      margin-bottom: 30px;
      text-align: left;
      font-size: 18px;
      margin-top: -10px;
    }
  
    .angebote-container .angebote-zwischen {
      padding-bottom: 10px;
      font-size: 14px;
    }
  
    .angebote-container .angebote-tages {
      font-size: 15px;
    }
  
    .angebote-container .angebote-conditions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  
    .angebote-container .angebote-condition-box {
      background-color: white;
      color: #003366;
      padding: 10px;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: bold;
    }
  
    .angebote-container .angebote-condition-box-center {
      background-color: rgb(249, 249, 249);
      color: #003366;
      padding: 10px;
      border-radius: 5px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
  
    .angebote-container .angebote-notes {
      margin-top: 20px;
      font-size: 14px;
      color: #e0e0e0;
    }
  
    .angebote-container .angebote-product-card table {
      width: 100%;
      border-collapse: collapse;
      border: none;
    }
  
    .angebote-container .angebote-product-card table th,
    .angebote-container .angebote-product-card table td {
      padding: 10px;
      background-color: white;
      color: #003366;
      border: 1px solid #ccc;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
    }
  
    .angebote-container .angebote-product-card table th {
      background-color: #e0e0e0;
    }
  
    .angebote-container .angebote-product-card table td {
      background-color: #ffffff;
    }
  
    @media (max-width: 1400px) {
      .angebote-container .angebote-container-flex {
        flex-wrap: wrap;
        justify-content: center;
      }
  
      .angebote-container .angebote-product-card {
        width: 45%;
        margin-bottom: 20px;
      }
    }
  
    @media (max-width: 768px) {
      .angebote-container .angebote-container-flex {
        flex-direction: column;
        align-items: center;
      }
  
      .angebote-container .angebote-product-card {
        width: 100%;
        margin-bottom: 20px;
      }
    }






/* Scoped CSS für das Paket-Design VR Prime Konto */

.pakete-section {
  font-family: Arial, sans-serif;
  background: #f5f7f8;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.pakete-section .cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pakete-section .card {
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Orange Zusatzpakete */
.pakete-section .card.zusatz {
  background-color: #e68424;
  flex: 0 0 260px;
  text-align: center;
}

.pakete-section .card.zusatz .subtitle {
  font-size: 0.9rem;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.pakete-section .card.zusatz .title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.pakete-section .card.zusatz ul {
  list-style: none;
  margin-bottom: 1.5rem;
  text-align: left;
  display: inline-block;
}

.pakete-section .card.zusatz ul li {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.pakete-section .card.zusatz ul li::before {
  content: '✓';
  margin-right: 8px;
  font-weight: bold;
}

.pakete-section .card.zusatz .price {
  font-size: 1.25rem;
  text-align: center;
  font-weight: bold;
}

/* Blaue Hauptkarte */
.pakete-section .card.haupt {
  background-color: #122b5c;
  flex: 0 0 360px;
  text-align: center;
  padding: 32px;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* Hover-Effekt nur auf der blauen Karte */ .pakete-section .card.haupt:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.2); }

.pakete-section .card.haupt .subtitle {
  font-size: 0.8rem;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 0.5rem;
  color: white;
}

.pakete-section .card.haupt .title {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: white;
}

.pakete-section .card.haupt ul {
  list-style: none;
  margin: 0 auto 2rem;
  text-align: left;
  display: inline-block;
  color: white;
}

.pakete-section .card.haupt ul li {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  font-size: 1.05rem;  /* etwas größer, wie gewünscht */
  line-height: 1.4;
  color: white;
}

.pakete-section .card.haupt ul li::before {
  content: '✓';
  margin-right: 8px;
  font-size: 1.2rem;
}

.pakete-section .card.haupt .price {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: white;
}

/* Button in der blauen Karte */
.pakete-section .card.haupt .btn {
  display: inline-block !important;
  padding: 12px 32px !important;
  background: #ffffff !important;
  color: #122b5c !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background 0.3s !important;
}

.pakete-section .card.haupt .btn:hover {
  background: #f0f0f0;
}

/* Plus-Symbole zwischen den Karten */
.pakete-section .arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pakete-section .arrow .plus {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #122b5c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: #122b5c;
}

/* Responsives Verhalten */
@media (max-width: 800px) {
  .pakete-section .cards {
    flex-direction: column;
  }

  .pakete-section .card.zusatz,
  .pakete-section .card.haupt {
    flex: 0 0 100%;
    max-width: 480px;
  }

  .pakete-section .arrow {
    display: none;
  }
}







/* Wearables Landingpage */
.vblh-stepper {
  --vblh-maxw: 1120px;
  --vblh-gap: 18px;
  --vblh-radius: 22px;

  --vblh-pill: #0066b3;

  --vblh-headline: #111318;
  --vblh-title: #14171d;
  --vblh-text: rgba(17, 19, 24, 0.86);
  --vblh-muted: rgba(17, 19, 24, 0.60);

  --vblh-link: rgba(17, 19, 24, 0.88);
  --vblh-link-underline: rgba(17, 19, 24, 0.28);
  --vblh-link-hover: rgba(17, 19, 24, 0.96);

  --vblh-card-1: #d3e3f7;
  --vblh-card-2: #eef5ff;
  --vblh-card-3: #ffffff;

  --vblh-border: rgba(0, 45, 103, 0.12);
  --vblh-border-strong: rgba(0, 45, 103, 0.20);
  --vblh-shadow: 0 18px 45px rgba(0, 45, 103, 0.10);

  --vblh-bignum: rgba(0, 45, 103, 0.11);

  padding: 28px 16px;
}

.vblh-stepper__inner {
  max-width: var(--vblh-maxw);
  margin: 0 auto;
}

.vblh-stepper__header {
  margin-bottom: 18px;
}

.vblh-stepper__headline {
  margin: 0 0 6px 0;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--vblh-headline);
}

.vblh-stepper__subline {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vblh-muted);
}

.vblh-stepper__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vblh-gap);
}

/* Card Base */
.vblh-stepper__card {
  position: relative;
  overflow: hidden;

  border-radius: var(--vblh-radius);
  border: 1px solid var(--vblh-border);
  box-shadow: var(--vblh-shadow);

  padding: 18px 18px 14px 18px; /* ✅ unten etwas weniger Padding */
  min-height: 190px;           /* ✅ weniger Höhe */

  transform: translateY(0);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }

.vblh-stepper__card:hover {
  transform: translateY(-4px);
  border-color: var(--vblh-border-strong);
  box-shadow: 0 24px 60px rgba(0, 45, 103, 0.14); }

.vblh-stepper__card--1 { background: var(--vblh-card-1); }
.vblh-stepper__card--2 { background: var(--vblh-card-2); }
.vblh-stepper__card--3 { background: var(--vblh-card-3); }

/* Pill / Badge */
.vblh-stepper__badge {
  position: relative;
  z-index: 6;

  display: inline-flex;
  align-items: center;

  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ffffff;

  padding: 8px 12px;
  border-radius: 999px;

  background: var(--vblh-pill);
  box-shadow: 0 10px 22px rgba(0, 102, 179, 0.20);

  margin-bottom: 14px; /* ✅ MEHR ABSTAND zur Überschrift */ }

/* Content */
.vblh-stepper__title,
.vblh-stepper__text {
  position: relative;
  z-index: 5;
  margin-left: 2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.60); }

.vblh-stepper__title {
  margin: 0 0 8px 0; /* ✅ oben kein Extra-Abstand, weil Badge jetzt Abstand liefert */
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--vblh-title);
}

.vblh-stepper__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vblh-text);
}

.vblh-stepper__text strong {
  color: rgba(17, 19, 24, 0.96);
  font-weight: 650;
}

.vblh-stepper__link {
  color: var(--vblh-link);
  text-decoration: none;
  border-bottom: 1px solid var(--vblh-link-underline);
  transition: color 180ms ease, border-color 180ms ease; } .vblh-stepper__link:hover {
  color: var(--vblh-link-hover);
  border-bottom-color: rgba(17, 19, 24, 0.46); }

/* HUGE number (LEFT, OVER TEXT) */
.vblh-stepper__bgnum {
  /*position: absolute; */
  left: -16px;
  top: 50%;
  transform: translateY(-52%);

  font-size: clamp(175px, 17vw, 200px);
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 1;

  color: var(--vblh-bignum);
  text-shadow: 0 16px 44px rgba(0, 45, 103, 0.08);

  z-index: 7;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

@supports not (mix-blend-mode: multiply) {
  .vblh-stepper__bgnum { color: rgba(0, 45, 103, 0.08); } }

/* Responsive */
@media (max-width: 900px) {
  .vblh-stepper__grid { grid-template-columns: 1fr; }
  .vblh-stepper__bgnum {
    font-size: clamp(165px, 36vw, 260px);
    left: -14px;
  }
}










/* Jugendbonus-Seite */

/* Tabelle mit Bausteinen */

.wrapper-bausteine {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.bonus-card {
    text-align: center;
}

.status-title {
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.gold-text { color: #f5cd5a; }
.silver-text { color: #e2e0e2; }
.bronze-text { color: #e1ccb5; }
.classic-text { color: #b2cce3; }

.card-bausteine {
    width: 200px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gold-bg { background: #f5cd5a; }
.silver-bg { background: #e2e0e2; }
.bronze-bg { background: #e1ccb5; }
.classic-bg { background: #b2cce3; }

.card-section {
    padding: 25px;
}

.border {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.small-text {
    font-size: 1rem;
}

.big-number {
    font-size: 1.375rem;
    font-weight: bold;
    margin: 5px 0;
}



/* Tabelle mit Kosten */

#jugendbonus-kosten{
    max-width: 1200px;
    margin: auto;
}

.base-costs {
    font-size: 1rem;
    margin-bottom: 30px;
}

.card {
    background: white;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.cost-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 1rem;
}

.cost-table th,
.cost-table td {
    padding: 18px;
}

.row-title {
    text-align: left;
}

.subtext {
    font-size: 0,7rem;
    color: #6b7280;
}

.gold {
    background: #f7d566;
    color: white;
}

.silver {
    background: #bebcbb;
    color: white;
}

.bronze {
    background: #cfa373;
    color: white;
}

.classic {
    background: #669ac7;
    color: white;
}

.row-light {
    background: #f9fafb;
}


.positive {
    color: #047857;
    font-weight: bold;
}


.package-container {
    
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.package-button {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
  color: black;
  padding: 15px 20px;
  background: #eef2ff;
  border-radius:8px;
  border-left:6px solid #0066b3;
margin-bottom:-10px;
}

.jugendbonus_button a.external:hover {
  background: #0066b3;
  color: white;
}

.jugendbonus_button a.external {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  color: black;
  padding: 15px 20px;
  background: #eef2ff;
  border-radius:8px;
  border-left:6px solid #0066b3;
  margin-bottom:-10px;
}









/* Banking-App Startseite-Flag*/
  :root{
    --promo-text: #242424;
    --promo-border: #242424; 
}

  .promo-banner{
    width: 100%;
    box-sizing: border-box;
    padding: 5px 10px;
    color: #fff;

    background: #e1ebf5;
    border: 1px solid rgba(255,255,255,.10);
  }

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

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 44px;

    text-align: center;    
  }

  .promo-pill{
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 10px;
    border: 2px solid var(--promo-border);
    font-size: 14px;
    white-space: nowrap;
 color: var(--promo-text);
  }

  .promo-text{
    margin: 0 !important;
    color: var(--promo-text);
    font-size: 15px;
    flex: 0 1 760px;         
    max-width: 760px;         
  }

.promo .no_ext_no_underline a.external {
  color: #242424;
  font-size: 16px;
  font-weight: 500;
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

.no_ext_no_underline a.external {
  display: inline;              /* oder inline-block, falls nötig */
  color: var(--promo-text);
  font-size: 15px;              /* wie .promo-text */
  font-weight: 400;             /* wie normaler Text */
  text-decoration: none;        /* keine Unterstreichung im Normalzustand */
}
.no_ext_no_underline a.external:hover {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

.promo .no_ext_no_underline a.external {
  position: relative;
}

.promo-arrow {
  width: 22px;
  height: 22px;
  margin-left: 2px;
  vertical-align: vertical-align: baseline;
 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo .no_ext_no_underline a.external:hover .promo-arrow {
  transform: translateX(4px);  /* Pfeil 4px nach rechts */
}

  @media (max-width: 720px){
    .promo-inner{
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    .promo-text{
      flex-basis: 100%;
      max-width: 100%;
    }
  }


/* RELEASE 2026-08-05 — OHNE CSS CUSTOM PROPERTIES
   Alle Farb- und Layoutwerte sind direkt in den Klassen eingetragen.
*/

/* =============================================================
   VBLH KREDITKARTEN – CSS-ONLY SCROLL STORY
   Drei eigenständig einbaubare Scrollytelling-Abschnitte:
   cc = Kartendesigns, ct = Kontaktlos, af = Alltagsvorteile.
   ============================================================= */


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #10243b;
  background: #fff;
}

img {
  max-width: 100%;
}

/* Nur für die eigenständige Demo-Datei. Bei Integration entfernbar. */
.demo-intro,
.demo-outro {
  display: grid;
  min-height: 72svh;
  place-content: center;
  padding: 8vw;
  text-align: center;
  background: #fff;
}

.demo-intro h1 {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.demo-intro p,
.demo-outro p {
  max-width: 55ch;
  margin: 1.5rem auto 0;
  color: #506579;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.demo-kicker {
  color: #005ca9 !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-outro {
  min-height: 55svh;
  background: #06182f;
}

.demo-outro p {
  color: #fff;
}

.scroll-hint {
  position: absolute;
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scroll-hint > span {
  position: relative;
  width: 1.3rem;
  height: 2.1rem;
  border: 1px solid currentColor;
  border-radius: 1rem;
}

.scroll-hint > span::after {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  width: 0.22rem;
  height: 0.42rem;
  translate: -50% 0;
  content: "";
  border-radius: 1rem;
  background: currentColor;
  animation: scroll-wheel 1.7s ease-in-out infinite;
}

@keyframes scroll-wheel {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  45% { transform: translateY(0.62rem); opacity: 1; }
  70% { transform: translateY(0.62rem); opacity: 0; }
}

/* =============================================================
   1. KARTENDESIGNS
   ============================================================= */
.cc-story {
  position: relative;
  overflow: clip;
  color: #ffffff;
  background:
    radial-gradient(circle at 72% 44%, rgb(47 147 218 / 28%), transparent 30%),
    linear-gradient(135deg, #06182f, #092445 55%, #0b345e);
}

.cc-story::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  opacity: 0.35;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.cc-story::after {
  position: absolute;
  inset: auto -18vw -22vw auto;
  z-index: -1;
  width: 52vw;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  box-shadow:
    0 0 0 7vw rgb(255 255 255 / 2.5%),
    0 0 0 14vw rgb(255 255 255 / 2%);
}

.cc-story__sticky {
  display: grid;
  min-height: 100svh;
  align-items: center;
  padding-block: clamp(5rem, 9vw, 9rem);
}

.cc-story__inner {
  display: grid;
  width: min(100% - 2rem, 1320px);
  margin-inline: auto;
  grid-template-columns: minmax(0, 0.86fr) minmax(32rem, 1.14fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}

.cc-story__copy {
  position: relative;
  z-index: 20;
  max-width: 40rem;
}

.cc-story__eyebrow {
  margin: 0 0 1rem;
  color: #9ed9ff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cc-story h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.cc-story__benefits {
  display: grid;
  gap: 0.8rem;
  margin: clamp(2rem, 4vw, 3.4rem) 0 0;
  padding: 0;
  list-style: none;
}

.cc-story__benefits li {
  display: grid;
  grid-template-columns: 1.45rem 1fr;
  gap: 0.75rem;
  align-items: start;
  color: rgb(255 255 255 / 84%);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.45;
}

.cc-story__benefits li::before {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.08em;
  place-items: center;
  content: "✓";
  color: #06182f;
  border-radius: 50%;
  background: #8ed5ff;
  font-size: 0.78rem;
  font-weight: 900;
}

.cc-story__visual {
  position: relative;
  min-height: clamp(31rem, 49vw, 43rem);
  perspective: 1200px;
}

.cc-story__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78%, 35rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0.76;
  background: radial-gradient(circle, rgb(71 182 255 / 34%), rgb(29 116 176 / 8%) 47%, transparent 70%);
  filter: blur(3px);
}

.cc-card {
  position: absolute;
  top: 49%;
  left: 50%;
  width: clamp(15.5rem, 27vw, 23rem);
  margin: 0;
  transform-origin: 50% 82%;
  filter: drop-shadow(0 1.5rem 1.6rem rgb(0 8 23 / 28%));
  will-change: transform, filter;
}

.cc-card img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.cc-card figcaption {
  position: absolute;
  inset: auto 8% -2.15rem;
  color: rgb(255 255 255 / 73%);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}

.cc-card--1 {
  z-index: 1;
  transform: translate(calc(-50% - 11.6rem), calc(-50% + 3.9rem)) rotate(-13deg) scale(0.84);
}

.cc-card--2 {
  z-index: 2;
  transform: translate(calc(-50% - 7rem), calc(-50% + 0.2rem)) rotate(-7deg) scale(0.92);
}

.cc-card--3 {
  z-index: 5;
  transform: translate(-50%, calc(-50% - 2rem)) rotate(0deg) scale(1.02);
}

.cc-card--4 {
  z-index: 4;
  transform: translate(calc(-50% + 7rem), calc(-50% + 0.2rem)) rotate(7deg) scale(0.92);
}

.cc-card--5 {
  z-index: 3;
  transform: translate(calc(-50% + 11.6rem), calc(-50% + 3.9rem)) rotate(13deg) scale(0.84);
}

.cc-story__hint {
  right: 0;
  bottom: 0;
  color: rgb(255 255 255 / 62%);
}

@supports (animation-timeline: view()) {
  .cc-story {
    min-height: 300svh;
    view-timeline-name: --cc-story-timeline;
    view-timeline-axis: block;
  }

  .cc-story__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding-block: clamp(2rem, 5vh, 4.5rem);
  }

  .cc-story__copy {
    animation: cc-copy 1s linear both;
    animation-timeline: --cc-story-timeline;
    animation-range: contain 5% contain 88%;
  }

  .cc-story__halo {
    animation: cc-halo 1s linear both;
    animation-timeline: --cc-story-timeline;
    animation-range: contain 3% contain 82%;
  }

  .cc-card {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
    filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%));
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --cc-story-timeline;
  }

  .cc-card--1 {
    animation-name: cc-fan-card-1;
    animation-range: contain 10% contain 62%;
  }

  .cc-card--2 {
    animation-name: cc-fan-card-2;
    animation-range: contain 14% contain 66%;
  }

  .cc-card--3 {
    animation-name: cc-fan-card-3;
    animation-range: contain 18% contain 70%;
  }

  .cc-card--4 {
    animation-name: cc-fan-card-4;
    animation-range: contain 22% contain 74%;
  }

  .cc-card--5 {
    animation-name: cc-fan-card-5;
    animation-range: contain 26% contain 78%;
  }

  .cc-card figcaption {
    animation: cc-caption 1s linear both;
    animation-timeline: --cc-story-timeline;
    animation-range: contain 62% contain 84%;
  }

  .cc-story__hint {
    animation: fade-scroll-hint 1s linear both;
    animation-timeline: --cc-story-timeline;
    animation-range: contain 4% contain 35%;
  }
}

@keyframes cc-fan-card-1 {
  0%, 18% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
    filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%));
  }
  72% {
    transform: translate(calc(-50% - 11.6rem), calc(-50% + 3.2rem)) rotate(-13deg) scale(0.858);
    filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%));
  }
  100% {
    transform: translate(calc(-50% - 11.6rem), calc(-50% + 3.9rem)) rotate(-13deg) scale(0.84);
    filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%));
  }
}

@keyframes cc-fan-card-2 {
  0%, 18% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
    filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%));
  }
  72% {
    transform: translate(calc(-50% - 7rem), calc(-50% - 0.5rem)) rotate(-7deg) scale(0.938);
    filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%));
  }
  100% {
    transform: translate(calc(-50% - 7rem), calc(-50% + 0.2rem)) rotate(-7deg) scale(0.92);
    filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%));
  }
}

@keyframes cc-fan-card-3 {
  0%, 18% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
    filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%));
  }
  72% {
    transform: translate(-50%, calc(-50% - 2.7rem)) rotate(0deg) scale(1.038);
    filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%));
  }
  100% {
    transform: translate(-50%, calc(-50% - 2rem)) rotate(0deg) scale(1.02);
    filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%));
  }
}

@keyframes cc-fan-card-4 {
  0%, 18% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
    filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%));
  }
  72% {
    transform: translate(calc(-50% + 7rem), calc(-50% - 0.5rem)) rotate(7deg) scale(0.938);
    filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%));
  }
  100% {
    transform: translate(calc(-50% + 7rem), calc(-50% + 0.2rem)) rotate(7deg) scale(0.92);
    filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%));
  }
}

@keyframes cc-fan-card-5 {
  0%, 18% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
    filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%));
  }
  72% {
    transform: translate(calc(-50% + 11.6rem), calc(-50% + 3.2rem)) rotate(13deg) scale(0.858);
    filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%));
  }
  100% {
    transform: translate(calc(-50% + 11.6rem), calc(-50% + 3.9rem)) rotate(13deg) scale(0.84);
    filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%));
  }
}

@keyframes cc-copy {
  0% { transform: translateY(1.2rem); opacity: 0.92; }
  24%, 76% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-0.55rem); opacity: 0.94; }
}

@keyframes cc-halo {
  0% { transform: scale(0.72); opacity: 0.2; }
  55% { transform: scale(1.08); opacity: 0.95; }
  100% { transform: scale(1); opacity: 0.72; }
}

@keyframes cc-caption {
  from { transform: translateY(0.65rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fade-scroll-hint {
  0%, 60% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0.6rem); opacity: 0; }
}

/* =============================================================
   2. KONTAKTLOS ZAHLEN
   ============================================================= */
.ct-story {
  position: relative;
  overflow: clip;
  color: #10243b;
  background:
    radial-gradient(circle at 26% 48%, rgb(94 180 231 / 20%), transparent 27%),
    #eef7fd;
  isolation: isolate;
}

.ct-story::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  opacity: 0.42;
  background-image: radial-gradient(circle, rgb(0 92 169 / 18%) 1px, transparent 1.4px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, #000, transparent 65%);
}

.ct-story__sticky {
  display: grid;
  min-height: 100svh;
  align-items: center;
  padding-block: clamp(4rem, 8vw, 8rem);
}

.ct-story__inner {
  display: grid;
  width: min(100% - 2rem, 1320px);
  margin-inline: auto;
  grid-template-columns: minmax(30rem, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}

.ct-story__visual {
  position: relative;
  min-height: clamp(34rem, 50vw, 46rem);
  perspective: 1300px;
  transform-style: flat;
  isolation: isolate;
}

.ct-story__ambient {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(8px);
}

.ct-story__ambient--one {
  top: 13%;
  left: 17%;
  width: 65%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(65 175 235 / 26%), transparent 68%);
}

.ct-story__ambient--two {
  right: 3%;
  bottom: 8%;
  width: 34%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(87 192 127 / 20%), transparent 70%);
}

.ct-terminal {
  position: absolute;
  top: 8%;
  left: 55%;
  z-index: 5;
  width: clamp(15rem, 22vw, 20rem);
  padding: 1.1rem;
  translate: -50% 0;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 2.3rem;
  background: linear-gradient(145deg, #fafdff, #c7dce9);
  box-shadow:
    0 2rem 3.4rem rgb(20 75 111 / 18%),
    inset 0 1px 0 #fff,
    inset 0 -1rem 2rem rgb(70 120 150 / 10%);
}

.ct-terminal::after {
  position: absolute;
  inset: auto 14% -1.25rem;
  height: 2rem;
  content: "";
  border-radius: 50%;
  background: rgb(19 62 90 / 22%);
  filter: blur(1rem);
}

.ct-terminal__top {
  position: relative;
  padding: 0.55rem;
  border-radius: 1.7rem;
  background: linear-gradient(160deg, #0a2b4a, #071a30);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}

.ct-terminal__screen {
  position: relative;
  overflow: hidden;
  min-height: clamp(10.5rem, 16vw, 14rem);
  border: 1px solid rgb(59 157 211 / 45%);
  border-radius: 1.25rem;
  background:
    linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),
    #071e37;
  background-size: 100% 4px;
  box-shadow: inset 0 0 2.4rem rgb(17 120 184 / 18%);
}

.ct-terminal__screen-shine {
  position: absolute;
  inset: -30% 48% -30% -20%;
  transform: skewX(-13deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 13%), transparent);
}

.ct-screen-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #e8f8ff;
  text-align: center;
}

.ct-screen-state__label,
.ct-screen-state__subline {
  color: #a8c8d9;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ct-screen-state strong {
  margin-block: 0.35rem;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  line-height: 1;
}

.ct-screen-state--success {
  opacity: 0;
  transform: scale(0.82);
}

.ct-screen-state__check {
  display: grid;
  width: 4.3rem;
  aspect-ratio: 1;
  margin-bottom: 0.5rem;
  place-items: center;
  color: #062a28;
  border-radius: 50%;
  background: #62d58a;
  font-size: 2.6rem;
  font-weight: 900;
  box-shadow: 0 0 0 0.8rem rgb(98 213 138 / 13%);
}

.ct-terminal__contactless {
  position: absolute;
  right: 1.1rem;
  bottom: 0.9rem;
  display: flex;
  gap: 0.15rem;
  align-items: center;
  rotate: -32deg;
}

.ct-terminal__contactless span {
  display: block;
  width: 0.55rem;
  height: 1.4rem;
  border: 2px solid #8ad6ff;
  border-left: 0;
  border-radius: 0 100% 100% 0;
}

.ct-terminal__keypad {
  display: grid;
  padding: 1rem 0.3rem 0.2rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.ct-terminal__keypad span {
  height: 1.7rem;
  border: 1px solid rgb(111 151 177 / 18%);
  border-radius: 0.55rem;
  background: linear-gradient(#fff, #dceaf2);
  box-shadow: 0 0.25rem 0.35rem rgb(35 81 108 / 12%);
}

.ct-terminal__keypad .ct-terminal__key--cancel { background: linear-gradient(#ff9898, #e85b5b); }
.ct-terminal__keypad .ct-terminal__key--clear { background: linear-gradient(#ffe798, #efc64c); }
.ct-terminal__keypad .ct-terminal__key--confirm { background: linear-gradient(#99efad, #4fc476); }

.ct-pay-card {
  position: absolute;
  top: 57%;
  left: 9%;
  z-index: 12;
  width: clamp(18rem, 33vw, 29rem);
  margin: 0;
  transform: rotate(-8deg);
  transform-origin: 70% 45%;
  filter: drop-shadow(0 2rem 2rem rgb(20 48 65 / 25%));
  will-change: transform, filter;
}

.ct-pay-card img {
  display: block;
  width: 100%;
  height: auto;
}

.ct-pay-card__shine {
  position: absolute;
  inset: 6% 8%;
  overflow: hidden;
  border-radius: 1.2rem;
  pointer-events: none;
}

.ct-pay-card__shine::after {
  position: absolute;
  inset: -40% 65% -40% -30%;
  content: "";
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 48%), transparent);
}

.ct-signal {
  position: absolute;
  top: 42%;
  left: 42%;
  z-index: 14;
  display: flex;
  gap: 0.2rem;
  rotate: -35deg;
  opacity: 0;
}

.ct-signal span {
  width: 0.9rem;
  height: 2.3rem;
  border: 3px solid #0c79bd;
  border-left: 0;
  border-radius: 0 100% 100% 0;
}

.ct-success-burst {
  position: absolute;
  top: 24%;
  left: 55%;
  z-index: 15;
  width: 8rem;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
}

.ct-success-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.4rem;
  height: 2.2rem;
  transform-origin: 50% 3.8rem;
  border-radius: 1rem;
  background: #50c97b;
}

.ct-success-burst i:nth-child(1) { rotate: 0deg; }
.ct-success-burst i:nth-child(2) { rotate: 60deg; }
.ct-success-burst i:nth-child(3) { rotate: 120deg; }
.ct-success-burst i:nth-child(4) { rotate: 180deg; }
.ct-success-burst i:nth-child(5) { rotate: 240deg; }
.ct-success-burst i:nth-child(6) { rotate: 300deg; }

.ct-story__hint {
  left: 0;
  bottom: 1rem;
  color: rgb(21 68 101 / 62%);
}

.ct-story__copy {
  position: relative;
  z-index: 20;
  max-width: 41rem;
}

.ct-story__eyebrow {
  margin: 0 0 1.2rem;
  color: #005ca9;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.ct-story h2 {
  margin: 0;
  color: #081d39;
  font-size: clamp(2.7rem, 5.3vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.ct-story__lead {
  max-width: 40rem;
  margin: clamp(1.6rem, 3vw, 2.7rem) 0 0;
  color: #46647c;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.6;
}

.ct-story__benefits {
  display: grid;
  gap: 0.85rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.ct-story__benefits li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.7rem;
  align-items: start;
  color: #254965;
  font-size: clamp(0.98rem, 1.18vw, 1.12rem);
  line-height: 1.45;
}

.ct-story__benefits li::before {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  content: "✓";
  color: #fff;
  border-radius: 50%;
  background: #005ca9;
  font-size: 0.76rem;
  font-weight: 900;
}

@supports (animation-timeline: view()) {
  .ct-story {
    min-height: 220svh;
    view-timeline-name: --ct-story-timeline;
    view-timeline-axis: block;
  }

  .ct-story__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding-block: clamp(2rem, 5vh, 4rem);
  }

  .ct-pay-card {
    animation: ct-card-tap 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 6% contain 68%;
  }

  .ct-pay-card__shine::after {
    animation: ct-card-shine 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 14% contain 56%;
  }

  .ct-signal {
    animation: ct-signal 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 25% contain 57%;
  }

  .ct-screen-state--idle {
    animation: ct-idle-out 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 28% contain 52%;
  }

  .ct-screen-state--success {
    animation: ct-success-in 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 34% contain 64%;
  }

  .ct-terminal {
    animation: ct-terminal-confirm 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 30% contain 70%;
  }

  .ct-success-burst {
    animation: ct-burst 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 40% contain 63%;
  }

  .ct-story__copy {
    animation: ct-copy 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 6% contain 84%;
  }

  .ct-story__hint {
    animation: fade-scroll-hint 1s linear both;
    animation-timeline: --ct-story-timeline;
    animation-range: contain 4% contain 28%;
  }
}

@keyframes ct-card-tap {
  0%, 12% {
    transform: translate3d(-3%, 7%, 0) rotate(-8deg) scale(1);
    filter: drop-shadow(0 2rem 2rem rgb(20 48 65 / 25%));
  }
  66% {
    transform: translate3d(29%, -37%, 0) rotate(-2deg) scale(0.83);
    filter: drop-shadow(0 1.2rem 1.4rem rgb(20 48 65 / 35%));
  }
  78% {
    transform: translate3d(27%, -35%, 0) rotate(-2.5deg) scale(0.84);
  }
  100% {
    transform: translate3d(24%, -32%, 0) rotate(-3deg) scale(0.86);
    filter: drop-shadow(0 1.55rem 1.6rem rgb(20 48 65 / 30%));
  }
}

@keyframes ct-card-shine {
  0%, 24% { transform: translateX(-25%); opacity: 0; }
  48% { opacity: 1; }
  100% { transform: translateX(340%); opacity: 0; }
}

@keyframes ct-signal {
  0%, 15% { transform: scale(0.75); opacity: 0; }
  35%, 78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes ct-idle-out {
  0%, 35% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-1rem); opacity: 0; }
}

@keyframes ct-success-in {
  0%, 18% { transform: scale(0.78); opacity: 0; }
  58% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ct-terminal-confirm {
  0%, 55% { transform: translateX(-50%) scale(1); }
  67% { transform: translateX(-50%) scale(1.025); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes ct-burst {
  0%, 20% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  48% { transform: scale(1) rotate(0); opacity: 0.9; }
  100% { transform: scale(1.3) rotate(10deg); opacity: 0; }
}

@keyframes ct-copy {
  0% { transform: translateY(1.2rem); opacity: 0.9; }
  25%, 78% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-0.5rem); opacity: 0.96; }
}

/* =============================================================
   3. VIER VORTEILE IM ALLTAG
   ============================================================= */
.af-story {
  position: relative;
  overflow: clip;
  color: #10162a;
  background: #fff;
}

.af-story__intro {
  display: grid;
  width: min(100% - 2rem, 1040px);
  min-height: 62svh;
  margin-inline: auto;
  place-content: center;
  padding-block: clamp(5rem, 10vw, 10rem);
  text-align: center;
}

.af-story__eyebrow {
  margin: 0 0 1rem;
  color: #005ca9;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.af-story__intro h2 {
  margin: 0;
  color: #07162b;
  font-size: clamp(3rem, 6.5vw, 7.2rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.af-story__intro > p:last-child {
  max-width: 49rem;
  margin: 1.7rem auto 0;
  color: #566274;
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  line-height: 1.55;
  text-wrap: balance;
}

.af-story__track {
  position: relative;
  background:
    radial-gradient(circle at 28% 46%, rgb(52 152 210 / 8%), transparent 30%),
    linear-gradient(#fff, #f8fbfd 45%, #fff);
}

.af-story__sticky {
  display: grid;
  min-height: 100svh;
  align-items: center;
  padding-block: clamp(4rem, 7vw, 7rem);
}

.af-story__inner {
  display: grid;
  width: min(100% - 2rem, 1280px);
  margin-inline: auto;
  grid-template-columns: minmax(26rem, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.af-story__visual {
  position: relative;
  min-height: min(76svh, 47rem);
  perspective: 1100px;
  isolation: isolate;
}

.af-story__visual::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 83%;
  aspect-ratio: 1;
  translate: -50% -49%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgb(0 92 169 / 11%), transparent 70%);
  filter: blur(15px);
}

.af-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(76%, 25.5rem);
  aspect-ratio: 941 / 1672;
  margin: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transform-origin: 50% 92%;
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  background: #eaf2f7;
  box-shadow: 0 2rem 4rem rgb(10 39 65 / 19%);
  will-change: transform, opacity;
  contain: layout paint;
  backface-visibility: hidden;
}

.af-card--1 { z-index: 1; }
.af-card--2 { z-index: 2; transform: translate(-50%, 10%) scale(0.975); }
.af-card--3 { z-index: 3; transform: translate(-50%, 16%) scale(0.95); }
.af-card--4 { z-index: 4; transform: translate(-50%, 22%) scale(0.925); }

.af-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  user-select: none;
  -webkit-user-drag: none;
}

.af-story__hint {
  left: 50%;
  bottom: -0.5rem;
  translate: -50% 0;
  color: rgb(26 66 94 / 55%);
  white-space: nowrap;
}

.af-story__copy {
  position: relative;
  min-height: 38rem;
}

.af-steps {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-step {
  display: block;
  color: #9da3ae;
  opacity: 0.38;
  transform: translateX(0);
  transform-origin: left center;
}

.af-step strong {
  font-size: clamp(2rem, 3.6vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.052em;
}

.af-step--1 {
  color: #07162b;
  opacity: 1;
}

.af-details {
  position: relative;
  min-height: 12rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}

.af-detail {
  position: absolute;
  inset: 0;
  max-width: 40rem;
  opacity: 0;
  transform: translateY(1rem);
}

.af-detail--1 {
  opacity: 1;
  transform: translateY(0);
}

.af-detail h3 {
  margin: 0;
  color: #07162b;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.af-detail p {
  margin: 1rem 0 0;
  color: #556375;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.58;
}

@supports (animation-timeline: view()) {
  .af-story__track {
    min-height: 350svh;
    view-timeline-name: --af-story-timeline;
    view-timeline-axis: block;
  }

  .af-story__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding-block: clamp(2rem, 4vh, 3.5rem);
  }

  .af-card {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --af-story-timeline;
    animation-range: contain 1% contain 98%;
  }

  .af-card--1 { animation-name: af-card-one; }
  .af-card--2 { animation-name: af-card-two; }
  .af-card--3 { animation-name: af-card-three; }
  .af-card--4 { animation-name: af-card-four; }

  .af-step,
  .af-detail {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --af-story-timeline;
    animation-range: contain 1% contain 98%;
  }

  .af-step--1 { animation-name: af-step-one; }
  .af-step--2 { animation-name: af-step-two; }
  .af-step--3 { animation-name: af-step-three; }
  .af-step--4 { animation-name: af-step-four; }

  .af-detail--1 { animation-name: af-detail-one; }
  .af-detail--2 { animation-name: af-detail-two; }
  .af-detail--3 { animation-name: af-detail-three; }
  .af-detail--4 { animation-name: af-detail-four; }

  .af-story__hint {
    animation: fade-scroll-hint 1s linear both;
    animation-timeline: --af-story-timeline;
    animation-range: contain 1% contain 17%;
  }
}

@keyframes af-card-one {
  0%, 22% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  29% {
    transform: translate3d(-50%, calc(-50% - 0.38rem), 0) scale(0.988);
    opacity: 0.97;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  37%, 100% {
    transform: translate3d(-50%, calc(-50% - 1.15rem), 0) scale(0.964);
    opacity: 0.88;
  }
}

@keyframes af-card-two {
  0%, 12% {
    transform: translate3d(-50%, 86%, 0) scale(0.982);
    opacity: 0.58;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  19% {
    transform: translate3d(-50%, 62%, 0) scale(0.988);
    opacity: 0.76;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  26% {
    transform: translate3d(-50%, 16%, 0) scale(0.996);
    opacity: 0.94;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  33% {
    transform: translate3d(-50%, -47.5%, 0) scale(1.002);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  37%, 47% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  54% {
    transform: translate3d(-50%, calc(-50% - 0.32rem), 0) scale(0.989);
    opacity: 0.97;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  62%, 100% {
    transform: translate3d(-50%, calc(-50% - 0.95rem), 0) scale(0.97);
    opacity: 0.89;
  }
}

@keyframes af-card-three {
  0%, 37% {
    transform: translate3d(-50%, 86%, 0) scale(0.982);
    opacity: 0.58;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  44% {
    transform: translate3d(-50%, 62%, 0) scale(0.988);
    opacity: 0.76;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  51% {
    transform: translate3d(-50%, 16%, 0) scale(0.996);
    opacity: 0.94;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  58% {
    transform: translate3d(-50%, -47.5%, 0) scale(1.002);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  62%, 72% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  79% {
    transform: translate3d(-50%, calc(-50% - 0.26rem), 0) scale(0.991);
    opacity: 0.97;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  87%, 100% {
    transform: translate3d(-50%, calc(-50% - 0.72rem), 0) scale(0.978);
    opacity: 0.9;
  }
}

@keyframes af-card-four {
  0%, 62% {
    transform: translate3d(-50%, 86%, 0) scale(0.982);
    opacity: 0.58;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  69% {
    transform: translate3d(-50%, 62%, 0) scale(0.988);
    opacity: 0.76;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  76% {
    transform: translate3d(-50%, 16%, 0) scale(0.996);
    opacity: 0.94;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  83% {
    transform: translate3d(-50%, -47.5%, 0) scale(1.002);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  87%, 100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
  }
}

@keyframes af-step-one {
  0%, 24% { color: #07162b; opacity: 1; transform: translateX(0); }
  37%, 100% { color: #9da3ae; opacity: 0.35; transform: translateX(0); }
}

@keyframes af-step-two {
  0%, 25% { color: #9da3ae; opacity: 0.35; transform: translateX(0); }
  37%, 49% { color: #07162b; opacity: 1; transform: translateX(0.4rem); }
  62%, 100% { color: #9da3ae; opacity: 0.35; transform: translateX(0); }
}

@keyframes af-step-three {
  0%, 50% { color: #9da3ae; opacity: 0.35; transform: translateX(0); }
  62%, 74% { color: #07162b; opacity: 1; transform: translateX(0.4rem); }
  87%, 100% { color: #9da3ae; opacity: 0.35; transform: translateX(0); }
}

@keyframes af-step-four {
  0%, 75% { color: #9da3ae; opacity: 0.35; transform: translateX(0); }
  87%, 100% { color: #07162b; opacity: 1; transform: translateX(0.4rem); }
}

@keyframes af-detail-one {
  0%, 23% { opacity: 1; transform: translateY(0); }
  36%, 100% { opacity: 0; transform: translateY(-0.55rem); }
}

@keyframes af-detail-two {
  0%, 26% { opacity: 0; transform: translateY(0.65rem); }
  38%, 48% { opacity: 1; transform: translateY(0); }
  61%, 100% { opacity: 0; transform: translateY(-0.55rem); }
}

@keyframes af-detail-three {
  0%, 51% { opacity: 0; transform: translateY(0.65rem); }
  63%, 73% { opacity: 1; transform: translateY(0); }
  86%, 100% { opacity: 0; transform: translateY(-0.55rem); }
}

@keyframes af-detail-four {
  0%, 76% { opacity: 0; transform: translateY(0.65rem); }
  88%, 100% { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1050px) {
  .cc-story__inner {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .cc-story__copy {
    max-width: 55rem;
  }

  .cc-story h2 {
    max-width: 18ch;
  }

  .cc-story__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-story__visual {
    min-height: clamp(26rem, 62vw, 38rem);
  }

  .cc-card {
    width: clamp(14rem, 34vw, 21rem);
  }

  .cc-card--1 {
    transform: translate(calc(-50% - 11.5rem), calc(-50% + 3.3rem)) rotate(-13deg) scale(0.84);
  }

  .cc-card--2 {
    transform: translate(calc(-50% - 6rem), calc(-50% + 0.4rem)) rotate(-7deg) scale(0.92);
  }

  .cc-card--4 {
    transform: translate(calc(-50% + 6rem), calc(-50% + 0.4rem)) rotate(7deg) scale(0.92);
  }

  .cc-card--5 {
    transform: translate(calc(-50% + 11.5rem), calc(-50% + 3.3rem)) rotate(13deg) scale(0.84);
  }

  @keyframes cc-fan-card-1 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(calc(-50% - 11.5rem), calc(-50% + 2.6rem)) rotate(-13deg) scale(0.858); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(calc(-50% - 11.5rem), calc(-50% + 3.3rem)) rotate(-13deg) scale(0.84); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  @keyframes cc-fan-card-2 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(calc(-50% - 6rem), calc(-50% - 0.3rem)) rotate(-7deg) scale(0.938); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(calc(-50% - 6rem), calc(-50% + 0.4rem)) rotate(-7deg) scale(0.92); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  @keyframes cc-fan-card-4 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(calc(-50% + 6rem), calc(-50% - 0.3rem)) rotate(7deg) scale(0.938); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(calc(-50% + 6rem), calc(-50% + 0.4rem)) rotate(7deg) scale(0.92); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  @keyframes cc-fan-card-5 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(calc(-50% + 11.5rem), calc(-50% + 2.6rem)) rotate(13deg) scale(0.858); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(calc(-50% + 11.5rem), calc(-50% + 3.3rem)) rotate(13deg) scale(0.84); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  .ct-story__inner {
    grid-template-columns: minmax(24rem, 0.9fr) minmax(0, 1.1fr);
    gap: 2.5rem;
  }

  .ct-story h2 {
    font-size: clamp(2.6rem, 6vw, 4.8rem);
  }

  .af-story__inner {
    grid-template-columns: minmax(22rem, 0.9fr) minmax(0, 1.1fr);
    gap: 3rem;
  }

  .af-step strong {
    font-size: clamp(1.8rem, 4vw, 3.4rem);
  }
}

@media (max-width: 760px) {
  .cc-story__sticky {
    align-items: start;
    padding-block: 3.5rem 2rem;
  }

  .cc-story__inner {
    width: min(100% - 1.25rem, 42rem);
  }

  .cc-story h2 {
    max-width: none;
    font-size: clamp(2rem, 10.8vw, 3.6rem);
  }

  .cc-story__benefits {
    gap: 0.5rem;
    margin-top: 1.35rem;
    grid-template-columns: 1fr;
  }

  .cc-story__benefits li {
    font-size: 0.92rem;
    line-height: 1.32;
  }

  .cc-story__visual {
    min-height: 25rem;
  }

  .cc-card {
    top: 48%;
    width: min(66vw, 17.5rem);
  }

  .cc-card--1 {
    transform: translate(calc(-50% - 6.4rem), calc(-50% + 3.2rem)) rotate(-14deg) scale(0.76);
  }

  .cc-card--2 {
    transform: translate(calc(-50% - 3.4rem), calc(-50% + 0.8rem)) rotate(-7deg) scale(0.86);
  }

  .cc-card--3 {
    transform: translate(-50%, calc(-50% - 1rem)) rotate(0deg) scale(0.97);
  }

  .cc-card--4 {
    transform: translate(calc(-50% + 3.4rem), calc(-50% + 0.8rem)) rotate(7deg) scale(0.86);
  }

  .cc-card--5 {
    transform: translate(calc(-50% + 6.4rem), calc(-50% + 3.2rem)) rotate(14deg) scale(0.76);
  }

  @keyframes cc-fan-card-1 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(calc(-50% - 6.4rem), calc(-50% + 2.5rem)) rotate(-14deg) scale(0.778); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(calc(-50% - 6.4rem), calc(-50% + 3.2rem)) rotate(-14deg) scale(0.76); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  @keyframes cc-fan-card-2 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(calc(-50% - 3.4rem), calc(-50% + 0.1rem)) rotate(-7deg) scale(0.878); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(calc(-50% - 3.4rem), calc(-50% + 0.8rem)) rotate(-7deg) scale(0.86); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  @keyframes cc-fan-card-3 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(-50%, calc(-50% - 1.7rem)) rotate(0deg) scale(0.988); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(-50%, calc(-50% - 1rem)) rotate(0deg) scale(0.97); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  @keyframes cc-fan-card-4 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(calc(-50% + 3.4rem), calc(-50% + 0.1rem)) rotate(7deg) scale(0.878); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(calc(-50% + 3.4rem), calc(-50% + 0.8rem)) rotate(7deg) scale(0.86); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  @keyframes cc-fan-card-5 {
    0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); filter: drop-shadow(0 1rem 1.1rem rgb(0 8 23 / 22%)); }
    72% { transform: translate(calc(-50% + 6.4rem), calc(-50% + 2.5rem)) rotate(14deg) scale(0.778); filter: drop-shadow(0 2rem 2rem rgb(0 8 23 / 42%)); }
    100% { transform: translate(calc(-50% + 6.4rem), calc(-50% + 3.2rem)) rotate(14deg) scale(0.76); filter: drop-shadow(0 1.55rem 1.7rem rgb(0 8 23 / 34%)); }
  }

  .cc-card figcaption,
  .cc-story__hint {
    display: none;
  }

  .ct-story__sticky {
    align-items: start;
    padding-block: 2.7rem 2rem;
  }

  .ct-story__inner {
    display: flex;
    width: min(100% - 1.25rem, 42rem);
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

  .ct-story__copy {
    max-width: none;
  }

  .ct-story h2 {
    font-size: clamp(2.35rem, 10vw, 4rem);
  }

  .ct-story__lead {
    margin-top: 1.1rem;
    font-size: 0.98rem;
    line-height: 1.45;
  }

  .ct-story__benefits {
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .ct-story__benefits li {
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .ct-story__visual {
    width: 100%;
    min-height: min(51svh, 27rem);
  }

  .ct-terminal {
    top: 2%;
    left: 61%;
    width: min(43vw, 12.8rem);
    padding: 0.65rem;
    border-radius: 1.5rem;
  }

  .ct-terminal__screen {
    min-height: 7.3rem;
  }

  .ct-screen-state strong {
    font-size: 1.45rem;
  }

  .ct-screen-state__check {
    width: 2.8rem;
    font-size: 1.6rem;
  }

  .ct-terminal__keypad {
    gap: 0.35rem;
    padding-top: 0.6rem;
  }

  .ct-terminal__keypad span {
    height: 1rem;
  }

  .ct-pay-card {
    top: 48%;
    left: 1%;
    width: min(67vw, 19rem);
  }

  .ct-story__hint {
    display: none;
  }

  .af-story__intro {
    min-height: 52svh;
    padding-block: 5rem;
  }

  .af-story__intro h2 {
    font-size: clamp(2.7rem, 13vw, 4.6rem);
  }

  .af-story__sticky {
    align-items: start;
    padding-block: 2.2rem 1.5rem;
  }

  .af-story__inner {
    display: grid;
    width: min(100% - 1.25rem, 42rem);
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(18rem, 55svh) auto;
    gap: 1.4rem;
  }

  .af-story__visual {
    min-height: 0;
  }

  .af-card {
    width: min(67vw, 18.5rem);
  }

  .af-story__hint {
    display: none;
  }

  .af-story__copy {
    min-height: 18rem;
  }

  .af-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1rem;
  }

  .af-step strong {
    font-size: clamp(1.25rem, 5.5vw, 1.8rem);
    line-height: 1.05;
  }

  .af-details {
    min-height: 8rem;
    margin-top: 1.25rem;
  }

  .af-detail h3 {
    font-size: 1.15rem;
  }

  .af-detail p {
    margin-top: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  @supports (animation-timeline: view()) {
    .cc-story { min-height: 340svh; }
    .ct-story { min-height: 235svh; }
    .af-story__track { min-height: 380svh; }
  }
}

/* =============================================================
   REDUZIERTE BEWEGUNG
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cc-story,
  .ct-story,
  .af-story__track,
  .cc-story__sticky,
  .ct-story__sticky,
  .af-story__sticky {
    min-height: auto !important;
    height: auto !important;
  }

  .cc-story__sticky,
  .ct-story__sticky,
  .af-story__sticky {
    position: relative !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .cc-card,
  .cc-story__copy,
  .cc-story__halo,
  .cc-card figcaption,
  .scroll-hint,
  .ct-pay-card,
  .ct-pay-card__shine::after,
  .ct-signal,
  .ct-screen-state,
  .ct-terminal,
  .ct-success-burst,
  .ct-story__copy,
  .af-card,
  .af-step,
  .af-detail {
    animation: none !important;
  }

  .cc-card--1 {
    transform: translate(calc(-50% - 11.6rem), calc(-50% + 3.9rem)) rotate(-13deg) scale(0.84) !important;
  }

  .cc-card--2 {
    transform: translate(calc(-50% - 7rem), calc(-50% + 0.2rem)) rotate(-7deg) scale(0.92) !important;
  }

  .cc-card--3 {
    transform: translate(-50%, calc(-50% - 2rem)) rotate(0deg) scale(1.02) !important;
  }

  .cc-card--4 {
    transform: translate(calc(-50% + 7rem), calc(-50% + 0.2rem)) rotate(7deg) scale(0.92) !important;
  }

  .cc-card--5 {
    transform: translate(calc(-50% + 11.6rem), calc(-50% + 3.9rem)) rotate(13deg) scale(0.84) !important;
  }

  .ct-pay-card {
    transform: translate3d(24%, -32%, 0) rotate(-3deg) scale(0.86) !important;
  }

  .ct-screen-state--idle {
    opacity: 0;
  }

  .ct-screen-state--success {
    opacity: 1;
    transform: scale(1);
  }

  .af-story__inner {
    align-items: start;
  }

  .af-story__visual {
    display: grid;
    min-height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .af-card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    transform: none !important;
    filter: none !important;
  }

  .af-story__copy {
    min-height: auto;
  }

  .af-step {
    color: #07162b;
    opacity: 1;
    transform: none !important;
  }

  .af-details {
    display: grid;
    min-height: auto;
    gap: 1.5rem;
  }

  .af-detail {
    position: relative;
    opacity: 1;
    transform: none !important;
  }
}


@media (prefers-reduced-motion: reduce) and (max-width: 1050px) {
  .cc-card--1 { transform: translate(calc(-50% - 11.5rem), calc(-50% + 3.3rem)) rotate(-13deg) scale(0.84) !important; }
  .cc-card--2 { transform: translate(calc(-50% - 6rem), calc(-50% + 0.4rem)) rotate(-7deg) scale(0.92) !important; }
  .cc-card--4 { transform: translate(calc(-50% + 6rem), calc(-50% + 0.4rem)) rotate(7deg) scale(0.92) !important; }
  .cc-card--5 { transform: translate(calc(-50% + 11.5rem), calc(-50% + 3.3rem)) rotate(13deg) scale(0.84) !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .cc-card--1 { transform: translate(calc(-50% - 6.4rem), calc(-50% + 3.2rem)) rotate(-14deg) scale(0.76) !important; }
  .cc-card--2 { transform: translate(calc(-50% - 3.4rem), calc(-50% + 0.8rem)) rotate(-7deg) scale(0.86) !important; }
  .cc-card--3 { transform: translate(-50%, calc(-50% - 1rem)) rotate(0deg) scale(0.97) !important; }
  .cc-card--4 { transform: translate(calc(-50% + 3.4rem), calc(-50% + 0.8rem)) rotate(7deg) scale(0.86) !important; }
  .cc-card--5 { transform: translate(calc(-50% + 6.4rem), calc(-50% + 3.2rem)) rotate(14deg) scale(0.76) !important; }
}


/* =============================================================
   Animierte Zahlen
   ============================================================= */

.counter{
  display:grid;
  place-items: center;
  
}

.zahl_groß_cc{
  font-size: 56px;
  font-weight: 600;
  color: #002d67;
}

.kontext_cc{
padding-top: 20px;
  font-size: 24px;
  font-weight: 400;
    color: #555F61;
}

@property --kunden {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

@property --zahlungen {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

@keyframes countup {
  to {
    --kunden: 30;
    --zahlungen: 205;
  }
}

.count-kunden .count-up::after {
  counter-reset: count var(--kunden);
}

.count-zahlungen .count-up::after {
  counter-reset: count var(--zahlungen);
}


.count-up::after {
  content: counter(count);
  animation: countup 2s linear forwards;
}

@media (prefers-reduced-motion: reduce) {
  .count-up {
    animation: none;
  }

  .count-kunden .count-up::after {
    content: "30";
  }

  .count-zahlungen .count-up::after {
    content: "205";
  }
  }



/* =============================================================
   GoldCard Versicherungen
   ============================================================= */

.vblh-goldcard-insurance-story {
  position: relative;
  overflow: clip;
  color: #1d1d1f;
  background: #f4f5f7;
  isolation: isolate;
}

.vblh-goldcard-insurance-story,
.vblh-goldcard-insurance-story *,
.vblh-goldcard-insurance-story *::before,
.vblh-goldcard-insurance-story *::after {
  box-sizing: border-box;
}

.vblh-goldcard-insurance-story__sticky {
  display: grid;
  min-height: 100svh;
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.vblh-goldcard-insurance-story__inner {
  width: 100%;
  min-width: 0;
}

.vblh-goldcard-insurance-story__title {
  margin: 0;
  padding-inline: clamp(2rem, 4.3vw, 5rem);
  color: #1d1d1f;
  font-size: clamp(1.7rem, 2.15vw, 2.35rem);
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.vblh-goldcard-insurance-story__title sup {
  position: relative;
  top: -0.12em;
  margin-left: 0.06em;
  font-size: 0.55em;
  line-height: 0;
}

.vblh-goldcard-insurance-story__viewport {
  width: 100%;
  margin-top: clamp(3.25rem, 7vh, 6.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vblh-goldcard-insurance-story__viewport::-webkit-scrollbar {
  display: none;
}

.vblh-goldcard-insurance-story__track {
  display: flex;
  width: max-content;
  gap: clamp(1.25rem, 2.15vw, 2.5rem);
  padding: 0.75rem clamp(2rem, 4.3vw, 5rem) 2rem;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.vblh-goldcard-insurance-card {
  display: flex;
  flex: 0 0 clamp(20rem, 28vw, 26.75rem);
  min-height: clamp(31.5rem, 61svh, 36.5rem);
  flex-direction: column;
  margin: 0;
  padding: clamp(1.75rem, 2.3vw, 2.4rem);
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 3%);
  border-radius: 1.35rem;
  background: #ffffff;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 2%),
    0 0.7rem 2.3rem rgb(0 0 0 / 4%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vblh-goldcard-insurance-card__visual {
  display: grid;
  height: 9rem;
  margin-bottom: 0.65rem;
  place-items: center;
}

.vblh-goldcard-insurance-card__image {
  display: block;
  width: min(88%, 17.5rem);
  height: 8.75rem;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.vblh-goldcard-insurance-card__title {
  margin: 0.15rem 0 1.35rem;
  color: #1d1d1f;
  font-size: clamp(1.45rem, 1.8vw, 1.95rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.035em;
  text-align: center;
  text-wrap: balance;
}

.vblh-goldcard-insurance-card__text {
  margin: 0;
  color: #242426;
  font-size: clamp(1rem, 1.17vw, 1.22rem);
  line-height: 1.55;
  letter-spacing: -0.012em;
  hyphens: auto;
}

.vblh-goldcard-insurance-card__index {
  margin: auto 0 0;
  padding-top: 1.5rem;
  color: #9a9aa0;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

@media (hover: hover) and (pointer: fine) {
  .vblh-goldcard-insurance-card:hover {
    transform: translateY(-0.4rem);
    box-shadow:
      0 2px 2px rgb(0 0 0 / 2%),
      0 1.4rem 3.75rem rgb(0 0 0 / 7%);
  }
}

/* -------------------------------------------------------------
   Scroll-driven Animation
   Aufbau absichtlich wie bei der funktionierenden Kreditkarten-
   Komponente: Timeline + Sticky werden erst innerhalb @supports
   aktiviert. Ohne Support bleibt ein normales horizontales
   Karussell erhalten.
   ------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .vblh-goldcard-insurance-story {
    min-height: 290svh;
    view-timeline-name: --vblh-goldcard-insurance-timeline;
    view-timeline-axis: block;
  }

  .vblh-goldcard-insurance-story__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding-block: clamp(2.25rem, 5vh, 4rem);
  }

  .vblh-goldcard-insurance-story__viewport {
    overflow: hidden;
  }

  .vblh-goldcard-insurance-story__track {
    will-change: transform;
    animation: vblh-goldcard-insurance-pan 1s linear both;
    animation-timeline: --vblh-goldcard-insurance-timeline;
    animation-range: contain 5% contain 95%;
  }

  .vblh-goldcard-insurance-story__title {
    animation: vblh-goldcard-insurance-title-drift 1s linear both;
    animation-timeline: --vblh-goldcard-insurance-timeline;
    animation-range: contain 5% contain 95%;
  }
}

@keyframes vblh-goldcard-insurance-pan {
  0%, 8% {
    transform: translate3d(0, 0, 0);
  }

  92%, 100% {
    transform: translate3d(calc(100vw - 100%), 0, 0);
  }
}

@keyframes vblh-goldcard-insurance-title-drift {
  0% {
    transform: translateY(0.45rem);
    opacity: 0.9;
  }

  14%, 86% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-0.35rem);
    opacity: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vblh-goldcard-insurance-story {
    min-height: auto !important;
  }

  .vblh-goldcard-insurance-story__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .vblh-goldcard-insurance-story__viewport {
    overflow-x: auto !important;
  }

  .vblh-goldcard-insurance-story__track,
  .vblh-goldcard-insurance-story__title {
    animation: none !important;
    transform: none !important;
  }

  .vblh-goldcard-insurance-card {
    transition: none;
  }
}

@media (max-width: 760px) {
  .vblh-goldcard-insurance-story__sticky {
    padding-block: 2.25rem 3rem;
  }

  .vblh-goldcard-insurance-story__title {
    padding-inline: 1.25rem;
  }

  .vblh-goldcard-insurance-story__viewport {
    margin-top: 3rem;
  }

  .vblh-goldcard-insurance-story__track {
    gap: 0.9rem;
    padding-inline: 1.25rem;
  }

  .vblh-goldcard-insurance-card {
    flex-basis: min(82vw, 23rem);
    min-height: 31rem;
    padding: 1.6rem;
    border-radius: 1.2rem;
  }

  .vblh-goldcard-insurance-card__visual {
    height: 7.9rem;
  }

  .vblh-goldcard-insurance-card__image {
    height: 7.6rem;
  }
}

/* ==========================================================
   VR PRIME CONFETTI
   ========================================================== */

.vrp-confetti-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /*
    Gemeinsame Scroll-Timeline fuer den kompletten Abschnitt.
    WICHTIG: "--vrp-confetti-section-timeline" ist KEINE CSS-Variable
    und wird nirgendwo mit var() verwendet. Es ist nur der Name der
    View-Timeline, genauso wie in den funktionierenden Beispielen.
  */
  view-timeline-name: --vrp-confetti-section-timeline;
  view-timeline-axis: block;
}

/*
  Dein bestehender Inhalt kommt in diesen Wrapper.
  Die Klasse sorgt nur dafuer, dass Text, Buttons usw.
  ueber dem Konfetti liegen.
*/
.vrp-confetti-content {
  position: relative;
  z-index: 3;
}

/* Reine Deko-Ebene */
.vrp-confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/*
  Ausgangspunkte der beiden Bursts.
  Falls du spaeter feinjustieren willst, sind top / left / right
  die drei wichtigsten Werte.
*/
.vrp-confetti-burst {
  position: absolute;
  top: 32%;
  width: 1px;
  height: 1px;
}

.vrp-confetti-burst--left {
  left: 24%;
}

.vrp-confetti-burst--right {
  right: 24%;
}

/* Gemeinsame Basis fuer alle Konfetti-Teilchen */
.vrp-confetti-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 24px;
  border-radius: 3px;
  opacity: 0;
  filter: drop-shadow(0 3px 3px rgba(15, 47, 78, .08));
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;

  /*
    Alle Partikel hoeren auf dieselbe Timeline des Eltern-Abschnitts.
    Das ist robuster als eine eigene view()-Timeline pro Partikel.
  */
  animation-timeline: --vrp-confetti-section-timeline;

  /*
    Die ersten 16 % bleiben die Partikel unsichtbar.
    In dieser Phase bewegen sie sich bereits auseinander.
    Danach werden sie weich eingeblendet – dadurch gibt es beim
    Laden keine sichtbare Konfetti-Klumpung am Burst-Ursprung.
  */
  animation-range: entry 0% cover 76%;

  will-change: transform, opacity;
}

/* Farben */
.vrp-confetti-color--blue-dark {
  background: #08365f;
}

.vrp-confetti-color--blue-mid {
  background: #2d79ba;
}

.vrp-confetti-color--blue-light {
  background: #76b4e5;
}

.vrp-confetti-color--gold {
  background: #d2a83d;
}

.vrp-confetti-color--gold-mid {
  background: #e0bc63;
}

.vrp-confetti-color--gold-light {
  background: #f0d894;
}

/* Formen: keine Kreise */
.vrp-confetti-shape--rect {
  width: 10px;
  height: 24px;
  border-radius: 3px;
}

.vrp-confetti-shape--micro {
  width: 5px;
  height: 12px;
  border-radius: 2px;
}

.vrp-confetti-shape--pill {
  width: 20px;
  height: 6px;
  border-radius: 999px;
}

.vrp-confetti-shape--diamond {
  width: 8px;
  height: 17px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.vrp-confetti-shape--star {
  width: 10px;
  height: 10px;
  border-radius: 0;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.vrp-confetti-shape--spark {
  width: 8px;
  height: 8px;
  border-radius: 0;
  clip-path: polygon(
    50% 0%,
    58% 40%,
    100% 50%,
    58% 60%,
    50% 100%,
    42% 60%,
    0 50%,
    42% 40%
  );
}

/* Zusaetzliche, etwas groessere Sterne */
.vrp-confetti-accent-star {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  background: #d2a83d;
  clip-path: polygon(
    50% 0,
    61% 37%,
    100% 50%,
    61% 63%,
    50% 100%,
    39% 63%,
    0 50%,
    39% 37%
  );
  filter: drop-shadow(0 2px 3px rgba(25, 57, 88, .08));
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --vrp-confetti-section-timeline;
  animation-range: entry 4% cover 58%;
}

.vrp-confetti-accent-star--left-top {
  left: 17%;
  top: 26%;
  animation-name: vrp-confetti-accent-left-top;
}

.vrp-confetti-accent-star--left-bottom {
  left: 29%;
  top: 43%;
  animation-name: vrp-confetti-accent-left-bottom;
}

.vrp-confetti-accent-star--right-top {
  right: 17%;
  top: 27%;
  animation-name: vrp-confetti-accent-right-top;
}

.vrp-confetti-accent-star--right-bottom {
  right: 29%;
  top: 43%;
  animation-name: vrp-confetti-accent-right-bottom;
}

@keyframes vrp-confetti-accent-left-top {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.2);
  }
  18% {
    opacity: 0;
  }
  38% {
    opacity: .9;
  }
  100% {
    opacity: .32;
    transform: translate3d(-70px, -65px, 0) rotate(145deg) scale(1);
  }
}

@keyframes vrp-confetti-accent-left-bottom {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.15);
  }
  18% {
    opacity: 0;
  }
  38% {
    opacity: .85;
  }
  100% {
    opacity: .3;
    transform: translate3d(-35px, 75px, 0) rotate(145deg) scale(.75);
  }
}

@keyframes vrp-confetti-accent-right-top {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.2);
  }
  18% {
    opacity: 0;
  }
  38% {
    opacity: .9;
  }
  100% {
    opacity: .32;
    transform: translate3d(70px, -65px, 0) rotate(145deg) scale(1);
  }
}

@keyframes vrp-confetti-accent-right-bottom {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.15);
  }
  18% {
    opacity: 0;
  }
  38% {
    opacity: .85;
  }
  100% {
    opacity: .3;
    transform: translate3d(35px, 75px, 0) rotate(145deg) scale(.75);
  }
}

.vrp-confetti-particle--l01 {
  animation-name: vrp-confetti-flight-l01;
}

@keyframes vrp-confetti-flight-l01 {
  0% {
    opacity: 0;
    transform: translate3d(-8px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-100px, -135px, 0) rotate(136.80deg) scale(0.920);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-265px, -225px, 0) rotate(360deg) scale(1);
  }
}


.vrp-confetti-particle--l02 {
  animation-name: vrp-confetti-flight-l02;
}

@keyframes vrp-confetti-flight-l02 {
  0% {
    opacity: 0;
    transform: translate3d(-8px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-150px, -90px, 0) rotate(193.80deg) scale(0.874);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-340px, -120px, 0) rotate(510deg) scale(0.95);
  }
}


.vrp-confetti-particle--l03 {
  animation-name: vrp-confetti-flight-l03;
}

@keyframes vrp-confetti-flight-l03 {
  0% {
    opacity: 0;
    transform: translate3d(-6px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-115px, -35px, 0) rotate(112.10deg) scale(1.012);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-315px, 0px, 0) rotate(295deg) scale(1.1);
  }
}


.vrp-confetti-particle--l04 {
  animation-name: vrp-confetti-flight-l04;
}

@keyframes vrp-confetti-flight-l04 {
  0% {
    opacity: 0;
    transform: translate3d(-7px, 8px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-105px, 40px, 0) rotate(171.00deg) scale(0.874);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-275px, 125px, 0) rotate(450deg) scale(0.95);
  }
}


.vrp-confetti-particle--l05 {
  animation-name: vrp-confetti-flight-l05;
}

@keyframes vrp-confetti-flight-l05 {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 7px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-72px, 105px, 0) rotate(129.20deg) scale(0.662);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-205px, 215px, 0) rotate(340deg) scale(0.72);
  }
}


.vrp-confetti-particle--l06 {
  animation-name: vrp-confetti-flight-l06;
}

@keyframes vrp-confetti-flight-l06 {
  0% {
    opacity: 0;
    transform: translate3d(-6px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-38px, -155px, 0) rotate(212.80deg) scale(0.920);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-80px, -275px, 0) rotate(560deg) scale(1);
  }
}


.vrp-confetti-particle--l07 {
  animation-name: vrp-confetti-flight-l07;
}

@keyframes vrp-confetti-flight-l07 {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-45px, 125px, 0) rotate(114.00deg) scale(0.828);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-95px, 260px, 0) rotate(300deg) scale(0.9);
  }
}


.vrp-confetti-particle--l08 {
  animation-name: vrp-confetti-flight-l08;
}

@keyframes vrp-confetti-flight-l08 {
  0% {
    opacity: 0;
    transform: translate3d(-3px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-185px, -8px, 0) rotate(159.60deg) scale(0.736);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-395px, 25px, 0) rotate(420deg) scale(0.8);
  }
}


.vrp-confetti-particle--l09 {
  animation-name: vrp-confetti-flight-l09;
}

@keyframes vrp-confetti-flight-l09 {
  0% {
    opacity: 0;
    transform: translate3d(-7px, 2px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-125px, -175px, 0) rotate(201.40deg) scale(0.754);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-225px, -310px, 0) rotate(530deg) scale(0.82);
  }
}


.vrp-confetti-particle--l10 {
  animation-name: vrp-confetti-flight-l10;
}

@keyframes vrp-confetti-flight-l10 {
  0% {
    opacity: 0;
    transform: translate3d(-6px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-145px, 100px, 0) rotate(144.40deg) scale(0.644);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-325px, 205px, 0) rotate(380deg) scale(0.7);
  }
}


.vrp-confetti-particle--l11 {
  animation-name: vrp-confetti-flight-l11;
}

@keyframes vrp-confetti-flight-l11 {
  0% {
    opacity: 0;
    transform: translate3d(-3px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-65px, -88px, 0) rotate(104.50deg) scale(0.570);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-155px, -165px, 0) rotate(275deg) scale(0.62);
  }
}


.vrp-confetti-particle--l12 {
  animation-name: vrp-confetti-flight-l12;
}

@keyframes vrp-confetti-flight-l12 {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 7px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-190px, -82px, 0) rotate(231.80deg) scale(0.736);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-415px, -155px, 0) rotate(610deg) scale(0.8);
  }
}


.vrp-confetti-particle--l13 {
  animation-name: vrp-confetti-flight-l13;
}

@keyframes vrp-confetti-flight-l13 {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-195px, 68px, 0) rotate(172.90deg) scale(0.552);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-405px, 145px, 0) rotate(455deg) scale(0.6);
  }
}


.vrp-confetti-particle--l14 {
  animation-name: vrp-confetti-flight-l14;
}

@keyframes vrp-confetti-flight-l14 {
  0% {
    opacity: 0;
    transform: translate3d(-4px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-80px, 18px, 0) rotate(123.50deg) scale(0.920);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-185px, 55px, 0) rotate(325deg) scale(1);
  }
}


.vrp-confetti-particle--l15 {
  animation-name: vrp-confetti-flight-l15;
}

@keyframes vrp-confetti-flight-l15 {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 2px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-14px, -105px, 0) rotate(190.00deg) scale(0.662);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-18px, -220px, 0) rotate(500deg) scale(0.72);
  }
}


.vrp-confetti-particle--l16 {
  animation-name: vrp-confetti-flight-l16;
}

@keyframes vrp-confetti-flight-l16 {
  0% {
    opacity: 0;
    transform: translate3d(-4px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-112px, -62px, 0) rotate(159.60deg) scale(0.828);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-255px, -75px, 0) rotate(420deg) scale(0.9);
  }
}


.vrp-confetti-particle--l17 {
  animation-name: vrp-confetti-flight-l17;
}

@keyframes vrp-confetti-flight-l17 {
  0% {
    opacity: 0;
    transform: translate3d(-4px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-120px, 58px, 0) rotate(133.00deg) scale(0.846);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-285px, 100px, 0) rotate(350deg) scale(0.92);
  }
}


.vrp-confetti-particle--l18 {
  animation-name: vrp-confetti-flight-l18;
}

@keyframes vrp-confetti-flight-l18 {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-70px, -140px, 0) rotate(216.60deg) scale(0.782);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-140px, -250px, 0) rotate(570deg) scale(0.85);
  }
}


.vrp-confetti-particle--l19 {
  animation-name: vrp-confetti-flight-l19;
}

@keyframes vrp-confetti-flight-l19 {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-52px, 145px, 0) rotate(117.80deg) scale(0.736);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-128px, 285px, 0) rotate(310deg) scale(0.8);
  }
}


.vrp-confetti-particle--l20 {
  animation-name: vrp-confetti-flight-l20;
}

@keyframes vrp-confetti-flight-l20 {
  0% {
    opacity: 0;
    transform: translate3d(-4px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-225px, 20px, 0) rotate(178.60deg) scale(0.534);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-455px, 75px, 0) rotate(470deg) scale(0.58);
  }
}


.vrp-confetti-particle--l21 {
  animation-name: vrp-confetti-flight-l21;
}

@keyframes vrp-confetti-flight-l21 {
  0% {
    opacity: 0;
    transform: translate3d(-4px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-170px, -145px, 0) rotate(224.20deg) scale(0.718);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-350px, -250px, 0) rotate(590deg) scale(0.78);
  }
}


.vrp-confetti-particle--l22 {
  animation-name: vrp-confetti-flight-l22;
}

@keyframes vrp-confetti-flight-l22 {
  0% {
    opacity: 0;
    transform: translate3d(-4px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-165px, 135px, 0) rotate(153.90deg) scale(0.754);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-350px, 260px, 0) rotate(405deg) scale(0.82);
  }
}


.vrp-confetti-particle--l23 {
  animation-name: vrp-confetti-flight-l23;
}

@keyframes vrp-confetti-flight-l23 {
  0% {
    opacity: 0;
    transform: translate3d(-3px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-92px, -28px, 0) rotate(106.40deg) scale(0.460);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-235px, -18px, 0) rotate(280deg) scale(0.5);
  }
}


.vrp-confetti-particle--l24 {
  animation-name: vrp-confetti-flight-l24;
}

@keyframes vrp-confetti-flight-l24 {
  0% {
    opacity: 0;
    transform: translate3d(-3px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-132px, 24px, 0) rotate(138.70deg) scale(0.478);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-298px, 48px, 0) rotate(365deg) scale(0.52);
  }
}


.vrp-confetti-particle--l25 {
  animation-name: vrp-confetti-flight-l25;
}

@keyframes vrp-confetti-flight-l25 {
  0% {
    opacity: 0;
    transform: translate3d(-2px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-96px, -188px, 0) rotate(190.00deg) scale(0.423);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-172px, -338px, 0) rotate(500deg) scale(0.46);
  }
}


.vrp-confetti-particle--l26 {
  animation-name: vrp-confetti-flight-l26;
}

@keyframes vrp-confetti-flight-l26 {
  0% {
    opacity: 0;
    transform: translate3d(-2px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-35px, 30px, 0) rotate(91.20deg) scale(0.386);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-58px, 80px, 0) rotate(240deg) scale(0.42);
  }
}


.vrp-confetti-particle--l27 {
  animation-name: vrp-confetti-flight-l27;
}

@keyframes vrp-confetti-flight-l27 {
  0% {
    opacity: 0;
    transform: translate3d(-2px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-206px, -40px, 0) rotate(148.20deg) scale(0.405);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-438px, -30px, 0) rotate(390deg) scale(0.44);
  }
}


.vrp-confetti-particle--l28 {
  animation-name: vrp-confetti-flight-l28;
}

@keyframes vrp-confetti-flight-l28 {
  0% {
    opacity: 0;
    transform: translate3d(-2px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-218px, 96px, 0) rotate(136.80deg) scale(0.414);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-430px, 190px, 0) rotate(360deg) scale(0.45);
  }
}


.vrp-confetti-particle--l29 {
  animation-name: vrp-confetti-flight-l29;
}

@keyframes vrp-confetti-flight-l29 {
  0% {
    opacity: 0;
    transform: translate3d(-1px, 2px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-26px, -62px, 0) rotate(95.00deg) scale(0.350);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-42px, -118px, 0) rotate(250deg) scale(0.38);
  }
}


.vrp-confetti-particle--l30 {
  animation-name: vrp-confetti-flight-l30;
}

@keyframes vrp-confetti-flight-l30 {
  0% {
    opacity: 0;
    transform: translate3d(-1px, 2px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(-58px, 82px, 0) rotate(110.20deg) scale(0.368);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(-92px, 138px, 0) rotate(290deg) scale(0.4);
  }
}

.vrp-confetti-particle--r01 {
  animation-name: vrp-confetti-flight-r01;
}

@keyframes vrp-confetti-flight-r01 {
  0% {
    opacity: 0;
    transform: translate3d(8px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(100px, -135px, 0) rotate(-136.80deg) scale(0.920);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(265px, -225px, 0) rotate(-360deg) scale(1);
  }
}


.vrp-confetti-particle--r02 {
  animation-name: vrp-confetti-flight-r02;
}

@keyframes vrp-confetti-flight-r02 {
  0% {
    opacity: 0;
    transform: translate3d(8px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(150px, -90px, 0) rotate(-193.80deg) scale(0.874);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(340px, -120px, 0) rotate(-510deg) scale(0.95);
  }
}


.vrp-confetti-particle--r03 {
  animation-name: vrp-confetti-flight-r03;
}

@keyframes vrp-confetti-flight-r03 {
  0% {
    opacity: 0;
    transform: translate3d(6px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(115px, -35px, 0) rotate(-112.10deg) scale(1.012);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(315px, 0px, 0) rotate(-295deg) scale(1.1);
  }
}


.vrp-confetti-particle--r04 {
  animation-name: vrp-confetti-flight-r04;
}

@keyframes vrp-confetti-flight-r04 {
  0% {
    opacity: 0;
    transform: translate3d(7px, 8px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(105px, 40px, 0) rotate(-171.00deg) scale(0.874);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(275px, 125px, 0) rotate(-450deg) scale(0.95);
  }
}


.vrp-confetti-particle--r05 {
  animation-name: vrp-confetti-flight-r05;
}

@keyframes vrp-confetti-flight-r05 {
  0% {
    opacity: 0;
    transform: translate3d(5px, 7px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(72px, 105px, 0) rotate(-129.20deg) scale(0.662);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(205px, 215px, 0) rotate(-340deg) scale(0.72);
  }
}


.vrp-confetti-particle--r06 {
  animation-name: vrp-confetti-flight-r06;
}

@keyframes vrp-confetti-flight-r06 {
  0% {
    opacity: 0;
    transform: translate3d(6px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(38px, -155px, 0) rotate(-212.80deg) scale(0.920);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(80px, -275px, 0) rotate(-560deg) scale(1);
  }
}


.vrp-confetti-particle--r07 {
  animation-name: vrp-confetti-flight-r07;
}

@keyframes vrp-confetti-flight-r07 {
  0% {
    opacity: 0;
    transform: translate3d(5px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(45px, 125px, 0) rotate(-114.00deg) scale(0.828);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(95px, 260px, 0) rotate(-300deg) scale(0.9);
  }
}


.vrp-confetti-particle--r08 {
  animation-name: vrp-confetti-flight-r08;
}

@keyframes vrp-confetti-flight-r08 {
  0% {
    opacity: 0;
    transform: translate3d(3px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(185px, -8px, 0) rotate(-159.60deg) scale(0.736);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(395px, 25px, 0) rotate(-420deg) scale(0.8);
  }
}


.vrp-confetti-particle--r09 {
  animation-name: vrp-confetti-flight-r09;
}

@keyframes vrp-confetti-flight-r09 {
  0% {
    opacity: 0;
    transform: translate3d(7px, 2px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(125px, -175px, 0) rotate(-201.40deg) scale(0.754);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(225px, -310px, 0) rotate(-530deg) scale(0.82);
  }
}


.vrp-confetti-particle--r10 {
  animation-name: vrp-confetti-flight-r10;
}

@keyframes vrp-confetti-flight-r10 {
  0% {
    opacity: 0;
    transform: translate3d(6px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(145px, 100px, 0) rotate(-144.40deg) scale(0.644);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(325px, 205px, 0) rotate(-380deg) scale(0.7);
  }
}


.vrp-confetti-particle--r11 {
  animation-name: vrp-confetti-flight-r11;
}

@keyframes vrp-confetti-flight-r11 {
  0% {
    opacity: 0;
    transform: translate3d(3px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(65px, -88px, 0) rotate(-104.50deg) scale(0.570);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(155px, -165px, 0) rotate(-275deg) scale(0.62);
  }
}


.vrp-confetti-particle--r12 {
  animation-name: vrp-confetti-flight-r12;
}

@keyframes vrp-confetti-flight-r12 {
  0% {
    opacity: 0;
    transform: translate3d(5px, 7px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(190px, -82px, 0) rotate(-231.80deg) scale(0.736);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(415px, -155px, 0) rotate(-610deg) scale(0.8);
  }
}


.vrp-confetti-particle--r13 {
  animation-name: vrp-confetti-flight-r13;
}

@keyframes vrp-confetti-flight-r13 {
  0% {
    opacity: 0;
    transform: translate3d(5px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(195px, 68px, 0) rotate(-172.90deg) scale(0.552);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(405px, 145px, 0) rotate(-455deg) scale(0.6);
  }
}


.vrp-confetti-particle--r14 {
  animation-name: vrp-confetti-flight-r14;
}

@keyframes vrp-confetti-flight-r14 {
  0% {
    opacity: 0;
    transform: translate3d(4px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(80px, 18px, 0) rotate(-123.50deg) scale(0.920);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(185px, 55px, 0) rotate(-325deg) scale(1);
  }
}


.vrp-confetti-particle--r15 {
  animation-name: vrp-confetti-flight-r15;
}

@keyframes vrp-confetti-flight-r15 {
  0% {
    opacity: 0;
    transform: translate3d(5px, 2px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(14px, -105px, 0) rotate(-190.00deg) scale(0.662);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(18px, -220px, 0) rotate(-500deg) scale(0.72);
  }
}


.vrp-confetti-particle--r16 {
  animation-name: vrp-confetti-flight-r16;
}

@keyframes vrp-confetti-flight-r16 {
  0% {
    opacity: 0;
    transform: translate3d(4px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(112px, -62px, 0) rotate(-159.60deg) scale(0.828);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(255px, -75px, 0) rotate(-420deg) scale(0.9);
  }
}


.vrp-confetti-particle--r17 {
  animation-name: vrp-confetti-flight-r17;
}

@keyframes vrp-confetti-flight-r17 {
  0% {
    opacity: 0;
    transform: translate3d(4px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(120px, 58px, 0) rotate(-133.00deg) scale(0.846);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(285px, 100px, 0) rotate(-350deg) scale(0.92);
  }
}


.vrp-confetti-particle--r18 {
  animation-name: vrp-confetti-flight-r18;
}

@keyframes vrp-confetti-flight-r18 {
  0% {
    opacity: 0;
    transform: translate3d(5px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(70px, -140px, 0) rotate(-216.60deg) scale(0.782);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(140px, -250px, 0) rotate(-570deg) scale(0.85);
  }
}


.vrp-confetti-particle--r19 {
  animation-name: vrp-confetti-flight-r19;
}

@keyframes vrp-confetti-flight-r19 {
  0% {
    opacity: 0;
    transform: translate3d(5px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(52px, 145px, 0) rotate(-117.80deg) scale(0.736);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(128px, 285px, 0) rotate(-310deg) scale(0.8);
  }
}


.vrp-confetti-particle--r20 {
  animation-name: vrp-confetti-flight-r20;
}

@keyframes vrp-confetti-flight-r20 {
  0% {
    opacity: 0;
    transform: translate3d(4px, 5px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(225px, 20px, 0) rotate(-178.60deg) scale(0.534);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(455px, 75px, 0) rotate(-470deg) scale(0.58);
  }
}


.vrp-confetti-particle--r21 {
  animation-name: vrp-confetti-flight-r21;
}

@keyframes vrp-confetti-flight-r21 {
  0% {
    opacity: 0;
    transform: translate3d(4px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(170px, -145px, 0) rotate(-224.20deg) scale(0.718);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(350px, -250px, 0) rotate(-590deg) scale(0.78);
  }
}


.vrp-confetti-particle--r22 {
  animation-name: vrp-confetti-flight-r22;
}

@keyframes vrp-confetti-flight-r22 {
  0% {
    opacity: 0;
    transform: translate3d(4px, 6px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(165px, 135px, 0) rotate(-153.90deg) scale(0.754);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(350px, 260px, 0) rotate(-405deg) scale(0.82);
  }
}


.vrp-confetti-particle--r23 {
  animation-name: vrp-confetti-flight-r23;
}

@keyframes vrp-confetti-flight-r23 {
  0% {
    opacity: 0;
    transform: translate3d(3px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(92px, -28px, 0) rotate(-106.40deg) scale(0.460);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(235px, -18px, 0) rotate(-280deg) scale(0.5);
  }
}


.vrp-confetti-particle--r24 {
  animation-name: vrp-confetti-flight-r24;
}

@keyframes vrp-confetti-flight-r24 {
  0% {
    opacity: 0;
    transform: translate3d(3px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(132px, 24px, 0) rotate(-138.70deg) scale(0.478);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(298px, 48px, 0) rotate(-365deg) scale(0.52);
  }
}


.vrp-confetti-particle--r25 {
  animation-name: vrp-confetti-flight-r25;
}

@keyframes vrp-confetti-flight-r25 {
  0% {
    opacity: 0;
    transform: translate3d(2px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(96px, -188px, 0) rotate(-190.00deg) scale(0.423);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(172px, -338px, 0) rotate(-500deg) scale(0.46);
  }
}


.vrp-confetti-particle--r26 {
  animation-name: vrp-confetti-flight-r26;
}

@keyframes vrp-confetti-flight-r26 {
  0% {
    opacity: 0;
    transform: translate3d(2px, 4px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(35px, 30px, 0) rotate(-91.20deg) scale(0.386);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(58px, 80px, 0) rotate(-240deg) scale(0.42);
  }
}


.vrp-confetti-particle--r27 {
  animation-name: vrp-confetti-flight-r27;
}

@keyframes vrp-confetti-flight-r27 {
  0% {
    opacity: 0;
    transform: translate3d(2px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(206px, -40px, 0) rotate(-148.20deg) scale(0.405);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(438px, -30px, 0) rotate(-390deg) scale(0.44);
  }
}


.vrp-confetti-particle--r28 {
  animation-name: vrp-confetti-flight-r28;
}

@keyframes vrp-confetti-flight-r28 {
  0% {
    opacity: 0;
    transform: translate3d(2px, 3px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(218px, 96px, 0) rotate(-136.80deg) scale(0.414);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(430px, 190px, 0) rotate(-360deg) scale(0.45);
  }
}


.vrp-confetti-particle--r29 {
  animation-name: vrp-confetti-flight-r29;
}

@keyframes vrp-confetti-flight-r29 {
  0% {
    opacity: 0;
    transform: translate3d(1px, 2px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(26px, -62px, 0) rotate(-95.00deg) scale(0.350);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(42px, -118px, 0) rotate(-250deg) scale(0.38);
  }
}


.vrp-confetti-particle--r30 {
  animation-name: vrp-confetti-flight-r30;
}

@keyframes vrp-confetti-flight-r30 {
  0% {
    opacity: 0;
    transform: translate3d(1px, 2px, 0) rotate(0deg) scale(.15);
  }
  16% {
    opacity: 0;
  }
  30% {
    opacity: .72;
  }
  48% {
    opacity: .9;
    transform: translate3d(58px, 82px, 0) rotate(-110.20deg) scale(0.368);
  }
  72% {
    opacity: .72;
  }
  100% {
    opacity: .34;
    transform: translate3d(92px, 138px, 0) rotate(-290deg) scale(0.4);
  }
}

/* Responsive Anpassung */
@media (max-width: 900px) {
  .vrp-confetti-burst--left {
    left: 14%;
  }

  .vrp-confetti-burst--right {
    right: 14%;
  }
}

@media (max-width: 640px) {
  .vrp-confetti-burst {
    top: 30%;
    transform: scale(.78);
  }

  .vrp-confetti-burst--left {
    left: 5%;
  }

  .vrp-confetti-burst--right {
    right: 5%;
  }

  .vrp-confetti-accent-star {
    display: none;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .vrp-confetti-layer {
    display: none;
  }
}

/*
  Fallback fuer Browser ohne Scroll-Driven Animations.
  Dort wird das Konfetti absichtlich ausgeblendet, statt
  unkontrolliert als normale Zeit-Animation zu laufen.
*/
@supports not (animation-timeline: view()) {
  /*
    Fallback: In aelteren Browsern wird die 1-Sekunden-Animation
    normal zeitbasiert abgespielt. Das Konfetti wird NICHT mehr
    komplett ausgeblendet.
  */
  .vrp-confetti-particle,
  .vrp-confetti-accent-star {
    animation-timeline: auto;
  }
}


/* ==========================================================
   VR PRIME VORTEILSKACHELN
   Ebenfalls bewusst eindeutig gepraefixt.
   ========================================================== */

.vrp-benefits {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: 72px;
}

.vrp-benefits-title {
  margin: 0 0 42px;
  text-align: center;
  color: #10243f;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.vrp-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
}

.vrp-benefits-card {
  min-height: 310px;
  padding: 38px 28px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #d3dbe4;
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
}

.vrp-benefits-icon {
  width: 94px;
  height: 94px;
  margin-bottom: 26px;
  color: #13233a;
  display: block;
  flex: 0 0 auto;
}

.vrp-benefits-card-title {
  margin: 0;
  color: #171d27;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  line-height: 1.25;
  font-weight: 800;
}

.vrp-benefits-card-text {
  margin: 24px 0 0;
  color: #2f3b4c;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .vrp-benefits {
    margin-top: 58px;
  }

  .vrp-benefits-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vrp-benefits-card {
    min-height: 250px;
  }
}

@media (max-width: 640px) {
  .vrp-benefits-title {
    margin-bottom: 28px;
    font-size: 2rem;
  }

  .vrp-benefits-card {
    min-height: 220px;
    padding: 30px 22px;
  }

  .vrp-benefits-icon {
    width: 78px;
    height: 78px;
    margin-bottom: 20px;
  }

  .vrp-benefits-card-text {
    margin-top: 16px;
  }
}

.center{
  text-align: center;
  line-height: 1.1;
}

.button-jubi{
display: grid;
justify-content: center;
}