.hero { position: relative; min-height: 500px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: repeat 100% url('/templates/tilta/images/bg/grid-layer.png');
  pointer-events: none;
}
.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-content { position: relative; z-index: 3; padding-top: 140px; padding-bottom: 140px; }

.sx-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .8rem; margin: 1.4rem auto 0; padding: 0; list-style: none; }
.sx-facts li { padding: .35rem .8rem; border: 1px solid rgba(255, 230, 10, .55); background: rgba(0, 0, 0, .6); font-size: .9rem; letter-spacing: 1px; text-transform: uppercase; }
.sx-facts b { color: var(--ta-yellow); font-family: 'MAXIMA', sans-serif; font-weight: normal; }
.sx-cta { margin-top: 1.4rem; }
.sx-cta .hud-btn { min-height: 48px; padding: 0 1.6rem; font-size: 1.25rem; }
.sx-full { display: flex; margin-bottom: 15px; }
.sx-full .hud-btn { flex: 1 1 auto; }
.sx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sx-bg { background: repeat 100% url('/templates/tilta/images/bg/grid-layer.png'), linear-gradient(160deg, #15151b 0%, #0b0b0e 60%, #101016 100%); width: 100%; }
.sx-fill { flex: 1 1 auto; width: 100%; min-height: 100%; background: transparent; }
.sx-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 70px 20px 40px; }
.sx-lead { max-width: 760px; margin: -.3rem 0 1.6rem; color: #cfcfd6; }

.sx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.05rem .95rem; background: #3a3a42; color: #e6e6ea;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); transition: background .15s; }
.sx-card::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: #0c0c0f;
  clip-path: polygon(0 0, calc(100% - 17.6px) 0, 100% 17.6px, 100% 100%, 0 100%); transition: background .15s; }
.sx-card:hover, .sx-card:focus-visible { background: var(--ta-yellow); color: #e6e6ea; text-decoration: none; }
.sx-card:hover::before, .sx-card:focus-visible::before { background: #141418; }
.sx-card .sx-kind { color: #9a9aa3; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; }
.sx-card .sx-name { color: #fff; font: 1.3rem/1.05 'MAXIMA', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.sx-card .sx-meta { font-size: .8rem; color: #bdbdc5; }
.sx-card .sx-price { margin-top: auto; padding-top: .45rem; color: var(--ta-yellow); font: 1.15rem 'MAXIMA', sans-serif; text-transform: uppercase; }
.sx-card .sx-price small { font: .75rem 'OCRAExtended', monospace; color: #bdbdc5; text-transform: none; }
.sx-card .sx-more { color: var(--ta-yellow); font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; }
.sx-actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.4rem; }

.sx-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin: 1.2rem 0 .7rem; color: var(--ta-yellow);
  font: 1.15rem 'MAXIMA', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.sx-group small { color: #9a9aa3; font: .75rem 'OCRAExtended', monospace; text-transform: none; letter-spacing: 0; }

.sx-who { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sx-who > div { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.1rem; background: rgba(0, 0, 0, .72); border-top: 4px solid var(--ta-yellow); color: #e6e6ea; }
.sx-who h3 { margin: 0; color: #fff; font: 1.25rem 'MAXIMA', sans-serif; text-transform: uppercase; letter-spacing: 1px; hyphens: auto; overflow-wrap: break-word; }
.sx-who p { margin: 0; font-size: .9rem; color: #cfcfd6; }

.sx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: sx; }
.sx-steps li { position: relative; padding: 1rem 1rem 1rem 3.4rem; background: rgba(0, 0, 0, .72); border: 1px solid #34343c; counter-increment: sx; }
.sx-steps li::before { content: counter(sx); position: absolute; left: 1rem; top: .85rem; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center;
  background: var(--ta-yellow); color: #000; font: 1rem 'MAXIMA', sans-serif; }
.sx-steps b { display: block; color: #fff; font: 1.05rem 'MAXIMA', sans-serif; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .2rem; }
.sx-steps span { font-size: .85rem; color: #cfcfd6; }
.sx-note { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: 1rem 1.2rem; border: 2px solid var(--ta-yellow); background: rgba(0, 0, 0, .75); }
.sx-note p { flex: 1 1 320px; margin: 0; }
.sx-note b { color: var(--ta-yellow); }

.sx-info { margin: .9rem 0 0; padding: 0; list-style: none; font-size: .95rem; }
.sx-info li { padding: .3rem 0; border-bottom: 1px solid rgba(255, 230, 10, .18); }
.sx-info li:last-child { border-bottom: 0; }
.sx-info b { color: var(--ta-yellow); font-weight: normal; font-family: 'MAXIMA', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.cut-corner address a { color: var(--ta-yellow); }
.sx-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 1rem; padding: .5rem .9rem; border: 1px solid rgba(255, 230, 10, .55); background: rgba(0, 0, 0, .6); color: #fff; }
.sx-rating:hover, .sx-rating:focus-visible { color: #fff; text-decoration: none; border-color: var(--ta-yellow); }
.sx-rating .sx-stars { color: var(--ta-yellow); letter-spacing: 2px; }
.sx-rating .sx-score { font: 1.3rem 'MAXIMA', sans-serif; }
.sx-rating small { color: #bdbdc5; }
#section-gutschein .ta-tile { --y: #ffe60a; --muted: #a3a3ab; --cut: 10px; --b: 4px; --w: 22px; --bc: #3a3a42;
  position: relative; display: flex; flex-direction: row; max-width: 980px; margin: 14px 10px 10px; background: rgba(9, 9, 12, .92); color: #e6e6ea; }
#section-gutschein .ta-tile *, #section-gutschein .ta-tile *::before, #section-gutschein .ta-tile *::after { box-sizing: border-box; }
#section-gutschein .ta-tile::before { content: ""; position: absolute; inset: -10px; z-index: 2; pointer-events: none; border: var(--b) solid transparent;
  --g: #0000 90deg, var(--bc) 0; --p: var(--w) var(--w) border-box no-repeat;
  background:
    conic-gradient(from 90deg  at top var(--b) left var(--b), var(--g)) 0 0 / var(--p),
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--g)) 100% 0 / var(--p),
    conic-gradient(from 0deg   at bottom var(--b) left var(--b), var(--g)) 0 100% / var(--p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--g)) 100% 100% / var(--p); }
#section-gutschein .ta-tile:hover, #section-gutschein .ta-tile:focus-within { --bc: var(--y); }
#section-gutschein .ta-tile-media { position: relative; flex: 0 0 42%; overflow: hidden; }
#section-gutschein .ta-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
#section-gutschein .ta-tile-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(9, 9, 12, .95)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
#section-gutschein .ta-tile-title { position: absolute; left: 20px; right: 20px; bottom: 12px; z-index: 1; margin: 0;
  font-family: 'MAXIMA', 'Arial Narrow', Impact, sans-serif; font-weight: normal; font-size: 2.1rem; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
#section-gutschein .ta-tile-title small { display: block; margin-bottom: 4px; font-size: .5em; letter-spacing: 3px; color: var(--y); }
#section-gutschein .ta-tile-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
#section-gutschein .ta-tile-text { margin: 0 0 16px; font-size: .9rem; line-height: 1.6; }
#section-gutschein .ta-facts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 11px; font-size: .9rem; }
#section-gutschein .ta-facts li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.35; }
#section-gutschein .ta-facts .icon { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--y); margin-top: -1px; }
#section-gutschein .ta-facts small { display: block; color: var(--muted); font-size: .86em; }
#section-gutschein .ta-cta { display: flex; margin-top: auto; }
#section-gutschein .ta-cta:hover { filter: drop-shadow(0 0 8px rgba(255, 230, 10, .55)); }
#section-gutschein .hud-btn { flex: 1 1 auto; }
.sx-swipe { display: none; }@media (max-width: 1199px) {
  .sx-grid, .sx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-who { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sx-wrap { padding: 50px 16px 30px; }
  #section-gutschein .ta-tile { --w: 18px; flex-direction: column; margin: 14px 2px 10px; }
  #section-gutschein .ta-tile-media { flex: none; aspect-ratio: 16 / 8; }
  #section-gutschein .ta-tile-title { font-size: 1.8rem; left: 16px; }
  #section-gutschein .ta-tile-body { padding: 14px 16px 16px; }
  #section-gutschein .ta-tile-text { display: none; }
  #section-gutschein .ta-facts { gap: 9px; font-size: .86rem; }
  .sx-facts li { font-size: .75rem; }
  .sx-lead { font-size: .9rem; margin-bottom: 1rem; }
  .sx-grid, .sx-who, .sx-steps {
    display: flex; gap: 12px; margin-left: -16px; margin-right: -16px; padding: 2px 16px 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sx-grid::-webkit-scrollbar, .sx-who::-webkit-scrollbar, .sx-steps::-webkit-scrollbar { display: none; }
  .sx-grid > *, .sx-who > *, .sx-steps > li { flex: 0 0 78%; scroll-snap-align: start; }
  .sx-who > div { padding: 1rem; }
  .sx-who p, .sx-steps span { font-size: .85rem; }
  .sx-swipe { display: block; margin: -.2rem 0 .4rem; color: #9a9aa3; font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; }
}
@media (min-width: 993px) {
  #section-angebote, #section-zielgruppen, #section-ablauf, #section-gutschein { height: auto; min-height: 100vh; align-items: center; }
}