/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — kinderschatzkiste-2025
   Demo→FSE mapping: Demo-Shortnames (--accent-1) → WP-Tokens (--wp--preset--color--accent-1)
═══════════════════════════════════════════════════════════════ */

/* ---- Container + reveal ---- */
.ks-home-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    z-index: 2;
}

.ks-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.ks-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .ks-reveal { opacity: 1; transform: none; transition: none; }
}

.ks-home-main {
    margin-top: 0 !important;
    position: relative;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.ks-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 88px;
}
.ks-hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -200px;
    width: 720px; height: 720px;
    background: radial-gradient(circle at center, rgba(255,181,71,.14), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.ks-hero::after {
    content: '';
    position: absolute;
    bottom: -200px; left: -200px;
    width: 640px; height: 640px;
    background: radial-gradient(circle at center, rgba(125,211,183,.08), transparent 60%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.ks-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 52px;
    align-items: center;
}
.ks-hero__content { max-width: 580px; }

.ks-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wp--preset--color--accent-1);
    padding: 6px 12px;
    background: var(--wp--custom--primary-soft);
    border: 1px solid var(--wp--custom--primary-border-soft);
    border-radius: var(--wp--custom--radius-pill);
    margin-bottom: 22px;
}
.ks-hero__kicker::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--wp--preset--color--accent-1);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--wp--preset--color--accent-1);
    animation: ks-pulse 2.2s ease-in-out infinite;
}
@keyframes ks-pulse {
    0%, 100% { opacity: .45; transform: scale(.9); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

.ks-hero__title {
    font-size: clamp(2.5rem, 6.5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    margin: 0 0 22px !important;
    color: var(--wp--preset--color--contrast);
}
.ks-hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--accent-1);
    background: linear-gradient(135deg, var(--wp--preset--color--accent-1) 0%, #ff8c42 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ks-hero__desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--wp--custom--text-secondary);
    margin: 0 0 30px;
    max-width: 500px;
}

.ks-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
}

.ks-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: var(--wp--custom--radius-pill);
    font-size: .9375rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s, background .15s, border-color .15s, color .15s;
    text-decoration: none !important;
    line-height: 1;
}
.ks-btn:active { transform: scale(.98) translateY(1px); }
.ks-btn svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .2s; }
.ks-btn:hover svg { transform: translateX(2px); }

.ks-btn--primary {
    background: var(--wp--preset--color--accent-1);
    color: var(--wp--custom--text-on-primary) !important;
    box-shadow: 0 4px 16px rgba(255,181,71,.25);
}
.ks-btn--primary:hover {
    background: var(--wp--custom--primary-hover);
    box-shadow: 0 6px 20px rgba(255,181,71,.35);
    color: var(--wp--custom--text-on-primary) !important;
}
.ks-btn--ghost {
    background: transparent;
    color: var(--wp--preset--color--contrast) !important;
    border-color: var(--wp--preset--color--accent-5);
}
.ks-btn--ghost:hover {
    border-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--accent-1) !important;
    background: var(--wp--custom--primary-soft);
}

.ks-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    font-size: .8125rem;
    color: var(--wp--preset--color--accent-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ks-hero__stats > li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ks-hero__stats strong {
    color: var(--wp--preset--color--contrast);
    font-weight: 800;
}
.ks-hero__stats-stars {
    color: var(--wp--preset--color--accent-1);
    letter-spacing: 1px;
    font-size: .75rem;
}

/* ---- Hero feature card ---- */
.ks-hero__feature {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
    perspective: 1600px;
}

.ks-feature-card {
    position: relative;
    width: 300px;
    background: var(--wp--preset--color--accent-3);
    border: 1px solid var(--wp--preset--color--accent-5);
    border-radius: var(--wp--custom--radius-large);
    overflow: hidden;
    transform: rotate(2.5deg);
    transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .3s;
    box-shadow:
        0 40px 80px rgba(0,0,0,.55),
        0 12px 30px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);
    display: block;
    text-decoration: none !important;
    color: var(--wp--preset--color--contrast) !important;
}
.ks-feature-card:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.02);
}
.ks-feature-card__img {
    aspect-ratio: 4/5;
    position: relative;
    overflow: hidden;
    background: var(--wp--preset--color--accent-5);
}
.ks-feature-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ks-feature-card__img::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(2,0,36,.35) 0%,
        rgba(255,255,255,.03) 8%,
        transparent 100%);
    z-index: 2;
    pointer-events: none;
}
.ks-feature-card__img::after {
    content: '';
    position: absolute;
    left: 4px; top: 0; bottom: 0;
    width: 8px;
    background: linear-gradient(90deg,
        rgba(0,0,0,.3) 0%,
        rgba(255,255,255,.08) 40%,
        transparent 100%);
    z-index: 3;
    pointer-events: none;
}
.ks-feature-card__badge {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 4;
    padding: 5px 11px;
    background: rgba(18,24,33,.7);
    border: 1px solid rgba(255,181,71,.4);
    color: var(--wp--preset--color--accent-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    border-radius: var(--wp--custom--radius-pill);
}
.ks-feature-card__body { padding: 18px 20px 22px; }
.ks-feature-card__meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ks-feature-card__chip {
    font-size: .625rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--wp--custom--radius-pill);
    line-height: 1.4;
}
.ks-feature-card__chip--cat {
    background: var(--wp--preset--color--accent-1);
    color: var(--wp--custom--text-on-primary);
}
.ks-feature-card__chip--age {
    border: 1px solid var(--wp--custom--mint-soft-border);
    color: var(--wp--preset--color--accent-2);
}
.ks-feature-card__chip--time {
    border: 1px solid var(--wp--preset--color--accent-5);
    color: var(--wp--preset--color--accent-4);
}
.ks-feature-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--wp--preset--color--contrast);
}
.ks-feature-card__read {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--wp--preset--color--accent-1);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap .2s;
}
.ks-feature-card:hover .ks-feature-card__read { gap: 8px; }

.ks-feature-card--behind {
    position: absolute;
    width: 270px;
    transform: rotate(-6deg) translate(-90px, 25px);
    opacity: .45;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

.ks-feature-label {
    position: absolute;
    top: 20px;
    left: -40px;
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    font-size: .6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 8px 14px;
    border-radius: var(--wp--custom--radius-pill);
    transform: rotate(-6deg);
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ks-feature-label::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent-1);
    animation: ks-pulse 2s ease-in-out infinite;
}

@media (max-width: 900px) {
    .ks-hero { padding: 48px 0 64px; }
    .ks-hero__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .ks-hero__feature { min-height: 420px; }
    .ks-feature-card--behind { display: none; }
    .ks-feature-label {
        left: 50%;
        top: 0;
        transform: translateX(-50%) rotate(-4deg);
    }
}
@media (max-width: 480px) {
    .ks-hero { padding: 40px 0 56px; }
    .ks-hero__title { letter-spacing: -.03em !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEAD (shared)
═══════════════════════════════════════════════════════════════ */
.ks-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 28px;
    gap: 20px;
    flex-wrap: wrap;
}
.ks-section-eyebrow {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--wp--preset--color--accent-1);
    margin: 0 0 8px;
}
.ks-section-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: var(--wp--preset--color--contrast);
}
.ks-section-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--accent-1);
}
.ks-section-link {
    font-size: .875rem;
    font-weight: 600;
    color: var(--wp--preset--color--accent-4) !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .15s, gap .2s;
    text-decoration: none !important;
}
.ks-section-link:hover {
    color: var(--wp--preset--color--accent-1) !important;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORIES BENTO
═══════════════════════════════════════════════════════════════ */
.ks-categories {
    padding: 72px 0 56px;
    position: relative;
    z-index: 2;
}
.ks-bento {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 14px;
}
.ks-bento__tile {
    position: relative;
    border-radius: var(--wp--custom--radius-large);
    overflow: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--wp--preset--color--contrast) !important;
    text-decoration: none !important;
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
    isolation: isolate;
}
.ks-bento__tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0,0,0,.4);
    color: var(--wp--preset--color--contrast) !important;
}
.ks-bento__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    pointer-events: none;
}

.ks-bento__tile--nacht {
    grid-column: 1;
    grid-row: 1 / 3;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(82,102,255,.4), transparent 60%),
        linear-gradient(135deg, #1a2755 0%, #0f1838 70%, #080d22 100%);
}
.ks-bento__tile--nacht::before {
    content: '';
    position: absolute;
    top: 30px;
    right: 40px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 35%, #fff8e3, #ffd999 60%, #f0b55e);
    box-shadow: 0 0 40px rgba(255,217,153,.35);
    opacity: .9;
}
.ks-bento__tile--maerchen {
    grid-column: 2;
    grid-row: 1;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(255,181,71,.45), transparent 60%),
        linear-gradient(135deg, #5a2b0e 0%, #3a1a08 100%);
}
.ks-bento__tile--grimms {
    grid-column: 3;
    grid-row: 1;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(217,79,71,.4), transparent 60%),
        linear-gradient(135deg, #3a0e14 0%, #1f0708 100%);
}
.ks-bento__tile--ausflug {
    grid-column: 2 / 4;
    grid-row: 2;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(125,211,183,.4), transparent 60%),
        linear-gradient(135deg, #0f3a2b 0%, #0a2620 100%);
}

.ks-bento__icon {
    position: absolute;
    top: 22px;
    left: 22px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}
.ks-bento__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.4;
}
.ks-bento__content {
    position: relative;
    z-index: 2;
}
.ks-bento__count {
    display: inline-block;
    font-size: .625rem;
    font-weight: 700;
    padding: 3px 9px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--wp--custom--radius-pill);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ks-bento__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1.1 !important;
    margin: 0 0 6px !important;
    color: var(--wp--preset--color--contrast);
}
.ks-bento__tile--nacht .ks-bento__title { font-size: 2rem !important; }
.ks-bento__desc {
    font-size: .8125rem;
    color: rgba(255,255,255,.65);
    line-height: 1.45;
    max-width: 340px;
    margin: 0;
}
.ks-bento__tile--nacht .ks-bento__desc { max-width: 340px; font-size: .875rem; }

@media (max-width: 820px) {
    .ks-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 160px 160px;
    }
    .ks-bento__tile--nacht    { grid-column: 1 / 3; grid-row: 1; }
    .ks-bento__tile--maerchen { grid-column: 1; grid-row: 2; }
    .ks-bento__tile--grimms   { grid-column: 2; grid-row: 2; }
    .ks-bento__tile--ausflug  { grid-column: 1 / 3; grid-row: 3; }
    .ks-bento__tile--nacht::before { width: 80px; height: 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   AGE PICKER
═══════════════════════════════════════════════════════════════ */
.ks-age-picker {
    padding: 44px 0 52px;
    border-top: 1px solid var(--wp--preset--color--accent-5);
    border-bottom: 1px solid var(--wp--preset--color--accent-5);
    position: relative;
    z-index: 2;
}
.ks-age-picker__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.ks-age-picker__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    margin: 0 !important;
    color: var(--wp--preset--color--contrast);
}
.ks-age-picker__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--accent-1);
}
.ks-age-picker__hint {
    font-size: .8125rem;
    color: var(--wp--preset--color--accent-4);
}
.ks-age-picker__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ks-age-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 22px 20px;
    background: var(--wp--preset--color--accent-3);
    border: 1px solid var(--wp--preset--color--accent-5);
    border-radius: var(--wp--custom--radius-large);
    overflow: hidden;
    transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, box-shadow .2s;
    text-decoration: none !important;
    color: var(--wp--preset--color--contrast) !important;
}
.ks-age-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        320px circle at var(--ks-spotlight-x, 50%) var(--ks-spotlight-y, 50%),
        var(--ks-glow-color, rgba(255,181,71,.12)),
        transparent 70%
    );
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.ks-age-tile:hover::before { opacity: 1; }
.ks-age-tile:hover {
    transform: translateY(-3px);
    border-color: var(--ks-tile-border, rgba(255,181,71,.4));
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.ks-age-tile--young { --ks-glow-color: rgba(125,211,183,.16); --ks-tile-border: rgba(125,211,183,.4); }
.ks-age-tile--mid   { --ks-glow-color: rgba(255,181,71,.16);  --ks-tile-border: rgba(255,181,71,.4); }
.ks-age-tile--old   { --ks-glow-color: rgba(134,162,255,.16); --ks-tile-border: rgba(134,162,255,.4); }

.ks-age-tile__age {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.ks-age-tile--young .ks-age-tile__age { color: var(--wp--preset--color--accent-2); }
.ks-age-tile--mid   .ks-age-tile__age { color: var(--wp--preset--color--accent-1); }
.ks-age-tile--old   .ks-age-tile__age { color: #86A2FF; }

.ks-age-tile__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--wp--preset--color--accent-4);
    text-transform: uppercase;
    letter-spacing: .06em;
    position: relative;
    z-index: 1;
}
.ks-age-tile__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-size: .8125rem;
    color: var(--wp--custom--text-secondary);
    position: relative;
    z-index: 1;
}
.ks-age-tile__count {
    font-weight: 700;
    color: var(--wp--preset--color--contrast);
}
.ks-age-tile__arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent-5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.ks-age-tile:hover .ks-age-tile__arrow {
    background: var(--wp--preset--color--contrast);
    transform: translateX(3px);
}
.ks-age-tile:hover .ks-age-tile__arrow svg { stroke: var(--wp--preset--color--base); }
.ks-age-tile__arrow svg {
    width: 12px;
    height: 12px;
    stroke: var(--wp--preset--color--contrast);
    transition: stroke .2s;
}

@media (max-width: 620px) {
    .ks-age-picker__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED CARD (Latest + Trending)
═══════════════════════════════════════════════════════════════ */
.ks-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--accent-3);
    border: 1px solid var(--wp--preset--color--accent-5);
    border-radius: var(--wp--custom--radius-card);
    overflow: hidden;
    --ks-spotlight-x: 50%;
    --ks-spotlight-y: 50%;
    transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, box-shadow .18s;
    text-decoration: none !important;
    color: var(--wp--preset--color--contrast) !important;
}
.ks-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--ks-spotlight-x) var(--ks-spotlight-y),
        rgba(255,181,71,.09), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    z-index: 1;
}
.ks-card:hover::after { opacity: 1; }
.ks-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,181,71,.5);
    box-shadow: 0 12px 32px rgba(0,0,0,.42), 0 0 0 1px rgba(255,181,71,.08);
}
.ks-card:hover .ks-card__title { color: var(--wp--preset--color--accent-1); }

.ks-card__img {
    position: relative;
    aspect-ratio: 1/1;
    background: var(--wp--custom--surface-dark);
    overflow: hidden;
    flex-shrink: 0;
}
.ks-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
    display: block;
}
.ks-card:hover .ks-card__img img { transform: scale(1.04); }
.ks-card__img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2,0,36,.4) 0%, rgba(255,255,255,.03) 7%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}
.ks-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: var(--wp--preset--color--accent-2);
    color: var(--wp--custom--mint-dark);
    font-size: .5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: var(--wp--custom--radius-pill);
}
.ks-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 18px;
    flex: 1;
    position: relative;
    z-index: 2;
}
.ks-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ks-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--wp--custom--radius-pill);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.ks-card__chip--cat  { background: var(--wp--preset--color--accent-1); color: var(--wp--custom--text-on-primary); }
.ks-card__chip--age  { border: 1px solid rgba(125,211,183,.35); color: var(--wp--preset--color--accent-2); }
.ks-card__chip--time { border: 1px solid var(--wp--preset--color--accent-5); color: var(--wp--preset--color--accent-4); }
.ks-card__title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .18s;
    color: var(--wp--preset--color--contrast);
}
.ks-card__excerpt {
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--wp--custom--text-secondary);
    opacity: .8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   LATEST STORIES GRID
═══════════════════════════════════════════════════════════════ */
.ks-latest {
    padding: 56px 0 64px;
    position: relative;
    z-index: 2;
}
.ks-latest__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
@media (max-width: 860px) { .ks-latest__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ks-latest__grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   TRENDING (Rating-basiert)
═══════════════════════════════════════════════════════════════ */
.ks-trending {
    padding: 56px 0 72px;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 181, 71, 0.06) 50%, transparent 100%);
}
.ks-trending__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
@media (max-width: 860px) { .ks-trending__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ks-trending__grid { grid-template-columns: 1fr; } }

.ks-card__rank {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #FFB547) 0%, #F5A3A3 100%);
    color: #1a120a;
    font-size: .75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--wp--custom--radius-pill);
    letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(255, 181, 71, 0.35);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   EDITORIAL (About)
═══════════════════════════════════════════════════════════════ */
.ks-editorial {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}
.ks-editorial__inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 64px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.ks-editorial__visual {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--wp--custom--radius-xl, 24px);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.ks-editorial__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) contrast(1.03);
    display: block;
}
.ks-editorial__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18,24,33,0) 40%, rgba(18,24,33,.55) 100%);
    pointer-events: none;
}
.ks-editorial__badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 10px 14px;
    background: rgba(18,24,33,.75);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 14px;
    z-index: 2;
}
.ks-editorial__badge-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--accent-1, #FFD999);
    letter-spacing: -.02em;
}
.ks-editorial__badge-txt {
    font-size: .6875rem;
    color: #fff;
    opacity: .75;
    font-weight: 500;
    margin-top: 2px;
}
.ks-editorial__text {
    max-width: 560px;
}
.ks-editorial__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    line-height: 1.1 !important;
    margin: 10px 0 18px !important;
    color: var(--wp--preset--color--contrast);
}
.ks-editorial__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--accent-1, #FFB547);
}
.ks-editorial__body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--wp--custom--text-secondary);
    margin: 0 0 20px;
}
.ks-editorial__body strong {
    color: var(--wp--preset--color--contrast);
    font-weight: 700;
}
.ks-editorial__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 28px 0;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ks-editorial__feature {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ks-editorial__feature-num {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--wp--preset--color--accent-1, #FFB547);
    font-variant-numeric: tabular-nums;
}
.ks-editorial__feature-lbl {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wp--custom--text-secondary);
    opacity: .85;
}
@media (max-width: 860px) {
    .ks-editorial__inner { grid-template-columns: 1fr; gap: 44px; }
    .ks-editorial__visual { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .ks-editorial__features { grid-template-columns: 1fr 1fr; }
    .ks-editorial__features > :last-child { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════
   AUSFLUGSZIELE TEASER
═══════════════════════════════════════════════════════════════ */
.ks-ausflug {
    padding: 60px 20px;
    margin: 0 -20px;
    position: relative;
    z-index: 2;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(125,211,183,.06), transparent 50%),
        linear-gradient(180deg, transparent, rgba(125,211,183,.03));
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ks-ausflug .ks-section-eyebrow { color: var(--wp--preset--color--accent-2, #7DD3B7); }
.ks-ausflug .ks-section-title em { color: var(--wp--preset--color--accent-2, #7DD3B7); }
.ks-ausflug .ks-section-link:hover { color: var(--wp--preset--color--accent-2, #7DD3B7); }

.ks-az__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.ks-az-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--accent-3, #232C3A);
    border: 1px solid var(--wp--preset--color--accent-5, #2E3847);
    border-radius: var(--wp--custom--radius-card, 18px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease-out, border-color .18s, box-shadow .18s;
}
.ks-az-card:hover {
    transform: translateY(-3px);
    border-color: rgba(125,211,183,.5);
    box-shadow: 0 12px 32px rgba(0,0,0,.42);
    color: inherit;
}
.ks-az-card__img {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.ks-az-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease-out;
}
.ks-az-card:hover .ks-az-card__img img { transform: scale(1.05); }
.ks-az-card__region {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(18,24,33,.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--wp--preset--color--accent-2, #7DD3B7);
    border: 1px solid rgba(125,211,183,.3);
    font-size: .625rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--wp--custom--radius-pill);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ks-az-card__body { padding: 14px 16px 18px; }
.ks-az-card__kind {
    font-size: .625rem;
    color: var(--wp--custom--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 5px;
    opacity: .85;
}
.ks-az-card__title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
    color: var(--wp--preset--color--contrast);
}
.ks-az-card__features {
    display: flex;
    gap: 12px;
    font-size: .75rem;
    color: var(--wp--custom--text-secondary);
    flex-wrap: wrap;
}
.ks-az-card__features svg { width: 11px; height: 11px; flex-shrink: 0; }
.ks-az-card__features span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 820px) { .ks-az__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ks-az__grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER CTA
═══════════════════════════════════════════════════════════════ */
.ks-newsletter {
    padding: 64px 0 80px;
    position: relative;
    z-index: 2;
}
.ks-newsletter__inner {
    position: relative;
    padding: 52px 48px;
    border-radius: var(--wp--custom--radius-xl, 24px);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(255,181,71,.18), transparent 60%),
        linear-gradient(135deg, #2a1a10 0%, #1a120a 100%);
    border: 1px solid rgba(255,181,71,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.ks-newsletter__inner::before {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,181,71,.22), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}
.ks-newsletter__content { position: relative; z-index: 2; }
.ks-newsletter__title {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1.1 !important;
    margin: 0 0 12px !important;
    color: var(--wp--preset--color--contrast);
}
.ks-newsletter__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--accent-1, #FFD999);
}
.ks-newsletter__desc {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--wp--custom--text-secondary);
    margin: 0 0 22px;
}
.ks-newsletter__form {
    display: flex;
    gap: 8px;
    background: rgba(14,20,29,.85);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--wp--custom--radius-pill);
    padding: 4px;
    max-width: 460px;
}
.ks-newsletter__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 16px;
    color: var(--wp--preset--color--contrast);
    font-family: inherit;
    font-size: .9375rem;
}
.ks-newsletter__input::placeholder { color: var(--wp--custom--text-secondary); opacity: .6; }
.ks-newsletter__submit {
    background: var(--wp--preset--color--accent-1, #FFB547);
    color: #1a120a;
    border: none;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--wp--custom--radius-pill);
    cursor: pointer;
    transition: background .15s, transform .12s;
    white-space: nowrap;
}
.ks-newsletter__submit:hover { background: #FFC573; }
.ks-newsletter__submit:active { transform: scale(.96); }
.ks-newsletter__submit:disabled { opacity: .6; cursor: not-allowed; }
.ks-newsletter__note {
    display: block;
    font-size: .6875rem;
    color: var(--wp--custom--text-secondary);
    opacity: .75;
    margin-top: 10px;
}
.ks-newsletter__message {
    display: none;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .875rem;
}
.ks-newsletter__message--ok {
    display: block;
    background: rgba(125,211,183,.1);
    border: 1px solid rgba(125,211,183,.3);
    color: var(--wp--preset--color--accent-2, #7DD3B7);
}
.ks-newsletter__message--err {
    display: block;
    background: rgba(245,163,163,.1);
    border: 1px solid rgba(245,163,163,.3);
    color: var(--wp--preset--color--accent-4, #F5A3A3);
}

.ks-newsletter__visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 180px;
}
.ks-newsletter__book {
    position: absolute;
    width: 110px;
    aspect-ratio: 4/5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.ks-newsletter__book img { width: 100%; height: 100%; object-fit: cover; }
.ks-newsletter__book--1 { right: 20px; z-index: 3; transform: rotate(6deg); }
.ks-newsletter__book--2 { right: 120px; z-index: 2; transform: rotate(-4deg); opacity: .85; }
.ks-newsletter__book--3 { right: 210px; z-index: 1; transform: rotate(9deg); opacity: .55; }

@media (max-width: 900px) {
    .ks-newsletter__inner { grid-template-columns: 1fr; padding: 40px 28px; }
    .ks-newsletter__visual { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════════ */
.ks-faq {
    padding: 56px 0 72px;
    position: relative;
    z-index: 2;
}
.ks-faq__inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
}
.ks-faq__item { border-top: 1px solid rgba(255,255,255,.08); }
.ks-faq__item:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.ks-faq__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    background: none;
    border: none;
    color: var(--wp--preset--color--contrast);
    font-size: .9375rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .15s;
}
.ks-faq__btn:hover { color: var(--wp--preset--color--accent-1, #FFD999); }
.ks-faq__btn:hover .ks-faq__icon { border-color: rgba(255,181,71,.4); }
.ks-faq__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .28s ease-out, border-color .15s;
}
.ks-faq__icon svg { width: 11px; height: 11px; stroke: var(--wp--custom--text-secondary); }
.ks-faq__item.is-open .ks-faq__icon {
    transform: rotate(45deg);
    border-color: rgba(255,181,71,.45);
}
.ks-faq__item.is-open .ks-faq__icon svg { stroke: var(--wp--preset--color--accent-1, #FFD999); }
.ks-faq__body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .32s ease-out;
}
.ks-faq__item.is-open .ks-faq__body { max-height: 320px; }
.ks-faq__answer {
    padding: 0 0 18px;
    margin: 0;
    font-size: .9rem;
    line-height: 1.72;
    color: var(--wp--custom--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   A11Y — Focus states (keyboard navigation)
═══════════════════════════════════════════════════════════════ */
.ks-card:focus-visible,
.ks-age-tile:focus-visible,
.ks-bento__tile:focus-visible,
.ks-az-card:focus-visible,
.ks-section-link:focus-visible,
.ks-btn:focus-visible,
.ks-faq__btn:focus-visible,
.ks-newsletter__submit:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-1, #FFB547);
    outline-offset: 3px;
    border-radius: var(--wp--custom--radius-card, 16px);
}
.ks-faq__btn:focus-visible { border-radius: 4px; outline-offset: 2px; }
.ks-section-link:focus-visible { border-radius: 6px; }
.ks-btn:focus-visible,
.ks-newsletter__submit:focus-visible { border-radius: var(--wp--custom--radius-pill, 999px); }
.ks-newsletter__form:focus-within {
    border-color: rgba(255,181,71,.5);
    box-shadow: 0 0 0 3px rgba(255,181,71,.12);
}
.ks-newsletter__input:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .ks-reveal { opacity: 1 !important; transform: none !important; }
    .ks-feature-card,
    .ks-feature-card:hover,
    .ks-card:hover,
    .ks-az-card:hover,
    .ks-az-card__img img,
    .ks-az-card:hover .ks-az-card__img img,
    .ks-bento__tile:hover,
    .ks-age-tile:hover {
        transform: none !important;
        transition: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE SWIPER (scroll-snap wie auf den Ausflugsseiten)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .ks-card-grid,
    .ks-trending__grid,
    .ks-ausflug__grid {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -20px;
        padding: 6px 20px 10px;
    }
    .ks-card-grid::-webkit-scrollbar,
    .ks-trending__grid::-webkit-scrollbar,
    .ks-ausflug__grid::-webkit-scrollbar { display: none; }
    .ks-card-grid > .ks-card,
    .ks-trending__grid > .ks-card,
    .ks-ausflug__grid > .ks-az-card {
        flex: 0 0 78%;
        max-width: 340px;
        scroll-snap-align: start;
    }
}
@media (max-width: 480px) {
    .ks-card-grid,
    .ks-trending__grid,
    .ks-ausflug__grid {
        margin: 0 -16px;
        padding: 6px 16px 10px;
    }
    .ks-card-grid > .ks-card,
    .ks-trending__grid > .ks-card,
    .ks-ausflug__grid > .ks-az-card {
        flex-basis: 85%;
    }
}

/* Perf: defer rendering/layout of below-fold sections until near-viewport.
 * Safe because we supply a contain-intrinsic-size hint so scrollbar length
 * stays stable and no CLS is introduced. */
.ks-latest,
.ks-trending,
.ks-editorial,
.ks-ausflug,
.ks-newsletter,
.ks-faq {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}


/* === EEAT proportional stars === */
.ks-hero__stats-stars{display:inline-flex;align-items:center;line-height:1;}
.ks-hero__stats-stars--half{position:relative;display:inline-block;color:var(--wp--preset--color--accent-1);overflow:hidden;width:.55em;}
.ks-hero__stats-stars--empty{color:rgba(255,178,42,.28);}