/* ==========================================================================
   Tempelritter Haldensleben – Konzept A „Urkunde & Stein“
   Mobile first · WCAG 2.2 AA · lokale Schriften (OFL)
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
/* Überschriften: Grenze Gotisch (variabel, SIL OFL) – gotische Buchschrift, gut lesbar */
@font-face{font-family:"Grenze Gotisch";src:url(fonts/grenze-gotisch-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/grenze-gotisch-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --parchment:#F4EFE4;   /* Lesegrund */
  --limestone:#E7DFCE;   /* Kalkstein, Wechselband */
  --mantle:#FBFAF6;      /* Mantelweiß */
  --ink:#231F1B;         /* Eisengallustinte – Text (≈15:1 auf parchment) */
  --ink-soft:#544B41;    /* Sekundärtext (≈7.6:1 auf parchment) */
  --rule:#CBBFA8;        /* Linien */
  --red:#9E1B1E;         /* Templerrot (≈6.9:1 auf parchment) */
  --red-deep:#7C1417;
  --red-light:#E8705F;   /* Rot auf Basalt (≈5.4:1) */
  --basalt:#1B1916;      /* dunkles Band */
  --basalt-2:#26231F;
  --on-dark:#EDE6D8;     /* Text auf Basalt (≈14:1) */
  --on-dark-soft:#BDB3A2;/* (≈8.5:1) */
  --wax:#B8893A;         /* Siegelwachs – nur dekorativ */

  --f-display:"Grenze Gotisch","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-quote:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-ui:"Source Sans 3","Segoe UI",system-ui,sans-serif;

  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1.02rem,.98rem + .2vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .45vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2rem);
  --step-3:clamp(1.9rem,1.5rem + 1.8vw,3rem);
  --step-4:clamp(2.4rem,1.7rem + 3.3vw,4.4rem);

  --gutter:clamp(1rem,.6rem + 2vw,2.5rem);
  --measure:38rem;
  --wrap:76rem;
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--parchment);color:var(--ink);font:400 var(--step-0)/1.65 var(--f-text);font-variant-numeric:oldstyle-nums proportional-nums;text-rendering:optimizeLegibility;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--red-deep);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:var(--radius)}
.dark :focus-visible{outline-color:var(--red-light)}
h1,h2,h3{font-family:var(--f-display);font-weight:500;line-height:1.1;font-variant-numeric:lining-nums;letter-spacing:0;margin:0 0 .5em;hyphens:manual;text-wrap:balance}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:var(--mantle);padding:.7rem 1rem;font-family:var(--f-ui);font-weight:600}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}

/* Kleine Auszeichnung: Kapitälchen-Label (Rubrik) */
.rubric{font:600 var(--step--1)/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem}
.rubric::before{content:"";width:1.6rem;height:1px;background:currentColor}
.dark .rubric{color:var(--red-light)}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft)}
.dark .lead{color:var(--on-dark-soft)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:.65rem 1.2rem;font:600 .95rem/1.2 var(--f-ui);letter-spacing:.02em;text-decoration:none;border:1px solid var(--red);border-radius:var(--radius);background:var(--red);color:var(--mantle);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep);color:var(--mantle)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
.dark .btn--ghost{color:var(--on-dark);border-color:var(--on-dark)}
.dark .btn--ghost:hover{background:var(--on-dark);color:var(--basalt)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link-arrow{font:600 .95rem/1.3 var(--f-ui);text-decoration:none;display:inline-flex;gap:.4rem;align-items:center;min-height:24px}
.link-arrow:hover{text-decoration:underline}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--parchment);border-bottom:1px solid var(--rule)}
/* kein backdrop-filter: würde das fixierte Mobilmenü im Header einschließen */
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.brand img,.brand svg{flex:none;width:2.4rem;height:2.4rem}
.brand-name{display:block;font:500 1.08rem/1 var(--f-display);letter-spacing:.01em;white-space:nowrap}
.brand-sub{display:block;font:500 .68rem/1.25 var(--f-ui);color:var(--ink-soft);letter-spacing:.01em;margin-top:.25rem;max-width:13rem}
@media (min-width:30rem){.brand-name{font-size:1.3rem}.brand-sub{font-size:.72rem;max-width:15rem}}
@media (max-width:47.99rem){.proto-note{left:.75rem;max-width:none;font-size:.75rem;padding:.5rem .8rem}}

.nav-toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem .9rem;font:600 .95rem var(--f-ui);background:transparent;border:1px solid var(--ink);color:var(--ink);border-radius:var(--radius);cursor:pointer}
.nav-toggle .bars{width:1.1rem;height:.7rem;position:relative;border-block:2px solid currentColor}
.nav-toggle .bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor}

/* Mobile: Navigation als ganzseitiges Inhaltsverzeichnis */
.site-nav{position:fixed;inset:0;z-index:60;background:var(--basalt);color:var(--on-dark);padding:1.25rem var(--gutter) 2rem;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .25s var(--ease),visibility 0s .25s}
.site-nav[data-open="true"]{visibility:visible;opacity:1;transition:opacity .25s var(--ease)}
.site-nav__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.site-nav__head .rubric{color:var(--red-light);margin:0}
.nav-close{min-height:2.75rem;padding:.5rem .9rem;font:600 .95rem var(--f-ui);background:transparent;border:1px solid var(--on-dark);color:var(--on-dark);border-radius:var(--radius);cursor:pointer}
.toc{list-style:none;margin:0;padding:0;counter-reset:ch}
.toc>li{border-top:1px solid #3a352f;padding:.9rem 0}
.toc>li>a{display:flex;align-items:baseline;gap:.9rem;color:var(--on-dark);text-decoration:none;font:500 var(--step-2)/1.1 var(--f-display)}
.toc>li>a::before{counter-increment:ch;content:counter(ch,upper-roman);font:600 .8rem var(--f-ui);letter-spacing:.1em;color:var(--red-light);min-width:2rem}
.toc>li>a[aria-current="page"]{color:var(--red-light)}
.toc ul{list-style:none;margin:.5rem 0 0 2.9rem;padding:0;display:grid;gap:.15rem}
.toc ul a{color:var(--on-dark-soft);text-decoration:none;font:500 1rem/1.4 var(--f-ui);display:inline-block;padding:.3rem 0;min-height:24px}
.toc ul a:hover,.toc>li>a:hover{color:#fff;text-decoration:underline}
.site-nav .btn{margin-top:1.5rem}
.nav-contact{margin-top:2rem;font:500 .95rem/1.6 var(--f-ui);color:var(--on-dark-soft)}
.nav-contact a{color:var(--on-dark)}

@media (min-width:64rem){
  .nav-toggle,.site-nav__head,.nav-contact{display:none}
  .site-nav{position:static;visibility:visible;opacity:1;background:none;color:inherit;padding:0;overflow:visible;display:flex;align-items:center;gap:1.5rem}
  .toc{display:flex;gap:.25rem}
  .toc>li{border:0;padding:0;position:relative}
  .toc>li>a{font:600 1rem/1 var(--f-ui);color:var(--ink);padding:.85rem .8rem;letter-spacing:.01em}
  .toc>li>a::before{display:none}
  .toc>li>a[aria-current="page"]{color:var(--red);box-shadow:inset 0 -2px var(--red)}
  .toc>li>a:hover{color:var(--red);text-decoration:none}
  /* Dropdown */
  .toc ul{position:absolute;top:100%;left:0;margin:0;min-width:16rem;padding:.6rem;background:var(--mantle);border:1px solid var(--rule);box-shadow:0 12px 30px -12px rgb(35 31 27 / .25);opacity:0;visibility:hidden;transform:translateY(4px);transition:.18s var(--ease)}
  .toc>li:hover ul,.toc>li:focus-within ul{opacity:1;visibility:visible;transform:none}
  .toc ul a{color:var(--ink);display:block;padding:.5rem .6rem}
  .toc ul a:hover{background:var(--parchment);color:var(--red);text-decoration:none}
  .site-nav .btn{margin:0}
  .brand-sub{max-width:none}
}

/* ---------- Breadcrumb ---------- */
.crumbs{font:500 .88rem/1.4 var(--f-ui);color:var(--ink-soft);padding-top:1.25rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"›";margin-right:.35rem;color:var(--rule)}
.crumbs a{color:var(--ink-soft)}

/* ---------- Bänder ---------- */
.band{padding-block:clamp(3.5rem,2.5rem + 5vw,7rem)}
.band--stone{background:var(--limestone)}
.band--mantle{background:var(--mantle)}
.dark{background:var(--basalt);color:var(--on-dark)}
.dark a{color:var(--red-light)}
.dark h2,.dark h3{color:#F6F0E4}

/* Steinquader-Fuge als Trenner (dezentes Mauerwerk) */
.ashlar{position:relative;height:5px;border-block:1px solid var(--rule);background:var(--parchment)}
.ashlar::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:var(--red);transform:rotate(45deg);box-shadow:0 0 0 5px var(--parchment)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.5rem,1.5rem + 5vw,5.5rem) clamp(3rem,2rem + 4vw,5rem);position:relative;overflow:hidden}
.hero__grid{display:grid;gap:2.5rem}
.hero h1{margin-bottom:.35em}
.hero h1 em{font-style:italic;font-weight:500;color:var(--red)}
.hero .lead{max-width:34rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

.seal{position:relative;margin:0;justify-self:center;width:min(100%,24rem)}
.seal__disc{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,#F1E6C9 0 58%,#E3D3AE 70%,#D3BE8E 100%);display:grid;place-items:center;box-shadow:inset 0 0 0 1px #c7b07c,inset 0 0 0 9px #efe4c8,inset 0 0 0 10px #c7b07c,0 30px 60px -30px rgb(60 40 10 / .45)}
.seal__disc img{width:74%;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.35) sepia(.4)}
.seal figcaption{font:italic 400 .95rem/1.5 var(--f-text);color:var(--ink-soft);margin-top:1.1rem;padding-left:1rem;border-left:2px solid var(--red);max-width:21rem}
.seal figcaption b{font-style:normal;font-family:var(--f-ui);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.2rem}

/* Nächster Termin */
.next{margin-top:2.25rem;display:grid;gap:1.25rem;align-items:start;padding:1.1rem 1.25rem;background:var(--mantle);border:1px solid var(--rule);border-left:4px solid var(--red);max-width:34rem}
.next[hidden]{display:none}
.next__link{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.25rem;align-items:center;text-decoration:none;color:inherit}
.next__link:hover .next__title{color:var(--red)}
.next__title,.next__meta{display:block}
/* Countdown: Zahlen in der Zitatschrift, bei laufender Veranstaltung ein pulsierender Punkt */
.next__count{display:inline-flex;align-items:baseline;gap:.25rem;margin-top:.6rem;padding:.3rem .65rem;font:600 .8rem/1.2 var(--f-ui);letter-spacing:.04em;color:var(--red-deep);background:#9E1B1E14;border-radius:999px}
.next__count[hidden]{display:none}
.next__count b{font:italic 600 1.35rem/1 var(--f-quote);color:var(--red);font-variant-numeric:lining-nums}
.next__count.is-live{color:var(--mantle);background:var(--red);align-items:center}
.next__count.is-live::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--mantle);animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.next__count.is-live::before{animation:none}}

/* Vergrößerbare Bilder: Lupen-Zeiger und kleiner Hinweis beim Darüberfahren bzw. Fokus */
.zoomable{position:relative;display:block;height:100%;cursor:zoom-in}
.zoomable::after{content:"⤢";position:absolute;right:.6rem;bottom:.6rem;width:2rem;height:2rem;display:grid;place-items:center;font:600 1rem/1 var(--f-ui);color:var(--mantle);background:#231F1Bb3;border-radius:50%;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;pointer-events:none}
.zoomable:hover::after,.zoomable:focus-visible::after{opacity:1;transform:none}
.zoomable:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media (hover:none){.zoomable::after{opacity:.85;transform:none}}
/* Runde Porträts (Vorstand): Link nur so groß wie das Bild, Hinweis klein am Rand */
.people .zoomable{display:inline-block;height:auto;border-radius:50%;margin-bottom:.8rem}
.people .zoomable img{margin-bottom:0}
.people .zoomable::after{right:-.2rem;bottom:-.2rem;width:1.6rem;height:1.6rem;font-size:.8rem}

/* Albumseite: Hinweis für Mitglieder, eigene Fotos beizutragen */
.album-contribute{margin:2.5rem 0 0;padding:1rem 1.25rem;background:var(--mantle);border:1px dashed var(--rule);font-size:.98rem;color:var(--ink-soft)}
.album-contribute a{font-weight:600;color:var(--red);white-space:nowrap}

/* ---------- Tollpatschiger Ritter im Kopfbereich ----------
   Läuft im freien Raum zwischen Logo und Navigation. Positionen in cqw (Breite des Streifens), daher passt der Ablauf zu jeder Breite.
   Unter 180 px freiem Raum (Handy, schmale Fenster) und bei „weniger Bewegung“ bleibt der Streifen leer. */
.hk{flex:1 1 0;min-width:0;align-self:stretch;position:relative;container-type:inline-size;margin:0 .75rem;cursor:pointer}
.hk__scene{position:absolute;inset:0;overflow:hidden}
@container (max-width:179px){.hk__scene{display:none}}
@media (prefers-reduced-motion:reduce){.hk{display:none}}
.hk-stone{position:absolute;left:50cqw;bottom:6px;width:8px;height:5px;border-radius:5px 5px 2px 2px;background:#9b9283;opacity:0;transition:opacity .4s}
.hk.is-run .hk-stone{opacity:1;animation:hk-fadeout 11s linear forwards}
@keyframes hk-fadeout{0%,90%{opacity:1}100%{opacity:0}}
.hk-k,.hk-h{position:absolute;left:0;translate:-40px 0}
.hk-k{bottom:6px;transform-origin:72% 100%}
.hk-h{left:7px;bottom:30px;overflow:visible}
.hk-stars{position:absolute;left:calc(50cqw + 4px);bottom:24px;font-size:11px;letter-spacing:2px;color:var(--wax);opacity:0;white-space:nowrap}
.hk.is-run .hk-k{animation:hk-knight 11s linear forwards}
.hk.is-run .hk-h{animation:hk-helm 11s linear forwards}
.hk.is-run .hk-stars{animation:hk-stars 11s linear forwards}
.hk.is-run .hk-bob{animation:hk-bob .36s ease-in-out infinite}
.hk.is-run .hk-leg{transform-box:fill-box;transform-origin:50% 0;animation:hk-leg .36s ease-in-out infinite alternate}
.hk.is-run .hk-leg--b{animation-direction:alternate-reverse}
@keyframes hk-leg{from{transform:rotate(28deg)}to{transform:rotate(-28deg)}}
@keyframes hk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
/* stolz herein – stolpert am Stein – liegt – steht auf – holt den Helm – zieht weiter */
@keyframes hk-knight{
  0%{translate:-40px 0;rotate:0deg}
  30%{translate:calc(50cqw - 24px) 0;rotate:0deg}
  33%{translate:calc(50cqw - 14px) 0;rotate:-8deg}
  36%{translate:calc(50cqw - 10px) 0;rotate:90deg}
  37.5%{translate:calc(50cqw - 10px) -3px;rotate:84deg}
  39%{translate:calc(50cqw - 10px) 0;rotate:90deg}
  58%{translate:calc(50cqw - 10px) 0;rotate:90deg}
  62%{translate:calc(50cqw - 10px) 0;rotate:-6deg}
  63%{translate:calc(50cqw - 10px) 0;rotate:0deg}
  74%{translate:calc(78cqw - 10px) 0;rotate:0deg}
  80%{translate:calc(78cqw - 10px) 0;rotate:0deg}
  100%{translate:calc(100cqw + 40px) 0;rotate:0deg}
}
@keyframes hk-helm{
  0%{translate:-40px 0;rotate:0deg}
  30%{translate:calc(50cqw - 24px) 0;rotate:0deg}
  33%{translate:calc(50cqw - 12px) -2px;rotate:20deg}
  37%{translate:calc(64cqw) -16px;rotate:260deg}
  42%{translate:calc(78cqw + 2px) 24px;rotate:560deg}
  45%{translate:calc(78cqw - 3px) 24px;rotate:520deg}
  47%{translate:calc(78cqw - 1px) 24px;rotate:540deg}
  75%{translate:calc(78cqw - 1px) 24px;rotate:540deg}
  77.5%{translate:calc(78cqw - 8px) -14px;rotate:640deg}
  80%{translate:calc(78cqw - 10px) 0;rotate:720deg}
  100%{translate:calc(100cqw + 40px) 0;rotate:720deg}
}
@keyframes hk-stars{0%,37%{opacity:0;transform:none}40%{opacity:1}47%{transform:rotate(-12deg)}54%{transform:rotate(12deg)}58%{opacity:1}61%,100%{opacity:0}}

/* ---------- Easter Egg: das Ordenssiegel rollt herein und dreht sich ---------- */
.egg{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1rem;background:#1B1916d9;backdrop-filter:blur(2px);animation:egg-fade .4s ease-out both;overflow:hidden}
.egg.is-out{animation:egg-fade .4s ease-in reverse both}
@keyframes egg-fade{from{opacity:0}to{opacity:1}}
.egg__stage{position:relative;perspective:900px;margin:2rem 0 1.9rem} /* Platz für die vergrößerte Münze */
@media (min-width:40rem){.egg__stage{margin:2.6rem 0 2.2rem}}
.egg__coin{width:134px;height:134px;transform:scale(1.35);animation:egg-roll 1.5s cubic-bezier(.2,.75,.3,1) both}
@media (min-width:40rem){.egg__coin{transform:scale(1.6)}}
@keyframes egg-roll{0%{translate:-75vw 0;rotate:-1080deg}82%{translate:6px 0;rotate:8deg}100%{translate:0 0;rotate:0deg}}
.egg__flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:egg-flip 7s ease-in-out 2.4s infinite}
@keyframes egg-flip{0%,8%{transform:rotateY(0)}22%,58%{transform:rotateY(180deg)}72%,100%{transform:rotateY(360deg)}}
.egg__face{position:absolute;inset:0;border-radius:50%;background:#F4EFE4 var(--src) no-repeat;background-size:269px 143px;backface-visibility:hidden;box-shadow:0 0 0 3px #B8893A,0 0 0 6px #F4EFE4,0 0 40px #E3B55688,0 18px 30px -10px #000a}
.egg__face--front{background-position:-1px -4px}
.egg__face--back{background-position:-135px -4px;transform:rotateY(180deg)}
.egg__sparks{position:absolute;left:50%;top:50%}
.egg__sparks i{position:absolute;left:-.3rem;top:-.3rem;width:.6rem;height:.6rem;background:#E3B556;box-shadow:0 0 .5rem #F2D27A;transform:rotate(45deg) scale(var(--s));animation:qz-spark 1.1s cubic-bezier(.15,.7,.3,1) both}
.egg__card{max-width:30rem;padding:1.5rem 1.75rem;background:var(--parchment);border-top:4px solid var(--red);box-shadow:0 20px 50px -20px #000;text-align:center;animation:egg-card .6s 1.6s cubic-bezier(.2,.8,.2,1) both;outline:none}
@keyframes egg-card{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.egg__kicker{margin:0;font:600 .72rem var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.egg__card h2{margin:.3rem 0 .6rem;font-size:clamp(2.2rem,1.8rem + 2vw,3rem);color:var(--red)}
.egg__card p{margin:0 0 1.1rem;font-size:1.02rem}
.egg--still .egg__coin,.egg--still .egg__flip,.egg--still .egg__card,.egg--still,.egg--still.is-out{animation:none}
@media (prefers-reduced-motion:reduce){.egg,.egg *{animation:none!important}}
/* Mit Bild (z. B. Plakat): groß genug zum Lesen; Antippen zeigt es in voller Größe */
.next__img{position:relative;display:block;justify-self:center;width:min(100%,17rem);padding:.4rem;background:#fff;box-shadow:0 1px 2px #231F1B33,0 14px 28px -16px #231F1B99;line-height:0;transition:transform .35s var(--ease)}
.next__img[hidden]{display:none}
.next__img img{display:block;width:100%;height:auto}
.next__img:hover,.next__img:focus-visible{transform:scale(1.02)}
.next__img:hover .event__zoom,.next__img:focus-visible .event__zoom{opacity:1}
.next__img:focus-visible{outline:3px solid var(--red);outline-offset:4px}
@media (min-width:40rem){
  .next--bild{max-width:44rem;grid-template-columns:minmax(0,1fr) 15rem;align-items:center}
  .next--bild .next__link{grid-template-columns:1fr;align-self:center}
  .next--bild .next__date{text-align:left}
  .next--bild .next__title{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){.next__img{transition:none}.next__img:hover,.next__img:focus-visible{transform:none}}
.next__date{font:500 var(--step-2)/1 var(--f-display);color:var(--red);text-align:center;min-width:4.2rem}
.next__date small{display:block;font:600 .72rem/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem}
.next__label{font:600 .74rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.next__title{font:500 1.15rem/1.3 var(--f-display);font-size:1.35rem;margin:.25rem 0 .1rem}
.next__meta{font:500 .9rem/1.4 var(--f-ui);color:var(--ink-soft);margin:0}

@media (min-width:56rem){
  .hero__grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:4rem}
  .seal{justify-self:end}
}

/* ---------- Drei Zeiten (Zeitleiste) ---------- */
.eras{list-style:none;padding:0;display:grid;gap:0;margin-top:2.5rem;counter-reset:era;border-top:1px solid var(--rule)}
.era{position:relative;padding:1.75rem 0 1.75rem 0;border-bottom:1px solid var(--rule)}
.era__year{font:500 var(--step-4)/.9 var(--f-display);color:var(--red);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.era__place{font:600 .78rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:.9rem 0 .4rem}
.era h3{font-size:var(--step-2);margin-bottom:.4rem}
.era p{font-size:1rem;color:var(--ink-soft);margin:0}
@media (min-width:52rem){
  .eras{grid-template-columns:repeat(3,1fr);border-top:0}
  .era{padding:0 2rem 0 0;border-bottom:0}
  .era+.era{padding-left:2rem;border-left:1px solid var(--rule)}
  .era::after{content:"";position:absolute;top:2.1rem;right:-5px;width:9px;height:9px;transform:rotate(45deg);background:var(--red);z-index:1}
  .era:last-child::after{display:none}
}
.section-head{display:grid;gap:1rem;align-items:end}
@media (min-width:52rem){.section-head{grid-template-columns:1fr auto}}

/* ---------- Initiale & Marginalie ---------- */
.folio{display:grid;gap:2rem}
.initial::first-letter{float:left;font:500 4.6em/.8 var(--f-display);color:var(--red);margin:.08em .1em 0 0;padding:.02em .06em 0 0}
.gloss{font:italic 400 .95rem/1.55 var(--f-text);color:var(--ink-soft);border-left:2px solid var(--red);padding-left:1rem;margin:0 0 1.5rem}
.gloss b{display:block;font:600 .74rem/1.3 var(--f-ui);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.25rem}
@media (min-width:60rem){
  .folio{grid-template-columns:13rem minmax(0,1fr);gap:2rem 3rem}
  .folio>.map{grid-column:2}
  .folio>.gloss-col{grid-column:1;text-align:right}
  .folio>.gloss-col .gloss{border-left:0;padding-left:0;border-right:2px solid var(--red);padding-right:1rem}
}
@media (min-width:80rem){
  .folio{grid-template-columns:13rem minmax(0,var(--measure)) minmax(0,1fr)}
  .folio>.map{grid-column:3;grid-row:1}
}

/* ---------- Spurenkarte ---------- */
.map{background:var(--mantle);border:1px solid var(--rule);padding:1rem;margin:0;max-width:36rem}
.map svg{width:100%;height:auto;display:block}
.map figcaption{font:500 .82rem/1.4 var(--f-ui);color:var(--ink-soft);margin-top:.6rem}
.map .pin{cursor:pointer}
.map .pin circle{transition:r .2s var(--ease)}
.map .pin:hover circle.dot,.map .pin:focus circle.dot{r:9}
.map .pin:focus{outline:none}
.map .pin:focus-visible circle.ring{stroke:var(--ink);stroke-width:2}
.map-detail{min-height:4.5rem;margin-top:.75rem;padding:.75rem 1rem;background:var(--parchment);border-left:3px solid var(--red);font-size:.98rem}
.map-detail strong{font-family:var(--f-display);font-size:1.2rem;display:block}

/* ---------- Erleben (dunkel) ---------- */
.experience{display:grid;gap:2.5rem}
.experience__media{margin:0;position:relative}
.duo{position:relative;overflow:hidden;background:#3a332b}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.35) contrast(1.05) brightness(.95);transition:filter .6s var(--ease),transform .8s var(--ease)}
.duo:hover img{filter:grayscale(.2) sepia(.15) contrast(1.02);transform:scale(1.015)}
.experience__media .duo{aspect-ratio:4/3}
.experience__media figcaption{font:italic 400 .9rem/1.5 var(--f-text);color:var(--on-dark-soft);margin-top:.6rem}
.offers{list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:of}
.offers li{display:grid;grid-template-columns:2.4rem 1fr;gap:.25rem 1rem;padding:1rem 0;border-top:1px solid #3a352f}
.offers li::before{counter-increment:of;content:counter(of,upper-roman);font:600 .82rem/1.9 var(--f-ui);letter-spacing:.1em;color:var(--red-light);grid-row:span 2}
.offers h3{font-size:1.45rem;margin:0}
.offers p{margin:0;font-size:.98rem;color:var(--on-dark-soft)}
@media (min-width:60rem){.experience{grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}.experience__media{position:sticky;top:6rem}}

/* ---------- Termine ---------- */
.events{list-style:none;margin:2rem 0 0;padding:0;border-top:2px solid var(--ink)}
.event{display:grid;grid-template-columns:5.2rem 1fr;gap:.2rem 1rem;padding:1rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.event__date{font:600 1.05rem/1.25 var(--f-ui);font-variant-numeric:lining-nums tabular-nums;color:var(--red);grid-row:span 2}
.event__title{font:500 1.3rem/1.2 var(--f-display);margin:0}
.event__meta{font:500 .9rem/1.4 var(--f-ui);color:var(--ink-soft);margin:0;display:flex;flex-wrap:wrap;gap:.25rem .75rem}
.tag{display:inline-block;font:600 .7rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;padding:.3rem .45rem;border:1px solid currentColor;border-radius:var(--radius)}
.event.is-past{opacity:1}
.event.is-past .event__date,.event.is-past .event__title{color:var(--ink-soft)}
.event.is-past .event__title{font-weight:500}
.event.is-next{background:var(--mantle);box-shadow:-1rem 0 0 var(--mantle),1rem 0 0 var(--mantle);border-left:0}
.event.is-next .event__title::after{content:"Nächster Termin";margin-left:.6rem;vertical-align:middle;font:600 .68rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:var(--mantle);padding:.3rem .45rem;border-radius:var(--radius)}
.events-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chip{min-height:2.5rem;padding:.4rem .9rem;font:600 .88rem var(--f-ui);background:transparent;border:1px solid var(--rule);color:var(--ink);border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
@media (min-width:44rem){.event{grid-template-columns:8rem 1fr auto}.event__date{grid-row:auto}.event__meta{grid-column:3;justify-content:end}.event__title{grid-column:2}}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:2rem}
.gallery figure{margin:0}
.gallery .duo{aspect-ratio:1}
.gallery figcaption{font:500 .85rem/1.35 var(--f-ui);color:var(--ink-soft);margin-top:.45rem}
.gallery figcaption b{display:block;color:var(--ink);font-weight:600}
@media (min-width:48rem){
  .gallery{grid-template-columns:repeat(4,1fr);gap:1rem}
  .gallery figure:first-child{grid-column:span 2;grid-row:span 2}
  .gallery figure:first-child .duo{aspect-ratio:auto;height:calc(100% - 2.6rem)}
}

/* ---------- Mitmachen ---------- */
.join{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.join>div{background:var(--parchment);padding:clamp(1.5rem,1rem + 2vw,2.75rem)}
.join h3{font-size:var(--step-2)}
@media (min-width:52rem){.join{grid-template-columns:1fr 1fr}}

/* ---------- Zitat / Quelle ---------- */
.quote{margin:2.5rem 0;padding:0;max-width:var(--measure)}
.quote blockquote{margin:0;font:italic 500 var(--step-2)/1.3 var(--f-quote);color:var(--ink);text-indent:-.4em}
.quote figcaption{margin-top:1rem;font:500 .9rem/1.4 var(--f-ui);color:var(--ink-soft)}
.quote figcaption::before{content:"— "}

/* ---------- Long-Read (Unterseite) ---------- */
.page-head{padding-block:1rem clamp(2.5rem,2rem + 3vw,4.5rem);border-bottom:1px solid var(--rule)}
.page-head h1{max-width:18ch;margin-top:1rem}
.page-head .lead{max-width:40rem}
.facts{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:1.75rem;font:500 .9rem/1.4 var(--f-ui);color:var(--ink-soft)}
.facts b{display:block;font:500 1.5rem/1.1 var(--f-display);color:var(--ink);font-variant-numeric:lining-nums}

.article{display:grid;gap:2rem;padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.article__toc{font:500 .95rem/1.4 var(--f-ui)}
.article__toc details{border:1px solid var(--rule);background:var(--mantle);padding:.25rem 1rem}
.article__toc summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;font-weight:600}
.article__toc ol{margin:.25rem 0 .9rem;padding-left:1.2rem}
.article__toc li{padding:.25rem 0}
.article__toc a{color:var(--ink);text-decoration:none}
.article__toc a:hover,.article__toc a.is-active{color:var(--red);text-decoration:underline}
.chapter{scroll-margin-top:6rem;margin-bottom:3rem}
.chapter h2{font-size:var(--step-3);display:flex;gap:.75rem;align-items:baseline}
.chapter h2 .num{font:600 .85rem var(--f-ui);letter-spacing:.12em;color:var(--red);flex:none}
.chapter__body{display:grid;gap:0 2.5rem}
.chapter__body .gloss{order:-1}
.source{margin-top:3rem;padding:1.5rem;background:var(--limestone);border-top:2px solid var(--ink);font-size:.95rem}
.source h2{font-size:1.4rem;margin-bottom:.5rem}
.source p{margin:.25rem 0}
@media (min-width:64rem){
  .article{grid-template-columns:15rem minmax(0,1fr);gap:4rem}
  .article__toc{position:sticky;top:6rem;align-self:start}
  .article__toc details{border:0;background:none;padding:0}
  .article__toc summary{pointer-events:none;list-style:none;font:600 .78rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);min-height:auto;margin-bottom:.75rem}
  .article__toc summary::-webkit-details-marker{display:none}
  .article__toc ol{border-left:1px solid var(--rule);padding-left:1rem;list-style:none}
  .article__toc a.is-active{text-decoration:none;box-shadow:-1rem 0 0 -0.85rem var(--red)}
  .chapter__body{grid-template-columns:minmax(0,var(--measure)) 12rem}
  .chapter__body .gloss{order:0;grid-column:2;grid-row:1 / span 3;align-self:start;margin-top:.35rem}
}

/* Zeitleiste vertikal */
.chron{list-style:none;margin:1.5rem 0 2rem;padding:0;border-left:2px solid var(--red);max-width:var(--measure)}
.chron li{position:relative;padding:0 0 1.4rem 1.5rem}
.chron li::before{content:"";position:absolute;left:-6px;top:.55rem;width:10px;height:10px;background:var(--parchment);border:2px solid var(--red);transform:rotate(45deg)}
.chron time{display:block;font:500 1.4rem/1.1 var(--f-display);color:var(--red);font-variant-numeric:lining-nums}
.chron p{margin:.2rem 0 0;font-size:1rem}

.figure{margin:2rem 0;max-width:var(--measure)}
.figure .duo{aspect-ratio:16/10}
.figure figcaption{font:italic 400 .9rem/1.5 var(--f-text);color:var(--ink-soft);margin-top:.6rem}

.next-read{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:3rem}
.next-read a{display:block;background:var(--parchment);padding:1.5rem;text-decoration:none;color:var(--ink)}
.next-read a:hover{background:var(--mantle)}
.next-read small{font:600 .74rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.next-read strong{display:block;font:500 1.5rem/1.2 var(--f-display);margin-top:.35rem}
@media (min-width:48rem){.next-read{grid-template-columns:1fr 1fr}}

/* ---------- Footer ---------- */
.site-footer{background:var(--basalt);color:var(--on-dark-soft);font:500 .95rem/1.6 var(--f-ui);padding-block:3.5rem 2rem}
.site-footer a{color:var(--on-dark)}
.site-footer .brand{color:var(--on-dark)}
.site-footer .brand-sub{color:var(--on-dark-soft)}
.footer-grid{display:grid;gap:2rem}
.footer-grid h2{font:600 .78rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--red-light);margin-bottom:1rem}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.footer-grid li a{display:inline-block;padding:.2rem 0;text-decoration:none}
.footer-grid li a:hover{text-decoration:underline}
.footer-legal{margin-top:3rem;padding-top:1.25rem;border-top:1px solid #3a352f;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.85rem}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
@media (min-width:52rem){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* Prototyp-Hinweis */
.proto-note{position:fixed;right:.75rem;bottom:.75rem;z-index:40;max-width:19rem;font:500 .8rem/1.4 var(--f-ui);background:var(--ink);color:var(--parchment);padding:.7rem .9rem;border-radius:var(--radius);box-shadow:0 8px 24px -10px rgb(0 0 0 / .5)}
.proto-note a{color:#fff}
.proto-note button{float:right;margin:-.3rem -.4rem 0 .5rem;background:none;border:0;color:inherit;font-size:1.1rem;cursor:pointer;min-width:24px;min-height:24px}

/* Toast für noch nicht ausgearbeitete Seiten */
.toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%,1rem);z-index:70;background:var(--ink);color:var(--parchment);font:500 .92rem/1.4 var(--f-ui);padding:.8rem 1.1rem;border-radius:var(--radius);opacity:0;pointer-events:none;transition:.25s var(--ease);max-width:calc(100% - 2rem)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Bewegung: zurückhaltend ---------- */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{.site-header,.site-footer,.proto-note,.article__toc{display:none}body{background:#fff}}

/* ==========================================================================
   Ergänzungen für die CMS-Website
   ========================================================================== */
.cms-preview-bar{position:sticky;top:0;z-index:80;display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;align-items:center;background:#7a4b00;color:#fff;font:600 .9rem/1.3 var(--f-ui);padding:.5rem 1rem}
.cms-preview-bar a{color:#fff}
.cms-preview-bar + .skip + .site-header,.cms-preview-bar ~ .site-header{top:2.4rem}
.hinweis-band{background:var(--red);color:var(--mantle);font:500 .98rem/1.45 var(--f-ui);padding:.75rem 0}
.hinweis-band p{margin:0;max-width:none}
.placeholder{background:#fff1c2;color:#5c4400;padding:0 .2em;border-radius:2px}
.prose{max-width:var(--measure)}
.prose h3{font-size:var(--step-1);font-family:var(--f-display);margin:1.6em 0 .4em}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1em}
.prose li{margin:.25em 0}
.prose a{word-break:break-word}

/* Kopf einfacher Seiten */
.page-intro{padding-block:1rem clamp(2rem,1.5rem + 2.5vw,3.5rem);border-bottom:1px solid var(--rule)}
.page-intro h1{margin-top:1rem;max-width:20ch}
.page-intro .lead{max-width:42rem}
.section{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.section + .section{border-top:1px solid var(--rule)}
.two-col{display:grid;gap:2rem}
@media (min-width:56rem){.two-col{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:4rem;align-items:start}}

/* Termine: Details */
.event__more{grid-column:2 / -1;margin:.25rem 0 0;font-size:.95rem;color:var(--ink-soft)}
.event__more .tag{margin-right:.4rem}
.event.is-past .event__more{display:none}
.events-past-toggle{margin-top:1.25rem}
/* Termin mit Bild (z. B. Plakat): Karte mit großem, ungeschnittenem Bild wie ein angeheftetes Plakat.
   Auch vergangen bleibt die Karte vollständig (Text und Bild), sie ist ein Rückblick. */
.event--bild{grid-template-columns:minmax(0,1fr) 9rem;grid-template-areas:"date img" "title img" "meta img" ". img" "more more";align-items:start;gap:.35rem 1.25rem;margin:.75rem 0;padding:1.25rem;background:var(--mantle);border:1px solid var(--rule);border-left:3px solid var(--red)}
.event--bild .event__date{grid-area:date;grid-row:auto}
.event--bild .event__title{grid-area:title;font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem)}
.event--bild .event__meta{grid-area:meta;justify-content:start}
.event--bild .event__more{grid-area:more;display:block;font-size:1rem;color:var(--ink)}
.event--bild.is-past .event__more{display:block}
.event--bild.is-past .event__title{color:var(--ink)}
.event--bild{grid-template-rows:auto auto auto 1fr auto}
.event--bild .event__more{margin-top:.6rem}
.event--bild .event__date{align-self:start}
.event--bild.is-past .event__date::after{content:"Rückblick";display:inline-block;vertical-align:middle;margin-left:.6rem;font:600 .68rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid currentColor;padding:.3rem .45rem;border-radius:var(--radius)}
.event__img{grid-area:img;position:relative;display:block;align-self:start;padding:.4rem;background:#fff;box-shadow:0 1px 2px #231F1B33,0 14px 28px -16px #231F1B99;transform:rotate(1.5deg);transition:transform .35s var(--ease),box-shadow .35s var(--ease);line-height:0}
.event__img img{display:block;width:100%;height:auto}
.event__img::before{content:"";position:absolute;top:-.45rem;left:50%;width:.9rem;height:.9rem;margin-left:-.45rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d4473f,var(--red-deep));box-shadow:0 2px 3px #0005}
.event__zoom{position:absolute;right:.6rem;bottom:.6rem;padding:.3rem .5rem;font:600 .7rem/1 var(--f-ui);letter-spacing:.06em;color:var(--mantle);background:#231F1Bcc;border-radius:var(--radius);opacity:0;transition:opacity .25s}
.event__img:hover,.event__img:focus-visible{transform:rotate(0) scale(1.03);box-shadow:0 1px 2px #231F1B33,0 20px 36px -16px #231F1Baa}
.event__img:hover .event__zoom,.event__img:focus-visible .event__zoom{opacity:1}
.event__img:focus-visible{outline:3px solid var(--red);outline-offset:4px}
@media (hover:none){.event__zoom{opacity:1}}
@media (min-width:44rem){
  .event--bild{grid-template-columns:8rem minmax(0,1fr) 13rem;grid-template-rows:auto auto auto 1fr;grid-template-areas:"date title img" ". meta img" ". more img" ". . img";padding:1.5rem 1.75rem;gap:.5rem 1.75rem}
  .event--bild.is-past .event__date::after{display:table;margin:.6rem 0 0}
}
@media (prefers-reduced-motion:reduce){.event__img{transition:none;transform:none}.event__img:hover,.event__img:focus-visible{transform:none}}
.events-empty{margin-top:1.5rem;padding:1rem 1.25rem;background:var(--mantle);border-left:3px solid var(--red)}

/* Galerie */
.albums{display:grid;gap:1.75rem 1.25rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));margin-top:1.5rem}
.album-card{display:block;text-decoration:none;color:var(--ink)}
.album-card .duo{aspect-ratio:4/3}
.album-card h3{font-size:1.35rem;margin:.7rem 0 .15rem}
.album-card p{margin:0;font:500 .88rem/1.4 var(--f-ui);color:var(--ink-soft)}
.album-card:hover h3{color:var(--red)}
.year-head{display:flex;align-items:baseline;gap:1rem;margin-top:2.5rem;border-bottom:2px solid var(--ink);padding-bottom:.4rem}
.year-head h2{font-size:var(--step-2);margin:0}
.year-head span{font:500 .9rem var(--f-ui);color:var(--ink-soft)}
.photos{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr);margin-top:2rem}
@media (min-width:44rem){.photos{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media (min-width:70rem){.photos{grid-template-columns:repeat(4,1fr)}}
.photos figure{margin:0}
.photo-link{display:block;overflow:hidden;background:#d9cfbd;aspect-ratio:1;border-radius:var(--radius)}
.photo-link img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.photo-link:hover img{transform:scale(1.03)}
.photos figcaption{font:500 .85rem/1.35 var(--f-ui);color:var(--ink-soft);margin-top:.35rem}
.album-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule)}

/* Lightbox (dialog) */
.lightbox{border:0;padding:0;margin:auto;max-width:min(96vw,1200px);max-height:96vh;background:transparent;color:#fff}
.lightbox::backdrop{background:rgb(15 13 11 / .92)}
.lightbox figure{margin:0;display:grid;gap:.6rem;justify-items:center;min-width:min(32rem,90vw)}
.lightbox img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain}
.lightbox figcaption{font:500 .95rem/1.4 var(--f-ui);text-align:center;max-width:60ch}
.lightbox-bar{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem}
.lightbox button{min-width:2.75rem;min-height:2.75rem;font:600 .95rem var(--f-ui);background:rgb(255 255 255 / .12);color:#fff;border:1px solid rgb(255 255 255 / .4);border-radius:var(--radius);cursor:pointer;padding:.4rem .9rem}
.lightbox button:hover{background:rgb(255 255 255 / .22)}

/* Kapitel-Bild */
.chapter__body .figure{grid-column:1}
.chapter__body .figure .duo{aspect-ratio:auto;background:var(--mantle)}
.chapter__body .figure img{width:auto;max-width:100%;max-height:28rem;margin-inline:auto;filter:none}

/* Verein */
.people{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.people li{background:var(--mantle);border:1px solid var(--rule);padding:1.1rem 1.25rem;border-top:3px solid var(--red)}
.people img{width:5.5rem;height:5.5rem;object-fit:cover;object-position:50% 20%;border-radius:50%;margin-bottom:.8rem;border:2px solid var(--rule)}
.people small{display:block;font:600 .74rem/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.people strong{display:block;font:500 1.35rem/1.2 var(--f-display);margin-top:.2rem}
.partners{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--rule)}
.partners li{padding:1rem 0;border-bottom:1px solid var(--rule);display:grid;gap:.2rem}
.partners strong{font:500 1.25rem/1.25 var(--f-display)}
.partners span{font:500 .9rem var(--f-ui);color:var(--ink-soft)}
.partners p{margin:.2rem 0 0;font-size:.98rem}
.voices{display:grid;gap:2rem;margin-top:1rem}
@media (min-width:56rem){.voices{grid-template-columns:1fr 1fr}}
.voices .quote{margin:0}

/* Formular */
.form-card{background:var(--mantle);border:1px solid var(--rule);padding:clamp(1.25rem,1rem + 1.5vw,2.25rem);max-width:44rem}
.form-row{display:grid;gap:.35rem;margin-bottom:1.1rem}
.form-row label,.form-row legend{font:600 .95rem/1.3 var(--f-ui)}
.form-row input,.form-row select,.form-row textarea{font:400 1rem/1.4 var(--f-ui);color:var(--ink);background:#fff;border:1px solid #8f8473;border-radius:var(--radius);padding:.65rem .75rem;min-height:2.75rem;width:100%}
.form-row textarea{min-height:9rem;resize:vertical}
.form-row input:focus-visible,.form-row select:focus-visible,.form-row textarea:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.form-check{display:flex;gap:.6rem;align-items:flex-start;font:500 .95rem/1.45 var(--f-ui);margin-bottom:1.25rem}
.form-check input{width:1.25rem;height:1.25rem;margin-top:.1rem;accent-color:var(--red);flex:none}
.form-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-hint{font:500 .85rem/1.4 var(--f-ui);color:var(--ink-soft)}
.form-msg{padding:.9rem 1.1rem;margin-bottom:1.25rem;font:500 .98rem/1.45 var(--f-ui);border-left:4px solid}
.form-msg--ok{background:#e8f2ea;border-color:#2c6b3a;color:#1d4a28}
.form-msg--err{background:#fbeceb;border-color:var(--red);color:var(--red-deep)}
.contact-list{list-style:none;padding:0;margin:1rem 0 0;font:500 1.02rem/1.6 var(--f-ui)}
.contact-list li{padding:.5rem 0;border-bottom:1px solid var(--rule)}
.contact-list b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.steps-list{counter-reset:st;list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.steps-list li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;align-items:baseline}
.steps-list li::before{counter-increment:st;content:counter(st,upper-roman);font:500 1.5rem/1 var(--f-display);color:var(--red)}

/* Geschichte – Übersicht */
.chapters-grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2rem}
@media (min-width:48rem){.chapters-grid{grid-template-columns:1fr 1fr}}
.chapters-grid a{display:block;background:var(--parchment);padding:1.75rem;text-decoration:none;color:var(--ink)}
.chapters-grid a:hover{background:var(--mantle)}
.chapters-grid small{font:600 .74rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.chapters-grid strong{display:block;font:500 1.7rem/1.15 var(--f-display);margin:.4rem 0 .5rem}
.chapters-grid p{margin:0;color:var(--ink-soft);font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.external-note{font:500 .85rem/1.4 var(--f-ui);color:var(--ink-soft);margin-top:.5rem}
[hidden]{display:none!important}


/* ---------- Gotische Überschriften: Feinabstimmung ---------- */
h1 em,h2 em,h3 em,.hero h1 em{font-style:normal;font-weight:400;color:var(--red)}
h1{font-size:clamp(2.4rem,1.7rem + 3.2vw,4.4rem);line-height:1.05}
h2{font-size:clamp(2rem,1.6rem + 2vw,3.2rem)}
h3{font-size:clamp(1.55rem,1.35rem + .9vw,2.05rem)}
.era__year{font-size:clamp(2.6rem,1.9rem + 3.4vw,4.8rem);letter-spacing:0}
.brand-name{font-size:1.2rem;letter-spacing:0}
@media (min-width:30rem){.brand-name{font-size:1.4rem}}
.initial::first-letter{font-size:4.9em;line-height:.82}
.chapter h2 .num,.offers li::before,.toc>li>a::before{font-family:var(--f-display);font-weight:500;letter-spacing:0;font-size:1.05em}
.seal figcaption b{font-family:var(--f-display);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:1.05rem}
.offers h3{font-size:1.6rem}
.join h3{font-size:clamp(1.7rem,1.4rem + 1vw,2.2rem)}
.event__title{font-size:1.4rem}
.album-card h3{font-size:1.5rem}
@media (min-width:64rem){.toc>li>a::before{display:none}}
/* Glossar */
.glossary{display:grid;gap:0 2.5rem;margin:1.5rem 0 0;max-width:62rem}
@media (min-width:48rem){.glossary{grid-template-columns:1fr 1fr}}
.glossary div{padding:.9rem 0;border-top:1px solid var(--rule)}
.glossary dt{font:500 1.35rem/1.2 var(--f-display);color:var(--ink)}
.glossary dd{margin:.25rem 0 0;font-size:.98rem;color:var(--ink-soft)}

/* Referenzliste */
.ref-list{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid var(--rule)}
.ref-list li{padding:.55rem 0 .55rem 1.4rem;border-bottom:1px solid var(--rule);position:relative;font-size:1rem}
.ref-list li::before{content:"";position:absolute;left:.2rem;top:1.05rem;width:7px;height:7px;background:var(--red);transform:rotate(45deg)}

/* Farbfotos (Orte) */
.photo-frame{overflow:hidden;border-radius:var(--radius);background:var(--limestone)}
.photo-frame img{width:100%;height:auto;display:block}

/* ---------- Siegel: antippen → Umschrift lesen ---------- */
button.seal__disc{border:0;padding:0;cursor:zoom-in;width:100%;position:relative;font:inherit;color:inherit;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
button.seal__disc:hover{transform:rotate(-2deg) scale(1.015)}
button.seal__disc:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:50%}
.seal__hint{position:absolute;left:50%;bottom:9%;transform:translate(-50%,6px);font:600 .72rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;background:var(--basalt);color:var(--on-dark);padding:.45rem .7rem;border-radius:999px;opacity:0;transition:.3s var(--ease);pointer-events:none;white-space:nowrap}
button.seal__disc:hover .seal__hint,button.seal__disc:focus-visible .seal__hint{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.seal__hint{opacity:.9;transform:translate(-50%,0)}}
.seal-dialog{border:0;padding:0;max-width:min(52rem,94vw);width:100%;background:var(--parchment);color:var(--ink);border-radius:var(--radius);box-shadow:0 30px 80px -20px rgb(0 0 0 / .6)}
.seal-dialog::backdrop{background:rgb(27 25 22 / .78)}
.seal-dialog__in{display:grid;gap:1.5rem;padding:clamp(1.25rem,1rem + 2vw,2.5rem);align-items:center}
@media (min-width:44rem){.seal-dialog__in{grid-template-columns:1fr 1fr}}
.seal-dialog__disc{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,#F1E6C9 0 58%,#E3D3AE 70%,#D3BE8E 100%);display:grid;place-items:center;box-shadow:inset 0 0 0 1px #c7b07c,inset 0 0 0 9px #efe4c8,inset 0 0 0 10px #c7b07c}
.seal-dialog__disc img{width:82%;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.35) sepia(.4)}
.seal-dialog__legend{font-family:var(--f-display);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);letter-spacing:.06em;color:var(--red);margin:.2rem 0 .8rem;word-break:break-word}
@media (prefers-reduced-motion:reduce){button.seal__disc:hover{transform:none}}

/* ---------- Initialen „tinten“ einmalig ein ---------- */
.ink .initial::first-letter,.ink.initial::first-letter{transition:color 1.4s var(--ease),text-shadow 1.8s var(--ease)}
.ink:not(.is-inked) .initial::first-letter,.ink.initial:not(.is-inked)::first-letter{color:rgb(158 27 30 / .08);text-shadow:0 0 18px rgb(158 27 30 / .55)}
@media (prefers-reduced-motion:reduce){.ink:not(.is-inked) .initial::first-letter,.ink.initial:not(.is-inked)::first-letter{color:var(--red);text-shadow:none}}

/* ---------- Spurenkarte als Wegweiser (Regionsseite) ---------- */
.map .pin.is-current circle.dot{r:9}
.map .pin.is-current circle.ring{stroke-width:2.5}
.map .map-off{cursor:pointer;text-decoration:underline;text-decoration-thickness:1px}
.map .map-off:focus{outline:none}
.map .map-off:focus-visible{outline:2px solid var(--red)}
.map-detail a{display:inline-block;margin-top:.35rem;font:600 .9rem var(--f-ui)}
@media (min-width:64rem){
  .article--map{grid-template-columns:minmax(0,1fr) minmax(20rem,26rem)}
  .article--map>article{grid-column:1;grid-row:1}
  .article--map>.article__map{grid-column:2;grid-row:1;position:sticky;top:6rem;align-self:start}
}
.article__map .map{max-width:none}
/* Erste Initiale der Geschichtsseiten (wie in Handschriften) */
.prose.first-chapter>p:first-child::first-letter{float:left;font:500 4.9em/.82 var(--f-display);color:var(--red);margin:.08em .1em 0 0;padding:.02em .06em 0 0}
.ink.prose.first-chapter>p:first-child::first-letter{transition:color 1.4s var(--ease),text-shadow 1.8s var(--ease)}
.ink.prose.first-chapter:not(.is-inked)>p:first-child::first-letter{color:rgb(158 27 30 / .08);text-shadow:0 0 18px rgb(158 27 30 / .55)}
@media (prefers-reduced-motion:reduce){.ink.prose.first-chapter:not(.is-inked)>p:first-child::first-letter{color:var(--red);text-shadow:none}}

/* ==========================================================================
   Intro (Startseite, einmal je Besuch, überspringbar, ohne JavaScript unsichtbar)
   ========================================================================== */
html.intro-on{overflow:hidden}
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.5rem;color:var(--on-dark);cursor:pointer;
  background:radial-gradient(ellipse at 50% 45%,#2c2823 0%,var(--basalt) 62%,#100f0d 100%);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.intro.is-out{opacity:0;transform:scale(1.02);pointer-events:none}
.intro__in{text-align:center;display:grid;justify-items:center;gap:.4rem;max-width:40rem}
.intro__mark{width:3rem;height:3rem;opacity:.9;margin-bottom:.8rem}
.intro__name{font:600 .78rem/1 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-soft)}
.intro__rule{width:4rem;height:1px;background:var(--red-light);margin:1rem 0 .4rem;transform-origin:center;animation:intro-rule .9s var(--ease) both}
.intro__year{font:500 clamp(5.5rem,3rem + 14vw,12rem)/.9 var(--f-display);color:var(--red-light);font-variant-numeric:lining-nums tabular-nums;min-width:4ch;letter-spacing:.01em}
.intro__place{font:600 .82rem/1.2 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);min-height:1.2em;margin-top:.6rem}
.intro__title{font:500 clamp(1.6rem,1.2rem + 1.8vw,2.6rem)/1.15 var(--f-display);color:#F6F0E4;min-height:1.2em}
.intro__swap{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.intro__swap.is-hidden{opacity:0;transform:translateY(6px)}
.intro__claim{font:500 clamp(2rem,1.4rem + 3vw,3.6rem)/1.1 var(--f-display);color:#F6F0E4;margin-top:1.2rem;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.intro__claim.is-in{opacity:1;transform:none}
.intro__claim em{font-style:normal;color:var(--red-light)}
.intro__skip{position:absolute;right:1rem;bottom:1rem;min-height:2.75rem;padding:.5rem 1rem;font:600 .9rem var(--f-ui);color:var(--on-dark);background:transparent;border:1px solid #4a443c;border-radius:999px;cursor:pointer}
.intro__skip:hover,.intro__skip:focus-visible{border-color:var(--on-dark);outline:none;box-shadow:0 0 0 2px var(--red-light)}
.intro__bar{position:absolute;left:0;bottom:0;height:2px;background:var(--red-light);width:0}
@keyframes intro-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}
/* ---------- Intro 2: Zahlen als „Anno Domini“ mit Feder-Ziffern, Zeitleiste der Stationen ---------- */
.intro__ad{font:500 clamp(.9rem,.8rem + .4vw,1.15rem)/1 var(--f-display);letter-spacing:.32em;color:var(--wax);text-transform:uppercase;margin-top:.4rem;min-height:1.1em;white-space:nowrap}
.intro__year{font:italic 500 clamp(6.5rem,3.5rem + 16vw,14rem)/.85 "Cormorant Garamond",Georgia,serif;font-variant-numeric:oldstyle-nums proportional-nums;letter-spacing:-.01em;min-width:0;
  background:linear-gradient(175deg,#F3D9A4 0%,#D9A957 38%,#C2463A 72%,#9E1B1E 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgb(232 112 95 / .18));padding:0 .08em .06em;transition:transform .25s var(--ease)}
.intro__year.is-hit{animation:intro-hit .45s var(--ease)}
.intro__year.is-main{filter:drop-shadow(0 0 34px rgb(232 160 95 / .32))}
@keyframes intro-hit{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}
.intro__place{margin-top:.3rem}
.intro__title{font-size:clamp(1.35rem,1.05rem + 1.5vw,2.3rem)}
.intro__minor .intro__title{font-size:clamp(1.05rem,.95rem + .7vw,1.45rem);color:var(--on-dark)}
.intro__line{position:absolute;left:50%;bottom:4.6rem;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(.25rem,.1rem + .6vw,.6rem);max-width:calc(100% - 2rem)}
.intro__line i{display:block;width:6px;height:6px;border-radius:50%;background:#4a443c;transition:background .25s,transform .25s}
.intro__line i.main{width:10px;height:10px;background:transparent;border:1.5px solid #6b6258}
.intro__line i.on{background:var(--red-light);border-color:var(--red-light)}
.intro__line i.now{transform:scale(1.6)}
.intro__line i.gap{width:clamp(.6rem,.3rem + 1.5vw,1.6rem);height:1px;border-radius:0;background:#4a443c}
@media (max-width:30rem){.intro__line{bottom:4.2rem}.intro__ad{letter-spacing:.2em}}
.intro__ad{font:600 clamp(.78rem,.72rem + .3vw,.95rem)/1 var(--f-ui);letter-spacing:.28em}

/* ---------- Großansicht: fester Rahmen, Bedienleiste bleibt beim Blättern an derselben Stelle ---------- */
.lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;background:transparent}
.lightbox[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
.lightbox figure{min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:.6rem;padding:1rem 1rem 0}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lightbox figcaption{min-height:2.8em;max-width:60ch;display:flex;align-items:flex-start;justify-content:center}
.lightbox-bar{margin:0;padding:.6rem 1rem 1rem;display:grid;grid-template-columns:auto 5.5em auto auto;justify-content:center;align-items:center;gap:.5rem}
.lightbox-bar .lb-count{text-align:center;font:600 .95rem var(--f-ui);font-variant-numeric:tabular-nums}

/* ---------- Ein Tag in der Komturei: der Himmel wandert von Nacht zu Nacht ---------- */
.day{margin-top:2rem}
.day__list{list-style:none;margin:0;padding:0}
/* Der Übergang liegt ganz im oberen Innenabstand, damit Text immer auf der eigenen Farbe steht */
.day__step{--from:var(--parchment);--to:var(--parchment);--fade:2.75rem;background:linear-gradient(to bottom,var(--from),var(--to) var(--fade));color:var(--ink)}
@media (min-width:48rem){.day__step{--fade:5rem}}
[data-tone="nacht"]{--to:#17191F}  [data-prev="nacht"]{--from:#17191F}
[data-tone="morgen"]{--to:#E9CFB6} [data-prev="morgen"]{--from:#E9CFB6}
[data-tone="vormittag"]{--to:#F4EFE4} [data-prev="vormittag"]{--from:#F4EFE4}
[data-tone="mittag"]{--to:#FBF7EC} [data-prev="mittag"]{--from:#FBF7EC}
[data-tone="nachmittag"]{--to:#EEE3CC} [data-prev="nachmittag"]{--from:#EEE3CC}
[data-tone="abend"]{--to:#3A2621} [data-prev="abend"]{--from:#3A2621}
.day__step[data-tone="nacht"],.day__step[data-tone="abend"]{color:var(--on-dark)}
.day__step[data-tone="nacht"]{background-image:radial-gradient(1px 1px at 12% 30%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 78% 18%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 62% 70%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 33% 82%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 90% 55%,#fff8 50%,transparent 51%),linear-gradient(to bottom,var(--from),var(--to) var(--fade))}
.day__inner{display:grid;gap:1rem 3rem;padding-block:3.5rem 3rem}
@media (min-width:48rem){.day__inner{padding-block:6rem 4rem}}
@media (min-width:48rem){.day__inner{grid-template-columns:14rem minmax(0,var(--measure))}}
.day__time{margin:0;display:flex;flex-direction:column;gap:.35rem}
.day__hour{font:500 clamp(2rem,1.6rem + 1.6vw,2.8rem)/1 var(--f-display);color:var(--red)}
.day__when{font:600 .78rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
[data-tone="nacht"] .day__hour,[data-tone="abend"] .day__hour{color:var(--red-light)}
[data-tone="nacht"] .day__when,[data-tone="abend"] .day__when{color:var(--on-dark-soft)}
.day__body h2{margin:0 0 .6rem;font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem)}
.day__body p{margin:0;font-size:1.12rem}
[data-tone="nacht"] .day__body a,[data-tone="abend"] .day__body a{color:var(--on-dark)}
/* Sonne bzw. Mond über einem kleinen Horizont; die Höhe zeigt die Tageszeit */
.day__orb{--h:.5;position:relative;display:block;width:5.5rem;height:3rem;overflow:hidden;border-bottom:1px solid currentColor;margin-bottom:.6rem;opacity:.9}
.day__orb::before{content:"";position:absolute;left:50%;bottom:0;width:1.6rem;height:1.6rem;margin-left:-.8rem;border-radius:50%;background:#D9A441;box-shadow:0 0 0 .35rem #D9A44133,0 0 1.2rem #D9A44199;transform:translateY(calc(var(--h) * -1.3rem + .8rem));transition:transform 1.6s var(--ease)}
[data-tone="morgen"] .day__orb{--h:.15} [data-tone="vormittag"] .day__orb{--h:.6} [data-tone="mittag"] .day__orb{--h:1} [data-tone="nachmittag"] .day__orb{--h:.55} [data-tone="abend"] .day__orb{--h:.1}
[data-tone="abend"] .day__orb::before{background:#E0794E;box-shadow:0 0 0 .35rem #E0794E33,0 0 1.2rem #E0794E99}
[data-tone="nacht"] .day__orb{--h:.9}
[data-tone="nacht"] .day__orb::before{background:transparent;box-shadow:inset -.42rem .18rem 0 0 #EDE6D8}
.day-anim .day__step:not(.is-up) .day__orb::before{transform:translateY(1.8rem)}
.menu-card{margin:1.5rem 0 0;padding:clamp(1.25rem,1rem + 2vw,2.5rem);background:var(--mantle);border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:-.5rem;display:grid;gap:1.1rem}
.menu-card div{display:grid;gap:.15rem 2rem}
@media (min-width:40rem){.menu-card div{grid-template-columns:16rem 1fr}}
.menu-card dt{font:500 1.35rem/1.2 var(--f-display);color:var(--red)}
.menu-card dd{margin:0}
.day-sources h3{margin-top:0;font-size:1.3rem}
.day-sources .sources{padding-left:1.1rem;color:var(--ink-soft);font-size:.98rem}
.day-quiz{margin-top:1.5rem;font:500 1.15rem var(--f-text)}

/* ---------- Quiz „Mythos oder Fakt?“ ---------- */
.quiz-list{padding-left:1.4rem;max-width:44rem}
.quiz-item{padding:1rem 0;border-bottom:1px solid var(--rule)}
.quiz-item__claim{font:italic 500 1.4rem/1.3 var(--f-quote);margin:0 0 .4rem}
.quiz-item summary{cursor:pointer;font:600 .95rem var(--f-ui);color:var(--red)}
.quiz-verdict--fakt,.quiz-verdict--mythos{color:var(--red)}
.qz{max-width:44rem}
.qz__progress{display:flex;gap:.45rem;flex-wrap:wrap}
.qz__pip{width:1.15rem;height:1.15rem;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center;font:700 .65rem/1 var(--f-ui);color:var(--mantle);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.qz__pip.is-current{border-color:var(--red);transform:scale(1.15)}
.qz__pip.is-right{background:var(--red);border-color:var(--red)}
.qz__pip.is-right::after{content:"✓"}
.qz__pip.is-wrong{background:var(--ink-soft);border-color:var(--ink-soft)}
.qz__pip.is-wrong::after{content:"✕"}
.qz__count{margin:.9rem 0 .6rem;font:600 .8rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.qz__count b{color:var(--ink)}
.qz__card{position:relative;background:var(--mantle);border:1px solid var(--rule);padding:clamp(1.5rem,1rem + 3vw,3rem);box-shadow:0 1px 0 var(--rule),0 18px 40px -28px #231F1B66}
.qz__claim{margin:0 0 1.75rem;font:italic 500 clamp(1.55rem,1.2rem + 1.6vw,2.3rem)/1.25 var(--f-quote);padding-right:4.5rem;outline:none}
.qz__choices{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.qz__btn{min-height:3.6rem;font:500 1.7rem/1 var(--f-display);color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:var(--radius);cursor:pointer;transition:background .2s,color .2s,opacity .3s,transform .15s}
.qz__btn:hover:not(:disabled){background:var(--ink);color:var(--parchment)}
.qz__btn:active:not(:disabled){transform:translateY(1px)}
.qz__btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.qz__btn:disabled{cursor:default;opacity:.4}
.qz__btn.is-chosen{opacity:1;background:var(--ink);color:var(--parchment)}
.qz__stamp{position:absolute;top:-2rem;right:-1.25rem;width:clamp(6rem,5rem + 3vw,8.5rem);opacity:0;pointer-events:none}
.qz-gloss{fill:#ffffff24}
.quiz{overflow-x:clip} /* Funken und Siegel erzeugen keinen seitlichen Bildlauf */
@media (max-width:40rem){.qz__stamp{right:-.4rem;top:-1.6rem}.qz__claim{padding-right:3.25rem}}
.qz__stamp svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 3px #231F1B55)}
.qz-wax{fill:var(--red)}
.qz-ring{stroke:#0000004a;stroke-width:2.5}
.qz-ring2{stroke:#ffffff2e;stroke-width:1}
.qz-cross{fill:#5E0D10;stroke:#ffffff26;stroke-width:1}
.qz-score{font:500 38px var(--f-display);fill:#F6E6CF;text-anchor:middle}
.qz-of{font:600 9px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;fill:#F6E6CFcc;text-anchor:middle}
.qz__card.is-right .qz__stamp{opacity:1;transform:rotate(-12deg);animation:qz-stamp .6s cubic-bezier(.3,1.4,.5,1) both}
.qz__card.is-right{animation:qz-thump .6s ease-out}
.qz__card.is-wrong{animation:qz-shake .45s ease-in-out}
@keyframes qz-stamp{0%{opacity:0;transform:scale(2.6) rotate(-35deg)}55%{opacity:1;transform:scale(.9) rotate(-10deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
@keyframes qz-thump{0%,40%{transform:none}55%{transform:translateY(3px)}75%{transform:translateY(-1px)}100%{transform:none}}
@keyframes qz-shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.qz__sparks{position:absolute;left:50%;top:50%;width:0;height:0}
.qz__sparks i{position:absolute;left:-.25rem;top:-.25rem;width:.5rem;height:.5rem;background:#E3B556;box-shadow:0 0 .4rem #F2D27A;transform:rotate(45deg) scale(var(--s));animation:qz-spark .95s cubic-bezier(.15,.7,.3,1) both}
@keyframes qz-spark{0%{opacity:1;transform:translate(0,0) rotate(45deg) scale(var(--s))}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(225deg) scale(0)}}
.qz__result:empty{display:none}
.qz__result{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.qz__verdict{margin:0 0 .4rem;font:500 2rem/1 var(--f-display);color:var(--red)}
.is-wrong .qz__verdict{color:var(--ink-soft)}
.qz__result .quiz-item__more{margin:.25rem 0 0}
.qz__next{margin-top:1.25rem}
.qz__end{text-align:center;padding:1rem 0 2rem;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease)}
.qz__end.is-in{opacity:1;transform:none}
.qz__stamp--end{position:relative;top:auto;right:auto;width:10rem;margin:0 auto 1.5rem;opacity:1;animation:qz-stamp .7s .1s cubic-bezier(.3,1.4,.5,1) both}
.qz__rank{margin:0;font-size:clamp(2.4rem,2rem + 2vw,3.4rem);color:var(--red);outline:none}
.qz__rank small{display:block;margin-bottom:.4rem;font:600 .8rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.qz__rank-text{font-size:1.15rem;margin:.75rem auto 0;max-width:30rem}
.qz__secret{margin:1.25rem auto 0;max-width:30rem;padding:.9rem 1.1rem;font-size:1rem;background:#B8893A1f;border:1px dashed var(--wax);border-radius:var(--radius)}
.qz__end-text{margin:1rem auto 1.5rem;max-width:30rem;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){
  .qz__card.is-right,.qz__card.is-wrong,.qz__card.is-right .qz__stamp,.qz__stamp--end{animation:none}
  .qz__end{transition:none}
  .day__orb::before{transition:none}
}