/* R46_PUBLIC_SEO_STYLE */

:root{
color-scheme:dark;
--bg:#08080d;
--text:#f8f5ff;
--muted:#b8b1c7;
--line:rgba(255,255,255,.11);
--accent:#c2a8ff
}

*{box-sizing:border-box}

body{
margin:0;
background:
radial-gradient(circle at 10% 0,#271743 0,transparent 35rem),
radial-gradient(circle at 90% 15%,#35172d 0,transparent 32rem),
var(--bg);
color:var(--text);
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
line-height:1.65
}

a{color:inherit}

.seo-header,.seo-footer,.seo-main{
width:min(1180px,calc(100% - 32px));
margin-inline:auto
}

.seo-header,.seo-footer{
display:flex;
justify-content:space-between;
align-items:center;
gap:24px
}

.seo-header{padding:25px 0}

.seo-header nav,.seo-footer nav{
display:flex;
flex-wrap:wrap;
gap:16px
}

.seo-header a,.seo-footer a{text-decoration:none}

.seo-brand{font-size:1.55rem;font-weight:900}

.seo-main{padding-bottom:60px}

.seo-hero{max-width:900px;padding:70px 0 44px}

.seo-eyebrow,.seo-meta{
color:var(--accent);
font-size:.78rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase
}

.seo-hero h1{
margin:0;
font-size:clamp(2.3rem,7vw,5rem);
line-height:1.03;
letter-spacing:-.045em
}

.seo-lead{
max-width:780px;
color:var(--muted);
font-size:1.2rem
}

.seo-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px
}

.seo-card,.seo-copy,.seo-cta,
.seo-character-card,.seo-character-detail,
.seo-character-count{
border:1px solid var(--line);
background:linear-gradient(145deg,rgba(25,23,37,.92),rgba(12,11,19,.96));
border-radius:22px
}

.seo-card,.seo-copy{padding:26px}

.seo-card p,.seo-copy p,
.seo-character-card p,.seo-character-detail p{
color:var(--muted)
}

.seo-copy,.seo-cta{margin-top:30px}

.seo-cta{
padding:25px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px
}

.seo-button{
display:inline-flex;
padding:12px 18px;
background:linear-gradient(135deg,#d6c3ff,#f4afd9);
color:#17111f;
border-radius:13px;
text-decoration:none;
font-weight:800
}

.seo-note{
margin-top:20px;
padding:16px;
background:rgba(255,255,255,.04);
border-radius:14px
}

.seo-character-count{
display:inline-block;
margin-bottom:22px;
padding:10px 15px;
color:var(--muted)
}

.seo-character-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px
}

.seo-character-card{overflow:hidden}

.seo-character-image{
display:block;
aspect-ratio:3/4;
background:#16131e
}

.seo-character-card img{
width:100%;
height:100%;
display:block;
object-fit:cover
}

.seo-character-card>div{padding:18px}

.seo-character-card h2{
margin:5px 0 10px;
font-size:1.2rem
}

.seo-character-card h2 a{text-decoration:none}

.seo-character-placeholder{
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(145deg,#242033,#16131e);
color:var(--accent);
text-decoration:none
}

.seo-character-placeholder span{
font-size:clamp(3rem,8vw,6rem);
font-weight:900
}

.seo-character-detail{
padding:28px;
display:grid;
grid-template-columns:minmax(260px,380px) 1fr;
gap:34px
}

.seo-character-detail-image{
aspect-ratio:3/4;
overflow:hidden;
border-radius:18px;
background:#16131e
}

.seo-character-detail-image img,
.seo-character-detail-image .seo-character-placeholder{
width:100%;
height:100%;
object-fit:cover
}

.seo-related{
display:flex;
flex-wrap:wrap;
gap:10px
}

.seo-related a{
padding:8px 12px;
border:1px solid var(--line);
border-radius:999px;
text-decoration:none
}

.seo-footer{
padding:30px 0 45px;
border-top:1px solid var(--line);
color:var(--muted)
}

@media(max-width:900px){
.seo-grid,.seo-character-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}
}

@media(max-width:650px){
.seo-header,.seo-footer,.seo-cta{
align-items:flex-start;
flex-direction:column
}

.seo-grid,.seo-character-grid,.seo-character-detail{
grid-template-columns:1fr
}

.seo-hero{padding-top:45px}
}


/* R46_SEO_CHARACTER_PREVIEW_LAYOUT */

/*
 * Öffentliche Charakterseite:
 * optisch an die Charakter-Vorschau der eigentlichen App angelehnt.
 *
 * SEO-Inhalt bleibt vollständig serverseitig im HTML.
 */

.seo-character-preview {
    max-width: 1080px;
    margin: 46px auto 28px;
    padding: 0;
    overflow: hidden;
    grid-template-columns: minmax(340px, 48%) minmax(0, 1fr);
    gap: 0;
    border-radius: 25px;
    background:
        linear-gradient(
            145deg,
            rgba(20,18,29,.98),
            rgba(10,10,16,.985)
        );
    box-shadow:
        0 28px 90px rgba(0,0,0,.30);
}

.seo-character-preview .seo-character-detail-image {
    align-self: stretch;
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(126,87,194,.09),
            transparent 55%
        ),
        #0d0c13;
}

.seo-character-preview .seo-character-detail-image img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    display: block;
    object-fit: contain;
    object-position: center top;
    background: #0d0c13;
}

.seo-character-preview
.seo-character-detail-image
.seo-character-placeholder {
    min-height: 620px;
    border-radius: 0;
}

.seo-character-content {
    min-width: 0;
    padding: clamp(28px,4vw,48px);
}

.seo-character-kicker {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: .76rem;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.seo-character-title {
    margin: 0;
    max-width: 760px;
    font-size: clamp(2.25rem,5vw,4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.seo-character-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 25px;
}

.seo-character-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: #ded9e8;
    font-size: .74rem;
    line-height: 1;
    font-weight: 750;
}

.seo-character-summary {
    margin: 0;
    color: #d4cedf !important;
    font-size: 1rem;
    line-height: 1.72;
}

.seo-character-divider {
    height: 1px;
    margin: 27px 0 24px;
    background: var(--line);
}

.seo-character-content section + section {
    margin-top: 27px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.seo-character-content section h2 {
    margin: 0 0 10px;
    font-size: 1.18rem;
}

.seo-character-content section p {
    margin: 0;
}

.seo-character-content > .seo-button {
    margin-top: 28px;
}

.seo-character-preview + .seo-copy {
    max-width: 1080px;
    margin-inline: auto;
}

@media(max-width:800px) {
    .seo-character-preview {
        margin-top: 25px;
        grid-template-columns: 1fr;
    }

    .seo-character-preview .seo-character-detail-image,
    .seo-character-preview .seo-character-detail-image img,
    .seo-character-preview
    .seo-character-detail-image
    .seo-character-placeholder {
        min-height: 0;
    }

    .seo-character-preview .seo-character-detail-image {
        aspect-ratio: 3 / 4;
        max-height: 760px;
    }

    .seo-character-content {
        padding: 26px 22px 30px;
    }

    .seo-character-title {
        font-size: clamp(2rem,11vw,3.25rem);
    }
}


/* R46_SEO_CHARACTER_IMAGE_CONTAIN */

/*
 * Das öffentliche Charakterbild wird nie abgeschnitten.
 * Querformat, Hochformat und quadratische Motive bleiben vollständig sichtbar.
 */
.seo-character-preview .seo-character-detail-image img {
    max-width: 100%;
}