:root {
    --bg: #0a0908;
    --bg-soft: #13100d;
    --panel: #19130e;
    --panel-2: #21170f;
    --gold: #d7a43a;
    --gold-light: #f2cf73;
    --bronze: #8b5b22;
    --red: #5e1c17;
    --text: #f2eadc;
    --muted: #b7aa96;
    --line: rgba(215, 164, 58, 0.26);
    --max: 1180px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top, rgba(118, 71, 18, 0.12), transparent 35rem),
        var(--bg);
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.6;
}

a { color: inherit; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(7, 6, 5, 0.95);
    border-bottom: 1px solid var(--line);
}

.nav-wrap {
    max-width: var(--max);
    margin: 0 auto;
    min-height: 76px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

.brand-text {
    margin-right: auto;
    color: var(--gold-light);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 1.15rem;
    text-transform: none;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.brand-text:hover,
.brand-text:focus {
    color: #fff0b0;
}

.main-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.main-nav a {
    text-decoration: none;
    color: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.92rem;
}

.main-nav a:hover,
.main-nav a:focus {
    color: var(--gold-light);
}

.hero {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(7,6,5,.72) 0%, rgba(7,6,5,.48) 42%, rgba(7,6,5,.30) 100%),
        url("assets/hero-background.png") center / cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.30)),
        radial-gradient(circle at 42% 50%, rgba(215,164,58,.10), transparent 30rem);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: var(--max);
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: center;
    gap: 42px;
}

.hero-logo {
    width: 100%;
    max-width: 300px;
    filter: drop-shadow(0 24px 25px rgba(0,0,0,.55));
}

.hero-copy {
    max-width: 680px;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--gold);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.19em;
}

.hero h1,
.section h2,
.feature-card h2 {
    margin: 0;
    line-height: 1.1;
    font-weight: 600;
}

.hero h1 {
    font-size: clamp(2.8rem, 5.2vw, 4.9rem);
    color: var(--gold-light);
    text-shadow: 0 2px 0 #3e240a, 0 10px 30px rgba(0,0,0,.55);
}

.hero-text {
    max-width: 720px;
    font-size: 1.12rem;
    color: #ddd2c0;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.btn {
    display: inline-block;
    padding: 12px 19px;
    border: 1px solid var(--gold);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    background: rgba(18, 13, 9, 0.75);
}

.btn:hover,
.btn:focus {
    background: var(--gold);
    color: #140d05;
}

.btn-primary {
    background: linear-gradient(180deg, #e1b24a, #a96b18);
    color: #160e05;
    border-color: #f0cc6d;
}

.section {
    max-width: var(--max);
    margin: 0 auto;
    padding: 78px 24px;
}

.section-head {
    margin-bottom: 28px;
}

.section-head h2,
.about-section h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    color: var(--gold-light);
}

.media-card {
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) 1fr;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(43,29,17,.95), rgba(20,15,11,.95));
    border: 1px solid var(--line);
    box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

.media-card img,
.video-placeholder {
    width: 100%;
    min-height: 320px;
    object-fit: cover;
}

.video-placeholder {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 40%, rgba(146,40,30,.28), transparent 25rem),
        #100d0b;
    color: #b7a990;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    letter-spacing: .25em;
}

.media-card-copy {
    padding: 42px;
    align-self: center;
}

.media-card-copy h3 {
    margin: 5px 0 12px;
    font-size: 2rem;
}

.meta {
    margin: 0;
    color: var(--gold);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.live-section {
    padding-top: 28px;
    padding-bottom: 58px;
}

.live-section .section-head {
    margin-bottom: 18px;
}

.live-section .section-head h2 {
    font-size: clamp(2rem, 3vw, 2.7rem);
}

.live-label {
    display: inline-block;
    color: #ff6459;
}

.live-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 8px;
    border-radius: 50%;
    background: #e54236;
    box-shadow: 0 0 16px rgba(229,66,54,.75);
}

.section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding-top: 26px;
}

.feature-card {
    border: 1px solid var(--line);
    background: var(--panel);
    overflow: hidden;
    min-width: 0;
}

.feature-image {
    height: 300px;
    background-color: #0d0b09;
    background-size: cover;
    background-position: center;
}

.gaming-image {
    background-image:
        linear-gradient(to top, rgba(8,7,6,.12), rgba(8,7,6,0)),
        url("assets/gaming-background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0d0b09;
}

.crest-image {
    background-image:
        linear-gradient(to top, rgba(8,7,6,.55), rgba(8,7,6,.1)),
        url("assets/wappen.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.setup-image {
    background-image:
        linear-gradient(to top, rgba(8,7,6,.18), rgba(8,7,6,0)),
        url("assets/setup-v10.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0d0b09;
}

.feature-copy {
    padding: 26px;
}

.feature-copy h2 {
    font-size: 1.8rem;
    color: var(--gold-light);
}

.feature-copy p {
    color: var(--muted);
}

.text-link {
    color: var(--gold-light);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.text-link:hover,
.text-link:focus {
    text-decoration: underline;
}

.about-section {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 50px;
    align-items: start;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.about-copy {
    margin: 12px 0 0;
}

.about-copy p {
    margin: 0 0 16px;
    font-size: 1.2rem;
    color: #d4c8b6;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.social-grid a {
    min-height: 112px;
    padding: 20px;
    border: 1px solid var(--line);
    background: rgba(28,20,14,.75);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.social-grid a:hover,
.social-grid a:focus {
    border-color: var(--gold);
    background: rgba(47,31,17,.95);
}

.social-grid strong {
    color: var(--gold-light);
    font-size: 1.1rem;
}

.social-grid span {
    color: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9rem;
}

.site-footer {
    border-top: 1px solid var(--line);
    max-width: var(--max);
    margin: 20px auto 0;
    padding: 34px 24px 48px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    color: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9rem;
}

.site-footer div,
.site-footer nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.site-footer a {
    color: var(--muted);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--gold-light);
}

@media (max-width: 900px) {
    .nav-wrap {
        min-height: auto;
        padding-top: 14px;
        padding-bottom: 14px;
        justify-content: space-between;
    }

    .brand-text {
        margin-right: 0;
    }

    .main-nav {
        gap: 14px 18px;
        justify-content: flex-end;
    }

    .hero { min-height: auto; }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-logo {
        max-width: 260px;
        margin: 0 auto;
    }

    .cta-row {
        justify-content: center;
    }

    .media-card {
        grid-template-columns: 1fr;
    }

    .section-grid {
        grid-template-columns: 1fr;
    }

    .about-section {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: auto;
    }

    .hero-content {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .hero h1 {
        font-size: 2.55rem;
    }

    .media-card-copy {
        padding: 28px;
    }

    .social-grid {
        grid-template-columns: 1fr;
    }

    .site-footer {
        flex-direction: column;
    }
}

#gaming,
#penpaper,
#setup,
#about {
    scroll-margin-top: 105px;
}

.feature-card:target,
.about-section:target {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    box-shadow: 0 0 0 1px rgba(242, 207, 115, 0.18), 0 18px 55px rgba(0,0,0,.38);
}

.archive-block {
    margin-top: 46px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.archive-heading {
    max-width: 720px;
    margin-bottom: 22px;
}

.archive-heading h3 {
    margin: 0 0 8px;
    color: var(--gold-light);
    font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.archive-heading > p:last-child {
    margin: 0;
    color: var(--muted);
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.archive-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(25, 19, 14, .82);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.archive-card:hover,
.archive-card:focus {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.archive-thumb {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 45%, rgba(130, 44, 32, .22), transparent 60%),
        #0f0d0b;
    color: #9f927f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .78rem;
    letter-spacing: .18em;
}

.archive-card > strong,
.archive-card > .archive-meta {
    display: block;
    margin-left: 16px;
    margin-right: 16px;
}

.archive-card > strong {
    margin-top: 14px;
    color: var(--text);
    line-height: 1.35;
}

.archive-meta {
    margin-top: 7px;
    margin-bottom: 16px;
    color: var(--gold);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

@media (max-width: 900px) {
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .archive-grid {
        grid-template-columns: 1fr;
    }
}

.gaming-page .gaming-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(196, 154, 80, .22);
    background:
        linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.72) 48%, rgba(8,8,10,.50) 100%),
        linear-gradient(0deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.05) 65%),
        url("assets/gaming-background.jpg") center/cover no-repeat;
}
.gaming-page .gaming-hero-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 38px 0;
}
.gaming-page .gaming-hero h1 {
    max-width: 1100px;
    margin: 7px 0 15px;
    font-size: clamp(2.35rem, 4.1vw, 3.65rem);
    line-height: 1.07;
    text-wrap: balance;
}
.gaming-page .gaming-hero p {
    max-width: 1100px;
    margin: 0;
    color: #ded4c5;
    font-size: clamp(.98rem, 1.35vw, 1.12rem);
    line-height: 1.5;
}
.gaming-page .sg-hero-description-end { display: block; }
.gaming-page .gaming-hero + .page-section { padding-top: 38px; }
@media (max-width: 950px) {
    .gaming-page .gaming-hero { min-height: 0; }
}
@media (max-width: 620px) {
    .gaming-page .gaming-hero { min-height: 0; }
    .gaming-page .gaming-hero-inner { padding: 54px 0 35px; }
    .gaming-page .gaming-hero h1 { font-size: clamp(2rem, 8vw, 2.65rem); }
    .gaming-page .sg-hero-description-end { display: inline; }
    .gaming-page .gaming-hero + .page-section { padding-top: 32px; }
}

.gaming-page .page-section {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 68px 0;
}

.gaming-page .twitch-live-section {
    padding-top: 30px;
}
.gaming-page .section-heading {
    margin-bottom: 26px;
}
.gaming-page .section-heading h2 {
    margin: 4px 0 8px;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.gaming-page .section-heading p {
    max-width: 760px;
    margin: 0;
    color: #bfb6a8;
    line-height: 1.65;
}
.live-demo {
    border: 1px solid rgba(170, 42, 42, .55);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(90,14,18,.26), rgba(20,20,23,.96) 52%);
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.live-demo-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
}
.live-demo-image {
    min-height: 315px;
    background:
        linear-gradient(0deg, rgba(8,8,10,.50), rgba(8,8,10,.08)),
        url("assets/gaming-background.jpg") center/cover no-repeat;
}
.live-demo-copy {
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.live-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #ffb7b7;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
}
.live-status::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e74343;
    box-shadow: 0 0 14px rgba(231,67,67,.85);
}
.live-demo-copy h2 {
    margin: 0 0 10px;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
}
.live-meta {
    margin: 0 0 22px;
    color: #c4b9a9;
}
.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.game-card {
    min-height: 245px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    border: 1px solid rgba(196,154,80,.20);
    border-radius: 16px;
    background:
        linear-gradient(0deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.48) 62%, rgba(8,8,10,.20) 100%),
        url("assets/gaming-background.jpg") center/cover no-repeat;
}
.game-card h3 {
    margin: 5px 0 7px;
    font-size: 1.35rem;
}
.game-card p {
    margin: 0 0 15px;
    color: #c8beaf;
    line-height: 1.5;
}
.game-card .text-link {
    margin-top: auto;
    padding-top: 12px;
}
.series-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.series-card {
    min-height: 270px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    border: 1px solid rgba(196,154,80,.20);
    border-radius: 16px;
    background: linear-gradient(135deg, #201d1b, #101014);
}
.series-card h3 {
    margin: 5px 0 8px;
    font-size: 1.55rem;
}
.series-card p {
    margin: 0 0 18px;
    color: #c8beaf;
    line-height: 1.55;
}
.crosslink {
    margin-bottom: 70px;
    padding: 34px;
    border: 1px solid rgba(196,154,80,.24);
    border-radius: 16px;
    background: rgba(196,154,80,.055);
}
.crosslink h2 { margin: 4px 0 8px; }
.crosslink p { margin: 0 0 16px; color: #c8beaf; }

@media (max-width: 850px) {
    .live-demo-grid { grid-template-columns: 1fr; }
    .live-demo-image { min-height: 240px; }
    .content-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .gaming-page .gaming-hero-inner,
    .gaming-page .page-section { width: min(100% - 28px, 1180px); }
    .content-grid, .series-grid { grid-template-columns: 1fr; }
    .live-demo-copy { padding: 25px; }
}

.playlist-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.playlist-meta {
    color: #c8beaf;
}
.category-empty {
    grid-column: 1 / -1;
    padding: 28px;
    border: 1px dashed rgba(196,154,80,.30);
    border-radius: 14px;
    color: #bfb6a8;
    background: rgba(255,255,255,.018);
    line-height: 1.55;
}
.api-note {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.api-status {
    padding: 14px 18px;
    border: 1px solid rgba(196,154,80,.24);
    border-radius: 12px;
    color: #c8beaf;
    background: rgba(196,154,80,.045);
    font-size: .92rem;
}
.api-status strong {
    color: #d9b26a;
    margin-right: 8px;
}
.live-placeholder .live-status {
    color: #d9b26a;
}
.live-placeholder .live-status::before {
    background: #d9b26a;
    box-shadow: 0 0 14px rgba(217,178,106,.55);
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.archive-grid .game-card {
    min-height: 230px;
}
@media (max-width: 1000px) {
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .archive-grid { grid-template-columns: 1fr; }
}

.penpaper-page { background: #0b0b0d; }
.penpaper-page .pp-section,
.penpaper-page .pp-hero-inner { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }
.pp-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(196,154,80,.18); background: radial-gradient(circle at 18% 40%, rgba(158,105,39,.17), transparent 35%), linear-gradient(120deg,#15110e 0%,#0c0d10 55%,#111017 100%); }
.pp-hero::after { content:""; position:absolute; inset:0; opacity:.13; background:url('assets/gruppe2.png') center 42%/cover no-repeat; mix-blend-mode:luminosity; pointer-events:none; }
.pp-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns: 400px 1fr; gap:20px; align-items:center; padding:32px 0; }
/* Home, Gaming und Pen & Paper: gleiche tatsaechliche Hero-Hoehe am Desktop.
   Eine gemeinsame Regel statt drei unabhaengiger Mindesthoehen.
   Auf schmaleren Ansichten bleibt die Hoehe vom Inhalt abhaengig. */
@media (min-width: 951px) {
    .hero,
    .gaming-page .gaming-hero,
    .pp-hero-inner {
        height: 500px;
    }
}

.pp-crest { width:100%; max-height:350px; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.pp-hero-copy h1 { margin:8px 0 16px; max-width:760px; font-size:clamp(2.4rem,5vw,4.8rem); line-height:.98; }
.pp-hero-copy p { max-width:760px; margin:0; color:#c8beaf; font-size:1.14rem; line-height:1.7; }
.pp-section { padding:74px 0 0; }
.pp-section .section-heading { max-width:820px; margin-bottom:30px; }
.signature-card { display:grid; grid-template-columns:minmax(300px,.78fr) 1.22fr; overflow:hidden; border:1px solid rgba(196,154,80,.28); border-radius:18px; background:linear-gradient(145deg,rgba(37,29,20,.92),rgba(14,14,17,.97)); box-shadow:0 26px 60px rgba(0,0,0,.24); }
.signature-art { min-height:650px; background:radial-gradient(circle at 50% 30%,rgba(196,154,80,.15),transparent 50%),#0d0d10; }
.signature-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; }
.signature-copy { padding:42px; align-self:center; }
.signature-copy p { color:#c8beaf; line-height:1.72; }
.character-meta { color:#d9b26a; font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.status-line { margin:8px 0 20px; color:#928b82; font-size:.88rem; }
.steve-details { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.lore-panel { padding:30px; border:1px solid rgba(196,154,80,.2); border-radius:16px; background:rgba(255,255,255,.018); }
.lore-panel h3 { margin:5px 0 10px; font-size:1.45rem; }
.lore-panel p { margin:0; color:#c8beaf; line-height:1.68; }
.axe-panel { background:linear-gradient(145deg,rgba(76,24,20,.16),rgba(255,255,255,.018)); }
.spellbook { margin-top:42px; padding:36px; border:1px solid rgba(196,154,80,.24); border-radius:18px; background:linear-gradient(145deg,#17130f,#101014); }
.compact-heading { margin-bottom:24px !important; }
.spell-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.spell-level { padding:20px; border:1px solid rgba(196,154,80,.16); border-radius:12px; background:rgba(255,255,255,.018); }
.spell-level h3 { margin:0 0 9px; color:#d9b26a; font-size:1.05rem; }
.spell-level p { margin:0; color:#c8beaf; line-height:1.65; }
.spell-level small { display:block; margin-top:10px; color:#8f887f; line-height:1.5; }
.character-grid { display:grid; gap:20px; }
.character-grid.three { grid-template-columns:repeat(3,1fr); }
.character-grid.two { grid-template-columns:repeat(2,1fr); }
.character-card { overflow:hidden; border:1px solid rgba(196,154,80,.2); border-radius:17px; background:linear-gradient(145deg,#171513,#101014); }
.character-card > img { width:100%; height:390px; display:block; object-fit:cover; object-position:center top; background:#111; }
.character-card-copy { padding:27px; }
.character-card h3 { margin:6px 0 2px; font-size:1.65rem; }
.character-card p { color:#c8beaf; line-height:1.65; }
.character-card blockquote { margin:20px 0 0; padding:14px 0 2px 18px; border-left:2px solid #b98a42; color:#e2d7c6; font-style:italic; line-height:1.55; }
.status-badge { display:inline-block; margin:10px 0 3px; padding:5px 9px; border:1px solid rgba(196,154,80,.38); border-radius:999px; color:#e0b86e; background:rgba(196,154,80,.08); font-size:.69rem; font-weight:800; letter-spacing:.08em; }
.active-character { box-shadow:inset 0 2px 0 rgba(217,178,106,.34); }
.mystery-line { color:#d6c5aa !important; font-style:italic; }
.lantern-lore { margin-top:20px; padding:24px 28px; border-left:3px solid #b98a42; background:rgba(196,154,80,.045); }
.lantern-lore p { margin:0; color:#c8beaf; line-height:1.7; }
.rick-section { padding-top:34px; }
.pp-crosslink { margin-top:8px; }
.penpaper-page .site-footer { margin-top:0; }
@media (max-width:950px) {
  .pp-hero-inner { min-height: 0; }
  .pp-hero-inner { grid-template-columns:200px 1fr; }
  .signature-card { grid-template-columns:1fr; }
  .signature-art { min-height:520px; }
  .character-grid.three { grid-template-columns:1fr 1fr; }
  .spell-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .penpaper-page .pp-section,.penpaper-page .pp-hero-inner { width:min(100% - 28px,1180px); }
  .pp-hero-inner { grid-template-columns:1fr; gap:18px; padding:42px 0; }
  .pp-crest { width:180px; margin:auto; }
  .pp-hero-copy { text-align:center; }
  .pp-section { padding-top:54px; }
  .signature-copy { padding:26px; }
  .signature-art { min-height:430px; }
  .steve-details,.character-grid.three,.character-grid.two,.spell-grid { grid-template-columns:1fr; }
  .spellbook { padding:24px; }
  .character-card > img { height:420px; }
}

.pp-lore-hub { padding-top:86px; }
.lore-link-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lore-link-card { min-height:220px; display:flex; flex-direction:column; padding:25px; border:1px solid rgba(196,154,80,.22); border-radius:16px; background:linear-gradient(145deg,rgba(31,25,20,.96),rgba(15,15,18,.98)); color:inherit; text-decoration:none; transition:border-color .18s ease,transform .18s ease,background .18s ease; }
.lore-link-card:hover,.lore-link-card:focus-visible { border-color:rgba(217,178,106,.58); background:linear-gradient(145deg,rgba(42,32,22,.98),rgba(17,17,20,.98)); transform:translateY(-2px); outline:none; }
.lore-link-kicker { color:#a98249; font-size:.68rem; font-weight:800; letter-spacing:.11em; }
.lore-link-card strong { display:block; margin:8px 0 10px; color:#f0e6d6; font-size:1.45rem; }
.lore-link-card > span:not(.lore-link-kicker) { color:#bdb4a8; line-height:1.58; font-size:.94rem; }
.lore-link-card em { margin-top:auto; padding-top:18px; color:#d9b26a; font-style:normal; font-weight:700; }
.lore-source-note { margin:18px 0 0; padding:18px 22px; border-left:3px solid #b98a42; background:rgba(196,154,80,.04); color:#aaa197; line-height:1.6; font-size:.9rem; }
.lore-foundation { min-height:52vh; }
.lore-foundation .lore-panel { max-width:860px; }
.lore-foundation .lore-panel p + p { margin-top:12px; }
@media (max-width:950px) { .lore-link-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:680px) { .lore-link-grid { grid-template-columns:1fr; } .lore-link-card { min-height:0; } }

.pp-lore-teaser { padding-top:86px; }
.lore-teaser-card { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; padding:34px 36px; border:1px solid rgba(196,154,80,.24); border-radius:18px; background:linear-gradient(135deg,rgba(40,31,23,.95),rgba(14,14,17,.98)); }
.lore-teaser-card h2 { margin:5px 0 10px; }
.lore-teaser-card p { max-width:760px; margin:0; color:#c8beaf; line-height:1.65; }
.lore-teaser-link { flex:0 0 auto; padding:13px 16px; border:1px solid rgba(217,178,106,.35); border-radius:10px; color:#e1bd7a; text-decoration:none; font-weight:800; white-space:nowrap; }
.lore-teaser-link:hover,.lore-teaser-link:focus-visible { border-color:rgba(217,178,106,.68); background:rgba(196,154,80,.08); outline:none; }
.archive-overview { padding-bottom:76px; }
.archive-overview .section-heading { max-width:850px; }
.archive-back { margin-top:26px; }
@media (max-width:760px) {
  .lore-teaser-card { align-items:flex-start; flex-direction:column; gap:22px; padding:28px; }
  .lore-teaser-link { white-space:normal; }
}

.setup-page {
  background:
    linear-gradient(rgba(8,8,10,.82),rgba(8,8,10,.82)),
    url("assets/setupbackground.png") center top / cover fixed no-repeat,
    #0b0b0d;
}
.setup-page .setup-section,
.setup-page .setup-hero-inner { width:min(1180px,calc(100% - 44px)); margin-inline:auto; }
.setup-hero { border-bottom:1px solid rgba(196,154,80,.18); background:radial-gradient(circle at 78% 18%,rgba(94,109,137,.16),transparent 34%),radial-gradient(circle at 14% 48%,rgba(196,154,80,.12),transparent 31%),linear-gradient(120deg,#111318 0%,#0b0c0f 52%,#17130f 100%); }
.setup-hero-inner { min-height:390px; display:flex; flex-direction:column; justify-content:center; padding:70px 0; }
.setup-hero h1 { max-width:850px; margin:8px 0 16px; font-size:clamp(2.5rem,5vw,4.9rem); line-height:.98; }
.setup-hero p { max-width:790px; margin:0; color:#c8beaf; font-size:1.12rem; line-height:1.7; }
.setup-section { padding-top:72px; }
.setup-intro { padding-top:48px; }
.setup-principle { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:end; padding:28px 32px; border:1px solid rgba(196,154,80,.20); border-radius:16px; background:rgba(255,255,255,.018); }
.setup-principle h2 { margin:5px 0 0; }
.setup-principle p { margin:0; color:#c8beaf; line-height:1.7; }
.setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.rig-card { overflow:hidden; border:1px solid rgba(196,154,80,.24); border-radius:18px; background:linear-gradient(150deg,rgba(27,28,33,.98),rgba(13,13,16,.98)); box-shadow:0 24px 55px rgba(0,0,0,.19); }
.rig-card.streaming-rig { background:linear-gradient(150deg,rgba(31,28,24,.98),rgba(13,13,16,.98)); }
.rig-head { min-height:190px; padding:34px 34px 28px; border-bottom:1px solid rgba(196,154,80,.15); background:radial-gradient(circle at 90% 10%,rgba(196,154,80,.11),transparent 38%); }
.rig-head h2 { margin:7px 0 10px; font-size:clamp(1.8rem,3vw,2.45rem); }
.rig-head p { margin:0; color:#bfb6aa; line-height:1.62; }
.spec-list { margin:0; padding:8px 34px 20px; }
.spec-list > div { display:grid; grid-template-columns:145px 1fr; gap:22px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.065); }
.spec-list > div:last-child { border-bottom:0; }
.spec-list dt { color:#948c82; font-size:.76rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }
.spec-list dd { margin:0; color:#e1d8ca; line-height:1.5; }
.rig-subsection { margin:0 24px 24px; padding:22px 10px 4px; border-top:1px solid rgba(196,154,80,.22); }
.rig-subtitle { padding:0 0 4px; color:#d9b26a; font-size:.72rem; font-weight:800; letter-spacing:.11em; }
.compact-specs { padding:4px 0 0; }
.compact-specs > div { grid-template-columns:110px 1fr; }
.setup-crosslink { margin-bottom:70px; }
.setup-page .site-footer { margin-top:0; }
@media (max-width:900px) {
  .setup-grid { grid-template-columns:1fr; }
  .setup-principle { grid-template-columns:1fr; gap:14px; }
}
@media (max-width:620px) {
  .setup-page .setup-section,.setup-page .setup-hero-inner { width:min(100% - 28px,1180px); }
  .setup-hero-inner { min-height:320px; padding:50px 0; }
  .setup-section { padding-top:54px; }
  .setup-principle { padding:24px; }
  .rig-head { min-height:0; padding:28px 24px 24px; }
  .spec-list { padding:8px 24px 18px; }
  .spec-list > div,.compact-specs > div { grid-template-columns:1fr; gap:5px; padding:14px 0; }
  .rig-subsection { margin:0 18px 20px; padding:20px 6px 2px; }
}

.about-page {
  background:
    url("assets/aboutbackground.png") center top / max(100%, 1920px) auto no-repeat,
    #0b0b0d;
}
.about-page .about-page-section,
.about-page .about-hero-inner { width:min(1180px,calc(100% - 44px)); margin-inline:auto; }
.about-hero {
  border-bottom:1px solid rgba(196,154,80,.18);
  background:
    radial-gradient(circle at 16% 45%,rgba(196,154,80,.12),transparent 34%),
    radial-gradient(circle at 83% 18%,rgba(91,77,111,.10),transparent 30%),
    linear-gradient(120deg,rgba(21,17,14,.42) 0%,rgba(11,12,15,.32) 55%,rgba(17,16,24,.42) 100%);
}
.about-hero-inner { min-height:430px; display:flex; flex-direction:column; justify-content:center; padding:72px 0; }
.about-hero h1 { max-width:1100px; margin:8px 0 18px; font-size:clamp(2.2rem,3.7vw,3.65rem); line-height:1.08; text-wrap:balance; }
.about-hero p { max-width:800px; margin:0; color:#c8beaf; font-size:1.14rem; line-height:1.7; }
.about-page-section { padding-top:76px; }
.about-lead { padding-top:54px; }
.about-lead-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:70px; align-items:start; padding-bottom:6px; }
.about-lead-grid h2 { margin:6px 0 0; font-size:clamp(2rem,3.5vw,3.1rem); }
.about-prose p { margin:0 0 16px; color:#c8beaf; line-height:1.76; }
.about-prose p:last-child { margin-bottom:0; }
.about-story-card { display:grid; grid-template-columns:1fr 210px; gap:38px; padding:38px 40px; border:1px solid rgba(196,154,80,.25); border-radius:18px; background:linear-gradient(140deg,rgba(34,27,21,.74),rgba(14,14,17,.76)); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); box-shadow:0 24px 60px rgba(0,0,0,.2); }
.about-story-main h2 { max-width:760px; margin:6px 0 18px; }
.about-story-main p { max-width:820px; margin:0 0 15px; color:#c8beaf; line-height:1.72; }
.about-story-main a { color:#d9b26a; }
.about-pullquote { display:flex; flex-direction:column; justify-content:center; padding-left:30px; border-left:1px solid rgba(196,154,80,.22); }
.about-pullquote span { color:#a98249; font-size:.75rem; font-weight:800; letter-spacing:.12em; }
.about-pullquote strong { margin:4px 0 23px; color:#ead9bd; font-size:1.3rem; }
.about-pullquote strong:last-child { margin-bottom:0; }
.about-interest-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.about-interest-card { position:relative; min-height:300px; padding:32px; overflow:hidden; border:1px solid rgba(196,154,80,.19); border-radius:17px; background:linear-gradient(145deg,rgba(25,23,21,.72),rgba(14,14,17,.75)); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.about-card-number { position:absolute; right:22px; top:13px; color:rgba(217,178,106,.12); font-size:4.4rem; font-weight:800; line-height:1; }
.about-interest-card h3 { position:relative; margin:8px 0 14px; color:#eadfce; font-size:1.75rem; }
.about-interest-card p { position:relative; margin:0 0 13px; color:#bfb6aa; line-height:1.68; }
.about-interest-card .about-note { color:#d6c5aa; font-style:italic; }
.about-wide-card { display:grid; grid-template-columns:.82fr 1.18fr; gap:60px; padding:38px 40px; border:1px solid rgba(196,154,80,.22); border-radius:18px; background:radial-gradient(circle at 8% 20%,rgba(196,154,80,.09),transparent 30%),rgba(14,14,17,.72); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.about-wide-card h2 { margin:6px 0 0; }
.about-split-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.about-small-card { padding:34px; border:1px solid rgba(196,154,80,.18); border-radius:17px; background:linear-gradient(145deg,rgba(23,21,19,.72),rgba(16,16,20,.75)); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.about-small-card h2 { margin:6px 0 15px; }
.about-small-card p { margin:0 0 13px; color:#c8beaf; line-height:1.68; }
.about-small-card p:last-child { margin-bottom:0; }
.about-culture-card { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; padding:36px 40px; border-left:3px solid #b98a42; background:rgba(20,17,14,.70); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.about-culture-card h2 { margin:6px 0 12px; }
.about-culture-card p { max-width:820px; margin:0; color:#c8beaf; line-height:1.7; }
.about-culture-card .text-link { flex:0 0 auto; white-space:nowrap; }
.about-crosslink { margin-bottom:70px; }
.about-page .site-footer { margin-top:0; }
@media (max-width:850px) {
  .about-lead-grid,.about-wide-card { grid-template-columns:1fr; gap:24px; }
  .about-story-card { grid-template-columns:1fr; }
  .about-pullquote { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:10px; align-items:center; padding:22px 0 0; border-left:0; border-top:1px solid rgba(196,154,80,.22); }
  .about-pullquote strong { margin:0; }
  .about-culture-card { align-items:flex-start; flex-direction:column; gap:22px; }
}
@media (max-width:680px) {
  .about-page .about-page-section,.about-page .about-hero-inner { width:min(100% - 28px,1180px); }
  .about-hero-inner { min-height:350px; padding:54px 0; }
  .about-page-section { padding-top:56px; }
  .about-interest-grid,.about-split-grid { grid-template-columns:1fr; }
  .about-story-card,.about-wide-card,.about-small-card { padding:27px 24px; }
  .about-culture-card { padding:28px 24px; }
  .about-pullquote { grid-template-columns:auto 1fr; }
}

.legal-page { background:#0b0b0d; }
.legal-hero { border-bottom:1px solid rgba(196,154,80,.18); background:radial-gradient(circle at 18% 42%,rgba(196,154,80,.12),transparent 34%),linear-gradient(120deg,#15110e 0%,#0b0c0f 62%,#111018 100%); }
.legal-inner,.legal-section { width:min(1040px,calc(100% - 44px)); margin-inline:auto; }
.legal-inner { min-height:310px; display:flex; flex-direction:column; justify-content:center; padding:58px 0; text-align:center; align-items:center; }
.legal-inner h1 { margin:8px 0 14px; font-size:clamp(2.7rem,5vw,4.8rem); line-height:1; }
.legal-inner p { max-width:700px; margin:0; color:#c8beaf; font-size:1.08rem; line-height:1.7; }
.legal-section { padding:64px 0 76px; }
.legal-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.legal-panel { min-height:210px; display:flex; flex-direction:column; justify-content:center; padding:34px 36px; border:1px solid rgba(196,154,80,.22); border-radius:18px; background:linear-gradient(145deg,rgba(27,24,21,.98),rgba(14,14,17,.98)); box-shadow:0 24px 60px rgba(0,0,0,.16); }
.legal-panel-wide { grid-column:1 / -1; min-height:190px; }
.legal-panel h2 { margin:7px 0 12px; color:#eadfce; font-size:1.55rem; }
.legal-panel p { max-width:820px; margin:0; color:#c8beaf; line-height:1.72; }
.legal-panel a { color:#d9b26a; text-decoration:none; }
.legal-panel a:hover,.legal-panel a:focus-visible { text-decoration:underline; }
.legal-mail { overflow-wrap:anywhere; }
.legal-note { max-width:760px; margin:28px auto 0; padding:20px 24px; border:1px solid rgba(196,154,80,.16); border-left:3px solid #b98a42; border-radius:0 12px 12px 0; background:rgba(196,154,80,.05); }
.legal-note strong { color:#e5d2b2; }
.legal-note p { margin:6px 0 0; color:#aaa195; line-height:1.6; }
.legal-page .site-footer { margin-top:0; }
@media (max-width:720px) {
  .legal-inner,.legal-section { width:min(100% - 28px,1040px); }
  .legal-inner { min-height:270px; padding:48px 0; }
  .legal-section { padding:48px 0 58px; }
  .legal-grid { grid-template-columns:1fr; }
  .legal-panel,.legal-panel-wide { grid-column:auto; min-height:0; padding:28px 24px; }
  .legal-note { margin-top:22px; padding:19px 20px; }
}

.home-latest-video { color: inherit; text-decoration: none; }
.home-latest-video:hover, .home-latest-video:focus { border-color: var(--gold); }
.archive-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (min-width: 901px) {
    .hero-text { margin-top: 14px; margin-bottom: 0; }
    .cta-row { margin-top: 20px; }
}

.home-live-section {
    padding-top: 20px;
    padding-bottom: 28px;
}

.home-live-card {
    display: grid;
    grid-template-columns: minmax(280px, 38%) 1fr;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid rgba(170, 42, 42, .55);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(30,24,21,.98), rgba(16,15,16,.98));
    box-shadow: 0 16px 42px rgba(0,0,0,.26);
}

.home-live-card > img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    max-height: 220px;
    object-fit: cover;
}

.home-live-copy {
    align-self: center;
    padding: 20px 30px;
}

.home-live-status {
    margin-bottom: 9px;
    color: #ff6459;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .11em;
}

.home-live-status .live-dot {
    width: 9px;
    height: 9px;
    margin-right: 7px;
}

.home-live-copy .meta {
    margin-bottom: 4px;
}

.home-live-copy h2 {
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    line-height: 1.08;
    color: #f4eadc;
}

.home-live-copy .btn {
    padding: 10px 16px;
}

@media (max-width: 760px) {
    .home-live-card {
        grid-template-columns: 1fr;
    }
    .home-live-card > img {
        min-height: 210px;
        max-height: 260px;
    }
    .home-live-copy {
        padding: 22px;
    }
}

.home-live-section {
    padding-top: 14px;
    padding-bottom: 20px;
}

.home-live-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    gap: 18px;
    align-items: center;
}

.home-live-side {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ff6459;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .14em;
}

.home-live-side-right { text-align: right; }
.home-live-side .live-dot { flex: 0 0 auto; width: 10px; height: 10px; }

.home-live-row .home-live-card {
    grid-template-columns: 285px minmax(0, 1fr);
    min-height: 156px;
    max-height: 166px;
}

.home-live-row .home-live-card > img {
    min-height: 156px;
    max-height: 166px;
}

.home-live-row .home-live-copy { padding: 14px 24px; }
.home-live-row .home-live-status { margin-bottom: 5px; font-size: .7rem; }
.home-live-row .home-live-copy .meta { margin-bottom: 2px; font-size: .72rem; }
.home-live-row .home-live-copy h2 {
    margin-bottom: 9px;
    font-size: clamp(1.3rem, 2vw, 1.85rem);
}
.home-live-row .home-live-copy .btn { padding: 8px 13px; font-size: .86rem; }

@media (max-width: 980px) {
    .home-live-row { grid-template-columns: 1fr; gap: 8px; }
    .home-live-side { display: none; }
}

@media (max-width: 760px) {
    .home-live-row .home-live-card { grid-template-columns: 1fr; max-height: none; }
    .home-live-row .home-live-card > img { min-height: 180px; max-height: 220px; }
}

@media (min-width: 981px) {
    .home-live-section {
        padding-top: 16px;
        padding-bottom: 34px;
    }
    .home-live-row {
        grid-template-columns: 120px minmax(0, 1fr) 120px;
        gap: 20px;
    }
    .home-live-row .home-live-card {
        grid-template-columns: 330px minmax(0, 1fr);
        min-height: 188px;
        max-height: 198px;
    }
    .home-live-row .home-live-card > img {
        min-height: 188px;
        max-height: 198px;
    }
    .home-live-row .home-live-copy {
        padding: 18px 28px;
    }
    .home-live-row .home-live-status {
        margin-bottom: 7px;
        font-size: .74rem;
    }
    .home-live-row .home-live-copy .meta {
        margin-bottom: 4px;
        font-size: .76rem;
    }
    .home-live-row .home-live-copy h2 {
        margin-bottom: 12px;
        font-size: clamp(1.45rem, 2.15vw, 2rem);
    }
    .home-live-row .home-live-copy .btn {
        padding: 9px 15px;
        font-size: .9rem;
    }
}

.main-nav a[aria-current="page"] {
    position: relative;
    color: var(--gold-light);
}

.main-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -7px;
    height: 1px;
    background: currentColor;
    opacity: .65;
}

.main-nav a[aria-current="page"]:hover,
.main-nav a[aria-current="page"]:focus {
    color: var(--gold-light);
}

/* Rick-Brüder: auf Desktop zeigt Hover mehr vom vorhandenen Charakterbild. */
@media (hover:hover) and (pointer:fine) and (min-width:761px) {
  .gene-card,
  .syd-card,
  .bao-card,
  .ceran-card,
  .kaelen-card { position:relative; }

  .gene-card > img,
  .syd-card > img,
  .bao-card > img,
  .ceran-card > img,
  .kaelen-card > img {
    transition:none;
  }

  .gene-card .character-card-copy,
  .syd-card .character-card-copy,
  .bao-card .character-card-copy,
  .ceran-card .character-card-copy,
  .kaelen-card .character-card-copy {
    transition:opacity .28s ease, transform .42s ease;
  }

  .gene-card:hover > img,
  .syd-card:hover > img,
  .bao-card:hover > img,
  .ceran-card:hover > img,
  .kaelen-card:hover > img {
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
  }

  .gene-card:hover .character-card-copy,
  .syd-card:hover .character-card-copy,
  .bao-card:hover .character-card-copy,
  .ceran-card:hover .character-card-copy,
  .kaelen-card:hover .character-card-copy {
    opacity:0;
    transform:translateY(42px);
    pointer-events:none;
  }
}



/* Aufklappbare Kampagnenbereiche – ohne JavaScript */
.campaign-section { padding-top:34px; padding-bottom:34px; }
.campaign-details { margin:0; }
.campaign-summary {
  position:relative;
  display:block;
  overflow:hidden;
  min-height:250px;
  border:1px solid rgba(196,154,80,.28);
  border-radius:18px;
  background:#111;
  cursor:pointer;
  list-style:none;
  box-shadow:0 16px 42px rgba(0,0,0,.28);
}
.campaign-summary::-webkit-details-marker { display:none; }
.campaign-summary::marker { display:none; content:""; }
.campaign-summary img {
  display:block;
  width:100%;
  height:clamp(250px,25vw,370px);
  object-fit:cover;
  object-position:center;
}
.campaign-summary-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,5,6,.72) 0%,rgba(5,5,6,.22) 48%,rgba(5,5,6,.08) 72%),linear-gradient(0deg,rgba(5,5,6,.48) 0%,transparent 48%);
  pointer-events:none;
}
.campaign-summary-title {
  position:absolute;
  left:clamp(24px,4vw,58px);
  top:clamp(22px,3vw,38px);
  z-index:2;
  max-width:75%;
  color:#f1dfbf;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.55rem,3vw,2.65rem);
  font-weight:700;
  letter-spacing:.07em;
  text-shadow:0 3px 14px rgba(0,0,0,.9);
}
.campaign-summary-toggle {
  position:absolute;
  right:clamp(22px,3vw,38px);
  bottom:clamp(22px,3vw,38px);
  z-index:2;
  width:48px;
  height:48px;
  border:1px solid rgba(213,173,105,.88);
  border-radius:50%;
  background:rgba(9,9,10,.72);
  box-shadow:0 5px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.campaign-summary-toggle::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-right:2px solid #f1d29b;
  border-bottom:2px solid #f1d29b;
  transform:translate(-50%,-68%) rotate(45deg);
  transition:transform .22s ease;
}
.campaign-summary:hover .campaign-summary-toggle {
  background:rgba(31,24,14,.88);
  border-color:#e4bd77;
  transform:scale(1.06);
}
.campaign-details[open] .campaign-summary-toggle::before {
  transform:translate(-50%,-30%) rotate(225deg);
}
.campaign-summary:focus-visible { outline:2px solid #d5ad69; outline-offset:4px; }
.campaign-content { padding-top:42px; }
.campaign-content > .section-heading { margin-bottom:28px; }

@media (max-width:760px) {
  .campaign-section { padding-top:22px; padding-bottom:22px; }
  .campaign-summary { min-height:180px; border-radius:14px; }
  .campaign-summary img { height:210px; }
  .campaign-summary-title { left:20px; top:18px; max-width:78%; font-size:1.35rem; letter-spacing:.04em; }
  .campaign-summary-toggle { right:16px; bottom:16px; width:42px; height:42px; }
  .campaign-summary-toggle::before { width:10px; height:10px; }
  .campaign-content { padding-top:30px; }
}

/* Rick-Brüder: gleiche Aufklapp-Mechanik, bewusst kompakteres Banner */
.rick-campaign-summary { min-height:212px; }
.rick-campaign-summary img { height:clamp(212px,21.25vw,315px); }

@media (max-width:760px) {
  .rick-campaign-summary { min-height:155px; }
  .rick-campaign-summary img { height:180px; }
}


/* Signature-Charakter: kompakter Reveal ohne JavaScript */
.signature-section{padding-top:34px}.signature-summary{min-height:225px}.signature-summary img{height:clamp(225px,22vw,325px);object-position:center}.signature-content{padding-top:36px}.signature-content .signature-card{grid-template-columns:minmax(340px,44%) minmax(0,1fr)}.signature-content .signature-art{min-height:620px}.signature-content .signature-art img{height:620px;object-fit:contain;object-position:center bottom}.signature-content .signature-copy{padding:42px}.signature-subdetail{margin-top:12px;overflow:hidden;border:1px solid rgba(196,154,80,.24);border-radius:14px;background:linear-gradient(145deg,rgba(28,23,18,.82),rgba(14,14,17,.94))}.signature-subdetail>summary{position:relative;display:block;padding:19px 66px 19px 22px;color:#e1bd7a;cursor:pointer;list-style:none;font-family:Arial,Helvetica,sans-serif;font-size:.82rem;font-weight:800;letter-spacing:.11em}.signature-subdetail>summary::-webkit-details-marker{display:none}.signature-subdetail>summary::marker{display:none;content:""}.signature-subdetail>summary:focus-visible{outline:2px solid #d5ad69;outline-offset:-3px}.signature-subdetail-toggle{position:absolute;right:18px;top:50%;width:34px;height:34px;border:1px solid rgba(213,173,105,.72);border-radius:50%;transform:translateY(-50%);background:rgba(9,9,10,.58)}.signature-subdetail-toggle:before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:2px solid #f1d29b;border-bottom:2px solid #f1d29b;transform:translate(-50%,-65%) rotate(45deg)}.signature-subdetail[open] .signature-subdetail-toggle:before{transform:translate(-50%,-30%) rotate(225deg)}.signature-subdetail-content{padding:24px 26px 28px;border-top:1px solid rgba(196,154,80,.15)}.signature-subdetail-content>.steve-details,.signature-subdetail-content>.spellbook{margin-top:0}.signature-subdetail-content>p{color:#c8beaf;line-height:1.72}@media(max-width:950px){.signature-content .signature-card{grid-template-columns:1fr}.signature-content .signature-art{min-height:560px}.signature-content .signature-art img{height:560px}}@media(max-width:680px){.signature-summary{min-height:175px}.signature-summary img{height:195px}.signature-content{padding-top:28px}.signature-content .signature-art{min-height:440px}.signature-content .signature-art img{height:440px}.signature-subdetail>summary{padding:17px 60px 17px 18px;font-size:.76rem}.signature-subdetail-content{padding:20px 18px 22px}}

/* Steve: Bild-Zoom innerhalb des bestehenden Rahmens – nur Desktop/Maus */
@media (hover:hover) and (pointer:fine) and (min-width:761px) {
  .signature-content .signature-art { overflow:hidden; }
  .signature-content .signature-art img {
    transition:transform .45s ease;
    transform-origin:center center;
  }
  .signature-content .signature-art:hover img { transform:scale(1.09); }
}



.lore-page .lore-index { padding-bottom:26px; }
.lore-jump-nav { display:flex; flex-wrap:wrap; gap:10px; }
.lore-jump-nav a { padding:10px 13px; border:1px solid rgba(196,154,80,.24); border-radius:999px; color:#d8c9b3; background:rgba(15,15,18,.72); text-decoration:none; font-size:.88rem; font-weight:750; }
.lore-jump-nav a:hover,.lore-jump-nav a:focus-visible { border-color:rgba(217,178,106,.62); color:#f0d9ae; outline:none; }
.lore-dossiers { padding-top:26px; }
.lore-dossier { margin:0 0 16px; border:1px solid rgba(196,154,80,.22); border-radius:17px; overflow:hidden; background:linear-gradient(145deg,rgba(29,24,20,.93),rgba(13,13,16,.96)); scroll-margin-top:92px; }
.lore-dossier[open] { border-color:rgba(196,154,80,.38); }
.lore-dossier > summary { position:relative; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:24px 28px; cursor:pointer; list-style:none; }
.lore-dossier > summary::-webkit-details-marker { display:none; }
.lore-dossier > summary > span:first-child { display:flex; min-width:0; flex-direction:column; gap:5px; }
.lore-dossier > summary small { color:#a98249; font-size:.68rem; font-weight:850; letter-spacing:.13em; }
.lore-dossier > summary strong { color:#f0e6d6; font-size:1.7rem; line-height:1.1; }
.lore-dossier > summary em { color:#aaa197; font-size:.94rem; font-style:normal; line-height:1.45; }
.lore-toggle { position:relative; flex:0 0 34px; width:34px; height:34px; border:1px solid rgba(217,178,106,.36); border-radius:50%; }
.lore-toggle::before,.lore-toggle::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:1px; background:#d9b26a; transform:translate(-50%,-50%); }
.lore-toggle::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .18s ease; }
.lore-dossier[open] .lore-toggle::after { transform:translate(-50%,-50%) rotate(0deg); }
.lore-dossier-body { padding:4px 28px 28px; border-top:1px solid rgba(196,154,80,.12); }
.lore-dossier-body p { color:#c8beaf; line-height:1.72; }
.lore-dossier-body a { color:#d9b26a; }
.lore-intro { max-width:900px; padding-top:20px; }
.lore-intro h3,.lore-columns h3 { margin:0 0 9px; color:#eadfce; }
.lore-profile { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:24px 0; overflow:hidden; border:1px solid rgba(196,154,80,.18); border-radius:13px; background:rgba(196,154,80,.16); }
.lore-profile > div { min-height:88px; padding:17px 18px; background:rgba(15,15,18,.91); }
.lore-profile span { display:block; margin-bottom:6px; color:#92764f; font-size:.69rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.lore-profile strong { color:#e5d9c8; font-size:.96rem; line-height:1.42; }
.lore-profile strong a { text-decoration:none; }
.lore-columns { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin:26px 0; }
.lore-columns > div { padding-left:18px; border-left:2px solid rgba(185,138,66,.52); }
.lore-columns p { margin:0; }
.lore-link-row { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0; }
.lore-link-row a { padding:9px 11px; border:1px solid rgba(196,154,80,.2); border-radius:9px; background:rgba(196,154,80,.045); text-decoration:none; font-weight:700; font-size:.88rem; }
.lore-source-box { display:grid; grid-template-columns:130px 1fr; gap:18px; margin:24px 0 18px; padding:17px 19px; border-left:3px solid #b98a42; background:rgba(196,154,80,.045); }
.lore-source-box strong { color:#e1bd7a; }
.lore-source-box span { color:#aaa197; line-height:1.55; }
.lore-back { display:inline-block; margin-top:8px; color:#a98249 !important; text-decoration:none; font-size:.84rem; font-weight:750; }
.lore-placeholder .lore-dossier-body { padding-top:18px; }
.lore-references { scroll-margin-top:92px; padding-top:64px; }
.lore-reference-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lore-reference-grid article { padding:22px; border:1px solid rgba(196,154,80,.18); border-radius:14px; background:rgba(15,15,18,.72); }
.lore-reference-grid strong,.lore-reference-grid span { display:block; }
.lore-reference-grid strong { color:#eadfce; font-size:1.08rem; }
.lore-reference-grid span { margin-top:4px; color:#9d825b; font-size:.8rem; }
.lore-reference-grid p { margin:12px 0 0; color:#bdb4a8; line-height:1.62; }
@media (max-width:820px) { .lore-profile { grid-template-columns:1fr 1fr; } .lore-columns,.lore-reference-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .lore-dossier > summary { padding:20px; } .lore-dossier > summary strong { font-size:1.4rem; } .lore-dossier-body { padding:4px 20px 22px; } .lore-profile { grid-template-columns:1fr; } .lore-source-box { grid-template-columns:1fr; gap:5px; } }


/* Einheitliche Zustandsanzeige fuer auf-/zuklappbare Bereiche: + geschlossen, - offen */
.lore-toggle::before,
.lore-toggle::after,
.campaign-summary-toggle::before,
.campaign-summary-toggle::after,
.signature-subdetail-toggle::before,
.signature-subdetail-toggle::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:2px;
  border:0;
  background:#d9b26a;
  transform:translate(-50%,-50%);
}

.lore-toggle::after,
.campaign-summary-toggle::after,
.signature-subdetail-toggle::after {
  transform:translate(-50%,-50%) rotate(90deg);
}

.lore-dossier[open] > summary .lore-toggle::after,
.campaign-details[open] > .campaign-summary .campaign-summary-toggle::after,
.signature-subdetail[open] > summary .signature-subdetail-toggle::after {
  transform:translate(-50%,-50%) rotate(0deg);
}

.campaign-summary-toggle::before,
.campaign-summary-toggle::after {
  width:14px;
  background:#f1d29b;
}

.signature-subdetail-toggle::before,
.signature-subdetail-toggle::after {
  width:10px;
  background:#f1d29b;
}

/* FINAL: Plus/Minus-Zustand jedes details-Elements nur aus seinem eigenen open-Status ableiten.
   Diese Regeln stehen bewusst zuletzt und neutralisieren ältere Pfeil-/Transform-Regeln. */
.lore-dossier > summary .lore-toggle::before,
.lore-dossier > summary .lore-toggle::after,
.signature-subdetail > summary .signature-subdetail-toggle::before,
.signature-subdetail > summary .signature-subdetail-toggle::after,
.campaign-details > .campaign-summary .campaign-summary-toggle::before,
.campaign-details > .campaign-summary .campaign-summary-toggle::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  height:2px;
  border:0;
  background:#f1d29b;
}

.lore-dossier > summary .lore-toggle::before,
.lore-dossier > summary .lore-toggle::after {
  width:12px;
}
.signature-subdetail > summary .signature-subdetail-toggle::before,
.signature-subdetail > summary .signature-subdetail-toggle::after {
  width:10px;
}
.campaign-details > .campaign-summary .campaign-summary-toggle::before,
.campaign-details > .campaign-summary .campaign-summary-toggle::after {
  width:14px;
}

/* geschlossen = Plus */
.lore-dossier:not([open]) > summary .lore-toggle::before,
.signature-subdetail:not([open]) > summary .signature-subdetail-toggle::before,
.campaign-details:not([open]) > .campaign-summary .campaign-summary-toggle::before,
.lore-dossier:not([open]) > summary .lore-toggle::after,
.signature-subdetail:not([open]) > summary .signature-subdetail-toggle::after,
.campaign-details:not([open]) > .campaign-summary .campaign-summary-toggle::after {
  transform:translate(-50%,-50%) rotate(0deg);
}
.lore-dossier:not([open]) > summary .lore-toggle::after,
.signature-subdetail:not([open]) > summary .signature-subdetail-toggle::after,
.campaign-details:not([open]) > .campaign-summary .campaign-summary-toggle::after {
  transform:translate(-50%,-50%) rotate(90deg);
}

/* offen = Minus */
.lore-dossier[open] > summary .lore-toggle::before,
.lore-dossier[open] > summary .lore-toggle::after,
.signature-subdetail[open] > summary .signature-subdetail-toggle::before,
.signature-subdetail[open] > summary .signature-subdetail-toggle::after,
.campaign-details[open] > .campaign-summary .campaign-summary-toggle::before,
.campaign-details[open] > .campaign-summary .campaign-summary-toggle::after {
  transform:translate(-50%,-50%) rotate(0deg);
}

/* Dragonborn-Archiv: Fan-Content-Hinweis auf die Inhaltsbreite zentrieren */
.lore-page main > :last-child {
  max-width:var(--max);
  width:calc(100% - 48px);
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:680px) {
  .lore-page main > :last-child {
    width:calc(100% - 28px);
  }
}

/* Laufzeit des neuesten YouTube-Videos auf der Startseite */
.home-latest-thumbnail { position:relative; display:block; min-width:0; overflow:hidden; }
.home-latest-thumbnail > img { display:block; width:100%; height:100%; }
.home-video-duration { position:absolute; right:12px; bottom:12px; z-index:1; padding:3px 7px; border-radius:4px; background:rgba(0,0,0,.88); color:#fff; font:700 .85rem/1.25 Arial,Helvetica,sans-serif; letter-spacing:0; }

/* Startseite: YouTube-Thumbnail auf Smartphones vollstaendig anzeigen. */
@media (max-width: 900px) {
    .home-latest-video .home-latest-thumbnail {
        width: 100%;
        height: auto;
    }
    .home-latest-video .home-latest-thumbnail > img {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: contain;
    }
    .home-latest-video .home-video-duration {
        right: 8px;
        bottom: 8px;
    }
}