.BEH_modakt 	/*   für Modul Hintergrundfarbe */ 
{
	background-color: #f8f8f8;	/* #faA30a = orange */
}

.BEH_farb_box	/* für Infobox auf Startseite oben rechts */
{
	background-color: #009a9b;	
	border-radius: 20px 0px 20px 20px;
	margin: -10px;	
	padding: 10px;            
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
	height: 108%; width: 107%;
/*	text-align: center;   */
	display: block;
	justify-content: center; 
	align-items: center; 
	color: white;
}

/*------ Link-Definitionen ---------*/

a {
    padding: 0px 0px; 
    color: #faa30a; /* =orange */
    text-decoration: none; 
}


/*
a:link {
    color: #faa30a; 
}
*/
/*
a:visited {
    color: #855205; 
}
*/

a:hover {
    color: #c88208; 
/*   text-decoration: underline; */
/*    font-size: 1.03em; */
/*    font-style: italic;*/
}

a:active {
    color: #c88208;  
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

a:focus {
/*    outline: 2px dashed orange; /* Fokusrahmen für Tastaturbenutzer */
}

/* ------- alternative schwarze oder weiße Links innerhalb der class="BEH_black_a" oder "BEH_white_a"*/

.BEH_black_a a 		
{
    color: #111111; 
}

.BEH_black_a a:hover {
    color: orange; 
}

.BEH_white_a a 		
{
    color: #fefefe; 
}

.BEH_white_a a:hover {
    color: orange; 
}

/*------- Artikeltext auf linke Seite 1em Platz frei halten  ------------*/
.article-details {
padding-left: 1em;
}

/*-------Mehrspaltige Texte mit Umbruch im Smartphone ----------------------*/
.BEH_flex-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  gap: 10px;
  padding: 0px 5px 5px 5px; /* oben rechts unten links */
}

.BEH_2_Spalten, .BEH_3_Spalten {
  flex: 1;
  min-width: 300px;
  background-color: #fff;
  padding: 5px; /* oben rechts unten links */
  border: 0px solid #F9a909;
  border-radius: 8px;
  display: flex;
  flex-direction: column; /* Inhalt vertikal anordnen */
/*  align-items: left; /* Zentriert Inhalt horizontal */
  justify-content: flex-start; /* Inhalt oben ausrichten */
}

.BEH_3_Spalten {
	 min-width: 200px;
}

.BEH_2_Spalten img, .BEH_3_Spalten img {
  max-width: 100%; /* Verhindert horizontales Überschreiten des Containers */
  height: auto; /* Beibehaltung der Proportionen */
  align-items: center; /* Zentriert Inhalt horizontal */
  border-radius: 8px;
  margin-bottom: 10px; /* Optionaler Abstand unter dem Bild */
}

@media (min-width: 768px) {
  .BEH_2_Spalten {
    flex: 1 1 45%; /* Jede Spalte nimmt etwa 45% der Breite ein */
  }
@media (min-width: 768px) {
  .BEH_3_Spalten {
    flex: 1 1 calc(33.33% - 10px); /* Jedes Item nimmt 33.33% der Breite ein minus den Abstand von 10px */
  }
}

/*   --------------  */
@font-face {
    font-family: 'Lilita One';
    src: url('../../fonts/LilitaOnes/LilitaOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../../fonts/Lato/lato-regular/lato-regular-webfont.woff2') format('woff2'),
         url('../../fonts/Lato/lato-regular/lato-regular-webfont.woff') format('woff'),
         url('../../fonts/Lato/lato-regular/lato-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}  
  
 @font-face {
    font-family: 'LatoBoldItalic';
    src: url('../../fonts/Lato/lato-bolditalic/lato-bolditalic-webfont.woff2') format('woff2'),
         url('../../fonts/Lato/lato-bolditalic/lato-bolditalic-webfont.woff') format('woff'),
         url('../../fonts/Lato/lato-bolditalic/lato-bolditalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 

h1, h2, h3, h4 {
    font-family: 'Lilita One', sans-serif;
}

body {
    font-family: 'Lato', sans-serif;
}

h3, h4 {margin-bottom: 0.5rem;}
ul {margin-top: 0.5rem;}