/* Zeit overrides for the generated pages (produkt, kategorie, marke, marken, produkte, blog).
   Loaded after the seo-*.css page layouts, together with /css/zeit-base.css and /css/zeit-site.css. */
.header-space{height:calc(78px + env(safe-area-inset-top))}
html,body{background:var(--bg-dark)}
body{font-family:var(--font-sans);color:var(--text-on-dark)}
input,select,button,textarea{font-family:var(--font-sans)}

/* footer: seo-base.css styles the plain footer element (centred, underlined) */
footer.footer{text-align:left;font-size:15px;color:var(--text-on-dark);border-top:1px solid var(--border-on-dark);padding:72px var(--layout-margin) var(--space-40)}
footer.footer a{margin:0;text-decoration:none;color:inherit}
footer.footer a:hover{color:var(--text-accent)}
footer.footer .bottom a{text-decoration:underline}
footer.footer .brand p{color:var(--text-on-dark-secondary)}

/* breadcrumb */
.breadcrumb,nav.breadcrumb{font-size:13px;color:var(--text-on-dark-secondary);padding-top:var(--space-24);text-transform:lowercase}
.breadcrumb a,nav.breadcrumb a{color:var(--text-on-dark-secondary)}
.breadcrumb a:hover,nav.breadcrumb a:hover{color:var(--text-accent)}

/* page headings: category, subcategory, brand, hub, blog overview */
.hero{padding-top:var(--space-48)}
.hero h1{font-family:var(--font-sans);font-weight:700;font-size:clamp(36px,5.4vw,72px);line-height:1.02;letter-spacing:-.035em;text-transform:lowercase;margin-bottom:var(--space-16)}
.intro,.subtitle{color:var(--text-on-dark-secondary);font-size:17px;line-height:26px}
.parent-link{color:var(--text-on-dark-secondary);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.parent-link:hover{color:var(--text-accent)}
.section-heading{font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em;text-transform:lowercase}

/* chips (subcategories, product tags) */
.subcat-chip,.tag{display:inline-flex;align-items:center;height:32px;padding:0 12px;background:var(--bg-dark-subtle);border:1px solid var(--border-on-dark);border-radius:0;color:var(--text-on-dark);font-size:14px;font-weight:500;transition:background .15s,border-color .15s}
.subcat-chip:hover,.tag:hover{background:var(--bg-dark-hover);border-color:var(--grey-500);color:var(--text-on-dark)}
.tag{height:28px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* listing controls */
.count{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-on-dark-secondary)}
.sort-control{color:var(--text-on-dark-secondary);font-size:13px;text-transform:lowercase}
.sort-control select{height:40px;background:var(--bg-dark-subtle);color:var(--text-on-dark);border:1px solid var(--border-on-dark);border-radius:0;padding:0 12px;font-size:15px}
.sort-control select:focus{outline:2px solid var(--border-focus);outline-offset:2px}

/* product cards (listings + related) */
.card,.rcard{background:var(--bg-dark);border:1px solid var(--border-on-dark);border-radius:0;transition:border-color .15s}
.card:hover,.rcard:hover{transform:none;background:var(--bg-dark);border-color:var(--grey-500)}
.card-body{padding:12px 14px 14px}
.card-title,.rcard-title{font-size:14px;font-weight:500;line-height:20px;color:var(--text-on-dark)}
.rcard-title{padding:10px 12px 0}
.card-vendor{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-dark-secondary)}
.card-price,.rcard-price{font-family:var(--font-mono);font-size:13px;font-weight:600}
.rcard-price{padding:4px 12px 12px}

/* pagination */
.page-link,.page-num{border-radius:0;background:var(--bg-dark);border:1px solid var(--border-on-dark);color:var(--text-on-dark);font-family:var(--font-mono);font-size:13px}
.page-link:hover,.page-num:hover{background:var(--bg-dark-hover)}
.page-num.active{background:var(--bg-light);color:var(--text-on-light);border-color:var(--bg-light)}

/* product page */
.container h1{font-family:var(--font-sans);font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.12;letter-spacing:-.02em}
.price{font-family:var(--font-mono);font-weight:600;font-size:24px}
.description{color:var(--text-on-dark-secondary);font-size:15px;line-height:24px}
.badge{border-radius:0;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px}
.badge-live{background:transparent;color:var(--text-on-dark);border:1px solid var(--border-light)}
.badge-archive{background:transparent;color:var(--text-accent);border:1px solid var(--text-accent)}
.badge-dot{display:none}
.cta-badges::before{font-family:var(--font-sans);font-weight:500;text-transform:lowercase;content:'erhältlich in der app →'}
.related h2{font-family:var(--font-sans);font-weight:700;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;text-transform:lowercase}

/* /produkte/ hub: search + category cards */
/* the hub template brings an inline <style> for the search, so these need !important */
#prodSearch{background:var(--bg-dark-subtle)!important;border:1px solid var(--border-on-dark)!important;border-radius:0!important;font-family:var(--font-sans)!important;height:48px;padding:0 44px 0 46px!important}
#prodSearch:focus{border-color:var(--grey-500);outline:2px solid var(--border-focus);outline-offset:2px}
.search-results{background:var(--bg-dark-subtle)!important;border:1px solid var(--border-on-dark)!important;border-radius:0!important}
.search-result img{border-radius:0}
.search-result-title,.search-result-price{font-family:var(--font-sans)}
.search-result-meta,.search-no-results{font-family:var(--font-sans)}
.search-result-price{font-family:var(--font-mono)}
.cat-card,.blog-cat-card{background:var(--bg-dark);border:1px solid var(--border-on-dark);transition:border-color .15s}
.cat-card:hover,.blog-cat-card:hover{transform:none;background:var(--bg-dark);border-color:var(--grey-500)}
.cat-name,.blog-cat-name{font-family:var(--font-sans);font-weight:600;font-size:18px;text-transform:lowercase}
.cat-count,.blog-cat-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-dark-secondary)}

/* blog overview */
.post-card{background:var(--bg-dark);border:1px solid var(--border-on-dark);transition:border-color .15s}
.post-card:hover{border-color:var(--grey-500)}
.post-card h2{font-family:var(--font-sans);font-weight:600;font-size:20px;line-height:26px;letter-spacing:-.01em}
.post-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-dark-secondary)}
.post-subtitle,.post-excerpt{color:var(--text-on-dark-secondary)}

/* blog article */
.article-wrap{background:transparent;box-shadow:none;max-width:calc(var(--layout-reading) + 2 * var(--space-24));padding:var(--space-48) var(--space-24) var(--space-96)}
.article-wrap h1{font-family:var(--font-sans);font-weight:700;font-size:clamp(32px,4.4vw,56px);line-height:1.06;letter-spacing:-.03em}
.article-wrap .subtitle{color:var(--text-on-dark-secondary);font-size:19px;line-height:28px}
.article-wrap .meta,.crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-dark-secondary)}
.crumb:hover{color:var(--text-accent)}
.hero-img{border:1px solid var(--border-on-dark)}
.content{color:#d4d4d4;font-size:17px;line-height:28px}
.content h2{font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em}
.content a{color:var(--text-on-dark);text-decoration:underline;text-underline-offset:3px}
.content a:hover{color:var(--text-accent)}
.content hr,.blog-cat-section,.related-posts,.blog-cta{border-color:var(--border-on-dark)}
.blog-cat-label,.related-posts-title{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--text-on-dark-secondary)}
.related-post-title{color:var(--text-on-dark-secondary)}
.blog-cta-title{font-family:var(--font-sans);font-weight:700;text-transform:lowercase;letter-spacing:-.02em}
@media (max-width:760px){footer.footer{padding:56px 20px 96px}.article-wrap{padding:var(--space-32) 20px var(--space-64)}}
/* space between "weitere pieces" and the footer */
.related{padding-bottom:var(--space-96)}
@media (max-width:760px){.related{padding-bottom:var(--space-64)}}

/* "Mehr dazu" text + FAQ below the grid on category and brand pages (page-copy.json) */
.page-more{max-width:1100px;margin:0 auto;padding:var(--space-48) 24px var(--space-96);display:flex;flex-direction:column;gap:var(--space-64)}
.page-more-text{display:flex;flex-direction:column;gap:var(--space-16);max-width:var(--layout-reading)}
.page-more-text p{color:var(--text-on-dark-secondary);font-size:17px;line-height:28px}
.page-more a{color:var(--text-on-dark);text-decoration:underline;text-underline-offset:3px}
.page-more a:hover{color:var(--text-accent)}
.page-faq h2{font-weight:700;font-size:clamp(28px,2.8vw,40px);line-height:1.15;letter-spacing:-.02em;text-transform:lowercase;margin-bottom:var(--space-24)}
.faq-list{border-top:1px solid var(--border-on-dark);max-width:880px}
.faq-item{border-bottom:1px solid var(--border-on-dark)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-weight:600;font-size:clamp(17px,1.6vw,20px);line-height:1.3;letter-spacing:-.01em}
.faq-item summary:hover h3{color:var(--text-accent)}
.faq-item summary svg{width:20px;height:20px;flex:none;color:var(--text-on-dark-secondary)}
.faq-item[open] summary svg .v{display:none}
.faq-item p{color:var(--text-on-dark-secondary);font-size:15px;line-height:23px;padding:0 44px 24px 0;max-width:var(--layout-reading)}
@media (max-width:760px){.page-more{padding:var(--space-40) 20px var(--space-64);gap:var(--space-48)}.page-more-text p{font-size:16px;line-height:26px}}

/* product page: second row "Mehr von {Marke}" + links to brand and category */
.related .related-grid + h2{margin-top:var(--space-48)}
.related-links{margin-top:var(--space-32);display:flex;flex-wrap:wrap;gap:8px 12px;color:var(--text-on-dark-secondary);font-size:15px}
.related-links a{color:var(--text-on-dark);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.related-links a:hover{color:var(--text-accent)}
.rcard-title{max-height:none;-webkit-line-clamp:2;line-height:20px;padding-bottom:2px}