/* ==============================
   Veranstaltungen – Public Styles (modern)
   Pfad: pages/veranstaltungen/veranstaltungen.css
   Hinweis: Vollständige Datei
   ============================== */

:root{
  /* Accent system: blue as primary, but with more color depth */
  --v-accent: var(--color-accent, #008cff);
  --v-accent-2: rgba(170, 80, 255, .85);   /* violet */
  --v-accent-3: rgba(0, 220, 190, .85);    /* teal */
  --v-warm: rgba(255, 170, 0, .85);        /* amber */
  --v-danger: rgba(255, 70, 70, .85);
}

/* Layout */
.v-page{width:100%}
.v-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.25rem;margin:0 0 1.25rem
}
.v-head h1{font-size:1.65rem;margin:0 0 .35rem;letter-spacing:.2px}
.muted{color:var(--text-muted, rgba(255,255,255,.72))}
.v-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}

/* Cards */
.card{
  border-radius:18px;
  border:1px solid var(--border, rgba(255,255,255,.10));
  box-shadow:var(--shadow-soft, 0 10px 30px rgba(0,0,0,.28));
  overflow:hidden;
  background:rgba(255,255,255,.05);
  backdrop-filter:saturate(120%) blur(8px);
}
.card-grad{
  background:
    radial-gradient(800px 500px at 15% 15%, rgba(0,140,255,.18), transparent 55%),
    radial-gradient(700px 450px at 85% 10%, rgba(170,80,255,.14), transparent 55%),
    radial-gradient(700px 450px at 75% 85%, rgba(0,220,190,.12), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
}

.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.10)
}
.card-head h2{font-size:1.08rem;margin:0;letter-spacing:.15px}

.pill{
  font-size:.85rem;padding:.28rem .6rem;border-radius:999px;
  background:linear-gradient(135deg, rgba(0,140,255,.18), rgba(170,80,255,.12));
  border:1px solid rgba(0,140,255,.20);
  color:var(--text,#fff);
}

.cal-card{margin-bottom:1.25rem}

/* Calendar */
.cal-wrap{
  padding:1rem 1.1rem 1.1rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}
.cal-month{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.10);
}
.cal-month-head{
  padding:.75rem .9rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  border-bottom:1px solid rgba(255,255,255,.10)
}
.cal-month-title{margin:0;font-size:1rem}

.cal-weekdays,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-weekdays span{
  font-size:.78rem;padding:.48rem .35rem;text-align:center;
  color:var(--text-muted, rgba(255,255,255,.7));
  border-bottom:1px solid rgba(255,255,255,.06)
}

.cal-day{
  position:relative;
  padding:.48rem .35rem;
  min-height:46px;
  border-bottom:1px solid rgba(255,255,255,.06);
  border-right:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.08);
  cursor:default;
  user-select:none;
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.cal-day:nth-child(7n){border-right:none}
.cal-day.empty{background:transparent}
.cal-day .n{font-size:.9rem;opacity:.95}

.cal-day.has-event{
  cursor:pointer;
  background:
    radial-gradient(closest-side, rgba(0,140,255,.18), rgba(0,0,0,.08));
}
.cal-day.has-event:hover{
  transform:translateY(-1px);
  background:
    radial-gradient(closest-side, rgba(0,140,255,.26), rgba(0,0,0,.10));
}
.cal-day.has-event::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:7px;
  width:9px;height:9px;
  border-radius:999px;
  transform:translateX(-50%);
  background:rgba(0,140,255,.90);
  box-shadow:0 0 0 3px rgba(0,140,255,.16);
}
.cal-day.has-event.has-extern::after{
  background:rgba(255,170,0,.95);
  box-shadow:0 0 0 3px rgba(255,170,0,.18);
}
.cal-day.has-event.has-intern::after{
  background:rgba(0,220,190,.95);
  box-shadow:0 0 0 3px rgba(0,220,190,.16);
}
.cal-day.is-selected{outline:2px solid rgba(0,140,255,.65);outline-offset:-2px}

.cal-hint{padding:0 1.1rem 1rem;font-size:.92rem}

/* Bottom layout */
.v-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  align-items:start
}

/* Details */
.details-body{padding:1rem 1.1rem 1.15rem}
.details-title{font-size:1.15rem;margin:0 0 .35rem}
.details-meta{display:flex;flex-wrap:wrap;gap:.45rem .7rem;margin:0 0 .75rem}

.badge{
  font-size:.82rem;padding:.24rem .55rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06)
}
.badge-intern{
  border-color:rgba(0,220,190,.30);
  background:rgba(0,220,190,.12)
}
.badge-extern{
  border-color:rgba(255,170,0,.30);
  background:rgba(255,170,0,.12)
}
.badge-date{
  border-color:rgba(0,140,255,.26);
  background:rgba(0,140,255,.10)
}

.details-desc{margin:.65rem 0 1rem;line-height:1.55}
.details-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.details-sep{border:0;border-top:1px solid rgba(255,255,255,.10);margin:1rem 0}

/* List */
.list-body{
  padding:1rem 1.1rem 1.1rem;
  max-height:560px;
  overflow:auto
}
.month-block+.month-block{margin-top:1.1rem}
.month-title{
  font-size:1.05rem;margin:0 0 .6rem;
  color:var(--v-accent);
  letter-spacing:.15px
}

.month-items{display:grid;grid-template-columns:1fr;gap:.75rem}
.list-item{
  width:100%;
  text-align:left;
  border-radius:14px;
  padding:.9rem .95rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.list-item:hover{
  transform:translateY(-1px);
  border-color:rgba(0,140,255,.28);
  background:
    linear-gradient(135deg, rgba(0,140,255,.10), rgba(170,80,255,.06), rgba(0,220,190,.06));
}
.li-title{font-size:1rem;margin-bottom:.15rem; color:#ffffff;}
.li-sub{font-size:.9rem;line-height:1.35}
.li-side{display:flex;align-items:center;gap:.5rem}
.chev{font-size:1.3rem;opacity:.65}

/* Tiny link inside details/list */
.ics-link{
  display:inline-flex;align-items:center;gap:.45rem;
  text-decoration:none;
}

/* Responsive */
@media (max-width:980px){
  .cal-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-bottom{grid-template-columns:1fr}
  .list-body{max-height:none}
}
@media (max-width:680px){
  .v-head{flex-direction:column;align-items:stretch}
  .v-actions{justify-content:flex-start}
  .cal-wrap{grid-template-columns:1fr}
  .cal-day{min-height:42px}
}