/* Und ganz oben im global ersten Stylesheet (z. B. tokens.css) einmalig: */
/*
@layer overrides, base, components, utilities;

@layer overrides {
*/
/* gantari-regular - latin */


.sticky-enabled .main-navigation.is_stuck {
  box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.05);
  
  box-shadow: 0 2px 12px 0 rgba(36, 50, 66, .08);
}

.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .page-hero h5, .page-hero h6 {
    color: #ffffff;
/* background-color: #1784969c; */
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 875px;
}
.inside-page-hero p {
  max-width: 700px;
  font-size: 1.2em;
}

.page-hero .wp-element-button {
  border: 1px solid rgba(170,170,170,0);
  color: #fff;
}

.page-hero .wp-element-button:hover {
  background-color: #106476;
  color: #C0DEE3;
  border: 1px solid #aaa;
}


/* Desktop: Sticky-Menü NICHT ausblenden (auch wenn "Hide on scroll" aktiv ist) */
@media (min-width: 1028px) { /* ggf. an deinen Mobil-Breakpoint anpassen */
  /* GP nutzt bei Sticky/Hiding meist translateY; wir neutralisieren das */
  .main-navigation.is_stuck,
  .navigation-clone,
  .site-header,
  .site-header.sticky-navigation-transition,
  .main-navigation.is_stuck.sticky-navigation-transition {
    transform: none !important;
    top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}



.site-header .header-image { 
  border-radius: 4px;
}
@media (max-width: 528px) {
  .site-header .header-image { 
    max-width: 340px;
  }
}

/* Lange Wörter in Überschriften umbrechen */
h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;

  hyphens: auto;
  hyphens: none;              /* keine Silbentrennung */
}


/* === GP Dropdowns – minimal (nur Verhalten, keine Optik) === */
#primary-menu{
  --submenu-gap: 4px;        /* vertikale Lücke unter Ebene 1 */
  --submenu-slide: 15px;     /* Einfahrweg */
  --submenu-speed: .35s;     /* Dauer */
}

/* Hover-Brücke (unsichtbar, verhindert Abreißen beim Übergang) */
#primary-menu > ul > li.menu-item-has-children{ position: relative; }
#primary-menu > ul > li.menu-item-has-children::after{
  content:"";
  position:absolute;
  top:100%;
  left:-20px; right:-20px;
  height:var(--submenu-gap);
}

/* Nav darf nicht clippen (keine Optik-Änderung) */
.main-navigation .inside-navigation{ overflow: visible !important; }

/* Anker für absolute Submenüs */
#primary-menu li{ position: relative; }

/* Grundzustand (nur Sichtbarkeit/Position/Transition) */
#primary-menu ul.sub-menu{
  display: block !important;       /* Superfish aushebeln */
  position: absolute !important;
  top: auto; left: auto; right: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0);
  transition:
    opacity var(--submenu-speed) ease,
    transform var(--submenu-speed) ease;
  z-index: 9999;                   /* über Header-Teilen */
}

/* sichtbar bei Hover/Focus/GP-Toggle */
#primary-menu li:hover   > ul.sub-menu,
#primary-menu li.sfHover > ul.sub-menu,
#primary-menu li:focus-within > ul.sub-menu,
#primary-menu li.toggled-on > ul.sub-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Ebene 1: linksbündig unter Eltern, Slide-in von links */
#primary-menu > ul > li > ul.sub-menu{
  top: calc(100% + var(--submenu-gap));
  left: 0;
  right: auto;
  transform: translateX(calc(-1 * var(--submenu-slide)));
}
#primary-menu > ul > li:hover > ul.sub-menu,
#primary-menu > ul > li.sfHover > ul.sub-menu,
#primary-menu > ul > li:focus-within > ul.sub-menu,
#primary-menu > ul > li.toggled-on > ul.sub-menu{
  transform: translateX(0);
}

/* Ebenen 2+: Flyout nach LINKS (rechts andocken), mit Slide-in */
#primary-menu ul ul.sub-menu{
  top: 0;
  left: auto;
  right: 100%;
  transform: translateX(calc(-1 * var(--submenu-slide)));
}
#primary-menu ul li:hover > ul.sub-menu,
#primary-menu ul li.sfHover > ul.sub-menu,
#primary-menu ul li:focus-within > ul.sub-menu,
#primary-menu ul li.toggled-on > ul.sub-menu{
  transform: translateX(0);
}

/* Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce){
  #primary-menu ul.sub-menu{
    transition: none !important;
    transform: none !important;
  }
}

/* Mobile/Offcanvas: Submenüs normal im Fluss (keine Optik-Änderung) */
@media (max-width: 1024px){
  .main-navigation .sub-menu{
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* 1) Overflow wieder erlauben – sonst werden Flyouts abgeschnitten */
#primary-menu ul.sub-menu{
  overflow: visible !important; /* war: hidden → macht Flyouts kaputt */
}

/* Submenüs: Rundung + äußere Linie + dezenter Drop, Flyouts bleiben frei */
#primary-menu ul.sub-menu{
  border-radius: 6px;
  border: 1px solid #ddd;                 /* die feine Außenlinie */
  box-shadow: 0 6px 9px rgba(0,0,0,.09);  /* wie in deiner Ur-Version */
  overflow: visible;                       /* wichtig: Flyouts nicht abschneiden */
}

/* Ecken sauber, auch wenn Link-Hintergründe vollflächig sind */
#primary-menu ul.sub-menu > li:first-child > a{
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
#primary-menu ul.sub-menu > li:last-child > a{
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* (belassen) Footer-Links */
.footer-widgets a{ text-decoration:none; }
.footer-widgets a:hover{ 
/*  text-decoration:underline; */
}

/* nur Farbe */
/* kein BG-Übergang */
/*
.site-footer a,
.footer-widgets a,
.footer-bar a {
  transition: color .15s ease;      background-color: transparent;   text-shadow: none;
}
*/
/* vermeidet AA-Flimmern */
/*
.site-footer a,
.footer-widgets a,
.footer-bar a {
  transition: none !important;        background-color: transparent;  
  text-shadow: none;
}
*/
/*
.site-footer .footer-widgets-container aside.inner-padding {
  padding-left: 0;
  padding-right: 40px;
}
*/

/* Basis: keine BG-Transition im Footer */
.site-footer a,
.footer-widgets a,
.footer-bar a {
  text-decoration: none;
  border-bottom: 1px solid transparent;              /* reserviert die Höhe */
  transition: color .3s ease, border-color .3s ease;  /* nur Farbe animieren */
}

.site-footer a:hover,
.site-footer a:focus-visible,
.footer-widgets a:hover,
.footer-widgets a:focus-visible,
.footer-bar a:hover,
.footer-bar a:focus-visible {
  color: var(--footer-link-hover, #fff);
  border-bottom-color: currentColor;                  /* „fadet“ ein */
}

/* Footer-Logo vom Hover-Rand ausschließen */
.site-footer .site-logo a,
.footer-widgets .site-logo a {
  border-bottom: none !important;
  transition: none !important;
}
/* optional: kein Farbwechsel beim Hover */
.site-footer .site-logo a:hover,
.footer-widgets .site-logo a:hover {
  color: inherit !important;
  border-bottom: none !important;
}
.footer-bar p {
  margin-bottom: 0;
}
.site-info {
  font-size: 0.9em;
}
.site-info {
  font-size: 13px;
}


.blog-card-image {
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  transform: scale(1);
  transform-origin: center center;
}

.blog-card-image:hover img {
  transform: scale(1.1);
}

/* Nur Blog-Titel-Links im Loop-Item */
.gb-loop-item h2 a {
  text-decoration: none;        /* keine Unterstreichung standard */
  text-transform: none;         /* keine Großschreibung erzwingen */
}

.gb-loop-item h2 a:hover {
  text-decoration: underline;   /* Unterstreichung nur beim Hover */
}


.footer-social .gb-social-icon a {
  background-color: #ffffff;    /* Kreis weiß */
  color: #006f87;               /* Icon-Farbe */
  border-radius: 50%;           /* rund */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.footer-social .gb-social-icon a:hover {
  background-color: #006f87;    /* Hintergrund wechselt */
  color: #ffffff;               /* Icon wird weiß */
}




:root{
  --reveal-distance: 36px;              /* mehr Weg = mehr „Wumms“ */
  --reveal-duration: 700ms;             /* etwas länger */
  --reveal-delay-step: 120ms;           /* Stagger-Schritt */
  --reveal-ease: cubic-bezier(.21,.73,.16,.99); /* knackiges Easing */
}

/* Startzustand */
.reveal-up{
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(.98);
  filter: blur(6px);
  transition:
    transform var(--reveal-duration) var(--reveal-ease),
    opacity   var(--reveal-duration) var(--reveal-ease),
    filter    calc(var(--reveal-duration)*.9) var(--reveal-ease);
  will-change: transform, opacity, filter;
}

/* Sichtbar */
.reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Nur für das Produktkarten-Grid */
.stagger-grid > *:nth-child(1)  { --delay: 0ms; }
.stagger-grid > *:nth-child(2)  { --delay: 120ms; }
.stagger-grid > *:nth-child(3)  { --delay: 240ms; }
.stagger-grid > *:nth-child(4)  { --delay: 360ms; }
.stagger-grid > *:nth-child(5)  { --delay: 480ms; }
.stagger-grid > *:nth-child(6)  { --delay: 600ms; }

/* Stagger: Delay je Karte (wird per JS gesetzt) */
/* Wichtig: beide Reveal-Klassen nutzen diese Variable */
.reveal-up,
.reveal-image {
  transition-delay: var(--delay, 0ms);
}

/* Bewegungen respektieren */
@media (prefers-reduced-motion: reduce){
  .reveal-up{ transition:none; transform:none; opacity:1; filter:none; }
}



/* Hauptmenü + Submenüs = Rubik Regular */
.main-navigation a,
.main-navigation .sub-menu a {
  font-family: 'Rubik', sans-serif;1
  font-family: 'Gantari', sans-serif;
  font-weight: 700;
/*  text-transform: uppercase; */
}

/* Footer-Menüs */
.site-footer a,
.site-footer .footer-navigation a {
  font-family: 'Gantari', sans-serif;
  font-weight: 400;
}
/* SUBfooter  */
.site-footer .site-info a {
  font-family: inherit;
}

.site-footer h1, .site-footer h2 {
  text-transform: uppercase !important; 
}

/* Überschriften = Rubik Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik', sans-serif;
  font-family: 'Gantari', sans-serif;
  font-weight: 700;
  text-transform: none !important;
}

.entry-content p {
  font-size: 1.2rem;
  line-height: 1.6;
/*  hyphens: auto; */
}

/* Buttons = Rubik Bold */
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link {
  font-family: 'Rubik', sans-serif;
  font-family: 'Gantari', sans-serif;
  font-weight: 700;
}

/* Basis-Styling für Pill-Buttons */
.pill-button {
  display: inline-block;
  padding: 0.4em 1.2em;
  border: 2px solid #178496;   /* Rahmenfarbe */
  border-radius: 9999px;       /* macht sie pillenförmig */
  background-color: #fff;      /* Standard: weiß */
  color: #178496;              /* Textfarbe */
  font-weight: 600;
  font-size: 0.95em;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

/* Hover-Effekt */
.pill-button:hover {
  background-color: #178496;   /* grün */
  color: #fff;                 /* weißer Text */
}
/* Hover-Effekt */
.pill-button:active {
  background-color: #178496;   /* grün */
  color: #fff;                 /* weißer Text */
}

/* Aktiver Zustand */
.pill-button.active {
  background-color: #178496;
  color: #fff;
}

/* === Invertierte Pill-Button-Variante (kompakter für Header) === */
.pill-button--invert {
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* flacher & dezenter */
  padding: 0.15em 1em;           /* war 0.4em 1.2em */
  font-size: 0.9em;
  line-height: 1.1;

  background-color: #fff;     /* ursprüngliche Farbe */
  color: #fff;
  border: 2px solid #178496;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease-in-out;
}

.pill-button--invert:hover,
.pill-button--invert:focus-visible {
  background-color: #178496;     /* gleiche Farbe */
  color: #fff;                   /* bleibt weiß */
  opacity: .9;                   /* dezente Hover-Rückmeldung */
}

.main-navigation .main-nav ul li.menu-item-pillbutton a {
  line-height: 28px;
}
.menu-item-pillbutton {
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a.pill-button { color: #fff; }



.main-navigation .main-nav ul li a.pill-button--invert {
  margin-left: 20px;
}

/* kompakte invertierte Variante für den Header */
.pill-button--invert{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  padding: 0.12em 1.0em;
  background-color: #178496;
  font-size:.9em; line-height:1.1;
  color:#fff;
  border:2px solid #178496; 
  border-radius:9999px;
  font-weight:600; 
  text-decoration:none;
  transition:all .2s ease-in-out;
}
.pill-button--invert:hover,
.pill-button--invert:focus-visible{
  background:#178496; 
  color:#fff; 
  opacity:.9;
}

#site-navigation:not(.toggled) .main-nav ul li a.pill-button--invert {
  color: #fff !important;
}

/* === Sticky-Menü: angepasster Stil für Header-Button === */
.is_stuck .pill-button--invert {
  background-color: #fff;         /* z.B. hell statt petrol */
  color: #178496;                 /* Schrift petrol */
  border-color: #178496;          /* Rahmen petrol */
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: all .25s ease-in-out;
}
.is_stuck .pill-button--invert:hover,
.is_stuck .pill-button--invert:focus-visible {
  background-color: #178496;      /* invertiert wieder petrol */
  color: #fff;
}

/* optional: im Offcanvas (<=1024px) leicht größer klickbar machen */
@media (max-width:1024px){
  .pill-button--invert{ padding: .18em 1.05em; }
}






/* --- Navigation darf nicht clippen --- */
.main-navigation .inside-navigation { overflow: visible !important; }
#primary-menu li { position: relative; overflow: visible !important; }

/* --- Menü-Item & Toggle --- */
.menu-item-langdrop{ display:flex; align-items:center; }
.langdrop{ position: relative; z-index: 10010; }
.langdrop-toggle{
  --size: 36px;
  display:inline-flex; align-items:center; gap:8px;
  height:var(--size); padding:0 10px;
  background:#fff; color:#006f87; border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  font:700 12px/1 'Rubik',system-ui,sans-serif;
  font:700 12px/1 'Gantari',system-ui,sans-serif;
  box-shadow:0 2px 6px rgba(0,0,0,.06); cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.langdrop-toggle:hover,
.langdrop-toggle:focus-visible{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.10); border-color:rgba(0,0,0,.2); outline:none; }

/* --- Panel: standard ZU --- */
.langdrop-menu{
  position:absolute; top:calc(100% + 10px); right:0; left:auto;
  min-width:200px; padding:8px; margin:0;
  background:#fff; color:#123;
  border:1px solid rgba(0,0,0,.14); border-radius:10px;
  box-shadow:0 14px 28px rgba(0,0,0,.16);
  display:block;                     /* nie display:none */
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:100000;
}

/* --- Panel: AUF (Hover/Fokus + JS .is-open) --- */
.langdrop:hover .langdrop-menu,
.langdrop:focus-within .langdrop-menu,
.langdrop.is-open .langdrop-menu{
  opacity:1; visibility:visible; transform:translateY(0);
  transition-delay:0s;
}

/* --- Einträge --- */
.langdrop-menu .lang-option{
  display:flex; align-items:center; gap:.6rem;
  padding:.1rem .7rem; border-radius:8px; text-decoration:none;
  color:#123;
  font:600 14px/1.2 'Rubik',system-ui,sans-serif;
  font:600 14px/1.2 'Gantari',system-ui,sans-serif;
  transition:background-color .15s ease, color .15s ease;
}
.langdrop-menu .lang-option .code{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:#f3f7f8; color:#006f87;
  font:700 11px/1 'Rubik',sans-serif;
  font:700 11px/1 'Gantari',sans-serif;
}
.langdrop-menu .lang-option:hover,
.langdrop-menu .lang-option:focus-visible{ background:#f1f7f8; outline:none; }
.langdrop-menu .lang-option.is-active .code{ background:#006f87; color:#fff; }

/* --- Menüabstand angleichen --- */
.main-navigation .menu > .menu-item-langdrop{ padding:0 var(--menu-item-padding, 15px); }

/* Nur Alt-Startseite */
.home-alt .site-header,
.home-alt .main-navigation {
  background: #fff;
}

/* Sticky-Schatten */
.home-alt .main-navigation.is_stuck {
  box-shadow: 0 2px 12px rgba(36,50,66,.08);
}

/* Hero-Card-Rahmen */
.home-alt .hero-card { 
  max-width: min(1200px, 94vw);
  margin: clamp(16px, 3vw, 28px) auto 0;
  padding-inline: clamp(100px, 2vw, 16px);
}

/* Bild-Card mit runden Ecken */
.home-alt .hero-card-media{
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  background: #0b2f35; /* Fallback Farbe */
}

/* Wenn du ein IMG statt BG nutzt: */
.home-alt .hero-card-media img{
  display:block; width:100%; height: clamp(280px, 48vw, 520px);
  object-fit: cover; object-position: center;
}

/* Text unter der Card harmonisch halten */
.home-alt .hero-card + .hero-text {
  max-width: min(1100px, 94vw);
  margin: clamp(16px, 2.5vw, 28px) auto 0;
  text-align: left; /* oder center – Geschmackssache */
}


/* nur auf der alternativen Startseite */
.home-alt .hero-card {
  border-radius: 24px;
  overflow: hidden;
/*  box-shadow: 0 16px 40px rgba(0,0,0,.15); */
  margin: 24px auto;
  max-width: 1200px;  /* damit er nicht bis ganz an die Ränder geht */
}

/* ---------- ALT-Startseite: Hero-Card ---------- */
.home-alt .hero-card{
  /* Breiter als Content */
  max-width: min(1392px, 96vw);
  margin: clamp(20px, 3vw, 28px) auto 0;

  border-radius: 24px;
  overflow: hidden;
  position: relative;

  background-size: cover;
  background-position: center;
  min-height: clamp(420px, 48vw, 560px);

  /* Drop-Shadow statt Box-Shadow → weich, kein abgeschnittener Rand */
/*  filter: drop-shadow(0 28px 44px rgba(7,63,70,.22)); */
}

/* Text/Buttons im Hero bleiben über dem Tint */
.home-alt .hero-card > *{ 
  position: relative; 
  z-index: 1; 
}

/* Wenn statt BG ein IMG genutzt wird */
.home-alt .hero-card img{
  display:block; 
  width:100%;
  height: clamp(420px, 48vw, 560px);
  object-fit: cover; 
  object-position: center;
}

/* Sticky-Wechsel ohne animierte translate/opacity → kein Jank */
.main-navigation,
.site-header,
.navigation-clone,
.sticky-navigation-transition {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto;
}

/* Höhe des Headers reservieren – verhindert den Mini-Sprung */
:root{ --header-h: 57px; }   /* ggf. auf eure reale Headerhöhe anpassen */
.navigation-clone{
  display:block !important;
  height: var(--header-h) !important;
}
.home-alt .hero-card{
  contain: paint;
  will-change: filter;
}
/* Mehr Luft oben im Hero-Text */
.home-alt .hero-card .inside-page-hero{
  padding-top: clamp(26px, 5vw, 122px); /* ↑ hier höher/tiefer stellen */
}

/* Falls dein Page-Hero-Text NICHT in .inside-page-hero steckt,
   nimm ersatzweise den direkten Inhalt des Hero-Containers: */
.home-alt .hero-card > *{
  position: relative; z-index: 1;
}
/* Alternative Zielklasse, wenn du einen eigenen Content-Container hast:
.home-alt .hero-card .gb-container{ padding-top: 56px; }
*/


/* Bild-Block in der rechten Spalte randlos und deckend */
.col-media img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;         /* füllt die Spaltenhöhe sauber aus */
}

/* Falls die Spalten-Höhen mal auseinanderlaufen: */
.gb-grid > .gb-grid-column {
  align-self: stretch;
}


/*
@media (max-width:1128px){
  .main-navigation .inside-navigation{ outline:1px solid magenta; }
  .menu-toggle{ outline:1px solid cyan; }
  .site-logo img{ outline:1px solid lime; }
}
*/


@media (max-width:1129px){
  :root{ --mobile-header-h: 60px; }

  .main-navigation .inside-navigation{
    min-height: var(--mobile-header-h);
    padding-block: 0 !important;
    display: flex;
    align-items: center;
  }

  .menu-toggle{
    height: var(--mobile-header-h) !important;
    line-height: var(--mobile-header-h) !important;
    padding: 0 !important;
  }

  .menu-toggle .gp-icon svg{ width:22px; height:22px; }

  /* nur zur sauberen Vertikalzentrierung; keine Größenbegrenzung */
  .site-logo a{ display:flex; align-items:center; }
}

.client-marquee .marquee-track{
  flex-wrap: nowrap !important;
  animation: marquee-scroll var(--marquee-speed, 35s) linear infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}
/* Falls du nicht löschen willst: direkt danach erneut aktivieren */
@media (prefers-reduced-motion: reduce){
  .client-marquee .marquee-track{
    animation: marquee-scroll var(--marquee-speed, 35s) linear infinite !important;
  }
}


/* Veranstaltungen */
/* ========= Allgemein / Seite ========= */
html { background-color: #0c464c; } /* dein Workaround für Footer-Bleed */

.veranstaltungen-template .page-title{
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.2;
  margin: 10px 20px 30px;
  font-weight: 700;
}

/* ========= Layout ========= */
.veranstaltungen-wrapper{
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-columns: 242px 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 1128px){
  .veranstaltungen-wrapper{ grid-template-columns: 1fr; 
    gap: 10px;
}
}

/* ========= Filter-Spalte ========= */
.veranstaltungen-filter{
  background: #f4f7f7;
  padding: 20px;
  border-radius: 12px;
}

/* Mobile-Toggle */
.filter-toggle{
  display: none;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cfe0e3;
  background: #eef5f6;
  font-weight: 600;
  margin: 8px 0 12px;
}
@media (max-width: 1128px){
  .filter-toggle{ display: inline-flex; align-items: center; gap: 8px; }
  .veranstaltungen-filter{ display: none; }
  .veranstaltungen-filter.is-open{ display: block; }
}

/* Produkte (Checkboxen) */
.checkbox-grid{
  display: grid;
  gap: 8px;
}
.chk{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid #dbe7ea;
  border-radius: 10px;
  background: #f6fbfc;
}
.chk input{ width: 16px; height: 16px; }

/* Event-Links (Pills) */
.event-links{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.event-pill{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #cfe0e3;
  border-radius: 999px;
  background: #eef5f6;
  text-decoration: none;
  font-weight: 600;
}
.event-pill.is-active{
  background: #dff1f3;
  border-color: #9ec9cf;
}

/* ========= Listing / Karten ========= */
.veranstaltungen-grid{
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){
  .veranstaltungen-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .veranstaltungen-grid{ grid-template-columns: 1fr; }
}

.veranstaltung-card{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}
.veranstaltung-card:hover{ transform: translateY(-4px); }

/* Bild sauber beschneiden */
.card-image{
  aspect-ratio: 16/9;
  overflow: hidden;
}
.card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content{ padding: 16px; }

/* Badges */
.card-badges{
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.badge{
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(0,0,0,.08);
  background: #f5f7f8;
}
.badge-art{   background: #e8f6ea; border-color: #cfead4; }
.badge-thema{ background: #e7f0f3; border-color: #cddde3; }

/* Meta / Titel / Ort */
.card-meta{
  display: flex;
  font-size: 0.9em;
  color: #666;
  margin-bottom: 6px;
}
.card-meta span:last-child {
  margin-left: auto;
}
.card-title{
  font-size: 1.1em;
  margin: 0 0 6px;
  margin: 0;
}
.card-ort{
  font-size: 0.95em;
  color: #444;
  margin-bottom: 0;
}

/* Link-Verhalten: nur Titel unterstreichen beim Hover */
.veranstaltung-card a{
  text-decoration: none !important;
}
.veranstaltung-card .card-title{ text-decoration: none; }
.veranstaltung-card:hover .card-title{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
  text-decoration-skip-ink: auto;
}
/* Tastaturfokus */
.veranstaltung-card a:focus-visible{
  outline: 2px solid #007c89; /* Petrol */
  outline-offset: 4px;
}

.filter-title {
  font-size: 18px;
  margin-bottom: 15px;
}
.filter-title.event {
  margin-top: 20px;
}

.back-to-events { margin-top: 24px; }
.btn-back-events {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cfe0e3;
  background: #eef5f6;
  text-decoration: none;
  font-weight: 600;
}
.btn-back-events:hover { text-decoration: underline; }

/* Bild quadratisch */
.card-image { aspect-ratio: 1 / 1; }

/* Meta-Reihe: Datum links fett, Ort rechts */
.card-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-size:0.95em;
  color:#445;
  margin-bottom:6px;
}
.card-date{ font-weight:700; }
.card-ort{
  opacity:.9;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  margin-bottom:0; /* falls vorher gesetzt */
}

/* Kurztext unter Titel */
.card-excerpt{
  margin:6px 0 0;
  font-size:0.95em;
  color:#444;
}


/* Standard (Desktop): kein zusätzliches Padding */
.veranstaltungen-template .page-title,
.veranstaltungen-wrapper{
  padding-left: 0;
  padding-right: 0;
}

/* Mobile ≤ 980px: seitliche Abstände hinzufügen */
@media (max-width:1128px){
  .veranstaltungen-template .page-title,
  .veranstaltungen-wrapper{
    padding-left: 16px;  /* ggf. anpassen */
    padding-right: 16px;
  }
}

/* ---------- Mobile: Filter-Toggle & Panel ---------- */
@media (max-width:1128px){
  /* Toggle gut sichtbar */
  .filter-toggle{
    width: 100%;
    justify-content: center;
    background: #0c464c;       /* Petrol dunkel */
    border-color: #0c464c;
    color: #fff;
  }

  /* Panel hebt sich vom Weiß ab + Innenabstand */
  .veranstaltungen-filter{
    display: none;              /* bleibt vom Toggle gesteuert */
    background: #ffffff;
    border: 1px solid #d6e6e9;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
  }
  .veranstaltungen-filter.is-open{ display:block; }

  /* Pills leicht absetzen auf Weiß */
  .event-pill{ background:#f1f7f8; border-color:#cfe0e3; }

  /* Checkbox-Karten im Panel etwas enger */
  .checkbox-grid{ gap:6px; }
  .chk{ padding:7px 10px; }
}

/* ---------- Mobile: Karten/Gitter-Abstände ---------- */
@media (max-width:1128px){
  .veranstaltungen-grid{ gap: 16px; }         /* kleinere Lücken */
  .card-content{ padding: 14px; }
}

/* (Optional) Überschrift oben etwas enger auf Mobile */
@media (max-width:1128px){
  .veranstaltungen-template .page-title{ margin: 10px 0 14px; }
}


/* Nur im Header eine andere "Contrast"-Farbe verwenden */
@media (max-width: 1129px){ /* dein mobiler Breakpoint */
/*  .main-navigation { --contrast: #ffffff; }  */       /* Icon/Text weiß */
  .main-navigation .menu-toggle { /* background: #ccc; border-color:#0c464c; */ padding: 4px !important; }
  
}







/* Wide Banner Tile + Overlay Card (für GenerateBlocks) */
.fsd-banner { /* padding-block: clamp(16px, 4vw, 28px); */ }

.banner-tile{
  --tile-radius: 16px;
  --tile-minh: clamp(320px, 48vw, 520px);
  --tile-pad: clamp(16px, 3vw, 32px);
  position: relative;
  border-radius: var(--tile-radius);
  overflow: hidden;
  min-height: var(--tile-minh);
  background-color: var(--bg, #eef3f5);
}

/* Bild-Variante + sanfte Abdunklung für Lesbarkeit */
.banner-tile.has-image{
  background-size: cover;
  background-position: center;
}
.banner-tile.has-image::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.10));
  pointer-events:none;
}

/* Weiße Overlay-Karte */
.banner-card{
  --card-w: min(560px, 92%);
  position: absolute;
  right: var(--tile-pad);
  bottom: var(--tile-pad);
  width: var(--card-w);
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
}
.banner-card h2{ margin: 0 0 .35em; }
.banner-card p{ margin: 0 0 1rem; }

/* Mobil: Karte in den Fluss, volle Breite */
@media (max-width: 768px){
  .banner-card{
    position: static;
    width: auto;
    margin: var(--tile-pad);
  }
}

/* Nur Buttons mit .btn-center werden zentriert */
.banner-card a.btn,
.banner-card .wp-block-button__link.btn, .btn-center{
  display:block;
  width:max-content;
  margin-inline:auto;
}

















#fancybox-outer, #fancybox-content {
  border-radius: 10px;
}


body.page-slug-unternehmen .page-hero {
  background: linear-gradient(90deg,
              rgba(1,44,51,.85) 0%,
              rgba(1,44,51,.3) 60%,
              rgba(1,44,51,0) 80%),
              url(https://flowscience.suralin.de/uploads/magma-gebaeude2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.inside-page-hero {
  margin-left: clamp(0px, 6vw, 200px);
}





/* --- Marquee: Parameter --- */
.client-marquee{
  --marquee-speed: 35s;   /* schneller/langsamer machen */
  --logo-gap: 68px;       /* Abstand zwischen Logos */
  --edge-fade: 5%;        /* Breite der Kanten-Ausblendung */
  overflow: hidden;
  position: relative;
  /* dezente Kanten-Ausblendung */
  -webkit-mask-image: linear-gradient(to right,
      transparent, black var(--edge-fade), 
      black calc(100% - var(--edge-fade)), transparent);
          mask-image: linear-gradient(to right,
      transparent, black var(--edge-fade), 
      black calc(100% - var(--edge-fade)), transparent);
}

.client-marquee .marquee-track{
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  width: max-content;                 /* so breit wie der Inhalt */
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}

/* neu: nur Container-Hover pausiert */
.client-marquee:hover .marquee-track{ animation-play-state: paused; }

/* Logos (Graustufen → Farbe) */
.client-marquee .logo img{
  display:block;
  max-height: 100px;   /* z. B. 36 px statt 60 px */
  width: auto;        /* proportional skalieren */
  height: auto;
/*  filter: grayscale(100%); */
  opacity: .8;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.client-marquee .logo:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}

/* Animation: verschiebe um 50% der Track-Breite (weil doppelt vorhanden) */
@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


.client-marquee .logo{ flex: 0 0 auto; display: block; }  /* NEU */

.client-marquee:hover .marquee-track{
  animation-play-state: paused !important;
}

/* während des Neuaufbaus Animation stoppen */
.client-marquee.is-preparing .marquee-track{ animation: none !important; }

.client-marquee .marquee-track{
  animation-delay: .2s;
}



/* Container, in dem das Video liegt */
.bgvideo-section {
  position: relative;
  overflow: hidden;             /* schneidet Video an den Kanten sauber ab */
/*
  min-height: clamp(360px, 60vh, 720px); */
  border-radius: 24px;          /* optional, wenn du runde Ecken willst */
  border: 1px solid #aaa;
  max-width: min(1200px, 100%);
}
.bgvideo-section {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
/* Das Video füllt den Container flächig */
.bgvideo-section .bgvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
/*  object-fit: cover; */         /* „cover“ = randlos füllen wie Background-image */
  z-index: 0;
  filter: none;                 /* ggf. Helligkeit: filter: brightness(.8) */
  top: 1px;
}

/* Optional: dunkler Verlauf-Overlay für bessere Lesbarkeit */
.bgvideo-section::after {
  content: "";
  position: absolute;
  inset: 0;
/*
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15),
    rgba(0,0,0,.15)
  ); */
  z-index: 1;
}



/* Inhalt liegt über Video + Overlay */
.bgvideo-section .bgvideo-content {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 6vw, 80px);
  color: #fff;
}

/* Barrierefreiheit: Nutzer mit „reduce motion“ bekommen das Poster statt Video */
/*
@media (prefers-reduced-motion: reduce) {
  .bgvideo-section .bgvideo {
    display: none;
  }
  .bgvideo-section {
    background: center/cover no-repeat url("https://flowscience.suralin.de/uploads/2025tracer_poster.jpg");
  }
}
*/
/* Optional: auf sehr kleinen Screens Video ganz abschalten (Traffic sparen) */
/*
@media (max-width: 480px) {
  .bgvideo-section .bgvideo {
    display: none;
  }
  .bgvideo-section {
    background: center/cover no-repeat url("https://flowscience.suralin.de/uploads/2025tracer_poster.jpg");
  }
}
*/

/* Hover-Zustand: Overlay wird transparent */
.bgvideo-section:hover::after {
  background: rgba(0,0,0,0.0);
}

/* Optional: auf Touch-Geräten keine Hover-Reaktion */
@media (hover: none) {
  .bgvideo-section:hover::after {
    background: rgba(0,0,0,0.35);
  }
}
/*
.bgvideo-section:hover::after {
  background: rgba(0,0,0,0.15);
} */


:root{
  --sticky-h: 57px; /* Sticky-Headerhöhe (Desktop) */
}

/* Globaler Offset für Anker-Scrollen */
html{
  scroll-padding-top: var(--sticky-h);
  /* scroll-behavior: smooth; */ /* optional */
}

/* Eingeloggt: +32px Admin-Bar */
@supports selector(html:has(body.admin-bar)){
  html:has(body.admin-bar){
    scroll-padding-top: calc(var(--sticky-h) + 32px);
  }
}

/* Mobil ggf. höhere Headerhöhe */
@media (max-width: 768px){
  :root{ --sticky-h: 64px; }
  @supports selector(html:has(body.admin-bar)){
    html:has(body.admin-bar){
      scroll-padding-top: calc(64px + 32px);
    }
  }
}

/* Fallback (ohne :has): setze auf den Ziel-Containern eine Klasse, z.B. .anchor-target */
.anchor-target{ scroll-margin-top: var(--sticky-h); }
.admin-bar .anchor-target{ scroll-margin-top: calc(var(--sticky-h) + 32px); }





/* =========================
   FSD HERO – Vollbreit (auto-aktiv per :has())
   ========================= */

/* ---- Globale Variablen ---- */
:root{
  --header-h: 57px;        /* Desktop-Headerhöhe */
  --content-gap: 0px;
  --adminbar-h: 32px;      /* WP-Adminbar: Desktop */
  --hero-extra: 43px;      /* Grundoffset (dein Restwert) */
  --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));

  /* Feinkorrektur-Variablen (standardmäßig 0) */
  --gap-fix: 0px;             /* Zusatzoffset ohne Adminbar */
  --adminbar-gap-fix: 0px;    /* Zusatzoffset MIT Adminbar */
}

/* Headerhöhe ≤1129px */
@media (max-width:1129px){ :root{ --header-h: 64px; } }

/* Mobile Adminbar-Höhe */
@media (max-width:782px){ :root{ --adminbar-h: 46px; } }

/* Mobile: höherer Header */
@media (max-width:768px){
  :root{
    --header-h: 160px;
    --hero-extra: 0px;
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}

/* Tablet-Feinkorrekturen (deine Messung):
   769–903 px: +2 px, 904–1104 px: +1 px, 1105–1129 px: Basis */
@media (min-width:769px) and (max-width:903px){
  :root{
    --header-h: 154px;
    --hero-extra: 45px; /* 43 + 2 */
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}
@media (min-width:904px) and (max-width:1104px){
  :root{
    --header-h: 154px;
    --hero-extra: 44px; /* 43 + 1 */
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}
@media (min-width:1105px) and (max-width:1129px){
  :root{
    --header-h: 154px;
    --hero-extra: 43px;
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}

/* Tablet-Bereich (≤1129px): gemessene Rest-Gaps */
@media (max-width:1129px){
  :root{
    --gap-fix: 53px;          /* ohne Adminbar */
    --adminbar-gap-fix: 21px; /* zusätzlich mit Adminbar */
  }
}

/* =========================
   Hero-Block (Gestaltung)
   ========================= */
.fsd-fullmore{
  --hero-h: clamp(570px, 60vw, 770px);
  --pad-inline: clamp(40px, 4vw, 42px);
  --pad-top: clamp(48px, 14vw, 250px);

  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  min-height: var(--hero-h);

  background-color:#0b2f35;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  border-radius:0;
  overflow:hidden;
  isolation:isolate;
}

/* Vollbreit, keine Rundungen/Schatten */
.fsd-fullmore.hero-wide{
  width:100vw;
  max-width:100vw;
  margin:0;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Inhalt */
.fsd-fullmore .fsd-hero__inner{
  position:relative;
  z-index:1;
  padding: var(--pad-top) var(--pad-inline) clamp(22px, 5vw, 42px);
  color:#e8f2f4;
}
.fsd-fullmore h1{
  margin:0 0 .35em 0;
  color:#fff;
  max-width:830px;
  line-height:1.08;
  font-weight:normal;
}
.fsd-fullmore p{
  max-width:700px;
  font-size:clamp(1.05rem, 1.2vw + .6rem, 1.25rem);
  line-height:1.6;
  margin:0 0 1.1em 0;
  color:#d7e7ea;
}
/* Button */
.fsd-fullmore .wp-element-button{
  border-radius:7px;
  font-weight:700;
  border:1px solid rgba(170,170,170,0);
  color:#fff;
}
.fsd-fullmore .wp-element-button:hover{
  background-color:#106476;
  color:#c0dee3;
  border-color:#aaa;
}

/* Tint/Overlay */
.fsd-fullmore.hero--tint::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background: linear-gradient(0deg, rgba(2,44,51,.70), rgba(2,44,51,.70));
  opacity:1;
  transition:opacity .6s ease;
}

.fsd-fullmore.hero--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        90deg,
        rgba(1, 44, 51, 0.85) 0%,
        rgba(1, 44, 51, 0.5) 50%,
        rgba(1, 44, 51, 0) 65%
    );
    opacity: 1;
    transition: opacity .6s ease;
}
.fsd-fullmore.hero--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        /* fester Verlauf von oben nach unten */
        linear-gradient(
            180deg,
            rgba(1, 44, 51, 0.65) 0px,   /* oben dunkler */
            rgba(1, 44, 51, 0.0) 120px   /* löst sich nach unten schnell auf */
        ),
        /* seitlicher Verlauf (wie bisher) */
        linear-gradient(
            90deg,
            rgba(1, 44, 51, 0.85) 0%,
            rgba(1, 44, 51, 0.5) 50%,
            rgba(1, 44, 51, 0) 65%
        );
    opacity: 1;
    transition: opacity .6s ease;
}




/* =========================
   Adminbar-Basis
   ========================= */
#wpadminbar{
  position: fixed !important;
  top: 0 !important; left: 0; right: 0;
  z-index: 100000 !important;
}
html.admin-bar{ margin-top: 0 !important; }   /* WP-Default neutralisieren */
.site-header{ margin-top: 0 !important; }     /* keine Bänder durch Margins */

/* =========================
   Overlap-Logik – auto via :has()
   ========================= */
@supports (selector(:has(*))) {

  /* Header/Navi über dem Hero NUR solange NICHT sticky */
  body:has(.inside-article > .fsd-fullmore:first-child) .site-header:not(.is_stuck),
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .site-header:not(.is_stuck),
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .site-header:not(.is_stuck),
  body:has(.inside-article > .fsd-fullmore:first-child) .site-header .main-navigation:not(.slideout-navigation):not(.is_stuck),
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .site-header .main-navigation:not(.slideout-navigation):not(.is_stuck),
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .site-header .main-navigation:not(.slideout-navigation):not(.is_stuck){
    position: relative;
    z-index: 1000;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* Links oben weiß (nur im Nicht-Sticky-Zustand) */
  body:has(.inside-article > .fsd-fullmore:first-child) .site-header .main-navigation:not(.slideout-navigation):not(.is_stuck) .main-nav > ul > li > a,
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .site-header .main-navigation:not(.slideout-navigation):not(.is_stuck) .main-nav > ul > li > a,
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .site-header .main-navigation:not(.slideout-navigation):not(.is_stuck) .main-nav > ul > li > a{
    color:#fff !important;
  }

  /* Sticky wieder DECKEND – gleicher Kontext & höhere Spezifität */
  body:has(.inside-article > .fsd-fullmore:first-child) .site-header .main-navigation.is_stuck,
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .site-header .main-navigation.is_stuck,
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .site-header .main-navigation.is_stuck{
    background:#fff !important;
    box-shadow:0 2px 12px rgba(36,50,66,.08) !important;
  }

  /* (optional) wenn GP die Klasse auch auf .site-header setzt */
  body:has(.inside-article > .fsd-fullmore:first-child) .site-header.is_stuck{
    background:#fff !important;
    box-shadow:0 2px 12px rgba(36,50,66,.08) !important;
  }

  /* Sticky-Clone (Höhen-Reservierung) */
  body:has(.inside-article > .fsd-fullmore:first-child) .navigation-clone,
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .navigation-clone,
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .navigation-clone{
    display:block !important;
    height: var(--header-h) !important;
    background: transparent !important;
  }

  /* System-Topabstände neutralisieren */
  body:has(.inside-article > .fsd-fullmore:first-child) #page,
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) #page,
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) #page,
  body:has(.inside-article > .fsd-fullmore:first-child) #content.site-content,
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) #content.site-content,
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) #content.site-content,
  body:has(.inside-article > .fsd-fullmore:first-child) .content-area,
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .content-area,
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .content-area,
  body:has(.inside-article > .fsd-fullmore:first-child) .site-main,
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .site-main,
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .site-main,
  body:has(.inside-article > .fsd-fullmore:first-child) .inside-article,
  body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .inside-article,
  body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .inside-article{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* Hero exakt unter den Header ziehen (+ Tablet-Gap-Fix) */
  .inside-article > .fsd-fullmore:first-child,
  .inside-article > .entry-content > .fsd-fullmore:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore{
    margin-top: calc(-1 * (var(--hero-offset) + var(--gap-fix))) !important;
    top: 0 !important;
  }

  /* + Adminbar sichtbar → Adminbar-Höhe + Tablet-Mehrbedarf addieren */
  .admin-bar .inside-article > .fsd-fullmore:first-child,
  .admin-bar .inside-article > .entry-content > .fsd-fullmore:first-child,
  .admin-bar .inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore{
    margin-top: calc(-1 * (var(--hero-offset) + var(--adminbar-h) + var(--gap-fix) + var(--adminbar-gap-fix))) !important;
  }
}

/* Micro-Fix: 1130–1134 px – 4 px mehr Offset */
@media (min-width:1130px) and (max-width:1134.98px){
  :root{
    --hero-extra: 47px; /* 43 + 4 */
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}

/* =========================
   Mobile Slideout/Off-Canvas (GeneratePress) – Fix
   ========================= */

/* Slideout bleibt echtes Overlay (nicht vom Header-Set betroffen) */
#generate-slideout-menu.slideout-navigation{
  position: fixed !important;
  top: var(--adminbar-h, 32px);
  left: 0;
  right: 0;
  z-index: 100001 !important; /* über Header/Sticky, unter Adminbar */
}

/* =========================
   Tablet: Text im Hero nachregeln
   ========================= */
@media (max-width:1129px){
  .fsd-fullmore{
    /* richtig: --pad-top (nicht --hero-pad-top) */
    --pad-top: clamp(54px, 8vw, 128px);
  }

  body.admin-bar .fsd-fullmore{
    --pad-top: clamp(64px, 9vw, 140px);
  }
}

/* =========================
   Fallbacks/Absicherung der Sticky-Nav
   ========================= */
body.sticky-enabled #site-navigation.main-navigation.is_stuck,
body.sticky-enabled #site-navigation.main-navigation.is-stuck,
body.sticky-enabled #site-navigation.main-navigation.navigation-stick,
body.sticky-enabled #site-navigation.main-navigation.sticky-navigation,
body.sticky-enabled #site-navigation.main-navigation.sticky-navigation-transition{
  background-color:#fff !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  z-index:1000;
}

/* Linkfarben im Sticky-Zustand */
body.sticky-enabled #site-navigation.main-navigation.is_stuck .main-nav > ul > li > a,
body.sticky-enabled #site-navigation.main-navigation.is_stuck .menu-toggle,
body.sticky-enabled #site-navigation.main-navigation.is_stuck .menu-bar-items > *{
  color:#0b2f35 !important;
}

/* Hover/Aktiv */
body.sticky-enabled #site-navigation.main-navigation.is_stuck .main-nav > ul > li > a:hover{
  color:#0066cc !important;
}

/* Tablet: Hero-Text weiter nach unten */
@media (max-width:1129px){
  .fsd-fullmore{
    --pad-top: clamp(120px, 18vw, 220px); /* vorher 54–128px */
  }
}

/* Tablet: Text im Hero deutlich tiefer */
@media (max-width:1129px){
  .fsd-fullmore{
    --pad-top: clamp(180px, 20vw, 300px);
  }
  /* mit sichtbarer Adminbar etwas mehr Luft */
  body.admin-bar .fsd-fullmore{
    --pad-top: clamp(200px, 22vw, 320px);
  }
}

/* Tablet: Overlap minimal reduzieren */
@media (max-width:1129px){
  :root{
    --gap-fix: 36px;          /* vorher 53px */
    --adminbar-gap-fix: 16px; /* vorher 21px */
  }
}


/* === Sticky-Navi Clone (Reservehöhe) korrigieren === */
.navigation-clone {
  height: 57px !important; /* oder dein tatsächlicher Sticky-Header-Wert */
}


/* ===== Sticky-Nav Höhe fixen (nur nav, nicht der Platzhalter) ===== */

/* Eigene Variable für kompakte Sticky-Höhe */
:root{ --sticky-h: 57px; }           /* Desktop Sticky-Höhe */
@media (max-width:1129px){ :root{ --sticky-h: 64px; } }  /* Tablet/Mobile Sticky */

/* Platzhalter-Clone richtig behandeln – aber NICHT das nav */
.site-header > .navigation-clone,
.main-navigation + .navigation-clone,
.navigation-clone:not(nav){
  display: block !important;
  height: var(--header-h) !important;     /* Reservehöhe = normale Headerhöhe */
  background: transparent !important;
}

/* Falls das echte nav ebenfalls die Klasse 'navigation-clone' trägt: überschreiben */
nav.main-navigation.navigation-clone{
  height: auto !important;
  min-height: var(--sticky-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Generischer Sticky-Reset fürs nav */
nav.main-navigation.is_stuck,
nav.main-navigation.navigation-stick,
nav.main-navigation.sticky-navigation{
  height: auto !important;
  min-height: var(--sticky-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: height .25s ease, padding .25s ease;
}

/* (optional) Logo im Sticky-Zustand schrumpfen—nur wenn nötig */
nav.main-navigation.is_stuck .site-logo img,
nav.main-navigation.navigation-stick .site-logo img{
  max-height: 42px; /* anpassen, falls gewünscht */
}

/* =========================================================
   FIX: Navigation-Clone soll bei ≤1129px keine feste Höhe haben
   ========================================================= */
@media (max-width:1129px){
  @supports (selector(:has(*))) {
    body:has(.inside-article > .fsd-fullmore:first-child) .navigation-clone,
    body:has(.inside-article > .entry-content > .fsd-fullmore:first-child) .navigation-clone,
    body:has(.inside-article > .entry-content > .gb-container:first-child > .fsd-fullmore) .navigation-clone {
      height: auto !important;               /* feste Höhe deaktivieren */
      min-height: var(--sticky-h, 64px) !important; /* Sticky-Höhe nutzen */
    }
  }
}



/* =========================
   FSD HERO – Vollbild-Variante (.fsd-full)
   ========================= */
.fullheight {
  height: 100vh;
}








/* === FIX: Header-Hintergrund nur auf Unterseiten sichtbar === */

/* Wenn NICHT die Startseite mit .fsd-fullmore ganz oben: Header wieder deckend */
body:not(:has(.inside-article > .fsd-fullmore:first-child)) .site-header,
body:not(:has(.inside-article > .fsd-fullmore:first-child)) .main-navigation {
  background-color: #ffffff !important;
  background: #ffffff !important;
  z-index: 10000 !important;
  box-shadow: 0 2px 12px rgba(36,50,66,.08) !important;
}
/* Unterseiten: Header deckend, aber OHNE Schatten – solange NICHT sticky */
body:not(:has(.inside-article > .fsd-fullmore:first-child)) .site-header:not(.is_stuck),
body:not(:has(.inside-article > .fsd-fullmore:first-child)) .main-navigation:not(.is_stuck) {
  background: #fff !important;
  box-shadow: none !important;
}

/* Schatten NUR im Sticky-Zustand */
body.sticky-enabled #site-navigation.main-navigation.is_stuck,
body.sticky-enabled .site-header.is_stuck {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(36,50,66,.08) !important;
}


/* Button im Sticky-Menü korrigieren */
.main-navigation.sticky-navigation-transition .main-nav > ul > li > a.pill-button,
.main-navigation.sticky-navigation-transition .main-nav > ul > li > a.pill-button--invert {
  line-height: normal !important;     /* verhindert, dass er gestreckt wird */
  padding-top: 0.4em !important;
  padding-bottom: 0.4em !important;
  display: inline-flex;
  align-items: center;                 /* vertikal mittig */
}
/* ========== Menü-Button-Höhe korrigieren ========== */

/* Nur für Buttons im Menü (verhindert Einfluss der allgemeinen Regeln) */
.main-navigation .main-nav ul li a.pill-button,
.main-navigation .main-nav ul li a.pill-button--invert {
  line-height: normal !important;  /* neutralisiert 60px und 15em */
  padding-top: 0.4em !important;
  padding-bottom: 0.4em !important;
  display: inline-flex;
  align-items: center;
}

/* Optional: generelle Sicherheitskorrektur gegen den 15em-Fehler */
.main-navigation a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  line-height: 1.4 !important; /* ersetzt 15em durch realistischen Wert */
}

/*
} */ /* @layer overrides - alter CustomCSS-Inhalt */





/* =========================================================
   HERO FRONTEND: .fsd-hero.is-top
   Zieht den Hero unter den Header (Overlapping Start)
   ========================================================= */

/* --- Grundvariablen für Header-/Adminbar-/Offset-Höhen --- */
:root {
  --header-h: 57px;         /* Desktop-Headerhöhe */
  --content-gap: 0px;
  --adminbar-h: 32px;       /* WP-Adminbar Desktop */
  --hero-extra: 43px;       /* Restwert aus Messung */
  --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));

  /* Default-Fixes */
  --gap-fix: 0px;           
  --adminbar-gap-fix: 0px;  
}

/* Headerhöhe ≤1129px */
@media (max-width: 1129px) {
  :root {
    --header-h: 154px;
  }
}

/* Mobile Adminbar-Höhe */
@media (max-width: 782px) {
  :root {
    --adminbar-h: 46px;
  }
}

/* Mobile: höherer Header */
@media (max-width: 768px) {
  :root {
    --header-h: 160px;
    --hero-extra: 0px;
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}

/* Tablet: gemessene Offsets */
@media (min-width: 769px) and (max-width: 903px) {
  :root {
    --header-h: 154px;
    --hero-extra: 45px; /* 43 + 2 */
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}
@media (min-width: 904px) and (max-width: 1104px) {
  :root {
    --header-h: 154px;
    --hero-extra: 44px; /* 43 + 1 */
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}
@media (min-width: 1105px) and (max-width: 1129px) {
  :root {
    --header-h: 154px;
    --hero-extra: 43px;
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}

/* Tablet-Bereich (≤1129px): Rest-Gaps */
@media (max-width: 1129px) {
  :root {
    --gap-fix: 36px;          /* zuvor 53px – letzte Korrektur */
    --adminbar-gap-fix: 16px; /* zuvor 21px – letzte Korrektur */
  }
}

/* Micro-Fix: 1130–1134 px – +4 px Offset */
@media (min-width: 1130px) and (max-width: 1134.98px) {
  :root {
    --hero-extra: 47px; /* 43 + 4 */
    --hero-offset: calc(var(--header-h) + var(--content-gap) + var(--hero-extra));
  }
}

/* =========================================================
   Aktivierung: Hero unter den Header ziehen
   ========================================================= */

/* Standard (keine Adminbar sichtbar) */
body:not(.wp-admin) .fsd-hero.is-top {
  margin-top: calc(-1 * (var(--hero-offset) + var(--gap-fix))) !important;
  position: relative;
  z-index: 0;
}

/* Mit sichtbarer Adminbar (eingeloggt) */
body.admin-bar:not(.wp-admin) .fsd-hero.is-top {
  margin-top: calc(-1 * (var(--hero-offset) + var(--adminbar-h) + var(--gap-fix) + var(--adminbar-gap-fix))) !important;
}

/* Optionaler weicher Schatten unter dem Menü – für optische Trennung */
body:not(.wp-admin) .fsd-hero.is-top::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .2), transparent);
  pointer-events: none;
  z-index: 2;
}


/* ==============================================
   Auto-Transparenz für Header, wenn .fsd-hero.is-top oben steht
   (nur Frontend, Editor bleibt unberührt)
   ============================================== */

/* 1) Header/Navi transparent, solange NICHT sticky */
body:not(.wp-admin)
:has(
  /* Hero direkt als erstes Kind im Artikel */
  .inside-article > .fsd-hero.is-top:first-child,
  /* Hero als erstes in .entry-content */
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  /* Hero innerhalb eines ersten GB-Containers */
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.site-header:not(.is_stuck),
body:not(.wp-admin)
:has(
  .inside-article > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.main-navigation:not(.is_stuck) {
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Link-/Branding-Farben auf hell stellen (nur solange nicht sticky) */
body:not(.wp-admin)
:has(
  .inside-article > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.main-navigation:not(.is_stuck) .main-nav > ul > li > a,
body:not(.wp-admin)
:has(
  .inside-article > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.main-navigation:not(.is_stuck) .menu-bar-item > a,
body:not(.wp-admin)
:has(
  .inside-article > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.main-navigation:not(.is_stuck) .menu-toggle,
body:not(.wp-admin)
:has(
  .inside-article > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.site-header:not(.is_stuck) .site-branding a {
  color: #fff !important;
  fill: #fff !important;
}

/* Optional: helleres Hover */
body:not(.wp-admin)
:has(
  .inside-article > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.main-navigation:not(.is_stuck) .main-nav > ul > li > a:hover {
  color: #cfe9ee !important;
}

/* 3) Beim Sticky-Zustand erscheint wieder der deckende Header */
body:not(.wp-admin) .site-header.is_stuck,
body:not(.wp-admin) .main-navigation.is_stuck {
  background: #fff !important; /* oder rgba(11,47,53,.96) für dunklen Sticky */
  box-shadow: 0 2px 12px rgba(36,50,66,.08) !important;
}

/* Sticky: wieder dunkle Schriftfarben */
body:not(.wp-admin) .site-header.is_stuck .main-nav > ul > li > a,
body:not(.wp-admin) .site-header.is_stuck .menu-bar-item > a,
body:not(.wp-admin) .site-header.is_stuck .menu-toggle,
body:not(.wp-admin) .site-header.is_stuck .site-branding a {
  color: #0b2f35 !important;
  fill: #0b2f35 !important;
}

/* 4) (Optional) Logo-Switch hell/dunkel */
body:not(.wp-admin)
:has(
  .inside-article > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.site-header:not(.is_stuck) .site-logo img.logo--light { display:block; }
body:not(.wp-admin)
:has(
  .inside-article > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .fsd-hero.is-top:first-child,
  .inside-article > .entry-content > .gb-container:first-child > .fsd-hero.is-top
)
.site-header:not(.is_stuck) .site-logo img.logo--dark { display:none; }

body:not(.wp-admin) .site-header.is_stuck .site-logo img.logo--light { display:none; }
body:not(.wp-admin) .site-header.is_stuck .site-logo img.logo--dark  { display:block; }





/* Header automatisch transparent, wenn ein .fsd-hero.is-top ganz oben steht */
body:not(.wp-admin)
:is(.site-header, .main-navigation):not(.is_stuck)
{
  /* Default = deckend; wird unten über :has(...) überschrieben */
  background: #fff;
  box-shadow: 0 2px 12px rgba(36,50,66,.08);
}

/* Transparenz aktivieren, wenn .fsd-hero.is-top als erstes „sichtbares“ Kind
   in typischen Gutenberg/GB-Pfaden liegt (direkt, in .entry-content, in .wp-block-group, in .gb-container) */
body:not(.wp-admin)
:has(
  .inside-article >
    :is(
      /* direkt */
      .fsd-hero.is-top:first-child,
      /* direkt in entry-content */
      .entry-content > .fsd-hero.is-top:first-child,
      /* 1 Wrapper-Ebene */
      .entry-content > :is(.wp-block-group, .gb-container):first-child > .fsd-hero.is-top,
      /* 2 Wrapper-Ebenen (z.B. Group in Container) */
      .entry-content > :is(.wp-block-group, .gb-container):first-child
        > :is(.wp-block-group, .gb-container):first-child > .fsd-hero.is-top
    )
)
:is(.site-header, .main-navigation):not(.is_stuck) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Link-/Branding-Farbe hell, solange transparent & nicht sticky */
body:not(.wp-admin)
:has(
  .inside-article >
    :is(
      .fsd-hero.is-top:first-child,
      .entry-content > .fsd-hero.is-top:first-child,
      .entry-content > :is(.wp-block-group, .gb-container):first-child > .fsd-hero.is-top,
      .entry-content > :is(.wp-block-group, .gb-container):first-child
        > :is(.wp-block-group, .gb-container):first-child > .fsd-hero.is-top
    )
)
.main-navigation:not(.is_stuck) :is(.main-nav > ul > li > a, .menu-bar-item > a, .menu-toggle),
body:not(.wp-admin)
:has(
  .inside-article >
    :is(
      .fsd-hero.is-top:first-child,
      .entry-content > .fsd-hero.is-top:first-child,
      .entry-content > :is(.wp-block-group, .gb-container):first-child > .fsd-hero.is-top,
      .entry-content > :is(.wp-block-group, .gb-container):first-child
        > :is(.wp-block-group, .gb-container):first-child > .fsd-hero.is-top
    )
)
.site-header:not(.is_stuck) .site-branding a {
  color: #fff !important;
  fill: #fff !important;
}



.main-navigation .main-nav ul ul li a {
    font-size: 16px;
    line-height: 15px !important;
}




.fsd-contact__hero{
  padding-block: clamp(28px, 6vw, 64px);
}

/* Inhalt auf max. Breite halten */
.fsd-contact__inner{
  max-width: 1380px;          /* oder 1280px – wie auf der Startseite */
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
  box-sizing: border-box;
}

/* Grid-Abstand konservativ */
.fsd-contact__grid{
  gap: clamp(16px, 2.5vw, 36px);
}

/* ==== Kontaktformular – EIN Flächen-Container (ohne Karte/Schatten) ==== */
.fsd-contact__form{
  --card-bg: #fff;
  --card-br: var(--radius-lg, 16px);
  --card-pad: clamp(16px,2.5vw,22px);
  --line: rgba(0,0,0,.06);
  --ink: var(--ink, #0f2530);
  --muted: var(--muted, #5a6b74);
  --brand: var(--petrol, #007c89);
  --brand-ink: #fff;
  --danger: var(--danger, #c62828);

  /* eine sanft getönte Fläche, kein Karten-Look */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, white 94%, var(--petrol, #007c89)) 0%,
    color-mix(in oklab, white 90%, var(--petrol, #007c89)) 100%
  );
  background: #fff;

  box-shadow: 0 6px 28px rgba(0,0,0,.08);
  border: 1px solid var(--line);

  border-radius: 18px;       /* EIN Radius */
  padding: clamp(24px, 3vw, 32px);
}

/* Feld-Stacking + Abstände */
.fsd-contact__field{ margin-bottom: clamp(10px,1.6vw,16px); }
.fsd-contact__field label{
  display:block;
  font-weight:600;
  color: var(--ink);
  margin-bottom: 6px;
}

/* Neutral: etwas kräftiger und einheitlich */
.fsd-contact__form input[type="text"],
.fsd-contact__form input[type="email"],
.fsd-contact__form input[type="tel"],
.fsd-contact__form textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--ink, #0f2530) 18%, white);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.fsd-contact__form input:hover,
.fsd-contact__form textarea:hover{
  border-color: color-mix(in oklab, var(--ink, #0f2530) 26%, white);
}

/* Fokus dezent im Petrol */
.fsd-contact__form input:focus,
.fsd-contact__form textarea:focus{
  border-color: color-mix(in oklab, var(--petrol, #007c89) 38%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--petrol, #007c89) 14%, white);
}

/* Rot NUR wenn Formular abgesendet wurde (server- oder clientseitig) */
.fsd-contact__form.is-submitted input:invalid[required],
.fsd-contact__form.is-submitted textarea:invalid[required],
.fsd-contact__field.has-error input,
.fsd-contact__field.has-error textarea{
  border-color: var(--danger, #c62828);
  box-shadow: none;
}
.fsd-contact__form select{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--ink, #0f2530) 18%, white);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ink);
  font: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230f2530' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  cursor: pointer;
}
.fsd-contact__form select:focus{
  border-color: color-mix(in oklab, var(--petrol, #007c89) 38%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--petrol, #007c89) 14%, white);
}


/* Label & Textfarben leicht absetzen */
.fsd-contact__field label{
  color: color-mix(in oklab, var(--ink) 85%, white);
}
/* Serverseitige Fehlermeldungen */
.fsd-contact__error{
  display:block;
  color: var(--danger);
  font-size: .92rem;
  margin: 6px 0 0 2px;
}

/* Erfolgsmeldung */
.fsd-contact__success{
  background: #eaf8f2;
  border:1px solid #bfe8d6;
  color:#145c3b;
  padding: 12px 14px;
  border-radius: 10px;
}

/* Checkbox-Zeile */
.fsd-contact__checkbox{
  margin: 12px 0 16px;
  margin-top: 18px;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
}
.fsd-contact__checkbox input{ margin-right: .55rem; accent-color: var(--petrol, #007c89); }

/* Button (Fallback, falls Site-Button nicht greift) */
.fsd-contact__form .btn.btn--primary{
  display:inline-block;
  border:0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight:700;
  background: var(--brand);
  color: var(--brand-ink);
  cursor:pointer;
}
.fsd-contact__form .btn.btn--primary:hover{
  filter: brightness(1.05);
}


/* Optional: gleiche Karte im Editor hübsch anzeigen */
.editor-styles-wrapper .fsd-contact__form{ box-shadow:none; }

/* 2-Spalten-Reihe für Vor-/Nachname */
.fsd-contact__row--2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.6vw, 16px);
}

/* Mobil stapeln */
@media (max-width: 720px){
  .fsd-contact__row--2{ grid-template-columns: 1fr; }
}

/* rote Umrandung, wenn serverseitiger Fehler */
.fsd-contact__field.has-error input{
  border-color: var(--danger, #c62828);
}



/* Map-Sektion spacing */
.fsd-contact__map{
  padding-block: clamp(28px, 6vw, 72px);
}

/* Responsive Map-Wrapper */
.fsd-map-embed{
  aspect-ratio: 16 / 5;                 /* hält Höhe responsiv */
  min-height: 200px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  background: #eef3f5;                  /* sanfter Fallback-Hintergrund */
  max-width: 100%;
}

/* Iframe füllt den Wrapper vollständig */
.fsd-map-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}



/* =========================================
   Event-Detailseiten – grauer Bereich + Card
   ========================================= */

/* 1. Grauer Bereich */
body.single-event .site-content {
  background-color: #f5f5f5;
  padding: 40px 0 60px;
}

/* 2. GP-Standard-Hintergründe entfernen */
body.single-event.separate-containers .site-main > article,
body.single-event.separate-containers .site-main > .page-header {
  background: none;
  box-shadow: none;
}

/* 3. Außen minimal Luft für schmale Screens */
body.single-event .site-main {
  padding: 0 20px;
}

/* 4. Weißer Card-Container (ohne Padding – das kommt gleich extra) */
body.single-event .inside-article {
  max-width: 1100px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
  border: none;
}

/* 5. Padding-Override für die Fälle,
      in denen GP es auf 0 setzt (.full-width-content…) */
body.single-event.full-width-content.separate-containers .inside-article {
  padding: 60px 60px 70px;   /* top / left+right / bottom */
}

/* 6. Titel-Feintuning */
body.single-event .inside-article .entry-title {
  margin-top: 0;
}

/* =========================================
   Mobiles Layout für Event-Detailseiten
   ========================================= */
@media (max-width: 768px) {

  /* Weißer Container soll komplett breit werden */
  body.single-event .inside-article {
    max-width: 100%;
    border-radius: 0;  /* Optional – kann auch 20px bleiben */
  }

  /* Innenabstand auf Mobilgeräten anpassen */
  body.single-event.full-width-content.separate-containers .inside-article {
    padding: 30px 20px 40px; /* top / left-right / bottom */
  }

  /* Optional: Seitlicher Außenabstand zurückfahren */
  body.single-event .site-main {
    padding: 0 0;  /* GP handled the full width already */
  }
}