/* ========================================
   CSS STYLESHEET FÜR FOTOGRAFIE PORTFOLIO
   
   Autor: Sven Schubert
   Erstellt: 2025
   
   DESIGN-PRINZIPIEN:
   - Mobile-First Ansatz (zuerst für Smartphones, dann Tablets/Desktop)
   - Barrierefrei (WCAG 2.1 konform)
   - Cross-Browser kompatibel (Chrome, Firefox, Safari, Edge)
   
   FARBSCHEMA:
   Hauptfarbe (Primary):   #835332 (Dunkles Braun)
   Sekundärfarbe:          #9d7e6e (Mittleres Braun)
   Akzentfarben:           #cca176, #d8c2a8, #cab095
   Hintergrund:            #ffffff (WEIß - GEÄNDERT)
   Text dunkel:            #3a2a1f
   Text hell:              #f5f0e8
   ======================================== */


/* ========================================
   1. RESET & GRUNDEINSTELLUNGEN
   Sorgt dafür, dass alle Browser gleich starten
   ======================================== */

/* Box-Sizing: Border und Padding werden in width/height eingerechnet */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML-Grundeinstellungen */
html {
    font-size: 16px;
    /* Basis-Schriftgröße: 1rem = 16px */
    scroll-behavior: smooth;
    /* Sanftes Scrollen bei Anker-Links */
    -webkit-text-size-adjust: 100%;
    /* Verhindert automatische Textgröße in iOS */
    background-color: #ffffff;
    /* GEÄNDERT: Weißer Hintergrund */
}

/* Body: Hauptcontainer der Website */
body {
    /* System-Schriftarten für beste Performance & natives Aussehen */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    /* Zeilenabstand für bessere Lesbarkeit */
    color: #3a2a1f;
    /* Standard-Textfarbe */
    background-color: #ffffff;
    /* GEÄNDERT: Weißer Hintergrund statt #e5d3bd */
    min-height: 100vh;
    /* Mindestens volle Bildschirmhöhe */
    display: flex;
    /* Flexbox für Sticky Footer */
    flex-direction: column;
    /* Vertikale Anordnung */
}


/* ========================================
   2. BARRIEREFREIHEIT
   Wichtig für Screenreader und Tastatur-Navigation
   ======================================== */

/* Skip-Link: Ermöglicht Nutzern, direkt zum Hauptinhalt zu springen
   Besonders wichtig für Screenreader-Nutzer und Tastatur-Navigation */
.skip-link {
    position: absolute;
    /* Aus dem Dokumentenfluss nehmen */
    top: -40px;
    /* Versteckt außerhalb des sichtbaren Bereichs */
    left: 0;
    background: #835332;
    color: #f5f0e8;
    padding: 8px 12px;
    z-index: 100;
    /* Über allem anderen */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

/* Wird sichtbar wenn mit Tab-Taste fokussiert */
.skip-link:focus {
    top: 0;
    /* Springt nach oben ins Sichtfeld */
}

/* Fokus-Stile für alle interaktiven Elemente
   Wichtig: Damit Nutzer sehen, wo sie mit der Tastatur sind */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid #835332;
    /* Deutlich sichtbarer Rahmen */
    outline-offset: 2px;
    /* Abstand zum Element */
}


/* ========================================
   3. TYPOGRAFIE
   Überschriften und Text-Styling
   ======================================== */

/* Alle Überschriften bekommen einheitliches Styling */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    /* Fett */
    line-height: 1.2;
    /* Engerer Zeilenabstand als Fließtext */
    margin-bottom: 24px;
    /* Abstand nach unten */
    color: #835332;
    /* Markenfarbe */
}

/* Spezifische Größen für jede Überschriftenebene */
h1 {
    font-size: 34px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 25px;
}

/* Absätze (Paragraphen) */
p {
    margin-bottom: 24px;
    /* WICHTIG für Firefox: Verhindert, dass lange Wörter Container sprengen */
    word-wrap: break-word;
    /* Alte Browser */
    overflow-wrap: break-word;
    /* Moderne Browser */
}

/* Standard-Link-Styling */
a {
    color: #835332;
    /* Markenfarbe */
    text-decoration: none;
    /* Keine Unterstreichung */
    transition: color 0.3s;
    /* Sanfter Farbwechsel beim Hover */
}

/* Link-Hover-Effekt (Maus drüber) */
a:hover,
a:focus {
    color: #9d7e6e;
    /* Hellere Farbe */
    text-decoration: underline;
    /* Unterstreichung erscheint */
}


/* ========================================
   4. LAYOUT-CONTAINER
   Begrenzt die Breite und zentriert Inhalte
   ======================================== */

.container {
    width: 100%;
    /* Volle Breite auf kleinen Geräten */
    max-width: 1200px;
    /* Maximale Breite auf großen Bildschirmen */
    margin: 0 auto;
    /* Horizontal zentriert */
    padding: 0 24px;
    /* Seitenabstand (Luftraum) */
}


/* ========================================
   5. HEADER (Kopfbereich)
   Enthält Logo und Navigation
   ======================================== */

.site-header {
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    /* GEÄNDERT: Verstärkter Schatten */
    border-bottom: 1px solid #e5d3bd;
    position: sticky;
    /* WICHTIG: Bleibt beim Scrollen oben */
    top: 0;
    z-index: 50;
    /* Über anderen Inhalten */
}

.header-container {
    display: flex;
    /* Flexbox für flexible Anordnung */
    justify-content: space-between;
    /* Logo links, Menü rechts */
    align-items: center;
    /* Vertikal zentriert */
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Logo im Footer */
.footer-logo-img {
    max-width: 170px;
    height: auto;
    /* Behält Seitenverhältnis bei */
    display: block;
    margin: 30px auto 16px;
    /* Zentriert mit Abständen */
}


/* ========================================
   6. NAVIGATION - MOBILE FIRST
   CSS-Only Hamburger-Menü (kein JavaScript!)
   ======================================== */

.main-nav {
    position: relative;
    /* Für absolute positionierte Kinder */
}

/* Versteckte Checkbox - Trick für CSS-Only Toggle
   Wenn angeklickt, öffnet/schließt sich das Menü */
#mobile-menu-toggle {
    display: none;
    /* Checkbox unsichtbar */
}

/* Hamburger-Icon (3 Striche) */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    /* Striche untereinander */
    gap: 5px;
    /* Abstand zwischen Strichen */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

/* Einzelne Striche des Hamburger-Icons */
.hamburger-line {
    width: 25px;
    height: 3px;
    background-color: #835332;
    transition: all 0.3s;
    /* Smooth Animation */
}

/* Menü-Liste - Mobile */
.nav-list {
    display: none;
    /* Standardmäßig versteckt */
    list-style: none;
    /* Keine Bulletpoints */
    position: absolute;
    /* Schwebt über dem Inhalt */
    top: 100%;
    /* Direkt unter dem Header */
    right: 0;
    /* Rechtsbündig */
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    padding: 16px 0;
    z-index: 100;
}

/* MAGIC: Wenn Checkbox aktiviert, zeige das Menü
   ~ ist der "sibling selector" (Geschwister-Element) */
#mobile-menu-toggle:checked~.nav-list {
    display: block;
}

/* Hamburger-Animation: Wird zu einem X */
#mobile-menu-toggle:checked~.mobile-menu-toggle .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    /* Erster Strich schräg */
}

#mobile-menu-toggle:checked~.mobile-menu-toggle .hamburger-line:nth-child(2) {
    opacity: 0;
    /* Mittlerer Strich verschwindet */
}

#mobile-menu-toggle:checked~.mobile-menu-toggle .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
    /* Dritter Strich schräg */
}

/* Menü-Einträge */
.nav-list li {
    border-bottom: 1px solid #e5d3bd;
    /* Trennlinie */
}

.nav-list li:last-child {
    border-bottom: none;
    /* Letzter Eintrag ohne Linie */
}

/* Links im Menü */
.nav-list a {
    display: block;
    /* Volle Breite anklickbar */
    padding: 16px 24px;
    /* Großer Klickbereich (Touch-freundlich) */
    color: #3a2a1f;
    transition: background-color 0.3s;
    text-align: center;
}

/* Hover-Effekt für Menü-Links */
.nav-list a:hover,
.nav-list a:focus {
    background-color: #e5d3bd;
    /* Hellerer Hintergrund */
    text-decoration: none;
}


/* ========================================
   7. HERO BANNER
   Großes Bild am Seitenanfang
   ======================================== */

.hero-banner {
    width: 100%;
    height: 400px;
    /* Feste Höhe auf Mobile */
    /* Fallback: Gradient falls Bild nicht lädt */
    background: linear-gradient(135deg, #835332 0%, #9d7e6e 100%);
    display: flex;
    align-items: center;
    /* Vertikal zentriert */
    justify-content: center;
    /* Horizontal zentriert */
    text-align: center;
    color: #f5f0e8;
    padding: 48px;
    margin-bottom: 48px;
    /* Das eigentliche Hintergrundbild */
    background-image: url('pictures/hochzeitsfotograf-rheurdt.jpg');
    background-size: cover;
    /* Bild füllt gesamten Bereich */
    background-position: center;
    /* Bild zentriert */
    position: relative;
    /* Für ::before Overlay */
}

/* Dunkles Overlay über dem Bild für bessere Textlesbarkeit */
.hero-banner::before {
    content: '';
    /* Leerer Inhalt nötig für ::before */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(131, 83, 50, 0.1);
    /* Leicht dunkles Overlay */
}

/* Text-Inhalt im Banner */
.hero-content {
    position: relative;
    /* Über dem Overlay */
    z-index: 1;
    max-width: 800px;
}

/* Banner-Überschrift */
.hero-banner h1 {
    color: #f5f0e8;
    font-size: 35px;
    margin-bottom: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* Schatten für Lesbarkeit */
}

/* Lead-Text im Banner */
.hero-banner .lead-text {
    color: #f5f0e8;
    font-size: 22px;
    margin-bottom: 0;
}


/* ========================================
   8. MAIN WRAPPER
   Hauptcontainer für Content + Sidebar
   ======================================== */

.main-wrapper {
    flex: 1;
    /* Nimmt verbleibenden Platz (Sticky Footer) */
    display: flex;
    flex-direction: column;
    /* Mobile: Untereinander */
    gap: 32px;
    /* Abstand zwischen Elementen */
    padding-top: 0;
    padding-bottom: 48px;
}


/* ========================================
   9. CONTENT COLUMN (Hauptinhalt)
   ======================================== */

.content-column {
    flex: 1;
    /* Flexible Breite */
}

/* Wiederverwendbarer Content-Block (wie eine Karte) */
.content-block {
    background-color: #fff;
    padding: 32px;
    margin-bottom: 32px;
    border-radius: 8px;
    /* Abgerundete Ecken */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    /* GEÄNDERT: Verstärkter Schatten */
    border: 1px solid #e5d3bd;
    /* GEÄNDERT: Border hinzugefügt */
    /* WICHTIG: Firefox-Fix für Text-Overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    /* Verhindert Überlauf */
}

/* Überschrift in Content-Blöcken */
.section-title {
    color: #835332;
    border-bottom: 3px solid #cca176;
    /* Dekorative Unterstreichung */
    padding-bottom: 16px;
    margin-bottom: 32px;
}

/* Großer Einleitungstext */
.lead-text {
    font-size: 18px;
    color: #9d7e6e;
    line-height: 1.2;
    /* Extra Zeilenabstand */
}


/* ========================================
   10. BILDER MIT TEXTUMFLUSS
   ======================================== */

.float-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(131, 83, 50, 0.15);
}

/* Mobile: Keine Float-Effekte, Bilder zentriert */
.float-left,
.float-right {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* ========================================
   11. PORTFOLIO GRID
   Galerie-Layout für Projekte
   ======================================== */

.portfolio-grid {
    display: grid;
    /* CSS Grid für Layout */
    grid-template-columns: 1fr;
    /* Mobile: 1 Spalte */
    gap: 24px;
    /* Abstand zwischen Items */
    margin-top: 32px;
}

.portfolio-item {
    text-align: center;
}

/* Portfolio-Bilder mit Hover-Effekt */
.portfolio-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s;
    /* Smooth Zoom-Effekt */
}

/* Zoom-Effekt beim Hover */
.portfolio-item img:hover {
    transform: scale(1.05);
    /* 5% größer */
}

.portfolio-item h3 {
    margin-top: 16px;
    color: #9d7e6e;
}


/* ========================================
   12. BUTTONS (Schaltflächen)
   ======================================== */

/* Basis-Button-Style */
.btn {
    display: inline-block;
    padding: 16px 32px;
    /* Großer Klickbereich */
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

/* Primary Button (Haupt-Aktion) */
.btn-primary {
    background-color: #835332;
    color: #f5f0e8;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: rgb(230, 199, 151);
    text-decoration: none;
}

/* Audio-Button (für Audio-Player) */
.btn-audio {
    background-color: #cca176;
    color: #3a2a1f;
    margin-right: 8px;
    margin-bottom: 8px;
}

.btn-audio:hover:not(:disabled) {
    background-color: #835332;
    color: #f5f0e8;
}

/* Deaktivierter Button */
.btn-audio:disabled {
    opacity: 0.5;
    /* Halbtransparent */
    cursor: not-allowed;
    /* "Verboten"-Cursor */
}

/* Block-Button (volle Breite) */
.btn-block {
    display: block;
    width: 100%;
}

.about-me-picture {
    max-width: 640px;
    margin: 0 auto;
    /* Zentriert den Container */
    text-align: center;
    /* Bild zentrieren falls inline */
}

.about-me-picture img {
    width: 100%;
    /* Bild skaliert auf Containerbreite */
    height: auto;
    /* Seitenverhältnis bleibt */
    display: block;
    /* Entfernt kleine Lücke bei inline-Bildern */
    border-radius: 12px;
    /* Optional schöner Look */
    margin-bottom: 15px;
}

/* ========================================
   13. SIDEBAR
   Rechte Spalte mit zusätzlichen Infos
   ======================================== */

.sidebar-column {
    width: 100%;
    /* Mobile: Volle Breite */
}

/* Sidebar-Block (wie Content-Block) */
.sidebar-block {
    background-color: #fff;
    padding: 24px;
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    /* GEÄNDERT: Verstärkter Schatten */
    border: 1px solid #e5d3bd;
    /* GEÄNDERT: Border hinzugefügt */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Sidebar-Überschrift */
.sidebar-title {
    color: #835332;
    font-size: 22px;
    margin-bottom: 24px;
    padding-bottom: 8px;
    border-bottom: 2px solid #cca176;
}


/* ========================================
   14. KONTAKTINFORMATIONEN
   ======================================== */

.contact-details {
    font-style: normal;
    line-height: 1.8;
}

/* Einzelner Kontakt-Eintrag */
.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 8px 16px;
    background-color: #f5f0e8;
    /* GEÄNDERT: Hellere Farbe für besseren Kontrast */
    border-radius: 6px;
    transition: transform 0.3s;
}

/* Slide-Effekt beim Hover */
.contact-info-item:hover {
    transform: translateX(5px);
    /* 5px nach rechts */
}

/* Icon im Kontakt-Item */
.contact-icon {
    font-size: 24px;
    margin-right: 16px;
    color: #cca176;
    min-width: 30px;
    /* Verhindert Quetschen */
}

/* Text-Inhalt */
.contact-info-content {
    flex: 1;
    /* Nimmt restlichen Platz */
}

.contact-info-content strong {
    display: block;
    color: #835332;
    font-size: 14.4px;
    margin-bottom: 3.2px;
}

.contact-info-content a {
    color: #3a2a1f;
    font-weight: 600;
}

.contact-info-content a:hover {
    color: #835332;
}


/* ========================================
   15. NEWS/AKTUELLES BLOCK
   ======================================== */

.news-block {
    background-color: #f5f0e8;
    /* GEÄNDERT: Hellere Hintergrundfarbe */
}

.news-item {
    padding: 16px;
    border-left: 3px solid #cca176;
    /* Farbiger Akzent links */
    margin-bottom: 24px;
    background-color: #fff;
    border-radius: 4px;
}

.news-item:last-child {
    margin-bottom: 0;
}

/* Datum in News */
.news-date {
    font-size: 13.6px;
    color: #9d7e6e;
    font-weight: 600;
    margin-bottom: 4.8px;
}

/* News-Text */
.news-content {
    font-size: 15.2px;
    line-height: 1.5;
    margin-bottom: 0;
}

.contact-details p {
    margin-bottom: 16px;
}


/* ========================================
   16. DATUM/ZEIT ANZEIGE
   ======================================== */

.datetime-display {
    text-align: center;
}

/* Große Uhrzeit */
.current-time {
    font-size: 32px;
    font-weight: 700;
    color: #835332;
    font-variant-numeric: tabular-nums;
    /* Feste Breite für Zahlen */
}

/* Datum */
.current-date {
    font-size: 18px;
    color: #9d7e6e;
}


/* ========================================
   17. BILD DES TAGES
   ======================================== */

.daily-image {
    text-align: center;
}

.daily-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Bildunterschrift */
.daily-image figcaption {
    font-style: italic;
    color: #9d7e6e;
}


/* ========================================
   18. AUDIO PLAYER
   ======================================== */

.audio-description {
    margin-bottom: 24px;
}

/* Container für Audio-Buttons */
.audio-controls {
    display: flex;
    flex-wrap: wrap;
    /* Umbruch bei wenig Platz */
    gap: 8px;
}


/* ========================================
   19. ÖFFNUNGSZEITEN
   ======================================== */

.opening-hours {
    line-height: 1.8;
}

/* Tag (z.B. "Montag") */
.opening-hours dt {
    font-weight: 600;
    color: #835332;
    margin-top: 16px;
}

/* Uhrzeit (z.B. "9:00 - 17:00") */
.opening-hours dd {
    margin-left: 24px;
    color: #9d7e6e;
}


/* ========================================
   20. FOOTER (Fußbereich)
   ======================================== */

.footer-container {
    display: grid;
    grid-template-columns: repeat(3, 250px);
    /* 3 Spalten à 250px */
    justify-content: center;
    /* Zentriert */
    gap: 32px;
    padding: 64px 16px;
    background-color: #ffffff;
    border-radius: 8px;
}

.footer-column {
    text-align: center;
}

.footer-column a {
    color: inherit;
    /* Erbt Farbe vom Eltern-Element */
    text-decoration: none;
}


/* ========================================
   21. FOOTER NAVIGATION
   ======================================== */

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: left;
}

.footer-nav li {
    margin-bottom: 6px;
    list-style: none;
}

.footer-nav li a {
    position: relative;
    transition: color 0.2s ease, padding-left 0.2s ease;
    padding-left: 0;
}

/* Hover mit Slide-Effekt */
.footer-nav li a:hover {
    color: #865700;
    padding-left: 6px;
    /* Schiebt sich leicht nach rechts */
    font-weight: bold;
}


/* ========================================
   22. SOCIAL MEDIA LINKS
   ======================================== */

.footer-social-vertical {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: left;
}

.footer-social-vertical li a {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Abstand zwischen Icon und Text */
    padding: 6px 0;
    transition: color 0.2s ease;
}

.footer-social-vertical li a:hover {
    color: #865700;
    font-weight: bold;
}


/* ========================================
   23. LEGAL / COPYRIGHT
   ======================================== */

.site-footer {
    background-color: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    /* GEÄNDERT: Schatten nach oben */
    border-top: 1px solid #e5d3bd;
}

.footer-legal {
    margin-top: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid #e5d3bd;
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    /* GEÄNDERT: Schatten hinzugefügt */
}

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
}


/* ========================================
   24. RESPONSIVE: MOBILE (unter 550px)
   Footer wird einspaltiger
   ======================================== */

@media (max-width: 850px) {
    .footer-container {
        grid-template-columns: repeat(2, 250px);
        /* 2 Spalten */
    }
}

@media (max-width: 550px) {
    .footer-container {
        grid-template-columns: 1fr;
        /* 1 Spalte (untereinander) */
    }

    /* Footer-Menü zentrieren auf Mobile */
    .footer-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-nav {
        display: block;
        text-align: center;
    }

    .footer-nav li {
        text-align: center;
    }

    /* Kein Slide-Effekt auf Mobile (weil kein Hover) */
    .footer-nav li a:hover {
        padding-left: 0;
    }
}


/* ========================================
   25. RESPONSIVE: TABLET (ab 768px)
   Navigation horizontal, Layout zweispaltig
   ======================================== */

@media (min-width: 768px) {

    /* NAVIGATION WIRD HORIZONTAL */
    .mobile-menu-toggle {
        display: none;
        /* Hamburger verstecken */
    }

    #mobile-menu-toggle {
        display: none;
    }

    /* Header zentrieren */
    .header-container {
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px;
    }

    /* Navigation wird horizontale Leiste */
    .nav-list {
        display: flex;
        /* Nebeneinander statt untereinander */
        position: static;
        /* Nicht mehr schwebend */
        box-shadow: none;
        padding: 0;
        gap: 24px;
        justify-content: center;
        width: 100%;
    }

    .nav-list li {
        border-bottom: none;
        /* Keine Trennlinien mehr */
    }

    .nav-list a {
        padding: 8px 16px;
    }

    /* BANNER GRÖSSER */
    .hero-banner {
        height: 500px;
    }

    .hero-banner h1 {
        font-size: 56px;
    }

    /* MAIN WRAPPER: ZWEISPALTIG */
    .main-wrapper {
        flex-direction: row;
        /* Nebeneinander statt untereinander */
        align-items: flex-start;
    }

    .content-column {
        flex: 2;
        /* Content nimmt 2 Teile */
    }

    .sidebar-column {
        flex: 1;
        /* Sidebar nimmt 1 Teil */
        position: sticky;
        /* WICHTIG: Sidebar bleibt beim Scrollen sichtbar */
        top: 100px;
        /* Abstand von oben */
    }

    /* BILDER MIT TEXTUMFLUSS */
    .float-left {
        float: left;
        /* Text fließt rechts um Bild */
        margin-right: 32px;
        margin-bottom: 24px;
        max-width: 45%;
    }

    .float-right {
        float: right;
        /* Text fließt links um Bild */
        margin-left: 32px;
        margin-bottom: 24px;
        max-width: 45%;
    }

    /* PORTFOLIO: 2 SPALTEN */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* FOOTER: 2 SPALTEN */
    .footer-container {
        grid-template-columns: repeat(2, 250px);
    }

    .footer-column {
        text-align: left;
        /* Linksbündig auf Tablet */
    }
}


/* ========================================
   26. RESPONSIVE: DESKTOP (ab 1024px)
   Noch größere Schriften und Banner
   ======================================== */

@media (min-width: 1024px) {

    /* Banner noch größer */
    .hero-banner {
        height: 600px;
    }

    .hero-banner h1 {
        font-size: 64px;
    }

    /* Portfolio bleibt 2-spaltig (könnte auch 3 werden) */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer: 3 Spalten */
    .footer-container {
        grid-template-columns: repeat(3, 250px);
    }
}


/* ========================================
   27. PRINT STYLES
   Anpassungen für Drucken/PDF
   ======================================== */

@media print {

    /* Verstecke Navigation, Sidebar, Footer beim Drucken */
    .site-header,
    .sidebar-column,
    .site-footer,
    .mobile-menu-toggle {
        display: none;
    }

    /* Content nutzt volle Breite */
    .content-column {
        width: 100%;
        max-width: none;
    }

    /* Kein Schatten beim Drucken */
    .content-block {
        box-shadow: none;
        page-break-inside: avoid;
        /* Verhindert Seitenumbruch mitten im Block */
    }
}


/* ========================================
   28. BARRIEREFREIHEIT-FEATURES
   Respektiert User-Präferenzen
   ======================================== */

/* Für Nutzer, die Bewegung reduzieren möchten
   (z.B. bei Schwindel oder Epilepsie) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Hoher Kontrast Modus für bessere Sichtbarkeit */
@media (prefers-contrast: high) {
    body {
        color: #000;
        /* Reines Schwarz */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #5a2f1a;
        /* Dunkleres Braun */
    }

    a {
        color: #5a2f1a;
    }
}


/* ========================================
   HOCHZEITS-GALERIE CSS - 2 SPALTEN LAYOUT
   Immer 2 Bilder nebeneinander
   Passt sich automatisch an Quer- und Hochformat an
   ======================================== */


/* ========================================
   GALERIE WRAPPER
   Container für die gesamte Galerie
   ======================================== */

.wedding-gallery-wrapper {
    width: 100%;
    margin-bottom: 48px;
    /* Abstand nach unten */
}


/* ========================================
   GALERIE GRID - IMMER 2 SPALTEN
   Mobile bis Desktop: Immer 2 Bilder nebeneinander
   ======================================== */

.wedding-gallery-grid {
    display: grid;
    /* CSS Grid für Layout */
    grid-template-columns: repeat(2, 1fr);
    /* IMMER 2 Spalten! */
    gap: 12px;
    /* Abstand zwischen Bildern (klein auf Mobile) */
    margin: 0;
    padding: 0;
    grid-auto-rows: auto;
    /* Höhe passt sich automatisch an */
}


/* ========================================
   EINZELNES GALERIE-ITEM
   Container für jedes Foto - FLEXIBLE HÖHE!
   ======================================== */

.wedding-gallery-item {
    position: relative;
    /* Für Overlay-Effekte */
    overflow: hidden;
    /* Bild bleibt innerhalb */
    border-radius: 8px;
    /* Abgerundete Ecken */
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(131, 83, 50, 0.1);
    /* Dezenter Schatten */
    transition: transform 0.3s, box-shadow 0.3s;
    /* Smooth Animation */
}

/* Hover-Effekt: Item hebt sich leicht */
.wedding-gallery-item:hover {
    transform: translateY(-5px);
    /* 5px nach oben */
    box-shadow: 0 8px 20px rgba(131, 83, 50, 0.2);
    /* Stärkerer Schatten */
}


/* ========================================
   GALERIE BILDER - AUTOMATISCHE ANPASSUNG
   Bilder passen sich ihrer natürlichen Größe an!
   Keine feste Höhe - Quer- und Hochformat möglich
   ======================================== */

.wedding-gallery-item img {
    width: 100%;
    /* Volle Breite des Containers */
    height: auto;
    /* WICHTIG: Höhe passt sich an! */
    display: block;
    /* Entfernt Lücke unter Bild */
    object-fit: cover;
    /* Bild füllt Container proportional */
    transition: transform 0.3s;
    /* Smooth Zoom */
    max-height: 400px;
    /* Mobile: Kleineres Maximum */
}

/* Zoom-Effekt beim Hover */
.wedding-gallery-item:hover img {
    transform: scale(1.05);
    /* 5% größer */
}


/* ========================================
   RESPONSIVE: MOBILE (bis 550px)
   2 Spalten bleiben, kleinere Abstände
   ======================================== */

@media (max-width: 550px) {

    /* Grid bleibt 2-spaltig! */
    .wedding-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Weiterhin 2 Spalten */
        gap: 8px;
        /* Noch kleinerer Abstand auf Mobile */
    }

    /* Kleineres Maximum für Mobile */
    .wedding-gallery-item img {
        max-height: 300px;
        /* Kleineres Maximum */
    }

    /* Kleinere Border-Radius auf Mobile */
    .wedding-gallery-item {
        border-radius: 4px;
        /* Weniger abgerundet */
    }
}


/* ========================================
   RESPONSIVE: TABLET (768px - 1023px)
   2 Spalten, größere Abstände und Bilder
   ======================================== */

@media (min-width: 768px) {

    /* Grid bleibt 2-spaltig! */
    .wedding-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Weiterhin 2 Spalten */
        gap: 16px;
        /* Größerer Abstand */
    }

    /* Größeres Maximum für Tablet */
    .wedding-gallery-item img {
        max-height: 500px;
        /* Größeres Maximum */
    }
}


/* ========================================
   RESPONSIVE: DESKTOP (ab 1024px)
   2 Spalten, noch mehr Platz
   ======================================== */

@media (min-width: 1024px) {

    /* Grid bleibt 2-spaltig! */
    .wedding-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Weiterhin 2 Spalten */
        gap: 20px;
        /* Noch größerer Abstand */
    }

    /* Größtes Maximum für Desktop */
    .wedding-gallery-item img {
        max-height: 600px;
        /* Größtes Maximum */
    }
}


/* ========================================
   RESPONSIVE: EXTRA LARGE (ab 1400px)
   2 Spalten, maximaler Komfort
   ======================================== */

@media (min-width: 1400px) {

    /* Grid bleibt 2-spaltig! */
    .wedding-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Weiterhin 2 Spalten */
        gap: 24px;
        /* Maximaler Abstand */
    }

    /* Bilder können größer werden */
    .wedding-gallery-item img {
        max-height: 700px;
        /* Noch größeres Maximum */
    }
}


/* ========================================
   PRINT STYLES
   Galerie optimiert für Drucken
   ======================================== */

@media print {

    /* Galerie kompakter drucken */
    .wedding-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Spalten auch beim Drucken */
        gap: 8px;
        /* Kleiner Abstand */
    }

    .wedding-gallery-item {
        box-shadow: none;
        /* Kein Schatten */
        page-break-inside: avoid;
        /* Kein Umbruch mitten im Bild */
    }

    .wedding-gallery-item img {
        max-height: none;
        /* Keine Höhenbeschränkung */
    }
}


/* ========================================
   BARRIEREFREIHEIT
   Für Nutzer mit speziellen Bedürfnissen
   ======================================== */

/* Reduzierte Bewegung für sensible Nutzer */
@media (prefers-reduced-motion: reduce) {

    .wedding-gallery-item,
    .wedding-gallery-item img {
        transition: none !important;
        /* Keine Animationen */
    }
}

/* Statistik-Boxen in Sidebar */
.stat-box {
    text-align: center;
    padding: 20px;
    background-color: #f5f0e8;
    border-radius: 8px;
    margin-bottom: 16px;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    color: #835332;
    display: block;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: #3a2a1f;
}

/* USP Liste */
.usp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.usp-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e5d3bd;
    font-size: 15px;
    display: flex;
    align-items: flex-start;
}

.usp-list li:last-child {
    border-bottom: none;
}

.usp-list li:before {
    content: "✓";
    color: #835332;
    font-weight: 700;
    margin-right: 12px;
    font-size: 18px;
}

/* Sidebar Liste */
.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-list li {
    padding: 8px 0;
    border-bottom: 1px solid #e5d3bd;
    font-size: 14px;
}

.sidebar-list li:last-child {
    border-bottom: none;
}