/*
Theme Name: LAURENS Magazin
Theme URI: https://blog.laurens-heizkoerper.de/
Author: LAURENS
Description: Lightweight editorial WordPress theme for the German LAURENS Heizkörper magazine. No page builder required.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: laurens-magazin
*/

:root {
  --laurens-charcoal: #1E1E1E;
  --laurens-ivory: #F3EFE7;
  --laurens-warm-ivory: #FAF8F4;
  --laurens-red: #B51B30;
  --laurens-red-dark: #941526;
  --laurens-bronze: #A67C52;
  --laurens-stone: #7D7D7D;
  --laurens-line: #E6E0D8;
  --laurens-white: #FFFFFF;
  --laurens-font: "Montserrat", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --laurens-content: 760px;
  --laurens-wide: 1240px;
  --laurens-radius: 0px;
  --laurens-shadow: 0 12px 30px rgba(20,20,20,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--laurens-charcoal);
  background: var(--laurens-warm-ivory);
  font-family: var(--laurens-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--laurens-red); }
button, input, textarea, select { font: inherit; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.site-shell { width: min(calc(100% - 48px), var(--laurens-wide)); margin-inline: auto; }
.site-header { background: rgba(250,248,244,.97); border-bottom: 1px solid var(--laurens-line); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); }
.header-main { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 260px; }
.brand img { display: block; width: 235px; max-height: 78px; object-fit: contain; object-position: left center; }
.brand-magazin { font-size: 10px; letter-spacing: .24em; font-weight: 600; color: var(--laurens-red); border-left: 1px solid var(--laurens-line); padding-left: 15px; }
.header-note { flex: 1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.search-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.shop-button, .button-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--laurens-red); color: #fff; padding: 12px 20px; min-height: 44px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--laurens-red); transition: .2s ease;
}
.shop-button:hover, .button-primary:hover { background: var(--laurens-red-dark); border-color: var(--laurens-red-dark); color:#fff; }
.button-outline { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 18px; border:1px solid currentColor; font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }

.nav-wrap { border-top: 1px solid var(--laurens-line); }
.primary-nav { display: flex; min-height: 52px; align-items: center; }
.primary-nav ul { list-style: none; display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; }
.primary-nav li { margin: 0; }
.primary-nav a { display: block; padding: 16px 0 14px; font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; }
.primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a, .primary-nav a:hover { border-color: var(--laurens-red); color: var(--laurens-red); }
.menu-toggle { display:none; border:0; background:transparent; padding:10px; cursor:pointer; color:var(--laurens-charcoal); }
.menu-toggle svg { width:25px; height:25px; }

.hero { position: relative; min-height: 500px; display: grid; align-items: stretch; background: var(--laurens-charcoal); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(20,20,20,.88) 0%,rgba(20,20,20,.66) 42%,rgba(20,20,20,.18) 74%,rgba(20,20,20,.08) 100%); }
.hero-inner { position:relative; z-index:2; display:flex; align-items:center; min-height:500px; padding-block:72px; }
.hero-copy { width:min(610px, 62%); }
.eyebrow { margin:0 0 15px; font-size:11px; line-height:1.3; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--laurens-bronze); }
.hero .eyebrow { color:#E2C9AE; }
.hero h1 { margin:0 0 22px; font-size:clamp(42px,5vw,72px); line-height:1.04; font-weight:300; letter-spacing:-.025em; }
.hero-excerpt { max-width:590px; margin:0 0 30px; font-size:18px; line-height:1.6; font-weight:400; color:rgba(255,255,255,.9); }
.hero-fallback { background: radial-gradient(circle at 82% 30%, rgba(166,124,82,.22), transparent 24%), linear-gradient(135deg,#242424,#101010); }

.category-strip { background:var(--laurens-warm-ivory); border-bottom:1px solid var(--laurens-line); }
.category-grid { display:grid; grid-template-columns:repeat(6,1fr); }
.category-card { padding:30px 14px 28px; text-align:center; border-right:1px solid var(--laurens-line); transition:.2s ease; }
.category-card:first-child { border-left:1px solid var(--laurens-line); }
.category-card:hover { background:#fff; color:inherit; }
.category-icon { display:flex; align-items:center; justify-content:center; height:38px; margin-bottom:11px; color:var(--laurens-bronze); }
.category-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.5; }
.category-card strong { display:block; font-size:13px; font-weight:600; line-height:1.3; }
.category-card span { display:block; margin-top:5px; font-size:10px; color:var(--laurens-stone); line-height:1.4; }

.section { padding:72px 0; }
.section-white { background:#fff; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:30px; }
.section-head h2 { margin:0; font-size:clamp(30px,3vw,44px); line-height:1.1; font-weight:300; letter-spacing:-.025em; }
.section-link { font-size:12px; font-weight:500; color:var(--laurens-red); text-transform:uppercase; letter-spacing:.05em; }
.post-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.post-card { background:transparent; min-width:0; }
.post-card-media { display:block; aspect-ratio:3/2; overflow:hidden; background:#EAE5DE; margin-bottom:17px; }
.post-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.post-card:hover .post-card-media img { transform:scale(1.025); }
.post-card .eyebrow { margin-bottom:8px; font-size:9px; color:var(--laurens-bronze); }
.post-card h3 { margin:0 0 10px; font-size:21px; line-height:1.24; font-weight:400; letter-spacing:-.015em; }
.post-card p { margin:0 0 14px; color:#606060; font-size:13px; line-height:1.6; }
.read-more { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--laurens-charcoal); }
.read-more:hover { color:var(--laurens-red); }

.shop-band { position:relative; overflow:hidden; background:var(--laurens-charcoal); color:#fff; padding:52px 0; }
.shop-band::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 10%,rgba(166,124,82,.32),transparent 35%); }
.shop-band-inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.shop-band h2 { margin:0 0 8px; font-size:clamp(30px,3.2vw,48px); line-height:1.08; font-weight:300; letter-spacing:-.02em; }
.shop-band p { margin:0; color:rgba(255,255,255,.76); }
.shop-band .button-outline { color:#fff; flex:0 0 auto; }
.shop-band .button-outline:hover { background:#fff; color:var(--laurens-charcoal); }

.topic-layout { display:grid; grid-template-columns:2fr 1fr; gap:50px; align-items:start; }
.topic-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--laurens-line); }
.topic-list li { border-bottom:1px solid var(--laurens-line); }
.topic-list a { display:flex; justify-content:space-between; gap:20px; padding:15px 0; font-size:14px; }
.topic-list a::after { content:"→"; color:var(--laurens-red); }

.page-header { padding:70px 0 46px; border-bottom:1px solid var(--laurens-line); }
.page-header .eyebrow { color:var(--laurens-red); }
.page-header h1 { max-width:900px; margin:0; font-size:clamp(42px,5vw,68px); line-height:1.03; font-weight:300; letter-spacing:-.03em; }
.page-header p { max-width:720px; margin:18px 0 0; color:#666; font-size:17px; }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.pagination { margin-top:55px; display:flex; gap:10px; flex-wrap:wrap; }
.pagination .page-numbers { padding:9px 13px; border:1px solid var(--laurens-line); background:#fff; font-size:12px; }
.pagination .current { border-color:var(--laurens-red); color:var(--laurens-red); }

.article-head { padding:62px 0 32px; }
.breadcrumbs { color:#777; font-size:11px; margin-bottom:23px; }
.breadcrumbs a:hover { color:var(--laurens-red); }
.article-head h1 { max-width:960px; margin:0 0 18px; font-size:clamp(42px,5vw,70px); line-height:1.04; font-weight:300; letter-spacing:-.035em; }
.article-deck { max-width:820px; margin:0; font-size:19px; line-height:1.6; color:#5B5B5B; }
.article-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:23px; color:#777; font-size:11px; }
.article-hero { width:min(calc(100% - 48px), var(--laurens-wide)); margin:0 auto 56px; }
.article-hero img { width:100%; max-height:690px; object-fit:cover; display:block; }
.article-layout { width:min(calc(100% - 48px), 1060px); margin:0 auto 90px; display:grid; grid-template-columns:230px minmax(0,var(--laurens-content)); gap:70px; align-items:start; }
.article-toc { position:sticky; top:175px; font-size:11px; }
.article-toc-box { border-top:2px solid var(--laurens-charcoal); padding-top:14px; }
.article-toc-title { font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:9px; }
.article-toc ol { list-style:none; margin:0; padding:0; }
.article-toc li { margin:0; border-bottom:1px solid var(--laurens-line); }
.article-toc a { display:block; padding:9px 0; color:#666; line-height:1.4; }
.article-toc a:hover { color:var(--laurens-red); }
.article-content { min-width:0; }
.article-content > :first-child { margin-top:0; }
.article-content h2 { scroll-margin-top:170px; margin:58px 0 18px; font-size:35px; line-height:1.17; font-weight:400; letter-spacing:-.02em; }
.article-content h3 { scroll-margin-top:170px; margin:38px 0 14px; font-size:24px; line-height:1.25; font-weight:500; }
.article-content p, .article-content li { font-size:17px; line-height:1.78; }
.article-content p { margin:0 0 1.35em; }
.article-content ul, .article-content ol { margin:0 0 1.7em; padding-left:1.25em; }
.article-content blockquote { margin:42px 0; padding:8px 0 8px 25px; border-left:3px solid var(--laurens-red); font-size:22px; line-height:1.5; font-weight:300; }
.article-content figure { margin:38px 0; }
.article-content figcaption { color:#777; font-size:11px; margin-top:8px; }
.article-content a { color:var(--laurens-red); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.article-content table { width:100%; border-collapse:collapse; margin:35px 0; background:#fff; font-size:14px; }
.article-content th, .article-content td { border-bottom:1px solid var(--laurens-line); padding:12px 14px; text-align:left; vertical-align:top; }
.article-content th { font-weight:600; background:var(--laurens-ivory); }
.article-share { border-top:1px solid var(--laurens-line); margin-top:55px; padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:12px; }

.related { border-top:1px solid var(--laurens-line); background:#fff; }
.related .post-grid { grid-template-columns:repeat(3,1fr); }

.search-form { display:flex; width:min(100%,660px); margin-top:25px; }
.search-form label { flex:1; }
.search-field { width:100%; min-height:48px; border:1px solid var(--laurens-line); background:#fff; padding:10px 14px; border-radius:0; }
.search-submit { min-height:48px; border:0; background:var(--laurens-red); color:#fff; padding:0 19px; cursor:pointer; text-transform:uppercase; font-size:11px; letter-spacing:.05em; }

.site-footer { background:#171717; color:#EDE8DF; }
.footer-main { padding:58px 0 45px; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:55px; }
.footer-brand { font-size:31px; line-height:1; font-weight:300; letter-spacing:.12em; }
.footer-brand small { display:block; margin-top:12px; font-size:10px; color:#BDB6AD; letter-spacing:.18em; text-transform:uppercase; }
.footer-col h3 { margin:0 0 13px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#CDB79F; }
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col li { margin:8px 0; }
.footer-col a { color:#EDE8DF; font-size:13px; }
.footer-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid #333; padding:20px 0; color:#928C85; font-size:10px; display:flex; justify-content:space-between; gap:20px; }

@media (max-width: 1050px) {
  .header-note { display:none; }
  .category-grid { grid-template-columns:repeat(3,1fr); }
  .category-card:nth-child(4) { border-left:1px solid var(--laurens-line); }
  .post-grid { grid-template-columns:repeat(2,1fr); }
  .article-layout { grid-template-columns:190px minmax(0,1fr); gap:42px; }
}

@media (max-width: 820px) {
  .site-shell { width:min(calc(100% - 32px), var(--laurens-wide)); }
  .header-main { min-height:76px; gap:12px; }
  .brand { min-width:0; flex:1; }
  .brand img { width:190px; max-height:64px; }
  .brand-magazin { display:none; }
  .header-actions .search-link { display:none; }
  .header-actions .shop-button { display:none; }
  .menu-toggle { display:inline-flex; }
  .nav-wrap { display:none; }
  .nav-wrap.is-open { display:block; }
  .primary-nav { display:block; padding:7px 0 14px; }
  .primary-nav ul { display:block; }
  .primary-nav a { padding:12px 2px; border-bottom:1px solid var(--laurens-line); }
  .hero, .hero-inner { min-height:530px; }
  .hero-copy { width:100%; }
  .hero-media::after { background:linear-gradient(90deg,rgba(20,20,20,.88),rgba(20,20,20,.48)); }
  .hero h1 { font-size:46px; }
  .category-grid { grid-template-columns:1fr 1fr; }
  .category-card, .category-card:nth-child(4) { border-left:0; }
  .category-card:nth-child(odd) { border-left:1px solid var(--laurens-line); }
  .section { padding:56px 0; }
  .post-grid, .archive-grid, .related .post-grid { grid-template-columns:1fr 1fr; }
  .topic-layout { grid-template-columns:1fr; gap:35px; }
  .shop-band-inner { align-items:flex-start; flex-direction:column; }
  .article-layout { width:min(calc(100% - 32px), var(--laurens-content)); grid-template-columns:1fr; gap:28px; }
  .article-toc { position:static; }
  .article-hero { width:100%; margin-bottom:38px; }
  .footer-main { grid-template-columns:1fr 1fr; }
  .footer-main > :first-child { grid-column:1/-1; }
}

@media (max-width: 560px) {
  body { font-size:15px; }
  .site-shell { width:calc(100% - 26px); }
  .brand img { width:170px; }
  .hero { min-height:500px; }
  .hero-inner { min-height:500px; padding-block:52px; align-items:flex-end; }
  .hero h1 { font-size:40px; }
  .hero-excerpt { font-size:15px; }
  .category-card { padding:22px 9px; }
  .category-card span { display:none; }
  .post-grid, .archive-grid, .related .post-grid { grid-template-columns:1fr; gap:34px; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .article-head { padding-top:42px; }
  .article-head h1 { font-size:40px; }
  .article-deck { font-size:16px; }
  .article-content h2 { font-size:29px; }
  .article-content h3 { font-size:22px; }
  .article-content p, .article-content li { font-size:16px; }
  .footer-main { grid-template-columns:1fr; gap:30px; }
  .footer-main > :first-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
}