/* ============================================================
   PS KOCHBUCH — page-id-18561
   Exakt gleiche Technik wie Restaurant (page-id-17215):
   Flex-Kaskade von #wrapper → #main → alle Zwischen-Container
   → #ps-kb-wrapper füllt den verfügbaren Raum ohne position:fixed
   ============================================================ */

/* #wrapper: volle Viewport-Höhe, Flex-Spalte (height per JS) */
body.page-id-18561 #wrapper {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Header: natürliche Höhe als flex-shrink:0 Kind */
body.page-id-18561 #header,
body.page-id-18561 .header-wrapper {
    z-index: 300 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

/* Footer: fixe Höhe unten */
body.page-id-18561 #footer {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* #main: füllt Raum zwischen Header und Footer */
body.page-id-18561 #main {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* ── Flex-Kaskade durch Flatsome-Zwischen-Container ───────────
   Flatsome page.php erzeugt:
   #main > #content.content-area > .row.row-main > .large-12.col > .col-inner
   Alle müssen flex:1 werden damit #ps-kb-wrapper die volle Höhe bekommt.
   Gleiche Technik wie .content-area/.n2_clear auf der Restaurant-Seite. */
body.page-id-18561 #main #content,
body.page-id-18561 #main .content-area,
body.page-id-18561 #main .page-wrapper {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-id-18561 #main .row-main,
body.page-id-18561 #main .row {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body.page-id-18561 #main .large-12,
body.page-id-18561 #main .col {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body.page-id-18561 #main .col-inner {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Kochbuch Nav: immer scrollbar (auch Desktop) ─────────
   Restaurant-Nav hat justify-content:center → keine Scroll.
   Kochbuch kann mehr Kategorien haben → immer overflow-x:auto */
body.page-id-18561 #ps-kb-nav.ps-restaurant-nav {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.page-id-18561 #ps-kb-nav.ps-restaurant-nav::-webkit-scrollbar { display: none; }
body.page-id-18561 #ps-kb-nav.ps-restaurant-nav a {
    flex-shrink: 0 !important;
}
body.page-id-18561 .ps-kb-page-back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 100%;
    min-width: 42px;
    padding: 0 !important;
    color: var(--ps-accent, #c9a96e) !important;
    background: rgba(0,0,0,.92);
    border-right: 1px solid rgba(201,169,110,.25);
    border-left: 1px solid rgba(255,255,255,.06);
    border-bottom-color: transparent !important;
    font-size: 22px !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
body.page-id-18561 .ps-kb-page-back:hover {
    color: #0a0806 !important;
    background: var(--ps-accent, #c9a96e);
    box-shadow: 0 0 12px rgba(201,169,110,.55);
}
body.page-id-18561 .ps-kb-page-back-floating {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 90;
    border-radius: 999px;
    border-right: 0;
}
body.page-id-18561 #ps-kb-nav .ps-kb-page-back {
    position: sticky;
    left: 0;
    z-index: 2;
    order: -2;
}
body.page-id-18561 #ps-kb-nav-bar > .ps-kb-page-back {
    position: static;
    order: 0;
    z-index: 3;
    margin-right: 8px;
    box-shadow: 10px 0 18px rgba(0,0,0,.75);
}
body.page-id-18561 #ps-kb-nav-bar #ps-kb-nav {
    padding-left: 2px;
}

/* Kommentare und sonstige Seiten-Extras ausblenden */
body.page-id-18561 #comments,
body.page-id-18561 .comments-area,
body.page-id-18561 .post-navigation,
body.page-id-18561 .entry-footer {
    display: none !important;
}

/* Smartphone: Haupt-Menü ausblenden (wie Restaurant-Seite) */
@media (max-width: 767px) {
    body.page-id-18561 .header-main .header-nav { display: none !important; }
    body.page-id-18561 .header-main .nav-toggle  { display: none !important; }
}