/* ===================================================================
 * Landing Stylesheet – "Mother"
 * ------------------------------------------------------------------
 * Ergänzt css/styles.css, ohne es zu verändern.
 * Basis: 1rem ≈ 12px (--base-size 75.5% in styles.css).
 *
 * # SETTINGS
 * # SHARED (container, kicker, cta, focus) – Skip-Link: css/a11y.css
 * # HERO
 * # DISCOVER (Entstehungs-Scrubber)
 * # CURATE (drei Kacheln)
 * # ACT (Mitmach-Rubrik)
 * # MOTION (reveal, reduced motion)
 * ------------------------------------------------------------------ */


/* ===================================================================
 * # SETTINGS
 * ------------------------------------------------------------------- */
:root {
    --lp-ink        : #0d0d0d;
    --lp-ink-soft   : #3b3d40;                  /* = --color-gray-17 */
    --lp-paper      : var(--color-body);        /* Seitenhintergrund, Fläche der Kacheln */
    --lp-night      : var(--color-1-darkest);   /* Fläche Entdecker */
    --lp-night-text : #c5cdd4;                  /* = --color-gray-10, 11:1 auf night */      
    --lp-teal       : var(--color-1-dark);      /* Petrol der Website, 6:1 mit Weiß */
    --lp-mint       : #8fe3dc;                  /* Türkis aus dem Bild – Akzent auf Dunkel */

    --lp-gutter     : clamp(1.6rem, 5vw, 6rem);
    --lp-max        : var(--width-wide);
    --lp-ease       : cubic-bezier(.2, .7, .2, 1);
    --lp-focus      : var(--lp-ink);
}


/* ===================================================================
 * # SHARED
 * ------------------------------------------------------------------- */
.s-landing {
    display : block;
    outline : 0;
}

.lp-container {
    width        : 100%;
    max-width    : var(--lp-max);
    margin-left  : auto;
    margin-right : auto;
    padding-left : var(--lp-gutter);
    padding-right: var(--lp-gutter);
}

.lp-kicker {
    font-family    : var(--font-1);
    font-size      : var(--text-sm);
    font-weight    : 700;
    line-height    : 1.4;
    letter-spacing : .22em;
    text-transform : uppercase;
    color          : var(--lp-ink-soft);
    margin         : 0 0 var(--vspace-0_75);
}

.lp-kicker--light {
    color : var(--lp-night-text);
}

/* sichtbarer Fokus – styles.css setzt an vielen Stellen outline:0 */
.s-landing a:focus-visible,
.s-landing button:focus-visible,
.s-landing input:focus-visible {
    outline        : 3px solid var(--lp-focus);
    outline-offset : 4px;
}

.s-discover,
.s-act {
    --lp-focus : var(--color-1-darker);
}

/* call to action */
.lp-cta {
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    gap              : 1.2rem;
    min-height       : 5.6rem;                 /* ≈ 67px Touch-Ziel */
    padding          : 1.4rem 2.8rem;
    font-family      : var(--font-1);
    font-size        : var(--text-md);
    font-weight      : 700;
    line-height      : 1.2;
    letter-spacing   : .01em;
    text-decoration  : none;
    border           : 2px solid transparent;
    border-radius    : 999px;
    transition       : background-color .3s var(--lp-ease), color .3s var(--lp-ease), border-color .3s var(--lp-ease);
}

.lp-cta__icon {
    flex-shrink : 0;
    transition  : transform .4s var(--lp-ease);
}

.lp-cta:hover .lp-cta__icon,
.lp-cta:focus-visible .lp-cta__icon {
    transform : translateX(.4rem);
}

.lp-cta--ink,
.lp-cta--ink:focus {
    background-color : var(--lp-ink);
    color            : white;
}

.lp-cta--ink:hover {
    background-color : var(--color-1-dark);
    color            : white;
}

.lp-cta--ink .lp-cta__icon { transform: none; }
.lp-cta--ink:hover .lp-cta__icon,
.lp-cta--ink:focus-visible .lp-cta__icon {
    transform : translateY(.4rem);
}

.lp-cta--light,
.lp-cta--light:focus {
    background-color : white;
    color            : var(--color-1-darker);
}

.lp-cta--light:hover {
    background-color : var(--color-1-darkest);
    color            : var(--color-1-lightest);
}

.lp-cta--outline,
.lp-cta--outline:focus {
    border-color : rgba(255, 255, 255, .7);
    color        : white;
}

.lp-cta--outline:hover {
    border-color     : white;
    background-color : rgba(255, 255, 255, .1);
    color            : white;
}


/* ===================================================================
 * # HERO
 * ------------------------------------------------------------------- */
.s-lp-hero {
    background-color : var(--color-1-lightest);
    padding-top      : 14rem;                  /* Platz für absoluten Header */
    padding-bottom   : var(--vspace-3);
    overflow         : hidden;
}

.s-lp-hero__title {
    font-family    : var(--font-3);
    font-weight    : 400;
    font-size      : clamp(8rem, 21vw, 30rem);
    line-height    : .86;
    letter-spacing : -.045em;
    color          : var(--lp-ink);
    margin         : 0 0 var(--vspace-1_5) -.05em;
}

.s-lp-hero__dot {
    color : var(--color-1-dark);
}

.s-lp-hero__foot {
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    gap            : var(--vspace-1);
    border-top     : 2px solid var(--lp-ink);
    padding-top    : var(--vspace-1);
}

.s-lp-hero__lead {
    font-size   : clamp(var(--text-md), 2.4vw, var(--text-xl));
    line-height : 1.4;
    color       : var(--lp-ink);
    max-width   : 32ch;
    margin      : 0;
}

@media screen and (min-width: 800px) {
    .s-lp-hero {
        padding-top : 16rem;
    }

    .s-lp-hero__foot {
        flex-direction  : row;
        align-items     : center;
        justify-content : space-between;
    }
}


/* ===================================================================
 * # DISCOVER – Entstehungs-Section
 * ------------------------------------------------------------------- */
.s-discover {
    background-color : var(--lp-night);
    color            : white;
    padding-top      : var(--vspace-4);
    padding-bottom   : var(--vspace-4);
}

.s-discover__grid {
    display : grid;
    gap     : var(--vspace-2);
}

.s-discover__title {
    font-family    : var(--font-3);
    font-weight    : 400;
    font-size      : clamp(5rem, 9vw, 12rem);
    line-height    : .95;
    letter-spacing : -.03em;
    color          : white;
    margin         : 0 0 var(--vspace-1);
}

.s-discover__lead {
    font-size   : var(--text-md);
    line-height : 1.5;
    color       : var(--lp-night-text);
    max-width   : 40ch;
    margin      : 0;
}

/* -- Fallback ohne JS: nummerierte Bildreihe ------------------------ */
.discover__layers {
    list-style  : none;
    margin      : 0;
    padding     : 0;
    display     : grid;
    gap         : var(--vspace-1_5);
}

.discover__layer {
    padding : 0;
}

.discover__layer figure {
    margin : 0;
}

.discover__layer img {
    display          : block;
    width            : 100%;
    height           : auto;
    margin           : 0;
    background-color : #1a2225;
}

.discover__layer figcaption {
    text-align  : left;
    color       : var(--lp-night-text);
    font-size   : var(--text-sm);
    line-height : 1.5;
    margin-top  : var(--vspace-0_5);
}

.discover__layer figcaption strong {
    color : white;
}

.discover__num {
    font-family : var(--font-3);
    color       : var(--lp-mint);
    margin-right: .4rem;
}

@media screen and (min-width: 600px) {
    .discover__layers {
        grid-template-columns : repeat(2, 1fr);
    }
}

/* -- Erweiterter Modus (discover.js aktiv) -------------------------- */
.discover.is-enhanced {
    display : grid;
    gap     : var(--vspace-1_25);
}

.is-enhanced .discover__stage {
    position      : relative;
    aspect-ratio  : 3 / 4;
    width         : 100%;
    max-width     : 60rem;
    margin        : 0 auto;
    overflow      : hidden;
    border-radius : 2px;
    box-shadow    : 0 3rem 8rem rgba(0, 0, 0, .55);
    background-color : #1a2225;
    touch-action  : pan-y;                    /* vertikal scrollen bleibt möglich */
    cursor        : ew-resize;
    user-select   : none;
    -webkit-user-select : none;
}

.is-enhanced .discover__stage.is-dragging {
    cursor : grabbing;
}

.is-enhanced .discover__layers {
    display  : block;
    position : absolute;
    inset    : 0;
}

.is-enhanced .discover__layer {
    position    : absolute;
    inset       : 0;
    opacity     : 0;
    will-change : opacity;
}

.is-enhanced .discover__layer:first-child {
    opacity : 1;
}

.is-enhanced .discover__layer img {
    background-color : transparent;         /* noch ladende Ebenen verdecken nichts */
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    pointer-events : none;
    -webkit-user-drag : none;
}

.is-enhanced .discover__layer figcaption {
    position  : absolute;
    clip-path : inset(50%);
    width     : 1px;
    height    : 1px;
    overflow  : hidden;
}

/* Zieh-Hinweis */
.discover__hint {
    position         : absolute;
    left             : 50%;
    bottom           : 2rem;
    transform        : translateX(-50%);
    margin           : 0;
    padding          : .8rem 1.8rem;
    border-radius    : 999px;
    background-color : rgba(4, 11, 14, .72);
    color            : white;
    font-size        : var(--text-sm);
    font-weight      : 700;
    letter-spacing   : .12em;
    text-transform   : uppercase;
    white-space      : nowrap;
    pointer-events   : none;
    transition       : opacity .6s var(--lp-ease);
}

.discover__hint span {
    color   : var(--lp-mint);
    display : inline-block;
}

.discover__hint.is-gone {
    opacity : 0;
}

/* Anzeige der aktuellen Stufe */
.discover__readout {
    margin-bottom : var(--vspace-1);
    min-height    : 18rem;                    /* verhindert Springen beim Textwechsel */
}

.discover__count {
    font-family    : var(--font-3);
    font-size      : var(--text-lg);
    color          : var(--color-1-dark );
    letter-spacing : .04em;
    margin         : 0;
}

.discover__of {
    color : var(--lp-night-text);
}

.discover__name {
    font-family    : var(--font-3);
    font-size      : clamp(4.4rem, 7vw, 8.8rem);
    line-height    : 1;
    letter-spacing : -.03em;
    color          : white;
    margin         : .4rem 0 var(--vspace-0_5);
}

.discover__text {
    font-size   : var(--text-size);
    line-height : 1.55;
    color       : var(--lp-night-text);
    max-width   : 42ch;
    margin      : 0;
}

/* Slider */
.discover__range {
    --p              : 0%;
    -webkit-appearance : none;
    appearance       : none;
    display          : block;
    width            : 100%;
    height           : 4.4rem;                 /* Touch-Ziel */
    margin           : 0 0 var(--vspace-0_5);
    padding          : 0;
    background       : transparent;
    border           : 0;
    cursor           : pointer;
}

.discover__range::-webkit-slider-runnable-track {
    height        : 4px;
    border-radius : 4px;
    background    : linear-gradient(to right, var(--lp-mint) var(--p), rgba(255, 255, 255, .22) var(--p));
}

.discover__range::-moz-range-track {
    height        : 4px;
    border-radius : 4px;
    background    : rgba(255, 255, 255, .22);
}

.discover__range::-moz-range-progress {
    height        : 4px;
    border-radius : 4px;
    background    : var(--lp-mint);
}

.discover__range::-webkit-slider-thumb {
    -webkit-appearance : none;
    width              : 2.8rem;
    height             : 2.8rem;
    margin-top         : calc(2px - 1.4rem);
    border-radius      : 50%;
    background         : white;
    border             : 4px solid var(--lp-mint);
    box-shadow         : 0 .4rem 1.6rem rgba(0, 0, 0, .5);
    transition         : transform .2s var(--lp-ease);
}

.discover__range::-moz-range-thumb {
    width         : 2rem;
    height        : 2rem;
    border-radius : 50%;
    background    : white;
    border        : 4px solid var(--lp-mint);
    box-shadow    : 0 .4rem 1.6rem rgba(0, 0, 0, .5);
}

.discover__range:active::-webkit-slider-thumb {
    transform : scale(1.15);
}

/* Stufen-Buttons – überschreibt die globalen Button-Styles aus styles.css */
.discover__steps {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : .8rem;
}

.s-discover .discover__step {
    height           : auto;
    min-height       : 4.4rem;
    margin           : 0;
    padding          : 1rem 1.2rem;
    font-family      : var(--font-1);
    font-size        : var(--text-sm);
    font-weight      : 700;
    line-height      : 1.2;
    letter-spacing   : .04em;
    text-transform   : none;
    white-space      : normal;
    color            : var(--lp-night-text);
    background-color : transparent;
    border           : 1px solid rgba(255, 255, 255, .25);
    border-radius    : 999px;
}

.s-discover .discover__step:hover {
    color            : white;
    background-color : rgba(255, 255, 255, .08);
    border-color     : rgba(255, 255, 255, .6);
}

.s-discover .discover__step[aria-pressed="true"] {
    color            : var(--lp-night);
    background-color : var(--lp-mint);
    border-color     : var(--lp-mint);
}

@media screen and (min-width: 600px) {
    .discover__steps {
        grid-template-columns : repeat(4, 1fr);
    }
}

/* Mobil: nur der Slider über dem Bild, Stufenanzeige und Buttons darunter, kein Zieh-Hinweis */
@media screen and (max-width: 799px) {
    .is-enhanced .discover__controls { display: contents; }
    .is-enhanced .discover__range    { order: -1; margin-bottom: 0; }
    .is-enhanced .discover__readout,
    .is-enhanced .discover__steps    { order: 1; }
    .is-enhanced .discover__readout  { margin-bottom: 0; }
    .is-enhanced .discover__hint     { display: none; }
}

/* Pad: Steuerung (Stufenanzeige + Slider) über dem Bild */
@media screen and (min-width: 800px) and (max-width: 1260px) {
    .is-enhanced .discover__controls { order: -1; }
    .is-enhanced .discover__stage    { width: min(100%, calc(86vh * 3 / 4)); }   /* quer: ganzes Bild im Viewport */
}

@media screen and (min-width: 1261px) {
    /* nur im erweiterten Modus – der No-JS-Fallback bleibt einspaltig */
    .s-discover__grid:has(.is-enhanced) {
        grid-template-columns : minmax(0, 5fr) minmax(0, 6fr);
        grid-template-areas   : "head head" "controls stage";   /* Kopf über Bild und Stufenanzeige */
        column-gap            : var(--vspace-3);
        row-gap               : var(--vspace-2);
        align-items           : start;
    }

    .s-discover__grid:has(.is-enhanced) .s-discover__head { grid-area: head; }

    /* die Komponente löst sich ins Sektionsraster auf */
    .discover.is-enhanced      { display: contents; }
    .is-enhanced .discover__stage    {
        grid-area    : stage;
        max-width    : none;
        width        : min(100%, calc(86vh * 3 / 4));   /* ganzes Bild im Viewport */
        justify-self : end;
    }
    .is-enhanced .discover__controls { grid-area: controls; align-self: center; }
}


/* ===================================================================
 * # CURATE – Was möchte ich heute sehen?
 * ------------------------------------------------------------------- */
.s-curate {
    background-color : var(--color-1-lightest);
    padding-top      : var(--vspace-4);
    padding-bottom   : var(--vspace-4);
}

.s-curate__head {
    margin-bottom : var(--vspace-2);
}

.s-curate__title {
    font-family    : var(--font-3);
    font-weight    : 400;
    font-size      : clamp(4.4rem, 8.5vw, 12rem);
    line-height    : .98;
    letter-spacing : -.03em;
    color          : var(--lp-ink);
    max-width      : 13ch;
    margin         : 0 0 var(--vspace-0_75);
}

.s-curate__lead {
    font-size : var(--text-md);
    color     : var(--lp-ink-soft);
    margin    : 0;
}

.s-curate__list {
    list-style : none;
    margin     : 0;
    padding    : 0;
    display    : grid;
    gap        : 1.6rem;
}

.s-curate__list > li {
    padding : 0;
}

/* Kachel */
.lp-tile {
    --tile-color     : var(--lp-ink);
    position         : relative;
    display          : grid;
    grid-template-columns : minmax(0, 1fr) 10rem;
    align-items      : stretch;
    min-height       : 15rem;
    height           : 100%;
    color            : var(--lp-ink);
    background-color : var(--lp-paper);
    border           : 1px solid var(--lp-ink);
    overflow         : hidden;
    isolation        : isolate;
    text-decoration  : none;
    transition       : color .45s var(--lp-ease);
}

.lp-tile--b-1  { --tile-color: var( --color-1-darker); }
.lp-tile--b-2 { --tile-color: var(--lp-teal); }
.lp-tile--b-3  { --tile-color: var(--color-1-darkest); }

/* Farbfläche, die beim Hover/Fokus von unten aufsteigt */
.lp-tile::before {
    content          : "";
    position         : absolute;
    inset            : 0;
    z-index          : -1;
    background-color : var(--tile-color);
    transform        : scaleY(0);
    transform-origin : bottom;
    transition       : transform .55s var(--lp-ease);
}

.lp-tile:focus {
    color : var(--lp-ink);                  /* styles.css färbt a:focus rosa */
}

.lp-tile:hover,
.lp-tile:focus-visible {
    color : white;
}

.lp-tile:hover::before,
.lp-tile:focus-visible::before {
    transform : scaleY(1);
}

.lp-tile__media {
    order    : 2;
    display  : block;
    overflow : hidden;
    border-left : 2px solid var(--lp-ink);
}

.lp-tile__media img {
    display    : block;
    width      : 100%;
    height     : 100%;
    margin     : 0;
    object-fit : cover;
    transition : transform .8s var(--lp-ease);
}

.lp-tile:hover .lp-tile__media img,
.lp-tile:focus-visible .lp-tile__media img {
    transform : scale(1.06);
}

.lp-tile__body {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    gap            : .8rem;
    padding        : 1.8rem 2rem;
}

.lp-tile__num {
    font-family    : var(--font-3);
    font-size      : var(--text-md);
    letter-spacing : .04em;
}

.lp-tile__title {
    font-family    : var(--font-3);
    font-weight    : 400;
    font-size      : clamp(3rem, 8vw, 4.8rem);
    line-height    : .95;
    letter-spacing : -.03em;
    color          : inherit;
    overflow-wrap  : break-word;
    margin         : 0;
    transition     : none;
}

.lp-tile__pre {
    display        : block;
    font-family    : var(--font-1);
    font-size      : var(--text-sm);
    font-weight    : 700;
    letter-spacing : .22em;
    text-transform : uppercase;
    line-height    : 1.6;
}

.lp-tile__text {
    font-size   : var(--text-size);
    line-height : 1.45;
}

.lp-tile__go {
    display     : inline-flex;
    transition  : transform .45s var(--lp-ease);
}

.lp-tile:hover .lp-tile__go,
.lp-tile:focus-visible .lp-tile__go {
    transform : translateX(.8rem);
}

@media screen and (min-width: 800px) {
    .s-curate__list {
        grid-template-columns : repeat(3, 1fr);
        gap                   : 2rem;
    }

    .lp-tile {
        grid-template-columns : 1fr;
        grid-template-rows    : auto 1fr;
        min-height            : 0;
    }

    .lp-tile__media {
        order         : 0;
        aspect-ratio  : 4 / 5;
        border-left   : 0;
        border-bottom : 2px solid var(--lp-ink);
    }

    .lp-tile__body {
        padding : 2.4rem 2.4rem 2.8rem;
        gap     : 1.6rem;
    }

    .lp-tile__title {
        font-size : clamp(3.6rem, 4.6vw, 6.4rem);
    }
}


/* ===================================================================
 * # ACT – Mitmach-Rubrik
 * ------------------------------------------------------------------- */
.s-act {
    background-color : var(--color-1-darker);
    color            : white;
    padding-top      : var(--vspace-4);
    padding-bottom   : var(--vspace-4);
}

.s-act .lp-kicker--light {
    color : rgba(255, 255, 255, .82);
}

.s-act__grid {
    display : grid;
    gap     : var(--vspace-2_5);
}

.s-act__title {
    font-family    : var(--font-3);
    font-weight    : 400;
    font-size      : clamp(4.8rem, 9vw, 13rem);
    line-height    : .95;
    letter-spacing : -.035em;
    color          : white;
    max-width      : 11ch;
    margin         : 0 0 var(--vspace-1);
}

.s-act__lead {
    font-size   : clamp(var(--text-md), 2vw, var(--text-lg));
    line-height : 1.45;
    max-width   : 36ch;
    margin      : 0 0 var(--vspace-1_5);
}

.s-act__actions {
    display   : flex;
    flex-wrap : wrap;
    gap       : 1.2rem;
    margin    : 0 0 var(--vspace-1);
}

.s-act__more {
    font-size : var(--text-size);
    margin    : 0 0 var(--vspace-0_5);
}

.s-act__more a,
.s-act__more a:focus {
    color                     : white;
    text-decoration           : underline;
    text-decoration-thickness : 2px;
    text-underline-offset     : .25em;
}

.s-act__more a:hover {
    color                 : white;
    text-decoration-color : var(--lp-mint);
}

.s-act__trust {
    font-size : var(--text-sm);
    color     : rgba(255, 255, 255, .85);
    margin    : 0;
}

/* Werkschild */
.s-act__label {
    align-self       : end;
    background-color : white;
    color            : var(--lp-ink);
    padding          : 2.4rem 2.8rem;
    box-shadow       : 0 2.4rem 6rem rgba(0, 0, 0, .30);
}

.s-act__label dl {
    margin : 0;
}

.s-act__label dl > div {
    display               : grid;
    grid-template-columns : 9rem 1fr;
    gap                   : 1.2rem;
    padding               : 1rem 0;
    border-bottom         : 1px solid var(--color-gray-6);
}

.s-act__label dl > div:last-child {
    border-bottom : 0;
}

.s-act__label dt {
    font-size      : var(--text-xs);
    font-weight    : 700;
    letter-spacing : .18em;
    text-transform : uppercase;
    color          : var(--lp-ink-soft);
    line-height    : 2;
}

.s-act__label dd {
    font-size   : var(--text-size);
    line-height : 1.5;
    margin      : 0;
}

.s-act__status {
    display     : inline-flex;
    align-items : center;
    gap         : .8rem;
    font-weight : 700;
}

.s-act__status::before {
    content          : "";
    width            : 1rem;
    height           : 1rem;
    border-radius    : 50%;
    background-color : #1f8a4c;
}

@media screen and (min-width: 1000px) {
    .s-act__grid {
        grid-template-columns : minmax(0, 7fr) minmax(0, 4fr);
        column-gap            : var(--vspace-3);
        align-items           : end;
    }
}


/* ===================================================================
 * # MOTION
 * Inhalte sind immer sichtbar – versteckt wird nur, wenn discover.js
 * läuft (Klasse .lp-motion) UND keine reduzierte Bewegung gewünscht ist.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    .lp-motion [data-reveal] {
        opacity    : 0;
        transform  : translateY(3.2rem);
        transition : opacity .9s var(--lp-ease), transform 1.1s var(--lp-ease);
        transition-delay : var(--d, 0ms);
    }

    .lp-motion [data-reveal].is-revealed {
        opacity   : 1;
        transform : none;
    }

    .discover__hint.is-pulsing span:first-child { animation: lp-nudge-l 1.6s var(--lp-ease) infinite; }
    .discover__hint.is-pulsing span:last-child  { animation: lp-nudge-r 1.6s var(--lp-ease) infinite; }

    @keyframes lp-nudge-l { 50% { transform: translateX(-.4rem); } }
    @keyframes lp-nudge-r { 50% { transform: translateX(.4rem); } }
}

@media (prefers-reduced-motion: reduce) {
    .lp-cta,
    .lp-cta__icon,
    .lp-tile,
    .lp-tile::before,
    .lp-tile__media img,
    .lp-tile__go,
    .discover__hint {
        transition : none !important;
    }
}