/* =========================================================
   KNOTFATHER – FINAL BRAND CSS (LOGO MATCH)
   ========================================================= */

/* =========================
   VARIABLES
   ========================= */
:root {
    /* LOGO / BRAND */
    --brand-gold: #fdc564;        /* exakt Logohintergrund */
    --brand-gold-dark: #e6b455;

    /* NEUTRALS */
    --ink: #121212;
    --ink-soft: #2a2a2a;
    --light-bg: #fbf6ee;
    --white: #ffffff;

    /* UI */
    --radius: 14px;
    --shadow-soft: 0 6px 16px rgba(18,18,18,.08);
    --shadow: 0 12px 28px rgba(18,18,18,.12);
}

/* =========================
   GLOBAL
   ========================= */
body {
    font-family: "Georgia", "Times New Roman", serif;
    background-color: var(--light-bg);
    color: var(--ink);
}

a {
    color: var(--ink);
    text-decoration: none;
}

a:hover {
    color: var(--ink-soft);
}

/* =========================
   HEADER / NAVBAR
   ========================= */
.navbar {
    background: var(--brand-gold) !important;
    border-bottom: 4px solid rgba(18,18,18,.25);
    box-shadow: var(--shadow);
    padding: 14px 0;
}

/* Logo exakt wie Header (keine Kachel, kein Kontrastbruch) */
.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    max-height: 72px;
    width: auto;
    display: block;
    background: transparent;
}

/* Navigation */
.navbar-nav .nav-link {
    color: var(--ink) !important;
    font-weight: 700;
    margin-right: 18px;
    opacity: .9;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* Aktiver Menüpunkt */
.navbar-nav .nav-link.active {
    opacity: 1;
    text-decoration: underline;
}

/* Account / Button → SCHWARZ statt Rot */
.navbar .btn,
.navbar .btn-primary {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 800;
    padding: 6px 20px;
    box-shadow: 0 8px 18px rgba(18,18,18,.25);
}

.navbar .btn:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* Mobile Toggler */
.navbar-toggler {
    border-color: rgba(18,18,18,.5);
}

.navbar-toggler-icon {
    filter: invert(1);
}

/* =========================
   HERO
   ========================= */
.hero {
    background: #eceff1;
    text-align: center;
    padding: 80px 20px;
}

.hero h1 {
    font-size: 2.6rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.hero p {
    color: rgba(18,18,18,.7);
    margin-bottom: 22px;
}

/* CTA Button im Hero → Schwarz */
.hero .btn,
.hero .btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 800;
}

.hero .btn:hover {
    background: #000;
}

/* =========================
   BUTTONS (GLOBAL)
   ========================= */
.btn-primary {
    background-color: var(--ink);
    border-color: var(--ink);
    font-weight: 800;
}

.btn-primary:hover {
    background-color: #000;
    border-color: #000;
}

/* Optional: dezenter Gold-Button */
.btn-gold {
    background: var(--brand-gold);
    border: 1px solid var(--brand-gold-dark);
    color: var(--ink);
    border-radius: 999px;
    font-weight: 800;
}

.btn-gold:hover {
    background: var(--brand-gold-dark);
}

/* =========================
   PRODUCT CARDS
   ========================= */
.card,
.product-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid rgba(18,18,18,.1);
    box-shadow: var(--shadow-soft);
    transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover,
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.card-img-top {
    width: 55%;
    margin: 18px auto;
    display: block;
}

/* Preis / Highlight → Schwarz + Gold */
.price,
.product-price span {
    background: rgba(253,197,100,.6);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 900;
    color: var(--ink);
}

/* =========================
   PROGRESS BAR
   ========================= */
ul.progressbar {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 30px;
    list-style: none;
}

ul.progressbar li {
    width: 30%;
    position: relative;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(18,18,18,.2);
    color: rgba(18,18,18,.7);
}

ul.progressbar li::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(18,18,18,.3);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

ul.progressbar li.active {
    color: var(--ink);
    border-bottom: 3px solid var(--ink);
    font-weight: 800;
}

ul.progressbar li.active::before {
    background-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(253,197,100,.45);
}

/* =========================
   DASHBOARD / ACCOUNT
   ========================= */
.avatar-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile {
    background: var(--white);
    border-radius: var(--radius);
}

.tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(253,197,100,.45);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   ORDERS
   ========================= */
.orders .order-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   FOOTER
   ========================= */
.bg-dark {
    background-color: var(--ink) !important;
    border-top: 5px solid var(--brand-gold);
}

footer {
    color: #fff;
}

.footer-link {
    color: #fff !important;
}

.footer-link:hover {
    color: var(--brand-gold) !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }

    .hero h1 {
        font-size: 2rem;
    }
}