/* =========================================================
   RESET & BODY
   ========================================================= */

/* Alles auf Box-Sizing border-box setzen & Standardabstände entfernen */
* {
    box-sizing: border-box; /* Padding & Border werden in Breite/Höhe eingerechnet */
    margin: 0;              /* Entfernt Standard-Außenabstand aller Elemente */
    padding: 0;             /* Entfernt Standard-Innenabstand aller Elemente */
    -webkit-tap-highlight-color: transparent; /* Entfernt blauen Tap-Effekt auf Mobile */
}

/* Body-Grundeinstellungen */
body {
    font-family: "Segoe UI", sans-serif; /* Schriftart der gesamten Seite */
    line-height: 1.6;                    /* Zeilenabstand für bessere Lesbarkeit */
    color: #1a1a1a;                      /* Standard-Textfarbe (dunkelgrau) */
    background: #CFCFCF;                 /* Seitenhintergrund grau */
    -webkit-user-select: none;            /* Text kann in Chrome/Safari nicht markiert werden */
    -moz-user-select: none;               /* Text kann in Firefox nicht markiert werden */
    -ms-user-select: none;                /* Text kann in alten IE/Edge nicht markiert werden */
    user-select: none;                    /* Standard: Text nicht markierbar */
}

/* Input und Textarea dürfen Text markieren */
input, textarea {
    user-select: text;
}

/* Standard-Buttons */
.btn-primary {
    user-select: none; /* Button-Text nicht markierbar */
    cursor: pointer;   /* Mauszeiger wird zur Hand */
}

/* Globale Farbvariable */
:root {
    --main-gradient: linear-gradient(135deg, #800001, #eaa983, #800001); /*Farbverlauf für alle Kacheln*/
}


/* =========================================================
   NAVBAR
   ========================================================= */

/* Navbar-Styling */
.navbar {
    position: fixed; /* Navbar bleibt oben beim Scrollen */
    width: 100%;     /* Volle Breite */
    top: 0;          /* Ganz oben positioniert */
    background: var(--main-gradient); /* Farbverlauf */
    backdrop-filter: blur(6px); /* Hintergrund leicht unscharf (Glas-Effekt) */
    z-index: 1000; /* Liegt über anderen Elementen */
}

/* Navbar Container */
.navbar-container {
    max-width: 1400px; /* Inhalt nicht breiter als 1400px */
    margin: auto;      /* Zentriert */
    padding: 15px 20px; /* Innenabstand */
    display: flex; /* Flexbox Layout */
    justify-content: space-between; /* Logo links, Menü rechts */
    align-items: center; /* Vertikal zentriert */
}

/* Logo */
.logo {
    color: #fff; /* Logo-Text weiß */
    font-weight: 700; /* Fett */
    font-size: 1.4rem; /* Größe */
}

/* Navigation */
.nav-menu {
    list-style: none; /* Keine Aufzählungspunkte */
    display: flex; /* Menü nebeneinander */
    gap: 25px; /* Abstand zwischen Links */
}

/* Navigation Links */
.nav-menu a {
    color: #fff; /* Linkfarbe weiß */
    text-decoration: none; /* Keine Unterstreichung */
    font-weight: 500; /* Halb-fett */
}

/* Hamburger Menü für Mobile */
.navbar-toggle {
    display: none; /* Standard unsichtbar (nur mobil sichtbar) */
    color: #fff; /* Farbe */
    font-size: 1.6rem; /* Größe */
    cursor: pointer; /* Klickbar */
}



/* =========================================================
   HERO SECTION
   ========================================================= */

/* Hero Bereich */
.hero {
    position: relative; /* Bezugspunkt für Overlay */
    background-image: url('images/Design/hero-bg.jpg'); /* Hintergrundbild */
    background-size: cover; /* Bild füllt Bereich */
    background-position: center; /* Bild zentriert */
    background-repeat: no-repeat; /* Nicht wiederholen */
    min-height: 400px; /* Mindesthöhe */
    display: flex; /* Flexbox */
    align-items: center; /* Vertikal zentriert */
    justify-content: center; /* Horizontal zentriert */
    color: #ffffff; /* Textfarbe weiß */
    text-align: center; /* Text mittig */
    padding: 80px 20px; /* Innenabstand */
}

/* Overlay über Hero */
.hero::after {
    content: ""; /* Pseudo-Element */
    position: absolute; /* Über Hero legen */
    inset: 0; /* Füllt gesamten Bereich */
    background: rgba(0,0,0,0.35); /* Dunkles Overlay */
    z-index: 0; /* Hinter Inhalt */
}

/* Hero Content */
.hero .hero-content {
    position: relative; /* Über Overlay */
    z-index: 1; /* Vordergrund */
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

/* Hero Call-to-Action Button */
.hero .btn-primary {
    display: inline-block; /* Inline-Block für Padding & Breite */
    background: var(--main-gradient); /* Farbverlauf aus Root-Variable */
    color: #ffffff; /* Textfarbe weiß */
    font-weight: bold; /* Schrift fett */
    padding: 12px 28px; /* Innenabstand oben/unten & links/rechts */
    border-radius: 30px; /* Runde Ecken */
    text-decoration: none; /* Keine Unterstreichung */
    font-size: 1.1rem; /* Schriftgröße */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Leichter Schatten */
    transition: all 0.3s ease; /* Sanfte Übergänge bei Hover */
    margin-top: 20px; /* Abstand nach oben */
}

/* Hover-Effekt für Hero Button */
.hero .btn-primary:hover {
    background: var(--main-gradient); /* Farbverlauf bleibt gleich */
    transform: translateY(-3px); /* Leicht nach oben bewegen */
    box-shadow: 0 6px 18px rgba(0,0,0,0.35); /* Schatten verstärken */
}


/* =========================================================
   MAIN & SECTIONS
   ========================================================= */

/* Main Container */
main {
    max-width: 1400px; /* Maximalbreite des Inhalts */
    margin: auto; /* Zentrieren des Inhalts */
    padding: 60px 20px; /* Innenabstand */
}

/* Alle Sektionen */
section {
    margin-bottom: 80px; /* Abstand nach unten */
    scroll-margin-top: 90px; /* Scroll-Offset für Navbar */
}

/* Smooth Scroll für Links */
html {
    scroll-behavior: smooth; /* Sanftes Scrollen */
}

/* Überschriften H2 */
h2 {
    font-size: 2rem; /* Schriftgröße */
    margin-bottom: 20px; /* Abstand unterhalb der Überschrift */
    text-align: center; /* Zentriert */
}



/* =========================================================
   INTRO SECTION
   ========================================================= */

.intro {
    max-width: 900px; /* Max-Breite für Text */
    margin: auto; /* Zentriert */
    text-align: center; /* Text zentriert */
    margin-bottom: 100px; /* Abstand zur nächsten Sektion */
}


/* =========================================================
   SERVICES GRID
   ========================================================= */

/* Grid Wrapper für Services */
.services-grid {
    display: flex; /* Flexbox */
    flex-wrap: wrap; /* Zeilenumbruch erlaubt */
    justify-content: center; /* Zentriert letzte Reihe */
    gap: 20px; /* Abstand zwischen Karten */
    max-width: 1300px; /* Maximalbreite */
    margin: 0 auto; /* Zentriert */
}

/* Einzelne Service-Karte */
.service-card {
    flex: 0 1 calc(20% - 16px); /* Flexbasis + Lückenabzug für 5 Karten/Row */
    max-width: calc(20% - 16px); /* Max-Breite */
    background: var(--main-gradient); /* Farbverlauf */
    color: #fff; /* Textfarbe weiß */
    border-radius: 12px; /* Runde Ecken */
    padding: 20px; /* Innenabstand */
    text-align: center; /* Text zentriert */
    display: flex; /* Flex für Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    min-height: 110px; /* Einheitliche Höhe */
    font-weight: 600; /* Text halb-fett */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Leichter Schatten */
    transition: all 0.3s ease; /* Sanfte Übergänge */
}

/* Hover Effekt für Service-Karten */
.service-card:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.2); /* Stärkerer Schatten */
    transform: translateY(-5px); /* Leicht nach oben */
}

/* Service Überschrift */
.service-card h3 {
    margin-bottom: 10px; /* Abstand unter Überschrift */
    color: #ffffff; /* Textfarbe weiß */
}

/* Service Text */
.service-card p {
    font-size: 0.95rem; /* Kleinere Schrift */
}


/* Tablet Layout */
@media (max-width: 1100px) {
    .service-card {
        flex: 0 1 calc(33.333% - 16px); /* 3 Karten pro Reihe */
        max-width: calc(33.333% - 16px);
    }
}

/* Mobile Layout */
@media (max-width: 700px) {
    .service-card {
        flex: 0 1 calc(50% - 16px); /* 2 Karten pro Reihe */
        max-width: calc(50% - 16px);
    }
}

/* Kleinste Displays */
@media (max-width: 400px) {
    .service-card {
        flex: 0 1 100%; /* 1 Karte pro Reihe */
        max-width: 100%;
    }
}


/* =========================================================
   TRUST SECTION
   ========================================================= */

/* Wrapper für Trust */
.trust {
    background: var(--main-gradient); /* Farbverlauf */
    color: white; /* Textfarbe weiß */
    padding: 50px 20px; /* Innenabstand */
    border-radius: 12px; /* Runde Ecken */
}

/* Boxen innerhalb Trust */
.trust-box {
    max-width: 1000px; /* Max-Breite */
    margin: auto; /* Zentriert */
    display: flex; /* Flexbox */
    justify-content: space-around; /* Abstand zwischen Boxen */
    flex-wrap: wrap; /* Zeilenumbruch erlaubt */
    gap: 20px; /* Abstand zwischen Boxen */
    font-size: 1.1rem; /* Schriftgröße */
    text-align: center; /* Text mittig */
}


/* =========================================================
   GALLERY SECTION
   ========================================================= */

/* Tabs Wrapper */
.tabs {
    display: flex; /* Flexbox für horizontale Tabs */
    gap: 10px; /* Abstand zwischen Tabs */
    flex-wrap: wrap; /* Zeilenumbruch, falls zu viele Tabs */
    margin-bottom: 20px; /* Abstand zum darunterliegenden Inhalt */
    justify-content: center; /* Tabs zentriert */
}

/* GALERIE TABS – STANDARD (INAKTIV) */
.tab-btn {
    background: #ffffff; /* Hintergrundfarbe weiß */
    color: #000000; /* Textfarbe schwarz */
    border: 2px solid #e0e0e0; /* Hellgrauer Rand */
    padding: 10px 22px; /* Innenabstand oben/unten & links/rechts */
    border-radius: 24px; /* Runde Tabs */
    font-weight: 600; /* Text halb-fett */
    cursor: pointer; /* Zeiger bei Hover */
    transition: all 0.5s ease; /* Sanfte Übergänge */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Leichter Schatten */
    display: inline-flex; /* Inline-flex für zentrierten Inhalt */
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
}

/* Hover-Effekt für Tabs wie Service-Karten */
.tab-btn:hover {
    transform: translateY(-5px); /* Leicht nach oben bewegen */
    box-shadow: 0 10px 15px rgba(0,0,0,0.2); /* Sanfter Schatten */
    border-color: #800001; /* Bestehende Randfarbe beibehalten */
}


/* Aktiver Tab */
.tab-btn.active {
    background: var(--main-gradient); /* Farbverlauf */
    color: #ffffff; /* Textfarbe weiß */
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.25); /* Innerer Schatten */
}



/* ===== TAB CONTENT FADE IN ===== */

/* Alle Tab Contents standardmäßig versteckt */
.tab-content {
    display: none; /* Nicht sichtbar */
    opacity: 0; /* Transparenz auf 0 */
    transform: translateY(8px); /* Leichte Verschiebung nach unten */
}

/* Aktiver Tab Content */
.tab-content.active {
    display: block; /* Sichtbar */
    animation: fadeTab 0.5s ease forwards; /* Sanftes Einblenden */
}

/* Keyframes für fadeTab Animation */
@keyframes fadeTab {
    to {
        opacity: 1; /* Voll sichtbar */
        transform: translateY(0); /* Position normal */
    }
}


/* =========================================================
   GALLERY THUMBNAILS
   ========================================================= */

/* Gallery Wrapper */
.gallery {
    display: flex; /* Flexbox Layout */
    flex-wrap: wrap; /* Zeilenumbruch */
    justify-content: center; /* Thumbnails zentriert */
    gap: 15px; /* Abstand zwischen Bildern */
    max-width: 1300px; /* Maximalbreite */
    margin: 0 auto; /* Zentrieren */
}

/* Einzelne Links in der Galerie */
.gallery a {
    flex: 0 0 calc(20% - 12px); /* 5 pro Reihe */
    max-width: calc(20% - 12px); /* Maximalbreite */
}

/* Bilder in der Galerie */
.gallery img {
    width: 100%; /* Bild füllt Container */
    height: 180px; /* Feste Höhe */
    object-fit: cover; /* Bild skalieren und zuschneiden */
    border-radius: 12px; /* Abgerundete Ecken */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover-Effekt */
}

/* Hover-Effekt auf Galerie-Bildern */
.gallery a:hover img {
    transform: scale(1.05); /* Leicht vergrößern */
    box-shadow: 0 6px 15px rgba(0,0,0,0.3); /* Schatten hinzufügen */
}

/* Tablet Layout für Galerie */
@media (max-width: 1100px) {
    .gallery a {
        flex: 0 0 calc(25% - 12px); /* 4 pro Reihe */
        max-width: calc(25% - 12px);
    }
}

/* Mobile Layout für Galerie */
@media (max-width: 800px) {
    .gallery a {
        flex: 0 0 calc(33.333% - 12px); /* 3 pro Reihe */
        max-width: calc(33.333% - 12px);
    }
}

/* Kleine Smartphones */
@media (max-width: 500px) {
    .gallery a {
        flex: 0 0 calc(50% - 12px); /* 2 pro Reihe */
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 350px) {
    .gallery a {
        flex: 0 0 100%; /* 1 pro Reihe */
        max-width: 100%;
    }
}


/* =========================================================
   CONTACT SECTION
   ========================================================= */

/* Kontaktbereich Wrapper */
.contact {
    background: var(--main-gradient); /* Farbverlauf */
    padding: 60px 20px; /* Innenabstand */
    border-radius: 12px; /* Runde Ecken */
}

/* Kontakt Row */
.contact-row {
    display: flex; /* Flexbox */
    align-items: center; /* Vertikal zentriert */
    gap: 40px; /* Abstand zwischen Boxen */
    max-width: 1000px; /* Maximalbreite */
    margin: 0 auto; /* Zentriert */
}

/* Kontakt Box */
.contact-box {
    flex: 1; /* Nimmt verfügbaren Platz ein */
    text-align: left; /* Text linksbündig */
    color: #fff; /* Textfarbe weiß */
}

/* Links in Kontakt Box */
.contact-box a {
    color: #fff; /* Textfarbe weiß */
    text-decoration: none; /* Keine Unterstreichung */
    transition: 0.3s; /* Sanfter Übergang */
}

/* Hover-Effekt für Links */
.contact-box a:hover {
    text-decoration: underline; /* Unterstreichen */
}

/* Kontaktbild */
.contact-image {
    flex-shrink: 0; /* Bild schrumpft nicht */
}

.contact-image img {
    max-width: 320px; /* Maximalbreite */
    width: 100%; /* Füllt Container */
    height: auto; /* Höhe proportional */
    /* border-radius: 12px; optional */
    /* box-shadow: 0 8px 25px rgba(0,0,0,0.25); optional */
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    text-align: center; /* Text zentriert */
    padding: 30px 20px; /* Innenabstand */
    color: #666; /* Graue Schriftfarbe */
    font-size: 0.95rem; /* Schriftgröße */
    line-height: 1.5; /* Zeilenhöhe */
}

/* Besucherzähler im Footer */
footer .visitor-counter {
    display: inline-flex; /* Inline-flex für Text+Icon */
    align-items: center; /* Vertikal zentriert */
    justify-content: center; /* Zentriert */
    background: #ffffff; /* Hintergrund weiß */
    color: #ffb703; /* Textfarbe gelb-orange */
    font-weight: bold; /* Fett */
    padding: 6px 16px; /* Innenabstand */
    border-radius: 50px; /* Runde Ecken */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Schatten */
    font-size: 0.95rem; /* Schriftgröße */
    gap: 6px; /* Abstand zwischen Icon & Text */
    animation: fadeIn 1s ease; /* Einblendanimation */
    margin-bottom: 8px; /* Abstand unter Counter */
}

/* Besucher Icon vor Counter */
footer .visitor-counter::before {
    content: "👤"; /* Icon */
    font-size: 1.2rem; /* Größe Icon */
}

/* Letzte Aktualisierung */
footer .last-updated {
    color: #999; /* Grauer Text */
    font-size: 0.85rem; /* Schriftgröße kleiner */
    margin-top: 4px; /* Abstand zum Counter */
}


/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    /* Navbar auf Mobilgeräten */
    .nav-menu {
        display: none; /* ausgeblendet, bis Button geklickt wird */
        flex-direction: column;
        background: var(--main-gradient);
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        border-radius: 0 0 12px 12px;
        padding: 15px 0;
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
		align-items: center; /* Zentriert die Links horizontal */
		text-align: center;  /* Text in Links zentrieren */
    }
	
	.nav-menu li {
    width: 100%;
    margin: 10px 0; /* optional: Abstand zwischen den Links */
}

.nav-menu a {
    display: block;
    width: 100%;
}
    /* Navbar aktiv */
    .nav-menu.active {
        display: flex; /* Anzeigen bei Toggle */
    }

	.navbar-toggle {
        display: block; /* macht Button sichtbar */
    }
	
	.navbar-toggle:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 18px rgba(0,0,0,0.35);
	}
	
	.lightbox-overlay img {
        position: relative; /* Bild nicht absolut */
        max-width: 90%;
        max-height: 70vh;
    }

    .lightbox-arrow-container {
        display: none !important; /* Pfeile komplett ausblenden auf Mobil */
    }
	

    /* Hero Überschrift mobil */
    .hero-content h1 {
        font-size: 2.2rem; /* Schriftgröße anpassen */
    }

    /* Kontaktbereich mobil */
    .contact-row {
        flex-direction: column; /* Vertikale Anordnung */
        text-align: center; /* Zentriert */
    }

    .contact-box {
        text-align: center; /* Text zentriert */
    }

    .contact-image img {
        max-width: 260px; /* Bild kleiner */
        margin-top: 25px; /* Abstand nach oben */
    }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */

/* Lightbox Overlay */
.lightbox-overlay {
    position: fixed; /* Immer sichtbar */
    inset: 0; /* Volle Fläche */
    background: rgba(0,0,0,0.9); /* Dunkler Hintergrund */
    display: flex; /* Flexbox */
    align-items: center; /* Vertikal zentriert */
    justify-content: center; /* Horizontal zentriert */
    z-index: 9999; /* Über allen Elementen */
}

/* Lightbox Bild */
.lightbox-overlay img {
    transition: none; /* Animation via keyframes */
    display: block;
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    position: absolute; /* Damit wir die Animation verschieben können */
}

/* Lightbox Navigationspfeile */
.lightbox-arrow {
    position: absolute; /* Position absolut */
    top: 50%; /* Vertikal mittig */
    transform: translateY(-50%); /* Genau mittig */
    font-size: 3rem; /* Größe Pfeil */
    color: white; /* Farbe weiß */
    cursor: pointer; /* Klickbar */
    padding: 0 15px; /* Abstand links/rechts */
    opacity: 0.7; /* Leichte Transparenz */
    user-select: none; /* Nicht markierbar */
    transition: opacity 0.2s; /* Sanfte Übergänge */
	
	animation: pulseArrow 2s infinite ease-in-out; /* Pulsieren */
}

.lightbox-arrow:hover {
    opacity: 1; /* Volle Deckkraft beim Hover */
	transform: translateY(-50%) scale(1.2); /* Vergrößern beim Hover */
}

@keyframes pulseArrow {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.5); }
}

.lightbox-arrow.prev { left: 20%; top: 50%;} /* Pfeil links */
.lightbox-arrow.next { right: 20%; top: 50%;} /* Pfeil rechts */

/* Spinner für Lightbox Ladeanzeige */
.lightbox-spinner {
    position: absolute; /* Absolut im Overlay */
    border: 8px solid #f3f3f3; /* Grauer Kreis */
    border-top: 8px solid #3498db; /* Blaue Spitze */
    border-radius: 50%; /* Kreisförmig */
    width: 60px; /* Breite */
    height: 60px; /* Höhe */
    animation: spin 1s linear infinite; /* Dauerdrehung */
    top: 50%; /* Vertikal mittig */
    left: 50%; /* Horizontal mittig */
    transform: translate(-50%, -50%); /* Genau mittig */
}

/* Spin Animation */
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); } /* Startwinkel */
    to   { transform: translate(-50%, -50%) rotate(360deg); } /* Endwinkel */
}

/* Fade In Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); } /* Start */
    to { opacity: 1; transform: translateY(0); } /* Ende */
}

/* Slide Out nach links */
@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

/* Slide In von rechts */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Slide Out nach rechts */
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* Slide In von links */
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* =========================================================
   IMPRESSUM MODAL
   ========================================================= */

/* Modal Overlay */
.modal {
    display: none; /* Standard unsichtbar */
    position: fixed; /* Immer sichtbar */
    z-index: 3000; /* Über anderen Elementen */
    left: 0; /* Ganz links */
    top: 0; /* Ganz oben */
    width: 100%; /* Volle Breite */
    height: 100%; /* Volle Höhe */
    background: rgba(0,0,0,0.6); /* Halbtransparent schwarz */
}

/* Modal Content Box */
.modal-content {
    background: #fff; /* Hintergrund weiß */
    margin: 6% auto; /* Zentriert vertikal & horizontal */
    padding: 25px; /* Innenabstand */
    max-width: 700px; /* Maximalbreite */
    width: 90%; /* Breite 90% auf kleineren Displays */
    border-radius: 10px; /* Runde Ecken */
    position: relative; /* Für Close Button */
    max-height: 80vh; /* Max Höhe */
    overflow-y: auto; /* Scrollbar falls Inhalt zu groß */
}

/* Modal Überschrift */
.modal-content h2 {
    margin-top: 0; /* Kein Abstand oben */
}

/* Close Button */
.close {
    position: absolute; /* Absolut innerhalb Modal */
    top: 12px; /* Abstand oben */
    right: 15px; /* Abstand rechts */
    font-size: 26px; /* Größe */
    cursor: pointer; /* Zeiger */
}

/* Impressum Link */
.impressum-link a {
    cursor: pointer; /* Zeiger beim Hover */
}