/* =========================================================
   NBI LAYOUT — Raster, Abstände, Seitenstruktur
   ========================================================= */

/* ── Variablen ──────────────────────────────────────────── */
:root {
    --nbi-max-width:       1260px;
    --nbi-gap:             2rem;
    --nbi-layout-gap:      2rem;
    --nbi-sidebar-width:   300px;
    --nbi-header-height:   60px;

    /* Farbpalette (Swiss Modern Editorial – Mockup-konform) */
    --nbi-color-primary:   #0a3d6b;   /* Tiefes NBI-Blau */
    --nbi-color-primary-mid: #1a5fa8; /* Mittleres Blau – Links, Badges */
    --nbi-color-primary-light: #e8f0fb; /* Helles Blau – Badge-BG */
    --nbi-color-accent:    #d94f1e;   /* Akzent Orange-Rot */
    --nbi-color-accent-soft: #fff0eb; /* Akzent hell */
    --nbi-color-bg:        #f4f6fb;
    --nbi-color-surface:   #ffffff;
    --nbi-color-text:      #1a1d23;
    --nbi-color-muted:     #6b7280;
    --nbi-color-border:    #e4e8ef;
    --nbi-color-white:     #ffffff;

    --nbi-font-body:       -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif;
    --nbi-font-heading:    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif;
    --nbi-radius:          8px;
    --nbi-radius-lg:       14px;
    --nbi-shadow-sm:       0 1px 3px rgba(10,61,107,.08), 0 1px 2px rgba(10,61,107,.04);
    --nbi-shadow:          0 4px 16px rgba(10,61,107,.10), 0 2px 4px rgba(10,61,107,.06);
    --nbi-shadow-lg:       0 8px 32px rgba(10,61,107,.14), 0 4px 8px rgba(10,61,107,.08);
}

/* ── Reset-Grundlage ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
    font-family: var(--nbi-font-body);
    color: var(--nbi-color-text);
    background: var(--nbi-color-bg);
    line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
/* Inline-Bilder in Fliesstext (z.B. Icons, Signaturen von Plugins) nicht zu Block zwingen */
p img, span img, li img, td img, th img { display: inline; vertical-align: middle; }
a { color: var(--nbi-color-link, var(--nbi-color-primary-mid)); text-decoration: none; }
a:hover { color: var(--nbi-color-link-hover, var(--nbi-color-primary)); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--nbi-color-focus, var(--nbi-color-primary-mid)); outline-offset: 3px; border-radius: var(--nbi-radius-btn, 4px); }

/* ── Container ──────────────────────────────────────────── */
.nbi-container {
    width: 100%;
    max-width: var(--nbi-max-width);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ── Utility Bar ────────────────────────────────────────── */
.nbi-utility-bar {
    background: var(--nbi-color-primary);
    color: var(--nbi-color-white);
    font-size: .8125rem;
    padding: .375rem 0;
}
.nbi-utility-bar a { color: inherit; }

/* ── Header ─────────────────────────────────────────────── */
.nbi-header {
    position: relative;
    z-index: 100;
    background: var(--nbi-color-white);
    border-bottom: 1px solid var(--nbi-color-border);
    box-shadow: var(--nbi-shadow-sm);
    height: var(--nbi-header-height);
    /* Logo links außerhalb des Containers, Nav bündig mit Inhalt */
    display: flex;
    align-items: center;
}
.nbi-header--sticky {
    position: sticky;
    top: 0;
}
/* Container: zentriert wie Seiten-Inhaltsboxen
   → Logo startet bündig mit Artikelinhalt darunter */
.nbi-header > .nbi-container {
    height: 100%;
    /* nbi-container-Basisstile gelten automatisch:
       max-width 1260px, margin-inline auto, padding-inline 20px */
}
.nbi-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 1rem;
}
/* Logo: erstes Flex-Element in header__inner */
.nbi-header .nbi-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
    margin-inline-end: .5rem;
}
.nbi-logo img { max-width: var(--nbi-logo-width, 180px); height: auto; }
.nbi-header .nbi-logo img {
    max-height: calc(var(--nbi-header-height, 60px) - 14px);
    width: auto;
}
/* Nav: füllt Platz zwischen Logo und Actions */
.nbi-header .nbi-nav { flex: 1; min-width: 0; }
.nbi-logo-footer img { max-width: calc(var(--nbi-logo-width, 180px) * 0.7); height: auto; opacity: .85; }

/* ── Hauptnavigation ─────────────────────────────────────── */
.nbi-nav { display: flex; align-items: center; }
.nbi-nav ul { list-style: none; display: flex; gap: .125rem; }
.nbi-nav a {
    display: block;
    padding: .3125rem .6875rem;
    border-radius: var(--nbi-radius-btn, 4px);
    font-family: var(--nbi-font-body);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--nbi-color-text);
    white-space: nowrap;
    transition: background var(--nbi-transition, 180ms);
}
.nbi-nav a:hover { background: var(--nbi-color-bg); color: var(--nbi-color-text); text-decoration: none; }
.nbi-nav .active > a { color: var(--nbi-color-primary-mid); }

/* Dropdown */
.nbi-nav li { position: relative; }
.nbi-nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--nbi-color-white);
    border: 1px solid var(--nbi-color-border);
    border-radius: var(--nbi-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    min-width: 200px;
    flex-direction: column;
    gap: 0;
    z-index: 200;
}
.nbi-nav li:hover > ul,
.nbi-nav li:focus-within > ul { display: flex; }
.nbi-nav li ul a { padding: .5rem 1rem; font-weight: 400; }

/* Header-Suche + CTA — sitzen über der Sidebar-Spalte */
.nbi-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    /* Mindestbreite = Sidebar + Gap → visuell über Sidebar ausgerichtet */
    min-width: calc(var(--nbi-sidebar-width) + var(--nbi-layout-gap));
    justify-content: flex-end;
}
.nbi-header-search {
    display: flex;
    align-items: center;
    gap: .375rem;
    background: var(--nbi-color-bg);
    border: 1px solid var(--nbi-color-border);
    border-radius: 4px;
    padding: .25rem .5rem .25rem .75rem;
    font-size: .8125rem;
    color: var(--nbi-color-muted);
    white-space: nowrap;
}
.nbi-search-icon { font-size: .875rem; flex-shrink: 0; }
.nbi-search-input {
    border: none; outline: none; background: transparent;
    font-size: .8125rem; color: var(--nbi-color-text);
    width: 120px; min-width: 0;
}
.nbi-search-input::placeholder { color: var(--nbi-color-muted); }
.nbi-search-input:focus { width: 180px; transition: width .2s; }
.nbi-search-btn {
    background: none; border: none; cursor: pointer;
    color: var(--nbi-color-muted); font-size: .875rem; padding: 0 2px;
    transition: color .15s;
}
.nbi-search-btn:hover { color: var(--nbi-color-primary); }
.nbi-header-cta {
    display: inline-flex;
    align-items: center;
    padding: .4375rem 1rem;
    background: var(--nbi-color-accent);
    color: #fff !important;
    border-radius: var(--nbi-radius-btn, 4px);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    text-decoration: none !important;
    transition: filter var(--nbi-transition, 180ms);
    flex-shrink: 0;
}
.nbi-header-cta:hover { filter: brightness(.87); }

/* Mobile-Toggle */
.nbi-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .5rem;
}
.nbi-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--nbi-color-text);
    border-radius: 2px;
    transition: transform var(--nbi-transition, 180ms);
}

/* ── Hero ───────────────────────────────────────────────── */
.nbi-hero {
    background: var(--nbi-color-primary);
    color: var(--nbi-color-white);
    padding: 2rem 0;
}
.nbi-hero-below {
    background: var(--nbi-color-white);
    border-bottom: 1px solid var(--nbi-color-border);
    padding: 1rem 0;
}

/* ── Main Content Area ───────────────────────────────────── */
.nbi-main { padding: 2rem 0; }

/* ── Layout-Raster ───────────────────────────────────────── */
.nbi-layout {
    display: grid;
    gap: var(--nbi-layout-gap);
}
.nbi-layout--sidebar {
    grid-template-columns: 1fr var(--nbi-sidebar-width);
    grid-template-areas: "content sidebar";
}
/* Sidebar links (per Backend-Setting) */
.sidebar-left .nbi-layout--sidebar {
    grid-template-columns: var(--nbi-sidebar-width) 1fr;
    grid-template-areas: "sidebar content";
}
.nbi-layout--full {
    grid-template-columns: 1fr;
    grid-template-areas: "content";
}
.nbi-content { grid-area: content; min-width: 0; }
.nbi-sidebar { grid-area: sidebar; min-width: 0; }

.nbi-content-top,
.nbi-content-bottom { margin-block: 1rem; }

/* ── Sidebar Module — alle Joomla-5-Chrome-Varianten ─────── */
/* xhtml / html5 / card / outline / none chrome */
/* Umfasst auch direkte UL/FORM Kinder (style="none") */
.nbi-sidebar > div:not(.nbi-dbg-label),
.nbi-sidebar > ul,
.nbi-sidebar > form,
.nbi-sidebar .module,
.nbi-sidebar .moduletable,
.nbi-sidebar .card.moduletable {
    background: var(--nbi-color-white);
    border: 1px solid var(--nbi-color-border) !important;
    border-radius: var(--nbi-radius) !important;
    overflow: hidden;
    margin-bottom: 1.125rem;
    box-shadow: var(--nbi-shadow-sm);
    padding: 0;
}
/* Modul-Titel: h3/h4 direkt in Sidebar-Div oder in card-header */
.nbi-sidebar > div > h3,
.nbi-sidebar > div > h4,
.nbi-sidebar .module-title,
.nbi-sidebar .moduletable > h3,
.nbi-sidebar .moduletable > h4,
.nbi-sidebar .card-header,
.nbi-sidebar .card-header h3,
.nbi-sidebar .card-header h4 {
    font-family: var(--nbi-font-body) !important;
    font-size: .6875rem !important;
    font-weight: 800 !important;
    color: var(--nbi-color-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    margin: 0 !important;
    padding: .6875rem 1rem !important;
    background: #f7f9fd !important;
    border-bottom: 2px solid var(--nbi-color-primary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* card chrome: card-body Padding */
.nbi-sidebar .card-body { padding: .875rem 1rem !important; }
/* Modulinhalt-Padding (xhtml/html5) */
.nbi-sidebar .module-title,
.nbi-sidebar .moduletable h3 {
    font-size: .6875rem;
    font-weight: 800;
    color: var(--nbi-color-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
    padding: .6875rem 1rem;
    background: #f7f9fd;
    border-bottom: 2px solid var(--nbi-color-primary);
}
/* Modulinhalt-Padding — alle Varianten */
.nbi-sidebar .module > *:not(.module-title),
.nbi-sidebar .moduletable > *:not(h3):not(h4),
.nbi-sidebar > div > *:not(h3):not(h4) {
    padding: .875rem 1rem;
    font-family: var(--nbi-font-body);
}

/* ── Offcanvas Mobile Nav ────────────────────────────────── */
.nbi-offcanvas {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 85vw);
    background: var(--nbi-color-white);
    z-index: 300;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s ease;
    padding: 2rem 1.5rem;
    box-shadow: 4px 0 16px rgba(0,0,0,.15);
}
.nbi-offcanvas.is-open { transform: translateX(0); }
.nbi-offcanvas-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 299;
}
.nbi-offcanvas-overlay.is-visible { display: block; }

/* Fallback: nav-main im Offcanvas — alles vertikal, Bootstrap-flex überschreiben */
.nbi-offcanvas-nav ul,
.nbi-offcanvas-nav .nav,
.nbi-offcanvas-nav .nav-child {
    display: block !important;
    flex-direction: unset !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nbi-offcanvas-nav li {
    display: block !important;
    border-bottom: 1px solid var(--nbi-color-border);
    width: 100%;
}
.nbi-offcanvas-nav > ul > li > ul,
.nbi-offcanvas-nav .nav-child { border-top: none; }
.nbi-offcanvas-nav a {
    display: block;
    padding: .75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--nbi-color-text);
    text-decoration: none;
    white-space: normal;
}
.nbi-offcanvas-nav a:hover { color: var(--nbi-color-primary-mid); }
.nbi-offcanvas-nav li ul,
.nbi-offcanvas-nav li .nav-child { padding-left: 1rem; }
.nbi-offcanvas-nav li ul li,
.nbi-offcanvas-nav li .nav-child li { border-bottom: none; }
.nbi-offcanvas-nav li ul a,
.nbi-offcanvas-nav li .nav-child a { font-size: .9rem; font-weight: 400; padding: .4rem 0; }

/* ── Offcanvas Accordion ─────────────────────────────────── */

/* Kinder standardmässig ausgeblendet */
.nbi-offcanvas-nav li.nbi-has-sub > ul,
.nbi-offcanvas-nav li.nbi-has-sub > .nav-child {
    display: none !important;
}
.nbi-offcanvas-nav li.nbi-has-sub.nbi-open > ul,
.nbi-offcanvas-nav li.nbi-has-sub.nbi-open > .nav-child {
    display: block !important;
}

/* Eltern-Zeile: Link + Toggle-Button nebeneinander */
.nbi-offcanvas-nav li.nbi-has-sub > .nbi-acc-row {
    display: flex;
    align-items: center;
    gap: 0;
}
.nbi-offcanvas-nav li.nbi-has-sub > .nbi-acc-row > a {
    flex: 1 1 auto;
    padding-right: .25rem;
}

/* Toggle-Button (Chevron) */
.nbi-acc-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nbi-color-muted, #6b7280);
    border-radius: 6px;
    transition: background .15s, color .15s;
    padding: 0;
    margin: 4px 0;
}
.nbi-acc-btn:hover { background: var(--nbi-color-border, #e4e8ef); color: var(--nbi-color-primary); }
.nbi-acc-btn svg { transition: transform .25s ease; }
.nbi-offcanvas-nav li.nbi-has-sub.nbi-open > .nbi-acc-row .nbi-acc-btn svg {
    transform: rotate(180deg);
}
.nbi-offcanvas-nav li.nbi-has-sub.nbi-open > .nbi-acc-row .nbi-acc-btn {
    color: var(--nbi-color-primary);
}

/* Sticky Eltern-Header beim Scrollen */
.nbi-offcanvas-nav li.nbi-has-sub.nbi-open > .nbi-acc-row {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.nbi-offcanvas-nav li.nbi-has-sub.nbi-open > .nbi-acc-row > a {
    color: var(--nbi-color-primary);
    font-weight: 700;
}

/* ── Footer ─────────────────────────────────────────────── */
.nbi-footer {
    background: var(--nbi-color-primary);
    color: rgba(255,255,255,.85);
    padding: 3rem 0 0;
    margin-top: 3rem;
}
.nbi-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.nbi-footer__col h3,
.nbi-footer__col .moduletable h3 {
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nbi-color-white);
    margin-bottom: 1rem;
}
.nbi-footer a { color: rgba(255,255,255,.75); }
.nbi-footer a:hover { color: var(--nbi-color-white); }
.nbi-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: .8125rem;
    color: rgba(255,255,255,.5);
}
.nbi-footer__copy { margin: 0; }

/* ── Bootstrap-Stubs (ersetzt bootstrap.min.css) ────────── */
/* Nur die Klassen die Joomla tatsächlich ausgibt */
.list-unstyled { list-style: none; padding-left: 0; }
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: 0; list-style: none; font-size: .875rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 .4rem; color: var(--nbi-color-muted); }
.breadcrumb-item.active { color: var(--nbi-color-muted); }
.float-start { float: left !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; }
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.w-100 { width: 100% !important; }
.container, .container-fluid { width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .nbi-layout--sidebar {
        grid-template-columns: 1fr;
        grid-template-areas: "content" "sidebar";
    }
    :root { --nbi-sidebar-width: 100%; }

    /* Sidebar weg → Actions brauchen keine Mindestbreite mehr */
    .nbi-header-actions {
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .nbi-nav { display: none; }
    .nbi-nav-toggle { display: flex; }
    .nbi-header-search { display: none; }
    .nbi-header__inner { overflow: hidden; }
    /* Mobile: Logo auto-Breite — descendant selector (Logo ist jetzt im Container) */
    .nbi-header .nbi-logo {
        width: auto;
    }
    .nbi-header > .nbi-container {
        padding-inline-end: 12px;
    }

    .nbi-footer__bottom {
        flex-direction: column;
        gap: .5rem;
        text-align: center;
    }
}