/* Themenseiten (lib/views/seo-pages.js): Twitch-/Kick-Overlays, OBS-Alerts,
   kostenlose Overlays. Tokens aus public-chrome.css, Grundlage public-pages.css. */
.seo-page{width:100%;max-width:var(--px-page,1260px);margin-inline:auto;padding:clamp(40px,6vw,88px) var(--px-gutter,40px) clamp(64px,8vw,120px)}
.seo-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,72px)}
.seo-hero h1{font-size:clamp(48px,6.4vw,96px)}
.seo-lead{margin:24px 0 0;max-width:34em;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--px-muted)}
.seo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.seo-shot{margin:0;border:1px solid var(--px-line);border-radius:var(--px-radius);background:var(--px-surface);overflow:hidden}
.seo-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.seo-shot figcaption{padding:10px 14px;font-size:13px;color:var(--px-subtle);border-top:1px solid var(--px-line)}
.seo-shot.is-hero{border-radius:var(--px-radius-lg);box-shadow:var(--px-shadow)}
.seo-section{margin-top:var(--px-section,96px)}
.seo-section h2{margin:0 0 28px;font-family:var(--px-font-heading);font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.01em;font-weight:700}
.seo-section h3{margin:0 0 8px;font-family:var(--px-font-heading);font-size:19px;line-height:1.3;font-weight:650}
.seo-section p{margin:0;color:var(--px-muted);line-height:1.6}
.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seo-card{padding:24px;border:1px solid var(--px-line);border-radius:var(--px-radius);background:var(--px-surface)}
.seo-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.seo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.seo-steps li{padding:24px;border-top:2px solid var(--px-brand);background:var(--px-surface-2);border-radius:0 0 var(--px-radius) var(--px-radius)}
.seo-steps li>span{display:block;margin-bottom:12px;font-family:var(--px-font-display);font-size:32px;line-height:1;color:var(--px-brand)}
.seo-faq{max-width:860px;border-top:1px solid var(--px-line)}
.seo-faq details{border-bottom:1px solid var(--px-line)}
.seo-faq summary{display:flex;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--px-font-heading);font-size:18px;font-weight:650;color:var(--px-ink)}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:'+';flex:none;font-size:22px;line-height:1;color:var(--px-brand)}
.seo-faq details[open] summary::after{content:'−'}
.seo-faq details p{padding:0 0 22px;max-width:46em}
.seo-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px)}
.seo-more h2{font-size:clamp(22px,2.2vw,28px)}
@media(max-width:1000px){.seo-grid,.seo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.seo-hero,.seo-more{grid-template-columns:minmax(0,1fr)}.seo-grid,.seo-steps{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.seo-gallery{grid-template-columns:minmax(0,1fr)}}