/* BROKEN · Zerkratzte Schrift, Risse durchs Bild, fallende Truemmer, Betonkacheln */
html[data-theme] .fxt { background: linear-gradient(180deg, #f2efe8 0%, #cfc8bb 55%, #8a8478 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.7)) drop-shadow(0 0 30px rgba(232, 140, 60, 0.3)); }
html[data-theme] .ph-t { font-size: clamp(64px, 18cqi, 190px); line-height: 0.9; }
html[data-theme] .ph-t[data-g].in { animation: breakin 1.1s steps(1) 0.2s both; opacity: 1; }
@keyframes breakin { 0% { clip-path: inset(0 0 100% 0); opacity: 1; } 12% { clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); transform: translate(-6px, 4px); } 24% { clip-path: polygon(40% 0, 100% 0, 100% 100%, 20% 100%); transform: translate(5px, -2px); } 36%, 100% { clip-path: none; transform: none; } }
html[data-theme] .ph-s { letter-spacing: 0.5em; color: #e8b48a; }
.fx-crack { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-crack svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-crack path { fill: none; stroke: rgba(10, 10, 10, 0.9); stroke-width: 6; stroke-linejoin: bevel; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(1px 1px 0 rgba(255, 220, 180, 0.25)) drop-shadow(0 0 10px rgba(232, 140, 60, 0.4)); animation: crk 0.9s cubic-bezier(0.7, 0, 0.2, 1) 0.6s forwards; }
.fx-crack path:nth-child(n + 2) { stroke-width: 3; animation-delay: 1s; }
@keyframes crk { to { stroke-dashoffset: 0; } }
.fx-crack .chunk { position: absolute; top: -30px; left: var(--x); width: var(--s); height: var(--s); background: linear-gradient(135deg, #8a8478, #3a3732); clip-path: polygon(10% 20%, 70% 0, 100% 60%, 40% 100%, 0 70%); animation: fall var(--t) linear var(--dl) infinite; opacity: 0.8; }
@keyframes fall { to { transform: translateY(110vh) rotate(420deg); } }
html[data-theme] .ph-cover .glow { background: radial-gradient(closest-side, rgba(232, 140, 60, 0.6), rgba(120, 60, 20, 0.2) 55%, transparent); }
html[data-theme] .btn--acc { background: linear-gradient(180deg, #f0a660, #c4621e); color: #1a0a00; border-radius: 0; clip-path: polygon(0 8%, 30% 0, 100% 6%, 97% 100%, 60% 94%, 0 100%); font-family: var(--t-disp); letter-spacing: 0.1em; }
html[data-theme] .btn--ghost { border-radius: 0; }
html[data-theme] .ph-meta li + li::before, html[data-theme] .pb .gem { border-radius: 0; clip-path: polygon(10% 20%, 70% 0, 100% 60%, 40% 100%, 0 70%); transform: scale(1.5); background: #8a8478; box-shadow: none; }
html[data-theme] .pt-card { border-radius: 0; clip-path: polygon(0 2%, 20% 0, 70% 3%, 100% 0, 99% 50%, 100% 98%, 60% 100%, 30% 97%, 0 100%); border-color: rgba(160, 160, 155, 0.25); background: linear-gradient(160deg, rgba(232, 140, 60, 0.1), transparent 50%), repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 9px), #12110f; }
html[data-theme] .pt-card .br { display: none; }
html[data-theme] .pd .num { color: #e8e2d4; }
/* Betonkacheln */
.cl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cl-t { position: relative; min-height: 200px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(160deg, #2a2724, #161412); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; transition: transform 0.4s var(--ease), background-color 0.4s, opacity 0.7s var(--ease) calc(var(--d, 0) * 0.75ms), translate 0.85s var(--ease-out) calc(var(--d, 0) * 0.75ms), scale 0.85s var(--ease-out) calc(var(--d, 0) * 0.75ms); }
.cl-t svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-t path { fill: none; stroke: #050505; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.2, 1); filter: drop-shadow(0 0 6px rgba(232, 140, 60, 0.7)); }
.cl-t:hover path { stroke-dashoffset: 0; }
.cl-t:hover { transform: translate(2px, 3px) rotate(0.4deg); }
.cl-t b { position: relative; font: 400 30px/1 var(--t-disp); }
.cl-t span { position: relative; margin-top: 8px; color: var(--fg-2); }
@media (max-width: 760px) { .cl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cl { grid-template-columns: minmax(0, 1fr); } .cl-t { min-height: 150px; } }