/* Klemmshop – Klemos Markenwelt */
:root {
    --ks-klemos-ink: #17221c;
    --ks-klemos-muted: #637069;
    --ks-klemos-green: #1f7046;
    --ks-klemos-green-2: #2f8d5c;
    --ks-klemos-green-dark: #123a27;
    --ks-klemos-soft: #eef7f1;
    --ks-klemos-cream: #fbfaf4;
    --ks-klemos-border: #dfe8e2;
    --ks-klemos-radius: 24px;
}

.ks-klemos-hub,
.ks-klemos-hub__content {
    font-family: Inter, "Open Sans", Arial, sans-serif;
    color: var(--ks-klemos-ink);
}

.ks-klemos-hub {
    margin: 0 0 44px;
}

.ks-klemos-hub__hero {
    position: relative;
    overflow: hidden;
    min-height: 545px;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(410px, .96fr);
    gap: 46px;
    align-items: center;
    padding: clamp(38px, 5vw, 74px);
    border-radius: 30px;
    background:
        radial-gradient(circle at 90% 5%, rgba(138,216,165,.19), transparent 34%),
        radial-gradient(circle at 58% 100%, rgba(247,226,139,.10), transparent 31%),
        linear-gradient(135deg, #112b20 0%, #184b32 55%, #1f7046 100%);
    box-shadow: 0 25px 70px rgba(15,48,31,.18);
}

.ks-klemos-hub__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .08;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 2px, transparent 2.6px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.1), #000);
}

.ks-klemos-hub__hero-copy,
.ks-klemos-hub__hero-visual { position: relative; z-index: 2; }

.ks-klemos-hub__brand {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    color: #fff;
    font-family: Montserrat, "Open Sans", Arial, sans-serif;
    font-size: .83rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.ks-klemos-hub__kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--ks-klemos-green);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .115em;
    text-transform: uppercase;
}

.ks-klemos-hub__hero .ks-klemos-hub__kicker { color: #bbebca; }
.ks-klemos-hub__kicker--light { color: #bce9cb; }

.ks-klemos-hub__hero h1 {
    max-width: 720px;
    margin: 0;
    color: #fff;
    font-family: Montserrat, "Open Sans", Arial, sans-serif;
    font-size: clamp(2.15rem, 4vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 800;
}

.ks-klemos-hub__hero-copy > p {
    max-width: 680px;
    margin: 22px 0 0;
    color: rgba(255,255,255,.79);
    font-size: 1.06rem;
    line-height: 1.72;
}

.ks-klemos-hub__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 28px;
}

.ks-klemos-hub__button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 11px;
    font-weight: 800;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.ks-klemos-hub__button:hover { transform: translateY(-2px); }
.ks-klemos-hub__button--primary { color: #123a27 !important; background: #c9f1d6; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.ks-klemos-hub__button--secondary { color: #fff !important; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); }

.ks-klemos-hub__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    margin-top: 31px;
}

.ks-klemos-hub__trust span {
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(255,255,255,.065);
}
.ks-klemos-hub__trust b, .ks-klemos-hub__trust small { display:block; }
.ks-klemos-hub__trust b { color:#fff; font-size:.78rem; }
.ks-klemos-hub__trust small { margin-top:3px; color:rgba(255,255,255,.62); font-size:.68rem; line-height:1.4; }

.ks-klemos-hub__hero-visual { min-height: 430px; }
.ks-klemos-hub__hero-card {
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(0,0,0,.22);
    transition: transform .25s ease, box-shadow .25s ease;
}
.ks-klemos-hub__hero-card:hover { z-index: 8; transform: translateY(-5px) rotate(0deg); box-shadow: 0 30px 65px rgba(0,0,0,.28); }
.ks-klemos-hub__hero-card img { width:100%; height:100%; padding: 22px; object-fit:contain; }
.ks-klemos-hub__hero-card--main { z-index:4; width:62%; height:72%; left:14%; top:14%; transform:rotate(-2deg); }
.ks-klemos-hub__hero-card--side-right { z-index:5; width:38%; height:43%; right:0; top:3%; transform:rotate(5deg); }
.ks-klemos-hub__hero-card--side-left { z-index:5; width:36%; height:40%; left:0; bottom:0; transform:rotate(-5deg); }
.ks-klemos-hub__hero-label {
    position:absolute; z-index:2; left:13px; top:13px; padding:6px 9px; border-radius:999px;
    color:#fff; background:rgba(18,58,39,.9); font-size:.65rem; font-weight:850;
}
.ks-klemos-hub__hero-pool { display:none !important; }

.ks-klemos-hub__content { margin-top: 24px; }
.ks-klemos-hub__section { padding: 32px 0 44px; }
.ks-klemos-hub__section-head { display:flex; justify-content:space-between; gap:30px; margin-bottom:25px; }
.ks-klemos-hub__section-head h2,
.ks-klemos-hub__ideas h2,
.ks-klemos-hub__shop-intro h2,
.ks-klemos-hub__seo h2,
.ks-klemos-hub__why h2 {
    margin:0;
    font-family:Montserrat,"Open Sans",Arial,sans-serif;
    color:var(--ks-klemos-ink);
    font-weight:800;
    letter-spacing:-.035em;
}
.ks-klemos-hub__section-head h2 { font-size:clamp(1.75rem,3vw,2.65rem); }
.ks-klemos-hub__section-head p { max-width:760px; margin:10px 0 0; color:var(--ks-klemos-muted); line-height:1.65; }

.ks-klemos-hub__world-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:minmax(270px,auto);
    gap:16px;
}
.ks-klemos-hub__world {
    position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:300px;
    border:1px solid var(--ks-klemos-border); border-radius:22px; background:#fff;
    box-shadow:0 10px 34px rgba(24,45,34,.055); text-decoration:none !important; color:var(--ks-klemos-ink) !important;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ks-klemos-hub__world:hover { transform:translateY(-4px); border-color:#c8d8ce; box-shadow:0 18px 45px rgba(24,45,34,.11); }
.ks-klemos-hub__world--featured { grid-column:span 2; grid-row:span 2; }
.ks-klemos-hub__world--print { grid-column:span 2; background:linear-gradient(135deg,#173f2c,#267449); border-color:transparent; color:#fff !important; }
.ks-klemos-hub__world-image { min-height:150px; display:flex; align-items:center; justify-content:center; padding:18px; background:linear-gradient(145deg,#fbfcfb,#eef6f0); }
.ks-klemos-hub__world--featured .ks-klemos-hub__world-image { min-height:310px; }
.ks-klemos-hub__world--print .ks-klemos-hub__world-image { background:rgba(255,255,255,.96); margin:15px 15px 0; border-radius:15px; }
.ks-klemos-hub__world-image img { max-width:100%; width:100%; height:180px; object-fit:contain; }
.ks-klemos-hub__world--featured .ks-klemos-hub__world-image img { height:300px; }
.ks-klemos-hub__world-copy { display:flex; flex-direction:column; flex:1; padding:19px 20px 21px; }
.ks-klemos-hub__tag { align-self:flex-start; padding:5px 8px; margin-bottom:9px; border-radius:999px; color:#216b43; background:#e3f3e8; font-size:.65rem; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.ks-klemos-hub__world--print .ks-klemos-hub__tag { color:#17452e; background:#c8efd5; }
.ks-klemos-hub__world-copy strong { font-family:Montserrat,"Open Sans",Arial,sans-serif; font-size:1.08rem; line-height:1.25; }
.ks-klemos-hub__world--featured .ks-klemos-hub__world-copy strong { font-size:1.42rem; }
.ks-klemos-hub__world-copy > span:not(.ks-klemos-hub__tag) { margin-top:7px; color:var(--ks-klemos-muted); font-size:.82rem; line-height:1.52; }
.ks-klemos-hub__world--print .ks-klemos-hub__world-copy > span:not(.ks-klemos-hub__tag) { color:rgba(255,255,255,.76); }
.ks-klemos-hub__world-copy b { margin-top:auto; padding-top:14px; color:var(--ks-klemos-green); font-size:.78rem; }
.ks-klemos-hub__world--print .ks-klemos-hub__world-copy b { color:#d9f5e2; }
.ks-klemos-hub__world-copy i { font-style:normal; }

.ks-klemos-hub__why {
    display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:center; padding:38px;
    border-radius:26px; background:linear-gradient(135deg,#153d2a,#205f3e); color:#fff;
}
.ks-klemos-hub__why h2 { color:#fff; font-size:clamp(1.65rem,2.5vw,2.4rem); }
.ks-klemos-hub__why-copy p { margin:12px 0 0; color:rgba(255,255,255,.72); line-height:1.65; }
.ks-klemos-hub__why-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.ks-klemos-hub__why-grid article { min-height:126px; padding:17px; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(255,255,255,.07); }
.ks-klemos-hub__why-grid article > span { display:block; margin-bottom:10px; color:#bce8c9; font-size:1.35rem; }
.ks-klemos-hub__why-grid strong,.ks-klemos-hub__why-grid small { display:block; }
.ks-klemos-hub__why-grid strong { color:#fff; font-size:.88rem; }
.ks-klemos-hub__why-grid small { margin-top:5px; color:rgba(255,255,255,.66); font-size:.72rem; line-height:1.45; }

.ks-klemos-hub__ideas { display:grid; grid-template-columns:.75fr 1.25fr; gap:30px; align-items:center; margin-top:34px; padding:32px; border:1px solid var(--ks-klemos-border); border-radius:24px; background:var(--ks-klemos-cream); }
.ks-klemos-hub__ideas h2 { font-size:clamp(1.55rem,2.2vw,2.2rem); }
.ks-klemos-hub__ideas-copy p { margin:9px 0 0; color:var(--ks-klemos-muted); }
.ks-klemos-hub__idea-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ks-klemos-hub__idea-links a { display:grid; grid-template-columns:38px 1fr; gap:2px 10px; align-items:center; padding:14px; border:1px solid #e2e6df; border-radius:13px; background:#fff; color:var(--ks-klemos-ink) !important; text-decoration:none !important; transition:transform .2s ease, box-shadow .2s ease; }
.ks-klemos-hub__idea-links a:hover { transform:translateY(-2px); box-shadow:0 9px 25px rgba(30,55,40,.08); }
.ks-klemos-hub__idea-links a > span { grid-row:1/3; font-size:1.35rem; text-align:center; }
.ks-klemos-hub__idea-links strong { font-size:.82rem; }
.ks-klemos-hub__idea-links small { color:var(--ks-klemos-muted); font-size:.67rem; }

.ks-klemos-hub__shop-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:26px; padding:42px 0 24px; }
.ks-klemos-hub__shop-intro h2 { font-size:clamp(1.65rem,2.6vw,2.45rem); }
.ks-klemos-hub__shop-intro p { max-width:760px; margin:10px 0 0; color:var(--ks-klemos-muted); line-height:1.6; }
.ks-klemos-hub__text-link { white-space:nowrap; color:var(--ks-klemos-green) !important; font-weight:800; text-decoration:none !important; }

.ks-klemos-hub__seo { margin:38px 0 18px; padding:28px 30px; border-radius:19px; background:#f4f7f5; }
.ks-klemos-hub__seo h2 { font-size:1.32rem; }
.ks-klemos-hub__seo p { margin:10px 0 0; color:#69746e; font-size:.86rem; line-height:1.65; }

/* Produktkarten nur auf der Klemos-Kategorieseite leicht angleichen */
body:has(.ks-klemos-hub) #product-list .productbox-inner,
body:has(.ks-klemos-hub__content) #product-list .productbox-inner {
    border-radius:16px;
}

@media (max-width: 1100px) {
    .ks-klemos-hub__hero { grid-template-columns:1fr; }
    .ks-klemos-hub__hero-visual { width:min(620px,100%); margin:0 auto; }
    .ks-klemos-hub__world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ks-klemos-hub__world--featured,.ks-klemos-hub__world--print { grid-column:span 2; }
    .ks-klemos-hub__why,.ks-klemos-hub__ideas { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
    .ks-klemos-hub { margin-left:-10px; margin-right:-10px; }
    .ks-klemos-hub__hero { min-height:auto; padding:30px 20px 32px; border-radius:20px; }
    .ks-klemos-hub__hero h1 { font-size:2.25rem; }
    .ks-klemos-hub__trust { grid-template-columns:1fr; }
    .ks-klemos-hub__hero-visual { min-height:330px; }
    .ks-klemos-hub__hero-card--main { width:68%; height:66%; left:13%; top:15%; }
    .ks-klemos-hub__hero-card--side-right { width:38%; height:37%; }
    .ks-klemos-hub__hero-card--side-left { width:38%; height:36%; }
    .ks-klemos-hub__world-grid { grid-template-columns:1fr; }
    .ks-klemos-hub__world--featured,.ks-klemos-hub__world--print { grid-column:span 1; grid-row:span 1; }
    .ks-klemos-hub__world--featured .ks-klemos-hub__world-image { min-height:190px; }
    .ks-klemos-hub__world--featured .ks-klemos-hub__world-image img { height:210px; }
    .ks-klemos-hub__why { padding:25px 19px; border-radius:20px; }
    .ks-klemos-hub__why-grid,.ks-klemos-hub__idea-links { grid-template-columns:1fr; }
    .ks-klemos-hub__ideas { padding:23px 18px; }
    .ks-klemos-hub__shop-intro { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
    .ks-klemos-hub__hero-card,
    .ks-klemos-hub__world,
    .ks-klemos-hub__button,
    .ks-klemos-hub__idea-links a { transition:none !important; }
}