/* ******************* */
/* **** Schriften **** */
/* ******************* */
@font-face {
    font-family: "lato-nav";
    src: url("../assets/fonts/lato-regular.ttf");
}

@font-face {
    font-family: "playfair";
    src: url("../assets/fonts/playfair-display-variable-font.ttf");
}

@font-face {
    font-family: "inter-text-regular";
    src: url("../assets/fonts/inter-regular.ttf");
}

@font-face {
    font-family: "inter-text-bold";
    src: url("../assets/fonts/inter-bold.ttf");
}

@font-face {
    font-family: "ephesis-regular";
    src: url("../assets/fonts/ephesis-regular.ttf");
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++ Reset all browser defined CSS settings ++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
} */

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}


/* ********************* */
/* **** Allgemeines **** */
/* ********************* */

body {
    font-size: 1.3rem;
    font-family: "inter-text-regular";
    display: flex;
    justify-content: center;

    background-image: url("../assets/images/hintergrund-haare.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page {
    background-color: white;
}

@media (min-width: 1920px) {
    .page {
        min-width: 1920px;
    }
}

.inner_content {
    max-width: 70rem;
    color: #1a1a1a;
    padding-left: 6.5rem;
    padding-right: 1rem;
}

h1, h2 {
    font-family: "playfair";
    font-size: 44px;
    letter-spacing: 1px;
    color: #202d52;
    padding: 0 0 0.3rem 6.5rem;
}

.bold {
    font-family: "inter-text-bold";
    letter-spacing: 0.08em;
}

main {
    width: 100%;
}

article {
    margin-bottom: 2.5rem;
}

/* ******************* */
/* **** Kopfzeile **** */
/* ******************* */
header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.logo {
    width: 120px;
    height: auto;
    margin-left: 5px;
    margin-top: 10px;
}


/* ++++++++++++++++++++ */
/* ++++ Navigation ++++ */
/* ++++++++++++++++++++ */
nav {
    display: flex;
    margin-left: 40px;
    margin-top: 10px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav ul li {
    position: relative;
    padding: 5px;
}

nav ul li:hover {
    background: #C8BEB6;
    border-radius: 8px;
}

/* Untermenü standardmäßig verstecken */
.untermenue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffff;
    list-style: none;
    padding: 2%;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Unterpunkte */
.untermenue li {
    white-space: nowrap;
}

/* Unterpunke Hovereffekt */
.untermenue li:hover {
    background: #C8BEB6;
    border-radius: 8px;
}

/* Dropdown anzeigen */
.has-submenu:hover .untermenue {
    display: flex;
    z-index: 100;
}

nav a {
    font-family: "lato-nav";
    text-decoration: none;
    color: #1a1a1a;
    padding: 5px 15px;
}


/* ++++++++++++++++ */
/* ++++ Banner ++++ */
/* ++++++++++++++++ */
.banner-rotator {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    margin-top: 20px;
}

.banner-rotator img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fade 16s infinite;
}

/* Bild 1 */
.banner-rotator img:nth-child(1) {
    animation-delay: 0s;
}

/* Bild 2 */
.banner-rotator img:nth-child(2) {
    animation-delay: 4s;
}

/* Bild 3 */
.banner-rotator img:nth-child(3) {
    animation-delay: 8s;
}

/* Bild 4 */
.banner-rotator img:nth-child(4) {
    animation-delay: 12s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* **************************** */
/* **** Hauptbereich **** */
/* **************************** */
.content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

aside {
    background-color: #edddd1;
    width: 200px;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5rem;
    float: left;
    margin-left: -50px;
    margin-top: -0.5rem;
    color: #202d52;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    border-radius: 1em;
    font-weight: bold;
}

.header {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    background-color: #C8BEB6;
}


/* ++++++++++++++++++++ */
/* ++++ Willkommen ++++ */
/* ++++++++++++++++++++ */
.willkommen {
    margin-top: 8rem;
}

.spiegel {
    float: left;
    height: 250px;
    margin-top: -6rem;
    margin-left: -7rem;
    margin-right: 1rem;
}

.name {
    font-family: "ephesis-regular";
    font-size: 3rem;
}

.willkommen p {
    margin-bottom: 0.7em;
}


/* ++++++++++++++++++++++++ */
/* ++++ Öffnungszeiten ++++ */
/* ++++++++++++++++++++++++ */

#oeffnungszeiten dl {
    display: grid;
    grid-template-columns: max-content auto; /* Linke Spalte passt sich dem Begriff an, rechte nimmt den Rest */
    grid-gap: 0.2rem 2rem; /* Spalten- und Zeilenabstand */
}

#oeffnungszeiten dt {
    font-family: "inter-text-bold";
    grid-column: 1; /* Zwingt dt in die erste Spalte */
}

#oeffnungszeiten dd {
    grid-column: 2; /* Zwingt dd in die zweite Spalte */
}


/* ******************* */
/* **** Fusszeile **** */
/* ******************* */
footer {
    background-color: #202d52;
    text-align: center;
    position: sticky;
    bottom: 0;
}

footer a {
    font-family: "lato-nav";
    color: #edddd1;
    display: inline-block;
    text-decoration: none;
    margin: 0.75rem  1rem;
}