/*

TemplateMo 549 Business Oriented

https://templatemo.com/tm-549-business-oriented

*/


body {background: #f6fffa;
    font-family: 'Candara', Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden;
	color: #494949;
}

a { 
    transition: all 0.3s ease; 
    text-decoration: none;
}

a:hover { text-decoration: none; }
button:focus { outline: none; }

p {
    color: #494949;
    line-height: 1.9;
}

h2,h3 {
	text-align: center;
}

.tm-title-gray { color: #494949; }

.tm-hr {
    width: 240px;
    border-top: 3px solid #0e4a50;
    margin: 0;
}

.tm-hr-s { width: 140px; }
.tm-box-bordered { border: 1px solid #9C9D9E; }
.container-fluid { max-width: 1480px; }

.tm-logo {
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffdef6;
    color: #9C9D9E;
    width: 350px;
    height: 200px;
    padding: 50px 40px;
	opacity: 0;
}

@media (max-width: 500px) {
    .tm-logo {
        left: 50%;
        margin-left: -200px;
    }
}

.tm-logo-text { font-size: 2rem; }
#parallax-1 { min-height: 690px; }
#parallax-2 { min-height: 590px; }
#parallax-3 { min-height: 400px; }

#parallax-1-other { min-height: 300px; }
#parallax-2-other { min-height: 250px; }
#parallax-3-other { min-height: 100px; }


.parallax-window {    
    background: transparent;
    position: relative;
}

#tm-main-nav {  
	 background: #bad4c3 !important;
    padding: 0;
    z-index: 1000;
	width: 100%;
    float: right;
}

/*.tm-nav-container-outer {
    margin-top: 8px;
    border-top: 1px solid #CCCDCE;
    border-bottom: 1px solid #CCCDCE;
}
*/
.navbar-expand-lg .navbar-nav .nav-link {
    color: #6A6B6C;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    text-align: center;
    padding: 20px 10px;
    margin-right: 10px;
    text-transform: uppercase;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.nav-item.active .nav-link,
.nav-item:hover .nav-link {
   /* color: #0099FF;*/
    
  border-bottom: 8px solid #0e4a50;
	background: #8DB096;
	color: white;
}

.tm-intro {padding-left:20px;padding-right: 20px; }
h4 { font-size: 1.5rem; }
.tm-text-primary { color: #0e4a50; }
.tm-text-primary-link { color: #0e4a50; }
.tm-text-primary-link:hover { color: rgb(15, 133, 211); }

.tm-strategy-box { 
    display: flex; 
    align-items: flex-start;
}

.tm-services-box {
    display: flex;
    align-items: flex-start;
}

.tm-strategy-img { margin-right: 30px; }
.tm-services-img { margin-right: 40px; }
.tm-strategy-text { max-width: 480px; }
.mb-6 { margin-bottom: 20px; }
.mb-7 { margin-bottom: 40px;margin-top: 40px; }
.mb-8 { margin-bottom: 80px; }
.mb-60 { margin-bottom: 60px; }
.mb-10 { margin-bottom: 100px; }
.mb-25 { margin-bottom: 250px; }
.mt-6 { margin-top: 90px; }
.mt-7 { margin-top: 40px; }
.tm-px-3 {
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width: 992px) {
    .pr-lg-5 { padding-right: 70px!important; }
}

.tm-text-gray { color: #666; }
.tm-bg-gray { background-color: #F2F2F2; }
.tm-bg-gray-dark { background-color: #EDEEEF; }
.tm-bg-white { background-color: rgba(255,255,255,0.75); }
.tm-bg-black-transparent { background-color: rgba(0,0,0,0.5 ); }
.tm-box { padding: 20px; }
.tm-box-2 { padding: 20px; max-width: 500px; }
.tm-box-3 { padding: 20px 25px;}
i { color: #1B3F91; }

.tm-overlay {
    max-width: 660px;
    padding: 25px 20px;
}

.parallax-window-2 {
    display: flex;
    align-items: center;
}

.btn {
    padding: 15px 50px;
    border-radius: 0;
    font-size: 1.2rem;
}

.btn-primary {
    background-color: #0042ff;
    border-color: #1d57fd;
}

.btn-primary:hover {
    background-color: #5f88fe;
    border-color: #5f88fe;
}

footer {
	background: #8DB096;
    padding-top: 70px;
    padding-bottom: 70px;
}

.tm-link-primary { color: #0e4a4f; }
.tm-link-primary:hover { color: #2f80d0; }
.fa-15x { font-size: 1.5em; }

.tm-social-icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.tm-social-icon-2 {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    color: #fff;
}

.tm-social-link i { transition: all 0.3s ease; }
.tm-social-link:hover i { color: #0e4a4f; }

/* Hover effect */
.tm-about-person-layout {
    margin-bottom: 0;  
    width: 100%;
    height: auto;  
    max-width: 460px;    
}

.tm-about-person {
	position: relative;
    overflow: hidden;
    max-height: 420px;     
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.tm-about-person img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.tm-about-person figcaption {
	padding: 15px;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.tm-about-person figcaption::before,
.tm-about-person figcaption::after {
	pointer-events: none;
}

.tm-about-person figcaption,
.tm-about-person figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.tm-about-person figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.tm-about-person h2 { font-weight: 300; }
.tm-about-person h2 span { font-weight: 600; }

.tm-about-person h2,
.tm-about-person p {
	margin: 0;
}

.tm-about-person p {
	letter-spacing: 1px;
    font-size: 68.5%;
    color: #fff;
}

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo { background: #2e5d5a; }

figure.effect-milo img {
	max-width: none;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-30px,0,0) scale(1.12);
	transform: translate3d(-30px,0,0) scale(1.12);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-milo:hover img {
	opacity: 0.5;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h2 {
    font-size: 1.2rem;
	position: absolute;
    left: 0;
    right: 0;
	bottom: 0;
    padding: 20px;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(45, 92, 89, 0.5));
}

figure.effect-milo p {
	padding: 0 10px 0 0;
	border-right: 1px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Contact */
.mapouter{
    position:relative;
    text-align:right;
    height:520px;
    width:100%;
}

.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:520px;
    width:100%;
}

.tm-contact-form-box { max-width: 485px; }
.tm-address-box { max-width: 860px; }
.form-group { margin-bottom: 40px; }

.form-control {
  font-size: 1em;
  border-radius: 0;
  padding: 14px 20px;
  height: auto;
}



.anfrage {
	
	padding: 10px;
}

.anfrage-innen {width: 50%; margin-left: auto; margin-right: auto;}

select.form-control { height: 60px; }

select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 15px center;
  background-repeat: no-repeat;
  background-image: url('../img/select-arrow.png');
  padding: 14px 20px;
  padding-right: 20px;
  color: #666;
}

#contactSelect { border-radius: 0 }
.tm-address-text { max-width: 650px; }

@media (max-width: 1199px) {
    .tm-box-3 { margin-bottom: 2rem; }
}

@media (min-width: 992px) and (max-width: 1100px) {
    .tm-services-img { width: 220px; }
}

@media (max-width: 992px) {
	
	.anfrage-innen {width: 70%; margin-left: auto; margin-right: auto;}
    .navbar-toggler {
        position: fixed;        
        right: 15px;
        top: 10px;        
        background-color: white;
        padding: 10px 16px;
        font-size: 1.5rem;
        border-radius: 0;
    }

    .navbar-toggler i { color: #0e4a4f; }
 
    .navbar-collapse {
        position: fixed;
        right: 15px;
        top: 56px;
        background-color: white;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        margin-right: 0;
        margin-top: 3px;
        margin-bottom: 3px;
        padding: 8px 25px; 
    }

    .tm-box { margin-bottom: 30px; }
    .tm-box-s { max-width: 480px; }
}

@media (max-width: 565px) {
		.anfrage-innen {width: 100%; margin-left: auto; margin-right: auto;}
    .tm-services-box {
        flex-direction: column;
    }

    .tm-services-img {
        margin-right: 0;
        margin-bottom: 30px;
    }
}

@media (max-width: 430px) {
    .tm-strategy-box { flex-direction: column; }

    .tm-strategy-img {
        margin-right: 0;
        margin-bottom: 30px;
    }
}

.mh_responsive-video {position: relative;padding-bottom: 56.25%;padding-top: 0px;height: 0;overflow: hidden;}
.mh_responsive-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


.first-box{padding-bottom:40px;}


/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  /*background-color: #717171;*/
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}


.socialmedia-top{float:left;padding-top: 40px;width: 30%;}





.header-test{
	
	
	    padding-left: 15rem;
    padding-right: 15rem;
	    max-width: 80rem;
	    margin-left: auto;
    margin-right: auto;
	z-index: 10;
	position: relative;
	padding-top: 15rem;
}

.header-test h1{
	
	
	
	font-size: 3em;
	
}

.header-test-keinindex h1{
	
	
	
	font-size: 1em;
	
}

.header-text{
	
	 padding-left: 0.5rem;
    padding-right: 0.5rem;
	text-align: center;
    padding-bottom: 2rem;
    padding-top: 10rem;
	width: 100%;
	    margin-left: auto;
    margin-right: auto;
		





}

.Markierung-Weiss{
	
	background: white;
			opacity: 1;

}




.header-untertitel{
	font-size: 1.5em;
	
	
}


/*Buttons*/

.button {
  background-color: #0042ff;
  border: none;
  color: white;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
	border-radius: 10px;
}

.button1 {
  background-color: #0042ff; 
  color: white; 
  border: 2px solid #1d57fd;
}

.button1:hover {
  background-color: #5f88fe;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}



.fotobox-premium
{
	background:#E6E4E2;
	border-style: solid;
	border-radius: 18px;
}

.fotobox-standard
{
	background:#f7f7f7;
	border-style: solid;
	border-radius: 18px;
}

.fotobox-basis
{
	background:#f7f7f7;
	border-style: solid;
	border-radius: 18px;
}

.karte{
	/*background-image: url("../img/FotoboxKarte.png");*/
}






.first-box {
    padding-bottom: 10px;
}





/*Media */
@media only screen and (max-width: 600px) {
.header-test{
	
	
	    padding-left: 1rem;
    padding-right: 1rem;
	   
	    margin-left: auto;
    margin-right: auto;
	z-index: 10;
	position: relative;
	padding-top: 3rem;
	
}

	
	.header-text{
	
	 padding-left: 0.5rem;
    padding-right: 0.5rem;
	text-align: center;
    padding-bottom: 2rem;
    padding-top: 10rem;
	width: 100%;
	    margin-left: auto;
    margin-right: auto;
		





}
	
	
	
	
	
}



.gruenehaken {
list-style-image: url("grüner-haken.jpg");
}
.rotesx {
    list-style-image: url("rotes-x.jpg");
}


#parallax-1 { position: relative; overflow: hidden; }
#parallax-1 .lcp-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;       /* hinter dem Inhalt */
  pointer-events: none;
}




/* ===== THEME ===== */
:root{
  --brand:#8DB096;            /* dein Grün */
  --brand-600:#6f9c7f;
  --brand-700:#5a8469;
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --surface:#f8fafc;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --radius:16px;
}
html{scroll-behavior:smooth}
body{color:var(--ink); background:var(--bg); font-synthesis-weight:none}

/* ===== NAV / STICKY ===== */
.tm-nav-container-outer{
  position:sticky; top:0; z-index: 40;
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(255,255,255,.75);
  border-bottom:1px solid rgba(0,0,0,.04);
}

/* ===== HERO ===== */
#parallax-1{ position:relative; min-height: 54vh; display:flex; align-items:center; }
#parallax-1 .lcp-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-overlay{ position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25) 15%, rgba(0,0,0,.35));
}
.header-text{ max-width: 960px; margin: 0 auto; padding: clamp(24px,4vw,48px); }
.header-text h1{ color:#fff; font-weight:800; line-height:1.1; font-size: clamp(28px,5vw,48px); }
.header-untertitel{ color:#e5e7eb; font-size: clamp(14px,2.5vw,18px); display:block; margin:.5rem 0 1rem; }

/* ===== BUTTONS ===== */
.button{ display:inline-flex; align-items:center; gap:.5rem; border:none; cursor:pointer; text-decoration:none; }
.button1{
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color:#fff; padding:.9rem 1.25rem; border-radius:999px; font-weight:700; letter-spacing:.2px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, background .3s ease;
}
.button1:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(24,119,74,.18); background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); }
.button1:focus-visible{ outline:3px solid rgba(141,176,150,.4); outline-offset:3px }

/* kleine, dezente Secondary-CTAs */
.btn-link{
  display:inline-flex; gap:.4rem; align-items:center; font-weight:600; color:var(--ink); text-decoration:none;
}
.btn-link:hover{ color:var(--brand-700) }

/* ===== CARDS / BOXES ===== */
.tm-box{ border-radius: var(--radius); background:#fff; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.04); }
.tm-box-s{ border-radius: calc(var(--radius) - 8px); }
.tm-bg-gray{ background:#fff !important }

/* Pakete-Optik */
.fotobox-standard .preis, .fotobox-premium .preis{ font-weight:800; color:var(--brand-700); margin-top:.25rem }
.fotobox-standard ul, .fotobox-premium ul{ margin: .5rem 0 0 1rem }
.fotobox-standard li, .fotobox-premium li{ margin:.25rem 0 }

/* Ribbon/Badge */
.card-badge{
  position:absolute; top:12px; left:12px; background:var(--brand-700); color:#fff;
  padding:.35rem .6rem; border-radius:12px; font-size:.8rem; font-weight:700; box-shadow: var(--shadow);
}

/* Hover-Effekt auf Cards */
.fotobox-standard:hover, .fotobox-premium:hover{
  transform: translateY(-4px); transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 14px 40px rgba(17,24,39,.12);
}

/* ===== TRUST BAR ===== */
.trust-bar{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1rem; }
.trust-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border-radius:999px;
  background: rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.25);
}
.trust-badge i{ color:#ffd166 }

/* ===== GALLERY ===== */
.img-fluid{ border-radius:12px }
.img-fluid:hover{ transform: translateY(-2px) scale(1.01); transition: transform .2s ease; box-shadow: var(--shadow) }

/* ===== CTA-BAR ===== */
.cta-bar{ background: linear-gradient(90deg, var(--brand-600), var(--brand)); color:#fff }
.cta-bar .button1{ background:#fff; color:var(--brand-700); }
.cta-bar .button1:hover{ background:#f9fafb; color:#1f2937 }

/* ===== MISC ===== */
hr.tm-hr{ border-color: rgba(0,0,0,.08) }
.first-box{ background: var(--surface); border-radius: var(--radius); padding: clamp(16px,3vw,28px); }
h2.tm-title-gray{ color:#111827; font-weight:800 }

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important }
}



/* Bildausschnitt etwas nach oben, damit das Gerät tiefer liegt */
#parallax-1 .lcp-bg { object-position: 50% 28%; }

/* mehr vertikaler Raum oben, weniger unten – Text sitzt oberhalb des Geräts */
#parallax-1 { min-height: 60vh; display:flex; align-items:center; }
#parallax-1 .header-text { padding-top: clamp(56px, 12vh, 120px); padding-bottom: clamp(20px, 6vh, 60px); }

/* dunkleres Overlay für besseren Kontrast */


/* hero-card: „Frosted glass“ Box unter der Headline */
.hero-card{
  display:inline-flex; flex-direction:column; align-items:center;
  gap:.65rem; margin-inline:auto;
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.22);
  border-radius: 18px; padding: clamp(14px, 2.2vw, 22px) clamp(18px, 3vw, 28px);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.header-text h1{
  color:#fff; font-weight:800; line-height:1.12;
  font-size: clamp(28px, 4.2vw, 46px);
  margin:0; text-wrap: balance; text-shadow: 0 3px 18px rgba(0,0,0,.35);
}
.header-untertitel{ color:#e5e7eb; opacity:.95; }

/* CTAs etwas Abstand & passende Farbe für den Link-CTA */
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:.25rem; }
.header-text .btn-link{ color:#e5e7eb; }
.header-text .btn-link:hover{ color:#ffffff; }

/* Trust-Bar unter der Karte mit mehr Luft */
.trust-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1rem; margin-top:1rem; }
.trust-badge{
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:#fff; padding:.55rem .85rem; border-radius:999px; font-weight:600;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.trust-badge i{ color:#ffd166 }

/* Hover-Effekt dezent lassen (nicht „springen“) */
.fotobox-standard:hover, .fotobox-premium:hover{
  transform: translateY(-2px);
}

/* Mobile Tweaks */
@media (max-width: 992px){
  #parallax-1 .header-text { padding-top: clamp(48px, 10vh, 96px); }
  .header-text h1{ font-size: clamp(26px, 5.5vw, 38px); }
}
@media (max-width: 576px){
  .trust-bar{ display:grid; grid-template-columns: 1fr; gap:.5rem; }
  .trust-badge{ justify-content:center; }
  .hero-card{ padding: 12px 16px; }
}


/* Premium-Preis auffällig (nur in der Premium-Card) */
.fotobox-premium .preis{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  margin: .35rem auto .75rem;
  padding: .65rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 0 0 4px rgba(141,176,150,.20);
}

.fotobox-premium .preis-wert{
  font-weight: 900;
  line-height: 1;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: .2px;
}

.fotobox-premium .preis-sub{
  font-weight: 700;
  font-size: .92rem;
  opacity: .95;
}

/* Standard-Preis dezent, damit Premium stärker wirkt */
.fotobox-standard .preis{
  display:inline-block;
  margin:.25rem auto .75rem;
  padding:.4rem .75rem;
  border-radius: 10px;
  background:#f3f4f6;
  color:#1f2937;
  font-weight:800;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* leichte Hover-Verbesserung für beide Cards */
.fotobox-standard:hover .preis,
.fotobox-premium:hover .preis{
  transform: translateY(-1px);
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 14px 40px rgba(17,24,39,.12), 0 0 0 4px rgba(141,176,150,.24);
}

.sticky-cta{
  position:fixed; left:env(safe-area-inset-left,0); right:env(safe-area-inset-right,0);
  bottom:calc(env(safe-area-inset-bottom,0) + 12px); margin:0 auto; width:fit-content;
  background:linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff; font-weight:800;
  padding:.85rem 1.25rem; border-radius:999px; box-shadow:0 14px 40px rgba(17,24,39,.25);
  display:none; gap:.6rem; align-items:center; z-index:60; text-decoration:none;
}
@media (max-width: 768px){ .sticky-cta{ display:flex; } }

.cmp-table{ display:grid; gap:8px; }
.cmp-row{ display:grid; grid-template-columns: 1.2fr .9fr .9fr; gap:8px; align-items:center; }
.cmp-head{ font-weight:800; }
.cmp-row span{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:.7rem .9rem; box-shadow:var(--shadow); }
.cmp-row:nth-child(even) span{ background:#f8fafc; }
@media(max-width:640px){ .cmp-row{ grid-template-columns: 1fr; } .cmp-head{ display:none; } }

details{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding: .9rem 1rem; margin:.6rem 0; box-shadow:var(--shadow); }
details[open]{ border-color: rgba(0,0,0,.12); }
summary{ cursor:pointer; font-weight:700; list-style:none; }
summary::-webkit-details-marker{ display:none; }
summary:after{ content:"▾"; float:right; transition:transform .2s ease; }
details[open] summary:after{ transform:rotate(180deg); }

.feature-list{ 
  display:grid; gap:.6rem; margin:1rem 0 0; padding:0; list-style:none;
  grid-template-columns: 1fr 1fr; 
}
.feature-list li{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:.7rem .9rem; box-shadow:var(--shadow); font-weight:600; display:flex; align-items:center; gap:.6rem;
}
.feature-list i{ color:var(--brand-700); }
@media (max-width: 640px){ .feature-list{ grid-template-columns:1fr; } }

/* Designs-Grid */
.designs-section .design-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(10px, 2vw, 18px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.design-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.05);
}

.design-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 3 / 2;         /* ruhiges Grid, auch wenn Bilder unterschiedlich sind */
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease;
}

.design-card:hover img{
  transform: scale(1.03);
  filter: saturate(1.05);
}

.design-card figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:.55rem .75rem;
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
}

/* Überschrift/Intro sauberer Abstand */
.designs-section .text-center{ margin-bottom: .8rem; }
/* Kontaktbereich */
.contact-section .tm-intro { background: var(--surface); border-radius: var(--radius); padding: clamp(16px,3vw,28px); }
.locations { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0 14px; }
.addr {
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: 14px; padding: .9rem 1rem;
  box-shadow: var(--shadow);
  font-style: normal; line-height:1.35;
}
.map-link { display:inline-flex; gap:.4rem; align-items:center; margin-top:.35rem; font-weight:700; text-decoration:none; color:var(--brand-700); }
.map-link:hover { text-decoration:underline; }

.contact-actions { list-style:none; display:flex; gap:.6rem 1rem; flex-wrap:wrap; padding:0; margin: 10px 0 0; }
.contact-actions .button1 i { margin-right:.35rem; }
.contact-actions .btn-link { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; }

.contact-card {
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: 16px; padding: .9rem 1rem; box-shadow: var(--shadow);
  max-width: 420px;
}
.contact-card img { border-radius: 50%; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.contact-card figcaption { display:flex; flex-direction:column; }
.contact-card figcaption strong { font-size:1.05rem; }
.contact-card figcaption span { color: var(--muted); font-weight:700; }

.kontakt-cta { display:flex; flex-direction:column; gap:.6rem; margin-top: 14px; }
.kontakt-cta .header-untertitel { color: var(--muted); }

@media (max-width: 992px){
  .locations { grid-template-columns: 1fr; }
}

/* Standorte/Einsatzgebiet */
.locations-grid{
  display:grid; gap:14px; grid-template-columns: 1fr 1fr; margin-top:.6rem;
}
.location-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding: .9rem 1rem; box-shadow: var(--shadow);
}
.loc-title{ font-weight:800; margin:0 0 .25rem 0; }
.loc-address{ font-style:normal; line-height:1.35; margin:0 0 .4rem 0; }
.map-link{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--brand-700); text-decoration:none; }
.map-link:hover{ text-decoration:underline; }

/* Regionen als Chips */
.region-chips{
  display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:.6rem 0 0; list-style:none;
}
.region-chips li{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.45rem .75rem; font-weight:700;
  box-shadow: var(--shadow);
}
.region-note{ margin-top:.6rem; color:var(--muted); font-weight:700; }

/* Medien-Kacheln mit Caption */
.media-card{
  position:relative; overflow:hidden; border-radius:16px;
  background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow: var(--shadow);
}
.media-card img{ display:block; width:100%; height:auto; }
.media-card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.55rem .75rem; color:#fff; font-weight:800;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
}
.media-card:hover img{ transform:scale(1.02); transition: transform .25s ease; }

@media (max-width: 992px){
  .locations-grid{ grid-template-columns: 1fr; }
}
/* Pakete – Cards */
.packages-section .plan{
  position:relative;
  border-radius: var(--radius);
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.2vw, 20px);
  display:flex; flex-direction:column; gap: .6rem;
}
.packages-section .plan-head{
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.packages-section .plan-head img{
  max-width:100%; height:auto; border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.packages-section h3{ margin:.4rem 0 0 0; font-weight: 800; }

/* Preise */
.packages-section .preis{
  margin: .25rem 0 0 0; font-weight: 800;
  background:#f3f4f6; color:#1f2937; border-radius:10px; display:inline-block; padding:.45rem .75rem;
}
.packages-section .preis .preis-sub{ font-weight:700; color:#4b5563; margin-left:.4rem; }
.packages-section .preis--accent{
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color:#fff; box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 0 0 4px rgba(141,176,150,.20);
}
.packages-section .preis--accent .preis-sub{ color:#fff; opacity:.95; }
.packages-section .preis-wert{ font-weight:900; letter-spacing:.2px }

/* Feature-Liste */
.packages-section .feature-list{
  list-style:none; padding:0; margin:.4rem 0 0;
  display:grid; grid-template-columns: 1fr 1fr; gap:.45rem .8rem;
}
@media (max-width: 640px){ .packages-section .feature-list{ grid-template-columns: 1fr; } }
.packages-section .feature-list li{
  display:flex; align-items:flex-start; gap:.5rem;
  padding:.4rem .5rem;
  border:1px solid rgba(0,0,0,.05);
  border-radius: 10px; background:#fff;
}
.packages-section .feature-list i{ color: var(--brand-700); min-width:18px; margin-top:.15rem }

/* CTA unten */
.packages-section .plan-cta{
  margin-top:auto; text-align:center; display:flex; flex-direction:column; gap:.5rem;
}
.packages-section .plan-note{ color: var(--muted); font-weight:700 }

/* Premium-Badge Position */
.packages-section .plan .card-badge{ top: 10px; left: 10px; }

/* Hover der Karten */
.packages-section .plan:hover{
  transform: translateY(-3px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 14px 40px rgba(17,24,39,.12);
}


/* About/Service-Fotobox */
.about-section .first-box{ padding: clamp(16px,3vw,28px); }

.lead{ font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; margin: .6rem 0 1rem; }

/* KPIs */
.about-kpis{
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:flex-start; margin:.25rem 0 1rem;
}
.about-kpis .kpi{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding:.85rem 1.1rem; box-shadow: var(--shadow); min-width:160px; text-align:center;
}
.about-kpis .kpi strong{ font-size:1.6rem; display:block; }
.about-kpis .kpi span{ color:var(--muted); font-weight:700 }

/* Features */
.about-features{
  display:grid; grid-template-columns: 1fr 1fr; gap:.6rem .9rem;
  list-style:none; padding:0; margin: 0 0 1rem 0;
}
.about-features li{
  display:flex; gap:.55rem; align-items:flex-start;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:.7rem .9rem; box-shadow: var(--shadow); font-weight:600;
}
.about-features i{ color: var(--brand-700); margin-top:.15rem; min-width:18px;




/* === Paketvergleich: zentriert + equal columns + Zebra === */

/* Sektion und Wrapper mittig */
#pakete-vergleich.cmp2{
  display:flex; flex-direction:column; align-items:center;
}
#pakete-vergleich .cmp2-wrap{
  width: min(100%, 980px);
  margin-inline: auto;
}

/* Tabelle: gleiche Spaltenbreiten erzwingen */
#pakete-vergleich .cmp2-table{
  table-layout: fixed !important;
  margin: 0 auto;               /* zentriert die Tabelle im Wrapper */
  border-collapse: separate;
  border-spacing: 0;
}
#pakete-vergleich .cmp2-table col.col-eq{ width:33.3333% !important; }

/* Alte Breiten neutralisieren (aus früheren Snippets) */
#pakete-vergleich .cmp2-table thead th,
#pakete-vergleich .cmp2-table tbody th,
#pakete-vergleich .cmp2-table td{ width:auto !important; }

/* Text-Ausrichtung: Feature links, Werte zentriert */
#pakete-vergleich .cmp2-table tbody th{ text-align:left; }
#pakete-vergleich .cmp2-table td{ text-align:center; }

/* Zebra-Farben – ändere die Variablen nach Geschmack */
#pakete-vergleich.cmp2{
  --row-odd:   #f9fbfc;   /* helles Grau-Blau */
  --row-even:  #f6fbf7;   /* ganz helles Grün */
  --row-odd-feature:  #fdfefe;
  --row-even-feature: #fbfffb;
}

/* Zellen einfärben */
#pakete-vergleich .cmp2-table tbody tr:nth-child(odd)  td{ background: var(--row-odd)  !important; }
#pakete-vergleich .cmp2-table tbody tr:nth-child(even) td{ background: var(--row-even) !important; }

/* Sticky-Feature-Spalte passend einfärben */
#pakete-vergleich .cmp2-table tbody tr:nth-child(odd)  th[scope="row"]{ background: var(--row-odd-feature)  !important; }
#pakete-vergleich .cmp2-table tbody tr:nth-child(even) th[scope="row"]{ background: var(--row-even-feature) !important; }

/* Kopf & Premium-Header (Sicherheitshalber) */
#pakete-vergleich .cmp2-table thead th{
  background:#f8fafc; border-bottom:1px solid rgba(0,0,0,.06);
  text-align:center; font-weight:800; padding:.9rem .8rem;
}
#pakete-vergleich .cmp2-table thead th.is-best{
  background: linear-gradient(90deg, var(--brand-600), var(--brand)); color:#fff;
}

/* Preiszeile neutral halten (überschreibt Zebra) */
#pakete-vergleich .cmp2-table .row-price td,
#pakete-vergleich .cmp2-table .row-price th{ background:#fff !important; }

/* Icon-Farben */
#pakete-vergleich .cmp2-table .ok i{ color: var(--brand-700); }
#pakete-vergleich .cmp2-table .no i{ color:#9ca3af; }

/* Kleinbildschirm: etwas kompaktere Zellen */
@media (max-width: 640px){
  #pakete-vergleich .cmp2-table td, 
  #pakete-vergleich .cmp2-table th{ padding:.65rem .6rem; }
}


	/* ===== CTA – hübsch & konsistent ===== */
:root{
  /* falls noch nicht gesetzt */
  --brand: #8DB096;
  --brand-600:#6ea382; --brand-700:#4e8a69;
  --surface:#f7fbf8; --muted:#6b7280;
  --radius:16px; --shadow:0 10px 26px rgba(0,0,0,.08);
}

.cta-bar{
  padding: clamp(28px,5vw,56px) 0;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(141,176,150,.18), transparent 60%),
    linear-gradient(180deg, #f9fcfb 0%, #eaf3ee 100%);
  border-top:1px solid rgba(0,0,0,.06);
}

.cta-card{
  max-width: 980px; margin: 0 auto;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(16px,3vw,28px);
  text-align:center;
}

.cta-title{ margin:0 0 .25rem; font-weight:900; }
.cta-sub{ margin:.1rem 0 .9rem; font-weight:700; color:var(--muted); }

/* Trust-Badges */
.cta-badges{
  list-style:none; padding:0; margin:0 0 1rem;
  display:flex; flex-wrap:wrap; gap:.6rem .8rem; justify-content:center;
}
.cta-badges li{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.45rem .75rem; font-weight:700;
  box-shadow: var(--shadow);
}
.cta-badges i{ color:var(--brand-700); }

/* Buttons – einheitlich im Brand */
.cta-actions{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin-bottom:.5rem;
}

/* Haupt-CTA */
.cta-primary{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:900; font-size:1.05rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  border:none; color:#fff !important; box-shadow:0 14px 30px rgba(17,24,39,.15);
}
.cta-primary:hover{ filter:brightness(.98); transform:translateY(-1px); }
.cta-primary:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(141,176,150,.25); }

/* Sekundär-CTAs (Anruf/WhatsApp) – einheitlich, nicht knallblau */
.cta-secondary{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.8rem 1rem; border-radius:999px; font-weight:800;
  background:#fff; color: #1f2937; border:2px solid rgba(78,138,105,.25);
}
.cta-secondary:hover{ border-color: var(--brand-700); }
.cta-secondary i{ color: var(--brand-700); }

/* Hinweis */
.cta-note{ margin:0; color:var(--muted); font-weight:700; }

/* Mobile */
@media (max-width: 900px){
  .cta-badges{ gap:.5rem; }
  .cta-primary{ width:100%; justify-content:center; }
  .cta-secondary{ flex:1 1 160px; justify-content:center; }
}

	
	/* ===== HERO – Mobile Lesbarkeit & Kontrast ===== */
#parallax-1{ position:relative; display:flex; align-items:center; min-height:68vh; }
#parallax-1::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(17,24,39,.60) 0%, rgba(17,24,39,.40) 55%, rgba(17,24,39,.28) 100%);
  pointer-events:none;
}

/* Card mit Text im Hero */
#parallax-1 .header-test{ width:100%; display:flex; justify-content:center; }
#parallax-1 .header-text{
  position:relative; z-index:1;
  max-width: 680px; width: min(92%, 680px);
  padding: clamp(14px, 4.5vw, 26px);
  border-radius: 22px;
  color:#fff;
  background: rgba(17,24,39,.65);           /* mobil: solide, gut lesbar */
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Typo + CTA */
#parallax-1 .header-text h1{
  margin:0 0 .35rem; line-height:1.2;
  font-size: clamp(26px, 7vw, 40px); font-weight: 900; color:#fff;
}
#parallax-1 .header-untertitel{
  display:block; margin:.25rem 0 .9rem;
  font-size: clamp(14px, 3.8vw, 18px); color:#e5e7eb; font-weight:700;
}
#parallax-1 .button.button1{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-size: clamp(15px, 4.5vw, 18px); font-weight:900;
  padding:.9rem 1.15rem; border-radius:999px; box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* Optionale „Chips/Badges“ unter dem CTA mobil ausblenden */
@media (max-width: 768px){
  #parallax-1 .header-test .chip,
  #parallax-1 .header-test .badge,
  #parallax-1 .header-test .pill,
  #parallax-1 .header-test .stats,
  #parallax-1 .header-test [class*="chip-"],
  #parallax-1 .header-test [class*="badge-"]{ display:none !important; }
}

/* Desktop: eleganter „Glass“-Look wieder aktivieren */
@media (min-width: 769px){
  #parallax-1::before{
    background: linear-gradient(180deg, rgba(17,24,39,.45) 0%, rgba(17,24,39,.25) 60%, rgba(17,24,39,.12) 100%);
  }
  #parallax-1 .header-text{
    background: rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 48px rgba(0,0,0,.22);
  }
}
	


  /* Mehr Abstand zum Rand + innen mehr Luft */

	/* === CTA – Mobile-Fixes === */
@media (max-width: 640px){

  /* Mehr Abstand zum Rand + innen mehr Luft */
  .cta-bar .cta-card{
    margin: 0 14px;                 /* Platz links/rechts */
    padding: 22px 16px 18px 16px;   /* Platz oben/unten + seitlich */
    text-align: center;             /* gern beibehalten */
  }
  .cta-bar .cta-title{
    margin-top: 6px;                /* Abstand zur Kartenoberkante */
    margin-bottom: 8px;
  }

  /* Bullets entfernen (weiße Punkte) – Icons bleiben */
  .cta-bar .cta-badges,
  .cta-bar .cta-bullets{
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .cta-bar .cta-badges li,
  .cta-bar .cta-bullets li{
    padding: .25rem 0;              /* schlanke Zeilen statt „Pills“ */
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .cta-bar .cta-badges li::marker,
  .cta-bar .cta-bullets li::marker{ content: none; }

  /* Buttons untereinander & vollbreit */
  .cta-bar .cta-actions{
    display: grid;
    grid-template-columns: 1fr;     /* eine Spalte */
    gap: .55rem;
    justify-items: stretch;
  }
  .cta-bar .cta-actions .cta-primary,
  .cta-bar .cta-actions .cta-secondary{
    width: 100%;
    justify-content: center;
  }
}


/* === CTA: Desktop mittig + saubere Ausrichtung === */

/* Card in der Mitte der Zeile platzieren */
/* === CTA: Desktop zentrieren + Bullets weg === */

/* Card zentrieren */
section.cta-bar > .container-fluid{
  display:flex !important;
  justify-content:center !important;
}
section.cta-bar .cta-card{
  width: min(100%, 980px) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Unterzeile auf sinnvolle Breite und mittig */
section.cta-bar .cta-sub{
  max-width: 720px !important;
  margin: .25rem auto 1rem !important;
}

/* Trust-Liste: keine Bullets, mittig ausrichten */
section.cta-bar .cta-badges{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 auto 1rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .6rem 1rem !important;
  justify-content: center !important;
}
section.cta-bar .cta-badges li{
  list-style: none !important;
}
section.cta-bar .cta-badges li::marker{ content: "" !important; }

/* Buttons mittig nebeneinander (Desktop) */
section.cta-bar .cta-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .6rem !important;
  justify-content: center !important;
}

/* Mobil: untereinander (falls noch nicht aktiv) */
@media (max-width: 640px){
  section.cta-bar .cta-card{ margin: 0 14px !important; padding: 22px 16px 18px !important; }
  section.cta-bar .cta-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    justify-items: stretch !important;
  }
  section.cta-bar .cta-actions .cta-primary,
  section.cta-bar .cta-actions .cta-secondary{
    width: 100% !important; justify-content: center !important;
  }
}
	


/* === 1) Hero sauber stapeln und eigene Höhe geben === */
#parallax-1{
  position: relative !important;
  z-index: 10 !important;                  /* liegt über Folge-Sections/Plugins */
  min-height: 68vh;                        /* genug „eigene“ Fläche */
  padding: 48px 0 28px !important;         /* unten Platz, damit nix hineinragt */
}
#parallax-1 .header-test{ display:flex; justify-content:center; }
#parallax-1 .header-text{
  position: relative; z-index: 11;         /* Text sicher über Overlay/Blur */
  margin: 0 auto;
}

/* (optional) falls dein Parallax Wrapper overflow abschneidet */
#parallax-1{ overflow: visible; }

/* === 2) Direkt folgende Sektionen & Elfsight nicht drüberzeichnen lassen === */
#parallax-1 + *{
  position: relative; z-index: 1;
  margin-top: 14px;                         /* kleine Luft nach dem Hero */
}
[class^="elfsight-app-"], [class*=" elfsight-app-"]{
  position: relative !important;
  z-index: 1 !important;                    /* sicher UNTER dem Hero */
  margin-top: 18px;                         /* verhindert visuelles „Hineinlaufen“ */
}

/* === 3) Mobile: Badges/Chips im Hero ausblenden und mehr Innenabstand === */
@media (max-width: 768px){
  #parallax-1{ padding: 56px 0 32px !important; }  /* etwas mehr Luft */
  /* alles außer H1, Untertitel und primärem CTA verstecken */
  #parallax-1 .header-text > :not(h1):not(.header-untertitel):not(a){
    display: none !important;
  }
}

/* === 4) Sicherheitshalber: Tabelle/Reviews etc. nicht mit fettem z-index kommen lassen === */
section, .container, .container-fluid{
  position: relative;
  z-index: 1;
}

	/* Hero-Overlay + sichere Z-Order */
#parallax-1{ position:relative; }
#parallax-1::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(17,24,39,.60) 0%, rgba(17,24,39,.40) 60%, rgba(17,24,39,.28) 100%);
  z-index:0; pointer-events:none;
}
#parallax-1 .header-text{
  position:relative; z-index:1;
  /* Fallback: solider Overlay-Hintergrund (sichtbar auch in Firefox) */
  background: rgba(17,24,39,.72);
  border-radius:22px;
}

/* Nur wenn Blur wirklich unterstützt wird → „Glas“-Look aktivieren (Desktop) */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  @media (min-width:769px){
    #parallax-1 .header-text{
      background: rgba(255,255,255,.08);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }
}

/* Zusätzliche Absicherung speziell für Firefox */
@-moz-document url-prefix(){
  #parallax-1 .header-text{ background: rgba(17,24,39,.72) !important; }
}

@media (max-width: 768px){
  /* Alles im Hero wieder anzeigen */
  #parallax-1 .header-text > *{ display:block !important; }

  /* Falls deine Trust-Elemente Chips/Badges sind, sicherheitshalber explizit */
  #parallax-1 .header-text .chip,
  #parallax-1 .header-text .badge,
  #parallax-1 .header-text [class*="chip"],
  #parallax-1 .header-text [class*="badge"],
  #parallax-1 .header-text [class*="trust"]{
    display:inline-flex !important;
  }
}
	
	/* ===== HERO: robuste Darstellung auf Mobil & Firefox ===== */

/* Grundlage */
#parallax-1{ position:relative; z-index:10; overflow:visible; }

/* Hintergrundabdunkelung unter dem Text (immer sichtbar) */
#parallax-1::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(17,24,39,.60) 0%,
    rgba(17,24,39,.40) 55%,
    rgba(17,24,39,.28) 100%);
  z-index:0;
}

/* Text-Box im Vordergrund */
#parallax-1 .header-test{ display:flex; justify-content:center; }
#parallax-1 .header-text{
  position:relative; z-index:11;
  border-radius:22px; box-shadow:0 12px 40px rgba(0,0,0,.35);
  color:#fff;
  /* Fallback: solides Overlay (funktioniert in Firefox/Mobile immer) */
  background: rgba(17,24,39,.72);
}

/* Wenn Blur unterstützt wird → „Glass“ nur auf Desktop */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  @media (min-width: 769px){
    #parallax-1 .header-text{
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
  }
}

/* ===== Parallax auf Mobile hart deaktivieren ===== */
@media (max-width: 992px){
  /* Plugin-Spiegel ausblenden */
  .parallax-mirror{ display:none !important; }
  /* statisches Bild als Fallback */
  #parallax-1{
    background-image: url('img/Fotobox-header.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* ===== Mobile: nur Kerninhalte zeigen (H1, Untertitel, Haupt-CTA) ===== */
@media (max-width: 768px){
  /* nur die .header-text-Box behalten */
  #parallax-1 .header-test > :not(.header-text){ display:none !important; }

  /* innerhalb der Box: alles außer H1, Untertitel, Anfrage-CTA ausblenden */
  #parallax-1 .header-text > *{ display:none; }
  #parallax-1 .header-text h1,
  #parallax-1 .header-text .header-untertitel,
  #parallax-1 .header-text a[href*="anfrage"]{
    display:block !important;
  }

  /* komfortabler Innenabstand */
  #parallax-1{ min-height: 64vh; padding: 56px 0 32px !important; }
  #parallax-1 .header-text{ padding: 16px 18px 18px; }
}

/* ===== Folge-Abschnitt/Plugins nicht über den Hero zeichnen ===== */
#parallax-1 + *{ position:relative; z-index:1; margin-top:14px; }
[class^="elfsight-app-"], [class*=" elfsight-app-"]{
  position:relative !important; z-index:1 !important; margin-top:18px;
}

	.feature-cards {
  display: grid;
  grid-template-columns: 1fr;   /* Mobile: 1-spaltig */
  gap: 16px;                    /* Abstand zwischen Kacheln */
}

/* Tablet/Desktop wieder mehrspaltig (optional) */
@media (min-width: 768px)  { .feature-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-cards { grid-template-columns: repeat(3, 1fr); } }

	
	@media (max-width: 640px) {
  .feature-cards {
    grid-template-columns: 1fr !important; /* oder */
    flex-direction: column !important;      /* falls es Flex ist */
  }
  .feature-cards > * {
    width: 100% !important;  /* volle Breite je Karte */
    max-width: 100% !important;
  }
}
	
	/* Container-Klasse deiner Kachelgruppe */
.feature-cards {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile: 1 Spalte */
  gap: 16px;
}

/* Optional: wieder 2/3 Spalten auf größeren Screens */
@media (min-width: 768px)  { .feature-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-cards { grid-template-columns: repeat(3, 1fr); } }

/* Harte Overrides, falls bestehendes Layout quer funkt */
@media (max-width: 640px) {
  .feature-cards { display: grid !important; grid-template-columns: 1fr !important; }
  .feature-cards > * { width: 100% !important; max-width: 100% !important; }
}
/* ===== MOBILE HARD-OVERRIDE (<= 640px) ===== */
@media (max-width: 640px) {
  /* Container deiner Kacheln – wähle EINE der drei Varianten: */
  /* 1) Wenn du eine Klasse am Container hast: */
  .feature-cards {
    display: block !important;                 /* killt grid/flex */
  }

  /* 2) Falls kein Wrapper vorhanden ist, aber die Karten eine Klasse haben: */
  /* .card-list { display:block !important; }  */

  /* 3) Wenn du gar keine Klassen weißt: ziel’ auf den realen Parent-Selector in deiner Seite
     (z. B. .section--features, #leistungen, .tiles, …) und ersetze .feature-cards oben. */

  /* Die eigentlichen Karten (alle direkten Kinder stapeln 100% breit) */
  .feature-cards > * {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 100% !important;
  }
}
	
/* Kontaktkarte: Bild oben, Text immer darunter */
.contact-card {
  display: block !important;     /* killt evtl. flex/grid */
}

.contact-card img {
  display: block;
  width: 100%;
  max-width: 320px;               /* optional: begrenzen */
  height: auto;
  margin: 0 auto;                 /* optional: zentrieren */
  float: none !important;         /* falls woanders floats gesetzt sind */
}

.contact-card figcaption {
  display: block;
  margin-top: 12px;
  text-align: center;             /* optional: zentriert den Text */
  float: none !important;
}

	
	/* NAVBAR: Toggler immer zeigen und rechts oben platzieren */
#tm-main-nav { position: relative; }

.navbar-expand-lg .navbar-toggler {   /* Bootstrap zeigt den Toggler sonst ab lg nicht */
  display: block;                      /* immer sichtbar */
}

#tm-main-nav .navbar-toggler {
  position: absolute;                  /* rechts oben im Navbereich */
  top: 8px;
  right: 12px;
  z-index: 10;
}
	
/* In deine fotobox-stylesheet.css */
#top, #pakete, #designs, #faq, #kontakt {
  scroll-margin-top: 96px; /* ~ Navi-Höhe; bei Bedarf anpassen */
}
html {
  scroll-behavior: smooth; /* optional; JS steuert Offset präzise */
}

	
	/* Standard-Optik */
.tm-nav-link { color:#6b6f72; transition:color .2s, background-color .2s; }

/* Dauerhaft aktiver Zustand (Klick/Scroll) */
.tm-nav-link.active,
.tm-nav-link[aria-current="page"],
.nav-item.active > .tm-nav-link {
  color:#fff !important;
  background:#91b29b;              /* die grüne Kachel */
  position:relative;
}

/* Unterstreichung / Balken unten wie im Screenshot */
.tm-nav-link.active::after,
.tm-nav-link[aria-current="page"]::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:6px;
  background:#2f6f6a;               /* dunkler Akzent */
}

.tm-nav-container-outer {
    padding-bottom: 20px !important;
}
