/*
 Theme Name:   Crepesservice
 Template:    dt-the7
 Version:     1.0.3
 Author: Felix Hohlwegler
*/

/* Custom styles here */
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/fonts/work-sans-v24-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/wp-content/uploads/fonts/work-sans-v24-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/uploads/fonts/work-sans-v24-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/wp-content/uploads/fonts/work-sans-v24-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('/wp-content/uploads/fonts/inter-v20-latin-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/fonts/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('/wp-content/uploads/fonts/inter-v20-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/wp-content/uploads/fonts/inter-v20-latin-600.woff2') format('woff2');
}


/**
-----------------
Default
-----------------
*/
:root {
	--pink-primary: #d83371;
	--pink-light: #F298B5;
	--pink-pale: #FACEDE;
	--slate-dark: #2C3E50;
	--gray-medium: #5D6D7E;
	--gray-light: #95A5A6;
	--white: #FFFFFF;
	--off-white: #F7F9FB;
	--bg-light: #ECF0F1;
	
	--font-display: 'Work Sans', sans-serif;
	--font-body: 'Inter', sans-serif;
}

html {
	scroll-behavior: smooth;
}

#main {
	padding: 0 !important;
}

body {
	font-family: var(--font-body);
	color: var(--slate-dark);
	line-height: 1.6;
	background: var(--white);
	overflow-x: hidden;
}

p {
	color: var(--gray-medium) !important;
    font-size: 1.1rem !important;
    line-height: 1.9 !important;
    margin-bottom: 1.5rem !important;
}

h2 {
	font-family: var(--font-display) !important;
    font-size: 2.5rem !important;
	line-height: 3.5rem !important;
    font-weight: 700 !important;
    color: var(--slate-dark) !important;
    margin-bottom: 1.5rem !important;
}

h3 {
	color: var(--pink-primary) !important;
}

/**
------------------------
content
------------------------
*/

.wpb_content_element {
	margin-bottom: 0 !important;
}

.braunButton {
	display: inline-block;
    color: var(--pink-primary) !important;
	background: #fff !important;
    text-decoration: none;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    padding: 0.8rem 2rem !important;
    border: 2px solid var(--pink-primary) !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    margin-top: -0.1rem !important;
}

.braunButton:hover{
	background: var(--pink-primary) !important;
    color: var(--white) !important;
    transform: translateX(5px) !important;
}

.braunButtonBig{
	margin-top: 1rem !important;
    padding: 1.6rem 3rem !important;
    background: var(--pink-primary) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
	font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(216, 51, 113, 0.25) !important;
}

.braunButtonBig:hover {
    background: var(--pink-light) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(216, 51, 113, 0.35) !important;
}

.fancy-media-wrap img{
    border-radius: 20px !important;
    box-shadow: 0 15px 50px rgba(216, 51, 113, 0.15) !important;
}



.fancy-media-wrap{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.eventlocationHero {
	padding-top: 20rem !important;
	padding-bottom: 20rem !important;
}

.eventlocationHero h3 {
	font-family: var(--font-display) !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
    color: var(--slate-dark) !important;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5) !important;
}

.eventlocationHero p {
	font-size: 1.35rem !important;
    color: var(--slate-dark) !important;
    margin-bottom: 2.5rem !important;
    line-height: 1.8 !important;
}

/**
------------------------
contentanimation
------------------------
*/
.contentanimation {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.contentanimation .vc_column-inner {
	padding-top: 6rem !important;
	padding-bottom: 6rem !important;
	
}

.contentanimation > .wpb_column > .vc_column-inner{
  position:relative !important;
  overflow:hidden !important;
  text-align:center !important;
  background:linear-gradient(135deg,var(--off-white) 0%, var(--white) 100%) !important;
}

.contentanimation > .wpb_column > .vc_column-inner::before{
  content:"" !important;
  position:absolute !important;
  top:-50% !important;
  left:-25% !important;
  width:150% !important;
  height:200% !important;
  background:radial-gradient(circle, var(--pink-pale) 0%, transparent 70%) !important;
  opacity:.6 !important;
  z-index:0 !important;
  pointer-events:none !important;
  transform-origin:center center !important;
  animation:contactRotate 30s linear infinite !important;
}

@keyframes contactRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.contentanimation > .wpb_column > .vc_column-inner::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:5px !important;
  background:linear-gradient(90deg,var(--pink-primary) 0%, var(--pink-light) 100%) !important;
  transform:scaleX(0) !important;
  transform-origin:center center !important;
  transition:transform .4s ease !important;
  z-index:2 !important;
  pointer-events:none !important;
}

.contentanimation:hover > .wpb_column > .vc_column-inner::after{
  transform:scaleX(1) !important;
}

.contentanimation .wpb_text_column,
.contentanimation .wpb_text_column .wpb_wrapper,
.contentanimation .btn-align-center{
  position:relative !important;
  z-index:1 !important;
}

.contentanimation h2{
  margin:0 0 16px 0 !important;
  font-family:"Work Sans",sans-serif !important;
  font-size:38px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color: #2C3E50  !important;
}

.contentanimation p{
  margin:0 0 28px 0 !important;
  font-family:"Inter",sans-serif !important;
  font-size:18px !important;
  line-height:1.85 !important;
  color: #5D6D7E !important;
}

@media (max-width:768px){
  .contentanimation > .wpb_column > .vc_column-inner{padding:48px 22px !important;}
  .contentanimation h2{font-size:30px !important;}
  .contentanimation p{font-size:16px !important;}
}



/**
------------------------
Half Half Boxen
------------------------
*/
.braunHalfHalfBox{
  --pink-primary:#d83371;
  --pink-light:#F298B5;
  --slate:#2C3E50;
  --text:#5D6D7E;
  --radius:15px;
  --pad:32px;
  --gap:24px;
  --imgH:250px;

  background:#fff !important;
  border-radius:var(--radius) !important;
  box-shadow:0 10px 40px rgba(0,0,0,.08) !important;
  overflow:hidden !important;
  position:relative !important;
  margin:0 !important;
  padding:var(--pad) !important;
  transition:transform .4s ease, box-shadow .4s ease !important;
}

.braunHalfHalfBox:hover{
  transform:translateY(-10px) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.12) !important;
}

.braunHalfHalfBox::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:5px !important;
  background:linear-gradient(90deg,var(--pink-primary) 0%,var(--pink-light) 100%) !important;
  transform:scaleX(0) !important;
  transform-origin:center center !important;
  transition:transform .4s ease !important;
  z-index:5 !important;
  pointer-events:none !important;
}

.braunHalfHalfBox:hover::before{
  transform:scaleX(1) !important;
}

.braunHalfHalfBox.vc_row.wpb_row{
  display:flex !important;
  align-items:flex-start !important;
}

.braunHalfHalfBox > .wpb_column,
.braunHalfHalfBox > .wpb_column > .vc_column-inner{
  padding:0 !important;
}

.braunHalfHalfBox .vc_col-sm-4{
  padding-right:var(--gap) !important;
  flex:0 0 auto !important;
  width:33.3333% !important;
}

.braunHalfHalfBox .vc_col-sm-8{
  flex:1 1 auto !important;
  min-width:0 !important;
}

.braunHalfHalfBox .shortcode-single-image-wrap{
  width:100% !important;
  margin:0 !important;
}

.braunHalfHalfBox .fancy-media-wrap{
  width:100% !important;
  height:var(--imgH) !important;
  border-radius:12px !important;
  background:transparent !important;
  overflow:hidden !important;
  display:block !important;
}

.braunHalfHalfBox .fancy-media-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:12px !important;
}

.braunHalfHalfBox h3{
  margin:0 0 14px 0 !important;
  line-height:1.25 !important;
  font-size:32px !important;
  font-weight:700 !important;
  color:var(--slate) !important;
  font-family:"Work Sans",sans-serif !important;
}

.braunHalfHalfBox p{
  margin:0 0 18px 0 !important;
  line-height:1.85 !important;
  font-size:16px !important;
  color:var(--text) !important;
  font-family:"Inter",sans-serif !important;
}

.braunHalfHalfBox a.dt-btn.braunTinyButton{
  margin-top:4px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-transform:none !important;
  font-family:"Inter",sans-serif !important;
  font-size:16px !important;
  font-weight:600 !important;
  color:var(--pink-primary) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  transition:gap .3s ease !important;
}

.braunHalfHalfBox a.dt-btn.braunTinyButton:hover{
  gap:18px !important;
  color:var(--pink-primary) !important;
}

.braunHalfHalfBox a.dt-btn.braunTinyButton i{
  margin:0 !important;
}

@media (max-width:768px){
  .braunHalfHalfBox{
    --pad:22px;
    --gap:16px;
    --imgH:220px;
  }

  .braunHalfHalfBox.vc_row.wpb_row{
    flex-direction:column !important;
  }

  .braunHalfHalfBox .vc_col-sm-4{
    width:100% !important;
    padding-right:0 !important;
    margin-bottom:18px !important;
  }

  .braunHalfHalfBox h3{
    font-size:26px !important;
  }
}


/**
------------------------
Portfolioboxen
------------------------
*/

.owl-stage {
	padding-top: 50px;
	padding-bottom: 50px;
}

.owl-carousel.portfolio-carousel-shortcode {
  --pink-primary: #d83371;
  --pink-light: #F298B5;
  --slate-dark: #2C3E50;
  --gray-medium: #5D6D7E;
  --font-display: "Work Sans", sans-serif;
  --font-body: "Inter", sans-serif;
}

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post {
  background: #fff !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.4s ease !important;
  position: relative !important;
}

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, var(--pink-primary) 0%, var(--pink-light) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.4s ease !important;
  z-index: 50 !important;
  pointer-events: none !important;
}
.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post:hover::after {
  transform: scaleX(1) !important;
}

.owl-carousel.portfolio-carousel-shortcode .post-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
}

.owl-carousel.portfolio-carousel-shortcode .post-entry-content {
  padding: 2rem !important;
  font-family: var(--font-body) !important;
}

.owl-carousel.portfolio-carousel-shortcode .entry-title {
  margin: 0 0 1rem 0 !important;
  line-height: 1.2 !important;
}
.owl-carousel.portfolio-carousel-shortcode .entry-title a {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--slate-dark) !important;
  text-decoration: none !important;
}
.owl-carousel.portfolio-carousel-shortcode .entry-title a:hover {
  color: var(--pink-primary) !important;
}

.owl-carousel.portfolio-carousel-shortcode .entry-excerpt {
  margin: 0 0 1.5rem 0 !important;
  color: var(--gray-medium) !important;
  line-height: 1.7 !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
}
.owl-carousel.portfolio-carousel-shortcode .entry-excerpt p {
  margin: 0 !important;
}

.owl-carousel.portfolio-carousel-shortcode a.post-details.details-type-link {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;        
  font-weight: 600 !important;
  color: var(--pink-primary) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: gap 0.3s ease !important;
}
.owl-carousel.portfolio-carousel-shortcode a.post-details.details-type-link:hover {
  gap: 1rem !important;
}

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item { display: flex !important; }
.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.owl-carousel.portfolio-carousel-shortcode .post-entry-content { flex: 1 !important; }

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post{
  position: relative !important;
  overflow: hidden !important;
}

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post{
  position: relative !important;
  overflow: hidden !important;
}

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post .post-thumbnail-wrap{
  position: relative !important;
}

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post .post-thumbnail-wrap::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #d83371 0%, #F298B5 100%) !important;

  transform: scaleX(0) !important;
  transform-origin: center center !important;
  transition: transform 0.4s ease !important;

  z-index: 99999 !important;
  pointer-events: none !important;
}

.owl-carousel.portfolio-carousel-shortcode .dt-owl-item article.post:hover .post-thumbnail-wrap::before{
  transform: scaleX(1) !important;
}

/**
------------------------
Galerie
------------------------
*/

.galerie figure {
	    box-shadow: 0 15px 50px rgba(216, 51, 113, 0.15) !important;
}

/**
------------------------
Location Box
------------------------
*/
.braunLocation{
  --pink-primary:#d83371;
  --pink-soft:#fdeaf2;
  --slate:#2C3E50;
  --text:#5D6D7E;

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}

.braunLocationBox{
  background:#fff;
  border-radius:22px;
  padding:42px 34px;
  box-shadow:0 14px 50px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  text-align:center;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.braunLocationBox:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 70px rgba(0,0,0,.12);
}

.braunLocationIconWrap{
  width:86px;
  height:86px;
  border-radius:18px;
  background:var(--pink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 22px 0;
}

.braunLocationIconWrap img{
  width:46px;
  height:auto;
  display:block;
}

.braunLocationTitle{
  margin:0 0 14px 0;
  font-family:"Work Sans",sans-serif;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.25;
  color:var(--slate);
}

.braunLocationText{
  margin:0;
  font-family:"Inter",sans-serif;
  font-size:1rem;
  line-height:1.7;
  color:var(--text);
  max-width:26ch;
}

/* responsive */
@media (max-width:1024px){
  .braunLocation{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:600px){
  .braunLocation{ grid-template-columns:1fr; }
  .braunLocationBox{ padding:34px 26px; }
}



/**
------------------------
Event Boxen
------------------------
*/

.higlightSlider  .owl-height {
	min-height: 620px !important;
}

.owl-carousel.higlightSlider .owl-stage{
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* design tokens */
.owl-carousel.higlightSlider{
  --pink-primary:#d83371;
  --pink-light:#F298B5;
  --slate-dark:#2C3E50;
  --gray-medium:#5D6D7E;
  --font-display:"Work Sans",sans-serif;
  --font-body:"Inter",sans-serif;
}

/* make each item stretch like cards */
.owl-carousel.higlightSlider .dt-owl-item{
  display:flex !important;
}

/* card container = your slide row */
.owl-carousel.higlightSlider .dt-owl-item > .vc_row{
  background:#fff !important;
  border-radius:15px !important;
  overflow:hidden !important;
  box-shadow:0 10px 40px rgba(0,0,0,.08) !important;
  transition:transform .4s ease, box-shadow .4s ease !important;
  position:relative !important;

  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  width:100% !important;
}

/* hover lift */
.owl-carousel.higlightSlider .dt-owl-item > .vc_row:hover{
  transform:translateY(-10px) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.12) !important;
}

/* top gradient bar */
.owl-carousel.higlightSlider .dt-owl-item > .vc_row::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:5px !important;
  background:linear-gradient(90deg,var(--pink-primary) 0%,var(--pink-light) 100%) !important;

  transform:scaleX(0) !important;
  transform-origin:left center !important;
  transition:transform .4s ease !important;

  z-index:50 !important;
  pointer-events:none !important;
}

.owl-carousel.higlightSlider .dt-owl-item > .vc_row:hover::after{
  transform:scaleX(1) !important;
}

/* remove WPBakery inner paddings/margins */
.owl-carousel.higlightSlider .dt-owl-item .wpb_column,
.owl-carousel.higlightSlider .dt-owl-item .vc_column-inner,
.owl-carousel.higlightSlider .dt-owl-item .wpb_wrapper{
  padding:0 !important;
  margin:0 !important;
}

/* image */
.owl-carousel.higlightSlider .dt-owl-item .vc_single_image-wrapper,
.owl-carousel.higlightSlider .dt-owl-item .wpb_single_image .vc_figure{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

.owl-carousel.higlightSlider .dt-owl-item .vc_single_image-wrapper{
  display:block !important;
  overflow:hidden !important;
}

.owl-carousel.higlightSlider .dt-owl-item .vc_single_image-wrapper img{
  display:block !important;
  width:100% !important;
  height:250px !important;
  object-fit:cover !important;
}

/* content padding */
.owl-carousel.higlightSlider .dt-owl-item .carousel-item-wrap{
  padding:2rem !important;
  font-family:var(--font-body) !important;
  flex:1 !important;
}

/* title / text */
.owl-carousel.higlightSlider .dt-owl-item h4{
  margin:0 0 1rem 0 !important;
  line-height:1.2 !important;
  font-family:var(--font-display) !important;
  font-size:1.6rem !important;
  font-weight:700 !important;
  color:var(--slate-dark) !important;
  text-align:left !important;
}

.owl-carousel.higlightSlider .dt-owl-item p{
  margin:0 0 1.5rem 0 !important;
  color:var(--gray-medium) !important;
  line-height:1.7 !important;
  font-family:var(--font-body) !important;
  font-size:1rem !important;
  text-align:left !important;
}

/* button like link */
.owl-carousel.higlightSlider .dt-owl-item a.dt-btn{
  font-family:var(--font-body) !important;
  font-size:1rem !important;
  font-weight:600 !important;

  padding:0 2rem 2rem 2rem !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  color:var(--pink-primary) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  text-transform:none !important;
}

.owl-carousel.higlightSlider .dt-owl-item a.dt-btn::after{
  content:"›" !important;
  margin-left:.25rem !important;
}

.owl-carousel.higlightSlider .dt-owl-item a.dt-btn:hover{
  color:var(--pink-primary) !important;
}

/* 1) AutoHeight vom Owl nicht mehr pro Slide bestimmen lassen */
.owl-carousel.higlightSlider .owl-stage-outer,
.owl-carousel.higlightSlider .owl-stage,
.owl-carousel.higlightSlider .owl-item{
  height: auto !important;
}

/* 2) Items gleich hoch ziehen */
.owl-carousel.higlightSlider .owl-stage{
  display:flex !important;
  align-items:stretch !important;
}

.owl-carousel.higlightSlider .dt-owl-item{
  height:100% !important;
  display:flex !important;
  align-items:stretch !important;
}

/* 3) Card wirklich auf volle Höhe */
.owl-carousel.higlightSlider .dt-owl-item > .vc_row{
  height:100% !important;
  min-height: 620px !important; /* dein Zielwert */
  display:flex !important;
  flex-direction:column !important;
}

/* 4) Inhalt streckt, Button bleibt unten */
.owl-carousel.higlightSlider .dt-owl-item .carousel-item-wrap{
  flex:1 1 auto !important;
}

.owl-carousel.higlightSlider .dt-owl-item a.dt-btn{
  margin-top:auto !important;
}

/* responsive */
@media (max-width:768px){
  .owl-carousel.higlightSlider .dt-owl-item .vc_single_image-wrapper img{
    height:220px !important;
  }
  .owl-carousel.higlightSlider .dt-owl-item .carousel-item-wrap{
    padding:1.4rem !important;
  }
  .owl-carousel.higlightSlider .dt-owl-item a.dt-btn{
    padding:0 1.4rem 1.4rem 1.4rem !important;
  }
  .owl-carousel.higlightSlider .dt-owl-item h4{
    font-size:1.35rem !important;
  }
}



/**
------------------------
Portfolioboxen
------------------------
*/
.braunPortfolio .owl-stage{
  padding-top:50px;
  padding-bottom:50px;
}

.braunPortfolio{
  --pink-primary:#d83371;
  --pink-light:#F298B5;
  --slate-dark:#2C3E50;
  --gray-medium:#5D6D7E;
  --font-display:"Work Sans",sans-serif;
  --font-body:"Inter",sans-serif;
}

.braunPortfolio article.post{
  background:#fff !important;
  border-radius:15px !important;
  overflow:hidden !important;
  box-shadow:0 10px 40px rgba(0,0,0,.08) !important;
  transition:all .4s ease !important;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
}

.braunPortfolio article.post:hover{
  transform:translateY(-10px) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.12) !important;
}

.braunPortfolio article.post::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:5px !important;
  background:linear-gradient(90deg,var(--pink-primary) 0%,var(--pink-light) 100%) !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  transition:transform .4s ease !important;
  z-index:50 !important;
  pointer-events:none !important;
}

.braunPortfolio article.post:hover::after{
  transform:scaleX(1) !important;
}

.braunPortfolio .post-thumbnail,
.braunPortfolio .post-thumbnail a.post-thumbnail-rollover{
  padding-bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
}

.braunPortfolio .post-thumbnail a.post-thumbnail-rollover{
  display:block !important;
  position:relative !important;
}

.braunPortfolio .post-thumbnail img,
.braunPortfolio .post-thumbnail a.post-thumbnail-rollover img{
  display:block !important;
  width:100% !important;
  height:250px !important;
  object-fit:cover !important;
  position:static !important;
}

.braunPortfolio .post-entry-content{
  padding:2rem !important;
  font-family:var(--font-body) !important;
  flex:1 !important;
}

.braunPortfolio .entry-title{
  margin:0 0 1rem 0 !important;
  line-height:1.2 !important;
}

.braunPortfolio .entry-title a{
  font-family:var(--font-display) !important;
  font-size:1.6rem !important;
  font-weight:700 !important;
  color:var(--slate-dark) !important;
  text-decoration:none !important;
}

.braunPortfolio .entry-title a:hover{
  color:var(--pink-primary) !important;
}

.braunPortfolio .entry-excerpt{
  margin:0 0 1.5rem 0 !important;
  color:var(--gray-medium) !important;
  line-height:1.7 !important;
  font-family:var(--font-body) !important;
  font-size:1rem !important;
}

.braunPortfolio .entry-excerpt p{
  margin:0 !important;
}

.braunPortfolio a.post-details.details-type-link{
  font-family:var(--font-body) !important;
  font-size:1rem !important;
  font-weight:600 !important;
  color:var(--pink-primary) !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  transition:gap .3s ease !important;
}

.braunPortfolio a.post-details.details-type-link:hover{
  gap:1rem !important;
}

/**
------------------------
Feature Box
------------------------
*/

.featureBox{
  --pink-primary:#d83371;
  --pink-light:#F298B5;
  --slate:#2C3E50;
  --text:#5D6D7E;

  position:relative !important;
  overflow:hidden !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 10px 40px rgba(0,0,0,.08) !important;
  transition:transform .4s ease, box-shadow .4s ease !important;
  padding:0 !important;
}

.featureBox:hover{
  transform:translateY(-10px) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.12) !important;
}

.featureBox::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:5px !important;
  background:linear-gradient(90deg,var(--pink-primary) 0%,var(--pink-light) 100%) !important;
  transform:scaleX(0) !important;
  transform-origin:center center !important;
  transition:transform .4s ease !important;
  z-index:10 !important;
  pointer-events:none !important;
}

.featureBox:hover::before{
  transform:scaleX(1) !important;
}

.featureBox > .wpb_column,
.featureBox > .wpb_column > .vc_column-inner,
.featureBox > .wpb_column > .vc_column-inner > .wpb_wrapper{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}

.featureBox .wpb_single_image,
.featureBox .wpb_text_column{
  margin:0 !important;
}

.featureBox .wpb_single_image .vc_figure,
.featureBox .vc_single_image-wrapper{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
}

.featureBox .vc_single_image-wrapper{
  display:block !important;
  overflow:hidden !important;
}

.featureBox .vc_single_image-wrapper img{
  width:100% !important;
  height:250px !important;
  object-fit:cover !important;
  display:block !important;
}

.featureBox .wpb_text_column .wpb_wrapper{
  padding:2rem !important;
}

.featureBox h4{
  margin:0 0 1rem 0 !important;
  font-family:"Work Sans",sans-serif !important;
  font-size:1.6rem !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color:var(--slate) !important;
  text-align:left !important;
}

.featureBox p{
  margin:0 !important;
  font-family:"Inter",sans-serif !important;
  font-size:1rem !important;
  line-height:1.7 !important;
  color:var(--text) !important;
  text-align:left !important;
}

.featureBox .btn-align-center{
  text-align:left !important;
  padding:1.25rem 2rem 2rem 2rem !important;
  margin:0 !important;
}

.featureBox a.dt-btn.braunButtonBig{
  font-family:"Inter",sans-serif !important;
  font-size:1rem !important;
  font-weight:600 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--pink-primary) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  text-transform:none !important;
}

.featureBox a.dt-btn.braunButtonBig::after{
  content:"›" !important;
  margin-left:.25rem !important;
}

.featureBox a.dt-btn.braunButtonBig:hover{
  color:var(--pink-primary) !important;
}

.featureBoxOuterUeberUns .featureBox{
  margin-left: 15px !important;
  margin-right: 15px !important;
  width: 31% !important;
}

@media (max-width:768px){
  .featureBox .vc_single_image-wrapper img{height:220px !important;}
  .featureBox .wpb_text_column .wpb_wrapper{padding:1.4rem !important;}
  .featureBox .btn-align-center{padding:1rem 1.4rem 1.4rem 1.4rem !important;}
  .featureBox h4{font-size:1.35rem !important;}
  .featureBox {
	margin-left: 8px !important;
    margin-right: 8px !important;
	}
	
  .featureBoxOuterUeberUns .featureBox{
	  margin-left: initial !important;
	  margin-right: initial !important;
	  width: initial !important;
	}
}


/**
------------------------
Feature Box
------------------------
*/

.featureBoxOuter2 .featureBox .vc_single_image-wrapper img{
  width:100% !important;
  height:350px !important;
  object-fit:cover !important;
  display:block !important;
}

.featureBox .wpb_text_column .wpb_wrapper{
  padding:2rem !important;
}

.featureBox h4{
  margin:0 0 1rem 0 !important;
  font-family:"Work Sans",sans-serif !important;
  font-size:1.6rem !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color:var(--slate) !important;
  text-align:left !important;
}

.featureBox p{
  margin:0 !important;
  font-family:"Inter",sans-serif !important;
  font-size:1rem !important;
  line-height:1.7 !important;
  color:var(--text) !important;
  text-align:left !important;
}

.featureBox .btn-align-center{
  text-align:left !important;
  padding:1.25rem 2rem 2rem 2rem !important;
  margin:0 !important;
}

.featureBox a.dt-btn.braunButtonBig{
  font-family:"Inter",sans-serif !important;
  font-size:1rem !important;
  font-weight:600 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--pink-primary) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  text-transform:none !important;
}

.featureBox a.dt-btn.braunButtonBig::after{
  content:"›" !important;
  margin-left:.25rem !important;
}

.featureBox a.dt-btn.braunButtonBig:hover{
  color:var(--pink-primary) !important;
}

.featureBoxOuterUeberUns .featureBox{
  margin-left: 15px !important;
  margin-right: 15px !important;
  width: 31% !important;
}

@media (max-width:768px){
  .featureBox .vc_single_image-wrapper img{height:220px !important;}
  .featureBox .wpb_text_column .wpb_wrapper{padding:1.4rem !important;}
  .featureBox .btn-align-center{padding:1rem 1.4rem 1.4rem 1.4rem !important;}
  .featureBox h4{font-size:1.35rem !important;}
  .featureBox {
	margin-left: 8px !important;
    margin-right: 8px !important;
	}
	
  .featureBoxOuterUeberUns .featureBox{
	  margin-left: initial !important;
	  margin-right: initial !important;
	  width: initial !important;
	}
}


/**
------------------------
Ablauf
------------------------
*/
.braunAblauf {
  --pink-primary:#d83371;
  --pink-light:#F298B5;
  --slate:#2C3E50;
  --text:#5D6D7E;

  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:18px;
  flex-wrap:nowrap;
  margin:40px 0;

  /* Fix: prevent overflow on small screens */
  max-width:100%;
  box-sizing:border-box;
}

.braunAblaufStep {
  flex:1;
  background:#fff;
  border-radius:15px;
  box-shadow:0 10px 40px rgba(0,0,0,.08);
  padding:26px 22px;
  position:relative;
  transition:transform .4s ease, box-shadow .4s ease;
  text-align:center;
  min-height:240px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  /* Fix: include padding in width calculations */
  box-sizing:border-box;
  min-width:0;
}

.braunAblaufStep::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg,var(--pink-primary) 0%,var(--pink-light) 100%);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .4s ease;
  pointer-events:none;
}

.braunAblaufStep:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.braunAblaufStep:hover::before{
  transform:scaleX(1);
}

.braunAblaufIcon {
  width:120px;
  height:120px;
  margin:0 auto 18px auto;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(216,51,113,.08);
  box-sizing:border-box;
}

.braunAblaufIcon img{
  width:100px;
  height:100px;
  object-fit:contain;
  display:block;
}

.braunAblaufTitle{
  font-family:"Work Sans",sans-serif;
  font-size:18px;
  font-weight:700;
  color:var(--slate);
  margin:0;
  line-height:1.25;
}

.braunAblaufText{
  font-family:"Inter",sans-serif;
  font-size:15px;
  line-height:1.7;
  color:var(--text);
  margin:10px 0 0 0;
}

.braunAblaufArrow {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:700;
  color:var(--pink-primary);
  padding:0 4px;
  min-width:28px;
}

/* Mobile */
@media (max-width: 992px){
  .braunAblauf{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:14px;

    /* Fix: keep content inside viewport */
    padding:0 14px;
    width:100%;
  }

  /* Fix 1: show arrows between boxes, rotated down */
  .braunAblaufArrow{
    display:flex;
    min-width:0;
    width:100%;
    padding:6px 0;
    line-height:1;
    transform:rotate(90deg);
    justify-content:center;
  }

  /* Make each step full width without overflow */
  .braunAblaufStep{
    width:100%;
    flex:0 0 auto;
    min-height:auto;
    text-align:center;
  }

  .braunAblaufIcon{
    margin:0 auto 14px auto;
  }
}


/**
------------------------
Navigation
------------------------
*/

.menu-text {
	color: var(--slate-dark) !important;
    text-decoration: none;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: color 0.3s ease;
}

.menu-text:hover {
	color: var(--pink-primary) !important;
}

/**
-------------------------
Kontaktformular
-------------------------
*/
#nf-form-1-cont{
  --pink-primary:#d83371;
  --pink-light:#F298B5;
  --slate:#2C3E50;
  --text:#5D6D7E;
  --radius:12px;
}

#nf-form-1-cont,
#nf-form-1-cont *{
  font-family:"Inter",sans-serif !important;
}

#nf-form-1-cont .nf-form-fields-required{
  color:var(--text) !important;
  font-size:14px !important;
  line-height:1.6 !important;
  margin:0 0 18px 0 !important;
}

#nf-form-1-cont .ninja-forms-req-symbol{
  color:var(--pink-primary) !important;
  font-weight:700 !important;
}

#nf-form-1-cont .nf-field-container{
  margin-bottom:18px !important;
}

#nf-form-1-cont .nf-field-label label{
  font-family:"Work Sans",sans-serif !important;
  font-weight:700 !important;
  color:var(--slate) !important;
  font-size:15px !important;
  margin:0 0 8px 0 !important;
  display:inline-block !important;
}

#nf-form-1-cont .nf-field-element{
  margin:0 !important;
}

#nf-form-1-cont .ninja-forms-field.nf-element{
  width:100% !important;
  background:#fff !important;
  color:var(--slate) !important;
  border:1px solid rgba(44,62,80,.16) !important;
  border-radius:var(--radius) !important;
  padding:12px 14px !important;
  font-size:15px !important;
  line-height:1.4 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.04) !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

#nf-form-1-cont textarea.ninja-forms-field.nf-element{
  min-height:150px !important;
  resize:vertical !important;
}

#nf-form-1-cont .ninja-forms-field.nf-element::placeholder{
  color:rgba(93,109,126,.75) !important;
}

#nf-form-1-cont .ninja-forms-field.nf-element:focus{
  outline:none !important;
  border-color:rgba(216,51,113,.55) !important;
  box-shadow:0 10px 26px rgba(216,51,113,.14) !important;
}

#nf-form-1-cont .nf-error-wrap,
#nf-form-1-cont .nf-error,
#nf-form-1-cont .nf-form-errors{
  font-size:13px !important;
}

#nf-form-1-cont .nf-error{
  color:#b00020 !important;
}

#nf-form-1-cont .submit-container{
  margin-top:6px !important;
  margin-bottom:0 !important;
}

#nf-form-1-cont #nf-field-4.ninja-forms-field.nf-element[type="submit"]{
  width:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:"Inter",sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  padding:14px 26px !important;
  border-radius:12px !important;
  border:0 !important;
  background:linear-gradient(90deg,var(--pink-primary) 0%,var(--pink-light) 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(216,51,113,.22) !important;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
  cursor:pointer !important;
  text-transform:none !important;
}

#nf-form-1-cont #nf-field-4.ninja-forms-field.nf-element[type="submit"]:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 18px 40px rgba(216,51,113,.28) !important;
  filter:saturate(1.05) !important;
}

#nf-form-1-cont #nf-field-4.ninja-forms-field.nf-element[type="submit"]:active{
  transform:translateY(0) !important;
}

@media (max-width:768px){
  #nf-form-1-cont .nf-field-label label{font-size:14px !important;}
  #nf-form-1-cont .ninja-forms-field.nf-element{font-size:15px !important;}
  #nf-form-1-cont #nf-field-4.ninja-forms-field.nf-element[type="submit"]{
    width:100% !important;
  }
}



/**
-------------------------
Header
-------------------------
*/
#main-slideshow h1 {
	font-family: var(--font-display) !important;
    font-size: 4.5rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
    color: var(--slate-dark) !important;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5) !important;
	text-align: center !important;
}


#main-slideshow p {
	font-size: 1.35rem !important;
    color: var(--slate-dark) !important;
    margin-bottom: 2.5rem !important;
    line-height: 1.8 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important;
}

#main-slideshow sr7-txt  {
	font-size: 1.35rem !important;
    color: #FFFFFF !important;
    margin-bottom: 2.5rem !important;
    line-height: 1.8 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important;
}

/**
------------------------
Footer
------------------------
*/

#footer .widget_custom_html  .widget-title{
	font-family: var(--font-display) !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

#footer .widget_custom_html  .textwidget p{
	font-family: var(--font-display) !important;
   margin-bottom: 1rem !important;
	color: #fff !important;
	line-height: 1.8 !important;
}

#footer .widget_nav_menu  .widget-title{
	font-family: var(--font-display) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

#footer .widget_nav_menu  .menu-item{
		font-family: var(--font-display) !important;
	font-size: 1rem !important;
		color: var(--white) !important;
    text-decoration: none !important;
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
}

#footer .widget_nav_menu  .menu-item a:hover{
		opacity: 1 !important;
    color: var(--pink-light) !important;
    padding-left: 5px !important;
	 text-decoration: none !important;
	transition: all 0.3s ease !important;
}

#footer .widget_nav_menu  ul li{
		border: none !important;
}

.contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.contact-gif {
  max-width: 120px !important;
  height: auto !important;
}

.contact-phone span {
  display: block !important;
  font-size: 14px !important;
  color: #666 !important;
}

.contact-phone a {
  font-size: 20px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: #d93473 !important;
}

@media (max-width: 600px) {
  .contact-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/**
------------------------
Mobile Fixes
------------------------
*/

.masthead:not(.side-header):not(.side-header-menu-icon) .mobile-header-bar {
	padding-top: 5px !important;
    padding-bottom: 5px !important;
}

@media (max-width: 768px) {
  #main-slideshow h1 {
    font-size: 2.5rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
	text-align: center !important;
	left: 0 !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	text-align: center !important;
	}
  
  #main-slideshow p {
		font-size: 1.35rem !important;
		line-height: 1.8rem !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
		text-align: center !important;
		left: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	
	  #main-slideshow sr7-txt {
		font-size: 1.35rem !important;
		line-height: 1.8rem !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
		text-align: center !important;
		left: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	
	.owl-carousel.portfolio-carousel-shortcode .post-entry-content { padding: 1.4rem !important; }
	.owl-carousel.portfolio-carousel-shortcode .post-thumbnail img { height: 220px !important; }
	.owl-carousel.portfolio-carousel-shortcode .entry-title a { font-size: 1.35rem !important; }
	
	.imagepaddingbottom {
		padding-bottom: 5rem !important;
	}
	.imagepaddingtop {
		padding-top: 5rem !important;
	}
	
	.contactBoxes .vc_row .wpb_row{
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

	
}