@charset "utf-8";

@font-face { 
	font-family: 'sonfon'; 
	src: url('../media/fonts/sonfon.ttf');
}


a.mnav {
	text-decoration: none;
	font-family: 'sonfon';
	color: var(--vc1);
	border: 0;
	background-color: transparent;
	font-weight: 600;
	font-size: 1.2em;
	margin: 0;
	padding: 0.5rem 0.5rem;	
	border-radius: 0;	
}
a.mnav:hover {
	text-decoration: none;
	color: var(--vc1);
	border: 0;
	background-color: var(--bc3);
}

a.mnav.pointernav {
	text-decoration: none;
	color: var(--vc1);
	border: 0;
	background-color: var(--bc3);
}
a.mnav.pointernav:hover {
	text-decoration: none;
	color: var(--vc2);
	border: 0;
	background-color: var(--bc2);
}

.dropdown-menu {
	text-decoration: none;
	font-family: 'sonfon';
	color: var(--vc1);
	border: 0;
	background-color: var(--bcdk75);
	font-weight: 600;
	font-size: 1.2em;
	margin: 0;
	padding: 0.5rem 0.5rem;	
	border-radius: 0;	
}
a.msnav:hover {
	text-decoration: none;
	color: var(--vc1);
	border: 0;
	background-color: var(--bc3);
}

.topnavline {
	color: var(--vc1);
	background: var(--bc2);
}

.mainnav {
	background-color: var(--bc1);
	padding: 4px 0 4px 0;
	border-top: 3px solid var(--vc2);
	border-bottom: 3px solid var(--vc2);
	margin-bottom: 8px;
}

.mainnnav {
	background-image: linear-gradient(to bottom, var(--bc1), var(--bc3));
}

.mnavline, .botnavline {
	color: var(--vc1);
	background: var(--bc3);
}

.is-sticky {
    background-color: var(--bcdk75) !important;
    
}

.slidebar {
    position: absolute;
    bottom: 20%;
    left: 0;
}

.sbubblepos {
    position: absolute;
    top: 20%;
    left: 10%;
}

.slogo1pos {
    position: absolute;
    top: 0;
    right: 0;
}

.slogo2pos {
    position: absolute;
    top: 0;
    right: 0;
    width: 20vw;
}

.slogo3pos {
    position: absolute;
    top: 0;
    right: 20vw;
    width: 35vw;
}


/* ============================================================
   NEWS BOX 2:1 (Kompatibel bis IE11)
   ============================================================ */

.news-box-2-1 {
    position: relative;
    width: calc(100% - 20px);
    
    height: 0;
    padding-bottom: var(--heigth, 50%);
    margin: var(--margin, 10px);

	background-size: cover;
    background-position: center center;
    background-color: var(--vc3);
    
    overflow: hidden;
}

.news-box-date {
    position: absolute;
    top: 0;
    left: 0;
    
    background-color: var(--bci1);
    color: var(--vci1);
    
    padding: 6px 12px;
    font-family: 'stdfon', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 2;
}

.news-box-bar, .news-box-bar a, .news-box-bar a:hover {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    font-size: 1.5rem;
    color: var(--bc1);
    background-color: var(--bc1t75); 
    
    padding: 12px 16px;
    z-index: 2;
}

/* 3. DER LINK (Titel) */
.news-box-link {
    text-decoration: none;
    color: var(--vc1);
    font-family: 'stdfon', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.2;
    
    display: block;
    transition: color 0.2s;
}

.news-box-link:hover {
    color: var(--vc2);
    text-decoration: none;
}

/* ============================================================
   DER "NAV-STABILISATOR" (Fix für hüpfende Menüs)
   ============================================================ */

/* 1. Alle Listen-Punkte (<li>) werden zu identischen Flex-Boxen */
.navlist > li {
    display: flex !important;  /* Zwingt ALLE ins gleiche Raster */
    height: 100%; /* Nutzen die volle Höhe der Leiste */
}

/* 2. Die Links (<a>) selbst werden auch stabilisiert */
/* Damit ignorieren sie line-height Probleme und zentrieren sich mathematisch */
a.mnav {
    display: inline-flex !important;
    
    /* Wir nehmen die Höhe aus dem Padding/Font statt line-height */
    /* Das ist robuster gegen Verrutschen */
    line-height: 1.2 !important; 
    
    /* Optional: Fixe Mindesthöhe, damit alle Buttons gleich fett sind */
    /* 32px Font + 8px Padding oben + 8px unten + Border = ca. 50-60px */
}

/* 3. Korrektur für den Dropdown-Pfeil */
/* Damit er schön mittig neben dem Text sitzt */
.caret {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 12px;
    padding-top: 4px; /* Kleine optische Korrektur */
}

.tlogo {
	width: 100%;
}

.hidenano {
        display: none;
}

/* --------------------------------------------------------
   >= 576px — mobiles Hochformat / kleine Tablets
--------------------------------------------------------- */
@media (min-width: 576px) {
a.mnav {
	font-size: 1.2rem;
	margin: 0;
	padding: 0.5rem 0.5rem;	
	border-radius: 0;	
}

.tlogo {
	width: 192px;
		margin: 12px 0 12px 0;
}

.hidenano {
        display: block;
}

}

/* --------------------------------------------------------
   >= 768px — Tablet
--------------------------------------------------------- */
@media (min-width: 768px) {
a.mnav {
	font-size: 1.4rem;
	margin: 0;
	padding: 0.8rem 0.8rem;	
	border-radius: 0;	
}
.tlogo {
	width: 256px;
		margin: 8px 0 8px 0;
}
}

/* --------------------------------------------------------
   >= 992px — Tablet breit / Laptop klein (Port)
--------------------------------------------------------- */
@media (min-width: 992px) {
}

/* --------------------------------------------------------
   >= 1200px — Desktop
--------------------------------------------------------- */
@media (min-width: 1200px) {

}

/* --------------------------------------------------------
   >= 1600px — XXL Desktop
--------------------------------------------------------- */
@media (min-width: 1600px) {
    .main {
        padding: 0;
    }
}