/* VARIABLEN */


:root {
    --text-light: #f5f5f5;
    --text-dark: #252525;

    --color-main: #0618e0;
    --color-primary: #de3a8c;
    --color-secondary: #ef6b3a;
    
    --color-light: #ffffff;
	--color-medium: #f0f0f0;
    --color-dark: #3b3b3b;
}


/* BASICS */


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

html {
    font-family: 'Poppins', sans-serif;
    font-size: 62.5%;
    background-color: var(--color-light);
    color: var(--text-dark);
    scroll-behavior: smooth;
}

h1 {
   font-size: 10rem;
}

h2, h3, h4 {
   font-family: 'Humane', sans-serif;
   font-size: 12rem;
   font-weight: 500;
   color: var(--color-main);
   padding: 0;
   text-transform: uppercase;
}

h2 span {
	color: var(--color-primary);
}

p {
   font-size: 1.6rem;
   font-weight: 300;
   letter-spacing: 2px;
   line-height: 3rem;
   margin-bottom: 2rem;
}

p:last-of-type {
	margin-bottom: 0;
}


a {
   text-decoration: none;
   color: var(--color-main);
   transition: 0.2s;
}

a:hover,
a:focus {
   color: var(--color-primary);
}

p > a {
   border-bottom: 1px solid var(--color-primary);
}

ul, li {
   list-style: none;
}

a.anchor {
   display: block;
   position: relative;
   top: -12em;
   visibility: hidden;
}

span.highlight {
	font-weight: 800;
	color: var(--color-secondary);
}

.btn {
   padding: 1em 2em;
   font-size: 2rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--text-light);
   background-color: var(--color-secondary);
   box-shadow: 4px 4px 0px var(--color-main);
   transition: 0.15s ease-in-out;
   font-weight: 800;
}

.btn:hover,
.btn:focus {
   color: var(--text-light);
   box-shadow: -4px -4px 0px var(--color-main);
}

.clr-main {
   background: var(--color-main);
}

.clr-primary {
   background: var(--color-primary);
}

.clr-secondary {
   background: var(--color-secondary);
}

.container {
   width: 90%;
   max-width: 1000px;
   margin: 10em auto;
}

.divider-50 {
   height: 1px;
   background: var(--color-main);
   margin: 6em auto;
   width: 50%;
}

.divider-75 {
   height: 1px;
   background: var(--color-main);
   margin: 6em auto;
   width: 75%;
}

.divider-100 {
   height: 1px;
   background: var(--color-main);
   margin: 6em auto;
   width: 100%;
}


.space {
   margin: 2em auto;
}


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


  h2, h3, h4 {
   font-size: 10rem;
  }

}


/* NAVIGATION */


.nav {
   position: fixed;
   height: 100vH;
   width: 100%;
   background: var(--color-main);
   border-right: solid 0.5rem var(--color-secondary);
   transform: translateX(calc(100% - 0rem));
   transition: all cubic-bezier(0.65, 0.05, 0.35, 1) 0.4s;
   z-index: 99;
   top: 0;
   left: 0;
}

.nav-list {
    display: flex;
    flex-direction: column;
    height: 100vH;
    justify-content: flex-start;
    align-items: baseline;
    margin-top: 8em;
}

.nav-link {
   font-family: 'Humane', sans-serif;
   font-size: 18rem;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 14rem;
   padding: 0 0 0 8rem;
   transition: 0.1s ease-in-out;
}

.nav-link a {
   color: var(--text-light);
}

.nav-link a:hover,
.nav-link a:focus {
   color: var(--color-primary);
}


.sub-nav-link {
   display: block;
   font-size: 2.5rem;
   font-weight: 600;
   text-transform: uppercase;
   padding: 0 0 1rem 12rem;

}

.sub-nav-link a {
    color: var(--text-light);
    background: var(--color-secondary);
    padding-right: calc(60% - 12rem);
    padding-left: 0.75rem;
}

.sub-nav-link a:hover,
.sub-nav-link a:focus {
	color: var(--text-light);
    background: var(--color-primary);
}

.last-link {
   padding: 0 0 2rem 12rem;
}

.nav-open {
   transform: translateX(40%);
   transition: all cubic-bezier(0.65, 0.05, 0.35, 1) 0.4s;
}


.nav-social {
    position: absolute;
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 800px;
    bottom: 5%;
    left: 30%;
    transform: translateX(-50%);
}

.nav-social-icons {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    max-width: 1000px;
    margin-top: -10em;
    z-index: 1;
    gap: 1rem;
}

.nav-social-link {
    margin: auto;
    color: var(--text-light);
    font-size: 3rem;
    text-align: center;
    border-radius: 50%;
    height: 8rem;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-social-link:hover {
    color: var(--color-main);
    background-color: var(--color-light);
}
  

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

   .nav-link {
      font-size: 12rem;
      line-height: 9rem;
      padding: 0 0 0 4rem;
   }   
   
   .nav-list {
    margin-top: 5em;
	}
   
   .sub-nav-link {
      padding: 0 0 0 12rem;
   }

	.last-link {
		padding: 0 0 1.5rem 12rem;
	}

	.sub-nav-link a {
		padding-right: 0;
		background: none;
		color: var(--color-secondary);
	}
	
	.sub-nav-link a:hover,
	.sub-nav-link a:focus {
    color: var(--color-primary);
    background: none;
}


}

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

   .nav-link {
      font-size: 12rem;
      line-height: 9rem;
      padding: 0 0 0 4rem;
   } 
  
   .nav-list {
    margin-top: 11.5em;
	}
   
   .sub-nav-link {
      padding: 0 0 0 12rem;
   }

   .last-link {
      padding: 0 0 1.5rem 12rem;
   }
   
   .nav-open {
      transform: translateX(0%);
      transition: all cubic-bezier(0.65, 0.05, 0.35, 1) 0.4s;
   }

	.sub-nav-link a {
      padding-right: 0;
      background: none;
      color: var(--color-secondary);
	}
	
	.nav-social {
	    width: 80%;
	    bottom: 10%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.nav-social-link {
		height: 6rem;
	}

}
 

/* HAMBURGER MENU */


.menu-toggle {
    position: fixed;
    padding: 3rem 2rem;
    top: 2rem;
    right: 1rem;
    cursor: pointer;
    border: none;
    z-index: 999;
    background: var(--color-main);
    margin: 0.25em 1em;
}

.menu-toggle:focus {
  outline: none;
}

.hamburger,
.hamburger::before,
.hamburger::after {
 content: '';
 display: block;
 background: var(--text-light);
 height: 4px;
 width: 4rem;
 border-radius: 2px;
 transition: all ease-in-out 0.4s;
}

.dark,
.dark::before,
.dark::after {
 background: var(--color-primary);
}


.hamburger::before {
 transform: translateY(-12px);
}
.hamburger::after {
 transform: translateY(8px);
}
.open .hamburger {
 transform: rotate(225deg);
 background: var(--color-primary);
}
.open .hamburger::before {
 opacity: 0;
}
.open .hamburger::after {
 transform: translateY(-4px) rotate(-90deg);
 background: var(--color-primary);
}


/* WILLKOMMEN */


.welcome {
   display: flex;
   height: 100vH;
}

.welcome-img {
   position: absolute;
   height: 100vH;
   width: 100%;
   background-image: url(../img/welcome-img.jpg);
   background-size: cover;
   background-position: center;
   margin: auto;
   z-index: -1;
   transition: all cubic-bezier(0.65, 0.05, 0.35, 1) 0.4s;
}

.img-open {
   transform: translateX(-20%);
}

.welcome-container {
   position: relative;
   width: 100%;
   margin: 6rem;
   z-index: 1;
   transition: all cubic-bezier(0.65, 0.05, 0.35, 1) 0.4s;
}

.gone {
   transform: translateX(-100%);
}

.welcome h1 {
   position: absolute;
   bottom: 4rem;
   font-size: 2rem;
   font-weight: 800;
   color: var(--text-light);
   background: var(--color-main);
   padding: 1rem 2rem;
}

.welcome h2 {
   position: absolute;
   bottom: 4rem;
   font-family: 'Humane', sans-serif;
   font-size: 35rem;
   text-transform: uppercase;
   line-height: 1em;
   color: var(--color-secondary);
   font-weight: 400;
   text-shadow: 1px 1px 0px var(--color-dark);
}

.triangle {
	width: 100%;
	height: 30vH;
	margin-top: -30vH;
    background-color: var(--color-dark);
	clip-path: polygon(0 0, 100% 65%, 100% 100%, 0% 100%);
}


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


	.welcome h1 {
	bottom: 2rem;
	}

	.welcome h2 {
	 bottom: 4rem;
	 font-size: 20rem;
	}

}


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

	.welcome-container {
	   margin: 2rem;
	}

	.welcome h1 {
	bottom: 10vH;
	padding: 0.75rem;
	background: none;
	width: 17em;
	}

	.welcome h2 {
	 bottom: 15vH;
	 font-size: 17rem;
	}

	.triangle {
      height: 40vH;
      margin-top: -40vH;
		clip-path: polygon(0 0, 100% 45%, 100% 100%, 0% 100%);
	}

}


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

	.triangle {
		height: 35vH;
		margin-top: -35vH;
		clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 100%);
	}
	
}


/* INFORMATION */


.information {
    position: relative;
    display: flex;
    min-height: 100vh;
    background-color: var(--color-dark);
    color: var(--text-light);
    overflow: hidden;
    z-index: 1;
}

.information-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 90%;
   max-width: 1000px;
   margin: 10em auto;
}

.information h2 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
	transform: translateY(-44%);
    font-size: 44vW;
    color: var(--text-light);
    opacity: 0.1;
    text-align: center;
}


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

   .information h2 {
      display: none;
  }

}


/* ABOUT */


.about {
   display: flex;
   min-height: 100vH;
}

.about-img {
   width: 100%;
   height: 50vH;
   background-image: url(../img/about-img.jpg);
   background-size: cover;
   background-position: center;
   margin: 4em auto;
}


/* EQUIPMENT */


.equipment {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vH;
	background-color: var(--color-medium);
}

.equipment > .container {
	margin: 10em auto 0;
	min-height: 0;
}

.img-container {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    padding: 2rem;
    gap: 2rem;
}

.img-overlay {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
}

.img-equipment {
	width: 100%;
	aspect-ratio: 1;
}

.overlay {
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.2s ease-in;
}

.img-overlay .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
}

.img-overlay:hover .overlay {
   opacity: 0.9;
}

.icn-info {
   font-size: 6rem;
   color: var(--text-light);
   z-index: 1;
}


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

	.img-container {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
		padding: 1rem;
	}
	
}

/* EQUIPMENT ITEMS */


.close-toggle {
   position: fixed;
   padding: 3rem 2rem;
   top: 2rem;
   right: 1rem;
   cursor: pointer;
   border: none;
   z-index: 999;
   background: var(--color-main);
   margin: 0.25em 1em;
}

.close-toggle:focus {
 outline: none;
}

.close,
.close::before,
.close::after {
content: '';
display: block;
background: var(--text-light);
height: 4px;
width: 4rem;
border-radius: 2px;
transition: all ease-in-out 0.4s;
}

.open .close {
transform: rotate(225deg);
background: var(--color-light);
}
.open .close::before {
opacity: 0;
}
.open .close::after {
transform: translateY(-4px) rotate(-90deg);
background: var(--color-light);
}


.equipment-gitarre,
.equipment-amp,
.equipment-mic,
.equipment-effects {
	display: flex;
	flex-direction: column;
	min-height: 100vH;
	background-color: var(--color-light);
}

.equipment-gitarre,
.equipment-mic {
   outline: 0.5rem solid var(--color-primary);
   outline-offset: -0.5rem;
}

.equipment-amp,
.equipment-effects {
   outline: 0.5rem solid var(--color-secondary);
   outline-offset: -0.5rem;
}

.equipment-item-img {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 10em auto -5em;
}

.equipment-item-img > img {
   width: 100%;
   max-width: 800px;
}


/* HÖRPROBEN */


.listen {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   min-height: 100vH;
   background-color: var(--color-secondary);
   color: var(--text-light);
}

.video {
   display: flex;
   justify-content: center;
   aspect-ratio: 16/9;
   margin: 6em 0 4em 0;
}

.video-youtube {
	width: 100%;
	aspect-ratio: 16/9;
}


.audio-title {
    display: inline-flex;
    margin: 2em 0 0 0;
    background: var(--color-main);
    padding: 1rem;
}


/* LEISTUNGEN */


.services {
    position: relative;
    display: flex;
    min-height: 100vh;
    background-color: var(--color-dark);
    color: var(--text-light);
    overflow: hidden;
}

.services-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 90%;
   max-width: 1000px;
   margin: 10em auto;
}

.services h2 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
	transform: translateY(-44%);
    font-size: 44vW;
    color: var(--text-light);
    opacity: 0.1;
    text-align: center;
}

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

   .services h2 {
      display: none;
  }

}


/* PREISE */


.price {
   display: flex;
   flex-direction: column;
   min-height: 100vH;
   background-color: var(--color-light);
}

.price > .container {
   width: 90%;
   max-width: 1000px;
   min-height: 0;
   margin: 10em auto;
}

.price-info {
    display: flex;
    flex-direction: row;
    padding: 2em;
    gap: 2rem;
    justify-content: center;
    margin: -5em auto;
}

.price-info-box {
   display: flex;
   flex-direction: row;
   gap: 2rem;
}

.price-info-item {
   position: relative;
   flex: 1;
   padding: 5em 3em 3em;
   max-width: 50em;
}

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

.secondary {
	background: var(--color-secondary);
}

.price-info-item p {
   position: inherit;
   color: var(--text-light);
   line-height: 2.5rem;
   z-index: 1;
}

.price-icon {
    position: absolute;
    font-size: 3rem;
    color: var(--color-main);
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2rem;
    background: var(--color-light);
    border-radius: 100vh;
}

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

	.price-info {
		flex-direction: column;
	}

}

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

   .price-info-box {
		flex-direction: column;
	}

}


/* PORTFOLIO */


.portfolio {
   display: flex;
   background: var(--color-medium);
   flex-direction: column;
   min-height: 100vH;
   overflow: hidden;
}

.songlist-container-1 {
   position: relative;
   margin: 10em 0 0 0;
   background: none;
}

.songlist-container-1::after {
   content: '';
   position: absolute;
   background-color: var(--color-secondary);
   inset: -5rem -100% 25em;
   transform: skewY(-2deg);
}

.songlist-container-2 {
   position: relative;
   margin: 10em 0 0 0;
   background: none;
}

.songlist-container-2::after {
   content: '';
   position: absolute;
   background-color: var(--color-primary);
   inset: -5rem -100% 25em;
   transform: skewY(-2deg);
}

.songlist-headline {
   position: inherit;
   font-family: 'Poppins', sans-serif;
   font-size: 3rem;
   font-weight: 800;
   line-height: 3rem;
   color: var(--text-light);
   padding: 1rem 0 0 0;
   z-index: 1;
}

.songlist-text {
   position: inherit;
   color: var(--text-light);
   padding: 2rem 0;
   margin: 0;
   z-index: 1;
}

.songlist {
   position: relative;
   overflow-y: scroll;
   height: 35rem;
   z-index: 1;
}

.songlist-up,
.songlist-down {
   position: inherit;
   font-size: 2rem;
   width: 100%;
   text-align: center;
   z-index: 2;

}

.songlist-up {
    top: calc(2rem + 2px);
}

.songlist-down {
	top: -2rem
}

.songlist-item {
    display: flex;
    justify-content: space-between;
    width: 98%;
    padding: 1rem;
}

.songlist-item:nth-child(odd) {
    background-color: var(--color-light);
}

.songlist-item:nth-child(even) {
    background-color: Var(--color-medium);
}

.songlist-artist {
   margin: 0;
	font-size: 1.4rem;
   font-weight: 600;
}

.songlist-title {
    margin: 0;
	font-size: 1.4rem;
}

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

   .songlist {
      height: 40rem;
   }

   .songlist-up {
      text-align: right;
      top: calc(2.5rem + 2px);
      right: 1rem
  }
  
  .songlist-down {
     text-align: right;
     top: -2.5rem;
     right: 1rem;
  }

   .songlist-item {
      flex-direction: column;
      width: 100%;
  }

}


/* REFERENZEN */


.references {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   min-height: 100vH;
   color: var(--text-light);
   background-color: var(--color-secondary);
   overflow: hidden;
}

  .references > .container {
	   margin: 10em auto 0;
  }


.reference-item {
   display: flex;
   flex-direction: column;
}

.reference-img {
   width: 20rem;
   aspect-ratio: 1;
   object-fit: cover;
   margin: -9em auto 0;
   border: 6px solid var(--color-medium);
   z-index: 1;
}

.reference-content {
   position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 55vH;
    padding: 2em 5em;
    color: var(--text-dark);
}

.reference-back {
   position: absolute;
   bottom: 0em;
   left: 2em;
}

.reference-name {
   font-family: 'Humane', sans-serif;
   font-size: 12rem;
   font-weight: 500;
   color: var(--color-main);
   padding: 0;
   text-transform: uppercase;
   opacity: 0.15;
}

.reference-body p {
   font-size: 1.6rem;
   line-height: 3rem;
}

.reference-footer {
    display: flex;
    flex-direction: column;
    margin-top: 4em;
}

.reference-footer p {
   font-size: 1.6rem;
   line-height: 4rem;
}

.reference-names {
	font-weight: 600;
	margin: 0;
}


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

	.reference-content {
	   padding: 2em;
	   height: 70vH;
	}
	 
 }


.reference-artist {
    display: inline-block;
	font-style: italic;
    margin: 0;
    border-top: 1px solid var(--color-main);
}

.reference-title {
    display: inline-block;
	font-style: italic;
    margin: 0;
    line-height: 1rem !important;
}

.reference-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reference-icon {
   display: flex;
   font-size: 4rem;
   color: var(--color-main);
}

.reference-text a {
   color: var(--text-light);
   font-size: 3rem;
   width: fit-content;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 0 0 1em;
   font-weight: 800;
   text-transform: uppercase;
}

.reference-text:hover a {
   color: var(--color-main);
}


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

   .reference-link {
      flex-direction: column;
   }

   .reference-icon {
		margin: 0 0 2rem 0;
	}
 
   .reference-text a {
      font-size: 2rem;
      margin: auto;
   }
 
 }

/* KONTAKT */


.contact {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   min-height: 100vH;
   background-color: var(--color-light);
}

.contact-links {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon {
   display: flex;
   font-size: 4rem;
   color: var(--color-primary);
}

.contact-text a {
   color: var(--color-secondary);
   font-size: 3rem;
   width: fit-content;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 0 0 1em;
   font-weight: 800;
   text-transform: uppercase;
}

.contact-text:hover a {
   color: var(--color-primary);
}

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

  .contact-link {
     flex-direction: column;
  }

  .contact-text a {
     font-size: 2rem;
     margin: auto;
  }

}

.contact-social {
   display: flex;
   flex-direction: column;
   margin: 2em auto auto auto;
   width: 90%;
   max-width: 1000px;
   padding: 10px;
}

.social-title {
   display: flex;
   justify-content: center;
   color: var(--color-secondary);
   font-size: 12rem;
   font-weight: 600;
   letter-spacing: 2rem;
   opacity: 0.15;
}

.social-icons {
   display: flex;
   justify-content: space-evenly;
   width: 100%;
   max-width: 1000px;
   margin-top: -6em;
   z-index: 1;
}

.social-link {
   margin: auto;
   color: var(--color-primary);
   font-size: 4rem;
   text-align: center;
   border-radius: 50%;
   height: 10rem;
   aspect-ratio: 1;
   display: flex;
   justify-content: center;
   align-items: center;
}


.social-link:hover {
   color: var(--text-light);
   background-color: var(--color-main);
}


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

	.contact-icon {
		margin: 0 0 2rem 0;
	}
	
	.contact-social {
	    width: 100%;
	}
	
	.social-title {
		font-size: 10rem;
		letter-spacing: 1rem;
	}
	
	.social-icons {
	   margin-top: -4em;
	}
	
	.social-link {
    font-size: 3rem;
	height: 6rem;
	}

}



/* FOOTER */



.footer {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vH;
   color: var(--text-dark);
}

.footer p,
.footer a {
   font-size: 1.4rem;
   margin: 0;
   font-weight: 300;
   letter-spacing: 2px;
   border: none;
}

.footer-info {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin: auto;
    background: var(--color-light);
    padding: 2rem;
    bottom: 0;
}

.footer-img {
   position: absolute;
   height: 100vH;
   width: 100%;
   background-image: url(../img/footer-img.jpg);
   background-size: cover;
   background-position: top center;
   margin: auto;
   z-index: -1;
}


/* IMPRESSUM & DATENSCHUTZ */


.btn-back {
   position: fixed;
   top: 2.25rem;
   right: 2.25rem;
   padding: 2rem;
   font-size: 2rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--text-light);
   background-color: var(--color-main);
   transition: 0.15s ease-in-out;
}

.btn-back:hover,
.btn-back:focus {
   color: var(--text-light);
   background-color: var(--color-secondary);
   transition: 0.15s ease-in-out;
}

.impressum-title {
   font-family: 'Poppins', sans-serif;
   font-size: 2rem;
   font-weight: 800;
   line-height: 3rem;
   color: var(--text-dark);
   padding: 2rem 0;
}

.impressum-headline {
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 3rem;
    color: var(--color-main);
    padding: 4rem 0 2rem 0;
    letter-spacing: 2px;
}

.datenschutz-list {
	font-size: 1.6rem;
   font-weight: 300;
   letter-spacing: 2px;
   line-height: 3rem;
   background: var(--color-dark);
   color: var(--text-light);
   padding: 1em;
}

.datenschutz-list li {
   margin-bottom: 1em;
   margin-left: 2em;
   text-indent: -1em;
}

.datenschutz-list i {
   margin-right: 1em;
}

.datenschutz-list span {
   color: var(--color-secondary);
   font-weight: 600;
}