/* CSS Document */

:root{
	--naviblau: #1D5AA0;
	--tuerkis: #1EB4B1;
	--textblau: #054B77;
	--bg_hellblau: #E5F6FF;
}
html, body { scroll-behavior: smooth; }

@font-face {
    font-family: 'Avenir LT Std Roman';
    src: url('../fonts/AvenirLTStd-Roman.eot');
    src: url('../fonts/AvenirLTStd-Roman.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Roman.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Roman.woff') format('woff'),
        url('../fonts/AvenirLTStd-Roman.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Roman.svg#AvenirLTStd-Roman') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std Light';
    src: url('../fonts/AvenirLTStd-Light.eot');
    src: url('../fonts/AvenirLTStd-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Light.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Light.woff') format('woff'),
        url('../fonts/AvenirLTStd-Light.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Light.svg#AvenirLTStd-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std Heavy';
    src: url('../fonts/AvenirLTStd-Heavy.eot');
    src: url('../fonts/AvenirLTStd-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Heavy.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Heavy.woff') format('woff'),
        url('../fonts/AvenirLTStd-Heavy.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Heavy.svg#AvenirLTStd-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std Medium';
    src: url('../fonts/AvenirLTStd-Medium.eot');
    src: url('../fonts/AvenirLTStd-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Medium.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Medium.woff') format('woff'),
        url('../fonts/AvenirLTStd-Medium.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Medium.svg#AvenirLTStd-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Better Times';
    src: url('../fonts/BetterTimes.eot');
    src: url('../fonts/BetterTimes.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BetterTimes.woff2') format('woff2'),
        url('../fonts/BetterTimes.woff') format('woff'),
        url('../fonts/BetterTimes.ttf') format('truetype'),
        url('../fonts/BetterTimes.svg#BetterTimes') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}




body{
	position: relative;
	font-family: 'Avenir LT Std Medium';
	color: var(--textblau);
	font-size: 1.1rem;
}
.bg-light { 
  background-color: #fff !important;
}

.nav-link{
	color:var(--naviblau);
	text-transform: uppercase;
}
.navbar-nav .nav-link.active{
	color: var(--tuerkis) !important;
}

.navbar-toggler{
	color: var(--bg_hellblau);
	border:var(--bs-border-width) solid var(--bg_hellblau);
}
.kontakt-desktop p, .kontakt-desktop a{
	margin-bottom:0;
	font-size:1rem;
	color:var(--tuerkis);
}
.kontakt-desktop img:first-of-type, .social-icons img:first-of-type{
	padding-right: 0.5rem;
}
.kontakt-mobile{
position: absolute;
  top: 5px;
  right: 20px;
  display: inline-flex;
	color:var(--tuerkis);

}
header{
	margin-top: 150px;
}

header img{
	height: auto;
}
	/* Deko-Bilder */
.deco {
  position: absolute;
  z-index: 2;
  /*width: clamp(44px, 8vw, 110px);   /* responsive Größe */
  pointer-events: none;             /* klickt nicht die Links im Hero weg */
}

/* oben links */
.deco-tl { top: 29px; left: 18px; }

/* unten rechts */
.deco-br { right: 12px; bottom: 12px; }
	
	#ueber_uns .col-lg-6 .text{
		margin-top: 5rem;
		padding: 3rem;
		text-align: center;
			
	}
	#ueber_uns .col-lg-6 .text p{
		line-height: 180%;
	}
h1{
	color: var(--tuerkis);
}
#home h1{
	font-family: 'Better Times';	
}

h3{
	color: var(--tuerkis);
	text-transform: uppercase;
	margin: 0.5rem 0;
	font-size: 1.5rem;
}
footer h4{
	text-transform: uppercase;
}
#ueber_uns .col-lg-6{
	background-color: #fff;
}

footer{
	background-color: var(--bg_hellblau);
}
footer a{
	color:var(--textblau);
	text-decoration: none;
}

/*--------------Sortiment mit masonry-------------------------*/

/* Masonry-Container */
.masonry{
  column-gap: 1.25rem;              /* Abstand zwischen den Spalten */
  /* Basis: 1 Spalte – skaliert über MQs */
  columns: 1;
}

/* Responsiv: Spaltenanzahl */
@media (min-width: 768px){  .masonry{ columns: 2; } }
@media (min-width: 992px){  .masonry{ columns: 3; } }


/* Einzelne Kacheln */
.masonry-item{
  break-inside: avoid;              /* verhindert Umbrüche mitten im Element */
  margin-bottom: 1.25rem;           /* vertikaler Abstand */
  display: block;
}

/* Bilder */
.masonry-item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: .5rem;
}

/* Text-Kacheln (türkis aus deinem Beispiel) */
.masonry-item.tile {
  background: #18b7b0;
  color: #fff;
  border-radius: .5rem;
  display: grid;
  place-items: center;
  text-decoration: none;
  text-align: center;
  padding: 1.5rem;           
  transition: transform .25s ease, filter .25s ease;
}
.masonry-item.tile:hover {
  transform: translateY(-3px);
  filter: brightness(0.95);
}

.masonry-item.tile span {
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing: .06em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Optional: dezenter Hover */
.masonry-item.tile:hover{ filter: brightness(0.95); }
.masonry-item img:hover{ filter: saturate(1.05); }



/* Barrierefreiheit / Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
  .masonry-item img, .masonry-item.tile{ transition: none; }
}

/*-----media queries fuer masonry---------*/
@media (min-width: 992px) {
	.masonry-item.tile { min-height: 185px; }
}
@media (min-width: 1200px)  {
	.masonry-item.tile { min-height: 225px; }	
}
@media (min-width: 1400px)  {
	.masonry-item.tile { min-height: 261px; }	
}

/*-------------------navbar-toggler--------------------*/
 /* === Toggle Button (Hamburger) === */
    /* === Toggle Button (Hamburger) === */
.navbar-toggler {
  border: none;
  outline: none;
  padding: 0.5rem;
  background: transparent;
	margin-top: 1.2rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler .bar {
  display: block;
  width: 35px;              /* leicht breiter für bessere Proportion */
  height: 3px;              /* <— hier 3 px */
  margin: 8px auto;         /* vertikaler Abstand bleibt */
  background-color: var(--textblau);
  transition: all 0.35s ease-in-out;
  border-radius: 2px;       /* leicht abgerundet wirkt feiner */
}

/* Zustand: geöffnet (Button hat Klasse .open) */
.navbar-toggler.open .bar:nth-child(1) {
  transform: translateY(14px) rotate(45deg);
}

.navbar-toggler.open .bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggler.open .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

#ueber_uns{
	background-color:var(--bg_hellblau);
}
#ueber_uns img{
	width: 100%;
	height: auto;
}
#ueber_uns .col-lg-6 .text {
    margin-top: 5rem;
    padding: 3rem;
    text-align: center;
  }

hr{
	border-top: 2px solid var(--tuerkis);
	opacity:1;
	width: 30%;
	margin: 3rem auto;
}
/*-------Logo-Slider--------*/
.logo-slider {
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #eee;
  
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slide-track {
  display: flex;
  width: calc(250px * 14); /* Breite eines Logos * Anzahl der Slides */
  animation: scroll 35s linear infinite;
}

.slide {
  width: 300px;  /* fixe Breite pro Logo (kann angepasst werden) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
}

.slide img {
  max-height: 60px;
  width: auto;
  filter: grayscale(100%) opacity(0.8);
  transition: filter 0.3s ease;
}

.slide img:hover {
  filter: none;
}

/* Die eigentliche Bewegung */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7)); /* halbe Breite, da doppelt vorhanden */
  }
}
/*-------Ende slider--------------------*/
.markenbild .hero-img.w-100{
	height: auto;
}

#oeffnungszeiten .col-lg-4, #kontakt .col-lg-4{
	text-align: center;
}
#oeffnungszeiten .col-lg-4 a, #kontakt .col-lg-4 a{
	color: var(--textblau);
	text-decoration: none;
}
#marken {
  scroll-margin-top: 130px; /* entspricht der Header-Höhe */
}

#kontakt {
  scroll-margin-top: 170px; /* entspricht der Header-Höhe */
}
#sortiment {
scroll-margin-top: 80px; /* entspricht der Header-Höhe */
}

#legal section{
	margin-top: 120px;
}

@media (min-width: 992px) and (max-width:1199px) {
	#ueber_uns .col-lg-6 .text {
  	margin-top: 0rem;
  	padding: 3rem 1rem 1rem;
}
}
@media (max-width: 991px) {
	ul.navbar-nav{
		padding-left: 1rem;
	}
.navbar-collapse {    
    background-color: #ffffff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }	
 
 img.deco{
		width: 100px;
		height: auto;		
	}
	
	#marken {
  scroll-margin-top: 150px; /* entspricht der Header-Höhe */
}

#kontakt {
  scroll-margin-top: 150px; /* entspricht der Header-Höhe */
}
#sortiment {
scroll-margin-top: 0; /* entspricht der Header-Höhe */
}
	
}
	


@media (min-width: 1200px)  {
	.kontakt-mobile{
		display: none;		
}
	 h1 {
    font-size: 3.5rem;
  }
	
	}
@media (max-width: 767px) {
	
	.navbar-brand img{
		width: 250px;
	}
	
}
	
@media (max-width: 576px) {
	
	.navbar-brand img{
		width: 200px;
	}
	
	.fixed-top{
		padding-top: 43px;
	}
	
	img.deco{
		width: 70px;
		height: auto;		
	}
.masonry-item.tile { min-height: 140px; }	
	}
/* Sehr kleine Screens: falls’s zu eng wird, kleiner oder ausblenden */
@media (max-width: 380px) {
  .deco { width: clamp(32px, 10vw, 80px); }
	
	.slide{
		width: 120px;
	}
	.slide img{
		max-width:100px;
	}
}

@media (prefers-reduced-motion: reduce){
  .parallax-simple{ background-attachment: scroll; }
}


@media (min-width: 1401px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
	
	.masonry-item.tile { min-height: 261px; }
}