.board-page {
    --b: clamp(15px, .55vw + 9px, 24px);
    min-height: 100vh;
    font-size: var(--b);
}

.board { display: flex; flex-direction: column; gap: 1.1em; min-height: 100vh; padding: 1.1em 1.5em 1em; }

.board__head { display: flex; align-items: center; gap: 1.25em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
.board__title { display: flex; flex: 1; align-items: center; gap: .85em; min-width: 0; }
.board__title .brand__mark { width: calc(var(--b) * 2.6); height: calc(var(--b) * 2.6); border-radius: calc(var(--b) * .7); }
.board__title .brand__mark .icon { width: 62%; height: 62%; }
.board__title .brand__mark--logo { width: auto; max-width: calc(var(--b) * 9); }
.board__title > div { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.board__stable { color: var(--ink-3); font: 600 .78em var(--condensed); letter-spacing: .16em; text-transform: uppercase; }
.board__title h1 { font-size: 1.75em; line-height: 1.1; }
.board__summary { display: flex; flex-wrap: wrap; gap: .5em; }
.board-chip {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3em .8em;
    border-radius: 999px;
    background: var(--lesson-bg);
    color: var(--lesson);
    font-size: .9em;
    white-space: nowrap;
}
.board-chip strong { color: var(--ink); }
.board-chip--trail { background: var(--trail-bg); color: var(--trail); }
.board-chip--group { background: var(--group-bg); color: var(--group); }
.board__clock { display: flex; align-items: baseline; gap: .25em; color: var(--ink); font: 600 3em/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.board__clock span { color: var(--ink-3); font-size: .3em; font-weight: 500; letter-spacing: .04em; }
.board .theme-toggle { flex: none; }

.board__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 29em), 1fr)); gap: 1em; align-items: start; }
.board__empty { grid-column: 1 / -1; margin: 3em 0; color: var(--ink-3); font-size: 1.3em; text-align: center; }

.board-slot {
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: .32em solid var(--lesson);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: opacity .3s, box-shadow .3s;
}
.board-slot--trail { border-left-color: var(--trail); }
.board-slot--group { border-left-color: var(--group); }

.board-slot__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3em .8em;
    align-items: center;
    padding: .7em 1em .65em;
    background: linear-gradient(90deg, var(--lesson-bg), var(--surface) 80%);
}
.board-slot--trail .board-slot__head { background: linear-gradient(90deg, var(--trail-bg), var(--surface) 80%); }
.board-slot--group .board-slot__head { background: linear-gradient(90deg, var(--group-bg), var(--surface) 80%); }
.board-slot__time { display: inline-flex; align-items: center; gap: .35em; color: var(--lesson); font-size: 1.5em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.board-slot__time .icon { width: .8em; height: .8em; }
.board-slot__time span { color: var(--ink-3); font-size: .62em; font-weight: 500; }
.board-slot--trail .board-slot__time { color: var(--trail); }
.board-slot--group .board-slot__time { color: var(--group); }
.board-slot__meta { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: .3em 1em; align-items: center; color: var(--ink-2); font-size: .88em; }
.board-slot__meta > span { display: inline-flex; align-items: center; gap: .35em; }
.board-slot__meta .icon { color: var(--ink-3); }
.board-slot__meta strong { color: var(--ink); }
.board-slot__guide .avatar { width: calc(var(--b) * 1.5); height: calc(var(--b) * 1.5); font-size: calc(var(--b) * .6); }

.board-slot__state {
    justify-self: end;
    padding: .2em .75em;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--ink-3);
    font: 600 .78em/1.4 var(--condensed);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.board-slot__state:empty { display: none; }

.board-slot__list { margin: 0; padding: 0; list-style: none; }
.board-slot__list li {
    display: grid;
    grid-template-columns: minmax(0, 6.5em) minmax(0, 1.25fr) minmax(0, 1fr);
    gap: .8em;
    align-items: center;
    padding: .55em 1em;
    border-top: 1px solid var(--line);
}
.board-slot--trail .board-slot__list li, .board-slot--group .board-slot__list li { grid-template-columns: 2em minmax(0, 1.25fr) minmax(0, 1fr); }

.board-pos { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--trail-bg); color: var(--trail); font-weight: 600; font-variant-numeric: tabular-nums; }
.board-pos--group { background: var(--group-bg); color: var(--group); }
.board-person { display: inline-flex; align-items: center; gap: .45em; min-width: 0; color: var(--ink-2); }
.board-person > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-person .avatar { width: calc(var(--b) * 1.7); height: calc(var(--b) * 1.7); font-size: calc(var(--b) * .66); }
.board-rider { overflow: hidden; color: var(--ink); font-size: 1.1em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.board-horse { display: inline-flex; align-items: center; gap: .5em; min-width: 0; }
.board-horse .horse-icon { width: 2.1em; height: 2.1em; }
.board-horse > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.board-horse strong { font-size: 1.05em; }
.board-horse small { color: var(--sand-ink); font-size: .8em; }
.board-missing { color: var(--danger); font-weight: 500; }

.board-slot.is-current { border-color: var(--lesson); box-shadow: 0 0 0 .14em var(--lesson), var(--shadow); }
.board-slot--trail.is-current { border-color: var(--trail); box-shadow: 0 0 0 .14em var(--trail), var(--shadow); }
.board-slot--group.is-current { border-color: var(--group); box-shadow: 0 0 0 .14em var(--group), var(--shadow); }
.board-slot.is-current .board-slot__state { border-color: var(--lesson); background: var(--lesson); color: var(--surface); }
.board-slot--trail.is-current .board-slot__state { border-color: var(--trail); background: var(--trail); }
.board-slot--group.is-current .board-slot__state { border-color: var(--group); background: var(--group); }
.board-slot.is-next { box-shadow: 0 0 0 .1em color-mix(in srgb, var(--lesson) 45%, transparent), var(--shadow); }
.board-slot--trail.is-next { box-shadow: 0 0 0 .1em color-mix(in srgb, var(--trail) 50%, transparent), var(--shadow); }
.board-slot--group.is-next { box-shadow: 0 0 0 .1em color-mix(in srgb, var(--group) 50%, transparent), var(--shadow); }
.board-slot.is-next .board-slot__state { border-color: color-mix(in srgb, var(--lesson) 45%, var(--surface)); background: var(--lesson-bg); color: var(--lesson); }
.board-slot--trail.is-next .board-slot__state { border-color: color-mix(in srgb, var(--trail) 45%, var(--surface)); background: var(--trail-bg); color: var(--trail); }
.board-slot--group.is-next .board-slot__state { border-color: color-mix(in srgb, var(--group) 45%, var(--surface)); background: var(--group-bg); color: var(--group); }
.board-slot.is-past { opacity: .5; box-shadow: none; }
.board-slot.is-past .board-slot__list { display: none; }
.board-slot.is-cancelled { opacity: .7; }
.board-slot.is-cancelled .board-slot__head { background: repeating-linear-gradient(-45deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); }
.board-slot.is-cancelled .board-slot__time { color: var(--ink-3); text-decoration: line-through; }
.board-slot__cancelled { margin: 0; padding: .6em 1em; border-top: 1px solid var(--line); color: var(--danger); font-weight: 600; }

.board__foot { display: flex; justify-content: space-between; gap: 1em; margin-top: auto; padding-top: .5em; color: var(--ink-3); font-size: .72em; }
.board__foot a { color: var(--ink-3); }
.board.is-stale .board__foot > span:first-child { color: var(--warn); }
.board.is-stale .board__foot > span:first-child::after { content: " · keine Verbindung, zeigt den letzten Stand"; }

@media (max-width: 760px) {
    .board { padding: 1em; }
    .board__head { flex-wrap: wrap; }
    .board__summary { order: 3; width: 100%; }
    .board-slot__list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .board-slot__list li > :first-child { grid-column: 1 / -1; }
    .board-slot--trail .board-slot__list li, .board-slot--group .board-slot__list li { grid-template-columns: 2em minmax(0, 1fr) minmax(0, 1fr); }
    .board-slot--trail .board-slot__list li > :first-child, .board-slot--group .board-slot__list li > :first-child { grid-column: auto; }
}