/** Eigene css-Klassen **/
body {
		min-height: 100vh;
		font-family: Helvetica,Arial,sans-serif;
		font-size: 1.1rem;
}

img.mondphase-aktuell {
	max-width: 600px;
	height: auto;
}

img.kommende-mondphase {
max-width: 800px; 
width: 100%;
}

.facebook-mond-bg {
  background: #1877f2;
  padding: 5px 3px 6px 3px;
  border-radius: 5px;
  color: #ffffff;
}

.facebook-mond-bg svg
	{
  height: 24px;
  }
  
/** Sozialmedia Sharebutton **/

  
  .sozialmedia
  {
	font-size: 1.1rem;
    padding-bottom: 0px;
    margin-bottom: 0px;

  }
  .sozial-ul
  {
	  padding: 0px;
	}
	
	.sozial-li 
	{
		padding: 3px 5px 3px 3px;
		margin-right: 20px;
		margin-bottom: 10px;
		max-width: 160px;
		width: 100%;
		border-radius: 5px;
		color: white;
		display:inline-block;
	}



.sozialmedia a, .sozialmedia a:visited, .sozialmedia a:active
{
	color: white;
	text-decoration: none;
}

.sozialmedia svg
	{
  height: 24px;
  }

  .sozialmedia .text
		{
			padding-left: 10px;
		}

  span.twitter
  	{
		background: #55acee;
	}

span.twitter:hover { 
			background-color: #32bbf5; }

	

	span.whatsapp
  	{
		background:   #5cbe4a;
	}

	span.whatsapp:hover { 
		background-color: #34af23; }

	span.telegramm
  	{
		background:   #08c;
	}

	span.telegramm:hover { 
		background-color: #007dbb; }

	span.standard
  	{
		background:   #999;
	}

	span.standard:hover { 
		background-color: rgb(182, 182, 182); }


	span.facebook
		{
			background: #3b5998;
		}
		  
		span.facebook:hover { 
			background-color: #4273c8; }

@media (max-width: 768px) 
	{
	.sozial-li
		{
		max-width: 80px;
		width: 100%;
		height: 40px;
		}
	.sozialmedia .text
		{
			display: none;
		}

		.sozialmedia svg
	{
  height: 33px;
  }
	}

	
	@media (max-width: 400px) 
	{
	.sozial-li
		{
		width: 40px;
		height: 40px;
		}
	
	}

/***********************************************************************/
/********************** PWA-Refesh-Icon   ******************************/
/***********************************************************************/

#refresh-container {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* Standardmäßig ausblenden */
    z-index: 1000;
}

#refresh-icon {
    width: 50px;
    height: 50px;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/*************************************************************************/
/********************* Designanpassung Bootstrap Package *****************/
/*************************************************************************/

/**************************************************/
/* Anpassung von Bildern (generell)               */
/**************************************************/

/* Bilder mit einem Radius an den Ecken versehen */
img:not(div.card-img-top picture img){
	border-radius: 10px;
  }

/* Bilder bei Anordnung mit Textelement bereits ab bestimmter Breite Oberhalb des Textes anzeigen */

@media (max-width: 991px) {
    .textmedia-right .textmedia-item, .textmedia-right .textpic-item, .textmedia-left .textmedia-item, .textmedia-left .textpic-item, .textpic-right .textmedia-item, .textpic-right .textpic-item, .textpic-left .textmedia-item, .textpic-left .textpic-item {
        width: 100%;
    }
}


/* Spalten auf volle Breite umschalten */
@media (max-width: 1199px) {
.section-column {
    width: 100%;
}
}

/*************************************************/
/* Allgemeine Anpassung von Verlinkungen 		 */
/*************************************************/


/* Anpassung von Linktexten */
a {

    text-underline-offset: 2px; /* Initialer Abstand der Linie vom Text */
    transition: color 0.3s ease, text-underline-offset 0.3s ease; /* Sanfte Übergänge */
}


/* Überfahren von Verlinkungen */
a:hover {
    /*color: #0056B3; /* Farbe beim Hover */
    text-underline-offset: 4px; /* Unterstreichung wandert etwas nach unten */
}


/*************************************************/
/* Anpassung der TOP-Navigation			 		 */
/*************************************************/

/* Mobil und Desktop Second-Level-Menü Hover-Effekt grau einfärben */
a.nav-link-dropdown:hover {
	background-color: #dbdbdb;	
  }

/* Anpassung Header Hintergrundfarbe */

.carousel-item-layout-primary {
	--carousel-item-background: #0288d1;
    
}

/* Gesetzer Breakpoint für Desktop */

@media (min-width: 1400px) {

	/* Feste Höhe für Headermenü */
	.navbar-mainnavigation.navbar-fixed-top {
		height: 80px;
	  }

	/* Dynamische Anpassung des Second-Level-Menü auf die Breite der Texte */
	.navbar-mainnavigation .nav-style-simple .dropdown-menu {
	  width: max-content;
	}

	.nav-link.nav-link-main {
		text-decoration: none; /* Keine Unterstreichung im Ruhezustand */
		transition: color 0.3s ease, text-decoration 0.3s ease; /* Sanfter Übergang */
	}
	

	/* Main-Menü beim Überfahren unterstreichen und Farbe setzen bei Hintergrundbild */
	.navbar-default-transition:not(.navbar-transition) .nav-link.nav-link-main:hover {
		color: #FFD700; /* Goldgelbe Farbe beim Hover */
		text-decoration: underline; /* Unterstreichung wird beim Hover sichtbar */
		text-decoration-thickness: 2px; /* Dicke der Unterstreichung */
	} 
	
	/* Teiltransparenten Hintergrund einblenden, wenn Header-Bild verwendet wird */
	.navbar-default-transition:not(.navbar-transition) ul.navbar-nav {
		background-color: rgba(0, 0, 0, 0.3); /* Dunkel mit 50% Transparenz */
		border-radius: 5px; /* Abrundung der Ecken der Links */
		padding: 1px 1px; /* Etwas Abstand rund um die Links */
	}
	
	
	/* Hintergrundfarbe für Menüeinträge entfernen, wenn kein Bild im Top vorhanden ist */
	.navbar-default-transition:not(.navbar-transition) .nav-link.nav-link-main::before {
		background: none;
	 }
  }

 
  /* Mobile Version Markierungspfeil anpassen und vergrößern */
  


/* Gesetzer Breakpoint für Mobil */
@media (max-width: 1400px) {

	/* Mobil Main-Level-Menü Hover-Effekt grau einfärben */
		a.nav-link-main:hover {
	background-color: #e9e9e9;	
  }

  .navbar-mainnavigation .nav-link {
	gap: 0.75em;
  }

  .navbar-mainnavigation .nav-link:not(.nav-link-toggle)::before {
	left: -10px;
	border: 10px solid transparent;
	 border-left-width: 10px;
	border-left: 10px solid var(--mainnavigation-hightlight);
  }

  .navbar-mainnavigation .nav-link-indicator::before {
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	padding-top: 0.5em;
	padding-left: 0.5em;
	
  }

}


/**************************************
/* Audio
/**************************************/

audio {
	max-width: 550px;
}



/**************************************
/* Footer
/**************************************/

footer a:hover {
  text-decoration: underline; /* Optional: Unterstreichung beim Hover */
}

div.frame-space-after-small
	{	
		padding-top: 30px;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}

/***************************************/
/* Anpassung der Font-Farbe für Button */
/***************************************/

input.btn-primary ,input.btn-success, a.btn-success, input.btn-primary:hover, a.btn-success:hover, a.btn-outline-primary:hover
	{
		color: #ffffff;
	}

	/*.btn-primary, .frame-type-felogin_login input[type="submit"] {*/
	.btn-primary, .btn:hover  {
		--bs-btn-color: #ffffff;
		--bs-btn-disabled-color: #ffffff;
	  }

	/*.btn-primary, .frame-type-felogin_login input[type="submit"] {*/
	.btn:hover  {
		color: #ffffff;
		background-color: #34af23;
		border-color: #34af23;
	  }

/***************************************/
/* Anpassung der Frame-Abstände 		*/
/***************************************/

	  .frame-space-after-extra-small {
		margin-bottom: 0px;
		padding-bottom: 0px;
	}


/*************************************************************************/
/************************* Heise Shariff anpassen ************************/
/************************************************************************/

.shariff li .share_count, .shariff li .share_text {
	color: white;
	font-size: 1.1rem;
  }

  .shariff .fab,.shariff .fas {
	color: white;
  }

  .shariff .fa-info {
	color: black;
  }

  .shariff .shariff-button {
	max-width: 70px;
	border-radius: 5px;
  }




/***********************************************************************/
/********************** PWA-Online-Status ******************************/
/***********************************************************************/

.offline figure.image,
.offline figure.video,
.offline .pwa-none,
.offline div.ContentStartseite,
.offline div.card-img-top {
  display: none;
}

.offline .textmedia-right .textmedia-item,
.offline .textmedia-right .textpic-item, 
.offline .textmedia-left .textmedia-item, 
.offline .textmedia-left .textpic-item, 
.offline .textpic-right .textmedia-item, 
.offline .textpic-right .textpic-item, 
.offline .textpic-left .textmedia-item, 
.offline .textpic-left .textpic-item {
	width: 100%;
}


/*************************************************************************/
/************************* Druckversion anpassen ************************/
/************************************************************************/

	/** Druckkopf **/

	div.druckkopf {
		display: none;
		margin-bottom: 60px;
	}