/**
 * Template: Single-Gesellschafter (single-gfu_gesellschafter.php).
 *
 * Sektionen:
 *   1. Profil-Hero (.block--gs-hero)
 *
 * Regel: niemals Hex-Werte direkt — immer var(--color-*).
 */

.single-gesellschafter {
    background-color: var(--color-white);
}

/* ──────────────────────────────────────────────────────────────
 * 1. Profil-Hero
 *
 * 50/50: Links Heading + Firmenname + Logo, Rechts Hero-Bild
 * mit überlappender Linie. Bild ragt unten konfigurierbar in
 * den nächsten Block hinein (--gs-hero-image-overflow).
 * ────────────────────────────────────────────────────────────── */

.block--gs-hero {
    position: relative;
    z-index: 2;
    background-color: var(--color-beige);
    padding-block: var(--space-16) 0;
    /* Bild darf unten aus dem Block herausragen */
    overflow: visible;
}

/* Polyline soll vor dem Bild liegen. Y kommt jetzt direkt in den
 * Polyline-Punkten — SVG füllt deshalb die ganze Block-Höhe. */
.block--gs-hero > .block__line-svg {
    z-index: calc(var(--z-raised) + 1);
    top: 0;
    height: 100%;
    pointer-events: none;
}

/* Auf Desktop läuft die Linie 15 px UNTER dem Bild horizontal aus dem
 * Block heraus — das Bild ragt via --gs-hero-image-overflow nach unten
 * in den Folgeblock, die Linie folgt dem mit. Dafür muss der SVG-
 * Bereich um die Overflow-Zone + 30 px Atem nach unten erweitert
 * werden; das viewBox-Mapping wird im JS-Modul (profile-hero-line.js)
 * an dieselbe effektive Höhe gekoppelt. */
@media (min-width: 1025px) {
    .block--gs-hero > .block__line-svg {
        height: calc(100% + var(--gs-hero-image-overflow, 0px) + 30px);
    }
}

/* Strich-Animation analog Hero-Home / Content-Hero — ruhige 4500 ms,
 * Trigger beim Viewport-Eintritt via scroll-line.js. */
.block--gs-hero .block__line-path {
    transition-duration: 4500ms;
}

.gs-hero__inner {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 1025px) {
    .gs-hero__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
}

/* ── Content (links) ───────────────────────── */

.gs-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 520px;
}

.gs-hero__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--hero-heading-size);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* .gs-hero__company-Regel entfernt — die Firmenname-Zeile wird im
 * Profil-Hero nicht mehr ausgegeben (siehe profile-hero.php). */

/* Firmenname als Text (ersetzt das frühere Logo-Bild). Schriftgröße =
 * .gs-hero__heading (var(--hero-heading-size)); semantisch die Seiten-H1,
 * eindeutig pro Gesellschafter. */
.gs-hero__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--hero-heading-size);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* ── Media (rechts) ────────────────────────── */

.gs-hero__media {
    position: relative;
    /* Negativer Margin: Bild ragt entsprechend nach unten heraus.
     * Block hat overflow: visible — kein Eingriff am Folgeblock. */
    margin-bottom: calc(-1 * var(--gs-hero-image-overflow, 0px));
}

.gs-hero__image-wrap {
    margin: 0;
    overflow: hidden;
}

.gs-hero__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ── Mobile-Anpassungen ────────────────────── */

@media (max-width: 1024px) {
    /* Auf schmalen Viewports weniger Überlappung */
    .gs-hero__media {
        margin-bottom: calc(-0.5 * var(--gs-hero-image-overflow, 0px));
    }
}

/* ──────────────────────────────────────────────────────────────
 * 2. Profil-Detail (Text + Akkordeon)
 *
 * Section-Wrapper mit konfigurierbarem Hintergrund + Overlay.
 * Layout 50/50: Text-Block links, Akkordeon rechts.
 *
 * Custom Properties (vom Template-Part gesetzt):
 *   --gs-detail-overlay-url       URL des Overlay-Bildes
 *   --gs-detail-overlay-opacity   0–1
 * ────────────────────────────────────────────────────────────── */

.block--gs-detail {
    position: relative;
    z-index: 1;
    /* Etwas mehr Top-Padding damit das überlappende Hero-Bild
     * Platz hat — das genaue Maß folgt dem Hero-Overflow. */
    padding-block: var(--space-16);
    overflow: hidden;
}

.block--gs-detail.block--bg-beige       { background-color: var(--color-beige); }
.block--gs-detail.block--bg-dunkelbeige { background-color: var(--color-bg-alt); }
.block--gs-detail.block--bg-white       { background-color: var(--color-white); }
.block--gs-detail.block--bg-navy {
    background-color: var(--color-bg-premium);
    color: var(--color-text-on-navy);
}
.block--gs-detail.block--bg-anthrazit {
    background-color: var(--color-anthrazit);
    color: var(--color-text-on-navy);
}

/* ── Overlay (Pattern-Image) ───────────────── */

.gs-detail__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--gs-detail-overlay-url);
    background-position: center;
    opacity: var(--gs-detail-overlay-opacity, 1);
}

.block--gs-detail--overlay-cover .gs-detail__overlay   { background-size: cover;   background-repeat: no-repeat; }
.block--gs-detail--overlay-contain .gs-detail__overlay { background-size: contain; background-repeat: no-repeat; }
.block--gs-detail--overlay-tile .gs-detail__overlay    { background-size: auto;    background-repeat: repeat; }

/* ── Inner Grid ────────────────────────────── */

.gs-detail__inner {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 1025px) {
    .gs-detail__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
}

/* ── Content (links) ───────────────────────── */

.gs-detail__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 540px;
}

.gs-detail__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.gs-detail__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-text);
}

.gs-detail__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.gs-detail__body > *:first-child { margin-top: 0; }
.gs-detail__body > *:last-child  { margin-bottom: 0; }

/* Auf dunklen Hintergründen: heller Text */
.block--gs-detail.block--bg-navy .gs-detail__eyebrow,
.block--gs-detail.block--bg-navy .gs-detail__heading,
.block--gs-detail.block--bg-navy .gs-detail__body,
.block--gs-detail.block--bg-anthrazit .gs-detail__eyebrow,
.block--gs-detail.block--bg-anthrazit .gs-detail__heading,
.block--gs-detail.block--bg-anthrazit .gs-detail__body {
    color: var(--color-text-on-navy);
}

/* ── Akkordeon (rechts) ────────────────────── */

.gs-detail__accordion {
    /* Default (Mobile / Tablet): am oberen Cell-Rand, ohne Offset —
     * bei einspaltigem Stack soll das Akkordeon direkt unter dem Body
     * folgen, nicht mit künstlicher Lücke. */
    align-self: start;
}

@media (min-width: 1025px) {
    .gs-detail__accordion {
        /* Desktop: 168 px Abstand zur oberen Block-Kante. Der Block
         * trägt bereits `padding-block: var(--space-16)` (= 64 px) oben
         * → margin-top muss 168 − 64 = 104 px ausgleichen. `align-self:
         * start` (oben in der Cell verankert) sorgt zusammen mit dem
         * Margin dafür, dass beim Aufklappen eines Items das Akkordeon
         * nach UNTEN wächst statt sich neu vertikal zu zentrieren. */
        margin-top: calc(168px - var(--space-16));
    }
}

/* Auf dunklen Hintergründen: helle Akkordeon-Texte */
.block--gs-detail.block--bg-navy .accordion__title,
.block--gs-detail.block--bg-navy .accordion__content,
.block--gs-detail.block--bg-anthrazit .accordion__title,
.block--gs-detail.block--bg-anthrazit .accordion__content {
    color: var(--color-text-on-navy);
}