/* ==========================================================
   STELE – REPLACE CSS (Archive + Single)
   ========================================================== */

/* Scope */
body.post-type-archive-stele_aussteller,
body.single-stele_aussteller {
    --bg: #0b0f14;
    --panel: rgba(255, 255, 255, .06);
    --border: rgba(255, 255, 255, .12);
    --text: rgba(255, 255, 255, .92);
    --dim: rgba(255, 255, 255, .70);
    --radius: 22px;
    --radius-sm: 16px;
    --gap: 18px;
    --pad: 22px;

    background:
        radial-gradient(1200px 900px at 50% 0%, rgba(255, 255, 255, .10), transparent 55%),
        radial-gradient(900px 700px at 50% 100%, rgba(255, 255, 255, .06), transparent 55%),
        var(--bg);
    color: var(--text);
    font-family: "Univers", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Scroll wieder sicher erlauben (auch wenn Theme / vorherige CSS es killt) */
html:has(body.post-type-archive-stele_aussteller),
html:has(body.single-stele_aussteller) {
    height: auto !important;
    overflow: auto !important;
}

body.post-type-archive-stele_aussteller,
body.single-stele_aussteller {
    height: auto !important;
    overflow: auto !important;
    overflow-y: auto !important;

}

/* optional kiosk: header/footer weg */
body.post-type-archive-stele_aussteller .site-header,
body.post-type-archive-stele_aussteller .site-footer,
body.single-stele_aussteller .site-header,
body.single-stele_aussteller .site-footer {
    display: none !important;
}

/* main container */
body.post-type-archive-stele_aussteller main,
body.single-stele_aussteller main {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--pad);
}

/* ------------------------------------------
   ARCHIVE
------------------------------------------ */
.stele-top__title {
    margin: 0 0 6px;
    font-size: 44px;
    letter-spacing: .2px;
}

.stele-top__hint {
    color: var(--dim);
    font-size: 18px;
}

.stele-grid {
    margin-top: var(--gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.stele-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

/* Logo-Zone: fix, clip, normalize */
.stele-card__logo {
    height: 160px;
    /* Optische Einheitlichkeit */
    border-radius: var(--radius);
    overflow: hidden !important;
    border: 1px solid var(--border);

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 18px;
    /* nimmt den “Sprungwerk zu groß”-Effekt raus */
    box-sizing: border-box;
    background: var(--panel);
}

/* Logos wirklich "contain" – aber mit definierter Fläche (optisch gleichmäßiger) */
.stele-card__logo img,
.stele-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.stele-card__fallback {
    text-align: center;
    color: rgba(255, 255, 255, .85);
    font-size: 18px;
    line-height: 1.2;
}

.stele-card__name {
    font-size: 18px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.2;
}

/* ------------------------------------------
   SCREENSAVER – horizontal marquee right -> left
------------------------------------------ */
.stele-saver {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .70);
    backdrop-filter: blur(6px);
    display: none;
}

/* Robust: entweder per JS class am Overlay ODER body class */
.stele-saver.is-active,
body.is-stele-saver .stele-saver {
    display: block;
}

.stele-saver__headline {
    margin-top: 12vh;
    text-align: center;
    font-size: 38px;
    font-weight: 700;
}

.stele-saver__sub {
    margin-top: 10px;
    text-align: center;
    font-size: 18px;
    color: rgba(255, 255, 255, .75);
}

.stele-saver__marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10vh;
    height: 140px;
    padding: 0 24px;
    overflow: hidden;
}

.stele-saver__track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    will-change: transform;
    animation: steleMarqueeLeft 34s linear infinite;
}

.stele-saver__logo {
    flex: 0 0 auto;
    width: 220px;
    height: 140px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
    /* -> mehr optische Gleichheit */
    box-sizing: border-box;

    background: var(--panel);
}

/* Logos: immer 100% in die Kachel, contain */
.stele-saver__logo img,
.stele-saver__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

@keyframes steleMarqueeLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ------------------------------------------
   SINGLE
------------------------------------------ */
.stele-hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
    background-size: cover;
    background-position: center;
}

.stele-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11, 15, 20, .20), rgba(11, 15, 20, .85) 55%, rgba(11, 15, 20, .95));
}

.stele-hero__content {
    position: relative;
    padding: 18px;
}

.stele-back {
    display: inline-block;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    font-size: 18px;
    margin-bottom: 12px;
}

.stele-header {
    display: flex;
    gap: 16px;
    align-items: center;
}

.stele-header__logo {
    width: 260px;
    height: 150px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.stele-header__logo img,
.stele-header__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.stele-title {
    margin: 0;
    font-size: 40px;
}

.stele-claim {
    margin-top: 6px;
    color: rgba(255, 255, 255, .78);
    font-size: 18px;
    line-height: 1.25;
}

.stele-body {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.stele-block {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.stele-block__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px;
}

.stele-block__text {
    color: var(--dim);
    line-height: 1.35;
    font-size: 18px;
}

.stele-kv {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.stele-kv:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.stele-kv__label {
    color: rgba(255, 255, 255, .65);
}

.stele-kv__value {
    color: rgba(255, 255, 255, .88);
    word-break: break-word;
}

.stele-qr {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.stele-qr img {
    width: 220px;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
}

.stele-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.stele-card2 {
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    padding: 14px;
}

.stele-card2__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
}

.stele-card2__text {
    color: var(--dim);
    font-size: 18px;
    line-height: 1.3;
}

.stele-person {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: center;
}

.stele-person--small {
    grid-template-columns: 84px 1fr;
}

.stele-person__img img {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
}

.stele-person--small .stele-person__img img {
    width: 84px;
    height: 84px;
    border-radius: 16px;
}

.stele-person__name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stele-person__line {
    color: var(--dim);
    font-size: 16px;
    margin-top: 3px;
}

.stele-person__line span {
    color: rgba(255, 255, 255, .60);
}

.stele-people {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Video */
.stele-video {
    width: 100%;

}


/* ------------------------------------------
   Small safety
------------------------------------------ */
@media (max-width:520px) {

    body.post-type-archive-stele_aussteller main,
    body.single-stele_aussteller main {
        padding: 16px;
    }

    .stele-grid {
        grid-template-columns: 1fr;
    }

    .stele-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stele-header__logo {
        width: 100%;
        height: 160px;
    }

    .stele-pdf__hint {
        display: none;
    }
}

.stele-qr {
    margin-top: 14px;
    display: grid;
    justify-items: center;
    gap: 10px;
}

.stele-qr__label {
    font-size: 18px;
    color: rgba(255, 255, 255, .85);
}

.stele-qr__code {
    width: 220px;
    height: 220px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .15);
    box-sizing: border-box;
}

.stele-qr__code img,
.stele-qr__code canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.stele-qr__url {
    font-size: 14px;
    color: rgba(255, 255, 255, .60);
    text-align: center;
    word-break: break-word;
    max-width: 80%;
}

/* ==========================================================
   SINGLE – Kontaktbereich 2 Spalten + Kacheln
   ========================================================== */

.single-stele_aussteller .stele-contactgrid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    /* links Infos, rechts Person+QR */
    gap: 16px;
    align-items: start;
}

.single-stele_aussteller .stele-contactgrid__left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.single-stele_aussteller .stele-contactgrid__right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Ansprechpartner-Firmenkontakt: von oben nach unten */
.single-stele_aussteller .stele-personcard {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .16);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 10px;
    text-align: center;
}

.single-stele_aussteller .stele-personcard__img img {
    width: 110px;
    height: 110px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, .12);
}

.single-stele_aussteller .stele-personcard__name {
    font-size: 20px;
    font-weight: 800;
}

.single-stele_aussteller .stele-personcard__line {
    font-size: 16px;
    color: rgba(255, 255, 255, .72);
}

.single-stele_aussteller .stele-personcard__line span {
    color: rgba(255, 255, 255, .72);
}

/* QR rechts daneben */
.single-stele_aussteller .stele-qr--side {
    display: grid;
    justify-items: center;
    gap: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .14);
}

.single-stele_aussteller .stele-qr__code {
    width: 200px;
    height: 200px;
    padding: 10px;
    border-radius: 16px;
    box-sizing: border-box;
}

.single-stele_aussteller .stele-qr__code canvas,
.single-stele_aussteller .stele-qr__code img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.single-stele_aussteller .stele-qr__hint {
    font-size: 14px;
    color: rgba(255, 255, 255, .60);
    text-align: center;
}

body.single-stele_aussteller .stele-peoplegrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (min-width: 980px) {
    body.single-stele_aussteller .stele-peoplegrid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


.single-stele_aussteller .stele-tile {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .16);
    border-radius: 18px;
    padding: 14px;

    display: grid;
    grid-template-rows: 220px auto 1fr;
    gap: 10px;

    text-align: center;
    min-height: 230px;
    /* garantiert gleich groß */
}

.single-stele_aussteller .stele-tile__img {

    
    width: 100%;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-stele_aussteller .stele-tile__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.single-stele_aussteller .stele-tile__img--empty {
    background: rgba(255, 255, 255, .03);
}

.single-stele_aussteller .stele-tile__name {
    font-size: 18px;
    font-weight: 800;
}

.single-stele_aussteller .stele-tile__line {
    font-size: 15px;
    color: rgba(255, 255, 255, .70);
    line-height: 1.25;
}

.single-stele_aussteller .stele-tile__line span {
    color: rgba(255, 255, 255, .55);
}

/* Responsive fallback */
@media (max-width: 720px) {
    .single-stele_aussteller .stele-contactgrid {
        grid-template-columns: 1fr;
    }


}


/* Ansprechpartner Karte: Bild links, Text rechts */
.single-stele_aussteller .stele-personcard--row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: center;
    text-align: left;
}

.single-stele_aussteller .stele-personcard--row .stele-personcard__img img {
    width: 110px;
    height: 110px;
    border-radius: 18px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, .12);
}



.single-stele_aussteller .stele-personcard__name {
    font-size: 20px;
    font-weight: 800;
}

.single-stele_aussteller .stele-personcard__line {
    font-size: 16px;
    color: rgba(255, 255, 255, .72);
}



/* ==========================================================
   SINGLE – Kontaktbereich (clean, ohne innere Box-Rahmen)
   Layout: links Person (Bild volle Höhe), rechts QR nur so breit wie nötig
   ========================================================== */

.single-stele_aussteller .stele-contactgrid {
    display: grid;
    grid-template-columns: 1fr clamp(220px, 26vw, 320px);
    /* QR nur eigene Breite */
    gap: 28px;
    align-items: stretch;
}

/* innere Spalten nur Container – keine extra Hintergründe */
.single-stele_aussteller .stele-contactgrid__left,
.single-stele_aussteller .stele-contactgrid__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* --- Person: KEINE Box, nur Layout --- */
.single-stele_aussteller .stele-personcard--row {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;

    gap: 40px;

    display: grid;
    grid-template-columns: 220px 1fr;
    /* Bild-Spalte */

    align-items: stretch;
    /* Bild darf volle Höhe */
    min-height: 240px;
    /* sorgt dafür, dass Bild nicht mickrig wird */
}

/* Bild-Wrapper: auf volle Höhe strecken */
.single-stele_aussteller .stele-personcard__img {
    align-self: stretch;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    /* optional, falls Bild fehlt */
}

/* Bild selbst: volle Höhe, cover */
.single-stele_aussteller .stele-personcard__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Text rechts */
.single-stele_aussteller .stele-personcard__meta {
    display: flex;
    flex-direction: column;
    justify-content: top;
    gap: 10px;
    min-width: 0;
}

.single-stele_aussteller .stele-personcard__name {
    font-size: 34px;
    font-weight: 850;
    letter-spacing: .2px;
    line-height: 1.05;
    margin: 0;
}

.single-stele_aussteller .stele-personcard__line {
    font-size: 20px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.2;
    word-break: break-word;
}

/* --- QR: KEINE Box, nur QR selbst --- */
.single-stele_aussteller .stele-qr--side {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}




/* URL Text */
.single-stele_aussteller .stele-qr__hint {
    font-size: 18px;
    color: rgba(255, 255, 255, .55);
    text-align: center;
    word-break: break-word;
}

/* Placeholder-SVG soll genauso wie echte Portraits den Rahmen füllen */
.single-stele_aussteller .stele-personcard__placeholder,
.single-stele_aussteller .stele-tile__placeholder {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover !important;
    /* <-- füllt den Rahmen komplett */
    padding: 0 !important;
    /* <-- wichtig: kein Rand mehr */
    opacity: .9;
    /* optional */
}

/* Sicherheit: Wrapper sollen wirklich clippen */
.single-stele_aussteller .stele-personcard__img,
.single-stele_aussteller .stele-tile__img {
    overflow: hidden;
}


.stele-qr__code,
img {
    border: none !important;
}

/* ==========================================================
   Bottom Bar: immer sichtbar (FIXED)
   ========================================================== */

/* Höhe der Bar (für Padding) */
.single-stele_aussteller {
    --stele-bottombar-h: 110px;
}

/* Platz unten schaffen, damit Content nicht verdeckt wird */
.single-stele_aussteller .stele-body {
    padding-bottom: calc(var(--stele-bottombar-h) + 24px);
}

/* Bar fixieren */
.single-stele_aussteller .stele-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 999;
    max-width: 1080px;
    margin: 0 auto;

    padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
    gap: 14px;

    display: flex;

    background: linear-gradient(to top, rgba(11, 15, 20, .98), rgba(11, 15, 20, .70) 65%, rgba(11, 15, 20, 0));
    backdrop-filter: blur(12px);
}

/* Buttons groß */
.single-stele_aussteller .stele-bottom__btn {
    flex: 1;
    min-height: 72px;
    font-size: 24px;
    padding: 18px 18px;
    border-radius: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    font-weight: 700;
}

/* Primär stärker */
.single-stele_aussteller .stele-bottom__btn--primary {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .22);
    font-weight: 900;
}

/* Optional: auf sehr kleinen Breiten untereinander */
@media (max-width: 520px) {
    .single-stele_aussteller .stele-bottom {
        flex-direction: column;
    }
}

.single-stele_aussteller .stele-bottom {
    display: grid;
    grid-template-columns: 1fr;
}


/* ==========================================================
   Screensaver: 1 Logo, 3s stehen, soft crossfade
   ========================================================== */

.stele-saver {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: rgba(0, 0, 0, .70);
    backdrop-filter: blur(8px);
}

.stele-saver.is-active,
body.is-stele-saver .stele-saver {
    display: block;
}

.stele-saver__headline {
    margin-top: 10vh;
    text-align: center;
    font-size: 42px;
    font-weight: 850;
    letter-spacing: .2px;
}

.stele-saver__sub {
    margin-top: 10px;
    text-align: center;
    font-size: 18px;
    color: rgba(255, 255, 255, .75);
}

/* Stage füllt Mitte */
.stele-saver__stage {
    position: absolute;
    left: 0;
    right: 0;
    top: 22vh;
    bottom: 10vh;

    display: grid;
    place-items: center;
    padding: 24px;

    /* Background wird per JS gesetzt */
    background: rgba(0, 0, 0, .0);
    transition: background-color 480ms ease;
}

/* Logo mittig, groß, aber nicht crop */
.stele-saver__logoWrap {
    width: min(92vw, 980px);
    height: min(56vh, 620px);

    border-radius: 28px;
    overflow: hidden;

    display: grid;
    place-items: center;
}

.stele-saver__logoImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    opacity: 1;
    transition: opacity 520ms ease;
}

/* crossfade state */
.stele-saver.is-fading .stele-saver__logoImg {
    opacity: 0;
}

/* optional: Name unter Logo */
.stele-saver__name {
    margin-top: 16px;
    font-size: 20px;
    color: rgba(255, 255, 255, .78);
    text-align: center;
    max-width: 92vw;
}


/* ==========================================================
   CTA Leiste + Idle Hint
   ========================================================== */

.stele-cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .86);
    font-size: 18px;
}

.stele-cta__dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .45);
    animation: stelePulse 1.6s ease-out infinite;
}

@keyframes stelePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .40);
        opacity: 1;
    }

    70% {
        box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        opacity: .9;
    }
}

/* Idle hint: slide-in von unten */
.stele-hint {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    z-index: 100;

    opacity: 0;
    pointer-events: none;
    translate: 0 16px;
    transition: opacity 240ms ease, translate 240ms ease;
}

.stele-hint.is-show {
    opacity: 1;
    translate: 0 0;
}

.stele-hint__inner {
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    backdrop-filter: blur(10px);
}

.stele-archive {
    padding: 80px !important;
}

/* ==========================================================
   Screensaver: Fullscreen Farbe + Hint, keine Logos
   ========================================================== */

.stele-saver {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;

    background: var(--saver-bg, #0b0f14);
    transition: background-color 520ms ease;
}

.stele-saver.is-active,
body.is-stele-saver .stele-saver {
    display: block;
}

.stele-saver__stage {
    position: absolute;
    inset: 0;
}

/* Hint oben klein, blendet ein/aus */
.stele-saver__hint {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    opacity: 0;
    pointer-events: none;
    translate: 0 -10px;
    transition: opacity 260ms ease, translate 260ms ease;
}

.stele-saver__hint.is-show {
    opacity: 1;
    translate: 0 0;
}

/* Dein Kätchen-Style */
.stele-saver .stele-hint__inner {
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    backdrop-filter: blur(10px);
}


/* ==========================================================
   Screensaver: Fullscreen Farbe + Logo + Soft Crossfade
   ========================================================== */

.stele-saver {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;

    background: var(--saver-bg, #0b0f14);
    transition: background-color 520ms ease;

    /* wichtig: kein schwarzes Overlay mehr */
    backdrop-filter: none;
}

.stele-saver.is-active,
body.is-stele-saver .stele-saver {
    display: block;
}

/* Logo Stage */
.stele-saver__stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12vh 7vw 10vh;
}

/* 2 Layer für Crossfade */
.stele-saver__img {
    position: absolute;
    max-width: 88vw;
    max-height: 62vh;
    width: auto;
    height: auto;
    object-fit: contain;

    opacity: 0;
    transition: opacity 520ms ease;

    filter: none !important;
    box-shadow: none !important;
}

.stele-saver__img.is-visible {
    opacity: 1;
}

/* Hint-Kästchen oben */
.stele-saver__hint {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%) scale;
    z-index: 2;

    opacity: 0;
    pointer-events: none;
    translate: 0 -10px;
    transition: opacity 260ms ease, translate 260ms ease;
}

.stele-saver__hint.is-show {
    opacity: 1;
    translate: 0 0;
}

/* Das gleiche Kätchen wie bei deinem Hint */
.stele-saver .stele-hint__inner {
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    backdrop-filter: blur(10px);
}


.stele-saver__stage img {
    padding: 8vw;
}

/* ==========================================================
   HINTS – größer, besser lesbar auf 9:16 Stele
   ========================================================== */

.stele-hint__inner {
    padding: 22px 28px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .95);

    font-size: 28px;
    font-weight: 750;
    letter-spacing: .2px;
    line-height: 1.15;

    max-width: min(92vw, 980px);
    text-align: center;

    backdrop-filter: blur(12px);
}

/* Screensaver-Hint etwas “präsenter” */
.stele-saver .stele-hint__inner {
    background: rgba(0, 0, 0, .48);
    border-color: rgba(255, 255, 255, .18);
}


.stele-hint__inner {
    animation: steleHintPulse 2.6s ease-in-out infinite;
}

@keyframes steleHintPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}


/* ==========================================================
   Header Text: volle Höhe + Inhalt über Höhe verteilen
   (aber immer oben startend)
   ========================================================== */

.stele-header {
    display: grid;
    /* falls bei dir schon flex/grid ist: ok */
    grid-template-columns: auto 1fr;
    align-items: stretch;
    /* wichtig: beide Spalten gleich hoch */
    gap: 16px;
}

/* Textspalte über komplette Höhe */
.stele-header__text {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;

    margin-left: 30px;

    /* verteilt Elemente über die Höhe */
    justify-content: space-between;

    /* aber oben starten, nicht “zentrieren” */
    align-items: flex-start;
}

/* optional: verhindert, dass einzelne Blöcke “auseinander reißen” wenn wenig Inhalt */
.stele-header__text>* {
    width: 100%;
}

/* falls du unten etwas “ankleben” willst: gib dem letzten Block margin-top:auto
   (Alternative zu space-between) */
/*
.stele-header__text{
  justify-content: flex-start;
}
.stele-header__text .deinLetztesElement{
  margin-top: auto;
}
*/


/* Screensaver muss Klicks abfangen */
.stele-saver {
    pointer-events: auto;
    touch-action: none;
    /* verhindert Scroll/Gesten darunter */
}

.stele-saver__stage,
.stele-saver__hint {
    pointer-events: none;
    /* diese Layer selber nicht "klicken" */
}

/* ==========================================================
   PDF Viewer – full width, swipe only
   ========================================================== */

.stele-block--pdf .stele-block__sub {
    margin-top: 6px;
    font-size: 16px;
    color: rgba(255, 255, 255, .72);
}

.stele-pdf {
    margin-top: 12px;
}

.stele-pdf__stage {
    position: relative;
    width: 100%;

    /* kompakter als vorher */
    height: 46vh;
    min-height: 520px;
    max-height: 760px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    /* verhindert Browser-Gesten im Viewer */
    touch-action: none;
    overscroll-behavior: contain;
}

.stele-pdf__canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.stele-pdf__counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 16px;
    user-select: none;
}

.stele-pdf__loading {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 16px;
    opacity: 0;
    transition: opacity 160ms ease;
    user-select: none;
}

/* ==========================================================
   Screensaver: Hand SVG dauerhaft sichtbar (Farbe bleibt im SVG)
   Position: FIX oben mittig im ersten Drittel
   Größe: 20vw
   ========================================================== */

.stele-saver__hint {
    position: fixed;
    /* <- FIX, nicht relativ */
    left: 50%;
    top: 16vh;
    /* erstes Drittel */
    transform: translateX(-50%);
    z-index: 99999;
    pointer-events: none;

    opacity: 1;
}

/* echtes SVG als <img> – keine Farbänderung */
.stele-saver__hand {
    width: 15vw;
    max-width: 280px;
    min-width: 160px;
    height: auto;
    display: block;

    /* optional: wenn dein SVG Transparenz hat, wirkt es “weicher” */
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .18));
    transform-origin: center;
    animation: steleHandPulse 2.2s ease-in-out infinite;
}

@keyframes steleHandPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .85;
    }

    50% {
        transform: scale(1.045);
        opacity: .98;
    }
}

/* ==========================================================
   Screensaver: ruhiger Crossfade + Logo clean (kein Schatten)
   ========================================================== */

.stele-saver__stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
}

/* beide Images liegen übereinander */
.stele-saver__img--a,
.stele-saver__img--b {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 86vw;
    /* etwas Luft links/rechts */
    height: 86vh;
    object-fit: contain;

    opacity: 0;
    transition: opacity 1100ms ease-in-out;
    /* <- smoother */
    will-change: opacity;

    /* Logos: kein Filter/Shadow */
    filter: none !important;
    box-shadow: none !important;
}

.stele-saver__img--a.is-visible,
.stele-saver__img--b.is-visible {
    opacity: 1;
}

/* ==========================================================
   Key Visual Block
   ========================================================== */

.stele-block--visual .stele-visual {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}

.stele-visual__img {
    width: 100%;
    height: 20vh;
    max-height: 720px;
    min-height: 420px;
    object-fit: cover;
}


/* ==========================================================
   CTA Block
   ========================================================== */

body.single-stele_aussteller .stele-cta {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
}

body.single-stele_aussteller .stele-cta__badge {
    display: inline-flex;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    opacity: .92;
}

body.single-stele_aussteller .stele-cta__title {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    color: rgba(255, 255, 255, .95);
}

body.single-stele_aussteller .stele-cta__hint,
body.single-stele_aussteller .stele-cta__sub {
    margin-top: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, .78);
}

/* ==========================================================
   CTA – peppig, groß, präsent
   ========================================================== */

body.single-stele_aussteller .stele-cta {
    background:
        radial-gradient(900px 420px at 20% 0%, rgba(255, 255, 255, .16), transparent 55%),
        radial-gradient(900px 420px at 80% 100%, rgba(255, 255, 255, .10), transparent 55%),
        rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
    position: relative;
    overflow: hidden;
}

/* kleine “Glanzkante” */
body.single-stele_aussteller .stele-cta::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 55%);
    pointer-events: none;
    opacity: .7;
}

body.single-stele_aussteller .stele-cta__top {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

/* Badge/Icon groß */
body.single-stele_aussteller .stele-cta__badge {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 30px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .14);
}

/* Title richtig fett und groß */
body.single-stele_aussteller .stele-cta__title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .2px;
    line-height: 1.08;
    color: rgba(255, 255, 255, .96);
}

/* Hint/Sub größer + lesbarer */
body.single-stele_aussteller .stele-cta__hint {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.25;
    color: rgba(255, 255, 255, .86);
    position: relative;
    z-index: 1;
}

body.single-stele_aussteller .stele-cta__sub {
    margin-top: 10px;
    font-size: 16px;
    color: rgba(255, 255, 255, .74);
    position: relative;
    z-index: 1;
}

/* optional: kleiner “Pulse”, wirkt kioskig aber nicht nervig */
@media (prefers-reduced-motion: no-preference) {
    body.single-stele_aussteller .stele-cta {
        animation: steleCtaPulse 2.8s ease-in-out infinite;
    }

    @keyframes steleCtaPulse {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-2px);
        }
    }
}

/* ==========================================================
   Fullwidth Visual Block – Höhe passt sich dem aktiven Slide an
   ========================================================== */

body.single-stele_aussteller .stele-visualBlock {
    margin-top: 18px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}

/* Swipe-Container */
body.single-stele_aussteller .stele-visualSwipe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;

    /* wichtig: Höhe wird per JS gesetzt */
    height: auto;
    transition: height 260ms ease;
}

/* Jede Seite: volle Breite */
body.single-stele_aussteller .stele-visualSwipe__item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
}

/* Bild: so groß wie möglich, aber ohne Abschneiden */
body.single-stele_aussteller .stele-visualSwipe__img {
    width: 100%;
    height: auto;
    /* <- keine feste Höhe mehr */
    max-height: 72vh;
    /* <- “so groß wie möglich, aber passt hin” */
    object-fit: contain;
    display: block;
}

/* Hinweis nur bei mehreren Bildern */
body.single-stele_aussteller .stele-visualSwipe__hint {
    padding: 10px 14px 14px;
    font-size: 16px;
    color: rgba(255, 255, 255, .74);
    background: linear-gradient(to top, rgba(0, 0, 0, .22), transparent);
}

/* ==========================================================
   Fullscreen/Kiosk: genug Scroll-Puffer unten,
   damit das letzte Element (z.B. Präsentation) nicht abgeschnitten ist
   ========================================================== */

body.single-stele_aussteller .stele,
body.single-stele_aussteller main {
    min-height: 100dvh;
    /* statt 100vh -> stabiler im Fullscreen */
}

/* der eigentliche Content bekommt unten Puffer in Höhe der Sticky-Bar */
body.single-stele_aussteller .stele-body {
    padding-bottom: calc(var(--stele-bottom-h, 110px) + 28px);
}

/* falls du statt .stele-body einen anderen Container scrollst */
body.single-stele_aussteller .stele-single {
    padding-bottom: calc(var(--stele-bottom-h, 110px) + 28px);
}

/* ==========================================================
   Scroll-to-top Button (Single)
   ========================================================== */

body.single-stele_aussteller .stele-toTop {
    position: fixed;
    right: 18px;
    bottom: calc(var(--stele-bottom-h, 110px) + 18px);
    /* über den sticky Buttons */
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    z-index: 9998;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

body.single-stele_aussteller .stele-toTop.is-show {
    opacity: 0.95;
    transform: translateY(0);
    pointer-events: auto;
}

body.single-stele_aussteller .stele-toTop:active {
    transform: translateY(1px);
}

/* Pfeil-Icon (CSS) */
body.single-stele_aussteller .stele-toTop__icon {
    width: 18px;
    height: 18px;
    border-left: 3px solid rgba(255, 255, 255, .95);
    border-top: 3px solid rgba(255, 255, 255, .95);
    transform: rotate(45deg);
    margin-top: 4px;
    /* optisch mittig */
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.single-stele_aussteller .stele-toTop {
        transition: none;
    }
}

/* ==========================================================
   ARCHIVE: Header mittig + Kein Scrollen + Grid passt in Höhe
   ========================================================== */

body.post-type-archive-stele_aussteller {
    overflow: hidden;
    /* kein Scrollen */
}

body.post-type-archive-stele_aussteller .stele-top {
    text-align: center;
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-bottom: 16px;
}

body.post-type-archive-stele_aussteller .stele-top__title {
    margin: 0;
}

body.post-type-archive-stele_aussteller .stele-top__hint {
    margin: 0;
    opacity: .85;
}

/* verfügbare Höhe: alles außer Header/Hints */
body.post-type-archive-stele_aussteller .stele-grid {
    height: var(--stele-grid-h, auto);
    display: grid;
    grid-template-columns: repeat(var(--stele-grid-cols, 3), 1fr);
    grid-auto-rows: 1fr;
    gap: var(--stele-grid-gap, 14px);
    align-content: stretch;
}

/* Card soll die Grid-Zelle komplett nutzen */
body.post-type-archive-stele_aussteller .stele-card {
    display: grid;
    height: 100%;
}

/* Logo-Block nimmt die ganze Zelle ein */
body.post-type-archive-stele_aussteller .stele-card__logo {
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo: immer reinpassen */
body.post-type-archive-stele_aussteller .stele-card__img {
    max-width: 86%;
    max-height: 72%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
}

/* optional: Schatten killen, falls du da noch was siehst */
body.post-type-archive-stele_aussteller .stele-card__img {
    filter: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   Keyvisual: Single Image (kein Swipe, scrollt normal)
   ========================================================== */

body.single-stele_aussteller .stele-visualBlock{
  margin-top: 18px;
  border-radius: 22px;
  overflow: hidden;
}

body.single-stele_aussteller .stele-visualImg{
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  display: block;
}

body.single-stele_aussteller .stele-visualSwipe{
  overflow: visible !important;
  touch-action: auto !important;
}


/* ==========================================================
   Stele: nichts markieren/auswählen
   ========================================================== */

body.post-type-archive-stele_aussteller,
body.single-stele_aussteller,
body.post-type-archive-stele_aussteller * ,
body.single-stele_aussteller * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  -webkit-touch-callout: none; /* iOS long-press */
  -webkit-tap-highlight-color: transparent;
}

/* Keine Bild-Drags */
body.post-type-archive-stele_aussteller img,
body.single-stele_aussteller img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* wenn Bilder nie klickbar sein sollen */
}

/* Links/Buttons bleiben klickbar */
body.post-type-archive-stele_aussteller a,
body.single-stele_aussteller a,
body.post-type-archive-stele_aussteller button,
body.single-stele_aussteller button {
  pointer-events: auto;
}

/* Falls du Inputs hast (z.B. später Suche), dort wieder erlauben */
body.post-type-archive-stele_aussteller input,
body.single-stele_aussteller input,
body.post-type-archive-stele_aussteller textarea,
body.single-stele_aussteller textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}


.stele-personcard__line{
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.stele-card2__text ul{
    height: 0px !important;
}