/* STUDIO Startbild: der neueste Beitrag als große Kachel mit runden Ecken. Sie füllt den ganzen ersten Bildschirm,
   mit schmalem weißem Rand rundherum. Darunter beginnt der Rest erst nach dem Scrollen.
   Oben links in der Kachel steht das vertikale Logo (kommt aus navbar.hbs, hier nur verschoben), die Glas-Pille schwebt darüber.
   Unten rechts ist eine Ecke ausgeschnitten, darin der Knopf „Lesen“. Die Rundungen nehmen den Footer auf.
   Beim Laden öffnet sich die Kachel einmal ruhig, der Text steigt auf. Bei „Bewegung reduzieren“ steht alles sofort da. */

:root {
    --hero-gutter: max(26px, 1.8vw);
    --hero-pad: max(30px, 2.6vw);
    --hero-radius: clamp(24px, 2.8vw, 48px); /* wie die Ecken über dem Footer */
    --hero-notch-radius: 26px;
}

.home-hero {
    padding: var(--hero-gutter) var(--hero-gutter) 0;
    background-color: var(--background-color);
}

.home-hero-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: calc(100svh - 2 * var(--hero-gutter));
    min-height: 560px;
    color: var(--overlay-text-color);
    isolation: isolate;
}

/* Nur Bild und Abdunklung werden rund beschnitten. Der Knopf in der Ecke bleibt ganz */
.home-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--hero-radius);
    overflow: hidden;
    background-color: #F5F5F5;
}

.home-hero-image {
    position: absolute;
    inset: 0;
}

.home-hero-image img {
    width: 100%;
    object-fit: cover;
}

.home-hero-shade {
    position: absolute;
    inset: 0;
    background-color: var(--dark-overlay-background-color);
    opacity: var(--dark-overlay-opacity);
    pointer-events: none;
}

/* Vertikales Logo in die Kachel setzen, auf Höhe des Textes links */
.logo-vertical-link {
    top: calc(var(--hero-gutter) + var(--hero-pad));
    left: calc(var(--hero-gutter) + var(--hero-pad));
    color: var(--overlay-text-color);
}

/* Text unten links. Rechts bleibt Platz für die ausgeschnittene Ecke */

.home-hero-content {
    width: 100%;
    max-width: min(1080px, 72%);
    padding: var(--hero-pad);
}

.home-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: max(20px, 1.6vw);
    font-family: var(--font2);
    font-size: 15px;
    line-height: 1;
    color: rgba(255, 255, 255, .85);
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
}

.home-hero-lock {
    width: 16px;
    height: 16px;
}

.home-hero-title {
    margin-left: -.04em;
    font-family: var(--font1);
    font-size: clamp(40px, min(5.4vw, 9svh), 104px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.home-hero-title a {
    color: inherit;
    text-decoration: none;
}

/* Die ganze Kachel ist klickbar, ohne den Text in einen großen Link zu packen */
.home-hero-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--hero-radius);
}

.home-hero-title a:focus-visible {
    outline: none;
}

.home-hero-title a:focus-visible::after {
    outline: 2px solid var(--text-color);
    outline-offset: 4px;
}

.home-hero-excerpt {
    max-width: 46ch;
    margin-top: max(18px, 1.4vw);
    font-family: var(--font2);
    font-size: 18px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .85);
}

/* Ausgeschnittene Ecke unten rechts. Die zwei kleinen Rundungen außen sind Schatten eines leeren Kästchens
   (Trick ohne Verlauf): Der Schatten füllt genau die Ecke außerhalb der Rundung */

.home-hero-notch {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 12px 0 0 12px;
    border-top-left-radius: var(--hero-notch-radius);
    background-color: var(--background-color);
}

.home-hero-notch::before,
.home-hero-notch::after {
    content: "";
    position: absolute;
    width: var(--hero-notch-radius);
    height: var(--hero-notch-radius);
    border-bottom-right-radius: var(--hero-notch-radius);
    box-shadow: 6px 6px 0 6px var(--background-color);
    pointer-events: none;
}

.home-hero-notch::before {
    right: 0;
    bottom: 100%;
}

.home-hero-notch::after {
    right: 100%;
    bottom: 0;
}

.home-hero-button {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 64px;
    padding: 0 8px 0 28px;
    border-radius: 999px;
    background-color: var(--text-color);
    color: var(--background-color);
    font-family: var(--font2);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
}

.home-hero-button-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--background-color);
    color: var(--text-color);
}

.home-hero-button-arrow svg {
    width: 22px;
    height: 22px;
    transition: transform .5s var(--ease-transition);
}

@media (hover: hover) {
    .home-hero-image img {
        transition: scale 1.2s var(--ease-transition);
    }

    .home-hero-tile:hover .home-hero-image img {
        scale: 1.03;
    }

    .home-hero-tile:hover .home-hero-button-arrow svg {
        transform: translateX(3px);
    }
}

/* Einmal beim Laden: Kachel öffnet sich von etwas kleiner, das Bild kommt näher, Logo und Text erscheinen nacheinander */

@media (prefers-reduced-motion: no-preference) {
    .home-hero-media {
        animation: hero-open 1.4s var(--ease-transition) both;
    }

    .home-hero-image {
        animation: hero-zoom 2.2s var(--ease-transition) both;
    }

    .logo-vertical-link,
    .home-hero-meta,
    .home-hero-title,
    .home-hero-excerpt {
        animation: hero-rise 1.2s var(--ease-transition) both;
    }

    .logo-vertical-link { animation-delay: .3s; }
    .home-hero-meta { animation-delay: .35s; }
    .home-hero-title { animation-delay: .45s; }
    .home-hero-excerpt { animation-delay: .6s; }

    .home-hero-notch {
        animation: hero-notch 1s var(--ease-transition) .75s both;
    }
}

@keyframes hero-open {
    from { clip-path: inset(3% 3% 3% 3% round var(--hero-radius)); }
    to { clip-path: inset(0 0 0 0 round var(--hero-radius)); }
}

@keyframes hero-zoom {
    from { transform: scale(1.12); }
    to { transform: none; }
}

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

@keyframes hero-notch {
    from { opacity: 0; transform: translate(24px, 24px); }
    to { opacity: 1; transform: none; }
}

@media screen and (max-width: 1080px) {
    .home-hero-content {
        max-width: 100%;
        padding-bottom: calc(var(--hero-pad) + 64px);
    }
}

@media screen and (max-width: 767px) {
    :root {
        --hero-gutter: 10px;
        --hero-pad: 22px;
        --hero-radius: 28px;
        --hero-notch-radius: 18px;
    }

    .home-hero-tile {
        min-height: 520px;
    }

    .home-hero-content {
        padding-bottom: calc(var(--hero-pad) + 58px);
    }

    .home-hero-meta {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .home-hero-title {
        font-size: clamp(34px, min(10.5vw, 6.2svh), 52px);
        line-height: 1;
    }

    .home-hero-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 16px;
    }

    .home-hero-notch {
        padding: 10px 0 0 10px;
    }

    .home-hero-button {
        height: 56px;
        gap: 12px;
        padding: 0 6px 0 22px;
        font-size: 16px;
    }

    .home-hero-button-arrow {
        width: 44px;
        height: 44px;
    }
}