@font-face {
    font-family: 'ES Allianz';
    src: url("assets/ES Allianz/ESAllianz-Book.woff2") format("woff2"),
         url("assets/ES Allianz/ESAllianz-Book.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colors */
    --color-white: #ffffff;
    --color-grey: #8a8a8a;
    --color-black: #191919;

    /* Light-Mode-Colors */
    --light-color-black: #050505; /* Use for .regular-font, also .btn-dark normal-state */
    --light-color-grey: #8a8a8a; /* Use for .regular-font-grey, also .btn-dark hover-state */
    --light-color-white: #ffffff; /* Use for page color */
    
    /* Typography */
    --font-family-primary: 'ES Allianz', sans-serif;
    --font-size-base: 14px;
    --line-height-tight: 105%;
    --letter-spacing-none: 0;
   
    /* <ul class="arbeiten-index"> <li> items, not headline */
    --list-primary: #B6B6B6;
    --list-hover: #F5F5F5;

    
    /* Responsive Design Variables */
    --container-max-width: 1920px;
    --container-padding: 0;
    --content-max-width: 1840px;
    
    /* Responsive Breakpoints */
    --mobile-max: 767px;
    --tablet-min: 768px;
    --tablet-max: 1023px;
    --desktop-min: 1024px;
    --desktop-large: 1440px;
    
    /* Proportional Scaling */
    --scale-factor: 1;
    --text-block-width: 445px;
    --hero-width: 1375px;
    --hero-height: 775px;
    
    /* Layout helpers */
    --gutter-x: calc(40px * var(--scale-factor));
    --col-w-fixed: calc(445px * var(--scale-factor));
    /* Inner content width (container minus gutters) */
    --inner-w: calc(min(100vw, var(--container-max-width)) - (2 * var(--gutter-x)));
    /* Use fixed width until it overflows, then fit 4 cols */
    --col-w-responsive: min(var(--col-w-fixed), calc(var(--inner-w) / 4));
    /* Gap between columns when space remains; 0 when snug */
    --col-gap: calc((var(--inner-w) - (4 * var(--col-w-responsive))) / 3);
    
    /* Footer height var used across pages */
    --footer-h: calc(305px * var(--scale-factor));
    
    /* Sitewide token: vertical gap above hero used by .home-meta */
    --home-meta-gap: 73px;
    /* Shared top anchor so section heads align across pages */
    --page-top-anchor: calc(305px * var(--scale-factor));
}

/* Remove the default iOS play overlay on inline videos (we use gesture unlock JS) */
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Theme mapping: default is dark */
@media (prefers-color-scheme: light) {
    html:not([data-theme]) {
        --color-black: var(--light-color-white);
        --color-white: var(--light-color-black);
        --color-grey: var(--light-color-grey);
    }
}

/* Button Components */
.btn-white {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s cubic-bezier(0.2,0,0,1);
}

.btn-white:hover {
    color: var(--color-grey);
}

.btn-grey {
    color: var(--color-grey);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s cubic-bezier(0.2,0,0,1); 
}

.btn-grey.no-transition {
    transition: none !important;
}

.btn-grey:hover {
    color: var(--color-white);
}

/* Copy-to-clipboard email and feedback */
.copy-email .icon-copymail {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 4px; /* 4px gap next to the email */
    vertical-align: -1px; /* bottom ~1px under text baseline */
    background-color: currentColor;
    mask: url("assets/mail-copied.svg") center / contain no-repeat;
    -webkit-mask: url("assets/mail-copied.svg") center / contain no-repeat;
}


.icon-lebenslauf {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask: url("assets/lebenlauf-lock.svg") center / contain no-repeat;
    -webkit-mask: url("assets/lebenlauf-lock.svg") center / contain no-repeat;
}

.btn-lebenslauf {
    display: inline-block;
    transition: color 0.3s cubic-bezier(0.2,0,0,1);
}

.btn-lebenslauf:focus,
.btn-lebenslauf:focus-visible {
    outline: none;
}

.btn-lebenslauf .icon-lebenslauf {
    margin-left: 4px; /* 4px gap after text/digits */
    vertical-align: -1px; /* drop icon ~1px below text baseline */
    transition: background-color 0.3s cubic-bezier(0.2,0,0,1);
}

.btn-lebenslauf.is-unlocked .icon-lebenslauf {
    mask: url("assets/lebenlauf-unlock.svg") center / contain no-repeat;
    -webkit-mask: url("assets/lebenlauf-unlock.svg") center / contain no-repeat;
}

.btn-lebenslauf__label {
    display: inline;
}

.btn-lebenslauf__digits {
    display: none;
    gap: 0;
    vertical-align: baseline;
}

.btn-lebenslauf.is-active .btn-lebenslauf__label {
    display: none;
}

.btn-lebenslauf.is-active .btn-lebenslauf__digits {
    display: inline-flex;
    align-items: center;
}

.pin-dot {
    display: inline-block;
    width: calc(var(--font-size-base) - 3px);
    height: calc(var(--font-size-base) - 3px);
    border-radius: 999px;
    border: 1px solid currentColor;
    margin-left: 4px;
    box-sizing: border-box;
    position: relative;
}

.pin-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: currentColor;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.2,0,0,1);
}

.pin-dot.is-filled::after {
    opacity: 1;
}

.btn-lebenslauf__digits .pin-dot:first-child {
    margin-left: 0;
}

@keyframes pin-shake {
    0% { transform: translateX(0); }
    12% { transform: translateX(-12px); }
    24% { transform: translateX(10px); }
    36% { transform: translateX(-8px); }
    48% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    72% { transform: translateX(3px); }
    84% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.btn-lebenslauf.is-error {
    animation: pin-shake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.btn-grey.is-active {
    color: var(--color-white);
}

.btn-lebenslauf-wrapper {
    position: relative;
    display: inline-flex;
    width: fit-content;
}

.btn-lebenslauf {
    position: relative;
    z-index: 1;
}

.lebenslauf-pin[hidden] {
    display: none;
}

.lebenslauf-pin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.btn-lebenslauf-wrapper.is-open .lebenslauf-pin {
    pointer-events: auto;
}

.btn-lebenslauf-wrapper.is-open .btn-lebenslauf {
    pointer-events: none;
}

.lebenslauf-pin__input {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    outline: none;
    pointer-events: auto;
    -webkit-text-fill-color: transparent;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.copy-email .copy-feedback {
    display: inline-block;
    margin-left: 8px; /* 8px gap before feedback */
    color: var(--color-grey); /* dark: --color-grey; light maps to --light-color-grey */
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-40px, 0, 0);
    transition: transform 200ms cubic-bezier(0.2,0,0,1), opacity 120ms linear;
}

.copy-email.is-copied .copy-feedback {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.copy-email.is-hiding .copy-feedback {
    transition-duration: 150ms;
    transform: translate3d(-40px, 0, 0);
    opacity: 0;
}

/* Keep hover color while copied state is active */
.btn-grey.is-copied {
    color: var(--color-white);
}

/* Typography Utilities */
.regular-font {
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 300;
    font-style: normal;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
}

.regular-font-grey {
    color: var(--color-grey);
    font-size: var(--font-size-base);
    font-weight: 300;
    font-style: normal;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-family-primary);
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Cursor-follow label */
.cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.2,0,0,1);
    color: #fff;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: 300;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
    white-space: nowrap;
}
.cursor-label.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .cursor-label { transition: none; }
}

/* Cursor-follow preview for Arbeiten index */
.cursor-preview {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity 120ms ease-out;
}
.cursor-preview.is-visible { opacity: 1; }
.cursor-preview img {
    display: block;
    width: 280px;
    height: auto;
    max-width: 32vw;
    max-height: 36vh;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .cursor-preview { transition: none; }
}

/* Home (index) page: fixed design height */
body.home {
    /* Align hero/meta with about page top edge while keeping 73px offset */
    --hero-top: calc(var(--page-top-anchor) + var(--home-meta-gap));
    --hero-gap: calc(289px * var(--scale-factor));
    /* Use full viewport width so hero/footer align on ultra-wide */
    --inner-w: calc(100vw - (2 * var(--gutter-x)));
    /* Compute columns and gaps off this inner width */
    --col-w-responsive: min(var(--col-w-fixed), calc(var(--inner-w) / 4));
    --col-gap: calc((var(--inner-w) - (4 * var(--col-w-responsive))) / 3);
    /* Hero in column 2 (after spacer col + gap) */
    --hero-w: calc(var(--inner-w) - (var(--col-w-responsive) + var(--col-gap)));
    --hero-h: calc(var(--hero-w) * 9 / 16);
    /* Overlay row (home-meta) gap above the hero top comes from sitewide token */
    /* Page height = anchor + hero height + gap + footer */
    --page-min-h: calc(var(--hero-top) + var(--hero-h) + var(--hero-gap) + var(--footer-h));
    height: auto;
    min-height: var(--page-min-h);
}

.menu {
    position: fixed; 
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: calc(40px * var(--scale-factor)) calc(40px * var(--scale-factor)) calc(40px * var(--scale-factor)) calc(40px * var(--scale-factor));
    width: 100%;
    min-height: calc(12px * var(--scale-factor));
    box-sizing: border-box;
    font-size: var(--font-size-base);
    color: var(--color-white);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
    z-index: 1000;
    /* Hide/reveal animation */
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.2,0,0,1);
}

/* Hidden state for scroll-down */
.menu.menu--hidden {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .menu { transition: none; }
}

.menu-right {
    display: flex;
    gap: calc(12px * var(--scale-factor));
}

.menu-left {
    display: flex;
    align-items: flex-start;
}

/* Shared meta row layout used across multiple pages */
.meta-row {
    position: absolute;
    left: 0;
    right: 0; /* span full viewport width like footer */
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 var(--gutter-x);
    box-sizing: border-box;
    /* Use viewport width for 4-col math so columns spread fully */
    --inner-w: calc(100vw - (2 * var(--gutter-x)));
}

.meta-row .meta-col {
    width: var(--col-w-responsive);
    position: relative;
}

/* Intro text default (homepage overrides below) */
.intro-text {
    width: calc(445px * var(--scale-factor));
    max-width: calc(100vw - calc(40px * var(--scale-factor) * 2));
    position: absolute;
    bottom: calc(266px * var(--scale-factor));
    left: 0;
}

.all-index {
    position: absolute;
    top: calc(1629px * var(--scale-factor));
    right: 0;
}

/* Mobile all-index adjustments removed */

/* Wrapper that anchors the hero section at the correct vertical offset
   and provides a consistent 38px gap below the hero via flex column */
.home-hero-block {
    position: absolute;
    top: var(--hero-top);
    left: 0;
    right: 0;
    padding: 0 var(--gutter-x);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: calc(38px * var(--scale-factor));
}

.home-hero {
    position: static; /* inside the wrapper */
    display: flex;
    padding: 0; /* gutters handled by wrapper */
    box-sizing: border-box;
    /* Match footer's column math so gaps align on ultra-wide screens */
    --inner-w: calc(100vw - (2 * var(--gutter-x)));
    /* Recompute local responsive columns and gap based on this inner width */
    --col-w-responsive: min(var(--col-w-fixed), calc(var(--inner-w) / 4));
    --col-gap: calc((var(--inner-w) - (4 * var(--col-w-responsive))) / 3);
}

.hero-spacer {
    /* First column + one gap to align hero with footer col2 */
    flex: 0 0 var(--col-w-responsive);
    margin-right: var(--col-gap);
}

.hero-content {
    /* Second column = auto-fills remaining space */
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--hero-h, calc(min(100vw, 1375px) * 9 / 16));
}

.hero-video {
    display: block; /* legacy fallback before positioning below */
}

.hero-video-shell {
    position: absolute;
    inset: 0;
}

/* Ensure anchor does not constrain image width */
.hero-link {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: var(--hero-h, calc(min(100vw, 1375px) * 9 / 16));
}
/* hero-video hover*/
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 400ms ease-out;
}

.hero-video--mobile {
    display: none;
}

.hero-video--desktop {
    display: block;
}

.hero-link::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: #0c0c0c; 
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.2,0,0,1);
}

.hero-link:hover .hero-video,
.hero-link:focus-visible .hero-video {
    filter: blur(2px);
    /* allocate just-in-time during interaction */
    will-change: filter;
}

.hero-link:hover::after,
.hero-link:focus-visible::after {
    opacity: 0.3;
    /* allocate just-in-time during interaction */
    will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
    .hero-video { transition: none; }
    .hero-link::after { transition: none; }
}

/* (contain removed on large wrappers to avoid large layer allocations) */

footer {
    width: 100%;
    /* Remove clamp so footer can span ultra-wide screens */
    /* max-width: var(--container-max-width); */
    height: var(--footer-h);
    min-height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, var(--col-w-responsive)));
    grid-auto-rows: minmax(min-content, auto);
    column-gap: max(var(--col-gap), 0px);
    row-gap: calc(32px * var(--scale-factor));
    align-content: stretch;
    padding: calc(40px * var(--scale-factor));
    box-sizing: border-box;
    /* Use viewport width for column math inside footer */
    --inner-w: calc(100vw - (2 * var(--gutter-x)));
}

/* Home (index) footer position derived from page height */
body.home footer {
    top: auto;
    bottom: 0;
}

/* Mobile footer layout removed */

.footer-copyright {
    color: var(--color-white);
    grid-column: 1 / 2;
    width: var(--col-w-responsive);
    min-height: calc(224px * var(--scale-factor));
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(32px * var(--scale-factor));
}

/* Mobile footer-copyright adjustments removed */

.footer-copyright p {
    margin: 0;
}

.footer-text {
    display: none;
}

/* Mobile footer-text adjustments removed */

.footer-text p {
    display: none;
}

.footer-image {
    color: var(--color-white);
    width: var(--col-w-responsive);
    height: calc(224px * var(--scale-factor));
    display: none;
}

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

/* Mobile footer-image adjustments removed */

.footer-imprint {
    color: var(--color-white);
    width: var(--col-w-responsive);
    height: calc(224px * var(--scale-factor));
    display: none;
}

/* Mobile footer-imprint adjustments removed */

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin: 0;
    margin-top: auto;
    width: 100%;
}

.footer-links__contact {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.footer-links__legal {
    display: flex;
    flex-direction: column;
    gap: 17px;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

/* ------------------------------------------------------------
   Home overlay: 4-col flex row for intro + Alle Arbeiten
   - Aligns with global gutter and 4-col system
   - Matches single-line row height (var(--font-size-base))
   - Positioned to keep same vertical placement as previous
   ------------------------------------------------------------ */
.home-meta {
    position: absolute;
    left: 0;
    right: 0; /* span full viewport width like footer */
    top: var(--page-top-anchor);
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    /* max-width: var(--container-max-width); */
    margin: 0 auto;
    padding: 0 var(--gutter-x);
    box-sizing: border-box;
    /* Use viewport width for 4-col math so columns spread fully */
    --inner-w: calc(100vw - (2 * var(--gutter-x)));
}

.home-meta .meta-col {
    width: var(--col-w-responsive);
    height: auto;
    position: relative;
}

/* Intro text in column 1 */
.home-meta .meta-col--1 .intro-text {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
}

/* All Arbeiten button top-right in column 4 */
.home-meta .meta-col--4 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
.home-meta .meta-col--4 .all-index {
    position: static;
}

/* Second home row for the contact link (same 4-col, different vertical position) */
.home-meta-all-index {
    position: static; /* placed under hero by wrapper */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0; /* gutters handled by wrapper */
    padding: 0;
    box-sizing: border-box;
    /* Use viewport width for 4-col math so columns spread fully */
    --inner-w: calc(100vw - (2 * var(--gutter-x)));
}

/* ------------------------------------------------------------
   Home intro/All-Arbeiten: desktop (>=1024px)
   - Lock intro copy to 445px regardless of viewport
   - Collapse unused spacer columns to free width
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
    body.home .home-meta {
        display: grid;
        grid-template-columns: var(--col-w-fixed) 1fr;
        column-gap: var(--gutter-x);
        align-items: flex-start;
        justify-content: stretch;
    }
    body.home .home-meta .meta-col--1 {
        width: var(--col-w-fixed);
    }
    body.home .home-meta .meta-col--1 .intro-text {
        width: var(--col-w-fixed);
        max-width: none;
    }
    body.home .home-meta .meta-col--2,
    body.home .home-meta .meta-col--3 {
        display: none;
    }
    body.home .home-meta .meta-col--4 {
        display: flex;
        width: auto;
        justify-content: flex-end;
        align-items: flex-start;
        justify-self: end;
    }
}
.home-meta-all-index .meta-col {
    width: var(--col-w-responsive);
    position: relative;
}
.home-meta-all-index .meta-col--4 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
.home-meta-all-index .meta-col--4 .contact {
    position: static;
}

/* ------------------------------------------------------------
   Mobile & Tablet (<=1023px)
   - Keep single-row 4-col structures (no column stacking)
   - Share mobile layout behaviour with tablet portrait widths
   - Apply ellipsis to prevent wrapping/overflow
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    :root {
        /* Shared compact tokens reused on tablet */
        --footer-mobile-safe: 246px;
        --footer-tablet-h: clamp(var(--footer-mobile-safe), 36vh, var(--footer-h));
        --footer-tablet-pad-y: clamp(32px, 5vh, 40px);
        /* Hero height for full-bleed 16:9 video at 100vw */
        --hero-mobile-h: calc(100vw * 9 / 16);
        /* Uniform gap between hero bottom and footer top */
        --hero-footer-gap: 182px;
    }

    /* Compact menu spacing: keep 40px top gutter */
    .menu {
        padding: 40px var(--gutter-x) 20px var(--gutter-x);
    }
    .menu-right {
        gap: 8px;
    }

    /* Keep meta rows on a single line; allow contents to truncate */
    .meta-row { flex-wrap: nowrap; }
    .meta-row .meta-col { min-width: 0; }
    .meta-row .meta-col > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Footer simplified layout for compact widths */
    footer {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        flex-wrap: nowrap;
        padding: 20px var(--gutter-x) 40px var(--gutter-x);
    }
    footer > * { min-width: 0; }
    /* Hide long paragraph on compact widths */
    .footer-text {
        display: none;
    }
    /* Hide footer image by default; tablet override re-enables */
    .footer-image { display: none; }

    /* Footer links stacked with 15px gaps; legal pair appended to list */
    .footer-links {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 0;
        margin-top: 0;
    }
    .footer-links__contact {
        gap: 15px;
    }
    .footer-links__legal {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        text-align: left;
    }

    /* Copyright left-aligned without extra bottom gap */
    .footer-copyright { height: auto; width: 100%; margin: 0; gap: 15px; }
    .footer-copyright p { position: static; }

    /* Hide standalone imprint block; links live inside footer-links */
    .footer-imprint {
        display: none;
    }

    /* Home hero: minimal mobile flow adjustments */
    .home-hero-block {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        padding: 0 var(--gutter-x);
        gap: 12px;
    }
    .hero-spacer { display: none; }
    .home-meta {
        position: static;
        top: auto;
        padding: 0 var(--gutter-x);
    }
    
    /* --------------------------------------------------------
       Index (home) mobile layout
       - Keep intro at y=131px (left-aligned)
       - Hero video starts flush to window bottom (not fixed)
       - Maintain 16:9 at 100vw width
       - Uniform 182px gap to footer across widths
       -------------------------------------------------------- */
    body.home { min-height: 100vh; position: relative; padding-bottom: 0; }

    /* Intro row and All Arbeiten overlay positioning */
    body.home .home-meta {
        position: absolute;
        top: 131px;
        left: 0;
        right: 0;
        padding: 0 0 0 var(--gutter-x);
        display: block;
        z-index: 100; /* ensure overlay sits above hero/footer */
    }
    body.home .home-meta .meta-col--1 { padding-right: var(--gutter-x); box-sizing: border-box; }
    body.home .home-meta .meta-col { display: block; width: 100%; }
    body.home .home-meta .meta-col--2,
    body.home .home-meta .meta-col--3 { display: none; }
    body.home .home-meta .meta-col > * { white-space: normal; overflow: visible; text-overflow: clip; }
    body.home .home-meta .meta-col--4 { position: static; }

    /* Place hero so its bottom is flush with the viewport bottom on load
       while keeping it in normal flow to prevent footer overlap */
    body.home .home-hero-block {
        position: static;
        left: 0;
        right: 0;
        padding: 0; /* make hero full-bleed; meta gets its own gutter */
        padding-top: calc(100vh - var(--hero-mobile-h));
        /* 15px gap to contact link + one text line (approx 14px) + remainder = 182px */
        padding-bottom: calc(var(--hero-footer-gap) - 15px - var(--font-size-base));
        gap: 15px;
    }
    body.home .home-hero { padding: 0; }
    body.home .hero-link {
        position: relative; /* keep positioning context for blurred shell */
        width: 100vw;
        display: block;
        margin: 0;
        padding: 0;
    }
    body.home .hero-video-shell {
        position: static;
        display: block;
        width: 100%;
        height: auto;
    }
    body.home .hero-video {
        position: static;
        display: block;
        width: 100vw;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* Remove hover/press effects on the hero for mobile */
    body.home .hero-video { transition: none; }
    body.home .hero-link::after { opacity: 0; transition: none; }
    body.home .hero-link:hover .hero-video,
    body.home .hero-link:active .hero-video,
    body.home .hero-link:focus-visible .hero-video { filter: none; }
    body.home .hero-link:hover::after,
    body.home .hero-link:active::after,
    body.home .hero-link:focus-visible::after { opacity: 0; }
    /* Hide cursor-follow label on the home hero only (mobile view) */
    body.home .cursor-label { display: none !important; }
    body.home .home-meta-all-index { padding: 0 var(--gutter-x); display: block; }
    body.home .home-meta-all-index .meta-col { width: 100%; }
    body.home .home-meta-all-index .meta-col--1,
    body.home .home-meta-all-index .meta-col--2,
    body.home .home-meta-all-index .meta-col--3 { display: none; }
    body.home .home-meta-all-index .meta-col--4 { display: flex; justify-content: flex-end; }
    body.home .home-meta-all-index .contact { white-space: nowrap; display: inline-block; text-align: right; }

    /* Footer remains in normal flow; gap above is controlled by hero-block padding */
    body.home footer { position: static; }

    /* Position the All Arbeiten button 70px above the hero top, right-aligned */
    body.home .home-meta .meta-col--4 .all-index {
        position: absolute;
        /* hero top relative to page: (100vh - hero-h); subtract overlay top (131px), then 70px and one line height */
        top: calc((100vh - var(--hero-mobile-h)) - 131px - 70px - var(--font-size-base));
        right: var(--gutter-x);
        left: auto;
        white-space: nowrap;
        text-align: right;
    }

    /* Position the "Schreib mir" contact button 70px above the hero video, right-aligned */
    body.home .home-meta .meta-col--4 .contact {
        position: absolute;
        /* hero top relative to page: (100vh - hero-h); subtract overlay top (131px), then 70px */
        top: calc((100vh - var(--hero-mobile-h)) - 131px - 70px);
        right: var(--gutter-x);
        left: auto;
        white-space: nowrap;
        text-align: right;
    }
}

@media (max-width: 767px) {
    .hero-video--desktop {
        display: none !important;
    }
    .hero-video--mobile {
        display: block;
    }
}

/* ------------------------------------------------------------
   Mobile-specific tweaks (<=600px)
   - Reinstate 20px gutters for narrow handsets
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    :root {
        --gutter-x: 20px;
    }

    footer {
        padding: 20px var(--gutter-x) 22px var(--gutter-x);
    }

    .footer-links__legal {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
    }

    .menu {
        padding: 20px var(--gutter-x);
    }
}

/* ------------------------------------------------------------
   Tablet portrait (601px - 1023px)
   - Keep mobile flow with wider gutters
   - Footer switches to a two-column grid with image on the right
   ------------------------------------------------------------ */
@media (min-width: 601px) and (max-width: 1023px) {
    footer {
        --footer-tablet-img-h: calc(var(--footer-tablet-h) - (2 * var(--footer-tablet-pad-y)));
        --footer-tablet-img-w: min(calc(var(--footer-tablet-img-h) * 0.75), clamp(220px, 32vw, 360px));
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--footer-tablet-img-w);
        grid-template-areas: "footer-copy footer-image";
        column-gap: var(--gutter-x);
        row-gap: 24px;
        align-items: stretch;
        align-content: start;
        padding: var(--footer-tablet-pad-y) var(--gutter-x);
        min-height: var(--footer-tablet-h);
    }
    footer > * {
        min-width: 0;
    }
    .footer-image {
        display: flex;
        grid-area: footer-image;
        grid-row: 1 / span 2;
        justify-content: flex-end;
        align-items: stretch;
        align-self: center;
        justify-self: end;
        width: var(--footer-tablet-img-w);
        height: var(--footer-tablet-img-h);
    }
    .footer-image img {
        margin-left: auto;
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: cover;
    }
    .footer-copyright {
        width: 100%;
        position: static;
        grid-area: footer-copy;
        margin: 0;
    }
    .footer-copyright p {
        position: static;
    }
    .footer-links {
        gap: 18px;
    }
    .footer-links__legal {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
    }
    .home-meta .meta-col--1 {
        display: grid;
        grid-template-columns: minmax(0, 435px) minmax(0, 435px);
        column-gap: 20px;
        justify-content: flex-start;
        justify-items: start;
        align-items: start;
        width: calc((435px * 2) + 20px);
        max-width: 100%;
    }
    .home-meta .meta-col--1 .intro-text {
        grid-column: 1 / 2;
        max-width: 435px;
        width: 100%;
    }
    .home-meta .meta-col--1::after {
        content: "";
        grid-column: 2;
    }
}