/* =====================================================================
   SALT & PEPPER — Custom CSS für WordPress / Elementor
   ---------------------------------------------------------------------
   Einbauort (eine der beiden Varianten):
   A) Elementor → Website-Einstellungen → Custom CSS   (Elementor Pro)
   B) Child-Theme  →  style.css bzw. per wp_enqueue_style
   Empfehlung: B, dann bleibt es beim Theme-/Elementor-Update erhalten.

   Alle eigenen Klassen sind mit  sp-  präfixiert, damit sie sich nicht
   mit Theme- oder Plugin-Klassen beißen. Die Klasse trägst du in
   Elementor unter „Erweitert → CSS-Klassen“ am jeweiligen Element ein.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · Design-Tokens
   Die Farb-/Font-Werte stehen zusätzlich im Elementor-Kit (Global Colors
   & Global Fonts). Hier liegen sie als CSS-Variablen, damit auch die
   Komponenten unten und der Plugin-Skin darauf zugreifen können.
   ------------------------------------------------------------------ */
:root{
  --sp-ink:      #08080A;
  --sp-ink-1:    #0D0D11;
  --sp-ink-2:    #14141A;
  --sp-ink-3:    #1C1C24;
  --sp-fg:       #F4F4F6;
  --sp-fg-2:     #A3A3AE;
  --sp-fg-3:     #6B6B78;
  --sp-line:     rgba(255,255,255,.09);
  --sp-line-2:   rgba(255,255,255,.18);

  --sp-accent:      #FF1F2E;
  --sp-accent-deep: #A80010;
  --sp-accent-ink:  #FFFFFF;
  --sp-accent-soft: rgba(255,31,46,.14);
  --sp-accent-glow: rgba(255,31,46,.30);

  --sp-r:    3px;
  --sp-r-lg: 6px;
  --sp-ease: cubic-bezier(.2,.7,.3,1);

  --sp-f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sp-f-text:   'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sp-f-mono:   ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
}

/* Zweites Marken-Theme für die Apo-Theke-Seite.
   In Elementor: der äußersten Container der Bar-Seite die Klasse
   sp-brand-apo geben — dann färbt sich die komplette Seite um. */
.sp-brand-apo{
  --sp-accent:      #E2B34A;
  --sp-accent-deep: #8A6516;
  --sp-accent-ink:  #0A0A0A;
  --sp-accent-soft: rgba(226,179,74,.14);
  --sp-accent-glow: rgba(226,179,74,.26);
}

/* ---------------------------------------------------------------------
   2 · Basis
   ------------------------------------------------------------------ */
body{
  background:var(--sp-ink);
  color:var(--sp-fg);
  font-family:var(--sp-f-text);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sp-accent);color:#fff}

/* Filmkorn über der ganzen Seite. Wenn du es nicht willst: Block löschen. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Überschriften: Elementor setzt die Familie über das Kit, hier nur
   die Feinheiten, die das Kit nicht kann. */
.sp-tight h1,.sp-tight h2,.sp-tight h3,
h1.sp-tight,h2.sp-tight,h3.sp-tight{
  text-transform:uppercase;letter-spacing:-.03em;line-height:.95;
}

/* ---------------------------------------------------------------------
   3 · Komponenten
   ------------------------------------------------------------------ */

/* 3.0  Raster-Hilfsklassen für Elementor-Container.
        Robuster als die Flex-Einstellungen im Editor und brechen sauber um. */
.sp-grid-2,.sp-grid-3,.sp-grid-4{display:grid!important;align-items:start}
.sp-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.sp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.sp-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
@media(max-width:1024px){.sp-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.sp-grid-2,.sp-grid-3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.sp-grid-4{grid-template-columns:minmax(0,1fr)}}

/* Sektionsabstand als Klasse, damit alle Sektionen denselben Rhythmus haben */
.sp-section{padding-block:clamp(72px,9vw,132px);position:relative}
.sp-section--tight{padding-block:clamp(48px,6vw,80px)}
.sp-line-top{border-top:1px solid var(--sp-line)}

/* 3.1  Eyebrow / technisches Label — auf ein Heading- oder Text-Widget */
.sp-eyebrow{
  font-family:var(--sp-f-mono)!important;font-size:.7rem!important;font-weight:500!important;
  letter-spacing:.2em!important;text-transform:uppercase;color:var(--sp-fg-3)!important;
  display:flex;align-items:center;gap:.7em;margin:0;
}
.sp-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.5;flex:0 0 auto}
.sp-eyebrow--accent{color:var(--sp-accent)!important}

/* 3.2  Buttons — auf das Elementor-Button-Widget */
.sp-btn .elementor-button,
a.sp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.6em;border-radius:var(--sp-r);border:1px solid transparent;
  background:var(--sp-accent);color:var(--sp-accent-ink);
  font-family:var(--sp-f-mono);font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  transition:transform .2s var(--sp-ease),background .2s var(--sp-ease),color .2s var(--sp-ease);
}
.sp-btn .elementor-button:hover,
a.sp-btn:hover{transform:translateY(-2px);background:#fff;color:#0A0A0A}
.sp-btn--ghost .elementor-button,
a.sp-btn--ghost{background:transparent;border-color:var(--sp-line-2);color:var(--sp-fg)}
.sp-btn--ghost .elementor-button:hover,
a.sp-btn--ghost:hover{background:var(--sp-fg);color:var(--sp-ink)}

/* 3.3  Textlink mit Pfeil */
.sp-lnk,.sp-lnk a{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sp-f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sp-fg);border-bottom:1px solid var(--sp-line-2);padding-bottom:.35em;
  transition:color .2s var(--sp-ease),border-color .2s var(--sp-ease);
}
.sp-lnk:hover,.sp-lnk a:hover{color:var(--sp-accent);border-color:var(--sp-accent)}

/* 3.4  Sektionskopf: Haarlinie unter Kicker + Headline
        → auf den Container, der Kicker/Headline/Link enthält */
.sp-sec-head{border-bottom:1px solid var(--sp-line);padding-bottom:22px}

/* 3.5  Kennzahlen-Leiste
        → Elementor-Container mit 4 inneren Containern, Klasse sp-stats außen,
          sp-stat innen. Zahl = Heading, Label = Text-Editor. */
.sp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--sp-line);
  border-block:1px solid var(--sp-line)}
.sp-stat{background:var(--sp-ink);padding:clamp(22px,2.8vw,38px)}
.sp-stat h1,.sp-stat h2,.sp-stat h3,.sp-stat .sp-num{
  font-family:var(--sp-f-display);font-weight:900;
  font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.03em;margin:0}
.sp-stat p{margin:10px 0 0;font-family:var(--sp-f-mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sp-fg-3)}
@media(max-width:1024px){.sp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sp-stats{grid-template-columns:minmax(0,1fr)}}

/* 3.6  Faktenraster (Öffnungszeiten, Technik, Rahmenbedingungen)
        → äußerer Container sp-facts, innere Container je ein Fakt */
.sp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--sp-line);border:1px solid var(--sp-line);border-radius:var(--sp-r-lg);overflow:hidden}
.sp-facts > *{background:var(--sp-ink-1);padding:22px 24px}
.sp-facts h1,.sp-facts h2,.sp-facts h3,.sp-facts h4,.sp-facts h5,.sp-facts h6{
  font-family:var(--sp-f-mono);font-size:.64rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sp-fg-3);margin:0 0 8px}
.sp-facts p{font-size:1rem;font-weight:500;margin:0;color:var(--sp-fg)}

/* 3.7  Karten (Anlässe, Downloads, Infoboxen) */
.sp-card{
  border:1px solid var(--sp-line);background:var(--sp-ink-1);border-radius:var(--sp-r-lg);
  transition:border-color .25s var(--sp-ease),background .25s var(--sp-ease),transform .25s var(--sp-ease);
}
.sp-card:hover{border-color:var(--sp-line-2);background:var(--sp-ink-2);transform:translateY(-3px)}

/* 3.8  Artist-Wall  → Elementor Icon-List oder Text-Editor mit <ul> */
.sp-artists ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.sp-artists li{
  padding:.6em 1.05em;border:1px solid var(--sp-line);border-radius:var(--sp-r);
  font-family:var(--sp-f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.82rem,1.1vw,1rem);color:var(--sp-fg-2);transition:all .2s var(--sp-ease);
}
.sp-artists li:hover{color:var(--sp-fg);border-color:var(--sp-accent);background:var(--sp-accent-soft)}

/* 3.9  Ablauf-Schritte mit großer Nummer
        → Container sp-steps, innere Container sp-step */
.sp-steps{display:grid;gap:1px;background:var(--sp-line);border-block:1px solid var(--sp-line);counter-reset:sp}
.sp-step{background:var(--sp-ink);padding:clamp(24px,3vw,38px);position:relative;padding-left:clamp(80px,8vw,120px)}
.sp-step::before{
  counter-increment:sp;content:counter(sp,decimal-leading-zero);
  position:absolute;left:clamp(24px,3vw,38px);top:clamp(24px,3vw,38px);
  font-family:var(--sp-f-display);font-weight:900;font-size:clamp(1.6rem,2.6vw,2.4rem);
  color:var(--sp-accent);line-height:1;
}

/* 3.10 FAQ — als HTML-Widget mit <details> (funktioniert ohne JS und ohne
        Abhängigkeit davon, welches Accordion-Widget die Elementor-Version hat) */
.sp-faq{border-top:1px solid var(--sp-line)}
.sp-faq details{border-bottom:1px solid var(--sp-line)}
.sp-faq summary{
  list-style:none;cursor:pointer;padding:22px 0;display:flex;
  align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--sp-f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.95rem,1.3vw,1.1rem);
}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";font-family:var(--sp-f-mono);color:var(--sp-accent);
  font-size:1.2rem;transition:transform .25s var(--sp-ease)}
.sp-faq details[open] summary::after{transform:rotate(45deg)}
.sp-faq details > p{padding:0 0 22px;margin:0;color:var(--sp-fg-2);max-width:72ch}

/* … und falls du doch das Elementor-Accordion-Widget nimmst: */
.sp-faq .e-n-accordion-item,
.sp-faq .elementor-accordion-item{border:0;border-bottom:1px solid var(--sp-line);background:transparent}
.sp-faq .elementor-tab-title{
  font-family:var(--sp-f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em;background:transparent!important;padding:22px 0!important;
}
.sp-faq .elementor-tab-content{background:transparent!important;padding:0 0 22px!important;
  color:var(--sp-fg-2);border:0}

/* 3.11 Laufband / Marquee
        → HTML-Widget mit:
          <div class="sp-marquee"><div class="sp-marquee__track">…Items…</div></div>
          Items doppelt einfügen, damit die Schleife nahtlos läuft. */
.sp-marquee{border-block:1px solid var(--sp-line);background:var(--sp-ink-1);overflow:hidden;padding-block:14px}
.sp-marquee__track{display:flex;width:max-content;animation:sp-slide 42s linear infinite}
.sp-marquee:hover .sp-marquee__track{animation-play-state:paused}
@keyframes sp-slide{to{transform:translateX(-50%)}}
.sp-marquee__item{
  display:inline-flex;align-items:center;gap:16px;padding-inline:26px;white-space:nowrap;
  font-family:var(--sp-f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sp-fg-2);
}
.sp-marquee__item b{color:var(--sp-fg);font-weight:600}
.sp-marquee__item::after{content:"";width:5px;height:5px;background:var(--sp-accent);border-radius:50%;margin-left:10px}

/* 3.12 Ebenen-Split (Bar oben / Club unten)
        → zwei Elementor-Container nebeneinander, je Klasse sp-level,
          Hintergrundbild über Elementor, Text unten ausgerichtet. */
.sp-level{position:relative;overflow:hidden;min-height:min(74vh,620px);
  display:flex;flex-direction:column;justify-content:flex-end}
.sp-level::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,var(--sp-ink) 6%,rgba(8,8,10,.5) 60%,rgba(8,8,10,.75))}
.sp-level > *{position:relative;z-index:1}
.sp-level__floor{font-family:var(--sp-f-mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sp-accent)}

/* 3.13 Roter Schein hinter einer Sektion
        → leeres HTML-Widget <div class="sp-glow"></div> in den Container */
.sp-glow{position:absolute;width:min(52vw,620px);aspect-ratio:1;border-radius:50%;
  background:var(--sp-accent);opacity:.13;filter:blur(90px);pointer-events:none;z-index:0}

/* 3.14 Mobile Sticky-Bar „Nächstes Event“
        → HTML-Widget im Footer-Template */
.sp-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;
  background:rgba(13,13,17,.94);backdrop-filter:blur(12px);border-top:1px solid var(--sp-line-2);
}
.sp-sticky .k{display:block;font-family:var(--sp-f-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sp-accent)}
.sp-sticky .t{display:block;font-family:var(--sp-f-display);font-weight:700;text-transform:uppercase;
  font-size:.88rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.sp-sticky{display:flex}body{padding-bottom:66px}}

/* 3.15 Platzhalter-Markierung für noch fehlende Angaben (nur intern) */
.sp-todo{color:var(--sp-accent);font-family:var(--sp-f-mono);font-size:.78rem}

/* 3.16 Typo-Klassen für einzelne Widgets */
.sp-display,.sp-display h1,.sp-display h2{
  font-family:var(--sp-f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.9rem,9.4vw,7.6rem);line-height:.86;letter-spacing:-.035em;margin:0;
}
.sp-display em{font-style:normal;color:var(--sp-accent);display:block}
.sp-lede{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.62;
  color:var(--sp-fg-2);max-width:60ch;margin:0}
.sp-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.sp-card__n{font-family:var(--sp-f-mono);font-size:.68rem;letter-spacing:.18em;
  color:var(--sp-accent);margin:0}
.sp-tag{display:inline-flex;align-items:center;gap:.5em;margin:0;
  font-family:var(--sp-f-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sp-fg-2)}
.sp-tag::before{content:"";width:7px;height:7px;background:var(--sp-accent);border-radius:50%}

/* 3.17 Hero */
.sp-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(104px,13vh,168px);padding-bottom:clamp(30px,5vw,64px);
  position:relative;overflow:hidden}
.sp-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 15% 100%,var(--sp-accent-glow) 0%,transparent 62%),
             linear-gradient(to top,var(--sp-ink) 4%,rgba(8,8,10,.55) 45%,rgba(8,8,10,.85) 100%)}
.sp-hero > *{position:relative;z-index:1}
.sp-hero__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);align-items:end}
.sp-hero__meta{padding-top:22px;margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--sp-line)}
.sp-hero__meta > *{background:transparent;padding:0}
@media(max-width:1024px){.sp-hero__grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){.sp-hero{min-height:92svh}}

/* 3.18 Karte „Nächstes Event“ */
.sp-next{border:1px solid var(--sp-line-2);background:rgba(13,13,17,.66);
  backdrop-filter:blur(12px);border-radius:var(--sp-r-lg);padding:22px;position:relative;overflow:hidden}
.sp-next::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sp-accent)}
.sp-next__k{margin:0;font-family:var(--sp-f-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sp-accent)}
.sp-next__title{font-family:var(--sp-f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.02;letter-spacing:-.02em;margin:0}

/* 3.19 Countdown (HTML-Widget, Snippet siehe konzept/04) */
.sp-count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  border-top:1px solid var(--sp-line);padding-top:16px;margin-top:4px}
.sp-count div{display:flex;flex-direction:column;gap:4px}
.sp-count b{font-family:var(--sp-f-display);font-weight:800;
  font-size:clamp(1.4rem,2.4vw,2rem);line-height:1;font-variant-numeric:tabular-nums}
.sp-count span{font-family:var(--sp-f-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sp-fg-3)}

/* 3.20 Ebenen-Split, Fortsetzung */
.sp-levels{gap:1px!important;background:var(--sp-line)}
.sp-level{background:var(--sp-ink);padding:clamp(30px,4vw,58px)}
.sp-level__name{font-family:var(--sp-f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:.9;letter-spacing:-.03em;margin:0}

/* 3.21 Bildstreifen */
.sp-strip img{aspect-ratio:4/5;object-fit:cover;width:100%;
  filter:grayscale(.55) contrast(1.1);transition:filter .4s var(--sp-ease),transform .6s var(--sp-ease)}
.sp-strip img:hover{filter:none;transform:scale(1.04)}

/* 3.22 Sektionskopf, Fortsetzung */
.sp-sec-head{display:flex!important;flex-direction:row;align-items:flex-end;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.5vw,48px)}
.sp-sec-head__l{max-width:44ch;gap:14px}
.sp-sec-head__r{flex:0 0 auto;width:auto}


/* =====================================================================
   4 · fb-event-sync — Redesign-Skin
   Nutzt die CSS-Variablen und Klassen des Plugins. Läuft für alle
   Layouts (grid, list, poster, slider, spotlight) und die Detailseite.
   ===================================================================== */
/* WICHTIG: Der Shortcode schreibt diese Variablen als inline style="…" auf den
   Wrapper. Inline-Styles schlagen jedes Stylesheet — deshalb hier !important.
   Nur damit greifen die Design-Tokens. Alternativ (sauberer, falls das Plugin
   eine Einstellungsseite hat): die Farben dort auf die neuen Werte setzen und
   die !important hier entfernen. */
.fbev{
  --fbev-accent:var(--sp-accent)!important;
  --fbev-accent-2:var(--sp-accent)!important;
  --fbev-bg:transparent!important;
  --fbev-card:var(--sp-ink-1)!important;
  --fbev-card-2:var(--sp-ink-2)!important;
  --fbev-text:var(--sp-fg)!important;
  --fbev-muted:var(--sp-fg-2)!important;
  --fbev-border:var(--sp-line)!important;
  --fbev-badge-text:var(--sp-accent-ink)!important;
  --fbev-radius:6px!important;
  --fbev-gap:clamp(16px,2vw,28px)!important;
  --fbev-font-heading:var(--sp-f-display);
  font-family:var(--sp-f-text);
}
/* Seitenverhältnis und Spaltenzahl kommen weiter aus dem Shortcode
   (ratio="3/2" columns="3") — die werden bewusst NICHT überschrieben. */

/* Karte: flach und kantig statt Karte-mit-Schatten */
.fbev .fbev-item{background:transparent;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--sp-line);padding-top:18px}
.fbev .fbev-item:hover{background:transparent;transform:none;box-shadow:none;border-color:var(--sp-line-2)}
.fbev .fbev-item__media{border-radius:var(--sp-r);overflow:hidden;background:var(--sp-ink-2)}
.fbev .fbev-item__img{filter:grayscale(.28) contrast(1.06);
  transition:filter .45s var(--sp-ease),transform .6s var(--sp-ease)}
.fbev .fbev-item:hover .fbev-item__img{filter:none;transform:scale(1.045)}

/* Datumsplakette als Signalfeld in der Ecke */
.fbev .fbev-date{top:0;left:0;border-radius:0;background-image:none;background:var(--sp-accent);
  padding:.55em .75em;box-shadow:none}
.fbev .fbev-date__day{font-family:var(--sp-f-display);font-weight:900;font-size:1.5rem;letter-spacing:-.02em}
.fbev .fbev-date__month{font-family:var(--sp-f-mono);font-weight:500;letter-spacing:.16em;font-size:.6rem;opacity:1}

.fbev .fbev-item__body{padding:16px 0 4px;gap:.55rem}
.fbev .fbev-item__when{font-family:var(--sp-f-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;color:var(--sp-accent)}
.fbev .fbev-item__title{font-family:var(--sp-f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.05;letter-spacing:-.02em;color:var(--sp-fg)}
.fbev .fbev-item__place{font-size:.8rem;color:var(--sp-fg-3)}
.fbev .fbev-item__place .fbev-icon{opacity:.6}
.fbev .fbev-item__excerpt{font-size:.88rem;color:var(--sp-fg-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fbev .fbev-item__actions{padding-top:14px;gap:8px}

.fbev .fbev-btn{border-radius:var(--sp-r);font-family:var(--sp-f-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:.78em 1.15em}
.fbev .fbev-btn--primary{background-image:none;background:var(--sp-accent);color:var(--sp-accent-ink)}
.fbev .fbev-btn--primary:hover{background:var(--sp-fg);color:var(--sp-ink);filter:none;transform:translateY(-2px)}
.fbev .fbev-btn--ghost{border-color:var(--sp-line-2);color:var(--sp-fg-2)}
.fbev .fbev-btn--ghost:hover{border-color:var(--sp-fg);color:var(--sp-fg)}

.fbev .fbev-chip{border-radius:var(--sp-r);font-family:var(--sp-f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;border-color:var(--sp-line-2)}
.fbev .fbev-chip.is-active{background-image:none;background:var(--sp-accent);color:var(--sp-accent-ink)}

/* Listenlayout */
.fbev .fbev-row{background:transparent;border:0;border-bottom:1px solid var(--sp-line);border-radius:0;
  padding:20px 4px}
.fbev .fbev-row:hover{background:var(--sp-ink-1);transform:none;border-color:var(--sp-line)}
.fbev .fbev-row__date{background-image:none;background:transparent;color:var(--sp-fg);
  border:1px solid var(--sp-line-2);border-radius:var(--sp-r);padding:.5rem .2rem}
.fbev .fbev-row__day{font-family:var(--sp-f-display);font-weight:900;font-size:1.55rem;letter-spacing:-.02em}
.fbev .fbev-row__weekday,.fbev .fbev-row__month{font-family:var(--sp-f-mono);font-weight:500;
  letter-spacing:.14em;color:var(--sp-fg-3);opacity:1}
.fbev .fbev-row__title{font-family:var(--sp-f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.015em;font-size:1.15rem;line-height:1.1}
.fbev .fbev-row__meta{font-family:var(--sp-f-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-fg-3)}
.fbev .fbev__month{font-family:var(--sp-f-mono);letter-spacing:.2em;color:var(--sp-accent);font-size:.7rem}

/* Poster-Wand */
.fbev .fbev-poster{border-radius:var(--sp-r);border-color:var(--sp-line);background:var(--sp-ink-2)}
.fbev .fbev-poster__title{font-family:var(--sp-f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.fbev .fbev-poster__date{font-family:var(--sp-f-mono);letter-spacing:.16em}

/* Spotlight */
.fbev .fbev-hero{background:transparent;border:0;border-radius:0}
.fbev .fbev-hero__media{border-radius:var(--sp-r-lg);overflow:hidden}
.fbev .fbev-hero__body{padding:20px 0 0}
.fbev .fbev-hero__kicker{background-image:none;background:var(--sp-accent);border-radius:var(--sp-r);
  font-family:var(--sp-f-mono);letter-spacing:.16em;font-weight:600}
.fbev .fbev-hero__title{font-family:var(--sp-f-display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.95}
.fbev .fbev-hero__when{font-family:var(--sp-f-mono);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}
.fbev .fbev-mini{background:transparent;border:0;border-bottom:1px solid var(--sp-line);border-radius:0;padding:14px 2px}
.fbev .fbev-mini:hover{background:var(--sp-ink-1);transform:none}
.fbev .fbev-mini__date{background:transparent;border:1px solid var(--sp-line-2);border-radius:var(--sp-r);color:var(--sp-fg)}
.fbev .fbev-mini__date strong{font-family:var(--sp-f-display);font-weight:900}
.fbev .fbev-mini__date span{font-family:var(--sp-f-mono);letter-spacing:.12em;color:var(--sp-fg-3)}
.fbev .fbev-mini__title{font-family:var(--sp-f-display);font-weight:700;text-transform:uppercase;
  font-size:.92rem;letter-spacing:-.01em}
.fbev .fbev-mini__meta{font-family:var(--sp-f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.fbev .fbev__upcoming-title{font-family:var(--sp-f-mono);letter-spacing:.2em;color:var(--sp-accent)}

/* Leerzustand + Datenschutzhinweis */
.fbev .fbev__empty{border-radius:var(--sp-r-lg);border-color:var(--sp-line)}
.fbev .fbev__privacy{font-family:var(--sp-f-mono);font-size:.64rem;letter-spacing:.1em;
  color:var(--sp-fg-3);opacity:.75}

/* Event-Detailseite */
.fbev-single__title{font-family:var(--sp-f-display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.94}
.fbev-single__kicker{font-family:var(--sp-f-mono);letter-spacing:.16em}
.fbev-single__meta{background:var(--sp-ink-1);border-color:var(--sp-line);border-radius:var(--sp-r-lg)}
.fbev-single__facts dt{font-family:var(--sp-f-mono);letter-spacing:.16em}


/* =====================================================================
   5 · Elementor-Feinschliff
   ===================================================================== */

/* Formular-Widget (Elementor Pro) an das Designsystem angleichen */
.sp-form .elementor-field-group label{
  font-family:var(--sp-f-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sp-fg-3);margin-bottom:8px;
}
.sp-form .elementor-field-textual{
  background:var(--sp-ink-1);border:1px solid var(--sp-line);border-radius:var(--sp-r);
  padding:.9em 1em;color:var(--sp-fg);font-size:.95rem;
}
.sp-form .elementor-field-textual:focus{border-color:var(--sp-accent);box-shadow:none;outline:none}
.sp-form .elementor-field-textual::placeholder{color:var(--sp-fg-3)}
.sp-form .elementor-button[type="submit"]{
  background:var(--sp-accent);color:var(--sp-accent-ink);border-radius:var(--sp-r);
  font-family:var(--sp-f-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
}
.sp-form .elementor-button[type="submit"]:hover{background:#fff;color:#0A0A0A}

/* Navigations-Widget im Header */
.sp-nav .elementor-item{
  font-family:var(--sp-f-mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
}

/* Volle Breite ohne Rand für die Ebenen-/Kennzahlen-Sektionen */
.sp-bleed{margin-inline:calc(50% - 50vw);max-width:100vw}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion:reduce){
  .sp-marquee__track{animation:none}
  .sp-card:hover,.fbev .fbev-item:hover .fbev-item__img{transform:none}
}