/* =====================================================================
   GramschDesign – Modern Design Layer  (gramsch-modern.css)
   Wird zusätzlich nach style.min.css geladen. Überschreibt gezielt,
   ohne die Grundstruktur des Templates anzutasten.  © 2026
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Rubik:wght@300;400;500;600;700&display=swap');

:root {
    --gd-primary:      #cf8253;   /* warmes Holz / Terrakotta            */
    --gd-primary-dark: #b06536;
    --gd-accent:       #eaaa85;   /* bestehender Marken-Ton              */
    --gd-gold:         #c9a227;
    --gd-ink:          #2a2420;   /* tiefes warmes Anthrazit (Headings)  */
    --gd-body:         #5c544c;
    --gd-cream:        #faf6f1;   /* warmes Off-White                    */
    --gd-cream-2:      #f3ebe2;
    --gd-line:         rgba(42,36,32,.10);
    --gd-shadow:       0 18px 45px -22px rgba(42,36,32,.45);
    --gd-shadow-sm:    0 8px 22px -14px rgba(42,36,32,.35);
    --gd-serif:        'Cormorant Garamond', Georgia, serif;
    --gd-display:      'DreamSparks', 'Cormorant Garamond', Georgia, serif;  /* Marken-Display-Schrift */
    --gd-ease:         cubic-bezier(.22,.61,.36,1);
}

/* ---------- Marken-Schriftart „DreamSparks" (Corporate Design) ----------
   Gehört fest zur Marke GramschDesign. Hier site-weit eingebunden. */
@font-face {
    font-family: 'DreamSparks';
    src: url('../fonts/DreamSparks-Regular.woff2') format('woff2'),
         url('../fonts/DreamSparks-Regular.woff')  format('woff'),
         url('../fonts/DreamSparks-Regular.ttf')   format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'DreamSparks Outline';
    src: url('../fonts/DreamSparks-Outline.woff2') format('woff2'),
         url('../fonts/DreamSparks-Outline.woff')  format('woff'),
         url('../fonts/DreamSparks-Outline.ttf')   format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'DreamSparks Shiny';
    src: url('../fonts/DreamSparks-Shiny.woff2') format('woff2'),
         url('../fonts/DreamSparks-Shiny.woff')  format('woff'),
         url('../fonts/DreamSparks-Shiny.ttf')   format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'DreamSparks Contour';
    src: url('../fonts/DreamSparks-Contour.woff2') format('woff2'),
         url('../fonts/DreamSparks-Contour.woff')  format('woff'),
         url('../fonts/DreamSparks-Contour.ttf')   format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'DreamSparks Shadow';
    src: url('../fonts/DreamSparks-Shadow01.woff2') format('woff2'),
         url('../fonts/DreamSparks-Shadow01.woff')  format('woff'),
         url('../fonts/DreamSparks-Shadow01.ttf')   format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}

/* Marken-Schrift-Hilfsklassen (überall einsetzbar) */
.custom-font,
.gd-brand-font   { font-family: var(--gd-display) !important; letter-spacing: .5px; }
.ds-outline      { font-family: 'DreamSparks Outline', var(--gd-display) !important; }
.ds-shiny        { font-family: 'DreamSparks Shiny',   var(--gd-display) !important; }
.ds-contour      { font-family: 'DreamSparks Contour', var(--gd-display) !important; }
.ds-shadow       { font-family: 'DreamSparks Shadow',  var(--gd-display) !important; }

/* ---------- Bootstrap-Blau auf Markenfarbe umstellen (Corporate Design) ----------
   Bootstrap 5 nutzt #0d6efd (Blau) für Links, Formular-Fokus, Checkboxen usw.
   Hier komplett auf das warme Holz-/Logo-Farbschema umgestellt. */
:root {
    --bs-primary: #cf8253;
    --bs-primary-rgb: 207,130,83;
    --bs-link-color: #b06536;
    --bs-link-color-rgb: 176,101,54;
    --bs-link-hover-color: #cf8253;
    --bs-link-hover-color-rgb: 207,130,83;
    --bs-focus-ring-color: rgba(207,130,83,.25);
}
a { color: var(--gd-primary-dark); }
a:hover { color: var(--gd-primary); }
.main-menu ul li a, .footer-links .single-link, .offcanvas-menu a { color: inherit; }

/* Formularfelder: kein blauer Fokus mehr */
.form-control:focus,
.form-select:focus,
input:focus, textarea:focus, select:focus,
.news-letter-form input.email:focus {
    border-color: var(--gd-primary) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .2rem rgba(207,130,83,.22) !important;
}
/* Checkboxen / Radios / Slider */
.form-check-input:checked { background-color: var(--gd-primary) !important; border-color: var(--gd-primary) !important; }
.form-check-input:focus { border-color: var(--gd-primary) !important; box-shadow: 0 0 0 .2rem rgba(207,130,83,.22) !important; }
input[type=checkbox], input[type=radio], input[type=range], select, textarea, input { accent-color: var(--gd-primary); }
.btn-link, .page-link { color: var(--gd-primary-dark); }
.page-item.active .page-link { background-color: var(--gd-primary); border-color: var(--gd-primary); }

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
body { color: var(--gd-body); background: var(--gd-cream); -webkit-font-smoothing: antialiased; }
::selection { background: var(--gd-primary); color: #fff; }
a { transition: color .3s var(--gd-ease); }
img { max-width: 100%; }

h1,h2,h3,h4,h5,.title { color: var(--gd-ink); }

/* Marken-Display-Schrift (DreamSparks) für große Überschriften */
.section-title .title,
.hero-headline,
.banner-content .title,
.banner-area-3 .title,
.banner-area-3 .category {
    font-family: var(--gd-display);
    font-weight: 400;
    letter-spacing: .5px;
    line-height: 1.18;
}

/* ---------- Buttons ---------- */
.btn-primary,
.shop-link.btn,
.news-letter-form .button,
.gd-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    min-width: 170px;
    height: auto !important;
    padding: 15px 34px !important;
    background: var(--gd-primary) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: 'Rubik', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow: 0 12px 26px -14px rgba(176,101,54,.9);
    transition: transform .35s var(--gd-ease), box-shadow .35s var(--gd-ease), background .35s var(--gd-ease);
}
.btn-primary:hover,
.shop-link.btn:hover,
.news-letter-form .button:hover,
.gd-btn:hover {
    background: var(--gd-primary-dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 20px 34px -16px rgba(176,101,54,1);
    color: #fff !important;
}
.gd-btn--ghost {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.7) !important;
    box-shadow: none;
}
.gd-btn--ghost:hover { background: rgba(255,255,255,.14) !important; border-color:#fff !important; }

/* ---------- Header / Navigation ---------- */
.header-main.sticky-nav {
    background: rgba(250,246,241,.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--gd-line);
    transition: box-shadow .4s var(--gd-ease), background .4s var(--gd-ease), padding .4s var(--gd-ease);
}
.header-main.sticky-nav.gd-scrolled {
    box-shadow: 0 10px 30px -18px rgba(42,36,32,.5);
    background: rgba(250,246,241,.95);
}
.header-logo img { transition: transform .4s var(--gd-ease); }
.header-logo img:hover { transform: scale(1.04); }

.main-menu ul li a {
    position: relative;
    font-weight: 500;
    letter-spacing: .3px;
    color: var(--gd-ink);
}
.main-menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 6px;
    width: 100%; height: 2px;
    background: var(--gd-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--gd-ease);
}
.main-menu > ul > li:hover > a::after { transform: scaleX(1); transform-origin: left; }
.main-menu > ul > li:hover > a { color: var(--gd-primary); }

/* ---------- Hero ---------- */
.slider-banner { background: linear-gradient(180deg,var(--gd-cream) 0%, var(--gd-cream-2) 100%); }
.hero-slide-item {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--gd-shadow);
}
.hero-slide-item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(20,14,10,.55) 0%, rgba(20,14,10,.15) 45%, rgba(20,14,10,0) 70%);
    pointer-events: none;
    z-index: 1;
}
.hero-slide-content { position: relative; z-index: 2; max-width: 560px; }
.hero-eyebrow {
    display: inline-block;
    font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
    color: #fff; background: rgba(207,130,83,.92);
    padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
}
.hero-headline { font-size: clamp(34px, 4vw, 58px); color:#fff; margin: 0 0 14px; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-sub { color: rgba(255,255,255,.92); font-size: 17px; max-width: 430px; margin-bottom: 28px; text-shadow:0 1px 10px rgba(0,0,0,.4); }

/* Seiten-Banner (Gutschein / Spielideen) */
.single-banner { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--gd-shadow-sm); }
.single-banner img { transition: transform .8s var(--gd-ease); width:100%; }
.single-banner:hover img { transform: scale(1.06); }
.single-banner .banner-content { z-index: 2; }
.single-banner .banner-content .category { color: var(--gd-primary); font-weight:600; letter-spacing:1.5px; }

/* ---------- Feature-Bereich ---------- */
.feature-area .feature-wrapper {
    background: #fff;
    border: 1px solid var(--gd-line);
    border-radius: 20px;
    box-shadow: var(--gd-shadow-sm);
    padding: 18px 10px;
}
.single-feature { transition: transform .4s var(--gd-ease); padding: 14px 18px; border-radius: 16px; }
.single-feature:hover { transform: translateY(-4px); background: var(--gd-cream); }
.single-feature .feature-icon img { transition: transform .5s var(--gd-ease); }
.single-feature:hover .feature-icon img { transform: scale(1.12) rotate(-3deg); }
.feature-content .title { font-weight: 600; }

/* ---------- Abschnittstitel ---------- */
.section-title .title { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 14px; position: relative; }
.section-title.text-center .title::after {
    content: "";
    display: block;
    width: 64px; height: 3px;
    margin: 16px auto 0;
    background: linear-gradient(90deg, var(--gd-accent), var(--gd-primary));
    border-radius: 3px;
}
.section-title p { color: var(--gd-body); font-size: 16.5px; max-width: 640px; margin: 0 auto; }

/* ---------- Produktkarten ---------- */
.product {
    background: #fff;
    border: 1px solid var(--gd-line);
    border-radius: 18px;
    padding: 14px;
    overflow: hidden;
    transition: transform .45s var(--gd-ease), box-shadow .45s var(--gd-ease), border-color .45s var(--gd-ease);
}
.product:hover {
    transform: translateY(-10px);
    box-shadow: var(--gd-shadow);
    border-color: rgba(207,130,83,.45);
}
.product .thumb { border-radius: 14px; overflow: hidden; background: var(--gd-cream); }
.product .thumb img { transition: transform .7s var(--gd-ease); }
.product:hover .thumb img { transform: scale(1.07); }
.product .content { padding-top: 16px; }
.product .title a { font-weight: 600; color: var(--gd-ink); transition: color .3s var(--gd-ease); }
.product:hover .title a { color: var(--gd-primary); }

.badges .new, .badges span {
    background: var(--gd-ink) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 5px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* "Preis auf Anfrage" als elegantes Tag */
.price .new,
.new-price {
    display: inline-block;
    color: var(--gd-primary-dark) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: .3px;
}
.price .new::before { content: "\2014  "; color: var(--gd-accent); }

.ratings .star { background-image: none; }
.rating-num { color: var(--gd-body); font-size: 13px; }

/* ---------- Bild-Banner-Bereich (Idee/Medien) ---------- */
.banner-area-3 .single-banner { border-radius: 20px; }
.banner-area-3 .banner-title .title,
.banner-area-3 .banner-title .category { text-shadow: 0 2px 16px rgba(0,0,0,.45); }

/* ---------- Newsletter ---------- */
.newsletter-area {
    background: linear-gradient(120deg, var(--gd-ink) 0%, #3c322b 100%);
    border-radius: 26px;
    margin: 40px auto;
    padding: 18px 10px;
    color: #fff;
}
.newsletter-area .title, .newsletter-content i { color: #fff !important; }
.newsletter-content p { color: rgba(255,255,255,.78); }
.news-letter-form .mc-form { background:#fff; border-radius:999px; padding:6px; display:flex; gap:6px; box-shadow: var(--gd-shadow-sm); }
.news-letter-form input.email { border:none !important; background:transparent !important; padding-left:22px !important; flex:1; }
.news-letter-form .clear { margin:0; }

/* ---------- Footer ---------- */
.footer-area { background: var(--gd-ink); color: rgba(255,255,255,.72); }
.footer-herading { color:#fff !important; font-weight:600; letter-spacing:.4px; }
.footer-links .single-link { color: rgba(255,255,255,.72) !important; transition: color .3s var(--gd-ease), padding-left .3s var(--gd-ease); }
.footer-links .single-link:hover { color: var(--gd-accent) !important; padding-left: 6px; }
.footer-area a.company-name { color: var(--gd-accent); }
.footer-area .mail a { color: var(--gd-accent); }

/* ---------- Scroll-Reveal-Animation ---------- */
.gd-reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--gd-ease), transform .8s var(--gd-ease); will-change: opacity, transform; }
.gd-reveal.gd-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .gd-reveal { opacity: 1 !important; transform: none !important; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Zurück-nach-oben ---------- */
#gd-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 999;
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gd-primary); color:#fff; border:none; cursor:pointer;
    opacity: 0; pointer-events: none; transform: translateY(14px);
    box-shadow: 0 14px 28px -12px rgba(176,101,54,.9);
    transition: opacity .4s var(--gd-ease), transform .4s var(--gd-ease), background .3s;
}
#gd-top.gd-show { opacity: 1; pointer-events:auto; transform: none; }
#gd-top:hover { background: var(--gd-primary-dark); }

/* ---------- Feinschliff Responsive ---------- */
@media (max-width: 991px) {
    .newsletter-area { border-radius: 18px; }
    .hero-headline { font-size: clamp(28px, 7vw, 40px); }
    .hero-slide-content { padding-left: 26px !important; padding-right: 20px; }
}
@media (max-width: 575px) {
    .hero-slide-content .hero-sub { display: none; }
    .hero-eyebrow { font-size: 11px; padding: 5px 12px; margin-bottom: 12px; }
    .hero-headline { font-size: 26px; margin-bottom: 16px; }
    .hero-slide-content .gd-btn { min-width: 0; padding: 11px 22px !important; font-size: 12px !important; }
}

/* =====================================================================
   Header-Stacking + Mega-Menü „Unsere Kreationen" (perfekt nach vorne)
   ===================================================================== */
header { position: relative; z-index: 1000; }
.header-main.sticky-nav { position: relative; z-index: 1000; }
.header-main.sticky-nav.menu_fixed { z-index: 1000 !important; }
.mega-menu, .dropdown ul.sub-menu, .main-menu ul li ul { z-index: 1001 !important; }
.slider-banner, .feature-area, .product-area { position: relative; z-index: 1; }

/* Mega-Menü-Politur */
.mega-menu {
    padding: 36px 34px !important;
    border-radius: 0 0 20px 20px;
    border-top: 3px solid var(--gd-primary);
    box-shadow: 0 30px 60px -28px rgba(42,36,32,.45) !important;
}
.mega-menu li ul { border-right: 1px solid var(--gd-line) !important; margin-right: 28px !important; }
.mega-menu li ul li.title a {
    color: var(--gd-ink) !important;
    font-family: var(--gd-display);
    font-size: 20px !important;
    margin-bottom: 16px !important;
}
.mega-menu li ul li.title a:hover { color: var(--gd-primary) !important; }
.mega-menu li ul li:not(.title) a {
    position: relative; color: var(--gd-body) !important; font-weight: 500;
    padding: 5px 0 5px 0 !important; transition: color .25s var(--gd-ease), padding-left .25s var(--gd-ease);
}
.mega-menu li ul li:not(.title) a:hover { color: var(--gd-primary) !important; padding-left: 8px !important; }
.mega-menu li ul li:not(.title) a::before {
    content: "\203A"; color: var(--gd-accent); margin-right: 8px; opacity: 0;
    transition: opacity .25s var(--gd-ease);
}
.mega-menu li ul li:not(.title) a:hover::before { opacity: 1; }
/* Promo-Spalte (Bild) als Card */
.mega-menu .d-flex > ul:last-child { border: 0 !important; margin-right: 0 !important; }
.mega-menu .d-flex > ul:last-child a { display:block; border-radius: 16px; overflow: hidden; box-shadow: var(--gd-shadow-sm); }
.mega-menu .d-flex > ul:last-child img { transition: transform .7s var(--gd-ease); }
.mega-menu .d-flex > ul:last-child a:hover img { transform: scale(1.07); }

/* =====================================================================
   Barrierefrei verstecken (SEO-Text im Hero, Bild trägt die Aussage)
   ===================================================================== */
.sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* =====================================================================
   Marketing-CTA-Band (Lead-Generierung -> Anfrageformular)
   ===================================================================== */
.gd-cta {
    position: relative; overflow: hidden;
    margin: 100px auto 0;
    border-radius: 26px;
    background:
        linear-gradient(115deg, rgba(42,36,32,.86) 0%, rgba(60,50,43,.72) 55%, rgba(176,101,54,.55) 100%),
        url('../images/woodman.png') center/cover no-repeat;
    color: #fff;
    padding: 64px 50px;
    text-align: center;
    box-shadow: var(--gd-shadow);
}
.gd-cta .gd-cta-eyebrow {
    display:inline-block; letter-spacing: 3px; text-transform: uppercase; font-size: 12.5px; font-weight: 600;
    color: var(--gd-accent); margin-bottom: 14px;
}
.gd-cta h2 {
    font-family: var(--gd-display); color:#fff; font-weight: 400;
    font-size: clamp(30px, 4vw, 50px); line-height: 1.12; margin: 0 0 14px;
}
.gd-cta p { color: rgba(255,255,255,.9); max-width: 620px; margin: 0 auto 30px; font-size: 17px; }
.gd-cta .gd-cta-actions { display:flex; gap: 16px; justify-content:center; flex-wrap: wrap; }
@media (max-width: 767px) { .gd-cta { padding: 46px 22px; border-radius: 18px; margin-top: 70px; } }