/* ==========================================================
   MEINE-FEDER.DE – CUSTOM THEME v1.0
   Basis: NOVAChild / Theme my-nova
   ========================================================== */

:root {
    --mf-gold: #ffb300;
    --mf-gold-hover: #ffc13d;
    --mf-gold-soft: rgba(255, 179, 0, 0.12);
    --mf-white: #ffffff;
    --mf-gray-50: #fafafa;
    --mf-gray-100: #f4f4f4;
    --mf-gray-200: #e4e4e4;
    --mf-gray-300: #cccccc;
    --mf-gray-500: #777777;
    --mf-gray-700: #5e5e5e;
    --mf-gray-800: #4e4d4d;
    --mf-gray-900: #2f2f2f;
    --mf-text: var(--mf-gray-800);
    --mf-text-muted: #6d6d6d;
    --mf-font-body: "Poppins", Arial, sans-serif;
    --mf-font-heading: "Kaushan Script", cursive;
    --mf-font-script: "Lobster Two", cursive;
    --mf-radius-small: 0.3rem;
    --mf-radius: 0.55rem;
    --mf-radius-large: 0.8rem;
    --mf-shadow-small: 0 4px 14px rgba(0, 0, 0, 0.06);
    --mf-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    --mf-transition: 0.2s ease;
}

@font-face {
    font-family: "Kaushan Script";
    src:
        url("../base/fonts/KaushanScript-Regular/KaushanScript-Regular.woff2") format("woff2"),
        url("../base/fonts/KaushanScript-Regular/KaushanScript-Regular.woff") format("woff"),
        url("../base/fonts/KaushanScript-Regular/KaushanScript-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lobster Two";
    src:
        url("../base/fonts/lobstertwo/LobsterTwo.woff2") format("woff2"),
        url("../base/fonts/lobstertwo/LobsterTwo.woff") format("woff"),
        url("../base/fonts/lobstertwo/LobsterTwo.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html { font-size: 16px; }

body {
    color: var(--mf-text);
    font-family: var(--mf-font-body);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.65;
    background-color: var(--mf-white);
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.7;
}

p info {
    color: var(--mf-gray-50);

}


body h1,
body .h1 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--mf-gray-800);
    font-family: var(--mf-font-heading) !important;
    font-size: clamp(2.35rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}

body h2,
body h3,
body h4,
body h5,
body h6,
body .h2,
body .h3,
body .h4,
body .h5,
body .h6,
body .product-matrix .product-matrix-title,
body .sidepanel-left .box-normal .box-normal-link {
    color: var(--mf-gray-800);
    font-family: var(--mf-font-body) !important;
    font-weight: 400;
    line-height: 1.3;
}

body h2,
body .h2 {
    margin-top: 2.0rem;
    margin-bottom: 1rem;
    font-size: clamp(1.65rem, 2.1vw, 2.25rem);
}

body h3,
body .h3 {
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    font-size: 1.25rem;
}

body h4,
body .h4 {
    margin-top: 0.5rem;
    margin-bottom: 0.7rem;
    font-size: 1.05rem;
}

small,
.small {
    color: var(--mf-text-muted);
    font-size: 0.82rem;
}

.hero-title,
.highlight-title,
.unikat-title {
    font-family: var(--mf-font-script);
    font-weight: 400;
    letter-spacing: 0;
}

a {
    color: var(--mf-text);
    text-decoration-color: rgba(255, 179, 0, 0.55);
    text-underline-offset: 0.18em;
    transition: color var(--mf-transition), text-decoration-color var(--mf-transition);
}

a:hover,
a:focus {
    color: var(--mf-gold);
    text-decoration-color: var(--mf-gold);
}

#main-wrapper { background-color: var(--mf-white); }
#content-wrapper { padding-top: 2.5rem; }
#content { padding-bottom: 4rem; }
.container,
.container-fluid-xl { width: 100%; }
hr { border: 0; border-top: 1px solid var(--mf-gray-200); }

.breadcrumb-wrapper {
    margin-bottom: 2rem;
    padding: 0.7rem 0;
    border-top: 0;
    border-bottom: 1px solid var(--mf-gray-200);
}

.breadcrumb { padding: 0; font-size: 0.78rem; }
.breadcrumb a { color: var(--mf-text-muted); text-decoration: none; }
.breadcrumb a:hover,
.breadcrumb a:focus { color: var(--mf-gold); }
.breadcrumb-item.active { color: var(--mf-gray-900); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--mf-gray-500); }

.btn {
    min-height: 42px;
    padding: 0.7rem 1.15rem;
    border-radius: var(--mf-radius-small);
    font-family: var(--mf-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    transition: color var(--mf-transition), background-color var(--mf-transition), border-color var(--mf-transition), transform var(--mf-transition);
}

.btn-primary,
.btn-secondary {
    border-color: var(--mf-gold);
    background-color: var(--mf-gold);
    color: var(--mf-gray-900);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    border-color: var(--mf-gold-hover);
    background-color: var(--mf-gold-hover);
    color: var(--mf-gray-900);
    transform: translateY(-1px);
}

.btn-outline-primary,
.btn-outline-secondary {
    border-color: var(--mf-gold);
    background-color: transparent;
    color: var(--mf-gold);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    border-color: var(--mf-gold);
    background-color: var(--mf-gold);
    color: var(--mf-gray-900);
}

.form-control,
.custom-select,
select {
    min-height: 42px;
    border: 1px solid var(--mf-gray-300);
    border-radius: var(--mf-radius-small);
    background-color: var(--mf-white);
    color: var(--mf-text);
    font-family: var(--mf-font-body);
    font-size: 0.88rem;
}

.form-control:focus,
.custom-select:focus,
select:focus {
    border-color: var(--mf-gold);
    box-shadow: 0 0 0 0.15rem var(--mf-gold-soft);
}

.cart-urgency {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--mf-gray-200);
    border-left: 4px solid var(--mf-gold);
    border-radius: var(--mf-radius);
    background: linear-gradient(135deg, rgba(255, 179, 0, 0.11), rgba(255, 255, 255, 0.035));
    box-shadow: var(--mf-shadow-small);
}

.cart-urgency__icon {
    display: flex;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--mf-gold-soft);
    color: var(--mf-gold);
    font-size: 1.2rem;
}

.cart-urgency__content { flex: 1 1 auto; min-width: 0; }
.cart-urgency__topline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.cart-urgency__title { color: var(--mf-gray-800); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.cart-urgency__badge { display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--mf-gold); color: var(--mf-gray-900); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.025em; line-height: 1; text-transform: uppercase; }
.cart-urgency__text { max-width: 54rem; margin: 0 0 0.75rem; color: var(--mf-gray-800); font-size: 0.9rem; line-height: 1.55; }
.cart-urgency__timer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.cart-urgency__timer-label { font-size: 0.85rem; font-weight: 500; }
.cart-urgency__time { display: inline-block; min-width: 3.6rem; color: var(--mf-gold); font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; }
.cart-urgency__expired { color: var(--mf-gold); font-size: 0.85rem; font-weight: 600; }
.cart-urgency__progress { width: 100%; height: 3px; margin-top: 0.8rem; overflow: hidden; border-radius: 999px; background: var(--mf-gray-200); }
.cart-urgency__progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--mf-gold); transform: scaleX(1); transform-origin: left center; transition: transform 1s linear; }
.cart-urgency__benefits { display: flex; flex-wrap: wrap; gap: 0.45rem 1.2rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.cart-urgency__benefits li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; opacity: 0.85; }
.cart-urgency__benefits i { color: var(--mf-gold); font-size: 0.7rem; }
.cart-urgency.is-expired { border-left-color: var(--mf-gray-300); }
.cart-urgency.is-expired .cart-urgency__icon { background: var(--mf-gray-100); color: var(--mf-gray-500); }
.cart-urgency.is-expired .cart-urgency__progress { display: none; }

@media (max-width: 575.98px) {
    body h1,
    body .h1 { font-size: 2.35rem; }

    body h2,
    body .h2 { margin-top: 2.25rem; font-size: 1.55rem; }

    #content-wrapper { padding-top: 1.5rem; }

    .cart-urgency { gap: 0.75rem; padding: 1rem; }
    .cart-urgency__icon { flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem; font-size: 1rem; }
    .cart-urgency__topline { align-items: flex-start; }
    .cart-urgency__timer { display: block; }
    .cart-urgency__time { margin-left: 0.2rem; }
    .cart-urgency__benefits { display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

#footer .newsletter-footer {
  color: white;}

header .navbar-brand img {
  height: 5rem;
  width: auto;
}

/* ==========================================================
   FAQ – Überschriftenfarben korrigieren
   ========================================================== */

body .mf-faq h1,
body .mf-faq .h1 {
    color: var(--mf-gray-800) !important;
    font-family: var(--mf-font-heading) !important;
    font-weight: 400;
padding: 10px;
}

body .mf-faq h2,
body .mf-faq .h2,
body .mf-faq h3,
body .mf-faq .h3 {
    color: var(--mf-gray-800) !important;
    font-family: var(--mf-font-body) !important;
    font-weight: 600;
padding: 10px;
}


.mf-faq__intro {
    color: var(--mf-gray-800) !important;
    background-color: var(--mf-gray-100);
    border-left: 4px solid var(--mf-gold);
	padding: 10px;
}


/* ==========================================================
   Mobile Logo
   ========================================================== */

@media (max-width: 991.98px) {

    .navbar-brand img,
    #logo img,
    .logo img {
        max-height: 52px !important;
        width: auto;
        transition: all .2s ease;
    }

    .navbar-brand {
        padding-top: .4rem;
        padding-bottom: .4rem;
    }

    .navbar {
        min-height: 12px;
    }

}