/* ==========================================================================
   Kabine Links – Bühne, Songliste, Termine, Karaoke-Wand
   Farben und Schriften kommen aus theme.json, hier steht alles Bewegte.
   ========================================================================== */

:root{
  --kl-nacht:var(--wp--preset--color--nacht,#0a0710);
  --kl-gold:var(--wp--preset--color--gold,#ffcb2b);
  --kl-rot:var(--wp--preset--color--rot,#ff2d4f);
  --kl-violett:var(--wp--preset--color--violett,#8b2fff);
  --kl-cyan:var(--wp--preset--color--cyan,#00e0d5);
  --kl-creme:var(--wp--preset--color--creme,#fff5e4);
  --kl-grau:var(--wp--preset--color--grau,#b7a6cf);
  --kl-spotify:#1db954;
  --kl-anton:var(--wp--preset--font-family--anton,Anton,Impact,sans-serif);
  --kl-kond:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);
}
body{overflow-x:hidden}

/* --------------------------------------------------------------------------
   Bühnenlicht – liegt hinter allem, wird vom Kopfbereich erzeugt
   -------------------------------------------------------------------------- */
.kl-licht{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kl-spot{position:absolute;top:-24vh;width:26vw;height:170vh;transform-origin:50% 0;filter:blur(34px);mix-blend-mode:screen;opacity:.5}
.kl-spot.a{left:12%;background:linear-gradient(to bottom,rgba(255,45,79,.9),transparent 68%);animation:kl-pendel1 8s ease-in-out infinite alternate}
.kl-spot.b{left:44%;background:linear-gradient(to bottom,rgba(139,47,255,.9),transparent 68%);animation:kl-pendel2 11s ease-in-out infinite alternate}
.kl-spot.c{left:72%;background:linear-gradient(to bottom,rgba(0,224,213,.9),transparent 68%);animation:kl-pendel3 9.5s ease-in-out infinite alternate}
@keyframes kl-pendel1{from{transform:rotate(-26deg)}to{transform:rotate(16deg)}}
@keyframes kl-pendel2{from{transform:rotate(20deg)}to{transform:rotate(-18deg)}}
@keyframes kl-pendel3{from{transform:rotate(-14deg) scaleX(.7)}to{transform:rotate(28deg) scaleX(1.2)}}

.kl-nebel{position:fixed;left:-10%;right:-10%;bottom:0;height:38vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 100%,rgba(139,47,255,.32),transparent 62%),
             radial-gradient(ellipse at 72% 100%,rgba(0,224,213,.24),transparent 62%);
  animation:kl-wabern 14s ease-in-out infinite alternate}
@keyframes kl-wabern{from{transform:translateX(-4%) scaleY(1)}to{transform:translateX(4%) scaleY(1.18)}}

.kl-menge{position:fixed;left:0;right:0;bottom:0;height:16vh;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,#05030a 0 14px,transparent 14px 26px);
  -webkit-mask-image:linear-gradient(to top,#000 44%,transparent);
  mask-image:linear-gradient(to top,#000 44%,transparent);
  animation:kl-jubeln 1.3s ease-in-out infinite alternate}
@keyframes kl-jubeln{to{transform:translateY(-6px)}}

/* Inhalt liegt über dem Licht */
.wp-site-blocks{position:relative;z-index:2}

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */
.kl-kopf{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(10,7,16,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,245,228,.12)}
.kl-kopf .wp-block-group{padding-top:13px;padding-bottom:13px}
/* Angemeldet legt WordPress seine eigene Werkzeugleiste über die Seite. Die
   Kopfleiste und der Ausgleichsabstand darunter rücken um deren Höhe nach unten,
   sonst verschwindet das Menü dahinter. Unter 600px scrollt die Leiste mit,
   dort bleibt die Kopfleiste am oberen Rand. */
body.admin-bar .kl-kopf{top:32px}
body.admin-bar .wp-site-blocks > *:first-child{padding-top:116px}
@media screen and (max-width:782px){
  body.admin-bar .kl-kopf{top:46px}
  body.admin-bar .wp-site-blocks > *:first-child{padding-top:130px}}
@media screen and (max-width:600px){
  body.admin-bar .kl-kopf{top:0}
  body.admin-bar .wp-site-blocks > *:first-child{padding-top:84px}}
.kl-marke{font-family:var(--kl-anton);text-transform:uppercase;color:var(--kl-gold);
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:clamp(16px,2.2vw,22px);line-height:1}
.kl-marke:hover{color:var(--kl-gold)}
.kl-lampe{width:13px;height:13px;border-radius:50%;background:var(--kl-rot);flex:none;
  box-shadow:0 0 14px var(--kl-rot);animation:kl-lampenwechsel 2.4s steps(1) infinite}
@keyframes kl-lampenwechsel{
  0%{background:#ff2d4f;box-shadow:0 0 14px #ff2d4f}
  33%{background:#8b2fff;box-shadow:0 0 14px #8b2fff}
  66%{background:#00e0d5;box-shadow:0 0 14px #00e0d5}}

.kl-kopf .wp-block-navigation{font-family:var(--kl-kond);font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;font-size:17px}
.kl-kopf .wp-block-navigation a{color:var(--kl-creme);opacity:.85;position:relative;text-decoration:none}
.kl-kopf .wp-block-navigation a:hover{opacity:1;color:var(--kl-gold)}
.kl-kopf .wp-block-navigation .current-menu-item a{color:var(--kl-gold);opacity:1}
.kl-kopf .wp-block-navigation a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--kl-gold);transition:width .25s}
.kl-kopf .wp-block-navigation a:hover::after,
.kl-kopf .wp-block-navigation .current-menu-item a::after{width:100%}

/* Abstand, damit der Inhalt nicht unter der fixierten Leiste klebt (Leiste ≈ 79 px) */
.wp-site-blocks > *:first-child{padding-top:84px}

/* Knöpfe mit angeschrägter Kante wie im Entwurf */
.wp-block-button.is-style-kl-schraeg .wp-block-button__link{clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.wp-block-button.is-style-kl-geist .wp-block-button__link{
  background:transparent;border:2px solid rgba(255,245,228,.4);color:var(--kl-creme)}
.wp-block-button.is-style-kl-geist .wp-block-button__link:hover{border-color:var(--kl-cyan);color:var(--kl-cyan);background:transparent}
.wp-block-button__link{transition:.2s}
.wp-block-button__link:hover{transform:translateY(-3px)}

/* --------------------------------------------------------------------------
   Hero – Typo wandert beim Scrollen auseinander
   -------------------------------------------------------------------------- */
/* Der Hero sitzt bewusst hoch: der Inhalt wird oben ausgerichtet statt mittig,
   damit die Riesentypo dicht unter der Kopfleiste steht und nicht erst nach
   einem Feld aus leerem Raum beginnt. */
.kl-hero{display:grid;place-content:start center;
  text-align:center;position:relative;padding:clamp(18px,4vh,44px) 0}
.kl-hero .kl-praesent{font-family:var(--kl-kond);font-size:clamp(12px,1.8vw,17px);
  letter-spacing:.44em;text-transform:uppercase;color:var(--kl-cyan);margin-bottom:20px}
/* Der Schriftgrad aus theme.json skaliert mit 9vw – auf schmalen Schirmen bleibt der
   Name dadurch winzig und füllt nur ein Viertel der Breite. Hier wird er an der
   Fensterbreite ausgerichtet: „KABINE" ist in Anton rund 2,6× so breit wie hoch,
   28vw füllen damit etwa vier Fünftel der Zeile. Der Deckel hält den Desktop-Grad.
   Das !important ist nötig, weil WordPress die Preset-Klasse so ausliefert. */
.kl-hero h1{font-size:clamp(3.4rem,28vw,7rem)!important;line-height:.88}
.kl-zeile1,.kl-zeile2{display:block;transform-origin:50% 100%;will-change:transform}
.kl-zeile1{color:var(--kl-gold);text-shadow:0 0 60px rgba(255,203,43,.35)}
.kl-zeile2{-webkit-text-stroke:2px var(--kl-rot);color:transparent}
.kl-unter{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  font-family:var(--kl-kond);font-size:clamp(13px,2vw,20px);font-weight:800;
  text-transform:uppercase;letter-spacing:.2em;color:#cbb9e6;list-style:none;padding:0}
.kl-unter li{position:relative;padding:0 10px}
.kl-unter li+li::before{content:"";position:absolute;left:-4px;top:50%;translate:0 -50%;
  width:5px;height:5px;background:var(--kl-rot);rotate:45deg}

/* --------------------------------------------------------------------------
   Laufbänder
   -------------------------------------------------------------------------- */
/* Die Laufbänder gehen wie in der Vorlage über die volle Breite. Sie brechen dafür
   mit negativen Rändern aus dem Seitenrand aus – der Wert ist derselbe wie das
   Innenabstands-Maß aus theme.json, deshalb sitzt die Kante exakt. Kein 100vw:
   das würde bei sichtbarer Scrollleiste quer überstehen. */
.kl-band{overflow:hidden;white-space:nowrap;padding:14px 0;position:relative;z-index:5;
  background:var(--kl-rot);border-block:2px solid rgba(255,245,228,.25);
  width:auto;max-width:none}
/* WordPress zwingt zentrierten Blöcken margin:auto mit !important auf – deshalb
   muss die Gegenregel ebenfalls !important tragen. Die Bänder haben zusätzlich
   die Klasse alignfull, damit sie aus der Zentrierungsregel herausfallen. */
.kl-band,
.is-layout-constrained > .kl-band.alignfull{
  margin-left:calc(-1 * clamp(18px,5vw,60px))!important;
  margin-right:calc(-1 * clamp(18px,5vw,60px))!important;
  max-width:none!important}
.kl-band .kl-spur{display:inline-block;animation:kl-laufen 24s linear infinite;
  font-family:var(--kl-anton);font-size:clamp(24px,5vw,60px);color:var(--kl-creme);text-transform:uppercase}
.kl-band .kl-spur span{padding:0 26px}
.kl-band .kl-spur i{color:var(--kl-gold);font-style:normal}
.kl-band.kl-band-2{background:transparent;border:0;padding:6px 0;
  margin-bottom:clamp(22px,4vw,52px)}
.kl-band.kl-band-2 .kl-spur{animation-direction:reverse;animation-duration:30s;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,245,228,.5)}
@keyframes kl-laufen{to{transform:translateX(-50%)}}

/* --------------------------------------------------------------------------
   Songliste
   -------------------------------------------------------------------------- */
.kl-songs{border-top:1px solid rgba(255,245,228,.2)}
.kl-song{display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(14px,3vw,34px);align-items:center;
  padding:clamp(14px,2.4vw,26px) 6px;border-bottom:1px solid rgba(255,245,228,.2);
  position:relative;transition:.3s}
.kl-song .kl-nr{font-family:var(--kl-kond);font-size:clamp(13px,1.6vw,16px);font-weight:800;
  color:var(--kl-cyan);letter-spacing:.14em;min-width:32px;position:relative;z-index:2}
/* Cover fest links neben dem Titel */
.kl-song .kl-cover{width:clamp(58px,7vw,92px);height:auto;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:6px;border:2px solid var(--kl-gold);box-shadow:0 10px 26px rgba(0,0,0,.5);
  position:relative;z-index:2;transition:transform .3s}
.kl-song:hover .kl-cover{transform:scale(1.05) rotate(-2deg)}
.kl-song.kl-ohne-cover .kl-titel{grid-column:2/4}
.kl-song h3,.kl-song .kl-titel{font-family:var(--kl-anton);text-transform:uppercase;
  font-size:clamp(22px,4.6vw,56px);line-height:.95;margin:0;transition:.3s;position:relative;z-index:2}
.kl-song .kl-titel a{color:inherit;text-decoration:none}
.kl-song:hover .kl-titel{color:var(--kl-gold);transform:translateX(14px)}
.kl-song::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:.3s;
  background:linear-gradient(90deg,rgba(255,45,79,.22),transparent 60%)}
.kl-song:hover::after{opacity:1}
.kl-song .kl-rechts{display:flex;align-items:center;gap:clamp(9px,1.6vw,18px);position:relative;z-index:2}
.kl-song .kl-hook{font-family:var(--kl-kond);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:#8f7fae;display:none}
@media(min-width:1080px){.kl-song .kl-hook{display:block}}
.kl-song .kl-dauer{font-family:var(--kl-kond);font-size:15px;font-weight:800;
  color:var(--kl-gold);letter-spacing:.08em}

.kl-hoeren,.kl-mitsingen{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  font-family:var(--kl-kond);font-size:14px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 15px;transition:.2s}
.kl-hoeren{border:1.5px solid var(--kl-spotify);color:var(--kl-spotify)}
.kl-hoeren:hover{background:var(--kl-spotify);color:#04140a;transform:translateY(-2px)}
.kl-hoeren svg{width:16px;height:16px;flex:none}
.kl-hoeren .kl-wort{display:none}
@media(min-width:760px){.kl-hoeren .kl-wort{display:inline}}
.kl-mitsingen{border:1.5px solid rgba(255,245,228,.3);color:var(--kl-grau)}
.kl-mitsingen:hover{border-color:var(--kl-gold);color:var(--kl-gold);transform:translateY(-2px)}
@media(max-width:620px){.kl-mitsingen{display:none}}
/* Kennzeichnung: der ganze Act entsteht mit künstlicher Intelligenz */
.kl-ki-hinweis{font-family:var(--kl-kond);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:#8f7fae}
.kl-ki-hinweis::before{content:"KI";display:inline-block;margin-right:9px;padding:2px 7px;
  border:1px solid var(--kl-cyan);color:var(--kl-cyan);font-weight:800;letter-spacing:.14em}
.kl-suchhinweis{margin-top:22px;font-family:var(--kl-kond);font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:#6f6190}

/* --------------------------------------------------------------------------
   Kennzahlen
   -------------------------------------------------------------------------- */
.kl-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
.kl-zahl{padding:36px 20px;border-left:1px solid rgba(255,245,228,.2);transition:.25s}
.kl-zahl:first-child{border-left:0}
.kl-zahl:hover{background:rgba(255,203,43,.09)}
.kl-zahl b{display:block;font-family:var(--kl-anton);font-size:clamp(44px,7vw,80px);
  color:var(--kl-gold);line-height:1}
.kl-zahl span{font-family:var(--kl-kond);font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;color:#8f7fae;margin-top:8px;display:block}

/* --------------------------------------------------------------------------
   Termine
   -------------------------------------------------------------------------- */
.kl-termin{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;padding:26px 6px;
  border-bottom:1px solid rgba(255,245,228,.2);transition:.3s;position:relative}
.kl-termin:first-child{border-top:1px solid rgba(255,245,228,.2)}
.kl-termin::after{content:"";position:absolute;inset:0;opacity:0;transition:.3s;
  background:linear-gradient(90deg,rgba(139,47,255,.24),transparent 65%)}
.kl-termin:hover{padding-left:22px}
.kl-termin:hover::after{opacity:1}
.kl-termin .kl-dat{font-family:var(--kl-anton);font-size:clamp(26px,3.4vw,42px);
  color:var(--kl-creme);position:relative;z-index:2;line-height:.9}
.kl-termin .kl-dat span{display:block;font-family:var(--kl-kond);font-size:14px;
  letter-spacing:.2em;color:var(--kl-cyan);margin-top:5px}
.kl-termin .kl-ort{position:relative;z-index:2}
.kl-termin .kl-ort b{display:block;font-family:var(--kl-anton);font-size:clamp(18px,2.6vw,30px);text-transform:uppercase}
.kl-termin .kl-ort span{font-family:var(--kl-kond);font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;color:#8f7fae}
.kl-termin .kl-st{position:relative;z-index:2;font-family:var(--kl-kond);font-size:13px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;border:1.5px solid var(--kl-gold);color:var(--kl-gold);
  padding:9px 18px;white-space:nowrap;transition:.25s;text-decoration:none;display:inline-block}
.kl-termin:hover .kl-st{background:var(--kl-gold);color:#1a1000}
.kl-termin .kl-st.kl-weg{border-color:#655480;color:#655480;text-decoration:line-through}
.kl-termin:hover .kl-st.kl-weg{background:transparent;color:#655480}
.kl-keine{font-family:var(--kl-kond);letter-spacing:.14em;text-transform:uppercase;color:#8f7fae;padding:26px 0}

/* --------------------------------------------------------------------------
   Karaoke – LED-Videowand
   -------------------------------------------------------------------------- */
.kl-wandbereich{position:relative;width:min(96vw,1120px);margin:40px auto 0}
.kl-traverse{position:absolute;top:-16px;left:-10px;right:-10px;height:16px;z-index:2;border-radius:3px;
  background:repeating-linear-gradient(90deg,#3a3350 0 3px,#1c1830 3px 8px,#3a3350 8px 11px,transparent 11px 22px);
  box-shadow:0 2px 0 rgba(0,0,0,.6)}
.kl-traverse .kl-lampe2{position:absolute;top:14px;width:14px;height:16px;background:#241f36;border-radius:0 0 4px 4px}
.kl-traverse .kl-lampe2 i{position:absolute;bottom:-3px;left:2px;width:10px;height:5px;border-radius:50%;
  background:var(--kl-gold);box-shadow:0 0 16px 3px var(--kl-gold);animation:kl-lampenpuls 1.9s ease-in-out infinite}
@keyframes kl-lampenpuls{0%,100%{opacity:.25}50%{opacity:1}}

.kl-wand{position:relative;border:3px solid rgba(255,245,228,.28);border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#0e0a18,#150c22);
  box-shadow:0 0 0 6px #08060e,0 34px 80px rgba(0,0,0,.7),inset 0 0 90px rgba(139,47,255,.18);
  padding:clamp(20px,3.4vw,42px) clamp(16px,3vw,44px)}
.kl-wand::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.5;
  background-image:radial-gradient(circle,rgba(0,0,0,.55) 38%,transparent 40%);background-size:5px 5px}
.kl-wand::before{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,203,43,.14),transparent 60%)}
.kl-wandkopf{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;font-family:var(--kl-kond);font-size:13px;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:#9b8ab8;padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,245,228,.16)}
.kl-wandkopf .kl-live{display:flex;align-items:center;gap:9px;color:var(--kl-rot)}
.kl-wandkopf .kl-live i{width:9px;height:9px;border-radius:50%;background:var(--kl-rot);
  animation:kl-pochen 1.1s ease-in-out infinite}
@keyframes kl-pochen{50%{transform:scale(1.8);opacity:.35}}
.kl-wandkopf .kl-songname{color:var(--kl-gold);letter-spacing:.14em}
.kl-wandkopf .kl-abschnitt{border:1px solid var(--kl-cyan);color:var(--kl-cyan);padding:3px 11px;letter-spacing:.16em}

.kl-textfeld{position:relative;z-index:5;min-height:clamp(190px,28vw,300px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.1vw,14px)}
.kl-vorzeile,.kl-nachzeile{font-family:var(--kl-kond);font-weight:600;font-size:clamp(14px,2.1vw,23px);
  letter-spacing:.06em;color:rgba(255,245,228,.3);text-transform:uppercase;min-height:1.2em;transition:.3s}
.kl-hauptzeile{font-family:var(--kl-anton);text-transform:uppercase;line-height:1.06;
  font-size:clamp(26px,5.6vw,68px);display:flex;flex-wrap:wrap;gap:.24em;justify-content:center;align-items:baseline}
.kl-hauptzeile w{color:rgba(255,245,228,.26);display:inline-block;
  transition:color .16s,transform .16s,text-shadow .16s}
.kl-hauptzeile w.war{color:var(--kl-creme)}
.kl-hauptzeile w.an{color:var(--kl-gold);transform:translateY(-6px) scale(1.05);
  text-shadow:0 0 34px rgba(255,203,43,.8),0 0 8px rgba(255,203,43,.5)}
.kl-wand.refrain .kl-hauptzeile w.an{color:var(--kl-rot);text-shadow:0 0 34px rgba(255,45,79,.85)}
.kl-wand.refrain{box-shadow:0 0 0 6px #08060e,0 34px 80px rgba(0,0,0,.7),inset 0 0 110px rgba(255,45,79,.22)}

.kl-wandfuss{position:relative;z-index:5;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,245,228,.16)}
.kl-balken{height:6px;background:rgba(255,245,228,.14);overflow:hidden}
.kl-balken i{display:block;height:100%;width:0;transition:width .12s linear;
  background:linear-gradient(90deg,var(--kl-cyan),var(--kl-gold),var(--kl-rot))}
.kl-wandfuss .kl-zeile2{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:12px;font-family:var(--kl-kond);font-size:13px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:#8f7fae}
.kl-wandfuss .kl-zeile2 b{color:var(--kl-creme)}

.kl-steuerung{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.kl-mini{font-family:var(--kl-kond);font-size:15px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;background:transparent;border:1.5px solid rgba(255,245,228,.35);
  color:var(--kl-creme);padding:9px 18px;cursor:pointer;transition:.2s}
.kl-mini:hover{border-color:var(--kl-gold);color:var(--kl-gold)}
.kl-mini.an{background:var(--kl-gold);border-color:var(--kl-gold);color:#1a1000}
.kl-tastenhinweis{text-align:center;margin-top:14px;font-family:var(--kl-kond);font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:#6f6190}
.kl-tastenhinweis kbd{border:1px solid rgba(255,245,228,.3);padding:1px 7px;margin:0 3px;color:var(--kl-grau)}

/* Songauswahl auf der Karaoke-Seite */
.kl-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.kl-karte{display:grid;grid-template-columns:66px 1fr auto;gap:15px;align-items:center;text-align:left;
  background:rgba(255,245,228,.05);border:1px solid rgba(255,245,228,.16);padding:12px;cursor:pointer;
  transition:.25s;position:relative;overflow:hidden;color:inherit;font:inherit;width:100%}
.kl-karte::after{content:"";position:absolute;inset:0;opacity:0;transition:.25s;
  background:linear-gradient(90deg,rgba(255,203,43,.2),transparent 65%)}
.kl-karte:hover{border-color:var(--kl-gold);transform:translateY(-4px)}
.kl-karte:hover::after,.kl-karte.laeuft::after{opacity:1}
.kl-karte.laeuft{border-color:var(--kl-gold);background:rgba(255,203,43,.1)}
.kl-karte img{width:66px;height:66px;object-fit:cover;display:block;position:relative;z-index:2;transition:.25s}
.kl-karte:hover img{transform:scale(1.06)}
.kl-karte .kl-t{position:relative;z-index:2;min-width:0}
.kl-karte .kl-t b{display:block;font-family:var(--kl-anton);font-size:17px;text-transform:uppercase;line-height:1.15}
.kl-karte.laeuft .kl-t b{color:var(--kl-gold)}
.kl-karte .kl-t span{font-family:var(--kl-kond);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:#8f7fae}
.kl-karte .kl-z{position:relative;z-index:2;font-family:var(--kl-kond);font-size:13px;font-weight:800;
  letter-spacing:.1em;color:var(--kl-cyan);text-align:right;white-space:nowrap}
.kl-karte.laeuft .kl-z{color:var(--kl-gold)}
.kl-karte.laeuft .kl-z::before{content:"▶ "}

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */
.kl-fuss{border-top:1px solid rgba(255,245,228,.16);font-family:var(--kl-kond);font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:#7a6a95;text-align:center}
.kl-fuss a{color:var(--kl-grau);text-decoration:none}
.kl-fuss a:hover{color:var(--kl-gold)}

/* Social-Profile in der Fußzeile */
.kl-social{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.kl-social a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--kl-kond);font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid rgba(255,245,228,.28);color:var(--kl-creme);padding:10px 18px;transition:.22s}
.kl-social a:hover{border-color:var(--kl-gold);color:var(--kl-gold);transform:translateY(-3px)}
.kl-social svg{width:18px;height:18px;flex:none}

/* --------------------------------------------------------------------------
   Auftritt beim Scrollen
   -------------------------------------------------------------------------- */
.kl-auf{opacity:0;transform:translateY(52px)}
.kl-auf.da{opacity:1;transform:none;transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}

/* --------------------------------------------------------------------------
   Wer im System Bewegung reduziert hat, bekommt dieselbe Seite in Ruhe
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .kl-auf{opacity:1;transform:none}
}

/* Im Editor kein fixiertes Bühnenlicht – sonst verdeckt es die Werkzeuge */
.editor-styles-wrapper .kl-licht,
.editor-styles-wrapper .kl-nebel,
.editor-styles-wrapper .kl-menge{position:absolute}
.editor-styles-wrapper .kl-kopf{position:relative}
.editor-styles-wrapper .wp-site-blocks > *:first-child{padding-top:0}

@media(max-width:680px){
  .kl-song{grid-template-columns:auto auto 1fr;gap:12px}
  .kl-song .kl-rechts{grid-column:2/4;justify-self:start;flex-wrap:wrap}
  .kl-termin{grid-template-columns:88px 1fr;row-gap:12px}
  .kl-termin .kl-st{grid-column:2;justify-self:start}
}