*{box-sizing:border-box}html,body{
    margin:0;
    font:16px Arial,sans-serif;
    color:#e5e7eb;
}

body.radiostatus{
    background:transparent !important;
}header{display:flex;justify-content:space-between;align-items:center;padding:18px 5%;background:#1f2937}a{color:#93c5fd}main.grid{max-width:1050px;margin:30px auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 16px}.card{background:#1f2937;padding:24px;border-radius:14px;box-shadow:0 8px 30px #0005}.wide{max-width:1200px;margin:25px auto;padding:0 12px}label{display:block;margin:12px 0}input,textarea,select,button{width:100%;padding:11px;margin-top:5px;border-radius:8px;border:1px solid #4b5563;background:#111827;color:#fff}button{background:#2563eb;border:0;font-weight:bold;cursor:pointer}.notice{background:#064e3b;padding:10px;border-radius:8px}.error{background:#7f1d1d;padding:10px}.hp{position:absolute;left:-9999px}table{width:100%;border-collapse:collapse;background:#1f2937}th,td{padding:10px;border-bottom:1px solid #374151;text-align:left;vertical-align:top}audio{width:100%;margin-top:15px}@media(max-width:750px){main.grid{grid-template-columns:1fr}table{font-size:13px}}

.button-link {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.3);
}

#status {
    color: #ffffff !important;
}

.user-table {
    width: 100%;
    border-collapse: collapse;
}

.user-table th,
.user-table td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.inline-form {
    display: inline-block;
    margin: 2px 4px 2px 0;
}
.songticker{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    margin:10px 0;
}

.songticker span{
    display:inline-block;
    padding-left:100%;
    animation:ticker 18s linear infinite;
}

@keyframes ticker{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-100%);
    }
}


/* Radiostatus Breite */

body.radiostatus .card {
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
}

body.radiostatus header {
    display: none;
}

@media (max-width: 750px) {

    .card {
        padding: 10px;
    }

    #playerButtons .button-link {
        display: block;
        width: 100%;
        margin: 6px 0;
        text-align: center;
    }

    #status {
        min-width: auto !important;
        font-size: 14px;
    }

    #songTicker {
        margin: 8px 0 !important;
    }

    h2 {
        font-size: 20px;
        text-align: center;
    }
}


.button-link{
    transition: all 0.2s ease;
}

.button-link:hover{
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.8);
    box-shadow: 0 0 8px rgba(255,255,255,0.35);
    color:#ffffff;
}