@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/roboto-condensed-v31-latin-200.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/roboto-condensed-v31-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/roboto-condensed-v31-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/roboto-condensed-v31-latin-700.woff2') format('woff2');
}
/* Ändert die Hintergrundfarbe und die Textfarbe für den Block 316 */
.ccm-custom-style-container.ccm-custom-style-main-316 {
    background-color: #e2e7ec !important; /* Ihre Wunsch-Hintergrundfarbe (z.B. Dunkelblau) */
    color: #ffffff !important;             /* Textfarbe innerhalb des Blocks (z.B. Weiß) */
    padding: 20px !important;              /* Optional: Ein schöner Innenabstand, damit der Text nicht am Rand klebt */
    border-radius: 4px !important;         /* Optional: Leicht abgerundete Ecken */
}

/* Falls sich Links (A-Tags) in diesem Block befinden, diese ebenfalls einfärben */
.ccm-custom-style-container.ccm-custom-style-main-316 a {
    color: #0ff111 !important;             /* Linkfarbe (z.B. Goldgelb) */
}

/* Falls sich Überschriften (H1, H2, H3) in diesem Block befinden */
.ccm-custom-style-container.ccm-custom-style-main-316 h1,
.ccm-custom-style-container.ccm-custom-style-main-316 h2,
.ccm-custom-style-container.ccm-custom-style-main-316 h3 {
    color: #ffffff !important;             /* Überschriften ebenfalls Weiß färben */
}

/* 1. Hauptmenü-Punkte (Links) anpassen */
header.navbar .nav-link {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 16px !important;       /* Ändert die Textgröße (z. B. von 20px auf 16px) */
    font-weight: 400 !important;      /* Macht die Schrift dünner (400 = Regular, 200 = Extra Light) */
    text-transform: uppercase;        /* Optional: Macht alle Menüpunkte zu GROSSBUCHSTABEN */
    letter-spacing: 0.5px;            /* Optional: Leicht erhöhter Zeichenabstand für moderne Optik */
}

/* 2. Die Sprachauswahl (Rechte Box) an das neue Design anpassen */
.header-language-right a {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 15px !important;       /* Sprachauswahl minimal kleiner als das Hauptmenü */
    font-weight: 400 !important;      /* Gleiches schlankes Schriftgewicht */
    text-transform: uppercase;
}

/* 3. Dropdown-Menüs anpassen (Falls Sie Untermenüs nutzen) */
header.navbar .dropdown-menu .dropdown-item {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   HEADER-LAYOUT: DREITEILUNG & RECHTSAUSRICHTUNG
   ========================================================================== */

/* Zwingt das dreiteilige Raster der header.php in eine unbrechbare Reihe */
header.navbar .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
}

/* Schiebt die Menü-Links innerhalb der mittleren Spalte nach ganz rechts */
header.navbar .navbar-nav {
    margin-left: auto !important; 
    display: flex !important;
    flex-direction: row !important;
}

/* ==========================================================================
   SPRACHAUSWAHL (BLOCK 316): TEXT OBEN, FLAGGEN UNTEREINANDER
   ========================================================================== */

/* Richtet den gesamten Container der rechten Spalte strikt nach rechts aus */
.header-language-right,
.ccm-custom-style-main-316,
.ccm-block-multilingual-language-navigation {
    display: block !important;       
    text-align: right !important;     /* Richtet alles bündig nach rechts aus */
    padding-left: 20px !important;    /* Sicherheitsabstand zum Menüpunkt "Kontakt" */
}

/* Erzwingt, dass das HTML-Element des Blocks (z.B. eine Tabelle oder Liste) flexibel wird */
.ccm-custom-style-main-316 table,
.ccm-custom-style-main-316 ul,
.ccm-custom-style-main-316 div.ccm-multilingual-switcher {
    display: flex !important;
    flex-direction: column !important; /* Zwingt die Elemente in eine vertikale Spalte (untereinander) */
    align-items: flex-end !important;  /* Hält alles rechtsbündig */
    border: none !important;
    background: transparent !important;
}

/* ==========================================================================
   SWITCH-LANGUAGE-FLAGS untereinander
   ========================================================================== */

/* 1. Zwingt den Hauptbehälter in den Flex-Modus mit Erlaubnis zum Zeilenumbruch */
.header-language-container div.col-auto,
.header-language-container,
.ccm-block-switch-language-flags {
    display: flex !important;
    flex-wrap: wrap !important;        /* Erlaubt Elementen, in die nächste Zeile zu springen */
    justify-content: flex-end !important; /* Hält alles rechtsbündig */
    text-align: right !important;
    width: auto !important;
}

/* 2. OBERE ZEILE: Das Text-Label bekommt 100% Breite und erzwingt den Umbruch danach */
.header-language-container .ccm-block-switch-language-flags-label {
    display: block !important;
    width: 100% !important;            /* Nimmt die volle Breite ein -> bricht die Zeile danach um */
    text-align: right !important;
    margin: 0 0 6px 0 !important;      /* 6 Pixel Abstand nach unten zu den Flaggen */
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #333333 !important;
}

/* 3. UNTERE ZEILE: Die einzelnen Flaggen-Links nebeneinander formatieren */
.header-language-container a.ccm-block-switch-language-active-flag,
.header-language-container a {
    display: inline-block !important;  /* Hält die Flaggen-Symbole nebeneinander */
    margin-left: 10px !important;      /* Abstand zwischen den Flaggen */
    margin-right: 0 !important;
    margin-top: 2px !important;
    vertical-align: middle !important;
}

/* Sichert die Flaggen-Bilder ab */
.header-language-container img {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ==========================================================================
 Formatierung Text und Flaggen
 ========================================================================== */

.header-language-container {
     text-align: right !important;
 }
 .header-language-container .lang-text {
     font-size: 12px !important;
     font-weight: 400 !important;
     color: #666666 !important;
 }
 .header-language-container .lang-flags a img {
     transition: transform 0.2s;
 }
 .header-language-container .lang-flags a img:hover {
     transform: scale(1.1); /* Kleiner, eleganter Vergrößerungseffekt beim Drüberfahren */
 }