/* ============================================================
   Honigfinder — Quiz + Ergebnis-Styling
   Manufaktur/Editorial Design, NOVA-kompatibel (Bootstrap 4).
   ============================================================ */

/* ---- Wrapper ---- */
.hf-wrapper {
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: inherit;
    color: #3a3a3a;
}

/* ---- Header ---- */
.hf-header {
    text-align: center;
    margin-bottom: 40px;
}

.hf-title {
    font-size: 28px;
    font-weight: 700;
    color: #3a3a3a;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.hf-intro {
    font-size: 16px;
    color: #6b6252;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
}

/* ---- Quiz-Fragen ---- */
.hf-questions {
    margin-bottom: 36px;
}

.hf-question {
    background: #fafaf7;
    border: 1px solid #e8e4dc;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 16px;
}

.hf-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.hf-axis-name {
    font-weight: 600;
    font-size: 15px;
    color: #6b6252;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hf-axis-value {
    font-weight: 700;
    font-size: 18px;
    color: #e8a426;
    min-width: 28px;
    text-align: center;
}

.hf-slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hf-label-min,
.hf-label-max {
    font-size: 13px;
    color: #999;
    font-weight: 500;
    min-width: 70px;
    flex-shrink: 0;
}

.hf-label-min {
    text-align: right;
}

.hf-label-max {
    text-align: left;
}

/* ---- Range Slider ---- */
.hf-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.hf-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e8a426;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.15s;
}

.hf-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.hf-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e8a426;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* ---- Toggle (Ja/Nein) ---- */
.hf-toggle-row {
    display: flex;
    gap: 12px;
}

.hf-toggle-btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #6b6252;
    background: #f5f2ec;
    border: 2px solid #e8e4dc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.hf-toggle-btn:hover {
    border-color: #d5cfc5;
    background: #edeae3;
}

.hf-toggle-btn.hf-toggle-active {
    color: #fff;
    background: #e8a426;
    border-color: #e8a426;
}

/* ---- Submit Button ---- */
.hf-submit-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.hf-submit-btn {
    display: inline-block;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #e8a426;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.3px;
}

.hf-submit-btn:hover {
    background: #d4931e;
    transform: translateY(-1px);
}

.hf-submit-btn:active {
    transform: translateY(0);
}

.hf-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ---- Ergebnisse ---- */
.hf-results {
    margin-top: 40px;
}

.hf-results-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #3a3a3a;
    margin-bottom: 28px;
}

/* ---- Karten-Basis ---- */
.hf-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    position: relative;
    transition: box-shadow 0.25s, transform 0.25s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

.hf-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

/* Platz-Badge */
.hf-rank {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #e8a426;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    text-align: center;
}

/* ---- Hauptkarte (Platz 1) ---- */
.hf-card-main {
    max-width: 480px;
    margin: 0 auto 28px;
    padding: 32px 28px;
}

.hf-card-main .hf-rank {
    width: 36px;
    height: 36px;
    line-height: 36px;
    top: -16px;
    font-size: 16px;
}

.hf-card-main .hf-card-img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    margin: 12px auto 16px;
    display: block;
}

.hf-card-main .hf-card-name {
    font-size: 18px;
}

.hf-card-main .hf-card-match {
    font-size: 15px;
    padding: 5px 14px;
}

/* ---- Alternativen (Platz 2+3) ---- */
.hf-alt-label {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #6b6252;
    margin: 8px 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.hf-card-alts {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
}

.hf-card-alt {
    flex: 1;
    padding: 18px 16px;
}

.hf-card-alt .hf-card-beschreibung {
    display: none;
}

/* ---- Standard Karten-Inhalte ---- */
.hf-card-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 8px auto 10px;
    display: block;
}

.hf-card-name {
    font-weight: 600;
    font-size: 15px;
    color: #3a3a3a;
    margin-bottom: 4px;
    line-height: 1.3;
}

.hf-card-price {
    font-size: 14px;
    color: #6b6252;
    margin-bottom: 8px;
}

.hf-card-match {
    display: inline-block;
    background: #e8e4dc;
    color: #6b6252;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.hf-card-match.hf-match-high {
    background: #c8e6c9;
    color: #558b2f;
}

.hf-card-beschreibung {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 14px;
    min-height: 40px;
}

/* ---- Buttons in Karten ---- */
.hf-cart-btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #e8a426;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-bottom: 6px;
    width: 100%;
}

.hf-cart-btn:hover {
    background: #d4931e;
    transform: translateY(-1px);
}

.hf-cart-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.hf-cart-btn.hf-btn-success {
    background: #7cb342;
    cursor: default;
}

.hf-probe-btn {
    display: inline-block;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #6b6252;
    background: transparent;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    width: 100%;
}

.hf-probe-btn:hover {
    background: #f5f2ec;
    border-color: #d5cfc5;
}

.hf-probe-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.hf-probe-btn.hf-btn-success {
    color: #558b2f;
    border-color: #c8e6c9;
    background: #f1f8e9;
    cursor: default;
}

/* ---- Retry ---- */
.hf-retry-wrap {
    text-align: center;
    margin-top: 24px;
}

.hf-retry-btn {
    display: inline-block;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 500;
    color: #6b6252;
    background: transparent;
    border: 1px solid #e8e4dc;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.hf-retry-btn:hover {
    background: #f5f2ec;
}

/* ---- Loading ---- */
.hf-loading {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 15px;
}

.hf-loading::before {
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    border: 3px solid #e8e4dc;
    border-top-color: #e8a426;
    border-radius: 50%;
    animation: hf-spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes hf-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Honigkompass — SEO-Landingpage
   ============================================================ */

/* ---- Wrapper ---- */
.hk-wrapper {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 20px;
    font-family: inherit;
    color: #3a3a3a;
}

/* ---- Hero ---- */
.hk-hero {
    text-align: center;
    margin-bottom: 48px;
}

.hk-hero h1 {
    font-size: 32px;
    font-weight: 700;
    color: #3a3a3a;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.hk-hero p {
    font-size: 16px;
    color: #6b6252;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* ---- USP Grid ---- */
.hk-usp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 16px;
}

.hk-usp-item {
    background: #fafaf7;
    border: 1px solid #e8e4dc;
    border-radius: 10px;
    padding: 28px 24px;
    text-align: center;
}

.hk-usp-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: #3a3a3a;
    margin-bottom: 8px;
}

.hk-usp-item p {
    font-size: 14px;
    color: #6b6252;
    line-height: 1.5;
    margin: 0;
}

/* ---- CTA Button ---- */
.hk-cta-wrap {
    text-align: center;
    margin: 40px 0;
}

.hk-cta {
    display: inline-block;
    padding: 16px 52px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: #e8a426;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.3px;
}

.hk-cta:hover {
    background: #d4931e;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.hk-cta:active {
    transform: translateY(0);
}

/* ---- FAQ Akkordeon ---- */
.hk-faq {
    margin-top: 48px;
}

.hk-faq h2 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #3a3a3a;
    margin-bottom: 24px;
}

.hk-faq-item {
    border-bottom: 1px solid #e8e4dc;
}

.hk-faq-item summary {
    font-weight: 600;
    font-size: 15px;
    color: #3a3a3a;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hk-faq-item summary::-webkit-details-marker {
    display: none;
}

.hk-faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: #999;
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.2s;
}

.hk-faq-item[open] summary::after {
    content: '−';
}

.hk-faq-item p {
    padding: 0 0 16px;
    margin: 0;
    font-size: 14px;
    color: #6b6252;
    line-height: 1.6;
}

/* ---- Outro ---- */
.hk-outro {
    text-align: center;
    margin-top: 48px;
    padding: 40px 28px;
    background: #fafaf7;
    border: 1px solid #e8e4dc;
    border-radius: 10px;
}

.hk-outro p {
    font-size: 16px;
    color: #6b6252;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Dekorative Elemente — Honig-Thema
   Wabenmuster, Honigtropfen, warme Verläufe, USP-Icons
   ============================================================ */

/* --- Subtiles Wabenmuster als Hintergrund --- */
.hf-wrapper,
.hk-wrapper {
    position: relative;
    overflow: hidden;
}

/* Wabenmuster auf dem Wrapper (wenn KEIN Hintergrundbild) */
.hf-wrapper::before,
.hk-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0 56 16V50zM28 100L0 84V50l28-16 28 16V84z' fill='none' stroke='%23e8a426' stroke-width='1' opacity='.06'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Wenn Hintergrundbild aktiv: Wabenmuster vom Wrapper entfernen (kommt vom bg-outer) */
.hf-bg-outer .hf-wrapper::before,
.hk-bg-outer .hk-wrapper::before {
    display: none;
}

.hf-wrapper > *,
.hk-wrapper > * {
    position: relative;
    z-index: 2;
}

/* EIN durchgehendes Wabenmuster über die gesamte Fläche (Bild + Content) */
/* z-index 1: über dem Bild, aber UNTER dem Wrapper (z-index 2) */
.hf-bg-outer::after,
.hk-bg-outer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0 56 16V50zM28 100L0 84V50l28-16 28 16V84z' fill='none' stroke='%23e8a426' stroke-width='1' opacity='.06'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* --- Honigfinder: Header-Dekoration --- */
.hf-header {
    background: linear-gradient(180deg, rgba(232,164,38,0.07) 0%, transparent 100%);
    border-radius: 16px;
    padding: 36px 24px 28px;
    margin-bottom: 36px;
}

/* Honigtropfen-Icon über dem Titel */
.hf-title::before {
    content: '';
    display: block;
    width: 36px;
    height: 42px;
    margin: 0 auto 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0S0 14 0 20a12 12 0 0024 0C24 14 12 0 12 0z' fill='%23e8a426' opacity='.8'/%3E%3Cellipse cx='8' cy='19' rx='3' ry='4' fill='%23fff' opacity='.25' transform='rotate(-15 8 19)'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Goldene Zierlinie unter dem Titel */
.hf-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e8a426, transparent);
    margin: 14px auto 0;
    border-radius: 2px;
}

/* --- Full-Width Hintergrundbild (links/rechts vom Content sichtbar) --- */
.hf-bg-outer,
.hk-bg-outer {
    /* Aus jedem Eltern-Container ausbrechen → volle Viewport-Breite */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    /* Grauer Streifen vom JTL-Container eliminieren */
    margin-top: -1px;
    padding-top: 1px;
    border: none;
    /* Bild füllt den gesamten Bereich */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f5f0e8;
}
/* Mittelteil: halbtransparenter Hintergrund — kein z-index! */
/* Dadurch scheint das Wabenmuster (bg-outer::after z-index 1) durch, */
/* aber Wrapper > * (z-index 2) liegt darüber. */
.hf-bg-outer .hf-wrapper,
.hk-bg-outer .hk-wrapper {
    background: rgba(255, 255, 255, 0.88);
}

/* Biene passt auch mit Bild — bleibt */

/* --- Honigfinder: Fragen-Bereich Akzent --- */
.hf-questions::before {
    content: '';
    position: absolute;
    top: 0;
    right: -40px;
    width: 80px;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 10L62 23v26L40 62 18 49V23z' fill='none' stroke='%23e8a426' stroke-width='1.5' opacity='.12'/%3E%3Cpath d='M40 20L52 27v14L40 48 28 41V27z' fill='none' stroke='%23e8a426' stroke-width='1' opacity='.08'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
}

.hf-questions {
    position: relative;
}

/* --- Ergebnis-Karten Glow --- */
.hf-card-main {
    border-color: rgba(232,164,38,0.3);
    box-shadow: 0 4px 24px rgba(232,164,38,0.1);
}

.hf-card-main:hover {
    box-shadow: 0 6px 32px rgba(232,164,38,0.16);
}

/* Ergebnis-Titel Dekoration */
.hf-results-title::before {
    content: '';
    display: block;
    width: 28px;
    height: 32px;
    margin: 0 auto 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0S0 14 0 20a12 12 0 0024 0C24 14 12 0 12 0z' fill='%23e8a426' opacity='.7'/%3E%3Cellipse cx='8' cy='19' rx='3' ry='4' fill='%23fff' opacity='.25' transform='rotate(-15 8 19)'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hf-results-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e8a426, transparent);
    margin: 12px auto 0;
    border-radius: 2px;
}

/* --- Link-Styling (Artikel-Links in Ergebnis-Karten) --- */
.hf-card-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.hf-card-name a:hover {
    color: #e8a426;
}

a.hf-cart-btn {
    text-decoration: none;
    text-align: center;
    display: block;
}

a.hf-cart-btn:hover {
    color: #fff;
}

/* ============================================================
   Honigkompass — Dekorative Elemente
   ============================================================ */

/* --- Hero: Warmer Verlauf + Honigtropfen --- */
.hk-hero {
    background: linear-gradient(180deg, rgba(232,164,38,0.07) 0%, rgba(232,164,38,0.02) 60%, transparent 100%);
    border-radius: 16px;
    padding: 48px 32px 40px;
}

.hk-hero h1::before {
    content: '';
    display: block;
    width: 44px;
    height: 52px;
    margin: 0 auto 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0S0 14 0 20a12 12 0 0024 0C24 14 12 0 12 0z' fill='%23e8a426' opacity='.85'/%3E%3Cellipse cx='8' cy='19' rx='3' ry='4' fill='%23fff' opacity='.3' transform='rotate(-15 8 19)'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hk-hero h1::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e8a426, transparent);
    margin: 16px auto 0;
    border-radius: 2px;
}

/* (Honigkompass bg-outer Styles oben definiert bei .hf-bg-outer) */

/* --- USP-Karten: Icons per nth-child --- */
.hk-usp-item {
    padding-top: 72px;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hk-usp-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(232,164,38,0.1);
}

.hk-usp-item::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
}

/* USP 1: Wabe (Geschmacksdimensionen) */
.hk-usp-item:nth-child(1)::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2L36 12v16L20 38 4 28V12z' fill='none' stroke='%23e8a426' stroke-width='2'/%3E%3Cpath d='M20 10L28 15v10L20 30 12 25V15z' fill='%23e8a426' opacity='.15'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23e8a426' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* USP 2: Zielscheibe (Persönliche Empfehlung) */
.hk-usp-item:nth-child(2)::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23e8a426' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='10' fill='none' stroke='%23e8a426' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='4' fill='%23e8a426' opacity='.7'/%3E%3Cpath d='M20 2v6M20 32v6M2 20h6M32 20h6' stroke='%23e8a426' stroke-width='1' opacity='.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* USP 3: Honigglas (Direkt vom Imker) */
.hk-usp-item:nth-child(3)::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Crect x='8' y='16' width='24' height='24' rx='4' fill='%23e8a426' opacity='.15' stroke='%23e8a426' stroke-width='1.5'/%3E%3Crect x='6' y='13' width='28' height='5' rx='2' fill='none' stroke='%23e8a426' stroke-width='1.5'/%3E%3Crect x='14' y='6' width='12' height='8' rx='3' fill='none' stroke='%23e8a426' stroke-width='1.5'/%3E%3Cpath d='M14 26h12M14 31h12' stroke='%23e8a426' stroke-width='1' opacity='.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- CTA-Button: Goldener Glow --- */
.hk-cta {
    box-shadow: 0 4px 20px rgba(232,164,38,0.3);
    position: relative;
}

.hk-cta:hover {
    box-shadow: 0 6px 28px rgba(232,164,38,0.4);
}

/* --- FAQ: Dekorative Linie + Wabe als Akzent --- */
.hk-faq {
    position: relative;
}

.hk-faq::before {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e8a426, transparent);
    margin: 0 auto 32px;
    border-radius: 2px;
}

.hk-faq h2::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L22 6.5v11L12 23 2 17.5v-11z' fill='none' stroke='%23e8a426' stroke-width='1.5'/%3E%3Cpath d='M12 6L17 9v6L12 18 7 15V9z' fill='%23e8a426' opacity='.2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- Outro: Warmer Akzent --- */
.hk-outro {
    position: relative;
    overflow: hidden;
}

.hk-outro::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10L80 27v34L50 78 20 61V27z' fill='none' stroke='%23e8a426' stroke-width='1' opacity='.1'/%3E%3Cpath d='M50 25L65 34v18L50 61 35 52V34z' fill='none' stroke='%23e8a426' stroke-width='1' opacity='.07'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

.hk-outro::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0S0 14 0 20a12 12 0 0024 0C24 14 12 0 12 0z' fill='%23e8a426' opacity='.06'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

.hk-outro > * {
    position: relative;
    z-index: 1;
}

/* --- Dekorative Biene (schwebt rechts oben im Honigfinder) --- */
.hf-header::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 16px;
    width: 48px;
    height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cellipse cx='30' cy='32' rx='12' ry='14' fill='%23e8a426' opacity='.8'/%3E%3Cpath d='M18 27h24M18 33h24M18 39h24' stroke='%23705a2e' stroke-width='2' opacity='.25'/%3E%3Ccircle cx='30' cy='16' r='7' fill='%23705a2e' opacity='.5'/%3E%3Cellipse cx='18' cy='18' rx='9' ry='5' fill='%23e8a426' opacity='.18' transform='rotate(-25 18 18)'/%3E%3Cellipse cx='42' cy='18' rx='9' ry='5' fill='%23e8a426' opacity='.18' transform='rotate(25 42 18)'/%3E%3Cpath d='M26 10Q22 2 18 4M34 10Q38 2 42 4' fill='none' stroke='%23705a2e' stroke-width='1.2' opacity='.35'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
    opacity: 0.7;
}

/* Header needs relative for bee positioning */
.hf-header {
    position: relative;
    overflow: hidden;
}

/* ---- Responsive ---- */
@media (max-width: 576px) {
    /* Quiz */
    .hf-wrapper {
        padding: 24px 16px;
    }

    .hf-title {
        font-size: 22px;
    }

    .hf-question {
        padding: 18px 16px;
    }

    .hf-slider-row {
        gap: 8px;
    }

    .hf-label-min,
    .hf-label-max {
        font-size: 11px;
        min-width: 48px;
    }

    .hf-submit-btn {
        width: 100%;
        padding: 14px 24px;
    }

    /* Ergebnisse */
    .hf-card-main .hf-card-img {
        width: 120px;
        height: 120px;
    }

    .hf-card-alts {
        flex-direction: column;
        gap: 12px;
    }

    /* Kompass */
    .hk-wrapper {
        padding: 32px 16px;
    }

    .hk-hero h1 {
        font-size: 24px;
    }

    .hk-usp-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hk-cta {
        width: 100%;
        padding: 14px 24px;
        box-sizing: border-box;
    }

    .hk-outro {
        padding: 28px 20px;
    }

    /* Dekorative Elemente responsive */
    .hf-header::after {
        width: 36px;
        height: 32px;
        top: 8px;
        right: 8px;
        opacity: 0.5;
    }

    .hf-questions::before {
        display: none;
    }

    .hk-hero {
        padding: 32px 20px 28px;
    }

    .hk-usp-item {
        padding-top: 64px;
    }

    .hk-usp-item::before {
        width: 34px;
        height: 34px;
        top: 18px;
    }

    .hk-outro::before,
    .hk-outro::after {
        display: none;
    }

    /* Hintergrundbilder responsive */
    .hf-bg-outer,
    .hk-bg-outer {
        background-position: top center;
    }
}