/* ═══════════════════════════════════════════════
   LandTank Web – Components
   ═══════════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    padding: 14px 32px; border: none; border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
    cursor: pointer; transition: all var(--transition-base);
    text-decoration: none; line-height: 1;
}
.btn-primary {
    background: var(--lt-green); color: var(--lt-white);
    box-shadow: 0 4px 14px rgba(39, 167, 55, 0.25);
}
.btn-primary:hover {
    background: var(--lt-green-dark); color: var(--lt-white);
    box-shadow: 0 6px 20px rgba(39, 167, 55, 0.35);
    transform: translateY(-2px);
}
.btn-secondary {
    background: transparent; color: var(--lt-anthracite);
    border: 2px solid var(--lt-anthracite);
}
.btn-secondary:hover {
    background: var(--lt-green-10); color: var(--lt-green-dark);
    border-color: var(--lt-green-dark);
}
.btn-white {
    background: var(--lt-white); color: var(--lt-green);
    box-shadow: var(--shadow-md);
}
.btn-white:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--lt-green-dark);
}
.btn-ghost {
    background: transparent; color: var(--lt-anthracite);
    border: 2px solid var(--lt-gray-lighter);
}
.btn-ghost:hover { border-color: var(--lt-green); color: var(--lt-green); }
.btn-lg { padding: 18px 40px; font-size: var(--text-lg); }
.btn-sm { padding: 10px 20px; font-size: var(--text-sm); }
.btn-icon { padding: 12px; border-radius: var(--radius-lg); }

/* ── Cards ── */
.card {
    background: var(--lt-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--lt-gray-lighter);
    padding: var(--space-lg);
    transition: all var(--transition-base);
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.card-flat {
    background: var(--lt-cream-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--lt-gray-lighter);
    padding: var(--space-lg);
}
.card-icon {
    width: 56px; height: 56px; border-radius: var(--radius-lg);
    background: var(--lt-green-10); display: flex; align-items: center;
    justify-content: center; font-size: 24px; margin-bottom: var(--space-md);
}
.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.card p { color: var(--lt-gray); font-size: var(--text-sm); margin: 0; }

/* ── Price Cards ── */
.price-card {
    background: var(--lt-white);
    border: 2px solid var(--lt-green-20);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}
.price-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 4px; background: linear-gradient(135deg, var(--lt-green), var(--lt-green-light));
}
.price-card:hover { border-color: var(--lt-green); box-shadow: var(--shadow-lg); }
.price-card .fuel-type {
    font-family: var(--font-heading); font-size: var(--text-lg);
    font-weight: 700; color: var(--lt-anthracite);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.price-card .fuel-icon { font-size: 32px; margin: var(--space-md) 0; }
.price-card .fuel-price {
    font-family: var(--font-heading); font-size: var(--text-hero);
    font-weight: 800; color: var(--lt-green);
    line-height: 1;
}
.price-card .fuel-price-unit { font-size: var(--text-lg); font-weight: 600; color: var(--lt-gray); }
.price-card .fuel-trend {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-sm);
    padding: 4px 12px; border-radius: var(--radius-full);
}
.fuel-trend.up { background: #FFF0F0; color: var(--lt-error); }
.fuel-trend.down { background: #E8F5E9; color: var(--lt-green); }
.fuel-trend.stable { background: var(--lt-cream); color: var(--lt-gray); }
.price-card .fuel-updated {
    font-size: var(--text-xs); color: var(--lt-gray-light); margin-top: var(--space-md);
}

/* ── Feature Cards ── */
.feature-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--lt-white);
    border: 1px solid var(--lt-gray-lighter);
    transition: all var(--transition-base);
}
.feature-card:hover {
    border-color: var(--lt-green-20);
    box-shadow: var(--shadow-md);
}

/* ── USP Bar ── */
.usp-bar {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-2xl); flex-wrap: wrap;
    padding: var(--space-xl) 0;
}
.usp-item {
    display: flex; align-items: center; gap: var(--space-sm);
    font-size: var(--text-sm); font-weight: 600; color: var(--lt-anthracite);
}
.usp-icon {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: var(--lt-green-10); display: flex; align-items: center;
    justify-content: center; font-size: 18px;
}

/* ── Badge ── */
.badge {
    display: inline-flex; align-items: center; padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em;
}
.badge-green { background: var(--lt-green-10); color: var(--lt-green); }
.badge-gold { background: rgba(212, 168, 67, 0.1); color: var(--lt-wheat); }
.badge-white { background: var(--lt-white); color: var(--lt-green); box-shadow: var(--shadow-sm); }

/* ── Forms ── */
.form-group { margin-bottom: var(--space-lg); }
.form-label {
    display: block; font-size: var(--text-sm); font-weight: 600;
    color: var(--lt-anthracite); margin-bottom: var(--space-sm);
}
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 14px 18px;
    border: 2px solid var(--lt-gray-lighter); border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: var(--text-base);
    background: var(--lt-white); color: var(--lt-charcoal);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--lt-green); outline: none;
    box-shadow: 0 0 0 3px var(--lt-green-10);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-error { font-size: var(--text-sm); color: var(--lt-error); margin-top: var(--space-xs); }
.form-checkbox {
    display: flex; align-items: flex-start; gap: var(--space-sm);
    font-size: var(--text-sm); color: var(--lt-gray);
}
.form-checkbox input { margin-top: 3px; accent-color: var(--lt-green); }

/* ── Alert ── */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md); margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
}
.alert-success { background: #E8F5E9; color: var(--lt-green-dark); border: 1px solid #C8E6C9; }
.alert-error { background: #FDEDED; color: var(--lt-error); border: 1px solid #F5C6C6; }

/* ── Divider ── */
.divider {
    height: 1px; background: var(--lt-gray-lighter);
    margin: var(--space-3xl) 0;
}

/* ── Steps ── */
.steps { display: flex; gap: var(--space-xl); counter-reset: step; }
.step { flex: 1; position: relative; text-align: center; }
.step::before {
    counter-increment: step; content: counter(step);
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-full);
    background: var(--lt-green); color: var(--lt-white);
    font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg);
    margin: 0 auto var(--space-md);
}
.step h4 { margin-bottom: var(--space-xs); }
.step p { font-size: var(--text-sm); color: var(--lt-gray); }

/* ── Stats ── */
.stat { text-align: center; }
.stat-number {
    font-family: var(--font-heading); font-size: var(--text-4xl);
    font-weight: 800; color: var(--lt-green); line-height: 1;
}
.stat-label {
    font-size: var(--text-sm); color: var(--lt-gray); margin-top: var(--space-xs);
}

@media (max-width: 640px) {
    .usp-bar { gap: var(--space-md); }
    .steps { flex-direction: column; gap: var(--space-lg); }
    .price-card .fuel-price { font-size: var(--text-3xl); }
    .btn-lg { padding: 14px 28px; font-size: var(--text-base); }
}

/* ── Cookie Consent Banner ── */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner-visible {
    transform: translateY(0);
}
.cookie-banner-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-lg); padding: var(--space-lg) var(--space-xl);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--lt-gray-lighter);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.08);
}
.cookie-text { flex: 1; }
.cookie-text strong {
    display: block; font-size: var(--text-base);
    color: var(--lt-anthracite); margin-bottom: var(--space-xs);
}
.cookie-text p {
    font-size: var(--text-sm); color: var(--lt-gray);
    margin: 0; line-height: 1.5;
}
.cookie-text a { color: var(--lt-green); font-weight: 600; }
.cookie-actions {
    display: flex; gap: var(--space-sm); flex-shrink: 0;
}

@media (max-width: 640px) {
    .cookie-banner-inner {
        flex-direction: column; text-align: center;
        padding: var(--space-lg);
    }
    .cookie-actions { width: 100%; justify-content: center; }
}

/* ── Modal Overlay ── */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-in-out;
}
.modal.hidden {
    display: none !important;
}

/* ── Modal Dialog ── */
.modal-dialog {
    width: 100%;
    max-width: 600px;
    margin: var(--space-md);
    background-color: var(--lt-white, #ffffff);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--lt-gray-lighter, #e5e7eb);
    overflow: hidden;
}
@keyframes modal-slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ── Modal Structure ── */
.modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--lt-gray-lighter, #e5e7eb);
    background-color: var(--lt-cream-light, #faf9f6);
}
.modal-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg, 18px);
    font-weight: 700;
    color: var(--lt-charcoal, #1f2937);
}
.modal-header .btn-close {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--lt-gray, #9ca3af);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}
.modal-header .btn-close:hover {
    color: var(--lt-charcoal, #1f2937);
}
.modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
    font-size: var(--text-base, 14px);
    color: var(--lt-charcoal, #4b5563);
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--lt-gray-lighter, #e5e7eb);
    background-color: var(--lt-cream-light, #faf9f6);
}
.modal-footer .btn {
    padding: 10px 20px;
    font-size: var(--text-sm, 13px);
}

/* ── Timeline (Rechnungs-Historie) ── */
.timeline {
    position: relative;
    padding-left: var(--space-xl);
    margin: 0;
    list-style: none;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 7px;
    bottom: 4px;
    width: 2px;
    background-color: var(--lt-gray-lighter, #e5e7eb);
}
.timeline-item {
    position: relative;
    margin-bottom: var(--space-lg);
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-marker {
    position: absolute;
    top: 4px;
    left: -20px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--lt-white, #ffffff);
    border: 2px solid var(--lt-green, #27a737);
    z-index: 1;
}
.timeline-marker.marker-orange {
    border-color: #f97316;
}
.timeline-marker.marker-blue {
    border-color: #3b82f6;
}
.timeline-marker.marker-red {
    border-color: #ef4444;
}
.timeline-content {
    font-size: var(--text-sm, 13px);
}
.timeline-time {
    display: block;
    font-size: 11px;
    color: var(--lt-gray, #9ca3af);
    margin-top: 4px;
}