/* =====================================================================
   SELF-HOSTED FONT — Cormorant Garamond (GDPR-safe, no Google CDN)
   woff2 files in ../fonts/. Subsets: latin + latin-ext (German umlauts
   ä ö ü ß live in the latin range). Weights 400/500/600, normal+italic.
   ===================================================================== */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-400-italic.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-500-italic.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-600-italic.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* =====================================================================
   LANDING PAGE — Gina Mattiello
   Self-contained styles for the five landing sections (#land, #wege,
   #blick, #stimme, #wort). Additive: load AFTER style.css.
   All selectors are namespaced `lp-` to avoid clashing with site CSS.
   ===================================================================== */

/* ---- Tokens (scoped extensions of the site palette) ---------------- */
:root {
    --lp-bg:        #fcfcfc;   /* off-white base                       */
    --lp-ink:       #1a1a1a;   /* primary text                         */
    --lp-grey:      #6a6a6a;   /* secondary text                       */
    --lp-line:      #e4e0db;   /* hairlines                            */
    --lp-red:       #d54a4a;   /* muted brand red (existing accent)    */
    --lp-red-bold:  #e8401f;   /* editorial red (sections 4 & 5)       */
    --lp-dark:      #0a0a0a;   /* dark sections                        */
    --lp-font-display: "Cormorant Garamond", "Times New Roman", serif;
    --lp-font-serif:   "Times New Roman", Times, serif;
    --lp-font-sans:    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---- Shared section frame ----------------------------------------- */
.lp-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 14vh 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lp-kicker {
    font-family: var(--lp-font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--lp-red);
    margin: 0 0 1.4rem 0;
}

.lp-arrow {
    font-family: var(--lp-font-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-decoration: none;
    color: var(--lp-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    transition: gap 0.4s ease, color 0.4s ease;
}
.lp-arrow .lp-arrow-glyph { transition: transform 0.4s ease; display: inline-block; }
.lp-arrow:hover { gap: 1.1em; }
.lp-arrow:hover .lp-arrow-glyph { transform: translateX(4px); }

/* =====================================================================
   SCROLL-REVEAL  (driven by landing.js)
   ===================================================================== */
.lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
    transition: opacity 0.9s cubic-bezier(.22,.61,.36,1),
                transform 0.9s cubic-bezier(.22,.61,.36,1),
                filter 0.9s ease;
    will-change: opacity, transform, filter;
}
.lp-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
/* stagger helpers */
.lp-reveal[data-delay="1"] { transition-delay: 0.08s; }
.lp-reveal[data-delay="2"] { transition-delay: 0.16s; }
.lp-reveal[data-delay="3"] { transition-delay: 0.24s; }
.lp-reveal[data-delay="4"] { transition-delay: 0.32s; }
.lp-reveal[data-delay="5"] { transition-delay: 0.40s; }

/* =====================================================================
   SECTION 1 — #land   "Land ohne Worte"  (dark, poetic → hoeren.php)
   ===================================================================== */
.lp-land {
    background: var(--lp-dark);
    color: #f2f0ec;
    min-height: 100vh;
    padding: 16vh 6vw;
    justify-content: center;
}
.lp-land__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    background: url('../img/land-ohne-worte.webp') center 40% / cover no-repeat;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 100%);
            mask-image: linear-gradient(to left, #000 35%, transparent 100%);
}
.lp-land__inner { position: relative; z-index: 1; max-width: 1500px; margin: 0 auto; width: 100%; }
.lp-land .lp-kicker { color: #b8b3ab; }

.lp-poem { margin: 0 0 12vh 0; }
.lp-poem__line {
    font-family: var(--lp-font-serif);
    font-size: clamp(1.05rem, 2vw, 1.55rem);
    font-weight: 300;
    line-height: 1.5;
    color: #ece9e4;
    margin: 0.45rem 0;
    max-width: 60ch;
}
.lp-poem__line.is-indent-1 { margin-left: 8vw; }
.lp-poem__line.is-indent-2 { margin-left: 16vw; }
.lp-poem__line.is-spaced   { margin-top: 4.5rem; }

.lp-land__foot {
    display: flex;
    align-items: baseline;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.lp-land .lp-arrow { color: #f2f0ec; }
.lp-land .lp-arrow:hover { color: var(--lp-red); }
.lp-land__title {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    font-weight: 500;
    color: #fff;
    line-height: 1;
}
.lp-land__credit {
    font-family: var(--lp-font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: #8a857d;
    line-height: 1.7;
}

/* =====================================================================
   SECTION 2 — #wege   three cards  (Aktuelles / Biographie / Reviews)
   ===================================================================== */
.lp-wege { background: var(--lp-bg); padding: 16vh 6vw; }
.lp-wege__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 1300px;
    margin: 0 auto 5vh auto;
    width: 100%;
}
.lp-wege__lede {
    font-family: var(--lp-font-display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--lp-ink);
    max-width: 18ch;
}
.lp-wege__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    align-items: start;
}
.lp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 30rem;
    padding: 2.2rem;
    text-decoration: none;
    color: var(--lp-ink);
    background: #fff;
    border: 1px solid var(--lp-line);
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(.22,.61,.36,1), box-shadow 0.55s ease;
}
.lp-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px -28px rgba(0,0,0,0.35); }
.lp-card--raised { transform: translateY(-3rem); }
.lp-card--raised:hover { transform: translateY(calc(-3rem - 8px)); }

.lp-card__num {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 8.5rem;
    line-height: 0.7;
    color: var(--lp-red);
    margin: 0.4rem 0 auto -0.1rem;
    pointer-events: none;
}
.lp-card__label {
    font-family: var(--lp-font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: var(--lp-grey);
    margin: 0 0 0.2rem 0;
}
.lp-card__name {
    font-family: var(--lp-font-display);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.04;
    margin: 0 0 0.6rem 0;
}
.lp-card__desc {
    font-family: var(--lp-font-serif);
    font-size: 0.95rem;
    color: var(--lp-grey);
    margin: 0 0 1.4rem 0;
}
.lp-card__foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lp-card .lp-arrow-glyph { font-size: 1.1rem; transition: transform 0.4s ease; }
.lp-card:hover .lp-arrow-glyph { transform: translateX(5px); }

/* portrait middle card */
.lp-card--media {
    color: #f4f2ee;
    border: none;
    justify-content: flex-end;
}
.lp-card--media .lp-card__bg {
    position: absolute;
    inset: 0;
    background: center 30% / cover no-repeat;
    z-index: 0;
    filter: grayscale(100%);
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.lp-card--media:hover .lp-card__bg { transform: scale(1.05); }
.lp-card--media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.78) 78%);
    z-index: 1;
}
.lp-card--media > * { position: relative; z-index: 2; }
.lp-card--media .lp-card__num { color: rgba(255,255,255,0.92); margin-bottom: auto; }
.lp-card--media .lp-card__label { color: rgba(255,255,255,0.7); }
.lp-card--media .lp-card__desc { color: rgba(255,255,255,0.82); }

/* =====================================================================
   SECTION 3 — #blick   editorial split  (Körper / Sehen → sehen.php)
   ===================================================================== */
.lp-blick {
    background: var(--lp-bg);
    min-height: 100vh;
    padding: 12vh 5vw;
    justify-content: center;
}
.lp-blick__stage {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}
.lp-blick__portrait {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    max-width: 380px;
    aspect-ratio: 3/4;
    object-fit: cover;
    filter: grayscale(100%);
    z-index: 1;
}
.lp-blick__type { position: relative; z-index: 2; pointer-events: none; }
.lp-blick__word {
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: clamp(4rem, 15vw, 13rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--lp-ink);
    text-transform: uppercase;
}
.lp-blick__word--red { color: var(--lp-red-bold); }
.lp-blick__word.is-right { text-align: right; }
.lp-blick__word .lp-script {
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    color: var(--lp-red-bold);
}
.lp-blick__meta {
    position: absolute;
    top: 6%; right: 0;
    max-width: 24ch;
    font-family: var(--lp-font-serif);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--lp-grey);
    z-index: 3;
    text-align: right;
}
.lp-blick__cta {
    position: absolute;
    left: 0; bottom: 2%;
    z-index: 3;
    pointer-events: auto;
}
.lp-blick__hours {
    position: absolute;
    right: 0; bottom: 14%;
    text-align: right;
    z-index: 3;
    font-family: var(--lp-font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--lp-grey);
    text-transform: uppercase;
}
.lp-ticket {
    display: inline-flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--lp-dark);
    color: #f2f0ec;
    padding: 1.4rem 1.6rem;
    text-decoration: none;
    width: 13rem;
    transition: transform 0.5s ease;
}
.lp-ticket:hover { transform: translateY(-6px); }
.lp-ticket__label {
    font-family: var(--lp-font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}
.lp-ticket__thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    filter: grayscale(100%);
}

/* =====================================================================
   SECTION 4 — #stimme   BOLD  (headphones bg → hoeren.php, membra disiecta)
   ===================================================================== */
.lp-stimme {
    background: var(--lp-dark);
    color: #f2f0ec;
    min-height: 100vh;
    padding: 12vh 5vw;
    justify-content: center;
}
.lp-stimme__bg {
    position: absolute;
    inset: -8% 0 -8% 0;
    background: url('../img/gina-mattiello-headphones.webp') center 35% / cover no-repeat;
    opacity: 0.32;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
.lp-stimme::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 40%, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.85) 90%);
    z-index: 1; pointer-events: none;
}
.lp-stimme__inner {
    position: relative; z-index: 2;
    max-width: 1400px; margin: 0 auto; width: 100%;
}
.lp-stimme .lp-kicker { color: #c9c4bb; }
.lp-stimme__headline {
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: clamp(3.4rem, 12vw, 11rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--lp-red-bold);
    margin: 0 0 6vh 0;
}
.lp-stimme__headline .lp-script {
    display: block;
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    color: #f2f0ec;
}
.lp-workcard {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 30rem;
    padding: 1.8rem 2rem;
    background: rgba(232, 64, 31, 0.92);
    color: #fff;
    text-decoration: none;
    transition: transform 0.5s ease;
}
.lp-workcard:hover { transform: translateY(-6px); }
.lp-workcard__title {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1;
}
.lp-workcard__credit {
    font-family: var(--lp-font-sans);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
}
.lp-workcard__cta {
    margin-top: 0.6rem;
    font-family: var(--lp-font-sans);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: inline-flex;
    gap: 0.6em;
}
.lp-workcard:hover .lp-arrow-glyph { transform: translateX(5px); }

/* =====================================================================
   SECTION 5 — #wort   BOLD red name-wall  (→ literatur.php)
   ===================================================================== */
.lp-wort {
    background: var(--lp-red-bold);
    color: #120402;
    min-height: 100vh;
    padding: 14vh 6vw;
    justify-content: center;
}
.lp-wort__ghost {
    position: absolute;
    left: 4vw; bottom: 4vh;
    font-family: var(--lp-font-display);
    font-style: italic;
    font-size: 30vw;
    line-height: 0.7;
    color: rgba(0,0,0,0.06);
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
}
.lp-wort__inner { position: relative; z-index: 1; max-width: 1500px; margin: 0 auto; width: 100%; }
.lp-wort__head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 5vh;
}
.lp-wort .lp-kicker { color: rgba(0,0,0,0.6); }
.lp-wort__list {
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 4.6vw, 3.7rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 0;
}
.lp-wort__item { white-space: nowrap; }
.lp-wort__sep { color: rgba(0,0,0,0.45); font-style: normal; padding: 0 0.15em; }
.lp-wort__item--italic { font-style: italic; }
.lp-wort__item--light  { color: #faf5f2; }
.lp-wort__year {
    font-size: 0.34em;
    vertical-align: super;
    font-style: italic;
    color: rgba(0,0,0,0.55);
    margin-left: 0.1em;
}
.lp-wort__notes {
    display: flex;
    justify-content: space-between;
    gap: 5vw;
    margin-top: 7vh;
    flex-wrap: wrap;
}
.lp-wort__note {
    max-width: 34ch;
    font-family: var(--lp-font-sans);
    font-size: 0.78rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.78);
}
.lp-wort__cta {
    margin-top: 6vh;
}
.lp-wort .lp-arrow { color: #120402; }
.lp-wort .lp-arrow:hover { color: #faf5f2; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
    .lp-section { padding: 12vh 7vw; }
    .lp-land__media { width: 100%; opacity: 0.28;
        -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 90%);
                mask-image: linear-gradient(to top, #000 30%, transparent 90%); }
    .lp-poem__line.is-indent-1 { margin-left: 6vw; }
    .lp-poem__line.is-indent-2 { margin-left: 12vw; }

    .lp-wege__grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .lp-card--raised { transform: none; }
    .lp-card--raised:hover { transform: translateY(-8px); }
    .lp-card { min-height: 24rem; }

    .lp-blick { min-height: auto; }
    .lp-blick__portrait { position: relative; top: auto; left: auto; transform: none;
        width: 64%; margin: 2rem auto; display: block; }
    .lp-blick__meta, .lp-blick__hours { position: relative; right: auto; bottom: auto; top: auto;
        text-align: left; max-width: 100%; margin-bottom: 1.5rem; }
    .lp-blick__cta { position: relative; bottom: auto; left: auto; margin-top: 2rem; }
    .lp-blick__word, .lp-blick__word.is-right { text-align: left; }

    .lp-wort__list { font-size: clamp(1.6rem, 8vw, 3rem); white-space: normal; }
    .lp-wort__item { white-space: normal; }
    .lp-wort__notes { flex-direction: column; gap: 2rem; }
    .lp-wort__ghost { display: none; }
}