:root {
    --st-bg: #000000;
    --st-surface: rgba(10, 10, 10, 0.88);
    --st-surface-soft: rgba(18, 18, 18, 0.86);
    --st-border: #2b2b2b;
    --st-border-soft: #3b3b3b;
    --st-text: #ffffff;
    --st-text-soft: #d0d0d0;
    --st-text-muted: #b7b7b7;
    --st-accent: #b8913f;
    --st-accent-dark: #8d6c2f;
    --st-success-bg: #16301f;
    --st-success-border: #2d6b42;
    --st-success-text: #d9ffe4;
    --st-warning-bg: #3a2b12;
    --st-warning-border: #8d6c2f;
    --st-warning-text: #ffe9b3;
    --st-error-bg: #2a1212;
    --st-error-border: #6e2222;
    --st-error-text: #ffd6d6;
    --st-card-light: #f3f3f3;
    --st-card-light-soft: #f7f7f7;
    --st-card-border: #d7d7d7;
    --st-card-text: #111111;
    --st-card-muted: #4d4d4d;
    --st-content-width: 1440px;
    --st-transition: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.st-app {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--st-text);
    background-color: var(--st-bg);
    background-image: linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,.82)), url("/static/images/kalender_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
    text-rendering: geometricPrecision;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }

.st-page-shell {
    width: min(calc(100% - 32px), var(--st-content-width));
    margin: 0 auto;
    padding: 10px 0 36px;
}

.st-card,
.st-card--raised {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 0;
    box-shadow: none;
}

.st-section-kicker {
    margin: 0 0 8px;
    color: var(--st-accent);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.st-heading,
.st-subheading {
    margin: 0;
    color: var(--st-text);
    font-weight: normal;
    letter-spacing: 0;
}

.st-heading--hero {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

.st-heading--card {
    font-size: 1.55rem;
    line-height: 1.2;
}

.st-subheading {
    font-size: 1.1rem;
    line-height: 1.2;
}

.st-lead,
.st-copy {
    margin: 0;
    color: var(--st-text-soft);
    line-height: 1.6;
}

.st-logo {
    width: 100%;
    max-width: 285px;
    height: auto;
}

.st-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 0;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid var(--st-border);
    background: transparent;
    color: #ffffff;
    box-shadow: none;
    transition: background-color var(--st-transition), border-color var(--st-transition), color var(--st-transition);
}

.st-btn:hover { background: #111111; }

.st-btn--primary {
    border-color: var(--st-accent);
    background: var(--st-accent);
    color: #ffffff;
}

.st-btn--primary:hover {
    background: var(--st-accent-dark);
    border-color: var(--st-accent-dark);
}

.st-btn--secondary,
.st-btn--ghost {
    background: transparent;
    color: #ffffff;
}

.st-btn--pill {
    min-height: 42px;
    padding: 8px 14px;
    font-size: 14px;
}

.st-btn--pill.is-active,
.st-btn--pill[aria-current="true"] {
    background: #111111;
    border-color: var(--st-accent);
    color: #ffffff;
}

.st-form-field {
    display: grid;
    gap: .5rem;
}

.st-form-label {
    color: var(--st-accent);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.st-form-control,
.st-form-field input[type="text"],
.st-form-field input[type="email"],
.st-form-field input[type="password"],
.st-form-field input[type="search"],
.st-form-field select,
.st-form-field textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #4a4a4a;
    background: rgba(255,255,255,.08);
    color: #ffffff;
    padding: 9px 12px;
    border-radius: 0;
    font-size: 14px;
    box-shadow: none;
}

.st-form-field textarea { min-height: 160px; resize: vertical; }
.st-form-field input::placeholder,
.st-form-field textarea::placeholder { color: rgba(255,255,255,.7); }
.st-form-field input:focus,
.st-form-field select:focus,
.st-form-field textarea:focus {
    outline: none;
    border-color: var(--st-accent);
}
.st-form-field input:disabled,
.st-form-field select:disabled,
.st-form-field textarea:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.st-help,
.st-helptext,
.st-field-error {
    font-size: 13px;
    line-height: 1.55;
}
.st-help,
.st-helptext { color: var(--st-text-muted); }
.st-field-error { color: #ffb2b2; }

.st-error-box,
.st-empty-state,
.st-info-panel {
    padding: 12px 14px;
    border: 1px solid var(--st-border);
    border-radius: 0;
}
.st-error-box { background: var(--st-error-bg); border-color: var(--st-error-border); color: var(--st-error-text); }
.st-empty-state,
.st-info-panel { background: var(--st-surface-soft); color: var(--st-text-soft); }

.st-inline-check {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--st-text-muted);
    font-size: 14px;
}
.st-inline-check input[type="checkbox"] {
    inline-size: 1rem;
    block-size: 1rem;
    accent-color: var(--st-accent);
}

.st-link-cluster {
    color: var(--st-text-muted);
    font-size: 14px;
    line-height: 1.8;
}
.st-link-cluster a,
.st-text-link {
    color: var(--st-accent);
    text-decoration: none;
    font-weight: bold;
}
.st-link-cluster a:hover,
.st-text-link:hover { text-decoration: underline; }

.st-messages {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
}
.st-message {
    padding: 12px 14px;
    border: 1px solid var(--st-border);
    border-radius: 0;
    background: var(--st-surface);
    color: var(--st-text-soft);
    line-height: 1.55;
}
.st-message--success { background: var(--st-success-bg); border-color: var(--st-success-border); color: var(--st-success-text); }
.st-message--warning { background: var(--st-warning-bg); border-color: var(--st-warning-border); color: var(--st-warning-text); }
.st-message--error { background: var(--st-error-bg); border-color: var(--st-error-border); color: var(--st-error-text); }
.st-message--info { background: #161616; border-color: #454545; color: #e9e9e9; }

.st-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 0;
    border: 1px solid var(--st-border);
    font-size: 14px;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
}
.st-status--success { background: var(--st-success-bg); border-color: var(--st-success-border); color: var(--st-success-text); }
.st-status--warning { background: var(--st-warning-bg); border-color: var(--st-warning-border); color: var(--st-warning-text); }
.st-status--neutral { background: #1a1a1a; border-color: #4a4a4a; color: #e2e2e2; }

.st-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--st-border);
    border-radius: 0;
    background: #111111;
    color: #ffffff;
    font-size: 13px;
}
.st-chip strong { color: var(--st-accent); }

.st-stack-sm { display: grid; gap: 8px; }
.st-stack-md { display: grid; gap: 12px; }
.st-stack-lg { display: grid; gap: 16px; }

.st-pagination {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
}
.st-pagination__link,
.st-pagination__current {
    flex: 0 0 auto;
    min-width: 42px;
}
.st-pagination__current {
    background: #111111;
    border-color: var(--st-accent);
    color: #ffffff;
}

.st-card-form,
.st-card-panel { padding: 14px; }

.st-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

@media (max-width: 760px) {
    .st-page-shell {
        width: min(calc(100% - 24px), var(--st-content-width));
        padding: 12px 0 28px;
    }
    .st-logo { max-width: 240px; }
}