/*
Theme Name: Media Life Child
Template: hello-elementor
Author: Child Theme Configurator
Version: 3.4.6.1772101348
Updated: 2026-02-26 10:22:28

*/
@media screen and (max-width: 767px) {
    h2 {
		display: inline-block;
        position: relative; /* WICHTIG: Der Anker für die Linie */
        margin-bottom: 40px; /* Platz für die Linie schaffen */
    }

    /*h2::after {
        content: "";
        position: absolute;
        bottom: -15px; 
        left: 0;
        width: 80%;
        height: 5px;
        background-color: var(--line-color, #000); 
    }*/

    /* Klassen-Definitionen */
    .pink-line   { --line-color: #fb5994; }
    .blue-line   { --line-color: #40DFD0; }
    .yellow-line { --line-color: #E8FC30; }
	
	/* --------Projekte Loop-------------- */
	.loop { position: relative; }
	
     .top_projekt .elementor-widget-image:not(#projekt-logo) img {
        display: inline-block;
        vertical-align: middle;
        height: 500px;
        object-fit: cover;
    }


/* Grundvoraussetzung für das Logo-Widget */
#projekt-logo {
    position: absolute !important;
    z-index: 10;
    width: auto;
    height: auto;
}

/* Positionen basierend auf der ACF-Klasse */
#projekt-logo.links-oben {
    top: 20px;
    left: 20px;
}

#projekt-logo.rechts-oben {
    top: 20px;
    right: 20px;
}

#projekt-logo.links-unten {
    bottom: 20px;
    left: 20px;
}

#projekt-logo.rechts-unten {
    bottom: 20px;
    right: 20px;
}

#projekt-logo.mittig {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Exakte Zentrierung */
}
	
/* Grundvoraussetzung für das Logo-Widget */
#projekt-logo-header {
    position: absolute !important;
    z-index: 10;
    width: auto;
    height: auto;
}

/* Positionen basierend auf der ACF-Klasse */
#projekt-logo-header.links-oben {
    top: 20px;
    left: 20px;
}

#projekt-logo-header.rechts-oben {
    top: 20px;
    right: 20px;
}
#projekt-logo-header.links-unten {
    bottom: 20px;
    left: 0px;
	
}

#projekt-logo-header.rechts-unten {
    bottom: 20px;
    right: 20px;
}

#projekt-logo-header.mittig {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Exakte Zentrierung */
}


/* Definiert die tatsächliche Größe des Logos */
#projekt-logo img {
    max-width: 80px !important; /* Deine gewünschte Breite */
    max-height: 125px !important;  /* Verhindert das Strecken auf 500px */
    object-fit: contain !important;
}

#projekt-logo-header img {
    width: 25vw !important; /* Deine gewünschte Breite */
    height: auto !important;  /* Verhindert das Strecken auf 500px */
    object-fit: contain !important;
}

.elementor-loop-container .e-loop-item #teamname {
    opacity: 0;
    visibility: visible;
    transition: all 0.3s ease-in-out; /* Sorgt für ein sanftes Einblenden */
    white-space: normal !important;
    line-height: 0.95;
}	
	
	
	
	
	
	
}



@media screen and (min-width: 768px) {

/*--------colored border after------*/

h2 {
  display: inline-block; /* Element schrumpft auf Textbreite */
  position: relative;
  margin-bottom: 15px;
}

h2::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0%;   /* Zentriert die 80%-Linie (100-80 / 2) */
  width: 80%;  /* 80% vom Wort */
  height: 15px;
  background-color: var(--line-color);
}

.pink-line   { --line-color: #FB5994; }
.blue-line  { --line-color: #40E0D0; }
.yellow-line { --line-color: #E8FD31; }

	
/*----reversed Accordeon second line*/
.rev_acc .elementor-widget-n-accordion .e-n-accordion-item {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
}




/* --------Projekte Loop-------------- */
	.loop { position: relative; }
	
     .top_projekt .elementor-widget-image:not(#projekt-logo) img {
        display: inline-block;
        vertical-align: middle;
        height: 500px;
        object-fit: cover;
    }


/* Grundvoraussetzung für das Logo-Widget */
#projekt-logo {
    position: absolute !important;
    z-index: 10;
    width: auto;
    height: auto;
}

/* Positionen basierend auf der ACF-Klasse */
#projekt-logo.links-oben {
    top: 20px;
    left: 20px;
}

#projekt-logo.rechts-oben {
    top: 20px;
    right: 20px;
}

#projekt-logo.links-unten {
    bottom: 20px;
    left: 20px;
}

#projekt-logo.rechts-unten {
    bottom: 20px;
    right: 20px;
}

#projekt-logo.mittig {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Exakte Zentrierung */
}
	
/* Grundvoraussetzung für das Logo-Widget */
#projekt-logo-header {
    position: absolute !important;
    z-index: 10;
    width: auto;
    height: auto;
}

/* Positionen basierend auf der ACF-Klasse */
#projekt-logo-header.links-oben {
    top: 20px;
    left: 20px;
}

#projekt-logo-header.rechts-oben {
    top: 20px;
    right: 20px;
}
#projekt-logo-header.links-unten {
    bottom: 20px;
    left: 0px;
	
}

#projekt-logo-header.rechts-unten {
    bottom: 20px;
    right: 20px;
}

#projekt-logo-header.mittig {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Exakte Zentrierung */
}


/* Definiert die tatsächliche Größe des Logos */
#projekt-logo img {
    max-width: 200px !important; /* Deine gewünschte Breite */
    max-height: 150px !important;
	height: auto !important;  /* Verhindert das Strecken auf 500px */
    object-fit: contain !important;
}

#projekt-logo-header img {
    max-width: 20vw !important; /* Deine gewünschte Breite */
    max-height: 20vh !important;  /* Verhindert das Strecken auf 500px */
    object-fit: contain !important;
}





	
/*--------footer icon rechts 100%------*/


.move-icon-right .elementor-icon-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Sicherstellen, dass die Liste die volle Breite nutzt */
}

.move-icon-right .elementor-icon-list-icon {
    order: 1;
    margin-left: auto; /* Schiebt das Icon maximal nach rechts */
    margin-right: 0;
}

.move-icon-right .elementor-icon-list-text {
    order: 0;
}
	
/*--------footer icon rechts direkt hinter dem Wort------*/	
/* Ersetze .icon-direkt-folgend mit deiner Klasse im Widget */
.elementor-widget-icon-list.icon-direkt-folgend ul.elementor-icon-list-items li.elementor-icon-list-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Hält Text und Icon zusammen */
    align-items: center !important;
}

/* Den Text nach links schieben */
.elementor-widget-icon-list.icon-direkt-folgend .elementor-icon-list-text {
    order: 1 !important;
    margin-right: 10px !important; /* Der Abstand zwischen Wort und Icon */
    flex-basis: auto !important;
    width: auto !important;
}

/* Das Icon nach rechts schieben */
.elementor-widget-icon-list.icon-direkt-folgend .elementor-icon-list-icon {
    order: 2 !important;
    margin: 0 !important;
    display: flex !important;
}
		
}


/*----START GLOBAL STYLE------*/	
/*----Bildtitel------*/	

.white_invert {
	filter: invert(100%);
}

/* Erstmal alle Links bewegen */
a {
    display: inline-block;
    transition: transform 0.3s ease;
}

a:hover {
    transform: translateX(-5px);
}
	
	
/* 2. Reset für Loop-Container, Bilder und alles was NICHT wackeln soll */
.elementor-loop-container a, 
.e-loop-item a,
.elementor-widget-image a,
.elementor-nav-menu a { /* Verhindert auch das Wackeln im Menü */
    transform: none !important;
}





.h3_subtitle p{
	font-size: 1.125rem!important;
	font-size: clamp(1.125rem, 0.725rem + 2vw, 3.125rem)!important;
}




figcaption {
    color: #333;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    position: absolute;
    top: 85%;
    width: 35%;
    text-align: -webkit-left;
    padding-left: 15px;
}



.start_header p {
font-size: 1rem;
font-size: clamp(1rem, 0.825rem + 0.8750000000000001vw, 1.875rem);
}

h1{
	font-size: 3.125rem;
	font-size: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem) !important;
}

h2{
	font-size: 2.1875rem;
font-size: clamp(2.1875rem, 1.75rem + 2.1875vw, 4.375rem) !important;
}

h3{
font-size: 1rem;
font-size: clamp(1rem, 0.5125rem + 2.4375vw, 3.4375rem) !important;
}

.footer p {
font-size: 1.875rem;
font-size: clamp(1.875rem, 1.375rem + 2.5vw, 4.375rem); !important;
}

.address p {
font-size: 1.5625rem;
font-size: clamp(1.5625rem, 1.5625rem + 0vw, 1.5625rem) !important;
}

.loop h1{
font-size: 1.1875rem;
font-size: clamp(1.1875rem, 1.075rem + 0.5625vw, 1.75rem) !important;
}


li.menu-item-340:hover{
	color: #FB5994 !important;
}


.page-id-207 #footer_anfrage {
	color: #FB5994;
}

.page-id-315 #footer_anfrage {
	color: #40E0D0;
}

.page-id-423 #footer_anfrage {
	color: #E8FC30;
}

/* Grundstyling */
#teamname {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out; /* Sorgt für ein sanftes Einblenden */
    white-space: normal !important;
    line-height: 0.95;
}

.elementor-loop-container .e-loop-item:hover #teamname {
    opacity: 1;
    visibility: visible;
	transition: all 0.3s ease-in-out;
}

.team_loop img {
    /* Ändere 'background-color' zu 'filter' oder 'all' */
    transition: filter 0.7s ease;
    
    /* Optional: Verhindert leichtes Flackern in manchen Browsern */
    backface-visibility: hidden;
}

.team_loop img:hover {
    filter: brightness(50%);
}





/* Projektfilter*/
.e-filter-item[data-filter="__all"]:hover {
    color: #FFFFFF !important;
}

.e-filter-item[data-filter="kreation"]:hover {
    color: #FB5994 !important;
}

.e-filter-item[data-filter="digital"]:hover {
    color: #40E0D0 !important;
}

.e-filter-item[data-filter="produktion"]:hover {
    color: #E8FD31 !important;
}