/* CLEANED afg-events.css – 2026-01-30 | Keep design, remove duplicates & unsafe overflow */
/* =========================================================
   AFG – EVENTS (Glass Panels + Rivets)
   Depends on tokens in afg-global.css
========================================================= */

/* Page wrapper helper */
.afg-wrap{ width:min(1100px, calc(100% - 4rem)); margin-inline:auto; }

/* --- Panels (re-usable) --- */
.afg-panel{
  position: relative;
  border-radius: 28px;
  padding: clamp(2rem, 3vw, 3.2rem);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  overflow: hidden;
}
.afg-panel--dark{
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(10,12,20,.86), rgba(10,12,20,.74));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.afg-panel--soft{
  color: var(--text, #1c1c1c);
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.72), rgba(255,255,255,.08) 60%),
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.28));
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- Rivets (4 corners) --- */
.afg-rivets::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18px 18px, rgba(245,213,71,.95) 0 5px, rgba(245,213,71,.28) 6px 9px, transparent 10px),
    radial-gradient(circle at calc(100% - 18px) 18px, rgba(245,213,71,.95) 0 5px, rgba(245,213,71,.28) 6px 9px, transparent 10px),
    radial-gradient(circle at 18px calc(100% - 18px), rgba(245,213,71,.95) 0 5px, rgba(245,213,71,.28) 6px 9px, transparent 10px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(245,213,71,.95) 0 5px, rgba(245,213,71,.28) 6px 9px, transparent 10px);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.30));
  opacity: .92;
}

/* --- Events Hero --- */
.afg-events-hero{ padding: clamp(4.4rem, 6vw, 7.2rem) 0; }
.afg-events-kicker .afg-kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.25rem;
  color: rgba(245,213,71,.9);
}
.afg-events-title{ margin-top: .8rem; }
.afg-events-lead{ max-width: 62ch; }

.afg-btnrow{ display:flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.8rem; }

.afg-events-hero__panel{ margin-top: 2.4rem; max-width: 72ch; }

/* --- Section titles --- */
.afg-section-title{ margin: 0 0 1rem; }
.afg-section-lead{ margin: 0 0 2.2rem; max-width: 70ch; }

/* --- Cards grid --- */
.afg-cardgrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}
.afg-card{ min-height: 170px; }
.afg-card-title{ margin-bottom: .4rem; }

@media (max-width: 900px){
  .afg-cardgrid{ grid-template-columns: 1fr; }
}

/* --- Steps --- */
.afg-steps{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.6rem; }
.afg-step__n{
  width: 42px; height: 42px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(245,213,71,.14);
  border: 1px solid rgba(245,213,71,.35);
  margin-bottom: 1.2rem;
  font-weight: 800;
}
.afg-step__n span{ color: rgba(245,213,71,.92); }
@media (max-width: 900px){ .afg-steps{ grid-template-columns: 1fr; } }

/* --- FAQ --- */
.afg-faq{ display:grid; grid-template-columns: 1fr; gap: 1rem; }
.afg-faq__q{ margin: 0 0 .35rem; }
.afg-faq__a p{ margin: 0; }

/* --- CTA --- */
.afg-events-cta{ padding: clamp(4rem, 6vw, 6.6rem) 0; }
.afg-cta{ display:grid; gap: 1.2rem; }
.afg-cta .btn-primary{ margin-top: .8rem; width: fit-content; }

/* =========================================================
   FIXES (2026-01-25)
   - Alias for afg-panel--glass-dark (Bricks template uses it)
   - Tighter, consistent section spacing on Events page
========================================================= */

/* Alias: treat glass-dark like dark */
.afg-panel--glass-dark{
  background: linear-gradient(180deg, rgba(10,12,16,.78), rgba(10,12,16,.58));
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(245,213,71,.22);
  box-shadow: 0 18px 46px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.afg-panel--glass-dark h1,
.afg-panel--glass-dark h2,
.afg-panel--glass-dark h3,
.afg-panel--glass-dark h4,
.afg-panel--glass-dark h5,
.afg-panel--glass-dark h6{
  color: #fff;
}

/* Hero: bring panel closer to buttons */
.afg-events-hero .afg-panel,
.afg-events-hero .afg-panel--glass-dark,
.afg-events-hero .afg-panel--dark{
  margin-top: clamp(1.8rem, 2.6vw, 2.8rem);
}

/* Consistent vertical rhythm for Events sections */
.afg-events-formate,
.afg-events-ablauf,
.afg-events-faq{
  padding: clamp(4rem, 6vw, 6.6rem) 0;
}

/* Reduce stacked margins inside sections */
.afg-events-formate h2,
.afg-events-ablauf h2,
.afg-events-faq h2{
  margin-bottom: .35em;
}

/* =========================================================
   EVENTS – DARK GLASS PANELS (Override)
   Voraussetzung: Panel hat Klassen:
   afg-panel afg-panel--glass-dark
========================================================= */

.afg-panel.afg-panel--glass-dark{
  /* richtig dunkel */
  background: linear-gradient(180deg,
    rgba(10,12,18,.78),
    rgba(10,12,18,.62)
  );
  color: rgba(255,255,255,.88);

  border: 1px solid rgba(245,213,71,.20);        /* Messing */
  box-shadow:
    0 26px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 22px;
}

/* Headings & Text im Panel */
.afg-panel.afg-panel--glass-dark h1,
.afg-panel.afg-panel--glass-dark h2,
.afg-panel.afg-panel--glass-dark h3{
  color: rgba(255,255,255,.94);
}

.afg-panel.afg-panel--glass-dark p,
.afg-panel.afg-panel--glass-dark li{
  color: rgba(255,255,255,.80);
}

/* Links im Panel */
.afg-panel.afg-panel--glass-dark a{
  color: rgba(245,213,71,.95);
}
.afg-panel.afg-panel--glass-dark a:hover{
  color: rgba(245,213,71,1);
}

/* Nieten (falls du sie als Pseudo-Elemente machst) */
.afg-panel.afg-panel--glass-dark{
  position: relative;
}
.afg-panel.afg-panel--glass-dark::before{
  content:"";
  position:absolute;
  inset: 14px;
  pointer-events:none;
  background:
    radial-gradient(circle at 0% 0%, rgba(245,213,71,.95) 0 5px, rgba(0,0,0,0) 6px),
    radial-gradient(circle at 100% 0%, rgba(245,213,71,.95) 0 5px, rgba(0,0,0,0) 6px),
    radial-gradient(circle at 0% 100%, rgba(245,213,71,.95) 0 5px, rgba(0,0,0,0) 6px),
    radial-gradient(circle at 100% 100%, rgba(245,213,71,.95) 0 5px, rgba(0,0,0,0) 6px);
  opacity: .85;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

/* =========================================
   EVENTS – DARK GLASS PANEL (FINAL)
========================================= */

.afg-panel.afg-panel--dark{
  background: linear-gradient(
    180deg,
    rgba(10,12,18,.82),
    rgba(10,12,18,.68)
  ) !important;

  color: rgba(255,255,255,.9);

  border: 1px solid rgba(245,213,71,.25);
  border-radius: 22px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);

  position: relative;
}

/* Text */
.afg-panel--dark h1,
.afg-panel--dark h2,
.afg-panel--dark h3{
  color: rgba(255,255,255,.95);
}

.afg-panel--dark p,
.afg-panel--dark li{
  color: rgba(255,255,255,.8);
}