/* ============================================================
   exhibitor.css | Aussteller-Seiten
   Aufgerufen in:
     - templates/exhibitor.php          (Aussteller-Detailpage, inkl. Leseindex)
     - templates/exhibitor-overview.php (Aussteller-Listpage)
   Der Leseindex wird von assets/js/exhibitor.js aufgebaut; ohne JS bleibt
   .ex-index per [hidden] aus und das Layout entspricht dem Stand davor.
   --ex-sticky-top = 92px Headernavigation + 37,5px Breadcrumb. Beide sind
   sticky und stehen uebereinander. Aendert sich eine der beiden Hoehen,
   ist das hier die einzige Stelle, die angepasst werden muss - CSS und
   exhibitor.js lesen denselben Wert.
   ============================================================ */

.exhibitor-content{
    background-color:white;
}
.exhibitor-content .container { position: relative; }

.exhibitor-logo-card {
    float: right;
    width: min(340px, 42%);
    margin: -92px 0 1.4rem 1.8rem;
    padding: 1.5rem 1.8rem;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    min-height: 130px;
    position: relative; z-index: 3;
}
.exhibitor-logo-card img { max-width: 175px; width: auto; height: auto; object-fit: contain; }

.exhibitor-description { color: var(--c-mid); line-height: 1.7; max-width: 1020px; margin: 0 auto; padding: 2.5rem 0; }
.exhibitor-description::after { content: ''; display: block; clear: both; }

/* ── Leseindex: Grundlayout ── */

:root { --ex-sticky-top: 129.5px; }

.exhibitor-stack { display: block; }

.exhibitor-main { min-width: 0; }

.ex-index { display: none; }

.exhibitor-description h2,
.exhibitor-description h3,
#ex-machines-title,
#ex-faq-title,
.page-faq .faq-item {
    scroll-margin-top: calc(var(--ex-sticky-top) + .75rem);
}

.ex-index-sticky {
    position: sticky;
    top: calc(var(--ex-sticky-top) + 1.25rem);
    padding-right: 34px;
}

.ex-index-panel {
    max-height: calc(100vh - var(--ex-sticky-top) - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    overflow-x: hidden;
    background: var(--c-smoke);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1rem;
    transition: opacity .3s ease, transform .35s ease;
}

.ex-index-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--c-muted);
    margin: 0 0 .7rem;
}

.ex-index-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .1rem;
}

.ex-index-list li { margin: 0; padding: 0; }

.ex-index-list li::before { content: none; }

.ex-index-link,
.ex-index-label {
    display: block;
    font-size: .85rem; line-height: 1.35;
    color: var(--c-mid);
    opacity: .75;
    padding: .3rem 0;
    overflow-wrap: anywhere;
}

.ex-index-link {
    text-decoration: none;
    transition: opacity var(--transition);
}

.ex-index-link:hover,
.ex-index-link.is-active { opacity: 1; }

.ex-index-item--group { margin-top: .8rem; }

.ex-index-list > li:first-child { margin-top: 0; }

.ex-index-item--group > .ex-index-link,
.ex-index-item--group > .ex-index-label { font-weight: 700; }

.ex-index-item--h2 > .ex-index-link,
.ex-index-item--faq > .ex-index-link { padding-left: 1rem; }

.ex-index-item--h3 > .ex-index-link { padding-left: 2rem; font-size: .8rem; }

.ex-index-count { font-weight: 400; }

.ex-index-toggle {
    position: absolute; top: 0; right: 0;
    width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-white); color: var(--c-mid);
    border: 1px solid var(--c-border); border-radius: 50%;
    cursor: pointer; line-height: 1;
    transition: color var(--transition), border-color var(--transition), transform .35s ease;
}

.ex-index-toggle:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ── Leseindex: nur Desktop, Textspalte rueckt nach rechts ── */

@media (min-width: 992px) {
    .exhibitor-content.has-ex-index .container {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: 2.5rem;
        transition: grid-template-columns .35s ease, column-gap .35s ease;
    }

    .exhibitor-content.has-ex-index.is-collapsed .container {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 1.25rem;
    }

    .exhibitor-content.has-ex-index .ex-index {
        display: block;
        position: relative;
        padding: 2.5rem 0;
        opacity: 0; transform: translateX(-1rem);
    }

    .exhibitor-content.has-ex-index .ex-index.is-ready {
        opacity: 1; transform: none;
        transition: opacity .45s ease, transform .45s ease;
    }

    .exhibitor-content.has-ex-index.is-collapsed .ex-index-panel {
        opacity: 0; transform: translateX(-1.5rem); pointer-events: none;
    }

    .exhibitor-content.has-ex-index.is-collapsed .ex-index-toggle { transform: rotate(180deg); }

    .exhibitor-content.has-ex-index .exhibitor-description {
        max-width: none; margin: 0;
    }
}

/* ── Mobile: Maschinen vor die Beschreibung ziehen ── */

@media (max-width: 768px) {
    .exhibitor-stack { display: flex; flex-direction: column; }
    .exhibitor-stack > .plp-grid-section { order: 1; }
    .exhibitor-stack > .exhibitor-content { order: 2; }
    .exhibitor-stack > .page-faq { order: 3; }
}

@media (max-width: 768px) {
    .exhibitor-content { padding-top: 2.75rem; }
    .exhibitor-logo-card {
        float: none; width: auto; max-width: 300px;
        margin: 0 auto 1.4rem;
    }
}

.exhibitor-grid { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; }
.exhibitor-card {
    position: relative; overflow: hidden;
    display: flex; align-items: stretch; width: 100%;
    background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); color: var(--c-darker);
    transition: var(--transition); box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
    .exhibitor-card:hover { box-shadow: var(--shadow-hover); }
}

.exhibitor-card-brand {
    flex: 0 0 20%; max-width: 20%; padding: 1.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
    text-align: center; color: var(--c-darker);
    border-right: 1px solid var(--c-border);
}
.exhibitor-card-logo { min-height: 56px; display: flex; align-items: center; justify-content: center; }
.exhibitor-card-logo img {
    max-height: 56px; max-width: 122px; width: auto; object-fit: contain;
}

.exhibitor-card-body { flex: 1 1 auto; min-width: 0; padding: 1.5rem; padding-right: calc(5% + 1.5rem); }
.exhibitor-card-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .5rem; color: var(--c-darker); }
.exhibitor-card-desc { color: var(--c-mid); line-height: 1.6; margin: 0 0 .8rem; }

.exhibitor-card-machines { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.exhibitor-card-machine {
    display: block; flex: 0 0 auto;
    border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--c-white);
}
.exhibitor-card-machine img { display: block; max-height: 100px; width: auto; max-width: 175px; object-fit: contain; }

.exhibitor-card-link {
    position: absolute; top: 0; right: 0; bottom: 0; width: 5%; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--c-smoke); color: var(--c-mid); text-decoration: none;
    border-left: 1px solid var(--c-border); overflow: hidden;
    transition: width .35s ease, color .3s ease;
}
.exhibitor-card-link:focus-visible { width: 15%; color: var(--c-mid); }
@media (hover: hover) {
    .exhibitor-card-link:hover { width: 15%; color: var(--c-mid); }
}
.exhibitor-card-link-icon { font-size: 1.4rem; flex: 0 0 auto; }
.exhibitor-card-link-text {
    font-family: var(--font-head); font-weight: 600; white-space: nowrap;
    text-align: center; line-height: 1.2;
    max-width: 0; opacity: 0; overflow: hidden;
    transition: max-width .35s ease, opacity .3s ease;
}
.exhibitor-card-link:focus-visible .exhibitor-card-link-text { max-width: 220px; opacity: 1; }
@media (hover: hover) {
    .exhibitor-card-link:hover .exhibitor-card-link-text { max-width: 220px; opacity: 1; }
}

@media (max-width: 700px) {
    .exhibitor-card { flex-direction: column; }
    .exhibitor-card-brand {
        flex-basis: auto; max-width: none;
        border-right: 0; border-bottom: 1px solid var(--c-border);
    }
    .exhibitor-card-body { padding-right: 1.5rem; }
    .exhibitor-card-link {
        position: static; width: auto; padding: .9rem 1rem;
        border-left: 0; border-top: 1px solid var(--c-border);
    }
    .exhibitor-card-link-text { max-width: none; opacity: 1; }
}