/* ============================================================================
   ATAV — Landingpages
   ----------------------------------------------------------------------------
   Bis August 2026 stand dieses Stylesheet in JEDER Landingpage einzeln im
   Dokument — 26 byte-gleiche Kopien von rund 9 KB. Wer das Kartendesign
   aendern wollte, musste es sechsundzwanzig Mal tun, und bei jedem Aufruf
   wurden dieselben 9 KB erneut uebertragen.

   Jetzt steht es hier, einmal. Die Seiten binden nur noch diese Datei ein.
   Der Browser laedt sie beim ersten Besuch und nimmt sie danach aus dem
   Zwischenspeicher.

   Die Werte sind auf das Massystem umgestellt (siehe atav-system.css):
   Schriftstufen, Viererreihe fuer Abstaende, drei Rundungen.

   Seitenspezifische Ergaenzungen — etwa die Streckenkarten der
   Fernstrecken-Seiten — bleiben in der jeweiligen Seite.
   ========================================================================== */

/* ===== HERO ===== */
    .lp-hero { background: linear-gradient(135deg, #1e2a40 0%, #2d426c 50%, #3b5998 100%); padding: var(--raum-9) 0 var(--raum-8); position: relative; overflow: hidden; }
    .lp-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(214,0,0,0.07) 0%, transparent 50%); animation: lp-rotate 25s linear infinite; }
    @keyframes lp-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .lp-hero * { position: relative; z-index: 1; }
    .lp-hero h1 { color: #fff; font-size: var(--schrift-4xl); font-weight: 900; line-height: 1.1; margin-bottom: 20px; }
    .lp-hero h1 .lp-red { color: #ff3333; }
    .lp-hero .lp-sub { color: #fff; font-size: var(--schrift-xl); max-width: 700px; margin: 0 auto; line-height: 1.7; }
    .lp-badge { display: inline-block; background: linear-gradient(135deg, #D60000, #ff4444); color: #fff; padding: var(--raum-2) var(--raum-5); border-radius: var(--rund-voll); font-weight: 700; font-size: var(--schrift-s); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 24px; animation: lp-pulse 2s ease-in-out infinite; }
    @keyframes lp-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214,0,0,0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 20px 5px rgba(214,0,0,0.3); } }
    .lp-highlight-box { background: rgba(255,255,255,0.07); border: 2px solid rgba(255,255,255,0.15); border-radius: var(--rund-m); padding: var(--raum-6) var(--raum-7); display: inline-block; margin: var(--raum-6) 0; backdrop-filter: blur(10px); }
    .lp-highlight-text { font-size: var(--schrift-4xl); font-weight: 900; background: linear-gradient(135deg, #ff3333, #ff6b6b, #ffaa00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
    .lp-highlight-label { color: #fff; font-size: var(--schrift-l); margin-top: 6px; }

    /* ===== TRUST BAR ===== */
    .lp-trust { background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); }

    /* ===== DIVIDER ===== */
    .lp-divider { width: 80px; height: 4px; background: linear-gradient(90deg, #D60000, #ffaa00); border-radius: var(--rund-s); margin: 0 auto 30px; }

    /* ===== SECTION HEADINGS ===== */
    .lp-section-h2 { font-size: var(--schrift-3xl); font-weight: 900; margin-bottom: 12px; }
    .lp-section-sub { font-size: var(--schrift-l); max-width: 700px; margin: 0 auto 50px; line-height: 1.6; }

    /* ===== DARK SECTIONS ===== */
    .lp-dark { background: linear-gradient(135deg, #1e2a40 0%, #2d426c 50%, #3b5998 100%); color: #fff; }

    /* ===== WHITE CARDS ===== */
    .lp-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--rund-m); padding: var(--raum-6) var(--raum-5); text-align: center; height: 100%; transition: all 0.4s; }
    .lp-card:hover { transform: translateY(-10px); box-shadow: 0 20px 60px rgba(214,0,0,0.15); border-color: rgba(214,0,0,0.3); }
    .lp-card h3 { color: #1e2a40; font-size: var(--schrift-xl); font-weight: 800; margin: var(--raum-4) 0 var(--raum-2); }
    .lp-card p { color: #555; font-size: var(--schrift-m); line-height: 1.6; margin: 0; }
    .lp-card-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #D60000, #ff4444); display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 6px 25px rgba(214,0,0,0.4); }
    .lp-card-icon svg { color: #fff; }

    /* ===== STEP CARDS ===== */
    .lp-step { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--rund-m); padding: var(--raum-6) var(--raum-5); text-align: center; height: 100%; transition: all 0.4s; }
    .lp-step:hover { transform: translateY(-10px); box-shadow: 0 20px 60px rgba(214,0,0,0.15); border-color: rgba(214,0,0,0.3); }
    .lp-step-num { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #D60000, #ff4444); color: #fff; font-size: var(--schrift-2xl); font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 4px 20px rgba(214,0,0,0.4); }
    .lp-step h3 { color: #1e2a40; font-size: var(--schrift-l); font-weight: 800; margin: 0 0 var(--raum-2); }
    .lp-step p { color: #555; font-size: var(--schrift-s); line-height: 1.6; margin: 0; }

    /* ===== VEHICLE CARDS ===== */
    .lp-vehicle { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--rund-m); padding: var(--raum-6) var(--raum-5); text-align: center; height: 100%; transition: all 0.4s; }
    .lp-vehicle:hover { transform: translateY(-10px); box-shadow: 0 20px 60px rgba(214,0,0,0.15); border-color: rgba(214,0,0,0.3); }
    .lp-vehicle h3 { color: #1e2a40; font-size: var(--schrift-xl); font-weight: 800; margin: var(--raum-3) 0 var(--raum-1); }
    .lp-vehicle p { color: #555; font-size: var(--schrift-s); line-height: 1.6; }
    .lp-vehicle .lp-price { font-size: var(--schrift-3xl); font-weight: 900; color: #D60000; margin: var(--raum-2) 0 var(--raum-1); }
    .lp-vehicle .lp-price-note { font-size: var(--schrift-s); color: #999; }

    /* ===== PREMIUM TABLE ===== */
    .lp-table-wrap { border-radius: var(--rund-m); overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.08); border: 1px solid #eee; }
    .lp-table { width: 100%; border-collapse: collapse; background: #fff; }
    .lp-table thead { background: linear-gradient(135deg, #1e2a40, #3b5998); }
    .lp-table thead th { padding: var(--raum-4) var(--raum-4); color: #fff; font-weight: 700; font-size: var(--schrift-m); text-align: center; }
    .lp-table thead th:first-child { text-align: left; }
    .lp-table tbody td { padding: var(--raum-3) var(--raum-4); border-bottom: 1px solid #f0f0f0; color: #555; text-align: center; font-size: var(--schrift-m); }
    .lp-table tbody td:first-child { text-align: left; color: #1e2a40; font-weight: 600; }
    .lp-table tbody tr:hover { background: #fafafa; }
    .lp-table .lp-col-atav { background: #fef3f3; color: #D60000 !important; font-weight: 700; }
    .lp-table thead .lp-col-atav { background: rgba(255,255,255,0.15); font-size: var(--schrift-m); font-weight: 800; color: #ff6b6b; }
    .lp-table tbody tr:last-child td { border-bottom: none; }

    /* ===== INCLUDED LIST ===== */
    .lp-included-item { display: flex; align-items: center; gap: var(--raum-3); padding: var(--raum-3) 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .lp-included-item:last-child { border-bottom: none; }
    .lp-included-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #D60000, #ff4444); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--schrift-m); font-weight: 700; box-shadow: 0 3px 15px rgba(214,0,0,0.3); }
    .lp-included-text { color: #fff; font-size: var(--schrift-m); line-height: 1.5; }
    .lp-included-text strong { color: #fff; }

    /* ===== FAQ ACCORDION ===== */
    .lp-faq-item { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--rund-m); margin-bottom: 12px; overflow: hidden; transition: all 0.3s; }
    .lp-faq-item:hover { border-color: rgba(214,0,0,0.25); box-shadow: 0 4px 16px rgba(214,0,0,0.08); }
    .lp-faq-item.active { border-color: rgba(214,0,0,0.3); box-shadow: 0 4px 20px rgba(214,0,0,0.1); }
    .lp-faq-q { display: flex; justify-content: space-between; align-items: center; padding: var(--raum-4) var(--raum-5); cursor: pointer; font-weight: 700; font-size: var(--schrift-m); color: #1e2a40; }
    .lp-faq-q:hover { color: #D60000; }
    .lp-faq-arrow { transition: transform 0.3s; font-size: var(--schrift-l); color: #D60000; flex-shrink: 0; margin-left: 16px; }
    .lp-faq-item.active .lp-faq-arrow { transform: rotate(180deg); }
    .lp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .lp-faq-item.active .lp-faq-a { max-height: 300px; }
    .lp-faq-a-inner { padding: 0 var(--raum-5) var(--raum-4); color: #555; line-height: 1.7; font-size: var(--schrift-m); }

    /* ===== CTA SECTION ===== */
    .lp-cta-section { background: linear-gradient(135deg, #D60000 0%, #8b0000 50%, #5c0000 100%); padding: var(--raum-9) 0; text-align: center; position: relative; overflow: hidden; }
    .lp-cta-section::before { content: ''; position: absolute; top: -50%; right: -30%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); border-radius: 50%; }
    .lp-cta-section * { position: relative; z-index: 1; }
    .lp-cta-section h2 { color: #fff; font-size: var(--schrift-3xl); font-weight: 900; }
    .lp-cta-section p { color: #fff; font-size: var(--schrift-l); }
    .lp-cta-white { display: inline-block; background: #fff; color: #D60000 !important; padding: var(--raum-4) var(--raum-7); border-radius: var(--rund-voll); font-size: var(--schrift-l); font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s; box-shadow: 0 4px 25px rgba(0,0,0,0.2); }
    .lp-cta-white:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 35px rgba(0,0,0,0.3); color: #D60000; text-decoration: none; }

    /* ===== CARD GRID SPACING ===== */
    .lp-card-grid > div { margin-bottom: 30px !important; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 640px) {
        .lp-hero h1 { font-size: var(--schrift-3xl); }
        .lp-hero { padding: var(--raum-8) 0 var(--raum-7); }
        .lp-highlight-text { font-size: var(--schrift-3xl); }
        .lp-highlight-box { padding: var(--raum-4) var(--raum-6); }
        .lp-section-h2 { font-size: var(--schrift-2xl); }
        .lp-section-sub { font-size: var(--schrift-m); }
        .lp-cta-section h2 { font-size: var(--schrift-2xl); }
        .lp-card { padding: var(--raum-6) var(--raum-4); }
        .lp-step { padding: var(--raum-6) var(--raum-4); }
        .lp-vehicle { padding: var(--raum-6) var(--raum-4); }
        .lp-table { font-size: var(--schrift-s); }
        .lp-table thead th, .lp-table tbody td { padding: var(--raum-2) var(--raum-2); }
        .lp-faq-q { font-size: var(--schrift-m); padding: var(--raum-4) var(--raum-4); }
    }