/* public/css/style.css */

/* CSS Variablen für einfaches Theming */
:root {
    --color-bg-dark: #1a1a1a;
    --color-bg-medium: #2a2a2a;
    --color-bg-light: #3a3a3a;
    --color-text-primary: #e0e0e0; /* Weiß/Hellgrau für Haupttext */
    --color-text-secondary: #a0a0a0; /* Dunkleres Grau für Sekundärtext */
    --color-accent-orange: #ff8c00; /* Last War Orange */
    --color-border: #4a4a4a;
    --color-button-bg: #404040;
    --color-button-hover: #505050;
    --color-input-bg: #202020;
    --color-input-border: #5a5a5a;
}

/* Basis-Stile (Mobile First) */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-dark);
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    color: var(--color-accent-orange);
    margin-bottom: 0.8em;
    line-height: 1.2;
}

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }

a {
    color: var(--color-text-primary); /* Links jetzt in Primärtextfarbe */
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--color-accent-orange); /* Hover-Effekt bleibt Orange */
}

/* Allgemeine Regel für responsive Bilder */
img {
    max-width: 100%; /* Bilder niemals über ihren Container hinausragen lassen */
    height: auto;    /* Seitenverhältnis beibehalten */
    display: block;  /* Entfernt zusätzlichen Leerraum unter dem Bild */
}

/* NEUE, SPEZIFISCHERE REGEL FÜR BILDER IM ARTIKELINHALT */
/* Überschreibt inline-Styles des CKEditors, um Responsivität zu erzwingen */
.article-content img {
    width: auto !important;       /* Erzwingt, dass die Breite vom CSS und nicht inline kommt */
    height: auto !important;      /* Erzwingt, dass die Höhe vom CSS und nicht inline kommt */
    max-width: 100% !important;   /* Stellt sicher, dass das Bild nicht über den Container ragt */
    /* display: block; ist hier redundant, da es schon oben definiert ist */
}


.container {
    width: 100%;
    padding: 1em;
    max-width: 1400px; /* Maximale Breite für Desktop */
    margin: 0 auto; /* Zentrieren auf größeren Bildschirmen */
}

/* Header */
header {
    background-color: var(--color-bg-medium);
    padding: 1em 0;
    border-bottom: 2px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Ermöglicht Umbruch auf kleinen Bildschirmen */
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8em;
    color: var(--color-accent-orange);
    text-transform: uppercase;
    padding-left: 1em;
}

.logo span {
    color: var(--color-text-primary);
}

.nav-toggle {
    display: block; /* Standardmäßig sichtbar auf Mobile */
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-size: 2em;
    cursor: pointer;
    padding-right: 1em;
}

.main-nav {
    width: 100%; /* Volle Breite auf Mobile */
    display: none; /* Standardmäßig versteckt auf Mobile */
    flex-direction: column;
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}

.main-nav.active {
    display: flex; /* Sichtbar, wenn aktiv */
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav li a {
    display: block;
    padding: 0.8em 1em;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.3s ease;
}

.main-nav li:last-child a {
    border-bottom: none;
}

.main-nav li a:hover {
    background-color: var(--color-bg-dark);
}

/* Main Content Area */
main {
    padding: 1.5em 0;
}

.card {
    background-color: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5em;
    margin-bottom: 1.5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card h2 {
    margin-top: 0;
}

.button {
    display: inline-block;
    background-color: var(--color-button-bg);
    color: var(--color-accent-orange);
    padding: 0.8em 1.5em;
    border: 1px solid var(--color-accent-orange);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
}
.button:hover {
    background-color: var(--color-accent-orange);
    color: var(--color-bg-dark);
    border-color: var(--color-accent-orange);
}

.button.green { /* Dieser Button wird nun auch Orange-basiert */
    background-color: var(--color-button-bg);
    color: var(--color-accent-orange); /* Geändert zu Orange */
    border-color: var(--color-accent-orange); /* Geändert zu Orange */
}
.button.green:hover {
    background-color: var(--color-accent-orange); /* Geändert zu Orange */
    color: var(--color-bg-dark);
    border-color: var(--color-accent-orange); /* Geändert zu Orange */
}

.input-field, textarea {
    width: 100%;
    padding: 0.8em;
    margin-bottom: 1em;
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    color: var(--color-text-primary);
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
}
.input-field:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent-orange); /* Geändert zu Orange */
    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2); /* Geändert zu Orange */
}

textarea {
    min-height: 150px;
    resize: vertical;
}

form label {
    display: block;
    margin-bottom: 0.5em;
    color: var(--color-text-secondary);
}

fieldset {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 1.5em;
}
legend {
    color: var(--color-accent-orange);
    font-family: 'Orbitron', sans-serif;
    padding: 0 0.5em;
}

/* CKEditor spezifische Styles für Lesbarkeit */
/* Diese Stile überschreiben die Standard-CKEditor-Styles, um sie an unser dunkles Theme anzupassen */
.ck.ck-editor__editable_inline {
    background-color: var(--color-input-bg) !important; /* Dunkler Hintergrund für den Editorbereich */
    color: var(--color-text-primary) !important; /* Helle Schriftfarbe für den Editorbereich */
    border: 1px solid var(--color-input-border) !important;
    border-radius: 5px !important;
    min-height: 300px !important; /* Mindesthöhe für den Editorbereich */
    padding: 1em !important;
}

/* Stile für die CKEditor Toolbar */
.ck.ck-toolbar {
    background-color: var(--color-bg-light) !important; /* Hintergrund der Toolbar */
    border: 1px solid var(--color-border) !important;
    border-bottom: none !important;
    border-radius: 5px 5px 0 0 !important;
}

/* Stile für CKEditor Buttons und Icons */
.ck.ck-button .ck-icon {
    color: var(--color-text-primary) !important; /* Farbe der Icons in der Toolbar */
}
.ck.ck-button:hover:not(.ck-disabled) {
    background-color: var(--color-button-hover) !important; /* Hover-Effekt für Toolbar-Buttons */
}
.ck.ck-button.ck-on { /* Zustand für aktive Buttons (z.B. Fett, Kursiv) */
    background-color: var(--color-accent-orange) !important;
    color: var(--color-bg-dark) !important;
}
.ck.ck-button.ck-on .ck-icon {
    color: var(--color-bg-dark) !important; /* Icon-Farbe, wenn Button aktiv ist */
}

/* Stile für Dropdowns im CKEditor (z.B. Überschriften-Dropdown) */
.ck.ck-list__item .ck-button {
    color: var(--color-text-primary) !important; /* Textfarbe in Dropdown-Listen */
}
.ck.ck-list__item .ck-button:hover {
    background-color: var(--color-button-hover) !important;
}

/* Stile für Link-Eingabefeld im CKEditor */
.ck.ck-input-text {
    background-color: var(--color-input-bg) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-input-border) !important;
}

/* NEU: Responsive Video Embeds (für iframes von YouTube etc.) */
/* Wrapper für responsives Video */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Seitenverhältnis (Höhe / Breite = 9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 1em; /* Abstand nach unten */
    border-radius: 8px; /* Abgerundete Ecken */
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Entfernt Standard-iframe-Rahmen */
}

/* Footer */
footer {
    background-color: var(--color-bg-medium);
    color: var(--color-text-secondary);
    text-align: center;
    padding: 1.5em 1em;
    border-top: 2px solid var(--color-border);
    font-size: 0.9em;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Eine Spalte auf kleinen Bildschirmen */
    gap: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--color-border); /* Trennlinie über dem Copyright */
    margin-bottom: 1.5em;
}

.footer-section h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--color-accent-orange);
    font-size: 1.1em;
    margin-bottom: 0.8em;
}

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

.footer-list li {
    margin-bottom: 0.5em;
}

.footer-list li a {
    color: var(--color-text-secondary); /* Links im Footer */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-list li a:hover {
    color: var(--color-accent-orange);
}

.footer-bottom {
    font-size: 0.85em;
    color: var(--color-text-secondary);
    margin-top: 1em;
}

/* Media Queries für größere Bildschirme */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr); /* Drei Spalten auf größeren Bildschirmen */
        text-align: left;
    }
}