/* =====================================================
   Boulderloft – Frontend
   Die Farbwerte stehen in tokens.css, die vorher geladen wird.
   ===================================================== */

html { scroll-behavior: smooth; }
#info { scroll-margin-top: calc(var(--bl-nav-height) + 12px); }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--bl-ink);
}

/* Bootstrap-Bausteine (Formularfelder, Seitennummern, Badges, Offcanvas)
   folgen denselben Ecken wie die Inhaltsbausteine. */
:root {
    --bs-border-radius: var(--radius-btn);
    --bs-border-radius-sm: var(--radius-btn);
    --bs-border-radius-lg: var(--radius);
    --bs-border-radius-xl: var(--radius);
    --bs-border-radius-xxl: var(--radius);
    --bs-border-radius-pill: var(--radius-btn);
}

/* ---------- Links & Buttons (aus Settings eingefärbt) ---------- */

a { color: var(--bl-link); }
a:hover { color: color-mix(in srgb, var(--bl-link) 75%, black); }

.btn-bl-primary,
.bl-content .btn-primary {
    --bs-btn-bg: var(--bl-button);
    --bs-btn-border-color: var(--bl-button);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bl-button) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bl-button) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bl-button) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bl-button) 75%, black);
    --bs-btn-color: var(--bl-button-fg, #fff);
    --bs-btn-hover-color: var(--bl-button-fg, #fff);
    --bs-btn-active-color: var(--bl-button-fg, #fff);
    border-radius: var(--radius-btn);
    padding-inline: 1.4em;
}

.bl-content .btn-outline-primary {
    --bs-btn-color: var(--bl-button);
    --bs-btn-border-color: var(--bl-button);
    --bs-btn-hover-bg: var(--bl-button);
    --bs-btn-hover-border-color: var(--bl-button);
    --bs-btn-hover-color: var(--bl-button-fg, #fff);
    border-radius: var(--radius-btn);
    padding-inline: 1.4em;
}

/* ---------- Topmenü ---------- */

.bl-navbar {
    min-height: var(--bl-nav-height);
    background: rgba(255, 255, 255, 0);
    transition: background .3s ease, box-shadow .3s ease;
    padding-block: .6rem;
}

/* Über dem Hero: halbtransparent dunkel, weisse Schrift.
   Der Schleier nimmt den Grundton der Palette auf, damit er über dem
   Video nicht kalt wirkt. */
body.has-hero .bl-navbar:not(.scrolled) {
    background: color-mix(in srgb, var(--bl-ink) 34%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    --bl-logo-ink: #fff;
}
body.has-hero .bl-navbar:not(.scrolled) .nav-link,
body.has-hero .bl-navbar:not(.scrolled) .navbar-brand {
    color: #fff;
}
body.has-hero .bl-navbar:not(.scrolled) .nav-link:hover { color: rgba(255,255,255,.75); }
body.has-hero .bl-navbar:not(.scrolled) .navbar-toggler {
    border-color: rgba(255,255,255,.4);
}
body.has-hero .bl-navbar:not(.scrolled) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Nach dem Scrollen (oder ohne Hero): heller Grundton statt reinem Weiss,
   abgesetzt durch eine Haarlinie statt eines kräftigen Schattens. */
.bl-navbar.scrolled,
body.no-hero .bl-navbar {
    background: color-mix(in srgb, var(--bl-surface) 97%, transparent);
    border-bottom: 1px solid var(--bl-line);
    box-shadow: 0 6px 18px -14px color-mix(in srgb, var(--bl-ink) 55%, transparent);
    --bl-logo-ink: var(--bl-logo-scrolled);
}
.bl-navbar.scrolled .nav-link,
body.no-hero .bl-navbar .nav-link {
    color: var(--bl-ink);
}
.bl-navbar .nav-link { font-weight: 500; }
.bl-navbar .nav-link:hover { color: var(--bl-primary); }

.bl-logo { height: 44px; width: auto; transition: filter .3s ease; }

/* Logo einfärben: weiss über dem Hero, schwarz auf hellem (gescrolltem) Menü.
   Gilt für Rasterbilder, die sich nur über einen Filter umfärben lassen. */
body.has-hero .bl-navbar:not(.scrolled) img.bl-logo { filter: brightness(0) invert(1); }
.bl-navbar.scrolled img.bl-logo,
body.no-hero .bl-navbar img.bl-logo { filter: brightness(0); }

/* Ist das Logo eine SVG-Datei, wird es als Fläche gezeichnet und
   durchgefärbt. Nur so lässt es sich in eine Palettenfarbe setzen
   statt bloss in Schwarz oder Weiss. */
.bl-logo-tinted {
    display: block;
    height: 44px;
    width: auto;
    background-color: var(--bl-logo-ink, var(--bl-logo-scrolled));
    transition: background-color .3s ease;
    -webkit-mask: var(--bl-logo-src) no-repeat center / contain;
    mask: var(--bl-logo-src) no-repeat center / contain;
}

/* Offcanvas-Menü hat hellen Hintergrund -> Logo dunkel */
#blOffcanvas .offcanvas-header img { filter: brightness(0); }
#blOffcanvas .offcanvas-header .bl-logo-tinted { background-color: var(--bl-logo-scrolled); }
.dropdown-menu { border-radius: var(--radius); border: 0; box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.dropdown-item { padding-block: .5rem; }
.dropdown-item:active { background: var(--bl-primary); }

/* Ohne Hero trägt die Überschrift darunter bereits ihren eigenen Abstand,
   hier genügt der Platz für das feste Menü. */
body.no-hero .bl-content { padding-top: var(--bl-nav-height); }

.bl-mobile-nav .nav-link { color: #212529; font-weight: 500; }
.bl-mobile-nav .nav-link:hover { color: var(--bl-primary); }

/* ---------- Hero ---------- */

.bl-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
/* Als Mindesthöhe statt fester Höhe: der Hero wächst mit, wenn ein langer
   Hinweistext neben den Knöpfen steht. Ohne Hinweis bleibt die Höhe gleich. */
.bl-hero-large  { min-height: max(480px, min(88vh, 820px)); }
.bl-hero-medium { min-height: max(380px, min(60vh, 560px)); }
.bl-hero-small  { min-height: max(300px, min(42vh, 400px)); }

.bl-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}
/* Swiper setzt selbst z-index 1; ohne Korrektur läge die Galerie über dem
   Schleier. Galerie nach unten, Schleier eine Stufe darüber, Text auf 2. */
.bl-hero-swiper { position: absolute; inset: 0; z-index: 0; }
.bl-hero-swiper .swiper-pagination-bullet { background: #fff; opacity: .5; }
.bl-hero-swiper .swiper-pagination-bullet-active { opacity: 1; }

/* Der Schleier liegt nur auf der unteren Hälfte, wo Titel und Knöpfe stehen.
   Unten die eingestellte Stärke, dann in einer geschwungenen Kurve dünner,
   ab gut der Hälfte ganz durchsichtig — die obere Hälfte zeigt das Bild pur.
   Die Menüleiste braucht keinen eigenen Schatten, sie hat ihren eigenen
   Hintergrund. Die Stärke aus den Seiteneinstellungen skaliert alle Stufen. */
.bl-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    --bl-hero-s: var(--bl-hero-overlay, .65);
    background: linear-gradient(to top,
        color-mix(in srgb, var(--bl-hero-tint) calc(var(--bl-hero-s) * 100%), transparent) 0%,
        color-mix(in srgb, var(--bl-hero-tint) calc(var(--bl-hero-s) * 82%),  transparent) 18%,
        color-mix(in srgb, var(--bl-hero-tint) calc(var(--bl-hero-s) * 48%),  transparent) 34%,
        color-mix(in srgb, var(--bl-hero-tint) calc(var(--bl-hero-s) * 16%),  transparent) 47%,
        transparent 56%);
    pointer-events: none;
}
/* Titel links, Knöpfe rechts, beide auf der Unterkante. Auf schmaleren
   Bildschirmen rückt der Knopfblock unter den Titel. */
.bl-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding-bottom: clamp(2rem, 6vw, 4.5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2.5rem;
}
.bl-hero-text {
    flex: 1 1 22rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.bl-hero-title:last-child,
.bl-hero-subtitle:last-child { margin-bottom: 0; }
.bl-hero-title {
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    overflow-wrap: break-word;
    hyphens: auto;
}
.bl-hero-subtitle {
    font-size: clamp(1.05rem, 2.5vw, 1.4rem);
    max-width: 640px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* Knopfblock: Hallen-Tickets und Bewegungslandschaft nebeneinander,
   darunter die Registrierung. Als Einheit rechts, auf dem Handy unten. */
.bl-hero-actions {
    --bl-note-pad: .9rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    flex: 0 1 26rem;
    min-width: 0;
}
.bl-hero-actions.has-pair {
    flex: 0 1 36rem;
}

.bl-hero-pair {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    min-width: 0;
}
.bl-hero-pair > .bl-hero-note,
.bl-hero-pair > .btn {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bl-hero-pair > .bl-hero-note {
    container-type: inline-size;
}
.bl-hero-pair .bl-hero-note-title {
    font-size: clamp(.8rem, 10cqi, 1.05rem);
    line-height: 1.15;
    letter-spacing: -.03em;
    overflow-wrap: break-word;
    hyphens: auto;
    min-width: 0;
    max-width: 100%;
}
.bl-hero-pair .bl-hero-note-text {
    font-size: .82rem;
    line-height: 1.35;
    flex: 1 1 auto;
}
.bl-hero-pair .btn {
    margin-top: auto;
    width: 100%;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.bl-hero-btn-compact {
    padding-block: .48rem;
    padding-inline: .5em;
    font-size: .88rem;
    line-height: 1.25;
}

.bl-hero-note {
    padding: var(--bl-note-pad) 1.1rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bl-hero-tint) 30%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* Der Titel nimmt die Farbe des zweiten Knopfs auf; ohne eigene Farbe weiss. */
.bl-hero-note-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: .35rem;
    color: var(--bl-btn2-bg, #fff);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.bl-hero-note-text {
    font-size: .95rem;
    line-height: 1.45;
    margin-bottom: .75rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.bl-hero-note-title:last-child,
.bl-hero-note-text:last-child { margin-bottom: 0; }

/* Zweiter Knopf: heller Umriss, damit er den ersten nicht überstrahlt … */
.btn-bl-second {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .8);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: var(--bl-ink);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-color: var(--bl-ink);
    border-radius: var(--radius-btn);
    padding-inline: 1.4em;
}
/* … oder gefüllt in einer eigenen Farbe aus den Seiteneinstellungen. */
.btn-bl-second-filled {
    --bs-btn-bg: var(--bl-btn2-bg);
    --bs-btn-border-color: var(--bl-btn2-bg);
    --bs-btn-color: var(--bl-btn2-fg, #fff);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bl-btn2-bg) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bl-btn2-bg) 85%, black);
    --bs-btn-hover-color: var(--bl-btn2-fg, #fff);
    --bs-btn-active-bg: color-mix(in srgb, var(--bl-btn2-bg) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bl-btn2-bg) 75%, black);
    --bs-btn-active-color: var(--bl-btn2-fg, #fff);
}

@media (max-width: 1199.98px) {
    .bl-hero-content {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 1rem;
    }
    .bl-hero-text { flex: 0 0 auto; }
    /* flex-basis aus der Zeile zurücksetzen: in der Spalte wäre 36rem die Höhe
       und würde den Titel nach oben schieben. */
    .bl-hero-actions,
    .bl-hero-actions.has-pair {
        flex: 0 0 auto;
        width: 100%;
        max-width: 36rem;
    }
}
@media (max-width: 575.98px) {
    .bl-hero-content { gap: .75rem; padding-bottom: 1.4rem; }
    .bl-hero-title { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
    .bl-hero-actions,
    .bl-hero-actions.has-pair { max-width: none; gap: .5rem; }
    .bl-hero-actions .btn { width: 100%; }
    .bl-hero-pair .btn { width: 100%; }
    .bl-hero-pair { gap: .4rem; }
    .bl-hero-pair .bl-hero-note { padding: .55rem .55rem; }
    .bl-hero-pair .bl-hero-note-title {
        font-size: clamp(.72rem, 9cqi, .86rem);
        margin-bottom: .25rem;
    }
    .bl-hero-pair .bl-hero-note-text { font-size: .72rem; margin-bottom: .45rem; }
    .bl-hero-actions > .bl-hero-note { padding: .7rem .85rem; }
    .bl-hero-actions > .bl-hero-note .btn-lg {
        padding-block: .45rem;
        font-size: .95rem;
    }
}

/* ---------- Störer / Laufband ---------- */

.bl-ticker {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    background: var(--ticker-bg, var(--bl-accent));
    color: var(--ticker-color, var(--bl-accent-ink));
    text-decoration: none;
    font-weight: 600;
    padding-block: .55rem;
}
.bl-ticker:hover { color: var(--ticker-color, var(--bl-accent-ink)); filter: brightness(1.05); }
.bl-ticker-track {
    display: inline-block;
    animation: bl-marquee var(--ticker-speed, 30s) linear infinite;
}
.bl-ticker-item { padding-inline: 3rem; }
.bl-ticker-item::after { content: "•"; margin-left: 6rem; opacity: .5; }
@keyframes bl-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .bl-ticker-track { animation: none; }
}

/* ---------- Inhalt ---------- */

/* Der Abstand sitzt bewusst nur unten. Oben trägt ihn die Inhaltsspalte,
   so bleibt zwischen zwei Blöcken genau ein Polster statt zweier. */
.bl-content { padding-top: var(--bl-block-gap); }

/* Ein Raster für alles: Header, Hero, Inhalt und Footer teilen dieselbe
   Containerbreite und denselben Seitenabstand. Reine Textbausteine
   (Rechtliches, News-Artikel) begrenzen ihre Lesebreite selbst. */
.container { --bs-gutter-x: 2.5rem; }
.bl-block { padding-block: 0 var(--bl-block-gap); }
.bl-block img { max-width: 100%; height: auto; border-radius: var(--radius); }
.bl-block h2 { font-weight: 700; margin-bottom: 1rem; }
.bl-block h2, .bl-block h3 { color: var(--bl-primary); }

/* ---------- Sprachumschalter ---------- */

.bl-lang-switch { display: flex; align-items: center; gap: .25rem; }
.bl-lang-switch a {
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    padding: .25rem .5rem;
    border-radius: var(--radius-btn);
    color: inherit;
    opacity: .65;
}
.bl-lang-switch a.active {
    opacity: 1;
    background: rgba(128, 128, 128, .18);
}
.bl-navbar .bl-lang-switch a { color: inherit; }
body.has-hero .bl-navbar:not(.scrolled) .bl-lang-switch a { color: #fff; }
.bl-navbar.scrolled .bl-lang-switch a,
body.no-hero .bl-navbar .bl-lang-switch a { color: #212529; }

/* ---------- News ---------- */

.bl-post-meta { padding-top: 1.5rem; font-size: .95rem; }

/* ---------- Newsletter-Block ---------- */

.bl-newsletter {
    padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem);
    text-align: center;
    background: var(--bl-surface);
    border: 1px solid var(--bl-line);
    border-radius: var(--radius);
}
.bl-newsletter-title {
    color: var(--bl-primary);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: .25rem;
}
.bl-newsletter-text { color: var(--bl-muted); font-size: .95rem; margin-bottom: 1rem; }
.bl-nl-row { display: flex; gap: .5rem; max-width: 560px; margin: 0 auto; }
.bl-nl-row .form-control { flex: 1; }
@media (max-width: 575px) {
    .bl-nl-row { flex-direction: column; }
}
/* Honeypot: für Menschen unsichtbar */
.bl-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bl-nl-msg { margin-top: .6rem; font-size: .9rem; min-height: 1.2em; }
.bl-nl-msg.is-success { color: #2e7d32; }
.bl-nl-msg.is-error { color: #c62828; }
.bl-nl-msg:empty { margin-top: 0; min-height: 0; }

/* Pagination auf der News-Seite im Site-Farbschema */
.bl-pagination .page-link {
    color: var(--bl-primary);
}
.bl-pagination .page-item.active .page-link {
    background-color: var(--bl-primary);
    border-color: var(--bl-primary);
    color: #fff;
}
.bl-pagination .page-link:focus {
    box-shadow: none;
}

.bl-news-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(20, 24, 50, .09);
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.bl-news-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(20, 24, 50, .14); }
.bl-news-thumb {
    aspect-ratio: 16/9;
    background: var(--bl-surface) center/cover no-repeat;
}
.bl-news-thumb-empty {
    display: grid;
    place-items: center;
    color: var(--bl-accent);
    font-size: 2.5rem;
}
.bl-news-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.bl-news-date { font-size: .8rem; color: var(--bl-muted); margin-bottom: .3rem; }
.bl-news-title { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.bl-news-title a { color: var(--bl-ink); text-decoration: none; }
.bl-news-title a:hover { color: var(--bl-primary); }
.bl-news-teaser { color: var(--bl-muted); font-size: .95rem; flex: 1; }
.bl-news-more { font-weight: 600; text-decoration: none; font-size: .95rem; }

/* ---------- Footer ---------- */

.bl-partners { background: var(--bl-partners-bg); }
.bl-partner-logo {
    height: 44px;
    width: auto;
    filter: grayscale(1);
    opacity: .82;
    transition: filter .2s, opacity .2s;
}
.bl-partner-logo:hover { filter: none; opacity: 1; }

.bl-footer-main { background: var(--bl-footer-bg); color: rgba(255, 255, 255, .85); }
.bl-footer-logo { height: 48px; filter: brightness(0) invert(1); opacity: .95; }
.bl-footer-heading {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
    margin-bottom: .9rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.bl-footer-links a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    line-height: 1.9;
}
.bl-footer-links a:hover { color: #fff; }
.bl-footer-sitemap {
    columns: 2;
    column-gap: 1.5rem;
    font-size: .85rem;
}
.bl-footer-sitemap li { break-inside: avoid; }
.bl-footer-about, .bl-footer-address { color: rgba(255, 255, 255, .7); font-style: normal; }
.bl-footer-bottom {
    background: color-mix(in srgb, var(--bl-footer-bg) 80%, black);
    color: rgba(255, 255, 255, .6);
}