.seo-page{min-height:calc(100vh - var(--header-height));color:#e8edf2;background:#050d18}.seo-wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}.seo-hero{padding:110px 0 90px;text-align:center;background:radial-gradient(circle at top,rgba(216,164,63,.13),transparent 38%),linear-gradient(180deg,#0a1828,#06101c)}.seo-hero-small{padding:85px 0 70px}.seo-kicker{margin:0 0 16px;color:#d8a43f;font-family:Georgia,"Times New Roman",serif;font-size:13px;font-weight:700;letter-spacing:2.3px;text-transform:uppercase}.seo-hero h1,.seo-section h2,.seo-cta h2{color:#f4f0e8;font-family:Georgia,"Times New Roman",serif;font-weight:500;line-height:1.15}.seo-hero h1{max-width:900px;margin:0 auto 22px;font-size:clamp(38px,6vw,66px)}.seo-hero p{max-width:820px;margin:0 auto;color:rgba(232,237,242,.8);font-size:19px;line-height:1.75}.seo-section{padding:82px 0;background:#07111f}.seo-section:nth-of-type(odd){background:#050d18}.seo-dark{background:#081421!important}.seo-section h2{margin:0 0 22px;font-size:clamp(31px,4vw,46px)}.seo-section p{color:rgba(232,237,242,.78);font-size:17px;line-height:1.75}.seo-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);gap:65px;align-items:center}.seo-steps{list-style:none;counter-reset:step;padding:8px 0}.seo-steps li{counter-increment:step;position:relative;padding:18px 0 18px 58px;border-bottom:1px solid rgba(255,255,255,.08)}.seo-steps li::before{content:counter(step);position:absolute;left:0;top:17px;width:36px;height:36px;display:grid;place-items:center;color:#15100a;background:#d8a43f;border-radius:50%;font-weight:700}.seo-steps strong,.seo-steps span{display:block}.seo-steps strong{color:#f4f0e8;margin-bottom:4px}.seo-steps span{color:rgba(232,237,242,.67)}.seo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}.seo-cards article{padding:28px 24px;background:rgba(4,12,22,.62);border:1px solid rgba(216,164,63,.25)}.seo-cards h3{margin:0 0 12px;color:#f1c85e;font-family:Georgia,"Times New Roman",serif;font-size:23px;font-weight:500}.seo-cards p{font-size:15px}.seo-quote{padding:32px;color:#f4f0e8;background:rgba(216,164,63,.08);border-left:3px solid #d8a43f;font-family:Georgia,"Times New Roman",serif;font-size:25px;line-height:1.5}.seo-cta{padding:76px 0;text-align:center;background:linear-gradient(180deg,#081421,#050d18)}.seo-cta h2{margin:0 0 14px;font-size:42px}.seo-cta p{margin:0 0 26px;color:rgba(232,237,242,.76);font-size:18px}.seo-cta a{min-height:50px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;color:#15100a;background:linear-gradient(180deg,#f1c85e,#d89f3f);border:1px solid #f1c85e;border-radius:4px;font-family:Georgia,"Times New Roman",serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.faq-list{max-width:900px}.faq-item{margin-bottom:12px;background:rgba(8,20,33,.8);border:1px solid rgba(216,164,63,.24)}.faq-item summary{position:relative;padding:22px 56px 22px 24px;color:#f4f0e8;font-family:Georgia,"Times New Roman",serif;font-size:21px;cursor:pointer;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'+';position:absolute;right:24px;color:#d8a43f;font-size:28px}.faq-item[open] summary::after{content:'–'}.faq-item div{padding:0 24px 24px}.faq-item p{font-size:16px}@media(max-width:900px){.seo-two{grid-template-columns:1fr;gap:35px}.seo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.seo-wrap{width:min(100% - 28px,1120px)}.seo-hero{padding:72px 0 58px}.seo-hero h1{font-size:38px}.seo-hero p{font-size:17px}.seo-section{padding:58px 0}.seo-cards{grid-template-columns:1fr}.seo-cta{padding:58px 0}.seo-cta h2{font-size:34px}.faq-item summary{padding:19px 48px 19px 18px;font-size:19px}.faq-item div{padding:0 18px 20px}}

/* ==========================================================
   DAS SPIEL – visuelle Präsentationsseite
   Ausschließlich innerhalb von .spiel-page wirksam.
   Header und Footer bleiben unberührt.
========================================================== */
.spiel-page{min-height:calc(100vh - var(--header-height));color:#e8edf2;background:#050d18;overflow:hidden}.spiel-page *{box-sizing:border-box}.spiel-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}.spiel-page h1,.spiel-page h2,.spiel-page h3{font-family:Georgia,"Times New Roman",serif;font-weight:500}.spiel-page h2{margin:0;color:#f4f0e8;font-size:clamp(31px,4vw,48px);line-height:1.15}.spiel-page p{margin-top:0}.spiel-kicker{margin:0 0 12px;color:#e3b44e;font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:700;letter-spacing:2.7px;text-transform:uppercase}.spiel-btn{display:inline-flex;min-height:48px;padding:0 24px;align-items:center;justify-content:center;border:1px solid transparent;font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}.spiel-btn:hover,.spiel-btn:focus-visible{transform:translateY(-2px)}.spiel-btn-primary{color:#17110a;background:linear-gradient(180deg,#f2cb67,#d89f3f);border-color:#f5d681;box-shadow:0 8px 28px rgba(0,0,0,.32)}.spiel-btn-secondary{color:#f2d486;background:rgba(4,12,22,.56);border-color:rgba(226,179,77,.62)}

.spiel-hero{position:relative;min-height:630px;display:grid;place-items:center;padding:92px 24px;background:url("/assets/backgrounds/faq.webp") center 42%/cover no-repeat}.spiel-hero::after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(180deg,transparent,#07111f)}.spiel-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,10,18,.34),rgba(3,10,18,.62) 55%,rgba(3,10,18,.88)),linear-gradient(90deg,rgba(3,10,18,.28),transparent 32%,transparent 68%,rgba(3,10,18,.28))}.spiel-hero-content{position:relative;z-index:1;width:min(940px,100%);text-align:center;text-shadow:0 3px 18px rgba(0,0,0,.86)}.spiel-hero h1{max-width:920px;margin:0 auto 24px;color:#fff9ef;font-size:clamp(42px,6vw,72px);line-height:1.05}.spiel-hero-text{max-width:820px;margin:0 auto;color:rgba(245,247,249,.9);font-size:18px;line-height:1.75}.spiel-hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:31px}

.spiel-section{padding:84px 0}.spiel-intro{position:relative;background:#07111f}.spiel-section-head{max-width:850px;margin:0 auto 38px;text-align:center}.spiel-section-head>p:last-child{margin:17px auto 0;color:rgba(232,237,242,.72);font-size:17px;line-height:1.7}.spiel-feature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.spiel-feature-card{position:relative;min-width:0;background:linear-gradient(180deg,rgba(12,28,44,.98),rgba(5,15,25,.98));border:1px solid rgba(218,176,82,.44);box-shadow:0 18px 45px rgba(0,0,0,.27);overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.spiel-feature-card:hover{transform:translateY(-5px);border-color:rgba(242,203,103,.78);box-shadow:0 24px 55px rgba(0,0,0,.39)}.spiel-feature-image{height:155px;background-position:center;background-size:cover;filter:saturate(.82) contrast(1.05)}.spiel-feature-image::after{content:"";display:block;width:100%;height:100%;background:linear-gradient(180deg,transparent 35%,rgba(5,15,25,.92))}.spiel-feature-market .spiel-feature-image{background-image:url("/assets/images/spiel/dynamische-maerkte-bg.webp");background-position:center 58%}.spiel-feature-fleet .spiel-feature-image{background-image:url("/assets/images/spiel/flotte-und-routen-bg.webp");background-position:center 54%}.spiel-feature-ports .spiel-feature-image{background-image:url("/assets/images/spiel/haefen-und-kontore-bg.webp");background-position:center 57%}.spiel-feature-city .spiel-feature-image{background-image:url("/assets/images/spiel/stadtentwicklung-bg.webp");background-position:center 53%}.spiel-feature-world .spiel-feature-image{background-image:url("/assets/images/spiel/persistente-welt-bg.webp");background-position:center 52%}.spiel-feature-body{position:relative;padding:20px 18px 24px}.spiel-feature-number{position:absolute;right:15px;top:-21px;color:rgba(242,203,103,.76);font-family:Georgia,"Times New Roman",serif;font-size:28px}.spiel-feature-card h3{margin:0 0 10px;color:#f2c75f;font-size:21px;line-height:1.15}.spiel-feature-card p{margin:0;color:rgba(232,237,242,.68);font-size:14px;line-height:1.58}

.spiel-story-section{background:#050d18}.spiel-story-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);min-height:440px;border:1px solid rgba(218,176,82,.38);background:rgba(8,20,33,.88);box-shadow:0 24px 70px rgba(0,0,0,.3)}.spiel-story-image{min-height:440px;background:linear-gradient(90deg,transparent 65%,rgba(8,20,33,.94)),url("/assets/backgrounds/dashboardBG.webp") center/cover no-repeat}.spiel-story-copy{padding:58px 52px;align-self:center}.spiel-story-copy h2{font-size:clamp(31px,4vw,46px)}.spiel-story-copy>p:not(.spiel-kicker){color:rgba(232,237,242,.75);font-size:16px;line-height:1.75}.spiel-story-copy blockquote{margin:26px 0 0;padding:18px 0 0;border-top:1px solid rgba(218,176,82,.28);color:#f1c85e;font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.5}

.spiel-journey-section{background:linear-gradient(180deg,#081523,#06101b)}.spiel-section-head-compact{margin-bottom:48px}.spiel-journey{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none}.spiel-journey::before{content:"";position:absolute;top:53px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(216,164,63,.7),transparent)}.spiel-journey li{position:relative;text-align:center}.spiel-step-icon{position:relative;z-index:1;width:104px;height:104px;margin:0 auto 21px;display:grid;place-items:center;color:#e3b44e;background:radial-gradient(circle,rgba(216,164,63,.13),rgba(4,12,22,.96));border:1px solid rgba(226,179,77,.7);border-radius:50%;box-shadow:0 0 0 7px rgba(216,164,63,.035);font-family:Georgia,"Times New Roman",serif;font-size:34px}.spiel-step-number{position:absolute;top:0;left:calc(50% + 39px);color:#f2c75f;font-family:Georgia,"Times New Roman",serif;font-size:24px}.spiel-journey h3{margin:0 0 9px;color:#f2c75f;font-size:21px}.spiel-journey p{margin:0;color:rgba(232,237,242,.65);font-size:14px;line-height:1.6}

.spiel-playstyle-section{background:#050d18}.spiel-playstyle-grid{display:grid;grid-template-columns:minmax(280px,.65fr) minmax(0,1.35fr);gap:65px;align-items:start}.spiel-playstyle-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.spiel-playstyle-list article{padding:22px 23px;background:rgba(11,27,42,.72);border:1px solid rgba(122,159,187,.23);border-left:2px solid rgba(216,164,63,.72)}.spiel-playstyle-list strong,.spiel-playstyle-list span{display:block}.spiel-playstyle-list strong{margin-bottom:7px;color:#f1c85e;font-family:Georgia,"Times New Roman",serif;font-size:19px}.spiel-playstyle-list span{color:rgba(232,237,242,.69);font-size:14px;line-height:1.55}

.spiel-final-cta{position:relative;min-height:390px;display:grid;place-items:center;padding:72px 20px;background:url("/assets/images/spiel/dynamische-maerkte-bg.webp") center/cover no-repeat}.spiel-final-cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,22,.68),rgba(4,12,22,.91)),radial-gradient(circle at center,rgba(216,164,63,.14),transparent 48%)}.spiel-final-cta-content{position:relative;z-index:1;text-align:center}.spiel-final-cta h2{max-width:850px;margin:0 auto 14px;font-size:clamp(35px,5vw,55px)}.spiel-final-cta p:not(.spiel-kicker){max-width:720px;margin:0 auto 27px;color:rgba(240,243,246,.8);font-size:17px;line-height:1.7}

@media(max-width:1080px){.spiel-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.spiel-feature-card:nth-child(4),.spiel-feature-card:nth-child(5){grid-column:span 1}.spiel-story-copy{padding:45px 38px}.spiel-journey{gap:18px}}
@media(max-width:820px){.spiel-hero{min-height:560px;padding:75px 20px}.spiel-section{padding:66px 0}.spiel-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spiel-feature-card:last-child{grid-column:1/-1}.spiel-story-grid{grid-template-columns:1fr}.spiel-story-image{min-height:330px;background:linear-gradient(180deg,transparent 45%,rgba(8,20,33,.98)),url("/assets/backgrounds/dashboardBG.webp") center/cover no-repeat}.spiel-story-copy{padding:38px 31px 43px}.spiel-journey{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:43px}.spiel-journey::before{display:none}.spiel-playstyle-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:560px){.spiel-wrap{width:calc(100% - 28px)}.spiel-hero{min-height:510px;padding:60px 16px}.spiel-hero h1{font-size:38px}.spiel-hero-text{font-size:16px;line-height:1.62}.spiel-hero-actions{flex-direction:column;align-items:stretch}.spiel-btn{width:100%}.spiel-section{padding:54px 0}.spiel-section-head{margin-bottom:29px}.spiel-section-head>p:last-child{font-size:15px}.spiel-feature-grid{grid-template-columns:1fr}.spiel-feature-card:last-child{grid-column:auto}.spiel-feature-image{height:180px}.spiel-story-image{min-height:250px}.spiel-story-copy{padding:31px 22px 35px}.spiel-story-copy>p:not(.spiel-kicker){font-size:15px}.spiel-journey{grid-template-columns:1fr;gap:38px}.spiel-step-icon{width:90px;height:90px}.spiel-step-number{left:calc(50% + 32px)}.spiel-playstyle-list{grid-template-columns:1fr}.spiel-final-cta{min-height:360px;padding:58px 15px}}


/* ==========================================================
   DAS SPIEL – visuelle und typografische Verfeinerung
   Nur innerhalb von .spiel-page wirksam.
========================================================== */
.spiel-page{
    --spiel-serif: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --spiel-sans: "Segoe UI", Arial, Helvetica, sans-serif;
    font-family:var(--spiel-sans);
}
.spiel-page h1,.spiel-page h2,.spiel-page h3,
.spiel-kicker,.spiel-btn,.spiel-feature-number,.spiel-step-number,
.spiel-playstyle-list strong,.spiel-role-index{
    font-family:var(--spiel-serif);
}
.spiel-page h1,.spiel-page h2,.spiel-page h3{
    letter-spacing:-.015em;
    text-wrap:balance;
}
.spiel-page p,.spiel-page span{
    letter-spacing:.005em;
}
.spiel-section-head h2{
    font-size:clamp(34px,4.2vw,52px);
    line-height:1.08;
}
.spiel-section-head>p:last-child{
    max-width:790px;
    font-size:16px;
    line-height:1.75;
}
.spiel-kicker{
    font-size:11px;
    letter-spacing:3.1px;
}

/* Systemkarten: stärkeres Layout, weniger gleichförmig */
.spiel-feature-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:16px;
}
.spiel-feature-card{
    min-height:390px;
    border-color:rgba(216,164,63,.38);
    background:linear-gradient(180deg,rgba(9,24,39,.98),rgba(4,13,23,.99));
}
.spiel-feature-card:nth-child(1),
.spiel-feature-card:nth-child(2){grid-column:span 6}
.spiel-feature-card:nth-child(3),
.spiel-feature-card:nth-child(4),
.spiel-feature-card:nth-child(5){grid-column:span 4}
.spiel-feature-image{height:205px;filter:saturate(.9) contrast(1.06)}
.spiel-feature-card:nth-child(1) .spiel-feature-image,
.spiel-feature-card:nth-child(2) .spiel-feature-image{height:230px}
.spiel-feature-body{padding:24px 24px 28px}
.spiel-feature-number{
    top:-28px;
    right:20px;
    font-size:40px;
    color:rgba(242,203,103,.62);
}
.spiel-feature-card h3{
    max-width:80%;
    margin-bottom:12px;
    font-size:clamp(22px,2vw,28px);
    line-height:1.08;
}
.spiel-feature-card p{
    max-width:94%;
    font-size:15px;
    line-height:1.7;
}
.spiel-feature-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.025);
}

/* Spielweisen: Bildfläche plus eigenständige Rollen-Karten */
.spiel-playstyle-section{
    padding:96px 0;
    background:linear-gradient(180deg,#050d18,#07111d);
}
.spiel-playstyle-shell{
    display:grid;
    grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);
    gap:28px;
    align-items:stretch;
}
.spiel-playstyle-visual{
    position:relative;
    min-height:470px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    border:1px solid rgba(216,164,63,.4);
    background:
        linear-gradient(180deg,rgba(4,12,22,.08),rgba(4,12,22,.18) 40%,rgba(4,12,22,.94)),
        url("/assets/backgrounds/dashboardBG.webp") center/cover no-repeat;
    box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.spiel-playstyle-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(2,8,15,.08),transparent 55%,rgba(2,8,15,.2));
}
.spiel-playstyle-caption{
    position:relative;
    z-index:1;
    width:100%;
    padding:38px 36px 36px;
}
.spiel-playstyle-caption h2{
    max-width:520px;
    margin:0 0 14px;
    font-size:clamp(35px,4vw,50px);
    line-height:1.05;
}
.spiel-playstyle-caption>p:last-child{
    max-width:620px;
    margin:0;
    color:rgba(238,242,246,.78);
    font-size:16px;
    line-height:1.7;
}
.spiel-playstyle-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.spiel-role-card{
    position:relative;
    min-height:220px;
    padding:30px 28px 26px;
    overflow:hidden;
    border:1px solid rgba(122,159,187,.28);
    border-top:2px solid rgba(216,164,63,.72);
    background:
        linear-gradient(145deg,rgba(15,35,53,.94),rgba(6,17,29,.98));
    box-shadow:0 16px 36px rgba(0,0,0,.2);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.spiel-role-card:hover{
    transform:translateY(-4px);
    border-color:rgba(242,203,103,.58);
    box-shadow:0 22px 44px rgba(0,0,0,.3);
}
.spiel-role-index{
    position:absolute;
    top:18px;
    right:20px;
    color:rgba(242,203,103,.3);
    font-size:38px;
    line-height:1;
}
.spiel-playstyle-list strong{
    position:relative;
    margin:24px 0 13px;
    color:#f2c75f;
    font-size:27px;
    font-weight:600;
    line-height:1.05;
}
.spiel-playstyle-list span:not(.spiel-role-index){
    position:relative;
    max-width:92%;
    color:rgba(232,237,242,.72);
    font-size:15px;
    line-height:1.68;
}

@media(max-width:1080px){
    .spiel-feature-card:nth-child(1),.spiel-feature-card:nth-child(2){grid-column:span 6}
    .spiel-feature-card:nth-child(3),.spiel-feature-card:nth-child(4){grid-column:span 6}
    .spiel-feature-card:nth-child(5){grid-column:4/span 6}
    .spiel-playstyle-shell{grid-template-columns:1fr}
    .spiel-playstyle-visual{min-height:410px}
}
@media(max-width:760px){
    .spiel-feature-card:nth-child(n){grid-column:1/-1}
    .spiel-feature-card,.spiel-feature-card:nth-child(n){min-height:auto}
    .spiel-feature-image,.spiel-feature-card:nth-child(n) .spiel-feature-image{height:210px}
    .spiel-playstyle-list{grid-template-columns:1fr}
    .spiel-role-card{min-height:180px}
}
@media(max-width:560px){
    .spiel-playstyle-section{padding:58px 0}
    .spiel-playstyle-visual{min-height:360px}
    .spiel-playstyle-caption{padding:28px 24px 26px}
    .spiel-playstyle-caption h2{font-size:34px}
    .spiel-role-card{padding:26px 22px 24px}
    .spiel-playstyle-list strong{font-size:24px}
}

/* ==========================================================
   DAS SPIEL – filigrane Messing-Eckrahmen
   Nur innerhalb von .spiel-page wirksam.
========================================================== */
.spiel-feature-card,
.spiel-role-card,
.spiel-playstyle-visual,
.spiel-story-grid{
    --spiel-frame-color:rgba(222,174,72,.76);
    --spiel-frame-soft:rgba(222,174,72,.34);
    position:relative;
}

/* Feine Grundlinie statt schwerer Standardbox */
.spiel-feature-card,
.spiel-role-card{
    border:1px solid var(--spiel-frame-soft);
}

/* Kurze dekorative Ecklinien wie beim großen News-Rahmen */
.spiel-feature-card::after,
.spiel-role-card::after,
.spiel-playstyle-visual::after,
.spiel-story-grid::after{
    content:"";
    position:absolute;
    inset:9px;
    z-index:4;
    pointer-events:none;
    background:
        linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) left top/34px 1px no-repeat,
        linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) left top/1px 34px no-repeat,
        linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) right top/34px 1px no-repeat,
        linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) right top/1px 34px no-repeat,
        linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) left bottom/34px 1px no-repeat,
        linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) left bottom/1px 34px no-repeat,
        linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) right bottom/34px 1px no-repeat,
        linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) right bottom/1px 34px no-repeat;
    opacity:.82;
}

/* Bildkarten erhalten etwas Luft zwischen Außenkante und Eckornament */
.spiel-feature-card{
    box-shadow:0 18px 42px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.018);
}
.spiel-feature-card:hover{
    border-color:rgba(232,188,92,.58);
    box-shadow:0 24px 52px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.025);
}
.spiel-feature-card:hover::after,
.spiel-role-card:hover::after{
    opacity:1;
}

/* Rollenboxen: dünner, ruhiger, aber charaktervoll */
.spiel-role-card{
    border-top:1px solid var(--spiel-frame-soft);
    background:
        linear-gradient(145deg,rgba(14,32,49,.96),rgba(5,16,27,.99));
}
.spiel-role-card::before{
    content:"";
    position:absolute;
    left:0;
    top:28px;
    bottom:28px;
    width:2px;
    background:linear-gradient(180deg,transparent,rgba(222,174,72,.8),transparent);
    opacity:.9;
}

/* Große Bild-/Textflächen bekommen denselben Rahmenstil */
.spiel-playstyle-visual,
.spiel-story-grid{
    border:1px solid rgba(222,174,72,.34);
    box-shadow:0 24px 60px rgba(0,0,0,.3);
}

@media(max-width:560px){
    .spiel-feature-card::after,
    .spiel-role-card::after,
    .spiel-playstyle-visual::after,
    .spiel-story-grid::after{
        inset:7px;
        background:
            linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) left top/24px 1px no-repeat,
            linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) left top/1px 24px no-repeat,
            linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) right top/24px 1px no-repeat,
            linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) right top/1px 24px no-repeat,
            linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) left bottom/24px 1px no-repeat,
            linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) left bottom/1px 24px no-repeat,
            linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) right bottom/24px 1px no-repeat,
            linear-gradient(var(--spiel-frame-color),var(--spiel-frame-color)) right bottom/1px 24px no-repeat;
    }
}

/* ==========================================================
   DAS SPIEL – dezente abgerundete Ecken
   Wirkt ausschließlich innerhalb von .spiel-page.
========================================================== */
.spiel-page{
    --spiel-radius-lg:12px;
    --spiel-radius-md:9px;
    --spiel-radius-sm:6px;
}

/* Große Flächen */
.spiel-feature-card,
.spiel-role-card,
.spiel-playstyle-visual,
.spiel-story-grid,
.spiel-final-cta-content{
    border-radius:var(--spiel-radius-lg);
}

/* Bilder folgen sauber der Kartenform */
.spiel-feature-image{
    border-radius:calc(var(--spiel-radius-lg) - 1px) calc(var(--spiel-radius-lg) - 1px) 0 0;
}
.spiel-story-image{
    border-radius:calc(var(--spiel-radius-lg) - 1px) 0 0 calc(var(--spiel-radius-lg) - 1px);
}

/* Rollen- und Ablaufboxen */
.spiel-journey li{
    border-radius:var(--spiel-radius-md);
    overflow:hidden;
}
.spiel-role-card{
    overflow:hidden;
}

/* Buttons */
.spiel-btn,
.spiel-final-cta a{
    border-radius:var(--spiel-radius-sm);
}

/* Dekorative Innenrahmen an die Rundung anpassen */
.spiel-feature-card::after,
.spiel-role-card::after,
.spiel-playstyle-visual::after,
.spiel-story-grid::after{
    border-radius:calc(var(--spiel-radius-md) - 1px);
}

/* Bild- und Contentflächen sauber beschneiden */
.spiel-feature-card,
.spiel-playstyle-visual,
.spiel-story-grid{
    overflow:hidden;
}

@media(max-width:760px){
    .spiel-page{
        --spiel-radius-lg:10px;
        --spiel-radius-md:8px;
        --spiel-radius-sm:6px;
    }
    .spiel-story-image{
        border-radius:calc(var(--spiel-radius-lg) - 1px) calc(var(--spiel-radius-lg) - 1px) 0 0;
    }
}

/* ==========================================================
   DAS SPIEL – abgerundete innere Messing-Eckornamente
   Ersetzt die zuvor rechtwinkligen L-Ecken durch echte,
   der Außenkontur folgende Rundungen.
========================================================== */
.spiel-feature-card::after,
.spiel-role-card::after,
.spiel-playstyle-visual::after,
.spiel-story-grid::after{
    inset:9px;
    border:1px solid var(--spiel-frame-color);
    border-radius:calc(var(--spiel-radius-lg) - 3px);
    background:none;

    /* Nur die vier Eckbereiche des abgerundeten Rahmens zeigen */
    -webkit-mask:
        linear-gradient(#000 0 0) left top/42px 42px no-repeat,
        linear-gradient(#000 0 0) right top/42px 42px no-repeat,
        linear-gradient(#000 0 0) left bottom/42px 42px no-repeat,
        linear-gradient(#000 0 0) right bottom/42px 42px no-repeat;
    mask:
        linear-gradient(#000 0 0) left top/42px 42px no-repeat,
        linear-gradient(#000 0 0) right top/42px 42px no-repeat,
        linear-gradient(#000 0 0) left bottom/42px 42px no-repeat,
        linear-gradient(#000 0 0) right bottom/42px 42px no-repeat;
}

/* Außenkontur etwas weicher und näher am News-Rahmen */
.spiel-feature-card,
.spiel-role-card,
.spiel-playstyle-visual,
.spiel-story-grid{
    border-radius:14px;
}

.spiel-feature-image{
    border-radius:13px 13px 0 0;
}

.spiel-story-image{
    border-radius:13px 0 0 13px;
}

@media(max-width:760px){
    .spiel-feature-card::after,
    .spiel-role-card::after,
    .spiel-playstyle-visual::after,
    .spiel-story-grid::after{
        inset:7px;
        border-radius:8px;
        -webkit-mask:
            linear-gradient(#000 0 0) left top/32px 32px no-repeat,
            linear-gradient(#000 0 0) right top/32px 32px no-repeat,
            linear-gradient(#000 0 0) left bottom/32px 32px no-repeat,
            linear-gradient(#000 0 0) right bottom/32px 32px no-repeat;
        mask:
            linear-gradient(#000 0 0) left top/32px 32px no-repeat,
            linear-gradient(#000 0 0) right top/32px 32px no-repeat,
            linear-gradient(#000 0 0) left bottom/32px 32px no-repeat,
            linear-gradient(#000 0 0) right bottom/32px 32px no-repeat;
    }
    .spiel-feature-card,
    .spiel-role-card,
    .spiel-playstyle-visual,
    .spiel-story-grid{
        border-radius:11px;
    }
    .spiel-feature-image,
    .spiel-story-image{
        border-radius:10px 10px 0 0;
    }
}

/* ==========================================================
   DAS SPIEL – eigene Bilder für Geschichte und Strategie
   Nur innerhalb der Spielseite wirksam.
========================================================== */
.spiel-story-image{
    background:
        linear-gradient(90deg,rgba(4,12,22,.04) 0%,rgba(4,12,22,.12) 58%,rgba(8,20,33,.96) 100%),
        url("/assets/images/spiel/deine-geschichte-bg.webp") center center/cover no-repeat;
}

.spiel-playstyle-visual{
    background:
        linear-gradient(180deg,rgba(4,12,22,.04) 0%,rgba(4,12,22,.16) 42%,rgba(4,12,22,.95) 100%),
        url("/assets/images/spiel/deine-strategie-bg.webp") center center/cover no-repeat;
}

@media(max-width:820px){
    .spiel-story-image{
        background:
            linear-gradient(180deg,rgba(4,12,22,.04) 0%,rgba(4,12,22,.12) 52%,rgba(8,20,33,.98) 100%),
            url("/assets/images/spiel/deine-geschichte-bg.webp") center center/cover no-repeat;
    }
}

@media(max-width:560px){
    .spiel-story-image{
        background-position:58% center;
    }
    .spiel-playstyle-visual{
        background-position:46% center;
    }
}


/* ==========================================================
   DAS SPIEL – weicher Übergang zum Abschlussblock
   Verbindet den Strategiebereich eleganter mit dem großen CTA.
========================================================== */
.spiel-playstyle-section{
    position:relative;
    padding-bottom:44px;
}

.spiel-final-cta{
    position:relative;
    margin-top:-22px;
    padding-top:108px;
    overflow:hidden;
    border-top:1px solid rgba(222,174,72,.12);
}

.spiel-final-cta::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:150px;
    pointer-events:none;
    background:linear-gradient(
        180deg,
        rgba(5,13,24,1) 0%,
        rgba(5,13,24,.96) 14%,
        rgba(5,13,24,.84) 32%,
        rgba(5,13,24,.58) 58%,
        rgba(5,13,24,.22) 82%,
        rgba(5,13,24,0) 100%
    );
    z-index:0;
}

.spiel-final-cta::after{
    content:"";
    position:absolute;
    top:28px;
    left:50%;
    width:min(460px, calc(100% - 100px));
    height:18px;
    transform:translateX(-50%);
    pointer-events:none;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(222,174,72,0) 7%,
            rgba(222,174,72,.42) 22%,
            rgba(222,174,72,.82) 50%,
            rgba(222,174,72,.42) 78%,
            rgba(222,174,72,0) 93%,
            transparent 100%) center 50%/100% 1px no-repeat,
        radial-gradient(circle at center,
            rgba(242,203,103,.95) 0 2px,
            transparent 3px);
    opacity:.9;
    z-index:1;
}

.spiel-final-cta-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(4,12,22,.84) 0%,
            rgba(4,12,22,.62) 24%,
            rgba(4,12,22,.74) 58%,
            rgba(4,12,22,.92) 100%
        ),
        radial-gradient(circle at center,rgba(216,164,63,.10),transparent 48%);
    z-index:0;
}

.spiel-final-cta-content{
    position:relative;
    z-index:2;
}

@media(max-width:760px){
    .spiel-playstyle-section{
        padding-bottom:36px;
    }
    .spiel-final-cta{
        margin-top:-16px;
        padding-top:92px;
    }
    .spiel-final-cta::before{
        height:122px;
    }
    .spiel-final-cta::after{
        top:22px;
        width:min(340px, calc(100% - 64px));
    }
}

@media(max-width:560px){
    .spiel-playstyle-section{
        padding-bottom:30px;
    }
    .spiel-final-cta{
        margin-top:-12px;
        padding-top:82px;
    }
    .spiel-final-cta::before{
        height:106px;
    }
    .spiel-final-cta::after{
        top:18px;
        width:min(260px, calc(100% - 44px));
    }
}


/* ==========================================================
   DAS SPIEL – weiche Übergänge für "So beginnt deine Reise"
   Entfernt harte Balken ober- und unterhalb des Journey-Abschnitts.
========================================================== */
.spiel-journey-section{
    position:relative;
    background:linear-gradient(180deg,#05101c 0%, #061221 20%, #071426 50%, #061221 80%, #05101c 100%);
    overflow:hidden;
}

.spiel-journey-section::before,
.spiel-journey-section::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:96px;
    pointer-events:none;
    z-index:0;
}

.spiel-journey-section::before{
    top:0;
    background:linear-gradient(180deg, rgba(5,13,24,1) 0%, rgba(5,13,24,.82) 32%, rgba(5,13,24,.38) 68%, rgba(5,13,24,0) 100%);
}

.spiel-journey-section::after{
    bottom:0;
    background:linear-gradient(0deg, rgba(5,13,24,1) 0%, rgba(5,13,24,.82) 32%, rgba(5,13,24,.38) 68%, rgba(5,13,24,0) 100%);
}

.spiel-journey-section > .spiel-wrap{
    position:relative;
    z-index:1;
}

/* Trennkanten zwischen den Nachbarsektionen entschärfen */
.spiel-story-section{
    padding-bottom:34px;
}

.spiel-playstyle-section{
    padding-top:34px;
}

@media(max-width:760px){
    .spiel-journey-section::before,
    .spiel-journey-section::after{
        height:72px;
    }
    .spiel-story-section{
        padding-bottom:26px;
    }
    .spiel-playstyle-section{
        padding-top:26px;
    }
}

@media(max-width:560px){
    .spiel-journey-section::before,
    .spiel-journey-section::after{
        height:56px;
    }
    .spiel-story-section{
        padding-bottom:20px;
    }
    .spiel-playstyle-section{
        padding-top:20px;
    }
}


/* ==========================================================
   DAS SPIEL – dekorative Goldlinie über dem Abschlussblock entfernen
========================================================== */
.spiel-final-cta::after{
    display:none !important;
    content:none !important;
    background:none !important;
}


/* ==========================================================
   DAS SPIEL – CTA Bildkante / obere Naht sauber maskieren
   Korrigiert die sichtbare Pixel-Linie am oberen Rand des CTA-Hintergrundbildes.
========================================================== */
.spiel-final-cta{
    background-position:center top;
    overflow:hidden;
}

/* Die weiche Verdunkelung minimal über den oberen Bildrand ziehen */
.spiel-final-cta::before{
    top:-3px !important;
    height:168px !important;
}

/* Das eigentliche Overlay ebenfalls leicht überziehen, damit keine Bildkante sichtbar bleibt */
.spiel-final-cta-overlay{
    position:absolute;
    inset:-3px 0 0 0;
}

/* Unsichtbare Nahtmaske für die obersten Pixel des Bildes */
.spiel-final-cta-content::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-52px;
    height:18px;
    pointer-events:none;
    background:linear-gradient(180deg,
        rgba(5,13,24,1) 0%,
        rgba(5,13,24,.96) 45%,
        rgba(5,13,24,.75) 72%,
        rgba(5,13,24,0) 100%);
    z-index:2;
}

@media(max-width:760px){
    .spiel-final-cta::before{
        top:-2px !important;
        height:138px !important;
    }
    .spiel-final-cta-overlay{
        inset:-2px 0 0 0;
    }
    .spiel-final-cta-content::before{
        top:-42px;
        height:15px;
    }
}

@media(max-width:560px){
    .spiel-final-cta::before{
        height:120px !important;
    }
    .spiel-final-cta-content::before{
        top:-36px;
        height:13px;
    }
}


/* ==========================================================
   DAS SPIEL – CTA Nahtfix ohne sichtbaren Dunkelbalken
   Entfernt die zusätzliche Maskierungsleiste wieder.
========================================================== */
.spiel-final-cta-content::before{
    display:none !important;
    content:none !important;
    background:none !important;
}

.spiel-final-cta::before{
    top:0 !important;
    height:132px !important;
    background:linear-gradient(
        180deg,
        rgba(5,13,24,.98) 0%,
        rgba(5,13,24,.88) 22%,
        rgba(5,13,24,.56) 58%,
        rgba(5,13,24,.18) 82%,
        rgba(5,13,24,0) 100%
    ) !important;
}

.spiel-final-cta-overlay{
    inset:0 !important;
}

@media(max-width:760px){
    .spiel-final-cta::before{
        height:112px !important;
    }
}

@media(max-width:560px){
    .spiel-final-cta::before{
        height:96px !important;
    }
}


/* ==========================================================
   DAS SPIEL – finale typografische Harmonisierung
   Ausschließlich innerhalb von .spiel-page wirksam.
========================================================== */
.spiel-page{
    --spiel-text-xs:12px;
    --spiel-text-sm:14px;
    --spiel-text-base:16px;
    --spiel-text-lead:18px;
    font-family:var(--spiel-sans,"Segoe UI",Arial,Helvetica,sans-serif);
    font-size:var(--spiel-text-base);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.spiel-page h1,
.spiel-page h2,
.spiel-page h3{
    font-family:var(--spiel-serif,"Palatino Linotype",Palatino,Georgia,"Times New Roman",serif);
    font-weight:500;
    letter-spacing:-.022em;
    text-wrap:balance;
}

.spiel-page p{
    font-size:var(--spiel-text-base);
    line-height:1.68;
    letter-spacing:0;
}

.spiel-kicker{
    margin-bottom:13px;
    font-size:11px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:2.65px;
}

/* Hauptbühne */
.spiel-hero h1{
    max-width:930px;
    margin-bottom:23px;
    font-size:clamp(44px,5.25vw,66px);
    line-height:1.04;
    letter-spacing:-.03em;
}
.spiel-hero-text{
    max-width:790px;
    font-size:18px;
    line-height:1.68;
}
.spiel-btn{
    font-size:12px;
    line-height:1;
    letter-spacing:1.35px;
}

/* Abschnittsüberschriften */
.spiel-section-head{
    max-width:880px;
}
.spiel-section-head h2,
.spiel-page .spiel-section-head h2{
    font-size:clamp(36px,3.65vw,48px);
    line-height:1.09;
}
.spiel-section-head>p:last-child{
    max-width:770px;
    font-size:16px;
    line-height:1.68;
}

/* Systemkarten */
.spiel-feature-number{
    font-size:36px;
    line-height:1;
}
.spiel-feature-card h3{
    max-width:84%;
    margin-bottom:11px;
    font-size:clamp(23px,1.7vw,27px);
    line-height:1.12;
    letter-spacing:-.018em;
}
.spiel-feature-card p{
    max-width:96%;
    font-size:15px;
    line-height:1.62;
}

/* Geschichte */
.spiel-story-copy h2{
    font-size:clamp(34px,3.3vw,45px);
    line-height:1.1;
}
.spiel-story-copy>p:not(.spiel-kicker){
    font-size:16px;
    line-height:1.7;
}
.spiel-story-copy blockquote{
    font-size:19px;
    line-height:1.48;
    letter-spacing:-.01em;
}

/* Reise */
.spiel-journey h3{
    margin-bottom:10px;
    font-size:21px;
    line-height:1.18;
    letter-spacing:-.012em;
}
.spiel-journey p{
    max-width:270px;
    margin-left:auto;
    margin-right:auto;
    font-size:14px;
    line-height:1.58;
}
.spiel-step-number{
    font-size:22px;
    line-height:1;
}
.spiel-step-icon{
    font-size:31px;
}

/* Spielweisen */
.spiel-playstyle-caption h2{
    max-width:500px;
    margin-bottom:15px;
    font-size:clamp(37px,3.6vw,48px);
    line-height:1.06;
}
.spiel-playstyle-caption>p:last-child{
    max-width:590px;
    font-size:16px;
    line-height:1.66;
}
.spiel-role-index{
    font-size:34px;
}
.spiel-playstyle-list strong{
    margin-top:23px;
    margin-bottom:12px;
    font-size:25px;
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.014em;
}
.spiel-playstyle-list span:not(.spiel-role-index){
    max-width:94%;
    font-size:15px;
    line-height:1.62;
    letter-spacing:0;
}

/* Abschluss */
.spiel-final-cta h2{
    max-width:820px;
    margin-bottom:15px;
    font-size:clamp(38px,4.3vw,52px);
    line-height:1.08;
}
.spiel-final-cta p:not(.spiel-kicker){
    max-width:690px;
    margin-bottom:26px;
    font-size:17px;
    line-height:1.65;
}

@media(max-width:900px){
    .spiel-hero h1{font-size:clamp(42px,7vw,58px)}
    .spiel-section-head h2,.spiel-page .spiel-section-head h2{font-size:clamp(34px,5vw,44px)}
    .spiel-story-copy h2{font-size:clamp(33px,5vw,42px)}
    .spiel-playstyle-caption h2{font-size:clamp(35px,5vw,44px)}
    .spiel-final-cta h2{font-size:clamp(36px,5.5vw,48px)}
}

@media(max-width:560px){
    .spiel-page{--spiel-text-base:15px;--spiel-text-lead:16px}
    .spiel-kicker{font-size:10px;letter-spacing:2.25px}
    .spiel-hero h1{font-size:38px;line-height:1.08;letter-spacing:-.024em}
    .spiel-hero-text{font-size:16px;line-height:1.62}
    .spiel-section-head h2,.spiel-page .spiel-section-head h2{font-size:33px;line-height:1.11}
    .spiel-section-head>p:last-child{font-size:15px;line-height:1.64}
    .spiel-feature-number{font-size:32px}
    .spiel-feature-card h3{font-size:24px}
    .spiel-feature-card p{font-size:15px;line-height:1.6}
    .spiel-story-copy h2{font-size:32px;line-height:1.12}
    .spiel-story-copy>p:not(.spiel-kicker){font-size:15px;line-height:1.65}
    .spiel-story-copy blockquote{font-size:18px}
    .spiel-journey h3{font-size:20px}
    .spiel-journey p{font-size:14px}
    .spiel-playstyle-caption h2{font-size:33px;line-height:1.1}
    .spiel-playstyle-caption>p:last-child{font-size:15px;line-height:1.62}
    .spiel-playstyle-list strong{font-size:23px}
    .spiel-playstyle-list span:not(.spiel-role-index){font-size:15px;line-height:1.6}
    .spiel-final-cta h2{font-size:35px;line-height:1.1}
    .spiel-final-cta p:not(.spiel-kicker){font-size:16px;line-height:1.62}
}


/* ==========================================================
   DAS SPIEL – echte Bild-Icons für die vier Reiseschritte
   Aktuell verwenden alle Schritte platzhalter.png. Die Dateinamen
   können später direkt im Template einzeln ersetzt werden.
========================================================== */
.spiel-step-icon img{
    display:block;
    width:48px;
    height:48px;
    max-width:58%;
    max-height:58%;
    object-fit:contain;
    object-position:center;
    user-select:none;
    pointer-events:none;
}

@media(max-width:560px){
    .spiel-step-icon img{
        width:42px;
        height:42px;
    }
}


/* ==========================================================
   DAS SPIEL – Journey-Verbindungslinie sauber nach oben setzen
   Linie läuft nicht mehr durch die Kreise, sondern zwischen
   Überschrift und den vier Schritten.
========================================================== */
.spiel-section-head-compact{
    margin-bottom:58px;
}

.spiel-journey{
    padding-top:10px;
}

.spiel-journey::before{
    top:-18px !important;
    left:18% !important;
    right:18% !important;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(216,164,63,.10) 8%,
        rgba(216,164,63,.42) 24%,
        rgba(216,164,63,.52) 50%,
        rgba(216,164,63,.42) 76%,
        rgba(216,164,63,.10) 92%,
        transparent 100%
    ) !important;
}

@media(max-width:1080px){
    .spiel-section-head-compact{
        margin-bottom:54px;
    }
    .spiel-journey{
        padding-top:8px;
    }
    .spiel-journey::before{
        top:-14px !important;
        left:15% !important;
        right:15% !important;
    }
}

@media(max-width:820px){
    .spiel-section-head-compact{
        margin-bottom:40px;
    }
}


/* ==========================================================
   DAS SPIEL – Journey-Linie exakt mittiger zwischen Headline und Kreisen
========================================================== */
.spiel-section-head-compact{
    margin-bottom:64px !important;
}

.spiel-journey{
    padding-top:12px !important;
}

.spiel-journey::before{
    top:-30px !important;
    left:18% !important;
    right:18% !important;
}

@media(max-width:1080px){
    .spiel-section-head-compact{
        margin-bottom:58px !important;
    }
    .spiel-journey::before{
        top:-24px !important;
    }
}

@media(max-width:820px){
    .spiel-section-head-compact{
        margin-bottom:40px !important;
    }
}


/* ==========================================================
   DAS SPIEL – mehr Luft für Übergänge und Journey-Headline
   Nimmt die gequetschte Wirkung aus den beiden Bereichen.
========================================================== */

/* Mehr Abstand zwischen "Spiele auf deine Weise" und CTA-Bild */
.spiel-playstyle-section{
    padding-bottom:72px !important;
}

.spiel-final-cta{
    margin-top:0 !important;
    padding-top:126px !important;
}

/* Journey-Bereich: oben luftiger, Titelblock ruhiger */
.spiel-journey-section{
    padding-top:84px !important;
    padding-bottom:72px !important;
}

.spiel-section-head-compact{
    margin-bottom:76px !important;
}

.spiel-section-head-compact .spiel-kicker{
    margin-bottom:16px !important;
}

.spiel-section-head-compact h2{
    margin:0 auto !important;
}

.spiel-journey{
    padding-top:18px !important;
}

.spiel-journey::before{
    top:-36px !important;
}

@media(max-width:1080px){
    .spiel-playstyle-section{
        padding-bottom:64px !important;
    }
    .spiel-final-cta{
        padding-top:112px !important;
    }
    .spiel-journey-section{
        padding-top:74px !important;
        padding-bottom:64px !important;
    }
    .spiel-section-head-compact{
        margin-bottom:66px !important;
    }
    .spiel-journey::before{
        top:-30px !important;
    }
}

@media(max-width:820px){
    .spiel-playstyle-section{
        padding-bottom:54px !important;
    }
    .spiel-final-cta{
        padding-top:100px !important;
    }
    .spiel-journey-section{
        padding-top:64px !important;
        padding-bottom:56px !important;
    }
    .spiel-section-head-compact{
        margin-bottom:52px !important;
    }
    .spiel-journey{
        padding-top:10px !important;
    }
}

@media(max-width:560px){
    .spiel-playstyle-section{
        padding-bottom:44px !important;
    }
    .spiel-final-cta{
        padding-top:86px !important;
    }
    .spiel-journey-section{
        padding-top:54px !important;
        padding-bottom:44px !important;
    }
    .spiel-section-head-compact{
        margin-bottom:40px !important;
    }
    .spiel-section-head-compact .spiel-kicker{
        margin-bottom:12px !important;
    }
    .spiel-journey::before{
        top:-22px !important;
    }
}


/* ==========================================================
   DAS SPIEL – CTA-Inhalt etwas tiefer und optisch mittiger setzen
========================================================== */
.spiel-final-cta{
    align-items:center !important;
    padding-top:104px !important;
    padding-bottom:86px !important;
}

.spiel-final-cta-content{
    transform:translateY(26px);
}

@media(max-width:1080px){
    .spiel-final-cta{
        padding-top:96px !important;
        padding-bottom:78px !important;
    }
    .spiel-final-cta-content{
        transform:translateY(22px);
    }
}

@media(max-width:820px){
    .spiel-final-cta{
        padding-top:88px !important;
        padding-bottom:70px !important;
    }
    .spiel-final-cta-content{
        transform:translateY(18px);
    }
}

@media(max-width:560px){
    .spiel-final-cta{
        padding-top:74px !important;
        padding-bottom:58px !important;
    }
    .spiel-final-cta-content{
        transform:translateY(12px);
    }
}


/* ==========================================================
   DAS SPIEL – Hero/Intro-Abstand leicht reduzieren
   Zieht den ersten Inhaltsblock etwas näher unter den Hero.
========================================================== */
.spiel-hero{
    min-height:604px !important;
    padding-bottom:68px !important;
}

.spiel-hero::after{
    height:142px !important;
}

.spiel-intro{
    padding-top:58px !important;
}

.spiel-intro .spiel-section-head{
    margin-bottom:34px !important;
}

@media(max-width:1080px){
    .spiel-hero{
        min-height:582px !important;
        padding-bottom:62px !important;
    }
    .spiel-hero::after{
        height:128px !important;
    }
    .spiel-intro{
        padding-top:52px !important;
    }
}

@media(max-width:820px){
    .spiel-hero{
        min-height:548px !important;
        padding-bottom:54px !important;
    }
    .spiel-hero::after{
        height:112px !important;
    }
    .spiel-intro{
        padding-top:46px !important;
    }
}

@media(max-width:560px){
    .spiel-hero{
        min-height:492px !important;
        padding-bottom:42px !important;
    }
    .spiel-hero::after{
        height:92px !important;
    }
    .spiel-intro{
        padding-top:38px !important;
    }
    .spiel-intro .spiel-section-head{
        margin-bottom:28px !important;
    }
}


/* GFT FAQ layout repair – 2026-07-12 */
.faq-page{padding:46px 20px 78px;background:radial-gradient(circle at 50% 0,rgba(197,145,49,.10),transparent 34%),linear-gradient(180deg,rgba(4,10,18,.42) 0%,rgba(4,10,18,.64) 52%,rgba(4,10,18,.84) 100%),url("/assets/backgrounds/dashboardBG.webp");background-position:center center;background-size:cover;background-repeat:no-repeat}
.faq-frame{position:relative;width:min(1320px,100%);margin:0 auto;padding:42px clamp(20px,4vw,58px) 58px;background:linear-gradient(180deg,#18293a 0%,#101d2b 100%);border:1px solid rgba(205,160,63,.34);box-shadow:0 24px 65px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.03)}
.faq-head{max-width:910px;margin:0 auto 30px;text-align:center}.faq-head .headline-with-icons{display:flex;align-items:center;justify-content:center;gap:18px}.faq-head .headline-icon{width:30px;height:30px;object-fit:contain;opacity:.86}.faq-head h1{margin:0;color:#f1eadc;font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5vw,62px);font-weight:400;letter-spacing:.02em}.faq-head .box-subline{display:grid;grid-template-columns:minmax(30px,1fr) auto minmax(30px,1fr);align-items:center;gap:16px;margin:20px auto 18px}.faq-head .box-subline span{height:1px;background:linear-gradient(90deg,transparent,rgba(205,160,63,.65),transparent)}.faq-head .box-subline strong{color:#d8b35f;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.faq-head>p{max-width:780px;margin:0 auto;color:rgba(231,237,242,.76);font-size:17px;line-height:1.75}
.faq-status-note{max-width:960px;margin:0 auto 34px;padding:20px 24px;background:rgba(194,145,48,.07);border:1px solid rgba(205,160,63,.28);border-left:3px solid #cda03f}.faq-status-note strong{display:block;margin-bottom:7px;color:#e6c372;font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:500}.faq-status-note p{margin:0;color:rgba(230,236,241,.72);line-height:1.65}
.faq-mobile-menu{display:none;margin:0 0 24px;border:1px solid rgba(205,160,63,.28);background:rgba(6,17,29,.88)}.faq-mobile-menu summary{padding:16px 18px;color:#e7c875;font-weight:700;cursor:pointer}.faq-mobile-menu nav{display:grid;padding:0 18px 16px}.faq-mobile-menu a{padding:10px 0;color:rgba(235,239,243,.78);border-top:1px solid rgba(255,255,255,.06)}
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:44px;align-items:start}.faq-content{min-width:0}.faq-section{scroll-margin-top:110px;margin:0 0 42px}.faq-section-head{margin:0 0 17px;padding:0 0 18px;border-bottom:1px solid rgba(205,160,63,.2)}.faq-section-kicker{margin:0 0 7px!important;color:#cda03f!important;font-size:11px!important;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.faq-section-head h2,.faq-contact-box h2{margin:0 0 10px;color:#f0eadf;font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,3vw,38px);font-weight:400;line-height:1.2}.faq-section-head>p:last-child{max-width:850px;margin:0;color:rgba(225,232,238,.7);font-size:16px;line-height:1.65}
.faq-list{max-width:none}.faq-item{overflow:hidden;margin:0 0 10px;background:linear-gradient(180deg,rgba(13,29,45,.92),rgba(8,20,33,.92));border:1px solid rgba(205,160,63,.2);border-radius:2px;transition:border-color .2s ease,background .2s ease}.faq-item:hover,.faq-item[open]{border-color:rgba(220,178,79,.45);background:linear-gradient(180deg,rgba(17,36,55,.96),rgba(9,22,36,.96))}.faq-item summary{position:relative;display:flex;align-items:center;min-height:62px;padding:17px 58px 17px 20px;color:#edf0f2;font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.4;cursor:pointer;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#d6ad54;font-family:Arial,sans-serif;font-size:27px;font-weight:300}.faq-item[open] summary::after{content:"–"}.faq-answer{padding:0 20px 20px!important}.faq-answer p{margin:0;padding-top:17px;color:rgba(224,231,237,.76);font-size:16px;line-height:1.75;border-top:1px solid rgba(255,255,255,.07)}
.faq-sidebar{position:relative}.faq-sidebar-inner{position:sticky;top:105px;padding:20px;background:rgba(5,15,26,.9);border:1px solid rgba(205,160,63,.27);box-shadow:0 14px 35px rgba(0,0,0,.2)}.faq-sidebar-title{margin:0 0 12px;color:#e3c26e;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.faq-sidebar nav{display:grid}.faq-sidebar a{position:relative;padding:9px 10px 9px 17px;color:rgba(226,233,238,.7);font-size:13px;line-height:1.35;border-bottom:1px solid rgba(255,255,255,.055);transition:color .18s ease,background .18s ease}.faq-sidebar a::before{content:"";position:absolute;left:5px;top:15px;width:4px;height:4px;border-radius:50%;background:#b98c35}.faq-sidebar a:hover{color:#f0d88f;background:rgba(205,160,63,.07)}
.faq-step-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.faq-step-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:17px;align-items:start;padding:18px 20px;background:rgba(10,24,39,.78);border:1px solid rgba(205,160,63,.18)}.faq-step-number{display:grid;place-items:center;width:44px;height:44px;color:#15100a;background:linear-gradient(180deg,#e2bd63,#bd8730);border-radius:50%;font-weight:800}.faq-step-list h3{margin:1px 0 6px;color:#f0eadf;font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:500}.faq-step-list p{margin:0;color:rgba(224,231,237,.72);line-height:1.65}
.faq-contact-box{scroll-margin-top:110px;margin-top:48px;padding:30px;text-align:center;background:linear-gradient(180deg,rgba(205,160,63,.1),rgba(8,20,33,.9));border:1px solid rgba(205,160,63,.34)}.faq-contact-box p:not(.faq-section-kicker){max-width:650px;margin:0 auto 20px;color:rgba(226,233,238,.74);line-height:1.65}.faq-contact-box a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 23px;color:#181109;background:linear-gradient(180deg,#e5c069,#c99135);border:1px solid #e1bd68;border-radius:3px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:1040px){.faq-layout{grid-template-columns:1fr}.faq-sidebar{display:none}.faq-mobile-menu{display:block}}
@media(max-width:700px){.faq-page{padding:24px 12px 48px}.faq-frame{padding:31px 14px 38px}.faq-head .headline-icon{width:22px;height:22px}.faq-head .box-subline{grid-template-columns:1fr}.faq-head .box-subline span{display:none}.faq-head>p{font-size:15px}.faq-status-note{padding:17px}.faq-item summary{min-height:56px;padding:15px 48px 15px 15px;font-size:17px}.faq-item summary::after{right:15px}.faq-answer{padding:0 15px 17px!important}.faq-step-list li{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:15px}.faq-step-number{width:38px;height:38px}.faq-contact-box{padding:24px 16px}}



/* =========================================================
   SPIELSEITE – HERO MOBILE KORREKTUR
========================================================= */

@media (max-width: 620px) {

    .spiel-page,
    .spiel-page main,
    .spiel-page section,
    .spiel-page .spiel-hero,
    .spiel-page .spiel-hero-inner,
    .spiel-page .spiel-hero-content,
    .spiel-page .hero-content,
    .spiel-page .hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .spiel-page .spiel-hero,
    .spiel-page .spiel-hero-inner,
    .spiel-page .spiel-hero-content,
    .spiel-page .hero-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .spiel-page h1,
    .spiel-page .spiel-hero h1,
    .spiel-page .hero-title {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;

        font-size: clamp(1.8rem, 11vw, 3.8rem) !important;
        line-height: 1.03 !important;
        letter-spacing: -0.02em !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
        text-align: center !important;
    }

    .spiel-page .spiel-hero p,
    .spiel-page .hero-text,
    .spiel-page .hero-description,
    .spiel-page .hero-copy p {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 1.0rem !important;
        line-height: 1.65 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        text-align: center !important;
    }

    .spiel-page .hero-actions,
    .spiel-page .spiel-hero-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .spiel-page .hero-actions a,
    .spiel-page .spiel-hero-actions a,
    .spiel-page .hero-actions button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }
}




/* =========================================================
   NEWS-DETAIL – MOBILE KORREKTUR
========================================================= */

@media (max-width: 620px) {

    .news-modal,
    .news-modal-dialog,
    .news-modal-content,
    .news-detail,
    .news-detail-inner,
    .news-detail-content,
    .news-detail-body,
    .news-article,
    .news-article-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .news-modal-dialog,
    .news-modal-content {
        height: auto !important;
        max-height: calc(100dvh - 32px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .news-detail,
    .news-detail-inner,
    .news-detail-content,
    .news-article {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    .news-detail-body,
    .news-article-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .news-detail h1,
    .news-detail h2,
    .news-article h1,
    .news-article h2,
    .news-modal h1,
    .news-modal h2 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: auto !important;
    }

    .news-detail p,
    .news-article p,
    .news-modal p {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        font-size: 1.05rem !important;
        line-height: 1.65 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .news-detail-image,
    .news-article-image,
    .news-modal-image,
    .news-detail img,
    .news-article img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
}
/* ==========================================
   SPIELSEITE – FEINE GOLDENE TRENNSTREIFEN
   Nach den Systemkarten und nach den Rollen
========================================== */
.spiel-intro,
.spiel-playstyle-section{
    position:relative;
}

.spiel-intro::after,
.spiel-playstyle-section::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    z-index:5;
    width:min(470px,42vw);
    height:1px;
    transform:translateX(-50%);
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(216,164,63,0) 0%,
        rgba(216,164,63,.20) 15%,
        rgba(242,203,103,.72) 50%,
        rgba(216,164,63,.20) 85%,
        rgba(216,164,63,0) 100%
    );
    box-shadow:0 0 7px rgba(216,164,63,.16);
}

@media(max-width:720px){
    .spiel-intro::after,
    .spiel-playstyle-section::after{
        width:58vw;
    }
}

/* ==========================================
   FAQ – FINALER DUNKELBLAUER FARBFIX
   Gleicher Override auch hier, da die FAQ-Regeln
   in dieser Datei zusätzlich vorhanden sind.
========================================== */
.faq-page .faq-frame,
body .faq-page .faq-frame,
.page-shell.faq-page .faq-frame {
    background:
        radial-gradient(circle at 50% 0%, rgba(45, 91, 132, .10), transparent 38%),
        linear-gradient(180deg, #0d1d2d 0%, #081624 54%, #06111d 100%) !important;
    background-color: #081624 !important;
}

/* ==========================================
   FAQ – RECHTES MENÜ STICKY (SICHERHEITS-OVERRIDE)
========================================== */
@media (min-width:1041px){
    .page-shell.faq-page .faq-frame{
        overflow:visible !important;
    }

    .page-shell.faq-page .faq-layout{
        align-items:stretch !important;
    }

    .page-shell.faq-page .faq-sidebar{
        position:relative !important;
        top:auto !important;
        align-self:stretch !important;
        height:auto !important;
        min-height:100% !important;
        overflow:visible !important;
        z-index:20;
    }

    .page-shell.faq-page .faq-sidebar-inner{
        position:-webkit-sticky !important;
        position:sticky !important;
        top:24px !important;
        z-index:21;
    }
}

/* =========================================================
   FAQ – DECKENDE HAUPTBOX IM LOGIN-STIL
   Muss am Dateiende stehen, weil die FAQ in dieser Datei
   mehrere ältere Hintergrund-Overrides besitzt.
========================================================= */
.page-shell.faq-page .faq-frame,
body .page-shell.faq-page .faq-frame,
body .faq-page .faq-frame {
    background:
        radial-gradient(circle at 50% 0%, rgba(96, 165, 250, .075), transparent 36%),
        linear-gradient(180deg, #071424 0%, #040d18 100%) !important;
    background-color: #040d18 !important;
}

/* =========================================================
   FAQ – LANGE NAVIGATION AUF KLEINEREN DESKTOP-HOEHEN
========================================================= */
@media (min-width: 1025px) {
    .page-shell.faq-page .faq-sidebar-inner {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding-right: 4px;
    }
}

@media (max-width: 1024px) {
    .page-shell.faq-page .faq-sidebar-inner {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}