/* ── FUTURA 100 — Self-hosted (DSGVO-konform, no external requests) ── */
@font-face { font-family: 'futura-100'; src: url('/public/fonts/futura-100-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'futura-100'; src: url('/public/fonts/futura-100-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'futura-100'; src: url('/public/fonts/futura-100-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'futura-100'; src: url('/public/fonts/futura-100-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'futura-100'; src: url('/public/fonts/futura-100-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'futura-100'; src: url('/public/fonts/futura-100-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'futura-100-book'; src: url('/public/fonts/futura-100-book-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'futura-100-book'; src: url('/public/fonts/futura-100-book-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ── PREMIUM FX ── */
.word-reveal { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.22em; }
.word-reveal-inner { display: inline-block; will-change: transform; }
.reveal, .reveal-up, .stagger-children > * {
    will-change: transform, opacity;
}
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible, .reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}
.stagger-children > * {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.visible > * { opacity: 1; transform: translateY(0); will-change: auto; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(n+6) { transition-delay: 0.5s; }
html { scroll-behavior: smooth; overflow-x: clip; }

/* ── PAGE LOADER ── */
.page-loader { position: fixed; inset: 0; z-index: 99999; background: var(--uci-black); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s; }
.page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-logo { margin-bottom: 2rem; opacity: 0; animation: loaderFadeIn 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.loader-bar { width: 120px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; margin: 0 auto; overflow: hidden; }
.loader-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent, #DFB129), #F5D60A); border-radius: 2px; animation: loaderProgress 1.2s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes loaderFadeIn { to { opacity: 1; } }
@keyframes loaderProgress { to { width: 100%; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
dialog:not([open]) { display: none !important; }
:root {
    --font-display: 'futura-100', sans-serif;
    --font-body: 'futura-100-book', 'futura-100', sans-serif;
    --uci-blue: #006BB6;
    --uci-red: #CC0923;
    --uci-black: #111111;
    --uci-yellow: #F5D60A;
    --uci-green: #008C00;
    --bg: #f4efe8;
    --surface: #faf6f0;
    --surface2: #ede6dc;
    --text: #1a1612;
    --muted: #6b7280;
    --border: #e0d8cb;
    --accent: #DFB129;
    --accent-hover: #C59A1D;
    --nav-bg: rgba(255,255,255,0.92);
    --section-gap: clamp(4rem, 8vw, 7rem);
    --side-pad: clamp(1.25rem, 6vw, 8%);
}

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--accent), var(--uci-yellow), var(--accent)); z-index: 9999; transition: width 0.05s linear; pointer-events: none; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    overflow-x: clip;
    font-size: 16px;
}

h1, h2, h3, h4 { font-family: var(--font-display); }

.section-label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--accent);
    margin-bottom: 1.25rem;
    display: block;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: var(--text);
}
.section-sub {
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    max-width: 540px;
    line-height: 1.75;
    letter-spacing: 0.005em;
}

/* ── RAINBOW BAR ── */
.rainbow-bar { display: flex; height: 4px; width: 100%; }
.rainbow-bar span { flex: 1; }
.rb1 { background: var(--uci-blue); }
.rb2 { background: var(--uci-red); }
.rb3 { background: var(--uci-black); }
.rb4 { background: var(--uci-yellow); }
.rb5 { background: var(--uci-green); }

/* ── NAV ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s, padding 0.4s; }
.nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); box-shadow: 0 4px 30px rgba(0,0,0,0.06); }
.nav-rainbow { display: flex; height: 3px; }
.nav-rainbow span { flex: 1; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--side-pad); height: 80px; max-width: 1400px; margin: 0 auto; transition: height 0.4s ease; }
.nav.scrolled .nav-inner { height: 64px; }
.nav-logo { position: relative; display: flex; align-items: center; text-decoration: none; height: 76px; overflow: hidden; transition: height 0.4s ease; }
.nav-logo img { height: 76px; width: auto; transition: height 0.4s ease, opacity 0.4s ease; }
.nav.scrolled .nav-logo { height: 38px; }
.nav-logo .logo-color { position: absolute; left: 0; top: 0; opacity: 0; mix-blend-mode: multiply; }
.nav.scrolled .nav-logo img { height: 38px; }
.nav.scrolled .nav-logo .logo-white { opacity: 0; }
.nav.scrolled .nav-logo .logo-color { opacity: 1; }

.nav-links { display: flex; gap: 1.5rem; list-style: none; align-items: center; }
.nav-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: color 0.3s; white-space: nowrap; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 2px; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav.scrolled .nav-links a { color: var(--muted); }
.nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a.active { color: var(--text); }
.nav-cta { background: transparent; color: #fff; padding: 0.5rem 1.3rem; border-radius: 50px; font-weight: 700; font-size: 0.82rem; text-decoration: none; transition: all 0.4s; white-space: nowrap; border: 1.5px solid rgba(255,255,255,0.3); }
.nav-cta:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(255,255,255,0.1); }
.nav.scrolled .nav-cta { background: var(--accent); color: var(--uci-black); border-color: var(--accent); }
.nav.scrolled .nav-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(223,177,41,0.3); }

/* ── Nav Dropdown ── */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.8); font-size: 0.82rem; font-weight: 600; font-family: inherit; display: flex; align-items: center; gap: 4px; padding: 0; transition: color 0.3s; }
.nav-dropdown-toggle svg { transition: transform 0.3s ease; }
.nav-dropdown:hover .nav-dropdown-toggle svg, .nav-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown-toggle:hover, .nav-dropdown:hover .nav-dropdown-toggle { color: #fff; }
.nav.scrolled .nav-dropdown-toggle { color: var(--muted); }
.nav.scrolled .nav-dropdown:hover .nav-dropdown-toggle { color: var(--text); }
.nav-dropdown-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 180px; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05); list-style: none; padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.nav-dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-dropdown-menu li a { display: block; padding: 0.6rem 1rem; color: var(--text) !important; font-size: 0.85rem; font-weight: 500; border-radius: 8px; transition: background 0.2s; }
.nav-dropdown-menu li a::after { display: none !important; }
.nav-dropdown-menu li a:hover { background: var(--bg); }

.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #fff; transition: color 0.3s; z-index: 1001; }
.nav.scrolled .nav-hamburger { color: var(--text); }
.nav-hamburger svg { width: 24px; height: 24px; }

/* ── MOBILE FULLSCREEN OVERLAY NAV ── */
.mobile-menu-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; overflow-y: auto; }
.mobile-menu-overlay.open { opacity: 1; pointer-events: all; }
.mobile-menu-overlay ul { list-style: none; text-align: center; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0 !important; flex-shrink: 0; flex-grow: 0; }
.mobile-menu-overlay ul li { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
.mobile-menu-overlay.open ul li { opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.open ul li:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu-overlay.open ul li:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu-overlay.open ul li:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu-overlay.open ul li:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu-overlay.open ul li:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu-overlay.open ul li:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu-overlay.open ul li:nth-child(7) { transition-delay: 0.35s; }
.mobile-menu-overlay.open ul li:nth-child(8) { transition-delay: 0.4s; }
.mobile-menu-overlay.open ul li:nth-child(9) { transition-delay: 0.45s; }
.mobile-menu-overlay ul a { color: #fff; text-decoration: none; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; transition: color 0.3s, transform 0.3s; display: block; padding: 0.65rem 1rem; }
.mobile-menu-overlay ul a:hover { color: var(--accent); transform: translateX(10px); }
.mobile-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: #fff; cursor: pointer; padding: 8px; z-index: 1001; }
.mobile-menu-close svg { width: 32px; height: 32px; }

/* ── HERO (Cinematic Video – Centered Minimal) ── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--uci-black); }
.hero-video-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    /* iOS-Safari-Fallback: zeigt Poster auch wenn video preload-Quirk die
       poster-Frame nicht rendert. Browser zeigt automatisch desktop oder
       mobile-Variante via media-query. */
    background-image: url('/public/video/hero-poster-mobile.webp');
    background-size: cover;
    background-position: center;
    background-color: var(--uci-black);
}
@media (min-width: 801px) {
    .hero-video-bg { background-image: url('/public/video/hero-poster.webp'); }
}
.hero-video-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%); }
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 var(--side-pad); margin-top: 10svh; }
.hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 300; line-height: 1.2; letter-spacing: 0.02em; margin-bottom: 0.6rem; opacity: 1; animation: heroSlideUp 1.2s ease 0.3s both; color: rgba(255,255,255,0.85); text-shadow: 0 1px 20px rgba(0,0,0,0.2); }
.hero-sub { font-size: clamp(0.75rem, 1.2vw, 0.9rem); color: rgba(255,255,255,0.45); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; opacity: 1; animation: heroSlideUp 1.2s ease 0.5s both; margin-bottom: 2.5rem; }
.hero-cta { opacity: 1; animation: heroSlideUp 1s ease 0.6s both; }
.hero-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 0.7rem 2rem; border-radius: 50px; font-weight: 400; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: all 0.25s; font-family: var(--font-display); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); background: transparent; }
.hero-cta a:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.hero-bottom { position: absolute; bottom: 2rem; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; opacity: 1; animation: heroSlideUp 1s ease 0.8s both; }
.btn-primary { color: var(--accent); padding: 0; font-weight: 600; font-size: 1.05rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); border: none; cursor: pointer; font-family: var(--font-display); background: none; }
.btn-primary:hover { gap: 10px; opacity: 1; transform: translateY(-2px); text-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.btn-primary::after { content: '\2192'; font-size: 1.1em; transition: transform 0.3s; }
.btn-primary:hover::after { transform: translateX(5px); }
.btn-outline { border: 1.5px solid var(--border); background: transparent; color: var(--text); padding: 0.85rem 2rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-display); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* Hero-Animation OHNE opacity-Toggle — falls Animation aus irgendeinem Grund
   nicht startet (alter Browser, Race-Condition, kein JS), bleibt der Text
   sichtbar. Nur ein leichter Slide-Up als Enhancement. */
@keyframes heroSlideUp { from { transform: translateY(20px); } to { transform: translateY(0); } }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .hero { min-height: 100svh; }
    .hero-content { padding: 2rem var(--side-pad) 2rem; margin-top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .hero-bottom { bottom: 1.5rem !important; }
    .hero-video-overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.3) 100%); }
    .nav-links { display: none !important; }
    .nav-hamburger { display: block; }
    .welten-grid { grid-template-columns: repeat(3, 1fr) !important; }
    #leasing > div > div:first-child { grid-template-columns: 1fr !important; }
    #werkstatt > div { grid-template-columns: 1fr !important; }
    #anfahrt > div > div { grid-template-columns: 1fr !important; }
    #team > div > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .hero h1 { font-size: 2rem; }
    .btn-primary, .btn-outline { width: 100%; justify-content: center; }
    .welten-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #verleih > div > div:nth-child(3) { grid-template-columns: repeat(2, 1fr) !important; }
    #cafe > div > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
    #team > div > div:last-child { grid-template-columns: 1fr !important; }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── SERVICE HUB (Rose-Style Pills) ── */
.service-hub { padding: 1.5rem var(--side-pad) 0; background: var(--bg); position: relative; z-index: 10; }
.service-hub-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; padding: 1.5rem 0; }
.hub-pill { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); padding: 0.6rem 1.25rem; border-radius: 50px; background: transparent; border: 1px solid var(--border); font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; transition: all 0.2s ease; cursor: pointer; white-space: nowrap; }
.hub-pill:hover { border-color: var(--text); background: var(--text); color: var(--bg); }
.hub-pill svg { width: 14px; height: 14px; transition: transform 0.2s; }
.hub-pill:hover svg { transform: translateX(3px); }
@media (max-width: 768px) { .service-hub-inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1rem; } .service-hub-inner::-webkit-scrollbar { display: none; } }

/* ── TIMELINE (HORIZONTAL PREMIUM) ── */
.timeline-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}
.timeline-nav:hover {
    background: var(--accent);
    color: var(--uci-black);
    border-color: var(--accent);
    transform: translateY(-50%) scale(1.1);
}
.timeline-nav-left { left: 4vw; }
.timeline-nav-right { right: 4vw; }
.timeline-nav.tl-hidden { display: none !important; }
@media (max-width: 768px) {
    .timeline-nav { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; background: rgba(255,255,255,0.2) !important; border-color: rgba(255,255,255,0.35) !important; }
    .timeline-nav.tl-hidden { display: none !important; }
    .timeline-nav svg { width: 22px !important; height: 22px !important; display: block !important; }
    .timeline-nav-left { left: 10px !important; }
    .timeline-nav-right { right: 10px !important; }
}

.timeline-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 2rem;
    padding: 2rem 10vw 4rem 10vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.timeline-scroll-container::-webkit-scrollbar { display: none; }

.timeline-card {
    flex: 0 0 85vw;
    max-width: 380px;
    max-height: 60vh;
    scroll-snap-align: start;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--surface2);
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.4s ease;
}
.timeline-card:hover {
    transform: scale(1.02);
}

.timeline-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.8s ease;
}
.timeline-card:hover .timeline-card-bg {
    transform: scale(1.05);
}

.timeline-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.95) 100%);
    z-index: 2;
    pointer-events: none;
}

.timeline-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    z-index: 10;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}
.timeline-card-play::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}
.timeline-card-play.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.timeline-card:hover .timeline-card-play:not(.is-hidden) {
    transform: translate(-50%, -65%) scale(1.1);
    background: rgba(255,255,255,0.25);
}

.timeline-card-content {
    position: relative;
    z-index: 3;
    padding: 2.5rem;
    color: #fff;
}

.t-year {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 800;
    opacity: 0.9;
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.03em;
}

.t-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.t-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}

.t-badge {
    display: inline-block;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

/* 5 Fahrradwelten Colors for Timeline */
.timeline-card:nth-child(5n+1) .t-year { color: var(--uci-blue); }
.timeline-card:nth-child(5n+2) .t-year { color: var(--uci-red); }
.timeline-card:nth-child(5n+3) .t-year { color: #fff; }
.timeline-card:nth-child(5n+4) .t-year { color: var(--uci-yellow); }
.timeline-card:nth-child(5n+5) .t-year { color: var(--uci-green); }

.timeline-card:nth-child(5n+1) .t-badge { border-color: var(--uci-blue); color: var(--uci-blue); }
.timeline-card:nth-child(5n+2) .t-badge { border-color: var(--uci-red); color: var(--uci-red); }
.timeline-card:nth-child(5n+3) .t-badge { border-color: #fff; color: #fff; }
.timeline-card:nth-child(5n+4) .t-badge { border-color: var(--uci-yellow); color: var(--uci-yellow); }
.timeline-card:nth-child(5n+5) .t-badge { border-color: var(--uci-green); color: var(--uci-green); }

@media (min-width: 900px) {
    .timeline-card { flex: 0 0 35vw; max-width: 600px; aspect-ratio: 4/5; }
    .timeline-scroll-container { padding: 2rem 0 4rem calc(50vw - 550px); }
}

/* ── CAFE SECTION ── */
.cafe-section-wrap { background: var(--surface2); }

/* Bento Image Grid */
.cafe-bento {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 540px;
    gap: 12px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
.cafe-bento-main {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}
.cafe-bento-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}
.cafe-bento-sm {
    position: relative;
    overflow: hidden;
}
.cafe-bento-sm img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.cafe-bento-sm:hover img { transform: scale(1.06); }

@media (max-width: 768px) {
    .cafe-bento {
        grid-template-columns: 1fr;
        grid-template-rows: 320px auto;
    }
    .cafe-bento-main { min-height: 320px; }
    .cafe-bento-side {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 200px;
    }
}
@media (max-width: 480px) {
    .cafe-bento-side {
        grid-template-columns: 1fr;
        grid-template-rows: 180px 180px;
    }
}

/* Features row */
.cafe-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}
.cafe-feat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 1.25rem;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
.cafe-feat:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-3px);
    border-color: var(--accent);
}
svg.cafe-feat-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}
.cafe-feat-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; }
.cafe-feat-sub { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.btn-cafe-ig {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0.85rem 2rem; border-radius: 50px;
    background: transparent; color: var(--text);
    font-weight: 600; font-size: 0.88rem;
    text-decoration: none; transition: all 0.3s;
    border: 1.5px solid var(--border);
    cursor: pointer; font-family: var(--font-body);
}
.btn-cafe-ig:hover {
    border-color: var(--accent); color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(223,177,41,0.15);
}
.btn-cafe-ig svg { stroke: currentColor; }

@media (max-width: 900px) {
    .cafe-bottom { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
    .cafe-bottom { grid-template-columns: 1fr; }
}

/* ── TEAM SECTION ── */
.team-section { background: var(--surface); padding: var(--section-gap) var(--side-pad); }
.team-section > .section-label, .team-section > .section-title, .team-section > .section-sub { text-align: center; }
@media (max-width: 768px) {
    /* Team card stack — handled by JS (moves cards into .team-stack wrapper) */
    .team-stack > div {
        overflow: hidden !important;
    }
    .team-stack > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ── FULL BLEED BREAKOUT ── */
.breakout-section { width: 100%; height: 90svh; min-height: 700px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.breakout-bg { position: absolute; inset: -20% 0; width: 100%; height: 140%; object-fit: cover; z-index: 0; filter: brightness(0.6); }
.breakout-content { position: relative; z-index: 1; text-align: center; color: white; max-width: 900px; padding: 0 20px; }
.breakout-content h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; text-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.breakout-content p { font-size: 1.2rem; opacity: 0.9; margin-bottom: 30px; }

.brand-logo-card {
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.5;
    transition: all 0.4s ease;
    height: 40px;
    min-width: 80px;
    contain: layout style;
}
.brand-logo-card:hover {
    opacity: 1;
    transform: scale(1.08);
}
.brand-logo-card img {
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.4s ease;
    transform: scale(0.85);
}
.brand-logo-card:hover img {
    filter: grayscale(0%);
}
.brand-logo-card span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text);
    letter-spacing: 0.04em;
    white-space: nowrap;
    user-select: none;
}

/* ── Testimonials ── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.testimonial-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.06); }
.testimonial-stars { display: flex; gap: 2px; margin-bottom: 1rem; }
.testimonial-text { font-size: 0.95rem; line-height: 1.7; color: var(--text); margin-bottom: 1.5rem; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--uci-black); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; font-family: var(--font-display); }
.testimonial-author strong { display: block; font-size: 0.9rem; color: var(--text); }
.testimonial-author span { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 768px) {
    .testimonials-grid { grid-template-columns: 1fr !important; }
}

/* ── Welten: 5er Galerie-Strip ── */
.welten-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; max-width: 1400px; margin: 0 auto; padding: 0 var(--side-pad); }

.welt-card-ring { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; min-width: 0; border-radius: 12px; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--border); padding: 1rem; display: flex; flex-direction: column; transform: scale(1) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); perspective: 800px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.welt-card-ring:hover { transform: scale(1.35) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); z-index: 2; box-shadow: 0 30px 80px rgba(0,0,0,0.20); }
.welten-strip:has(.welt-card-ring:hover) .welt-card-ring:not(:hover) { transform: scale(0.92) rotateX(0deg) rotateY(0deg); opacity: 0.6; }

/* UCI color accent line at bottom */
.welt-card-ring::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--wc, var(--accent)); z-index: 4; transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.welt-card-ring:hover::after { transform: scaleX(1); }

.welt-card-ring-img { border-radius: 8px; overflow: hidden; }
.welt-card-ring-img img { width: 100%; height: auto; display: block; }

/* Variante 3: ohne weißen Rahmen, nur das Bild */
.welt-card-ring--naked { background: transparent; border: none; padding: 0; border-radius: 10px; }
.welt-card-ring--naked .welt-card-ring-img { border-radius: 10px; }

.welt-card-name { display: block; text-align: center; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); padding-top: 0.75rem; transition: color 0.3s ease; }
.welt-card-ring:hover .welt-card-name { color: var(--wc, var(--accent)); }

.leasing-logo-card {
    background: transparent;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    min-width: 140px;
    opacity: 0.5;
    transition: all 0.3s ease;
}
.leasing-logo-card:hover {
    opacity: 1;
    transform: scale(1.05);
}
.leasing-logo-card img {
    max-height: 100%;
    max-width: 110px;
    object-fit: contain;
    filter: grayscale(100%) invert(100%) brightness(200%);
    mix-blend-mode: screen;
}

/* ── Bikefitting Section ── */
.bf-section { padding: var(--section-gap) var(--side-pad); background: var(--surface); }

.bf-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(3rem, 6vw, 6rem); align-items: center; max-width: 1300px; margin: 0 auto; }

.bf-content { padding: 1rem 0; }
.bf-text { color: var(--muted); font-size: 1rem; line-height: 1.8; max-width: 480px; margin-bottom: 2.5rem; }
.bf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.bf-free-badge { font-size: 0.8rem; color: var(--uci-green); font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; }

.bf-visual { position: relative; }
.bf-img-wrap { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; }
.bf-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 4s cubic-bezier(0.25, 1, 0.5, 1); }
.bf-img-wrap:hover img { transform: scale(1.04); }
.bf-person { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding-left: 0.25rem; }
.bf-person-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.bf-person-text { display: flex; flex-direction: column; }
.bf-person-name { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--text); }
.bf-person-role { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 2px; }

.bf-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1300px; margin: 0 auto; padding: clamp(2.5rem, 4vw, 4rem) 0 0; }

.bf-price-card { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; cursor: pointer; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }
.bf-price-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.08); }

.bf-price-featured { border-color: var(--uci-blue); border-width: 2px; }
.bf-price-premium { background: linear-gradient(135deg, rgba(194,156,84,0.06) 0%, transparent 100%); border-color: rgba(194,156,84,0.3); }
.bf-price-premium:hover { box-shadow: 0 20px 50px rgba(194,156,84,0.12); }

.bf-price-tag { position: absolute; top: -12px; left: 1.75rem; background: var(--uci-blue); color: #fff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 14px; border-radius: 20px; }

.bf-price-header { margin-bottom: 0.75rem; }
.bf-price-name { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.bf-price-meta { font-size: 0.82rem; color: var(--muted); font-weight: 500; }

.bf-price-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin: 0 0 auto; padding-bottom: 1.25rem; }

.bf-price-cta { font-size: 0.82rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
.bf-price-cta span { color: var(--accent); transition: transform 0.3s ease; }
.bf-price-card:hover .bf-price-cta span { transform: translateX(4px); }

#bikefittingModal {
    padding: 0; border: none; border-radius: 24px; background: transparent; max-width: 1200px; width: 94%; margin: auto; box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
#bikefittingModal::backdrop {
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0;
}

/* Leasing Modal */
#leasingModal { padding: 0; border: none; border-radius: 24px; background: transparent; max-width: 960px; width: 94%; margin: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.4); }
#leasingModal::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; }
dialog[open]#leasingModal { animation: modalFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
dialog[open]#leasingModal::backdrop { animation: backdropFadeIn 0.4s ease forwards; }

dialog[open]#bikefittingModal {
    animation: modalFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
dialog[open]#bikefittingModal::backdrop {
    animation: backdropFadeIn 0.4s ease forwards;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes backdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Bikefitting Modal: 3-column responsive */
@media (max-width: 900px) {
    #bikefittingModal { max-width: 600px !important; }
    #bikefittingModal > div { flex-direction: column !important; }
    #bikefittingModal > div > div { min-width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; }
    #bikefittingModal > div > div:last-child { border-bottom: none !important; }
}

/* ── Leasing Accordion ── */
.leasing-acc { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1.2rem 0; text-align: left; }
.leasing-acc summary { font-weight: 600; font-size: 1.05rem; color: #fff; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s; }
.leasing-acc summary:hover { color: var(--accent); }
.leasing-acc summary::-webkit-details-marker { display: none; }
.leasing-acc summary::after { content: '+'; color: var(--accent); font-size: 1.5rem; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); font-weight: 400; }
.leasing-acc[open] summary::after { transform: rotate(45deg); }
.leasing-acc-content {
    color: rgba(255,255,255,0.55); font-size: 0.95rem; line-height: 1.6; text-align: left;
    overflow: hidden;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.25, 1, 0.5, 1), padding 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
    padding-top: 0;
    opacity: 0;
}
.leasing-acc-content > p { overflow: hidden; margin: 0; }
.leasing-acc[open] .leasing-acc-content {
    grid-template-rows: 1fr;
    padding-top: 1rem;
    opacity: 1;
}
.leasing-acc.closing summary::after { transform: rotate(0deg) !important; }

.modal-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.4); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.3s ease; z-index: 10; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.modal-close-btn:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }

/* Verleih: Kompakter Strip */
/* ── Verleih: Strip ── */
.verleih-strip {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.vr-card {
    flex: 1;
    max-width: 260px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: default;
}
/* Wenn Admin keinen Per-Image-Text/Preis gesetzt hat, fällt vr-card-body
   im PHP-Render weg. Damit die Karte dann nicht einen farbigen Streifen unter
   dem weißen Bild zeigt (Flex-Stretch auf Nachbar-Höhe), wird die ganze Karte
   weiß und nahtlos. */
.vr-card:not(:has(.vr-card-body)) {
    background: #fff;
}
.vr-card:hover {
    transform: scale(1.08);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-color: var(--accent);
    z-index: 2;
}
.verleih-strip:has(.vr-card:hover) .vr-card:not(:hover) {
    opacity: 0.6;
    transform: scale(0.96);
}
.vr-card-img {
    padding: 1.5rem 1rem;
    background: #fff;
    position: relative;
    height: 180px;
}
.vr-card-img img {
    max-width: 100%;
    max-height: 135px;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 1.2s ease-in-out, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.vr-card:hover .vr-card-img img { transform: translate(-50%, -50%) scale(1.08); }
/* Crossfade for cards with multiple images */
.vr-card-img img.fade-out { opacity: 0; }
.vr-card-dots { display: flex; justify-content: center; gap: 6px; padding-bottom: 0.75rem; }
.vr-card-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.4s; }
.vr-card-dots .dot.active { background: var(--accent); }
.vr-card-body { padding: 0.9rem 1rem 1.1rem; position: relative; }
/* Wenn die Karte nur einen statischen Text hat (kein Crossfade pro Bild),
   bleibt vr-card-text static im Flow → braucht keinen reservierten Platz. */
.vr-card-body:has(.vr-card-text:only-child) { min-height: 0; }
.vr-card-body:has(.vr-card-text:only-child) .vr-card-text {
    position: static !important;
    opacity: 1 !important;
    padding: 0 !important;
}
/* Multi-Text-Karten (alte Per-Image-Labels): weiter mit Absolute-Crossfade. */
.vr-card-body:has(.vr-card-text + .vr-card-text) { min-height: 6rem; }
.vr-card-text { opacity: 0; position: absolute; top: 0.9rem; left: 1rem; right: 1rem; transition: opacity 0.8s ease-in-out; }
.vr-card-text.active { opacity: 1; }
.vr-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.vr-card-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}
.vr-card-price small {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 600;
    margin-left: 4px;
    font-family: var(--font-body);
}

@media (max-width: 900px) {
    .verleih-strip { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; overflow-x: visible !important; }
    .vr-card { flex: unset !important; max-width: unset !important; width: 100% !important; }
    /* Bild ~70% der Karte, Text der Rest */
    .vr-card-img { height: 180px !important; }
    .vr-card-img img { max-height: 140px !important; }
    .verleih-strip:has(.vr-card:hover) .vr-card:not(:hover) { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 768px) {
    .team-depts-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    footer > div:nth-child(2) { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    footer > div:nth-child(2) { grid-template-columns: 1fr !important; }
}

@keyframes nicoPop { from { opacity: 0; transform: translateY(10px) scale(0.9) } to { opacity: 1; transform: translateY(0) scale(1) } }

/* ── PREMIUM AUDIT REFINEMENTS ── */

/* 1. Mobile Touch Targets (Apple HIG: min 44x44px) */
@media (max-width: 900px) {
    .hub-pill {
        padding: 0.85rem 1.25rem;
    }
    .mobile-menu-overlay ul a {
        padding: 0.65rem 1rem;
    }
    .mobile-menu-close, .nav-hamburger {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 2. Leasing Iframe Dark Mode Blend-In */
#leasing iframe {
    border-radius: 20px !important;
    background: var(--surface2) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    opacity: 0.95;
    transition: opacity 0.3s;
}
#leasing iframe:hover {
    opacity: 1;
}

/* ── 5. RESPONSIVE GRID FIXES ── */

/* Bikefitting + Werkstatt: 2-col -> 1-col on tablet/mobile */
@media (max-width: 900px) {
    .werkstatt-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .bf-split { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .bf-pricing { grid-template-columns: 1fr !important; }
    .werkstatt-phone {
        max-width: 300px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    .werkstatt-phone {
        aspect-ratio: 9/19 !important;
    }
}

/* Leasing trust badges: horizontal -> vertical on small screens */
@media (max-width: 600px) {
    .leasing-trust-badges {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.8rem !important;
    }
}

/* ── TRUST BAR ── */
.trust-bar {
    background: #fff;
    padding: 1.1rem 2rem;
}
.trust-bar-inner {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.trust-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
}
.trust-num {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.trust-label {
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}
.trust-pipe {
    color: var(--border);
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;
    user-select: none;
}

@media (max-width: 640px) {
    .trust-bar { padding: 1rem var(--side-pad); }
    .trust-bar-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1rem !important;
        max-width: 320px;
    }
    .trust-pipe { display: none !important; }
    .trust-stat { flex-direction: row; gap: 0.5rem; }
}

/* (WhatsApp mobile sizing moved to Premium Responsive System below) */

/* ── SKIP TO CONTENT (Accessibility) ── */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--uci-black);
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    z-index: 10000;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* ── FOCUS-VISIBLE (Keyboard Accessibility) ── */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.rv-section *:focus-visible, .hero *:focus-visible, [style*="background:var(--uci-black)"] *:focus-visible {
    outline-color: #fff;
}

/* ── REDUCED MOTION (Accessibility) ── */
/* ── KUNDENBEWERTUNGEN — EDITORIAL ── */
/* ── REVIEWS: Dark Theme (all screens) ── */
.rv-section { padding: var(--section-gap) var(--side-pad); background: var(--uci-black); }
.rv-wrapper { max-width: 1200px; margin: 0 auto; }
.rv-section .section-label { color: var(--accent); }
.rv-section .section-title { color: #fff; }

.rv-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 3.5rem; flex-wrap: wrap; }
.rv-badge { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 14px 20px; }
.rv-badge-score { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1; }
.rv-badge-score span { font-weight: 400; font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.rv-badge-stars { display: flex; gap: 1px; margin: 4px 0 2px; }
.rv-badge-count { font-size: 0.72rem; color: rgba(255,255,255,0.4); letter-spacing: 0.03em; }
a.rv-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.25); }
.rv-card--cta { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; display: flex; flex-direction: column; }
.rv-card--cta:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(251,188,5,0.4) !important; transform: translateY(-3px); }
@media (max-width: 640px) { .rv-card--cta { flex-direction: column !important; text-align: center !important; gap: 1rem !important; padding: 1.5rem !important; } }

.rv-hero-quote { position: relative; overflow: hidden; padding: 3rem 3.5rem; margin-bottom: 3rem; background: transparent; border-radius: 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.rv-hero-mark { position: absolute; top: 0.5rem; left: 1.5rem; font-family: Georgia, 'Times New Roman', serif; font-size: 6rem; line-height: 1; color: var(--accent); opacity: 0.3; pointer-events: none; user-select: none; }
.rv-hero-text { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.7; color: rgba(255,255,255,0.9); font-weight: 400; font-style: italic; margin: 0; }
.rv-hero-author { margin-top: 1.5rem; display: flex; align-items: center; gap: 10px; }
.rv-hero-name { font-weight: 600; font-size: 0.9rem; color: #fff; }
.rv-hero-via { font-size: 0.78rem; color: rgba(255,255,255,0.35); }

.rv-grid { columns: 3; column-gap: 20px; }
.rv-card { break-inside: avoid; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px 24px; margin-bottom: 20px; transition: box-shadow 0.3s ease, background 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rv-card:nth-child(3) { break-before: column; }
.rv-card:nth-child(5) { break-before: column; }
.rv-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.3); background: rgba(255,255,255,0.07); }
.rv-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rv-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.rv-name { font-weight: 600; font-size: 0.88rem; color: #fff; }
.rv-time { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
.rv-stars { display: flex; gap: 1px; margin-bottom: 10px; }
.rv-text { color: rgba(255,255,255,0.5); font-size: 0.85rem; line-height: 1.75; margin: 0; }

.rv-text-wrap { position: relative; }
.rv-text-wrap:not(.is-open) .rv-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv-more { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 0.8rem; font-weight: 600; padding: 6px 0 0; display: block; font-family: var(--font-body); }
.rv-more:hover { opacity: 0.7; }

.rv-cta { text-align: center; margin-top: 2.5rem; }

@media (max-width: 1024px) {
    .rv-grid { columns: 2 !important; }
    .rv-hero-text { font-size: 1.15rem !important; }
    .rv-hero-quote { padding: 2.5rem !important; }
}
@media (max-width: 640px) {
    .rv-grid { columns: 1 !important; }
    .rv-hero-quote { padding: 1.5rem 0 !important; }
    .rv-hero-text { font-size: 1rem !important; }
    .rv-hero-mark { font-size: 4rem !important; left: 0 !important; top: -0.5rem !important; position: relative !important; display: block !important; line-height: 0.8 !important; margin-bottom: -0.5rem !important; }
    .rv-header { flex-direction: column !important; }
    .rv-badge { align-self: flex-start !important; }
}

/* ── REVIEWS MOBILE: horizontal slider ── */
@media (max-width: 768px) {
    .rv-section { padding: 4rem var(--side-pad) !important; }
    .rv-grid { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 16px !important; padding-bottom: 1rem !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .rv-grid::-webkit-scrollbar { display: none; }
    .rv-card { flex: 0 0 82vw !important; max-width: 320px !important; scroll-snap-align: center !important; margin-bottom: 0 !important; break-inside: unset !important; }
    .rv-card:hover { transform: none !important; box-shadow: none !important; }
    .rv-slider-dots { display: flex !important; justify-content: center; gap: 8px; margin-top: 1rem; }
    .rv-slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; padding: 0; cursor: pointer; transition: all 0.3s ease; }
    .rv-slider-dot.active { background: var(--accent); transform: scale(1.3); }
}
@media (min-width: 769px) {
    .rv-slider-dots { display: none; }
}

/* ── PARALLAX IMAGES ── */
.parallax-img {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ── WELTEN TABLET: 3-column grid ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .welten-strip {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
    }
    .welt-card-ring:nth-child(4),
    .welt-card-ring:nth-child(5) {
        max-width: 80% !important;
        margin: 0 auto !important;
    }
}

/* ── WELTEN MOBILE: 2-column grid ── */
@media (max-width: 768px) {
    .welten-strip {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow: visible !important;
        padding: 0 var(--side-pad) !important;
        overflow-x: visible !important;
    }
    .welt-card-ring-img img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        aspect-ratio: 16 / 9 !important;
    }
    .welt-card-ring {
        flex: unset !important;
        max-width: unset !important;
        width: 100% !important;
        position: sticky !important;
        background: #faf9f6 !important;
        border-radius: 14px !important;
        box-shadow: 0 -4px 14px rgba(0,0,0,0.08) !important;
        opacity: 1 !important;
        padding: 0.5rem !important;
        /* Sticky-Stack-Effect — Karten kleben am Top und stapeln sich beim
           Scroll. WICHTIG kein translateZ/backface/will-change-transform: das
           bricht position:sticky komplett (iOS-Safari-Quirk). Stattdessen
           contain für saubere Repaints, kein eigener Compositing-Layer. */
        transform: none !important;
        will-change: auto !important;
        contain: layout paint;
    }
    .welt-card-ring:nth-child(1) { top: 70px !important; z-index: 1 !important; }
    .welt-card-ring:nth-child(2) { top: 80px !important; z-index: 2 !important; }
    .welt-card-ring:nth-child(3) { top: 90px !important; z-index: 3 !important; }
    .welt-card-ring:nth-child(4) { top: 100px !important; z-index: 4 !important; }
    .welt-card-ring:nth-child(5) { top: 110px !important; z-index: 5 !important; }
    .welt-card-ring:hover {
        transform: none !important;
    }
    .welten-strip:has(.welt-card-ring:hover) .welt-card-ring:not(:hover) {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── VERLEIH MOBILE (handled above in original block) ── */

/* ── MAP LOADING SPINNER ── */
@keyframes mapSpin { to { transform: rotate(360deg); } }

/* ── DECORATIVE QUOTES (Werkstatt-Zitat etc.) ── */
/* Futura-100 hat keine richtigen geschwungenen 66/99-Glyphen für „ "
   → echte Schmuck-Quotes per Serif-Font erzwingen, in Akzent-Farbe. */
.quote-deco {
    font-family: Georgia, 'Times New Roman', 'Cambria', serif;
    color: inherit; /* selbe Farbe wie der umgebende Text */
    font-style: normal;
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1;
    margin: 0 0.05em;
    vertical-align: -0.05em;
}

/* ── LEASING PARTNERS LINE HIDE MOBILE ── */
@media (max-width: 768px) {
    .leasing-partners-wrap {
        border-top: none !important;
    }
    /* Logos enger zusammen + schnellerer Marquee auf Mobile */
    .leasing-marquee-track,
    .brand-marquee-track {
        gap: 1.25rem !important;
        animation-duration: 22s !important;
    }
    .leasing-logo-card,
    .brand-logo-card {
        padding: 0.5rem 0.75rem !important;
    }

    /* Welten-Section: mobil oberen Abstand der Headline reduzieren */
    #welten {
        padding-top: 2.5rem !important;
    }
    #welten > .reveal-up {
        margin-bottom: 2rem !important;
    }
}

/* (Cafe/Bikefitting/Footer mobile moved to Premium Responsive System below) */

/* (Global mobile spacing moved to Premium Responsive System below) */

/* ── CONSENT PLACEHOLDERS (DSGVO) ── */
.consent-placeholder {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 12px;
}
.consent-placeholder svg { opacity: 0.4; }
.consent-placeholder p { margin: 0; }
.consent-placeholder .btn-primary {
    background: var(--accent); color: #111; border-radius: 50px;
    font-weight: 600; transition: all 0.3s;
}
.consent-placeholder .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ── COOKIE CONSENT ── */
.cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: auto;
    max-width: 520px;
    animation: cookieSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cookieSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cookie-card {
    background: rgba(17, 17, 17, 0.8);
    color: #fff;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.cookie-text {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.85);
}
.cookie-text strong { color: #fff; }
.cookie-text a { color: var(--accent); text-decoration: underline; }
.cookie-btns { display: flex; gap: 0.75rem; }
.cookie-accept {
    background: var(--accent);
    color: var(--uci-black);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cookie-accept:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(223,177,41,0.3); }
.cookie-decline {
    background: transparent;
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.cookie-decline:hover { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.8); }
.cookie-settings-btn {
    background: transparent;
    color: rgba(255,255,255,0.5);
    border: none;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.cookie-settings-btn:hover { color: #fff; }
/* Cookie Modal */
.cookie-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-modal-overlay.open { opacity: 1; pointer-events: auto; }
.cookie-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 560px;
    width: calc(100% - 2rem);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-modal-overlay.open .cookie-modal { transform: translateY(0) scale(1); }
.cookie-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid var(--border);
}
.cookie-modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.cookie-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}
.cookie-modal-close:hover { background: var(--bg); color: var(--text); }
.cookie-modal-body {
    padding: 1.25rem 2rem;
    overflow-y: auto;
    flex: 1;
}
.cookie-modal-intro {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.cookie-category {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.cookie-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.cookie-cat-info { display: flex; align-items: center; gap: 0.75rem; }
.cookie-cat-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.cookie-cat-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.cookie-cat-required { background: var(--bg); color: var(--muted); }
.cookie-cat-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin-bottom: 0.75rem; }
/* Toggle Switch */
.cookie-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.3s;
}
.cookie-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.cookie-toggle input:checked + .cookie-toggle-slider { background: var(--accent); }
.cookie-toggle input:checked + .cookie-toggle-slider::before { transform: translateX(20px); }
/* Cookie Table */
.cookie-details { margin-top: 0.5rem; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.cookie-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cookie-table td {
    padding: 0.5rem 0.5rem;
    color: var(--text);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.cookie-table code {
    background: var(--bg);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}
.cookie-modal-footer {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.cookie-modal-footer .cookie-decline {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.cookie-modal-footer .cookie-decline:hover { border-color: var(--text); color: var(--text); }
.cookie-modal-footer .cookie-accept {
    background: var(--accent);
    color: var(--uci-black);
    border: none;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cookie-modal-footer .cookie-accept:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(223,177,41,0.3); }
@media (max-width: 640px) {
    .cookie-banner { left: var(--side-pad) !important; right: var(--side-pad) !important; transform: none !important; max-width: none !important; bottom: 1rem !important; }
    @keyframes cookieSlideUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .cookie-card { padding: 1.25rem !important; }
    .cookie-btns { flex-direction: column !important; }
    .cookie-accept, .cookie-decline, .cookie-settings-btn { width: 100% !important; text-align: center !important; }
    .cookie-modal { max-height: 90vh !important; width: calc(100% - 1rem) !important; border-radius: 16px !important; }
    .cookie-modal-header, .cookie-modal-body, .cookie-modal-footer { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .cookie-modal-footer { flex-direction: column !important; }
    .cookie-modal-footer button { width: 100% !important; text-align: center !important; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE PREMIUM SYSTEM — 20k Level
   Breakpoints: 320 · 480 · 640 · 768 · 900 · 1024 · 1200
   ══════════════════════════════════════════════════════ */

/* ── TABLET LANDSCAPE (900–1024px) ── */
@media (max-width: 1024px) and (min-width: 901px) {
    :root {
        --side-pad: clamp(2rem, 4vw, 4rem);
    }
    .nav-links { gap: 1rem; }
    .nav-links a { font-size: 0.78rem; }
    .bf-split { gap: 3rem; }
    .cafe-bottom { gap: 1rem; }
    .cafe-feat { padding: 1rem; }
}

/* ── TABLET PORTRAIT (768–900px) ── */
@media (max-width: 900px) and (min-width: 769px) {
    .hero-content { margin-top: 0; }
    .hero h1 { font-size: clamp(1.5rem, 4vw, 2.2rem) !important; }
    .cafe-bottom { grid-template-columns: repeat(2, 1fr) !important; }
    .bf-pricing { grid-template-columns: 1fr 1fr !important; }
    .bf-price-card:last-child { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; }
}

/* ── MOBILE LARGE (641–768px) ── */
@media (max-width: 768px) {
    body { font-size: 15px; }

    /* Hero: cinematic mobile */
    .hero { min-height: 100svh; }
    .hero-content {
        padding: 0 var(--side-pad) !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .hero-video-overlay {
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.92) 0%,
            rgba(0,0,0,0.6) 35%,
            rgba(0,0,0,0.35) 60%,
            rgba(0,0,0,0.25) 100%
        ) !important;
    }
    .hero h1 {
        font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
        letter-spacing: 0.01em !important;
    }
    .hero-sub {
        font-size: clamp(0.65rem, 2.5vw, 0.8rem) !important;
        letter-spacing: 0.15em !important;
    }
    .hero-cta a {
        padding: 0.65rem 1.8rem !important;
        font-size: 0.78rem !important;
    }
    .hero-bottom { bottom: 1.25rem !important; }

    /* Nav mobile polish */
    .nav-inner { height: 64px !important; padding: 0 1rem !important; }
    .nav-logo img { height: 48px !important; }
    .nav.scrolled .nav-logo img { height: 34px !important; }
    .nav.scrolled .nav-inner { height: 52px !important; }

    /* Section headers mobile */
    .section-label { font-size: 0.62rem !important; letter-spacing: 0.22em !important; margin-bottom: 0.75rem !important; }
    .section-title { font-size: clamp(1.7rem, 6.5vw, 2.4rem) !important; margin-bottom: 1rem !important; }
    .section-sub { font-size: 0.9rem !important; line-height: 1.65 !important; }

    /* Trust bar mobile */
    .trust-bar { padding: 1.25rem var(--side-pad) !important; }
    .trust-bar-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.25rem !important;
        max-width: 340px !important;
    }
    .trust-pipe { display: none !important; }
    .trust-stat {
        flex-direction: column !important;
        gap: 0.2rem !important;
        padding: 0.5rem 0 !important;
    }
    .trust-num { font-size: 1.15rem !important; }

    /* Service hub mobile */
    .service-hub { padding: 1rem var(--side-pad) 0 !important; }
    .service-hub-inner { gap: 0.5rem !important; padding: 1rem 0 !important; }

    /* Sections — tighter vertical rhythm */
    #welten { padding: 4rem 0 !important; }
    #welten > div:first-child { margin-bottom: 2.5rem !important; padding: 0 var(--side-pad) !important; }

    /* Werkstatt: Telefon + Preisliste-Button gleich groß stapeln */
    .werkstatt-cta-wrap > a,
    .werkstatt-cta-wrap > button {
        width: 100% !important;
        max-width: 320px;
        justify-content: center !important;
    }

    /* Breakout section mobile — svh statt vh: stabile Höhe bei Browser-Navbar-Toggle */
    .breakout-section {
        min-height: 500px !important;
        height: 65svh !important;
    }
    .breakout-content h2 {
        font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
        line-height: 1.15 !important;
    }
    .breakout-content p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* Bikefitting mobile */
    .bf-section { padding: 4rem var(--side-pad) !important; }
    .bf-visual { order: -1; }
    .bf-img-wrap { border-radius: 16px !important; }
    .bf-content { padding: 0 !important; }

    /* Footer mobile */
    footer { padding: 3rem var(--side-pad) 1.5rem !important; }
    footer > div:nth-child(2) {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
}

/* ── MOBILE MEDIUM (481–640px) ── */
@media (max-width: 640px) {
    :root {
        --section-gap: clamp(3rem, 8vw, 4.5rem) !important;
        --side-pad: clamp(1.1rem, 5vw, 1.5rem) !important;
    }
    body { font-size: 15px; }

    /* Hero fine-tuning */
    .hero h1 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }

    /* Trust bar 2x2 */
    .trust-bar-inner { max-width: 300px !important; gap: 1rem !important; }

    /* Welten mobile — bigger cards */
    .welt-card-name { font-size: 0.72rem !important; padding-top: 0.6rem !important; }

    /* Bikefitting pricing */
    .bf-pricing { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
    .bf-price-card { padding: 1.25rem !important; }

    /* Reviews */
    .rv-section { padding: 3.5rem var(--side-pad) !important; }
    .rv-card {
        flex: 0 0 85vw !important;
        max-width: 340px !important;
    }
    .rv-hero-quote { padding: 1.25rem 0 !important; }
    .rv-hero-text { font-size: 0.95rem !important; }

    /* Leasing section */
    #leasing { padding: 4rem var(--side-pad) 2.5rem !important; }
    .leasing-acc summary > div > span:first-child { font-size: 0.95rem !important; }
    .leasing-acc summary > div > span:last-child { font-size: 0.82rem !important; }

    /* Timeline cards */
    .timeline-card {
        flex: 0 0 80vw !important;
        max-width: 320px !important;
    }
    .timeline-scroll-container { padding: 1.5rem 6vw 3rem !important; gap: 1rem !important; }
    .t-year { font-size: 2.5rem !important; }
    .t-title { font-size: 1.15rem !important; }
    .t-desc { font-size: 0.85rem !important; }
    .timeline-card-content { padding: 1.75rem !important; }

    /* Café section */
    .cafe-bottom { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
    .cafe-feat { padding: 1rem !important; border-radius: 12px !important; }
    .cafe-feat-title { font-size: 0.82rem !important; }
    .cafe-feat-sub { font-size: 0.72rem !important; }

    /* Team */
    .team-section { padding: 4rem var(--side-pad) !important; }

    /* Anfahrt */
    #anfahrt { padding: 4rem var(--side-pad) !important; }

    /* Verleih — Bild ~70% der Karte, Text der Rest */
    .vr-card-img { height: 170px !important; padding: 0.9rem !important; }
    .vr-card-img img { max-height: 130px !important; }
    .vr-card-body { padding: 0.85rem 1rem !important; }
    .vr-card-name { font-size: 0.88rem !important; }
    .vr-card-price { font-size: 1.75rem !important; }

    /* Footer */
    footer > div:nth-child(2) { grid-template-columns: 1fr 1fr !important; }
}

/* ── MOBILE SMALL (≤480px) ── */
@media (max-width: 480px) {
    :root {
        --section-gap: clamp(2.5rem, 7vw, 3.5rem) !important;
        --side-pad: clamp(1rem, 4.5vw, 1.25rem) !important;
    }
    body { font-size: 14.5px; }

    /* Hero: compact and punchy */
    .hero h1 {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
        line-height: 1.25 !important;
    }
    .hero-sub {
        font-size: 0.62rem !important;
        margin-bottom: 1.5rem !important;
    }
    .hero-cta a {
        padding: 0.6rem 1.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Section titles: punchy */
    .section-title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        letter-spacing: -0.03em !important;
    }
    .section-sub { font-size: 0.85rem !important; }

    /* Trust bar */
    .trust-bar-inner { max-width: 280px !important; }
    .trust-num { font-size: 1.05rem !important; }
    .trust-label { font-size: 0.62rem !important; }

    /* Welten cards */
    .welt-card-ring-img img { border-radius: 6px !important; }
    .welt-card-name { font-size: 0.65rem !important; letter-spacing: 0.06em !important; }

    /* Bikefitting */
    .bf-section { padding: 3rem var(--side-pad) !important; }
    .bf-text { font-size: 0.9rem !important; margin-bottom: 1.5rem !important; }
    .bf-actions { gap: 0.75rem !important; flex-direction: column !important; align-items: center !important; }
    .bf-free-badge { justify-content: center !important; }
    .bf-img-wrap { border-radius: 14px !important; }

    /* Reviews */
    .rv-card { flex: 0 0 88vw !important; }
    .rv-badge { padding: 10px 14px !important; }
    .rv-badge-score { font-size: 1.25rem !important; }

    /* Leasing */
    #leasing h2 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
    .leasing-trust-badges { gap: 1rem !important; flex-direction: column !important; align-items: center !important; }

    /* Timeline */
    .timeline-card { flex: 0 0 85vw !important; }
    .timeline-scroll-container { padding: 1.5rem var(--side-pad) 2.5rem !important; }
    .timeline-nav { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
    .timeline-nav-left { left: 6px !important; }
    .timeline-nav-right { right: 6px !important; }

    /* Café */
    .cafe-bottom { grid-template-columns: 1fr !important; }
    .cafe-bento { border-radius: 12px !important; }
    .cafe-bento-main { min-height: 200px !important; }

    /* Team — stacked cards stay full width on small screens */

    /* Verleih — Bild ~70% der Karte, Text der Rest */
    .vr-card-img { height: 140px !important; padding: 0.6rem !important; }
    .vr-card-img img { max-height: 110px !important; }
    .vr-card-body { padding: 0.7rem 0.85rem !important; }
    .vr-card-name { font-size: 0.78rem !important; }
    .vr-card-price { font-size: 1.5rem !important; }

    /* Footer ultra-compact */
    footer { padding: 2.5rem var(--side-pad) 1rem !important; }
    footer > div:nth-child(2) { grid-template-columns: 1fr !important; gap: 1.5rem !important; }

    /* WhatsApp */
    #waFloatWrap { bottom: 12px !important; right: 12px !important; }
    #waFloat { width: 48px !important; height: 48px !important; }
    #waFloat svg { width: 22px !important; height: 22px !important; }
    #waChatWindow { width: calc(100vw - 24px) !important; max-width: 320px !important; }
    #nicoBubble { max-width: 170px !important; font-size: 0.78rem !important; }

    /* Breakout section */
    .breakout-section { min-height: 420px !important; height: 60svh !important; }
    .breakout-content h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; }
    .breakout-content p { font-size: 0.88rem !important; margin-bottom: 1.5rem !important; }
}

/* ── MOBILE TINY (≤360px — iPhone SE, Galaxy S) ── */
@media (max-width: 360px) {
    :root {
        --side-pad: 0.85rem !important;
    }
    .hero h1 { font-size: 1.15rem !important; }
    .hero-sub { font-size: 0.58rem !important; }
    .section-title { font-size: 1.35rem !important; }
    .nav-inner { padding: 0 0.75rem !important; }
    .nav-logo img { height: 40px !important; }
    .trust-bar-inner { max-width: 250px !important; }
    .trust-num { font-size: 0.95rem !important; }
    /* Welten grid — no override needed */
    .timeline-card { flex: 0 0 90vw !important; }
    .rv-card { flex: 0 0 92vw !important; }
    .cookie-card { padding: 1rem !important; }
    .cookie-text { font-size: 0.78rem !important; }
}

/* ══ MOBILE SCROLL INDICATORS ══ */
@media (max-width: 768px) {
    .rv-grid {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
        scroll-padding: 0 var(--side-pad);
        overscroll-behavior-x: contain;
    }
}

/* ══ MOBILE TOUCH INTERACTIONS ══ */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects that feel wrong on touch */
    .welt-card-ring:hover { transform: none !important; box-shadow: none !important; }
    .welten-strip:has(.welt-card-ring:hover) .welt-card-ring:not(:hover) { opacity: 1 !important; transform: none !important; }
    .vr-card:hover { transform: none !important; box-shadow: none !important; }
    .verleih-strip:has(.vr-card:hover) .vr-card:not(:hover) { opacity: 1 !important; transform: none !important; }
    .cafe-bento-main:hover img,
    .cafe-bento-sm:hover img { transform: none !important; }
    .rv-card:hover { transform: none !important; box-shadow: none !important; }
    .testimonial-card:hover { transform: none !important; }
    .bf-price-card:hover { transform: none !important; }

    /* Active states for touch (tap feedback) */
    .welt-card-ring:active { transform: scale(0.97) !important; transition: transform 0.1s !important; }
    .vr-card:active { transform: scale(0.97) !important; transition: transform 0.1s !important; }
    .hub-pill:active { transform: scale(0.95) !important; }
    .bf-price-card:active { transform: scale(0.98) !important; transition: transform 0.15s !important; }
    .rv-card:active { transform: scale(0.98) !important; }
    .cafe-feat:active { transform: scale(0.97) !important; transition: transform 0.1s !important; }
    .cookie-accept:active,
    .cookie-decline:active { transform: scale(0.95) !important; }
    .btn-primary:active,
    .btn-outline:active { transform: scale(0.96) !important; }

    /* Bigger touch targets */
    .hub-pill { min-height: 44px; }
    .leasing-acc summary { min-height: 52px; padding: 0.5rem 0; }
    .nav-hamburger { min-width: 48px; min-height: 48px; }
}

/* ══ MOBILE MENU ENHANCEMENT ══ */
@media (max-width: 900px) {
    .mobile-menu-overlay {
        padding: 5rem 2rem 3rem !important;
    }
    .mobile-menu-overlay ul { gap: 0 !important; }
    .mobile-menu-overlay ul a {
        font-size: 1.3rem !important;
        padding: 0.8rem 1.25rem !important;
        border-radius: 12px;
        transition: color 0.3s, background 0.3s, transform 0.3s !important;
    }
    .mobile-menu-overlay ul a:active {
        background: rgba(255,255,255,0.05);
        transform: scale(0.97);
    }
    .mobile-menu-close {
        top: 1.25rem !important;
        right: 1.25rem !important;
    }
    .mobile-menu-close svg { width: 28px !important; height: 28px !important; }
}

/* ══ SMOOTH SCROLL BEHAVIOR ══ */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    /* Prevent body overflow causing bouncing on iOS */
    body {
        overscroll-behavior-y: none;
    }
}

/* ══ LANDSCAPE MODE MOBILE ══ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100svh !important;
    }
    .hero-content {
        margin-top: 0 !important;
        padding: 1rem var(--side-pad) !important;
    }
    .hero h1 { font-size: 1.2rem !important; }
    .hero-sub { margin-bottom: 1rem !important; }
    .hero-bottom { bottom: 0.5rem !important; }
    .mobile-menu-overlay {
        padding: 2rem !important;
    }
    .mobile-menu-overlay ul a {
        font-size: 1rem !important;
        padding: 0.4rem 1rem !important;
    }
}

/* ══ SAFE AREA INSETS (Notch/Dynamic Island) ══ */
@supports (padding: max(0px)) {
    .nav { padding-top: env(safe-area-inset-top, 0); }
    footer { padding-bottom: max(1rem, env(safe-area-inset-bottom, 0)); }
    .cookie-banner { bottom: max(1rem, env(safe-area-inset-bottom, 0)) !important; }
    #waFloatWrap { bottom: max(16px, env(safe-area-inset-bottom, 0)) !important; }
    .mobile-menu-overlay {
        padding-top: max(5rem, calc(env(safe-area-inset-top, 0) + 4rem)) !important;
    }
}

/* ══ HOVER STATES (replaces inline onmouseover/onmouseout) ══ */
.hero-google-badge:hover { border-color: rgba(255,255,255,0.3) !important; background: rgba(255,255,255,0.1) !important; }
.leasing-cta-btn:hover { background: var(--accent-hover) !important; transform: translateY(-3px) !important; box-shadow: 0 14px 40px rgba(223,177,41,0.35) !important; }
.werkstatt-phone:hover { transform: translateY(-5px) !important; box-shadow: 0 40px 70px rgba(0,0,0,0.2) !important; }
.wa-send-btn:hover { transform: scale(1.1) !important; }
/* Footer link hovers */
footer a { transition: color 0.3s ease; }
footer a:hover { color: #fff !important; }
.footer-social a:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.footer-social a[href*="whatsapp"]:hover { border-color: #25D366 !important; color: #25D366 !important; }
.cta-wa-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 30px rgba(223,177,41,0.4) !important; }
.cta-tel-btn:hover { border-color: rgba(255,255,255,0.5) !important; transform: translateY(-3px) !important; }
.breakout-cta:hover { border-color: rgba(255,255,255,0.3) !important; background: rgba(255,255,255,0.1) !important; }

/* ══ PRINT STYLES ══ */
@media print {
    .nav, .mobile-menu-overlay, #waFloatWrap, .cookie-banner, .cookie-modal-overlay,
    .scroll-progress, .page-loader, .hero-video-bg, .hero-video-overlay,
    #admin-floating-bar, .admin-exit-btn, .timeline-nav { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    .hero { min-height: auto; page-break-after: always; }
    .breakout-section { height: auto; min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-video-bg { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   CMS ADMIN MODE — Live-Editor-Ansicht
   Body bekommt .cms-admin-mode wenn Admin eingeloggt ist.
   Ziel: Bilder voll sichtbar machen, ohne Frontend zu verändern.
   Besucher (ohne Klasse) sehen alles wie zuvor.
   ══════════════════════════════════════════════════════════════ */

/* Timeline-Karten: dunklen Verlauf ausblenden, Text in kompaktes
   Frosted-Glas-Band am unteren Rand packen, damit das ganze Bild
   im Editor sichtbar bleibt — alle Editier-Funktionen erhalten. */
body.cms-admin-mode .timeline-card-overlay {
    display: none !important;
}
body.cms-admin-mode .timeline-card-content {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.25rem !important;
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 20px 20px;
}
body.cms-admin-mode .timeline-card-content .t-year {
    font-size: 2.2rem !important;
    margin-bottom: 0.25rem !important;
}
body.cms-admin-mode .timeline-card-content .t-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
}
body.cms-admin-mode .timeline-card-content .t-desc {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}
body.cms-admin-mode .timeline-card-content .t-badge {
    margin-bottom: 0.5rem !important;
    padding: 0.25rem 0.7rem !important;
    font-size: 0.65rem !important;
}