/*
Theme Name: Volkmer Messing Theme
Theme URI: https://www.volkmer-messing.de
Version: 1.0
Description: 
Author: Lukas Menzel
Author URI: https://www.lukas-menzel.com
template: volkmer-messing
*/

/* General Settings */

html { font-size: 100%; }
body { font-size: 1rem; line-height: 1.6; }

/*Colors*/
:root {
	--black: #000000;
	--white: #ffffff;
	--accent: #404D59;
	--accent-secondary: #C79D4D;
}

/* Typo-Skala */
:root {
  --fs-xsmall: 0.875rem; /* ~14px */
  --fs-small:  1.125rem;     /* ~16px */
  --fs-regular:1.125rem; /* ~18px */
  --fs-medium: 1.25rem;  /* ~20px */
  --fs-large:  1.5rem;   /* ~24px */
  --fs-xlarge: 2rem;     /* ~32px */
}

/* Utilities */
.text-xsmall  { font-size: var(--fs-xsmall); line-height: 1.6; }
.text-small   { font-size: var(--fs-small);  line-height: 1.6; }
.text-regular { font-size: var(--fs-regular);line-height: 1.55; }
.text-medium  { font-size: var(--fs-medium); line-height: 1.5; }
.text-large   { font-size: var(--fs-large);  line-height: 1.4; }
.text-xlarge  { font-size: var(--fs-xlarge); line-height: 1.25; }

/* Font-Zuweisugnen */
p   { font-size: var(--fs-small); }
h6  { font-size: var(--fs-regular);color:var(--accent); }
h5  { font-size: var(--fs-medium);color:var(--accent); }
h4  { font-size: var(--fs-large);color:var(--accent); }
h3  { font-size: clamp(1.25rem, 0.9rem + 1.25vw, 1.5rem);color:var(--accent); } /* optional fluid */
h2  { font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);color:var(--accent); } /* optional fluid */
h1  { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);color:var(--accent); line-height:1.2; } /* optional fluid */

a:hover {
	color:var(--accent-secondary);
}
ul {
	padding: 0 20px;
}
.fl-page-content {
	background-color:#D1D3D4;
}
/* Navigation */ 
 .fl-menu .menu > li:visited,  .fl-menu .menu .current_page_item {
	font-weight:700;
}
.cta-nav a {
	color:var(--accent-secondary)!important;
	border: 2px solid var(--accent-secondary)!important;
	padding:10px!important;
	border-radius:10px!important;
}
.cta-nav a:hover {
	background-color:var(--accent-secondary)!important;
	color:var(--white)!important;
}
@media (min-width: 769px) {
     .fl-menu .menu > li {
		 margin:0 20px
	}
/* Basis: unsichtbarer Balken vorbereitet */
.fl-menu .menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 4px;
  width: 0; /* Startzustand: 0, wird auf Hover/aktiv auf 100% erweitert */
  background: var(--accent-secondary);
  border-radius: 2px;
  transition: width 200ms ease;
}

/* Hover/Focus: Balken sichtbar */
.fl-menu .menu > li:hover > a::after,
.fl-menu .menu > li:focus-within > a::after {
  width: 100%;
}
.cta-nav a::after {
		height:0px!important;
	}

/* Aktuelle Seite / aktiver Pfad: Balken dauerhaft sichtbar */
.fl-menu .menu > li.current-menu-item > a::after,
.fl-menu .menu > li.current_page_item > a::after,
.fl-menu .menu > li.current-menu-ancestor > a::after {
  width: 100%;
}
}

/* Button */
a.fl-button:hover {
	border-color:#C79D4D!important;
}
/* Mobile Hero */
@media (max-width:768px) {
	.mobile-column-reverse .fl-col-content {
flex-direction:column-reverse;
	}
}
	
	
/* Job */
.job-listing .job-preview {
	border-radius:10px!important;
}
	.job-listing .job-preview .job-cta .apply-btn {
		background-color:transparent!important;
		border: 2px solid var(--accent-secondary)!important;
		color:var(--accent-secondary)!important;
		border-radius: 10px!important;
	}
	.job-listing .job-preview .job-cta .apply-btn:hover {
		background-color:var(--accent-secondary)!important;
		border: 2px solid var(--accent-secondary)!important;
		color:var(--white)!important;
		border-radius: 10px!important;
	}
.jobs-modal .jobs-modal-content .modal-close {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 10px;
    top: 10px;
    background: white!important;
	border:0!important;
}

/* Badge/Bubble */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #111;        /* Schwarz: passt zu einer eleganten CI */
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  transform: translateY(-1px);
}

/* Option: Badge als kleines Eck-Label positionieren */
.menu-item-with-badge .menu-link {
  padding-right: 6px; /* etwas Platz, falls Badge rechts überlappt */
}

.menu-item-with-badge .badge {
  position: relative; /* inline im Fluss; für Eck-Variante die nächste Regel aktivieren */
}

/*Header Image*/
.header-image  {
	z-index:99!important;
}

/*Info Box*/
.volkmer-box .pp-infobox-button {
	float:right!important;
}

/*Slider */
@media (min-width:768px) {
.fl-builder-content .bx-wrapper .bx-viewport, .fl-slide-content {
    border-radius: 20px;
}
}
/*Job-Layout*/
.job-post {
    padding: 120px 0!important;
	margin:0 auto!important;
	max-width:1280px!important;
}
.jp-apply-button,.job-submit {
	color:var(--accent-secondary)!important;
	border: 2px solid var(--accent-secondary)!important;
	padding:10px!important;
	border-radius:10px!important;
}
.job-submit {
	float:left!important;
}
.jp-apply-button:hover, .job-submit:hover {
	color:var(--white)!important;
	border: 2px solid var(--accent-secondary)!important;
	padding:10px!important;
	border-radius:10px!important;
}
.job-post .jobs-row .jobs-row-label span {
	font-family:"Slabo 13px",serif!important;
    border-bottom: 0!important;
    padding-bottom: 2px;
	font-size: clamp(1.25rem, 0.9rem + 1.25vw, 1.5rem);color:var(--accent); 
}
.modal-title {
		font-family:"Slabo 13px",serif!important;

}
.jobs-modal-form .choose_file, .jobs-modal-form .choose_file_multi, .jobs-modal-form .choose_file_multi_add {
	color:var(--accent-secondary)!important;
}
.jobs-modal .jobs-modal-content {
	padding:40px!important;
	border-radius:10px!important;
}
.jobs-modal-footer {
	margin-top:0!important;
}
/*Video*/
.fl-row-bg-video .fl-bg-video {
    border-radius: 20px!important;
}

.page-id-461 .fl-row .fl-bg-slideshow {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    border-radius: 20px;
}
.page-id-461 .cta-nav a {
	background-color:var(--accent-secondary)!important;
	color:var(--white)!important;
	border: 2px solid var(--accent-secondary)!important;
	padding:10px!important;
	border-radius:10px!important;
}
.cta-nav a:hover {
	background-color:transparent!important;
	color:var(--accent-secondary)!important;
}