/* 1. KOSTENLOSE HISTORISCHE SCHRIFTART EINBINDEN */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

/* =========================================
   1. SCHRIFTARTEN & VARIABLEN (JANE AUSTEN)
   ========================================= */
:root {
    --bg-base: #F5EFE6;         
    --accent-blue: #2C3D4F;     
    --accent-brown: #4A3B32;    
    --accent-orange: #B85A38;   

    /* Das typografische Grundlinien-Raster bleibt unangetastet! */
    --grid-base: 1.625rem;       
    --grid-half: 0.8125rem;     
    --grid-double: 3.25rem;      
    --grid-triple: 4.875rem;     
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-base);
    color: var(--accent-brown);
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 1rem;             
    line-height: var(--grid-base); 
    transition: background-color 0.3s ease, color 0.3s ease;
    
    /* DIE GLOBALE NOTBREMSE: Verhindert horizontalen Scrollbalken kategorisch */
    overflow-x: hidden;
}

.page-wrapper { 
    max-width: 926px; 
    margin: 0 auto; 
    padding: 0; 
    
    /* Sicherheitsnetz für den Haupt-Container */
    overflow-x: hidden;
}

/* TYPOGRAFIE */
small { font-size: 0.667rem; line-height: var(--grid-base); color: var(--accent-brown); display: block; margin-bottom: var(--grid-half); }
p { margin-bottom: var(--grid-half); }

/* Grundgrößen der Überschriften nach Rokoko-Architektur */
h1 { font-size: 1.667rem; color: var(--accent-blue); font-weight: 400; line-height: var(--grid-base); margin-bottom: var(--grid-half); text-transform: uppercase; letter-spacing: 0.3em; }
h2 { font-size: 1.667rem; color: var(--accent-orange); font-weight: 400; line-height: var(--grid-base); margin-bottom: var(--grid-half); text-transform: uppercase; letter-spacing: 0.3em; }
h3 { font-size: 1.333rem; color: var(--accent-blue); font-weight: 400; line-height: var(--grid-base); margin-bottom: var(--grid-half); text-transform: uppercase; letter-spacing: 0.3em; }
h4 { font-size: 1rem; color: var(--accent-blue); font-weight: 400; line-height: var(--grid-base); margin-bottom: var(--grid-half); text-transform: uppercase; letter-spacing: 0.3em; }
h5 { font-size: 1rem; color: var(--accent-orange); font-weight: bold; line-height: var(--grid-base); margin-bottom: 0; text-transform: none; letter-spacing: normal; }

/* Subline: Keine Versalien, keine Linien, Basisfarbe */
h6, p.subhead { font-size: 1rem; color: var(--accent-brown); font-weight: 400; line-height: var(--grid-base); margin-bottom: var(--grid-half); text-transform: none; letter-spacing: normal; margin-top: 0; }

/* Hover für verlinkte Überschriften (Global) */
a .title-block-content h1, a .title-block-content h3, a .title-block-content h4, a .title-block-content h5, a .title-block-content h6, a .title-block-content p.subhead,
a .title-block h1, a .title-block h3, a .title-block h4, a .title-block h5, a .title-block h6, a .title-block p.subhead {
    transition: color 0.3s ease;
}
/* Der 3-Zeilen-Abschluss-Abstand vor den Highlights */
.title-block-last {
    margin-bottom: calc(var(--grid-base) * 3);
}

.title-block-last hr {
    margin-bottom: calc(var(--grid-base) * 3);
}

a:hover .title-block-content h1, a:hover .title-block-content h3, a:hover .title-block-content h4, a:hover .title-block-content h5, a:hover .title-block-content h6, a:hover .title-block-content p.subhead,
a:hover .title-block h1, a:hover .title-block h3, a:hover .title-block h4, a:hover .title-block h5, a:hover .title-block h6, a:hover .title-block p.subhead {
    color: var(--accent-orange);
}

/* GLOBALE BILDER & HOVER-LOGIK (Zentrale Einheitsregelung) */
img { width: 100%; height: auto; display: block; }

a img { transition: opacity 0.3s ease; }
a:hover img { opacity: 0.6; }

/* Ausnahmen für Austausch-Grafiken (-over.webp) und Logos/Flaggen */
.flag-link a:hover img, .logo-link a:hover img, .footer-graphic-nav:hover { opacity: 1; }

/* LOGO & FLAGGEN HOVER */
.logo-link { display: inline-block; position: relative; line-height: 0; }
.logo-standard { display: block; max-width: 100%; }
.logo-hover { display: none; max-width: 100%; }
.logo-link:hover .logo-standard { display: none; }
.logo-link:hover .logo-hover { display: block; }

/* =========================================
   SPRACHAUSWAHL (FLAGGEN & MOUSEOVER)
   ========================================= */
.language-nav { display: flex; justify-content: center; align-items: center; gap: 15px; padding: 0; margin: 0; line-height: 0; background-color: var(--bg-base); }
.flag-link { display: flex; align-items: center; justify-content: center; line-height: 0; margin: 0; padding: 0; }
.flag-link img { width: 50px; border: 0; }
.flag-link .flag-hover { display: none; }
.flag-link:hover .flag-standard { display: none; }
.flag-link:hover .flag-hover { display: block; }

.header-logo { width: 100%; text-align: center; padding-top: 2rem; padding-bottom: 0.5rem; line-height: 0; }

/* =========================================
   MAIN NAV (HAUPTMENÜ ÜBER DEN FLYERN)
   ========================================= */
.main-nav { 
    display: flex; 
    align-items: center; 
    padding: 0; 
    max-width: 926px; 
    width: 100%; 
    margin: 0 auto; 
    height: 2.5rem; 
}

.main-nav a { 
    flex: 1; 
    text-align: center; 
    display: block; 
    text-transform: uppercase; 
    letter-spacing: 0.35em; 
    font-size: 1.05rem; 
    color: var(--accent-blue); 
    text-decoration: none !important; 
    white-space: nowrap; 
    line-height: 2.5rem; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: 1px; 
}

.main-nav a:hover { 
    color: var(--accent-orange); 
}

/* =========================================
   TITLE BLOCKS - BEREINIGTE ABSTÄNDE NACH EBENEN
   (Exakte Rokoko-Architektur für perfekte Abstände)
   ========================================= */
.title-block { text-align: center; margin: 0; }

/* Kompensation für letter-spacing bei zentriertem Text */
.title-block h1, .title-block h2, .title-block h3, .title-block h4, .title-block h5,
.title-block-content h1, .title-block-content h2, .title-block-content h3, .title-block-content h4, .title-block-content h5 { 
    margin-right: -0.3em; 
}

/* 1. STANDARDBARSTÄNDE (Wenn KEINE Subline folgt) */
.title-block h1, .title-block h2, .title-block-content h1, .title-block-content h2 {
    margin-top: 0.7rem; 
    margin-bottom: 0.7rem; 
}

.title-block h3, .title-block-content h3 {
    margin-top: 0.55rem; 
    margin-bottom: 0.55rem; 
}

.title-block h4, .title-block-content h4 {
    margin-top: 0.4rem; 
    margin-bottom: 0.4rem; 
}

/* 2. AUSNAHMEREGELN (Wenn eine Subline folgt) */
.title-block h1:has(+ h6), .title-block h2:has(+ h6), .title-block h1:has(+ p.subhead), .title-block h2:has(+ p.subhead),
.title-block-content h1:has(+ h6), .title-block-content h2:has(+ h6), .title-block-content h1:has(+ p.subhead), .title-block-content h2:has(+ p.subhead) {
    margin-bottom: 0.2rem; 
}

.title-block h3:has(+ h6), .title-block h3:has(+ p.subhead),
.title-block-content h3:has(+ h6), .title-block-content h3:has(+ p.subhead) {
    margin-bottom: 0.3rem; 
}

.title-block h1 + h6, .title-block h2 + h6, .title-block h1 + p.subhead, .title-block h2 + p.subhead,
.title-block-content h1 + h6, .title-block-content h2 + h6, .title-block-content h1 + p.subhead, .title-block-content h2 + p.subhead {
    margin-bottom: 0.7rem; 
}

.title-block h3 + h6, .title-block h3 + p.subhead,
.title-block-content h3 + h6, .title-block-content h3 + p.subhead {
    margin-bottom: 0.55rem; 
}

/* LINKS (Ohne Unterstreichung beim Hover) */
a { color: var(--accent-orange); text-decoration: none; transition: color 0.3s ease; }
a:hover, a:focus { color: var(--accent-blue); text-decoration: none; }

/* =========================================
   CONTENT TEXT & BILDER
   ========================================= */
.content-text {
    text-align: center;
    max-width: 580px;
    margin: 0 auto var(--grid-half) auto; 
    padding: 0;
    font-size: 1rem;
    line-height: var(--grid-base);
    letter-spacing: 0.01em;
    hyphens: auto;
    word-break: break-word;
}

.content-text-last {
    text-align: center;
    max-width: 580px;
    margin: 0 auto calc(var(--grid-half) * 3) auto; 
    padding: 0;
    font-size: 1rem;
    line-height: var(--grid-base);
    hyphens: auto;
    word-break: break-word;
}

/* Der rettende Bild-Wrapper aus dem Maskenball (Bündig an der <hr>) */
.content-image-wrapper {
    max-width: 580px;
    margin: 0 auto;
    line-height: 0;
    display: block;
}

/* =========================================
   LINIEN (Die strikte 1-Linien-Regel aus dem Rokokoball)
   ========================================= */
hr { border: none; border-top: 1px solid var(--accent-blue); margin: 0; padding: 0; clear: both; }

/* Zentriert Zierelemente wie den Violinisten lückenlos im Raster */ 
.ornament-center { text-align: center; line-height: 0; font-size: 0; margin: 0; padding: 0; display: block; }
.ornament-center .logo-link { display: block; }

/* =========================================
   FOOTER GRAFIKEN & BÄNDER
   ========================================= */
.site-footer { margin-top: 3rem; padding-bottom: 4rem; }

.footer-graphic-nav {
    position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%;
    max-width: 926px; height: 130px; margin: 2rem auto 0 auto;
    background-image: url('../images/index-III.webp'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
.footer-graphic-nav:hover { background-image: url('../images/index-III-over.webp'); }

.bar-home-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; text-decoration: none !important; transform: none !important; }
.bar-home-link:hover { text-decoration: none !important; }

.footer-link-group { display: flex; justify-content: center; align-items: center; width: 43%; position: relative; z-index: 0; pointer-events: none; }
.footer-emblem-spacer { width: 14%; }

/* =========================================
   FOOTER MENÜ (UNTER DEM BALKEN) - FEINJUSTIERUNG
   ========================================= */
.footer-link-group a {
    pointer-events: auto; flex: 1; text-align: center; 
    font-family: 'Libre Caslon Text', Georgia, serif; font-style: italic; font-size: 1.45rem; 
    color: var(--accent-brown); text-decoration: none !important; transition: color 0.3s ease;
    transform: translateY(18px); 
}

.footer-link-group a:hover {
    color: var(--accent-orange); text-decoration: none !important; transform: translateY(18px); 
}

.footer-link-group:last-of-type a:last-child {
    position: relative; left: -32px; 
}

/* FOYER (FLYER) */
.foyer-container { display: flex; flex-direction: row; width: 100%; max-width: 1920px; margin: 0 auto; line-height: 0; }
.flyer-link { flex: 1; display: block; line-height: 0; }
.flyer-link img { display: block; width: 100%; height: auto; transition: opacity 0.3s ease; }
.flyer-link:hover img { opacity: 0.6; }

/* =========================================
   BAROCKTANZ-PORTAL ELEMENTE (Highlights, Menü, Kalender)
   ========================================= */

/* 1. Die verlinkten Menü-Blöcke (Barocktanz-Kacheln) */
.menu-block { 
    display: block; 
    padding: 0; 
    transition: transform 0.2s ease, opacity 0.3s ease; 
}

.menu-block:hover { 
    transform: translateX(3px); 
    opacity: 0.8; 
}

/* 2. Highlights-Galerie (Flyer-Reihe) */
.balls-section { 
    margin: 0; 
    padding-bottom: var(--grid-double); 
}

.balls-section-last {
    padding-bottom: var(--grid-triple);
}

.thumbnails-row { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    gap: 0; 
    margin: 0; 
    flex-wrap: nowrap; 
}

.thumbnails-row a { 
    display: block; 
    flex: 1 1 0; 
    min-width: 0; 
    line-height: 0; 
}

.thumbnails-row img { 
    width: 100%; 
    height: auto; 
    display: block; 
    transition: transform 0.3s ease; 
}

/* Der sanfte Zoom-Effekt beim Überfahren der Flyer */
.thumbnails-row a:hover img { 
    transform: none; 
    z-index: 2; 
    position: relative; 
}

/* 3. Kalender Promo (Ohne Transform-Sprünge!) */
.calendar-container {
    margin: 0;
    padding-bottom: var(--grid-double);
}

.calendar-container-last {
    padding-bottom: var(--grid-triple);
}

.calendar-promo-wrapper {
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
    display: block;
    padding-bottom: 2rem;
}

.calendar-promo-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--grid-half);
    transition: opacity 0.3s ease;
    transform: none !important; /* Verbot von Sprüngen */
}

/* Strikt 60% Deckkraft beim Hover */
.calendar-promo-wrapper:hover img {
    opacity: 0.6; 
}

.calendar-promo-wrapper .promo-title {
    font-size: 2.5rem; 
    line-height: 1;
    color: var(--accent-blue);
    text-transform: none; 
    font-style: italic;
    margin-bottom: 0.2rem;
    transition: color 0.3s ease;
}

.calendar-promo-wrapper .promo-sub {
    font-size: 1.3rem;
    letter-spacing: 0.4em;
    margin-right: -0.4em;
    text-transform: uppercase;
    color: var(--accent-blue);
    margin-bottom: 0;
    transition: color 0.3s ease;
}

/* Farbwechsel des Textes beim Hover */
.calendar-promo-wrapper:hover .promo-title,
.calendar-promo-wrapper:hover .promo-sub {
    color: var(--accent-orange);
}

/* 4. Gewandung / Newsletter Section */
.newsletter-section {
    margin: 0;
    padding-bottom: var(--grid-double);
}

/* =========================================
   MOBILE WEICHE FÜR HIGHLIGHTS & KALENDER
   ========================================= */
@media (max-width: 768px) {
    .thumbnails-row { 
        flex-wrap: wrap; 
    }
    .thumbnails-row a { 
        flex: 1 1 50%; 
    }
    .calendar-promo-wrapper .promo-title { 
        font-size: 2rem; 
    }
}

/* =========================================
   ZENTRALE MOBIL-WEICHE FÜR SMARTPHONES
   ========================================= */
@media (max-width: 768px) {
    .site-header .main-nav { height: auto; flex-direction: column; padding: 0.5rem 0; }
    .site-header .main-nav a { line-height: 2.5rem; padding: 0; }
    .br-desktop { display: none; }
    .foyer-container { flex-direction: column; }
    
    .footer-graphic-nav { display: flex; flex-direction: column; height: auto; background-position: top center; padding-top: 70px; margin-top: 2rem; }
    .bar-home-link { display: none; } 
    .footer-link-group { display: flex; flex-direction: column; width: 100%; padding-top: 0; }
    .footer-emblem-spacer { display: none; }
    
    .footer-link-group a { 
        display: block; width: 100%; text-align: center; transform: translateY(0) !important; 
        font-style: normal; text-transform: uppercase; letter-spacing: 0.4em; margin-right: -0.4em; left: 0;
        font-size: 1.1rem; color: var(--accent-blue); padding: 1rem 0; border-top: 1px solid var(--accent-blue); 
    }
    .footer-link-group:first-child a:first-child { border-top: none; }
    .footer-link-group:last-of-type a:last-child { position: static; left: auto; }

    /* Fließtext und kleine Überschriften auf 0.9rem und zentriert */
    body, .content-text, .content-text-last, h4, h5, h6, p.subhead { 
        font-size: 0.9rem; 
        text-align: center;
    }
    
    .content-text, .content-text-last {
        max-width: 100%; 
        padding: 0 1rem; 
        hyphens: auto; 
    }

    /* 2. Hauptüberschriften auf 1.1rem & Letterspacing auf 0.2em */
    h1, h2 {
        font-size: 1.1rem;
        letter-spacing: 0.2em; 
        margin-right: -0.2em; 
        
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
    
    /* 3. Zwischenüberschriften auf 1rem */
    h3 {
        font-size: 1rem;
        letter-spacing: 0.2em;
        margin-right: -0.2em;
        
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
}