:root {
    color-scheme: light dark;
    --blau: #104A8A;
    --platzhalter: #4F8A8A;
    --rand: rgba(127, 127, 127, 0.25);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    background: light-dark(#f2f2f7, #000);
    color: light-dark(#000, #fff);
    padding-bottom: 72px;
}

main { padding: 16px; max-width: 640px; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 8px 0 4px; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }

.tabs {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    background: light-dark(#fff, #1c1c1e);
    border-top: 1px solid var(--rand);
    padding-bottom: env(safe-area-inset-bottom);
}

.tabs a {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    text-decoration: none;
    color: light-dark(#555, #aaa);
    font-size: 0.95rem;
}

.tabs a.aktiv { color: var(--blau); font-weight: 600; }

.karte {
    background: light-dark(#fff, #1c1c1e);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.karte-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wochentag { color: light-dark(#666, #999); font-size: 0.9rem; }
.zeiten { font-size: 1.1rem; font-weight: 600; margin: 4px 0 0; }

.chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #fff;
}
.chip-platzhalter { background: var(--platzhalter); }

.timeline-zeile {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rand);
}
.timeline-zeile:last-child { border-bottom: none; }
.timeline-zeit {
    flex: 0 0 92px;
    font-variant-numeric: tabular-nums;
    color: light-dark(#666, #999);
    font-size: 0.9rem;
}
.timeline-titel { font-weight: 600; }
.timeline-neben, .timeline-hinweis {
    font-size: 0.85rem;
    color: light-dark(#666, #999);
}

.liste { display: flex; flex-direction: column; gap: 1px; background: var(--rand); border-radius: 12px; overflow: hidden; }
.listenzeile {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: light-dark(#fff, #1c1c1e);
}
.listenzeile.ist-platzhalter { opacity: 0.7; }
.listen-datum {
    flex: 0 0 64px;
    display: flex;
    flex-direction: column;
    color: light-dark(#666, #999);
    font-size: 0.85rem;
}
.wochentag-kurz { font-weight: 600; color: light-dark(#000, #fff); }
.listen-titel { font-weight: 600; }
.listen-zeit { font-size: 0.85rem; color: light-dark(#666, #999); }

.hinweis { color: light-dark(#666, #999); font-size: 0.9rem; }
.stand { color: light-dark(#999, #666); font-size: 0.75rem; text-align: center; margin-top: 24px; }

.login {
    max-width: 320px;
    margin: 20vh auto 0;
    padding: 24px;
    text-align: center;
}
.login form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.login input, .login button, #push-erlauben {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--rand);
    font-size: 1rem;
}
.login button, #push-erlauben {
    background: var(--blau);
    color: #fff;
    border: none;
    font-weight: 600;
}
.fehler { color: #e53935; }