/*
 Theme Name:   BENDAVID
 Theme URI:    https://generatepress.com
 Description:  GeneratePress child theme
 Author:       Juliane de Vries - Webentwicklung ju:like
 Author URI:   https://ju-like.de
 Template:     generatepress
 Version:      0.2
*/

:root {
	--bd-weiss: #fffcfa;
	--bd-schwarz: #323232;
	--bd-rot: rgba(170, 70, 80, 1);	
}
::selection {
	color: #fff !important;
	background: var(--bd-rot);
}
#kontakt ::selection, #philosophy ::selection {
	background: var(--bd-schwarz);
}
html, body {
    min-height: 100dvh;
    background-color: var(--bd-schwarz); /* oder welche Farbe dort sein soll */
}
.z-high {
  position: relative;
  z-index: 9999;
}
/* Schriftarten und Überschriften, responsive!*/
h1, h2, h3, h4 {
	font-family: 'Montserrat';	
}
h1 {
	font-size: clamp(1.4rem, 3vw + 1rem, 3.5rem);
  	text-transform: uppercase;
  	text-align: center;
  	line-height: 1.3;
  	font-weight: 300;	
	letter-spacing: clamp(0.1em, 0.3vw, 0.25em);	
	text-shadow: 0 6px 8px rgba(0, 0, 0, 0.9);
}
h2 {
	text-transform: uppercase;
	font-size: clamp(1.2rem, 3vw + 0.5rem, 1.9rem);
	font-weight: 300;
	letter-spacing: clamp(0.1em, 0.3vw, 0.2em);
}
h3 {
	text-transform: uppercase;
	font-size: clamp(1.2rem, 2vw + 0.5rem, 1.4rem);
	font-weight: 600;
}
h4 {
	font-weight: 700;
	line-height: 1.1em;
	font-size: 1.25em;
}
body {
	font-family: 'Avenir';
	font-weight: 400;
}
a {
	text-decoration: none;
}
@media screen and (max-width: 767px) {
	body h3, body h4 { 
		margin-bottom: 10px !important;
	}
}
/* 2026-03-11 jdev Hover-Effekt Hauptmenü*/
#menu-hauptmenue-ueber-767px {
	position: relative;
	top: 18px;
}
#menu-hauptmenue-ueber-767px a {
	position: relative;
	font-size: clamp(1.1rem, 2vw + 0.5rem, 1.3rem);
	letter-spacing: clamp(0.1em, 0.3vw, 0.2em);
	text-shadow: 0 6px 8px rgba(0, 0, 0, 0.9);
	z-index: 0;
	display: inline-block;
	width: auto;
}
#menu-hauptmenue-ueber-767px a::before {
  	content: '';
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 300%;
  	height: 100%;
  	background-color: var(--bd-rot);
  	z-index: -1;
  	transform: translateX(-500%);
  	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#menu-hauptmenue-ueber-767px a:hover::before, #menu-hauptmenue-ueber-767px a:active::before, #menu-hauptmenue-ueber-767px a:focus::before,  #menu-hauptmenue-ueber-767px a:hover:active::before {
  	transform: translateX(-63%);
}
/* Ende Hovers Hauptmenü*/

/* Mobiles Menü*/
@media screen and (max-width: 767px) {
  .jdev-menu-mobil {
    position: fixed !important;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  /* Platz für das fixierte Menü: erste BB-Row danach nach unten schieben */
  .jdev-menu-mobil + .fl-row {
    margin-top: 55px !important;
  }

  /* Burger-Farbe je nach Section: Font-Icon → color statt background-color */
  .jdev-menu-mobil[data-section="philosophy"] .fl-menu-mobile-toggle,
  .jdev-menu-mobil[data-section="services"] .fl-menu-mobile-toggle {
    color: var(--bd-schwarz) !important;
  }
}

/* Mobile menu toggle button → ganz rechts */
/* Wrapper relativ, damit nav absolut dazu positioniert werden kann */
.jdev-menu-mobil .fl-menu {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

/* Toggle Button rechts */
.jdev-menu-mobil .fl-menu-mobile-toggle {
  flex-shrink: 0;
}

/* Aufgeklapptes Menü: 50% breit, direkt links vom Toggle */
.jdev-menu-mobil .fl-menu nav {
  position: absolute;
  right: 50%; /* direkt links neben dem Toggle */
  top: 0;
  width: 50vw;
  text-align: right;
  z-index: 999;
  background: inherit;
}

.jdev-menu-mobil .fl-menu ul {
  width: 100% !important;
  padding: 12px 24px 16px 24px !important;
}

.jdev-menu-mobil .fl-menu ul li a {
  padding: 10px 0 !important;
  white-space: nowrap;
  display: block;
}
/* 2026-03-11 jdev Fixierter Button Let's talk*/

/* Alle BB-Zwischenelemente auf static → #top wird der Anker */
#top .fl-row-content-wrap,
#top .fl-row-content,
#top .fl-col-group,
#top .fl-col,
#top .fl-col-content,
#top .fl-module {
  position: static !important;
}

/* Wrapper positioniert sich jetzt relativ zu #top */
.lets-talk-wrapper {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}
.lets-talk {
  position: static;
  pointer-events: all;
  float: right;
  background-color: var(--bd-rot);
  color: var(--bd-weiss);
  padding: 6px calc(2% + 5px) 6px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.2em;
}
a.lets-talk::after {
  content: '→';
  font-size: 20px;
  line-height: 1;
}
/* Ende button Let's talk*/


/* === Hero intro animation (#top) === */
#bendavid-header,
.jdev-menu-mobil {
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#top h1 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.lets-talk {
  opacity: 0;
  transition: opacity 0.7s ease;
}

/************************************************************ Sections, Höhen und scroll-Snap *****************/
#top {
  		position: relative;
		top: -90px;
		margin-bottom: -90px;
		height: 100svh;
	}

@media screen and (min-width: 1200px) {
	/* 1. Die section selbst */
	section.slides {
  		height: 100svh;
  		display: flex;
  		flex-direction: column;
  	
  		scroll-snap-align: start;
	}
	#top {
  		position: relative;
		top: -110px;
		margin-bottom: -110px;
		height: 100svh;	 
	}
	/* 2. BB-Wrapper */
	section.slides > .fl-row-content-wrap {
  		flex: 1;
  		display: flex;
  		flex-direction: column;
  		min-height: 0;
  		padding-top: 0 !important;
  		padding-bottom: 0 !important;
	}

	/* 3. Content-Container */
	section.slides .fl-row-content {
  		flex: 1;
  		display: flex;
  		flex-direction: column;
  		justify-content: space-between;
  		align-items: stretch;
 		gap: 0 !important;
  		row-gap: 0 !important;
  		padding-top: 10px !important;
  		padding-bottom: 5px !important;
  		min-height: 0;
  		width: 98% !important;
  		max-width: 100% !important;
  		margin-left: auto !important;
  		margin-right: auto !important;
  		box-sizing: border-box;
	}

	/* 4. Col-groups volle Breite */
	section.slides .fl-row-content > .fl-col-group {
  		width: 100%;
  		flex-shrink: 0;
  		margin-top: 0 !important;
  		margin-bottom: 0 !important;
	}

	/* 5. Letztes Element ans Ende */
	section.slides .fl-row-content > .fl-col-group:last-child {
  		margin-top: auto !important;
	}
	section.slides .fl-row-content > .fl-col-group:last-child p {
		margin-bottom: 5px;
	}
	/* 6 h2 ein paar pixels hoch*/
	section h2 {
		margin-top: -1px;	
	}
	/* Scroll-Snap Container */
	html {
  		scroll-snap-type: y mandatory;
  		scroll-behavior: smooth;
	}
	/* Jede section snappt */
	#top,
	#about,
	#meet,
	#philosophy,
	#experience,
	#services,
	#kontakt,
	#footer {
  		scroll-snap-align: start;
  		scroll-snap-stop: always;
  		scroll-margin-top: 0px;
	}

	#top {
  		scroll-margin-top: 110px;
	}
}
/* Scroll-Snap auf rechtlichen Unterseiten deaktivieren */
@media screen and (min-width: 1200px) {
  html:has(body.page-id-316),
  html:has(body.page-id-309) {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}
/* Ende der Anpassungen 100% Höhe und scroll-snap ab 1200px Breite*/
/*********************************************** About Us: Textblöcke & rote linien*/
.line-before-left, .line-before-right {
    position: relative;
    opacity: 0;
    overflow: visible !important;
    transition: opacity 0.4s ease 0.3s;
}
.line-before-left::before {
  content: "";
  height: 5px;
  width: 400%;
  background: var(--bd-rot);
  position: absolute;
  top: 0px;
  right: -20px;
  /* von links reinfahren */
  transform: translateX(-120vw);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.line-before-right::before {
  content: "";
  height: 5px;
  width: 400%;
  background: var(--bd-rot);
  position: absolute;
  top: 0px;
  left: -20px;
  /* von rechts reinfahren */
  transform: translateX(120vw);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (min-width: 768px) {
  .line-before-left::before,
  .line-before-right::before {
    height: 15px;
  }
}

@media (min-width: 1200px) {
  .line-before-left::before,
  .line-before-right::before {
    height: 20px;
  }
}
.line-before-left.is-visible::before,
.line-before-right.is-visible::before {
  transform: translateX(0);
}
.line-before-left.is-visible,
.line-before-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* Textinhalt-Animation wird komplett per JS (Inline-Styles) gesteuert */

/* Fly-in on scroll: h2 */
h2 {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
h2.entering-top {
  opacity: 0;
  transform: translateY(-18px);
}
h2.is-visible {
  opacity: 1;
  transform: translateY(0);
}
h2.exited-top {
  opacity: 0;
  transform: translateY(-18px);
}

/* Fly-in on scroll: .fade-in (langsamer, mit Verzögerung) */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}
.fade-in.entering-top {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in.exited-top {
  opacity: 0;
  transform: translateY(-24px);
}
@media (min-width: 1001px) {
	.portrait img {
		border-bottom: 20px solid transparent;
		transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.portrait img:hover {
		border-bottom: 20px solid var(--bd-rot);
		transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
}
/* Philosophy (das große Zitat)*/
.philosophy {
	font-size: clamp(1.4rem, 3.2vw, 4rem);
  	line-height: 1.45;
  	font-weight: 400;
  	letter-spacing: 0.01em;
}
.philosophy .rot, .philosophy:hover .wechselrot  {
	color: var(--bd-rot);
}
.philosophy .rot, .philosophy:hover .wechselrot {
  background: linear-gradient(90deg, #c0392b 0%, #7b0000 30%, #c0392b 50%, #7b0000 70%, #c0392b 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sweepRed 10s ease-in-out infinite;
}
.philosophy:hover .rot {
	color: #222222 !important;
}
.philosophy:hover .rot {
  background: linear-gradient(90deg, #222222 0%, #222222 30%, #222222 50%, #222222 70%, #222222 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sweepRed 10s ease-in-out infinite;
}
@keyframes sweepRed {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}






/************************************************************** SERVICES *******************/
/* Services Höhe Icons*/
.fl-photo-img-svg img {
	height: 70px;
	width: auto;
	margin-bottom: 10px;
	margin-left: 2px;
}
.services h4  {
	margin-bottom: 2px !important;
}
/* Services Höhen der Boxen für h4 und Text nur bei Mehrspaltigkeit (Tablet 2 Spalten, Desktop 4 Spalten)*/
@media screen and (min-width: 769px) {
	.services h4 {
		height: 50px;
	}
	.services-text {
		height: 90px;
		overflow-y: auto;
		overflow-x: hidden;
	}
}
.services {
		padding: 0 20px;
	}
/* Services - mehr erfahren*/
.services-mehr .fl-accordion-item {
  	display: flex;
  	flex-direction: column-reverse;
	
}
/* Display von table → flex überschreiben */
.fl-accordion-button {
  	display: flex !important;
  	align-items: center;
  	position: relative;
  	overflow: visible;
	width: 80px;
	min-width: 80px;
}

.fl-accordion-button-label {
  	display: block !important;  /* table-cell → block */
  	flex: 1;
  	position: relative;
  	z-index: 1;
}

/* Icon/Chevron ebenfalls */
.fl-accordion-button-icon {
  	position: relative;
  	z-index: 1;
	margin-top: 4px;
	margin-right: 15px;
	opacity: 1;
}
.fl-accordion-button .fl-accordion-button-icon-right {
	opacity: 1;
}
/* Die rote Box */
.fl-accordion-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -15px;                          
  width: calc(100% + 15px);
  height: 100%;
  background: var(--bd-rot);
  transform: translateX(calc(-100% - 15px)); 
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
/* Box am Handy und Tablet sofort da haben (gibt ja kein Hover)*/
@media screen and (max-width: 1199px) {
	.fl-accordion-button {
		width: 95px;
		min-width: 95px;
		margin-top: 6px;
	}
	.fl-accordion-button::before {
		transform: translateX(0);
	}
	.fl-accordion-button-label, .fl-accordion-item-active .fl-accordion-button-label {
		margin-left: 15px;
		transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}
}
/* Hover → Box reingleiten */
@media screen and (min-width: 1200px) {
	.fl-accordion-button:hover,  .fl-accordion-item-active .fl-accordion-button {
		width: 95px;
		min-width: 95px;
	}
	.fl-accordion-button:hover::before {
  	transform: translateX(0);
	}
	.fl-accordion-button:hover, .fl-accordion-item-active .fl-accordion-button-label {
		margin-left: 15px;
		transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}
}
	
/* ALLE GRÖßEN: Aktiv → bleibt */
.fl-accordion-item-active .fl-accordion-button::before {
  	transform: translateX(0);
}

/************************************************************* Experience********************************/
.experience-box {
  	display: flex;
  	align-items: center;     /* vertikal */
  	justify-content: center; /* horizontal */
}
.experience-box .frei .fl-photo-content {
  	display: inline-block;
  	line-height: 0;
  	position: relative;
  	padding: 10px 20px;
}
@media screen and (min-width:768px) {
	.experience-box .frei .fl-photo-content {
  	display: inline-block;
  	line-height: 0;
  	position: relative;
  	padding: 20px 30px;
	}
}
@media screen and (min-width:1400px) {
	.experience-box .frei .fl-photo-content {
  	display: inline-block;
  	line-height: 0;
  	position: relative;
  	padding: 40px 60px;
	}
}
/******************************************************************* Kontakt: weisse linien*/
.talk-1, .talk-2 {
	position: relative;
	overflow: visible !important;
}
.talk-1::after {
  content: " ";
  height: 0px;           /* schlank auf allen Geräten */
  width: 400%;
  background: var(--bd-weiss);
  position: absolute;
  top: 5px;
  left: 50%;             /* startet ab Mitte des Containers */

  /* Animation */
  transform: translateX(120vw);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Tablet */
@media (min-width: 768px) {
  .talk-1::after {
    height: 15px;
    left: 105%;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .talk-1::after {
    height: 20px;
    left: 102%;
  }
}

.talk-1.is-visible::after {
  transform: translateX(0);
}
.talk-2::after {
  content: " ";
  display: block;        
  height: 0px;
  width: 400%;
  background: var(--bd-weiss);
  position: absolute;
  top: 5px;
  right: 50%;
  transform: translateX(-120vw);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Tablet */
@media (min-width: 768px) {
  .talk-2::after {
    height: 15px;
    right: 105%;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .talk-2::after {
    height: 20px;
    right: 102%;
  }
}

.talk-2.is-visible::after {
  transform: translateX(0);
}
/************************************************** FOOTER ****************************************/
/* Slide Navigation im footer*/
.slide-nav {
  position: fixed;
  bottom: 30px;
  right: calc(1% + 20px);
  display: flex;
  gap: 16px;
  z-index: 9999;
}
.slide-nav {
  transition: opacity 0.4s ease;
}
.slide-nav a {
  display: block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--bd-rot);
  background: transparent;
  transition: background 0.2s;
}

.slide-nav a:hover,
.slide-nav a.active {
  background: var(--bd-rot);
}
/* Standard */
.slide-nav a {
  border-color: var(--bd-rot);
}
.slide-nav a.active {
  background: var(--bd-rot);
}

/* Wenn slide1 aktiv ist → weiß */
.slide-nav[data-section="top"] a {
  display: none;
}
.slide-nav[data-section="top"] a:hover {
  background: #ffffff;
}
.slide-nav[data-section="top"] a.active {
  background: #ffffff;
}

/* Wenn slide2 aktiv ist → weiss & rot */
.slide-nav[data-section="about"] a {
  	border-color: #fff;
}
.slide-nav[data-section="about"] a:hover {
  	background: var(--bd-rot);
	border-color: var(--bd-rot);
}
.slide-nav[data-section="about"] a.active {
  background: var(--bd-rot);
border-color: var(--bd-rot);
}
/* Wenn slide3 aktiv ist → schwarz & rot */
.slide-nav[data-section="philosophy"] a {
  	border-color: #000;
}
.slide-nav[data-section="philosophy"] a:hover {
  	background: var(--bd-rot);
	border-color: var(--bd-rot);
}
.slide-nav[data-section="philosophy"] a.active {
  background: var(--bd-rot);
border-color: var(--bd-rot);
}
/* Wenn slide4 aktiv ist → weiss & rot */
.slide-nav[data-section="services"] a {
  	border-color: #fff;
}
.slide-nav[data-section="services"] a:hover {
  	background: var(--bd-rot);
	border-color: var(--bd-rot);
}
.slide-nav[data-section="services"] a.active {
  background: var(--bd-rot);
border-color: var(--bd-rot);
}
/* Wenn slide5 aktiv ist → schwarz & rot */
.slide-nav[data-section="experience"] a {
  	border-color: #000;
}
.slide-nav[data-section="experience"] a:hover {
  	background: var(--bd-rot);
	border-color: var(--bd-rot);
}
.slide-nav[data-section="experience"] a.active {
  background: var(--bd-rot);
border-color: var(--bd-rot);
}
/* Wenn "Kontakt" oder Let's Talk slide6 aktiv ist → weiß & weiß */
.slide-nav[data-section="kontakt"] a {
  	border-color: var(--bd-weiss);
}
.slide-nav[data-section="kontakt"] a:hover {
  	background: var(--bd-weiss);
	border-color: var(--bd-weiss);
}
.slide-nav[data-section="kontakt"] a.active {
  background: var(--bd-weiss);
border-color: var(--bd-weiss);
}
.rechtliches a {
	margin-right: 42px;
}

/* ===== Rechtliche Unterseiten: Datenschutz (316) + Impressum (309) ===== */

/* 1. H1: linksbündig, kein Schatten */
.page-id-316 h1,
.page-id-309 h1 {
  text-align: left;
  text-shadow: none;
}

/* 2. H2: keine Einblend-Animation */
.page-id-316 h2,
.page-id-309 h2 {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 3. Navigation ausblenden, nur Logo bleibt */
.page-id-316 #menu-hauptmenue-ueber-767px,
.page-id-309 #menu-hauptmenue-ueber-767px {
  display: none !important;
}
.page-id-316 .jdev-menu-mobil .fl-menu-mobile-toggle,
.page-id-309 .jdev-menu-mobil .fl-menu-mobile-toggle,
.page-id-316 .jdev-menu-mobil nav,
.page-id-309 .jdev-menu-mobil nav {
  display: none !important;
}

/* 4. Header: sofort sichtbar (kein Einblend-Delay), sticky, kompakter */
.page-id-316 #bendavid-header,
.page-id-309 #bendavid-header,
.page-id-316 .jdev-menu-mobil,
.page-id-309 .jdev-menu-mobil {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Header fixiert für Desktop und Mobilgeräte*/
.page-id-316 #bendavid-header,
.page-id-309 #bendavid-header,
.page-id-316 #bendavid-header-mobile,
.page-id-309 #bendavid-header-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--bd-schwarz);
}
/* Kompakte Höhe nur wenn Header fixiert ist (Klasse wird per JS gesetzt) */
#bendavid-header.bd-header-compact .fl-row-content-wrap {
  background-color: var(--bd-schwarz);
  padding-top: 20px !important;
  padding-bottom: 0 !important;
  margin-bottom: -30px !important;
}
/* Slide-Nav auf Rechtsseiten ausblenden */
.page-id-316 .slide-nav,
.page-id-309 .slide-nav {
  display: none !important;
}
/* Content-Abstand für den fixed Header — ggf. Wert anpassen */
.page-id-316 .site-content,
.page-id-309 .site-content,
.page-id-316 #content,
.page-id-309 #content {
  padding-top: 70px;
}