/* ---FONTS---*/
@font-face {
    font-family: "Archivo";
    src: url("Fonts/Archivo-VariableFont_wdth\,wght.ttf") format("truetype");
}

@font-face {
    font-family: "FiraSans";
    src: url("Fonts/FiraSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Valley";
    src: url("Fonts/ValleySans-VariableFont_wght.ttf") format("truetype");
}


@font-face {
  font-family: 'KuehnFontOne';
  src: url("Fonts/sgrgV2.woff2") format("woff2");
}

@font-face {
  font-family: 'KuehnFontTwo';
  src: url("Fonts/sgxbV2.woff2") format('woff2');
}

@font-face {
  font-family: 'KuehnFontThree';
  src: url("Fonts/sgblV2.woff2") format('woff2');
}

/* ----------------------------------------------*/
/* ---COLOR VARIABLES---*/
:root {
    --background: rgb(255, 255, 255);
    --text: black;
    --headings: rgb(0, 0, 0);
    --logos: rgb(138, 29, 39);
    --logosdark: rgb(98, 20, 28);
    --divBackground: rgb(189, 191, 211);
    --borderColor: rgb(0, 0, 0);
    --navbartext: rgb(255, 255, 255);
    --borderColor: rgb(255, 245, 203);
}


/* ------------   SCROLLING       ---------------*/

html {
    margin: 0;
    overflow-x: clip;
}

section {
    scroll-margin-top: 150px;
}

/* ----------------------------------------------*/


body {
    display: flex;
    flex-direction: column;
    color: var(--background);
    margin: 0;
    font-family:"Valley", sans-serif;
    overflow-x: clip;
    font-size: larger;
}

/* ----------------------------------------------*/
/* ---HEADER ---*/

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--logos);
    margin-top: 0;
    margin-bottom: 0;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 990;
}

.logo {
    display: flex;
    flex-direction: row;
    width: fit-content;
    color: var(--logos);
    margin-top: 0;
    margin-bottom: 0;
    align-items: baseline;
    height: 100%;
    text-decoration: none;
}

#companyName-A {
    font-size: 20pt;
    margin-top: 38px;
    margin-left: 25%;
    font-family: "KuehnFontOne", sans-serif;
    color: var(--navbartext);
}

#companyName-B {
    font-size: 40pt;
    font-family: "KuehnFontOne", sans-serif;
    color: var(--navbartext);
}

.nav-bar {
    color: var(--text);
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 20px;
    display: flex;
}

.nav-bar a {
    padding: 20px;
    color: var(--navbartext);
    text-decoration: none;
    font-size: larger;

    position: relative;
    transition: color 0.3s ease;
    cursor: pointer;
}


/*---------   ANIMATION LINE EFFECT  --------------------*/

.nav-bar a::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: 10px;

    width: 0;
    height: 2px;

    background: rgb(255, 245, 203);

    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-bar a:hover::after {
    width: 70%;
}

.nav-bar a:hover::after,
.nav-bar a.active::after {
    width: 70%;
}

/*HERO AREA ---------------------------------------------*/

.hero {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: rgb(43, 50, 50);
    width: 100%;
    justify-content: center;
    align-items: center;
}

/*-------------------------------*/


.background-pic {
    width: 100%;
    height: 800px;
    object-fit: cover;
    object-position: center;
    background-repeat: no-repeat;
    transition: height 0.5s ease;
}

.content {
    position: absolute;
    display: flex;
    flex-direction: column;
    position: absolute;
    color: var(--logos);
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    background-color: rgba(255, 255, 255, 0.75);
    border: 5px solid var(--borderColor);
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.content hr{
    color: var(--logos);
}

.subtitle {
    display: flex;
}

.subtitle span {
    font-size: xx-large;
    margin: 10px 0;
    font-family: "FiraSans", sans-serif;
    font-style: normal;
    color: rgb(73, 18, 18);
}

.big-heading {
    display: flex;
    height: fit-content;
    align-items: baseline;
}

.big-heading h1 {
    display: flex;
    flex-direction: column;
}

#headline-company-name {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

#brand-prefix {
    margin-top: 0;
    margin-bottom: 0;
    font-size:52pt;
    font-family:"KuehnFontTwo", sans-serif;
}

#brand-name {
    margin-top: 0;
    margin-bottom: 0;
    font-size:72pt;
    font-family:"KuehnFontTwo", sans-serif;
}

#brand-suffix {
    font-size: xx-large;
}

#brand-divider {
    width: 25%;

    border-top: 2px solid;
}

.address {
    display: flex;
}

.address span {
    font-size: xx-large;
    margin: 10px 0;
    font-family: "FiraSans", sans-serif;
    font-style: normal;
    color: rgb(73, 18, 18);
}

/* TEXT AREA   ------------------------------------------*/

.welcome-text {
    display: flex;
    flex-direction: column;
    color: var(--text);
    margin-top: 5%;
    margin-right: 20px;
    margin-left: 20px;
}

.welcome-text a {
    color: black;
}

.heading {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
}


.heading-divider {
    width: 25%;
    color: rgb(138, 29, 39);
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--borderColor), transparent);
}

.welcome-text p {
    color: var(--text);
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 2%;
    margin-top: 2%;
    text-align: center;
}

/*DATA PROTECTION*/
.welcome-text .data-protection1 {
    margin-bottom: 0;
    border-radius: 12px;
    padding: 20px;
    background-color: rgb(249, 252, 255);
    text-align: left;
}

/*MARRIAGE RINGS*/
.ringlist {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* oder ganz weglassen, ist Standard */
    width: fit-content;
    margin: 20px auto 20px auto;
}

.ringlist li {
    text-align: left;
}

.welcome-text h3 {
    color: var(--text);
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
}

/*SERVICE*/
.service-list {
    align-items: center;
    justify-content: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 8px;
    margin-left: 60px;
    margin-right: 60px;
}

.service-list li {
    text-align: left;
    width: 100%;
    max-width: 600px;
    padding-bottom: 20px;
}

/*--------    CONTENT ROW               -----------------*/

.content-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    max-width: 1100px;
    margin: 40px auto 0;
}

#wedding-content {
    flex-direction: row-reverse;
}

.content-text {
    flex: 1;
    background-color: rgb(250, 250, 250);
    border: 2px solid var(--borderColor);
    border-radius: 20px;
    padding: 10px 0;
}

#wedding-picture {
    flex: 1;
    position: relative;
    border-radius: 20px;
    box-shadow: 30px -10px 10px 5px rgb(0 0 0 / 12%);
}

#wedding-picture img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    
    transition: transform 0.4s ease;
}

#wedding-picture img:hover {
    transform: scale(1.03);
}

#jewelry-picture {
    flex: 1;
    position: relative;
    border-radius: 20px;
    box-shadow: 30px -10px 10px 5px rgb(0 0 0 / 12%);
}

#jewelry-picture img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    
    transition: transform 0.4s ease;
}

#jewelry-picture img:hover {
    transform: scale(1.03);
}

#clocks-mechanism-picture {
    flex: 1;
    position: relative;
    border-radius: 20px;
    box-shadow: 30px -10px 10px 5px rgb(0 0 0 / 12%);
}


#clocks-mechanism-picture img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    
    transition: transform 0.4s ease;
}

#clocks-mechanism-picture img:hover {
    transform: scale(1.03);
}


/*RED LINK AREA------------------------------------------*/

.red-links {
    display: flex;
    background-color: var(--logos);
    justify-content: space-evenly;
}

.red-links hr {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
}

/*-------------------------------*/

.icon {
    color: white;
    font-size: 40px;
}

.icon2 {
    color: var(--logos);
    font-size: 30px;
}

.clocks {
    transition: transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2% 2% 2% 10%;
}

.clocks p {
    text-align: center;
    margin: 0 auto;
}

.clocks:hover {
    transform: translateY(-5px);
}

.jewelry {
    transition: transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2% 2% 2% 2%;
}

.jewelry p {
    text-align: center;
    margin: 0 auto;
}

.jewelry:hover {
    transform: translateY(-5px);
}

.marriage-rings {
    transition: transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2% 2% 2% 2%;
}

.marriage-rings p {
    text-align: center;
    margin: 0 auto;
}

.marriage-rings:hover {
    transform: translateY(-5px);
}

.service {
    transition: transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2% 10% 2% 2%;
}

.service p {
    text-align: center;
    margin: 0 auto;
}

.service:hover {
    transform: translateY(-5px);
}

/*INFORMATION AREA  LEFT  -------------------------------*/

.information {
    color: var(--text);
    display: flex;
    justify-content: space-evenly;
    margin: 5% 5% 5% 5%;
    background-color: rgb(249, 248, 246);
    border-radius: 10px;
    padding-bottom: 15px;
    border: 2px solid var(--borderColor);
}

/*-------------------------------*/

.opening-hours {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.opening-headline {
    display: flex;
    align-items: center;
    font-size: medium;
}

.opening-timetable {
    display: flex;
    flex-direction: column;
    border-collapse: collapse;  
}

.opening-timetable th,
.opening-timetable td {
    padding: 6px 20px 6px 0;    
    vertical-align: top;         
    text-align: left;
}

.opening-timetable td:first-child {
    font-weight: bold;            
}


/*INFORMATION AREA  RIGHT  ------------------------------*/


.contact-info {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

/*-------------------------------*/

.contact-headline {
    display: flex;
    align-items: center;
    font-size: medium;
}

.contact-address {
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.contact-address a {
    margin: 0;
    color: black;
}

.address-line1 {
    margin-bottom: 5px;
    margin-top: 0;
}

.address-line2 {
    margin: 0;
}

.address-line3 {
    margin: 0;
}

.address-line4 {
    margin-bottom: 10px;
}

#baseline {
    width: 75%;
}


/*NAVIGATION BAR BOTTOM   -------------------------------*/

.navigation-bottom {
    display: flex;
    justify-content: center;
}

.navigation-bottom a {
    padding: 20px;
    text-decoration: none;
    color: var(--text);
    font-size: larger;
    transition: scale 0.15s ease;
}

.navigation-bottom a:hover {
    color: var(--logos);
    scale: 1.05;
}

/*-MOBILE HAMBURGER MENU  -------------------------------*/
/*-------------------------------------------------------*/

.mobile-menu {
    display: none;
    position: relative;
    right: 50px;
}

.mobile-menu summary {
    list-style: none;
    cursor: pointer;
    font-size: 30px;
    color: var(--background);
}

.mobile-menu-content {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 2px solid var(--logos);
    padding: 20px;

    --menu-transition-duration: 0.3s;
    
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform var(--menu-transition-duration) ease,
                opacity var(--menu-transition-duration) ease;
}

.mobile-menu[open] .mobile-menu-content {
    transform: scale(1);
    opacity: 1;
}


.mobile-menu-content a {
    padding: 10px 20px;
    color: var(--text);
    text-decoration: none;
}

/*-LIGHTBOX PICTURES      -------------------------------*/
/*-------------------------------------------------------*/


/* Lightbox Background-Overlay */
.lightbox {
    display: none;              /* Invisible by default */
    position: fixed;            /* stays in place when scrolling */
    z-index: 1000;              /* layer above all other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);  /* black, 85% alpha channel */
    justify-content: center;
    align-items: center;
}

/* Added per Javascript when lightbox opened */
.lightbox.active {
    display: flex;
}

/* The big picture of the lightbox */
.lightbox-content {
    max-width: 90%;
    max-height: 85vh;           /* max. 85% of screen height */
    border-radius: 20px;
}

/* X Symbol for close function */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* On hover: Shows that pics are clickable */
.lightbox-trigger {
    cursor: pointer;
}

/*-----------------MEDIA QUERIES      -------------------*/

/*Mobile Menu appears---*/

@media (max-width: 1240px) {

    .nav-bar {
        display: none;
    }

    .mobile-menu {
        display: block;
    }
}    

/*Resize Red-Links---*/

@media (max-width: 1160px) {

    .clocks {
        margin: 2%;
    }

    .service {
        margin: 2%;
    }
}

/* PAGEBREAK- PICTURES IN COLUMN---*/
@media (max-width: 1020px) {
    .content-row {
        flex-direction: column-reverse;
    }

    #wedding-content {
        flex-direction: column-reverse;
    }

    #wedding-picture {
        width: 80%;
    }
    

    #jewelry-picture {
        width: 80%;
    }

    #clocks-mechanism-picture {
        width: 80%;
    }
}


/*Pagebreak Red-Links---*/
@media (max-width: 900px) {

    .red-links {
        display: flex;
        flex-wrap: wrap;
    }

    .red-links a {
        flex: 0 0 50%;
        width: 50%;
        box-sizing: border-box;
        margin: 0;
        padding: 20px 0;
    }

    .red-links hr {
        display: none;
    }

}


/*Hero Background Picture scaling---*/
@media (max-width: 820px) {

    .background-pic {
        height: 400px;
        object-fit: cover;
        object-position: center;
    }


    .subtitle {
        width: 90%;
        justify-content: center;
        text-align: center;
    }

    .service-list {
        grid-template-columns: 1fr;
    }
    
    .address span{
        font-size: larger;
    }
}
   

@media (max-width: 750px) {
.information {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .opening-hours,
    .contact-info {
        margin-bottom: 30px;
    }

    .opening-headline,
    .contact-headline {
        justify-content: center;
    }

    .subtitle span{
        font-size: larger;
    }

    #brand-prefix {
        font-size:32pt;
    }

    #brand-name {
        font-size:52pt;
    }

    .address {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}


@media (max-width: 630px) {

    .heading {
        font-size: larger;
    }

    #brand-suffix {
        font-size: x-large;
    }

    
}


/*Hero Text area scaling*/
@media (max-width: 580px) {

    #brand-prefix {
        font-size: 35pt;
    }

    #brand-name {
        font-size: 48pt;
    }

}


/*Pagebreak to one line*/
@media (max-width: 460px) {

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

    .red-links a {
        width: 100%;
        flex: none;
        padding: 20px 0;
    }

    #companyName-A {
        font-size: 15pt;
        margin-left: 10%;
        margin-bottom: 24px;
    }

    #companyName-B {
        font-size: 30pt;
    }

    .heading {
        font-size: larger;
    }

    #brand-suffix {
        font-size: large;
    }

}


/*Company Name downscaling*/
/*NavBar bottom appears in column*/
@media (max-width: 400px) {

    #brand-prefix {
        font-size: 25pt;
    }

    #brand-name {
        font-size: 38pt;
    }

    .heading {
        font-size: larger;
        text-align: center;
    }

    .navigation-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--logos);
        border-radius: 10px;
        border: 2px solid white;
    }

    .navigation-bottom a {
        color: white;
    }

    #brand-suffix {
        font-size: medium;
    }
}