/* Angebote: Kacheln der Startseite (Baustein „Angebote“) und Karten der Seite /angebot. Ergänzt style.css, ändert dort nichts. */
.home-offers{overflow-x:clip}
.of-head-row{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:6px 18px;max-inline-size:none}
.of-head-row h2{margin-block-end:0}
.of-all{color:var(--accent-ink,var(--brand-accent));font-weight:800;font-size:calc(13.5px * var(--font-scale,1));text-decoration:none;white-space:nowrap}
.of-all:hover,.of-all:focus-visible{text-decoration:underline}
.of-grid{display:grid;gap:22px;padding-block:10px 6px}
.of-slot{display:grid;min-inline-size:0}

/* Karte */
.of-card{position:relative;display:grid;grid-template-rows:1fr;min-inline-size:0;border-radius:calc(var(--rk,1px) * 22);overflow:hidden;isolation:isolate;text-decoration:none;color:#1a0f08;
  background:linear-gradient(135deg,var(--brand-accent),var(--pink));box-shadow:0 22px 44px -18px rgba(255,90,120,.55)}
.of-home{transform:perspective(900px) rotateX(var(--of-tilt,0deg)) rotate(var(--of-rot,0deg));transform-origin:center;transition:transform .35s ease,box-shadow .35s ease;will-change:transform}
a.of-home:hover,a.of-home:focus-visible{transform:perspective(900px) rotateX(0deg) rotate(0deg) translateY(-4px)}
a.of-home:focus-visible{outline:3px solid #fff;outline-offset:3px}
.of-img{display:block;aspect-ratio:16/8;overflow:hidden;background:rgba(0,0,0,.2)}
.of-img img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.of-card.has-img{grid-template-rows:auto 1fr}
.of-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 18px 20px;min-inline-size:0}
.of-badge{padding:5px 12px;border-radius:999px;background:#0b1b2b;color:#fff;font-weight:900;font-size:calc(13px * var(--font-scale,1));letter-spacing:.04em;transform:rotate(-3deg)}
.of-title{margin:0;font-size:calc(22px * var(--font-scale,1));font-weight:900;line-height:1.12;overflow-wrap:anywhere}
.of-text{margin:0;font-size:calc(14.5px * var(--font-scale,1));font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.of-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 6px}
.of-code{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;border-radius:10px;border:2px dashed currentColor;background:rgba(255,255,255,.22)}
.of-code small{font-size:calc(10.5px * var(--font-scale,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.of-code b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:calc(15px * var(--font-scale,1));letter-spacing:.08em}
.of-valid{font-size:calc(12.5px * var(--font-scale,1));font-weight:800}
.of-btn{margin-block-start:auto;padding:10px 16px;border-radius:999px;background:#0b1b2b;color:#fff;font-weight:900;font-size:calc(13.5px * var(--font-scale,1))}

/* Stile */
.of-neon{background:#07121f;color:#fff;border:1.5px solid var(--brand-accent);box-shadow:0 0 0 1px rgba(255,140,0,.35),0 0 34px rgba(255,77,141,.42),inset 0 0 28px rgba(255,140,0,.1)}
.of-neon .of-title{background:linear-gradient(90deg,#ffb35c,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.of-neon .of-badge,.of-neon .of-btn{background:linear-gradient(135deg,var(--brand-accent),var(--pink));color:#1a0f08}
.of-neon .of-code{background:rgba(255,255,255,.06);color:#ffb35c}
.of-ticket{background:#fff6e6;color:#1a1200;box-shadow:0 22px 44px -20px rgba(0,0,0,.6);
  -webkit-mask:radial-gradient(circle 13px at 0 50%,#0000 97%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 97%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 13px at 0 50%,#0000 97%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 97%,#000) 100% 0/51% 100% no-repeat}
.of-ticket .of-body{margin:10px;padding:12px 16px 14px;border:2px dashed rgba(26,18,0,.35);border-radius:calc(var(--rk,1px) * 14)}
.of-ticket .of-badge{background:var(--brand-accent);color:#1a0f08}
.of-ticket .of-code{background:#fff}
.of-clean{background:#fff;color:#0b1b2b;box-shadow:0 22px 44px -22px rgba(0,0,0,.65)}
.of-clean .of-badge,.of-clean .of-btn{background:linear-gradient(135deg,var(--brand-accent),var(--pink));color:#1a0f08}
.of-clean .of-code{background:#f3f6fa}
.of-clean .of-title{color:#0b1b2b}

/* Seite /angebot */
.of-list{display:grid;gap:22px}
.of-page .of-body{padding:20px 20px 22px;gap:10px}
.of-page .of-meta{margin:0}
.of-cond{inline-size:100%}
.of-page .of-title{font-size:calc(24px * var(--font-scale,1))}
.of-desc{margin:0;font-size:calc(14.5px * var(--font-scale,1));line-height:1.55;overflow-wrap:anywhere}
.of-actions{margin:4px 0 0}
.of-page .btn{padding:12px 20px;font-size:calc(14.5px * var(--font-scale,1))}
.of-glow.of-page .btn-primary{background:#0b1b2b;color:#fff;box-shadow:none}
.of-copy{font:inherit;font-size:calc(12.5px * var(--font-scale,1));font-weight:800;padding:6px 12px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.of-copy[hidden]{display:none}
.of-cond{font-size:calc(12.5px * var(--font-scale,1));line-height:1.5}
.of-cond summary{cursor:pointer;font-weight:800}
.of-cond p{margin:6px 0 0;opacity:.85}
.of-page{scroll-margin-block-start:90px}
.of-page:target{outline:3px solid #fff;outline-offset:4px}
.of-empty{padding:26px 20px;border-radius:calc(var(--rk,1px) * 18);border:1px dashed var(--home-line-strong);text-align:center}
.of-empty strong{display:block;font-size:calc(18px * var(--font-scale,1));margin-block-end:6px}
.of-empty p{margin:0;color:var(--home-muted)}

@media(min-width:720px){
  .of-grid-1{max-inline-size:720px;margin-inline:auto}
  .of-grid-2,.of-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-grid-1 .of-title{font-size:calc(28px * var(--font-scale,1))}
  .of-page.has-img{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .of-page.has-img .of-img{aspect-ratio:auto;block-size:100%;min-block-size:240px}
  .of-page .of-body{padding:26px 28px 28px}
  .of-page .of-title{font-size:calc(30px * var(--font-scale,1))}
}
@media(min-width:1040px){
  .of-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .of-home{transition:none}
}