/* Textbloecke unter den Heros (SEO, 2026-09-15). Farben und Schriften kommen aus den Seiten-Variablen
   (--ink, --grey, --stone, --line, --sans, --serif), deshalb passt der Block auf hellen und dunklen Seiten. */
.seo{position:relative;z-index:1;padding:clamp(72px,10vw,150px) clamp(18px,4vw,56px);border-top:1px solid var(--line)}
.seo--solid{background:#fff}
.seo + .seo{border-top:0;padding-top:0}
.contact>.seo{padding:clamp(56px,7vw,110px) 0 0;margin-top:clamp(56px,7vw,110px)}   /* Kontaktseite: Block sitzt in .contact, die hat schon Seitenrand */
.seo-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:start}
.seo-aside{position:sticky;top:110px}
.seo-kicker{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);font-weight:400}
.seo h2{margin-top:14px;font-weight:300;letter-spacing:-.035em;line-height:1;font-size:clamp(2.1rem,4.4vw,4.4rem);text-wrap:balance}
.seo h2 em{font-family:var(--serif);font-style:normal;font-weight:400}
.seo-body{min-width:0}
.seo-body>p{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.65;color:var(--grey);max-width:62ch}
.seo-body>p+p{margin-top:1em}
.seo-body strong{font-weight:400;color:var(--ink)}
.seo-body h3{margin-top:clamp(40px,4vw,56px);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);font-weight:400}
.seo-body h3:first-child{margin-top:0}
.seo a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .25s,color .25s}
.seo a:hover{color:#FF2D6A;text-decoration-color:currentColor}

/* Liste mit Begriff links, Text rechts */
.seo-list{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.seo-list li{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:8px 28px;padding:20px 0;border-bottom:1px solid var(--line)}
.seo-list b{font-weight:400;color:var(--ink);font-size:1.05rem;line-height:1.4}
.seo-list span{color:var(--grey);line-height:1.6;max-width:52ch}
ol.seo-list{counter-reset:seo}
ol.seo-list b::before{counter-increment:seo;content:counter(seo,decimal-leading-zero);display:inline-block;min-width:2.2em;font-family:var(--serif);color:var(--stone)}

/* FAQ */
.seo-faq{border-top:1px solid var(--line)}
.seo-faq details{border-bottom:1px solid var(--line)}
.seo-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.35;color:var(--ink);transition:color .25s}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:'+';font-family:var(--serif);font-size:1.6em;line-height:.6;color:var(--stone);transition:transform .3s,color .25s;flex:none}
.seo-faq details[open] summary::after{transform:rotate(45deg);color:#FF2D6A}
.seo-faq summary:hover{color:#FF2D6A}
.seo-faq summary:focus-visible{outline:2px solid #FF2D6A;outline-offset:4px;border-radius:2px}
.seo-faq p{padding:0 0 24px;color:var(--grey);line-height:1.65;max-width:62ch}

@media (max-width:820px){
  .seo-in{grid-template-columns:minmax(0,1fr)}
  .seo-aside{position:static}
  .seo-list li{grid-template-columns:minmax(0,1fr)}
}