/* BKV Hagen: Weinrot aus dem Signet, Messing und Lapis aus Kronleuchter und Fliesen der Moschee */

:root {
  --weinrot: #8b2339;
  --weinrot-dunkel: #4a1624;
  --weinrot-tief: #2b0c14;
  --weinrot-hell: #a8344c;
  --lapis: #14394d;
  --lapis-tief: #0d2836;
  --gold: #c9a35f;
  --gold-hell: #e6d09c;
  --gold-text: #7f5b21;
  --papier: #fbf7f0;
  --sand: #f3ece0;
  --rose: #f5e8ea;
  --linie: #e5dac9;
  --text: #2a2124;
  --text-leise: #67595c;
  --weiss: #ffffff;
  --creme: var(--papier);
  --akzent: var(--gold);

  --serife: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, serif;
  --schrift: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --breite: 1180px;
  --radius: 6px;
  --schatten: 0 1px 3px rgba(43, 12, 20, .06), 0 18px 40px -18px rgba(43, 12, 20, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bogen-maske: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20140V54C0%2032%2030%2020%2050%200C70%2020%20100%2032%20100%2054V140Z'/%3E%3C/svg%3E");
  --bogen-kontur: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1%20140V54C1%2032%2031%2020%2050%201C69%2020%2099%2032%2099%2054V140'%20fill='none'%20stroke='%23c9a35f'%20stroke-opacity='1'%20stroke-width='1.2'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bogen-kontur-hell: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1%20140V54C1%2032%2031%2020%2050%201C69%2020%2099%2032%2099%2054V140'%20fill='none'%20stroke='%23e2c88f'%20stroke-opacity='0.55'%20stroke-width='1.2'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --skyline: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='80'%20viewBox='0%200%20400%2080'%3E%3Cpath%20d='M0%2073H400V80H0ZM364%2080V28H372V80ZM360%2044H376V49H360ZM361.5%2028L368%203L374.5%2028ZM30%2062H330V80H30ZM46%2062A20%2020%200%200%201%2086%2062ZM88%2062A30%2030%200%200%201%20148%2062ZM212%2062A30%2030%200%200%201%20272%2062ZM274%2062A20%2020%200%200%201%20314%2062ZM136%2062A44%2044%200%200%201%20224%2062ZM179.1%2018.5V14H180.9V18.5Z'/%3E%3Cpath%20transform='translate%28180%208.28%29%20rotate%28-45%29%20scale%281.1%29'%20d='M3.5%20-4.87A6%206%200%201%200%203.5%204.87A5%205%200%201%201%203.5%20-4.87Z'/%3E%3C/svg%3E");
  --moschee: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-12%20-12%2024%2024'%3E%3Cpath%20d='M-8.5%204A6%206%200%200%201%203.5%204ZM-9%204H4V11H-9ZM7.1%2011V-1.5H9.3V11ZM6%201.8H10.4V3.2H6ZM6.3%20-1.5L8.2%20-9.5L10.1%20-1.5ZM-2.9%20-1.9V-3.2H-2.1V-1.9Z'/%3E%3Cpath%20transform='translate%28-2.5%20-6.1%29%20rotate%28-45%29%20scale%28.55%29'%20d='M3.5%20-4.87A6%206%200%201%200%203.5%204.87A5%205%200%201%201%203.5%20-4.87Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4 {
  margin: 0 0 .55em;
  font-family: var(--serife);
  color: var(--weinrot-dunkel);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: 1.04; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.005em; }
h4 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: var(--weinrot); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--weinrot-dunkel); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; height: auto; display: block; }
::selection { color: #fff; background: var(--weinrot); }

.huelle { width: min(100% - 3rem, var(--breite)); margin-inline: auto; }
.huelle--schmal { width: min(100% - 3rem, 790px); margin-inline: auto; }
.springmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .8rem 1.2rem; color: #fff; background: var(--weinrot-dunkel);
}
.springmarke:focus { left: .5rem; top: .5rem; }

/* Kopfbereich */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 240, .93);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: box-shadow .3s ease, background .3s ease;
  view-transition-name: kopf;
}
.kopf::after {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; content: ""; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--weinrot)); transform: scaleX(var(--lesen, 0)); transform-origin: left;
}
.kopf--klein { background: rgba(251, 247, 240, .97); box-shadow: 0 10px 30px -14px rgba(43, 12, 20, .3); }
.kopf__innen { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); min-height: 88px; transition: min-height .3s ease; }
.kopf--klein .kopf__innen { min-height: 70px; }
.marke { display: flex; align-items: center; gap: .9rem; margin-right: auto; color: inherit; text-decoration: none; flex: 0 0 auto; }
.marke__zeichen { width: 66px; height: auto; transition: width .3s ease; }
.kopf--klein .marke__zeichen { width: 56px; }
.marke__name { display: block; color: var(--weinrot-dunkel); font: 700 1.4rem/1.05 var(--serife); letter-spacing: -.01em; }
.marke__zusatz { display: block; margin-top: .28rem; color: var(--text-leise); font-size: .66rem; line-height: 1.3; letter-spacing: .15em; text-transform: uppercase; }
.navi { display: flex; align-items: center; gap: .1rem; }
.navi a:not(.knopf) {
  position: relative; padding: .6rem .68rem;
  color: #3a2e31; text-decoration: none; font-size: .92rem; font-weight: 600; white-space: nowrap;
  transition: color .2s ease;
}
.navi a:not(.knopf)::after {
  position: absolute; left: .68rem; right: .68rem; bottom: .28rem; height: 2px; content: "";
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.navi a:not(.knopf):hover { color: var(--weinrot); }
.navi a:not(.knopf):hover::after, .navi a[aria-current="page"]::after { transform: scaleX(1); }
.navi a[aria-current="page"] { color: var(--weinrot); font-weight: 700; }
.navi .knopf { margin-left: .7rem; min-height: 44px; padding: .6rem 1.25rem; }

/* Knöpfe (die Namen blieben, "gold" und "gruen" sind die Hauptknöpfe) */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 50px; padding: .78rem 1.55rem; border: 1.5px solid transparent; border-radius: 3px;
  font: 650 .95rem/1.2 var(--schrift); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf--gold, .knopf--gruen { color: #fff; background: var(--weinrot); box-shadow: 0 10px 20px -10px rgba(139, 35, 57, .7); }
.knopf--gold:hover, .knopf--gruen:hover { color: #fff; background: var(--weinrot-dunkel); box-shadow: 0 14px 24px -10px rgba(74, 22, 36, .7); }
.knopf--rand { color: var(--weinrot); border-color: var(--weinrot); background: transparent; }
.knopf--rand:hover { color: #fff; background: var(--weinrot); }
.knopf--hell { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); }
.knopf--hell:hover { color: var(--weinrot-tief); border-color: #fff; background: #fff; }
.knopf--klein { min-height: 40px; padding: .45rem 1rem; font-size: .88rem; }
.muster .knopf--gold, .abschnitt--gruen .knopf--gold, .abschnitt--lapis .knopf--gold {
  color: var(--weinrot-tief); background: var(--gold); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6);
}
.muster .knopf--gold:hover, .abschnitt--gruen .knopf--gold:hover, .abschnitt--lapis .knopf--gold:hover {
  color: var(--weinrot-tief); background: var(--gold-hell);
}
.menue-schalter {
  display: none; padding: .55rem 1.05rem; border: 1.5px solid var(--weinrot); border-radius: 3px;
  color: var(--weinrot); background: transparent; font: 650 .9rem var(--schrift); cursor: pointer;
}
.menue-schalter[aria-expanded="true"] { color: #fff; background: var(--weinrot); }
@media (max-width: 1190px) {
  .menue-schalter { display: block; }
  .navi {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: .4rem max(1.5rem, calc((100vw - var(--breite)) / 2)) 1.4rem;
    border-bottom: 1px solid var(--linie); background: var(--papier);
    box-shadow: 0 24px 30px -16px rgba(43, 12, 20, .25);
    visibility: hidden; opacity: 0; translate: 0 -10px;
    transition: opacity .25s ease, translate .25s var(--ease), visibility 0s linear .25s;
  }
  .navi[data-offen="ja"] { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .navi[data-offen="ja"] > * { animation: menue-ein .5s var(--ease) both; }
  .navi[data-offen="ja"] > :nth-child(2) { animation-delay: .04s; }
  .navi[data-offen="ja"] > :nth-child(3) { animation-delay: .08s; }
  .navi[data-offen="ja"] > :nth-child(4) { animation-delay: .12s; }
  .navi[data-offen="ja"] > :nth-child(5) { animation-delay: .16s; }
  .navi[data-offen="ja"] > :nth-child(6) { animation-delay: .2s; }
  .navi[data-offen="ja"] > :nth-child(7) { animation-delay: .24s; }
  .navi[data-offen="ja"] > :nth-child(8) { animation-delay: .28s; }
  .navi a:not(.knopf) { padding: .85rem .2rem; border-bottom: 1px solid var(--linie); font-size: 1.02rem; }
  .navi a:not(.knopf)::after { display: none; }
  .navi .knopf { margin: 1rem 0 0; }
}
@media (max-width: 520px) {
  .huelle, .huelle--schmal { width: min(100% - 2rem, var(--breite)); }
  .kopf__innen { min-height: 72px; gap: .5rem; }
  .kopf--klein .kopf__innen { min-height: 62px; }
  .marke { flex-shrink: 1; min-width: 0; gap: .65rem; }
  .marke__zeichen { width: 52px; }
  .marke__name { font-size: 1.18rem; }
  .marke__zusatz { font-size: .54rem; letter-spacing: .1em; }
  .kopf__innen > .knopf { max-width: 8.6rem; padding-inline: .8rem; font-size: .82rem; line-height: 1.15; text-align: center; }
}

/* Abschnitte und Überschriften */
.abschnitt { padding: clamp(3.75rem, 8vw, 7rem) 0; }
.abschnitt--sand { background: var(--sand); }
.abschnitt--ohne-oben { padding-top: 0; padding-bottom: clamp(3rem, 6vw, 5rem); }
.abschnitt--ohne-unten { padding-bottom: 0; }
.abschnitt--kurz { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.abschnitt--kurz-unten { padding-bottom: clamp(2rem, 4vw, 3rem); }
.abschnitt--kurz-oben { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.mitte { text-align: center; }
.abschnitt--gruen { color: #f1dfe3; background: var(--weinrot-dunkel); }
.abschnitt--lapis { color: #dbe8ee; background: var(--lapis); }
.abschnitt--gruen h1, .abschnitt--gruen h2, .abschnitt--gruen h3, .abschnitt--lapis h2, .abschnitt--lapis h3, .muster h1, .muster h2, .muster h3 { color: #fff; }
.abschnitt--gruen a:not(.knopf), .abschnitt--lapis a:not(.knopf) { color: #fff; }
.kopfzeile { max-width: 740px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.kopfzeile--mitte .augenbraue, .augenbraue--mitte { justify-content: center; }
.kopfzeile--mitte .augenbraue::after, .augenbraue--mitte::after { flex: 0 0 2.2rem; height: 1px; content: ""; background: currentColor; }
.augenbraue {
  display: flex; align-items: center; gap: .85rem; margin-bottom: 1.05rem;
  color: var(--gold-text); font-size: .76rem; font-weight: 700; line-height: 1.3; letter-spacing: .17em; text-transform: uppercase;
}
.augenbraue::before { flex: 0 0 2.2rem; height: 1px; content: ""; background: currentColor; }
.abschnitt--gruen .augenbraue, .abschnitt--lapis .augenbraue, .muster .augenbraue, .kermes-teaser .augenbraue { color: var(--gold); }
.leitsatz { color: var(--text-leise); font-size: 1.14rem; line-height: 1.65; }
.abschnitt--gruen .leitsatz, .abschnitt--lapis .leitsatz { color: #e8d3d8; }

.zierlinie { display: flex; align-items: center; gap: 1rem; max-width: 240px; margin: 0 auto 1.6rem; color: var(--gold); }
.zierlinie::before, .zierlinie::after { flex: 1; height: 1px; content: ""; }
.zierlinie::before { background: linear-gradient(90deg, transparent, currentColor); transform-origin: right center; }
.zierlinie::after { background: linear-gradient(90deg, currentColor, transparent); transform-origin: left center; }
.zierlinie.einblenden::before, .zierlinie.einblenden::after { scale: 0 1; transition: scale 1s var(--ease) .2s; }
.zierlinie.einblenden i { translate: 0 8px; scale: .4; transition: translate 1s var(--ease) .1s, scale 1s var(--ease) .1s; }
.zierlinie.ist-sichtbar::before, .zierlinie.ist-sichtbar::after { scale: 1 1; }
.zierlinie.ist-sichtbar i { translate: 0 0; scale: 1; }
.zierlinie i { flex: 0 0 auto; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--moschee) center / contain no-repeat; mask: var(--moschee) center / contain no-repeat; }

/* Dunkle Fläche */
.muster {
  position: relative; isolation: isolate; overflow: hidden; color: #f1dfe3;
  background:
    radial-gradient(60% 100% at 88% 10%, rgba(168, 52, 76, .55), transparent 65%),
    linear-gradient(165deg, #5b1a2c 0%, #3d1119 58%, #2b0c14 100%);
}
.muster--lapis { background: radial-gradient(60% 100% at 88% 10%, rgba(60, 140, 150, .32), transparent 65%), linear-gradient(165deg, #1b4a62 0%, #14394d 58%, #0d2836 100%); }

/* Moschee-Skyline am unteren Rand dunkler Flächen */
.bogenrand {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; background: var(--flaeche, var(--papier));
  -webkit-mask: var(--skyline) center bottom / 280px 56px repeat-x; mask: var(--skyline) center bottom / 280px 56px repeat-x;
}
@media (max-width: 560px) { .bogenrand { height: 40px; -webkit-mask-size: 200px 40px; mask-size: 200px 40px; } }

/* Spitzbogen für Fotos */
.bogen { position: relative; width: min(100%, 440px); aspect-ratio: 100 / 124; margin: 0; }
.bogen::before {
  position: absolute; inset: -16px -16px 0 -16px; z-index: 0; content: ""; pointer-events: none;
  background: var(--bogen-kontur) center / 100% 100% no-repeat;
}
.bogen::after { position: absolute; left: -16px; right: -16px; bottom: 0; height: 1px; z-index: 2; content: ""; background: var(--gold); opacity: .8; }
.hero__bild .bogen::before, .seitenkopf .bogen::before { animation: kontur-auf 1.5s .35s var(--ease) both; }
.hero__bild .bogen::after, .seitenkopf .bogen::after { animation: standlinie-auf .9s .1s var(--ease) both; }
.bogen.einblenden::before { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s .3s var(--ease); }
.bogen.einblenden::after { scale: 0 1; transition: scale .9s .1s var(--ease); }
.bogen.ist-sichtbar::before { clip-path: inset(0); }
.bogen.ist-sichtbar::after { scale: 1 1; }
.bogen__rahmen {
  position: absolute; inset: 0; overflow: hidden; background: var(--weinrot-dunkel);
  -webkit-mask: var(--bogen-maske) center / 100% 100% no-repeat; mask: var(--bogen-maske) center / 100% 100% no-repeat;
}
.bogen__rahmen img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--ausschnitt, 50% 50%);
  transform: translateY(var(--versatz, 0px)) scale(1.1); will-change: transform;
}

/* Startseite: Held */
.hero { padding: clamp(3.2rem, 6.5vw, 5.5rem) 0 clamp(8rem, 12vw, 10.5rem); }
.hero__innen { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.hero h1 { margin-bottom: .45em; color: #fff; font-size: clamp(2.7rem, 5.6vw, 5rem); }
.hero h1 em { color: var(--gold-hell); font-style: italic; }
.hero__text > p { max-width: 50ch; color: #ecd9de; font-size: 1.16rem; }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }
.hero__bild { display: grid; justify-items: end; padding: 16px 16px 0 0; }
.hero__bild .bogen { width: min(100%, 430px); }
.hero__bild::after {
  position: absolute; z-index: -1; right: 4%; top: 12%; width: 70%; aspect-ratio: 1; content: "";
  background: radial-gradient(closest-side, rgba(230, 208, 156, .22), transparent); filter: blur(10px);
}
.hero__bild { position: relative; z-index: 1; margin-bottom: clamp(-7rem, -8vw, -4rem); }

/* Unterseiten: Seitenkopf */
.seitenkopf { padding: clamp(3.2rem, 6.5vw, 5.6rem) 0 clamp(6rem, 10vw, 9rem); }
.seitenkopf::after {
  position: absolute; right: max(1.5rem, calc((100vw - var(--breite)) / 2)); bottom: -2px; width: clamp(150px, 20vw, 270px); aspect-ratio: 100 / 124; z-index: -1; content: "";
  background: var(--bogen-kontur-hell) center / 100% 100% no-repeat; opacity: .75;
}
.seitenkopf h1 { max-width: 16ch; margin-bottom: .4em; color: #fff; }
.seitenkopf .leitsatz, .seitenkopf p { max-width: 54ch; color: #ecd9de; font-size: 1.18rem; }
@media (max-width: 700px) { .seitenkopf::after { opacity: .35; } }
.seitenkopf--bild::after { display: none; }
.seitenkopf__bild {
  position: absolute; z-index: 1; right: max(2rem, calc((100vw - var(--breite)) / 2 + .5rem)); bottom: 0;
  width: clamp(140px, 15.5vw, 224px);
}
.seitenkopf .bogen { animation: bogen-auf 1.2s .15s var(--ease) both; }
@media (max-width: 860px) { .seitenkopf__bild { display: none; } .seitenkopf--bild::after { display: block; opacity: .35; } }
@media (min-width: 861px) { .seitenkopf--bild .huelle > p { max-width: min(54ch, calc(100% - 270px)); } .seitenkopf--bild h1 { max-width: 14ch; } }

/* Gebetszeiten */
.start-zeiten { position: relative; z-index: 3; margin-top: clamp(-7.5rem, -9vw, -5.5rem); padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.zeiten {
  position: relative; overflow: hidden; border: 1px solid var(--linie); border-top: 3px solid var(--gold); border-radius: var(--radius);
  background: #fff; box-shadow: 0 40px 70px -34px rgba(43, 12, 20, .45), 0 2px 6px rgba(43, 12, 20, .06);
}
.zeiten__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem;
  padding: 1.25rem 1.8rem; border-bottom: 1px solid var(--linie);
}
.zeiten__kopf h2, .zeiten__kopf h3 { margin: 0; font-size: 1.45rem; }
.zeiten__datum { color: var(--text-leise); font-size: .95rem; }
.zeiten__gitter { display: grid; grid-template-columns: repeat(7, 1fr); }
.zeit { position: relative; padding: 1.5rem .4rem 1.55rem; text-align: center; border-right: 1px solid var(--linie); transition: background .25s ease; }
.zeit:last-child { border-right: 0; }
.zeit__name { display: block; color: var(--text-leise); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.zeit__arabisch { display: block; margin: .15rem 0 .5rem; color: var(--gold-text); font-size: 1.05rem; line-height: 1.5; }
.zeit__uhr { display: block; color: var(--weinrot-dunkel); font: 400 clamp(1.55rem, 2.5vw, 2.25rem)/1.1 var(--serife); font-variant-numeric: tabular-nums lining-nums; }
.zeit--info .zeit__uhr, .zeit--info .zeit__name { color: #76696c; }
.zeit--neu { animation: zeit-ein .8s var(--ease) both; animation-delay: calc(var(--n, 0) * 80ms); }
.zeit[data-naechstes="ja"] { background: var(--weinrot); }
.zeit[data-naechstes="ja"] .zeit__name { color: var(--gold-hell); }
.zeit[data-naechstes="ja"] .zeit__arabisch { color: var(--gold); }
.zeit[data-naechstes="ja"] .zeit__uhr { color: #fff; }
.zeit[data-naechstes="ja"]::after {
  position: absolute; left: 50%; bottom: 0; width: 18px; height: 9px; content: "";
  background: var(--gold); translate: -50% 0; clip-path: polygon(0 100%, 50% 0, 100% 100%); animation: wippen 2.6s ease-in-out infinite;
}
.zeiten__verlauf { position: relative; height: 4px; background: var(--linie); }
.zeiten__verlauf[hidden] { display: none; }
.zeiten__verlauf::before {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--anteil, 0) * 100%); content: "";
  background: linear-gradient(90deg, var(--gold), var(--weinrot)); transition: width 1.6s var(--ease);
}
.zeiten__verlauf::after {
  position: absolute; top: 50%; left: calc(var(--anteil, 0) * 100%); width: 12px; height: 12px; content: "";
  border: 2px solid #fff; border-radius: 50%; background: var(--weinrot); translate: -50% -50%;
  transition: left 1.6s var(--ease); animation: pulsieren-weinrot 2.4s 1.8s infinite;
}
.zeiten__fuss {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center;
  padding: 1rem 1.8rem; border-top: 1px solid var(--linie); background: var(--sand); font-size: .92rem;
}
.zeiten__fuss strong { color: var(--weinrot-dunkel); }
.zeiten__hinweis { margin: 1rem 0 0; color: var(--text-leise); font-size: .88rem; }
.zeiten__gesperrt { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; grid-column: 1 / -1; padding: 1.4rem 1.8rem; color: var(--text-leise); }
.zeiten__fehler { padding: 1.2rem 1.8rem; color: var(--text-leise); }
td.zeiten__gesperrt, td.zeiten__fehler { display: table-cell; text-align: left; }
.zeiten__fehler a { font-weight: 700; }
@media (max-width: 760px) {
  .zeiten__kopf, .zeiten__fuss { padding-inline: 1.2rem; }
  .zeiten__gitter { grid-template-columns: 1fr; }
  .zeit { display: flex; align-items: baseline; gap: .8rem; padding: .85rem 1.2rem; text-align: left; border-right: 0; border-bottom: 1px solid var(--linie); }
  .zeit:last-child { border-bottom: 0; }
  .zeit__name { flex: 1; font-size: .78rem; }
  .zeit__arabisch { order: 3; margin: 0; font-size: .95rem; min-width: 4.5rem; text-align: right; }
  .zeit__uhr { order: 2; font-size: 1.45rem; }
  .zeit[data-naechstes="ja"]::after { left: auto; right: 0; top: 50%; bottom: auto; width: 9px; height: 18px; translate: 0 -50%; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
  .zeiten__fuss { align-items: flex-start; flex-direction: column; }
}

.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten); }
table.tage { width: 100%; min-width: 900px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.tage th, table.tage td { padding: .85rem 1rem; text-align: right; border-bottom: 1px solid var(--linie); font-size: .98rem; }
table.tage th { color: var(--gold-hell); background: var(--weinrot-dunkel); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
table.tage tbody th { color: var(--text); background: transparent; font-size: .98rem; font-weight: 650; letter-spacing: normal; text-transform: none; }
table.tage tbody tr:last-child th, table.tage tbody tr:last-child td { border-bottom: 0; }
table.tage td:first-child, table.tage th:first-child { text-align: left; }
table.tage tr[data-heute="ja"] th, table.tage tr[data-heute="ja"] td { color: var(--weinrot-dunkel); background: var(--rose); font-weight: 700; }

/* Veranstaltungshinweis auf der Startseite */
.kermes-teaser {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1.5rem, 4vw, 3.4rem);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.8rem, 4.5vw, 3.6rem); border-radius: var(--radius); color: #dbe8ee;
  background: radial-gradient(70% 120% at 95% 0%, rgba(80, 160, 168, .35), transparent 60%), linear-gradient(160deg, #1b4a62, #123246);
  box-shadow: var(--schatten);
}
.kermes-teaser::after { position: absolute; inset: 8px; z-index: -1; border: 1px solid rgba(230, 208, 156, .32); border-radius: 3px; content: ""; pointer-events: none; }
.kermes-teaser__datum { padding-right: clamp(1.5rem, 4vw, 3.4rem); border-right: 1px solid rgba(230, 208, 156, .35); text-align: center; line-height: 1; }
.kermes-teaser__datum span { display: block; margin-bottom: .55rem; color: var(--gold-hell); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.kermes-teaser__datum strong { display: block; color: var(--gold); font: 400 clamp(3.2rem, 6.5vw, 5rem)/1 var(--serife); letter-spacing: -.02em; }
.live-marke {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; padding: .32rem .8rem .32rem .65rem;
  border: 1px solid rgba(230, 208, 156, .55); border-radius: 99px; color: var(--gold-hell);
  font: 700 .7rem/1 var(--schrift); letter-spacing: .15em; text-transform: uppercase;
}
.live-marke[hidden] { display: none; }
.live-marke::before { width: 8px; height: 8px; content: ""; border-radius: 50%; background: var(--gold-hell); animation: pulsieren-gold 2s infinite; }
.kermes-teaser h2 { margin: 0 0 .3rem; color: #fff; }
.kermes-teaser p { margin: 0; color: #cfe0e8; }
@media (max-width: 820px) {
  .kermes-teaser { grid-template-columns: auto minmax(0, 1fr); }
  .kermes-teaser .knopf { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) {
  .kermes-teaser { grid-template-columns: 1fr; gap: 1.2rem; }
  .kermes-teaser__datum { display: flex; align-items: baseline; gap: 1rem; padding: 0 0 1.1rem; border-right: 0; border-bottom: 1px solid rgba(230, 208, 156, .35); text-align: left; }
  .kermes-teaser__datum span { margin: 0; }
}

/* Moschee kennenlernen */
.fuehrung { padding: clamp(4rem, 8vw, 7rem) 0 clamp(6.4rem, 11vw, 10rem); }
.fuehrung__innen { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); }
.fuehrung__innen .bogen { justify-self: center; margin-left: 16px; }
.fuehrung h2 { color: #fff; }
.fuehrung p { max-width: 52ch; color: #ecd9de; font-size: 1.1rem; }
.fuehrung .knopf { margin-top: .6rem; }

/* Der Verein */
.verein { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.verein__einleitung { position: sticky; top: 130px; }
.verein__einleitung .knopf { margin-top: 1.7rem; }
.saeulen { border-bottom: 1px solid var(--linie); }
.saeule { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 1.5rem; padding: 2.2rem 0; border-top: 1px solid var(--linie); }
.saeule__zeichen { width: 52px; height: 52px; margin-top: .15rem; background: var(--gold); -webkit-mask: var(--moschee) center / contain no-repeat; mask: var(--moschee) center / contain no-repeat; transition: translate .5s var(--ease), scale .9s var(--ease); }
.saeule:hover .saeule__zeichen { translate: 0 -4px; }
.saeule.einblenden:not(.ist-sichtbar) .saeule__zeichen { scale: .6; }
.saeule h3 { margin-bottom: .45rem; font-size: 1.55rem; font-weight: 400; }
.saeule p { color: var(--text-leise); }
.karte__mehr { display: inline-block; margin-top: .9rem; font-size: .93rem; font-weight: 700; letter-spacing: .02em; text-decoration-thickness: 1.5px; text-decoration-color: var(--gold); }
.karte__mehr:hover { text-decoration-color: currentColor; }

/* Spenden und Kontakt auf der Startseite */
.spendenkarte {
  position: relative; isolation: isolate; text-align: center; border: 1px solid var(--gold); border-radius: 3px; background: #fff;
  padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.5rem, 6vw, 5rem);
}
.spendenkarte::before { position: absolute; inset: 8px; z-index: -1; border: 1px solid rgba(201, 163, 95, .5); content: ""; pointer-events: none; }
.spendenkarte h2 { max-width: 20ch; margin-inline: auto; }
.spendenkarte p { max-width: 50ch; margin-inline: auto; color: var(--text-leise); font-size: 1.1rem; }
.spendenkarte__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; margin-top: 2rem; }

.kontaktzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.kontaktzeile h2 { margin-top: 0; }
.kontaktzeile--oben { align-items: start; }
.kontaktzeile--oben .adresskarte p { margin: 0; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.adresskarte {
  position: relative; padding: clamp(1.8rem, 4vw, 2.8rem); border: 1px solid var(--linie); border-top: 3px solid var(--gold); border-radius: var(--radius);
  background: #fff; box-shadow: var(--schatten);
}
.datenliste { margin: 0; }
.datenliste dt { margin-top: 1.3rem; color: var(--gold-text); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.datenliste dt:first-child { margin-top: 0; }
.datenliste dd { margin: .3rem 0 0; font-size: 1.05rem; }
.datenliste a { font-weight: 650; }
.karte-hinweis { padding: 2.2rem 1.5rem; border: 1px dashed #cdb89a; border-radius: var(--radius); background: var(--sand); text-align: center; }
.karte-hinweis p { max-width: 46ch; margin-inline: auto; color: var(--text-leise); font-size: .93rem; }

/* Karten, Termine und Lesetexte */
.gitter { display: grid; gap: 1.4rem; }
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.karte {
  position: relative; padding: 2rem 1.8rem 1.9rem; border: 1px solid var(--linie); border-top: 3px solid var(--gold); border-radius: var(--radius);
  background: #fff; box-shadow: var(--schatten); transition: transform .3s var(--ease), box-shadow .3s ease;
}
.karte:hover { transform: translateY(-4px); box-shadow: 0 1px 3px rgba(43, 12, 20, .06), 0 26px 44px -20px rgba(43, 12, 20, .3); }
.karte h3 { margin-bottom: .5em; font-size: 1.5rem; font-weight: 400; }
.karte p { color: var(--text-leise); }
.karte--flach { box-shadow: none; }
.karte--flach:hover { transform: none; box-shadow: var(--schatten); }
.zahl { display: block; margin-bottom: .6rem; color: var(--weinrot); font: 400 2.8rem/1 var(--serife); }

.termin {
  display: grid; grid-template-columns: 112px 1fr; gap: 1.8rem; align-items: center;
  padding: 1.2rem; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten);
  transition: transform .3s var(--ease);
}
.termin:hover { transform: translateX(4px); }
.termin + .termin { margin-top: 1rem; }
.termin__datum { padding: 1.1rem .4rem .9rem; border-radius: 56px 56px 4px 4px; color: #fff; background: var(--weinrot-dunkel); text-align: center; }
.termin__tag { display: block; font: 400 2rem/1 var(--serife); }
.termin__tag--zeitraum { font-size: 1.35rem; line-height: 1.15; }
.termin__monat { display: block; margin-top: .4rem; color: var(--gold-hell); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.termin__jahr { display: block; margin-top: .1rem; color: #d7b7bf; font-size: .76rem; }
.termin h3 { margin-bottom: .2em; font-size: 1.5rem; font-weight: 400; }
.termin__zeit { margin: 0; color: var(--text-leise); font-size: .95rem; }
.termin--vorbei { opacity: .72; }
@media (max-width: 560px) {
  .termin { grid-template-columns: 88px 1fr; gap: 1.1rem; }
  .termin__tag { font-size: 1.6rem; }
  .termin__tag--zeitraum { font-size: 1.1rem; }
}

.fliesstext { font-size: 1.06rem; line-height: 1.8; }
.fliesstext h2 { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linie); font-size: clamp(1.7rem, 3vw, 2.2rem); }
.fliesstext h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fliesstext h3 { margin-top: 2rem; }
.fliesstext ol, .fliesstext ul { margin: 0 0 1.2em; padding-left: 1.4rem; }
.fliesstext li { margin-bottom: .5rem; padding-left: .2rem; }
.fliesstext li::marker { color: var(--gold-text); }
.arabisch {
  position: relative; margin: 1.8rem 0; padding: 1.6rem 1.8rem; border: 1px solid var(--gold); border-radius: 3px; color: var(--weinrot-dunkel);
  background: #fff; font-size: 1.55rem; line-height: 2.2; direction: rtl; text-align: center;
}
.arabisch::before { position: absolute; inset: 6px; border: 1px solid rgba(201, 163, 95, .45); content: ""; pointer-events: none; }
.zitat { margin: 1.8rem 0; padding: .3rem 0 .3rem 1.5rem; border-left: 2px solid var(--gold); color: var(--weinrot-dunkel); font: italic 1.25rem/1.6 var(--serife); }
.inhaltsangabe { margin-bottom: 3rem; padding: 1.6rem 1.8rem; border: 1px solid var(--linie); border-top: 3px solid var(--gold); border-radius: var(--radius); background: #fff; }
.inhaltsangabe h2 { margin-bottom: .9rem; color: var(--gold-text); font: 700 .76rem var(--schrift); letter-spacing: .17em; text-transform: uppercase; }
.inhaltsangabe ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2.4rem; }
.inhaltsangabe li { margin-bottom: .4rem; }
@media (max-width: 620px) { .inhaltsangabe ol { columns: 1; } }
.hinweiskasten { margin: 1.8rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--linie); border-left: 3px solid var(--gold); border-radius: 3px; background: #fff; font-size: .96rem; }
.hinweiskasten strong { color: var(--weinrot-dunkel); }
.aktenhinweis { margin-top: 1.4rem; color: var(--text-leise); font-size: .85rem; }

.bildplatz {
  display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; padding: 1rem; border-radius: var(--radius); color: rgba(255, 255, 255, .78);
  background: var(--weinrot-dunkel); font-size: .78rem; letter-spacing: .1em; text-align: center; text-transform: uppercase;
}
.bildplatz--breit { aspect-ratio: 16 / 9; }

/* Zweispaltiger Text mit Bogenfoto auf Unterseiten */
.textbild { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(2.5rem, 7vw, 6.5rem); }
.textbild--links { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.textbild .bogen { justify-self: center; margin-left: 16px; }
.textbild--links .bogen { order: -1; }
@media (max-width: 860px) {
  .textbild, .textbild--links { grid-template-columns: 1fr; }
  .textbild--links .bogen { order: 0; }
  .textbild .bogen { justify-self: start; width: min(78%, 360px); }
}

/* Fußbereich */
.fuss { position: relative; padding: 0 0 2rem; color: #dcc6cc; background: var(--weinrot-tief); font-size: .94rem; }
.fuss::before {
  position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; content: ""; background: var(--weinrot-tief);
  -webkit-mask: var(--skyline) center bottom / 280px 56px repeat-x; mask: var(--skyline) center bottom / 280px 56px repeat-x;
}
@media (max-width: 560px) { .fuss::before { height: 40px; -webkit-mask-size: 200px 40px; mask-size: 200px 40px; } }
.fuss > .huelle { padding-top: 3.6rem; }
.fuss h2, .fuss h3 { margin-bottom: 1rem; color: var(--gold); font: 700 .74rem var(--schrift); letter-spacing: .17em; text-transform: uppercase; }
.fuss a { color: #f3e6e9; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--gold); }
.fuss__gitter { display: grid; grid-template-columns: minmax(280px, 1.7fr) repeat(3, minmax(140px, 1fr)); gap: 2.4rem; }
.fuss ul { margin: 0; padding: 0; list-style: none; }
.fuss li { margin-bottom: .5rem; }
.fuss__logo { width: 92px; margin-bottom: 1.2rem; }
.fuss__logo img { width: 100%; }
.fuss__name { margin: 0 0 .3rem; color: #fff; font: 700 1.25rem/1.25 var(--serife); }
.fuss__identitaet p { color: #cdb3ba; }
.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem;
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .14); color: #c4a9b0; font-size: .85rem;
}
.fuss__einstellungen { padding: 0; border: 0; color: #f3e6e9; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.fuss__einstellungen:hover { color: #fff; }
@media (max-width: 900px) { .fuss__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  body { font-size: 16px; }
  .fuss__gitter { gap: 2rem 1.2rem; }
  .fuss__identitaet { grid-column: 1 / -1; }
}

/* Aufbau der Startseite auf kleinen Schirmen */
@media (max-width: 900px) {
  .hero__innen { grid-template-columns: 1fr; gap: 3rem; }
  .hero__bild { margin-bottom: 0; }
  .hero__bild { justify-items: center; padding-right: 16px; }
  .hero__bild .bogen { width: min(78%, 340px); }
  .fuehrung__innen { grid-template-columns: 1fr; gap: 3rem; }
  .fuehrung__innen .bogen { justify-self: center; width: min(78%, 340px); }
  .verein { grid-template-columns: 1fr; gap: 2.2rem; }
  .verein__einleitung { position: static; }
}
@media (max-width: 560px) {
  .abschnitt { padding: 3.2rem 0; }
  .saeule { grid-template-columns: 38px minmax(0, 1fr); gap: 1.1rem; }
  .saeule__zeichen { width: 40px; height: 40px; }
}

/* Rein informativer Hinweis; die Bestätigung aktiviert keine Dienste. */
body { padding-bottom: var(--cookie-abstand, 0px); }
.cookie-hinweis {
  position: fixed; z-index: 80; inset-inline: 1rem; bottom: 1rem; width: min(100% - 2rem, 960px); margin-inline: auto;
  display: flex; align-items: center; gap: 2rem; padding: 1.25rem 1.5rem;
  max-height: calc(100dvh - 2rem); overflow-y: auto;
  border: 1px solid var(--linie); border-left: 4px solid var(--gold); border-radius: var(--radius); color: var(--text); background: #fff;
  box-shadow: 0 24px 60px -16px rgba(43, 12, 20, .45); font-size: .92rem; line-height: 1.5;
}
.cookie-hinweis[hidden] { display: none; }
.cookie-hinweis__text { flex: 1; min-width: 0; }
.cookie-hinweis__marke { display: block; margin-bottom: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.cookie-hinweis h2 { margin-bottom: .5rem; font-size: 1.5rem; font-weight: 700; }
.cookie-hinweis p { margin: .55rem 0 0; }
.cookie-hinweis__aktionen { flex: 0 0 150px; }
.cookie-knopf { width: 100%; background: var(--weinrot-dunkel); color: #fff; border: 1px solid var(--weinrot-dunkel); min-height: 48px; justify-content: center; font: 600 .95rem var(--schrift); cursor: pointer; }
.cookie-knopf:hover { background: var(--weinrot); border-color: var(--weinrot); color: #fff; }
@media (max-width: 640px) {
  .cookie-hinweis { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.1rem; font-size: .86rem; }
  .cookie-hinweis__aktionen { flex: 0 1 auto; }
}

/* Kermes-Seite und Speisekarte */
.kermes-auftakt { padding: clamp(3.4rem, 7vw, 6rem) 0 clamp(6.4rem, 11vw, 9.5rem); }
.kermes-auftakt__innen { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.kermes-auftakt h1 { max-width: 12ch; margin-bottom: .4em; color: #fff; }
.kermes-auftakt p { max-width: 54ch; color: #ecd9de; font-size: 1.15rem; }
.kermes-auftakt__datum {
  display: flex; flex: 0 0 230px; width: 230px; height: 230px; align-items: center; justify-content: center; flex-direction: column;
  border: 1px solid var(--gold); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 10px rgba(201, 163, 95, .12), 0 0 0 11px rgba(201, 163, 95, .4);
}
.kermes-auftakt__datum span:first-child { color: var(--gold-hell); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.kermes-auftakt__datum strong { font: 400 4.3rem/1.05 var(--serife); }
.kermes-auftakt__datum span:last-child { color: #ecd9de; font-size: .95rem; }
.speisekarte { padding-top: clamp(2rem, 4vw, 3rem); background: var(--papier); }
.kermes-auftakt h1 em { display: block; color: var(--gold-hell); font-style: italic; }
.kermes-auftakt__tr { margin-top: -.5em; color: var(--gold-hell); font-family: var(--serife); font-style: italic; }
.speise-nav { position: sticky; top: 70px; z-index: 40; border-bottom: 1px solid var(--linie); background: rgba(251, 247, 240, .95); backdrop-filter: blur(12px); }
.speise-nav__innen { position: relative; display: flex; gap: .6rem; padding-block: .7rem; overflow-x: auto; scrollbar-width: none; }
.speise-nav__innen::-webkit-scrollbar { display: none; }
.speise-nav a:first-child { margin-left: auto; }
.speise-nav a:last-child { margin-right: auto; }
.speise-nav a {
  display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; min-width: 7.6rem; padding: .45rem 1.15rem .5rem;
  border: 1.5px solid var(--linie); border-radius: 99px; color: var(--weinrot-dunkel); background: #fff; line-height: 1.2; text-decoration: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.speise-nav a span { font-size: .92rem; font-weight: 700; }
.speise-nav a small { color: var(--gold-text); font-size: .74rem; font-style: italic; }
.speise-nav a:hover { border-color: var(--weinrot); }
.speise-nav a[aria-current="true"] { color: #fff; border-color: var(--weinrot); background: var(--weinrot); }
.speise-nav a[aria-current="true"] small { color: var(--gold-hell); }
.menue-bereich { margin-top: 3.8rem; }
.speisekarte .huelle > .menue-bereich:first-child { margin-top: 0; }
.menue-bereich__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1.5rem; margin-bottom: 1.3rem; padding-bottom: .8rem; border-bottom: 1px solid var(--gold); }
.menue-bereich__kopf h3 { margin: 0; font-size: 1.9rem; font-weight: 400; scroll-margin-top: 66px; }
.menue-bereich__tr { color: var(--gold-text); font: italic 1.3rem var(--serife); }
.menue-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.menue-artikel { position: relative; display: block; min-height: 112px; padding-left: 112px; overflow: hidden; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; box-shadow: 0 6px 20px -10px rgba(43, 12, 20, .22); transition: transform .3s var(--ease), box-shadow .3s ease; }
.menue-artikel:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(43, 12, 20, .32); }
.menue-artikel > img { position: absolute; inset: 0 auto 0 0; width: 112px; height: 100%; object-fit: cover; background: var(--sand); }
.menue-artikel__text { display: grid; min-height: 112px; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: baseline; column-gap: .8rem; row-gap: .1rem; padding: .85rem 1.05rem; }
.menue-artikel__text h4 { grid-column: 1; margin: 0; font-size: 1.15rem; line-height: 1.25; }
.menue-artikel__preis { grid-column: 2; grid-row: 1; color: var(--weinrot); font: 700 1.1rem var(--serife); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menue-artikel__text p { grid-column: 1 / -1; margin: 0; color: var(--text-leise); font-size: .9rem; line-height: 1.35; }
.menue-artikel__text .menue-artikel__tr { color: var(--gold-text); font: italic 1rem/1.3 var(--serife); }
.menue-artikel__zusatz { margin-top: .35rem !important; }
.menue-artikel__zusatz span { display: block; color: var(--gold-text); font-style: italic; }
.kermes-zurueck { margin: 3.4rem 0 0; text-align: center; font-weight: 700; }
@media (max-width: 700px) {
  .kermes-auftakt__innen { align-items: flex-start; flex-direction: column; gap: 2.4rem; }
  .kermes-auftakt__datum { align-self: flex-end; width: 165px; height: 165px; flex-basis: 165px; }
  .kermes-auftakt__datum strong { font-size: 3.1rem; }
}
@media (max-width: 520px) {
  .speise-nav { top: 62px; }
  .menue-gitter { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .menue-artikel { min-height: 116px; padding-left: 104px; }
  .menue-artikel > img { width: 104px; }
  .menue-artikel__text { min-height: 116px; }
  .menue-bereich__kopf h3 { scroll-margin-top: 50px; }
}

/* Bewegung: Einstieg im Held, Einblenden beim Scrollen */
@keyframes hoch { from { opacity: 0; translate: 0 24px; } }
@keyframes menue-ein { from { opacity: 0; translate: 0 -8px; } }
@keyframes zeit-ein { from { opacity: 0; translate: 0 14px; } }
@keyframes wippen { 50% { transform: translateY(-3px); } }
@keyframes kontur-auf { from { clip-path: inset(100% 0 0 0); } }
@keyframes standlinie-auf { from { scale: 0 1; } }
@keyframes kante-auf { from { translate: 0 100%; } }
@keyframes pulsieren-gold { 0% { box-shadow: 0 0 0 0 rgba(230, 208, 156, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(230, 208, 156, 0); } }
@keyframes pulsieren-weinrot { 0% { box-shadow: 0 0 0 0 rgba(139, 35, 57, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(139, 35, 57, 0); } }
.seitenkopf > .bogenrand, .kermes-auftakt > .bogenrand { animation: kante-auf .9s .25s var(--ease) both; }
@keyframes bogen-auf { from { opacity: 0; translate: 0 36px; scale: .97; } }
.hero__text > *, .seitenkopf .huelle > *, .kermes-auftakt__innen > * { animation: hoch .9s var(--ease) both; }
.hero__text > :nth-child(2), .seitenkopf .huelle > :nth-child(2), .kermes-auftakt__innen > :nth-child(2) { animation-delay: .1s; }
.hero__text > :nth-child(3), .seitenkopf .huelle > :nth-child(3) { animation-delay: .2s; }
.hero__text > :nth-child(4) { animation-delay: .3s; }
.hero__bild .bogen { animation: bogen-auf 1.3s .2s var(--ease) both; }

.einblenden { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease) calc(var(--i, 0) * 100ms), translate .9s var(--ease) calc(var(--i, 0) * 100ms); }
.einblenden.ist-sichtbar { opacity: 1; translate: 0 0; }
.menue-bereich.einblenden { translate: none; }
@media print { body { padding-bottom: 0; } .einblenden { opacity: 1; translate: none; } .kopf { position: static; } .cookie-hinweis { display: none; } }