/* ============================================================
   assets/css/style.css
   ============================================================ */
/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
/* --- Solarized Dark Palette --------------------------------- */
:root {
    --base03: #002b36;   /* Hintergrund (dunkelst) */
    --base02: #073642;   /* Hintergrund Panels/Nav */
    --base01: #586e75;   /* Kommentare, Trennlinien */
    --base00: #657b83;   /* Muted Text */
    --base0:  #839496;   /* Body Text */
    --base1:  #93a1a1;   /* Betonter Text */
    --base2:  #eee8d5;   /* (für light-mode, hier ungenutzt) */
 
    --yellow: #b58900;
    --orange: #cb4b16;
    --red:    #dc322f;
    --violet: #6c71c4;
    --blue:   #268bd2;
    --cyan:   #2aa198;
    --green:  #859900;
 
    --font-mono: 'Source Code Pro', 'Courier New', monospace;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
 
    --max-width: 820px;
    --radius:    2px;
}
 
/* --- Basis -------------------------------------------------- */
body {
    font-family:      var(--font-body);
    font-size:        15px;
    background-color: var(--base03);
    color:            var(--base0);
    line-height:      1.7;
}
 
/* --- Layout ------------------------------------------------- */
.container {
    max-width: var(--max-width);
    margin:    0 auto;
    padding:   40px 24px;
}
 
/* --- Navbar ------------------------------------------------- */
header {
    background:    var(--base02);
    border-bottom: 1px solid var(--base01);
    position:      sticky;
    top:           0;
    z-index:       100;
}
 
.navbar {
    display:     flex;
    align-items: center;
    max-width:   var(--max-width);
    margin:      0 auto;
    padding:     0 24px;
}
 
.logo {
    font-family:     var(--font-mono);
    font-size:       14px;
    font-weight:     600;
    color:           var(--cyan);
    text-decoration: none;
    letter-spacing:  1px;
    padding:         14px 20px 14px 0;
    border-right:    1px solid var(--base01);
    margin-right:    6px;
    white-space:     nowrap;
}
 
.nav-links {
    list-style: none;
    display:    flex;
}
 
.nav-links a {
    display:         block;
    font-family:     var(--font-mono);
    font-size:       13px;
    color:           var(--base0);
    text-decoration: none;
    padding:         14px 16px;
    border-bottom:   2px solid transparent;
    transition:      color 0.15s, border-color 0.15s;
    letter-spacing:  0.5px;
}
 
.nav-links a:hover { color: var(--base1); }
.nav-links a.active { color: var(--cyan); border-bottom-color: var(--cyan); }
 
/* --- Überschriften ------------------------------------------ */
h1 {
    font-family:    var(--font-mono);
    font-size:      26px;
    font-weight:    300;
    color:          var(--base1);
    letter-spacing: 1px;
    margin-bottom:  10px;
}
 
/* Blinkender Cursor nach dem Titel */
h1::after {
    content:   '_';
    color:     var(--cyan);
    animation: blink 1.1s step-end infinite;
}
 
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
 
h2 {
    font-family:    var(--font-mono);
    font-size:      12px;
    font-weight:    600;
    color:          var(--yellow);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin:         32px 0 12px;
}
 
h3 {
    font-family:   var(--font-mono);
    font-size:     14px;
    color:         var(--blue);
    margin-bottom: 6px;
}
 
p      { margin-bottom: 12px; color: var(--base0); }
strong { color: var(--base1); font-weight: 600; }
a      { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
 
code {
    font-family:   var(--font-mono);
    font-size:     13px;
    color:         var(--green);
    background:    var(--base02);
    padding:       1px 5px;
    border-radius: var(--radius);
}
 
/* --- Trennlinie --------------------------------------------- */
hr, .divider {
    border:     none;
    border-top: 1px solid var(--base02);
    margin:     28px 0;
}
 
/* --- Panel (Info-Box mit linkem Balken) --------------------- */
.panel {
    background:    var(--base02);
    border-left:   3px solid var(--cyan);
    padding:       14px 18px;
    margin:        12px 0;
    font-family:   var(--font-mono);
    font-size:     13px;
    color:         var(--base0);
    line-height:   1.9;
    border-radius: 0 var(--radius) var(--radius) 0;
}
 
.hero             { margin-bottom: 32px; }
.hero p           { color: var(--base00); max-width: 520px; }
 
/* --- Formular ----------------------------------------------- */
.form-group { margin-bottom: 16px; }
 
label {
    display:        block;
    font-family:    var(--font-mono);
    font-size:      11px;
    font-weight:    600;
    color:          var(--base01);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom:  5px;
}
 
input, textarea, select {
    width:         100%;
    background:    var(--base02);
    border:        1px solid var(--base01);
    border-radius: var(--radius);
    color:         var(--base1);
    font-family:   var(--font-mono);
    font-size:     13px;
    padding:       8px 12px;
    outline:       none;
    transition:    border-color 0.15s;
}
 
input:focus, textarea:focus, select:focus { border-color: var(--cyan); }
input::placeholder, textarea::placeholder { color: var(--base01); }
textarea { resize: vertical; }
 
button, .btn {
    font-family:    var(--font-mono);
    font-size:      13px;
    background:     transparent;
    border:         1px solid var(--cyan);
    border-radius:  var(--radius);
    color:          var(--cyan);
    padding:        8px 24px;
    cursor:         pointer;
    letter-spacing: 1px;
    transition:     background 0.15s, color 0.15s;
    margin-top:     4px;
}
 
button:hover, .btn:hover {
    background: var(--cyan);
    color:      var(--base03);
}
 
/* --- Alerts ------------------------------------------------- */
.alert {
    font-family:   var(--font-mono);
    font-size:     13px;
    padding:       10px 14px;
    border-left:   3px solid;
    margin-bottom: 16px;
    background:    var(--base02);
}
 
.alert-success { border-color: var(--green); color: var(--green); }
.alert-error   { border-color: var(--red);   color: var(--red);   }
 
/* --- Footer ------------------------------------------------- */
footer {
    background:     var(--base02);
    border-top:     1px solid var(--base01);
    padding:        14px 24px;
    font-family:    var(--font-mono);
    font-size:      12px;
    color:          var(--base01);
    text-align:     center;
    letter-spacing: 1px;
    margin-top:     40px;
}
 
footer span { color: var(--base00); }