/* EXT:tw_elements – gemeinsame Basis aller Taurerwirt-Elemente
   CI-Variablen nur als Vorgabe (:where = Spezifität 0) → das Seiten-CSS kann sie jederzeit überschreiben. */
:where(:root) {
  --tw-navy: #293349;
  --tw-gold: #d2be6f;
  --tw-light: #ececec;
  --tw-text: #333333;
  --tw-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  --tw-side: clamp(16px, 4.2vw, 84px);
  --tw-ease: cubic-bezier(.2, .7, .2, 1);
}

#main { overflow-x: clip; }
.tw-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); }
.content-main:has(> .grid > div > .tw-fullbleed:first-child) { padding-top: 0; }
.content-main:has(> .grid > div > :last-child.tw-fullbleed) { padding-bottom: 0; }

/* Pfeil (Textlinks / Badge) */
.tw-arrow {
  position: relative;
  display: block;
  width: 140px; height: 2px;
  margin: .55em auto 0;
  background: currentColor;
  transition: transform .3s var(--tw-ease);
}
.tw-arrow::after {
  content: "";
  position: absolute; right: -2px; top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 0 6px 13px;
  border-color: transparent transparent transparent currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .tw-arrow { transition: none !important; }
}

/* ---------- Medien: Parallax-Ebene, Play-Button, Fortschrittsbalken (alle Elemente) ---------- */
.tw-parallax {
  position: absolute;
  left: 0; right: 0;
  top: -14%; bottom: -14%;
  will-change: transform;
}
.tw-parallax > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tw-play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  translate: -50% -50%;
  display: grid; place-items: center;
  width: clamp(56px, 5vw, 78px); aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 0;
  background: var(--tw-play-bg, var(--tw-gold, #d2be6f));
  color: var(--tw-navy, #293349);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: scale .25s var(--tw-ease, ease), opacity .3s;
}
.tw-play svg { width: 38%; height: auto; margin-left: 8%; }
.tw-play:hover, .tw-play:focus-visible { scale: 1.08; }
.tw-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.is-playing .tw-play { opacity: 0; pointer-events: none; }
.tw-progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 4px;
  background: rgba(255, 255, 255, .25);
  pointer-events: none;
}
.tw-progress > span { display: block; height: 100%; width: var(--p, 0%); background: var(--tw-bar, var(--tw-gold, #d2be6f)); transition: width .25s linear; }
.is-playing .tw-progress { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tw-play, .tw-progress > span { transition: none; }
}

/* ---------- Hintergrund-Ebene (Bild + optional Video, optional Parallax) – Hero, Bild-Teaser ---------- */
.tw-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.tw-bg.tw-parallax { top: -14%; bottom: -14%; overflow: visible; }
.tw-bg.tw-parallax--top { top: 0; bottom: 0; }
.tw-bg__img, .tw-bg__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--tw-bg-pos, 50% 50%);
}
.tw-bg__video { opacity: 0; transition: opacity 1.2s ease; }
.tw-bg__video.is-ready { opacity: 1; }
/* Mehrere Hintergrundbilder: sanfte Überblendung (tw-media.js schaltet .is-active weiter) */
.tw-bg__fade { position: absolute; inset: 0; }
.tw-bg__fade > .tw-bg__img { opacity: 0; transition: opacity 1.8s ease-in-out; }
.tw-bg__fade > .tw-bg__img.is-active { opacity: 1; }
.tw-bg__fade--kb > .tw-bg__img { animation: tw-bg-kb 24s ease-in-out infinite alternate; }
.tw-bg__fade--kb > .tw-bg__img:nth-child(2n) { animation-direction: alternate-reverse; }
@keyframes tw-bg-kb { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
  .tw-bg__fade > .tw-bg__img { transition: none; }
  .tw-bg__fade--kb > .tw-bg__img { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-bg__video { display: none; }
}

/* ---------- Angebot als Overlay (Element „Taurerwirt: Angebot“ im Slider u. a.) – eckig, nur „rund“ ist rund ---------- */
.tw-ofr {
  --of-bg: rgba(226, 226, 226, .93);
  --of-c: var(--tw-navy, #293349);
  --of-t: var(--tw-navy, #293349);
  --of-p: var(--tw-navy, #293349);
  --of-border: transparent;
  --of-size: clamp(140px, 11vw, 210px);
  --of-x: clamp(76px, 7vw, 130px);
  --of-y: clamp(56px, 8vh, 110px);
  position: absolute; z-index: 6;
  color: var(--of-c);
  text-decoration: none;
  background: var(--of-bg);
  border: 2px solid var(--of-border);
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  transition: background-color .3s, color .3s, border-color .3s, transform .35s var(--tw-ease, ease), box-shadow .3s;
}
.tw-ofr--br { right: var(--of-x); bottom: var(--of-y); }
.tw-ofr--mr { right: var(--of-x); top: 50%; translate: 0 -50%; }
.tw-ofr--tr { right: var(--of-x); top: var(--of-y); }
.tw-ofr--tl { left: var(--of-x); top: var(--of-y); }
.tw-ofr--bl { left: var(--of-x); bottom: var(--of-y); }
.tw-ofr__inner { display: flex; flex-direction: column; align-items: center; gap: .25em; }
.tw-ofr__title {
  font-family: var(--font-family-headings, 'Crimson Pro', Georgia, serif);
  font-weight: 600; line-height: 1.08;
  color: var(--of-t);
  hyphens: auto; overflow-wrap: break-word;
}
.tw-ofr__price {
  font-family: var(--font-family-bold, 'Barlow Condensed', sans-serif);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--of-p);
}
.tw-ofr__price small { margin-right: .35em; font-size: .78em; font-weight: 400; letter-spacing: .12em; }
/* Button rund / eckig */
.tw-ofr--circle, .tw-ofr--square { width: var(--of-size); aspect-ratio: 1; display: grid; place-items: center; padding: .9em; text-align: center; }
.tw-ofr--circle { border-radius: 50%; }
.tw-ofr--size-s { --of-size: clamp(112px, 8.5vw, 160px); }
.tw-ofr--size-l { --of-size: clamp(170px, 14vw, 260px); }
.tw-ofr--circle .tw-ofr__title, .tw-ofr--square .tw-ofr__title { font-size: calc(var(--of-size) * .125); max-width: 100%; }
.tw-ofr--circle .tw-ofr__price, .tw-ofr--square .tw-ofr__price { --of-p: var(--of-c); font-size: calc(var(--of-size) * .085); }
.tw-ofr--circle .tw-arrow, .tw-ofr--square .tw-arrow { width: 52%; margin: .35em auto 0; }
a.tw-ofr--circle:hover, a.tw-ofr--circle:focus-visible, a.tw-ofr--square:hover, a.tw-ofr--square:focus-visible {
  background: var(--tw-navy, #293349); color: #fff; transform: scale(1.06);
}
a.tw-ofr--circle:hover :is(.tw-ofr__title, .tw-ofr__price), a.tw-ofr--square:hover :is(.tw-ofr__title, .tw-ofr__price),
a.tw-ofr--circle:focus-visible :is(.tw-ofr__title, .tw-ofr__price), a.tw-ofr--square:focus-visible :is(.tw-ofr__title, .tw-ofr__price) { color: #fff; }
/* kompakte Karte */
.tw-ofr--card {
  --of-bg: #ffffff;
  --of-c: var(--tw-text, #333333);
  --of-p: var(--tw-navy, #293349);
  width: min(300px, 80vw);
  padding: 20px 24px 22px;
  text-align: left;
}
.tw-ofr--card.tw-ofr--size-s { width: min(250px, 80vw); padding: 16px 18px; }
.tw-ofr--card.tw-ofr--size-l { width: min(360px, 80vw); padding: 26px 30px; }
.tw-ofr--card .tw-ofr__inner { align-items: flex-start; }
.tw-ofr__date { font-family: var(--font-family-bold, 'Barlow Condensed', sans-serif); font-size: .95rem; letter-spacing: .08em; opacity: .85; }
.tw-ofr--card .tw-ofr__title { font-size: clamp(1.4rem, 1.7vw, 1.8rem); }
.tw-ofr--card .tw-ofr__price { font-size: 1.15rem; }
.tw-ofr__more {
  display: inline-flex; align-items: center; gap: .8em; margin-top: .55em;
  font-family: var(--font-family-bold, 'Barlow Condensed', sans-serif);
  font-weight: 700; font-size: .95rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--of-t);
}
.tw-ofr__more .tw-arrow { width: 2.6em; margin: 0; }
a.tw-ofr--card:hover, a.tw-ofr--card:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0, 0, 0, .3); border-color: var(--tw-gold, #d2be6f); }
a.tw-ofr--card:hover .tw-arrow { transform: translateX(8px); }
a.tw-ofr:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Handy: oben, klein – Angebot der Folie rechts, fixes Angebot links (überdecken sich nie) */
@media (max-width: 700px) {
  .tw-ofr { --of-size: 108px; top: 12px; right: 12px; bottom: auto; left: auto; translate: none; }
  .tw-ofr--fixed { right: auto; left: 12px; }
  .tw-ofr--card { width: min(230px, 66vw); padding: 12px 14px; }
  .tw-ofr--card .tw-ofr__title { font-size: 1.15rem; }
  .tw-ofr--card .tw-ofr__price, .tw-ofr__date, .tw-ofr__more { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .tw-ofr { transition: none; } }