/* HERO · Fraktur, Gold und Wappenrot, Banner, Schwerthieb beim Laden, Wappenschilde */
html[data-theme] body { --serif: 'Cormorant Garamond', Georgia, serif; }
html[data-theme] .fxt { background: linear-gradient(180deg, #fff3cc 0%, #f0c768 40%, #a8741f 70%, #f3cf7a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #2a1406) drop-shadow(0 0 26px rgba(232, 180, 70, 0.35)); }
html[data-theme] .ph-t { font-size: clamp(90px, 26cqi, 260px); line-height: 0.85; letter-spacing: 0.02em; }
html[data-theme] .ph-s { font-family: var(--serif); font-weight: 700; letter-spacing: 0.5em; color: #e9d3a6; }
html[data-theme] .ph-l { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: #d2c3a6; }
html[data-theme] .ph-bg { opacity: 0.5; filter: sepia(0.4) saturate(0.8); }
.fx-hero { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-hero .banner { position: absolute; top: 0; width: 120px; height: 62%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.35)), linear-gradient(180deg, #7a1420, #a51e2c 60%, #6a0e18); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); transform-origin: top center; animation: wave 6s ease-in-out infinite; box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
.fx-hero .banner::after { content: ""; position: absolute; left: 50%; top: 34%; width: 50px; height: 60px; margin-left: -25px; border: 3px solid #e8b446; border-radius: 0 0 50% 50% / 0 0 60% 60%; }
.fx-hero .banner { top: -2px; width: clamp(90px, 8vw, 128px); height: calc(var(--cy, 50%) + var(--ch, 500px) * 0.18); border-top: 6px solid #c99a3a; box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(232, 180, 70, 0.55); }
.fx-hero .b1 { left: calc(var(--cx, 70%) - var(--cw, 420px) / 2 - clamp(68px, 6vw, 96px)); }
.fx-hero .b2 { left: calc(var(--cx, 70%) + var(--cw, 420px) / 2 - clamp(22px, 2vw, 32px)); animation-delay: -2.5s; height: calc(var(--cy, 50%) + var(--ch, 500px) * 0.05); }
/* abrollen, nachdem das Artwork steht */
.fx-hero .banner { clip-path: polygon(0 0, 100% 0, 100% 0, 50% 0, 0 0); transition: clip-path 1.2s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ph.fx-on .fx-hero .banner { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); }
.ph.fx-on .fx-hero .b2 { transition-delay: 0.25s; }
@keyframes wave { 0%, 100% { transform: skewX(0deg) scaleY(1); } 50% { transform: skewX(3deg) scaleY(0.98); } }
.fx-hero .slash { position: absolute; left: -10%; top: 50%; width: 120%; height: 3px; background: linear-gradient(90deg, transparent, #fff 40%, #ffe9a8 60%, transparent); transform: rotate(-24deg) scaleX(0); box-shadow: 0 0 20px #fff, 0 0 60px #ffd36a; animation: slash 0.7s cubic-bezier(0.7, 0, 0.2, 1) 0.4s forwards; }
@keyframes slash { 0% { transform: rotate(-24deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-24deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-24deg) scaleX(1); opacity: 0; } }
html[data-theme] .ph-cover .glow { background: radial-gradient(closest-side, rgba(232, 180, 70, 0.5), rgba(170, 30, 40, 0.2) 55%, transparent); }
html[data-theme] .btn--acc { background: linear-gradient(180deg, #a51e2c, #6a0e18); color: #ffe9b0; border-radius: 3px; border: 1px solid #e8b446; box-shadow: 0 10px 30px -10px rgba(165, 30, 44, 0.8); font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: 0.2em; }
html[data-theme] .btn--ghost { border-radius: 3px; }
html[data-theme] .kick::before { height: 1px; width: 40px; box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor; }
html[data-theme] .ph-meta li { font-family: var(--serif); font-weight: 700; font-size: 13px; }
html[data-theme] .ph-meta li + li::before, html[data-theme] .pb .gem { width: 10px; height: 12px; transform: none; border-radius: 0 0 50% 50% / 0 0 60% 60%; background: #e8b446; box-shadow: none; }
html[data-theme] .pt-card { border-radius: 4px 4px 50% 50% / 4px 4px 22% 22%; padding-bottom: 70px; border: 2px solid rgba(232, 180, 70, 0.4); background: linear-gradient(180deg, rgba(165, 30, 44, 0.18), rgba(14, 10, 7, 0.95) 50%); }
html[data-theme] .pt-card .br { display: none; }
html[data-theme] .pt-text, html[data-theme] .pt-claim { font-family: var(--serif); }
html[data-theme] .pt-text { font-size: 18px; }
html[data-theme] .pd .num { font-family: var(--t-disp); font-size: clamp(54px, 7vw, 110px); }
/* Wappenschilde */
.hr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.hr-s { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 16px 16%; text-align: center; border-radius: 6px 6px 50% 50% / 6px 6px 40% 40%; background: linear-gradient(135deg, rgba(165, 30, 44, 0.9) 0 50%, rgba(110, 14, 24, 0.95) 50% 100%); border: 3px solid #e8b446; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.35), 0 30px 50px -25px #000; transition: transform 0.5s var(--ease), 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); }
.hr-s:nth-child(even) { background: linear-gradient(225deg, rgba(30, 40, 80, 0.95) 0 50%, rgba(18, 24, 50, 0.95) 50% 100%); }
.hr-s:hover { transform: translateY(-8px) rotate(-1deg); }
.hr-n { display: block; font: 400 34px/1 var(--t-disp); color: #f3cf7a; }
.hr-s b { display: block; margin-top: 14px; font: 400 clamp(24px, 2.2vw, 32px)/1 var(--t-disp); color: #fff3cc; }
.hr-s p { margin-top: 10px; font-family: var(--serif); font-size: 16px; line-height: 1.3; color: #f0e2c4; }
@media (max-width: 980px) { .hr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }