/* Sylter Eventkalender — Frontend
   Alle Farben und der Akzent stecken in Custom Properties: im Theme
   überschreibbar, ohne diese Datei anzufassen. */

.syltek{
  --sk-accent:#D8232A;          /* Sylt1-Rot — hier anpassen */
  --sk-accent-ink:#FFFFFF;
  --sk-ink:#12171A;
  --sk-ink-2:#4A565C;
  --sk-muted:#7B878D;
  --sk-line:#E2E6E6;
  --sk-line-strong:#C9D0D0;
  --sk-surface:#FFFFFF;
  --sk-surface-2:#F4F6F6;
  --sk-sea:#1F5F57;
  --sk-sea-soft:#E2EFEB;
  --sk-radius:10px;

  color:var(--sk-ink);
  font-size:15px;
  line-height:1.5;
  container-type:inline-size;
}
@media (prefers-color-scheme: dark){
  .syltek{
    --sk-ink:#EDF1F1; --sk-ink-2:#B3BEC1; --sk-muted:#8A9699;
    --sk-line:#28312F; --sk-line-strong:#3B4744;
    --sk-surface:#161B1D; --sk-surface-2:#1D2426;
    --sk-accent:#F0554F; --sk-accent-ink:#12171A;
    --sk-sea:#6BB9A8; --sk-sea-soft:#172926;
  }
}
.syltek *{box-sizing:border-box}
/* Nicht auf jedes Theme verlassen — Labels für Screenreader sicher ausblenden. */
.syltek .screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- Filterleiste oben ---------- */

.syltek-bar{
  display:flex; flex-direction:column; gap:14px;
  padding:0 0 18px; border-bottom:2px solid var(--sk-ink);
}
.syltek-barrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.syltek-search{position:relative; flex:1 1 240px; min-width:0}
.syltek-search input{
  width:100%; font:inherit; font-size:15px; color:var(--sk-ink);
  background:var(--sk-surface); border:1px solid var(--sk-line-strong);
  border-radius:var(--sk-radius); padding:11px 14px;
}
.syltek-search input::placeholder{color:var(--sk-muted)}
.syltek-search input:focus-visible{outline:2px solid var(--sk-accent); outline-offset:1px; border-color:transparent}

.syltek select{
  font:inherit; font-size:14px; color:var(--sk-ink); cursor:pointer;
  background:var(--sk-surface); border:1px solid var(--sk-line-strong);
  border-radius:var(--sk-radius); padding:10px 12px; max-width:100%;
}
.syltek select:focus-visible{outline:2px solid var(--sk-accent); outline-offset:1px}

.syltek-chips{display:flex; gap:7px; flex-wrap:wrap}
.syltek-chip{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  background:var(--sk-surface-2); color:var(--sk-ink-2);
  border:1px solid transparent; border-radius:100px; padding:6px 13px;
  transition:background .12s, color .12s;
}
.syltek-chip:hover{background:var(--sk-surface); border-color:var(--sk-line-strong); color:var(--sk-ink)}
.syltek-chip[aria-pressed="true"]{background:var(--sk-accent); color:var(--sk-accent-ink); border-color:var(--sk-accent)}
.syltek-chip .n{opacity:.6; font-weight:500; margin-left:5px; font-variant-numeric:tabular-nums}
.syltek-chip:focus-visible{outline:2px solid var(--sk-ink); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .syltek-chip{transition:none} }

.syltek-reset{
  font:inherit; font-size:13px; font-weight:600; color:var(--sk-accent);
  background:none; border:0; padding:6px 4px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

.syltek-count{
  margin:0; font-size:14px; color:var(--sk-muted); font-weight:500;
}
.syltek-count b{color:var(--sk-ink); font-variant-numeric:tabular-nums}

/* ---------- Karten-Raster ---------- */

.syltek-list{
  display:grid; gap:20px 18px; padding-top:4px;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
@container (max-width: 540px){
  .syltek-list{grid-template-columns:1fr}
}

.syltek-dayhead{
  grid-column:1 / -1;
  display:flex; align-items:baseline; gap:10px;
  margin:14px 0 -4px; padding-bottom:8px;
  border-bottom:1px solid var(--sk-line);
}
.syltek-list > .syltek-dayhead:first-child{margin-top:0}
.syltek-dayhead .dwd{
  font-size:13px; font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; color:var(--sk-accent);
}
.syltek-dayhead .ddate{font-size:14px; font-weight:600; color:var(--sk-ink)}
.syltek-dayhead .drel{margin-left:auto; font-size:12px; color:var(--sk-muted)}

.syltek-card{
  display:flex; background:var(--sk-surface); border-radius:var(--sk-radius);
  overflow:hidden; border:1px solid var(--sk-line);
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
.syltek-card:hover{
  border-color:var(--sk-line-strong); transform:translateY(-2px);
  box-shadow:0 8px 24px -14px rgba(0,0,0,.35);
}
.syltek-card:has(.syltek-open:focus-visible){outline:2px solid var(--sk-accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .syltek-card{transition:none} .syltek-card:hover{transform:none} }

/* Die ganze Karte ist der Klickbereich — als echter Link. */
.syltek-open{
  display:flex; flex-direction:column; width:100%; text-align:left;
  font:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; text-decoration:none;
}
.syltek-open:hover, .syltek-open:visited{color:inherit; text-decoration:none}
.syltek-open:focus{outline:none}
.syltek-open:focus-visible{outline:2px solid var(--sk-accent); outline-offset:2px}

/* Als <span> im Markup, damit die Karte ein einziger Button sein kann —
   deshalb display hier explizit setzen. */
.syltek-thumb{
  display:block; position:relative; aspect-ratio:16/10;
  background:var(--sk-surface-2); max-width:100%; overflow:hidden;
}
.syltek-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .25s ease;
}
.syltek-thumb.is-loaded img{opacity:1}
@media (prefers-reduced-motion: reduce){
  .syltek-thumb img{transition:none; opacity:1}
}
/* Kein Bild vorhanden oder Laden fehlgeschlagen: ruhiger Dünen-Verlauf,
   damit die Karte trotzdem eine Fläche hat. */
.syltek-thumb.is-empty{
  background:
    linear-gradient(160deg, var(--sk-surface-2) 0%, var(--sk-sea-soft) 100%);
}
.syltek-thumb.is-empty::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 120%, rgba(0,0,0,.06), transparent 60%);
}
/* Datum als Reiter oben links — der wichtigste Wert auf der Karte. */
.syltek-date{
  position:absolute; left:10px; top:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:46px; padding:5px 0 6px; border-radius:7px;
  background:var(--sk-surface); color:var(--sk-ink);
  box-shadow:0 2px 8px -3px rgba(0,0,0,.45); line-height:1;
}
.syltek-date b{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums}
.syltek-date i{
  font-style:normal; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--sk-accent); margin-top:2px;
}
.syltek-time{
  position:absolute; left:10px; bottom:10px;
  background:var(--sk-ink); color:var(--sk-surface);
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:5px 9px; border-radius:6px; letter-spacing:.01em;
}
.syltek-time small{font-weight:500; opacity:.75; margin-left:5px; font-size:11px}
.syltek-book{
  position:absolute; right:10px; top:10px;
  background:var(--sk-accent); color:var(--sk-accent-ink);
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:4px 8px; border-radius:5px;
}

.syltek-body{display:flex; flex-direction:column; gap:6px; padding:13px 14px 15px; flex:1}
.syltek-h3{
  font-size:17px; font-weight:700; line-height:1.25;
  letter-spacing:-.01em; text-wrap:pretty; color:var(--sk-ink);
}
.syltek-teaser{
  margin-top:2px; font-size:13.5px; line-height:1.45; color:var(--sk-ink-2);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.syltek-cat{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sk-sea);
}
.syltek-place{font-size:12.5px; color:var(--sk-muted)}
.syltek-rep{
  margin-top:auto; padding-top:9px; font-size:11.5px; color:var(--sk-muted);
  border-top:1px solid var(--sk-line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.syltek-rep em{
  font-style:normal; font-weight:700; color:var(--sk-accent); white-space:nowrap;
}
.syltek-rep em::after{content:" ›"}

/* ---------- Detailansicht ---------- */

.syltek-dialog{
  position:fixed; inset:0; z-index:99999;
  background:rgba(10,16,18,.68); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
.syltek-dialog[hidden]{display:none !important}
.syltek-dlg-panel{
  position:relative; width:100%; max-width:680px; margin:auto;
  background:var(--sk-surface); color:var(--sk-ink);
  border-radius:calc(var(--sk-radius) + 4px); overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.syltek-dlg-close{
  position:absolute; right:12px; top:12px; z-index:2;
  width:36px; height:36px; border:0; border-radius:50%; cursor:pointer;
  background:var(--sk-surface); color:var(--sk-ink);
  font-size:24px; line-height:1; box-shadow:0 2px 10px -2px rgba(0,0,0,.5);
}
.syltek-dlg-close:hover{background:var(--sk-accent); color:var(--sk-accent-ink)}
.syltek-dlg-close:focus-visible{outline:2px solid var(--sk-accent); outline-offset:2px}

.syltek-dlg-img{position:relative; aspect-ratio:16/9; background:var(--sk-surface-2); max-width:100%}
.syltek-dlg-img img{width:100%; height:100%; object-fit:cover; display:block}
.syltek-credit{
  position:absolute; right:0; bottom:0; font-size:10.5px; color:#fff;
  background:rgba(0,0,0,.55); padding:3px 8px; border-radius:4px 0 0 0;
}
.syltek-dlg-text{padding:20px 22px 26px}
.syltek-dlg-text h2{
  margin:6px 0 16px; font-size:25px; font-weight:800; line-height:1.15;
  letter-spacing:-.015em; text-wrap:balance; color:var(--sk-ink);
}

.syltek-facts{
  display:grid; grid-template-columns:auto 1fr; gap:8px 18px;
  margin:0 0 18px; padding:14px 0; font-size:14px;
  border-top:1px solid var(--sk-line); border-bottom:1px solid var(--sk-line);
}
.syltek-facts dt{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--sk-muted); padding-top:3px;
}
.syltek-facts dd{margin:0; color:var(--sk-ink)}
.syltek-hint{font-size:12.5px; color:var(--sk-muted)}
.syltek-maplink{color:var(--sk-accent); font-size:13px; text-underline-offset:3px}

.syltek-longtext p{margin:0 0 12px; font-size:15px; line-height:1.6; color:var(--sk-ink-2)}
.syltek-longtext p:last-child{margin-bottom:0}

@media(max-width:520px){
  .syltek-dlg-text{padding:16px 16px 22px}
  .syltek-dlg-text h2{font-size:21px}
  .syltek-facts{grid-template-columns:1fr; gap:2px 0}
  .syltek-facts dt{padding-top:10px}
}

/* ---------- Nachladen / Zustände ---------- */

.syltek-more{display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 0 6px}
.syltek-loadmore{
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  background:var(--sk-ink); color:var(--sk-surface);
  border:0; border-radius:100px; padding:12px 26px;
}
.syltek-loadmore:hover{background:var(--sk-accent); color:var(--sk-accent-ink)}
.syltek-loadmore:focus-visible{outline:2px solid var(--sk-accent); outline-offset:2px}
.syltek-status{margin:0; font-size:12.5px; color:var(--sk-muted); min-height:1.2em; text-align:center}

.syltek-skel{
  border-radius:var(--sk-radius); background:var(--sk-surface-2);
  height:280px; position:relative; overflow:hidden;
}
.syltek-skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  animation:syltek-shimmer 1.3s linear infinite;
}
@keyframes syltek-shimmer{from{transform:translateX(-100%)} to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){ .syltek-skel::after{animation:none} }

.syltek-empty{
  grid-column:1 / -1; padding:56px 16px; text-align:center; color:var(--sk-muted);
  background:var(--sk-surface-2); border-radius:var(--sk-radius);
}
.syltek-empty strong{display:block; color:var(--sk-ink); font-size:17px; margin-bottom:6px}
.syltek-error{padding:16px; border:1px solid var(--sk-line-strong); border-radius:var(--sk-radius); color:var(--sk-ink-2)}

/* ---------- Einzelseite je Veranstaltung ---------- */

.syltek-single{max-width:760px; margin:0 auto; padding:28px 18px 56px}
.syltek-single-inner{display:flex; flex-direction:column}
.syltek-crumbs{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--sk-muted); margin-bottom:14px;
}
.syltek-crumbs a{color:var(--sk-accent); text-decoration:none}
.syltek-crumbs a:hover{text-decoration:underline; text-underline-offset:3px}
.syltek-crumbs span{margin:0 4px; opacity:.5}

.syltek-single h1{
  margin:0 0 20px; font-size:clamp(26px,4.5vw,38px); font-weight:800;
  line-height:1.12; letter-spacing:-.02em; text-wrap:balance; color:var(--sk-ink);
}

.syltek-single-img{margin:0 0 22px; position:relative}
.syltek-single-img img{
  width:100%; max-width:100%; height:auto; display:block;
  border-radius:var(--sk-radius); aspect-ratio:16/9; object-fit:cover;
}
.syltek-single-img figcaption{
  margin-top:6px; font-size:11.5px; color:var(--sk-muted); text-align:right;
}

.syltek-single .syltek-facts{margin-bottom:24px}
.syltek-back{margin:28px 0 0; padding-top:18px; border-top:1px solid var(--sk-line)}
.syltek-back a{color:var(--sk-accent); font-weight:600; text-underline-offset:3px}

.syltek-dlg-perma{margin:-8px 0 16px; font-size:13.5px}
.syltek-dlg-perma a{color:var(--sk-accent); text-underline-offset:3px}

/* ---------- „Gleich geht's los“ ---------- */

.syltek-soon{
  position:relative; margin:0 0 22px; padding:16px 44px 16px 18px;
  background:var(--sk-surface); border:1px solid var(--sk-line);
  border-left:4px solid var(--sk-accent); border-radius:var(--sk-radius);
  box-shadow:0 6px 20px -16px rgba(0,0,0,.5);
}
.syltek-soon[hidden]{display:none !important}
.syltek-soon-head{
  display:flex; align-items:center; gap:9px; margin:0 0 10px;
  font-size:14px; color:var(--sk-ink);
}
.syltek-soon-head strong{font-weight:700}
.syltek-pulse{
  flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--sk-accent); box-shadow:0 0 0 0 var(--sk-accent);
  animation:syltek-pulse 2s ease-out infinite;
}
@keyframes syltek-pulse{
  70%{box-shadow:0 0 0 9px rgba(216,35,42,0)}
  100%{box-shadow:0 0 0 0 rgba(216,35,42,0)}
}
@media (prefers-reduced-motion: reduce){ .syltek-pulse{animation:none} }

.syltek-soon ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.syltek-soon li a{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:7px 8px; border-radius:6px; text-decoration:none; color:inherit;
}
.syltek-soon li a:hover{background:var(--sk-surface-2)}
.syltek-soon li a:focus-visible{outline:2px solid var(--sk-accent); outline-offset:-2px}
.syltek-soon-time{
  flex:none; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:14px; color:var(--sk-accent); min-width:44px;
}
.syltek-soon-name{font-weight:600; font-size:14.5px; color:var(--sk-ink)}
.syltek-soon-meta{margin-left:auto; font-size:12.5px; color:var(--sk-muted); white-space:nowrap}

.syltek-soon-close{
  position:absolute; right:9px; top:9px; width:28px; height:28px;
  border:0; border-radius:50%; background:none; color:var(--sk-muted);
  font-size:20px; line-height:1; cursor:pointer;
}
.syltek-soon-close:hover{background:var(--sk-surface-2); color:var(--sk-ink)}
.syltek-soon-close:focus-visible{outline:2px solid var(--sk-accent); outline-offset:1px}

@media(max-width:520px){
  .syltek-soon-meta{margin-left:0; width:100%}
}

/* Hinweis auf vergangene Termine */
.syltek-past{
  margin:0 0 20px; padding:12px 16px; border-radius:var(--sk-radius);
  background:var(--sk-surface-2); color:var(--sk-ink-2); font-size:14px;
}
.syltek-past a{color:var(--sk-accent); font-weight:600; text-underline-offset:3px}

/* ---------- Nutzwert-Kasten unter den Beiträgen ---------- */

.syltek-eventbox{
  margin:26px 0 8px; padding:16px 18px;
  background:#F4F6F6; border-left:4px solid #D8232A; border-radius:8px;
  font-size:15px; line-height:1.75;
}
.syltek-eventbox strong{font-weight:700}
.syltek-eventbox a{color:#D8232A; text-underline-offset:3px}
@media (prefers-color-scheme: dark){
  .syltek-eventbox{background:#1D2426; color:#EDF1F1; border-left-color:#F0554F}
  .syltek-eventbox a{color:#F0554F}
}