/* ==========================
   Basis & Design-Variablen
   ========================== */

:root{
  --mizo-gruen: #8BC34A;
  --mizo-gruen-dark: #6FA83A; /* dunkleres Grün für Hover */
  --mizo-dunkel: #1A1A1A;
  --bg-hell: #ededed;

  /* Global: Header-Höhen (für fixen Header & Ankerabstand) */
  --header-h-desktop: 156px;
  --header-h-mobile: 186px;

  --ticker-h-desktop: 40px;
  --ticker-h-mobile: 34px;
  --ticker-offset: 2px; /* kleine Luft zum Browserrand */
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }

body{
  margin: 0;
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: var(--bg-hell);
}

/* Zugänglichkeit: Skip-Link */
.skip-link{
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  left: 12px; top: 12px; width: auto; height: auto;
  background: #fff; color:#000; padding: 8px 12px; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}

/* ==========================
   Header & Navigation (GLOBAL: fixed)
   ========================== */
.site-header{
  background: var(--mizo-dunkel);
  color: #fff;
  border-bottom: 2px solid #fff;
  text-align: center;
  padding: 14px 0 6px;

  /* FIXED – direkt UNTER der LED-Laufleiste mit Offset */
  position: fixed;
  top: calc(var(--ticker-h-desktop) + var(--ticker-offset));
  left: 0; right: 0;
  z-index: 2000;
}

/* Platz für fixen Ticker + Offset + fixen Header */
body{
  padding-top: calc(var(--header-h-desktop) + var(--ticker-h-desktop) + var(--ticker-offset));
}

@media (max-width: 768px){
  body{
    padding-top: calc(var(--header-h-mobile) + var(--ticker-h-mobile) + var(--ticker-offset));
  }
  .site-header{
    top: calc(var(--ticker-h-mobile) + var(--ticker-offset));
  }
}

.logo-container{ padding-bottom: 8px; }
.logo{ width: 220px; max-width: 60vw; height: auto; display: block; margin: 0 auto; }

.main-nav ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 28px; justify-content: center; align-items: center;
}
.main-nav a{
  color: #fff; text-decoration: none; font-weight: 500; padding: 6px 8px;
  border-radius: 4px; transition: color .25s ease, background .25s ease, outline-offset .1s;
}
.main-nav a:hover{ color: var(--mizo-gruen); }
.main-nav a[aria-current="page"]{ color: var(--mizo-gruen); }
.main-nav a:focus{ outline: 2px solid var(--mizo-gruen); outline-offset: 2px; }

/* ==========================
   Hero (GLOBAL, kompakt & einheitlich)
   ========================== */
.hero-section{
  background:#E6F3D3;
  color: var(--mizo-dunkel);
  text-align:center;
  padding:16px 20px 24px;   /* kompakt & einheitlich */
}
.hero-section h1{
  font-family:'Montserrat', sans-serif;
  color: var(--mizo-dunkel);
  font-size:2.4rem;
  margin:0;                 /* keine Extra-Lücken oben */
}
.slogan{
  font-size:1.08rem;
  margin:8px auto 18px;
  max-width:880px;
  font-weight:500;
}
.cta-button{
  display: inline-block;
  background: var(--mizo-dunkel);
  color: #fff; text-decoration: none; font-weight: 600;
  padding: 12px 28px; border-radius: 8px;
  transition: transform .1s ease, background .25s ease;
}
.cta-button:hover{ background: #3a3a3a; transform: translateY(-2px); }
.cta-button:focus{ outline: 2px solid var(--mizo-gruen); outline-offset: 3px; }

@media (max-width:768px){
  .hero-section{ padding:12px 16px 18px; }
  .hero-section h1{ font-size:2.1rem; }
  .slogan{ font-size:1rem; margin:8px auto 16px; }
}

/* ==========================
   Services (6 Karten)
   ========================== */
.services-section{ padding: 60px 20px 80px; text-align: center; }
.services-section h2{
  font-family: 'Montserrat', sans-serif;
  color: var(--mizo-dunkel);
  margin: 0 0 26px;
}

.service-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3 Spalten auf Desktop, flex. Umbruch */
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch; /* gleiche Höhe */
}

/* Karte als „Button-Karte“ ohne JS */
.card{
  background: var(--mizo-dunkel);
  color: #fff;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 6px 15px rgba(0,0,0,.3);
  text-align: center;

  display: grid;
  grid-template-rows: auto 1fr auto; /* Titel | Text (wächst) | Button unten */
  min-height: 280px;
  transition: transform .15s ease, box-shadow .2s ease;
}

/* Karten bleiben starr – kein Anheben mehr */
.card:hover{
  transform: none;
  box-shadow: 0 6px 15px rgba(0,0,0,.3); /* identisch zur Grundkarte */
}

.card h3{
  font-family: 'Montserrat', sans-serif;
  color: var(--mizo-gruen);
  font-size: 1.25rem;
  margin: 0 0 12px;
  padding-top: 0;
}
.card p{ margin: 0 0 18px; }

/* CTA-Button in der Karte */
/* Button: weiße Schrift, nur der Button bewegt sich */
.details-link{
  justify-self: center;
  align-self: end;
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--mizo-gruen);
  color: #0a550e;                 /* vorher #ffffff → jetzt leichtes Grau */
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  transition: transform .1s ease, background .2s ease, filter .2s ease, box-shadow .2s ease;
}
.details-link:hover{
  background: var(--mizo-gruen-dark); /* dunkleres Grün */
  transform: translateY(-1px);        /* nur Button bewegt sich leicht */
  filter: none;
}
.details-link:active{
  transform: translateY(0);
  box-shadow: none;
}

/* ==========================
   Footer
   ========================== */
.site-footer{
  background: var(--mizo-dunkel);
  color: #fff;
  padding: 46px 20px;
  text-align: center;
  margin-top: 40px;
}
.footer-content{ max-width: 860px; margin: 0 auto; }
.footer-heading{ font-weight: 600; margin: 0 0 8px; }
.site-footer p{ margin: 6px 0; }
.site-footer a{ color: #fff; text-decoration: underline; }
.site-footer a:hover{ color: var(--mizo-gruen); }
/* Fix: Übergang Logo-Block → Footer bündig (kein grauer Streifen) */
body {
  background: var(--mizo-dunkel);  /* gleiche Farbe wie Footer */
}
main {
  background: #fff;                /* Seitenbereiche bleiben hell */
}
section[aria-label="Event-Logo"] {
  margin-bottom: 0;
  padding-bottom: 0;
}
.social-links{ margin: 18px 0 12px; display: flex; gap: 14px; justify-content: center; }
.social-icon{ width: 42px; height: auto; filter: invert(100%); transition: filter .25s ease; }
.social-links a:hover .social-icon{ filter: brightness(150%); }

.legal-links a{ color: #ccc; text-decoration: none; margin: 0 8px; font-size: .92rem; }
.legal-links a:hover{ color: var(--mizo-gruen); }

/* START: Preise Section (neutral – Seiten entscheiden Farbe) */
.preise-section {
  background: transparent;     /* keine Grundfarbe */
  border: 0;                   /* keine Linien */
  padding: 50px 0;
  text-align: center;
}
.preise-section h2 { margin-bottom: 12px; }
.preise-section p  { margin: 6px 0; font-size: 1.05rem; }
/* END: Preise Section */

/* ==========================
   Typografie
   ========================== */
h1,h2,h3{ text-align: center; }
h1,h2,h3{ font-family: 'Montserrat', sans-serif; }

/* START: Teaser Gastro-Workshops */
.teaser-pro{ background:#eef9e3; padding:36px 0; text-align:center; margin-top:10px; }
.teaser-pro .wrap{ width:min(1100px,92%); margin:0 auto; }
.teaser-pro .cta-button{ margin-top:10px; }
/* END: Teaser Gastro-Workshops */

/* ==========================
   Responsive
   ========================== */
@media (max-width: 900px){
  .hero-section{ padding: 56px 18px 72px; }
  .hero-section h1{ font-size: 2.2rem; }
  .slogan{ font-size: 1.05rem; }
}

@media (max-width: 768px){
  body{ min-width: 100%; overflow-x: hidden; }
  .main-nav ul{ flex-direction: column; gap: 8px; padding-bottom: 6px; }

  /* normaler Abstand – kein 250px Workaround */
  .hero-section{ padding: 56px 18px 56px; }

  .cta-button{ padding: 10px 22px; font-size: .95rem; }
  .service-cards{ grid-template-columns: 1fr; gap: 22px; max-width: 640px; }
  .card{ padding: 18px; min-height: 0; }
  .details-link{ width: 100%; max-width: 240px; }
}

/* Kleines Focus-Upgrade */
a:focus-visible{ outline: 2px solid var(--mizo-gruen); outline-offset: 3px; border-radius: 6px; }
/* Anker-Ziele nicht unter den fixen Header schieben */
[id]{ scroll-margin-top: var(--header-h-desktop); }
@media (max-width: 768px){
  [id]{ scroll-margin-top: var(--header-h-mobile); }
}
@media (max-width: 700px){
  /* Karte im Popup als Spalte anordnen */
  .termine-overlay .termin-card{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Inhalt der Kopfzeile „auflösen“, damit Kinder (Text + Button) wie Geschwister angeordnet werden können */
  .termine-overlay .termin-head{
    display: contents; /* nur Layout, kein eigener Kasten */
  }

  /* Datum/Ort: volle Breite + Umbruch */
  .termine-overlay .termin-dp{
    order: 1;
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    word-break: break-word;
  }

  /* Status-Badge-Container unter den Datum/Ort-Text schieben */
  .termine-overlay .termin-meta{
    order: 2;
  }

  /* CTA-Button an dritter Position, volle Breite */
  .termine-overlay .popup-cta,
  .termine-overlay .details-link{
    order: 3;
    display: block !important;
    width: 100% !important;
    text-align: center;
    margin-top: 0; /* Abstand kommt über gap */
  }
}
/* Popup-Inhalt darf scrollen; Hintergrund bleibt fix */
.termine-overlay{
  position: fixed;        /* volle Viewport-Überlagerung */
  inset: 0;
  padding: 16px;
  /* display: none / flex wird bei dir schon über .is-open gesteuert */
  overscroll-behavior: contain;   /* Scroll nicht nach außen „durchreichen“ */
}

.termine-modal{
  max-height: 88vh;                 /* innerhalb des Viewports bleiben */
  overflow: auto;                   /* eigener Scroll */
  -webkit-overflow-scrolling: touch;
}

/* Wenn Popup offen ist, Body/HTML nicht scrollen */
html:has(.termine-overlay.is-open),
body:has(.termine-overlay.is-open){
  overflow: hidden;
}

/* ==========================
   LED-Laufleiste (global, fixed über Header)
   ========================== */
.mizo-ticker{
  position: fixed; top: var(--ticker-offset); left: 0; right: 0;
  z-index: 2500;
  height: var(--ticker-h-desktop);
  /* vertikal mittig */
  display: flex; align-items: center;
  padding: 4px 0;
  /* line-height nicht mehr erzwingen */
  color: #cfeac1;
  background: var(--mizo-dunkel);
  background-image: radial-gradient(circle at 4px 50%, rgba(255,255,255,0.04) 1px, transparent 2px);
  background-size: 16px 100%;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  font: 500 14px/1 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

.mizo-ticker .ticker-track{
  display: flex; gap: 48px; white-space: nowrap;
}

.mizo-ticker .ticker-items{
  display: inline-flex; gap: 48px; padding: 0 24px; margin: 0;
  list-style: none;
  animation: mizo-ticker-marquee 30s linear infinite;
  align-items: center;
  height: auto; /* statt 100% */
}

.mizo-ticker .ticker-items li{
  color: var(--mizo-gruen, #8BC34A);
  text-shadow: none;           /* Glow entfernt */
  letter-spacing: .2px;
}

.mizo-ticker .ticker-items li::after{
  content: "•"; display: inline-block; margin: 0 24px;
  color: rgba(255,255,255,.35); text-shadow: none;
}
.mizo-ticker .ticker-items li:last-child::after{ content: ""; margin: 0; }

.mizo-ticker:hover .ticker-items,
.mizo-ticker:active .ticker-items{ animation-play-state: paused; }

@keyframes mizo-ticker-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce){
  .mizo-ticker .ticker-items{ animation: none; }
}

@media (max-width: 768px){
  .mizo-ticker{
    height: var(--ticker-h-mobile);
    padding: 4px 0;
    line-height: calc(var(--ticker-h-mobile) - 8px);
    font-size: 13px;
  }
  .mizo-ticker .ticker-items{ gap: 36px; }
  .mizo-ticker .ticker-items li::after{ margin: 0 16px; }
}