/* WAYF – Seite (Farben kommen als Variablen aus dem Admin: --accent/--acc, --fgc, --bgc, --ink) */
  /* ---------- Desktop (Mockup „Idee 2“): Logo mittig, darunter Event breit + The List / Contact ---------- */
  .top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: calc(34px + env(safe-area-inset-top)) var(--gutter) 0; pointer-events: none; }
  .top > * { pointer-events: auto; }
  .follow { position: absolute; z-index: 2; left: calc(max(0px, (100% - 1440px) / 2) + var(--gutter)); top: calc(var(--hpt) + env(safe-area-inset-top) + var(--lw) / var(--ratio, 3.353) * var(--wy, .32)); transform: translateY(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 16px; }
  .follow .ig { color: var(--accent); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1.5px solid var(--accent); box-shadow: none; }
  @media (hover: hover) and (pointer: fine) { .follow .ig:hover { background: rgba(var(--acc), .1); } }
  .ig-link { display: none; }
  .follow .cap { font-size: 10px; color: rgba(var(--fgc), .7); }
  .ig { border-radius: 50%; }

  .hero { --hpt: 64px; --lw: min(970px, 64vw, 25.6dvh * var(--ratio, 3.353), max(90px * var(--ratio, 3.353), (100dvh - 670px) * var(--ratio, 3.353))); position: relative; flex: none; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: calc(var(--hpt) + env(safe-area-inset-top)) var(--gutter) 0; text-align: center; }
  .hero h1 { margin: 0; }
  .logo { width: var(--lw); }
  .tagline { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; line-height: 1.6; color: rgba(var(--fgc), .72); text-wrap: balance; }
  .rules { gap: 10px 30px; list-style: none; margin: 0; padding: 0; color: var(--accent); filter: drop-shadow(0 0 10px rgba(var(--acc), .25)); }
  .rules li { display: flex; align-items: center; gap: 9px; }
  .rules li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--acc), .4); margin-right: 21px; }
  .rules .ico { width: 16px; height: 16px; stroke-width: 1.7; }
  .rules .cap { font-size: 10px; }

  .main { flex: 0 1 400px; min-height: 0; max-height: 400px; width: 100%; max-width: 1440px; margin: clamp(24px, 6vh, 80px) auto auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr); gap: 24px; }
  .tile { border-radius: 28px; min-height: 0; }

  /* Event-Kachel */
  .ev-tile { padding: 20px; display: flex; }
  .ev { display: flex; gap: 32px; width: 100%; min-height: 0; }
  .ev__img { position: relative; height: 100%; aspect-ratio: 1 / 1; flex: none; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(var(--fgc), .1), rgb(var(--bgc)) 70%); }
  .ev__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) { .ev__img:hover img { transform: scale(1.05); } }
  .ev__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 6px 10px 0 0; }
  .ev__head { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .ev__head .cap { color: rgba(var(--fgc), .62); }
  .ev__name { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .facts { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
  .facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .facts dt { font-size: 9px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); }
  .facts dd { margin: 0; font-size: 15px; overflow-wrap: break-word; }
  .facts dd b { font-weight: 600; }

  /* Countdown: runde Glas-Leiste in Button-Breite */
  .cd { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 7px clamp(18px, 2.4vw, 34px); border-radius: 999px; background: linear-gradient(150deg, rgba(var(--fgc), .07), rgba(var(--fgc), .015)); border: 1px solid rgba(var(--fgc), .12); box-shadow: inset 0 1px 0 rgba(var(--fgc), .2); }
  .cd__u { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 30px; }
  .cd__u b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .cd__u span { font-size: 7.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--fgc), .45); }
  .cd__u:last-of-type b { color: var(--accent); }
  .cd__sep { font-size: 16px; color: rgba(var(--fgc), .25); padding-bottom: 10px; }
  .cd--open { justify-content: center; }
  .cd--open .cap { font-size: 10px; color: var(--accent); }

  /* Pillen-Button mit Pfeil im Kreis */
  .pbtn { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 50px; min-height: 50px; padding: 0 56px; box-sizing: border-box; border-radius: 999px; border: 0; font-size: 16px; font-weight: 700; cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform 160ms var(--ease-out), box-shadow 200ms ease, opacity 200ms ease; }
  .pbtn:active { transform: scale(.97); }
  .pbtn__arrow { position: absolute; right: 6px; top: 50%; margin-top: -19px; width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--ink), .78); box-shadow: inset 0 1px 0 rgba(var(--fgc), .14), 0 2px 8px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; flex: none; transition: transform 200ms var(--ease-out); }
  .pbtn__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  /* Liquid Glass: Farbe bleibt, Fläche leicht durchsichtig mit Lichtkante & Glanz */
  .pbtn--accent, .pbtn--white { -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
  .pbtn--accent { background: linear-gradient(180deg, rgba(var(--fgc), .34), rgba(var(--fgc), 0) 55%), rgba(var(--acc), .86); color: rgb(var(--ink)); border: 1px solid rgba(var(--acc), .7); box-shadow: inset 0 1px 0 rgba(var(--fgc), .65), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 0 18px rgba(var(--fgc), .14), 0 0 28px rgba(var(--acc), .22), 0 12px 28px rgba(0, 0, 0, .35); }
  .pbtn--accent .pbtn__arrow { color: var(--accent); }
  .pbtn--white { background: linear-gradient(180deg, rgba(var(--fgc), .4), rgba(var(--fgc), 0) 55%), rgba(var(--fgc), .84); color: rgb(var(--ink)); border: 1px solid rgba(var(--fgc), .7); box-shadow: inset 0 1px 0 rgba(var(--fgc), .9), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 12px 28px rgba(0, 0, 0, .35); }
  .pbtn--white .pbtn__arrow { color: rgb(var(--fgc)); }
  .pbtn--off { background: rgba(var(--fgc), .04); color: var(--muted); border: 0; box-shadow: inset 0 0 0 1px rgba(var(--fgc), .2); padding: 0 56px; cursor: default; }
  .pbtn--off:active { transform: none; }
  .pbtn__lock { flex: none; width: 16px; height: 16px; margin-left: -4px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pbtn[disabled] { opacity: .6; cursor: progress; }
  @media (hover: hover) and (pointer: fine) {
    .pbtn--accent:hover { box-shadow: inset 0 1px 0 rgba(var(--fgc), .65), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 0 18px rgba(var(--fgc), .14), 0 0 40px rgba(var(--acc), .38), 0 12px 28px rgba(0, 0, 0, .35); }
    .pbtn:not(.pbtn--off):hover .pbtn__arrow { transform: rotate(45deg); }
  }

  /* Zweite Kachel: The List / Contact */
  .side { padding: 20px 26px 20px; display: flex; flex-direction: column; gap: 16px; }
  .switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(var(--fgc), .08); flex: none; }
  .switch [role="tab"] { height: 42px; border-radius: 999px; border: 0; background: transparent; color: rgba(var(--fgc), .72); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out); }
  .switch [role="tab"]:active { transform: scale(.97); }
  .switch [role="tab"][aria-selected="true"] { background: linear-gradient(180deg, rgba(var(--fgc), .4), rgba(var(--fgc), 0) 60%), rgba(var(--fgc), .82); color: rgb(var(--ink)); box-shadow: inset 0 0 0 1px rgba(var(--fgc), .6), inset 0 1px 0 rgba(var(--fgc), .9), 0 4px 14px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); }
  @media (hover: hover) and (pointer: fine) { .switch [role="tab"][aria-selected="false"]:hover { color: rgb(var(--fgc)); background: rgba(var(--fgc), .06); } }
  .panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .panel[hidden] { display: none; }
  .panel form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .list-form { justify-content: space-between; gap: 18px !important; }
  .list-intro { display: flex; flex-direction: column; gap: 10px; }
  .list-intro .h2 { margin-top: 4px; font-size: 28px; line-height: 1.1; }
  .list-intro p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(var(--fgc), .66); }
  .stack { display: flex; flex-direction: column; gap: 10px; }
  .field { width: 100%; min-width: 0; height: 50px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(var(--fgc), .16); background: rgba(0, 0, 0, .35); color: rgb(var(--fgc)); font: inherit; font-size: 16px; transition: border-color 160ms ease; }
  .field::placeholder { color: rgba(var(--fgc), .45); }
  .field:focus { outline: none; border-color: rgba(var(--fgc), .5); }
  textarea.field { flex: 1 1 auto; min-height: 80px; height: auto; padding: 14px 20px; border-radius: 22px; resize: none; line-height: 1.5; }
  .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sel { position: relative; }
  .sel select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
  .sel select:has(option[value=""]:checked) { color: rgba(var(--fgc), .45); }
  .sel select option { color: rgb(var(--ink)); background: rgb(var(--fgc)); }
  .sel svg { position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: rgba(var(--fgc), .7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  .ct .pbtn { margin-top: auto; }
  .err { margin: 0; font-size: 13px; color: #ff8a80; }
  .err[hidden] { display: none; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .done { margin: auto; max-width: 300px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; line-height: 1.55; }
  .done b { font-size: 24px; font-weight: 800; color: rgb(var(--fgc)); }
  .msg { margin: auto; max-width: 340px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; line-height: 1.55; }
  .msg b { font-size: 22px; color: rgb(var(--fgc)); }
  .sk { border-radius: 18px; background: linear-gradient(90deg, rgba(var(--fgc),.04), rgba(var(--fgc),.09), rgba(var(--fgc),.04)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
  @keyframes sk { to { background-position: -200% 0; } }

  .foot nav { align-items: center; gap: 14px; }
  .foot nav a { color: var(--muted); padding: 6px 0; transition: color 160ms ease; }
  @media (hover: hover) and (pointer: fine) { .foot nav button:hover, .foot nav a:hover { color: rgb(var(--fgc)); } }
  .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(var(--acc), .5); flex: none; }
  .foot { flex: none; width: 100%; max-width: 1440px; margin: 0 auto; padding: 16px var(--gutter) calc(22px + env(safe-area-inset-bottom)); }

  /* Licht: Acid-Streifen wie auf den Flyern */
  /* Acid-Streifen wie auf den Flyern – atmen langsam, ein Lichtpunkt läuft entlang */
  .beam { position: absolute; z-index: -1; height: 3px; background: var(--accent); filter: blur(2px); box-shadow: 0 0 40px 8px var(--accent); pointer-events: none; overflow: hidden; will-change: transform, opacity; }
  .beam::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; width: 18%; background: linear-gradient(90deg, transparent, rgb(var(--fgc)), transparent); opacity: .9; transform: translateX(-120%); animation: beam-run 7s cubic-bezier(.45, 0, .55, 1) infinite; }
  .beam--a { left: 8%; top: 66%; width: 92%; opacity: .4; --r: -9deg; transform: rotate(var(--r)); animation: beam-a 11s ease-in-out infinite alternate; }
  @keyframes beam-a { 0% { transform: rotate(-9deg) translateY(0); opacity: .32; } 100% { transform: rotate(-8deg) translateY(-26px); opacity: .5; } }
  @keyframes beam-run { 0%, 25% { transform: translateX(-120%); } 75%, 100% { transform: translateX(620%); } }

  /* Heißer Draht: jeder Buchstabe wird von einem anderen Punkt aus komplett umrandet, dann in derselben Richtung wieder eingezogen */
  .brand { position: relative; display: block; }
  .wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 9px rgba(var(--acc), .55)); }
  .wire path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000 1000; stroke-dashoffset: 1000; animation: wire 9s infinite; }
  .wire path:nth-child(2) { animation-delay: .35s; }
  .wire path:nth-child(3) { animation-delay: .7s; }
  .wire path:nth-child(4) { animation-delay: 1.05s; }
  @keyframes wire {
    0% { stroke-dashoffset: 1000; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    38% { stroke-dashoffset: 0; }
    52% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    90%, 100% { stroke-dashoffset: -1000; }
  }

  /* niedrige Desktop-Fenster */
  @media (min-width: 1100px) and (max-height: 760px) {
    .top { padding-top: 22px; }
    .hero { --hpt: 40px; --lw: min(64vw, max(64px * var(--ratio, 3.353), (100dvh - 660px) * var(--ratio, 3.353))); gap: 14px; }
    .tagline { font-size: 12px; }
    .facts > div { padding: 9px 0; }
    .side { gap: 10px; padding-top: 14px; }
    .list-intro .h2 { font-size: 24px; }
    .list-intro p { font-size: 13px; }
    .field { height: 46px; }
    .ev__info { gap: 12px; }
    .pbtn { height: 46px; min-height: 46px; }
    .pbtn__arrow { width: 34px; height: 34px; margin-top: -17px; right: 6px; }
    .pbtn__arrow svg { width: 15px; height: 15px; }
    .foot { padding-top: 10px; padding-bottom: 14px; }
  }

  /* ---------- Handy, Tablet & kleine Fenster: alles vollständig untereinander, Seite darf scrollen ---------- */
  @media (max-width: 1099px), (max-height: 639px) {
    body { overflow: auto; }
    .page { height: auto; min-height: 100dvh; overflow: visible; overflow-x: clip; }
    .top { position: static; padding-top: calc(20px + env(safe-area-inset-top)); display: flex; justify-content: center; }
    .follow { display: none; }
    .ig-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
    .ig-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .hero { flex: none; gap: 16px; padding-top: 30px; }
    .logo { width: min(520px, 86vw, 170px * var(--ratio, 3.353)); }
    .tagline { font-size: 11.5px; letter-spacing: .18em; max-width: 460px; }
    .rules { gap: 8px 16px; }
    .rules li + li::before { margin-right: 7px; }
    .rules .cap { font-size: 9.5px; letter-spacing: .24em; }

    .main { display: flex; flex-direction: column; max-height: none; flex: none; width: 100%; max-width: 640px; margin-top: 32px; gap: 20px; }
    .ev-tile { padding: 14px; border-radius: 24px; }
    .ev { flex-direction: column; gap: 18px; }
    .ev__img { width: 100%; height: auto; border-radius: 16px; }
    .ev__info { gap: 16px; padding: 0 4px 2px; }
    .ev__name { font-size: 26px; -webkit-line-clamp: 3; }
    .facts > div { grid-template-columns: 84px minmax(0, 1fr); }
    .cd { padding: 7px 26px; }

    .side { padding: 18px 18px 20px; border-radius: 24px; gap: 20px; }
    .panel form { gap: 12px; }
    .list-form { gap: 18px !important; }
    #p-contact textarea.field { min-height: 150px; }

    .foot { padding-top: 22px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 11px; }
    .foot nav { gap: 10px; }
    .beam--a { top: 66%; left: -10%; width: 130%; }
    /* Hintergrund (Lichter, gelber Strich, Vignette) bleibt beim Scrollen stehen */
    .light, .beam, .vignette { position: fixed; }
  }
  /* Tablet: Bild links, Infos rechts – wie am Desktop */
  @media (min-width: 700px) and (max-width: 1099px) {
    .ev { flex-direction: row; gap: 22px; }
    .ev__img { width: 46%; align-self: flex-start; }
    .ev__info { padding: 6px 4px 0 0; justify-content: space-between; }
  }
  /* schmale Handys: Regeln als drei Spalten, Icon über dem Text */
  @media (max-width: 440px) {
    .rules { display: flex; justify-content: space-around; gap: 8px; width: 100%; max-width: 380px; }
    .rules li { flex-direction: column; gap: 8px; white-space: nowrap; }
    .two { grid-template-columns: minmax(0, 1fr); }
    .rules li + li::before { display: none; }
    .rules .ico { width: 18px; height: 18px; }
    .rules .cap { font-size: 9px; letter-spacing: .2em; line-height: 1.4; }
  }
  @media (max-width: 360px) {
    .facts > div { grid-template-columns: 70px minmax(0, 1fr); }
    .cd { padding: 6px 16px; }
    .ev__name { font-size: 23px; }
    .rules .cap { letter-spacing: .12em; font-size: 8.5px; }
  }
  @media (prefers-reduced-motion: reduce) { .sk { animation: none; } .pbtn, .pbtn__arrow { transition: none; } .beam, .beam::after { animation: none; } .beam::after { display: none; } .wire { display: none; } .ev__img img { transition: none; } .ev__img:hover img { transform: none; } }

  /* Effekte – im Admin ein-/ausschaltbar (Klassen am <body>) */
  .fx-no-wire .wire, .fx-no-beam .beam, .fx-no-lights .light { display: none; }
  .fx-no-beamlight .beam::after { display: none; }
  .fx-no-zoom .ev__img img { transform: none !important; transition: none; }
  .wire path { animation-duration: var(--wire-dur, 9s); }

  /* Rechtstexte */
  .legal h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 700; color: var(--fg); }
  .legal h3:first-child { margin-top: 0; }
  .legal ul { margin: 0 0 10px; padding-left: 20px; }
  .legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
  .legal mark.todo { background: rgba(var(--acc), .18); color: var(--accent); border-radius: 4px; padding: 0 3px; }


  /* =====================================================================
     V2 (Nov 2026) – Kupfer, Foto-Hintergrund mit Logo links („Vorschlag A“)
     Allgemein: Felder & Buttons wie der Countdown, Event-Titel in Akzentfarbe, Instagram ohne Kreis.
     Foto + Logo links nur mit body.fx-photo (Admin: Logo & Effekte › „Foto als Hintergrund“).
     ===================================================================== */
  .ev__name { color: var(--accent); }
  .field:not(textarea) { height: 52px; }
  .field { background: linear-gradient(150deg, rgba(var(--fgc), .07), rgba(var(--fgc), .015)), rgba(0, 0, 0, .3); border: 1px solid rgba(var(--fgc), .12); box-shadow: inset 0 1px 0 rgba(var(--fgc), .2); }
  .field:focus { border-color: rgba(var(--fgc), .4); }
  .pbtn { height: 52px; min-height: 52px; }
  .pbtn__arrow { width: 40px; height: 40px; margin-top: -20px; right: 6px; }
  .pbtn--off { background: linear-gradient(150deg, rgba(var(--fgc), .07), rgba(var(--fgc), .015)); border: 1px solid rgba(var(--fgc), .12); box-shadow: inset 0 1px 0 rgba(var(--fgc), .2); }
  .follow .ig { border: 0; width: auto; height: auto; min-height: 0; padding: 4px; }
  .follow .ig .ico { width: 22px; height: 22px; stroke-width: 1.7; }
  @media (hover: hover) and (pointer: fine) { .follow .ig:hover { background: none; opacity: .75; } }
  .ig-link .ig-ico { width: 16px; height: 16px; stroke-width: 1.8; margin-right: 2px; }
  @media (min-width: 1100px) and (max-height: 760px) {
    .cd { min-height: 46px; padding-top: 4px; padding-bottom: 4px; }
    .field:not(textarea) { height: 46px; }
    .pbtn { height: 46px; min-height: 46px; }
    .pbtn__arrow { width: 34px; height: 34px; margin-top: -17px; }
  }

  .photo { display: none; }
  body.fx-photo { background: linear-gradient(180deg, #140904 0%, #0d0a06 38%, rgb(var(--bgc)) 62%, rgb(var(--bgc)) 100%); }
  .fx-photo .photo { display: block; position: absolute; z-index: -2; pointer-events: none; background: url(/assets/bg/sofa.webp) 0 0 / 100% 100% no-repeat;
    left: 22vw; top: -16vh; width: 92vw; height: calc(92vw * 941 / 1672);
    /* weicher Rand rundum + unten zusätzlich ein langer Verlauf ins Dunkle (keine sichtbare Kante) */
    -webkit-mask: radial-gradient(ellipse 52% 60% at 65% 52%, #000 50%, transparent 100%), linear-gradient(180deg, #000 74%, rgba(0, 0, 0, .55) 89%, transparent 100%); -webkit-mask-composite: source-in;
    mask: radial-gradient(ellipse 52% 60% at 65% 52%, #000 50%, transparent 100%), linear-gradient(180deg, #000 74%, rgba(0, 0, 0, .55) 89%, transparent 100%); mask-composite: intersect; }
  .fx-photo .vignette { background: radial-gradient(ellipse at 70% 30%, transparent 45%, rgba(0, 0, 0, .55)), linear-gradient(180deg, transparent 55%, rgba(4, 10, 7, .6)); }
  .fx-photo .glass { background-color: rgba(14, 10, 7, .38); }
  .fx-photo .hero { margin-top: auto; align-items: flex-start; text-align: left; width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-top: calc(56px + env(safe-area-inset-top));
    --lw: min(760px, 40vw, max(56px * var(--ratio, 3.353), (74dvh - 476px) * var(--ratio, 3.353))); }
  .fx-photo .rules { justify-content: flex-start; }
  /* Logo bis Instagram eine Spur höher als die Mitte (Kacheln bleiben, wo sie sind) */
  @media (min-width: 1100px) and (min-height: 640px) { .fx-photo .hero { top: calc(-1 * clamp(12px, 3vh - 4px, 32px)); } }
  @media (min-width: 1100px) and (min-height: 640px) and (max-height: 760px) { .fx-photo .hero { top: -10px; } }
  /* Große Bildschirme: freie Höhe 3 : 1 verteilen (oben : zwischen Kacheln und Fußzeile) – alles sitzt eine Spur höher als ganz unten */
  @media (min-width: 1100px) and (min-height: 640px) {
    .fx-photo .page::before { content: ""; order: -1; flex: 3 1 0; }
    .fx-photo .hero { margin-top: 0; }
    .fx-photo .page::after { content: ""; order: 1; flex: 1 1 0; }
    .fx-photo .foot { order: 2; }
  }
  .fx-photo .follow { position: static; transform: none; order: 5; flex-direction: row; gap: 14px; margin-top: 2px; }
  /* Kacheln: oben eine Spur mehr Luft (zu Follow Us) als unten (zur Fußzeile); in niedrigen Fenstern schrumpfen beide */
  .fx-photo .main { margin: clamp(10px, 17vh - 100px, 56px) auto clamp(0px, 8vh - 52px, 28px); }
  @media (min-width: 1100px) and (max-height: 860px) { .fx-photo .hero { gap: 16px; } }
  @media (min-width: 1100px) and (max-height: 760px) { .fx-photo .hero { padding-top: calc(32px + env(safe-area-inset-top)); --lw: min(560px, 40vw, max(56px * var(--ratio, 3.353), (73dvh - 429px) * var(--ratio, 3.353))); } }

  /* Handy & kleine Fenster: Foto steht fest, Telefon am rechten Rand, dunkler Verlauf für die Lesbarkeit */
  @media (max-width: 1099px), (max-height: 639px) {
    /* Größe & Lage an der Breite ausgerichtet (nicht an der Höhe): Safari-Leisten verändern die Höhe, das Foto bleibt trotzdem wie im Mockup */
    .fx-photo .photo { position: fixed; inset: 0; width: auto; height: auto; background-size: 462vw auto; background-position: 58% -43vw; -webkit-mask: none; mask: none; }
    .fx-photo .vignette { position: fixed; background:
      linear-gradient(90deg, transparent 30%, rgba(12, 6, 2, .55) 70%, rgba(12, 6, 2, .72) 100%) 0 0 / 100% 52% no-repeat,
      linear-gradient(180deg, rgba(12, 6, 2, .55) 0%, rgba(12, 6, 2, .25) 40%, rgba(4, 12, 8, .55) 100%); }
    .fx-photo .hero { align-items: center; text-align: center; padding-top: 30px; }
    .fx-photo .rules { justify-content: center; }
    .fx-photo .main { margin-top: 32px; margin-bottom: 0; }
  }

  /* Schmale Computer-Fenster (1100–1279 px): Event-Bild schmaler, damit die Infos nicht aus der Kachel laufen */
  @media (min-width: 1100px) and (max-width: 1279px) {
    .ev__img { aspect-ratio: auto; width: 38%; }
    .ev { gap: 22px; }
    .side { gap: 12px; padding-left: 22px; padding-right: 22px; }
    .list-intro p { font-size: 13px; }
    .list-intro .h2 { font-size: 24px; }
    .list-form { gap: 12px !important; }
  }

  /* ---------- Mehrere Events ----------
     Computer: immer nur ein Event in der Kachel, darunter ‹ 1 / 3 › zum Blättern.
     Handy/Scroll-Ansicht: alle Events untereinander, stapeln sich beim Scrollen. */
  .ev-multi { position: relative; }
  .evs { display: flex; flex: 1; min-width: 0; min-height: 0; }
  .evs > .ev:not(.is-on) { display: none; }
  .evs > .ev.is-on { animation: ev-in 280ms var(--ease-out); }
  @keyframes ev-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 16px)); } }
  .ev-nav { position: absolute; left: 50%; top: 100%; margin-top: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 2; }
  .ev-nav__btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--fgc), .16); background: rgba(var(--fgc), .05); color: var(--accent); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
  .ev-nav__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .ev-nav__btn:active { transform: scale(.94); }
  .ev-nav__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { .ev-nav__btn:hover { background: rgba(var(--acc), .14); border-color: rgba(var(--acc), .5); } }
  .ev-nav__count { min-width: 44px; text-align: center; font-size: 12px; letter-spacing: .14em; color: rgba(var(--fgc), .6); font-variant-numeric: tabular-nums; }
  .ev-nav__count b { color: rgb(var(--fgc)); font-weight: 600; }
  @media (min-width: 1100px) and (max-height: 760px) { .ev-nav { margin-top: 6px; } .ev-nav__btn { width: 28px; height: 28px; } }
  @media (prefers-reduced-motion: reduce) { .evs > .ev.is-on { animation: none; } }

  @media (max-width: 1099px), (max-height: 639px) {
    .ev-multi { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ev-multi .evs { display: flex; flex-direction: column; gap: 16px; }
    .ev-multi .evs > .ev { display: flex; position: sticky; transform-origin: 50% 0; animation: none; padding: 14px; border-radius: 24px;
      background: linear-gradient(150deg, rgba(var(--fgc), .08), rgba(var(--fgc), .02)), linear-gradient(rgba(14, 10, 7, .55), rgba(14, 10, 7, .55)), rgb(var(--bgc));
      border: 1px solid rgba(var(--fgc), .12);
      box-shadow: inset 0 1px 0 rgba(var(--fgc), .2), 0 -24px 50px -24px rgba(0, 0, 0, .55), inset 0 0 0 999px rgba(0, 0, 0, calc(var(--dim, 0) * .35)); }
    .ev-multi .ev-nav { display: none; }
  }