/* ==========================================================================
   AuraPay — Neumorphism, allumfänglich
   Auflageschicht über aurapay.css.

   Drei Ziele dieser Fassung:
   A) EINE Geometrie. Jedes bedienbare Element ist eine Pille. Jede Fläche
      teilt sich eine von drei Radiusstufen. Keine Ausreißer.
   B) Kein flaches Element mehr. Auch Footer-Links, Tabellenzeilen, Badges,
      Aufzählungspunkte und Trennlinien bekommen Licht und Schatten.
   C) Perfektionierter Kachel-Hover: Die Kachel hebt sich, ihr Schatten
      wächst weich, das Innenlicht wandert mit, das Icon steigt leicht
      voraus. Kein Textversatz, kein Layoutsprung, kein Schattenschnitt.
   ========================================================================== */

:root{
  --surface:#E8E5F1;
  --surface-2:#EDEBF6;
  --surface-3:#F2F0F9;

  --hi:rgba(255,255,255,1);
  --lo:rgba(152,144,190,0.48);

  --x0:-2px -2px 5px var(--hi), 2px 2px 5px var(--lo);
  --x1:-4px -4px 9px var(--hi), 4px 4px 9px var(--lo);
  --x2:-8px -8px 18px var(--hi), 8px 8px 18px var(--lo);
  --x3:-14px -14px 32px var(--hi), 14px 14px 32px var(--lo);
  --x4:-22px -22px 50px var(--hi), 21px 23px 50px var(--lo);
  --i0:inset -1px -1px 3px var(--hi), inset 1px 1px 3px var(--lo);
  --i1:inset -3px -3px 7px var(--hi), inset 3px 3px 7px var(--lo);
  --i2:inset -6px -6px 14px var(--hi), inset 6px 6px 14px var(--lo);
  --i3:inset -11px -11px 24px var(--hi), inset 11px 11px 24px var(--lo);

  /* A) Eine Geometrie für alles */
  --shape-control:999px;   /* alles Bedienbare */
  --shape-tile:28px;       /* Kacheln, kleine Flächen */
  --shape-panel:38px;      /* Karten, Panels */
  --shape-hall:52px;       /* große Bühnen */

  --ease-neu:cubic-bezier(.2,.62,.22,1);
  --t-in:520ms;      /* Auftauchen: langsam */
  --t-out:380ms;     /* Zurücksinken: schneller */
  --t-press:150ms;   /* Eindrücken: sofort */

  --text:#251142;
  --text-2:#4E4768;
  --border:transparent;
}

body{background:var(--surface);}

/* ==========================================================================
   A) EINE GEOMETRIE
   ========================================================================== */
/* Alles Bedienbare ist eine Pille — Buttons, Pills, Nav, Badges, Schalter */
.btn,.btn-sm,.pill,.badge,.nav-links a,.nav-toggle,.switch,
.faq-q,.price-card .btn,.phone-tap{
  border-radius:var(--shape-control) !important;
}
/* Buttons teilen exakt dieselbe Höhe und dasselbe Padding-Verhältnis */
.btn{min-height:54px !important;padding:0 32px !important;
     display:inline-flex;align-items:center;justify-content:center;gap:11px;}
.btn-sm{min-height:44px !important;padding:0 22px !important;font-size:14px;}
.nav-toggle{width:54px !important;height:54px !important;padding:0 !important;}

/* Flächen teilen drei Radien */
.card,.split-card,.cta-band,.price-card,.faq-item,.table-wrap,.calc-result{
  border-radius:var(--shape-panel) !important;
}
.card-sm,.shot,.flow-item,.step,.icon-tile,.demo-panel,.trustbar-inner,
.phone-tx-row,.phone-card{
  border-radius:var(--shape-tile) !important;
}
.demo,.hero-media .phone{border-radius:var(--shape-hall) !important;}

/* ==========================================================================
   B) NICHTS BLEIBT FLACH
   ========================================================================== */
.card,.card-sm,.raise,.raise-sm,.split-card,.cta-band,.demo,
.table-wrap,.faq-item,.shot,.flow-item,.step,.price-card,
.pill,.icon-tile,.btn,.nav-toggle,.phone,.phone-tx-row,.phone-tap{
  background:var(--surface) !important;border:0 !important;
}
.card,.raise,.cta-band,.demo,.split-card,.price-card{box-shadow:var(--x3) !important;}
.card-sm,.raise-sm,.shot,.faq-item,.table-wrap,.flow-item,.step{box-shadow:var(--x2) !important;}
.pill,.icon-tile,.phone-tx-row{box-shadow:var(--x1) !important;}

.inset,.trustbar-inner,.demo-panel,.calc-result,.phone-screen,.field{
  background:var(--surface) !important;border:0 !important;box-shadow:var(--i2) !important;
}

/* Badges: kleine Einbuchtungen statt Farbflecken */
.badge{box-shadow:var(--i0);}
.badge-lav{background:#E3DCFA !important;}
.badge-mint{background:#C6F2DC !important;}

/* Marker in Vergleichslisten */
.mark{box-shadow:var(--i0) !important;}
.mark-good{background:#C6F2DC !important;}
.mark-bad{background:#FADFDC !important;}

/* Aufzählungs-Häkchen bekommen eine Mulde */
.split-card li svg,.price-card li svg{
  flex:0 0 auto;box-sizing:content-box;padding:5px;border-radius:50%;
  background:var(--surface);box-shadow:var(--i0);
}

/* Trennlinien werden zu Lichtkanten */
th,td,.calc-row,.footer-bottom,.footer{border-color:transparent !important;}
.table-wrap tbody tr:not(:last-child) td,
.calc-row:not(:last-child){
  box-shadow:0 1px 0 var(--hi), 0 2px 2px rgba(152,144,190,.18);
}
thead th{background:var(--surface-2) !important;box-shadow:inset 0 -2px 3px rgba(152,144,190,.16);}
.footer{box-shadow:inset 0 1px 0 var(--hi), inset 0 2px 4px rgba(152,144,190,.14);}
.footer-bottom{box-shadow:inset 0 1px 0 var(--hi), inset 0 2px 3px rgba(152,144,190,.12);}

/* Footer-Links bekommen beim Hover eine eigene kleine Wölbung */
.footer li a{
  display:inline-block;padding:5px 12px;margin-left:-12px;
  border-radius:var(--shape-control);position:relative;isolation:isolate;
  transition:color var(--t-out) var(--ease-neu);
}
.footer li a::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  box-shadow:var(--x0);opacity:0;
  transition:opacity var(--t-in) var(--ease-neu);
}
.footer li a:hover::before{opacity:1;}

/* Eyebrow-Strich wird zur eingelassenen Rille */
.eyebrow::before{
  height:3px !important;border-radius:2px;background:var(--surface) !important;
  box-shadow:var(--i0);
}

/* Kennzahlen sitzen in einer Mulde */
.stat{border-radius:var(--shape-tile);box-shadow:var(--i1);}

/* Der Schalter in der Demo */
.switch{background:var(--surface) !important;box-shadow:var(--i1) !important;}
.switch::after{box-shadow:var(--x1);background:var(--surface) !important;}
.switch[aria-pressed="true"]{background:var(--violet) !important;box-shadow:var(--x1) !important;}

/* Aura-Ringe im Hero werden zu geprägten Kreisen */
.aura span{border-color:rgba(255,255,255,.85) !important;
           box-shadow:0 0 0 1px rgba(152,144,190,.18);}

/* ==========================================================================
   C) DER KACHEL-HOVER
   ========================================================================== */
/*
   Vier Ebenen wirken zusammen:
   1. ::before trägt den größeren Schatten, überblendet per Deckkraft
   2. ::after trägt ein wanderndes Innenlicht — als würde die Kachel
      sich zum Licht drehen
   3. transform hebt und skaliert minimal
   4. das Icon steigt einen Tick voraus, mit eigener Verzögerung
   Nichts davon verschiebt Text oder Layout.
*/
.card-hover,.split-card,.shot,.step,.icon-tile,.price-card,.flow-item,
.btn,.pill,.nav-links a,.faq-item{
  position:relative;isolation:isolate;
  transition:transform var(--t-out) var(--ease-neu);
  will-change:transform;
}

.card-hover::before,.split-card::before,.shot::before,.step::before,
.icon-tile::before,.price-card::before,.flow-item::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  box-shadow:var(--x4);
  opacity:0;transition:opacity var(--t-out) var(--ease-neu);
  pointer-events:none;
}
/* Innenlicht, das beim Anheben oben stärker wird */
.card-hover::after,.split-card::after,.step::after,
.icon-tile::after,.price-card::after,.flow-item::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(158deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 44%);
  opacity:0;transition:opacity var(--t-out) var(--ease-neu);
  pointer-events:none;
}

.card-hover:hover,.split-card:hover,.shot:hover,.price-card:hover{
  transform:translateY(-5px) scale(1.008);
  transition-duration:var(--t-in);
}
.step:hover,.icon-tile:hover,.flow-item:hover{
  transform:translateY(-3px) scale(1.012);
  transition-duration:var(--t-in);
}
.card-hover:hover::before,.split-card:hover::before,.shot:hover::before,
.step:hover::before,.icon-tile:hover::before,.price-card:hover::before,
.flow-item:hover::before,
.card-hover:hover::after,.split-card:hover::after,.step:hover::after,
.icon-tile:hover::after,.price-card:hover::after,.flow-item:hover::after{
  opacity:1;transition-duration:var(--t-in);
}

/* Das Icon steigt einen Tick voraus */
.card-hover .icon,.card-hover img[src*="/icons/"],
.split-card .icon-lg,.flow-item .icon-sm{
  transition:transform var(--t-out) var(--ease-neu);
}
.card-hover:hover .icon,.card-hover:hover img[src*="/icons/"],
.split-card:hover .icon-lg,.flow-item:hover .icon-sm{
  transform:translateY(-3px) scale(1.04);
  transition-duration:var(--t-in);transition-delay:40ms;
}

/* Drücken: die Kachel sinkt ein, alle Aufbauten verschwinden sofort */
.card-hover:active,.split-card:active,.step:active,
.price-card:active,.flow-item:active,.icon-tile:active{
  transform:translateY(0) scale(.996);
  box-shadow:var(--i1) !important;
  transition-duration:var(--t-press);
}
.card-hover:active::before,.card-hover:active::after,
.split-card:active::before,.split-card:active::after,
.step:active::before,.step:active::after,
.price-card:active::before,.price-card:active::after,
.flow-item:active::before,.flow-item:active::after,
.icon-tile:active::before,.icon-tile:active::after{
  opacity:0;transition-duration:var(--t-press);
}

/* Kein Schattenschnitt: Raster brauchen Luft für die gewachsenen Schatten */
.grid{padding:6px;margin:-6px;}
.shots,.split{padding:8px;margin:-8px;}

/* ==========================================================================
   Buttons — dieselbe Logik, eigene Tiefe
   ========================================================================== */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  opacity:0;transition:opacity var(--t-out) var(--ease-neu);pointer-events:none;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(158deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 46%);
  opacity:0;transition:opacity var(--t-out) var(--ease-neu);pointer-events:none;
}
.btn-secondary,.btn-ghost{box-shadow:var(--x2) !important;}
.btn-secondary::before{box-shadow:var(--x3);}
.btn-secondary:hover{transform:translateY(-2px);transition-duration:var(--t-in);}
.btn-secondary:hover::before,.btn-secondary:hover::after{opacity:1;transition-duration:var(--t-in);}
.btn-secondary:active{transform:translateY(0);box-shadow:var(--i1) !important;transition-duration:var(--t-press);}
.btn-secondary:active::before,.btn-secondary:active::after{opacity:0;transition-duration:var(--t-press);}

.btn-primary{
  background:var(--violet) !important;color:#fff !important;
  box-shadow:-6px -6px 14px var(--hi), 7px 8px 20px rgba(72,49,166,.44) !important;
}
.btn-primary::before{box-shadow:-9px -9px 22px var(--hi), 12px 15px 34px rgba(72,49,166,.5);}
.btn-primary::after{background:linear-gradient(158deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 46%);}
.btn-primary:hover{transform:translateY(-2px);background:var(--violet-600) !important;transition-duration:var(--t-in);}
.btn-primary:hover::before,.btn-primary:hover::after{opacity:1;transition-duration:var(--t-in);}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:inset 4px 4px 10px rgba(40,14,90,.4), inset -4px -4px 10px rgba(255,255,255,.2) !important;
  transition-duration:var(--t-press);
}
.btn-primary:active::before,.btn-primary:active::after{opacity:0;transition-duration:var(--t-press);}
.btn svg{transition:transform var(--t-out) var(--ease-neu);}
.btn:hover svg{transform:translateX(4px);transition-duration:var(--t-in);}

/* Pills und Navigation nach demselben Muster */
.pill::before,.nav-links a::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  box-shadow:var(--x2);opacity:0;transition:opacity var(--t-out) var(--ease-neu);
}
.pill:hover,.nav-links a:hover{transform:translateY(-1px);transition-duration:var(--t-in);}
.pill:hover::before,.nav-links a:hover::before{opacity:1;transition-duration:var(--t-in);}
.nav-links a[aria-current="page"]{box-shadow:var(--i1) !important;transform:none;}
.nav-links a[aria-current="page"]::before{opacity:0 !important;}

.nav{background:var(--surface) !important;}
.nav.scrolled{box-shadow:0 8px 26px rgba(152,144,190,.34) !important;}

/* ==========================================================================
   Formulare und Regler
   ========================================================================== */
.field{transition:box-shadow var(--t-out) var(--ease-neu);border-radius:var(--shape-control) !important;padding:16px 24px;}
.field:hover{box-shadow:var(--i3) !important;}
.field:focus{box-shadow:var(--i2), 0 0 0 3px rgba(75,50,184,.3) !important;outline:0;}

input[type=range]{
  background:var(--surface) !important;border:0 !important;
  box-shadow:var(--i1) !important;height:14px;border-radius:var(--shape-control);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;border-radius:50%;border:0;
  background:var(--surface);box-shadow:var(--x1);
  transition:transform var(--t-out) var(--ease-neu), box-shadow var(--t-out) var(--ease-neu);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08);box-shadow:var(--x2);}
input[type=range]:active::-webkit-slider-thumb{transform:scale(.95);box-shadow:var(--i1);}
input[type=range]::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--x1);
}

/* Szene und Ablauf */
.step[aria-selected="true"]{box-shadow:var(--i2) !important;transform:none;}
.step[aria-selected="true"]::before,.step[aria-selected="true"]::after{opacity:0;}
.step-num,.flow-num{background:var(--surface) !important;box-shadow:var(--i1) !important;}
.step[aria-selected="true"] .step-num{
  background:var(--violet) !important;color:#fff !important;
  box-shadow:-3px -3px 7px var(--hi), 4px 4px 10px rgba(72,49,166,.42) !important;
}

/* FAQ */
.faq-item.open{box-shadow:var(--i1) !important;}
.faq-q{transition:color var(--t-out) var(--ease-neu);}
.faq-item:hover{transform:none;}

/* Bilder in der Mulde */
.shot{overflow:hidden;}
.shot img{transition:transform 820ms var(--ease-neu);}
.shot:hover img{transform:scale(1.035);}

.price-card.featured{box-shadow:var(--x4) !important;}
.price-card.featured::before{border:0 !important;}

/* ==========================================================================
   EINSATZORTE — Karte mit Bild und Direktvergleich
   ========================================================================== */
.places{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3);padding:8px;margin:-8px;
}
@media(max-width:820px){.places{grid-template-columns:1fr;}}

.place{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface) !important;border:0 !important;
  border-radius:var(--shape-panel) !important;
  box-shadow:var(--x3) !important;
  position:relative;isolation:isolate;
  transition:transform var(--t-out) var(--ease-neu);
}
.place::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  box-shadow:var(--x4);opacity:0;
  transition:opacity var(--t-out) var(--ease-neu);pointer-events:none;
}
.place::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(158deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 42%);
  opacity:0;transition:opacity var(--t-out) var(--ease-neu);pointer-events:none;
}
.place:hover{transform:translateY(-5px) scale(1.006);transition-duration:var(--t-in);}
.place:hover::before,.place:hover::after{opacity:1;transition-duration:var(--t-in);}
.place:active{
  transform:translateY(0) scale(.996);box-shadow:var(--i1) !important;
  transition-duration:var(--t-press);
}
.place:active::before,.place:active::after{opacity:0;transition-duration:var(--t-press);}

/* Bild sitzt in einer Mulde, nicht als Kante */
.place-img{
  margin:14px 14px 0;border-radius:var(--shape-tile);overflow:hidden;
  box-shadow:var(--i1);background:var(--surface);
}
.place-img img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 820ms var(--ease-neu);
}
.place:hover .place-img img{transform:scale(1.04);}

.place-body{padding:22px 26px 26px;}
.place h3{margin:0 0 4px;font-size:20px;}
.place-sub{font-size:14px;color:var(--text-2);margin:0 0 var(--s3);}

/* Der Vergleich: zwei Zeilen, klar gegeneinander gesetzt */
.place-cmp{display:flex;flex-direction:column;gap:11px;}
.place-row{
  display:flex;gap:13px;align-items:flex-start;
  padding:13px 16px;border-radius:var(--shape-tile);
  background:var(--surface);box-shadow:var(--i1);
  font-size:13.5px;line-height:1.45;color:var(--text-2);
}
.place-row strong{
  display:block;font-size:11px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;margin-bottom:3px;
}
.place-dot{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;margin-top:4px;
  box-shadow:var(--i0);
}
.place-row-bad .place-dot{background:#E8A9A0;}
.place-row-bad strong{color:#8E2B20;}
.place-row-good .place-dot{background:#8FDCB6;}
.place-row-good strong{color:var(--mint-700,#0C6045);}

/* ---------------------------------------------- Vergleichsstreifen darunter */
.cmp-strip{
  margin-top:var(--s4);padding:var(--s4);
  background:var(--surface);border-radius:var(--shape-panel);
  box-shadow:var(--i2);
}
.cmp-strip-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:var(--s3);
}
.cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);}
@media(max-width:860px){.cmp-grid{grid-template-columns:1fr;}}
.cmp-col{
  padding:20px 22px;border-radius:var(--shape-tile);
  background:var(--surface);box-shadow:var(--x1);
}
.cmp-col h4{
  margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:0.04em;
  color:var(--text-2);
}
.cmp-col p{margin:0;font-size:13.5px;line-height:1.5;}
.cmp-col-key{box-shadow:var(--x2);}
.cmp-col-key h4{color:var(--violet-600);}
.cmp-col-key p{color:var(--text);}
.cmp-note{
  margin:var(--s3) 0 0;font-size:12px;line-height:1.5;color:var(--text-2);opacity:.85;
}

@media (prefers-reduced-motion:reduce){
  .place{transition:none !important;}
  .place:hover{transform:none !important;}
  .place:hover .place-img img{transform:none !important;}
}
@media(hover:none){
  .place:hover{transform:none;}
  .place:hover::before,.place:hover::after{opacity:0;}
}

/* ==========================================================================
   KOSTENVERGLEICH — Popup
   ========================================================================== */
.vgl-scrim{
  position:fixed;inset:0;z-index:200;
  background:rgba(46,32,84,0.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity 300ms var(--ease-neu);
}
.vgl-scrim.on{opacity:1;}

.vgl-modal{
  position:fixed;z-index:201;inset:0;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,4vh,56px) clamp(14px,4vw,40px);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity 300ms var(--ease-neu);
  pointer-events:none;
}
.vgl-modal.on{opacity:1;pointer-events:auto;}

.vgl-modal-in{
  position:relative;width:100%;max-width:1020px;margin:auto;
  padding:clamp(26px,3.4vw,46px);
  background:var(--surface);
  border-radius:var(--shape-hall);
  box-shadow:var(--x4), 0 40px 120px rgba(46,32,84,.28);
  transform:translateY(22px) scale(.985);
  transition:transform 420ms var(--ease-neu);
}
.vgl-modal.on .vgl-modal-in{transform:none;}

.vgl-close{
  position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);
  width:46px;height:46px;border:0;border-radius:var(--shape-control);
  background:var(--surface);box-shadow:var(--x1);color:var(--text-2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--t-out) var(--ease-neu), box-shadow var(--t-press) var(--ease-neu),
             color var(--t-out) var(--ease-neu);
}
.vgl-close:hover{transform:translateY(-2px);box-shadow:var(--x2);color:var(--text);}
.vgl-close:active{transform:none;box-shadow:var(--i1);}

/* Auslöser-Knopf */
[data-vgl-open]{gap:11px;}
[data-vgl-open] svg{color:var(--violet-600);}

/* ==========================================================================
   Popup-Verdichtung — passt am Desktop in einen Bildschirm
   Nur innerhalb von .vgl-modal, die Seitenversionen bleiben unberührt.
   ========================================================================== */
.vgl-modal{align-items:center;padding:clamp(12px,2.4vh,28px) clamp(14px,3vw,32px);}
.vgl-modal-in{
  max-width:1140px;
  padding:clamp(22px,2.4vw,34px) clamp(24px,2.6vw,38px);
  max-height:calc(100dvh - 2 * clamp(12px,2.4vh,28px));
  overflow-y:auto;overscroll-behavior:contain;
}

/* Kopf: kompakt, Einleitung wandert neben die Überschrift */
.vgl-modal-in .eyebrow{margin-bottom:8px !important;font-size:10.5px;}
.vgl-modal-in h2{font-size:clamp(21px,2.1vw,28px) !important;margin-bottom:6px !important;}
.vgl-modal-in > p:first-of-type{
  font-size:13.5px !important;line-height:1.45;
  margin-bottom:clamp(16px,2vh,24px) !important;max-width:76ch !important;
}

/* Zwei Spalten, links Regler und Fußzeile, rechts das Ergebnis */
.vgl-modal .vgl-grid{gap:clamp(24px,2.6vw,38px);align-items:stretch;}
.vgl-modal .vgl-inputs{display:flex;flex-direction:column;}

/* Regler dichter */
.vgl-modal .slider-block{margin-bottom:clamp(14px,1.8vh,20px);}
.vgl-modal .slider-head{margin-bottom:8px;}
.vgl-modal .slider-head label{font-size:13.5px;}
.vgl-modal .slider-val{font-size:17px !important;}
.vgl-modal input[type=range]{height:10px;}
.vgl-modal input[type=range]::-webkit-slider-thumb{width:24px;height:24px;}
.vgl-modal .vgl-sep{margin:clamp(10px,1.4vh,16px) 0 clamp(12px,1.6vh,18px);font-size:10.5px;}

/* Ergebnisfeld */
.vgl-modal .vgl-box{padding:18px 22px;margin-bottom:14px;}
.vgl-modal .vgl-box-lab{font-size:10px;margin-bottom:5px;}
.vgl-modal .vgl-box-num{font-size:clamp(32px,3.4vw,44px);}
.vgl-modal .vgl-box-sub{font-size:13px;margin-top:5px;}

/* Vergleichszeilen: Fuß in eine Zeile, weniger Polster */
.vgl-modal .vgl-rows{gap:12px;}
.vgl-modal .vgl-row{padding:14px 17px;}
.vgl-modal .vgl-row-head{margin-bottom:9px;}
.vgl-modal .vgl-row-head strong{font-size:13.5px;}
.vgl-modal .vgl-row-head span{font-size:20px;}
.vgl-modal .vgl-track{height:10px;}
.vgl-modal .vgl-row-foot{margin-top:8px;font-size:11.5px;flex-wrap:nowrap;gap:14px;}
.vgl-modal .vgl-row-foot span:first-child{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.vgl-modal .vgl-row-foot span:last-child{flex:0 0 auto;}

/* Kosten je Zahlung */
.vgl-modal .vgl-per{gap:10px;margin-top:12px;}
.vgl-modal .vgl-per > div{padding:11px 13px;}
.vgl-modal .vgl-per span{font-size:10px;margin-bottom:3px;}
.vgl-modal .vgl-per strong{font-size:17px;}

/* Fußbereich unter die Regler, füllt die linke Spalte */
.vgl-modal .vgl-foot{margin-top:auto;padding-top:clamp(12px,1.6vh,18px);}
.vgl-modal .cmp-note{font-size:11px !important;line-height:1.45;margin:0 0 14px !important;}
.vgl-modal .btn-row{margin:0 !important;gap:10px;}
.vgl-modal .btn{min-height:46px !important;padding:0 22px !important;font-size:14px;}

/* Unter 900px Breite wieder gestapelt, dann darf gescrollt werden */
@media(max-width:900px){
  .vgl-modal{align-items:flex-start;}
  .vgl-modal .vgl-foot{margin-top:clamp(16px,2vh,24px);}
}
/* Sehr flache Fenster: Innenscroll statt Abschnitt */
@media(max-height:640px){
  .vgl-modal{align-items:flex-start;}
}

@media(max-width:640px){
  .vgl-modal-in{padding:22px 18px;border-radius:var(--shape-panel);}
  .vgl-close{top:12px;right:12px;width:42px;height:42px;}
}
@media (prefers-reduced-motion:reduce){
  .vgl-scrim,.vgl-modal,.vgl-modal-in{transition:none !important;}
  .vgl-modal-in{transform:none !important;}
  .vgl-close:hover{transform:none;}
}

/* ==========================================================================
   KOSTENVERGLEICH — Inhalt
   ========================================================================== */
.vgl-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:var(--s5);align-items:start;}
@media(max-width:900px){.vgl-grid{grid-template-columns:1fr;gap:var(--s4);}}

.vgl-sep{
  display:flex;align-items:center;gap:14px;margin:var(--s4) 0 var(--s3);
  font-size:11.5px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--text-2);
}
.vgl-sep::before,.vgl-sep::after{
  content:"";flex:1;height:3px;border-radius:2px;
  background:var(--surface);box-shadow:var(--i0);
}
.vgl-sep span{flex:0 0 auto;}

/* Ergebnisfeld */
.vgl-box{
  padding:26px 28px;border-radius:var(--shape-panel);
  background:var(--surface);box-shadow:var(--i2);
  margin-bottom:var(--s3);
}
.vgl-box-lab{
  display:block;font-size:11px;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:8px;
}
.vgl-box-num{
  font-family:'Urbanist';font-weight:800;letter-spacing:-0.035em;line-height:1;
  font-size:clamp(40px,4.6vw,60px);
  transition:color 340ms var(--ease-neu);
}
.vgl-box[data-state="save"] .vgl-box-num{color:var(--mint-700,#0C6045);}
.vgl-box[data-state="more"] .vgl-box-num{color:#8E2B20;}
.vgl-box[data-state="even"] .vgl-box-num{color:var(--text);}
.vgl-box-sub{margin:8px 0 0;font-size:14px;color:var(--text-2);}

/* Zwei Zeilen mit Balken */
.vgl-rows{display:flex;flex-direction:column;gap:var(--s2);}
.vgl-row{
  padding:18px 20px;border-radius:var(--shape-tile);
  background:var(--surface);box-shadow:var(--x1);
}
.vgl-row-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:11px;
}
.vgl-row-head strong{font-size:14.5px;font-weight:650;color:var(--text);}
.vgl-row-head span{font-family:'Urbanist';font-weight:800;font-size:24px;letter-spacing:-0.03em;}
.vgl-row-aura .vgl-row-head span{color:var(--violet-600);}
.vgl-row-mine .vgl-row-head span{color:var(--text-2);}
.vgl-track{
  display:block;height:12px;border-radius:var(--shape-control);overflow:hidden;
  background:var(--surface);box-shadow:var(--i1);
}
.vgl-fill{
  display:block;height:100%;border-radius:var(--shape-control);
  transition:width 620ms var(--ease-neu);
}
.vgl-fill-aura{background:linear-gradient(90deg,#8A73F0,#5B3FD6);}
.vgl-fill-mine{background:linear-gradient(90deg,#C9C2DE,#A79FC4);}
.vgl-row-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  margin-top:10px;font-size:12.5px;color:var(--text-2);
}
.vgl-row-foot b{color:var(--text);font-weight:650;}

/* Kosten je Zahlung */
.vgl-per{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:var(--s3);
}
@media(max-width:560px){.vgl-per{grid-template-columns:1fr;}}
.vgl-per > div{
  padding:14px 16px;border-radius:var(--shape-tile);
  background:var(--surface);box-shadow:var(--i1);
}
.vgl-per span{
  display:block;font-size:11px;font-weight:600;letter-spacing:0.06em;
  color:var(--text-2);margin-bottom:5px;
}
.vgl-per strong{font-family:'Urbanist';font-weight:800;font-size:20px;letter-spacing:-0.02em;}

/* ==========================================================================
   KOSTEN PRO ZAHLUNG — Preisseite
   ========================================================================== */
.cpt-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s4);
}
.cpt-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--text-2);}
.cpt-legend span{display:inline-flex;align-items:center;gap:9px;}
.cpt-key{width:13px;height:13px;border-radius:5px;display:inline-block;box-shadow:var(--i0);}
.cpt-key-aura{background:linear-gradient(140deg,#8A73F0,#5B3FD6);}
.cpt-key-mine{background:linear-gradient(140deg,#C9C2DE,#A79FC4);}

.cpt-body{display:flex;flex-direction:column;gap:var(--s2);}
.cpt-row{
  display:grid;grid-template-columns:110px 1fr;gap:var(--s3);align-items:center;
  padding:16px 20px;border-radius:var(--shape-tile);
  background:var(--surface);box-shadow:var(--i1);
}
@media(max-width:720px){.cpt-row{grid-template-columns:1fr;gap:12px;}}
.cpt-ticket{display:flex;flex-direction:column;gap:2px;}
.cpt-lab{font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-2);}
.cpt-ticket strong{font-family:'Urbanist';font-weight:800;font-size:22px;letter-spacing:-0.02em;}

.cpt-bars{display:flex;flex-direction:column;gap:9px;}
.cpt-line{display:grid;grid-template-columns:74px 1fr 148px;gap:14px;align-items:center;}
@media(max-width:720px){.cpt-line{grid-template-columns:66px 1fr 120px;gap:10px;}}
.cpt-name{font-size:12px;font-weight:600;color:var(--text-2);}
.cpt-track{
  display:block;height:10px;border-radius:var(--shape-control);overflow:hidden;
  background:var(--surface);box-shadow:var(--i0);
}
.cpt-fill{display:block;height:100%;border-radius:var(--shape-control);transition:width 520ms var(--ease-neu);}
.cpt-fill-aura{background:linear-gradient(90deg,#8A73F0,#5B3FD6);}
.cpt-fill-mine{background:linear-gradient(90deg,#C9C2DE,#A79FC4);}
.cpt-val{
  font-size:13.5px;font-weight:650;color:var(--text-2);text-align:right;
  white-space:nowrap;
}
.cpt-val em{font-style:normal;font-weight:500;font-size:12px;opacity:.75;}
.cpt-val.cpt-win{color:var(--mint-700,#0C6045);}

.cpt-insight{
  margin-top:var(--s4);padding:20px 24px;border-radius:var(--shape-tile);
  background:var(--surface);box-shadow:var(--i1);
  font-size:14px;line-height:1.6;color:var(--text-2);
}
.cpt-insight strong{color:var(--text);}

/* ==========================================================================
   Grenzen
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .card-hover,.split-card,.shot,.step,.btn,.icon-tile,.price-card,
  .flow-item,.pill,.nav-links a,.footer li a{transition:none !important;}
  .card-hover:hover,.split-card:hover,.shot:hover,.step:hover,.btn:hover,
  .icon-tile:hover,.price-card:hover,.flow-item:hover,.pill:hover{transform:none !important;}
  .card-hover:hover .icon,.split-card:hover .icon-lg{transform:none !important;}
  .shot:hover img{transform:none !important;}
}
@media(hover:none){
  .card-hover:hover,.split-card:hover,.shot:hover,.step:hover,
  .price-card:hover,.flow-item:hover,.icon-tile:hover{transform:none;}
  .card-hover:hover::before,.card-hover:hover::after,
  .split-card:hover::before,.split-card:hover::after,
  .shot:hover::before,.step:hover::before,.step:hover::after,
  .price-card:hover::before,.price-card:hover::after,
  .flow-item:hover::before,.flow-item:hover::after,
  .icon-tile:hover::before,.icon-tile:hover::after{opacity:0;}
}
@media(max-width:640px){
  :root{
    --x3:-9px -9px 20px var(--hi), 9px 9px 20px var(--lo);
    --x4:-13px -13px 30px var(--hi), 13px 14px 30px var(--lo);
    --i3:inset -7px -7px 16px var(--hi), inset 7px 7px 16px var(--lo);
  }
  .btn{width:auto;}
}