/* =========================================================
   Cabala Serpentis — Staatscabal Laikerias
   Basis-Stylesheet
   Reihenfolge: Tokens · Reset · Typografie · Layout ·
   Navigation · Hero · Komponenten · Footer · Utilities
   ========================================================= */

/* ---------------------------------------------------------
   1. Design-Tokens
   --------------------------------------------------------- */
:root{
  /* Flächen */
  --bg-0:#050e09;
  --bg-1:#0a1a11;
  --bg-2:#0f2117;
  --panel:#0c1f15;
  --panel-hi:#112a1c;
  --panel-line:rgba(196,201,190,0.13);
  --panel-line-hi:rgba(194,168,96,0.34);

  /* Schrift- und Akzentfarben */
  --silver:#cbd2c8;
  --silver-bright:#f1f3ee;
  --silver-dim:#8fa090;
  --gold-hint:#c2a860;
  --gold-bright:#dcc384;
  --blood:#7a2f2f;
  --green-accent:#3f6b4b;

  /* Schriften */
  --font-display:'Cinzel','Trajan Pro','Times New Roman',serif;
  --font-body:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  /* Fließende Typografie */
  --fs-base:clamp(17px,0.95rem + 0.35vw,19px);
  --fs-h1:clamp(2.05rem,1.3rem + 3.4vw,3.2rem);
  --fs-h2:clamp(1.55rem,1.15rem + 1.5vw,1.95rem);
  --fs-lead:clamp(1.05rem,1rem + 0.35vw,1.18rem);

  /* Abstände */
  --sp-section:clamp(48px,7vw,76px);
  --sp-gutter:clamp(20px,4vw,28px);
  --measure:940px;

  /* Sonstiges */
  --nav-h:64px;
  --radius:2px;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
}

/* ---------------------------------------------------------
   2. Reset / Grundlagen
   --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(63,107,75,0.22), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(194,168,96,0.05), transparent 45%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 30%, var(--bg-2) 100%);
  background-attachment:fixed;
  color:var(--silver);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
}

img{max-width:100%;}

::selection{
  background:rgba(194,168,96,0.28);
  color:var(--silver-bright);
}

/* Sichtbarer Fokus für Tastaturnutzung */
:focus-visible{
  outline:2px solid var(--gold-hint);
  outline-offset:3px;
  border-radius:1px;
}

/* Sprunglink zum Inhalt */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:300;
  background:var(--panel-hi);
  color:var(--gold-bright);
  font-family:var(--font-display);
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:12px 20px;
  border:1px solid var(--gold-hint);
  text-decoration:none;
}
.skip-link:focus{left:12px;top:12px;}

/* ---------------------------------------------------------
   3. Typografie
   --------------------------------------------------------- */
h1,h2,h3,.brand{
  font-family:var(--font-display);
  color:var(--silver-bright);
  letter-spacing:0.03em;
  font-weight:600;
  text-wrap:balance;
}

h2{
  font-size:var(--fs-h2);
  margin:0 0 24px;
  line-height:1.25;
}

p{text-wrap:pretty;}

a{
  color:var(--gold-hint);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .2s var(--ease);
}
a:hover{color:var(--gold-bright);}

.small-note{
  color:var(--silver-dim);
  font-size:0.92rem;
}

/* Lateinische Wendungen im Fließtext */
.lat{font-style:italic;}

/* ---------------------------------------------------------
   4. Layout
   --------------------------------------------------------- */
.container{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--sp-gutter);
}

section{
  padding:var(--sp-section) 0;
  border-bottom:1px solid var(--panel-line);
  scroll-margin-top:calc(var(--nav-h) + 14px);
}
section:last-of-type{border-bottom:none;}

section p{margin:0 0 18px;color:var(--silver);}
section p:last-child{margin-bottom:0;}
section p.lead{
  font-size:var(--fs-lead);
  color:var(--silver-bright);
}

/* ---------------------------------------------------------
   5. Navigation
   --------------------------------------------------------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(5,14,9,0.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--panel-line);
}
/* Die Leiste darf breiter laufen als der Lesetext, damit die acht
   Menüpunkte auf dem Desktop in einer Zeile bleiben. */
.site-nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  max-width:1200px;
  min-height:var(--nav-h);
  padding-top:10px;
  padding-bottom:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:clamp(0.92rem,0.85rem + 0.3vw,1.1rem);
  text-transform:uppercase;
  letter-spacing:0.12em;
  text-decoration:none;
  color:var(--silver-bright);
  white-space:nowrap;
}
.brand img{
  width:26px;
  height:auto;
  flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(194,168,96,0.28));
}
.brand:hover{color:var(--gold-bright);}

.navlinks{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-family:var(--font-display);
  font-size:0.68rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
}
.navlinks a{
  color:var(--silver-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.navlinks a:hover{color:var(--gold-hint);border-color:var(--gold-hint);}
.navlinks a.active{color:var(--gold-hint);border-color:var(--gold-hint);}

/* Umschalter für die mobile Navigation */
.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  background:transparent;
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  color:var(--silver-dim);
  font-family:var(--font-display);
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:9px 13px;
  cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:hover{color:var(--gold-hint);border-color:var(--panel-line-hi);}
.nav-toggle .bars{
  position:relative;
  width:16px;
  height:11px;
  flex-shrink:0;
}
.nav-toggle .bars span{
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:currentColor;
  transition:transform .3s var(--ease), opacity .2s linear;
}
.nav-toggle .bars span:nth-child(1){top:0;}
.nav-toggle .bars span:nth-child(2){top:5px;}
.nav-toggle .bars span:nth-child(3){top:10px;}
.nav-toggle[aria-expanded="true"]{color:var(--gold-hint);border-color:var(--panel-line-hi);}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* Unterhalb dieser Breite passen die acht Menüpunkte nicht mehr
   nebeneinander – ab hier übernimmt das Klappmenü. Alles davon hängt an
   der Klasse .js: ohne JavaScript bliebe das Menü sonst zugeklappt und
   die Links unerreichbar. */
@media (max-width:1020px){
  .js .nav-toggle{display:inline-flex;}
  .js .navlinks{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    gap:0;
    background:rgba(5,14,9,0.98);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--panel-line);
    padding:6px var(--sp-gutter) 18px;
    font-size:0.74rem;
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    transition:max-height .35s var(--ease), visibility 0s linear .35s;
  }
  .js .navlinks.open{
    max-height:70vh;
    overflow-y:auto;
    visibility:visible;
    transition:max-height .35s var(--ease), visibility 0s linear 0s;
  }
  .js .navlinks a{
    padding:13px 0;
    border-bottom:1px solid var(--panel-line);
  }
  .js .navlinks a:last-child{border-bottom:none;}
  .js .navlinks a:hover,
  .js .navlinks a.active{border-color:var(--panel-line-hi);}
}

/* ---------------------------------------------------------
   6. Fortschrittsbalken und Sprung nach oben
   --------------------------------------------------------- */
#scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:100%;
  background:linear-gradient(90deg, var(--green-accent), var(--gold-hint));
  transform:scaleX(0);
  transform-origin:0 0;
  z-index:200;
  box-shadow:0 0 8px rgba(194,168,96,0.5);
  pointer-events:none;
}

#to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--gold-hint);
  background:rgba(10,26,17,0.85);
  color:var(--gold-hint);
  font-family:var(--font-display);
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease);
  z-index:90;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
#to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
#to-top:hover{background:rgba(63,107,75,0.45);}

/* ---------------------------------------------------------
   7. Einblend-Animationen und Seitenumschaltung
   --------------------------------------------------------- */
.js .card,
.js .tl-item,
.js .banner-wrap,
.js .symbol-wrap,
.js section h2{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js .card.in-view,
.js .tl-item.in-view,
.js .banner-wrap.in-view,
.js .symbol-wrap.in-view,
.js section h2.in-view{
  opacity:1;
  transform:translateY(0);
}

/* Jeder Abschnitt ist eine eigene Unterseite, die über die Menüleiste kommt */
.js .page{
  display:none;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.js .page.active{display:block;}
.js .page.visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------------------------------------------------------
   8. Hero
   --------------------------------------------------------- */
header.hero{
  text-align:center;
  padding:clamp(56px,9vw,90px) 20px clamp(48px,6vw,64px);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--panel-line);
}
header.hero .container{position:relative;z-index:1;}

#embers{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0.6;
}
header.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(115deg,
    rgba(207,214,205,0.02) 0px, rgba(207,214,205,0.02) 1px,
    transparent 1px, transparent 90px);
  pointer-events:none;
}

.auryn-hero{
  width:auto;
  height:clamp(112px,17vw,150px);
  margin:0 auto 26px;
  display:block;
  filter:drop-shadow(0 0 22px rgba(194,168,96,0.25))
         drop-shadow(0 0 40px rgba(63,107,75,0.4));
}

header.hero h1{
  font-size:var(--fs-h1);
  margin:0 0 8px;
  line-height:1.1;
  text-shadow:0 0 30px rgba(194,168,96,0.16);
}
header.hero .subtitle{
  font-family:var(--font-display);
  font-size:clamp(0.74rem,0.68rem + 0.3vw,0.88rem);
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--gold-hint);
  margin-bottom:22px;
}
header.hero .lede{
  max-width:620px;
  margin:0 auto;
  color:var(--silver-dim);
  font-size:var(--fs-lead);
  font-style:italic;
}
/* Ornament-Trenner */
.rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:30px auto 0;
  max-width:340px;
  color:var(--gold-hint);
  opacity:0.55;
}
.rule::before,
.rule::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, currentColor);
}
.rule::after{background:linear-gradient(270deg, transparent, currentColor);}
.rule svg{width:16px;height:16px;flex-shrink:0;}

/* ---------------------------------------------------------
   9. Zeitleiste (Geschichte)
   --------------------------------------------------------- */
.timeline{
  margin-top:30px;
  border-left:1px solid var(--panel-line);
  padding-left:26px;
}
.tl-item{
  position:relative;
  padding-bottom:26px;
}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";
  position:absolute;
  left:-31px;
  top:9px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold-hint);
  box-shadow:0 0 8px rgba(194,168,96,0.5);
}
.tl-year{
  font-family:var(--font-display);
  font-size:0.78rem;
  letter-spacing:0.08em;
  color:var(--gold-hint);
  margin-bottom:4px;
}
.tl-item p{margin:0;font-size:1rem;color:var(--silver);}

/* ---------------------------------------------------------
   10. Karten
   --------------------------------------------------------- */
.grid2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin-top:28px;
}
.card{
  background:linear-gradient(180deg, var(--panel), rgba(12,31,21,0.4));
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:24px 22px;
  position:relative;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-hint), transparent);
  opacity:0.45;
  transition:opacity .3s var(--ease);
}
.card:hover{
  border-color:var(--panel-line-hi);
  background:linear-gradient(180deg, var(--panel-hi), rgba(12,31,21,0.5));
}
.card:hover::before{opacity:0.9;}
.card h3{font-size:1rem;margin:0 0 10px;}
.card p{font-size:0.96rem;color:var(--silver-dim);margin:0;}

/* ---------------------------------------------------------
   11. Banner und Wahrzeichen
   --------------------------------------------------------- */
.banner-wrap{
  display:grid;
  grid-template-columns:1fr 200px;
  gap:36px;
  align-items:start;
  margin-top:6px;
}
.banner-wrap .banner-img{
  border:1px solid var(--panel-line);
  padding:8px;
  background:var(--panel);
}
.banner-wrap .banner-img img{
  width:100%;
  height:auto;
  display:block;
}
.banner-wrap .banner-img .cap{
  text-align:center;
  font-family:var(--font-display);
  font-size:0.62rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--silver-dim);
  margin-top:8px;
}
@media (max-width:700px){
  .banner-wrap{grid-template-columns:1fr;gap:24px;}
  .banner-wrap .banner-img{order:-1;max-width:220px;margin:0 auto;}
}

.symbol-wrap{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:44px;
  align-items:center;
  margin-top:20px;
}
.symbol-wrap .auryn-box{
  width:200px;
  height:200px;
  margin:0 auto;
  padding:22px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(63,107,75,0.32), rgba(5,14,9,0.9) 70%);
  border:1px solid var(--panel-line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.symbol-wrap .auryn-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(194,168,96,0.28));
}
@media (max-width:700px){
  .symbol-wrap{grid-template-columns:1fr;gap:28px;text-align:center;}
}

/* ---------------------------------------------------------
   12. Footer
   --------------------------------------------------------- */
.site-footer{
  text-align:center;
  padding:44px 20px 60px;
  color:var(--silver-dim);
  font-size:0.83rem;
  border-top:1px solid var(--panel-line);
}
.site-footer img{
  width:34px;
  height:auto;
  margin:0 auto 14px;
  display:block;
  opacity:0.7;
}
.site-footer p{margin:4px 0;}
.site-footer nav{
  margin-top:16px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  font-family:var(--font-display);
  font-size:0.64rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.site-footer nav a{
  color:var(--silver-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-footer nav a:hover{color:var(--gold-hint);border-color:var(--gold-hint);}

/* ---------------------------------------------------------
   13. Rechtliche Seiten (Impressum, Datenschutz)
   --------------------------------------------------------- */
.legal h3{
  font-size:1rem;
  margin:26px 0 8px;
}
.legal ul{
  margin:0 0 18px;
  padding-left:22px;
}
.legal li{margin-bottom:6px;}

/* Der Ersatzhinweis neben der E-Mail-Adresse gilt nur für Besucher ohne
   JavaScript. Browser blenden noscript-Inhalte bei aktivem JavaScript von
   sich aus aus – hier steht es zusätzlich ausdrücklich. */
.js .mail + noscript{display:none;}

/* ---------------------------------------------------------
   14. Bildtafeln (Karte, Haupthaus)
   --------------------------------------------------------- */

/* Noch nicht geladene Bilder blenden sich ein, statt aufzuspringen.
   Die Klasse .imgfade setzt main.js selbst, unmittelbar bevor es die
   Ladeüberwachung einhängt. Läuft das Skript nicht – kein JavaScript,
   Datei fehlt, Fehler beim Start –, fehlt auch die Klasse und die Bilder
   sind von Anfang an sichtbar. */
.imgfade main img,
.imgfade .site-footer img{
  opacity:0;
  transition:opacity .45s var(--ease);
}
.imgfade main img.is-loaded,
.imgfade .site-footer img.is-loaded{opacity:1;}
.plate{
  margin:34px 0;
}
.plate img{
  display:block;
  width:100%;
  height:auto;
}
.plate figcaption{
  margin-top:10px;
  font-family:var(--font-display);
  font-size:0.66rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--silver-dim);
  text-align:center;
}
.plate .cap-note{
  display:block;
  margin-top:5px;
  font-family:var(--font-body);
  font-style:italic;
  font-size:0.82rem;
  letter-spacing:normal;
  text-transform:none;
  opacity:0.75;
}

/* Die Zeichnung des Haupthauses hat ausgefranste, ins Dunkel auslaufende
   Ränder – sie steht deshalb ohne Rahmen und darf über den Textspiegel
   hinausragen. */
.plate.bleed{
  margin-inline:calc(var(--sp-gutter) * -1);
  width:calc(100% + 2 * var(--sp-gutter));
}
.plate.bleed figcaption{
  margin-top:2px;
}

/* Die Karte ist eine Schaltfläche: ein Klick öffnet die große Ansicht. */
.plate .plate-zoom{
  display:block;
  position:relative;
  width:100%;
  padding:8px;
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  background:var(--panel);
  transition:border-color .3s var(--ease);
}
/* Ohne JavaScript öffnet sich keine Großansicht – dann bleibt die Tafel
   ein schlichter Rahmen ohne Lupenzeiger und ohne Hinweis. */
.js .plate .plate-zoom{cursor:zoom-in;}
.js .plate .plate-zoom:hover{border-color:var(--panel-line-hi);}
.plate-hint{
  position:absolute;
  right:18px;
  bottom:18px;
  font-family:var(--font-display);
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-bright);
  background:rgba(5,14,9,0.82);
  border:1px solid var(--panel-line-hi);
  padding:7px 12px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.plate-hint{display:none;}
.js .plate-hint{display:block;}
.js .plate .plate-zoom:hover .plate-hint,
.js .plate .plate-zoom:focus-visible .plate-hint{opacity:1;transform:translateY(0);}

/* ---------------------------------------------------------
   15. Großansicht (Dialog)
   --------------------------------------------------------- */
.lightbox{
  width:min(96vw,1600px);
  max-width:none;
  height:min(94vh,1100px);
  max-height:none;
  padding:0;
  border:1px solid var(--panel-line-hi);
  border-radius:var(--radius);
  background:var(--bg-1);
  color:var(--silver);
  overflow:hidden;
}
.lightbox::backdrop{
  background:rgba(3,9,6,0.88);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.lightbox[open]{
  display:flex;
  flex-direction:column;
}
.lightbox-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px 10px 18px;
  border-bottom:1px solid var(--panel-line);
  background:rgba(5,14,9,0.9);
  flex-shrink:0;
}
.lightbox-title{
  margin:0;
  flex:1;
  min-width:0;
  font-family:var(--font-display);
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--silver-dim);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lightbox-zoom,
.lightbox-close{
  background:transparent;
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  color:var(--silver-dim);
  font-family:var(--font-display);
  cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lightbox-zoom{
  font-size:0.62rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:8px 14px;
}
.lightbox-close{
  font-size:1.2rem;
  line-height:1;
  width:38px;
  height:38px;
  flex-shrink:0;
}
.lightbox-zoom:hover,
.lightbox-close:hover,
.lightbox-zoom[aria-pressed="true"]{
  color:var(--gold-hint);
  border-color:var(--panel-line-hi);
}
.lightbox-body{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(63,107,75,0.14), transparent 70%),
    var(--bg-0);
}
.lightbox-body img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  margin:auto;
}
/* Originalgröße: das Bild sprengt den Rahmen, der Bereich wird scrollbar */
.lightbox-body.zoomed{
  align-items:flex-start;
  justify-content:flex-start;
  cursor:grab;
}
.lightbox-body.zoomed img{
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  margin:0;
}

@media (max-width:640px){
  .lightbox{width:100vw;height:100dvh;border:none;}
  .lightbox-zoom{display:none;}
}

/* Auf der Startseite folgt die Fußzeile unmittelbar auf das Titelbild.
   Dessen Unterkante entfällt dort, damit zwischen beiden nur eine Linie
   steht – die Oberkante der Fußzeile – und keine doppelte.
   Ohne JavaScript stehen alle Abschnitte untereinander; dann trennt die
   Linie das Titelbild vom ersten Abschnitt und bleibt erhalten. */
.js.is-start header.hero{border-bottom:none;}

/* ---------------------------------------------------------
   16. Bewegungsreduktion und Druck
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .card,
  .js .tl-item,
  .js .banner-wrap,
  .js .symbol-wrap,
  .js section h2,
  .js .page{
    opacity:1;
    transform:none;
  }
  #embers{display:none;}
}

@media print{
  .site-nav,#to-top,#scroll-progress,#embers,.skip-link,
  .lightbox,.plate-hint{display:none !important;}
  body{background:#fff;color:#000;}
  .js .page{display:block !important;opacity:1 !important;transform:none !important;}
  h1,h2,h3{color:#000;}
  section p{color:#000;}
}