/* ═══════════════════════════════════════════════════════════════════
   Candor Enquire — Guide Pager v163.18
   Einzelseiten-Anzeige im Quiz-Stil: eine Seite, Weiter/Zurück, 
   Inhaltsverzeichnis, Overlay-Modus.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.ce-pager {
    --cp-akzent:   var(--ce-akzent, var(--mup-accent, #c9a84c));
    --cp-bg:       #faf7f2;
    --cp-text:     #2a2a2a;
    --cp-muted:    #6b6b6b;
    --cp-border:   rgba(201,168,76,.15);
    --cp-font-h:   "Cormorant Garamond", Georgia, serif;
    --cp-font-sk:  "Dancing Script", cursive;
    --cp-font-b:   "Lato", system-ui, sans-serif;
    --cp-radius:   6px;
    font-family:   var(--cp-font-b);
    color:         var(--cp-text);
    max-width:     900px;
    margin:        0 auto;
    position:      relative;
}

/* ── Inhaltsverzeichnis ── */

/* ── Bilder: immer scharf, volle Breite, natürliche Proportionen ── */
.ce-pager-seite img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    max-width: 100%;
    height: auto;
}
/* Deckblatt/Dual/Fullbild: Hintergrundbild-Qualität */
.ce-seite-deckblatt,
.ce-seite-fullbild {
    background-size: cover;
    background-position: center;
    image-rendering: high-quality;
}
/* Dual: Foto links immer volle Höhe, kein Stauchen */
.ce-dual-foto img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.ce-pager-toc {
    background:    #fff;
    border:        1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    margin-bottom: 1.5rem;
    overflow:      hidden;
}
.ce-pager-toc-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 18px;
    background:      #faf8f4;
    border-bottom:   1px solid var(--cp-border);
    cursor:          pointer;
    user-select:     none;
}
.ce-pager-toc-head h3 {
    margin:      0;
    font-family: var(--cp-font-b);
    font-size:   13px;
    font-weight: 600;
    color:       var(--cp-text);
}
.ce-pager-toc-toggle {
    font-size:  11px;
    color:      var(--cp-akzent);
    transition: transform .2s;
}
.ce-pager-toc.open .ce-pager-toc-toggle { transform: rotate(180deg); }
.ce-pager-toc-list {
    display:    none;
    padding:    8px 0;
}
.ce-pager-toc.open .ce-pager-toc-list { display: block; }
.ce-pager-toc-item {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     7px 18px;
    cursor:      pointer;
    transition:  background .12s;
    border-left: 2px solid transparent;
}
.ce-pager-toc-item:hover {
    background:  rgba(201,168,76,.06);
}
.ce-pager-toc-item.aktiv {
    background:  rgba(201,168,76,.1);
    border-left-color: var(--cp-akzent);
}
.ce-pager-toc-nr {
    font-size:    10px;
    color:        var(--cp-akzent);
    font-weight:  700;
    width:        22px;
    flex-shrink:  0;
    text-align:   right;
}
.ce-pager-toc-titel {
    font-size:    13px;
    color:        var(--cp-text);
    flex:         1;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow:ellipsis;
}
.ce-pager-toc-typ {
    font-size:    9px;
    color:        var(--cp-muted);
    background:   rgba(0,0,0,.04);
    padding:      1px 5px;
    border-radius:3px;
    flex-shrink:  0;
}

/* ── Seiten-Stage ── */
.ce-pager-stage {
    position: relative;
    min-height: 200px;
    background: #fff;
}

/* ── Einzelne Seite ── */
.ce-pager-seite {
    display:        none;
    background:     #fff;
    border:         1px solid var(--cp-border);
    border-radius:  var(--cp-radius);
    overflow:       hidden;
    animation:      cpFadeIn .25s ease;
    position:       relative;
    z-index:        2;
    /* Kein Durchscheinen durch Hintergrund */
    isolation:      isolate;
}
.ce-pager-seite.aktiv { display: block; }

@keyframes cpFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Import-Seiten: Bild ohne Padding */
.ce-pager-seite.ce-seite-import {
    padding: 0;
}
.ce-pager-seite.ce-seite-import .ce-import-bild-wrap img {
    width: 100%; height: auto; display: block;
    border-radius: 0;
}
/* Seiten mit Inhalt */
.ce-pager-seite:not(.ce-seite-import) {
    padding: 2rem 2.5rem;
}
/* Import-Bild + TOC + Progress haben kein extra padding */
.ce-pager-toc,
.ce-pager-progress-wrap {
    margin: 0 2rem;
}
.ce-pager-toc { margin-top: 1.2rem; }
.ce-pager-progress-wrap { margin-top: .8rem; margin-bottom: 0; }
@media (max-width: 640px) {
    .ce-pager-seite:not(.ce-seite-import) { padding: 1.8rem 1.5rem; }
}

/* ── Import-Seiten (PDF-Fotos): Bild füllt Overlay-Höhe ── */
.ce-seite-import {
    display:        flex;
    flex-direction: column;
    height:         100%;
    padding:        0;
}
.ce-seite-import .ce-import-bild-wrap {
    flex:           1;
    min-height:     0;
    overflow:       hidden;
    display:        flex;
    align-items:    flex-start;
    justify-content:center;
}
.ce-seite-import .ce-import-bild-wrap img {
    width:          100%;
    height:         100%;
    object-fit:     contain;
    object-position:top center;
    display:        block;
}

/* ── Typografie in Seiten ── */
.ce-pager-seite .ce-kicker {
    display: block;
    font-family: var(--cp-font-sk);
    font-size: 1rem;
    color: var(--cp-akzent);
    margin-bottom: .3rem;
}
.ce-pager-seite .ce-headline {
    font-family: var(--cp-font-h);
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 .5rem;
    color: var(--cp-text);
}
.ce-pager-seite .ce-gold-rule {
    width: 55px; height: 2px;
    background: var(--cp-akzent);
    border: none; margin: .8rem 0 1.2rem;
}
.ce-pager-seite .ce-subline {
    font-size: .95rem;
    color: var(--cp-muted);
    margin: 0 0 .8rem;
}
.ce-pager-seite .ce-text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cp-muted);
    max-width: 66ch;
}
.ce-pager-seite .ce-text p { margin: 0 0 .8rem; }
.ce-pager-seite .ce-zitat-block {
    border-left: 3px solid var(--cp-akzent);
    padding: .6rem 0 .6rem 1.2rem;
    margin: 1.2rem 0;
    font-family: var(--cp-font-h);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--cp-text);
}
.ce-pager-seite .ce-zitat-autor {
    display: block; font-size: .85rem;
    color: var(--cp-akzent); font-style: normal; margin-top: .4rem;
}
.ce-pager-seite .ce-tipps-liste {
    list-style: none; padding: 0; margin: 1rem 0;
}
.ce-pager-seite .ce-tipps-liste li {
    padding: .4rem 0;
    border-bottom: 1px solid rgba(201,168,76,.1);
    font-size: .95rem;
    display: flex; gap: .5rem;
}
.ce-pager-seite .ce-tipps-liste li::before {
    content: "—"; color: var(--cp-akzent); font-weight: 700; flex-shrink: 0;
}
.ce-pager-seite .ce-tipps-liste li:last-child { border-bottom: none; }
.ce-pager-seite .ce-cta-btn {
    display: inline-block; margin-top: 1.5rem;
    padding: .8rem 2rem;
    background: var(--cp-akzent); color: #fff;
    text-decoration: none; border-radius: 4px;
    font-weight: 600; font-size: .9rem;
    transition: opacity .15s;
}
.ce-pager-seite .ce-cta-btn:hover { opacity: .88; }

/* Deckblatt */
.ce-seite-deckblatt {
    position: relative; min-height: 420px;
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end; padding: 0;
}
.ce-deck-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,.72) 0%, rgba(10,10,10,.1) 55%);
}
.ce-deck-content {
    position: relative; z-index: 2;
    padding: 2.5rem 3rem; color: #fff; width: 100%;
}
.ce-deck-content .ce-kicker { color: var(--cp-akzent); }
.ce-deck-content .ce-headline { color: #fff; font-size: clamp(1.8rem,4vw,3rem); }

/* Dual */
.ce-seite-dual { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; padding: 0; }
.ce-dual-foto { overflow: hidden; }
.ce-dual-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-dual-text {
    padding: 2.5rem 2.5rem;
    display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 640px) {
    .ce-seite-dual { grid-template-columns: 1fr; }
    .ce-dual-foto { height: 220px; }
    .ce-dual-text { padding: 1.5rem; }
}

/* Zitat-Seite */
.ce-seite-zitat {
    background: var(--cp-text) !important;
    min-height: 320px;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.ce-seite-zitat .ce-zitat-block {
    border: none; padding: 0; color: rgba(255,255,255,.9);
    font-size: clamp(1.2rem,2.5vw,1.7rem);
}
.ce-seite-zitat .ce-zitat-autor { color: var(--cp-akzent); }

/* Fullbild */
.ce-seite-fullbild {
    position: relative; min-height: 420px;
    background-size: cover; background-position: center; padding: 0;
}
.ce-fb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.05) 50%);
}
.ce-fb-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 2; padding: 2rem 2.5rem; color: #fff;
}
.ce-fb-content .ce-headline { color: #fff; }

/* CTA-Seite */
.ce-seite-cta { text-align: center; }

/* ── Navigations-Bar ── */
.ce-pager-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 0;
    margin-top:      12px;
    gap:             10px;
}
.ce-nav-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         9px 20px;
    border:          1px solid var(--cp-akzent);
    border-radius:   4px;
    background:      transparent;
    color:           var(--cp-akzent);
    font-family:     var(--cp-font-b);
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    transition:      background .15s, color .15s;
    text-decoration: none;
}
.ce-nav-btn:hover {
    background: var(--cp-akzent);
    color:      #fff;
}
.ce-nav-btn:disabled, .ce-nav-btn.hidden {
    opacity:        0.3;
    pointer-events: none;
}
.ce-nav-btn.gold {
    background:   var(--cp-akzent);
    color:        #fff;
    border-color: var(--cp-akzent);
}
.ce-nav-btn.gold:hover { background: #b8963e; }

.ce-pager-counter {
    font-size:   11px;
    color:       rgba(0,0,0,.28);
    font-family: var(--cp-font-b);
    text-align:  center;
    flex:        1;
    user-select: none;
    letter-spacing: .3px;
}
.ce-pager-counter strong { color: rgba(0,0,0,.35); font-weight:400; }

/* ── Progress-Bar ── */
.ce-pager-progress-wrap {
    height: 3px;
    background: rgba(201,168,76,.15);
    border-radius: 2px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.ce-pager-progress-bar {
    height: 100%;
    background: var(--cp-akzent);
    border-radius: 2px;
    transition: width .3s ease;
}

/* ── Overlay-Modus ── */
.ce-pager-overlay-trigger {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 22px;
    background:      var(--cp-akzent);
    color:           #fff;
    border:          none;
    border-radius:   4px;
    font-family:     var(--cp-font-b);
    font-size:       .95rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      opacity .15s, transform .15s;
}
.ce-pager-overlay-trigger:hover { opacity: .9; transform: translateY(-1px); }

.ce-pager-overlay-bg {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(5,5,5,.94);
    backdrop-filter: blur(16px) saturate(0.5);
    -webkit-backdrop-filter: blur(16px) saturate(0.5);
    z-index:         999999;
    align-items:     center;
    justify-content: center;
    padding:         16px;
}
.ce-pager-overlay-bg.open { display: flex; }

/* Verhindere Durchscheinen: body scroll sperren + Quiz ausblenden */
body:has(.ce-pager-overlay-bg.open) {
    overflow: hidden !important;
}
/* Quiz-Overlay und andere Overlays hinter Guide-Overlay verstecken */
body:has(.ce-pager-overlay-bg.open) .gf-overlay-backdrop,
body:has(.ce-pager-overlay-bg.open) .gf-overlay-container,
body:has(.ce-pager-overlay-bg.open) .gf-formular[data-modus="overlay"] {
    z-index: 1 !important;
    visibility: hidden;
}

.ce-pager-overlay-box {
    background:     #fff;
    border-radius:  12px;
    width:          calc(100vw - 32px);
    max-width:      1100px;
    height:         calc(100vh - 32px);
    max-height:     calc(100vh - 32px);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    box-shadow:     0 24px 80px rgba(0,0,0,.55);
    animation:      cpSlideUp .3s cubic-bezier(.2,.8,.3,1);
    position:       relative;
}
@media (max-width: 640px) {
    .ce-pager-overlay-box {
        width:         100vw;
        height:        100vh;
        max-height:    100vh;
        border-radius: 0;
    }
    .ce-pager-overlay-header {
        border-radius: 0;
    }
    .ce-pager-overlay-bg {
        padding: 0;
    }
}
@keyframes cpSlideUp {
    from { opacity:0; transform:translateY(24px) scale(.98); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}
.ce-pager-overlay-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 18px 12px 20px;
    background:      #1C2E33;
    flex-shrink:     0;
    gap:             12px;
}
.ce-pager-overlay-title {
    font-family:  var(--cp-font-b);
    font-size:    13px;
    font-weight:  600;
    color:        rgba(255,255,255,.85);
    letter-spacing: .4px;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow:ellipsis;
    flex:         1;
}
.ce-pager-overlay-header-btns {
    display:   flex;
    gap:       6px;
    flex-shrink: 0;
}
.ce-pager-overlay-close {
    width:         32px;
    height:        32px;
    background:    rgba(255,255,255,.12);
    border:        none;
    border-radius: 6px;
    color:         #fff;
    font-size:     18px;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-weight:   400;
    transition:    background .15s;
}
.ce-pager-overlay-close:hover {
    background: rgba(255,255,255,.25);
}
.ce-pager-overlay-inner {
    position:   relative;
    overflow-y: auto;
    overflow-x: hidden;
    flex:        1;
    min-height:  0;
    padding: 0;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: var(--cp-akzent) transparent;
    /* Verhindert Durchscheinen durch transparente Bereiche */
    isolation: isolate;
}
.ce-pager-overlay-nav {
    padding:         12px 1.8rem;
    background:      rgba(28,46,51,.96);
    border-top:      1px solid rgba(201,168,76,.2);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    flex-shrink:     0;
    min-height:      56px;
}
.ce-pager-overlay-nav .ce-nav-btn {
    color:        #e8d9b8;
    border-color: rgba(201,168,76,.4);
    font-size:    14px;
    padding:      8px 20px;
}
.ce-pager-overlay-nav .ce-nav-btn:hover {
    background:   rgba(201,168,76,.15);
    border-color: #c9a84c;
    color:        #c9a84c;
}
.ce-pager-overlay-nav .ce-nav-btn.gold {
    background:   #c9a84c;
    color:        #1C2E33;
    border-color: #c9a84c;
    font-weight:  700;
}
.ce-pager-overlay-nav .ce-nav-btn.gold:hover {
    background:   #b8963e;
}
.ce-pager-overlay-nav .ce-pager-counter {
    color:        rgba(255,255,255,.6);
    font-size:    13px;
}
/* Im Overlay: Zähler sehr klein und dezent */
.ce-pager-overlay-nav .ce-pager-counter {
    font-size:   10px;
    color:       rgba(0,0,0,.2);
}
.ce-pager-overlay-nav .ce-pager-counter strong {
    color: rgba(0,0,0,.25);
    font-weight: 400;
}

/* ── Shortcode-Kopier-Box ── */
.ce-shortcode-copy-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    background:  #f5f1eb;
    border:      1px solid var(--cp-border);
    border-radius: 4px;
    padding:     6px 10px 6px 12px;
    font-family: monospace;
    font-size:   13px;
    color:       #555;
    margin-bottom: 1.2rem;
}
.ce-shortcode-copy-wrap code {
    flex: 1;
    color: #1C2E33;
    background: transparent;
    font-size: 12px;
}
.ce-shortcode-copy-btn {
    padding:     4px 10px;
    background:  var(--cp-akzent);
    border:      none;
    border-radius: 3px;
    color:       #fff;
    font-size:   11px;
    font-weight: 600;
    cursor:      pointer;
    white-space: nowrap;
    transition:  opacity .15s;
    font-family: system-ui, sans-serif;
}
.ce-shortcode-copy-btn:hover { opacity: .85; }
.ce-shortcode-copy-btn.copied { background: #2e7d4f; }

/* ── PDF-Download-Button (Frontend) ── */
.ce-pdf-download-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         8px 18px;
    background:      transparent;
    border:          1px solid var(--cp-akzent);
    border-radius:   4px;
    color:           var(--cp-akzent);
    font-family:     var(--cp-font-b);
    font-size:       12px;
    font-weight:     600;
    text-decoration: none;
    letter-spacing:  .4px;
    transition:      background .15s, color .15s;
}
.ce-pdf-download-btn:hover {
    background: var(--cp-akzent);
    color:      #fff;
}
.ce-pdf-download-btn span {
    font-size: 14px;
    line-height: 1;
}

/* ── Bild-Zoom / Lightbox ── */
.ce-pager-seite img[data-zoom] {
    cursor: zoom-in;
    transition: transform .2s, box-shadow .2s;
}
.ce-pager-seite img[data-zoom]:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.ce-lightbox-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: cpFadeIn .2s ease;
}
.ce-lightbox-bg.open { display: flex; }
.ce-lightbox-bg img {
    max-width: 94vw;
    max-height: 94vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 60px rgba(0,0,0,.7);
    cursor: default;
    animation: cpSlideUp .25s cubic-bezier(.2,.8,.3,1);
}
.ce-lightbox-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 10000000;
}
.ce-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* ── Klein + Vollbild-Button Modus ── */
.ce-pager-klein {
    position:       relative;
    border:         1px solid var(--cp-border);
    border-radius:  var(--cp-radius);
    overflow:       hidden;
    background:     #fff;
    max-width:      100%;
}
.ce-klein-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 14px;
    background:      #faf8f4;
    border-bottom:   1px solid var(--cp-border);
}
.ce-klein-title {
    font-family:  var(--cp-font-b);
    font-size:    13px;
    font-weight:  600;
    color:        var(--cp-text);
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow:ellipsis;
    max-width:    calc(100% - 44px);
}
.ce-klein-fullscreen-btn {
    width:           34px;
    height:          34px;
    background:      var(--cp-akzent);
    border:          none;
    border-radius:   6px;
    color:           #fff;
    font-size:       16px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .15s, transform .12s;
    line-height:     1;
}
.ce-klein-fullscreen-btn:hover {
    background:  #1C2E33;
    transform:   scale(1.08);
}
/* Klein: Seiten kompakter */
.ce-pager-klein .ce-pager-seite:not(.ce-seite-import) {
    padding: 1.5rem 1.8rem;
}
.ce-pager-klein .ce-pager-nav {
    background:   #faf8f4;
    border-top:   1px solid var(--cp-border);
    padding:      8px 14px;
    margin-top:   0;
}
.ce-pager-klein .ce-nav-btn {
    padding: 6px 14px;
    font-size: 12px;
}