:root {
    --bg1: #0a0f24;
    --bg2: #121a33;
    --panel: #0f1734;
    --panel2: #0e1530;
    --brand: #45ffb6;
    --brand-dark: #2fe69b;
    --swap: #5bd0ff;
    --swap-dark: #158bd2;
    --text: #e6eef6;
    --muted: #a0b7d1;
    --border: rgba(255, 255, 255, 0.10);
    --ok: #80ed99;
    --bad: #ff7b7b;
    --tooltip-bg: #0b1229;
    --tooltip-border: rgba(255, 255, 255, 0.15);
    --pertruck: #80ed99;
    /* Grün: je Fahrzeug */
    --fleet: #77a2ff;
    /* Blau: Flotte gesamt */
}


#swap, #db, #tco {
    margin: 0;
    padding: 32px 18px;
    font-family: 'Inter', system-ui, sans-serif;
    background: linear-gradient(120deg, var(--bg1), var(--bg2));
    background-size: 200% 200%;
    animation: bgMove 60s ease infinite;
    color: var(--text);
    animation: bgMove 60s linear infinite alternate;
    background-size: 200% 200%;

    html {
        margin: 0;
        padding: 0
    }

    header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
        .logo {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            font-weight: 800;
            color: #001b12;
            background: linear-gradient(135deg, var(--brand), #8affd7);
            box-shadow: 0 0 12px rgba(69, 255, 182, .5)
        }
    }
    
    h1 {
        margin: 0;
        font-size: 28px;
        font-weight: 800
    }

    @keyframes bgMove {
        from {
            background-position: 0% 50%;
        }
    
        to {
            background-position: 100% 50%;
        }
    }
    
    .wrap {
        max-width: 1120px;
        margin: 0 auto
    }
    
    
    .intro {
        background: rgba(18, 32, 66, .6);
        backdrop-filter: blur(12px);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 14px;
        color: var(--muted);
        line-height: 1.5;
        margin-top: 6px
    }
    
    .card {
        background: linear-gradient(180deg, rgba(15, 23, 52, .8), rgba(12, 19, 45, .7));
        border: 1px solid var(--border);
        backdrop-filter: blur(16px);
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .35)
    }
    
    .card:hover {
        transform: translateY(-4px);
    }
    
    .card h2 {
        margin: 0 0 10px;
        font-size: 18px;
        font-weight: 600
    }

    label {
        font-size: 13px;
        color: var(--muted);
        display: block;
        margin: 8px 0 6px
    }

    input {
        width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: rgba(13, 21, 48, .8);
        color: var(--text)
    }
    input[type="number"] {
        width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: rgba(13, 21, 48, 0.8);
        color: var(--text);
    }

    button {
        border: none;
        border-radius: 12px;
        padding: 12px 14px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s
    }

    footer {
        margin-top: 20px;
        color: #8fa6bf;
        font-size: 12px
    }
}