/*
Theme Name: JOM-Portfolio
Theme URI: https://jom-group.com
Author: JOM com GmbH
Author URI: https://jom-group.com
Description: JOM Portfolio Theme
Version: 1.1
Text Domain: jom-portfolio
*/


/** 1 Allgemeine Styles **/
/* 1.0 Resets, Grundgerüst und Standards */
 
:root {
	
	--jom-pri-farbe-1-rgb: 255,56,82;
	--jom-pri-farbe-1: rgb(255,56,82);
	--jom-pri-farbe-2-rgb: 111,110,104;
	--jom-pri-farbe-2: rgb(111,110,104);

	--jom-sek-farbe-1-rgb: 185,50,65;
	--jom-sek-farbe-1: rgb(185,50,65);
	--jom-sek-farbe-2-rgb: 76,76,76;
	--jom-sek-farbe-2: rgb(76,76,76);
	--jom-sek-farbe-3-rgb: 75,63,55;
	--jom-sek-farbe-3: rgb(75,63,55);
	--jom-sek-farbe-4-rgb: 163,132,104;
	--jom-sek-farbe-4: rgb(163,132,104);
	--jom-sek-farbe-5-rgb: 208,191,165;
	--jom-sek-farbe-5: rgb(208,191,165);
	--jom-sek-farbe-6-rgb: 169,169,169;
	--jom-sek-farbe-6: rgb(169,169,169);
	--jom-pri-farbe-w-rgb: 255,255,255;
	--jom-pri-farbe-w: rgb(255,255,255);
	
	--grosser-abstand: 100px;
	--voller-abstand: 70px;
	--halber-abstand: 30px;
	
	--alpha-10: 0.1;
	--alpha-20: 0.2;
	--alpha-25: 0.25;
	--alpha-30: 0.3;
	--alpha-40: 0.4;
	--alpha-50: 0.5;
	--alpha-60: 0.6;
	--alpha-70: 0.7;
	--alpha-75: 0.75;
	--alpha-80: 0.8;
	--alpha-90: 0.9;
	--alpha-100: 1;
	
	--schrift-primary: 'Roboto', sans-serif;
  	--schrift-secondary: 'Roboto', sans-serif;
}

html,body {
	width: 100%;
	margin: 0 auto;
	min-width: 320px;
	font-family: var(--schrift-primary);
	line-height: 1.5em;
	color: var(--jom-sek-farbe-2);
	max-width: 1920px;
	-webkit-text-size-adjust: none;
	scroll-behavior: smooth;
	scrollbar-width: thin; /* Dünne Scrollbar */
	scrollbar-color: linear-gradient(45deg, #6a11cb, #2575fc) #e0e0e0; /* Balken und Hintergrund */
	transition: 0.5s all;
}

/* Inaktiver Hintergrund bei aktiver Lightbox; Scrollen deaktivieren */
body.inaktiv {
	overflow: hidden!important; 
}

* {
	font-family: 'Roboto', sans-serif;
	/*color: var(--jom-sek-farbe-2);*/

	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	-webkit-tap-highlight-color: transparent; /* Deaktiviert den Highlight-Effekt */
	tap-highlight-color: transparent;
	
    outline: none; /* Optional: entfernt den Umrandungsfokus */
}
	

/* UI-Font */

.ui-font {
      font-family: 'UI-Font';
      font-style: normal;
      font-weight: normal;
      speak: never;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
     
      /* For safety - reset parent styles, that can break glyph codes */
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */

/* Allgemeines Styling für WebKit-basierte Browser (Chrome, Edge, Safari) */

/* Admin Toolbar */
/*#wpadminbar{ display:none; background-color: var(--jom-pri-farbe-1);}
.customize-support #menue{ margin-top: 140px; }
.customize-support .kopfzeile{ top:30px;}
*/


/* 1.1 Grundgeruest */

header{
    position: fixed;
	display: flex;
    justify-content: center;
    align-items: center;
    top: 0; /* Direkt unter der WordPress Adminbar */
    left: 0;
    width: 100%;
	height: 60px;
	padding: 0 20px;
    z-index: 999;
    background-color: #333;
    transition: height 0.3s ease;
}

main{	
	position: relative;
	display: block;
	width: 100%;
	margin-top: 60px;
	border: 0px dashed black;
	transition: height 0.3s ease;
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 0px solid black;
	margin: 0;
	padding: 0;
}

footer{
	position: relative;
	display: block;
	/*
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--jom-sek-farbe-6);
	color: var(--jom-pri-farbe-w);
	padding-top: var(--voller-abstand);
	padding-right: 15px;
	padding-bottom: var(--voller-abstand);
	padding-left: 15px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;*/
}


/* 1.2 Kopfzeile */

.kopfzeile-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	height: 100%;
	padding: 0;
}

.kopfzeile-links {
    display: flex;
    align-items: center;
    flex: 1; /* Links und Rechts haben gleiche Flex-Verteilung */
}

.kopfzeile-mitte {
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
    flex: 1;
	height: 100%;
}

.kopfzeile-rechts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}


/* 1.2.1 Logo */

.kopfzeile-mitte .logo {
    display: block;
    text-decoration: none;
	text-align: center;
	height: 90%;
	max-height: 70px;
}

.kopfzeile-mitte .logo img {
    width: auto;
    height: 100%;
}


/* 1.2.2 Navigation */

.menu-knopf {
    position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    left: 20px;  
    width: 40px;
    height: 40px;
	z-index: 1000;
    cursor: pointer;
	border: 0px solid red;
	transition: all 0.3s ease;
}

.menu-knopf__burger {
    width: 35px;
    height: 4px;
    background-color: var(--jom-pri-farbe-w);
    border-radius: 5px;
    transition: all 0.3s ease;
    position: relative;
}

.menu-knopf__burger::before,
.menu-knopf__burger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--jom-pri-farbe-w);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.menu-knopf__burger::before { transform: translateY(-10px);}
.menu-knopf__burger::after { transform: translateY(10px);}

/* Transformation beim Klicken */
.menu-knopf.open .menu-knopf__burger {
    transform: translateX(-50px);
    background-color: transparent;
}

.menu-knopf.open .menu-knopf__burger::before {
    transform: rotate(45deg) translate(35px, -35px);
}

.menu-knopf.open .menu-knopf__burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
}

/* Navigation Menü */
.nav-menu {
    position: fixed;
    left: -100%;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: var(--jom-pri-farbe-1);
    box-shadow: 2px 0 50px rgba(0, 0, 0, 0.4);
    transition: all 0.5s ease-in-out;
    z-index: 999;
}

/* Anpassung der WordPress Menüstruktur */
.nav-menu .menu {
    list-style: none;
    padding: 100px 20px 100px 35px;
    position: relative;
}

.nav-menu .menu-item {
    margin-bottom: 20px;
}

.nav-menu .menu-item a {
    text-decoration: none;
    font-size: 1.4rem;
    color:  var(--jom-pri-farbe-w);
    transition: color 0.3s;
    position: relative;
}

/* Hover Zustand für Desktop */
.nav-menu .menu-item a:hover {
    color: var(--jom-sek-farbe-2);
}

/* Indikator für die aktive Seite */
.nav-indikator {
    position: absolute;
    left: 20px;
    width: 4px;
    height: 50px;
    background-color: var(--jom-sek-farbe-1);
    transition: all 0.3s ease;
    transform: translateY(0);
}

/* Wenn das Menü geöffnet wird */
.nav-menu.open {
    left: 0;
}

/* Aktiver Menüpunkt */
.nav-menu .current-menu-item a {
    color: var(--jom-sek-farbe-2); /* Markierung der aktiven Seite */
}

/* Desktop Hover Indikator */
.nav-menu .menu-item a.active {
    color: var(--jom-sek-farbe-2);
}

/* Menu Logo */
.nav-logo {
    position: absolute;
    bottom: 20px; /* Abstand zum unteren Rand */
    left: 50%;
    transform: translateX(-50%); /* Zentriert das Logo horizontal */
    width: 80%; /* Breite des Logos, passt sich dem Menü an */
}

.nav-logo .logo-svg {
    width: 100%;
    height: auto;
    max-width: 150px; /* Optional: maximale Breite des Logos */
}


/* 1.2.3 Sprachwahl-Dropdown */

#sprach-selektor {
	position: relative;
	cursor: pointer;
}

#sprach-selektor .sprachen {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	background: var(--jom-pri-farbe-w);
	width: 70px;
	text-align: center;
	top: 45px;
	opacity: 0;
	display: none;
	border-radius: 4px;
	margin-left: -35px;
	left: 50%;
	transition: all 1s ease-out;
	z-index: 10;
}

#sprach-selektor .sprachen:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid var(--jom-pri-farbe-w);
	top: -8px;
	left: 50%;
	margin-left: -8px;
}

#selektiert {
	width: 40px;
	height: 40px;
	color: var(--jom-pri-farbe-w);
	border-radius: 50%;
	background: #000;
	line-height: 40px;
	font-size: 16px;
	text-align: center;
	text-transform: uppercase;
}

#sprach-selektor .sprachen.aktiv {
	top: 50px;
	opacity: 1;
	display: block;
}

#sprach-selektor .sprachen .sprache a {
	text-decoration: none;
	color: #666;
	font-weight: 600;
	padding: 5px 15px;
	padding-top: 0;
	border-bottom: 1px solid var(--jom-pri-farbe-w);;
	display: block;
	text-transform: uppercase;
}

#sprach-selektor .sprachen .sprache:first-child a {
	padding-top: 15px;
}

#sprach-selektor .sprachen .sprache:last-child a {
	padding-bottom: 15px;
	border-radius: 4px;
}


/* 1.3 Sektionen */
/* Sektionen definieren */

/* ACF Vorgaben im Auswahfeld

kein-abstand : kein Abstand
standard : Abstand oben und unten (Standard)
abstand-oben : Abstand oben
abstand-unten : Abstand unten
halber-abstand : Halber Abstand oben und unten
halber-abstand-oben : Halber Abstand oben
halber-abstand-unten : Halber Abstand unten
halber-abstand-oben-voller-unten : Halber Abstand oben - voller unten
halber-abstand-unten-voller-oben : Halber Abstand unten - voller oben
vollbild : Vollbildfläche
volle-breite : Volle Breite
*/

.inhalt{
	position: relative;
	display: block;
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
	max-width: 1080px;
	border: 0px solid orange;
	padding: 0;
}

.sektion,
.sektion.standard{
	padding-top: var(--voller-abstand);
	padding-right: 15px;
	padding-bottom: var(--voller-abstand);
	padding-left: 15px;
	border:0px solid black;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.sektion.kein-abstand {
	padding-top: 0px;
	padding-bottom: 0px;
}

.sektion.abstand-oben {
	padding-top: var(--voller-abstand);
	padding-bottom: 0px;
}

.sektion.abstand-unten {
	padding-top: 0;
	padding-bottom: var(--voller-abstand);
}

.sektion.halber-abstand {
	padding-top: var(--halber-abstand);
	padding-bottom: var(--halber-abstand);
}

.sektion.halber-abstand-oben {
	padding-top: var(--halber-abstand);
	padding-bottom: 0;
}

.sektion.halber-abstand-unten {
	padding-top: 0;
	padding-bottom: var(--halber-abstand);
}

.sektion.halber-abstand-oben-voller-unten {
	padding-top: var(--halber-abstand);
	padding-bottom: var(--voller-abstand);
}

.sektion.halber-abstand-unten-voller-oben {
	padding-top: var(--voller-abstand);
	padding-bottom: var(--halber-abstand);
}

.sektion.vollbild{
	height: calc(100vh - 60px);
}

.sektion.volle-breite .inhalt {
	max-width: 100%;
}

.sektion.vollbild.oben{
	justify-content: start;
	align-self: start; 
}

.sektion.vollbild.mittig{
	justify-content: center;
	align-self: center; 
}

.sektion.vollbild.unten{
	justify-content: end;
	align-self: end; 
}


/*
.sektion.vollbild .textblock {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}*/



/* 1.4 Fussbereich/Footer */
/* Den Seitenabbinder definieren */

.footer-header{
	height: 5px;
 	padding-top: 0;
	padding-bottom: 0;
	background-color: var(--jom-sek-farbe-2);
}

.footer-header .inhalt{
	display: flex;
	justify-content: center;
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
	max-width: 1080px;
	padding: 0;
}

.footer-header .balken{
	position: relative;
	display: flex;
	width: 100%;
	height: 5px;
	top: -5px;
	margin: 0;
	padding: 0;
	background-color: var(--jom-pri-farbe-1);
}

.footer-header .knopf-nach-oben{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: -35px;
	width: 70px;
	height: 70px;
	margin: 0;
	padding: 0;
	background-color: var(--jom-pri-farbe-1);
	transform: rotate(0deg);
	border-radius: 5px;
	cursor: pointer;
}

.footer-header .knopf-nach-oben i{
	display: flex;
	font-size: 3em;
	color: var(--jom-pri-farbe-w);
	justify-content: center;
	margin-top: 7px;
}



.footer-inhalt{
	padding-top: var(--halber-abstand);
	padding-bottom: var(--voller-abstand);
	background-color: var(--jom-sek-farbe-2);
}

.footer-inhalt .inhalt {
	flex-direction: column;
	display: flex;
	color: var(--jom-pri-farbe-w);
	}

.footer-inhalt .inhalt .spalte {
	width: 100%;
	margin-top: var(--halber-abstand);
}

.footer-inhalt .inhalt .spalte.links{ order: 1}
.footer-inhalt .inhalt .spalte.mitte{ order: 3}
.footer-inhalt .inhalt .spalte.rechts{ order: 2}

.footer-inhalt .inhalt .spalte.links address{
	text-align: center;
}

.footer-inhalt .inhalt .spalte.mitte p.copyright{
	text-align: center;
	font-size: 0.8em;
	margin: 0;
}

.footer-inhalt .inhalt .spalte.mitte p.copyright br{
	display: none;
}

.footer-inhalt .inhalt .spalte.rechts ul{
	margin: 0;
	padding: 0;
}

.footer-inhalt .inhalt .spalte.rechts li{
	list-style: none;
	font-size: 1.2em;
	font-weight: 600;
	text-align: center;
	color: var(--jom-pri-farbe-w);
	margin: 0;
}

.footer-inhalt .inhalt .spalte.rechts li.sekundaer{
	font-weight: 300;
}

.footer-inhalt .inhalt .spalte.rechts li.spacer {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

.footer-inhalt .inhalt .spalte.rechts li a{
	text-align: center;
	list-style: none;
	font-size: 1em;
	color: inherit;
	text-decoration: none;
}

.footer-inhalt .inhalt .spalte.rechts li.spacer  a{
  visibility: hidden;
}



/* 1.9 Headlines */

h1, h2, h3, h4{
	font-family: var(--schrift-primary);
	width: 100%;
	line-height: 1.25em;
	text-align: inherit;
}

h1{}

h2{
	font-weight: 800;
	font-size: 2.8em;
	line-height: 0.95em;
	text-transform: uppercase;
	margin: 0;
}

h3{
	font-weight: 300;
	font-size: 2em;
	line-height: 0.95em;
	text-transform: none;
	margin: 0;
}

h4{
	font-weight: 500;
	font-size: 1.2em;
	margin: 15px 0;
}


/* 1.3 Paragraphen */

p,
address{ 	
	display: block;
	width: 100%;
	font-weight: 300;	
	line-height: 1.15em;
	text-align: left;
	font-size: 1.2em;
	color: inherit;
}

address{
	font-style: normal;
}

.text-gruppe p{
	color: inherit;
}

.text-gruppe li{
	font-size: inherit;
	color: inherit;
}

.text-gruppe-2-spalten p{ 
	column-count: 1;
	color: inherit;
}

.text-gruppe-3-spalten p{ 
	column-count: 1;
	color: inherit;
}

.text-gruppe-4-spalten p{ 
	column-count: 1;
	color: inherit;
}

.sehr-kleiner-text p{ font-size: 0.77em!important; color: inherit;}
.kleiner-text p{ font-size: 1em!important; color: inherit;}
.standard-text p{ font-size: 1em; color: inherit;} 
.mittlerer-text p{ font-size: 1.2em; color: inherit;}
.grosser-text p{ font-size: 1.4em; color: inherit;}

.hero h2{font-size: 4.5em;}
.hero h3{font-size: 3.5em;}
.hero p{font-size: 1.8em;}

.mega-hero h2{font-size: 6em;}
.mega-hero h3{font-size: 5em;}
.mega-hero p{font-size: 2em;}



/* 1.4 Knöpfe */

a.schaltflaeche{
	position: relative;
	display: inline-block;
	padding: 10px 20px;
	color: var(--jom-sek-farbe-2);
    font-size: 1.6em;
	font-weight: 300;	
	text-decoration: none;
	text-align: center;
	background-color: transparent;
	border: 2px solid var(--jom-sek-farbe-2); /* JOM Standard Farbe */
    border-radius: 6px;
	cursor: pointer;
    transition: all 0.3s ease;
}

a.schaltflaeche:hover{
	transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
}

a.schaltflaeche.grosser-abstand {
	margin-top: var(--grosser-abstand);
	margin-bottom: var(--grosser-abstand);
}

a.schaltflaeche.standard-abstand{
	margin-top: var(--voller-abstand);
	margin-bottom: var(--voller-abstand);
}

a.schaltflaeche.halber-abstand {
	margin-top: var(--halber-abstand);
	margin-bottom: var(--halber-abstand);
}

a.schaltflaeche.kein-abstand {
	margin-top: 0px;
	margin-bottom: 0px;
}

a.schaltflaeche.oben{ margin-top: 0px;}
a.schaltflaeche.unten{ margin-bottom: 0px;}



/* Text Block */

.jom-text .linksbuendig{ text-align: left;}
.jom-text .rechtsbuendig{ text-align: right;}
.jom-text .zentriert{ text-align: center;}

.jom-text p{ color: inherit;}


.jom-text .bulletpoints{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* zentriert horizontal */
  justify-content: flex-start;
  padding: 0;
}

.jom-text .bulletpoints.vertikal{}
.jom-text .bulletpoints.horizontal{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
  gap: 20px; /* Abstand zwischen den Items */
  align-items: start; /* Top-Ausrichtung */
  padding-left: 0;
}

@media (max-width: 768px) {
  .jom-text .bulletpoints.horizontal {
    grid-template-columns: repeat(2, 1fr); /* 2 pro Zeile bei Tablet */
  }
}

@media (max-width: 480px) {
  .jom-text .bulletpoints.horizontal {
    grid-template-columns: 1fr; /* 1 pro Zeile bei Handy */
  }
}

.jom-text .bulletpoints li {
  display: flex;
  flex-direction: column;
  align-items: center; /* zentriert horizontal */
  justify-content: flex-start;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.15em;
  text-align: center;
  color: var(--jom-pri-farbe-w);
  padding: 10px;
  margin: 0 0 20px 0;
  list-style: none;
}

.jom-text .bulletpoints.kacheloptik li {
  background-color: rgba(0,0,0,0.25);
  border-radius: 7px;
  padding: 30px 25px!important;
}

.jom-text .bulletpoints.kacheloptik.dunkel li { background-color: rgba(0,0,0,0.25);}
.jom-text .bulletpoints.kacheloptik.hell li { background-color: rgba(255,255,255,0.25);}

.jom-text .bulletpoints.horizontal li {
  text-align: center;
  padding: 10px;
}

.jom-text .bulletpoints li.sehr-kleiner-text { font-size: 0.77em!important; }
.jom-text .bulletpoints li.kleiner-text { font-size: 1em!important; }
.jom-text .bulletpoints li.standard-text { font-size: 1em; } 
.jom-text .bulletpoints li.mittlerer-text { font-size: 1.2em; }
.jom-text .bulletpoints li.grosser-text { font-size: 1.4em; }

.jom-text .bulletpoints li:before,
.jom-text .bulletpoints li.iconflaeche-ausgefuellt:before{
  position: relative;
  display: block;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 2em!important;
  color: var(--jom-pri-farbe-w);
  background-color: var(--jom-sek-farbe-1);
  border-style: solid;
  border-width: 2px;
  border-color: var(--jom-sek-farbe-1);
  border-radius: 40px;
}

.jom-text .bulletpoints.grosser-abstand {
	margin-top: var(--grosser-abstand);
	margin-bottom: var(--grosser-abstand);
}

.jom-text .bulletpoints.standard-abstand{
	margin-top: var(--voller-abstand);
	margin-bottom: var(--voller-abstand);
}

.jom-text .bulletpoints.oben-abstand{
	margin-top: var(--voller-abstand);
	margin-bottom: 0px;
}

.jom-text .bulletpoints.unten-abstand{
	margin-top: 0px;
	margin-bottom: var(--voller-abstand);
}

.jom-text .bulletpoints.halber-abstand {
	margin-top: var(--halber-abstand);
	margin-bottom: var(--halber-abstand);
}

.jom-text .bulletpoints.halber-abstand-oben {
	margin-top: var(--halber-abstand);
	margin-bottom: 0px;
}

.jom-text .bulletpoints.halber-abstand-unten {
	margin-top: 0px;
	margin-bottom: var(--halber-abstand);
}

.jom-text .bulletpoints.halber-abstand-oben-voller-unten{
	margin-top: var(--halber-abstand);
	margin-bottom: var(--voller-abstand);
}

.jom-text .bulletpoints.halber-abstand-unten-voller-oben{
	margin-top: var(--voller-abstand);
	margin-bottom: var(--halber-abstand);
}

.jom-text .bulletpoints.kein-abstand {
	margin-top: 0px;
	margin-bottom: 0px;
}

.jom-text .bulletpoints li.icon-hg-jom-rot:before{
  background-color: var(--jom-pri-farbe-1);
  border-color: var(--jom-pri-farbe-1);
}

.jom-text .bulletpoints li.icon-hg-jom-altrot:before{
  background-color: var(--jom-sek-farbe-1);
  border-color: var(--jom-sek-farbe-1);
}

.jom-text .bulletpoints li.icon-hg-weiss:before{
  background-color: var(--jom-pri-farbe-w);
  border-color: var(--jom-pri-farbe-w);
}

.jom-text .bulletpoints li.icon-hg-grau:before{
  background-color: var(--jom-sek-farbe-6);
  border-color: var(--jom-sek-farbe-6);
}

.jom-text .bulletpoints li.icon-hg-dunkelgrau:before{
  background-color: var(--jom-sek-farbe-2);
  border-color: var(--jom-sek-farbe-2);
}

.jom-text .bulletpoints li.icon-jom-rot:before{ color: var(--jom-pri-farbe-1);}
.jom-text .bulletpoints li.icon-jom-altrot:before{ color: var(--jom-sek-farbe-1);}
.jom-text .bulletpoints li.icon-weiss:before{ color: var(--jom-pri-farbe-w);}
.jom-text .bulletpoints li.icon-grau:before{ color: var(--jom-sek-farbe-6);}
.jom-text .bulletpoints li.icon-dunkelgrau:before{ color: var(--jom-sek-farbe-2);}
.jom-text .bulletpoints li.iconflaeche-rahmen:before{ background: none;}
.jom-text .bulletpoints li.iconflaeche-durchsichtig:before{ background: none; border: none; font-size: 2.05em;}



/* Werbemittel Block */

.jom-werbemittel .linksbuendig{ text-align: left;}
.jom-werbemittel .rechtsbuendig{ text-align: right;}
.jom-werbemittel .zentriert{ text-align: center;}

.jom-werbemittel .headlineverbund h2,
.jom-werbemittel .headlineverbund h3{
	border: 0px solid red;
	margin: 0 0 0 0;
}

.jom-werbemittel .headlineverbund h2,
.jom-werbemittel .headlineverbund h3{
	/*font-size: 2em!important;*/
	line-height: 0.9em;
}



/* Trenner Block */

.jom-trenner .inhalt{
	display: flex;
	justify-content: center;
}

.trenner{
	position: relative;
	display: flex;
	width: 100px;
	height: 5px;
	margin: 0;
	padding: 0;
}

.kleiner-trenner .trenner{ width: 20%;}
.standard-trenner .trenner{ width: 33%;}
.mittlerer-trenner .trenner{ width: 66%;}
.grosser-trenner .trenner{ width: 100%;}



/* Bilder Block */

.jom-bild.volle-breite { padding: 0;}
.jom-bild .inhalt{ display: flex;}

.jom-bild .inhalt.linksbuendig img { justify-self: flex-start;}
.jom-bild .inhalt.rechtsbuendig img { justify-self: flex-end;}
.jom-bild .inhalt.zentriert img { justify-self: center;}

.jom-bild img,
.jom-bild .horizontal img,
.jom-bild .vertikal img{ 
	display: block;
	width: 100%;
	height: auto;
}

.jom-bild .vertikal img{ 
	width: auto;
	height: 100vh;
}


/* Video Block */

.jom-video.volle-breite,
.jom-video.vollbild{ padding: 0;}

.jom-video video{
	display: block;
	width: 100%;
	height: auto;
}

.jom-video video.video-desktop{
	display: none;
}

.jom-video video.video-mobile{
	display: block;
}





 /* Pfeil */
.pfeil-runter{
    width: 40px;
    height: 40px;
    transform: rotate(135deg);
    border-right: 4px solid #fff;
    border-top: 4px solid #fff;
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.pfeil-runter{
    position: absolute;
    bottom: 7%;
    left: 50%;
    margin-left: -20px;
    animation: do-levitation 1.2s alternate ease-in-out infinite;
    z-index: 3;
    z-index: 3;
}

	@keyframes do-levitation {
		0% {
		  transform:translateY(-20px) rotate(135deg);
		}
		100% {
		  transform:translateY(0) rotate(135deg);
		}
	  }


  /* 3.0 Werbemittel Darstellung */
  /* 3.1 Werbemittelformat */

.sektion .werbemittelformate-container{
    position: relative;
    background: none;;
    width: 100%;
    height: auto;
	margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Abstand zwischen den Kacheln */
    justify-content: center; /* Zentriert die Kacheln horizontal */
  }

.werbemittelformat-box {
    position: relative;
    aspect-ratio: 300/300;
    width: 100%;
    max-width: 500px /*350px*/;
    background-color: #eaeaea;
    border-radius: 10px;
    text-align: center; /* Zentriert den Text innerhalb der Kachel */
    transition: 0.5s all;
    overflow: hidden;
	font-weight: 500;
  }

.werbemittelformat-box:hover {
    transform: scale3d(1.1,1.1,1.1);
	background-color: #cccccc;
  }

.werbemittelformat-box .teaserinfo {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index:9;
    color: #FFFFFF;
    font-size: 2em;
    font-weight: bold;
  }

.werbemittelformat-box img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }


  /* 3.2 Werbemittel-Preview Kacheln */

.werbemittel-preview-container{
	display: flex; 
	opacity: 0; /* Erst einmal ausblenden bis der SlickSlider final initialisiert ist */
	transition: opacity 0.5s ease; 
	border: 0px solid red; 
  }

/* Wird nur auf Desktop benoetigt */
.werbemittel-preview-deckblatt-desktop{
	position: relative; 
	display: none; 
	flex-direction: column; 
	justify-content: center; 
	width: 40%; 
	height: 100vh;
	color: #ffffff; 
	padding: 30px;
	background: rgba(0, 0, 0, 0.7);
  }

/* Wird mobile auf 100% aus gesteuert */
.werbemittel-preview-slider{}
#werbemittel-preview{
	position: relative; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	width: 100%; 
	border: 0px solid yellow; 
	overflow: hidden
  }

.werbemittel-preview-kachel{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 300px;
	max-height: 600px;
    margin: 10px;
	border-radius: 7px;
	overflow: hidden;
	background-color: rgba(0,0,0,0.7);
  }

.werbemittel-preview-kachel.klein{
	max-width: 300px;
	max-height: 600px;
  }

.werbemittel-preview-kachel.mittel{
	max-width: 300px;
	max-height: 600px;
  }

.werbemittel-preview-kachel.fullhd{
	max-width: 1067px;
	max-height: 600px;
  }
  
.werbemittel-preview-kachel.klein img,
.werbemittel-preview-kachel.mittel img,
.werbemittel-preview-kachel.fullh img{ 
	width: 100%;
	height: 100%;
}

/* Mobile Preview Deckblätter */
.werbemittel-preview-deckblatt,
.werbemittel-preview-deckblatt-2{
	max-width: 300px;
	padding: 15px 15px;
	background-color: rgba(0,0,0,0.6);
	color: var(--jom-pri-farbe-w)!important;
  }

.werbemittel-preview-deckblatt-2{
	padding: 25px 35px;
	background-color: rgba(var(--jom-pri-farbe-1-rgb) , var(--alpha-80));
}

.werbemittel-preview-deckblatt-bild{
	postion: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	max-height: 290px;
	border-radius: 4px;
	margin-bottom: 10px;
	background: rgba(var(--jom-sek-farbe-6-rgb) , var(--alpha-80));
	overflow: hidden;
}

.werbemittel-preview-deckblatt img{
    position: relative;
	margin: auto;
    display: block;
	height: 120%;
	margin-top: -6%;
	width: auto;
	border-radius: 4px;
	margin-bottom: 10px;
   }

.werbemittel-preview-deckblatt h2,
.werbemittel-preview-deckblatt p,
.werbemittel-preview-deckblatt li,
.werbemittel-preview-deckblatt-2 p,
.werbemittel-preview-deckblatt-2 li{
    position: relative;
    display: block;
	color: var(--jom-pri-farbe-w);
   }

.werbemittel-preview-deckblatt h2{
	font-size: 1.5em;
}

.werbemittel-preview-deckblatt p,
.werbemittel-preview-deckblatt-2 p{
	font-size: 1.1em;
   }

.werbemittel-preview-deckblatt li,
.werbemittel-preview-deckblatt-2 li{
	font-size: 1.1em;
	list-style: none;
   }

.werbemittel-preview-deckblatt-2 ul{
	padding: 0;
}

.werbemittel-preview-deckblatt-2 li{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center; /* Text und evtl. andere Inhalte im li zentrieren */
	/*margin-left: 70px;*/
	margin-bottom: 30px;
	font-weight: 300;
	text-align: center;
}
.werbemittel-preview-deckblatt-2 li:before{
  	margin-bottom: 5px;
  	font-size: 1.6em;
	color: var(--jom-pri-farbe-w);
	background: var(--jom-sek-farbe-1);
	border-radius: 40px;
	padding: 10px;
	transform: rotate(0deg);
	
   }


/* Backup */
/*
.werbemittel-preview-deckblatt-2 ul{
	border: 0px solid yellow;
	padding: 0 0 0 20px;
}

.werbemittel-preview-deckblatt-2 li{
	margin-left: 70px;
	margin-bottom: 30px;
	font-weight: 300;
	min-height: 50px;
}
.werbemittel-preview-deckblatt-2 li:before{
	position: absolute;
	margin: -5px 0 0 -90px;
	font-size: 1.8em;
	color: var(--jom-pri-farbe-w);
	background: var(--jom-sek-farbe-1);
	border-radius: 40px;
	padding: 10px;
	transform: rotate(0deg)
   }

*/


/*
.werbemittel-preview-kachel.klein{
	max-width: 300px;
	max-height: 600px;
  }

.werbemittel-preview-kachel.mittel{
	max-width: 800px;
	max-height: 600px;
  }

.werbemittel-preview-kachel.fullhd{
	max-width: 1067px;
	max-height: 600px;
  }*/

.werbemittel-preview-info{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	max-height: 600px;
	bottom: 0;
	padding: 10px;
	color: var(--jom-pri-farbe-w);
	/*background-image: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0), rgba(0,0,0,0));*/
  }

.werbemittel-preview-hinweis{
	position: absolute;
	display: block;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--jom-sek-farbe-1);
	padding: 40px 20px;
}

.werbemittel-preview-hinweis.desktop .icon{
	fill: var(--jom-sek-farbe-w);
	width: 100%;
	text-align: center;
}

.werbemittel-preview-hinweis.desktop .icon svg{
	width: 50%;
	height: auto;
}

.werbemittel-preview-hinweis.desktop .hinweistext{
	position: relative;
	display: block;
	width: 100%;
	font-size: 1.5em;
	font-weight: 300;
	text-align: center;
	color: var(--jom-pri-farbe-w);
}

/*
.werbemittel-preview-info-text{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	max-height: 140px;
	bottom: 0;
	padding: 13px 10px 10px 10px; 
	color: var(--jom-pri-farbe-w);
	font-weight: 300;
	line-height: 1.25em;
	background-color: rgba(0,0,0,0.7);
  }

.werbemittel-preview-info-text .format{
	background-color: var(--jom-pri-farbe-1);
	color: var(--jom-pri-farbe-w); 
	font-weight: 300;
	padding: 2px 6px;
  }

.werbemittel-preview-info-text .werbemitteltitel{
	display: inline-block;
	color: var(--jom-pri-farbe-w); 
	font-size: 1.5em;
	font-weight: 500;
	text-transform: uppercase;
	margin: 13px 0px 3px 0px;
  }

.werbemittel-preview-info-text .kurzbeschreibung{
	color: var(--jom-pri-farbe-w); 
	font-size: 0.9em;
  }*/

.werbemittel-preview-caption { 
	position: absolute;
	display: block; 
	width: 100%;
	right: 0px;
	bottom: 0;
	color: var(--jom-pri-farbe-w);
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 1.8em;
	padding: 10px;
	height: auto;
	text-align: center;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.werbemittel-preview-link{
    position: relative;
    display: block;
	width: 100%;
	height: 100%;
    border: 0px solid yellow;
  }

.werbemittel-preview-container .werbemittel-preview-link:nth-child(odd) {}
.werbemittel-preview-container .werbemittel-preview-link:nth-child(even) {}

.werbemittel-preview-container .slick-slide{ 
	filter: grayscale(1); 
	opacity: 0.4; 
	transition: 0.5s all;
	transform: scale3d(0.9,0.9,0.9);
  }

.werbemittel-preview-container .slick-slide .werbemittel-preview-info,
.werbemittel-preview-container .slick-slide .werbemittel-preview-info-text{ 
	margin-bottom: -600px;
	transition: 0.5s all;
  }

.werbemittel-preview-container .slick-slide .werbemittel-preview-info-text{ 
	margin-bottom: -140px;
  }

  /*.werbemittel-preview-container .slick-slide .werbemittel-preview-link{ 
	opacity: 0;
  }*/

.werbemittel-preview-container .slick-slide.slick-current{
	filter: grayscale(0);
	opacity: 1;
	transform: scale3d(1,1,1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  }

.werbemittel-preview-container .slick-slide.slick-current .werbemittel-preview-info,
.werbemittel-preview-container .slick-slide.slick-current .werbemittel-preview-info-text{ 
	margin-bottom: 0px;
  }

  /*.werbemittel-preview-container .slick-slide.slick-current .werbemittel-preview-info::before{ 
	font-family: 'UI-Font';
	content: '\e806';
	font-size: 5em;
	position: absolute;
	left: 20px;
	bottom: 40px;
	  
  }*/
  /*
  .werbemittel-preview-container .slick-slide.slick-current .werbemittel-preview-link{
	opacity: 1;
  }*/


/* Benutzerdefinierte Cursor */

.cursor {
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50%;
	background-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(5px);
    pointer-events: none;
    visibility: hidden; /* Standardmäßig ausgeblendet */
    transform: scale(0);
    transition: transform 0.2s ease-in-out, visibility 0s 0.1s; /* Verzögerung für Sichtbarkeit */
	box-shadow: 0 0 50px rgba(0,0,0,0.6);
}

.cursor::before{
	position: absolute;	
	width: 64px;
    height: 64px;
	content: '';
    border: 1px solid var(--jom-pri-farbe-w);;
	border-radius: 50%;
	animation-name: cursor-pulsieren;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	margin: 0;
}

.cursor::after{
	display: flex;
	align-items: center!important;
    justify-content: center!important;
	width: auto;
	height: 70px;
	content: 'Show Preview';
	font-size: 0.8em;
	color: #222222;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	line-height: 1em;
	margin-top: -2px;
	
}

.werbemittel-preview-kachel a:hover .cursor {
    visibility: visible;
    transform: scale(1);
    transition: transform 0.2s ease-in-out, visibility 0.1s; /* Sichtbarkeit sofort bei Hover */
}

@keyframes cursor-pulsieren {
    0% {
        transform: scale(1);
		opacity: 0;
    }
	25% {
		opacity: 1;
    }
	100% {
		opacity: 0;
		transform: scale(1.4);
	}
}

.werbemittel-preview-kachel a{
	cursor: none;
}




/* JOM Lightbox */

#jom-lightbox-overlay {
    position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
	margin: 0;
	padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 999!important;
	overflow: hidden!important;
}

#jom-lightbox-content {
	position: fixed;
    display: flex;
	align-items: center;
    justify-content: center;
	/*overflow: scroll;*/
    background: none;
    margin: 0;
    width: 100%;
	height: 100%;
	overflow: hidden;
    /*max-width: 95%;
    max-height: 95%;*/
}

#jom-lightbox-iframe {
	display: flex!important;
	align-items: center!important;
    justify-content: center!important;
	width: 100%;
    height: 100%;
	overflow: hidden;
}

#jom-lightbox-close {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    border: none;
    cursor: pointer;
    z-index: 1000;
    padding: 0;
    width: 60px;
    height: 60px;
	border-radius: none;
}

#jom-lightbox-close:before{
	font-family: 'UI-Font';
    font-size: 30px;
    line-height: 1;
    opacity: 1;
    color: var(--jom-pri-farbe-w);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	content: '\e80d';
}

#jom-lightbox-close:hover,
#jom-lightbox-close:focus{
    background-color: var(--jom-pri-farbe-1);
}


/*#jom-lightbox-close svg {
    fill: none;
    stroke: #ffffff;
    transition: stroke 0.2s ease;
	width: 30px;
}

#jom-lightbox-close:hover svg {
    stroke: #ffcc00;
}
*/

button.open-jom-lightbox {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}







/* Hintergrund-Canvas für Funkenflug */

#jom-funkenflug{ 
	position: fixed; 
	top: 0; 
	left:0; 
	width: 100%; 
	height: 100%;
	z-index: 990;
	pointer-events: none;
}

.wpml-ls-statics-footer{ display: none!important;}



/*
.acf-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
}

.icon-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.icon-tile.selected {
    border-color: #0073aa;
    background-color: #f0f8ff;
}

.icon-tile i {
    font-size: 24px;
    margin-bottom: 5px;
}

.icon-label {
    font-size: 12px;
    color: #555;
}

.icon-tile:hover {
    border-color: #0073aa;
}*/



/* Kontaktformular */

form {
	margin-top: 40px;
	margin-bottom: 40px;
}

.form-grid {
  display: grid;
  gap: 0 1rem;
}

.grid-col-two {
  grid-template-columns: 1fr 1fr;
}

.grid-col-one {
  grid-template-columns: 1fr;
}

.form-grid-item {
  width: 100%;
}

.form-grid-item p{
	font-size: 1em;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 1.25rem 1.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
  transition: border-color 0.3s ease;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: #0077cc;
}

textarea {
  min-height: 120px;
  resize: vertical;margin-top:20px;
}

.check-boxes {
  margin-top: -1rem;

}

.check-boxes label {
  display: flex;
  align-items: center;
  max-width: 500px;
  font-size: 1rem;
}

input[type="checkbox"] {
  margin-right: 0.5rem;
  width: 20px;
  height: 20px;
}



input[type="submit"]{
	position: relative;
	display: inline-block;
	padding: 7px 15px;
	color: var(--jom-sek-farbe-3);
    font-size: 1em!important;
	font-weight: 300!important;	
	text-decoration: none;
	text-align: center;
	background-color: transparent;
	border: 2px solid var(--jom-sek-farbe-3);
    border-radius: 6px;
	cursor: pointer;
    transition: all 0.3s ease;
}

input[type="submit"]:hover{
	transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
}

@media (max-width: 768px) {
  .grid-col-two {
	grid-template-columns: 1fr;
  }
}


/* Fehlerhafte Felder */
.wpcf7-not-valid {
  border-color: var(--jom-pri-farbe-1)!important;
  border-width: 2px!important;
  background-color: #fff0f0;
}

/* Fehlermeldung unter dem Feld */
.wpcf7-not-valid-tip {
  display: block;
  color:  var(--jom-pri-farbe-1);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  padding-left: 0.25rem;
}

/* Erfolgsnachricht */
.wpcf7-mail-sent-ok {
  border: 1px solid #2ecc71;
  background-color: #eafaf1;
  color: #2ecc71;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Fehlermeldung (z. B. bei Serverfehler) */
.wpcf7-validation-errors {
  border: 3px solid var(--jom-pri-farbe-1);;
  color: var(--jom-pri-farbe-1);;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Loader (optional schöner Spinner) */
.wpcf7 .ajax-loader {
  display: inline-block;
  margin-left: 10px;
  border: 2px solid #ccc;
  border-top: 2px solid #0077cc;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.6s linear infinite;
}

/* Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.wpcf7-response-output {
  padding: 1rem 1.25rem;
  border-radius: 7px;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Erfolgreich gesendet */
.wpcf7-mail-sent-ok {
  background-color: #eafaf1;
  color: #2ecc71;
  border: 1px solid #2ecc71;
}

/* Validierungsfehler (z. B. Pflichtfelder leer) */
.wpcf7-validation-errors {
  background-color: #fff0f0;
  color: #e74c3c;
  border: 1px solid #e74c3c;
}

/* Allgemeine Fehlernachricht (Serverfehler, etc.) */
.wpcf7-mail-sent-ng {
  background-color: #fffbe6;
  color: #f39c12;
  border: 1px solid #f39c12;
}