/* ==========================================================================
   1. SCHRIFTARTEN (Lokale Einbindung aus deinem Ordner)
   ========================================================================== */
@font-face {
    font-family: 'fine';
    src: url('schrifttypen/MonteCarlo-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'love';
    src: url('schrifttypen/LoveLight-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'reguler';
    src: url('schrifttypen/SupermercadoOne-Regular.ttf') format('truetype');
}

/* HINWEIS ZU DEN SCHRIFTARTEN:
   Für die neue, seriöse Optik nutzen wir primär Standard-Systemschriften, 
   die auf jedem PC/Smartphone vorhanden sind und extreme Ruhe ausstrahlen (serifenlos für Text, Serif für Titel).
*/

/* ==========================================================================
   2. GLOBALE EINSTELLUNGEN
   ========================================================================== */
body {
    background-color: #F4F1EA; /* Edles, mattes Pergament-Weiß statt hartem Grau */
    color: #1E252B;           /* Weiches Anthrazit für entspanntes Lesen */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.75;        /* Großzügiger Zeilenabstand gegen visuelle Überladung */
    margin: 0;
    padding: 0;
}

/* Harmonische, akademische Überschriften */
h1, h2, h3 {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif; /* Klassischer Buch-Charakter */
    font-weight: 400;
    color: #1E252B;
    margin: 0 0 15px 0;
}

/* ==========================================================================
   3. HEADER & KONTAKTLEISTE
   ========================================================================== */
/* Der neue, flexible Header-Container */
.main-header {
    position: relative;
    width: 100%;
    height: 60vh; /* Hier kannst du die Höhe bestimmen (z.B. 60% der Bildschirmhöhe) */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Das HTML-Bild perfekt einpassen */
.header-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt den Raum aus ohne verzerrt zu werden */
    
    /* DER RETTER FÜR DEINEN SONNENUNTERGANG:
       Hiermit steuerst du den Bildausschnitt. 
       "center bottom" bedeutet: Zentriere es horizontal, aber zeige UNBEDINGT den unteren Teil des Bildes (wo meistens der Horizont/Sonnenuntergang ist).
       Falls das nicht passt, probiere "center top" oder Prozentwerte wie "center 80%".
    */
    object-position: center center; 
    
    z-index: 1;
}

/* Der dunkle Schleier für perfekten Textkontrast */
.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45));
    z-index: 2;
}

/* Deine Texte wandern in die oberste Ebene */
.header-content {
    position: relative;
    z-index: 3;
    padding: 20px;
}

.header-content h1 {
    color: #FFFFFF;
    font-size: 3.5rem;
    font-family: Georgia, serif;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    margin: 5px 0;
}

.header-content h2 {
    color: #FFFFFF;
    font-size: 1.6rem;
    font-family: Georgia, serif;
    font-weight: 300;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    margin: 0;
}

/* Kontaktzeile direkt unter dem Header */
.contactrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    background-color: #EAE6DF; /* Sanfter Kontrast-Ton passend zum Pergament */
    padding: 12px 20px;
    font-size: 0.9em;
    text-align: center;
}

.contactrow .text_center {
    /* Setzt die Boxen-Stile innerhalb der Kontaktzeile zurück */
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    text-align: center;
}

.contactrow p, .contactrow hr {
    margin: 0;
    display: inline-block;
}

.contactrow hr {
    display: none; /* Entfernt die alte Trennlinie, da Flexbox jetzt trennt */
}

.contactrow a {
    color: #1E252B;
    text-decoration: none;
    font-weight: 600;
}

.contactrow a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   4. LAYOUT-STRUKTUR & PARALLAX-EFFEKT (Repariert)
   ========================================================================== */
/* Das Haupt-Behältnis der Boxen */
.bodi {
    display: block; /* Verhindert das unruhige Spalten-Grid im Textbereich */
    width: 100%;
}

/* Basis-Klasse für alle Parallax-Elemente (Sowohl Header als auch Zwischenräume) */
.parallax {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* DAS fixiert das Bild beim Scrollen */
}

/* Spezifische Parallax-Bilder */
.parallax--header {
    /* Verbindet Parallax mit einem dezenten dunklen Schleier für perfekte Lesbarkeit der weißen Schrift */
    background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45)), url("picture/page_kalyvia.jpg");
}

.parallax--rest {
    /* Leere Parallax-Flächen zwischen den Boxen bekommen diese Mindesthöhe */
    min-height: 25vh; 
    background-image: url("picture/page_park.jpg");
}

.parallax--footer {
    background-image: url("picture/page_kalyvia.jpg");
}

/* Text-Styling im Header */
.parallax--header h1 {
    color: #FFFFFF;
    font-size: 3rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.parallax--header h2 {
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* ==========================================================================
   5. DIE TEXTBOXEN (Ruhige, fokussierte Inhalts-Inseln)
   ========================================================================== */
.text_center {
    max-width: 680px;         /* Optimale Breite für sparsamen Text und schnelles Erfassen */
    margin: 60px auto;        /* Zentriert die Boxen und schafft Abstand zu den Bildern */
    padding: 45px;
    background-color: #FFFFFF;/* Reine weiße Karte auf pergamentfarbenem Grund */
    border-radius: 5px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04); /* Hauchzarter, moderner Tiefeneffekt */
    text-align: left;         /* Linksbündig liest sich bei Fließtext und Listen am saubersten */
    box-sizing: border-box;
}

/* Titel innerhalb der Textboxen */
.text_center h1 {
    text-align: center;
    font-size: 1.8rem;
    color: #8C7355;           /* Edler, dezenter Erdton für Struktur */
    border-bottom: 1px solid #EAE6DF;
    padding-bottom: 12px;
    margin-bottom: 25px;
}

/* Listenpunkte sauber formatieren */
.text_center ul {
    list-style-type: square;
    padding-left: 20px;
    margin: 15px 0;
}

.text_center ul li {
    margin-bottom: 10px;
}

/* ==========================================================================
   6. SUBSTANZ-LINKS ALS DEZENTE BUTTONS (Für YouTube/Spotify)
   ========================================================================== */
.text_center ul li a {
    display: inline-block;
    background-color: #1E252B; /* Dunkler, seriöser Button */
    color: #FFFFFF;
    text-decoration: none;
    padding: 8px 16px;
    margin: 4px 0;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.25s ease;
}

.text_center ul li a:hover {
    background-color: #8C7355; /* Färbt sich beim Drüberfahren elegant erdfarben */
}

/* ==========================================================================
   7. ALTE NEON-KLASSEN BACKUP
   (Komplett bereinigt: Verhindert Layoutfehler, falls noch im HTML vorhanden)
   ========================================================================== */
.bold_neon_red, .bold_neon_green, .bold_neon_orange,
.fine_neon_red, .fine_neon_green, .fine_neon_orange {
    text-shadow: none !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    text-align: inherit !important;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
footer {
    padding: 40px 20px;
    text-align: center;
    background-color: #1E252B;
    color: #EAE6DF;
    font-size: 0.9rem;
    line-height: 1.6;
}