:root{
  --edge: 60px;
  --dot: 72px;

  --gap: 14px;
  --pearl: 36px;

  --nav-cover: 120px;
  --active-ring: rgba(120,120,120,0.55);

  --green: #2f8f00;
  --pink:  #f6a0c4;
  --blue:  #0a8fb8;
  --yellow:#f0ef6a;
  --pulse: #b8b8b8;
}

.eva-home{
  min-height: 100vh;
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* Landing background image */
.eva-landing::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("./bg.png") center/cover no-repeat;
  z-index: 0;
  transition: opacity .6s ease;
}
/* Once opened (overview or iframe), fade background away */
body.eva-open .eva-landing::before{ opacity: 0; pointer-events: none; }

/* Overview (WordPress content) */
.eva-overview{
  position: relative;
  z-index: 1;
  display: none;
  padding: 120px 24px;
}
body.eva-open .eva-overview{ display:block; }
body.eva-iframe .eva-overview{ display:none; }
body.eva-wp .eva-overview{ display:none; }

.eva-overview-inner{
  max-width: 980px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: #222;
}
.eva-overview-inner h1{ font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 18px; line-height: 1.15; }
.eva-overview-inner h2{ font-size: clamp(20px, 2.2vw, 28px); margin: 26px 0 10px; line-height: 1.2; }
.eva-overview-inner h3{ font-size: 20px; margin: 22px 0 10px; line-height: 1.2; }
.eva-overview-inner p{ margin: 0 0 14px; color:#333; }
.eva-overview-inner a{ color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.eva-overview-inner .wp-block-image img{ border-radius: 0; }

/* iFrame layer */
.eva-iframe-layer{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 160px; /* desktop side safe */
  background: #fff;
}
.eva-iframe-layer.is-open{ display:block; }
.eva-iframe-layer iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* White band covering Evagic top nav (only when iframe visible) */
.eva-topband{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 0;
  background: #fff;
  z-index: 2; /* above iframe */
  pointer-events: none;
  transition: height .35s ease;
}
body.eva-iframe .eva-topband{
  height: var(--nav-cover);
  pointer-events: auto; /* blocks clicks only inside band */
}

/* Overlay container does NOT block iframe; only dots are clickable */
.eva-overlay{
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Dots */
.eva-corner{
  position: absolute;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  pointer-events: auto;
  border: 0;
  padding: 0;
  cursor: pointer;

  transition:
    top 600ms ease,
    right 600ms ease,
    bottom 600ms ease,
    left 600ms ease,
    width 600ms ease,
    height 600ms ease,
    transform 600ms ease,
    box-shadow 200ms ease,
    opacity 200ms ease;
  will-change: top,right,bottom,left,width,height,transform;
}

/* No hover/focus ring */
.eva-corner:hover{ box-shadow: none; }
.eva-corner:focus, .eva-corner:focus-visible{ outline: none; box-shadow: none; }

/* Active ring (now reliable again) */
.eva-corner.is-active{
  box-shadow: 0 0 0 6px var(--active-ring);
}

/* Corner positions */
.tl{ top: var(--edge); left: var(--edge); }
.tr{ top: var(--edge); right: var(--edge); }
.bl{ bottom: var(--edge); left: var(--edge); }
.br{ bottom: var(--edge); right: var(--edge); }

/* Colors */
.green{ background: var(--green); }
.pink{ background: var(--pink); }
.blue{ background: var(--blue); }
.yellow{ background: var(--yellow); }

/* Disable dots until opened (landing) */
.eva-landing .eva-dot{
  pointer-events: none;
  opacity: .92;
}
body.eva-open .eva-dot{
  pointer-events: auto;
  opacity: 1;
}

/* Grey center dot (strong pulse) */
.eva-center-btn{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--pulse);
  border: none;
  cursor: pointer;
  z-index: 4;
  animation: pulseStrong 1.2s ease-out infinite;
}
.eva-center-btn::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  box-shadow: 0 0 0 0 rgba(184,184,184,.75);
  animation: pulseRing 1.2s ease-out infinite;
}
@keyframes pulseStrong{
  0%{ transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
  45%{ transform: translate(-50%,-50%) scale(1.08); filter: brightness(1.07); }
  100%{ transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
}
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(184,184,184,.75); opacity: 1; }
  70%{ box-shadow:0 0 0 30px rgba(184,184,184,0); opacity: .15; }
  100%{ box-shadow:0 0 0 0 rgba(184,184,184,0); opacity: 0; }
}
.eva-center-btn.is-hidden{ display:none; }

/* Mobile: pearl chain on top (yellow rightmost). iFrame full width. */
@media (max-width: 768px){
  .eva-iframe-layer{ padding: 0; }

  body.eva-open .eva-corner{
    width: var(--pearl);
    height: var(--pearl);
    top: var(--gap);
    bottom: auto !important;
    left: auto !important;
  }

  body.eva-open .tl,
  body.eva-open .tr,
  body.eva-open .bl,
  body.eva-open .br{
    left: auto !important;
    bottom: auto !important;
  }

  /* right-to-left: yellow, blue, pink, green */
  body.eva-open .br{ right: var(--gap); }
  body.eva-open .bl{ right: calc(var(--gap) + 1*(var(--pearl) + var(--gap))); }
  body.eva-open .tr{ right: calc(var(--gap) + 2*(var(--pearl) + var(--gap))); }
  body.eva-open .tl{ right: calc(var(--gap) + 3*(var(--pearl) + var(--gap))); }

  /* Give overview content some top breathing room so it doesn't sit under pearls */
  .eva-overview{ padding-top: calc(var(--nav-cover) + 24px); }
}


/* --- TYPO TUNING (Evagic-like) --- */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.eva-overview{
  background:#fff;
}

.eva-overview-inner{
  max-width: 980px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: #2a2a2a;
}

.eva-overview-inner h1,
.eva-overview-inner h2{
  color:#222;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.eva-overview-inner h1{
  font-size: clamp(30px, 3.6vw, 48px);
  margin: 0 0 18px;
}

.eva-overview-inner h2{
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 36px 0 12px;
}

.eva-overview-inner h3{
  color: var(--green);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  margin: 30px 0 12px;
}

.eva-overview-inner p{
  margin: 0 0 16px;
  color:#2f2f2f;
}

.eva-overview-inner a{
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.eva-overview-inner ul,
.eva-overview-inner ol{
  padding-left: 1.2em;
  margin: 0 0 16px;
}

.eva-overview-inner li{ margin: 0 0 6px; }

.eva-overview-inner .wp-block-image{
  margin: 0 0 22px;
}

.eva-overview-inner .wp-block-image img{
  width: 100%;
  height: auto;
  display:block;
}

/* Gutenberg button block -> Evagic pill */
.eva-overview-inner .wp-block-button__link{
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.eva-overview-inner .wp-block-button__link:hover{
  filter: brightness(0.97);
}


/* --- COLOR SYSTEM (Site Colors) --- */
:root{
  --green: #2f8f00;
  --pink:  #f6a0c4;
  --blue:  #0a8fb8;
  --yellow:#f0ef6a;
}

/* Headings always green */
.eva-overview-inner h1,
.eva-overview-inner h2,
.eva-overview-inner h3{
  color: var(--green);
}

/* Button base */
.eva-overview-inner .wp-block-button__link{
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  color:#222;
}

/* Color variants via block styles */
.eva-overview-inner .wp-block-button.is-style-green .wp-block-button__link{ background: var(--green);  color:#fff; }
.eva-overview-inner .wp-block-button.is-style-pink .wp-block-button__link{ background: var(--pink);   }
.eva-overview-inner .wp-block-button.is-style-blue .wp-block-button__link{ background: var(--blue);   color:#fff; }
.eva-overview-inner .wp-block-button.is-style-yellow .wp-block-button__link{ background: var(--yellow); }

.eva-overview-inner .wp-block-button__link:hover{
  filter: brightness(0.96);
}

/* HEADINGS GREEN ENFORCE */
.eva-overview-inner h1,
.eva-overview-inner h2,
.eva-overview-inner h3,
.eva-overview-inner .wp-block-heading{
  color: var(--green) !important;
}

/* BUTTON STYLE FALLBACK */
.eva-overview-inner .is-style-green .wp-block-button__link{ background: var(--green); color:#fff; }
.eva-overview-inner .is-style-pink .wp-block-button__link{ background: var(--pink); color:#222; }
.eva-overview-inner .is-style-blue .wp-block-button__link{ background: var(--blue); color:#fff; }
.eva-overview-inner .is-style-yellow .wp-block-button__link{ background: var(--yellow); color:#222; }

/* --- DESKTOP OVERVIEW LAYOUT (between dots, Evagic-like max width) --- */
@media (min-width: 769px){
  /* leave the same "safe zone" as the iframe so dots never overlap */
  .eva-overview{
    padding-left: 160px;
    padding-right: 160px;
  }
  /* Evagic-like centered content width */
  .eva-overview-inner{
    max-width: 1040px;
  }
}

/* HEADINGS GREEN ENFORCE v2 (override editor-set colors) */
.eva-overview-inner h1,
.eva-overview-inner h2,
.eva-overview-inner h3,
.eva-overview-inner .wp-block-heading,
.eva-overview-inner .wp-block-heading *{
  color: var(--green) !important;
}

/* TOP BAND OVERVIEW FIX
   Keep a white bar behind dots while scrolling overview,
   so text never goes behind the navigation dots (esp. mobile)
*/
body.eva-open .eva-topband{
  height: var(--nav-cover);
  pointer-events: none; /* do not block content on overview */
}

/* On iframe view we still block clicks */
body.eva-iframe .eva-topband{
  pointer-events: auto;
}

/* --- PANEL LAYER (iframe + wp pages) --- */
.eva-panel-layer{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 160px; /* desktop safe zone like iframe */
  background: #fff;
}
.eva-panel-layer.is-open{ display:block; }

.eva-panel-iframe, .eva-panel-page{ display:none; }
body.eva-iframe .eva-panel-iframe{ display:block; height:100%; }
body.eva-wp .eva-panel-page{ display:block; }

.eva-panel-iframe iframe{ width:100%; height:100%; border:0; }

.eva-page-inner{
  padding: 120px 24px;
}

@media (max-width: 768px){
  .eva-panel-layer{ padding: 0; }
  .eva-page-inner{ padding-top: calc(var(--nav-cover) + 24px); }
}

/* (compat) hide old iframe layer if any */
.eva-iframe-layer{ display:none !important; }

/* =========================================================
   EVAGIC STYLE FOR WORK/EVENT (WordPress pages)
   ========================================================= */

/* Accent color per WP page inside the panel */
body.eva-wp.eva-work  { --eva-accent: var(--blue); }
body.eva-wp.eva-event { --eva-accent: var(--yellow); }

/* When pages are opened directly (/work, /event), use WP body classes */
body.page-slug-work   { --eva-accent: var(--blue); }
body.page-slug-event  { --eva-accent: var(--yellow); }

/* Panel content max width like Evagic, centered */
body.eva-wp .eva-page-inner{
  padding-top: calc(var(--nav-cover) + 24px);
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 769px){
  body.eva-wp .eva-page-inner{
    padding-left: 0;
    padding-right: 0;
  }
}

/* Wrap all loaded WP content and make it look like Evagic */
body.eva-wp #evaPageContent,
body.page-slug-work .eva-overview-inner,
body.page-slug-event .eva-overview-inner{
  max-width: 820px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: #2a2a2a;
}

/* Evagic-like spacing */
body.eva-wp #evaPageContent p{ margin: 0 0 16px; }
body.eva-wp #evaPageContent h1,
body.page-slug-work .eva-overview-inner h1,
body.page-slug-event .eva-overview-inner h1{
  margin: 10px 0 22px;
  font-size: clamp(28px, 3.3vw, 40px);
  line-height: 1.12;
  font-weight: 800;
  color: var(--eva-accent);
  letter-spacing: -0.01em;
}
body.eva-wp #evaPageContent h2,
body.page-slug-work .eva-overview-inner h2,
body.page-slug-event .eva-overview-inner h2{
  margin: 36px 0 10px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: #222;
}
body.eva-wp #evaPageContent h3,
body.page-slug-work .eva-overview-inner h3,
body.page-slug-event .eva-overview-inner h3{
  margin: 28px 0 10px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--eva-accent);
}

/* Date line above H1 (optional): add class "eva-meta-date" in a paragraph */
.eva-meta-date{
  font-size: 14px;
  color: #666;
  margin: 0 0 6px;
}

/* Links */
body.eva-wp #evaPageContent a,
body.page-slug-work .eva-overview-inner a,
body.page-slug-event .eva-overview-inner a{
  color: var(--eva-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Lists */
body.eva-wp #evaPageContent ul,
body.eva-wp #evaPageContent ol{
  margin: 0 0 18px;
  padding-left: 1.2em;
}
body.eva-wp #evaPageContent li{ margin: 0 0 6px; }

/* Images */
body.eva-wp #evaPageContent figure,
body.eva-wp #evaPageContent .wp-block-image{ margin: 0 0 22px; }
body.eva-wp #evaPageContent img{ max-width: 100%; height: auto; display:block; }

/* Buttons (optional for work/event pages) */
body.eva-wp #evaPageContent .wp-block-button__link{
  border-radius: 999px;
  padding: 14px 30px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
  background: var(--eva-accent);
  color: #fff;
}
body.eva-wp.eva-event #evaPageContent .wp-block-button__link{
  /* yellow needs dark text */
  color: #222;
}

/* ---------------------------------------------------------
   SCHEDULE COMPONENT (matches your Word screenshot style)
   Use Custom HTML blocks or Group blocks with these classes.
   --------------------------------------------------------- */

.eva-day-title{
  text-align: center;
  font-weight: 900;
  font-size: 38px;
  line-height: 1.1;
  color: #111;
  margin: 30px 0 22px;
}

.eva-schedule-item{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border: none;
}

.eva-schedule-day{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--eva-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px;
  flex: 0 0 auto;
}
body.eva-wp.eva-event .eva-schedule-day{ color:#222; } /* yellow */

.eva-schedule-content{ flex: 1 1 auto; min-width: 0; }

.eva-schedule-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 8px;
}

.eva-schedule-head h3{
  margin: 0;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 900;
  color: var(--eva-accent);
}

.eva-time{
  font-size: 18px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

.eva-schedule-desc{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

.eva-schedule-tasks{
  margin: 0 0 16px;
  padding-left: 1.2em;
  font-size: 18px;
}

.eva-schedule-meta{
  display: grid;
  grid-template-columns: 170px 1fr;
  row-gap: 10px;
  column-gap: 14px;
  font-size: 18px;
  margin-top: 6px;
}
.eva-schedule-meta .label{ color:#111; }
.eva-schedule-meta .value{ font-weight: 900; color:#111; }

/* Mobile adjustments */
@media (max-width: 520px){
  .eva-schedule-item{ gap: 14px; }
  .eva-schedule-day{ width: 48px; height: 48px; font-size: 18px; }
  .eva-schedule-head h3{ font-size: 24px; }
  .eva-time{ font-size: 16px; }
  .eva-schedule-desc, .eva-schedule-tasks, .eva-schedule-meta{ font-size: 16px; }
  .eva-schedule-meta{ grid-template-columns: 1fr; }
}
/* ===== FINAL OVERRIDES (Requested) ===== */

/* Typography for WP pages (work/event) */
body.eva-wp #evaPageContent,
body.page-slug-work .eva-overview-inner,
body.page-slug-event .eva-overview-inner{
  font-family: Akrobat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
  line-height: 25.2px !important;
}

/* H3 (schedule titles) */
body.eva-wp #evaPageContent .eva-schedule-head h3,
body.page-slug-work .eva-overview-inner .eva-schedule-head h3,
body.page-slug-event .eva-overview-inner .eva-schedule-head h3{
  font-family: Akrobat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 33.6px !important;
  height: 33px; /* optional, as requested */
}

/* No lines between events */
.eva-schedule-item{
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 28px 0 !important;
}

/* Ensure no separators in nested blocks */
.eva-schedule-item *{
  border-bottom: none !important;
}

/* ===== GLOBAL HEADING TYPOGRAPHY (Inter) =====
   Applies site-wide (homepage + all subpages)
*/

html body h1,
html body .entry-title,
html body .wp-block-post-title,
html body .page-title{
  font-style: normal !important;
  font-weight: 300 !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 32pt !important;
}

html body h3,
html body .eva-schedule-head h3{
  font-style: normal !important;
  font-weight: 300 !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 22pt !important;
}


/* =========================================
   EVA Work / Event – Alles auf einer Linie (Theme integriert)
   ========================================= */

/* H3 Abstände auf Work/Event Seiten */
body.eva-wp #evaPageContent h3,
body.page-slug-work .eva-overview-inner h3,
body.page-slug-event .eva-overview-inner h3 {
    margin: 10px 0 10px;
}

/* Schedule Head: alles horizontal auf einer Linie */
.eva-schedule-head {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Zeit */
.eva-time {
    font-size: 16pt;
    font-weight: 300;
}

/* Tag im Kreis */
.eva-schedule-day {
    font-weight: 300;
    font-size: 20px;
}

/* Grundtypografie */
body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 30px;
}

/* Feintuning für exakte Linienausrichtung */
.eva-schedule-head h3,
.eva-schedule-head .eva-time {
    margin: 0;
    line-height: 1;
}


/* =========================================
   EVA Global Typography System (v3.6)
   ========================================= */

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
}

/* H1 – Haupttitel */
h1 {
    font-weight: 300;
    font-size: 56px;
    line-height: 1.15;
    margin: 0 0 30px 0;
}

/* H2 – Section Titel */
h2 {
    font-weight: 300;
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 25px 0;
}

/* H3 – Bereichstitel */
h3 {
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 15px 0;
}

/* Entfernt harte Bold-Overrides */
strong,
b {
    font-weight: 500;
}

/* Buttons */
button,
.wp-block-button__link {
    font-weight: 400;
}



/* =========================================
   50anni 4.0 – Custom CSS integriert
   ========================================= */

/* Yellow text readability fix (text only)
   Original: #d5d44e  -> New: #8f8e16 */
:root{
  --eva-yellow-text: #8f8e16;
}

*[style*="color:#d5d44e"],
*[style*="color: #d5d44e"],
*[style*="color:rgb(213,212,78)"],
*[style*="color: rgb(213, 212, 78)"],
.has-yellow-color,
.has-text-color.has-yellow-color,
.eva-yellow-text,
.eva-yellow{
  color: var(--eva-yellow-text) !important;
}

/* Provided schedule typography */
.eva-schedule-desc {
    font-size: 20px;
    font-weight: 300;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.eva-schedule-meta {
    font-size: 20px;
    font-weight: 300 !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.eva-schedule-meta .value {
    font-size: 20px;
    font-weight: 300 !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.eva-day-title {
    text-align: left;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.1;
    color: var(--eva-accent);
    margin: 75px 0 25px;
}

body.eva-wp #evaPageContent .eva-schedule-head h3,
body.page-slug-work .eva-overview-inner .eva-schedule-head h3,
body.page-slug-event .eva-overview-inner .eva-schedule-head h3 {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    line-height: 33.6px !important;
    height: 33px;
}


/* =========================================
   50anni – Yellow Accent Text Contrast Fix
   Keeps accent yellow for BACKGROUNDS, but darkens accent when used as TEXT (Event pages).
   ========================================= */

body.eva-wp.eva-event,
body.page-slug-event{
  --eva-accent-text: #8f8e16; /* readable olive-yellow for text */
}

/* Headings + links that use var(--eva-accent) as text color */
body.eva-wp.eva-event #evaPageContent h1,
body.page-slug-event .eva-overview-inner h1,
body.eva-wp.eva-event #evaPageContent h3,
body.page-slug-event .eva-overview-inner h3,
body.eva-wp.eva-event #evaPageContent a,
body.page-slug-event .eva-overview-inner a,
body.eva-wp.eva-event #evaPageContent .eva-schedule-head h3,
body.page-slug-event .eva-overview-inner .eva-schedule-head h3,
body.eva-wp.eva-event #evaPageContent .eva-day-title,
body.page-slug-event .eva-overview-inner .eva-day-title{
  color: var(--eva-accent-text) !important;
}


/* =========================================
   50anni – Work/Event mobile schedule layout
   Small screens: day circle stays LEFT, time stays RIGHT (same row),
   title moves BELOW the circle (left-aligned),
   meta/description start from the very left as well.
   ========================================= */

@media (max-width: 640px){

  /* Apply only on work/event contexts */
  body.eva-wp.eva-work .eva-schedule-item,
  body.eva-wp.eva-event .eva-schedule-item,
  body.page-slug-work .eva-schedule-item,
  body.page-slug-event .eva-schedule-item{
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
    padding: 18px 0;
  }

  body.eva-wp.eva-work .eva-schedule-day,
  body.eva-wp.eva-event .eva-schedule-day,
  body.page-slug-work .eva-schedule-day,
  body.page-slug-event .eva-schedule-day{
    grid-column: 1;
    grid-row: 1;
    width: 56px;
    height: 56px;
  }

  /* Let inner wrappers participate in the grid without changing HTML */
  body.eva-wp.eva-work .eva-schedule-content,
  body.eva-wp.eva-event .eva-schedule-content,
  body.page-slug-work .eva-schedule-content,
  body.page-slug-event .eva-schedule-content{
    display: contents;
  }

  body.eva-wp.eva-work .eva-schedule-head,
  body.eva-wp.eva-event .eva-schedule-head,
  body.page-slug-work .eva-schedule-head,
  body.page-slug-event .eva-schedule-head{
    display: contents;
  }

  /* Time stays on first row, right side */
  body.eva-wp.eva-work .eva-time,
  body.eva-wp.eva-event .eva-time,
  body.page-slug-work .eva-time,
  body.page-slug-event .eva-time{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    white-space: nowrap;
    margin: 0;
  }

  /* Title goes BELOW, spanning full width, left-aligned */
  body.eva-wp.eva-work .eva-schedule-head h3,
  body.eva-wp.eva-event .eva-schedule-head h3,
  body.page-slug-work .eva-schedule-head h3,
  body.page-slug-event .eva-schedule-head h3{
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
    margin: 0;
  }

  /* Meta + description start from very left */
  body.eva-wp.eva-work .eva-schedule-meta,
  body.eva-wp.eva-event .eva-schedule-meta,
  body.page-slug-work .eva-schedule-meta,
  body.page-slug-event .eva-schedule-meta{
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0;
    text-align: left;
  }

  body.eva-wp.eva-work .eva-schedule-desc,
  body.eva-wp.eva-event .eva-schedule-desc,
  body.page-slug-work .eva-schedule-desc,
  body.page-slug-event .eva-schedule-desc{
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
    text-align: left;
  }
}


/* =========================================
   50anni – Schedule title wrap fix
   When event titles wrap to multiple lines, they must not overlap the description.
   ========================================= */

/* Remove fixed height so multi-line titles can expand naturally */
body.eva-wp #evaPageContent .eva-schedule-head h3,
body.page-slug-work .eva-overview-inner .eva-schedule-head h3,
body.page-slug-event .eva-overview-inner .eva-schedule-head h3{
  height: auto !important;
  min-height: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  margin-bottom: 8px !important;
}

/* Ensure description starts below the head */
.eva-schedule-head{
  margin-bottom: 8px;
}


/* =========================================
   50anni 4.3 – Layout refinements
   ========================================= */

/* 1. Keep time aligned with FIRST line of multi-line titles (large screens) */
@media (min-width: 641px){
  .eva-schedule-head{
    align-items: flex-start !important;
  }
  .eva-time{
    align-self: flex-start !important;
    margin-top: 2px;
  }
}

/* 2. Fix horizontal shift on yellow (event) pages on mobile */
body.eva-wp.eva-event,
body.page-slug-event{
  overflow-x: hidden;
}

body.eva-wp.eva-event #evaPageContent,
body.page-slug-event .eva-overview-inner{
  overflow-x: hidden;
}

/* 3. Keep meta info (Helfer:innen etc.) side-by-side on mobile */
@media (max-width: 640px){

  .eva-schedule-meta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 6px;
  }

  .eva-schedule-meta .label{
    font-weight: 300;
  }

  .eva-schedule-meta .value{
    text-align: left;
  }

}


/* =========================================
   50anni 4.4 – Editorial refinements
   ========================================= */

/* 1. More elegant title scaling */
.eva-schedule-head h3{
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.18;
  letter-spacing: 0.1px;
}

/* 2. Time visually lighter */
.eva-time{
  font-weight: 300;
  opacity: 0.85;
  font-size: clamp(15px, 1.4vw, 18px);
}

/* 3. Calmer spacing between events */
.eva-schedule-item{
  padding: 28px 0;
}

@media (max-width: 640px){
  .eva-schedule-item{
    padding: 22px 0;
  }
}

/* 4. Slightly softer meta text */
.eva-schedule-meta,
.eva-schedule-desc{
  line-height: 1.55;
}

/* 5. More breathing room under titles */
.eva-schedule-head{
  margin-bottom: 12px;
}



/* =========================================
   50anni 4.5 – Fix time alignment on wrap + warmer event accent text
   ========================================= */

/* Warmer (less olive) readable yellow for EVENT text */
body.eva-wp.eva-event,
body.page-slug-event{
  --eva-accent-text: #a87800; /* warmer gold-brown, higher contrast on white */
}

/* Desktop: keep time on first-line height even when title wraps */
@media (min-width: 641px){

  /* Use grid for the head: title left, time right, both top-aligned */
  .eva-schedule-head{
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: start !important;
    column-gap: 16px;
  }

  .eva-schedule-head h3{
    grid-column: 1;
    align-self: start;
  }

  .eva-time{
    grid-column: 2;
    align-self: start !important;
    justify-self: end;
    margin-top: 2px; /* tiny optical alignment to first line */
    white-space: nowrap;
  }
}


/* =========================================
   50anni 4.6 – Minimal / editorial polish
   Goal: calmer hierarchy, less visual noise, consistent rhythm.
   ========================================= */

/* Overall text color slightly softer (keeps contrast) */
body.eva-wp #evaPageContent{
  color: #2a2a2a;
}

/* Schedule block rhythm */
.eva-schedule-item{
  padding: 26px 0;
}

/* Day circle a touch smaller + lighter weight */
.eva-schedule-day{
  width: 52px;
  height: 52px;
  font-weight: 300;
  letter-spacing: 0.2px;
}

/* Title: keep strong but not heavy */
.eva-schedule-head h3{
  font-weight: 400 !important;
  letter-spacing: 0.1px !important;
}

/* Time: quieter */
.eva-time{
  opacity: 0.8;
  letter-spacing: 0.2px;
}

/* Description: calm line-length + rhythm */
.eva-schedule-desc{
  max-width: 56ch;
}

/* Meta: reduce contrast slightly and keep clean two-column layout */
.eva-schedule-meta{
  color: #3a3a3a;
}

.eva-schedule-meta .label{
  opacity: 0.75;
}

.eva-schedule-meta .value{
  opacity: 0.95;
}

/* Links: less aggressive underline */
body.eva-wp #evaPageContent a,
body.page-slug-work .eva-overview-inner a,
body.page-slug-event .eva-overview-inner a{
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Buttons: keep pill look, lighter weight */
body.eva-wp #evaPageContent .wp-block-button__link{
  font-weight: 500;
}

/* Mobile: ensure comfortable spacing */
@media (max-width: 640px){
  .eva-schedule-desc{
    max-width: none;
  }
  .eva-schedule-item{
    padding: 22px 0;
  }
}


/* =========================================
   50anni 4.7 – Typo closer to Evagic event pages (iframe look)
   Focus: lighter headings, generous line-height, calm rhythm.
   ========================================= */

/* Content typography baseline */
body.eva-wp #evaPageContent,
body.page-slug-work .eva-overview-inner,
body.page-slug-event .eva-overview-inner{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.75;
}

/* Paragraph rhythm similar to evagic */
body.eva-wp #evaPageContent p,
body.page-slug-work .eva-overview-inner p,
body.page-slug-event .eva-overview-inner p{
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.75;
}

/* Headings: lighter + more airy */
body.eva-wp #evaPageContent h1,
body.page-slug-work .eva-overview-inner h1,
body.page-slug-event .eva-overview-inner h1{
  font-weight: 300 !important;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 10px 0 26px;
}

body.eva-wp #evaPageContent h2,
body.page-slug-work .eva-overview-inner h2,
body.page-slug-event .eva-overview-inner h2{
  font-weight: 300 !important;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 28px 0 14px;
}

/* H3 used as section titles and schedule titles */
body.eva-wp #evaPageContent h3,
body.page-slug-work .eva-overview-inner h3,
body.page-slug-event .eva-overview-inner h3{
  font-weight: 300 !important;      /* closer to iframe */
  letter-spacing: 0;
}

/* Schedule title: keep readable but light */
body.eva-wp #evaPageContent .eva-schedule-head h3,
body.page-slug-work .eva-overview-inner .eva-schedule-head h3,
body.page-slug-event .eva-overview-inner .eva-schedule-head h3{
  font-weight: 300 !important;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  line-height: 1.18 !important;
}

/* Meta labels: slightly quieter like evagic */
.eva-schedule-meta .label{
  opacity: 0.75;
  font-weight: 300 !important;
}

/* Mobile: keep baseline readable */
@media (max-width: 640px){
  body.eva-wp #evaPageContent,
  body.page-slug-work .eva-overview-inner,
  body.page-slug-event .eva-overview-inner{
    font-size: 18px;
  }
  body.eva-wp #evaPageContent p,
  body.page-slug-work .eva-overview-inner p,
  body.page-slug-event .eva-overview-inner p{
    font-size: 18px;
  }
  body.eva-wp #evaPageContent h1,
  body.page-slug-work .eva-overview-inner h1,
  body.page-slug-event .eva-overview-inner h1{
    font-size: clamp(32px, 8vw, 48px);
  }
}


/* =========================================
   50anni 5.0 – Schedule head alignment + slimmer titles (closer to evagic)
   ========================================= */

/* Desktop & tablet: keep time aligned to the FIRST line of the title (even if title wraps) */
@media (min-width: 641px){
  .eva-schedule-head{
    display: flex !important;
    align-items: baseline !important;     /* aligns first-line baselines */
    justify-content: space-between;
    gap: 16px;
  }
  .eva-schedule-head h3{
    flex: 1 1 auto;
    min-width: 0;
  }
  .eva-time{
    flex: 0 0 auto;
    margin: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* Slimmer event titles (schedule) like evagic: lighter + a bit tighter */
body.eva-wp #evaPageContent .eva-schedule-head h3,
body.page-slug-work .eva-overview-inner .eva-schedule-head h3,
body.page-slug-event .eva-overview-inner .eva-schedule-head h3{
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
}

/* Slightly smaller on very large screens to avoid overly bulky feel */
@media (min-width: 1100px){
  body.eva-wp #evaPageContent .eva-schedule-head h3,
  body.page-slug-work .eva-overview-inner .eva-schedule-head h3,
  body.page-slug-event .eva-overview-inner .eva-schedule-head h3{
    font-size: 28px !important;
  }
}

/* =========================================
   50anni 5.0 – Neue Typography + Mobile Reihenfolge + Fix Landscape Zoom
   ========================================= */

/* iOS/Safari: verhindere automatische Text-Vergrößerung beim Drehen.
   Wir setzen den (größeren) Querformat-Faktor fix, damit Hoch- und Querformat gleich bleiben. */
@media (max-width: 768px){
  html{
    -webkit-text-size-adjust: 115%;
    text-size-adjust: 115%;
  }
}

/* Vorgaben aus Kunde (ins Theme integriert) */
.eva-schedule-head h3,
.eva-schedule-head .eva-time{
  line-height: 3 !important;
}

.eva-day-title{
  font-weight: 300 !important;
  font-size: 30px !important;
  color: #000 !important;
  font-stretch: ultra-condensed;
}

/* Condensed / ultra-condensed Typografie */
body.eva-wp #evaPageContent .eva-schedule-head h3{
  font-stretch: condensed;
}

body.eva-wp #evaPageContent h1{
  font-stretch: ultra-condensed;
}

html body h1,
html body h3{
  font-stretch: ultra-condensed;
}

.wp-block-columns{
  font-stretch: ultra-condensed;
}

body.eva-wp.eva-event #evaPageContent .eva-day-title,
body.page-slug-event .eva-overview-inner .eva-day-title{
  color: #000 !important;
}

body.eva-wp #evaPageContent p{
  font-stretch: condensed;
}

.eva-schedule-meta,
.eva-time,
.eva-schedule-day{
  font-stretch: condensed;
}