.site-header {
    border-bottom: 1px solid var(--strobl-gray-accent);
    position: fixed;
    width: 100%;
    z-index: 1000;
	  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

h2 {
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

/* Animations */
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-h1 {
    opacity: 0;
    animation: slideInDown 1s ease-out forwards !important;
    animation-delay: 0.5s !important;
}

.animate-sub {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards !important;
    animation-delay: 1.2s !important;
}

.animate-btns {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards !important;
    animation-delay: 0.5s !important; /* Gleiche Zeit wie H1 für das Gegeneinander-Gefühl */
}




.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}



/* 2. DEFAULT BUTTONS (Haupt-Aktion: Gelb) */
button, 
.button, 
input[type="submit"], 
input[type="button"], 
.wp-block-button__link {
    background-color: var(--strobl-yellow) !important;
    color: #000000 !important;
    border: 2px solid var(--strobl-yellow) !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
    transition: all 0.3s ease !important;
    display: inline-block;
    cursor: pointer;
    line-height: 1;
}

/* Hover für alle Standard-Buttons */
button:hover, 
.button:hover, 
input[type="submit"]:hover, 
.wp-block-button__link:hover {
    background-color: var(--strobl-gray-surface) !important;
    color: var(--strobl-white) !important;
    border-color: var(--strobl-white) !important;
}

/* 3. Active (Dein Wunsch: Deep Gray beim Klick) */
button:active, .button:active, input[type="submit"]:active {
    background-color: var(--strobl-gray) !important; /* #1c1c1c */
    border-color: var(--strobl-white-muted) !important;
    transform: translateY(1px); /* Button senkt sich beim Klick leicht ab */
    transition: all 0.05s !important; /* Sehr schnelle Reaktion beim Klick */
}

/* RESET für den Menü-Button (verhindert das Riesenteil) */
.menu-toggle, 
.main-navigation .menu-toggle, 
.main-navigation .menu-toggle:hover, 
.main-navigation .menu-toggle:focus {
    width: auto !important;
    height: auto !important;
    padding: 10px 15px !important; /* Kleineres, sauberes Padding fürs Handy */
    background-color: transparent !important;
    border: none !important;
    color: var(--strobl-white) !important;
    box-shadow: none !important;
    transform: none !important;
}


/* --- NEUER, ROBUSTER CHECKBOX-PART (MIT HAKEN) --- */

/* 4. DEFAULT CHECKBOXEN (Form & Shape) */
input[type="checkbox"], 
input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: var(--strobl-gray-surface) !important;
    border: 2px solid var(--strobl-gray-accent) !important;
    
    /* Box-Größe & Form (Quform proof) */
    display: inline-block !important;
    width: 22px !important; 
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Radio rund, Checkbox leicht eckig */
input[type="radio"] { border-radius: 50% !important; }
input[type="checkbox"] { border-radius: 7px !important; }

/* Zustand: Ausgewählt (Checked) - Hintergrund & Rahmen wechseln */
input[type="checkbox"]:checked, 
input[type="radio"]:checked {
    background-color: var(--strobl-gray) !important;
    border-color: var(--strobl-white) !important;
}

/* --- DER WICHTIGSTE TEIL: Der Haken (Symbol) via ::after --- */
input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: var(--strobl-white) !important; /* Hakenfarbe */
    width: 10px !important;
    height: 10px !important;
    
    /* Erzeugt ein scharfes Haken-Form via Clip-Path */
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}



/* ============================================================
   DER ULTIMATIVE STROBL-TOGGLE (PILLEN-DESIGN)
   ============================================================ */

/* 1. Die Hülle um beide Buttons (erzwingt die Reihe) */
.strobl-toggle .quform-options {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    background-color: #2a2a2a !important;
    border: 2px solid #3d3d3d !important;
    border-radius: 50px !important;
    padding: 4px !important;
    gap: 0 !important;
    width: auto !important;
}

/* 2. Den unsichtbaren Container um Ja/Nein neutralisieren */
.strobl-toggle .quform-option {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    width: auto !important;
}

/* 3. Das Aussehen der Buttons (Normalzustand) */
.strobl-toggle .quform-option-label {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 40px !important;
    padding: 5px 10px !important;
    font-weight: 500 !important;
    text-align: center !important;
    min-width: 80px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* 4. Der aktive Zustand (Der Slider) */
.strobl-toggle input:checked + .quform-option-label {
    background-color: #ffffff !important;
    color: #1c1c1c !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

/* 5. Versteckt die Radio-Punkte (falls sie noch da sind) */
.strobl-toggle input[type="radio"] {
    display: none !important;
}


/* --- DIE PILLEN-REVOLUTION --- */

/* 1. Erzwingt, dass die Hülle die Buttons umschließt */
.quform-element.strobl-toggle .quform-options {
    display: inline-flex !important;
    background-color: #2a2a2a !important; /* Surface Gray */
    border: 2px solid #3d3d3d !important; /* Accent Gray */
    border-radius: 50px !important;
    padding: 4px !important;
    gap: 0 !important;
    width: auto !important;
    overflow: hidden !important;
}

/* 2. Löscht die Abstände der Einzel-Container */
.quform-element.strobl-toggle .quform-option {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    width: auto !important;
}

/* 3. Grundzustand der Buttons (Durchsichtig) */
.quform-element.strobl-toggle .quform-option-label {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    min-width: 80px !important;
    text-align: center !important;
}

/* 4. Aktiver Zustand (Weißer Slider) */
.quform-element.strobl-toggle input:checked + .quform-option-label {
    background-color: #ffffff !important;
    color: #1c1c1c !important; /* Schwarzer Text auf Weiß */
}

/* 5. Radio-Kreise endgültig verstecken */
.quform-element.strobl-toggle input[type="radio"] {
    display: none !important;
}

.fa {
    color: white;
    margin-right: 5px;
}

.quform-label.quform-label-1_110 {
    white-space: nowrap;
}

@media (max-width: 1024px) {
  .quform-label-1_104,
  .quform-label-1_109,
	.quform-label-2_185,
	.quform-label-2_186 {
    display: none;
  }
}

.quform-label.quform-label-2_184 {
  white-space: nowrap;
}

input.select2-search__field {
    color: black;
}

.quform .quform-input-multiselect .select2-container--quform .select2-selection {
  background: white;
}

.select2-results__options {
  color: black;
}

.select2-container--quform .select2-selection--multiple .select2-selection__choice {
	border-radius: 4px;
}

.k-animation-container {
  box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.3);
}

.inside-header {
    padding: 10px 40px;
}

.wp-block-button__link.wp-element-button {
	text-align: center;
}

.post-password-required {
  margin-top: 85px;
}

/* Entfernt den blauen Kasten beim Tippen auf Handy */
a, button, .quform-option-label, .quform-button, [role="button"] {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* 1. Vorbereitung: Blauen Kasten weg und Transition überall aktivieren */
a, 
button, 
.button, 
.quform-submit, 
.quform-option-label, 
.menu-link,
[role="button"] {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    /* Transition sorgt dafür, dass das Zurückfedern smooth ist */
    transition: transform 0.1s ease-out, filter 0.1s ease-out !important;
}

/* 2. Der subtile Effekt: 0.98 ist der "Goldstandard" für High-End UIs */
a:active, 
button:active, 
.button:active, 
.quform-submit:active, 
.quform-option-label:active,
.menu-link:active {
    transform: scale(0.98) !important; /* Nur noch 2% Verkleinerung */
    filter: brightness(0.9) !important;   /* Nur minimale Abdunklung */
}

#main {
  margin-top: 80px;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    font-weight: 600;
}

.main-navigation .main-nav ul li a {
    padding-left: 15px;
    padding-right: 15px;
    line-height: 45px;
}

.main-navigation .main-nav>ul {
    justify-content: center;
}

@media (min-width: 2170px) {
    .animate-btns {
        font-size: 30px !important;
    }
}


.quform-option-custom-label .quform-option-label {
    background-color: #2a2a2a !important; /* Dein edles Strobl-Grau */
    color: #ffffff !important;
    border: 2px solid #3d3d3d !important;
    border-radius: 50px !important;
    padding: 15px 10vw !important;
    margin-bottom: 0px !important;
    text-align: center !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.quform-option-custom-label .quform-option-label:hover {
  color: #ffffff !important;
  cursor: pointer;
  background-color: var(--strobl-gray) !important;
  border: 2px solid #ffffff !important;
}

input, 
textarea,
.quform-field {
	border-radius: 8px !important;
}




.quform-custom-header {
    text-align: center;
    margin-bottom: -2px;
    border-bottom: 2.5px solid var(--strobl-gray-accent);
    padding-bottom: 15px;
}

a {
    text-decoration-line: none;
}


.grid-container {
  max-width: 1600px;
}

#menu-item-898 {
  border: solid var(--strobl-white-muted) 1px;
  margin-left: 20px;
  border-radius: 50px;
  padding: 2px 5px;
  font-weight: 700 !important;
  text-align: center;
  max-width: 250px;
}

#menu-item-898 a {
    font-weight: 600 !important;
	  color: var(--strobl-white) !important;
}

@media (max-width: 768px) {
	#menu-item-898 {
			margin-top: 10px;
		  margin-bottom: 10px;
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
      float: none !important;
		  background: var(--strobl-gray);
		  color: var(--strobl-white) !important;
	}
}

.main-navigation.toggled .main-nav li {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  display: block !important;
}

#menu-item-898:hover {
    border-color: var(--strobl-yellow) !important;
}

#menu-item-898:hover a {
    color: var(--strobl-yellow) !important;
}

.strobl-popup {
  display: none;
  pointer-events: none;
}

.strobl-popup.active {
  display: block;
  pointer-events: auto;
}

.post-password-form {
  border-width: 75px 10px !important;
  border-top-style: solid;
  border-color: var(--strobl-gray);
  text-align: center;
}

.post-password-form input {
  margin-bottom: 25px;
}

@media (min-width: 769px) {
	#menu-item-898 {
		display: none;
	}
}

@media (max-width: 975px) {
  .gb-text.gb-text-7e68dd29 {
    margin-left: -20px;
    margin-right: -20px;
  }
}

@media (max-width: 893px) {
	.header-widget {
		display: none;
	}
}




.fade-right,
.fade-left {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
}


.fade-right::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  height: 100%;
  width: 30%;

  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0) 100%
  );

  pointer-events: none;

  opacity: 0;
  transition: opacity 0.25s ease;
}


.fade-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 30%;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0) 100%
  );

  pointer-events: none;

  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (min-width: 768px) and (max-width: 1200px) {
  .fade-right::before,
  .fade-left::before {
    opacity: 1;
  }
}

@-moz-document url-prefix() {
  @media (max-width: 767px) {
    .cal-wrapper[data-type="buero"] .cal-event-text {
      font-size: 8.8px;
    }

    .cal-wrapper:not([data-type="buero"]) .cal-event-content {
      font-size: 8.8px;
    }
  }
}

strong.quform-custom-header-strong {
  color: var(--strobl-white);
}

#wpadminbar {
  position: fixed !important;
}

[id] {
  scroll-margin-top: 120px;
}

.strobl-404 {
  text-align: center;
  padding-top: clamp(60px, 8vw, 110px);
  padding-bottom: clamp(70px, 9vw, 130px);
}

.strobl-404 .entry-header {
  margin-bottom: 18px;
}

.strobl-404-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 42px;
  margin: 0 0 18px;
  padding: 8px 18px;
  border: 2px solid var(--strobl-yellow);
  border-radius: 999px;
  color: var(--strobl-yellow);
  font-weight: 800;
  line-height: 1;
}

.strobl-404 .entry-title {
  margin-bottom: 0;
}

.strobl-404 .entry-content {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

.strobl-404 .entry-content p {
  margin-bottom: 28px;
}

.strobl-404-actions {
  display: flex;
  justify-content: center;
}