/* ---------------------------------- */
/* Example Media Queries */
/* ---------------------------------- */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}

/* relative Einheit, die sich der aktuellen Schriftgröße anpasst */
/* hier: 60 mal die Breite des Großbuchstabens M („M“) des aktuellen Schriftsatzes */
@media (width >=60em) {}

/* ---------------------------------- */
/* CSS Variablen */
/* ---------------------------------- */
:root {
    --farbe-blau-dunkel: #213448;
    --farbe-blau-mittel: #547792;
    --farbe-blau-hell: #94B4C1;
    --farbe-gruen: #C0CBAA;
    --farbe-rot: #D2BBAF;
    --farbe-grau: #F2F2F2;

    /* Farben für Browser Light Mode */
    --farbe-light-text: #213448;
    /*--farbe-light-link: #94B4C1;*/
    --farbe-light-hintergrund: #F2F2F2;
    --farbe-light-ueberschrift: #547792;
    --farbe-light-buchbox-hintergrund: white;
    --farbe-light-buchbox-rand: #213448;
    /*--farbe-light-zitat: #213448;;*/
    --farbe-light-buchbox-text: var(--farbe-light-text);
    --farbe-light-menu-button: var(--farbe-light-text);
    --farbe-light-menu-button-hintergrund: var(--farbe-light-hintergrund);
    --farbe-light-menu-rand: var(--farbe-light-text);
    --farbe-light-menu-hover-text: var(--farbe-light-hintergrund);
    --farbe-light-menu-hover-hintergrund: var(--farbe-blau-hell);
    --farbe-light-sharing-button: var(--farbe-light-text);

    /* Farben für Browser Dark Mode */
    --farbe-dark-text: #F2F2F2;
    /*--farbe-dark-link: #94B4C1;*/
    --farbe-dark-hintergrund: #213448;
    --farbe-dark-ueberschrift: #547792;
    --farbe-dark-buchbox-text: #213448;
    --farbe-dark-buchbox-rand: #213448;
    --farbe-dark-buchbox-hintergrund: #F2F2F2;
    /*--farbe-dark-zitat: #F2F2F2;*/
    --farbe-dark-menu-button: var(--farbe-dark-text);
    --farbe-dark-menu-button-hintergrund: var(--farbe-dark-hintergrund);
    --farbe-dark-menu-rand: var(--farbe-dark-text);
    --farbe-dark-menu-hover-text: var(--farbe-dark-hintergrund);
    --farbe-dark-menu-hover-hintergrund: var(--farbe-blau-hell);
    --farbe-dark-sharing-button: var(--farbe-dark-text);

    /* Fonts */
    --font-cutive: "Cutive", serif;
    --font-jost: "Jost", sans-serif;
    --font-montserrat: "Montserrat", sans-serif;
    --font-weight-normal: 400;
    --font-weight-betont: 600;
    --font-style-normal: normal;
    --font-style-italic: italic;
}

/* ---------------------------------- */
html,
body {
    margin: 1rem;
    height: 100%;
    background-color: var(--farbe-light-hintergrund);
    color: var(--farbe-light-text);

    @media (prefers-color-scheme: dark) {
        /* Browser Dark Mode */
        background-color: var(--farbe-dark-hintergrund);
        color: var(--farbe-dark-text);
    }
}

/* öffnet enthaltenen Link per JS onClick */
.klickbar {
    cursor: pointer;
}

.hidden {
    display: none;
}

a,
a:visited,
a:link,
a:active,
a:focus,
a:target {
    /*font-family: var(--font-montserrat);*/
    font-weight: var(--font-weight-normal);
    font-optical-sizing: auto;
    text-decoration: none;

    /*color: var(--farbe-light-link);*/
    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-link);
    }
}

@media (hover: hover) {

    /* when hover is supported */
    a:hover {
        font-weight: var(--font-weight-betont);
    }
}

p, li {
    font-family: var(--font-jost);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-normal);
    font-style: var(--font-style-normal);
}

.italic {
    font-style: var(--font-style-italic);
    font-weight: 400;
}

#menu li {
    font-family: var(--font-montserrat);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-normal);
    font-style: var(--font-style-normal);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-cutive);
    font-weight: var(--font-weight-normal);
    font-style: var(--font-style-normal);
    font-optical-sizing: auto;
    color: var(--farbe-light-ueberschrift);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-ueberschrift);
    }
}

h1 {
    font-size: 24px;
    line-height: 1.5;

    @media (width >=60em) {
        font-size: 40px;
    }
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 16px;
}


/* ---------------------------------- */
/* Grid Layout */
/* ---------------------------------- */
.navigation-grid {
    grid-area: nav;
}

.hero-grid {
    grid-area: he;
}

.header-grid {
    grid-area: hd;
}

.content-main-grid {
    grid-area: main;
}

.content-sub-grid {
    display: grid;
    grid-area: sub;
    grid-auto-rows: minmax(100px, auto);
    grid-template-columns: repeat(1, 1fr);

    @media (width >=60em) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sidebar-grid {
    grid-area: sd;
}

.footer-grid {
    grid-area: ft;
    margin-top: 20px;

    @media (width >=60em) {
        margin-top: 40px;
    }
}

/* ---------------------------------- */
/* Konkrete Layouts der Seitentypen */
/* ---------------------------------- */
.wrapper {
    display: grid;
    grid-auto-rows: minmax(100px, auto);
    /*grid-template-columns: 1fr;*/
    grid-template-columns: repeat(auto-fit,
            minmax(min(600px, 100%), 1fr));
    grid-template-areas:
        "nav"
        "he"
        "hd"
        "main"
        "sub"
        "sd"
        "ft";

    @media (width >=60em) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "nav nav nav"
            "he he he"
            "hd hd hd"
            "main main main"
            "sub sub sub"
            "ft ft ft";
    }
}

.wrapper-rezension {
    display: grid;
    grid-auto-rows: minmax(100px, auto);
    /*grid-template-columns: 1fr;*/
    grid-template-columns: repeat(auto-fit,
            minmax(min(600px, 100%), 1fr));
    grid-template-areas:
        "nav"
        "main"
        "sd"
        "ft";

    @media (width >=60em) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "nav nav nav"
            "main main main"
            "ft ft ft";
    }
}

.wrapper-about {
    display: grid;
    grid-auto-rows: minmax(100px, auto);
    grid-template-columns: repeat(auto-fit,
            minmax(min(600px, 100%), 1fr));
    grid-template-areas:
        "nav"
        "he"
        "main"
        "sd"
        "ft";

    @media (width >=60em) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "nav nav nav"
            "he he he"
            "main main main"
            "ft ft ft";
    }
}


/* ---------------------------------- */
/* Logo */
/* ---------------------------------- */
.logo {
    display: flex;
    flex-direction: row;
}

#nologo {
    display: none;
}

.logo img {
    width: 150px;

    @media (width >=60em) {
        width: 300px;
    }

    height: auto;
}

/* ---------------------------------- */
/* Menü */
/* ---------------------------------- */
.top-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 0.5em 0 0.5em;
}

#menu-only {
    justify-content: flex-end;
}

.menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 2;
    position: absolute;
    top: 0;
    margin-top: 100px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;

    @media (width >=60em) {
        /* Menu Liste oben rechts*/
        width: 25%;
        position: absolute;
        left: 75%;
        top: 0;
    }
}

.menu-button-container {
    display: flex;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menu-toggle {
    display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
    display: block;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
    background-color: var(--farbe-light-menu-button);

    @media (prefers-color-scheme: dark) {
        background-color: var(--farbe-dark-menu-button);
    }
}

.menu-button::before {
    content: '';
    margin-top: -8px;
}

.menu-button::after {
    content: '';
    margin-top: 8px;
}

#menu-toggle:checked+.menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
}

#menu-toggle:checked+.menu-button-container .menu-button {
    background: var(--farbe-light-menu-button-hintergund);

    @media (prefers-color-scheme: dark) {
        background: var(--farbe-dark-menu-button-hintergund);
    }
}

#menu-toggle:checked+.menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
}

#menu-toggle~.menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}


#menu-toggle:checked~.menu li {
    height: 1.5em;
    padding: 1em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid var(--farbe-light-menu-rand);
    border-bottom: 0px;

    @media (prefers-color-scheme: dark) {
        border: 1px solid var(--farbe-dark-menu-rand);
        border-bottom: 0px;
    }
}

/* Fix #2: Rand nur beim letzten Element sonst doppelte Linien*/
#menu-toggle:checked~.menu li:nth-last-child(-n + 1) {
    border-bottom: 1px solid var(--farbe-light-menu-rand);
    @media (prefers-color-scheme: dark) {
        border-bottom: 1px solid var(--farbe-dark-menu-rand);
    }
}


/*
.menu>li {
    margin: 0 1rem;
    overflow: hidden;
    cursor: pointer;
}
*/


.menu>li {
    overflow: hidden;
    cursor: pointer;
    display: block;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: var(--farbe-light-text);
    background-color: var(--farbe-light-hintergrund);
    font-family: var(--font-montserrat);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-text);
        background-color: var(--farbe-dark-hintergrund);
    }
}

.menu>li>a,
.menu>li>a:visited,
.menu>li>a:link,
.menu>li>a:active,
.menu>li>a:focus,
.menu>li>a:target {
    display: block;
    color: var(--farbe-light-text);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-text);
    }
}

/*
.menu>li:not(:last-child) {
    border-bottom: 1px solid red;
}
*/

@media (hover: hover) {

    /* when hover is supported */
    .menu>li:hover {
        background-color: var(--farbe-light-menu-hover-hintergrund);
        color: var(--farbe-light-menu-hover-text);

        @media (prefers-color-scheme: dark) {
            background-color: var(--farbe-dark-menu-hover-hintergrund);
            color: var(--farbe-dark-menu-hover-text);
        }
    }

    .menu>li:hover>a {
        color: var(--farbe-light-menu-hover-text);

        @media (prefers-color-scheme: dark) {
            color: var(--farbe-dark-menu-hover-text);
        }
    }
}

/* ---------------------------------- */
/* Hero Bild (+ Overlay) */
/* ---------------------------------- */
.image-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

/*
.background-image {
    width: 100%;
    height: 50vh;
    display: block;
}
*/

.responsive {
    /*width: 100%;*/
    max-width: 100%;
    height: auto;
}

.overlay-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    /*border: 2px solid white;*/
    /*opacity: 0.7;*/
    height: auto;
}

/* ---------------------------------- */
/* Header */
/* ---------------------------------- */
.header-wrapper {
    padding: 0 0.5em 0 0.5em;
}

.header-content h1 {
    color: var(--farbe-light-zitat);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-zitat);
    }
}

.header-content p {
    color: var(--farbe-light-zitat);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-zitat);
    }
}

/* ---------------------------------- */
/* Zitate */
/* ---------------------------------- */

.quote {
    quotes: '„' '“' "'" "'";
}

.quote::before {
    content: open-quote;
}

.quote::after {
    content: close-quote;
}

.caps {
    font-variant: small-caps;
    /* Alternative für ältere Browser-Unterstützung */
    font-feature-settings: "smcp" 1;
}

h1.quote {
    font-family: var(--font-cutive);
    text-align: left;
    color: var(--farbe-light-ueberschrift);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-ueberschrift);
    }
}

p.quote-source {
    font-family: var(--font-cutive);
    text-align: right;
    color: var(--farbe-light-ueberschrift);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-ueberschrift);
    }
}

#home.header-content {
    font-family: var(--font-cutive);
    text-align: center;
    height: 200px;
    padding: 0.5em;
    margin: 0.5em;
}

#home.header-content h1 {
    font-family: var(--font-montserrat);
    font-weight: var(--font-weight-betont);
    font-size: 30px;

    @media (width >=60em) {
        font-size: 40px;
    }

    text-transform: uppercase;
    color: var(--farbe-light-zitat);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-zitat);
    }
}

#home.header-content p {
    color: var(--farbe-light-zitat);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-zitat);
    }

    font-size: 22px;

    @media (width >=60em) {
        font-size: 28px;
    }

    text-align: right;
}

/* ---------------------------------- */
/* Hauptinhalt */
/* ---------------------------------- */

/*
.content-sub-grid > article:nth-child(1) {
    margin-left: 0;
}*/

.item {
    margin-left: 0;
    margin-top: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    max-width: 100%;
    color: var(--farbe-light-buchbox-text);
    background-color: var(--farbe-light-buchbox-hintergrund);
    border: 1px solid var(--farbe-light-buchbox-rand);

    @media (prefers-color-scheme: dark) {
        color: var(--farbe-dark-buchbox-text);
        background-color: var(--farbe-dark-buchbox-hintergrund);
        border: 1px solid var(--farbe-dark-buchbox-rand);
    }
}

.item-text-container {
    padding: 1.5em;
}

.tag {
    position: absolute;
    z-index: 2;
    margin-left: 0;
    margin-top: 0;
    padding: 0.5em;
    min-width: 10%;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid var(--farbe-light-buchbox-rand);
    border-left: none;
    border-top: none;
    background-color: var(--farbe-light-buchbox-hintergrund);

    @media (prefers-color-scheme: dark) {
        border: 1px solid var(--farbe-dark-buchbox-rand);
        border-left: none;
        border-top: none;
        background-color: var(--farbe-dark-buchbox-hintergrund);
    }
}

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

.item a {
    color: var(--farbe-light-buchbox-text);
}

@media (hover: hover) {

    /* when hover is supported */
    .item a:hover {
        color: var(--farbe-light-buchbox-text);
        font-weight: var(--font-weight-normal);
    }
}

p.buchdaten {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#autor {
    font-family: var(--font-montserrat);
    font-weight: var(--font-weight-betont);
    font-size: 14px;
    text-transform: uppercase;
}

#biblio {
    font-family: var(--font-montserrat);
    font-weight: var(--font-weight-betont);
    font-size: 12px;
}

#einleitung {
    font-family: var(--font-jost);
    font-weight: 500;
    font-style: var(--font-style-italic);
    margin-top: 2em;
    margin-bottom: 2em;
}


#about p:not(.quote-source) {
    margin-top: 4rem;
    margin-bottom: 4rem;
}


/* ---------------------------------- */
/* Social Buttons */
/* ---------------------------------- */
.social-btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.fa-brands,
.fa-solid {
    width: 100px;
    text-align: center;
    text-decoration: none;

    padding: 5px;
    font-size: 20px;

    @media (width >=60em) {
        padding: 20px;
        font-size: 40px;
    }
}

.fa-brands:hover,
.fa-solid:hover {
    opacity: 0.7;
}

.social-btns i.fa-brands,
.social-btns i.fa-solid {
    color: var(--farbe-blau-mittel);
}

#main.social-btns {
    background-color: var(--farbe-blau-hell);
}

#main .fa-brands,
#main .fa-solid {
    color: var(--farbe-grau)
}

#home .fa-solid {
    color: var(--farbe-blau-dunkel);
}

/*#rezension .fa-brands,
#rezension .fa-solid {
    padding: 1px;
    font-size: 30px;
    width: 50px;
}*/

/* Home Link */
i.fa-solid.fa-house {
    @media (width >=60em) {
        margin-right: 40px;
    }
}