/* ibring – Grundlayout. Braun-Palette der bisherigen Seite. */

@font-face {
    font-family: "Bevellier";
    src: url("../fonts/Bevellier-Black.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --ibring-brand: #8B7B6B;
    --ibring-brand-dark: #584a45;
    --ibring-link: #61505e;
    --ibring-hover: #6e5454;
    --ibring-bg: #faf8f6;
    --bs-link-color: var(--ibring-link);
    --bs-link-color-rgb: 97, 80, 94;
    --bs-link-hover-color: var(--ibring-hover);
    --bs-link-hover-color-rgb: 110, 84, 84;
}

body {
    background: var(--ibring-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

main { flex: 1 0 auto; }

.brand-title {
    font-family: "Bevellier", system-ui, sans-serif;
    letter-spacing: .02em;
}

/* Kopfzeile */
.site-nav { background-color: var(--ibring-brand); }
.site-nav .navbar-brand { color: #fff; font-size: 1.5rem; }
.site-nav .nav-link { color: #fff; }
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.active { color: #fff; text-decoration: underline; }
.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .5); }

.skip-link {
    position: absolute; top: .5rem; left: .5rem; z-index: 1100;
    background: #fff; padding: .5rem 1rem; border-radius: .375rem;
}

/* Touch-Ziele ≥ 44 px */
.btn, .nav-link, .form-control, .form-select, .navbar-toggler {
    min-height: 44px;
}
.nav-link, .btn { display: inline-flex; align-items: center; gap: .375rem; }
.btn { justify-content: center; }

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ibring-brand-dark);
    --bs-btn-border-color: var(--ibring-brand-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #463a36;
    --bs-btn-hover-border-color: #463a36;
    --bs-btn-active-bg: #3b302d;
    --bs-btn-focus-shadow-rgb: 88, 74, 69;
}

.card-soft { border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.narrow { max-width: 36rem; }
.hero { max-width: 34rem; padding: 2rem 0; }

.error-detail { white-space: pre-wrap; max-height: 20rem; overflow: auto; }

.site-footer { color: #6c635c; font-size: .875rem; }

/* Öffentliche Eventseite – Farben kommen aus /e/{token}/design.css (CSS-Variablen) */
body.event-page {
    background-color: var(--ev-bg, var(--ibring-bg));
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    color: var(--ev-text, #212529);
}
.event-container { max-width: 44rem; }
.event-panel {
    background: var(--ev-panel, rgba(255, 255, 255, .94));
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.event-title { color: var(--ev-title, var(--ibring-brand-dark)); font-family: "Bevellier", system-ui, sans-serif; overflow-wrap: anywhere; }
.event-page a { color: var(--ev-link, var(--ibring-link)); }
.event-page a:hover, .event-page a:focus-visible { color: var(--ev-hover, var(--ibring-hover)); }
.event-description { overflow-wrap: anywhere; }
.event-description > :last-child { margin-bottom: 0; }
.event-note { opacity: .85; }

.slot { padding: .5rem 0; }
.slot + .slot { border-top: 1px solid rgba(0, 0, 0, .08); }
.slot-progress { height: .625rem; margin-top: .375rem; background-color: rgba(0, 0, 0, .1); }
.slot-progress .progress-bar { background-color: var(--ev-link, var(--ibring-brand)); }
.slot-full .slot-status { font-weight: 600; text-transform: uppercase; font-size: .8125rem; letter-spacing: .03em; }
.slot-full .slot-progress .progress-bar { background-color: #8a8a8a; }
.slot-full { opacity: .75; }

.signup-list summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ev-link, var(--ibring-link)); }
.signup-list ul { padding-left: 1.25rem; }

.event-footer { font-size: .875rem; }
.event-footer a { color: var(--ev-text, #6c635c); text-decoration: none; min-height: 44px; }
.event-footer span { background: var(--ev-panel, transparent); padding: .125rem .5rem; border-radius: .25rem; }

/* Balkenbreiten ohne Inline-Styles (CSP) */
.fill-0 { width: 0%; }
.fill-5 { width: 5%; }
.fill-10 { width: 10%; }
.fill-15 { width: 15%; }
.fill-20 { width: 20%; }
.fill-25 { width: 25%; }
.fill-30 { width: 30%; }
.fill-35 { width: 35%; }
.fill-40 { width: 40%; }
.fill-45 { width: 45%; }
.fill-50 { width: 50%; }
.fill-55 { width: 55%; }
.fill-60 { width: 60%; }
.fill-65 { width: 65%; }
.fill-70 { width: 70%; }
.fill-75 { width: 75%; }
.fill-80 { width: 80%; }
.fill-85 { width: 85%; }
.fill-90 { width: 90%; }
.fill-95 { width: 95%; }
.fill-100 { width: 100%; }

@media print {
    .site-nav, .site-footer, .skip-link { display: none !important; }
    body { background: #fff; }
}