/* ==================================================
   MOBILE- UND TABLET-OPTIMIERUNG
   Wird nach den übrigen Stylesheets geladen.
   ================================================== */

:root {
    --text-zart: var(--text-hell);
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
}

main {
    overflow: clip;
}

main > section,
main > section > *,
[class*="grid"],
[class*="bereich"],
[class*="karte"],
[class*="text"] {
    min-width: 0;
}

p,
h1,
h2,
h3,
a,
small {
    overflow-wrap: break-word;
}

button,
a {
    touch-action: manipulation;
}


/* ==================================================
   KOPFBEREICH UND LOGO
   ================================================== */

header {
    min-height: 94px;

    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.seitenkopf-logo img {
    width: clamp(235px, 21vw, 310px);
    max-height: 82px;
}


/* ==================================================
   LANDINGPAGE: KLARE IDENTITÄT
   ================================================== */

#start.start-mit-bild {
    min-height: calc(100svh - 94px);

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

    padding-top: clamp(5rem, 10vh, 8rem);
    padding-bottom: clamp(5rem, 10vh, 8rem);
}

#start.start-mit-bild::before {
    background-image:
        linear-gradient(
            90deg,
            rgba(3, 3, 3, 0.96) 0%,
            rgba(3, 3, 3, 0.86) 37%,
            rgba(3, 3, 3, 0.50) 67%,
            rgba(3, 3, 3, 0.34) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.32) 100%
        ),
        url("Bilder/orgel/orgel-speyer-quer.JPG");

    background-position: center bottom;
}

.start-inhalt {
    position: relative;
    z-index: 2;

    width: min(760px, 66%);
}

#start .start-berufe {
    margin-bottom: 1.1rem;

    color: var(--holz-hell);

    font-size: clamp(0.76rem, 1.15vw, 0.9rem);
    font-weight: 750;

    letter-spacing: 0.19em;
    text-transform: uppercase;
}

#start.start-mit-bild h2 {
    max-width: none;
    margin-bottom: 0.85rem;

    color: #ffffff;

    font-size: clamp(4rem, 7.4vw, 7rem);
    line-height: 0.98;
    letter-spacing: 0.005em;

    text-wrap: balance;
}

#start .start-leitsatz {
    max-width: 680px;
    margin-bottom: 1.05rem;

    color: #ffffff;

    font-family: var(--schrift-ueberschrift);
    font-size: clamp(1.5rem, 2.6vw, 2.35rem);
    line-height: 1.2;
    letter-spacing: 0.018em;
}

#start .start-beschreibung {
    max-width: 590px;
    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: clamp(1rem, 1.35vw, 1.12rem);
}

.start-aktionen {
    display: flex;

    flex-wrap: wrap;

    gap: 0.85rem;

    margin-top: 2rem;
}

.start-aktionen a {
    display: inline-flex;

    min-height: 50px;

    align-items: center;
    justify-content: center;

    padding: 0.8rem 1.35rem;

    border: 1px solid rgba(255, 255, 255, 0.62);

    color: #ffffff;
    background: rgba(0, 0, 0, 0.18);

    font-size: 0.78rem;
    font-weight: 750;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    backdrop-filter: blur(8px);

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.start-aktionen a:hover {
    color: #ffffff;

    border-color: var(--holz);
    background-color: var(--holz);

    transform: translateY(-2px);
}

.start-aktionen .start-aktion-primaer {
    border-color: var(--holz);
    background-color: var(--holz);
}

.start-aktionen .start-aktion-primaer:hover {
    border-color: var(--holz-dunkel);
    background-color: var(--holz-dunkel);
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1050px) {
    header {
        min-height: 82px;
    }

    .seitenkopf-logo img {
        width: clamp(215px, 30vw, 260px);
        max-height: 70px;
    }

    main > section {
        width: min(calc(100% - 2.5rem), var(--max-breite));

        padding-top: 4.8rem;
        padding-bottom: 4.8rem;
    }

    #start.start-mit-bild {
        min-height: calc(100svh - 82px);
    }

    .start-inhalt {
        width: min(700px, 72%);
    }
}


@media (max-width: 850px) {
    header {
        position: sticky;
        top: 0;

        padding-right: 1.25rem;
        padding-left: 1.25rem;

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

    .menu-schalter,
    .theme-schalter {
        min-height: 46px;
    }

    .kopf-aktionen {
        max-height: calc(100svh - 90px);
        overflow-y: auto;

        padding-bottom: 1rem;
    }

    .kopf-aktionen nav a {
        display: flex;

        min-height: 50px;

        align-items: center;

        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

    #start.start-mit-bild {
        min-height: min(820px, calc(100svh - 82px));
    }

    #start.start-mit-bild::before {
        background-image:
            linear-gradient(
                90deg,
                rgba(3, 3, 3, 0.94) 0%,
                rgba(3, 3, 3, 0.78) 55%,
                rgba(3, 3, 3, 0.38) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.14) 0%,
                rgba(0, 0, 0, 0.38) 100%
            ),
            url("Bilder/orgel/orgel-speyer-quer.JPG");

        background-position: 57% bottom;
    }

    .start-inhalt {
        width: min(650px, 82%);
    }

    #start.start-mit-bild h2 {
        font-size: clamp(3.8rem, 11vw, 6rem);
    }

    .ueber-mich-grid,
    .bild-text-bereich,
    .projekt-hochformat,
    .orgelbau-einstieg,
    .orgelbau-bildtext,
    .orgelbau-pfeifen,
    .orgelbau-schaden,
    .kontakt-einstieg,
    .kontakt-social,
    .termine-einstieg,
    .termine-hinweis {
        grid-template-columns: 1fr;
    }

    .bild-text-bereich.bild-links .bild-text-inhalt,
    .bild-text-bereich.bild-links .seitenbild {
        order: initial;
    }

    .projekt-karten,
    .kontakt-wege-karten,
    .kontakt-anfragen {
        grid-template-columns: 1fr;
    }

    .projekt-karte-quer {
        margin-top: 0;
    }

    .orgelbau-einstieg-bild,
    .orgelbau-bildtext-bild,
    .orgelbau-schaden-bild,
    .kontakt-portrait,
    .seitenbild {
        width: min(100% - 0.8rem, 680px);
    }

    .termine-seite .termin-karte {
        grid-template-columns:
            minmax(145px, 0.35fr)
            minmax(0, 1.65fr);

        column-gap: 2rem;
    }
}


/* ==================================================
   MOBILTELEFON
   ================================================== */

@media (max-width: 700px) {
    header {
        position: sticky;
        top: 0;

        min-height: 72px;

        padding: 0.65rem 1rem;
    }

    .seitenkopf-logo img {
        width: clamp(170px, 48vw, 205px);
        max-height: 56px;
    }

    .menu-schalter {
        min-width: 46px;
        min-height: 46px;
    }

    .kopf-aktionen {
        max-height: calc(100svh - 72px);
    }

    .theme-schalter {
        width: 100%;
        min-height: 48px;

        align-self: stretch;
    }

    main > section {
        width: min(calc(100% - 1.5rem), var(--max-breite));

        padding-top: 3.8rem;
        padding-bottom: 3.8rem;
    }

    #start.start-mit-bild {
        min-height: calc(100svh - 72px);

        justify-content: flex-end;

        padding-top: 8rem;
        padding-bottom: max(3.2rem, env(safe-area-inset-bottom));
    }

    #start.start-mit-bild::before {
        background-image:
            linear-gradient(
                180deg,
                rgba(3, 3, 3, 0.22) 0%,
                rgba(3, 3, 3, 0.42) 38%,
                rgba(3, 3, 3, 0.95) 83%,
                rgba(3, 3, 3, 0.99) 100%
            ),
            url("Bilder/orgel/orgel-speyer-quer.JPG");

        background-position: 62% bottom;
    }

    .start-inhalt {
        width: 100%;
    }

    #start .start-berufe {
        margin-bottom: 0.8rem;

        font-size: 0.72rem;
        letter-spacing: 0.16em;
    }

    #start.start-mit-bild h2 {
        margin-bottom: 0.65rem;

        font-size: clamp(3.15rem, 16vw, 5rem);
        line-height: 0.98;
    }

    #start .start-leitsatz {
        margin-bottom: 0.8rem;

        font-size: clamp(1.35rem, 7vw, 1.85rem);
    }

    #start .start-beschreibung {
        max-width: 34rem;

        font-size: 0.98rem;
        line-height: 1.58;
    }

    .start-aktionen {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;

        gap: 0.7rem;

        margin-top: 1.6rem;
    }

    .start-aktionen a {
        width: 100%;
        min-height: 48px;

        padding-right: 0.7rem;
        padding-left: 0.7rem;
    }

    h2 {
        line-height: 1.12;
    }

    p {
        line-height: 1.65;
    }

    main section > a {
        min-height: 48px;
    }

    .ueber-mich-portrait,
    .projekt-aufmacher-bild,
    .projekt-hochformat-bild,
    .breites-seitenbild,
    .orgelbau-breitbild {
        width: calc(100% - 0.65rem);
    }

    .orgelbau-detailraster,
    .orgelbau-bildpaar {
        grid-template-columns: 1fr;
    }

    .orgelbau-bildpaar figure:first-child {
        margin-top: 0;
    }

    .termine-seite .termin-karte {
        grid-template-columns: 1fr;

        padding: 1.45rem;
    }

    .termine-seite .termin-datum {
        grid-column: 1;
        grid-row: auto;

        margin-bottom: 1.15rem;
        padding-right: 0;
        padding-bottom: 0.9rem;

        border-right: 0;
        border-bottom: 1px solid var(--linie);
    }

    .termine-seite .termin-karte h3,
    .termine-seite .termin-karte .termin-details,
    .termine-seite .termin-karte > p:not(.termin-datum),
    .termine-seite .termin-karte > a {
        grid-column: 1;
    }

    footer {
        padding-bottom: max(2.4rem, env(safe-area-inset-bottom));
    }
}


@media (max-width: 420px) {
    .seitenkopf-logo img {
        width: 160px;
        max-height: 50px;
    }

    #start.start-mit-bild h2 {
        font-size: clamp(2.8rem, 15.5vw, 4rem);
    }

    .start-aktionen {
        grid-template-columns: 1fr;
    }

    .menu-text {
        display: none;
    }
}


@media (max-height: 540px) and (orientation: landscape) {
    #start.start-mit-bild {
        min-height: auto;

        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    #start.start-mit-bild h2 {
        font-size: clamp(2.8rem, 8vw, 4.4rem);
    }

    .start-inhalt {
        width: min(700px, 76%);
    }
}

/* Startbild auf großen Bildschirmen besser sichtbar */
@media (min-width: 851px) {
    #start.start-mit-bild::before {
        background-image:
            linear-gradient(
                90deg,
                rgba(3, 3, 3, 0.82) 0%,
                rgba(3, 3, 3, 0.62) 38%,
                rgba(3, 3, 3, 0.22) 68%,
                rgba(3, 3, 3, 0.12) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.06) 0%,
                rgba(0, 0, 0, 0.18) 100%
            ),
            url("Bilder/orgel/orgel-speyer-quer.JPG");

        background-position: center bottom;
        background-size: cover;
    }
}

/* ==================================================
   404-SEITE
   ================================================== */

.fehlerseite {
    display: grid;

    min-height: calc(100svh - 220px);

    align-content: center;
    justify-items: start;

    max-width: 820px;
}

.fehlerseite h2 {
    max-width: 760px;
}

.fehlerseite > p:last-of-type {
    max-width: 620px;
}