/* ========================================
   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: #EFE5DA sand
   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: #C9D7D2;
}

/* 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: #D9B8A8;
    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: #D9B8A8;
    color: #000;
    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 #000000; /* 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: #000000; /* 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: #7f2b2b; /* 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: #000000; /* 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: #C9D7D2; /* Header-Farbe */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #000000;
    /* GEÄNDERT: Kein sticky mehr - scrollt normal mit */
    position: relative;
    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: #000000;
    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: #C9D7D2; /* Gleiche Farbe wie Header */
    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 #000000; /* 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: #000000;
    transition: background-color 0.3s;
    text-align: center;
}

/* Hover-Effekt für Menü-Links */
.nav-list a:hover,
.nav-list a:focus {
    background-color: #d5d5d5; /* 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: #F2E7DD;
    padding: 32px;
    margin-bottom: 32px;
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid #000000;
    /* 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: #000000;
    border-bottom: 3px solid #000000; /* Dekorative Unterstreichung */
    padding-bottom: 16px;
    margin-bottom: 32px;
}

/* Großer Einleitungstext */
.lead-text {
    font-size: 18px;
    color: #000000;
    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(0, 0, 0, 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: #000000;
}

/* ========================================
   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: #000000;
    color: #f5f0e8;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

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

.btn-audio:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.6);
    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: #F2E7DD;
    padding: 24px;
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid #000000;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

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

/* ========================================
   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: #fff;
    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: #000000;
    min-width: 30px; /* Verhindert Quetschen */
}

/* Text-Inhalt */
.contact-info-content {
    flex: 1;
    text-align: center;
}

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

.contact-info-content a {
    color: #000000;
    font-weight: 600;
    text-align: center;
}

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

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

.news-block {
    background-color: #F2E7DD;
}

.news-item {
    padding: 16px;
    border-left: 3px solid #000000; /* 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: 18px;
    color: #000000;
    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: #000000;
    font-variant-numeric: tabular-nums; /* Feste Breite für Zahlen */
}

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

/* ========================================
   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: #000000;
}

/* ========================================
   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: 800;
    color: #000000;
    margin-top: 16px;
}

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

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

.footer-container {
    display: grid;
    /* GEÄNDERT: Gleichmäßige Verteilung statt fester 250px */
    grid-template-columns: repeat(3, 1fr); /* 3 gleich breite Spalten */
    gap: 32px;
    padding: 64px 24px; /* Etwas mehr Padding links/rechts */
    background-color: #C9D7D2;
    border-radius: 8px;
    max-width: 1200px; /* Maximale Breite wie Container */
    margin: 0 auto; /* Zentriert */
}

.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: #717171;
    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: #9d0000;
    font-weight: bold;
}

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

.site-footer {
    background-color: #C9D7D2;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    border-top: 1px solid #000000;
}

.footer-legal {
    margin-top: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid #000000;
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
    background-color: #C9D7D2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.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 {
        /* GEÄNDERT: 2 gleichmäßig verteilte Spalten */
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    /* 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 */
        /* GEÄNDERT: Sidebar nicht mehr sticky */
        position: relative;
    }

    /* 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 - gleichmäßig */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .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 - gleichmäßig */
    .footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   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: #000000; /* Dunkleres Braun */
    }

    a {
        color: #a60000;
    }
}

/* ========================================
   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: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
}

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

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

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

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

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

.usp-list li:before {
    content: "✓";
    color: #000000;
    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 #000000;
    font-size: 14px;
}

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

/* ========================================
   PREISSEITEN-SPEZIFISCHE STYLES
   Styles für die Hochzeitsfotograf-Preisseite
======================================== */

/* ========================================
   ZWEI BILDER NEBENEINANDER
   Grid-Layout für zwei Bilder
======================================== */

.two-images-grid {
    display: grid; /* CSS Grid für flexibles Layout */
    grid-template-columns: repeat(2, 1fr); /* 2 gleichgroße Spalten */
    gap: 20px; /* Abstand zwischen den Bildern */
    margin: 40px 0; /* Abstand oben und unten */
}

/* Bilder im Grid */
.two-images-grid img {
    width: 100%; /* Volle Breite der Spalte */
    height: auto; /* Höhe passt sich an */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 8px rgba(131, 83, 50, 0.1); /* Dezenter Schatten */
}

/* ========================================
   PREISPAKETE GRID
   Desktop: 2 Spalten
   Mobile: 1 Spalte (siehe Media Query unten)
======================================== */

.pricing-grid {
    display: grid; /* CSS Grid für Paket-Layout */
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Desktop */
    gap: 20px; /* Abstand zwischen Paketen */
    margin-top: 30px; /* Abstand zum vorherigen Element */
}

/* ========================================
   EINZELNES PREISPAKET
   Styling für jede Paket-Box
======================================== */

.pricing-box {
    background-color: #fff; /* Weißer Hintergrund */
    border-radius: 12px; /* Abgerundete Ecken */
    padding: 30px 24px; /* Innenabstand */
    box-shadow: 0 4px 12px rgba(131, 83, 50, 0.15); /* Schatten für Tiefe */
    border: 2px solid black; /* Sichtbarer Border in Markenfarbe */
    position: relative; /* Für absolut positionierte Kinder (Badge) */
}

/* FEATURED PAKET - Besondere Hervorhebung */
.pricing-box.featured {
    border-color: black; /* Sichtbarer Border von Anfang an */
}

/* Badge für "Beliebtestes Paket" */
.featured-badge {
    position: absolute; /* Absolut positioniert über der Box */
    top: -12px; /* Ragt oben raus */
    left: 50%; /* Horizontal mittig */
    transform: translateX(-50%); /* Perfekte Zentrierung */
    background-color: red; /* Markenfarbe */
    color: #f5f0e8; /* Helle Schrift */
    padding: 6px 20px; /* Innenabstand */
    border-radius: 20px; /* Pill-Form */
    font-size: 12px; /* Kleine Schrift */
    font-weight: 700; /* Fett */
    text-transform: uppercase; /* GROSSBUCHSTABEN */
}

/* ========================================
   PREIS HEADER
   Titel und Preis des Pakets
======================================== */

.price-header {
    text-align: center; /* Zentriert */
    margin-bottom: 24px; /* Abstand nach unten */
    border-bottom: 2px solid black; /* Trennlinie */
    padding-bottom: 16px; /* Abstand zur Trennlinie */
}

/* Paket-Titel (z.B. "Basis", "Premium") */
.package-title {
    font-size: 24px;
    font-weight: 700; /* Fett */
    color: darkgrey; /* Markenfarbe */
    margin-bottom: 8px; /* Abstand nach unten */
}

/* Preis (z.B. "990€") */
.package-price {
    font-size: 36px; /* Große Schrift */
    font-weight: 700; /* Fett */
    color: black; /* Dunkle Textfarbe */
}

/* Preisnotiz (z.B. "inkl. 19% MwSt.") */
.package-price-note {
    font-size: 14px; /* Kleine Schrift */
    color: black; /* Dezente Farbe */
    margin-top: 4px; /* Kleiner Abstand nach oben */
}

/* ========================================
   FEATURE LISTE
   Liste der enthaltenen Leistungen
======================================== */

.feature-list {
    list-style: none; /* Keine Standard-Bulletpoints */
    padding: 0;
    margin: 0 0 24px 0; /* Abstand nach unten */
}

/* Einzelnes Feature in der Liste */
.feature-list li {
    padding: 10px 0; /* Vertikaler Abstand */
    border-bottom: 1px solid gray; /* Trennlinie */
    font-size: 15px;
    color: #3a2a1f;
    display: flex; /* Flexbox für Checkmark */
    align-items: flex-start; /* Oben ausrichten */
}

/* Letztes Element ohne Trennlinie */
.feature-list li:last-child {
    border-bottom: none;
}

/* Checkmark vor jedem Feature */
.feature-list li:before {
    content: "✓"; /* Checkmark-Symbol */
    color: gray; /* Markenfarbe */
    font-weight: 700; /* Fett */
    margin-right: 12px; /* Abstand zum Text */
    font-size: 18px;
}

/* ========================================
   FAQ BEREICH
   Häufig gestellte Fragen
======================================== */

.faq-item {
    margin-bottom: 24px; /* Abstand zwischen FAQ-Items */
    padding-bottom: 24px; /* Abstand zur Trennlinie */
    border-bottom: 1px solid gray; /* Trennlinie */
}

/* Letztes FAQ-Item ohne Trennlinie */
.faq-item:last-child {
    border-bottom: none;
}

/* FAQ-Frage */
.faq-question {
    font-size: 18px;
    font-weight: 700; /* Fett */
    color: black; /* Markenfarbe */
    margin-bottom: 12px; /* Abstand zur Antwort */
}

/* FAQ-Antwort */
.faq-answer {
    color: #969696; /* Dunkle Textfarbe */
    line-height: 24px; /* Guter Zeilenabstand */
    margin-bottom: 0;
}

/* ========================================
   PROZESS-SCHRITTE
   Ablauf der Buchung
======================================== */

.process-steps {
    display: grid; /* Grid für Schritte */
    gap: 20px; /* Abstand zwischen Schritten */
}

/* Einzelner Schritt */
.process-step {
    display: flex; /* Flexbox für Nummer + Content */
    gap: 16px; /* Abstand zwischen Nummer und Text */
    align-items: flex-start; /* Oben ausrichten */
}

/* Schrittnummer (runder Kreis) */
.step-number {
    flex-shrink: 0; /* Verhindert Schrumpfen */
    width: 40px;
    height: 40px;
    background-color: #fff; /* Markenfarbe */
    color: #f5f0e8; /* Helle Schrift */
    border-radius: 50%; /* Perfekter Kreis */
    display: flex;
    align-items: center; /* Vertikal zentriert */
    justify-content: center; /* Horizontal zentriert */
    font-weight: 700; /* Fett */
    font-size: 18px;
}

/* Schritt-Titel (h4) */
.step-content h4 {
    font-size: 18px;
    color: black; /* Markenfarbe */
    margin-bottom: 8px; /* Abstand zum Text */
    font-weight: 700; /* Fett */
}

/* Schritt-Beschreibung */
.step-content p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 22px;
}

/* ========================================
   TESTIMONIAL / KUNDENSTIMME
======================================== */

.testimonial {
    background-color: #fff; /* Heller Hintergrund */
    padding: 24px; /* Innenabstand */
    border-radius: 8px; /* Abgerundete Ecken */
    border-left: 4px solid black; /* Farbiger Akzent links */
    margin-bottom: 24px; /* Abstand nach unten */
}

/* Testimonial-Text (Zitat) */
.testimonial-text {
    font-size: 16px;
    font-style: italic; /* Kursiv */
    color: black;
    margin-bottom: 12px; /* Abstand zum Autor */
    line-height: 24px; /* Guter Zeilenabstand */
}

/* Testimonial-Autor */
.testimonial-author {
    font-weight: 700; /* Fett */
    color: black; /* Markenfarbe */
    font-size: 18px;
}

/* ========================================
   SIDEBAR - ZUSÄTZLICHE STYLES
   Spezifische Styles für die Preisseite
======================================== */

/* Button-Abstand in der Sidebar */
.sidebar-button-spacing {
    margin-top: 20px;
}

/* Verfügbarkeits-Block */
.availability-block {
    background-color: #F2E7DD; /* Heller Hintergrund */
    border-left: 4px solid black; /* Farbiger Akzent */
}

/* Verfügbarkeits-Text */
.availability-text {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 22px;
}

/* Hervorhebung in Verfügbarkeit */
.availability-strong {
    color: black; /* Markenfarbe */
}

/* Verfügbarkeits-Notiz */
.availability-note {
    margin-bottom: 0;
    font-size: 18px;
    color: black;
    font-style: bold; /* Dunklere Farbe */
}

/* Öffnungszeiten-Text */
.opening-hours-text {
    margin-bottom: 12px;
}

/* Letzter Öffnungszeiten-Text ohne Abstand */
.opening-hours-text-last {
    margin-bottom: 0;
}

/* CTA-Button-Abstand */
.cta-button-spacing {
    margin-top: 30px;
}

/* ========================================
   FOOTER STYLES FÜR PREISSEITE
   Zusätzliche Footer-Styles
======================================== */

/* Footer-Titel */
.footer-title {
    font-size: 20px;
    font-weight: 700; /* Fett */
    color: black; /* Markenfarbe */
    margin-bottom: 16px; /* Abstand nach unten */
    padding-top: 25px; /* Abstand nach oben */
}

/* Alternative Footer-Überschriften */
.site-footer h4 {
    font-size: 20px;
    font-weight: 700; /* Fett */
    color: black; /* Markenfarbe */
    margin-bottom: 16px; /* Abstand nach unten */
    padding-top: 25px; /* Abstand nach oben */
}

/* ========================================
   RESPONSIVE - MOBILE
   Pakete werden untereinander angezeigt
   Sidebar scrollt normal (nicht sticky)
======================================== */

@media (max-width: 768px) {
    /* Hauptinhalt wird einspaltig */
    .main-wrapper {
        flex-direction: column; /* Untereinander statt nebeneinander */
    }

    /* Content und Sidebar volle Breite */
    .content-column,
    .sidebar-column {
        flex: 0 0 100%; /* 100% Breite */
    }

    /* Sidebar NICHT sticky auf Mobile */
    .sidebar-column {
        position: relative; /* Normal scrollend */
        top: auto; /* Keine fixierte Position */
    }

    /* WICHTIG: Preispakete untereinander auf Mobile */
    .pricing-grid {
        grid-template-columns: 1fr; /* NUR 1 Spalte */
        gap: 24px; /* Größerer Abstand zwischen Paketen */
    }

    /* Zwei Bilder auch untereinander auf Mobile */
    .two-images-grid {
        grid-template-columns: 1fr; /* 1 Spalte */
        gap: 24px; /* Größerer Abstand */
    }

    /* Kleinere Preisschrift auf Mobile */
    .package-price {
        font-size: 32px;
    }

    /* Kleinere Section-Titel auf Mobile */
    .section-title {
        font-size: 26px;
    }

    /* Umflossenes Bild wird volle Breite */
    .float-image {
        float: none; /* Kein Float mehr */
        max-width: 100%; /* Volle Breite */
        margin: 0 0 20px 0; /* Nur Abstand nach unten */
    }
}

/* ========================================
   ABLAUF-SEITE: TIMELINE
   Visueller Ablauf mit Linie und Punkten
======================================== */

.timeline {
    position: relative;
    padding-left: 50px;
}

.timeline:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #835332;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-dot {
    position: absolute;
    left: -30px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #835332;
    border: 4px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.timeline-dot.big {
    width: 28px;
    height: 28px;
    left: -34px;
    top: 2px;
}

/* ========================================
   ABLAUF-SEITE: ICON-BOX
   Box für wichtige Hinweise mit Icon
======================================== */

.icon-box {
    display: flex;
    gap: 16px;
    padding: 20px;
    background-color: #f5f0e8;
    border-radius: 8px;
    border-left: 4px solid #835332;
    margin-bottom: 20px;
}

.icon-box-icon {
    flex-shrink: 0;
    font-size: 32px;
}

.icon-box-content h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
    color: #835332;
}

.icon-box-content p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 22px;
}

/* ========================================
   ABLAUF-SEITE: HIGHLIGHT-BOX
   Box für besonders wichtige Infos
======================================== */

.highlight-box {
    background: linear-gradient(135deg, #835332 0%, #6d4429 100%);
    color: #f5f0e8;
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.highlight-box h3 {
    color: #f5f0e8;
    margin-top: 0;
}

.highlight-box p {
    margin-bottom: 0;
    line-height: 24px;
}

/* ========================================
   ABLAUF-SEITE: CHECK-LISTE
   Liste mit Checkmarks
======================================== */

.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.check-list li {
    padding: 8px 0;
    display: flex;
    align-items: flex-start;
}

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

/* ========================================
   ABLAUF-SEITE: TWO-COLUMN-GRID
   Zwei Container nebeneinander für Ablauf-Seite
======================================== */

.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

/* ========================================
   ABLAUF-SEITE: RESPONSIVE
   Mobile Anpassungen für Ablauf-Elemente
======================================== */

@media (max-width: 768px) {
    .two-column-grid {
        grid-template-columns: 1fr;
    }

    .timeline {
        padding-left: 40px;
    }

    .timeline:before {
        left: 15px;
    }

    .timeline-dot {
        left: -25px;
    }

    .timeline-dot.big {
        left: -29px;
    }
}