@charset "utf-8";

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

/* Base Topbar Styling */
.tlogo {
    width: 14vw;
    margin: 2vw;
}

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

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

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

/* Logos & Background-Logos */
.tnlogo {
    position: absolute;
    right: 64px;
    top: 32px;
    width: 160px;
    height: auto;
    z-index: 1000000;
    transition: 0.5s;
}

.is-sticky > .main > a > .tnlogo {
    position: absolute;
    right: 64px;
    top: 8px;
    width: 96px;
    height: auto;
    z-index: 1000000;
}

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

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

/* ============================================================
   TERMINAL HEADLINE & STICKY CONTROL (LAB214 Relaunch)
   ============================================================ */

/* --- 1. Die obere Status-Zeile --- */
.header-top {
    padding: 8px var(--sp-3, 1rem);
    font-size: 12px;
    font-family: 'stdfon', monospace;
    color: var(--vc1);
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

/* --- 2. Die Brand-Zone (Logo + Text) --- */
.brand-zone a {
    text-decoration: none;
    gap: 16px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-name {
    font-family: 'sonfon', sans-serif;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--vc1);
    letter-spacing: 0.02em;
}

.brand-sub {
    font-family: 'stdfon', monospace;
    font-size: 11px;
    line-height: 14px;
    color: var(--vc1);
    margin-top: 4px;
    letter-spacing: 0.05em;
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* --- 3. Menü-Anpassung an das Terminal-Design --- */
a.mnav {
    font-family: 'stdfon', monospace !important; /* Monospace für den eckigen Klammer-Look */
    font-size: 16px !important;
    font-weight: 500;
    text-transform: uppercase;
    padding: 8px 12px !important;
    min-height: auto !important; /* Hebt den alten pillenförmigen Höhenzwang auf */
    border-radius: 0 !important; /* Keine runden Pillen mehr */
    border: 2px solid transparent !important;
}

/* Hover-Zustand: Grüner Glow statt rotem Rahmen */
a.mnav:hover {
    color: var(--vc2) !important;
    border: 2px solid transparent !important;
    background-color: transparent !important;
    text-shadow: var(--vglow2);
}

/* Unterstrich für den aktiven Link (wie beim [ START ] Button im Screenshot) */
a.mnav.active {
    border-bottom: 2px solid var(--vc2) !important;
}





/* ============================================================
   HERO AREA & GRAPHIC ASSET LAYOUT (LAB214 SPECIFIC)
   ============================================================ */

/* Überlässt Flexbox die Höhenarbeit ab Desktop */
@media (min-width: 992px) {
    .hero-section {
        height: 75vh !important;
        min-height: 650px !important; /* Verhindert Stauchung auf flachen Bildschirmen */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
		border-bottom: 1px solid var(--vc5);
    }

    .hero-section .dtrbg {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
    }

    .hero-section .main {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
        flex: 1 1 auto !important;
    }

    /* Die Content-Reile nimmt den oberen Hauptteil ein */
    .hero-section .content-row {
        flex: 1 1 auto !important;
        align-items: center !important;
        width: 100% !important;
    }
}

/* Text-Bereich */
.tech-intro {
    position: relative;
    z-index: 20;
}

/* --- N.I.N.A. Zone Stabilitäts-Fix --- */
.nina-desktop-zone {
    position: relative !important;
    height: 100% !important;
    align-self: flex-end !important;
}

.nina-character {
    position: absolute !important;
	bottom: 15vh !important; /* Sitzt exakt auf der Leiste auf */
    right: 0 !important;
    width: auto !important;
	max-width: 50vw !important;
    height: 68vh !important; /* Skaliert flüssig mit dem Viewport */
    max-height: 550px !important;
    z-index: 5 !important;
    object-fit: contain !important;
}


/* --- Feature-Leiste unten fest verankern --- */
.hero-features-bar {
    width: 60% !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--bc1t25) !important;
    z-index: 15 !important;
    margin-top: auto !important; /* Zwingt die Leiste an den untersten Flex-Rand */
}

.feature-item {
    font-family: 'stdfon', monospace;
    border-left: 2px solid var(--bc1t50);
}
.feature-item:first-child {
    border-left: none;
}

.feature-icon {
    font-size: 20px;
    color: var(--vc2);
    margin-bottom: 4px;
    text-shadow: var(--vglow1);
}

.feature-item h3 {
    font-size: 13px;
    color: var(--vc1);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.feature-item p {
    font-size: 11px;
    color: var(--gray);
    line-height: 1.3;
}

/* Responsive Anpassung für Mobile */
@media (max-width: 991px) {
    .hero-section {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }
    .hero-section .content-row {
        height: auto !important;
    }
    .tech-intro {
        padding-top: 32px;
        padding-bottom: 24px;
    }
    .hero-features-bar {
        position: relative !important;
        width: 100% !important;
        background: var(--bc2) !important;
        margin-top: 16px !important;
        border-top: 1px solid var(--vc5) !important;
    }
    .feature-item {
        border-left: none;
    }

	.nina-character {
		width: 100vw !important;
		max-width: 100vw !important;
	    height: auto !important;
	    max-height: auto !important;
	}

}







/* ============================================================
   TECH-BOX ARTIFAKTE (LAB214 SPECIFIC)
   ============================================================ */

/* Basis-Box mit grünem Rahmen */
.tech-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--bc4);
    border: 1px solid var(--vc5); /* Dünner, abgedunkelter grüner Rahmen */
    padding: 24px;
    height: 100%;
    position: relative;
    font-family: 'stdfon', monospace;
    transition: border-color 0.3s ease;
}

.tech-box:hover {
    border-color: var(--vc1); /* Leuchtet beim Hovern dezent auf */
}

/* Header-Bereich */
.box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.box-icon-info {
    color: var(--vc1);
    font-weight: bold;
}

.box-title {
    font-family: 'stdfon', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--vc1);
    letter-spacing: 0.05em;
}

/* Text- und Listen-Inhalte */
.box-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.tech-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--vc3);
}

.tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-list li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--vc2);
}

/* Links am Fuß der Boxen */
.box-footer {
    margin-top: 24px;
}

.tech-link {
    font-size: 13px;
    color: var(--vc1);
    text-decoration: none !important;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.tech-link:hover {
    text-shadow: var(--vglow1);
    color: var(--vc2);
}

/* --- Spezifische Specs-Tabelle (Rechte Box) --- */
.terminal-spec-box {
    justify-content: flex-start;
    overflow: hidden;
}

.spec-table {
    border-collapse: collapse;
    width: 100%;
    position: relative;
    z-index: 10;
}

.spec-table td {
    padding: 4px 0;
    font-size: 13px;
    color: var(--vc1);
    vertical-align: top;
}

.spec-label {
    width: 120px;
    letter-spacing: 0.05em;
}

.spec-separator {
    width: 20px;
    text-align: center;
}

.spec-value {
    font-weight: bold;
    color: var(--vc2);
}

/* Pixel-Weltkarte als Hintergrunddekor */
.tech-worldmap {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: calc(100% - 24px);
    background-image: url('../media/web/worldmap.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5; /* Subtil im Hintergrund */
    z-index: 1;
    pointer-events: none;
}


/* Ergänzung für die flexible Spaltenaufteilung */
@media (min-width: 992px) {
    .col-flex {
        /* Erlaubt 3 Spalten nebeneinander, wächst aber auf 100% an, wenn eine Box umbricht */
        flex: 1 1 calc(33.333333% - var(--sp-3, 1rem)) !important;
        max-width: 33.333333% !important; /* Zwingt Box 3 auf Desktop in der Reihe zu bleiben */
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .col-flex {
        /* Auf Tablets nehmen Box 1 und 2 jeweils 50% ein, Box 3 bricht um und wird zentriert zentral dargestellt */
        flex: 1 1 calc(50% - var(--sp-3, 1rem)) !important;
        max-width: 50% !important;
    }
    
    /* Zwingt die dritte Box auf Tablets, sich über die gesamte Breite zu strecken, anstatt links zu kleben */
    .col-flex:nth-child(3) {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}







/* Responsive Anpassung für Mobile */
@media (max-width: 991px) {
    .hero-section {
        min-height: auto !important;
    }
    .tech-intro {
        padding-top: 32px;
        padding-bottom: 40px;
    }
    .hero-features-bar {
        position: relative;
        background: var(--bc2);
	    width: 100%;
        margin-top: 32px;
        border-top: 1px solid var(--vc5);
    }
    .feature-item {
        border-left: none;
    }
}





/* ============================================================
   TERMINAL FOOTER INTEGRATION (LAB214 Relaunch)
   ============================================================ */

.site-footer {
    background-color: var(--bc4) !important;
    border-top: 1px solid var(--vc5);
    font-family: 'stdfon', monospace !important;
}

/* 5-Spalten Flex-Verteilung ab Desktop */
@media (min-width: 1200px) {
    .footer-features {
        display: flex !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }
    .feature-item-footer {
        flex: 0 1 auto !important;
    }
}

/* Icons und Typo im Footer */
.footer-icon {
    font-size: 24px;
    color: var(--vc1);
    text-shadow: var(--vglow1);
    width: 36px;
    text-align: center;
}

.footer-feature-text h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--vc1);
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.3;
}

.footer-feature-text p {
    font-size: 11px;
    color: var(--vc3);
    margin: 2px 0 0 0;
    letter-spacing: 0.02em;
}

/* Trennlinie zur Meta-Zeile */
.footer-meta {
    border-top: 1px solid var(--bc1t25);
    padding-top: 16px;
}

.copyright-text {
    font-size: 12px;
    color: var(--vc5); /* Dezentes, dunkleres Grün für das Copyright */
    letter-spacing: 0.02em;
}

/* Footer Links */
.footer-links-zone {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

a.fnav {
    color: var(--vc1) !important;
    text-decoration: none !important;
    letter-spacing: 0.05em;
    padding: 0 !important;
}

a.fnav:hover {
    color: var(--vc2) !important;
    text-shadow: var(--vglow2);
}

.nav-divider {
    color: var(--vc5);
}

/* Mobile Umbrüche absichern */
@media (max-width: 767px) {
    .footer-meta {
        flex-direction: column !important;
        gap: 12px;
        text-align: center;
    }
    .footer-links-zone {
        justify-content: center;
    }
}





/* ============================================================
   DIE MAGIE: STICKY-MODUS-KONTROLLE (Wenn gescrollt wurde)
   ============================================================ */

/* 1. Obere Status-Leiste komplett verschwinden lassen */
.is-sticky .header-top {
    display: none !important;
}

/* 2. Den Subtitel unter "LAB214.de" verschwinden lassen */
.is-sticky .brand-sub {
    display: none !important;
}

/* 3. Padding der Navigationsleiste im Sticky-Modus kompakt halten */
.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 .header-main {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* 4. Logo im Sticky-Modus leicht verkleinern */
.is-sticky .tlogo {
    width: 64px !important; /* Passt die Größe flüssig an */
    margin: 0 !important;
}

/* ============================================================
   DER "NAV-STABILISATOR" & TERMINAL-LOOK
   ============================================================ */

.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;
}

/* --------------------------------------------------------
   BREAKPOINTS (Responsive Skalierung des Menüs)
--------------------------------------------------------- */
@media (min-width: 576px) {
    .tlogo {
        width: 14vw;
        margin: 2vw;
    }
}

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

/* ============================================================
   GLOBALER INHALTS-WRAPPER (Isolierung gegen Mailer-Ausbrüche)
   ============================================================ */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main#main-content {
    flex: 1 0 auto;
    width: 100%;
    position: relative;
    clear: both;
}

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

footer.site-footer {
    display: block !important;
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    z-index: 100 !important;
}

.site-footer::after {
    content: "";
    display: table;
    clear: both;
}

#kontakt.section {
    height: auto !important;
    min-height: min-content !important;
    display: block !important;
    clear: both !important;
}

/* ============================================================
   FOOTER GRID-STABILISATOR
   ============================================================ */
.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;
}





/* ============================================================
   RESPONSIVE FIX FÜR KONTAKT & INFRASTRUKTUR-GRID
   ============================================================ */

/* --- Desktop & große Tablets (Bildschirme >= 992px) --- */
@media (min-width: 992px) {
    .nina-main-row {
        display: flex !important;
        flex-wrap: nowrap !important; /* Hält alles in einer Reihe */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Die linke Info-Spalte bekommt exakt 35% */
    .terminal-sidebar {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        width: 35% !important;
        border-right: 1px solid var(--bc1t50) !important;
        border-left: none !important;
        padding-right: 32px !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    /* Die rechte Formular-Spalte bekommt exakt 65% minus den Abstand */
    .nina-content-col {
        flex: 0 0 65% !important;
        max-width: 65% !important;
        width: 65% !important;
        padding-left: 48px !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* --- Smartphone & Mobile (Bildschirme < 992px) --- */
@media (max-width: 991px) {
    .nina-main-row {
        display: block !important; /* Löst Flexbox komplett auf */
        width: 100% !important;
    }

    .terminal-sidebar,
    .nina-content-col {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .terminal-sidebar {
        border-right: none !important;
        border-bottom: 1px solid var(--bc1t50) !important;
        padding-bottom: 32px !important;
        margin-bottom: 32px !important;
    }
}