/* Traegerwerk-Bühne (11.10.2026): animierter Träger statt Kopfbild, Entwurf Ludwig (Claude Design, Variante 2a). Skript: assets/js/traegerwerk-buehne.js */
@keyframes tw-drehen { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.fw-tw-buehne { position: relative; height: clamp(300px, 52vh, 580px); margin-block: 0; overflow: hidden; background: #fafaf8; border-radius: 14px; box-shadow: 0 1px 0 #e3e4e3, 0 10px 30px rgba(43, 48, 53, .08); color: #2b3035; font-family: var(--wp--preset--font-family--jost); }
.fw-tw-buehne.fw-breit { width: 100%; } /* so breit wie das Kopfbild und der Farbbalken darunter */
.fw-tw-buehne noscript img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.fw-tw-buehne .tw-traeger, .fw-tw-buehne .tw-chips, .fw-tw-buehne .tw-geo, .fw-tw-buehne .tw-material { display: none; }
.fw-tw-buehne.tw-bereit .tw-traeger { display: block; position: absolute; inset: 0; overflow: hidden; }
.fw-tw-buehne.tw-bereit .tw-chips, .fw-tw-buehne.tw-bereit .tw-geo, .fw-tw-buehne.tw-bereit .tw-material { display: flex; }
.fw-tw-buehne .tw-dreh { animation: tw-drehen 18s linear infinite; }
.fw-tw-buehne.tw-pause .tw-dreh { animation-play-state: paused; }
.fw-tw-buehne.tw-ruhig .tw-dreh { animation: none; transform: rotateY(-28deg); }
.fw-tw-buehne .tw-material { position: absolute; left: 20px; top: 20px; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border: 1.5px solid #e1e3e4; border-radius: 999px; font-size: 14px; font-weight: 500; }
.fw-tw-buehne .tw-material i { width: 10px; height: 10px; border-radius: 50%; display: block; transition: background .4s; }
.fw-tw-buehne .tw-chips { position: absolute; right: 20px; top: 20px; gap: 8px; }
.fw-tw-buehne .tw-chip { padding: 8px 14px; border: 1.5px solid #e1e3e4; background: #fff; border-radius: 10px; display: flex; flex-direction: column; gap: 1px; min-width: 64px; transition: all .4s; }
.fw-tw-buehne .tw-chip b { font-weight: 700; font-size: 15px; }
.fw-tw-buehne .tw-chip span { font-size: 11px; color: #8c9196; }
.fw-tw-buehne .tw-chip.tw-an { border-color: #c0673a; background: #fbeee6; }
.fw-tw-buehne .tw-chip.tw-an span { color: #c0673a; }
.fw-tw-buehne .tw-geo { position: absolute; left: 20px; bottom: 20px; flex-direction: column; gap: 8px; background: #fff; border-radius: 12px; padding: 16px 20px; min-width: 240px; box-shadow: 0 4px 16px rgba(43, 48, 53, .08); }
.fw-tw-buehne .tw-geo p { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #8c9196; text-transform: uppercase; }
.fw-tw-buehne .tw-geo div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.fw-tw-buehne .tw-geo b { font: 600 14px var(--wp--preset--font-family--mono); }
@media (max-width: 720px) {
	.fw-tw-buehne { border-radius: 0; }
	.fw-tw-buehne .tw-material { display: none !important; }
	.fw-tw-buehne .tw-chips { left: 12px; right: auto; top: 12px; }
	.fw-tw-buehne .tw-chip { padding: 6px 10px; min-width: 0; }
	.fw-tw-buehne .tw-geo { min-width: 0; left: 12px; bottom: 12px; padding: 12px 14px; gap: 6px; }
	.fw-tw-buehne .tw-geo div { font-size: 13px; }
}

/* Variante 2b (Ludwig 11.10.2026): Text links, Konfigurator-Fenster rechts; ersetzt Seitenkopf und Kopfbild */
.fw-tw-2b { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 44px); align-items: center; padding-block: clamp(28px, 4vw, 48px); color: #2b3035; font-family: var(--wp--preset--font-family--jost); }
.fw-tw-2b .fw-seitentitel { font-size: clamp(30px, 3.3vw, 40px); line-height: 1; letter-spacing: -.02em; margin: 14px 0 0; }
.fw-tw-2b .fw-kennung a { color: inherit; text-decoration: none; }
.fw-tw-2b .fw-kennung a:hover { color: var(--fw-blau); }
.fw-tw-2b .tw-lead { font-weight: 300; font-size: 18px; line-height: 1.45; margin: 18px 0; text-wrap: pretty; }
.fw-tw-2b .tw-knopf { display: inline-block; padding: 12px 22px; background: #c0673a; color: #fff; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; }
.fw-tw-2b .tw-knopf:hover, .fw-tw-2b .tw-knopf:focus-visible { background: #a8562c; color: #fff; }
.fw-tw-2b .tw-streifen { display: flex; gap: 3px; width: 150px; margin-top: 22px; }
.fw-tw-2b .tw-streifen i { flex: 1; height: 3px; display: block; }
.fw-tw-2b .tw-fenster { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(43, 48, 53, .1); }
.fw-tw-2b .tw-leiste { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #e9eaea; }
.fw-tw-2b .tw-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #c4c7c9; display: block; }
.fw-tw-2b .tw-leiste span { flex: 1; margin-left: 10px; padding: 3px 10px; background: #fff; border-radius: 5px; font: 11px var(--wp--preset--font-family--mono); color: #6b7176; }
.fw-tw-2b .tw-app { display: grid; grid-template-columns: minmax(0, 1fr) 240px; }
.fw-tw-2b .tw-bild { position: relative; min-height: clamp(300px, 34vw, 420px); background: #fafaf8; overflow: hidden; }
.fw-tw-2b .tw-bild noscript img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 22% 45%; }
.fw-tw-2b .tw-traeger { position: absolute; inset: 0; }
.fw-tw-2b .tw-dreh { animation: tw-drehen 18s linear infinite; }
.fw-tw-2b .tw-pause .tw-dreh { animation-play-state: paused; }
.fw-tw-2b .tw-ruhig .tw-dreh { animation: none; transform: rotateY(-28deg); }
.fw-tw-2b .tw-panel { padding: 16px; display: flex; flex-direction: column; gap: 9px; border-left: 1px solid #ececec; }
.fw-tw-2b .tw-fenster:not(.tw-bereit) .tw-werte { visibility: hidden; }
.fw-tw-2b .tw-lbl { font-weight: 600; font-size: 10px; letter-spacing: .12em; color: #8c9196; text-transform: uppercase; }
.fw-tw-2b .tw-chips { display: flex; gap: 5px; }
.fw-tw-2b .tw-chip { flex: 1; padding: 6px 4px; border: 1.5px solid #e1e3e4; background: #fff; border-radius: 8px; text-align: center; font-weight: 700; font-size: 12px; transition: all .4s; }
.fw-tw-2b .tw-chip.tw-an { border-color: #c0673a; background: #fbeee6; }
.fw-tw-2b .tw-feld { display: flex; justify-content: space-between; border: 1.5px solid #e1e3e4; border-radius: 8px; padding: 6px 10px; font-weight: 600; font-size: 13px; }
.fw-tw-2b .tw-pfeil { color: #8c9196; }
.fw-tw-2b .tw-spur { height: 4px; background: #e6e7e8; border-radius: 2px; position: relative; margin: 6px 8px; }
.fw-tw-2b .tw-knauf { position: absolute; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #c0673a; box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0, 0, 0, .2); transition: left .9s cubic-bezier(.6, 0, .2, 1); }
.fw-tw-2b .tw-laenge { border: 1.5px solid #e1e3e4; border-radius: 8px; padding: 6px 10px; font: 13px var(--wp--preset--font-family--mono); text-align: right; }
.fw-tw-2b .tw-gewicht { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 9px; border-top: 1px solid #ececec; font-size: 12px; color: #6b7176; }
.fw-tw-2b .tw-gewicht b { font: 600 13px var(--wp--preset--font-family--mono); color: #2b3035; }
.fw-tw-2b .tw-werte { display: flex; flex-direction: column; gap: 9px; }
.fw-tw-2b .tw-shop { display: block; margin-top: 4px; padding: 9px; background: #2b3035; color: #fff; border-radius: 8px; text-align: center; font-weight: 600; font-size: 13px; text-decoration: none; }
.fw-tw-2b .tw-shop:hover, .fw-tw-2b .tw-shop:focus-visible { background: #1d2125; color: #fff; }
@media (max-width: 820px) { .fw-tw-2b { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
	.fw-tw-2b .tw-app { grid-template-columns: minmax(0, 1fr); }
	.fw-tw-2b .tw-bild { min-height: 260px; }
	.fw-tw-2b .tw-panel { border-left: 0; border-top: 1px solid #ececec; }
}