/*
Theme Name: DealPilot
Theme URI: https://dealpilot.de
Description: myDealPilot Theme
Version: 3.0
Author: myDealPilot
Text Domain: dealpilot
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --white:   #ffffff;
    --gray-50: #f5f5f7;
    --gray-100:#e8e8ed;
    --gray-200:#d2d2d7;
    --gray-400:#86868b;
    --gray-600:#424245;
    --gray-800:#1d1d1f;
    --accent:  #0071e3;
    --accent-d:#0077ed;
    --red:     #e63946;
    --success: #1d9b43;
    --r:       12px;
    --r-lg:    18px;
    --r-xl:    24px;
}

html{scroll-behavior:smooth}
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--white);
    color:var(--gray-800);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    font-size:17px;
    line-height:1.47;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── ANIMATIONS ── */
@keyframes float{0%,100%{transform:translateY(0) rotateX(8deg) rotateY(-4deg)}50%{transform:translateY(-16px) rotateX(8deg) rotateY(-4deg)}}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── HERO NAV BUBBLE ── */
.hero-nav.nav-hidden{
    top:-100px;
    opacity:0;
    pointer-events:none;
    transform:translateX(-50%);
}
.hero-nav{
    position:fixed;
    top:20px;left:50%;
    transform:translateX(-50%);
    display:flex;align-items:center;gap:4px;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(120%) blur(8px);
    -webkit-backdrop-filter:saturate(120%) blur(8px);
    border:1px solid rgba(255,255,255,.9);
    border-radius:980px;
    padding:7px 10px 7px 10px;
    box-shadow:0 4px 24px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);
    z-index:200;
    white-space:nowrap;
    overflow:visible;
    transition:top .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.hero-nav__logo{
    display:flex;align-items:center;gap:7px;
    padding:4px 12px 4px 6px;
    border-radius:980px;
    transition:background .15s;
}
.hero-nav__logo:hover{background:rgba(0,0,0,.05)}
.logo-mark{
    width:26px;height:26px;border-radius:7px;
    background:var(--red);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.hero-nav__logo:hover .logo-mark{transform:scale(1.1) rotate(-5deg)}
.logo-mark svg{width:14px;height:14px}
.hero-nav__name{font-size:14px;font-weight:700;letter-spacing:-.3px;color:var(--gray-800)}
.hero-nav__name small{color:var(--gray-400);font-weight:400}
.hero-nav__name b{color:var(--red)}

.hero-nav__sep{width:1px;height:18px;background:var(--gray-200);margin:0 2px;flex-shrink:0}

.hero-nav__links{display:flex;align-items:center;gap:2px}
.hero-nav__links > a{
    padding:8px 16px;border-radius:980px;
    font-size:14px;font-weight:500;color:var(--gray-600);
    transition:background .15s,color .15s;
}
.hero-nav__links > a:hover{background:rgba(0,0,0,.06);color:var(--gray-800)}

/* Sprache */
.hero-nav__lang{
    display:flex;align-items:center;gap:2px;
    padding:4px 6px;
    border-radius:980px;
    background:rgba(0,0,0,.04);
    margin-left:2px;
}
.lang-btn{
    padding:4px 9px;border-radius:980px;border:none;
    font-size:11px;font-weight:600;cursor:pointer;
    font-family:inherit;color:var(--gray-400);background:transparent;
    transition:all .15s;letter-spacing:.3px;
}
.lang-btn.active{background:var(--white);color:var(--gray-800);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.lang-btn:hover:not(.active){color:var(--gray-800)}
.lang-sep{font-size:11px;color:var(--gray-200)}

/* ── HERO ── */
.hero{
    min-height:100vh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:100px 24px 60px;
    background:linear-gradient(180deg,#fbfbfd 0%,#ffffff 100%);
    text-align:center;
    overflow:visible;
    position:relative;
}
.hero-eyebrow{
    font-size:14px;font-weight:600;color:var(--red);
    letter-spacing:.02em;margin-bottom:12px;
    animation:fade .8s ease both;
}
.hero h1{
    font-size:clamp(48px,7vw,96px);
    font-weight:700;letter-spacing:-.04em;
    line-height:1.05;color:var(--gray-800);
    margin-bottom:16px;
    animation:up .7s .05s ease both;
}
.hero h1 span{color:var(--red)}
.hero-sub{
    font-size:clamp(15px,2vw,19px);
    font-weight:400;color:var(--gray-400);
    max-width:480px;margin:0 auto 28px;
    line-height:1.5;letter-spacing:-.01em;
    animation:up .7s .1s ease both;
}
.hero-search{
    display:flex;align-items:center;gap:10px;
    max-width:460px;width:100%;margin:0 auto 20px;
    background:var(--white);
    border:1px solid var(--gray-200);
    border-radius:980px;
    padding:6px 6px 6px 20px;
    box-shadow:0 2px 16px rgba(0,0,0,.07);
    transition:box-shadow .2s,border-color .2s;
    animation:up .7s .15s ease both;
}
.hero-search:focus-within{
    box-shadow:0 0 0 4px rgba(0,113,227,.12);
    border-color:var(--accent);
}
.hero-search input{
    flex:1;border:none;outline:none;
    font-size:14px;color:var(--gray-800);
    font-family:inherit;background:transparent;
    padding:6px 0;
}
.hero-search input::placeholder{color:var(--gray-400)}
.hero-search button{
    background:var(--gray-800);color:#fff;border:none;
    padding:9px 20px;border-radius:980px;
    font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
    transition:background .15s;flex-shrink:0;
}
.hero-search button:hover{background:var(--gray-600)}
.hero-btns{
    display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
    margin-bottom:56px;
    animation:up .7s .2s ease both;
}
.btn-blue{
    padding:14px 28px;border-radius:980px;
    background:var(--red);color:#fff;
    font-size:17px;font-weight:400;font-family:inherit;
    border:none;cursor:pointer;
    transition:background .15s;
}
.btn-blue:hover{background:#c1121f}
.btn-text{
    padding:14px 4px;border-radius:980px;
    font-size:17px;font-weight:400;color:var(--accent);
    display:inline-flex;align-items:center;gap:5px;
    font-family:inherit;border:none;background:none;cursor:pointer;
}
.btn-text:hover{text-decoration:underline}

/* ── DEVICE MOCKUP ── */
.scene{
    width:100%;max-width:900px;margin:0 auto;
    perspective:1200px;
    animation:float 6s ease-in-out infinite;
}
.device{
    transform:rotateX(8deg) rotateY(-4deg);
    transform-style:preserve-3d;
    border-radius:18px;
    box-shadow:
        0 60px 120px rgba(0,0,0,.18),
        0 30px 60px rgba(0,0,0,.12),
        0 0 0 1px rgba(0,0,0,.08);
    overflow:hidden;
    background:#1d1d1f;
}
.device-bar{
    height:38px;background:#2a2a2c;
    display:flex;align-items:center;padding:0 16px;gap:7px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.dc{width:12px;height:12px;border-radius:50%}
.dc-r{background:#ff5f57}.dc-y{background:#febc2e}.dc-g{background:#28c840}
.device-url{
    flex:1;text-align:center;
    background:rgba(255,255,255,.08);border-radius:5px;
    padding:4px 16px;font-size:12px;color:rgba(255,255,255,.45);
    max-width:260px;margin:0 auto;
}
.device-body{
    display:grid;grid-template-columns:200px 1fr;
    min-height:460px;background:#0f0f10;
}

/* Mock sidebar */
.db-side{
    background:#111113;border-right:1px solid rgba(255,255,255,.06);
    padding:18px 12px;display:flex;flex-direction:column;gap:3px;
}
.db-brand{
    display:flex;align-items:center;gap:8px;
    padding:6px 10px;margin-bottom:14px;
    font-size:12px;font-weight:700;color:#fff;
}
.db-icon{
    width:22px;height:22px;border-radius:6px;
    background:var(--red);display:flex;align-items:center;justify-content:center;
}
.db-icon svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
.db-item{
    display:flex;align-items:center;gap:8px;
    padding:6px 10px;border-radius:7px;
    font-size:11px;color:rgba(255,255,255,.4);
}
.db-item.on{background:rgba(255,255,255,.07);color:#fff}
.db-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.12);flex-shrink:0}
.db-item.on .db-dot{background:var(--red)}

/* Mock main */
.db-main{padding:20px;overflow:hidden}
.db-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.db-title{font-size:13px;font-weight:700;color:#fff}
.db-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px;background:rgba(230,57,70,.2);color:#ff6b6b}
.db-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.db-card{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
    border-radius:9px;padding:12px;
}
.db-card-n{font-size:22px;font-weight:800;line-height:1;color:#fff}
.db-card-n.r{color:#ff6b6b}.db-card-n.g{color:#30d158}.db-card-n.b{color:#5ac8fa}
.db-card-l{font-size:9px;color:rgba(255,255,255,.3);margin-top:3px}
.db-rows{display:flex;flex-direction:column;gap:6px}
.db-row{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
    border-radius:8px;padding:10px 12px;
    display:flex;align-items:center;justify-content:space-between;
}
.db-row-l{display:flex;align-items:center;gap:8px}
.db-row-img{
    width:28px;height:28px;border-radius:6px;
    background:rgba(255,255,255,.08);display:flex;align-items:center;
    justify-content:center;font-size:14px;flex-shrink:0;
}
.db-row-name{font-size:10px;font-weight:600;color:#fff}
.db-row-sub{font-size:9px;color:rgba(255,255,255,.3);margin-top:1px}
.db-row-price{font-size:11px;font-weight:700;color:#fff}
.db-row-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px}
.t-r{background:rgba(230,57,70,.2);color:#ff6b6b}
.t-g{background:rgba(48,209,88,.15);color:#30d158}
.t-b{background:rgba(90,200,250,.15);color:#5ac8fa}

/* ── SECTIONS ── */
.section{padding:80px 24px;text-align:center}
.section-inner{max-width:980px;margin:0 auto}
.section-dark{background:var(--gray-800);padding:80px 24px}
.section-dark-inner{max-width:980px;margin:0 auto;text-align:center}
.section-gray{background:var(--gray-50);padding:80px 24px}
.section-gray-inner{max-width:980px;margin:0 auto;text-align:center}

.eyebrow{font-size:17px;font-weight:600;color:var(--red);letter-spacing:-.02em;margin-bottom:8px}
.eyebrow-light{font-size:17px;font-weight:600;color:#ff6b6b;letter-spacing:-.02em;margin-bottom:8px}
.section h2,h2.section-h{
    font-size:clamp(36px,5vw,64px);font-weight:700;
    letter-spacing:-.04em;line-height:1.07;
    margin-bottom:16px;color:var(--gray-800);
}
h2.light{color:#fff}
.lead{font-size:clamp(17px,2vw,21px);color:var(--gray-400);line-height:1.5;max-width:640px;margin:0 auto 56px}
.lead-dark{font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.55);line-height:1.5;max-width:640px;margin:0 auto 56px}

/* ── PRODUCT GRID ── */
.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:16px;
    text-align:left;
}

/* ── PRODUCT CARD ── */
.product-card{
    background:var(--white);
    border:1px solid var(--gray-100);
    border-radius:var(--r-xl);
    overflow:hidden;
    display:flex;flex-direction:column;
    position:relative;
    transition:transform .4s ease,box-shadow .4s ease,border-color .2s;
}
.product-card:hover{
    transform:scale(1.025);
    box-shadow:0 20px 60px rgba(0,0,0,.1);
    border-color:var(--gray-200);
}
.section-dark .product-card{background:#2c2c2e;border-color:rgba(255,255,255,.08)}
.section-gray .product-card{background:var(--white)}

.product-card__badge{
    position:absolute;top:14px;left:14px;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);
    color:#fff;font-size:11px;font-weight:600;
    padding:4px 10px;border-radius:980px;
    z-index:2;letter-spacing:.2px;
}
.product-card__badge.hot{background:rgba(230,57,70,.8)}

.product-card__img-wrap{overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.product-card__img{width:100%;height:210px;object-fit:contain;padding:12px;transition:transform .5s ease}
.product-card:hover .product-card__img{transform:scale(1.05)}
.product-card__img-placeholder{height:210px;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--gray-200)}

.product-card__body{padding:20px;flex:1;display:flex;flex-direction:column}
.product-card__cat{font-size:11px;font-weight:600;color:var(--red);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.product-card__title{font-size:15px;font-weight:600;line-height:1.4;margin-bottom:6px;letter-spacing:-.2px;color:var(--gray-800)}
.section-dark .product-card__title{color:#f5f5f7}
.product-card__title a:hover{color:var(--red)}
.product-card__desc{font-size:13px;color:var(--gray-400);line-height:1.6;flex:1;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product-card__stars{display:flex;gap:2px;margin-bottom:12px}
.star{color:#f59e0b;font-size:12px}
.star.empty{color:var(--gray-100)}

.product-card__foot{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:12px;border-top:1px solid var(--gray-100);
    gap:10px;
}
.section-dark .product-card__foot{border-top-color:rgba(255,255,255,.07)}
.price{font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--gray-800)}
.section-dark .price{color:#f5f5f7}
.price-old{font-size:12px;color:var(--gray-400);text-decoration:line-through;display:block}
.btn-card{
    flex-shrink:0;
    background:var(--accent);color:#fff;
    font-size:13px;font-weight:600;
    padding:8px 18px;border-radius:980px;
    border:none;cursor:pointer;font-family:inherit;
    transition:background .15s,transform .15s;
    white-space:nowrap;
}
.btn-card:hover{background:var(--accent-d);transform:scale(1.03)}

/* ── PILLS ── */
.pills-wrap{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:48px}
.pill{
    padding:6px 16px;border-radius:980px;
    background:transparent;border:1px solid var(--gray-200);
    font-size:13px;font-weight:500;cursor:pointer;
    color:var(--gray-400);transition:all .2s;
}
.pill:hover{color:var(--gray-800);border-color:var(--gray-400)}
.pill.active{background:var(--gray-800);border-color:var(--gray-800);color:#fff}
.section-dark .pill{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.5)}
.section-dark .pill:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.section-dark .pill.active{background:#fff;border-color:#fff;color:var(--gray-800)}

/* ── FEATURE TILES ── */
.feature-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:2px;max-width:980px;margin:0 auto;
}
.feature-tile{
    background:#2c2c2e;padding:44px 32px;text-align:center;
    transition:background .2s;
}
.feature-tile:first-child{border-radius:18px 0 0 18px}
.feature-tile:last-child{border-radius:0 18px 18px 0}
.feature-tile:hover{background:#3a3a3c}
.feature-icon{font-size:2.2rem;margin-bottom:16px}
.feature-tile h3{font-size:17px;font-weight:600;color:#f5f5f7;margin-bottom:8px;letter-spacing:-.3px}
.feature-tile p{font-size:13px;color:rgba(245,245,247,.5);line-height:1.65}

/* ── SEARCH BAR ── */
.search-section{padding:80px 24px;text-align:center;background:var(--gray-50)}
.search-section h2{font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.04em;margin-bottom:8px}
.search-section p{font-size:15px;color:var(--gray-400);margin-bottom:28px}
.search-bar{
    display:flex;max-width:480px;margin:0 auto;
    background:var(--white);border-radius:980px;
    border:1px solid var(--gray-200);
    align-items:center;padding:5px 5px 5px 22px;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    transition:box-shadow .2s,border-color .2s;
}
.search-bar:focus-within{box-shadow:0 0 0 4px rgba(0,113,227,.15);border-color:var(--accent)}
.search-bar input{
    flex:1;background:none;border:none;outline:none;
    font-size:15px;color:var(--gray-800);font-family:inherit;padding:9px 0;
}
.search-bar input::placeholder{color:var(--gray-400)}
.search-bar button{
    background:var(--gray-800);color:#fff;border:none;
    padding:9px 22px;border-radius:980px;
    font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
    transition:background .15s;
}
.search-bar button:hover{background:var(--gray-600)}

/* ── EINZELPRODUKT ── */
.single-wrap{
    max-width:1100px;margin:80px auto;padding:0 24px 80px;
}
.single-top{
    display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:48px;
}
.single-img{max-height:500px}
.single-desc-full{font-size:16px;line-height:1.7;color:var(--text)}
.single-desc-full h2{font-size:20px;font-weight:700;margin:24px 0 8px;color:var(--gray-900)}
.single-desc-full ul{padding-left:20px;margin:8px 0}
.single-desc-full li{margin-bottom:6px}
.single-img{border-radius:var(--r-xl);width:100%;object-fit:contain;background:#fff;padding:24px}
.single-img-placeholder{border-radius:var(--r-xl);height:400px;background:var(--gray-50);display:flex;align-items:center;justify-content:center;font-size:5rem;color:var(--gray-200)}
.single-cat{font-size:11px;font-weight:600;color:var(--red);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.single-title{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.1;margin-bottom:16px}
.single-price-row{
    display:flex;align-items:center;gap:12px;
    padding:18px 20px;background:var(--gray-50);
    border-radius:14px;margin-bottom:24px;
    border:1px solid var(--gray-100);
}
.single-price{font-size:clamp(28px,4vw,38px);font-weight:700;letter-spacing:-.04em}
.single-price-old{font-size:14px;color:var(--gray-400);text-decoration:line-through}
.single-save{margin-left:auto;background:#dcfce7;color:#166534;font-size:12px;font-weight:600;padding:4px 12px;border-radius:980px}
.single-desc{font-size:15px;color:var(--gray-400);line-height:1.75;margin-bottom:24px}
.single-meta{border:1px solid var(--gray-100);border-radius:14px;overflow:hidden;margin-bottom:22px}
.meta-row{display:flex;justify-content:space-between;padding:12px 16px;font-size:14px}
.meta-row:nth-child(even){background:var(--gray-50)}
.meta-row:not(:last-child){border-bottom:1px solid var(--gray-100)}
.meta-row strong{font-weight:600}
.meta-row span{color:var(--gray-400)}
.btn-buy{
    display:flex;align-items:center;justify-content:center;gap:6px;
    width:100%;padding:16px;
    background:var(--red);color:#fff;
    border:none;border-radius:14px;
    font-size:17px;font-weight:400;cursor:pointer;font-family:inherit;
    transition:background .15s;
}
.btn-buy:hover{background:#c1121f}
.single-disclaimer{font-size:12px;color:var(--gray-400);margin-top:10px;text-align:center;line-height:1.5}

/* ── USER BEWERTUNGEN ── */
.reviews-wrap{max-width:800px;margin:48px auto 80px;padding:0 24px}
.reviews-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--gray-100)}
.reviews-header h2{font-size:22px;font-weight:700;letter-spacing:-.03em;margin:0}
.reviews-avg{display:flex;align-items:center;gap:12px}
.reviews-avg__score{font-size:36px;font-weight:800;color:var(--gray-800);line-height:1}
.reviews-avg__stars .rstar{font-size:18px;color:var(--gray-200)}
.reviews-avg__stars .rstar.on{color:#f59e0b}
.reviews-avg__count{font-size:12px;color:var(--gray-400);margin-top:2px;display:block}
.reviews-list{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.review-item{background:#fff;border:1px solid var(--gray-100);border-radius:14px;padding:18px 20px}
.review-item__head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.review-item__head strong{font-size:14px;font-weight:600;color:var(--gray-800)}
.review-item__stars .rstar{font-size:14px;color:var(--gray-200)}
.review-item__stars .rstar.on{color:#f59e0b}
.review-item__date{font-size:12px;color:var(--gray-400);margin-left:auto}
.review-item__text{font-size:14px;color:var(--gray-600);line-height:1.6;margin:0}
.reviews-none{font-size:14px;color:var(--gray-400);text-align:center;padding:32px 0}
/* Formular */
.review-form-wrap{background:#fff;border:1px solid var(--gray-100);border-radius:18px;padding:28px}
.review-form-wrap h3{font-size:17px;font-weight:700;margin:0 0 20px;letter-spacing:-.02em}
.review-stars-select{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.review-stars-select span{font-size:13px;font-weight:500;color:var(--gray-600)}
.star-picker{display:flex;gap:4px;cursor:pointer}
.rstar-pick{font-size:24px;color:var(--gray-200);transition:color .1s;line-height:1}
.rstar-pick.on,.rstar-pick.selected{color:#f59e0b}
.review-form__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.review-form input,.review-form textarea{
    width:100%;box-sizing:border-box;
    border:1px solid var(--gray-100);border-radius:10px;
    padding:10px 14px;font-size:14px;font-family:inherit;
    background:var(--gray-50);color:var(--gray-800);
    transition:border-color .15s;
}
.review-form input:focus,.review-form textarea:focus{outline:none;border-color:var(--gray-400);background:#fff}
.review-form textarea{resize:vertical;margin-bottom:12px}
.review-form button{
    background:var(--gray-800);color:#fff;border:none;
    padding:11px 24px;border-radius:10px;font-size:14px;
    font-weight:600;font-family:inherit;cursor:pointer;
    transition:background .15s;
}
.review-form button:hover{background:#424245}
@media(max-width:600px){
    .review-form__row{grid-template-columns:1fr}
    .reviews-wrap{padding:0 16px}
}

/* ── BREADCRUMB ── */
.breadcrumb{max-width:980px;margin:0 auto;padding:20px 24px;font-size:12px;color:var(--gray-400);display:flex;gap:6px;align-items:center}
.breadcrumb a{color:var(--accent);transition:opacity .15s}
.breadcrumb a:hover{opacity:.7}
.breadcrumb-sep{opacity:.4}

/* ── BACK BUTTON ── */
.back-btn{
    display:inline-flex;align-items:center;gap:6px;
    margin:24px 24px 0;
    background:none;border:none;cursor:pointer;
    font-size:14px;font-weight:500;color:var(--gray-500);
    padding:8px 12px;border-radius:8px;
    transition:background .15s,color .15s;
}
.back-btn:hover{background:var(--gray-50);color:var(--gray-800)}

/* ── PAGINATION ── */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:56px}
.pagination a,.pagination span{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px;font-weight:500;border:1px solid var(--gray-200);background:var(--white);color:var(--gray-400);transition:all .15s}
.pagination .current,.pagination a:hover{background:var(--gray-800);border-color:var(--gray-800);color:#fff}

/* ── FOOTER ── */
.site-footer{background:var(--gray-50);border-top:1px solid var(--gray-100);padding:52px 24px 32px}
.footer-inner{max-width:980px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--gray-100)}
.footer-col h4{font-size:12px;font-weight:600;color:var(--gray-800);margin-bottom:14px;letter-spacing:.01em}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:13px;color:var(--gray-400);transition:color .15s}
.footer-col a:hover{color:var(--gray-800)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--gray-400);flex-wrap:wrap;gap:8px}

/* ── HAMBURGER ── */
.nav-hamburger{
    display:none;
    flex-direction:column;justify-content:center;gap:5px;
    width:36px;height:36px;padding:6px;
    background:transparent;border:none;cursor:pointer;border-radius:8px;
    transition:background .15s;
}
.nav-hamburger:hover{background:rgba(0,0,0,.06)}
.nav-hamburger span{display:block;height:1.5px;background:var(--gray-800);border-radius:2px;transition:all .25s ease}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}


/* ── KATEGORIEN DROPDOWN ── */
.nav-cats{position:relative}

.nav-cats__trigger,
.hero-nav__cats-btn{
    display:flex;align-items:center;gap:6px;
    padding:6px 13px;border-radius:980px;
    background:transparent;border:none;
    font-size:13px;font-weight:500;color:var(--gray-600);
    cursor:pointer;font-family:inherit;
    transition:background .15s,color .15s;white-space:nowrap;
}
.nav-cats__trigger:hover,
.hero-nav__cats-btn:hover{background:rgba(0,0,0,.06);color:var(--gray-800)}
.nav-cats__trigger.open,
.hero-nav__cats-btn.open{background:var(--white);color:var(--gray-800);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.nav-cats__arrow{transition:transform .25s ease;flex-shrink:0}
.nav-cats__trigger.open .nav-cats__arrow{transform:rotate(180deg)}

.nav-cats__dropdown{
    position:absolute;top:calc(100% + 10px);right:0;
    width:280px;
    background:#fff;
    border:1px solid var(--gray-100);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.06);
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px) scale(.97);
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
    z-index:500;
}
.nav-cats__dropdown.open{
    opacity:1;transform:none;pointer-events:all;
}

.nav-cats__search{
    display:flex;align-items:center;gap:8px;
    padding:12px 16px;
    border-bottom:1px solid var(--gray-100);
}
.nav-cats__search input{
    flex:1;border:none;outline:none;
    font-size:13px;color:var(--gray-800);
    font-family:inherit;background:transparent;
}
.nav-cats__search input::placeholder{color:var(--gray-400)}

.nav-cats__list{
    max-height:320px;overflow-y:auto;
    padding:6px;
}
.nav-cats__list::-webkit-scrollbar{width:4px}
.nav-cats__list::-webkit-scrollbar-track{background:transparent}
.nav-cats__list::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:4px}

.cat-item{border-radius:10px;overflow:hidden}
.cat-item__link{
    display:flex;align-items:center;gap:6px;
    padding:9px 12px;border-radius:10px;
    font-size:13px;font-weight:500;color:var(--gray-800);
    transition:background .15s;cursor:pointer;
}
.cat-item__link:hover{background:var(--gray-50)}
.cat-item__name{flex:1}
.cat-item__count{
    font-size:11px;color:var(--gray-400);
    background:var(--gray-50);padding:2px 7px;
    border-radius:980px;min-width:24px;text-align:center;
}
.cat-item__chevron{color:var(--gray-400);flex-shrink:0;transition:transform .2s}
.cat-item.open .cat-item__chevron{transform:rotate(90deg)}

.cat-item__sub{
    display:none;
    padding:0 6px 6px 16px;
    flex-direction:column;gap:1px;
}
.cat-item.open .cat-item__sub{display:flex}
.cat-sub__link{
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 10px;border-radius:8px;
    font-size:12px;color:var(--gray-600);
    transition:background .15s,color .15s;
}
.cat-sub__link:hover{background:var(--gray-50);color:var(--gray-800)}
.cat-sub__link span{font-size:11px;color:var(--gray-400)}

.cat-item.hidden{display:none}

.nav-cats__all{
    display:block;
    padding:12px 16px;
    font-size:12px;font-weight:600;color:var(--accent);
    border-top:1px solid var(--gray-100);
    transition:background .15s;
    text-align:center;
}
.nav-cats__all:hover{background:var(--gray-50)}

/* ── LEGAL PAGES ── */
.legal-page{background:var(--gray-50);min-height:100vh;padding:96px 24px 80px}
.legal-page__inner{max-width:900px;margin:0 auto}
.legal-content h1{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.04em;margin-bottom:32px;color:var(--gray-800)}
.legal-body{font-size:15px;line-height:1.75;color:var(--gray-600)}
.legal-body h2{font-size:20px;font-weight:700;color:var(--gray-800);margin:36px 0 10px;letter-spacing:-.02em}
.legal-body h3{font-size:16px;font-weight:600;color:var(--gray-800);margin:24px 0 8px}
.legal-body p{margin-bottom:14px}
.legal-body ul,.legal-body ol{padding-left:20px;margin-bottom:14px}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--accent);text-decoration:underline}
.legal-body strong{color:var(--gray-800)}
.legal-body hr{border:none;border-top:1px solid var(--gray-100);margin:32px 0}

/* ── ARCHIVE LAYOUT ── */
.archive-wrap{background:var(--gray-50);min-height:100vh;padding-top:96px}
.archive-inner{
    max-width:1200px;margin:0 auto;padding:0 24px 80px;
    display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;
}
.archive-content{}
.archive-topbar{
    display:flex;align-items:flex-start;justify-content:space-between;
    flex-wrap:wrap;gap:12px;
    margin-bottom:24px;
    padding-bottom:20px;
    border-bottom:1px solid var(--gray-100);
}
.archive-topbar__left{display:flex;flex-direction:column;gap:4px}
.archive-title{font-size:clamp(22px,3vw,32px);font-weight:700;letter-spacing:-.04em;margin:0}
.archive-count{font-size:13px;color:var(--gray-400)}
.archive-topbar__right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.archive-topbar__sort{display:flex;gap:6px;flex-wrap:wrap}
.view-toggle{display:flex;gap:4px;border:1px solid var(--gray-100);border-radius:10px;padding:3px;background:#fff}
.view-btn{
    width:32px;height:32px;border-radius:7px;border:none;
    background:transparent;color:var(--gray-400);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .15s;
}
.view-btn.active{background:var(--gray-800);color:#fff}
.view-btn:hover:not(.active){background:var(--gray-50);color:var(--gray-800)}

/* Listenansicht */
.product-list{display:flex;flex-direction:column;gap:12px}
.product-list .product-card{
    display:grid;
    grid-template-columns:140px 1fr;
    border-radius:14px;
}
.product-list .product-card__img-wrap{
    height:140px;border-radius:12px 0 0 12px;overflow:hidden;
}
.product-list .product-card__img{
    width:100%;height:100%;object-fit:contain;border-radius:12px 0 0 12px;padding:8px;background:#fff;
}
.product-list .product-card__img-placeholder{
    height:140px;border-radius:12px 0 0 12px;
    display:flex;align-items:center;justify-content:center;font-size:2rem;
}
.product-list .product-card__body{
    padding:16px 20px;display:flex;flex-direction:column;justify-content:space-between;
}
.product-list .product-card__foot{
    display:flex;align-items:center;gap:12px;
}
@media(max-width:600px){
    .product-list .product-card{grid-template-columns:100px 1fr}
    .product-list .product-card__img-wrap{height:100px}
    .product-list .product-card__img-placeholder{height:100px}
}
.sort-pill{
    padding:7px 14px;border-radius:980px;
    font-size:13px;font-weight:500;color:var(--gray-600);
    border:1px solid var(--gray-100);background:#fff;
    transition:all .15s;white-space:nowrap;
}
.sort-pill:hover{border-color:var(--gray-400);color:var(--gray-800)}
.sort-pill.active{background:var(--gray-800);color:#fff;border-color:var(--gray-800)}
.no-results{text-align:center;padding:80px 0;color:var(--gray-400)}

/* Preis-Range Slider */
.price-range-wrap{padding:4px 0 0}
.price-range-track{
    position:relative;height:4px;
    background:var(--gray-100);border-radius:2px;
    margin:22px 0 24px;
}
.price-range-fill{
    position:absolute;height:100%;background:var(--gray-800);border-radius:2px;
    pointer-events:none;
}
/* Sichtbare Griff-Kreise */
.price-thumb{
    position:absolute;top:50%;transform:translateY(-50%);
    width:20px;height:20px;border-radius:50%;
    background:#fff;border:2.5px solid var(--gray-800);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
    cursor:grab;z-index:2;
    transition:transform .1s,box-shadow .1s;
    touch-action:none;user-select:none;
}
.price-thumb:active{cursor:grabbing;transform:translateY(-50%) scale(1.2)}
.price-thumb:hover,.price-slider:active + .price-thumb{
    transform:translateY(-50%) scale(1.15);
    box-shadow:0 4px 12px rgba(0,0,0,.22);
}
/* Unsichtbare Slider darüber */
.price-slider{
    position:absolute;top:50%;
    width:100%;height:28px;
    transform:translateY(-50%);
    opacity:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;margin:0;
    background:transparent;z-index:5;
}
.price-slider::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:28px;height:28px;border-radius:50%;cursor:pointer;
}
.price-slider::-moz-range-thumb{
    width:28px;height:28px;border-radius:50%;
    cursor:pointer;border:none;background:transparent;
}
/* Eingabefelder */
.price-inputs{
    display:flex;align-items:center;gap:6px;margin-bottom:10px;
}
.price-input-group{
    flex:1;display:flex;align-items:center;gap:4px;
    background:var(--gray-50);border:1px solid var(--gray-100);
    border-radius:8px;padding:7px 8px;
    transition:border-color .15s;
}
.price-input-group:focus-within{border-color:var(--gray-400)}
.price-input-group span{font-size:12px;color:var(--gray-400);flex-shrink:0}
.price-input-group input{
    width:100%;border:none;background:transparent;
    font-size:13px;font-weight:600;color:var(--gray-800);
    font-family:inherit;text-align:center;
    -moz-appearance:textfield;
}
.price-input-group input::placeholder{color:var(--gray-300);font-weight:400}
.price-input-group input::-webkit-inner-spin-button,
.price-input-group input::-webkit-outer-spin-button{-webkit-appearance:none}
.price-input-group input:focus{outline:none}
.price-input-sep{font-size:13px;color:var(--gray-300);flex-shrink:0}
.price-apply-btn{
    width:100%;padding:9px;border-radius:8px;
    background:var(--gray-800);color:#fff;
    border:none;font-size:13px;font-weight:600;cursor:pointer;
    font-family:inherit;transition:background .15s;margin-top:4px;
}
.price-apply-btn:hover{background:#424245}

@media(max-width:768px){
    .archive-inner{grid-template-columns:1fr}
    .archive-topbar{flex-direction:column}
}

/* ── FILTER SIDEBAR ── */
.filter-sidebar{
    background:var(--white);
    border:1px solid var(--gray-100);
    border-radius:18px;
    padding:20px;
    position:sticky;
    top:80px;
}
.filter-block{margin-bottom:24px}
.filter-block:last-of-type{margin-bottom:16px}
.filter-block__title{
    font-size:11px;font-weight:600;
    text-transform:uppercase;letter-spacing:.8px;
    color:var(--gray-400);margin-bottom:10px;
}
.filter-block__list{display:flex;flex-direction:column;gap:2px}
.filter-radio{
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 10px;border-radius:8px;
    font-size:13px;font-weight:500;color:var(--gray-600);
    cursor:pointer;transition:background .15s,color .15s;
}
.filter-radio input{display:none}
.filter-radio:hover{background:var(--gray-50);color:var(--gray-800)}
.filter-radio.active{background:var(--gray-800);color:#fff}
.filter-radio span{
    font-size:11px;padding:2px 7px;border-radius:980px;
    background:var(--gray-50);color:var(--gray-400);
}
.filter-radio.active span{background:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}
.filter-cat-group{}
.filter-cat-top{display:flex;align-items:center;gap:4px}
.filter-cat-top .filter-radio{flex:1}
.filter-cat-toggle{
    background:none;border:none;cursor:pointer;padding:6px;
    color:var(--gray-400);border-radius:6px;transition:transform .2s,color .15s;
    flex-shrink:0;
}
.filter-cat-toggle:hover{color:var(--gray-800)}
.filter-cat-group.open .filter-cat-toggle{transform:rotate(180deg)}
.filter-cat-children{
    display:none;flex-direction:column;gap:2px;
    margin-top:2px;
}
.filter-cat-group.open .filter-cat-children{display:flex}
.filter-radio--child{padding-left:22px !important;font-size:13px}

.filter-reset{
    display:block;text-align:center;
    font-size:12px;color:var(--gray-400);
    padding:8px;border-radius:8px;
    border:1px solid var(--gray-100);
    transition:all .15s;
}
.filter-reset:hover{border-color:var(--gray-400);color:var(--gray-800)}

@media(max-width:768px){
    .filter-sidebar{position:static;border-radius:12px}
    [style*="grid-template-columns:240px"]{grid-template-columns:1fr !important}
}

/* ── AFFILIATE NOTE auf Karte ── */
.product-card__aff-note{
    font-size:10px;color:var(--gray-400);
    margin-top:8px;padding-top:8px;
    border-top:1px solid var(--gray-100);
    line-height:1.4;
}
/* ── PREIS GEPRÜFT AM ── */
.product-card__price-check{
    font-size:10px;color:var(--gray-300);
    margin-top:8px;line-height:1.3;
}
.single-price-check{
    font-size:12px;color:var(--gray-400);
    margin-top:8px;
}

/* ── AMAZON PFLICHTHINWEIS im Footer ── */
.footer-amazon-note{
    font-size:12px;color:var(--gray-400);
    text-align:center;
    padding:12px 16px;
    background:rgba(255,153,0,.08);
    border:1px solid rgba(255,153,0,.2);
    border-radius:8px;
    margin-bottom:32px;
}

/* ── COOKIE CONSENT ── */
.ck-overlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:flex-end;justify-content:center;
    padding:0 0 24px;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    transition:opacity .25s ease;
}
.ck-box{
    width:100%;max-width:520px;
    background:#fff;
    border:1px solid var(--gray-100);
    border-radius:20px;
    padding:24px;
    box-shadow:0 24px 64px rgba(0,0,0,.14);
    margin:0 16px;
}
.ck-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:14px;
}
.ck-logo{display:flex;align-items:center;gap:8px}
.ck-label{
    font-size:11px;font-weight:600;letter-spacing:.6px;
    text-transform:uppercase;color:var(--gray-400);
}
.ck-text{
    font-size:13px;color:var(--gray-400);line-height:1.6;
    margin-bottom:16px;
}
.ck-text a{color:var(--accent)}
.ck-rows{
    border:1px solid var(--gray-100);border-radius:12px;
    overflow:hidden;margin-bottom:16px;
}
.ck-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;gap:12px;
}
.ck-row__info{flex:1}
.ck-row__name{font-size:13px;font-weight:600;color:var(--gray-800);display:block}
.ck-row__desc{font-size:11px;color:var(--gray-400);margin-top:2px;display:block;line-height:1.4}
.ck-switch{
    width:38px;height:22px;border-radius:980px;
    background:var(--gray-200);flex-shrink:0;
    position:relative;transition:background .2s;
}
.ck-switch--on{background:var(--accent)}
.ck-switch__dot{
    position:absolute;top:3px;left:3px;
    width:16px;height:16px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
    transition:transform .2s;
}
.ck-switch--on .ck-switch__dot{transform:translateX(16px)}
.ck-actions{display:flex;gap:8px;margin-bottom:14px}
.ck-btn{
    flex:1;padding:11px 16px;border-radius:10px;border:none;
    font-size:13px;font-weight:600;cursor:pointer;
    font-family:inherit;transition:all .15s;
}
.ck-btn--primary{background:var(--gray-800);color:#fff}
.ck-btn--primary:hover{background:var(--gray-600)}
.ck-btn--secondary{
    background:transparent;color:var(--gray-600);
    border:1px solid var(--gray-200);
}
.ck-btn--secondary:hover{background:var(--gray-50);border-color:var(--gray-400)}
.ck-footer{
    display:flex;align-items:center;justify-content:center;
    gap:8px;font-size:11px;color:var(--gray-400);
}
.ck-footer a{color:var(--gray-400);transition:color .15s}
.ck-footer a:hover{color:var(--gray-800)}
@media(max-width:480px){
    .ck-overlay{padding:0;align-items:flex-end}
    .ck-box{border-radius:20px 20px 0 0;margin:0;max-width:100%}
    .ck-actions{flex-direction:column-reverse}
}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ── RESPONSIVE ── */

/* Tablet (≤900px) */
@media(max-width:900px){
    .hero-nav{
        top:12px;
        padding:4px 5px;
        gap:2px;
    }
    .hero-nav__links > a{padding:6px 10px;font-size:12px}
    .hero-nav__name{font-size:13px}
    .feature-grid{grid-template-columns:1fr 1fr;gap:2px}
    .feature-tile:first-child{border-radius:18px 0 0 0}
    .feature-tile:nth-child(2){border-radius:0 18px 0 0}
    .feature-tile:last-child{border-radius:0 0 18px 18px;grid-column:1/-1}
    .section-gray-inner,.section-dark-inner{padding:0 16px}
}

/* Mobil (≤768px) */
@media(max-width:768px){
    /* Nav Bubble: kompakt, Logo links, Hamburger rechts */
    .hero-nav{
        top:10px;
        left:12px;right:12px;
        transform:none;
        width:calc(100% - 24px);
        border-radius:18px;
        padding:6px 10px;
        justify-content:space-between;
    }
    .nav-hamburger{display:flex}
    .hero-nav__links{
        display:none;
        position:absolute;
        top:calc(100% + 10px);
        left:0;right:0;
        background:rgba(255,255,255,.97);
        backdrop-filter:blur(20px);
        border:1px solid var(--gray-100);
        border-radius:16px;
        padding:8px;
        flex-direction:column;
        box-shadow:0 20px 60px rgba(0,0,0,.12);
        z-index:300;
        white-space:normal;
    }
    .hero-nav__links.open{display:flex}
    .hero-nav__links > a{padding:12px 16px;border-radius:10px;font-size:14px}
    .hero-nav__cats{width:100%}
    .hero-nav__cats{width:100%;margin:0}
    .hero-nav__cats-btn{width:100%;justify-content:flex-start;padding:12px 16px;border-radius:10px;font-size:14px;gap:8px}
    .hero-nav__cats-btn .nav-cats__arrow{margin-left:auto}
    /* Kategorien-Dropdown im Hamburger-Menü: inline */
    .nav-cats__dropdown{
        position:static;
        transform:none !important;
        opacity:1 !important;
        pointer-events:all !important;
        box-shadow:none;
        border:1px solid var(--gray-100);
        border-radius:10px;
        margin-top:4px;
        max-height:none;
    }
    .nav-cats__list{max-height:50vh;overflow-y:auto}

    /* Hero */
    .hero{padding:80px 16px 48px}
    .hero h1{font-size:clamp(36px,9vw,56px)}
    .hero-sub{font-size:15px;max-width:100%}
    .hero-search{max-width:100%}
    .hero-btns{margin-bottom:36px}

    /* Sections */
    .section-gray,.section-dark{padding:60px 16px}
    .section h2,.section-dark h2,.section-gray h2{font-size:clamp(28px,6vw,40px)}
    .lead,.lead-dark{font-size:16px;margin-bottom:36px}

    /* Product grid: 2 Spalten auf Tablet */
    .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}

    /* Feature tiles */
    .feature-grid{grid-template-columns:1fr;gap:2px}
    .feature-tile:first-child{border-radius:18px 18px 0 0}
    .feature-tile:nth-child(2){border-radius:0}
    .feature-tile:last-child{border-radius:0 0 18px 18px}
    .feature-tile{padding:32px 24px}

    /* Single product */
    .single-wrap{grid-template-columns:1fr;gap:24px;margin-top:24px}
    .single-img-placeholder{height:280px}

    /* Filter sidebar: oben als horizontaler Scroll */
    .filter-sidebar{
        position:static;
        border-radius:12px;
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        padding:16px;
    }
    .filter-block{margin-bottom:0;flex:1;min-width:140px}
    [style*="grid-template-columns:240px"]{grid-template-columns:1fr !important}

    /* Footer */
    .footer-grid{grid-template-columns:repeat(2,1fr);gap:24px}
    .footer-bottom{flex-direction:column;text-align:center}

    /* Legal */
    .legal-page{padding:24px 16px 60px}
}

/* Sehr klein (≤480px) */
@media(max-width:480px){
    .hero h1{font-size:clamp(32px,10vw,48px)}

    /* Produkte: 1 Spalte */
    .product-grid{grid-template-columns:1fr;gap:12px}

    /* Footer: 1 Spalte */
    .footer-grid{grid-template-columns:1fr}

    /* Filter: gestapelt */
    .filter-sidebar{flex-direction:column}
    .filter-block{min-width:100%}
}