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

html { scroll-behavior: smooth; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--bl-font);
    color: #212529;
}

/* Navigation, Schaltflächen und Formulare bringen über Bootstrap eine eigene
   Schrift mit. Damit die Seite durchgehend in der Serife läuft, wird sie hier
   nachgezogen. */
.bl-navbar, .btn, .form-control, .form-select, .offcanvas, .dropdown-menu {
    font-family: var(--bl-font);
}

/* ---------- 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: 50rem;
    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: 50rem;
    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: .75rem; 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;
}
.bl-hero-large  { height: min(88vh, 820px); min-height: 480px; }
.bl-hero-medium { height: min(60vh, 560px); min-height: 380px; }
.bl-hero-small  { height: min(42vh, 400px); min-height: 300px; }

.bl-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}
.bl-hero-swiper { position: absolute; inset: 0; }
.bl-hero-swiper .swiper-pagination-bullet { background: #fff; opacity: .5; }
.bl-hero-swiper .swiper-pagination-bullet-active { opacity: 1; }

/* Der Verlauf ist unten am kräftigsten, wo der Titel steht, in der Mitte
   fast durchsichtig, damit das Bild atmet, und oben wieder etwas dunkler
   für die Menüleiste. Die Stärke aus den Seiteneinstellungen skaliert alle
   drei Stufen gemeinsam; bei 65 entspricht sie der bisherigen Abstimmung. */
.bl-hero-overlay {
    position: absolute;
    inset: 0;
    --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) * 23%), transparent) 45%,
        color-mix(in srgb, var(--bl-hero-tint) calc(var(--bl-hero-s) * 38.5%), transparent) 100%);
    pointer-events: none;
}
.bl-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding-bottom: clamp(2rem, 6vw, 4.5rem);
}
.bl-hero-title {
    font-size: clamp(2rem, 5.2vw, 3.6rem);
    font-weight: 400;
    line-height: 1.15;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.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);
}

/* ---------- 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);
    padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
.bl-block { padding-block: 0 var(--bl-block-gap); max-width: 920px; }
.bl-block img { max-width: 100%; height: auto; border-radius: .75rem; }
.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: .4rem;
    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 { max-width: 960px; padding-top: 1.5rem; font-size: .95rem; }

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

.bl-newsletter {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    text-align: center;
    /* bewusst neutral gehalten, damit der Kontrast bei jedem Farbschema stimmt */
    background: #f4f6f8;
    border: 1px solid #e3e7eb;
    border-radius: .75rem;
}
.bl-newsletter-title {
    color: var(--bl-primary);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: .25rem;
}
.bl-newsletter-text { color: #495057; font-size: .95rem; margin-bottom: 1rem; }
.bl-nl-row { display: flex; gap: .5rem; max-width: 420px; 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: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(20, 40, 30, .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, 40, 30, .14); }
.bl-news-thumb {
    aspect-ratio: 16/9;
    background: #eef1ef 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: #8a938e; margin-bottom: .3rem; }
.bl-news-title { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.bl-news-title a { color: #212529; text-decoration: none; }
.bl-news-title a:hover { color: var(--bl-primary); }
.bl-news-teaser { color: #5c6660; 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: .65;
    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);
}