/*
Theme Name: Mein Child-Theme
Template: Divi
*/

/* ========================  Schrift wird autmatisch getrennt mit -Bindestrich   ======================== */
/* 🔹 Globale Silbentrennung & Umbrüche */
body {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto; /* automatische Silbentrennung */
}

h1, h2, h3, h4, h5, h6 {
  white-space: normal !important;         /* erlaubt Zeilenumbruch */
  word-wrap: break-word !important;       /* alte Eigenschaft, für ältere Browser */
  overflow-wrap: anywhere !important;     /* moderne Variante */
}

h5, 
h5 span {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
  min-width: 0; /* falls Flexbox */
  }

.et_pb_section{
  padding: 1rem 0 !important;
  margin-bottom: 2rem !important;
}

.breadcrumbs {
  padding: 1rem !important;
  margin: 0 !important;
}


/* ========================  Navigation Menüpunkte   ======================== */
/* Navigation Menüpunkte*/
#main-header .nav li a {
  font-weight: 400 !important;
	position: relative;
}

#main-header .nav li ul li a {
  margin: 10px 10px !important;
  line-height: 1.4;
	background-color: transparent !important;
}

#main-header .nav li ul li a:hover {
  background-color: transparent !important;
}

#main-header .nav li a:hover{
	font-weight:600 !important;
	color: #e11d48 !important;
}
#main-header .nav li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: -10px;
  width: 0%;
  height: 2px;
  background-color: #e11d48;
  transition: width 0.3s ease;
}

#main-header .nav li a:hover::before {
  width: 100%;
}

/* Aktiver Menüpunkt + Parent von aktivem Child */
#main-header .nav .current-menu-item > a::before,
#main-header .nav .current_page_item > a::before,
#main-header .nav .current-menu-ancestor > a::before,#main-header .nav .current_page_parent > a {
  width: 100%;
}

/* Schriftgewicht bei aktivem Menüpunkt und Parent */
#main-header .nav .current-menu-item > a,
#main-header .nav .current_page_item > a,
#main-header .nav .current-menu-ancestor > a, #main-header .nav .current_page_parent > a {
  font-weight: 600 !important;
  		color: #e11d48 !important;
}

/* ========================  Button-Styles   ======================== */

/* Primary-Button */
.et_pb_button .btn-primary{
		display: inline-block;
    text-align: center;
}

.btn-primary{
	font-family:'Montserrat', sans-serif;
}
.btn-primary:hover{
	font-weight:600;
}

/* Button 2nd */
 .et_pb_button.btn-secondary {
  background-color: #ffffff !important;
  color: #E11D48 !important;
  border: 1px solid #E11D48 !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.et_pb_button.btn-secondary:hover {
  font-weight: 600 !important;
  color: #E11D48 !important;
  background-color: #ffffff !important;
  border-color: #E11D48 !important;
}

/* Button 3rd rausgelöscht siehe unten */



/* Externer Button rot */
  .btn-extern {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Text und Icon */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #E11D48 !important;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: font-weight 0.3s ease;
  }

  .btn-extern i {
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .btn-extern:hover {
    font-weight: 600;
    color: #E11D48 !important;
  }

  .btn-extern:hover i {
    opacity: 1;
    transform: translateX(0);
  }

/* Externer Button für Footer weiß*/
 /* ------------------------------
   Footer Buttons (Footer)
--------------------------------*/
.et_pb_button.btn-third {
  background-color: transparent !important;
  color: #E11D48 !important;
  border: 1px solid transparent !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400 !important;     /* normal */
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: font-weight 0.3s ease, color 0.3s ease;
  box-sizing: border-box !important;
  text-align: left !important;
  text-decoration: none !important;
  display: inline-block !important;
  white-space: nowrap;

  /* verhindert Sprünge beim Fettwerden */
  text-rendering: optimizeLegibility;
  letter-spacing: 0.3px;
}

/* Hover-Effekt für Standard-Buttons */
.et_pb_button.btn-third:hover {
  font-weight: 600 !important;  
  color: #E11D48 !important; 
}


/* ------------------------------
   Custom Button mit Icon
--------------------------------*/
.custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Abstand Text ↔ Icon */
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #fff !important;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: font-weight 0.3s ease, color 0.3s ease;

  /* verhindert Sprünge beim Fettwerden */
  text-rendering: optimizeLegibility;
  letter-spacing: 0.3px;
}

/* Icon Startzustand */
.custom-btn i {
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hover-Effekt */
.custom-btn:hover {
  font-weight: 600;   /* bold */
  color: #fff !important;
}

.custom-btn:hover i {
  opacity: 1;
  transform: translateX(0);
}

hr{
  display:none;
}



/* ========================  Popup Maker Schließen-Button mit eigenem PNG   ======================== */

.pum-container .pum-close {
  background-image: url('/wp-content/uploads/2025/07/schliessen-button.png');
  background-size: contain;
  background-repeat: no-repeat !important;
  background-position: center;
  width: 45px !important;    /* Größe nach Wunsch anpassen */
  height: 45px !important;
  text-indent: -9999px;
  overflow: hidden;
  border: none;
	box-shadow: none !important;
}

.pum-container .pum-close:hover {
  background-image: url('/wp-content/uploads/2025/08/schliessen-x-hover.png');
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat !important;
  background-position: center;
  width: 45px !important;    /* Größe nach Wunsch anpassen */
  height: 45px !important;
  text-indent: -9999px;
  overflow: hidden;
  border: none;
	box-shadow: none !important;
}

/* ========================  Top Scroll Design   ======================== */
.et_pb_scroll_top {
  background: url('/wp-content/uploads/2025/07/Scroll-Top.png') no-repeat center center !important;
  background-size: contain !important;
  width: 50px;
  height: 50px;
  display: block;
  border: none;
  border-radius: 0;
  transition: all 0.3s ease;
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 9999;
  text-indent: -9999px; 
  overflow: hidden;
}

#et_top_scroll:before {
  content: none !important;
}

/* ========================  Infotext weiß mit Bild/Icon   ======================== */

.mein-blurb .et_pb_main_blurb_image {
	width: 150px !important;   
    height: auto;
	padding-top: 2rem;
	padding-right: 1rem;
	margin-bottom:0 !important;
}
/* Infobereich mit Image Style nur für auf der Startseite*/

body.page-id-2 .blurb-row-equal {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

body.page-id-2 .blurb-row-equal .et_pb_column {
  display: flex;
  flex-direction: column;
    justify-content: center;
}

body.page-id-2 .mein-blurb {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  height: 100%;
}

body.page-id-2 .mein-blurb .et_pb_module_header{
  margin-bottom: none;
  white-space: nowrap;
}

/* Kontaktseite Kontaktdaten Infobereich mit Image*/
.kontakt-blurb .et_pb_main_blurb_image {
  height: auto;
  width: 20%;
}

/* ========================  Accordion Style   ======================== */

/* Icon anzeigen */
.et_pb_toggle_title {
  position: relative;
  padding-right: 50px; /* Platz fürs Icon */
}

/* Icon als Bild */
.et_pb_toggle_title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 30px;
  height: 30px;
  background-image: url('/wp-content/uploads/2025/07/accordion-15.png'); /* Pfad zum PNG */
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

/* Drehen bei geöffnetem Akkordeon */
.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Hover-Effekt für Akkordeon-Titel */
.et_pb_toggle:hover {
  background-color: #93C5FD;
  transition: background-color 0.3s ease;
}

.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_content::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #93C5FD;
  margin-bottom: 1rem;
}


/* ========================  ATV Test Bereich   ======================== */
/* --- Farbwechsel der nblöcke: Weiß/Grau --- */
.frage {
  padding: 2rem;
}
.frage h6{
	color: #111827 !important;
}
.frage:nth-of-type(odd) {
  background-color: #ffffff;
}
.frage:nth-of-type(even) {
  background-color: #f3f4f6;
}

/* Spezielles Handling für Kontaktfeld – immer grau */
.frage.kontaktfeld {
  background-color: #f3f4f6 !important;
}

/* --- Reset Standard-Checkbox & Radio-Design --- */
.wpcf7-radio input[type="radio"],
.wpcf7-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  border: none;
  background-color: transparent;
}

/* --- Radio Buttons --- */
.wpcf7-radio input[type="radio"] {
  background-image: url("/wp-content/uploads/2025/08/radio-unchecked.png");
}
.wpcf7-radio input[type="radio"]:checked {
  background-image: url("/wp-content/uploads/2025/08/radio-checked.png");
}

/* --- Checkboxen --- */
.wpcf7-checkbox input[type="checkbox"] {
  background-image: url("/wp-content/uploads/2025/08/checkbox-unchecked.png");
}
.wpcf7-checkbox input[type="checkbox"]:checked {
  background-image: url("/wp-content/uploads/2025/08/checkbox-checked.png");
}

/* --- Beschriftung der Radio/Checkboxen untereinander anordnen --- */
.wpcf7-list-item{
display:block;	
	padding: 0.4rem;
}
.nebeneinander .wpcf7-list-item {
display:inline-block !important;	
	padding: 0.4rem;
}
/*Bild neben dem Formular*/
 .frage.mit-bild .inhalt {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.frage.mit-bild .text {
  flex: 1 1 60%;
}

.frage.mit-bild .bild {
  flex: 1 1 35%;
}

.frage.mit-bild .bild img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ========================  Jobanzeigen   ======================== */

.job-meta {
  display: flex;
  gap: 24px;
  margin-top: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.job-icon {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #1d2e5e;
}

.job-icon-img {
  width: 20px;
  height: auto;
  margin-right: 8px;
  vertical-align: middle;
}

.fullwidth-accordion .et_pb_accordion_item {
  width: 100% !important;
  }

/* ========================  Kontaktformular Standard-Anfragen Styles   ======================== */
.field-design-s{
  width: 100% !important;
  border:none !important;
  padding: 15px !important;
  font-size: 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
  background: #fff !important;
  color: #6B7280 !important;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif !important;
}
.field-design2-s {
  width: 100% !important;
  height: 100px; 
  resize: vertical; 
  padding: 15px !important;
 /* margin: 1rem !important;*/
  border:none !important;
  font-size: 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
  background: #fff !important;
  color: #6B7280 !important;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif!important;
}

.agb-label-s {
  font-size: 14px !important;
  color: #6B7280 !important;
  width: auto !important;
  box-shadow: none !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 30px;
}

/* ========================  Kontaktformular Styles für Bewerbungsformular   ======================== */

/*Unsichtbarmachen vom Counter*/
.dnd-upload-counter{
  display: none !important;
}
/* === Upload-Wrapper für CF7 Drag & Drop === */
.custom-upload-wrapper {
  position: relative;
  margin: 1%;
}

.codedropz-upload-handler{
  background-color: rgba(147,197,253,0.15) !important;
  border: 1px dashed #1E3A8A !important;
  border-radius: 1px !important;
  text-align: center;
  font-size: 16px;
/*  position: relative;
  z-index: 1;*/
}

/* Felder */

.field-design-b {
  width: 100% !important;
  padding: 14px 16px !important;
  border:none !important;
  font-size: 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
  margin-bottom: 20px !important;
  background: #fff !important;
  color: #6B7280 !important;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif !important;
}

/* Checkbox */
.cf7-checkbox {
  margin-right: 8px;
}

.agb-label-b {
  font-size: 14px !important;
  color: #6B7280 !important;
  width: auto !important;
  box-shadow: none !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 30px;
}

/* ========================  Newsletter Formular Style   ======================== */
.field-design-n {
  width: 100% !important;
  padding: 14px 16px !important;
/*  margin: 1rem !important;*/
  border:none !important;
  font-size: 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
  background: #fff !important;
  color: #6B7280 !important;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif !important;
}

.agb-label-n {
  font-size: 14px !important;
  color: #6B7280 !important;
  width: auto !important;
  box-shadow: none !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 30px;
}

/* ========================  Formular Button Style bei jedem Formular gleich   ======================== */
/* Button Formular Newsletter */ 
.wpcf7-submit {
  font-family: 'Montserrat', sans-serif, FontAwesome !important;
  background-color: #E11D48;
  color: white;
  border: none;
  padding: 14px 32px;
  font-size: 1rem;
  float:right;
  cursor: pointer;
  transition: background 0.3s ease;
}

.wpcf7-submit:hover {
  background-color: #E11D48;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
} 


/* ========================  Filter für Seite Jobanzeigen   ======================== */
/* Filter Styles Jobanzeige */
.searchandfilter input,
.searchandfilter select,
.searchandfilter .sf-input-text {
  font-family: 'Montserrat', sans-serif;
  padding: 0.5rem;
  border: 1px solid #ccc;
}

/* Grundstil für den Search & Filter Button */
.searchandfilter input[type=submit] {
  background-color: #E11D48;
  color: white;
  border-radius: 0;
  font-size: 1rem;
  font-weight: normal;
  border: none;
  padding: 0.5em 1.2em 0.5em 1.2em; /* rechts Platz für Pfeil */
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.searchandfilter input[type=submit]:hover {
  font-weight: 600;
}

/* Pseudo-Element für Font Awesome 7 Solid Pfeil */
.searchandfilter input[type=submit]::after {
  content: "\f054"; /* Unicode für fa-chevron-right */
  font-family: "Font Awesome 7 Free"; /* Version 7 Free */
  font-weight: 900; /* Solid Style */
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  font-size: 1rem;
  color: white;
}

/* Beim Hover den Pfeil einblenden */
.searchandfilter input[type=submit]:hover::after {
  opacity: 1;
}

/* ========================  Stellenanzeigen auf der Übersichtsseite, kombiniert bei functions.php des Child-Themes   ======================== */

.job-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.job-card {
    padding: 30px;
}

 .job-category a {
    font-size: 0.9rem;
    color: #111827 !important;
    margin-bottom: 5px;
}

.job-title a{
    font-size: 1.25rem;
    color: #1E3A8A !important;
    margin-bottom: 10px;
}

.job-title a {
    text-decoration: none;
    color: inherit;
}

.job-title a:hover {
    text-decoration: underline;
}

.job-meta {
    font-size: 0.95rem;
    color: #111827;
    margin-bottom: 15px;
}

.job-meta span {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
}

.job-meta .icon {
    width: 18px;
    height: auto;
    margin-right: 6px;
}

.job-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #E11D48;
    color: #fff;
    font-weight: 400;
    border:none;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    position: relative;    
    padding: 10px 14px;
    transition: all 0.3s ease; 
}

.job-button i {
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

.job-button:hover {
    background-color: #E11D48;
     font-weight: 600;
}

.job-button:hover i {
    opacity: 1;
    transform: translateX(0);
}

/* ========================  Beiträge ohne Seitenleiste, immer ausblenden!  ======================== */

/* Seitenleiste auf Kategorieseiten entfernen */
.category #sidebar {
    display: none;
}

/* Hauptinhaltsbereich auf volle Breite setzen */
.category #left-area {
    width: 100%;
    padding-right: 0 !important;
}

/* Vertikale Trennlinie entfernen */
.category #main-content .container:before {
    background: none;
}

/* ========================  Projekte ohne Seitenleiste, immer ausblenden!  ======================== */

/* Sidebar-Bereich komplett ausblenden */
#content-area #sidebar {
    display: none !important;
}

/* Hauptinhalt auf volle Breite setzen */
#content-area .clearfix #left-area {
    width: 100% !important;
}

/* Meta-Infos unten ausblenden */
#content-area .et_project_meta {
    display: none !important;
}


/* ========================  Accordion Design   ======================== */
/* Icon anzeigen */
.et_pb_toggle_title {
  position: relative;
  padding-right: 50px; /* Platz fürs Icon */
}

/* Icon als Bild */
.et_pb_toggle_title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 30px;
  height: 30px;
  background-image: url('/wp-content/uploads/2025/07/accordion-15.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

/* Drehen bei geöffnetem Akkordeon */
.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Hover-Effekt für Akkordeon-Titel */
.et_pb_toggle:hover {
  background-color: #93C5FD;
  transition: background-color 0.3s ease;
}

.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_content::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #93C5FD;
  margin-bottom: 1rem;
}

/* ========================  Jobanzeige Style auf der Über uns Seite   ======================== */
.jobvorschau-klein-container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.jobvorschau-klein-item {
    background: #fff;
    padding: 4rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    flex: 1 1 calc(50% - 30px);
}

.job-kategorie {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 10px;
}

.job-infos p {
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.job-infos img {
    width: 18px;
    height: auto;
}

.mehr-erfahren-btn {
    display: inline-block;
    margin-top: 1rem;
/*    padding: 12px 24px;*/
    background-color: none;
    font-weight:400;
    color: #e11d48;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mehr-erfahren-btn:hover {
 font-weight:600;
}

.mehr-erfahren-btn i {
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

.mehr-erfahren-btn:hover i {
    opacity: 1;
    transform: translateX(0);
}

/* ========================  Sender-Slider für ATV  ======================== */

.logo-slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.logo-slider {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: 10px;
}

.logo-slider::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.logo-slider img {
  flex: 0 0 auto;
  max-width: 100px;
  margin: 0 10px;
}

/* Pfeile */
.slider-btn {
  position: absolute;
  background-color: transparent;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;   /* Breite des Bildes */
  height: 50px;  /* Höhe des Bildes */
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 10;
}

.slider-btn.prev {
  left: 0;
    background-image: url("/wp-content/uploads/2025/08/Button-zurück-1.png");
}

.slider-btn.next {
  right: 0;
    background-image: url("/wp-content/uploads/2025/08/Button-vor-1.png");
}

/* Hover-Pfeile */
.slider-btn.prev:hover {
  background-image: url("/wp-content/uploads/2025/08/Button-zurück-hover.png");
}

.slider-btn.next:hover {
  background-image: url("/wp-content/uploads/2025/08/Button-vor-hover.png");
}

/* ========================  Bullet-Points  ======================== */

.bullet-point li {
  background: url('/wp-content/uploads/2025/07/Farbideen-Logo.png') no-repeat left center;
  background-size: 16px 16px;
  padding-left: 2rem;
  list-style: none;
}

.bullet-point-negativ li {
  background: url('/wp-content/uploads/2025/07/Bildmarke-Logo-Negativ.png') no-repeat left center;
  background-size: 16px 16px;
  padding-left: 2rem;
  list-style: none;
}

/* ========================  Preistabellen immer auf gleicher Höhe ======================== */
/* ============ Gleichhöhe + saubere Abstände ============ */
.et_pb_pricing_table_wrap{
  display: flex !important;
  align-items: stretch;     /* alle Spalten gleich hoch */
  gap: 1rem;                /* Abstand zwischen Spalten */
  --pricing-head-min: 140px;/* anpassen bis die Köpfe bündig sind */
}

/* Jede Spalte als Grid: Kopf | Inhalt | Footer (Button) */
.et_pb_pricing_table{
  flex: 1 1 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto; 
  /* auto = Titel, auto = Preisblock, 1fr = Text füllt, auto = Button */
  box-sizing: border-box;
  margin: 0 !important;
}

/* Kopfbereich angleichen (Titel/Ribbon) */
.et_pb_pricing_table .et_pb_pricing_heading{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--pricing-head-min);
}

/* Preisbereich fix auf gleiche Höhe */
.et_pb_pricing_table .et_pb_sum {
  min-height: 60px;          /* sorgt für gleich hohe Preisbereiche */
  display: inline-flex;      
  align-items: baseline;     /* Eurozeichen bleibt auf Höhe der Zahl */
  justify-content: center;   /* mittig in der Box */
  gap: 4px;                  /* kleiner Abstand zwischen € und Zahl */
}

/* Inhalt flexibel */
.et_pb_pricing_table .et_pb_pricing_content{
  padding: 0 !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Entfernt den Strich zwischen Preis und Text */
.et_pb_pricing_content_top {
  border-bottom: none !important;
}

/* Button nach unten drücken */
.et_pb_pricing_table .et_pb_pricing_table_button{
  margin-top: auto;
}

/* Typo-Margins im Kopf resetten */
.et_pb_pricing_table h1,
.et_pb_pricing_table h2,
.et_pb_pricing_table h3,
.et_pb_pricing_table .et_pb_pricing_title{
  margin-top: 0;
}

/* ===== Featured: optisch höher, ohne das Layout zu verbiegen ===== */
.et_pb_pricing_table.et_pb_featured_table{
  transform: translateY(-12px) scale(1.02);
  z-index: 2;
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
  color: #fff;
}

.et_pb_pricing_table.et_pb_featured_table{
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Sicherheitsnetz */
.et_pb_pricing_tables,
.et_pb_pricing_table_wrap{ overflow: visible; }

.et_pb_featured_table h6 {
    color:white;
}

/*  ========================    Bilder Styles, die überlappen sollen   ========================  */

.bild-ueberlappen img {
  position: relative;
  margin-bottom: -300px; /* Wert anpassen, wie weit das Bild herausragen soll */
  z-index: 10;       /* Bild bleibt über Text / Hintergrund */
}

.bild-ueberlappen-1 img {
  position: relative;
  margin-top: -50px;
  z-index: 10;       /* Bild bleibt über Text / Hintergrund */
}

.bild-ueberlappen-2 img {
  position: relative;
  margin-top: -200px; /* Wert anpassen, wie weit das Bild herausragen soll */
  z-index: 10;       /* Bild bleibt über Text / Hintergrund */  
}

.bild-ueberlappen-3 img {
  position: relative;
  margin-top: -50px;
  margin-left: -50px; /* Wert anpassen, wie weit das Bild herausragen soll */
  z-index: 10;       /* Bild bleibt über Text / Hintergrund */
}

.bild-ueberlappen-4 img {
  position: relative;
  margin-top: -50px;
  margin-left: 50px; /* Wert anpassen, wie weit das Bild herausragen soll */
  z-index: 10;       /* Bild bleibt über Text / Hintergrund */
}

.bild-ueberlappen-5 img {
  position: relative;
  margin-top: -70px;
  margin-left: -70px; /* Wert anpassen, wie weit das Bild herausragen soll */
  z-index: 10;       /* Bild bleibt über Text / Hintergrund */
}

.bild-ueberlappen-2, .bild-ueberlappen-1, .bild-ueberlappen, .bild-ueberlappen-3, .bild-ueberlappen-4, .bild-ueberlappen-5 {
  overflow: visible !important; /* verhindert, dass das Bild abgeschnitten wird */
}

/* ========================  Lexikon ========================  */
.projekt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}

.projekt-grid .projekt-item {
  background: #fff;
    border: 0.25px solid #D1D5DB ;
  border-radius: none;
  padding: 16px;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.projekt-grid .projekt-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.projekt-thumb img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}

.projekt-excerpt{  
margin-top: 1em;
}

/* Filter-Styles für Lexikon */
.alphabet-filter {
  text-align: center;
  margin-bottom: 20px;
}

.alphabet-btn {
  margin: 0 4px 8px;
  padding: 6px 12px;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
}

.alphabet-btn.active,
.alphabet-btn:hover {
  background: #1E3A8A;
  color: #fff;
  border: none;
}


/*  ========================    Footer Styles   ========================  */
.social-icons{
   padding: 1rem;
}

.footer-links a {
  margin: 1rem;
}
.footer-bottom{
  display: flex;
  justify-content: flex-end;
}

/* ========================  Responsive Optimierungen Smartphone  ======================== */
@media screen and (max-width: 767px) {
      /*Padding und Margin generell für Tabletansicht*/
  .et_pb_row{
    padding: 1rem 0 !important;
  }  
  
	/* Burger-Menü optimieren */
.et_mobile_menu li a {
  padding: 16px 20px !important;
  font-weight: 400;
  border-bottom: 1px solid #D1D5DB;
	background-color: #fff !important;
}
	
	#main-header .menu-item-has-children > a::after {
  display: none !important;
}

/* Hover-Farbe beim Tippen (mobil) */
.et_mobile_menu li a:hover {
  background-color: #fff !important;
	font-weight: 600;
  color: #e11d48 !important;
}

/* Aktiver Menüpunkt (mobil) */
	.et_mobile_menu .menu-item-has-children>a{
		font-weight: 400;
	}
	
.et_mobile_menu .current-menu-item > a {
  font-weight: 400 !important;
  color: #e11d48 !important;
}
	
	/* Touchfreundliche Links */
#main-header .nav li a {
  padding: 16px 20px !important;
  display: block;
}

/* Größere Touch-Ziele */
#main-header .nav li {
  line-height: 1.4;
  min-height: 48px;
}
	
	/* Mobile Ansicht MENU 
Untermenü: mehr Abstand & keine Überlappung */
#main-header .nav li ul li a {
  padding: 14px 20px !important;
  min-height: 48px;
  background-color: transparent !important;
  line-height: 1.4;
}

/* Hover auf Untermenü bleibt transparent */
#main-header .nav li ul li a:hover {
  background-color: transparent !important;
}
	/* Weitere Mobile Einstellungen */
  /* Accordion Reponsiv*/
  .et_pb_accordion {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
	
  /* Kontaktformulare / Bewerbungsformular */
   .dnd-upload-area {
    padding: 80px 15px 50px !important;
  }

  .upload-icon {
    width: 30px;
    height: 30px;
  }

  .upload-inlay p {
    font-size: 16px;
  }

  .upload-inlay span {
    font-size: 12px;
  }

  .wpcf7-submit {
    width: 100%;
  }

  .agb-label {
    font-size: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }
	
  .mein-blurb {
    flex-direction: column;
    align-items: flex-start;
  }
	
  .frage .bild {
    display: none;
  }

  .et_pb_pricing_table_wrap{ flex-direction: column; gap: 1rem; }
  .et_pb_pricing_table.et_pb_featured_table{ transform: none; }


  .wpcf7-submit {
    width: 100%;
  }

  .agb-label {
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
  
/* Footer bereiche invisible machen */
h5.invisible {
   display: none; /* entfernt das Element komplett */
  }
  ul {
    padding: 0 0 0 1rem !important;
  }
 
  /* Logo Slider ATV */
  .logo-slider img {
    max-width: 60px;
    margin: 0 5px;
  }
  .slider-btn {
    font-size: 16px;
    padding: 4px 10px;
  }

  /* KontaktSeite Image und Bild kombination für Adresse */
  .kontakt-blurb {
    flex-direction: column;  /* Bild über Text auf kleinen Bildschirmen */
    text-align: center;
  }

  .kontakt-blurb .et_pb_main_blurb_image {
    margin-bottom: 1rem;    /* Abstand zwischen Bild und Text */
  }
 
  /* Footer horizontaler Strich nur sichtbar in mobiler Version*/
  .trennstrich {
    display: block !important;
    border: none;
    height: 2px;
    background-color: #93c5fd;
    margin: 2rem 0;
}
  
  /* Bild Überlappen auf Detail Seiten */
 .bild-ueberlappen-2 img, .bild-ueberlappen-1 img, .bild-ueberlappen img, .bild-ueberlappen-3 img, .bild-ueberlappen-4 img, .bild-ueberlappen-5 img {
    position: static;
    margin-bottom: 0;
    margin-top: 0;
    z-index: auto;
  }
}
/* ========================  Responsive Optimierungen Tablet  ======================== */

@media (min-width: 768px) and (max-width: 980px) {
  /*Padding und Margin generell für Tabletansicht*/
  .et_pb_row{
    padding: 1rem 0 !important;
  }
  
 	/* Burger-Menü optimieren */
.et_mobile_menu li a {
  padding: 16px 20px !important;
  font-weight: 400;
  border-bottom: 1px solid #D1D5DB;
	background-color: #fff !important;
}
	
	#main-header .menu-item-has-children > a::after {
  display: none !important;
}

/* Hover-Farbe beim Tippen (mobil) */
.et_mobile_menu li a:hover {
  background-color: #fff !important;
	font-weight: 600;
  color: #e11d48 !important;
}

/* Aktiver Menüpunkt (mobil) */
	.et_mobile_menu .menu-item-has-children>a{
		font-weight: 400;
	}
	
.et_mobile_menu .current-menu-item > a {
  font-weight: 400 !important;
  color: #e11d48 !important;
}
	
	/* Touchfreundliche Links */
#main-header .nav li a {
  padding: 16px 20px !important;
  display: block;
}

/* Größere Touch-Ziele */
#main-header .nav li {
  line-height: 1.4;
  min-height: 48px;
}
	
	/* Mobile Ansicht MENU 
Untermenü: mehr Abstand & keine Überlappung */
#main-header .nav li ul li a {
  padding: 14px 20px !important;
  min-height: 48px;
  background-color: transparent !important;
  line-height: 1.4;
}

/* Hover auf Untermenü bleibt transparent */
#main-header .nav li ul li a:hover {
  background-color: transparent !important;
}
  
/* Accordion Einstellungen */
.et_pb_accordion {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
	
/* Submit Button Einstellungen */
  
.wpcf7-submit {
    width: 100%;
  }

/* AGB Formular Einstellungen */
  
.agb-label {
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
  }

/* Bild und Text Blurb Einstellungen */
 .mein-blurb {
    flex-direction: column;
    align-items: flex-start;
  }
  
/* Footer bereiche invisible machen */
 h5.invisible {
   display: none; /* entfernt das Element komplett */
  }
  
  ul {
    padding: 0 0 0 1rem !important;
  }
  
/* Preisanzeige: 2 Spalten nebeneinander */
  .et_pb_pricing_table_wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* zwei gleich breite Spalten */
    gap: 1rem;
    width: 100% !important;        /* volle Breite */
  }

/* jede einzelne Preisbox füllt die Spalte */
  .et_pb_column .et_pb_pricing_table {
    width: 100% !important;
    max-width: 100%!important;
  }

/* Bild Überlappen Tablet Höhe*/
 .bild-ueberlappen-2 img, .bild-ueberlappen-1 img, .bild-ueberlappen img, .bild-ueberlappen-3 img, .bild-ueberlappen-4 img, .bild-ueberlappen-5 img {
  position: static;   /* Bild nicht mehr verschoben */
  margin-bottom: 0;
  margin-top: 0;
  z-index: auto;  }
} 

/* ========================  Responsive Optimierungen kleinere Bildschirme  ======================== */

@media (min-width: 981px) and (max-width: 1281px) {
  /* Bild Überlappen Tablet Höhe*/
 .bild-ueberlappen-2 img, .bild-ueberlappen-1 img, .bild-ueberlappen img, .bild-ueberlappen-3 img, .bild-ueberlappen-4 img, .bild-ueberlappen-5 img {
  position: static;   /* Bild nicht mehr verschoben */
  margin-bottom: 0;
  margin-top: 0;
  z-index: auto;  }
}