﻿/* Fiat: von rechts rein nach links, bleibt halb sichtbar */
  @keyframes carDriveLeft {
   0%   { transform: translateY(-50%) translateX(110vw); }
   88%  { transform: translateY(-50%) translateX(-54%); }
   100% { transform: translateY(-50%) translateX(-50%); }
  }
  /* Range Rover: auch von rechts nach links, startet nach dem Fiat */
  @keyframes carDriveRight {
   0%   { transform: translateY(-50%) translateX(110vw); }
   88%  { transform: translateY(-50%) translateX(48%); }
   100% { transform: translateY(-50%) translateX(50%); }
  }
  .car-drive-left {
   animation: carDriveLeft 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  }
  .car-drive-right {
   animation: carDriveRight 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  }
  .hero-car {
   height: 74vh;
  }
  @media (max-width: 1024px) {
   .hero-car { height: 62vh; }
  }
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes pulse-glow { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
  @keyframes moveUp { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }
  @keyframes glow { from { box-shadow: 0 0 10px rgba(16,185,129,0.5); } to { box-shadow: 0 0 30px rgba(16,185,129,0.2); } }
  @keyframes fillGreenDiagonal {
   0% {
   background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0) 60%);
   box-shadow: 0 0 20px rgba(16,185,129,0.4);
   }
   80% {
   background: linear-gradient(135deg, rgba(16,185,129,0.85) 80%, rgba(16,185,129,0.18) 100%);
   }
   100% {
   background: linear-gradient(135deg, rgba(16,185,129,0.85) 100%, rgba(16,185,129,0.85) 100%);
   box-shadow: 0 0 30px rgba(16,185,129,0.25);
   }
  }
  body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }
  main { min-height: 100vh; }
  .animate-fadeInUp { animation: fadeInUp 0.8s ease-out; }
  .animate-slideInLeft { animation: slideInLeft 0.8s ease-out; }
  .animate-slideInRight { animation: slideInRight 0.8s ease-out; }
  .animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }
  .animate-moveUp { animation: moveUp 2s ease-in-out infinite; }
  .glow-btn:active { animation: glow 0.4s ease-out; }
  .feature-card {
   position: relative;
   border: 2px solid rgba(16,185,129,0.4);
   box-shadow: 0 0 15px rgba(16,185,129,0.3), inset 0 0 15px rgba(16,185,129,0.05);
   border-radius: 20px !important;
   overflow: hidden;
   transition: color 0.3s, box-shadow 0.4s;
  }
  .feature-card::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 18px;
   background: linear-gradient(135deg, rgba(16,185,129,0.95) 0%, rgba(16,185,129,0.85) 100%);
   transform: scaleX(0) scaleY(0);
   transform-origin: 0 0;
   transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 1;
  }
  .feature-card:hover::before {
   transform: scaleX(1) scaleY(1);
  }
  .feature-card, .feature-card * {
   position: relative;
   z-index: 2;
  }
  .feature-card:hover, .feature-card:hover * {
   color: #fff !important;
   transition: color 0.15s;
  }
  .page { display: none !important; }
  .page.active { display: block !important; }
  .fade-in { animation: fadeInUp 0.6s ease-out; }
  .list-select {
   cursor: pointer;
  }
  .list-select option {
   padding: 8px 10px;
   background: #ffffff;
  }
  .list-select option:hover,
  .list-select option:focus {
   background: #e5e7eb;
   color: #0f172a;
  }
  .live-buy-wrap {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.35rem;
   text-align: center;
   width: 100%;
  }
  .live-buy-label,
  .live-buy-word {
   font-size: clamp(1.35rem, 2.6vw, 2.05rem);
   font-weight: 800;
   line-height: 1.25;
  }
  .live-buy-word {
   color: #10B981;
   display: inline-block;
   max-width: 100%;
   text-align: center;
   transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .live-buy-word.changing {
   opacity: 0;
   transform: translateY(6px);
  }
  .cta-phone-wrap {
   width: min(100%, 820px);
   margin: 1.25rem auto 1.5rem;
   position: relative;
  }
  .cta-phone-wrap::after {
   content: none;
  }
  .cta-phone-image {
   width: 100%;
   display: block;
   border-radius: 0;
   box-shadow: none;
   -webkit-mask-image: none;
   mask-image: none;
  }
  .footer-landing-links button {
   white-space: nowrap;
   line-height: 1.2;
   text-align: left;
   display: block;
   width: 100%;
  }
  .contact-shell {
   background: #f1f5f9;
   border-radius: 1.5rem;
   padding: 1.25rem;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .contact-card {
   background: #ffffff;
   border-radius: 1rem;
   border: 1px solid #e2e8f0;
   box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  }
  .contact-card-blue {
   background: linear-gradient(140deg, #0F2A66 0%, #0F172A 100%);
   color: #fff;
   border: none;
  }
  .contact-form-input {
   width: 100%;
   border: 1px solid #e2e8f0;
   border-radius: 0.7rem;
   background: #f8fafc;
   padding: 0.8rem 0.9rem;
   color: #0f172a;
   outline: none;
  }
  .contact-form-input:focus {
   border-color: #10B981;
   background: #ffffff;
   box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
  }
  .contact-mini-label {
   font-size: 0.67rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #64748b;
   font-weight: 700;
   margin-bottom: 0.35rem;
  }
  .contact-map {
   border-radius: 1rem;
   background:
   radial-gradient(circle at 60% 40%, rgba(16,185,129,0.22) 0%, rgba(16,185,129,0) 48%),
   repeating-linear-gradient(30deg, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.55) 2px, transparent 2px, transparent 32px),
   repeating-linear-gradient(120deg, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 2px, transparent 2px, transparent 46px),
   linear-gradient(135deg, #2f8da0 0%, #4da8b5 50%, #257f90 100%);
   min-height: 280px;
   position: relative;
   overflow: hidden;
  }
  .contact-map-pin {
   position: absolute;
   left: 52%;
   top: 56%;
   transform: translate(-50%, -50%);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 999px;
   background: #65a30d;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   box-shadow: 0 8px 24px rgba(15,23,42,0.35);
  }
  .vorteile-section {
   position: relative;
  }
  /* ===== ÜBER UNS PAGE ===== */
  @keyframes floatBlob { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-20px) scale(1.05);} 66%{transform:translate(-20px,15px) scale(0.97);} }
  @keyframes countUp { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
  @keyframes shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
  @keyframes drawLine { from{width:0;} to{width:100%;} }
  @keyframes rotateSlow { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  .ub-reveal { opacity:0; transform:translateY(24px); transition: opacity 0.38s cubic-bezier(.16,1,.3,1), transform 0.38s cubic-bezier(.16,1,.3,1); }
  .ub-reveal.visible { opacity:1; transform:translateY(0); }
  .ub-reveal-left { opacity:0; transform:translateX(-30px); transition: opacity 0.38s cubic-bezier(.16,1,.3,1), transform 0.38s cubic-bezier(.16,1,.3,1); }
  .ub-reveal-left.visible { opacity:1; transform:translateX(0); }
  .ub-reveal-right { opacity:0; transform:translateX(30px); transition: opacity 0.38s cubic-bezier(.16,1,.3,1), transform 0.38s cubic-bezier(.16,1,.3,1); }
  .ub-reveal-right.visible { opacity:1; transform:translateX(0); }
  .ub-glass { background:rgba(255,255,255,0.04); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); }
  .ub-glass-green { background:rgba(16,185,129,0.08); backdrop-filter:blur(20px); border:1px solid rgba(16,185,129,0.25); }
  .ub-white-card { transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
  .ub-white-card:hover { box-shadow: 0 8px 32px rgba(16,185,129,0.18); border-color: rgba(16,185,129,0.4) !important; transform: translateY(-3px); }
  .ub-service-card { transition: all 0.3s cubic-bezier(.16,1,.3,1); border:1px solid rgba(255,255,255,0.08); }
  .ub-service-card:hover { background:rgba(16,185,129,0.12) !important; border-color:rgba(16,185,129,0.5); transform:translateY(-4px); box-shadow:0 20px 40px rgba(16,185,129,0.15); }
  @keyframes ubVehIn { from{opacity:0;transform:translateY(18px) scale(0.95);} to{opacity:1;transform:translateY(0) scale(1);} }
  .ub-veh-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:20px 8px 14px; text-align:center; cursor:pointer; transition:transform 0.22s cubic-bezier(.16,1,.3,1),box-shadow 0.22s cubic-bezier(.16,1,.3,1),border-color 0.15s,background 0.15s; will-change:transform; -webkit-tap-highlight-color:transparent; user-select:none; opacity:0; }
  .ub-veh-card.ub-veh-loaded { animation:ubVehIn 0.35s cubic-bezier(.16,1,.3,1) forwards; }
  .ub-veh-card:hover { transform:translateY(-10px); box-shadow:0 20px 40px rgba(16,185,129,0.3),inset 0 0 0 1px rgba(16,185,129,0.35); border-color:rgba(16,185,129,0.7); background:rgba(16,185,129,0.1); }
  .ub-veh-card svg { transition:filter 0.2s ease,transform 0.2s ease; }
  .ub-veh-card:hover svg { filter:drop-shadow(0 0 8px rgba(16,185,129,0.65)); transform:scale(1.08) translateY(-2px); }
  .ub-veh-card:active,.ub-veh-card.ub-touch { transform:translateY(-6px); box-shadow:0 14px 32px rgba(16,185,129,0.4),inset 0 0 0 1px #10B981; border-color:#10B981; background:rgba(16,185,129,0.15); }
  .ub-veh-card:active svg,.ub-veh-card.ub-touch svg { filter:drop-shadow(0 0 10px rgba(16,185,129,0.85)); transform:scale(1.06); }
  .ub-step-line { background:linear-gradient(90deg,#10B981,rgba(16,185,129,0.2)); height:2px; }
  .ub-shimmer-btn { background:linear-gradient(90deg,#10B981 0%,#34d399 40%,#10B981 60%,#059669 100%); background-size:200% 100%; transition:background-position 0.4s; }
  .ub-shimmer-btn:hover { background-position:-100% 0; animation:shimmer 1s infinite; }
  .ub-table-row:hover td { background:rgba(16,185,129,0.06) !important; }
  .ub-glass .overflow-x-auto::-webkit-scrollbar { height:5px; }
  .ub-glass .overflow-x-auto::-webkit-scrollbar-track { background:rgba(255,255,255,0.04); border-radius:99px; }
  .ub-glass .overflow-x-auto::-webkit-scrollbar-thumb { background:#10B981; border-radius:99px; }
  .ub-check { color:#10B981; }
  .ub-cross { color:#ef4444; }
  .ub-white-card { background:#fff; border:1px solid #f1f5f9; border-radius:1.5rem; box-shadow:0 4px 24px rgba(15,23,42,0.07); transition:box-shadow 0.25s ease, transform 0.25s cubic-bezier(.16,1,.3,1); }
  .ub-white-card:hover { box-shadow:0 16px 48px rgba(15,23,42,0.13); transform:translateY(-4px); }
  .ub-partial { color:#f59e0b; }
  .ub-float-blob { animation:floatBlob 8s ease-in-out infinite; }
  .car-carousel-strip {
   position: relative;
   width: 100%;
   height: 165px;
   margin-top: 2rem;
   background: #f8fafc;
   overflow: hidden;
   z-index: 5;
  }
  .car-carousel-track {
   display: flex;
   align-items: flex-end;
   gap: 0;
   height: 155px;
   width: max-content;
   animation: carStripMove 40s linear infinite;
   will-change: transform;
  }
  .car-carousel-group {
   display: flex;
   align-items: flex-end;
   gap: 40px;
   height: 155px;
   min-width: max-content;
   padding-right: 40px;
  }
   .car-wrapper {
   flex: 0 0 220px;
   width: 220px;
   height: 145px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   }
   .car-wrapper img {
   width: 210px;
   height: 145px;
   object-fit: contain;
   object-position: bottom;
   display: block;
   }
  @keyframes carStripMove {
   from { transform: translateX(-50%); }
   to   { transform: translateX(0); }
  }

/* ===== */:root{--ag-green:#10B981;--ag-green-dark:#059669;--ag-dark:#0F172A;--ag-wa:#25D366}
   #steps{background:#f8fafc}
   .ag-steps-grid{display:grid;grid-template-columns:1fr;gap:24px;position:relative}
   @media(min-width:1024px){
   .ag-steps-grid{grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:start;gap:0}
   }
   .ag-step{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,0.06);border:1px solid #e2e8f0;transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;opacity:0;transform:translateY(28px)}
   .ag-step.visible{opacity:1;transform:translateY(0)}
   .ag-step:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(16,185,129,0.14);border-color:rgba(16,185,129,0.35)}
   .ag-step-img{width:100%;height:210px;object-fit:cover;display:block}
   .ag-step-body{padding:24px 26px 28px}
   .ag-step-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--ag-dark);color:#fff;font-size:0.8rem;font-weight:900;border-radius:10px;margin-bottom:14px;letter-spacing:0.04em}
   .ag-step-title{font-size:1.25rem;font-weight:800;color:var(--ag-dark);margin-bottom:8px;letter-spacing:-0.3px}
   .ag-step-desc{font-size:0.9rem;color:#64748b;line-height:1.7;margin-bottom:16px}
   .ag-step-list{list-style:none;display:flex;flex-direction:column;gap:10px}
   .ag-step-list li{display:flex;align-items:flex-start;gap:10px;font-size:0.875rem;color:#475569;line-height:1.6}
   .ag-step-list li .ag-li-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.9rem}
   .ag-step-list li .ag-li-icon.green{background:rgba(16,185,129,0.1)}
   .ag-step-list li .ag-li-icon.wa{background:rgba(37,211,102,0.12)}
   .ag-step-list li strong{color:#0F172A;font-weight:600;display:block;font-size:0.88rem}
   .ag-step-list li span{color:#64748b;font-size:0.82rem}
   .ag-check-list{list-style:none;display:flex;flex-direction:column;gap:8px}
   .ag-check-list li{display:flex;align-items:flex-start;gap:9px;font-size:0.875rem;color:#475569;line-height:1.6}
   .ag-check-list li::before{content:'';width:18px;height:18px;background:rgba(16,185,129,0.12);border-radius:50%;display:flex;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:11px;margin-top:2px}
   .ag-pay-options{background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.18);border-radius:12px;padding:14px 16px;margin-top:14px;display:flex;flex-direction:column;gap:7px}
   .ag-pay-options p{font-size:0.8rem;color:#059669;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px}
   .ag-pay-opt{display:flex;align-items:center;gap:8px;font-size:0.875rem;color:#334155}
   .ag-pay-opt::before{content:'';width:6px;height:6px;background:var(--ag-green);border-radius:50%;flex-shrink:0}
   /* Desktop arrow connector */
   .ag-connector{display:none}
   @media(min-width:1024px){
   .ag-connector{display:flex;align-items:center;justify-content:center;padding-top:105px}
   .ag-connector svg{color:#cbd5e1}
   }
   /* Step 3 CTA */
   .ag-cta-wa{display:inline-flex;align-items:center;gap:8px;background:var(--ag-wa);color:#fff;font-size:0.9rem;font-weight:700;padding:12px 22px;border-radius:12px;margin-top:18px;transition:background 0.2s,transform 0.2s;text-decoration:none}
   .ag-cta-wa:hover{background:#1ebe5d;transform:translateY(-2px)}

/* ===== */@media (max-width: 767px) {
   .ub-hero-bg { background-position: 35% -80px !important; }
   }

/* ===== */@media (max-width: 767px) {
   .ub-hero-gradient { background: linear-gradient(to bottom, rgba(15,23,42,0.2) 0%, rgba(15,23,42,0.3) 55%, rgba(15,23,42,0.85) 80%, rgba(15,23,42,1) 92%) !important; }
   }

/* ===== */@keyframes cookieFadeIn {
   from { opacity:0; transform:translateX(-50%) translateY(16px); }
   to   { opacity:1; transform:translateX(-50%) translateY(0); }
  }

/* ===== Mobile hero — Fiat oben rechts / Rover unten links ===== */
@keyframes carFiatMobileIn {
  0%   { transform: translateX(100vw); }
  88%  { transform: translateX(-1%); }
  100% { transform: translateX(0); }
}
@keyframes carRoverMobileIn {
  0%   { transform: translateX(-100vw); }
  88%  { transform: translateX(1%); }
  100% { transform: translateX(0); }
}
@media (max-width: 767px) {
  #car-rover {
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    width: max-content !important;
    height: auto !important;
    opacity: 0.65 !important;
  }
  #car-fiat {
    right: auto !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: max-content !important;
    height: auto !important;
    opacity: 0.65 !important;
  }
  #car-fiat img,
  #car-rover img {
    height: 72vh !important;
    width: auto !important;
    max-width: none !important;
    mix-blend-mode: normal !important;
    filter: brightness(0.75) !important;
  }
  .car-drive-left  { animation: carRoverMobileIn 2.4s cubic-bezier(0.16,1,0.3,1) 0.3s both !important; }
  .car-drive-right { animation: carFiatMobileIn  2.4s cubic-bezier(0.16,1,0.3,1) 0.3s both !important; }
}
.faq-item{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;margin-bottom:10px;background:#fff}
.faq-q{width:100%;background:none;border:none;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;font-size:.98rem;font-weight:600;color:#0F172A;cursor:pointer;text-align:left;gap:12px;transition:background .15s;font-family:inherit}
.faq-q:hover{background:#f8fafc}
.faq-icon{width:24px;height:24px;border-radius:50%;background:#10B981;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s;font-size:1.1rem;line-height:1}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 20px}
.faq-item.open .faq-a{max-height:300px;padding:0 20px 18px}
.faq-a p{font-size:.94rem;color:#475569;line-height:1.75;margin:0}
