/* FOUR ELEMENTS · Pinselschrift, Holz, die vier Elemente wechseln sich im Hero ab */
html[data-theme] .fxt { background: linear-gradient(180deg, #fff4e6 0%, #f6d6b0 60%, #d79a5f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 rgba(40, 20, 8, 0.8)) drop-shadow(0 0 30px color-mix(in srgb, var(--ecol) 50%, transparent));  }
html[data-theme] .ph-t { font-size: clamp(60px, 15cqi, 160px); line-height: 1; letter-spacing: 0.02em; }
html[data-theme] .ph-s { letter-spacing: 0.6em; }
/* Elementfarbe als echte Farbe: blendet weich ueber (vorher sprang sie), Titel, Untertitel und Knoepfe faerben sich mit */
@property --ecol { syntax: '<color>'; inherits: true; initial-value: rgb(249, 124, 45); }
/* Farbe je Element (Feuer, Wasser, Erde, Luft) im Takt der Wolken (.e, 16 s): je 3 s stehen, 1 s Uebergang. Umschalten per
   four-elements.js, Uebergang per transition – als CSS-Animation rechnete sie den ganzen Hero in jedem Bild neu, auch im Stehen */
html[data-theme] .ph { --ecol: rgb(249, 124, 45); transition: --ecol 0.96s linear; }
html[data-theme] .ph[data-el="1"] { --ecol: rgb(64, 190, 220); } html[data-theme] .ph[data-el="2"] { --ecol: rgb(176, 128, 78); } html[data-theme] .ph[data-el="3"] { --ecol: rgb(205, 225, 235); }
html[data-theme] .ph .fxt { background-image: linear-gradient(180deg, #fff8ee 0%, color-mix(in srgb, var(--ecol) 30%, #f6e2c8) 55%, color-mix(in srgb, var(--ecol) 75%, #c98a50) 100%); }
html[data-theme] .ph-s { color: color-mix(in srgb, var(--ecol) 70%, #fff); }
html[data-theme] .ph .kick { color: color-mix(in srgb, var(--ecol) 80%, #fff); }
html[data-theme] .ph .kick::before { background: var(--ecol); }
html[data-theme] .ph .ph-l strong { color: color-mix(in srgb, var(--ecol) 45%, #fff); }
html[data-theme] .ph .btn--ghost, html[data-theme] .ph .icon-btn { border-color: color-mix(in srgb, var(--ecol) 55%, transparent); color: color-mix(in srgb, var(--ecol) 75%, #fff); }
html[data-theme] .ph .btn--acc { color: #120a04; box-shadow: 0 0 0 1px var(--ecol), 0 10px 36px -8px color-mix(in srgb, var(--ecol) 60%, transparent); }
.fx-elem { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-elem .e { position: absolute; left: calc(var(--cx, 30%) - var(--cw, 420px) * 1.05); top: calc(var(--cy, 50%) - var(--ch, 520px) * 0.8); width: calc(var(--cw, 420px) * 2.1); height: calc(var(--ch, 520px) * 1.6); border-radius: 50%; filter: blur(30px); opacity: 0; animation: elem 16s linear infinite; }
.fx-elem .fire { background: radial-gradient(closest-side, rgba(249, 124, 45, 0.55), rgba(200, 40, 10, 0.2) 60%, transparent); }
.fx-elem .water { background: radial-gradient(closest-side, rgba(64, 190, 220, 0.5), rgba(20, 70, 140, 0.25) 60%, transparent); animation-delay: -12s; }
.fx-elem .earth { background: radial-gradient(closest-side, rgba(170, 120, 70, 0.55), rgba(80, 50, 20, 0.25) 60%, transparent); animation-delay: -8s; }
.fx-elem .air { background: radial-gradient(closest-side, rgba(205, 225, 235, 0.4), rgba(120, 150, 170, 0.15) 60%, transparent); animation-delay: -4s; }
@keyframes elem { 0% { opacity: 0; transform: scale(0.9) rotate(0); } 6%, 19% { opacity: 1; } 25%, 100% { opacity: 0; transform: scale(1.15) rotate(30deg); } }
.fx-elem .elab { position: absolute; right: var(--gut); bottom: 34px; display: flex; gap: 18px; font: 400 14px/1 'Yuji Syuku', serif; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.35); }
.fx-elem .elab b { font-weight: 400; color: #fff; opacity: 0.35; animation: elab 16s linear infinite; }
.fx-elem .elab b:nth-child(2) { animation-delay: -12s; } .fx-elem .elab b:nth-child(3) { animation-delay: -8s; } .fx-elem .elab b:nth-child(4) { animation-delay: -4s; }
@keyframes elab { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0.35; } }   /* opacity statt Farbe: laeuft auf der Grafikkarte */
html[data-theme] .ph-cover .glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--ecol) 55%, transparent), transparent 70%);  }
html[data-theme] .st-dust i { background: var(--ecol); box-shadow: 0 0 6px color-mix(in srgb, var(--ecol) 90%, transparent); }
html[data-theme] .btn--acc { background: var(--ecol); border-radius: 4px; font-family: var(--t-disp); letter-spacing: 0.14em;  }
html[data-theme] .kick::before { height: 3px; border-radius: 2px; }
html[data-theme] .ph-meta li + li::before, html[data-theme] .pb .gem { border-radius: 50%; transform: none; background: var(--ecol); box-shadow: 0 0 10px var(--ecol); }
html[data-theme] .pt-card { border-radius: 2px; background: linear-gradient(160deg, rgba(249, 124, 45, 0.08), transparent 50%), repeating-linear-gradient(90deg, rgba(120, 70, 30, 0.08) 0 3px, transparent 3px 18px), rgba(14, 10, 8, 0.92); border-color: rgba(215, 154, 95, 0.3); }
html[data-theme] .pt-tag { font-size: clamp(110px, 10vw, 180px); }
/* Vier Elemente */
.el { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(215, 154, 95, 0.25); }
.el-c { position: relative; overflow: hidden; min-height: 380px; padding: 34px 28px; display: flex; flex-direction: column; justify-content: flex-end; border-left: 1px solid rgba(215, 154, 95, 0.2); transition: background-color 0.6s, 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); background: radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--ecol) 16%, transparent), transparent 70%); }
.el-c:first-child { border-left: 0; }
.el-c:hover { background-color: color-mix(in srgb, var(--ecol) 10%, transparent); }
.el-k { position: absolute; top: 10px; right: 18px; font: 400 150px/1 'Yuji Syuku', serif; color: color-mix(in srgb, var(--ecol) 16%, transparent); transition: color 0.6s, transform 0.8s var(--ease); }
.el-c:hover .el-k { color: color-mix(in srgb, var(--ecol) 50%, transparent); transform: translateY(-8px) scale(1.06); }
.el-c b { font: 400 34px/1 var(--t-disp); color: var(--ecol); }
.el-c p { margin-top: 12px; color: var(--fg-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 980px) { .el { grid-template-columns: repeat(2, minmax(0, 1fr)); } .el-c:nth-child(3) { border-left: 0; } }
@media (max-width: 720px) { html[data-theme] .fx-elem .elab { display: none; } }