/* ================================================================
   MAKARSKA GASTRO – Budget-Seite „Was kann ich mir leisten?“
   Hero „Küstenlinie“ (Himmel · Sonne mit Gabel & Tasse · animiertes Meer)
   + ruhiger Filter, Tabs und Karten in Bordeaux · Gold · Creme.
   Nur Optik, alle Klassen bleiben. Laden NACH new.css.
   ================================================================ */
.bx-wrap, .bx-filter, .bxh {
    --b: #851B2F; --bd: #6B1425; --g: #BE9440; --gl: #D9BE82;
    --c: #F6EFE3; --sand: #E8DCC0; --k: #2A2024;
}

/* ── HERO (volle Breite, auch innerhalb von .bx-wrap) ───────── */
body .bx-hero.bxh {
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
    padding: 0; background: linear-gradient(180deg, #FBF8F1, var(--c));
    color: var(--k); text-align: center; overflow: hidden; position: relative;
    font-family: 'Poppins', var(--font, system-ui), sans-serif;
}
.bxh-sky { position: relative; z-index: 1; padding: 34px 0 78px; }
.bxh-wrap { max-width: 900px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
body .bx-hero.bxh .bx-back { color: var(--b); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
body .bx-hero.bxh .bx-back:hover { color: var(--k); }
body .bx-hero.bxh h1 { font-size: clamp(1.9rem, 5.4vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; color: var(--k); margin: 0 0 14px; }
body .bx-hero.bxh h1 em { color: var(--b); font-style: italic; }
body .bx-hero.bxh p { color: #5d4f4a; font-size: .96rem; max-width: 560px; margin: 0 auto; }

/* Sonne mit Gabel/Löffel + Tasse */
.bxh-sun {
    position: absolute; z-index: 0; width: 230px; height: 230px; border-radius: 50%; background: var(--g);
    left: calc(50% + 270px); bottom: -108px;
    box-shadow: 0 0 0 16px rgba(190,148,64,.20), 0 0 0 38px rgba(190,148,64,.10);
    display: flex; align-items: flex-start; justify-content: center; gap: 4px; padding-top: 34px;
}
.bxh-sun svg { width: 74px; height: 74px; opacity: .92; }

/* Meer */
.bxh-sea { position: relative; z-index: 3; background: var(--b); color: var(--c); padding: 22px 0 66px; }
.bxh-sea::before, .bxh-sea::after {
    content: ""; position: absolute; left: 0; right: 0; pointer-events: none; background-repeat: repeat-x; background-size: 120px 100%;
}
.bxh-sea::before {
    top: -27px; height: 28px; z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q30 0 60 14 T120 14 V28 H0Z' fill='%23851B2F'/%3E%3Cpath d='M0 14 Q30 0 60 14 T120 14' fill='none' stroke='%23D9BE82' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.bxh-sea::after {
    top: -37px; height: 30px; z-index: 0; opacity: .6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q20 0 40 10 T80 10 T120 10 V30 H0Z' fill='%23BE9440'/%3E%3C/svg%3E");
}
/* feine Wellenlinien im Meer */
.bxh-sea .bx-hero-inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
    .bxh-sea::before { animation: bxw 16s linear infinite; }
    .bxh-sea::after  { animation: bxw 26s linear infinite reverse; }
}
@keyframes bxw { from { background-position-x: 0; } to { background-position-x: 120px; } }
body .bx-hero.bxh .bx-display { color: var(--c); font-size: .95rem; font-weight: 500; letter-spacing: .02em; }
body .bx-hero.bxh .bx-amount { color: var(--gl); font-size: 2.3rem; font-weight: 700; margin: 0 8px; vertical-align: -3px; letter-spacing: -.02em; }

/* ── FILTER (überlappt das Meer) ────────────────────────────── */
body .bx-filter { margin-top: -44px; }
body .bx-filter-inner {
    border: 1px solid var(--sand); border-radius: 16px; padding: 24px 28px;
    box-shadow: 0 22px 40px -26px rgba(107,20,37,.55);
}
body .bx-filter-col label { color: #7a6c66; letter-spacing: .14em; }
body .bx-pill { border-radius: 999px; border-color: var(--sand); color: var(--k); padding: 9px 18px; }
body .bx-pill:hover { border-color: var(--g); color: var(--b); }
body .bx-pill.active { background: var(--b); border-color: var(--b); color: #fff; }
body .bx-select { border-radius: 999px; border-color: var(--sand); padding: 10px 18px; }
body .bx-select:focus { outline: 2px solid var(--g); outline-offset: 1px; }
body .bx-btn { border-radius: 999px; padding: 11px 20px; }
body .bx-btn--prim { background: var(--b); border-color: var(--b); color: #fff; }
body .bx-btn--prim:hover { background: var(--bd); border-color: var(--bd); }
body .bx-btn--sec { border-color: var(--g); color: var(--b); }
body .bx-btn--sec:hover { background: var(--c); border-color: var(--g); color: var(--b); }

/* ── TABS ───────────────────────────────────────────────────── */
body .bx-tabs { border-bottom-color: var(--sand); margin-top: 38px; }
body .bx-tab:hover { color: var(--b); }
body .bx-tab.active { color: var(--b); border-bottom-color: var(--g); border-bottom-width: 3px; }
body .bx-tab-count { border-radius: 999px; background: var(--c); border-color: var(--sand); color: var(--b); }
body .bx-tab.active .bx-tab-count { background: var(--b); border-color: var(--b); color: #fff; }

/* ── KARTEN ─────────────────────────────────────────────────── */
body .bx-pane h2 { position: relative; padding-top: 22px; font-weight: 700; letter-spacing: -.012em; }
body .bx-pane h2::before {
    content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5 T36 5 T48 5' fill='none' stroke='%23BE9440' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / 48px 10px;
}
body .bx-card, body .bx-mini-card, body .bx-trending-item {
    border-radius: 12px; border-color: var(--sand);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body .bx-card:hover, body .bx-mini-card:hover, body .bx-trending-item:hover {
    transform: translateY(-4px); border-color: var(--g); box-shadow: 0 18px 30px -18px rgba(133,27,47,.45);
}
body .bx-card-img { position: relative; }
body .bx-card-rating { border-radius: 999px; background: var(--c); border-color: var(--sand); color: var(--b); padding: 2px 9px; }
body .bx-card-rating svg { color: var(--g); }
body .bx-top { background: var(--c); border: 0; border-radius: 10px; padding: 12px 14px; }
body .bx-top-label { color: #7a6c66; letter-spacing: .12em; }
body .bx-card-cta { color: var(--b); }
body .bx-card-cta:hover { color: var(--k); }
body .bx-card-title a:hover { color: var(--b); }
body .bx-coffee { border-radius: 12px; border: 1px solid var(--sand); border-top: 3px solid var(--g); }
body .bx-coffee-fill { background: linear-gradient(90deg, var(--g), var(--b)); }
body .bx-coffee-bar { border-radius: 999px; background: var(--sand); }
body .bx-coffee-avg, body .bx-mini-price, body .bx-trending-price { color: var(--b); }

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bxh-sky { padding: 26px 0 112px; }
    .bxh-wrap { padding: 0 18px; }
    .bxh-sun { width: 150px; height: 150px; left: auto; right: -34px; bottom: -78px; padding-top: 20px; gap: 0;
        box-shadow: 0 0 0 10px rgba(190,148,64,.20), 0 0 0 24px rgba(190,148,64,.10); }
    .bxh-sun svg { width: 46px; height: 46px; }
    .bxh-sea { padding: 16px 0 58px; }
    body .bx-hero.bxh .bx-amount { font-size: 1.9rem; }
    body .bx-hero.bxh .bx-display { font-size: .86rem; }
    body .bx-filter { margin-top: -38px; padding: 0 16px; }
    body .bx-filter-inner { padding: 20px 18px; border-radius: 14px; }
    body .bx-pill { padding: 8px 15px; }
}