/* Gemeinsame Darstellung einer Anzeige auf einer 1920×1080-Bühne (TV, Handy-Vorschau, Nachweis) */

/* ---------- Schriften (lokal, damit der TV auch offline alles hat) ---------- */
@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/static/fonts/oswald.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/static/fonts/playfair-display.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Anton"; src: url("/static/fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/static/fonts/dm-serif-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("/static/fonts/young-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/static/fonts/caveat.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Alfa Slab One"; src: url("/static/fonts/alfa-slab-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/static/fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }

.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #000; }

.ad {
  --k: 1;
  --head-font: "Archivo", system-ui, sans-serif; --head-weight: 900; --head-case: none; --head-track: -.025em; --head-lh: 1.02; --head-size: 1;
  position: absolute; inset: 0; display: flex; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: "Archivo", "Roboto", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ad * { box-sizing: border-box; }
.font-kraeftig { --head-font: "Oswald", "Arial Narrow", sans-serif; --head-weight: 700; --head-case: uppercase; --head-track: .005em; }
.font-elegant { --head-font: "Playfair Display", Georgia, serif; --head-weight: 800; --head-track: -.01em; --head-lh: 1.04; }
.font-plakat { --head-font: "Anton", "Oswald", sans-serif; --head-weight: 400; --head-case: uppercase; --head-track: .01em; --head-lh: 1; --head-size: 1.08; }
.font-bistro { --head-font: "DM Serif Display", Georgia, serif; --head-weight: 400; --head-track: -.01em; --head-size: 1.05; }
.font-frisch { --head-font: "Bricolage Grotesque", "Archivo", sans-serif; --head-weight: 800; --head-track: -.035em; --head-lh: .98; }
.font-freundlich { --head-font: "Young Serif", Georgia, serif; --head-weight: 400; --head-track: -.015em; --head-lh: 1.06; }
.font-kreide { --head-font: "Caveat", cursive; --head-weight: 700; --head-track: 0; --head-lh: 1.1; --head-size: 1.25; }
.font-kreide .ad-head { padding-bottom: .12em; }
.font-slab { --head-font: "Alfa Slab One", Georgia, serif; --head-weight: 400; --head-track: -.01em; --head-lh: 1.04; --head-size: .92; }
.font-schild { --head-font: "Big Shoulders Display", "Oswald", sans-serif; --head-weight: 900; --head-case: uppercase; --head-track: .01em; --head-lh: .94; --head-size: 1.12; }

/* ---------- Grundaufbau: Botschaft oben, Absenderleiste unten ---------- */
.ad { flex-direction: column; --band: var(--bg); }
@supports (color: color-mix(in srgb, red, blue)) { .ad { --band: color-mix(in srgb, var(--bg), #000 22%); } }
.ad-main { position: relative; flex: 1; min-height: 0; display: flex; }

.ad-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--k) * 30px); padding: 90px 140px 80px; overflow: hidden; }
.ad-head, .ad-text { width: fit-content; max-width: 100%; }
.ad-head {
  font-family: var(--head-font); font-weight: var(--head-weight); text-transform: var(--head-case); letter-spacing: var(--head-track);
  font-size: calc(var(--k) * var(--head-size) * 150px); line-height: var(--head-lh); overflow-wrap: normal; hyphens: manual; text-wrap: balance;
}
.ad-head .ln { display: block; overflow: hidden; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.ad-head .ln-i { display: inline-block; }
.ad-text { font-size: max(calc(var(--k) * 54px), 40px); line-height: 1.3; opacity: .9; white-space: pre-line; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; max-width: 24em; }

/* Gäste-Vorteil im Gutschein-Look */
.ad-perk {
  align-self: flex-start; display: flex; flex-direction: column; gap: 4px; max-width: 100%;
  margin-top: calc(var(--k) * 10px); padding: calc(var(--k) * 20px) calc(var(--k) * 30px);
  border: 4px dashed var(--ac); border-radius: 14px; transform: rotate(-1.2deg);
  font-size: max(calc(var(--k) * 40px), 34px); line-height: 1.2;
}
.ad-perk b { font-size: .62em; font-weight: 800; color: var(--ac); }
.ad-perk span { font-weight: 700; }

/* Absenderleiste: in jeder Anzeige gleich – Logo | Adresse + Status | QR-Code */
.ad-band { position: relative; flex: 0 0 230px; display: flex; align-items: center; gap: 64px; padding: 0 100px 0 140px; background: var(--band); color: var(--fg); }
.ad-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ac); transform-origin: 0 50%; }
.ad-mark { flex: 0 0 auto; display: flex; align-items: center; height: 170px; max-width: 470px; }
.ad-mark img { display: block; max-height: 170px; max-width: 470px; object-fit: contain; }
.ad-mark.plate { background: #fff; border-radius: 18px; padding: 16px 28px; }
.ad-mark.plate img { max-height: 132px; max-width: 414px; }
.ad-wordmark span { font-family: var(--head-font); font-weight: var(--head-weight); text-transform: var(--head-case); letter-spacing: var(--head-track); font-size: 64px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 470px; display: block; }
.ad-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 36px; line-height: 1.2; }
.ad-addr { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .85; }
.ad-live { display: flex; gap: 36px; font-weight: 700; white-space: nowrap; }
.ad-open { display: inline-flex; align-items: center; gap: 14px; }
.ad-open::before { content: ""; width: .42em; height: .42em; border-radius: 50%; background: currentColor; opacity: .5; }
.ad-open.is-open::before { background: #4ade80; opacity: 1; box-shadow: 0 0 0 .14em rgba(74,222,128,.25); }
.ad-qr { flex: 0 0 auto; display: flex; align-items: center; gap: 28px; }
.ad-qr span { text-align: right; font-size: 38px; font-weight: 800; line-height: 1.15; }
.ad-qr small { display: block; font-size: 24px; font-weight: 600; opacity: .7; }
.ad-qr svg { display: block; width: 184px; height: 184px; border-radius: 12px; }

.ad-media { position: relative; overflow: hidden; }
.ad-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--pos, 50%); }
.ad-curtain { display: none; }
.ad-empty-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: rgba(255,255,255,.7); font: 600 52px "Archivo", system-ui, sans-serif; }

/* Störer als Bierdeckel – fester Platz, nie über Text */
.ad-badge {
  position: absolute; z-index: 3; right: 130px; top: calc(50% - 170px); width: 340px; height: 340px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 70px; color: var(--bg);
  font-family: var(--head-font); font-weight: var(--head-weight); text-transform: var(--head-case);
  font-size: calc(var(--head-size) * 72px); line-height: .98; letter-spacing: -.01em;
  transform: rotate(-8deg);
}
.ad-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ad-badge svg path { fill: var(--ac); }
.ad-badge svg circle { fill: none; stroke: var(--bg); stroke-width: 1.6; opacity: .45; stroke-dasharray: 3 3; }
.ad-badge span { position: relative; font-size: calc(var(--bk, 1) * 1em); }
.ad-badge.long { font-size: calc(var(--head-size) * 54px); }

/* ---------- Layout: Text ---------- */
.ad-l-text.has-badge .ad-copy { padding-right: 560px; }

/* ---------- Layout: Foto + Text ---------- */
.ad-l-foto .ad-media { flex: 0 0 50%; }
.ad-l-foto .ad-copy { padding: 70px 100px 60px; }
.ad-l-foto .ad-head { font-size: calc(var(--k) * var(--head-size) * 116px); }
.ad-l-foto .ad-text { font-size: max(calc(var(--k) * 46px), 38px); }
.ad-l-foto .ad-badge { right: auto; left: calc(50% - 300px); top: auto; bottom: 40px; width: 280px; height: 280px; padding: 58px; font-size: calc(var(--head-size) * 60px); }
.ad-l-foto .ad-badge.long { font-size: calc(var(--head-size) * 44px); }

/* ---------- Layout: Marke (Logo groß, alles mittig) ---------- */
.ad-l-marke .ad-copy { align-items: center; text-align: center; padding: 60px 220px 50px; gap: calc(var(--k) * 24px); }
.ad-l-marke .ad-band .ad-mark { display: none; }
.ad-hero { display: flex; align-items: center; justify-content: center; height: calc(var(--k) * 300px); max-width: 1100px; margin-bottom: calc(var(--k) * 16px); }
.ad-hero img { display: block; max-height: 100%; max-width: 100%; object-fit: contain; }
.ad-hero.plate { background: #fff; border-radius: 28px; padding: calc(var(--k) * 34px) 60px; }
.ad-hero-word span { font-family: var(--head-font); font-weight: var(--head-weight); text-transform: var(--head-case); letter-spacing: var(--head-track); font-size: calc(var(--k) * 150px); line-height: 1; color: var(--ac); white-space: nowrap; }
.ad-l-marke .ad-head { font-size: calc(var(--k) * var(--head-size) * 112px); }
.ad-l-marke .ad-perk { align-self: center; }
.ad-l-marke.has-badge .ad-copy { padding-left: 340px; padding-right: 340px; }
.ad-l-marke .ad-badge { right: 50px; top: 50px; width: 270px; height: 270px; padding: 56px; font-size: calc(var(--head-size) * 58px); }

/* ---------- Layout: Foto rechts ---------- */
.ad-l-fotorechts .ad-media { flex: 0 0 50%; }
.ad-l-fotorechts .ad-copy { padding: 70px 100px 60px 140px; }
.ad-l-fotorechts .ad-head { font-size: calc(var(--k) * var(--head-size) * 116px); }
.ad-l-fotorechts .ad-text { font-size: max(calc(var(--k) * 46px), 38px); }
.ad-l-fotorechts .ad-badge { right: auto; left: calc(50% + 40px); top: auto; bottom: 40px; width: 280px; height: 280px; padding: 58px; font-size: calc(var(--head-size) * 60px); }

/* ---------- Layout: Panorama (Fotostreifen oben, Text darunter) ---------- */
.ad-l-panorama .ad-main { flex-direction: column; }
.ad-l-panorama .ad-media { flex: 0 0 46%; }
.ad-l-panorama .ad-copy { padding: 40px 140px 34px; gap: calc(var(--k) * 20px); }
.ad-l-panorama .ad-head { font-size: calc(var(--k) * var(--head-size) * 100px); }
.ad-l-panorama .ad-text { font-size: max(calc(var(--k) * 44px), 38px); }
.ad-l-panorama.has-badge .ad-copy { padding-right: 520px; }
.ad-l-panorama .ad-badge { top: calc(46% - 150px); right: 130px; width: 300px; height: 300px; padding: 62px; font-size: calc(var(--head-size) * 64px); }

/* ---------- Layout: Flyer (nur ein fertiges Bild) ---------- */
.ad-flyer { background: #000; }
.ad-flyer .ad-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; transform: scale(1.15); }
.ad-flyer .ad-photo { object-fit: contain; }

/* ======================================================================
   Animation – nur auf dem TV (.play). Ausschließlich transform/opacity,
   damit es auch auf einem Stick mit wenig Speicher flüssig läuft.
   Ablauf: Vorhang gibt das Foto frei → Logo → Überschrift Zeile für Zeile
   aus einer Maske → Text → Linie zeichnet sich → Gutschein wird gestempelt
   → Bierdeckel wird auf den Tisch geworfen.
   ====================================================================== */
@keyframes ad-line-up { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes ad-rise { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes ad-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-logo-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ad-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ad-curtain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ad-stamp { 0% { opacity: 0; transform: scale(1.35) rotate(-6deg); } 60% { opacity: 1; transform: scale(.97) rotate(-.6deg); } 100% { opacity: 1; transform: scale(1) rotate(-1.2deg); } }
@keyframes ad-toss {
  0% { opacity: 0; transform: translate3d(260px, -520px, 0) rotate(-250deg) scale(1.15); }
  62% { opacity: 1; transform: translate3d(0, 0, 0) rotate(2deg) scale(1); }
  78% { transform: rotate(-11deg); }
  100% { transform: rotate(-8deg); }
}
@keyframes ad-band-in { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes ad-zoom { from { transform: scale(1.001); } to { transform: scale(1.09); } }
@keyframes ad-pull { from { transform: scale(1.16); } to { transform: scale(1.02); } }
@keyframes ad-pulse { 0%, 100% { box-shadow: 0 0 0 .14em rgba(74,222,128,.25); } 50% { box-shadow: 0 0 0 .32em rgba(74,222,128,0); } }

.ad.play .ad-head { visibility: hidden; }
.ad.play.split .ad-head { visibility: visible; }
.ad.play .ln-i { animation: ad-line-up .95s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.38s + var(--i) * .09s); }
.ad.play .ad-band { animation: ad-band-in .7s cubic-bezier(.16, 1, .3, 1) .1s both; }
.ad.play .ad-mark { animation: ad-logo-in .8s cubic-bezier(.16, 1, .3, 1) .45s both; }
.ad.play .ad-text { animation: ad-rise .8s cubic-bezier(.16, 1, .3, 1) .72s both; }
.ad.play .ad-band::before { animation: ad-draw .9s cubic-bezier(.65, 0, .35, 1) .2s both; }
.ad.play .ad-info { animation: ad-fade .7s ease-out .9s both; }
.ad.play .ad-qr { animation: ad-logo-in .7s cubic-bezier(.16, 1, .3, 1) 1.05s both; }
.ad.play .ad-perk { animation: ad-stamp .55s cubic-bezier(.3, 1.5, .5, 1) 1.15s both; }
.ad.play .ad-badge { animation: ad-toss 1.05s cubic-bezier(.2, .9, .3, 1) 1.3s both; }
.ad.play .ad-open.is-open::before { animation: ad-pulse 2s ease-in-out 2s infinite; }

/* Fotos: Vorhang gibt das Bild frei, dann langsamer Zoom über die Anzeigedauer */
.ad.play .ad-curtain { display: block; position: absolute; inset: 0; z-index: 1; background: var(--ac); transform-origin: 100% 50%; animation: ad-curtain .85s cubic-bezier(.7, 0, .2, 1) .05s both; }
.ad.play .ad-photo { animation: ad-zoom var(--dur, 10s) linear both; will-change: transform; }
.ad-flyer.play .ad-photo { animation: ad-fade .6s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .ad.play *, .ad.play *::before { animation: none !important; }
  .ad.play .ad-curtain { display: none; }
}

/* Passt trotz Mindestgröße nicht: abschneiden statt unlesbar klein (der Editor warnt vorher) */
.ad.overfull .ad-copy { mask-image: linear-gradient(to bottom, #000 92%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent); }