/* Seitenspezifische Ergänzungen – nur interimsmanagement.html */

/* =========================================================
   HERO – gleiche Geometrie und Typografie wie ueber-mich.html
========================================================= */
.interim-page.interim-hero {
    padding-top: 170px;
    padding-bottom: 100px;
}

.interim-page.interim-hero .container {
    width: min(calc(100% - 80px), var(--container, 1180px));
    margin-inline: auto;
}

.interim-page.interim-hero .statement-content {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.interim-page.interim-hero .statement-content h1.hero-title {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: normal;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: clamp(3rem, 6.5vw, 6.3rem);
    font-weight: 400;
    line-height: .99;
    letter-spacing: -.045em;
}

.interim-page.interim-hero .statement-content h1.hero-title > .hero-line {
    display: block;
    color: #fff;
    white-space: nowrap;
}

.interim-page.interim-hero .statement-content h1.hero-title > .hero-line.hero-accent {
    color: var(--accent);
}


/* =========================================================
   STORYLINE – alternierende Textausrichtung ohne Einzelbilder
========================================================= */
.interim-page.interim-context-section {
    background: var(--white);
}

.interim-page.interim-impact-section {
    background: var(--off-white);
}

.interim-page .interim-story-editorial {
    display: block;
}

.interim-page .interim-story-heading,
.interim-page .interim-story-copy {
    width: min(75%, 860px);
}

.interim-page .interim-story-copy {
    padding-top: 32px;
}

.interim-page .interim-story-copy .intro-text {
    width: 100%;
    max-width: none;
}

.interim-page .interim-story-copy .intro-text:last-child {
    margin-bottom: 0;
}

/* Bereich 1: linksbündig */
.interim-page .interim-story-editorial--macro .interim-story-heading,
.interim-page .interim-story-editorial--macro .interim-story-copy {
    margin-right: auto;
    text-align: left;
}

/* Bereich 2: rechtsbündig */
.interim-page .interim-story-editorial--micro .interim-story-heading,
.interim-page .interim-story-editorial--micro .interim-story-copy {
    margin-left: auto;
    text-align: right;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 700px) {
    .interim-page.interim-hero {
        padding-top: 145px;
        padding-bottom: 65px;
    }

    .interim-page.interim-hero .container {
        width: calc(100% - 40px);
    }

    .interim-page.interim-hero .statement-content h1.hero-title {
        font-size: clamp(2.6rem, 11vw, 4rem);
        line-height: .99;
        white-space: normal;
    }

    .interim-page.interim-hero .statement-content h1.hero-title > .hero-line {
        white-space: normal;
    }

    .interim-page .interim-story-heading,
    .interim-page .interim-story-copy,
    .interim-page .interim-story-editorial--macro .interim-story-heading,
    .interim-page .interim-story-editorial--macro .interim-story-copy {
        width: 100%;
        margin-inline: 0;
        text-align: left;
    }

    .interim-page .interim-story-copy {
        padding-top: 32px;
    }
}



/* =========================================================
   VERBINDENDES PANORAMABILD ZWISCHEN DEN STORYBEREICHEN
   Gleiche 6:1-Geometrie wie das Panorama auf turnaround-beratung.html.
========================================================= */
.interim-success-intro {
    max-width: 860px;
    padding-top: 32px;
}

.interim-story-bridge {
    background: linear-gradient(
        to bottom,
        var(--white) 0 50%,
        var(--off-white) 50% 100%
    );
}

.interim-story-bridge .container {
    /* Das Panorama nutzt die Standardabstände der benachbarten Sections. */
    padding-block: 0;
}

.interim-story-clip-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.interim-story-bridge-image {
    position: relative;
    margin: 0;
    overflow: visible;
}

.interim-story-bridge-image--panorama {
    width: 100%;
    aspect-ratio: 6 / 1;
}

.interim-story-bridge-shape {
    position: absolute;
    inset: -50% 0 -50%;
    overflow: hidden;
    /* Polygon bleibt als Fallback; der SVG-Clip rundet Außen- und Innenecken. */
    clip-path: polygon(
        0 25%,
        75% 25%,
        75% 0,
        100% 0,
        100% 75%,
        25% 75%,
        25% 100%,
        0 100%
    );
    clip-path: url(#interimPanoramaClip);
}

.interim-story-bridge-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


.interim-story-bridge-image img,
.interim-page .interim-success-section .service-card .service-image {
    filter: contrast(0.8) saturate(0.66);
}

@media (max-width: 700px) {
    .interim-story-bridge-image {
        overflow: hidden;
        border-radius: var(--radius);
    }

    .interim-story-bridge-image--panorama {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .interim-story-bridge-shape {
        position: static;
        inset: auto;
        height: 100%;
        clip-path: none;
    }

    .interim-page .interim-story-editorial--micro .interim-story-heading,
    .interim-page .interim-story-editorial--micro .interim-story-copy {
        margin-inline: 0;
        text-align: left;
    }
}


/* =========================================================
   STANDARDISIERTE STORY- UND PANORAMA-ABSTÄNDE
========================================================= */
.interim-page .interim-story-copy {
    margin-top: var(--section-space);
    padding-top: 0;
}

.interim-success-intro {
    padding-top: 0;
}

.interim-page.interim-context-section.content-section {
    padding-bottom: 0;
}

.interim-page .interim-story-bridge {
    margin-top: var(--section-space-y);
}

@media (max-width: 700px) {
    .interim-page .interim-story-copy {
        margin-top: var(--section-space);
        padding-top: 0;
    }

    .interim-page .interim-story-bridge {
        margin-top: var(--section-space-y-mobile);
    }
}

/* Bestehende Titelbreite und Ausrichtung bleiben als Layoutvorgaben erhalten. */
.interim-page .interim-story-heading .section-title {
    max-width: 760px;
}

.interim-page .interim-story-editorial--micro .interim-story-heading .section-title {
    margin-left: auto;
}

@media (max-width: 700px) {
    .interim-page .interim-story-editorial--micro .interim-story-heading .section-title {
        margin-left: 0;
    }
}

/* In guten Händen: Titel auf die volle verfügbare Desktopbreite öffnen. */
.interim-page.interim-impact-section .interim-story-heading {
    width: 100%;
}

.interim-page.interim-impact-section .interim-story-heading .section-title {
    max-width: none;
}


/* Statement mobil: langer Begriff gezielt nach dem Bindestrich umbrechen. */
@media (max-width: 700px) {
    .interim-page.statement-section:not(.interim-hero) .interim-complexity-first::after {
        content: "-";
    }

    .interim-page.statement-section:not(.interim-hero) .interim-complexity-second {
        display: block;
    }
}