/* =====================================================================
   Nürnberger Spielzeugkiste – FSE Theme CSS
   Basiert auf dem Website-Dummy Design-System.
   ===================================================================== */

:root {
    --sk-bg:          var(--wp--preset--color--cream-bg,    #f3ead2);
    --sk-bg-soft:     var(--wp--preset--color--cream-soft,  #efe4c6);
    --sk-card:        var(--wp--preset--color--gold,        #f2d886);
    --sk-card-hi:     var(--wp--preset--color--gold-light,  #f7e3a0);
    --sk-tile:        var(--wp--preset--color--tile,        #fffdf7);
    --sk-brown:       var(--wp--preset--color--brown,       #4a3218);
    --sk-brown-soft:  var(--wp--preset--color--brown-soft,  #6b4e2e);
    --sk-orange:      var(--wp--preset--color--orange,      #e89a1c);
    --sk-orange-deep: var(--wp--preset--color--orange-deep, #d98415);
    --sk-green:       var(--wp--preset--color--green,       #7fae4b);
    --sk-line:        var(--wp--preset--color--border,      #d8c290);

    --sk-f-logo:      var(--wp--preset--font-family--logo,        'Baloo 2', system-ui, sans-serif);
    --sk-f-head:      var(--wp--preset--font-family--heading,     'Fredoka', system-ui, sans-serif);
    --sk-f-hand:      var(--wp--preset--font-family--handwriting, 'Patrick Hand', cursive);
    --sk-f-body:      var(--wp--preset--font-family--body,        'Nunito', system-ui, sans-serif);

    --sk-radius:      18px;
    --sk-radius-lg:   26px;
    --sk-shadow:      0 6px 20px rgba(74, 50, 24, 0.12);
    --sk-glow:        0 0 0 3px rgba(232, 154, 28, 0.35), 0 10px 28px rgba(232, 154, 28, 0.28);
    --sk-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Subtiles Konfetti-Muster */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(216, 132, 21, 0.06) 2px, transparent 2.5px),
        radial-gradient(circle, rgba(127, 174, 75, 0.05) 2px, transparent 2.5px);
    background-size: 60px 60px, 90px 90px;
    background-position: 0 0, 30px 45px;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* =====================================================================
   Header
   ===================================================================== */
.sk-site-header {
    padding: 22px 0 6px;
    background: var(--sk-bg);
}

.sk-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 18px;
}

.sk-brand .wp-block-site-logo img {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 4px 8px rgba(74, 50, 24, 0.2));
    transition: transform 0.5s var(--sk-ease);
}
.sk-brand:hover .wp-block-site-logo img { transform: rotate(-6deg) scale(1.04); }

.sk-brand .wp-block-site-title a {
    font-family: var(--sk-f-logo);
    font-weight: 800;
    font-size: clamp(1.8rem, 5vw, 3.1rem);
    line-height: 0.95;
    letter-spacing: 0.5px;
    color: var(--sk-brown);
    text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(216, 132, 21, 0.18);
    text-decoration: none;
}

/* Navigations-Pille */
ul.sk-nav.wp-block-navigation {
    background: var(--sk-card-hi);
    border: 2px solid var(--sk-line);
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--sk-shadow);
}

.sk-nav .wp-block-navigation-item__content {
    font-family: var(--sk-f-head);
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--sk-brown);
    padding: 8px 18px;
    border-radius: 10px;
    transition: color 0.25s var(--sk-ease), background 0.25s var(--sk-ease),
                transform 0.25s var(--sk-ease), box-shadow 0.25s var(--sk-ease);
    text-decoration: none;
}

.sk-nav .wp-block-navigation-item__content:hover {
    color: var(--sk-orange-deep);
    background: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(232, 154, 28, 0.25);
}

.sk-nav .current-menu-item .wp-block-navigation-item__content {
    color: var(--sk-orange-deep);
    font-weight: 700;
}

/* =====================================================================
   Footer
   ===================================================================== */
.sk-site-footer {
    background: var(--sk-orange);
    color: #fff6e6;
    padding: 26px 0 22px;
}

.sk-site-footer .wp-block-site-logo img {
    width: 46px;
    height: 46px;
    opacity: 0.95;
}

.sk-site-footer .wp-block-navigation-item__content {
    color: #fff6e6;
    font-family: var(--sk-f-head);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s var(--sk-ease);
}

.sk-site-footer .wp-block-navigation-item__content:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.footer-nav li + li {
    margin-left: 10px;
}

/* =====================================================================
   Glow-Effekt
   ===================================================================== */
.sk-glow {
    transition: transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease),
                filter 0.3s var(--sk-ease);
}
.sk-glow:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-glow);
    filter: brightness(1.03);
}

/* =====================================================================
   Karten & Banner
   ===================================================================== */
.sk-card {
    background: var(--sk-card);
    border: 2px solid var(--sk-line);
    border-radius: var(--sk-radius-lg);
    padding: 30px;
    box-shadow: var(--sk-shadow);
}

.sk-banner {
    background: var(--sk-card);
    border: 2px solid var(--sk-line);
    border-radius: var(--sk-radius-lg);
    padding: 30px 38px;
    box-shadow: var(--sk-shadow);
    text-align: center;
}

.sk-banner__text {
    font-family: var(--sk-f-hand);
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: var(--sk-brown);
}

/* =====================================================================
   Typografie-Helfer
   ===================================================================== */
.sk-h-hand {
    font-family: var(--sk-f-hand);
    font-size: clamp(2rem, 5vw, 2.8rem);
    color: var(--sk-brown);
    text-align: center;
    margin-bottom: 8px;
}

.sk-h-sec {
    font-family: var(--sk-f-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--sk-brown);
    margin-bottom: 16px;
}

.sk-lead {
    font-family: var(--sk-f-head);
    font-weight: 600;
    text-align: center;
    font-size: 1.2rem;
    color: var(--sk-brown);
    margin-bottom: 22px;
}

.sk-prose { font-size: 1.08rem; color: var(--sk-brown-soft); }
.sk-prose p { margin-bottom: 16px; }

/* =====================================================================
   Alters-Galerie (Startseite)
   ===================================================================== */
.sk-age-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.sk-age-card {
    background: var(--sk-tile);
    border: 2px solid var(--sk-line);
    border-radius: var(--sk-radius);
    overflow: hidden;
    box-shadow: var(--sk-shadow);
    text-decoration: none;
    color: var(--sk-brown);
    display: block;
}

.sk-age-card__img { aspect-ratio: 1; overflow: hidden; }
.sk-age-card__img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s var(--sk-ease);
}
.sk-age-card:hover .sk-age-card__img img { transform: scale(1.07); }

.sk-age-card__label {
    font-family: var(--sk-f-head);
    font-weight: 600;
    text-align: center;
    padding: 10px 6px;
    color: var(--sk-brown);
}

/* =====================================================================
   Marken-Karten
   ===================================================================== */
.sk-brand-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 26px;
}
@media (max-width: 760px) { .sk-brand-row { grid-template-columns: 1fr; } }

.sk-brand-card {
    background: var(--sk-card);
    border: 2px solid var(--sk-line);
    border-radius: var(--sk-radius-lg);
    padding: 24px;
    box-shadow: var(--sk-shadow);
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.sk-brand-card__thumb {
    width: 110px; height: 110px; flex: none;
    border-radius: var(--sk-radius);
    overflow: hidden;
    background: var(--sk-tile);
    border: 2px solid var(--sk-line);
}
.sk-brand-card__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.sk-brand-card__name {
    font-family: var(--sk-f-head);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--sk-brown);
    margin-bottom: 6px;
}
.sk-brand-card__text { font-size: 0.98rem; color: var(--sk-brown-soft); }

/* =====================================================================
   Info-Grid (Über uns / Kontakt)
   ===================================================================== */
.sk-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* Columns mit Icon-Karten: Gap + gleiche Höhe */
.wp-block-columns:has(.sk-info-card) {
    gap: 1.25rem;
    align-items: stretch;
}

.wp-block-columns .wp-block-column:has(.sk-info-card) {
    display: flex;
    flex-direction: column;
}

.wp-block-columns .wp-block-column .sk-info-card {
    flex: 1;
}

.sk-info-card {
    background: var(--sk-card);
    border: 2px solid var(--sk-line);
    border-radius: var(--sk-radius-lg);
    padding: 26px;
    box-shadow: var(--sk-shadow);
    text-align: center;
}
.sk-info-card__icon { font-size: 2.4rem; margin-bottom: 10px; line-height: 1; }
.sk-info-card__icon i { font-size: inherit; color: var(--sk-orange-deep, #d98415); }
.sk-info-card__title {
    font-family: var(--sk-f-head);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--sk-brown);
}
.sk-info-card__text { color: var(--sk-brown-soft); }

/* =====================================================================
   Button
   ===================================================================== */
.sk-btn,
.wp-block-button .wp-element-button {
    font-family: var(--sk-f-head);
    font-weight: 700;
    font-size: 1.1rem;
}

/* =====================================================================
   Karte mit Karte (Slider-Container)
   ===================================================================== */
.sk-slider-panel {
    background: var(--sk-card);
    border: 2px solid var(--sk-line);
    border-radius: var(--sk-radius-lg);
    padding: 18px 46px;
    box-shadow: var(--sk-shadow);
}

/* =====================================================================
   Karte / Map
   ===================================================================== */
.sk-map-frame {
    border-radius: var(--sk-radius-lg);
    overflow: hidden;
    border: 2px solid var(--sk-line);
    box-shadow: var(--sk-shadow);
    margin-top: 24px;
}
.sk-map-frame iframe { width: 100%; height: 360px; border: 0; display: block; }

/* DSGVO-Karten-Zustimmung */
.sk-map-consent {
    position: relative;
    height: 360px;
    background: #efe4c6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='none'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d8c290' stroke-width='1'/%3E%3C/svg%3E") repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sk-map-consent__box {
    background: #fffdf7;
    border: 2px solid var(--sk-line);
    border-radius: var(--sk-radius-lg);
    padding: 2rem 2.5rem;
    max-width: 420px;
    text-align: center;
    box-shadow: var(--sk-shadow);
}
.sk-map-consent__icon {
    font-size: 2.5rem;
    color: var(--sk-orange-deep);
    margin-bottom: 0.75rem;
}
.sk-map-consent__title {
    font-family: var(--sk-f-head);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sk-brown);
    margin: 0 0 0.5rem;
}
.sk-map-consent__text {
    font-size: 0.875rem;
    color: var(--sk-brown-soft);
    margin: 0 0 1.25rem;
    line-height: 1.6;
}
.sk-map-consent__text a {
    color: var(--sk-orange-deep);
    text-decoration: underline;
}
.sk-map-consent__btn {
    display: inline-block;
    background: var(--sk-orange);
    color: #3a1f0d;
    font-family: var(--sk-f-head);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.65rem 1.75rem;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s var(--sk-ease), box-shadow 0.2s var(--sk-ease);
}
.sk-map-consent__btn:hover {
    background: var(--sk-orange-deep);
    box-shadow: var(--sk-glow);
}

/* =====================================================================
   Altersgruppen-Header (Produktseite)
   ===================================================================== */
.sk-cat-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
    border-left: 4px solid var(--sk-orange);
    padding-left: 16px;
}

.sk-cat-head__title {
    font-family: var(--sk-f-head);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--sk-brown);
}

.sk-cat-head__age {
    font-family: var(--sk-f-body);
    font-size: 0.9rem;
    color: var(--sk-brown-soft);
    opacity: 0.8;
}

/* =====================================================================
   Marken-Gruppe-Badge (Markenseite)
   ===================================================================== */
.sk-brand-group {
    display: flex;
    margin-bottom: 24px;
}

.sk-brand-group__title {
    display: inline-block;
    background: var(--sk-brown);
    color: #fff6e6;
    font-family: var(--sk-f-head);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 6px 18px;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

/* =====================================================================
   Kontaktformular
   ===================================================================== */
.sk-contact-form {
    margin-top: 24px;
}

.sk-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 600px;
    margin: 0 auto;
}

.sk-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sk-form__field label {
    font-family: var(--sk-f-head);
    font-weight: 600;
    color: var(--sk-brown);
    font-size: 0.95rem;
}

.sk-form__field input,
.sk-form__field textarea {
    font-family: var(--sk-f-body);
    font-size: 1rem;
    color: var(--sk-brown);
    background: #fffdf7;
    border: 2px solid var(--sk-line);
    border-radius: var(--sk-radius);
    padding: 10px 14px;
    transition: border-color 0.2s var(--sk-ease), box-shadow 0.2s var(--sk-ease);
    resize: vertical;
}

.sk-form__field input:focus,
.sk-form__field textarea:focus {
    outline: none;
    border-color: var(--sk-orange);
    box-shadow: 0 0 0 3px rgba(232, 154, 28, 0.25);
}

.sk-form__submit {
    align-self: flex-start;
    font-family: var(--sk-f-head);
    font-weight: 700;
    font-size: 1.05rem;
    background: var(--sk-orange);
    color: var(--sk-brown);
    border: none;
    border-radius: 999px;
    padding: 12px 30px;
    cursor: pointer;
    transition: background 0.2s var(--sk-ease), box-shadow 0.2s var(--sk-ease), transform 0.2s var(--sk-ease);
}

.sk-form__submit:hover {
    background: var(--sk-orange-deep);
    box-shadow: var(--sk-glow);
    transform: translateY(-2px);
}

.sk-form__note {
    font-size: 0.82rem;
    color: var(--sk-brown-soft);
    opacity: 0.75;
}

/* =====================================================================
   Age-Card ohne Bild (Label-only)
   ===================================================================== */
.sk-age-card {
    transition: transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease);
    padding: 22px 12px;
}

.sk-age-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-glow);
}

.sk-age-card__label {
    font-size: 1.05rem;
    line-height: 1.4;
}

.sk-age-card__label small {
    display: block;
    font-size: 0.78rem;
    opacity: 0.7;
    font-family: var(--sk-f-body);
    font-weight: 400;
}

/* =====================================================================
   Scroll-Reveal
   ===================================================================== */
.sk-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--sk-ease), transform 0.7s var(--sk-ease);
}
.sk-reveal.sk-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .sk-reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Mobile Seitenabstand
   ===================================================================== */
@media (max-width: 640px) {
    .wp-site-blocks {
        padding-inline: 5px !important;
    }
    /* Constrained-Layout-Kinder ebenfalls einschränken */
    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        padding-inline: 5px;
    }
}

/* =====================================================================
   Cookie-Consent-Banner
   ===================================================================== */
#sk-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--sk-brown, #4a3218);
    color: #fff6e6;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 -4px 20px rgba(74, 50, 24, 0.3);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#sk-cookie-banner.sk-cookie-visible {
    transform: translateY(0);
}

.sk-cookie-text {
    font-family: var(--sk-f-body, 'Nunito', sans-serif);
    font-size: 0.875rem;
    line-height: 1.5;
    flex: 1;
    min-width: 200px;
}

.sk-cookie-text a {
    color: var(--sk-card, #f2d886);
    text-decoration: underline;
}

.sk-cookie-actions {
    display: flex;
    gap: 0.625rem;
    flex-shrink: 0;
}

.sk-cookie-btn {
    font-family: var(--sk-f-head, 'Fredoka', sans-serif);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.sk-cookie-btn--accept {
    background: var(--sk-orange, #e89a1c);
    color: var(--sk-brown, #4a3218);
    border-color: var(--sk-orange, #e89a1c);
}

.sk-cookie-btn--accept:hover {
    background: #f0a820;
    box-shadow: 0 0 0 3px rgba(232, 154, 28, 0.35);
}

.sk-cookie-btn--reject {
    background: transparent;
    color: #fff6e6;
    border-color: rgba(242, 216, 134, 0.5);
}

.sk-cookie-btn--reject:hover {
    border-color: #f2d886;
    background: rgba(242, 216, 134, 0.1);
}

@media (max-width: 480px) {
    #sk-cookie-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .sk-cookie-actions {
        width: 100%;
    }
    .sk-cookie-btn {
        flex: 1;
        text-align: center;
    }
}