/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Child theme fuer Hello Elementor
 Author:       Uwe
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* Eigene Anpassungen hier einfuegen */




@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-VariableFont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Italic-VariableFont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
  font-family: 'Inria Serif';
  src: url('fonts/InriaSerif-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('fonts/InriaSerif-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('fonts/InriaSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('fonts/InriaSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('fonts/InriaSerif-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('fonts/InriaSerif-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: "Inter", Arial, sans-serif !important;
  color: var(--kw-text);
  line-height: 1.55;
}

body{
	/*opacity: .5 !important;*/
}

html{
	overflow-x: hidden;
}



:root {

  /* --- Farben -------------------------------------------------------- */
  --bas-dark:          #292F2E; /* Header, Footer, dunkle Bestattungsarten-Karten */
  --bas-accent-brown:  #8b5644; /* Serif-Headlines, Labels, sekundaerer Button (bg), Footer-Claim */
  --bas-green-light:   #EAF7EB; /* Hintergrund der nummerierten Trauerfall-Karten (01-06) */
  --bas-green-mid:     #A8DBB1; /* Sektions-Hintergrund "Was wir fuer Sie uebernehmen" + Zitat-Sektion */
  --bas-green-accent:  #8FCE9D; /* Primaerer CTA-Button-Hintergrund */
  --bas-green-stroke:  #82C893; /* Icon-Outlines, große Nummern (01-06) */
  --bas-text-dark:     #1B1918; /* Ueberschriften & Fliesstext auf hellem Grund */
  --bas-white:         #FFFFFF; /* Text auf dunklem/gruenem Grund */

  /* --- Schriften ------------------------------------------------------ */
  --font-serif: "Inria Serif", Georgia, serif;   /* Emotionale Headlines, Karten-Titel, Zitate */
  --font-sans:  "Inter", sans-serif;              /* Fliesstext, funktionale Ueberschriften, UI */

  /* --- Typo-Skala ----------------- */
  --fs-h1: 3rem;        /* 48px – Hero-Headline "Bestattungen am Sund" */
  --fs-h2: clamp(2.8125rem, 2.4375rem + 1.875vw, 4.6875rem) !important;
  --fs-h3: 1.5rem;       /* 24px – Karten-Titel ("Erdbestattung", "Organisation der Bestattung") */
  --fs-lead: 1.125rem;   /* 18px – Einleitungstext unter Headlines */
  --fs-body: clamp(1rem, 0.9rem + 0.25vw, 1.25rem);
  --fs-label: 0.875rem;  /* 14px – Kicker-Labels ("Schritt fuer Schritt", "Bestattungsarten"), Uppercase/Letterspacing */
  --fs-number: 3rem;     /* 48px – Grosse Nummern 01-06 */

  /* --- Abstaende & Radien ---------------------------------------------- */
  --radius-pill: 999px;  /* CTA-Buttons */
  --radius-card: 12px;   /* Karten (hell + dunkel) */
  --space-section: 6rem; /* Vertikaler Abstand zwischen Sektionen */
  --space-card-gap: 1.5rem;
}

:root {
  --e-global-typography-primary-font-family: "Inria Serif", serif !important;
  --e-global-typography-secondary-font-family: "Inria Serif", serif !important;
  --e-global-typography-text-font-family: "Inter", sans-serif !important;
  --e-global-typography-accent-font-family: "Inter", sans-serif !important;
}

.dunkelbraun{
	color: #8b5644;
}

/* --- Basis-Typografie --------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--bas-text-dark);
  line-height: 1.6;
}

h1, .headline-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.15;
  color: var(--bas-white); /* auf Bildhintergrund im Hero */
}

/* Serif-Zwischenueberschriften wie "Verbunden ueber das Leben hinaus" */
.headline-serif--accent {
  font-family: var(--font-serif);
  font-size: 2rem; /* ~32px */
  line-height: 1.2;
  color: var(--bas-accent-brown);
}
.headline-serif--accent em,
.headline-serif--accent i {
  font-style: italic;
}

h2, .headline-sans {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--bas-text-dark);
}

h3, .card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.kicker-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  color: var(--bas-accent-brown);
  text-transform: none;
}

p, .body-text {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.42;
}

/* --- Buttons ------------------------------------------------------------- */

/* Primaerer CTA (hellgruen), z.B. "Kontakt aufnehmen" im Hero */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--bas-green-accent);
  color: var(--bas-accent-brown);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-pill);
  transition: color 0.2s ease;
}
.btn-primary:hover {
  color: var(--bas-dark); /* dunkler Text bei Rollover, siehe Layout-Annotation */
}

/* Sekundaerer CTA (dunkelbraun), z.B. "Trauergespraech vereinbaren" */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--bas-accent-brown);
  color: var(--bas-white);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-pill);
  transition: opacity 0.2s ease;
}
.btn-secondary:hover {
  opacity: 0.85;
}

/* --- Karten -------------------------------------------------------------- */

.whattodo {
  padding: 0 !important;
}

.whattodo > div > div{
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  	/*max-height: 400px !important;*/

}


.whattodo div.elementor-heading-title {
  font-family: 'Inria Serif', serif;
  font-size: 70px !important;
  font-weight: 400 !important;
  line-height: 1.1;
  color: #92D7BD;
}

.whattodo h3.elementor-heading-title {
  font-family: 'Inria Serif', serif;
  font-size: 28px !important;
  line-height: 1.25;
  margin-top: 4px;
}

.whattodo .elementor-text-editor,
.whattodo .elementor-text-editor p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.whattodo {
}



/* --- Support-Section ------------------------------------------------------ */
.support {
  position: relative;
}

.support::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.support .elementor-heading-title,
.support h2 {
  position: relative;
  z-index: 1;
  color: #92D7BD !important;
  font-family: 'Inria Serif', serif;
  text-align: center;
  font-weight: 400;
  line-height: 1.2 !important;
}

.support .elementor-heading-title i,
.support h2 i {
  font-style: italic;
}

/* --- Leistungen-Section: Typografie aus InDesign --- */

#leistungen .kicker {
  font-family: 'Inria Serif', serif;
  font-weight: 700;
  font-size: 29px;      /* 22pt */
  line-height: 58px;    /* 43,46pt */
  letter-spacing: 0.07em; /* Tracking 70 */
}

#content #leistungen h2{
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 93px;      /* 70pt */
  line-height: 1.2;   /* 80pt */
  letter-spacing: 0.03em; /* Tracking 30 */
}

#leistungen .lead {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 27px;      /* 20pt */
  line-height: 40px;    /* 30pt */
  letter-spacing: 0.05em; /* Tracking 50 */
  max-width: 770px !important;
}


#leistungen .vorspann,
#bestattungsarten .vorspann {
  max-width: 620px !important;
}
#leistungen h3,
#bestattungsarten h3  {
  font-family: 'Inria Serif', serif;
  font-weight: 400;
  font-size: 28px !important;      /* 35pt */
  line-height: 1.2 !important;    /* 40pt */
  letter-spacing: -0.01em; /* Tracking -10 */
  color: #fff;
}



#leistungen .service-item .elementor-text-editor p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 23px;      /* 17pt */
  line-height: 39px;    /* 29pt */
  letter-spacing: 0.05em; /* Tracking 50 */
}


#leistungen .service-item {
  min-width: 0;
  overflow-wrap: break-word;
}

.bas-icon img {
  width: auto !important;
  height: 115px !important;
}

.bas-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}


.bas-fill-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* --- Header / Footer -------------------------------------------------------- */


#content{
	position: relative;
    top: 125px;
}

.site-header,
.site-footer {
  background-color: var(--bas-dark);
  color: var(--bas-white);
}

.site-footer .footer-claim {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bas-accent-brown);
}

.scroll-top-button {
  background-color: var(--bas-accent-brown);
  color: var(--bas-white);
  border-radius: 50%;
}




.site-branding{
	max-width: 236px;
}

.site-navigation{
	max-width: 66vw;
}

.site-description{
	display: none;
}

#site-header{
	background: #2b3534;
	height: 125px;
	position: fixed;
    z-index: 9;
    width: 100vw;
}
#menu-menueleiste{
	margin-top: 35px !important;
}
.site-navigation ul.menu li a {
	display: block;
	color: #fff;
	font-size: 17px; /*1.2vw;*/
}

.site-navigation ul.menu li a:hover,
#kontakt a:hover {
	color: #92D7BD;
}
.site-navigation ul.menu li.telefon a {
	font-size: 25px; /* 1.6vw; */
}



.inter{
  font-family: "Inter", sans-serif !important;

}
#content .inter h2{
  font-family: "Inter", sans-serif !important;
  line-height: 1.2 !important;
  font-weight: 400  !important;
}
.reg{
	font-weight: 400 !important;
}

h2, h3, h4, h5, h6{
  font-family: "Inria Serif", serif !important;
}

.p90{
	  font-size: 90px !important;
	   font-family: "Inria Serif", serif !important;
	   line-height: 1.2;
}
.p28 p,
.p28{
	  font-size: 28px !important;
}

.p20{
	  font-size: 20px !important;
}
.p_body{
	font-size: 17px !important;
}


.elementor-kit-1302 h2 {
  font-size: clamp(2.25rem, 1.95rem + 1.45vw, 4.25rem) !important;
  margin-bottom: 25px;
}

#content h4 {
  font-family: 'Inria Serif', serif !important;
  font-weight: 600 !important;
  font-size: 39px !important;      /* 35pt */
  line-height: 1.2 !important;    /* 40pt */
  letter-spacing: -0.01em; /* Tracking -10 */

}

#content #datenschutz h4,
#content #impressum h4,
#content #kontakt h4 {
  font-weight: 400 !important;
  }

#content #impressum h4,
#content #datenschutz h4 {
  font-size: 25px !important;
  }
  
#content h6 {
  font-family: 'Inria Serif', serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;      /* 35pt */
  line-height: 1.2 !important;    /* 40pt */
  margin-bottom: -10px !important;
  letter-spacing: -0.01em; /* Tracking -10 */
  color: #fff !important;
}

h1.entry-title{
	display:none !important;
}
#content #trauerfall h6.schritt {
  color: #8b5644 !important;
  margin-bottom: 30px !important;
}

#bestattungsarten .elementor-widget-text-editor{
	font-size: 17px !important;
	color: #fff;
}

#bestattungsarten .vorspann.elementor-widget-text-editor{
	font-size: 17px !important;
	color: #000;
}

#site-footer{
	display: none;
}


#footer_2,
#footer_4{
	top: 15px !important;
}


#kontakt a,
#kontakt p{
	color: #fff;
	font-size: 17px;
}

#datenschutz p,
#datenschutz a,
#impressum p,
#impressum a{
	color: #000;
	font-size: 17px;
}


#datenschutz a,
#impressum a{
	color: #725041;
}


#datenschutz a:hover,
#impressum a:hover{
	color: #92D7BD;
}
.SoMe svg{
	width: 100px !important;
}

b{
	font-weight: 700;
}
.site-navigation-toggle-icon{
	color: #92D7BD;
}

.menu-item a.active-section {
  color: #92D7BD !important; 
}

#menu-menueleiste-1 li a{
	background: #55595c  !important;
    color: #fff;
}

.tel_hinweis a{
	color: #92D7BD !important;
}


.bas-cta-button:hover .elementor-button-icon svg,
.bas-cta-button:hover .elementor-button-icon svg path,
.bas-cta-button:hover .elementor-button-icon svg polygon {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.kontaktbutton svg,
.kontaktbutton svg path,
.kontaktbutton svg polygon {
  fill: #725041 !important;
  stroke: #725041 !important;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.kontaktbutton:hover svg,
.kontaktbutton:hover svg path,
.kontaktbutton:hover svg polygon {
  fill: #2B3534 !important;
  stroke: #2B3534 !important;
}


[id] {
  scroll-margin-top: 120px;
}


/* --- ScrollTop  -------------------------------------------------------- */

.bas-scrolltop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #8b5644;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  border: none;
}
.bas-scrolltop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bas-scrolltop:hover {
  background: #8b5644;
}
.bas-scrolltop img {
  width: 120px;
  height: 120px;
  pointer-events: none;
}

/* --- Listen  -------------------------------------------------------- */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  margin: 0;
  padding-left: 20px;
}
.elementor-widget-text-editor li {
  padding-left: 0;
  margin-left: 0;
  line-break: anywhere;
}


 .u_mobile {
	display: none !important;
 }
  .u_desktop {
	display: block !important;
 }

.site-navigation-toggle{
	border: 1px solid #92D7BD !important;
}


.site-navigation-toggle-holder {
    align-items: center;
    display: flex;
    padding: 8px 0px;
    }

@media screen and (max-width: 768px){
 .u_mobile {
	display: block !important;
 }
  .u_desktop {
	display: none !important;
 }

 .strich{
 	display: none;
 } 
 .page-header .entry-title, 
 .site-footer .footer-inner, 
 .site-footer:not(.dynamic-footer), 
 .site-header .header-inner, 
 .site-header:not(.dynamic-header), 
 body:not([class*=elementor-page-]) .site-main {
    /*margin-inline-start: 5vw !important;*/
	}
 .elementor-divider{
  padding-block-start: 20px !important;
  padding-block-end: 0px !important;
    }
  #leistungen .e-con-inner{
  min-height: 8vw !important;
  }

 .bas-scrolltop,
 .bas-flyout{
   display: none !important;
 }
 
 .p28 p{
	 font-size: 20px !important;
	}
 #trauerfall .p90 {
    font-size: 40px !important;
	}
	.elementor-button span {
    font-size: 16px;
	}
 #content h4 {
    font-size: 21px !important;
	}
 #kontakt h4{
 	font-size: 42px !important;
 }
 #content h1 {
    line-height: 1.2 !important;
	}
 .elementor-kit-1302 h2 {
    font-size: 24px !important;
	}
}

@media screen and (max-width: 1024px){

	 #leistungen h3,
	#bestattungsarten h3  {
	  font-family: 'Inria Serif', serif;
	  font-weight: 400;
	  font-size: 20px !important;      /* 35pt */
	  line-height: 1.2 !important;    /* 40pt */
	  letter-spacing: -0.01em; /* Tracking -10 */
	  color: #fff;
	}

}







/* --- flyout  -------------------------------------------------------- */
.bas-flyout {
	position: fixed;
	top: 70%;
	right: 0;
	transform: translateY(-50%);
	z-index: 999;
	display: flex;
	align-items: stretch;
	width: 60px;
	height: 220px;
	background: #8b5644;
	border-radius: 100px 0 0 100px;
	overflow: hidden;
	transition: width 0.4s ease, height 0.4s ease;
	box-shadow: -2px 2px 12px rgba(0,0,0,0.25);
    height: 200px;
    width: 100px;
	padding-left: 40px;
}
.bas-flyout:hover {
  width: 420px;
}
.bas-flyout:hover .pfeil{
	transform: rotate(180deg);
    display: inline-block;
}


.bas-flyout-label {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: 'Inria Serif';
}

.bas-flyout-content a span{
	color: #93c8a8;
}
.bas-flyout-label span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #93c8a8;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.bas-flyout-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 20px 24px 20px 4px;
  opacity: 1;
  white-space: nowrap;
  transition: opacity 0.25s ease 0.1s;
}
.bas-flyout:hover .bas-flyout-content {
  opacity: 1;
}
.bas-flyout-content a {
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
}
.bas-flyout-content a:hover {
  /*text-decoration: underline;*/
  color: #93c8a8;
}
.bas-flyout-socials {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.bas-flyout-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #8b5644;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.bas-flyout svg{
	fill: white;
}

.bas-flyout-socials a img {
	transition: filter 0.25s ease;
}

.bas-flyout-socials a:hover img,
.bas-flyout-socials a:focus-visible img {
	filter: brightness(0) saturate(100%) invert(58.93%) sepia(1.52%) saturate(6014.84%) hue-rotate(90.8deg) brightness(136.62%) contrast(75.13%);
}


/* ---------- Footer: Inline-SVGs → fill ----------
   Die ID #footer_4 sticht die elementorgenerierten Farbregeln des Widgets aus. */
#footer_4 .elementor-icon svg,
#footer_4 .elementor-icon svg path,
#footer_some .elementor-icon svg,
#footer_some .elementor-icon svg path {
	transition: fill 0.25s ease;
}

#footer_4 .elementor-icon:hover svg,
#footer_4 .elementor-icon:hover svg path,
#footer_4 .elementor-icon:focus-visible svg,
#footer_4 .elementor-icon:focus-visible svg path,
#footer_some .elementor-icon:hover svg,
#footer_some .elementor-icon:hover svg path,
#footer_some .elementor-icon:focus-visible svg,
#footer_some .elementor-icon:focus-visible svg path  {
	fill: #93c8a8;
}
.tagundnacht {
	transition: transform 0.3s ease;
}

.tagundnacht:hover{
	transform: scale(1.1);
}


#Ebene_2 {
    margin-top: -2px;
}

 .elementor-widget-image { min-width: auto !important; flex-shrink: 0 !important; } 
 

@media (min-width: 1200px) {
    .page-header .entry-title, 
    .site-footer .footer-inner, 
    .site-footer:not(.dynamic-footer), 
    .site-header .header-inner, 
    .site-header:not(.dynamic-header), 
    body:not([class*=elementor-page-]) .site-main {
        max-width: 1400px !important;
    }
} 
 
 @media (max-width: 1400px) {
    .page-header .entry-title, 
    .site-footer .footer-inner, 
    .site-footer:not(.dynamic-footer), 
    .site-header .header-inner, 
    .site-header:not(.dynamic-header), 
    body:not([class*=elementor-page-]) .site-main {
        padding: 0 40px !important;
    }
	.p90 {
    	font-size: 57px !important;
	}

	 .p28 p{
	 font-size: 20px !important;
	}

	.elementor-button span {
    font-size: 22px;
	}
	 #content h1 {
    font-size: 40px !important;
    line-height: 1.42;
	}

 #content h4 {
    font-size: 30px !important;
	}
 #kontakt h4{
 	font-size: 42px !important;
 }

} 
 
 @media (max-width: 1200px) {
    .page-header .entry-title, 
    .site-footer .footer-inner, 
    .site-footer:not(.dynamic-footer), 
    .site-header .header-inner, 
    .site-header:not(.dynamic-header), 
    body:not([class*=elementor-page-]) .site-main {
    max-width: 1200px !important;
    }


	.site-navigation ul.menu li.telefon a{
		font-size: 16px !important;
	}

	.site-navigation ul.menu li a{
		padding: 10px !important;
	}
} 
 @media (max-width: 980px) {
	#leistungen h3,
	#bestattungsarten h3  {
	  font-family: 'Inria Serif', serif;
	  font-weight: 400;
	  font-size: 20px !important;      /* 35pt */
	  line-height: 1.2 !important;    /* 40pt */
	  letter-spacing: -0.01em; /* Tracking -10 */
	  color: #fff;
	}
	.whattodo h3.elementor-heading-title {
	  font-family: 'Inria Serif', serif;
	  font-size: 20px !important;
	  line-height: 1.25;
	  margin-top: 4px;
	}

}


/* Reine Touch-Geräte (kein Maus-Pointer vorhanden) */
@media (hover: none) and (pointer: coarse) {
  .bas-flyout{
  	display: none;
  }
}