/* Style Sheet */

/* barlow-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/barlow-v13-latin-300.woff2') format('woff2'),
       url('../fonts/barlow-v13-latin-300.ttf') format('truetype');
}

/* barlow-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v13-latin-regular.woff2') format('woff2'), 
       url('../fonts/barlow-v13-latin-regular.ttf') format('truetype');
}

/* barlow-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-v13-latin-500.woff2') format('woff2'),
       url('../fonts/barlow-v13-latin-500.ttf') format('truetype');
}

/* barlow-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-v13-latin-600.woff2') format('woff2'),
       url('../fonts/barlow-v13-latin-600.ttf') format('truetype'); 
}

/* barlow-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-v13-latin-700.woff2') format('woff2'), 
       url('../fonts/barlow-v13-latin-700.ttf') format('truetype'); 
}

/* barlow-condensed-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-condensed-v13-latin-regular.woff2') format('woff2'),
       url('../fonts/barlow-condensed-v13-latin-regular.ttf') format('truetype');
}

/* barlow-condensed-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-condensed-v13-latin-500.woff2') format('woff2'); 
}

/* barlow-condensed-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-condensed-v13-latin-600.woff2') format('woff2'), 
       url('../fonts/barlow-condensed-v13-latin-600.ttf') format('truetype'); 
}

/* barlow-condensed-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-condensed-v13-latin-700.woff2') format('woff2'),
       url('../fonts/barlow-condensed-v13-latin-700.ttf') format('truetype'); 
}


/* Kalibrierung der wichtigsten Abstände */

/* Allgemeine Selektoren */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}

html {
  background: white;
  scroll-behavior: smooth;
}

body {
  color: rgb(49,50,60);
  background: white;
  line-height: 1.5;
hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

:root {
	--color-primary: rgb(178,0,106);
	--color-overlay: rgb(54 30 108 / 0.7);
    --color-d-lila: rgb(54,30,108);
    --color-blau: rgb(24,41,102);
    --color-hellblau: rgb(114,120,169);
    --color-hellgrau: rgb(238,239,246);
    --color-hellrosa: rgb(251,244,249);
    --color-rosa: rgb(233,200,223);
    --color-hell-lila: rgb(222,223,237);
    --color-lila: rgb(192,194,220);
    --color-d-rosa: rgb(196,90,149);
  --color-mittelrosa: rgb(242,222,237);
}

a { outline: none; }
/* Styles für das Layout */

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  margin: 0 0 15px 0;
}

#banner {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: white;
  opacity: 0.9;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

#banner-blind {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: white;
}



#banner-innen,
#banner-innen-blind {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  padding: 20px 0 20px 20px;
}

#logo,
#logo-blind {
  width: 80%;
  height: auto;

}




/* mobil menu*/

#aussen {
  width: 7%;
  height: auto;
  overflow: hidden;
  margin-right: 20px;
}

#aussen .button {
  color: var(--color-primary);

}

#aussen .button:hover {
  color: var(--color-d-lila);
}

#aussen .button rect {
  height: 3px;
}





/* Navigation */

#canvas ul {
  padding-left: 0;
}

#canvas ul li {
  list-style-type: none;
  font-family: 'Barlow Condensed';
  font-weight: 350;
}

#canvas ul li a {
  text-decoration: none;
 background: linear-gradient(to right,  #28006e 0%,#28006e 10%,#4a38b1 39%,#28006e 83%,#28006e 100%); 
  padding: 10px 30px 10px 30px;
  display: block;
  margin-bottom: 2px;
  color: rgb(255,255,255);
  font-size: clamp(1.2rem, 1.0909rem + 0.5455vw, 1.5rem);
}

#canvas ul li a:hover,
#canvas ul li.uk-active a {
  color: var(--color-rosa);
  filter: brightness(1.6);
}


.navbar-toggler-right {
  display: none;
}



 .uk-offcanvas-bar {
   z-index: 2000;
    left: -400px;
    width: 400px;
    padding: 0;
   background: none;
   top: 120px;
  }



/* Startseite*/

/* slider */

.top-slider {
 width: 100%;
  height: auto;
  background-image: url('../images/homefond.jpg');
  /*background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 170px;
}

.slider-alles {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}



p.gross {
font-size: clamp(1.2rem, 0.7455rem + 2.2727vw, 2.45rem);
  font-family: 'Barlow';
  color: rgb(255,255,255);
  font-weight: 600;
}

p.slider-text {
  font-size: clamp(1.2rem, 1.0909rem + 0.5455vw, 1.5rem);
  color: rgb(255,255,255);
  font-family: 'Barlow';
  font-weight: 400;
}

.marken {
  width: 100%;
  height: auto;
  border-radius: 9999px;
  display: inline-block; /* wichtig bei Text */
  background: var(--color-overlay);
  padding: 20px 0 20px 0;
  color: rgb(255,255,255);
 font-size: clamp(1.2rem, 1.0909rem + 0.5455vw, 1.5rem);
  text-align: center;
  font-weight: 500;
}

.marken {
  text-decoration: none;
   color: rgb(255,255,255);
}

a:hover .marken {
  color: var(--color-primary);
   filter: brightness(1.6);
}
 
.back {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content : center;
}



.back-1 {
  background-image: url('../images/back-1.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.back-2 {
  background-image: url('../images/back-2.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.back-3 {
  background-image: url('../images/back-3.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.back-4 {
  background-image: url('../images/back-4.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.back-5 {
  background-image: url('../images/back-5.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.back-6 {
  background-image: url('../images/back-6.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}


.back-4,
.back-6 {
   font-size: clamp(1.6rem, 1.2909rem + 1.5455vw, 2.45rem);
  font-family: 'Barlow';
  color: var(--color-rosa);
  font-weight: 600;
  padding: 35px 10px 35px 10px;
  text-align: center;
  line-height: 1;
}


.back-5 {
   font-size: clamp(1.6rem, 1.2909rem + 1.5455vw, 2.45rem);
  font-family: 'Barlow';
  color: var(--color-rosa);
  font-weight: 600;
  padding: 55px 10px 55px 10px;
  text-align: center;
  line-height: 1;
}

.back-1,
.back-2,
.back-3 {
   font-size: clamp(1.6rem, 1.2909rem + 1.5455vw, 2.45rem);
  font-family: 'Barlow';
  color: var(--color-rosa);
  font-weight: 600;
  padding: 55px 10px 65px 10px;
  text-align: center;
  line-height: 1;
}




a:hover .back-1,
a:hover .back-2,
a:hover .back-3,
a:hover .back-4,
a:hover .back-5,
a:hover .back-6 {
  color: var(--color-primary);
   filter: brightness(1.6);
}



/* Inhalt */

#content {
  width: 100%;
  height: auto;
  overflow: hidden;
}


.inhalt {
  width: 100%;
  max-width: 1200px;
  height: auto;
 font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  color: rgb(0,0,0);
font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
  margin: 0 auto;
  padding: 0px 40px 0px 40px;
}

strong,
.strong {
  font-weight: 600;
}

.pink {
  color: var(--color-primary);
}

.inhalt a {
  text-decoration: none;
}

a.pink:hover,
.inhalt a span strong:hover {
  color: rgb(0,0,0);
  text-decoration: none;
}

/* Überschriften */

.ueber-gross {
  font-size: clamp(1.2rem, 0.7455rem + 2.2727vw, 2.45rem);
  font-family: 'Barlow';
  color: rgb(0,0,0);
  font-weight: 400;
  
}


/* Listen */

.liste li {
   break-inside: avoid;
    -webkit-column-break-inside: avoid; /* für ältere Browser */
}

.liste,
.liste-blau {
  list-style-type: none;
  padding-left: 0;
}

.liste > li,
.liste-blau > li {
  position: relative;
    padding-left: 1.1em; /* Abstand zum Quadrat */
  margin-bottom: 10px;
}



.liste > li::before,
.liste-blau > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em; /* vertikale Ausrichtung */
    width: 0.7em;   /* Quadratgröße */
    height: 0.7em;
    background-color: var(--color-primary); /* übernimmt Textfarbe */
}

.liste,
.liste-blau {
  margin-left: 0;
}

.liste li.schaden::before {
  visibility: hidden;
}
.liste > li.schaden {
  position: relative;
    padding-left: 0; /* Abstand zum Quadrat */
}

/* Banner */

.banner-1 {
  width: 100%;
  height: auto;
   background-image: url('../images/banner-1.jpg');
 background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto;
}

.banner-2 {
  width: 100%;
  height: auto;
   background-image: url('../images/banner-2.jpg');
 background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto;
}

.banner-3 {
  width: 100%;
  height: auto;
   background-image: url('../images/banner-3.jpg');
 background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto;
}

.banner-4 {
  width: 100%;
  height: auto;
   background-image: url('../images/banner-4.jpg');
 background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto;
}

.banner-5 {
  width: 100%;
  height: auto;
   background-image: url('../images/banner-5.jpg');
 background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto;
}


.banner-6 {
  width: 100%;
  height: auto;
   background-image: url('../images/banner-5.jpg');
 background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto;
  padding-bottom: 50px;
}

.lampen-aussen {
  width: 100%;
  height: auto;
  overflow: auto;
}

.lampen-alles {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: auto;
  padding: 20px;
  overflow: auto;
}

.lampen-innen {
  width: 100%;
  height: auto;
}

.lampen {
 font-size: clamp(1.2rem, 0.5455rem + 3.2727vw, 3rem);
  color: var(--color-d-rosa);
  font-family: "Barlow";
  font-weight: 600;
  line-height: 1;
}

.lampen-klein {
  width: 67%;
  height: auto;
  float: right;
}

/* farbige felder */

.feld-grau {
  width: 100%;
  height: auto;
  background: var(--color-hellgrau);
  overflow: auto;
}

.feld-rosa {
  width: 100%;
  height: auto;
  background: var(--color-hellrosa);
  overflow: auto;
}

/* email-banner */

.fragen-aussen {
  width: 100%;
  height: auto;
 background: linear-gradient(to right,  #7278a9 0%,#7278a9 47%,#7278a9 47%,#182966 50%,#182966 100%); 
   font-size: clamp(1.2rem, 0.7455rem + 2.2727vw, 2.45rem);
  font-family: 'Barlow Condensed';
  color: rgb(255,255,255);
  font-weight: 400;
}

.fragen-aussen p {
  font-size: clamp(1rem, 0.5265rem + 2.3673vw, 2.45rem);
  font-family: 'Barlow Condensed';
  color: rgb(255,255,255);
  font-weight: 400;
  margin-bottom: 0;
}

.fragen-alles {
  width: auto;
  max-width: 1300px;
  height: auto;
  margin: 0 auto;
  padding: 0 40px 0 40px;
}

.fragen-alles a {
  color: rgb(255,255,255);
  text-decoration: none;
}

.fragen-alles a:hover {
  color: var(--color-rosa);
}

.fragen-left {
  background: var(--color-hellblau);
  padding: 10px 40px 15px 0;
  clip-path: polygon(
    0 0,         /* oben links */
    95% 0,       /* oben rechts (vor der Schräge) */
    100% 50%,    /* Spitze rechts */
    95% 100%,    /* unten rechts (vor der Schräge) */
    0 100%       /* unten links */
  );
}

.fragen-right {
  padding: 10px 0 15px 10px;
}

/* accordion */

.uk-accordion-default .uk-accordion-title {
  flex-wrap: wrap !important;
  align-items: flex-end !important;
}

ul.accord li a {
  padding: 20px 20px 20px 30px;
  background: var(--color-rosa);
  border-radius: 9999px;
  display: inline-block;
}

ul.accord-blau li a {
  padding: 20px 20px 20px 30px;
  background: var(--color-lila);
  border-radius: 9999px;
  display: inline-block;
}

ul.accord li a:hover,
ul.accord-blau li a:hover {
  color: var(--color-primary);
}

ul.accord li a span.titel-acc-klein,
ul.accord-blau li a span.titel-acc-klein {
   font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  color: rgb(0,0,0);
font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
}



ul.accord li a span.titel-acc,
ul.accord-blau li a span.titel-acc {
font-size: clamp(1.2rem, 0.7455rem + 2.2727vw, 2.45rem) !important;
  font-family: 'Barlow';
  color: rgb(0,0,0);
  font-weight: 400;
  line-height: 1.2;
}

ul.accord li a span.titel-acc-klein:hover,
ul.accord li a span.titel-acc-klein strong:hover,
ul.accord-blau li a span.titel-acc-klein:hover,
ul.accord-blau li a span.titel-acc-klein strong:hover,
ul.accord li a span.titel-acc:hover,
ul.accord-blau li a span.titel-acc:hover {
  color: var(--color-primary);
}

ul.accord .uk-accordion-content {
  padding: 40px 20px 20px 23px;
  margin-top: 0 !important;
   background: var(--color-mittelrosa) !important;
}
ul.accord-blau .uk-accordion-content {
  padding: 40px 20px 20px 23px;
  margin-top: 0 !important;
   background: var(--color-hell-lila) !important;
}



  /* footer */

#footer {
    width: 100%;
    height: auto;
   background-image: url('../images/footer.jpg');
  background-size: cover;
background-position: center;
background-repeat: no-repeat;
  }

.footer-innen {
  width: 100%;
  max-width: 1200px;
  height: auto;
  padding: 40px 20px 40px 20px;
  margin: 0 auto;
   font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  color: rgb(255,255,255);
font-size: clamp(1.2rem, 1.0909rem + 0.5455vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-innen p {
  margin-bottom: 0;
}

.footer-innen a {
  color: rgb(255,255,255);
  text-decoration: none;
}

.footer-innen a:hover {
  color: var(--color-rosa);
}

.footer-innen .footer-left-alles {
  width: 60%;
  height: auto;
}

.footer-innen .footer-right {
  font-weight: 500;
}

.footer-innen .footer-left {
  width: 100%;
  display: flex;
    flex-direction: column;
    align-items: flex-end; /* rechtsbündig */
}

.footer-innen .adresse {
  z-index: 1;
}

.footer-innen .footer-bild {
  margin-top: -40px; /* Überlappung nach oben */
    position: relative;
   
}

.footer-innen .impressum {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 25px;
}

.footer-innen .impressum .klein {
  font-size: 1rem;
  width: 56%;
  height: auto;
  padding-left: 26px;
}

.footer-innen .impressum .klein-1 {
  width: 44%;
  height: auto;
}


/* fixierte box seitlich */

#fixed-middle-box {
    position: fixed;
    top: 70%;
    right: 0;
    transform: translateY(-90%);
    z-index: 1000;
    overflow: visible;
}
.contact {
	margin-bottom: 15px;
    display: flex;
    align-items: center;
    position: relative;
	right: -230px; /* versteckt den Textteil */
    transition: right 0.3s ease;
}

.con-icon {
	width: 80px;
	height: 80px;
	 display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.con-text {
	width: 230px;
	height: 80px;
	 font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
	font-size: clamp(0.8rem, 0.5818rem + 1.0909vw, 1.4rem);
	color: rgb(0,0,0);
	background: white;
	
	display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Slide-in beim Hover auf .contact */

.contact:hover {
   right: 0;
}

.con-text a {
	color: rgb(0,0,0);
	text-decoration: none;
}

.con-text a:hover {
	color: rgb(35,38,122);
	text-decoration: none;
}



.skip-to {
  z-index: 5000;
}


#uv-lampen,
#reflektoren,
#ir-komponenten,
#anwendungsgebiete,
#hersteller {
scroll-margin-top: 150px;
  }

/* Google Maps */

.googlemaps .ccctwoclick__copy,
.googlemaps .ccctwoclick__privacy-header,
.googlemaps .ccctwoclick-toggle__text {
  font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
  font-family: 'Barlow Condensed';
}

.abstand {
  padding-top: 100px;
}

/* sprachmodul */

.sprache {
  width: 80px;
  height: auto;
  background: rgb(255,255,255);
  position: relative;
  right: -230px;
  margin-bottom: 15px;
}

.sprache img {
  width: 40px;
  height: auto;
}

.sprache .visually-hidden {
  display: none;
}

div.mod-languages ul li.lang-active {
  background: rgb(255,255,255) !important;
}

/*div.mod-languages ul.lang-block li {
  text-align: end !important;
}*/