/* GEARBOX · Messing und Stahl, drehende Zahnraeder, Blaupause */
html[data-theme] body { --type: 'Special Elite', 'Courier New', monospace; }
html[data-theme] .fxt { background: linear-gradient(180deg, #fff1cf 0%, #e3bf78 35%, #a5762c 60%, #e9c98a 80%, #7a531c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #2a1a08) drop-shadow(0 0 22px rgba(214, 170, 90, 0.3)); }
html[data-theme] .ph-t { font-size: clamp(58px, 15cqi, 160px); line-height: 0.95; letter-spacing: 0.02em; }
html[data-theme] .ph-s { font-family: var(--type); letter-spacing: 0.3em; color: #d9c9a8; }
html[data-theme] .kick, html[data-theme] .ph-meta li { font-family: var(--type); }
.fx-gears { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55; }
/* Buehne im Seitenverhaeltnis des alten 1000x700-Bildes, eingepasst wie preserveAspectRatio meet */
.fx-gears { container-type: size; }
.fx-gears .gw { position: absolute; left: 50%; top: 50%; width: min(100cqw, 142.857cqh); aspect-ratio: 1000 / 700; transform: translate(-50%, -50%); }
.fx-gears svg { position: absolute; height: auto; aspect-ratio: 1; overflow: visible; transform: translate(-50%, -50%); will-change: transform; }
.fx-gears svg g { fill: rgba(214, 170, 90, 0.08); stroke: rgba(214, 170, 90, 0.55); stroke-width: 2; }
.fx-gears .g1 { animation: gspin 24s linear infinite; } .fx-gears .g2 { animation: gspin 15s linear infinite reverse; } .fx-gears .g3 { animation: gspin 19s linear infinite reverse; } .fx-gears .g4 { animation: gspin 28s linear infinite; }
@keyframes gspin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
html[data-theme] .ph-fx { background: linear-gradient(90deg, rgba(11, 9, 7, 0.96) 0%, rgba(11, 9, 7, 0.6) 50%, rgba(11, 9, 7, 0.2) 100%); }
html[data-theme] .ph-cover .glow { background: radial-gradient(closest-side, rgba(214, 170, 90, 0.5), rgba(120, 80, 30, 0.2) 55%, transparent); }
html[data-theme] .btn--acc { background: linear-gradient(180deg, #e9c98a, #a5762c); color: #1a0e02; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 10px 30px -10px rgba(214, 170, 90, 0.6); font-family: var(--type); letter-spacing: 0.16em; }
html[data-theme] .btn--ghost { border-radius: 6px; }
html[data-theme] .ph-meta li + li::before, html[data-theme] .pb .gem { border-radius: 50%; transform: none; width: 9px; height: 9px; background: radial-gradient(circle, #fff1cf 20%, #a5762c 60%); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); }
html[data-theme] .pt-card { border-radius: 4px; border: 1px solid rgba(214, 170, 90, 0.35); background: radial-gradient(circle at 14px 14px, #c9a050 3px, transparent 4px), radial-gradient(circle at calc(100% - 14px) 14px, #c9a050 3px, transparent 4px), radial-gradient(circle at 14px calc(100% - 14px), #c9a050 3px, transparent 4px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #c9a050 3px, transparent 4px), linear-gradient(160deg, #1b1610, #0f0c09); }
html[data-theme] .pt-card .br { display: none; }
html[data-theme] .pt-claim { font-family: var(--type); }
html[data-theme] .pd .num { font-family: var(--t-disp); background: linear-gradient(180deg, #fff1cf, #c9a050 60%, #7a531c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Blaupause */
.bp { position: relative; padding: clamp(30px, 4vw, 60px); background: #0f2a4a; border: 2px solid #a8c8ee; color: #e6f0fb; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: hidden; box-shadow: 0 40px 80px -40px #000; }
.bp-grid { position: absolute; inset: 0; background: linear-gradient(rgba(168, 200, 238, 0.14) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(168, 200, 238, 0.14) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(rgba(168, 200, 238, 0.25) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(168, 200, 238, 0.25) 1px, transparent 1px) 0 0 / 120px 120px; }
.bp-stamp { position: absolute; right: 24px; bottom: 18px; padding: 8px 12px; border: 2px solid #a8c8ee; font: 400 12px var(--type); letter-spacing: 0.2em; text-transform: uppercase; transform: rotate(-3deg); }
.bp-i { position: relative; padding: 24px; border: 1px dashed rgba(168, 200, 238, 0.6); font-family: var(--type); }
.bp-n { position: absolute; top: -16px; left: 20px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #0f2a4a; border: 2px solid #a8c8ee; font: 400 16px var(--t-disp); }
.bp-i b { display: block; margin-top: 8px; font: 400 24px/1.1 var(--t-disp); color: #fff; }
.bp-i em { display: block; margin-top: 6px; font-style: normal; color: #ffd28a; }
.bp-i p { margin-top: 12px; font-size: 15px; line-height: 1.55; color: #c9dcf2; }
@media (max-width: 860px) { .bp { grid-template-columns: minmax(0, 1fr); padding-bottom: 70px; } }