/* ==================================================================
   LIGNAVO — Brettfinder, porównanie gatunków, wyjaśnienie sztorcowe
   ================================================================== */

/* ---------- Brettfinder ---------- */
.bf{
	background:var(--paper,#f8f5ef);
	border:1px solid var(--line,rgba(20,17,14,.12));
	border-radius:3px;
	padding:clamp(1.75rem,4vw,3.25rem);
	max-width:56rem;
	margin-inline:auto;
}
.section--dark .bf{
	background:rgba(255,255,255,.04);
	border-color:rgba(226,216,200,.18);
	color:var(--sand,#e2d8c8);
}
.section--dark .bf h3,.section--dark .bf h4{color:#fff}

.bf__head{text-align:center;margin-bottom:2.25rem}
.bf__head h2{margin-bottom:.35em}
.bf__head p{color:var(--muted,#5a5047);max-width:34rem;margin-inline:auto}
.section--dark .bf__head p{color:rgba(226,216,200,.75)}

.bf__progress{height:2px;background:rgba(20,17,14,.1);margin-bottom:2.25rem;overflow:hidden}
.section--dark .bf__progress{background:rgba(226,216,200,.15)}
.bf__progress span{display:block;height:100%;background:var(--amber,#9d6a2f);transition:width .45s cubic-bezier(.2,.7,.3,1)}

.bf__frage{text-align:center;margin-bottom:1.75rem}
.bf__zaehler{
	font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
	color:var(--amber,#9d6a2f);font-weight:500;display:block;margin-bottom:.75rem;
}
.bf__frage h3{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);margin-bottom:.4em}
.bf__hinweis{font-size:.92rem;color:var(--muted,#5a5047);max-width:32rem;margin-inline:auto}
.section--dark .bf__hinweis{color:rgba(226,216,200,.7)}

.bf__optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.85rem}
.bf__option{
	display:flex;flex-direction:column;gap:.35rem;text-align:left;
	background:#fff;border:1px solid var(--line,rgba(20,17,14,.12));border-radius:2px;
	padding:1.15rem 1.25rem;cursor:pointer;font-family:inherit;
	transition:border-color .2s,transform .2s,box-shadow .2s;
}
.section--dark .bf__option{background:rgba(255,255,255,.05);border-color:rgba(226,216,200,.2)}
.bf__option:hover{border-color:var(--amber,#9d6a2f);transform:translateY(-2px);box-shadow:0 6px 22px rgba(20,17,14,.07)}
.bf__option.is-active{border-color:var(--amber,#9d6a2f);box-shadow:inset 0 0 0 1px var(--amber,#9d6a2f)}
.bf__option-label{font-size:1.02rem;font-weight:400;color:var(--ink,#14110e)}
.section--dark .bf__option-label{color:#fff}
.bf__option-sub{font-size:.83rem;color:var(--muted,#5a5047);line-height:1.5}
.section--dark .bf__option-sub{color:rgba(226,216,200,.68)}

.bf__zurueck,.bf__neu{
	background:none;border:0;cursor:pointer;font-family:inherit;
	font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
	color:var(--muted,#5a5047);margin-top:1.5rem;padding:.5rem 0;
}
.bf__zurueck:hover,.bf__neu:hover{color:var(--amber,#9d6a2f)}
.bf__neu{display:block;margin-inline:auto}
.bf__noscript{text-align:center;color:var(--muted,#5a5047)}

/* ---------- Wynik ---------- */
.bf__ergebnis-kopf{text-align:center;margin-bottom:2rem}
.bf__ergebnis-kopf h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.15rem);margin:0}

.bf__treffer{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.25rem,3vw,2.25rem);align-items:start}
@media (max-width:640px){.bf__treffer{grid-template-columns:1fr}}
.bf__treffer-bild img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;background:var(--paper-2,#efe9df)}
.bf__treffer-excerpt{font-size:1.02rem;line-height:1.65;color:var(--muted,#5a5047);margin-bottom:1.25rem}
.section--dark .bf__treffer-excerpt{color:rgba(226,216,200,.8)}

.bf__warum-titel{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber,#9d6a2f);margin-bottom:.6rem;font-weight:500}
.bf__warum{list-style:none;padding:0;margin:0 0 1.4rem}
.bf__warum li{position:relative;padding-left:1.5rem;font-size:.93rem;margin-bottom:.5rem;line-height:1.55}
.bf__warum li::before{
	content:"";position:absolute;left:0;top:.55em;width:.65rem;height:1px;background:var(--amber,#9d6a2f);
}
.bf__preis{font-size:1.35rem;font-weight:300;margin-bottom:1.25rem}
.bf__preis .woocommerce-Price-amount{font-weight:300}
.bf__aktionen{display:flex;flex-wrap:wrap;gap:.7rem}

.bf__alternative{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--line,rgba(20,17,14,.12))}
.section--dark .bf__alternative{border-color:rgba(226,216,200,.18)}
.bf__alternative h4{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted,#5a5047);font-family:var(--sans,'Comme',sans-serif);font-weight:500;margin-bottom:1rem}
.bf__alt-karte{display:flex;gap:1rem;align-items:center;color:inherit}
.bf__alt-karte img{width:5rem;height:5rem;object-fit:cover;border-radius:2px;flex:none}
.bf__alt-karte strong{display:block;font-family:var(--serif,'Comme',sans-serif);font-size:1.08rem;font-weight:600;margin-bottom:.2rem}
.bf__alt-karte em{font-style:normal;font-size:.87rem;color:var(--muted,#5a5047);line-height:1.5;display:block}
.bf__alt-karte:hover strong{color:var(--amber,#9d6a2f)}

.bf__addon{
	display:flex;gap:1.1rem;align-items:center;margin-top:1.75rem;
	background:var(--paper-2,#efe9df);padding:1.1rem 1.25rem;border-radius:2px;
}
.section--dark .bf__addon{background:rgba(255,255,255,.05)}
.bf__addon img{width:4rem;height:4rem;object-fit:cover;border-radius:2px;flex:none}
.bf__addon strong{display:block;font-size:.98rem;margin-bottom:.25rem}
.bf__addon p{font-size:.87rem;color:var(--muted,#5a5047);margin:0 0 .35rem;line-height:1.5}
.bf__addon a{font-size:.83rem}

/* ---------- Porównanie gatunków ---------- */
.holzvergleich{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.holz{
	background:#fff;border:1px solid var(--line,rgba(20,17,14,.12));border-radius:3px;
	padding:1.6rem 1.5rem;
}
.js .holz{opacity:0;transform:translateY(1rem);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .holz.is-visible{opacity:1;transform:none}
.section--dark .holz{background:rgba(255,255,255,.05);border-color:rgba(226,216,200,.18)}

.holz__kopf{display:flex;gap:1rem;align-items:center;margin-bottom:1.1rem}
.holz__probe{
	width:3.25rem;height:3.25rem;border-radius:50%;flex:none;
	background:var(--probe);
	box-shadow:inset 0 -6px 14px rgba(0,0,0,.22),inset 0 4px 10px rgba(255,255,255,.18);
}
.holz__kopf h3{margin:0 0 .1rem;font-size:1.25rem}
.holz__kopf em{font-size:.76rem;color:var(--muted,#5a5047);font-style:normal;letter-spacing:.02em}
.holz__charakter{font-size:.95rem;color:var(--muted,#5a5047);margin-bottom:1.25rem;line-height:1.6}
.section--dark .holz__charakter{color:rgba(226,216,200,.78)}

.holz__haerte{margin-bottom:1.35rem}
.holz__haerte-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.holz__haerte-label span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#5a5047)}
.holz__haerte-label strong{font-size:.9rem;font-weight:400}
.holz__bar{height:4px;background:rgba(20,17,14,.09);border-radius:999px;overflow:hidden}
.section--dark .holz__bar{background:rgba(226,216,200,.18)}
.holz__bar span{display:block;height:100%;background:var(--amber,#9d6a2f);border-radius:999px;
	transform-origin:left;animation:holzbar 1s cubic-bezier(.2,.7,.3,1) both}
@keyframes holzbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.holz__details{margin:0;font-size:.9rem}
.holz__details dt{
	font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
	color:var(--amber,#9d6a2f);margin-bottom:.25rem;font-weight:500;
}
.holz__details dd{margin:0 0 1rem;line-height:1.6;color:var(--muted,#5a5047)}
.section--dark .holz__details dd{color:rgba(226,216,200,.78)}
.holz__details dd:last-child{margin-bottom:0}

.holzvergleich__fussnote{
	font-size:.83rem;color:var(--muted,#5a5047);margin-top:1.75rem;
	max-width:44rem;line-height:1.65;
}

/* ---------- Stirnholz kontra Längsholz ---------- */
.schnitt{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:clamp(1.25rem,3vw,2.25rem)}
.schnitt__karte{
	background:#fff;border:1px solid var(--line,rgba(20,17,14,.12));border-radius:3px;
	padding:1.75rem 1.6rem;
}
.js .schnitt__karte{opacity:0;transform:translateY(1rem);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .schnitt__karte.is-visible{opacity:1;transform:none}
.schnitt__karte--highlight{border-color:var(--amber,#9d6a2f);box-shadow:0 8px 30px rgba(157,106,47,.1)}
.section--dark .schnitt__karte{background:rgba(255,255,255,.05);border-color:rgba(226,216,200,.18)}
.section--dark .schnitt__karte--highlight{border-color:var(--amber-bright,#c08a4b)}

.schnitt__grafik{background:var(--paper-2,#efe9df);border-radius:2px;padding:.75rem;margin-bottom:1.35rem}
.section--dark .schnitt__grafik{background:rgba(0,0,0,.22)}
.schnitt__grafik svg{width:100%;height:auto;display:block}
.schnitt__klinge{animation:klinge 3.4s ease-in-out infinite}
@keyframes klinge{
	0%,100%{transform:translateY(0)}
	45%{transform:translateY(14px)}
	55%{transform:translateY(14px)}
}
@media (prefers-reduced-motion:reduce){.schnitt__klinge{animation:none}}

.schnitt__karte h3{font-size:1.3rem;margin-bottom:.5em}
.schnitt__karte p{font-size:.95rem;line-height:1.65;color:var(--muted,#5a5047)}
.section--dark .schnitt__karte p{color:rgba(226,216,200,.78)}
.schnitt__fazit{
	font-size:.88rem!important;padding-top:.9rem;margin-top:.4rem;
	border-top:1px solid var(--line,rgba(20,17,14,.12));color:var(--ink,#14110e)!important;
}
.section--dark .schnitt__fazit{border-color:rgba(226,216,200,.18);color:#fff!important}

.bf__budgethinweis{
	background:rgba(157,106,47,.08);border-left:2px solid var(--amber,#9d6a2f);
	padding:.85rem 1.1rem;font-size:.9rem;line-height:1.6;margin:0 0 1.5rem;
	color:var(--muted,#5a5047);
}
.section--dark .bf__budgethinweis{background:rgba(192,138,75,.14);color:rgba(226,216,200,.85)}

.holz__hinweis{
	font-size:.82rem;line-height:1.6;color:var(--muted,#5a5047);
	padding-top:.9rem;margin:1rem 0 0;border-top:1px solid var(--line,rgba(20,17,14,.12));
}
.section--dark .holz__hinweis{color:rgba(226,216,200,.65);border-color:rgba(226,216,200,.18)}