/* Sagenpfad — Gestaltung v2 „alt, aber modern“
   Idee: Kinosaal bei Kerzenschein. Nachtschwarz-blauer Grund mit Filmkorn, Fraktur (Sagenpfad Titel = Pirata One mit eigenem Kerning) gross und laut,
   Lauftext in einer modernen Serifenschrift (Zodiak, Fontshare/ITF). Orange ist Glut: Highlights, Rauten, Linien, Licht.
   Keine Kaesten, keine Pillen: gegliedert wird mit Raum, Typo und EINER Linie (1px).
   Elementor: jede Klasse unten entspricht einem Container/Widget; Karte, Laterne, Lesefortschritt = HTML-Widget + dieses CSS. */

@font-face { font-family: "Sagenpfad Titel"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/sagenpfad-titel-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sagenpfad Titel"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/sagenpfad-titel-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }

@font-face { font-family: "Zodiak"; font-style: normal; font-weight: 300; font-display: swap; src: url("schrift/zodiak-300.woff2") format("woff2"); }
@font-face { font-family: "Zodiak"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/zodiak-400.woff2") format("woff2"); }
@font-face { font-family: "Zodiak"; font-style: italic; font-weight: 400; font-display: swap; src: url("schrift/zodiak-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Zodiak"; font-style: normal; font-weight: 700; font-display: swap; src: url("schrift/zodiak-700.woff2") format("woff2"); }

/* Raster: Lesespalte 36rem, Inhalte bis 80rem, Bilder und Karte randlos */
:root {
  --grund: #0A0C16;          /* Nacht, tiefster Ton */
  --nacht: #101322;          /* Markengrund */
  --pergament: #EEE8DC;      /* Text */
  --nebel: #A0A6B8;          /* gedaempft, 7,6:1 auf Grund */
  --orange: #FF9959;         /* Sagen-Orange: Akzent */
  --glut: #FF7A2E;           /* heisser Ton nur fuer Leuchten */
  --orange-hell: #FFB98A;
  --linie: rgba(255, 153, 89, .26);   /* die EINE Linie, immer 1px */
  --sp-titel: "Sagenpfad Titel", "UnifrakturCook", Georgia, serif;
  --sp-text: "Zodiak", Georgia, "Times New Roman", serif;
  --mass: 36rem;
  --breit: 80rem;
  --rand: clamp(1.1rem, 4.5vw, 3.5rem);
  --kurve: cubic-bezier(.2, .8, .2, 1);
  /* EIN Raster fuer Buehne, Station und Kartentisch: 61,8 % Bild | 38,2 % Lesespalte. Am linken Rand der Lesespalte laeuft der Pfad. */
  --raster: 96rem;
  --fuge: clamp(1.5rem, 3vw, 3rem);
  --einzug: 2.4rem;                       /* Text rueckt so weit ein, dass die Pfadlinie (bei .35rem) frei daneben laeuft */
  /* Zierinitiale wie in den Social-Media-Posts. Piston Black ist nur fuer private Nutzung lizenziert -
     sobald eine Web-Lizenz da ist, hier eintragen; bis dahin Sagenpfad Titel. */
  --sp-initiale: "Sagenpfad Titel", Georgia, serif;
  --t-kurz: 200ms; --t-mittel: 480ms; --t-lang: 1000ms;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--pergament); font-family: var(--sp-text); font-weight: 400;
       font-size: clamp(1.02rem, .3vw + .95rem, 1.125rem); line-height: 1.7; -webkit-font-smoothing: antialiased;
       font-feature-settings: "kern", "liga"; overflow-x: hidden; }
/* Filmkorn ueber allem: das Alte im Modernen (vorgerechnetes Bild, kostet keine Rechenleistung) */
body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .035;
  background: url("bild/korn.png") 0 0 / 256px 256px repeat; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, svg, video { display: block; max-width: 100%; height: auto; }
main { overflow-x: clip; }   /* randlose Flaechen und Lichthoefe duerfen nie seitlich scrollen lassen; clip statt hidden, damit sticky funktioniert */
a { color: var(--orange); text-decoration: none; transition: color var(--t-kurz) var(--kurve); }
a:hover { color: var(--orange-hell); }
:focus-visible { outline: 1px solid var(--orange-hell); outline-offset: 4px; }
::selection { background: var(--orange); color: var(--grund); }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { font-family: var(--sp-titel); font-weight: 400; line-height: .95; letter-spacing: .005em; margin: 0; text-wrap: balance; color: var(--pergament); }
.glut { color: var(--orange); text-shadow: 0 0 .28em rgba(255, 122, 46, .55), 0 0 1.1em rgba(255, 122, 46, .28); }
.etikett { font-family: var(--sp-text); font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.leise { color: var(--nebel); }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Textlink mit Linie – unser „Button“ (Elementor: Button-Widget, Stil „Link“) */
.weg { display: inline-flex; align-items: center; gap: .8rem; font-size: .8rem; font-weight: 500; letter-spacing: .2em;
       text-transform: uppercase; color: var(--pergament); padding-block: .7rem; min-height: 2.75rem; background: none; border: 0; cursor: pointer; font-family: var(--sp-text); }
.weg::after { content: ""; width: 2.4rem; height: 1px; background: var(--orange); transition: width var(--t-mittel) var(--kurve); }
.weg:hover { color: var(--orange-hell); }
.weg:hover::after { width: 3.6rem; }
.abspielen { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--sp-text); font-size: .8rem; font-weight: 500;
             letter-spacing: .2em; text-transform: uppercase; color: var(--pergament); background: none; border: 0; cursor: pointer; padding: 0; }
.abspielen .knopf { position: relative; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; }
.abspielen .knopf::before { content: ""; position: absolute; inset: .45rem; border: 1px solid var(--orange); transform: rotate(45deg);
                            box-shadow: 0 0 1.2rem rgba(255,122,46,.35); transition: background var(--t-mittel) var(--kurve), transform var(--t-mittel) var(--kurve); }
.abspielen .knopf::after { content: ""; position: relative; left: .1rem; border-style: solid; border-width: .42rem 0 .42rem .7rem;
                           border-color: transparent transparent transparent var(--orange-hell); }
.abspielen:hover .knopf::before { background: rgba(255,153,89,.18); transform: rotate(135deg); }

/* ---------- Kopf wie ein Titelblatt: das Wappen als Siegel in der Mitte, rechts „Menue“ (Schriftzug steht im Fuss).
   Beim Runterscrollen verschwindet er, beim Hochscrollen kommt er schmal zurueck (nur das Wappen) auf weich auslaufendem Nachtgrund. ---------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
        gap: 1.5rem; padding: calc(env(safe-area-inset-top, 0px) + 1.2rem) var(--rand) 1.2rem;
        transition: transform var(--t-mittel) var(--kurve), padding var(--t-mittel) var(--kurve), background-color var(--t-mittel) var(--kurve); }
.kopf::before { content: ""; position: absolute; inset: 0 0 -2.5rem; z-index: -1; pointer-events: none; opacity: 0;
                background: linear-gradient(rgba(10,12,22,.94), rgba(10,12,22,.75) 55%, transparent); transition: opacity var(--t-mittel) var(--kurve); }
.kopf--klein, .kopf--fest { padding-block: calc(env(safe-area-inset-top, 0px) + .5rem) .5rem; }
.kopf--klein::before, .kopf--fest::before { opacity: 1; }
.kopf--weg { transform: translateY(-120%); }
.kopf .logo { grid-column: 2; }
.kopf .menue-anker { grid-column: 3; justify-self: end; margin-top: .3rem; }
.kopf--klein .menue-anker, .kopf--fest .menue-anker { margin-top: 0; }
.logo { display: grid; justify-items: center; gap: .5rem; width: 8rem; transition: width var(--t-mittel) var(--kurve), gap var(--t-mittel) var(--kurve); }
.logo img.wappen { width: 3.1rem; filter: drop-shadow(0 0 .9rem rgba(255,122,46,.35)); transition: width var(--t-mittel) var(--kurve); }
.logo img.wortmarke { width: 7.4rem; max-height: 3rem; transition: opacity var(--t-kurz) var(--kurve), max-height var(--t-mittel) var(--kurve); }
.kopf--klein .logo, .kopf--fest .logo { gap: 0; }
.kopf--klein .logo img.wappen, .kopf--fest .logo img.wappen { width: 2.3rem; }
.kopf--klein .logo img.wortmarke, .kopf--fest .logo img.wortmarke { opacity: 0; max-height: 0; }
/* Siegel im Kopf und im Menue: nur das Wappen (Caesar 02.10.2026, Variante A) */
.logo--siegel { width: auto; gap: 0; }
.logo--siegel img.wappen { width: 3.6rem; }
.kopf--klein .logo--siegel img.wappen, .kopf--fest .logo--siegel img.wappen { width: 2.4rem; }
@media (max-width: 48rem) {
  .logo { width: 6rem; } .logo img.wappen { width: 2.5rem; } .logo img.wortmarke { width: 6rem; }
  .logo--siegel { width: auto; } .logo--siegel img.wappen { width: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .kopf, .kopf::before, .logo, .logo img { transition: none; } }
/* ---------- Menue: kleines Dropdown unter „Menue“ (Caesar 02.10.2026: kein Vollbild-Vorhang).
   „Menue“ in Fraktur, weiss; beim Ueberfahren und solange offen orange leuchtend wie die Glut. Die zwei Striche werden zum Kreuz. ---------- */
.menue-anker { position: relative; }
.menue-knopf { display: inline-flex; align-items: center; gap: .8rem; min-height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer;
               font: 400 1.7rem/1 var(--sp-titel); letter-spacing: .01em; text-transform: none; color: var(--pergament);
               transition: color var(--t-kurz) var(--kurve), text-shadow var(--t-mittel) var(--kurve); }
.menue-knopf:hover, .menue-knopf:focus-visible, .menue-knopf[aria-expanded="true"] {
               color: var(--orange); text-shadow: 0 0 .28em rgba(255, 122, 46, .55), 0 0 1.1em rgba(255, 122, 46, .28); }
.menue-knopf__zeichen { display: grid; justify-items: end; gap: .38rem; width: 1.7rem; }
.menue-knopf__zeichen i { display: block; height: 1px; background: currentColor; width: 100%;
                          transition: width var(--t-mittel) var(--kurve), transform var(--t-mittel) var(--kurve); }
.menue-knopf__zeichen i + i { width: 62%; }
.menue-knopf:hover .menue-knopf__zeichen i + i, .menue-knopf:focus-visible .menue-knopf__zeichen i + i { width: 100%; }
/* Kreuz mittig im Zeichenfeld (Striche stehen rechtsbuendig: 1,7 rem Feld, 1,2 rem Strich -> .25 rem nach links) */
.menue-knopf[aria-expanded="true"] .menue-knopf__zeichen i { width: 1.2rem; transform: translate(-.25rem, calc(.19rem + .5px)) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__zeichen i + i { width: 1.2rem; transform: translate(-.25rem, calc(-.19rem - .5px)) rotate(-45deg); }
.menue { position: absolute; top: calc(100% + .85rem); right: 0; z-index: 2; width: min(19rem, calc(100vw - 2 * var(--rand)));
         padding: .55rem 0; background: #0F1424 url("bild/gewebe.webp") center / 600px repeat; border: 1px solid var(--linie);
         box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, .55), 0 0 2.6rem rgba(255, 122, 46, .07);
         visibility: hidden; opacity: 0; transform: translateY(-.45rem);
         transition: opacity var(--t-kurz) var(--kurve), transform var(--t-mittel) var(--kurve), visibility 0s linear var(--t-mittel); }
/* Spitze als Raute ueber dem Strich-Zeichen (dessen Mitte liegt .85rem vor der rechten Kante) */
.menue::before { content: ""; position: absolute; top: -6px; right: calc(.85rem - 6px); width: 10px; height: 10px; background: #0F1424;
                 border: solid var(--linie); border-width: 1px 0 0 1px; transform: rotate(45deg); }
.menue:target, .menue.offen { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue nav a { display: flex; align-items: center; gap: .95rem; min-height: 2.9rem; padding: .2rem 1.35rem; color: var(--pergament);
               font: 400 1.5rem/1.1 var(--sp-titel); letter-spacing: .01em;
               transition: color var(--t-kurz) var(--kurve), background-color var(--t-kurz) var(--kurve); }
.menue nav a::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--orange); transform: rotate(45deg);
                       transition: background-color var(--t-kurz) var(--kurve), box-shadow var(--t-kurz) var(--kurve); }
.menue nav a:hover, .menue nav a:focus-visible { color: var(--orange); background-color: rgba(255, 153, 89, .06); }
.menue nav a:hover::before, .menue nav a:focus-visible::before { background: var(--orange); box-shadow: 0 0 .55rem rgba(255, 122, 46, .75); }
@media (prefers-reduced-motion: reduce) { .menue, .menue-knopf__zeichen i { transition: none; } .menue { transform: none; } }
.vorschauband { position: relative; z-index: 40; background: var(--orange); color: var(--grund); text-align: center;
                font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .35rem var(--rand); }
.mit-band .kopf:not(.kopf--klein) { top: 1.75rem; }

/* Raute = Station auf dem Pfad (Wegbuch, Station, Aufbruch in der Buehne): sitzt mittig auf der Pfadlinie */
.auf-dem-pfad { position: relative; }
.auf-dem-pfad::before { content: ""; position: absolute; left: calc(var(--einzug) * -1); top: 50%; width: .7rem; height: .7rem; margin-top: -.35rem;
                        background: var(--orange); transform: rotate(45deg); box-shadow: 0 0 .9rem rgba(255,122,46,.6); }

/* Gewebe: das blaue Hintergrund-Pattern der Social-Media-Posts (HIntergrundpattern, wie in SA_Steinerner_Mann_01_neu.psd),
   weich in den Nachtgrund verlaufend (keine Kanten, keine Kaesten) */
.gewebe { position: relative; isolation: isolate; }
.gewebe::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc((100% - 100vw) / 2); right: calc((100% - 100vw) / 2);
                  pointer-events: none; background: #0F1424 url("bild/gewebe.webp") center / 600px repeat;
                  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
/* Ecken: Groesse und Abstand als Variablen, damit der Abschnitt unten genau so viel Luft bekommt, wie die Ecke braucht */
.mit-ecken { --ecke-o: clamp(7rem, 22vw, 19rem); --ecke-u: clamp(6.4rem, 20.2vw, 17.5rem); --ecke-abstand: clamp(1rem, 3vw, 2.4rem); }
.mit-ecken::after { content: ""; position: absolute; z-index: -1; inset: var(--ecke-abstand); pointer-events: none;
                    background: url("bild/ecke-oben-rechts.webp") top right / var(--ecke-o) auto no-repeat,
                                url("bild/ecke-unten-links.webp") bottom left / var(--ecke-u) auto no-repeat; }

/* Titel wie in den Posts: Zierinitiale links ueber zwei Zeilen, Artikel klein oben daneben, Rest in Fraktur darunter.
   Nur wenn das Wort nach dem Artikel gross geschrieben ist (sonst stuende eine falsche Versalie da). */
.zier-titel { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .06em; align-items: end; }
/* Die Initiale ist ein Pseudo-Element, damit der Titeltext fuer Suchmaschinen und Vorleser am Stueck bleibt; der echte erste
   Buchstabe bekommt Breite 0. „/ ""“ = kein Vorlesetext fuer die Zier. */
.zier-titel[data-initiale]::before { content: attr(data-initiale); content: attr(data-initiale) / "";
                        grid-column: 1; grid-row: 1 / span 2; align-self: start; font-family: var(--sp-initiale); font-size: 2.15em; line-height: .8;
                        color: #F0ECDB; text-shadow: 0 0 .25em rgba(255,122,46,.22); }
.zier-titel[data-initiale] .zier-titel__rest::first-letter { font-size: 0; }
.zier-titel__artikel { grid-column: 2; grid-row: 1; font-size: .62em; line-height: 1; padding-bottom: .12em; }
.zier-titel__rest { grid-column: 2; grid-row: 2; }
.zier-titel--ohne-artikel .zier-titel__rest { grid-row: 1 / span 2; align-self: end; }
/* Trenner aus den Posts: feine Linie, kleine Raute in der Mitte (Caesar 02.10.2026) */
.trenner-raute { position: relative; display: block; width: min(100%, 16rem); height: .8rem; }
.trenner-raute::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
                         background: linear-gradient(90deg, var(--orange) 0 calc(50% - .6rem), transparent calc(50% - .6rem) calc(50% + .6rem), var(--orange) calc(50% + .6rem)); }
.trenner-raute::after { content: ""; position: absolute; left: 50%; top: 50%; width: .42rem; height: .42rem; margin: -.21rem 0 0 -.21rem; background: var(--orange); transform: rotate(45deg); }
.pfadhueter .trenner-raute { margin-inline: auto; }

/* Zierinitiale im Fliesstext (in den Posts „Kapitaelchen“): grosser Anfangsbuchstabe in Pergament, drei Zeilen hoch */
.zier::first-letter { font-family: var(--sp-initiale); font-style: normal; float: left; font-size: 4.2em; line-height: .82; color: #F0ECDB;
                      padding: .04em .1em 0 0; text-shadow: 0 0 .35em rgba(255,122,46,.25); }

/* ---------- Buehne (Startseite): Filmplakat ----------
   „Was die Staedte“ klein, „fluestern“ randvoll ueber die ganze Breite (Wortbreite gemessen: 2,833 em, gesetzt 100cqi / 2,85 = 99,4 % der Zeile).
   Das Fluestern ist das Lauteste auf der Seite. Darunter Unterzeile links, Aktionen rechts; dort beginnt der Pfad. */
.buehne { position: relative; isolation: isolate; min-height: max(32rem, 68svh); display: grid; align-content: end; overflow: hidden; }
.buehne__film { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.buehne::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(10,12,22,.7) 100%),
              linear-gradient(180deg, rgba(10,12,22,.7) 0%, rgba(10,12,22,0) 24%, rgba(10,12,22,.15) 50%, rgba(10,12,22,.85) 82%, var(--grund) 100%); }
.buehne__inhalt { width: 100%; max-width: var(--raster); margin-inline: auto; padding: 8rem var(--rand) clamp(2.2rem, 4vw, 3.4rem);
                  display: grid; gap: 1.1rem; container-type: inline-size; }
/* Titel wie die Posts (Caesar 02.10.2026, Variante A): grosse Zierinitiale ueber zwei Zeilen, daneben klein „as die Staedte“,
   darunter „fluestern“ in Glut. Die Initiale zeichnet ein Pseudo-Element aus data-initiale; der echte erste Buchstabe bekommt
   Breite 0 - so bleibt der Text fuer Suchmaschinen und Vorleser „Was die Staedte fluestern“. */
.buehne h1 { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: .05em; line-height: .9;
             max-width: none; text-wrap: nowrap; font-size: clamp(3.4rem, 10.2cqi, 9.6rem); }
.buehne h1[data-initiale]::before { content: attr(data-initiale); content: attr(data-initiale) / ""; grid-column: 1; grid-row: 1 / span 2; align-self: start;
             font-family: var(--sp-initiale); font-size: 2.2em; line-height: .78; color: #F0ECDB; text-shadow: 0 0 .25em rgba(255,122,46,.35); }
.buehne__zeile { grid-column: 2; grid-row: 1; align-self: end; font-size: .5em; padding-bottom: .1em; color: var(--pergament); }
.buehne h1[data-initiale] .buehne__zeile::first-letter { font-size: 0; }
.buehne__wort { grid-column: 2; grid-row: 2; }
.buehne__fuss { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: 1.4rem var(--fuge); align-items: end; margin-top: clamp(.8rem, 2vw, 1.6rem); }
.buehne__unter { max-width: 30rem; font-size: clamp(1.05rem, .5vw + .95rem, 1.25rem); font-weight: 300; line-height: 1.55; color: var(--pergament); }
.buehne__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem; padding-left: var(--einzug); }
.buehne__aktionen::before { left: 0; }
/* rechter Rand: Film anhalten (Icon) + KI-Hinweis, senkrecht gestellt wie auf einem Filmplakat */
.buehne__rand { position: absolute; right: calc(var(--rand) * .5); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 1rem;
                font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--nebel); }
.buehne__rand span { writing-mode: vertical-rl; transform: rotate(180deg); }
.filmhalt { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--nebel); cursor: pointer; }
.filmhalt svg { width: 1.1rem; height: 1.1rem; }
.filmhalt:hover { color: var(--orange); }
.filmhalt .an { display: none; }
.filmhalt[aria-pressed="true"] .an { display: block; }
.filmhalt[aria-pressed="true"] .aus { display: none; }
@media (max-width: 64rem) { .buehne__fuss { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 48rem) { .buehne__rand { top: 6.6rem; transform: none; right: .3rem; } }

/* Intro-Vorfuehrung */
.vorfuehrung { width: min(96vw, 80rem); max-width: none; padding: 0; border: 0; background: #000; color: var(--pergament); overflow: visible; }
.vorfuehrung::backdrop { background: rgba(5,6,12,.92); }
.vorfuehrung video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vorfuehrung__zu { position: absolute; top: -2.8rem; right: 0; background: none; border: 0; color: var(--pergament); font: 500 .75rem/1 var(--sp-text);
                   letter-spacing: .22em; text-transform: uppercase; cursor: pointer; padding: .8rem 0; }

/* ---------- Abschnitte ---------- */
.raum { padding: clamp(5rem, 11vw, 9rem) var(--rand); position: relative; }
.erscheinen { opacity: 0; transform: translateY(2rem); transition: opacity var(--t-lang) var(--kurve), transform var(--t-lang) var(--kurve); }
.erscheinen.da { opacity: 1; transform: none; }

/* ---------- Station (neueste Sage): Bild 61,8 % links randlos, Lesespalte 38,2 % rechts auf Gewebe ----------
   Gleiches Raster wie Buehne und Kartentisch: die Pfadlinie laeuft schnurgerade am linken Rand der Lesespalte. */
.station { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: 0 var(--fuge); max-width: var(--raster); margin-inline: auto;
           padding-inline: var(--rand); min-height: min(90svh, 58rem); }
.station__text { align-self: center; display: grid; gap: 1.2rem; padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 7rem) var(--einzug); }
.station__nummer { font-family: var(--sp-titel); font-size: clamp(5rem, 9vw, 8.5rem); line-height: .7; color: transparent;
                   -webkit-text-stroke: 1px var(--orange); margin-bottom: .4rem; }
.station h2 { font-size: clamp(2.9rem, 5.2vw, 5.6rem); line-height: .9; }
.station__ort { font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--nebel); }
.station .anriss { max-width: 28rem; font-weight: 300; font-size: 1.12rem; }
.station__bild { order: -1; position: relative; overflow: hidden; display: block; min-height: 22rem;
                 margin-left: calc(var(--rand) * -1 - max(0px, (100vw - var(--raster)) / 2)); }
.station__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 2.4s var(--kurve); }
.station:hover .station__bild img { transform: scale(1); }
/* Bild laeuft nach rechts ins Gewebe aus, wie das Motiv im Post */
/* Bilder wie in den Social-Media-Posts gerahmt: Zierecken oben rechts und unten links, eingerueckt, ueber dem Bild */
.mit-rahmen::before { content: ""; position: absolute; z-index: 2; inset: clamp(.7rem, 1.8vw, 1.5rem); pointer-events: none;
                      background: url("bild/ecke-oben-rechts.webp") top right / clamp(7.5rem, 24%, 15rem) auto no-repeat,
                                  url("bild/ecke-unten-links.webp") bottom left / clamp(6.9rem, 22%, 13.8rem) auto no-repeat; }
.station__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 5rem 1rem rgba(10,12,22,.7);
                        background: linear-gradient(90deg, transparent 55%, rgba(10,12,22,.55) 100%), linear-gradient(0deg, rgba(10,12,22,.5), transparent 30%); }
@media (prefers-reduced-motion: reduce) { .station__bild img { transition: none; transform: none; } }
@media (max-width: 64rem) {
  .station { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .station__bild { aspect-ratio: 4 / 3; min-height: 0; margin-left: var(--einzug); margin-right: calc(var(--rand) * -1); margin-top: clamp(2rem, 6vw, 3rem); }
  .station__text { padding: 2.6rem 0 3.4rem var(--einzug); }
  .station__nummer { font-size: 4.4rem; }
}

/* ---------- Karte ---------- */
/* Kartentisch: Karte links (61,8 %), Wegbuch rechts (38,2 %). Die Karte bleibt beim Lesen stehen (sticky),
   die Tafel eines Landes klappt in der rechten Spalte auf. */
.kartentisch { position: relative; display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: 0 var(--fuge);
               max-width: var(--raster); margin-inline: auto; padding: clamp(2rem, 4vw, 3.5rem) var(--rand) clamp(5rem, 9vw, 8rem); }
.kartentisch::before { content: ""; position: absolute; inset: 0 -50vw; z-index: -1; pointer-events: none;
                       background: radial-gradient(48% 52% at 34% 50%, #141834 0%, transparent 75%); }
.kartentisch__karte { min-width: 0; }
.kartenbuehne { position: sticky; top: 2rem; display: grid; justify-items: center; }
.karte { position: relative; width: min(100%, calc((100svh - 4rem) * 1122 / 1402)); aspect-ratio: 1122 / 1402; touch-action: manipulation; }
.kartentisch__buch { position: relative; min-width: 0; display: grid; align-content: start; gap: 1.1rem; padding-top: clamp(1rem, 4vw, 3rem); }
.kartentisch__buch > :not(.wegbuch):not(.tafel) { padding-left: var(--einzug); }
.kartentisch__buch h2 { font-size: clamp(3rem, 5.4vw, 5.4rem); }
.kartentisch__buch p:not(.etikett) { color: var(--nebel); max-width: 26rem; }
@media (max-width: 64rem) {
  .kartentisch { grid-template-columns: minmax(0, 1fr); }
  .kartentisch__buch { padding-top: 0; margin-top: 2.5rem; }
  .kartenbuehne { position: relative; top: 0; }
  .kartentisch__karte { padding-left: var(--einzug); }
  .karte { width: min(100%, 40rem); }
}
.karte svg { width: 100%; height: 100%; overflow: visible; }
.karte .kamera { transition: transform var(--t-lang) var(--kurve); transform-origin: 0 0; }
.karte .grundbild { filter: brightness(.45) saturate(.8); transition: filter var(--t-lang) var(--kurve); }
.karte.ohne-laterne .grundbild, .karte.ist-nah .grundbild { filter: none; }
.karte.ohne-laterne .lichtbild, .karte.ohne-laterne .schein { display: none; }
.karte .schein { mix-blend-mode: screen; pointer-events: none; }
.karte .land { fill: transparent; stroke: transparent; stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: pointer;
               transition: fill var(--t-mittel) var(--kurve), stroke var(--t-mittel) var(--kurve); outline: none; }
.karte .land.hat-sagen:hover, .karte .land.hat-sagen:focus-visible { fill: rgba(255,153,89,.13); stroke: var(--orange-hell); }
.karte .land.leer:hover, .karte .land.leer:focus-visible { fill: rgba(10,12,22,.35); stroke: var(--linie); }
.karte .land.gewaehlt { fill: rgba(255,153,89,.07); stroke: var(--orange-hell); }
.karte .dunkel { fill: rgba(8,9,18,.8); fill-rule: evenodd; pointer-events: none; opacity: 0; transition: opacity var(--t-mittel) var(--kurve); }
.karte.ist-nah .dunkel { opacity: 1; }
.karte .ort { cursor: pointer; }
.karte .ort .zeichen { transform: scale(calc(var(--k, 2) / var(--z, 1))); transition: transform var(--t-lang) var(--kurve); }
.karte .ort .raute-p { fill: var(--orange); stroke: var(--grund); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.karte .ort.bald .raute-p { fill: var(--grund); stroke: var(--orange); }
.karte .ort .puls { fill: none; stroke: var(--orange); stroke-width: 1px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center;
                    animation: puls 2.6s var(--kurve) infinite; }
.karte .ort.bald .puls { display: none; }
@keyframes puls { 0% { transform: rotate(45deg) scale(1); opacity: .9; } 100% { transform: rotate(45deg) scale(2.6); opacity: 0; } }
.karte .ort .glanz { fill: var(--glut); opacity: .22; }
.karte .ort text { font-family: var(--sp-text); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; fill: var(--pergament);
                   paint-order: stroke; stroke: var(--grund); stroke-width: 3px; stroke-linejoin: round; opacity: 0;
                   transition: opacity var(--t-mittel) var(--kurve); pointer-events: none; }
.karte .ort:hover text, .karte .ort:focus-visible text, .karte.ist-nah .ort.im-land text { opacity: 1; }
.karte .ort .zahl { opacity: 1; fill: var(--grund); stroke: none; font-size: 9.5px; letter-spacing: 0; }
.karte .ort.bald .zahl { fill: var(--orange); }
.karte .treffer { fill: transparent; }
@media (prefers-reduced-motion: reduce) { .karte .kamera, .karte .ort .zeichen, .karte { transition: none; } .karte .ort .puls { animation: none; opacity: .45; transform: rotate(45deg) scale(1.7); } }

/* Tafel: erscheint erst, wenn ein Land gewaehlt ist – deckt die Wegbuch-Spalte ab */
.tafel { position: absolute; z-index: 5; inset: 0; overflow-y: auto; padding: clamp(1rem, 4vw, 3rem) 0 1.4rem 2.4rem; background: var(--grund);
         opacity: 0; transform: translateX(1.5rem); pointer-events: none; visibility: hidden;
         transition: opacity var(--t-mittel) var(--kurve), transform var(--t-mittel) var(--kurve), visibility 0s linear var(--t-mittel); }
.offen .tafel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.tafel__kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.tafel__zu { background: none; border: 0; padding: .6rem 0; font: 500 .72rem/1 var(--sp-text); letter-spacing: .22em; text-transform: uppercase; color: var(--nebel); cursor: pointer; }
.tafel__zu:hover { color: var(--orange); }
.tafel h3 { font-size: clamp(2.6rem, 4vw, 3.6rem); margin-bottom: 1.4rem; }
.tafel .leer-text { color: var(--nebel); }
.sagenliste { list-style: none; margin: 0; padding: 0; }
.sagenliste li { border-top: 1px solid var(--linie); }
.sagenliste li:last-child { border-bottom: 1px solid var(--linie); }
.sagenliste a, .sagenliste .zeile { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .1rem 1rem; padding: .9rem 0; color: var(--pergament); }
.sagenliste .datum { font-size: .8rem; font-weight: 500; color: var(--orange); padding-top: .4rem; font-variant-numeric: tabular-nums; }
.sagenliste .titel { font-family: var(--sp-titel); font-size: 1.5rem; line-height: 1.1; }
.sagenliste .ortzeile { grid-column: 2; font-size: .85rem; color: var(--nebel); }
.sagenliste a:hover .titel { color: var(--orange); }


/* ---------- Der Pfadhueter: hier endet der Pfad an seiner Laterne ---------- */
.pfadhueter { display: grid; justify-items: center; text-align: center; gap: clamp(1.4rem, 3vw, 2.2rem);
              padding: clamp(7rem, 12vw, 10rem) var(--rand) clamp(7rem, 12vw, 10rem); }
.laterne-zeichen { width: 3.4rem; height: auto; overflow: visible; }
.laterne-zeichen .gestell { fill: none; stroke: var(--orange); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.laterne-zeichen .flamme { fill: var(--orange-hell); }
.laterne-zeichen .hof { fill: url(#laternenhof); }
.pfadhueter h2 { font-size: clamp(3.4rem, 9vw, 8.6rem); line-height: .88; max-width: 12ch; }
.pfadhueter__rede { display: grid; gap: 1rem; max-width: 36ch; font-style: italic; font-size: clamp(1.15rem, .9vw + .95rem, 1.5rem); line-height: 1.5; }
.pfadhueter__rede { text-align: left; }
/* schmal: Text liegt ueber der Ecke unten links -> unten genau Eckenhoehe (613/632) + Abstand + 1,6rem Luft */
@media (max-width: 64rem) { .pfadhueter { padding-bottom: calc(var(--ecke-u) * .97 + var(--ecke-abstand) + 1.6rem); } }

/* ---------- Fuss ---------- */
.fuss { padding: clamp(3.5rem, 6vw, 5rem) var(--rand) calc(env(safe-area-inset-bottom, 0px) + 2.5rem); background: var(--grund); }   /* keine Haarlinie: der Pfadhueter laeuft weich aus */
.fuss__inhalt { max-width: 44rem; margin-inline: auto; display: grid; justify-items: center; text-align: center; gap: 1.4rem; }
.fuss .logo { width: 5.6rem; }
.fuss .logo img.wappen { width: 2.3rem; }
.fuss .logo img.wortmarke { width: 5.6rem; }
.fuss p { font-size: .88rem; color: var(--nebel); max-width: 34rem; }
.fuss .fuss__gruss { font-style: italic; font-size: 1.05rem; color: var(--pergament); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.6rem; font-size: .8rem;
           letter-spacing: .18em; text-transform: uppercase; }
.fuss ul a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss .kanaele { gap: 0 .6rem; }
/* 8 Kanaele: passen sie nicht in eine Zeile, dann ruhig 4 + 4 statt 7 + 1 (Tippziele bleiben 44 px) */
@media (max-width: 40rem) { .fuss .kanaele { display: grid; grid-template-columns: repeat(4, 2.75rem); justify-content: center; gap: .3rem 1.4rem; } }
.fuss .kanaele a { width: 2.75rem; justify-content: center; color: var(--pergament); }
.fuss .kanaele a:hover { color: var(--orange); }
.fuss .kanaele svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fuss .kanaele svg .voll { fill: currentColor; stroke: none; }
.fuss .ki-hinweis { font-size: .8rem; }
.fuss .ki-hinweis strong { color: var(--orange); font-weight: 500; }

/* ---------- Sagenseite ---------- */
.lesefortschritt { position: fixed; z-index: 50; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
                   background: var(--orange); box-shadow: 0 0 .8rem var(--glut); }
.sagenkopf { position: relative; isolation: isolate; min-height: max(34rem, 92svh); display: grid; align-items: end; overflow: hidden; }
.sagenkopf__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sagenkopf::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 80% at 70% 40%, transparent 40%, rgba(10,12,22,.6) 100%),
              linear-gradient(180deg, rgba(10,12,22,.6) 0%, rgba(10,12,22,0) 25%, rgba(10,12,22,.2) 55%, var(--grund) 100%); }
.sagenkopf__inhalt { width: 100%; max-width: var(--breit); margin-inline: auto; padding: 10rem var(--rand) clamp(2.4rem, 5vw, 4rem); display: grid; gap: 1.3rem; }
.pfadzeiger ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .7rem; margin: 0; padding: 0; font-size: .72rem; font-weight: 500;
                 letter-spacing: .22em; text-transform: uppercase; color: var(--nebel); }
.pfadzeiger li + li::before { content: ""; display: inline-block; width: .38em; height: .38em; background: var(--orange); transform: rotate(45deg);
                              margin-right: .7rem; vertical-align: .18em; }
.pfadzeiger a { color: var(--orange); }
.sagenkopf h1 { font-size: clamp(3.4rem, 10vw, 9rem); line-height: .88; max-width: 11ch; }
/* mit Zierinitiale wie in den Posts: Initiale ueber Artikel und Titel, darum kleinerer Grundgrad */
.sagenkopf h1.zier-titel { font-size: clamp(2.5rem, 6.2vw, 6rem); line-height: .9; max-width: 10em; }
.vorspann { max-width: 34rem; font-size: clamp(1.12rem, .8vw + .95rem, 1.4rem); font-weight: 300; line-height: 1.5; }
.angaben { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--nebel); }
.angaben span:first-child { color: var(--orange); }

.beitrag { padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(5rem, 9vw, 7rem); }
.beitrag__spalte { max-width: var(--mass); margin-inline: auto; display: grid; gap: 1.4rem; }
.beitrag__spalte > h2 { font-size: clamp(2.6rem, 5.5vw, 4rem); margin-top: 3rem; }
.beitrag__spalte > h3 { margin-top: 1.4rem; font-size: clamp(1.7rem, 2.6vw, 2.1rem); color: var(--orange); }
.beitrag__spalte .erstes::first-letter { font-family: var(--sp-titel); float: left; font-size: 5.4em; line-height: .78; padding: .05em .12em 0 0;
                                         color: var(--orange); text-shadow: 0 0 .3em rgba(255,122,46,.45); }
.beitrag__spalte sup { line-height: 0; }
.beitrag__spalte sup a { font-size: .7em; font-weight: 600; padding-inline: .08em; }
.beitrag__spalte p a { border-bottom: 1px solid var(--linie); }
.beitrag__spalte sup a { border-bottom: 0; }
.beitrag__spalte ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.beitrag__spalte ul li::marker { content: "◆  "; color: var(--orange); font-size: .7em; }
.beitrag__spalte blockquote { margin: .6rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 1px solid var(--orange);
                              font-size: .92rem; font-weight: 500; letter-spacing: .12em; line-height: 1.8; text-transform: uppercase; color: var(--orange-hell); }
.trenner { display: block; width: min(30rem, 86%); margin: 2.4rem auto .6rem; filter: drop-shadow(0 0 .6rem rgba(255,122,46,.35)); }
.film { margin: 0 calc(var(--rand) * -1) 1rem; position: relative; }
@media (min-width: 64rem) { .film { margin-inline: -12rem; } }
.film__flaeche { position: relative; display: block; isolation: isolate; color: var(--pergament); }
.film img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film__flaeche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,22,.75), rgba(10,12,22,.15) 60%);
                        box-shadow: inset 0 0 5rem 1rem rgba(10,12,22,.6); }
.film .abspielen { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: left; }   /* Mitte: die Zierecken bleiben frei */
.film figcaption { padding: .8rem var(--rand) 0; font-size: .82rem; color: var(--nebel); }
@media (min-width: 64rem) { .film figcaption { padding-inline: 0; } }
.hinfahren { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; padding-block: 1.6rem; border-block: 1px solid var(--linie); margin-top: 1rem; }
.hinfahren .etikett { grid-column: 1 / -1; }
.hinfahren address { font-style: normal; white-space: pre-line; font-size: 1.15rem; font-weight: 500; }
.hinfahren .leise { font-size: .92rem; }
.hinfahren .weg { grid-column: 1 / -1; justify-self: start; }
.fragen { display: grid; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 1.05rem 2.4rem 1.05rem 0; position: relative; font-weight: 500; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: .2rem; top: .8rem; font-size: 1.4rem; font-weight: 300; color: var(--orange); transition: transform var(--t-mittel) var(--kurve); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details > p { padding-bottom: 1.2rem; color: var(--nebel); }
.quellenblock { margin-top: 2rem; }
.quellenblock summary { list-style: none; cursor: pointer; display: inline-flex; }
.quellenblock summary::-webkit-details-marker { display: none; }
.quellen { font-size: .85rem; color: var(--nebel); padding-left: 1.4rem; display: grid; gap: .5rem; margin: 1.2rem 0 0; }
.quellen li::marker { color: var(--orange); font-variant-numeric: tabular-nums; }
.quellen a { word-break: break-word; }
/* ---------- Laden: Merch der Sage unten auf der Stationsseite (Plakat, Shirt …), „Kaufen“ fuehrt direkt zum Produkt im Spreadshop.
   Bildflaechen gleich hoch (4:5), Ware darin ganz sichtbar; Zierecken wie in den Posts. ---------- */
.laden-sage { padding: clamp(3.5rem, 8vw, 6rem) var(--rand) clamp(4rem, 9vw, 6.5rem); border-top: 1px solid var(--linie); }
.laden-sage__kopf { max-width: var(--mass); margin-inline: auto; display: grid; justify-items: center; gap: .9rem; text-align: center; }
.laden-sage__kopf h2 { margin: 0; font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1.05; text-wrap: balance; }
.laden-sage__kopf .leise { margin: 0; font-size: .95rem; }
.laden-sage__liste { list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; padding: 0; max-width: 62rem;
                     display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(2rem, 4vw, 3.2rem); }
.ware { display: grid; align-content: start; gap: .5rem; }
.ware__bild { position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: .9rem; overflow: hidden;
              background: radial-gradient(ellipse at 50% 42%, rgba(255,153,89,.10), transparent 62%), var(--nacht); border: 1px solid var(--linie); }
.ware__bild img { position: absolute; inset: 16%; width: 68%; height: 68%; object-fit: contain;   /* frei von den Zierecken */
                  transition: transform 1.2s var(--kurve); }
.ware__bild:hover img, .ware__bild:focus-visible img { transform: scale(1.03); }
.ware .etikett { margin: 0; }
.ware h3 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.1; text-wrap: balance; }
.ware__preis { margin: 0 0 .5rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--pergament); }
.ware__mwst { display: block; margin-top: .2rem; font-size: .8rem; color: var(--nebel); }
.ware__mwst a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.ware .weg { justify-self: start; min-height: 2.75rem; }
.laden-sage__alle { display: flex; justify-content: center; margin: clamp(2.4rem, 5vw, 3.4rem) 0 0; }
@media (prefers-reduced-motion: reduce) { .ware__bild img { transition: none; } }

.weiter { display: grid; grid-template-columns: 1fr 1fr; }
.weiter > * { position: relative; isolation: isolate; min-height: 16rem; padding: 2.4rem var(--rand); display: grid; align-content: end; gap: .4rem; color: var(--pergament); overflow: hidden; }
.weiter > * + * { text-align: right; justify-items: end; }
.weiter > .bald { text-align: right; justify-items: end; }
.weiter img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .35; transition: opacity var(--t-mittel) var(--kurve), transform 1.6s var(--kurve); }
.weiter a:hover img { opacity: .55; transform: scale(1.03); }
.weiter .titel { font-family: var(--sp-titel); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; }
.weiter a:hover .titel { color: var(--orange); }
.rechtstext { max-width: var(--mass); margin-inline: auto; display: grid; gap: 1.2rem; }
.rechtstext h1 { font-size: clamp(3rem, 7vw, 5rem); }
.rechtstext h2 { font-size: 2.2rem; margin-top: 1.4rem; }
.platzhalter { color: var(--orange-hell); }
.ki { font-size: .85rem; color: var(--nebel); padding-top: 1.2rem; border-top: 1px solid var(--linie); }

/* ---------- Schmal ---------- */
@media (max-width: 64rem) {
  .tafel { position: fixed; z-index: 60; inset: auto 0 0 0; width: 100%; max-height: 62svh; padding: 1.2rem var(--rand) calc(env(safe-area-inset-bottom, 0px) + 1.4rem);
           background: var(--grund); border-top: 1px solid var(--orange); box-shadow: 0 -1.5rem 3rem rgba(0,0,0,.6);
           transform: translateY(100%); opacity: 1; }
  .offen .tafel { transform: none; }
}
@media (max-width: 36rem) {
  .logo { width: 5rem; } .logo img.wortmarke { width: 5rem; } .logo img.wappen { width: 2.1rem; }
  .hinfahren { grid-template-columns: minmax(0, 1fr); }
  .weiter { grid-template-columns: 1fr; }
}

/* ---------- Spur der Laterne auf der Karte: gepunktet wie eine Route auf alten Karten, verglimmt nach gut einer Sekunde ---------- */
.karte .spur { fill: var(--orange-hell); pointer-events: none; animation: verglimmen 1.8s var(--kurve) forwards; }
@keyframes verglimmen { 0% { opacity: 1; } 45% { opacity: .85; } 100% { opacity: 0; } }
.karte .station-bald .raute-p { fill: var(--grund); stroke: var(--orange); stroke-dasharray: 2 2; }
/* geplante Stationen: noch nicht entzuendet; Ort und Datum beim Ueberfahren */
.karte .ort.kuenftig .raute-p { fill: var(--grund); stroke: var(--nebel); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: .85; }
.karte .ort.kuenftig:hover .raute-p { stroke: var(--orange-hell); }
.karte .ort.kuenftig text { font-size: 9.5px; fill: var(--nebel); }
.tafel .bald-titel { font-family: var(--sp-titel); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; margin: .4rem 0; }
.karte .station-bald .bald-text { opacity: 1; font-size: 9.5px; fill: var(--orange-hell); }
.karte .land { fill-rule: evenodd; }

/* ---------- Der Pfad durch die Seite (pfad.js): Glutspur ----------
   Punkte wie die Laternenspur auf der Karte. Dunkel vor der Laterne, beim Vorbeiziehen glimmen sie auf. */
.pfadspur { position: absolute; top: 0; left: 0; width: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.pfadspur path { fill: none; stroke: none; }
.pfadspur .punkt { fill: var(--nebel); opacity: .26; transition: fill var(--t-lang) var(--kurve), opacity var(--t-lang) var(--kurve); }
.pfadspur .punkt.an { fill: var(--orange); opacity: 1; }
.pfadspur .spitze { transition: opacity var(--t-mittel) var(--kurve); }
.pfadspur .spitze .kern { fill: #FFE2B8; }
.pfadspur .spitze .hof { fill: url(#pfadglut); animation: flackern 2.8s ease-in-out infinite; }
@keyframes flackern { 0%, 100% { opacity: 1; } 35% { opacity: .78; } 50% { opacity: .95; } 72% { opacity: .82; } }
/* Laterne des Pfadhueters: entzuendet sich, wenn das Licht ankommt */
.laterne-zeichen .flamme { transition: fill var(--t-lang) var(--kurve), filter var(--t-lang) var(--kurve); }
.laterne-zeichen .hof { opacity: .3; transition: opacity var(--t-lang) var(--kurve); }
.laterne-zeichen.entzuendet .flamme { fill: #FFE2B8; filter: drop-shadow(0 0 3px #FF7A2E) drop-shadow(0 0 9px rgba(255,122,46,.85)); }
.laterne-zeichen.entzuendet .hof { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pfadspur .punkt, .laterne-zeichen .flamme, .laterne-zeichen .hof { transition: none; } .pfadspur .spitze .hof { animation: none; } }

/* Laterne zum Anfassen (seite.js): Ueberfahren oder Antippen laesst sie am Ring schwingen, die Flamme schlaegt hoch,
   der Lichthof waechst und Funken steigen auf. Gilt fuer die Laterne des Pfadhueters und die auf der Karte. */
.pfadhueter .laterne-zeichen { width: clamp(3.4rem, 5vw, 4.2rem); transform-origin: 50% 6%; touch-action: manipulation; }
.laterne-zeichen .hof { transform-box: fill-box; transform-origin: center; transition: opacity var(--t-lang) var(--kurve), transform var(--t-lang) var(--kurve); }
.laterne-zeichen .flamme { transform-box: fill-box; transform-origin: 50% 100%; }
.laterne-zeichen.wach .flamme { fill: #FFF1DC; filter: drop-shadow(0 0 3px #FF7A2E) drop-shadow(0 0 12px rgba(255,122,46,.95)); animation: lodern .32s ease-in-out infinite alternate; }
.laterne-zeichen.wach .hof { opacity: 1; transform: scale(1.45); }
.laterne-zeichen.schwingt { animation: schwingen 2.6s cubic-bezier(.33, 0, .25, 1); }
.laterne-zeichen .funke { fill: #FFDDB0; opacity: 0; animation: funke var(--dauer, 1.3s) var(--verz, 0s) cubic-bezier(.15, .55, .3, 1) forwards; }
@keyframes lodern { from { transform: scale(1, 1); } to { transform: scale(.9, 1.16); } }
@keyframes schwingen { 0% { transform: rotate(0); } 9% { transform: rotate(11deg); } 25% { transform: rotate(-7.5deg); } 41% { transform: rotate(4.6deg); }
                       57% { transform: rotate(-2.7deg); } 73% { transform: rotate(1.3deg); } 88% { transform: rotate(-.5deg); } 100% { transform: rotate(0); } }
@keyframes funke { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 10% { opacity: 1; } 70% { opacity: .8; }
                   100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -30px)) scale(.35); } }
/* Die Laterne auf der Karte: getragen von der Maus (karte.js), in Ruhe an der neuesten Station */
.kartenlaterne { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(1.5rem, 5.4%, 2.9rem); pointer-events: none;
                 transform-origin: 50% 6%; transition: opacity var(--t-kurz, .2s) var(--kurve); will-change: transform; }
/* auf der hellen Karte braucht sie eine Silhouette: dunkles Eisen, warm leuchtendes Glas, Schatten */
.kartenlaterne .laterne-zeichen { display: block; width: 100%; filter: drop-shadow(0 3px 4px rgba(6,8,16,.75)); }
.kartenlaterne .hof { fill: url(#kartenhof); }
.kartenlaterne .eisen { fill: #17120F; stroke: #FFB877; stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kartenlaterne .glas { fill: rgba(255, 176, 96, .42); stroke: #FFB877; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.kartenlaterne .streben { fill: none; stroke: #17120F; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.kartenlaterne.aus { opacity: 0; }
.karte.mit-laterne svg, .karte.mit-laterne .land, .karte.mit-laterne .ort { cursor: none; }
@media (prefers-reduced-motion: reduce) {
  .laterne-zeichen.schwingt, .laterne-zeichen.wach .flamme, .laterne-zeichen .funke { animation: none; }
  .laterne-zeichen .funke { display: none; }
}
.pfad-an .wegbuch li::after { display: none; }
.weiter .bald { position: relative; isolation: isolate; min-height: 16rem; padding: 2.4rem var(--rand); display: grid; align-content: end; gap: .4rem; overflow: hidden; }
.weiter .bald img { opacity: .18; filter: grayscale(.6); }

/* ---------- Das Wegbuch: Stationen neben der Karte, auf der Linie des Pfads ---------- */
.wegbuch { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 30rem; position: relative; }
.wegbuch li { position: relative; padding: 0 0 2rem 2.4rem; }
.wegbuch .etikett { font-size: .68rem; }
.wegbuch li::before { content: ""; position: absolute; left: 0; top: .3rem; width: .7rem; height: .7rem; background: var(--orange); transform: rotate(45deg);
                      box-shadow: 0 0 .9rem rgba(255,122,46,.6); }
.wegbuch li::after { content: ""; position: absolute; left: .34rem; top: 1.35rem; bottom: .1rem; width: 1px; background: var(--orange); opacity: .6; }
.wegbuch li:last-child::after { display: none; }
.wegbuch li:has(+ li.bald)::after { background: repeating-linear-gradient(var(--orange) 0 4px, transparent 4px 9px); opacity: .8; }
.wegbuch li.bald::before { background: var(--grund); box-shadow: inset 0 0 0 1px var(--orange); }
.wegbuch a, .wegbuch li > div { display: grid; gap: .25rem; color: var(--pergament); }
.wegbuch .titel { font-family: var(--sp-titel); font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.02; transition: color var(--t-kurz) var(--kurve); }
.wegbuch a:hover .titel { color: var(--orange); }
.wegbuch .ort { font-size: .92rem; color: var(--nebel); font-style: italic; }
.wegbuch li.bald .titel { color: var(--nebel); }
.wegbuch-alle { padding-left: var(--einzug); }

/* ---------- Ebene 2: Bundesland-Karte (karte.js blendet sie nach der Kamerafahrt ueber die Deutschlandkarte) ---------- */
.landebene { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; transform: scale(.94);
             transition: opacity var(--t-mittel) var(--kurve), transform var(--t-lang) var(--kurve), visibility 0s linear var(--t-mittel); }
.landebene.an { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-mittel) var(--kurve), transform var(--t-lang) var(--kurve); }
.landebene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.landebene image { filter: drop-shadow(0 0 18px rgba(255,122,46,.18)); }
.karte.mit-landkarte > svg { opacity: 0; transition: opacity var(--t-mittel) var(--kurve); }
.landebene .lort .raute-p { fill: var(--orange); stroke: var(--grund); stroke-width: 2px; vector-effect: non-scaling-stroke;
                            filter: drop-shadow(0 0 6px rgba(255,122,46,.8)); }
.landebene .lort.bald .raute-p { fill: var(--grund); stroke: var(--orange); stroke-dasharray: 3 2; filter: none; }
.landebene .lort-in { transform: scale(var(--k, 1)); transform-origin: 0 0; }   /* Marken bleiben auf jedem Bildschirm gleich gross */
.landebene .lort text { font-family: var(--sp-text); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--pergament);
                        paint-order: stroke; stroke: rgba(10,12,22,.85); stroke-width: 4px; stroke-linejoin: round; }
.landebene .lort .lort-datum { font-size: 10px; font-weight: 500; letter-spacing: .12em; fill: var(--orange); }
.landebene a { cursor: pointer; }
.karte.mit-laterne .landebene a { cursor: none; }
.landebene a:hover .raute-p, .landebene a:focus-visible .raute-p { fill: var(--orange-hell); }
@media (prefers-reduced-motion: reduce) { .landebene, .landebene.an { transition: none; transform: none; } }

/* Landkarte wie die Deutschlandkarte: abgedunkelt, unter der Laterne hell (Maske in karte.js); am Handy ganz hell */
.karte .landebene .land-grund { filter: brightness(.42) saturate(.85); }
.karte .landebene .land-schein { mix-blend-mode: screen; pointer-events: none; }
.karte.ohne-laterne .landebene .land-grund { filter: none; }
.karte.ohne-laterne .landebene .land-licht, .karte.ohne-laterne .landebene .land-schein { display: none; }

/* Ebene 3: Stadtplan liegt ueber der Landkarte */
.stadtebene { z-index: 2; }
.landebene.hinten { opacity: 0; }

/* ---------- Wissen (Sonntagsbeitraege): Kopf wie die Stationen, Ueberschriften in Titelschrift und Sagen-Orange ---------- */
.wissenkopf { min-height: max(32rem, 82svh); }
.sagenkopf.wissenkopf h1.zier-titel, .wissen-kopf h1.zier-titel { color: var(--orange); font-size: clamp(2.3rem, 4.8vw, 4.6rem); line-height: .95; max-width: 14em; }
.wissenkopf .zier-titel[data-initiale]::before, .wissen-kopf .zier-titel[data-initiale]::before { color: var(--orange); text-shadow: 0 0 .25em rgba(255,122,46,.4); }
.wissen-beitrag .beitrag__spalte > h2 { color: var(--orange); font-size: clamp(2.1rem, 3.8vw, 3rem); line-height: 1; }
.wissen-beitrag .beitrag__spalte > h2:first-child { margin-top: 0; }   /* kein Film davor wie auf den Stationen */
/* Textseite links etwas abdunkeln: Brotkrumen und Vorspann bleiben auch vor hellem Himmel lesbar (Bilder sind keine Filmstandbilder mit fester Bildruhe) */
.wissenkopf::after { background: linear-gradient(90deg, rgba(10,12,22,.62) 0%, rgba(10,12,22,.3) 45%, rgba(10,12,22,0) 70%),
  radial-gradient(110% 80% at 70% 40%, transparent 40%, rgba(10,12,22,.6) 100%),
  linear-gradient(180deg, rgba(10,12,22,.6) 0%, rgba(10,12,22,0) 25%, rgba(10,12,22,.2) 55%, var(--grund) 100%); }
.weiter--stationen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); border-top: 1px solid var(--linie); }
.weiter--stationen > * + * { text-align: left; justify-items: start; }
.mehr-wissen { display: grid; gap: .6rem; padding-top: 1.4rem; border-top: 1px solid var(--linie); }
.mehr-wissen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mehr-wissen ul li::marker { content: ""; }   /* keine Listen-Raute: die Titel stehen fuer sich */
.mehr-wissen a { font-family: var(--sp-titel); font-size: clamp(1.5rem, 2.2vw, 1.8rem); line-height: 1.05; color: var(--pergament); border-bottom: 0; }
.mehr-wissen a:hover { color: var(--orange); }
/* Uebersicht /wissen/: die neueste Karte im Raster der Seite (61,8 % Bild | 38,2 % Text), die aelteren darunter in Spalten */
.wissen-inhalt { max-width: var(--breit); margin-inline: auto; }
.wissen-kopf { display: grid; gap: 1.3rem; max-width: 44rem; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.wissen-kopf h1.zier-titel { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .92; }
.wissen-kopf p { margin: 0; }
.wissen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: clamp(3rem, 6vw, 4.5rem) var(--fuge); }
.wissen-karte { display: grid; align-content: start; gap: 1.1rem; }
.wissen-karte__bild { display: block; overflow: hidden; }
.wissen-karte__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.6s var(--kurve), opacity var(--t-mittel) var(--kurve); opacity: .9; }
.wissen-karte:hover .wissen-karte__bild img { transform: scale(1.03); opacity: 1; }
.wissen-karte__text { display: grid; align-content: start; gap: .8rem; }
.wissen-karte__text p { margin: 0; }
.wissen-karte__text p:not(.etikett) { color: var(--nebel); }
.wissen-karte__titel { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1; color: var(--orange); }
.wissen-karte__titel a { color: inherit; }
.wissen-karte__titel a:hover { color: var(--orange-hell); }
.wissen-karte .weg { justify-self: start; }
@media (min-width: 64rem) {
  .wissen-karte:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: var(--fuge); align-items: end; }
  .wissen-karte:first-child .wissen-karte__titel { font-size: clamp(2.6rem, 3.8vw, 3.6rem); }
}
.wissen-leer { margin: 0; color: var(--nebel); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .wissen-karte__bild img { transition: none; } }

/* ===================== Anpassung an Elementor (kostenlos) + Hello-Theme =====================
   Wird an stil.css angehaengt. Alles unter body.sagenpfad, damit alte Seiten unberuehrt bleiben.
   Container: Klassen stehen in Elementor unter Erweitert > CSS-Klassen. */

body.sagenpfad { background: var(--grund); color: var(--pergament); font-family: var(--sp-text); }
body.sagenpfad .site-main, body.sagenpfad .page-content, body.sagenpfad .elementor { background: transparent; }
body.sagenpfad .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px; --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; }
body.sagenpfad .elementor-widget:not(:last-child) { margin-block-end: 0; }
body.sagenpfad .elementor-widget-container { margin: 0; padding: 0; }
body.sagenpfad.admin-bar .kopf:not(.kopf--fest) { top: 32px; }
@media (max-width: 782px) { body.sagenpfad.admin-bar .kopf:not(.kopf--fest) { top: 46px; } }
.elementor-editor-active .erscheinen, .elementor-editor-preview .erscheinen { opacity: 1 !important; transform: none !important; }

/* Schrift und Farbe gegen Kit-Vorgaben durchsetzen */
body.sagenpfad .elementor-widget-text-editor { color: inherit; font-family: var(--sp-text); font-size: inherit; font-weight: inherit; line-height: inherit; }
body.sagenpfad .elementor-widget-text-editor p + p, body.sagenpfad .elementor-widget-text-editor p + blockquote,
body.sagenpfad .elementor-widget-text-editor blockquote + p, body.sagenpfad .elementor-widget-text-editor p + ul { margin-top: 1.4rem; }
body.sagenpfad .elementor-widget-heading .elementor-heading-title { font-family: var(--sp-titel); font-weight: 400; color: var(--pergament);
  line-height: .95; letter-spacing: .005em; text-wrap: balance; margin: 0; padding: 0; }
body.sagenpfad .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(3.4rem, 10vw, 9rem); line-height: .88; }
body.sagenpfad .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(3rem, 7vw, 6rem); }
body.sagenpfad .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
body.sagenpfad a { text-decoration: none; }

/* Hello-Theme faerbt JEDEN Knopf beim Ueberfahren/Fokus mit #c36 (Rosa) und gibt ihm Rahmen/Radius.
   Auf unseren Seiten zuruecksetzen; jede Klasse bringt ihre eigene Hover-Farbe mit. */
body.sagenpfad :is(button, [type=button], [type=submit]) { border-radius: 0; white-space: normal; transition: color var(--t-kurz) var(--kurve); }
body.sagenpfad :is(button, [type=button], [type=submit]):is(:hover, :focus) { background-color: transparent; color: inherit; }
body.sagenpfad .abspielen:is(:hover, :focus) { color: var(--pergament); }
body.sagenpfad :is(.filmhalt, .tafel__zu):is(:hover, :focus-visible) { color: var(--orange); }
body.sagenpfad .vorfuehrung__zu:is(:hover, :focus-visible) { color: var(--orange-hell); }

/* Buehne: Filmplakat */
body.sagenpfad .e-con.buehne { display: grid; align-content: end; position: relative; isolation: isolate; overflow: hidden; min-height: max(32rem, 68svh); }   /* Karte weit oben (Caesar 12.10.2026): sie ragt schon ins erste Bild */
body.sagenpfad .buehne > .elementor-background-video-container { z-index: 0; }
body.sagenpfad .buehne::before { z-index: 1; }
body.sagenpfad .buehne > .e-con { position: relative; z-index: 2; }
body.sagenpfad .buehne > .elementor-widget-shortcode { position: static; }
body.sagenpfad .buehne .buehne__rand { z-index: 3; }
body.sagenpfad .e-con.buehne__inhalt { display: grid; gap: 1.1rem; width: 100%; max-width: var(--raster); margin-inline: auto;
  padding: 8rem var(--rand) clamp(2.2rem, 4vw, 3.4rem); container-type: inline-size; }
body.sagenpfad .buehne h1.elementor-heading-title { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: .05em; line-height: .9;
  max-width: none; text-wrap: nowrap; font-size: clamp(3.4rem, 10.2cqi, 9.6rem); }
body.sagenpfad .e-con.buehne__fuss { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: 1.4rem var(--fuge); align-items: end; margin-top: clamp(.8rem, 2vw, 1.6rem); }
body.sagenpfad .buehne__unter { max-width: 30rem; font-size: clamp(1.05rem, .5vw + .95rem, 1.25rem); font-weight: 300; line-height: 1.55; }
@media (max-width: 64rem) { body.sagenpfad .e-con.buehne__fuss { grid-template-columns: minmax(0, 1fr); } }

/* Station, Kartentisch, Pfadhueter */
body.sagenpfad .elementor-shortcode { display: block; }
body.sagenpfad .e-con.neu { display: block; }
body.sagenpfad .e-con.kartentisch { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: 0 var(--fuge);
  max-width: var(--raster); margin-inline: auto; width: 100%; padding: clamp(2rem, 4vw, 3.5rem) var(--rand) clamp(5rem, 9vw, 8rem); }
body.sagenpfad .e-con.kartentisch__karte { display: block; min-width: 0; }
body.sagenpfad .kartentisch__karte > .elementor-widget-shortcode { position: sticky; top: 2rem; }
body.sagenpfad .kartentisch__karte .kartenbuehne { position: relative; top: 0; }
body.sagenpfad .e-con.kartentisch__buch { display: grid; align-content: start; gap: 1.1rem; position: relative; min-width: 0; padding-top: clamp(1rem, 4vw, 3rem); }
body.sagenpfad .kartentisch__buch > .elementor-widget:not(.elementor-widget-shortcode) { padding-left: var(--einzug); }
body.sagenpfad .kartentisch__buch > .elementor-widget-shortcode { position: static; }
body.sagenpfad .kartentisch__buch h2.elementor-heading-title { font-size: clamp(3rem, 5.4vw, 5.4rem); }
body.sagenpfad .kartentisch__buch .elementor-widget-text-editor:not(:first-child) { color: var(--nebel); max-width: 26rem; }
body.sagenpfad .e-con.pfadhueter { display: grid; justify-items: center; text-align: center; gap: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(7rem, 12vw, 10rem) var(--rand); }
/* Elementor legt auf .e-con::before sein Hintergrund-Overlay (halbe Deckkraft): fuer Gewebe und Ecken zuruecksetzen */
/* wie main im Prototyp: randlose Flaechen (Gewebe reicht per 100vw bis an den Rand, inkl. Scrollleiste) duerfen nie seitlich
   scrollen lassen; clip statt hidden, damit die Karte sticky bleibt */
body.sagenpfad .elementor { overflow-x: clip; }
body.sagenpfad .e-con.gewebe::before { content: ""; opacity: 1; mix-blend-mode: normal; border-radius: 0; transition: none; width: auto; height: auto; }
body.sagenpfad .e-con.mit-ecken::after { content: ""; opacity: 1; width: auto; height: auto; }
body.sagenpfad .elementor-widget.trenner-widget { width: min(100%, 16rem); }
body.sagenpfad .trenner-widget .trenner-raute { width: 100%; }
body.sagenpfad .pfadhueter h2.elementor-heading-title { font-size: clamp(3.4rem, 9vw, 8.6rem); line-height: .88; max-width: 12ch; margin-inline: auto; }
body.sagenpfad .pfadhueter__rede { display: grid; gap: 1rem; max-width: 36ch; font-style: italic; font-size: clamp(1.15rem, .9vw + .95rem, 1.5rem); line-height: 1.5; }
body.sagenpfad .pfadhueter__rede p + p { margin-top: 1rem; }
@media (max-width: 64rem) {
  body.sagenpfad .e-con.kartentisch { grid-template-columns: minmax(0, 1fr); }
  body.sagenpfad .e-con.kartentisch__buch { padding-top: 0; margin-top: 2.5rem; }   /* Handy: erst die Karte, dann das Wegbuch */
  body.sagenpfad .kartentisch__karte > .elementor-widget-shortcode { position: relative; top: 0; }
  body.sagenpfad .e-con.kartentisch__karte { padding-left: var(--einzug); }
  body.sagenpfad .e-con.pfadhueter { padding-bottom: calc(var(--ecke-u) * .97 + var(--ecke-abstand) + 1.6rem); }
}

/* Rechtstext */
body.sagenpfad .e-con.raum { display: block; padding: clamp(5rem, 11vw, 9rem) var(--rand); }
body.sagenpfad .e-con.rechtstext { display: grid; gap: 1.2rem; max-width: var(--mass); margin-inline: auto; width: 100%; }
body.sagenpfad .rechtstext h1.elementor-heading-title { font-size: clamp(3rem, 7vw, 5rem); }
body.sagenpfad .rechtstext .elementor-widget-text-editor h2 { font-family: var(--sp-titel); font-weight: 400; font-size: 2.2rem; line-height: 1; margin: 2rem 0 .8rem; }
body.sagenpfad .rechtstext .elementor-widget-text-editor p + p { margin-top: 1rem; }

/* Sagenseite */
body.sagenpfad .e-con.sagenkopf { display: grid; align-content: end; position: relative; isolation: isolate; overflow: hidden; min-height: max(34rem, 92svh); }
body.sagenpfad .sagenkopf > .elementor-widget-shortcode:first-child { position: absolute; inset: 0; z-index: -2; }
body.sagenpfad .sagenkopf > .elementor-widget-shortcode:first-child .elementor-widget-container,
body.sagenpfad .sagenkopf > .elementor-widget-shortcode:first-child .elementor-shortcode { height: 100%; }
body.sagenpfad .e-con.sagenkopf__inhalt { display: grid; gap: 1.3rem; width: 100%; max-width: var(--breit); margin-inline: auto; padding: 10rem var(--rand) clamp(2.4rem, 5vw, 4rem); }
body.sagenpfad .sagenkopf h1.elementor-heading-title { max-width: 11ch; }
/* Zier-Titel: die Klasse sitzt am Widget und (per Filter) an der Ueberschrift; nur die Ueberschrift ist das Raster */
body.sagenpfad .elementor-widget.zier-titel { display: block; }
/* Elementor setzt Widgets auf max-width:100% (.elementor.elementor .e-con > .elementor-widget) - Textmasse muessen dagegen gewinnen */
body.sagenpfad .elementor.elementor .e-con > .elementor-widget.vorspann { max-width: 34rem; }
body.sagenpfad .elementor.elementor .e-con > .elementor-widget.buehne__unter { max-width: 30rem; }
body.sagenpfad .elementor.elementor .e-con > .elementor-widget.pfadhueter__rede { max-width: 36ch; }
body.sagenpfad .sagenkopf h1.elementor-heading-title.zier-titel { max-width: 10em; font-size: clamp(2.5rem, 6.2vw, 6rem); line-height: .9; }
body.sagenpfad .vorspann { max-width: 34rem; font-size: clamp(1.12rem, .8vw + .95rem, 1.4rem); font-weight: 300; line-height: 1.5; }
body.sagenpfad .e-con.beitrag { display: block; padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(5rem, 9vw, 7rem); }
body.sagenpfad .e-con.beitrag__spalte { display: grid; gap: 1.4rem; max-width: var(--mass); margin-inline: auto; width: 100%; }
body.sagenpfad .beitrag__spalte > .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(2.6rem, 5.5vw, 4rem); }
body.sagenpfad .beitrag__spalte > .elementor-widget-heading:has(h2) { margin-top: 3rem; }
body.sagenpfad .beitrag__spalte > .elementor-widget-heading h3.elementor-heading-title { color: var(--orange); }
body.sagenpfad .beitrag__spalte > .elementor-widget-heading:has(h3) { margin-top: 1.4rem; }
body.sagenpfad .beitrag__spalte .erstes::first-letter { font-family: var(--sp-titel); float: left; font-size: 5.4em; line-height: .78; padding: .05em .12em 0 0;
  color: var(--orange); text-shadow: 0 0 .3em rgba(255,122,46,.45); }
body.sagenpfad .beitrag__spalte .elementor-widget-text-editor a:not(sup a) { border-bottom: 1px solid var(--linie); }
body.sagenpfad .beitrag__spalte sup { line-height: 0; }
body.sagenpfad .beitrag__spalte sup a { font-size: .7em; font-weight: 700; padding-inline: .08em; }
body.sagenpfad .beitrag__spalte blockquote { margin: .6rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 1px solid var(--orange); font-size: .92rem;
  letter-spacing: .12em; line-height: 1.8; text-transform: uppercase; color: var(--orange-hell); }
body.sagenpfad .elementor-widget-image.trenner img { width: min(30rem, 86%); margin: 2.4rem auto .6rem; filter: drop-shadow(0 0 .6rem rgba(255,122,46,.35)); }
body.sagenpfad .e-con.hinfahren { display: grid; gap: 1rem; padding-block: 1.6rem; border-block: 1px solid var(--linie); margin-top: 1rem; }
body.sagenpfad .hinfahren address { font-style: normal; font-size: 1.15rem; font-weight: 700; }
body.sagenpfad .hinfahren .leise { font-size: .92rem; margin-top: .6rem; }
body.sagenpfad .e-con.weiter-raum { display: block; }
body.sagenpfad .ki .elementor-widget-container, body.sagenpfad .elementor-widget-text-editor.ki { font-size: .85rem; color: var(--nebel); padding-top: 1.2rem; border-top: 1px solid var(--linie); }

/* Knopf als Textlink mit Linie */
body.sagenpfad .weg-knopf .elementor-button { background: none; border: 0; border-radius: 0; padding: .7rem 0; min-height: 2.75rem; box-shadow: none;
  font-family: var(--sp-text); font-size: .8rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--pergament);
  display: inline-flex; align-items: center; gap: .8rem; }
body.sagenpfad .weg-knopf .elementor-button::after { content: ""; width: 2.4rem; height: 1px; background: var(--orange); transition: width var(--t-mittel) var(--kurve); }
body.sagenpfad .weg-knopf .elementor-button:hover { color: var(--orange-hell); background: none; }
body.sagenpfad .weg-knopf .elementor-button:hover::after { width: 3.6rem; }

/* Aufklapper: Fragen und Quellen */
body.sagenpfad .elementor-toggle .elementor-toggle-item { border-top: 1px solid var(--linie); margin: 0; }
body.sagenpfad .fragen .elementor-toggle .elementor-toggle-item:last-child { border-bottom: 1px solid var(--linie); }
body.sagenpfad .elementor-toggle .elementor-tab-title { border: 0; padding: 1.05rem 2.4rem 1.05rem 0; position: relative; font-family: var(--sp-text);
  font-weight: 700; color: var(--pergament); cursor: pointer; }
body.sagenpfad .elementor-toggle .elementor-tab-title .elementor-toggle-title, body.sagenpfad .elementor-toggle .elementor-tab-title a { color: inherit; font: inherit; }
body.sagenpfad .elementor-toggle .elementor-tab-title .elementor-toggle-icon { display: none; }
body.sagenpfad .elementor-toggle .elementor-tab-title::after { content: "+"; position: absolute; right: .2rem; top: .8rem; font-size: 1.4rem; font-weight: 300;
  color: var(--orange); transition: transform var(--t-mittel) var(--kurve); }
body.sagenpfad .elementor-toggle .elementor-tab-title.elementor-active::after { transform: rotate(45deg); }
body.sagenpfad .elementor-toggle .elementor-tab-content { border: 0; padding: 0 0 1.2rem; color: var(--nebel); }
body.sagenpfad .quellenblock .elementor-toggle .elementor-toggle-item { border-top: 0; }
body.sagenpfad .quellenblock .elementor-tab-title { font-size: .8rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; padding-right: 0; display: inline-flex; gap: .8rem; align-items: center; }
body.sagenpfad .quellenblock .elementor-tab-title::after { position: static; content: ""; width: 2.4rem; height: 1px; background: var(--orange); }
body.sagenpfad .quellenblock .elementor-tab-title.elementor-active::after { transform: none; width: 3.6rem; }
body.sagenpfad .quellenblock .quellen { font-size: .85rem; color: var(--nebel); padding-left: 1.4rem; display: grid; gap: .5rem; margin: .4rem 0 0; }


/* ---------- Buehne: Aktionen als zwei normale Elementor-Buttons (Beschriftung/Ziel im Editor aenderbar) ---------- */
body.sagenpfad .e-con.buehne__aktionen { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem 2rem;
  padding: 0 0 0 var(--einzug); position: relative; width: auto; }
body.sagenpfad .e-con.buehne__aktionen > .elementor-widget { width: auto; max-width: none; }
/* "Intro ansehen": Raute mit Dreieck wie der Abspielknopf im Prototyp */
body.sagenpfad .abspielen-knopf .elementor-button { position: relative; display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0 0 0 4.2rem;
  background: none; border: 0; border-radius: 0; box-shadow: none; font-family: var(--sp-text); font-size: .8rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pergament); }
body.sagenpfad .abspielen-knopf .elementor-button::before { content: ""; position: absolute; left: .45rem; top: 50%; width: 2.3rem; height: 2.3rem; margin-top: -1.15rem;
  border: 1px solid var(--orange); transform: rotate(45deg); box-shadow: 0 0 1.2rem rgba(255,122,46,.35);
  transition: background var(--t-mittel) var(--kurve), transform var(--t-mittel) var(--kurve); }
body.sagenpfad .abspielen-knopf .elementor-button::after { content: ""; position: absolute; left: 1.35rem; top: 50%; margin-top: -.42rem;
  border-style: solid; border-width: .42rem 0 .42rem .7rem; border-color: transparent transparent transparent var(--orange-hell); }
body.sagenpfad .abspielen-knopf .elementor-button:is(:hover, :focus) { background: none; color: var(--pergament); }
body.sagenpfad .abspielen-knopf .elementor-button:hover::before { background: rgba(255,153,89,.18); transform: rotate(135deg); }

/* ---------- Fuss als Elementor-Vorlage (Header & Footer) ---------- */
body.sagenpfad .e-con.fuss { display: block; padding: clamp(3.5rem, 6vw, 5rem) var(--rand) calc(env(safe-area-inset-bottom, 0px) + 2.5rem); background: var(--grund); }
body.sagenpfad .e-con.fuss__inhalt { max-width: 44rem; margin-inline: auto; display: grid; justify-items: center; text-align: center; gap: 1.4rem; padding: 0; }
body.sagenpfad .fuss .elementor-widget { width: auto; max-width: 100%; }
body.sagenpfad .fuss .elementor-widget-text-editor p { margin: 0; }
body.sagenpfad .fuss .elementor-widget-text-editor:not(:has(.fuss__gruss)) p { font-size: .88rem; color: var(--nebel); max-width: 34rem; }

/* ---------- „Bald auf dem Pfad“: Kanaele im Pfadhueter (gleiche Zeichen wie im Fuss) ---------- */
body.sagenpfad .pfadhueter .kanaele { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .6rem; }
body.sagenpfad .pfadhueter .kanaele a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; color: var(--pergament); }
body.sagenpfad .pfadhueter .kanaele a:hover { color: var(--orange); }
body.sagenpfad .pfadhueter .kanaele svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }
body.sagenpfad .pfadhueter .kanaele svg .voll { fill: currentColor; stroke: none; }
@media (max-width: 40rem) { body.sagenpfad .pfadhueter .kanaele { display: grid; grid-template-columns: repeat(4, 2.75rem); justify-content: center; gap: .3rem 1.4rem; } }

/* Laden (Merch der Sage): Elementor-Gegenstueck zu .laden-sage in stil.css */
body.sagenpfad .e-con.laden-sage { display: block; padding: clamp(3.5rem, 8vw, 6rem) var(--rand) clamp(4rem, 9vw, 6.5rem); border-top: 1px solid var(--linie); }
body.sagenpfad .e-con.laden-sage__kopf { display: grid; justify-items: center; gap: .9rem; max-width: var(--mass); margin-inline: auto; text-align: center; }
body.sagenpfad .laden-sage__kopf .elementor-heading-title { margin: 0; font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1.05; text-wrap: balance; }
body.sagenpfad .laden-sage__kopf p { margin: 0; }
body.sagenpfad .e-con.laden-sage__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(2rem, 4vw, 3.2rem);
                                          max-width: 62rem; width: 100%; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; }
body.sagenpfad .e-con.ware { display: grid; align-content: start; gap: .5rem; }
body.sagenpfad .ware p { margin: 0; }
body.sagenpfad .elementor-widget-image.ware__bild { position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: .9rem; overflow: hidden;
                  background: radial-gradient(ellipse at 50% 42%, rgba(255,153,89,.10), transparent 62%), var(--nacht); border: 1px solid var(--linie); }
body.sagenpfad .elementor-widget-image.ware__bild img { position: absolute; inset: 16%; width: 68%; height: 68%; max-width: none; object-fit: contain; transition: transform 1.2s var(--kurve); }
body.sagenpfad .elementor-widget-image.ware__bild a:hover img, body.sagenpfad .elementor-widget-image.ware__bild a:focus-visible img { transform: scale(1.03); }
body.sagenpfad .ware .elementor-heading-title { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.1; text-wrap: balance; }
body.sagenpfad .ware .ware__preis { margin-bottom: .5rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--pergament); }
body.sagenpfad .e-con.laden-sage__alle { display: flex; justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
@media (prefers-reduced-motion: reduce) { body.sagenpfad .elementor-widget-image.ware__bild img { transition: none; } }

/* ---------- Wissen (Sonntagsbeitraege): Elementor-Gegenstueck zu .wissenkopf / .wissen-beitrag / .wissen-kopf in stil.css ---------- */
body.sagenpfad .e-con.sagenkopf.wissenkopf { min-height: max(32rem, 82svh); }
body.sagenpfad .sagenkopf.wissenkopf h1.elementor-heading-title.zier-titel { color: var(--orange); font-size: clamp(2.3rem, 4.8vw, 4.6rem); line-height: .95; max-width: 14em; }
body.sagenpfad .wissen-beitrag .beitrag__spalte > .elementor-widget-heading h2.elementor-heading-title { color: var(--orange); font-size: clamp(2.1rem, 3.8vw, 3rem); line-height: 1; }
body.sagenpfad .wissen-beitrag .beitrag__spalte > .elementor-widget-heading:first-child { margin-top: 0; }
body.sagenpfad .e-con.wissen-inhalt { display: block; max-width: var(--breit); margin-inline: auto; width: 100%; }
body.sagenpfad .e-con.wissen-kopf { display: grid; gap: 1.3rem; max-width: 44rem; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
body.sagenpfad .wissen-kopf h1.elementor-heading-title.zier-titel { color: var(--orange); font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .92; max-width: none; }
body.sagenpfad .wissen-kopf .elementor-widget-text-editor p { margin: 0; }
/* Karten und Querverweise kommen aus Shortcodes: gegen Kit-Vorgaben fuer h2/a durchsetzen */
body.sagenpfad .wissen-karte__titel { font-family: var(--sp-titel); font-weight: 400; color: var(--orange); font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1; margin: 0; }
body.sagenpfad .wissen-karte__titel a { color: inherit; }
body.sagenpfad .wissen-karte__titel a:hover { color: var(--orange-hell); }
@media (min-width: 64rem) { body.sagenpfad .wissen-karte:first-child .wissen-karte__titel { font-size: clamp(2.6rem, 3.8vw, 3.6rem); } }
body.sagenpfad .mehr-wissen a { font-family: var(--sp-titel); color: var(--pergament); border-bottom: 0; }
body.sagenpfad .mehr-wissen a:hover { color: var(--orange); }
/* [sage_wissen] ist leer, solange kein Wissensbeitrag die Station nennt: dann kein leerer Baustein im Raster (sonst 1,4rem mehr Abstand) */
body.sagenpfad:not(.elementor-editor-active) .beitrag__spalte > .elementor-widget-shortcode:has(.elementor-shortcode:empty) { display: none; }   /* im Editor bleibt er anklickbar */