/* ITZCMS-Sitepack „Nachtwächter“ – Nacht & Laterne mit Pergament */
:root {
  --night: #0b0f18; --night-2: #121a29; --night-3: #1b2639;
  --moon: #e9e2cf; --moon-dim: #b8b2a2;
  --gold: #e0a84a; --gold-soft: #f4d391;
  --parchment: #efe2c2; --parchment-2: #e3cf9f; --ink: #2a1f14; --ink-soft: #5b4630;
  --seal: #8b2a22;
  --serif: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --text: 'Alegreya', Georgia, serif;
  --fraktur: 'UnifrakturMaguntia', 'IM Fell English', serif;
  --header-h: 84px;
  --radius: 4px;
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--moon); font: 400 1.125rem/1.65 var(--text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-soft); text-underline-offset: .2em; }
a:hover { color: #fff; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; color: #f6efdc; margin: 0 0 .5em; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 480px) { h1, h2, h3 { hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.wrap--narrow { --wrap: 860px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--night); padding: .6rem 1rem; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fraktur { font-family: var(--fraktur); color: var(--gold); font-size: 1.35rem; letter-spacing: .02em; margin: 0 0 .4rem; }
.lead { font-size: 1.25rem; color: var(--moon-dim); max-width: 46rem; }
.empty, .empty-dates { color: var(--moon-dim); font-style: italic; }
.icon { flex: none; vertical-align: -.2em; }

/* Buttons */
.button { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.4rem; border-radius: 999px; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #241707; font: 700 1rem/1 var(--text); letter-spacing: .02em; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,220,150,.3), 0 8px 28px -8px rgba(224,168,74,.7); transition: transform .2s, box-shadow .2s; }
.button:hover { color: #241707; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,220,150,.5), 0 12px 34px -8px rgba(224,168,74,.9); }
.button--small { padding: .55rem 1rem; font-size: .92rem; }
.button--ghost { background: transparent; color: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold); }
.button--ghost:hover { background: rgba(224,168,74,.12); color: #fff; }
.button--block { width: 100%; justify-content: center; }

/* Sternenhimmel (ohne Bilder): zwei Ebenen, leicht flackernd */
.stars, .stars::after { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff9, transparent), radial-gradient(1px 1px at 120px 80px, #fff7, transparent), radial-gradient(1.5px 1.5px at 200px 20px, #ffe9b3aa, transparent), radial-gradient(1px 1px at 280px 140px, #fff6, transparent), radial-gradient(1px 1px at 60px 170px, #fff5, transparent), radial-gradient(1.2px 1.2px at 330px 60px, #fffa, transparent);
  background-size: 360px 200px; }
.stars::after { content: ''; background-size: 520px 280px; opacity: .6; animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .15; } }

/* Kopf */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.site-header.is-scrolled { background: rgba(11,15,24,.88); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(224,168,74,.18); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .8rem; color: var(--moon); text-decoration: none; margin-right: auto; min-width: 0; }
.brand-lantern { color: var(--gold); filter: drop-shadow(0 0 10px rgba(224,168,74,.8)); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.15; }
.brand-tag { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moon-dim); }
@media (max-width: 600px) { .brand { gap: .55rem; } .brand-name { font-size: 1rem; } .brand-tag { font-size: .66rem; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Name höchstens zwei Zeilen, nichts abgeschnitten */
.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.main-nav ul a { color: var(--moon); text-decoration: none; font-size: 1.02rem; position: relative; }
.main-nav ul a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s; }
.main-nav ul a:hover::after { transform: scaleX(1); }
/* Untermenü Führungen */
.main-nav .has-sub { position: relative; display: flex; align-items: center; gap: .15rem; }
.sub-toggle { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; background: none; border: 0; color: var(--gold-soft); cursor: pointer; transition: transform .25s; }
.has-sub.is-open .sub-toggle { transform: rotate(180deg); }
.main-nav .sub-menu { position: absolute; top: calc(100% + .9rem); left: -1.2rem; z-index: 60; display: grid; gap: 0; min-width: 19rem; padding: .7rem; list-style: none; color: var(--ink);
  background: linear-gradient(180deg, var(--parchment), var(--parchment-2)); border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(91,70,48,.3) inset, 0 24px 50px -16px rgba(0,0,0,.9);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.main-nav .sub-menu::before { content: ''; position: absolute; left: 2.2rem; top: -7px; width: 14px; height: 14px; background: var(--parchment); transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(91,70,48,.25); }
.main-nav .sub-menu::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(91,70,48,.28); border-radius: 2px; pointer-events: none; }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu, .has-sub.is-open .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.main-nav .sub-menu a { display: flex; align-items: center; gap: .65rem; padding: .55rem .8rem; color: var(--ink); font-family: var(--serif); font-size: 1.08rem; border-radius: 3px; }
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a .icon { color: var(--seal); flex: none; opacity: .75; }
.main-nav .sub-menu a:hover, .main-nav .sub-menu a[aria-current] { background: rgba(139,42,34,.1); color: var(--seal); }
.menu-button { display: none; background: none; border: 0; color: var(--moon); width: 44px; height: 44px; cursor: pointer; }
.menu-lines { display: grid; gap: 6px; width: 26px; margin: auto; }
.menu-lines i { display: block; height: 1.5px; background: currentColor; transition: transform .25s, opacity .25s; }
@media (max-width: 960px) {
  .menu-button { display: block; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.5rem 1.25rem 2rem; background: rgba(11,15,24,.97); border-bottom: 1px solid rgba(224,168,74,.25); transform: translateY(-120%); transition: transform .3s; }
  .main-nav.is-open { transform: none; }
  .main-nav ul { flex-direction: column; gap: .2rem; }
  .main-nav ul a { display: block; padding: .6rem 0; font-family: var(--serif); font-size: 1.5rem; }
  .main-nav { max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
  .main-nav .has-sub { flex-wrap: wrap; }
  .main-nav .has-sub > a { flex: 1; }
  .sub-toggle { width: 44px; height: 44px; }
  .main-nav .sub-menu { position: static; flex-basis: 100%; min-width: 0; margin: .2rem 0 .6rem; padding: .3rem 0 .3rem .9rem; background: none; box-shadow: none; border-left: 1px solid rgba(224,168,74,.35); border-radius: 0;
    opacity: 1; visibility: visible; transform: none; display: none; }
  .main-nav .sub-menu::before, .main-nav .sub-menu::after { display: none; }
  .has-sub.is-open .sub-menu { display: grid; }
  .main-nav .sub-menu a { color: var(--moon); font-size: 1.15rem; padding: .45rem 0; }
  .main-nav .sub-menu a .icon { color: var(--gold); }
  .site-header:has(.is-open) { background: rgba(11,15,24,.97); }
  [aria-expanded="true"] .menu-lines i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  [aria-expanded="true"] .menu-lines i:nth-child(2) { opacity: 0; }
  [aria-expanded="true"] .menu-lines i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* Stadtsilhouette */
/* Höhe immer aus dem Seitenverhältnis der Zeichnung (viewBox 9340.45 × 2214.07): nichts wird oben oder seitlich abgeschnitten.
   --sky-h ist die Höhe bei voller Fensterbreite, für Abstände. */
:root { --sky-h: 23.7vw; }
.skyline { display: block; width: 100%; height: auto; aspect-ratio: 9340.45 / 2214.07; color: var(--night); }
/* Die Silhouette im Fuß steht im letzten Abschnitt (gleicher Hintergrund, Lichtschein dahinter) */
.footer-skyline { position: relative; z-index: 1; margin-top: -23.704%; pointer-events: none; } /* Prozent beziehen sich auf die Breite = genau die eigene Höhe */
/* Am Handy wäre die Stadt winzig: feste Mindesthöhe, links gekappt */
@media (max-width: 560px) { :root { --sky-h: 130px; } .hero-skyline, .footer-skyline, .page-hero-skyline { height: var(--sky-h); aspect-ratio: auto; } .footer-skyline { margin-top: calc(-1 * var(--sky-h)); } }
main > :last-child::after { content: ''; display: block; height: calc(var(--sky-h) + clamp(2.5rem, 7vw, 6rem)); } /* Silhouette plus Luft, damit Burg und Turm nicht an Text und Knöpfe stoßen */
main > .cta:last-child { padding-bottom: 0; }
main > .cta:last-child .lantern-glow { --ly: calc(100% - 12vw); }
.skyline { --sky-panel: #161c28; --sky-dim: #4a3a22; --sky-lit: #f0bd62; }
.footer-skyline { --sky-panel: #0f131b; --sky-dim: #33291a; --sky-lit: #c8964a; }
.tour-card-night .skyline { --sky-panel: #0b1019; --sky-dim: #2f2618; }

/* Titelbild */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 3rem) 0 max(8rem, calc(var(--sky-h) * .8 + 2rem)); }
.hero-image { position: absolute; inset: 0; z-index: -4; background: var(--night-2) center/cover no-repeat; animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.06) translateY(-1%); } }
.hero-shade { position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse at 70% 30%, transparent 20%, rgba(11,15,24,.55) 70%), linear-gradient(180deg, rgba(11,15,24,.75), rgba(11,15,24,.15) 35%, rgba(11,15,24,.85)); }
.hero .stars { z-index: -2; opacity: .55; mask-image: linear-gradient(180deg, #000 0%, transparent 55%); }
.lantern-glow { position: absolute; z-index: -1; width: 60vmax; height: 60vmax; left: calc(var(--lx, 25%) - 30vmax); top: calc(var(--ly, 60%) - 30vmax); pointer-events: none; background: radial-gradient(circle, rgba(255,190,90,.22), rgba(255,170,60,.08) 35%, transparent 65%); mix-blend-mode: screen; animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: .9; } 30% { opacity: 1; } 55% { opacity: .78; } 70% { opacity: .95; } }
.hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem 3rem; align-items: end; }
.hero-content > :not(.next-ticket) { grid-column: 1; }
.hero-kicker { font-size: 1.6rem; }
.hero-title { font-size: clamp(2.6rem, 7vw, 6.2rem); max-width: 16ch; text-shadow: 0 4px 40px rgba(0,0,0,.6); }
.hero-lead { font-size: clamp(1.1rem, 1.8vw, 1.4rem); max-width: 38rem; color: #e6dfcc; }
.hero-skyline { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; }
/* Lichtschein hinter der Stadt: halbtransparenter Horizont und ein Saum an Dächern und Türmen – erkennbar auf jedem Bild */
.hero-skyline { background: linear-gradient(180deg, transparent 10%, rgba(255,178,92,.04) 45%, rgba(255,170,80,.09) 85%); filter: drop-shadow(0 0 1px rgba(255,214,150,.3)) drop-shadow(0 0 12px rgba(255,176,86,.16)); }
/* Laterne: deckungsgleiche Kopie mit kräftigem Saum, nur rund um den Zeiger sichtbar (--gx/--gy aus theme.js) */
.hero-skyline.skyline-glow { z-index: 0; background: linear-gradient(180deg, transparent 5%, rgba(255,184,96,.07) 60%, rgba(255,176,86,.11)); color: #1c1812;
  filter: drop-shadow(0 0 2px rgba(255,226,170,.5)) drop-shadow(0 0 18px rgba(255,190,100,.32)); opacity: 0; transition: opacity .4s;
  mask: radial-gradient(circle closest-side, #000 30%, transparent) no-repeat; mask-size: 52vmax 52vmax; mask-position: calc(var(--gx, 50%) - 26vmax) calc(var(--gy, 0px) - 26vmax); }
[data-lantern].is-lit .skyline-glow { opacity: 1; }
.next-ticket { grid-column: 2; grid-row: 1 / span 4; align-self: end; position: relative; display: grid; gap: .2rem; width: min(330px, 100%); padding: 1.4rem 1.6rem 1.6rem; color: var(--ink); text-decoration: none; background: var(--parchment); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); transform: rotate(-2deg); transition: transform .3s; }
.next-ticket::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(91,70,48,.35); pointer-events: none; }
.next-ticket:hover { transform: rotate(0) translateY(-4px); color: var(--ink); }
.next-label { font-family: var(--fraktur); color: var(--seal); font-size: 1.2rem; }
.next-title { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; }
.next-when { font-weight: 700; }
.next-where { color: var(--ink-soft); font-size: .95rem; }
.next-seal { position: absolute; right: -22px; bottom: -26px; width: 78px; transform: rotate(14deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
@media (max-width: 860px) {
  .hero-content { grid-template-columns: 1fr; }
  .next-ticket { grid-column: 1; grid-row: auto; transform: none; margin-top: 1rem; }
}

/* Pergament */
.parchment { position: relative; color: var(--ink); background:
    radial-gradient(ellipse at 15% 10%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(120,80,30,.18), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--parchment), var(--parchment-2));
  border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(91,70,48,.25) inset, 0 24px 50px -24px rgba(0,0,0,.85); }
.parchment h2, .parchment h3 { color: var(--ink); }
.parchment a { color: var(--seal); }
.parchment .fraktur { color: var(--seal); }

/* Abschnittsköpfe */
section { position: relative; }
.section-head { text-align: center; margin: 0 auto clamp(2rem, 5vw, 3.5rem); max-width: 48rem; }
.section-head .lead { margin-inline: auto; }

/* Führungen */
.tours { padding: clamp(4rem, 10vw, 8rem) 0; background: linear-gradient(180deg, var(--night), var(--night-2)); }
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.tour-card { display: flex; flex-direction: column; overflow: hidden; }
/* Karte mit eigener Seite: hebt sich unter der Maus, Bild zoomt, Laternenschein am Rand, „Zur Führung“ rückt vor.
   Mehr Gewicht als .js [data-reveal].is-visible, sonst schluckt die Einblendung den Effekt. */
.tour-card--link, .js .tour-card--link[data-reveal].is-visible { cursor: pointer; transition: opacity .8s ease calc(var(--i, 0) * 90ms), transform .35s ease, box-shadow .35s ease; }
.tour-card--link:is(:hover, :focus-within), .js .tour-card--link[data-reveal].is-visible:is(:hover, :focus-within) { transform: translateY(-8px) rotate(-.4deg);
  box-shadow: 0 0 0 1px rgba(91,70,48,.25) inset, 0 0 0 2px rgba(224,168,74,.75), 0 0 46px -6px rgba(244,190,90,.5), 0 34px 60px -26px rgba(0,0,0,.9); }
.tour-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--night-3); }
.tour-card-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 120%, rgba(255,190,90,.35), transparent 60%); opacity: 0; transition: opacity .35s; }
.tour-card--link:is(:hover, :focus-within) .tour-card-media::after { opacity: 1; }
.tour-card-media img, .tour-card-night { transition: transform .6s ease, filter .6s ease; }
.tour-card-media img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) contrast(1.05); }
.tour-card--link:is(:hover, :focus-within) .tour-card-media img { transform: scale(1.06); filter: sepia(0) contrast(1.08) brightness(1.05); }
.tour-card--link:is(:hover, :focus-within) .tour-card-night { transform: scale(1.04); }
.tour-card--link:is(:hover, :focus-within) h3 a { color: var(--seal); text-decoration: underline; text-decoration-thickness: 1px; }
.tour-card-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-family: var(--serif); font-size: 1.1rem; color: var(--seal); }
.tour-card-more .icon { transition: transform .3s ease; }
.tour-card--link:is(:hover, :focus-within) .tour-card-more .icon { transform: translateX(6px); }
.tour-card h3 a:focus-visible { outline: none; }
.tour-card--link:has(h3 a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
.tour-card-night { position: absolute; inset: 0; background: radial-gradient(circle at 70% 25%, rgba(244,211,145,.4), transparent 22%), linear-gradient(180deg, #172238, var(--night)); }
.tour-card-night .skyline { position: absolute; bottom: 0; height: 55%; aspect-ratio: auto; color: #05070c; } /* größer, links gekappt (xMaxYMax): Burg und St. Martin bleiben ganz */
.tour-card-no { position: absolute; left: 1rem; top: .8rem; font-family: var(--serif); font-size: 2.4rem; color: var(--gold-soft); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.tour-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tour-card h3 a { color: var(--ink); text-decoration: none; }
.tour-card h3 a::after { content: ''; position: absolute; inset: 0; }
.tour-card p { color: var(--ink-soft); }
.tour-card-next { margin: auto 0 0; padding-top: .9rem; border-top: 1px dashed rgba(91,70,48,.45); font-size: .98rem; }
.facts { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; font-size: .98rem; }
.facts li { display: flex; gap: .55rem; align-items: flex-start; }
.facts .icon { color: var(--seal); margin-top: .2rem; }
.facts--large li { font-size: 1.05rem; }
.facts--large strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }

/* Termine */
.dates { padding: clamp(4rem, 10vw, 8rem) 0; }
.month { display: flex; align-items: center; gap: 1rem; font-size: 1.5rem; color: var(--gold-soft); margin: 2.5rem 0 1rem; }
.month::before, .month::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,168,74,.5), transparent); }
.date-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.date-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: .9rem 1.1rem; background: rgba(255,255,255,.035); border: 1px solid rgba(224,168,74,.16); border-radius: var(--radius); transition: background .2s, border-color .2s; }
.date-row:hover { background: rgba(224,168,74,.07); border-color: rgba(224,168,74,.35); }
.date-plate { display: grid; justify-items: center; width: 4.4rem; padding: .35rem 0 .45rem; background: var(--parchment); color: var(--ink); border-radius: 3px; box-shadow: 0 6px 16px -8px #000; line-height: 1; }
.date-wd { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--seal); }
.date-day { font-family: var(--serif); font-size: 2rem; }
.date-mon { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.date-title { display: block; font-family: var(--serif); font-size: 1.35rem; color: #f6efdc; }
.date-title a { color: inherit; text-decoration: none; }
.date-title a:hover { color: var(--gold-soft); }
.date-meta { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; color: var(--moon-dim); font-size: .98rem; }
.date-meta .icon { color: var(--gold); }
.date-note { display: inline-block; margin-top: .3rem; font-size: .9rem; color: var(--gold-soft); font-style: italic; }
.date-status { display: inline-block; padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(233,226,207,.35); font-size: .9rem; color: var(--moon-dim); }
.date-row--cancelled .date-title, .date-row--cancelled .date-meta { text-decoration: line-through; text-decoration-color: rgba(233,226,207,.5); }
.date-row--cancelled .date-status { border-color: #b4574c; color: #e8a59b; }
@media (max-width: 600px) {
  .date-row { grid-template-columns: auto minmax(0, 1fr); }
  .date-action { grid-column: 1 / -1; }
  .date-action .button { width: 100%; justify-content: center; }
}
.ics-link { margin-top: 1.5rem; text-align: center; font-size: .98rem; }
.ics-link a { display: inline-flex; gap: .5rem; align-items: center; }

/* Führungsseite */
.tour-head { position: relative; min-height: 62svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 3rem) 0 calc(var(--sky-h) * .8 + 2rem); } /* Platz für die Silhouette, sonst liegt sie auf breiten Schirmen über Titel und Angaben */
.tour-head-media { position: absolute; inset: 0; z-index: -4; background: var(--night-2) center/cover; }
.tour-head-media--night { background: radial-gradient(circle at 75% 25%, rgba(244,211,145,.35), transparent 18%), linear-gradient(180deg, #172238, var(--night)); }
.tour-head h1 { font-size: clamp(2.2rem, 6.5vw, 5.4rem); max-width: 12em; overflow-wrap: normal; hyphens: auto; } /* lange Wörter wie „Nachtwächterführung“ nicht mitten drin abbrechen */
@media (max-width: 560px) { .tour-head h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); } }
.tour-body { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 9vw, 7rem); }
.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tour-sheet { padding: 1.8rem 1.6rem 2rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.tour-sheet .date-row { background: rgba(255,255,255,.35); border-color: rgba(91,70,48,.25); grid-template-columns: auto minmax(0, 1fr); gap: .8rem; }
.tour-sheet .date-action { grid-column: 1 / -1; }
.tour-sheet .date-title { color: var(--ink); font-size: 1.1rem; }
.tour-sheet .date-meta { color: var(--ink-soft); }
.tour-sheet .date-meta .icon { color: var(--seal); }
.tour-sheet .date-plate { background: var(--night-2); color: var(--moon); }
.tour-sheet .date-wd { color: var(--gold); }
.sheet-title { font-size: 1.6rem; margin: 1.4rem 0 .8rem; }
.sheet-seal { position: absolute; right: -20px; bottom: -24px; width: 74px; transform: rotate(-12deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.tour-sheet .ics-link a { color: var(--seal); }
@media (max-width: 900px) { .tour-layout { grid-template-columns: 1fr; } .tour-sheet { position: relative; top: 0; } }

/* Fließtext, Initiale */
.prose { font-size: 1.15rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 2rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.5rem; margin-top: 1.4em; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: #f6efdc; }
.prose .initial::first-letter, .initial-first > p:first-of-type::first-letter { float: left; font-family: var(--fraktur); font-size: 4.6em; line-height: .8; padding: .08em .12em 0 0; color: var(--gold); }

/* Bild + Text */
.story { padding: clamp(4rem, 9vw, 7rem) 0; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.story--left .story-media { order: -1; }
/* Goldlinie gleichmäßig um das Bild, nichts ragt heraus */
.story-media { margin: 0; position: relative; padding: clamp(8px, 1.2vw, 14px); border: 1px solid rgba(224,168,74,.45); border-radius: calc(var(--radius) + 4px); box-shadow: 0 30px 60px -25px #000; }
.story-media img { display: block; width: 100%; border-radius: var(--radius); }
.story .button { margin-top: .6rem; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } .story--left .story-media { order: 0; } }

/* Zitat */
.quote { padding: clamp(3rem, 7vw, 6rem) 0; }
.quote-sheet { margin: 0; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; transform: rotate(-.6deg); }
.quote-sheet blockquote { margin: 0 0 1rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.35; }
.quote-sheet figcaption { margin: 0; }
.quote-seal { position: absolute; right: 8%; bottom: -30px; width: 76px; transform: rotate(10deg); }

/* Aufruf */
.cta { position: relative; padding: clamp(5rem, 11vw, 9rem) 0; text-align: center; overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(224,168,74,.22), transparent 70%), var(--night-2); }
.cta .lantern-glow { --lx: 50%; --ly: 100%; }
.cta-inner { position: relative; }
.cta .lead { margin-inline: auto; }

/* Fragen */
.faq { padding: clamp(4rem, 9vw, 7rem) 0; }
.faq h2 { text-align: center; }
.faq-list { display: grid; gap: .8rem; }
.faq-item { border: 1px solid rgba(224,168,74,.2); border-radius: var(--radius); background: rgba(255,255,255,.03); }
.faq-item summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.3rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { color: var(--gold); transition: transform .25s; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { padding: 0 1.3rem 1.2rem; margin: 0; color: var(--moon-dim); }

/* Text */
.richtext { padding: clamp(3rem, 7vw, 5rem) 0; }

/* Kontakt als Brief mit Siegel */
.contact { padding: clamp(4rem, 10vw, 8rem) 0; overflow: hidden; background: linear-gradient(180deg, var(--night-2), var(--night)); }
.contact .lantern-glow { --lx: 85%; --ly: 40%; }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.contact-list li { display: flex; gap: .8rem; align-items: center; font-size: 1.15rem; }
.contact-list .icon { color: var(--gold); }
.letter { padding: clamp(1.8rem, 4vw, 2.8rem); }
.letter-seal { position: absolute; right: -20px; top: -24px; width: 84px; transform: rotate(-10deg); }
.letter h3 { font-size: 1.8rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { position: relative; }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea { width: 100%; padding: 1.35rem .9rem .5rem; font: inherit; font-size: 1.05rem; color: var(--ink); background: rgba(255,255,255,.55); border: 1px solid rgba(91,70,48,.35); border-radius: 3px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--seal); background: rgba(255,255,255,.8); box-shadow: 0 0 0 3px rgba(139,42,34,.18); }
.field label { position: absolute; left: .9rem; top: .95rem; color: var(--ink-soft); pointer-events: none; transition: all .15s; font-size: 1.02rem; }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: .35rem; font-size: .78rem; letter-spacing: .04em; }
.field-error { color: var(--seal); font-size: .9rem; margin: .3rem 0 0; }
.has-error input, .has-error textarea { border-color: var(--seal); }
.letter .button { margin-top: 1.2rem; }
.form-note { font-size: .85rem; color: var(--ink-soft); margin: 1rem 0 0; }
.notice { padding: .9rem 1rem; border-radius: 3px; margin-bottom: 1rem; }
.notice--success { background: #dfe9cf; color: #26381a; }
.notice--error { background: #f3d5cf; color: #6b1d16; }
.itz-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .contact-grid, .form-grid { grid-template-columns: 1fr; } }

/* Seiten mit Titel */
.page-hero { position: relative; padding: calc(var(--header-h) + 4rem) 0 0; overflow: hidden; background: linear-gradient(180deg, #121a29, var(--night)); }
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
.page-hero .kicker { font-family: var(--fraktur); color: var(--gold); font-size: 1.3rem; margin: 0 0 .4rem; }
.page-hero-skyline { margin-top: 2rem; color: var(--night); }
.page-body { padding-bottom: 3rem; }

/* Fuß */
.site-footer { margin-top: 0; }
.footer-skyline { color: #070a10; margin-bottom: -1px; }
.footer-skyline + .footer-night { margin-top: -1px; }
.footer-night { position: relative; background: #070a10; padding: 2.5rem 0 1.5rem; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem 4rem; position: relative; }
.footer-call blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.4; color: #f6efdc; max-width: 34rem; }
.footer-name { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .6rem; }
.footer-contact ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-contact li { display: flex; gap: .6rem; align-items: center; }
.footer-contact .icon { color: var(--gold); }
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(224,168,74,.15); font-size: .92rem; color: var(--moon-dim); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.footer-bottom a { color: var(--moon-dim); }
.footer-bottom p { margin: 0; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.to-top { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 40; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--night-3); color: var(--gold); border: 1px solid rgba(224,168,74,.35); opacity: 0; pointer-events: none; transition: opacity .3s; }
.to-top.is-visible { opacity: 1; pointer-events: auto; }

/* Einblenden beim Scrollen (nur mit JS, nicht bei reduzierter Bewegung) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-image, .lantern-glow, .stars::after { animation: none; }
  .skyline-glow { display: none; }
  .tour-card--link:is(:hover, :focus-within), .js .tour-card--link[data-reveal].is-visible:is(:hover, :focus-within), .tour-card--link:is(:hover, :focus-within) :is(.tour-card-media img, .tour-card-night, .tour-card-more .icon) { transform: none; }
}
.is-editing [data-reveal] { opacity: 1 !important; transform: none !important; }
.is-editing .hero-image:not([style]), .is-editing .tour-head-media:not([style]):not(.tour-head-media--night) { background: repeating-linear-gradient(45deg, #1a2232 0 14px, #212b3d 14px 28px); }
.preview-bar { position: fixed; z-index: 60; left: 50%; bottom: 1rem; transform: translateX(-50%); background: var(--gold); color: var(--night); padding: .5rem 1rem; border-radius: 999px; font-size: .9rem; }
.preview-anchor { display: block; position: relative; top: calc(-1 * var(--header-h)); }

/* Führungsseite: Kopf */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .95rem; color: rgba(236,229,210,.75); margin-bottom: 1.2rem; }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(224,168,74,.35); }
.crumbs a:hover { color: var(--gold-soft); }
.ornament { display: block; width: min(260px, 70%); height: auto; color: var(--gold); }
.section-head .ornament { margin: .6rem auto 0; }
.tour-head-ornament { margin: .8rem 0 1.4rem; }
.tour-chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.tour-chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; font-size: .98rem; color: #f3ecd8; background: rgba(11,15,24,.55); border: 1px solid rgba(224,168,74,.4); border-radius: 99px; backdrop-filter: blur(4px); }
.tour-chips .icon { color: var(--gold); }

/* Handschrift auf Pergament */
.manuscript { position: relative; padding: clamp(2rem, 5vw, 3.6rem) clamp(1.6rem, 5vw, 3.8rem); transform: rotate(-.35deg); }
.manuscript::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(139,42,34,.28); outline: 1px solid rgba(139,42,34,.14); outline-offset: 4px; pointer-events: none; }
.manuscript-corner { position: absolute; width: 58px; height: 58px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238b2a22' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 60V14C4 8 8 4 14 4h46'/%3E%3Cpath d='M10 60V20c0-6 4-10 10-10h40' stroke-opacity='.5'/%3E%3Cpath d='M14 14c8 0 12 4 12 12-6 0-12-4-12-12z' fill='%238b2a22' fill-opacity='.8' stroke='none'/%3E%3Cpath d='M26 14c6-6 14-6 18 0M14 26c-6 6-6 14 0 18' /%3E%3Ccircle cx='44' cy='14' r='2' fill='%238b2a22' stroke='none'/%3E%3Ccircle cx='14' cy='44' r='2' fill='%238b2a22' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; }
.manuscript-corner--tl { left: 8px; top: 8px; }
.manuscript-corner--tr { right: 8px; top: 8px; transform: scaleX(-1); }
.manuscript-corner--bl { left: 8px; bottom: 8px; transform: scaleY(-1); }
.manuscript-corner--br { right: 8px; bottom: 8px; transform: scale(-1); }
.manuscript-kicker { text-align: center; font-size: 1.5rem; margin-bottom: 1.2rem; }
.prose--ink { color: var(--ink); }
.prose--ink h2, .prose--ink h3 { color: var(--seal); }
.prose--ink a { color: var(--seal); }
.prose--ink blockquote { color: var(--ink); border-left-color: var(--seal); }
.prose--ink.initial-first > p:first-of-type::first-letter { font-size: 4.2em; line-height: .9; margin: .06em .18em 0 0; padding: .12em .16em .04em; color: #f6e7c4; background: radial-gradient(circle at 35% 30%, #b2392d, var(--seal) 60%, #5e1813); border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--parchment), 0 0 0 4px rgba(139,42,34,.5); border-radius: 2px; }
.manuscript-ornament { margin: 2.2rem auto 1rem; color: var(--seal); }
.manuscript-title { text-align: center; color: var(--ink); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 1.2rem; }
.highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.muted { opacity: .65; font-style: italic; }
.highlights li { position: relative; padding-left: 2rem; break-inside: avoid; }
.highlights li::before { content: '❧'; position: absolute; left: 0; top: -.15em; font-size: 1.4rem; color: var(--seal); }
@media (max-width: 640px) { .highlights { grid-template-columns: 1fr; } }
@media (min-width: 641px) { .highlights { grid-template-columns: 1fr 1fr; gap: .7rem 2rem; } }

/* Steckbrief angenagelt */
.tour-sheet { transform: rotate(1deg); }
.sheet-nail { position: absolute; left: 50%; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9d4c8, #6d6658 55%, #2d2a24); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.sheet-ask { margin-top: 1.2rem; width: 100%; justify-content: center; }

/* Spruchband */
.banderole { position: relative; max-width: 54rem; margin: clamp(3rem, 7vw, 5rem) auto 0; padding: 1.6rem 4.5rem 1.4rem; text-align: center; color: var(--ink);
  background: linear-gradient(180deg, var(--parchment), var(--parchment-2)); clip-path: polygon(0 0, 100% 0, calc(100% - 2.4rem) 50%, 100% 100%, 0 100%, 2.4rem 50%); filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
.banderole blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.35; }
.banderole figcaption { margin-top: .5rem; font-family: var(--fraktur); color: var(--seal); font-size: 1.2rem; }
@media (max-width: 640px) { .banderole { margin-inline: 1rem; padding-inline: 2.6rem; clip-path: polygon(0 0, 100% 0, calc(100% - 1.2rem) 50%, 100% 100%, 0 100%, 1.2rem 50%); } }

/* Bilder in Goldrahmen */
.tour-gallery-wrap { margin-top: clamp(4rem, 9vw, 7rem); }
.tour-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.frame { margin: 0; padding: 12px; background: linear-gradient(135deg, #8a6420, #e9c46a 25%, #9c7426 50%, #f1d27d 75%, #7d5a1c); box-shadow: 0 20px 40px -18px #000, inset 0 0 0 1px rgba(0,0,0,.4); transform: rotate(-1.2deg); transition: transform .3s; }
.tour-gallery li:nth-child(even) .frame { transform: rotate(1.1deg); }
.tour-gallery .frame:hover { transform: rotate(0) scale(1.02); }
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); filter: sepia(.12); }
.frame figcaption { padding: .55rem .2rem .1rem; text-align: center; font-family: var(--serif); font-style: italic; color: #2a1f14; }

/* Weitere Führungen */
.more-tours { margin-top: clamp(4rem, 9vw, 7rem); }
.more-tours-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.more-tour { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; height: 100%; padding: 1rem 1.1rem; text-decoration: none; color: var(--moon);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border: 1px solid rgba(224,168,74,.22); border-radius: var(--radius); transition: border-color .25s, background .25s, transform .25s; }
.more-tour:hover { border-color: rgba(224,168,74,.6); background: rgba(224,168,74,.08); transform: translateY(-3px); }
.more-tour-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--gold); background: radial-gradient(circle, rgba(224,168,74,.22), transparent 70%); }
.more-tour-title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.more-tour-meta { font-size: .9rem; color: rgba(236,229,210,.65); }
@media (max-width: 900px) { .manuscript, .tour-sheet { transform: none; } }

/* Führungsseite: alle Termine */
.sheet-more { margin: .8rem 0 0; font-weight: 700; }
.sheet-more a { display: inline-flex; align-items: center; gap: .35rem; color: var(--seal); }
.tour-dates { margin-top: clamp(4rem, 9vw, 7rem); scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Hinweis auf die Stadtführungen bei Tag (stadtfuehrer.la) */
.footer-partner { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem; padding: .7rem 1.1rem; color: var(--gold-soft); text-decoration: none; border: 1px solid rgba(224,168,74,.3); border-radius: 99px; transition: background .25s, border-color .25s; }
.footer-partner:hover { background: rgba(224,168,74,.1); border-color: rgba(224,168,74,.6); color: var(--gold-soft); }
.footer-partner .icon:first-child { color: var(--gold); }