@font-face {
      font-family:'Diablo';
      src:url('../img/gemeinsam/diablo-heavy.ttf') format('truetype');
      font-style:normal;
      font-weight:400;
      font-display:swap;
    }
    :root {
      --ink:#090807; --charcoal:#11100e; --panel:#171411; --panel-2:#211b16;
      --bone:#eee6d8; --muted:#a99b89; --blood:#a5261c; --ember:#e35827;
      --gold:#c49a50; --line:#463328; --shadow:rgba(0,0,0,.58);
      --type-body:17px; --type-note:20px; --type-small:14px; --type-label:12px; --type-leading:1.7;
      --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px;
      --space-section:96px; --space-section-mobile:64px; --space-feature:128px; --space-feature-mobile:88px;
      --space-divider-clearance:256px; --space-divider-clearance-mobile:112px;
      --page-gutter:24px; --page-gutter-mobile:18px;
      --width-shell:1200px; --width-prose:720px; --width-narrow:640px;
    }
    * { box-sizing:border-box; }
    .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
    html { scroll-behavior:smooth; scroll-padding-top:84px; }
    .svg-filter-defs { position:absolute; width:0; height:0; overflow:hidden; }
    body { margin:0; overflow-x:hidden; color:var(--bone); font:400 var(--type-body)/var(--type-leading) 'Spectral',Georgia,'Times New Roman',serif; }
    body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.12;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"); }
    a { color:inherit; }
    button { font:inherit; }
    .topbar { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(9,8,7,.91); backdrop-filter:blur(14px); }
    .nav { max-width:var(--width-shell); margin:auto; min-height:132px; padding:0 24px; display:flex; align-items:center; gap:28px; transition:min-height .3s ease; }
    .brand { display:flex; align-items:center; margin-right:auto; text-decoration:none; }
    .brand-logo { display:block; height:76px; width:auto; transition:height .3s ease; }
    .topbar.is-scrolled .nav { min-height:85px; }
    .topbar.is-scrolled .brand-logo { height:50px; }
    .nav-links { display:flex; gap:20px; }
    .nav-links a { color:var(--muted); text-decoration:none; font:600 calc(.78rem + 1px)/1.2 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
    .nav-links a:hover,.nav-links a:focus-visible { color:var(--bone); }
    .menu-btn { display:none; color:var(--bone); background:none; border:1px solid var(--line); padding:7px 10px; }
    main { overflow:clip; display:flow-root; }
    .hero { position:relative; width:100%; min-height:780px; margin:0; padding:255px max(24px,calc((100vw - var(--width-shell))/2)) 52px; display:grid; grid-template-columns:minmax(0,870px) 220px; justify-content:center; align-items:end; gap:64px; overflow:visible; border-bottom:0; background:#130806; box-shadow:0 30px 80px rgba(0,0,0,.55); }
    .hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(7,4,3,.02) 0%,rgba(8,5,4,.10) 35%,rgba(8,5,4,.70) 72%,rgba(9,8,7,.96) 88%,#0a0908 100%),linear-gradient(90deg,rgba(8,5,4,.65),transparent 44%,rgba(8,5,4,.2)); }
    .hero::after { content:""; position:absolute; bottom:0; left:0; right:0; height:220px; z-index:2; pointer-events:none; background:linear-gradient(to bottom, transparent 0%, rgba(8,7,6,.38) 38%, #090807 100%); }
    .hero > * { position:relative; z-index:1; }
    .eyebrow { display:flex; align-items:center; gap:8px; color:var(--gold); font:700 calc(.76rem + 1px)/1 system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
    .eyebrow::before { content:""; width:42px; height:1px; background:var(--gold); }
    h1,h2,h3 { margin:0; font-family:'Marcellus','Trajan Pro','Palatino Linotype',Georgia,serif; font-weight:400; line-height:1.02; overflow-wrap:normal; hyphens:none; text-transform:uppercase; letter-spacing:.02em; filter:url(#grunge); }
    h1 { max-width:780px; margin-top:20px; font-size:clamp(3.2rem,7vw,6.5rem); letter-spacing:-.035em; text-transform:uppercase; text-wrap:balance; text-shadow:0 3px 22px #000,0 0 34px rgba(148,28,18,.28); }
    h1 span { color:#c63c27; }
    .lede { max-width:var(--width-prose); margin:28px 0 0; color:#c6baaa; font-size:var(--type-body); line-height:var(--type-leading); }
    .hero-index { border-left:1px solid var(--line); padding-left:24px; color:var(--muted); }
    .hero-index strong { display:block; color:var(--bone); font:500 calc(2.8rem + 1px)/1 'Spectral',Georgia,serif; }
    .hero-index span { display:block; margin-top:8px; font:600 calc(.72rem + 1px)/1.4 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.13em; }
    .hero-index hr { border:0; border-top:1px solid var(--line); margin:24px 0; }
    .download-file {
      display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:11px 14px; color:#ddcdb9; background:#1c110d; text-decoration:none;
      font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase;
      border:9px solid transparent; border-image-source:url('../img/buttons/more-info-standard.webp'); border-image-slice:16 fill; border-image-width:9px; border-image-repeat:stretch;
      transition:filter .2s ease;
    }
    .download-file:hover,.download-file:focus-visible { filter:brightness(1.2); background:#2a1711; }
    .section { max-width:var(--width-shell); margin:auto; padding:var(--space-section) var(--page-gutter); }
    /* Reiner Text-Teaser direkt unter dem Hero — bewusst ohne Bild/Box, damit der
       Übergang vom Hero weich bleibt statt an einer harten Kante zu brechen. */
    .sanctuary-teaser { max-width:var(--width-prose); text-align:center; }
    .sanctuary-teaser .eyebrow { justify-content:center; }
    .sanctuary-teaser h2 { margin-top:14px; }
    .sanctuary-teaser h2::after { content:"◆"; display:block; width:max-content; margin:16px auto 0; color:#7f2b20; font:400 .72rem/1 'Spectral',Georgia,serif; text-shadow:16px 0 #4d2d24,-16px 0 #4d2d24; }
    .sanctuary-lead { max-width:600px; margin:var(--space-lg) auto 0; color:var(--muted); font-size:var(--type-body); line-height:var(--type-leading); }
    .sanctuary-lead + .sanctuary-lead { margin-top:16px; }
    .sanctuary-teaser .download-file { margin-top:var(--space-xl); }
    /* ─── Persönlichkeiten: ruhiger, rein typografischer Teaser ────
       Bewusst ohne Bilder/Karten — die vier Kategorien wirken wie
       Registereinträge in einem Kodex, getrennt durch kleine Rauten
       statt Buttons oder Boxen. */
    .persons-teaser { max-width:var(--width-narrow); padding-top:var(--space-feature); padding-bottom:var(--space-feature); }
    .chapter-markers { list-style:none; margin:var(--space-2xl) 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; row-gap:14px; }
    .chapter-markers li { color:#c9bba5; font:600 calc(.78rem + 1px)/1 system-ui,sans-serif; letter-spacing:.17em; text-transform:uppercase; }
    .chapter-markers li + li::before { content:"◆"; display:inline-block; margin:0 22px; color:#7f2b20; font-size:12px; vertical-align:middle; }
    @media (max-width:560px) {
      .chapter-markers { flex-direction:column; gap:16px; }
      .chapter-markers li + li::before { display:block; margin:0 0 16px; }
    }
    /* ─── Wissen: redaktionelle Buchseite ──────────────────────────
       Bewusst asymmetrisch statt zentriert wie die anderen Teaser:
       breiter Fließtext links, schmales Register rechts, leicht nach
       unten versetzt — wie ein Inhaltsverzeichnis am Seitenrand. */
    .wissen-page { padding-top:var(--space-section); padding-bottom:var(--space-section); }
    .wissen-layout { display:grid; grid-template-columns:1.5fr 1fr; gap:var(--space-2xl); }
    .wissen-text { max-width:620px; }
    .wissen-kicker { margin:var(--space-lg) 0 0; max-width:480px; color:var(--bone); font:italic 400 calc(1.5rem + 1px)/1.5 'Spectral',Georgia,serif; }
    .wissen-body { max-width:560px; margin:var(--space-lg) 0 0; color:#c2b6a6; font-size:var(--type-body); line-height:var(--type-leading); }
    .wissen-body--lead::first-letter { float:left; margin:4px 10px 0 0; color:var(--gold); font:400 calc(3.3rem + 1px)/.78 'Marcellus',Georgia,serif; }
    .wissen-index { margin-top:86px; padding-left:38px; border-left:1px solid rgba(196,154,80,.22); display:flex; flex-direction:column; min-height:220px; }
    .wissen-toc { list-style:none; margin:0; padding:0; display:grid; gap:20px; }
    .wissen-toc li { padding-top:16px; border-top:1px solid rgba(196,154,80,.22); color:#c9bba5; font:600 calc(.76rem + 1px)/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
    .wissen-toc li:first-child { padding-top:0; border-top:0; }
    .wissen-index .download-file { align-self:flex-end; margin-top:auto; }
    @media (max-width:900px) {
      .wissen-layout { grid-template-columns:1fr; gap:48px; }
      .wissen-index { margin-top:0; padding-left:0; border-left:0; padding-top:32px; border-top:1px solid rgba(196,154,80,.22); }
      .wissen-index .download-file { align-self:flex-start; margin-top:32px; }
    }
    @media (max-width:560px) {
      .wissen-page { padding-top:var(--space-section-mobile); padding-bottom:var(--space-section-mobile); }
    }
    /* ─── Himmel & Hölle: geteilter Abschnitt ──────────────────────
       Zwei Spalten, die sich als Gegensatzpaar gegenüberstehen — kühle
       Marmor-Textur links (Himmel) gegen Lava rechts (Hölle), getrennt
       durch ein Ornament, das von hell (Spitze) zu feurig (Fuß) wechselt. */
    .heaven-hell-block { position:relative; left:50%; width:100vw; transform:translateX(-50%); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:860px; }
    .hh-col { position:relative; display:flex; flex-direction:column; justify-content:center; padding:var(--space-feature) 64px; text-align:center; isolation:isolate; }
    .hh-col::before { content:""; position:absolute; inset:0; z-index:-1; }
    .hh-heaven::before {
      background:
        linear-gradient(rgba(10,12,16,.7),rgba(10,12,16,.7)),
        url('../img/texturen/section-heaven-seamless.webp') center/1400px repeat;
    }
    .hh-hell::before {
      background:
        linear-gradient(rgba(5,4,3,.58),rgba(5,4,3,.58)),
        url('../img/texturen/section-lava-seamless.webp') center/1400px repeat;
    }
    .hh-col .eyebrow { justify-content:center; }
    .hh-col h2 { margin-top:14px; }
    .hh-col h2::after { content:"◆"; display:block; width:max-content; margin:16px auto 0; color:#7f2b20; font:400 .72rem/1 'Spectral',Georgia,serif; text-shadow:16px 0 #4d2d24,-16px 0 #4d2d24; }
    .hh-lead { max-width:460px; margin:var(--space-lg) auto 0; color:var(--muted); font-size:var(--type-body); line-height:var(--type-leading); }
    .hh-lead + .hh-lead { margin-top:16px; }
    .hh-col .download-file { margin:var(--space-xl) auto 0; }
    /* Liegt als Overlay genau auf der Nahtstelle der beiden Spalten, statt selbst
       eine eigene Grid-Spalte (und damit Abstand zwischen den Texturen) einzunehmen. */
    .hh-divider { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:clamp(140px,14vw,220px); display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2; }
    .hh-divider img { width:100%; height:auto; max-height:640px; object-fit:contain; filter:drop-shadow(0 0 20px rgba(0,0,0,.6)); position:relative; z-index:1; }
    /* Dieselbe dünne Glutlinie wie bei den horizontalen Section-Dividern
       (section-divider-line.png), hier senkrecht hinter dem Ornament: eine
       überlange, um 90° gedrehte Kopie wird von einem exakt 14px breiten,
       volle Höhe hohen Container beschnitten — so füllt sie zuverlässig die
       ganze Spaltenhöhe, unabhängig von der tatsächlichen Textlänge. */
    .hh-line { position:absolute; top:0; bottom:0; left:50%; width:14px; transform:translateX(-50%); overflow:hidden; pointer-events:none; z-index:0; }
    .hh-line::before {
      content:"";
      position:absolute; top:50%; left:50%;
      width:1600px; height:14px;
      transform:translate(-50%,-50%) rotate(90deg);
      background:url('../img/gemeinsam/section-divider-line.webp') center/107.6% 70px no-repeat;
      filter:drop-shadow(0 0 4px rgba(157,42,20,.3));
    }
    @media (max-width:900px) {
      .heaven-hell-block { grid-template-columns:1fr; }
      .hh-divider { position:static; transform:none; width:auto; height:2px; background:linear-gradient(90deg,transparent,#7f2b20 30%,#7f2b20 70%,transparent); }
      .hh-divider img { display:none; }
      .hh-line { display:none; }
      .hh-col { padding:var(--space-feature-mobile) var(--page-gutter-mobile); }
    }
    .section-head { display:grid; grid-template-columns:170px 1fr; gap:28px; align-items:start; margin-bottom:var(--space-xl); }
    .section-no { color:#6c5d4e; font:600 calc(.74rem + 1px)/1 system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; padding-top:9px; }
    h2 { font-size:clamp(2.35rem,5vw,4.25rem); letter-spacing:-.025em; text-transform:uppercase; }
        .section-head { display: block; }
    .section-head h2::after { content:"◆"; display:block; width:max-content; margin-top:15px; color:#7f2b20; font:400 .72rem/1 'Spectral',Georgia,serif; text-shadow:16px 0 #4d2d24,-16px 0 #4d2d24; }
    .section-intro { max-width:var(--width-prose); color:var(--muted); margin:18px 0 0; }
    .split { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    .evil-panel { padding:30px; border:1px solid var(--line); border-top-color:#6b4032; background:linear-gradient(160deg,#1c1713,#0f0d0b); box-shadow:0 22px 55px rgba(0,0,0,.34); }
    .evil-panel.prime { box-shadow:inset 0 3px 0 var(--blood); }
    .evil-panel.lesser { box-shadow:inset 0 3px 0 #76562e; }
    .evil-panel-header { height:225px; margin:-30px -30px 26px; overflow:hidden; border-bottom:1px solid var(--line); background:#0d0b09; }
    .evil-panel-header img { width:100%; height:100%; display:block; object-fit:cover; object-position:50% 23%; filter:saturate(.84) contrast(1.06) brightness(.78); }
    .evil-panel h3 { font-size:2rem; margin-bottom:7px; }
    .evil-panel > p { color:var(--muted); margin:0 0 26px; }
    .evil-list { display:grid; gap:10px; }
    details { border-top:1px solid var(--line); }
    summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; padding:16px 0; }
    summary::-webkit-details-marker { display:none; }
    summary strong { font-size:calc(1.12rem + 1px); font-weight:600; }
    summary span { color:#8f7e6b; font-style:italic; }
    summary::after { content:"+"; margin-left:auto; color:var(--gold); font:400 calc(1.3rem + 1px)/1 system-ui,sans-serif; }
    details[open] summary::after { content:"−"; }
    details p { margin:-4px 34px 18px 0; color:var(--muted); }
    .evil-detail-body { min-height:0; display:block; overflow:hidden; padding:0; border:1px solid #45362d; background:#0c0a09; }
    .evil-detail-body p { margin:0; padding:24px 26px 27px; color:#ded3c4; }
    .evil-detail-image { position:relative; width:100%; height:285px; margin:0; overflow:hidden; border:0; border-bottom:1px solid #5b362a; background:#17130e; }
    .evil-detail-image::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -22px 30px rgba(13,8,6,.28),inset 0 0 34px rgba(56,18,10,.22); pointer-events:none; }
    .evil-detail-image img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.86) contrast(1.05) brightness(.88); }
    .prime .evil-detail-image img { object-position:50% 26%; }
    .lesser .evil-detail-image img { object-position:center; }
    .chapter-image { position:relative; min-height:330px; margin:0 0 34px; overflow:hidden; border:1px solid var(--line); background:#13100e; }
    .chapter-image img { width:100%; height:100%; min-height:330px; object-fit:cover; display:block; filter:saturate(.72) contrast(1.08) brightness(.72); }
    .chapter-image::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(9,8,7,.68),transparent 60%),linear-gradient(0deg,rgba(9,8,7,.82),transparent 45%); }
    .chapter-image figcaption { position:absolute; z-index:1; left:24px; right:24px; bottom:20px; color:#cbbdab; font:600 calc(.74rem + 1px)/1.45 system-ui,sans-serif; letter-spacing:.04em; }
    .lore-lead { margin:0 0 44px; display:grid; grid-template-columns:1fr 1fr; gap:30px; }
    .lore-lead p { margin:0; color:#c2b6a6; font-size:var(--type-body); }
    .lore-chapters { display:grid; gap:14px; }
    .lore-chapter { padding:28px 30px; border:1px solid var(--line); background:linear-gradient(145deg,#171310,#100e0c); }
    .lore-chapter header { display:grid; grid-template-columns:70px 1fr; gap:18px; align-items:start; }
    .chapter-num { color:#813126; font:500 calc(2rem + 1px)/1 'Spectral',Georgia,serif; }
    .lore-chapter h3 { font-size:1.65rem; }
    .lore-chapter .period { display:block; margin-top:6px; color:#8e7c69; font:650 calc(.7rem + 1px)/1.3 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.12em; }
    .chapter-copy { margin:20px 0 0 88px; columns:2; column-gap:34px; color:var(--muted); }
    .chapter-copy p { margin:0 0 1em; break-inside:avoid; }
    .region-strip { margin:28px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .region { padding:20px; border:1px solid var(--line); background:#100e0c; }
    .region strong { display:block; font-size:var(--type-body); }
    .region span { display:block; margin-top:6px; color:var(--muted); font-size:var(--type-body); }
    .spoiler-note { margin:0 0 24px; padding:16px 19px; border-left:3px solid var(--blood); background:rgba(104,31,23,.12); color:#c7b8a7; }
    .boss-groups { display:grid; gap:30px; }
    .boss-group-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:13px; }
    .boss-group-head h3 { font-size:1.75rem; }
    .boss-group-head span { color:#776b5e; font:650 calc(.7rem + 1px)/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.11em; }
    .boss-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .boss-card { min-height:238px; padding:22px; border:1px solid var(--line); background:linear-gradient(145deg,#1a1512,#100e0c); }
    .boss-card .boss-type { color:var(--gold); font:700 12px/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.12em; }
    .boss-card h4 { margin:34px 0 0; font:500 1.35rem/1.08 'Spectral',Georgia,serif; }
    .boss-card p { margin:11px 0 0; color:var(--muted); }
    .boss-card .boss-lore { margin-top:15px; padding-top:13px; border-top:1px solid var(--line); color:#c8b8a5; font-size:var(--type-body); }
    .boss-card.spoiler .boss-lore { filter:blur(5px); cursor:pointer; user-select:none; transition:filter .2s ease; }
    .boss-card.spoiler .boss-lore:hover,.boss-card.spoiler .boss-lore:focus,.boss-card.spoiler.revealed .boss-lore { filter:none; user-select:text; }
    .boss-card.spoiler .boss-lore::before { content:"Antippen, um Story-Info zu zeigen · "; color:var(--gold); }
    .boss-card.spoiler.revealed .boss-lore::before { content:""; }
    .timeline { position:relative; display:grid; gap:0; }
    .timeline::before { content:""; position:absolute; left:92px; top:12px; bottom:12px; width:1px; background:linear-gradient(var(--blood),var(--line)); }
    .era { display:grid; grid-template-columns:70px 44px 1fr; gap:20px; padding:0 0 32px; }
    .era-no { color:#745d4f; font:600 calc(.72rem + 1px)/1.3 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; text-align:right; padding-top:4px; }
    .era-mark { position:relative; width:11px; height:11px; margin-left:15px; background:#0c0a09; border:2px solid var(--blood); transform:rotate(45deg); }
    .era h3 { font-size:1.35rem; }
    .era p { max-width:var(--width-prose); margin:8px 0 0; color:var(--muted); }
    .people-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .people { min-height:220px; padding:24px; border:1px solid var(--line); background:#13110f; }
    .people.hostile { background:linear-gradient(150deg,#1c1310,#11100e); }
    .people .type { color:var(--gold); font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
    .people h3 { margin-top:40px; font-size:1.55rem; }
    .people p { color:var(--muted); margin:12px 0 0; }
    /* .world hat durch transform einen eigenen Stacking-Context — Kinder von .world (wie
       world-controls) könnten darin NIE über ein Geschwisterelement wie .section-divider
       gestapelt werden, egal welchen z-index sie bekommen. Deshalb lebt world-controls jetzt
       als Geschwister von .world (nicht mehr als Kind) in .world-wrap; dort werden alle drei
       (world, section-divider, world-controls) direkt anhand ihres z-index verglichen:
       world (Kontext ≈ 0) < section-divider (4) < world-controls (5). Die Ornament-Spitze darf
       dadurch über den Slider hinausragen, ohne die Navigation zu verdecken; die eigene
       Divider-Sicherheitszone hält das große Mittelornament vom folgenden Text fern. */
    .world-wrap { position:relative; }
    .world { position:relative; left:50%; width:100vw; min-height:min(900px,90vh); margin-bottom:6px; transform:translateX(-50%); overflow:hidden; isolation:isolate; border-block:1px solid #3b2a22; background:#090807; }
    .world-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .75s ease,visibility .75s; }
    .world-slide.active { opacity:1; visibility:visible; z-index:1; }
    .world-bg { position:absolute; inset:-2%; width:104%; height:104%; object-fit:cover; transform:scale(1.035); transition:transform 7s ease; }
    .world-slide.active .world-bg { transform:scale(1); }
    .world-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,4,3,.96) 0%,rgba(5,4,3,.79) 28%,rgba(5,4,3,.28) 58%,rgba(5,4,3,.5) 100%),linear-gradient(0deg,rgba(5,4,3,.98) 0%,rgba(5,4,3,.18) 42%,rgba(5,4,3,.52) 100%); }
    .world-kicker { position:absolute; z-index:4; top:clamp(34px,6vh,72px); left:max(32px,calc((100vw - 1180px)/2)); display:flex; align-items:center; gap:8px; color:#c3a47f; font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
    .world-content { position:absolute; z-index:3; left:max(32px,calc((100vw - 1180px)/2)); bottom:clamp(150px,20vh,220px); width:min(590px,calc(100vw - 64px)); }
    .world-index { display:block; margin-bottom:13px; color:#ad6d50; font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
    .world-content h2 { margin:0; max-width:900px; font-size:clamp(2.45rem,5.25vw,5.65rem); line-height:.9; letter-spacing:-.025em; text-wrap:balance; white-space:normal; text-shadow:0 3px 25px #000; }
    .world-content > p { max-width:540px; margin:23px 0 0; color:#d4c8bb; font-size:var(--type-body); line-height:var(--type-leading); text-shadow:0 2px 12px #000; }
    .world-facts { display:flex; flex-wrap:wrap; gap:22px 34px; margin:24px 0 0; }
    .world-facts div { display:grid; gap:6px; }
    .world-facts dt { color:#987d68; font:700 12px/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
    .world-facts dd { margin:0; color:#eee4d8; font-size:var(--type-body); }
    .world-more {
      display:inline-flex; align-items:center; gap:8px; margin-top:25px; padding:11px 17px; color:var(--bone); background:rgba(31,17,13,.72); text-decoration:none;
      font:700 calc(.7rem + 1px)/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
      border:9px solid transparent; border-image-source:url('../img/buttons/more-info-standard.webp'); border-image-slice:16 fill; border-image-width:9px; border-image-repeat:stretch;
      transition:filter .2s ease;
    }
    .world-more:hover,.world-more:focus-visible { background:#482218; filter:brightness(1.2); }
    .world-detail { margin-top:15px; max-width:520px; padding:15px 18px; color:#cdbdaf; border-left:2px solid #8b5540; background:rgba(9,7,6,.78); font-size:var(--type-body); line-height:var(--type-leading); }
    .world-detail[hidden] { display:none; }
    .world-controls { position:absolute; z-index:5; left:50%; bottom:80px; width:min(1180px,calc(100vw - 64px)); transform:translateX(-50%); display:grid; grid-template-columns:54px minmax(0,1fr) 54px; align-items:center; gap:16px; }
    .world-arrow { width:54px; height:54px; display:grid; place-items:center; border:1px solid rgba(207,183,158,.32); color:#dfd2c2; background:rgba(8,7,6,.66); cursor:pointer; font-size:calc(1.45rem + 1px); }
    .world-arrow:hover,.world-arrow:focus-visible { border-color:#a96549; background:#26140f; }
    .world-tabs { display:flex; overflow-x:auto; scrollbar-width:none; border-top:1px solid rgba(207,183,158,.23); }
    .world-tabs::-webkit-scrollbar { display:none; }
    .world-tab { position:relative; flex:1 0 auto; min-width:140px; padding:20px 14px 10px; border:0; color:#8f8276; background:transparent; font:700 calc(.76rem + 1px)/1.2 system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; text-align:center; }
    .world-tab::before { content:""; position:absolute; top:-1px; left:50%; width:0; height:2px; background:#b55f43; transform:translateX(-50%); transition:width .25s ease; }
    .world-tab.active,.world-tab:hover,.world-tab:focus-visible { color:#f0e5d7; }
    .world-tab.active::before { width:100%; }
    #archiv + .section-divider { display:none; }
    @media (max-width:720px) {
      .world { min-height:820px; }
      .world-slide::after { background:linear-gradient(0deg,rgba(5,4,3,.98) 0%,rgba(5,4,3,.74) 52%,rgba(5,4,3,.36) 100%); }
      .world-kicker { top:28px; left:22px; }
      .world-content { left:22px; bottom:155px; width:calc(100vw - 44px); }
      .world-content h2 { font-size:clamp(2.1rem,11.4vw,4.3rem); hyphens:auto; overflow-wrap:break-word; }
      .world-content > p { line-height:var(--type-leading); }
      .world-facts { gap:16px 24px; }
      .world-controls { bottom:60px; width:calc(100vw - 30px); grid-template-columns:44px minmax(0,1fr) 44px; gap:7px; }
      .world-arrow { width:44px; height:44px; font-size:calc(1.2rem + 1px); }
      .world-tab { min-width:116px; font-size:calc(.7rem + 1px); padding:16px 10px 8px; }
    }
    @media (prefers-reduced-motion:reduce) { .world-slide,.world-bg { transition:none; } }
    .system-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    .system-card { padding:25px; border:1px solid var(--line); background:#12100e; }
    .system-card header { display:flex; align-items:center; gap:14px; }
    .system-card b { flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center; color:var(--gold); border:1px solid #644335; transform:rotate(45deg); font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; }
    .system-card b span { transform:rotate(-45deg); }
    .system-card h3 { font-size:1.35rem; }
    .system-card p { margin:16px 0 0; color:var(--muted); }
    .system-card small { display:block; margin-top:16px; color:#8d7d6b; font:650 calc(.7rem + 1px)/1.45 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
    .farm-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
    .farm-filter { cursor:pointer; padding:9px 13px; color:var(--muted); border:1px solid var(--line); background:#110f0d; font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
    .farm-filter.active,.farm-filter:hover,.farm-filter:focus-visible { color:var(--bone); border-color:#8b5540; background:#26140f; }
    .farm-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    .farm-card { padding:24px; border:1px solid var(--line); border-top-color:#654438; background:linear-gradient(145deg,#181411,#100e0c); }
    .farm-card[hidden] { display:none; }
    .farm-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
    .farm-card h3 { font-size:1.4rem; line-height:1.08; }
    .farm-type { flex:0 0 auto; color:#a98561; font:700 12px/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
    .farm-best { margin:22px 0 0; padding:17px 18px; border-left:3px solid var(--blood); background:rgba(101,31,23,.14); }
    .farm-best span,.farm-alt span { display:block; color:#846f5d; font:700 12px/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
    .farm-best strong { display:block; margin-top:7px; color:#eadbca; font-size:var(--type-body); }
    .farm-alt { margin-top:17px; }
    .farm-alt p { margin:7px 0 0; color:var(--muted); }
    .farm-tip { margin:17px 0 0; padding-top:14px; border-top:1px solid var(--line); color:#bbaa97; font-size:var(--type-body); }
    .farm-tip::before { content:'Tipp · '; color:var(--gold); font-weight:700; }
    .farm-note { margin:20px 0 0; padding:16px 19px; color:#9b8b78; border:1px solid var(--line); background:#100e0c; font-size:var(--type-body); }
    .relationship-map { padding:28px; border:1px solid var(--line); background:radial-gradient(circle at 50% 50%,rgba(130,35,25,.13),transparent 40%),#0e0c0a; }
    .relation-tier { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .relation-tier + .relation-tier { position:relative; margin-top:44px; }
    .relation-tier + .relation-tier::before { content:'↓'; position:absolute; left:50%; top:-36px; color:#8e4937; font:700 calc(1.25rem + 1px)/1 system-ui,sans-serif; }
    .relation-node { min-height:135px; padding:19px; border:1px solid #4d392f; background:#15110f; }
    .relation-node.origin { grid-column:2; text-align:center; border-color:#75503e; }
    .relation-node h3 { font-size:1.22rem; }
    .relation-node span { display:block; margin-top:7px; color:var(--muted); font-size:var(--type-body); }
    .relation-node em { display:block; margin-top:11px; color:#9b765e; font:650 12px/1.35 system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
    .relationship-note { margin:20px 0 0; color:#8f806f; font-size:var(--type-body); }
    .glossary-tools { margin:0 0 22px; display:flex; gap:10px; }
    .glossary-search { width:100%; padding:14px 16px; color:var(--bone); border:1px solid #634437; background:#100e0c; font:500 calc(1rem + 1px)/1.2 system-ui,sans-serif; }
    .glossary-count { flex:0 0 auto; display:grid; place-items:center; min-width:88px; color:#9c8c79; border:1px solid var(--line); font:650 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
    .glossary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
    .glossary-item { padding:20px 22px; border:1px solid var(--line); background:#12100e; }
    .glossary-item h3 { font-size:1.18rem; }
    .glossary-item p { margin:8px 0 0; color:var(--muted); }
    .glossary-empty { padding:24px; color:var(--muted); border:1px dashed var(--line); }
    /* gap vergrößert, damit der außen liegende Rahmen (::before, wächst über die Karte
       hinaus) benachbarte Karten nicht berührt. */
    .link-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); }
    .link-card { position:relative; overflow:visible; min-height:170px; padding:24px 56px 24px 24px; border:1px solid var(--line); background:#14110f; text-decoration:none; transition:border-color .2s ease,background .2s ease; }
    .link-card:hover,.link-card:focus-visible { border-color:#805140; background:#1c1512; }
    /* Der subtile Rahmen liegt außerhalb der Karte, nicht direkt auf ihrer Kante. */
    .link-card::before {
      content:""; position:absolute; inset:-18px -12px; pointer-events:none; opacity:.6; transition:opacity .2s ease;
      border-style:solid;
      border-width:34px 24px;
      border-image-source:url('../img/klassen/class-card-frame-subtle.webp');
      border-image-slice:150 140 150 140;
      border-image-repeat:stretch;
    }
    .link-card:hover::before,.link-card:focus-visible::before { opacity:1; }
    .link-card::after { content:"↗"; position:absolute; right:22px; top:21px; color:var(--gold); font:400 calc(1.25rem + 1px)/1 system-ui,sans-serif; }
    .link-card small { color:#987c62; font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
    .link-card h3 { margin-top:28px; font-size:1.35rem; }
    .link-card p { color:var(--muted); margin:9px 0 0; }
    footer { position:relative; margin-top:60px; border-top:1px solid var(--line);  }
    /* Winziges, kaum sichtbares Easter Egg: fast unsichtbar in der Footer-Ecke,
       Farbe nahe am Footer-Hintergrund, hellt erst bei Hover/Fokus sichtbar
       auf. Führt zur versteckten Kuh-Ebene-Seite. */
    .footer-rune { position:absolute; right:10px; bottom:2px; width:68px; height:68px; opacity:.28; filter:grayscale(70%) brightness(.75); transition:opacity .35s ease,filter .35s ease; }
    .footer-rune img { display:block; width:100%; height:100%; object-fit:contain; }
    .footer-rune:hover,.footer-rune:focus-visible { opacity:1; filter:none; }
    .footer-inner { max-width:var(--width-shell); margin:auto; padding:35px 24px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; color:#776d61; font:500 calc(.74rem + 1px)/1.5 system-ui,sans-serif; }
    .footer-notice { display:flex; flex-direction:column; gap:6px; max-width:var(--width-narrow); }
    .footer-notice p { margin:0; }
    .footer-inner a { color:#ae9d89; }
    .footer-meta { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
    .footer-links { display:flex; gap:16px; }
    .footer-links a { text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
    .backtop { text-transform:uppercase; letter-spacing:.08em; text-decoration:none; }
    :focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
    @media (max-width:900px) {
      .hero { grid-template-columns:1fr; gap:32px; min-height:540px; padding:245px 32px 46px; }
      .hero-index { display:flex; gap:30px; border-left:0; border-top:1px solid var(--line); padding:20px 0 0; }
      .hero-index hr { display:none; }
      .section-head { grid-template-columns:1fr; gap:12px; }
      .timeline,.chapter-image,.lore-lead,.lore-chapters,.region-strip,.spoiler-note,.boss-groups,.archive-tabs,.archive-panel,.system-grid,.farm-filters,.farm-grid,.farm-note,.relationship-map,.glossary-tools,.glossary-grid,.glossary-empty { margin-left:0; }
      .people-grid,.link-grid,.boss-grid { grid-template-columns:repeat(2,1fr); }
      .archive-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:680px) {
      .nav { min-height:92px; padding:0 18px; }
      .brand-logo { height:46px; }
      .topbar.is-scrolled .nav { min-height:77px; }
      .topbar.is-scrolled .brand-logo { height:38px; }
      .topbar.is-scrolled .nav-links { top:62px; }
      .menu-btn { display:block; }
      .nav-links { display:none; position:absolute; top:77px; left:0; right:0; padding:18px 24px 24px; flex-direction:column; background:#0d0b0a; border-bottom:1px solid var(--line); transition:top .3s ease; }
      .nav-links.open { display:flex; }
      .hero,.section { padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); }
      .section { padding-top:var(--space-section-mobile); padding-bottom:var(--space-section-mobile); }
      .persons-teaser { padding-top:var(--space-feature-mobile); padding-bottom:var(--space-feature-mobile); }
      .hero { min-height:510px; padding:235px 22px 38px; background-position:54% 32%; }
      h1 { font-size:clamp(3rem,16vw,4.7rem); }
      .split,.people-grid,.link-grid,.boss-grid,.region-strip,.lore-lead,.archive-grid,.system-grid,.farm-grid,.glossary-grid,.relation-tier { grid-template-columns:1fr; }
      .relation-node.origin { grid-column:auto; }
      .evil-detail-image { height:250px; }
      .evil-detail-body p { padding:20px; }
      .chapter-image,.chapter-image img { min-height:260px; }
      .lore-chapter { padding:22px 20px; }
      .lore-chapter header { grid-template-columns:48px 1fr; }
      .chapter-copy { margin-left:66px; columns:1; }
      .timeline::before { left:73px; }
      .era { grid-template-columns:53px 36px 1fr; gap:12px; }
      .era-mark { margin-left:13px; }
      .footer-inner { flex-direction:column; align-items:flex-start; }
      .footer-meta { align-items:flex-start; }
    }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

    /* ─── Lava Texture Background ─────────────────────────────── */
    body {
      background-color: #0a0908;
      background-attachment: scroll;
      background-repeat: no-repeat;
      background-image: none;
    }
    body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.22;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
      background-size:200px 200px; }

    /* ─── Lilith Hero & falling petals ────────────────────────── */
    .hero-image { position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; object-position:center 34%; z-index:0;
      opacity:.88; pointer-events:none; }
    .hero-petals { position:absolute; z-index:2; inset:0 0 -72px; overflow:hidden;
      pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%);
      mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%); }
    .hero-petals span { position:absolute; top:-7%; left:var(--x); width:var(--size); height:calc(var(--size) * 1.45);
      opacity:0; animation:petal-fall var(--duration) linear var(--delay) infinite; will-change:top,transform; }
    .hero-petals i { display:block; width:100%; height:100%; border-radius:82% 12% 78% 18%;
      background:linear-gradient(145deg,#8d111b 0%,#db4a4a 42%,#670811 72%,#2c0206 100%);
      box-shadow:inset 2px 1px 2px rgba(255,158,139,.24),0 0 7px rgba(194,45,46,.3);
      transform-origin:50% 20%; animation:petal-flutter 1.8s ease-in-out infinite alternate; }
    .hero-petals.petals-paused span { animation-play-state:paused; }
    .hero > :not(.hero-image):not(.hero-petals) { position:relative; z-index:3; }
    @keyframes petal-fall {
      0% { top:-7%; opacity:0; transform:translate3d(0,-12px,0) rotate(var(--rotation)); }
      8% { opacity:.78; }
      24% { transform:translate3d(var(--wind-a),0,0) rotate(calc(var(--rotation) + 105deg)); }
      47% { transform:translate3d(var(--wind-b),0,0) rotate(calc(var(--rotation) + 245deg)); }
      69% { transform:translate3d(var(--wind-c),0,0) rotate(calc(var(--rotation) + 360deg)); }
      80% { opacity:.72; }
      100% { top:105%; opacity:0; transform:translate3d(var(--drift),0,0) rotate(calc(var(--rotation) + 520deg)); }
    }
    @keyframes petal-flutter { from { transform:rotateX(18deg) scaleX(.72); } to { transform:rotateX(75deg) scaleX(1); } }

    @media (prefers-reduced-motion:reduce) {
      .hero-petals { display:none; }
    }

    /* ─── Section Divider ──────────────────────────────────────── */
    /* .section-divider sitzt mit Höhe 0 exakt auf dem Übergang zwischen zwei Modulen; top:0
       ist der Ankerpunkt. section-divider-ornament-small.png ist ein einzelnes Bild (dünne
       Linie + Ornament schon zusammen, mit weichem Alpha-Fade an den Rändern), deshalb reicht
       jetzt eine einzige Ebene statt der früheren zwei (Glutlinie + Ornament getrennt).
       Sichtbarer Inhalt sitzt bei ca. 47.8% der Bildhöhe (Zeilen 245–448 von 725) — translateY
       zentriert genau darauf. */
    .section-divider { display:block; position:relative; z-index:4; width:min(1680px,calc(100vw - 40px)); max-width:none; height:0; margin:0 auto; pointer-events:none; overflow:visible; }
    .section:has(+ .section-divider) { padding-bottom:var(--space-divider-clearance); }
    .section-divider + .section { padding-top:var(--space-divider-clearance); }
    .section-divider + .world-wrap .world-kicker { top:var(--space-divider-clearance); }
    .section-divider img {
      content:url('../img/gemeinsam/section-divider-ornament-small.webp');
      position:absolute;
      top:0;
      left:50%;
      width:min(1680px,calc(100vw - 40px));
      height:auto;
      display:block;
      z-index:1;
      transform:translate(-50%,-47.8%);
      filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(80,10,5,.4));
      opacity:.96;
    }
    /* Das Pulsieren sitzt NICHT mehr als drop-shadow auf dem ganzen Ornament-Bild (das ließ
       auch die Ecken/Ränder mitleuchten), sondern als eigener, kleiner radialer Glow-Fleck
       genau auf dem zentralen roten Kristall — ruhig und langsam, wie leise pulsierende Energie,
       kein Flackern. */
    .section-divider::after {
      content:"";
      position:absolute;
      z-index:2;
      top:0;
      left:50%;
      width:64px;
      height:64px;
      transform:translate(-50%,-50%);
      background:radial-gradient(circle,rgba(235,100,38,.72) 0%,rgba(190,60,22,.38) 40%,transparent 72%);
      mix-blend-mode:screen;
      pointer-events:none;
      animation:divider-glow-pulse 8s ease-in-out infinite;
    }
    @keyframes divider-glow-pulse {
      0%,100% { opacity:.42; }
      50% { opacity:1; }
    }
    @media (prefers-reduced-motion:reduce) {
      .section-divider::after { animation:none; }
    }
    /* Zwischen Modulen mit derselben Hintergrundtextur (z.B. zwei aufeinanderfolgende
       Fels-Sections) wirkt das volle Ornament zu viel — dort reicht eine schmale Trennlinie.
       Das volle Ornament bleibt reserviert für Übergänge, bei denen sich die Textur ändert.
       Die dünne Glutlinie (section-divider-line.png) trennt aber jetzt IMMER die Module komplett
       voneinander (auch unter dem Ornament durchgehend), nicht nur bei der reinen Linien-Variante.
       Das PNG hat einen harten Rand und nur auf ca. 93% der Bildbreite sichtbaren Inhalt, außen
       ca. 3.5% je Seite komplett transparent — background-size 107.6% kompensiert das. Die Box
       ist nur 14px hoch bei 70px Streckung, damit nur der kräftige Linienkern sichtbar ist. */
    .section-divider::before {
      content:"";
      position:absolute;
      top:0;
      left:50%;
      width:100vw;
      height:14px;
      transform:translate(-50%,-50%);
      background:url('../img/gemeinsam/section-divider-line.webp') center/107.6% 70px no-repeat;
      filter:drop-shadow(0 0 4px rgba(157,42,20,.3));
    }
    @media (max-width:680px) {
      .section-divider { width:calc(100vw - 28px); }
      .section:has(+ .section-divider) { padding-bottom:var(--space-divider-clearance-mobile); }
      .section-divider + .section { padding-top:var(--space-divider-clearance-mobile); }
      .section-divider + .world-wrap .world-kicker { top:var(--space-divider-clearance-mobile); }
    }

    /* ─── Abschnittsweise Hintergründe ────────────────────────── */
    .section { position:relative; isolation:isolate; }
    .section::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none; }
    #sanctuary::before,#persoenlichkeiten::before {
      background:
        linear-gradient(90deg,#070707 0%,rgba(7,7,7,.18) 13%,rgba(7,7,7,.18) 87%,#070707 100%),
        linear-gradient(rgba(7,7,7,.76),rgba(7,7,7,.76)),
        url('../img/texturen/section-rock-seamless.webp') top center/2508px 2508px repeat;
    }
    #wissen::before {
      background:
        linear-gradient(90deg,#080503 0%,rgba(8,5,3,.12) 13%,rgba(8,5,3,.12) 87%,#080503 100%),
        linear-gradient(rgba(8,5,3,.64),rgba(8,5,3,.64)),
        url('../img/texturen/section-leather-seamless.webp') top center/2508px 2508px repeat;
    }
    /* Torweg-Artwork statt Lava-Textur: passendes Bild für "Wichtige Seiten", da die
       Links dort selbst zu anderen Orten (externen Seiten) führen. */
    #links::before {
      background:
        linear-gradient(90deg,#050403 0%,rgba(5,4,3,.2) 13%,rgba(5,4,3,.2) 87%,#050403 100%),
        linear-gradient(rgba(5,4,3,.6),rgba(5,4,3,.72)),
        url('../img/gemeinsam/links-gateway.webp') center/cover no-repeat;
    }
    #sanctuary::after { content:""; position:absolute; z-index:-1; top:0; left:50%; width:100vw; height:190px; transform:translateX(-50%); pointer-events:none; background:linear-gradient(to bottom,#090807 0%,rgba(9,8,7,.82) 30%,transparent 100%); }
    footer { margin-top:0; }

/* Mobil: die Regionsbilder (16:9) werden im Hochformat auf ~26% ihrer Breite
   beschnitten - pro Region der Ausschnitt, der das Hauptmotiv trifft
   (Kathedrale, Anlegesteg, Nomadenzelt, Palastturm, Kapelle, Steingesicht,
   Klippentempel), statt immer die Bildmitte. Das Overlay ist oben leichter,
   damit das Motiv im oberen Bilddrittel sichtbar bleibt; unter dem Text
   bleibt es dicht. */
@media (max-width:720px) {
  .world-bg[src*="zersplitterte-gipfel"] { object-position:74% 40%; }
  .world-bg[src*="scosglen"] { object-position:44% 40%; }
  .world-bg[src*="trockensteppe"] { object-position:54% 40%; }
  .world-bg[src*="kehjistan"] { object-position:38% 40%; }
  .world-bg[src*="hawezar"] { object-position:38% 40%; }
  .world-bg[src*="nahantu"] { object-position:16% 40%; }
  .world-bg[src*="skovos"] { object-position:18% 40%; }
  .world-slide::after { background:linear-gradient(0deg,rgba(5,4,3,.98) 0%,rgba(5,4,3,.86) 38%,rgba(5,4,3,.4) 60%,rgba(5,4,3,.08) 100%); }
}

/* Mobil: lange zentrierte Fließtexte (Himmel-/Hölle-Teaser, Sanktuario-Teaser)
   sind linksbündig deutlich besser lesbar; Überschriften und Buttons bleiben
   zentriert. */
@media (max-width:720px) {
  .hh-col p, .sanctuary-teaser p { text-align:left; hyphens:auto; }
}

/* Mobil: Regions-Navigation dockt wie auf den Unterseiten am unteren
   Viewport-Rand an, solange der Slider im Bild ist. Die Leiste liegt dafür
   im Fluss unter dem Slider statt als Overlay darauf, der Textblock rückt
   entsprechend tiefer. */
@media (max-width:720px) {
  .world-controls + .section-divider { margin-top:72px; }
  .world { min-height:760px; }
  .world-content { bottom:56px; }
  .world-controls { position:sticky; left:auto; bottom:0; z-index:20; width:auto; transform:none; margin:0; padding:10px 15px calc(10px + env(safe-area-inset-bottom)); background:rgba(9,8,7,.96); border-top:1px solid rgba(207,183,158,.16); }
}