/* VS Atzenbrugg */



:root {
	/* Deine definierten Farben */
	--brand-orange: rgb(233, 78, 27);
	--brand-blue: rgb(77, 100, 122);
	--orange-hover: rgb(250, 185, 140);
	--bg-greige: rgb(242, 240, 235);
	--text-slate: rgb(45, 52, 54);
	--slate-light: rgb(119, 136, 153);
	--white: #ffffff;
}




body { background-color: var(--bg-greige) }

body, input {
	font-family: "Istok Web", Arial, Sans-Serif;
	color: #444444;
	font-size: 110%;
}


h1 {
	font-family: "Istok Web", Arial, Sans-Serif;
	font-weight: normal;
	font-size: 180%;
	text-transform: none;
	color: #000000;
	padding-left: 0px;
	margin-top: 40px;
	padding-bottom: 10px
}

h2 {
	font-family: "Istok Web", Arial, Sans-Serif;
	font-weight: normal;
	font-size: 170%;
	line-height: 115%;
	color: var(--brand-orange);
	margin-bottom: 12px;
	padding-top: 0px;
}

h3 {
	font-family: Barlow-500, Arial, Sans-Serif;
	font-weight: normal;
	font-size: 120%;
	color: #555555;
	margin-top: 0px;
	margin-bottom: 0px;
}




a            { text-decoration: none } 
a:link		 { color: var(--brand-orange) }
a:visited	 { color: var(--brand-orange) }
a:active	 { color: var(--brand-orange) }
a:hover		 { color: #444444; text-decoration: none }
a:focus		 { outline: none }
a:focus-visible { outline: 3px solid #000; outline-offset: 3px }



.nowrap { white-space: nowrap }

.news_text  img { max-width:100%; height:auto; image-orientation:none }

.reiter  { width:90px; text-align:center; font-family: "Istok Web", sans-serif; font-size: 15px; letter-spacing:0px; background-color:#F4F4F4;border-left:0px solid #888888;border-bottom:2px solid #023770; margin-right:1px; margin-bottom:5px; float:left; display:inline; padding:5px; padding-left:3px; padding-right:3px; }
.reiter a { text-decoration: none }
.reiter a:link     { color: #023770 }
.reiter a:visited	 { color: #023770 }
.reiter a:active	 { color: #023770 }
.reiter a:hover	 { color: #000000; background-color: #CCCCCC }

.reiter_akt  { width:90px; text-align:center; font-family: "Istok Web", sans-serif; font-size: 15px; letter-spacing:0px; background-color:#023770; border-left:0px solid #888888;border-bottom:2px solid #023770; margin-right:1px; margin-bottom:5px; float:left; display:inline; padding:5px; padding-left:3px; padding-right:3px; }
.reiter_akt a  { text-decoration:none }
.reiter_akt a:link { color: #FFFFFF }
.reiter_akt a:active { color: #FFFFFF }
.reiter_akt a:visited { color: #FFFFFF }


/* Zebra Tabelle mit Hover, Rauch */

/* orange 53%: F6BE99  20%: FCE7D8 */
/* türkis 53%: B0D8DE  20%: E1F0F2 */

.tabelle { width: 100%; border-collapse:collapse; }
.tabelle td, .tabelle th { padding: 5px 12px; border-bottom: 3px solid #FFFFFF; text-align:left; vertical-align: text-top }
/*.tabelle td a { display:block } */
.tabelle th { background-color: #A7CB19; color: #FFFFFF; font-weight:bold }
.tabelle tr:nth-child(1n+1) { background-color: #B0D8DE; color: #000000 }
.tabelle tr:nth-child(2n+2) { background-color: #E1F0F2; color: #000000 }
.tabelle tr:hover { background-color: #CCCCCC; color: #000000 }



/* Standard-Styling entfernen */
.news_text ul {
	list-style: none;
	padding-left: 0; /* Keine Einrückung der gesamten Liste */
	margin: 20px 0;
}

	.news_text ul li {
		position: relative;
		padding-left: 25px;
		margin-bottom: 12px;
		line-height: 1.5;
	}

	
		.news_text ul li::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0.4em;
			width: 14px;
			height: 14px;
			background-color: var(--brand-orange);
			border-radius: 50%;
			display: inline-block;
		}













.footer { color: #FFFFFF; background-color: rgb(45, 52, 54); font-size: 100%; padding-top: 20px }



/* FUNKTIONALE LINKS, NICHT UMBRECHEN */

.weblink:before { font-family: 'Font Awesome 5 Free'; content: "\f105";	display: inline-block; padding-right: 5px; margin-top: -5px; vertical-align: middle; font-weight: 900 }

.maillink:before { font-family: "Font Awesome 5 Free"; content: "\f0e0"; display: inline-block;	padding-right: 3px;	vertical-align: middle;	font-weight: 900 }

.pdf:before { font-family: 'Font Awesome 5 Free'; content: "\f1c1"; display: inline-block; padding-right: 7px; margin-top: -5px; vertical-align: middle; font-weight: 900; font-size:130% }
.xls:before, .xlsx:before { font-family: 'Font Awesome 5 Free'; content: "\f1c3"; display: inline-block; padding-right: 7px; margin-top: -5px; vertical-align: middle; font-weight: 900; font-size: 130% }
.doc:before { font-family: 'Font Awesome 5 Free'; content: "\f1c2"; display: inline-block; padding-right: 7px; margin-top: -5px; vertical-align: middle; font-weight: 900; font-size: 130% }

.weblink, .maillink, .pdf, .xls, .xlsx, .doc, .docx { white-space: nowrap }



/* BUTTONS / EIGENE */

.btn { background-color: var(--brand-orange); color:#FFFFFF; font-size:120%; font-family: "Istok Web"; text-transform: none;  border-radius:8px; transition: background-color 0.3s, transform 0.2s; }
.btn:hover { color: #CCCCCC; background-color: var(--orange-hover); transform: translateY(-2px); }
a.btn:link, a.btn:visited { color: #FFFFFF }
a.btn:hover { color: #CCCCCC }


.weiter { color:#FFFFFF; background-color:var(--brand-orange); font-family: "Istok Web"; font-weight:bold; font-size:18px; text-transform:uppercase; letter-spacing:1px; border:0px; margin-top:0px; padding:5px; padding-left:7px; padding-right:7px; border-radius:3px }
a.weiter:link, a.weiter:visited { color:#FFFFFF }

.zurueck { color:#FFFFFF; background-color:var(--brand-orange); font-family: "Istok Web"; font-weight:bold; font-size:18px; text-transform:uppercase; letter-spacing:1px; border:0px; padding:5px; padding-left:7px; padding-right:7px; border-radius:3px; margin-left:0px }
a.zurueck:link, a.zurueck:visited { color:#FFFFFF }

.print { color:#FFFFFF; background-color:var(--brand-orange); font-family: "Istok Web"; font-weight:bold; font-size:18px; text-transform:uppercase; letter-spacing:1px; border:0px; padding:5px; padding-left:7px; padding-right:7px; border-radius:3px; margin-left:0px }
a.print:link, a.print:visited { color:#FFFFFF }