/*
 Theme Name:     Divi Child Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Child Theme for Divi Theme by Elegant Themes
 Author:         Divi.world
 Author URI:     http://divi.world
 Template:       Divi
 Version:        1.0.0
*/
 
/* =Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */

/* ==========================================================================
   SCHRIFTEN & TYPOGRAFIE
   ========================================================================= */

@font-face {
    font-family: 'WorkSansLocal';
    src: url('https://arte-logo.de/wp-content/themes/Divi-Child-Theme/fonts/work-sans-v24-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'OpenSansLocal';
    src: url('https://arte-logo.de/wp-content/themes/Divi-Child-Theme/fonts/open-sans-v44-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

/* Body & Text */
body, p, li, a, .et_pb_module, .et_pb_button, .et_mobile_menu li a, 
.dipi_testimonial, .dipi_filterable_grid, .dipi_image_showcase,
.dipi_filterable_grid_filter_item a {
    font-family: 'OpenSansLocal', sans-serif;
    font-weight: 600;
}

/* Headings */
h1, h2, h3, h4, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, 
.et_pb_module_header {
    font-family: 'WorkSansLocal', sans-serif;
    font-weight: 700;
}

/* Strong / Bold */
strong, b {
    font-family: 'WorkSansLocal', sans-serif;
    font-weight: 700;
}

/* ==========================================================================
   STRUKTUR & HEADER
   ========================================================================= */

#page-container { overflow-x: hidden; }

@media screen and (min-width: 981px) {
    .header-v1-column { display: flex; align-items: center; }
    .header-v1-menu { flex: 2 1 auto; }
    .header-v1-menu.et_pb_menu .et-menu>li { padding-left: 17px; padding-right: 17px; }
    .top-bar-menu-row, .appointment-cta-row { display: flex; align-items: center; }
}

@media screen and (max-width: 980px) {
    .header-button-1, .header-button-2 { width: 100%; text-align: center; }
    .project-section-home .et_pb_row { display: flex; flex-direction: column-reverse; }
}

/* Mobile Container Width */
@media (max-width: 767px) {
    .et_pb_row, 
    .container {
        width: 90%;
    }
}

/* ==========================================================================
   NAVIGATION & MOBILE MENÜ
   ========================================================================= */

.nav li li a { border-bottom: 1px solid rgb(255 255 255 / 19%); font-size: 16px; }
.et-menu > .menu-item-has-children > .sub-menu:before { border-bottom: 12px #00eab7 solid; } 

.hamburger-icon-v1::after, 
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
    background: #00eab7;
    color: #0a141f;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
    top: 10px; 
    position: relative; 
    font-family: "ETModules"; 
    content: '\33'; 
    border-radius: 50%; 
    padding: 3px;
}

ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after { content: '\32'; }
ul.et_mobile_menu .menu-item-has-children .sub-menu { display: none; visibility: hidden; }
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible { display: block; visibility: visible; }

/* ==========================================================================
   IMAGE SHOWCASE FIX
   ========================================================================= */

.dipi_image_showcase_child_image, 
.dipi_image_showcase_child img,
.et_pb_column_2_5 .dipi_image_showcase_child_image {
    transition: transform 2.5s cubic-bezier(0.1, 0.5, 0.2, 1);
    will-change: transform;
}

.dipi_image_showcase_child {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================= */

.et_password_protected_form {
    background: #ffffff;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    max-width: 500px;
    margin: 60px auto;
    text-align: center;
}

.et_password_protected_form p {
    font-size: 18px;
    color: #333;
    margin-bottom: 25px;
}

.et_password_protected_form input[type="password"] {
    width: 100%;
    padding: 15px;
    border: 3px solid #0a141f;
    border-radius: 5px;
    margin-bottom: 15px;
    background: #fdfdfd;
}

.et_password_protected_form button[type="submit"], 
.et_password_protected_form input[type="submit"] {
    background-color: #000000;
    color: #ffffff;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 100px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

.et_password_protected_form button[type="submit"]:hover, 
.et_password_protected_form input[type="submit"]:hover {
    background-color: #00cc99;
    color: #ffffff;
}

/* ==========================================================================
   AKZENTE & SPEZIAL-STYLES
   ========================================================================= */



/* Icon Styles */
.custom-header-icon .et-pb-icon, 
.et_pb_icon_0_tb_header .et-pb-icon { 
    color: #f7a50f;
    font-size: 55px;
    font-family: 'ETmodules';
    font-weight: 400;
}


/* ==========================================================================
   8. Buttons
   ========================================================================= */

.btn-menu-orange, .btn-content-orange {
    color: #0a141f;
    border-width: 0;
    border-radius: 100px;
    letter-spacing: 1px;
    font-size: 18px;
    padding-right: 2em;
    padding-left: 2em;
    background-color: #f7a50f;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Divi Standard-Pfeil für diesen Button ausschalten */
.btn-menu-orange:after, .btn-content-orange:after {
    content: none !important;
}

.btn-menu-orange:hover, .btn-content-orange:hover {
    background-color: #00cc99 !important;
	padding-right: 2em !important;
    padding-left: 2em !important;
	border: 0px solid !important;
}

/* ==========================================================================
   Sektionen und Farbverläufe
   ========================================================================= */

/* Farbverläufe*/
.gradient, .gradient-dark, .dipi-testimonial-item{
	background-image: radial-gradient(ellipse at top left, #0a141f 0%, #0f1b2c 72%, #0a070a 100%) !important;
}

.gradient-light{
	background-image: radial-gradient(ellipse at top left, #ffffff 13%, rgba(41, 196, 169, 0.12) 47%, rgba(178, 39, 188, 0.08) 68%, #ffffff 88%) !important;
}

/* Sektionen*/
.section-light{
	padding: 40px 60px !important;
    margin-top: 60px;
    margin-bottom: 60px;
    background-color: #FFFFFF !important;
	border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    width: 80%;
    max-width: 1240px;
    margin-left: auto !important;
    margin-right: auto !important;
    z-index: 10;
    box-shadow: 0px 8px 32px 8px rgba(0, 0, 0, 0.18);
}

@media (max-width: 767px) {
.section-light{
	padding: 20px 20px !important;
    width: 90%;
}
}

/* Zeilen*/
.row-light{
	background-color: #FFFFFF !important;
	border-radius: 20px 20px 20px 20px;
	padding: 40px 40px !important;
	box-shadow: 0px 8px 32px 8px rgba(0, 0, 0, 0.18);
}

.spalte-einfach{
	border-radius: 20px 20px 20px 20px;
	padding: 20px 20px !important;
	box-shadow: 0px 8px 32px 8px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   Hero Sections
   ========================================================================= */
/* 1. GLOBALE DEFAULTS FÜR ALLE SEKTIONEN */
.et_pb_section {
    position: relative;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 2. DIE HERO-KLASSE (Optimiert für LCP & Design) */
.custom-hero {
    min-height: 62vh !important;
    position: relative;
    background-color: #0a141f !important; /* Header-Farbe */
    background-image: url(https://arte-logo.de/wp-content/uploads/2026/02/referenzen-titel.webp) !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: inset 0px -8px 0px 0px #FFFFFF !important;
    overflow: hidden;
}

/* 2. DER VERLAUF (Overlay) */
.custom-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        360deg,
        #ffffff 0%,
        rgba(132, 132, 132, 0.8) 50%,
        #0a141f 100%
    ) !important;
    z-index: 2;
    pointer-events: none;
}

/* 4. HEADLINE & INHALT NACH VORNE HOLEN */
.custom-hero .et_pb_row, 
.custom-hero .et_pb_module {
    position: relative;
    z-index: 10 !important;
}

/* 5. RESPONSIVE ANPASSUNGEN (Zusammengefasst) */
@media (min-width: 981px) {
    .et_pb_section {
        padding: 4% 0;
    }
}

@media only screen and (min-width: 1550px) {
    .et_pb_section {
        padding: 62px 0;
    }
}

/* ==========================================================================
   Bilder
   ========================================================================= */

.bilder img{
	border-radius:20px !important;
}
.dipi_testimonial_0 .dipi-testimonial-item {
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    padding-top: 30px!important;
    padding-right: 30px!important;
    padding-bottom: 30px!important;
    padding-left: 30px!important;
    text-align: left!important
}

/* ==========================================================================
   Testemonial
   ========================================================================= */

.testimonial-stars {
    color: #f7a50f; /* Das typische Goldgelb */
    font-size: 20px;
    margin-bottom: 15px;
    display: block;
}

/* Den kompletten Slider-Container stylen */
.custom-testimonial-slider, 
.custom-testimonial-slider .et_pb_slides, 
.custom-testimonial-slider .et_pb_slide {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Den grauen Standard-Overlay von Divi entfernen */
.custom-testimonial-slider .et_pb_slide::before {
    display: none !important;
}

/* Text-Ausrichtung und Farbe erzwingen */
.custom-testimonial-slider .et_pb_slide_description {
    text-align: left !important;
    padding: 20px !important; /* Hier kannst du den Innenabstand steuern */
}

/* Die hässlichen Standard-Buttons von Divi Slidern oft ausblenden, 
   wenn du nur Text-Testimonials willst */
.custom-testimonial-slider .et_pb_more_button {
    display: none !important;
}

/* Der eigentliche Testimonial-Text (Inhalt) */
.custom-testimonial-slider .et_pb_slide_content {
    font-family: 'OpenSansLocal', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.7em !important;
    color: #ffffff !important;
    
    /* Standard-Größe für Desktop */
    font-size: 18px !important;
}

.testimonial-name {
    color: #f7a50f !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-top: 20px !important;
    display: block;
}

/* Anpassung für das Handy (Bildschirme kleiner als 767px) */
@media all and (max-width: 767px) {
    .custom-testimonial-slider .et_pb_slide_content {
        font-size: 16px !important;
    }
    
    /* Optional: Padding auf dem Handy etwas reduzieren, damit mehr Text passt */
    .custom-testimonial-slider .et_pb_slide_description {
        padding: 20px 0px !important; /* Oben/Unten: 20px | Links/Rechts: 0px */
    }
}
/* ==========================================================================
   Portfolio
   ========================================================================= */

/* --- 1. FILTER BUTTONS (Pillen-Design) --- */

.custom-portfolio .et_pb_portfolio_filters li a {
    display: inline-block;
    padding: 10px 20px !important;
    margin-bottom: 10px;
    background-color: #0a141f !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: 600;
    transition: all 0.4s ease-in-out;
    text-decoration: none;
    border: none !important;
    font-size: 16px !important;
    text-align: center;
}

@media all and (min-width: 981px) {
    .custom-portfolio .et_pb_portfolio_filters li a {
        font-size: 18px !important;
    }
}

/* MOBILE BUTTONS: Volle Breite */
@media all and (max-width: 767px) {
    .custom-portfolio .et_pb_portfolio_filters li {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
    .custom-portfolio .et_pb_portfolio_filters li a {
        display: block !important;
        width: 100% !important;
    }
}

.custom-portfolio .et_pb_portfolio_filters li a.active,
.custom-portfolio .et_pb_portfolio_filters li a:hover {
    background-color: #00c99b !important;
    color: #0a141f !important;
}

.custom-portfolio .et_pb_portfolio_filters {
    padding-bottom: 20px !important;
}

.custom-portfolio .et_pb_portfolio_filters li {
    display: inline-block;
    margin-right: 10px !important;
}

/* --- 2. GRID LAYOUT (3 - 2 - 1) --- */

.custom-portfolio .et_pb_portfolio_item {
    float: left !important;
    clear: none !important;
}

@media all and (min-width: 981px) {
    .custom-portfolio .et_pb_portfolio_item {
        width: 32.33% !important;
        margin: 0 1.5% 1.5% 0 !important;
    }
    .custom-portfolio .et_pb_portfolio_item:nth-child(3n) { margin-right: 0 !important; }
    .custom-portfolio .et_pb_portfolio_item:nth-child(3n+1) { clear: left !important; }
}

@media all and (min-width: 768px) and (max-width: 980px) {
    .custom-portfolio .et_pb_portfolio_item {
        width: 49% !important;
        margin: 0 2% 2% 0 !important;
    }
    .custom-portfolio .et_pb_portfolio_item:nth-child(2n) { margin-right: 0 !important; }
    .custom-portfolio .et_pb_portfolio_item:nth-child(2n+1) { clear: left !important; }
}

@media all and (max-width: 767px) {
    .custom-portfolio .et_pb_portfolio_item {
        width: 100% !important;
        margin: 0 0 25px 0 !important;
        float: none !important;
        display: block !important;
    }
}

.custom-portfolio .et_pb_portfolio_grid::after {
    content: "";
    display: table;
    clear: both;
}

/* --- 3. GRID ITEMS (Overlay & FULL CLICK) --- */

.custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

.custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_image img {
    border-radius: 20px !important;
    display: block;
    width: 100% !important;
    height: auto !important;
}

/* Das gelbe Overlay */
.custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #f7a50f !important;
    opacity: 0;
    transition: opacity 0.6s ease-in-out; 
    z-index: 2;
    border-radius: 20px !important;
    pointer-events: none; /* Klicks durch das Overlay durchlassen */
}

/* Titel-Container */
.custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item h2 {
    position: absolute !important;
    inset: 0 !important; /* Nimmt die ganze Fläche ein */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

/* Der eigentliche Link im Titel - DAS IST DER TRICK */
.custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item h2 a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #0a141f !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 18px !important;
	line-height:1.2;
    padding: 40px !important;
}

@media all and (min-width: 981px) {
    .custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item h2 a {
        font-size: 24px !important;
    }
}

/* Hover-Effekt */
.custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item:hover::after,
.custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item:hover h2 {
    opacity: 1 !important;
}

/* --- 4. CLEANUP --- */

.custom-portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta,
.custom-portfolio .et_overlay {
    display: none !important;
}

.custom-portfolio.et_pb_filterable_portfolio { border: none !important; }
.custom-portfolio .et_pb_pagination { display: none !important; }

/* ==========================================================================
   Galerie
   ========================================================================= */

/* --- GALERIE GRID LAYOUT (3 - 2 - 1) --- */

.custom-galerie .et_pb_gallery_items {
    display: block !important;
}

.custom-galerie .et_pb_gallery_item {
    float: left !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* DESKTOP: 3 Spalten (ab 981px) */
@media all and (min-width: 981px) {
    .custom-galerie .et_pb_gallery_item {
        width: 32% !important; /* Etwas weniger als 33.3%, um Platz für Margins zu lassen */
        margin: 0 2% 2% 0 !important;
    }
    /* Jedes 3. Element hat keinen rechten Rand */
    .custom-galerie .et_pb_gallery_item:nth-child(3n) {
        margin-right: 0 !important;
    }
    /* Umbruch nach jedem 3. Element */
    .custom-galerie .et_pb_gallery_item:nth-child(3n+1) {
        clear: left !important;
    }
}

/* TABLET: 2 Spalten (768px bis 980px) */
@media all and (min-width: 768px) and (max-width: 980px) {
    .custom-galerie .et_pb_gallery_item {
        width: 48.5% !important;
        margin: 0 3% 3% 0 !important;
    }
    .custom-galerie .et_pb_gallery_item:nth-child(2n) {
        margin-right: 0 !important;
    }
    .custom-galerie .et_pb_gallery_item:nth-child(2n+1) {
        clear: left !important;
    }
}

/* SMARTPHONE: 1 Spalte (unter 768px) */
@media all and (max-width: 767px) {
    .custom-galerie .et_pb_gallery_item {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        float: none !important;
    }
}

/* --- OPTIK: RUNDUNG & KEIN OVERLAY --- */

.custom-galerie .et_pb_gallery_image {
    border-radius: 15px !important; /* Leicht reduzierte Rundung für kleinere Kacheln */
    overflow: hidden !important;
}

.custom-galerie .et_pb_gallery_image img {
    border-radius: 15px !important;
    display: block;
    width: 100% !important;
    height: auto !important;
}

/* Overlay & Texte entfernen */
.custom-galerie .et_overlay,
.custom-galerie .et_pb_gallery_title, 
.custom-galerie .et_pb_gallery_caption,
.custom-galerie .et_pb_gallery_pagination {
    display: none !important;
}

.custom-galerie .et_pb_gallery_items::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   Laptop Showcase
   ========================================================================= */

/* 1. Die Spalte fixieren und das Überlaufen verhindern */
.laptop-spalte {
    position: relative !important;
    overflow: hidden !important; /* Wichtig: Hier wird alles abgeschnitten, was rauswill */
    transition: background-position 4s ease-in-out !important;
    padding: 0 !important; /* Verhindert Abstände zwischen Rahmen und Bild */
    background-size: 55% auto !important; /* Breite des Bildschirms im MacBook PNG */
    background-origin: content-box;
    /* Damit das Bild nicht ganz oben am Gehäuse klebt: */
    background-position: 50% -1% !important; 
}

/* 2. Den Laptop-Rahmen perfekt positionieren */
.laptop-front {
    position: relative;
    z-index: 10; /* Der Laptop liegt IMMER über dem Hintergrundbild */
    pointer-events: none; /* Die Maus "fühlt" nur die Spalte darunter */
}

/* 3. Der Scroll-Effekt beim Hover über die Spalte */
.laptop-spalte:hover {
    background-position: bottom center !important;
}

@media all and (max-width: 767px) {
    .laptop-spalte {
        /* Erzwingt, dass das Bild den Container ignoriert und sich ausbreitet */
        background-size: 110% auto !important; 
        background-position: 50% 0% !important;
        background-repeat: no-repeat !important;
        
        /* WICHTIG: Divi Abstände auf Null setzen */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 20px !important;
    }
}

.laptop-spalte:hover {
    background-position: 50% 90% !important;
}

/* ==========================================================================
   Handy Showcase
   ========================================================================= */

/* 1. Die Spalte fixieren und das Überlaufen verhindern */
.handy-spalte {
    position: relative !important;
    overflow: hidden !important; /* Wichtig: Hier wird alles abgeschnitten, was rauswill */
    transition: background-position 4s ease-in-out !important;
    padding: 0 !important; /* Verhindert Abstände zwischen Rahmen und Bild */
    background-size: 65% auto !important; /* Breite des Bildschirms im MacBook PNG */
    background-origin: content-box;
    /* Damit das Bild nicht ganz oben am Gehäuse klebt: */
    background-position: 50% -1% !important; 
}

/* 2. Den Laptop-Rahmen perfekt positionieren */
.handy-front {
    position: relative;
    z-index: 10; /* Der Laptop liegt IMMER über dem Hintergrundbild */
    pointer-events: none; /* Die Maus "fühlt" nur die Spalte darunter */
}

/* 3. Der Scroll-Effekt beim Hover über die Spalte */
.handy-spalte:hover {
    background-position: bottom center !important;
}


.handy-spalte:hover {
    background-position: 50% 90% !important;
}
/* ============================================================
   Hero Sections
   ============================================================ */

/* BASIS (Für beide gleich) */
.arte-hero-clean {
    all: initial;
    display: flex;
    width: 100vw;
    min-height: 70vh; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    font-family: 'Work Sans', sans-serif;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #ffffff; /* Fallback */
}

/* LOGIK STARTSEITE (Nur Verlauf, kein Bild) */
.arte-hero-clean:not(.hero-page-bg) {
    background: linear-gradient(180deg, #0a141f 0%, rgba(10, 20, 31, 0.2) 50%, #ffffff 100%) !important;
}
/* Spezifisch für Referenzen: Halbe Höhe */
.hero-ref-short {
    min-height: 50vh !important;
    height: 50vh !important;
}

/* LOGIK UNTERSEITEN (Mit Bild-Support) */
.hero-page-bg {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Der dunkle Verlauf für Unterseiten - liegt ÜBER dem Bild, aber UNTER dem Text */
.hero-page-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Dieser Verlauf geht von Dunkel (oben) zu Weiß (unten) */
    background: linear-gradient(
        360deg,
        #ffffff 0%,
        rgba(132, 132, 132, 0.8) 50%,
        #0a141f 100%
    	) !important;
    z-index: 5;
}

/* INHALT (Immer obenauf) */
.arte-hero-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 40px;
    width: 100%;
    position: relative;
    z-index: 20; /* Text schwebt über dem Verlauf */
}

.hero-page-bg .arte-content {
    flex: 1 1 100% !important; /* Nimmt sich den verfügbaren Platz */
    max-width: 1000px !important; /* Erweitert auf 1000px, damit 96px Headline Platz hat */
}

.arte-preheadline {
    font-family: 'OpenSansLocal', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #fff !important; 
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.arte-title {
    font-family: 'WorkSansLocal', sans-serif !important;
    font-weight: 800 !important;
    font-size: 96px !important;
    color: #FFFFFF !important;
    line-height: 0.95 !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: 1px !important;
	word-break: keep-all !important;
    hyphens: none !important;
}

.dot-orange { color: #f7a50f !important; }

.arte-subtitle {
    font-family: 'OpenSansLocal', sans-serif !important;
    font-size: 20px !important;
    color: #0a141f !important; 
    line-height: 1.5 !important;
    max-width: 550px;
}

/* 7. MOBILE OPTIMIERUNG (Minimierte Höhe für Unterseiten) */
@media (max-width: 980px) {
    .arte-hero-clean {
        min-height: auto !important;
        padding-top: 40px !important;
    }

    .hero-page-bg {
        min-height: 400px !important;
    }
    
    .hero-page-bg .arte-image {
        display: none !important; /* Nur auf Unterseiten weg */
    }

    .arte-hero-clean:not(.hero-page-bg) .arte-image {
        display: flex !important; 
        width: 100% !important;
        justify-content: center !important;
        margin-top: 30px;
    }

    .arte-hero-clean:not(.hero-page-bg) .hero-main-img {
        max-width: 80% !important; /* Kolibri etwas kleiner auf Mobile */
    }

    .arte-hero-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 60px 25px 80px 25px !important;
    }
    
    .arte-content { 
        width: 100% !important; 
    }

    .arte-title { 
        font-size: 42px !important; 
        line-height: 1.1 !important;	
    }
	
	.arte-subtitle {
    	font-size: 16px !important;
    	color: #fff !important; 
	}
	
	.arte-preheadline {
    	font-size: 16px !important;
	}
}