/* Tasty-Bewertungssterne sichtbar ab Phase 16-0 (früherer Ausblend-Block entfernt).
   Brand-Styling der Sterne + Kommentare → Sektion „PHASE 16-0" am Dateiende. */

.tasty-recipes-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

.single-post .entry-content {
    font-size: 16px;
    line-height: 1.75;
}

.single-post .entry-content > p:first-of-type {
    font-size: 18px;
    line-height: 1.7;
    color: var(--bb-anthrazit);
    border-left: 4px solid var(--bb-sand);
    padding: 0.25rem 0 0.25rem 1.5rem;
    margin: 1.5rem 0 2rem;
    font-style: italic;
    font-family: 'Fraunces', serif;
    font-weight: 400;
}

/* Gutenberg-Inhalts-Buttons mit Sand-Hintergrund (has-brand-sand-background-color):
   bislang ohne Hover → Hover analog zu den Theme-Buttons (Sand-Dunkel, weiße Schrift). */
.wp-block-button__link.has-brand-sand-background-color { transition: background-color .2s ease; }
.wp-block-button__link.has-brand-sand-background-color:hover,
.wp-block-button__link.has-brand-sand-background-color:focus {
    background-color: var(--bb-sand-dunkel) !important;
    color: var(--bb-weiss) !important;
}

/* Sprung-Buttons im Rezept-Content ("Zum Video"/"Zum Rezept", inline-Sand) — bislang
   ohne Hover. Per href adressiert (Blaupause-Konvention #video/#rezept), Scope = Content. */
.entry-content a[href="#video"]:hover,
.entry-content a[href="#video"]:focus,
.entry-content a[href="#rezept"]:hover,
.entry-content a[href="#rezept"]:focus {
    background: var(--bb-sand-dunkel) !important;
}

/* Content-Buttons als Klasse+Token (ersetzt Inline-Hex, z. B. „Zum Video"/„Zum Rezept").
   !important, damit die Button-Farbe Astras .entry-content a schlägt → pixelgleich zum Inline-Ist.
   Muster/Snippet: benne-os/blueprint.md (CONTENT-BAUSTEINE). */
.bb-btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
}
.bb-btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color .2s ease;
}
.bb-btn--sand {
    background: var(--bb-sand) !important;
    color: var(--bb-weiss) !important;
}
.bb-btn--sand:hover,
.bb-btn--sand:focus {
    background: var(--bb-sand-dunkel) !important;
    color: var(--bb-weiss) !important;
}

/* === Meta + Share als horizontale 2/3 + 1/3 Anordnung === */
.bb-meta-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.bb-meta-card {
    display: flex !important;
    gap: 0 !important;
    background: var(--bb-creme) !important;
    border-radius: 10px !important;
    padding: 1.25rem 1rem !important;
    margin: 0 !important;
    border: 1px solid var(--bb-rand) !important;
    flex-wrap: nowrap !important;
}
.bb-meta-card > span {
    flex: 1 !important;
    text-align: center !important;
    border-right: 1px solid var(--bb-rand) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.bb-meta-card > span:last-child { border-right: none !important; }
.bb-meta-card .bb-ml {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bb-schiefer);
    font-weight: 500;
}
.bb-meta-card .bb-mv {
    font-size: 20px;
    font-weight: 600;
    color: var(--bb-anthrazit);
    font-family: 'Fraunces', serif;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .bb-meta-row {
        grid-template-columns: 1fr;
    }
    .bb-meta-card .bb-mv { font-size: 17px; }
    .bb-meta-card .bb-ml { font-size: 10px; letter-spacing: 1px; }
}

body.page .entry-content h2 {
    margin-top: 3.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* ============================================================
   === Beitrags-Headings dezenter (NUR Rezept- + Tellerrand-Single-
   === Fließtext). Astra-Default ist hier sehr wuchtig (H2 56px / H3 32px);
   === das dominiert erzählerische Beiträge. Fraunces bleibt, Schriftgrad
   === runter, Hierarchie H2 > H3 bleibt sauber erhalten.
   === Statische Seiten (Über mich, Startseite, Kooperation ...) NICHT betroffen.
   ============================================================ */
body.single-post .entry-content h2,
body.single-tellerrand .entry-content h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 2.75rem !important;
    margin-bottom: 1.1rem !important;
}
body.single-post .entry-content h3,
body.single-tellerrand .entry-content h3 {
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-top: 2rem !important;
    margin-bottom: 0.6rem !important;
}
@media (max-width: 768px) {
    body.single-post .entry-content h2,
    body.single-tellerrand .entry-content h2 { font-size: 25px !important; }
    body.single-post .entry-content h3,
    body.single-tellerrand .entry-content h3 { font-size: 20px !important; }
}
@media (max-width: 544px) {
    body.single-post .entry-content h2,
    body.single-tellerrand .entry-content h2 { font-size: 23px !important; }
    body.single-post .entry-content h3,
    body.single-tellerrand .entry-content h3 { font-size: 19px !important; }
}
/* AUSNAHME: Die Box-Headings am Beitrags-Ende ("Bock auf mehr?" = .bb-cta h3,
   "Lieber gemütlich ins Postfach?" = .bb-news-subtitle) bleiben prominent —
   sonst gehen sie neben dem dezenteren Fließtext unter. Höhere Spezifität als
   die Dezent-Regel oben. */
body.single-post .entry-content .bb-cta h3,
body.single-tellerrand .entry-content .bb-cta h3 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    margin: 0 0 0.5rem !important;
}
/* AUSNAHME: FAQ-Box-Headings (.bb-faq-card h3) behalten ihre kompakte Größe +
   Abstände. Sonst erbt die Dezent-Regel oben (body.single-* .entry-content h3,
   Spezifität 0,2,2) margin-top:2rem + 21px und reißt eine Lücke über der Frage
   auf (Regression). Spezifität hier 0,3,2 → gewinnt. Gilt für Rezept + Tellerrand,
   die beide .bb-faq-card im .entry-content nutzen. FAQPage-Schema unberührt. */
body.single-post .entry-content .bb-faq-card h3,
body.single-tellerrand .entry-content .bb-faq-card h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
}
body.single-post .entry-content .bb-news-subtitle,
body.single-tellerrand .entry-content .bb-news-subtitle {
    font-size: 1.5rem !important;   /* ~24px, klar präsent unter dem Divider */
    line-height: 1.3 !important;
}

.bb-tip {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
}
.bb-tip strong {
    display: block;
    color: var(--bb-anthrazit);
    font-size: 16px;
    margin-bottom: 4px;
}

.bb-vari-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 1rem 0 2rem;
    list-style: none !important;
    padding-left: 0 !important;
}
.bb-vari-grid li {
    background: var(--bb-creme);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    list-style: none !important;
}
.bb-vari-grid li strong {
    display: block;
    color: var(--bb-sand);
    font-size: 12px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
@media (max-width: 600px) {
    .bb-vari-grid { grid-template-columns: 1fr; }
}

.bb-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1rem 0 2rem;
}
.bb-faq-card {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.bb-faq-card h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 6px !important;
    color: var(--bb-anthrazit) !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.3 !important;
}
.bb-faq-card p {
    margin: 0 !important;
    font-size: 15px;
    color: var(--bb-schiefer);
    line-height: 1.65;
}

.bb-cta {
    background: linear-gradient(135deg, var(--bb-sand) 0%, var(--bb-sand-dunkel) 100%);
    color: var(--bb-weiss);
    padding: 2.5rem 2rem;
    border-radius: 14px;
    margin: 3rem 0 1rem;
    text-align: center;
}
.bb-cta h3 {
    color: var(--bb-weiss) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    margin: 0 0 0.5rem !important;
    font-family: 'Fraunces', serif !important;
}
.bb-cta p {
    color: var(--bb-weiss) !important;
    margin: 0 0 1.25rem !important;
    font-size: 15px !important;
    opacity: 0.95;
}
.bb-socials {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.bb-socials a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    color: var(--bb-weiss) !important;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}
.bb-socials a:hover {
    background: rgba(255,255,255,0.3);
}
.bb-socials svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* === Reel: Brand-Card, Instagram setzt Breite + Höhe selbst === */
.bb-reel-wrap {
    display: block !important;
    /* Feste Breite (nicht fit-content): sonst kollabiert die Box, wenn statt des
       400px-iframes der Borlabs-Platzhalter steht (geblockter Zustand). */
    width: min(432px, 100%) !important;
    max-width: min(432px, 100%) !important;
    margin: 2.5rem auto !important;
    background: var(--bb-creme) !important;
    border: 1px solid var(--bb-rand) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 4px 12px rgba(41, 39, 42, 0.06) !important;
}
.bb-reel-wrap .brlbs-cmpnt-container,
.bb-reel-wrap .brlbs-cmpnt-content-blocker {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
}
.bb-reel-wrap iframe,
.bb-reel-wrap #instagram-reel-frame {
    display: block !important;
    width: 400px !important;
    max-width: 100% !important;
    height: 706px !important;
    border: none !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
}
.bb-reel-wrap .brlbs-cmpnt-cb-preset-a {
    width: 100% !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1.5rem !important;
    background: transparent !important;
    border-radius: 8px !important;
    text-align: center !important;
}

/* === Tasty-Plugin "Nachgekocht?" Headline aufwerten === */
body .tasty-recipes-entry-footer .tasty-recipes-footer-content {
    padding: 2rem !important;
    background: var(--bb-creme) !important;
    border-radius: 12px !important;
    border: 1px solid var(--bb-rand) !important;
}
body .tasty-recipes-footer-copy h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    font-family: 'Fraunces', serif !important;
    margin: 0 0 8px !important;
    color: var(--bb-anthrazit) !important;
}
body .tasty-recipes-footer-copy div {
    font-size: 15px !important;
    line-height: 1.6 !important;
}
body .tasty-recipes-footer-content svg,
body .tasty-recipes-footer-content img {
    height: 48px !important;
    width: 48px !important;
}

/* === Tasty-Nutrition Kommas entfernen === */
body .tasty-recipes-nutrition li:not(:first-child):not(:last-child):after,
body .tasty-recipes-nutrition li:after {
    content: "" !important;
}
body .tasty-recipes-nutrition li {
    display: inline-block !important;
    margin-right: 16px !important;
}
body .tasty-recipes-nutrition li:first-child {
    display: block !important;
    margin-bottom: 6px !important;
}

/* === Was du dazu servierst: einspaltige Cream-Box mit Häkchen === */
.bb-serve {
    background: var(--bb-creme);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--bb-rand);
}
.bb-serve ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    grid-template-columns: none !important;
}
.bb-serve li {
    list-style: none !important;
    padding-left: 2rem !important;
    position: relative;
    color: var(--bb-anthrazit);
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.5;
}
.bb-serve li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--bb-sand);
    font-weight: bold;
    font-size: 18px;
}
.bb-serve li strong {
    color: var(--bb-anthrazit);
    font-weight: 600;
}

/* === Tasty Footer: Description vergrößern + Links sichtbar === */
body .tasty-recipes-footer-copy div,
body .tasty-recipes-footer-copy div p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--bb-anthrazit) !important;
}
body .tasty-recipes-footer-copy a {
    color: var(--bb-sand) !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}
body .tasty-recipes-footer-copy a:hover {
    color: var(--bb-sand-dunkel) !important;
}

/* === Hero direkt unter Menü, Titel + Meta darunter sichtbar === */
.single-post .entry-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Titel nach Hero: Abstand nach oben, kein extra Padding (article.hentry liefert Indent) */
body.single-post .entry-header .entry-title {
    padding-top: 1.5rem !important;
}
/* #page NICHT mehr nullen -> globaler Header-Offset (--bb-header-h) greift wieder,
   sonst startet das Hero ganz oben hinter dem fixierten Header. */
body.single-post #content,
body.single-post .site-content,
body.single-post #content .ast-container,
body.single-post #primary,
body.single-post #main,
body.single-post article.hentry,
body.single-post .ast-post-format- {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* === Zutaten-Sektion: Liste mit fettem Namen + Beschreibung === */
.bb-zutaten {
    background: var(--bb-creme);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--bb-rand);
}
.bb-zutaten ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.bb-zutaten li {
    list-style: none !important;
    padding-left: 1.75rem !important;
    position: relative;
    color: var(--bb-anthrazit);
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.65;
}
.bb-zutaten li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--bb-sand);
    font-weight: bold;
    font-size: 22px;
    line-height: 1.2;
}
.bb-zutaten li strong {
    color: var(--bb-anthrazit);
    font-weight: 600;
}
@media (max-width: 600px) {
    .bb-zutaten {
        padding: 1.25rem 1.25rem;
    }
}

/* === Zubereitung-Sektion: Nummerierte Schritte mit Erklärung === */
.bb-zubereitung {
    margin: 1.5rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.bb-zubereitung .bb-step {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    padding: 1.25rem 1.5rem 1.25rem 4.5rem;
    position: relative;
}
.bb-zubereitung .bb-step::before {
    content: attr(data-step);
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    width: 36px;
    height: 36px;
    background: var(--bb-sand);
    color: var(--bb-weiss);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
}
.bb-zubereitung .bb-step h4 {
    margin: 0 0 8px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    font-family: 'Fraunces', serif !important;
    line-height: 1.3 !important;
}
.bb-zubereitung .bb-step p {
    margin: 0 0 8px !important;
    font-size: 15px !important;
    color: var(--bb-anthrazit) !important;
    line-height: 1.65 !important;
}
.bb-zubereitung .bb-step p:last-child {
    margin-bottom: 0 !important;
}
.bb-zubereitung .bb-step .bb-warum {
    font-size: 14px !important;
    color: var(--bb-schiefer) !important;
    background: var(--bb-creme);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--bb-sand);
    margin-top: 8px !important;
}
@media (max-width: 600px) {
    .bb-zubereitung .bb-step {
        padding: 1rem 1.25rem 1rem 3.75rem;
    }
    .bb-zubereitung .bb-step::before {
        left: 1rem;
        top: 1rem;
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

/* === Shadow auf weißer Content-Karte + Hero full-width === */
body.single-post #content .ast-container {
    background: var(--bb-weiss) !important;
    box-shadow: 0 2px 24px rgba(41, 39, 42, 0.06) !important;
}
body.single-post #primary,
body.single-post #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.single-post .entry-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Hero-Bild: bricht per negative Margins aus article.hentry (106.72px) + .ast-container (20px) heraus */
body.single-post .post-thumb-img-content,
body.single-post .post-thumb {
    margin-left: -126.72px !important;
    margin-right: -126.72px !important;
    width: calc(100% + 253.44px) !important;
    max-width: none !important;
    overflow: visible !important;
}
body.single-post .post-thumb-img-content img,
body.single-post .post-thumb img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    aspect-ratio: 16 / 9 !important;        /* Rezept-Hero fest 16:9 (Phase 14b); cover cropt das 4:3-Original */
    height: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    /* Hero-Bild = Verlängerung der weißen Karte → NUR obere Ecken runden */
    border-radius: 16px 16px 0 0 !important;
}
body.single-post .entry-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
@media (max-width: 600px) {
    body.single-post .entry-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* === Entry-Header: kein Padding — Bild muss randlos sein === */
body.single-post .entry-header,
body.single-post .ast-post-format- > .entry-header {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Titel bekommt eigenes Padding (nicht über entry-header, da Bild darin sitzt) */
body.single-post .entry-header .entry-title {
    padding: 1.5rem 0 0.5rem 1.5rem !important;
    margin: 0 !important;
    font-family: 'Fraunces', serif;
}
/* Astra-Meta (Frühstück & Brunch | Von Benne Benzing) ausblenden — unsere Breadcrumbs sind besser */
body.single-post .entry-meta,
body.single-post .ast-post-format- .entry-header .ast-post-format-,
body.single-post .ast-taxonomy-container,
body.single-post .ast-author-details {
    display: none !important;
}
body.single-post .bb-breadcrumbs {
    padding: 0 !important;
    margin: 0 0 1rem !important;
    font-size: 13px !important;
    color: var(--bb-schiefer) !important;
    display: block !important;
}
body.single-post .bb-breadcrumbs a {
    color: var(--bb-sand) !important;
    text-decoration: none !important;
}
body.single-post .bb-breadcrumbs a:hover {
    text-decoration: underline !important;
}
body.single-post .bb-breadcrumbs .separator {
    color: var(--bb-sand) !important;
    margin: 0 6px !important;
}

/* === CTA-Tagline größer + Brand-Sand-Box besser lesbar === */
.bb-cta p {
    color: var(--bb-weiss) !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 0 0 1.5rem !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* === Share-Buttons === */
.bb-share {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 1.25rem 1rem !important;
    background: var(--bb-creme);
    border-radius: 10px;
    border: 1px solid var(--bb-rand);
}
.bb-share-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bb-schiefer);
    font-weight: 500;
    margin: 0 0 4px;
}
.bb-share-icons {
    display: flex;
    gap: 8px;
}
.bb-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bb-weiss);
    color: var(--bb-anthrazit) !important;
    text-decoration: none !important;
    border: 1px solid var(--bb-rand);
    transition: all 0.2s;
}
.bb-share a:hover {
    background: var(--bb-sand);
    color: var(--bb-weiss) !important;
    border-color: var(--bb-sand);
    transform: translateY(-2px);
}
.bb-share a svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}
@media (max-width: 600px) {
    .bb-share {
        padding: 1rem !important;
    }
}

/* === Verwandte Rezepte === */
.bb-related {
    margin: 3rem 0 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
.bb-related-title {
    font-family: 'Fraunces', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin: 0 0 1.5rem !important;
    color: var(--bb-anthrazit) !important;
}
.bb-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.bb-related-card {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.bb-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(41, 39, 42, 0.08);
    border-color: var(--bb-sand);
}
.bb-related-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bb-creme);
}
.bb-related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.bb-related-card:hover .bb-related-card-image img {
    transform: scale(1.05);
}
.bb-related-card-body {
    padding: 1rem 1.125rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bb-related-card-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bb-sand);
    font-weight: 600;
    margin-bottom: 6px;
}
.bb-related-card-title {
    font-family: 'Fraunces', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
@media (max-width: 768px) {
    .bb-related-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .bb-related {
        margin: 2rem 0 1.5rem;
    }
}

/* === CTA-Pills größer === */
.bb-socials a {
    padding: 14px 26px !important;
    font-size: 15px !important;
    gap: 10px !important;
}
.bb-socials svg {
    width: 20px !important;
    height: 20px !important;
}

/* === Tasty-Recipe-Card mit Rahmen, Cream-Background === */
body .tasty-recipes {
    border: 1px solid var(--bb-rand) !important;
    border-radius: 12px !important;
    background: var(--bb-weiss) !important;
    box-shadow: 0 2px 12px rgba(41, 39, 42, 0.04) !important;
    overflow: hidden !important;
}
body .tasty-recipes-entry-header,
body .tasty-recipes .tasty-recipes-entry-header {
    background: var(--bb-creme) !important;
    border-bottom: 1px solid var(--bb-rand) !important;
}

/* === Tasty-Card-Titel größer und brand-styled === */
body .tasty-recipes-title,
body .tasty-recipes .tasty-recipes-title,
body .tasty-recipes-entry-header .tasty-recipes-title {
    font-family: 'Fraunces', serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
}
@media (max-width: 600px) {
    body .tasty-recipes-title,
    body .tasty-recipes .tasty-recipes-title,
    body .tasty-recipes-entry-header .tasty-recipes-title {
        font-size: 22px !important;
    }
}

/* === Tag/Kategorie-Pills über Tasty-Card (Brand-Sand gefüllt) === */
.bb-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
    align-items: center;
}
.bb-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    background: var(--bb-sand);
    color: var(--bb-weiss) !important;
    border: 1px solid var(--bb-sand);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s;
}
.bb-pill:hover {
    background: var(--bb-sand-dunkel);
    border-color: var(--bb-sand-dunkel);
    color: var(--bb-weiss) !important;
}

/* === Tag/Kategorie-Archive: SEO-Text oben === */
.bb-archive-intro {
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    margin: 1.5rem 0 2.5rem;
    font-size: 16px;
    line-height: 1.7;
    color: var(--bb-anthrazit);
}
.bb-archive-intro p {
    margin: 0 0 1rem !important;
}
.bb-archive-intro p:last-child {
    margin-bottom: 0 !important;
}
.bb-archive-intro a {
    color: var(--bb-sand) !important;
    text-decoration: underline !important;
}
@media (max-width: 600px) {
    .bb-archive-intro {
        padding: 1.25rem 1.25rem;
    }
}

/* === Archive-Header === */
body.archive .bb-archive-header {
    padding: 2.5rem 126.72px 1.5rem !important;
    background: var(--bb-weiss) !important;
}
body.archive .bb-archive-header .bb-breadcrumbs {
    margin: 0 0 1rem !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--bb-schiefer) !important;
}
body.archive .bb-archive-header .bb-breadcrumbs a {
    color: var(--bb-sand) !important;
    text-decoration: none !important;
}
body.archive .bb-archive-header .bb-breadcrumbs a:hover {
    text-decoration: underline !important;
}
body.archive .bb-archive-header .bb-breadcrumbs .separator {
    color: var(--bb-sand) !important;
    margin: 0 6px !important;
}
body.archive .bb-archive-h1 {
    font-family: 'Fraunces', serif !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1.5rem !important;
    line-height: 1.15 !important;
}
body.archive .bb-archive-intro {
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 0 0 2rem;
    font-size: 16px;
    line-height: 1.7;
    color: var(--bb-anthrazit);
}
body.archive .bb-archive-intro p {
    margin: 0 0 1rem !important;
}
body.archive .bb-archive-intro p:last-child {
    margin-bottom: 0 !important;
}

/* === Archive-Grid für Rezept-Cards (korrigiert für main#main > .ast-row) === */
body.archive main#main > .ast-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    padding: 0 126.72px !important;
    margin: 0 !important;
}
body.archive main#main > .ast-row > article {
    width: 100% !important;
    max-width: 100% !important;
    background: var(--bb-weiss) !important;
    border: 1px solid var(--bb-rand) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.2s !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
body.archive main#main > .ast-row > article:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(41, 39, 42, 0.08);
    border-color: var(--bb-sand) !important;
}
body.archive main#main > .ast-row > article .ast-article-inner,
body.archive main#main > .ast-row > article .ast-post-format- {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
body.archive main#main > .ast-row > article .post-content {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
body.archive main#main > .ast-row > article .ast-blog-featured-section,
body.archive main#main > .ast-row > article .post-thumb {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: var(--bb-creme) !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1 !important;
}
body.archive main#main > .ast-row > article .ast-blog-featured-section img,
body.archive main#main > .ast-row > article .post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}
body.archive main#main > .ast-row > article .entry-title,
body.archive main#main > .ast-row > article h2.entry-title {
    font-family: 'Fraunces', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 !important;
    padding: 1rem 1.125rem 0 !important;
    line-height: 1.3 !important;
    order: 2 !important;
}
body.archive main#main > .ast-row > article .entry-title a {
    color: var(--bb-anthrazit) !important;
    text-decoration: none !important;
}
body.archive main#main > .ast-row > article .entry-header,
body.archive main#main > .ast-row > article .ast-blog-meta-container {
    padding: 0 1.125rem 1rem !important;
    margin: 4px 0 0 !important;
    order: 3 !important;
    font-size: 12px !important;
    color: var(--bb-schiefer) !important;
}
body.archive main#main > .ast-row > article .ast-excerpt-container,
body.archive main#main > .ast-row > article .entry-content,
body.archive main#main > .ast-row > article .ast-read-more-container,
body.archive main#main > .ast-row > article .read-more,
body.archive main#main > .ast-row > article .entry-meta {
    display: none !important;
}

/* Spezifische Mobile-Anpassungen für das Grid */
@media (max-width: 768px) {
    body.archive main#main > .ast-row {
        grid-template-columns: 1fr 1fr !important;
        padding: 0 1.25rem !important;
        gap: 1rem !important;
    }
}
@media (max-width: 500px) {
    body.archive main#main > .ast-row {
        grid-template-columns: 1fr !important;
    }
}

/* === Archive-Footer: SEO, FAQ, Related === */
body.archive .bb-archive-footer {
    padding: 2rem 126.72px 3rem !important;
    background: var(--bb-weiss) !important;
}
body.archive .bb-archive-seo {
    margin: 2rem 0 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
body.archive .bb-archive-seo h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 2rem 0 1rem !important;
    line-height: 1.3 !important;
}
body.archive .bb-archive-seo h2:first-child {
    margin-top: 0 !important;
}
body.archive .bb-archive-seo h3 {
    font-family: 'Fraunces', serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 1.5rem 0 0.75rem !important;
}
body.archive .bb-archive-seo p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1rem !important;
}
body.archive .bb-archive-seo a {
    color: var(--bb-sand) !important;
    text-decoration: underline !important;
}
body.archive .bb-archive-seo a:hover {
    color: var(--bb-sand-dunkel) !important;
}

/* FAQ-Sektion */
body.archive .bb-archive-faq {
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
body.archive .bb-archive-faq-title {
    font-family: 'Fraunces', serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1.5rem !important;
}
body.archive .bb-archive-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.archive .bb-archive-faq-item {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
body.archive .bb-archive-faq-item h3 {
    font-family: 'Fraunces', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
body.archive .bb-archive-faq-item p {
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--bb-schiefer) !important;
    line-height: 1.65 !important;
}

/* Verwandte Tags */
body.archive .bb-archive-related {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
body.archive .bb-archive-related-title {
    font-family: 'Fraunces', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1.5rem !important;
}

/* Pagination */
body.archive .ast-pagination,
body.archive .navigation.pagination {
    display: flex !important;
    justify-content: center !important;
    margin: 2.5rem 2.5rem 0 !important;
    padding: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
    body.archive .bb-archive-header,
    body.archive .bb-archive-footer {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    body.archive main#main > .ast-row {
        grid-template-columns: 1fr 1fr !important;
        padding: 0 1.25rem 1.5rem !important;
        gap: 1rem !important;
    }
    body.archive .bb-archive-h1 {
        font-size: 28px !important;
    }
    body.archive .no-results {
        margin: 1rem 1.25rem 1.5rem !important;
    }
}
@media (max-width: 500px) {
    body.archive main#main > .ast-row {
        grid-template-columns: 1fr !important;
    }
}

/* === Astra-Default-Archive-Header ausblenden (wir haben unseren eigenen) === */
body.archive .ast-archive-description,
body.archive section.ast-archive-description,
body.archive h1.ast-archive-title,
body.archive .page-title.ast-archive-title {
    display: none !important;
}

/* === Archive: Cream-Außenbereich, weiße Content-Karte (exakt wie Rezept-Single) === */
body.archive,
body.tag,
body.category,
body.tax-tellerrand_kategorie,
body.tax-tellerrand_thema {
    background: var(--bb-creme) !important;
}
body.archive #page,
body.tag #page,
body.category #page,
body.tax-tellerrand_kategorie #page,
body.tax-tellerrand_thema #page,
body.archive #content,
body.tag #content,
body.category #content,
body.tax-tellerrand_kategorie #content,
body.tax-tellerrand_thema #content {
    background: transparent !important;
}
body.archive #content .ast-container,
body.tag #content .ast-container,
body.category #content .ast-container,
body.tax-tellerrand_kategorie #content .ast-container,
body.tax-tellerrand_thema #content .ast-container {
    background: var(--bb-weiss) !important;
    box-shadow: 0 2px 24px rgba(41, 39, 42, 0.06) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.archive #primary,
body.tag #primary,
body.category #primary,
body.tax-tellerrand_kategorie #primary,
body.tax-tellerrand_thema #primary,
body.archive main#main,
body.tag main#main,
body.category main#main,
body.tax-tellerrand_kategorie main#main,
body.tax-tellerrand_thema main#main {
    background: transparent !important;
    padding: 0 !important;
}
body.archive main#main > .ast-row,
body.tag main#main > .ast-row,
body.category main#main > .ast-row,
body.tax-tellerrand_kategorie main#main > .ast-row,
body.tax-tellerrand_thema main#main > .ast-row {
    background: var(--bb-weiss) !important;
    padding: 0 126.72px 2rem !important;
    margin: 0 !important;
}

/* === Empty State für leere Tag/Kategorie-Seiten === */
body.archive .no-results,
body.archive .ast-no-results,
body.archive .search-no-results {
    background: var(--bb-creme) !important;
    border: 1px solid var(--bb-rand) !important;
    border-radius: 12px !important;
    padding: 2.5rem 2rem !important;
    margin: 1.5rem 126.72px 2rem !important;
    text-align: center !important;
}
body.archive .no-results .page-title,
body.archive .no-results h1,
body.archive .no-results h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 22px !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 12px !important;
}
body.archive .no-results p {
    font-size: 16px !important;
    color: var(--bb-schiefer) !important;
    margin: 0 !important;
}
/* Suchformular im Empty-State ausblenden */
body.archive .no-results .search-form,
body.archive .no-results .search-submit,
body.archive .no-results input[type="search"] {
    display: none !important;
}

@media (max-width: 768px) {
    body.archive main#main > .ast-row,
    body.tag main#main > .ast-row,
    body.category main#main > .ast-row,
    body.tax-tellerrand_kategorie main#main > .ast-row,
    body.tax-tellerrand_thema main#main > .ast-row {
        padding: 0 1.25rem 1.5rem !important;
    }
    body.archive .no-results,
    body.tag .no-results,
    body.category .no-results,
    body.tax-tellerrand_kategorie .no-results,
    body.tax-tellerrand_thema .no-results {
        margin: 1rem 1.25rem 1.5rem !important;
    }
    body.archive .bb-archive-header,
    body.tag .bb-archive-header,
    body.category .bb-archive-header,
    body.tax-tellerrand_kategorie .bb-archive-header,
    body.tax-tellerrand_thema .bb-archive-header,
    body.archive .bb-archive-footer,
    body.tag .bb-archive-footer,
    body.category .bb-archive-footer,
    body.tax-tellerrand_kategorie .bb-archive-footer,
    body.tax-tellerrand_thema .bb-archive-footer {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}


/* === Tellerrand-Karte: Thema/Cluster-Label unter dem Titel === */
body.archive main#main > .ast-row > article .bb-archive-card-meta {
    display: inline-block;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--bb-sand) !important;
    font-weight: 600;
}

/* ============================================================
   === Rezepte-Übersichtsseite (/rezepte/)               ===
   ============================================================ */

body.page-template-rezepte-overview,
body.page-template-tellerrand-overview {
    /* Grundfläche hinter dem weißen Content-Block: exakt Astras Content-Background
       (#fdfbf6) wie auf Über mich/Kooperation — zentrale Quelle, bleibt synchron.
       Vorher fälschlich var(--bb-creme) (Site Background, dunkler). */
    background: var(--bb-offweiss) !important;
}
body.page-template-rezepte-overview #page,
body.page-template-rezepte-overview #content,
body.page-template-tellerrand-overview #page,
body.page-template-tellerrand-overview #content {
    background: transparent !important;
}
/* Weißer Content-Block NUR im Content-Bereich (#content), NICHT im Header.
   Sonst bekäme der Header-Container auf diesen Seiten einen weißen Balken
   (Phase 4: Header überall transparent/luftig). */
body.page-template-rezepte-overview #content .ast-container,
body.page-template-tellerrand-overview #content .ast-container {
    background: var(--bb-weiss) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 2px 24px rgba(41, 39, 42, 0.06) !important;
}
body.page-template-rezepte-overview #primary,
body.page-template-rezepte-overview main#main,
body.page-template-tellerrand-overview #primary,
body.page-template-tellerrand-overview main#main {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Wrapper für alle Inhalte */
.bb-overview-wrap {
    padding: 2.5rem 126.72px 3rem;
    background: var(--bb-weiss);
}
.bb-overview-wrap .bb-breadcrumbs {
    margin: 0 0 1rem !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--bb-schiefer) !important;
}
.bb-overview-wrap .bb-breadcrumbs a {
    color: var(--bb-sand) !important;
    text-decoration: none !important;
}
.bb-overview-wrap .bb-breadcrumbs a:hover {
    text-decoration: underline !important;
}
.bb-overview-wrap .bb-breadcrumbs .separator {
    color: var(--bb-sand) !important;
    margin: 0 6px !important;
}

.bb-overview-h1 {
    font-family: 'Fraunces', serif !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1.5rem !important;
    line-height: 1.15 !important;
}

.bb-overview-wrap .bb-archive-intro {
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 0 0 2.5rem;
    font-size: 16px;
    line-height: 1.7;
    color: var(--bb-anthrazit);
}
.bb-overview-wrap .bb-archive-intro p {
    margin: 0 0 1rem !important;
}
.bb-overview-wrap .bb-archive-intro p:last-child {
    margin-bottom: 0 !important;
}

/* Sektionen */
.bb-overview-section {
    margin: 0 0 3rem;
}
.bb-overview-section:last-of-type {
    margin-bottom: 2rem;
}
.bb-overview-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1.25rem;
}
.bb-overview-h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1.25rem !important;
    line-height: 1.2 !important;
}
.bb-overview-section-head .bb-overview-h2 {
    margin: 0 !important;
}
.bb-overview-all-link {
    font-size: 14px !important;
    color: var(--bb-sand) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    white-space: nowrap;
    transition: color 0.2s;
}
.bb-overview-all-link:hover {
    color: var(--bb-sand-dunkel) !important;
    text-decoration: underline !important;
}

/* Card-Grid */
.bb-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.bb-overview-card {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.bb-overview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(41, 39, 42, 0.08);
    border-color: var(--bb-sand);
}
.bb-overview-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bb-creme);
}
/* Serien-Badge „Folge/Staffel" — nur auf den Serien-Tag-Archiven.
   Wrapper macht das Karten-Thumbnail zum Positionierungs-Kontext. */
.bb-serie-thumb {
    position: relative;
    display: block;
}
.bb-card-badge {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 2;
    background: var(--bb-sand);
    color: var(--bb-anthrazit);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0.375rem 0.625rem;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.bb-overview-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.bb-overview-card:hover .bb-overview-card-image img {
    transform: scale(1.05);
}
.bb-overview-card-body {
    padding: 1rem 1.125rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bb-overview-card-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bb-sand);
    font-weight: 600;
    margin-bottom: 6px;
}
.bb-overview-card-title {
    font-family: 'Fraunces', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Tag-Cloud unten */
.bb-overview-tags {
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
.bb-overview-tags .bb-overview-h2 {
    margin: 0 0 1.25rem !important;
}
.bb-overview-tags .bb-pills {
    gap: 8px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .bb-overview-wrap {
        padding: 1.5rem 1.25rem 2rem;
    }
    .bb-overview-h1 {
        font-size: 28px !important;
    }
    .bb-overview-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .bb-overview-h2 {
        font-size: 22px !important;
    }
    .bb-overview-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 500px) {
    .bb-overview-grid {
        grid-template-columns: 1fr;
    }
}

/* === Rezepte-Übersicht: Grid-Spezifität nachhärten === */
body.page-template-rezepte-overview .bb-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
}
body.page-template-rezepte-overview .bb-overview-grid > .bb-overview-card,
body.page-template-rezepte-overview a.bb-overview-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-decoration: none !important;
}
body.page-template-rezepte-overview .bb-overview-card-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: var(--bb-creme) !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.page-template-rezepte-overview .bb-overview-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    body.page-template-rezepte-overview .bb-overview-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 500px) {
    body.page-template-rezepte-overview .bb-overview-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === Rezepte-Übersicht: Saison-Box === */
body.page-template-rezepte-overview .bb-saison-box {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 0 0 2rem;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
body.page-template-rezepte-overview .bb-saison-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bb-sand);
    font-weight: 700;
    white-space: nowrap;
}
body.page-template-rezepte-overview .bb-saison-pills {
    flex: 1;
    gap: 8px !important;
    margin: 0 !important;
}

/* === Rezepte-Übersicht: Bottom-SEO-Text === */
body.page-template-rezepte-overview .bb-overview-seo {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
body.page-template-rezepte-overview .bb-overview-seo h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 2rem 0 1rem !important;
    line-height: 1.3 !important;
}
body.page-template-rezepte-overview .bb-overview-seo h2:first-child {
    margin-top: 0 !important;
}
body.page-template-rezepte-overview .bb-overview-seo h3 {
    font-family: 'Fraunces', serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 1.5rem 0 0.75rem !important;
}
body.page-template-rezepte-overview .bb-overview-seo p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1rem !important;
}
body.page-template-rezepte-overview .bb-overview-seo a {
    color: var(--bb-sand) !important;
    text-decoration: underline !important;
}
body.page-template-rezepte-overview .bb-overview-seo a:hover {
    color: var(--bb-sand-dunkel) !important;
}

/* === Rezepte-Übersicht: FAQ === */
body.page-template-rezepte-overview .bb-overview-faq {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
body.page-template-rezepte-overview .bb-overview-faq .bb-archive-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 1.5rem;
}
body.page-template-rezepte-overview .bb-overview-faq .bb-archive-faq-item {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
body.page-template-rezepte-overview .bb-overview-faq .bb-archive-faq-item h3 {
    font-family: 'Fraunces', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
body.page-template-rezepte-overview .bb-overview-faq .bb-archive-faq-item p {
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--bb-schiefer) !important;
    line-height: 1.65 !important;
}

@media (max-width: 768px) {
    body.page-template-rezepte-overview .bb-saison-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   === Tellerrand-Übersicht + Rezepte-Übersicht
   === Gemeinsame .bb-overview-wrap-Regeln (body-class-unabhängig)
   ============================================================ */

/* Grid: 3 Spalten — beide Hub-Pages */
.bb-overview-wrap .bb-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
}
.bb-overview-wrap .bb-overview-grid > .bb-overview-card,
.bb-overview-wrap a.bb-overview-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-decoration: none !important;
}
.bb-overview-wrap .bb-overview-card-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: var(--bb-creme) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.bb-overview-wrap .bb-overview-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Platzhalter-Box für leere Cluster */
.bb-cluster-placeholder {
    background: #FAF6F1;
    border: 2px dashed var(--bb-sand);
    border-radius: 10px;
    padding: 2rem 2.5rem;
    color: #7A6A5A;
    font-size: 15px;
    line-height: 1.6;
}
.bb-cluster-placeholder p {
    margin: 0;
}
.bb-cluster-placeholder strong {
    color: #4A3C2A;
}

/* Bottom-SEO-Text — beide Hub-Pages */
.bb-overview-wrap .bb-overview-seo {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
.bb-overview-wrap .bb-overview-seo h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 1.5rem 0 .75rem !important;
    line-height: 1.25 !important;
}
.bb-overview-wrap .bb-overview-seo h2:first-child {
    margin-top: 0 !important;
}
.bb-overview-wrap .bb-overview-seo h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    margin: 1.5rem 0 .5rem !important;
}
.bb-overview-wrap .bb-overview-seo p {
    font-size: 15px !important;
    color: var(--bb-schiefer) !important;
    line-height: 1.7 !important;
    margin: 0 0 1rem !important;
}
.bb-overview-wrap .bb-overview-seo a {
    color: var(--bb-sand) !important;
    text-decoration: none !important;
}
.bb-overview-wrap .bb-overview-seo a:hover {
    text-decoration: underline !important;
}

/* FAQ-Sektion — beide Hub-Pages */
.bb-overview-wrap .bb-overview-faq {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
.bb-overview-wrap .bb-overview-faq .bb-archive-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 1.5rem;
}
.bb-overview-wrap .bb-overview-faq .bb-archive-faq-item {
    background: var(--bb-weiss) !important;
    border: 1px solid var(--bb-rand) !important;
    border-radius: 12px !important;
    padding: 1.25rem 1.5rem !important;
}
.bb-overview-wrap .bb-overview-faq .bb-archive-faq-item h3 {
    font-family: 'Fraunces', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
.bb-overview-wrap .bb-overview-faq .bb-archive-faq-item p {
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--bb-schiefer) !important;
    line-height: 1.65 !important;
}

/* Responsive — beide Hub-Pages */
@media (max-width: 768px) {
    .bb-overview-wrap .bb-overview-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 500px) {
    .bb-overview-wrap .bb-overview-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   === Tellerrand-ARCHIVE (Cluster + Thema): exakt dieselben Karten wie
   === /tellerrand. Die Archiv-Templates haben KEIN .bb-overview-wrap, daher
   === verlieren die Basis-Card-Regeln gegen Astra/Core (Bild blieb Hochformat,
   === Ausrichtung kippte). Hier die robusten Overview-Regeln 1:1 gespiegelt,
   === gescoped auf die Archiv-Body-Klassen.
   ============================================================ */
body.tax-tellerrand_kategorie .bb-overview-grid,
body.tax-tellerrand_thema .bb-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    /* Brand-Einzug wie der Archiv-Header (vorher auf .ast-row, ging beim
       Markup-Wechsel verloren -> Grid war nicht mehr bündig) */
    padding: 0 126.72px 1.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
body.tax-tellerrand_kategorie .bb-overview-grid > .bb-overview-card,
body.tax-tellerrand_kategorie a.bb-overview-card,
body.tax-tellerrand_thema .bb-overview-grid > .bb-overview-card,
body.tax-tellerrand_thema a.bb-overview-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-decoration: none !important;
}
body.tax-tellerrand_kategorie .bb-overview-card-image,
body.tax-tellerrand_thema .bb-overview-card-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: var(--bb-creme) !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.tax-tellerrand_kategorie .bb-overview-card-image img,
body.tax-tellerrand_thema .bb-overview-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
}
@media (max-width: 768px) {
    body.tax-tellerrand_kategorie .bb-overview-grid,
    body.tax-tellerrand_thema .bb-overview-grid {
        grid-template-columns: 1fr 1fr !important;
        padding: 0 1.25rem 1.5rem !important;   /* wie der Header mobil */
        gap: 1rem !important;
    }
}
@media (max-width: 500px) {
    body.tax-tellerrand_kategorie .bb-overview-grid,
    body.tax-tellerrand_thema .bb-overview-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   === Tellerrand Single Posts (body.single-tellerrand)    ===
   ============================================================ */

/* Struktur-Spiegelung von body.single-post */
.single-tellerrand .entry-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* #page NICHT mehr nullen -> globaler Header-Offset (--bb-header-h) greift wieder. */
body.single-tellerrand #content,
body.single-tellerrand .site-content,
body.single-tellerrand #content .ast-container,
body.single-tellerrand #primary,
body.single-tellerrand #main,
body.single-tellerrand article.hentry,
body.single-tellerrand .ast-post-format- {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* NUR die Content-Karte (auf #content gescoped) — sonst trifft .ast-container
   auch Header (#masthead) und Footer (.bb-footer) -> weißer Schatten-Kasten. */
body.single-tellerrand #content .ast-container {
    background: var(--bb-weiss) !important;
    box-shadow: 0 2px 24px rgba(41, 39, 42, 0.06) !important;
}
body.single-tellerrand #primary,
body.single-tellerrand #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.single-tellerrand .entry-header {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Hero-Bild: bricht aus article.hentry (126.72px) + .ast-container (20px) heraus */
body.single-tellerrand .post-thumb-img-content,
body.single-tellerrand .post-thumb {
    margin-left: -126.72px !important;
    margin-right: -126.72px !important;
    width: calc(100% + 253.44px) !important;
    max-width: none !important;
    overflow: visible !important;
}
body.single-tellerrand .post-thumb-img-content img,
body.single-tellerrand .post-thumb img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    max-height: 520px !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 16px 16px 0 0 !important;  /* Oberkante der Karte runden (wie single-post) */
}
/* Cluster-Badge unter Hero */
.bb-tellerrand-badge-wrap {
    padding: 1rem 1.5rem 0;
}
/* H1 im entry-header */
body.single-tellerrand .entry-header .entry-title {
    padding: 0.75rem 1.5rem 0.25rem !important;
    margin: 0 !important;
    font-family: 'Fraunces', serif;
    font-size: 32px !important;
    line-height: 1.2 !important;
    color: var(--bb-anthrazit) !important;
}
/* Astra-Meta ausblenden — Tellerrand hat eigene Struktur */
body.single-tellerrand .entry-meta,
body.single-tellerrand .ast-taxonomy-container,
body.single-tellerrand .ast-author-details {
    display: none !important;
}
/* Content-Bereich */
body.single-tellerrand .entry-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
/* Erster Absatz NICHT kursiv-styled (Breadcrumbs kommen zuerst) */
body.single-tellerrand .entry-content > p:first-of-type {
    font-size: 16px !important;
    border-left: none !important;
    padding-left: 0 !important;
    font-style: normal !important;
    color: var(--bb-anthrazit) !important;
}
/* Breadcrumbs */
body.single-tellerrand .bb-breadcrumbs {
    padding: 0 !important;
    margin: 0 0 1rem !important;
    font-size: 13px !important;
    color: var(--bb-schiefer) !important;
    display: block !important;
}
body.single-tellerrand .bb-breadcrumbs a {
    color: var(--bb-sand) !important;
    text-decoration: none !important;
}
body.single-tellerrand .bb-breadcrumbs a:hover {
    text-decoration: underline !important;
}
body.single-tellerrand .bb-breadcrumbs .separator {
    color: var(--bb-sand) !important;
    margin: 0 6px !important;
}

/* === Tellerrand-Hero-Platzhalter (wenn kein Featured Image) === */
.bb-tellerrand-hero-placeholder {
    background: linear-gradient(135deg, var(--bb-creme) 0%, #EDE6D6 100%);
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -126.72px;
    margin-right: -126.72px;
    width: calc(100% + 253.44px);
    overflow: hidden;
}
.bb-tellerrand-placeholder-label {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--bb-sand);
    opacity: 0.6;
}

/* === Excerpt-Teaser unter H1 === */
.bb-tellerrand-excerpt {
    font-size: 17px !important;
    line-height: 1.65 !important;
    color: var(--bb-schiefer) !important;
    margin: 0.25rem 0 0 !important;
    padding: 0 1.5rem 1rem !important;
    font-style: italic;
}

/* === Cluster-Pill (Outline-Variante für Badge-Wrap) === */
.bb-cluster-pill {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 4px 12px !important;
    background: transparent !important;
    color: var(--bb-sand) !important;
    border: 1px solid var(--bb-sand) !important;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}
.bb-cluster-pill:hover {
    background: var(--bb-sand) !important;
    color: var(--bb-weiss) !important;
}

/* === Reel-Embed-Wrapper === */
.bb-reel-wrap {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

/* === Mobile === */
@media (max-width: 768px) {
    body.single-tellerrand .post-thumb-img-content,
    body.single-tellerrand .post-thumb {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    .bb-tellerrand-hero-placeholder {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        height: 180px;
    }
    .bb-tellerrand-badge-wrap {
        padding: 0.75rem 1rem 0;
    }
    body.single-tellerrand .entry-header .entry-title {
        padding: 0.75rem 1rem 0.25rem !important;
        font-size: 26px !important;
    }
    .bb-tellerrand-excerpt {
        padding: 0 1rem 0.75rem !important;
        font-size: 15px !important;
    }
    body.single-tellerrand .entry-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ============================================================
   === Tellerrand: Vergleichs-Grid                         ===
   ============================================================ */

.bb-vergleich {
    margin: 2.5rem 0 3rem;
}
.bb-vergleich-subtitle {
    font-size: 16px !important;
    color: var(--bb-schiefer) !important;
    font-style: italic;
    margin: 0 0 2rem !important;
    line-height: 1.65;
}

/* Bild oben full-width, Content darunter volle Breite */
.bb-vergleich-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.bb-vergleich-karte {
    background: var(--bb-offweiss);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    overflow: hidden;
    display: block;
}
.bb-vergleich-karte-bild {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    background: var(--bb-creme);
}
.bb-vergleich-karte-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bb-vergleich-karte-inner {
    padding: 2rem 2.5rem 2.25rem;
}
.bb-vergleich-karte h3 {
    font-family: 'Fraunces', serif !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 0.25rem !important;
    line-height: 1.2 !important;
}
.bb-vergleich-karte .bb-subtitle {
    font-size: 1rem !important;
    font-style: italic;
    color: var(--bb-schiefer) !important;
    margin: 0 0 1.25rem !important;
}
.bb-beschreibung {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1.5rem !important;
}
.bb-vergleich-listen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1.5rem 0;
}
.bb-vergleich-pros,
.bb-vergleich-contras {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bb-vergleich-pros li,
.bb-vergleich-contras li {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 8px !important;
    padding-left: 1.6em !important;
    position: relative;
}
.bb-vergleich-pros li::before {
    content: "✅";
    position: absolute;
    left: 0;
    top: 1px;
    margin-right: 4px;
}
.bb-vergleich-contras li::before {
    content: "❌";
    position: absolute;
    left: 0;
    top: 1px;
    margin-right: 4px;
}
.bb-wofuer-perfekt {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bb-rand);
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--bb-anthrazit) !important;
}
.bb-wofuer-perfekt strong {
    color: var(--bb-anthrazit);
    font-weight: 600;
    margin-right: 6px;
}
.bb-tipp-box {
    background: var(--bb-sand);
    color: var(--bb-anthrazit);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
}
.bb-tipp-box::before {
    content: "💡 Bennes Tipp: ";
    font-weight: 600;
}

@media (max-width: 600px) {
    .bb-vergleich-listen {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .bb-vergleich-karte-inner {
        padding: 1.5rem 1.75rem;
    }
    .bb-vergleich-karte h3 {
        font-size: 1.4rem !important;
    }
}

/* ============================================================
   === Tellerrand: Fazit-Box                               ===
   ============================================================ */

.bb-fazit-box {
    background: var(--bb-creme);
    border-left: 4px solid var(--bb-sand);
    border-radius: 0 12px 12px 0;
    padding: 1.75rem 2rem;
    margin: 3rem 0 2.5rem;
}
.bb-fazit-box h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1rem !important;
    line-height: 1.3 !important;
}
.bb-fazit-box p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1rem !important;
}
.bb-fazit-box p:last-child {
    margin-bottom: 0 !important;
}
.bb-fazit-box a {
    color: var(--bb-sand) !important;
    text-decoration: underline !important;
}
@media (max-width: 600px) {
    .bb-fazit-box {
        padding: 1.25rem 1.25rem;
    }
}

/* ============================================================
   === Tellerrand: FAQ-Kontext (body.single-tellerrand)    ===
   ============================================================ */

/* FAQ auf Single-Seite nutzt archive-faq-Klassen — Abstände anpassen */
body.single-tellerrand .bb-tellerrand-faq {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bb-rand);
}
/* FAQ-H2 bekommt globale H2-Größe — kein font-size override */
body.single-tellerrand .bb-archive-faq-title {
    font-size: unset;
    font-size: revert;
}

/* ============================================================
   === Hero-Placeholder-Bild (Fallback-Styling)            ===
   ============================================================ */

.bb-hero-placeholder-img {
    width: 100% !important;
    display: block !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    max-height: 520px !important;
}

/* ============================================================
   === Tellerrand: Stats-Leiste (Lesezeit + Share-Icons)   ===
   ============================================================ */

.bb-tellerrand-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.125rem 0;
    margin: 0 0 1.75rem;
    border-top: 1px solid var(--bb-rand);
    border-bottom: 1px solid var(--bb-rand);
    flex-wrap: wrap;
}
.bb-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}
.bb-stat-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.bb-stat-label {
    color: var(--bb-schiefer);
}
.bb-stat-value {
    color: var(--bb-anthrazit);
    font-weight: 600;
}
.bb-stat-share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.bb-stat-share-label {
    color: var(--bb-schiefer);
    font-size: 0.9rem;
    white-space: nowrap;
}
.bb-stat-share-icons {
    display: flex;
    gap: 6px;
}
.bb-stat-share-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bb-weiss);
    color: var(--bb-anthrazit) !important;
    text-decoration: none !important;
    border: 1px solid var(--bb-rand);
    transition: all 0.2s;
    fill: currentColor;
}
.bb-stat-share-icons a:hover {
    background: var(--bb-sand);
    color: var(--bb-weiss) !important;
    border-color: var(--bb-sand);
    transform: translateY(-2px);
}
.bb-stat-share-icons a svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
@media (max-width: 600px) {
    .bb-tellerrand-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* ============================================================
   === Tellerrand: Tag-Pills mit Label                     ===
   ============================================================ */

.bb-tag-pills-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}
.bb-tag-label {
    color: var(--bb-schiefer);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}
/* Pills innerhalb des Wrap brauchen keinen eigenen Außenabstand */
.bb-tag-pills-wrap .bb-pills {
    margin: 0 !important;
}

/* ============================================================
   === PHASE 2.6: Mega-Menü (Rezepte 4-spaltig + Tellerrand) ===
   === Sand-Look · keine Trennlinien · Icons + Weißraum       ===
   ============================================================ */

/* Positionierungs-Anker.
   Tellerrand bleibt als kleines Dropdown an sein <li> gekoppelt (position:relative).
   Das Rezepte-Mega wird per position:fixed komplett von Astras Verschachtelung
   entkoppelt und exakt auf Content-Breite (1200px) zentriert. */
.bb-mega-parent { position: relative; }

/* Panel-Grundstil */
.bb-mega {
    list-style: none !important;
    margin: 0 !important;
    /* Helleres Cream (nah am Seiten-Grundton), KEIN Rand, dezenter Schatten nach unten —
       liegt leicht/integriert auf statt zu drücken (Phase 4 Repair). */
    background: var(--bb-offweiss) !important;
    box-shadow: 0 10px 16px -10px rgba(41, 39, 42, .14) !important;
    border: 0 !important;
    border-radius: 12px;
}
.bb-mega li,
.bb-mega .bb-mega-col,
.bb-mega .bb-mega-item {
    list-style: none !important;
    border: 0 !important;       /* keine Astra-Trennlinien */
    margin: 0 !important;
    padding: 0;
    background: transparent !important;
}
.bb-mega .bb-mega-col-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.bb-mega a {
    text-decoration: none !important;
    color: var(--bb-anthrazit) !important;
    width: auto !important;
}

/* Eintrag: Icon + Label, Hover = sanfter Sand-Block, kein Divider */
.bb-mega .bb-mega-item > a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 9px 12px !important;
    border-radius: 8px;
    line-height: 1.25 !important;
    transition: background .15s ease;
}
.bb-mega .bb-mega-item > a:hover,
.bb-mega .bb-mega-item > a:focus {
    background: var(--bb-creme) !important;   /* warmes Rand-Beige, kein Rotstich */
}
.bb-mi {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bb-mi-svg { width: 24px !important; height: 24px !important; display: block; }
.bb-mega-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--bb-anthrazit);
}

/* Spalten-Überschrift: Serife, fett, feiner Unterstrich */
.bb-mega-col-title {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--bb-anthrazit);
    letter-spacing: .2px;
    padding: 0 12px 8px;
    margin: 0 0 6px;
    border-bottom: 1px solid var(--bb-rand);
}

/* ---------- DESKTOP (Hover-Panel) ---------- */
@media (min-width: 769px) {
    .bb-mega {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 9999 !important;
        padding: 1.25rem 1rem !important;
        min-width: 0;
    }
    /* Rezepte-Mega: per fixed von Astras Header-Verschachtelung entkoppelt,
       viewport-zentriert, feste Content-Breite 1200px. top = Header-Höhe (104px),
       +32px wenn die WP-Admin-Bar sichtbar ist. */
    /* Voll-Breite-Band, Kante zu Kante: left:0/right:0 (kein 100vw → kein H-Scroll).
       Spalten zentriert im Band via justify-content + gedeckelten Spaltenbreiten.
       Kein Rand, keine Rundung, nur dezenter Unten-Schatten. */
    .bb-mega--rezepte {
        position: fixed !important;
        top: calc(var(--bb-header-off, 105px) - 2px) !important;  /* echte Header-Unterkante (inkl. Admin-Bar), 2px Überlappung → kein „Blitz"/Spalt */
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 12px 16px -12px rgba(41, 39, 42, .16) !important;
        grid-template-columns: repeat(4, minmax(160px, 285px));
        justify-content: center;
        gap: 1.5rem 1.5rem;
        padding: 1.75rem 2rem !important;
    }
    /* Admin-Bar wird jetzt in --bb-header-off (JS-gemessen) berücksichtigt → keine Sonderregel nötig. */
    /* Tellerrand bleibt schmales Dropdown unter seinem Item */
    .bb-mega--tellerrand {
        left: 0 !important;
        right: auto !important;
        min-width: 264px !important;
        width: max-content !important;
    }
    .bb-mega-parent:hover > .bb-mega,
    .bb-mega-parent:focus-within > .bb-mega {
        display: block !important;
    }
    .bb-mega-parent:hover > .bb-mega--rezepte,
    .bb-mega-parent:focus-within > .bb-mega--rezepte {
        display: grid !important;
    }
    .bb-mega-col { padding-top: 2px; }
}

/* ---------- MOBILE (eigenes self-contained Accordion) ---------- */
@media (max-width: 768px) {

    /* Astra-eigene Toggles in unseren Mega-Parents ausblenden (kein Doppel-Caret) */
    .bb-mega-parent .ast-menu-toggle,
    .bb-mega-parent .dropdown-menu-toggle { display: none !important; }

    /* ----- Ebene 1: Top-Level-Parent (Rezepte/Tellerrand) ----- */
    .bb-mega-parent > a {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        padding: 10px 14px !important;
    }
    /* Caret rechts */
    .bb-mega-parent > a::after {
        content: "";
        flex: 0 0 auto;
        width: 9px; height: 9px;
        margin-left: auto;
        margin-top: -3px;
        border-right: 2px solid var(--bb-sand);
        border-bottom: 2px solid var(--bb-sand);
        transform: rotate(45deg);
        transition: transform .2s ease;
    }
    .bb-mega-parent.is-open > a::after { transform: rotate(225deg); }

    /* Panel: Default zu, öffnet bei .is-open */
    .bb-mega {
        position: static !important;
        display: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;                 /* Desktop-Panel-Rand im Accordion zurücksetzen */
        border-radius: 0 !important;
        padding: 2px 0 8px 10px !important;   /* Einrückung statt Trennlinie */
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .bb-mega-parent.is-open > .bb-mega { display: block !important; }

    /* ----- Ebene 2 (nur Rezepte): Gruppen-Zeilen aufklappbar ----- */
    .bb-mega--rezepte .bb-mega-col { margin: 0 0 2px !important; }
    .bb-mega--rezepte .bb-mega-col-title {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 14px 10px 6px !important;
        border-bottom: 0 !important;        /* keine Trennlinie auf Mobile */
        cursor: pointer;
    }
    .bb-mega--rezepte .bb-mega-col-title::after {
        content: "";
        flex: 0 0 auto;
        width: 8px; height: 8px;
        margin-left: auto;
        margin-top: -3px;
        border-right: 2px solid var(--bb-sand);
        border-bottom: 2px solid var(--bb-sand);
        transform: rotate(45deg);
        transition: transform .2s ease;
    }
    .bb-mega--rezepte .bb-mega-col.is-open > .bb-mega-col-title::after { transform: rotate(225deg); }

    /* Gruppen-Einträge: Default zu, öffnen bei Gruppen-.is-open */
    .bb-mega--rezepte .bb-mega-col-list { display: none !important; padding-left: 6px !important; }
    .bb-mega--rezepte .bb-mega-col.is-open > .bb-mega-col-list { display: block !important; }

    /* ----- End-Einträge (Kategorien/Cluster): Icon + Label bleiben ----- */
    .bb-mega .bb-mega-item > a {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        padding: 9px 10px !important;
    }
    .bb-mi { flex: 0 0 22px; width: 22px; height: 22px; }
    .bb-mi-svg { width: 22px !important; height: 22px !important; }

    /* Tellerrand: einspaltig, Einträge direkt unter dem Parent (eine Ebene) */
    .bb-mega--tellerrand { padding-left: 10px !important; }
}

/* ============================================================
   === PHASE 2.6b: Mobile-Menü Korrekturen                   ===
   === (1) Linksbündig  (2) Top-Level-Typo = Desktop          ===
   === (3) Trennlinien nur zwischen Top-Level                 ===
   === Scope: #ast-hf-mobile-menu / .ast-mobile-popup-drawer  ===
   === Greift ausschließlich < 769px → Desktop unberührt.     ===
   ============================================================ */
@media (max-width: 768px) {

    /* ---- KORREKTUR 1: alles linksbündig, gemeinsame linke Flucht ---- */
    #ast-hf-mobile-menu,
    #ast-hf-mobile-menu .menu-item,
    #ast-hf-mobile-menu li,
    #ast-hf-mobile-menu a,
    .ast-mobile-popup-drawer .main-header-menu,
    .ast-mobile-popup-drawer .main-header-menu li,
    .ast-mobile-popup-drawer .main-header-menu a {
        text-align: left !important;
    }
    /* Top-Level-Links: flex, linksbündig, fingertauglich */
    #ast-hf-mobile-menu .menu-item > a,
    .ast-mobile-popup-drawer .main-header-menu .menu-item > a {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        min-height: 44px;
    }
    /* Einrückungen raus → eine gemeinsame linke Kante (20px) für alle Ebenen */
    #ast-hf-mobile-menu .bb-mega,
    #ast-hf-mobile-menu .bb-mega-col-list,
    #ast-hf-mobile-menu .bb-mega--tellerrand,
    .ast-mobile-popup-drawer .bb-mega,
    .ast-mobile-popup-drawer .bb-mega-col-list,
    .ast-mobile-popup-drawer .bb-mega--tellerrand {
        padding-left: 0 !important;
    }
    #ast-hf-mobile-menu .menu-item > a,
    #ast-hf-mobile-menu .bb-mega-col-title,
    #ast-hf-mobile-menu .bb-mega-item > a,
    .ast-mobile-popup-drawer .menu-item > a,
    .ast-mobile-popup-drawer .bb-mega-col-title,
    .ast-mobile-popup-drawer .bb-mega-item > a {
        padding-left: 20px !important;
        padding-right: 16px !important;
    }

    /* ---- KORREKTUR 2: Top-Level-Typo = Desktop (Montserrat 700 var(--bb-anthrazit)) ---- */
    #ast-hf-mobile-menu > .menu-item > a,
    .ast-mobile-popup-drawer .main-header-menu > .menu-item > a {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        color: var(--bb-anthrazit) !important;
    }
    /* Familie über alle Ebenen konsistent: Gruppen-Titel raus aus Fraunces */
    #ast-hf-mobile-menu .bb-mega-col-title,
    .ast-mobile-popup-drawer .bb-mega-col-title {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600 !important;
        color: var(--bb-anthrazit) !important;
        font-size: 13px !important;
        letter-spacing: .3px;
    }
    #ast-hf-mobile-menu .bb-mega-label,
    .ast-mobile-popup-drawer .bb-mega-label {
        font-family: 'Montserrat', sans-serif !important;
        color: var(--bb-anthrazit) !important;
    }

    /* ---- KORREKTUR 3: dünne Trennlinie NUR zwischen Top-Level-Punkten ---- */
    #ast-hf-mobile-menu > li.menu-item + li.menu-item,
    .ast-mobile-popup-drawer .main-header-menu > li.menu-item + li.menu-item {
        border-top: 1px solid var(--bb-rand) !important;
    }
}

/* ============================================================
   === PHASE 2.6c: Mobile Top-Level Carets + gleiche Zeilenhöhe
   === Nur < 769px, scoped auf Mobile-Menü. Desktop unberührt.
   === Gruppen-Carets NICHT angefasst.
   ============================================================ */
@media (max-width: 768px) {

    /* KORREKTUR 2: alle fünf Top-Level-Punkte exakt gleiche Zeilenhöhe */
    #ast-hf-mobile-menu .menu-item > a,
    .ast-mobile-popup-drawer .main-header-menu .menu-item > a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 12px 16px 12px 20px !important;
        line-height: 1.2 !important;
        box-sizing: border-box;
    }

    /* KORREKTUR 1: Top-Level-Caret (Rezepte/Tellerrand) override-fest gegen Astra.
       Nur Mega-Parents → Startseite/Über mich/Kooperation bleiben caret-los. */
    #ast-hf-mobile-menu .bb-mega-parent > a::after,
    .ast-mobile-popup-drawer .bb-mega-parent > a::after {
        content: "" !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 10px !important;
        height: 10px !important;
        margin-left: auto !important;
        margin-top: -3px !important;
        border: 0 !important;
        border-right: 2.5px solid var(--bb-sand) !important;
        border-bottom: 2.5px solid var(--bb-sand) !important;
        background: none !important;
        transform: rotate(45deg) !important;        /* zu = zeigt nach unten */
        transition: transform .2s ease !important;
    }
    #ast-hf-mobile-menu .bb-mega-parent.is-open > a::after,
    .ast-mobile-popup-drawer .bb-mega-parent.is-open > a::after {
        transform: rotate(225deg) !important;        /* auf = zeigt nach oben */
    }
}


/* ============================================================
   === PHASE 3: Equipment (/equipment/) — Erzählte Seite      ===
   === Stil Über mich/Kooperation: Hero · Zickzack · Sand-Band · FAQ
   === Layout Typ C (durchgehend Beige), Farben aus zentraler Quelle
   ============================================================ */

/* Typ C: durchgehende off-white-Grundfläche, kein weißer Block/Schatten */
body.page-template-equipment {
    background: var(--bb-offweiss) !important;
}
body.page-template-equipment #page,
body.page-template-equipment #content,
body.page-template-equipment .ast-container,
body.page-template-equipment #primary,
body.page-template-equipment main#main {
    background: transparent !important;
    box-shadow: none !important;
}
/* horizontaler Overflow durch Voll-Breit-Band vermeiden */
body.page-template-equipment { overflow-x: hidden; }

/* Astra-Wrapper-Kette voll-breit durchreichen (wie /rezepte) -> .bb-eq-inner ist die
   EINZIGE Breiten-Quelle. Sonst deckelt Astras .ast-container (1240, Padding 20 -> 1200)
   die Sektionen zusätzlich ein und der Content wird schmaler als Über mich. */
body.page-template-equipment #content .ast-container,
body.page-template-equipment #content #primary,
body.page-template-equipment #content main#main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.bb-eq { width: 100%; }
.bb-eq-inner {
    max-width: 1240px;   /* = Über mich/Kooperation .ast-container; mit 20px Padding -> Content 1200px, mittig */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Überschriften (Fraunces, anthrazit) */
.bb-eq-h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1rem !important;
    line-height: 1.2 !important;
}
.bb-eq p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--bb-schiefer);
}

/* ---------- HERO ---------- */
.bb-eq-hero {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 3rem 20px 2.5rem;
}
.bb-eq-hero-text { flex: 1 1 55%; }
.bb-eq-hero .bb-eq-media { flex: 1 1 45%; }
.bb-eq-hero-title {
    font-family: 'Fraunces', serif !important;
    font-size: 44px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 .75rem !important;
    line-height: 1.1 !important;
}
.bb-eq-hero-sub {
    font-size: 19px !important;
    line-height: 1.6 !important;
    color: var(--bb-schiefer) !important;
    margin: 0 !important;
}

/* ---------- HALTUNGS-BLOCK (dezentes Cream-Band, Voll-Breite) ---------- */
.bb-eq-haltung {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--bb-creme);   /* „cream"-Slug, subtil dunkler als off-white */
    padding: 3rem 20px;
}
.bb-eq-haltung-inner { max-width: 820px; margin: 0 auto; }
.bb-eq-haltung p { margin: 0 0 1rem; }
.bb-eq-haltung p:last-child { margin-bottom: 0; }

/* ---------- ZICKZACK-SEKTIONEN ---------- */
.bb-eq-section {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 2.25rem 20px;
}
.bb-eq-section--rev { flex-direction: row-reverse; }
.bb-eq-section .bb-eq-media { flex: 1 1 48%; }
.bb-eq-section-text { flex: 1 1 52%; }
.bb-eq-section-text p { margin: 0 0 1.25rem; }

/* ---------- MEDIA / PLATZHALTER (festes 3:2) ---------- */
.bb-eq-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--bb-creme);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb-eq-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-eq-ph {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #B6A98F;
    border: 1px dashed var(--bb-sand-hell);
    border-radius: 8px;
    padding: 8px 14px;
    background: var(--bb-offweiss);
}

/* ---------- BUTTON „Zur Liste →" ---------- */
.bb-eq-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--bb-sand);
    color: var(--bb-weiss) !important;
    border: 1px solid var(--bb-sand);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .2s;
}
.bb-eq-btn:hover,
.bb-eq-btn:focus { background: var(--bb-sand-dunkel); border-color: var(--bb-sand-dunkel); color: var(--bb-weiss) !important; }

/* ---------- SAND-BAND (voll-breit, brand-sand) ---------- */
.bb-eq-band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--bb-sand);
    color: var(--bb-weiss);
    padding: 3.5rem 20px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.bb-eq-band-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.bb-eq-band-title {
    font-family: 'Fraunces', serif !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    color: var(--bb-weiss) !important;
    margin: 0 0 .9rem !important;
    line-height: 1.2 !important;
}
.bb-eq-band p {
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: var(--bb-weiss) !important;
    margin: 0 !important;
}

/* ---------- FAQ (immer offen, wie Rezepte/Tellerrand) ---------- */
.bb-eq-faq { padding: 1rem 20px 3.5rem; max-width: 1240px; }   /* volle Brand-Breite wie der übrige Content (Content 1200px) */
.bb-eq-faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 1.5rem; }
.bb-eq-faq-item {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);   /* Border-Cream (separate Farbe, nicht in Palette) */
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.bb-eq-faq-item h3 {
    font-family: 'Fraunces', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
.bb-eq-faq-item p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--bb-schiefer) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px) {
    .bb-eq-hero,
    .bb-eq-section,
    .bb-eq-section--rev { flex-direction: column; gap: 1.5rem; }
    .bb-eq-hero { padding-top: 2rem; }
    .bb-eq-hero-title { font-size: 34px !important; }
    .bb-eq-hero .bb-eq-media,
    .bb-eq-section .bb-eq-media { width: 100%; flex-basis: auto; }
    .bb-eq-btn { align-self: flex-start; }
}

/* ============================================================
   === PHASE 4 Repair: Header-Social-Icons IMMER Sand         ===
   === Schlägt Astras Hell-Override auf freien Seiten (transparenter
   === Header). Nur Header-Social-Komponente — NICHT Mega-Icons
   === (.bb-mi-svg) und NICHT Footer-Icons.
   ============================================================ */
.site-header .ast-header-social-1-wrap a,
.site-header .ast-header-social-1-wrap .ast-builder-social-element,
.site-header .ast-header-social-1-wrap .ahfb-svg-iconset,
.site-header .ast-header-social-1-wrap svg,
.site-header .ast-header-social-wrap a,
.site-header .ast-header-social-wrap .ahfb-svg-iconset,
.site-header .ast-header-social-wrap svg {
    color: var(--bb-sand) !important;
    fill: var(--bb-sand) !important;
}
.site-header .ast-header-social-1-wrap a:hover,
.site-header .ast-header-social-1-wrap a:hover svg,
.site-header .ast-header-social-1-wrap a:focus svg,
.site-header .ast-header-social-1-wrap .ast-builder-social-element:hover,
.site-header .ast-header-social-wrap a:hover,
.site-header .ast-header-social-wrap a:hover svg {
    color: var(--bb-anthrazit) !important;
    fill: var(--bb-anthrazit) !important;
}

/* ============================================================
   === PHASE 4 Repair 2: Tellerrand-Look · Hero-Start · Block-Kante
   ============================================================ */

/* --- K1: Tellerrand-Panel = selbe Familie wie Rezepte-Band, aber KOMPAKT --- */
@media (min-width: 769px) {
    .bb-mega--tellerrand {
        background: var(--bb-offweiss) !important;  /* helles Cream wie Band */
        box-shadow: 0 10px 16px -10px rgba(41, 39, 42, .16) !important;
        border: 0 !important;                                        /* kein Rand */
        border-radius: 12px !important;                              /* dezente Rundung (kompakt) */
        padding: .6rem !important;
    }
}

/* === Arbeitshöhe = echte Header-Höhe (gemessen: 105px). EINE Quelle für alles:
   Mega-Start, Hero-Versatz (transparente Header), Content-Bündigkeit. === */
:root {
    /* ── Layout / Header (JS misst live) ── */
    --bb-header-h: 105px;
    --bb-header-off: 105px;   /* Unterkante inkl. Admin-Bar */
    --bb-header-hide: 140px;  /* tiefster sichtbarer Punkt (inkl. Logo-Überhang) */

    /* ── Brand-Farben (EINE Quelle) ──
       Palette-Töne aliassieren Astras theme.json-Vars (Hex = Fallback) →
       Palettefarbe künftig in theme.json ändern. CSS-only-Töne direkt hier. */
    --bb-sand:        var(--ast-global-color-0, #C6AA90);
    --bb-anthrazit:   var(--ast-global-color-2, #29272A);
    --bb-schiefer:    var(--ast-global-color-3, #595557);   /* Sekundärtext (Slate) */
    --bb-creme:       var(--ast-global-color-4, #F9F6EE);
    --bb-offweiss:    var(--ast-global-color-5, #FDFBF6);    /* Off-White */
    --bb-sand-hell:   #D9C8B0;
    --bb-rand:        #E8DFCB;    /* Border-Cream (CSS-only) */
    --bb-sand-dunkel: #B89878;    /* Hover/aktiv (CSS-only) */
    --bb-weiss:       #FFFFFF;
}

/* --- K2: Hero auf Arbeitshöhe — Offset läuft jetzt GLOBAL über #page
   (Smart-Sticky, PHASE 7). Frühere per-Seite .site-content-Paddings entfernt,
   damit kein doppelter Versatz entsteht. --- */

/* --- K3: Content-Seiten — Cream-Luft unter Header + weißer Block mit runder Oberkante --- */
/* Hinter dem Header/Content soll überall Cream liegen (nicht Weiß) —
   inkl. der Header-Zone (0–105px) auf den transparenten-Header-Seiten. */
body.archive,
body.category,
body.tag,
body.tax-tellerrand_kategorie,
body.tax-tellerrand_thema,
body.single-post,
body.single-tellerrand,
body.page-id-1058,
body.page-id-1064 {
    background: var(--bb-offweiss) !important;
}
/* Weiße Blöcke: BÜNDIG an Arbeitshöhe (kein Versatz mehr) + ALLE Ecken rund (Karte).
   Konsequent auf #content gescoped → Header bleibt unberührt/transparent. */
body.page-template-rezepte-overview #content .ast-container,
body.page-template-tellerrand-overview #content .ast-container,
body.archive #content .ast-container,
body.category #content .ast-container,
body.tag #content .ast-container,
body.tax-tellerrand_kategorie #content .ast-container,
body.tax-tellerrand_thema #content .ast-container,
body.single-post #content .ast-container,
body.single-tellerrand #content .ast-container {
    margin-top: 0 !important;
    border-radius: 16px !important;   /* alle Ecken — weiße Karte auf Cream */
}

/* --- Equipment (Typ C, normaler Header): Inhalt sitzt schon bei 105px;
   nur dezente innere Hero-Luft, kein Versatz. --- */
body.page-template-equipment .bb-eq-hero {
    padding-top: 2rem !important;
}

/* ============================================================
   === PHASE 4 Repair 4: Header global transparent + Hero auf 105
   ============================================================ */

/* (1) Weißer Header-Hintergrund (aus dem Header Builder) global entfernen →
   Header überall transparent/creme wie auf den transparenten-Header-Seiten.
   Auch die untere „Kante" (Border/Shadow) weg. */
.ast-primary-header-bar.main-header-bar,
.ast-primary-header-bar,
#masthead .ast-primary-header-bar,
.ast-main-header-bar.main-header-bar,
#masthead .ast-main-header-bar {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* (2) Hero auf Über mich/Kooperation exakt auf Arbeitshöhe:
   Band-Eigen-Padding oben raus → Bild/Text starten bei 105px (= site-content-Versatz). */
body.page-id-1058 .entry-content > .wp-block-group:first-child,
body.page-id-1064 .entry-content > .wp-block-group:first-child {
    padding-top: 0 !important;
}

/* ============================================================
   === PHASE 4 Repair 5: Karten-Schatten (kein Oben) + Header-Suche
   ============================================================ */

/* (1) Weiße Content-Karte: Schatten NUR nach unten/seitlich, NICHT nach oben
   → blitzt nicht mehr unter dem Mega-Band durch. (top-spill = 16+12-26 = +2 → kein Oben) */
body.page-template-rezepte-overview #content .ast-container,
body.page-template-tellerrand-overview #content .ast-container,
body.archive #content .ast-container,
body.category #content .ast-container,
body.tag #content .ast-container,
body.tax-tellerrand_kategorie #content .ast-container,
body.tax-tellerrand_thema #content .ast-container,
body.single-post #content .ast-container,
body.single-tellerrand #content .ast-container {
    box-shadow: 0 16px 26px -12px rgba(41, 39, 42, .14) !important;
}

/* (2) Header-Suche --------------------------------------------------- */
/* Lupen-Toggle neben den Social-Icons — Sand, gleiche Größe, auf allen Seiten */
/* Such-Button: GEFÜLLTER ANTHRAZIT-Kreis (Kontrastfarbe → hebt sich klar von den
   Sand-Social-Icons ab; Emmi-Prinzip Such-Button in Kontrastfarbe) */
.bb-search-toggle {
    border: 0; padding: 0;
    margin: 0 0 0 20px;                 /* Abstand/Trenner zum Social-Block */
    cursor: pointer; line-height: 0; vertical-align: middle;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bb-anthrazit);                /* Anthrazit-Kreis */
    color: var(--bb-offweiss);                     /* helles Cream-Icon (currentColor) */
    transition: background .2s ease;
}
.bb-search-toggle:hover,
.bb-search-toggle:focus { background: #3D3A3E; color: var(--bb-offweiss); }  /* dezent aufgehellt */
.bb-search-svg { width: 18px; height: 18px; display: block; }
.bb-search-submit .bb-search-svg { width: 22px; height: 22px; }

/* Overlay (Desktop) — unter dem Header, Rest abgedunkelt (Außenklick schließt) */
.bb-search-overlay {
    position: fixed; left: 0; right: 0;
    top: var(--bb-header-off, 105px); bottom: 0;
    z-index: 100000;
    background: rgba(41, 39, 42, .30);
    display: none;
}
/* Admin-Bar steckt bereits in --bb-header-off (JS-gemessen) → keine Sonderregel nötig. */
.bb-search-overlay.open { display: block; }
.bb-search-form {
    display: flex; align-items: center; gap: 12px;
    background: var(--bb-offweiss);
    padding: 1.1rem max(20px, calc(50vw - 600px));
    box-shadow: 0 14px 18px -12px rgba(41, 39, 42, .22);
    transform: translateY(-10px); opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.bb-search-overlay.open .bb-search-form { transform: translateY(0); opacity: 1; }
.bb-search-input {
    flex: 1; font-size: 18px; padding: 12px 16px;
    border: 1px solid var(--bb-rand); border-radius: 8px;
    background: var(--bb-weiss); color: var(--bb-anthrazit);
}
.bb-search-input::placeholder { color: #9B9296; }
.bb-search-input:focus { outline: none; border-color: var(--bb-sand); }
.bb-search-submit {
    background: var(--bb-sand); border: 0; border-radius: 8px;
    height: 46px; padding: 0 16px; color: var(--bb-weiss); cursor: pointer;
    display: inline-flex; align-items: center;
}
.bb-search-submit:hover { background: var(--bb-sand-dunkel); }
.bb-search-close {
    background: none; border: 0; font-size: 30px; line-height: 1;
    color: var(--bb-schiefer); cursor: pointer; padding: 0 4px;
}
.bb-search-close:hover { color: var(--bb-anthrazit); }

/* Mobile-Suchfeld oben im Off-Canvas */
.bb-search-mobile-item { padding: 14px 20px !important; }
.bb-search-mform { display: flex; gap: 8px; width: 100%; }
.bb-search-mform input {
    flex: 1; padding: 11px 12px; font-size: 16px;
    border: 1px solid var(--bb-rand); border-radius: 8px; background: var(--bb-weiss); color: var(--bb-anthrazit);
}
.bb-search-mform input:focus { outline: none; border-color: var(--bb-sand); }
.bb-search-mform button {
    background: var(--bb-sand); border: 0; border-radius: 8px; padding: 0 14px;
    color: var(--bb-weiss); display: inline-flex; align-items: center; cursor: pointer;
}
.bb-search-mform .bb-search-svg { width: 22px; height: 22px; }

/* ============================================================
   === PHASE 4 Repair 6: Suchergebnisseite im Brand-Style
   === (body.search) — gleiche Container-Logik wie Hubs/Kategorien
   ============================================================ */

/* Cream-Grundfläche + transparente Hülle (Content bündig bei 105) */
body.search { background: var(--bb-offweiss) !important; }
body.search #page,
body.search #content { background: transparent !important; }
body.search #primary,
body.search main#main {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* Weiße Karte: bündig, alle Ecken rund, gerichteter Schatten (unten/seitlich) */
body.search #content .ast-container {
    background: var(--bb-weiss) !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;       /* runde Ecken sauber clippen */
    box-shadow: 0 16px 26px -12px rgba(41, 39, 42, .14) !important;
}

/* Treffer-Zähler */
.bb-search-count {
    font-size: 14px !important;
    color: var(--bb-schiefer) !important;
    margin: -0.5rem 0 1.5rem !important;
}

/* Kein-Treffer-Fall: freundliche Cream-Box */
.bb-search-empty {
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-radius: 12px;
    padding: 2rem 2.25rem;
    margin: 1rem 0 0;
}
.bb-search-empty p {
    font-size: 17px;
    color: var(--bb-anthrazit);
    margin: 0 0 1.25rem;
}
.bb-search-empty-form { display: flex; gap: 10px; max-width: 480px; }
.bb-search-empty-form input {
    flex: 1; padding: 11px 14px; font-size: 16px;
    border: 1px solid var(--bb-rand); border-radius: 8px; background: var(--bb-weiss); color: var(--bb-anthrazit);
}
.bb-search-empty-form input:focus { outline: none; border-color: var(--bb-sand); }
.bb-search-empty-form button {
    background: var(--bb-sand); border: 0; border-radius: 8px; padding: 0 20px;
    color: var(--bb-weiss); font-weight: 600; cursor: pointer;
}
.bb-search-empty-form button:hover { background: var(--bb-sand-dunkel); }

/* ============================================================
   === PHASE 4 Repair 7: Mobile-Menü-Feinschliff
   === Logo größer · Lupe neben Burger · Social unten · Hub-Link · Overlay
   ============================================================ */

/* (1) Logo auf Mobile deutlich größer */
@media (max-width: 768px) {
    .ast-primary-header-bar .site-logo-img .custom-logo,
    .ast-mobile-header-bar .site-logo-img .custom-logo,
    .site-header .site-branding img,
    .site-header .custom-logo-link img,
    .site-header .site-logo-img img {
        width: 160px !important;
        max-width: 160px !important;
        height: auto !important;
    }
}

/* (2) Mobile-Lupe neben Burger — nur Mobile sichtbar */
@media (min-width: 769px) {
    .bb-search-toggle--mobile { display: none !important; }
}
@media (max-width: 768px) {
    .bb-search-toggle--mobile { margin: 0 12px 0 0; display: inline-flex !important; }
    /* Such-Overlay auf Mobile als Vollbild (header-höhe-unabhängig) */
    .bb-search-overlay { top: 0 !important; }
    .admin-bar .bb-search-overlay { top: 46px !important; }
}

/* (3) Social-Icons unten im Off-Canvas (Trennlinie + Sand, linksbündig wie Menü) */
.bb-mobile-social {
    border-top: 1px solid var(--bb-rand);
    margin-top: 6px;
    padding: 1.5rem 20px;
    display: flex;
    justify-content: flex-start;
}
.bb-mobile-social .ast-header-social-1-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}
.bb-mobile-social a,
.bb-mobile-social svg,
.bb-mobile-social .ahfb-svg-iconset svg {
    color: var(--bb-sand) !important;
    fill: var(--bb-sand) !important;
}
.bb-mobile-social svg { width: 26px !important; height: 26px !important; }

/* (4) „Zur Übersicht"-Link in Mega-Panels — nur Mobile (Hub-Seite erreichbar) */
.bb-mega-hublink { display: none; }
@media (max-width: 768px) {
    .bb-mega-hublink {
        display: block;
        padding: 12px 6px 12px 20px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .3px;
        color: var(--bb-sand) !important;
        text-decoration: none !important;
    }
    .bb-mega-hublink::after { content: " \2192"; }   /* → */
}

/* ============================================================
   === PHASE 4 Repair 8: Lupe neben Burger (plain) + Emmi-Pfeil
   ============================================================ */

/* Lupe + Burger horizontal nebeneinander (Container, den JS markiert) */
.bb-mobile-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Mobile-Lupe OHNE Kreis (nur Sand-Magnifier) → unterscheidet sich klar vom Kreis-Burger */
@media (max-width: 768px) {
    .bb-search-toggle--mobile {
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        color: var(--bb-sand) !important;
        margin: 0 12px 0 0 !important;
        padding: 4px !important;
    }
    .bb-search-toggle--mobile:hover,
    .bb-search-toggle--mobile:focus { background: transparent !important; color: var(--bb-anthrazit) !important; }
    .bb-search-toggle--mobile .bb-search-svg { width: 26px !important; height: 26px !important; }
}

/* Emmi-Logik: nur das WORT navigiert, der REST der Zeile klappt auf.
   Dazu Wort-Link auf Wortbreite schrumpfen; der freie Rest der Zeile (li) ist
   die Toggle-Fläche; Pfeil als li::after rechts (rein dekorativ, klickdurchlässig). */
.bb-mega-caret { display: none !important; }   /* Button-Variante deaktiviert */
@media (max-width: 768px) {
    /* Link bleibt wie von Astra gerendert (volle Breite ok) — die Wort-Trefferzone
       wird per JS (Koordinaten gegen .bb-mega-word) bestimmt, nicht über die Breite. */
    li.bb-mega-parent { position: relative; }
    li.bb-mega-parent::after {
        content: ""; position: absolute; top: 20px; right: 24px;
        width: 10px; height: 10px;
        border-right: 2.5px solid var(--bb-sand); border-bottom: 2.5px solid var(--bb-sand);
        transform: rotate(45deg); transition: transform .2s ease;
        pointer-events: none;
    }
    li.bb-mega-parent.is-open::after { transform: rotate(225deg); }
    /* alten Link-::after-Caret ausblenden (Pfeil ist jetzt li::after) */
    #ast-hf-mobile-menu .bb-mega-parent > a::after { display: none !important; }
    .bb-mega-hublink { display: none !important; }
}

/* ============================================================
   === PHASE 4 Repair 9: Such-Overlay Mobile — × wieder sichtbar
   === Input darf schrumpfen (min-width:0), engere Abstände.
   ============================================================ */
@media (max-width: 768px) {
    .bb-search-form { padding: 1rem 14px !important; gap: 8px !important; }
    .bb-search-input { min-width: 0 !important; font-size: 16px !important; padding: 10px 12px !important; }
    .bb-search-submit { flex: 0 0 auto; height: 42px !important; padding: 0 12px !important; }
    .bb-search-close { flex: 0 0 auto; font-size: 26px !important; padding: 0 2px !important; }
}

/* ============================================================
   === PHASE 4 Repair 10: Tasty Recipes — Rot-Akzente → Sand (var(--bb-sand))
   ============================================================ */

/* Catch-all: Tasty-Farbvariablen auf Sand (greifen, falls Tasty sie nutzt) */
.tasty-recipes,
.tasty-recipes-print-view {
    --tasty-recipes-primary-color: var(--bb-sand);
    --tasty-recipes-secondary-color: var(--bb-sand);
    --tasty-recipes-color: var(--bb-sand);
    --tasty-recipes-button-color: var(--bb-sand);
    --tasty-recipes-buttons-color: var(--bb-sand);
    --tasty-recipes-link-color: var(--bb-sand);
}

/* Hinweis: Der Tasty Print-Button trägt seine Farbe als Inline-!important (aus der
   Tasty-Karten-Customization) → extern per CSS NICHT überschreibbar, daher hier
   bewusst KEINE Print-Button-Farb-/Hover-Regel (siehe Doku/Entscheidung). */

/* Kochmodus-Toggle „an"-Zustand: Rot → Sand (mehrere Versions-Klassen abgedeckt) */
.tasty-recipes-cook-mode-toggle[aria-checked="true"],
.tasty-recipes-cook-mode-toggle[aria-checked="true"] .tasty-recipes-cook-mode-toggle-bg,
.tasty-recipes-cook-mode [role="switch"][aria-checked="true"],
.tasty-recipes-cook-mode [role="switch"][aria-checked="true"] > span:first-child,
.tasty-recipes-cook-mode input[type="checkbox"]:checked + label,
.tasty-recipes-cook-mode input[type="checkbox"]:checked ~ .tasty-recipes-cook-mode-slider,
.tasty-recipes-cook-mode-toggle.is-active,
.tasty-recipes-cook-mode-toggle.active {
    background-color: var(--bb-sand) !important;
    border-color: var(--bb-sand) !important;
}

/* Falls Tasty-Buttons/Links irgendwo noch ein Default-Rot tragen → Sand */
.tasty-recipes a:not(.tasty-recipes-print-button),
.tasty-recipes .tasty-recipes-scale-button.tasty-recipes-active,
.tasty-recipes .tasty-recipes-equipment a {
    color: var(--bb-sand);
}

/* ============================================================
   === PHASE 4 Repair 11: Kochmodus-Toggle „an" exakt → Sand
   === (echte Tasty-Klasse: __switch-slider; Rot war #a4374e)
   ============================================================ */
.tasty-recipes-cook-mode .tasty-recipes-cook-mode__switch input:checked + .tasty-recipes-cook-mode__switch-slider {
    background-color: var(--bb-sand) !important;
}

/* ============================================================
   === Zutaten-Checkbox (Tasty): Rot-Akzent (#a4374e) → Sand
   === Markup: <input type=checkbox> + <label> als sichtbares Kästchen
   ============================================================ */
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"] {
    accent-color: var(--bb-sand);
}
/* Das sichtbare Kästchen ist label::before — NUR das einfärben (label = größere
   Fläche drumherum, NIE einfärben). Angehakt → Sand, kein Glow. */
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:checked + label::before {
    background-color: var(--bb-sand) !important;
    border-color: var(--bb-sand) !important;
    box-shadow: none !important;
}
/* Hover / Fokus / aktiv → Sand-Rahmen am Kästchen (::before) statt Rot */
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:hover + label::before,
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:focus + label::before,
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:focus-visible + label::before,
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:active + label::before,
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container label:hover::before {
    border-color: var(--bb-sand) !important;
    box-shadow: none !important;
}
/* Sicherheitshalber: label selbst trägt keine Akzentfarbe; rotes Fokus-Outline weg */
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:checked + label,
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:hover + label,
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container label:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:focus,
.tasty-recipes-ingredients-body .tr-ingredient-checkbox-container input[type="checkbox"]:focus-visible {
    outline: none !important;
}

/* ============================================================
   === PHASE 5: Startseite (front-page) — Schaufenster
   === Hintergrund-Rhythmus hell/Cream/Sand aus zentraler Quelle
   ============================================================ */

/* Grundfläche + transparenter-Header-Overlay → Content auf Arbeitshöhe (105) */
body.home { background: var(--bb-offweiss) !important; overflow-x: hidden; }
body.home #page, body.home #content, body.home .ast-container,
body.home #primary, body.home main#main {
    background: transparent !important;
    box-shadow: none !important;
}
/* Home-Offset läuft jetzt global über #page (PHASE 7, Smart-Sticky) */

.bb-home { width: 100%; }
.bb-home-inner { max-width: 1080px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* Typo */
.bb-home-h1 {
    font-family: 'Fraunces', serif !important;
    font-size: 46px !important; font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 .6rem !important; line-height: 1.08 !important;
}
.bb-home-h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 30px !important; font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1rem !important; line-height: 1.2 !important;
}
.bb-home-lead { font-size: 16px; line-height: 1.7; color: var(--bb-schiefer); margin: 0 0 1.5rem; }

/* Buttons */
.bb-home-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 22px; border-radius: 8px;
    background: var(--bb-sand); color: var(--bb-weiss) !important;
    border: 1px solid var(--bb-sand);
    font-size: 15px; font-weight: 600; text-decoration: none !important; transition: all .2s;
}
.bb-home-btn:hover, .bb-home-btn:focus { background: var(--bb-sand-dunkel); border-color: var(--bb-sand-dunkel); color: var(--bb-weiss) !important; }
.bb-home-btn--onsand { background: var(--bb-offweiss); color: #29272A !important; border-color: var(--bb-offweiss); }
.bb-home-btn--onsand:hover { background: var(--bb-weiss); border-color: var(--bb-weiss); color: var(--bb-anthrazit) !important; }
.bb-home-cta { margin-top: 1.75rem; }

/* HERO */
.bb-home-hero { display: flex; align-items: center; gap: 3rem; padding: 2.5rem 20px 3rem; }
.bb-home-hero-text { flex: 1 1 52%; }
.bb-home-hero-media { flex: 1 1 48%; }
.bb-home-hero-media img { width: 100%; height: auto; border-radius: 14px; display: block; }
.bb-home-hero-sub { font-family: 'Fraunces', serif; font-size: 20px; color: var(--bb-sand); font-weight: 600; margin: 0 0 1rem; }
.bb-home-hero-lead { font-size: 17px; line-height: 1.6; color: var(--bb-schiefer); margin: 0 0 1.75rem; }

/* Sektionen (hell) */
.bb-home-section { padding: 3rem 20px; }
.bb-home-cta { text-align: left; }

/* Voll-Breite-Bänder (Sand / Cream) */
.bb-home-band {
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    padding: 3.25rem 20px;
}
.bb-home-band--sand { background: var(--bb-sand); color: var(--bb-weiss); }
.bb-home-band--cream { background: var(--bb-creme); }
.bb-home-band-inner { max-width: 1080px; margin: 0 auto; }
.bb-home-band--sand .bb-home-h2,
.bb-home-band--sand .bb-home-band-title { color: var(--bb-weiss) !important; }
.bb-home-band--sand .bb-home-lead,
.bb-home-band--sand p { color: var(--bb-weiss); }
.bb-home-band-title { font-family: 'Fraunces', serif !important; font-size: 30px !important; font-weight: 600 !important; margin: 0 0 .9rem !important; }

/* REICHWEITE-Leiste */
.bb-home-reach { padding-top: 2rem; padding-bottom: 2rem; }

/* Karten-Grid (Wiederverwendung .bb-overview-card) */
.bb-home .bb-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: .5rem; }

/* Instagram-Platzhalter */
.bb-home-insta-ph {
    background: var(--bb-creme); border: 1px dashed var(--bb-sand-hell); border-radius: 12px;
    padding: 3rem 1.5rem; text-align: center; color: #B6A98F; font-size: 14px; letter-spacing: .5px;
}

/* RESPONSIVE */
@media (max-width: 880px) {
    .bb-home-hero { flex-direction: column; gap: 1.5rem; padding-top: 1.5rem; }
    .bb-home-hero-text, .bb-home-hero-media { flex-basis: auto; width: 100%; }
    .bb-home-h1 { font-size: 36px !important; }
    .bb-home .bb-overview-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .bb-home .bb-overview-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   === PHASE 5b: Startseite plakativer — größer, bildreich, Zickzack
   ============================================================ */

/* Headline + Überschriften deutlich größer/dominanter */
.bb-home-h1 { font-size: 62px !important; line-height: 1.04 !important; margin-bottom: .5rem !important; }
.bb-home-h2, .bb-home-band-title { font-size: 38px !important; }
.bb-home-hero-sub { font-size: 24px !important; }
.bb-home-hero-lead { font-size: 19px !important; }

/* Hero satt: breiter, großes Cover-Bild, weniger Leerraum */
.bb-home-hero { max-width: 1200px; gap: 3.5rem; padding: 2.5rem 20px 3.5rem; align-items: center; }
.bb-home-hero-text { flex: 1 1 50%; }
.bb-home-hero-media { flex: 1 1 50%; }
.bb-home-hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; height: auto; }

/* Split-Sektionen: Bild + Text nebeneinander (Zickzack via --rev) */
.bb-home-split { display: flex; align-items: center; gap: 3rem; }
.bb-home-split--rev { flex-direction: row-reverse; }
.bb-home-split-media { flex: 1 1 48%; }
.bb-home-split-text { flex: 1 1 52%; }
.bb-home-split-media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 14px; display: block;
}
/* Fotoshooting 07/2026: „Schön dass du da bist" (Slot 2) + „Womit ich arbeite" (Slot 3)
   hochformat 4:5 (Grün oben sichtbar). „Bekannt aus TV" (Sand-Band) bleibt 4:3. */
.bb-home-section .bb-home-split-media img,
.bb-home-split--rev .bb-home-split-media img { aspect-ratio: 4 / 5; }

/* Responsive */
@media (max-width: 880px) {
    .bb-home-split, .bb-home-split--rev { flex-direction: column; gap: 1.5rem; }
    .bb-home-split-media, .bb-home-split-text { width: 100%; flex-basis: auto; }
    .bb-home-h1 { font-size: 40px !important; }
    .bb-home-h2, .bb-home-band-title { font-size: 30px !important; }
    .bb-home-hero-media img { aspect-ratio: 16 / 10; }
}

/* ============================================================
   === PHASE 5c: Startseite dicht & plakativ
   === Hero-Akzentblock + integrierte Reichweite/Social · dichte Reihen
   ============================================================ */

/* HERO: Bild auf Sand-Akzentfläche, die rechts rausläuft (Demo-Stil) */
.bb-home-hero-media {
    position: relative;
    background: var(--bb-sand);
    border-radius: 16px 0 0 16px;
    padding: 1.75rem;
}
.bb-home-hero-media::after {            /* Sand-Fläche blutet zur rechten Kante aus */
    content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 50vw;
    background: var(--bb-sand);
}
.bb-home-hero-media img { border-radius: 10px; aspect-ratio: 4 / 5; object-fit: cover; }

/* DICHTE REZEPT-REIHEN (Gaumenfreundin-Stil): Kopf links + „Alle ansehen" rechts */
.bb-home-row { padding-top: 2rem; padding-bottom: 2rem; }
.bb-home-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.bb-home-row-head .bb-home-h2 { margin: 0 !important; }
.bb-home-row-all { color: var(--bb-sand); font-weight: 600; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
.bb-home-row-all:hover { text-decoration: underline !important; }

/* Mobile-Anpassung Hero-Akzent */
@media (max-width: 880px) {
    .bb-home-hero-media { border-radius: 16px; }
    .bb-home-row-head { flex-direction: row; }
}

/* ============================================================
   === PHASE 6: Startseite Format-Wechsel + Kategorie-Balken
   ============================================================ */

/* HERO: Sand-Kasten ENTFERNEN → hochformatiges Bild, sauber (wie Über-mich) */
.bb-home-hero-media { background: none !important; padding: 0 !important; border-radius: 14px; }
.bb-home-hero-media::after { display: none !important; }
.bb-home-hero-media img { aspect-ratio: 4 / 5 !important; object-fit: cover; border-radius: 14px; }

/* FEATURED-HELD (große Querkarte) */
.bb-home-featured {
    display: flex; align-items: stretch; gap: 0;
    background: var(--bb-weiss); border: 1px solid var(--bb-rand); border-radius: 16px; overflow: hidden;
    text-decoration: none !important; color: inherit !important;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.bb-home-featured:hover { box-shadow: 0 12px 30px rgba(41, 39, 42, .10); transform: translateY(-3px); border-color: var(--bb-sand); }
.bb-home-featured-media { flex: 1 1 56%; }
.bb-home-featured-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.bb-home-featured-body { flex: 1 1 44%; padding: 2.25rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
.bb-home-featured-flag { align-self: flex-start; background: var(--bb-sand); color: var(--bb-weiss); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: .8rem; }
.bb-home-featured-title { font-family: 'Fraunces', serif !important; font-size: 32px !important; font-weight: 600 !important; color: var(--bb-anthrazit) !important; margin: .2rem 0 .65rem !important; line-height: 1.18 !important; }
.bb-home-featured-excerpt { font-size: 16px; line-height: 1.65; color: var(--bb-schiefer); margin: 0 0 1.4rem; }

/* KATEGORIE-BALKEN (dunkel/Anthrazit, Schnellnavi) */
.bb-home-catbar { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--bb-anthrazit); padding: 2.75rem 20px; }
.bb-home-catbar-title { font-family: 'Fraunces', serif; font-size: 24px; color: var(--bb-offweiss); text-align: center; margin: 0 0 1.75rem; }
.bb-home-catbar-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; max-width: 1080px; margin: 0 auto; }
.bb-home-cat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 6px; border-radius: 10px; text-decoration: none !important; color: var(--bb-offweiss) !important; transition: background .2s; }
.bb-home-cat:hover { background: rgba(255, 255, 255, .09); }
.bb-home-cat-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.bb-home-cat-ic svg { width: 44px !important; height: 44px !important; }
.bb-home-cat-lbl { font-size: 12px; line-height: 1.25; color: #EDE6D6; }

/* JO BENNE — LÄNGLICHE QUERKARTEN */
.bb-home-wide-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: .5rem; }
.bb-home-wide { display: flex; align-items: stretch; background: var(--bb-weiss); border: 1px solid var(--bb-rand); border-radius: 14px; overflow: hidden; text-decoration: none !important; color: inherit !important; transition: box-shadow .2s, transform .2s, border-color .2s; }
.bb-home-wide:hover { box-shadow: 0 10px 24px rgba(41, 39, 42, .09); transform: translateY(-2px); border-color: var(--bb-sand); }
.bb-home-wide-media { flex: 0 0 38%; }
.bb-home-wide-media img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
.bb-home-wide-body { flex: 1; padding: 1.5rem 1.85rem; display: flex; flex-direction: column; justify-content: center; }
.bb-home-wide-title { font-family: 'Fraunces', serif !important; font-size: 22px !important; font-weight: 600 !important; color: var(--bb-anthrazit) !important; margin: .25rem 0 .5rem !important; line-height: 1.25 !important; }
.bb-home-wide-excerpt { font-size: 15px; line-height: 1.6; color: var(--bb-schiefer); margin: 0 0 1rem; }

/* Ghost-Button (Querkarten) */
.bb-home-btn--ghost { align-self: flex-start; background: transparent; color: var(--bb-sand) !important; border-color: var(--bb-sand); }
.bb-home-btn--ghost:hover { background: var(--bb-sand); color: var(--bb-weiss) !important; }

/* RESPONSIVE */
@media (max-width: 880px) {
    .bb-home-featured { flex-direction: column; }
    .bb-home-featured-media img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
    .bb-home-featured-title { font-size: 26px !important; }
    .bb-home-wide { flex-direction: column; }
    .bb-home-wide-media { flex-basis: auto; }
    .bb-home-wide-media img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
    .bb-home-catbar-grid { grid-template-columns: repeat(4, 1fr); gap: .25rem; }
    .bb-home-cat-ic, .bb-home-cat-ic svg { width: 38px !important; height: 38px !important; }
}

/* ============================================================
   === PHASE 6b: Startseite Feinschliff
   ============================================================ */

/* HERO: mehr Luft links, Bild hochformatiger */
.bb-home-hero { gap: 4.5rem !important; padding-top: 3rem !important; padding-bottom: 4rem !important; }
.bb-home-hero-text { padding-right: 1rem; }
.bb-home-hero-lead { margin-bottom: 2rem !important; }
.bb-home-hero-media img { aspect-ratio: 3 / 4 !important; }

/* REICHWEITE im Demo-Stil: Icon oben, Zahl, Label — linksbündig, 3 nebeneinander, klickbar */
.bb-home-reach { display: flex; gap: 2.75rem; margin-top: 2.25rem; flex-wrap: wrap; }
.bb-home-reach-item { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none !important; color: var(--bb-anthrazit) !important; }
.bb-home-reach-ic { display: inline-flex; width: 28px; height: 28px; color: var(--bb-sand); margin-bottom: 8px; }
.bb-home-reach-ic svg { width: 28px; height: 28px; }
.bb-home-reach-num { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 600; line-height: 1; color: var(--bb-anthrazit); }
.bb-home-reach-lbl { font-size: 13px; color: var(--bb-schiefer); margin-top: 3px; }
.bb-home-reach-item:hover .bb-home-reach-num,
.bb-home-reach-item:hover .bb-home-reach-ic { color: var(--bb-sand); }

/* FEATURED-Button nicht über volle Breite */
.bb-home-featured-body .bb-home-btn { align-self: flex-start; }

/* KATEGORIE-BALKEN: Sand-Grund, Anthrazit-Icons/Text */
.bb-home-catbar { background: var(--bb-sand) !important; }
.bb-home-catbar-title { color: var(--bb-anthrazit) !important; }
.bb-home-cat { color: var(--bb-anthrazit) !important; }
.bb-home-cat:hover { background: rgba(41, 39, 42, .09) !important; }
.bb-home-cat-lbl { color: var(--bb-anthrazit) !important; font-weight: 600; }
/* Icons umfärben (NUR Balken-Instanz): Linien Anthrazit, Füllungen hell für Lesbarkeit */
.bb-home-cat-ic svg { stroke: var(--bb-anthrazit) !important; }
.bb-home-cat-ic svg [stroke]:not([stroke="none"]) { stroke: var(--bb-anthrazit) !important; }
.bb-home-cat-ic svg [fill]:not([fill="none"]) { fill: var(--bb-offweiss) !important; }
.bb-home-cat-ic svg .st0 { fill: var(--bb-offweiss) !important; stroke: var(--bb-anthrazit) !important; }
.bb-home-cat-ic svg .st1, .bb-home-cat-ic svg .st2 { fill: var(--bb-offweiss) !important; }

/* BUTTONS einheitlich: Ghost-Variante → vollflächiger Sand-Button */
.bb-home-btn--ghost { background: var(--bb-sand) !important; color: var(--bb-weiss) !important; border-color: var(--bb-sand) !important; }
.bb-home-btn--ghost:hover { background: var(--bb-sand-dunkel) !important; border-color: var(--bb-sand-dunkel) !important; color: var(--bb-weiss) !important; }

/* JO-BENNE-QUERKARTEN: feste Bildhöhe + geklammerter Text → alle gleich hoch */
.bb-home-wide-media img { height: 240px !important; min-height: 0 !important; }
.bb-home-wide-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-home-wide-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* TELLERRAND: Teasersatz-Abstand */
.bb-home-tr-teaser { margin-top: -.25rem !important; margin-bottom: 1.5rem !important; max-width: 760px; }

@media (max-width: 880px) {
    .bb-home-hero { gap: 1.5rem !important; }
    .bb-home-reach { gap: 2rem; }
    .bb-home-wide-media img { height: 200px !important; }
}

/* ============================================================
   === PHASE 6c: Breiten-Konsistenz + H2 + Icon-Outline
   ============================================================ */

/* ---- 4. BREITEN-KONSISTENZ: EINE Content-Breite (1200, wie Über mich) ---- */
/* Astra-Container auf der Home neutralisieren → jede Sektion steuert ihre Breite selbst */
body.home #content .ast-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* EIN Frame für ALLE Inhalts-Container (non-band + Band-Inhalt) */
.bb-home-inner,
.bb-home-band-inner {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.bb-home-hero { max-width: 1200px !important; }
/* Bänder: Hintergrund Kante-zu-Kante, aber KEIN horizontales Padding (das macht der Inner) */
.bb-home-band,
.bb-home-catbar { padding-left: 0 !important; padding-right: 0 !important; }
.bb-home-catbar-grid { max-width: none !important; }

/* ---- 1. KATEGORIE-H2 auf normale Sektions-H2-Größe ---- */
.bb-home-catbar-title { font-size: 38px !important; line-height: 1.2 !important; }

/* ---- 2. KATEGORIE-ICONS: nur Outline (Anthrazit), Füllung transparent ---- */
.bb-home-cat-ic svg { stroke: var(--bb-anthrazit) !important; fill: none !important; }
.bb-home-cat-ic svg [stroke]:not([stroke="none"]) { stroke: var(--bb-anthrazit) !important; }
.bb-home-cat-ic svg [fill]:not([fill="none"]) { fill: transparent !important; }
.bb-home-cat-ic svg .st0,
.bb-home-cat-ic svg .st1,
.bb-home-cat-ic svg .st2 { fill: transparent !important; stroke: var(--bb-anthrazit) !important; }

@media (max-width: 880px) {
    .bb-home-catbar-title { font-size: 30px !important; }
}

/* ============================================================
   === PHASE 6d: Hero-Luft/Bild · Kategorie-Cream · Breite exakt · TV-Anker
   ============================================================ */

/* ---- 5. BREITE EXAKT wie Über mich: Content = 1200 OHNE Desktop-Padding
   (Über-mich-Blöcke nutzen contentSize 1200px ohne horiz. Padding). Mobile gepolstert. ---- */
.bb-home-inner,
.bb-home-band-inner { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 1240px) {
    .bb-home-inner,
    .bb-home-band-inner { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---- 2. HERO mehr Luft (Subline ↔ Satz ↔ Button) ---- */
.bb-home-h1 { margin-bottom: 1rem !important; }
.bb-home-hero-sub { margin-bottom: 1.5rem !important; }
.bb-home-hero-lead { margin-bottom: 2.75rem !important; }

/* ---- 3. HERO-Bild höher ---- */
.bb-home-hero-media img { aspect-ratio: 2 / 3 !important; }

/* ---- 4. KATEGORIE-BALKEN in CREAM (Headline, Labels, Icons), lesbar ---- */
.bb-home-catbar-title { color: var(--bb-offweiss) !important; }
.bb-home-cat { color: var(--bb-offweiss) !important; }
.bb-home-cat-lbl { color: var(--bb-offweiss) !important; font-weight: 700 !important; }
.bb-home-cat:hover { background: rgba(255, 255, 255, .12) !important; }
.bb-home-cat-ic svg { stroke: var(--bb-offweiss) !important; fill: none !important; }
.bb-home-cat-ic svg [stroke]:not([stroke="none"]) { stroke: var(--bb-offweiss) !important; }
.bb-home-cat-ic svg [fill]:not([fill="none"]) { fill: transparent !important; }
.bb-home-cat-ic svg .st0,
.bb-home-cat-ic svg .st1,
.bb-home-cat-ic svg .st2 { stroke: var(--bb-offweiss) !important; fill: transparent !important; }

/* ---- 6. TV-Anker: Offset unter den (transparenten) Header ---- */
#bekannt-aus-tv { scroll-margin-top: 130px; }

/* ============================================================
   === PHASE 6e: Archiv-/Tag-/Tax-Seiten oben bündig (wie Hubs)
   === Astras boxed-container-Top-Abstand entfernen → Content startet
   === wie auf /rezepte/ + /tellerrand/ direkt unter dem Header.
   ============================================================ */
body.archive #primary, body.archive main#main,
body.tag #primary, body.tag main#main,
body.category #primary, body.category main#main,
body.tax-tellerrand_kategorie #primary, body.tax-tellerrand_kategorie main#main,
body.tax-tellerrand_thema #primary, body.tax-tellerrand_thema main#main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
body.archive #content .ast-container,
body.tag #content .ast-container,
body.category #content .ast-container,
body.tax-tellerrand_kategorie #content .ast-container,
body.tax-tellerrand_thema #content .ast-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Astras Content-Wrapper-Top-Abstand (boxed-container) neutralisieren */
body.archive #content, body.tag #content, body.category #content,
body.tax-tellerrand_kategorie #content, body.tax-tellerrand_thema #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ============================================================
   === PHASE 7: SMART-STICKY HEADER (hide on scroll-down / reveal on scroll-up)
   Astra-Sticky (sticky-header-style) ist „none" → eigenes leichtes Script
   (functions.php, rAF-gedrosselt) setzt .bb-header-hidden / .bb-header-scrolled.
   Optik/Inhalt des Headers unverändert — nur Positionierung + Scroll-Verhalten.
   Header wird global fixiert; EIN Top-Offset über #page (Arbeitshöhe).
   JS schreibt die echte Header-Höhe live in --bb-header-h → Mega-Band, Such-
   Overlay, #page-Offset und Anker-Sprünge sitzen auf jeder Breite/Mobile exakt.
   ============================================================ */

/* (1) Header global fixiert (vorher transparent-overlay bzw. in-flow je Seite). */
#masthead.site-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 99;
    transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease;
}
/* WP-Admin-Bar: fixierten Header darunter schieben (nur eingeloggt sichtbar) */
.admin-bar #masthead.site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead.site-header { top: 46px; } }

/* (2) EIN globaler Top-Offset am äußeren #page-Wrapper — so bleiben die
   Archiv-Regeln (#content padding-top:0, Phase 6e) unberührt „flush". */
#page.site { padding-top: var(--bb-header-h, 105px) !important; }

/* (3) Smart-Sticky-Zustände (per JS gesetzt) ----------------------------- */
/* Runterscrollen → Header gleitet sanft nach oben aus dem Bild.
   Distanz = echte Unterkante (inkl. Admin-Bar) → Logo verschwindet auch mobil/eingeloggt ganz. */
#masthead.site-header.bb-header-hidden {
    transform: translateY(calc(-1 * var(--bb-header-hide, 140px))) !important;
}

/* Sanfter Hintergrund-/Schatten-Wechsel auf den Leisten */
#masthead.site-header .ast-primary-header-bar,
#masthead.site-header .ast-main-header-bar,
#masthead.site-header .ast-mobile-header-bar {
    transition: background-color .28s ease, box-shadow .28s ease;
}
/* Eingeblendet + gescrollt (nicht ganz oben) → dezentes Cream + sehr dezenter Schatten,
   damit der Header über Inhalten lesbar ist. Ganz oben bleibt transparent/luftig. */
/* WICHTIG: KEIN backdrop-filter/filter/transform/will-change auf diesen Leisten —
   sie sind Vorfahren des position:fixed Mega-Bands und würden sonst einen
   „containing block" erzeugen (Mega-Band rutscht um die Admin-Bar-Höhe nach unten).
   Cream-Hintergrund (~opak) + Schatten reichen für den dezenten Look. */
#masthead.site-header.bb-header-scrolled .ast-primary-header-bar,
#masthead.site-header.bb-header-scrolled .ast-main-header-bar,
#masthead.site-header.bb-header-scrolled .ast-mobile-header-bar {
    background: rgba(249, 246, 238, .97) !important;      /* cream (--ast-global-color-4), fast opak */
    box-shadow: 0 6px 18px -12px rgba(41, 39, 42, .20) !important;
}

/* (4) Anker-Ziele nicht vom fixierten Header verdeckt (gilt für alle #-Sprünge) */
html { scroll-padding-top: calc(var(--bb-header-off, 105px) + 14px); }

/* ============================================================
   === PHASE 6: IMPRESSUM (Rechtsdokument im Brand-Karten-Rahmen)
   Seite 2238 ist eine NORMALE Seite (wie Über mich/Kooperation) -> erbt
   Content-Breite + obere Kante automatisch identisch. Hier nur:
   (a) Karten-Optik wie /rezepte (weiß, runde Ecken, dezenter Schatten),
   (b) ruhige, seriöse Rechtsdokument-Typo (kein Brand-Ton im Inhalt).
   Keine Boxen/Cards/Outlines im Inhalt — reiner Fließtext.
   ============================================================ */
body.page-id-2238 { background: var(--bb-offweiss) !important; }
/* #page NICHT anfassen (trägt den globalen Header-Offset --bb-header-h). */
body.page-id-2238 #content { background: transparent !important; box-shadow: none !important; }

/* Astra-Standard-Seitentitel ausblenden -> eigene H1 sitzt im Inhalt (in der Karte) */
body.page-id-2238 .ast-article-single > .entry-header,
body.page-id-2238 .ast-single-entry-banner { display: none !important; }

/* EXAKT die /rezepte-Schachtelung nachbilden:
   .ast-container = weiße Karte, behält Astras Default-Padding (0 0.54em) UNVERÄNDERT.
   Mittlere Wrapper (#primary/main/article) auf 0 (wie /rezepte #primary/main=0).
   Das eigentliche Inhalts-Padding (126.72px) sitzt auf .entry-content
   = Pendant zu .bb-overview-wrap. So ist der Abstand Content↔Karte identisch. */
body.page-id-2238 #content #primary,
body.page-id-2238 #content main#main,
body.page-id-2238 #content .ast-article-single {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Brand-Karte wie /rezepte (.ast-container): weiß, runde Ecken, Schatten, bündig oben.
   KEIN Padding-Override -> behält Astras 0 0.54em wie auf /rezepte. */
body.page-id-2238 #content .ast-container {
    background: var(--bb-weiss) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 26px -12px rgba(41, 39, 42, .14) !important;
    margin-top: 0 !important;
}

/* Inhalts-Wrapper = .bb-overview-wrap: exakt gleiches Padding */
body.page-id-2238 #content .entry-content {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2.5rem 126.72px 3rem !important;   /* = .bb-overview-wrap (desktop) */
}

/* Breadcrumbs 1:1 wie /rezepte (.bb-overview-wrap .bb-breadcrumbs) */
body.page-id-2238 .entry-content .bb-breadcrumbs {
    margin: 0 0 1rem !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--bb-schiefer) !important;
}
body.page-id-2238 .entry-content .bb-breadcrumbs a { color: var(--bb-sand) !important; text-decoration: none !important; }
body.page-id-2238 .entry-content .bb-breadcrumbs a:hover { color: var(--bb-sand) !important; text-decoration: underline !important; }
body.page-id-2238 .entry-content .bb-breadcrumbs .separator { color: var(--bb-sand) !important; margin: 0 6px !important; }

/* Typo 1:1 wie /rezepte: H1 = .bb-overview-h1, Section-H = .bb-overview-seo h2,
   Text = .bb-overview-seo p, Links = Sand. Seriös, ruhig. */
body.page-id-2238 .entry-content > h1 {
    font-family: 'Fraunces', serif !important;
    font-size: 38px !important; font-weight: 600 !important;
    color: var(--bb-anthrazit) !important; line-height: 1.15 !important;
    margin: 0 0 1.5rem !important;
}
body.page-id-2238 .entry-content h3 {
    font-family: 'Fraunces', serif !important;
    color: var(--bb-anthrazit) !important;
    font-size: 24px !important; font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 2rem 0 1rem !important;
}
body.page-id-2238 .entry-content p {
    font-size: 16px !important;
    color: var(--bb-anthrazit) !important;
    line-height: 1.7 !important;
    margin: 0 0 1rem !important;
}
body.page-id-2238 .entry-content strong { color: var(--bb-anthrazit) !important; }
body.page-id-2238 .entry-content a { color: var(--bb-sand) !important; text-decoration: underline !important; }
body.page-id-2238 .entry-content a:hover { color: var(--bb-sand-dunkel) !important; }
body.page-id-2238 .entry-content .wp-block-separator {
    border: 0 !important; border-top: 1px solid var(--bb-rand) !important;
    opacity: 1 !important; margin: 2.5rem 0 !important;
    width: 100% !important; max-width: 100% !important;
}

/* Mobile: exakt wie /rezepte (.bb-overview-wrap mobil + H1 28px) */
@media (max-width: 768px) {
    body.page-id-2238 #content .entry-content { padding: 1.5rem 1.25rem 2rem !important; }
    body.page-id-2238 .entry-content > h1 { font-size: 28px !important; }
}

/* ============================================================
   === DATENSCHUTZ (page-id-2257): Layout 1:1 wie Impressum (2238)
   Astra-Seitentitel ausblenden + weiße Brand-Karte mit runden Ecken.
   ============================================================ */
body.page-id-2257 { background: var(--bb-offweiss) !important; }
/* #page NICHT anfassen (trägt den globalen Header-Offset --bb-header-h). */
body.page-id-2257 #content { background: transparent !important; box-shadow: none !important; }

/* Astra-Standard-Seitentitel ausblenden -> eigene H1 sitzt im Inhalt (in der Karte) */
body.page-id-2257 .ast-article-single > .entry-header,
body.page-id-2257 .ast-single-entry-banner { display: none !important; }

/* EXAKT die /rezepte-Schachtelung nachbilden:
   .ast-container = weiße Karte, behält Astras Default-Padding (0 0.54em) UNVERÄNDERT.
   Mittlere Wrapper (#primary/main/article) auf 0 (wie /rezepte #primary/main=0).
   Das eigentliche Inhalts-Padding (126.72px) sitzt auf .entry-content
   = Pendant zu .bb-overview-wrap. So ist der Abstand Content↔Karte identisch. */
body.page-id-2257 #content #primary,
body.page-id-2257 #content main#main,
body.page-id-2257 #content .ast-article-single {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Brand-Karte wie /rezepte (.ast-container): weiß, runde Ecken, Schatten, bündig oben.
   KEIN Padding-Override -> behält Astras 0 0.54em wie auf /rezepte. */
body.page-id-2257 #content .ast-container {
    background: var(--bb-weiss) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 26px -12px rgba(41, 39, 42, .14) !important;
    margin-top: 0 !important;
}

/* Inhalts-Wrapper = .bb-overview-wrap: exakt gleiches Padding */
body.page-id-2257 #content .entry-content {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2.5rem 126.72px 3rem !important;   /* = .bb-overview-wrap (desktop) */
}

/* Breadcrumbs 1:1 wie /rezepte (.bb-overview-wrap .bb-breadcrumbs) */
body.page-id-2257 .entry-content .bb-breadcrumbs {
    margin: 0 0 1rem !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--bb-schiefer) !important;
}
body.page-id-2257 .entry-content .bb-breadcrumbs a { color: var(--bb-sand) !important; text-decoration: none !important; }
body.page-id-2257 .entry-content .bb-breadcrumbs a:hover { color: var(--bb-sand) !important; text-decoration: underline !important; }
body.page-id-2257 .entry-content .bb-breadcrumbs .separator { color: var(--bb-sand) !important; margin: 0 6px !important; }

/* Typo 1:1 wie /rezepte: H1 = .bb-overview-h1, Section-H = .bb-overview-seo h2,
   Text = .bb-overview-seo p, Links = Sand. Seriös, ruhig. */
body.page-id-2257 .entry-content > h1 {
    font-family: 'Fraunces', serif !important;
    font-size: 38px !important; font-weight: 600 !important;
    color: var(--bb-anthrazit) !important; line-height: 1.15 !important;
    margin: 0 0 1.5rem !important;
}
body.page-id-2257 .entry-content h3 {
    font-family: 'Fraunces', serif !important;
    color: var(--bb-anthrazit) !important;
    font-size: 24px !important; font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 2rem 0 1rem !important;
}
body.page-id-2257 .entry-content p {
    font-size: 16px !important;
    color: var(--bb-anthrazit) !important;
    line-height: 1.7 !important;
    margin: 0 0 1rem !important;
}
body.page-id-2257 .entry-content strong { color: var(--bb-anthrazit) !important; }
body.page-id-2257 .entry-content a { color: var(--bb-sand) !important; text-decoration: underline !important; }
body.page-id-2257 .entry-content a:hover { color: var(--bb-sand-dunkel) !important; }
body.page-id-2257 .entry-content .wp-block-separator {
    border: 0 !important; border-top: 1px solid var(--bb-rand) !important;
    opacity: 1 !important; margin: 2.5rem 0 !important;
    width: 100% !important; max-width: 100% !important;
}

/* Mobile: exakt wie /rezepte (.bb-overview-wrap mobil + H1 28px) */
@media (max-width: 768px) {
    body.page-id-2257 #content .entry-content { padding: 1.5rem 1.25rem 2rem !important; }
    body.page-id-2257 .entry-content > h1 { font-size: 28px !important; }
}

/* ============================================================
   === PHASE 8: FINALER BRAND-FOOTER
   Eigener Footer (functions.php / wp_footer) ersetzt Astras HFB-Footer.
   Cream Kante-zu-Kante, Inhalt auf Brand-Breite via .ast-container,
   ruhiger Abschluss. Plus Back-to-top-Button.
   ============================================================ */

/* Astras HFB-Footer ausblenden (durch eigenen ersetzt) */
#colophon { display: none !important; }

/* Footer-Band: helle Brand-Cream (color-5 var(--bb-offweiss)) — konsistent mit der
   Content-Grundfläche, nicht zu dunkel. */
.bb-footer {
    background: var(--bb-offweiss);
    color: var(--bb-anthrazit);
    padding: 2.5rem 0 2rem;
}
/* Brand-Breite kommt von .ast-container (gleiche Kanten wie Header/Content) */

/* (Sand-Trennlinie oben war ein Experiment — entfernt.) */

/* --- Obere Zeile: Logo | Navi | Social --- */
.bb-footer-main {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem 2rem; flex-wrap: wrap;
    padding-bottom: 1.75rem;
}
.bb-footer-logo { display: inline-block; line-height: 0; }
.bb-footer-logo img { width: 150px; height: auto; display: block; }

.bb-footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.bb-footer-nav a {
    color: var(--bb-anthrazit); text-decoration: none;
    font-size: 15px; line-height: 1.6;
    transition: color .2s ease;
}
.bb-footer-nav a:hover { color: var(--bb-sand); }

.bb-footer-social { display: flex; align-items: center; gap: 1rem; }
.bb-footer-social a {
    color: var(--bb-sand);            /* Sand wie Header-Social */
    line-height: 0; display: inline-flex;
    transition: color .2s ease;
}
.bb-footer-social svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.bb-footer-social a:hover { color: var(--bb-schiefer); }

/* --- Untere Zeile: Legal-Links + Copyright (optisch getrennt, klein/dezent) --- */
.bb-footer-legal {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem 1.5rem; flex-wrap: wrap;
    border-top: 1px solid var(--bb-rand);   /* dezente Trennung Inhalts-Navi <-> Legal */
    padding-top: 1.25rem;
    font-size: 13px; color: var(--bb-schiefer);
}
.bb-footer-legal a { color: var(--bb-schiefer); text-decoration: none; transition: color .2s ease; }
.bb-footer-legal a:hover { color: var(--bb-sand); text-decoration: underline; }
.bb-footer-legal .sep { margin: 0 6px; color: var(--bb-sand); }
.bb-footer-copy { color: var(--bb-schiefer); }

/* --- Back-to-top: Sand-Kreis, Anthrazit-Pfeil, erscheint nach Scrollen --- */
.bb-totop {
    position: fixed; right: 22px; bottom: 22px; z-index: 9000;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: #C6AA90; color: var(--bb-offweiss); cursor: pointer;  /* Pfeil in Cream */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -6px rgba(41, 39, 42, .4);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.bb-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bb-totop svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.bb-totop:hover { background: var(--bb-sand-dunkel); }

/* --- Mobile --- */
@media (max-width: 768px) {
    .bb-footer-main { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .bb-footer-legal { flex-direction: column; align-items: flex-start; }
    .bb-totop { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ============================================================
   === PHASE 9b: NEWSLETTER-OPT-IN (Referenz-Block, Sand-Band, zentriert)
   Cream-Button auf Sand (Umkehrung), helle Felder, DOI via MailerLite.
   Wiederverwendbar: alle Styles an .bb-news* gehängt (nicht home-spezifisch).
   ============================================================ */
.bb-news { text-align: center; }

.bb-news-text {
    color: var(--bb-weiss);
    max-width: 660px;
    margin: 0 auto 1.6rem;
    line-height: 1.7;
}

.bb-news-form { max-width: 540px; margin: 0 auto; }

/* E-Mail + Vorname nebeneinander (Desktop), gestapelt (Mobile) */
.bb-news-fields { display: flex; gap: 10px; justify-content: center; }
.bb-news-email,
.bb-news-name {
    flex: 1 1 0; min-width: 0;
    padding: 13px 16px; font-size: 15px;
    border: 0; border-radius: 8px;
    background: var(--bb-offweiss); color: var(--bb-anthrazit);
    font-family: inherit;
}
.bb-news-email::placeholder,
.bb-news-name::placeholder { color: #9A8F80; }
.bb-news-email:focus,
.bb-news-name:focus { outline: 2px solid var(--bb-offweiss); outline-offset: 2px; }

/* Cream-Button auf Sand (heller Button, Anthrazit-Text) */
.bb-news-btn {
    display: inline-block;
    margin-top: 14px;
    background: var(--bb-offweiss);
    color: var(--bb-anthrazit);
    border: 0; border-radius: 8px;
    padding: 13px 34px;
    font-family: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .05s ease;
}
/* Hover: Fläche dezent abdunkeln (Sand-Stich), Text bleibt Anthrazit/lesbar
   (color explizit -> sonst überschreibt Astras button:hover die Schriftfarbe). */
.bb-news-btn:hover { background: #EFE6D5; color: var(--bb-anthrazit) !important; }
.bb-news-btn:active { transform: translateY(1px); }
.bb-news-btn[disabled] { opacity: .7; cursor: default; }

.bb-news-note { color: var(--bb-weiss); opacity: .9; font-size: 12px; margin: .9rem 0 0; }

.bb-news-error {
    color: var(--bb-weiss); font-size: 13px;
    background: rgba(41, 39, 42, .20); border-radius: 6px;
    padding: .55rem .8rem; margin: .85rem auto 0; max-width: 420px;
}

/* Honeypot: für Menschen unsichtbar (off-screen, nicht display:none) */
.bb-news-hp {
    position: absolute !important;
    left: -9999px !important; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

/* Inline-Erfolg (ersetzt den Body, Titel bleibt) */
.bb-news-success { max-width: 640px; margin: 0 auto; }
.bb-news-success p { color: var(--bb-weiss); font-size: 1.05rem; line-height: 1.7; margin: 0; }

.bb-news-body[hidden],
.bb-news-success[hidden],
.bb-news-error[hidden] { display: none !important; }

/* Mobile: Felder stapeln */
@media (max-width: 600px) {
    .bb-news-fields { flex-direction: column; }
    .bb-news-btn { width: 100%; }
}

/* ============================================================
   === PHASE 9b (Redesign): Newsletter ZWEISPALTIG (Foto + Text/Formular)
   Nur Layout/Optik — Verdrahtung (.bb-news-body/-form/-success) unberührt.
   Desktop: Text links / Bild rechts (row-reverse). Mobile: Bild oben, gestapelt.
   ============================================================ */
.bb-news--split {
    display: flex;
    flex-direction: row-reverse;   /* Bild (1. im DOM) -> rechts, Text -> links */
    align-items: center;
    gap: 3rem;
    text-align: left;              /* im Split linksbündig (ruhiger neben Bild) */
}

/* Bild-Spalte */
.bb-news-media { flex: 1 1 44%; min-width: 0; }
.bb-news-img {
    width: 100%; height: 380px;
    object-fit: cover;
    border-radius: 16px;           /* wie Content-Karten/Hero */
    display: block;
}

/* Text/Formular-Spalte */
.bb-news-col { flex: 1 1 56%; min-width: 0; }

/* Zentrier-Defaults des Basis-Blocks im Split aufheben (linksbündig, volle Spalte) */
.bb-news--split .bb-news-text    { max-width: none; margin: 0 0 1.6rem; }
.bb-news--split .bb-news-form    { max-width: none; margin: 0; }
.bb-news--split .bb-news-error   { margin-left: 0; margin-right: 0; }
.bb-news--split .bb-news-success { max-width: none; margin: 0; }

/* Mehr Luft im Formularbereich */
.bb-news--split .bb-news-fields { gap: 12px; }
.bb-news--split .bb-news-form   { margin-top: 1.4rem; }
.bb-news--split .bb-news-btn    { margin-top: 20px; }
.bb-news--split .bb-news-note   { margin-top: 1.1rem; }

/* Button mit mehr Präsenz (Cream/Anthrazit bleibt) */
.bb-news-btn { padding: 14px 38px; font-size: 16px; }

/* Mobile: Spalten stapeln, Bild oben, nicht zu hoch */
@media (max-width: 880px) {
    .bb-news--split { flex-direction: column; gap: 1.75rem; text-align: left; }
    .bb-news-media,
    .bb-news-col { flex: 1 1 auto; width: 100%; }
    .bb-news-img { height: 240px; }
}

/* ============================================================
   === PHASE 9b (Feinschliff): Newsletter-Block Balance + Button-Pop
   Nur Optik/Abstände. Verdrahtung/Texte unverändert.
   ============================================================ */

/* 1. Spalten gleich hoch (Desktop) -> oben UND unten bündig = ausbalanciert.
   Bild absolut in der gestreckten Spalte -> füllt exakt die Text-/Formularhöhe. */
@media (min-width: 881px) {
    .bb-news--split { align-items: stretch; }
    .bb-news-media { position: relative; min-height: 320px; }
    .bb-news-img   { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Fotoshooting 07/2026: Newsletter-Bild hochformat 4:5 statt auf Texthöhe gestreckt
   (Kopf nicht mehr angeschnitten). Text zentriert daneben. Mobile unverändert. */
@media (min-width: 881px) {
    .bb-news--split { align-items: center; }
    .bb-news-media { position: static; min-height: 0; }
    .bb-news-img   { position: static; inset: auto; aspect-ratio: 4 / 5; height: auto; }
}

/* 2. Eingabefelder einen Tick dezenter (leicht transluzent) -> der Cream-Button
   sticht hervor. Text bleibt dunkel & gut lesbar. */
.bb-news-email,
.bb-news-name {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .5);
}

/* Button: schattenlos (Brand-konsistent — Buttons site-weit ohne Schatten).
   Cream-Fläche (var(--bb-offweiss)) / Anthrazit-Text + dezenter Hover (nur Hintergrund).
   Abhebung kommt über die transluzenten Eingabefelder + die opake Cream-Fläche. */
.bb-news-btn { box-shadow: none; }
.bb-news-btn:hover { background: #EFE6D5; color: var(--bb-anthrazit) !important; }

/* 3. Mikro-Text als Einheit direkt unter den Button (näher dran) */
.bb-news-note { margin-top: .5rem; }
.bb-news--split .bb-news-note { margin-top: .5rem; }

/* ============================================================
   === FIX: Content-Karte exakt auf Header-Inhalts-Breite (Logo↔Lupe = 1200px)
   Astra liefert .ast-container mit max-width 1240 (Header-CONTAINER-Breite); die
   weiße Karte füllte aber bis zur Container-Kante (1240) -> 20px breiter als der
   Header-INHALT (Logo↔Lupe = 1200). Karte auf 1200 deckeln -> Kanten deckungsgleich.
   (Hero füllt weiterhin die Kartenkante, da der -126.72px-Breakout relativ zur
   .ast-container-Box bleibt.)
   ============================================================ */
body.page-template-rezepte-overview #content .ast-container,
body.page-template-tellerrand-overview #content .ast-container,
body.archive #content .ast-container,
body.category #content .ast-container,
body.tag #content .ast-container,
body.tax-tellerrand_kategorie #content .ast-container,
body.tax-tellerrand_thema #content .ast-container,
body.single-post #content .ast-container,
body.single-tellerrand #content .ast-container {
    max-width: 1200px !important;
}

/* ============================================================
   === FIX: single-post/-tellerrand — Wrapper transparent, damit die Body-Cream
   (var(--bb-offweiss)) oben (unter Menü) und unten (um/unter der Karte) sichtbar ist statt
   weiß. Die weiße Karte bleibt .ast-container; #page/#content zeigen die Cream.
   ============================================================ */
body.single-post #page,
body.single-post #content,
body.single-post .site-content,
body.single-tellerrand #page,
body.single-tellerrand #content,
body.single-tellerrand .site-content {
    background: transparent !important;
}

/* ============================================================
   === FIX: Header- & Footer-Container nie weiß.
   Astras Content-Hintergrund (weiß) füllt .ast-container global — auch im
   #masthead (weißer Balken unter dem Menü) und im .bb-footer (weißer Kasten
   im Cream-Band). Beide transparent -> Cream/Transparenz kommt durch.
   ============================================================ */
#masthead .ast-container,
.bb-footer .ast-container {
    background: transparent !important;
}

/* ============================================================
   === NEWSLETTER-DANKESSEITE (page-id-2398) — freies, breites Layout
   KEINE weiße Karte. Cream-Grund, zentrierter „Ankommen"-Moment.
   Brand-Breite über .ast-container (1200), Text auf Lesebreite zentriert.
   ============================================================ */
body.page-id-2398 { background: var(--bb-offweiss) !important; }
body.page-id-2398 #content,
body.page-id-2398 #primary,
body.page-id-2398 main#main { background: transparent !important; box-shadow: none !important; }

/* .ast-container nur als Brand-Breiten-Rahmen (kein weißer Kasten) */
body.page-id-2398 #content .ast-container {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 1200px !important;
}
body.page-id-2398 .ast-article-single {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}
/* Astra-Standard-Seitentitel aus -> eigene H1 im Inhalt */
body.page-id-2398 .ast-article-single > .entry-header,
body.page-id-2398 .ast-single-entry-banner { display: none !important; }

/* Inhalt zentriert, großzügige Luft */
body.page-id-2398 .entry-content {
    text-align: center;
    padding: 4.5rem 20px 5rem;
}
body.page-id-2398 .entry-content > h1 {
    font-family: 'Fraunces', serif !important;
    font-size: 42px !important; font-weight: 600 !important;
    color: var(--bb-anthrazit) !important; line-height: 1.15 !important;
    margin: 0 0 1.5rem !important;
}
body.page-id-2398 .entry-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px !important; line-height: 1.75 !important; color: var(--bb-anthrazit) !important;
    max-width: 680px; margin: 0 auto 1.2rem;   /* Lesebreite, mittig im Brand-Rahmen */
}

/* Weiterführungs-Buttons: Sand, weißer Text, schattenlos (wie .bb-eq-btn) */
.bb-danke-actions {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
    margin: 2.25rem 0 2.75rem;
}
.bb-danke-btn {
    display: inline-block;
    background: var(--bb-sand);
    color: var(--bb-weiss);
    border: 1px solid var(--bb-sand);
    font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600;
    text-decoration: none; padding: 13px 30px; border-radius: 8px;
    transition: background .2s ease, border-color .2s ease;
}
.bb-danke-btn:hover { background: var(--bb-sand-dunkel); border-color: var(--bb-sand-dunkel); }

/* Social-Reihe (wiederverwendet .bb-footer-social-Stil), zentriert */
body.page-id-2398 .bb-social-row { justify-content: center; margin: 1.5rem 0 0; }

/* Mobile */
@media (max-width: 600px) {
    body.page-id-2398 .entry-content { padding: 3rem 20px 3.5rem; }
    body.page-id-2398 .entry-content > h1 { font-size: 32px !important; }
    .bb-danke-actions { flex-direction: column; align-items: center; }
    .bb-danke-btn { width: 100%; max-width: 320px; }
}

/* ============================================================
   === Newsletter „slim": einspaltig, zentriert, OHNE Foto (z.B. Über mich)
   Nutzt die bestehenden .bb-news-Basis-Styles (Text/Felder/Button/Erfolg in
   Weiß auf Sand). Nur Titel + schmale Zentrierung ergänzt.
   ============================================================ */
.bb-news--slim { max-width: 600px; margin-left: auto; margin-right: auto; }
.bb-news-title {
    font-family: 'Fraunces', serif !important;
    font-size: 2.5rem; font-weight: 600;   /* gleiche Größe wie „Was du hier findest" */
    color: var(--bb-weiss); line-height: 1.2;
    margin: 0 0 1rem;
}
.bb-news--slim .bb-news-text { margin: 0 auto 1.5rem; }

/* ============================================================
   === Newsletter „inline": kompakte Zeile im Sand-CTA (.bb-cta) am Rezept-Ende.
   Fügt sich in den Sand-Block ein (keine zweite Fläche). Nutzt .bb-news-Basis
   (weißer Text, helle Felder, Cream-Button). Dezente Trennung zu den Socials.
   ============================================================ */
.bb-news--inline {
    max-width: 520px;
    margin: 1.75rem auto 0;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .3);   /* dezente Trennung Social <-> Newsletter */
}
.bb-news-subtitle {
    font-family: 'Fraunces', serif !important;
    color: var(--bb-weiss); font-size: 1.25rem; font-weight: 600;
    line-height: 1.25; margin: 0 0 .5rem;
}
.bb-news--inline .bb-news-text { font-size: 15px; margin: 0 auto 1.1rem; }
.bb-news--inline .bb-news-form { max-width: 460px; margin: 0 auto; }
/* Mikro-Text: deutlich kleiner, mehr Luft zum Button, weniger zum Rahmen unten */
.bb-news--inline .bb-news-note { font-size: 10px; margin-top: 1.25rem; }
.bb-cta { padding-bottom: 1.75rem !important; }

/* ============================================================
   === Mikro-Text „Du kannst dich jederzeit wieder abmelden." in ALLEN
   Newsletter-Blöcken (Startseite/Über-mich/Rezept): deutlich kleiner +
   mehr Luft zum Button. !important schlägt die älteren .5rem-Overrides.
   ============================================================ */
.bb-news .bb-news-note {
    font-size: 10px !important;
    margin-top: 1.4rem !important;
}

/* ============================================================
   === HINTER DEN KULISSEN — BtS-Bausteinkasten (wiederverwendbar) ===
   Drei Content-Bausteine für erzählerische Tellerrand-Beiträge:
     1. Einzelbild im Textfluss + Bildunterschrift (Core wp:image)
     2. Bildergalerie als Grid + gemeinsame Unterschrift (Core wp:gallery)
     3. Info-/Link-Box .bb-linkbox (Shortcode [bb_linkbox])
   Scope: .entry-content (greift in Tellerrand- & Standard-Singles, ohne
   bestehende Rezept-Inhalte zu stören — die nutzen diese Blöcke nicht).
   Brand: Cream var(--bb-creme) · Sand var(--bb-sand) · Border-Cream var(--bb-rand) · Slate var(--bb-schiefer)
   ============================================================ */

/* --- 1. Einzelbild im Textfluss (groß, zentriert, optional mit Caption) --- */
.entry-content figure.wp-block-image {
    margin: 2.5rem 0;
    text-align: center;
}
.entry-content figure.wp-block-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 640px;          /* Hochformat türmt nicht, Querformat bleibt groß */
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
}
.entry-content figure.wp-block-image figcaption {
    margin-top: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-schiefer);
    font-style: italic;
    text-align: center;
}

/* Tellerrand-Singles (Reise-Beiträge & Co.): ALLE Fließtext-Einzelbilder
   einheitlich breit + mittig — egal ob Hoch- oder Querformat. Galerie behält
   ihr eigenes Raster (deren Regeln nutzen !important, gewinnen also). */
body.single-tellerrand .entry-content figure.wp-block-image img {
    width: 100%;
    max-width: 100%;    /* volle Content-Breite (= Text/Boxen), nicht schmaler */
    max-height: none;
    height: auto;
    margin: 0 auto;
}

/* --- 2. Bildergalerie: sauberes Grid, gemischte Formate via object-fit --- */
/* WICHTIG: Core-Gallery-CSS (.wp-block-gallery.columns-3.has-nested-images
   figure.wp-block-image img) hat hohe Spezifität und hält die Bilder sonst klein.
   Darum hier .has-nested-images mitnehmen + !important. */
.entry-content .wp-block-gallery,
.entry-content .wp-block-gallery.has-nested-images {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;  /* Default 3 Spalten */
    gap: 14px !important;
    margin: 2.5rem 0 !important;
}
.entry-content .wp-block-gallery.columns-2,
.entry-content .wp-block-gallery.columns-2.has-nested-images { grid-template-columns: repeat(2, 1fr) !important; }
.entry-content .wp-block-gallery.columns-1,
.entry-content .wp-block-gallery.columns-1.has-nested-images { grid-template-columns: 1fr !important; }
.entry-content .wp-block-gallery .wp-block-image,
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
    margin: 0 !important;
    width: auto !important;            /* Core-Flexbasis/Breiten-calc neutralisieren */
    max-width: none !important;
    border-radius: 12px;
    overflow: hidden;
}
.entry-content .wp-block-gallery .wp-block-image img,
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
    width: 100% !important;
    height: auto !important;           /* aspect-ratio steuert die Höhe */
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;       /* Hoch+Quer im selben Raster bündig */
    max-width: 100% !important;
    display: block !important;
    border-radius: 12px;
}
/* gemeinsame Galerie-Unterschrift spannt über volle Breite */
.entry-content .wp-block-gallery > figcaption,
.entry-content .wp-block-gallery .blocks-gallery-caption {
    grid-column: 1 / -1;
    margin: 0.4rem 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-schiefer);
    font-style: italic;
    text-align: center;
}

/* --- 3. Info-/Link-Box (.bb-linkbox) — Cream-Box, Sand-Akzent, Button --- */
.bb-linkbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2.5rem 0;
}
.bb-linkbox-body { flex: 1 1 auto; min-width: 0; }
.bb-linkbox-kicker {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--bb-sand);
    margin: 0 0 4px;
}
.bb-linkbox-title {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bb-anthrazit);
    margin: 0 0 4px;
}
.bb-linkbox-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bb-schiefer);
    margin: 0;
}
.bb-linkbox-btn {
    flex: 0 0 auto;
    display: inline-block;
    background: var(--bb-sand);
    color: var(--bb-weiss) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    padding: 0.75rem 1.4rem;
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: none !important;       /* schattenlos, Brand-Vorgabe */
    transition: background 0.2s ease;
}
.bb-linkbox-btn:hover {
    background: var(--bb-sand-dunkel);
    color: var(--bb-weiss) !important;
}

@media (max-width: 600px) {
    /* Galerie mobil GESTAPELT (große, volle Breite statt winziger Thumbnails) */
    .entry-content .wp-block-gallery,
    .entry-content .wp-block-gallery.has-nested-images,
    .entry-content .wp-block-gallery.columns-2,
    .entry-content .wp-block-gallery.columns-2.has-nested-images,
    .entry-content .wp-block-gallery.columns-3,
    .entry-content .wp-block-gallery.columns-3.has-nested-images {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .entry-content .wp-block-gallery .wp-block-image img,
    .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 4 / 3 !important; }
    .bb-linkbox {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem 1.25rem;
    }
    .bb-linkbox-btn { width: 100%; text-align: center; }
}

/* ============================================================
   === BtS-Lightbox: Klick auf Galerie-/Einzelbild öffnet es groß (Overlay)
   === Vanilla-JS in functions.php (bb_image_lightbox), kein Plugin. Allgemein
   === für alle .entry-content-Bilder (Tellerrand, Foodspots, Reisen, Rezepte).
   ============================================================ */
.entry-content .wp-block-gallery .wp-block-image img,
.entry-content figure.wp-block-image img { cursor: zoom-in; }

.bb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(41, 39, 42, 0.92);
    opacity: 0;
    transition: opacity 0.22s ease;
    cursor: zoom-out;
}
.bb-lightbox.is-open { opacity: 1; }
.bb-lightbox img {
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.5);
    cursor: default;
}
.bb-lightbox-caption {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    margin: 0 auto;
    max-width: 80vw;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--bb-creme);
    opacity: 0.9;
}
.bb-lightbox-close {
    position: absolute;
    top: 14px; right: 20px;
    width: 44px; height: 44px;
    font-size: 30px; line-height: 1;
    color: var(--bb-weiss);
    background: none; border: none;
    cursor: pointer;
    opacity: 0.85;
}
.bb-lightbox-close:hover { opacity: 1; }
body.bb-lightbox-lock { overflow: hidden; }

/* ============================================================
   === FOODSPOT-BAUSTEINE (wiederverwendbar) ===
   A) .bb-video     — YouTube via Borlabs, responsive (Short 9:16 / Wide 16:9)
   B) .bb-foodspot  — Box mit statischer Karte + Maps-Button (Restaurant-Schema
                      kommt aus dem Template/Shortcode als JSON-LD)
   C) .bb-image-divider — voll-breites Bild als Trenner (mit Schatten)
   Brand: Cream var(--bb-creme) · Sand var(--bb-sand) · Border-Cream var(--bb-rand) · Slate var(--bb-schiefer)
   ============================================================ */

/* --- A) YouTube-Embed (Borlabs) --- */
.bb-video { margin: 2.5rem auto; }
.bb-video--short { max-width: 330px; }
.bb-video--wide  { max-width: 760px; }
.bb-video iframe {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 14px;
}
.bb-video--short iframe { aspect-ratio: 9 / 16; }
.bb-video--wide  iframe { aspect-ratio: 16 / 9; }
/* Borlabs-Platzhalter im Rahmen einpassen */
.bb-video .borlabs-hide,
.bb-video ._brlbs-content-blocker,
.bb-video [data-borlabs-cookie-type="content-blocker"] {
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 14px;
    overflow: hidden;
}

/* --- Reise-Karte (Google Maps via Borlabs) --- */
.bb-reise-karte { margin: 2.5rem auto; max-width: 100%; }
.bb-reise-karte iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    border: 0;
    border-radius: 14px;
}
.bb-reise-karte .borlabs-hide,
.bb-reise-karte ._brlbs-content-blocker,
.bb-reise-karte [data-borlabs-cookie-type="content-blocker"] {
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 14px;
    overflow: hidden;
}

/* --- B) Foodspot-Box --- */
.bb-foodspot {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 14px;
    overflow: hidden;
    margin: 2.5rem 0;
}
.bb-foodspot-info { padding: 1.75rem 1.85rem; }
.bb-foodspot-kicker {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
    font-weight: 600; color: var(--bb-sand); margin: 0 0 6px;
}
.bb-foodspot-name {
    font-family: 'Fraunces', serif !important;
    font-size: 22px !important; font-weight: 600 !important;
    color: var(--bb-anthrazit) !important; margin: 0 0 0.75rem !important; line-height: 1.2 !important;
}
.bb-foodspot-row {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; line-height: 1.55; color: var(--bb-schiefer); margin: 0 0 0.4rem;
}
.bb-foodspot-row strong { color: var(--bb-anthrazit); font-weight: 600; }
.bb-foodspot-actions { margin-top: 1.1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.bb-foodspot-btn {
    display: inline-block;
    background: var(--bb-sand); color: var(--bb-weiss) !important;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px;
    padding: 0.6rem 1.1rem; border-radius: 8px;
    text-decoration: none !important; box-shadow: none !important;
    transition: background 0.2s ease;
}
.bb-foodspot-btn:hover { background: var(--bb-sand-dunkel); color: var(--bb-weiss) !important; }
.bb-foodspot-btn--ghost {
    background: transparent; color: var(--bb-sand) !important; border: 1px solid var(--bb-sand);
}
.bb-foodspot-btn--ghost:hover { background: var(--bb-sand); color: var(--bb-weiss) !important; }
.bb-foodspot-map { position: relative; min-height: 220px; }
.bb-foodspot-map a { display: block; width: 100%; height: 100%; }
.bb-foodspot-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
    .bb-foodspot { grid-template-columns: 1fr; }
    .bb-foodspot-map { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
    .bb-foodspot-info { padding: 1.5rem 1.4rem; }
}

/* --- C) Voll-breiter Bild-Trenner (mit Schatten) --- */
.entry-content figure.bb-image-divider {
    margin: 3rem 0;
    max-width: none;
    text-align: center;
}
.entry-content figure.bb-image-divider img {
    width: 100%;
    max-width: 100%;
    max-height: none;          /* hebt den 640px-Cap der Einzelbilder auf */
    height: auto;
    border-radius: 14px;
    /* drop-shadow statt box-shadow: folgt der Bildform bzw. bei transparenten
       PNGs der Alpha-Kontur (Schatten am Motiv, kein Kasten drumherum). */
    filter: drop-shadow(0 8px 18px rgba(41, 39, 42, 0.30));
}

/* kleine Notiz-Zeile unter der Link-/Affiliate-Box (z.B. Affiliate-Hinweis) */
.bb-linkbox-note {
    flex: 0 0 100%;
    margin: 0.25rem 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #8A8284;
}

/* ============================================================
   === TEST-BAUSTEINE (wiederverwendbar) ===
   A) .bb-infobox  — „Gut zu wissen"/Spec-Box (Cream, Sand-Akzent, Fraunces-Kicker)
   B) .bb-procon   — Pro/Contra-Karte, zweispaltig (mobil gestapelt)
   Brand: Cream var(--bb-creme) · Border-Cream var(--bb-rand) · Sand var(--bb-sand) · Anthrazit var(--bb-anthrazit)
   ============================================================ */

/* --- A) Info-/„Gut zu wissen"-Box --- */
.bb-infobox {
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2.5rem 0;
}
.bb-infobox-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bb-sand);
    margin: 0 0 0.9rem;
}
.bb-infobox-list { list-style: none; margin: 0; padding: 0; }
.bb-infobox-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bb-anthrazit);
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--bb-rand);
}
.bb-infobox-list li:last-child { border-bottom: none; padding-bottom: 0; }
.bb-infobox-list li:first-child { padding-top: 0; }
.bb-infobox-list li strong { color: var(--bb-anthrazit); font-weight: 600; }

/* --- B) Pro/Contra-Karte --- */
.bb-procon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--bb-rand);
    border-radius: 14px;
    overflow: hidden;
    margin: 2.5rem 0;
    background: var(--bb-offweiss);
}
.bb-procon-col { padding: 1.5rem 1.6rem; }
.bb-procon-col + .bb-procon-col { border-left: 1px solid var(--bb-rand); }
.bb-procon-head {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--bb-anthrazit);
    margin: 0 0 1rem;
}
.bb-procon-head::before {
    margin-right: 0.45rem;
    font-weight: 700;
}
.bb-procon-col--pro .bb-procon-head::before { content: "\2713"; color: #5E8C61; } /* ✓ */
.bb-procon-col--con .bb-procon-head::before { content: "\2717"; color: #B5524A; } /* ✗ */
.bb-procon-list { list-style: none; margin: 0; padding: 0; }
.bb-procon-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bb-anthrazit);
    position: relative;
    padding: 0 0 0 1.5rem;
    margin: 0 0 0.7rem;
}
.bb-procon-list li:last-child { margin-bottom: 0; }
.bb-procon-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}
.bb-procon-col--pro .bb-procon-list li::before { content: "\2713"; color: #5E8C61; }
.bb-procon-col--con .bb-procon-list li::before { content: "\2717"; color: #B5524A; }
@media (max-width: 600px) {
    .bb-procon { grid-template-columns: 1fr; }
    .bb-procon-col + .bb-procon-col { border-left: none; border-top: 1px solid var(--bb-rand); }
}

/* --- „Mein Equipment"-Empfehlungskarte (Bild links + Inhalt rechts) --- */
.bb-equip {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    align-items: center;
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2.5rem 0;
}
.bb-equip-media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--bb-weiss); }
.bb-equip-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-equip-kicker {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--bb-anthrazit);
    margin: 0 0 0.6rem;
}
.bb-equip-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; line-height: 1.55; color: var(--bb-schiefer); margin: 0 0 0.5rem;
}
.bb-equip-support {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; line-height: 1.55; color: var(--bb-anthrazit); margin: 0 0 1rem;
}
.bb-equip-btn {
    display: inline-block;
    background: var(--bb-sand); color: var(--bb-weiss) !important;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2;
    padding: 0.75rem 1.4rem; border-radius: 8px;
    text-decoration: none !important; box-shadow: none !important;
    transition: background 0.2s ease;
}
.bb-equip-btn:hover { background: var(--bb-sand-dunkel); color: var(--bb-weiss) !important; }
.bb-equip-note {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; line-height: 1.4; color: #8A8284; margin: 0.7rem 0 0;
}
@media (max-width: 600px) {
    .bb-equip { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.25rem; }
    .bb-equip-media { max-width: 200px; }
}

/* =============================================================
   SAISONKALENDER B2: LEBENSMITTEL-TEMPLATE (taxonomy-lebensmittel.php)
   Brand-Tokens: Sand var(--bb-sand) · Cream var(--bb-creme) · Off-White var(--bb-offweiss)
   Text var(--bb-anthrazit) / var(--bb-schiefer) · Borders var(--bb-rand) / var(--bb-sand-hell) · Fraunces
   ============================================================= */

body.tax-lebensmittel { background: var(--bb-offweiss) !important; }

/* Content-Breite = Beitrags-/Archiv-Inset (126.72px); Selektor schlägt
   body.archive main#main{padding:0} (ID-Spezifität) → sonst volle Breite. */
body.tax-lebensmittel main#main.bb-lm { max-width: none !important; margin: 0 !important; padding: 2.5rem 126.72px 3rem !important; }

/* Breadcrumb-Header: kein doppelter Inset/Top (Inset kommt schon von .bb-lm) */
body.tax-lebensmittel .bb-archive-header { padding: 0 !important; background: transparent !important; margin: 0 0 1.25rem !important; }

/* Abschnittsabstände */
body.tax-lebensmittel .bb-lm-hero,
body.tax-lebensmittel .bb-lm-steckbrief,
body.tax-lebensmittel .bb-lm-saison,
body.tax-lebensmittel .bb-lm-wissen,
body.tax-lebensmittel .bb-lm-faq,
body.tax-lebensmittel .bb-lm-recipes { margin: 0 0 3rem; }

/* ── HERO ── */
body.tax-lebensmittel .bb-lm-hero { margin-top: 1rem; }
body.tax-lebensmittel .bb-lm-hero.has-illu {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: center;
}
body.tax-lebensmittel .bb-lm-hero-media { text-align: center; }
body.tax-lebensmittel .bb-lm-illu {
    width: 100%;
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 12px 24px rgba(41, 39, 42, 0.12));
}
body.tax-lebensmittel .bb-lm-h1 {
    font-family: 'Fraunces', serif !important;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1rem;
}
body.tax-lebensmittel .bb-lm-lead p {
    font-size: 18px;
    line-height: 1.65;
    color: var(--bb-schiefer);
    margin: 0 0 0.75rem;
}
body.tax-lebensmittel .bb-lm-latin {
    font-size: 15px;
    color: var(--bb-sand);
    margin: 0.5rem 0 0;
}

/* ── STECKBRIEF ── */
body.tax-lebensmittel .bb-lm-steckbrief {
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
}
body.tax-lebensmittel .bb-lm-steckbrief-title {
    font-family: 'Fraunces', serif !important;
    font-size: 20px;
    font-weight: 600;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1rem;
}
body.tax-lebensmittel .bb-lm-steckbrief-grid { margin: 0; }
body.tax-lebensmittel .bb-lm-steckbrief-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #EBE3D3;
}
body.tax-lebensmittel .bb-lm-steckbrief-row:last-child { border-bottom: 0; }
body.tax-lebensmittel .bb-lm-steckbrief-row dt {
    font-weight: 600;
    color: var(--bb-schiefer);
    font-size: 14.5px;
    margin: 0;
}
body.tax-lebensmittel .bb-lm-steckbrief-row dd {
    margin: 0;
    color: var(--bb-anthrazit);
    font-size: 15.5px;
    line-height: 1.5;
}

/* ── SAISON-BLOCK ── */
body.tax-lebensmittel .bb-lm-saison {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
}
body.tax-lebensmittel .bb-lm-saison-title {
    font-family: 'Fraunces', serif !important;
    font-size: 20px;
    font-weight: 600;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 1.1rem;
}
body.tax-lebensmittel .bb-lm-monthstrip {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
}
body.tax-lebensmittel .bb-lm-month {
    text-align: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    overflow: hidden; /* Link-Hintergrund respektiert die Rundung */
}
/* Padding sitzt auf dem Abbr-Span (in verlinkten UND nicht verlinkten Zellen),
   damit verlinkte Monate über die GANZE Zelle klickbar sind. */
body.tax-lebensmittel .bb-lm-month-abbr {
    display: block;
    padding: 0.55rem 0;
}
body.tax-lebensmittel .bb-lm-month-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}
body.tax-lebensmittel .bb-lm-month-link:hover .bb-lm-month-abbr {
    text-decoration: underline;
}
body.tax-lebensmittel .bb-lm-month-link:focus-visible {
    outline: 2px solid var(--bb-anthrazit);
    outline-offset: 1px;
}
body.tax-lebensmittel .bb-lm-month.is-frisch { background: #7C9A5A; color: var(--bb-weiss); }
body.tax-lebensmittel .bb-lm-month.is-lager  { background: #DDB877; color: #4A3B22; }
body.tax-lebensmittel .bb-lm-month.is-keine  { background: #ECE7DD; color: #A8A091; }
body.tax-lebensmittel .bb-lm-month.is-now {
    outline: 2px solid var(--bb-anthrazit);
    outline-offset: 1px;
    box-shadow: 0 4px 10px rgba(41, 39, 42, 0.18);
}
body.tax-lebensmittel .bb-lm-monthlegend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 1rem;
    font-size: 12.5px;
    color: var(--bb-schiefer);
}
body.tax-lebensmittel .bb-lm-leg { display: inline-flex; align-items: center; gap: 0.4rem; }
body.tax-lebensmittel .bb-lm-leg::before {
    content: '';
    width: 12px; height: 12px;
    border-radius: 3px;
    display: inline-block;
}
body.tax-lebensmittel .bb-lm-leg.is-frisch::before { background: #7C9A5A; }
body.tax-lebensmittel .bb-lm-leg.is-lager::before  { background: #DDB877; }
body.tax-lebensmittel .bb-lm-leg.is-keine::before  { background: #ECE7DD; }
body.tax-lebensmittel .bb-lm-saison-now {
    font-size: 16px;
    color: var(--bb-anthrazit);
    margin: 0 0 0.5rem;
}
body.tax-lebensmittel .bb-lm-saison-links {
    font-size: 14.5px;
    margin: 0;
}
body.tax-lebensmittel .bb-lm-saison-links a,
body.tax-lebensmittel .bb-lm-backlinks a {
    color: var(--bb-sand);
    font-weight: 600;
    text-decoration: none;
}
body.tax-lebensmittel .bb-lm-saison-links a:hover,
body.tax-lebensmittel .bb-lm-backlinks a:hover { text-decoration: underline; }
body.tax-lebensmittel .bb-lm-saison-links .sep,
body.tax-lebensmittel .bb-lm-backlinks .sep { margin: 0 0.6rem; color: #CABFAD; }

/* ── WISSENS-FLIESSTEXT: dezente Inline-Lebensmittel-Links ── */
body.tax-lebensmittel .bb-lm-inline-link {
    color: var(--bb-anthrazit);
    text-decoration: underline;
    text-decoration-color: var(--bb-sand);
    text-underline-offset: 2px;
}
body.tax-lebensmittel .bb-lm-inline-link:hover {
    color: var(--bb-sand);
}

/* Auto-Links in der „Zutaten für …"-Karte (Rezept-Beiträge) — dezent, fett bleibt fett */
.bb-zutaten .bb-lm-inline-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--bb-sand);
    text-underline-offset: 2px;
}
.bb-zutaten .bb-lm-inline-link:hover {
    color: var(--bb-sand);
}

/* Tasty-Card-Feldlinks (Kategorie/Methode/Küche/Ernährung → echte Seiten) */
.tasty-recipes .bb-tasty-fieldlink { color: inherit; text-decoration: underline; text-decoration-color: var(--bb-sand); text-underline-offset: 2px; }
.tasty-recipes .bb-tasty-fieldlink:hover { color: var(--bb-sand); }

/* ── REZEPTE ── */
body.tax-lebensmittel .bb-lm-recipes .bb-overview-h2 { margin-bottom: 1.25rem; }
body.tax-lebensmittel .bb-lm-norecipes {
    color: var(--bb-schiefer);
    font-size: 16px;
    background: var(--bb-creme);
    border: 1px dashed var(--bb-sand-hell);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 0;
}

/* ── NEWSLETTER (etablierter Sand-CTA .bb-cta) + ABSCHLUSS-Links ── */
body.tax-lebensmittel .bb-lm-newsletter { margin: 3rem 0 1.5rem; }
body.tax-lebensmittel .bb-lm-backlinks {
    text-align: center;
    margin: 1.5rem 0 0;
    font-size: 14.5px;
}

/* ============================================================
   WIEDERVERWENDBARE BAUSTEINE (auch außerhalb tax-lebensmittel nutzbar)
   ============================================================ */

/* ── MERKSATZ: Kernaussage, Cream + Sand-Rand links (schattenlos) ── */
.bb-merksatz {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--bb-creme);
    border-left: 4px solid var(--bb-sand);
    border-radius: 0 10px 10px 0;
    padding: 1.1rem 1.35rem;
    margin: 1.75rem 0;
}
.bb-merksatz-icon { font-size: 20px; line-height: 1.4; flex: 0 0 auto; }
.bb-merksatz-text {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--bb-anthrazit);
}

/* ── SORTEN-GRID: Karten Name + Kurzcharakter (schattenlos) ── */
.bb-sorten-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.75rem 0;
}
.bb-sorten-card {
    background: var(--bb-weiss);
    border: 1px solid var(--bb-rand);
    border-top: 3px solid var(--bb-sand);
    border-radius: 8px;
    padding: 1rem 1.15rem;
}
.bb-sorten-name {
    font-family: 'Fraunces', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 0.35rem !important;
}
.bb-sorten-desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--bb-schiefer);
}

/* ── INFOBOX-Häkchen-Variante (Checkliste) ── */
.bb-infobox--check .bb-infobox-list { list-style: none; padding-left: 0; margin: 0; }
.bb-infobox--check .bb-infobox-list li {
    position: relative;
    padding-left: 1.8rem;
    margin: 0 0 0.6rem;
}
.bb-infobox--check .bb-infobox-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #7C9A5A;
    font-weight: 700;
}

/* ── BILD-TRENNER: voll-breit, mit Schatten (einzige Ausnahme) ── */
.bb-bildtrenner { margin: 2.5rem 0; }
.bb-bildtrenner-img,
.bb-bildtrenner-ph {
    display: block;
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(41, 39, 42, 0.16);
}
.bb-bildtrenner-img { height: auto; }
.bb-bildtrenner-ph {
    aspect-ratio: 16 / 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: var(--bb-creme);
    border: 1px dashed var(--bb-sand-hell);
    color: var(--bb-sand);
}
.bb-bildtrenner-ph span { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; }
.bb-bildtrenner-ph small { color: var(--bb-schiefer); font-size: 13px; }
.bb-bildtrenner figcaption {
    text-align: center;
    font-size: 13px;
    color: var(--bb-schiefer);
    margin-top: 0.5rem;
}

/* ── NÄHRWERT-KARTE: Grundnährwerte pro 100 g (schattenlos) ── */
.bb-naehrwert-karte {
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.75rem;
}
.bb-nwk-title {
    font-family: 'Fraunces', serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--bb-anthrazit) !important;
    margin: 0 0 0.35rem !important;
}
.bb-nwk-hint {
    font-size: 12.5px;
    color: var(--bb-schiefer);
    margin: 0 0 1rem;
    line-height: 1.45;
}
.bb-nwk-grid { margin: 0; }
.bb-nwk-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #EBE3D3;
}
.bb-nwk-row:last-child { border-bottom: 0; }
.bb-nwk-row dt { margin: 0; color: var(--bb-anthrazit); font-size: 15px; }
.bb-nwk-row dd { margin: 0; font-weight: 600; color: var(--bb-anthrazit); font-size: 15px; white-space: nowrap; }
.bb-nwk-row.bb-nwk-sub dt { padding-left: 1rem; color: var(--bb-schiefer); font-size: 14px; }
.bb-nwk-row.bb-nwk-sub dd { font-weight: 500; color: var(--bb-schiefer); font-size: 14px; }

/* Gesundheits-Abschnitt: EINE Karte, 50/50 — Nährwerte links, Text rechts,
   dezente Trennlinie. Die innere Nährwert-Karte verliert ihren eigenen Rahmen
   (die äußere Karte IST der Rahmen) → wirkt zusammenhängend. */
body.tax-lebensmittel .bb-lm-gesund.has-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bb-creme);
    border: 1px solid var(--bb-rand);
    border-left: 4px solid var(--bb-sand);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.75rem;
}
body.tax-lebensmittel .bb-lm-gesund-card { padding-right: 1.75rem; }
body.tax-lebensmittel .bb-lm-gesund-text {
    padding-left: 1.75rem;
    border-left: 1px solid var(--bb-rand);
}
body.tax-lebensmittel .bb-lm-gesund-card .bb-naehrwert-karte {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
body.tax-lebensmittel .bb-lm-gesund-text > :first-child { margin-top: 0; }
body.tax-lebensmittel .bb-lm-gesund-text > .bb-nwk-title + * { margin-top: 0; }
body.tax-lebensmittel .bb-lm-gesund-text > :last-child { margin-bottom: 0; }
@media (max-width: 768px) {
    body.tax-lebensmittel .bb-lm-gesund.has-card { grid-template-columns: 1fr; padding: 1.25rem; }
    body.tax-lebensmittel .bb-lm-gesund-card {
        padding-right: 0;
        padding-bottom: 1.25rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid var(--bb-rand);
    }
    body.tax-lebensmittel .bb-lm-gesund-text { padding-left: 0; border-left: 0; }
}

/* ── MOBILE ── */
@media (max-width: 768px) {
    body.tax-lebensmittel main#main.bb-lm { padding: 1.5rem 1.25rem 2rem !important; }
    body.tax-lebensmittel .bb-lm-hero.has-illu { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
    body.tax-lebensmittel .bb-lm-illu { max-width: 200px; }
    body.tax-lebensmittel .bb-lm-h1 { font-size: 32px; }
    body.tax-lebensmittel .bb-lm-steckbrief,
    body.tax-lebensmittel .bb-lm-saison { padding: 1.25rem; }
    body.tax-lebensmittel .bb-lm-steckbrief-row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.55rem 0; }
    body.tax-lebensmittel .bb-lm-steckbrief-row dt { font-size: 13px; }
    body.tax-lebensmittel .bb-lm-monthstrip { grid-template-columns: repeat(6, 1fr); gap: 5px; }
    body.tax-lebensmittel .bb-lm-month-abbr { padding: 0.6rem 0; }
    .bb-sorten-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    body.tax-lebensmittel .bb-lm-hero.has-illu { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
    body.tax-lebensmittel .bb-lm-illu { max-width: 200px; }
    body.tax-lebensmittel .bb-lm-h1 { font-size: 32px; }
    body.tax-lebensmittel .bb-lm-steckbrief,
    body.tax-lebensmittel .bb-lm-saison { padding: 1.25rem; }
    body.tax-lebensmittel .bb-lm-steckbrief-row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.55rem 0; }
    body.tax-lebensmittel .bb-lm-steckbrief-row dt { font-size: 13px; }
    body.tax-lebensmittel .bb-lm-monthstrip { grid-template-columns: repeat(6, 1fr); gap: 5px; }
    body.tax-lebensmittel .bb-lm-month-abbr { padding: 0.6rem 0; }
}

/* =============================================================
   SAISONKALENDER PILLAR (/saisonkalender/) + Baustein [bb_jetzt_im_monat]
   ============================================================= */
/* Weiße Inhaltskarte — IDENTISCH zu /lebensmittel & /rezepte (Pillar + Typ-Hubs):
   max-width 1200, runde Ecken 16px, Schatten nur unten/seitlich. */
body.page-template-saisonkalender-pillar,
body.page-template-saisonkalender-hub,
body.page-template-saisonkalender-monat { background: var(--bb-offweiss) !important; }
/* #page NICHT anfassen außer bg — es trägt den globalen Header-Offset (--bb-header-h, 105px)! */
body.page-template-saisonkalender-pillar #page,
body.page-template-saisonkalender-hub #page,
body.page-template-saisonkalender-monat #page { background: transparent !important; }
/* padding-top:0 NUR auf #content (wie die Archiv-/Lebensmittel-Seiten) → Karte bündig im offset-Page */
body.page-template-saisonkalender-pillar #content,
body.page-template-saisonkalender-hub #content,
body.page-template-saisonkalender-monat #content { background: transparent !important; padding-top: 0 !important; margin-top: 0 !important; }
body.page-template-saisonkalender-pillar #content .ast-container,
body.page-template-saisonkalender-hub #content .ast-container,
body.page-template-saisonkalender-monat #content .ast-container {
    background: var(--bb-weiss) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 26px -12px rgba(41, 39, 42, .14) !important;
}
body.page-template-saisonkalender-pillar #primary, body.page-template-saisonkalender-pillar main#main,
body.page-template-saisonkalender-hub #primary, body.page-template-saisonkalender-hub main#main,
body.page-template-saisonkalender-monat #primary, body.page-template-saisonkalender-monat main#main {
    background: transparent !important; padding: 0 !important; margin: 0 !important;
    width: 100% !important; max-width: 100% !important;
}
/* Inhalt im .bb-overview-wrap (Padding 126.72px + Breadcrumb-Styles geerbt) */

/* Hero + Intro (geteilt über .bb-skp — Pillar & Hub) */
.bb-skp .bb-skp-hero { margin: 0.25rem 0 1.75rem; text-align: center; }
.bb-skp .bb-skp-hero-img { width: 100%; max-width: 100%; height: auto; display: block; }
.bb-skp .bb-skp-intro p { font-size: 17px; line-height: 1.7; color: var(--bb-schiefer); margin: 0 0 1rem; }

/* ── Saisonkalender Monatsseite: Warengruppen-Abschnitte + Grid + Ring-Navigation ── */
.bb-monatpage .bb-monat-sec { margin: 2.5rem 0 0; }
.bb-monatpage .bb-monat-sec .bb-overview-h2 { margin: 0 0 0.6rem; }
.bb-monat-lead { font-size: 16px; line-height: 1.7; color: var(--bb-schiefer); margin: 0 0 1.25rem; max-width: 820px; }
.bb-monat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bb-monat-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--bb-creme); border: 1px solid var(--bb-rand); border-radius: 14px;
    padding: 1.25rem 1rem 1rem; text-decoration: none !important;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.bb-monat-tile:hover { background: #F3ECDD; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(41, 39, 42, .08); }
.bb-monat-tile-img { width: 100%; max-width: 150px; height: auto; margin: 0 auto 0.75rem; }
.bb-monat-tile-label { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; color: var(--bb-anthrazit); }

/* Abschluss-Text (folgt direkt auf den [bb_saison_monat]-Output) deutlich absetzen
   mit Trennlinie — wie die Zäsur vor den FAQ. Gilt für alle 12 Monate. */
.bb-monatpage .bb-skp-intro .bb-monat + p { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--bb-rand); }

.bb-monat-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 3rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--bb-rand); }
.bb-monat-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bb-creme); border: 1px solid var(--bb-rand); border-radius: 10px;
    padding: 0.6rem 1.1rem; font-size: 15px; font-weight: 600;
    color: var(--bb-anthrazit) !important; text-decoration: none !important;
    transition: background .15s, transform .15s;
}
.bb-monat-nav-link:hover { background: #F3ECDD; transform: translateY(-1px); }
.bb-monat-nav-up { color: var(--bb-sand) !important; }
.bb-monat-nav-arrow { font-size: 17px; line-height: 1; }

@media (max-width: 768px) {
    .bb-monat-grid { grid-template-columns: repeat(2, 1fr); }
    .bb-monat-nav { flex-direction: column; align-items: stretch; }
    .bb-monat-nav-link { justify-content: center; }
}

/* Navi-Blöcke */
body.page-template-saisonkalender-pillar .bb-skp-nav { margin: 2.5rem 0 0; }
body.page-template-saisonkalender-pillar .bb-skp-navlead {
    font-size: 16px; line-height: 1.6; color: var(--bb-schiefer);
    margin: 0 0 1.25rem; max-width: 760px;
}

/* A: Typ-Bild-Kacheln */
body.page-template-saisonkalender-pillar .bb-skp-typgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.page-template-saisonkalender-pillar .bb-skp-typ {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--bb-creme); border: 1px solid var(--bb-rand); border-radius: 14px;
    padding: 1.25rem 1rem 1rem; text-decoration: none !important;
    transition: background .15s, transform .15s, box-shadow .15s;
}
body.page-template-saisonkalender-pillar .bb-skp-typ:hover { background: #F3ECDD; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(41,39,42,.08); }
body.page-template-saisonkalender-pillar .bb-skp-typ-img { width: 100%; max-width: 100%; height: auto; margin: 0 auto 0.75rem; }
body.page-template-saisonkalender-pillar .bb-skp-typ-label {
    font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--bb-anthrazit);
}

/* B: Monats-Bild-Kacheln (weiß, 3-spaltig — bewusst anders als die cream Typ-Kacheln) */
body.page-template-saisonkalender-pillar .bb-skp-monthgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.page-template-saisonkalender-pillar .bb-skp-month {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--bb-weiss); border: 1px solid var(--bb-rand); border-radius: 14px;
    padding: 1rem 1rem 0.85rem; text-decoration: none !important;
    transition: transform .15s, box-shadow .15s, background .15s;
}
body.page-template-saisonkalender-pillar .bb-skp-month:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(41,39,42,.08); }
body.page-template-saisonkalender-pillar .bb-skp-month-img { width: 100%; max-width: 100%; height: auto; margin: 0 auto 0.5rem; }
body.page-template-saisonkalender-pillar .bb-skp-month-label {
    font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--bb-anthrazit);
}
body.page-template-saisonkalender-pillar .bb-skp-month.is-now {
    background: #EAF3DE; border-color: #B9D49A; box-shadow: 0 2px 10px rgba(39,80,10,.12);
}
body.page-template-saisonkalender-pillar .bb-skp-month.is-now .bb-skp-month-label { color: #27500A; }

/* ── Saisonkalender-Einbindungen (Dropdown / Startseite / Tellerrand) ── */
/* Dropdown: Saisonkalender abgesetzt über den 5 Clustern */
.bb-mega--tellerrand .bb-mega-item--saison { border-bottom: 1px solid var(--bb-rand); margin-bottom: 6px; padding-bottom: 6px; }

/* Startseite: Saisonkalender-Block (Bild + Text + „Jetzt im Monat") */
.bb-home-saison-head { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2rem; align-items: center; }
.bb-home-saison-media img { width: 100%; height: auto; border-radius: 16px; display: block; }
.bb-home-saison-text .bb-home-h2 { margin-top: 0; }
.bb-home-saison .bb-jim { margin-top: 1.75rem; }
@media (max-width: 768px) { .bb-home-saison-head { grid-template-columns: 1fr; gap: 1.2rem; } }

/* Tellerrand: Saisonkalender-Banner (Cream, abgesetzt — kein Cluster) */
.bb-saison-banner {
    display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2rem; align-items: center;
    background: var(--bb-creme); border: 1px solid var(--bb-rand); border-radius: 16px;
    padding: 1.75rem; margin: 2.5rem 0;
}
.bb-saison-banner-media img { width: 100%; height: auto; border-radius: 12px; display: block; }
.bb-saison-banner-kicker { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bb-sand); margin-bottom: .4rem; }
.bb-saison-banner-body h2 { margin: 0 0 .6rem; }
.bb-saison-banner-body p { margin: 0 0 1.1rem; color: var(--bb-schiefer); line-height: 1.6; }
@media (max-width: 768px) { .bb-saison-banner { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.25rem; } }

/* ── BAUSTEIN „Jetzt im Monat" (global wiederverwendbar) ── */
.bb-jim {
    background: var(--bb-creme); border: 1px solid var(--bb-rand); border-radius: 14px;
    padding: 1.75rem 2rem; margin: 2rem 0 0;
}
.bb-jim-title {
    font-family: 'Fraunces', serif !important; font-size: 24px; font-weight: 600;
    color: var(--bb-anthrazit) !important; margin: 0 0 1.25rem;
}
.bb-jim-group { margin: 0 0 1.1rem; }
.bb-jim-group:last-of-type { margin-bottom: 0; }
.bb-jim-label {
    display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; margin: 0 0 0.6rem; color: var(--bb-schiefer);
}
.bb-jim-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bb-jim-pill {
    display: inline-block; padding: 7px 14px; border-radius: 999px;
    font-size: 14.5px; font-weight: 600; text-decoration: none !important;
    transition: filter .15s;
}
.bb-jim-pill:hover { filter: brightness(0.96); }
.bb-jim-frisch .bb-jim-pill { background: #EAF3DE; color: #27500A !important; }
.bb-jim-lager  .bb-jim-pill { background: #FAEEDA; color: #633806 !important; }
.bb-jim-more { font-size: 13.5px; color: var(--bb-schiefer); align-self: center; text-decoration: none !important; font-weight: 600; }
.bb-jim-more:hover { color: var(--bb-sand); text-decoration: underline !important; }
.bb-jim-all { margin: 1.35rem 0 0; }
.bb-jim-all a {
    font-weight: 600; color: var(--bb-sand); text-decoration: none !important; font-size: 15px;
}
.bb-jim-all a:hover { text-decoration: underline !important; }

/* Mobile */
@media (max-width: 768px) {
    body.page-template-saisonkalender-pillar .bb-skp-typgrid { grid-template-columns: repeat(2, 1fr); }
    body.page-template-saisonkalender-pillar .bb-skp-monthgrid { grid-template-columns: repeat(2, 1fr); }
    .bb-jim { padding: 1.35rem 1.25rem; }
}

/* =============================================================
   SAISONKALENDER HUB — Tabelle [bb_typ_liste] + FAQ + Backlink
   ============================================================= */
.bb-typ { margin: 1.5rem 0 0; }
.bb-typ-legende { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 0.85rem; font-size: 13px; color: var(--bb-schiefer); }
.bb-typ-leg { display: inline-flex; align-items: center; gap: 0.45rem; }
.bb-typ-leg::before { content: ''; width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.bb-typ-leg.is-frisch::before { background: #7C9A5A; }
.bb-typ-leg.is-lager::before  { background: #DDB877; }
.bb-typ-leg.is-keine::before  { background: #ECE7DD; }

/* Kein umgebender Kasten — die Tabelle hat ihre eigene Zell-Kontur.
   Desktop: KEIN Scroll-Container (sonst bricht sticky thead); Mobil: horizontal scrollbar. */
.bb-typ-scroll { overflow: visible; }
.bb-typ-table { table-layout: fixed; border-collapse: collapse; width: 100%; }
.bb-typ-table th, .bb-typ-table td { border: 1px solid #EDE6D7; }

/* Kopfzeile sticky unter dem fixen Site-Header */
.bb-typ-table thead th {
    background: #F9F6EE; font-size: 12.5px; font-weight: 600; color: var(--bb-schiefer);
    padding: 0.5rem 0; text-align: center;
    position: sticky; top: var(--bb-header-off, 105px); z-index: 4;
}
.bb-typ-th-name {
    width: 210px; text-align: left !important; padding-left: 0.85rem !important;
    position: sticky; left: 0; top: var(--bb-header-off, 105px); z-index: 6; background: var(--bb-creme) !important;
}

/* Namensspalte: breiter, linksbündig, Bild groß, Name 2-zeilig */
.bb-typ-name { width: 210px; position: sticky; left: 0; z-index: 2; background: var(--bb-weiss); padding: 0; font-weight: 400; vertical-align: middle; }
.bb-typ-name a { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; padding: 0.55rem 0.85rem; text-decoration: none !important; color: var(--bb-anthrazit) !important; }
.bb-typ-name a:hover { background: var(--bb-creme); }
.bb-typ-thumb { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.bb-typ-nm { font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: normal; text-align: left; }

.bb-typ-cell { height: 52px; padding: 0; }
.bb-typ-cell.is-frisch { background: #7C9A5A; }
.bb-typ-cell.is-lager  { background: #DDB877; }
.bb-typ-cell.is-keine  { background: #F4EFE4; }

/* Aktueller Monat: Spalte umrahmt (auch im sticky Kopf sichtbar) */
.bb-typ-table thead th.is-now { border-top: 2px solid var(--bb-anthrazit); border-left: 2px solid var(--bb-anthrazit); border-right: 2px solid var(--bb-anthrazit); color: var(--bb-anthrazit); }
.bb-typ-cell.is-now { border-left: 2px solid var(--bb-anthrazit); border-right: 2px solid var(--bb-anthrazit); }
.bb-typ-table tbody tr:last-child .bb-typ-cell.is-now { border-bottom: 2px solid var(--bb-anthrazit); }

/* Sticky-Kopf an das Smart-Sticky-Menü koppeln (eigenes JS togglet #masthead.bb-header-hidden).
   Menü sichtbar → Kopf unter dem Menü; Menü weggeklappt → Kopf nach ganz oben.
   Transition .28s = identisch zur Header-Animation (Zeile #masthead transition). */
.bb-typ-table thead th { transition: top .28s ease; }
#masthead.bb-header-hidden ~ #content .bb-typ-table thead th { top: 0 !important; }
.admin-bar #masthead.bb-header-hidden ~ #content .bb-typ-table thead th { top: 32px !important; }
@media (max-width: 782px) {
    /* mobile Admin-Bar scrollt weg → bei verstecktem Menü ganz oben */
    .admin-bar #masthead.bb-header-hidden ~ #content .bb-typ-table thead th { top: 0 !important; }
}

/* FAQ auf dem Hub — IDENTISCH zu den Lebensmittel-Seiten (weiße Items, nicht cream) */
.bb-typhub-faq { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--bb-rand); }
.bb-typhub-faq .bb-archive-faq-title { font-family: 'Fraunces', serif !important; font-size: 28px !important; font-weight: 600 !important; color: var(--bb-anthrazit) !important; margin: 0 0 1.5rem !important; }
.bb-typhub-faq .bb-archive-faq-list { display: flex; flex-direction: column; gap: 12px; }
.bb-typhub-faq .bb-archive-faq-item { background: var(--bb-weiss); border: 1px solid var(--bb-rand); border-radius: 12px; padding: 1.25rem 1.5rem; margin: 0; }
.bb-typhub-faq .bb-archive-faq-item h3 { font-family: 'Fraunces', serif !important; font-size: 17px !important; font-weight: 600 !important; color: var(--bb-anthrazit) !important; margin: 0 0 8px !important; line-height: 1.3 !important; }
.bb-typhub-faq .bb-archive-faq-item p { margin: 0 !important; font-size: 15px !important; color: var(--bb-schiefer) !important; line-height: 1.65 !important; }

.bb-skp-backlinks { margin: 2rem 0 0; font-size: 14.5px; }
.bb-skp-backlinks a { color: var(--bb-sand); font-weight: 600; text-decoration: none !important; }
.bb-skp-backlinks a:hover { text-decoration: underline !important; }

@media (max-width: 768px) {
    /* Mobil: horizontaler Scroll-Container (sticky thead entfällt hier — ok) */
    .bb-typ-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .bb-typ-table { min-width: 600px; }
    .bb-typ-th-name, .bb-typ-name { width: 150px; }
    .bb-typ-nm { font-size: 13px; }
    .bb-typ-thumb { width: 32px; height: 32px; }
}

/* ============================================================
   PHASE 16-0 — KOMMENTARE + BEWERTUNGEN (Brand, Token-only)
   Gilt für Rezept- UND Tellerrand-Kommentare. Nur --bb-*-Tokens.
   Tellerrand = Kommentare OHNE Sterne (kein Tasty → Soll, kein Bug).
   ============================================================ */

/* --- Tasty-Bewertungssterne + „Bewerten"-Buttons: Sand statt Gold --- */
.tasty-recipes-rating-stars,
.tasty-recipes-rating-outer,
.tasty-recipes-clip-rating,
.tasty-recipes-ratings-buttons a {
    color: var(--bb-sand) !important;
}
.tasty-recipes-rating-stars svg,
.tasty-recipes-rating-outer svg,
.tasty-recipes-ratings-buttons svg,
.tasty-recipes-ratings-buttons svg path {
    fill: var(--bb-sand) !important;
}

/* --- Kommentarbereich Grundlayout --- */
.comments-area {
    max-width: 760px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bb-sand);
}
.comments-area .comments-title,
.comments-area .comment-reply-title {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--bb-anthrazit);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list .comment-body {
    background: var(--bb-creme);
    border: 1px solid rgba(198, 170, 144, .35);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.comment-list .comment-author .fn { color: var(--bb-anthrazit); font-weight: 600; }
.comment-list .comment-meta a { color: var(--bb-sand); text-decoration: none; }
.comment-list .reply a { color: var(--bb-sand); font-weight: 600; text-decoration: none; }

/* --- Kommentarformular in Brand --- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    border: 1px solid var(--bb-sand);
    border-radius: 8px;
    padding: .6rem .8rem;
    background: var(--bb-weiss);
    font-family: inherit;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--bb-sand-dunkel);
    box-shadow: 0 0 0 2px rgba(198, 170, 144, .25);
}
.comment-form label { color: var(--bb-anthrazit); font-weight: 600; }
.comment-form .submit,
.comment-form #submit,
.comment-form input[type="submit"] {
    background: var(--bb-sand) !important;
    color: var(--bb-weiss) !important;
    border: 1px solid var(--bb-sand) !important;
    border-radius: 999px;
    padding: .6rem 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.comment-form .submit:hover,
.comment-form .submit:focus,
.comment-form #submit:hover,
.comment-form #submit:focus,
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus {
    background: var(--bb-sand-dunkel) !important;
    border-color: var(--bb-sand-dunkel) !important;
}
.comment-form .bb-comment-privacy {
    font-size: .8rem;
    color: var(--bb-anthrazit);
    opacity: .8;
    margin-top: .75rem;
}

/* Feinschliff 07/2026: Name + E-Mail 50/50 nebeneinander mit kleiner Lücke;
   Cookie-Consent-Checkbox in eigener Zeile darunter, dezent (nicht fett).
   Das Website-Feld ist per comment_form_fields-Filter (functions.php) entfernt. */
.comment-form-author,
.comment-form-email { width: calc(50% - .4rem); box-sizing: border-box; }
.comment-form-author { float: left; margin-right: .8rem; }
.comment-form-email  { float: left; }
.comment-form-cookies-consent,
.comment-form .form-submit { clear: both; }
/* Astras Grid-Row (.ast-comment-formwrap) hat margin-left:-20px; die Feld-Spalten
   (Name/E-Mail) gleichen das mit padding-left:20px aus → Inhalt bei der Formularkante.
   Checkbox + Absenden sind schlichte <p> ohne diese Kompensation → sonst 20px zu weit
   links. Dieselben 20px hier nachziehen, damit alles an derselben Kante fluchtet. */
.comment-form .comment-form-cookies-consent,
.comment-form .form-submit { padding-left: 20px; }
.comment-form .comment-form-cookies-consent label {
    font-weight: 400;
    font-size: .8rem;
    opacity: .85;
}
@media (max-width: 600px) {
    .comment-form-author,
    .comment-form-email { float: none; width: 100%; margin-right: 0; }
}

/* --- Tasty-Bewertungsauswahl im Kommentarformular: linksbündig auf die Textarea-Kante.
   Kernklasse laut gerendertem Markup = .tasty-recipes-ratings-buttons. --- */
/* Tasty rendert die Bewertung in ein <fieldset> → dessen Default-Border/Padding/Margin
   war die Rest-Einrückung. Scoped auf .comment-form (dort gibt es kein anderes fieldset). */
.comment-form fieldset {
    margin: 0 0 1.1rem 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0;
}
.comment-form fieldset legend {
    padding: 0 !important;
    margin: 0 0 .35rem !important;
    width: auto;
}
.comment-form .tasty-recipes-ratings-buttons,
.comment-form .comment-form-tasty-recipes-rating,
.comment-form .tasty-recipes-ratings,
.comment-form fieldset.tasty-recipes-ratings,
.comments-area .comment-form-tasty-recipes-rating {
    display: block;
    text-align: left !important;
    margin: 0 0 1.1rem 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
/* etwaigen <p>/<fieldset>-Wrapper der Sterne auf 0 einrücken (Fieldset-Default-Margin) */
.comment-form p.comment-form-tasty-recipes-rating,
.comment-form fieldset.comment-form-tasty-recipes-rating,
.comment-form p:has(> .tasty-recipes-ratings-buttons) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}
/* Label „Deine Bewertung" als Block über den Sternen */
.comment-form .comment-form-tasty-recipes-rating label,
.comment-form .comment-form-tasty-recipes-rating .rating-label,
.comment-form .tasty-recipes-ratings label {
    display: block;
    text-align: left;
    margin: 0 0 .35rem;
    padding-left: 0;
    color: var(--bb-anthrazit);
    font-weight: 600;
}
/* Sterne linksbündig (kein Auto-Zentrieren) + Sand */
.comment-form .tasty-recipes-ratings-buttons .tasty-recipes-rating {
    justify-content: flex-start;
    margin-left: 0;
    color: var(--bb-sand) !important;
}

/* ============================================================
   PHASE 16-3 — RECHTSSEITEN (Datenschutz/DSE via [bb_datenschutz])
   Schlicht + lesbar, Anker-Offset für fixierten Header. Token-only.
   ============================================================ */
.bb-legal { max-width: 820px; margin-inline: auto; }
.bb-legal h2 { margin-top: 2.4rem; }
.bb-legal h3 { margin-top: 1.6rem; }
.bb-legal ul { margin: .6rem 0 1.2rem 1.2rem; }
.bb-legal li { margin-bottom: .3rem; }
.bb-legal a { color: var(--bb-sand-dunkel); }
/* Sprungziele der Inhaltsübersicht nicht unter den fixierten Header rutschen */
.bb-legal [id] { scroll-margin-top: 120px; }
.bb-footer-cookie { cursor: pointer; }

/* ============================================================
   PHASE 16 — TASTY-NÄHRWERTE: deutsche Reihenfolge + „davon Zucker"
   Items (<li>) haben keine eigene Klasse → Ordnung via :has() auf die
   Wert-Span. Reihenfolge: Portionsgröße · Kalorien · Fett · Kohlenhydrate ·
   davon Zucker · Ballaststoffe · Eiweiß. NUR Darstellung — Recipe-Schema
   (nutrition JSON-LD) bleibt unberührt. Wirkt auf ALLE Rezepte.
   ============================================================ */
.tasty-recipes-nutrition ul { display: flex; flex-wrap: wrap; }  /* nebeneinander wie nativ; nur order steuern */
.tasty-recipes-nutrition li { order: 99; }  /* unbekannte Felder ans Ende */
.tasty-recipes-nutrition li:has(.tasty-recipes-serving-size)     { order: 10; }
.tasty-recipes-nutrition li:has(.tasty-recipes-calories)         { order: 20; }
.tasty-recipes-nutrition li:has(.tasty-recipes-fat)              { order: 30; }
.tasty-recipes-nutrition li:has(.tasty-recipes-saturated-fat)    { order: 32; }
.tasty-recipes-nutrition li:has(.tasty-recipes-unsaturated-fat)  { order: 34; }
.tasty-recipes-nutrition li:has(.tasty-recipes-trans-fat)        { order: 36; }
.tasty-recipes-nutrition li:has(.tasty-recipes-carbohydrates)    { order: 40; }
.tasty-recipes-nutrition li:has(.tasty-recipes-sugar)            { order: 42; }
.tasty-recipes-nutrition li:has(.tasty-recipes-fiber)            { order: 44; }
.tasty-recipes-nutrition li:has(.tasty-recipes-protein)          { order: 50; }
.tasty-recipes-nutrition li:has(.tasty-recipes-sodium)           { order: 60; }
.tasty-recipes-nutrition li:has(.tasty-recipes-cholesterol)      { order: 70; }
/* „davon Zucker" nicht fett (alle anderen Labels bleiben fett) */
.tasty-recipes-nutrition li:has(.tasty-recipes-sugar) .tasty-recipes-label { font-weight: 400 !important; }