:root{
    /*---------------------------------- colors ----------------------------------*/
    --bg-Color: #CFD5CE;
    --font-color: #fff;
    --nav-color: #A1ACA1;

    /*---------------------------------- Fonts ----------------------------------*/
    --font: "Karla", sans-serif;
    --fontTwo:"adore-you-slanted", sans-serif;

    /*---------------------------------- font weight ----------------------------------*/
    --font-weight-extrabold: 800;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --font-weight-light: 300;
    --font-weight-semilight: 200;

     /*---------------------------------- font size ----------------------------------*/
     --font-size-p4: 5px;
     --font-size-p3: 8px;
     --font-size-p2: 12px;
     --font-size-p1: 15px;
     --font-size-a: 20px;
     --font-size-p: 25px;
     --font-size-h1: 64px;
     --font-size-h2: 45px;
     --font-size-h3: 36px; 
}

/*---------------------------------- pre-sets ----------------------------------*/

*{
    font-family: var(--font);
    font-style: italic;
    margin: 0;
    padding: 0;
    color: var(--font-color);
}

body{
    background-color: var(--bg-Color);
}

h1{
    font-size: var(--font-size-h1);
    margin-top: 12vw;
    display: flex;
    justify-content: center;
    text-align: center;
}

h2{
    font-size: var(--font-size-h2);
}

h3{
    font-size: var(--font-size-h3);
}

p{
    font-size: var(--font-size-p);
}

.p1{
    font-size: var(--font-size-p1);
}

a{
    font-size: var(--font-size-a);
}

.bold{
    font-weight: var(--font-weight-extrabold);
}

/*---------------------------------- header ----------------------------------*/

nav{
    background-color: var(--nav-color);
    color: var(--font-color);
    padding-bottom: 25px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.navigation{
    display: flex;
    justify-content: space-around;
    margin: 0px 25vw 1vh 25vw;
    list-style: none;
}

a, li{
    text-decoration: none;
}

.andereSchrift{
    font-family: var(--fontTwo);
    font-weight: var(--font-weight-regular);
}

.logo{
    display: flex;
    justify-content: center;
}

.logo-image{
    display: flex;
    justify-content: center;
    max-width: 75vw;
}

.header-image{
    height: 50vw;
    margin-bottom: 100px;
}

.navigation > li {
  position: relative;
}

.navigation a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 8px 12px;
  display: inline-block;
  transition: background-color 0.3s;
  border-radius: 6px;
}

.navigation > li > a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #A1ACA1;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 10px 0;
  display: none;
  flex-direction: column;
  min-width: 180px;
  z-index: 1000;
  list-style: none;
}

.dropdown-menu li a {
  padding: 10px 15px;
  color: white;
  display: block;
  transition: background-color 0.3s;
}

.dropdown-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dropdown:hover .dropdown-menu{
    display: flex;
}

.burger-menu {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    position: absolute; /* Positioniere es frei im Header */
    top: 25px;
    right: 25px;
}

.burger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: var(--font-color);
    transition: all 0.3s ease-in-out;
}

/* Versteckt das Dropdown-Menü, wenn es nicht aktiv ist */
.navigation.active .dropdown-menu {
    display: flex; /* wird im mobilen Menü angezeigt, wenn es aktiv ist */
}

/* Mobile Menü-Stile */
.navigation {
    list-style: none;
}


/*---------------------------------- Pop up ----------------------------------*/

.popup{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--nav-color);
    padding: 3vw;
    align-items: center;
    flex-direction: column;
    text-align: center;
    opacity: .8;
    border: 2px solid;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: 1000;
    width: 80vw;
    max-width: 400px;
    display: none;
}

.popup h1{
    margin: 0;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: var(--font-size-p);
    cursor: pointer;
}

/*---------------------------------- Slide show ----------------------------------*/

.slideshow-container {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50%;
}

/*---------------------------------- main index ----------------------------------*/

.bilder-nav, .work-bilder-nav{
    display: grid;
    grid-template-columns: repeat(9,10vw);
    column-gap: 2vw;
    row-gap: 2vw;
    margin: 10vw 50px;
    justify-content: center;
}

.bilder-nav{
    grid-template-rows: 30vh 30vh;
}

.work-bilder-nav{
    grid-template-rows: 30vh 30vh 30vh;
}

.image{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(30%);
    z-index: 1;
    transition: filter 0.5s;
}

.bild1 p, .bild2 p, .bild3 p, .bild4 p{
    transition: 3s;
}

.bild1{
    background:no-repeat center/cover url(images/aboutme/913A0296-2.jpeg);
}

.bild2{
    background: no-repeat center/cover url(images/Works/LagerArtikel/M-R96-MokumeGane-Gelbgold_Silber_Palladium-Skapolith.jpeg);
}

.bild3{
    background: no-repeat center/cover url(images/MokumeGane/MokumeGane-headerImage.jpg);
}

.bild4{
    background: no-repeat center/cover url(images/contact/DSC_1477.jpeg);
}

.nav1, .work-nav1{
    grid-column: 2/5;
}

.nav2, .work-nav2{
    grid-column: 5/9;
}

.nav3, .work-nav3{
    grid-column: 2/6;
}

.nav4, .work-nav4{
    grid-column: 6/9;
}

.work-nav5{
    grid-column: 2/9;
}

.nav1, .nav2, .nav3, .nav4, .work-nav1, .work-nav2, .work-nav3, .work-nav4, .work-nav5 {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-container {
    position: relative;
    z-index: 2;
    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    filter: brightness(80%);
}

.p1 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    text-align: center;
    margin-top: 20px;
    position: relative;
    max-width: 40ch;
}

.uebermich-header-image{
    background: no-repeat center 50%/cover url(images/aboutme/913A0296-2.jpeg);
}

.work-header-image{
    background: no-repeat center 50%/cover url(images/Works/Lagerartikel/M-R96-MokumeGane-Gelbgold_Silber_Palladium-Skapolith.jpeg)
}

.mokumeGane-header-image{
    background: no-repeat center 50%/cover url(images/MokumeGane/MokumeGane-headerImage.jpg)
}

.contact-header-image{
    background: no-repeat center 50%/cover url(images/contact/DSC_1477.jpeg)
}

.works-auftragsarbeiten-header-image{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A6-Mauvegold_Weissgold-Brillant.jpeg);
}

.works-ausAltWirdNeu-header-image{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/IMG_4283.jpeg);
    filter: brightness(50%);
}

.works-lagerartikel-header-image{
    background: no-repeat center/cover url(images/Works/Lagerartikel/A161-Rotgold-Cordierit-Brillant.jpeg);
}

.works-partnerschaft-header-image{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E11-Palladium_Champagnergold_Silber.jpeg);
}

.weitereDienstleistungen-header-image{
    background: no-repeat center/cover url(images/Works/WeitereDienstleistung/WeitereDienstleistungen.jpeg);
}

/*---------------------------------- main über mich ----------------------------------*/

main h3, .unterDem-titel{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.uebermich-main {
    display: grid;
    grid-template-areas: 
        "BildWer TextWer"
        "TextWo BildWo"
        "BildWarum TextWarum";
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    margin: 8vw;
    align-items: center;
}

.image-uebermich {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
}

.image-uebermich-wer {
    grid-area: BildWer;
    background-image: url("images/aboutme/Img1580-8.jpeg");
    
}

.image-uebermich-wo {
    grid-area: BildWo;
    background-image: url("images/contact/DSC_1477.jpeg");
    
}

.image-uebermich-warum {
    grid-area: BildWarum;
    background-image: url("images/aboutme/WarumFoto.jpg");
    filter: brightness(80%);
}

/* Texte */
.wer-text {
    grid-area: TextWer;
    text-align: center;
}

.wo-text {
    grid-area: TextWo;
    text-align: center;
}

.warum-text {
    grid-area: TextWarum;
    text-align: center;
}

/*---------------------------------- main index ----------------------------------*/

.work-nav1-bild{
    background:no-repeat center/cover url(images/Works/Auftragsarbeiten/A1-Platin-nat.col.-Diamant.jpeg);
}

.work-nav2-bild{
    background:no-repeat center/cover url(images/Works/AusAltWirdNeu/IMG_4283.jpeg);
}

.work-nav3-bild{
    background:no-repeat center/cover url(images/Works/Lagerartikel/A161-Rotgold-Cordierit-Brillant.jpeg);
}

.work-nav4-bild{
    background:no-repeat center/cover url(images/Works/Partnerschaft/E11-Palladium_Champagnergold_Silber.jpeg);
}

.work-nav5-bild{
    background:no-repeat center/cover url(images/Works/WeitereDienstleistung/WeitereDienstleistungen.jpeg);
}

/*---------------------------------- hover Effect ----------------------------------*/

.nav1:hover .image,
.nav2:hover .image,
.nav3:hover .image,
.nav4:hover .image, 
.work-nav1:hover .image,
.work-nav2:hover .image,
.work-nav3:hover .image,
.work-nav4:hover .image,
.work-nav5:hover .image {
    filter: brightness(60%);
}

.nav1:hover .p1,
.nav2:hover .p1,
.nav3:hover .p1,
.nav4:hover .p1,
.work-nav1:hover .p1,
.work-nav2:hover .p1,
.work-nav3:hover .p1,
.work-nav4:hover .p1,
.work-nav5:hover .p1 {
    opacity: 1;
    transform: translateY(0); 
}

.nav1:hover .text-container,
.nav2:hover .text-container,
.nav3:hover .text-container,
.nav4:hover .text-container, 
.work-nav1:hover .text-container,
.work-nav2:hover .text-container,
.work-nav3:hover .text-container,
.work-nav4:hover .text-container,
.work-nav5:hover .text-container {
    filter: brightness(100%);
}

.auftragsarbeiten-galerie-bilder:hover .bild-hover-text {
    bottom: 0;
}

.ausAltWirdNeu-galerie-bilder:hover .bild-hover-text {
    bottom: 0;
}

.lagerartikel-galerie-bilder:hover .bild-hover-text {
    bottom: 0;
}

.partnerschaft-galerie-bilder:hover .bild-hover-text {
    bottom: 0;
}

.mokumeGane-galerie-bilder:hover .bild-hover-text {
    bottom: 0;
}

/*---------------------------------- Galerien ----------------------------------*/

.unterDem-titel a{
    text-align: center;
}

.inspiration{
    margin-top: 18vh;
    text-align: center;
}

.galerie{
    margin: 2vh 2vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 5vw;
}

.auftragsarbeiten-galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(3, auto); 
    gap: 2vw; 
}

.ausAltWirdNeu-galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(3, auto); 
    gap: 2vw; 
}

.lagerartikel-galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(5, auto); 
    gap: 2vw; 
}

.partnerschaft-galerie{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(5, auto); 
    gap: 2vw;
}

.mokumeGane-galerie{
    margin: 2vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(2, auto); 
    gap: 2vw;
}

.a1{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A1-Platin-nat.col.-Diamant.jpeg);
}

.a2{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A2-Gelbgold-Saphir.jpeg);
}

.a3{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A3-Weissgold-Saphir.jpeg);
}

.a4{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A4-Palladium-Brillanten.jpeg);
}

.a5{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A5-Gelbgold-Tsavorith.jpeg);
}

.a6{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A6-Mauvegold_Weissgold-Brillant.jpeg);
}

.a7{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A7-Weissgold-Brillanten.jpeg);
}

.a8{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A8-MokumeGane-Rot_Gelbgold_Silber_Palladium_Brillant.jpeg);
}

.a9{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A9.-Palladium-Saphir.jpeg);
}

.a10{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A10-Gelb_Weissgold-Briallanten.jpeg);
}

.a11{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A11-Weissgold-Brillanten.jpeg);
}

.a12{
    background: no-repeat center/cover url(images/Works/Auftragsarbeiten/A12Silber-Ahornholz.jpeg);
}

/*---------- Aus alt wird neu ----------*/
.n1{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N1-Weissgold-Saphir.jpeg);
}

.n2{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N2-Weissgold-Brillanten.jpeg);
}

.n3{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N3-Gelbgold-nat.col.Brillanten.jpeg);
}

.n4{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N4-Weiss-Rotgold.jpeg);
}

.n5{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N5-Weiss_Gelbgold.jpeg);
}

.n6{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N6-Gelbgold-nat.col.Brillant.jpeg);
}

.n7{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N7-Weissgold-Saphir.jpeg);
}

.n8{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N8-Gelbgold.jpeg);
}

.n9{
    background: no-repeat center/cover url(images/Works/AusAltWirdNeu/N9-Weissgold-Brillant.jpeg);
}

/*---------- Lagerartikel ----------*/

.a161{
    background: no-repeat center/cover url(images/Works/Lagerartikel/A161-Rotgold-Cordierit-Brillant.jpeg)
}

.a166{
    background: no-repeat center/cover url(images/Works/Lagerartikel/A166-Rot_Weissgold.jpeg)
}

.a170{
    background: no-repeat center/cover url(images/Works/Lagerartikel/A170_O92-Gelbgold.jpeg)
}

.br03{
    background: no-repeat center/cover url(images/Works/Lagerartikel/BR03-Silber_Gelbgold.jpeg)
}

.br04{
    background: no-repeat center/cover url(images/Works/Lagerartikel/BR04-Silber-geschwärzt.jpeg)
}

.kb-015{
    background: no-repeat center/cover url(images/Works/Lagerartikel/KB-O15-Silber_Feingold.jpeg)
}

.kbset{
    background: no-repeat center/cover url(images/Works/Lagerartikel/KBSET03-Silber_Feingold_Grüngold.jpeg)
}

.mbr01{
    background: no-repeat center/cover url(images/Works/Lagerartikel/M-BR01-MokumeGane-traditionell.jpeg)
}

.mo15{
    background: no-repeat center/cover url(images/Works/Lagerartikel/M-O15-MokumeGane-Grüngold_Palladium.jpeg)
}

.m-r87{
    background: no-repeat center/cover url(images/Works/Lagerartikel/M-R87-MokumeGane-Silber_Platin_Palladium-Brillant.jpeg)
}

.m-r96{
    background: no-repeat center/cover url(images/Works/Lagerartikel/M-R96-MokumeGane-Gelbgold_Silber_Palladium-Skapolith.jpeg)
}

.m-r97{
    background: no-repeat center/cover url(images/Works/Lagerartikel/M-R97-MokumeGane-Gelbgold_Palladium_Silber-nat.col.Diamant.jpeg)
}

.s-a159{
    background: no-repeat center/cover url(images/Works/Lagerartikel/S-A159-Weissgold-Brillant.jpeg)
}

.s-o90{
    background: no-repeat center/cover url(images/Works/Lagerartikel/S-O90-Gelb-_Rot-_Weissgol.jpeg)
}

.s-r203{
    background: no-repeat center/cover url(images/Works/Lagerartikel/S-R203-Gelb-_Weissgold-Spinell.jpeg)
}

.s-r204{
    background: no-repeat center/cover url(images/Works/Lagerartikel/S-R204-Gelb-_Weissgold-Saphire.jpeg)
}

.s-r205{
    background: no-repeat center/cover url(images/Works/Lagerartikel/S-R205-Silber_Gelbgold-Tsavorith.jpeg)
}

/*---------- partnerschaft ----------*/

.e1{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E1-Mauvegold-Brillanten.jpeg);
}

.e2{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E2-Silber_Mauvgold_Palladium.jpeg);
}

.e3{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E3-Mauvegold_Champagnergold.jpeg);
}

.e4{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E4-Weissgold-PyritgesteinCH.jpeg);
}

.e5{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E5-Farbverlauf-Gelbgold-Weissgold.jpg);
}

.e6{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E6-Gelbgold_Weissgold-Brillant.jpeg);
}

.e7{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E7-Weissgold.jpeg);
}

.e8{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E8-Gelbgold_Palladium_Silber.jpeg);
}

.e9{
   background: no-repeat center/cover url(images/Works/Partnerschaft/E9-Gelb-_Rotgold_Palladium_Silber-bzw.Weissgold-Gasterngranit.jpeg);
}

.e10{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E10-Gelbgold.jpeg);
}

.e11{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E11-Palladium_Champagnergold_Silber.jpeg);
}

.e12{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E12-Weissgold_Rotgold.jpeg);
}

.e13{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E13-Gelbgold_Weissgold-Brillanten.jpeg);
}

.e14{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E14-Mauvegold_Palladium_Silber_Gelbgold.jpeg);
}

.e15{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E15-Gelbgold_Weissgold.jpeg);
}

.e16{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E16-Gelbgold.jpeg);
}

.e17{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E17-Weissgold-Habkergranit.jpeg);
}

.e18{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E18-Palladium_Gelbgold.jpeg);
}

.e19{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E19-Weissgold-Pyritgestein-Habkergranit.jpeg);
}

.e20{
    background: no-repeat center/cover url(images/Works/Partnerschaft/E20-Mauvegold-Brillant.jpeg);
}

/*---------- partnerschaft ----------*/

.MO1{
    background: no-repeat center/cover url(images/Works/MokumeGane/MO1-Dose11-MokumeGane-traditionell.jpeg);
}

.MO2{
    background: no-repeat center/cover url(images/Works/MokumeGane/MO2-MokumeGane-modern-Palladium_Gelbgold_Silber.jpeg);
}

.MO3{
    background: no-repeat center/cover url(images/Works/MokumeGane/MO3-MokumeGane-modern-Palladium_Silber-Spinell.jpeg);
}

.MO4{
    background: no-repeat center/cover url(images/Works/MokumeGane/MO4-Dose14-MokumeGane-traditionell.jpeg);
}

.MO5{
    background: no-repeat center/cover url(images/Works/MokumeGane/MO5-MokumeGane-modern-Mosaik-Palladium_Silber_Mauvegold.jpeg);
}

.MO6{
    background: no-repeat center/cover url(images/Works/MokumeGane/MO6-MokumeGane-modern-Silber_Gelbgold_Palladium-Brillant.jpeg);
}

.unterDem-titel p{
    width: 75ch;
}

/*------------------------- schwarzer Balken mit Text -------------------------*/

.auftragsarbeiten-galerie-bilder, .ausAltWirdNeu-galerie-bilder, .lagerartikel-galerie-bilder, .partnerschaft-galerie-bilder, .mokumeGane-galerie-bilder{
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.auftragsarbeiten-galerie-bilder, .ausAltWirdNeu-galerie-bilder, .lagerartikel-galerie-bilder, .partnerschaft-galerie-bilder, .mokumeGane-galerie-bilder{
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.bild-hover-text {
    position: absolute;
    bottom: -100%;
    left: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    transition: bottom 0.4s ease;
    pointer-events: none;
    width: 94%;
}

/*---------------------------------- Galerie grosse Bilder ----------------------------------*/

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(161, 172, 161, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    max-height: 70vh;
    margin-top: 50px;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    aspect-ratio: 3/2;
}

.lightbox-arrow {
    background: none;
    border: none;
    font-size: 50px;
    color: white;
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s;
}

.lightbox-arrow:hover {
    color: #000;
}

.lightbox-arrow.left {
    position: absolute;
    left: -5.5vw;
}

.lightbox-arrow.right {
    position: absolute;
    right: -5.5vw;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}

.close:hover {
    color: black;
}

.lightbox-thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding-bottom: 30px;
}

.lightbox-thumbnails img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    border-radius: 5px;
    transition: opacity 0.3s, transform 0.3s;
}

.lightbox-thumbnails img.active,
.lightbox-thumbnails img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/*---------------------------------- Weitere Dienstleistungen ----------------------------------*/

.weitereDienstleistungen-unterDem-titel, .mokumeGane-unterDem-titel{
    margin: 5vh auto;
    text-align: center;
    max-width: 75ch;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

.weitereDienstleistungen-unterDem-titel{
    margin-bottom: 0;
}

.weitereDienstleistungen-download-button{
        display: flex;
    justify-content: center;
    margin-block: 0 10vh;
}

.weitereDienstleistungen-download-button-inhalt-image{
    max-width: 24px;
}

.weitereDienstleistungen-download-button-inhalt{
    display: flex;
    padding: 10px 15px;
    background-color: var(--nav-color);
    align-items: center;
}

.workshop-text{
    font-size: var(--font-size-p1);
}

/*---------------------------------- footer ----------------------------------*/

.contact-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 20vh 2vw;
    grid-template-rows: 1fr 2fr
}

.contact-padding{
    padding: 15px;
}

.contact-grid h2{
    margin-bottom: 2vh;
}

.contact-information .footer-rest-SM{
    column-gap: 0;
    margin: 0;
}

.contact-information{
    display: flex;
    flex-direction: column;
}

.emailAdress{
    margin-top: 2vh;
}

iframe{
    width: 100%;
}

.maps{
    grid-column: 1/4;
}

/*---------------------------------- footer ----------------------------------*/

footer{
    background-color: var(--nav-color);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 55px;
}

.footer-oeffnungszeiten{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.footer-rest{
    display: grid;
    grid-template-rows: 2fr 1fr;
}

.footer-rest-rest{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}

.underline{
    text-decoration: underline;
    font-weight: var(--font-weight-semilight);
}

.footer-rest-SM{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1vw;
    margin: 20px 30px;
    height: 100%;
}

.footer-insta{
    background: no-repeat top url(images/footer/insta.png);
}

.footer-youtube{
    background: no-repeat top url(images/footer/youtube.png);
}

.footer-whatsapp{
    background: no-repeat top url(images/footer/whatsapp.png);
}

.footer-facebook{
    background: no-repeat top url(images/footer/facebook.png);
    margin-top: 5px;
    width: 81%;
}

.footer-facebook, .footer-insta, .footer-whatsapp, .footer-youtube{
    background-size: contain;
}

/*--------------------------------------------------- Media query ---------------------------------------------------*/

@media (hover: none) {
    .bild-hover-text {
        bottom: 0;
    }
}

/*----------------------- Burgermenu -----------------------*/

@media (max-width: 1065px) {
    .navigation a{
        font-size: var(--font-size-p1);
    }

    h1{
    font-size: var(--font-size-h2);
    }

    h2{
        font-size: var(--font-size-h3);
    }

    h3{
        font-size: var(--font-size-p);
    }

    p{
        font-size: var(--font-size-a);
    }

    a{
        font-size: var(--font-size-p1);
    }

    .p1{
        font-size: var(--font-size-p2);
    }

    .uebermich-main{
        grid-template-areas: 
        "BildWer"
        "TextWer"
        "BildWo"
        "TextWo"
        "BildWarum"
        "TextWarum"
        ;
        grid-template-columns: 1fr;
    }

    .image-uebermich{
        aspect-ratio: 3/2;
        width: 80vw;
        height: auto;
    }
}

@media (max-width: 951px) {
    .navigation a{
        font-size: var(--font-size-p2);
    }
}
@media (max-width: 817px) {
    .mokumeGane-unterDem-titel{
        max-width: 50ch;
    }
    /* .navigation a{
        font-size: var(--font-size-p3);
    } */

    h1{
    font-size: var(--font-size-h3);
    }

    h2{
        font-size: var(--font-size-p);
    }

    h3{
        font-size: var(--font-size-a);
    }

    p{
        font-size: var(--font-size-p1);
    }

    a{
        font-size: var(--font-size-p2);
    }

    .p1{
        font-size: var(--font-size-p3);
    }

    .galerie{
        grid-template-columns: 1fr 1fr;
    }
}
/*---------------------------------------- ab hier werden die bild navigation nur noch von oben nach unten angezeigt ----------------------------------------*/
@media (max-width: 600px) {
    footer{
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr;
    }

    h1{
    font-size: var(--font-size-p);
    }

    h2{
        font-size: var(--font-size-a);
    }

    h3{
        font-size: var(--font-size-p1);
    }

    p{
        font-size: var(--font-size-p2);
    }

    a{
        font-size: var(--font-size-p3);
    }

    .p1{
        font-size: var(--font-size-p4);
    }

    .work-bilder-nav, .bilder-nav {
        grid-template-columns: 1fr;
    }

    .work-bilder-nav{
        grid-template-rows: 20vh 20vh 20vh 20vh 20vh;
    }

    .bilder-nav{
        grid-template-rows: 20vh 20vh 20vh 20vh;
    }

    .work-nav1, .nav1,
    .work-nav2, .nav2,
    .work-nav3, .nav3,
    .work-nav4, .nav4,
    .work-nav5{
        grid-column: 1;
    }

    .burger-menu {
        display: flex;
        z-index: 100;
    }

    /* Versteckt die Navigationslinks standardmäßig */
    .navigation {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: var(--nav-color);
        position: absolute;
        top: 80px; /* Anpassen, damit es unter dem Header ist */
        left: 0;
        z-index: 99;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 20px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    /* Zeigt die Navigationslinks an, wenn die Klasse 'active' gesetzt ist */
    .navigation.active {
        display: flex;
    }
    
    .navigation li {
        margin: 10px 0;
    }
    
    .navigation li a {
        display: block;
        padding: 10px 0;
    }
    
    /* Stile für das Dropdown-Menü im mobilen Modus */
    .dropdown-menu {
        position: relative;
        box-shadow: none;
        padding: 0;
    }

    .dropdown:hover .dropdown-menu {
        display: none; /* Versteckt es im mobilen Modus */
    }

    /* Stile für den Burger-Button im aktiven Zustand (für die Animation) */
    .burger-menu.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .burger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }

    .burger-menu.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}

@media (max-width: 400px) {
    

    h1{
        font-size: var(--font-size-h3);
    }

    h2{
        font-size: var(--font-size-p);
    }

    h3{
        font-size: var(--font-size-p1);
    }

    p{
        font-size: var(--font-size-p2);
    }

    a{
        font-size: var(--font-size-p3);
    }

    .p1{
        font-size: var(--font-size-p3);
    }

    .galerie{
        grid-template-columns: 1fr;
    }
}