:root {
    color-scheme: dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #070a0d;
    --panel: rgba(8, 12, 16, .94);
    --line: #313b45;
    --orange: #f59e0b;
    --orange-dark: #c96600;
    --text: #e8edf2;
    --muted: #9ca3af;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
    background:
      radial-gradient(circle at 50% 0%, rgba(108,61,12,.14), transparent 40%),
      #070a0d;
}
.wrap {
    width: min(1800px, 100%);
    margin: 0 auto;
    padding: 0 18px 28px;
}
.site-title {
    height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 6px;
}
.site-title h1 {
    margin: 0;
    color: var(--orange);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    letter-spacing: .2px;
}
.site-title p {
    margin: 3px 0 0;
    color: #c7cbd0;
    font-size: .98rem;
}
.hero {
    height: clamp(300px, 32vw, 500px);
    border: 1px solid #2b3138;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.20)),
      url('assets/booze-brothers-hero.png') center 34% / cover no-repeat;
    box-shadow: 0 14px 40px rgba(0,0,0,.38);
}
.card {
    background: var(--panel);
    border: 1px solid #37404a;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: 0 12px 34px rgba(0,0,0,.34);
}
.hero + .card {
    border-radius: 0 0 14px 14px;
    border-top-color: rgba(245,158,11,.28);
    margin-top: 0;
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}
label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: .95rem;
}
label.checkbox {
    flex-direction: row;
    align-items: center;
    padding-bottom: 11px;
    white-space: nowrap;
}
.checkbox input { width: auto; }
input, select, button, a.button {
    border-radius: 8px;
    border: 1px solid #46515e;
    padding: 11px 13px;
    font: inherit;
}
input, select {
    width: 100%;
    background: #0d1319;
    color: #f8fafc;
}
.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
}
button, a.button {
    background: linear-gradient(#de7905, #ba5c00);
    border-color: #ea8a19;
    color: white;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}
button.secondary, a.secondary {
    background: #222932;
    border-color: #3f4852;
}
button:hover, a.button:hover { filter: brightness(1.08); }
.muted { color: var(--muted); }
.ok { color: #86efac; }
.err { color: #fca5a5; }
.warn { color: #fde68a; }

.table-wrap {
    overflow: auto;
    padding: 0;
    max-height: 70vh;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
th, td {
    padding: 11px 12px;
    border-bottom: 1px solid #303943;
    text-align: left;
    white-space: nowrap;
}
th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--orange);
    background: #0b1117;
}
td { background: rgba(9,14,19,.93); }
tbody tr:hover td { background: rgba(20,27,34,.98); }

@media (max-width: 1000px) {
    .grid { grid-template-columns: 1fr 1fr; }
    label.checkbox { padding-bottom: 0; }
    .hero { height: 300px; background-position: center 28%; }
}
@media (max-width: 650px) {
    .wrap { padding: 0 10px 18px; }
    .site-title { height: 78px; }
    .hero { height: 230px; border-radius: 10px 10px 0 0; }
    .grid { grid-template-columns: 1fr; }
    .card { padding: 15px; }
}


/* Suchleiste wie im Booze-Brothers-Entwurf */
.hero + .card {
    position: relative;
    z-index: 5;
    margin-top: -1px;
    padding: 26px 18px 20px;
    background: rgba(8, 12, 16, .94);
    border: 1px solid rgba(122, 83, 24, .78);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 14px 34px rgba(0,0,0,.48);
}

.hero + .card .grid {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) minmax(250px, 1.15fr) auto;
    gap: 20px;
    align-items: end;
}

.hero + .card label {
    color: #e8e8e8;
    font-size: .94rem;
    font-weight: 500;
    gap: 9px;
}

.hero + .card select {
    height: 42px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(28,33,38,.98), rgba(15,19,23,.98));
    border: 1px solid #414a54;
    border-radius: 7px;
    color: #f1f1f1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.hero + .card label.checkbox {
    height: 42px;
    padding: 0 0 1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: 400;
}

.hero + .card label.checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #e56f00;
}

.hero + .card .actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.hero + .card button,
.hero + .card a.button {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 7px;
    font-weight: 600;
}

.hero + .card button[type="submit"] {
    background: linear-gradient(180deg, #e87908, #c75d00);
    border: 1px solid #f18b1a;
}

.hero + .card a.secondary {
    background: rgba(31, 36, 42, .94);
    border: 1px solid #303842;
    color: #e6e6e6;
}

.hero + .card a[href="import.php"] {
    margin-left: auto;
}

.hit-count {
    color: #aeb5bd;
    font-size: .95rem;
}

.results-title {
    margin: 26px 0 10px;
    padding: 0 10px;
    color: #f59e0b;
    font-size: 1.2rem;
    font-weight: 700;
}

.results-title span {
    color: #aeb5bd;
    font-size: .92rem;
    font-weight: 400;
}

@media (max-width: 1100px) {
    .hero + .card .grid {
        grid-template-columns: 1fr 1fr;
    }
    .hero + .card a[href="import.php"] {
        margin-left: 0;
    }
}

@media (max-width: 650px) {
    .hero + .card {
        padding: 18px 14px;
    }
    .hero + .card .grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .hero + .card .actions {
        gap: 9px;
    }
}