/* Klemmshop Zubehör / Steine Hub – NOVA Child */
.ks-accessory-hub,
.ks-accessory-hub__content {
    --ksa-ink:#171b24;
    --ksa-muted:#6b737d;
    --ksa-green:#1e6840;
    --ksa-green-2:#2e8b57;
    --ksa-soft:#eef7f2;
    --ksa-border:#e4e7e9;
    --ksa-yellow:#f5df79;
    --ksa-dark:#1c2830;
    --ksa-radius:22px;
    color:var(--ksa-ink);
}
.ks-accessory-hub { margin:0 0 30px; }
.ks-accessory-hub__hero {
    position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr);
    min-height:430px; border-radius:28px; background:linear-gradient(135deg,#eff7f2 0%,#f8faf9 55%,#eef2f4 100%);
    border:1px solid #e2e9e4;
}
.ks-accessory-hub__hero:before {
    content:""; position:absolute; right:-90px; top:-130px; width:420px; height:420px; border-radius:50%;
    background:rgba(46,139,87,.08);
}
.ks-accessory-hub__hero-copy { position:relative; z-index:3; align-self:center; padding:58px 20px 58px 58px; max-width:690px; }
.ks-accessory-hub__kicker { display:block; margin-bottom:9px; color:var(--ksa-green); font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ks-accessory-hub__kicker--light { color:#bce9cb; }
.ks-accessory-hub__hero h1 { margin:0; max-width:650px; font-family:Montserrat,"Open Sans",Arial,sans-serif; font-size:clamp(2rem,3.5vw,3.35rem); line-height:1.06; font-weight:800; letter-spacing:-.035em; }
.ks-accessory-hub__hero p { max-width:670px; margin:20px 0 0; color:var(--ksa-muted); font-size:1.02rem; line-height:1.7; }
.ks-accessory-hub__quicklinks { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.ks-accessory-hub__quicklinks a { padding:9px 14px; border:1px solid #d6dfd9; border-radius:999px; color:#294036; background:rgba(255,255,255,.78); font-size:.78rem; font-weight:700; transition:.2s ease; }
.ks-accessory-hub__quicklinks a:hover { color:#fff; border-color:var(--ksa-green); background:var(--ksa-green); text-decoration:none; }
.ks-accessory-hub__hero-visual { position:relative; min-height:430px; }
.ks-accessory-hub__hero-card { position:absolute; overflow:hidden; padding:12px; border-radius:22px; background:#fff; box-shadow:0 18px 45px rgba(27,38,32,.14); }
.ks-accessory-hub__hero-card span { position:absolute; z-index:2; left:14px; top:14px; padding:6px 9px; border-radius:999px; color:#fff; background:rgba(25,35,31,.88); font-size:.66rem; font-weight:800; }
.ks-accessory-hub__hero-card img { width:100%; height:100%; object-fit:contain; border-radius:14px; background:#fff; }
.ks-accessory-hub__hero-card--plate { width:260px; height:260px; left:12%; top:74px; transform:rotate(-5deg); }
.ks-accessory-hub__hero-card--motor { width:190px; height:190px; right:7%; top:36px; transform:rotate(5deg); }
.ks-accessory-hub__hero-card--brick { width:160px; height:160px; right:14%; bottom:26px; transform:rotate(-3deg); }

.ks-accessory-hub__content { margin-top:8px; }
.ks-accessory-hub__section { padding:50px 0 12px; }
.ks-accessory-hub__section--all { padding-top:58px; }
.ks-accessory-hub__section-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:24px; }
.ks-accessory-hub__section-head h2,.ks-accessory-hub__finder h2,.ks-accessory-hub__crosssell h2,.ks-accessory-hub__seo h2 { margin:0; font-family:Montserrat,"Open Sans",Arial,sans-serif; font-weight:800; letter-spacing:-.025em; }
.ks-accessory-hub__section-head h2 { font-size:clamp(1.65rem,2.5vw,2.35rem); }
.ks-accessory-hub__section-head p { max-width:720px; margin:8px 0 0; color:var(--ksa-muted); }

.ks-accessory-hub__featured-grid { display:grid; grid-template-columns:1.3fr .85fr .85fr; gap:18px; }
.ks-accessory-hub__featured { position:relative; overflow:hidden; min-height:330px; display:flex; align-items:flex-end; padding:28px; border:1px solid var(--ksa-border); border-radius:var(--ksa-radius); background:#fff; color:var(--ksa-ink); box-shadow:0 10px 32px rgba(23,27,36,.055); transition:.22s ease; }
.ks-accessory-hub__featured:hover { transform:translateY(-4px); color:var(--ksa-ink); text-decoration:none; box-shadow:0 18px 45px rgba(23,27,36,.11); }
.ks-accessory-hub__featured:after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.96) 33%,rgba(255,255,255,.18) 72%); }
.ks-accessory-hub__featured-copy { position:relative; z-index:3; max-width:86%; display:flex; flex-direction:column; align-items:flex-start; }
.ks-accessory-hub__featured-copy strong { margin-top:10px; font:800 1.45rem/1.15 Montserrat,"Open Sans",Arial,sans-serif; }
.ks-accessory-hub__featured-copy > span:not(.ks-accessory-hub__badge):not(.ks-accessory-hub__link) { margin-top:8px; color:var(--ksa-muted); font-size:.84rem; line-height:1.5; }
.ks-accessory-hub__featured img { position:absolute; z-index:0; right:3%; top:2%; width:72%; height:69%; object-fit:contain; transition:transform .25s ease; }
.ks-accessory-hub__featured:hover img { transform:scale(1.035); }
.ks-accessory-hub__featured--plate { background:linear-gradient(135deg,#f4faf6,#edf7f1); border-color:#dceadf; }
.ks-accessory-hub__featured--plate img { width:61%; height:72%; }
.ks-accessory-hub__featured--motor img { width:72%; height:65%; }
.ks-accessory-hub__featured--light { background:#1b242b; border-color:#1b242b; color:#fff; }
.ks-accessory-hub__featured--light:hover { color:#fff; }
.ks-accessory-hub__featured--light:after { background:linear-gradient(0deg,#1b242b 0%,rgba(27,36,43,.97) 34%,rgba(27,36,43,.12) 78%); }
.ks-accessory-hub__featured--light .ks-accessory-hub__featured-copy > span:not(.ks-accessory-hub__badge):not(.ks-accessory-hub__link) { color:rgba(255,255,255,.72); }
.ks-accessory-hub__badge { display:inline-flex; padding:6px 10px; border-radius:999px; background:#d9eee0; color:#185636; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.ks-accessory-hub__badge--yellow { background:var(--ksa-yellow); color:#5a4a09; }
.ks-accessory-hub__badge--dark { background:#fff; color:#18242c; }
.ks-accessory-hub__link { display:inline-flex; gap:7px; margin-top:15px; font-size:.78rem; font-weight:800; color:var(--ksa-green); }
.ks-accessory-hub__featured--light .ks-accessory-hub__link { color:#c7f0d4; }

.ks-accessory-hub__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ks-accessory-hub__card { min-height:178px; display:grid; grid-template-columns:1fr 135px; overflow:hidden; border:1px solid var(--ksa-border); border-radius:18px; background:#fff; color:var(--ksa-ink); box-shadow:0 8px 26px rgba(23,27,36,.04); transition:.2s ease; }
.ks-accessory-hub__card:hover { transform:translateY(-3px); border-color:#d4dbd7; color:var(--ksa-ink); text-decoration:none; box-shadow:0 14px 34px rgba(23,27,36,.085); }
.ks-accessory-hub__card-copy { padding:20px 8px 18px 20px; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.ks-accessory-hub__tag { margin-bottom:8px; color:var(--ksa-green); font-size:.64rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }
.ks-accessory-hub__card-copy strong { font:700 1.02rem/1.25 Montserrat,"Open Sans",Arial,sans-serif; }
.ks-accessory-hub__card-copy > span:not(.ks-accessory-hub__tag):not(.ks-accessory-hub__link) { margin-top:6px; color:var(--ksa-muted); font-size:.75rem; line-height:1.45; }
.ks-accessory-hub__card .ks-accessory-hub__link { margin-top:auto; padding-top:10px; font-size:.72rem; }
.ks-accessory-hub__card-image { display:flex; align-items:center; justify-content:center; padding:10px; background:linear-gradient(145deg,#f8faf9,#f1f5f3); }
.ks-accessory-hub__card-image img { width:100%; height:100%; max-height:145px; object-fit:contain; transition:.22s ease; }
.ks-accessory-hub__card:hover img { transform:scale(1.04); }
.ks-accessory-hub__card--popular { border-color:#cfe2d5; background:#f8fcf9; }

.ks-accessory-hub__finder { margin-top:58px; padding:38px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#164c31,#216d45); box-shadow:0 18px 46px rgba(20,76,49,.16); }
.ks-accessory-hub__finder-copy { max-width:760px; }
.ks-accessory-hub__finder .ks-accessory-hub__kicker--light { color:#d2f3dd !important; }

.ks-accessory-hub__finder h2 { color:#fff !important; font-size:clamp(1.65rem,2.5vw,2.25rem); line-height:1.18; text-shadow:0 1px 1px rgba(0,0,0,.12); }
.ks-accessory-hub__finder-copy p { margin:10px 0 0; color:#eaf7ef !important; font-size:.9rem; line-height:1.6; }
.ks-accessory-hub__finder-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:26px; }
.ks-accessory-hub__finder-card { padding:20px; border:1px solid rgba(255,255,255,.23); border-radius:16px; background:rgba(7,43,27,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.ks-accessory-hub__finder-card strong { display:block; color:#fff !important; font:700 .98rem/1.25 Montserrat,"Open Sans",Arial,sans-serif; }
.ks-accessory-hub__finder-card > span { display:block; min-height:58px; margin-top:7px; color:#e4f3e9 !important; font-size:.76rem; line-height:1.5; }
.ks-accessory-hub__finder-card nav { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ks-accessory-hub__finder-card a { padding:6px 8px; border-radius:8px; color:#143b27; background:#fff; font-size:.66rem; font-weight:800; }
.ks-accessory-hub__finder-card a:hover { text-decoration:none; background:#dff4e6; }

.ks-accessory-hub__crosssell { margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px 32px; border:1px solid #e0e6e2; border-radius:20px; background:#f6f9f7; }
.ks-accessory-hub__crosssell h2 { font-size:1.45rem; }
.ks-accessory-hub__crosssell p { max-width:780px; margin:7px 0 0; color:var(--ksa-muted); font-size:.83rem; }
.ks-accessory-hub__crosssell > a { flex:0 0 auto; padding:12px 18px; border-radius:10px; color:#fff; background:var(--ksa-green); font-size:.78rem; font-weight:800; }
.ks-accessory-hub__crosssell > a:hover { color:#fff; text-decoration:none; background:#175733; }

.ks-accessory-hub__seo { margin:42px 0 22px; display:grid; grid-template-columns:.8fr 1.2fr; gap:42px; padding:31px 34px; border-top:1px solid var(--ksa-border); border-bottom:1px solid var(--ksa-border); }
.ks-accessory-hub__seo h2 { font-size:1.35rem; }
.ks-accessory-hub__seo-copy { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ks-accessory-hub__seo-copy p { margin:0; color:var(--ksa-muted); font-size:.78rem; line-height:1.65; }

@media (max-width:1199px) {
    .ks-accessory-hub__hero { grid-template-columns:1fr 390px; }
    .ks-accessory-hub__hero-copy { padding-left:42px; }
    .ks-accessory-hub__featured-grid { grid-template-columns:1fr 1fr; }
    .ks-accessory-hub__featured--plate { grid-column:span 2; }
    .ks-accessory-hub__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ks-accessory-hub__finder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
    .ks-accessory-hub__hero { display:block; min-height:0; border-radius:20px; }
    .ks-accessory-hub__hero-copy { padding:34px 24px 24px; }
    .ks-accessory-hub__hero h1 { font-size:2rem; }
    .ks-accessory-hub__hero-visual { min-height:260px; }
    .ks-accessory-hub__hero-card--plate { width:180px; height:180px; left:7%; top:28px; }
    .ks-accessory-hub__hero-card--motor { width:135px; height:135px; right:7%; top:15px; }
    .ks-accessory-hub__hero-card--brick { width:105px; height:105px; right:18%; bottom:12px; }
    .ks-accessory-hub__section { padding-top:38px; }
    .ks-accessory-hub__featured-grid,.ks-accessory-hub__grid,.ks-accessory-hub__finder-grid,.ks-accessory-hub__seo,.ks-accessory-hub__seo-copy { grid-template-columns:1fr; }
    .ks-accessory-hub__featured--plate { grid-column:auto; }
    .ks-accessory-hub__featured { min-height:290px; padding:22px; }
    .ks-accessory-hub__card { grid-template-columns:1fr 112px; min-height:165px; }
    .ks-accessory-hub__finder { padding:28px 22px; border-radius:20px; }
    .ks-accessory-hub__finder-card > span { min-height:0; }
    .ks-accessory-hub__crosssell { align-items:flex-start; flex-direction:column; padding:24px; }
    .ks-accessory-hub__seo { gap:18px; padding:25px 5px; }
}
