/* ==============================
   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);
  position:relative;
}
/* Bunte Kalender-Monate (4er-Rotation) */
.cal-month:nth-child(4n+1) { border-color:rgba(0,140,255,.14); background:linear-gradient(180deg, rgba(0,140,255,.06), rgba(0,0,0,.10)); }
.cal-month:nth-child(4n+2) { border-color:rgba(0,220,190,.14); background:linear-gradient(180deg, rgba(0,220,190,.06), rgba(0,0,0,.10)); }
.cal-month:nth-child(4n+3) { border-color:rgba(170,80,255,.14); background:linear-gradient(180deg, rgba(170,80,255,.06), rgba(0,0,0,.10)); }
.cal-month:nth-child(4n+4) { border-color:rgba(255,170,0,.14); background:linear-gradient(180deg, rgba(255,170,0,.06), 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:.75rem .9rem .9rem;
  max-height:600px;
  overflow:auto
}
.month-block+.month-block{margin-top:.75rem}
.month-title{
  font-size:.92rem;margin:0 0 .4rem;
  color:var(--v-accent);
  letter-spacing:.15px
}

.month-items{display:grid;grid-template-columns:1fr;gap:.35rem}
.list-item{
  width:100%;
  text-align:left;
  border-radius:10px;
  padding:.5rem .75rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  display:flex;flex-direction:column;gap:.15rem;
  position:relative;
  overflow:hidden;
  transition:background .18s ease, border-color .18s ease;
}
/* Abwechselnde bunte Hintergründe */
.list-item:nth-child(4n+1) { background:linear-gradient(135deg, rgba(0,140,255,.06), rgba(0,0,0,.10)); border-color:rgba(0,140,255,.10); }
.list-item:nth-child(4n+2) { background:linear-gradient(135deg, rgba(0,220,190,.06), rgba(0,0,0,.10)); border-color:rgba(0,220,190,.10); }
.list-item:nth-child(4n+3) { background:linear-gradient(135deg, rgba(170,80,255,.06), rgba(0,0,0,.10)); border-color:rgba(170,80,255,.10); }
.list-item:nth-child(4n+4) { background:linear-gradient(135deg, rgba(255,170,0,.06), rgba(0,0,0,.10)); border-color:rgba(255,170,0,.10); }

.list-item:hover{
  background:
    linear-gradient(135deg, rgba(0,140,255,.10), rgba(170,80,255,.06), rgba(0,220,190,.06));
}
.list-item:nth-child(4n+1):hover { border-color:rgba(0,140,255,.28); }
.list-item:nth-child(4n+2):hover { border-color:rgba(0,220,190,.28); }
.list-item:nth-child(4n+3):hover { border-color:rgba(170,80,255,.28); }
.list-item:nth-child(4n+4):hover { border-color:rgba(255,170,0,.28); }
/* Zeile 1: Titel + Badge */
.li-row1{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.li-title{font-size:.92rem;font-weight:600;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-row1 .badge{font-size:.7rem;padding:.12rem .4rem;flex-shrink:0}

/* Zeile 2: Meta + Links */
.li-row2{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.li-meta{font-size:.78rem;line-height:1.3;flex:1;min-width:0}
.li-meta a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
.li-meta a:hover{text-decoration-color:rgba(255,255,255,.6)}
.li-links{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.li-link{
  display:inline-flex;align-items:center;gap:.2rem;
  font-size:.72rem;color:rgba(255,255,255,.45);
  text-decoration:none;padding:.12rem .3rem;border-radius:5px;
  transition:color .15s,background .15s;white-space:nowrap;
}
.li-link:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.08)}
.li-link i{font-size:.78rem}

/* Beschreibung (optional) */
.li-desc{font-size:.75rem;line-height:1.3;color:rgba(255,255,255,.45);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.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}
}