/* =====================================================
   Generated by WBCE TemplateBuilder
   Template: 
   ===================================================== */

/* ── CSS-Variablen (alle vom Builder gesetzt) ── */
:root {
    /* Grundfarben */
    --color-primary:        #2c3e50;
    --color-secondary:      #ecf0f1;
    --color-accent:         #3498db;
    --color-text:           #333333;
    --color-bg:             #ffffff;
    --color-link:           #3498db;
    --color-link-hover:     #2c3e50;

    /* Header (Raster-System) */
    --header-text:          #f1f5f9;
    --header-heading-text:  #ffffff;
    --header-shadow:        0 2px 6px rgba(0,0,0,0.15);
    --footer-border-top:    none;
    --header-link-hover:    #3498db;

    /* Abwärtskompatibel / für Hintergrundbilder */
    --header-height:        70px;
    --header-bg:            #334155;
    --header-border-bottom: none;
    --utility-height:       36px;
    --utility-bg:           #1a252f;
    --utility-text:         #aaaaaa;
    --utility-link-hover:   #ffffff;
    --navbar-bg:            #1a252f;
    --navbar-text:          #ffffff;

    /* Navigation */
    --nav-bg:               transparent;
    --nav-text:             #ffffff;
    --nav-hover-bg:         #3498db;
    --nav-hover-text:       #ffffff;
    --nav-active-bg:        #3498db;
    --nav-active-text:      #ffffff;
    --nav-underline-color:  #3498db;
    --nav-breakpoint:       768px;

    /* Burger-Menü */
    --burger-menu-bg:         #1e293b;
    --burger-menu-text:       #f1f5f9;
    --burger-menu-hover-bg:   rgba(255,255,255,0.1);
    --burger-menu-hover-text: #ffffff;
    --burger-menu-active-bg:  rgba(255,255,255,0.15);
    --burger-menu-active-text:#ffffff;
    --burger-menu-divider:    rgba(255,255,255,0.1);
    --burger-menu-font-size:  0.95rem;
    --burger-menu-padding:    0.65rem 1.25rem;
    --burger-menu-indent:     1.25rem;
    --burger-menu-sub-size:   0.9em;

    /* Dropdown */
    --dropdown-bg:          #ffffff;
    --dropdown-text:        #333333;
    --dropdown-hover-bg:    #f5f5f5;
    --dropdown-hover-text:  #333333;
    --dropdown-border:      #e0e0e0;

    /* Footer */
    --footer-bg:            #2c3e50;
    --footer-text:          #ecf0f1;

    /* Footer-Zeilen Farben */
    --footer-row1-bg:         #2c3e50;
    --footer-row1-text:       #ecf0f1;
    --footer-row1-link-hover: #ffffff;
    --footer-row2-bg:         #1a252f;
    --footer-row2-text:       #ecf0f1;
    --footer-row2-link-hover: #ffffff;
    --footer-row3-bg:         #1a252f;
    --footer-row3-text:       #ecf0f1;
    --footer-row3-link-hover: #ffffff;

    /* Overlay-Hintergrund */
    --overlay-bg:           rgba(0,0,0,0.5);

    /* Layout */
    --wrapper-width:          1200px;
    --sidebar-width:          280px;
    --wrapper-padding:        32px;
    --wrapper-padding-tablet: 16px;
    --wrapper-padding-mobile: 16px;

    /* Typografie */
    --font-family:          'Helvetica Neue', Arial, sans-serif;
    --font-size-base:       16px;
    --font-weight:          400;
    --line-height:          1.6;

    /* Überschriften */
    --heading-color:        var(--color-text);
    --heading-font:         inherit;
    --heading-weight:       700;
    --h1-size:              2.25rem;
    --h2-size:              1.75rem;
    --h3-size:              1.375rem;
    --h4-size:              1.125rem;
    --h5-size:              1rem;
    --h6-size:              0.875rem;

    /* Abstände */
    --paragraph-spacing:    1rem;
    --list-indent:          1.5rem;

    /* Trennlinie – leitet sich von Sekundärfarbe ab */
    --hr-color:             var(--color-secondary);
    --hr-size:              1px;

    /* Tabellen – leiten sich von Grundfarben ab */
    --table-border:         var(--color-secondary);
    --table-header-bg:      var(--color-secondary);
    --table-header-text:    var(--color-text);

    /* Button Primär */
    --btn-bg:               #3498db;
    --btn-text:             #ffffff;
    --btn-hover-bg:         #2980b9;
    --btn-hover-text:       #ffffff;
    --btn-border:           transparent;
    --btn-border-radius:    4px;
    --btn-padding:          0.6rem 1.4rem;
    --btn-font-size:        1rem;
    --btn-font-weight:      400;

    /* Button Sekundär */
    --btn2-bg:              transparent;
    --btn2-text:            #3498db;
    --btn2-hover-bg:        #3498db;
    --btn2-hover-text:      #ffffff;
    --btn2-border:          #3498db;
    --btn2-border-radius:   4px;
    --btn2-border-width:    2px;

    /* Links */
    --link-decoration:      underline;
    --link-hover-decoration:none;

    /* Bilder */
    --img-border-radius:    0;
    --img-box-shadow:       none;
    --img-border:           none;

    /* Formulare */
    --input-bg:             #ffffff;
    --input-text:           #333333;
    --input-border:         #cccccc;
    --input-border-radius:  4px;
    --input-focus-border:   #3498db;
    --input-padding:        0.5rem 0.75rem;

    /* Box */
    --box-bg:               #f9f9f9;
    --box-text:             #333333;
    --box-border:           #e0e0e0;
    --box-border-radius:    4px;
    --box-shadow:           none;
    --box-padding:          1.5rem;

    /* Abstände */
    --spacing-paragraph:    1rem;
    --spacing-element:      0.5rem;
    --spacing-section:      2rem;

    /* Blockquote */
    --blockquote-border:    #3498db;
    --blockquote-bg:        #f8f9fa;
    --blockquote-text:      #555555;

    /* Code / Pre */
    --code-bg:              #f4f4f4;
    --code-text:            #c0392b;
    --code-border:          #e0e0e0;
    --pre-bg:               #2d2d2d;
    --pre-text:             #f8f8f2;

    /* Breadcrumb */
    --breadcrumb-bg:        #f5f5f5;
    --breadcrumb-text:      #666666;
    --breadcrumb-separator: #aaaaaa;
    --breadcrumb-active:    #333333;
    /* Breadcrumb-Fallbacks auf Content-Farben wenn kein Override gesetzt */
}

/* ── Reset & Basis ── */
/* overflow-x:clip verhindert horizontale Scrollbar bei Fullwidth-Techniken
   (width:100vw + negativer margin-left, z.B. FlexSection).
   clip statt hidden: bricht position:sticky im Header nicht. */
:root { overflow-x: clip; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family:    var(--font-family);
    font-size:      var(--font-size-base);
    font-weight:    var(--font-weight);
    line-height:    var(--line-height);
    color:          var(--color-text);
    background:     var(--color-bg);
}

a { color: var(--color-link); text-decoration: var(--link-decoration); }
a:hover { color: var(--color-link-hover); text-decoration: var(--link-hover-decoration); }



/* Links in Navigation und Buttons ohne Unterstreichung */
.site-nav a,
.site-footer a,
.site-logo,
.site-logo:hover { text-decoration: none; }

/* ── Bilder ── */
img {
    max-width:      100%;
    height:         auto;
    border-radius:  var(--img-border-radius);
    box-shadow:     var(--img-box-shadow);
    border:         var(--img-border);
}

/* ── Formulare ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
    background:     var(--input-bg);
    color:          var(--input-text);
    border:         1px solid var(--input-border);
    border-radius:  var(--input-border-radius);
    padding:        var(--input-padding);
    font-family:    var(--font-family);
    font-size:      var(--font-size-base);
    width:          100%;
    transition:     border-color 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color:   var(--input-focus-border);
    outline:        none;
}

/* ── Buttons ── */
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display:            inline-block;
    padding:            var(--btn-padding);
    background:         var(--btn-bg);
    color:              var(--btn-text);
    border:             1px solid var(--btn-border);
    border-radius:      var(--btn-border-radius);
    font-size:          var(--btn-font-size);
    font-weight:        var(--btn-font-weight);
    font-family:        var(--font-family);
    line-height:        1.4;
    text-decoration:    none;
    cursor:             pointer;
    transition:         background 0.2s, color 0.2s, border-color 0.2s;
    white-space:        nowrap;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background:     var(--btn-hover-bg);
    color:          var(--btn-hover-text);
    text-decoration: none;
}

/* Burger-Buttons erben keinen Button-Hover-Effekt */
.nav-toggle:hover,
.nav-toggle:focus,
.tb-header-burger:hover,
.tb-header-burger:focus {
    background:     transparent !important;
    color:          inherit;
    border:         none !important;
    box-shadow:     none !important;
    outline:        none;
}

/* Button Sekundär */
.button.secondary,
button.secondary {
    background:     var(--btn2-bg);
    color:          var(--btn2-text);
    border:         var(--btn2-border-width) solid var(--btn2-border);
    border-radius:  var(--btn2-border-radius);
}

.button.secondary:hover,
button.secondary:hover {
    background:     var(--btn2-hover-bg);
    color:          var(--btn2-hover-text);
}

.wrapper {
    max-width:  var(--wrapper-width);
    margin:     0 auto;
    padding:    0 var(--wrapper-padding);
}

/* ── Header-Raster ── */
.site-header {
    /* KEIN position:relative – würde position:sticky der Kinder auf Header-Höhe begrenzen */
    /* z-index via Kinder gesetzt, nicht hier */
}

/* Nav-Zeile: z-index damit Dropdowns über Page-Content liegen
   Kein eigener Stacking Context (kein z-index + position auf derselben Regel),
   daher können Dropdowns mit z-index:1000 frei nach oben brechen */
.header-cell-nav {
    position: relative;
    z-index:  200;
}

/* Sticky-Zeilen: Basis-Styling (position wird per JS auf fixed gesetzt) */
.header-row-sticky {
    z-index:    100;
    /* position und top werden vom JS-Sticky gesetzt – kein CSS sticky hier */
}

/* Breakpoint: Desktop-Raster einblenden, Mobile ausblenden */
.header-desktop { display: block; }
.header-mobile  { display: none;  }

@media (max-width: 768px) {
    .header-desktop { display: none;  }
    .header-mobile  { display: block; }
}

/* ── Header-Zeile ── */
.header-row {
    background-color: var(--row-bg, var(--header-bg, transparent));
    min-height:       var(--row-height, 0);
    /* Textfarbe: individuelle Zeilen-Farbe → globale Header-Textfarbe → Theme-Fallback */
    color:            var(--row-text, var(--header-text, #ffffff));
}
/* Zeile mit nur empty-Zellen nimmt keinen Platz ein */
.header-row:not([style*="--row-height"]) {
    min-height: 0;
}

.header-row a {
    color: inherit;
    text-decoration: none;
}





/* ── Header-Wrapper und Grid ── */
.header-wrapper {
    max-width: var(--wrapper-width);
    margin:    0 auto;
    padding:   0 var(--wrapper-padding);
}

.header-grid {
    display:     grid;
    align-items: center;
    gap:         1rem;
    min-height:  var(--row-height, auto);
}

/* ── Header-Zellen ── */
.header-cell {
    display:     flex;
    align-items: center;
}

.header-cell-empty {
    /* Platzhalter */
}

/* ── Burger-Button ── */
.tb-header-burger,
[data-tb-burger] {
    display:        flex;
    background:     transparent !important;
    border:         none !important;
    box-shadow:     none !important;
    padding:        0.4rem !important;
    cursor:         pointer;
    color:          #ffffff;
    align-items:    center;
    justify-content: center;
    line-height:    1;
}
.tb-header-burger:hover,
[data-tb-burger]:hover {
    background: transparent !important;
    opacity:    0.8;
    outline:    none;
}

/* Burger X-Animation */
.nav-toggle .nav-icon,
.tb-header-burger .nav-icon,
[data-tb-burger] .nav-icon {
    transition: background 0.18s ease;
}
.nav-toggle .nav-icon::before,
.nav-toggle .nav-icon::after,
.tb-header-burger .nav-icon::before,
.tb-header-burger .nav-icon::after,
[data-tb-burger] .nav-icon::before,
[data-tb-burger] .nav-icon::after {
    transition: transform 0.18s ease, top 0.18s ease;
}
.nav-toggle.is-open .nav-icon,
.tb-header-burger.is-open .nav-icon,
[data-tb-burger].is-open .nav-icon { background: transparent; }
.nav-toggle.is-open .nav-icon::before,
.tb-header-burger.is-open .nav-icon::before,
[data-tb-burger].is-open .nav-icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open .nav-icon::after,
.tb-header-burger.is-open .nav-icon::after,
[data-tb-burger].is-open .nav-icon::after  { top: 0; transform: rotate(-45deg); }

/* ── Navigation im Header ── */
.header-cell-nav .site-nav {
    display:    flex;
    width:      100%;
    align-items: center;
}

/* Burger-Modus: nav-menu ausgeblendet bis is-open */
@media (max-width: 768px) {
    .header-cell-nav .nav-horizontal .site-nav > ul { display: none; }
    .header-cell-nav .nav-horizontal .nav-toggle    { display: flex; }
}

/* ── Inline-Suche ── */
.tb-search-inline {
    display:    flex;
    align-items: center;
}
.tb-search-inline .tb-search {
    display:    flex;
    align-items: center;
    gap:        0.4rem;
}
.tb-search-inline input {
    background: rgba(255,255,255,0.15);
    border:     1px solid rgba(255,255,255,0.3);
    color:      inherit;
    padding:    0.3rem 0.6rem;
    border-radius: 4px;
}
.tb-search-inline button {
    background: transparent;
    border:     none;
    color:      inherit;
    cursor:     pointer;
    padding:    0.2rem;
}

/* ── Inline-Login ── */
.tb-login-inline {
    display:    flex;
    align-items: center;
}
.tb-login-inline .tb-login-btn {
    display:    flex;
    align-items: center;
    gap:        0.4rem;
    color:      inherit;
    text-decoration: none;
}

/* ── Logo ── */
.site-logo {
    display:    flex;
    align-items: center;
    color:      inherit;
    text-decoration: none;
}
.site-logo img { display: block; }
.site-logo-text {
    font-size:   1.2rem;
    font-weight: 700;
}

/* ── Slogan ── */
.site-slogan {
    font-size:  0.9rem;
    opacity:    0.8;
}

/* ── Überschriften im Header ── */
.site-header h1, .site-header h2, .site-header h3,
.site-header h4, .site-header h5, .site-header h6 {
    color: var(--header-heading-text, inherit);
}

/* ── Social-Links ── */
.tb-social-links {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
    padding:     5px 0;
}
.tb-social-link {
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       inherit;
    opacity:     0.8;
    transition:  opacity 0.2s ease;
    line-height: 1;
}
.tb-social-link:hover { opacity: 1; }
.tb-social-link svg   { display: block; }

/* ── Theme-Switch Inline ── */
.tb-theme-switch-inline {
    display:     flex;
    align-items: center;
}
.tb-theme-switch-inline .tb-theme-btn {
    background:  transparent;
    border:      1px solid currentColor;
    color:       inherit;
    cursor:      pointer;
    padding:     0.3rem 0.5rem;
    border-radius: 4px;
    font-size:   1rem;
    line-height: 1;
    opacity:     0.8;
    transition:  opacity 0.2s;
}
.tb-theme-switch-inline .tb-theme-btn:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   BURGER-MENÜ
   Vollständig zentral gesteuert – kein nav.css-Konflikt.
   z-index Hierarchie:
     --z-burger-menu:    999  (Menü-Overlay)
     --z-burger-panel:   999  (Panel)
     --z-burger-backdrop: 98  (Backdrop)
   ══════════════════════════════════════════════════════════════ */

/* ── Basis: .nav-menu im Burger-Modus ──────────────────────────
   Gilt für alle Nav-Styles sobald Burger aktiv ist.
   nav-horizontal: unterhalb Breakpoint
   nav-burger:     immer
   ──────────────────────────────────────────────────────────── */

/* Gemeinsame Basis für alle Burger-Menü-Typen */
@media (max-width: 768px) {
    .nav-horizontal .nav-menu {
        position:       fixed;
        z-index:        999;
        background:     var(--burger-menu-bg);
        overflow-y:     auto;
    }
    /* Liste vertikal */
    .nav-horizontal .site-nav ul {
        display:        flex;
        flex-direction: column;
        gap:            0;
        flex-wrap:      nowrap;
        width:          100%;
        margin:         0;
        padding:        0;
    }
    .nav-horizontal .site-nav ul li {
        width:          100%;
        position:       static;
    }
    .nav-horizontal .site-nav ul li a {
        display:        block;
        border-radius:  0;
        white-space:    normal;
        width:          100%;
        box-sizing:     border-box;
    }
    /* Untermenüs: immer sichtbar, eingerückt */
    .nav-horizontal .site-nav ul li ul {
        display:        flex;
        flex-direction: column;
        position:       static;
        opacity:        1;
        visibility:     visible;
        transform:      none;
        box-shadow:     none;
        border:         none;
        background:     transparent;
        pointer-events: auto;
        z-index:        auto;
        flex-wrap:      nowrap;
        gap:            0;
        width:          100%;
        padding:        0;
        min-width:      0;
        transition:     none;
    }
    .nav-horizontal .site-nav ul li ul li {
        border-top:     none;
        width:          100%;
    }
    .nav-horizontal .site-nav ul li ul li a {
        display:        block;
        width:          100%;
        box-sizing:     border-box;
    }
}

.nav-burger .nav-menu {
    position:       fixed;
    z-index:        999;
    background:     var(--burger-menu-bg);
    overflow-y:     auto;
}
.nav-burger .site-nav ul {
    display:        flex;
    flex-direction: column;
    gap:            0;
    flex-wrap:      nowrap;
    width:          100%;
    margin:         0;
    padding:        0;
}
.nav-burger .site-nav ul li {
    width:          100%;
    position:       static;
}
.nav-burger .site-nav ul li a {
    display:        block;
    border-radius:  0;
    white-space:    normal;
    width:          100%;
    box-sizing:     border-box;
}
.nav-burger .site-nav ul li ul {
    display:        flex;
    flex-direction: column;
    position:       static;
    opacity:        1;
    visibility:     visible;
    transform:      none;
    box-shadow:     none;
    border:         none;
    background:     transparent;
    pointer-events: auto;
    z-index:        auto;
    flex-wrap:      nowrap;
    gap:            0;
    width:          100%;
    padding:        0;
    min-width:      0;
    transition:     none;
}
.nav-burger .site-nav ul li ul li {
    border-top:     none;
    width:          100%;
}
.nav-burger .site-nav ul li ul li a {
    display:        block;
    width:          100%;
    box-sizing:     border-box;
}

/* ── Burger-Menü Farben ─────────────────────────────────────── */

@media (max-width: 768px) {
    .nav-horizontal .nav-menu a {
        color:          var(--burger-menu-text);
        font-size:      var(--burger-menu-font-size);
        padding:        var(--burger-menu-padding);
        border-bottom:  1px solid var(--burger-menu-divider);
        background:     transparent;
    }
    .nav-horizontal .nav-menu a:hover {
        background:     var(--burger-menu-hover-bg);
        color:          var(--burger-menu-hover-text);
    }
    .nav-horizontal .nav-menu li.menu-current > a,
    .nav-horizontal .nav-menu li.menu-parent  > a {
        background:     var(--burger-menu-active-bg);
        color:          var(--burger-menu-active-text);
    }
    .nav-horizontal .nav-menu ul a {
        padding-left:   calc(var(--burger-menu-indent) + 1rem);
        font-size:      var(--burger-menu-sub-size);
        opacity:        0.9;
    }
    .nav-horizontal .nav-menu ul ul a {
        padding-left:   calc(var(--burger-menu-indent) * 2 + 1rem);
        opacity:        0.75;
    }
}

.nav-burger .nav-menu a {
    color:          var(--burger-menu-text);
    font-size:      var(--burger-menu-font-size);
    padding:        var(--burger-menu-padding);
    border-bottom:  1px solid var(--burger-menu-divider);
    background:     transparent;
}
.nav-burger .nav-menu a:hover {
    background:     var(--burger-menu-hover-bg);
    color:          var(--burger-menu-hover-text);
}
.nav-burger .nav-menu li.menu-current > a,
.nav-burger .nav-menu li.menu-parent  > a {
    background:     var(--burger-menu-active-bg);
    color:          var(--burger-menu-active-text);
}
.nav-burger .nav-menu ul a {
    padding-left:   calc(var(--burger-menu-indent) + 1rem);
    font-size:      var(--burger-menu-sub-size);
    opacity:        0.9;
}
.nav-burger .nav-menu ul ul a {
    padding-left:   calc(var(--burger-menu-indent) * 2 + 1rem);
    opacity:        0.75;
}

/* ── Menü-Typ: Dropdown ─────────────────────────────────────── */

@media (max-width: 768px) {
    .burger-type-dropdown .nav-menu {
        top:            var(--actual-header-height, var(--header-height));
        left:           0;
        right:          0;
        width:          100%;
        max-width:      100%;
        height:         auto;
        padding:        0.5rem 0;
        box-shadow:     0 4px 12px rgba(0,0,0,0.2);
    }
    /* Zentriert/Nav-Leiste: top unter der nav-bar */
    .burger-type-dropdown.header-zentriert .nav-bar .nav-menu,
    .burger-type-dropdown.header-navleiste .nav-bar .nav-menu {
        top:        var(--actual-navmenu-top, calc(var(--actual-header-height, var(--header-height)) + 3rem));
    }
}

.burger-type-dropdown.nav-burger .nav-menu {
    top:            var(--actual-header-height, var(--header-height));
    left:           var(--header-inner-left, var(--wrapper-padding));
    right:          var(--header-inner-right, var(--wrapper-padding));
    width:          auto;
    max-width:      min(var(--wrapper-width), 100%);
    height:         auto;
    padding:        0.5rem 0;
    box-shadow:     0 4px 12px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
    .burger-type-dropdown.nav-burger .nav-menu {
        left:           0;
        right:          0;
        width:          100%;
        max-width:      100%;
    }
}

/* ── Menü-Typ: Panel-left ────────────────────────────────────── */

@media (max-width: 768px) {
    .burger-type-panel-left .nav-menu {
        top:            var(--actual-header-height, var(--header-height));
        left:           0;
        right:          auto;
        width:          320px;
        max-width:      90vw;
        height:         calc(100vh - var(--actual-header-height, var(--header-height)));
        padding:        1rem 0 2rem;
        box-shadow:     2px 0 12px rgba(0,0,0,0.2);
    }
    /* Zentriert/Nav-Leiste */
    .burger-type-panel-left.header-zentriert .nav-bar .nav-menu,
    .burger-type-panel-left.header-navleiste .nav-bar .nav-menu {
        top:            var(--actual-navmenu-top, calc(var(--actual-header-height, var(--header-height)) + 3rem));
        height:         calc(100vh - var(--actual-navmenu-top, calc(var(--actual-header-height, var(--header-height)) + 3rem)));
    }
}

.burger-type-panel-left.nav-burger .nav-menu {
    top:            var(--actual-header-height, var(--header-height));
    left:           0;
    right:          auto;
    width:          320px;
    max-width:      90vw;
    height:         calc(100vh - var(--actual-header-height, var(--header-height)));
    padding:        1rem 0 2rem;
    box-shadow:     2px 0 12px rgba(0,0,0,0.2);
}

/* ── Menü-Typ: Panel-right ───────────────────────────────────── */

@media (max-width: 768px) {
    .burger-type-panel-right .nav-menu {
        top:            var(--actual-header-height, var(--header-height));
        left:           auto;
        right:          0;
        width:          320px;
        max-width:      90vw;
        height:         calc(100vh - var(--actual-header-height, var(--header-height)));
        padding:        1rem 0 2rem;
        box-shadow:     -2px 0 12px rgba(0,0,0,0.2);
    }
    /* Zentriert/Nav-Leiste */
    .burger-type-panel-right.header-zentriert .nav-bar .nav-menu,
    .burger-type-panel-right.header-navleiste .nav-bar .nav-menu {
        top:            var(--actual-navmenu-top, calc(var(--actual-header-height, var(--header-height)) + 3rem));
        height:         calc(100vh - var(--actual-navmenu-top, calc(var(--actual-header-height, var(--header-height)) + 3rem)));
    }
}

.burger-type-panel-right.nav-burger .nav-menu {
    top:            var(--actual-header-height, var(--header-height));
    left:           auto;
    right:          0;
    width:          320px;
    max-width:      90vw;
    height:         calc(100vh - var(--actual-header-height, var(--header-height)));
    padding:        1rem 0 2rem;
    box-shadow:     -2px 0 12px rgba(0,0,0,0.2);
}

/* ── Mobile Nav-Overlay ─────────────────────────────────────────
   Wird gerendert wenn Mobile-Raster kein nav-Element enthält.
   Auf Desktop immer ausgeblendet.
   ─────────────────────────────────────────────────────────────── */
.tb-mobile-nav-overlay {
    display: none;
}
@media (max-width: 768px) {
    .tb-mobile-nav-overlay {
        display:        block;
        position:       fixed;
        top:            var(--actual-header-height, 60px);
        left:           0;
        right:          0;
        bottom:         0;
        width:          100%;
        background:     var(--burger-menu-bg, #1a1a1a) !important;
        color:          var(--burger-menu-text, #fff);
        z-index:        9999;
        overflow-y:     auto;
        overflow-x:     hidden;
        /* Standardmäßig versteckt via left:-100% statt transform (kompatibler) */
        left:           -100%;
        transition:     left 0.3s ease;
        /* right muss auto sein wenn left animiert wird */
        right:          auto;
        min-width:      280px;
        max-width:      100vw;
    }
    .tb-mobile-nav-overlay.is-open {
        left:           0;
    }
    .tb-mobile-nav-inner {
        padding:        1rem 0 2rem;
    }
    .tb-mobile-nav-overlay ul {
        display:        flex;
        flex-direction: column;
        list-style:     none;
        margin:         0;
        padding:        0;
        width:          100%;
    }
    .tb-mobile-nav-overlay ul li { width: 100%; }
    .tb-mobile-nav-overlay ul li a {
        display:        block;
        color:          var(--burger-menu-text, #fff);
        font-size:      var(--burger-menu-font-size, 1rem);
        padding:        var(--burger-menu-padding, 0.75rem 1.5rem);
        border-bottom:  1px solid var(--burger-menu-divider, rgba(255,255,255,0.1));
        text-decoration: none;
    }
    .tb-mobile-nav-overlay ul li a:hover {
        background: var(--burger-menu-hover-bg, rgba(255,255,255,0.1));
        color:      var(--burger-menu-hover-text, #fff);
    }
    .tb-mobile-nav-overlay ul li ul li a {
        padding-left: calc(var(--burger-menu-indent, 1rem) + 1.5rem);
        font-size:    var(--burger-menu-sub-size, 0.9rem);
        opacity:      0.85;
    }
    .tb-mobile-nav-overlay ul li ul li ul li a {
        padding-left: calc(var(--burger-menu-indent, 1rem) * 2 + 1.5rem);
        opacity:      0.7;
    }
}

/* ── Raster-System: Nav-Zelle Burger-Verhalten ──────────────────
   [data-tb-nav] ist die site-nav im Header-Raster.
   Burger-Element und Nav-Element können in verschiedenen Zeilen sitzen.
   Auf Mobile: nav-menu standardmäßig versteckt, per is-open einblenden.
   ─────────────────────────────────────────────────────────────── */

/* Nav-Toggle Button: Desktop immer ausgeblendet es sei denn Burger-Element gesetzt */
[data-tb-nav] .nav-toggle {
    display: none;
}

/* Auf Mobile: .nav-menu verstecken wenn Burger-Element in Raster vorhanden */
@media (max-width: 768px) {
    /* Raster: nav-menu standardmäßig versteckt */
    .header-cell-burger ~ .header-cell-nav [data-tb-nav] .nav-menu,
    .header-cell-nav [data-tb-nav] .nav-menu {
        /* Überschrieben durch burger-type-* Selektoren unten */
    }
    /* Dropdown */
    .burger-type-dropdown [data-tb-nav] .nav-menu {
        position:       fixed;
        top:            var(--actual-header-height, 70px);
        left:           0;
        right:          0;
        width:          100%;
        background:     var(--burger-menu-bg);
        overflow-y:     auto;
        z-index:        999;
        opacity:        0;
        visibility:     hidden;
        pointer-events: none;
        padding:        0.5rem 0;
        box-shadow:     0 4px 12px rgba(0,0,0,0.2);
    }
    .burger-type-dropdown [data-tb-nav] .nav-menu.is-open {
        opacity:        1;
        visibility:     visible;
        pointer-events: auto;
    }
    /* Panel links */
    .burger-type-panel-left [data-tb-nav] .nav-menu {
        position:       fixed;
        top:            var(--actual-header-height, 70px);
        left:           0;
        right:          auto;
        width:          320px;
        max-width:      90vw;
        height:         calc(100vh - var(--actual-header-height, 70px));
        background:     var(--burger-menu-bg);
        overflow-y:     auto;
        z-index:        999;
        opacity:        0;
        visibility:     hidden;
        pointer-events: none;
        padding:        1rem 0 2rem;
        box-shadow:     2px 0 12px rgba(0,0,0,0.2);
    }
    .burger-type-panel-left [data-tb-nav] .nav-menu.is-open {
        opacity:        1;
        visibility:     visible;
        pointer-events: auto;
    }
    /* Panel rechts */
    .burger-type-panel-right [data-tb-nav] .nav-menu {
        position:       fixed;
        top:            var(--actual-header-height, 70px);
        left:           auto;
        right:          0;
        width:          320px;
        max-width:      90vw;
        height:         calc(100vh - var(--actual-header-height, 70px));
        background:     var(--burger-menu-bg);
        overflow-y:     auto;
        z-index:        999;
        opacity:        0;
        visibility:     hidden;
        pointer-events: none;
        padding:        1rem 0 2rem;
        box-shadow:     -2px 0 12px rgba(0,0,0,0.2);
    }
    .burger-type-panel-right [data-tb-nav] .nav-menu.is-open {
        opacity:        1;
        visibility:     visible;
        pointer-events: auto;
    }
    /* Animationen */
    .burger-anim-fade [data-tb-nav] .nav-menu {
        transition: opacity 0.3s ease, visibility 0.3s;
    }
    .burger-anim-slide-down.burger-type-dropdown [data-tb-nav] .nav-menu {
        transform:  translateY(-12px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }
    .burger-anim-slide-down.burger-type-dropdown [data-tb-nav] .nav-menu.is-open {
        transform:  translateY(0);
    }
    /* Nav-Liste auf Mobile vertikal */
    [data-tb-nav] .nav-menu ul {
        display:        flex;
        flex-direction: column;
        gap:            0;
        flex-wrap:      nowrap;
        width:          100%;
        margin:         0;
        padding:        0;
    }
    [data-tb-nav] .nav-menu ul li { width: 100%; position: static; }
    [data-tb-nav] .nav-menu ul li a {
        display:        block;
        color:          var(--burger-menu-text);
        font-size:      var(--burger-menu-font-size);
        padding:        var(--burger-menu-padding);
        border-bottom:  1px solid var(--burger-menu-divider);
        background:     transparent;
        white-space:    normal;
        width:          100%;
        box-sizing:     border-box;
    }
    [data-tb-nav] .nav-menu ul li a:hover {
        background: var(--burger-menu-hover-bg);
        color:      var(--burger-menu-hover-text);
    }
    [data-tb-nav] .nav-menu ul li ul {
        display:        flex;
        flex-direction: column;
        position:       static;
        opacity:        1;
        visibility:     visible;
        transform:      none;
        box-shadow:     none;
        border:         none;
        background:     transparent;
        pointer-events: auto;
        z-index:        auto;
        min-width:      0;
        transition:     none;
    }
    [data-tb-nav] .nav-menu ul li ul li a {
        padding-left: calc(var(--burger-menu-indent) + 1rem);
        font-size:    var(--burger-menu-sub-size);
        opacity:      0.9;
    }
}

/* ── Animation: Dropdown (fade / slide-down / none) ─────────── */

/* Basis: versteckt */
@media (max-width: 768px) {
    .burger-type-dropdown .nav-menu {
        opacity:        0;
        visibility:     hidden;
        pointer-events: none;
    }
    .burger-type-dropdown .nav-menu.is-open {
        opacity:        1;
        visibility:     visible;
        pointer-events: auto;
    }
    /* none */
    .burger-anim-none.burger-type-dropdown .nav-menu {
        transition:     none;
    }
    /* fade */
    .burger-anim-fade.burger-type-dropdown .nav-menu {
        transition:     opacity 0.4s ease, visibility 0.4s;
    }
    /* slide-down */
    .burger-anim-slide-down.burger-type-dropdown .nav-menu {
        transform:      translateY(-12px);
        transition:     opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    }
    .burger-anim-slide-down.burger-type-dropdown .nav-menu.is-open {
        transform:      translateY(0);
    }
}

/* nav-burger dropdown */
.burger-type-dropdown.nav-burger .nav-menu {
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
}
.burger-type-dropdown.nav-burger .nav-menu.is-open {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
}
.burger-anim-none.burger-type-dropdown.nav-burger .nav-menu {
    transition:     none;
}
.burger-anim-fade.burger-type-dropdown.nav-burger .nav-menu {
    transition:     opacity 0.4s ease, visibility 0.4s;
}
.burger-anim-slide-down.burger-type-dropdown.nav-burger .nav-menu {
    transform:      translateY(-12px);
    transition:     opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.burger-anim-slide-down.burger-type-dropdown.nav-burger .nav-menu.is-open {
    transform:      translateY(0);
}

/* ── Animation: Panel (translateX) ──────────────────────────── */

/* Panel-left: von links einschieben */
@media (max-width: 768px) {
    .burger-type-panel-left .nav-menu {
        transform:      translateX(-100%);
        transition:     transform 0.3s ease;
        opacity:        1;
        visibility:     visible;
        pointer-events: none;
    }
    .burger-type-panel-left .nav-menu.is-open {
        transform:      translateX(0);
        pointer-events: auto;
    }
}
.burger-type-panel-left.nav-burger .nav-menu {
    transform:      translateX(-100%);
    transition:     transform 0.3s ease;
    opacity:        1;
    visibility:     visible;
    pointer-events: none;
}
.burger-type-panel-left.nav-burger .nav-menu.is-open {
    transform:      translateX(0);
    pointer-events: auto;
}

/* Panel-right: von rechts einschieben */
@media (max-width: 768px) {
    .burger-type-panel-right .nav-menu {
        transform:      translateX(100%);
        transition:     transform 0.3s ease;
        opacity:        1;
        visibility:     visible;
        pointer-events: none;
    }
    .burger-type-panel-right .nav-menu.is-open {
        transform:      translateX(0);
        pointer-events: auto;
    }
}
.burger-type-panel-right.nav-burger .nav-menu {
    transform:      translateX(100%);
    transition:     transform 0.3s ease;
    opacity:        1;
    visibility:     visible;
    pointer-events: none;
}
.burger-type-panel-right.nav-burger .nav-menu.is-open {
    transform:      translateX(0);
    pointer-events: auto;
}

/* ── Burger-Verhalten: overlay-dark Backdrop ── */
.tb-burger-backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    background: var(--overlay-bg);
    z-index:    98;
    transition: opacity 0.25s ease;
    opacity:    0;
}
.tb-burger-backdrop.is-visible {
    display: block;
    opacity: 1;
}

.site-logo img {
    height:         45px !important;
    width:          auto !important;
    max-width:      none !important;
    border-radius:  0 !important;
    box-shadow:     none !important;
    border:         none !important;
}

.site-logo-text {
    font-size:      1.4rem;
    font-weight:    700;
    color:          var(--header-text);
    white-space:    nowrap;
}

/* ── Header-Section (Nav-Leiste: innerhalb <header>, zwischen Header-Inner und Nav-Bar) ── */
.header-section {
    width:      100%;
}
.header-section .wrapper {
    padding-top:    0.75rem;
    padding-bottom: 0.75rem;
}

/* ── Navigation ── */
/* Strukturelle Positionierung – Desktop-Nav und Burger folgen unten */
.site-nav {
    display:        flex;
    align-items:    center;
    position:       relative;
}

/* ── Layout: mit/ohne Sidebar ── */
.layout-sidebar .site-main .wrapper {
    display:        grid;
    gap:            2rem;
    grid-template-columns: 1fr var(--sidebar-width);
    align-items:    start;
}

.layout-sidebar-left .site-main .wrapper {
    display:        grid;
    gap:            2rem;
    grid-template-columns: var(--sidebar-width) 1fr;
    align-items:    start;
}

.layout-full .wrapper {
    display:        block;
}

.content-area { min-width: 0; }

/* ── Sidebar ── */
.sidebar {
    min-width:      0;
}

/* ── Main ── */
.site-main {
    padding:        2rem 0;
}

/* ── Footer ── */
.site-footer {
    margin-top:     2rem;
    border-top:     var(--footer-border-top);
}

.site-footer .footer-row {
    padding:        2rem 0;
}

/* Footer-Zeilen Farben aus CSS-Variablen */
.site-footer .footer-row-1 {
    background:           var(--footer-row1-bg);
    color:                var(--footer-row1-text);
    --footer-link-hover:  var(--footer-row1-link-hover);
}
.site-footer .footer-row-2 {
    background:           var(--footer-row2-bg);
    color:                var(--footer-row2-text);
    --footer-link-hover:  var(--footer-row2-link-hover);
}
.site-footer .footer-row-3 {
    background:           var(--footer-row3-bg);
    color:                var(--footer-row3-text);
    --footer-link-hover:  var(--footer-row3-link-hover);
}

/* Überschriften, HR und Links im Footer erben die Zeilenfarbe */
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
    color:          currentColor;
    font-family:    var(--heading-font);
}

.site-footer hr {
    border-color:   currentColor;
    opacity:        0.2;
}

.site-footer a { opacity: 0.8; }
.site-footer a:hover { opacity: 1; color: var(--footer-link-hover, #fff); }

/* ── Footer-Elemente ── */
.site-footer a {
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: none;
}


.site-footer hr {
    border-color:   #ffffff;
    opacity:        0.2;
    border-width:   1px;
}

.site-footer img {
    border-radius:  0;
    box-shadow:     none;
}

.site-footer .box {
    background:     rgba(255,255,255,0.05);
    border:         1px solid rgba(255,255,255,0.1);
    border-radius:  4px;
    padding:        1.5rem;
}

.site-footer ul,
.site-footer ol {
    padding-left:   1.5rem;
}

.site-footer .button,
.site-footer button,
.site-footer input[type="submit"] {
    background:     #3498db;
    color:          #ffffff;
    border-radius:  4px;
}
.site-footer .button:hover,
.site-footer button:hover,
.site-footer input[type="submit"]:hover {
    background:     #2980b9;
    color:          #ffffff;
}

.site-footer .button.secondary,
.site-footer button.secondary {
    background:     transparent;
    color:          #ffffff;
    border-color:   #ffffff;
    border-radius:  4px;
}
.site-footer .button.secondary:hover,
.site-footer button.secondary:hover {
    background:     #ffffff;
    color:          #333333;
}

.site-footer table td {
    border-bottom:  1px solid rgba(255,255,255,0.15);
}
.site-footer table th {
    background:     rgba(255,255,255,0.1);
    color:          currentColor;
}

.site-footer input[type="text"],
.site-footer input[type="email"],
.site-footer input[type="password"],
.site-footer textarea,
.site-footer select {
    background:     rgba(255,255,255,0.1);
    color:          #ffffff;
    border-color:   rgba(255,255,255,0.3);
    border-radius:  4px;
}
.site-footer input[type="text"]:focus,
.site-footer input[type="email"]:focus,
.site-footer textarea:focus,
.site-footer select:focus {
    border-color:   #3498db;
}

.footer-inner {
    display:        grid;
    gap:            2rem;
}

.footer-cols-1 { grid-template-columns: 1fr; }
.footer-cols-2 { grid-template-columns: repeat(2, 1fr); }
.footer-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ── Responsive Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    .wrapper       { padding: 0 var(--wrapper-padding-tablet); }
    .header-inner  { padding: 0 var(--wrapper-padding-tablet); }
}

/* ── Responsive Mobile (≤ 768px) ── */
@media (max-width: 768px) {

    .wrapper       { padding: 0 var(--wrapper-padding-mobile); }
    .header-inner  { padding: 0 var(--wrapper-padding-mobile); }

    /* Header */
    .header-inner { justify-content: space-between; }

    /* Layout → immer 1 Spalte */
    .layout-sidebar .site-main .wrapper,
    .layout-sidebar-left .site-main .wrapper {
        grid-template-columns: 1fr;
    }

    /* Footer → immer 1 Spalte */
    .footer-cols-2,
    .footer-cols-3 { grid-template-columns: 1fr; }
}

/* ── Inhalt: Überschriften ── */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--heading-font);
    font-weight:    var(--heading-weight);
    color:          var(--heading-color);
    line-height:    1.25;
    margin-bottom:  0.5em;
    margin-top:     1em;
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

/* ── Inhalt: Fließtext ── */
p { margin-bottom: var(--paragraph-spacing); }

/* ── Inhalt: Listen ── */
ul, ol {
    margin-bottom:  var(--paragraph-spacing);
    padding-left:   var(--list-indent);
}
ul { list-style: disc; }
ol { list-style: decimal; }
li { margin-bottom: 0.25em; }

/* ── Inhalt: Trennlinie ── */
hr {
    border:         none;
    border-top:     var(--hr-size) solid var(--hr-color);
    margin:         1.5rem 0;
}

/* ── Inhalt: Tabellen ── */
table {
    width:              100%;
    border-collapse:    collapse;
    margin-bottom:      var(--paragraph-spacing);
}
table th {
    background:     var(--table-header-bg);
    color:          var(--table-header-text);
    padding:        0.5rem 0.75rem;
    text-align:     left;
    font-weight:    600;
}
table td {
    padding:        0.5rem 0.75rem;
    border-bottom:  1px solid var(--table-border);
}
table tr:last-child td { border-bottom: none; }

/* ── Inhalt: Zitat (blockquote) ── */
blockquote {
    border-left:    4px solid var(--blockquote-border);
    background:     var(--blockquote-bg);
    color:          var(--blockquote-text);
    margin:         1.5rem 0;
    padding:        1rem 1.25rem;
    border-radius:  0 4px 4px 0;
    font-style:     italic;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
    display:        block;
    margin-top:     0.5rem;
    font-size:      0.875em;
    font-style:     normal;
    opacity:        0.75;
}
blockquote cite::before { content: "— "; }

/* ── Inhalt: Code & Pre ── */
code {
    font-family:    'Consolas', 'Monaco', 'Courier New', monospace;
    font-size:      0.875em;
    background:     var(--code-bg);
    color:          var(--code-text);
    border:         1px solid var(--code-border);
    border-radius:  3px;
    padding:        0.1em 0.4em;
}
pre {
    font-family:    'Consolas', 'Monaco', 'Courier New', monospace;
    background:     var(--pre-bg);
    color:          var(--pre-text);
    border-radius:  4px;
    padding:        1rem 1.25rem;
    overflow-x:     auto;
    margin-bottom:  var(--spacing-paragraph);
    line-height:    1.5;
    font-size:      0.9em;
}
pre code {
    background:     transparent;
    border:         none;
    padding:        0;
    color:          inherit;
    font-size:      inherit;
}
kbd {
    font-family:    'Consolas', 'Monaco', 'Courier New', monospace;
    font-size:      0.8em;
    background:     #f0f0f0;
    color:          #333333;
    border:         1px solid #cccccc;
    border-bottom:  2px solid #aaaaaa;
    border-radius:  3px;
    padding:        0.1em 0.45em;
}

/* ── Inhalt: Fieldset & Legend ── */
fieldset {
    border:         1px solid var(--input-border);
    border-radius:  4px;
    padding:        1rem 1.25rem;
    margin-bottom:  var(--spacing-paragraph);
}
legend {
    padding:        0 0.5em;
    font-weight:    600;
    font-size:      0.9em;
    color:          var(--color-text);
}

/* ── Inhalt: Definitionsliste ── */
dl { margin-bottom: var(--spacing-paragraph); }
dt {
    font-weight:    600;
    margin-top:     0.75em;
}
dt:first-child { margin-top: 0; }
dd {
    margin-left:    1.5em;
    color:          var(--color-text);
    opacity:        0.85;
}

/* ── Inhalt: Figure & Figcaption ── */
figure {
    margin:         1.5rem 0;
    display:        inline-block;
    max-width:      100%;
}
figcaption {
    font-size:      0.825em;
    color:          var(--color-text);
    opacity:        0.65;
    margin-top:     0.4rem;
    font-style:     italic;
    text-align:     center;
}

/* ── Inhalt: Inline-Elemente ── */
mark {
    background:     #fff176;
    color:          #333333;
    padding:        0.05em 0.25em;
    border-radius:  2px;
}
abbr[title] {
    text-decoration:    underline dotted;
    cursor:             help;
}
small { font-size: 0.825em; }
sub {
    vertical-align: sub;
    font-size:      0.75em;
}
sup {
    vertical-align: super;
    font-size:      0.75em;
}

/* ── Inhalt: Skip-Link (Accessibility) ── */
.skip-link {
    position:       absolute;
    top:            -100%;
    left:           1rem;
    background:     var(--color-primary);
    color:          #ffffff;
    padding:        0.5rem 1rem;
    border-radius:  0 0 4px 4px;
    font-size:      0.875rem;
    font-weight:    600;
    text-decoration: none;
    z-index:        99999;
    transition:     top 0.15s ease;
}
.skip-link:focus {
    top:            0;
    outline:        2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ── Inhalt: Breadcrumb ── */
.tb-breadcrumb {
    background:     #f5f5f5;
    color:          #666666;
    width:          100%;
}
.tb-breadcrumb-list {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            0.25rem;
    list-style:     none;
    margin:         0 auto;
    max-width:      var(--wrapper-width);
    padding-top:    0.5rem 0;
    padding-bottom: 0.5rem 0;
    padding-left:   var(--wrapper-padding);
    padding-right:  var(--wrapper-padding);
    font-size:      0.875rem;
}
@media (max-width: 1024px) {
    .tb-breadcrumb-list {
        padding-left:  var(--wrapper-padding-tablet);
        padding-right: var(--wrapper-padding-tablet);
    }
}
@media (max-width: 768px) {
    .tb-breadcrumb-list {
        padding-left:  var(--wrapper-padding-mobile);
        padding-right: var(--wrapper-padding-mobile);
    }
}
.tb-breadcrumb-list li { display: flex; align-items: center; gap: 0.25rem; }
.tb-breadcrumb-list a {
    color:          inherit;
    text-decoration: none;
}
.tb-breadcrumb-list a:hover { text-decoration: underline; }
.tb-breadcrumb-sep {
    color:          #aaaaaa;
    font-style:     normal;
}
.tb-breadcrumb-sep::before {
    content:        '›';
}
.tb-breadcrumb-active {
    color:          #333333;
    font-weight:    500;
}

/* ── Suche ── */
/* Header-Suche: eigene Zeile im Wrapper */
.tb-search-bar {
    padding:        0.35rem 0;
}

.tb-search-bar .wrapper {
    display:        flex;
    justify-content: flex-end;
}

.tb-search {
    display:        flex;
    align-items:    center;
    gap:            0.25rem;
    opacity:        0.75;
    transition:     opacity 0.2s;
}

.tb-search:focus-within { opacity: 1; }

.tb-search input[type="text"] {
    border:         none;
    border-bottom:  1px solid currentColor;
    outline:        none;
    background:     transparent;
    color:          var(--header-text);
    font-size:      0.9rem;
    padding:        0.15rem 0.4rem;
    width:          140px;
}

.tb-search input[type="text"]::placeholder {
    color:          var(--header-text);
    opacity:        0.6;
}

.tb-search button {
    border:         none;
    background:     transparent;
    color:          var(--header-text);
    cursor:         pointer;
    padding:        0.15rem;
    display:        flex;
    align-items:    center;
}

/* Menü-Suche: Lupe als Link */
.tb-search-toggle { list-style: none; }

.tb-search-link {
    display:        flex;
    align-items:    center;
    padding:        0.5rem;
    color:          var(--nav-text);
    text-decoration: none;
    opacity:        0.8;
    transition:     opacity 0.2s;
}

.tb-search-link:hover { opacity: 1; }

/* ── Abstände ── */
p, ul, ol, dl, table, blockquote, pre {
    margin-bottom:  var(--spacing-paragraph);
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom:  var(--spacing-element);
    margin-top:     calc(var(--spacing-element) * 2);
}

h1:first-child, h2:first-child,
h3:first-child, h4:first-child { margin-top: 0; }

.content-area > *,
.content-area section {
    margin-bottom:  var(--spacing-section);
}

/* ── Highlight für Suchergebnisse ── */
.highlight { background-color: #ffff00; }

/* ── Box ── */
.box {
    background:     var(--box-bg);
    color:          var(--box-text);
    border:         1px solid var(--box-border);
    border-radius:  var(--box-border-radius);
    box-shadow:     var(--box-shadow);
    padding:        var(--box-padding);
    margin-bottom:  1.5rem;
}

.box h1, .box h2, .box h3,
.box h4, .box h5, .box h6 {
    color:          var(--box-text);
}

.box a {
    color:          var(--color-link);
}

.box > :last-child { margin-bottom: 0; }

/* ── Frontend-Anmeldung ── */
.tb-login-bar {
    padding:        0.35rem 0;
}

.tb-login-bar .wrapper {
    display:        flex;
    justify-content: flex-end;
}

.tb-login-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    color:          var(--header-text);
    text-decoration: none;
    font-size:      0.85rem;
    opacity:        0.8;
    transition:     opacity 0.2s;
}

.tb-login-btn:hover { opacity: 1; }

/* Menü-Variante */
.tb-login-toggle { list-style: none; }

.tb-login-link {
    display:        flex;
    align-items:    center;
    gap:            0.3rem;
    padding:        0.5rem;
    color:          var(--nav-text);
    text-decoration: none;
    font-size:      0.85rem;
    opacity:        0.8;
    transition:     opacity 0.2s;
    white-space:    nowrap;
}

.tb-login-link:hover { opacity: 1; }

/* ── Hintergrundgrafiken ── */
/* Generiert durch TemplateBuilder – build_bg_css() */









/* Overlay-Hintergrund (Burger-Menü etc.) */
.tb-burger-overlay { background: var(--overlay-bg); }

/* ── Theme-Switch Button ── */
.tb-theme-switch {
    position: fixed;
    bottom:   1.25rem;
    z-index:  9000;
}
.tb-theme-switch.pos-br { right: 1.25rem; }
.tb-theme-switch.pos-bl { left:  1.25rem; }

.tb-theme-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2rem;
    height:          2rem;
    border-radius:   50%;
    border:          none;
    background:      rgba(0, 0, 0, 0.35);
    color:           rgba(255, 255, 255, 0.85);
    font-size:       1rem;
    cursor:          pointer;
    box-shadow:      0 1px 4px rgba(0,0,0,0.25);
    transition:      background 0.2s, color 0.2s;
    line-height:     1;
    padding:         0;
    backdrop-filter: blur(4px);
}

.tb-theme-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    color:      #ffffff;
}



/* Nav Style CSS */

/* =====================================================
   Nav Style: Classic
   Horizontales Menü mit Dropdown + Burger Mobile
   ===================================================== */

/* ── Basis Reset ── */
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav ul li a { text-decoration: none; }

/* ── Burger-Button ── */
.nav-toggle {
    display:        none;
    flex-direction: column;
    gap:            5px;
    cursor:         pointer;
    padding:        0.5rem;
    background:     none;
    border:         none;
    z-index:        100;
    flex-shrink:    0;
}
.nav-toggle:hover,
.nav-toggle:focus {
    background:     none !important;
    box-shadow:     none !important;
    outline:        none;
    opacity:        0.8;
}

.nav-icon {
    width:          24px;
    height:         2px;
    position:       relative;
    display:        inline-block;
    background:     var(--header-text);
    border-radius:  1px;
    transition:     background 0.2s ease;
}

.nav-icon::before,
.nav-icon::after {
    content:        "";
    position:       absolute;
    left:           0; right: 0;
    height:         2px;
    background:     var(--header-text);
    border-radius:  1px;
    transition:     top 0.2s ease, transform 0.2s ease;
}

.nav-icon::before { top: -7px; }
.nav-icon::after  { top:  7px; }

/* Burger → X Animation */
.nav-toggle.is-open .nav-icon,
.tb-header-burger.is-open .nav-icon             { background: transparent; }
.nav-toggle.is-open .nav-icon::before,
.tb-header-burger.is-open .nav-icon::before     { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open .nav-icon::after,
.tb-header-burger.is-open .nav-icon::after      { top: 0; transform: rotate(-45deg); }

/* ══════════════════════════════════════════════════════
   DESKTOP (> 768px)
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    .site-nav {
        overflow:   visible;
    }

    .site-nav ul {
        list-style:     none;
        display:        flex;
        gap:            0.25rem;
        margin:         0;
        padding:        0;
        position:       relative;
        flex-wrap:      nowrap;
        overflow:       visible;
        justify-content: {{NAV_UL_JUSTIFY}};
    }

    .site-nav ul li {
        position:       relative;
        flex-shrink:    0;
    }

    .site-nav ul li a {
        display:        block;
        padding:        0.5rem 1rem;
        color:          var(--nav-text);
        background:     var(--nav-bg);
        font-size:      inherit;
        text-decoration: none;
        white-space:    nowrap;
        border-radius:  4px;
        transition:     background 0.2s, color 0.2s;
    }

    .site-nav ul li a:hover {
        background:     var(--nav-hover-bg);
        color:          var(--nav-hover-text);
    }

    /* Pfeil-Indikator bei Eltern-Elementen */
    .site-nav ul li.menu-expand > a::after {
        content:        "▾";
        display:        none;
        margin-left:    0.35em;
        font-size:      1em;
        opacity:        0.8;
        transition:     transform 0.2s;
    }
    /* Untermenü-Ebenen: gleiches Symbol */
    .site-nav ul li ul li.menu-expand > a::after {
        content:        "▾";
        display:        none;
        margin-left:    0.35em;
        font-size:      1em;
        opacity:        0.8;
    }

    .site-nav ul li.menu-current > a,
    .site-nav ul li.menu-parent > a {
        background:     var(--nav-active-bg);
        color:          var(--nav-active-text);
    }

    /* Dropdown */
    .site-nav ul li ul {
        display:        none;
        position:       absolute;
        min-width:      200px;
        background:     var(--dropdown-bg);
        box-shadow:     0 4px 12px rgba(0,0,0,0.15);
        border-radius:  4px;
        border:         1px solid var(--dropdown-border);
        z-index:        1000;
        list-style:     none;
        padding:        0;
        margin:         0;
        top:            100%;
        left:           0;
    }

    .site-nav ul li ul li {
        border-top:     1px solid var(--dropdown-border);
        position:       relative;
        white-space:    nowrap;
    }
    .site-nav ul li ul li:first-child { border-top: none; }

    .site-nav ul li ul li a {
        padding:        0.5rem 1rem;
        color:          var(--dropdown-text);
        background:     var(--dropdown-bg);
        font-size:      0.9em;
        white-space:    nowrap;
        display:        block;
        text-decoration: none;
    }

    .site-nav ul li ul li a:hover,
    .site-nav ul li ul li.menu-current > a {
        background:     var(--dropdown-hover-bg);
        color:          var(--dropdown-hover-text);
    }

    /* 3. Ebene Basis-Position – JS überschreibt */
    .site-nav ul li ul li ul {
        top:  0;
        left: 100%;
    }
}

/* ══════════════════════════════════════════════════════
   NUR-BURGER – Desktop Nav ausblenden
   ══════════════════════════════════════════════════════ */
.nav-burger .nav-toggle { display: flex; }
.nav-burger .site-nav > ul { display: none; }


/* ── TemplateBuilder Themes ─────────────────────────────────────────────
   Automatisch generiert. Jedes Theme überschreibt CSS-Variablen per
   [data-theme="slug"]-Attribut auf dem <html>-Element.
   ─────────────────────────────────────────────────────────────────── */

/* Theme: Dunkel */
[data-theme="dunkel"] {
    --color-primary: #334155;
    --color-secondary: #f1f5f9;
    --color-accent: #0ea5e9;
    --color-text: #f1f5f9;
    --color-bg: #1e293b;
    --color-link: #0ea5e9;
    --color-link-hover: #ffffff;
    --header-bg: #334155;
    --header-text: #f1f5f9;
    --header-heading-text: #ffffff;
    --header-link-hover: #3498db;
    --header-border-bottom: #ffffff;
    --header-shadow: 1;
    --utility-bg: #1a252f;
    --utility-text: #aaaaaa;
    --utility-link-hover: #ffffff;
    --navbar-bg: #1a252f;
    --navbar-text: #ffffff;
    --nav-bg: #000000;
    --nav-text: #f1f5f9;
    --nav-hover-bg: #0ea5e9;
    --nav-hover-text: #ffffff;
    --nav-active-bg: #0ea5e9;
    --nav-active-text: #ffffff;
    --nav-underline-color: #3498db;
    --dropdown-bg: #ffffff;
    --dropdown-text: #333333;
    --dropdown-hover-bg: #f5f5f5;
    --dropdown-hover-text: #333333;
    --dropdown-border: #e0e0e0;
    --burger-menu-bg: #1e293b;
    --burger-menu-text: #f1f5f9;
    --burger-menu-hover-bg: rgba(255,255,255,0.1);
    --burger-menu-hover-text: #ffffff;
    --burger-menu-active-bg: rgba(255,255,255,0.15);
    --burger-menu-active-text: #ffffff;
    --burger-menu-divider: rgba(255,255,255,0.1);
    --heading-color: #f1f5f9;
    --hr-color: #dddddd;
    --table-border: #dddddd;
    --table-header-bg: #f0f0f0;
    --table-header-text: #333333;
    --breadcrumb-separator: #1e293b;
    --img-border: none;
    --btn-bg: #3498db;
    --btn-text: #ffffff;
    --btn-hover-bg: #2980b9;
    --btn-hover-text: #ffffff;
    --btn-border: transparent;
    --btn2-bg: transparent;
    --btn2-text: #3498db;
    --btn2-hover-bg: #3498db;
    --btn2-hover-text: #ffffff;
    --btn2-border: #3498db;
    --box-bg: #f9f9f9;
    --box-text: #333333;
    --box-border: #e0e0e0;
    --input-bg: #ffffff;
    --input-text: #333333;
    --input-border: #cccccc;
    --input-focus-border: #3498db;
    --footer-row1-bg: #334155;
    --footer-row1-text: #f1f5f9;
    --footer-row1-link-hover: #ffffff;
    --footer-row2-bg: #1a252f;
    --footer-row2-text: #ecf0f1;
    --footer-row2-link-hover: #ffffff;
    --footer-row3-bg: #111;
    --footer-row3-text: #ecf0f1;
    --footer-row3-link-hover: #ffffff;
    --footer-border-top: #ffffff;
    --footer-btn-bg: #3498db;
    --footer-btn-text: #ffffff;
    --footer-btn-hover-bg: #2980b9;
    --footer-btn-hover-text: #ffffff;
    --footer-btn2-bg: transparent;
    --footer-btn2-text: #ffffff;
    --footer-btn2-hover-bg: #ffffff;
    --footer-btn2-hover-text: #333333;
    --footer-btn2-border: #ffffff;
    --footer-box-bg: rgba(255,255,255,0.05);
    --footer-box-border: rgba(255,255,255,0.1);
    --footer-hr-color: #aaa7a7;
    --footer-table-border: rgba(255,255,255,0.15);
    --footer-table-header-bg: rgba(255,255,255,0.1);
    --footer-table-header-text: currentColor;
    --footer-input-bg: rgba(255,255,255,0.1);
    --footer-input-text: #ffffff;
    --footer-input-border: rgba(255,255,255,0.3);
    --footer-input-focus-border: #3498db;
    --footer-bg:   #334155;
    --footer-text: #f1f5f9;
}

/* Theme: Hell */
[data-theme="hell"] {
    --color-primary: #334155;
    --color-secondary: #f1f5f9;
    --color-accent: #0ea5e9;
    --color-text: #1e293b;
    --color-bg: #ffffff;
    --color-link: #0ea5e9;
    --color-link-hover: #334155;
    --header-bg: #334155;
    --header-text: #f1f5f9;
    --header-heading-text: #ffffff;
    --header-link-hover: #3498db;
    --header-border-bottom: #ffffff;
    --header-shadow: 1;
    --utility-bg: #1a252f;
    --utility-text: #aaaaaa;
    --utility-link-hover: #ffffff;
    --navbar-bg: #1a252f;
    --navbar-text: #ffffff;
    --nav-bg: #000000;
    --nav-text: #f1f5f9;
    --nav-hover-bg: #0ea5e9;
    --nav-hover-text: #ffffff;
    --nav-active-bg: #0ea5e9;
    --nav-active-text: #ffffff;
    --nav-underline-color: #3498db;
    --dropdown-bg: #ffffff;
    --dropdown-text: #333333;
    --dropdown-hover-bg: #f5f5f5;
    --dropdown-hover-text: #333333;
    --dropdown-border: #e0e0e0;
    --burger-menu-bg: #1e293b;
    --burger-menu-text: #f1f5f9;
    --burger-menu-hover-bg: #1e293b;
    --burger-menu-hover-text: #ffffff;
    --burger-menu-active-bg: #1e293b;
    --burger-menu-active-text: #ffffff;
    --burger-menu-divider: #7b7b7b;
    --heading-color: #222222;
    --hr-color: #dddddd;
    --table-border: #dddddd;
    --table-header-bg: #f0f0f0;
    --table-header-text: #333333;
    --img-border: none;
    --btn-bg: #3498db;
    --btn-text: #ffffff;
    --btn-hover-bg: #2980b9;
    --btn-hover-text: #ffffff;
    --btn-border: transparent;
    --btn2-bg: transparent;
    --btn2-text: #3498db;
    --btn2-hover-bg: #3498db;
    --btn2-hover-text: #ffffff;
    --btn2-border: #3498db;
    --box-bg: #f9f9f9;
    --box-text: #333333;
    --box-border: #e0e0e0;
    --input-bg: #ffffff;
    --input-text: #333333;
    --input-border: #cccccc;
    --input-focus-border: #3498db;
    --footer-row1-bg: #334155;
    --footer-row1-text: #f1f5f9;
    --footer-row1-link-hover: #ffffff;
    --footer-row2-bg: #1a252f;
    --footer-row2-text: #ecf0f1;
    --footer-row2-link-hover: #ffffff;
    --footer-row3-bg: #111;
    --footer-row3-text: #ecf0f1;
    --footer-row3-link-hover: #ffffff;
    --footer-border-top: #ffffff;
    --footer-btn-bg: #3498db;
    --footer-btn-text: #ffffff;
    --footer-btn-hover-bg: #2980b9;
    --footer-btn-hover-text: #ffffff;
    --footer-btn2-bg: transparent;
    --footer-btn2-text: #ffffff;
    --footer-btn2-hover-bg: #ffffff;
    --footer-btn2-hover-text: #333333;
    --footer-btn2-border: #ffffff;
    --footer-box-bg: rgba(255,255,255,0.05);
    --footer-box-border: rgba(255,255,255,0.1);
    --footer-hr-color: currentColor;
    --footer-table-border: rgba(255,255,255,0.15);
    --footer-table-header-bg: rgba(255,255,255,0.1);
    --footer-table-header-text: currentColor;
    --footer-input-bg: rgba(255,255,255,0.1);
    --footer-input-text: #ffffff;
    --footer-input-border: rgba(255,255,255,0.3);
    --footer-input-focus-border: #3498db;
    --footer-bg:   #334155;
    --footer-text: #f1f5f9;
}