@charset "UTF-8";
/* ==========================================================================
   LAUNCHPAD: GLOBALE VARIABLEN & UTILITIES
   ========================================================================== */
/* * NEUER IMPORT:
 * Lade die Utility-Klassen (.mv-container-width-*, .mv-spacing-top-*)
 *
 * (Der Pfad muss relativ zu DIESER Datei sein. 
 * Wenn _utilities.scss im selben Ordner liegt, ist 'utilities' korrekt.)
 */
/* ==========================================================================
   LAUNCHPAD: GLOBALE UTILITY-KLASSEN (SPACING & CONTAINER)
   ========================================================================== */
/* ==========================================================================
   4. GLOBALE CONTAINER-BREITEN (Utility-Klassen)

   Diese Klassen werden im PHP auf den __inner-container angewendet.
   ========================================================================== */
/* Basis-Styling für alle inneren Container */
.mv-inner-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  /* Globaler Seitenabstand, damit Inhalt nicht am Rand klebt */
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Breiten-Modifikatoren */
.mv-container-width-default {
  max-width: var(--content-width-default);
}

.mv-container-width-narrow {
  max-width: var(--content-width-narrow);
}

.mv-container-width-very-narrow {
  max-width: var(--content-width-very-narrow);
}

.mv-container-width-gp-default {
  max-width: var(--content-width-gp);
}

.mv-container-width-full_width {
  max-width: none;
  /* Bei 100% Breite den inneren Abstand aufheben */
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   5. GLOBALE SPACING-UTILITIES (v1.5 Logik)

   Diese Klassen werden im PHP auf den Haupt-Wrapper
   jedes Blocks angewendet (z.B. <section class="mv-text mv-spacing-top-l ...">)
   ========================================================================== */
.mv-spacing-top-none {
  padding-top: 0 !important;
}

.mv-spacing-top-s {
  padding-top: var(--spacing-s) !important;
}

.mv-spacing-top-m {
  padding-top: var(--spacing-m) !important;
}

.mv-spacing-top-l {
  padding-top: var(--spacing-l) !important;
}

.mv-spacing-top-xl {
  padding-top: var(--spacing-xl) !important;
}

.mv-spacing-top-xxl {
  padding-top: var(--spacing-xxl) !important;
}

.mv-spacing-bottom-none {
  padding-bottom: 0 !important;
}

.mv-spacing-bottom-s {
  padding-bottom: var(--spacing-s) !important;
}

.mv-spacing-bottom-m {
  padding-bottom: var(--spacing-m) !important;
}

.mv-spacing-bottom-l {
  padding-bottom: var(--spacing-l) !important;
}

.mv-spacing-bottom-xl {
  padding-bottom: var(--spacing-xl) !important;
}

.mv-spacing-bottom-xxl {
  padding-bottom: var(--spacing-xxl) !important;
}

/* ==========================================================================
   KOMPONENTE: Globale Typografie

   Diese Datei weist die globalen CSS-Variablen (von GeneratePress
   oder aus custom-style.scss) den Launchpad-Komponenten-Klassen zu.
   ========================================================================== */
:root {
  /* ==========================================================================
     2. TYPOGRAFIE-SYSTEM
     ========================================================================== */
  --heading-color: var(--base);
  /* --- Display Headlines --- */
  /* 100px @ 1920px | 34px @ 375px */
  --font-size-display-1: clamp(2.125rem, calc(1.124rem + 4.272vw), 6.25rem);
  --line-height-display-1: 1.1;
  /* 80px @ 1920px | 34px @ 375px */
  --font-size-display-2: clamp(2.125rem, calc(1.427rem + 2.977vw), 5rem);
  --line-height-display-2: 1.1;
  /* --- Headlines (H1 - H5) --- */
  /* 60px @ 1920px | 28px @ 375px */
  --font-size-h1: clamp(1.75rem, calc(1.265rem + 2.071vw), 3.75rem);
  --line-height-h1: 1.4;
  /* 48px @ 1920px | 24px @ 375px */
  --font-size-h2: clamp(1.5rem, calc(1.136rem + 1.553vw), 3rem);
  --line-height-h2: 1.4;
  /* 36px @ 1920px | 20px @ 375px */
  --font-size-h3: clamp(1.25rem, calc(1.007rem + 1.036vw), 2.25rem);
  --line-height-h3: 1.4;
  /* 28px @ 1920px | 18px @ 375px */
  --font-size-h4: clamp(1.125rem, calc(0.973rem + 0.647vw), 1.75rem);
  --line-height-h4: 1.3;
  /* 24px @ 1920px | 16px @ 375px */
  --font-size-h5: clamp(1rem, calc(0.879rem + 0.518vw), 1.5rem);
  --line-height-h5: 1.3;
  /* --- Body / Paragraphs --- */
  /* p (Standard): 20px @ 1920px | 16px @ 375px */
  --font-size-p: clamp(1rem, calc(0.94rem + 0.259vw), 1.25rem);
  --line-height-p: 1.6;
  /* p-big: 24px @ 1920px | 18px @ 375px */
  --font-size-p-big: clamp(1.125rem, calc(1.03rem + 0.388vw), 1.5rem);
  --line-height-p-big: 1.5;
  /* p-small: 16px @ 1920px | 14px @ 375px */
  --font-size-p-small: clamp(0.875rem, calc(0.84rem + 0.129vw), 1rem);
  --line-height-p-small: 1.5;
  /* Legacy / Extras */
  --font-size-body: var(--font-size-p);
  --body-line-height: var(--line-height-p);
  /* Overline */
  --font-size-overline: var(--font-size-p);
  --line-height-overline: 1.3;
  /* Subline */
  --font-size-subline: var(--font-size-h4);
  --line-height-subline: 1.4;
}

/* ==========================================================================
   HELPER: Apply Variables to Semantic Tags
   Ensure h1-h6 tags match the visual classes if no class is present or generally
   ========================================================================== */
/* Fallback to H5 or define H6 var */
/* --- 1. Basis-Styling für die Headline-Komponente --- */
.mv-headline .mv-headline__overline {
  font-size: var(--font-size-overline);
  line-height: var(--line-height-overline);
  font-weight: bold;
  color: var(--accent, #555);
  display: block;
  margin-bottom: var(--spacing-s);
}
.mv-headline .mv-headline__subline {
  font-size: var(--font-size-subline);
  line-height: var(--line-height-subline);
  font-weight: bold;
  color: var(--base-2, #555);
  display: block;
}
.mv-headline .mv-headline__headline {
  margin: 0;
  font-weight: var(--font-weight-heading, 700);
  color: var(--heading-color, #222);
  margin-bottom: var(--spacing-m);
}

/* --- 2. Visuelle Stil-Modifikatoren --- */
/* Diese Klassen wenden die Typo-Variablen auf das Headline-Element an */
/* Display Headlines */
.mv-headline--style-display-1 .mv-headline__headline,
.mv-headline--style-display-1.mv-headline__headline {
  font-size: var(--font-size-display-1);
  line-height: var(--line-height-display-1);
}

.mv-headline--style-display-2 .mv-headline__headline,
.mv-headline--style-display-2.mv-headline__headline {
  font-size: var(--font-size-display-2);
  line-height: var(--line-height-display-2);
}

/* Standard Headlines */
.mv-headline--style-h1 .mv-headline__headline,
.mv-headline--style-h1.mv-headline__headline {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

.mv-headline--style-h2 .mv-headline__headline,
.mv-headline--style-h2.mv-headline__headline {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

.mv-headline--style-h3 .mv-headline__headline,
.mv-headline--style-h3.mv-headline__headline {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.mv-headline--style-h4 .mv-headline__headline,
.mv-headline--style-h4.mv-headline__headline {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.mv-headline--style-h5 .mv-headline__headline,
.mv-headline--style-h5.mv-headline__headline {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

/* Paragraph Styles */
.mv-headline--style-p .mv-headline__headline,
.mv-headline--style-p.mv-headline__headline,
.mv-headline--style-body .mv-headline__headline,
.mv-headline--style-body.mv-headline__headline {
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
  font-weight: var(--font-weight-body, 400);
}

.mv-headline--style-p-big .mv-headline__headline,
.mv-headline--style-p-big.mv-headline__headline {
  font-size: var(--font-size-p-big);
  line-height: var(--line-height-p-big);
  font-weight: var(--font-weight-body, 400);
}

.mv-headline--style-p-small .mv-headline__headline,
.mv-headline--style-p-small.mv-headline__headline {
  font-size: var(--font-size-p-small);
  line-height: var(--line-height-p-small);
  font-weight: var(--font-weight-body, 400);
}

/* --- 3. Visuelle Modifikatoren (Ausrichtung) --- */
/* Diese Klassen steuern die Text-Ausrichtung der gesamten Komponente */
.mv-headline--align-left {
  text-align: left;
}

.mv-headline--align-center {
  text-align: center;
}
@media (max-width: 768px) {
  .mv-headline--align-center {
    text-align: left;
  }
}

body {
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
}

p,
ul,
ol,
li {
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
}

ul:not(.main-navigation ul):not(.mobile-menu-container ul):not(.sub-menu),
ol:not(.main-navigation ol):not(.mobile-menu-container ol) {
  margin: 0 0 1.5em 1.25rem;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

h6 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

/* ==========================================================================
   KOMPONENTE: Button
   ========================================================================== */
.mv-button, .mv-gated-modal__body form input[type=submit], .wpcf7-form input[type=submit] {
  display: inline-block;
  padding: var(--spacing-s) var(--spacing-l);
  text-decoration: none;
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-p);
  border-radius: var(--spacing-xs);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  border-radius: var(--solvia-btn-radius);
  /* ==========================================================================
     MODIFIKATOREN (aus ACF "button_style" Feld)
     ========================================================================== */
}
.mv-button--primary, .mv-gated-modal__body form input[type=submit], .wpcf7-form input[type=submit] {
  background-color: var(--base);
  color: var(--base-3);
  border: 2px solid var(--base);
}
.mv-button--primary:focus, .mv-gated-modal__body form input[type=submit]:focus, .wpcf7-form input[type=submit]:focus, .mv-button--primary:active, .mv-gated-modal__body form input[type=submit]:active, .wpcf7-form input[type=submit]:active {
  background-color: var(--base);
  color: var(--base-3);
  border-color: var(--base);
}
.mv-button--primary:hover, .mv-gated-modal__body form input[type=submit]:hover, .wpcf7-form input[type=submit]:hover {
  border-radius: 0;
  color: var(--base);
  background-color: transparent;
}
.mv-button--secondary {
  background-color: transparent;
  color: var(--base);
  border: 2px solid var(--base);
}
.mv-button--secondary:focus, .mv-button--secondary:active {
  background-color: transparent;
  color: var(--base);
  border-color: var(--base);
}
.mv-button--secondary:hover {
  border-radius: 0;
}
.mv-button--accent {
  background-color: var(--accent);
  color: var(--base);
  border: 2px solid var(--accent);
}
.mv-button--accent:focus, .mv-button--accent:active {
  background-color: var(--accent);
  color: var(--base);
  border-color: var(--accent);
}
.mv-button--accent:hover {
  border-radius: 0;
  color: var(--accent);
  background-color: transparent;
}
.mv-button--accent-outline {
  background-color: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.mv-button--accent-outline:focus, .mv-button--accent-outline:active {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.mv-button--accent-outline:hover {
  border-radius: 0;
  background-color: var(--accent);
  color: var(--base);
}
.mv-button, .mv-gated-modal__body form input[type=submit], .wpcf7-form input[type=submit] {
  /* --- Style: Text --- */
}
.mv-button--text {
  background-color: transparent;
  color: var(--accent);
  border: none;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.mv-button--text:hover, .mv-button--text:focus {
  text-decoration: underline;
}

/* ==========================================================================
   FORMS (Contact Form 7 Overrides)
   ========================================================================== */
.wpcf7-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-m);
}
@media (min-width: 768px) {
  .wpcf7-form {
    grid-template-columns: repeat(2, 1fr);
  }
}
.wpcf7-form {
  /* Hide the hidden fields container visually if needed, though usually it's hidden */
}
.wpcf7-form .hidden-fields-container {
  display: none;
}
.wpcf7-form {
  /* Labels / Fields Wrapper */
  /* Target direct labels or paragraphs if AutoP is on */
}
.wpcf7-form > label,
.wpcf7-form > p {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
  margin: 0;
  /* Default to full width on mobile */
  grid-column: 1/-1;
  /* Desktop: span 1 by default (2 columns) */
}
@media (min-width: 768px) {
  .wpcf7-form > label,
  .wpcf7-form > p {
    grid-column: span 1;
    /* Check if label/p contains a textarea, acceptance, checkbox, or submit button */
  }
  .wpcf7-form > label:has(textarea), .wpcf7-form > label:has(.wpcf7-acceptance), .wpcf7-form > label:has(.wpcf7-checkbox), .wpcf7-form > label:has(input[type=submit]),
  .wpcf7-form > p:has(textarea),
  .wpcf7-form > p:has(.wpcf7-acceptance),
  .wpcf7-form > p:has(.wpcf7-checkbox),
  .wpcf7-form > p:has(input[type=submit]) {
    grid-column: 1/-1;
  }
}
.wpcf7-form {
  /* Input & Textarea Styles */
}
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background-color: var(--base-4);
  /* Light bg */
  border: 1px solid transparent;
  border-radius: var(--solvia-btn-radius);
  padding: var(--spacing-m);
  font-family: inherit;
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
  color: var(--base);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.wpcf7-form input[type=text]:focus,
.wpcf7-form input[type=email]:focus,
.wpcf7-form input[type=tel]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--primary);
}
.wpcf7-form input[type=text]::-moz-placeholder, .wpcf7-form input[type=email]::-moz-placeholder, .wpcf7-form input[type=tel]::-moz-placeholder, .wpcf7-form select::-moz-placeholder, .wpcf7-form textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.wpcf7-form input[type=text]::placeholder,
.wpcf7-form input[type=email]::placeholder,
.wpcf7-form input[type=tel]::placeholder,
.wpcf7-form select::placeholder,
.wpcf7-form textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.wpcf7-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
  padding-right: 40px;
  height: 66px;
  /* Ensure cursor pointer for better UX */
  cursor: pointer;
}
.wpcf7-form textarea {
  min-height: 150px;
  resize: vertical;
}
.wpcf7-form {
  /* Label Text */
}
.wpcf7-form label {
  font-size: var(--font-size-p);
  color: var(--heading-color);
}
.wpcf7-form {
  /* Submit Button */
}
.wpcf7-form input[type=submit] {
  /* Layout specific */
  width: auto;
  justify-self: start;
  grid-column: 1/-1;
  /* Loading Spinner Adjustment */
}
.wpcf7-form input[type=submit] + .wpcf7-spinner {
  margin: 0;
  align-self: center;
}
.wpcf7-form input[type=submit] {
  /* 
     "Disabled" State 
     - Applies when button is explicitly disabled (e.g. during submission)
     - Applies if form is natively invalid (requires 'required' attribute on inputs)
  */
}
.wpcf7-form input[type=submit][disabled], .wpcf7-form input[type=submit]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  /* Reset Hover Effects */
}
.wpcf7-form input[type=submit][disabled]:hover, .wpcf7-form input[type=submit]:disabled:hover {
  background-color: var(--base);
  color: var(--base-3);
  border: 2px solid var(--base);
  border-radius: var(--solvia-btn-radius);
}
.wpcf7-form {
  /* Response Output */
}
.wpcf7-form .wpcf7-response-output {
  grid-column: 1/-1;
  margin: var(--spacing-m) 0 0;
  padding: var(--spacing-m);
  border-radius: var(--solvia-btn-radius);
  background-color: var(--green);
  font-size: var(--font-size-p);
}
.wpcf7-form .wpcf7-response-output:empty {
  display: none;
  padding: 0;
  margin: 0;
  border: none;
}
.wpcf7-form .wpcf7-response-output.wpcf7-display-none {
  display: none;
}
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors, .wpcf7-form .wpcf7-response-output.wpcf7-acceptance-missing {
  border: 1px solid #dc3232 !important;
  color: #dc3232 !important;
  background-color: color-mix(in srgb, #dc3232 10%, transparent) !important;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  border: 1px solid #46b450 !important;
  color: #46b450 !important;
  background-color: color-mix(in srgb, #46b450 10%, transparent) !important;
}
.wpcf7-form .wpcf7-not-valid-tip {
  color: var(--accent);
}
.wpcf7-form {
  /* -----------------------------------------------------------------
     OVERRIDES & UTILS
     1. Top Validation Box (Screen Reader Response)
     2. Checkboxes (Acceptance / Privacy)
     ----------------------------------------------------------------- */
  /* 2. Checkboxes (Privacy Policy etc.) */
  /* Use general selector for acceptance or generic checkboxes */
  /* Note: If [acceptance] is used without a wrapping label/p in the editor, 
     the .wpcf7-form-control-wrap might be the direct grid child. 
     We ensure that wrapper spans full width. 
  */
}
.wpcf7-form > .wpcf7-form-control-wrap,
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
  grid-column: 1/-1;
  /* Full width */
  width: 100%;
}
.wpcf7-form > .wpcf7-form-control-wrap .wpcf7-list-item,
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
  display: block;
  /* or flex */
}
.wpcf7-form > .wpcf7-form-control-wrap,
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
  /* Ensure text is next to checkbox, not below */
}
.wpcf7-form > .wpcf7-form-control-wrap label,
.wpcf7-form .wpcf7-acceptance label,
.wpcf7-form .wpcf7-checkbox label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* or flex-start for long text */
  gap: var(--spacing-s);
  font-weight: 400;
  /* Regular weight for legal text usually */
  width: 100%;
}
.wpcf7-form > .wpcf7-form-control-wrap,
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
  /* Larger Checkbox */
}
.wpcf7-form > .wpcf7-form-control-wrap input[type=checkbox],
.wpcf7-form .wpcf7-acceptance input[type=checkbox],
.wpcf7-form .wpcf7-checkbox input[type=checkbox] {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  margin: 5px 0 0 0;
  cursor: pointer;
  accent-color: var(--base);
}

/* Screen Reader Response (OUTSIDE of .wpcf7-form) */
.screen-reader-response {
  display: none;
}

/* === MV Gated Content Overrides === */
.mv-gated-title {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--base);
  font-weight: 700;
  margin: 0 0 var(--spacing-xs) 0;
}

.mv-gated-subtitle {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  color: var(--base-2);
  font-weight: 700;
  margin: 0 0 var(--spacing-m) 0;
}

.mv-gated-modal__body form input[type=submit] {
  width: auto;
  margin-top: var(--spacing-s);
}

.mv-gated-modal__body form label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
  margin: 0;
  font-size: var(--font-size-p);
  color: var(--heading-color);
}

.mv-gated-modal__body form input[type=text],
.mv-gated-modal__body form input[type=email],
.mv-gated-modal__body form input[type=tel],
.mv-gated-modal__body form select,
.mv-gated-modal__body form textarea {
  width: 100%;
  background-color: #f4f4f4;
  border: 1px solid transparent;
  border-radius: var(--solvia-btn-radius);
  padding: var(--spacing-m);
  font-family: inherit;
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
  color: var(--base);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.mv-gated-modal__body form input[type=text]:focus,
.mv-gated-modal__body form input[type=email]:focus,
.mv-gated-modal__body form input[type=tel]:focus,
.mv-gated-modal__body form select:focus,
.mv-gated-modal__body form textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--primary);
}
.mv-gated-modal__body form input[type=text]::-moz-placeholder, .mv-gated-modal__body form input[type=email]::-moz-placeholder, .mv-gated-modal__body form input[type=tel]::-moz-placeholder, .mv-gated-modal__body form select::-moz-placeholder, .mv-gated-modal__body form textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mv-gated-modal__body form input[type=text]::placeholder,
.mv-gated-modal__body form input[type=email]::placeholder,
.mv-gated-modal__body form input[type=tel]::placeholder,
.mv-gated-modal__body form select::placeholder,
.mv-gated-modal__body form textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mv-gated-modal__body form {
  /* Apply same select fix to gated content if needed, usage of direct select selector handles it above? 
     Actually, because of the nesting .mv-gated-modal__body form select, we should ensure it applies here too if specific overrides are verified. 
     The shared block above at line 49 is inside .wpcf7-form.
     The block here at 258 is inside .mv-gated-modal__body form.
     So we DO need to replicate it here.
  */
}
.mv-gated-modal__body form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
  padding-right: 40px;
  height: 66px;
  cursor: pointer;
}
.mv-gated-modal__body form textarea {
  min-height: 150px;
  resize: vertical;
}

/* ==========================================================================
   CUSTOM NAVIGATION
   ========================================================================== */
.main-navigation {
  background-color: transparent !important;
}

.custom-site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, top 0.1s ease;
  /* Desktop Dimensions */
  height: 95px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  /* Initial Transparent State */
  background-color: transparent !important;
  /* Force transparency */
}
.custom-site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
}

/* Admin Bar Fix - Handled by JS dynamically for mobile, fixed for desktop */
body.admin-bar .custom-site-header {
  /* For desktop (width > 782px), admin bar is fixed, so 32px is constant. */
  /* JS will overwrite this inline, but it should result in 32px anyway. */
  top: 32px;
}

@media (max-width: 782px) {
  /* Remove static offset for mobile. JS handles it. */
  /* If JS fails, it defaults to top: 0 (covering admin bar when at top), which is acceptable fallback. */
  body.admin-bar .custom-site-header {
    top: 0;
  }
}
/* Prevent content overlap */
/* Prevent content overlap */
#page {
  padding-top: 188px;
}

@media (max-width: 768px) {
  #page {
    padding-top: 90px;
    /* Increased spacing as requested */
  }
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  /* Create stacking context */
  z-index: 1050;
  /* Ensure this sits above the mobile menu (z-999) */
}

.site-branding a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.site-branding img {
  max-height: 50px;
  width: auto;
}
.site-branding .logo-white {
  display: none;
  /* Hidden by default */
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Ensure branding stays above mobile menu */
.site-branding {
  position: relative;
  z-index: 1001;
}

/* Desktop Menu */
.main-navigation {
  display: block;
}
.main-navigation ul {
  /* Ensure specificity for menu items */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
  align-items: center;
}
.main-navigation ul li {
  margin: 0;
  padding: 0;
}
.main-navigation ul li a {
  text-decoration: none;
  color: #333;
  /* Default text color */
  font-size: var(--font-size-p-big);
  /* User requested p-big */
  transition: color 0.2s ease;
}
.main-navigation ul li a:hover {
  color: var(--accent, #1e73be);
}
.main-navigation ul li {
  /* Active State */
}
.main-navigation ul li.current-menu-item > a, .main-navigation ul li.current-menu-ancestor > a {
  color: var(--accent, #1e73be);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.main-navigation ul li .menu-dropdown-icon {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  fill: currentColor;
  transition: transform 0.2s ease;
}
.main-navigation ul li:hover > a .menu-dropdown-icon {
  transform: rotate(180deg);
}
.main-navigation ul li {
  /* Submenu support (minimal) */
}
.main-navigation ul li.menu-item-has-children {
  position: relative;
}
.main-navigation ul li.menu-item-has-children > ul {
  display: none;
  position: absolute;
  top: calc(100% + 30px);
  /* 30px gap */
  left: 0;
  background: var(--base-4);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
  width: -moz-max-content;
  width: max-content;
  /* Ensure it expands to fit content */
  height: auto;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  /* Ensure shadows and content aren't clipped */
  transition: opacity 0.2s ease, visibility 0.2s ease;
  /* Hover Bridge: Invisible pseudo-element to bridge the gap */
}
.main-navigation ul li.menu-item-has-children > ul::before {
  content: "";
  position: absolute;
  top: -30px;
  /* fills the gap upwards */
  left: 0;
  width: 100%;
  height: 30px;
  background: transparent;
}
.main-navigation ul li.menu-item-has-children > ul li {
  width: 100%;
}
.main-navigation ul li.menu-item-has-children > ul li a {
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  color: #333;
  font-size: var(--font-size-p);
  /* Ensure readable size */
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: 4px;
}
.main-navigation ul li.menu-item-has-children > ul li a:hover, .main-navigation ul li.menu-item-has-children > ul li a:focus {
  color: var(--base-3);
}
.main-navigation ul li.menu-item-has-children:hover > ul, .main-navigation ul li.menu-item-has-children:focus-within > ul, .main-navigation ul li.menu-item-has-children.is-open > ul {
  display: flex;
  opacity: 1;
  visibility: visible;
}
.main-navigation ul li {
  /* 
     If a list item has the class .mv-button, transfer the styling logic
     to the <a> tag inside it.
  */
}
.main-navigation ul li.mv-button {
  /* Reset LI behavior that might interfere */
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.main-navigation ul li.mv-button a {
  /* Base Button Styles from _button.scss */
  display: inline-block;
  padding: var(--spacing-s) var(--spacing-l);
  text-decoration: none;
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-p);
  /* Usually buttons are p, not p-big */
  border-radius: var(--solvia-btn-radius) !important;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;
}
.main-navigation ul li.mv-button {
  /* Primary Variant */
}
.main-navigation ul li.mv-button.mv-button--primary a {
  background-color: var(--base);
  color: var(--base-3);
  border: 2px solid var(--base);
}
.main-navigation ul li.mv-button.mv-button--primary a:hover {
  border-radius: 0 !important;
  background-color: var(--base);
  color: var(--base-3);
}
.main-navigation ul li.mv-button {
  /* Secondary Variant */
}
.main-navigation ul li.mv-button.mv-button--secondary a {
  background-color: transparent;
  color: var(--base);
  border: 2px solid var(--contrast);
}
.main-navigation ul li.mv-button.mv-button--secondary a:hover {
  border-radius: 0 !important;
}
.main-navigation ul li.mv-button {
  /* Accent Variant */
}
.main-navigation ul li.mv-button.mv-button--accent a {
  background-color: var(--accent);
  color: var(--base);
  border: 2px solid var(--accent);
}
.main-navigation ul li.mv-button.mv-button--accent a:hover {
  border-radius: 0 !important;
  color: var(--base);
}
.main-navigation ul li.mv-button {
  /* Accent Outline Variant */
}
.main-navigation ul li.mv-button.mv-button--accent-outline a {
  background-color: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.main-navigation ul li.mv-button.mv-button--accent-outline a:hover {
  border-radius: 0 !important;
}

/* Mobile Toggle & Menu - Default Hidden on Desktop */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  /* Fixed width */
  height: 30px;
  /* Fixed height */
  color: #333;
  position: relative;
  /* Context for absolute icons */
  z-index: 1002;
  /* Icon Container Styles */
}
.mobile-menu-toggle .icon-open,
.mobile-menu-toggle .icon-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu-toggle svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mobile-menu-toggle {
  /* Initial State */
}
.mobile-menu-toggle .icon-open {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.mobile-menu-toggle .icon-close {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
  pointer-events: none;
  /* Prevent interaction when hidden */
}
.mobile-menu-toggle {
  /* Active State (X icon) */
}
.mobile-menu-toggle.is-active .icon-open {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}
.mobile-menu-toggle.is-active .icon-close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: auto;
}

.mobile-menu-container {
  display: block;
  position: fixed;
  top: 95px;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: color-mix(in srgb, var(--base), transparent 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(15px);
  padding: 20px 120px 40px 120px; /* Increased bottom padding */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  z-index: 999;
  /* Transition Logic */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu-container.is-open {
  opacity: 1;
  visibility: visible;
}
.mobile-menu-container {
  /* FIX: Mobile menu must also respect admin bar */
}
body.admin-bar .mobile-menu-container {
  top: 127px;
  /* 95 + 32 */
  height: calc(100vh - 127px);
  height: calc(100dvh - 127px);
}
.mobile-menu-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu-container ul li {
  margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--base-4), transparent 50%);
  padding-bottom: 16px;
}
.mobile-menu-container ul li:last-child {
  border-bottom: none;
}
.mobile-menu-container ul li {
  /* Active State Logic for Mobile */
}
.mobile-menu-container ul li.current-menu-item > a, .mobile-menu-container ul li.current-menu-ancestor > a {
  color: var(--accent, #1e73be);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mobile-menu-container ul li {
  /* Tighter spacing for items with open children */
}
.mobile-menu-container ul li.menu-item-has-children {
  padding-bottom: 5px;
  /* Reduce padding to pull submenu closer */
}
.mobile-menu-container ul li a {
  text-decoration: none;
  color: #333;
  font-size: 20px;
  font-weight: 500;
  display: block;
}
.mobile-menu-container ul li {
  /* Mobile Button overrides if needed */
}
.mobile-menu-container ul li.mv-button {
  /* User request: hide this button from the mobile overlay menu */
  display: none !important;
  /* Reset LI behavior that might interfere */
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.mobile-menu-container ul li.mv-button a {
  /* Base Button Styles from _button.scss */
  display: inline-block;
  padding: var(--spacing-s) var(--spacing-l);
  text-decoration: none;
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-p);
  /* Usually buttons are p, not p-big */
  border-radius: var(--solvia-btn-radius) !important;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-radius 0.1s ease-in-out;
  width: auto;
  /* Reset width */
}
.mobile-menu-container ul li.mv-button {
  /* Primary Variant */
}
.mobile-menu-container ul li.mv-button.mv-button--primary a {
  background-color: var(--base);
  color: var(--base-3);
  border: 2px solid var(--base);
}
.mobile-menu-container ul li.mv-button.mv-button--primary a:hover {
  border-radius: 0 !important;
  background-color: var(--base);
  color: var(--base-3);
}
.mobile-menu-container ul li.mv-button {
  /* Secondary Variant */
}
.mobile-menu-container ul li.mv-button.mv-button--secondary a {
  background-color: transparent;
  /* Ensure visibility on blue background */
  color: var(--base-3);
  border: 2px solid var(--base-3);
  /* On blue background, secondary button probably needs white border/text */
  /* However, if we stick strictly to class definition it might be different. 
     But usually secondary on dark/brand bg is white.
     Let's stick to standard definition first, or adapt? 
     Standard: color: var(--base), border: var(--contrast) (which is likely dark?)
     If background is Blue, standard secondary (dark text) might look bad if transparent.
     Let's assume standard behavior first as requested: "wie die anderen Buttons".
  */
  color: var(--base);
  border: 2px solid var(--contrast);
  /* BUT wait, if we are in mobile menu with blue background, 
      maybe we should force white?
      The user asked: "wie die anderen Buttons".
      Let's use the standard definitions.
   */
}
.mobile-menu-container ul li.mv-button.mv-button--secondary a:hover {
  border-radius: 0 !important;
}
.mobile-menu-container ul li.mv-button {
  /* Override Secondary specifically for this context if needed? 
     If the user wants it exactly like others, we stick to code.
     But wait, on blue background (translucent), dark text might be low contrast?
     Let's stick to the code block I copied from desktop for consistency. 
  */
  /* Accent Variant */
}
.mobile-menu-container ul li.mv-button.mv-button--accent a {
  background-color: var(--accent);
  color: var(--base);
  border: 2px solid var(--accent);
}
.mobile-menu-container ul li.mv-button.mv-button--accent a:hover {
  border-radius: 0 !important;
  color: var(--base);
}
.mobile-menu-container ul li.mv-button {
  /* Accent Outline Variant */
}
.mobile-menu-container ul li.mv-button.mv-button--accent-outline a {
  background-color: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.mobile-menu-container ul li.mv-button.mv-button--accent-outline a:hover {
  border-radius: 0 !important;
}
.mobile-menu-container ul li {
  /* Responsive Submenu Handling */
}
.mobile-menu-container ul li.menu-item-has-children .menu-dropdown-icon {
  display: none;
}
.mobile-menu-container ul li.menu-item-has-children .sub-menu {
  display: block;
  /* Always show */
  position: static;
  /* No absolute positioning */
  box-shadow: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  min-width: 0;
  margin-top: var(--spacing-l);
}
.mobile-menu-container ul li.menu-item-has-children .sub-menu li {
  margin-bottom: 0;
  padding-bottom: 15px;
  /* Spacing between sub-items */
  border-bottom: none;
  padding-left: 15px;
  /* Indentation */
}
.mobile-menu-container ul li.menu-item-has-children .sub-menu li a {
  opacity: 0.8;
}
.mobile-menu-container ul li.menu-item-has-children .sub-menu li:last-child {
  padding-bottom: 0;
}

/* Mobile Menu Text Colors (User Request: White --base-3) */
body.no-scroll .mobile-menu-container ul li a {
  color: var(--base-3);
  /* White */
}
body.no-scroll .mobile-menu-container ul li.current-menu-item > a,
body.no-scroll .mobile-menu-container ul li.current-menu-ancestor > a {
  color: var(--base-3);
  text-underline-offset: 4px;
  text-decoration: underline;
}

/* White Logo & Icon Toggle logic */
/* When menu is open (body.no-scroll) */
/* 1. Hide Standard Logo */
body.no-scroll .site-branding .custom-logo-link:not(.logo-white) {
  display: none !important;
}

/* 2. Show White Logo */
body.no-scroll .site-branding .custom-logo-link.logo-white {
  display: flex !important;
  /* or block/inline-flex depending on layout */
}

/* 3. Make Toggle Icons White */
body.no-scroll .mobile-menu-toggle {
  color: var(--base-3) !important;
}

/* 4. Hide Header Background (Avoid "Edge") when Menu is Open */
body.no-scroll .custom-site-header,
body.no-scroll .custom-site-header.scrolled {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .custom-site-header {
    height: 70px;
    padding: 0 40px;
  }
  .mobile-menu-container {
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 90px 40px 80px 40px; /* Increased bottom padding to 80px */
  }
  body.admin-bar .mobile-menu-container {
    top: 0;
    padding-top: 122px;
    /* 90 + 32 */
    height: 100vh;
    height: 100dvh;
  }
  .main-navigation .menu-item-has-children:hover > ul {
    display: none;
    /* Disable hover submenus on touch */
  }
  /* Mobile Nav Logic: Hide all items EXCEPT .mv-button */
  .main-navigation {
    display: block !important;
    /* Force show the container */
    margin-left: auto;
    /* Push to right */
    margin-right: 20px;
    /* Space from toggle */
    width: auto;
    /* Don't take full width */
    flex-grow: 0;
  }
  .main-navigation ul {
    display: flex !important;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .main-navigation ul li {
    display: none !important;
    /* Force hide standard items */
  }
  .main-navigation ul li.mv-button {
    display: block !important;
    /* Force show CTA */
    margin-bottom: 0 !important;
  }
  .main-navigation ul li.mv-button a {
    font-size: 14px;
    /* Slightly smaller for mobile context */
    padding: 8px 12px;
    white-space: nowrap;
  }
  .mobile-menu-toggle {
    display: block;
  }
}
@media (max-width: 768px) {
  .site-branding img {
    max-height: 30px;
    /* Align with toggle */
  }
  .custom-site-header {
    height: auto;
    /* Let padding define height */
    padding: 16px 12px !important;
    /* User Requirement: 16px T/B, 12px L/R */
    /* Mobile Sticky background usually same as desktop scrolled */
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
  }
  .mobile-menu-container {
    /* Header height = 30px (icon/img) + 32px (padding) = 62px */
    /* Gap Fix: Use top: 0 to cover full screen and avoid calculation gaps */
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 80px 20px 100px 20px; /* Increased bottom padding to 100px for safe area */
    /* Top padding clears the header */
  }
  body.admin-bar .mobile-menu-container {
    top: 0;
    padding-top: 126px;
    /* 80 + 46 */
    height: 100vh;
    height: 100dvh;
  }
  .custom-site-header.scrolled {
    /* Ensure transparency logic holds if we want to change it on mobile */
    /* But request says: "Mobile: Sticky, Background... becomes... after scroll" */
    /* So actually it should start transparent on mobile too? */
    /* The request says: "Mobile: ... sticky, Background der Navigation wird nach dem ersten scrollen..." */
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* We need to re-apply the scrolled class logic for mobile if strictly following "nach dem ersten scrollen" */
  .custom-site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
  }
  .custom-site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
  }
}
/* Blur Transition Base */
#page,
.site-footer {
  transition: filter 0.3s ease;
}

/* Scroll Lock & Blur Content */
body.no-scroll {
  overflow: hidden;
  /* Blur the content behind the menu */
}
body.no-scroll #page,
body.no-scroll .site-footer {
  filter: blur(5px);
}

/* ==========================================================================
   LANGUAGE SWITCHER
   ========================================================================== */
.mv-lang-switcher {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font-size: var(--font-size-p-small);
  color: #333;
  line-height: 1;
}
.mv-lang-switcher a {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.mv-lang-switcher a:hover, .mv-lang-switcher a.active {
  opacity: 1;
  color: var(--accent, #1e73be);
}
.mv-lang-switcher .sep {
  margin: 0 5px;
  opacity: 0.4;
  font-weight: 300;
}
.mv-lang-switcher {
  /* Hide on mobile/tablet (<= 1024px) */
}
@media (max-width: 1024px) {
  .mv-lang-switcher {
    display: none;
  }
}

/* ==========================================================================
   MOBILE DRAWER LANGUAGE SWITCHER
   ========================================================================== */
.mv-mobile-lang-switcher {
  display: none;
  /* Hidden on Desktop */
  margin-top: 30px;
  font-size: var(--font-size-p);
  color: var(--base-3);
  /* White for mobile drawer */
}
.mv-mobile-lang-switcher a {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  opacity: 0.8;
}
.mv-mobile-lang-switcher a:hover, .mv-mobile-lang-switcher a.active {
  opacity: 1;
  text-decoration: underline;
}
.mv-mobile-lang-switcher .sep {
  margin: 0 10px;
  opacity: 0.6;
}
@media (max-width: 1024px) {
  .mv-mobile-lang-switcher {
    display: flex;
    align-items: center;
    /* justify-content: center; If we want it centered */
  }
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */
.site-footer {
  background-color: #001e38;
  color: #ffffff;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-l);
  font-size: var(--font-size-p);
  line-height: 1.6;
}
.site-footer a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.site-footer .footer-container {
  max-width: var(--content-width-default);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--spacing-m);
}
@media (max-width: 1024px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-l);
  }
}
.site-footer {
  /* --- LEFT COLUMN: BRANDING --- */
}
.site-footer .footer-branding {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}
.site-footer .footer-branding .footer-logo img {
  max-width: 200px;
  height: auto;
}
.site-footer .footer-branding .footer-slogan {
  font-size: var(--font-size-p);
  max-width: 300px;
  margin-bottom: var(--spacing-s);
}
.site-footer .footer-branding .footer-partner-logo {
  margin-top: var(--spacing-s);
}
.site-footer .footer-branding .footer-partner-logo img {
  max-width: 120px;
  height: auto;
}
.site-footer {
  /* --- MIDDLE COLUMN: CONTACT & SOCIALS --- */
}
.site-footer .footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}
.site-footer .footer-contact .footer-socials {
  display: flex;
  gap: var(--spacing-m);
  margin-top: var(--spacing-s);
}
.site-footer .footer-contact .footer-socials .social-link {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-footer .footer-contact .footer-socials .social-link svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.site-footer {
  /* --- RIGHT COLUMN: NAVIGATION --- */
}
.site-footer .footer-navigation {
  justify-self: end;
}
@media (max-width: 1024px) {
  .site-footer .footer-navigation {
    justify-self: start;
    margin-top: var(--spacing-m);
  }
}
.site-footer .footer-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--spacing-l);
  font-weight: 700;
}
@media (max-width: 1024px) {
  .site-footer .footer-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-m);
    row-gap: var(--spacing-s);
  }
}
.site-footer .footer-navigation ul li {
  margin-bottom: 0;
}
.site-footer {
  /* --- BOTTOM ROW: META --- */
}
.site-footer .footer-meta {
  grid-column: 1/-1;
  border-top: 0px solid rgba(255, 255, 255, 0.1);
}
.site-footer .footer-meta .footer-meta-container {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 1024px) {
  .site-footer .footer-meta .footer-meta-container {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    gap: var(--spacing-m);
  }
}
.site-footer .footer-meta .footer-meta-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--spacing-l);
}
@media (max-width: 768px) {
  .site-footer .footer-meta .footer-meta-container ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-m);
  }
}
.site-footer .footer-meta .footer-meta-container ul li {
  margin: 0;
}
.site-footer {
  /* --- GLOBAL LINK --- */
}
.site-footer .footer-global-link {
  grid-column: 1/-1;
  justify-self: end;
  margin-top: var(--spacing-m);
}
@media (max-width: 1024px) {
  .site-footer .footer-global-link {
    margin-top: var(--spacing-xl);
    justify-self: start;
  }
}
.site-footer .footer-global-link .button-global {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  font-size: var(--font-size-p-small);
  text-decoration: none;
}
.site-footer .footer-global-link .button-global::after {
  content: none;
}
.site-footer {
  /* --- MOBILE REORDERING LOGIC --- */
}
@media (max-width: 1024px) {
  .site-footer {
    gap: 16px !important;
  }
  .site-footer .footer-branding,
  .site-footer .footer-contact {
    display: contents;
  }
  .site-footer .footer-navigation {
    order: 1;
    width: 100%;
    margin-bottom: 16px;
  }
  .site-footer .footer-logo {
    order: 2;
  }
  .site-footer .footer-slogan {
    order: 3;
  }
  .site-footer .footer-partner-logo {
    order: 4;
    margin-top: 0;
    margin-bottom: 16px;
  }
  .site-footer .footer-address {
    order: 5;
    margin-bottom: 16px;
  }
  .site-footer .footer-socials {
    order: 6;
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: 16px;
  }
  .site-footer .footer-meta {
    order: 7;
    margin-top: 0;
    padding-top: 0;
    padding-top: 32px;
    width: 100%;
  }
  .site-footer .footer-meta .footer-meta-container {
    justify-content: flex-start;
  }
  .site-footer .footer-meta .footer-meta-container ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-m);
    align-items: center;
  }
  .site-footer .footer-global-link {
    order: 8;
    margin-top: 0;
    margin-top: 16px;
  }
}

/* ==========================================================================
   GLOBAL MODAL
   ========================================================================== */
.solvia-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Use unquote to pass color-mix directly, or just fallback rgba */
  background-color: rgba(1, 38, 77, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-m);
  backdrop-filter: blur(4px);
}

.solvia-modal-dialog {
  background-color: var(--base-3, #ffffff);
  border-radius: 15px;
  padding: var(--spacing-xl);
  max-width: 800px;
  width: 100%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  /* Left align all text */
  text-align: left;
}

.solvia-modal-close {
  position: absolute;
  top: var(--spacing-m);
  right: var(--spacing-m);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--heading-color);
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}
.solvia-modal-close:hover {
  color: var(--primary);
}

.solvia-modal-overline {
  display: block;
  color: var(--accent);
  font-size: var(--font-size-overline);
  line-height: var(--line-height-overline);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: var(--spacing-s);
}

.solvia-modal-headline {
  color: var(--heading-color, #222);
  font-weight: var(--font-weight-heading, 700);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  margin-top: 0;
  margin-bottom: var(--spacing-m);
}

.solvia-modal-subline {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: bold;
  color: var(--base-2, #555);
  margin-bottom: var(--spacing-m);
}

.solvia-modal-text {
  margin-bottom: var(--spacing-l);
  color: var(--heading-color);
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
}

.solvia-modal-buttons {
  display: flex;
  gap: var(--spacing-m);
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .solvia-modal-dialog {
    padding: var(--spacing-l);
  }
}
/* ==========================================================================
    GLOBALE VARIABLEN (SPACING, TYPO & BREITEN)
   ========================================================================== */
:root {
  /* --- 1. SPACING-SYSTEM --- */
  --spacing-xs: 0.25rem;
  /* 4px */
  --spacing-s: 0.5rem;
  /* 8px */
  --spacing-m: 1rem;
  /* 16px */
  --spacing-l: 2rem;
  /* 32px */
  --spacing-xl: 4rem;
  /* 64px */
  --spacing-xxl: 8rem;
  /* 128px */
  /* Standard-Abstand zwischen Blöcken (wird im Block-SCSS verwendet) */
  --block-spacing-default: var(--spacing-xxl);
  /* Globaler Seitenabstand für Container (links/rechts) */
  --container-padding: var(--spacing-l);
  /* z.B. 32px */
  /* ==========================================================================
     3. GLOBALE CONTAINER-BREITEN (Variablen)
     ========================================================================== */
  /* Der GP-Standard (als Fallback) */
  --content-width-gp: var(--container-width);
  /* z.B. 1200px von GP */
  /* Unsere neuen, kuratierten Launchpad-Breiten */
  --content-width-default: 1400px;
  --content-width-narrow: 1200px;
  --content-width-very-narrow: 900px;
  /* ==========================================================================
     4. GLOBALE Variablen
     ========================================================================== */
  --solvia-radius: clamp(15px, 7cqw, 100px) 0;
  --solvia-btn-radius: clamp(10px, 0.5em, 20px) 0;
}

/* ==========================================================================
   HELPER: Apply Variables to Semantic Tags
   Moved to components/_typography.scss
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    /* Desktop-Override: 64px */
    --block-spacing-default: var(--spacing-xxl);
  }
}
@media (max-width: 768px) {
  :root {
    /*--spacing-m: 0.5rem; */
    --spacing-l: 1rem;
    /* Mobile Spacing Halved */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-xxl: 4rem;
    /* 64px */
    --container-padding: var(--spacing-m);
  }
}
/* ==========================================================================
   5. DECORATIVE ELEMENTS (Global Sidebar Shapes)
   ========================================================================== */
.mv-bg-decorations {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Changed from -1 to 0 to be visible above body bg */
  overflow: hidden;
}

.mv-bg-deco {
  position: absolute;
  width: clamp(300px, 30vw, 1200px);
  height: clamp(100px, 50svh, 1200px);
  background-color: color-mix(in srgb, var(--base, #000), transparent 40%);
  border-radius: 50px;
  top: 50%;
  transform: translateY(-50%);
  rotate: 15deg;
}

.mv-bg-deco--left {
  left: 0;
  /* Slide in + continuous float */
  animation: slideInLeft 1s cubic-bezier(0.2, 0.8, 0.2, 1) both, floatLeft 6s ease-in-out infinite alternate 1s;
  /* Starts after 1s */
}

.mv-bg-deco--right {
  right: 0;
  /* Slide in + continuous float */
  animation: slideInRight 1s cubic-bezier(0.2, 0.8, 0.2, 1) both, floatRight 7s ease-in-out infinite alternate 1.1s;
  /* Different duration/delay for organic feel */
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate(-100%, -50%);
  }
  to {
    opacity: 0.05;
    transform: translate(-50%, -50%);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate(100%, -50%);
  }
  to {
    opacity: 0.05;
    transform: translate(50%, -50%);
  }
}
@keyframes floatLeft {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(-52%, -48%);
    /* Subtle movement */
  }
}
@keyframes floatRight {
  from {
    transform: translate(50%, -50%);
  }
  to {
    transform: translate(48%, -52%);
    /* Subtle movement */
  }
}/*# sourceMappingURL=custom-style.css.map */