/* ==================================================================
   STODA · Neuigkeiten: Siegelbriefe (Startseite und /neuigkeiten) und der Beitrag
   ================================================================== */

/* ---------- Siegelbriefe ---------- */
.sb-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.sb-tools .meta{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;color:var(--stone)}
.sb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sb-card{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:var(--r-l);background:rgba(18,14,11,.9);overflow:clip;text-decoration:none;color:inherit;transition:transform .5s var(--soft),border-color .4s,box-shadow .5s}
.sb-card:hover,.sb-card:focus-visible{transform:translateY(-6px);border-color:rgba(227,139,61,.55);box-shadow:0 26px 50px rgba(0,0,0,.55),0 0 30px rgba(227,139,61,.12);outline:none}
.sb-card .pic{aspect-ratio:16/9;max-width:100%;transition:transform 1.2s var(--soft)}
.sb-card .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,14,.75),transparent 60%)}
.sb-card:hover .pic{transform:scale(1.05)}
.sb-in{display:grid;gap:8px;align-content:start;padding:18px 20px 20px;position:relative}
.sb-in h3{margin:0;font-family:var(--f-display);font-size:calc(1.45rem * var(--hs,1));line-height:1.1;text-wrap:balance}
.sb-in .txt{color:var(--dim);font-size:.96rem;line-height:1.55}
.sb-in .meta{display:flex;gap:10px;justify-content:space-between;margin-top:4px;font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.64rem;color:var(--stone)}
.seal{position:absolute;right:16px;top:-26px;z-index:2;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 34%,#d0543a,#8e1f12 70%);box-shadow:inset 0 0 0 4px rgba(0,0,0,.15),0 6px 14px rgba(0,0,0,.5);color:#f1c9a8;font-family:var(--f-display);font-size:calc(1.3rem * var(--hs,1));transform:rotate(-10deg);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.sb-card:hover .seal{transform:rotate(6deg) scale(1.08)}
.seal[data-k="patch"]{background:radial-gradient(circle at 38% 34%,#5fa7a0,#1f4f4b 70%);color:#d7f3ef}
.seal[data-k="community"]{background:radial-gradient(circle at 38% 34%,#d9b25a,#7a5a1a 70%);color:#fff1cc}
.seal[data-k="termin"]{background:radial-gradient(circle at 38% 34%,#c96a5a,#6a1f17 70%)}
.sb-card.big{grid-column:span 2;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:none}
.sb-card.big .pic{aspect-ratio:auto;min-height:280px}
.sb-card.big .seal{top:20px;left:-26px;right:auto}
.sb-card.big .sb-in{padding:28px 28px 26px 36px;align-content:center}
.sb-card.big h3{font-size:calc(2rem * var(--hs,1))}
.sb-card.fresh{animation:sbIn .6s var(--soft) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes sbIn{from{opacity:0;transform:translateY(22px)}}
.sb-more{display:flex;justify-content:center;margin-top:28px}
.sb-empty{padding:30px 0;color:var(--stone)}
/* Startseite: 1 bis 4 Briefe */
.band.bg-news{--bg:radial-gradient(ellipse 50% 60% at 90% 10%,rgba(227,139,61,.12),transparent 70%),linear-gradient(180deg,#0f1219,#120f0d)}
.sb-home.n1{grid-template-columns:minmax(0,1fr)}
.sb-home.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-home.n4 .sb-card.big{grid-row:span 1}
@media (max-width:980px){.sb,.sb-home.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.sb-card.big{grid-column:1 / -1}}
@media (max-width:640px){.sb,.sb-home.n2{grid-template-columns:minmax(0,1fr)}.sb-card.big{grid-template-columns:minmax(0,1fr)}.sb-card.big .pic{min-height:190px}.sb-card.big .seal{top:-26px;left:auto;right:16px}.sb-card.big .sb-in{padding:22px 20px}.sb-card.big h3{font-size:calc(1.6rem * var(--hs,1))}}

/* ---------- Beitrag ---------- */
.art{position:relative}
.art-progress{position:fixed;left:0;right:0;top:var(--nav-h);z-index:90;height:3px;background:rgba(235,225,203,.06)}
.art-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember-deep),var(--ember),var(--ember-hot));box-shadow:0 0 12px var(--ember);transition:width .1s linear}
.art-hero{display:block;min-height:clamp(300px,42vw,460px);padding-top:var(--nav-h);display:flex;align-items:flex-end}
.art-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--night) 2%,rgba(12,15,21,.55) 45%,rgba(12,15,21,.25))}
.art-hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:28px;display:grid;gap:10px;justify-items:start}
.art-hero .crumbs{margin-bottom:10px}
.art-hero h1{margin:0;font-family:var(--f-display);font-weight:900;font-size:calc(clamp(2.2rem,5vw,3.8rem) * var(--hs,1));line-height:.98;max-width:20ch;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.art-hero .meta{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:var(--dim)}
.art-grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,4vw,60px);padding-block:30px clamp(60px,8vw,100px)}
.art-grid.no-toc{grid-template-columns:minmax(0,1fr)}
.art-grid.no-toc .art-main{margin-inline:auto}
.art-toc{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;display:grid;gap:2px;font-size:.92rem}
.art-toc b{font-family:var(--f-label);letter-spacing:.18em;text-transform:uppercase;font-size:.66rem;color:var(--stone);margin-bottom:8px;font-weight:500}
.art-toc a{position:relative;padding:.35rem 0 .35rem 14px;color:var(--stone);text-decoration:none;border-left:1px solid var(--line);transition:color .25s,border-color .25s}
.art-toc a:hover{color:var(--parchment)}
.art-toc a.on{color:var(--parchment);border-left-color:var(--ember)}
.art-toc a.on::before{content:"";position:absolute;left:-4px;top:50%;margin-top:-3px;width:7px;height:7px;transform:rotate(45deg);background:var(--ember);box-shadow:0 0 8px var(--ember)}
.art-main{max-width:70ch;display:grid;gap:22px;min-width:0}
.art-lead{font-size:1.2rem;color:var(--parchment);line-height:1.55}
.prose-n{color:var(--dim);line-height:1.75;font-size:1.05rem}
.prose-n > *{margin:0 0 1.05em}
.prose-n > :first-child:not(h2):not(h3)::first-letter{float:left;font-family:var(--f-display);font-size:calc(3.6rem * var(--hs,1));line-height:.8;padding:6px 10px 0 0;color:var(--ember)}
.prose-n h2,.prose-n h3{font-family:var(--f-display);color:var(--parchment);line-height:1.1;margin:1.4em 0 .5em;scroll-margin-top:calc(var(--nav-h) + 20px)}
.prose-n h2{font-size:calc(1.85rem * var(--hs,1))}.prose-n h3{font-size:calc(1.4rem * var(--hs,1))}
.prose-n a{color:var(--ember)}
.prose-n img{max-width:100%;height:auto;border-radius:var(--r-m);border:1px solid var(--line)}
.prose-n figcaption{font-size:.85rem;color:var(--stone);margin-top:6px}
.prose-n blockquote{margin:0 0 1.05em;padding:14px 20px;border-left:2px solid var(--ember);border-radius:0 var(--r-m) var(--r-m) 0;background:linear-gradient(90deg,rgba(227,139,61,.12),rgba(227,139,61,.02));font-style:italic;font-size:1.15rem;color:var(--parchment)}
.prose-n ul{list-style:none;padding:0;display:grid;gap:8px}
.prose-n ul li{display:flex;gap:12px}
.prose-n ul li::before{content:"";width:8px;height:8px;margin-top:.62em;transform:rotate(45deg);background:var(--ember);flex:none}
.prose-n ol{padding-left:1.3em}
.prose-n table{border-collapse:collapse;width:100%}
.prose-n td,.prose-n th{border-bottom:1px solid var(--line);padding:.5rem;text-align:left}
.prose-n .ph{font-style:italic;color:var(--ember)}
/* Reaktionen */
.react{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:20px;border-top:1px solid var(--line)}
.react > span{font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;color:var(--stone);margin-right:6px}
.rx{display:inline-flex;align-items:center;gap:8px;padding:.42rem .85rem;border:1px solid var(--line);border-radius:20px;background:rgba(12,15,21,.5);cursor:pointer;color:var(--dim);font:inherit;font-size:.95rem;transition:border-color .25s,color .25s,background .25s,transform .35s var(--soft)}
.rx .ico{width:17px;height:17px}
.rx:hover{transform:translateY(-2px);color:var(--parchment)}
.rx b{font-family:var(--f-label);font-size:.78rem;color:var(--stone);font-variant-numeric:tabular-nums;font-weight:500}
.rx[aria-pressed="true"]{border-color:var(--ember);background:rgba(227,139,61,.14);color:var(--parchment)}
.rx[aria-pressed="true"] b{color:var(--ember-hot)}
.rx.pop{animation:rxPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes rxPop{40%{transform:scale(1.15)}}
/* Kommentare */
.cmts{display:grid;gap:14px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.cmts h2{margin:0;font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;color:var(--ember);font-weight:700}
.cmt-list{display:grid;gap:12px}
.cmt{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:rgba(12,15,21,.45);transition:opacity .4s,transform .4s var(--soft)}
.cmt.dev{border-color:rgba(227,139,61,.4);background:rgba(227,139,61,.06)}
.cmt.pending{border-style:dashed}
.cmt.new{animation:gPop .5s var(--soft) both}
.cmt.out{opacity:0;transform:translateX(20px)}
.cmt .av{text-decoration:none}
.cmt-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cmt-h b{color:var(--parchment);font-weight:500}
.cmt-h .meta{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.62rem;color:var(--stone)}
.cmt .badge{display:inline-block;padding:0 .45rem;border-radius:20px;background:var(--ember);color:#1a0f08;font-family:var(--f-label);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.cmt p{color:var(--dim);font-size:.97rem;margin:2px 0 0;overflow-wrap:anywhere}
.cmt-wait{display:inline-block;margin-top:6px;font-size:.82rem;color:var(--gold);font-style:italic}
.cmt-act{display:flex;gap:14px;margin-top:4px}
.cmt-act button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.62rem;color:var(--stone);transition:color .2s}
.cmt-act button:hover{color:var(--ember)}
.cmt-none{color:var(--stone)}
.cmt-form{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
.cmt-form textarea{width:100%;min-height:84px;resize:vertical;padding:.7rem .85rem;font:inherit;font-size:1rem;background:rgba(12,15,21,.65);border:1px solid rgba(235,225,203,.22);border-radius:var(--r-m);color:var(--parchment);transition:border-color .25s,box-shadow .25s}
.cmt-form textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(227,139,61,.18)}
.cmt-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}
.cmt-row .meta{font-family:var(--f-label);letter-spacing:.1em;font-size:.66rem;color:var(--stone)}
.cmt-locked{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 16px;border:1px dashed rgba(227,139,61,.45);border-radius:var(--r-m);color:var(--dim);font-size:.95rem}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.art-nav a{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;color:var(--parchment);transition:border-color .3s,transform .4s var(--soft)}
.art-nav a:hover{border-color:var(--ember);transform:translateY(-2px)}
.art-nav .meta{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.62rem;color:var(--stone)}
.art-nav a.nx{text-align:right}
@media (max-width:900px){.art-grid{grid-template-columns:minmax(0,1fr)}.art-toc{position:static;display:flex;flex-wrap:wrap;gap:6px}.art-toc b{width:100%;margin:0}.art-toc a{border:1px solid var(--line);border-radius:20px;padding:.25rem .7rem}.art-toc a.on::before{display:none}.art-toc a.on{border-color:var(--ember)}}
@media (max-width:560px){.art-nav{grid-template-columns:minmax(0,1fr)}.art-nav a.nx{text-align:left}.cmt-form{grid-template-columns:minmax(0,1fr)}.cmt-form > .av{display:none}}
@media (prefers-reduced-motion: reduce){.sb-card,.sb-card .pic,.seal,.rx,.cmt{transition:none!important;animation:none!important}}