/* Indoor Superkart GmbH – zentrale Styles Diese Datei wird von allen Seiten geladen. Farben/Schriften kommen aus der Tailwind-Konfiguration im jeder Seite. */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background-color: #fafafa; color: #1a1a1a; overflow-x: hidden; } .font-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } .animate-on-scroll { opacity: 0; } .animate-on-scroll.animated { animation: fadeInUp 0.8s ease-out forwards; } .animate-scale.animated { animation: scaleIn 0.6s ease-out forwards; } .animate-left.animated { animation: slideInLeft 0.8s ease-out forwards; } .animate-right.animated { animation: slideInRight 0.8s ease-out forwards; } /* Hero Parallax */ .hero-parallax { transform: translateZ(0); will-change: transform; } /* Button Effects */ .btn-primary { background: linear-gradient(135deg, #aa0000 0%, #880000 100%); position: relative; overflow: hidden; transition: all 0.3s ease; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(170, 0, 0, 0.4); } .btn-secondary { background: #1a1a1a; transition: all 0.3s ease; } .btn-secondary:hover { background: #2a2a2a; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* Card Hover Effects */ .card-hover { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); } /* Racing Stripe */ .racing-stripe { background: repeating-linear-gradient( -45deg, #aa0000, #aa0000 10px, #1a1a1a 10px, #1a1a1a 20px ); } /* Checkered Pattern */ .checkered { background-image: linear-gradient(45deg, #1a1a1a 25%, transparent 25%), linear-gradient(-45deg, #1a1a1a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a1a1a 75%), linear-gradient(-45deg, transparent 75%, #1a1a1a 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } /* Nav Scroll Effect */ .nav-scrolled { background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } /* Image Hover */ .img-zoom { overflow: hidden; } .img-zoom img { transition: transform 0.6s ease; } .img-zoom:hover img { transform: scale(1.08); } /* Glow Effect */ .glow-red { box-shadow: 0 0 40px rgba(170, 0, 0, 0.3); } /* Speed Lines */ .speed-lines::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #aa0000, transparent); transform: translateY(-50%); animation: speedLine 2s ease-in-out infinite; } @keyframes speedLine { 0%, 100% { opacity: 0; transform: translateX(-100%); } 50% { opacity: 1; } 100% { transform: translateX(100%); } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #aa0000; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #880000; } /* Mobile Menu */ .mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; } .mobile-menu.open { transform: translateX(0); } /* Form Focus */ .form-input:focus { outline: none; border-color: #aa0000; box-shadow: 0 0 0 3px rgba(170, 0, 0, 0.1); } /* Counter Animation */ .counter { font-variant-numeric: tabular-nums; } /* ===== Floating Call Button (Anruf-Button unten rechts) ===== */ .call-fab{position:fixed;right:20px;bottom:20px;z-index:9990;display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:9999px;background:#aa0000;box-shadow:0 6px 22px rgba(0,0,0,.22);color:#fff;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;animation:fabIn .4s ease both .4s} .call-fab:hover{transform:scale(1.06);box-shadow:0 10px 28px rgba(0,0,0,.28)} .call-fab svg{width:30px;height:30px;display:block} .call-fab::before{content:"";position:absolute;inset:0;border-radius:9999px;background:#aa0000;z-index:-1;animation:fabPulse 2.6s ease-out infinite} .call-fab::after{content:attr(data-label);position:absolute;right:70px;white-space:nowrap;background:#111827;color:#fff;font:600 13px/1 system-ui,-apple-system,sans-serif;padding:9px 12px;border-radius:9px;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease} .call-fab:hover::after{opacity:1;transform:translateX(0)} @keyframes fabIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} @keyframes fabPulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.7);opacity:0}100%{opacity:0}} @media (max-width:640px){.call-fab::after{display:none}} @media print{.call-fab{display:none!important}} @media (prefers-reduced-motion:reduce){.call-fab,.call-fab::before{animation:none}} /* Mobile-Menü-Button: Farbe an Scroll-Zustand anpassen (Sichtbarkeit) */ #mobile-menu-btn{transition:color .3s ease} /* Aktive Seite im Menü hervorheben (rot, bleibt rot beim Scrollen) */ .nav-active{color:#aa0000 !important;font-weight:600} /* ===== Bildslider (Karussell) ===== */ .slider{position:relative;overflow:hidden;border-radius:1rem;background:#111;touch-action:pan-y} .slider-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform;touch-action:pan-y} .slider-slide{min-width:0;flex:0 0 auto;width:100%;display:block;aspect-ratio:3/2;object-fit:cover;cursor:zoom-in;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y} .slider-prev,.slider-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:9999px;background:rgba(0,0,0,.45);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:2} .slider-prev:hover,.slider-next:hover{background:#aa0000} .slider-prev{left:14px} .slider-next{right:14px} .slider-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:2} .slider-dot{width:9px;height:9px;border-radius:9999px;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:background .2s,transform .2s} .slider-dot.is-active{background:#aa0000;transform:scale(1.3)} @media (max-width:640px){.slider-prev,.slider-next{width:38px;height:38px;font-size:22px}} /* ===== Bild-Lightbox (Vergrößern beim Klick/Tap) ===== */ .imglb{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,10,10,.94);touch-action:none;animation:imglbIn .2s ease} .imglb[hidden]{display:none} .imglb-img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none} .imglb-close,.imglb-prev,.imglb-next{position:absolute;display:flex;align-items:center;justify-content:center;border:0;border-radius:9999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;line-height:1;transition:background .2s} .imglb-close:hover,.imglb-prev:hover,.imglb-next:hover{background:#aa0000} .imglb-close{top:16px;right:20px;width:46px;height:46px;font-size:30px} .imglb-prev,.imglb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px} .imglb-prev{left:16px} .imglb-next{right:16px} .imglb-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:14px;font-weight:600;letter-spacing:.03em} @keyframes imglbIn{from{opacity:0}to{opacity:1}} @media (max-width:640px){.imglb-close{top:10px;right:12px;width:42px;height:42px;font-size:26px}.imglb-prev,.imglb-next{width:44px;height:44px;font-size:26px}} /* ===== Cookie-Consent ===== */ .cc-banner{position:fixed;left:16px;bottom:16px;z-index:9999;width:380px;max-width:calc(100vw - 32px)} .cc-banner[hidden]{display:none} .cc-card{background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 18px 50px -12px rgba(0,0,0,.3);padding:20px 22px} .cc-card h3{font-weight:700;color:#1a1a1a;margin-bottom:6px;font-size:16px} .cc-card p{color:#4b5563;font-size:13.5px;line-height:1.55;margin-bottom:14px} .cc-card p a{color:#aa0000;text-decoration:underline} .cc-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .cc-btn{appearance:none;border:0;border-radius:10px;padding:11px 12px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,transform .12s} .cc-btn:active{transform:translateY(1px)} .cc-primary{background:#aa0000;color:#fff} .cc-primary:hover{background:#880000} .cc-ghost{background:#f3f4f6;color:#374151} .cc-ghost:hover{background:#e5e7eb} .cc-save{width:100%;margin-top:12px} .cc-settings{margin:2px 0 14px;border-top:1px solid #eee;padding-top:12px;display:flex;flex-direction:column;gap:12px} .cc-settings[hidden]{display:none} .cc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer;margin:0} .cc-row span{display:flex;flex-direction:column} .cc-row strong{font-size:13.5px;color:#1a1a1a} .cc-row small{font-size:12px;color:#6b7280;margin-top:2px} .cc-row input{margin-top:3px;width:18px;height:18px;accent-color:#aa0000;flex-shrink:0;cursor:pointer} .cc-fab{position:fixed;left:16px;bottom:16px;z-index:9991;width:46px;height:46px;border-radius:50%;background:#fff;color:#aa0000;border:1px solid #f0dcdc;box-shadow:0 6px 18px -4px rgba(0,0,0,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s} .cc-fab[hidden]{display:none} .cc-fab:hover{transform:translateY(-2px)} .cc-fab svg{width:22px;height:22px} @media (max-width:640px){.cc-banner{left:10px;right:10px;bottom:10px;width:auto}.cc-actions{grid-template-columns:1fr}.cc-fab{left:10px;bottom:10px}} /* ===== Promo-Popup: Neue Kartflotte (ab 21.06) ===== */ /* AKTIONS-POPUP: Soll es weg, in index.html den Block loeschen. */ .kf-overlay{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease} .kf-overlay.kf-open{opacity:1;visibility:visible} .kf-dialog{position:relative;display:grid;grid-template-columns:1fr;width:100%;max-width:880px;max-height:92vh;overflow:hidden;background:#161616;border:1px solid rgba(170,0,0,.4);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(26px) scale(.97);opacity:0;transition:transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .4s ease} .kf-overlay.kf-open .kf-dialog{transform:none;opacity:1} .kf-close{position:absolute;top:12px;right:12px;z-index:6;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9999px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:background .2s ease,transform .25s ease} .kf-close:hover{background:#aa0000;transform:rotate(90deg)} .kf-media{position:relative;min-height:280px;background:radial-gradient(ellipse 70% 60% at 50% 46%,#33312f 0%,#1a1918 55%,#121110 100%);overflow:hidden;display:flex;align-items:center;justify-content:center} .kf-media img{display:block;width:100%;height:100%;object-fit:contain;padding:24px;filter:drop-shadow(0 20px 32px rgba(0,0,0,.6))} .kf-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,17,16,.35) 0%,transparent 22%,transparent 70%,rgba(18,17,16,.85) 100%)} .kf-ribbon{position:absolute;left:0;bottom:18px;z-index:2;display:inline-block;background:#aa0000;color:#fff;font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;font-size:26px;line-height:1;padding:9px 18px 7px;box-shadow:0 8px 22px rgba(0,0,0,.45)} .kf-flag{position:absolute;top:0;left:0;right:0;height:14px;z-index:2;background:repeating-linear-gradient(45deg,#fff 0 14px,#1a1a1a 14px 28px);opacity:.9} .kf-body{padding:30px 28px 32px;color:#fff} .kf-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(170,0,0,.18);border:1px solid rgba(170,0,0,.45);color:#ff6b6b;border-radius:9999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px} .kf-pill .kf-dot{width:8px;height:8px;border-radius:9999px;background:#aa0000;animation:fabPulse 2.6s ease-out infinite,kfDot 1.4s ease-in-out infinite} @keyframes kfDot{0%,100%{opacity:1}50%{opacity:.4}} .kf-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,6vw,52px);line-height:.92;margin:0 0 12px} .kf-title span{color:#ff3b3b} .kf-text{color:#cfcfcf;font-size:15px;line-height:1.6;margin:0 0 18px} .kf-list{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px} .kf-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:#e5e5e5;line-height:1.35} .kf-list svg{width:18px;height:18px;flex:0 0 18px;color:#aa0000;margin-top:1px} .kf-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;background:linear-gradient(135deg,#aa0000 0%,#880000 100%);color:#fff;font-weight:700;font-size:16px;padding:15px 24px;border-radius:12px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease} .kf-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(170,0,0,.45)} .kf-note{margin:14px 0 0;text-align:center;font-size:12.5px;color:#9a9a9a} .kf-note a{color:#cfcfcf;text-decoration:underline;cursor:pointer} @media (min-width:768px){ .kf-dialog{grid-template-columns:1fr 1fr} .kf-media{min-height:100%} .kf-media::after{background:linear-gradient(90deg,transparent 72%,rgba(18,17,16,.85) 100%)} .kf-body{padding:42px 38px} } @media (max-width:767px){ .kf-media{min-height:300px;max-height:46vh} .kf-list{grid-template-columns:1fr} .kf-flag{display:none} } @media (prefers-reduced-motion:reduce){ .kf-overlay,.kf-dialog{transition:opacity .2s ease} .kf-dialog{transform:none} .kf-close:hover{transform:none} .kf-pill .kf-dot{animation:none} }