/* =========================================
   RED ECHO – GEMEINSAME STYLES
   Gilt für alle Seiten:
   Grundlagen, Seitenrahmen, Navigation,
   Seitentitel und Logo.

   RESPONSIVE / MOBILE FIRST
========================================= */


/* -----------------------------------------
   1. Variablen

   Alle Grössen wachsen fliessend mit der
   Bildschirmbreite:

   clamp(kleinster Wert, Formel, grösster Wert)

   Dadurch braucht es keine Stufen pro
   Gerätegrösse mehr. Wer eine Grösse
   ändern möchte, ändert sie nur hier.
----------------------------------------- */

:root {
    --color-white: #ffffff;
    --color-red: #941521;
    --color-dark: #170a0c;

    /*
       Verkleinerungsfaktor für niedrige
       Bildschirme (siehe Punkt 8).
    */
    --scale: 1;

    /* Abstände */
    --page-padding: clamp(1.5rem, 0.75rem + 4.4vw, 5.5rem);
    --header-top: calc(clamp(2.4rem, 2.3rem + 1.5vw, 4rem) * var(--scale));
    --content-top: 2.3rem;
    --heading-gap: 2.5rem;

    /* Höhe der Navigationszeile */
    --nav-height: var(--fs-nav);

    /* Schriftgrössen */
    --fs-nav: calc(clamp(0.8rem, 0.62rem + 0.9vw, 1.45rem) * var(--scale));
    --fs-title: calc(clamp(3.25rem, 2.95rem + 4.3vw, 7rem) * var(--scale));
    --fs-subtitle: calc(clamp(1.7rem, 1.55rem + 1.5vw, 3rem) * var(--scale));
    --fs-body: calc(clamp(1rem, 0.9rem + 0.6vw, 1.5rem) * var(--scale));

    /* Logo */
    --logo-size: calc(clamp(4.2rem, 3.8rem + 4vw, 7.5rem) * var(--scale));
    --logo-inset-x: clamp(1.1rem, 0.2rem + 3.3vw, 3.5rem);
    --logo-inset-y: clamp(1.1rem, 0.6rem + 1.6vw, 2.5rem);

    /*
       Platz unter dem Inhalt, damit nichts
       unter das Logo rutscht.
    */
    --page-bottom: calc(var(--logo-size) + var(--logo-inset-y) + 1rem);
}


/* -----------------------------------------
   2. Grundeinstellungen
----------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    /*
       Dunkle Farbe statt Weiss:
       Der weisse Text bleibt lesbar,
       solange das Hintergrundbild lädt.
    */
    background-color: var(--color-dark);

    font-family: "Figtree", sans-serif;
}

img {
    display: block;
    max-width: 100%;
}


/* -----------------------------------------
   Seitenübergänge

   Beim Wechsel auf eine andere Seite
   blendet der Browser weich über, statt
   hart neu zu laden.

   Funktioniert in Chrome, Edge und Safari.
   Andere Browser wechseln wie bisher.
----------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

    @view-transition {
        navigation: auto;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 350ms;
}


/*
   Die Navigation bekommt einen eigenen
   Namen. Dadurch bleibt sie beim Übergang
   ruhig an ihrem Platz stehen und nur der
   aktive Menüpunkt blendet um.

   Nicht in der Handyansicht: Dort ist die
   Navigation das Burgermenü.
*/

@media (min-width: 700px) {

    .navigation {
        view-transition-name: navigation;
    }
}


/* -----------------------------------------
   Einblenden beim Scrollen

   Elemente mit dem Attribut data-reveal
   sind zuerst unsichtbar. js/reveal.js gibt
   ihnen die Klasse "is-visible", sobald man
   zu ihnen scrollt.

   Gilt nur mit der Klasse "reveal-on" am
   <html>-Element (gesetzt von js/reveal.js).
   Ohne JavaScript ist alles sofort sichtbar.
----------------------------------------- */

.reveal-on [data-reveal]:not(.is-visible) {
    opacity: 0;
}


/*
   data-reveal="up":
   von unten hereingleiten.

   --reveal-delay setzt js/reveal.js, damit
   mehrere Elemente nacheinander erscheinen.
*/

.reveal-on [data-reveal="up"].is-visible {
    animation:
        redEchoReveal
        800ms
        cubic-bezier(0.16, 1, 0.3, 1)
        var(--reveal-delay, 0ms)
        backwards;
}

@keyframes redEchoReveal {

    0% {
        opacity: 0;

        transform: translateY(2rem);
    }

    100% {
        opacity: 1;

        transform: translateY(0);
    }
}


/* -----------------------------------------
   3. Seitenrahmen

   Jede Seite ist mindestens so hoch wie
   der Bildschirm und wächst mit dem Inhalt.
----------------------------------------- */

.page {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    padding-bottom: var(--page-bottom);

    color: var(--color-white);

    background-color: var(--color-dark);
}


/*
   Hintergrundbild

   Das Bild liegt auf einer eigenen Ebene
   (::before) hinter dem ganzen Inhalt.
   So kann es sich bewegen, ohne dass sich
   der Inhalt mitbewegt.

   Die Ebene ist rundherum 8vw grösser als
   die Seite. Dadurch wird beim Bewegen nie
   ein Rand sichtbar.
*/

.page::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: -8vw;

    background-image: url("../img/HGlang.jpg");
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;

    animation:
        redEchoBackground
        32s
        ease-in-out
        infinite;

    will-change: transform;
}


/*
   Langsames Treiben:
   Das Bild wandert in einer Schleife ein
   paar Prozent der Bildschirmbreite hin und
   her und wird dabei minimal grösser.

   Für mehr oder weniger Bewegung die
   vw-Werte ändern (höchstens 8vw), für das
   Tempo die Dauer oben (32s).
*/

@keyframes redEchoBackground {

    0%,
    100% {
        transform:
            translate(0, 0)
            scale(1);
    }

    33% {
        transform:
            translate(-3vw, 2vw)
            scale(1.04);
    }

    66% {
        transform:
            translate(2.5vw, -2.5vw)
            scale(1.07);
    }
}

@media (prefers-reduced-motion: reduce) {

    .page::before {
        animation: none;
    }
}


/*
   Lange Seiten (About us, Gallery):
   Im Hochformat wird der Hintergrund
   über die ganze Seitenlänge gezogen.
*/

.page--long::before {
    background-size: 100% 100%;
}


/*
   Querformat (Desktop, Tablet quer):
   Hier passt das querformatige
   Hintergrundbild besser.
*/

@media (orientation: landscape) {

    .page::before {
        background-image: url("../img/HG_RedEcho.jpg");
        background-position: center top;
    }

    .page--long::before {
        background-size: cover;
    }
}


/* -----------------------------------------
   4. Navigation
----------------------------------------- */

.page__header {
    position: relative;
    z-index: 10;

    width: 100%;

    padding:
        var(--header-top)
        var(--page-padding)
        0;
}

.navigation {
    width: 100%;
}

.navigation__list {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin: 0;
    padding: 0;

    font-size: var(--fs-nav);
    line-height: 1;

    list-style: none;
}


/*
   Das Padding vergrössert nur die
   Tippfläche (ca. 44px hoch).

   Der negative Aussenabstand gleicht es
   wieder aus, damit die Navigation
   optisch gleich bleibt.
*/

.navigation__link {
    position: relative;

    display: block;

    margin: -1rem -0.4rem;
    padding: 1rem 0.4rem;

    color: var(--color-white);

    font-weight: 400;

    text-decoration: none;
    white-space: nowrap;

    transition:
        font-weight 150ms ease;
}

.navigation__link:hover,
.navigation__link:focus-visible {
    color: var(--color-white);
    font-weight: 700;
}

.navigation__link--active {
    font-weight: 700;
}


/* -----------------------------------------
   Echo der Menüpunkte

   Wie beim Titel "Red Echo": Unter dem
   Wort erscheinen Kopien als Outline.

   Jeder Link trägt seinen Text zusätzlich
   im Attribut data-text. Daraus entstehen
   zwei Kopien (::before und ::after).

   Zuerst liegen beide unsichtbar genau
   hinter dem Wort. Beim Hover gleiten sie
   nacheinander nach unten heraus.

   Der Zusatz / "" sorgt dafür, dass
   Screenreader die Kopien nicht vorlesen.
----------------------------------------- */

.navigation__link::before,
.navigation__link::after {
    content: attr(data-text);
    content: attr(data-text) / "";

    position: absolute;

    top: 1rem;
    left: 0.4rem;

    color: transparent;

    font-weight: 700;

    -webkit-text-stroke: max(0.6px, 0.045em) var(--color-white);

    opacity: 0;

    pointer-events: none;

    transition:
        transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 250ms ease;
}


/* Erstes Echo: eine Zeile tiefer */

.navigation__link:focus-visible::before,
.navigation__link:active::before,
.navigation__link--active::before {
    opacity: 1;

    transform: translateY(105%);
}


/* Zweites Echo: zwei Zeilen tiefer, blasser, leicht verzögert */

.navigation__link:focus-visible::after,
.navigation__link:active::after {
    opacity: 0.45;

    transform: translateY(210%);

    transition-delay: 70ms;
}


/* Hover nur auf Geräten mit Maus */

@media (hover: hover) {

    .navigation__link:hover::before {
        opacity: 1;

        transform: translateY(105%);
    }

    .navigation__link:hover::after {
        opacity: 0.45;

        transform: translateY(210%);

        transition-delay: 70ms;
    }
}


/*
   Aktuelle Seite:
   Das erste Echo bleibt stehen und gleitet
   beim Laden der Seite einmal heraus.
*/

.navigation__link--active::before {
    animation:
        redEchoNavigation
        700ms
        cubic-bezier(0.16, 1, 0.3, 1)
        300ms
        backwards;
}

@keyframes redEchoNavigation {

    0% {
        opacity: 0;

        transform: translateY(0);
    }

    100% {
        opacity: 1;

        transform: translateY(105%);
    }
}

@media (prefers-reduced-motion: reduce) {

    .navigation__link::before,
    .navigation__link::after {
        transition: none;

        animation: none;
    }
}


/* -----------------------------------------
   Burgermenü – Handyansicht
   bis 699px

   Gilt nur, wenn JavaScript läuft
   (Klasse "js" am <html>-Element,
   gesetzt von js/navigation.js).

   Oben rechts steht der Burger-Button.
   Die Liste der Menüpunkte wird zu einem
   Menü über den ganzen Bildschirm.

   Der Wert 699px steht auch in
   js/navigation.js.
----------------------------------------- */

.navigation__toggle {
    display: none;
}

@media (max-width: 699px) {

    html.js {
        --header-top: 1.25rem;
        --nav-height: 2.75rem;
        --content-top: 1.25rem;

        --burger-size: 2.75rem;
        --burger-line-width: 1.75rem;
        --burger-line-height: 0.3rem;
        --burger-line-gap: 0.28rem;

        --fs-menu: clamp(2.2rem, min(12vw, 10vh), 3.6rem);

        /* Mittelpunkt des Buttons: von hier aus öffnet sich das Menü */
        --burger-x: calc(100% - var(--page-padding) - var(--burger-line-width) / 2);
        --burger-y: calc(var(--header-top) + var(--burger-size) / 2);
    }


    /* Seite hinter dem offenen Menü nicht scrollen */

    html.navigation-open,
    html.navigation-open body {
        overflow: hidden;
    }

    .js .page__header {
        display: flex;
        justify-content: flex-end;
    }

    .js .navigation {
        width: auto;
    }


    /* -------------------------------------
       Burger-Button

       Drei Balken wie der Titel:
       der erste gefüllt, die zwei
       darunter als Outline.
    ------------------------------------- */

    .js .navigation__toggle {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: var(--burger-line-gap);

        width: var(--burger-size);
        height: var(--burger-size);

        /* Balken bündig mit dem Seitenrand */
        margin-right: calc((var(--burger-line-width) - var(--burger-size)) / 2);

        padding: 0;

        border: 0;

        background: transparent;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;
    }

    .navigation__toggle-line {
        display: block;

        width: var(--burger-line-width);
        height: var(--burger-line-height);

        border: 1.5px solid var(--color-white);
        border-radius: 999px;

        background-color: transparent;

        transition:
            transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 200ms ease,
            background-color 200ms ease;
    }

    .navigation__toggle-line:first-child {
        background-color: var(--color-white);
    }


    /* Offen: Der Button bleibt oben rechts stehen und wird zum X */

    .js .navigation--open .navigation__toggle {
        position: fixed;

        top: var(--header-top);
        right: var(--page-padding);
    }

    .navigation--open .navigation__toggle-line {
        background-color: var(--color-white);
    }

    .navigation--open .navigation__toggle-line:nth-child(1) {
        transform:
            translateY(calc(var(--burger-line-height) + var(--burger-line-gap)))
            rotate(45deg);
    }

    .navigation--open .navigation__toggle-line:nth-child(2) {
        opacity: 0;

        transform: scaleX(0);
    }

    .navigation--open .navigation__toggle-line:nth-child(3) {
        transform:
            translateY(calc(-1 * (var(--burger-line-height) + var(--burger-line-gap))))
            rotate(-45deg);
    }


    /* -------------------------------------
       Menü über den ganzen Bildschirm

       Geschlossen ist es auf einen Kreis
       mit Radius 0 beim Button zugeschnitten.
       Beim Öffnen wächst dieser Kreis über
       den ganzen Bildschirm.
    ------------------------------------- */

    .js .navigation__list {
        position: fixed;
        inset: 0;
        z-index: 1;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 0.3em;

        width: auto;

        padding:
            calc(var(--header-top) + var(--burger-size) + 1rem)
            var(--page-padding)
            2rem;

        overflow-y: auto;
        overscroll-behavior: contain;

        background-color: var(--color-dark);
        background-image:
            linear-gradient(rgba(23, 10, 12, 0.55), rgba(23, 10, 12, 0.55)),
            url("../img/HGlang.jpg");
        background-position: center;
        background-size: cover;

        font-size: var(--fs-menu);
        font-weight: 700;

        line-height: 1.05;
        letter-spacing: -0.045em;

        visibility: hidden;

        clip-path: circle(0 at var(--burger-x) var(--burger-y));

        transition:
            clip-path 550ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0s linear 550ms;
    }

    .js .navigation--open .navigation__list {
        visibility: visible;

        clip-path: circle(150% at var(--burger-x) var(--burger-y));

        transition-delay: 0s;
    }


    /* -------------------------------------
       Menüpunkte

       Wie der Titel der Startseite:
       Die aktuelle Seite ist gefüllt,
       alle anderen sind Outline.

       Beim Öffnen gleiten die Punkte
       nacheinander von unten herein.
       --item ist die Nummer des Punkts
       (gesetzt von js/navigation.js).
    ------------------------------------- */

    .js .navigation__list li {
        opacity: 0;

        transform: translateY(1.5rem);

        transition:
            opacity 200ms ease,
            transform 200ms ease;
    }

    .js .navigation--open .navigation__list li {
        opacity: 1;

        transform: none;

        transition:
            opacity 350ms ease,
            transform 600ms cubic-bezier(0.16, 1, 0.3, 1);

        transition-delay: calc(120ms + var(--item, 0) * 60ms);
    }

    .js .navigation__link {
        margin: 0;
        padding: 0.08em 0;

        color: transparent;

        font-weight: 700;

        -webkit-text-stroke: 1px var(--color-white);

        transition:
            color 180ms ease;
    }

    .js .navigation__link:hover,
    .js .navigation__link:focus-visible,
    .js .navigation__link:active,
    .js .navigation__link--active {
        color: var(--color-white);
    }


    /* Das kleine Echo der Desktop-Navigation braucht es hier nicht */

    .js .navigation__link::before,
    .js .navigation__link::after {
        content: none;
    }
}

@media (max-width: 699px) and (prefers-reduced-motion: reduce) {

    .navigation__toggle-line,
    .js .navigation__list,
    .js .navigation__list li,
    .js .navigation--open .navigation__list li {
        transition: none;
    }
}


/* -----------------------------------------
   5. Inhalt + Seitentitel
----------------------------------------- */

.page__content {
    position: relative;

    width: 100%;

    padding:
        var(--content-top)
        var(--page-padding)
        0;
}

.page__heading {
    margin-bottom: var(--heading-gap);
}

.page__title {
    margin: 0;

    color: var(--color-white);

    font-size: var(--fs-title);
    font-weight: 700;

    line-height: 0.95;
    letter-spacing: -0.045em;

    white-space: nowrap;
}

.page__echo {
    margin: 0.3rem 0 0;

    color: transparent;

    font-size: calc(var(--fs-title) * 0.89);
    font-weight: 700;

    line-height: 1;
    letter-spacing: -0.045em;

    white-space: nowrap;

    -webkit-text-stroke: 1px var(--color-white);
}

.page__subtitle {
    margin: 0 0 0.75rem;

    color: var(--color-white);

    font-size: var(--fs-subtitle);
    font-weight: 700;

    line-height: 1.1;
}


/* -----------------------------------------
   6. Logo
----------------------------------------- */

.page__logo {
    position: absolute;
    z-index: 8;

    right: var(--logo-inset-x);
    bottom: var(--logo-inset-y);

    width: var(--logo-size);
    height: auto;
}


/* =========================================
   7. DESKTOP
   ab 1100px

   Erst hier verändert sich das Layout:
   Die Navigation steht rechts oben,
   der Titel links daneben.
========================================= */

@media (min-width: 1100px) {

    :root {
        --content-top: 0.4rem;
        --page-bottom: 5rem;
    }

    .page__header {
        display: flex;
        justify-content: flex-end;
    }

    .navigation {
        width: 53%;
        max-width: 58rem;
    }
}


/* =========================================
   8. NIEDRIGE BILDSCHIRME

   Querformat mit wenig Höhe, z.B. Laptops,
   Tablets quer oder Smartphones quer.

   Alle Grössen aus Punkt 1 werden über
   --scale gemeinsam verkleinert, damit
   mehr Inhalt auf den Bildschirm passt.
========================================= */

@media (min-width: 700px) and (max-height: 820px) {

    :root {
        --scale: 0.9;
    }
}

@media (min-width: 700px) and (max-height: 700px) {

    :root {
        --scale: 0.82;

        --content-top: 1.5rem;
        --heading-gap: 1.5rem;
    }
}

@media (min-width: 1100px) and (max-height: 700px) {

    :root {
        --content-top: 0rem;
        --page-bottom: 4rem;
    }
}