@charset "UTF-8";

/* Reset-CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Verhindert Layout-Fehler bei Padding & Border */
}

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased; /* Macht Schrift auf Macs schöner */
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
}

/* Entfernt Standard-Listen-Stile global */
ul, ol {
    list-style: none;
}

/* 1. Grund-Setup */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121212;
    color: #eeeeee;
    display: flex;
    flex-direction: column; /* Wichtig für margin-top: auto beim Footer */
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

/* 2. Der Haupt-Container */
.steckbrief {
    background: #1e1e1e;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.6);
    display: flex;            /* DIESE ZEILE HAT GEFEHLT - Aktiviert das Nebeneinander */
    align-items: stretch;     /* Zwingt beide Spalten auf die gleiche Höhe */
    gap: 40px;
    max-width: 1100px;
    width: 100%;
    margin: auto;             /* Zentriert die Karte im Viewport */
}


/* 3. Bild-Bereich */
.photo-frame {
    flex: 0 0 60%; /* Bild nimmt fest 60% der Breite ein */
    max-width: 650px;
}
.photo-frame img {
    width: 100%;
    height: auto;
	object-fit: cover;
    border-radius: 4px;
    border: 8px solid #ffffff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    display: block;
    transition: transform 0.3s ease;
}
.photo-frame img:hover { transform: scale(1.01); }

/* 4. Text-Bereich */
.info {
    flex: 1;
    min-width: 280px;
    display: flex;           /* NEU: Macht die Info-Spalte selbst zum Flex-Container */
    flex-direction: column;  /* NEU: Elemente untereinander stapeln */
	justify-content: flex-start; /* Text oben beginnen */
}
h2 {
    color: #ffffff;
    margin-top: 0;
    font-size: 1.8em;
    letter-spacing: 3px;
    border-bottom: 2px solid #444;
    padding-bottom: 10px;
    text-transform: uppercase;
}

ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px; /* Hier kannst du den Abstand zum O-Ton steuern */
}

li { margin-bottom: 20px; font-size: 0.95em; }
strong {
    color: #ffffff;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 0.8em;
    opacity: 0.7;
}

/* 5. Links & O-Ton */
a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.8em;
    letter-spacing: 1px;
    opacity: 0.5;
    transition: opacity 0.3s;
}
a:hover { opacity: 1; text-decoration: underline; }

/* --- Kontaktformular Checkbox Grid --- */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten */
    gap: 12px;
    background: #252525;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #444;
    margin-bottom: 5px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    cursor: pointer;
    text-transform: none; /* Verhindert GROSSSCHREIBUNG aus dem Standard-CSS */
    opacity: 1 !important; /* Volle Sichtbarkeit */
    color: #eeeeee;
}

.checkbox-item input {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #4a9eff; /* Die blaue Farbe für den Haken */
}

/* Formular-Eingabefelder für Kontaktseite */
.form-input {
    width: 100%;
    padding: 12px;
    background: #333;
    border: 1px solid #444;
    color: white;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95em;
    transition: border-color 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: #4a9eff;
}



.action-button {
    display: inline-block;
    padding: 4px 12px;
    background-color: #444;   /* Dezentes Grau */
    color: #fff;
    text-decoration: none;
    border-radius: 4px;      /* Pillenform wie Tags */
    font-size: 0.75em;        /* Gleiche Größe wie Tags */
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: 1px solid #555;
    cursor: pointer;
}

.action-button:hover {
    background-color: #4a9eff; /* Blau beim Hover */
    border-color: #4a9eff;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Styling für Formular-Eingaben */
input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 12px;
    background: #333;
    border: 1px solid #444;
    color: #eeeeee;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95em;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #4a9eff; /* Blauer Fokus-Ring passend zum Button */
}

label {
    font-size: 0.8em;
    opacity: 0.7;
    text-transform: uppercase;
    margin-top: 10px;
    display: block;
}
/* bis hier neu*/

.o-ton-text {
    display: block;
    font-style: italic;
    line-height: 1.6;
    color: #cccccc;
    border-left: 3px solid #444;
    padding-left: 15px;
    margin-top: 10px;
}
.info-text { display: block; margin-top: 5px; color: #eeeeee; }

/* 6. Tags & Kategorien */
.tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: bold;
    color: #000; /* Schwarz auf hellen Farben besser lesbar */
    text-transform: uppercase;
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
}

/* Farben */
.cat-1 { background-color: rgb(225, 116, 195); } /* Altrosa - Alteingesessene */
.cat-2 { background-color: rgb(171, 192, 201); } /* Grau - Neu Zugezogene */
.cat-3 { background-color: rgb(188, 249, 190); } /* Hellgrün - Älteste */
.cat-4 { background-color: rgb(249, 243, 188); } /* Hellgelb - Jüngste */
.cat-5 { background-color: rgb(129, 243, 233); } /* Türkis - Dorfretter */
.cat-6 { background-color: rgb(191, 164, 200); } /* Graublau - Vereinsmeier */
.cat-7 { background-color: rgb(132, 188, 239); } /* Hellblau - Zeitspender */
.cat-8 { background-color: rgb(243, 141, 129); } /* Rosa - Dorfgestalter */

/* 7. Navigation & Footer */
.navigation-arrows {
    margin-top: auto !important; /* Drückt die Nav nach unten */
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.navigation-arrows a {
    flex: 0 1 auto; 
    text-align: center;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Text */
}
.navigation-arrows a { opacity: 0.6; }
.navigation-arrows a:hover { color: #3498db; opacity: 1; text-decoration: none; }
.navigation-arrows a[href="galerie.html"] {
    font-weight: bold;
    border: 1px solid #444;
    padding: 5px 10px;
    border-radius: 4px;
}

.main-footer {
    width: 100%;
    text-align: center;
    font-size: 0.75em;
    color: #555555;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 0;
    margin-top: 50px !important; /* Schafft Platz zwischen Karte und Copyright */ 
}

/* 8. Galerie (separat) */
.galerie-body { display: block; text-align: center; }
.container { max-width: 1200px; margin: 50px auto; padding: 0 20px; }
.galerie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }
.galerie-item {
    background: #1e1e1e;
    padding: 15px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}
.galerie-item:hover { transform: translateY(-10px); }
.image-wrapper { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; margin-bottom: 15px; background: #000; }
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.galerie-item:hover img { transform: scale(1.1); }
.galerie-item h3 { color: #fff; margin: 10px 0; font-size: 1.1em; }

/* 9. Mobile Optimierung (IMMER GANZ UNTEN) */
@media (max-width: 768px) {
    body { padding: 10px; align-items: flex-start; }
    .steckbrief { flex-direction: column; padding: 15px; background: transparent; box-shadow: none; }
    .photo-frame, .info { width: 100%; flex: none; }
    .photo-frame img { border-width: 4px; }
    .checkbox-grid { grid-template-columns: 1fr;} /* Auf Handys nur eine Spalte */	
    h2 { text-align: center; }
    
    /* Navigation einreihig lassen, Text etwas kleiner damit es passt */
    .navigation-arrows { 
        flex-wrap: nowrap !important; 
        gap: 5px; 
    }
    .navigation-arrows a { font-size: 0.7em; }
}