/* Bestehendes Styling beibehalten */
.container { max-width: 900px; margin: auto; }

.search-mask {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    border-bottom: 4px solid #ff4500;
    margin-bottom: 30px;
}

.search-form {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.input-group { display: flex; flex-direction: column; flex: 1; }

label { font-size: 12px; color: #888; margin-bottom: 5px; text-transform: uppercase; }

input {
    background: #2a2a2a;
    border: 1px solid #444;
    padding: 10px;
    color: white;
    border-radius: 4px;
}

button {
    background: #ff4500;
    color: white;
    border: none;
    padding: 11px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

button:hover { background: #e63e00; }

table {
    width: 100%;
    border-collapse: collapse;
    background: #1e1e1e;
}

th, td { padding: 12px; text-align: left; border-bottom: 1px solid #333; }

th { color: #ff4500; font-size: 13px; text-transform: uppercase; }

/* Podium Farben */
.pos-1 { color: #ffd700; font-weight: bold; text-shadow: 0 0 5px rgba(255,215,0,0.3); }
.pos-2 { color: #c0c0c0; font-weight: bold; }
.pos-3 { color: #cd7f32; font-weight: bold; }

/* --- MOBILE RESPONSIVE TRICK --- */

@media screen and (max-width: 768px) {
    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    /* Tabellen-Header verstecken */
    table thead {
        display: none;
    }

    table, table tbody, table tr, table td {
        display: block;
        width: 100%;
    }

    table tr {
        margin-bottom: 15px;
        border: 1px solid #444;
        border-radius: 8px;
        background: #252525;
        padding: 10px;
    }

    table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid #333;
    }

    table td:last-child {
        border-bottom: none;
    }

    /* Labels für die Karten-Ansicht einfügen */
    table td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        text-align: left;
        font-weight: bold;
        color: #ff4500;
        text-transform: uppercase;
        font-size: 11px;
    }
}

a {
	color: #ff3b3b;
	text-decoration: none;
}