/* LORO-X Template - Pure CSS (kein Bootstrap)
   Schriftart: Helvetica
   Farben:
   - Primär: #006aac (CI-Blau für Überschriften, Links, Buttons, Trennlinien)
   - Primär Hover: #005590 (Dunkleres CI-Blau)
   - Text: #444444
   - Hintergrund: #ffffff
   - Hellgrau: #eeeeee (Header-Top, Footer, Tabellen-Zeilen)
   - Grau: #cccccc (Rahmen)
*/

/* ========================================
   ACCESSIBILITY - Skip Link
   ======================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #006aac;
    color: #fff;
    padding: 12px 24px;
    border-radius: 0 0 4px 4px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 500;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #006aac;
    outline-offset: 2px;
}

/* ========================================
   RESET & BASIS
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #444444;
    background-color: #fff;
    margin: 0;
    padding: 0;
}

/* Main content */
main {
    display: block;
}

/* FullWidth Layout - Abstand zum Header */
main.content-fullwidth {
    padding-top: 25px;
}

a {
    color: #006aac;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #005590;
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    list-style: none;
}

/* ========================================
   CONTAINER
   ======================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.container-fluid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ========================================
   HEADER
   ======================================== */
.header {
    background: #fff;
    /* Schlagschatten am 2026-09-13 entfernt (Betreiber): die Altseite hatte
       keinen - dort endet der Kopfbereich mit harter Kante auf Weiss. */
    position: relative;
    z-index: 1000;
    flex-shrink: 0;
}

/* Top Bar */
.header-top {
    background: #eeeeee;
    color: #444444;
    font-size: 0.95rem;
    padding: 8px 0;
}

.header-top a {
    color: #444444;
    margin-right: 20px;
}

.header-top a:hover {
    color: #006aac;
}

.header-top i {
    margin-right: 5px;
}

.header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-top-links {
    display: flex;
    gap: 20px;
}

/* Kleine Tool-Icons im grauen Kopfbalken (nachgebildet vom Alt-Design loro.de:
   calculator/wrench/barcode/check/user). Lokale SVG-Masken -> das Icon erbt die
   Linkfarbe (#444, Hover #006aac) automatisch. Zuordnung REIHENFOLGE-basiert, weil
   die Reihenfolge in allen 20 Sprachen identisch ist (nur Slugs/Labels sind übersetzt).
   Bei Umsortierung/neuem Punkt im grauen Balken die nth-of-type-Nummern anpassen. */
.header-top-links a {
    display: inline-flex;
    align-items: center;
}
.header-top-links a::before {
    content: "";
    flex: none;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    background-color: currentColor;
    -webkit-mask: var(--hi) center / contain no-repeat;
    mask: var(--hi) center / contain no-repeat;
}
.header-top-links a:nth-of-type(1) { --hi: url(/fileadmin/templates/images/icons/calculator.svg); } /* Berechnung */
.header-top-links a:nth-of-type(2) { --hi: url(/fileadmin/templates/images/icons/wrench.svg); }     /* Konfigurator */
.header-top-links a:nth-of-type(3) { --hi: url(/fileadmin/templates/images/icons/barcode.svg); }    /* Produktdatenbank */
.header-top-links a:nth-of-type(4) { --hi: url(/fileadmin/templates/images/icons/check.svg); }      /* Ausschreibung */
.header-top-links a:nth-of-type(5) { --hi: url(/fileadmin/templates/images/icons/user.svg); }       /* Login */

/* Schmale Desktop-Fenster (992-1199 px): Im grauen Kopfbalken schob die Suche in
   langen Sprachen (z. B. nl) bzw. mit Ausschreibungs-Zaehler "(3)" bis ca. 40 px
   ueber den rechten Rand (waagerechter Scrollbalken, gefunden 2026-09-25 bei der
   Login-Menue-Abnahme). Abstand zwischen den Links hier 20 statt 40 px. */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-top .header-top-links a {
        margin-right: 0;
    }
}

/* Suchformular */
.search-form {
    display: flex;
    align-items: center;
}

.search-form input[type="text"],
.search-form input[type="search"] {
    padding: 8px 14px;
    border: 1px solid #cccccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 0.9rem;
    width: 200px;
    outline: none;
    background: #ffffff;
    color: #444444;
    transition: border-color 0.2s ease;
}

.search-form input[type="text"]:focus,
.search-form input[type="search"]:focus {
    border-color: #006aac;
}

.search-form input[type="search"]::placeholder {
    color: #999999;
}

.search-form button {
    padding: 8px 14px;
    background: #006aac;
    border: 1px solid #006aac;
    border-radius: 0 4px 4px 0;
    color: #ffffff;
    cursor: pointer;
    /* Lupe statt Beschriftung (2026-09-13, wie auf der Altseite). Der uebersetzte
       Button-Text bleibt im DOM und damit fuer Screenreader/SEO erhalten - er wird
       nur per font-size:0 unsichtbar gemacht. Icon als Maske, gleiche Technik wie
       .header-top-links. */
    font-size: 0;
    line-height: 0;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-form button::before {
    content: "";
    flex: none;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: url(/fileadmin/templates/images/icons/search.svg) center / contain no-repeat;
    mask: url(/fileadmin/templates/images/icons/search.svg) center / contain no-repeat;
}

.search-form button:hover {
    background: #005590;
    border-color: #005590;
}

/* ========================================
   LIVE-SUCHE DROPDOWN
   ======================================== */
.search-wrapper {
    position: relative;
}

.search-results {
    position: absolute;
    top: 100%;
    right: 0;
    width: 500px;
    max-height: 450px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
}

.search-results.active {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid #eeeeee;
    text-decoration: none;
    transition: background 0.15s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.active {
    background: #f5f5f5;
}

.search-result-thumb {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    object-fit: contain;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 3px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    display: block;
    font-weight: 600;
    color: #006aac;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.search-result-item:hover .search-result-title,
.search-result-item.active .search-result-title {
    color: #005590;
}

.search-result-desc {
    display: block;
    font-size: 0.85rem;
    color: #666666;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-no-result {
    padding: 20px 15px;
    text-align: center;
    color: #999999;
    font-size: 0.9rem;
}

.search-result-more {
    display: block;
    padding: 12px 15px;
    text-align: center;
    background: #eeeeee;
    color: #006aac;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    border-top: 1px solid #cccccc;
}

.search-result-more:hover {
    background: #e0e0e0;
    color: #005590;
}

/* Abschnitts-Überschrift im Live-Suche-Dropdown (z.B. "Themen & Seiten").
   Dezente Trennung zwischen Artikeln und Seiten – funktioniert auf dem weißen
   Desktop-Dropdown UND im weißen Ergebnis-Kasten des mobilen Overlays. */
.search-section-heading {
    padding: 8px 15px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888888;
    background: #f7f9fb;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #eeeeee;
}

/* Seiten-Treffer: Icon-Kachel statt Produktfoto (nutzt .search-result-thumb-Maße) */
.search-result-page-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #006aac;
}

/* Header Main */
.header-main {
    padding: 4px 0;
}

.header-main-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo img {
    height: 34px;
    width: auto;
    position: relative;
    top: 3px; /* Logo optisch nach unten verschieben */
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #006aac;
}

/* Logo-Block: Logo oben, DE/EN-Flaggen darunter (Betreiber 2026-09-25) */
.logo-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

/* Sprachauswahl DE/EN unter dem Logo - Nachbau der Altseite (2026-09-25):
   dort .lang{padding-left:20px;padding-right:10px;font-size:11px} mit dem
   17x12-Flaggen-GIF als Hintergrund links (0 1px). GIFs 1:1 von der Altseite
   uebernommen (images/lang_de.gif, lang_en.gif). Die fruehere Knopf-Optik
   dieser Klasse war ungenutzt (kein Markup) und ist ersetzt. Der
   20-Sprachen-Umschalter bleibt unveraendert im Footer (.footer-lang-nav). */
.lang-nav {
    display: flex;
    flex-wrap: nowrap;
    /* 3 px gleichen das per position:relative/top:3px nach unten versetzte
       Logo-Bild aus, 2 px Luft wie auf der Altseite (.lang-nav{padding-top:2px}) */
    padding-top: 5px;
    line-height: 14px;
}

.lang-nav a.lang {
    display: inline-block;
    padding-left: 20px;
    padding-right: 10px;
    font-size: 11px;
    line-height: 14px;
    color: #006aac;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: 0 1px;
}

.lang-nav a.lang:hover {
    color: #005590;
    text-decoration: underline;
}

.lang-nav a.lang-de { background-image: url(/fileadmin/templates/images/lang_de.gif); }
.lang-nav a.lang-en { background-image: url(/fileadmin/templates/images/lang_en.gif); }

/* ========================================
   HAUPTNAVIGATION
   ======================================== */
.main-nav {
    display: flex;
    align-items: center;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav > ul {
    display: flex;
    gap: 5px;
}

.main-nav > ul > li {
    position: relative;
}

.main-nav > ul > li > a {
    display: block;
    padding: 12px 18px;
    color: #006aac;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.2s ease;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a {
    color: #005590;
    background: #f5f5f5;
}

/* Dropdown 2. Ebene */
.main-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    border-top: 3px solid #006aac;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

.main-nav > ul > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.main-nav .sub-menu > li {
    position: relative;
}

.main-nav .sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: #006aac;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.main-nav .sub-menu li:last-child > a {
    border-bottom: none;
}

.main-nav .sub-menu li a:hover {
    background: #f5f5f5;
    color: #005590;
}

/* Dropdown 3. Ebene - nach rechts neben dem Eltern-Element */
.main-nav .sub-menu .sub-menu {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    border-top: none !important;
    border-left: 3px solid #006aac;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

.main-nav .sub-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

/* 3. Ebene nach links für rechte Menüpunkte (Produktdaten, Lösungen, Kontakt) */
.main-nav > ul > li:nth-child(n+4) .sub-menu .sub-menu {
    left: auto !important;
    right: 100% !important;
    border-left: none;
    border-right: 3px solid #006aac;
}

/* Desktop-Hauptmenue wie auf der Altseite (Betreiber 2026-09-25) - nur >= 992 px,
   das Mobilmenue (<= 991 px) hat eigene Auf-/Zu-Schalter und bleibt unberuehrt. */
@media (min-width: 992px) {
    /* rechtsbuendig: Luft zwischen Logo und Menue wie auf der Altseite */
    .main-nav {
        margin-left: auto;
    }

    /* Rechtsbuendiges Menue: die Dropdowns der rechten Hauptpunkte (ab dem 4.)
       oeffnen buendig an der rechten Kante ihres Punkts, sonst ragt z. B. das
       Kontakt-Dropdown aus dem Fenster (Altseite: .mainmenu-2 ... right:0). */
    .main-nav > ul > li:nth-child(n+4) > .sub-menu {
        left: auto;
        right: 0;
    }

    /* Pfeile wie auf der Altseite (dort FontAwesome caret-down/caret-right, 12px):
       nach unten an Hauptpunkten MIT Untermenue, nach rechts an Unterpunkten mit
       weiterem Untermenue. Als CSS-Dreieck in Linkfarbe (currentColor).
       li.has-submenu: Hauptebene liefert TypoScript, tiefere Ebenen setzt
       main.js (addMobileToggleButtons) an jedes li mit direktem .sub-menu. */
    .main-nav > ul > li.has-submenu > a::after {
        content: '';
        display: inline-block;
        margin-left: 6px;
        vertical-align: middle;
        position: relative;
        top: -1px;
        border-top: 5px solid currentColor;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }

    .main-nav .sub-menu li.has-submenu > a {
        position: relative;
        padding-right: 34px;
    }

    .main-nav .sub-menu li.has-submenu > a::after {
        content: '';
        position: absolute;
        right: 14px;
        top: 50%;
        margin-top: -4px;
        border-left: 5px solid currentColor;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
    }
}

/* Schmale Desktop-Fenster: sechs Hauptpunkte samt Pfeil passen neben Logo einzeilig */
@media (min-width: 992px) and (max-width: 1199px) {
    .main-nav > ul > li > a {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Hauptmenue bleibt IMMER einzeilig (Folgeauftrag Betreiber 2026-09-25, Login-Menue):
   Eingeloggte FE-User haben 8 statt 6 Hauptpunkte (+ "Mitarbeiter", "Partner").
   Vorher schrumpften die Punkte dann unter ihre Textbreite und die Pfeile rutschten
   in eine eigene Zeile. Jetzt:
   1. Text und Pfeil brechen nie getrennt um (white-space: nowrap).
   2. Ab 7 Hauptpunkten ruecken die Punkte per :has() enger zusammen, bei weniger
      Platz zusaetzlich minimal kleinere Schrift, unter 1100 px ohne Pfeile auf der
      Hauptebene (die Dropdowns selbst behalten ihre Pfeile).
   3. Sicherheitsnetz fuer alles, was CSS nicht vorhersehen kann (lange Beschriftungen
      in anderen Sprachen, breitere System-Schriften, Scrollbalken): main.js
      (loroNavEinpassen) misst, ob das Menue in die Zeile passt, und setzt sonst
      stufenweise .nav-fit-1 bis .nav-fit-4 (enger -> kleinere Schrift -> ohne
      Pfeile -> noch kleiner). Passt es, bleibt alles wie abgenommen (6 Punkte DE).
   Nur Desktop (>= 992 px); das Mobilmenue ist nicht betroffen. */
@media (min-width: 992px) {
    .main-nav > ul > li > a {
        white-space: nowrap;
        /* nur Farben animieren - eine Padding-/Schrift-Animation wuerde die
           Messung in main.js verfaelschen */
        transition-property: color, background-color;
    }

    .main-nav > ul:has(> li:nth-child(7)) {
        gap: 2px;
    }

    .main-nav > ul:has(> li:nth-child(7)) > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .main-nav > ul:has(> li:nth-child(7)) > li > a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 0.95rem;
    }
}

@media (min-width: 992px) and (max-width: 1099px) {
    .main-nav > ul:has(> li:nth-child(7)) > li.has-submenu > a::after {
        display: none;
    }
}

/* Stufen des JS-Sicherheitsnetzes (kumulativ, main.js loroNavEinpassen).
   .header-main davor, damit sie die :has()-Regeln oben sicher schlagen. */
@media (min-width: 992px) {
    .header-main .main-nav.nav-fit-1 > ul {
        gap: 0;
    }

    .header-main .main-nav.nav-fit-1 > ul > li > a {
        padding-left: 6px;
        padding-right: 6px;
    }

    .header-main .main-nav.nav-fit-2 > ul > li > a {
        font-size: 0.95rem;
    }

    .header-main .main-nav.nav-fit-3 > ul > li.has-submenu > a::after {
        display: none;
    }

    .header-main .main-nav.nav-fit-4 > ul > li > a {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 0.875rem;
    }
}

/* Dropdown-Richtung (Folgeauftrag 2026-09-25): Durch das rechtsbuendige Menue ragten
   in langen Sprachen (fr, ro, bg, gr, pl, cz ...) und bei 8 Hauptpunkten einzelne
   Dropdowns ueber den Fensterrand. main.js (loroNavEinpassen) prueft jedes Dropdown
   und dreht es nur dann um, wenn es sonst aus dem Fenster ragen wuerde:
   Ebene 2 buendig rechts/links am Hauptpunkt, Ebene 3+ nach links/rechts.
   overflow-x:clip verhindert zusaetzlich, dass ein (unsichtbares) Dropdown einen
   waagerechten Seiten-Scrollbalken erzeugt; nach unten bleibt alles sichtbar. */
@media (min-width: 992px) {
    .header-main {
        overflow-x: clip;
    }

    .header-main .main-nav > ul > li > .sub-menu.nav-dd-rechtsbuendig {
        left: auto;
        right: 0;
    }

    .header-main .main-nav > ul > li > .sub-menu.nav-dd-linksbuendig {
        left: 0;
        right: auto;
    }

    .header-main .main-nav .sub-menu .sub-menu.nav-dd-nach-links {
        left: auto !important;
        right: 100% !important;
        border-left: none;
        border-right: 3px solid #006aac;
    }

    .header-main .main-nav .sub-menu .sub-menu.nav-dd-nach-rechts {
        left: 100% !important;
        right: auto !important;
        border-right: none;
        border-left: 3px solid #006aac;
    }

    /* passt auf keiner Seite ganz: main.js begrenzt die Breite, Eintraege umbrechen */
    .header-main .main-nav .sub-menu.nav-dd-umbruch > li > a {
        white-space: normal;
    }
}

/* ========================================
   MOBILE NAVIGATION
   ======================================== */
.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
    position: relative;
}

.mobile-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #006aac;
    transition: all 0.3s ease;
    pointer-events: none;
}

.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-nav-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: #006aac;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: none;
    z-index: 1003;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Nav Footer (Login etc.) - nur im mobilen Menü sichtbar */
.mobile-nav-footer {
    display: none;
}

/* Mobile Toggle Button - nur auf Mobile sichtbar */
.mobile-toggle-btn {
    display: none;
}

/* ========================================
   CONTENT
   ======================================== */
.content-main {
    padding: 40px 0;
}

/* Content mit Sidebar */
.content-main.has-sidebar {
    padding: 0;
}

.content-with-sidebar {
    display: flex;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #e9e9e9;
}


.sidebar-nav {
    padding: 15px 0;
}

.content-with-sidebar .content-area {
    flex: 1;
    min-width: 0;
}

.content-with-sidebar .content-inner {
    padding: 20px 25px;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu > li > a {
    display: block;
    padding: 10px 20px;
    color: #006aac;
    font-weight: normal;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.sidebar-menu > li > a:hover {
    background: #fff;
    color: #005590;
    border-left-color: #006aac;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.current > a {
    background: #fff;
    color: #005590;
    border-left-color: #006aac;
}

/* Untermenü mit Aufklapp-Icon als separater Toggle-Button */
.sidebar-menu > li.has-submenu {
    position: relative;
}

.sidebar-menu > li.has-submenu > a {
    padding-right: 35px;
}

.sidebar-toggle {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle::after {
    content: '▼';
    font-size: 0.6rem;
    color: #999;
    transition: transform 0.2s ease;
}

/* Pfeil zeigt den Zustand auf ALLEN Ebenen (vorher nur Ebene 1) */
.sidebar-menu li.has-submenu.open > .sidebar-toggle::after {
    transform: rotate(180deg);
}

/* Submenu standardmäßig versteckt */
.sidebar-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    background: #fff;
}

/* Auf-/Zuklappen (Fix 2026-09-25): offen ist AUSSCHLIESSLICH ein Zweig, dessen li
   die Klasse .open traegt. Frueher erzwangen Regeln wie
   `.sidebar-menu > li.active > .sidebar-submenu {display:block}` den aktiven Pfad
   dauerhaft offen - der Pfeil schaltete dort nur .open um und hatte beim Zuklappen
   keine Wirkung. main.js setzt beim Laden .open an den aktiven Pfad und markiert
   das Menue mit .js-sidebar. Bis dahin (bzw. ohne JavaScript) haelt die
   :not(.js-sidebar)-Regel den aktiven Pfad offen - kein Flackern beim Laden. */
.sidebar-menu li.open > .sidebar-submenu,
.sidebar-menu:not(.js-sidebar) li.active > .sidebar-submenu,
.sidebar-menu:not(.js-sidebar) li.current > .sidebar-submenu {
    display: block;
}

.sidebar-submenu > li > a {
    display: block;
    padding: 8px 20px 8px 35px;
    color: #006aac;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.sidebar-submenu > li > a:hover {
    background: #fff;
    color: #005590;
}

.sidebar-submenu > li.active > a,
.sidebar-submenu > li.current > a {
    color: #005590;
    font-weight: 500;
    background: #fff;
    border-left-color: #006aac;
}

/* Sidebar Menü Ebene 3 - schwarze Schrift zur Unterscheidung von Ebene 2 */
.sidebar-submenu .sidebar-submenu > li > a {
    color: #444444;
    padding-left: 50px;
}

.sidebar-submenu .sidebar-submenu > li > a:hover {
    color: #000000;
}

.sidebar-submenu .sidebar-submenu > li.active > a,
.sidebar-submenu .sidebar-submenu > li.current > a {
    color: #000000;
    font-weight: 500;
}

/* Sidebar Menü Ebene 4 - noch weiter eingerückt */
.sidebar-submenu .sidebar-submenu .sidebar-submenu > li > a {
    color: #666666;
    padding-left: 65px;
    font-size: 0.9rem;
}

.sidebar-submenu .sidebar-submenu .sidebar-submenu > li > a:hover {
    color: #444444;
}

.sidebar-submenu .sidebar-submenu .sidebar-submenu > li.active > a,
.sidebar-submenu .sidebar-submenu .sidebar-submenu > li.current > a {
    color: #444444;
    font-weight: 500;
}

/* Toggle-Buttons für alle Sidebar-Unterebenen */
.sidebar-submenu > li.has-submenu {
    position: relative;
}

.sidebar-submenu > li.has-submenu > a {
    padding-right: 35px;
}

.sidebar-submenu > li.has-submenu > .sidebar-toggle {
    position: absolute;
    right: 10px;
    top: 6px;
}

/* Untermenüs tieferer Ebenen: Sichtbarkeit regelt allein die .open-Regel oben
   (die frueheren active/current-Zwangsregeln hier sind entfallen, 2026-09-25). */

.page-title {
    font-size: 1.4rem;
    color: #006aac;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #006aac;
}

/* Breadcrumb */
.breadcrumb {
    background: #fff;
    padding: 10px 0;
    font-size: 0.85rem;
    border-top: 1px solid #e9e9e9;
    overflow: hidden;
    flex-shrink: 0;
}

.breadcrumb > .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.breadcrumb ul,
.breadcrumb ol {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.breadcrumb li::after {
    content: '›';
    margin: 0 8px;
    color: #999;
    flex-shrink: 0;
}

.breadcrumb li:last-child::after {
    content: '';
    margin: 0;
}

.breadcrumb li:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb a {
    color: #666;
}

.breadcrumb a:hover {
    color: #006aac;
}

.breadcrumb li:last-child a,
.breadcrumb li:last-child span {
    color: #444444;
    font-weight: 500;
}

/* Content Elements */
.ce-frame {
    margin-bottom: 30px;
}

.ce-header {
    color: #006aac;
    margin-bottom: 15px;
}

/* Überschriften - kompaktere Größen */
h1,
.ce-headline-1 {
    font-size: 1.5rem;
    color: #006aac;
    margin: 0 0 12px 0;
}

/* Alle Ueberschriften im Markenblau (Betreiber 2026-09-25, hebt die
   h2-Schwarz-Regel vom 2026-08-04 auf). Hierarchie nur ueber die Groesse. */
h2,
.ce-headline-2 {
    font-size: 1.25rem;
    color: #006aac;
    margin: 0 0 10px 0;
}

h3,
.ce-headline-3 {
    font-size: 1.1rem;
    color: #006aac;
    margin: 0 0 8px 0;
}

h4, h5, h6,
.ce-headline-4,
.ce-headline-5 {
    font-size: 1rem;
    color: #006aac;
    margin: 0 0 6px 0;
}

/* Fließtext */
.ce-bodytext p {
    margin-bottom: 15px;
    color: #444444;
}

.ce-bodytext {
    color: #444444;
}

/* Links im Fließtext */
.ce-bodytext a {
    color: #006aac;
}

.ce-bodytext a:hover {
    color: #005590;
}

.ce-bodytext ul,
.ce-bodytext ol {
    margin: 15px 0;
    padding-left: 25px;
    color: #444444;
}

.ce-bodytext ul {
    list-style: disc;
}

.ce-bodytext ol {
    list-style: decimal;
}

.ce-bodytext li {
    margin-bottom: 8px;
}

/* Bilder - Standard ohne Rahmen */
.ce-image img,
.ce-textpic img,
.ce-gallery img,
figure img,
.ce-bodytext img {
    border: none !important;
    border-radius: 4px;
}

/* Bildunterschriften zentriert */
figure figcaption,
.ce-image figcaption,
.ce-textpic figcaption,
.ce-gallery figcaption,
.ce-media figcaption {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    margin-top: 8px;
    word-break: break-word; /* Lange Wörter umbrechen */
    hyphens: auto; /* Silbentrennung aktivieren */
}

/* Galerie-Bildunterschriften einheitliche Höhe */
.ce-gallery figcaption {
    min-height: 2.5em; /* Einheitliche Caption-Höhe für konsistentes Layout */
}

/* ========================================
   TYPO3 GALERIE / BILDERSPALTEN
   ======================================== */

/* Galerie-Container */
.ce-gallery {
    width: 100%;
}

/* Zeilen in der Galerie */
.ce-gallery .ce-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start; /* Spalten oben ausrichten - verhindert vertikale Verschiebung */
}

/* Spalten/Bilder in der Galerie */
.ce-gallery .ce-column {
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
}

/* Bilder */
.ce-gallery .ce-column figure {
    margin: 0;
}

.ce-gallery .ce-column img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   TYPO3 BILD-POSITIONIERUNG (Position and Alignment)
   ======================================== */

/* Bild zentriert (Center) */
.ce-center .ce-gallery {
    margin-left: auto;
    margin-right: auto;
}

.ce-center .ce-gallery .ce-row {
    justify-content: center;
}

/* Bild rechts (Right) */
.ce-right .ce-gallery {
    margin-left: auto;
    margin-right: 0;
}

.ce-right .ce-gallery .ce-row {
    justify-content: flex-end;
}

/* Bild links (Left) */
.ce-left .ce-gallery {
    margin-left: 0;
    margin-right: auto;
}

.ce-left .ce-gallery .ce-row {
    justify-content: flex-start;
}

/* Bild im Text rechts (In text, right) */
.ce-intext.ce-right .ce-gallery {
    float: right;
    margin-left: 20px;
    margin-bottom: 15px;
    width: auto;
    max-width: 50%;
}

/* Bild im Text links (In text, left) */
.ce-intext.ce-left .ce-gallery {
    float: left;
    margin-right: 20px;
    margin-bottom: 15px;
    width: auto;
    max-width: 50%;
}

/* Bild im Text ohne Umfluss (In text, no wrap) - Bild und Text nebeneinander */
.ce-textpic.ce-intext.ce-nowrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ce-textpic.ce-intext.ce-nowrap.ce-right {
    flex-direction: row-reverse;
}

.ce-textpic.ce-intext.ce-nowrap.ce-left {
    flex-direction: row;
}

.ce-textpic.ce-intext.ce-nowrap .ce-gallery {
    flex: 0 0 auto;
    width: auto;
    max-width: 50%;
}

.ce-textpic.ce-intext.ce-nowrap .ce-bodytext {
    flex: 1;
}

/* Bild oberhalb des Textes (Above) */
.ce-above .ce-gallery {
    margin-bottom: 20px;
}

/* Bild unterhalb des Textes (Below) */
.ce-below .ce-gallery {
    margin-top: 20px;
}

/* Bild neben Text rechts (Beside text, right) */
.ce-textpic.ce-right:not(.ce-intext),
.ce-beside.ce-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 20px;
}

.ce-textpic.ce-right:not(.ce-intext) .ce-gallery,
.ce-beside.ce-right .ce-gallery {
    flex: 0 0 auto;
    width: auto;
    max-width: 50%;
}

.ce-textpic.ce-right:not(.ce-intext) .ce-bodytext,
.ce-beside.ce-right .ce-bodytext {
    flex: 1;
}

/* Bild neben Text links (Beside text, left) */
.ce-textpic.ce-left:not(.ce-intext),
.ce-beside.ce-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.ce-textpic.ce-left:not(.ce-intext) .ce-gallery,
.ce-beside.ce-left .ce-gallery {
    flex: 0 0 auto;
    width: auto;
    max-width: 50%;
}

.ce-textpic.ce-left:not(.ce-intext) .ce-bodytext,
.ce-beside.ce-left .ce-bodytext {
    flex: 1;
}

/* Clearfix für Float */
.ce-textpic::after,
.ce-image::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive Galerie
   ------------------------------------------------------------------
   ECHTE URSACHE (gefunden 2026-07-20), warum die alte 2-Spalten-Regel
   auf dem Handy nie griff: TYPO3s fluid_styled_content liefert VOR
   dieser Datei ein Default-CSS (/typo3temp/assets/css/<hash>.css) mit
   ".ce-column { margin-right: 10px }" - unconditioniert, ohne Media
   Query. Auf dem Desktop faengt "flex: 1 1 0" (flex-shrink:1) diese
   10px unbemerkt durch leichtes Schrumpfen ab. Sobald hier aber ein
   STARRER flex-basis (0 0 ...) gesetzt wird, kann nichts mehr
   schrumpfen: 2 Spalten a calc(50% - 7.5px) + gap 15px ergeben exakt
   100% Zeilenbreite, aber die zusaetzlichen 10px Alt-margin (jede
   Spalte ausser der letzten) lassen die Zeile um 10-20px ueberlaufen
   -> flex-wrap wirft die 2. Spalte in die naechste Zeile -> optisch
   1 Bild pro Reihe, obwohl die Spaltenbreite rechnerisch 50% war.
   Fix: margin-right:0 direkt in diesen Regeln, damit "gap" die
   einzige Abstandsquelle bleibt.

   Ausserdem waren die alten Breakpoints <=768px und <=480px WIDER-
   SPRUECHLICH: <=768px machte frueher ALLE Galerien (auch 1-2-Spalten-
   Fotos) 2-spaltig, erst ab <=480px kam die 1-spaltige Default-Regel
   mit Ausnahme nur fuer 5-8 Spalten - im Bereich 481-768px griff die
   Ausnahme also nie, und 3/4-Spalten-Galerien blieben faelschlich
   1-spaltig. Jetzt einheitliche Logik fuer den GESAMTEN Mobil-Bereich
   <=768px, der separate <=480px-Block entfaellt (kein Doppel-Code). */
@media (max-width: 768px) {
    .ce-gallery .ce-row {
        flex-wrap: wrap;
    }

    /* Default: 1 Spalte (grosse Einzelbilder/Fotos, data-ce-columns 1-2) */
    .ce-gallery .ce-column {
        flex: 0 0 100%;
        min-width: 100%;
        margin-right: 0; /* hebt FSC-Alt-margin auf, siehe Erklaerung oben */
        overflow-wrap: break-word; /* lange Woerter (z. B. Retentionsdrehschieber)
            duerfen in der halbbreiten Kachel umbrechen statt in die
            Nachbarspalte zu ragen (2026-08-05) */
        hyphens: auto; /* Woerterbuch-Trennung statt hartem Bruch, wo der Browser kann */
    }

    /* Icon-Galerien (data-ce-columns 3-8, z.B. Serien-/Datenblatt-Kacheln
       100-200px): 2 Kacheln nebeneinander, halbiert die Seitenhoehe.
       CSS kennt kein ">=" fuer Attribute, daher 3-8 einzeln (hoehere
       Spaltenzahlen kommen real nicht vor). */
    .ce-gallery[data-ce-columns="3"] .ce-column,
    .ce-gallery[data-ce-columns="4"] .ce-column,
    .ce-gallery[data-ce-columns="5"] .ce-column,
    .ce-gallery[data-ce-columns="6"] .ce-column,
    .ce-gallery[data-ce-columns="7"] .ce-column,
    .ce-gallery[data-ce-columns="8"] .ce-column {
        flex: 0 0 calc(50% - 7.5px);
        min-width: calc(50% - 7.5px);
        margin-right: 0;
    }

    /* Letztes Bild bei ungerader Anzahl: BEWUSST KEINE Vollbreite mehr
       (2026-08-05): bei gemischten Hoch-/Querformat-Covern wurde das letzte
       Bild riesig (Betreiber-Screenshot /produktdaten/pdf-international).
       Es bleibt in Kachelbreite; Zentrierung besorgt die Row-Regel. */
    .ce-gallery .ce-column:last-child:nth-child(odd) {
        flex: 0 0 calc(50% - 7.5px);
        min-width: calc(50% - 7.5px);
    }

    /* Bei kleinen Bildschirmen Float aufheben */
    .ce-intext.ce-right .ce-gallery,
    .ce-intext.ce-left .ce-gallery {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Beside text / nowrap: untereinander statt nebeneinander.
       WICHTIG (Fix 2026-07-19, Attika-Produktfinder): die .ce-right/.ce-left-Varianten
       MÜSSEN explizit gelistet werden. Sonst gewinnt die spezifischere Desktop-Regel
       .ce-textpic.ce-intext.ce-nowrap.ce-right/.ce-left (4 Klassen, row-reverse/row) auch
       auf Mobil, und der Text bleibt neben dem Bild gequetscht/versteckt statt darunter. */
    .ce-textpic.ce-right:not(.ce-intext),
    .ce-textpic.ce-left:not(.ce-intext),
    .ce-textpic.ce-intext.ce-nowrap,
    .ce-textpic.ce-intext.ce-nowrap.ce-right,
    .ce-textpic.ce-intext.ce-nowrap.ce-left,
    .ce-beside.ce-right,
    .ce-beside.ce-left {
        flex-direction: column;
    }

    .ce-textpic.ce-right:not(.ce-intext) .ce-gallery,
    .ce-textpic.ce-left:not(.ce-intext) .ce-gallery,
    .ce-textpic.ce-intext.ce-nowrap .ce-gallery,
    .ce-beside.ce-right .ce-gallery,
    .ce-beside.ce-left .ce-gallery {
        max-width: 100%;
    }
}

/* Der frühere separate <=480px-Block für .ce-gallery .ce-column entfällt
   (2026-07-20): seine Logik (1 Spalte default, Ausnahme 5-8 Spalten) ist
   jetzt im <=768px-Block oben einheitlich für den gesamten Mobil-Bereich
   enthalten (dort auch auf 3-4 Spalten erweitert). Ein <=480px-Block matcht
   ohnehin nur eine Teilmenge von <=768px, doppelte/abweichende Regeln hier
   hätten wieder zu Inkonsistenzen geführt. */

/* ===== Mobil-Politur für textpic (2026-06-23) ===== */
/* Bilder proportional skalieren statt verzerren (das height-Attribut wäre sonst fix) */
.ce-textpic img,
.ce-gallery img,
.ce-bodytext img {
    height: auto;
}
@media (max-width: 768px) {
    /* "Text im Bild" gestapelt: Bild zentriert, volle Breite, Abstand nach unten
       (vorher in 50%-Spalte nach rechts gequetscht) */
    .ce-intext.ce-right .ce-gallery,
    .ce-intext.ce-left .ce-gallery {
        float: none;
        max-width: 100%;
        margin: 0 auto 1rem;
    }
    .ce-intext .ce-gallery .ce-column {
        flex: 0 0 100%;
        min-width: 100%;
        margin-right: 0; /* selbe FSC-Alt-margin-Ursache wie oben, sonst 10px Bildrand abgeschnitten */
    }
    /* Icon-Galerien in "Im Text"-CEs behalten die 2 Spalten (data-ce-columns
       3-8): die Stapel-Regel darueber ist nur fuer grosse Einzelbilder gedacht,
       gewann aber als spaetere Regel gegen die 3-8-Ausnahme des ersten
       768px-Blocks - dadurch waren alle intext-Kachelgalerien mobil 1-spaltig
       (Vorfall /produktdaten/pdf-international, 2026-08-05). */
    .ce-intext .ce-gallery[data-ce-columns="3"] .ce-column,
    .ce-intext .ce-gallery[data-ce-columns="4"] .ce-column,
    .ce-intext .ce-gallery[data-ce-columns="5"] .ce-column,
    .ce-intext .ce-gallery[data-ce-columns="6"] .ce-column,
    .ce-intext .ce-gallery[data-ce-columns="7"] .ce-column,
    .ce-intext .ce-gallery[data-ce-columns="8"] .ce-column {
        flex: 0 0 calc(50% - 7.5px);
        min-width: calc(50% - 7.5px);
    }
    .ce-intext .ce-gallery .ce-row {
        justify-content: center;
        align-items: center; /* gemischte Hoch-/Querformat-Cover mittig statt oben angeflanscht */
    }
    /* Fließtext angenehmer lesbar */
    .ce-bodytext {
        line-height: 1.5;
    }

    /* Große Galerie-Bilder (z.B. "Produktfinder" .ce-center.ce-above auf der Startseite)
       sind auf Mobil linksbündig statt zentriert. Ursache: Das FSC-Default-CSS
       (/typo3temp/assets/css/<hash>.css, lädt VOR dieser Datei) setzt
       ".ce-gallery figure { display:table; margin:0 }" -> die figure schrumpft
       auf die feste HTML-Bildbreite (z.B. 285px) und sitzt dann linksbündig in
       der auf Mobil 100% breiten Flex-Spalte. text-align:center der Spalte wirkt
       nicht auf die Table-Box, und margin:auto auf dem img INNERHALB der
       geschrumpften figure bewirkt nichts. Fix: margin:auto auf der figure
       selbst — bei display:table zentriert das wie bei block (2026-07-16).
       Nur hier im Mobil-Breakpoint, Desktop-Flex-Layout bleibt unveraendert. */
    .ce-gallery .ce-column figure {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Bilder mit Rahmen - nur wenn "Border around each element" in TYPO3 aktiviert (.ce-border) */
.ce-border img,
.ce-border iframe {
    border: 1px solid #006aac !important;
}

/* Horizontale Linien */
hr,
.ce-div {
    border: none;
    border-top: 1px solid #006aac;
    margin: 20px 0;
}

/* ========================================
   SITEMAP MENÜ (hierarchische Darstellung)
   ======================================== */
.ce-menu-sitemap ul,
.ce-menu-sitemap-pages ul,
.frame-type-menu_sitemap ul,
.frame-type-menu_sitemap_pages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ce-menu-sitemap > ul > li,
.ce-menu-sitemap-pages > ul > li,
.frame-type-menu_sitemap > ul > li,
.frame-type-menu_sitemap_pages > ul > li {
    margin-bottom: 5px;
}

.ce-menu-sitemap a,
.ce-menu-sitemap-pages a,
.frame-type-menu_sitemap a,
.frame-type-menu_sitemap_pages a {
    color: #006aac;
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid #eeeeee;
}

.ce-menu-sitemap a:hover,
.ce-menu-sitemap-pages a:hover,
.frame-type-menu_sitemap a:hover,
.frame-type-menu_sitemap_pages a:hover {
    color: #005590;
    background: #f9f9f9;
    padding-left: 5px;
}

/* Ebene 1 - Hauptseiten */
.ce-menu-sitemap > ul > li > a,
.ce-menu-sitemap-pages > ul > li > a,
.frame-type-menu_sitemap > ul > li > a,
.frame-type-menu_sitemap_pages > ul > li > a {
    font-weight: 600;
    font-size: 1.1rem;
    color: #006aac;
    border-bottom: 1px solid #cccccc;
}

/* Ebene 2 - Unterseiten */
.ce-menu-sitemap > ul > li > ul,
.ce-menu-sitemap-pages > ul > li > ul,
.frame-type-menu_sitemap > ul > li > ul,
.frame-type-menu_sitemap_pages > ul > li > ul {
    margin-left: 20px;
    margin-top: 5px;
    border-left: 2px solid #eeeeee;
    padding-left: 15px;
}

.ce-menu-sitemap > ul > li > ul > li > a,
.ce-menu-sitemap-pages > ul > li > ul > li > a,
.frame-type-menu_sitemap > ul > li > ul > li > a,
.frame-type-menu_sitemap_pages > ul > li > ul > li > a {
    font-weight: 500;
    font-size: 1rem;
}

/* Ebene 3 - Sub-Unterseiten */
.ce-menu-sitemap > ul > li > ul > li > ul,
.ce-menu-sitemap-pages > ul > li > ul > li > ul,
.frame-type-menu_sitemap > ul > li > ul > li > ul,
.frame-type-menu_sitemap_pages > ul > li > ul > li > ul {
    margin-left: 20px;
    margin-top: 5px;
    border-left: 2px solid #eeeeee;
    padding-left: 15px;
}

.ce-menu-sitemap > ul > li > ul > li > ul > li > a,
.ce-menu-sitemap-pages > ul > li > ul > li > ul > li > a,
.frame-type-menu_sitemap > ul > li > ul > li > ul > li > a,
.frame-type-menu_sitemap_pages > ul > li > ul > li > ul > li > a {
    font-weight: 400;
    font-size: 0.95rem;
    color: #444444;
}

/* Ebene 4+ */
.ce-menu-sitemap ul ul ul ul,
.ce-menu-sitemap-pages ul ul ul ul,
.frame-type-menu_sitemap ul ul ul ul,
.frame-type-menu_sitemap_pages ul ul ul ul {
    margin-left: 20px;
    border-left: 2px solid #eeeeee;
    padding-left: 15px;
}

.ce-menu-sitemap ul ul ul ul a,
.ce-menu-sitemap-pages ul ul ul ul a,
.frame-type-menu_sitemap ul ul ul ul a,
.frame-type-menu_sitemap_pages ul ul ul ul a {
    font-size: 0.9rem;
    color: #666666;
}

/* ========================================
   PRODUKTFINDER GRID
   ======================================== */
.produktfinder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 30px 0;
}

.produkt-karte {
    background: #ffffff;
    border: 1px solid #006aac;
    border-radius: 4px;
    padding: 25px;
    transition: all 0.2s ease;
}

.produkt-karte:hover {
    box-shadow: 0 5px 20px rgba(42, 86, 153, 0.15);
    transform: translateY(-3px);
}

.produkt-karte h3 {
    margin: 0 0 10px 0;
    font-size: 1.05rem;
    color: #006aac;
}

.produkt-karte h3 a {
    color: #006aac;
}

.produkt-karte h3 a:hover {
    color: #005590;
}

.produkt-karte p {
    color: #444444;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.produkt-karte .btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.9rem;
}

/* Responsive Produktfinder Grid */
@media (max-width: 991px) {
    .produktfinder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .produktfinder-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
    background: #eeeeee;
    color: #444444;
    padding: 50px 0 0;
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid #006aac;
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cccccc;
    color: #006aac;
}

.footer a {
    color: #444444;
    display: block;
    padding: 5px 0;
    font-size: 0.9rem;
}

.footer a:hover {
    color: #006aac;
    padding-left: 5px;
}

.footer p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #444444;
}

.footer p a {
    display: inline;
    padding: 0;
}

/* Sprach-Navigation im Footer */
.footer .footer-lang-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 25px 0;
    margin-top: 30px;
    border-top: 1px solid #cccccc;
}

.footer .footer-lang-nav a {
    display: inline-block !important;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    color: #444444;
    background: transparent;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.footer .footer-lang-nav a:hover {
    background: #ffffff;
    color: #006aac;
    border-color: #006aac;
    padding-left: 10px;
}

.footer .footer-lang-nav a.active {
    background: #006aac;
    color: #ffffff;
    border-color: #006aac;
    font-weight: 600;
}

.footer-bottom {
    padding: 20px 0;
    border-top: 1px solid #cccccc;
    text-align: center;
    font-size: 0.85rem;
    color: #666666;
}

.footer-bottom a {
    display: inline;
    padding: 0 10px;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-block;
    padding: 12px 25px;
    font-size: 0.95rem;
    font-weight: 500;
    border: 2px solid #006aac;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    background: #006aac;
    color: #fff;
}

.btn:hover {
    background: #fff;
    color: #006aac;
    border-color: #006aac;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active {
    background: #006aac !important;
    color: #fff !important;
    border: 2px solid #006aac !important;
}

.btn-primary:hover {
    background: #005a8c !important;
    color: #fff !important;
    border-color: #005a8c !important;
}

.btn-primary:disabled {
    background: #006aac !important;
    border-color: #006aac !important;
    opacity: 1;
}

.btn-outline-primary,
.btn-outline-primary:focus {
    background: transparent !important;
    border: 2px solid #006aac !important;
    color: #006aac !important;
}

.btn-outline-primary:hover {
    background: #006aac !important;
    color: #fff !important;
    border-color: #006aac !important;
}

.btn-outline-secondary {
    border: 2px solid #6c757d !important;
}

.btn-outline {
    background: transparent;
    border: 2px solid #006aac;
    color: #006aac;
}

.btn-outline:hover {
    background: #006aac;
    color: #fff;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-light {
    background: #f8f9fa;
    border-color: #f8f9fa;
    color: #444;
}

.btn-light:disabled {
    background: #f8f9fa;
    border-color: #f8f9fa;
    color: #999;
}

/* ========================================
   TEXT STYLES (lead, small, muted)
   ======================================== */
.lead {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 20px;
}

.small {
    font-size: 0.875rem;
    margin-top: 15px;
    margin-bottom: 15px;
}

.text-muted {
    color: #6c757d;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Abstände zwischen verschiedenen Text-Styles */
.lead + p,
.lead + .small,
.lead + .text-muted {
    margin-top: 20px;
}

p + .small,
p + .text-muted {
    margin-top: 15px;
}

.small + p,
.text-muted + p {
    margin-top: 15px;
}

.small + .text-muted,
.text-muted + .small {
    margin-top: 10px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.w-100 { width: 100%; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1.5rem; }
.text-center { text-align: center; }

/* Text-Ausrichtung für Tabellenzellen (überschreibt th/td defaults) */
.table th.text-center,
.table td.text-center,
table th.text-center,
table td.text-center {
    text-align: center;
}

/* ========================================
   FORMULARE
   ======================================== */
.form-control,
.form-select {
    display: block;
    padding: 8px 12px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: #444;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: #006aac;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 106, 172, 0.2);
}

.form-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: #444;
}

/* ========================================
   TABELLEN
   ======================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.table th,
.table td {
    padding: 12px;
    vertical-align: middle;
    border: 1px solid #dee2e6;
}

.table thead th {
    background: #ffffff;
    color: #000000;
    font-weight: 700;
    text-align: left;
}

.table tbody tr {
    background-color: #ffffff;
}

.table-bordered {
    border: 1px solid #cccccc;
}

.table-hover tbody tr:hover {
    background-color: #f5f5f5;
}

.table-light {
    background-color: #f8f9fa;
}

.table-secondary {
    background-color: #e9ecef;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tabelle mit hellgrauem Header */
.table-gray-header thead th {
    background-color: #e9ecef;
    color: #000000;
    font-weight: 700;
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
    padding: 15px 20px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-info {
    background-color: #e7f3ff;
    border-color: #b6d4fe;
    color: #084298;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

.alert-secondary {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #41464b;
}

/* ========================================
   BARRIEREFREIHEIT / ACCESSIBILITY
   ======================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   GRID SYSTEM (einfach)
   ======================================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1;
    padding: 0 15px;
}

.col-6 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; }
.col-3 { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }
.col-2 { flex: 0 0 16.666%; max-width: 16.666%; padding: 0 15px; }
.col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }

/* Responsive Grid - Medium (Tablets ab 768px) */
@media (min-width: 768px) {
    .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

/* Responsive Grid - Large (Desktop ab 992px) */
@media (min-width: 992px) {
    .col-lg-2 { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
}

/* Overflow-Härtung (2026-07-19, zentral fuer alle Tools):
   Flex-Grid-Kinder haben per Default min-width:auto (Content-basierter Mindestwert)
   -> ein langes, unbrechbares Wort/Token sprengt die Spalte nach rechts aus dem
   Rahmen ("guckt rechts raus"). min-width:0 macht sie schrumpfbar (Standard-Fix,
   den auch Bootstrap-Nutzer manuell nachziehen muessen). Rein additiv.
   .img-fluid war zentral UNDEFINIERT (Bootstrap-Erbe aus Tool-functions.php, z.B.
   balkonaufbau/dachaufbau) -> Bilder mit der Klasse hatten KEINE Ueberlauf-Bremse;
   hier zentral ergaenzt. */
.col, [class^="col-"], [class*=" col-"] { min-width: 0; }
.img-fluid { max-width: 100%; height: auto; }

/* ========================================
   TABELLEN (allgemein)
   ======================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border: 1px solid #cccccc;
}

table th,
table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #cccccc;
}

table th {
    background: #ffffff;
    color: #000000;
    font-weight: 700;
}

table tbody tr {
    background: #ffffff;
}

table tbody tr:nth-child(odd),
table tbody tr:nth-child(even) {
    background: #ffffff;
}

/* ========================================
   EXPORTVERTRETUNGEN + ANFAHRT (2026-07-20)
   Karten-Layout mit Aktions-Buttons; Screenshot-Kachel der Partner-Website;
   Ortszeit via [data-loro-tz] (main.js). Flaggen lokal: fileadmin/Kontakt/export/flaggen/
   ======================================== */
.export-kopf { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.export-flagge { width:44px; height:auto; border:1px solid #DEE2E6; border-radius:3px; }
.export-flagge-klein { width:26px; height:auto; vertical-align:-4px; margin-right:6px; border:1px solid #DEE2E6; border-radius:2px; }
.export-karten { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; margin:10px 0 24px; }
.export-karte { flex:1 1 320px; max-width:560px; border:1px solid #DEE2E6; border-radius:6px; overflow:hidden; background:#fff; }
.export-karte > h2 { font-size:16px; background:#F8F9FA; border-bottom:1px solid #DEE2E6; margin:0; padding:10px 16px; color:#03518B; }
.export-karte .export-inhalt { padding:16px; }
.export-inhalt p:first-child { margin-top:0; }
.export-aktionen { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* Der RTE verpackt die Buttons haeufig zusaetzlich in ein <p>. Dann greift das gap
   der Flexbox nur auf DIESES <p> - die Buttons darin standen direkt aneinander
   ("kleben", Betreiber-Meldung 2026-07-21). Deshalb wird ein solcher Wrapper selbst
   zur Flexbox mit demselben Abstand. Gilt zentral fuer alle Export-/Kontaktkarten. */
.export-aktionen > p { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.export-aktionen a { display:inline-block; padding:8px 14px; border-radius:4px; text-decoration:none; font-size:14px; border:1px solid #006aac; line-height:1.4; }
/* Sicherheitsnetz: garantierter Mindestabstand auch dort, wo weder Flexbox noch gap
   greifen (verschachteltes Markup, alte Browser, Buttons direkt im Fliesstext). */
.export-aktionen a, a.export-btn, a.export-btn-o { margin:0 2px 2px 0; }
a.export-btn { background:#006aac; color:#fff; }
a.export-btn:hover, a.export-btn:focus { background:#03518B; color:#fff; }
a.export-btn-o { color:#006aac; background:#fff; }
a.export-btn-o:hover, a.export-btn-o:focus { background:#E8EFF9; color:#03518B; }
.export-meta { margin:14px 0 0; padding-top:10px; border-top:1px dashed #DEE2E6; font-size:14px; color:#555; }
.export-ortszeit { display:inline-block; background:#F8F9FA; border:1px solid #DEE2E6; border-radius:4px; padding:1px 8px; }
.export-web-shot { display:block; position:relative; border:1px solid #DEE2E6; border-radius:4px; overflow:hidden; }
.export-web-shot img { width:100%; display:block; margin:0; }
.export-web-shot .export-url { position:absolute; left:0; right:0; bottom:0; background:rgba(3,81,139,.92); color:#fff; padding:7px 14px; font-size:14px; }
.export-quelle { font-size:12px; color:#999; margin-top:6px; }
button.export-btn { background:#006aac; color:#fff; border:1px solid #006aac; border-radius:4px; padding:8px 14px; font-size:14px; cursor:pointer; }
button.export-btn:hover, button.export-btn:focus { background:#03518B; }
.loro-route-form input[type="text"] { width:100%; max-width:420px; padding:8px 10px; border:1px solid #DEE2E6; border-radius:4px; font-size:15px; }
.loro-route-form input[type="text"]:focus { border-color:#006aac; outline:none; }

/* ========================================
   TABELLEN TITELZEILEN (2026-07-20)
   Produkttabellen-Titel = erste Zeile mit echter colspan-Zelle (>1).
   Dezenter hellgrauer Hintergrund gibt den Legacy-Tabellen Struktur.
   colspan="1"-Zellen (z.B. Bildzellen, Einspalten-Tabellen) bleiben weiss.
   ======================================== */
.frame table tr:first-child td[colspan]:not([colspan="1"]) {
    background: #F8F9FA;
}

/* ========================================
   TABELLEN RESPONSIVE (nur Mobil, 2026-07-20)
   Legacy-HTML-CEs haben Inline-Pixelbreiten (style="width: 481px" etc.),
   die auf dem Handy den Viewport sprengen. Unter 768px werden diese
   Inline-Breiten per !important neutralisiert (einziger Weg, ~14.000 CEs
   zu ueberstimmen ohne Markup-Aenderung). Desktop bleibt unveraendert.
   Scoping auf .frame = TYPO3-Content-Container (Tool-Tabellen unberuehrt).
   ======================================== */
@media (max-width: 768px) {
    /* Feste Inline-Hoehen/-Breiten aufheben, Zellen nach Inhalt verteilen */
    .frame table { height: auto !important; }
    .frame table td[style],
    .frame table th[style] {
        width: auto !important;
        height: auto !important;
    }
    /* Kompaktere Zellen + Umbruch langer Woerter (Artikelnummern) */
    .frame table td,
    .frame table th {
        padding: 6px 8px;
        overflow-wrap: break-word;
    }
    /* Bilder behalten ihre Groesse (meist 100px Produktfoto) — die Tabelle
       darf dafuer breiter als der Viewport werden und scrollt dann im
       .table-scroll-Wrapper (Nutzer-Feedback 2026-07-20: max-width:100%
       quetschte die Fotos unkenntlich klein). Nur Riesenbilder werden auf
       60% der Viewportbreite gedeckelt. */
    .frame table img {
        max-width: 60vw;
        height: auto !important;
    }
    /* Sicherheitsnetz: bleibt eine Tabelle breiter als der Viewport,
       scrollt nur sie horizontal (Wrapper setzt main.js um alle .frame-Tabellen) */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================
   FORMULARE
   ======================================== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #006aac;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

/* ========================================
   UTILITIES
   ======================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }

.hidden { display: none !important; }
.visible { display: block !important; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 991px) {
    .header-top {
        display: none;
    }

    /* Sidebar auf Tablet/Mobile ausblenden */
    .sidebar {
        display: none;
    }

    .content-with-sidebar {
        flex-direction: column;
    }

    .mobile-toggle {
        display: flex !important;
    }

    /* Kopfzeile mobil: Logo links, Lupe und Menuetaste rechtsbuendig.
       Vorher standen alle drei linksbuendig mit 30 px Abstand aneinander -
       die Menuetaste landete dadurch mitten in der Zeile statt am Rand.
       `margin-left:auto` an der Lupe schiebt beide Schaltflaechen als Gruppe
       nach rechts; das wirkt unabhaengig davon, ob die Hauptnavigation
       dazwischen ein- oder ausgeblendet ist. */
    .header-main-inner {
        gap: 0;
    }

    .mobile-search-toggle {
        margin-left: auto;
    }

    .mobile-nav-close {
        display: none !important; /* Blauer runder X-Button ausgeblendet */
    }

    /* Vollbreites Mobilmenü: FESTE Breite 100% unabhängig vom Inhalt (kein
       width:auto, kein rechts-Anker/negativer Margin) - vorher war die Box
       mit right:-320px/width:300px rechts angedockt, dadurch blieb links ein
       Leerraum ("eingerückt") und lange Titel wurden im schmalen 300px-Kasten
       links abgeschnitten. Slide-Animation läuft jetzt per transform, die
       "left"-Eigenschaft selbst bleibt immer 0 - kein content-abhängiges Shiften. */
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Fallback für Browser ohne dvh-Unterstützung */
        height: 100dvh; /* dynamische Viewport-Hoehe: beruecksichtigt ein-/ausblendende
                            Mobile-Browser-Adressleiste, damit der unten angepinnte
                            Login-Button (siehe .mobile-nav-footer) immer im
                            SICHTBAREN Bereich bleibt statt darunter (100vh ist auf
                            vielen Handys hoeher als der tatsaechlich sichtbare Ausschnitt) */
        background: #fff;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        padding: 60px 15px 20px;
        overflow-y: auto;
        overflow-x: hidden; /* verhindert internes horizontales Scrollen/Clipping bei langen Titeln */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1001;
    }

    .main-nav.active {
        transform: translateX(0);
    }

    /* Mobile Suche im Menü */
    .mobile-search-wrapper {
        display: block;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    .mobile-search-form {
        display: flex;
        width: 100%;
    }

    .mobile-search-form input[type="search"] {
        flex: 1;
        padding: 12px 14px;
        border: 1px solid #cccccc;
        border-right: none;
        border-radius: 4px 0 0 4px;
        font-size: 1rem;
        outline: none;
        background: #ffffff;
        color: #444444;
        min-width: 0;
    }

    .mobile-search-form input[type="search"]:focus {
        border-color: #006aac;
    }

    .mobile-search-form button {
        padding: 12px 14px;
        background: #006aac;
        border: 1px solid #006aac;
        border-radius: 0 4px 4px 0;
        color: #ffffff;
        cursor: pointer;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .mobile-search-form button:hover {
        background: #005590;
        border-color: #005590;
    }

    /* Mobile Suchergebnisse */
    .mobile-search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 300px;
        overflow-y: auto;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-top: none;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        z-index: 1002;
        display: none;
    }

    .mobile-search-results.active {
        display: block;
    }

    .mobile-search-results .search-result-item {
        padding: 10px 12px;
    }

    .mobile-search-results .search-result-title {
        font-size: 0.9rem;
    }

    .mobile-search-results .search-result-desc {
        font-size: 0.8rem;
    }

    .mobile-search-results .search-result-category {
        font-size: 0.7rem;
    }

    .main-nav > ul {
        flex-direction: column;
        gap: 0;
        display: flex !important;
    }

    .main-nav > ul > li {
        border-bottom: 1px solid #eee;
        position: relative;
    }

    .main-nav > ul > li > a {
        padding: 15px;
        padding-right: 45px;
        display: block;
    }

    /* Mobile Toggle Button für Submenü */
    .mobile-toggle-btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 45px;
        height: 48px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #eee;
    }

    .mobile-toggle-btn::after {
        content: '▼';
        font-size: 0.6rem;
        color: #999;
        transition: transform 0.2s ease;
    }

    .main-nav .has-submenu.open > .mobile-toggle-btn::after {
        transform: rotate(180deg);
    }

    .main-nav .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        border-left: 3px solid #006aac;
        border-top: none;
        border-right: none;
        margin-left: 15px;
        display: none;
        min-width: auto;
        left: auto !important;
        right: auto !important;
    }

    .main-nav .sub-menu.open {
        display: block;
    }

    .main-nav .sub-menu li {
        position: relative;
    }

    .main-nav .sub-menu li a {
        padding: 10px 15px;
        padding-right: 45px;
    }

    .main-nav .sub-menu .mobile-toggle-btn {
        height: 40px;
    }

    /* 3. Menü-Ebene - zusätzliche Einrückung */
    .main-nav .sub-menu .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
        box-shadow: none;
        background: #f0f0f0;
        min-width: 100%;
        border: none;
        padding-left: 0;
    }

    .main-nav .sub-menu .sub-menu.open {
        display: block;
    }

    .main-nav .sub-menu .sub-menu li a {
        padding: 10px 15px 10px 30px; /* Mehr Einrückung für 3. Ebene */
        font-size: 0.9rem;
        border-bottom: 1px solid #ddd;
    }

    .main-nav .sub-menu .sub-menu li:last-child a {
        border-bottom: none;
    }

    .main-nav .sub-menu .sub-menu .mobile-toggle-btn {
        height: 38px;
    }

    /* 4. Ebene falls vorhanden */
    .main-nav .sub-menu .sub-menu .sub-menu li a {
        padding-left: 45px;
    }

    .mobile-nav-footer {
        display: block;
        margin-top: 30px; /* Näher am Menü, nicht ganz unten */
        padding: 20px 0;
        border-top: 1px solid #eee;
    }

    .mobile-login-link {
        display: block;
        padding: 15px;
        background: #006aac;
        color: #fff !important;
        text-align: center;
        border-radius: 4px;
        font-weight: 500;
    }

    .mobile-login-link:hover {
        background: #005590;
    }

    /* main-nav als flex-column für Login unten */
    .main-nav {
        display: flex;
        flex-direction: column;
        /* Basis-Regel (.main-nav, nicht-mobil, Zeile ~414) setzt align-items:center
           fuer die horizontale Desktop-Navigation - das wuerde hier im mobilen
           Panel dazu fuehren, dass <ul> und .mobile-nav-footer nur so breit wie
           ihr Inhalt werden und mittig statt ueber die volle Breite dargestellt
           werden. stretch erzwingt volle Breite, unabhaengig vom Seiteninhalt. */
        align-items: stretch;
    }

    .main-nav > ul {
        flex: 1;
    }

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

    .logo-text {
        font-size: 1.2rem;
    }
}

/* Mobile Suche auf Desktop verstecken */
.mobile-search-wrapper {
    display: none;
}

/* Mobile Such-Button auf Desktop verstecken */
.mobile-search-toggle {
    display: none;
}

/* Mobile Such-Overlay auf Desktop verstecken */
.mobile-search-overlay {
    display: none;
}

/* ========================================
   MOBILE SUCH-OVERLAY (nur Mobile)
   ======================================== */
@media (max-width: 991px) {
    /* Such-Button neben Hamburger-Menü */
    .mobile-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 10px;
        background: none;
        border: none;
        cursor: pointer;
        color: #006aac;
        margin-right: 5px;
    }

    .mobile-search-toggle:hover {
        color: #005590;
    }

    /* Such-Overlay: Redesign 2026-07-20 – helle Vollbild-Suchansicht statt dunklem
       Modal. Aufbau: blaues Kopfband (Formular mit Suchfeld+X) über volle Breite,
       darunter eine weiße, selbst scrollende Ergebnisfläche. Geometrie (top/left/
       width/height 100vh+100dvh-Fallback) folgt bewusst demselben Muster wie
       .main-nav weiter oben, damit sich beide Vollbild-Overlays auf Mobilgeräten
       mit ein-/ausblendender Adressleiste identisch verhalten. */
    .mobile-search-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Fallback für Browser ohne dvh-Unterstützung */
        height: 100dvh; /* dynamische Viewport-Höhe, siehe .main-nav-Kommentar oben */
        background: #fff;
        z-index: 2000;
        overflow: hidden; /* das Overlay selbst scrollt nicht - das übernimmt .mobile-search-overlay-results */
    }

    .mobile-search-overlay.active {
        display: block;
        /* Sanftes Einblenden statt hartem display:none->block-Sprung */
        animation: mobileSearchSlideDown 0.18s ease-out;
    }

    @keyframes mobileSearchSlideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mobile-search-overlay-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0; /* Voraussetzung dafür, dass die Ergebnisfläche unten per flex+overflow-y wirklich intern scrollt statt den Container zu sprengen */
    }

    /* Blaues Kopfband: Suchformular über die volle Breite (Hintergrund ersetzt das
       frühere dunkle Vollbild-Backdrop) */
    .mobile-search-overlay-form {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        margin: 0;
        /* Unten etwas weniger Innenabstand als sonst, da die Tab-Leiste
           (.mobile-search-tabs) direkt darunter im selben Blauton andockt und den
           Rest des Bandes bildet - zusammen soll es wie EIN Band wirken */
        padding: 12px 15px 8px;
        background: #006aac;
    }

    .mobile-search-overlay-form input[type="search"] {
        flex: 1;
        /* Links Platz für das Lupen-Icon (Inline-SVG als data-URI, da es unter
           templates/images/icons/ kein Lupen-Icon gibt); Farbe #888 fest verdrahtet,
           da currentColor bei per url() geladenen SVG-Hintergrundbildern nicht wirkt */
        padding: 12px 16px 12px 42px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 14px center;
        background-size: 18px 18px;
        font-size: 1.1rem; /* >=16px effektiv gegen iOS-Auto-Zoom beim Fokussieren */
        border: none;
        border-radius: 8px;
        background-color: #ffffff;
        color: #333;
        outline: none;
    }

    .mobile-search-overlay-form input[type="search"]::placeholder {
        color: #999;
    }

    /* Weißes X-Icon im Band statt weißer Kreis auf dunklem Backdrop */
    .mobile-search-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 50%;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.15s ease;
    }

    .mobile-search-close:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    /* Tab-Umschalter Artikel/Themen & Seiten (Folgeauftrag 2026-07-20): docken
       optisch direkt ans Kopfband an (gleiches Blau, kein sichtbarer Bruch zum
       Suchfeld darüber). Zwei gleich breite "Reiter" nebeneinander statt der
       bisherigen untereinander gestapelten Ergebnis-Abschnitte. */
    .mobile-search-tabs {
        display: flex;
        gap: 8px;
        background: #006aac;
        padding: 0 15px 12px;
    }

    .mobile-search-tab {
        flex: 1;
        height: 44px;
        border: none;
        border-radius: 8px; /* passend zum Suchfeld-Radius */
        background: transparent;
        color: #fff;
        font-family: inherit;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .mobile-search-tab:not(.active):hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .mobile-search-tab.active {
        background: #fff;
        color: #006aac;
    }

    /* Ergebnisfläche: weiß, volle Breite, Inhalt max-width 600px zentriert (wie
       bisher), scrollt intern über die verbleibende Höhe unter dem Kopfband */
    .mobile-search-overlay-results {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding-top: 4px;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-search-overlay-results .search-result-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid #eee;
        text-decoration: none;
    }

    .mobile-search-overlay-results .search-result-item:last-child {
        border-bottom: none;
    }

    .mobile-search-overlay-results .search-result-item:hover,
    .mobile-search-overlay-results .search-result-item:active {
        background: #f5f5f5;
    }

    .mobile-search-overlay-results .search-result-thumb {
        width: 45px;
        height: 45px;
        flex-shrink: 0;
        object-fit: contain;
        background: #f9f9f9;
        border: 1px solid #eee;
        border-radius: 4px;
    }

    .mobile-search-overlay-results .search-result-content {
        flex: 1;
        min-width: 0;
    }

    .mobile-search-overlay-results .search-result-title {
        display: block;
        font-weight: 600;
        color: #006aac;
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .mobile-search-overlay-results .search-result-desc {
        display: block;
        font-size: 0.85rem;
        color: #666;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .mobile-search-overlay-results .search-no-result {
        padding: 30px 20px;
        text-align: center;
        color: #666;
        font-size: 1rem;
    }

    .mobile-search-overlay-results .search-result-more {
        display: block;
        padding: 15px;
        text-align: center;
        background: #f5f5f5;
        color: #006aac;
        font-weight: 500;
        text-decoration: none;
        /* kein border-radius mehr: Ergebnisfläche ist seit dem Redesign kein
           freistehendes weißes Kärtchen mehr, sondern geht bündig in die weiße
           Seite über */
    }

    /* Lazy-Loading Artikel-Tab (Folgeauftrag 2026-07-20): unsichtbarer Sentinel
       fuers IntersectionObserver-Nachladen (braucht min-height, damit er ueberhaupt
       eine Layout-Box zum Beobachten hat) + dezente Status-Zeile waehrend ein Batch
       nachlaedt. Sichtbarkeit je Tab uebernehmen die data-panel-Regeln oben (beide
       tragen data-panel="articles", siehe search.js ensureLazySentinel()). */
    .mobile-search-lazy-sentinel {
        min-height: 1px;
    }

    .mobile-search-lazy-status {
        display: none; /* nur waehrend ein Batch tatsaechlich nachlaedt, siehe search.js loadMoreArticles() */
        text-align: center;
        color: #6b7280;
        font-size: 0.85rem;
        padding: 10px 0;
    }

    .mobile-search-lazy-status.loading {
        display: block;
    }

    /* Artikel/Seiten per Tab statt untereinander (Folgeauftrag 2026-07-20).
       search.js markiert jedes Ergebnis-Element (Artikel-Zeile, "Alle N
       Ergebnisse"-Link, Seiten-Zeile, Leer-Hinweis je Bereich) mit
       data-panel="articles" bzw. data-panel="pages". Grundzustand = Artikel-Tab
       aktiv -> Seiten-Panel ausblenden; die Modifier-Klasse .tab-pages auf
       .mobile-search-overlay-inner (von den Tab-Buttons in search.js gesetzt)
       dreht das um. Die alte Abschnitts-Überschrift "Themen & Seiten" ist im
       Overlay ueberfluessig (das leistet jetzt der Tab selbst) und bleibt IMMER
       ausgeblendet - im Desktop-Dropdown (kein .mobile-*-Selektor) unveraendert
       sichtbar. Der generische "Keine Ergebnisse"-Hinweis (nur wenn BEIDE
       Bereiche leer sind) traegt bewusst KEIN data-panel und bleibt in jedem Tab
       sichtbar. */
    .mobile-search-overlay-results .search-section-heading {
        display: none;
    }

    .mobile-search-overlay-results [data-panel="pages"] {
        display: none;
    }

    .mobile-search-overlay-inner.tab-pages .mobile-search-overlay-results [data-panel="articles"] {
        display: none;
    }

    .mobile-search-overlay-inner.tab-pages .mobile-search-overlay-results [data-panel="pages"] {
        /* revert statt fest verdrahtetem Wert: stellt den echten Eigen-Display-Typ
           des jeweiligen Elements wieder her (Wrapper=flex, Hinweis-Div=block) */
        display: revert;
    }
}

@media (max-width: 576px) {
    /* Footer bleibt zweispaltig (Betreiber 2026-08-01): die Eintraege sind kurz,
       einspaltig wurde die Liste am Handy unnoetig lang */
    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* col-6 bleibt bei 50% für Produkt-Grids */
    .col-4, .col-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .page-title {
        font-size: 1.2rem;
    }

    /* .lang-nav{display:none} entfernt (2026-09-25): die DE/EN-Flaggen stehen
       wie auf der Altseite auch am Handy unter dem Logo. */
}

/* ========================================
   HOMEPAGE STYLES
   ======================================== */

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #006aac 0%, #005590 100%);
    color: #ffffff;
    padding: 60px 30px;
    text-align: center;
}

.hero-content h1 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: #ffffff;
    border: none;
    padding: 0;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.95;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-buttons .btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.hero-buttons .btn-secondary:hover {
    background-color: #ffffff;
    color: #006aac;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 40px 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-box {
    background: #ffffff;
    padding: 25px;
    border: 1px solid #006aac;
    border-radius: 4px;
    text-align: center;
    transition: all 0.2s ease;
}

.feature-box:hover {
    box-shadow: 0 5px 15px rgba(42, 86, 153, 0.15);
    transform: translateY(-3px);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.feature-box h3 {
    color: #006aac;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.feature-box p {
    color: #444444;
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 0.9rem;
}

.feature-link {
    color: #006aac;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.feature-link:hover {
    color: #005590;
}

/* Product Section */
.product-section {
    padding: 40px 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-section h2 {
    text-align: center;
    color: #006aac;
    font-size: 1.5rem;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #006aac;
}

.product-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-card {
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 25px;
    transition: all 0.2s ease;
}

.category-card:hover {
    border-color: #006aac;
    box-shadow: 0 5px 15px rgba(42, 86, 153, 0.1);
}

.category-card h3 {
    color: #006aac;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.category-card p {
    color: #444444;
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 0.9rem;
}

.category-link {
    color: #006aac;
    text-decoration: none;
    font-weight: 500;
}

.category-link:hover {
    color: #005590;
}

/* Info Section */
.info-section {
    background: #eeeeee;
    padding: 40px 30px;
}

.info-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.info-text h2 {
    color: #006aac;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.info-text p {
    color: #444444;
    margin-bottom: 20px;
    line-height: 1.7;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    color: #006aac;
    margin-bottom: 8px;
    font-weight: 500;
}

.placeholder-image {
    background: #006aac;
    border-radius: 4px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: bold;
}

/* CTA Section */
.cta-section {
    background: #006aac;
    color: #ffffff;
    padding: 50px 30px;
    text-align: center;
}

.cta-section h2 {
    color: #ffffff;
    font-size: 1.5rem;
    margin-bottom: 10px;
    border: none;
}

.cta-section p {
    font-size: 1rem;
    margin-bottom: 25px;
    opacity: 0.95;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn-primary {
    background: #ffffff;
    color: #006aac;
    border-color: #ffffff;
}

.cta-buttons .btn-primary:hover {
    background: transparent;
    color: #ffffff;
}

.cta-buttons .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.cta-buttons .btn-secondary:hover {
    background: #ffffff;
    color: #006aac;
}

/* Homepage Responsive */
@media (max-width: 991px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-content {
        grid-template-columns: 1fr;
    }

    .placeholder-image {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 1.6rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        padding: 30px 15px;
    }

    .product-section {
        padding: 30px 15px;
    }

    .product-categories {
        grid-template-columns: 1fr;
    }

    .info-section {
        padding: 30px 15px;
    }

    .cta-section {
        padding: 40px 15px;
    }
}

/* ========================================
   BIM Download-Tabelle
   ======================================== */
.bim-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.bim-table td {
    text-align: center;
    vertical-align: top;
    padding: 10px 6px;
    word-break: break-all;
    font-size: 0.85rem;
    border-bottom: 1px solid #eee;
}
.bim-table img {
    max-width: 100%;
    height: auto;
    max-height: 75px;
}
.bim-table a {
    word-break: break-all;
}

/* ========================================
   FILTER CHIPS (wiederverwendbar)
   Für Schnellfinder, Filter, Tags etc.
   ======================================== */

/* Filter-Panel Container */
.sf-filter-panel {
    background: #f8f9fa;
    border: 1px solid #e0e4e8;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

/* Filter-Grid: Label links, Chips rechts */
.filter-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: baseline;
    gap: 8px 16px;
    padding: 10px 0;
    border-bottom: 1px solid #e8ecf0;
}

.filter-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-row:first-child {
    padding-top: 0;
}

/* Label links */
.filter-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
    padding-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Container für die Chips */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Overflow-Härtung (2026-07-19): .filter-row ist ein Grid (140px 1fr); die 1fr-Spalte
   hat ohne min-width:0 einen Content-basierten Mindestwert. Ein langer, uebersetzter
   Filterwert (20 Sprachen) mit .chip-label{white-space:nowrap} treibt diesen Mindestwert
   hoch und macht .filter-row breiter als den Container. min-width:0 laesst die chip-group
   schrumpfen, sodass flex-wrap wie vorgesehen greift (v.a. produktdatenbank-Schnellfinder). */
.filter-row > .chip-group { min-width: 0; }

/* Versteckter Radio/Checkbox Input */
.chip-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Chip-Label */
.chip-label {
    display: inline-block;
    padding: 5px 13px;
    font-size: 0.84rem;
    color: #3a3f44;
    background: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
    font-weight: 500;
}

.chip-label:hover {
    background: #e7f3ff;
    border-color: #006aac;
    color: #006aac;
}

/* Aktiver/Ausgewählter Chip */
.chip-input:checked + .chip-label {
    background: #006aac;
    color: #ffffff;
    border-color: #006aac;
    box-shadow: 0 1px 3px rgba(0,106,172,0.25);
}

.chip-input:checked + .chip-label:hover {
    background: #005590;
    border-color: #005590;
}

/* Focus-State für Accessibility */
.chip-input:focus + .chip-label {
    outline: 2px solid #006aac;
    outline-offset: 2px;
}

/* Kleine Chip-Variante */
.chip-label-sm {
    padding: 3px 9px;
    font-size: 0.78rem;
}

/* Sekundäre Chip-Variante (grau) */
.chip-label-secondary {
    color: #666666;
    border-color: #cccccc;
}

.chip-label-secondary:hover {
    background: #f5f5f5;
    border-color: #999999;
    color: #444444;
}

.chip-input:checked + .chip-label-secondary {
    background: #666666;
    color: #ffffff;
    border-color: #666666;
}

/* Responsive Filter */
@media (max-width: 768px) {
    .sf-filter-panel {
        padding: 14px 16px;
    }

    .filter-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 8px 0;
    }

    .filter-label {
        padding-top: 0;
        font-size: 0.8rem;
    }

    .chip-group {
        width: 100%;
    }

    .chip-label {
        padding: 6px 11px;
        font-size: 0.8rem;
    }
}

/* ========================================
   SCHNELLFINDER AJAX
   Loading states and transitions
   ======================================== */

.sf-results-loading {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sf-result-count {
    font-size: 0.88rem;
    color: #777;
    margin: 16px 0 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sf-loading-spinner {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.sf-spinner-ring {
    width: 36px;
    height: 36px;
    border: 3px solid #e0e0e0;
    border-top-color: #006aac;
    border-radius: 50%;
    animation: sf-spin 0.7s linear infinite;
}

@keyframes sf-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   TOAST NOTIFICATIONS
   Für Bestätigungsmeldungen
   ======================================== */

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 8px;
    background: #333333;
    color: #ffffff;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 350px;
}

.toast-show {
    transform: translateX(0);
}

.toast-success {
    background: #28a745;
}

.toast-error {
    background: #dc3545;
}

.toast-icon {
    font-size: 1.2rem;
    font-weight: bold;
}

.toast-message {
    flex: 1;
}

@media (max-width: 480px) {
    #toast-container {
        left: 10px;
        right: 10px;
        top: 10px;
    }

    .toast {
        max-width: none;
    }
}

/* ========================================
   SEARCH RESULT ADD BUTTON
   "+" Button in Suchergebnissen
   ======================================== */

.search-result-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #eeeeee;
}

.search-result-wrapper:last-of-type {
    border-bottom: none;
}

.search-result-wrapper:hover {
    background: #f5f9ff;
}

.search-result-wrapper.active {
    background: #e7f3ff;
}

.search-result-wrapper .search-result-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 0;
    border-bottom: none;
}

.search-result-wrapper .search-result-item:hover {
    background: transparent;
}

.search-result-add {
    width: 32px;
    height: 32px;
    border: 1px solid #006aac;
    background: #ffffff;
    color: #006aac;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.search-result-add:hover {
    background: #006aac;
    color: #ffffff;
}

.search-result-add:active {
    transform: scale(0.95);
}

/* Mobile Anpassungen für Search Results */
@media (max-width: 768px) {
    .search-result-wrapper {
        padding: 10px;
    }

    .search-result-add {
        width: 36px;
        height: 36px;
        font-size: 1.4rem;
    }
}

/* =========================================================================
   ARTIKEL "+" BUTTONS IN TABELLEN
   Automatisch eingefügt neben Artikellinks in Produkttabellen
   Hinzugefügt: 2025-01-08
   ========================================================================= */

.table-article-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid #006aac;
    background: #ffffff;
    color: #006aac;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    vertical-align: middle;
}

.table-article-add:hover {
    background: #006aac;
    color: #ffffff;
    transform: scale(1.1);
}

.table-article-add:active {
    transform: scale(0.95);
}

/* Kleinere Buttons in kompakten Tabellen */
.table-sm .table-article-add {
    width: 18px;
    height: 18px;
    font-size: 12px;
    margin-left: 3px;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .table-article-add {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
}

/* ==========================================================================
   LORO — geteilte Button-Optik (.oa-btn) für ALLE Tools (Berechnung,
   Konfigurator, Ausschreibung, Produktdatenbank). Zentral hier, weil style.css
   site-weit auf jeder Seite geladen wird — kein zusätzliches Stylesheet nötig.
   Basis = das .oa-btn-Design der Online-Ausschreibung (Markenblau #006aac).
   Das bestehende Bootstrap-.btn bleibt unberührt; .oa-btn ist ein eigener Name.
   (Ersetzt die frühere Einzeldatei loro-buttons.css.)
   ========================================================================== */
.oa-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;max-width:100%;padding:4px 18px;font-size:0.92rem;font-weight:600;line-height:1.2;text-align:center;border-radius:6px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:normal;box-shadow:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;font-family:inherit;background:#fff}
.oa-btn svg{flex-shrink:0}
.oa-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,106,172,0.35)}
.oa-btn-primary{background:#006aac;border-color:#006aac;color:#fff}
.oa-btn-primary:hover{background:#00568a;border-color:#00568a}
.oa-btn-secondary{background:#fff;border-color:#006aac;color:#006aac}
.oa-btn-secondary:hover{background:#e8f2f9}
.oa-btn-ghost{background:#fff;border-color:#ced4da;color:#495057}
.oa-btn-ghost:hover{background:#f1f3f5;border-color:#adb5bd}
.oa-btn-danger{background:#fff;border-color:#dc3545;color:#dc3545}
.oa-btn-danger:hover{background:#fbe9eb;border-color:#c82333}
.oa-btn-sm{min-height:36px;padding:3px 12px;font-size:0.82rem;gap:5px}
.oa-btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Interaktiver, blau hinterlegter "hinzufügen"-Link in den Ausschreibungs-
   Hinweisboxen (automatisch generierter Zubehör-Vorschlag: Dichtelement/
   Gleitmittel). Kein Button, sondern ein deutlich klickbarer blauer Chip. */
.oa-add-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:6px;background:#e8f2f9;border:1px solid #006aac;color:#006aac;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.oa-add-chip:hover{background:#006aac;color:#fff}
.oa-add-chip .oa-add-plus{font-weight:800;line-height:1}

/* ==========================================================================
   LORO-KOMPONENTEN (Ergänzung 2026-07-19) — geteilte Bausteine für die Tool-
   Vereinheitlichung. PREFIXED (.oa-*, opt-in) wie .oa-btn/.oa-add-chip, damit
   bestehende .card/.badge-Nutzungen anderer Seiten unberührt bleiben.
   Ergänzt die schon zentral vorhandenen .form-control/.alert/.table/Grid/Typo.
   Markenblau #006aac, konsistent zu den vorhandenen Komponenten.
   ========================================================================== */

/* --- Karte / Panel (deckt Auswahl-Kacheln, Ergebnis-/Info-Boxen ab) --- */
.oa-card{background:#fff;border:1px solid #dee2e6;border-radius:6px;margin-bottom:1rem;overflow:hidden}
.oa-card-header{padding:11px 16px;background:#f8f9fa;border-bottom:1px solid #dee2e6;font-weight:600;color:#212529}
.oa-card-header-primary{background:#006aac;border-bottom-color:#006aac;color:#fff}
.oa-card-body{padding:16px}
.oa-card-footer{padding:11px 16px;background:#f8f9fa;border-top:1px solid #dee2e6}
.oa-card-selectable{cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease}
.oa-card-selectable:hover{border-color:#006aac;box-shadow:0 2px 10px rgba(0,106,172,.12)}
.oa-card.is-selected,.oa-card-selectable.is-selected{border-color:#006aac;box-shadow:0 0 0 2px rgba(0,106,172,.30)}

/* --- Badge / Status-Pille --- */
.oa-badge{display:inline-flex;align-items:center;gap:4px;margin:0 3px 3px 0;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.5;white-space:nowrap;background:#e8f2f9;color:#006aac;border:1px solid #bcdcec}
.oa-badge-primary{background:#006aac;color:#fff;border-color:#006aac}
.oa-badge-success{background:#e6f4ea;color:#1a6b39;border-color:#b7e0c4}
.oa-badge-warning{background:#fff3cd;color:#664d03;border-color:#ffecb5}
.oa-badge-danger{background:#f8d7da;color:#842029;border-color:#f5c2c7}
.oa-badge-neutral{background:#eef1f4;color:#495057;border-color:#dee2e6}

/* --- grüner Aktions-Button (Ergänzung zu .oa-btn; z.B. "In Ausschreibung") --- */
.oa-btn-success{background:#1a7f43;border-color:#1a7f43;color:#fff}
.oa-btn-success:hover{background:#156836;border-color:#156836}

/* --- Ergebnis-Highlight (großer hervorgehobener Berechnungswert) --- */
.oa-result{background:#e8f2f9;border:1px solid #bcdcec;border-radius:6px;padding:14px 18px;text-align:center;margin:12px 0}
.oa-result-value{font-size:1.8rem;font-weight:700;color:#006aac;line-height:1.1}
.oa-result-label{font-size:.85rem;color:#495057;margin-top:2px}

/* Rand-Utilities (Bootstrap-kompatibel) — me-/ms-/mt-3/mb-0 fehlten zentral, dadurch
   klebten Buttons/Chips in Tools, die diese Klassen im Markup nutzen (z.B. me-1 mb-1). */
.me-1{margin-right:.25rem}
.me-2{margin-right:.5rem}
.me-3{margin-right:1rem}
.ms-1{margin-left:.25rem}
.ms-2{margin-left:.5rem}
.mt-1{margin-top:.25rem}
.mt-3{margin-top:1rem}
.mb-0{margin-bottom:0}

/* --- Tabs / Umschalter-Leiste (formundleistung, dachaufbau, tags) --- */
.oa-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:2px solid #dee2e6;margin-bottom:1rem}
.oa-tab{padding:8px 16px;border:none;background:none;font:inherit;font-weight:600;color:#495057;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;text-decoration:none}
.oa-tab:hover{color:#006aac}
.oa-tab.is-active,.oa-tab.active{color:#006aac;border-bottom-color:#006aac}

/* --- Formularzeile (Label + Feld nebeneinander; rohrlaengen, stroemungsgeschwindigkeit) --- */
.oa-form-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.oa-form-row > label,.oa-form-row .oa-form-label{min-width:180px;font-weight:500;color:#444}

/* --- Ergänzende Alert-/Tabellen-Varianten (von Tools genutzt, fehlten zentral) 2026-07-19 --- */
.alert-success{background:#e6f4ea;border-color:#b7e0c4;color:#1a6b39}
.table-striped tbody tr:nth-child(odd){background:#f8f9fa}
.table-sm th,.table-sm td{padding:6px 8px}
.table-danger{background:#f8d7da}
/* .table-dark bewusst NICHT zentral: die Tools (berechnungen/wurfweite) nutzen den
   Namen für einen MARKENBLAUEN Tabellenkopf, nicht für Bootstrap-Dunkelgrau -> bleibt
   tool-lokal, sonst semantische Kollision. */

/* ==========================================================================
   MENGEN-STEPPER (.oa-qty) — zentral, 2026-07-19
   Kompaktes Zahlenfeld mit EIGENEN kleinen Hoch/Runter-Pfeilen (die nativen Spinner
   erscheinen auf Mobilgeräten nicht) + gehört mit dem Aktions-Button in EINE Zeile
   (.oa-qty-row). Von jedem Tool nutzbar; ersetzt verstreute Inline-Mengenfelder.
   Bedienung: Pfeile = ±1 (via input.stepUp()/stepDown(), respektiert min/max) ODER
   direkt eintippen (echtes <input type=number>).
   ========================================================================== */
.oa-qty-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.oa-qty {
    display: inline-flex; align-items: stretch; height: 44px; box-sizing: border-box;
    border: 1px solid #ccc; border-radius: 6px; background: #fff; overflow: hidden;
}
.oa-qty:focus-within { border-color: #006aac; box-shadow: 0 0 0 2px rgba(0,106,172,.2); }
/* Zahlenfeld: kompakt, native Spinner AUS (wir liefern eigene Pfeile). Höhere Spezifität
   als die globale input[type=number]{width:100%}-Regel -> schlägt sie sicher. */
.oa-qty input[type="number"] {
    width: 54px; min-width: 0; height: auto; margin: 0; padding: 6px 4px 6px 10px;
    box-sizing: border-box; border: 0; outline: 0; border-radius: 0; box-shadow: none;
    font-size: 1rem; text-align: center; color: #333; background: transparent;
    /* Nativen Spinner ausblenden: Firefox reagiert NUR auf den Wert "textfield" —
       "appearance:none" laesst den Spinner dort stehen und man saehe zwei Pfeilpaare
       nebeneinander (Betreiber-Meldung 2026-07-22). Reihenfolge beachten: die
       Standard-Eigenschaft steht zuletzt und muss deshalb ebenfalls "textfield" sein. */
    -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;
}
.oa-qty input[type="number"]::-webkit-outer-spin-button,
.oa-qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Pfeil-Spalte: zwei kleine Chevron-Buttons übereinander (wie ein nativer Spinner) */
.oa-qty-btns { display: flex; flex-direction: column; width: 26px; flex-shrink: 0; border-left: 1px solid #e0e0e0; }
.oa-qty-btns button {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; background: #f2f5f8; color: #006aac; cursor: pointer;
    font-size: 9px; line-height: 1; transition: background .12s ease;
}
.oa-qty-btns button:hover { background: #e0ebf5; }
.oa-qty-btns button:active { background: #cfe0f0; }
.oa-qty-btns button + button { border-top: 1px solid #e0e0e0; }

/* Ausschreibungs-Zaehler im grauen Kopfbalken (2026-07-21, main.js haengt das
   span an den 4. Quick-Link an - "Warenkorb"-Signal, Anzahl Artikel-Positionen).
   Rot + fester Abstand per margin (Betreiber-Wunsch; Leerzeichen im Textknoten
   waere layoutabhaengig kollabierbar). */
.header-top-links a .header-lv-count { color: #DC3545; font-weight: 600; margin-left: .35em; }

/* ==========================================================================
   DROPZONE (.dropzone) — zentral, 2026-07-22
   Pflicht-Optik fuer JEDEN Datei-Upload (CI-Vorgabe): sichtbare Flaeche mit
   gestricheltem Markenrahmen, Klick als Rueckfallweg. Fehlte bisher komplett,
   dadurch waren Upload-Bereiche praktisch unsichtbar (Betreiber-Meldung).
   ========================================================================== */
.dropzone{border:2px dashed #006aac;background:#f8f9fa;border-radius:4px;
    padding:1.5rem;text-align:center;cursor:pointer;color:#495057;font-size:.9rem;
    transition:background .12s ease,border-color .12s ease}
.dropzone:hover,.dropzone:focus{background:#e8f2f9;outline:none}
.dropzone.dragover{background:#e8f2f9;border-color:#00518a}
.dropzone strong{color:#006aac}

/* ========================================
   Werkzeug-Schnellzugriff im mobilen Menü (2026-07-24)
   Die vier Kopfbalken-Links (Berechnung/Konfigurator/Produktdatenbank/
   Ausschreibung) als grauer 2x2-Streifen oben im aufgeklappten Menü.
   Gleiche Icon-Masken-Technik wie .header-top-links (Reihenfolge-basiert -
   bei Umsortierung der Quick-Links die nth-of-type-Nummern mitziehen).
   ======================================== */
.mobile-quicklinks { display: none; }
@media (max-width: 991px) {
    .main-nav .mobile-quicklinks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #f5f6f7;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        margin: 6px 0 4px;
    }
    .main-nav .mobile-quicklinks a {
        display: inline-flex;
        align-items: center;
        padding: 9px 14px;
        font-size: 14px;
        font-weight: 600;
        color: #444444;
        text-decoration: none;
        line-height: 1.2;
    }
    .main-nav .mobile-quicklinks a:hover { color: #006aac; }
    .main-nav .mobile-quicklinks a::before {
        content: "";
        flex: none;
        width: 16px;
        height: 16px;
        margin-right: 7px;
        background-color: currentColor;
        -webkit-mask: var(--hi) center / contain no-repeat;
        mask: var(--hi) center / contain no-repeat;
    }
    .main-nav .mobile-quicklinks a:nth-of-type(1) { --hi: url(/fileadmin/templates/images/icons/calculator.svg); }
    .main-nav .mobile-quicklinks a:nth-of-type(2) { --hi: url(/fileadmin/templates/images/icons/wrench.svg); }
    .main-nav .mobile-quicklinks a:nth-of-type(3) { --hi: url(/fileadmin/templates/images/icons/barcode.svg); }
    .main-nav .mobile-quicklinks a:nth-of-type(4) { --hi: url(/fileadmin/templates/images/icons/check.svg); }
    /* Badge "(n)" am Ausschreibungs-Link ggf. dezent */
    .main-nav .mobile-quicklinks .header-lv-count { margin-left: 4px; color: #006aac; }
}

/* ========================================
   "Inspirationen zur Suche" im mobilen Such-Overlay (2026-07-24)
   6 zuletzt gesuchte echte Artikel als reine Foto-Kacheln, 2 Spalten x 3
   Zeilen, in der vorher weissen Flaeche unter den Tabs. Befuellung: search.js.
   ======================================== */
.mobile-search-inspiration {
    padding: 14px 16px 10px;
}
.mobile-search-inspiration-titel {
    font-size: 13px;
    color: #777777;
    margin-bottom: 10px;
}
.mobile-search-inspiration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 420px;
}
.mobile-search-inspiration-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px;
}
.mobile-search-inspiration-grid img {
    display: block;
    width: 100%;
    height: 84px;
    object-fit: contain;
}

/* ============================================================
   Video-Einbettungen responsiv (2026-07-29)
   183 Alt-CEs tragen feste width/height (640x360, 560x315) - auf dem Handy
   ragte der Player ueber den Rand. Diese Regel deckelt die Breite und haelt
   das 16:9-Verhaeltnis; die Attribute in den CEs bleiben unangetastet.
   Das Galerie-Modal (.vg-modal-video iframe) ueberschreibt spaeter im
   Kaskadenlauf mit position:absolute - gewollt, dort gilt der Ratio-Rahmen.
   ============================================================ */
iframe[src*="youtube.com/embed"],
iframe[src*="youtube-nocookie.com/embed"] {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Startseite-Produktfinder (CE 11431, 5 Spalten x 2 Reihen, 2026-09-25):
   Mobil (<=768px) laufen beide FSC-Reihen als EIN 2er-Raster durch
   (2-2-2-2-2). Ohne diese Regel bricht jede 5er-Reihe einzeln 2-2-1 um
   -> je Reihe eine Einzelkachel. Bewusst nur dieses CE (#c11431, gleiche id
   in allen Sprachen), andere 5-Spalten-Galerien bleiben unveraendert. */
@media (max-width: 768px) {
    #c11431 .ce-gallery .ce-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin-bottom: 15px;
    }
    #c11431 .ce-gallery .ce-row {
        display: contents;
    }
}

/* =====================================================================
   PDF-Vorschau-Kacheln (2026-09-26, README 7z16)
   Nur Inhaltselemente mit tt_content.layout = 110 („PDF-Vorschau:
   Kachelraster“; Verlegeanleitungen, Zulassungen). Die Galerie wird ein
   gleichmäßiges Raster (Desktop 4, Tablet 3, Handy 2 Kacheln), das Bild
   füllt die Kachel (max. 300 px, srcset 2x/3x aus dem 900-px-Original,
   siehe Partials/Media/Rendering/Image.html), die Bildunterschrift steht
   in Kachelbreite. ce-outer/ce-inner/ce-row (FSC-Zentrier-Floats) werden
   per display:contents aufgelöst, damit alle Kacheln gleich breit sind –
   auch in unvollständigen Reihen. Layout 111 („hochauflösend“) ändert
   nur die Bildquelle, nicht die Darstellung. Andere Seiten unberührt.
   ===================================================================== */
.frame-layout-110 .ce-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 20px;
    align-items: start;
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: visible; /* FSC setzt overflow:hidden (Float-Clearfix) – würde den Kachelschatten abschneiden */
}
.frame-layout-110 .ce-gallery .ce-outer,
.frame-layout-110 .ce-gallery .ce-inner,
.frame-layout-110 .ce-gallery .ce-row {
    display: contents;
}
.frame-layout-110 .ce-gallery[data-ce-columns] .ce-column {
    flex: none;
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}
.frame-layout-110 .ce-gallery .ce-column figure {
    display: block;
    width: 100%;
    margin: 0;
}
.frame-layout-110 .ce-gallery .ce-column img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.15s ease-in-out;
}
.frame-layout-110 .ce-gallery .ce-column a:hover img,
.frame-layout-110 .ce-gallery .ce-column a:focus img {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}
.frame-layout-110 .ce-gallery figcaption {
    display: block;
    min-height: 0;
    margin-top: 10px;
    line-height: 1.35;
}
@media (max-width: 991px) {
    .frame-layout-110 .ce-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .frame-layout-110 .ce-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
    }
}