/*
 Theme Name:   Zeitsprung Pictures
 Theme URI:    https://generatepress.com
 Description:  GP child theme für Zeitsprung Pictures siehe Beschreibung in der Aenderungen.md 
 Author:       Reinhold Packeisen 
 Author URI:   https://packeisen.de
 Template:     generatepress
 Version:      2.01
 Komplettes CSS mit allen Anpassungen 18.3.2026
 Beschreibung in der Aenderungen MD 
*/

/* ==============================================
   FONTS - Open Sans
   ============================================== */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-regular.eot');
  src: local(''),
       url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-regular.woff') format('woff'),
       url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'),
       url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/open-sans-v34-latin-500.eot');
  src: local(''),
       url('fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'),
       url('fonts/open-sans-v34-latin-500.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-500.woff') format('woff'),
       url('fonts/open-sans-v34-latin-500.ttf') format('truetype'),
       url('fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v34-latin-700.eot');
  src: local(''),
       url('fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'),
       url('fonts/open-sans-v34-latin-700.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-700.woff') format('woff'),
       url('fonts/open-sans-v34-latin-700.ttf') format('truetype'),
       url('fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg');
}

h1, h2, h3, h4 { 
    font-family: "Open-Sans", sans-serif;
}

body {
  font-family: "Open-Sans", sans-serif;
  font-weight: 400;
}

/* ==============================================
   GLOBAL STYLES
   ============================================== */

/* Seitentitel ausschalten (außer Productions) */
.page-header {
    display: none;
}

/* Productions Seitenbreite */
.site-content .content-area {
  width: 96%;
}

/* Featured Images responsive */
.featured-image img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* Masonry Bilder mit abgerundeten Ecken */
.grid-25.masonry-brick DIV.inside-article IMG {
	border-top-left-radius: 35px;
	border-bottom-right-radius: 52px;
}

/* ==============================================
   SEITEN-SPEZIFISCHE HINTERGRÜNDE
   ============================================== */

/* Startseite Deutsch (ID 2) - Schwarzer Hintergrund */
.page-id-2 .site-content {
    background-color: #000000;
    color: #ffffff;
}

/* Company Page (ID 8) - Schwarzer Hintergrund */
.page-id-8 .site-content {
    background-color: #000000;
    color: #ffffff;
}

/* Startseite Englisch (ID 998) - Schwarzer Hintergrund */
.page-id-998 .site-content {
    background-color: #000000;
    color: #ffffff;
}

/* Weitere englische Seite (ID 1566) - Schwarzer Hintergrund */
.page-id-1566 .site-content {
    background-color: #000000;
    color: #ffffff;
}

/* Alternative: .home für alle Startseiten */
.home .grid-container,
.home .site-content {
    background-color: #000000;
}

.home .site-content,
.home .entry-content {
    color: #ffffff;
}

.home .entry-content a {
    color: #e20014;
}

.home .entry-content a:hover {
    color: #ffffff;
}

.home {
    background-color: #000000;
}

/* ==============================================
   SMART SLIDER FIX - Company Page & Homepage
   ============================================== */

/* Hauptcontainer beschränken (Company Page) */
.elementor-element-5ce3dc16 {
    overflow: hidden !important;
}

/* Alle Smart Slider Container responsive machen */
.elementor-widget-smartslider .n2-section-smartslider,
.n2-section-smartslider {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Slider Align Container */
.n2-ss-align {
    max-width: 100% !important;
    width: 100% !important;
}

/* Spezifisch für Slider #3 (Company) */
#n2-ss-3-align,
#n2-ss-3 {
    max-width: 100% !important;
    width: 100% !important;
}

#n2-ss-3 .n2-ss-slider-wrapper-inside,
#n2-ss-3 .n2-ss-slider-1,
#n2-ss-3 .n2-ss-slider-2,
#n2-ss-3 .n2-ss-slider-3,
#n2-ss-3 .n2-ss-slide {
    max-width: 100% !important;
    width: 100% !important;
}

/* Elementor Widget Container */
.elementor-widget-smartslider .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ==============================================
   PRODUCTIONS GRID LAYOUT
   ============================================== */

/* Category Page Header - PRODUCTIONS Titel sichtbar machen */
.productions-archive .page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
    display: block !important;
}

.page-header .page-title {
    font-size: 2.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Productions Grid */
.productions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-bottom: 3rem;
    max-width: 100%;
    padding-top: 2rem;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
}

.productions-archive .site-content {
    padding-top: 2rem;
}

/* Production Item */
.production-item {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.production-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.production-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Production Image - Grayscale Hover Effect */
.production-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.production-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.4s ease, transform 0.4s ease;
    filter: grayscale(0%);
}

.production-item:hover .production-image img {
    filter: grayscale(100%);
    transform: scale(1.02);
}

/* Dunkles Overlay beim Hover */
.production-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    pointer-events: none;
}

.production-item:hover .production-image::after {
    background: rgba(0, 0, 0, 0.3);
}

/* Production Caption - MITTIG, OHNE Hintergrund */
.production-caption {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background: none;
    padding: 1rem 1.5rem;
    text-align: center;
    transition: none;
}

.production-caption-inner {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Production Title - Rot mit Schatten */
.production-item .production-caption .production-title {
    font-size: 1.14em !important;
    font-weight: bold !important;
    color: #e20015 !important;
    text-align: center !important;
    margin: 0 0 0.3rem 0 !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7) !important;
}

.production-item:hover .production-caption .production-title {
    color: #ff3333 !important;
}

/* Production Genre - Weiß mit Schatten */
.production-item .production-caption .production-genre {
    font-size: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7) !important;
}

.production-genre::before {
    content: "";
}

/* ==============================================
   PRODUCTIONS SIDEBAR MENU
   ============================================== */

#menu-productions a {
    text-decoration: none;
}

#menu-productions li a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 0px;
}

#menu-productions li.current-menu-item a {
    border-color: #000;
    font-weight: bold;
    color: #e20015;
}


#menu-productions-en a {
    text-decoration: none;
}

#menu-productions-en li a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 0px;
}

#menu-productions-en li.current-menu-item a {
    border-color: #000;
    font-weight: bold;
    color: #e20015;
}
#menu-productions-en {
  font-size: 14px;
  line-height: 16px;
}
/* ==============================================
   TYPOGRAPHY - Headings
   ============================================== */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-weight: 300 !important;
    line-height: 1.2 !important;
}

h1, .elementor-heading-title.elementor-size-default.elementor-heading-1 {
    font-size: 2.9em !important;
}

h2, .elementor-heading-title.elementor-size-default.elementor-heading-2 {
    font-size: 2.2em !important;
}

h3, h4, h5, h6,
.elementor-heading-title.elementor-heading-3,
.elementor-heading-title.elementor-heading-4,
.elementor-heading-title.elementor-heading-5,
.elementor-heading-title.elementor-heading-6 {
    font-size: 1.14em !important;
}

.widget-title {
  text-transform: uppercase;
  font-size: 16px !important;
}

/* ==============================================
   TABLES - Borderless Style
   ============================================== */

.wp-block-table table {
  border: none;
  border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
  border: none;
  padding: 8px 12px;
  vertical-align: top;
}

.wp-block-table td:first-child,
.wp-block-table th:first-child {
  width: 60px;
  min-width: 65px;
}

.wp-block-table td:nth-child(2),
.wp-block-table th:nth-child(2) {
  width: 40%;
}

.wp-block-table td:nth-child(3),
.wp-block-table th:nth-child(3) {
  width: auto;
}

/* ==============================================
   ELEMENTOR ELEMENTS
   ============================================== */

/* HR Linie sichtbar machen */
.elementor-widget-text-editor hr {
  display: block !important;
  border: none;
  border-top: 1px solid #ccc;
  margin: 0.7em 0;
  opacity: 1 !important;
}

/* ==============================================
   LANGUAGE SWITCHER (Polylang)
   ============================================== */

.top-bar #polylang-2 ul {
    display: flex;
    gap: 10px;
    align-items: center;
}

.top-bar #polylang-2 li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.top-bar #polylang-2 img {
    display: inline-block;
}

/* ==============================================
   PAGINATION & INFINITE SCROLL
   ============================================== */

.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 3rem 0;
}

.pagination .page-numbers {
    padding: 0.5rem 1rem;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: #e31e24;
    color: #fff;
}

.infinite-scroll-loading {
    text-align: center;
    padding: 2rem;
    color: #666;
}

.infinite-scroll-last {
    text-align: center;
    padding: 2rem;
    color: #999;
}

.load-more-container {
    text-align: center;
    margin: 2rem 0;
}

.load-more-button {
    padding: 1rem 2rem;
    background: #e31e24;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    font-size: 1rem;
    transition: background 0.3s ease;
}

.load-more-button:hover {
    background: #c01a1f;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

/* Tablet */
@media (max-width: 1024px) {
    #n2-ss-3,
    #n2-ss-3 .n2-ss-slide {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Tablet - Productions Grid */
@media (max-width: 992px) {
    .productions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Productions Grid */
    .productions-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .page-header .page-title {
        font-size: 2rem;
    }
    
    .production-caption {
        padding: 1rem;
    }
    
    .production-title {
        font-size: 1.1em !important;
    }
    
    .production-genre {
        font-size: 0.95em;
    }
    
    /* Smart Slider Mobile */
    .n2-section-smartslider {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #n2-ss-3-arrow-previous,
    #n2-ss-3-arrow-next {
        display: none !important;
    }
    
    #n2-ss-3 .n2-bullet {
        transform: scale(0.8);
    }
}



/* Container hart abschneiden */
.elementor-element-5ce3dc16 {
    overflow: hidden !important;
}

/* Platz für Pfeile schaffen */
.elementor-widget-smartslider .elementor-widget-container {
    padding: 0 50px !important; /* 50px links/rechts für Pfeile */
}

/* Pfeile INNERHALB positionieren */
#n2-ss-3-arrow-previous {
    left: 10px !important; /* Vom Container-Rand */
}

#n2-ss-3-arrow-next {
    right: 10px !important; /* Vom Container-Rand */
}

/* Verändert nach dem 26.1.2026 übertragen aus dem Costumizer */


/* Rahmen #333 um Slider - Seiten 1708 und 12 */
.page-id-1708 .elementor-widget-smartslider,
.page-id-12 .elementor-widget-smartslider {
    border: 1px solid #333333 !important;
    background-color: #333333;
    overflow: hidden !important;
}
.page-id-1708 .elementor-widget-smartslider,
.page-id-12 .elementor-widget-smartslider {
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}
/* ==============================================
   SMART SLIDER - Rahmen #333
   Für Seiten: 1708 und 12
   ============================================== */

/* Rahmen um Slider Container - Seite 1708 (vermutlich Company EN) */
.page-id-1708 .elementor-widget-smartslider,
.page-id-1708 .n2-section-smartslider {
    border: 1px solid #333333 !important;
    background-color: #333333;
}

/* Rahmen um Slider Container - Seite 12 (vermutlich Company DE) */
.page-id-12 .elementor-widget-smartslider,
.page-id-12 .n2-section-smartslider {
    border: 1px solid #333333 !important;
    background-color: #333333;
}

/* Falls du den spezifischen Container brauchst: */
.page-id-1708 .elementor-element-5ce3dc16,
.page-id-12 .elementor-element-5ce3dc16 {
    border: 1px solid #333333 !important;
    background-color: #333333;
    overflow: hidden !important;
}

/* ==============================================
   ALTERNATIVE: Für BEIDE Seiten gleichzeitig
   ==========================================
   OPTIONAL: Mit Box-Shadow (edler Look)
   ============================================== */

.page-id-1708 .elementor-widget-smartslider,
.page-id-12 .elementor-widget-smartslider {
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    background-color: #000000;
}

/* ==============================================
   SLIDER RESPONSIVE FIXES (für beide Seiten)
   ============================================== */

/* Container beschränken */
.page-id-1708 .elementor-widget-smartslider,
.page-id-12 .elementor-widget-smartslider {
    overflow: hidden !important;
    max-width: 100% !important;
}

/* Slider Section */
.page-id-1708 .n2-section-smartslider,
.page-id-12 .n2-section-smartslider {
    max-width: 100% !important;
    width: 100% !important;
}

/* Pfeile innerhalb positionieren */
.page-id-1708 #n2-ss-3-arrow-previous,
.page-id-12 #n2-ss-3-arrow-previous {
    left: 10px !important;
}

.page-id-1708 #n2-ss-3-arrow-next,
.page-id-12 #n2-ss-3-arrow-next {
    right: 10px !important;
}

/* ==============================================
   MOBILE OPTIMIERUNG
   ============================================== */

@media (max-width: 768px) {
    .page-id-1708 .n2-section-smartslider,
    .page-id-12 .n2-section-smartslider {
        border-width: 1px !important;
        margin: 0 !important;
    }
    
    /* Pfeile auf Mobile ausblenden */
    .page-id-1708 #n2-ss-3-arrow-previous,
    .page-id-1708 #n2-ss-3-arrow-next,
    .page-id-12 #n2-ss-3-arrow-previous,
    .page-id-12 #n2-ss-3-arrow-next {
        display: none !important;
    }
}