@import url('../fonts/fonts.css');

/* ════════════════════════════════════════════════════════════
   AVERRUNES — Website
   Erde, Pergament, Gold. Warm, alt, handgemacht.
   ════════════════════════════════════════════════════════════ */

:root{
  /* Erde */
  --earth-0:#140f0a;
  --earth-1:#1e1710;
  --earth-2:#2a2018;
  --earth-3:#3a2c1e;
  --earth-4:#4a3826;

  /* Pergament */
  --paper-1:#f6ecd6;
  --paper-2:#efe1c4;
  --paper-3:#e7d4ad;
  --paper-edge:#d8bf90;

  /* Tinte */
  --ink:#2a2018;
  --ink-2:#4a3a28;
  --ink-muted:#7a654a;

  /* Gold */
  --gold:#b8912f;
  --gold-2:#c9a349;
  --gold-3:#e3c874;
  --gold-deep:#8a6a1e;

  --rune:#4f6f8a;

  --warm-text:#e8d9bd;
  --warm-muted:#b09775;

  /* eine Breite für alles — Header und Inhalt stehen in derselben Flucht */
  --content:1120px;
  --gutter:2rem;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  font-family:'EB Garamond',Georgia,'Times New Roman',serif;
  color:var(--warm-text);
  background:var(--earth-1);
  line-height:1.78;font-size:19px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;

  /* Die Seite ist immer mindestens bildschirmhoch, der Fuß sitzt unten.
     Bei kurzen Seiten (Fehlerseite, Impressum) hängt er sonst in der Luft. */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body > main{flex:1 0 auto}
body > footer{margin-top:auto;flex-shrink:0}

h1,h2,h3,h4{font-family:'Cinzel',Georgia,serif;font-weight:600;letter-spacing:.02em;line-height:1.25}
a{
  color:inherit;
  /* Unterstriche sitzen drei Pixel tiefer, damit sie die Unterlängen
     der Schrift nicht berühren */
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
img{max-width:100%}

.wrap{max-width:var(--content);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}

/* Tastatur-Fokus sichtbar lassen */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold-2);outline-offset:3px;border-radius:4px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--paper-1);color:var(--ink);padding:.7rem 1.2rem;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

/* ═══════════ Kopfleiste ═══════════ */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:center;
  padding:.9rem 0;
  background:rgba(24,18,12,0);
  border-bottom:1px solid rgba(216,191,144,0);
  backdrop-filter:blur(0);
  transition:background .5s ease,border-color .5s ease,backdrop-filter .5s ease,padding .5s ease;
}
/* Über dem Titelbild trägt ein weicher Schleier die Schrift. Er reicht über
   die Leiste hinaus und läuft nach unten völlig aus, damit keine Kante entsteht. */
header::before{
  content:'';position:absolute;left:0;right:0;top:0;height:190px;
  pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(14,10,6,.66) 0%,
    rgba(14,10,6,.44) 26%,
    rgba(14,10,6,.20) 55%,
    rgba(14,10,6,.06) 78%,
    rgba(14,10,6,0) 100%);
  transition:opacity .5s ease;
}
body.scrolled header::before,
body.solid-header header::before{opacity:0}

body.scrolled header,
body.solid-header header{
  background:rgba(24,18,12,.9);
  border-bottom-color:rgba(216,191,144,.16);
  backdrop-filter:blur(10px);
  padding:.65rem 0;
}
.bar{
  max-width:var(--content);margin:0 auto;width:100%;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.bar .side{display:flex;align-items:center;gap:2.2rem}
.bar-logo-link{display:block;line-height:0}
.bar-logo{
  height:clamp(24px,2.4vw,36px);width:auto;display:block;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.9));
}

nav{display:flex;gap:2.2rem;align-items:center}
nav a{
  color:var(--warm-text);text-decoration:none;font-size:1rem;
  text-shadow:0 1px 5px rgba(0,0,0,.85);
  letter-spacing:.06em;opacity:.82;padding-bottom:6px;
  border-bottom:1px solid transparent;transition:.25s;white-space:nowrap;
}
nav a:hover,nav a.here{opacity:1;color:var(--gold-3);border-bottom-color:var(--gold)}

.song{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--gold-3);font-size:.95rem;letter-spacing:.05em;
  background:rgba(20,15,10,.35);border:1px solid rgba(201,163,73,.4);
  border-radius:999px;padding:.34rem 1rem;cursor:pointer;
  font-family:inherit;transition:.25s;backdrop-filter:blur(4px);white-space:nowrap;
}
.song:hover{border-color:var(--gold-2);background:rgba(201,163,73,.14)}
.song[aria-pressed="true"]{background:rgba(184,145,47,.25);border-color:var(--gold-2);color:#f6ecd6}

/* Sprachschalter: beide Sprachen, getrennt durch einen Strich,
   die aktuelle fett. */
.lang{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
.lang a{
  font-size:.92rem;letter-spacing:.06em;color:var(--warm-muted);
  text-decoration:none;padding-bottom:5px;
  text-shadow:0 1px 5px rgba(0,0,0,.85);
  border-bottom:1px solid transparent;transition:.25s;
}
.lang a:hover{color:var(--gold-3);border-bottom-color:var(--gold)}
.lang a.on{
  color:var(--paper-2);font-weight:600;
  letter-spacing:.05em;cursor:default;
}
.lang a.on:hover{border-bottom-color:transparent}
.lang .sep{color:rgba(216,191,144,.35);font-size:.9rem;line-height:1}

/* ═══════════ Hero (Startseite) ═══════════ */
.hero{
  position:relative;z-index:5;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.hero-img{position:absolute;inset:0;background:center 40%/cover no-repeat}
.hero-tint{
  position:absolute;inset:0;
  /* Das Bild bleibt oben und in der Mitte unangetastet. Erst nach unten hin
     wird es dunkler, damit der Text lesbar ist und der Übergang zum nächsten
     Abschnitt ohne Kante gelingt. Ganz oben nur ein Hauch für die Kopfleiste. */
  background:linear-gradient(to bottom,
    rgba(18,13,8,.42)  0%,
    rgba(18,13,8,.10)  9%,
    rgba(18,13,8,0)   26%,
    rgba(20,15,10,.10) 42%,
    rgba(22,16,11,.34) 56%,
    rgba(24,18,12,.62) 70%,
    rgba(26,19,13,.88) 83%,
    #1e1710 95%,
    #1e1710 100%);
}
.hero-inner{
  position:relative;z-index:3;max-width:820px;
  padding:0 var(--gutter) 4rem;
  /* Logo und Text sitzen 100 px unter der Mitte */
  transform:translateY(100px);
}
@media (max-width:900px){ .hero-inner{transform:translateY(60px)} }
/* Kein Tuch über dem ganzen Bild, sondern nur ein weicher Schatten
   direkt hinter der Schrift. Läuft nach außen völlig aus. */
.hero-inner::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-12%;right:-12%;top:32%;bottom:-4%;
  background:radial-gradient(ellipse 54% 62% at 50% 46%,
    rgba(12,8,5,.55) 0%,
    rgba(12,8,5,.34) 48%,
    rgba(12,8,5,.13) 70%,
    transparent 86%);
}
.hero .logo{width:min(600px,78vw);height:auto}
.hero .claim{margin-top:1.7rem;font-size:1.22rem;font-style:italic;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 24px rgba(0,0,0,.95)}
.hero .sub{margin-top:.8rem;font-size:1rem;color:var(--warm-muted);letter-spacing:.1em;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.95)}
/* Kreis mit Pfeil am Fuß des Titelbildes.
   Sitzt 80 px höher als die Bildkante und wabbert leicht. */
.scroll-hint{
  position:absolute;left:50%;bottom:51px;z-index:6;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(216,191,144,.42);
  background:rgba(20,15,10,.42);
  backdrop-filter:blur(5px);
  color:var(--gold-3);
  transition:border-color .3s ease,background .3s ease,color .3s ease;
  animation:wabbern 3.6s ease-in-out infinite;
}
.scroll-hint svg{
  width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.scroll-hint:hover{
  border-color:var(--gold-2);
  background:rgba(184,145,47,.22);
  color:var(--paper-1);
}
@keyframes wabbern{
  0%,100%{transform:translate(-50%,-12px);opacity:.78}
  50%    {transform:translate(-50%,12px); opacity:1}
}

/* Anhör-Knopf im Hero */
.listen{
  margin-top:2.4rem;display:inline-flex;align-items:center;gap:.9rem;
  color:var(--paper-2);text-decoration:none;font-size:1.05rem;
  border:1px solid rgba(216,191,144,.45);border-radius:999px;
  padding:.72rem 1.7rem;backdrop-filter:blur(4px);
  background:rgba(20,15,10,.28);transition:.3s;cursor:pointer;font-family:inherit;
}
.listen:hover{border-color:var(--gold-2);background:rgba(184,145,47,.18);color:#fff}
.listen .play{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--gold-2);color:var(--gold-3);
  display:grid;place-items:center;font-size:.6rem;padding-left:2px;
}

/* ═══════════ Der Farbverlauf der Startseite ═══════════ */
body.page-index{
  background:
    linear-gradient(to bottom,
      #1e1710  0%,
      #1e1710 17%,
      #382a1c 24%,
      #40301f 29%,
      #241a11 37%,
      #150f09 44%,
      #1b140d 50%,
      #2c2115 57%,
      #3d2e1e 65%,
      #33261a 72%,
      #201810 83%,
      #17110b 93%,
      #100c07 100%);
  background-repeat:no-repeat;
}

/* ═══════════ Abschnitte ═══════════ */
section{position:relative;padding:6rem 0;z-index:2}
.glowspot{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(95px)}

.eyebrow{
  font-family:'Cinzel',serif;font-size:.74rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);opacity:.9;margin-bottom:1rem;
}
h2{font-size:2.45rem;color:var(--paper-2);margin-bottom:1.4rem}
p{margin-bottom:1.15rem;opacity:.94}
p.lead{font-size:1.13rem}
.muted{color:var(--warm-muted)}

.split{display:grid;grid-template-columns:1.02fr 1fr;gap:4rem;align-items:center}
.cont{margin-top:2.2rem}
.cont p{max-width:720px}
.bleed{position:relative}
.bleed img{
  width:100%;height:auto;display:block;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 40%,rgba(0,0,0,.5) 72%,transparent 95%);
          mask-image:radial-gradient(ellipse at 50% 50%,#000 40%,rgba(0,0,0,.5) 72%,transparent 95%);
}
.bleed::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 55%, rgba(184,145,47,.14) 0%, transparent 62%);
}

.more{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:.6rem;
  color:var(--gold-3);text-decoration:none;font-size:1.03rem;
  border-bottom:1px solid rgba(201,163,73,.35);padding-bottom:6px;transition:.25s;
}
.more:hover{border-bottom-color:var(--gold-2);color:#f2e2b8}

/* ═══════════ Die fünf hohen Runen ═══════════ */
.runen{padding:6.5rem 0;text-align:center}
.runen em{font-style:italic;color:var(--paper-2);opacity:.95}
.runen-grid{display:flex;justify-content:center;align-items:flex-start;gap:2.6rem;flex-wrap:wrap;margin-top:3rem}
.rune{width:132px;display:block;text-decoration:none}
.rune img{
  width:112px;height:112px;object-fit:contain;display:block;margin:0 auto .9rem;
  filter:drop-shadow(0 0 18px rgba(0,0,0,.6));
  transition:transform .45s ease;
}
.rune:hover img{transform:translateY(-6px) scale(1.06)}
.rune .name{font-family:'Cinzel',serif;font-size:.94rem;color:var(--paper-2);letter-spacing:.06em;display:block;margin-bottom:.25rem}
.rune .was{font-size:.83rem;color:var(--warm-muted);line-height:1.5;display:block}
.rune.leer .ring{
  width:112px;height:112px;margin:0 auto .9rem;border-radius:50%;
  border:1px dashed rgba(216,191,144,.34);display:grid;place-items:center;
  background:radial-gradient(circle,rgba(216,191,144,.05) 0%,transparent 68%);
}
.rune.leer .ring span{font-family:'Cinzel',serif;font-size:1.6rem;color:rgba(216,191,144,.4)}
.rune.leer .name{color:var(--warm-muted)}

/* ═══════════ Zitat ═══════════ */
.quote{padding:5.5rem 0;text-align:center}
.quote blockquote{font-size:1.7rem;font-style:italic;color:var(--paper-2);max-width:760px;margin:0 auto;line-height:1.55}
.quote cite{
  display:block;margin-top:1.4rem;font-style:normal;font-size:.8rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.8;font-family:'Cinzel',serif;
}

/* ═══════════ Galerie ═══════════ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.6rem}
.gallery button{
  display:block;border:0;padding:0;background:none;cursor:pointer;
  border-radius:8px;overflow:hidden;position:relative;width:100%;
}
.gallery img{
  width:100%;height:240px;object-fit:cover;display:block;
  filter:saturate(.88) brightness(.9);transition:.5s ease;
}
.gallery button:hover img{filter:saturate(1) brightness(1);transform:scale(1.03)}
.gallery button::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(216,191,144,.16), inset 0 -40px 50px -20px rgba(20,15,10,.7);
}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;
  font-size:.86rem;color:var(--paper-2);text-align:left;
  text-shadow:0 1px 6px rgba(0,0,0,.9);pointer-events:none;
}

/* Lichtkasten */
.lightbox{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:3rem 1.5rem;
  background:rgba(12,9,6,.94);backdrop-filter:blur(6px);
}
.lightbox[open],.lightbox.on{display:flex}
.lightbox img{max-width:min(1400px,94vw);max-height:82vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lightbox .cap{position:absolute;bottom:1.6rem;left:0;right:0;text-align:center;color:var(--warm-muted);font-size:.95rem}
.lb-btn{
  position:absolute;background:none;border:1px solid rgba(216,191,144,.3);color:var(--paper-2);
  width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.2rem;
  display:grid;place-items:center;transition:.25s;font-family:inherit;
}
.lb-btn:hover{border-color:var(--gold-2);background:rgba(184,145,47,.16)}
.lb-close{top:1.4rem;right:1.6rem}
.lb-prev{left:1.6rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.6rem;top:50%;transform:translateY(-50%)}

/* ═══════════ YouTube-Kasten ═══════════ */
.yt-box{
  width:100%;display:flex;align-items:center;gap:2.4rem;
  padding:2.6rem 2.8rem;border-radius:14px;
  background:linear-gradient(140deg, rgba(74,56,38,.55) 0%, rgba(36,27,18,.6) 100%);
  box-shadow:0 22px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(216,191,144,.18), 0 0 70px rgba(184,145,47,.08);
}
.yt-box .icon{
  flex:0 0 auto;width:78px;height:78px;border-radius:50%;
  border:1px solid rgba(201,163,73,.45);
  background:radial-gradient(circle,rgba(184,145,47,.16) 0%,transparent 70%);
  display:grid;place-items:center;color:var(--gold-3);font-size:1.5rem;padding-left:5px;
}
.yt-box h3{font-size:1.5rem;color:var(--paper-2);margin-bottom:.5rem}
.yt-box p{margin-bottom:1.2rem;color:var(--warm-muted);font-size:1.02rem}
.yt-btn{
  display:inline-flex;align-items:center;gap:.7rem;
  color:var(--paper-1);text-decoration:none;font-size:1.02rem;
  border:1px solid rgba(216,191,144,.45);border-radius:999px;padding:.6rem 1.5rem;transition:.3s;
}
.yt-btn:hover{border-color:var(--gold-2);background:rgba(184,145,47,.18)}

/* ═══════════ Fuß ═══════════ */
footer{padding:4rem 0 3.5rem;text-align:center;position:relative}
/* feine goldene Linie über dem Fuß, genau so breit wie der Inhalt oben */
footer .wrap::before{
  content:'';display:block;height:1px;margin:0 0 3.2rem;
  background:linear-gradient(to right,
    transparent 0%,
    rgba(184,145,47,.35) 12%,
    rgba(227,200,116,.65) 50%,
    rgba(184,145,47,.35) 88%,
    transparent 100%);
}
footer .flogo{width:210px;opacity:.6;margin-bottom:1.4rem}
footer p{font-size:.92rem;color:var(--warm-muted)}
footer a{color:var(--gold-3);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ════════════════════════════════════════════════════════════
   CHRONIK — Pergament auf dunklem Grund
   ════════════════════════════════════════════════════════════ */
body.page-chronik{
  background:
    radial-gradient(ellipse 90% 46% at 14% 6%,  rgba(78,58,38,.55) 0%, transparent 58%),
    radial-gradient(ellipse 80% 46% at 88% 55%, rgba(62,46,30,.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 10% 96%, rgba(58,44,28,.4)  0%, transparent 55%),
    linear-gradient(168deg,#2c2117 0%,#1e1710 42%,#191108 100%);
  background-attachment:fixed;
}
.page-head{padding:9rem 0 1rem;text-align:center}
.page-head h1{font-size:2.9rem;color:var(--paper-2);margin-bottom:.7rem}
.page-head p{color:var(--warm-muted);max-width:640px;margin:0 auto}

/* Lesebereich — kein Pergament, gleiche Sprache wie die Startseite */
.shell{
  max-width:var(--content);margin:1.5rem auto 4rem;
  padding:0 var(--gutter);
}
.shell .chapter,.shell .era,.shell .divider{max-width:780px;margin-left:auto;margin-right:auto}
.shell .chapter{position:relative;padding:4rem 0 3.5rem}
.shell .chapter:first-child{padding-top:1.5rem}
.shell .watermark{
  position:absolute;top:2.6rem;right:0;font-family:'Cinzel',serif;
  font-size:5rem;color:rgba(216,191,144,.09);line-height:1;
  pointer-events:none;user-select:none;
}
.shell .eyebrow{color:var(--gold);opacity:.9;margin-bottom:.6rem}
.shell h2{font-size:2.1rem;color:var(--paper-2);margin-bottom:1.3rem}
.shell h3{font-size:1.3rem;color:var(--paper-2);margin:2.4rem 0 .9rem}
.shell p{color:var(--warm-text);opacity:.9;margin-bottom:1.15rem}
.shell .name{color:var(--gold-3);font-weight:500}
.shell .unterschrift{
  margin-top:1.6rem;font-style:italic;color:var(--warm-muted);text-align:right;
}
.shell .divider{
  height:1px;margin:0;
  background:linear-gradient(to right,transparent,rgba(216,191,144,.28),transparent);
}
.shell .era{text-align:center;padding:4.5rem 0 2.5rem}
.shell .era .label{
  font-family:'Cinzel',serif;font-size:1.1rem;color:var(--gold-3);
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:.8rem;
}
.shell .era .sub{color:var(--warm-muted);max-width:520px;margin:0 auto;font-style:italic}

/* ═══════════ Anhör-Knopf im Text ═══════════ */
.hear{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:inherit;font-size:.92rem;cursor:pointer;
  color:var(--gold-deep);background:rgba(216,191,144,.16);
  border:1px solid var(--paper-edge);border-radius:999px;
  padding:.35rem 1rem .35rem .5rem;margin-bottom:1.4rem;transition:.25s;
}
.hear:hover{background:var(--paper-3);border-color:var(--gold)}
.hear .ic{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(138,106,30,.5);display:grid;place-items:center;
  font-size:.55rem;padding-left:2px;
}
.hear[aria-pressed="true"]{background:var(--gold);border-color:var(--gold-deep);color:#fff8e6}
.hear[aria-pressed="true"] .ic{border-color:rgba(255,255,255,.6)}
.hear .lbl{white-space:nowrap}

/* auf dunklem Grund */
.hear.dark{
  color:var(--warm-muted);background:rgba(216,191,144,.06);
  border-color:rgba(216,191,144,.28);
}
.hear.dark:hover{color:var(--gold-3);border-color:var(--gold-2);background:rgba(184,145,47,.14)}
.hear.dark[aria-pressed="true"]{background:rgba(184,145,47,.3);color:var(--paper-1)}
.hear.dark .ic{border-color:rgba(216,191,144,.4)}

/* laufender Balken unter einem spielenden Knopf */
.audio-bar{
  display:block;height:2px;margin-top:.5rem;border-radius:2px;
  background:rgba(138,106,30,.2);overflow:hidden;
}
.audio-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}

/* ═══════════ Einfache Textseiten ═══════════ */
body.page-text{
  background:linear-gradient(160deg,#2a2018 0%,#1c150e 60%,#140f0a 100%);
}
.textpage{max-width:var(--content);margin:0 auto;padding:9rem var(--gutter) 5rem}
.textpage > *{max-width:760px}

/* Fehlerseite: eigener Verlauf aus zwei Brauntönen, warm oben, tief unten */
body.page-404{
  background:
    radial-gradient(ellipse 75% 55% at 50% 22%, rgba(128,92,52,.38) 0%, transparent 68%),
    radial-gradient(ellipse 60% 45% at 88% 92%, rgba(74,56,38,.35) 0%, transparent 60%),
    linear-gradient(168deg, #4a3826 0%, #3a2c1e 26%, #2a2018 55%, #1c150e 80%, #140f0a 100%);
  background-attachment:fixed;
}

/* Fehlerseite: Inhalt steht mittig, nicht an der linken Textkante */
.textpage.errpage{text-align:center}
.textpage.errpage > *{margin-left:auto;margin-right:auto}

/* die fünf Runen als ruhiger Abschluss */
.err-runen{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(1rem,4vw,2.6rem);flex-wrap:wrap;
  margin:4rem auto 0;max-width:760px;
}
.err-runen img{
  width:clamp(52px,7vw,78px);height:auto;display:block;
  filter:drop-shadow(0 0 16px rgba(0,0,0,.55));
  opacity:.85;transition:transform .5s ease,opacity .5s ease;
}
.err-runen img:hover{opacity:1;transform:translateY(-5px) scale(1.05)}
.textpage h1{font-size:2.4rem;color:var(--paper-2);margin-bottom:2rem}
.textpage h2{font-size:1.35rem;color:var(--paper-2);margin:2.4rem 0 .8rem}
.textpage p,.textpage li{color:var(--warm-text);opacity:.92}
.textpage ul{margin:0 0 1.2rem 1.2rem}
.textpage a{color:var(--gold-3)}
.textpage .todo{
  border:1px dashed rgba(216,191,144,.4);border-radius:8px;
  padding:1rem 1.2rem;margin:1.2rem 0;color:var(--gold-3);font-size:.95rem;
}

/* ═══════════ Bildergalerie-Seite ═══════════ */
.gallery-page{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:3rem;max-width:var(--content)}
.gallery-page button{
  display:block;border:0;padding:0;background:none;cursor:pointer;
  border-radius:10px;overflow:hidden;position:relative;width:100%;
}
.gallery-page img{width:100%;height:330px;object-fit:cover;display:block;transition:.5s ease;filter:saturate(.9) brightness(.92)}
.gallery-page button:hover img{filter:none;transform:scale(1.03)}
.gallery-page button::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(216,191,144,.16), inset 0 -60px 70px -25px rgba(20,15,10,.75);
}
.gallery-page figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;text-align:left;
  color:var(--paper-2);font-size:.98rem;text-shadow:0 1px 8px rgba(0,0,0,.9);pointer-events:none;
}

/* ═══════════ Schmale Bildschirme ═══════════ */
@media (max-width:900px){
  body{font-size:17px}
  :root{--gutter:1.2rem}
  nav{gap:1.2rem}
  nav a{font-size:.92rem}
  .bar .side{gap:1.1rem}
  .lang a{font-size:.84rem}
  .lang{gap:.4rem}
  .split{grid-template-columns:1fr;gap:2.4rem}
  .gallery{grid-template-columns:1fr}
  .gallery-page{grid-template-columns:1fr}
  .gallery-page img{height:240px}
  h2{font-size:1.85rem}
  .page-head h1{font-size:2.1rem}
  .quote blockquote{font-size:1.28rem}
  .yt-box{flex-direction:column;text-align:center;gap:1.4rem;padding:2.2rem 1.4rem}
  .shell{padding:2.4rem 1.4rem}
  .shell .watermark{font-size:3rem;opacity:.7}
  @media (max-width:560px){
  .bar nav{display:none}
  .rune{width:110px}
  .rune img,.rune.leer .ring{width:88px;height:88px}
}