/* =====================================================================
   Events-Seite – Layout analog zu anleitung.css, plus Helfer-Popup
   ===================================================================== */
html{ scroll-padding-top:120px; background:#F4F4F6; }
body{ color:#B6B6BB; line-height:1.7; overflow-x:clip; }
a{ color:#E06A6E; text-decoration:none; }
a:hover{ color:#fff; }

.bgshard{ position:fixed; z-index:0; pointer-events:none; opacity:.14; }
.bgshard.s1{ left:-22%; bottom:-10%; width:min(70vw,760px); aspect-ratio:4800/3330; background:url('/assets/brand/pattern-dark.svg') center/contain no-repeat; }

.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.22em; color:#E06A6E; text-transform:uppercase; margin-bottom:20px; }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:150px clamp(20px,5vw,64px) 64px; border-bottom:1px solid rgba(255,255,255,.08); background:#0B0B0D; }
.hero .shard{ position:absolute; top:-22%; right:-7%; width:min(82vw,900px); aspect-ratio:4800/3330; opacity:.52; z-index:1; pointer-events:none; -webkit-mask-image:radial-gradient(120% 130% at 84% 26%, #000 32%, rgba(0,0,0,0) 72%); mask-image:radial-gradient(120% 130% at 84% 26%, #000 32%, rgba(0,0,0,0) 72%); }
.hero .shard img{ width:100%; height:100%; object-fit:contain; object-position:top right; }
.hero-wash{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(202,43,47,.10) 0%, rgba(110,39,51,.22) 52%, rgba(11,11,13,0) 100%); pointer-events:none; }
.hero-glow{ position:absolute; inset:0; background:radial-gradient(120% 105% at 82% 20%, rgba(202,43,47,.20), rgba(11,11,13,0) 58%); pointer-events:none; }
.hero-fade{ position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.58) 40%, rgba(11,11,13,.08) 100%); pointer-events:none; }
.hero-inner{ position:relative; z-index:3; max-width:1180px; margin:0 auto; }
.hero h1{ font-family:'Ethnocentric','Archivo',sans-serif; font-weight:400; font-size:clamp(40px,8vw,88px); line-height:1.05; color:#fff; text-transform:uppercase; }
.hero .lead{ max-width:600px; margin-top:22px; font-size:clamp(15px,1.5vw,17.5px); line-height:1.65; color:#B6B6BB; }

/* Sections */
.events-main{ position:relative; z-index:1; }
/* 1180px Inhalt + seitliches Padding, damit die Sektionen bündig mit dem Hero stehen (wie anleitung.css) */
.section{ max-width:calc(1180px + 2 * clamp(20px,5vw,64px)); margin:0 auto; padding:clamp(56px,7vw,88px) clamp(20px,5vw,64px); }
.section + .section{ border-top:1px solid rgba(255,255,255,.07); }
.section-head h2{ font-size:clamp(26px,3.6vw,40px); font-weight:800; letter-spacing:-0.02em; color:#fff; line-height:1.1; }
.section-lead{ max-width:620px; margin-top:14px; font-size:15.5px; line-height:1.65; color:#A8A8AC; }

.flash-wrap{ max-width:calc(1180px + 2 * clamp(20px,5vw,64px)); margin:0 auto; padding:24px clamp(20px,5vw,64px) 0; }
.flash{ border-radius:12px; padding:14px 18px; font-size:14.5px; border:1px solid rgba(255,255,255,.1); background:#101013; color:#fff; }
.flash.success{ border-color:rgba(76,175,80,.45); }
.flash.error{ border-color:rgba(202,43,47,.55); }

/* Event-Karte: Datum links wie ein Ticket-Abriss, Inhalt mittig, Aktion rechts */
.event-list{ display:flex; flex-direction:column; gap:14px; margin-top:clamp(28px,3vw,40px); }
.event{
  position:relative;
  display:grid; grid-template-columns:150px 1fr; gap:0 28px; align-items:start;
  background:#101013; border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:26px 26px 26px 0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), border-color .3s ease;
}
/* Status-Label oben rechts auf der Karte */
.card-badge{ position:absolute; top:16px; right:16px; z-index:2; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:7px 12px; border-radius:100px; border:1px solid; background:rgba(16,16,19,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.35); white-space:nowrap; }
.card-badge.draft{ color:#F0C36B; border-color:rgba(240,195,107,.6); }
.card-badge.cancelled{ color:#9A9A9E; border-color:rgba(255,255,255,.2); }
.event:hover{ border-color:rgba(202,43,47,.4); transform:translateY(-3px); }
.event.is-cancelled{ opacity:.55; }
.event.is-cancelled h3{ text-decoration:line-through; }

.event-date{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
  padding:10px 16px; border-right:1px dashed rgba(255,255,255,.14); align-self:stretch; justify-content:center;
}
.event-date .wd{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; color:#7A7A7E; text-transform:uppercase; margin-bottom:6px; }
.event-date .d{ font-family:'Ethnocentric','Archivo',sans-serif; font-size:46px; line-height:1; color:#fff; }
.event-date .m{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em; color:#CA2B2F; text-transform:uppercase; margin-top:8px; }
.event-date .w{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; color:#B6B6BB; margin-top:10px; white-space:nowrap; }
.event-date .w small{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#7A7A7E; margin-top:3px; }
/* Ticket-Kerben oben/unten an der Abrisskante */
.event-date::before, .event-date::after{ content:""; position:absolute; right:-7px; width:13px; height:13px; border-radius:50%; background:#0B0B0D; border:1px solid rgba(255,255,255,.07); }
.event-date::before{ top:-33px; } .event-date::after{ bottom:-33px; }

.event-body{ min-width:0; position:relative; }
/* "Helfer gesucht" als Aufkleber auf dem Bild (oben rechts); ohne Bild steht die Pill über dem Titel */
.pill-float{ position:absolute; top:12px; right:12px; z-index:2; background:rgba(16,16,19,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.card-badge ~ .event-body .pill-float{ top:52px; }
.event-body > .pill:not(.pill-float){ margin-bottom:12px; }
.event-cal .btn-help{ padding:11px 20px; font-size:13.5px; }
.event-img{ width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:12px; margin-bottom:16px; display:block; }
.event-body h3{ font-size:clamp(19px,2vw,24px); font-weight:800; color:#fff; letter-spacing:-0.01em; line-height:1.2; }
.event-meta{ margin-top:8px; font-size:14px; color:#9F9FA4; }
.event-meta .loc{ display:inline-flex; align-items:center; gap:7px; color:inherit; }
.event-meta .loc:hover{ color:#E06A6E; text-decoration:underline; text-underline-offset:3px; }
.event-meta .loc .ext{ font-size:11px; opacity:.6; margin-left:2px; }
.event-cal{ display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.btn-cal{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:100px; padding:9px 16px; transition:border-color .2s, background .2s; }
.btn-cal svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-cal:hover{ border-color:#CA2B2F; background:rgba(202,43,47,.1); color:#fff; }
.cal-alt{ font-size:12.5px; color:#8A8A8E; } .cal-alt:hover{ color:#fff; }
.event-meta svg{ color:#CA2B2F; flex:none; }
.teaser{ margin-top:12px; font-size:15px; line-height:1.6; color:#B6B6BB; max-width:62ch; }
.event-more{ margin-top:12px; }
.event-more summary{ cursor:pointer; font-size:13.5px; font-weight:600; color:#E06A6E; list-style:none; display:inline-flex; align-items:center; gap:6px; }
.event-more summary::-webkit-details-marker{ display:none; }
.event-more summary::after{ content:"+"; font-family:'JetBrains Mono',monospace; }
.event-more[open] summary::after{ content:"–"; }
.event-desc{ margin-top:10px; font-size:14.5px; color:#A8A8AC; max-width:62ch; }
.event-desc p + p{ margin-top:10px; }

.pill{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#E06A6E; border:1px solid rgba(202,43,47,.4); border-radius:100px; padding:6px 12px; white-space:nowrap; }
.pill i{ width:7px; height:7px; border-radius:50%; background:#CA2B2F; animation:ecgblip 1.6s ease-in-out infinite; }
.pill.muted{ color:#7A7A7E; border-color:rgba(255,255,255,.14); }
.btn-help{
  display:inline-flex; align-items:center; gap:8px; background:#CA2B2F; color:#fff; border:0; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; padding:12px 20px; border-radius:100px; white-space:nowrap;
  transition:background .25s, transform .25s;
}
.btn-help:hover{ background:#E03A3E; transform:translateY(-1px); }

.empty{ margin-top:28px; background:#101013; border:1px dashed rgba(255,255,255,.14); border-radius:18px; padding:36px 28px; }
.empty .k{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; color:#7A7A7E; text-transform:uppercase; margin-bottom:10px; }
.empty p{ color:#B6B6BB; font-size:15px; }

.event.is-draft{ border-style:dashed; }

/* Rückblick */
.past-list{ list-style:none; margin-top:24px; }
.past-list li{ display:grid; grid-template-columns:110px 1fr auto; gap:18px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14.5px; }
.past-list .pd{ font-family:'JetBrains Mono',monospace; font-size:12px; color:#7A7A7E; letter-spacing:.06em; }
.past-list .pt{ color:#D8D8DC; font-weight:600; }
.past-list .pl{ color:#7A7A7E; }

/* So läuft das */
.how{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(12px,1.6vw,18px); margin-top:clamp(28px,3vw,40px); }
.how-step{ background:#101013; border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:24px 22px; }
.how-step .n{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:#CA2B2F; }
.how-step h3{ font-size:19px; font-weight:800; color:#fff; margin:14px 0 8px; }
.how-step p{ font-size:14.5px; color:#9F9FA4; line-height:1.6; }


/* ---------------------------------------------------------------------
   Popup (native <dialog>)
   --------------------------------------------------------------------- */
.help-modal{
  margin:auto; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:0;
  background:#0F0F12; color:#B6B6BB; width:min(720px, calc(100vw - 32px));
  max-height:calc(100vh - 32px); overflow:auto;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.help-modal::backdrop{ background:rgba(6,6,8,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.help-form, .help-success{ padding:clamp(22px,4vw,36px); position:relative; }
.help-close{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.help-close:hover{ background:rgba(255,255,255,.12); }
.help-head h2{ font-size:clamp(22px,3vw,30px); font-weight:800; color:#fff; letter-spacing:-0.02em; line-height:1.15; padding-right:44px; }
.help-head h2 span{ color:#E06A6E; }
.help-sub{ margin-top:8px; font-size:13.5px; color:#8A8A8E; }
.help-error{ margin-top:18px; border:1px solid rgba(202,43,47,.55); background:rgba(202,43,47,.1); color:#fff; border-radius:12px; padding:12px 16px; font-size:14px; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-top:24px; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.span2{ grid-column:1 / -1; }
.field label{ font-size:12.5px; font-weight:600; color:#D8D8DC; letter-spacing:.01em; }
.field label small{ color:#7A7A7E; font-weight:500; }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:15px; color:#fff; background:#16161A;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:11px 13px;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:80px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:#CA2B2F; box-shadow:0 0 0 3px rgba(202,43,47,.22); }
.field input[type="date"]{ color-scheme:dark; }
body{ --dp-bg:#16161A; --dp-text:#fff; --dp-muted:#8A8A8E; --dp-border:rgba(255,255,255,.14); --dp-field:rgba(255,255,255,.06); --dp-hover:rgba(255,255,255,.08); --dp-accent:#CA2B2F; --dp-we:#F0989B; }
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, #9A9A9E 50%), linear-gradient(135deg, #9A9A9E 50%, transparent 50%); background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#CA2B2F; }
.err{ font-size:12.5px; color:#F0989B; min-height:0; }
.err:empty{ display:none; }

.hp{ position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }

.consent{ display:flex; gap:12px; align-items:flex-start; margin-top:22px; font-size:13.5px; line-height:1.55; color:#A8A8AC; cursor:pointer; }
.consent input{ flex:none; width:18px; height:18px; margin-top:3px; accent-color:#CA2B2F; }

.help-actions{ display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; }
.btn-submit{
  display:inline-flex; align-items:center; gap:10px; background:#CA2B2F; color:#fff; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; padding:14px 26px; border-radius:100px;
  transition:background .25s, transform .25s, opacity .2s;
}
.btn-submit:hover{ background:#E03A3E; transform:translateY(-1px); }
.btn-submit[disabled]{ opacity:.6; cursor:wait; transform:none; }
.btn-cancel{ background:none; border:0; color:#9A9A9E; font:inherit; font-size:14px; cursor:pointer; padding:10px 6px; }
.btn-cancel:hover{ color:#fff; }

.help-success h2{ font-size:clamp(24px,3vw,32px); font-weight:800; color:#fff; letter-spacing:-0.02em; }
.help-success p{ margin:14px 0 26px; font-size:15.5px; color:#B6B6BB; max-width:46ch; }

/* ---------------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------------- */
@media (max-width:820px){
  .hero{ padding:120px 20px 48px; }
  .eyebrow{ font-size:11px; letter-spacing:.12em; }
  .event{ grid-template-columns:1fr; gap:18px; padding:22px 20px; }
  .event-date{ flex-direction:row; align-items:center; gap:12px; justify-content:flex-start; border-right:0; border-bottom:1px dashed rgba(255,255,255,.14); padding:0 0 14px; }
  .event-date .wd{ margin:0; }
  .event-date .w small{ display:inline; margin-left:4px; }
  .card-badge{ top:12px; right:12px; }
  .event-date::before, .event-date::after{ display:none; }
  .event-date .d{ font-size:32px; }
  .event-date .m, .event-date .w{ margin-top:0; }
  .event-cal .btn-help{ width:100%; justify-content:center; }
  .past-list li{ grid-template-columns:1fr; gap:2px; }
  .grid2{ grid-template-columns:1fr; }
  .help-modal{ width:calc(100vw - 20px); max-height:calc(100vh - 20px); border-radius:16px; }
}
@media (prefers-reduced-motion: reduce){
  .event, .btn-help, .btn-submit{ transition:none; }
  .pill i{ animation:none; }
}
.section-partner .partner-grid{ margin-top:28px; }