/* style_herold.css */

/* --- 0. Layout-Fix: Box-Sizing für korrekte Breitenberechnung --- */
*, *::before, *::after {
    box-sizing: border-box; /* Löst die meisten Probleme mit dem Überlauf */
}

/* --- 1. Lokale Einbindung des Cinzel Fonts --- */
@font-face {
    font-family: 'Cinzel';
    src: url('../fonts/Cinzel-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --- 2. Variablen (Fabelgrund-Farbpalette) --- */
:root {
    --farbe-hintergrund: #2c2925; 
    --farbe-akzent: #c4945d;    
    --farbe-hell: #f4e8d3;      
    --farbe-kachel: #3f3a34;    
    --schrift-titel: 'Cinzel', serif; 
    --schrift-data: 'Roboto Mono', monospace; 
}

/* --- 3. Allgemeine Basis & Text --- */
body {
    background-color: var(--farbe-hintergrund);
    color: var(--farbe-hell);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* --- 4. Header --- */
.hdr-banner {
    background-color: #1a1815;
    padding: 20px 40px;
    border-bottom: 3px solid var(--farbe-akzent);
    text-align: center;
}
.logo-text {
    font-family: var(--schrift-titel);
    font-size: 2.2em;
    color: var(--farbe-akzent);
}
.sub-title {
    font-size: 0.9em;
    font-style: italic;
    color: var(--farbe-hell);
}

/* --- 5. Hauptlayout (Grid für Eingabe und Ausgabe) --- */
.main-content {
    display: flex;
    max-width: 1200px;
    margin: 30px auto;
    gap: 30px;
    padding: 0 15px;
}

.form-kachel, .output-kachel {
    background-color: var(--farbe-kachel);
    border: 1px solid var(--farbe-akzent);
    border-radius: 6px;
    padding: 25px;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.4); 
    flex: 1; 
}

.form-kachel h2, .output-kachel h2 {
    font-family: var(--schrift-titel);
    color: var(--farbe-akzent);
    border-bottom: 1px solid rgba(196, 148, 93, 0.4);
    padding-bottom: 10px;
    margin-top: 0;
}

/* --- 6. Formular-Design (Eingabe) --- */
.form-gruppe {
    margin-bottom: 15px;
}
label {
    display: block;
    margin-bottom: 5px;
    color: var(--farbe-akzent);
}
input[type="text"], input[type="number"], input[type="date"], select {
    width: 100%;
    padding: 10px;
    background-color: #2c2925;
    border: 1px solid var(--farbe-akzent);
    color: var(--farbe-hell);
    border-radius: 3px;
    box-sizing: border-box;
}

/* Slider und Feedback */
.steuerrad {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}
.steuerrad label {
    display: flex; /* Für die Ausrichtung des Wertes neben dem Text */
    justify-content: space-between;
}
#slider-wert {
    color: #fff; /* Wert etwas heller hervorheben */
    font-weight: bold;
}
input[type="range"] {
    width: 100%;
    cursor: grab;
    -webkit-appearance: none;
    background: var(--farbe-akzent);
    height: 3px;
    border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--farbe-hell);
    cursor: pointer;
    border: 2px solid var(--farbe-akzent);
}


/* --- 7. Button-Design --- */
.btn-aktion {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: var(--farbe-akzent);
    color: #1a1815;
    border: none;
    border-radius: 4px;
    font-family: var(--schrift-titel);
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.2s;
}
.btn-aktion:hover {
    background-color: #f4e8d3;
}

/* --- 8. Output-Bereich --- */
/* --- 8. Output-Bereich --- */
#resultat-container {
    min-height: 200px;
    background-color: #4a453e; 
    border: 2px solid var(--farbe-akzent);
    padding: 20px;
    border-radius: 4px;
    font-family: var(--schrift-data); 
    font-size: 0.95em;
    /* ALT: white-space: pre-wrap; war fast richtig, aber wir nutzen das <pre>-Tag im JS */
}

/* Neue Regel für den Text innerhalb des <pre>-Tags im Container */
#resultat-container pre {
    white-space: pre-wrap; /* Erhält Zeilenumbrüche und bricht lange Zeilen um */
    word-wrap: break-word; /* WICHTIG: Erlaubt das Umbrechen von Wörtern selbst */
    margin: 0; /* Entfernt Standard-Margin des <pre>-Tags */
}

.hinweis-text {
    font-style: italic;
    color: rgba(244, 232, 211, 0.6);
}

/* --- 9. Pitch/Analyse-Bereich --- */
.pitch-analyse {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    font-size: 0.9em;
}
.pitch-analyse h3 {
    font-family: var(--schrift-titel);
    color: var(--farbe-hell);
    font-size: 1.1em;
}

/* --- 10. Responsive Anpassung (Greift nun früher und robuster) --- */
@media (max-width: 800px) {
    .main-content {
        flex-direction: column; /* Stapelt die Kacheln untereinander */
        gap: 20px;
        margin: 20px auto;
    }
    .form-kachel, .output-kachel {
        flex: none; 
        width: 100%; /* Stellt sicher, dass sie die volle Breite nutzen */
        padding: 20px;
    }
    .hdr-banner {
        padding: 15px 10px;
    }
    .logo-text {
        font-size: 1.8em;
    }
}