/* Schriftart von Google laden */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Raleway", sans-serif;
    --color_w4p_blue: #009fe3;
    --color_w4p_green: #87c070;
    --color_w4p_darkgreen: #508034;
    --color_w4p_darkblue: #006795;
    --color_w4p_lightblue: #b7d3e3;
    --color_w4p_grey: #c5c8c4;
}

.w4p_image-logo {
  max-height: 100%;
  max-width: 200px;
  padding: 10px;
  align-items: center; 
}

/*Standard für Videos festlegen*/
.w4p_video {
  autoplay="autoplay"; 
  loop="loop"; 
  muted="muted";
  playsinline="playsinline";
  width=100%;
  height=100%;
}
/*Schriftart festlegen*/
body {
    font-family: var(--cassiopeia-font-family-body);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cassiopeia-font-family-headings);
}
/*Fusszeile Einstellungen*/
.w4p_footer {
  margin: 20px 20px 20px 20px !important;
}

/* Summary / Detail Bereiche (Ausklappbare Bereiche im HTML) */
details {
  padding: 10px; 
  border: 1px solid #eee; 
  margin-top: 5px;
}
details summary {
    list-style: none; /* Entfernt das Standard-Dreieck in Chrome/Safari */
}
details summary::-webkit-details-marker {
    display: none; /* Entfernt das Dreieck in älteren Browsern */
}

/*Intro Formatieren ohne Rahmen*/
.w4p_intro {
   border: none;
}
/*Bild für Bericht formatieren ohne Rahmen*/
.w4p_image_left {
  float: left;
  max-width: 480px; /* Breite reduzieren */
  margin-right: 20px;
  margin-bottom: 10px;
}

/*Wrapper für FLuggebiete anpassen, damit Balken oben nicht sichtbar*/
.w4p_fluggebiete {
    overflow: hidden;
    height: 600px; /* Höhe anpassen */
    position: relative;
}
#blockrandom-118 {
    position: absolute;
    top: -60px; /* Wert anpassen, bis der Balken weg ist */
    width: 100%;
    height: calc(100% + 60px);
}

/* Kontaktliste */ 
/* Begrenzung der Bildgrösse in der Kontaktliste */
img.contact-thumbnail.img-thumbnail {
    max-width: 200px !important;
    height: auto; 
    margin-right: 10px !important;
}
/* 1. Hintergrundfarbe Tabelle Kontaktliste */
#contactList {
  background-color: transparent !important;
  border-color: var(--color_w4p_green); 
  box-shadow: 0 0 2px var(--color_w4p_lightblue), 0 2px 5px var(--color_w4p_lightblue), 0 5px 15px var(--color_w4p_lightblue) 
}
/* Zellenhintergründe transparent machen */
#contactList th, #contactList td {
  background-color: transparent !important;
}
/*Link in Kontaktliste umformatieren*/
#contactList .list-title a {
    text-decoration: none;
    font-weight: bold;
}
/*Anzeige der Kontaktfelder*/

.w4p_Feldanzeige_ausgabe{
  margin-top: 10px;
  display: block;
}

.w4p_Feldanzeige{

}
.w4p_Feldbeschriftung{
  font-weight: bold;
}

.w4p_vorstandbild {
  width: 100%;
}

/* Zentriert das Formular, wenn es als Menüpunkt (Komponente) geladen wird */
.convertforms {
    margin: 0px auto !important;
}

/* Entfernt den Rahmen beim Klicken/Fokussieren der Menülinks */
.metismenu.mod-menu a:focus,
.metismenu.mod-menu a:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Falls das Modul selbst einen Rahmen bekommt */
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Hover-Zustand: Textfarbe ändert sich */
.metismenu.mod-menu a:hover {
    color: var(--color_w4p_green) !important; /* Das Blau aus deinem Logo */
    text-decoration: none; /* Verhindert das Unterstreichen beim Hover */
}

/* Optional: Aktiver Menüpunkt (wo man sich gerade befindet) */
.metismenu.mod-menu li.active > a,
.metismenu.mod-menu li.current > a {
    color: var(--color_w4p_blue) !important; /* Das Grün aus deinem Logo für den aktiven Link */
    font-weight: bold;
}

/* Farbe des Burger-Icon anpassen */
.navbar-toggler {
    color: var(--color_w4p_grey) !important; /* Change color here */
}

/*Schatten der Beiträge anpassen auf Farbe von W4P*/
.boxed .blog-item {
  box-shadow: 0 0 2px var(--color_w4p_lightblue), 0 2px 5px var(--color_w4p_lightblue), 0 5px 15px var(--color_w4p_lightblue) !important;
}