/*
Theme Name: Kulturforum Plön
Theme URI: https://kulturforum-ploen.de
Description: 1:1-Umsetzung des abgenommenen Designs – Kulturforum Schwimmhalle Schloss Plön.
Author: Kulturforum Plön
Template: twentytwentyfive
Version: 1.57.2
Text Domain: kulturforum
*/

/* ---- WordPress-Reset, damit das Mockup volle Breite bekommt ---- */
.wp-site-blocks{max-width:none !important;padding:0 !important;margin:0 !important}
.wp-site-blocks>*{margin-block:0}
/* Header/Footer-Wrapper aus dem Layout nehmen, damit die Kopfzeile auch
   auf Unterseiten "sticky" bleibt (Wrapper sonst nur kopfzeilenhoch) */
.wp-site-blocks > .wp-block-template-part{display:contents}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
.entry-content,.is-layout-constrained{max-width:none}

/* ============================================================
   Kulturforum Schwimmhalle Schloss Plön – Design v2
   Elegant · historisch · warm
   Farben aus dem Gebäude: cremeweiße Fassade, terracotta Dächer,
   Gartengrün, Messing/Gold, warmes Anthrazit.
   ============================================================ */

:root{
  --ink:        #2b2520;   /* warmes Dunkelbraun-Anthrazit */
  --ink-soft:   #5d544c;
  --terracotta: #b15136;   /* Dachziegel-Rot */
  --terra-dk:   #8f3c26;
  --green:      #3c5142;   /* Gartengrün */
  --green-dk:   #2c3d31;
  --gold:       #b08b51;   /* Messing/Sandstein-Akzent */
  --cream:      #f7f1e6;   /* Fassaden-Creme (Hintergrund) */
  --cream-dk:   #efe6d6;
  --surface:    #fffdf9;
  --line:       #e4d9c5;
  --radius:     6px;
  --radius-lg:  14px;
  --shadow:     0 18px 40px -20px rgba(43,37,32,.4);
  --shadow-sm:  0 6px 18px -10px rgba(43,37,32,.35);
  --maxw:       1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);background:var(--cream);
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:.005em}
h1{font-size:clamp(2.8rem,6.5vw,5rem);font-weight:500}
h1 em{font-style:italic;color:#fff}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:1.45rem;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:italic}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;font-weight:600;
  color:var(--terracotta);margin-bottom:.7rem;font-family:'Inter',sans-serif}
.eyebrow-light{color:#f0d9b5}
.eyebrow-gold{color:var(--gold)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:.9rem 1.7rem;border-radius:100px;font-weight:600;
  font-size:.92rem;letter-spacing:.01em;transition:.22s ease;border:1.5px solid transparent;cursor:pointer}
.btn-sm{padding:.62rem 1.3rem;font-size:.86rem}
.btn-primary{background:var(--terracotta);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--terra-dk);transform:translateY(-2px)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.section-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.section-dark .btn-ghost:hover{background:#fff;color:var(--green-dk)}

.link-more{color:var(--terracotta);font-weight:600;font-size:.9rem;letter-spacing:.01em}
.link-more:hover{color:var(--terra-dk)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;
  background:rgba(247,241,230,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:flex-end;gap:.7rem}
.brand-mark-img{height:68px;width:auto}
.brand-mark{color:var(--terracotta);display:flex}
.brand-text{display:flex;flex-direction:column;line-height:1.04;padding-bottom:6px}
.brand-text strong{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;letter-spacing:.01em}
.brand-text small{font-size:.7rem;color:var(--ink-soft);letter-spacing:.16em;text-transform:uppercase}

.main-nav{display:flex;align-items:center;gap:1.7rem}
.main-nav a{font-size:.93rem;font-weight:500;color:var(--ink-soft);transition:.15s;position:relative}
.main-nav a:not(.nav-cta):hover{color:var(--ink)}
.main-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--terracotta);transform:scaleX(0);transition:.2s;transform-origin:left}
.main-nav a:not(.nav-cta):hover::after{transform:scaleX(1)}
.main-nav .nav-cta{background:var(--terracotta);color:#fff;padding:.6rem 1.2rem;border-radius:100px}
.main-nav .nav-cta:hover{background:var(--terra-dk)}
.nav-toggle,.nav-burger{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;min-height:min(86vh,720px);display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,22,16,.78) 0%,rgba(28,22,16,.45) 55%,rgba(28,22,16,.25) 100%),
             linear-gradient(180deg,rgba(28,22,16,.2),rgba(28,22,16,.55))}
.hero-inner{position:relative;padding:5rem 24px}
.hero h1{max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero .lead{max-width:44ch;font-size:clamp(1.1rem,1.8vw,1.32rem);margin:1.5rem 0 2.3rem;
  color:rgba(255,255,255,.92);font-weight:400}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.hero .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---------- Intro ---------- */
.intro{padding:clamp(3.5rem,8vw,5.5rem) 24px;text-align:center}
.intro .ornament{display:block;color:var(--gold);font-size:2rem;margin-bottom:1rem}
.intro p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:400;
  line-height:1.35;max-width:24ch;margin-inline:auto}
.intro strong{color:var(--terracotta);font-weight:600;font-style:italic}

/* ---------- Sections ---------- */
.section{padding:clamp(4rem,9vw,6.5rem) 0}
.section-alt{background:var(--surface)}
.section-dark{background:var(--green-dk);color:#fff}
.section-dark p{color:rgba(255,255,255,.85)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2.8rem;flex-wrap:wrap}

/* ---------- Events ---------- */
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.event-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;transition:.22s ease;box-shadow:var(--shadow-sm)}
.event-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold)}
.event-date{flex:0 0 84px;background:var(--terracotta);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.event-date .day{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:600;line-height:1}
.event-date .mon{text-transform:uppercase;font-size:.7rem;letter-spacing:.14em;margin-top:.2rem}
.event-body{padding:1.4rem 1.5rem}
.tag{display:inline-block;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  padding:.28rem .7rem;border-radius:100px;margin-bottom:.8rem}
.tag-concert{background:#f3e3dd;color:var(--terra-dk)}
.tag-talk{background:#eae3d2;color:#7a5e2e}
.tag-expo{background:#e1e8df;color:var(--green-dk)}
.event-body h3{margin-bottom:.45rem;line-height:1.2}
.event-meta{font-size:.84rem;color:var(--ink-soft);margin-bottom:.6rem;font-weight:500}
.event-desc{font-size:.93rem;margin-bottom:.95rem;color:var(--ink-soft)}
.placeholder-note{margin-top:1.6rem;font-size:.82rem;color:var(--ink-soft);font-style:italic;text-align:center}

/* ---------- Split layout ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split-text h2{margin-bottom:1.1rem}
.split-text p{margin-bottom:1.5rem;color:var(--ink-soft)}
.section-dark .split-text p{color:rgba(255,255,255,.85)}
.split-media{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split-media.drawing{background:#fff;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.split-media.drawing img{aspect-ratio:auto;object-fit:contain;padding:1.5rem 1.5rem .5rem}
.split-media figcaption{font-size:.8rem;color:var(--ink-soft);text-align:center;padding:0 0 1rem;font-style:italic}

.timeline{list-style:none;margin:0 0 1.8rem}
.timeline li{padding:.7rem 0;border-top:1px solid var(--line);display:flex;gap:1.2rem;font-size:.97rem}
.timeline li span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;
  font-weight:600;color:var(--terracotta);min-width:80px}

.feature-list{list-style:none;margin:0 0 2rem;display:grid;gap:.7rem}
.feature-list li{padding-left:1.9rem;position:relative;color:rgba(255,255,255,.92)}
.feature-list li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:230px;gap:1rem}
.gallery figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .g1{grid-row:span 2}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--terracotta),var(--terra-dk));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(2.4rem,5vw,3.8rem);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-band h2{margin:.3rem 0 .7rem}
.cta-band p{color:rgba(255,255,255,.9);max-width:46ch}
.cta-band .eyebrow-gold{color:#f4ddb9}
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap}
.cta-band .btn-primary{background:#fff;color:var(--terra-dk)}
.cta-band .btn-primary:hover{background:var(--cream)}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.cta-band .btn-ghost:hover{background:#fff;color:var(--terra-dk)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.78);padding-top:clamp(3.5rem,6vw,5rem)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.2rem;padding-bottom:2.8rem}
.footer-brand strong{color:#fff;font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600}
.footer-brand small{color:var(--gold);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;display:block}
.footer-note{margin-top:.9rem;font-size:.9rem;max-width:32ch;line-height:1.6}
.site-footer h4{color:#fff;font-family:'Inter',sans-serif;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.16em;margin-bottom:1.1rem}
.site-footer a{display:block;color:rgba(255,255,255,.7);font-size:.92rem;padding:.2rem 0;transition:.15s}
.site-footer a:hover{color:var(--gold)}
.footer-grid p{font-size:.92rem;margin-bottom:.5rem}

.newsletter{margin-top:.9rem}
.newsletter-zeile{display:flex;gap:.5rem;margin-bottom:.7rem}
.newsletter-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem;line-height:1.45;
  color:rgba(255,255,255,.62);margin-bottom:.45rem;cursor:pointer}
.newsletter-check input{flex:none;width:15px;height:15px;margin:.15rem 0 0;padding:0;accent-color:var(--gold)}
.site-footer .newsletter-check a{display:inline;padding:0;font-size:inherit;text-decoration:underline}
.newsletter input[type=email]{flex:1;min-width:0;padding:.65rem .85rem;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);border-radius:6px;color:#fff;font-size:.9rem}
.newsletter input::placeholder{color:rgba(255,255,255,.5)}
.newsletter button{background:var(--gold);color:var(--ink);border:none;padding:.65rem 1.1rem;
  border-radius:6px;font-weight:600;cursor:pointer;font-size:.9rem;white-space:nowrap}
.newsletter button:hover{background:#c79e63}

.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;
  padding:1.6rem 24px;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;color:rgba(255,255,255,.55)}
.footer-legal a{display:inline}
.footer-legal a:hover{color:var(--gold)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split-media{order:-1}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .gallery .g1{grid-column:span 2;grid-row:span 1}
  .footer-grid{grid-template-columns:1fr 1fr}

  .brand-mark-img{height:50px}
  .brand-text small{display:none}
  .nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:60}
  .nav-burger span{width:24px;height:2px;background:var(--ink);transition:.2s}
  .main-nav{position:fixed;inset:80px 0 auto 0;background:var(--cream);flex-direction:column;
    align-items:flex-start;gap:0;padding:1rem 24px 2rem;border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:.28s ease;box-shadow:var(--shadow)}
  .main-nav a{padding:.95rem 0;width:100%;border-bottom:1px solid var(--line);font-size:1.05rem}
  .main-nav .nav-cta{margin-top:.9rem;width:auto;border-bottom:none}
  .nav-toggle:checked ~ .main-nav{transform:translateY(0)}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
  .event-card{flex-direction:column}
  .event-date{flex-direction:row;gap:.6rem;padding:.7rem;flex-basis:auto}
  .gallery{grid-template-columns:1fr}
  .gallery .g1{grid-column:span 1}
}

/* ============================================================
   VERANSTALTUNGS-DETAILSEITE
   ============================================================ */
.event-hero{position:relative;color:#fff;overflow:hidden}
.event-hero-media{position:absolute;inset:0;background-size:cover;background-position:center}
.event-hero-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,22,16,.45),rgba(28,22,16,.82))}
.event-hero-inner{position:relative;padding:clamp(2.5rem,6vw,4rem) 24px clamp(2.5rem,5vw,3.2rem)}
.event-hero h1{max-width:20ch;margin:.6rem 0 .8rem;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.event-hero-meta{font-size:1.05rem;color:rgba(255,255,255,.9);font-weight:500}
.event-hero .tag{background:rgba(255,255,255,.92);color:var(--terra-dk)}

.breadcrumb{font-size:.84rem;color:rgba(255,255,255,.8);margin-bottom:1.1rem}
.breadcrumb a{color:rgba(255,255,255,.8)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{margin:0 .35rem;opacity:.6}

.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:clamp(2rem,5vw,4rem);align-items:start}
.detail-main .lead-text{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.4;color:var(--ink);margin-bottom:1.4rem}
.detail-main p{color:var(--ink-soft);margin-bottom:1.2rem}
.detail-main h3{margin:2rem 0 .9rem;color:var(--ink)}
.program-list{list-style:none;margin:0 0 1rem;display:grid;gap:.7rem}
.program-list li{padding-left:1.5rem;position:relative;color:var(--ink-soft)}
.program-list li::before{content:"♪";position:absolute;left:0;color:var(--terracotta)}
.program-list strong{color:var(--ink)}

.info-rows{display:grid;gap:0}
.info-row{display:grid;grid-template-columns:130px 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line)}
.info-row span{font-weight:600;color:var(--ink);font-size:.9rem}
.info-row p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* Ticket-Box */
.ticket-box{position:sticky;top:100px;display:grid;gap:1rem}
/* Auf Veranstaltungsseiten hängt darüber der schmale Klebe-Balken – die Box
   muss also unter Kopfleiste UND Balken einrasten, mit etwas Luft dazwischen. */
.tribe-events-single .ticket-box{
  top:calc(var(--kf-kopfleiste) + var(--kf-minikopf) + 1.5rem);
}
.ticket-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem;box-shadow:var(--shadow)}
.ticket-status{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;
  color:var(--green);margin-bottom:1.2rem}
.ticket-status .dot{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(60,81,66,.15)}
.ticket-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-top:1px solid var(--line)}
.ticket-row:first-of-type{border-top:none}
.ticket-row strong{display:block;font-size:1rem}
.ticket-row small{color:var(--ink-soft);font-size:.82rem}
.ticket-price{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--terracotta)}

.ticket-qty{display:flex;align-items:center;justify-content:space-between;margin:1.1rem 0;
  padding-top:1.1rem;border-top:1px solid var(--line)}
.ticket-qty label{font-size:.9rem;font-weight:500}
.qty-control{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden}
.qty-control button{width:38px;height:38px;border:none;background:var(--cream);font-size:1.2rem;
  cursor:pointer;color:var(--ink);transition:.15s}
.qty-control button:hover{background:var(--cream-dk)}
.qty-control input{width:42px;text-align:center;border:none;font-size:1rem;font-weight:600;background:none}

.ticket-btn{width:100%;text-align:center;margin-bottom:.9rem}
.ticket-pay{font-size:.8rem;color:var(--ink-soft);text-align:center;margin-bottom:.3rem}
.ticket-pay.secure{font-size:.74rem;opacity:.85}

.ticket-aside-note{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.1rem 1.3rem}
.ticket-aside-note strong{display:block;margin-bottom:.3rem;font-size:.92rem}
.ticket-aside-note p{font-size:.86rem;color:var(--ink-soft);margin:0}
.ticket-aside-note a{color:var(--terracotta);font-weight:600}

@media (max-width:860px){
  .detail-grid{grid-template-columns:1fr}
  .ticket-box{position:static;order:-1}
}

/* ===== Kommende Veranstaltungen – Karten mit Datums-Kopfbalken (gleich hoch) ===== */
.events-grid--clean{align-items:stretch}
.events-grid--clean .event-card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0;
  background:var(--surface);
}
.events-grid--clean .event-card:hover{transform:translateY(-5px)}
/* brauner Datums-Balken oben */
.event-datebar{
  background:var(--terracotta);
  color:#fff;
  padding:.8rem 1.7rem;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.02em;
}
.event-cardbody{
  padding:1.4rem 1.7rem 0;
}
.events-grid--clean .event-cat{margin-bottom:.95rem;line-height:1}
.events-grid--clean .event-card h3{
  font-size:1.3rem;line-height:1.25;margin-bottom:.7rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.events-grid--clean .event-card h3 a{color:var(--ink);transition:.15s}
.events-grid--clean .event-card h3 a:hover{color:var(--terracotta)}
.events-grid--clean .event-price{
  font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;
  color:var(--ink);margin-bottom:.4rem;
}
/* CTA-Zeile ist direktes Block-Kind der Karte -> klebt zuverlässig unten rechts */
.events-grid--clean .event-cta{
  margin-top:auto;
  padding:.6rem 1.7rem 1.7rem;
  text-align:right;
}

/* ===== Kalender-Liste: deutsche numerische Datums-Kachel (TT.MM) ===== */
/* Kachel oben ausrichten (horizontal zentriert, vertikal nach oben) */
.tribe-events-calendar-list__event-date-tag{align-self:flex-start !important}
/* Die Kachel steht in Cormorant mit Mediävalziffern (die 3 hat eine Unterlänge),
   die Uhrzeit daneben in Inter. Dadurch lagen die Grundlinien 5 px auseinander –
   hier optisch ausgeglichen. */
.tribe-events-calendar-list__event-date-tag-datetime{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;line-height:1.1;
  padding-top:0;margin-top:-5px;
}
.kf-datetag-start,.kf-datetag-end{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.25rem;
  color:var(--ink);white-space:nowrap;
}
.kf-datetag-sep{color:var(--terracotta);font-size:.8rem;line-height:1;margin:1px 0}

/* ===== Single-Event-Seite (Mockup-Design) ===== */
.tribe-events-single{max-width:none !important;margin:0 !important;padding:0 !important}
.tribe-events-single .tribe-events-back{display:none}
/* Hero & Sektionen über die volle Breite ausbrechen */
.tribe-events-single .event-hero,
.tribe-events-single .event-detail,
.tribe-events-single .section-alt{
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
}
.tribe-events-single .tribe-events-single-event-description{margin-bottom:1.5rem}
/* Weiter-Navigation */
.kf-event-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.kf-event-nav a{color:var(--terracotta);font-weight:600;text-decoration:none}
.kf-event-nav a:hover{color:var(--terra-dk)}
.kf-event-nav .btn-ghost{color:var(--ink)}
.kf-event-nav .kf-nav-next{text-align:right}

/* Abstand zwischen Menü und Hero entfernen (TEC-Wrapper-Padding) */
#tribe-events-pg-template,
.tribe-events-pg-template{
  padding:0 !important;max-width:none !important;background:transparent !important;margin:0 !important;
}

/* ===== Detailseite: Freiräume reduzieren (Hero bleibt) ===== */
.tribe-events-single .event-detail{padding-top:2.6rem !important;padding-bottom:2.8rem !important}
.tribe-events-single .section-alt{padding-top:2.8rem !important;padding-bottom:3.2rem !important}
.tribe-events-single .detail-main h3{margin-top:1.4rem;margin-bottom:.7rem}
.tribe-events-single .section-head{margin-bottom:1.8rem}
.tribe-events-single .tribe-events-single-event-description{margin-bottom:1rem}

/* Add-to-Calendar-Button über der Buchungsbox */
.tribe-events-single .kf-addcal{margin-bottom:0}
.tribe-events-single .kf-addcal .tribe-events-c-subscribe-dropdown__container{width:100%}

/* Add-to-Calendar-Button zentrieren */
.tribe-events-single .kf-addcal{display:flex;justify-content:center}
.tribe-events-single .kf-addcal .tribe-events-c-subscribe-dropdown__container{width:auto;margin:0 auto}

/* Kalender-Button bündig zur ersten Textzeile (TEC-margin-top entfernen) */
.tribe-events-single .kf-addcal .tribe-events-c-subscribe-dropdown{margin-top:0 !important}
.tribe-events-single .kf-addcal .tribe-events-c-subscribe-dropdown__container{height:auto}

/* Kalender-Button rechtsbündig */
.tribe-events-single .kf-addcal{justify-content:flex-end}
.tribe-events-single .kf-addcal .tribe-events-c-subscribe-dropdown__container{margin:0}

/* ===== Inhaltsseiten – modernes Artikel-Layout (z. B. Geschichte) ===== */
.kf-page-hero .event-hero-inner{padding-top:clamp(3.5rem,9vw,6rem);padding-bottom:clamp(3.5rem,9vw,6rem)}
.kf-article{padding-top:clamp(2.6rem,6vw,4rem)!important;padding-bottom:clamp(3rem,7vw,5rem)!important}
.kf-article p{margin-bottom:1.2rem;font-size:1.06rem;color:var(--ink)}
.kf-article .kf-lead{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.35rem,2.6vw,1.85rem);
  line-height:1.4;font-weight:500;color:var(--ink);margin-bottom:1.7rem}
.kf-article .kf-figure{margin:2.2rem 0}
.kf-article .kf-figure img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.kf-article .kf-figure figcaption{font-size:.85rem;color:var(--ink-soft);font-style:italic;text-align:center;margin-top:.6rem}
.kf-article .timeline{margin-top:2.2rem}

/* Kleine, elegante Architekturzeichnung (statt riesig) */
.kf-article .kf-figure--small{max-width:330px;margin:2rem auto}
.kf-article .kf-figure--small img{border:1px solid var(--line);background:#fff;padding:.4rem;box-shadow:var(--shadow-sm)}

/* Geschichte im Joomla-Stil: Foto links, Text umfließt */
.kf-article .kf-figure--left{float:left;max-width:340px;margin:.4rem 1.9rem 1rem 0}
.kf-article .kf-figure--left img{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
@media(max-width:640px){.kf-article .kf-figure--left{float:none;max-width:100%;margin:0 0 1.4rem}}

/* Geschichte-Seite: gleiches Spalten-Layout/Ränder wie Hauptseite */
.kf-geschichte{grid-template-columns:.85fr 1.15fr;align-items:start;gap:clamp(2rem,4vw,3.5rem)}
.kf-geschichte .split-text h1{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:1.1rem}
.kf-geschichte .split-text p{margin-bottom:1.1rem;color:var(--ink)}
.kf-geschichte .split-media img{aspect-ratio:4/3}
@media(max-width:760px){.kf-geschichte{grid-template-columns:1fr}}

/* Geschichte: Bild links, Text umfließt & läuft darunter über volle Breite */
.kf-history h1{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:1.4rem}
.kf-history p{margin-bottom:1.2rem;font-size:1.06rem;color:var(--ink)}
.kf-figure--float{float:left;width:min(420px,44%);height:auto;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);border:1px solid var(--line);margin:.3rem 2rem 1.1rem 0}
@media(max-width:640px){.kf-figure--float{float:none;width:100%;margin:0 0 1.4rem}}

/* Lightbox */
.gallery img,.split-media img,.kf-figure img,.kf-history img,.kf-article img,img.kf-zoom{cursor:zoom-in}
.kf-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(28,22,16,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .25s ease;cursor:zoom-out;padding:4vw}
.kf-lightbox.is-open{opacity:1}
.kf-lightbox img{max-width:92vw;max-height:90vh;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.55);
  transform:scale(.95);transition:transform .25s ease}
.kf-lightbox.is-open img{transform:scale(1)}

/* ============================================================
   INHALTSSEITEN – einheitliches System (.kf-page)
   ============================================================ */
.kf-page > h1.wp-block-post-title{font-size:clamp(2rem,4.5vw,3rem)}
.kf-page p{margin-bottom:1.15rem;font-size:1.06rem;color:var(--ink)}
.kf-page h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.2rem 0 1rem}
.kf-page h3{font-size:1.3rem;margin:1.6rem 0 .6rem}
.kf-page a:not(.btn):not(.kf-dl,.wp-block-button__link){color:var(--terracotta);font-weight:500}
.kf-page a:not(.btn):not(.kf-dl,.wp-block-button__link):hover{color:var(--terra-dk)}
/* Lesbare Zeilenlänge für reine Textseiten (Impressum/Datenschutz) */
.kf-page--text p, .kf-page--text ul, .kf-page--text h2, .kf-page--text h3{max-width:70ch}
.kf-page--text h2{font-size:1.4rem}

/* Umfluss-Bild (links, Text fließt + läuft darunter weiter) */
.kf-figure--float{float:left;width:min(420px,44%);height:auto;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);border:1px solid var(--line);margin:.3rem 2rem 1.1rem 0}
.kf-figure--float.right{float:right;margin:.3rem 0 1.1rem 2rem}
@media(max-width:640px){.kf-figure--float,.kf-figure--float.right{float:none;width:100%;margin:0 0 1.4rem}}

/* Themen-Liste (Träger-Aktivitäten) */
.kf-list{list-style:none;margin:1.2rem 0 1.6rem;display:grid;gap:.7rem;clear:none}
.kf-list li{padding-left:1.7rem;position:relative;color:var(--ink)}
.kf-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--terracotta)}
.kf-list strong{color:var(--ink)}

/* Ausstattungs-Kacheln */
.kf-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.6rem 0 2rem;clear:both}
.kf-feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm)}
.kf-feature strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--terracotta);line-height:1;margin-bottom:.35rem}
.kf-feature span{font-size:.95rem;color:var(--ink-soft)}

/* Download-Buttons (PDF) */
.kf-downloads{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.4rem 0 2rem;clear:both}
.kf-dl{display:inline-flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--line);
  border-radius:100px;padding:.7rem 1.3rem;font-weight:600;color:var(--ink)!important;transition:.18s;box-shadow:var(--shadow-sm)}
.kf-dl:hover{border-color:var(--terracotta);color:var(--terracotta)!important;transform:translateY(-2px)}
.kf-dl::before{content:"⬇";color:var(--terracotta);font-size:.95rem}

/* Galerie auf Inhaltsseiten */
.kf-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin:1.4rem 0;clear:both}
.kf-gallery figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--surface)}
.kf-gallery img{width:100%;height:200px;object-fit:cover;display:block}
.kf-gallery figcaption{font-size:.82rem;color:var(--ink-soft);padding:.6rem .8rem;font-style:italic}

/* Kontakt-Karten + Karte */
.kf-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin:1.5rem 0 2.2rem;clear:both}
.kf-contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm)}
.kf-contact-card h3{margin:.2rem 0 .5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--terracotta);font-family:'Inter',sans-serif}
.kf-contact-card p{margin:0;font-size:1rem}
.kf-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);margin-top:.5rem}
.kf-map iframe{display:block;width:100%;height:380px;border:0}

/* zugeklappte Nutzungsregelung */
.kf-details{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:.4rem 1.3rem;margin:1.6rem 0;clear:both}
.kf-details summary{cursor:pointer;font-weight:600;padding:.9rem 0;font-size:1.05rem;color:var(--ink)}
.kf-details summary::marker{color:var(--terracotta)}
.kf-details[open] summary{border-bottom:1px solid var(--line);margin-bottom:1rem}
.kf-details h4{font-weight:600;margin:1.1rem 0 .3rem;color:var(--ink)}
.kf-details p{font-size:.97rem;color:var(--ink-soft);margin-bottom:.8rem}
.kf-details p.kf-details-stand{font-size:.88rem;font-style:italic;margin-bottom:1.1rem}

/* Leaflet-Karte */
#kf-map{height:380px;width:100%;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);z-index:0}
.leaflet-container{font-family:'Inter',sans-serif}

/* Inhaltsseiten: ausgewogene Bild-Text-Blöcke (.kf-split) */
.kf-page .kf-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;margin:1.5rem 0 2.5rem}
.kf-page .kf-split img{width:100%;height:100%;max-height:360px;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.kf-page .kf-split .kf-split-text p{margin-bottom:1rem}
.kf-page .kf-split .kf-split-text :last-child{margin-bottom:0}
@media(max-width:760px){.kf-page .kf-split{grid-template-columns:1fr}.kf-page .kf-split.rev .kf-split-media{order:-1}}

/* Aktivitäts-Karten */
.kf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;margin:1.4rem 0 2.4rem}
.kf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm);transition:.2s ease}
.kf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
.kf-card h3{margin:0 0 .45rem;font-size:1.18rem;color:var(--ink)}
.kf-card p{margin:0;font-size:.96rem;color:var(--ink-soft);line-height:1.6}

/* CTA-Band auf Inhaltsseiten (nutzt Homepage-.cta-band, hier nur Abstand) */
.kf-page .cta-band{margin-top:1rem}

/* Karte: Klick-zum-Laden (Privacy) */
#kf-map{position:relative}
#kf-map:not(.is-loaded){display:flex;align-items:center;justify-content:center;background:var(--cream-dk);
  background-image:linear-gradient(135deg,#e9e0cf 25%,transparent 25%,transparent 50%,#e9e0cf 50%,#e9e0cf 75%,transparent 75%,transparent);
  background-size:24px 24px}
.kf-map-consent-inner{text-align:center;max-width:420px;padding:1.5rem}
.kf-map-consent-inner p{font-size:.92rem;color:var(--ink-soft);margin-bottom:1rem}

/* Einwilligungs-Banner (assets/kf-consent.js). „Nur notwendige" und „Alle akzeptieren"
   sehen bewusst gleich aus – keine Wahl darf hervorgehoben sein. */
.kf-consent{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--ink);color:#fff;
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .3s ease}
.kf-consent.is-open{transform:translateY(0)}
.kf-consent-inner{max-width:var(--maxw);margin:0 auto;padding:1.1rem 24px;display:flex;align-items:center;
  gap:.9rem 1.6rem;flex-wrap:wrap}
.kf-consent-text{flex:1 1 420px;margin:0;font-size:.9rem;color:rgba(255,255,255,.85);line-height:1.55}
.kf-consent-text a{color:var(--gold);text-decoration:underline}
.kf-consent-wahl{flex:1 1 100%;order:2;display:grid;gap:.55rem;padding:.8rem 0 .2rem;border-top:1px solid rgba(255,255,255,.14)}
.kf-consent-wahl[hidden]{display:none}
.kf-consent-opt{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.8);cursor:pointer}
.kf-consent-opt strong{color:#fff}
.kf-consent-opt input{flex:none;width:17px;height:17px;margin:.15rem 0 0;accent-color:var(--gold)}
.kf-consent-knoepfe{order:3;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.kf-consent-btn{background:#fff;color:var(--ink);border:none;border-radius:100px;padding:.7rem 1.3rem;
  font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap}
.kf-consent-btn:hover{background:var(--cream-dk)}
.kf-consent-btn[hidden],.kf-consent-link[hidden]{display:none}
.kf-consent-link{background:none;border:none;color:rgba(255,255,255,.8);text-decoration:underline;
  font-size:.88rem;cursor:pointer;padding:.5rem .3rem}
.kf-consent-link:hover{color:var(--gold)}
.kf-consent button:focus-visible,.kf-consent input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:600px){
  .kf-consent-inner{padding:1rem 16px}
  .kf-consent-btn{flex:1 1 auto}
}
/* Karte vor der Zustimmung */
.kf-map-immer{display:flex;gap:.45rem;align-items:center;justify-content:center;margin-top:.8rem;
  font-size:.85rem;color:var(--ink-soft);cursor:pointer}
.kf-map-immer input{accent-color:var(--terracotta)}

/* Kontakt-Karte mit mehreren Angaben (Telefon/E-Mail/Bank) sauber gegliedert */
.kf-contact-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.kf-crow{padding:.55rem 0;border-top:1px solid var(--line)}
.kf-crow:first-of-type{border-top:none;padding-top:.2rem}
.kf-crow-label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;
  font-weight:600;color:var(--ink-soft);margin-bottom:.15rem}
.kf-crow-val{font-size:1rem;color:var(--ink)}
.kf-crow-val a{color:var(--terracotta);font-weight:500}
.kf-contact-card .kf-iban{font-size:.92rem;letter-spacing:.01em}

/* Kontakt-Karten: Icon-Badge + edle Ausrichtung */
.kf-contact-card{display:flex;flex-direction:column}
.kf-contact-icon{width:48px;height:48px;border-radius:50%;background:#f3e3dd;color:var(--terracotta);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.kf-contact-icon svg{width:24px;height:24px;fill:currentColor;display:block}
.kf-contact-card h3{margin-top:0}
.kf-contact-card > p{color:var(--ink);line-height:1.7}

/* Ausstattungs-Kacheln: Icon-Badge */
.kf-feature-icon{width:44px;height:44px;border-radius:50%;background:#f3e3dd;color:var(--terracotta);
  display:flex;align-items:center;justify-content:center;margin-bottom:.85rem}
.kf-feature-icon svg{width:23px;height:23px;fill:currentColor;display:block}

/* Anker-Sprünge (#geschichte etc.) nicht hinter der fixen Menüleiste */
html{scroll-padding-top:96px}

/* ===== Galerie v2 (Startseite) – Masonry + Hover-Beschriftung ===== */
.gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:215px}
.gallery .g1{grid-row:auto;grid-column:span 2}
.gallery .g6{grid-column:span 2}
.gallery figure{position:relative}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .95rem .8rem;
  color:#fff;font-size:.86rem;font-weight:500;letter-spacing:.01em;
  background:linear-gradient(transparent,rgba(28,22,16,.8));opacity:0;transform:translateY(6px);
  transition:.3s ease;pointer-events:none}
.gallery figure:hover figcaption{opacity:1;transform:translateY(0)}
@media(max-width:760px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:185px}
  .gallery .g1,.gallery .g6{grid-column:span 2}
}
@media(max-width:520px){
  .gallery{grid-template-columns:1fr}
  .gallery .g1,.gallery .g6{grid-column:span 1}
}

/* ===== Sektion „Barrierefreier Zugang" (Brücke) ===== */
.zugang-text{max-width:62ch;font-size:1.06rem;color:var(--ink);margin-bottom:.4rem}
.gallery3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem}
.gallery3 figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.gallery3 img{width:100%;height:270px;object-fit:cover;display:block}
@media(max-width:760px){.gallery3{grid-template-columns:1fr;gap:.8rem}.gallery3 img{height:240px}}

/* ============================================================
   BARRIEREFREIHEIT (Web-Accessibility)
   ============================================================ */
/* Sichtbarer Tastatur-Fokus für alle interaktiven Elemente */
/* Ohne JavaScript bleibt es bei `:focus-visible` – siehe Regeln weiter unten
   für das Zusammenspiel mit assets/kf-fokus.js. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
.wp-block-button__link:focus-visible, .nav-burger:focus-within{
  outline:3px solid var(--terracotta);
  outline-offset:3px;
  border-radius:3px;
}
.section-dark a:focus-visible, .hero a:focus-visible, .cta-band a:focus-visible{outline-color:#fff}

/* Skip-Link: mit Tab springt man direkt zum Inhalt */
.kf-skip{position:absolute;left:8px;top:-60px;z-index:10001;background:var(--ink);color:#fff;
  padding:.7rem 1.2rem;border-radius:0 0 8px 8px;font-weight:600;transition:top .15s}
.kf-skip:focus{top:0}

/* Rücksicht auf „Bewegung reduzieren"-Einstellung des Nutzers */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Bilder im Veranstaltungs-Text */
.detail-main .event-figure{margin:1.6rem 0;max-width:460px}
.detail-main .event-figure img{width:100%;height:auto;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);border:1px solid var(--line);cursor:zoom-in;display:block}

/* Bildausrichtung je Veranstaltung – wie auf der alten Seite bewusst
   unterschiedlich: mal links umflossen, mal rechts, mal als Block. */
.detail-main .event-figure--left,
.detail-main .event-figure--right{width:min(320px,40%);max-width:none;margin-bottom:1.2rem}
.detail-main .event-figure--left {float:left; margin:.3rem 1.9rem 1.2rem 0}
.detail-main .event-figure--right{float:right;margin:.3rem 0 1.2rem 1.9rem}

/* Hochformat schmaler halten, sonst drückt es den Text zu weit nach unten */
.detail-main .event-figure--schmal{width:min(240px,32%)}
/* Block über die halbe Spalte, mittig ist unruhig – bleibt linksbündig */
.detail-main .event-figure--breit{max-width:460px;margin:1.6rem 0}

/* Meta-Zeilen und Folgebilder nie neben das Bild rutschen lassen */
.detail-main .event-organizer,
.detail-main .event-figure--left ~ .event-figure,
.detail-main .event-figure--right ~ .event-figure{clear:both}

@media(max-width:760px){
  .detail-main .event-figure--left,
  .detail-main .event-figure--right,
  .detail-main .event-figure--schmal{float:none;width:100%;margin:1.4rem 0}
}

/* ============================================================
   Status „Abgesagt“ / „Verschoben“ (The Events Calendar)
   TECs Standard ist Signalrot #DA394D – hier auf die Hausfarben umgezogen.

   ACHTUNG Spezifität: TEC stylt mit `.tribe-events-single …` bzw.
   `.tribe-events …` (je zwei Klassen) und sein Stylesheet lädt NACH dem
   Theme. Bei Gleichstand gewinnt also TEC. Alle Regeln hier brauchen
   deshalb drei Klassen.
   ============================================================ */

/* --- Hinweiskasten auf der Einzelseite --- */
.tribe-events-single .detail-main .tribe-events-status-single-notice{
  display:block;width:100%;margin:0 0 1.6rem;
}
/* volle Spaltenbreite – sonst schrumpft der Kasten auf die Textlänge */
.tribe-events-single .detail-main .tribe-events-status-single{
  display:block;width:100%;
  border:1px solid var(--line);
  border-left:5px solid var(--terracotta);
  border-radius:var(--radius);
  background:var(--cream);
  padding:1rem 1.2rem;
  font-size:1rem;
}
.tribe-events-single .detail-main .tribe-events-status-single--canceled{border-left-color:var(--ink)}

.tribe-events-single .detail-main .tribe-events-status-single__header{
  color:var(--terra-dk);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.35rem;line-height:1.25;letter-spacing:.01em;
}
.tribe-events-single .detail-main .tribe-events-status-single--canceled .tribe-events-status-single__header{color:var(--ink)}

/* TECs rotes Warndreieck (SVG) durch ein schlichtes Zeichen im Hausstil ersetzen */
.tribe-events-single .detail-main .tribe-events-status-single__header--alert-icon:before{
  background:var(--terracotta);background-image:none;
  content:"!";color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;min-width:1.5rem;height:1.5rem;
  margin-right:.6rem;border-radius:50%;
  font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700;line-height:1;
}
.tribe-events-single .detail-main .tribe-events-status-single--canceled .tribe-events-status-single__header--alert-icon:before{
  background:var(--ink);content:"\00d7";font-size:1.1rem;
}
/* Hinweis: Die äußere Kopfzeile umschließt die innere (gleiche Klasse) und die
   Beschreibung. Den Kreis zeichnet nur `--alert-icon`, also die innere. */

.tribe-events-single .detail-main .tribe-events-status-single__description{
  color:var(--ink-soft);margin-top:.45rem;line-height:1.6;
  font-family:'Inter',sans-serif;font-size:.95rem;
}

/* --- Label in Kalenderliste, Monatsansicht und auf Karten ---
   Das Label steckt im Markup INNERHALB der Titel-Überschrift. Deshalb als
   eigene Zeile darüber setzen, sonst schiebt es den Titel um. */
.tribe-events .tribe-events-status-label,
.tribe-events-status-label{display:block;margin:0 0 .5rem}
.tribe-events .tribe-events-status-label .tribe-events-status-label__text,
.tribe-events-status-label .tribe-events-status-label__text{
  display:inline-block;padding:.22rem .7rem;
  border-radius:999px;background:var(--terracotta);color:#fff;
  font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.6;
}
.tribe-events .tribe-events-status-label .tribe-events-status-label__text--canceled,
.tribe-events-status-label .tribe-events-status-label__text--canceled{background:var(--ink)}

/* Veranstalter-/Kontaktzeile am Ende einer Veranstaltungsbeschreibung.
   Steht als eigener Absatz, damit sie nicht in den Fließtext läuft. */
.detail-main .event-organizer{
  margin-top:1.4rem;padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:.9rem;line-height:1.55;color:var(--ink-soft);
}
/* mehrere Meta-Zeilen hintereinander: nur die erste bekommt die Trennlinie */
.detail-main .event-organizer + .event-organizer{
  margin-top:.15rem;padding-top:0;border-top:0;
}

/* ============================================================
   Vollständiger Veranstaltungstext in der Kalender-Liste
   (Template-Override tribe/events/v2/list/event/description.php)
   Spiegelt das Layout der Einzelseite, nur etwas kompakter.
   ============================================================ */
.kf-list-text{margin-top:.9rem;overflow:hidden}
.kf-list-text p{margin:0 0 .9rem;line-height:1.65}
.kf-list-text p:last-child{margin-bottom:0}

/* Bildausrichtung wie auf der Einzelseite, nur schmaler */
.kf-list-text .event-figure{margin:.2rem 0 1rem;max-width:420px}
.kf-list-text .event-figure img{width:100%;height:auto;display:block;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.kf-list-text .event-figure--left,
.kf-list-text .event-figure--right{width:min(280px,38%);max-width:none}
.kf-list-text .event-figure--left {float:left; margin:.2rem 1.5rem 1rem 0}
.kf-list-text .event-figure--right{float:right;margin:.2rem 0 1rem 1.5rem}
.kf-list-text .event-figure--schmal{width:min(210px,30%)}
.kf-list-text .event-figure--breit{max-width:380px}

/* Beginn / Eintritt / Veranstalter abgesetzt wie auf der Einzelseite */
.kf-list-text .event-organizer{
  clear:both;font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .25rem;
}
.kf-list-text .event-organizer:first-of-type{
  margin-top:1.1rem;padding-top:.8rem;border-top:1px solid var(--line);
}

@media(max-width:760px){
  .kf-list-text .event-figure--left,
  .kf-list-text .event-figure--right,
  .kf-list-text .event-figure--schmal{float:none;width:100%;margin:1rem 0}
}

/* --- Kalender-Liste: volle Breite nutzen ---
   TEC begrenzt die Textspalte auf 5/8 des Rasters und den Zeilen-Wrapper auf 3/4.
   Drei Klassen im Selektor, weil TECs Stylesheet nach dem Theme lädt. */
.tribe-events .tribe-events-calendar-list .tribe-events-calendar-list__event-details,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list .tribe-events-calendar-list__event-details{
  width:auto;flex:1 1 auto;
}
.tribe-events .tribe-events-calendar-list .tribe-events-calendar-list__event-wrapper{
  width:auto;flex:1 1 auto;
}

/* --- Preis und Buttons je Eintrag ---
   Die Selektoren tragen `.tribe-common` bzw. `.tribe-events`, weil TEC mit
   `.tribe-common a{background-color:initial}` sonst den Button-Hintergrund
   wieder abräumt (Klasse+Element schlägt eine einzelne Klasse). */
.tribe-events .kf-list-cta{
  display:flex;align-items:center;justify-content:flex-end;gap:1rem;flex-wrap:wrap;
  margin-top:.9rem;
}
/* Preis in der Zeitzeile: dieselbe Schrift und Größe wie die Uhrzeit,
   nur in Terracotta hervorgehoben – Cormorant neben Inter wirkte unruhig. */
.tribe-events .kf-list-price{color:var(--terracotta);font-weight:600}
.tribe-events .kf-list-price::before{
  content:"·";margin:0 .55rem;color:var(--ink-soft);font-weight:400;
}
.tribe-events .kf-list-soldout{margin-left:.6rem;color:var(--ink-soft);font-size:.85rem}
.tribe-events .kf-list-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

.tribe-common .kf-list-actions a.btn,
.tribe-events .kf-list-actions a.btn{
  display:inline-block;padding:.62rem 1.3rem;border-radius:100px;
  font-family:'Inter',sans-serif;font-size:.86rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:background-color .2s,color .2s,transform .2s;
}
.tribe-common .kf-list-actions a.btn-primary,
.tribe-events .kf-list-actions a.btn-primary{
  background-color:var(--terracotta);color:#fff;box-shadow:var(--shadow-sm);
}
.tribe-common .kf-list-actions a.btn-primary:hover,
.tribe-events .kf-list-actions a.btn-primary:hover{
  background-color:var(--terra-dk);color:#fff;transform:translateY(-2px);
}
.tribe-common .kf-list-actions a.btn-ghost,
.tribe-events .kf-list-actions a.btn-ghost{
  background-color:transparent;color:var(--ink);border-color:var(--line);
}
.tribe-common .kf-list-actions a.btn-ghost:hover,
.tribe-events .kf-list-actions a.btn-ghost:hover{
  background-color:var(--ink);color:#fff;border-color:var(--ink);
}

@media(max-width:600px){
  .kf-list-cta{flex-direction:column;align-items:flex-start}
  .kf-list-actions{width:100%}
  .kf-list-cta .btn-sm{flex:1 1 auto;text-align:center}
}

/* ============================================================
   KALENDERSEITE – Kopfbereich
   Überschrift links, Ansichts-Reiter und Suche rechts darunter,
   Datums-Navigation erst unmittelbar über der Liste.
   Alle Selektoren tragen `.tribe-events` o. ä. voran, weil TECs
   Stylesheet NACH dem Theme lädt und sonst gewinnt.
   ============================================================ */

/* Seitenanfang auf dasselbe Maß wie die übrigen Unterseiten bringen.
   Der Kalender liegt in templates/index.html (mehr Innenabstand als page.html),
   TEC legt über .tribe-events-l-container zusätzlich --tec-spacer-13 obendrauf. */
.post-type-archive-tribe_events main.wp-block-group{padding-top:clamp(2.5rem,6vw,4rem)}
.post-type-archive-tribe_events .tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container,
.post-type-archive-tribe_events .tribe-events .tribe-events-l-container{padding-top:2rem}
.tribe-events .tribe-events-header{padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;display:block}

/* --- Kopfzeile: Text links, Bedienung rechts --- */
/* TEC macht aus dem <header> einen Flex-Container. Ohne width/flex bliebe diese
   Zeile so schmal wie ihr Inhalt und endete mitten auf der Seite.
   Mittige Ausrichtung, damit die rechte Spalte auf Höhe von Titel und Text steht
   statt oben in der Ecke zu schweben. */
.tribe-events .kf-cal-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem 3rem;flex-wrap:wrap;
  width:100%;flex:1 1 100%;
}
.tribe-events .kf-cal-datenav{width:100%;flex:1 1 100%}

/* TEC macht aus dem Titelbereich einen Flex-Container mit Zierlinie (:after) */
.tribe-events .tribe-events-header .kf-cal-intro{
  display:block;flex:1 1 26rem;min-width:0;margin:0;width:auto;
}
.tribe-events .tribe-events-header .kf-cal-intro:after{content:none;display:none}
.tribe-events .tribe-events-header .kf-cal-intro .eyebrow{display:block;margin:0 0 .7rem}
.tribe-events .kf-cal-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(2.2rem,4.5vw,3.2rem);line-height:1.1;color:var(--ink);margin:0 0 .6rem;
}
/* Die Einleitung läuft über die Breite des Inhaltsbereichs. Vorher war sie auf
   52 Zeichen begrenzt und klebte in der linken Hälfte, seit die Bedienelemente
   nach unten gewandert sind. */
.tribe-events .kf-cal-lead{
  font-family:'Inter',system-ui,sans-serif;font-size:1.02rem;line-height:1.7;
  color:var(--ink-soft);max-width:none;margin:0;
}

/* rechte Spalte: Reiter oben, Suche darunter.
   Die TEC-Variablen für den Hover-Zustand werden hier gleich auf die
   Normalfarbe gesetzt – so gibt es an der Quelle keinen Farbwechsel mehr. */
.tribe-events .kf-cal-controls{
  --tec-color-background-events-bar-submit-button-hover:var(--terracotta);
  --tec-color-text-events-bar-submit-button-hover:#fff;
  --tec-color-background-events-bar-submit-button-active:var(--terracotta);
  --tec-color-text-events-bar-submit-button-active:#fff;
  display:flex;flex-direction:column;align-items:flex-end;gap:.85rem;
  flex:0 0 auto;padding-top:.3rem;
}

/* --- Ansichts-Reiter --- */
.tribe-events .kf-cal-views{display:flex;gap:.4rem}
.tribe-common .kf-cal-views .kf-view-tab,
.tribe-events .kf-cal-views .kf-view-tab{
  display:inline-block;padding:.45rem 1.05rem;border-radius:100px;
  border:1px solid var(--line);background:transparent;
  font-family:'Inter',system-ui,sans-serif;font-size:.86rem;font-weight:500;
  color:var(--ink-soft);text-decoration:none;white-space:nowrap;
  transition:background-color .2s,color .2s,border-color .2s;
}
.tribe-common .kf-cal-views .kf-view-tab:hover,
.tribe-events .kf-cal-views .kf-view-tab:hover{border-color:var(--terracotta);color:var(--terracotta)}
.tribe-common .kf-cal-views .kf-view-tab.is-active,
.tribe-events .kf-cal-views .kf-view-tab.is-active{
  background-color:var(--terracotta);border-color:var(--terracotta);color:#fff;font-weight:600;
}

/* --- Suchfeld: schlank, Knopf rund im Feld --- */
.tribe-events .kf-cal-controls .tribe-events-header__events-bar.tribe-events-c-events-bar{
  display:flex;align-items:center;
  /* ACHTUNG: .kf-cal-controls ist eine Spalte – dort wirkt flex-basis auf die
     HÖHE. Deshalb hier flex:0 0 auto und Maße ausdrücklich setzen. */
  width:300px;height:44px;flex:0 0 auto;min-width:0;margin:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:100px;box-shadow:none;padding:.22rem .25rem .22rem .55rem;
}
/* Flex-Elemente schrumpfen sonst nicht unter ihre Mindestbreite */
.tribe-events .kf-cal-controls .tribe-events-c-events-bar__search-container,
.tribe-events .kf-cal-controls .tribe-events-c-search,
.tribe-events .kf-cal-controls .tribe-events-c-search__input-control{min-width:0;background:transparent;padding:0}
.tribe-events .kf-cal-controls .tribe-events-c-search__input{
  min-width:0;width:100%;font-family:'Inter',system-ui,sans-serif;font-size:.88rem;
  background:transparent;padding-left:.1rem;
}
.tribe-events .kf-cal-controls .tribe-common-form-control-text__input::placeholder{color:var(--ink-soft);opacity:.8}
.tribe-events .kf-cal-controls .tribe-events-c-search__input-control-icon-svg{color:var(--ink-soft);opacity:.7}

/* Knopf: runder Terracotta-Punkt bündig im Feld statt eckigem Balken */
.tribe-common .kf-cal-controls .tribe-events-c-search__button,
.tribe-events .kf-cal-controls .tribe-events-c-search__button{
  flex:0 0 34px !important;
  width:34px !important;min-width:34px !important;max-width:34px !important;
  height:34px !important;min-height:34px !important;max-height:34px !important;
  padding:0 !important;
  border:none;border-radius:50% !important;background-color:var(--terracotta);
  box-shadow:none;line-height:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
/* Bewusst KEIN Mauszeiger-Effekt. TEC bringt eine eigene Regel mit
   (`.tribe-events button.tribe-events-c-search__button:hover`, drei Klassen plus
   Element, später geladen) – deshalb hier vier Klassen plus Element und zur
   Sicherheit !important auf Farbe und Form. */
.tribe-events .kf-cal-controls button.tribe-events-c-search__button:hover,
.tribe-events .kf-cal-controls button.tribe-events-c-search__button:focus,
.tribe-events .kf-cal-controls button.tribe-events-c-search__button:active,
.tribe-common .kf-cal-controls button.tribe-events-c-search__button:hover,
.tribe-common .kf-cal-controls button.tribe-events-c-search__button:focus,
.tribe-common .kf-cal-controls button.tribe-events-c-search__button:active{
  background-color:var(--terracotta) !important;
  color:#fff !important;
  border:none !important;
  border-radius:50% !important;
  box-shadow:none !important;
  transform:none !important;
  /* Geometrie in JEDEM Zustand festnageln – sonst wird aus dem Kreis eine
     Ellipse, sobald irgendeine fremde Regel Breite, Padding oder Schriftgröße
     anfasst. */
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  padding:0 !important;
  flex:0 0 34px !important;
  line-height:0 !important;
}
/* der sichtbare Pfeil kommt als eigenes Element aus dem Template */
.tribe-events .kf-cal-controls .kf-search-arrow{
  font-family:'Inter',system-ui,sans-serif;font-size:1rem;line-height:1;color:#fff;
}

/* Fokus einheitlich wie auf der übrigen Website:
   Beim Klicken mit der Maus KEIN Rahmen (TEC setzt dort sonst einen dunklen),
   bei Tastaturbedienung der übliche Terracotta-Rahmen. Gilt für Such-Knopf und
   Ansichts-Reiter gleichermaßen, damit alle Knöpfe sich gleich verhalten. */
.tribe-events .kf-cal-controls button.tribe-events-c-search__button:focus,
.tribe-events .kf-cal-controls .kf-view-tab:focus,
.tribe-common .kf-cal-controls button.tribe-events-c-search__button:focus{
  outline:none !important;box-shadow:none !important;
}
.tribe-events .kf-cal-controls button.tribe-events-c-search__button:focus-visible,
.tribe-events .kf-cal-controls .kf-view-tab:focus-visible,
.tribe-common .kf-cal-controls button.tribe-events-c-search__button:focus-visible{
  outline:3px solid var(--terracotta) !important;outline-offset:3px;
}


/* --- Datums-Navigation: direkt über die Liste, nicht in den Seitenkopf --- */
/* --- Datums-Navigation ---
   Pfeile außen an den Rändern, Datum mittig und deutlich kleiner.
   Keine eigene Trennlinie: die Monatsüberschrift der Liste bringt schon eine mit. */
.tribe-events .kf-cal-datenav{position:relative;margin:1.4rem 0 .5rem}

/* Fünf Klassen nötig: TEC erzwingt über
   `.tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search
    .tribe-events-header__top-bar{width:100%}` die volle Breite. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .kf-cal-datenav .tribe-events-c-top-bar,
.tribe-events .tribe-events-header--has-event-search .kf-cal-datenav .tribe-events-c-top-bar,
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  /* Nur so breit wie der Inhalt und als Ganzes zentriert. Dadurch sitzen die
     absolut gesetzten Pfeile direkt neben der Gruppe statt an den Seitenrändern. */
  width:fit-content;max-width:100%;margin-inline:auto;
  padding:0 3.2rem;min-height:2.4rem;
  position:relative;
}

/* Die beiden Pfeile aus dem Fluss nehmen und an die Außenkanten setzen.
   Absolut positioniert, damit Auszeichnung und Reihenfolge im HTML unangetastet
   bleiben – Bezugspunkt ist die Zeile selbst. */
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav,
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-list,
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-list-item{
  position:static;margin:0;padding:0;list-style:none;
}
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-link--prev,
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-link--next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s;
}
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-link--prev{left:0}
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-link--next{right:0}
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-link:hover{background-color:var(--cream-dk)}
.tribe-events .kf-cal-datenav .tribe-common-c-btn-icon__icon-svg{width:9px;height:15px}

/* TEC hängt rechts einen leeren Aktionsbereich mit `margin-left:auto` an –
   der schob die ganze Zeile nach links. Er bleibt für Vorleseprogramme erhalten,
   verliert aber den Schub. */
.tribe-common--breakpoint-medium.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__actions,
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__actions{
  margin-left:0;flex:0 0 auto;
}

/* Der Datumsbereich dehnt sich bei TEC über die freie Breite aus – dadurch stand
   der Text trotz zentrierter Zeile links. Er bekommt nur die Breite seines Inhalts. */
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__datepicker{
  flex:0 0 auto;width:auto;position:relative;
}

/* Datum: aus der großen Überschriftengröße auf Lesegröße */
.tribe-common.tribe-common--breakpoint-medium .kf-cal-datenav button.tribe-events-c-top-bar__datepicker-button,
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__datepicker-button{
  font-family:'Inter',system-ui,sans-serif;
  font-size:1.02rem;font-weight:600;line-height:1.3;color:var(--ink);
  letter-spacing:.005em;
}

/* „Heute“ schlicht als Textknopf, damit die Zeile ruhig bleibt */
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__today-button{
  font-family:'Inter',system-ui,sans-serif;font-size:.82rem;font-weight:500;
  color:var(--ink-soft);background:transparent;
  border:1px solid var(--line);border-radius:100px;
  padding:.28rem .85rem;line-height:1.3;
}
.tribe-events .kf-cal-datenav .tribe-events-c-top-bar__today-button:hover{
  border-color:var(--terracotta);color:var(--terracotta);
}
/* (frühere Regel entfernt – sie setzte padding:0 und hob die Ausrichtung
   der Datumszeile wieder auf) */
.tribe-events .kf-cal-datenav .tribe-events-header__top-bar{margin:0;border:0}

@media(max-width:860px){
  .tribe-events .kf-cal-head{display:block}
  .tribe-events .kf-cal-controls{align-items:flex-start;margin-top:1.4rem}
  .tribe-events .kf-cal-controls .tribe-events-header__events-bar.tribe-events-c-events-bar{width:100%;flex:1 1 auto}
}
/* TECs Umschalt-Knopf für die Mobilsuche steckt mit im Kasten – hier nicht nötig */
.tribe-events .kf-cal-controls .tribe-events-c-events-bar__search-button{display:none}
.tribe-events .kf-cal-controls .tribe-events-header__events-bar.tribe-events-c-events-bar{
  min-height:0;overflow:hidden;
}
.tribe-events .kf-cal-controls .tribe-events-c-events-bar__search-container{
  position:static;display:flex;align-items:center;flex:1 1 auto;width:100%;
}

/* Beim Suchen lädt TEC das Ergebnis im Hintergrund nach und legt dabei eine
   halbtransparente weiße Fläche über die gesamte Ansicht – die Seite wird sichtbar
   heller. Die Fläche entfällt; die Ladepunkte als Rückmeldung bleiben. */
.tribe-events .tribe-events-view-loader{background-color:transparent !important}
.tribe-events .tribe-events-view-loader__dots{
  margin-top:1.5rem;color:var(--terracotta);
}

/* --- Hinweismeldungen (keine Treffer / keine Termine an diesem Tag) ---
   Lagen bisher über dem Einleitungstext, weil TEC den <header> als Flex-Container
   führt und die Meldung dort als schmales Element eingereiht wurde. */
.tribe-events .tribe-events-header .tribe-events-header__messages{
  width:100%;flex:1 1 100%;order:9;margin:1.6rem 0 0;
}
/* TEC zentriert den Inhalt über `justify-content:center` auf dem Flex-Element –
   deshalb hier ausdrücklich linksbündig, passend zum farbigen Balken links. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-header .tribe-events-c-messages__message,
.tribe-events .tribe-events-header .tribe-events-c-messages__message{
  justify-content:flex-start;
  background-color:var(--cream-dk);
  border:1px solid var(--line);
  border-left:5px solid var(--terracotta);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
}
/* TEC zentriert den Text ab mittlerer Bildschirmbreite – links wirkt hier
   stimmiger, weil der farbige Balken ebenfalls links sitzt. Vier Klassen nötig. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-header .tribe-events-c-messages__message-list,
.tribe-events .tribe-events-header .tribe-events-c-messages__message-list{
  text-align:left;margin:0;padding:0;list-style:none;
}
.tribe-events .tribe-events-header .tribe-events-c-messages__message-list-item{
  font-family:'Inter',system-ui,sans-serif;font-size:.98rem;line-height:1.6;color:var(--ink);
}
.tribe-events .tribe-events-header .tribe-events-c-messages__message-list-item-link{
  color:var(--terracotta);font-weight:600;
}
/* Hinweissymbol in der richtigen Größe und Farbe statt als gefüllter Klotz */
.tribe-events .tribe-events-header .tribe-events-c-messages__message-icon-svg{
  width:20px;height:22px;flex:0 0 20px;margin-right:.7rem;
  color:var(--terracotta);fill:none;stroke:currentColor;vertical-align:-4px;
}
/* Abstände um die Datumszeile angleichen: darüber und darunter gleich viel Luft.
   Ohne Zutun sind es 44 px oben und 64 px unten. */
.tribe-events .kf-cal-datenav{margin:1.6rem 0 0}
.post-type-archive-tribe_events .tribe-events .tribe-events-calendar-list li:first-child .tribe-events-calendar-list__month-separator,
.post-type-archive-tribe_events .tribe-events .tribe-events-calendar-list__month-separator:first-child{
  margin-top:.6rem;
}

/* ============================================================
   Eine Bedienzeile: Suche links, Datum mittig, Reiter rechts
   (Struktur aus components/header.php)
   ============================================================ */
.tribe-events .kf-cal-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;flex-wrap:nowrap;width:100%;
  margin:2rem 0 .2rem;
}
/* Suche und Reiter behalten ihre Größe, die Mitte gibt bei Platzmangel nach
   (flex-basis 0, sonst rechnet der Browser mit der Inhaltsbreite und bricht um) */
.tribe-events .kf-cal-bar__search{flex:0 0 auto;display:block}
.tribe-events .kf-cal-bar__nav{flex:1 1 0;min-width:0;margin:0}
.tribe-events .kf-cal-bar__views{flex:0 0 auto}

/* Die Kopfzeile trägt jetzt nur noch Auszeichnung, Titel und Text */
.tribe-events .tribe-events-header .kf-cal-intro{max-width:none}

/* Datums-Navigation innerhalb der Zeile mittig, ohne eigene Ränder */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .kf-cal-bar__nav .tribe-events-c-top-bar,
.tribe-events .kf-cal-bar__nav .tribe-events-c-top-bar{
  width:fit-content;max-width:100%;margin-inline:auto;padding:0 3rem;
}
.tribe-events .kf-cal-bar .kf-cal-datenav{margin:0}

@media(max-width:1000px){
  .tribe-events .kf-cal-bar{flex-wrap:wrap;justify-content:space-between}
  .tribe-events .kf-cal-bar__nav{flex:1 1 100%;order:3}
  .tribe-events .kf-cal-bar__nav .tribe-events-c-top-bar{margin-inline:0;padding-left:0}
}
/* TEC gibt der Datumszeile unten Abstand (`--tec-spacer-7`); dadurch war die
   Gruppe in der Bedienzeile nach oben versetzt. Vier Klassen, damit es greift. */
.tribe-events .kf-cal-bar .kf-cal-datenav .tribe-events-header__top-bar,
.tribe-events .kf-cal-bar .kf-cal-datenav .tribe-events-c-top-bar{
  margin-top:0;margin-bottom:0;
}

/* --- Tagesansicht: gleiche Behandlung wie die Listenansicht --- */
.tribe-events .tribe-events-calendar-day__event-description.kf-list-text{
  display:block !important;visibility:visible;margin-top:.9rem;
}
.tribe-events .tribe-events-calendar-day__event-datetime-wrapper .kf-list-price{
  font-family:'Inter',system-ui,sans-serif;font-size:1.02rem;font-weight:600;
  color:var(--terracotta);line-height:1;
}
.tribe-events .tribe-events-calendar-day__event-datetime-wrapper .kf-list-price::before{
  content:"·";margin:0 .55rem;color:var(--ink-soft);font-weight:400;
}
.tribe-events .tribe-events-calendar-day__event-cost.kf-list-cta{
  display:flex;align-items:center;justify-content:flex-end;gap:1rem;flex-wrap:wrap;
  margin-top:.9rem;
}
/* Tagesansicht: volle Breite nutzen. TEC begrenzt den Textbereich wie in der
   Liste auf 5/8 des Rasters (vier Klassen im Selektor nötig). */
.post-type-archive-tribe_events .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-day__event-details,
.post-type-archive-tribe_events .tribe-events .tribe-events-calendar-day__event-details{
  width:auto;flex:1 1 auto;
}
.post-type-archive-tribe_events .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-day__event-content{
  flex:1 1 auto;
}

/* --- Datumswähler (Kalender-Aufklappmenü) ---
   TEC setzt für den heutigen Tag Hintergrund UND Schrift auf dieselbe Akzentfarbe
   (`--tec-color-accent-primary-background-datepicker` = `--tec-color-accent-primary`),
   die Zahl war dadurch unsichtbar. */
.tribe-events .datepicker .day.current,
.tribe-events .datepicker .day.current:hover,
.tribe-events .datepicker .day.current:focus{
  background:var(--cream-dk) !important;
  color:var(--terra-dk) !important;
  font-weight:600;
}
.tribe-events .datepicker .day.current:before{border-color:var(--terracotta) !important}

/* gewählter Tag: gefüllt in Terracotta mit weißer Zahl */
.tribe-events .datepicker .day.active,
.tribe-events .datepicker .day.active:hover,
.tribe-events .datepicker .day.active:focus{
  background:var(--terracotta) !important;color:#fff !important;font-weight:600;
}
/* kein dunkler Rahmen beim Anklicken; Tastaturfokus bleibt sichtbar */
.tribe-events .datepicker .day:focus{outline:none !important}
.tribe-events .datepicker .day:focus-visible{
  outline:3px solid var(--terracotta) !important;outline-offset:2px;
}

/* ============================================================
   Monatsansicht im Hausstil
   Raster bleibt kompakt – nur Typografie, Farben und die
   Kennzeichnung des heutigen Tages werden angepasst.
   ============================================================ */

/* Wochentage: lesbar und als Auszeichnung gesetzt, wie die Eyebrow-Zeilen.
   Drei Klassen, weil TEC die Farbe mit zwei Klassen setzt und später lädt. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__header-column-title,
.tribe-events .tribe-events-calendar-month .tribe-events-calendar-month__header-column-title,
.tribe-events .tribe-events-calendar-month__header-column-title{
  font-family:'Inter',system-ui,sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.tribe-events .tribe-events-calendar-month__header{padding-bottom:.5rem}

/* Rasterlinien in der Hausfarbe */
.tribe-events .tribe-events-calendar-month__day{
  border-color:var(--line);
}

/* Tageszahlen in der Serifenschrift wie die Datumskacheln der Liste */
.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day-date-link,
.tribe-events .tribe-events-calendar-month__day-date-daynum{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.35rem;font-weight:500;color:var(--ink);
}
.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date{
  color:var(--ink-soft);opacity:.55;
}

/* Heutiger Tag: cremefarbenes Feld, Zahl in Terracotta */
.tribe-events .tribe-events-calendar-month__day--current{
  background-color:var(--cream-dk);
}
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum{
  color:var(--terracotta);font-weight:600;
}

/* Termine in der Zelle: Uhrzeit gedämpft, Titel lesbar */
.tribe-events .tribe-events-calendar-month__calendar-event-datetime{
  font-family:'Inter',system-ui,sans-serif;font-size:.72rem;color:var(--ink-soft);
}
.tribe-events .tribe-events-calendar-month__calendar-event-title{
  font-family:'Inter',system-ui,sans-serif;font-size:.82rem;line-height:1.35;margin-top:.1rem;
}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link{
  color:var(--ink);text-decoration:none;
}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover{
  color:var(--terracotta);
}
.tribe-events .tribe-events-calendar-month__calendar-event{margin-bottom:.5rem}
/* Grundlinien-Ausgleich der Datumskachel: drei Klassen, weil TEC die Kachel
   mit zwei Klassen setzt und sein Stylesheet später lädt. Verschoben wird über
   `position`, das ist von der Flex-Berechnung unabhängig. */
.tribe-events .tribe-events-calendar-list__event-date-tag .tribe-events-calendar-list__event-date-tag-datetime{
  padding-top:0;position:relative;top:-2px;
}

/* ============================================================
   Kopfbereich der Veranstaltungsseite
   Farbfläche statt Foto – das bildschirmfüllende Gebäudebild war zu
   dominant und auf fast jeder Seite dasselbe.
   ============================================================ */
/* --- Kopf und schmaler Klebe-Balken ---
   Der Kopf selbst bleibt ein ganz normaler Block und scrollt weg. Sobald er oben
   aus dem Bild ist, blendet `assets/kf-eventkopf.js` einen eigenen schmalen Balken
   ein, der fest über dem Inhalt liegt.

   Warum nicht der Kopf selbst per position:sticky schrumpft: Beim Schrumpfen rückt
   der Inhalt darunter nach oben, dadurch ändert sich der Scrollstand und damit die
   berechnete Größe – das ergab ein sichtbares Zittern. Der eigene Balken verändert
   das Layout nicht. */
:root{--kf-kopfleiste:84px; --kf-minikopf:54px}
.admin-bar{--kf-kopfleiste:116px}

.kf-eventkopf{padding-block:clamp(2.4rem,5vw,3.6rem) clamp(2rem,4vw,3rem)}

.kf-minikopf{
  position:fixed;left:0;right:0;z-index:40;
  background:var(--green);color:#fff;
  padding:.85rem 0 .8rem;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.55);
  /* Weiches Einfahren: er gleitet hinter der Kopfleiste hervor und wird dabei
     sichtbar. Die Kurve bremst zum Schluss stark ab („ease-out“), das wirkt
     ruhiger als eine gleichmäßige Bewegung. Beim Verschwinden geht es etwas
     schneller – Zurücknehmen darf zügiger sein als Erscheinen. */
  transform:translateY(-102%);
  opacity:0;
  /* diese Werte gelten beim Verschwinden – zügiger */
  transition:transform .26s cubic-bezier(.4,0,1,1),
             opacity   .18s ease-in;
  will-change:transform,opacity;
}
.kf-minikopf--sichtbar{
  transform:translateY(0);
  opacity:1;
  /* und diese beim Erscheinen – langsamer, mit weichem Ausklang */
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             opacity   .30s ease-out;
}
/* Titel links, Kennzeichnung rechts – der Titel gibt bei Platzmangel nach */
.kf-minikopf > .container{display:flex;align-items:center;gap:1.5rem}
.kf-minikopf__titel{
  flex:1 1 auto;min-width:0;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:1.45rem;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kf-minikopf__tag{
  flex:0 0 auto;
  background:rgba(255,255,255,.92);color:var(--terra-dk);
  font-family:'Inter',system-ui,sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  padding:.4rem .8rem;border-radius:100px;
}
/* Farbe des Balkens folgt der Kategorie des Kopfes */
.kf-eventkopf--terracotta ~ .kf-minikopf,
body:has(.kf-eventkopf--terracotta) .kf-minikopf{background:var(--terracotta)}
body:has(.kf-eventkopf--gold) .kf-minikopf{background:var(--gold);color:var(--ink)}
body:has(.kf-eventkopf--anthrazit) .kf-minikopf{background:var(--ink)}

/* Auf schmalen Bildschirmen kein zusätzlicher Balken – dort ist der Platz zu knapp */
@media(max-width:860px){
  .kf-minikopf{display:none}
  :root{--kf-minikopf:0px}
}
@media (prefers-reduced-motion: reduce){
  .kf-minikopf{display:none}
  :root{--kf-minikopf:0px}
}

.kf-eventkopf__inner{max-width:var(--maxw)}
.kf-eventkopf h1{
  color:#fff;font-size:clamp(2.1rem,3.8vw,3.1rem);line-height:1.14;margin:0;max-width:none;
}
.kf-eventkopf .kf-eventkopf__tag{
  background:rgba(255,255,255,.92);color:var(--terra-dk);
}
.kf-eventkopf--gruen     {background:var(--green)}
.kf-eventkopf--terracotta{background:var(--terracotta)}
.kf-eventkopf--gold      {background:var(--gold)}
.kf-eventkopf--anthrazit {background:var(--ink)}
.kf-eventkopf--gold h1{color:#2b2520}
.kf-eventkopf--gold .kf-eventkopf__tag{background:rgba(255,255,255,.9);color:var(--terra-dk)}

/* Eckdaten unter der Farbfläche – rechts der Kalender-Knopf, damit der Platz
   dort nicht leer bleibt und der Block flacher wird. */
.kf-eventfakten{padding:1.1rem 0 .2rem}
.kf-eventfakten > .container{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:.9rem 2rem;flex-wrap:wrap;
}
/* Der Zurück-Link steht in einer eigenen Zeile (die Zeile nimmt die volle Breite,
   der Link selbst nur seine Textbreite – sonst zöge sich der Tastatur-Fokusrahmen
   über die ganze Zeile). */
.kf-eventfakten .kf-eventfakten__zurueckzeile{flex:1 1 100%;margin:0}
.kf-eventfakten .kf-eventkopf__zurueck{display:inline-block;margin:0}
.kf-fakten{flex:1 1 auto}
/* Knopf ausdrücklich auf die Grundlinie der Eckdaten setzen –
   `align-items` des Containers reichte hier nicht. */
.kf-fakten__aktion{flex:0 0 auto;align-self:flex-end;margin:0}
.tribe-events-single .kf-fakten__aktion .tribe-events-c-subscribe-dropdown,
.tribe-events-single .kf-fakten__aktion .tribe-events-c-subscribe-dropdown__container{margin:0 !important}
.kf-eventkopf__zurueck{
  display:inline-block;font-size:.85rem;color:var(--ink-soft);text-decoration:none;margin-bottom:1.1rem;
}
.kf-eventkopf__zurueck:hover{color:var(--terracotta)}
.kf-fakten{display:flex;flex-wrap:wrap;gap:.6rem 2.6rem}
.kf-fakt b{
  display:block;font-family:'Inter',system-ui,sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);line-height:1.6;
}
.kf-fakt span{color:var(--ink);font-weight:500;font-size:.98rem}

@media(max-width:640px){
  .kf-fakten{gap:.8rem 1.6rem}
}


/* ============================================================
   Fokus-Rahmen nur bei Tastaturbedienung
   `:focus-visible` allein genügt nicht: Manche Browser (vor allem Safari)
   werten einen Mausklick auf einen Link ebenfalls als sichtbaren Fokus.
   assets/kf-fokus.js setzt dafür Klassen am <html>-Element.
   ============================================================ */

/* Bei Maus- oder Fingerbedienung kein Rahmen – auch nicht der des Browsers
   und keiner aus fremden Stylesheets. */
html.kf-js:not(.kf-tastatur) a:focus,
html.kf-js:not(.kf-tastatur) button:focus,
html.kf-js:not(.kf-tastatur) input:focus,
html.kf-js:not(.kf-tastatur) select:focus,
html.kf-js:not(.kf-tastatur) textarea:focus,
html.kf-js:not(.kf-tastatur) summary:focus,
html.kf-js:not(.kf-tastatur) [tabindex]:focus{
  outline:none !important;
}

/* Sobald die Tastatur benutzt wird, ist der Rahmen wieder da – im Hausstil */
html.kf-js.kf-tastatur a:focus,
html.kf-js.kf-tastatur button:focus,
html.kf-js.kf-tastatur input:focus,
html.kf-js.kf-tastatur select:focus,
html.kf-js.kf-tastatur textarea:focus,
html.kf-js.kf-tastatur summary:focus,
html.kf-js.kf-tastatur [tabindex]:focus{
  outline:3px solid var(--terracotta);
  outline-offset:3px;
  border-radius:3px;
}
html.kf-js.kf-tastatur .section-dark a:focus,
html.kf-js.kf-tastatur .hero a:focus,
html.kf-js.kf-tastatur .cta-band a:focus,
html.kf-js.kf-tastatur .kf-eventkopf a:focus{outline-color:#fff}

/* Der Sprunglink zum Inhalt muss auch bei Mausbedienung sichtbar bleiben,
   sobald er den Fokus hat – sonst wäre er unbenutzbar. */
html.kf-js:not(.kf-tastatur) .kf-skip:focus{outline:3px solid var(--terracotta) !important}

/* ============================================================
   Handy-Ansicht: Kalender
   Auf schmalen Bildschirmen fiel der innere Teil der Suchleiste in sich
   zusammen (TEC klappt sie dort normalerweise hinter einen Lupen-Knopf),
   der Absende-Knopf rutschte heraus. Hier ausdrücklich gesetzt.
   ============================================================ */
@media(max-width:860px){

  /* Suche über die volle Breite */
  .tribe-events .kf-cal-bar__search{flex:1 1 100%;width:100%}
  .tribe-events .kf-cal-controls .tribe-events-header__events-bar.tribe-events-c-events-bar{
    width:100%;flex:1 1 auto;height:46px;display:flex;align-items:center;
    padding:.22rem .6rem .22rem .7rem;
  }
  .tribe-events .kf-cal-controls .tribe-events-c-events-bar__search-container{
    position:static;display:flex;align-items:center;
    flex:1 1 auto;width:auto;height:100%;padding:0;background:transparent;
    top:auto;left:auto;right:auto;z-index:auto;
  }
  /* Die Verschachtelung von TEC hat mehrere Ebenen; jede muss mitziehen:
     __search  →  form.tribe-events-c-search  →  __input-group  →  __input-control */
  .tribe-events .kf-cal-controls .tribe-events-c-events-bar__search,
  .tribe-events .kf-cal-controls form.tribe-events-c-search,
  .tribe-events .kf-cal-controls .tribe-events-c-search__input-group,
  .tribe-events .kf-cal-controls .tribe-events-c-search__input-control{
    display:flex;align-items:center;width:100%;height:100%;margin:0;padding:0;
    min-width:0;background:transparent;
  }
  .tribe-events .kf-cal-controls .tribe-events-c-events-bar__search,
  .tribe-events .kf-cal-controls form.tribe-events-c-search{flex:1 1 auto}
  .tribe-events .kf-cal-controls .tribe-events-c-search__input-group{flex:1 1 auto}
  .tribe-events .kf-cal-controls .tribe-events-c-search__input-control{flex:1 1 auto}
  .tribe-events .kf-cal-controls .tribe-events-c-search__input{
    height:100%;line-height:1;width:100%;order:2;padding-left:.4rem;
  }
  /* Lupe nach vorn – auf schmalen Bildschirmen stellt TEC sie hinter das Feld.
     TEC setzt sie absolut mit `top:50%; transform:translateY(-50%)`. Das
     `position:static` hier macht `top` wirkungslos – die Verschiebung um die halbe
     Symbolhöhe blieb aber und zog die Lupe 8 px nach oben. Deshalb `transform:none`. */
  .tribe-events .kf-cal-controls .tribe-events-c-search__input-control-icon-svg{
    order:1;flex:0 0 auto;position:static;margin:0;transform:none;top:auto;right:auto;
  }
  /* TEC unterstreicht das Eingabefeld auf dem Handy – hier nicht erwünscht */
  .tribe-events .kf-cal-controls .tribe-common-form-control-text,
  .tribe-events .kf-cal-controls .tribe-events-c-search__input-control,
  .tribe-events .kf-cal-controls .tribe-events-c-search__input,
  .tribe-events .kf-cal-controls input.tribe-common-form-control-text__input{
    border:0 !important;box-shadow:none !important;background:transparent;
  }
  /* Knopf bleibt der runde Punkt am rechten Ende.
     TEC schiebt ihn mit
       `.tribe-events .tribe-common-c-btn.tribe-events-c-search__button{margin-top:24px}`
     nach unten (drei Klassen). Ein Versuch mit ebenfalls drei Klassen half nichts:
     TECs Stylesheet lädt nach unserem, bei gleicher Stärke gewinnt das spätere.
     Deshalb hier `.tribe-common-c-btn` mit aufnehmen – vier Klassen. */
  .tribe-events .kf-cal-controls .tribe-common-c-btn.tribe-events-c-search__button{
    margin:0 0 0 .4rem;align-self:center;
  }

  /* Reihenfolge: Reiter zuerst, darunter die Suche, dann das Datum */
  .tribe-events .kf-cal-bar{gap:.8rem}
  .tribe-events .kf-cal-bar__views{order:1;flex:1 1 100%}
  .tribe-events .kf-cal-bar__search{order:2}
  .tribe-events .kf-cal-bar__nav{order:3}
  /* Der Suchkasten brachte zusätzlich 1,4 rem mit – zusammen mit dem Abstand der
     Zeile klaffte eine Lücke von 35 px unter den Reitern. */
  .tribe-events .kf-cal-controls{margin-top:0}

  /* Datumszeile wie am Rechner: Datum mittig, die beiden Pfeile außen.
     TEC blendet sie unterhalb seiner mittleren Stufe aus – hier gewollt sichtbar,
     sonst steht die Zeile als loser Text unter der Suche. */
  .tribe-events .kf-cal-bar__nav .tribe-events-c-top-bar__nav.tribe-common-a11y-hidden{
    display:block !important;visibility:visible;flex:none;
  }
  /* Zeile über die volle Breite statt nur so breit wie ihr Inhalt: Nur dann liegt
     die Mitte des Datumsbereichs auch auf der Bildschirmmitte – und nur dann klappt
     der Kalender darunter mittig auf statt rechts über den Rand hinaus.
     Vier Klassen nötig (`__nav` und `datenav` sind dasselbe Element): Eine frühere
     Regel weiter oben trifft über `.tribe-events-header--has-event-search` mit
     ebenfalls vier Klassen und würde sonst gewinnen. */
  .tribe-events .kf-cal-bar__nav.kf-cal-datenav .tribe-events-c-top-bar{
    width:100%;max-width:none;margin-inline:0;padding:0 2.4rem;
  }
  .tribe-events .kf-cal-bar__nav.kf-cal-datenav .tribe-events-c-top-bar__datepicker{
    flex:1 1 auto;display:flex;justify-content:center;
    /* ohne eigene Positionierung: dadurch bezieht sich der Kalender-Behälter
       darunter auf die ganze Zeile und nicht auf die Breite der Datumsschrift –
       nur so klappt er wirklich bildschirmmittig auf */
    position:static;
  }
  .tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-link--prev,
  .tribe-events .kf-cal-datenav .tribe-events-c-top-bar__nav-link--next{
    width:30px;height:30px;
  }

  /* --- Aufgeklappter Kalender ---
     Der Kasten ist absolut gesetzt und schrumpft dabei auf die Breite seines
     Bezugsrahmens (`.tribe-events-c-top-bar__datepicker`, so breit wie der Knopf,
     ~230 px). Die Tagesspalten haben aber feste 48 px, zusammen 336 px – sie liefen
     rechts aus dem weißen Kasten heraus. Feste Breite statt Schrumpfen, mittig
     unter dem Knopf, und die Spalten teilen sich die Breite. */
  /* Der Behälter ist absolut gesetzt und trägt bei TEC `width:363px` mit
     `max-width:calc(100% + 29px)` – auf dem Handy schrumpft er dadurch auf die
     Breite der Datumsschrift. Der Kalender darin hat `width:100%`, seine
     Tagesspalten aber feste 48 px: Sie liefen rechts aus dem weißen Kasten.
     Deshalb hier der Behälter mit fester, bildschirmgerechter Breite, mittig –
     der Kalender folgt ihm von selbst. */
  .tribe-events .kf-cal-bar__nav.kf-cal-datenav .tribe-events-c-top-bar__datepicker-container{
    width:min(340px, calc(100vw - 2.4rem));max-width:none;
    left:50%;right:auto;transform:translateX(-50%);
  }
  .tribe-events .kf-cal-datenav .datepicker.dropdown-menu{
    width:100%;min-width:0;max-width:none;
    left:0 !important;right:auto !important;transform:none;
  }
  /* Die sieben Spalten teilen sich die Breite. Wichtig: `.day` ist bei
     bootstrap-datepicker der **Knopf** in der Zelle, nicht die Zelle selbst.
     Ein `width:auto` darauf ließ ihn auf die Breite der Ziffer schrumpfen –
     die Markierung des heutigen Tages wurde zum schmalen hohen Streifen.
     Deshalb: Breite an die Zellen, der Knopf füllt sie aus. */
  /* Nur die Tagesansicht des Wählers: Die Monats- und Jahresansicht arbeitet mit
     nebeneinander gestellten Feldern in einer einzigen Zelle – feste Spaltenbreiten
     zerlegen sie. */
  .tribe-events .kf-cal-datenav .datepicker .datepicker-days table{width:100%;table-layout:fixed}
  .tribe-events .kf-cal-datenav .datepicker .datepicker-days td,
  .tribe-events .kf-cal-datenav .datepicker .datepicker-days th.dow{width:14.2857%}
  .tribe-events .kf-cal-datenav .datepicker .datepicker-days .day{width:100%;display:block}
  .tribe-events .kf-cal-datenav .datepicker .datepicker-months table,
  .tribe-events .kf-cal-datenav .datepicker .datepicker-years table{width:100%}
  .tribe-events .kf-cal-datenav .datepicker .datepicker-switch{width:auto}

  /* Datumskachel und Uhrzeit standen fast aneinander */
  .tribe-events .tribe-events-calendar-list__event-date-tag{padding-right:.5rem}

  /* TECs Rasterabstände ragten 2 px über den Bildschirm.
     TEC setzt sie mit gleicher Spezifität und lädt später – daher !important. */
  .tribe-events .tribe-events-calendar-list__event.tribe-common-g-row--gutters,
  .tribe-events .tribe-common-g-row--gutters{
    margin-left:0 !important;margin-right:0 !important;
  }
  .tribe-events .tribe-common-g-row--gutters > .tribe-common-g-col{
    padding-left:0 !important;padding-right:0 !important;
  }
}

/* Bilder in Inhaltsseiten skalieren immer mit. Auf der Seite Hallennutzung
   ragte der Grundriss 194 px über den Bildschirm, weil im Beitragstext
   `style="max-width:560px"` direkt am Bild steht – eine solche Angabe schlägt
   jede Stylesheet-Regel, deshalb hier ausnahmsweise !important. */
.kf-page img,
.kf-article img,
.entry-content img,
.detail-main img,
img.kf-zoom{
  max-width:100% !important;
  height:auto;
}

/* …Galerien behalten aber ihre gleichmäßigen Kachelhöhen. Die Regel oben trifft über
   `img.kf-zoom` auch die Galeriebilder; ohne diese Rückausnahme werden die Kacheln
   unterschiedlich hoch und unter den flacheren Bildern bleibt ein weißer Streifen. */
.gallery figure img{height:100%}
.gallery3 figure img{height:270px}
.kf-gallery figure img{height:200px}
@media(max-width:760px){
  .gallery3 figure img{height:240px}
}
/* Galerie „Eindrücke aus den Vorjahren": 9 Bilder → am Rechner feste 3 Spalten.
   Mit auto-fill wurden es 4 Spalten, und das neunte Bild stand allein in Reihe 3. */
@media(min-width:761px){
  .kf-gallery{grid-template-columns:repeat(3,1fr)}
  .kf-gallery figure img{height:230px}
}


/* Bilder bleiben beim Überfahren ruhig – das Vergrößern beim Mauszeiger wirkte
   unruhig und blieb auf Berührungsgeräten nach dem Antippen stehen.
   Dass die Bilder anklickbar sind, zeigt weiterhin der Lupen-Zeiger. */
.gallery figure:hover img,
.kf-gallery figure:hover img,
.gallery3 figure:hover img,
.kf-figure:hover img,
.kf-history:hover img{
  transform:none;
}


/* ---- Tabellen aus dem Schreibfenster ---- */
.kf-tabelle-rahmen{overflow-x:auto;margin:1.6rem 0;-webkit-overflow-scrolling:touch}
.kf-tabelle{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--surface)}
.kf-tabelle th,.kf-tabelle td{
  border:1px solid var(--line);padding:.6rem .85rem;text-align:left;vertical-align:top;
}
.kf-tabelle th{background:var(--cream);font-weight:600}
/* „Erste Zeile Kopf“ – falls im Schreibfenster keine th-Zellen entstehen */
.kf-tabelle--kopf tr:first-child td{background:var(--cream);font-weight:600}
.kf-tabelle--offen th,.kf-tabelle--offen td{border:0;border-bottom:1px solid var(--line)}
.kf-tabelle--offen tr:last-child td{border-bottom:0}

/* Aufgeklappter Kalender liegt über dem Monatsraster.
   TEC gibt dem Wähler `z-index:10`; die Zellen des Monatsrasters sind zwar ohne
   eigenen Wert, kommen im Dokument aber später – in der Monatsansicht schoben sich
   ihre Zahlen dadurch über den weißen Kasten. Die Datumszeile bekommt deshalb eine
   eigene Ebene, der Wähler darin eine höhere. Beides bleibt unter der Kopfleiste
   der Website (50). */
.tribe-events .kf-cal-bar__nav.kf-cal-datenav{z-index:30}
.tribe-events .kf-cal-datenav .datepicker.dropdown-menu{z-index:40}

/* Rundmail-Seite: Formular und Meldungen des Plugins „Newsletter" (Klassen .tnp-…)
   im Stil der Seite statt im Plugin-Grau. */
body .tnp-subscription{max-width:560px;margin:1.6rem 0 2rem;padding:0;text-align:left}
.tnp-subscription .tnp-field{margin-bottom:1rem}
.tnp-subscription .tnp-field-email label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.4rem;color:var(--ink)}
.tnp-subscription input.tnp-email{width:100%;padding:.75rem .95rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font-size:1rem;color:var(--ink)}
.tnp-subscription input.tnp-email:focus{outline:2px solid var(--gold);outline-offset:1px}
.tnp-subscription .tnp-field-checkbox{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.tnp-subscription .tnp-field-checkbox input{flex:none;width:17px;height:17px;margin:.2rem 0 0;accent-color:var(--terracotta)}
body .tnp-subscription .tnp-field-checkbox label,
body .tnp-subscription .tnp-field-checkbox a,
.kf-page .tnp-subscription .tnp-field-checkbox a{font-size:.92rem;color:var(--ink-soft);font-weight:400;display:inline}
body .tnp-subscription .tnp-field-privacy a{text-decoration:underline;text-decoration-color:var(--line)}
.tnp-subscription input.tnp-submit,
.tnp-unsubscribe button,.tnp-resubscribe button,
.tnp-captcha input[type=submit],.tnp-antibot input[type=submit]{display:inline-block;padding:.85rem 1.7rem;border:none;border-radius:100px;
  background:var(--terracotta);color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:var(--shadow-sm)}
.tnp-subscription input.tnp-submit:hover,
.tnp-unsubscribe button:hover,.tnp-resubscribe button:hover{background:var(--terra-dk)}

/* Fenster „Karten anfragen" auf der Veranstaltungsseite (tribe-events/single-event.php);
   margin:auto ausdrücklich, weil *{margin:0} oben sonst die Zentrierung aufhebt */
.kf-dialog{margin:auto;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border:none;
  border-radius:var(--radius-lg);padding:2rem 2rem 1.6rem;background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow)}
.kf-dialog::backdrop{background:rgba(43,37,32,.55)}
.kf-dialog h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;margin:0 2rem .4rem 0;line-height:1.15}
.kf-dialog h3{font-family:'Inter',sans-serif;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);margin:1.5rem 0 .55rem}
.kf-dialog__termin{font-weight:600;margin:0 0 1.2rem;line-height:1.45}
.kf-dialog__termin span{font-weight:400;color:var(--ink-soft);font-size:.92rem}
.kf-dialog__haupt{display:block;text-align:center;margin-bottom:.2rem}
.kf-dialog__liste{list-style:none;margin:0;padding:0}
.kf-dialog__liste li{padding:.45rem 0;border-top:1px solid var(--line);font-size:.95rem;line-height:1.45}
.kf-dialog__liste li:first-child{border-top:none}
.kf-dialog__liste a{color:var(--terracotta);font-weight:500}
.kf-dialog__klein{font-size:.85rem;color:var(--ink-soft);margin:1.2rem 0 0}
.kf-dialog__zu-form{position:absolute;top:.8rem;right:.8rem;margin:0}
.kf-dialog__zu{width:40px;height:40px;border:none;border-radius:50%;background:var(--cream);color:var(--ink);
  font-size:1.6rem;line-height:1;cursor:pointer}
.kf-dialog__zu:hover{background:var(--cream-dk)}
.kf-dialog__zu:focus-visible,.kf-dialog a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:600px){.kf-dialog{padding:1.6rem 1.2rem 1.3rem}.kf-dialog h2{font-size:1.6rem}}


/* ============================================================
   Seiten aus WordPress-Blöcken (Umbau 27.10.2026)
   ------------------------------------------------------------
   Die Seiten und die Startseite bestehen jetzt aus normalen Blöcken (Absatz,
   Überschrift, Knopf, Bild …), damit der Verein sie ohne HTML bearbeiten kann.
   Diese Regeln geben den Blöcken dasselbe Aussehen wie vorher den
   handgeschriebenen Elementen. Die Klassen trägt der Block im Feld
   „Zusätzliche CSS-Klasse(n)".
   ============================================================ */

/* Knöpfe: Block „Button" mit kf-btn + kf-btn-primary / kf-btn-ghost / kf-btn-sm = .btn … */
.wp-block-button.kf-btn > .wp-block-button__link{display:inline-block;padding:.9rem 1.7rem;border-radius:100px;
  font-weight:600;font-size:.92rem;letter-spacing:.01em;line-height:inherit;transition:.22s ease;
  border:1.5px solid transparent;cursor:pointer;background:transparent;color:inherit;text-decoration:none}
.wp-block-button.kf-btn-sm > .wp-block-button__link{padding:.62rem 1.3rem;font-size:.86rem}
.wp-block-button.kf-btn-primary > .wp-block-button__link{background:var(--terracotta);color:#fff;box-shadow:var(--shadow-sm)}
.wp-block-button.kf-btn-primary > .wp-block-button__link:hover{background:var(--terra-dk);transform:translateY(-2px)}
.wp-block-button.kf-btn-ghost > .wp-block-button__link{border-color:currentColor}
.wp-block-button.kf-btn-ghost > .wp-block-button__link:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.section-dark .wp-block-button.kf-btn-ghost > .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.5)}
.section-dark .wp-block-button.kf-btn-ghost > .wp-block-button__link:hover{background:#fff;color:var(--green-dk)}
.hero .wp-block-button.kf-btn-ghost > .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.65)}
.hero .wp-block-button.kf-btn-ghost > .wp-block-button__link:hover{background:#fff;color:var(--ink)}
.cta-band .wp-block-button.kf-btn-primary > .wp-block-button__link{background:#fff;color:var(--terra-dk)}
.cta-band .wp-block-button.kf-btn-primary > .wp-block-button__link:hover{background:var(--cream)}
.cta-band .wp-block-button.kf-btn-ghost > .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.6)}
.cta-band .wp-block-button.kf-btn-ghost > .wp-block-button__link:hover{background:#fff;color:var(--terra-dk)}
.wp-block-buttons.hero-actions,.wp-block-buttons.cta-actions{gap:1rem}

/* Download-Knöpfe (Halle & Restaurant) = .kf-dl */
.wp-block-buttons.kf-downloads{gap:.9rem}
.wp-block-button.kf-dl-knopf > .wp-block-button__link{display:inline-flex;align-items:center;gap:.6rem;background:var(--surface);
  border:1px solid var(--line);border-radius:100px;padding:.7rem 1.3rem;font-weight:600;font-size:inherit;line-height:inherit;
  color:var(--ink);transition:.18s;box-shadow:var(--shadow-sm);text-decoration:none}
.wp-block-button.kf-dl-knopf > .wp-block-button__link:hover{border-color:var(--terracotta);color:var(--terracotta);transform:translateY(-2px)}
.wp-block-button.kf-dl-knopf > .wp-block-button__link::before{content:"⬇";color:var(--terracotta);font-size:.95rem}

/* „Gesamtes Programm →" als Absatz mit Link */
.kf-link-more{font-size:.9rem;margin:0}
.kf-link-more a{color:var(--terracotta);font-weight:600;letter-spacing:.01em}
.kf-link-more a:hover{color:var(--terra-dk)}

/* Zeitleiste: Jahreszahl jetzt fett (<strong>), weil der Editor <span> nicht behält */
.timeline li strong{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;
  font-weight:600;color:var(--terracotta);min-width:80px}

/* Bilder: die Klassen sitzen jetzt an der <figure> des Bild-Blocks */
figure.kf-figure--float{overflow:hidden}
figure.kf-figure--float img{display:block;width:100%;height:auto}
.wp-block-image.kf-zoom img{cursor:zoom-in}
.kf-grundriss img{border-radius:14px;border:1px solid #e4d9c5;box-shadow:0 6px 18px -10px rgba(43,37,32,.35)}
.split-media.wp-block-image img{height:100%}

/* Ausstattung (Halle & Restaurant): Wert und Text sind jetzt eigene Absätze */
.kf-page .kf-feature p{margin:0}
.kf-page .kf-feature p.kf-feature-text{display:inline;font-size:.95rem;color:var(--ink-soft)}

/* Kontaktkarten: Bezeichnung und Wert als Absätze */
.kf-page .kf-crow p{margin:0}
.kf-page .kf-crow p.kf-crow-label{font-size:.68rem;color:var(--ink-soft);margin-bottom:.15rem}
.kf-page .kf-crow p.kf-crow-val{display:inline;font-size:1rem;color:var(--ink)}   /* inline: Zeilenhöhe wie vorher */
.kf-page .kf-contact-card p.kf-contact-sub{color:var(--ink-soft);font-size:.9rem;line-height:1.7rem}

/* Früher Inline-Angaben im Text, jetzt Klassen */
.kf-page p.kf-mt-s{margin-top:.8rem}
.kf-page h2.kf-mt-0{margin-top:0}
.kf-page .cta-band h2.kf-cta-titel{margin:.2rem 0 .6rem}
.kf-page .cta-band.kf-cta-seite{padding:clamp(2.2rem,5vw,3.2rem)}
.kf-page h1.kf-rechtstitel{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1.4rem}

/* Listen-Block: WordPress gibt Listenpunkten oben 8px – die Listen regeln ihre Abstände selbst */
.wp-block-list:is(.kf-list,.timeline,.feature-list) > li{margin-top:0}

/* Bild-Blöcke: WordPress gibt jeder <figure> unten 1em Abstand – die Bilder neben
   Text (Startseite, Seitenblöcke) und der Grundriss hatten vorher keinen */
figure.wp-block-image.split-media{margin:0}
figure.wp-block-image.kf-grundriss{margin:1.2rem 0 0}
/* Bildunterschrift im Bild-Block: WordPress setzt oben .5em und unten 1em Abstand */
.kf-gallery figure.wp-block-image figcaption{margin:0;line-height:1.7}

/* Förderhinweis mit Logo am Ende eines Veranstaltungstextes
   (z. B. jazzApart Gee Hye Lee Trio: Logo Jazz Baden-Württemberg, 28.10.2026) */
.kf-foerderung{display:flex;align-items:center;gap:1rem;margin:1.8rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-soft)}
.kf-foerderung img{width:84px;height:auto;flex:none;border-radius:3px}