/* Variante Kunst (siegfried-taler-sicherheit.de): Graphit wie die Ausstellung, Burgunder-Bänder als Sicherheitsebenen.
   Dramaturgie: Kunstwerk → Fragen der Käufer → drei Schutzebenen → Partner → Prüffragen. */
:root{--bg:#0b0e12;--fg:#f3efe6;--muted:#bdbdb6;--eyebrow:#c9ad6f;--accent:#b79a5b;--line:rgba(183,154,91,.28);--surface-alt:#12161b;--card:#12161b;--card-line:rgba(183,154,91,.2);--link-hover:#d8c293}
.hero-art::before{inset:1% 0 5%;border-color:rgba(183,154,91,.22)}
.hero-art::after{content:'';position:absolute;inset:7% 6% 11%;border:1px solid rgba(106,42,50,.7);border-radius:50%;pointer-events:none}
.hero-art::before,.hero-art::after{box-shadow:none}
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border:1px solid var(--line)}
.layers>*{min-width:0;padding:30px 28px;border-right:1px solid var(--line)}
.layers>*:last-child{border-right:0}
.layers>*:nth-child(1){background:rgba(106,42,50,.18)}
.layers>*:nth-child(2){background:rgba(106,42,50,.32)}
.layers>*:nth-child(3){background:rgba(106,42,50,.48)}
.layers .card-number{font-size:42px;line-height:1;margin-bottom:18px;color:#d8c293}
.layers h3{font-size:clamp(23px,2vw,29px)}
.layers p{font-size:15px;color:var(--muted)}
.layers p:last-child{margin-bottom:0}
.answer-box{border-left-color:#8c3a45}
@media (max-width:900px){.layers{grid-template-columns:1fr}.layers>*{border-right:0;border-bottom:1px solid var(--line)}.layers>*:last-child{border-bottom:0}}
/* Zitat N. Kuhz (#zitat, weinrote Fläche): Editorial-Zitat mit feinem Goldrahmen */
#zitat .pull-quote{position:relative;max-width:1220px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(24px,6vw,84px) clamp(32px,5vw,64px);border:1px solid rgba(194,155,80,.55);background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.008))}
#zitat .pull-quote::after{content:'';position:absolute;inset:7px;border:1px solid rgba(194,155,80,.14);pointer-events:none}
#zitat .pull-quote::before{content:'„';content:'„' / '';position:absolute;left:clamp(14px,3.4vw,46px);top:-.5em;font:400 clamp(84px,9vw,140px)/1 var(--serif);color:rgba(194,155,80,.42);pointer-events:none;speak:never}
#zitat .pull-quote p{max-width:960px;font-size:clamp(19px,1.95vw,28px);line-height:1.62}
#zitat .pull-quote p::before{content:none}
#zitat .pull-quote cite{position:relative;max-width:960px;margin-top:clamp(30px,3.4vw,44px);padding-top:22px;font-size:13px;line-height:1.7;letter-spacing:.05em;color:var(--muted)}
#zitat .pull-quote cite::before{content:'';position:absolute;left:0;top:0;width:48px;height:1px;background:rgba(194,155,80,.8)}
#zitat .pull-quote cite strong{font:400 clamp(19px,1.6vw,22px)/1.3 var(--serif);letter-spacing:.01em;color:var(--fg)}
/* FAQ „06 / Fragen“ als Akkordeon (details/summary, inc/faq.php) im Schwarz-Gold-Design */
#fragen .stm-faq{margin-top:clamp(28px,3vw,40px);border-top:1px solid rgba(194,155,80,.28)}
#fragen .stm-faq__item{margin:0;padding:0;border-bottom:1px solid rgba(194,155,80,.28)}
#fragen .stm-faq__question{display:flex;align-items:center;gap:24px;min-height:44px;padding:22px 12px 22px 0;list-style:none;cursor:pointer;font:400 clamp(20px,2.1vw,28px)/1.3 var(--serif);letter-spacing:-.015em;color:var(--fg);transition:background-color .2s ease}
#fragen .stm-faq__question::-webkit-details-marker{display:none}
#fragen .stm-faq__question::marker{content:''}
#fragen .stm-faq__question:hover,#fragen .stm-faq__question:focus-visible{background:rgba(194,155,80,.05)}
#fragen .stm-faq__question:focus-visible{outline:2px solid #c9ad6f;outline-offset:2px}
#fragen .stm-faq__text{flex:1 1 auto;min-width:0}
#fragen .stm-faq__icon{position:relative;flex:0 0 18px;width:18px;height:18px}
#fragen .stm-faq__icon::before,#fragen .stm-faq__icon::after{content:'';position:absolute;left:50%;top:50%;background:#c9ad6f;transform:translate(-50%,-50%)}
#fragen .stm-faq__icon::before{width:18px;height:1.5px}
#fragen .stm-faq__icon::after{width:1.5px;height:18px;transition:transform .2s ease}
#fragen .stm-faq__item[open] .stm-faq__icon::after{transform:translate(-50%,-50%) scaleY(0)}
#fragen .stm-faq__answer p{max-width:780px;margin:0;padding:0 0 26px;font-size:17px;line-height:1.75;color:var(--muted)}
@media (max-width:760px){#fragen .stm-faq__question{gap:18px;padding:18px 6px 18px 0}#fragen .stm-faq__answer p{font-size:16px}}
@media (prefers-reduced-motion:reduce){#fragen .stm-faq__icon::after,#fragen .stm-faq__question{transition:none}}
/* „04 / Eigentum“ I–IV (#eigentum, im Prüfvermerk-Rahmen): Abstand zum gestrichelten Rahmen + Zeitleisten-Animation (assets/js/timeline.js) */
#eigentum .pruefvermerk>ol.steps{margin-left:clamp(20px,3vw,40px)}
#eigentum .steps{position:relative}
#eigentum .steps>li::before{z-index:1}
#eigentum .steps:is(.tl-animated,.tl-complete){border-left-color:transparent}
#eigentum .steps:is(.tl-animated,.tl-complete)::before{content:'';position:absolute;left:-1px;top:14px;width:1px;height:max(0px,calc(var(--tl-end,14px) - 14px));background:var(--line);pointer-events:none}
#eigentum .steps:is(.tl-animated,.tl-complete)::after{content:'';position:absolute;left:-1px;top:14px;width:1px;height:max(0px,calc(var(--tl-progress,14px) - 14px));background:#c9ad6f;pointer-events:none;transition:height .7s cubic-bezier(.22,.61,.36,1)}
#eigentum .steps.tl-animated>li::before{border-color:rgba(201,173,111,.35);color:rgba(201,173,111,.6);transition:background-color .6s ease,border-color .6s ease,color .6s ease}
#eigentum .steps.tl-animated>li.is-active::before,#eigentum .steps.tl-complete>li::before{background:#c9ad6f;border-color:#c9ad6f;color:#0b0e12}
#eigentum .steps.tl-animated>li>*{opacity:0;transform:translateY(16px);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}
#eigentum .steps.tl-animated>li.is-active>*{opacity:1;transform:none}
#eigentum .steps.tl-animated>li.is-active>p{transition-delay:.08s}
#eigentum .steps.tl-complete::after,#eigentum .steps.tl-init,#eigentum .steps.tl-init::after,#eigentum .steps.tl-init>li::before,#eigentum .steps.tl-init>li>*{transition:none!important}
@media (prefers-reduced-motion:reduce){#eigentum .steps.tl-animated>li>*{opacity:1;transform:none}#eigentum .steps::after,#eigentum .steps>li::before,#eigentum .steps>li>*{transition:none!important}}
