/* ===========================================================================
   Startseite (T-11). Nur auf der Startseite geladen (functions.php).
   =========================================================================== */

/* --- Hero Startseite (Sektion 1) -----------------------------------------
   Vollflaechiges Foto, das Text-Panel schwebt darueber. Das Panel haengt per
   bottom:-50px an der festen Rahmenhoehe und ragt damit 50 px ueber die
   Fotokante in die naechste Sektion, unabhaengig von seiner eigenen Hoehe.
   Der Hero haelt dafuer keinen eigenen Streifen frei (der stand sonst als
   weisse Kante zwischen Foto und Creme-Sektion), sondern liegt per z-index
   ueber der Folgesektion. Deren Innenabstand oben ist groesser als der
   Ueberhang. */
.epi-hero-start {
    position: relative;
    z-index: 2;
}

.epi-hero-start__media {
    margin: 0;
    position: absolute;
    inset: 0;
    z-index: 0;
}

.epi-hero-start__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Gesichter sitzen im oberen Drittel des Fotos; auf breiten Viewports
       schneidet cover sonst mittig und damit in die Köpfe. */
    object-position: 50% 20%;
}

.epi-hero-start .epi-container {
    position: relative;
    z-index: 1;
    height: 590px;
}

.epi-hero-start__panel {
    position: absolute;
    /* Bottom- statt Top-Anker: Figma spezifiziert die Panel-Unterkante fix bei
       730px (554px hohes Panel bei top:176px in einem 680px hohen Rahmen) —
       ein fixer top-Wert setzt das nur um, wenn das Panel genau 554px hoch
       wird. Unser tatsaechlicher Textinhalt rendert nur ~490px hoch, wodurch
       ein fixer top-Wert den Ueberhang verfehlte (Panel endete VOR der
       Fotokante statt dahinter). bottom:-50px haelt den 50px-Ueberhang exakt
       ein, unabhaengig von der tatsaechlichen Panel-Hoehe. */
    bottom: -50px;
    left: var(--epi-gutter);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 620px;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--standard-box-shadow);
    padding: var(--wp--preset--spacing--xl);
}

.epi-hero-start__panel > * {
    margin: 0;
}

/* Eigene H1-Groesse: die Unterseiten-H1 (typography.scale.h1) endet bei
   40 px, die Startseite traegt ihr Panel mit bis zu 48 px
   (typography.scale.h1.startseite). */
.epi-hero-start h1 {
    font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem);
    line-height: 1.15;
}

/* Etwas mehr Luft zwischen Beschreibung und Button als der Panel-Gap. */
.epi-hero-start__panel > .wp-block-buttons {
    margin-block-start: var(--wp--preset--spacing--sm);
}

@media screen and (max-width: 768px) {
    .epi-hero-start__panel {
        margin-block-end: calc(-1 * var(--wp--preset--spacing--lg));
    }

    .epi-hero-start__media {
        position: static;
    }

    .epi-hero-start__media img {
        height: 320px;
    }

    .epi-hero-start .epi-container {
        height: auto;
    }

    /* Der Container setzt den Gutter schon; ein zweiter Rand plus 48px
       Innenabstand liess nur ~200px Textbreite, lange H1-Woerter
       ("Informationen.") ragten aus dem Panel. */
    .epi-hero-start__panel {
        position: static;
        max-width: none;
        margin-block-start: -60px;
        padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
    }
}

/* --- Logoband (Sektion 2) -------------------------------------------------
   Acht Kundenlogos als ruhige Vertrauenszeile. Gedaempft (Graustufe, reduzierte
   Deckkraft), wird beim Hover/Fokus eines einzelnen Logos voll sichtbar. */

.epi-logoband-section {
    padding-block: var(--wp--preset--spacing--lg);
}

.epi-logoband {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
}

.epi-logoband__logo {
    margin: 0;
    flex: 0 1 auto;
}

.epi-logoband__logo img {
    display: block;
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.6;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.epi-logoband__logo img:hover,
.epi-logoband__logo img:focus-visible {
    filter: none;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .epi-logoband {
        justify-content: center;
    }

    .epi-logoband__logo img {
        height: 24px;
    }
}

/* --- „Warum Electric Paper" (Sektion 3) -----------------------------------
   Kaestchenraster als Sektionshintergrund kommt ueber die vorhandenen
   .epi-paper/.epi-paper--fade-Klassen (sections.css) direkt am <section>-
   Element — keine eigene Verlaufs-Konstruktion noetig, die Maske faedet
   bereits an allen vier Kanten weich aus. Zwei Spalten ueber .epi-cols
   .epi-cols--even (sections.css), bricht unter 1024 px automatisch
   einspaltig um. */

.epi-warum__text {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.epi-warum__statement {
    /* Bewusst nicht in H2-Groesse/-Gewicht: sonst liest sich der Absatz
       trotz korrekter Struktur (p, keine zweite Ueberschrift) wie eine
       zweite H2 direkt unter der ersten. */
    margin: 0;
    max-width: var(--prose-max-width);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
}

.epi-collage {
    position: relative;
}

@media screen and (max-width: 1023px) {
    .epi-collage {
        display: flex;
        flex-direction: column;
        gap: var(--wp--preset--spacing--md);
        margin-block-start: var(--wp--preset--spacing--md);
    }
}

/* --- Collage „Vom Bogen zum Ablauf“ -------------------------------------
   Papier → erkannt → weiterverarbeitet, von links oben nach rechts unten.
   Die Bögen liegen vorn, dahinter der erkannte Wert (Handschrift über dem
   maschinell gelesenen Datum), ganz hinten der Ablauf. Keine Texte in der
   Collage. Positionen in Prozent der Spaltenbreite (1024 bis 1440 px). */

.epi-collage--boegen .epi-collage__blatt {
    margin: 0;
    padding: 4px;
    background-color: var(--color-base);
    box-shadow: var(--standard-box-shadow);
}

.epi-collage--boegen .epi-collage__blatt img {
    display: block;
    width: 100%;
    height: auto;
}

.epi-collage--boegen .epi-cutout {
    padding: var(--wp--preset--spacing--md);
    --epi-cornermark-inset: 6px;
    --epi-cornermark-leg: 14px;
}

/* Die Ausschnitte werden hier kleiner als im Original gezeigt, nie groesser. */
.epi-collage--boegen .epi-cutout__field img {
    object-fit: contain;
}

@media screen and (min-width: 1024px) {
    .epi-collage--boegen {
        aspect-ratio: 1 / 0.88;
    }

    .epi-collage--boegen > * {
        position: absolute;
        margin: 0;
    }

    .epi-collage--boegen .epi-collage__stapel {
        inset: 0;
    }

    .epi-collage--boegen .epi-collage__blatt {
        position: absolute;
        width: 38%;
        z-index: 3;
    }

    .epi-collage--boegen .epi-collage__blatt:nth-child(1) { left: 0;   top: 2%; rotate: -5deg; }
    .epi-collage--boegen .epi-collage__blatt:nth-child(2) { left: 11%; top: 0;  rotate: -1deg; }
    .epi-collage--boegen .epi-collage__blatt:nth-child(3) { left: 22%; top: 3%; rotate: 3deg; }

    .epi-collage--boegen .epi-collage__erkannt {
        left: 34%;
        top: 37%;
        width: 50%;
        z-index: 2;
    }

    .epi-collage--boegen .epi-collage__ablauf {
        left: 50%;
        top: 50%;
        width: 48%;
        z-index: 1;
    }
}

/* Mobil: Bögen oben, darunter erkannter Wert und Ablauf nebeneinander und
   ueberlappend statt untereinander, damit die Collage kurz bleibt. */
@media screen and (max-width: 1023px) {
    .epi-collage--boegen {
        flex-flow: row wrap;
        align-items: flex-start;
        gap: 0;
    }

    .epi-collage--boegen .epi-collage__stapel {
        display: flex;
        flex: 0 0 100%;
        position: relative;
        z-index: 3;
        padding-block-start: 8px;
    }

    .epi-collage--boegen .epi-collage__blatt {
        flex: none;
        width: 38%;
    }

    .epi-collage--boegen .epi-collage__blatt:nth-child(1) { margin-inline-start: 2%; rotate: -6deg; }
    .epi-collage--boegen .epi-collage__blatt:nth-child(2) { margin-inline-start: -12%; rotate: -1deg; }
    .epi-collage--boegen .epi-collage__blatt:nth-child(3) { margin-inline-start: -12%; rotate: 4deg; }

    .epi-collage--boegen .epi-collage__erkannt {
        position: relative;
        z-index: 2;
        flex: none;
        width: 58%;
        margin-block-start: -4%;
    }

    .epi-collage--boegen .epi-collage__ablauf {
        position: relative;
        z-index: 1;
        flex: none;
        width: 56%;
        margin: -10% 0 0 -14%;
    }
}