/* 
Theme Name: Novawerk Child 
Description: Novawerk Child-Theme 
Author: Novawerk - Mathias Pichler
Author URI: https://nova-werk.de 
Template: Divi 
Version: 1.11
Text Domain: Novawerk Child-Theme
*/


/* ─── CSS Custom Properties ──────────────────────────────────────────────── */

:root {
    --farbe-akzent:          #a40042;
    --farbe-text:            #000000;
    --farbe-hintergrund:     #ffffff;
    --portfolio-hoehe-desktop: 800px;
    --portfolio-hoehe-tablet:  600px;
    --portfolio-hoehe-mobil:   350px;
    --scrollbar-breite:      10px;
    --menue-abstand:         5vw;
    --link-transition:       0.3s ease-in-out;
    --pfeil-groesse:         3vh;
}


/* ─── Scrollbar ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: var(--scrollbar-breite);
}

::-webkit-scrollbar-track {
    background: var(--farbe-hintergrund);
}

::-webkit-scrollbar-thumb {
    background: var(--farbe-text);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--farbe-akzent);
}


/* ─── Menü: Unterstrich-Animation ────────────────────────────────────────── */

.et-menu li a {
    --unterstrich-breite: 0%;
    background-image: linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) !important;
    background-repeat: no-repeat !important;
    background-position: center 65% !important;
    background-size: var(--unterstrich-breite) 1px !important;
    transition: background-size 0.4s ease !important;
}

.et-menu li.current-menu-item > a,
.et-menu li a:hover {
    --unterstrich-breite: 100%;
}


/* ─── Menü: Abstände ─────────────────────────────────────────────────────── */

.et_pb_menu .et-menu > li {
    padding-left: var(--menue-abstand);
    padding-right: 0;
}


/* ─── Links: Unterstrich-Animation ───────────────────────────────────────── */

.link-linie a {
    text-decoration: none !important;
    position: relative;
    background-image: linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) !important;
    background-repeat: no-repeat !important;
    background-position: 50% 100% !important;
    background-size: 0% 1px !important;
    transition: background-size var(--link-transition) !important;
    padding-bottom: 2px !important;
    display: inline-block;
}

.link-linie a:hover {
    background-size: 100% 1px !important;
}


/* ─── Portfolio-Slider: Scroll-Layout ───────────────────────────────────────────── */

.portfolio-slider,
.portfolio-slider-projektseite {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}

.portfolio-slider .et_pb_ajax_pagination_container,
.portfolio-slider-projektseite .et_pb_ajax_pagination_container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 20px;
    padding-bottom: 25px !important;
    scroll-behavior: smooth;
    width: 100% !important;
}

/* Smooth-scroll auf Mobilgeräten deaktivieren,
   damit JavaScript-Autoscroll funktioniert */
@media (max-width: 980px) {
    .portfolio-slider .et_pb_ajax_pagination_container,
    .portfolio-slider-projektseite .et_pb_ajax_pagination_container {
        scroll-behavior: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

.portfolio-slider .et_pb_portfolio_item,
.portfolio-slider-projektseite .et_pb_portfolio_item {
    flex: 0 0 auto !important;
    width: auto !important;
}

.portfolio-slider .et_portfolio_image img,
.portfolio-slider-projektseite .et_portfolio_image img {
    height: var(--portfolio-hoehe-desktop) !important;
    width: auto !important;
    max-width: none !important;
}


/* ─── Portfolio-Übersicht: Flex-Layout ─────────────────────────────────────────────── */

.portfolio-uebersicht .et_pb_ajax_pagination_container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    align-items: flex-start !important;
}

.portfolio-uebersicht .et_pb_portfolio_item {
    flex: 0 0 auto !important;
}

/* ZEILE 1: 2x Querformat (3:2) */
.portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+1),
.portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+2) {
    width: calc((100% - 2px) / 2) !important;
    aspect-ratio: 3 / 2 !important;
}

/* ZEILE 2: 2x Hochformat + 1x Querformat */
.portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+3),
.portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+5) {
    width: calc((100% - 4px) / 4) !important;
    aspect-ratio: 2 / 3 !important;
}

.portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+4) {
    width: calc((100% - 4px) / 2) !important;
    aspect-ratio: 4 / 3 !important;
}

.portfolio-uebersicht .et_portfolio_image,
.portfolio-uebersicht .et_portfolio_image a {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.portfolio-uebersicht .et_portfolio_image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    max-width: none !important;
}

/* ─── Portfolio-Slider/Übersicht: Responsive ──────────────────────────────────────────────── */

/* TABLET */
@media (max-width: 980px) {
    .portfolio-slider .et_portfolio_image img,
    .portfolio-slider-projektseite .et_portfolio_image img {
        height: var(--portfolio-hoehe-tablet) !important;
    }

    .portfolio-uebersicht .et_pb_portfolio_item {
        height: var(--portfolio-hoehe-tablet) !important;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .portfolio-slider .et_portfolio_image img,
    .portfolio-slider-projektseite .et_portfolio_image img {
        height: var(--portfolio-hoehe-mobil) !important;
    }

    /* Portfolio Flex Mobile: height komplett entfernen für aspect-ratio */
    .portfolio-uebersicht .et_pb_portfolio_item {
        height: auto !important;
    }

    /* Portfolio Flex Mobile: 1x Quer, 2x Hoch Pattern */
    .portfolio-uebersicht .et_pb_ajax_pagination_container {
        gap: 2px !important;
    }

    /* Reset Desktop Regeln */
    .portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+1),
    .portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+2),
    .portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+3),
    .portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+4),
    .portfolio-uebersicht .et_pb_portfolio_item:nth-child(5n+5) {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        aspect-ratio: unset !important;
    }

    /* Zeile 1 (Items 1,4,7,...): 1x Querformat - deutlich höher */
    .portfolio-uebersicht .et_pb_portfolio_item:nth-child(3n+1) {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 3 / 2 !important;
    }

    /* Zeile 2 (Items 2,3,5,6,...): 2x Hochformat - deutlich höher */
    .portfolio-uebersicht .et_pb_portfolio_item:nth-child(3n+2),
    .portfolio-uebersicht .et_pb_portfolio_item:nth-child(3n+3) {
        width: calc(50% - 1px) !important;
        max-width: calc(50% - 1px) !important;
        aspect-ratio: 3 / 4 !important;
    }
}


/* ─── Portfolio-Slider: Pfeil-Buttons ───────────────────────────────────────────── */

.portfolio-pfeil-links,
.portfolio-pfeil-rechts {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--pfeil-groesse);
    height: var(--pfeil-groesse);
    background-color: var(--farbe-akzent) !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.portfolio-pfeil-links:hover,
.portfolio-pfeil-rechts:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.portfolio-pfeil-links { left: 10px; }
.portfolio-pfeil-rechts { right: 10px; }


/* ─── Portfolio-Slider: Scrollbar ───────────────────────────────────────────────── */

.portfolio-slider .et_pb_ajax_pagination_container::-webkit-scrollbar,
.portfolio-slider-projektseite .et_pb_ajax_pagination_container::-webkit-scrollbar {
    height: 1px !important;
}

.portfolio-slider .et_pb_ajax_pagination_container::-webkit-scrollbar-track,
.portfolio-slider-projektseite .et_pb_ajax_pagination_container::-webkit-scrollbar-track {
    background: transparent !important;
}

.portfolio-slider .et_pb_ajax_pagination_container::-webkit-scrollbar-thumb,
.portfolio-slider-projektseite .et_pb_ajax_pagination_container::-webkit-scrollbar-thumb {
    background-color: var(--farbe-akzent) !important;
}


/* ─── Portfolio-Übersicht: Titel ───────────────────────────────────────────────────── */

.portfolio-uebersicht .et_pb_module_header {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--farbe-hintergrund);
    display: inline-block;
    margin: 0;
    padding: 5px 12px;
    color: var(--farbe-text);
}


/* ─── Bilder Hover Zoom allgemein──────────────────────────────────── */
.et_portfolio_image .et_overlay,
.et_pb_gallery_image .et_overlay {
  display: none !important;
}

.et_portfolio_image,
.et_pb_gallery_image {
  overflow: hidden !important;
}

.et_portfolio_image img,
.et_pb_gallery_image img {
  transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transform: scale(1);
  display: block;
  width: 100%;
}

.et_pb_portfolio_item:hover .et_portfolio_image img,
.et_pb_gallery_item:hover .et_pb_gallery_image img {
  transform: scale(1.05) !important;
}

/* ─── Galerie: Flex-Layout ──────────────────────────────────────────────── */
.galerie-projektbilder .et_pb_gallery_item {
    display: flex !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
}

.galerie-projektbilder .et_pb_gallery_items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    align-items: flex-start !important;
    width: 100% !important;
}

/* ZEILE 1: 2x Querformat (3:2) */
.galerie-projektbilder .et_pb_gallery_item:nth-child(5n+1),
.galerie-projektbilder .et_pb_gallery_item:nth-child(5n+2) {
    width: calc((100% - 2px) / 2) !important;
    aspect-ratio: 3 / 2 !important;
}

/* ZEILE 2: 2x Hochformat + 1x Querformat */
.galerie-projektbilder .et_pb_gallery_item:nth-child(5n+3),
.galerie-projektbilder .et_pb_gallery_item:nth-child(5n+5) {
    width: calc((100% - 4px) / 4) !important;
    aspect-ratio: 2 / 3 !important;
}

.galerie-projektbilder .et_pb_gallery_item:nth-child(5n+4) {
    width: calc((100% - 4px) / 2) !important;
    aspect-ratio: 4 / 3 !important;
}

/* Galerie-Bild Styles */
.galerie-projektbilder .et_pb_gallery_image {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.galerie-projektbilder .et_pb_gallery_image a {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.galerie-projektbilder .et_pb_gallery_image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    max-width: none !important;
}

/* ─── Galerie: Responsive ──────────────────────────────────────────────── */
@media (max-width: 882px) {
    /* Tablet: 2er-Muster für bessere Lesbarkeit */
    .galerie-projektbilder .et_pb_gallery_item {
        width: calc((100% - 2px) / 2) !important;
        aspect-ratio: auto !important;
    }
}

@media (max-width: 480px) {
    /* Mobile: Single-Column */
    .galerie-projektbilder .et_pb_gallery_item {
        width: 100% !important;
        aspect-ratio: auto !important;
    }
}


/* ─── Galerie lightbox allgemein ──────────────────────────────────────────────── */
/* Lightbox Hintergrund */
.mfp-bg {
    background: var(--farbe-hintergrund) !important;
    opacity: 1 !important;
}

/* Elemente entfernen */
.mfp-close {
    display: none !important;
}

.mfp-bottom-bar {
    display: none !important;
}

.mfp-figure::after {
    display: none !important;
}

/* Navigationspfeile - Custom Style */
/* Navigationspfeile - Custom Style */
.mfp-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--pfeil-groesse) !important;
    height: var(--pfeil-groesse) !important;
    background-color: var(--farbe-akzent) !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-appearance: none !important;
}

.mfp-arrow:hover {
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2) !important;
    background-color: var(--farbe-akzent) !important;
    opacity: 1 !important;
    color: white !important;
}

.mfp-arrow-left {
    left: 10px !important;
}

.mfp-arrow-right {
    right: 10px !important;
}

/* ALLE originalen Symbole entfernen/überschreiben */
.mfp-arrow::before,
.mfp-arrow::after {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    color: white !important;
    font-family: Arial, sans-serif !important;
    font-weight: normal !important;
    line-height: 1 !important;
    border: none !important;
    font-variant: normal !important;
    text-transform: none !important;
}

/* Linker Pfeil */
.mfp-arrow-left::before {
    content: "‹" !important;
    display: block !important;
}

/* Rechter Pfeil - OHNE ::after vom Button */
.mfp-arrow-right {
    font-size: 0 !important;
}

.mfp-arrow-right::before {
    content: "›" !important;
    display: block !important;
}

/* ─── Projektnavigation ──────────────────────────────────────────────── */
.nav-single {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
}

.post-nav {
    display: flex;
    width: 100%;
    gap: 2px;
}

.post-nav a {
    display: block;
    flex: 1 1 0;
    text-decoration: none;
}

.post-nav img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}


/* ─── KI-Bild Kennzeichnung ──────────────────────────────────────────────── */
.ki .et_pb_image_wrap {
    position: relative;
    display: block;
}

.ki .et_pb_image_wrap::after {
    content: "KI-generiert";
    position: absolute;
    bottom: 10px;
    color: #ffffff;
    padding: 4px 10px;
    font-size: 11px;
    font-family: sans-serif;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
    
/* Desktop-Ausrichtung: Unten links */
    right: auto;
    left: 10px;
    transform: none;
}

/* Mobile-Ausrichtung: Mittig auf Smartphones und Tablets */
@media (max-width: 980px) {
    .ki .et_pb_image_wrap::after {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}