@charset "utf-8";

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

/* ============================================================
   BASE NAVIGATION STYLING & STICKY CONTROL
   ============================================================ */
.tlogo {
    width: 14vw;
    margin: 2vw;
}

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

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

header.sticky-top {
    position: sticky;
    top: 0;
    z-index: 99999; /* Über dem Inhalt halten */
    width: 100%;
}

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

.is-sticky .mainnav {
    background-color: var(--bc3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid var(--vc5);
}

.is-sticky .tlogo {
    width: 64px !important;
    margin: 0 !important;
}

/* Verhindert Lückenbildung bei Aktivierung des Sticky-Modus */
.is-sticky + main#main-content,
.is-sticky + .site-wrapper {
    padding-top: 0 !important; 
}

.mvlogo {
	width: 180px;
	height: 28px;
	background-image:url(../media/web/logo_u_ln.webp);
	background-size: contain;
	background-repeat: no-repeat;
	transition: 0.5s;
}
.mvlogo:hover, .mvlogo.pointernav {
	background-image:url(../media/web/logo_u_hn.webp);
}

.mvlogo.pointernav:hover {
	background-image:url(../media/web/logo_u_ln.webp);
}

a.mnav {
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'sonfon', sans-serif;
    font-size: 1.1rem; 
    color: var(--vc1);
    background-color: transparent;
    line-height: 1.2; 
    white-space: nowrap;
    margin: 0 0.4rem;
    padding: 0.4rem 0.6rem; 
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

/* Unsichtbare Platzhalter-Klammern, damit Text beim Hovern nicht springt */
a.mnav::before { content: "[ "; opacity: 0; color: var(--vc2); transition: opacity 0.2s ease; }
a.mnav::after  { content: " ]"; opacity: 0; color: var(--vc2); transition: opacity 0.2s ease; }

a.mnav:hover, a.mnav.pointernav {
    text-decoration: none;
    color: var(--vc2) !important;
    background-color: transparent !important;
    text-shadow: var(--vglow2);
}

/* Klammern beim Hover anzeigen */
a.mnav:hover::before,
a.mnav:hover::after {
    opacity: 1;
}

/* Aktiver Zustand (falls über N.I.N.A. gesteuert) */
a.mnav.active {
    color: var(--vc2) !important;
    text-shadow: var(--vglow1);
}
a.mnav.active::before,
a.mnav.active::after {
    opacity: 1;
}

a.mnav.active {
    border-bottom: 2px solid var(--vc2) !important;
}

.navlist > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    height: 100%;
}

.caret {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 12px;
    padding-top: 4px;
}


.oc-navigation,
.oc-navigation * {
    box-sizing: border-box;
}

.oc-navigation {
    display: block !important;
    width: 100% !important;
    margin-top: 28px;
    text-align: left !important;
}

.oc-group {
    display: block !important;
    width: 100% !important;
    margin-top: 28px;
}

.oc-group-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;

    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--vc3);
}

.oc-mainlink {
    display: block !important;
    width: 100% !important;
    float: none !important;

    margin: 0 !important;
    padding: 6px 0 !important;

    font-size: 1rem;
    font-weight: 600;
    color: var(--vc1);
    text-decoration: none;
    text-align: left !important;
}

.oc-subnav {
    display: block !important;
    width: 100% !important;

    margin: 0 0 10px 14px !important;
    padding: 0 !important;
}

.oc-subnav a {
    display: block !important;
    width: 100% !important;
    float: none !important;

    margin: 0 !important;
    padding: 4px 0 !important;

    font-size: 0.88rem;
    color: var(--vc1);
    opacity: 0.65;
    text-decoration: none;
    text-align: left !important;
}

.oc-legal {
    display: block !important;
    width: 100% !important;
}

.oc-legal a {
    display: block !important;
    width: 100% !important;
    float: none !important;

    margin: 0 !important;
    padding: 4px 0 !important;

    font-size: 0.88rem;
    color: var(--vc1);
    opacity: 0.65;
    text-decoration: none;
    text-align: left !important;
}

/* RESPONSIVE LOGO BREAKPOINTS */
@media (min-width: 576px) {
    .tlogo { width: 14vw; margin: 2vw; }
}

@media (min-width: 768px) {
    .tlogo { width: 96px; margin: 8px; }
}


/* ============================================================
   GLOBALER INHALTS-WRAPPER & SEITEN-STRUKTUR
   ============================================================ */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Zwingt den Hauptinhalt, die volle Höhe einzunehmen und nachfolgende Elemente wegzudrücken */
main#main-content {
    display: block !important;
    height: auto !important;
    min-height: min-content !important;
    clear: both !important;
}

.site-wrapper {
    display: block !important;
    width: 100vw !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: visible !important; 
    clear: both !important;      
}


/* ============================================================
   CLEANES NINA-MAIN-GRID (INNEN-PADDING STATT FLEX-GAP)
   ============================================================ */

/* Reihe komplett auf Null setzen, damit keine Lücken stören */
.row.nina-main-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important; /* Spaltenabstände rein über Padding gesteuert */
    clear: both !important;
    overflow: visible !important;
    margin-bottom: 40px !important; /* Sicherheitsabstand nach unten */
}

.row.nina-main-row::after {
    content: "";
    display: block;
    clear: both;
}

/* Feste Prozentbreiten ab Desktop erzwingen (Mathematisch exakt 100%) */
@media (min-width: 992px) {
    .terminal-sidebar {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        width: 35% !important;
    }

    .nina-content-col {
        flex: 0 0 65% !important;
        max-width: 65% !important;
        width: 65% !important;
    }
}

/* Die Box-Geheimwaffe: Hält den Spalteninhalt stabil */
.grid-inner {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Sauberer Spaltenabstand auf großen Bildschirmen */
@media (min-width: 992px) {
    .terminal-sidebar .grid-inner {
        padding-right: 32px !important; /* Abstand nach rechts zur Linie */
        border-right: 1px solid var(--bc1t50) !important; /* Grüne Trennlinie */
    }
    
    .nina-content-col .grid-inner {
        padding-left: 32px !important; /* Abstand nach links zur Linie */
    }
}

/* Mobile-First Fallback: Unter 992px steht alles sauber untereinander */
@media (max-width: 991px) {
    .terminal-sidebar, .nina-content-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .terminal-sidebar .grid-inner {
        padding-bottom: 32px !important;
        border-right: none !important;
    }
}


/* ============================================================
   FOOTER GRID-STABILISATOR & PFLICHTLINKS
   ============================================================ */
.botnavline .row {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
}

.botnavline .col {
    height: auto !important;
    min-height: 100% !important;
    display: block !important;
    text-align: left !important;
    padding: 16px !important;
}

/* Footer knallhart am echten Ende des Inhalts absichern */
footer {
    display: block !important;
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 40px !important; /* Gesunder, fester Abstand zum Formular-Ende */
}





/* ============================================================
    DIE UNZERSTÖRBARE INNER PAD-LOGIK (FINALES FIXING)
   ============================================================ */

/* Das schützende innere Box-Element umschließt den Inhalt sauber */
.grid-inner {
    width: 100% !important;
    height: auto !important; /* Erlaubt dynamische Inhalts-Höhe */
    box-sizing: border-box !important;
}

/* 
   Direkte Steuerung über deine spezifischen Spalten-Klassen,
   völlig egal welche Klassen im HTML auf der .row liegen!
*/
@media (min-width: 992px) {
    .terminal-sidebar .grid-inner {
        padding-right: 32px !important; /* Abstand nach rechts zur Trennlinie */
        border-right: 1px solid var(--bc1t50) !important; /* Deine grüne Linie */
    }
    
    .nina-content-col .grid-inner {
        padding-left: 32px !important; /* Abstand nach links zur Trennlinie */
    }
}

/* Mobile Absicherung unter 992px */
@media (max-width: 991px) {
    .terminal-sidebar .grid-inner {
        padding-bottom: 32px !important;
        border-right: none !important;
    }
}