:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f5f5f5; color: #181818; }
a { color: inherit; }
.centered { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.container { width: min(900px, calc(100% - 2rem)); margin: 2rem auto; }
.card, .band-card { background: white; border-radius: 14px; padding: 1rem; box-shadow: 0 1px 7px rgba(0,0,0,.08); }
.login-card { width: min(430px, 100%); }
form { display: grid; gap: .65rem; }
input, select, button { font: inherit; }
input, select { width: 100%; padding: .8rem; border: 1px solid #bbb; border-radius: 9px; background: white; }
button[type="submit"] { padding: .8rem 1rem; border: 0; border-radius: 9px; background: #111; color: white; cursor: pointer; }
.error { color: #a00000; }
.topbar { background: #111; color: white; padding: .9rem max(1rem, calc((100% - 900px)/2)); display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.topbar nav { display: flex; gap: .9rem; flex-wrap: wrap; }
.topbar a { text-decoration: none; opacity: .9; }
.band-list { display: grid; gap: .8rem; }
.band-card { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.band-card h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.band-card p { margin: 0; color: #555; }
.stars { display: flex; gap: .15rem; }
.star { border: 0; background: transparent; padding: .1rem; cursor: pointer; font-size: 2rem; color: #bbb; }
.star.active { color: #e3a400; }
.status { width: 100%; min-height: 1.2em; color: #555; }
.filter { display: flex; align-items: end; gap: .6rem; margin: 1rem 0 1.5rem; }
.filter label { flex: 1; }
.filter select { width: auto; min-width: 90px; }
.schedule-item .time { font-weight: 700; margin-bottom: .2rem; }
.rating-badge { text-align: right; color: #e3a400; font-size: 1.1rem; }
.rating-badge span { display: block; color: #555; font-size: .85rem; }
.table-wrap { overflow-x: auto; background: white; border-radius: 14px; box-shadow: 0 1px 7px rgba(0,0,0,.08); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .8rem; border-bottom: 1px solid #eee; text-align: left; }
th { background: #fafafa; }
@media (max-width: 600px) {
    .topbar { align-items: flex-start; }
    .topbar nav { width: 100%; }
    .band-card { align-items: flex-start; }
    .stars { width: 100%; justify-content: space-between; }
    .star { flex: 1; font-size: 2.2rem; }
}

/* Mein Plan: Festival-Tage und Terminkollisionen */
.schedule-day { margin: 2rem 0 2.5rem; }
.schedule-day:first-of-type { margin-top: 1rem; }
.schedule-day-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 .8rem;
    padding-bottom: .55rem;
    border-bottom: 2px solid #181818;
}
.schedule-day-header h2 { margin: 0; font-size: 1.35rem; }
.schedule-day-header span { color: #666; font-size: .9rem; white-space: nowrap; }
.schedule-main { min-width: 0; flex: 1; }
.schedule-item h3 { margin: 0 0 .25rem; font-size: 1.2rem; }
.schedule-item.has-conflict { border: 2px solid #b42318; }
.conflict-warning {
    margin-top: .8rem;
    padding: .7rem .8rem;
    border-radius: 9px;
    background: #fff1f0;
    color: #7a271a;
    font-size: .9rem;
}
.conflict-warning > strong,
.conflict-warning > span { display: block; }
.conflict-warning ul { margin: .45rem 0 0; padding-left: 1.25rem; }
.conflict-warning li + li { margin-top: .2rem; }

@media (max-width: 600px) {
    .schedule-day-header { align-items: flex-end; }
    .schedule-day-header h2 { font-size: 1.2rem; }
    .rating-badge { width: 100%; text-align: left; }
}