/* =========================================================================
   SOELSK.COM - ALTERNATIVE COMMODORE THEME
   Farbschema: Hellgrau (30%), Dark Blue, Violett, Cyan
   ========================================================================= */

body {
    background-color: #b3b3b3;
    padding: 2rem;
    color: #00008B;
    font-family: 'Courier New', Courier, monospace;
}

/* =========================================================================
   HEADER NAVIGATION (BREADCRUMBS & LANDSCHAFT)
   ========================================================================= */
.header-nav {
    margin-bottom: 20px;
    clear: both;
}

.back-glyph {
    float: left;
    margin: 0 20px 0 0;
    width: 55px;
    height: 45px;
    background-color: #00008B;
    border: 3px solid #8A2BE2;
    cursor: pointer;
    transition: background-color 0.3s;
}

.back-glyph:hover {
    background-color: #8A2BE2;
}

.landscape-glyph {
    float: left;
    width: 402px;
    height: 45px;
    background-color: #00008B;
    border: 3px solid #8A2BE2;
    cursor: pointer;
    transition: background-color 0.3s;
}

.landscape-glyph:hover {
    background-color: #8A2BE2;
}

.go-glyph {
    float: left;
    margin: 0 0 0 20px;
    width: 55px;
    height: 45px;
    background-color: #00008B;
    border: 3px solid #8A2BE2;
    cursor: pointer;
    transition: background-color 0.3s;
}

.go-glyph:hover {
    background-color: #8A2BE2;
}

.nav-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 26px;
    font-weight: bold;
    fill: #00FFFF;
}

.landscape-text {
    font-family: 'Webdings', 'Courier New', Courier, monospace;
    font-size: 22px;
    fill: #00FFFF;
    letter-spacing: 5px;
}

/* =========================================================================
   SCHWEBENDE GLYPHEN (NULL-TOLERANZ BOX-MODEL)
   ========================================================================= */
.floating-glyph {
    float: left;
    display: block; /* Tötet HTML-Leerzeichen unter dem SVG */
    width: 99px;  
    height: 99px; 
    margin: 0;      /* Null-Toleranz: Kein Außenabstand */
    padding: 0;     /* Null-Toleranz: Kein Innenabstand */
    box-sizing: border-box; /* Zwingt den Border nach innen */
    
    /* Standard-Theme (Dark Blue) */
    background-color: #00008B;
    border: 2px solid #8A2BE2; 
}

.glyph { 
    font-family: 'Courier New', Courier, monospace; 
    font-size: 70px; 
    font-weight: bold; 
    fill: #00FFFF; 
    stroke: #8A2BE2; 
    stroke-width: 2px; 
    paint-order: stroke fill; 
}

/* =========================================================================
   LAYOUT & TRENNLINIEN
   ========================================================================= */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.svg-divider {
    margin-top: 40px; 
    width: 100%;
    height: 12px;     
    display: block;
}

/* =========================================================================
   KÖRPERSTRUKTUR (TD-VERHALTEN: 3x 297px Spalten, 2x 33px Trennlinien)
   ========================================================================= */
.main-content {
    display: flex;
    justify-content: center;
    max-width: 957px; /* Exakt: (3 * 297px) + (2 * 33px) */
    width: 99%;
    margin: 40px auto;
    padding: 0;
}

.content-column {
    flex: 1 1 297px;
    max-width: 297px; /* 3 Glyphen a 99px passen hier auf den Pixel genau rein */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.column-spacer {
    flex: 0 0 33px;
    width: 33px;
    margin: 0;
    padding: 0;
}

.vertical-divider {
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================================================
   FARBMILIEUS FÜR DIE SPALTEN (GREY, GREEN, BLUE)
   ========================================================================= */
.col-grey .floating-glyph { background-color: #1a1a1a; border-color: #4d4d4d; }
.col-grey .glyph { fill: #b3b3b3; stroke: #000000; }

.col-green .floating-glyph { background-color: #051408; border-color: #2e7d32; }
.col-green .glyph { fill: #00ff66; stroke: #143d18; }

.col-blue .floating-glyph { background-color: #00008B; border-color: #8A2BE2; }
.col-blue .glyph { fill: #00FFFF; stroke: #8A2BE2; }

/* =========================================================================
   FOOTER BEREICH (DARK GREEN TRANSITION)
   ========================================================================= */
.footer-content {
    margin-top: 40px;
}

.footer-content a {
    color: #2e7d32; 
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-content a:hover {
    color: #00ff66;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.6);
}

.about-section {
    margin-bottom: 20px;
    display: block;
}

.separator {
    color: #143d18; 
    margin: 0 15px;
    font-weight: bold;
}

.legal-links {
    color: #143d18;
}

/* =========================================================================
   FORMULAR ELEMENTE (NEWSLETTER IM DARK GREEN MODUS)
   ========================================================================= */
.newsletter-form {
    margin-bottom: 20px;
}

.terminal-input {
    background-color: #051408; 
    color: #00ff66; 
    border: 2px solid #2e7d32; 
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em; 
    padding: 5px 10px;
    outline: none; 
    transition: box-shadow 0.3s, border-color 0.3s;
}

.terminal-input::placeholder {
    color: rgba(0, 255, 102, 0.3);
}

.terminal-input:focus {
    border-color: #00ff66;
    box-shadow: 0 0 10px rgba(0, 0, 139, 0.8); 
}

.terminal-input:invalid:not(:placeholder-shown) {
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.terminal-btn {
    background-color: #051408;
    color: #2e7d32; 
    border: 2px solid #2e7d32;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em;
    font-weight: bold;
    padding: 5px 15px;
    margin-left: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.terminal-btn:hover {
    background-color: #00008B; 
    color: #00ff66;
    border-color: #00ff66;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.5);
}