/* Busflotte — tabbed multi-vehicle */

/* ===================== BUSFLOTTE — tabbed multi-vehicle ===================== */
.flotte {
    padding: 8rem 2.5rem 6rem;
    background: var(--cream);
}
.flotte-header {
    max-width: 1200px; margin: 0 auto 2.5rem;
}
.flotte-header h2 { font-size: clamp(2rem, 3.5vw, 2.6rem); margin-bottom: 0.5rem; }
.flotte-header p { color: var(--text-muted); font-size: 1.05rem; max-width: 600px; }
.flotte-tabs {
    max-width: 1200px; margin: 0 auto 2.5rem;
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.flotte-tab {
    padding: 0.75rem 1.5rem; border-radius: 50px;
    border: 1.5px solid var(--border); background: #fff;
    font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.flotte-tab:hover { border-color: var(--red); color: var(--red); }
.flotte-tab.active {
    background: var(--red); color: #fff; border-color: var(--red);
    box-shadow: 0 4px 16px rgba(196,30,42,0.25);
}
.flotte-tab .tab-badge {
    font-size: 0.75rem; padding: 0.15rem 0.55rem;
    border-radius: 50px; font-weight: 700;
    background: rgba(0,0,0,0.06); color: var(--text-muted);
}
.flotte-tab.active .tab-badge {
    background: rgba(0,0,0,0.28); color: #fff;
}
.flotte-tab .tab-badge.tab-badge-soon {
    background: #fff3d6; color: #8a5a00; border: 1px solid #f0c870;
}
.flotte-tab.active .tab-badge.tab-badge-soon {
    background: #fff3d6; color: #8a5a00; border-color: #f0c870;
}
.flotte-panel { display: none; }
.flotte-panel.active { display: block; }
.flotte-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: center;
}
.flotte-gallery {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.flotte-gallery .fg-main {
    grid-column: 1 / -1; border-radius: 14px; overflow: hidden;
    aspect-ratio: 16/9;
}
.flotte-gallery .fg-thumb {
    border-radius: 10px; overflow: hidden; aspect-ratio: 4/3;
}
.flotte-gallery-wide {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
}
.flotte-gallery-wide .fg-main {
    grid-column: 1 / -1; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9;
}
.flotte-gallery-wide .fg-thumb {
    border-radius: 10px; overflow: hidden; aspect-ratio: 4/3;
}
.ausflug-intro {
    max-width: 900px; margin: 0 auto 2.5rem; text-align: center;
}
.ausflug-intro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.ausflug-intro p { color: var(--text-muted); font-size: 1.05rem; }
.ausflug-gallery {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.ausflug-card {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    display: flex; flex-direction: column;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.ausflug-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); }
.ausflug-card picture { display: block; aspect-ratio: 4/3; overflow: hidden; }
.ausflug-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.ausflug-card:hover img { transform: scale(1.05); }
.ausflug-card figcaption {
    padding: 0.9rem 1.1rem; font-size: 0.92rem; color: var(--text-muted);
    font-weight: 500; line-height: 1.4;
}
.ausflug-cta { max-width: 1200px; margin: 2.5rem auto 0; text-align: center; }
@media (max-width: 900px) {
    .ausflug-gallery { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 560px) {
    .ausflug-gallery { grid-template-columns: 1fr; gap: 1rem; }
}
.flotte-gallery-wide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.flotte-gallery-wide .fg-main:hover img,
.flotte-gallery-wide .fg-thumb:hover img { transform: scale(1.04); }
.flotte-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.flotte-gallery .fg-main:hover img,
.flotte-gallery .fg-thumb:hover img { transform: scale(1.04); }
.flotte-info h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.flotte-info > p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 2rem; }
.flotte-features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.flotte-features li {
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex; align-items: center; gap: 0.85rem;
    font-size: 0.92rem; color: var(--text); font-weight: 500;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.flotte-features li:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border-color: rgba(196,30,42,0.2);
}
.flotte-features .check {
    width: 32px; height: 32px; min-width: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #FDE8EA 0%, #F5CDD0 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--red); font-weight: 700; font-size: 1rem;
    box-shadow: 0 2px 6px rgba(196,30,42,0.1);
}
.flotte-vehicle-meta {
    display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.flotte-vehicle-meta .meta-item {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--text-muted); font-weight: 500;
}
.flotte-vehicle-meta .meta-item svg { width: 18px; height: 18px; fill: var(--red); }
.flotte-cta-row {
    margin-top: 2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.flotte-cta-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--red); color: #fff; border: none;
    padding: 0.85rem 1.8rem; border-radius: 8px;
    font-weight: 700; font-size: 0.95rem; cursor: pointer;
    text-decoration: none; transition: all 0.3s;
}
.flotte-cta-btn:hover {
    background: var(--red-dark); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(196,30,42,0.25);
}