/*
Theme Name: Terminal Decision Child v66
Template: hello-elementor
Description: Child-Theme für Hello-Elementor basierend auf Terminal Decision Design aus 2004
Author: Custom
Version: 66.0.0
Text Domain: terminal-decision-child
*/

/* Google Fonts Import - Libre Franklin */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,400;0,600;1,600&display=swap');

/* ===============================================
   CSS CUSTOM PROPERTIES
   Proportionen:
     Titel : Menüband ≈ 88 : 70  → Faktor 0.795
     --menu-height = calc(var(--title-size) * 0.795)
     Garantiert das Verhältnis IMMER korrekt,
     unabhängig von Viewport-Größe und Breakpoint.

   Menütext ≈ 43 % der Menü-Innenhöhe (nach cap-height):
     --menu-text = calc(var(--menu-height) * 0.43)

   Rand-Abstand = Abstand zwischen Items / 3.5:
     --menu-edge = calc(var(--menu-gap) / 3.5)
   =============================================== */
:root {
    --title-size:  clamp(3rem, 8vw, 6rem);
    --menu-height: calc(var(--title-size) * 0.795);
    --menu-text:   calc(var(--menu-height) * 0.43);
    --menu-gap:    clamp(0.7rem, 1.6vw, 1.4rem);
    --menu-edge:   calc(var(--menu-gap) / 3.5);
    --title-gap:   clamp(0.15rem, 0.4vw, 0.3rem);
}

/* ===============================================
   BASE STYLES
   =============================================== */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===============================================
   HEADER
   =============================================== */
.terminal-decision-header {
    width: 100%;
    background-color: #000000;
    padding: 2rem 0 0 0;
    text-align: center;       /* zentriert den inline-Container */
    overflow: hidden;
}

/* ================================================
   INLINE-CONTAINER – Kernidee v66
   -------------------------------------------------
   .td-header-inner ist ein inline-flex-Container.
   Da der Titel white-space:nowrap hat, zieht er
   den Container auf exakt die Textbreite auf.
   Die Nav erbt dann diese Breite (width: 100%).
   Damit richtet sich das Menüband IMMER automatisch
   an der Textbreite des Titels aus – ohne JS,
   ohne Pixel-Messungen, auf allen Viewports.

   Der Container wird durch text-align:center im
   Header zentriert.
   ================================================ */
.td-header-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    /* verhindert Überlauf auf sehr kleinen Viewports */
    max-width: calc(100vw - 4px);
    box-sizing: border-box;
}

/* ===============================================
   TITLE
   =============================================== */
.terminal-title-wrapper {
    /* Kein Padding – der Container passt sich dem Text an */
    padding: 0;
    margin: 0;
}

.terminal-title {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: var(--title-size);
    color: #ffffff;
    /* KEIN text-align: center nötig – der Container
       bestimmt die Breite, der Text füllt sie */
    letter-spacing: 0.05em;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    line-height: 1;
    text-shadow:
        0 0 8px  #800000,
        0 0 15px #800000,
        0 0 25px #800000,
        0 0 40px rgba(128, 0, 0, 0.6);
}

/* ===============================================
   NAVIGATION
   width: 100% → erbt die Breite des Inline-Containers
   = automatisch die Titeltext-Breite
   =============================================== */
.terminal-navigation {
    margin-top: var(--title-gap);
    margin-bottom: 1.5rem;
    width: 100%;       /* = Breite des Inline-Containers = Titeltext */
    box-sizing: border-box;
    position: relative;

    border-radius: 3px;
    border-width: 2px;
    border-style: solid;
    border-color:
        rgba(255,255,255,0.55) rgba(255,255,255,0.55)
        rgba(255,255,255,1.0)  rgba(255,255,255,1.0);
}

.terminal-menu-wrapper {
    background-color: #800000;
    border-radius: 2px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* Höhe IMMER = title × 0.795 – via calc() garantiert */
    height: var(--menu-height);
    display: flex;
    align-items: center;

    border-width: 3px;
    border-style: solid;
    border-color:
        rgba(0,0,0,0.5)          rgba(0,0,0,0.5)
        rgba(255,255,255,0.45)   rgba(255,255,255,0.45);
}

.terminal-menu {
    list-style: none;
    margin: 0;
    padding: 0 var(--menu-edge);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--menu-gap);
    align-items: center;
    justify-content: space-between;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
}

.terminal-menu::-webkit-scrollbar { display: none; }

.terminal-menu > li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
    white-space: nowrap;
}

.terminal-menu > li > a {
    color: #ffffff;
    text-decoration: none;
    font-size: var(--menu-text);
    line-height: 1;
    font-family: Arial, sans-serif;
    font-weight: 400;
    padding: 0 0.45em;
    padding-left: 1.3em;
    display: flex;
    align-items: center;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 2px;
    white-space: nowrap;
}

/* Icons */
.terminal-menu:not(.terminal-menu-fallback) > li.menu-item-has-children > a::before {
    content: '▷';
    position: absolute;
    left: 0.28em;
    color: #ffffff;
    font-size: 0.85em;
}

.terminal-menu:not(.terminal-menu-fallback) > li:not(.menu-item-has-children) > a::before {
    content: '▶';
    position: absolute;
    left: 0.28em;
    color: #ffffff;
    font-size: 0.78em;
}

.terminal-menu-fallback > li > a {
    padding-left: 0.45em;
}

/* Hover / Active */
.terminal-menu > li > a:hover,
.terminal-menu > li.current-menu-item > a,
.terminal-menu > li.current-menu-ancestor > a {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
    border-radius: 2px;
}

/* Mobile Nav Arrows – default: versteckt */
.mobile-nav-arrow {
    display: none;
    flex-shrink: 0;
    background: none;
    border: none;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: var(--menu-text);
    line-height: 1;
    padding: 0 var(--menu-edge);
    cursor: pointer;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.mobile-nav-arrow:active {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
    border-radius: 2px;
}

/* ===============================================
   SUBMENU / DROPDOWN
   =============================================== */
.terminal-menu li { position: relative; }

.terminal-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #800000;
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0.8rem 0;
    min-width: 220px;
    border-radius: 2px;
    border-width: 3px;
    border-style: solid;
    border-color:
        rgba(0,0,0,0.5)        rgba(0,0,0,0.5)
        rgba(255,255,255,0.45) rgba(255,255,255,0.45);
    outline: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.terminal-menu li:hover > .sub-menu,
.terminal-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.terminal-menu .sub-menu li { padding: 0; height: auto; }

.terminal-menu .sub-menu a {
    color: #ffffff;
    text-decoration: none;
    padding: 0.7rem 1.5rem 0.7rem 2.5rem;
    display: block;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    position: relative;
    border-radius: 2px;
    margin: 0 0.5rem;
    height: auto;
}

.terminal-menu .sub-menu a::before {
    content: '▶';
    position: absolute;
    left: 1.2rem;
    color: #ffffff;
    font-size: 0.8em;
}

.terminal-menu .sub-menu a:hover {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
    border-radius: 2px;
}

/* ===============================================
   CONTENT AREA
   =============================================== */
.site-content {
    max-width: 1400px;
    margin: 3rem auto;
    padding: 0 2rem;
    color: #a8b3d9;
}

/* ===============================================
   RESPONSIVE – Mobile (≤900px)
   Nur --title-size wird angepasst.
   Alle anderen Variablen leiten sich via calc() ab
   → Proportionen identisch auf allen Viewports.
   =============================================== */
@media (max-width: 900px) {
    :root {
        --title-size: clamp(1.5rem, 7.5vw, 4.5rem);
        --menu-gap:   clamp(0.35rem, 0.9vw, 0.7rem);
    }

    .terminal-decision-header {
        padding: 1.5% 0 0 0;
    }

    .mobile-nav-arrow {
        display: flex !important;
    }

    /* Container darf auf Mobile volle Breite einnehmen */
    .td-header-inner {
        max-width: 100%;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    :root {
        --title-size: clamp(1.3rem, 6.5vw, 4rem);
        --menu-gap:   clamp(0.3rem, 0.75vw, 0.6rem);
    }

    .terminal-decision-header {
        padding: 1% 0 0 0;
    }
}

@media (max-width: 480px) {
    :root {
        --title-size: clamp(1.2rem, 7.5vw, 2.5rem);
        --menu-gap:   clamp(0.25rem, 0.7vw, 0.5rem);
    }
}

/* ===============================================
   UTILITY CLASSES
   =============================================== */
.hidden { display: none; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}