/*Hell-/Dunkel-Modus*/
@media (prefers-color-scheme: light) { 
:root { color-scheme: light; }
}

@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
	
body {  background-color: white; 
 	color: black !important; }	
	
.card { background-color: white;
	border: inherit; }
	
.field { background-color: inherit; }
	
.field.has-addons .control:not(:last-child) {
  	margin-inline-end: unset; }

.input, field has-addons, .select select, .button.is-rounded { 
	background-color: white; 
	color: hsl(0, 0%, 21%); 		/*dklgrau;*/ 
	border: thin solid hsl(0, 0%, 71%); } 	/*hellgrau*/

.card-footer-item:not(:last-child) { 
	border: none; }
	
.article, .title, .title.is-2, .title.is-3  { color: black; } /*20250702: title ergänzt*/
	
.dropdown {
	--bulma-dropdown-content-background-color: white !important;
	--bulma-dropdown-item-background-color: white !important;
	--bulma-dropdown-item-background-l: white !important; } 

.report-explanation {color: hsl(0, 0%, 21%); } /*dklgrau;*/ 

a.navbar-item { background-color: unset !important; }

/*a, .themenbaumLinkName, .labelSichtorComboButton { 
    	text-decoration: none; 
	color: blue !important; }*/
	
/*img { filter:brightness(.8) contrast(1.2); }*/ /*20250702: auskommentiert wg. MT-J/HP-Logodarstellung*/

.navbar-link, .navbar-item {background-color: inherit; color: hsl(0, 0%, 21%); } /*dklgrau;*/ 
}

/*Weitere allgemeine Basics*/
a.fokus:link { color:"#0000A0"; font-style: bold; }
a.fokus:visited { color:"#0000A0";  }
a.fokus:active { color:red; text-decoration:underline; }
a:link { color:black; text-decoration:underline; }
a:visited { color:black; text-decoration:underline; }
a:active { color:red; text-decoration:underline; }
a.linie:link { color:blue; text-decoration:none; }
a.linie:visited { color:blue; text-decoration:none; }
a.linie:active { color:red; text-decoration:none; }
a { text-decoration: none !important; font-size: 0.9rem !important;}

p.fuss { text-align:right; font-size:10pt; }
p.title { text-align:center; font-size:x-large; }
p.Kurstitel { font-weight:bold; }
p.Stichwort { font-size:smaller;}
p.pageTitle {font-size:16pt; font-weight:bold; text-align:left;color: black; }
p.Kursrubrik {
	border:medium solid gray;
	text-align:center;
	font-weight:bold; }

li {font-size:10pt;}

TABLE {margin-left: 1em; margin-right: 1em;}

H1 {font-size:16pt; font-weight:bold; text-align:center;color: black}
H2 {font-size:15pt; font-weight:bold; text-align:center}
H3 {font-size:14pt; font-weight:bold;text-align:center}
H4 {font-size:13pt; font-weight:bold;text-align:center}
h6 {font-weight: bold !important; 
	color: grey !important; 
	margin: 2rem 0rem 1rem 0rem; 
	font-style: oblique !important; /*kursiv*/}
	
.Topics { 
	font-size: 12px;
	font-family: sans-serif;
	color: blue; background-color : white;
	text-align:right;
	margin-right: 0px; }
	
.note { font-size: small; }

td.navi { 
	border-top:thin solid gray; 
	border-bottom:thick solid black;}

div.thumbRight {
	float:right;
	border:thin solid gray;
	background-color:#cce0e0; }

div.thumbImg {
	padding:0.2em;
	background-color:none; }
	
div.thumbText { text-align:center; }

/* Box-Sizing auf Border-Box setzen */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**Weitere allgemeine Basics**/
html, body {
    font-family: sans-serif;
    font-weight: normal; 
    font-size: 1em; }
	
.hero { 
    margin: 2em;
    padding-bottom: 3em;
    box-shadow: 0.5em whitesmoke; }
	
.hero-body { 			
    margin-left: 1.5em;		
    margin-right: 1.5em; }
    
.footer {background-color: white;}
    
hr { background: grey; }

/***Top-, Bottom-Navi, Burger-Menü***/
.navbar, .hero-foot { 
   background: #ECF0F3; }  /*Memtext-Blaugrau*/

.navbar-burger {
  pointer-events: auto; /* Stellt sicher, dass Klicks verarbeitet werden */
}

.fixed-right-buttons {
  position: fixed;
  right: 0.7%; 			/* Abstand vom rechten Bildschirmrand; 20250602 angepasst v ursprgl 0.1% */
  top: 20%; 			/* Vertikalposition des Buttonblocks; 20250602 angepasst v ursprgl 50%*/
  /*transform: translateY(-20%);/* Vertikalposition anpassen; 20250602 deaktivert; */
  display: flex;
  flex-direction: column; 	/* Buttons vertikal anordnen */
  gap: 10px; 			/* Abstand zwischen den Buttons */
  z-index: 1000; 		/* Sicherstellen, d. Buttonblock immer sichtbar ist */
}

/** Top-Navi**/
/* Standard: Desktop-Version */
.navbar-menu {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    z-index: 500;
   }

/* Standardmäßig versteckt */
.navbar-dropdown {
    display: none;
   }

/* Geöffnetes Dropdown */
.navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block;
    background: #ECF0F3; /*Memtext-Blaugrau*/
  }
  
.navbar-dropdown .menu-item {
  padding: 10px; 	/*Freiraum um Menü-Elemente*/
}

.navbar-link { 
   font-size: 0.9rem !important; }
   
.navbar-item { color: black !important; }
   
/* Optionale Animation */
.navbar-dropdown {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.3s ease-in-out;
   }

.navbar-item.has-dropdown.is-active .navbar-dropdown {
    opacity: 1;
    transform: scaleY(1);
  }	
  
.menu-list a {
  font-family: sans-serif;
  font-weight: normal; 
  font-size: 0.9rem;
  text-decoration: none;
  margin-left: 15px;
}

/* Grundlegendes Styling für Submenus */
.navbar-dropdown .submenu {
  display: none; 	/* Submenüs standardmäßig ausblenden */
  margin-left: 15px; 	/* Einrückung für Submenüs */
}

.navbar-dropdown .menu-item:hover > .submenu {
  display: block; /* Submenü anzeigen, wenn der übergeordnete Menüpunkt gehovt wird */
}

/* Optional: Stil für Submenu-Links */
.navbar-dropdown .submenu .menu-item a {
  font-size: 0.9rem; 		/* Kleinere Schrift für Submenü */
  color: #4a4a4a; 		/* Optional: Textfarbe */
}

.navbar-dropdown .submenu .menu-item a:hover {
  color: #3273dc; 		/* Optional: Hover-Farbe für Submenü-Links */
}

.navbar-dropdown .menu-list .menu-item a:hover {
  color: #3273dc; 		/* Optional: Hover-Farbe für Submenü-Links */
}
/* Zusätzliche Einrückung für tiefere Ebenen */
.navbar-dropdown .submenu .submenu {
  margin-left: 15px; 		/* Weitere Einrückung für tiefer verschachtelte Submenüs */
}

/**Bottom-Navi**/
.navbar.is-fixed-bottom {
   position: sticky;
   bottom: 0; 
   z-index: 10; }

/**Titel, Untertitel, Grafik**/   
.title, .subtitle {
   font-weight: normal;  	/* für Seitentitel*/
   margin-top: 0.4em;
   padding-bottom: 0.1em;  	
   }
   
.media-title {
    color: #3333ccff; 
    font-size: 1.5em;
    margin-bottom: 2em;
    }

.title, .subtitle, .media-title { 
   white-space: normal;         /* für Zeilenumbrüche nach Standard-Regeln*/
   overflow-wrap: break-word;   /* aktuell: für Umbrüche nach Standard-Regeln*/ 
   hyphens: auto; 
   }	

.title.is-2 { font-size: 2rem !important; }

div.ImagePara {
  display: flex;
  justify-content: center;
  /*column-gap: 0.5rem;*/  	/*20250703 deaktiviert*/
  background: white;
  /*border: white;*/		/*20250703 deaktiviert*/
}

/**Buttons und Icons: 20250703 eingefügt**/
.button.is-rounded {  
  background-color: #3232cd0a; 	/*ganz hell; #3232cd32=hellblau, #3232cdff=dklblau*/ 
  border-color: transparent;
}

.button.is-rounded:hover,
.button.is-rounded:focus {
  border-color: blue; 
  box-shadow: none;
  background-color: whitesmoke;
  color: blue; 
  transition: 1500ms; 		/*weicher Übergang*/
}

.button.is-rounded::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.2);
  filter: blur(4px);
  z-index: -1;
}

.icon_more_strong { /*dunkelblaues Pfeil-Icon mit spitzer Pfeilspitze*/ 
    content: url(pfeilspitz_blue_dark.svg);
    width: 1.5em; 
    height: 1.5em; 
    margin-right: 0.5em;
}

.icon_more_light { /*hellblaues Pfeil-Icon mit spitzer Pfeilspitze*/ 
    content: url(pfeilspitz_blue_light.svg);
    width: 1.5em; 
    height: 1.5em; 
    margin-right: 0.5em;
}

/**Container, Grid, Cell**/  
.container {
    display: flex; 		
    flex-direction: column; 
    flex-wrap: wrap; 			/*für Umruch bei Platzmangel*/
    justify-content: flex-start; 	/* Inhalte links */
    align-items: flex-start; 		/* Inhalte vertikal ausrichten */
    max-width: 100%;
    margin-left: 1em;
    overflow: auto;    
    }

.cell {				
    flex: 1 1 auto; 		/*!!! flex-grow, flex-shrink, flex-basis = ; /*für flexibles Verhalten der Zeile*/
    display: inline-flex; 	/*flexibles Wachstum ohne feste Breite */
    padding: 0rem 0.25rem; 	/*padding oben+unten, rechts+links*/
    justify-content: center;
    border: thin solid white;
    border-radius: 0.3em; 
    box-shadow: rgb(0 0 0 /0.1) 0.1em 1.1px; }

/*Vertikales Burger-Menü u.a. spezifische Anpassungen für kleinere Viewports*/
/*entspricht Bulma-Breakpoint: 1023px*/
@media screen and (max-width: 1023px)  { 
    .navbar-menu {
        position: absolute;
        top: 100%; /* Direkt unter der Navbar */
        left: 1%;
        width: 50%;
        display: none; /* Standardmäßig ausgeblendet */
	background-color: white;
        padding: 1rem;
    }
   
   .navbar-burger {
       display: block !important; 	/* Erzwingt die Anzeige des Burger-Menüs */
       position: absolute;
       right: 1rem; 			/* Setzt ihn an den rechten Rand */
       top: 50%;
       transform: translateY(-50%); 	/* Vertikale Zentrierung */
     }
     
    .navbar-burger.is-active + .navbar-menu {
    	display: block !important; }	/* Zeigt das Menü an */
    
    .menu-list .menu-item > .navbar-link {
    	margin-left: 15px; }	/* Spezifische Einrückung für Untermenü-Elemente */
}

@media screen and (max-width: 768px) {
    .content { padding: 0.5em; }	/* Weniger Platz auf kleinen Geräten */
    
    .buttons {
        flex-direction: column; 	/* Buttons untereinander anordnen */
        gap: 0.5em;
    }
}

/**Breakpoints zur Info:**/ 
/*Viewports bis 768px=tablet-Hochformat */
/*@media screen and (min-width: 585px) and (max-width: 768px) { */	
/*Kleine Viewports */
/*@media screen and (max-width: 584px){*/