/* URB Tube – bewusst ohne CSS-Variablen und ohne CSS-Grid,
   damit IE11 und iOS9-Safari es sauber rendern. Flexbox mit Prefixen. */

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #0f1115;
    color: #e7e9ee;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

a { color: #7cc0ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Topbar ---- */
.topbar {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    padding: 10px 16px;
    background: #171a21;
    border-bottom: 1px solid #262b36;
}
.brand {
    font-weight: bold;
    font-size: 20px;
    color: #ff5c5c;
    margin-right: 20px;
    white-space: nowrap;
}
.search {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-flex: 1; -ms-flex: 1 1 240px; flex: 1 1 240px;
    max-width: 620px;
}
.search input {
    -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
    padding: 9px 12px;
    border: 1px solid #2c3340;
    background: #0f1115;
    color: #e7e9ee;
    border-radius: 4px 0 0 4px;
    min-width: 0;
}
.search button {
    padding: 9px 16px;
    border: 1px solid #2c3340;
    border-left: 0;
    background: #2a3140;
    color: #e7e9ee;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.search button:hover { background: #343d4f; }
.menu { margin-left: auto; padding-left: 16px; }
.menu a { margin-left: 16px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
.foot { text-align: center; color: #5b6472; padding: 24px 0; font-size: 13px; }

/* ---- Ergebnisliste (flex statt grid) ---- */
.grid {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 0 -8px;
}
.card {
    -ms-flex: 0 0 25%; flex: 0 0 25%;
    max-width: 25%;
    padding: 8px;
}
.card .inner {
    background: #171a21;
    border: 1px solid #232833;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    height: 100%;
}
.card .thumb {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}
.card .meta { padding: 8px 10px; }
.card .t {
    color: #e7e9ee;
    font-size: 14px;
    font-weight: 600;
    display: block;
    /* zwei Zeilen abschneiden – Fallback: einfach überlaufen lassen */
    max-height: 40px;
    overflow: hidden;
}
.card .a { color: #8b94a3; font-size: 12px; margin-top: 4px; }
.card .d {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #b9c1cf;
    background: #000;
    padding: 1px 5px;
    border-radius: 3px;
}

@media (max-width: 900px) { .card { -ms-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; } }
@media (max-width: 640px) { .card { -ms-flex: 0 0 50%;     flex: 0 0 50%;     max-width: 50%; } }
@media (max-width: 420px) { .card { -ms-flex: 0 0 100%;    flex: 0 0 100%;    max-width: 100%; } }

/* ---- Watch ---- */
.player { background: #000; border-radius: 6px; overflow: hidden; }
.player video { display: block; width: 100%; height: auto; background: #000; }
.vtitle { font-size: 20px; margin: 16px 0 4px; }
.vauthor { color: #8b94a3; margin-bottom: 16px; }
.qbar a {
    display: inline-block;
    margin-right: 8px;
    padding: 5px 12px;
    background: #2a3140;
    border-radius: 4px;
    color: #e7e9ee;
    font-size: 13px;
}
.qbar a.active { background: #ff5c5c; color: #fff; }

/* ---- Formulare / Boxen ---- */
.box {
    max-width: 460px;
    margin: 40px auto;
    background: #171a21;
    border: 1px solid #232833;
    border-radius: 8px;
    padding: 24px;
}
.box h1 { margin-top: 0; font-size: 22px; }
.box label { display: block; margin: 14px 0 4px; font-size: 14px; color: #b9c1cf; }
.box input[type=text],
.box input[type=password],
.box input[type=file] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #2c3340;
    background: #0f1115;
    color: #e7e9ee;
    border-radius: 4px;
}
.btn {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 20px;
    background: #ff5c5c;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
}
.btn:hover { background: #ff7070; }

.msg  { padding: 12px 14px; border-radius: 6px; margin: 14px 0; }
.msg.err { background: #3a1d1d; border: 1px solid #6b2b2b; color: #ffb4b4; }
.msg.ok  { background: #16301f; border: 1px solid #2b6b45; color: #a9f0c4; }
.hint { color: #8b94a3; font-size: 13px; }
.empty { text-align: center; color: #8b94a3; padding: 60px 0; }

/* ---- Server-Variante: Vorbereitung / Qualität / Einstellungen ---- */
.prepare { text-align:center; padding:50px 16px; }
.prepare .spin {
    display:inline-block; width:34px; height:34px; margin-bottom:16px;
    border:4px solid #2c3340; border-top-color:#ff5c5c; border-radius:50%;
    -webkit-animation:sp 1s linear infinite; animation:sp 1s linear infinite;
}
@-webkit-keyframes sp { to { -webkit-transform:rotate(360deg); } }
@keyframes sp { to { transform:rotate(360deg); } }
.prepare .big { font-size:18px; margin-bottom:6px; }
.qbar { margin-top:14px; }
.qbar .lbl { color:#8b94a3; font-size:13px; margin-right:6px; }
.selrow { margin:14px 0; }
.selrow select {
    padding:9px 12px; border:1px solid #2c3340; background:#0f1115; color:#e7e9ee; border-radius:4px;
}
pre.log {
    background:#0b0d11; border:1px solid #232833; border-radius:6px; padding:10px;
    overflow-x:auto; font-size:12px; color:#b9c1cf; white-space:pre-wrap; word-break:break-all;
}