a[href^="http://"], 
a[href^="https://"] {
	padding-right: 20px;
	background: url('images/extlink2.png') right no-repeat;
}

@font-face {
  font-family: 'NewsGoth';
  src: url('/fonts/NewsGothicStd.woff') format('woff'),
       url('/fonts/NewsGothicStd.woff2') format('woff2'),
	   url('/fonts/NewsGothicStd-Bold.woff') format('woff'),
       url('/fonts/NewsGothicStd-Bold.woff2') format('woff2'),
	   url('/fonts/NewsGothicStd-BoldOblique.woff') format('woff'),
       url('/fonts/NewsGothicStd-BoldOblique.woff2') format('woff2'),
	   url('/fonts/NewsGothicStd-Oblique.woff') format('woff'),
       url('/fonts/NewsGothicStd-Oblique.woff2') format('woff2');
  /* Weitere Formatierungen oder Pfade für verschiedene Browser */
}

/* Flexbox für das 2-spaltige Layout auf größeren Bildschirmen */
.flex-container {
    display: flex;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
    justify-content: space-between;
	gap: 20px; /* Abstand zwischen den Spalten */
}
	.flex-item-50{
    	width: 50%;
	    box-sizing: border-box;
	}
	.flex-item-text {
	    flex: 1 1 auto; /* Textspalte nimmt den restlichen verfügbaren Platz ein */
	    padding-right: 20px; /* Optionaler Abstand rechts */
	}
	.flex-item-image {
	    flex: 0 0 310px; /* Bildspalte hat eine feste Breite */
	}
/* Medienabfrage für kleinere Bildschirme (z.B. Smartphones) */
@media screen and (max-width: 1000px) {
    .flex-container {
        flex-direction: column; /* Wechsel von Reihen- zu Spaltenlayout */
    }
    .flex-item-50 {
        width: 100%; /* Spalten nehmen die volle Breite ein */
        margin-bottom: 20px; /* Abstand zwischen den Elementen */
    }
	.flex-item-text, .flex-item-image {
        width: 100%; /* Beide Spalten nehmen die volle Breite ein */
        padding-right: 0; /* Abstand entfernen, um Platz zu sparen */
    }
    .flex-item-image {
        margin-bottom: 20px; /* Abstand unter dem Bild */
    }
}

.bkgStd {
	align: center;
	background-color: #FFFFFF;
	padding: 20px; /* Füge einen internen Abstand hinzu, falls benötigt */
}	
.bkgAltern {
	algn: center;
	background-color: #ECECEC;
	padding: 20px; /* Füge einen internen Abstand hinzu, falls benötigt */
}
.bkgAbwechselnd:nth-child(odd) {
	align: center;
	background-color: #FFFFFF;
	padding: 20px;
}
.bkgAbwechselnd:nth-child(even) {
	align:center;
	background-color: #ECECEC;
	padding: 20px;
}
.bkgHeaderFooter {
	background-color: #2AD4FF;
	padding: 20px; /* Füge einen internen Abstand hinzu, falls benötigt */
}
.fakelink {
	color: #0000FF;
	text-decoration: underline;
	cursor: pointer;
}
.hidden {
    display:none;
}
.header {
      background-color: #2AD4FF;
      position: sticky;
      top: 0;
      z-index: 1000;	
}
.Text {
	font-family: "NewsGoth", sans-serif;
	font-size: medium;
	color: #000000;
	text-transform: none;
}
.TextHell {
	font-family: "NewsGoth", sans-serif;
	font-size: medium;
	color: #FFFFFF;
	text-transform: none;
}
.TextohneLinkformatierung {
	font-family: "NewsGoth", sans-serif;
	font-size: medium;
	color: #000000;
	text-transform: none;
	text-decoration: none;
}.Navigation {
	font-family: "NewsGoth", sans-serif;
	font-size: x-large;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
}
.h1 {
	font-family: "NewsGoth", sans-serif;
	font-weight: bold;
	font-size: xx-large;
	font-variant: small-caps;
}
.Überschrift1 {
	font-family: "NewsGoth", sans-serif;
	font-weight: bold;
	font-size: xx-large;
	font-variant: small-caps;
}
.h2 {
	font-family: "NewsGoth", sans-serif;
	font-weight: bold;
	font-size: x-large;
	color: #AAD400;
}
.Überschrift2 {
	font-family: "NewsGoth", sans-serif;
	font-weight: bold;
	font-size: x-large;
	color: #AAD400;
}
.h3 {
	font-family: "NewsGoth", sans-serif;
	font-weight: bold;
	font-size: large;
}
.Überschrift3 {
	font-family: "NewsGoth", sans-serif;
	font-weight: bold;
	font-size: large;
}
.Fussnote {
	font-family: "NewsGoth", sans-serif;
	font-size: small;
	color: #000000;
	text-transform: none;
}

/* Laufschrift */
.marquee-container {
    width: 100%; /* Nimmt die volle Breite der Spalte ein */
    overflow: hidden; /* Schneidet den überflüssigen Inhalt ab */
  }
.marquee {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-family: "Times New Roman", serif;
	font-weight: normal;
	font-size: large;
	color: #FF6699;
	/* hier evtl. noch font-size, color usw. */
}
	.marquee span {
		display: inline-block;
		padding-left: 100%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
		animation: marquee 10s linear infinite;
	}
	/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
	.marquee span:hover {
		animation-play-state: paused 
	}
	/* Make it move */
	@keyframes marquee {
	    0%   {transform: translate3d(0,0,0);}
	    100% {transform: translate3d(-100%,0,0);}
	}

/* Slider-styles */
.slider {
    width: 100%;
    max-width: 361px; 
    position: relative;
    height: 226px; /* Höhe der Bilder */
}
	.slides {
    	position: relative;
	    width: 100%;
    	height: 100%;
	}
	.slide {
    	position: absolute;
	    top: 0;
    	left: 0;
	    width: 100%;
    	height: 100%;
	    opacity: 0;
	    transition: opacity 0.6s ease; /* Übergangseffekt */
	}
	input[type="radio"] {
    	display: none; /* Radio buttons ausblenden */
	}
	/* Sichtbarkeit der Bilder steuern */
	/* 1- Slider-Satz */
	#slide1-1:checked ~ .slides .s1 {
    	opacity: 1;
	}
	#slide1-2:checked ~ .slides .s2 {
		opacity: 1;
	}
	#slide1-3:checked ~ .slides .s3 {
    	opacity: 1;
	}
	/* 2. Slider-Satz */
	#slide2-1:checked ~ .slides .s1 {
	    opacity: 1;
	}
	#slide2-2:checked ~ .slides .s2 {
	    opacity: 1;
	}
	#slide2-3:checked ~ .slides .s3 {
	    opacity: 1;
	}
	
	/* Navigation */
	.slider_navigation {
	    position: absolute;
	    bottom: 10px;
	    display: flex;
	    justify-content: center;
	    width: 100%;
	}
	.slider_navigation label {
    	cursor: pointer;
	    width: 15px;
    	height: 15px;
	    margin: 0 5px;
    	border-radius: 50%;
	    background: #fff;
    	display: inline-block;
	}
	input[type="radio"]:checked + label {
    background: #333;
	}