/*
 * Design tokens from trainer-at (brand colours after otdv.at).
 * Pure #ff0000 on white only reaches ~4:1, so text and links use --brand-text.
 */
:root {
    --ink-50: #fafafa;
    --ink-100: #f4f4f5;
    --ink-200: #e4e4e7;
    --ink-300: #d4d4d8;
    --ink-400: #a1a1aa;
    --ink-500: #71717a;
    --ink-700: #3f3f46;
    --ink-900: #18181b;
    --brand: #ff0000;
    --brand-text: #d40000;
    --brand-dark: #c50000;
    --brand-soft: #ffe5e5;
    --graphite: #4b4b4b;
    --graphite-text: #7a7a7a;
    --ok: #15803d;
    --ok-soft: #dcfce7;
    --radius: 1rem;
    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-y: scroll; scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-900);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-text); }
a:hover { color: var(--brand-dark); }

h1, h2 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 1rem; }
h3 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    margin: 1.75rem 0 0.5rem;
}

.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* Layout */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; width: 100%; padding-top: 2.5rem; padding-bottom: 4rem; }

.site-header { border-bottom: 4px solid var(--brand); background: #fff; }
.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.site-header__logo img { display: block; height: 3rem; width: auto; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.site-nav__link {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--graphite);
    text-decoration: none;
}
.site-nav__link:hover, .site-nav__link.is-active { color: var(--brand-text); }
.site-nav__logout { margin: 0; }

.site-footer { background: var(--graphite); color: #fff; font-size: 0.875rem; }
.site-footer .container { padding-top: 2rem; padding-bottom: 2rem; text-align: right; }

/* Buttons */
.btn, input[type="submit"], button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.55rem 1.25rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    background: var(--brand);
    color: #fff;
}
.btn:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: var(--brand-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--graphite); border-color: var(--ink-300); }
.btn-outline:hover { background: var(--ink-50); color: var(--graphite); }

:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }

/* Forms (felogin and kader) */
label { display: block; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); margin-bottom: 0.25rem; }
input[type="text"], input[type="password"], input[type="email"], select {
    width: 100%;
    border: 1px solid var(--ink-200);
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.55rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--ink-900);
}
input:focus, select:focus { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25); }

/* Login page: centred card like the athlete login in trainer-at */
.frame-type-felogin_login { max-width: 24rem; margin: 0 auto; }
.frame-type-felogin_login header h2 { text-align: center; font-size: 1.5rem; margin-top: 0; }
.frame-type-felogin_login fieldset {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 0;
    display: grid;
    gap: 1rem;
}
.frame-type-felogin_login legend { display: none; }
.frame-type-felogin_login input[type="submit"] { width: 100%; }
.frame-type-felogin_login a { font-size: 0.875rem; }

/* Kader plugins */
.kader-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kader-profile, .kader-points { margin-bottom: 2rem; }
.kader-profile h2 { margin-top: 0; }
.kader-profile__club { color: var(--graphite-text); margin-top: -0.5rem; }
.kader-dl {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
}
.kader-dl dt { color: var(--ink-500); font-size: 0.875rem; }
.kader-dl dd { margin: 0; font-weight: 500; }

.kader-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.kader-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-500);
    border-bottom: 2px solid var(--ink-200);
    padding: 0.5rem 0.75rem;
}
.kader-table td { border-bottom: 1px solid var(--ink-100); padding: 0.65rem 0.75rem; }
.kader-table tbody tr:hover { background: var(--ink-50); }
.kader-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }

.kader-total { font-size: 1.125rem; }
.kader-total strong { color: var(--brand-text); font-size: 1.5rem; margin-left: 0.25rem; }
.kader-note { color: var(--graphite-text); }

.kader-periods { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.kader-periods a {
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--ink-700);
    text-decoration: none;
}
.kader-periods a.is-active { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }

.kader-form {
    display: grid;
    gap: 1rem;
    max-width: 32rem;
    padding: 1.25rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
}
.kader-form input[type="submit"] { justify-self: start; }

/* Flash messages */
.typo3-messages { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.typo3-messages .alert { border-radius: 0.75rem; padding: 0.75rem 1rem; }
.typo3-messages .alert p { margin: 0; }
.alert-success { background: var(--ok-soft); color: var(--ok); }
.alert-danger, .alert-error { background: var(--brand-soft); color: var(--brand-dark); }

@media (max-width: 40rem) {
    .kader-dl { grid-template-columns: 1fr; gap: 0.1rem; }
    .kader-dl dd { margin-bottom: 0.5rem; }
    .kader-table { font-size: 0.875rem; }
    .kader-table th, .kader-table td { padding: 0.5rem 0.4rem; }
}

/* Training calendar: one card per day, styled after trainer-at */
.kader-training-calendar { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.kt-day { border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 1.25rem; }
.kt-day-badge { display: inline-block; background: var(--ink-100); color: var(--graphite); border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.kt-entry { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ink-100); }
.kt-entry p { margin: 0; }
.kt-time { font-weight: 600; color: var(--graphite); }
.kt-title { font-weight: 600; margin-top: 0.5rem !important; }
.kt-meta { font-size: 0.875rem; color: var(--graphite-text); margin-top: 0.5rem !important; }
.kt-trainers { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.5rem; }
.kt-trainer { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--graphite); }
.kt-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--brand); }
.kt-chip { display: inline-block; margin-top: 0.5rem; background: var(--brand-soft); color: var(--brand-text); border-radius: 999px; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; }
.kt-entry .kader-training-assign { margin-top: 0.75rem; }