/* wwwroot/css/fo.css */

/* Roboto Variable (Normal) */
@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* Optional: Roboto Variable (Italic) */
@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto/Roboto-Italic-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}

:root {
    
    --fo-font: "Roboto", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html, body {
    font-family: var(--fo-font);
    font-weight: 200; /* dein ExtraLight-Standard */
}



/* Zusätzliche Stile für die von Ihnen gewünschten Höhen */
.header-main {
    height: 100px;
}

.megamenu-container {
    height: 100px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.top-bar-text {
    background-color: #f8f9fa; /* Helles Grau als Hintergrund */
    padding: 0.25rem 0;
    font-size: 0.8rem; /* Kleinere Schrift */
    text-align: center;
}


/* Zusätzliche Stile für die von Ihnen gewünschten Höhen */
.header-main {
    height: 100px;
}

.megamenu-container {
    height: 100px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.top-bar-text {
    background-color: #f8f9fa; /* Helles Grau als Hintergrund */
    padding: 0.25rem 0;
    font-size: 0.8rem; /* Kleinere Schrift */
    text-align: center;
}
/* Stile für das Burger-Menü */
.navbar-toggler {
    position: absolute;
    top: 10px;
    right: 10px;
}

.navbar-toggler-icon {
    /*  // background-color: #000;  Farbe des Burger-Icons */
}
/* Stile für die Suchleiste */
.search-input {
    width: 100%;
    /* max-width: 400px;Größere Suchleiste in der großen Ansicht */
}

.search-form {
    display: flex;
    align-items: center;
}
/* Stile für die Menüpunkte */
.navbar-nav {
    margin-left: auto; /* Menüpunkte weiter rechts platzieren */
}

/* Header Layout */
header .container {
  display: flex;
  align-items: center;
  gap: 24px;
}
.mega-menu-brand a {
  font-weight: 600;
  font-size: 1.25rem;
  color: inherit;
  text-decoration: none;
}

/* Mega-Panel Grundlayout */
.mega-panel {
  padding: 16px 24px;
  min-width: 720px; /* Breite des Mega-Panels */
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 24px;
}
.mega-col h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
}
.mega-col ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.mega-col li {
  margin: 6px 0;
}
.mega-col a {
  color: inherit;
  text-decoration: none;
}
.mega-col a:hover {
  text-decoration: underline;
}

/* Submenu auf Mega-Breite ziehen */
.e-menu-wrapper .e-ul.mega-open {
  width: auto; /* nicht auf Itembreite einschränken */
}
.e-menu-wrapper .e-ul.mega-open .e-menu-item {
  /* Itemrahmen im Mega-Panel neutralisieren */
  padding: 0;
}
.e-menu-wrapper .e-ul.mega-open .e-menu-template {
  /* Template soll den vollen Panel-Inhalt anzeigen */
  display: block;
}
/* Mega-Dropdowns über volle Breite ausrichten */
.dropdown-mega {
    position: static;
}
    /* wichtig: verhindert links/rechts Clipping */
    .dropdown-mega .dropdown-menu {
        width: 100%;
        left: 0;
        right: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Inhalt optisch • fein */
    .dropdown-mega h6 {
        font-size: .9rem;
        letter-spacing: .04em;
    }

    .dropdown-mega .dropdown-item {
        white-space: normal; /* Zeilenumbruch erlauben */
        padding-left: 0; /* ruhigeres Layout im Mega-Panel */
    }

/* Mobile: Spalten stapeln (Bootstrap macht vieles automatisch) */
@media (max-width: 991.98px) {
    .dropdown-mega .dropdown-menu {
        position: static; /* sauber in der Collapse sichtbar */
        box-shadow: none;
    }
}